/* hmm site - the index page stylesheet. This was the 37 KB <style> block in
   index.html until 2026-09-07; it moved here so style-src-elem in _headers can be
   'self' with no 'unsafe-inline'. Loaded after site.css, in the position the
   inline block held, so the cascade is unchanged. The market rules at the end
   were a <style> element the market script appended at render, which the same directive
   would block. */
html{background:var(--hmm-field-dark);color-scheme:dark;}
html{scroll-behavior:smooth;}
#mandate,#power,#eat,#heal,#s5,#s6,#s7,#s9,#sfoot{scroll-margin-top:16px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;padding:0;font-family:var(--hmm-font-body);color:var(--hmm-pearl);}
#dotfield{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
/* ---------- global chrome ---------- */
.site-logo{color:var(--hmm-pearl);display:block;}
.site-logo svg{height:24px;width:auto;display:block;}
.site-logo:hover{color:var(--hmm-accent);}
.site-footer{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:40px 30px;border-top:1px solid var(--hmm-border);}
.convert .k{font-family:var(--hmm-font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--hmm-text-muted);margin-bottom:18px;}
.convert-cta a.primary{background:var(--hmm-accent);border-color:var(--hmm-accent);}
.convert-cta a.primary:hover{color:var(--hmm-pearl);opacity:.9;}
.footer-nav{display:flex;gap:26px;align-items:center;}
.footer-contact{font-family:var(--hmm-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hmm-text-muted);text-decoration:none;transition:var(--hmm-transition);}
.footer-contact:hover{color:var(--hmm-accent);}
.footer-tag{font-family:var(--hmm-font-display,'Kufam',sans-serif);font-size:15px;letter-spacing:.01em;color:var(--hmm-text-muted);}
.footer-tag .hk-nec{color:var(--hmm-accent-text);}

/* ---------- box tiers: appearance follows behaviour ----------
   Every bordered box on this page belongs to exactly one tier, and nothing
   wears a cue from a tier it is not in. That rule is the whole point: the
   page previously used one look (bordered panel + corner brackets) for
   things that navigate, things that filter, and things that just sit there.

     u-nav      navigates somewhere        pointer, focus ring, action row
     u-control  changes what is shown      pointer, focus ring, pressed state
     u-panel    shows, and does not respond   no pointer, not focusable

   Adding a box? Pick the tier by what it DOES, then apply that class. Do not
   copy a neighbour's styling. That is how the inconsistency arose. Corner
   brackets (.tk) are decoration and carry no meaning: they appear in every
   tier and must never be the only thing telling a reader something is live. */
.u-nav,.u-control{cursor:pointer;}
.u-nav:focus-visible{outline:2px solid var(--accent,var(--hmm-accent));outline-offset:3px;}
.u-control:focus-visible{outline:2px solid var(--hmm-accent);outline-offset:2px;}
.u-panel{cursor:auto;}
.u-panel a,.u-panel button{cursor:pointer;}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;position:relative;border-top:1px solid var(--hmm-border);}
.hero-logo{position:absolute;top:26px;left:30px;z-index:8;color:var(--hmm-pearl);display:block;transition:opacity .3s var(--hmm-ease),color .2s var(--hmm-ease);}
.hero-logo svg{height:26px;width:auto;display:block;}
.hero-logo:hover{color:var(--hmm-accent);}
.hero-kicker{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:400;margin:0;color:var(--hmm-text-muted);}
.hero-kicker .hk-nec{color:var(--hmm-accent-text);}
.hero-row{display:flex;gap:22px;width:min(1160px,94vw);height:360px;}
/* ---- mobile (≤640px): stack the hero machines, wrap the timeline rows ---- */
@media(max-width:640px){
  /* The hero stacks taller than the viewport on a phone, and centring overflow
     pushed the kicker off the top edge and under the logo. Flow from the top
     instead, with enough headroom for the absolutely-positioned logo. */
  .hero{min-height:auto;justify-content:flex-start;padding:56px 0 56px;gap:28px;}
  .through{min-height:auto;padding-top:88px;}
  .hero-row{flex-direction:column;height:auto;width:92vw;gap:16px;}
  .hero-row .box{min-height:260px;}
  .tl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:8px 10px;}
  .tl-row .tl-name{flex:1 1 100%;order:3;}
  .tl-row .tl-org{flex:1 1 100%;order:4;font-size:10px;color:var(--hmm-caption);}
  .tl-row .tl-c{order:1;} .tl-row .tl-date{order:2;} .tl-row .tl-status{order:5;}
}
.box{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;border:1px solid var(--hmm-border);background:rgba(242,236,201,.02);color:inherit;text-decoration:none;transition:flex .5s var(--hmm-ease),background .3s var(--hmm-ease),border-color .3s var(--hmm-ease),opacity .4s var(--hmm-ease);}
.box:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* The one token that means "this navigates". Nothing static on the page carries it. */
/* Pearl label, accent arrow: the accents are the card identity, but eat green and
   heal purple measure 4.32:1 and 3.19:1 on this ground, below AA at 10.5px. */
.box-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--hmm-font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hmm-pearl);white-space:nowrap;}
.box-go-arrow{width:22px;height:8px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.4;transition:transform .3s var(--hmm-ease);}
.box:hover .box-go-arrow,.box:focus-visible .box-go-arrow{transform:translateX(4px);}
/* --accent is the identity colour and stays on dots, ticks, arrows and borders, where the
   colour is the name. --accent-text is the -dark variant, used wherever the identity colour is
   set as TEXT on the dark ground: the base hues measure 6.76 (Power), 4.49 (Eat) and 3.32 (Heal)
   against #141414, and the -dark variants clear 4.5 at 8.53, 4.55 and 4.58. */
