/* ── the faces · self hosted, two files, 47 KB together ────────────────────
   Archivo is ONE variable file carrying 100 to 900, so every weight on this
   site costs 35 KB once. `font-display:swap` so a slow connection in Beirut
   reads the page in the fallback rather than staring at nothing. */
@font-face{
  font-family:"Archivo";
  src:url("assets/fonts/Archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("assets/fonts/Newsreader-300-normal.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dr Kabalane Yammine · the project layer
   Gate 4 · 11 sep 2026 · implements 00_BRIEF/DESIGN.md and contradicts none of it

   The house kit is imported, never re implemented. Everything below either
   overrides one of the token families DESIGN.md names, or builds a component
   the kit does not have. Nothing here restyles the kit from zero.

   THE ONE RULE THAT SEPARATES THIS PAGE FROM THE REFERENCE: the reference tints
   every shadow toward its own accent, which is what makes its whole page read
   as one colour. Here the ground has no hue in it at all and every shadow is
   neutral. An instrument is not tinted.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* the six token families DESIGN.md changes, and nothing else */
  --u-paper:#FFFFFF;
  --u-cream:#F4F4F3;          /* ground · a true neutral, not the kit's editorial cream */
  --u-sand:#EAEAE8;           /* tile */
  --u-ink:#111312;            /* neutral near black, never #000 */
  --u-ink-soft:#454947;
  --u-ink-faint:#4D514F;   /* 7.6:1 on the cream ground, measured, not asserted */
  --u-grass:#0F3A46;          /* the accent slot carries deep petrol here */
  --u-grass-deep:#0A2A33;
  --u-grass-tint:#E3EDEF;
  --u-ochre:#9A6B2F;          /* brass, the second voice, rationed */
  --u-clay:#8C3A2A;           /* alarm, and only for what a treatment costs you */

  --rule:#DCDCD9;
  --u-hair:rgba(17,19,18,.10);
  --u-hair-2:rgba(17,19,18,.18);

  /* NEUTRAL shadows. named rule, checked at gate 6 */
  --u-sh-1:0 1px 2px rgba(17,19,18,.05);
  --u-sh-2:0 1px 2px rgba(17,19,18,.04), 0 12px 28px -14px rgba(17,19,18,.16);

  /* THE TYPE · two families, and the count is the argument.
     Archivo carries display AND body, held apart by weight and tracking alone.
     Newsreader appears exactly once on the whole page, on his own sentence.
     There is NO mono: a monospace is a code editor's face, and reaching for one
     is how a medical page starts cosplaying as a terminal. Numbers are Archivo
     500 with tabular figures, which is what makes a column line up. */
  --u-display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --u-text:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --u-ui:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  /* the DATA role. Same family as the body on purpose: a number is not a
     different voice, it is the same voice being exact. Weight and letterspacing
     carry it, and the tabular figures do the rest. */
  --u-data:"Archivo","Helvetica Neue",system-ui,sans-serif;

  --r-xs:6px; --r-s:10px; --r-m:14px; --r-l:20px; --r-pill:999px;

  --wrap:1200px;
  --gut:20px;
  --rhythm:160px;
  --measure:68ch;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
/* TABULAR FIGURES EVERYWHERE. This is the whole of the instrument reading, and
   it replaces a monospace family entirely. A 15 beside a 32 in a cost column
   has to sit on the same rail or the column stops being readable as data. */
html{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--u-cream); color:var(--u-ink);
  font-family:var(--u-text); font-size:18px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ── the grid ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.sec{padding-block:var(--rhythm)}
.sec--tight{padding-block:calc(var(--rhythm) * .68)}
.band{background:var(--u-paper)}
.measure{max-width:var(--measure)}

/* ── type. 1.22 ratio, and the body never steps down on a phone ───────────── */
h1,h2,h3{font-family:var(--u-display); font-weight:600; margin:0; text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,60px); line-height:1.02; letter-spacing:-.03em}
h2{font-size:clamp(26px,3.4vw,44px); line-height:1.1; letter-spacing:-.025em}
h3{font-size:20px; line-height:1.25; letter-spacing:-.015em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{font-size:20px; line-height:1.6; color:var(--u-ink-soft)}
.small{font-size:16px; line-height:1.55; color:var(--u-ink-soft)}
.tiny{font-size:16px; line-height:1.5; color:var(--u-ink-faint)}
.num{font-family:var(--u-data); font-weight:500; font-variant-numeric:tabular-nums}
.soft{color:var(--u-ink-soft)}

/* ── the source chip. verifiability made literal, and the component the
      reference does not have ───────────────────────────────────────────────── */
.src{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-family:var(--u-data); font-size:14px; font-weight:500; letter-spacing:.01em;
  color:var(--u-ink-faint); text-decoration:none;
  border:1px solid var(--u-hair); border-radius:var(--r-pill);
  padding:6px 13px; background:var(--u-paper);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.src:hover,.src:focus-visible{color:var(--u-grass); border-color:var(--u-grass)}
.src::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--u-grass); flex:0 0 auto}

/* ── buttons. 52px, one primary per screenful ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:var(--r-pill);
  font-family:var(--u-ui); font-size:16px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn--p{background:var(--u-grass); color:#fff}
.btn--p:hover{background:var(--u-grass-deep)}
.btn--g{background:transparent; color:var(--u-ink); border-color:var(--u-hair-2)}
.btn--g:hover{border-color:var(--u-ink)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--u-grass); outline-offset:3px}

/* ── 01 hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative; background:var(--u-ink); color:#F4F4F3; overflow:hidden}
.hero__plate{
  position:absolute; inset:0 0 0 auto; width:62%; z-index:0;
  background:url("assets/angiogram.jpg") 42% 30% / cover no-repeat;
  opacity:.62; filter:grayscale(1) contrast(1.12) brightness(.92);
}
/* the text half stays solid so every ratio holds, and the image half is left alone */
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, var(--u-ink) 0%, var(--u-ink) 38%, rgba(17,19,18,.72) 56%, rgba(17,19,18,.30) 78%, rgba(17,19,18,.42) 100%),
    linear-gradient(to top, rgba(17,19,18,.65), transparent 38%);
}
.hero__in{position:relative; z-index:2; padding-block:clamp(52px,7vh,84px)}
.hero__in > *{max-width:min(100%, 720px)}
.hero__open{font-size:18px; font-weight:500; color:rgba(244,244,243,.74); margin:0 0 26px}
.hero__q{
  font-family:var(--serif); font-weight:300; font-size:clamp(27px,2.9vw,38px);
  line-height:1.22; letter-spacing:-.012em; color:#fff; max-width:27ch; margin:0;
}
.hero__cite{margin-top:20px; max-width:46ch}
.hero__cite a{color:rgba(244,244,243,.82); text-underline-offset:4px;
  padding-block:14px; margin-block:-14px}
