@font-face { font-family:"SI Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/sans-400-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/sans-500-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/sans-700-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Sans"; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/sans-800-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/mono-400-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/mono-500-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"SI Mono"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/mono-700-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }
/* si-infra type and colour tokens — one file, shared by the landing page and every page the
   site builder writes. The system is docs/TYPOGRAPHY.md: legibility first, every glyph
   disambiguated (Atkinson Hyperlegible Next and Mono, designed by the Braille Institute so that
   I, l and 1, O and 0, b, d, p and q never read as one another), numbers set as data (tabular,
   lining, slashed zero in mono), one modular scale, one measure.
   __FONT_*__ placeholders are replaced by the builders: a /fonts/ URL on pages, a data: URI in
   the one-file landing page. */
@font-face { font-family:"SI Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/sans-400.woff2) format("woff2"); }
@font-face { font-family:"SI Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/sans-500.woff2) format("woff2"); }
@font-face { font-family:"SI Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/sans-700.woff2) format("woff2"); }
@font-face { font-family:"SI Sans"; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/sans-800.woff2) format("woff2"); }
@font-face { font-family:"SI Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/mono-400.woff2) format("woff2"); }
@font-face { font-family:"SI Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/mono-500.woff2) format("woff2"); }
@font-face { font-family:"SI Mono"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/mono-700.woff2) format("woff2"); }

:root {
  /* faces */
  --sans:"SI Sans","Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"SI Mono","Atkinson Hyperlegible Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* the scale: a major third (1.25) on an 18px body, rounded to whole pixels */
  --t-micro:12px;   /* MICRO-LABEL: mono 700, uppercase, .12em */
  --t-data:14px;    /* DATA: mono 500, .02em, tabular */
  --t-small:15px;
  --t-body:18px;    /* body copy: 400, line-height 1.6, 64ch measure */
  --t-lead:22px;
  --t-h3:28px;
  --t-h2:35px;
  --t-h1:55px;
  --t-display:86px; /* the headline question on the landing page */
  --t-score:clamp(96px,17vw,220px); /* the scoreboard figure; HTML mirror of the LED board */
  --lh-body:1.6; --lh-tight:1.08; --lh-display:.98;
  --track-display:-.028em; --track-head:-.018em; --track-micro:.12em; --track-data:.02em;
  --measure:33em; /* about 75 characters of si-infra prose at any size (docs/TYPOGRAPHY.md) */

  /* spacing: one scale, never percentages */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --col-w:min(1180px, calc(100vw - 2 * var(--gutter)));
  --gutter:clamp(16px,4vw,40px);

  /* colour: the night stadium. Ink on near-black; purple is energy, never paint. */
  --bg:#06070a; --bg-2:#0c0d12; --panel:#101119; --rule:rgba(244,242,250,.12); --rule-2:rgba(244,242,250,.22);
  --ink:#F4F2FA; --ink-2:#B9B4C9; --ink-3:#8E89A0;
  --purple:#7622F7; --purple-2:#A77BFF;
  --up:#7EE2B8; --down:#FF7A59; /* down stays distinct from up under deuteranopia (ΔE 40) */ --flat:#C9C4D8;
  --led:#FFF1CC; --led-off:#1A1922;
  --confirmed:#7EE2B8; --reported:#F4D27A; --inferred:#B9B4C9;
  --ease:cubic-bezier(.23,1,.32,1);
  --rule-3:rgba(244,242,250,.40); /* control boundaries: 3.48:1 */
  font-synthesis:none;
  color-scheme:dark;
}

/* numbers are data everywhere: same width, lining, never proportional */
.num, time, td, .data { font-variant-numeric:tabular-nums lining-nums; }
.micro { font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-micro); text-transform:uppercase; }
.data { font-family:var(--mono); font-size:var(--t-data); font-weight:500; letter-spacing:var(--track-data); }
/* confidence reads at a glance: a glyph and a colour, the word beside it for screen readers */
.conf { display:inline-flex; align-items:center; gap:6px; }
.conf::before { content:""; width:.64em; height:.64em; border-radius:50%; border:.11em solid currentColor; flex:none; }
.conf[data-c="confirmed"] { color:var(--confirmed); } .conf[data-c="confirmed"]::before { background:currentColor; }
.conf[data-c="reported"] { color:var(--reported); } .conf[data-c="reported"]::before { background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.conf[data-c="inferred"] { color:var(--inferred); }
.dir[data-dir="up"] { color:var(--up); } .dir[data-dir="down"] { color:var(--down); } .dir[data-dir="flat"] { color:var(--flat); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* si-infra pages. Tokens live in tokens.css (inlined above this file by the builder). Type
   carries the hierarchy; rules and panels come after; purple is energy, never paint. */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-kerning:normal; }
a { color:inherit; text-decoration-color:var(--purple-2); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover { text-decoration-color:var(--ink); }
:focus-visible { outline:2px solid var(--purple-2); outline-offset:3px; border-radius:4px; }
img { max-width:100%; }
.wrap { width:var(--col-w); margin-inline:auto; }
.measure { max-width:var(--measure); }

/* the masthead: the title centred at the top of every page, the reading beside it */
.mast { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); border-bottom:1px solid var(--rule); }
.mast-in { width:var(--col-w); margin-inline:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-4); padding:var(--sp-3) 0; }
.mast-title { grid-column:2; text-align:center; font-weight:800; font-size:17px; letter-spacing:-.005em; text-decoration:none; white-space:nowrap; }
.mast-title span { color:var(--purple-2); }
.mast-read { grid-column:3; justify-self:end; font-family:var(--mono); font-size:var(--t-data); font-weight:700; text-decoration:none; display:inline-flex; gap:8px; align-items:baseline; padding:6px 10px; border:1px solid var(--rule-2); border-radius:8px; }
.mast-read small { font-size:var(--t-micro); font-weight:500; color:var(--ink-2); letter-spacing:var(--track-micro); text-transform:uppercase; }
.nav { width:var(--col-w); margin-inline:auto; display:flex; justify-content:center; gap:var(--sp-1); padding:0 0 var(--sp-2); overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar { display:none; }
.nav a { font-size:var(--t-small); font-weight:500; color:var(--ink-2); text-decoration:none; padding:10px 12px; border-radius:8px; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.nav a:hover { color:var(--ink); background:var(--panel); }
.nav a[aria-current="page"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--purple-2); border-radius:0; }
.nav .nav-read { display:none; }
@media (max-width:720px) {
  .mast-in { grid-template-columns:1fr; padding:var(--sp-3) 0 var(--sp-1); }
  .mast-title { grid-column:1; font-size:clamp(15px,4.4vw,18px); }
  .mast-read { display:none; }
  .nav { justify-content:flex-start; }
  .nav .nav-read { display:inline-flex; font-family:var(--mono); font-weight:700; color:var(--led); gap:6px; }
}

main { padding:var(--sp-8) 0 var(--sp-9); }
.eyebrow { display:block; margin:0 0 var(--sp-4); color:var(--purple-2); }
h1, h2, h3 { text-wrap:balance; font-weight:800; }
.page-h1 { overflow-wrap:break-word; hyphens:auto; font-size:clamp(32px,5.2vw,var(--t-h1)); line-height:var(--lh-tight); letter-spacing:var(--track-display); margin:0 0 var(--sp-5); max-width:22ch; }
.lead { font-size:clamp(19px,2vw,var(--t-lead)); line-height:1.5; color:var(--ink-2); max-width:var(--measure); margin:0 0 var(--sp-7); text-wrap:pretty; }
.section-h { font-size:clamp(26px,3vw,var(--t-h2)); line-height:1.15; letter-spacing:var(--track-head); margin:var(--sp-8) 0 var(--sp-4); }

/* ---------- the article ---------- */
.art-head { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-7); }
.art-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); color:var(--ink-2); }
.art-title { overflow-wrap:break-word; hyphens:auto; font-size:clamp(32px,5.4vw,var(--t-h1)); line-height:var(--lh-tight); letter-spacing:var(--track-display); margin:0; max-width:20ch; }
.art-dek { font-size:clamp(19px,2vw,var(--t-lead)); line-height:1.5; color:var(--ink-2); margin:0; max-width:var(--measure); text-wrap:pretty; }
.art-by { color:var(--ink-2); font-size:var(--t-small); }
.move-chip { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--rule-2); border-radius:12px; background:var(--panel); width:fit-content; max-width:100%; }
.move-chip b { font-family:var(--mono); font-size:22px; font-weight:700; }
.epi { margin:0 0 var(--sp-7); padding:var(--sp-5) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); align-items:center; max-width:calc(var(--measure) + 12ch); }
.epi-stat { font-family:var(--mono); font-weight:700; font-size:clamp(30px,5vw,56px); line-height:1.05; color:var(--led); letter-spacing:-.02em; max-width:12ch; overflow-wrap:break-word; text-wrap:balance; }
.epi > * { min-width:0; }
.epi p { margin:0; font-size:var(--t-lead); line-height:1.45; text-wrap:pretty; }
@media (max-width:640px) { .epi { grid-template-columns:1fr; gap:var(--sp-3); } }
.prose { max-width:var(--measure); }
.prose p { margin:0 0 var(--sp-5); text-wrap:pretty; hanging-punctuation:first; }
.prose h2 { font-size:clamp(24px,2.6vw,var(--t-h3)); line-height:1.2; letter-spacing:var(--track-head); margin:var(--sp-8) 0 var(--sp-4); }
.prose ul, .prose ol { padding-left:1.2em; margin:0 0 var(--sp-5); }
.prose li { margin:0 0 var(--sp-3); padding-left:.2em; }
.prose li::marker { color:var(--purple-2); font-family:var(--mono); }
.prose blockquote { margin:0 0 var(--sp-5); padding:0 0 0 var(--sp-4); border-left:2px solid var(--purple-2); color:var(--ink); font-size:var(--t-lead); line-height:1.45; }
.prose strong { font-weight:700; }
.prose em { font-style:normal; font-weight:500; color:var(--ink); }
sup.cite { font-family:var(--mono); font-size:.62em; font-weight:700; line-height:0; margin-left:1px; }
sup.cite a { text-decoration:none; color:var(--purple-2); padding:0 1px; }
sup.cite a:hover { color:var(--ink); }
.sources { max-width:var(--measure); margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--rule); }
.sources ol { padding-left:0; list-style:none; margin:0; counter-reset:s; }
.sources li { display:grid; grid-template-columns:3ch 1fr; gap:var(--sp-3); margin:0 0 var(--sp-4); font-size:var(--t-small); line-height:1.5; color:var(--ink-2); }
.sources li > span:first-child { font-family:var(--mono); font-weight:700; color:var(--ink); }
.sources li:target { background:var(--panel); outline:1px solid var(--purple-2); border-radius:6px; }
.sources a { color:var(--ink); }

