@font-face {
  font-family: Newsreader;
  src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Newsreader;
  src: url("/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f6f4ee;
  --ink: #1e1d1b;
  --muted: #58554d;
  --line: #d2cdc1;
  --serif: Newsreader, Georgia, serif;
  --sans: "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1440px, calc(100% - clamp(32px, 7.4vw, 132px))); margin-inline: auto; }
.skip { position: fixed; z-index: 3; top: 8px; left: 8px; padding: 10px 15px; background: var(--paper); transform: translateY(-150%); }
.skip:focus { transform: none; }

.masthead-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.masthead-inner { min-height: 70px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 1.3rem/1 var(--serif); white-space: nowrap; }
.brand-mark { font: 1rem/1 var(--sans); }
nav { display: flex; align-items: center; gap: 24px; }
nav a, .text-link, .crumb { font-size: .87rem; }
nav a, .crumb { text-decoration: none; }
nav a[aria-current="page"], nav a:hover, .crumb:hover { text-decoration: underline; }
.eyebrow, .study-top, .paper-index {
  font: 500 .68rem/1.45 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.entrance { padding-block: clamp(25px, 4vw, 54px) clamp(15px, 2.6vw, 32px); }
.entrance .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7356ae; }
.entrance h1 {
  font: 400 clamp(3.3rem, 9.9vw, 10.9rem)/.85 var(--serif);
  letter-spacing: -.071em;
  margin-top: clamp(14px, 2vw, 25px);
}
.entrance em { font-weight: 400; }
.diptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 20px); }
.architecture { --accent: #365297; --stage: #111827; --light: #9fb7ff; }
.neural { --accent: #92412c; --stage: #28191c; --light: #ffc19f; }
.study {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 61% 40%, color-mix(in srgb, var(--light) 14%, var(--stage)), transparent 68%), var(--stage);
  color: var(--light);
}
.study-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; }
.study-top { min-height: 37px; padding: 6px 17px 0; }
.study-art { display: block; width: 100%; height: auto; overflow: visible; }
.art-type { font: 9px var(--mono); letter-spacing: .09em; }
.replay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0 8px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: .68rem/1.25 var(--mono);
  white-space: nowrap;
}
.replay:hover { color: white; }
.replay span { font-size: 1.1em; }
.exhibit-link {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-height: 100px;
  border-bottom: 1px solid var(--line);
  padding-block: 15px 17px;
  text-decoration: none;
}
.exhibit-link h2 { font: 430 clamp(1.43rem, 3.2vw, 3.3rem)/1 var(--serif); letter-spacing: -.045em; }
.exhibit-link p { color: var(--muted); margin-top: 5px; font-size: clamp(.78rem, 1.24vw, .96rem); }
.exhibit-link > span { font-size: 1.35rem; transition: transform .2s ease; }
.exhibit-link:hover > span, .paper-row:hover .paper-arrow { transform: translate(3px, -3px); }
.exhibit-link:hover h2 { color: var(--accent); }

