/* HelioAtlas · design system v12 "Observatory"
   One stylesheet for every page. Black ground, Geist + Geist Mono (self-hosted), one warm signal (Solar) used sparingly,
   hairline structure, data set in tabular figures. Motion is transform/opacity only (no blur filters).
   Page files add layout only; they never redefine tokens. v12 adds: type roles (no label under 12 px), motion tokens,
   page transitions, section compositions (stack/split headers, feature, split, essay, endcap, specs), film, reader,
   lightbox, zooming hotspots, a step rail, one chart grammar (.chart / .ch-*) and a distinct error colour. */
@font-face{font-family:'Geist'; src:url('fonts/Geist-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:'Geist Mono'; src:url('fonts/GeistMono-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap}

:root{
  color-scheme: dark;
  --bg:#000; --bg-1:#060708; --bg-2:#0B0C0E; --bg-3:#111317; --bg-4:#17191E;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2); --line-4:rgba(255,255,255,.34);
  --fg:#F3F2EE; --fg-2:#A9A8A1; --fg-3:#7C7B75; --fg-4:#5F5E59;   /* fg-4: rules and icons only, never text */
  --sol:#F5A524; --sol-2:#FFC24A; --sol-ink:#1A1206; --sol-dim:rgba(245,165,36,.12); --sol-line:rgba(245,165,36,.42);
  --sky:#7CC4FF; --sky-dim:rgba(124,196,255,.12);
  --ok:#7BD3A4; --warn:#F0B95B; --err:#FF7A6B; --err-dim:rgba(255,122,107,.12);
  --loss:#C98B6A; --ref:#B9B7AF;   /* data palette: P50/yield = sol, P90 = sky, reference = ref, losses = loss */
  --f:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --m:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.2s; --dur-2:.45s; --dur-3:.8s; --dur-4:1.2s;
  --wrap:1320px; --wide:1560px; --gut:clamp(20px, 4vw, 48px);
  --sec:clamp(104px, 12vw, 184px);
  --r:10px; --r-lg:16px;
  --nav-h:64px;
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.6 var(--f); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip}
img,svg,video,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0; list-style:none}
::selection{background:var(--sol); color:var(--sol-ink)}
:focus-visible{outline:2px solid var(--sol); outline-offset:3px; border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; left:16px; top:-60px; z-index:100; background:var(--fg); color:#000; padding:10px 14px; border-radius:8px; font-weight:500}
.skip:focus{top:12px}
.num,.tab{font-variant-numeric:tabular-nums}

/* ── type ─────────────────────────────────────────────────────────────────────────────────── */
.display{font-size:clamp(46px, 7.4vw, 116px); line-height:.96; letter-spacing:-.05em; font-weight:330; text-wrap:balance}
.h1{font-size:clamp(40px, 5.4vw, 80px); line-height:1; letter-spacing:-.046em; font-weight:360; text-wrap:balance}
.h2{font-size:clamp(32px, 3.9vw, 56px); line-height:1.04; letter-spacing:-.04em; font-weight:380; text-wrap:balance}
.h3{font-size:clamp(22px, 2vw, 28px); line-height:1.18; letter-spacing:-.025em; font-weight:450; text-wrap:balance}
.h4{font-size:18px; line-height:1.3; letter-spacing:-.015em; font-weight:500}
.lede{font-size:clamp(17px, 1.45vw, 21px); line-height:1.5; color:var(--fg-2); letter-spacing:-.011em; max-width:40em; text-wrap:pretty}
.body{color:var(--fg-2); max-width:38em; text-wrap:pretty}
.small{font-size:14px; line-height:1.55; color:var(--fg-2)}
.dim{color:var(--fg-3)}
.em{color:var(--fg)}
.sol{color:var(--sol)}
.sky{color:var(--sky)}
.mono{font-family:var(--m); font-variant-numeric:tabular-nums}
.label{font:500 12px/1.3 var(--m); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3)}
.label b{color:var(--fg-2); font-weight:500}
.label .idx{color:var(--sol); margin-right:10px}
.unit{font-family:var(--m); font-size:.42em; letter-spacing:0; color:var(--fg-3); margin-left:.3em; font-weight:400; vertical-align:.12em}
.prose p + p{margin-top:1em}

/* ── layout ───────────────────────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sec{position:relative; padding-block:var(--sec); border-top:1px solid var(--line)}
.sec--flush{border-top:0}
.sec--tight{padding-block:clamp(72px, 8vw, 120px)}
.sec--band{background:var(--bg-1)}
.grid{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2vw, 32px); row-gap:32px}
.stack{display:flex; flex-direction:column; gap:var(--g, 16px)}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--g, 12px)}
.c-3{grid-column:span 3} .c-4{grid-column:span 4} .c-5{grid-column:span 5} .c-6{grid-column:span 6} .c-7{grid-column:span 7} .c-8{grid-column:span 8} .c-9{grid-column:span 9} .c-12{grid-column:1 / -1}
.s-4{grid-column-start:4} .s-5{grid-column-start:5} .s-6{grid-column-start:6} .s-7{grid-column-start:7} .s-8{grid-column-start:8}
@media (max-width:980px){ .grid > [class*="c-"]{grid-column:1 / -1} }

/* registration marks — small "+" crosses at the top corners of a section: the drawing-sheet detail */
.xm::before,.xm::after{content:''; position:absolute; top:-5px; width:9px; height:9px; background:
  linear-gradient(var(--line-4), var(--line-4)) center/1px 100% no-repeat, linear-gradient(var(--line-4), var(--line-4)) center/100% 1px no-repeat; pointer-events:none}
