/* ==========================================================================
   OpenRSI Index: the shared system from the website ideas doc (Stella).
   Loaded last on every page, on top of style.css and startrails.css, so the
   site speaks with one type family and one set of controls:

   - Type: Hanken Grotesk for headings and text, JetBrains Mono for labels,
     data and code. The same pairing as openrsi.foundation.
   - Colour: Night / Bone / Dust on dark, Ink / Paper on light, Signal green
     only for "improved".
   - Controls: one square button in two weights (primary, secondary) with
     mono labels; one text-link style; one tab style. Blue (#2b4cff) is the
     only accent: active states, the primary action, the readout numerals.
   ========================================================================== */

:root {
  --font-serif: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --night: #07080a;
  --bone: #ecebe6;
  --dust: #8f8b80;
  --ink: #191917;
  --paper: #faf9f5;
  --signal: #2f9e7a;

  --btn-h: 44px;
  --btn-pad: 0 20px;
  --btn-font: 500 15px/1 var(--font-sans);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body { font-family: var(--font-sans); }

/* ---------- type: one family, clear steps ---------- */
h1, h2, h3, h4,
.h-lg, .tree-title, .cfc-title, .tt-title, .sec-title, .center-head .h-lg,
.hero h1, .hl {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.hero h1 { font-weight: 500; letter-spacing: -0.035em; }
h1 em, h2 em, h3 em, .h-lg em, .pc-wordmark em { font-style: italic; font-weight: 400; }
p, li, dd, td, .home-summary, .cfc-flow-desc, .cfc-flow-slogan, .thesis, .prose { font-family: var(--font-sans); }
.cfc-flow-slogan { font-weight: 500; letter-spacing: -0.015em; }
code, pre, kbd, samp, .mono { font-family: var(--font-mono); }

/* the browser's own surfaces carry the palette too */
::selection { background: rgba(47, 158, 122, 0.28); color: inherit; }
a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------- buttons: one pill, two weights ---------- */
.hero .jump a,
#contribute .cfc-btn,
.fold .fold-hint,
.os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  border-radius: 999px;
  font: var(--btn-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.hero .jump a:active, #contribute .cfc-btn:active, .fold > summary:active .fold-hint { transform: translateY(1px); }

/* on the night sky: bone primary, quiet outline secondary */
.hero .jump a {
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(236, 235, 230, 0.38);
}
.hero .jump a:hover, .hero .jump a:focus-visible { color: var(--bone); border-color: var(--bone); background: rgba(236, 235, 230, 0.1); }
.hero .jump a.hot {
  background: var(--bone);
  color: var(--night);
  border-color: var(--bone);
}
.hero .jump a.hot:hover, .hero .jump a.hot:focus-visible { color: var(--night); background: #ffffff; border-color: #ffffff; }
.hero .jump { gap: 10px; }

/* on paper: ink primary, ink outline secondary */
#contribute .cfc-btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
#contribute .cfc-btn-primary:hover, #contribute .cfc-btn-primary:focus-visible { color: var(--paper); background: #2e2e2b; border-color: #2e2e2b; }
#contribute .cfc-btn-primary span { font-family: var(--font-sans); }

/* "Expand" on the folded task sections: the hint becomes a secondary pill */
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold .fold-hint {
  min-height: 38px;
  margin-top: 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(25, 25, 23, 0.32);
  font-size: 14px;
}
.fold > summary:hover .fold-hint { color: var(--ink); border-color: var(--ink); background: rgba(25, 25, 23, 0.05); }

/* ---------- text links inside task cards: one style ---------- */
.task-frame .tc-link,
#signature .task-card .tc-link,
.task-frame.deep .tc-link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 20px 0 0;
  padding: 0 0 2px;
  font: 500 15px/1.4 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid rgba(25, 25, 23, 0.3);
  border-radius: 0;
  background: none;
}
.task-frame .tc-link:hover { border-bottom-color: currentColor; }
[data-dark] .task-frame .tc-link, .task-frame.deep .tc-link { color: var(--bone); border-bottom-color: rgba(236, 235, 230, 0.35); }

/* ---------- tabs: text with an underline for the current one ---------- */
.task-frame .task-tabs .tt,
#signature .task-tabs .tt,
.task-frame.deep .task-tabs .tt,
.task-frame.slate .task-tabs .tt {
  font: 500 15px/1.3 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(25, 25, 23, 0.55);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 2px;
  box-shadow: none;
}
.task-frame .task-tabs .tt:hover { color: var(--ink); }
.task-frame .task-tabs .tt.on,
#signature .task-tabs .tt.on,
.task-frame.deep .task-tabs .tt.on,
.task-frame.slate .task-tabs .tt.on {
  color: var(--ink);
  background: none;
  border-color: transparent;
  border-bottom-color: var(--ink);
}

/* ---------- filter chips (task list) follow the secondary pill ---------- */
.filterbar .chip {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(25, 25, 23, 0.25);
}
.filterbar .chip:hover { border-color: var(--ink); }
.filterbar .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- contact addresses: plain links, not boxes ---------- */
.solo-contact { gap: 10px 22px; }
.solo-contact a,
body.home.skypage #compute .solo-contact a {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  font: 400 15px/1.5 var(--font-mono);
}

/* ---------- labels and small caps: mono, never below 11px ---------- */
.hero-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 235, 230, 0.66); }
.hero-question { font-family: var(--font-sans); font-weight: 400; letter-spacing: -0.01em; }