.hero__cite a:hover{color:#fff}
.hero__ar{
  direction:rtl; font-size:18px; color:rgba(244,244,243,.88); margin-top:10px; line-height:1.95;
}
.hero__id{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(244,244,243,.16);
  display:flex; flex-wrap:wrap; gap:6px 28px; align-items:baseline;
}
.hero__id b{font-size:19px; font-weight:600; color:#fff}
.hero__id span{font-size:16px; color:rgba(244,244,243,.72)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero .btn--g{color:#F4F4F3; border-color:rgba(244,244,243,.30)}
.hero .btn--g:hover{border-color:#fff}
.hero__stake{margin-top:16px; font-size:16px; color:rgba(244,244,243,.72)}
.hero__cue{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(244,244,243,.12);
  font-size:16px; color:rgba(244,244,243,.70);
}

/* ── 02 the assets band ───────────────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px}
.tile{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column}
.tile__img{aspect-ratio:16/9; background:var(--u-sand); overflow:hidden}
.tile__img img{width:100%; height:100%; object-fit:cover}
.tile__b{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1}
.tile__b h3{font-size:18px}
.tile__b p{font-size:18px; line-height:1.6; color:var(--u-ink-soft); margin:0}
.tile__b a{margin-top:auto; font-size:16px; font-weight:600; color:var(--u-grass); text-decoration:none; text-underline-offset:4px}
.tile__b a:hover{text-decoration:underline}

/* ── 03 the five doors ────────────────────────────────────────────────────── */
.doors{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px}
.door{
  background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m);
  padding:28px; display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start;
  text-decoration:none; color:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.door:hover{border-color:var(--u-hair-2); box-shadow:var(--u-sh-1)}
.door svg{width:64px; height:64px; color:var(--u-grass)}
.door__sit{font-size:18px; line-height:1.55; margin:0 0 14px}
.door__name{font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--u-ink-faint); margin:0 0 8px; font-family:var(--u-data)}
.door__do{font-size:18px; color:var(--u-ink-soft); margin:0 0 14px}
.door__go{font-size:16px; font-weight:600; color:var(--u-grass)}

/* ── 04 + 08 the two air sections ─────────────────────────────────────────── */
.state h2{max-width:20ch}
.state p{max-width:var(--measure); font-size:19px; color:var(--u-ink-soft); margin-top:28px}
.state--brass h2{color:var(--u-ochre)}

/* ── 05 mechanism ─────────────────────────────────────────────────────────── */
.mech{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:start; margin-top:48px}
.scale{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); padding:30px}
.scale svg{width:100%; height:auto; color:var(--u-ink)}
.suite{margin-top:20px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--u-hair); aspect-ratio:16/9}
.suite img{width:100%; height:100%; object-fit:cover; object-position:50% 34%}

/* ── 06 the proof ─────────────────────────────────────────────────────────── */
.proof{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:52px}
.pc{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); padding:30px; grid-column:span 3}
.pc--wide{grid-column:span 6}
.pc h3{margin-bottom:14px}
.pc p{font-size:18px; line-height:1.62; color:var(--u-ink-soft)}
.pc .figs{display:flex; flex-wrap:wrap; gap:10px 30px; margin:20px 0}
.fig b{display:block; font-family:var(--u-data); font-weight:500; font-size:26px; letter-spacing:-.02em; color:var(--u-ink)}
.fig span{display:block; font-size:14px; color:var(--u-ink-faint); margin-top:3px}
.pull{
  border-left:2px solid var(--u-grass); padding-left:18px; margin:20px 0 0;
  font-size:18px; line-height:1.6; color:var(--u-ink);
}
.marks{display:flex; align-items:center; gap:34px; flex-wrap:wrap; margin-top:20px}
.marks img{height:42px; width:auto; opacity:.78}

/* ── 07 the trade. the signature component ────────────────────────────────── */
.trades{margin-top:52px; display:flex; flex-direction:column; gap:22px}
.trade{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); overflow:hidden}
.trade__h{
  padding:20px 28px; border-bottom:1px solid var(--u-hair); background:var(--u-cream);
  font-family:var(--u-data); font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
.trade__g{display:grid; grid-template-columns:1fr 1fr}
.trade__c{padding:28px; display:flex; flex-direction:column}
.trade__c + .trade__c{border-left:1px solid var(--u-hair)}
.trade__lab{font-size:15px; font-weight:600; letter-spacing:.04em; margin:0 0 12px}
.trade__c--for .trade__lab{color:var(--u-grass)}
.trade__c--cost .trade__lab{color:var(--u-clay)}
/* both sides carry the same weight and the same size. the moment the honest
   side is smaller the whole thing becomes marketing again. */
.trade__c p{font-size:18px; line-height:1.62; margin:0; color:var(--u-ink)}
.trade__key{
  padding:22px 28px; border-top:1px solid var(--u-hair); background:var(--u-grass-tint);
  font-size:18px; line-height:1.65;
}
.trade__key b{font-weight:600}
.trade__key .src{margin-top:0; vertical-align:middle}

/* ── 09 the day ───────────────────────────────────────────────────────────── */
.day{list-style:none; counter-reset:d; padding:0; margin:48px 0 0; max-width:var(--measure)}
.day li{
  counter-increment:d; position:relative; padding:0 0 26px 58px;
  font-size:18px; line-height:1.62; color:var(--u-ink-soft);
}
.day li::before{
  content:counter(d,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--u-data); font-size:14px; font-weight:500; color:var(--u-grass);
  border:1px solid var(--u-hair); border-radius:50%; width:34px; height:34px;
  display:grid; place-items:center; background:var(--u-paper);
}
.day li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:38px; bottom:6px; width:1px; background:var(--u-hair);
}