.box--power{--accent:var(--hmm-nec-power);--accent-text:var(--hmm-nec-power-dark);}.box--eat{--accent:var(--hmm-nec-eat);--accent-text:var(--hmm-nec-eat-dark);}.box--heal{--accent:var(--hmm-nec-heal);--accent-text:var(--hmm-nec-heal-dark);}
.box::before{content:"";position:absolute;left:12px;top:12px;width:9px;height:1px;background:var(--accent);z-index:2;}
.box::after{content:"";position:absolute;left:12px;top:12px;width:1px;height:9px;background:var(--accent);z-index:2;}
.box-stage{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;}
.machine{width:78%;height:70%;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--hmm-ease);}
.box-info{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 22px;text-align:center;transition:flex .5s var(--hmm-ease);}
.box-label{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--accent-text);}
.commentary{max-width:34ch;margin-top:12px;font-family:var(--hmm-font-body);font-size:13px;line-height:1.5;color:var(--hmm-text-muted);overflow:hidden;transition:opacity .4s var(--hmm-ease),max-height .4s var(--hmm-ease);}
.ledger{list-style:none;margin:0;padding:0;width:100%;margin-top:16px;overflow:hidden;transition:opacity .45s var(--hmm-ease),max-height .45s var(--hmm-ease);}
.ledger li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--hmm-border);font-family:var(--hmm-font-body);font-size:12.5px;color:var(--hmm-pearl);}
/* Coarse pointers get the copy revealed at all times, so the card must size to
   it rather than squeeze the machine out of the stage. Width-scoped rules below
   (<=640px) still override this for phones. */
@media (hover:none),(pointer:coarse){
  .hero-row{height:auto;}
  .hero-row .box{min-height:340px;}
  .hero-row .box-stage{flex:0 0 132px;}
  .hero-row .machine{width:70%;height:100%;}
  .hero-row .box-info{justify-content:flex-start;padding:0 18px 20px;}
}
/* Hover is an enhancement, not the only way in. Gated on a real pointer so a
   touch device never inherits a sticky :hover, which used to leave whichever
   card was tapped last bright and the other two dimmed to .55 permanently. */
@media (hover:hover) and (pointer:fine){
  .commentary{opacity:0;max-height:0;}
  .ledger{opacity:0;max-height:0;margin-top:0;}
  .box-go{opacity:0;max-height:0;margin-top:0;transition:opacity .45s var(--hmm-ease);}
  .box:hover .box-go{opacity:1;max-height:40px;margin-top:16px;}
  .hero-row:hover .box:not(:hover){flex:.62;opacity:.78;}
  .box:hover{flex:2.5;flex-direction:row;background:rgba(242,236,201,.05);}
  .box--power:hover{border-color:var(--hmm-nec-power);}.box--eat:hover{border-color:var(--hmm-nec-eat);}.box--heal:hover{border-color:var(--hmm-nec-heal);}
  .box:hover .box-stage{flex:1.15;}.box:hover .machine{transform:scale(1.06);}
  .box:hover .box-info{flex:1;align-items:flex-start;justify-content:center;text-align:left;padding:26px 30px 26px 6px;border-left:1px solid var(--hmm-border);}
  .box:hover .commentary{opacity:1;max-height:180px;}
  .box:hover .ledger{opacity:1;max-height:280px;margin-top:16px;}
}

/* ---------- section rail: fixed right-edge wayfinding ---------- */
/* The page had one navigational gesture (the hero cards) reaching three of nine
   destinations, with no way back up. This is the index and the breadcrumb: it
   names every section, marks the one you are in, and is one tap from any of them. */
.railnav{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:12px 14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--hmm-ease),visibility .35s var(--hmm-ease);}
.railnav.is-on{opacity:1;visibility:visible;pointer-events:auto;}
.rail-item{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;padding:0 2px;text-decoration:none;color:var(--hmm-text-muted);font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color .25s var(--hmm-ease);}
.rail-item:hover,.rail-item:focus-visible{color:var(--hmm-pearl);}
.rail-item:focus-visible{outline:2px solid var(--hmm-accent);outline-offset:2px;}
.rail-label,.rail-label-s{display:block;}
.rail-label-s{display:none;}
.rail-mark{width:7px;height:7px;flex:0 0 auto;border:1px solid var(--hmm-text-faint);background:transparent;transition:background .25s var(--hmm-ease),border-color .25s var(--hmm-ease),transform .25s var(--hmm-ease);}
.rail-item:hover .rail-mark{border-color:var(--rail-accent,var(--hmm-accent));}
.rail-item.is-active{color:var(--hmm-pearl);}
.rail-item.is-active .rail-mark{background:var(--rail-accent,var(--hmm-accent));border-color:var(--rail-accent,var(--hmm-accent));transform:scale(1.28);}
.rail-item[data-sec="power"]{--rail-accent:var(--hmm-nec-power);}
.rail-item[data-sec="eat"]{--rail-accent:var(--hmm-nec-eat);}
.rail-item[data-sec="heal"]{--rail-accent:var(--hmm-nec-heal);}
.rail-top{margin-bottom:6px;border-bottom:1px solid var(--hmm-border);}
.rail-top .rail-mark{border:0;display:flex;align-items:center;justify-content:center;width:9px;height:9px;}
.rail-top svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;}
/* Where a real pointer exists the rail rides collapsed to its markers, so it
   never crowds the layout, and names itself on hover or keyboard focus. The
   filled, scaled marker is the you-are-here signal in that state. */
@media (hover:hover) and (pointer:fine){
  .rail-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .3s var(--hmm-ease),opacity .3s var(--hmm-ease);}
  .railnav:hover .rail-label,.railnav:focus-within .rail-label{max-width:140px;opacity:1;}
  .railnav:hover,.railnav:focus-within{background:linear-gradient(to left,var(--hmm-field-dark) 70%,rgba(20,20,20,0));}
}
@media (prefers-reduced-motion:reduce){.railnav,.rail-item,.rail-mark,.rail-label{transition:none;}}
/* A coarse pointer cannot hover, so the rail can never ride collapsed there and
   shows its labels permanently. That was gated on width, not on the pointer, so
   tablets got the long labels - a 114px rail - against sections clearing 48px,
   and up to 66px of every section ran underneath it. The compact form belongs to
   the pointer, which is what decides whether a label can hide; the matching
   section clearance is further down, after the padding shorthands it overrides. */
