/* =========================================================================
   ExplorationBench — site styles

   Design system: Tencent Hunyuan (hunyuan.tencent.com), values taken from
   the live build. The register is "research publication", not "tech demo":
   colour is almost absent, and hierarchy comes from the type scale, 1px
   rules and whitespace. Three background levels, one beige band, one cyan
   glow, one gradient in the footer. No elevation shadows anywhere — card
   outlines are inset hairlines drawn on ::after.
   ========================================================================= */

:root {
  /* ink — the only real "colour" on the page */
  --ink-900:      rgba(0, 0, 0, .9);
  --ink-600:      rgba(0, 0, 0, .6);
  --ink-400:      rgba(0, 0, 0, .4);
  --ink-solid:    #1a1a1a;
  --ink-hover:    #333;

  /* backgrounds: exactly three levels, plus the beige band */
  --bg:           #fff;
  --bg-subtle:    #f9f9f9;
  --bg-muted:     #f3f3f3;
  --paper:        #f8f1e7;

  /* warm grey ramp (Tailwind stone) — data series, disabled states */
  --stone-900:    #1c1917;
  --stone-800:    #292524;
  --stone-600:    #57534d;
  --stone-500:    #79716b;
  --stone-450:    #8c8884;
  --stone-400:    #a6a09b;
  --stone-300:    #d6d3d1;
  --stone-200:    #e7e5e4;

  /* lines do the structural work */
  --line:         #e6e6e6;
  --line-hair:    #f1f1f1;
  --line-strong:  #999;

  /* Chart ground, taken from the paper's Figure 1 so a reader moving between
     the page and the PDF sees one chart. That figure balances three values in
     a cell — grid, cohort, subject — and these are the first two. */
  --fig-grid:     #f1f3f5;
  --ghost:        #dbe1e8;
  --ghost-deep:   #b9c3d0;

  /* accents, rationed: links and tags only */
  --accent:       #2d68ff;
  --accent-light: #3a7fff;
  --accent-bg:    #ebf2ff;
  --glow:         #d0fbff;

  /* aliases kept for the chart code, all pointing at the ink system */
  --ink:          var(--ink-900);
  --ink-2:        var(--ink-600);
  --muted:        var(--ink-600);
  --faint:        var(--ink-400);
  --card:         #fff;
  --line-soft:    var(--line-hair);

  /* type */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "PingFang SC", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  /* nine sizes, nothing in between */
  --fs-eyebrow: 12px;  --lh-eyebrow: 20px;
  --fs-caption: 14px;  --lh-caption: 22px;
  --fs-body:    16px;  --lh-body:    24px;
  --fs-lead:    20px;  --lh-lead:    28px;
  --fs-h4:      24px;  --lh-h4:      32px;
  --fs-h3:      32px;  --lh-h3:      40px;
  --fs-h2:      40px;  --lh-h2:      48px;
  --fs-h1:      48px;  --lh-h1:      56px;

  /* four radii */
  --r-tag:   4px;
  --r-card:  8px;
  --r-media: 12px;
  --r-pill:  999px;

  /* grid: 1440 outer, 1280 for nav and footer, fluid gutter in between */
  --maxw:      1440px;
  --maxw-nav:  1280px;
  --gutter:    80px;
  --nav-h:     56px;

  /* three curves, no more */
  --t-fast: .2s ease;
  --t-slow: .3s ease;
  --ease:   cubic-bezier(.22, 1, .36, 1);
}

/* The gutter interpolates instead of jumping at a breakpoint. */
@media (min-width: 960px) and (max-width: 1440px) {
  :root { --gutter: calc(24px + (100vw - 960px) * 56 / 480); }
}
@media (max-width: 959px) {
  :root {
    --gutter: 24px;
    --nav-h: 50px;
    --fs-h1: 32px; --lh-h1: 40px;
    --fs-h2: 28px; --lh-h2: 36px;
    --fs-h3: 24px; --lh-h3: 32px;
    --fs-h4: 20px; --lh-h4: 28px;
    --fs-lead: 16px; --lh-lead: 24px;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

/* One focus ring for the whole page. Keyboard only: everything here is also
   reachable by pointer, and a ring on every click would be noise. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-tag);
}
.fig:focus-visible, .panel :focus-visible { outline-offset: -2px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent-bg); color: var(--ink-900); }

a { color: inherit; text-decoration: none; }

/* Big type carries weight by being big. 500 at the top, 400 below it. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- shared atoms -------------------------------------------------- */

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

/* The one place on the site where letter-spacing opens up. */
.kicker {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-400);
}

.lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-600);
  max-width: 730px;
}

