/* apex.nexus — "furnace and specimen sheet"
   Themes  paper (default) · .ink / body.dark (ink)
   Layout  .wrap · .section > .wrap.sec > .sec-head + .sec-body · .duo · .page-hero · .prose · .notfound
   Parts   .eyebrow .lede .note .fine .statement · .btn (.btn-sm .btn-lg .btn-ghost) .more (arrow = <span aria-hidden="true">→</span>) · .facts
           .stages (.idx, .profile) · .cells (.cells-2) > .cell (.tag) · .names · .principles
           .fig (.sheet) · .bar > .seg · .data · svg .draw (pathLength="1") */

@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Serif Fallback";src:local("Times New Roman");size-adjust:82.3%;ascent-override:120%;descent-override:38%;line-gap-override:0%}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

@view-transition{navigation:auto}

/* ---------- tokens and themes ---------- */
:root{
  --ink:#15130f;--paper:#f3efe6;--paper-2:#e8e2d4;--ember:#ff5a1f;--ember-ink:#b8360b;--mute-paper:#5d584d;--mute-ink:#a8a294;
  --serif:"Instrument Serif","Serif Fallback","Times New Roman",serif;
  --sans:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--t:.3s var(--ease);
  --max:1360px;--gut:clamp(1.25rem,4.4vw,4rem);--wrap:min(100% - 2*var(--gut),var(--max));--side:max(var(--gut),(100% - var(--max))/2);--gap:clamp(1.25rem,2.4vw,2.5rem);--sec:clamp(5rem,11vw,10rem);--hh:4.5rem;
  --label:500 .74rem/1.45 var(--mono);--crop:18px;
}
:root,.home .site-header[data-hero=past]{--bg:var(--paper);--fg:var(--ink);--mute:var(--mute-paper);--accent:var(--ember-ink);--btn:var(--ink);--btn-h:var(--ember-ink)}
.ink,.dark,.hero,.site-footer,.home .site-header{--bg:var(--ink);--fg:var(--paper);--mute:var(--mute-ink);--accent:var(--ember);--btn:var(--ember);--btn-h:var(--paper)}
:root,.ink,.dark,.hero,.site-header,.site-footer{--line:color-mix(in srgb,var(--fg) 18%,transparent);--line-2:color-mix(in srgb,var(--fg) 45%,transparent)}
body,.ink,.hero,.site-footer{background:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,::before,::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-padding-top:calc(var(--hh) + 1.5rem);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 clamp(1.0625rem,1rem + .18vw,1.15rem)/1.55 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0}
[role=list]{list-style:none}
[hidden]{display:none!important}
address{font-style:normal}
p{text-wrap:pretty}
main p,main dd{max-width:62ch}