/* ---------- figures ---------- */
figure.g { margin:var(--sp-7) 0; max-width:calc(var(--measure) + 16ch); border:1px solid var(--rule); border-radius:14px; background:linear-gradient(180deg,var(--panel),var(--bg-2)); overflow:hidden; }
.g-top { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5) 0; }
.g-top h3 { margin:0; font-size:19px; line-height:1.3; letter-spacing:-.005em; font-weight:700; }
.g-top .micro { color:var(--ink-3); white-space:nowrap; }
.g-stage { position:relative; width:100%; aspect-ratio:16/8; touch-action:pan-y pinch-zoom; }
figure.g[data-type="move"] .g-stage { aspect-ratio:16/5.4; }
figure.g[data-type="timeline"] .g-stage { aspect-ratio:16/6.4; }
figure.g[data-type="sides"] .g-stage { aspect-ratio:16/9.5; }
figure.g[data-type="record"] .g-stage { aspect-ratio:16/calc(2.4 + var(--rows,4) * 1.25); }
figure.g[data-type="network"] .g-stage { aspect-ratio:16/9.4; }
figure.g[data-type="stat"] .g-stage { aspect-ratio:16/7; }
figure.g[data-type="rockets"] .g-stage, figure.g[data-type="stack"] .g-stage { aspect-ratio:16/8.6; }
figure.g[data-type="ascent"] .g-stage { aspect-ratio:16/8.2; }
@media (max-width:640px) {
  .g-stage { aspect-ratio:4/4.2; }
  figure.g[data-type="move"] .g-stage { aspect-ratio:4/3.3; }
  figure.g[data-type="stat"] .g-stage { aspect-ratio:4/3.2; }
  figure.g[data-type="timeline"] .g-stage { aspect-ratio:4/5.4; }
  figure.g[data-type="record"] .g-stage { aspect-ratio:4/calc(1.6 + var(--rows2,6) * 0.62); }
  figure.g[data-type="sides"] .g-stage { aspect-ratio:4/5; }
  figure.g[data-type="network"] .g-stage { aspect-ratio:4/4.6; }
  figure.g[data-type="rockets"] .g-stage { aspect-ratio:4/4.8; }
  figure.g[data-type="stack"] .g-stage { aspect-ratio:4/5.4; }
  figure.g[data-type="ascent"] .g-stage { aspect-ratio:4/4.9; }
  .g-top { padding-inline:var(--sp-4); }
}
.g-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.g-labels { position:absolute; inset:0; pointer-events:none; font-size:13.5px; line-height:1.3; }
.g-l { position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transition:opacity .45s var(--ease); --x:0px; --y:0px; }
.g-l.in { opacity:1; }
.g-l.a-c { transform:translate(var(--x),var(--y)) translate(-50%,-50%); text-align:center; }
.g-l.a-b { transform:translate(var(--x),var(--y)) translate(-50%,-100%); text-align:center; }
.g-l.a-t { transform:translate(var(--x),var(--y)) translate(-50%,0); text-align:center; }
.g-l.a-l { transform:translate(var(--x),var(--y)) translate(0,-50%); text-align:left; }
.g-l.a-r { transform:translate(var(--x),var(--y)) translate(-100%,-50%); text-align:right; }
.g-l.a-bl { transform:translate(var(--x),var(--y)) translate(0,-100%); text-align:left; }
.g-l.a-br { transform:translate(var(--x),var(--y)) translate(-100%,-100%); text-align:right; }
.g-l.a-tl { transform:translate(var(--x),var(--y)); text-align:left; }
.g-l.a-tr { transform:translate(var(--x),var(--y)) translate(-100%,0); text-align:left; }
.g-l b { font-weight:700; }
.g-k { color:var(--ink-2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:var(--track-micro); text-transform:uppercase; }
.g-l.g-micro, .g-l .g-micro { font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.g-l.g-head { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.g-l.g-tick { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.g-l.g-val { font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; }
.g-l.g-cat { font-size:13px; color:var(--ink); }
.g-l.g-cat small { display:block; color:var(--ink-3); font-size:12px; }
.g-l.g-ev { font-size:13.5px; line-height:1.35; }
.g-l.g-ev time { display:block; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--purple-2); text-transform:uppercase; }
.g-l.g-card { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--rule-2); border-radius:10px; background:rgba(12,13,18,.86); text-align:left; white-space:normal; line-height:1.35; font-size:13.5px; }
.g-l.g-card b { font-size:15px; }
.g-l.g-card span:last-child { color:var(--ink-2); }
.g-up { color:var(--up) !important; } .g-down { color:var(--down) !important; } .g-dim { color:var(--ink-2); }
.g-l.g-tile { font-size:13.5px; line-height:1.3; white-space:normal; padding:0 10px; }
.g-l.g-node { font-size:13px; font-weight:700; background:rgba(6,7,10,.72); padding:1px 6px; border-radius:6px; }
.g-l.g-link { font-family:var(--mono); font-size:11px; color:var(--ink-3); background:rgba(6,7,10,.8); padding:0 4px; border-radius:4px; }
.g-l.g-stk { text-align:center; line-height:1.1; }
.g-l.g-stk small { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.g-l.g-ptl { font-size:12.5px; line-height:1.3; background:rgba(6,7,10,.74); padding:2px 6px; border-radius:6px; }
.g-l.g-ptl b { font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums; }
.g-l.g-ptl small { display:block; color:var(--ink-2); font-size:11.5px; }
.g-l.g-statl { display:grid; gap:4px; white-space:normal; font-size:16px; line-height:1.35; }
.g-cap { margin:0; padding:var(--sp-3) var(--sp-5) var(--sp-4); font-size:var(--t-small); line-height:1.5; color:var(--ink-2); border-top:1px solid var(--rule); display:grid; gap:var(--sp-2); }
@media (max-width:640px) { .g-cap { padding-inline:var(--sp-4); } }
.g-cap .src { font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; }
.g-data { border-top:1px solid var(--rule); }
.g-data summary { cursor:pointer; padding:var(--sp-3) var(--sp-5); font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-2); min-height:44px; display:flex; align-items:center; }
.g-data > div { padding:0 var(--sp-5) var(--sp-4); overflow-x:auto; }
figure.g.g-fallback .g-stage { display:none; }
figure.g.g-fallback .g-data summary { display:none; }
table.t { width:100%; border-collapse:collapse; font-size:var(--t-small); }
table.t th { text-align:left; font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-2); padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--rule-2); white-space:nowrap; }
table.t td { padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom:1px solid var(--rule); vertical-align:top; }
table.t td.r, table.t th.r { text-align:right; }