.process-pulse { transform: translate(462px, -100px); opacity: .78; }
.study.is-playing .process-pulse { animation: trace 3.9s linear both; }
.study.is-playing .plate-core { animation: ignite .75s ease both; animation-delay: calc(.25s + var(--sequence) * .55s); }
.study.is-playing .plate-glass { animation: plate-light .85s ease both; animation-delay: calc(.25s + var(--sequence) * .55s); }
.activation { fill: #ffbd85; }
.layer-surface { transition: fill .25s, stroke .25s; }
.study.is-playing .neural-plane .activation { animation: activation 1.6s ease-out both; animation-delay: calc(var(--sequence) * .42s); }
.study.is-playing .neural-plane .layer-surface { animation: layer-light 1.6s ease-out both; animation-delay: calc(var(--sequence) * .42s); }
@keyframes trace {
  0% { transform: translate(0, 0); opacity: .95; }
  82% { transform: translate(462px, -100px); opacity: 1; }
  100% { transform: translate(462px, -100px); opacity: .78; }
}
@keyframes ignite { 0%, 100% { opacity: .7; } 35% { opacity: 1; r: 6px; } }
@keyframes plate-light { 35% { fill: #5a7ccd; fill-opacity: .9; stroke: #fff; stroke-opacity: 1; } }
@keyframes activation { 0% { opacity: .12; } 32% { fill: #fff0af; opacity: 1; } 100% { fill: #ffbd85; } }
@keyframes layer-light { 38% { fill: #975744; stroke: #ffdfb1; stroke-opacity: 1; } }

.papers-section { padding-block: clamp(45px, 7vw, 94px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2, .reader-head h2 { font: 400 clamp(2rem, 4vw, 4.3rem)/1 var(--serif); letter-spacing: -.052em; }
.paper-list { border-top: 1px solid var(--line); }
.paper-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding-block: 19px; border-bottom: 1px solid var(--line); text-decoration: none; }
.paper-info { display: grid; gap: 6px; }
.paper-info .eyebrow, .paper-index { color: var(--accent); }
.paper-title { font: 450 clamp(1.14rem, 2.35vw, 2.2rem)/1.12 var(--serif); letter-spacing: -.018em; }
.paper-row:hover .paper-title { text-decoration: underline; }
.byline { color: var(--muted); font-size: .84rem; }
.paper-arrow { font-size: 1.15rem; transition: transform .2s; }
.footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 74px; font-size: .8rem; }
.footer p { color: var(--muted); }

.stream-entrance, .article-head { padding-block: 24px 36px; }
.crumb { display: inline-block; color: var(--muted); margin-bottom: 25px; }
.stream-title { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.stream-title .eyebrow, .paper-page .eyebrow { color: var(--accent); margin-bottom: 10px; }
.stream-title h1, .article-head h1 { font: 400 clamp(2.8rem, 7.5vw, 7.8rem)/.94 var(--serif); letter-spacing: -.063em; }
.lead { color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 26ch; padding-bottom: 5px; }
.stream-gallery { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 58px); align-items: center; }
.steps { padding: 0; margin: 0; list-style: none; border-bottom: 1px solid var(--line); }
.steps li { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 16px 8px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.step[aria-pressed="true"], .step:hover { background: #ebe7dd; }
.step-number { color: var(--accent); font: .72rem var(--mono); }
.step-fallback, .step-detail { color: var(--muted); font-size: .92rem; line-height: 1.6; padding: 12px 8px; }
.method.is-enhanced .step-fallback { display: none; }

.article-head h1 { max-width: 28ch; font-size: clamp(2.5rem, 6.2vw, 6.5rem); }
.article-authors { margin-top: 14px; font-size: clamp(.95rem, 1.8vw, 1.15rem); line-height: 1.4; }
.version { color: var(--muted); font-size: .85rem; margin-top: 5px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; margin-top: 20px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--ink); min-height: 39px; text-decoration: none; font-size: .84rem; }
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: #48443d; }
.button.outline:hover { background: #ece8de; }
.dot { display: inline-block; vertical-align: middle; background: currentColor; width: 4px; height: 4px; border-radius: 50%; margin-inline: 5px; }
.article-body { border-top: 1px solid var(--line); padding-block: 15px; }
.abstract { max-width: 76ch; }
.abstract summary { cursor: pointer; font-size: .91rem; }
.abstract > p { margin-top: 14px; font: 1.13rem/1.55 var(--serif); }
.reader-section { background: #eeebe2; border-top: 1px solid var(--line); padding-block: 32px 56px; }
.reader-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.pdf-reader { border: 1px solid var(--line); background: #e8e5dc; }
.pdf-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--paper); }
.pdf-toolbar form { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .83rem; }
.pdf-toolbar input { width: 4.05em; padding: .4em; border: 1px solid var(--line); font: inherit; color: var(--ink); }
.pdf-toolbar button { background: var(--paper); color: var(--ink); cursor: pointer; }
.pdf-toolbar button:disabled { opacity: .55; cursor: default; }
.pdf-status { padding: 9px 13px; color: var(--muted); font-size: .83rem; }
.pdf-sheet { margin: 0 auto 20px; width: min(790px, calc(100% - 22px)); }
.pdf-sheet canvas { width: 100%; height: auto; border: 1px solid var(--line); background: white; }
.library-list { padding-bottom: 58px; }

@media (max-width: 720px) {
  .masthead-inner { min-height: 58px; }
  .wordmark { gap: 6px; font-size: 1.07rem; }
  nav { gap: 12px; }
  nav a { font-size: .78rem; }
  .entrance h1 { font-size: clamp(2.62rem, 10.45vw, 5rem); }
  .exhibit-link { min-height: 80px; }
  .stream-title { align-items: start; flex-direction: column; }
  .stream-gallery { grid-template-columns: 1fr; }
  .footer-inner { flex-wrap: wrap; gap: 10px 18px; padding-block: 13px; }
  .footer p { order: 1; width: 100%; }
}
@media (max-width: 530px) {
  .diptych { grid-template-columns: 1fr; gap: 18px; }
  .study-top { padding: 5px 13px 0; }
  .exhibit-link { min-height: 0; padding-block: 13px 14px; }
  .exhibit-link h2 { font-size: 1.85rem; }
  .exhibit-link p { font-size: .84rem; }
  .paper-row { grid-template-columns: 23px 1fr auto; gap: 8px; }
  .pdf-toolbar { padding: 6px; }
  .pdf-toolbar button { padding-inline: 6px; font-size: .73rem; }
  .pdf-toolbar form { font-size: .73rem; gap: 4px; }
  .pdf-toolbar input { width: 3.55em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .replay { display: none !important; }
}