h1,h2,h3,.statement,.footer-mark,.brand{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2.8rem,7.4vw,7.25rem);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(2.35rem,5.3vw,4.9rem);line-height:1;letter-spacing:-.018em;max-width:16em}
h3{font-size:clamp(1.6rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.01em}
h1 em,h2 em,.statement em,.role{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(1.15rem,1.05rem + .55vw,1.5rem);line-height:1.45;max-width:54ch}
.statement{font-size:clamp(1.75rem,3.3vw,3.1rem);line-height:1.1;letter-spacing:-.012em}
main .statement{max-width:25em}
.fine{font-size:.86rem;color:var(--mute)}
main .fine{max-width:78ch}

.eyebrow,.note,.tag,.idx,.sec-head,.profile,figcaption,caption,.facts dt,.data thead th,.anno,.motion-toggle,.btn,.more,.footer-legal,.bar{font:var(--label);letter-spacing:.08em;text-transform:uppercase}
.eyebrow,.note,.sec-head,figcaption,caption,.facts dt,.data thead th,.footer-legal{color:var(--mute)}
.eyebrow{display:flex;align-items:baseline;gap:.8em}
.eyebrow::before{content:"";flex:none;width:.55em;height:.55em;background:var(--accent)}
figcaption b,.sec-no,.anno b{font-weight:500;color:var(--fg)}

/* ---------- links and buttons ---------- */
.site-nav a:not(.btn),.footer-nav a,.more{padding-block:.35em;background:linear-gradient(currentColor 0 0) 0 100%/0 1px no-repeat;transition:background-size var(--t),color var(--t)}
.site-nav a:hover,.footer-nav a:hover,.more:hover,.site-nav a[aria-current],.footer-nav a[aria-current]{background-size:100% 1px}
.more{display:inline-flex;gap:.7em;color:var(--accent)}
a>span[aria-hidden]{display:inline-block;transition:transform var(--t)}
a:hover>span[aria-hidden],a:focus-visible>span[aria-hidden]{transform:translateX(.35em)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8em;padding:1.1em 1.5em;border:1px solid var(--btn);border-radius:2px;background:var(--btn);color:var(--bg);line-height:1;white-space:nowrap;transition:background-color var(--t),border-color var(--t),color var(--t)}
.btn:hover{background:var(--btn-h);border-color:var(--btn-h)}
.btn-sm{padding:.8em 1.05em}
.btn-lg{padding:1.35em 1.8em;font-size:clamp(.9rem,1.25vw,1.1rem);letter-spacing:.02em;text-transform:none}
.btn-ghost,.btn-ghost:hover{background:none;color:var(--fg)}
.btn-ghost{border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--fg)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.skip{position:fixed;top:.7rem;left:var(--gut);z-index:100;padding:.8em 1.1em;background:var(--ember);color:var(--ink);font:var(--label);transform:translateY(-250%);transition:transform var(--t)}
.skip:focus{transform:none}

/* ---------- header ---------- */
.wrap{width:var(--wrap);margin-inline:auto}
.site-header,.site-footer{padding-inline:var(--side)}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--hh);background:var(--bg);color:var(--fg);border-bottom:1px solid var(--line);transition:background-color var(--t),color var(--t),border-color var(--t)}
.home .site-header{position:absolute;inset:0 0 auto}
.home .site-header[data-hero]{position:fixed}
@supports (animation-timeline:scroll()){.home .site-header:not([data-hero=past]){animation:solid linear both;animation-timeline:scroll();animation-range:0 6rem}}
@keyframes solid{from{background-color:transparent;border-color:transparent}}
.brand{display:flex;align-items:center;gap:.65rem;font-size:1.4rem;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{flex:none;width:1.8rem;height:1.8rem}
.brand-core{fill:var(--ember);transform-box:fill-box;transform-origin:center;transition:transform var(--t)}
.brand:hover .brand-core{transform:scale(1.3)}
.site-nav{display:flex;align-items:center;gap:clamp(.6rem,2.4vw,2.25rem);font-size:.92rem;font-weight:500}
@media (max-width:559.98px){.brand-name{display:none}.site-nav{font-size:.86rem}}
@media (max-width:22.5em){.site-header{gap:.5rem}.site-nav{font-size:.8rem}.btn-sm{padding-inline:.7em;letter-spacing:.02em}}

/* ---------- hero (home) ---------- */
.hero,.section.ink{position:relative;isolation:isolate}
.hero{display:grid;grid-template-rows:1fr auto;min-height:min(100svh,60rem);padding-top:var(--hh);overflow:clip}
.hero::before,.section.ink::before{content:"";position:absolute;inset:0 auto 0 50%;z-index:-2;width:var(--wrap);translate:-50%;border-right:1px solid var(--line);background:linear-gradient(90deg,var(--line) 1px,transparent 0) 0 0/calc(100%/6) 100%;opacity:.45;pointer-events:none}
.hero-canvas{position:absolute;inset:var(--hh) 0 auto;z-index:-1;width:100%;height:min(104vw,64svh);opacity:.8;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.hero-copy,.page-hero,.notfound{display:grid;justify-items:start;gap:clamp(1.4rem,2.6vw,2.4rem)}
.hero-copy{align-self:end;padding-block:min(66vw,42svh) clamp(2rem,5vw,3.5rem)}
.hero h1{max-width:7.6em;font-size:clamp(3rem,min(9vw,15.5svh),9.5rem);line-height:.95}
.hero h1 em{display:block}
.hero .lede{max-width:33em}
.hero .lede em{font-style:normal;color:var(--accent)}
.hero-fig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-block:1rem 1.25rem;border-top:1px solid var(--line)}
.hero-fig figcaption{flex:1 1 20rem}
.anno{flex:1 1 100%;color:var(--mute);text-transform:none}
main .anno{max-width:none}
.anno b{text-transform:uppercase}
.anno::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.9em;border-radius:50%;background:var(--mute)}
.anno-core::before{background:var(--ember)}
.anno-core b{color:var(--ember)}
.motion-toggle{display:inline-flex;align-items:center;gap:.8em;padding:.65em .95em;border:1px solid var(--line-2);border-radius:2px;background:none;color:var(--fg);cursor:pointer;transition:border-color var(--t)}
.motion-toggle:hover{border-color:var(--fg)}
.motion-toggle::before{content:"";width:.62em;height:.75em;border-inline:.2em solid}
.motion-toggle.is-paused::before{width:0;height:0;border:solid transparent;border-width:.4em 0 .4em .65em;border-left-color:currentColor}
@media (min-width:60em){
  .hero-canvas{inset:0 calc(var(--side) - var(--gut)) 0 auto;width:min(var(--wrap)*.66 + var(--gut),125svh);height:100%;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .hero-copy{align-self:center;padding-block:clamp(2rem,6svh,5rem)}
  /* Leader labels: the box starts at the anchor; a transparent left border holds the leader, the padding box is an ink plate that knocks out the ring behind the text. */
  .hero[data-live] .anno{--lead:calc(clamp(1.5rem,3vw,3.25rem) + var(--r)*var(--dx));--pad:calc(var(--lead) + .5rem);position:absolute;left:calc(var(--cx) + var(--r)*var(--ax));right:calc(var(--side) + .5rem);top:calc(var(--cy) + var(--r)*var(--ay) - 1.02em);max-width:calc(var(--pad) + 15.5rem);padding:.3em .4em;border-left:var(--pad) solid transparent;background:var(--bg) padding-box;transition:opacity 1.1s var(--ease)}
  .hero[data-live] .anno::before{position:absolute;left:calc(var(--pad)*-1);top:1.02em;width:var(--lead);height:1px;margin:0;border-radius:0;background:var(--line-2);transform-origin:0 0;transition:transform 1.1s var(--ease)}
  .hero[data-live] .anno::after{content:"";position:absolute;left:calc(var(--pad)*-1 - 3px);top:calc(1.02em - 3px);width:7px;height:7px;border:1px solid;border-radius:50%;background:var(--bg)}
  .anno-apex{--ax:.4233;--ay:-1.0477;--dx:0} /* on the extent ring (1.13r, RING in site.js) at 22° from vertical */
  .anno-core{--ax:.2;--ay:.13;--dx:.2233} /* core edge; --dx aligns both labels in one column */
  .hero[data-phase=apex] .anno-core{opacity:0}
  .hero[data-phase=apex] .anno-core::before{transform:scaleX(0)}
}

/* ---------- sections ---------- */
.section{padding-block:var(--sec)}
.section:not(.ink)+.section:not(.ink),.page-hero+.section:not(.ink){padding-top:0}
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--gap);padding-top:1.1rem;border-top:1px solid var(--line)}
.sec>*{grid-column:1/-1}
.sec-no{margin-right:1em}
.sec-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.25rem,4.5vw,4rem)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:2rem var(--gap);align-items:start}
@media (min-width:60em){
  .sec>.sec-head{grid-column:span 3}
  .sec>.sec-head,.stick{position:sticky;top:calc(var(--hh) + 1.5rem);align-self:start}
  .sec>.sec-head~*{grid-column:span 9}
}
.page-hero{padding-block:clamp(4rem,10vw,9rem) clamp(3.5rem,8vw,7rem)}
.page-hero h1{max-width:13em}
.notfound{align-content:center;min-height:calc(100svh - var(--hh));padding-block:var(--sec)}
.notfound h1{font-size:clamp(3.5rem,12vw,12rem);line-height:.92}