/* ── 10 access ────────────────────────────────────────────────────────────── */
.places{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px}
.place{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); padding:30px}
.place img{height:38px; width:auto; margin-bottom:20px; opacity:.85}
.place p{font-size:18px; color:var(--u-ink-soft); margin:0}
.lines{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.line{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.line a{font-family:var(--u-data); font-size:18px; font-weight:500; color:var(--u-ink); text-decoration:none; border-bottom:1px solid var(--u-hair-2)}
.line a:hover{color:var(--u-grass); border-color:var(--u-grass)}
.line span{font-size:14px; color:var(--u-ink-faint)}
.asks{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ── the sticky bar. phone only. the answer to his site's worst defect ────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  grid-template-columns:1fr 1fr; gap:1px; background:var(--u-hair);
  border-top:1px solid var(--u-hair); box-shadow:var(--u-sh-2);
  transform:translateY(101%); transition:transform .32s var(--ease);
}
.dock.on{transform:none}
.dock a{
  min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--u-paper); font-size:16px; font-weight:600; text-decoration:none; color:var(--u-ink);
}
.dock a.p{background:var(--u-grass); color:#fff}

footer{background:var(--u-ink); color:rgba(244,244,243,.80); padding-block:64px; font-size:15px}
footer a{color:rgba(244,244,243,.82)}
footer .measure{max-width:78ch}

/* ── motion. one block reveal per section, and reduced motion removes it ──── */
/* opacity ONLY. a translate means a block moves under the finger while you scroll,
   which is exactly the failure that scored a previous build 2 out of 10 on a phone. */
.rv{opacity:0; transition:opacity .55s var(--ease)}
.rv.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transition:none}
  .dock{transition:none}
  html{scroll-behavior:auto}
}