@media (hover:none),(pointer:coarse){
  .railnav{padding:10px 8px 10px 10px;gap:0;background:linear-gradient(to left,var(--hmm-field-dark) 62%,rgba(20,20,20,0));}
  .rail-label{display:none;}
  .rail-label-s{display:block;}
}
/* Phones have no hover to reveal anything, so the labels are permanent (a
   marker with no name is a dot rather than navigation) and the sections give back
   the width the rail occupies. Short forms keep it inside that allowance. */
@media(max-width:640px){
  .railnav{padding:10px 8px 10px 10px;gap:0;background:linear-gradient(to left,var(--hmm-field-dark) 62%,rgba(20,20,20,0));}
  .rail-item{min-height:44px;font-size:9px;letter-spacing:.08em;gap:7px;}
  .rail-label{display:none;}
  .rail-label-s{display:block;}
}

/* ---------- necessity sections ---------- */
.nec{min-height:100vh;display:flex;align-items:stretch;color:var(--hmm-pearl);font-family:var(--hmm-font-body);}
.stage{flex:0.8;position:relative;display:flex;flex-direction:column;padding:40px 28px 28px 44px;border-right:1px solid var(--hmm-border);min-width:0;order:1;}
.nec[data-flip="1"] .stage{order:2;border-right:none;border-left:1px solid var(--hmm-border);padding:40px 44px 28px 28px;}
.stage .machine-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.stage .machine-wrap svg{width:100%;height:100%;max-height:82vh;overflow:visible;}
.machine-wrap svg .callout{transition:transform .28s var(--hmm-ease);cursor:zoom-in;}
.machine-wrap svg .callout--L{transform-box:fill-box;transform-origin:100% 50%;}
.machine-wrap svg .callout--R{transform-box:fill-box;transform-origin:0% 50%;}
.machine-wrap svg .callout:hover,.machine-wrap svg .callout:focus-within{transform:scale(2.15);}
.machine-wrap svg .callout:focus{outline:none;}
.nec[data-flip="1"] .stage-foot{text-align:right;}
.panel{flex:1.42;display:flex;flex-direction:column;gap:22px;padding:56px 56px;justify-content:center;min-width:0;order:2;}
.nec[data-flip="1"] .panel{order:1;}
.card{border:1px solid var(--hmm-border);padding:26px 28px;position:relative;background:rgba(242,236,201,.02);}
.card h2{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-lg);margin:0 0 10px;}
.card p{margin:0;font-size:14px;line-height:1.6;color:var(--hmm-text-muted);}
.card p b{color:var(--hmm-pearl);font-weight:600;}
.schematic-wrap{margin:6px 0 14px;}
.schematic-wrap svg{width:100%;max-width:528px;height:auto;overflow:visible;display:block;margin:0 auto;}
.blk rect{transition:stroke .2s var(--hmm-ease),stroke-width .2s var(--hmm-ease);}
.blk:focus{outline:none;}
.blk rect{transition:stroke .18s var(--hmm-ease),stroke-width .18s var(--hmm-ease),fill .18s var(--hmm-ease);}
.blk{cursor:pointer;}
.blk:focus-visible{outline:2px solid var(--hmm-accent);outline-offset:2px;}
.blk:hover rect,.blk:focus rect{stroke-width:2.6;}
.blk--active rect{stroke-width:2.6;}
@keyframes spIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.stage-panel>*{animation:spIn .72s var(--hmm-ease) both;}
.stage-panel>*:nth-child(2){animation-delay:.08s;}
.stage-panel>*:nth-child(3){animation-delay:.16s;}
.stage-panel>*:nth-child(4){animation-delay:.24s;}
.stage-panel{margin-top:12px;}
.sp-name{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:10px;}
.sp-facet{margin-bottom:9px;}
.sp-label{font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hmm-text-muted);}
.sp-facet .none{font-size:12px;color:var(--hmm-caption);font-style:italic;}
.sp-def{font-size:12.5px;line-height:1.5;color:var(--hmm-text-muted);margin:0 0 13px;}
.sp-facet p{font-size:12.5px;line-height:1.46;color:var(--hmm-pearl);margin:3px 0 0;}
.stage-panel>*:nth-child(5){animation-delay:.32s;}
/* per-necessity accent */
.sec-power .stage-eyebrow,.sec-power .sp-name{color:var(--hmm-nec-power-dark);}
.sec-eat   .stage-eyebrow,.sec-eat   .sp-name{color:var(--hmm-nec-eat-dark);}
.sec-heal  .stage-eyebrow,.sec-heal  .sp-name{color:var(--hmm-nec-heal-dark);}
/* ---------- lens intro + through-line ---------- */
.through p b{color:var(--hmm-pearl);font-weight:600;}
/* The fit is the first screen since 2026-09-15, so it fills the viewport and the logo above
   it sits in the page flow rather than on the hero. The border moved to the hero, which now
   follows it. */
.through{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:84px 48px;color:var(--hmm-pearl);}
.through p{font-size:18px;line-height:1.6;color:var(--hmm-text-muted);max-width:80ch;margin:14px 0 0;}
#mandate{text-align:center;}
#mandate p{margin:14px auto 0;}
.sec-power .blk:hover rect,.sec-power .blk:focus rect{stroke:rgba(255,115,11,1);fill:rgba(255,115,11,.12);}
.sec-eat   .blk:hover rect,.sec-eat   .blk:focus rect{stroke:rgba(79,138,91,1);fill:rgba(79,138,91,.12);}
.sec-heal  .blk:hover rect,.sec-heal  .blk:focus rect{stroke:rgba(135,82,165,1);fill:rgba(135,82,165,.12);}
.sec-power .blk--active rect{stroke:var(--hmm-nec-power)!important;}
.sec-eat   .blk--active rect{stroke:var(--hmm-nec-eat)!important;}
.sec-heal  .blk--active rect{stroke:var(--hmm-nec-heal)!important;}
/* ---------- S5 AI impact ---------- */
.ai{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:96px 48px;color:var(--hmm-pearl);border-top:1px solid var(--hmm-border);}
/* min(px,100%), never min(px,96vw): 96vw ignores the 48px padding of the section
   it sits in, so every one of these blocks bled ~30px past its own content box on
   both sides below 1208px and ran under the fixed rail on the right. */