.xm::before{left:calc(max(var(--gut), (100% - var(--wrap)) / 2 + var(--gut)) - 4px)}
.xm::after{right:calc(max(var(--gut), (100% - var(--wrap)) / 2 + var(--gut)) - 4px)}

/* section header: label on the left rail, statement on the right */
.sh{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2vw, 32px); row-gap:20px; margin-bottom:clamp(48px, 6vw, 88px)}
.sh > .label{grid-column:1 / span 3; padding-top:.7em}
.sh > .sh__t{grid-column:4 / span 9; display:flex; flex-direction:column; gap:22px}
.sh--c{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px}
.sh--c .lede{margin-inline:auto}
@media (max-width:980px){ .sh > .label, .sh > .sh__t{grid-column:1 / -1} .sh > .label{padding-top:0} }

/* ── nav ──────────────────────────────────────────────────────────────────────────────────── */
.nav{position:fixed; inset:0 0 auto; z-index:50; height:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px);
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(0,0,0,.72); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px); border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__in{height:var(--nav-h); display:flex; align-items:center; gap:clamp(16px, 3vw, 40px)}
.logo{display:inline-flex; align-items:center; flex:none; line-height:0; padding:6px 0}
.logo img{display:block; height:19px; width:auto}
.foot__brand .logo img{height:22px}
.nav__links{display:flex; gap:4px; margin-left:8px}
.nav__links a{font-size:14px; color:var(--fg-2); padding:8px 12px; border-radius:8px; transition:color .2s, background .2s}
.nav__links a:hover{color:var(--fg); background:rgba(255,255,255,.05)}
.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__end{margin-left:auto; display:flex; align-items:center; gap:8px}
.nav__end .lnk{font-size:14px; color:var(--fg-2); padding:8px 12px} .nav__end .lnk:hover{color:var(--fg)}
.nav__burger{display:none; width:40px; height:40px; position:relative; border-radius:8px}
.nav__burger span{position:absolute; left:11px; width:18px; height:1.5px; background:var(--fg); transition:transform .35s var(--ease), opacity .2s}
.nav__burger span:nth-child(1){top:15px} .nav__burger span:nth-child(2){top:23px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.sheet{position:fixed; inset:0; z-index:49; background:#000; padding:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px) var(--gut) 32px; display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s}
.sheet > a{font-size:30px; letter-spacing:-.03em; padding:10px 0; border-bottom:1px solid var(--line)}
.sheet > a[aria-current]{color:var(--sol)}
.sheet .row{margin-top:24px}
.nav.is-open + .sheet{opacity:1; visibility:visible; transition:opacity .35s var(--ease)}
@media (max-width:900px){ .nav__links, .nav__end .lnk{display:none} .nav__burger{display:block} .nav__end .btn{display:none} }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 20px; border-radius:8px; font:500 15px/1 var(--f); letter-spacing:-.01em;
  white-space:nowrap; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s, transform .25s var(--ease); border:1px solid transparent}
.btn svg{width:14px; height:14px; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--p{background:var(--fg); color:#000} .btn--p:hover{background:#fff}
.btn--g{border-color:var(--line-3); color:var(--fg)} .btn--g:hover{border-color:var(--line-4); background:rgba(255,255,255,.04)}
.btn--sm{height:36px; padding:0 14px; font-size:14px}
.btn--lg{height:52px; padding:0 26px; font-size:16px}
.tlink{display:inline-flex; align-items:center; gap:8px; color:var(--fg); font-weight:500; font-size:15px}
.tlink svg{width:13px; height:13px; transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
.tlink--sol{color:var(--sol)}

/* ── figures: real product captures ───────────────────────────────────────────────────────── */
.shot{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 50px 120px -50px rgba(0,0,0,.9)}
.shot img{width:100%; height:auto}
.shot--crop{aspect-ratio:var(--ar, 16 / 10)} .shot--crop img{width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 0%)}
.cap{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 18px; font:400 12.5px/1.5 var(--m); color:var(--fg-3); max-width:72em}
.cap b{color:var(--fg-2); font-weight:500}

/* hotspots: numbered markers over a capture; the matching note lights on hover/focus */
.hs{position:absolute; left:var(--x); top:var(--y); width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:rgba(0,0,0,.72);
  border:1px solid var(--sol); color:var(--sol); font:500 12px/24px var(--m); text-align:center; z-index:2; transition:transform .3s var(--ease), background .3s, left .9s var(--ease), top .9s var(--ease)}
.hs::after{content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--sol-line); opacity:0}
.is-in .hs::after,.hs.is-on::after{animation:ping 2.6s var(--ease) 2}   /* v12: two pulses on arrival, never a perpetual ping */
.hs:hover,.hs.is-on{background:var(--sol); color:var(--sol-ink); transform:scale(1.08)}
@keyframes ping{0%{transform:scale(.7); opacity:0} 30%{opacity:1} 100%{transform:scale(1.5); opacity:0}}
.notes{display:grid; gap:0; counter-reset:n}
.note{display:grid; grid-template-columns:34px 1fr; gap:4px 12px; padding:16px 0; border-top:1px solid var(--line); transition:opacity .3s}
.note:last-child{border-bottom:1px solid var(--line)}
.note .k{font:500 12px/22px var(--m); color:var(--sol); width:24px; height:24px; text-align:center; border:1px solid var(--sol-line); border-radius:50%}
.note h4{font-size:15px; font-weight:500; letter-spacing:-.01em}
.note p{grid-column:2; font-size:14px; color:var(--fg-2); line-height:1.55}
.notes.has-on .note:not(.is-on){opacity:.42}

/* ── data: spec sheets, stats, readouts ──────────────────────────────────────────────────── */
.spec{display:grid; grid-template-columns:minmax(0, 1fr) auto; border-top:1px solid var(--line)}
.spec > dt, .spec > dd{padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.spec > dt{color:var(--fg-2)}
.spec > dd{font-family:var(--m); font-variant-numeric:tabular-nums; text-align:right; color:var(--fg); padding-left:16px}
.spec > dd em{font-style:normal; color:var(--fg-3); margin-left:4px}
.spec > dd.sol{color:var(--sol)} .spec > dd.sky{color:var(--sky)}

.stats{display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); border-top:1px solid var(--line-2)}
.stat{padding:28px 24px 8px 0; display:flex; flex-direction:column; gap:10px; min-width:0}
.stat + .stat{padding-left:24px; border-left:1px solid var(--line)}
.stat__v{font-size:clamp(40px, 4.6vw, 68px); line-height:1; letter-spacing:-.05em; font-weight:300; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat__v .unit{font-size:.3em}
.stat__l{font-size:14px; color:var(--fg-2); line-height:1.45; max-width:22em}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2, minmax(0, 1fr))} .stat:nth-child(odd){padding-left:0; border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }

.readout{display:inline-block; font:400 12px/1.5 var(--m); color:var(--fg-3); letter-spacing:.02em}
.readout b{color:var(--fg); font-weight:500}

.chip{display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 10px; border-radius:6px; border:1px solid var(--line-2); font:500 12px/1 var(--m); color:var(--fg-2); letter-spacing:.02em; white-space:nowrap}
.chip--sol{border-color:var(--sol-line); color:var(--sol)}
.chip--sky{border-color:rgba(124,196,255,.4); color:var(--sky)}

/* ── tiles (feature cells on a hairline lattice, not floating cards) ─────────────────────── */
.lattice{display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.cell{position:relative; padding:clamp(24px, 2.6vw, 36px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:12px; min-width:0;
  transition:background .4s var(--ease)}
a.cell:hover,.cell--hover:hover{background:var(--bg-3)}
.cell .label{margin-bottom:6px}
.cell h3{font-size:19px; font-weight:500; letter-spacing:-.02em; line-height:1.25}
.cell p{font-size:14.5px; color:var(--fg-2); line-height:1.55}
.cell .k{font:500 12px/1 var(--m); color:var(--fg-3); margin-top:auto; padding-top:14px}
.cell .k b{color:var(--sol); font-weight:500}
.cell .go{position:absolute; top:clamp(24px, 2.6vw, 36px); right:clamp(24px, 2.6vw, 36px); width:14px; height:14px; color:var(--fg-3); transition:color .3s, transform .4s var(--ease)}
a.cell:hover .go{color:var(--fg); transform:translate(2px, -2px)}
@media (max-width:980px){ .lattice{--n:2!important} }
@media (max-width:620px){ .lattice{--n:1!important} }

.ico{width:22px; height:22px; color:var(--fg-2); stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}

/* ── segmented tabs ──────────────────────────────────────────────────────────────────────── */
.seg{display:inline-flex; position:relative; padding:3px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-1); gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative; z-index:1; height:34px; padding:0 14px; border-radius:7px; font-size:14px; color:var(--fg-2); white-space:nowrap; transition:color .25s}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"]{color:#000}
@media (max-width:600px){ .seg{display:flex; width:100%} .seg button{flex:1 1 0; min-width:0; white-space:normal; height:auto; min-height:40px; padding:6px 8px; font-size:13px; line-height:1.2} }   /* v12: phones fit every tab instead of hiding the last */
.seg__ink{position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:7px; background:var(--fg); transition:transform .5s var(--ease), width .5s var(--ease)}
.panel[hidden]{display:none}
.panel.is-in{animation:panelIn .7s var(--ease) both}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* vertical tab list (workbench / chapters) */
.vtabs{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.vtabs button{display:grid; grid-template-columns:28px 1fr auto; align-items:baseline; gap:10px; text-align:left; padding:16px 0; border-bottom:1px solid var(--line); color:var(--fg-3); transition:color .3s}
.vtabs button .n{font:500 12px/1 var(--m); color:var(--fg-3)}
.vtabs button .t{font-size:17px; letter-spacing:-.015em; color:inherit}
.vtabs button .d{grid-column:2 / -1; font-size:14px; color:var(--fg-2); line-height:1.5; max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .4s, margin .6s var(--ease)}
.vtabs button:hover{color:var(--fg-2)}
.vtabs button[aria-selected="true"]{color:var(--fg)}
.vtabs button[aria-selected="true"] .n{color:var(--sol)}
.vtabs button[aria-selected="true"] .d{max-height:8em; opacity:1; margin-top:6px}
.vtabs .bar{grid-column:1 / -1; height:1px; background:var(--line); margin-top:12px; overflow:hidden; display:none}
.vtabs button[aria-selected="true"] .bar{display:block}
.vtabs .bar i{display:block; height:100%; width:100%; background:var(--sol); transform-origin:left; transform:scaleX(0)}
.vtabs.is-auto button[aria-selected="true"] .bar i{animation:bar var(--dur, 7s) linear forwards}
@keyframes bar{to{transform:scaleX(1)}}

/* ── accordion (FAQ) ─────────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; display:flex; justify-content:space-between; gap:24px; padding:22px 0; cursor:pointer; font-size:17px; letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; flex:none; width:12px; height:12px; margin-top:7px; background:
  linear-gradient(var(--fg-2), var(--fg-2)) center/100% 1.5px no-repeat, linear-gradient(var(--fg-2), var(--fg-2)) center/1.5px 100% no-repeat; transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 24px; color:var(--fg-2); max-width:44em; font-size:15.5px}

/* ── forms ───────────────────────────────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:13.5px; color:var(--fg-2)}
.input,.select,.textarea{width:100%; height:46px; padding:0 14px; border-radius:8px; background:var(--bg-2); border:1px solid var(--line-2); color:var(--fg); font:400 15px/1 var(--f); transition:border-color .2s, background .2s}
.textarea{height:auto; min-height:120px; padding:12px 14px; line-height:1.5; resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-3)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--sol); background:var(--bg-3)}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--err); background:var(--err-dim)}
.err{font-size:13px; color:var(--err)}   /* v12: errors are coral, never the brand amber */
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--fg-2)}
.check input{accent-color:var(--sol); width:16px; height:16px; margin-top:3px}
.notice{padding:14px 16px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-2); font-size:14px; color:var(--fg-2)}
.notice b{color:var(--fg)}

