/* ==========================================================================
   MatText — blog / preprint-style write-up
   Reading typeface throughout is a serif built for long text (Source Serif
   4), the same register a paper itself uses. Sans is reserved for UI
   chrome, mono for data, code, and captions. Section numbers mirror the
   manuscript's own numbering (1, 2.1, 2.2 …) rather than an invented scheme.
   ========================================================================== */

:root {
  --ink: #1a1a17;
  --ink-soft: #4c493f;
  --ink-faint: #8d8975;
  --paper: #fdfcf7;
  --paper-dim: #f3f0e6;
  --rule: #ddd7c4;
  --rule-strong: #bcb493;

  --coord: #2c4d84;
  --coord-soft: #7c93bf;
  --cat: #a13f24;
  --cat-soft: #c98a6c;
  --warn: #a06a1a;

  --dark-bg: #191a1f;
  --dark-panel: #1f2027;
  --dark-rule: #34353f;
  --dark-text: #e9e5d6;
  --dark-text-soft: #a29d8c;
  --dark-coord: #8ba3d4;
  --dark-cat: #dd8963;

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --measure: 680px;
  --measure-wide: 920px;
  --side: clamp(20px, 6vw, 64px);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img, svg { max-width: 100%; display: block; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; font: 500 13px var(--mono); }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--coord); outline-offset: 3px; }

sup { font-size: 0.65em; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--side);
  border-bottom: 1px solid var(--rule);
}
.masthead-brand { display: flex; align-items: center; }
.masthead-brand img { height: 22px; width: auto; display: block; }
.masthead nav { display: flex; gap: 22px; font: 500 13px var(--mono); }
.masthead nav a { text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.masthead nav a:hover { color: var(--cat); border-color: var(--cat-soft); }

/* ==========================================================================
   Article header
   ========================================================================== */

main { padding: 0 var(--side); }
article { max-width: var(--measure); margin: 0 auto; }

.article-head { padding: 56px 0 44px; border-bottom: 1px solid var(--rule); }

.kicker {
  font: 500 12px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}

h1 {
  font: 500 clamp(30px, 4.4vw, 44px)/1.2 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.byline { font: 500 16px var(--sans); margin: 0 0 4px; }
.byline a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: border-color 0.2s, color 0.2s; }
.byline a:hover { color: var(--cat); border-color: var(--cat-soft); }

.affil-toggle { margin: 0 0 18px; }
.affil-toggle summary {
  cursor: pointer;
  font: 400 12px var(--mono);
  color: var(--ink-faint);
  list-style: none;
  width: fit-content;
}
.affil-toggle summary::-webkit-details-marker { display: none; }
.affil-toggle summary::before { content: '+ '; color: var(--ink-faint); }
.affil-toggle[open] summary::before { content: '– '; }
.affil-toggle summary:hover { color: var(--ink); }
.affil { font: 400 13px/1.7 var(--sans); color: var(--ink-faint); margin: 10px 0 0; }

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat);
  display: inline-block;
  margin-right: 9px;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(161, 63, 36, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(161, 63, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(161, 63, 36, 0); }
}

.lede-quote {
  font: italic 500 clamp(21px, 2.6vw, 27px)/1.42 var(--serif);
  color: var(--ink);
  margin: 8px 0 12px;
  padding-left: 20px;
  border-left: 3px solid var(--cat);
}
.lede-desc {
  font: 400 15.5px/1.6 var(--sans);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 22px;
}

.abstract-toggle { margin: 0 0 30px; }
.abstract-toggle summary {
  cursor: pointer;
  font: 500 13px var(--mono);
  color: var(--ink-faint);
  list-style: none;
  width: fit-content;
}
.abstract-toggle summary::-webkit-details-marker { display: none; }
.abstract-toggle summary::before { content: '+ '; color: var(--cat); }
.abstract-toggle[open] summary::before { content: '– '; }
.abstract-toggle summary:hover { color: var(--ink); }
.abstract-toggle p {
  margin: 12px 0 0;
  padding: 18px 22px;
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cat);
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* header entrance: small, staggered, one-shot */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.reveal-in { animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .reveal-in { animation: none; opacity: 1; transform: none; }
  .pulse-dot { animation: none; }
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font: 400 13px var(--mono);
  color: var(--ink-faint);
}
.toc span { color: var(--ink); font-weight: 600; margin-right: 6px; }
.toc a { text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--cat); border-color: var(--cat-soft); }