/* ---------- ruled rows: facts, stages, principles ---------- */
.facts,.stages,.principles{display:grid;border-bottom:1px solid var(--line)}
.facts>div,.stages>li,.principles>li,.cell{position:relative;display:grid;gap:.5rem var(--gap)}
.facts>div::before,.stages>li::before,.cell::before,.stages>li::after,.cell::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line);transform-origin:0 0}
.stages>li::after,.cell::after{background:var(--ember);transform:scaleX(0);transition:transform .4s var(--ease)}
.stages>li:hover::after,.cell:hover::after,.stages>li:focus-within::after,.cell:focus-within::after{transform:none}
.facts>div{grid-template-columns:minmax(8.5rem,1fr) 3fr;padding-block:1rem}
.facts dt{padding-top:.3em}
.stages>li,.principles>li{grid-template-columns:3rem minmax(0,2fr) minmax(0,3fr);align-items:baseline;padding-block:clamp(1.4rem,2.6vw,2.2rem)}
.stages{position:relative}
.stages::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--ember);transform-origin:0 0}
.stages>li{padding-left:clamp(.9rem,1.6vw,1.5rem)}
.stages h3{font-size:clamp(2rem,3.4vw,3rem);transition:transform var(--t)}
.stages>li:hover h3{transform:translateX(.4rem)}
.stages div{display:grid;gap:1em}
.idx{color:var(--mute);transition:color var(--t)}
li:hover>.idx{color:var(--accent)}
.profile{padding-top:1em;border-top:1px dashed var(--line);color:var(--mute)}
.profile b{display:block;font-weight:500;color:var(--fg)}
.principles{counter-reset:n}
.principles>li{counter-increment:n;grid-template-columns:minmax(3.5rem,1fr) minmax(0,3fr) minmax(0,4fr);border-top:1px solid var(--line)}
.principles>li::before{content:counter(n);font:400 clamp(3.2rem,6vw,5.5rem)/.8 var(--serif);color:var(--accent)}
@media (max-width:47.99em){
  .stages>li,.principles>li{grid-template-columns:2.25rem minmax(0,1fr);column-gap:.75rem}
  .principles>li{grid-template-columns:3.25rem minmax(0,1fr)}
  .stages>li>:last-child,.principles>li>:last-child{grid-column:2}
}
@media (max-width:30em){.facts>div{grid-template-columns:1fr}}