.ai>*{width:min(1160px,100%);}
.ai-title{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-2xl);margin:10px 0 8px;line-height:1.06;}
/* ---------- S5 rebuilt: flow, figures, reading key ---------- */
.ai-flow{display:flex;flex-direction:column;gap:44px;margin:4px 0 44px;}
.ai-flow--split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.ai-flow--split .ai-col-text{display:flex;flex-direction:column;justify-content:center;gap:30px;min-width:0;}
.ai-flow--split .ai-fig{margin:0;display:flex;flex-direction:column;min-width:0;}
.ai-flow--split .ai-fig--hero canvas{height:420px;flex:none;min-height:0;width:100%;}
@media(max-width:860px){.ai-flow--split{grid-template-columns:1fr;gap:32px;}.ai-flow--split .ai-fig--hero canvas{flex:none;height:300px;}}
.ai-step-hdr{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.ai-step-id{font-family:var(--hmm-font-mono);font-size:11px;letter-spacing:.12em;border:1px solid var(--hmm-accent);color:var(--hmm-accent-text);padding:2px 8px;flex:0 0 auto;}
.ai-step-label{font-family:var(--hmm-font-display);font-weight:700;font-size:20px;line-height:1.1;}
.ai-step p{font-size:14.5px;line-height:1.62;color:var(--hmm-text-muted);max-width:66ch;margin:0 0 11px;}
.ai-fig{margin:0;border:1px solid var(--hmm-border);background:rgba(242,236,201,.02);position:relative;}
.ai-fig canvas{display:block;width:100%;height:280px;}
.ai-fig--hero canvas{height:320px;}
.ai-fig figcaption{font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hmm-caption);padding:10px 14px;border-top:1px solid var(--hmm-border);}
.ai-pull .k{display:block;font-family:var(--hmm-font-mono);font-weight:400;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--hmm-caption);margin-bottom:12px;}
.src-split{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start;margin-top:14px;}
.src-prose{min-width:0;}
.src-q{font-family:var(--hmm-font-display);font-weight:700;font-size:25px;line-height:1.22;color:var(--hmm-pearl);margin:14px 0 16px;}
.src-q{max-width:24ch;}
.src-move-body p{max-width:62ch;}
.src-moves{border-left:1px solid var(--hmm-border);}
.src-move{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:20px 0;align-items:start;}
.src-move+.src-move{border-top:1px solid rgba(242,236,201,.07);}
.src-move-i{font-family:var(--hmm-font-mono);font-size:22px;color:var(--hmm-accent);line-height:1;padding-left:16px;}
.src-move-body h3{font-family:var(--hmm-font-display);font-weight:700;font-size:16px;margin:0 0 7px;line-height:1.15;color:var(--hmm-pearl);}
.src-move-body p{font-size:13.5px;line-height:1.6;color:var(--hmm-text-muted);margin:0;}
/* The right column held a scrolling stream of named companies until 2026-09-15. It now
   holds one sentence of counts, read from data/catalogue_counts.js, set as a plate. */
.src-reccol{min-width:0;position:sticky;top:100px;align-self:start;}
.src-map{margin:14px 0 0;padding:22px 24px;border:1px solid var(--hmm-border);border-top:2px solid var(--hmm-accent);background:rgba(242,236,201,.02);font-size:14.5px;line-height:1.62;color:var(--hmm-text-muted);}
@media(max-width:860px){.src-split{grid-template-columns:1fr;}.src-reccol{position:static;top:0;}}
/* ---------- S7 markets + S8 density ---------- */
.mkt{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:96px 48px;color:var(--hmm-pearl);border-top:1px solid var(--hmm-border);}
.mkt>*{width:min(1180px,100%);}
.mkt-title{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-2xl);margin:10px 0 8px;line-height:1.06;}
.mkt-lead{font-size:15px;line-height:1.6;color:var(--hmm-text-muted);max-width:82ch;margin:0 0 14px;align-self:flex-start;}
.tk{position:absolute;width:9px;height:9px;pointer-events:none;}
.tk--tl{left:6px;top:6px;border-top:1px solid;border-left:1px solid;}
.tk--tr{right:6px;top:6px;border-top:1px solid;border-right:1px solid;}
.tk--bl{left:6px;bottom:6px;border-bottom:1px solid;border-left:1px solid;}
.tk--br{right:6px;bottom:6px;border-bottom:1px solid;border-right:1px solid;}
/* engineering-plate treatment on necessity cards */
.sec-power .card{border-top:2px solid var(--hmm-nec-power);}
.sec-eat .card{border-top:2px solid var(--hmm-nec-eat);}
.sec-heal .card{border-top:2px solid var(--hmm-nec-heal);}
.sec-power .card .tk{border-color:var(--hmm-nec-power);}
.sec-eat .card .tk{border-color:var(--hmm-nec-eat);}
.sec-heal .card .tk{border-color:var(--hmm-nec-heal);}
.sec-power .card-id{color:var(--hmm-nec-power-dark);border-color:var(--hmm-nec-power);}
.sec-eat .card-id{color:var(--hmm-nec-eat-dark);border-color:var(--hmm-nec-eat);}
.sec-heal .card-id{color:var(--hmm-nec-heal-dark);border-color:var(--hmm-nec-heal);}
/* ---------- S6 regulation lens ---------- */
.reg{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:80px 48px;border-top:1px solid var(--hmm-border);color:var(--hmm-pearl);}
.reg-title{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-2xl);margin:10px 0 8px;}
.reg-title em{font-style:italic;color:var(--hmm-accent);}
.reg-plate{position:relative;flex:1;border:1px solid var(--hmm-border);border-top:2px solid var(--hmm-accent);padding:22px 26px 0;background:rgba(242,236,201,.02);}
.reg-plate .tk{border-color:var(--hmm-accent);}
.reg-plate p{margin:0;font-size:13.5px;line-height:1.62;color:var(--hmm-text-muted);}
.reg-plate--wide{padding-bottom:18px;}
.reg-plate p b{color:var(--hmm-pearl);font-weight:600;}
.reg-split{display:flex;gap:40px;width:100%;align-items:flex-start;}
.reg-left{flex:0 0 clamp(440px,40%,560px);display:flex;flex-direction:column;gap:16px;}
.reg-glyph{margin:0;border:1px solid var(--hmm-border);background:rgba(242,236,201,.02);position:relative;}
.reg-glyph canvas{display:block;width:100%;height:172px;}
.reg-glyph figcaption{font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hmm-caption);padding:9px 14px;border-top:1px solid var(--hmm-border);}
/* The two plates size to their own content since 2026-09-15. They were stretched to a
   common height while each carried a footer that anchored its base; with the footers gone
   the shorter plate read as a hollow box. */
