/* miro.ventures theme: loaded after the shared engine stylesheet (site.css), overrides tokens and
   adds the few site-only blocks. Palette (PRD 2026-10-15): red, blue, white and beige, with the
   shared ink #0A0A0A for dark sections. Regenerate green appears ONLY in the hand-off block.
   Colour rules (contrast checked in test/site.test.mjs):
   - --green is the engine's "accent" token: here it is red #FF4A3D. Fills behind ink text, and
     text on ink. Never text on beige or white (3.1:1).
   - --green-deep is the accent TEXT colour on light grounds: here blue #1F3FB4 (7.9:1 on beige).
   - Beige #F7F2E8 is the page ground; white is for cards and fields. */
:root {
  --paper: #F7F2E8;
  --white: #FFFFFF;
  --beige: #EFE6D6;
  --line: #DDD3C2;
  --slate: #5C5A55;
  --green: #FF4A3D;
  --green-deep: #1F3FB4;
  --green-wash: #FFFFFF;
  --ember: #1F3FB4;
  --red: #FF4A3D;
  --blue: #1F3FB4;
  --regen: #C6FF00;
}

/* Wordmark: one line, the dot in red. */
.brand-word { font-size: 22px; }
.brand-word i { font-style: normal; color: var(--red); }
.ftr .brand-word i { color: var(--red); }

/* Estrie banner on every page (PRD cross-linking rule). */
.estrie-bar { background: var(--ink); color: #CFCFCF; font-size: 13px; }
.estrie-bar .wrap { padding-top: 8px; padding-bottom: 8px; }
.estrie-bar a { color: var(--paper); box-shadow: inset 0 -1px 0 var(--red); }
.estrie-bar a:hover { color: var(--red); }

/* Header and links on light grounds use blue for small accents. */
.ink .body a { box-shadow: inset 0 -1px 0 rgba(255, 74, 61, .6); }
.body a, .checks a, .route-rule a, .not-for a { color: var(--blue); box-shadow: inset 0 -1px 0 currentColor; }
.ink .checks a { color: var(--paper); }

/* Hero: headline + portrait. */
.mv-hero .hero-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.mv-hero .display { max-width: 13ch; }
.mv-hero .intro { margin-top: 18px; color: var(--paper); max-width: 52ch; font-size: 17px; }
.mv-hero .wrap { padding-top: clamp(56px, 9vw, 130px); padding-bottom: clamp(48px, 7vw, 100px); }
.mv-hero .btns { margin-top: 32px; }
.mv-hero .hero-portrait { margin: 0; }
.mv-hero .hero-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.not-for-line { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); font-size: 14px; color: #CFCFCF; max-width: 60ch; }
.not-for-line b { color: var(--red); font-weight: 600; }
@media (max-width: 900px) {
  .mv-hero .hero-grid { grid-template-columns: 1fr; }
  .mv-hero .hero-portrait { display: none; } /* the portrait is on /about; the fold goes to the pitch */
  /* "Not for" stays above the fold on mobile (PRD): tighter hero rhythm. */
  .mv-hero .wrap { padding-top: 36px; }
  .mv-hero .lead { margin-top: 18px; }
  .not-for-line { margin-top: 20px; }
}

/* Proof strip on a light ground: numbers in ink, a red rule. */
.proof .stats { border-top: 2px solid var(--red); }
.proof .stat .num { color: var(--ink); }
.proof .stat { border-color: var(--line) !important; }
.proof .stat .lbl { color: var(--slate); }

/* Fit columns. */
.not-for .checks li::before { background: var(--ink); border-color: var(--ink); }
.not-for .h2 { margin-top: 0; }
@media (min-width: 901px) { .not-for { padding-top: 34px; } }

/* Beige band sections. */
.section.beige { background: var(--beige); }
.section.beige .practice { border-top-color: var(--ink); }
.cols-3.models { gap: 0 clamp(24px, 3vw, 44px); grid-template-columns: repeat(3, 1fr); display: grid; }
@media (max-width: 900px) { .cols-3.models { grid-template-columns: 1fr; } }

/* Six process steps: 3 + 3. */
.six-steps .steps { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
@media (max-width: 900px) { .six-steps .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .six-steps .steps { grid-template-columns: 1fr; } }

/* Hand-off to Regenerate: the only place Regenerate green appears. */
.handoff-row { align-items: stretch; }
.handoff { background: var(--regen); color: var(--ink); padding: clamp(28px, 4vw, 48px); }
.handoff .eyebrow::before { background: var(--ink); }
.handoff .arrow { color: var(--ink); border-bottom-color: var(--ink); }
.handoff .arrow:hover { box-shadow: inset 0 -3px 0 var(--ink); }
.estrie-card { border: 1px solid var(--ink); padding: clamp(28px, 4vw, 48px); background: var(--white); }

/* Newsletter embed. */
.substack { border: 1px solid var(--line); background: var(--white); display: block; }

/* GDA logo wall (text until logos are cleared). */
.logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.logo-wall li { padding: 22px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 19px; }
.logo-wall li.more { color: var(--slate); font-family: var(--sans); font-size: 14px; }
@media (max-width: 560px) { .logo-wall { grid-template-columns: 1fr 1fr; } }

/* Footer routing rule. */
.route-rule { margin-top: 36px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); font-size: 14.5px; color: #CFCFCF; }
.route-rule b { color: var(--paper); }
.ftr .route-rule a { color: var(--paper); box-shadow: inset 0 -1px 0 var(--red); }
.ftr .mv-top { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 900px) { .ftr .mv-top { grid-template-columns: 1fr 1fr; } }

/* Fields and cards are white on the beige ground. */
.field input, .field select, .field textarea { background: var(--white); }
.contact-card { background: var(--white); }
.tomb { background: var(--white); }

/* Home headline: the fractional roles, one at a time, in red. CSS only: one strip of roles
   slides up a line every 2s (the first is repeated at the end so the loop is seamless). */
.mv-hero .roles { display: block; height: 1.12em; overflow: hidden; }
.mv-hero .roles > span { display: block; animation: mv-roles 12s infinite; }
.mv-hero .roles em { display: block; height: 1.12em; white-space: nowrap; }
@keyframes mv-roles {
  0%, 14% { transform: translateY(0); }
  16.67%, 30.67% { transform: translateY(-1.12em); }
  33.33%, 47.33% { transform: translateY(-2.24em); }
  50%, 64% { transform: translateY(-3.36em); }
  66.67%, 80.67% { transform: translateY(-4.48em); }
  83.33%, 97.33% { transform: translateY(-5.6em); }
  100% { transform: translateY(-6.72em); }
}
@media (prefers-reduced-motion: reduce) { .mv-hero .roles > span { animation: none; } }