.mono { font-family: var(--mono); }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Hairline outline, drawn inside the box so it never shifts layout and
   never leaks past a rounded corner. */
.edge { position: relative; }
.edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

section { position: relative; }

.sec { padding-block: clamp(44px, 5vw, 56px); }
.sec.tight { padding-block: clamp(32px, 3.6vw, 40px); }

/* The single beige band on the page. Everything else is white. */
.sec.band {
  background: var(--paper);
  padding-block: clamp(56px, 7vw, 88px);
}

/* 48px against 16px — the fixed shape of every section head. */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-head > :first-child { flex: 1 1 480px; min-width: 0; max-width: 700px; }
.sec-head h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; margin-top: 16px; }
.sec-head .lede { flex: 0 1 420px; }
@media (max-width: 959px) {
  .sec-head { align-items: flex-start; }
  .sec-head > :first-child, .sec-head .lede { flex: 1 1 100%; max-width: none; }
  .sec-head .lede { font-size: var(--fs-caption); line-height: var(--lh-caption); }
}

/* buttons: pill, two levels, nothing else */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  background: var(--bg);
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--bg-subtle); }
.btn.solid { background: var(--ink-solid); border-color: var(--ink-solid); color: #fff; }
.btn.solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.ghost { border-color: transparent; color: var(--ink-600); }
.btn.ghost:hover { background: var(--bg-subtle); color: var(--ink-900); }
.btn.sm { height: 36px; padding: 0 18px; }
.btn svg { width: 14px; height: 14px; }

/* segmented control */

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
  padding: 5px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.seg button:hover { color: var(--ink-900); }
.seg button[aria-selected="true"] { background: var(--ink-solid); color: #fff; }

/* ---------- nav ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  width: min(100%, var(--maxw-nav));
  margin-inline: auto;
  max-width: none;
  padding-inline: 16px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.2vw, 48px);
}
/* Below the point where the 1280 frame is narrower than the content box,
   the nav follows the page gutter so the two stay aligned. */
@media (max-width: 1311px) {
  .nav-in { width: 100%; padding-inline: var(--gutter); }
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav-brand .dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ink-900);
  flex: none;
}
.nav-links {
  display: flex;
  gap: clamp(16px, 2.2vw, 32px);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
}
.nav-links a { padding: 4px 0; transition: color var(--t-fast); }
.nav-links a:hover { color: var(--ink-900); }
.nav-links a.on {
  color: var(--ink-900);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav-cta { display: flex; gap: 8px; margin-left: auto; }
.nav-cta .btn { height: 36px; padding: 0 18px; }
.nav-cta .btn.solid { background: var(--stone-900); border-color: var(--stone-900); }
.nav-cta .btn.solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.nav-prog {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  background: var(--ink-900);
  width: 0;
  transition: width .12s linear;
}
@media (max-width: 1040px) { .nav-links { display: none; } }
@media (max-width: 560px)  { .nav-cta .btn:not(.solid) { display: none; } }

/* ---------- hero ---------------------------------------------------------- */

.hero { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 7vw, 96px); }

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--maxw-nav);
}
.hero-copy { max-width: 860px; }
.hero h1 { margin: 0; }
.hero-sub {
  margin: 16px auto 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--ink-600);
  max-width: 620px;
}
.hero-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hero .kicker { margin-bottom: 20px; }

