/* ==========================================================================
   Axions website — home page. Plain CSS3, self-hosted, no framework, no CDN.
   Two registers: dark (default) and warm paper (documents/editorial).

   Token values live in tokens.css and NOWHERE else. This file defines no colour,
   size, radius or duration of its own; every value is a var(). Link order matters:
   tokens.css must come before this file.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--surface-0);color:var(--ink-0);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
::selection{background:var(--selection);}
a{color:var(--teal);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--teal-hover);}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:2px;}
img,svg{max-width:100%;}
h1,h2,h3,p{margin:0;text-wrap:pretty;}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:var(--ink-on-accent);font-weight:600;padding:12px 18px;border-radius:0 0 10px 0;}
.skip:focus{left:0;}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--margin);}
/* ---- Masthead ---- */
.masthead{position:sticky;top:0;z-index:40;background:var(--surface-0-nav);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.masthead .brand img{height:40px;display:block;width:auto;}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{color:var(--ink-1);font-size:var(--fs-ui);transition:color .2s var(--ease);}
.nav a:hover{color:var(--ink-0);}
.nav .cta{background:var(--teal);color:var(--ink-on-accent);font-weight:600;font-size:var(--fs-ui);padding:10px 20px;border-radius:var(--radius-md);white-space:nowrap;
  transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);}
.nav .cta:hover{transform:translateY(-1px);background:var(--teal-hover);box-shadow:var(--glow-hover);color:var(--ink-on-accent);}
.nav .cta:active{transform:translateY(0);background:var(--teal-pressed);box-shadow:none;}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:none;cursor:pointer;}
.navtoggle span{display:block;height:2px;width:22px;background:var(--ink-0);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease);}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* The nav collapses at the same 860px every other multi-column layout does. Below ~780px
   the five links had compressed to the flex gap's 24px floor and sat against the wordmark. */
@media(max-width:860px){
  .navtoggle{display:flex;}
  .nav{position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface-0-panel);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);
    padding:6px var(--margin) 22px;display:none;}
  .nav.open{display:flex;}
  .nav a{padding:15px 2px;font-size:var(--fs-body);border-top:1px solid var(--border-subtle);color:var(--ink-0);}
  .nav a:first-child{border-top:none;}
  .nav .cta{margin-top:16px;text-align:center;border-top:none;}
}

/* ---- Sections & register ---- */
/* overflow:clip, not hidden — clip still contains the decorative figures but does NOT make
   the section a scroll container, so position:sticky on the widescreen intro rails works.
   With overflow:hidden every sticky rail computed as sticky and never moved. */
.section{padding-block:clamp(52px,6.5vw,80px);position:relative;overflow:clip;}
.section[id]{scroll-margin-top:var(--header-offset);}
.section--paper{background:transparent;padding-block:clamp(18px,2.5vw,30px);padding-inline:var(--margin);}
.section--paper .wrap{background:var(--paper-0);border-radius:var(--radius-sheet);padding:clamp(40px,5vw,72px) clamp(28px,5vw,72px);max-width:calc(var(--container) + 120px);}
.section--paper{color:var(--ink-reading-light);}
.section--paper h1,.section--paper h2,.section--paper h3{color:var(--ink-0-light);}

/* section intro block */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.13em;text-transform:uppercase;color:var(--teal);margin:0 0 18px;display:block;}
.section--paper .eyebrow{color:var(--teal-on-light);}
h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);line-height:1.06;letter-spacing:-0.025em;}
.h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-0.02em;color:var(--ink-0);max-width:20ch;}
.h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);letter-spacing:-0.01em;line-height:1.2;color:var(--ink-0);}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-0);max-width:60ch;margin-top:22px;}
.section--paper .lede{color:var(--ink-0-light);}
.prose{font-size:var(--fs-body);line-height:1.62;max-width:var(--measure);color:var(--ink-0);}
.section--paper .prose{color:var(--ink-reading-light);}
.prose + .prose{margin-top:1.1rem;}
.intro{margin-bottom:clamp(36px,5vw,56px);}
#iris .intro{margin-bottom:clamp(28px,3.4vw,40px);}

/* ---- Hero ---- */
.hero{padding:clamp(80px,12vw,140px) 0 clamp(44px,6vw,68px);}
.hero-figure{position:absolute;z-index:1;pointer-events:none;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:-5%;width:min(900px,66vw);aspect-ratio:320/280;}
.hero-figure::before{content:"";position:absolute;inset:20% 24%;border-radius:50%;background:var(--halo-ambient);}
.hero-figure img{position:relative;width:100%;height:100%;display:block;}
.hero-content{position:relative;z-index:2;}
/* Unconditional guard. .hero-content is a .wrap, so it carries margin-inline:auto — the moment
   .hero becomes a flex or grid container the wrap stops stretching, sizes to fit-content and the
   auto margins centre it, silently pulling the hero text off the page grid (this cost 402px at
   2576 when .hero went flex at >=1400). width:100% is inert in normal block flow, so it belongs
   at the base rather than in each breakpoint that introduces a formatting context.
   NOTE: .wrap relies on margin-inline:auto everywhere, so any flex/grid parent needs this. */
