@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════
   OneHop CDN — The Cross-Connect
   A Meet-Me Room patch field: anodized panel, silkscreen legend, laminated
   label stock, and the TIA-598 optical colour code carrying real roles.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url(assets/fonts/martianmono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url(assets/fonts/martianmono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* hardware */
  --void:#08090B; --chart-bg:#0B0D10; --frame:#101317; --panel:#191D22;
  --panel-hi:#232830; --rule:#2C333C; --rule-lit:#3D4753;
  /* ink on hardware */
  --ink:#E9EEF3; --ink-2:#A7B3BF; --silk:#8B97A4;
  /* laminated label stock */
  --stock:#ECE7DB; --stock-2:#DFD8C7; --stock-3:#CFC7B2;
  --stock-ink:#16181B; --stock-ink-2:#54585D;
  /* TIA-598 optical code — functional roles */
  --aqua:#0FC7B0; --aqua-lit:#6FF0DE; --aqua-deep:#075E54; --aqua-ser:#0C9C8B;
  --yellow:#F5C518; --magenta:#E0218A; --magenta-ser:#B01C70; --apc:#3ED27A;
  --fault:#FF5A3C;

  --measure:68ch;
  --gut:clamp(1.25rem,4vw,3rem);
  --max:1320px;
  --snap:cubic-bezier(.2,.9,.25,1);           /* LC latch: it clicks and stops, it does not bounce */
  --ease:cubic-bezier(.16,1,.3,1);            /* exponential out */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--rule-lit) var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-optical-sizing:auto;
  font-variation-settings:"wdth" 100;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* ── browser surfaces: the parts we did not draw still carry the design ── */
::selection{background:var(--aqua);color:var(--void)}
.stock ::selection{background:var(--stock-ink);color:var(--stock)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--void);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--rule-lit)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:1px}
.stock :focus-visible{outline-color:var(--aqua-deep)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
input,textarea{caret-color:var(--aqua)}
:where(h1,h2,h3,h4,p,ul,ol,dl,figure,pre){margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
output{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--aqua);color:var(--void);
  padding:.7rem 1.1rem;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}

.nojs{margin:0;padding:.85rem var(--gut);background:#1d1a10;color:var(--yellow);
  border-bottom:1px solid color-mix(in srgb,var(--yellow) 30%,transparent);
  font-size:.8rem;line-height:1.5}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ── type primitives ──────────────────────────────────────────────── */
.h2{
  font-size:clamp(1.85rem,1.1rem + 2.6vw,3.15rem);font-weight:760;
  font-variation-settings:"wdth" 106;text-transform:uppercase;
  letter-spacing:-.018em;line-height:1;text-wrap:balance;color:var(--ink);
}
.h2--ink{color:var(--stock-ink)}
.h3{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);font-weight:720;
  font-variation-settings:"wdth" 100;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.dek{max-width:var(--measure);color:var(--ink-2);font-size:clamp(.98rem,.94rem + .2vw,1.12rem);line-height:1.62}
.dek--ink{color:var(--stock-ink-2)}
.note{margin-top:1.1rem;color:var(--silk);font-size:.78rem;line-height:1.5;max-width:60ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* fabricated material carries its label wherever it appears, above the fold included */
.synth{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.1rem;max-width:64ch;
  color:var(--silk);font-size:.74rem;line-height:1.5}
.synth span{flex:none;margin-top:.06em;font-size:.7rem;font-weight:700;
  font-variation-settings:"wdth" 76;text-transform:uppercase;letter-spacing:.14em;
  color:var(--yellow);border:1px solid color-mix(in srgb,var(--yellow) 42%,transparent);
  border-radius:2px;padding:.04em .38em}
.synth--stock{color:var(--stock-ink-2)}
.synth--stock span{color:#8a7f66;border-color:#c0b69e}

.mono,.readout__val,.tbl,.code,.frame,.figures dd,.facts dd,.order__meta dd,.labels{
  font-family:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}

/* silkscreened legend — lives on hardware, never above a heading */
.edge{
  position:absolute;left:0;top:0;bottom:0;width:clamp(28px,3.4vw,46px);margin:0;
  border-right:1px solid var(--rule);
  background-image:radial-gradient(circle at 50% 14px,#0b0e12 2.6px,transparent 2.8px);
  background-size:100% 78px;background-repeat:repeat-y;
  display:grid;place-items:center;pointer-events:none;
}
.edge span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.7rem;font-weight:640;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.32em;color:var(--silk);white-space:nowrap;
}

/* ── the machined control (the primary action is fabricated hardware) ── */
.plate{
  --pl:var(--aqua);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.82rem 1.35rem .82rem 1.1rem;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pl) 92%,#fff) 0%,var(--pl) 42%,color-mix(in srgb,var(--pl) 88%,#000) 100%);
  color:var(--void);border-radius:4px;text-decoration:none;
  font-size:.8rem;font-weight:760;font-variation-settings:"wdth" 88;
  text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pl) 55%,#fff),
             inset 0 -1px 0 rgb(0 0 0/.42),
             0 2px 0 color-mix(in srgb,var(--pl) 42%,#000),
             0 10px 20px -10px rgb(0 0 0/.7);
  transition:transform .16s var(--snap),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.plate::after{           /* raking light sweep across machined metal */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.5) 48%,transparent 62%);
  transform:translateX(-115%);transition:transform .62s var(--ease);
}
.plate:hover::after,.plate:focus-visible::after{transform:translateX(115%)}
.plate:hover{transform:translateY(-1px);filter:saturate(1.06)}
.plate:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgb(0 0 0/.25),inset 0 2px 5px rgb(0 0 0/.3),0 0 0 color-mix(in srgb,var(--pl) 42%,#000)}
.plate__led{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--aqua-deep);box-shadow:inset 0 0 0 1px rgb(0 0 0/.4);
  transition:background .16s var(--ease),box-shadow .16s var(--ease);
}
.plate:hover .plate__led,.plate:focus-visible .plate__led{
  background:var(--apc);box-shadow:inset 0 0 0 1px rgb(0 0 0/.35),0 0 8px 1px color-mix(in srgb,var(--apc) 70%,transparent)}
.plate--sm{padding:.58rem 1rem .58rem .8rem;font-size:.7rem}
.plate--lg{padding:1.08rem 1.9rem 1.08rem 1.5rem;font-size:.92rem}
.plate--stock{--pl:var(--aqua);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--aqua) 55%,#fff),inset 0 -1px 0 rgb(0 0 0/.42),0 2px 0 var(--aqua-deep),0 8px 16px -10px rgb(0 0 0/.45)}
.plate--quiet{--pl:var(--stock-3);color:var(--stock-ink);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0/.2),0 2px 0 #a99f88,0 8px 16px -10px rgb(0 0 0/.5)}
.plate--quiet .plate__led{background:#a99f88}

.ghost{
  display:inline-flex;align-items:center;gap:.5rem;padding:.82rem .2rem;
  color:var(--ink-2);text-decoration:none;
  font-size:.8rem;font-weight:640;font-variation-settings:"wdth" 88;
  text-transform:uppercase;letter-spacing:.09em;
  border-bottom:1px solid var(--rule-lit);transition:color .2s var(--ease),border-color .2s var(--ease)}
.ghost:hover{color:var(--aqua);border-color:var(--aqua)}
.stock .ghost{color:var(--stock-ink-2);border-color:var(--stock-3)}
.stock .ghost:hover{color:var(--stock-ink);border-color:var(--stock-ink)}

.latch{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--panel-hi);color:var(--ink-2);border:1px solid var(--rule-lit);
  border-radius:3px;padding:.44rem .7rem;cursor:pointer;
  font-family:inherit;font-size:.7rem;font-weight:660;font-variation-settings:"wdth" 82;
  text-transform:uppercase;letter-spacing:.11em;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 1px 0 rgb(0 0 0/.5);
  transition:transform .14s var(--snap),color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.latch svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.latch:hover{color:var(--aqua);border-color:var(--aqua-deep);background:#1c2229}
.latch:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgb(0 0 0/.5)}
.latch--ghost{background:transparent}
.latch[disabled]{cursor:default;color:var(--silk);border-color:var(--rule)}
.latch.is-busy svg{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── rack rail (nav) ──────────────────────────────────────────────── */
.rail{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--frame) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.rail.seated{border-bottom-color:var(--rule);box-shadow:0 8px 18px -12px #000}
.rail__in{
  max-width:var(--max);margin-inline:auto;padding:.62rem var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand__mark{width:34px;height:26px;overflow:visible}
.mk-plate{fill:none;stroke:var(--rule-lit);stroke-width:1.6}
.mk-jumper{fill:none;stroke:var(--aqua);stroke-width:2.2;stroke-linecap:round}
.mk-port{fill:var(--panel);stroke:var(--silk);stroke-width:1.4}
.mk-core{fill:var(--aqua)}
.brand__word{font-size:1.02rem;font-weight:800;font-variation-settings:"wdth" 92;
  letter-spacing:-.012em;color:var(--ink);line-height:1}
.brand__sub{display:block;font-size:.7rem;font-weight:640;font-variation-settings:"wdth" 76;
  letter-spacing:.28em;color:var(--silk);margin-top:.2rem}
.nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);margin-inline-start:auto}
.nav a{
  position:relative;text-decoration:none;color:var(--ink-2);padding:.35rem 0;
  font-size:.74rem;font-weight:640;font-variation-settings:"wdth" 84;
  text-transform:uppercase;letter-spacing:.11em;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--aqua);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.rail__act{display:flex;align-items:center;gap:1.1rem;margin-inline-start:auto}
.nav + .rail__act{margin-inline-start:0}
.lnk{color:var(--ink-2);text-decoration:none;font-size:.74rem;font-weight:640;
  font-variation-settings:"wdth" 84;text-transform:uppercase;letter-spacing:.11em;transition:color .2s var(--ease)}
.lnk:hover{color:var(--aqua)}

.menu{display:none;align-items:center;gap:.55rem;background:var(--panel-hi);color:var(--ink-2);
  border:1px solid var(--rule-lit);border-radius:3px;padding:.52rem .78rem;cursor:pointer;
  font-family:inherit;font-size:.7rem;font-weight:660;font-variation-settings:"wdth" 82;
  text-transform:uppercase;letter-spacing:.11em;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 1px 0 rgb(0 0 0/.5);
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.menu__bars{display:grid;gap:3px;width:14px}
.menu__bars i{display:block;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform .22s var(--ease),opacity .18s var(--ease)}
.menu[aria-expanded="true"]{color:var(--aqua);border-color:var(--aqua-deep)}
.menu[aria-expanded="true"] .menu__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menu[aria-expanded="true"] .menu__bars i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
.nav__docs{display:none}
.plate__label--short{display:none}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.wall{position:absolute;inset:0;overflow:hidden}
.wall__svg{width:100%;height:100%}

.trace{position:relative;padding:clamp(1rem,2.4vw,1.9rem) 0 0;
  max-width:var(--max);margin-inline:auto;padding-inline:clamp(.5rem,2vw,1.5rem)}
.trace__frame{position:relative}
.trace__svg{width:100%;height:auto;overflow:visible}
.trace__svg--tall{display:none}
.tr-tx{fill:var(--ink-2);font-family:Archivo,sans-serif;font-size:11px;font-weight:660;
  font-variation-settings:"wdth" 78;letter-spacing:.2em;text-anchor:end}
.tr-tx--sub{fill:var(--silk);font-size:11px;font-weight:500;letter-spacing:.06em}
/* the arrival is read on the Z-side block, at instrument scale */
.tr-z{font-family:"Martian Mono",monospace;font-size:21px;font-weight:600;
  font-variant-numeric:tabular-nums}
.tr-z--transit{fill:var(--magenta)}
.tr-z--hop{fill:var(--aqua)}
/* single-mode yellow performs its role: the long-haul feed into the A-side */
.tr-line--haul{stroke:var(--yellow);opacity:.6;stroke-width:2.6}
.tr-tx--haul{fill:var(--yellow);opacity:.8;font-family:Archivo,sans-serif;font-size:13px;
  font-weight:640;font-variation-settings:"wdth" 78;letter-spacing:.14em;text-anchor:start}
.tr-block{fill:#171c23;stroke:var(--rule-lit);stroke-width:1.4}
.tr-blockport{fill:#0a0d11;stroke:var(--silk);stroke-width:1.4}
.tr-line{fill:none;stroke-width:2.6;stroke-linecap:round}
.tr-line--transit{stroke:var(--magenta);opacity:.34}
.tr-line--hop{stroke:var(--aqua);opacity:.3}
.tr-pulse{fill:none;stroke-width:3.4;stroke-linecap:round;opacity:0}
.tr-pulse--transit{stroke:var(--magenta);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--magenta) 65%,transparent))}
.tr-pulse--hop{stroke:var(--aqua-lit);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--aqua) 75%,transparent))}
.tr-mark{fill:var(--void);stroke:var(--magenta);stroke-width:2;cursor:pointer}
.tr-mark:hover,.tr-mark.lit{fill:var(--magenta)}
.tr-mlabel{font-family:"Martian Mono",monospace;font-size:11px;fill:var(--silk);text-anchor:middle}