/* The plot leads; the sentence follows it. */
.hero-art {
  order: -1;
  position: relative;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  aspect-ratio: 586 / 356;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
/* The plot scales with its viewBox, so on a phone the labels have to grow in
   user units just to stay the same size on glass. */
@media (max-width: 600px) { .hero-art .hlab { font-size: 17px; } }

/* The hero hands the ink to one system at a time, so the cohort reads as ten
   systems being compared rather than one result standing alone. Only the two
   permitted transforms are used: the incoming curve is revealed by its own
   mask, the outgoing one is wound back the same way, and the markers and the
   key cross-fade. Nothing moves or scales. */
.hero-art .ink {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .55s ease-in;
}
.hero-art .tr.lead .ink {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.05s var(--ease);
}
/* Until the script takes over, the opening reveal is the animation; `backwards`
   rather than `forwards` so it hands back to the rule above instead of pinning
   the value and blocking every later transition. */
.hero-art:not(.live) .tr.lead .ink {
  animation: draw 1.1s var(--ease) .55s backwards;
}
.hero-art .pts circle { fill: var(--card); stroke: var(--ink-900); stroke-width: 1.6; }
.hero-art .pts .end { fill: var(--ink-900); stroke: none; }
.hero-art .pts { opacity: 0; transition: opacity .25s ease; }
.hero-art .tr.lead .pts { opacity: 1; transition: opacity .45s ease .5s; }

/* Data reveals itself by being drawn; nothing moves, scales or bounces. */
.draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: draw 1.2s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.fade-in { opacity: 0; animation: fadein .6s ease forwards; }
@keyframes fadein { to { opacity: 1; } }

/* stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats > div {
  padding: 24px 24px 26px;
  border-left: 1px solid var(--line-hair);
}
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stat-v {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.stat-k {
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line-hair); }
}

/* ---------- dilemma ------------------------------------------------------- */

.dilemma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
}
@media (max-width: 860px) { .dilemma { grid-template-columns: minmax(0, 1fr); } }

.horn {
  background: var(--bg-subtle);
  border-radius: var(--r-card);
  padding: clamp(28px, 3.2vw, 40px);
}
.horn h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); margin-bottom: 12px; }
.horn p { font-size: var(--fs-body); color: var(--ink-600); margin: 0; }
.horn .strike {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
  margin-bottom: 8px;
}
.horn-join {
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  color: var(--ink-400);
}
@media (max-width: 860px) { .horn-join { padding: 4px 0; } }

.resolution {
  margin-top: clamp(16px, 2vw, 24px);
  border-radius: var(--r-card);
  padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 80px);
  background: var(--bg-subtle);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
}
.resolution h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 16px; }
.resolution p { color: var(--ink-600); font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; }
.resolution b { font-weight: 500; color: var(--ink-900); }
@media (max-width: 860px) { .resolution { grid-template-columns: minmax(0, 1fr); } }

/* ---------- worlds -------------------------------------------------------- */

.worlds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 900px) { .worlds { grid-template-columns: minmax(0, 1fr); } }

.world {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  padding: clamp(28px, 3.2vw, 56px);
  overflow: hidden;
}
.world::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.world-band { display: none; }

.world-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.world-head img { width: 40px; height: 40px; border-radius: var(--r-card); }
.world-head h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.world-head .sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
}
.world p { font-size: var(--fs-body); color: var(--ink-600); }

.spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hair);
  border-radius: var(--r-tag);
  margin: 24px 0 4px;
  overflow: hidden;
}
.spec div { background: var(--bg); padding: 16px 16px 18px; }
.spec .v { font-size: var(--fs-h4); line-height: var(--lh-h4); font-variant-numeric: tabular-nums; }
.spec .k { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-400); margin-top: 2px; }
@media (max-width: 600px) {
  .spec div { padding: 14px 12px; }
  .spec .k { font-size: var(--fs-eyebrow); line-height: 18px; }
}

/* composition bar */
.comp { margin-top: 24px; }
.comp-bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; gap: 1.5px; }
.comp-bar i { display: block; transition: opacity var(--t-fast); }
.comp-bar i:hover { opacity: .7; }
.comp-key {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-600);
}
.comp-key span { display: inline-flex; align-items: center; gap: 6px; }
.comp-key s { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- probe demo ---------------------------------------------------- */

.probe-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 900px) { .probe-wrap { grid-template-columns: minmax(0, 1fr); } }

