/* ============================================================
   Do Large Language Models Know When They Are Wrong?
   Editorial print system: paper, ink, brass.
   Brass = perfect calibration. Terracotta = over. Indigo = under.
   Weights are restricted to 300/400 by design — hierarchy comes
   from size, case and tracking, never from bold.
   ============================================================ */

:root {
  --paper:      #F4F1EA;
  --paper-2:    #ECE8DE;
  --card:       #FFFFFF;
  --ink:        #1C1F17;
  --muted:      #5C5A52;
  --faint:      #6A675F;
  --brass:      #7D6229;
  --brass-soft: #C9A96E;
  --rule:       rgba(28, 31, 23, 0.14);
  --rule-soft:  rgba(28, 31, 23, 0.07);
  --over:       #A34A33;
  --over-soft:  rgba(178, 84, 60, 0.12);
  --under:      #4A5A8C;
  --under-soft: rgba(74, 90, 140, 0.12);
  --you:        #5E6A3C;
  --you-soft:   rgba(110, 122, 74, 0.14);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --wide: 78rem;
}

/* Three theme states: an explicit stamp wins in either direction; with no
   stamp at all (the default "system" setting) prefers-color-scheme decides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper:      #0E0F11;
  --paper-2:    #16171A;
  --card:       #1A1B1E;
  --ink:        #E9E5DB;
  --muted:      #A5A196;
  --faint:      #8F8C84;
  --brass:      #C9A96E;
  --brass-soft: #8A6D2F;
  --rule:       rgba(233, 229, 219, 0.16);
  --rule-soft:  rgba(233, 229, 219, 0.08);
  --over:       #D8785C;
  --over-soft:  rgba(216, 120, 92, 0.16);
  --under:      #8496D2;
  --under-soft: rgba(132, 150, 210, 0.16);
  --you:        #A3B172;
  --you-soft:   rgba(163, 177, 114, 0.16);
}
}

:root[data-theme="dark"] {
  --paper:      #0E0F11;
  --paper-2:    #16171A;
  --card:       #1A1B1E;
  --ink:        #E9E5DB;
  --muted:      #A5A196;
  --faint:      #8F8C84;
  --brass:      #C9A96E;
  --brass-soft: #8A6D2F;
  --rule:       rgba(233, 229, 219, 0.16);
  --rule-soft:  rgba(233, 229, 219, 0.08);
  --over:       #D8785C;
  --over-soft:  rgba(216, 120, 92, 0.16);
  --under:      #8496D2;
  --under-soft: rgba(132, 150, 210, 0.16);
  --you:        #A3B172;
  --you-soft:   rgba(163, 177, 114, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3 { font-weight: 300; margin: 0; }
p { margin: 0 0 1.1em; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; z-index: 200; font-family: var(--mono); font-size: .7rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ───────────────────────── NAV ───────────────────────── */

#nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-home {
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-decoration: none; color: var(--muted); white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--brass); }
#themeToggle {
  margin-left: auto; background: none; border: 1px solid var(--rule);
  color: var(--ink); width: 2rem; height: 2rem; border-radius: 50%;
  cursor: pointer; font-size: .85rem; line-height: 1; flex: none;
  transition: border-color .2s, transform .3s;
}
.nav-links + #themeToggle { margin-left: 0; }
#themeToggle:hover { border-color: var(--brass); transform: rotate(-20deg); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ───────────────────── SECTION SCAFFOLD ───────────────── */

section {
  padding: clamp(4.5rem, 11vw, 9rem) var(--gutter);
  max-width: var(--wide);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
#hero { border-top: 0; }

.eyebrow {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 1.4rem;
}
.sec-head { max-width: 46rem; margin-bottom: 3.5rem; }
.sec-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: 1.4rem;
}
.sec-lede { font-size: 1.06rem; color: var(--muted); max-width: 40rem; }

.prose { max-width: var(--measure); }
.prose h3 {
  font-family: var(--serif); font-size: 1.7rem; line-height: 1.2;
  letter-spacing: -.01em; margin: 2.8rem 0 1rem;
}
.prose p { font-size: 1.02rem; }
.prose strong { font-weight: 400; color: var(--ink); }
.prose em { font-style: italic; }

.pull {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.28; letter-spacing: -.01em; color: var(--ink);
  border-left: 1px solid var(--brass);
  padding: .2rem 0 .2rem 1.5rem; margin: 2.4rem 0;
}