.trace__cap{position:absolute;top:66%;font-size:.7rem;font-weight:660;
  font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-2);line-height:1.5}
.trace__cap span{display:block;color:var(--silk);letter-spacing:.1em;font-weight:500;text-transform:none;font-size:.7rem}
.trace__cap--a{left:6%}
.trace__cap--z{right:0;text-align:right}

.readout{
  position:relative;margin:clamp(.4rem,1.4vw,1rem) auto 0;max-width:600px;
  display:grid;gap:.4rem;background:color-mix(in srgb,var(--void) 82%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--rule);border-radius:5px;padding:.85rem 1rem;
  box-shadow:0 12px 24px -18px #000}
.readout__row{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:600;font-variation-settings:"wdth" 86;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.readout__sw{width:10px;height:3px;border-radius:2px}
.readout__row--transit .readout__sw{background:var(--magenta)}
.readout__row--hop .readout__sw{background:var(--aqua)}
.readout__val{font-size:.94rem;font-weight:600;font-variation-settings:"wdth" 85;letter-spacing:0;color:var(--ink)}
.readout__val i{font-style:normal;font-size:.7rem;color:var(--silk);margin-left:.18em}
.readout__hops{font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk);
  letter-spacing:0;min-width:5.4em;text-align:right}
.readout .latch{justify-self:start;margin-top:.35rem}

.hero__say{position:relative;padding:clamp(1.7rem,3.4vw,2.8rem) 0 clamp(2.4rem,5vw,4rem)}
.hero__saywrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:end}
.hero__h{
  font-size:clamp(2.4rem,1.1rem + 4.4vw,4.7rem);font-weight:820;
  font-variation-settings:"wdth" 110;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;margin:0;color:var(--ink);
  text-shadow:0 2px 30px rgb(8 9 11/.9)}
