/* ============================================================================
   bto-founder.css — the four components founder.html needs that the shared
   static chain does not ship.

   WHY A SEPARATE FILE, NOT bto-static.css
   Two other designers were live in bto-static.css / reveals.js / static-panels.js
   at build time. Editing a shared file would have collided. This file is the
   sanctioned escape hatch: linked from founder.html ONLY, immediately after
   bto-static.css, so bto-css/palette.css still loads LAST and the theme
   variables still win. Nothing here is referenced by about.html, contact.html,
   work.html, index.html or the React services build.

   WHAT IS IN HERE — and why each one is not already in bto-static.css
     1  .svc-step / .svc-step-top / .svc-step-n / .svc-step-name / .svc-step-line
        The hairline-ruled row used by F5 and F7. bto-static.css has NO
        `.svc-step` (singular) at all — the only `.svc-step*` on disk is
        `.svc-steps` (plural, a different component) in services-compact.css,
        which is not loaded on a static page. So this is genuinely missing, not
        duplicated.
     2  .fdr-cols — F5's three-column perspective grid.
     3  #founder-stats override — .bto-stats is repeat(5, 1fr) because
        about.html's record strip has five items. F3 has four; without this the
        fourth column of a five-column grid sits empty and the strip reads as a
        dropped item rather than a set.
     4  .fdr-blank-note — the standalone blank for the missing founder portrait,
        which needs to be a block, not the inline `.bto-blank` run.

   CONTRACT — the same one bto-static.css states about itself, held here:
     · zero new colour values. Tokens only. Every token used below is defined in
       palette.css and already used by bto-static.css.
     · zero !important.
     · every selector scoped under .bto-static.
     · -3deg is the only rotation. This file introduces none.
     · exactly two curves: cubic-bezier(.2,.7,.2,1) and ease. This file uses one.
     · every motion carries a prefers-reduced-motion branch (§ 5).
   ========================================================================== */


/* --- 1. THE STEP ROW — F5 columns and F7 credit rows ---------------------- */
/* A hairline-ruled text row. Deliberately type-only: F7 is a filmography and
   design-system gap D3 records that adding imagery there is a mistake, not a
   gap to fill. */
.bto-static .svc-steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bto-static .svc-step {
  padding: clamp(24px, 3vh, 36px) 0;
  border-top: 1px solid var(--bg-hairline);
}
.bto-static .svc-step:last-child { border-bottom: 1px solid var(--bg-hairline); }

/* On GROUND C the light hairline is invisible. --fg-on-dark-mute is the token
   bto-static.css already uses for muted ink on dark, so the rule keeps its
   weight through the theme flip instead of vanishing in one of the two themes. */
.bto-static .bto-panel--dark .svc-step { border-top-color: var(--fg-on-dark-mute); }
.bto-static .bto-panel--dark .svc-step:last-child { border-bottom-color: var(--fg-on-dark-mute); }

.bto-static .svc-step-top {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0 0 10px;
}
.bto-static .svc-step-n {
  flex: 0 0 auto;
  font-family: Antonio, Archivo, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--fg-accent);
}
.bto-static .bto-panel--dark .svc-step-n { color: var(--fill-accent); }

.bto-static .svc-step-name {
  margin: 0;
  font-family: Antonio, Archivo, sans-serif;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg-heading);
}
.bto-static .bto-panel--dark .svc-step-name { color: var(--fg-on-dark); }

/* The role kicker under a name — F5's "Director / Cinematographer / Editor". */
.bto-static .svc-step-kicker {
  margin: 0 0 10px;
  font-family: Antonio, Archivo, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, .8vw, 14px);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-accent);
}
.bto-static .bto-panel--dark .svc-step-kicker { color: var(--fill-accent); }

.bto-static .svc-step-line {
  margin: 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-body);
}
/* .bto-panel--dark p in bto-static.css already re-inks this on GROUND C. */


/* --- 2. F5 — the three-column perspective grid ---------------------------- */
.bto-static .fdr-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 901px) {
  .bto-static .fdr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Inside a column the row keeps its top rule but drops the closing one — three
   columns each closing with a rule reads as a table, not as three ideas. */
.bto-static .fdr-cols .svc-step:last-child { border-bottom: 0; }


/* --- 3. F3 — four stats, not five ---------------------------------------- */
/* Scoped to the id so about.html's five-item record strip is untouched. */
@media (min-width: 992px) {
  .bto-static #founder-stats .bto-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --- 3b. THE CTA PAIR ON GROUND C — a real contrast bug, caught in QA ----- */
/* bto-static.css ships `.bto-static .bto-panel--dark a { color: var(--fg-on-dark) }`
   (2 classes) which OUT-SPECIFIES `.bto-static .p2-cta--primary` (2 classes,
   earlier in the cascade). So the amber-filled primary button inside F9's dark
   panel was inheriting cream ink on an amber fill — measured 1.41:1 in the QA
   pass, the exact failure the spec flags at § 2. The button must keep
   --fg-on-accent whatever ground it lands on: the fill is amber in both themes,
   so its ink never changes.
   3 classes + element beats the 2-class rule outright — no !important needed. */
.bto-static .bto-panel--dark a.p2-cta--primary {
  color: var(--fg-on-accent);
  -webkit-text-fill-color: var(--fg-on-accent);
}
/* The ghost button's 1px --bg-hairline outline is a light-ground token and all
   but disappears on GROUND C. --fg-on-dark-mute is the token already used for
   muted ink on dark and clears the flip to navy. */
.bto-static .bto-panel--dark .p2-cta--ghost { border-color: var(--fg-on-dark-mute); }


/* --- 4. THE PORTRAIT BLANK — asset gap D1 -------------------------------- */
/* Was: no founder portrait, so the hero carried a visible text marker instead
   of a stock face. FILLED 2026-08-09 — real portrait now on disk
   (images/founder-portrait.jpg, cropped 3:4 from _notes/founder-portrait-src-
   800sq.jpg per the founder file). .fdr-blank-note kept, unused, in case a
   future page needs the same asset-gap idiom. */
.bto-static .fdr-blank-note {
  display: block;
  margin: clamp(20px, 2.4vh, 28px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
}

/* --- 4b. THE PORTRAIT — added 2026-08-09 --------------------------------- */
/* Modest, framed, sits under the lede on GROUND A (dark hero). Real photo,
   3:4, on a real set — not a backdrop. */
.bto-static .fdr-portrait {
  margin: clamp(24px, 3vh, 36px) 0 0;
  max-width: 220px;
}
.bto-static .fdr-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}


/* --- 5. REDUCED MOTION ---------------------------------------------------- */
/* This file ships no transitions or animations of its own — every motion on the
   page comes from reveals.js / static-panels.js / bto-static.css, each of which
   carries its own branch. The block is declared anyway so that any rule added
   here later inherits the page's non-negotiable contract by default rather than
   shipping unbranched. */
@media (prefers-reduced-motion: reduce) {
  .bto-static .svc-step,
  .bto-static .fdr-cols { transition: none; }
}