.hero>.wrap{width:100%;}
.hero h1{max-width:19ch;text-wrap:balance;}
.hero .lede{margin-top:26px;}
/* Narrow: the figure keeps its place behind the headline (a display composition, not reading
   text), and the hero owns the whole first screen — at 0.66 screens the paper sheet pushed into
   the fold and the register changed before the first thought landed. svh, not vh, so mobile
   browser chrome doesn't cut it short. */
@media(max-width:860px){
  .hero{min-height:calc(100vh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
    display:flex;flex-direction:column;justify-content:flex-start;
    /* Top-weighted, not centred. Centring split the leftover space evenly above and below, which
       is invisible on a short screen (SE: the text nearly fills the hero) but leaves ~115px of
       dead black top AND bottom on a 14/Pro Max and ~225px on iPad portrait. Anchoring the text
       high pools all the slack in ONE place, low down, where the spiral's lower arc already is. */
    padding-block:clamp(32px,8svh,96px) clamp(40px,9vw,64px);}
  /* Bullseye placed BY CONSTRUCTION at 72% across. A fixed -30% bleed put it at 70% on a phone
     (figure 120% of the viewport) but 94% on a tablet (figure 73%), nearly off the edge. Deriving
     the left edge from the figure's own width pins the focal point regardless of that ratio.
     Vertical centring comes from the base rule: this was bottom-anchored, which was fine when the
     hero was 0.66 screens tall but dropped the bullseye to the floor once the hero filled it. */
  .hero-figure{--fig-w:min(max(560px,78svh),132vw);width:var(--fig-w);
    inset-inline-start:72%;inset-inline-end:auto;
    transform:translate(-50%,-50%);opacity:.55;}
}

/* ---- Cards ---- */
.cards{display:grid;gap:20px;margin-top:clamp(32px,4vw,48px);}
.cards--2{grid-template-columns:repeat(2,1fr);}
.card--wide{grid-column:1 / -1;}
@media(max-width:600px){.card--wide{grid-column:auto;}}
.cards--3{grid-template-columns:repeat(3,1fr);}
.cards--4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:28px;}
/* Light-register surface step. --white is reserved for a single exhibit/document inset per
   surface (the Context databand); a card grid on paper takes --paper-1, the light-register
   parallel of surface-0 -> surface-1 on dark, so "a card" means the same step in both
   registers. Pending the matching rule in the DS (see README). */
.section--paper .card{background:var(--paper-1);border-color:var(--border-subtle-light);}
.card .lab{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.12em;text-transform:uppercase;color:var(--teal);margin:0 0 14px;display:block;}
.section--paper .card .lab{color:var(--teal-on-light);}
.card h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h4);line-height:1.25;color:var(--ink-0);margin:0 0 10px;}
.section--paper .card h3{color:var(--ink-0-light);}
.card p{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-0);margin:0;}
.section--paper .card p{color:var(--ink-reading-light);}
.card .idx{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--ink-2);letter-spacing:0.14em;display:block;margin-bottom:14px;}

/* ---- Split (golden 62/38) ---- */
.split{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(32px,5vw,64px);align-items:start;}
.split--even{grid-template-columns:1fr 1fr;}
@media(max-width:860px){.split,.split--even{grid-template-columns:1fr;gap:40px;}}
/* Partnership: heading is a short label, body carries the weight — give body the width and
   centre the heading vertically so its whitespace balances instead of pooling beneath it. */
#partnership .split{grid-template-columns:0.8fr 1.2fr;align-items:center;}
@media(max-width:860px){#partnership .split{grid-template-columns:1fr;align-items:start;}}

.src{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--ink-2-light);margin-top:22px;letter-spacing:0.02em;}
.section:not(.section--paper) .src{color:var(--ink-2);}