/* ── tables ──────────────────────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto; border-top:1px solid var(--line-2)}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px}
.tbl th,.tbl td{text-align:left; padding:14px 16px 14px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{font:500 12px/1.3 var(--m); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}
.tbl td{color:var(--fg-2)} .tbl td:first-child{color:var(--fg)}
.tbl .y{color:var(--fg)} .tbl .n{color:var(--fg-3)}
.tbl td.num{font-family:var(--m); font-variant-numeric:tabular-nums}

/* ── chapter: tall section with a sticky stage, driven by scroll progress (ha.js) ─────────── */
.chapter{position:relative; height:calc(var(--steps, 6) * 100vh); height:calc(var(--steps, 6) * 100svh)}
.chapter__stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}

/* ── HOME hero (world) ───────────────────────────────────────────────────────────────────── */
.hero{--steps:8; background:#000}
.hero__world{position:absolute; inset:0}
.hero__world canvas{width:100%!important; height:100%!important}
@media (min-width:901px){ .hero__world > img{transform:translateX(19%)} }
.hero__shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%)}
.hero__copy{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
.hero__copy .wrap{width:100%}
.beat{position:absolute; left:var(--gut); right:var(--gut); top:50%; transform:translateY(calc(-50% + 16px)); opacity:0; visibility:hidden; transition:opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s}
.beat.is-on{opacity:1; visibility:visible; transform:translateY(-50%); transition:opacity .9s var(--ease) .08s, transform 1.1s var(--ease) .08s, visibility 0s}
.beat__in{max-width:620px; display:flex; flex-direction:column; gap:22px; pointer-events:auto}
.beat .label{color:var(--fg-2)}
.beat .lede{color:rgba(243,242,238,.78); max-width:31em}
.beat--first .beat__in{max-width:720px}
/* v12: short windows (small laptops, landscape phones, a docked pane) — the beat type follows the height too, so copy never runs off the stage */
.beat .h1{font-size:clamp(28px, min(5.4vw, 8.4vh), 80px)}
.beat--first .display{font-size:clamp(32px, min(7.4vw, 11vh), 116px)}

.hero__meta{position:absolute; left:0; right:0; bottom:28px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; pointer-events:none}
.hero__meta .wrap{display:flex; justify-content:space-between; align-items:flex-end; width:100%; gap:24px}
.scene{font:400 12px/1.6 var(--m); color:rgba(243,242,238,.62); letter-spacing:.04em; display:flex; flex-direction:column; gap:2px}
.scene b{color:var(--fg); font-weight:500}
.prog{display:flex; gap:6px; align-items:center}
.prog i{width:22px; height:2px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden; position:relative}
.prog i::after{content:''; position:absolute; inset:0; background:var(--fg); transform:scaleX(var(--f, 0)); transform-origin:left}
.prog i.is-on::after{background:var(--sol)}
.cue{display:flex; align-items:center; gap:10px; font:400 12px/1 var(--m); letter-spacing:.06em; color:rgba(243,242,238,.62); text-transform:uppercase}
.cue span{width:1px; height:28px; background:linear-gradient(var(--fg), transparent); animation:cue 2.4s var(--ease-io) infinite; transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0}}