/* ---------- lists: the journal, the ledger, the stack, the papers ---------- */
.feed { list-style:none; margin:0; padding:0; display:grid; }
.feed > li { display:grid; grid-template-columns:11ch 1fr auto; gap:var(--sp-2) var(--sp-5); padding:var(--sp-5) 0; border-top:1px solid var(--rule); align-items:start; }
.feed > li:last-child { border-bottom:1px solid var(--rule); }
.feed time { font-family:var(--mono); font-size:var(--t-data); color:var(--ink-2); padding-top:4px; }
.feed h2, .feed h3 { margin:0 0 var(--sp-2); font-size:clamp(20px,2.2vw,24px); line-height:1.25; letter-spacing:-.01em; font-weight:700; }
.feed h2 a, .feed h3 a { text-decoration:none; }
.feed h2 a:hover, .feed h3 a:hover { text-decoration:underline; text-decoration-color:var(--purple-2); }
.feed p { margin:0; color:var(--ink-2); font-size:var(--t-small); line-height:1.5; max-width:70ch; }
.feed .mv { font-family:var(--mono); font-size:var(--t-data); font-weight:700; text-align:right; white-space:nowrap; padding-top:4px; }
.feed .mv small { display:block; font-weight:500; color:var(--ink-3); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:720px) { .feed > li { grid-template-columns:1fr auto; } .feed time { grid-column:1 / -1; padding:0; } }
.lead-story { display:grid; gap:var(--sp-3); padding:var(--sp-6) 0 var(--sp-7); }
.lead-story h2 { margin:0; font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:var(--track-head); font-weight:800; max-width:24ch; }
.lead-story h2 a { text-decoration:none; }
.lead-story p { margin:0; color:var(--ink-2); font-size:var(--t-lead); line-height:1.45; max-width:var(--measure); }