.probe-list { display: flex; flex-direction: column; gap: 8px; }
.probe-btn {
  position: relative;
  text-align: left;
  border: 0;
  background: var(--bg);
  border-radius: var(--r-card);
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.probe-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.probe-btn:hover { background: var(--bg-subtle); color: var(--ink-900); }
.probe-btn[aria-selected="true"] { background: var(--ink-solid); color: #fff; }
.probe-btn[aria-selected="true"]::after { box-shadow: inset 0 0 0 1px var(--ink-solid); }
.probe-btn .tick {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--stone-400);
}
.probe-btn[aria-selected="true"] .tick { background: #fff; }

.terminal {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  overflow: hidden;
}
.terminal::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-hair);
  background: var(--bg-subtle);
}
.terminal-bar s { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--stone-300); }
.terminal-bar .t {
  margin-left: 8px;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-400);
}
.terminal-body { padding: clamp(20px, 2.4vw, 28px); font-family: var(--mono); font-size: var(--fs-caption); }
.tl { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-hair); }
.tl:last-of-type { border-bottom: 0; }
.tl .lbl {
  width: 124px; flex: none;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--ink-400);
}
.tl .val { color: var(--ink-900); word-break: break-word; }
.tl .val.wrong { color: var(--ink-400); text-decoration: line-through; text-decoration-thickness: 1px; }
.tl .val.right { color: var(--ink-900); font-weight: 500; }
.verdict {
  margin-top: 18px; padding: 16px 18px;
  background: var(--bg-subtle);
  border-radius: var(--r-tag);
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
}
.type-caret::after {
  content: "";
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--ink-900);
  margin-left: 3px;
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- protocol ------------------------------------------------------ */

.proto {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (max-width: 900px) { .proto { grid-template-columns: minmax(0, 1fr); } }
.proto-step {
  background: var(--bg);
  padding: 28px 24px 32px;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.proto-step:hover { background: var(--bg-subtle); }
.proto-step[aria-selected="true"] { background: var(--ink-solid); color: #fff; }
.proto-step[aria-selected="true"] .pd { color: rgba(255, 255, 255, .6); }
.proto-step[aria-selected="true"] .pn { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .25); }
.pn {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-400);
  margin-bottom: 16px;
}
.pt { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; display: block; }
.pd { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-600); margin-top: 8px; }

.cond-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}
@media (max-width: 900px) { .cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cond {
  position: relative;
  border-radius: var(--r-card);
  padding: 18px;
  background: var(--bg);
}
.cond::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.cond .s {
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-400);
  margin-bottom: 12px;
}
/* Two encodings on one marker: hue names the arm, and a filled disc means
   this arm receives feedback from the world. */
.cond .s { border-color: var(--arm); color: var(--arm); }
.cond.fb .s { background: var(--arm); border-color: var(--arm); color: #fff; }
.cond .n { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.cond .d { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-600); margin-top: 4px; }

/* ---------- chart shell --------------------------------------------------- */

.panel {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  overflow: hidden;
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
  z-index: 1;
}
.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-hair);
}
.panel-bar .t {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
}
.panel-bar .sp { margin-left: auto; }
.panel-body { padding: clamp(16px, 2vw, 28px); }
.chart { width: 100%; display: block; overflow: visible; }

/* A plot squeezed below ~700px turns its 10px labels into 4px ones, so narrow
   screens scroll the plot instead of shrinking it. */
.panel-body > div[id^="chart-"] { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 760px) {
  .panel-body > div[id^="chart-"] .chart { min-width: 680px; }
  #lb, .panel-body > div[id^="chart-"] { scrollbar-width: thin; }
  /* soft right edge, so it is obvious the panel scrolls sideways */
  #lb, .panel-body > div[id^="chart-"] {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
}
/* Numbers and ticks are monospaced; prose inside a plot is not. */
.chart text { font-family: var(--mono); fill: var(--ink-400); }
.chart text.lab { font-family: var(--sans); }
.axis-line { stroke: var(--line); stroke-width: 1; }
.grid-line { stroke: var(--fig-grid); stroke-width: 1; }

/* ---------- quick-jump rail ------------------------------------------------
   How much of itself the rail can show is set by the gutter left over beside
   the 1280px column, so it arrives in three stages as that gutter opens up:
   ticks alone, then a standing panel behind them, then the contents list. The
   panel matters -- a bare column of hairlines reads as stray marks rather
   than as something to point at -- but it needs a gutter to stand in, and
   below 1440px it would sit on the leading edge of the cards. */