/* hero HUD — instrument panels that appear on their beat */
.hud{position:absolute; opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .8s var(--ease); pointer-events:none}
.hud.is-on{opacity:1; transform:none}
.panel-glass{background:rgba(8,9,11,.74); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border:1px solid var(--line-2); border-radius:12px}
.hud--rank{right:var(--gut); top:50%; width:min(380px, 34vw); margin-top:-150px}
.hud--rank .hd{display:flex; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font:500 12px/1 var(--m); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}
.hud--rank .hd b{color:var(--sol); font-weight:500}
.rk{display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:baseline; padding:11px 16px; border-bottom:1px solid var(--line); font-size:13.5px}
.rk:last-child{border-bottom:0}
.rk .i{font:500 12px/1 var(--m); color:var(--fg-3)}
.rk .n b{display:block; font-weight:500; color:var(--fg)} .rk .n em{font-style:normal; font-size:12px; color:var(--fg-3)}
.rk .v{font:500 13px/1 var(--m); color:var(--fg); text-align:right} .rk .v em{display:block; font-style:normal; font-size:12px; color:var(--fg-3); margin-top:5px}
.rk:first-of-type .i, .rk:first-of-type .v{color:var(--sol)}
.hud--terr{right:var(--gut); top:calc(var(--nav-h) + 28px); padding:14px 18px; display:flex; gap:22px}
.hud--terr div{display:flex; flex-direction:column; gap:6px}
.hud--terr span{font:500 12px/1 var(--m); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}
.hud--terr b{font:400 22px/1 var(--f); letter-spacing:-.03em} .hud--terr b em{font:400 11px var(--m); color:var(--fg-3); margin-left:4px; font-style:normal}
.hud--focus{right:var(--gut); top:calc(var(--nav-h) + 28px); width:min(360px, 30vw); padding:16px 18px}   /* v12: sits above the building, which the scene frames in the right half */
.hud--focus h5{font:500 12px/1 var(--m); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); display:flex; justify-content:space-between}
.hud--focus h5 b{color:var(--sol); font-weight:500}
.hud--focus .nm{font-size:20px; letter-spacing:-.025em; margin:10px 0 4px}
.hud--focus .co{font:400 12px/1.4 var(--m); color:var(--fg-3)}
.hud--focus dl{display:grid; grid-template-columns:repeat(3, 1fr); margin-top:16px; border-top:1px solid var(--line)}
.hud--focus dl div{padding:12px 0 0} .hud--focus dl div + div{padding-left:12px; border-left:1px solid var(--line)}
.hud--focus dt{font:500 12px/1 var(--m); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3)}
.hud--focus dd{font:400 22px/1.1 var(--f); letter-spacing:-.03em; margin-top:8px; font-variant-numeric:tabular-nums} .hud--focus dd em{font:400 11px var(--m); color:var(--fg-3); font-style:normal; margin-left:3px}
.hud--focus .fc{margin-top:14px; display:grid; gap:8px; font-size:13px; color:var(--fg-2)}
.hud--focus .fc li{display:grid; grid-template-columns:18px minmax(0, 1fr) auto; gap:8px; align-items:baseline}
.hud--focus .fc .k{font:500 12px/1 var(--m); color:var(--sol)}
.hud--focus .fc b{font:500 13px/1 var(--m); color:var(--fg); font-variant-numeric:tabular-nums}
.hud--close dl + dl{margin-top:4px; border-top:0}
.hud--focus .note2{font-size:12px; color:var(--fg-3); margin-top:14px; line-height:1.45}
.hud{z-index:3} .pin{z-index:2} .pin{position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .4s; will-change:transform}
.pin i{width:9px; height:9px; border-radius:50%; background:var(--sol); box-shadow:0 0 0 3px rgba(245,165,36,.25)}
.pin span{font:500 12px/1 var(--m); color:var(--fg); background:rgba(0,0,0,.66); padding:5px 7px; border-radius:5px; white-space:nowrap}
.hero.is-rank .pin{opacity:1}
@media (max-width:900px){
  .hero__shade{background:linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.1) 75%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%)}
  .hero__copy{align-items:flex-end; padding-bottom:96px}
  .beat{top:auto; bottom:0; transform:translateY(16px)} .beat.is-on{transform:none}
  .hud--rank,.hud--focus{left:var(--gut); right:var(--gut); width:auto; top:calc(var(--nav-h) + 16px); margin-top:0}
  .hud--rank .rk:nth-of-type(n+4){display:none}
  .hud--terr{left:var(--gut); right:auto}
  .pin span{display:none}
  .hero__meta{bottom:20px} .hero__meta .scene, .hero__meta .cue{display:none} .hero__meta .wrap{justify-content:flex-start}
  .hero__copy{padding-bottom:64px}
}