/* ---------- cells ---------- */
.cells{--n:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(14rem,100%/var(--n) - 1px)),1fr));border:solid var(--line);border-width:0 1px 1px 0}
.cells-2{--n:2}
/* No orphan rows: a set of up to three cells is n-up or stacked, never 2 + 1. The huge positive term forces one full-width track below the threshold. */
.cells:not(:has(>:nth-child(4))){grid-template-columns:repeat(auto-fit,minmax(min(100%,max(100%/var(--n) - 1px,(var(--n)*13rem - 100%)*999)),1fr))}
.cell{align-content:start;gap:.9rem;padding:clamp(1.4rem,2.4vw,2.2rem);border-left:1px solid var(--line);transition:background-color var(--t)}
.cell:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.cell>p:not([class]){font-size:.97em}
.tag{color:var(--accent)}
.names .cell{grid-template-columns:1fr auto}
.names .cell>:nth-child(n+3){grid-column:1/-1}
.names .tag{color:var(--mute)}
.names h3{font-size:clamp(3.2rem,5.6vw,5.2rem);line-height:.95;letter-spacing:-.02em}
.role{margin-top:-.5rem;font:italic 400 clamp(1.6rem,2.2vw,2rem)/1.1 var(--serif)}
.cells-2 h3{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.glyph{transition:color var(--t);width:2.75rem;height:2.75rem;margin-bottom:clamp(1.5rem,4vw,3.5rem);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cell:hover .glyph{color:var(--accent)}
.glyph .brand-core{stroke:none}
.faint{opacity:.28}

/* ---------- figures, bar, tables ---------- */
.fig{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);padding:clamp(1.25rem,3vw,2.75rem);border:1px solid var(--line)}
.fig::before{content:"";position:absolute;inset:calc(var(--crop)*-1);pointer-events:none;--m:linear-gradient(var(--line-2) 0 0);--h:11px 1px no-repeat;--v:1px 11px no-repeat;--far:calc(100% - var(--crop));
  background:var(--m) 0 var(--crop)/var(--h),var(--m) var(--crop) 0/var(--v),var(--m) 100% var(--crop)/var(--h),var(--m) var(--far) 0/var(--v),var(--m) 0 var(--far)/var(--h),var(--m) var(--crop) 100%/var(--v),var(--m) 100% var(--far)/var(--h),var(--m) var(--far) 100%/var(--v)}
.sec>.fig{margin-top:var(--crop)}
.sheet{background:var(--paper-2)}
.sheet div:first-child>dd{font:400 clamp(2.2rem,4vw,3.4rem)/1 var(--serif);letter-spacing:-.015em}
.fig svg{width:100%;height:auto}
.bar{position:relative;display:flex;gap:2px;height:clamp(3.25rem,6vw,4.75rem);margin-bottom:1.1rem}
.bar::after{content:"";position:absolute;inset:calc(100% + .45rem) 0 auto;height:.45rem;border-right:1px solid var(--line-2);background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 5%)}
.seg{container-type:inline-size;flex:var(--v) 0 0;display:grid;align-content:end;padding:.55em .7em;background:var(--c);color:var(--bg);white-space:nowrap}
.seg b{display:block;font-weight:500}
.seg-1{--v:30;--c:color-mix(in srgb,var(--fg) 80%,transparent)}
.seg-2{--v:10;--c:color-mix(in srgb,var(--fg) 55%,transparent)}
.seg-3{--v:53;--c:var(--accent)}
.seg-4{--v:7;--c:color-mix(in srgb,var(--fg) 30%,transparent);color:var(--fg)}
.key{display:inline-block;width:.7em;height:.7em;margin-right:.8em;background:var(--c)}
.data,.prose table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums}
caption{caption-side:bottom;padding-top:1.1rem;text-align:left}
.data :is(th,td),.prose :is(th,td){padding:.85rem 1rem .85rem 0;border-top:1px solid var(--line);font-weight:400;text-align:left;vertical-align:baseline}
.data thead th{padding-block:0 .7rem;border:0}
.data tbody th,.data tfoot :is(th,td),.prose th{font-weight:500}
.data th span{display:block;padding-left:1.5em;font-weight:400;color:var(--mute)}
.data tfoot :is(th,td){border-color:var(--line-2)}
.data tfoot span{padding:0}
.data .num{padding-inline:1rem 0;text-align:right;white-space:nowrap}
.seg i{font-style:normal}
@media (max-width:30em){.data{font-size:.86em}.data :is(th,td){padding-right:.5rem}.data .num{padding-left:.5rem}.data th span{padding-left:0}.key{margin-right:.45em}}
@container (max-width:6.5rem){.seg b{display:none}}
@container (max-width:2.6rem){.seg i{display:none}}