/* ── the phone. designed first, written last ──────────────────────────────── */
@media (max-width:900px){
  :root{--rhythm:96px; --gut:20px}
  .tiles,.doors,.mech,.proof,.places{grid-template-columns:1fr; gap:18px}
  .pc{grid-column:span 1}
  .mech{gap:32px}
  .trade__g{grid-template-columns:1fr}
  .trade__c + .trade__c{border-left:0; border-top:1px solid var(--u-hair)}
  .dock{display:grid}
  body{padding-bottom:56px}
  .hero__id{gap:4px 18px}
  .door{grid-template-columns:48px 1fr; gap:18px; padding:24px}
  .door svg{width:48px; height:48px}
  .hero__cta .btn{flex:1 1 100%}
  .hero__plate{width:100%; opacity:.42; background-position:50% 26%}
  .hero__veil{background:
    linear-gradient(180deg, rgba(17,19,18,.58) 0%, rgba(17,19,18,.88) 46%, var(--u-ink) 72%),
    linear-gradient(90deg, rgba(17,19,18,.5), rgba(17,19,18,.5))}
  .hero__in > *{max-width:100%}
}

/* ── the phone, tap targets. an inline link inside a card measured 19px high, and the
      band for this reader is 50 to 56. the hit area grows, the type does not move. ──── */