.reg-jobs{display:flex;flex-direction:row;gap:14px;align-items:flex-start;}
.reg-jobs .reg-plate{padding-bottom:16px;}
.reg-left .reg-close{width:auto;margin-top:2px;}
.reg-right{flex:1;min-width:0;margin-left:auto;}
.reg-right .tl-body{width:100%;margin-left:auto;}
.reg-tl-head{margin-bottom:14px;}
.reg-tl-head .reg-label{color:var(--hmm-accent-text);}
.reg-tl-head .tl-sub{margin:8px 0 12px;max-width:none;}
.tl-filter-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 16px;}
.tl-filter-label{font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hmm-text-muted);}
.tl-filters{display:flex;flex-wrap:wrap;gap:6px;}
/* Resting border sits at border-hover, not border: at .12 alpha these read as
   labels rather than controls. The selected chip carries fill + border, and
   keeps a pearl label. Accent-on-dark measured 3.58:1, below AA at this size. */
.tl-filters button{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;background:rgba(242,236,201,.03);border:1px solid var(--hmm-border-hover);color:var(--hmm-text-muted);padding:5px 10px;cursor:pointer;transition:var(--hmm-transition);}
.tl-filters button:hover{border-color:var(--hmm-accent);color:var(--hmm-pearl);background:rgba(242,236,201,.07);}
.tl-filters button:focus-visible{outline:2px solid var(--hmm-accent);outline-offset:2px;}
.tl-filters button.on{border-color:var(--hmm-accent);color:var(--hmm-pearl);background:rgba(196,69,57,.22);}
.tl-hidden{display:none!important;}
/* ---------- S7 regulatory timeline ---------- */
.tl-legend{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 28px;font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hmm-caption);}
.tl-legend b{color:var(--hmm-text-muted);font-weight:400;}
.tl-body{width:min(1140px,100%);position:relative;}
.tl-spine{position:absolute;left:calc(-1 * (var(--spine-w) + 4px));top:0;pointer-events:none;z-index:0;--spine-w:14px;}
.tl-year{display:flex;position:relative;transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);}
.tl-year.pre{opacity:0;transform:translateY(30px);}
.tl-year.show{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.tl-year.pre{opacity:1;transform:none;}}
.tl-axis{flex:0 0 84px;position:relative;padding:12px 0 12px 20px;}
.tl-node{position:absolute;left:-5px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--hmm-pearl);border:none;transform-origin:center;animation:tlPulse 3.4s ease-in-out infinite;}
.tl-year:nth-child(2n) .tl-node{animation-delay:.6s;}
.tl-year:nth-child(3n) .tl-node{animation-delay:1.2s;}
.tl-standing .tl-node{background:var(--hmm-accent);}
.tl-future .tl-node{background:none;border:1px dashed var(--hmm-text-faint);}
@keyframes tlPulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.4);opacity:1;}}
@media(prefers-reduced-motion:reduce){.tl-node{animation:none;opacity:.8;}}
.tl-y{font-family:var(--hmm-font-mono);font-size:14px;color:var(--hmm-pearl);letter-spacing:.06em;}
.tl-future .tl-y{color:var(--hmm-text-muted);}
.tl-rows{flex:1;padding:8px 0;display:flex;flex-direction:column;gap:6px;justify-content:center;}
.tl-empty{color:var(--hmm-caption);font-family:var(--hmm-font-mono);font-size:11px;padding:2px 0;}
.tl-row{display:grid;grid-template-columns:46px 82px 1fr auto auto;align-items:center;gap:14px;border:1px solid var(--hmm-border);padding:9px 14px;background:rgba(242,236,201,.02);}
.tl-future .tl-row{border-style:dashed;opacity:.82;}
.tl-c{font-family:var(--hmm-font-mono);font-size:10px;letter-spacing:.08em;text-align:center;border:1px solid var(--hmm-border);padding:2px 0;color:var(--hmm-text-muted);}
.tl-date{font-family:var(--hmm-font-mono);font-size:11px;color:var(--hmm-text-muted);letter-spacing:.04em;}
.tl-name{font-size:13.5px;color:var(--hmm-pearl);font-weight:600;}
.tl-org{font-family:var(--hmm-font-mono);font-size:10px;letter-spacing:.08em;color:var(--hmm-caption);text-transform:uppercase;}
.tl-status{font-family:var(--hmm-font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--hmm-border);color:var(--hmm-text-muted);white-space:nowrap;}
.tl-st--transitional{color:var(--hmm-thesis);border-color:var(--hmm-thesis);}
.tl-st--expected,.tl-st--proposed{color:var(--hmm-caption);border-color:var(--hmm-text-faint);border-style:dashed;}
.tl-framework .tl-name{font-weight:400;color:var(--hmm-text-muted);}
.tl-standing .tl-y{color:var(--hmm-text-muted);font-size:12px;}
.tl-stand-label{font-family:var(--hmm-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hmm-caption);margin-bottom:8px;}
.tl-stand-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.tl-stand-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--hmm-text-muted);border:1px solid var(--hmm-border);padding:4px 8px;}
.tl-stand-item .tl-c{padding:1px 5px;font-size:9px;}
.tl-c--global{border-style:dashed;color:var(--hmm-caption);}
.tl-global .tl-name{color:var(--hmm-text-muted);}
/* ===== mobile UX pass (UX/perf audit) ===== */
/* The regulation split needs more room than it was asking for. .reg-left floors at
   440px, so between 861 and 1040px the right column fell to 285-425px while a
   .tl-row cannot render below ~420px: 46px + 82px columns, four 14px gaps, padding,
   plus the org and status columns, which have no smaller form. The page scrolled
   sideways by up to 171px. Measured to zero at 1041px, so the split stacks below
   that and the timeline gets the full width. */