@media (max-width: 720px) {
  :root { --btn-h: 42px; --btn-pad: 0 16px; --btn-font: 500 14.5px/1 var(--font-sans); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .jump a, #contribute .cfc-btn, .fold .fold-hint { transition: none; }
}

/* ---------- the contribution loop in the shared palette (no blue) ---------- */
#contribute .fl-joint rect { fill: var(--bone); stroke: var(--ink); }
#contribute .fl-joint text { fill: var(--ink); }
#contribute .fl-agent rect { fill: transparent; stroke: rgba(25, 25, 23, 0.35); }
#contribute .fl-agent text { fill: #4a4944; }
#contribute .fl-key circle { fill: var(--bone); }
#contribute .fl-step-label, #contribute .fl-tag { fill: #6a685f; }

/* ---------- inner pages: hairline panels instead of heavy ink boxes ---------- */
body.skypage .post-card, body.skypage .tcard, body.skypage .card, body.skypage .scorebox, body.skypage .task-fig,
body.skypage .agent-note, body.skypage .article .fig-frame, body.skypage .run-figs figure,
body.skypage .gpu-note, body.skypage .callout, body.skypage .ledger {
  border: 1px solid rgba(25, 25, 23, 0.16) !important;
  border-radius: 6px !important;
}
body.skypage .tcard.sig, body.skypage .tcard.sig:hover { border-top: 1px solid rgba(25, 25, 23, 0.16) !important; }
body.skypage .tcard:hover, body.skypage .post-card:hover, body.skypage .card:hover { border-color: rgba(25, 25, 23, 0.45) !important; }
body.skypage .tcard h3 { font-weight: 500; letter-spacing: -0.015em; }

/* filters: a row of secondary pills, no frame around them */
body.skypage .filterbar, body.skypage .lb-filter {
  gap: 8px; padding: 0 !important; border: 0 !important; background: none !important;
}
body.skypage .filterbar .chip, body.skypage .lb-filter .chip {
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(25, 25, 23, 0.25); background: transparent; color: var(--ink);
}
body.skypage .filterbar .chip:hover, body.skypage .lb-filter .chip:hover { border-color: var(--ink); }
body.skypage .filterbar .chip.active, body.skypage .lb-filter .chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* readout band: pinned to the bottom of the screen for the whole dark opening
   (hero + the signature-task tree), then it leaves with the end of that band.
   section-rail.js moves it up once the tree band's bottom edge passes. */
@media (min-width: 721px) {
  body.home > .hero-readouts { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 40 !important; margin: 0; will-change: transform; }
  body.home > .hero-readouts.is-done { visibility: hidden; }
}

/* ---------- hero spacing and the pinned band's glass ---------- */
@media (min-width: 721px) {
  /* the title group sits a little higher, so the actions breathe above the band */
  body.home .hero-labels { top: 47%; }
  .hero-labels .hero-foot { margin-top: clamp(22px, 3.2vh, 34px); }
  /* the band: frosted, so whatever scrolls beneath it stays legible as it arrives */
  body.home > .hero-readouts {
    background: rgba(7, 8, 10, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    border-top-color: rgba(236, 235, 230, 0.14);
  }
  body.home > .hero-readouts > div { padding: clamp(18px, 2.4vh, 26px) clamp(24px, 3.6vw, 52px) clamp(30px, 4.4vh, 46px); }
  /* the summary follows the hero closely instead of waiting a screen's margin */
  body.home.skypage .tree-band { padding-top: 4px; }
  .tree-band .home-summary { margin-top: 0; }
}

/* ---------- one palette, from the ideas doc ----------
   Night for the opening and the closing, one Paper for every light section
   (separated by hairlines, not by colour), Ink for text and controls, Bone
   on dark, Signal green only where something improved. The blue accent, the
   gold highlight and the per-section tints are retired; chart series keep
   their own colours because they encode data. */
:root {
  --accent: #191917;
  --accent-deep: #000000;
  --accent-bright: #ecebe6;
  --accent-soft: #ecebe6;
  --hl: #ecebe6;
  --hl-2: #f3f2ee;
  --gold: #ecebe6;
  --gold-light: #ecebe6;
  --gold-border: rgba(236, 235, 230, 0.34);
}
body.home.skypage #partners.sec,
body.home.skypage #advisors.sec,
body.home.skypage #signature-tasks.sec,
body.home.skypage #lightweight.sec,
body.home.skypage #all-tasks.block,
body.home.skypage #contribute.block {
  background: var(--paper) !important;
  border-top: 1px solid rgba(25, 25, 23, 0.1);
}
.tree-title em.gold { color: inherit; }

/* ---------- advisors: one calm grid in black and white, colour on hover ---------- */
.advisors img,
#advisors img {
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.45s var(--ease-out);
}
.advisors a:hover img, .advisors li:hover img, .advisors figure:hover img,
#advisors a:hover img, #advisors li:hover img, #advisors figure:hover img,
.advisors a:focus-visible img, #advisors a:focus-visible img {
  filter: grayscale(0) contrast(1);
}
@media (prefers-reduced-motion: reduce) { .advisors img, #advisors img { transition: none; } }

/* partners follow the same rule as the advisor photos: monochrome until hovered */
body.home #partners .lg img,
body.home #partners .li-photo { filter: grayscale(1) !important; transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out); }
body.home #partners .lg img { opacity: 0.82 !important; }
body.home #partners .lg:hover img,
body.home #partners .li-card:hover .li-photo { filter: grayscale(0) !important; opacity: 1 !important; }
/* the partner cards' school colours and coloured word-marks follow the same monochrome-until-hover rule */
body.home #partners .li-uw, body.home #partners .li-cal { background: linear-gradient(100deg, #111110 0%, #2b2b28 45%, #6a6963 75%, #e9e7e0 100%); transition: background 0.45s var(--ease-out); }
body.home #partners .li-uw:hover { background: linear-gradient(100deg, #33195f 0%, #4B2E83 38%, #8f78bd 70%, #ffffff 100%); }
body.home #partners .li-cal:hover { background: linear-gradient(100deg, #001f3f 0%, #003262 38%, #4f7fb3 70%, #ffffff 100%); }
body.home #partners .lg .lg-word { color: #3a3935 !important; transition: color 0.45s var(--ease-out); }
body.home #partners .lg.lg-nus:hover .lg-word { color: #003d7c !important; }

/* ---------- blue: one highlight and one light ground (Stella, 2026-10-08) ----------
   Taken from the night sky's own blue so the page stays one family. Light
   sections alternate Paper and a pale blue ground; the deeper blue marks
   what is current or special (section rail, signature tasks, link hovers,
   the loop's way back, focus). Green stays only inside chart data. */
:root {
  --blue: #2b4cff;
  --blue-deep: #263f99;
  --blue-soft: #ecf1f9;
  --blue-line: rgba(43, 76, 255, 0.22);
}
body.home.skypage #advisors.sec,
body.home.skypage #lightweight.sec,
body.home.skypage #contribute.block {
  background: var(--blue-soft) !important;
  border-top-color: var(--blue-line);
}
body.home.skypage #partners.sec,
body.home.skypage #signature-tasks.sec,
body.home.skypage #all-tasks.block { background: var(--paper) !important; }