/* ---------- prose (legal, company) ---------- */
.prose{max-width:68ch;padding-bottom:var(--sec)}
.prose>*+*{margin-top:1.15em}
.prose>:first-child{margin-top:0}
.prose>h2{margin-top:2.2em;padding-top:1.1rem;border-top:1px solid var(--line);font-size:clamp(2rem,3.6vw,3rem)}
.prose>h3{margin-top:1.9em;font-size:1.6rem}
@media (min-width:60em){.prose{margin-left:calc(25% + var(--gap)/4)}}
.prose :is(ul,ol){padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--accent);font:500 .8em var(--mono)}
.prose a:not(.btn),.facts a{color:var(--accent);text-decoration:underline 1px color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.22em;transition:text-decoration-color var(--t)}
.prose a:not(.btn):hover,.facts a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:600}
.prose .facts,.prose table{margin-top:2em}

/* ---------- footer ---------- */
.site-footer{container-type:inline-size;padding-block:clamp(3.5rem,8vw,7rem) 2rem;border-top:1px solid var(--line)}
.footer-top{display:grid;gap:clamp(2rem,5vw,4rem)}
.footer-mark{margin-left:-.04em;font-size:clamp(3.2rem,17.5vw,16rem);font-size:clamp(3.2rem,19.4cqw,17rem);line-height:.86;letter-spacing:-.03em}
.footer-nav{display:flex;flex-wrap:wrap;gap:.5rem clamp(1.25rem,3vw,2.5rem);font-size:.95rem;font-weight:500}
.footer-legal{margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--line);line-height:1.8}

