/* Fingene design-system pass (Stage Six). Loaded after site.css and motion-plus.css.
   One type scale, one emphasis colour on light, readable small text, calmer surfaces. */
:root{
  --faint:#676573;               /* was #8A8896 (3.1:1 on pearl). Now 5.1:1 */
  --accent-ink:#A84B0C;          /* emphasis on light backgrounds, 5.1:1 */
  --fs-label:12px;               /* smallest text anywhere */
  --fs-small:14px;
  --fs-body:16.5px;
  --fs-h3:19px;
  --fs-lead:clamp(18px,1.6vw,21px);
  --fs-h2:clamp(32px,4.2vw,56px);
  --fs-h1:clamp(42px,6.4vw,96px);
  --r-card:20px; --r-panel:24px;
}

/* --- Type scale: every h2 is the same size, h1 has two sizes (home hero, inner page) --- */
h2,.h2s{font-size:var(--fs-h2)}
.phero h1{font-size:clamp(40px,5.4vw,80px)}
h3,.h3{font-family:var(--sans);font-weight:600;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
.lead{font-size:var(--fs-lead)}
.card p,.fact p,.list li p,.bt p{font-size:15.5px}
.card p.big{font-family:var(--serif);font-size:clamp(22px,2vw,27px);line-height:1.2;color:var(--ink);margin-top:12px}

/* Labels: nothing below 12px, and none in the faint grey that failed contrast */
.eyebrow,.k,.crumb,.mono,.a3-n,.tag span,.ui .tag,.ui small,.foot span,.dial .v small,.stat3 small,.hero-bar span,.fc small{font-size:max(var(--fs-label),1em)}
.eyebrow,.k,.crumb{font-size:var(--fs-label)}
.ui .tag,.ui .tag span,.ui .foot,.ui .foot span,.dial .v small{font-size:var(--fs-label);color:var(--muted)}
.night .ui .tag,.night .ui .tag span,.night .dial .v small,.night .ui .foot,.night .ui .foot span{color:#c9c6dd}
.list li span.i,.artc .n{color:var(--muted);font-size:var(--fs-label)}

/* --- One emphasis colour. Italic stays as the voice; colour only where it passes --- */
h2 em,.h2s em,.quote em{color:inherit}
h1 em,.display em{color:var(--accent-ink)}
.night h2 em,html.dk [data-dark] h1 em,html.dk [data-dark] h2 em{color:#FBAB3E}
.gene-hero h1{color:var(--ink)}

/* --- Eyebrows: keep the words, drop the glowing dot that sat on every section --- */
.eyebrow:before{display:none}
.eyebrow{color:var(--muted);letter-spacing:.14em}

/* --- Calmer surfaces: solid cards, one soft shadow, radius from the token scale --- */
.glass:not(.lq),.card.glass,.bt.glass,.stk.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:#FBFAF6;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(18,17,28,.05),0 12px 32px -24px rgba(18,17,28,.25);border-radius:var(--r-card)}
.night .glass,.night .card.glass{background:#ffffff12;border-color:#ffffff29;box-shadow:none}
.stk.glass{border-radius:var(--r-panel)}
.ui{border-radius:var(--r-card)}
.grain{opacity:.35}

/* --- Dark-section buttons that went invisible on pearl (labs paper link, 1.01:1) --- */
.labs .btn.ghost{--fg:var(--ink);background:#fff9;border-color:var(--line)}
html.dk .labs .btn.ghost{--fg:#F2F0FB;background:#ffffff14;border-color:#ffffff47}

/* --- Hero note under the buttons --- */
.hero-note{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}
html.dk [data-dark] .hero-note{color:#c9c6dd}

/* --- Footer: links get a 44px tap row on phones --- */
@media (max-width:760px){.f-col a{padding:11px 0;display:block}.f-acct a,.f-note a{display:inline-block;padding:6px 0}}
.crumb a{display:inline-block;padding:6px 0}

/* --- Gene pages --- */
.gene-hero .wrap{position:relative}
.gene-orb{position:absolute;right:max(16px,4vw);top:50%;width:clamp(120px,22vw,300px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 34% 30%,#fff9 0,transparent 32%),radial-gradient(circle at 50% 55%,var(--a) 0,color-mix(in srgb,var(--a) 70%,#0A0836) 100%);
  box-shadow:0 40px 80px -40px color-mix(in srgb,var(--a) 70%,transparent);opacity:.95}
@media (max-width:760px){.gene-orb{position:relative;right:auto;top:auto;transform:none;width:96px;margin-top:28px}}
.gene-tag{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);color:var(--a-ink)}
.tbl.arena{width:100%;border-collapse:collapse}
.tbl.arena th,.tbl.arena td{padding:14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tbl.arena th{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;width:34%}
.list li{grid-template-columns:1fr}
.list li b{font-weight:600}
.genes .acard-s h2.h3{margin-top:14px}
.tblwrap{padding:8px 18px;overflow-x:auto;border-radius:var(--r-card)}
.tblwrap .tbl{min-width:820px}
.mix{display:flex;height:56px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line2)}
.mix span{width:var(--w);background:var(--c);color:#12111C;font-weight:600;font-size:var(--fs-small);display:flex;align-items:center;padding:0 18px;white-space:nowrap}

/* --- Reduced motion: the pinned scenes collapse to normal flow, no dead space --- */
@media (prefers-reduced-motion:reduce){
  .lay-track,.a3-track,.l-track{height:auto!important}
  .lay-pin,.a3-pin,.l-pin{position:relative!important;top:auto!important;height:auto!important;min-height:0!important}
  .lay-stage{display:none}
  .lay-grid{grid-template-columns:1fr!important}
  .a3-stage{height:auto!important;perspective:none!important;overflow:visible}
  .a3-rotor{position:static!important;transform:none!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;width:auto!important;height:auto!important}
  .a3p{position:relative!important;transform:none!important;opacity:1!important;filter:none!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important}
  .a3-gl{display:none}
  .a3-nav{display:none}
  .fino-stage{display:none}
  .labs .l-grid{grid-template-columns:1fr!important;min-height:0!important}
}

/* --- Every remaining label at 12px minimum (audit found 10 to 11.5px text across components) --- */
html .mp-snd .t,html .srch kbd,html .sheet-h,html .itag,html .iskip,html .fc small,html .a3-n,html .a3-open,html .a3-nav .go,html .nm .idx,
html .opt b,html .ui small,html .chip,html .sms,html .bubble b,html .mp-trend .hd span,html .mp-trend .ax span,html .acard-s .go,
html .tbl th,html .tbl b,html .status,html .mp-rail .lb,html .mp-rail .n,html .eyebrow,html .k,html .crumb,html .tag span,html .foot span,
html .dial .v small,html .stat3 small,html .hero-bar span,html .artc .m,html .rung .eyebrow{font-size:12px}
html .bubble b{color:var(--accent-ink)}
html .night .bubble b{color:#FBAB3E}
html .bigfact{color:var(--accent-ink)}
html:not(.dk) [data-dark] h2 em,html:not(.dk) [data-dark] h1 em{color:var(--accent-ink)}
html .sheet-h,html .nm .idx,html .opt b,html .ui small,html .sms,html .bubble b{font-size:12px!important}
html:not(.dk) .lay-copy h2 em,html:not(.dk) .l-copy h2 em,html:not(.dk) .a3-head h2 em{color:var(--accent-ink)!important}
html:not(.dk) .bubble b{color:var(--accent-ink)!important}

/* --- Chapter rail moves to the left edge: the right edge belongs to the floating Fingene mark --- */
.mp-rail{right:auto;left:max(18px,env(safe-area-inset-left,0px))}
.mp-rail a{justify-content:flex-start;flex-direction:row-reverse}
.mp-rail .bar{transform-origin:0 50%}
.mp-rail .lb{right:auto;left:calc(100% + 10px);transform:translate(-8px,-50%);clip-path:inset(0 100% 0 0 round 999px)}
.mp-rail a:hover .lb,.mp-rail a:focus-visible .lb{transform:translate(0,-50%);clip-path:inset(0 0 0 0 round 999px)}
html .ui[style*="#12111C"] .tag,html .ui[style*="#12111C"] .tag span,html .ui[style*="#12111C"] [style*="color:#676573"],html .ui[style*="#12111C"] [style*="color:#676573"] span{color:#B6B3CF!important;font-size:12px!important}