/* ── reveal motion ───────────────────────────────────────────────────────────────────────── */
[data-rv]{opacity:0; transform:translateY(18px); transition:opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay:calc(var(--i, 0) * 70ms)}
[data-rv].is-in{opacity:1; transform:none}
[data-rv="fade"]{transform:none}
[data-rv="scale"]{transform:scale(.975)}
.draw path,.draw line,.draw polyline,.draw circle.ln{stroke-dasharray:var(--len, 1200); stroke-dashoffset:var(--len, 1200); transition:stroke-dashoffset 2.2s var(--ease)}
.draw.is-in path,.draw.is-in line,.draw.is-in polyline,.draw.is-in circle.ln{stroke-dashoffset:0}

/* ── page header (inner pages) ───────────────────────────────────────────────────────────── */
.ph{position:relative; padding-top:calc(var(--nav-h) + clamp(80px, 11vw, 160px)); padding-bottom:clamp(64px, 8vw, 120px); overflow:hidden}
.ph__grid{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:80px 80px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 30%, #000 0%, transparent 75%); mask-image:radial-gradient(70% 80% at 70% 30%, #000 0%, transparent 75%)}
.ph .wrap{position:relative; display:flex; flex-direction:column; gap:28px}
.ph .row{margin-top:8px}
.crumbs{font:500 12px/1 var(--m); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); display:flex; gap:10px}
.crumbs a:hover{color:var(--fg)}
.toc{position:sticky; top:var(--nav-h); transition:top .5s var(--ease); z-index:20; background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); border-top:1px solid var(--line)}
body:has(.nav.is-hidden) .toc{top:0}
.toc .wrap{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.toc .wrap::-webkit-scrollbar{display:none}
.toc a{flex:none; font-size:13.5px; color:var(--fg-3); padding:14px 12px; position:relative; transition:color .25s}
.toc a:hover{color:var(--fg)}
.toc a.is-on{color:var(--fg)}
.toc a.is-on::after{content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:1px; background:var(--sol)}

/* ── CTA + footer ───────────────────────────────────────────────────────────────────────── */
.cta{position:relative; overflow:hidden; text-align:center}
.cta__glow{position:absolute; left:50%; bottom:-40%; width:min(1100px, 120vw); aspect-ratio:2 / 1; transform:translateX(-50%); border-radius:50% 50% 0 0;
  background:radial-gradient(50% 100% at 50% 100%, rgba(245,165,36,.22) 0%, rgba(245,165,36,.06) 40%, transparent 70%); pointer-events:none}
.cta__glow,.cta__arc{display:none!important}   /* v12: retired; pages end on an .endcap */
.cta__arc{position:absolute; left:50%; bottom:-62%; width:min(1100px, 120vw); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; border-top:1px solid var(--sol-line); pointer-events:none}
.cta .wrap{position:relative; display:flex; flex-direction:column; align-items:center; gap:28px}

.foot{border-top:1px solid var(--line); padding-block:72px 40px; font-size:14px}
.foot__top{display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:32px}
.foot__brand p{color:var(--fg-3); margin-top:16px; max-width:24em; line-height:1.55}
.foot h6{font:500 12px/1 var(--m); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px}
.foot ul{display:flex; flex-direction:column; gap:10px}
.foot ul a{color:var(--fg-2)} .foot ul a:hover{color:var(--fg)}
.foot__bot{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--fg-3); font-size:12.5px}
.foot__sun{font-family:var(--m); font-size:12px}
.foot__sun b{color:var(--fg-2); font-weight:500}
@media (max-width:900px){ .foot__top{grid-template-columns:repeat(2, 1fr)} .foot__brand{grid-column:1 / -1} }