/* ---------- motion: progressive enhancement only ---------- */
@keyframes rise{from{opacity:0;transform:translateY(1.75rem)}}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes dash{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
@keyframes fill{from{transform:scaleY(0)}}
.draw{stroke-dasharray:1}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero-copy>*,.page-hero>*,.notfound>*{animation:rise .9s var(--ease) both}
  :is(.hero-copy,.page-hero,.notfound)>:nth-child(2){animation-delay:.08s}
  :is(.hero-copy,.page-hero,.notfound)>:nth-child(3){animation-delay:.16s}
  :is(.hero-copy,.page-hero,.notfound)>:nth-child(4){animation-delay:.24s}
  .hero[data-live] .anno-apex{animation:fade 1.6s .5s backwards}
  @supports (animation-timeline:view()){
    .sec-body>:not(.cells,.stages,.facts,.principles,.duo),.duo>:not(.facts),.cells>*,.stages>li,.principles>li,.facts>div,.facts>div::before,.stages>li::before,.cell::before,.bar,.draw{animation:rise var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 24%}
    .facts>div::before,.stages>li::before,.cell::before{animation-name:draw}
    .bar{animation-name:wipe;animation-range:entry 40% cover 45%}
    .draw{animation-name:dash;animation-range:entry 20% cover 50%}
    .stages::before{animation:fill linear both;animation-timeline:view();animation-range:cover 18% cover 72%}
  }
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* platform page */
/* FIG. 02: two drawings of one pipeline — .pipe-v (stacked, default) and .pipe-h (wide, from 80em, where its labels clear 10px). Lengths are viewBox units. */
main .profile{max-width:none}
.pipe-h{display:none}
.pipe-v{max-width:22rem;margin-inline:auto}
.pipe svg{overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.pipe text{fill:currentColor;stroke:none;font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pipe .name{font:400 25px var(--serif);letter-spacing:-.01em;text-transform:none}
.pipe .dim{fill:var(--mute)}
.pipe .tick{stroke:var(--line-2)}
.pipe .node{fill:var(--bg)}
.pipe .dot{stroke-width:3.5}
.pipe .loop{stroke:var(--accent)}
.pipe .loop text{fill:var(--accent)}
@media (min-width:80em){.pipe-h{display:block}.pipe-v{display:none}}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .pipe{view-timeline:--pipe}
  .pipe .draw{animation-timeline:--pipe;animation-range:cover calc(12% + var(--d,0)*6%) cover calc(30% + var(--d,0)*8%)}
  .d1{--d:1}.d2{--d:2}.d3{--d:3}
}}