.rail {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--r-card);
  opacity: 0;
  transition: opacity var(--t-slow), background-color var(--t-slow);
  pointer-events: none;
}
.rail.show { opacity: 1; pointer-events: auto; }
.rail:hover, .rail:focus-within {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Collapsed, the label and the RQ tag are zero-width but a flex gap is still
   charged for each of them, which is 16px of phantom column. */
.rail a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px 0;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  color: var(--ink-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), gap var(--t-slow);
}
.rail:hover a, .rail:focus-within a { gap: 8px; }
.rail a i {
  width: 12px; height: 2px; flex: none;
  border-radius: 1px;
  background: var(--ink-400);
  opacity: .6;
  transition: width var(--t-fast), opacity var(--t-fast), background-color var(--t-fast);
}
/* The labels are what collapses; the ticks stay put so the column does not
   move under the pointer as it expands. */
.rail a span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--t-slow), opacity var(--t-fast);
}
.rail:hover a span, .rail:focus-within a span { max-width: 170px; opacity: 1; }
.rail a b {
  font-family: var(--mono); font-weight: 400; font-size: 9px;
  color: var(--ink-400); letter-spacing: .04em;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width var(--t-slow), opacity var(--t-fast);
}
.rail:hover a b, .rail:focus-within a b { max-width: 30px; opacity: .75; }
.rail a.sub i { width: 7px; margin-left: 5px; }

.rail a:hover { color: var(--ink-900); }
.rail a:hover i { background: var(--ink-900); opacity: 1; }
.rail a.on { color: var(--ink-900); }
.rail a.on i { width: 22px; background: var(--ink-900); opacity: 1; }
.rail a.sub.on i { width: 17px; }

/* Narrower than this the gutter is under 60px and the ticks would sit on the
   cards; that range navigates from the sticky top nav instead. */
@media (min-width: 1280px) { .rail { display: flex; } }
/* Gutter wide enough to seat the panel clear of the cards. */
@media (min-width: 1440px) {
  .rail {
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 0 0 1px var(--line);
  }
}
/* Gutter wide enough to leave the whole contents list standing. */
@media (min-width: 1700px) {
  .rail a { gap: 8px; }
  .rail a span { max-width: 170px; opacity: 1; }
  .rail a b { max-width: 30px; opacity: .75; }
}
/* Under a short viewport the twelve ticks would run past the fold. */
@media (max-height: 560px) { .rail { display: none; } }

/* Isolating a system: the subject keeps its colour, the cohort drops to the
   ghost value and loses its markers and badge, exactly as Figure 1 draws it. */
.chart g.traj { transition: opacity var(--t-fast); }
.chart g.traj.ghost > path { stroke: var(--ghost) !important; stroke-width: 1.2; }
.chart g.traj.ghost circle { fill: var(--card) !important; stroke: var(--ghost) !important; }
.chart g.traj.ghost line { stroke: var(--ghost) !important; }
/* Figure 1 labels only the subject, so a ghosted curve drops its badge too
   rather than leaving ten unreadable ones stacked down the right edge.
   !important because the badge carries an entry animation, and a filled
   animation outranks a plain declaration. */
.chart g.traj.ghost .ep { opacity: 0 !important; pointer-events: none; }
.chart g.traj.lead > path { stroke-width: 2.6; }
.chart g.traj, .chart g.traj * { transition: stroke var(--t-fast), fill var(--t-fast), opacity var(--t-fast); }
.chart g.traj { cursor: pointer; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 20px;
}
.legend button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 5px 14px 5px 10px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
  cursor: pointer;
  transition: opacity var(--t-fast), background-color var(--t-fast), color var(--t-fast);
  font-family: var(--sans);
}
.legend button img { width: 14px; height: 14px; }
.legend button s {
  width: 14px; height: 2px; border-radius: 2px; display: block;
  flex: none; cursor: pointer;
  outline-offset: 3px;
  transition: box-shadow var(--t-fast);
}
.legend button s:hover { box-shadow: 0 0 0 3px var(--bg-muted); }
/* The chip that is currently isolating, and the one merely previewed. */
/* The "holding X" pill in the panel bar. Only rendered while a system is held
   isolated, which is the one chart state a reader cannot undo by moving the
   pointer, so it has to be visible and it has to be clickable. */