/* ---- Big stat (dark or paper) ---- */
.bigstat{border-top:2px solid var(--teal);padding-top:16px;max-width:34ch;}
.section--paper .bigstat{border-top-color:var(--teal-on-light);}
.bigstat .n{font-family:var(--font-mono);font-size:var(--fs-figure);line-height:1;color:var(--teal);font-feature-settings:"tnum";}
.section--paper .bigstat .n{color:var(--teal-on-light);}
.bigstat .t{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-1);margin-top:10px;}
.section--paper .bigstat .t{color:var(--ink-reading-light);}
.statpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,36px);margin-top:clamp(24px,3vw,34px);}
.statpair .bigstat{max-width:none;}
.statband{margin-top:clamp(32px,4vw,48px);}
.statband .statpair{margin-top:0;max-width:760px;}
.costgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,84px);align-items:start;}
.costcol-head .h2{margin-top:14px;}
.costcol-head .costcol-lede{margin-top:clamp(18px,2vw,24px);max-width:46ch;}
.costcol-stats .statband-lead{margin-top:0;}
.costcol-stats .statpair{max-width:none;margin-top:clamp(20px,2.4vw,28px);}
.costcol-stats .statband-closer{margin-top:clamp(28px,3.2vw,40px);max-width:52ch;}
@media(max-width:860px){
  .costgrid{grid-template-columns:1fr;gap:0;}
  .costcol-stats{margin-top:clamp(34px,5vw,48px);}
}
.statband-lead{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);color:var(--ink-0-light);letter-spacing:-0.01em;margin:0 0 clamp(20px,2.5vw,28px);}
.statband-closer{font-size:var(--fs-body);line-height:1.55;color:var(--ink-reading-light);max-width:56ch;margin:clamp(26px,3vw,36px) 0 0;text-wrap:pretty;}
@media(max-width:600px){.statpair{grid-template-columns:1fr;gap:20px;}}

/* ---- Incident timeline ---- */
.timeline{margin-top:clamp(28px,4vw,44px);display:grid;gap:0;}
.tl-item{display:grid;grid-template-columns:88px 16px 1fr;gap:20px;padding-bottom:30px;position:relative;}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:95px;top:14px;bottom:-6px;width:1px;background:var(--border-subtle);}
.tl-time{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-0);text-align:right;padding-top:2px;font-feature-settings:"tnum";}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--teal);margin-top:5px;z-index:1;}
.tl-dot.warn{background:var(--signal);box-shadow:0 0 18px -2px var(--signal);}
.tl-body h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h5);margin:0 0 5px;color:var(--ink-0);}
.tl-body.warn h3{color:var(--signal);}
.tl-body p{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-0);margin:0;max-width:60ch;}
@media(max-width:560px){
  .tl-item{grid-template-columns:16px 1fr;gap:6px 14px;padding-bottom:26px;}
  .tl-time{grid-column:2;grid-row:1;text-align:left;color:var(--teal);}
  .tl-dot{grid-column:1;grid-row:1;justify-self:center;margin-top:4px;}
  .tl-body{grid-column:2;grid-row:2;}
  .tl-item:not(:last-child)::before{left:7px;top:10px;bottom:-16px;}
}

/* ---- Pull / closer ---- */
.pull{font-family:var(--font-display);font-weight:600;font-size:var(--fs-pull);color:var(--ink-0);border-left:3px solid var(--teal);padding-left:24px;margin-top:clamp(36px,5vw,52px);letter-spacing:-0.01em;line-height:1.2;max-width:22ch;}
.section--paper .pull{color:var(--ink-0-light);border-left-color:var(--teal-on-light);}
.gapline{text-align:center;font-family:var(--font-display);font-weight:600;font-size:var(--fs-pull);color:var(--teal);margin-top:clamp(40px,5vw,56px);letter-spacing:-0.01em;}
.closer{font-size:var(--fs-body);line-height:1.5;border-top:1px solid var(--border-subtle);padding-top:28px;margin-top:32px;max-width:60ch;color:var(--ink-0);}
.section--paper .closer{color:var(--ink-0-light);border-top-color:var(--border-subtle-light);}

/* ---- Bullet list ---- */
.blist{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px;}
.blist li{display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-body);line-height:1.5;color:var(--ink-0);}
.section--paper .blist li{color:var(--ink-0-light);}
.blist .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:10px;}
.section--paper .blist .dot{background:var(--teal-on-light);}

/* ---- Method ladder (how Iris works) ---- */
.method{max-width:var(--measure);}
.method-lead{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-0);margin:0 0 clamp(30px,3.6vw,42px);max-width:58ch;}
.ladder{list-style:none;padding:0;margin:0;}
.rung{display:grid;grid-template-columns:34px 1fr;gap:20px;padding-bottom:26px;position:relative;}
.rung:not(:last-child)::before{content:"";position:absolute;left:16px;top:36px;bottom:-2px;width:1px;background:var(--border-subtle);}
.rung-n{width:34px;height:34px;border-radius:50%;border:1px solid var(--teal);color:var(--teal);background:var(--surface-0);font-family:var(--font-mono);font-size:var(--fs-label-sm);display:flex;align-items:center;justify-content:center;z-index:1;letter-spacing:0.02em;font-feature-settings:"tnum";}
.rung-body h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h5);margin:5px 0 6px;color:var(--ink-0);display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;}
.rung-body p{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-0);margin:0;max-width:58ch;}
.rung-tag{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label-sm);letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:3px 11px;white-space:nowrap;}
@media(max-width:600px){.rung{grid-template-columns:28px 1fr;gap:16px;}.rung:not(:last-child)::before{left:13px;}.rung-n{width:28px;height:28px;}}