.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:14px; overflow:hidden; margin:0 0 var(--sp-7); }
.board > div { background:var(--bg-2); padding:var(--sp-4) var(--sp-5); display:grid; gap:var(--sp-1); }
.board b { font-family:var(--mono); font-size:clamp(28px,3.4vw,40px); font-weight:700; line-height:1.05; color:var(--led); font-variant-numeric:tabular-nums; }
.board span { color:var(--ink-2); }
.board .big b { font-size:clamp(56px,8vw,96px); }

.layer { margin:0 0 var(--sp-8); }
.layer h2 { margin:0 0 var(--sp-2); font-size:clamp(24px,2.6vw,var(--t-h3)); letter-spacing:var(--track-head); }
.layer > p { color:var(--ink-2); margin:0 0 var(--sp-5); max-width:var(--measure); }
.cos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-3); }
.cos li { border:1px solid var(--rule); border-radius:12px; padding:var(--sp-4); background:var(--bg-2); display:grid; gap:var(--sp-2); align-content:start; }
.cos b { font-size:17px; }
.cos p { margin:0; font-size:var(--t-small); line-height:1.5; color:var(--ink-2); }
.cos .ev { font-size:var(--t-small); line-height:1.45; }
.cos .ev time { font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; color:var(--purple-2); display:block; }