.stat, .num {
  font-family: var(--mono); font-size: .86em; white-space: nowrap;
  color: var(--brass); letter-spacing: .01em;
}
.cite { font-style: italic; color: var(--muted); }
.smallnote { font-size: .88rem; color: var(--muted); margin-top: 1.8rem; }
.mono { font-family: var(--mono); font-size: .86em; }

.tag-over, .tag-under { font-family: var(--mono); font-size: .8em; letter-spacing: .04em; }
.tag-over  { color: var(--under); }
.tag-under { color: var(--over); }

.caveat {
  border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  padding: 1.1rem 1.3rem; font-size: .9rem; color: var(--muted);
  margin-top: 2rem; background: var(--paper-2); border-radius: 0 4px 4px 0;
}
.caveat strong { color: var(--ink); font-weight: 400; }

.fignote { font-family: var(--mono); font-size: .7rem; line-height: 1.75;
  letter-spacing: .04em; color: var(--faint); max-width: 40rem; margin-top: 1.2rem; }

.fig { margin: 3rem 0 0; }
figcaption {
  font-family: var(--mono); font-size: .7rem; line-height: 1.8; letter-spacing: .04em;
  color: var(--faint); margin-top: 1.1rem; max-width: 38rem;
}
.fig-n { color: var(--brass); letter-spacing: .16em; }

/* ───────────────────────── HERO ───────────────────────── */

#hero {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 3rem; padding-bottom: 6rem; overflow: hidden;
}
.hero-chart {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.hero-chart svg { width: 100%; height: 100%; opacity: .95; }
.hero-copy { position: relative; z-index: 1; max-width: 40rem; }
#hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 8.2vw, 6rem);
  line-height: .98; letter-spacing: -.035em; margin-bottom: 1.8rem;
}
#hero h1 em { font-style: italic; color: var(--brass); }
.lede {
  font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.65;
  color: var(--muted); max-width: 34rem;
}
.lede strong { color: var(--ink); font-weight: 400; }
.byline {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--faint); margin-top: 2.6rem; line-height: 1.9;
  border-top: 1px solid var(--rule); padding-top: 1.2rem; max-width: 32rem;
}
.byline-note { display: block; letter-spacing: .04em; text-transform: none; margin-top: .5rem; }

.scroll-cue {
  position: absolute; bottom: 2rem; left: var(--gutter);
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .24em; color: var(--faint);
}
.scroll-cue i { display: block; width: 3rem; height: 1px; background: var(--rule);
  position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform-origin: left; animation: sweep 2.6s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; opacity: .4; } }

/* ───────────────────────── QUIZ ───────────────────────── */

#quiz { display: flex; flex-direction: column; gap: 1.25rem; }

.q {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--card); overflow: hidden;
  transition: border-color .3s;
}
:root[data-theme="dark"] .q { background: var(--paper-2); }
.q.answered { border-color: var(--brass-soft); }

.q-head {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.4rem 1.6rem .4rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--faint);
}
.q-num { color: var(--brass); }
.q-dom { margin-left: auto; }
.q-text {
  padding: .3rem 1.6rem 1.2rem; font-size: 1.04rem; line-height: 1.55;
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: -.005em;
}
.q-opts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px; background: var(--rule); border-top: 1px solid var(--rule);
}
.opt {
  display: flex; gap: .8rem; align-items: flex-start; text-align: left;
  background: var(--card); border: 0; padding: .85rem 1.1rem;
  font-family: var(--sans); font-weight: 300; font-size: .9rem; line-height: 1.45;
  color: var(--ink); cursor: pointer; transition: background .18s, color .18s;
}
:root[data-theme="dark"] .opt { background: var(--paper-2); }
.opt:hover:not(:disabled) { background: var(--paper-2); }
:root[data-theme="dark"] .opt:hover:not(:disabled) { background: var(--card); }
.opt .letter { font-family: var(--mono); font-size: .72rem; color: var(--brass); flex: none; padding-top: .15rem; }
.opt.picked { background: var(--brass); color: #F4F1EA; }
.opt.picked .letter { color: #F4F1EA; }
.opt:disabled { cursor: default; }
.opt.is-correct { background: var(--you-soft); }
.opt.is-correct .letter { color: var(--you); }
.opt.is-wrong-pick { background: var(--over-soft); }
.opt.is-wrong-pick .letter { color: var(--over); }

.q-conf { padding: 1.4rem 1.6rem; border-top: 1px solid var(--rule); }
.conf-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  color: var(--faint); margin-bottom: 1rem; display: flex; align-items: baseline; gap: .8rem;
}
.conf-val { margin-left: auto; font-size: 1.5rem; letter-spacing: 0; color: var(--brass); }
.conf-row { display: flex; align-items: center; gap: 1.1rem; }

/* The visible track is a hairline, but the input itself keeps a full-size
   hit area so the thumb is grabbable on touch. */
input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1;
  height: 2.75rem; background: transparent; outline: none; margin: 0;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 1px; background: var(--rule);
}
input[type=range]::-moz-range-track { height: 1px; background: var(--rule); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--brass);
  margin-top: -.575rem;
  cursor: grab; transition: transform .15s, background .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); background: var(--brass); }