/* highlight uses */
::selection { background: rgba(43, 76, 255, 0.22); }
:focus-visible { outline-color: var(--blue); }
.section-rail a[aria-current] { color: var(--blue); }
.section-rail a[aria-current]::before { color: var(--blue); }
#all-tasks .tt-sig, #all-tasks tr.sig td.t::before { color: var(--blue); }
#all-tasks td.t a:hover, .task-frame .tc-link:hover, #all-tasks .tt-more a:hover { color: var(--blue); border-bottom-color: var(--blue); text-decoration-color: var(--blue); }
#contribute .fl-arc-return { stroke: var(--blue); }
#contribute .fl-key circle { fill: var(--blue-soft); stroke: var(--blue); }
#contribute .fl-joint rect { fill: var(--blue-soft); stroke: var(--blue); }
#contribute .fl-joint text { fill: var(--blue-deep); }
#contribute .cfc-flow { background: #ffffff; }
.fold > summary:hover .fold-hint { border-color: var(--blue); color: var(--blue); background: rgba(43, 76, 255, 0.05); }
.task-frame .task-tabs .tt.on, #signature .task-tabs .tt.on { border-bottom-color: var(--blue) !important; }
body.skypage .filterbar .chip.active, body.skypage .lb-filter .chip.active { background: var(--blue); border-color: var(--blue); }