.search { width:100%; max-width:520px; font:inherit; font-size:var(--t-body); color:var(--ink); background:var(--panel); border:1px solid var(--rule-3); border-radius:10px; padding:12px 14px; margin:0 0 var(--sp-5); min-height:48px; }
.search::placeholder { color:var(--ink-3); }
.papers > li { grid-template-columns:11ch 1fr; }
.papers .au { color:var(--ink-2); font-size:var(--t-small); margin:0 0 var(--sp-2); }
.papers details summary { cursor:pointer; font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-3); min-height:36px; display:inline-flex; align-items:center; }
.papers details p { margin-top:var(--sp-2); color:var(--ink-2); max-width:var(--measure); }
.papers .cat { font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-3); margin-left:var(--sp-2); }

/* workflow diagrams: SVG on wide screens, the same steps as a list on phones */
.wf { margin:var(--sp-6) 0 var(--sp-8); }
.wf h2 { margin:0 0 var(--sp-2); font-size:clamp(24px,2.6vw,var(--t-h3)); letter-spacing:var(--track-head); }
.wf > p { color:var(--ink-2); max-width:var(--measure); margin:0 0 var(--sp-4); }
.wf-svg { border:1px solid var(--rule); border-radius:14px; background:var(--bg-2); overflow-x:auto; }
.wf-svg svg { display:block; max-width:none; }
.wf-svg { scrollbar-color:var(--rule-2) transparent; }
.wf-list { display:none; list-style:none; padding:0; margin:0; counter-reset:w; }
.wf-list li { counter-increment:w; border-left:2px solid var(--purple-2); padding:0 0 var(--sp-4) var(--sp-4); position:relative; }
.wf-list li::before { content:counter(w); position:absolute; left:-13px; top:0; width:24px; height:24px; border-radius:50%; background:var(--bg); border:2px solid var(--purple-2); font-family:var(--mono); font-size:12px; font-weight:700; display:grid; place-items:center; }
.wf-list b { display:block; }
.wf-list span { color:var(--ink-2); font-size:var(--t-small); }
.wf-list code { font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
@media (max-width:760px) { .wf-svg { display:none; } .wf-list { display:block; } }


.dl { display:grid; gap:var(--sp-3); margin:0 0 var(--sp-7); padding:0; list-style:none; }
.dl li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-4); align-items:baseline; padding:var(--sp-4) 0; border-top:1px solid var(--rule); }
.dl li p { margin:var(--sp-1) 0 0; color:var(--ink-2); font-size:var(--t-small); }
.dl code, .prose code { font-family:var(--mono); font-size:.88em; background:var(--panel); padding:1px 5px; border-radius:4px; }
.prose table { width:100%; border-collapse:collapse; font-size:var(--t-small); margin:0 0 var(--sp-5); display:block; overflow-x:auto; }
.prose th, .prose td { text-align:left; padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.prose th { font-family:var(--mono); font-size:var(--t-micro); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-2); }
@media (prefers-reduced-motion:reduce) { .g-l { transition:none; } }
.prose pre { max-width:100%; overflow-x:auto; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:var(--sp-4); font-family:var(--mono); font-size:13px; line-height:1.5; margin:0 0 var(--sp-5); }
.prose pre code { background:none; padding:0; }
.prose p, .prose li, .prose td { overflow-wrap:anywhere; }
.prose h2, .prose h3 { scroll-margin-top:120px; }
.sources li, figure.g { scroll-margin-top:120px; }

/* review fixes, Sept. 29 */
@media (max-width:720px) {
  .papers > li { grid-template-columns:minmax(0,1fr); }
  .feed > li > .micro:first-child { grid-column:1 / -1; }
}
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus-visible { position:fixed; left:16px; top:8px; z-index:30; padding:10px 14px; background:var(--panel); color:var(--ink); border:2px solid var(--purple-2); border-radius:8px; }
main { scroll-margin-top:120px; }
.g-data summary:focus-visible, .nav a:focus-visible { outline-offset:-3px; }
@media (max-height:500px) { .mast { position:static; } }