/* ── instruments (sun path, distribution) ───────────────────────────────────────────────── */
.inst{position:relative; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--bg-1); overflow:hidden}
.inst__hd{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.inst__hd .label{color:var(--fg-2)}
.inst__body{padding:clamp(16px, 2.4vw, 28px)}
.inst__ft{display:flex; flex-wrap:wrap; gap:8px 22px; padding:12px 18px; border-top:1px solid var(--line); font:400 12px/1.5 var(--m); color:var(--fg-3)}
.inst__ft b{color:var(--fg); font-weight:500}
.inst svg text{font-family:var(--m); font-size:11px; fill:var(--fg-3)}
.key{display:inline-flex; align-items:center; gap:7px} .key i{width:14px; height:2px; border-radius:2px; background:currentColor}

/* ══ v12 ═══════════════════════════════════════════════════════════════════════════════════ */

/* page transitions: same-origin navigations cross-fade; the nav stays put */
@view-transition{navigation:auto}
.nav{view-transition-name:ha-nav}
::view-transition-old(root){animation:vtOut var(--dur-2) var(--ease) both}
::view-transition-new(root){animation:vtIn var(--dur-3) var(--ease) both}
@keyframes vtOut{to{opacity:0; transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0; transform:translateY(10px)}}

/* containers */
.wide{max-width:var(--wide); margin-inline:auto; padding-inline:clamp(12px, 1.8vw, 28px)}

/* section header variants: mix them; the label-left/statement-right .sh is one of three, not the default */
.sh--stack{display:flex; flex-direction:column; gap:22px}
.sh--stack > .label{padding-top:0}
.sh--stack > .sh__t{max-width:1040px}
.sh--split{align-items:end}
.sh--split > .label{grid-column:1 / -1; padding-top:0}
.sh--split > .sh__t{grid-column:1 / span 7}
.sh--split > .sh__side{grid-column:9 / span 4; display:flex; flex-direction:column; gap:18px}
@media (max-width:980px){ .sh--split > .sh__t, .sh--split > .sh__side{grid-column:1 / -1} }

/* feature: one capture or film, large, under a stacked header */
.feature{position:relative; padding-block:var(--sec); border-top:1px solid var(--line)}
.feature__media{margin-top:clamp(40px, 5vw, 72px)}

/* split: media beside a sticky column of exactly three notes */
.split{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(28px, 4vw, 72px); align-items:start}
.split--rev{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr)}
.split--rev > .split__media{order:2}
.split__text{position:sticky; top:calc(var(--nav-h) + 40px); display:flex; flex-direction:column; gap:22px; min-width:0}
.split__media{min-width:0}
.split + .split{margin-top:clamp(72px, 9vw, 140px)}
@media (max-width:980px){ .split,.split--rev{grid-template-columns:minmax(0, 1fr)} .split--rev > .split__media{order:0} .split__text{position:static} }