/* Clearance for the compact rail above: it measures 76px on a coarse pointer, so
   the 48px these sections carry left 28px of every one of them underneath it. The
   640px block below keeps its own 66px, tuned to the 68px the rail is down there. */
@media (hover:none),(pointer:coarse){
  .through,.ai,.mkt,.reg,.nec,.scr,.ask{padding-right:78px;}
  .site-footer{padding-right:78px;}
}
@media(max-width:1040px){
  .reg-split{flex-direction:column;gap:24px;}
  .reg-left{flex:auto;}
  .reg-right{margin-left:0;}
}
@media(max-width:860px){
  /* necessity sections: stack the machine over the panel (was side-by-side, unreadable sliver)
     and clear the rail, which the stacked panel's own 20px padding does not. */
  .nec{flex-direction:column;padding-right:78px;}
  .nec .stage,.nec[data-flip="1"] .stage{flex:auto;order:1;border-right:none;border-left:none;border-bottom:1px solid var(--hmm-border);padding:34px 20px 20px;}
  .nec .panel,.nec[data-flip="1"] .panel{flex:auto;order:2;padding:30px 20px 40px;gap:16px;}
  .stage .machine-wrap{min-height:44vh;}
  .stage .machine-wrap svg{max-height:56vh;}
  .reg-jobs{flex-direction:column;}
  /* touch targets >= 44px */
  .tl-filters button{min-height:44px;padding:11px 14px;}
}
@media(max-width:640px){
  .through,.ai,.mkt,.reg,.nec,.scr,.ask{padding-left:20px;padding-right:66px;}
  .site-footer{padding-right:66px;}
  .hero-row{width:calc(100vw - 86px);}
  .ai,.mkt{padding-top:64px;padding-bottom:64px;}
  /* hero copy is revealed by default now (see the pointer-gated block above);
     a narrow desktop window still gets it, at mobile type sizes */
  .box .commentary,.box .ledger,.box .box-go{opacity:1;max-height:none;}
  .box .commentary{margin-top:11px;font-size:15px;line-height:1.55;}
  /* Power/Eat/Heal: shrink the machine graphic + tighten the list so the stacked boxes are compact */
  .hero-row .box{min-height:auto;}
  .hero-row .box-stage{flex:0 0 126px;}
  .hero-row .machine{width:60%;height:100%;}
  .hero-row .box-info{padding:14px 18px 18px 18px;}
  .hero-row .ledger{margin-top:12px;}
  .hero-row .ledger li{font-size:11.5px;padding:5px 0;}
  .tl-axis{flex:0 0 54px;padding-left:8px;}
  /* P0 overflow: force the timeline row to reflow. The desktop `.tl-row{display:grid}` sits later in
     the sheet, and media queries add no specificity, so the earlier mobile rule lost. Re-assert here. */
  .tl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:9px 12px;}
  .tl-row .tl-name{flex:1 1 100%;order:3;}
  .tl-row .tl-org{flex:1 1 100%;order:4;}
  .tl-row .tl-c{order:1;} .tl-row .tl-date{order:2;} .tl-row .tl-status{order:5;}
  .tl-body,.tl-year,.tl-rows,.reg-right,.reg-tl-head{max-width:100%;min-width:0;}
  .tl-legend,.tl-filters,.tl-stand-wrap{max-width:100%;}
  /* legibility: nothing that carries meaning drops below ~11px, core reading copy sits at 14-15px */
  .tl-name{font-size:14px;}
  .tl-date,.tl-org,.tl-c{font-size:11.5px;}
  .tl-status,.tl-stand-label,.tl-stand-item{font-size:11px;}
  /* footer nav: real navigation (GP / Sources / Contact), give each link a 44px tap height */
  .site-footer{padding:32px 20px;}
  .footer-nav{gap:2px 22px;flex-wrap:wrap;}
  .footer-contact{display:inline-flex;align-items:center;min-height:44px;}
  .tl-filters button{font-size:11px;}
  .tl-org,.tl-legend,.tl-legend b{font-size:11px;}
}
@media(hover:none){.machine-wrap svg .callout{transform:scale(1.3);}}
/* ===== large screens (monitors / TV): cap content so lines stay readable and layout doesn't sprawl ===== */
@media(min-width:1440px){
  .nec{justify-content:center;}
  .nec .stage,.nec[data-flip="1"] .stage{flex:0 1 640px;max-width:640px;}
  .nec .panel,.nec[data-flip="1"] .panel{flex:0 1 740px;max-width:740px;}
  .reg-title,.reg-split{max-width:1440px;width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto;}
  .through>*{max-width:1360px;margin-left:auto;margin-right:auto;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}


/* ---------- S1b the fit: the ruled opener reads a size up from body prose ----------
   The opener is the first thing on the page after the hero and it is read in seconds,
   so its first paragraph carries the larger size and the rest of the block steps down
   to the section's own scale. */
.through-lead{font-size:22px!important;line-height:1.45!important;color:var(--hmm-pearl)!important;max-width:64ch!important;}

/* The unit and the physical instance, one per necessity, in card A beneath the
   definition. Set a step down from the definition it follows, because it answers a
   narrower question: what the thing is, and what it is sold by. */
.card-unit{margin-top:12px!important;padding-top:12px;border-top:1px solid var(--hmm-border);}

/* The dating rule beneath the register sentence. Same scale as the sentence, muted
   one step, because it explains how the count above it is taken. */

/* ---------- S8 the screen: ten markets in, three out ---------- */
.scr{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:96px 48px;color:var(--hmm-pearl);border-top:1px solid var(--hmm-border);}
.scr>*{width:min(1160px,100%);}
.scr-title{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-2xl);margin:10px 0 18px;line-height:1.06;}
.scr-lead{display:grid;grid-template-columns:1fr 1fr;gap:10px 46px;margin:0 0 40px;}
.scr-lead p{font-size:15px;line-height:1.65;color:var(--hmm-text-muted);margin:0;max-width:62ch;}
.scr-lead p:first-child{color:var(--hmm-pearl);}