/* ---- Observations ---- */
.obs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(32px,4vw,48px);}
@media(max-width:640px){.obs-grid{grid-template-columns:1fr;}}
.obs-card{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:28px;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.obs-card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-float);}
.obs-card .no{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--teal);letter-spacing:0.16em;margin-bottom:14px;}
.obs-card h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h5);line-height:1.25;color:var(--ink-0);}
.obs-card .read{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--ink-2);margin-top:auto;padding-top:18px;}
.obs-card:hover .read{color:var(--teal);}

/* ---- Team ---- */
.partners-row{display:flex;align-items:center;gap:20px;grid-column:1;grid-row:2;align-self:end;}
.partners-row img{height:58px;width:auto;}

/* ---- Contact ---- */
.contact{text-align:center;}
.contact .h2{margin-inline:auto;max-width:18ch;}
.contact .lede{margin-inline:auto;text-align:center;}
.btn{font-family:var(--font-body);font-size:var(--fs-h5);font-weight:600;padding:15px 30px;border-radius:var(--radius-md);border:none;cursor:pointer;display:inline-block;
  background:var(--teal);color:var(--ink-on-accent);transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);margin-top:34px;}
.btn:hover{transform:translateY(-1px);background:var(--teal-hover);box-shadow:var(--glow-hover);color:var(--ink-on-accent);}
.btn:active{transform:translateY(0);background:var(--teal-pressed);box-shadow:none;}

/* ---- Footer ---- */
.foot{border-top:1px solid var(--border-subtle);padding-block:56px;color:var(--ink-1);}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.foot .brand{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--ink-0);}
.foot .tag{margin-top:8px;color:var(--teal);font-size:var(--fs-body-sm);}
.foot-nav{display:flex;gap:26px;font-size:var(--fs-body-sm);flex-wrap:wrap;}
.foot-nav a{color:var(--ink-1);padding-block:9px;}
.foot-nav a:hover{color:var(--ink-0);}
.foot-bottom{display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;align-items:baseline;margin-top:40px;padding-top:22px;border-top:1px solid var(--border-subtle);}
.foot .legal{font-size:var(--fs-label);color:var(--ink-2);max-width:72ch;line-height:1.55;margin:0;}
.foot .copy{font-size:var(--fs-label);color:var(--ink-2);margin:0;white-space:nowrap;}

/* ---- Section texture (one quiet move, off to the side) ---- */
.tex{position:absolute;z-index:0;pointer-events:none;opacity:0.5;}
.scenario{border-left:2px solid var(--teal);padding-left:24px;margin:20px 0 40px;display:flex;flex-direction:column;gap:14px;}
.scenario p{max-width:60ch;font-size:var(--fs-body);line-height:1.62;color:var(--ink-0);margin:0;}

/* ---- Full-bleed statement (rhythm break in the back half) ---- */
.statement{background:var(--surface-1);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding-block:clamp(76px,11vw,140px);text-align:center;position:relative;overflow:hidden;}
.statement::before{content:"";position:absolute;left:50%;top:50%;width:min(720px,80%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--halo-ambient-soft);pointer-events:none;}
.statement .wrap{max-width:1080px;position:relative;z-index:1;}
.statement p{font-family:var(--font-display);font-weight:600;font-size:var(--fs-statement);line-height:1.08;letter-spacing:-0.022em;color:var(--ink-0);margin:0 auto;max-width:17ch;}
.statement .em{color:var(--teal);}

/* ---- Editorial ledger (asymmetric alternative to card grids) ---- */
.ledger{display:grid;grid-template-columns:0.82fr 1.6fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(28px,3.5vw,44px);}
/* Static, deliberately. This was authored as position:sticky, but .section{overflow:hidden}
   made every section its own scroll container, so it never actually stuck and the design was
   signed off without it. Switching .section to overflow:clip turned it on for the first time
   and it reads as a bug: the heading travels down toward the partner mark, leaving a void.
   Sticky rails are available if wanted, but they need composing for, not enabling. */