/* essay: long-form reading column with a pull line and footnotes */
.essay{max-width:40rem; font-size:clamp(17px, 1.3vw, 19px); line-height:1.7; color:var(--fg-2); text-wrap:pretty}
.essay p + p{margin-top:1.1em}
.essay strong{color:var(--fg); font-weight:500}
.essay h3{color:var(--fg); margin:2.2em 0 .6em}
.essay .pull{font-size:clamp(24px, 2.4vw, 34px); line-height:1.24; letter-spacing:-.03em; color:var(--fg); margin:1.4em 0; padding-left:22px; border-left:1px solid var(--sol)}
.fn{font:400 12.5px/1.55 var(--m); color:var(--fg-3)}
.fnr{font:500 12px/1 var(--m); color:var(--sol); vertical-align:super; margin-left:2px}

/* endcap: every page ends on the product and one inline call to action (no centred glow) */
.endcap{border-top:1px solid var(--line); padding-block:var(--sec)}
.endcap__in{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 88px); align-items:center}
.endcap__copy{display:flex; flex-direction:column; gap:24px; min-width:0}
.endcap__media{min-width:0}
@media (max-width:980px){ .endcap__in{grid-template-columns:minmax(0, 1fr)} }

/* specs: the full specification lives in one collapsed appendix per page */
.specs{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line)}
.specs > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer}
.specs > summary::-webkit-details-marker{display:none}
.specs > summary::after{content:''; flex:none; width:14px; height:14px; background:
  linear-gradient(var(--fg-2), var(--fg-2)) center/100% 1.5px no-repeat, linear-gradient(var(--fg-2), var(--fg-2)) center/1.5px 100% no-repeat; transition:transform var(--dur-2) var(--ease)}
.specs[open] > summary::after{transform:rotate(45deg)}
.specs__grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:44px clamp(24px, 4vw, 72px); padding:6px 0 52px}
.specs__grid h4{font:500 12px/1.3 var(--m); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px}
@media (max-width:860px){ .specs__grid{grid-template-columns:minmax(0, 1fr)} }

/* film: a muted product loop; plays in view, pauses out of view, never autoplays under reduced motion */
.film{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 50px 120px -50px rgba(0,0,0,.9)}
.film video{width:100%; height:auto; aspect-ratio:var(--ar, 16 / 10); object-fit:cover; background:var(--bg-2)}
.film__ctl{position:absolute; right:14px; bottom:16px; height:34px; padding:0 12px; border-radius:8px; background:rgba(0,0,0,.66); border:1px solid var(--line-3);
  font:500 12px/1 var(--m); color:var(--fg); display:inline-flex; align-items:center; gap:8px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.film__ctl svg{width:10px; height:10px}
.film__prog{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.12)}
.film__prog i{display:block; height:100%; background:var(--sol); transform-origin:left; transform:scaleX(var(--t, 0))}
.chaps{display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr)); border-top:1px solid var(--line); margin-top:18px}
.chaps button{text-align:left; padding:12px 12px 4px 0; display:flex; flex-direction:column; gap:6px; color:var(--fg-3); transition:color var(--dur-1)}
.chaps button .n{font:500 12px/1 var(--m)}
.chaps button .t{font-size:14px; letter-spacing:-.01em}
.chaps button:hover, .chaps button.is-on{color:var(--fg)}
.chaps button.is-on .n{color:var(--sol)}
@media (max-width:760px){ .chaps{grid-template-columns:repeat(3, minmax(0, 1fr))} }