/* the long page's top padding showed the fixed greige ground through; paint it Paper so it joins the first section */
body.home.skypage main.longform { background: var(--paper) !important; }

/* the footer continues the night of the closing section */
body.skypage footer.site { background: var(--night) !important; color: rgba(236, 235, 230, 0.78); border-top: 1px solid rgba(236, 235, 230, 0.1); }
body.skypage footer.site a { color: rgba(236, 235, 230, 0.86); }
body.skypage footer.site a:hover { color: #ffffff; }
body.skypage footer.site h3.foot-h, body.skypage footer.site h4 { color: rgba(236, 235, 230, 0.55); }
body.skypage footer.site .brand, body.skypage footer.site strong, body.skypage footer.site b { color: var(--bone); }
body.skypage footer.site hr, body.skypage footer.site .foot-rule { border-color: rgba(236, 235, 230, 0.12); }
/* the paper sheet behind the long page was greige: make it the same Paper */
body.home.skypage .sky-ground::before { background: var(--paper) !important; }
/* footer: edge to edge, with its own inner width */
body.skypage footer.site { width: 100% !important; max-width: none !important; margin: 0 !important; padding-inline: 0 !important; border-top: 0 !important; }
body.skypage footer.site .footer-inner { width: min(var(--max, 1240px), calc(100% - 48px)); margin-inline: auto; }
body.skypage footer.site .wm, body.skypage footer.site .wm .dex { color: var(--bone) !important; }
body.skypage footer.site .footer-line { color: rgba(236, 235, 230, 0.66) !important; }

/* ---------- the band sits exactly on the line where the paper begins ---------- */
@media (min-width: 721px) {
  /* no paper margin above the first light section: the dark opening meets it directly */
  body.home.skypage main.longform { padding-top: 0 !important; }
  /* room for the band under the last line of the dark opening */
  body.home.skypage .tree-band .tree-note { margin-bottom: calc(var(--readout-h, 140px) + 64px); }
  /* the glass lives on a layer behind the content (Safari can drop children of a
     transformed element that carries backdrop-filter itself) */
  body.home > .hero-readouts { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate; will-change: auto; }
  body.home > .hero-readouts::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(7, 8, 10, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
  }
}

/* the section rail sits higher than the readout band so the two never overlap */
body .section-rail { top: 38% !important; }
/* the Foundation card's mark is drawn dark and inverted to white; keep that out of the monochrome filter */
body.home #partners .li-org .li-org-photo, body.home #partners .li-org:hover .li-org-photo { filter: invert(1) !important; opacity: 1 !important; }

/* ---------- the contribution loop plays 1, 2, 3, 4 ----------
   When the figure scrolls in (site.js adds .in), each step settles in, then
   the dotted arc to the next step draws itself along its direction (a mask
   stroke runs from 0 to 1), the arrow arriving last. The way back from 4 to
   1 draws last, then the authorship pill. Once drawn, the figure rests. */
#contribute .cfc-ring { --step: 0.95s; --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); }
#contribute .cfc-ring .fl-node,
#contribute .cfc-ring .fl-step-label,
#contribute .cfc-ring .fl-tag,
#contribute .cfc-ring .fl-loop,
#contribute .cfc-ring .fl-pill,
#contribute .cfc-ring .fl-centre { opacity: 0; transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
#contribute .cfc-ring .fl-node { transform: translateY(8px); }
#contribute .cfc-ring .fl-arc-mask { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0, 0.25, 1); }

#contribute .cfc-flow.in .cfc-ring .fl-centre { opacity: 1; transition-delay: 0.05s; }
#contribute .cfc-flow.in .cfc-ring .fl-node,
#contribute .cfc-flow.in .cfc-ring .fl-step-label { opacity: 1; transform: none; transition-delay: calc(0.15s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-arc-mask { stroke-dashoffset: 0; transition-delay: calc(0.5s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-tag,
#contribute .cfc-flow.in .cfc-ring .fl-loop { opacity: 1; transition-delay: calc(0.85s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-pill { opacity: 1; transition-delay: calc(1.3s + 3 * var(--step)); }
#contribute .cfc-ring .fl-key > circle:first-of-type { fill: var(--blue-soft); stroke: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  #contribute .cfc-ring .fl-node, #contribute .cfc-ring .fl-step-label, #contribute .cfc-ring .fl-tag,
  #contribute .cfc-ring .fl-loop, #contribute .cfc-ring .fl-pill, #contribute .cfc-ring .fl-centre { opacity: 1; transform: none; transition: none; }
  #contribute .cfc-ring .fl-arc-mask { stroke-dashoffset: 0; transition: none; }
}