.ledger-head{grid-column:1;grid-row:1;}
.ledger-body{grid-column:2;grid-row:1 / span 2;}
.ledger-head .h2{max-width:14ch;}
.ledger-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--border-subtle-light);}
.ledger-item:first-child{padding-top:0;border-top:none;}
.ledger-item .li-n{font-family:var(--font-mono);font-size:var(--fs-figure);color:var(--teal-on-light);line-height:1;font-feature-settings:"tnum";}
.ledger-item .li-h{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--ink-0-light);margin:0 0 10px;letter-spacing:-0.01em;line-height:1.2;}
.ledger-item .li-kicker{display:block;font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:0.12em;text-transform:uppercase;color:var(--teal-on-light);margin:6px 0 14px;}
.ledger-item .li-claim{font-family:var(--font-display);font-weight:500;font-size:var(--fs-lede);line-height:1.32;color:var(--ink-0-light);letter-spacing:-0.01em;margin:0 0 14px;max-width:38ch;text-wrap:balance;}
.ledger-item .li-detail{font-size:var(--fs-body-sm);line-height:1.62;color:var(--ink-reading-light);margin:0;max-width:64ch;}
.ledger-item .li-detail + .li-detail{margin-top:1rem;}
.iris-emph{font-family:var(--font-body);font-weight:500;font-size:var(--fs-lede);line-height:1.5;letter-spacing:0;color:var(--ink-0);max-width:46ch;margin:clamp(16px,1.8vw,20px) 0 0;text-wrap:pretty;}
.ledger-item p{font-size:var(--fs-body);line-height:1.62;color:var(--ink-reading-light);margin:0;max-width:66ch;}
@media(max-width:860px){.ledger{grid-template-columns:1fr;gap:28px;}.ledger-head{position:static;grid-column:auto;grid-row:auto;}.ledger-body,.partners-row{grid-column:auto;grid-row:auto;}.partners-row{align-self:start;margin-top:8px;}.ledger-item{grid-template-columns:auto 1fr;}}
#cost .wrap{position:relative;overflow:clip;}
#cost .split{position:relative;z-index:1;}
.tex-cost{position:absolute;z-index:0;pointer-events:none;left:-104px;bottom:-128px;width:clamp(330px,44vw,540px);opacity:.5;}
@media(max-width:760px){.tex-cost{display:none;}}

/* ===== Context — full-width data band ===== */
.databand{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center;
  background:var(--white);border:1px solid var(--border-subtle-light);border-radius:var(--radius-card);
  padding:clamp(28px,3.5vw,40px);margin-top:clamp(28px,3.5vw,40px);}
.databand .fig-big{font-family:var(--font-mono);font-size:var(--fs-figure-xl);line-height:.9;color:var(--teal-on-light);font-feature-settings:"tnum";}
.databand .fig-big small{font-size:var(--fs-body-sm);color:var(--ink-2-light);display:block;margin-top:8px;line-height:1.3;max-width:16ch;font-family:var(--font-body);letter-spacing:0;}
.wbar{display:flex;height:72px;border-radius:10px;overflow:hidden;}
.wbar span{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 16px;font-family:var(--font-mono);font-size:var(--fs-label-sm);line-height:1.25;color:var(--ink-on-accent);}
.wbar b{font-size:var(--fs-body);font-weight:500;line-height:1;}
.wbar-note{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-reading-light);margin:18px 0 0;max-width:70ch;}
@media(max-width:560px){
  /* Proportional bar squeezes small segments on mobile — stack into full-width rows */
  .wbar{flex-direction:column;height:auto;}
  .wbar span{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:13px 18px;min-height:46px;}
  .wbar b{min-width:2ch;text-align:right;}
}
@media(max-width:860px){.databand{grid-template-columns:1fr;gap:24px;}}

/* ===== Problem — system map ===== */
.sysmap{position:relative;width:100%;max-width:920px;margin:clamp(-40px,-3vw,-16px) auto -56px;aspect-ratio:1/1;}
.sysmap::before{content:"";position:absolute;left:50%;top:50%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--halo-ambient-soft);pointer-events:none;}
.sysmap svg{position:absolute;inset:0;width:100%;height:100%;}
.sysmap .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:212px;height:212px;border-radius:50%;
  border:1px dashed var(--border-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:16px;}
.sysmap .hub .t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h5);color:var(--ink-0);line-height:1.15;}
.sysmap .hub .u{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);}
.node{position:absolute;transform:translate(-50%,-50%);width:clamp(212px,24vw,252px);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px 20px;}
.node .nn{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--teal);letter-spacing:.1em;}
.node h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h5);color:var(--ink-0);margin:7px 0 6px;line-height:1.2;}
.node p{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink-0);margin:0;}
.node.nlow{min-height:196px;}
.sysmap-note{text-align:center;font-size:var(--fs-body);color:var(--ink-1);max-width:52ch;margin:28px auto 0;}
@media(max-width:860px){
  /* Small screens: the radial layout has no room, so the five fragments stack. But the hub is
     the section's whole argument — the centre nobody sees — so instead of hiding it, it becomes
     the LAST card in the stack: five partial views, then the whole, marked out as different
     (dashed edge, teal wash) exactly as it is on desktop. The reading order now carries the
     point that the diagram carries spatially. */
  .sysmap{aspect-ratio:auto;max-width:460px;margin:8px auto 0;position:relative;
    display:flex;flex-direction:column;gap:14px;}
  .sysmap::before{display:none;}
  .sysmap svg{display:none;}
  .node{position:static;transform:none;width:auto;margin:0;order:1;}
  .node.nlow{min-height:0;}
  .sysmap .hub{order:2;position:static;transform:none;width:auto;height:auto;
    border-radius:var(--radius-lg);border:1px dashed var(--teal-muted);
    background:var(--wash-teal);padding:24px 20px;gap:10px;
    /* Left-aligned like the five node cards. Centred text is right for a disc at the middle of
       the radial diagram; in a left-aligned stack it reads as a second alignment. */
    align-items:flex-start;text-align:left;}
  /* The desktop circle needs the line break; the card does not. */
  .sysmap .hub .t br{display:none;}
  /* Mono line first, title second — the same eyebrow-then-heading structure as a node card,
     so it reads as the same family with a different status. */
  .sysmap .hub .u{order:1;color:var(--teal);}
  .sysmap .hub .t{order:2;font-size:var(--fs-h4);}
}