/* The table scrolls inside its own box. The page body never scrolls sideways. */


/* ---------- S10 the close: the one thing asked ---------- */
.ask{padding:96px 48px 110px;border-top:1px solid var(--hmm-border);color:var(--hmm-pearl);display:flex;flex-direction:column;align-items:center;text-align:center;}
.ask>*{width:min(880px,100%);}
.ask-lead{font-family:var(--hmm-font-display);font-weight:700;font-size:var(--hmm-text-2xl);line-height:1.12;margin:0 0 22px;}
.ask-line{font-size:17px;line-height:1.6;color:var(--hmm-text-muted);margin:0;}
.ask-line a{color:var(--hmm-accent-text);text-decoration:none;border-bottom:1px solid var(--hmm-accent);}
.ask-line a:hover,.ask-line a:focus-visible{color:var(--hmm-pearl);}
.footer-contact[href^="mailto:"]{text-transform:none;letter-spacing:.04em;}

@media (max-width:1080px){
  .scr-lead{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:720px){
  /* Left and block padding only. The right padding is the rail clearance and it is
     set in the rail blocks above by class name, so a shorthand here would silently
     take it back. That is how these two sections ended up under the rail. */
  .scr{padding-top:72px;padding-bottom:72px;padding-left:22px;}
  .through-lead{font-size:19px!important;}
}

/* ---------- S7 the three markets as one table (markets.js, R-D37 2026-09-15) ----------
   Row labels carry a one-line note under them so the table explains its own rows and no
   prose is needed beside it. Figure cells are tabular; the two gate rows are short prose.
   The table scrolls inside its own box, so the page body never scrolls sideways. */
#markets{width:100%;margin:6px 0 18px;color:var(--hmm-text);}
#markets[data-state="no-data"]{display:none;}
#markets .mkt-tablewrap{overflow-x:auto;}
#markets .mkt-table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px;}
#markets .mkt-table caption{text-align:left;font-family:var(--hmm-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hmm-caption);padding:0 0 12px;}
#markets .mkt-table th,#markets .mkt-table td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--hmm-border);}
#markets .mkt-table thead th{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--hmm-accent-text);border-top:none;padding-bottom:10px;}
#markets .mkt-table tbody th{width:19%;font-weight:400;}
#markets .mkt-rowlabel{display:block;font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--hmm-pearl);}
#markets .mkt-rownote{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--hmm-caption);max-width:22ch;}
#markets .mkt-fig{font-family:var(--hmm-font-mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--hmm-pearl);}
#markets .mkt-prose{font-size:12.5px;line-height:1.55;color:var(--hmm-text-muted);max-width:34ch;}
@media (max-width:720px){
  #markets .mkt-table{font-size:12px;min-width:640px;}
  #markets .mkt-table th,#markets .mkt-table td{padding:10px 10px;}
}

/* ---------- S8 the screen: ten markets in, three out ----------
   The five-row filter table became one shrinking bar. Ten fixed columns, one row per
   filter, bar width being the count of markets still standing, and the removed names
   sitting in the columns the bar gave up. Ink roles read --hmm-text rather than
   --hmm-pearl, because pearl does not rebind on a light ground. */
/* ---- S8 THE SCREEN: the attrition bar ------------------------------------------------
   Ten fixed columns, one per market in the starting set, held identical on every row, so
   a cell that leaves takes its column's width with it and bar width is the count of
   markets still standing. The count and its denominator both print, because a bar without
   a visible denominator is a bar a reader cannot check.

   ONE VISUAL LANGUAGE. A rectangle, a label and a figure line. No legend: the axis names
   the ten columns once and the three survivors carry the market tokens the panels in
   section 08 use, so the colour is the legend.

   NO COLOUR IS WRITTEN HERE. --c is the market accent, set on the cell and the axis label
   by screen.js from the market tokens. --o is the standing weight, raised to 1 on a
   market cell, and it is a token alpha rather than a second grey.

   Below 720px the axis hides and the column gap closes, so the ten discrete slots become
   one continuous segmented bar: same DOM, same encoding, one value read as pure length. */
#screen{margin:0 0 4px;}
#screen .sc-grid{display:grid;grid-template-columns:236px minmax(0,1fr) 58px;column-gap:18px;align-items:start;}

#screen .sc-axis{padding:0 0 9px;border-bottom:1px solid var(--hmm-border);}
#screen .sc-axhead{font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--hmm-caption);align-self:end;}
#screen .sc-axhead--r{text-align:right;}
/* padding-right is what keeps two labels apart. Each label sits in its own grid column
   but the text overflows the column, so NORTH AMERICA and EUROPE were touching and read
   as one label. The gap is inside the label rather than between the columns, because the
   columns are the bar track and moving them would move the bars. */
#screen .sc-axlbl{grid-row:1;display:flex;align-items:flex-end;min-height:2.6em;padding-right:9px;font-family:var(--hmm-font-mono);text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;line-height:1.3;color:var(--hmm-caption);}
#screen .sc-axlbl.is-mkt{color:var(--c);}

#screen .sc-row{padding:13px 0 14px;border-bottom:1px solid var(--hmm-border);}
#screen .sc-lbl{display:flex;gap:9px;font-family:var(--hmm-font-mono);font-size:12px;letter-spacing:.03em;}   /* text colour inherits from the section, so the label follows whatever ground it is drawn on */
#screen .sc-num{min-width:7px;color:var(--hmm-accent-text);}

#screen .sc-reads{margin:5px 0 0;font-size:11.5px;line-height:1.5;color:var(--hmm-text-muted);max-width:30ch;}

#screen .sc-mid{min-height:42px;}
#screen .sc-track{display:grid;grid-template-columns:repeat(10,1fr);column-gap:3px;}
#screen .sc-cell{--o:.48;grid-row:1;height:18px;background:var(--hmm-text-muted);opacity:var(--o);transform-origin:left center;transition:opacity .5s var(--hmm-ease),transform .5s var(--hmm-ease);transition-delay:calc(var(--r,0) * 110ms);}
#screen .sc-cell.is-mkt{--o:1;background:var(--c);}
#screen .sc-cell.is-out{opacity:0;transform:scaleX(0);}
#screen.is-arm .sc-cell.is-out{opacity:var(--o);transform:none;}

#screen .sc-gap{grid-row:1;grid-column:var(--from,1) / -1;align-self:center;padding-left:7px;font-family:var(--hmm-font-mono);font-size:10.5px;line-height:1.35;letter-spacing:.02em;color:var(--hmm-caption);transition:opacity .45s var(--hmm-ease);transition-delay:calc(var(--r,0) * 110ms + 520ms);}
#screen.is-arm .sc-gap,#screen.is-arm .sc-count{opacity:0;}

#screen .sc-ev{margin:8px 0 0;font-size:10.5px;line-height:1.55;letter-spacing:.02em;color:var(--hmm-caption);max-width:92ch;}
#screen .sc-count{text-align:right;transition:opacity .45s var(--hmm-ease);transition-delay:calc(var(--r,0) * 110ms + 520ms);font-family:var(--hmm-font-mono);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.02em;}

#screen .sc-d{color:var(--hmm-caption);}
#screen .sc-cap{margin:12px 0 0;font-size:11px;line-height:1.55;color:var(--hmm-caption);}

@media (prefers-reduced-motion:reduce){
  #screen .sc-cell,#screen .sc-gap,#screen .sc-count{transition:none;}
}
@media (max-width:1080px){
  #screen .sc-grid{grid-template-columns:196px minmax(0,1fr) 54px;column-gap:14px;}
  #screen .sc-axlbl{font-size:8.5px;letter-spacing:.04em;}
}
@media (max-width:720px){
  #screen .sc-axis{display:none;}
  #screen .sc-grid{grid-template-columns:1fr auto;column-gap:14px;}
  #screen .sc-head{grid-column:1;grid-row:1;}
  #screen .sc-count{grid-column:2;grid-row:1;}
  #screen .sc-mid{grid-column:1 / -1;grid-row:2;margin-top:11px;}
  #screen .sc-reads{max-width:46ch;}
  #screen .sc-track{column-gap:0;}
  #screen .sc-cell{height:14px;}
  #screen .sc-gap{grid-column:1 / -1;grid-row:2;padding-left:0;margin-top:8px;}
}

/* The footnote reads from the figure's own left edge. The section centres every child
   narrower than its column, so the paragraph rides inside a full-column block instead of
   being centred on its own 80ch measure. */
#s8 .scr-foot{margin:14px 0 0;}

/* The lead is one paragraph now, so the two-column lead grid collapses to one. */
.scr-lead--one{grid-template-columns:1fr;}
.scr-lead--one p{max-width:76ch;}

/* Under 768px the rail collapses (GP 2026-09-15). At phone widths it sat over the body text,
   because a 70px fixed column on a 375px screen leaves no gutter for the sections to give
   back without squeezing the measure to 40 characters. The hero cards and the footer links
   still reach every section, so nothing is unreachable, and the sections take back the
   right-hand clearance the rail occupied. The mobile audit treats a rail that is not
   displayed as having no tap targets. Kept at the end of the file so it wins over the
   clearance blocks above. */
@media(max-width:767px){
  .railnav{display:none;}
  .through,.ai,.mkt,.reg,.scr,.ask{padding-right:48px;}
  .nec{padding-right:0;}
  .site-footer{padding-right:0;}
}
@media(max-width:640px){
  .through,.ai,.mkt,.reg,.scr,.ask{padding-right:20px;}
}

/* Touch viewports from 768px to 1100px (an iPad held landscape) keep the rail, because the
   measure has room for it, but the screen section's display-size title ran under the rail's
   short labels at 1024px. The section gives back the rail's width at those sizes, which is
   what the phone rule below 768px does for every section by hiding the rail instead. */
@media (pointer:coarse) and (min-width:768px) and (max-width:1100px){
  .scr,.mkt{padding-right:96px;}
}

/* ---------- S1 the fit breaks into dots on scroll (fit.js) ----------
   fit.js writes --fit-text on #mandate once per scroll frame, the paragraphs' opacity, and
   sets each dot's transform and fill-opacity inline as its own progress moves. Everything
   here is transform and opacity, so a scroll frame costs a style pass and a paint and never
   a layout. The section takes a stacking level so the dots that fly past its bottom edge
   paint over the hero that follows; the logo above it sits higher, at 8, and the overlay
   takes no pointer. At rest the overlay is display:none, which is what lets the engine's
   own IntersectionObserver hold its loop on the first screen. The wide-screen rule that
   caps every child of .through at 1360px must not reach the overlay, whose coordinates are
   the section's own. The flight math lives in fit.js and not here, for the reason its
   header records: a calc() chain on every circle was re-expanded on each of the engine's
   attribute writes and cost the first screen 75 ms a frame while nothing moved. */
#mandate{position:relative;z-index:1;}
#mandate.fit-live p{opacity:var(--fit-text,1);}
#mandate .fit-dots{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;overflow:visible;pointer-events:none;}
#mandate .fit-dots.fit-rest{display:none;}