/* ==========================================================================
   Body typography
   ========================================================================== */

section { padding: 46px 0 0; }
section + section { border-top: 1px solid var(--rule); margin-top: 46px; }

h2 {
  font: 500 clamp(24px, 3vw, 30px)/1.25 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
h3 {
  font: 500 clamp(20px, 2.4vw, 24px)/1.3 var(--serif);
  margin: 40px 0 16px;
}

p { margin: 0 0 20px; }
p b, li b { font-weight: 600; color: var(--ink); }
p em { font-style: italic; }

.fig-link-note {
  font: 400 15px var(--sans);
  color: var(--ink-soft);
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 14px 18px;
}
.fig-link-note a { color: var(--cat); text-decoration: underline; text-underline-offset: 2px; }

.equation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 18px 24px;
  margin: 0 0 22px;
}
.equation { font: 400 16px var(--mono); margin: 0; }
.eq-num { font: 400 14px var(--mono); color: var(--ink-faint); }

.aside-box {
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 18px 22px;
  margin: 0 0 20px;
}
.aside-label { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; }
.aside-box p:last-child { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* ==========================================================================
   Figures — breakout width, journal-style captions
   ========================================================================== */

/* breakout figure: wider than the text column, centered on the article.
   width is an explicit value (not 100%, which would just match the
   680px article column) that shrinks to fit the viewport on narrow screens. */
.fig-block {
  width: min(var(--measure-wide), calc(100vw - 2 * var(--side)));
  margin: 34px 0 30px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.fig-block figcaption {
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-soft);
  margin-top: 12px;
  max-width: var(--measure);
}
.fig-block figcaption b { color: var(--ink); font-weight: 600; }
.fig-block figcaption i { font-style: italic; color: var(--ink-faint); }

.fig-panel {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  border: 1px solid var(--rule);
  background: #fffefb;
}

.fig-image {
  border: 1px solid var(--rule);
  background: #fffefb;
  padding: clamp(12px, 2.4vw, 26px);
}
.fig-image img { width: 100%; height: auto; }
.fig-block-dark .fig-panel { background: var(--dark-panel); border-color: var(--dark-rule); }

.fig-controls { padding: 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.fig-block-dark .fig-controls { border-color: var(--dark-rule); }

.mode-group { display: flex; flex-direction: column; gap: 8px; }
.mode-btn {
  text-align: left;
  border: 1px solid var(--rule-strong);
  background: transparent;
  padding: 11px 13px;
  font: 500 13.5px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.mode-btn small { display: block; font: 400 11px var(--mono); color: var(--ink-faint); margin-top: 3px; }
.mode-btn:hover { border-color: var(--ink); }
.mode-btn[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mode-btn[aria-pressed='true'] small { color: #cfcabb; }

.fig-readout { font: 400 13.5px/1.6 var(--sans); color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 14px; margin: 4px 0 0; }
.fig-block-dark .fig-readout { color: var(--dark-text-soft); border-color: var(--dark-rule); }

.drag-label { font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-cat); margin: 0; }
.fig-note { font: 400 13.5px/1.55 var(--sans); color: var(--dark-text-soft); margin: 0 0 4px; }
.fig-block-dark label { display: flex; justify-content: space-between; align-items: baseline; font: 500 12px var(--mono); color: var(--dark-text); margin-top: 8px; }
.fig-block-dark output { font: 500 15px var(--mono); color: var(--warn); }
.fig-block-dark input[type='range'] { width: 100%; margin: 14px 0 4px; accent-color: var(--dark-cat); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font: 400 10.5px var(--mono); color: var(--dark-text-soft); margin-bottom: 4px; }
.fig-verdict { font: 500 13px var(--mono); color: var(--warn); margin: 6px 0 0; }

.fig-stage { padding: 20px; }
.fig-stage svg { width: 100%; height: auto; overflow: visible; }
.fig-stage-wide { border-right: 1px solid var(--rule); }

.f1-dot { transition: cx 0.6s ease, cy 0.6s ease, fill 0.4s ease; stroke: #fffefb; stroke-width: 1.5; }
.f1-dot.type-a { fill: var(--cat); }
.f1-dot.type-b { fill: var(--coord); }
.f1-dot.type-c { fill: var(--warn); }
.f1-dot.gray { fill: var(--ink-faint) !important; }
.f1-aux { transition: opacity 0.4s ease; }
.f1-label { font: 500 10.5px var(--mono); }
.f1-axis { stroke: var(--rule-strong); stroke-width: 1; }

.cliff-axis { stroke: var(--dark-rule); stroke-width: 1; }
.cliff-grid { stroke: var(--dark-rule); stroke-width: 1; opacity: 0.5; }
.cliff-line-llm { fill: none; stroke: var(--dark-cat); stroke-width: 3; }
.cliff-line-gnn { fill: none; stroke: var(--dark-coord); stroke-width: 3; stroke-dasharray: 2 5; }
.cliff-marker-line { stroke: var(--warn); stroke-dasharray: 4 5; }
.cliff-dot { fill: var(--warn); }
.cliff-tick { font: 400 11px var(--mono); fill: var(--dark-text-soft); }
.chart-legend { display: flex; gap: 22px; justify-content: center; font: 400 12px var(--mono); color: var(--dark-text-soft); padding-top: 8px; }
.chart-legend .swatch { width: 16px; height: 3px; display: inline-block; margin-right: 7px; }
.swatch.llm { background: var(--dark-cat); }
.swatch.gnn { background: var(--dark-coord); }

@media (max-width: 820px) {
  .fig-panel { grid-template-columns: 1fr; }
  .fig-controls { border-right: 0; border-bottom: 1px solid var(--rule); }
  .fig-block-dark .fig-controls { border-color: var(--dark-rule); }
  .fig-stage-wide { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ==========================================================================
   Tabs (representation / scaling)
   ========================================================================== */

.fig-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn {
  border: 1px solid var(--rule-strong);
  background: transparent;
  padding: 9px 15px;
  font: 500 13px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.tab-btn:hover { border-color: var(--ink); }
.tab-btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ==========================================================================
   Fig 5 — representation bars + preview
   ========================================================================== */

.rep-bar { cursor: pointer; }
.rep-bar rect { transition: opacity 0.2s ease, stroke-width 0.2s ease; }
.rep-bar:hover rect { stroke: var(--ink); stroke-width: 1.5; }
.rep-bar-label { font: 500 10px var(--mono); fill: var(--ink-soft); }
.rep-bar-value { font: 500 10px var(--mono); fill: var(--ink); }
.rep-axis { stroke: var(--rule-strong); }

.rep-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 400 11.5px var(--mono); color: var(--ink-faint); padding: 10px 0 0; }
.rep-legend span { display: flex; align-items: center; gap: 6px; }
.rep-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.fig-preview { padding: 24px 24px 18px; display: flex; flex-direction: column; }
.rep-preview-label { font: 500 11px var(--mono); color: var(--ink-faint); margin-bottom: 4px; }
.rep-preview-name { font: 400 21px var(--serif); font-style: italic; margin-bottom: 4px; }
.rep-preview-desc { font: 400 13px var(--sans); color: var(--ink-soft); margin-bottom: 14px; }
.fig-preview pre { background: var(--paper-dim); border: 1px solid var(--rule); padding: 14px 16px; font: 12px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-word; margin: 0 0 12px; flex: 1; }
.rep-preview-foot { font: 400 11px var(--mono); color: var(--ink-faint); }

/* ==========================================================================
   Fig 6 — scaling
   ========================================================================== */

.scale-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); background: #fffefb; }
.scale-cell { padding: 20px 18px 14px; }
.scale-cell + .scale-cell { border-left: 1px solid var(--rule); }
.scale-cell h4 { font: 500 13px var(--sans); margin: 0 0 4px; color: var(--ink); }
.scale-cell .scale-delta { font: 500 12px var(--mono); color: var(--cat); margin: 0 0 12px; }
.scale-cell svg { width: 100%; height: auto; overflow: visible; }
.scale-line { fill: none; stroke: var(--cat); stroke-width: 2.5; }
.scale-dot { fill: var(--cat); }
.scale-zero { stroke: var(--rule-strong); stroke-dasharray: 3 4; }
.scale-tick { font: 400 10px var(--mono); fill: var(--ink-faint); }

@media (max-width: 720px) {
  .scale-grid { grid-template-columns: 1fr; }
  .scale-cell + .scale-cell { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ==========================================================================
   Ext. Data Fig. 1 — wall
   ========================================================================== */

.wall-legend { display: flex; gap: 20px; flex-wrap: wrap; font: 400 12px var(--mono); color: var(--ink-faint); margin-bottom: 10px; }
.wall-legend span { display: flex; align-items: center; gap: 7px; }
.wall-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.wall-panel { border: 1px solid var(--rule); background: #fffefb; padding: 20px clamp(16px, 3vw, 30px) 14px; }
.wall-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.wall-row:first-child { border-top: 0; }
.wall-row-label { font: 500 13px var(--sans); color: var(--ink); }
.wall-track { position: relative; height: 28px; }
.wall-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.wall-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid #fffefb; cursor: pointer; padding: 0; }
.wall-dot.gnn { background: var(--coord); }
.wall-dot.llm { background: var(--cat); }
.wall-dot.other { background: var(--ink-faint); }
.wall-dot:hover, .wall-dot:focus-visible { transform: translate(-50%, -50%) scale(1.35); z-index: 2; }
.wall-tip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -8px); background: var(--ink); color: var(--paper); font: 400 11.5px var(--mono); padding: 5px 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.wall-dot:hover .wall-tip, .wall-dot:focus-visible .wall-tip { opacity: 1; }
.wall-scale { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--ink-faint); margin: 10px 0 0 156px; }

@media (max-width: 640px) {
  .wall-row { grid-template-columns: 1fr; gap: 6px; }
  .wall-scale { margin-left: 0; }
}

/* ==========================================================================
   Resource list + code card
   ========================================================================== */

.resource-list { margin: 4px 0 28px; border-top: 1px solid var(--rule-strong); }
.resource-list a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--rule-strong);
  text-decoration: none; font: 500 15px var(--sans); color: var(--ink);
  transition: color 0.2s;
}
.resource-list a:hover { color: var(--cat); }
.resource-list a span { font: 400 13px var(--mono); color: var(--ink-faint); }

.code-card { background: var(--ink); color: #ece7d6; margin: 0 0 8px; }
.code-bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #38372c; }
.code-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); display: block; }
.code-bar i:nth-child(2) { background: var(--warn); }
.code-bar i:nth-child(3) { background: var(--coord-soft); }
.code-bar small { margin-left: auto; font: 11px var(--mono); color: #8f8b78; }
.code-card pre { margin: 0; padding: 20px 22px; font: 12.5px/1.85 var(--mono); white-space: pre-wrap; }
.code-card .muted { color: #8f8b78; }
.code-card .string { color: var(--dark-cat); }

/* ==========================================================================
   Cite section + footer
   ========================================================================== */

.cite-section { padding: 40px 0 60px; }
.cite-text { font-size: 15.5px; color: var(--ink-soft); }
.cite-bibtex { background: var(--paper-dim); border: 1px solid var(--rule); padding: 16px 18px; font: 12.5px/1.7 var(--mono); color: var(--ink-soft); white-space: pre-wrap; margin: 0; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 26px var(--side) 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font: 500 13px var(--mono); color: var(--ink-faint);
}
.footer-brand { display: flex; align-items: center; opacity: 0.85; transition: opacity 0.2s; }
.footer-brand:hover { opacity: 1; }
.footer-brand img { height: 18px; width: auto; display: block; }
.site-footer div { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cat); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .abstract { padding: 18px 18px 20px; }
}