/* ===== Observations — reading index ===== */
.obs-index{margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--border-subtle);}
.obs-index a{display:grid;grid-template-columns:92px 1fr auto;gap:28px;align-items:baseline;
  padding:26px 8px;border-bottom:1px solid var(--border-subtle);text-decoration:none;
  transition:background .2s var(--ease),padding-left .2s var(--ease);}
.obs-index a:hover{background:var(--wash-teal);padding-left:18px;}
.obs-index .no{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--teal);letter-spacing:.14em;}
.obs-index h3{font-family:var(--font-body);font-weight:500;font-size:var(--fs-h4);letter-spacing:-.005em;color:var(--ink-0);margin:0;line-height:1.25;}
.obs-index .read{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--ink-2);white-space:nowrap;}
.obs-index a:hover .read{color:var(--teal);}
@media(max-width:600px){.obs-index a{grid-template-columns:1fr;gap:8px;}.obs-index .read{display:none;}}

/* ===== System-map motion ===== */
/* hover: border + glow only — transform stays free for the entrance rise */
@media(min-width:861px){
  .node:hover{border-color:var(--border-strong);box-shadow:var(--glow-hover);}
}
@media(prefers-reduced-motion:no-preference){
  /* Entrance: the centre reads first, then each spoke draws and its node arrives,
     one at a time, clockwise from the top — slow enough to follow and take in.
     Runs once (gated on .sysmap.in, set by the IntersectionObserver and never
     removed), then holds. */
  .node{transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
  .js .sysmap .hub{opacity:0;transform:translate(-50%,-50%) scale(.9);}
  .js .sysmap.in .hub{animation:hubIn .8s var(--ease) forwards;}
  .js .sysmap svg g line{stroke-dasharray:150;stroke-dashoffset:150;}
  .js .sysmap svg circle{stroke-dasharray:1445;stroke-dashoffset:1445;}
  .js .sysmap.in svg circle{animation:draw 1.6s var(--ease) .1s forwards;}
  .js .sysmap.in svg g line{animation:draw .7s var(--ease) forwards;}
  .js .sysmap.in svg g line:nth-child(1){animation-delay:.55s;}
  .js .sysmap.in svg g line:nth-child(2){animation-delay:1.00s;}
  .js .sysmap.in svg g line:nth-child(3){animation-delay:1.45s;}
  .js .sysmap.in svg g line:nth-child(4){animation-delay:1.90s;}
  .js .sysmap.in svg g line:nth-child(5){animation-delay:2.35s;}
  .js .sysmap .node{opacity:0;}
  .js .sysmap.in .node{animation:nodeFade .8s var(--ease) forwards;}
  /* nodes are divs 2–6 (the hub is div 1), in DOM order 01→05 */
  .js .sysmap.in .node:nth-of-type(2){animation-delay:.80s;}
  .js .sysmap.in .node:nth-of-type(3){animation-delay:1.25s;}
  .js .sysmap.in .node:nth-of-type(4){animation-delay:1.70s;}
  .js .sysmap.in .node:nth-of-type(5){animation-delay:2.15s;}
  .js .sysmap.in .node:nth-of-type(6){animation-delay:2.60s;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes hubIn{to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
  @keyframes nodeFade{to{opacity:1;}}
}
/* Mobile: the hub is a stacked card, not a centred disc, so the entrance animation's centring
   transform must not apply — translate(-50%,-50%) shifted the card up and left by half its own
   size, landing it on top of node 05. Same fade in, no translate. */
@media(max-width:860px) and (prefers-reduced-motion:no-preference){
  .js .sysmap .hub{transform:none;}
  .js .sysmap.in .hub{animation-name:nodeFade;}
}
/* Desktop only (radial layout): give the node entrance a gentle rise. On mobile the
   nodes are static-stacked, so they keep the transform-free opacity fade above. */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .js .sysmap .node{transform:translate(-50%,-50%) translateY(16px);}
  .js .sysmap.in .node{animation-name:nodeRise;}
  @keyframes nodeRise{to{opacity:1;transform:translate(-50%,-50%) translateY(0);}}
}
/* Mobile map: neutralise the radial layout's inline left/top so stacked cards
   sit where the CSS puts them. */
@media(max-width:860px){
  .sysmap .node{left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;}
}
.section > .wrap{position:relative;z-index:1;}

/* ---- Motion (respected; scroll-reveal only when JS is present) ---- */
@media(prefers-reduced-motion:no-preference){
  /* Pure fade + rise. The old scale(.994) shrank text a fraction of a percent as it arrived,
     which nudged glyph positions and read as a faint webby "pop" rather than a calm lift. */
  .js .reveal{opacity:0;transform:translateY(22px);}
  .js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .hero .reveal{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards;}
  .hero .eyebrow.reveal{animation-delay:.05s;}
  .hero h1.reveal{animation-delay:.14s;}
  .hero .lede.reveal{animation-delay:.26s;}
  .hero-figure{opacity:0;animation:fade 1.4s var(--ease) .2s forwards;}
  @media(max-width:860px){.hero-figure{animation:fadeHalf 1.4s var(--ease) .2s forwards;}}
  @keyframes rise{to{opacity:1;transform:none;}}
  @keyframes fade{to{opacity:1;}}
  @keyframes fadeHalf{to{opacity:.55;}}
}

/* ==========================================================================
   MOBILE REFINEMENT (≤600px) — designed for the phone, not degraded onto it.
   Goals: give copy room to breathe, collapse every fixed multi-column grid to
   one legible column, un-inset the paper sheets, and relax display leading
   that was tuned for wide measures onto narrow, many-line wraps.
   ========================================================================== */
@media(max-width:600px){
  /* One gutter for the whole page, on the 4px scale. 20px was off-scale and mean for a
     text-heavy read. */
  /* The statement is the page's one pause; at 32px it was smaller than several headings.
     Scoped to .statement so it cannot resize the essay <h1>, which shares --fs-statement. */
  .statement p{font-size:clamp(2.4rem,10vw,3.4rem);}

  /* Card grids were pinned at 2/3/4 columns at every width — on a phone that
     left ~150px cards. Collapse to a single column. */
  .cards--2,.cards--3,.cards--4{grid-template-columns:1fr;}

  /* Paper sheets run FULL BLEED on a phone. A 12px inset was too small to read as an inset and
     too large to be flush, and it pushed text on paper 14px further in than text on dark, so the
     page's left edge shifted at every register change. Edge to edge, the register reads as a band
     and every line on the page starts at the same x. */
  .section--paper{padding-inline:0;}
  .section--paper .wrap{padding:clamp(40px,10vw,56px) var(--margin);border-radius:0;max-width:none;}

  /* Display type: relax the tight desktop leading over several wrapped lines */
  .hero h1{line-height:1.14;}
  .h2{line-height:1.16;}
  .statement p{line-height:1.16;}

  /* Give the pause its room back. */
  .statement{padding-block:clamp(112px,30vw,140px);}

  /* Editorial ledger index sits closer on a narrow column */
  .ledger-item{gap:16px;}

  /* Two paragraphs of the cost closer read as one block, not a fresh beat. */
  .statband-closer + .statband-closer{margin-top:1.1rem;}
}

/* Tablet: the sheet stays a card on the dark field, but with an inset you can actually see.
   12px read as a mistake; 24px reads as a decision. */
@media(min-width:601px) and (max-width:860px){
  .section--paper{padding-inline:24px;}
  .section--paper .wrap{border-radius:24px;}
  /* The pause needs to read as a pause here too, not just on a phone. */
  .statement{padding-block:clamp(112px,15vw,144px);}
  .statement p{font-size:clamp(2.4rem,5.6vw,3.4rem);}
}

/* The 861–1399 band had no hero min-height at all: the >=1400 block sets 84vh and <=860 now
   fills the screen, but iPad landscape and small laptops fell between and the hero collapsed to
   its content. The hero owns the first screen at every width. */
@media(min-width:861px) and (max-width:1399px){
  .hero{min-height:calc(100vh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-block:clamp(32px,8svh,96px) clamp(40px,9vw,64px);}
}

/* Context prose spacing (moved off inline styles so the widescreen grid can override it) */
.context-prose{margin-top:22px;max-width:70ch;}
/* Iris closing notes — commentary, deliberately NOT styled like the outcome
   cards below: full-width kicker rule above a muted label, no card. */
.iris-notes{margin-top:34px;display:grid;gap:26px;}
.iris-notes .note{border-top:1px solid var(--border-strong);padding-top:16px;max-width:60ch;}
.iris-notes .note-lab{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-1);margin:0 0 12px;display:block;}
.iris-notes .note p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--ink-0);margin:0;max-width:56ch;}