/* the older reveal animates every station within half a second; the ring uses the 1-2-3-4 sequence above instead */
#contribute .cfc-flow.in .cfc-ring .fl-node,
#contribute .cfc-flow.in .cfc-ring .fl-pill,
#contribute .cfc-flow.in .cfc-ring .fl-loop,
#contribute .cfc-flow.in .cfc-ring .fl-tag { animation: none; }

/* ---------- trial (2026-10-08): square controls and a terminal blue ----------
   Index speaks the instrument's language (dot numerals, mono labels, dotted
   trails), so its controls lose the pill and become square; the Foundation
   keeps its round buttons. The blue moves to a saturated terminal / ASCII
   blue (5.7:1 on Paper), with a slightly cooler pale ground. */
:root {
  --blue: #2b4cff;
  --blue-deep: #1a33c7;
  --blue-soft: #eef1ff;
  --blue-line: rgba(43, 76, 255, 0.22);
}
.hero .jump a,
#contribute .cfc-btn,
.fold .fold-hint,
.filterbar .chip,
body.skypage .filterbar .chip, body.skypage .lb-filter .chip,
.os-btn { border-radius: 0 !important; }
body.skypage .post-card, body.skypage .tcard, body.skypage .card, body.skypage .scorebox, body.skypage .task-fig,
body.skypage .agent-note, body.skypage .article .fig-frame, body.skypage .run-figs figure,
body.skypage .gpu-note, body.skypage .callout, body.skypage .ledger { border-radius: 0 !important; }
.hero .jump a, #contribute .cfc-btn { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
::selection { background: rgba(43, 76, 255, 0.24); }