/* the data drop-down: a chevron that turns, a row count, and a table that gives words their room */
.g-data summary { list-style:none; gap:10px; transition:background .2s var(--ease), color .2s var(--ease); }
.g-data summary::-webkit-details-marker { display:none; }
.g-data summary:hover { background:rgba(244,242,250,.04); color:var(--ink); }
.g-data .chev { width:8px; height:8px; border-right:2px solid var(--purple-2); border-bottom:2px solid var(--purple-2); transform:rotate(-45deg); transition:transform .25s var(--ease); flex:none; margin-right:2px; }
.g-data[open] .chev { transform:rotate(45deg); }
.g-data .g-rows { margin-left:auto; font-weight:500; color:var(--ink-3); letter-spacing:.06em; }
table.t { table-layout:auto; }
table.t caption { caption-side:top; text-align:left; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:0 0 var(--sp-2); line-height:1.5; }
table.t th { white-space:normal; }
table.t td:first-child, table.t th:first-child { min-width:14ch; }
table.t td:nth-child(2) { min-width:8ch; }

/* graphics standard: the watermark, the lead, the rule, axis names, the legend */
.g-stage { container-type:inline-size; }
.g-wm { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0; white-space:nowrap; font-family:var(--mono); font-weight:700; font-size:8.6cqw; letter-spacing:.18em; text-transform:lowercase; color:rgba(244,242,250,.035); user-select:none; }
.g-wm-c { position:absolute; right:12px; bottom:8px; pointer-events:none; z-index:3; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; color:rgba(244,242,250,.32); user-select:none; }
.g-stage canvas { z-index:1; }
.g-labels { z-index:2; }
.g-l.g-lead { font-size:15.5px; line-height:1.35; white-space:normal; text-align:left; color:var(--ink); }
.g-l.g-lead b { font-weight:700; }
.g-l.g-rule { font-size:13.5px; line-height:1.4; white-space:normal; text-align:left; color:var(--ink-2); }
.g-l.g-axis { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); white-space:normal; line-height:1.4; }
.g-l.g-legend { display:flex; flex-wrap:wrap; gap:6px 14px; white-space:normal; font-size:12.5px; color:var(--ink-2); text-align:left; }
.g-legend .lg { display:inline-flex; align-items:center; gap:6px; }
.g-legend .lg i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---------- the footer ---------- */
.foot { border-top:1px solid var(--rule); padding:var(--sp-8) 0 var(--sp-6); color:var(--ink-2); font-size:var(--t-small); background:linear-gradient(180deg, transparent, rgba(118,34,247,.04)); }
.foot-in { width:var(--col-w); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap:var(--sp-7) var(--sp-6); }
.foot-brand { display:grid; gap:var(--sp-4); align-content:start; max-width:46ch; }
.foot-brand p { margin:0; line-height:1.55; }
.foot-title { font-weight:800; font-size:18px; color:var(--ink); text-decoration:none; }
.foot-title span { color:var(--purple-2); }
.foot-col { display:grid; gap:var(--sp-3); align-content:start; }
.foot-col h2 { margin:0 0 var(--sp-1); font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-3); }
.foot-col a, .foot-brand a { color:var(--ink-2); text-decoration:none; transition:color .2s var(--ease); }
.foot-col a:hover, .foot-brand a:hover { color:var(--ink); text-decoration:underline; text-decoration-color:var(--purple-2); }
.foot-pay { font-size:13.5px; color:var(--ink-3); border-left:2px solid var(--led); padding-left:var(--sp-3); }
.foot-base { width:var(--col-w); margin:var(--sp-7) auto 0; padding-top:var(--sp-4); border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-5); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-3); }
@media (max-width:900px) { .foot-in { grid-template-columns:repeat(3, minmax(0,1fr)); } .foot-brand { grid-column:1 / -1; max-width:none; } }
@media (max-width:560px) { .foot-in { grid-template-columns:1fr 1fr; } .foot-col[aria-label="Legal"] { grid-column:1 / -1; } }