.holding {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 10px; padding: 4px 10px 4px 12px;
  border: 1px solid var(--ink-900); border-radius: var(--r-pill);
  background: var(--ink-900); color: #fff;
  font-family: var(--sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.holding[hidden] { display: none; }
.holding:hover { opacity: .84; }
.holding s { width: 12px; height: 2px; border-radius: 2px; flex: none; }
.holding i { font-style: normal; opacity: .6; font-size: 10px; }

.legend button[aria-pressed="false"] { opacity: .32; }
.legend button:hover { background: var(--bg-subtle); color: var(--ink-900); }
/* After :hover, so holding a chip survives the pointer being over it. */
.legend button.lead { border-color: var(--ink-900); color: var(--ink-900); }
.legend button.held,
.legend button.held:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
/* A held chip is ink-filled, and these marks range from black through clay to
   a four-stop gradient. Flattening to white is the one transform that lands
   the same way for all ten; inverting does not, because a mark with a near
   white element in it inverts into the background. */
.legend button.held img { filter: brightness(0) invert(1); }

.tip {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  background: var(--stone-900);
  color: #fff;
  border-radius: var(--r-tag);
  padding: 10px 12px;
  font-size: var(--fs-eyebrow);
  line-height: 18px;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity .14s ease;
  white-space: nowrap;
}
.tip.on { opacity: 1; }
.tip b { font-family: var(--mono); font-weight: 500; }
.tip .mut { color: rgba(255, 255, 255, .55); }

/* ---------- leaderboard --------------------------------------------------- */

#lb { overflow-x: auto; }
.lb-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.lb-table th {
  text-align: right;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
  font-weight: 400;
  padding: 0 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color var(--t-fast);
}
.lb-table th:first-child { text-align: left; padding-left: 4px; }
.lb-table th:hover { color: var(--ink-900); }
.lb-table th.on { color: var(--ink-900); }
.lb-table th .caret { opacity: .4; margin-left: 4px; }
.lb-table th.on .caret { opacity: 1; }
.lb-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: var(--fs-caption);
}
.lb-table tbody tr { transition: background-color var(--t-fast); }
.lb-table tbody tr:hover { background: var(--bg-subtle); }
.lb-table td.model {
  text-align: left;
  font-family: var(--sans);
  font-size: var(--fs-body);
  padding-left: 4px;
}
.lb-model { display: flex; align-items: center; gap: 12px; }
.lb-model img { width: 18px; height: 18px; flex: none; }
.lb-rank {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--ink-400);
  width: 22px;
  flex: none;
}
.lb-reason {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-600);
  background: var(--bg-muted);
  border-radius: var(--r-tag);
  padding: 1px 8px;
}
.lb-bar {
  position: relative;
  height: 6px;
  background: var(--bg-muted);
  border-radius: var(--r-pill);
  min-width: 104px;
}
/* One length, one meaning: M₄. This carried an M₀ tick as well, which read as
   the centre mark of an error bar rather than the boundary it was -- a spread
   claim the row was not making, on a figure whose three runs are averaged. M₀
   is a column of its own two cells over. */
.lb-bar i {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill);
  background: var(--ink-900);
  transition: width .6s var(--ease);
}
.gain-cell { color: var(--ink-900); }
.gain-cell.low { color: var(--ink-400); }
.lb-note {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-400);
  padding: 16px 4px 0;
  max-width: 730px;
}

/* ---------- findings ------------------------------------------------------ */

/* One block per research question: the question itself, then the findings
   that answer it. Matches the order of section 4.2. */
.findings { display: block; }
.rq-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 40px 0 20px;
  border-top: 1px solid var(--line-strong);
}
.rq-head:first-child { padding-top: 8px; border-top: 0; }
.rq-tag {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--ink-900);
  letter-spacing: .04em;
}
.rq-q { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink-900); margin: 0; max-width: 44ch; }
.rq-basis { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); color: var(--ink-400); margin: 0; }
@media (max-width: 640px) {
  .rq-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rq-tag { grid-row: auto; }
}