/* ---------- the terminal blue reaches the hero ----------
   The readout band keeps its dark glass; only the dot numerals light up in
   a bright terminal blue, with a prompt mark on each label. The one primary
   action (Sponsor Compute) is filled in blue. Everything else in the hero
   stays Night and Bone. */
:root { --blue-glow: #6f8bff; }
body.home > .hero-readouts .ro-dots circle { fill: var(--blue-glow); }
body.home > .hero-readouts dd > span:not(.ro-num)::before { content: "> "; }
.hero .jump a.hot[href="#contribute"] { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.hero .jump a.hot[href="#contribute"]:hover { background: var(--blue-deep) !important; border-color: var(--blue-deep) !important; }

/* ---------- readout entrance: the numbers roll into place ----------
   readout-roll.js sets each number as text; every digit is a short strip
   that rolls up and settles, left to right, in under a second. */
body.home > .hero-readouts .ro-num {
  display: inline-flex; font-family: var(--font-readout); font-weight: 800; font-variation-settings: 'ROND' 100;
  font-size: clamp(54px, 8.4vh, 86px); line-height: 1; letter-spacing: 0.02em;
  color: var(--blue-glow); font-variant-numeric: tabular-nums;
}
body.home > .hero-readouts .ro-digit {
  display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
body.home > .hero-readouts .ro-strip {
  display: block; white-space: pre; line-height: 1.2; transform: translateY(calc(var(--rows) * -1.2em));
  animation: ro-roll 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ro-roll { from { transform: translateY(0); } }
body.home > .hero-readouts .ro-num span { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; max-width: none; text-align: left; }
@media (max-width: 720px) { body.home > .hero-readouts .ro-num { font-size: 46px; } }
:root { --font-readout: "Doto", var(--font-mono); }

/* ==========================================================================
   Consistency pass (design audit, 2026-10-08): every page gets what the
   home page has, so the Index reads as one instrument.
   ========================================================================== */

/* one Paper ground on every page (the greige sheet is retired) */
body.skypage .sky-ground::before { background: var(--paper) !important; border-top-color: var(--paper) !important; }
body.skypage main.longform { background: var(--paper); }
body.skypage .post-card, body.skypage .tcard, body.skypage .card, body.skypage .scorebox,
body.skypage .agent-note, body.skypage .gpu-note, body.skypage .callout, body.skypage .ledger { background: #ffffff !important; }
body.skypage .tcard:hover, body.skypage .post-card:hover, body.skypage .card:hover { border-color: var(--blue) !important; }

/* inner-page heroes: a band of sky, not a whole empty screen */
body.skypage:not(.home) .sky-hero { min-height: 62vh; min-height: 62svh; }
body.skypage:not(.home) .sky-hero.detail-head { min-height: 56vh; min-height: 56svh; }

/* nav: solid Night with a hairline once the page scrolls, never a grey film */
body.skypage .nav.scrolled { background: rgba(7, 8, 10, 0.94); box-shadow: 0 1px 0 rgba(236, 235, 230, 0.08); }
body.skypage .nav-links a { border-radius: 0 !important; background: none !important; }
body.skypage .nav-links a.active { opacity: 1; box-shadow: inset 0 -1px 0 var(--blue-glow); }
body.skypage .nav-links a:hover { opacity: 1; }
.nav-toggle { border-radius: 0 !important; font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: 0.06em; }

/* square everywhere a control or panel is drawn */
body.skypage .pipeline .step, body.skypage .article .post-body .pipeline .step,
body.skypage .sky-replay, body.skypage .chip, body.skypage button, body.skypage .btn,
body.skypage input, body.skypage select, body.skypage textarea { border-radius: 0 !important; }

/* one control label: mono, 13px, slight tracking */
.hero .jump a, #contribute .cfc-btn, .fold .fold-hint, .os-btn,
body.skypage .filterbar .chip, body.skypage .lb-filter .chip {
  font-family: var(--font-mono) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: none;
}
/* the hero leads with two actions; the other three are quiet links */
.hero .jump a:not(.hot) { border-color: transparent !important; background: none !important; color: rgba(236, 235, 230, 0.78) !important; padding: 0 12px !important; text-decoration: underline; text-decoration-color: rgba(236, 235, 230, 0.3); text-underline-offset: 5px; }
.hero .jump a:not(.hot):hover { color: #ffffff !important; text-decoration-color: currentColor; }

/* tables scroll sideways on small screens instead of clipping a column */
@media (max-width: 720px) {
  .task-table, .signature-detail table.ladder, .signature-detail table.runs, body.skypage .article table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  body.home > .hero-readouts dd > span:not(.ro-num) { text-align: left; max-width: none; }
}

/* section rail: just the labels and dots, no box floating over the sky */
.section-rail { background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* labels: one mono idiom everywhere (FAQ numbers, team groups) */
body.skypage .sec h2 .sec { font-family: var(--font-mono); font-size: 0.42em; font-weight: 500; letter-spacing: 0.08em; color: var(--blue); vertical-align: 0.5em; margin-right: 0.8em; padding: 0; }
body.skypage h2.group { font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: #5e5d59 !important; }

/* blog cards: the title is the link, not the whole paragraph */
body.skypage .post-card, body.skypage .post-card * { text-decoration: none !important; }
body.skypage .post-card:hover h2, body.skypage .post-card:hover h3 { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* contrast: the loop's quiet labels and the caution red */
#contribute .cfc-ring text { fill: #5e5d59; }
:root { --red: #a3321f; }

/* browser surfaces */
html { scrollbar-color: rgba(25, 25, 23, 0.35) var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* the inner pages' panel tokens move from greige to the Paper family */
:root { --bg: #faf9f5; --bg-2: #f1f0ea; --panel: #ffffff; --panel-2: #f4f3ee; --line-2: rgba(25, 25, 23, 0.26); }

/* ---------- type: Geist Mono for headings and labels ----------
   The Index speaks as an instrument: headings and every label share one
   monospace (Geist Mono), set light and tightly tracked for display; body
   copy stays Hanken Grotesk for long reading; numerals are Doto dots. */
:root { --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: "Geist Mono", ui-monospace, monospace; }
.hero h1, .hero h1 *, .hl, .hl *, body.skypage .sky-hero h1, body.skypage .sky-hero h1 *,
body.skypage h2, body.skypage .sec-title, body.skypage .tree-title {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.045em !important;
}
.hero h1, .hero h1 * { font-weight: 300 !important; letter-spacing: -0.06em !important; }
body.skypage h2 em, .hero h1 em { font-style: normal; }
body.skypage h2 .sec { letter-spacing: 0.08em !important; }
body.skypage .sec .sec-title { max-width: 30ch; }