input[type=range]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--brass); cursor: grab;
}
input[type=range]:disabled { cursor: default; }
input[type=range]:disabled::-webkit-slider-thumb { border-color: var(--faint); cursor: default; }
input[type=range]:disabled::-moz-range-thumb { border-color: var(--faint); cursor: default; }

.q-submit {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  background: none; border: 1px solid var(--ink); color: var(--ink);
  padding: .7rem 1.4rem; border-radius: 4px; cursor: pointer;
  transition: background .2s, color .2s, opacity .2s; white-space: nowrap;
}
.q-submit:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.q-submit:disabled { opacity: .3; cursor: default; }

.q-reveal {
  border-top: 1px solid var(--rule); padding: 1.3rem 1.6rem;
  background: var(--paper-2); font-size: .93rem; display: none;
}
.q.revealed .q-reveal { display: block; animation: fade .45s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q.revealed .q-reveal { animation: none; } }
.rv-verdict { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; margin-bottom: .9rem; }
.rv-verdict.right { color: var(--you); }
.rv-verdict.wrong { color: var(--over); }
.rv-note { color: var(--muted); margin-bottom: 1rem; }
.rv-models { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.rv-cell { background: var(--card); padding: .7rem .9rem; flex: 1 1 8rem; }
:root[data-theme="dark"] .rv-cell { background: var(--paper-2); }
.rv-cell .rc-k { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em;
  color: var(--faint); display: block; margin-bottom: .35rem; }
.rv-cell .rc-v { font-family: var(--mono); font-size: .95rem; }
.rv-cell .rc-v.ok  { color: var(--you); }
.rv-cell .rc-v.no  { color: var(--over); }

/* ───────────────────── BIG STATS ───────────────────── */

.bigstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.bigstat { background: var(--card); padding: 2rem 1.8rem 1.6rem; position: relative; }
:root[data-theme="dark"] .bigstat { background: var(--paper-2); }
.bigstat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.bigstat.under::before { background: var(--under); }
.bigstat.over::before  { background: var(--over); }
.bs-model { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; color: var(--muted); margin-bottom: 1.6rem; }
.bs-nums { display: flex; gap: 2.5rem; margin-bottom: 1.6rem; }
.bs-n { font-family: var(--mono); font-size: clamp(1.9rem, 4.4vw, 2.7rem); display: block; line-height: 1; letter-spacing: -.02em; }
.bs-n i { font-style: normal; font-size: .5em; color: var(--faint); }
.bs-l { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; color: var(--faint); display: block; margin-top: .6rem; }
.bs-verdict { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; margin: 0;
  border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.bigstat.under .bs-verdict { color: var(--under); }
.bigstat.over  .bs-verdict { color: var(--over); }

/* ───────────────────── PROMPT SWITCHER ───────────────── */

.switcher { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .switcher { grid-template-columns: 1fr; } }

.switch-controls { display: flex; flex-direction: column; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.switch {
  background: var(--card); border: 0; text-align: left; padding: 1.1rem 1.2rem;
  cursor: pointer; color: var(--ink); transition: background .2s;
  border-left: 2px solid transparent;
}
:root[data-theme="dark"] .switch { background: var(--paper-2); }
.switch:hover { background: var(--paper-2); }
:root[data-theme="dark"] .switch:hover { background: var(--card); }
.switch.on { border-left-color: var(--brass); background: var(--paper-2); }
:root[data-theme="dark"] .switch.on { background: var(--card); }
.sw-name { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; display: block; margin-bottom: .5rem; }
.switch.on .sw-name { color: var(--brass); }
.sw-desc { font-family: var(--sans); font-weight: 300; font-size: .82rem; line-height: 1.55; color: var(--muted); display: block; }

.switch-stage { border: 1px solid var(--rule); border-radius: 4px; padding: 1.6rem; background: var(--card); }
:root[data-theme="dark"] .switch-stage { background: var(--paper-2); }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1.2rem;
  border-top: 1px solid var(--rule); padding-top: 1.2rem; margin-top: 1.2rem; }
.ro { }
.ro-k { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; color: var(--faint); display: block; margin-bottom: .4rem; }
.ro-v { font-family: var(--mono); font-size: 1.15rem; display: block; }
.ro-d { font-family: var(--mono); font-size: .64rem; color: var(--muted); display: block; margin-top: .3rem; }
.ro-v.over { color: var(--over); } .ro-v.under { color: var(--under); }

/* ───────────────────── ITEM GRID ───────────────────── */

.grid-fig { margin-top: 3rem; }
.grid-controls { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }
.gsw { background: var(--card); border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  padding: .7rem 1rem; flex: 1 1 auto; transition: background .2s, color .2s; }
:root[data-theme="dark"] .gsw { background: var(--paper-2); }
.gsw:hover { background: var(--paper-2); color: var(--ink); }
.gsw.on { background: var(--ink); color: var(--paper); }

#itemGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr));
  gap: 5px; max-width: 46rem; }
.cellsq { aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 1px;
  background: transparent; cursor: pointer; padding: 0;
  transition: transform .15s, background .3s, border-color .3s; }
.cellsq:hover { transform: scale(1.28); border-color: var(--ink); z-index: 2; }
.cellsq.wrong { background: var(--over); border-color: var(--over); }
.cellsq.sel { outline: 2px solid var(--brass); outline-offset: 2px; }

.grid-readout {
  margin-top: 1.6rem; border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  border-radius: 0 4px 4px 0; padding: 1.1rem 1.3rem; background: var(--paper-2);
  min-height: 6.5rem; max-width: 46rem;
}
.gr-k { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--faint); display: block; margin-bottom: .6rem; }
.gr-q { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; margin-bottom: .8rem; }
.gr-meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.gr-meta .no { color: var(--over); } .gr-meta .ok { color: var(--you); }
.gr-empty { font-family: var(--mono); font-size: .68rem; color: var(--faint); letter-spacing: .06em; }