.rq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 16px); }
@media (max-width: 900px) { .rq-row { grid-template-columns: minmax(0, 1fr); } }

.finding {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px;
  align-content: start;
}
@media (max-width: 560px) { .finding { grid-template-columns: minmax(0, 1fr); } }
.finding .fh { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.finding .fn {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-600);
  background: var(--bg-muted);
  border-radius: var(--r-tag);
  padding: 1px 8px;
}
.finding .fw { margin-left: auto; display: flex; gap: 4px; }
.finding .fw img { width: 18px; height: 18px; border-radius: var(--r-tag); }
.finding h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.finding p { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-600); margin: 12px 0 0; }
.finding .fstat { border-left: 1px solid var(--line); padding-left: 24px; align-self: center; }
@media (max-width: 560px) { .finding .fstat { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; } }
.finding .fv {
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.finding .fv em { font-family: var(--mono); font-size: .4em; font-style: normal; color: var(--ink-400); margin-left: 3px; }
.finding .fc { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); color: var(--ink-400); margin-top: 8px; }

/* The paper's supporting numbers, folded away until asked for. */
.fmore {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  color: var(--ink-600);
  transition: color var(--t-fast);
}
.fmore:hover { color: var(--ink-900); }
.fmore svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform var(--t-fast); }
.fmore[aria-expanded="true"] svg { transform: rotate(180deg); }
.finding .fdetail { grid-column: 1 / -1; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.finding .fdetail table { width: 100%; border-collapse: collapse; }
.finding .fdetail tr + tr th, .finding .fdetail tr + tr td { border-top: 1px solid var(--line); }
.finding .fdetail th, .finding .fdetail td { padding: 7px 0; text-align: left; font-weight: 400; vertical-align: baseline; }
.finding .fdetail th { font-size: var(--fs-caption); color: var(--ink-600); }
.finding .fdetail td {
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.finding .fdetail td:nth-child(2) { color: var(--ink-900); padding-left: 16px; }
.finding .fdetail td:last-child { color: var(--ink-400); padding-left: 14px; width: 1%; }

/* knowing / doing */
.kd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 16px); margin-top: 24px; }
@media (max-width: 700px) { .kd { grid-template-columns: minmax(0, 1fr); } }
.kd-card { border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 32px); background: var(--bg-subtle); }
.kd-card .r { font-size: var(--fs-h2); line-height: var(--lh-h2); font-variant-numeric: tabular-nums; }
.kd-card .l { font-size: var(--fs-body); color: var(--ink-900); margin-top: 8px; }
.kd-card .c { font-size: var(--fs-caption); color: var(--ink-400); margin-top: 2px; }
.kd-card .track { height: 6px; background: var(--bg-muted); border-radius: var(--r-pill); margin-top: 20px; overflow: hidden; }
.kd-card .track i { display: block; height: 100%; border-radius: var(--r-pill); background: #3a5f8a; transition: width .9s var(--ease); }
.kd-card.dim .track i { background: var(--ghost); }

/* ---------- figures ------------------------------------------------------- */

.fig-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }

.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 16px); }
@media (max-width: 860px) { .figs { grid-template-columns: minmax(0, 1fr); } }
/* The two grid figures are 2.2:1; at half width their cells are unreadable. */
.fig.wide { grid-column: 1 / -1; }
.fig[hidden] { display: none; }
.fig {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  overflow: hidden;
  cursor: zoom-in;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Figures are white-backed plots on a white card, so the only hover the card
   can offer is its own outline. */
.fig:hover::after, .fig:focus-visible::after { box-shadow: inset 0 0 0 1px var(--ink-400); }
.fig .fig-img { flex: 1; display: grid; place-items: center; }
.fig::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.fig img { width: 100%; display: block; background: #fff; }
.fig.wide img { padding: clamp(12px, 1.6vw, 24px); }
.fig figcaption {
  padding: 16px 20px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
  border-top: 1px solid var(--line-hair);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
}
.fig figcaption b { color: var(--ink-900); font-weight: 500; }
.fig .fig-n {
  grid-row: span 2;
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  color: var(--ink-400); letter-spacing: .03em;
  padding-top: 2px;
}
.fig .fig-t { color: var(--ink-900); }
.fig .fig-note { font-size: var(--fs-eyebrow); line-height: 1.6; color: var(--ink-400); }

.lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 0, 0, .86);
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  align-content: center;
  gap: 20px;
  padding: 3vw;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow);
  cursor: zoom-out;
}
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%; max-height: 78vh; background: #fff;
  border-radius: var(--r-media);
  align-self: center; cursor: default;
}
.lb-cap {
  max-width: 78ch; text-align: center; cursor: default;
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: rgba(255, 255, 255, .72);
}
.lb-cap b { color: #fff; font-family: var(--mono); font-weight: 400; margin-right: 6px; }
.lb-cap em { font-style: normal; color: rgba(255, 255, 255, .45); display: block; margin-top: 4px; }
.lb-nav {
  display: flex; align-items: center; gap: 6px; cursor: default;
  background: rgba(255, 255, 255, .08);
  border-radius: var(--r-pill);
  padding: 5px;
}
.lb-nav.solo .lb-prev, .lb-nav.solo .lb-next, .lb-nav.solo .lb-count { display: none; }
.lb-nav button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: none; color: rgba(255, 255, 255, .7);
  font-size: 14px; cursor: pointer;
  font-family: var(--sans);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lb-nav button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.lb-count {
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  color: rgba(255, 255, 255, .55); padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.lb-close { margin-left: 6px; border-left: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 0 !important; }

/* ---------- citation ------------------------------------------------------ */

.cite-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (max-width: 860px) { .cite-grid { grid-template-columns: minmax(0, 1fr); } }
.bib {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg-subtle);
  color: var(--ink-900);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 22px;
  padding: 28px;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.bib .k { color: var(--ink-400); }
.bib .s { color: var(--ink-900); }
.copy {
  position: absolute; top: 16px; right: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-600);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.copy:hover { background: var(--ink-solid); border-color: var(--ink-solid); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.authors { font-size: var(--fs-body); line-height: 28px; color: var(--ink-900); }
.authors .aff { color: var(--ink-600); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.authors sup { color: var(--ink-400); font-size: 10px; }
/* Blue is for links only; it never enters a button. */
.authors a:not(.btn) { color: var(--accent); }

/* ---------- closing call -------------------------------------------------- */

/* The only colour on the page: one 130px cyan disc, blurred to a haze. */
.cta {
  position: relative;
  height: 280px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--glow);
  filter: blur(80px);
  transform: translateX(-50%);
}
.cta-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 75px;
  text-align: center;
}
.cta h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta .btn:not(.solid) { border-color: transparent; }
@media (max-width: 959px) {
  .cta { height: auto; }
  .cta-in { align-items: flex-start; gap: 24px; padding: 48px var(--gutter); text-align: left; }
  .cta-actions { justify-content: flex-start; }
}

/* ---------- footer -------------------------------------------------------- */

.foot {
  color: #fff;
  background: linear-gradient(180deg, #181a1d, #121417);
}
.foot-in {
  width: min(100%, var(--maxw-nav));
  max-width: none;
  margin-inline: auto;
  padding: 48px 16px;
}
@media (max-width: 1311px) { .foot-in { width: 100%; padding-inline: var(--gutter); } }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 6vw, 80px); }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col .t {
  margin-bottom: 4px;
  font-size: var(--fs-caption);
  line-height: 18px;
  color: rgba(255, 255, 255, .45);
}
.foot-col a {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  transition: opacity var(--t-fast);
}
.foot-col a:hover { opacity: .82; }
.foot-col p { font-size: var(--fs-caption); line-height: var(--lh-caption); color: rgba(255, 255, 255, .45); margin: 0; max-width: 320px; }
.foot-div { height: 1px; margin: 36px 0 22px; background: rgba(255, 255, 255, .1); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255, 255, 255, .45);
}

/* ---------- reveal -------------------------------------------------------- */

/* Fade only. Nothing on this page slides, scales or bounces. */
[data-reveal] {
  opacity: 0;
  transition: opacity .6s ease;
}
[data-reveal].in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; }
  /* These two start hidden and are revealed by the animation itself, so
     switching animations off has to reveal them instead. */
  .fade-in { opacity: 1; }
  .draw { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}