/* reader: real document pages in a horizontal, snapping track */
.reader__track{display:flex; gap:clamp(14px, 2vw, 28px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px; scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}
.reader__page{flex:0 0 clamp(220px, 24vw, 330px); scroll-snap-align:start; display:flex; flex-direction:column; gap:12px; min-width:0}
.reader__page img{width:100%; aspect-ratio:210 / 297; object-fit:cover; object-position:top; border-radius:4px; background:#fff; box-shadow:0 30px 70px -30px rgba(0,0,0,.95); border:1px solid var(--line-2)}
.reader__page figcaption{font:400 12.5px/1.45 var(--m); color:var(--fg-3)}
.reader__page figcaption b{color:var(--fg-2); font-weight:500}
.reader__nav{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}
.reader__nav button{width:40px; height:40px; border-radius:8px; border:1px solid var(--line-3); display:grid; place-items:center; color:var(--fg-2)}
.reader__nav button:hover{color:var(--fg); border-color:var(--line-4)}
.reader__nav svg{width:13px; height:13px}

/* lightbox: [data-zoom] captures open full size */
[data-zoom]{cursor:zoom-in}
.lb{border:0; padding:0; margin:0; width:100vw; height:100vh; max-width:none; max-height:none; background:transparent; color:var(--fg)}
.lb::backdrop{background:rgba(0,0,0,.92)}
.lb[open]{display:flex; align-items:center; justify-content:center; padding:clamp(12px, 4vw, 56px); animation:panelIn var(--dur-2) var(--ease) both}
.lb img{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; border:1px solid var(--line-2)}
.lb__x{position:fixed; top:16px; right:16px; height:38px; padding:0 14px; border-radius:8px; background:rgba(0,0,0,.7); border:1px solid var(--line-3); font:500 12px/1 var(--m)}
.lb__cap{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); font:400 12.5px/1.4 var(--m); color:var(--fg-2); text-align:center; max-width:90vw}

/* hotspot zoom: [data-hs][data-hs-zoom] magnifies the capture towards the active hotspot */
[data-hs-zoom] .shot{overflow:hidden}
[data-hs-zoom] .shot img{transition:transform var(--dur-4) var(--ease); transform-origin:var(--zx, 50%) var(--zy, 50%)}
[data-hs-zoom].is-zoom .shot img{transform:scale(var(--zs, 1.8))}

/* step rail: numbered steps on one hairline, tied to a capture (works as a [data-tabs] tablist) */
.rail{display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr)); border-top:1px solid var(--line)}
.rail button{position:relative; text-align:left; padding:18px 18px 6px 0; display:flex; flex-direction:column; gap:8px; color:var(--fg-3); transition:color var(--dur-2); min-width:0}
.rail button::before{content:''; position:absolute; left:0; right:18px; top:-1px; height:1px; background:var(--sol); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-3) var(--ease)}
.rail button[aria-selected="true"]{color:var(--fg)}
.rail button[aria-selected="true"]::before{transform:scaleX(1)}
.rail.is-auto button[aria-selected="true"]::before, .is-auto .rail button[aria-selected="true"]::before{animation:bar var(--dur, 7s) linear both; transform:scaleX(0)}
.rail .n{font:500 12px/1 var(--m); color:var(--fg-3)}
.rail button[aria-selected="true"] .n{color:var(--sol)}
.rail .t{font-size:16px; letter-spacing:-.015em; line-height:1.25}
.rail .d{font-size:13.5px; color:var(--fg-2); line-height:1.45}
.rail button:hover{color:var(--fg-2)}
@media (max-width:980px){ .rail{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(170px, 46%); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent)} .rail::-webkit-scrollbar{display:none} .rail button{scroll-snap-align:start} }

/* one chart grammar for every chart on the site: HA.chart() draws at the container's real pixel size */
.chart{position:relative}
.chart__plot{position:relative; width:100%; height:var(--h, 300px); touch-action:pan-y}
.chart__plot svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ch-grid{stroke:var(--line); stroke-width:1; shape-rendering:crispEdges}
.ch-axis{stroke:var(--line-3); stroke-width:1; shape-rendering:crispEdges}
.ch-t{font:400 11px var(--m); fill:var(--fg-3); font-variant-numeric:tabular-nums}
.ch-l{font:500 12px var(--m); fill:var(--fg-2); font-variant-numeric:tabular-nums}
.ch-a{font:500 12.5px var(--f); fill:var(--fg)}
.ch-lead{stroke:var(--fg-3); stroke-width:1; stroke-dasharray:2 3; fill:none}
.ch-p50{stroke:var(--sol); stroke-width:1.75; fill:none}
.ch-p90{stroke:var(--sky); stroke-width:1.5; fill:none}
.ch-ref{stroke:var(--ref); stroke-width:1.25; fill:none}
.ch-fill-p50{fill:var(--sol-dim)}
.ch-fill-p90{fill:var(--sky-dim)}
.ch-bar{fill:var(--fg-4)}
.ch-bar--sol{fill:var(--sol)} .ch-bar--sky{fill:var(--sky)} .ch-bar--ref{fill:var(--ref)} .ch-bar--loss{fill:var(--loss)}
.ch-cur{stroke:var(--fg-2); stroke-width:1; visibility:hidden}
.ch-dot{fill:var(--fg); visibility:hidden}
.chart.is-hover .ch-cur, .chart.is-hover .ch-dot{visibility:visible}
.chart__ft{display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:14px; font:400 12px/1.5 var(--m); color:var(--fg-3)}
.chart__ft b{color:var(--fg); font-weight:500}

/* hero: skip the descent */
.skipintro{position:absolute; right:var(--gut); top:calc(var(--nav-h) + 22px); z-index:4; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line-3);
  background:rgba(0,0,0,.5); font:500 12px/1 var(--m); color:var(--fg-2); display:inline-flex; align-items:center; gap:8px; transition:opacity var(--dur-2), color var(--dur-1); pointer-events:auto}
.skipintro:hover{color:var(--fg)}
.skipintro svg{width:11px; height:11px; transform:rotate(90deg)}
.hero.is-late .skipintro{opacity:0; visibility:hidden; transition:opacity var(--dur-2), visibility 0s var(--dur-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important}
  [data-rv]{opacity:1; transform:none}
  .draw path,.draw line,.draw polyline{stroke-dashoffset:0}
  [data-hs-zoom] .shot img{transform:none!important}
}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* v12: short windows — placed last so it wins over the hero's own rules */
@media (max-height:760px){ .hero .beat--first .mono-line{display:none} .hero .beat__in{gap:16px} .hero .beat .lede{font-size:min(19px, 2.6vh + 4px)} }
@media (max-height:520px){ .hero .beat .lede{display:none} .hero .hud{display:none} .hero .skipintro{display:none} }