/* ───────────────────────── ASIDE ───────────────────── */

.aside {
  margin-top: 3.5rem; max-width: var(--measure);
  border: 1px solid var(--rule); border-radius: 4px; padding: 1.6rem 1.8rem;
  background: var(--paper-2);
}
.aside-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--brass); margin-bottom: 1rem; }
.aside p:last-child { margin-bottom: 0; font-size: .95rem; color: var(--muted); }

/* ───────────────────── YOUR SCORE ───────────────────── */

.score-empty { font-family: var(--mono); font-size: .78rem; letter-spacing: .05em;
  color: var(--faint); border: 1px dashed var(--rule); border-radius: 4px; padding: 2.5rem 1.8rem;
  text-align: center; }
.score-empty a { color: var(--brass); }

.score-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3rem; align-items: start; }
@media (max-width: 940px) { .score-wrap { grid-template-columns: 1fr; } }
.score-panel { border: 1px solid var(--rule); border-radius: 4px; padding: 1.6rem; background: var(--card); }
:root[data-theme="dark"] .score-panel { background: var(--paper-2); }
.score-stats { display: grid; gap: 1.4rem; }
.ss-k { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--faint); display: block; margin-bottom: .4rem; }
.ss-v { font-family: var(--mono); font-size: 1.9rem; display: block; line-height: 1; }
.ss-d { font-size: .86rem; color: var(--muted); display: block; margin-top: .6rem; line-height: 1.6; }
.verdict-line { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 1.2rem; }
.verdict-line .hl { color: var(--brass); font-style: italic; }

/* ───────────────────── TAKEAWAYS ───────────────────── */