@media (max-width:900px){
  .tile__b a,.door__go,.src,.line a{min-height:48px; display:inline-flex; align-items:center}
  .src{padding:12px 16px}
  .day li{padding-left:52px}
  .hero__q{font-size:clamp(27px,7.4vw,38px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   V3 · THE INTERFACE LAYER · 12 september 2026
   Added after Adam rejected v2 with "no UI UX" and "only fear". Everything
   below either builds the one control this page needs or lightens the hero
   that the contract always said had to be light.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the light hero. The contract's own answer c3 says light always, never
   black, and v2 shipped a full bleed near black plate with an angiogram behind
   it. A dark medical imaging plate is a disease scan to a frightened reader,
   and it was the first thing she saw. ────────────────────────────────────── */
.lede-hero{background:var(--u-paper); border-bottom:1px solid var(--u-hair); position:relative; overflow:hidden}
.lede-hero .wrap{position:relative; z-index:2}
.lh{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;
  padding-block:clamp(40px,5.5vh,64px)}
.lh__h1{font-family:var(--u-display); font-weight:600; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(33px,3.5vw,50px); color:var(--u-ink); margin:0; max-width:19ch}
.lh__sub{font-size:20px; line-height:1.6; color:var(--u-ink-soft); margin:22px 0 0; max-width:46ch}
.lh__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.lh__stake{margin-top:14px; font-size:16px; color:var(--u-ink-faint)}
.lh__fig{position:relative}
.lh__fig img{width:100%; border-radius:var(--r-l); display:block; aspect-ratio:5/4; object-fit:cover;
  object-position:50% 18%; box-shadow:var(--u-sh-2); max-height:56vh}
.lh__id{margin-top:18px; display:flex; flex-direction:column; gap:3px}
.lh__id b{font-family:var(--u-display); font-size:19px; font-weight:600; color:var(--u-ink)}
.lh__id span{font-size:16px; color:var(--u-ink-soft)}
.lh__marks{display:flex; gap:26px; align-items:center; margin-top:20px;
  padding-top:18px; border-top:1px solid var(--u-hair)}
.lh__marks img{height:38px; width:auto; opacity:.9}

/* ── THE ONE CONTROL. Five people land here and they are not one audience.
   The selector reconfigures five sections and its state lives in the URL,
   because three of the five readers are not the patient and a daughter has to
   be able to send her father a link that opens on HIS condition. ─────────── */
.pick{background:var(--u-cream); border-bottom:1px solid var(--u-hair);
  position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.4) blur(10px)}
.pick__in{display:flex; align-items:center; gap:20px; padding-block:14px; flex-wrap:wrap}
.pick__lab{font-size:16px; color:var(--u-ink-soft); flex:0 0 auto}
.pick__set{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto}
.pick__b{
  appearance:none; border:1px solid var(--u-hair-2); background:var(--u-paper); cursor:pointer;
  font-family:var(--u-ui); font-size:16px; font-weight:500; color:var(--u-ink-soft);
  padding:12px 18px; min-height:48px; border-radius:var(--r-pill); white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pick__b:hover{border-color:var(--u-ink-faint); color:var(--u-ink)}
.pick__b[aria-pressed="true"]{background:var(--u-grass); border-color:var(--u-grass); color:#fff; font-weight:600}
.pick__b:focus-visible{outline:2px solid var(--u-grass); outline-offset:3px}

/* the reconfiguration itself. Five selectors, one rule, and with NO script
   every block is visible, so nothing is ever lost to a failed load. */
[data-when]{display:none}
html:not([data-c]) [data-when]{display:revert}
html[data-c="fibroids"]   [data-when="fibroids"],
html[data-c="prostate"]   [data-when="prostate"],
html[data-c="varicocele"] [data-when="varicocele"],
html[data-c="liver"]      [data-when="liver"],
html[data-c="pelvic"]     [data-when="pelvic"]{display:revert}

/* ── section 03, the hinge. This is the position v2 gave to risk. ────────── */
.gain{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px}
.gain__c{background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m); padding:30px}
.gain__n{font-family:var(--u-data); font-size:34px; font-weight:600; letter-spacing:-.02em;
  color:var(--u-grass); display:block; line-height:1.1}
.gain__t{font-size:18px; font-weight:600; color:var(--u-ink); margin:10px 0 6px}
.gain__p{font-size:18px; line-height:1.6; color:var(--u-ink-soft); margin:0}

/* ── the ask that follows her. His current site has no tappable number at all,
   which is its single worst defect. ──────────────────────────────────────── */
.follow{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.5) blur(14px); border-top:1px solid var(--u-hair);
  transform:translateY(110%); transition:transform .28s var(--ease);
}
.follow.on{transform:translateY(0)}
.follow .btn{flex:1 1 0; justify-content:center}

@media (max-width:900px){
  .lh{grid-template-columns:1fr; gap:30px; padding-block:34px}
  .lh__fig{order:-1}
  .lh__fig img{aspect-ratio:16/11}
  .gain{grid-template-columns:1fr; gap:14px}
  .pick{position:static}
  .pick__in{gap:12px}
  .pick__lab{flex:1 1 100%}
  .pick__set{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .pick__b{width:100%; text-align:center; padding:12px 10px}
  body{padding-bottom:86px}
}
@media (prefers-reduced-motion:reduce){
  .follow{transition:none}
  .pick__b{transition:none}
}

/* ── 09 · her own questions. The one place a question mark is legal, and it is
   mandatory there, because the FAQ is the only section whose whole premise is
   that she is asking. <details> so it works with no script at all. ────────── */
.qa{margin-top:44px; max-width:var(--measure)}
.qa details{border-top:1px solid var(--u-hair); padding:0}
.qa details:last-child{border-bottom:1px solid var(--u-hair)}
.qa summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:19px; font-weight:600; color:var(--u-ink); line-height:1.45;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; position:absolute; right:6px; top:29px; width:11px; height:11px;
  border-right:2px solid var(--u-ink-faint); border-bottom:2px solid var(--u-ink-faint);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.qa details[open] summary::after{transform:rotate(-135deg); top:33px}
.qa summary:focus-visible{outline:2px solid var(--u-grass); outline-offset:2px}
.qa p{margin:0 0 24px; font-size:18px; line-height:1.68; color:var(--u-ink-soft); max-width:62ch}

/* the door silhouette returns as a warm anchor on each trade panel, so the panel
   stitches back to the icon she recognised at the top instead of floating as a
   separate, colder document. Art direction, 12 sep. */
.trade__h{display:flex; align-items:center; gap:12px}
.trade__h svg{width:26px; height:26px; flex:0 0 auto; color:var(--u-ink-faint)}

/* the scene. One line per condition, concrete, no diagnosis and no number in it.
   It is the first thing she reads after choosing her own door, and its whole job
   is to give her something to want before anything is weighed. THE PEN, 12 sep. */
.scene{
  font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.4vw,34px);
  line-height:1.3; letter-spacing:-.012em; color:var(--u-grass); margin:0 0 18px; max-width:24ch;
}

/* his own words, in the language he said them in. §8.4: data is quoted in the
   language it exists in, because translating it would report something he did
   not say. 18px, not a whisper: it is the single costliest sentence he owns. */
.ar{direction:rtl; text-align:right; font-size:20px; line-height:1.95; color:var(--u-ink);
  margin:16px 0 10px; padding-right:14px; border-right:2px solid var(--u-grass)}

/* ── RHYTHM, corrected for a page that shows ONE condition at a time. 160px was
   measured on a page where every block was visible; with the selector on, a
   section can hold one short panel and 320px of padding around it, which reads
   as an unfinished page rather than as air. ──────────────────────────────── */
:root{--rhythm:116px}
.sec{padding-block:var(--rhythm)}

/* the questions get an editorial frame: the heading holds the left column and
   stays put, the questions run down the right. It uses the half of the screen
   that was empty, and it keeps the heading in view while she reads. */
.qaw{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start}
.qaw > h2{position:sticky; top:92px; margin:0}
.qaw .qa{margin-top:0; max-width:none}
@media (max-width:900px){
  :root{--rhythm:74px}
  .qaw{grid-template-columns:1fr; gap:22px}
  .qaw > h2{position:static}
}

@media (max-width:900px){
  /* Seeing a calm face first is the right emotional open on a phone, but at 4:3
     it filled the whole screen and pushed the recognition line under the fold.
     Capped so both land together: his face, then her own sentence. */
  .lh__fig img{aspect-ratio:4/3; max-height:38vh}
  .lh__h1{font-size:clamp(30px,8.4vw,38px)}
  .lh__marks img{height:32px}
}

/* the films. Third party, and every one links OUT of this site, which is the
   thing a page selling itself never does. Facades, never embeds: a YouTube
   embed is a third party script and about 400 KB before anyone presses play. */
.films{margin-top:26px}
.films__k{font-family:var(--u-data); font-size:14px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--u-ink-faint); margin-bottom:16px}
.films__g{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.film{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  background:var(--u-paper); border:1px solid var(--u-hair); border-radius:var(--r-m);
  padding:22px; min-height:48px; transition:border-color .18s var(--ease)}
.film:hover{border-color:var(--u-ink-faint)}
.film img{width:100%; border-radius:var(--r-s); aspect-ratio:16/9; object-fit:cover; margin-bottom:4px}
.film__b{font-size:17px; font-weight:600; color:var(--u-ink)}
.film__t{font-size:17px; line-height:1.55; color:var(--u-ink-soft); flex:1}
.film__g{font-size:16px; font-weight:600; color:var(--u-grass)}
.plate{margin:14px 0; border-radius:var(--r-m); overflow:hidden; background:var(--u-ink)}
.plate img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover; object-position:50% 26%;
  filter:grayscale(1) contrast(1.1)}
@media (max-width:900px){ .films__g{grid-template-columns:1fr} }