/* ==========================================================================
   WIDESCREEN (≥1400px) — a dedicated composition for large monitors, designed
   for the canvas rather than the base layout stretched. Paper sheets read as
   focused editorial cards; dark sections open with an anchoring intro rail and
   let their heavier content break out to full width.
   ========================================================================== */
@media(min-width:1400px){
  /* vertical rhythm — enough air between sections without a chasm */
  .section{padding-block:clamp(48px,2.6vw,72px);}
  /* The pause, at width. This block used to REDUCE the statement's padding, so the page's one
     considered break was proportionally smallest on the biggest screens (0.27 of a 1440 screen
     against 0.50 at 1280). It now grows with the canvas like everything else. */
  .statement{padding-block:clamp(112px,8vw,208px);}

  /* paper sheets read as focused cards on the dark field, not full-bleed slabs */
  .section--paper .wrap{max-width:1280px;}
  /* Scaled in step with --container at >=2400 so the dark and paper left edges stay as close as
     they were; widening only the dark container pushes them 282px apart instead of 152px. */
  @media(min-width:2400px){ .section--paper .wrap{max-width:1600px;} }

  /* ---- Hero: the base layout's proportions, scaled up — a big spiral meeting the text ---- */
  .hero{min-height:84vh;display:flex;align-items:center;padding-block:clamp(48px,5vw,96px);}
  .hero h1{max-width:18ch;}
  .hero .lede{max-width:54ch;margin-top:30px;}
  /* Cap raised from 1240px: 64vw hit that cap at a ~1937px viewport, so above it the figure was
     frozen while the text column kept moving right, and the overlap that gives the hero its depth
     opened into a gap. At 64vw the spiral holds the same share of the canvas at every width. */
  .hero-figure{width:min(2400px,64vw);inset-inline-end:-4%;inset-block-start:50%;transform:translateY(-50%);}

  /* ---- Editorial rail: Sectors & Observations (short intros stay put) ---- */
  #sectors .wrap,#observations .wrap{display:grid;grid-template-columns:0.85fr 1.65fr;column-gap:clamp(64px,5vw,110px);align-items:start;}
  /* Static for the same reason as .ledger-head — see the note there. */
  #sectors .wrap>.intro,#observations .wrap>.intro{grid-column:1;margin-bottom:0;align-self:start;}
  #sectors .wrap>:not(.intro),#observations .wrap>:not(.intro){grid-column:2;}
  #sectors .cards,#observations .obs-index{margin-top:0;}
  #sectors .intro .lede,#observations .intro .lede{max-width:36ch;}

  /* ---- How Iris works: intro rail + method ladder up top; notes, cards and
     closing line all run below the ladder full width. ---- */
  #iris .wrap{display:grid;grid-template-columns:0.85fr 1.65fr;column-gap:clamp(64px,5vw,110px);align-items:start;}
  #iris .intro{grid-column:1;grid-row:1;align-self:start;margin-bottom:0;}
  #iris .intro .lede{max-width:38ch;}
  #iris .method{grid-column:2;grid-row:1;margin-top:0;}
  #iris .iris-notes{grid-column:1 / -1;grid-row:2;max-width:none;margin-top:clamp(30px,3.2vw,48px);grid-template-columns:repeat(3,1fr);gap:clamp(32px,3vw,60px);padding-top:0;border-top:0;}
  #iris .iris-notes .note p{max-width:none;}
  #iris .iris-notes .note{max-width:none;}
  #iris .cards--2{margin-top:clamp(56px,6vw,96px);}
  #iris .cards--2{grid-column:1 / -1;grid-row:3;grid-template-columns:repeat(4,1fr);align-items:start;margin-top:clamp(30px,3.4vw,52px);}
  #iris .wrap>.prose{grid-column:1 / -1;grid-row:4;max-width:80ch;}

  /* ---- Context: the sheet keeps its width for the data figure, but the prose does not.
     max-width:none here ran reading text to ~134 characters a line; the system's law is
     60–70ch. The text sits as an editorial column, the figure spans beneath it. ---- */
  #context .reveal>.lede{max-width:52ch;}
  #context .context-prose{max-width:68ch;}
  #context .src{max-width:68ch;}
  #context .closer{max-width:68ch;}
  #context .databand{max-width:900px;gap:clamp(28px,3vw,44px);}

  /* ---- What's at stake: rail + roomier stats so the closing text isn't cramped ---- */
  .costgrid{grid-template-columns:0.9fr 1.1fr;column-gap:clamp(48px,4vw,84px);}
  .costcol-head .costcol-lede{max-width:36ch;}
  .costcol-stats .statband-closer{max-width:62ch;}

  /* ---- Why us: let the detail paragraphs use the width, fewer lines ---- */
  .ledger-item .li-claim{max-width:44ch;}
  .ledger-item .li-detail{max-width:84ch;}

  /* ---- Problem: scenario and timeline side by side ---- */
  #problem .reveal:has(.scenario){display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(56px,5vw,110px);align-items:start;}
  #problem .reveal:has(.scenario)>.eyebrow{grid-column:1 / -1;}
  #problem .reveal:has(.scenario)>.scenario{grid-column:1;margin-bottom:0;}
  #problem .reveal:has(.scenario)>.timeline{grid-column:2;margin-top:0;}

  /* ---- Rhythm-break statement & contact scale up ---- */
  .statement p{font-size:clamp(3rem,3.6vw,5.4rem);max-width:20ch;}
  .contact .lede{font-size:clamp(1.3rem,1.3vw,1.55rem);}
}