.hero__lede{max-width:52ch;color:var(--ink-2);font-size:clamp(1rem,.95rem + .25vw,1.14rem);line-height:1.6}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;margin-top:1.6rem}
.facts{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem);margin-top:1.5rem;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.facts dt{font-size:.7rem;font-weight:640;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.16em;color:var(--silk)}
.facts dd{margin:.3rem 0 0;font-size:1.32rem;font-weight:600;font-variation-settings:"wdth" 88;color:var(--ink)}
.facts dd i{font-style:normal;font-size:.7rem;color:var(--aqua);margin-left:.1em}

/* ── panel sections ───────────────────────────────────────────────── */
.panel{position:relative;background:var(--panel);border-top:1px solid var(--rule-lit);
  border-bottom:1px solid #05070a;padding:clamp(3.2rem,7vw,6rem) 0}
.panel .wrap{padding-left:calc(var(--gut) + clamp(28px,3.4vw,46px))}
.panel--fabric{background:var(--frame)}
.panel--spec{background:var(--panel)}
.panel--rec{background:var(--frame)}
.head{max-width:var(--max);margin-bottom:clamp(2rem,4vw,3.2rem);display:grid;gap:1rem}
.head--split{grid-template-columns:minmax(0,1fr);gap:1.2rem}
@media (min-width:900px){.head--split{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:end}}

/* ── CHART ────────────────────────────────────────────────────────── */
.chart{background:var(--chart-bg);border:1px solid var(--rule);border-radius:6px;
  padding:clamp(1rem,2.6vw,1.9rem);box-shadow:inset 0 1px 0 rgb(255 255 255/.04)}
.chart__cap{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.key{display:flex;flex-wrap:wrap;gap:1.4rem}
.key__i{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:620;
  font-variation-settings:"wdth" 84;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.key__i i{width:14px;height:3px;border-radius:2px;flex:none}
.key__i--transit i{background:var(--magenta-ser)}
.key__i--hop i{background:var(--aqua-ser)}

.chart__plot{position:relative}
.chart__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gr line{stroke:var(--rule);stroke-width:1}
.gr line.maj{stroke:#333b45}

.chart__rows{position:relative;display:grid;gap:clamp(1.6rem,3vw,2.4rem);padding:.4rem 0 1.2rem}
.row{position:relative}
.row__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;margin-bottom:1.6rem}
.row__name{font-size:.76rem;font-weight:680;font-variation-settings:"wdth" 86;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.row__sum{font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk)}
.row__track{position:relative;height:26px}
.row__bar{position:absolute;left:0;top:11px;height:4px;border-radius:0 4px 4px 0;
  transform-origin:left}
.row.in .row__bar{animation:grow 1.1s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.row--transit .row__bar{background:var(--magenta-ser)}
.row--hop .row__bar{background:var(--aqua-ser)}
.hop{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--chart-bg);border:2px solid;cursor:pointer;padding:0;
  transition:transform .16s var(--snap);box-shadow:0 0 0 2px var(--chart-bg)}
.row.in .hop{animation:fade .45s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.row--transit .hop{border-color:var(--magenta-ser)}
.row--hop .hop{border-color:var(--aqua-ser)}
.hop:hover,.hop:focus-visible{transform:scale(1.35)}
.row--transit .hop:hover,.row--transit .hop:focus-visible{background:var(--magenta-ser)}
.row--hop .hop:hover,.row--hop .hop:focus-visible{background:var(--aqua-ser)}
/* the direct label rides above the data end, where no marker can reach it */
.row__end{position:absolute;top:-20px;transform:translateX(-50%);
  font-family:"Martian Mono",monospace;font-size:.78rem;
  font-weight:600;color:var(--ink);white-space:nowrap}
.row.in .row__end{animation:fade .5s var(--ease) .45s both}
.row__end i{font-style:normal;font-size:.7rem;color:var(--silk);margin-left:.15em}

.chart__axis{position:relative;height:34px;border-top:1px solid var(--rule);margin-top:.4rem}
.tick{position:absolute;top:0;transform:translateX(-50%);padding-top:.5rem;
  font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk);white-space:nowrap}
.tick::before{content:"";position:absolute;top:0;left:50%;width:1px;height:5px;background:var(--rule-lit)}

.tip{position:absolute;z-index:6;pointer-events:none;opacity:0;transform:translate(-50%,-115%);
  background:#141920;border:1px solid var(--rule-lit);border-radius:4px;padding:.55rem .7rem;
  box-shadow:0 10px 20px -12px #000;min-width:170px;transition:opacity .14s var(--ease)}
.tip.on{opacity:1}
.tip b{display:block;font-size:.72rem;font-weight:700;font-variation-settings:"wdth" 88;color:var(--ink);margin-bottom:.25rem}
.tip span{display:flex;justify-content:space-between;gap:1.1rem;font-family:"Martian Mono",monospace;
  font-size:.7rem;color:var(--silk)}
.tip span em{font-style:normal;color:var(--ink)}

.tbl{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.7rem}
.tbl caption{text-align:left;color:var(--silk);font-family:Archivo,sans-serif;font-size:.72rem;padding-bottom:.7rem}
.tbl th,.tbl td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.tbl th{color:var(--silk);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.tbl td:last-child,.tbl td:nth-child(4){text-align:right;color:var(--ink)}

/* percentile strip — same axis, production traffic */
.pct{margin-top:clamp(2.4rem,5vw,3.6rem)}
.pct__scale{position:relative;margin-top:1.6rem;padding:1.5rem clamp(1rem,2.6vw,1.9rem) 1.1rem;
  background:var(--chart-bg);border:1px solid var(--rule);border-radius:6px}
/* the series name sits on its own line, so a mark near zero never lands on it */
.pctrow{position:relative;height:96px;margin-bottom:.5rem}
.pctrow__l{position:absolute;left:0;top:0;font-size:.7rem;font-weight:660;
  font-variation-settings:"wdth" 84;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.pctrow__t{position:absolute;left:0;right:0;top:60px;height:2px;background:var(--rule)}
.pmk{position:absolute;top:52px;width:2px;height:18px;margin-left:-1px;border-radius:1px}
.pmk b{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-family:"Martian Mono",monospace;
  font-size:.7rem;font-weight:500;white-space:nowrap;color:var(--ink)}
.pmk i{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font-style:normal;
  font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk)}
.pctrow--transit .pmk{background:var(--magenta-ser)}
.pctrow--hop .pmk{background:var(--aqua-ser)}
/* narrow screens cannot fit three labels in 60px of track — the values get a line */
.pctrow__v{position:absolute;left:0;top:78px;display:none;
  font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--ink-2);white-space:nowrap}

/* ── FABRIC ───────────────────────────────────────────────────────── */
/* single-mode strands running the overhead raceway along the top of the bay */
.raceway{position:absolute;top:0;left:0;right:0;height:7px;overflow:hidden}
.raceway span{position:absolute;left:0;right:0;height:1px;background:var(--yellow)}
.raceway span:nth-child(1){top:1px;opacity:.42}
.raceway span:nth-child(2){top:3px;opacity:.8}
.raceway span:nth-child(3){top:5px;opacity:.3}

/* five regions, five columns — a rack elevation leaves no half-populated bay */
.frame{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.reg{background:var(--panel);padding:1.1rem 1.15rem 1.3rem}
/* min-height keeps every bay's first node on the same line when a region name wraps */
.reg__h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  min-height:3.1em;padding-bottom:.7rem;margin-bottom:.6rem;border-bottom:1px solid var(--rule)}
.reg__n{font-size:.7rem;font-weight:700;font-variation-settings:"wdth" 82;
  text-transform:uppercase;letter-spacing:.15em;color:var(--yellow)}
.reg__c{font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk)}
.pop{display:grid;grid-template-columns:10px 2.7em 1fr auto;align-items:center;gap:.42rem;
  padding:.3rem 0;border-bottom:1px solid #20262d;font-size:.72rem}
.pop:last-child{border-bottom:0}
.pop__led{width:6px;height:6px;border-radius:50%;background:var(--apc);
  box-shadow:0 0 6px color-mix(in srgb,var(--apc) 60%,transparent);margin-left:3px}
.pop__code{font-family:"Martian Mono",monospace;font-size:.7rem;font-weight:600;color:var(--ink)}
.pop__city{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop__rtt{font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk)}
.pop__rtt b{color:var(--aqua);font-weight:500}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;margin-top:1px;background:var(--rule);border:1px solid var(--rule);border-top:0;border-radius:0 0 5px 5px;overflow:hidden}
.figures>div{background:var(--panel);padding:1.15rem 1.15rem 1.25rem}
.figures dt{font-size:.7rem;font-weight:640;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.16em;color:var(--silk)}
.figures dd{margin:.4rem 0 0;font-size:1.5rem;font-weight:600;font-variation-settings:"wdth" 88;color:var(--ink)}
.figures dd i{font-style:normal;font-size:.7rem;color:var(--yellow);margin-left:.12em}

/* ── LABEL STOCK (light) ──────────────────────────────────────────── */
.stock{position:relative;background:var(--stock);color:var(--stock-ink);
  padding:clamp(3.2rem,7vw,6rem) 0;
  background-image:
    repeating-linear-gradient(90deg,rgb(22 24 27/.028) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#f2eee4 0%,var(--stock) 22%,var(--stock-2) 100%);
  border-top:2px solid #b9b09a;border-bottom:2px solid #b9b09a}
.stock::before,.stock::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:radial-gradient(circle at 6px 50%,var(--void) 3.4px,transparent 3.6px);
  background-size:16px 100%;opacity:.5}
.stock::before{top:-1px}
.stock::after{bottom:-1px}
.head--ink{margin-bottom:clamp(2rem,4vw,3rem)}

.order{position:relative;background:#f4f1e8;border:1px solid var(--stock-3);border-radius:3px;
  padding:clamp(1.4rem,3.4vw,2.6rem);box-shadow:0 12px 26px -20px rgb(0 0 0/.6)}
.order__head{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-end;
  padding-bottom:1.2rem;border-bottom:2px solid var(--stock-ink)}
.order__meta{display:flex;flex-wrap:wrap;gap:1.4rem}
.order__meta dt{font-size:.7rem;font-weight:660;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.16em;color:var(--stock-ink-2)}
.order__meta dd{margin:.22rem 0 0;font-size:.76rem;font-weight:600;color:var(--stock-ink)}

.steps{counter-reset:s;margin-top:2rem;display:grid;gap:2.4rem}
.step{counter-increment:s;position:relative;padding-left:clamp(2.4rem,5vw,3.4rem);min-width:0}
/* prose and its listing sit side by side once the sheet is wide enough for both */
@media (min-width:900px){
  /* row 2 takes the slack, so a tall listing never pushes its own prose down */
  .step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(1.6rem,3vw,2.8rem);align-items:start}
  .step__h{grid-column:1;grid-row:1}
  .step__p{grid-column:1;grid-row:2}
  .step .code{grid-column:2;grid-row:1/span 2;margin-top:.2rem}
}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:"Martian Mono",monospace;font-size:.8rem;font-weight:600;color:var(--stock-ink);
  background:var(--stock-2);border:1px solid var(--stock-3);border-radius:3px;padding:.14em .42em}
.step__h{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);font-weight:740;
  font-variation-settings:"wdth" 100;letter-spacing:-.012em;line-height:1.2;color:var(--stock-ink)}
.step__p{margin-top:.5rem;max-width:62ch;color:var(--stock-ink-2);font-size:.96rem;line-height:1.6}
.step__p code{font-family:"Martian Mono",monospace;font-size:.84em;background:var(--stock-2);
  padding:.08em .32em;border-radius:2px}

.code{margin-top:1.1rem;background:var(--void);color:var(--ink-2);border-radius:4px;
  padding:1rem 1.15rem;overflow-x:auto;min-width:0;max-width:100%;font-size:.76rem;line-height:1.75;
  box-shadow:inset 0 0 0 1px #1e242c,0 8px 20px -14px rgb(0 0 0/.8);
  scrollbar-color:var(--rule-lit) var(--void)}
.code code{font:inherit}
.code::-webkit-scrollbar{height:9px}
.code::-webkit-scrollbar-track{background:#0e1218}
.code::-webkit-scrollbar-thumb{background:var(--rule-lit);border:0;border-radius:0}
.c-c{color:#5d6875}.c-k{color:var(--aqua)}.c-s{color:var(--yellow)}
.c-n{color:var(--ink)}.c-t{color:#7f8fa0}.c-f{color:var(--apc)}

/* stamped on the sheet once the order is complete — in flow, so nothing can bury it */
.stamp{width:clamp(96px,13vw,150px);margin:.4rem clamp(.5rem,3vw,3rem) 0 auto;
  opacity:.72;transform:rotate(-13deg)}
.stamp.on{animation:stampin .5s var(--snap) both}
@keyframes stampin{from{opacity:0;transform:rotate(-19deg) scale(1.7)}
                   to{opacity:.72;transform:rotate(-13deg) scale(1)}}
.st-r{fill:none;stroke:var(--apc);stroke-width:4}
.st-r--thin{stroke-width:1.6}
.st-t{fill:var(--apc);text-anchor:middle;font-family:Archivo,sans-serif;font-weight:820;
  font-variation-settings:"wdth" 100;letter-spacing:.02em}
.st-t--big{font-size:34px}
.st-t--sm{font-size:12px;font-weight:600;letter-spacing:.1em}

/* ── SPEC PORTS ─────────────────────────────────────────────────────
   One continuous panel of legend rows. Twelve identical bordered cards is
   the refused scaffold; a patch panel is a surface with hairline rows. */
.ports{display:grid;gap:0 clamp(1.6rem,3.4vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  background:var(--chart-bg);border:1px solid var(--rule);border-radius:5px;
  padding:.1rem clamp(1rem,2.4vw,1.7rem)}
.port{display:grid;grid-template-columns:26px 2.3em minmax(0,1fr) 7px;align-items:start;
  gap:.8rem;padding:.9rem 0;border-bottom:1px solid #1b212a}
.port:last-child{border-bottom:0}
.port__adapter{width:26px;height:12px;margin-top:.2rem;border-radius:2px;background:#12161c;
  border:1px solid var(--rule-lit);display:flex;align-items:center;justify-content:space-evenly;flex:none}
.port__adapter i{width:4px;height:4px;border-radius:50%;background:var(--aqua);opacity:.85}
.port__no{font-family:"Martian Mono",monospace;font-size:.7rem;color:var(--silk);margin-top:.22rem}
.port__led{width:7px;height:7px;border-radius:50%;background:var(--apc);margin-top:.42rem;
  box-shadow:0 0 6px color-mix(in srgb,var(--apc) 55%,transparent)}
.port__n{font-size:.9rem;font-weight:700;font-variation-settings:"wdth" 94;
  letter-spacing:-.006em;color:var(--ink);line-height:1.25}
.port__d{margin-top:.28rem;font-size:.78rem;line-height:1.5;color:var(--ink-2);max-width:52ch}
@media (min-width:860px){
  /* the last row of a two-column panel keeps its rule off */
  .port:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* ── CIRCUIT RECORD LABELS ────────────────────────────────────────── */
.labels{display:grid;gap:clamp(.9rem,2vw,1.3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr))}
.lbl{position:relative;background:linear-gradient(180deg,#f4f1e8,var(--stock-2));
  color:var(--stock-ink);border-radius:3px;padding:1rem 1.1rem 1.1rem;
  box-shadow:0 8px 18px -14px #000,inset 0 1px 0 #fff;
  font-family:Archivo,sans-serif}
.lbl::after{content:"";position:absolute;inset:5px;border:1px dashed rgb(22 24 27/.22);border-radius:2px;pointer-events:none}
.lbl__id{font-family:"Martian Mono",monospace;font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--stock-ink-2)}
.lbl__n{margin-top:.35rem;font-size:1.02rem;font-weight:760;font-variation-settings:"wdth" 96;
  letter-spacing:-.012em;line-height:1.15;color:var(--stock-ink)}
.lbl__w{margin-top:.2rem;font-size:.74rem;color:var(--stock-ink-2)}
.lbl__m{display:flex;gap:1.1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgb(22 24 27/.18)}
.lbl__m div{flex:1}
.lbl__m dt{font-size:.7rem;font-weight:660;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.08em;color:var(--stock-ink-2)}
.lbl__m dd{margin:.2rem 0 0;font-family:"Martian Mono",monospace;font-size:.86rem;font-weight:600;color:var(--stock-ink)}
.lbl__m dd s{color:var(--stock-ink-2);font-weight:400;font-size:.72rem;margin-right:.3em}
.lbl__syn{position:absolute;right:.7rem;top:.7rem;font-size:.7rem;font-weight:700;
  font-variation-settings:"wdth" 76;text-transform:uppercase;letter-spacing:.16em;
  color:#8a7f66;border:1px solid #c0b69e;border-radius:2px;padding:.12em .34em}

/* ── RATE SCHEDULE ────────────────────────────────────────────────
   A rate schedule is a tariff sheet. Three floating cards with a highlighted
   middle plan is the category default, not this world. */
.sched{background:#f4f1e8;border:1px solid var(--stock-3);border-radius:3px;
  padding:clamp(1.2rem,3vw,2.2rem);box-shadow:0 10px 22px -18px rgb(0 0 0/.55)}
.sched__t{width:100%;border-collapse:collapse;text-align:left}
.sched__t thead th{font-size:.7rem;font-weight:680;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.14em;color:var(--stock-ink-2);
  padding:0 1.1rem .7rem 0;border-bottom:2px solid var(--stock-ink);white-space:nowrap}
.sched__t tbody th,.sched__t tbody td{padding:1.15rem 1.1rem;vertical-align:top;
  border-bottom:1px solid rgb(22 24 27/.14)}
.sched__t tbody th{padding-left:0;font-weight:400;width:23%}
/* a rate sheet does not wrap its rates: the money columns hold, TERMS absorbs the slack */
@media (min-width:981px){
  .sched__t thead th:nth-child(2),.sched__t tbody td:nth-child(2){width:10%}
  .sched__t thead th:nth-child(3),.sched__t tbody td:nth-child(3){width:11%;white-space:nowrap}
  .sched__t thead th:nth-child(4),.sched__t tbody td:nth-child(4){width:12%;white-space:nowrap}
}
.sched__t tbody th b{display:block;font-size:1.2rem;font-weight:780;
  font-variation-settings:"wdth" 100;letter-spacing:-.016em;line-height:1.1;color:var(--stock-ink)}
.sched__t tbody th span{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.45;
  color:var(--stock-ink-2)}
.sched__t td{font-size:.8rem;line-height:1.5;color:var(--stock-ink-2)}
.sched__t td em{font-style:normal;font-family:"Martian Mono",monospace;font-size:1.45rem;
  font-weight:600;color:var(--stock-ink);line-height:1}
.sched__lead{background:rgb(15 199 176/.08)}
.sched__lead th b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:.5em;
  border-radius:50%;background:var(--aqua);vertical-align:.12em}
.sched__act{padding-right:0!important;white-space:nowrap}
.sched .synth{margin-top:1.2rem}

@media (max-width:980px){
  .sched__t,.sched__t tbody,.sched__t tr,.sched__t th,.sched__t td{display:block;width:auto}
  .sched__t thead{display:none}
  .sched__t tbody tr{padding:1.3rem 0;border-bottom:1px solid rgb(22 24 27/.16)}
  .sched__t tbody tr:last-child{border-bottom:0}
  .sched__lead{margin-inline:calc(-1 * clamp(.6rem,2vw,1.2rem));
    padding-inline:clamp(.6rem,2vw,1.2rem);border-radius:3px}
  .sched__t tbody th{padding:0 0 .8rem;border:0;width:auto}
  .sched__t tbody td{padding:.34rem 0;border:0;display:grid;
    grid-template-columns:8.4em minmax(0,1fr);gap:.8rem;align-items:baseline}
  .sched__t tbody td::before{content:attr(data-l);font-family:Archivo,sans-serif;font-size:.7rem;
    font-weight:660;font-variation-settings:"wdth" 78;text-transform:uppercase;
    letter-spacing:.12em;color:var(--stock-ink-2)}
  /* must out-specify `.sched__t tbody td`, or the action lands in the label column */
  .sched__t tbody td.sched__act{display:block;padding-top:1rem;white-space:normal}
  .sched__t tbody td.sched__act::before{display:none}
}

/* ── CLOSE ────────────────────────────────────────────────────────── */
.close{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7.5rem) 0;border-top:1px solid var(--rule)}
.close__fiber{position:absolute;inset:0;width:100%;height:100%}
.close__in{position:relative;text-align:center;display:grid;justify-items:center;gap:1.1rem}
.close__h{font-size:clamp(2.2rem,1.2rem + 4vw,4.4rem);font-weight:820;
  font-variation-settings:"wdth" 110;letter-spacing:-.028em;line-height:.94}
.close__dek{max-width:46ch;text-align:center}
.close__acts{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:center;margin-top:1rem}

/* ── FOOT ─────────────────────────────────────────────────────────── */
.foot{background:var(--frame);border-top:1px solid var(--rule);padding:clamp(2.6rem,5vw,4rem) 0 1.6rem}
.foot__in{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:840px){.foot__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr)}}
.foot__note{margin-top:1rem;max-width:44ch;color:var(--silk);font-size:.76rem;line-height:1.55}
.foot__cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.foot__cols h2{font-size:.7rem;font-weight:680;font-variation-settings:"wdth" 78;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink);margin-bottom:.9rem}
.foot__cols ul{display:grid;gap:.55rem}
.foot__cols a{color:var(--ink-2);text-decoration:none;font-size:.82rem;transition:color .2s var(--ease)}
.foot__cols a:hover{color:var(--aqua)}
.foot__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid var(--rule);
  color:var(--silk);font-size:.7rem}
.foot__ln{display:inline-flex;align-items:center;gap:.5rem}
.foot__led{width:6px;height:6px;border-radius:50%;background:var(--apc);
  box-shadow:0 0 7px color-mix(in srgb,var(--apc) 60%,transparent)}

/* tape feed — printed matter arrives out of the machine.
   Every reveal on this page animates FROM an already-visible default: if the
   observer never fires, the content is simply there. */
.js .code[data-feed].fed{animation:feed .85s var(--ease) both}
@keyframes feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* the rail reflects the panel you are reading */
.nav a.here{color:var(--ink)}
.nav a.here::after{transform:scaleX(1)}

/* ── reveal ───────────────────────────────────────────────────────── */
.js .rv.in{animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .rv-d1.in{animation-delay:.07s}.js .rv-d2.in{animation-delay:.14s}.js .rv-d3.in{animation-delay:.21s}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1080px){
  .menu{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;padding:.2rem var(--gut) 1rem;
    background:var(--frame);border-bottom:1px solid var(--rule);
    box-shadow:0 16px 26px -22px #000}
  .nav.open{display:flex;animation:rise .26s var(--ease) both}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:.84rem;
    letter-spacing:.08em}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .nav a:hover{color:var(--aqua)}
  .nav__docs{display:block}
  .nav + .rail__act{margin-inline-start:auto}
}
@media (max-width:820px){
  .pmk b,.pmk i{display:none}
  .pctrow__v{display:block}
  .tick--minor{display:none}
}
@media (max-width:900px){
  /* the fade is the only signal that a listing continues past the edge */
  .code{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
        mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}
@media (max-width:760px){
  .trace__svg--wide{display:none}
  .trace__svg--tall{display:block;max-width:360px;margin-inline:auto}
}
@media (max-width:860px){
  .hero__saywrap{grid-template-columns:minmax(0,1fr);align-items:start}
  .trace__cap{display:none}
  .readout__row{grid-template-columns:10px 1fr auto;row-gap:.2rem}
  .readout__hops{grid-column:2/-1;text-align:left;min-width:0}
  .panel .wrap{padding-left:calc(var(--gut) + clamp(28px,3.4vw,46px))}
}
@media (max-width:640px){
  /* the rail carries brand, one action and the menu — the label shortens, nothing drops */
  .plate__label--long{display:none}
  .plate__label--short{display:inline}
  .menu__t{display:none}
  .menu{padding:.52rem .6rem}
  .rail__in{gap:.7rem}
  .rail__act{gap:.7rem}
}
@media (max-width:620px){
  .rail__act .lnk{display:none}
  .brand__word{font-size:.94rem}
  .facts{gap:1.1rem 1.6rem}
  .order__head{gap:1rem}
  .stamp{margin:1.2rem auto 0;transform:rotate(-6deg)}
  .stamp.on{animation-name:stampin-s}
  @keyframes stampin-s{from{opacity:0;transform:rotate(-12deg) scale(1.6)}
                       to{opacity:.72;transform:rotate(-6deg) scale(1)}}
  .edge span{letter-spacing:.22em;font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .code[data-feed]{clip-path:none}
  .row__bar{transform:scaleX(1)!important}
  .hop,.row__end{opacity:1!important}
  .tr-pulse{opacity:0!important}
  .plate::after{display:none}
  .stamp{opacity:.72;transform:rotate(-13deg) scale(1)}
}