/* ============================================================
   OpenRSI Index — stylesheet, "star trails"
   A dark long-exposure hero, then a long-form page set after the
   Anthropic model announcement: a warm off-white ground, a text serif
   for everything read, a grotesk for the interface, square boxes ruled
   in ink. Loaded after style.css everywhere; the token block below
   re-tints the legacy parts.
   ============================================================ */

:root {
  --bg: #faf9f5;
  --bg-2: #f3f1ea;
  --panel: #faf9f5;
  --line: #141413;
  --line-2: #dedbd2;
  --text: #141413;
  --text-2: #3f3e3a;
  --text-3: #5e5d59;
  --muted-2: #87867f;
  --sage: #ced6bf;
  --sage-ink: #788c5d;
  --blue: #3b7cf0;
  --cyan: #1fb9d8;
  --amber: #d98b1a;
  --violet: #9b5fe0;

  /* legacy token names (style.css), kept on the light ground */
  --paper: #faf9f5;
  --paper-2: #faf9f5;
  --surface: #f0eee6;
  --line-soft: #dedbd2;
  --ink: #141413;
  --muted: #3f3e3a;
  --faint: #5e5d59;
  --accent: #3b7cf0;
  --accent-deep: #2560cc;
  --accent-bright: #2560cc;
  --accent-soft: #e6eeff;
  --field: #06090f;
  --field-2: #0b1019;
  --field-3: #121a29;
  --field-line: rgba(140, 170, 230, 0.16);
  --field-text: #f2f5fc;
  --field-body: #b6bfd3;
  --field-muted: #7a849c;
  --shadow-soft: none;
  --shadow-lift: none;

  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  --col: 640px;
  --wide: 1120px;
  --max: 1360px;
  --maxw: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 0px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--sage); color: var(--text); }
a { color: inherit; text-decoration: underline; text-decoration-color: rgba(20, 20, 19, 0.4); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 64px; display: flex; align-items: center;
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}
.nav.scrolled { background: rgba(250, 249, 245, 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav.over-dark { color: #fff; background: transparent; }
.nav.over-dark.scrolled { background: rgba(0, 0, 0, 0.35); }
.nav-inner {
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; color: inherit; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand-mark { width: 23px; height: auto; flex: none; filter: invert(1); }
.nav-links { margin-left: auto; display: flex; gap: 4px; }
.nav-links a { font-size: 14px; color: inherit; opacity: 0.72; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: opacity 0.2s ease, background 0.2s ease; }
.nav-links a:hover, .nav-links a.active { opacity: 1; background: rgba(20, 20, 19, 0.06); }
.nav.over-dark .nav-links a:hover, .nav.over-dark .nav-links a.active { background: rgba(255, 255, 255, 0.1); }
.nav-toggle { display: none; }

/* ---------------- hero: the long exposure ---------------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 64px var(--gutter) 36px;
  background: #06090f; color: #fff;
  overflow: hidden; user-select: none;
  --hero: 0;
}
.hero .sky-frame { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #06090f; }
/* Keep the entire hero backdrop at the viewport edge during top overscroll.
   Below the top, it stays in the document and scrolls with the hero as usual. */
.hero.sky-anchored { overflow: visible; }
.hero.sky-anchored .sky-frame {
  position: fixed; bottom: auto; height: 100vh; height: 100svh;
}
.hero .sky { position: absolute; inset: 0; z-index: 0; background: #06090f; animation: sky-in 1.4s ease both; transform: scale(calc(1 + var(--hero) * 0.06)); opacity: calc(1 - var(--hero) * 0.45); }
.hero .sky canvas { display: block; width: 100%; height: 100%; }
.hero .sky-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(4, 7, 15, 0.18) 70%, rgba(4, 7, 15, 0.62) 100%);
}
@keyframes sky-in { from { opacity: 0; } to { opacity: 1; } }
.hero-labels, .hero-foot, .replay { position: relative; z-index: 2; }
.hero-labels {
  position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.hero-labels .hero-kicker { opacity: 0; animation: fade-up 1.2s ease both; animation-delay: 2.1s; font-family: var(--font-serif); font-size: clamp(17px, 1.6vw, 22px); letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.72); text-shadow: 0 0 24px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6); }
.hero h1 { display: contents; font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 84px); letter-spacing: -0.015em; line-height: 1; margin: 0; }
.hl { display: inline-block; white-space: nowrap; }
.hl { white-space: normal; text-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6); }
.hl .ch { display: inline-block; opacity: 0; animation: hl-in 1.1s var(--ease) both; animation-delay: calc(0.85s + var(--i) * 0.06s); }
.hl .ch:empty::after { content: "\00a0"; }
@keyframes hl-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-foot { grid-row: 2; display: grid; justify-items: center; gap: 20px; text-align: center; padding-bottom: 8px; opacity: calc(1 - var(--hero) * 1.4); }
.hero-foot > * { opacity: 0; animation: fade-up 1.2s ease both; }
.hero-kicker { animation-delay: 2.1s; }
.hero-q { animation-delay: 2.4s; }
.toc { animation-delay: 2.9s; }
.scroll-label { animation-delay: 3.6s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-kicker { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.hero-q {
  margin: 0; font-family: var(--font-serif); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.35; color: #fff; max-width: 30em;
  text-wrap: balance; text-shadow: 0 0 28px #000, 0 0 10px #000;
}
.toc { list-style: none; margin: 4px 0 0; padding: 0; font-family: var(--font-serif); font-size: 16px; color: rgba(255, 255, 255, 0.82); width: min(440px, 100%); text-shadow: 0 0 12px #000; }
.toc li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.toc .n { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.toc .lead { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, 0.4); transform: translateY(-5px); }
.toc a { text-decoration: none; color: #fff; }
.toc a:hover { text-decoration: underline; }
.scroll-label { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.replay {
  position: absolute; right: var(--gutter); bottom: 22px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.replay:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.replay svg { display: block; }

/* ---------------- article ---------------- */
.longform { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: clamp(64px, 8vw, 112px) 0 clamp(24px, 3vw, 48px); scroll-margin-top: 64px; }
.col { width: min(var(--col), 100%); margin: 0 auto; }
.kicker, .eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 18px;
}
.sec h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--text); text-wrap: balance; }
.sec .sec-title { display: block; max-width: 22ch; margin: 0 auto clamp(28px, 3.5vw, 48px); text-align: center; font-weight: 500; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.01em; }
.sec .sec-title-with-note { margin-bottom: 14px; }
.sec .sample-preview-note { max-width: 80ch; margin: 0 auto clamp(28px, 3.5vw, 48px); font-family: var(--font-sans); font-size: 14.4px; line-height: 1.55; color: var(--text-3); text-align: center; text-wrap: balance; }
.sec.lead h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 26px; }
.sec .sec-title.sec-title-name { max-width: none; font-weight: 400; font-size: clamp(52px, 6.4vw, 92px); line-height: 1.0; letter-spacing: -0.02em; margin-bottom: clamp(30px, 3.6vw, 52px); }
.sec h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.3; margin: 40px 0 12px; color: var(--text); }
.col p { margin: 0 0 18px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.55; color: var(--text); }
.col p b, .col li b { font-weight: 600; }
.col p.big { font-size: clamp(21px, 2vw, 26px); line-height: 1.35; letter-spacing: 0; }
.col p.note { font-family: var(--font-sans); font-size: 14.4px; color: var(--text-3); }
.col p:last-child { margin-bottom: 0; }
.col .kicker { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }

.points { list-style: none; margin: 8px 0 26px; padding: 0; }
.points li { border-top: 1px solid rgba(59, 124, 240, 0.28); padding: 16px 0 18px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; }
.points li:last-child { border-bottom: 1px solid rgba(59, 124, 240, 0.28); }
.points span { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; color: var(--blue); padding-top: 5px; }
.points b { font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--text); }
.points p { grid-column: 2; margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--text-2); }
/* the thesis: a title-sized heading with its argument beside it (main's layout) */
.sec .thesis-grid { width: min(var(--wide), 100%); margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.sec .thesis-head { position: sticky; top: 92px; }
.sec .thesis-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--text); text-wrap: balance; max-width: none; }
.sec .thesis-body { display: block; padding-top: 6px; }
.sec .thesis-body > p { margin: 0 0 20px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.6; color: var(--text-2); max-width: none; }
.sec .thesis-body > p:first-child { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.45; color: var(--text); margin-bottom: 26px; }
.sec .thesis-body .points { margin-top: 4px; }
.sec .thesis-body > p:last-child { margin-bottom: 0; }
.sec .thesis-body b { font-family: var(--font-sans); font-weight: 700; font-size: 0.97em; letter-spacing: -0.005em; color: var(--text); }