/* ---------- the signup ---------- */
.signup { display:grid; gap:var(--sp-2); }
.signup label { color:var(--ink); font-weight:700; font-size:15px; }
.signup-row { display:flex; gap:var(--sp-2); }
.signup input[type=email] { flex:1; min-width:0; min-height:46px; font:inherit; font-size:16px; color:var(--ink); background:var(--panel); border:1px solid var(--rule-3); border-radius:10px; padding:10px 12px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.signup input[type=email]:focus { outline:none; border-color:var(--purple-2); box-shadow:0 0 0 3px rgba(167,123,255,.25); }
.signup button { min-height:46px; padding:0 18px; border-radius:10px; border:1px solid rgba(255,241,204,.5); background:var(--led); color:#1a1506; font:inherit; font-weight:800; font-size:15px; cursor:pointer; transition:transform .16s var(--ease), box-shadow .2s var(--ease); }
.signup button:hover { box-shadow:0 0 22px rgba(255,241,204,.35); }
.signup button:active { transform:scale(.97); }
.signup.busy button { opacity:.6; }
.signup .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.signup-msg { margin:0; min-height:1.4em; font-size:13.5px; color:var(--ink-2); }
.signup.done .signup-msg { color:var(--up); }

/* ---------- motion: arrive, reveal, cross-fade (docs/MOTION.md) ---------- */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation:vt-in .34s var(--ease) both; }
@keyframes vt-out { to { opacity:0; } }
@keyframes vt-in { from { opacity:0; transform:translateY(6px); } }
@keyframes page-in { from { opacity:0; transform:translateY(8px); } }
main, .foot { animation:page-in .5s var(--ease) both; }
.foot { animation-delay:.08s; }
.mast { animation:page-in .35s var(--ease) both; }
.rv { opacity:0; transform:translateY(12px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.rv.is-in { opacity:1; transform:none; }
html.leaving main, html.leaving .foot { opacity:0; transform:translateY(-4px); transition:opacity .16s var(--ease), transform .16s var(--ease); }
a, button, summary { transition-property:color, background, border-color, box-shadow, transform; transition-duration:.2s; transition-timing-function:var(--ease); }
@media (prefers-reduced-motion:reduce) {
  main, .foot, .mast { animation:none; }
  .rv { opacity:1; transform:none; transition:none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}
.foot-in > * { min-width:0; }
@media (max-width:380px) { .signup-row { flex-wrap:wrap; } .signup button { flex:1 1 100%; } }

/* ---------- the rail: the spider's track at the foot of every page ---------- */
.rail { position:relative; width:var(--col-w); height:112px; margin:var(--sp-5) auto calc(-1 * var(--sp-6)); overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail-svg { display:block; overflow:visible; }
.rail-ballast { stroke:var(--ink-3); stroke-width:1; stroke-linecap:round; opacity:.35; fill:none; }
.rail-tie { fill:#12121a; stroke:rgba(244,242,250,.16); stroke-width:.8; }
.rail-grain { stroke:rgba(244,242,250,.07); stroke-width:.6; fill:none; }
.rail-far { stroke:rgba(244,242,250,.26); stroke-width:1; fill:none; }
.rail-near { stroke:rgba(244,242,250,.55); stroke-width:1.4; fill:none; }
.rail-web { stroke:rgba(167,123,255,.35); stroke-width:.6; fill:none; }
.sp-leg { fill:none; stroke:var(--purple-2); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.sp-leg-far { stroke:#5c4a86; stroke-width:1; }
.sp-abd { fill:#140f20; stroke:var(--purple-2); stroke-width:1; }
.sp-art { stroke:rgba(167,123,255,.45); stroke-width:.55; fill:none; }
.sp-sheen { stroke:rgba(244,242,250,.35); stroke-width:.8; fill:none; stroke-linecap:round; }
.sp-ceph { fill:#1a1428; stroke:var(--purple-2); stroke-width:1; }
.sp-eye { fill:#ff4059; }
.sp-halo { fill:#ff4059; opacity:.16; }
.sp-fang { stroke:var(--ink-2); stroke-width:.9; stroke-linecap:round; fill:none; }

/* ---------- the stack: the name, and its detail on hover, focus or tap ---------- */
.cos { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--sp-2); }
.cos li.co { position:relative; padding:0; border-radius:10px; display:block; transition:border-color .2s var(--ease), background .2s var(--ease); }
.co-name { display:block; width:100%; min-height:52px; padding:var(--sp-3) var(--sp-4); text-align:left; font:700 16px/1.3 var(--sans); color:var(--ink); background:none; border:0; border-radius:inherit; cursor:pointer; }
span.co-name { cursor:default; }
button.co-name::after { content:""; float:right; width:7px; height:7px; margin:7px 2px 0 var(--sp-2); border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg); transition:transform .25s var(--ease), border-color .2s var(--ease); }
.co-name:focus-visible { outline:2px solid var(--purple-2); outline-offset:2px; }
.co-more { position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:min(360px, calc(100vw - 2 * var(--gutter))); display:grid; gap:var(--sp-2); padding:var(--sp-4); border:1px solid var(--rule-2); border-radius:12px; background:rgba(16,17,25,.97); box-shadow:0 18px 48px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(167,123,255,.06);
  visibility:hidden; opacity:0; clip-path:inset(0 0 100% 0 round 12px); transition:opacity .22s var(--ease), clip-path .32s var(--ease), visibility 0s linear .32s; }
.co.flip .co-more { left:auto; right:0; }
.co-more p { margin:0; font-size:var(--t-small); line-height:1.5; color:var(--ink-2); }
.co-more .ev { font-size:var(--t-small); line-height:1.45; }
.co-more .ev time { font-family:var(--mono); font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; color:var(--purple-2); display:block; }
.co:has(> [aria-expanded="true"]), .co:focus-within { border-color:var(--rule-3); background:var(--panel); z-index:31; }
.co > [aria-expanded="true"] + .co-more, .co:focus-within > .co-more { visibility:visible; opacity:1; clip-path:inset(0 0 0 0 round 12px); transition:opacity .22s var(--ease), clip-path .32s var(--ease), visibility 0s; }
.co > [aria-expanded="true"]::after { transform:rotate(45deg); border-color:var(--purple-2); }
@media (hover:hover) {
  .co:hover { border-color:var(--rule-3); background:var(--panel); z-index:31; }
  .co:hover > .co-more { visibility:visible; opacity:1; clip-path:inset(0 0 0 0 round 12px); transition:opacity .22s var(--ease) .06s, clip-path .32s var(--ease) .06s, visibility 0s .06s; }
  .co:hover > button.co-name::after { border-color:var(--purple-2); }
}
@media (max-width:560px) {
  .co-more { position:static; width:auto; border:0; border-top:1px solid var(--rule); border-radius:0 0 10px 10px; box-shadow:none; background:none; display:none; }
  .co > [aria-expanded="true"] + .co-more { display:grid; }
  .co:focus-within > .co-more { display:none; }
  .co:focus-within > [aria-expanded="true"] + .co-more { display:grid; }
}
@media (prefers-reduced-motion:reduce) { .co-more, .co-more * { transition:none !important; } }

/* ---------- members-only pages ---------- */
.lock-stage { position:relative; margin-top:var(--sp-6); min-height:520px; border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--bg-2); }
.lock-ghost { position:absolute; inset:0; padding:var(--sp-6); display:grid; gap:var(--sp-4); align-content:start; filter:blur(7px); opacity:.55; user-select:none; }
.lock-ghost i { display:block; height:18px; width:var(--w); border-radius:6px; background:linear-gradient(90deg, rgba(244,242,250,.14), rgba(167,123,255,.18)); }
.lock-ghost i:nth-child(3n) { height:44px; }
.lock-card { position:relative; z-index:1; width:min(520px, calc(100% - 2 * var(--sp-4))); margin:var(--sp-8) auto; padding:var(--sp-6); display:grid; gap:var(--sp-3); border:1px solid var(--rule-2); border-radius:14px; background:rgba(12,13,18,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 24px 64px -20px rgba(0,0,0,.8); }
.lock-card .micro { color:var(--led); }
.lock-card h2 { margin:0; font-size:clamp(24px,3vw,var(--t-h3)); letter-spacing:var(--track-head); line-height:1.15; }
.lock-card p { margin:0; color:var(--ink-2); line-height:1.55; }
.lock-note { font-size:13.5px; color:var(--ink-3) !important; }
@media (max-width:560px) { .lock-card { margin:var(--sp-6) auto; padding:var(--sp-5); } .lock-stage { min-height:0; } }
.lock-card > *, .signup, .signup-row > * { min-width:0; }
@media (max-width:560px) { .lock-stage { border:0; background:none; } .lock-ghost { padding:var(--sp-4) 0; } .lock-card { width:auto; margin:var(--sp-5) 0; } .lock-card .signup-row { flex-wrap:wrap; } .lock-card .signup button { flex:1 1 100%; } }
.co-more { background:#101119; }
.cos li.co:hover, .cos li.co:focus-within, .cos li.co:has(> [aria-expanded="true"]) { z-index:31; }

/* ---------- the graphics tooltip: exact value, unit and note under the pointer or finger ---------- */
.g-tip { position:absolute; left:0; top:0; z-index:4; max-width:min(280px, calc(100% - 12px)); display:grid; gap:2px; padding:8px 11px 9px; border:1px solid var(--rule-2); border-radius:9px; background:#101119; box-shadow:0 12px 32px -10px rgba(0,0,0,.8); pointer-events:none; opacity:0; transition:opacity .14s var(--ease); font-size:13px; line-height:1.4; color:var(--ink-2); }
.g-tip.on { opacity:1; }
.g-tip b { color:var(--ink); font-weight:700; }
.g-tip-v { font-family:var(--mono); font-weight:700; font-size:16px; color:var(--led); font-variant-numeric:tabular-nums slashed-zero; }
.g-tip-u { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.g-tip small { font-size:12.5px; color:var(--ink-2); }
@media (prefers-reduced-motion:reduce) { .g-tip { transition:none; } }
/* a closed detail keeps to its card's width, so the rightmost column never widens the page */
.co-more { width:100%; }
.co > [aria-expanded="true"] + .co-more, .co:focus-within > .co-more { width:min(360px, calc(100vw - 2 * var(--gutter))); }
@media (hover:hover) { .co:hover > .co-more { width:min(360px, calc(100vw - 2 * var(--gutter))); } }
@media (max-width:560px) { .co-more, .co > [aria-expanded="true"] + .co-more, .co:focus-within > .co-more { width:auto; } }

.rail-cv { position:absolute; left:0; top:0; display:block; }