.takeaways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.takeaways li { background: var(--card); padding: 2rem 1.8rem; display: flex; gap: 1.6rem; }
:root[data-theme="dark"] .takeaways li { background: var(--paper-2); }
.tk-n { font-family: var(--mono); font-size: .7rem; color: var(--brass); letter-spacing: .1em; flex: none; padding-top: .5rem; }
.takeaways h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .8rem; letter-spacing: -.01em; }
.takeaways p { margin: 0; color: var(--muted); font-size: .97rem; max-width: 42rem; }
@media (max-width: 640px) { .takeaways li { flex-direction: column; gap: .8rem; } }

/* ───────────────────── METHOD ───────────────────── */

.methodgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-bottom: 3.5rem; }
.methodgrid > div { background: var(--card); padding: 1.3rem 1.4rem; }
:root[data-theme="dark"] .methodgrid > div { background: var(--paper-2); }
.m-k { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; color: var(--brass); margin-bottom: .7rem; }
.m-v { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.6; }

.results-table-wrap { overflow-x: auto; margin-bottom: 3.5rem; }
.results-table { border-collapse: collapse; width: 100%; min-width: 40rem; font-family: var(--mono); font-size: .78rem; }
.results-table caption { text-align: left; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .04em; color: var(--faint); padding-bottom: 1.1rem; }
.results-table th {
  font-weight: 400; text-align: right; font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); padding: .7rem .9rem;
  border-bottom: 1px solid var(--ink);
}
.results-table th:first-child, .results-table th:nth-child(2) { text-align: left; }
.results-table td { padding: .75rem .9rem; text-align: right; border-bottom: 1px solid var(--rule-soft); }
.results-table td:first-child, .results-table td:nth-child(2) { text-align: left; }
.results-table tr.grp-start td { border-top: 1px solid var(--rule); }
.results-table .gap-pos { color: var(--over); }
.results-table .gap-neg { color: var(--under); }
.results-table .worst { color: var(--brass); }

.hyp { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.hyp li { font-size: .96rem; color: var(--muted); line-height: 1.65;
  border-left: 1px solid var(--rule); padding-left: 1.3rem; }
.hyp strong { color: var(--ink); font-weight: 400; display: block; margin: .5rem 0 .3rem; }
.hyp-tag { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em;
  border: 1px solid currentColor; border-radius: 2px; padding: .2rem .5rem; }
.hyp-tag.not { color: var(--over); }

/* ───────────────────── SVG CHART SHARED ───────────────── */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis      { stroke: var(--rule); stroke-width: 1; fill: none; }
.chart .diag      { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.chart .axis-label{ font-family: var(--mono); font-size: 9px; letter-spacing: .12em; fill: var(--faint); }
.chart .tick      { font-family: var(--mono); font-size: 8.5px; fill: var(--faint); }
.chart .series-claude { stroke: var(--under); fill: var(--under); }
.chart .series-gpt    { stroke: var(--over);  fill: var(--over);  }
.chart .series-you    { stroke: var(--you);   fill: var(--you);   }
.chart .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.chart .lbl-claude { fill: var(--under); } .chart .lbl-gpt { fill: var(--over); } .chart .lbl-you { fill: var(--you); }

/* ───────────────────────── FOOTER ───────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) 4rem;
  max-width: var(--wide); margin: 0 auto;
}
.foot-title { font-family: var(--serif); font-size: 1.6rem; letter-spacing: -.01em; margin-bottom: 1rem; }
.foot-sub, .foot-credit { font-size: .86rem; color: var(--muted); max-width: 44rem; line-height: 1.75; }
.foot-credit { font-size: .82rem; color: var(--faint); margin-top: 1.2rem; }
.foot-invite {
  font-size: .95rem; color: var(--muted); max-width: 44rem; line-height: 1.75;
  border-left: 1px solid var(--brass); padding-left: 1.4rem; margin: 2.5rem 0 0;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.4rem 0; }
.foot-links a { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-decoration: none; color: var(--muted); transition: color .2s;
  display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot-links a:hover { color: var(--brass); }
.foot-refs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 46rem; }
.foot-refs li { font-size: .78rem; color: var(--faint); line-height: 1.65; padding-left: 1.2rem; text-indent: -1.2rem; }

/* ───────────────────── MOTION ENTRANCE ───────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero chart sits to the right of the copy on wide screens so the
   dots and labels never collide with the headline. */
@media (min-width: 1000px) {
  .hero-chart { left: 46%; opacity: .95; }
}
@media (max-width: 999px) {
  .hero-chart { opacity: .16; }
  #hero { min-height: auto; }
}