/* the chain: three plain stations and two arrows, the last one inked */
.chain-row { width: min(var(--wide), 100%); margin: clamp(36px, 4vw, 56px) auto 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0 12px; }
.chain-step { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px); border: 1px solid var(--text); border-radius: 0; background: var(--bg); text-align: center; }
.chain-step .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.chain-step .v { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.chain-step.last { background: #d7e3fa; border: 3px solid var(--text); }
.chain-step.last .k { color: var(--text-2); }
.chain-step.last .v { color: var(--text); font-weight: 600; }
.chain-arrow { display: grid; place-items: center; font-family: var(--font-serif); font-size: clamp(26px, 2.6vw, 34px); color: var(--text-2); }

.col .partners { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin: 4px 0 20px; font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.01em; }
.partners i { font-style: normal; color: var(--text-3); }
.col .contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.contacts a { text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(25, 25, 23, 0.3); padding-bottom: 1px; }
.contacts a:hover { border-color: currentColor; }
.qs { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); }
.qs li { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: 21px; line-height: 1.35; text-wrap: pretty; }
.actions { margin: 24px 0; }
.col .btn, a.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text); color: #fff; border: 0; border-radius: 6px; padding: 12px 18px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: background 0.2s ease; transform: none; box-shadow: none;
}
.col .btn:hover, a.btn:hover { background: #000; text-decoration: none; transform: none; }

/* the two calls keep their original markup; the card chrome is stripped further down */
.longform section.block#contribute, .longform section.block#compute { background: none; }
.longform #contribute { margin-top: 0; }
.longform #contribute .cfc-shell, .longform #compute .pcard { border-radius: 0 !important; }
.longform section.block + section.block { border-top: 0; }
footer.site { background: transparent; color: var(--text); }
footer.site .footer-brand .wm, footer.site .footer-brand .dex { color: var(--text); }
footer.site .footer-brand .dex { color: var(--text-2); }
footer.site .footer-line, footer.site .footer-base { color: var(--text-3); }
footer.site h4 { color: var(--text-3); }
footer.site a { color: var(--text-2); }
footer.site a:hover { color: var(--text); }

/* the partners: the two campus cards, the logo row, the acknowledgement; no band */
.partners-wide { width: min(var(--wide), 100%); margin: 8px auto 0; }
.partners-wide .li-row { margin: 0 auto 28px; justify-content: center; }
.partners-wide .logo-marquee { margin: 0 0 22px; }
.partners-wide .partners-ack { max-width: 62ch; margin: 0 auto; text-align: center; font-family: var(--font-sans); font-size: 14.4px; line-height: 1.5; color: var(--text-3); }
.partners-wide .li-card { border-radius: 0; }

/* the two calls: soft panels, no border */
.call {
  width: min(var(--wide), 100%); margin: 22px auto 0;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(28px, 3.5vw, 48px); border-radius: 20px; background: var(--bg-2);
}
.call h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 18px; }
.call p { margin: 0 0 16px; font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: var(--text); }
.call p b { font-weight: 600; }
.call .qs { margin: 0 0 20px; }
.call .qs li { font-size: 20px; }
.call .actions { margin: 22px 0 18px; }
.call .kicker, .call .contacts { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.call .kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 14px; }
.call .contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.call .contacts.stack { flex-direction: column; gap: 10px; }
.call .contacts a { text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(25, 25, 23, 0.3); padding-bottom: 1px; }
.call .contacts a:hover { border-color: currentColor; }
.call .note, .call .note b { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-3); margin: 0; }
.call .note { margin-top: 14px; }
.call-figure { margin: 0; min-width: 0; }
.call-figure figcaption { margin: 0 0 14px; }
.call-slogan { font-family: var(--font-serif) !important; font-size: 19px !important; line-height: 1.4 !important; margin: 0 0 6px !important; }
.call-desc { font-family: var(--font-sans) !important; font-size: 14.5px !important; line-height: 1.5 !important; color: var(--text-2) !important; margin: 0 !important; }
.call-figure svg.cfc-flow-svg { display: block; width: 100%; max-width: 372px; height: auto; margin: 4px auto 0; overflow: visible; }
.call .fl-link { fill: none; stroke: #8a7430; stroke-width: 1.4; marker-end: url(#cfc-arrow); }
.call .fl-loop { fill: none; stroke: #8a7430; stroke-width: 1.2; stroke-dasharray: 4 4; marker-end: url(#cfc-arrow); }
.call .fl-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: #8a7430; }
.call .fl-node rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.call .fl-node circle { fill: #f6efd8; stroke: #cfae52; stroke-width: 1; }
.call .fl-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; fill: #8a6a12; }
.call .fl-h { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; fill: var(--text); }
.call .fl-s { font-family: var(--font-sans); font-size: 11.5px; fill: var(--text-3); }
.call .fl-key rect { stroke: #cfae52; stroke-width: 1.4; }
.call .fl-pill rect { fill: var(--text); }
.call .fl-pill text { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; fill: #f2cc70; }
.call .fl-who rect { stroke-width: 1; }
.call .fl-who text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.call .fl-who .fl-ico { fill: none; stroke-width: 1.1; stroke-linecap: round; }
.call .fl-who .fl-ico .fl-eye { stroke: none; }
.call .fl-joint rect { fill: #f6efd8; stroke: #cfae52; }
.call .fl-joint text { fill: #8a6a12; }
.call .fl-joint .fl-ico { stroke: #8a6a12; }
.call .fl-joint .fl-ico .fl-eye { fill: #8a6a12; }
.call .fl-agent rect { fill: #ecebe4; stroke: #d3d0c6; }
.call .fl-agent text { fill: #5f6470; }
.call .fl-agent .fl-ico { stroke: #5f6470; }
.call .fl-agent .fl-ico .fl-eye { fill: #5f6470; }
@media (max-width: 860px) { .call { grid-template-columns: 1fr; } }

/* the partner band, as before, on the ivory ground */
.longform .band-block { padding: 8px 0 0; }
.longform .center-head { margin-bottom: clamp(20px, 2.6vw, 32px); }
.longform .center-head .h-lg { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.longform .partners-ack { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* ---------------- the question and the tree (dark, continues the hero) ---------------- */
.tree-band { background: #06090f; color: #fff; padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 72px); }
.tree-band .wrap-wide { max-width: 1380px; }
.tree-title { margin: 0 auto clamp(20px, 3vw, 40px); max-width: 30em; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.tree-note { margin: clamp(18px, 2.4vw, 32px) auto 0; max-width: 40em; text-align: center; font-family: var(--font-serif); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; color: rgba(244, 245, 248, 0.86); text-wrap: balance; }
.tree-band .rtree-wrap { margin: 0; }
.tree-band .rtree { display: block; width: 100%; height: auto; }
.rtree-wrap:not(.in) .rtree * { animation-play-state: paused !important; }
html.static .rtree-wrap .rtree * { animation-play-state: running !important; }

/* ---------------- tabs + task panels ---------------- */
.task-frame { width: min(var(--wide), 100%); margin: 18px auto 0; border: 0; background: none; border-radius: 0; padding: 0; box-shadow: none; }
.task-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
  width: max-content; max-width: 100%; margin: 0 auto 22px; padding: 0;
  border: 0; border-radius: 0; background: none;
}
.task-frame .tt { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted-2); background: none; border: 0; border-radius: 0; padding: 6px 0; cursor: pointer; white-space: nowrap; transition: color 0.2s ease; }
.task-frame .tt:hover { color: var(--text); border: 0; background: none; }
.task-frame .tt.on { color: var(--text); background: none; border: 0; }
.task-panel { display: none; }
.task-panel.on { display: block; }
.task-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.task-meta span + span::before { content: "·"; margin-right: 18px; }
/* Keep compute labels aligned and outside the mobile body-copy font rule. */
#signature-frame .task-meta, #one-node-frame .task-meta { align-items: center; font-size: 12px; }
#signature-frame .task-meta span:last-child, #one-node-frame .task-meta > .task-resource { background: var(--text); color: #fff; padding: 5px 10px; white-space: nowrap; }
#signature-frame .task-meta span:last-child::before { content: none; }
.task-tags { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; }
.tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.tag + .tag::before { content: "·"; margin-right: 8px; }
.task-frame .task-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 18px; }
.task-frame .task-tags .tag { width: auto; height: auto; border: 0; background: none; padding: 0; }
.task-media.one { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; }
.task-frame .task-fig {
  margin: 0; min-width: 0; position: static; overflow: visible;
  border: 1px solid var(--line); border-radius: 0; background: var(--bg);
  padding: 24px 24px 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.task-fig.wide { grid-column: 1 / -1; }
.task-frame .fig-body { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: auto; padding: 0; }
.task-frame .fig-body > * { width: 100%; }
.task-frame .fig-body svg { display: block; width: 100%; height: auto; max-height: none; }
.task-frame .fig-body img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; }
.task-frame .fig-body.fig-table { overflow-x: auto; padding: 0; }
.task-frame .task-fig .fig-cap { display: block; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-3); text-align: center; text-wrap: pretty; }
.task-frame .task-fig .fig-cap b { font-weight: 500; color: var(--text); }
.task-frame .task-fig .fig-cap a { color: var(--text); text-decoration: underline; }
.chart-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; margin-left: 6px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.legend-solid { width: 16px; height: 2px; background: var(--blue); }
.chart-axis-note { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.climb-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 16px 0 10px; font-family: var(--font-sans); font-size: 13px; }
.climb-switch > span { margin-right: 6px; color: var(--text-3); }
.climb-switch button { border: 1px solid var(--line); background: transparent; color: var(--text); padding: 7px 12px; font: inherit; cursor: pointer; }
.climb-switch button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.climb-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.climb-switch[hidden], .climb-view[hidden] { display: none; }
.climb-view .task-fig { margin-top: 0; }
.legend-baseline { width: 16px; height: 0; border-top: 1px dashed var(--text-2); }
.baseline-note { color: var(--text-3); }
.task-frame .task-soon { margin: clamp(48px, 6vw, 96px) auto; text-align: center; font-family: var(--font-serif); font-size: clamp(22px, 2.2vw, 28px); color: var(--text-3); }
.task-frame .task-card { width: min(var(--col), 100%); margin: 26px auto 0; border-top: 0; padding-top: 0; }
.task-frame .tc-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.task-frame .task-card h3, .task-frame .task-card .h-md { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0 0 12px; }
.task-frame .tc-body, .task-frame .tc-target { margin: 0 0 14px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.55; color: var(--text); }
.task-frame .tc-body b, .task-frame .tc-target b { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; margin: 0; font-weight: 600; }
.task-frame .tc-link { display: inline-block; margin: 8px 20px 0 0; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(20, 20, 19, 0.4); padding-bottom: 2px; }
.task-frame .tc-link:hover { border-color: currentColor; }
.task-frame .tc-runs { list-style: none; margin: 16px 0 6px; padding: 0; border-top: 1px solid var(--text); }
.task-frame .tc-runs li { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.task-frame .tc-runs .rr-mk { font-size: 14px; text-align: left; }
.task-frame .tc-runs .rr-model { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--text); }
.task-frame .tc-runs .rr-model i { display: block; font-style: normal; color: var(--text-3); font-size: 12.5px; font-family: var(--font-mono); margin-top: 2px; }
.task-frame .tc-runs .rr-best { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--text); text-align: right; }
.task-frame .tc-runs .rr-meta { grid-column: 2 / -1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--text-3); }
.run-readout { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 4px 6px; }
.run-readout .rr-k { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.rr-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rr-row b { font-family: var(--font-mono); font-weight: 500; }
.rr-none { color: var(--text-3); font-weight: 400; }
.rr-note { margin: 0; font-size: 13px; color: var(--text-3); }

/* tables */
table.ladder, table.tbl, table.data, table.runs, table.subs {
  width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; color: var(--text);
}
table.ladder th, table.tbl th, table.data th, table.runs th, table.subs th {
  font-weight: 600; text-align: left; color: var(--text); letter-spacing: 0; text-transform: none; font-size: 14px;
  padding: 10px 12px; border-bottom: 1px solid var(--text); box-shadow: inset 0 2px 0 var(--sage-ink); white-space: nowrap;
}
table.ladder td, table.tbl td, table.data td, table.runs td, table.subs td { padding: 10px 12px; border-bottom: 1px solid var(--text); vertical-align: top; }
table.ladder { font-size: 13.5px; }
table.ladder th, table.ladder td { padding: 8px 8px; white-space: nowrap; }
table.ladder th:first-child, table.ladder td:first-child { padding-left: 0; }
table.ladder th:last-child, table.ladder td:last-child { padding-right: 0; }
table .r, table th.r, table td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.ladder td.rung { font-weight: 600; color: var(--text) !important; }
table td.rung { color: var(--text); }
.table-scroll, .scroll { overflow-x: auto; }

/* ---------------- the trajectory figures ---------------- */
.traj { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.traj .gl { stroke: var(--line-2); stroke-width: 1; }
.traj .ax { stroke: #cfcbc1; stroke-width: 1; }
.traj .tk { fill: var(--text-3); font-size: 10px; letter-spacing: 0.08em; }
.traj .axlbl { fill: var(--text-3); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.traj .run { fill: var(--text-2); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.traj .base { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0; }
.traj .best-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.traj .stem { stroke: #c9c5ba; stroke-width: 1.4; transform-origin: center bottom; }
.traj .stem.dead { stroke: #e6e3da; }
.traj .dot { fill: var(--text-2); }
.traj .peak { fill: var(--blue); }
.traj .halo { fill: var(--blue); opacity: 0.14; }
.traj .zero line { stroke: #c9c5ba; stroke-width: 1.3; stroke-linecap: round; }
.traj .baselbl { fill: var(--text); font-size: 10px; letter-spacing: 0.1em; opacity: 0; paint-order: stroke; stroke: var(--panel); stroke-width: 3.2px; stroke-linejoin: round; }
.traj .axis-break { fill: none; stroke: #8b877c; stroke-width: 1.4; stroke-linecap: round; }
.traj .peaklbl { fill: var(--accent-deep); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; paint-order: stroke; stroke: var(--panel); stroke-width: 3.6px; stroke-linejoin: round; }
.traj[data-x-axis="time"] .peaklbl { opacity: 0; }
.traj.sig .tk, .traj.sig .peaklbl { font-size: 10.5px; }
.traj.multi .base { stroke: #8b877c; stroke-dasharray: 5 4; }
.traj.evo .lbl { font-size: 10.5px; letter-spacing: 0.04em; }
.traj.evo .note { font-size: 9.5px; letter-spacing: 0.02em; fill: var(--text-3); }
.traj.evo .glyph { font-weight: 700; }
.traj.evo .bar { transform-box: fill-box; transform-origin: left center; }
.traj.evo .head { stroke: var(--blue); stroke-width: 1.2; opacity: 0; }
.traj.best .note { font-size: 9.5px; fill: var(--text-3); }
.traj.best .glyph { font-weight: 700; }
.traj.ref, .traj.ref text { font-family: var(--font-sans); }
.traj.ref .ttl { font-size: 18px; font-weight: 600; fill: var(--text); letter-spacing: -0.01em; }
.traj.ref .sub { font-size: 11.5px; fill: var(--text-3); }
.traj.ref .tk { font-size: 11px; fill: var(--text-3); letter-spacing: 0; }
.traj.ref .axl { font-size: 12px; fill: var(--text-2); }
.traj.ref .gl { stroke: var(--line-2); }
.traj.ref .ax { stroke: #cfcbc1; }
.traj.ref .ann { font-size: 11.5px; fill: var(--text); letter-spacing: 0; }
.traj.ref .lead { stroke: var(--text-2); stroke-width: 0.9; }
.traj.ref .lg { font-size: 12px; fill: var(--text); }
.traj.ref .lgbox { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.traj .mk, .traj .peak, .traj .halo, .traj .dot { transform-box: fill-box; transform-origin: center; }
.task-panel.on .traj .base,
.task-panel.on .traj .baselbl { animation: tr-fade 0.7s ease-out 0.15s forwards; }
.task-panel.on .traj .stem { animation: tr-grow 0.5s var(--ease) var(--d) both; }
.task-panel.on .traj .mk { animation: tr-pop 0.45s var(--ease) var(--d) both; }
.task-panel.on .traj .peaklbl { animation: tr-fade 0.5s ease-out calc(var(--d) + 0.18s) both; }
.task-panel.on .traj .best-line { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: tr-draw 2.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards; }
.task-panel.on .traj.evo .lbl,
.task-panel.on .traj.evo .note { opacity: 0; animation: tr-fade 0.4s ease-out var(--d) forwards; }
.task-panel.on .traj.evo .bar { animation: tr-growx 0.6s var(--ease) var(--d) both; }
.task-panel.on .traj.evo .head { animation: tr-sweep 5.7s linear 0.3s forwards; }
.task-panel.on .traj.ref .lead { opacity: 0; animation: tr-fade 0.4s ease-out var(--d) forwards; }
@keyframes tr-fade { to { opacity: 1; } }
@keyframes tr-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes tr-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tr-sweep { 0% { opacity: 0.9; transform: translateX(0); } 98% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(var(--sweep, 880px)); } }
html.static .traj *, html.shot .traj * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
html.static .traj .stem, html.static .traj .mk, html.static .traj .dot, html.static .traj .peak, html.static .traj .halo, html.static .traj .bar,
html.shot .traj .stem, html.shot .traj .mk, html.shot .traj .dot, html.shot .traj .peak, html.shot .traj .halo, html.shot .traj .bar { transform: none !important; }

/* ---------------- footer ---------------- */
footer.site { margin-top: 72px; border-top: 1px solid var(--line); padding: 48px var(--gutter) 32px; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.footer-cols { display: contents; }
.footer-brand .wm { font-family: var(--font-serif); font-size: 20px; }
.footer-brand .dex { color: var(--text-2); }
.footer-line { margin: 10px 0 0; font-size: 14px; color: var(--text-3); max-width: 34em; }
footer.site h4 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--text-3); }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin: 6px 0; font-size: 14px; }
footer.site a { color: var(--text-2); text-decoration: none; }
footer.site a:hover { color: var(--text); }
.footer-base { max-width: var(--max); margin: 32px auto 0; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* ---------------- inner pages: the legacy sheet, re-tinted ---------------- */
body:not(.home) { padding-top: 64px; }
.nav { border-bottom: 0; background: transparent; }
.nav.scrolled { background: rgba(250, 249, 245, 0.85); }
.nav.over-dark.scrolled { background: rgba(0, 0, 0, 0.35); }
.pagehead h1, .pagehead .h-lg, .pagehead .vibe-tag, .pagehead .lede { text-shadow: none !important; filter: none !important; }
section.block h2 em, .h-lg em, .h-md em, section.block h1 em { color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; }
.nav-inner { height: 64px; justify-content: flex-start; }
.brand { font-family: var(--font-sans); }
.nav .nav-links { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; text-transform: none; gap: 4px; }
.nav .nav-links a { background: none; padding: 8px 12px; color: inherit; }
.nav .nav-links a.ext::after { content: none; }
.ph-frame, .field-scrim, .benchmark-wash, .ground-rise, .hero-field::after, .pagehead::after, .vibe-rule { display: none !important; }
.eyebrow::before, .section-head .eyebrow::before { display: none; }
.eyebrow { padding-left: 0; }
section.block, section.block.tinted, section.block::before, section.block + section.block::before, .lb, .pagehead, .hero-field { background: transparent !important; box-shadow: none; }
section.block + section.block::before { display: none; }
section.block + section.block { border-top: 1px solid var(--line-2); }
.pagehead { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 48px); }
.pagehead h1, .pagehead .h-lg { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 18px; color: var(--text) !important; text-wrap: balance; max-width: 18ch; }
.pagehead h1.vibe-h1 em { color: var(--text); }
.pagehead .lede, .pagehead p { font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--text-2) !important; max-width: 36em; margin: 0; }
.pagehead .eyebrow, .pagehead p.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-3) !important; max-width: none; }
.pagehead .eyebrow a { color: var(--text-3); }
.vibe-tag, .joy-line { background: none !important; -webkit-text-fill-color: inherit !important; color: var(--text-2) !important; font-weight: 400; font-family: var(--font-serif); }
.joy-chips { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.joy-chips .jc { background: none; border: 0; padding: 0; border-radius: 0; color: inherit; box-shadow: none; }
.filterbar, .lb-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.filterbar .chip, .lb-filter .chip { font-family: var(--font-sans); font-size: 14px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; }
.filterbar .chip:hover, .lb-filter .chip:hover { color: var(--text); border: 0; }
.filterbar .chip.active, .lb-filter .chip.active { background: var(--text); color: #fff; border: 0; }
.tcard { background: var(--panel); border-radius: 16px; }
.tcard:hover { transform: none; border-color: var(--text-3); }
.tcard.sig, .tcard.sig:hover { border-top: 1px solid var(--line); }
.tcard .sigtag { color: var(--text-2); font-weight: 500; }
section.block h2, .h-lg, .h-md { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
section.block h2 em, .h-lg em { color: var(--text); font-style: italic; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* boxes on the inner pages: square, ruled in ink, on the page ground */
.tcard, .scorebox, .article .fig-frame, .article .task-fig, .task-fig, .agent-note, .run-figs figure, .lb .tcard, .post-card, .post-list article {
  border-radius: 0 !important; border-color: var(--text) !important; background: var(--bg) !important; box-shadow: none !important;
}
.tcard:hover { transform: none; border-color: var(--text); }
.article .fig-frame.fig-dark { background: var(--field) !important; }
.filterbar, .lb-filter { border: 0 !important; padding: 0; gap: 6px 28px; background: none !important; border-radius: 0; }
.filterbar .chip, .lb-filter .chip { font-family: var(--font-sans); font-size: 15px; font-weight: 600; padding: 6px 0; border: 0; border-radius: 0; background: none; color: var(--muted-2); }
.filterbar .chip:hover, .lb-filter .chip:hover { color: var(--text); border: 0; }
.filterbar .chip.active, .lb-filter .chip.active { background: none; color: var(--text); border: 0; }
.tag, .chip, .pill, .article .tag { border-radius: 0; }

/* the announcement post and task pages read like the home column */
article.article { max-width: 760px; margin-left: auto; margin-right: auto; }
.article h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -0.015em; }
.article h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
.article h3 { font-family: var(--font-serif); font-weight: 500; }
.article > p, .article .lede, .article > ul > li, .article > ol > li, .article section > p, .article section > ul > li { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.55; color: var(--text); }
.article .lede { border-left: 3px solid var(--text); font-size: clamp(20px, 2vw, 24px); line-height: 1.35; }
.article .tag, .article .chip, .article .pill { background: none; border: 1px solid var(--line); color: var(--text-3); }
.step-item::before { background: var(--text) !important; color: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
.step-item::after { background: var(--line) !important; }
.step-item h3 { font-family: var(--font-serif); font-weight: 500; font-size: 21px; }
.step-item h3::before { display: none !important; }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .task-frame .task-media { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-toggle { display: inline-flex; margin-left: auto; background: none; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: inherit; cursor: pointer; opacity: 0.8; }
  .nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 16px 18px; background: rgba(243, 241, 234, 0.96); color: var(--text); border-bottom: 1px solid var(--line); }
  .nav.over-dark .nav-links { background: rgba(6, 9, 15, 0.94); color: #fff; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 8px; font-size: 16px; }
  .hero { padding-top: 64px; }
  .hero-labels { top: 38%; }
  .hero h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.05; }
  .hero-foot { gap: 16px; }
  .toc { font-size: 15px; }
  .replay { bottom: 14px; right: 14px; }
  .sec { padding-top: 56px; }
  .sec.lead h2 { font-size: 32px; }
  .sec p { font-size: 17.5px; }
  .task-tabs { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 16px; }
  .task-tabs::-webkit-scrollbar { display: none; }
  .task-fig { padding: 16px 14px 14px; border-radius: 14px; }
  .qs li { font-size: 18px; }
  .sec .thesis-grid { grid-template-columns: 1fr; }
  .sec .thesis-head { position: static; }
  .chain-row { grid-template-columns: 1fr; gap: 6px; }
  .chain-arrow { transform: rotate(90deg); }
  /* the research tree is drawn at a legible size and scrolls sideways */
  body.home.skypage .tree-band .rtree-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, 0.25) 100%);
            mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, 0.25) 100%);
  }
  body.home.skypage .tree-band .rtree { width: 1020px; max-width: none; }
  body.home.skypage .tree-band { padding-bottom: clamp(24px, 4vw, 40px); }
}

/* ---------------- motion preferences ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hl .ch, .hero-foot > *, .hero-labels .hero-kicker, .hero .sky { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .traj * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .traj .stem, .traj .mk, .traj .dot, .traj .peak, .traj .halo, .traj .bar { transform: none !important; }
}
html.static .hl .ch, html.static .hero-foot > *, html.static .hero-labels .hero-kicker, html.static .hero .sky { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }

/* =====================================================================
   the two calls, the way the task cards went: no card, no border, no
   shadow. The title sits large and centred, the copy is set in the
   article's serif on the ivory ground, and the flow figure keeps a
   soft panel like any other figure on the page.
   ===================================================================== */
#contribute.block, #compute.block {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: clamp(64px, 8vw, 112px) calc(50vw - 50%) clamp(56px, 7vw, 96px);
}
#contribute.block { background: linear-gradient(180deg, #f4f1ea 0%, #ece8dd 100%) !important; }
#compute.block { background: linear-gradient(180deg, #e6eaf1 0%, #dde3ec 100%) !important; }
.longform #contribute.block + #compute.block::before { display: none; }
#contribute .wrap.wrap-wide, #compute .wrap.wrap-wide { max-width: none; width: min(var(--wide), 100%); padding: 0; }

/* the thesis (introduction + design principle) on the same parchment band as the contributors;
   the task samples and the partnership stay on the page ground between them */
#intro.sec, #principles.sec {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
#intro.sec { background: linear-gradient(180deg, #f4f1ea 0%, #f0ece3 100%); padding-bottom: clamp(16px, 2vw, 28px); }
#principles.sec { background: linear-gradient(180deg, #f0ece3 0%, #ece8dd 100%); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(64px, 8vw, 112px); }
/* the lightweight samples on the same band, between the signature samples and the partnership on the page ground */
#lightweight.sec {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
  padding-bottom: clamp(64px, 8vw, 112px);
  background: linear-gradient(180deg, #f4f1ea 0%, #ece8dd 100%);
}

/* ---- Call for Contributors ---- */
#contribute .cfc-title {
  display: block; max-width: 22ch; margin: 0 auto clamp(28px, 3.5vw, 48px); text-align: center;
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--text); text-wrap: balance;
}
#contribute .cfc-shell {
  --bg: #faf9f5; --text: #191917; --muted: #4a4a45; --line: #dcd8ce; --panel: #faf9f5; --gold: #8a6a12; --gold-light: #8a6a12; --gold-border: transparent; --blue: #3b7cf0;
  min-height: 0; width: min(var(--wide), 100%); margin: 0 auto; padding: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text);
}
#contribute .cfc-left { justify-content: flex-start; }
#contribute .cfc-questions { margin-top: 0; border-top: 1px solid var(--text); }
#contribute .cfc-question { min-height: 0; grid-template-columns: minmax(0, 1fr) 16px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
#contribute .cfc-question-icon { display: none; }
#contribute .cfc-question-icon { width: 36px; height: 36px; color: var(--text-2); border: 1px solid var(--line); background: var(--panel); }
#contribute .cfc-question-icon svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; }
#contribute .cfc-question p { font-family: var(--font-serif); font-size: 21px; line-height: 1.35; letter-spacing: 0; color: var(--text); text-wrap: pretty; }
#contribute .cfc-question strong { color: var(--text); font-weight: 600; }
#contribute .cfc-chevron { color: var(--text-3); font-size: 22px; font-weight: 300; }
#contribute .cfc-hour { margin-top: 26px; min-height: 0; }
#contribute .cfc-hour-number { gap: 8px; }
#contribute .cfc-hour-number .num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1; letter-spacing: -0.01em; color: var(--text); }
#contribute .cfc-hour-number .unit { font-family: var(--font-serif); font-style: normal; font-size: clamp(26px, 2.4vw, 32px); line-height: 1; color: var(--text-2); }
#contribute .cfc-hour-divider { height: 36px; margin: 0 22px; background: var(--line); }
#contribute .cfc-hour-copy { font-family: var(--font-serif); font-size: 21px; line-height: 1.4; font-weight: 400; color: var(--text); }
#contribute .cfc-hour-copy .cfc-brand-word { font-style: normal; color: var(--text); }
#contribute .cfc-buttons { margin-top: 28px; }
#contribute .cfc-btn { min-height: 0; padding: 12px 18px; gap: 8px; border-radius: 8px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; transition: background 0.2s ease; }
#contribute .cfc-btn:hover { transform: none; }
#contribute .cfc-btn-primary { color: #fff; border: 0; background: var(--text); box-shadow: none; }
#contribute .cfc-btn-primary:hover { background: #000; }
#contribute .cfc-contact { margin: 18px 0 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--text-3); }
#contribute .cfc-contact a { font-family: var(--font-mono); font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(25, 25, 23, 0.3); }
#contribute .cfc-contact a:hover { color: var(--text); border-bottom-color: currentColor; }

/* the flow figure: a tinted plate, one ink spine, four numbered stations, one sage highlight */
#contribute .cfc-flow {
  --hl: #d7e3fa; --hl-2: #e8eefb;
  padding: 30px 26px 22px; border: 1px solid var(--text); border-radius: 0; background: var(--panel); box-shadow: none;
}
#contribute .cfc-flow-head { margin: 0 0 26px; }
#contribute .cfc-flow-slogan { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 26px); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; max-width: 26ch; }
#contribute .cfc-flow-slogan .cfc-brand-word { font-style: normal; color: var(--text); }
#contribute .cfc-flow-desc { margin: 12px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 52ch; }
#contribute .cfc-flow-svg { max-width: 470px; margin: 0 auto; font-family: var(--font-sans); overflow: visible; }
#contribute .fl-spine { stroke: var(--text); stroke-width: 1; stroke-opacity: 0.55; stroke-dasharray: 440; stroke-dashoffset: 440; }
#contribute .fl-step-arrow { fill: none; stroke: none; marker-end: url(#cfc-arrow); }
#contribute .fl-loop { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; marker-end: url(#cfc-arrow-soft); }
#contribute .fl-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--text-3); }
#contribute .fl-node circle { fill: #fff; stroke: var(--text); stroke-width: 1; }
#contribute .fl-n { font-family: var(--font-serif); font-size: 18px; font-weight: 500; fill: var(--text); }
#contribute .fl-h { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; fill: var(--text); }
#contribute .fl-s { font-family: var(--font-sans); font-size: 11.5px; fill: var(--text-3); }
#contribute .fl-key circle { fill: var(--hl); }
#contribute .fl-who rect { stroke-width: 1; }
#contribute .fl-who text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; }
#contribute .fl-joint rect { fill: var(--hl-2); stroke: rgba(25, 25, 23, 0.45); }
#contribute .fl-joint text { fill: var(--text); }
#contribute .fl-agent rect { fill: #fff; stroke: rgba(25, 25, 23, 0.25); }
#contribute .fl-agent text { fill: var(--text-2); }
#contribute .fl-pill rect { fill: var(--hl); stroke: var(--text); stroke-width: 1; }
#contribute .fl-pill text { font-family: var(--font-serif); font-size: 16.5px; font-weight: 500; fill: var(--text); }
#contribute .cfc-flow-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--text-3); text-align: center; text-wrap: pretty; }
/* the figure draws itself the first time it is seen: the spine first, then the stations in order */
#contribute .cfc-flow .fl-node, #contribute .cfc-flow .fl-pill { opacity: 0; transform: translateY(6px); }
#contribute .cfc-flow .fl-loop, #contribute .cfc-flow .fl-tag, #contribute .cfc-flow .fl-step-arrow { opacity: 0; }
#contribute .cfc-flow.in .fl-spine { animation: fl-draw 1.1s var(--ease) forwards; }
#contribute .cfc-flow.in .fl-node, #contribute .cfc-flow.in .fl-pill { animation: fade-up 0.6s var(--ease) forwards; animation-delay: calc(0.25s + 0.18s * var(--i, 0)); }
#contribute .cfc-flow.in .fl-loop, #contribute .cfc-flow.in .fl-tag, #contribute .cfc-flow.in .fl-step-arrow { animation: fl-fade 0.5s ease forwards 1.1s; }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
@keyframes fl-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #contribute .cfc-flow .fl-node, #contribute .cfc-flow .fl-pill, #contribute .cfc-flow .fl-loop, #contribute .cfc-flow .fl-tag, #contribute .cfc-flow .fl-step-arrow { opacity: 1; transform: none; animation: none; }
  #contribute .cfc-flow .fl-spine { stroke-dashoffset: 0; animation: none; }
}
html.static #contribute .cfc-flow .fl-node, html.static #contribute .cfc-flow .fl-pill, html.static #contribute .cfc-flow .fl-loop, html.static #contribute .cfc-flow .fl-tag, html.static #contribute .cfc-flow .fl-step-arrow { opacity: 1; transform: none; animation: none; }
html.static #contribute .cfc-flow .fl-spine { stroke-dashoffset: 0; animation: none; }

/* ---- Call for compute ---- */
#compute .center-head { margin-bottom: clamp(24px, 3vw, 40px); }
#compute .center-head .h-lg { max-width: 22ch; margin: 0 auto; text-align: center; color: var(--text); }
#compute .pcard.light.solo { width: min(760px, 100%); margin: 0 auto; padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px); border: 1px solid var(--text); border-radius: 0 !important; background: var(--panel); box-shadow: none; }
#compute .pcard.solo .solo-main { gap: 12px; }
#compute .pcard .pc-wordmark { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0 0 4px; }
#compute .pcard.light.solo .pc-wordmark em { font-style: italic; color: var(--text); background: none; -webkit-text-fill-color: inherit; }
#compute .pcard.solo p { max-width: none; margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
#compute .solo-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 14px; }
#compute .solo-contact a { padding: 0 0 1px; border: 0; border-bottom: 1px solid rgba(25, 25, 23, 0.3); border-radius: 0; background: none; font-family: var(--font-mono); font-size: 13px; color: var(--text); text-decoration: none; }
#compute .solo-contact a:hover { border-bottom-color: currentColor; background: none; }

/* Phones: style.css gives a non-wide chart a fixed 480px width so its labels stay
   readable and the figure swipes sideways. This column flexbox centres its child, so
   the overflow lands on BOTH edges and the left half can never be scrolled to. Start
   the chart at the left edge instead, and let the caption keep the full width. */
@media (max-width: 560px) {
  .task-frame .task-fig:not(.wide) .fig-body:has(> svg) { align-items: flex-start; }
}

@media (max-width: 860px) {
  #contribute .cfc-shell { grid-template-columns: 1fr; gap: 32px; padding: 0; }
  #contribute .cfc-question { grid-template-columns: minmax(0, 1fr) 14px; gap: 12px; padding: 14px 0; }
  #contribute .cfc-question p { font-size: 18px; }
  #contribute .cfc-hour { align-items: center; }
  #contribute .cfc-hour-number .num, #contribute .cfc-hour-number .unit { font-size: 24px; }
  #contribute .cfc-hour-divider { height: 30px; margin: 0 16px; }
  #contribute .cfc-hour-copy { font-size: 18px; }
  #contribute .cfc-flow { padding: 18px 16px 16px; border-radius: 0; }
}

/* ---------------- the home below the hero and the tree: the sky pages' column ----------------
   The hero keeps its own inline sky; the fixed field (assets/sky-pages.js) runs behind the
   rest, and everything after the tree sits in the same dim-paper column the other pages use. */
body.home.skypage { --wide: var(--max); }
body.home.skypage .sky-rest { position: relative; z-index: 1; }
body.home.skypage .sky-rest .sky-ground { top: 0; }
body.home.skypage .sky-rest > :not(.sky-ground) { position: relative; z-index: 1; }
body.home.skypage .longform { padding-top: var(--fade); }
body.home.skypage .tree-band { position: relative; z-index: 1; }
body.home.skypage footer.site { background: transparent; }
body.home.skypage .longform, body.home.skypage .sec, body.home.skypage section.block,
body.home.skypage #contribute, body.home.skypage #compute, body.home.skypage .band-block { background: transparent !important; }
/* the compute call: black card, white type */
body.home.skypage #compute .pcard.light.solo { background: #06090f !important; border-color: #06090f !important; color: #fff; }
body.home.skypage #compute .pcard .pc-wordmark, body.home.skypage #compute .pcard.light.solo .pc-wordmark em { color: #fff; }
body.home.skypage #compute .pcard.solo p { color: rgba(255, 255, 255, 0.85); }
body.home.skypage #compute .solo-contact a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
body.home.skypage #compute .solo-contact a:hover { border-bottom-color: #fff; }
body.home.skypage .sec::before, body.home.skypage .sec::after, body.home.skypage section.block::before, body.home.skypage section.block::after { display: none; }

/* the research tree floats on the sky itself: no slab under it, a shadow from the hero's
   hills fading upward into the field, the branches lit a little like the trails */
body.home.skypage .tree-band { background: transparent; padding: clamp(24px, 3vw, 44px) 0 clamp(40px, 5vw, 72px); }
body.home.skypage .tree-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #020306 0%, rgba(2, 3, 6, 0.6) 40%, rgba(2, 3, 6, 0) 100%); }
body.home.skypage .tree-band > .wrap { position: relative; z-index: 1; }
body.home.skypage .tree-band .wrap-wide { max-width: 1240px; }
body.home.skypage .tree-title { text-shadow: 0 0 28px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7); }
body.home.skypage .tree-note { text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7); }
.tree-title em.gold { font-style: normal; color: #f2cc70; }
body.home.skypage .tree-band .rtree-wrap { margin: 0 auto; }
body.home.skypage .tree-band .rt-edge { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.22)); }
body.home.skypage .tree-band .rt-edge.more, body.home.skypage .tree-band .rt-more { opacity: 0.6; }
body.home.skypage .tree-band .rt-node, body.home.skypage .tree-band .rt-leaf, body.home.skypage .tree-band .rt-ring { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.22)); }
body.home.skypage .tree-band .rt-name, body.home.skypage .tree-band .rt-leafname, body.home.skypage .tree-band .rt-root { text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
body.home.skypage .tree-band .rtree text { font-family: var(--font-sans); }
body.home.skypage .tree-band .rt-root { font-family: var(--font-serif); font-size: 31px; font-weight: 500; letter-spacing: -0.01em; fill: #fff; }
body.home.skypage .tree-band .rt-name { font-size: 26px; font-weight: 500; fill: #fff; }
body.home.skypage .tree-band .rt-leafname { font-size: 22px; font-weight: 500; fill: #fff; }
body.home.skypage .tree-band .rt-sub { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.03em; fill: rgba(244, 245, 248, 0.9); }
body.home.skypage .tree-band .rt-budget { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; font-weight: 500; fill: #fff; }
body.home.skypage .tree-band .rt-chart { transform: translateX(30px); }
body.home.skypage .tree-band .rt-budget.big { font-size: 20px; letter-spacing: 0.02em; font-weight: 700; fill: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.35), 0 0 10px rgba(0, 0, 0, 0.9); }
body.home.skypage .tree-band .rt-col { font-family: var(--font-mono); font-size: 13px; fill: rgba(244, 245, 248, 0.85); }
body.home.skypage .tree-band .rt-edge { stroke-width: 1.4; stroke-opacity: 0.95; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2)); }
body.home.skypage .tree-band .rt-edge.stem { stroke: #b9c9e6; stroke-opacity: 0.6; }
body.home.skypage .tree-band .rt-edge.more { stroke: #b9c9e6; stroke-opacity: 0.45; stroke-width: 1.2; }
body.home.skypage .tree-band .rt-more circle { fill: #b9c9e6; fill-opacity: 0.7; }
body.home.skypage .tree-band .rt-node, body.home.skypage .tree-band .rt-leaf { fill: #06090f; stroke-width: 1.4; filter: none; }
body.home.skypage .tree-band .rt-ring { fill: rgba(6, 9, 15, 0.8); stroke: #b9c9e6; stroke-width: 1.2; filter: none; }
body.home.skypage .tree-band .rt-tr-node { fill: #b9c9e6; fill-opacity: 0.5; }
body.home.skypage .tree-band .rt-tr-edge { stroke: #b9c9e6; stroke-opacity: 0.25; }
body.home.skypage .tree-band .rt-lp-base { stroke: rgba(255, 255, 255, 0.25); }

/* the sections sit flush with the column and alternate two shades of the paper */
body.home.skypage .longform { max-width: none; padding: var(--fade) 0 0; }
body.home.skypage .sec, body.home.skypage section.block { width: 100%; margin-left: auto !important; margin-right: auto !important; padding-left: calc(max(0px, (100% - var(--band)) / 2) + clamp(20px, 3.4vw, 52px)) !important; padding-right: calc(max(0px, (100% - var(--band)) / 2) + clamp(20px, 3.4vw, 52px)) !important; }
body.home.skypage .task-frame .task-tabs { margin-left: auto !important; margin-right: auto !important; }
/* the paper alternates light / deep down the page, and two sections carry a pale wash instead:
   intro (paper) · mission (sage) · principles (paper) · partners (deep) · advisors (blue-grey)
   · signature (paper) · lightweight (deep) · contribute (paper) · compute (deep) */
body.home.skypage #partners.sec { background: #ece6d8 !important; }      /* warm sand */
body.home.skypage #advisors.sec { background: #dbe6f0 !important; }      /* sky blue-grey */
body.home.skypage #signature-tasks.sec { background: #f1eee6 !important; } /* bright paper */
body.home.skypage #lightweight.sec { background: #e2e8d4 !important; }   /* sage */
body.home.skypage #contribute.block { background: #f1eee6 !important; }  /* bright paper */
body.home.skypage #compute.block { background: #e6e1d3 !important; }     /* deeper sand */
body.home.skypage #intro.sec { padding-bottom: clamp(48px, 6vw, 88px); }
body.home.skypage #principles.sec { padding-top: clamp(48px, 6vw, 88px); }

/* ---------------- advisors: six portraits a row, names and affiliations beneath ---------------- */
.advisors { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wide); display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 28px; }
.advisors li { margin: 0; width: calc((100% - 4 * 28px) / 5); }
.advisors a { display: block; text-decoration: none; color: var(--text); }
.advisors img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 0; background: var(--bg-2); filter: none; }
.advisors span { display: block; margin-top: 12px; font-family: var(--font-serif); font-size: 17px; line-height: 1.3; text-align: center; text-wrap: balance; }
.advisors small { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--text-3); text-wrap: balance; }
.advisors a:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .advisors { gap: 32px 20px; } .advisors li { width: calc((100% - 3 * 20px) / 4); } }
@media (max-width: 520px) { .advisors { gap: 26px 16px; } .advisors li { width: calc((100% - 16px) / 2); } .advisors span { font-size: 16px; } }
.sec-title .paren { font-size: 0.42em; font-family: var(--font-sans); font-weight: 400; color: var(--text-3); letter-spacing: 0; margin-left: 0.4em; vertical-align: middle; }
/* the advisors section is kept in the page but hidden for now */
#advisors[hidden] { display: none !important; }

/* ---------------- team page: one ruled table, group rows and four columns of names ---------------- */
.team-sec { padding-top: clamp(28px, 3.5vw, 44px); }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-right: 0; background: var(--bg); }
.people .group { grid-column: 1 / -1; margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: 14.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.people .group span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.people .cell { min-width: 0; padding: 18px 18px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-family: var(--font-sans); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.people .cell a { color: inherit; text-decoration: none; }
.people .cell a:hover { text-decoration: underline; text-underline-offset: 3px; }
.people .cell small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.people .cell.note { grid-column: 1 / -1; max-width: 62em; text-transform: none; letter-spacing: 0; font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 720px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .people .cell { font-size: 17px; padding: 14px 12px; } .people .cell.pad { display: none; } .people .group { font-size: 12.5px; padding: 12px; } }

/* home contacts: easy to spot */
#contribute .cfc-contact { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.9; color: var(--text); }
#contribute .cfc-contact a { display: inline-block; font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1.5px solid var(--text); }
#compute .solo-contact { gap: 12px 28px; margin-top: 22px; }
#compute .solo-contact a { font-size: 16.5px; font-weight: 500; border-bottom-width: 1.5px; }
body.home.skypage #compute .solo-contact a { color: #fff; border-bottom-color: #fff; }

/* ---------------- the hero's lower row: five jump tabs and one summary paragraph, on the sky ---------------- */
.hero-labels .hero-foot { pointer-events: auto; grid-row: auto; display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(14px, 2vw, 26px); padding: 0; }
.hero-labels { top: 54%; }
.hero .home-summary { max-width: 58em; padding: 18px 30px; background: rgba(6, 9, 15, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; text-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero .jump a { background: rgba(6, 9, 15, 0.62); border-color: rgba(255, 255, 255, 0.8); }
.hero-foot .jump { animation-delay: 2.1s; }
.hero-foot .home-summary { animation-delay: 2.4s; }
.hero .jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.hero .jump a { display: inline-block; padding: 11px 22px; border: 1px solid rgba(255, 255, 255, 0.55); font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: #fff; text-decoration: none; background: rgba(6, 9, 15, 0.35); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hero .jump a:hover { background: #fff; color: #06090f; border-color: #fff; }
.hero .jump a.hot { background: #f2cc70; border-color: #f2cc70; color: #06090f; font-weight: 600; }
.hero .jump a.hot:hover { background: #fff; border-color: #fff; }
.hero .home-summary { max-width: 64em; margin: 0; font-family: var(--font-serif); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; text-align: center; text-wrap: pretty; color: rgba(244, 245, 248, 0.9); text-shadow: 0 0 24px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7); }
@media (max-width: 720px) { .hero-labels { position: static; transform: none; padding: clamp(40px, 10vh, 80px) var(--gutter) 40px; align-self: center; } .hero .jump { gap: 8px; } .hero .jump a { padding: 9px 14px; font-size: 14.5px; } .hero .home-summary { text-align: left; font-size: 16px; } }
/* The hero already supplies the phone gutter; keep the copy wide and readable.
   Sentence groups stay inline on desktop, with breathing room only on phones. */
@media (max-width: 720px) {
  body.home .hero-labels { padding-inline: 0; }
  body.home .hero .home-summary { padding: 18px 16px; border-color: rgba(255, 255, 255, 0.09); line-height: 1.6; text-shadow: none; }
  body.home .hero .home-summary > span { display: block; }
  body.home .hero .home-summary > span + span { margin-top: 0.85em; }
}

/* ---------------- folded sample sections: only the title shows until it is clicked ---------------- */
.fold-sec { padding-bottom: clamp(40px, 5vw, 72px); }
.fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .sec-title { margin-bottom: 0; }
.fold .fold-list { margin: 0; max-width: 60em; font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.6; text-align: center; text-wrap: balance; color: var(--text-2); }
.fold[open] .fold-list { display: none; }
.fold > summary { gap: 10px; }
.fold .fold-hint { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.fold .fold-hint::before { content: "Expand ↓"; }
.fold[open] .fold-hint::before { content: "Collapse ↑"; }
.fold > summary:hover .fold-hint { color: var(--text); }
.fold[open] > summary { margin-bottom: clamp(28px, 3.5vw, 48px); }
.fold[open] > summary .sec-title-with-note { margin-bottom: 0; }

/* ---------------- partnership: the OpenRSI community card leads the row ---------------- */
.partners-wide .li-row-3 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); max-width: 1240px; }
.li-org { background: linear-gradient(100deg, #000000 0%, #06090f 38%, #2a2f36 70%, #5a6068 100%); }
.li-org .li-org-photo {
  display: block;
  inset: 50% auto auto 22px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: translateY(-50%);
  filter: invert(1);
  -webkit-mask-image: none;
          mask-image: none;
}
.li-org .li-org-name { max-width: calc(100% - 76px); margin-left: 76px; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.03em; white-space: nowrap; }
.li-org .li-org-name small { display: block; margin-top: 6px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; color: #fff; }
@media (max-width: 720px) { .partners-wide .li-row-3 { grid-template-columns: 1fr; } }
/* NUS is a crest alone, like Texas A&M: name it, in NUS blue */
.lg.lg-nus .lg-word { color: #003d7c; }

/* Lightweight tabs: balanced rows, both reachable by touch/drag on narrow screens. */
#lightweight .task-tabs {
  display: block; width: 100%; max-width: 100%; border-radius: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
#lightweight .task-tab-row {
  display: flex; gap: 6px 28px; width: max-content; margin: 0 auto;
}
#lightweight .task-tab-row + .task-tab-row { margin-top: 10px; }
@media (max-width: 900px) { #lightweight .task-tabs { cursor: grab; } }
#lightweight .task-tabs::-webkit-scrollbar { display: none; }
#lightweight .task-tabs.dragging { cursor: grabbing; user-select: none; }

/* ---------------- home contacts: boxed addresses that stand out ---------------- */
body.home.skypage #contribute .cfc-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-sans); font-size: 16px; color: var(--text-2); }
body.home.skypage #contribute .cfc-contact a, body.home.skypage #compute .solo-contact a { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--text); border-radius: 0; background: var(--panel); font-family: var(--font-mono); font-size: 15.5px; font-weight: 500; color: var(--text); text-decoration: none; transition: background 0.2s, color 0.2s; }
body.home.skypage #contribute .cfc-contact a:hover { background: var(--text); color: #fff; }
body.home.skypage #compute .solo-contact { gap: 12px 14px; margin-top: 24px; }
body.home.skypage #compute .solo-contact a { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
body.home.skypage #compute .solo-contact a:hover { background: #fff; color: #06090f; }

/* ---------------- one sky: stars and two mountain layers stay behind the scrolling copy.
   The paper below the tree covers the entire backdrop. ---------------- */
body.home.skypage .skybg { display: none; }
body.home.skypage .hero { overflow: visible; background: transparent; }
body.home.skypage .hero .sky-frame { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: 100svh; }
/* Narrow screens crop the massif; ultrawide screens extend its low shoulders.
   It starts below the viewport and enters as our gaze lowers toward the tree. */
body.home.skypage .home-mountains {
  position: absolute; z-index: 1; bottom: 0; left: 50%;
  display: block; width: max(100%, 180vh); width: max(100%, 180svh); max-width: none;
  height: 37vh; height: 37svh;
  transform: translate(-50%, calc((1 - var(--sky-view, 0)) * 102%));
  /* Composite the textured SVG as it travels instead of repainting its filters. */
  will-change: transform;
  pointer-events: none; user-select: none;
}
body.home.skypage .hero .sky { opacity: calc(1 - var(--hero) * 0.3); }
/* Perspective is handled by the 3D camera, not an additional CSS zoom. */
body.home.skypage .hero .sky[data-sky-journey] { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.home.skypage .home-mountains {
    transform: translateX(-50%); opacity: var(--sky-view, 0);
    /* Progress already fades the art; don't inherit the global 1ms transition. */
    transition: none !important;
    will-change: opacity;
  }
}
body.home.skypage .tree-band::before { display: none; }
body.home.skypage .tree-band { padding-bottom: 0; }
/* Leave breathing room below the research-tree note before the paper begins. */
body.home.skypage .tree-band .tree-note { margin-bottom: 160px; }
@media (max-width: 720px) {
  body.home.skypage .tree-band .tree-note { margin-bottom: clamp(76px, 9vh, 96px); margin-bottom: clamp(76px, 9svh, 96px); }
}
body.home.skypage .sky-ground::before { border-top: 0; }

/* ---------------- home lightweight charts: the baseline and the time axis read at a glance ---------------- */
#one-node-frame .traj .base { stroke-width: 1.8; stroke-dasharray: 7 4; }
#one-node-frame .traj .baselbl { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; stroke-width: 4px; }
#one-node-frame .traj .axlbl:not([transform]) { fill: var(--text-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; }
#one-node-frame .traj .tk[text-anchor="middle"] { fill: var(--text-2); font-size: 12.5px; letter-spacing: 0.04em; }

/* ===== Design ideas, batch 2 (Stella) =====
   Dotted star trails and the pole mark live in startrail3d.js. Here: the hero
   readouts in dots, the ∇ section rail, a dotted contribution loop, a calmer
   title entrance and a static partner grid. */

/* hero readouts: numbers drawn as dots, the same material as the trails */
.hero-readouts { display: flex; justify-content: center; gap: clamp(28px, 4vw, 56px); margin: clamp(14px, 2vh, 22px) 0 0; padding: 0; }
.hero-readouts > div { display: grid; justify-items: center; gap: 8px; }
.hero-readouts dd { margin: 0; display: grid; justify-items: center; gap: 8px; }
.hero-readouts .ro-dots { height: 30px; width: auto; }
.hero-readouts .ro-dots circle { fill: #ecebe6; }
.hero-readouts span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 235, 230, 0.72); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) { .hero-readouts { gap: 18px; flex-wrap: wrap; } .hero-readouts .ro-dots { height: 22px; } .hero-readouts span { font-size: 10.5px; max-width: 12em; text-align: center; } }

/* section rail with ∇ for the section being read */
.section-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 2px; padding: 10px 12px 10px 10px; background: rgba(250, 249, 245, 0.86); border: 1px solid rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-sans); font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.section-rail.is-visible { opacity: 1; pointer-events: auto; }
.section-rail a { position: relative; padding: 3px 0 3px 16px; color: #6b6a64; text-decoration: none; white-space: nowrap; }
.section-rail a:hover { color: #191917; }
.section-rail a[aria-current] { color: #191917; }
.section-rail a[aria-current]::before { content: "∇"; position: absolute; left: 0; top: 3px; font-family: var(--font-mono); font-size: 11px; }
@media (min-width: 1680px) { .section-rail { display: flex; } }

/* contribution flow: a dotted spine, and a dotted return that closes the loop */
#contribute .fl-spine { stroke-dasharray: 0 7 !important; stroke-dashoffset: 0 !important; stroke-linecap: round; stroke-width: 2.2; stroke-opacity: 0.6; animation: none !important; }
#contribute .fl-return { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 7; marker-end: url(#cfc-arrow); }
#contribute .fl-tag-return { fill: var(--text-3); }

/* title: letters still arrive one by one, without the blur */
@keyframes hl-in-plain { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hl .ch { animation-name: hl-in-plain; }

/* partners: a still, even grid instead of the endless scroll */
.logo-marquee { -webkit-mask-image: none; mask-image: none; }
.logo-track { animation: none; width: 100%; transform: none; }
.logo-group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.logo-group[aria-hidden="true"] { display: none; }
/* the sky pages lift every top-level block into its own layer (position: relative); the rail must stay fixed */
body .section-rail { z-index: 60 !important; position: fixed !important; left: 24px !important; right: auto !important; top: 50% !important; width: auto !important; transform: translateY(-50%) !important; margin: 0 !important; }

/* ===== Design ideas, batch 3 (Stella): hero question, summary band, task table, contribution loop, night closing ===== */

/* hero: tag, title, the question, readouts, actions */
.hero-question { margin: clamp(10px, 1.6vh, 18px) auto 0; max-width: 34ch; font-family: var(--font-serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: rgba(236, 235, 230, 0.86); text-align: center; text-wrap: balance; }

/* the summary now opens the second band */
.tree-band .home-summary { display: block; max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 48px); padding: 0; border: 0; background: none; color: rgba(236, 235, 230, 0.86); font-family: var(--font-serif); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; text-align: center; }
.tree-band .home-summary > span { display: inline; }
@media (max-width: 720px) {
  .tree-band .home-summary { text-align: left; margin-left: 16px; margin-right: 16px; max-width: none; font-size: 16.5px; }
  .tree-band .home-summary > span { display: block; }
  .tree-band .home-summary > span + span { margin-top: 14px; }
}

/* all task samples, as an evaluation table */
#all-tasks.block { background: var(--paper, #faf9f5); }
#all-tasks .tt-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.01em; text-align: center; margin: 0 0 10px; }
#all-tasks .tt-note { text-align: center; color: #5f5e58; font-size: 15px; margin: 0 auto 28px; max-width: 60ch; }
#all-tasks .tt-sig, #all-tasks tr.sig td.t::before { color: #2f7a5e; font-family: var(--font-mono); }
#all-tasks .tt-wrap { overflow-x: auto; max-width: 1080px; margin: 0 auto; border-top: 1px solid #191917; }
#all-tasks .task-table { width: 100%; min-width: 620px; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; }
#all-tasks th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #5f5e58; padding: 12px 16px 10px 0; border-bottom: 1px solid #d9d6cc; }
#all-tasks td { padding: 12px 16px 12px 0; border-bottom: 1px solid #e3e0d7; vertical-align: baseline; }
#all-tasks td.t a { color: #191917; text-decoration: none; }
#all-tasks td.t a:hover { text-decoration: underline; text-underline-offset: 3px; }
#all-tasks tr.sig td.t::before { content: "\0394\00a0"; }
#all-tasks td.r { font-family: var(--font-mono); font-size: 13px; color: #3a3935; font-variant-numeric: tabular-nums; }
#all-tasks .tt-more { text-align: center; margin: 22px 0 0; font-size: 15px; }
#all-tasks .tt-more a { color: #191917; }

/* contribution loop */
#contribute .cfc-ring { max-width: 470px; }
#contribute .fl-arc { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7.5; marker-end: url(#cfc-arrow); }
#contribute .fl-arc-return { stroke: #2f7a5e; }
#contribute .fl-centre path { fill: var(--text); }
#contribute .fl-step-label { font-size: 10px; letter-spacing: 0.16em; fill: var(--text); }
#contribute .fl-row-dot { fill: #fff; stroke: var(--text); stroke-width: 1; }
#contribute .fl-n-row { font-size: 13px; }
#contribute .cfc-ring .fl-node, #contribute .cfc-ring .fl-pill { opacity: 1; transform: none; }

/* closing on the night sky, with one contact block */
body.home.skypage #compute.block { background: #07080a !important; color: #ecebe6; }
#compute .center-head .h-lg { color: #ecebe6; }
#compute .pcard.light.solo { background: transparent; border-color: rgba(236, 235, 230, 0.35); color: #ecebe6; }
#compute .pcard .pc-wordmark, #compute .pcard.light.solo .pc-wordmark em { color: #ecebe6; }
#compute .pcard p { color: rgba(236, 235, 230, 0.82); }
#compute .solo-contact a { color: #ecebe6; }
#compute .contact-label { display: block; width: 100%; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 235, 230, 0.6); }

/* section rail: on laptop widths a slim column of dots, ∇ for the section being read; names on hover */
@media (min-width: 1200px) and (max-width: 1679px) {
  .section-rail { display: flex; padding: 8px 6px; background: rgba(250, 249, 245, 0.7); gap: 0; }
  .section-rail a { width: 16px; height: 18px; padding: 0; font-size: 0; }
  .section-rail a::after { content: ""; position: absolute; left: 6px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #9a988f; }
  .section-rail a[aria-current]::after { display: none; }
  .section-rail a[aria-current]::before { left: 3px; top: 1px; font-size: 11px; }
  .section-rail a:hover::before, .section-rail a:focus-visible::before { content: attr(data-label); position: absolute; left: 22px; top: 0; padding: 1px 8px; font: 12px/1.5 var(--font-sans); color: #191917; background: rgba(250, 249, 245, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); white-space: nowrap; }
  body .section-rail { left: 12px !important; }
}

/* readability fixes */
footer.site h3.foot-h { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #a9a79d; }
footer.site h4 { color: #a9a79d; }
#contribute .cfc-ring .fl-s { font-size: 12.5px; }
.hero-readouts span { font-size: 11px; }
@media (max-width: 720px) { .hero-readouts span { font-size: 11px; } }

/* table: the band keeps its own paper, results line up on the right like an eval table */
body.home.skypage #all-tasks.block { background: #faf9f5 !important; }
#all-tasks th:last-child, #all-tasks td.r { text-align: right; padding-right: 0; }

/* readouts as a band across the bottom of the hero, as in the ideas doc: three cells, label above, large dot numerals */
body.home > .hero-readouts { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(236, 235, 230, 0.16); background: linear-gradient(to top, rgba(7, 8, 10, 0.88), rgba(7, 8, 10, 0.4)); }
body.home > .hero-readouts > div { justify-items: start; padding: clamp(18px, 2.4vh, 28px) clamp(20px, 3.4vw, 48px) clamp(20px, 2.8vh, 32px); }
body.home > .hero-readouts > div + div { border-left: 1px solid rgba(236, 235, 230, 0.16); }
body.home > .hero-readouts dd { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
body.home > .hero-readouts .ro-dots { height: clamp(40px, 6.2vh, 64px); }
body.home > .hero-readouts span { font-size: 12px; letter-spacing: 0.14em; color: rgba(236, 235, 230, 0.66); }
@media (max-width: 720px) {
  body.home > .hero-readouts { position: relative; grid-template-columns: 1fr; }
  body.home > .hero-readouts > div + div { border-left: 0; border-top: 1px solid rgba(236, 235, 230, 0.16); }
  body.home > .hero-readouts .ro-dots { height: 34px; }
}