/* ==========================================================================
   CRIS-0 · article layout
   Shell, typography and chrome follow the aetherlabs.ai article template
   (topbar, article head, 720px column with a sticky TOC, mono footer).
   Loaded AFTER style.css: the components (figure, walkthrough, trace,
   experiments) keep their markup and are re-tinted through the variables
   remapped below.
   ========================================================================== */

:root {
  /* --- the article template's own palette --- */
  --bg: #efe7d9;
  --bg-2: #e6ddcf;
  --bg-3: #d8cdbd;
  --fg: #151722;
  --fg-2: #343234;
  --muted: #7b746c;
  --muted-2: #aaa095;
  --rule: #d4c9b8;
  --accent: #8f564b;
  --accent-soft: rgb(143 86 75 / .14);

  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;

  --pad: clamp(20px, 4vw, 56px);
  --col: 720px;
  --wide: 1080px;
  --toc-gutter: 284px;   /* TOC column + shell gap */

  /* --- components from style.css, re-pointed at the palette above --- */
  --paper: var(--bg);
  --paper-2: var(--bg-2);
  --card: rgb(255 255 255 / .46);
  --text: var(--fg);
  --text-2: var(--fg-2);
  --text-3: var(--muted);
  --line: var(--rule);
  --font-sans: var(--sans);
  --font-display: var(--sans);
  --font-mono: var(--mono);
  --r: 8px;
  --r-lg: 10px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
}
body { padding-top: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* ---------- top bar ---------- */
.topbar {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 24px; padding: 20px var(--pad);
  border-bottom: 1px solid var(--rule); background: var(--bg);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { height: 22px; width: auto; display: block; }
.topbar nav { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.topbar nav a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--fg-2);
  transition: background 140ms, color 140ms;
}
.topbar nav a:hover { color: var(--fg); background: var(--bg-2); }
.topbar nav a.active { background: var(--fg); color: var(--bg); }

@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr; gap: 14px; }
  .topbar .brand img { height: 18px; }
  .topbar nav { justify-content: flex-start; flex-wrap: wrap; gap: 2px; }
  .topbar nav a { font-size: 13px; padding: 7px 10px; }
}

/* ---------- article head ---------- */
.article-head {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(28px, 4vw, 48px);
}
.article-head .crumb {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.article-head .crumb a { color: var(--muted); }
.article-head .crumb a:hover { color: var(--fg); }
.article-head .crumb .sep { color: var(--rule); }
.article-head h1 {
  margin: 0 0 18px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.018em;
  text-wrap: pretty;
}
.article-head .lede {
  margin: 0 0 28px; max-width: 76ch;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--fg-2);
  text-wrap: pretty;
}
.article-head .meta-row {
  display: flex; gap: 24px; flex-wrap: wrap; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.article-head .meta-row .k { color: var(--muted-2); margin-right: 8px; }
.article-head .meta-row .v { color: var(--fg-2); }

/* ---------- cover ---------- */
.article-cover { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.article-cover .panel {
  aspect-ratio: 21 / 10; overflow: hidden; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--bg-2);
}
.article-cover .panel img,
.article-cover .panel video { width: 100%; height: 100%; display: block; object-fit: cover; }
.article-cover .cover-note {
  margin: 10px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.45;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- shell + table of contents ---------- */
.article-shell {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad) clamp(48px, 8vw, 96px);
  display: grid; grid-template-columns: minmax(0, var(--col));
  justify-content: center; gap: 48px;
}
@media (min-width: 1120px) {
  .article-shell { grid-template-columns: 220px minmax(0, var(--col)); justify-content: start; gap: 64px; }
}
.article-toc { display: none; }
@media (min-width: 1120px) {
  .article-toc {
    display: block; position: sticky; top: 28px; align-self: start;
    max-height: calc(100vh - 56px); overflow: auto; padding-right: 8px;
  }
}
.article-toc .toc-title {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.article-toc a {
  display: block; padding: 8px 0; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; line-height: 1.45;
  text-transform: uppercase; color: var(--muted);
}
.article-toc a:hover,
.article-toc a.is-active { color: var(--fg); }

/* ---------- article body ---------- */
.article { font-size: 17.5px; line-height: 1.65; color: var(--fg); min-width: 0; }
.article h2, .article h3, .article h4 { scroll-margin-top: 28px; }
.article h2 {
  margin: 56px 0 18px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.018em; line-height: 1.2;
  text-wrap: balance;
}
.article h2:first-of-type { margin-top: 0; }
.article h2 .num {
  display: inline-block; margin-right: 14px; transform: translateY(-3px);
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .16em; color: var(--muted);
}
.article h3 {
  margin: 44px 0 14px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -.014em; line-height: 1.22;
  text-wrap: balance;
}
.article h3 .num {
  display: inline-block; margin-right: 12px; transform: translateY(-2px);
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; color: var(--muted);
}
.article h4 {
  margin: 30px 0 10px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(18px, 1.9vw, 20px); letter-spacing: -.008em; line-height: 1.3;
  text-wrap: balance;
}
.article > p { margin: 0 0 20px; color: var(--fg); text-wrap: pretty; }
.article strong { font-weight: 600; }
.article em { font-style: italic; }
.article p > code {
  padding: 2px 6px; border-radius: 6px; font-family: var(--mono); font-size: .86em;
  background: rgb(255 255 255 / .5); box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg);
}
.article .pull {
  margin: 36px 0; padding-left: 22px; border-left: 2px solid var(--fg);
  font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3;
  letter-spacing: -.012em; text-wrap: balance;
}

/* Wide components stay inside the column — same left and right edge as the
   text, like the figures in the reference article. They keep their own
   horizontal layout and are scaled down as a whole (see the fit script at the
   end of article.html). */
.article .wide { width: 100%; margin: 36px 0; }
.article .fitbox { position: relative; }
.article .fitbox > [data-fit] { transform-origin: top left; will-change: transform; }
.article figure { margin: 36px 0; }
/* ...except figures that sit inside a component's own layout: the code panel
   beside the variable cards and the clips in the experiment grid. The 36px
   pushed the code panel down and cut it short, so its top and bottom no
   longer lined up with the cards next to it. */
.article .codefig,
.article .clip { margin: 0; }
.article figcaption {
  margin-top: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.45;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* components bring their own captions — leave those as they were written */
.article .figure__cap,
.article .codefig figcaption,
.article .clip__head {
  font-family: var(--sans); font-size: .8rem; letter-spacing: 0; text-transform: none;
}

/* ---------- footer ---------- */
.sitefoot {
  border-top: 1px solid var(--rule); margin-top: 96px; padding: 32px var(--pad);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.sitefoot .brand-mini { display: flex; align-items: center; gap: 16px; }
.sitefoot .brand-mini img { height: 16px; opacity: .7; }
.sitefoot .links { display: flex; gap: 24px; flex-wrap: wrap; }
.sitefoot .links a:hover { color: var(--fg); }

.authors-block {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--pad) clamp(40px, 5vw, 64px);
}
.authors-block h2 {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.authors-block .authors { margin: 0 0 8px; font-size: 16px; font-weight: 400; color: var(--fg-2); }
.authors-block .affil { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font-size: 14px; color: var(--fg-2); }
.authors-block sup { font-size: .62em; margin-left: 1px; color: var(--accent); }
.authors-block .affil { margin-top: 14px; }
.authors-block .authors__toggle { color: var(--accent); }
.authors-block .authors__toggle:hover { color: var(--fg); }

/* ==========================================================================
   Component adjustments — the parts carried over from the single-page build
   ========================================================================== */

/* the architecture figure is a light card here too (see style.css); only the frame changes */
.article .figure { margin: 36px 0; border-radius: var(--r-lg); }

/* cards and rules pick up the warmer paper tone */
.article .step { border-top-color: var(--rule); }
/* :not(.edge), :not(.track__more) — the backward-arc rows and the "· · ·"
   omitted-stages cell are transparent by design, not cards */
.article .track > li:not(.edge):not(.track__more),
.article .vars li,
.article .skill { background: rgb(255 255 255 / .46); border-color: var(--rule); }
.article .track li.is-contact { background: linear-gradient(180deg, rgba(143, 86, 75, .12), rgba(143, 86, 75, .03)); border-color: rgba(143, 86, 75, .32); }
.article .kind { background: rgb(21 23 34 / .06); color: var(--fg-2); }
.article .is-contact .kind { background: rgba(143, 86, 75, .16); color: var(--accent); }
.article .track__verify svg { color: #4f7d5f; }
.article .adv li { border-top-color: var(--rule); }
/* In the narrow column the three advantage cards run taller than the nine
   trace lines, which left the bottom of the stretched trace panel empty.
   The lines share out the panel's height instead, each centred in its row. */
.article .split--stretch > .trace-col > .trace > .trace__body { display: flex; flex-direction: column; }
.article .split--stretch > .trace-col > .trace > .trace__body > li { flex: 1 1 0; align-content: center; }

/* the experiment tabs, chips and compare frames */
.article .tabs { border-bottom-color: var(--rule); gap: 2px; }
/* six tabs have to fit the article column, which is narrower than the page */
.article .tab { padding: 12px 6px 14px; gap: 6px; font-size: clamp(.8rem, 1vw, .88rem); }
.article .tab:first-child { padding-left: 0; }
.article .tab::after { left: 6px; right: 6px; background: var(--fg); }
.article .tab:first-child::after { left: 0; }
/* the numbers go so that all six tabs fit the 720px column on one line */
.article .tab__num { display: none; }
.article .tab.is-on::after { background: var(--fg); }
.article .chip { border-color: var(--rule); }
.article .chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.article .panel__title { font-family: var(--sans); font-weight: 500; letter-spacing: -.018em; }
.article .panel__summary { max-width: none; color: var(--fg-2); }
/* A lone clip across the whole column dwarfed the paired clips in the other
   tabs; two thirds of the column keeps it a little larger than one of a pair
   without its label wrapping. */
.article .compare--single { max-width: 66%; }

/* the two tinted callouts that used --violet on the old palette */
.article .sub3::before { background: var(--accent); }
.article .slot__icon { color: var(--accent); }

/* the corresponding author's address in the author legend */
.authors-block .authors__mail { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.authors-block .authors__mail:hover { color: var(--accent); }
.authors-block .authors__contact { margin-top: 6px; }
.authors-block .authors__notes { margin-top: 6px; }

/* the generated-future gallery: two cards a row fit the 720px column better than three */
.article .wm-gallery { margin-top: 0; }
.article .wm-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article .wm-case h5 { font-size: 18px; }

/* the architecture figure's cards: a warm off-white instead of pure white,
   which glared against this page's beige. Article only; the website's cooler
   page keeps its white cards. */
.article .figure .io__item, .article .figure .tool, .article .figure .toolpair, .article .figure .core { background: #f9f4ea; }
.article .figure .toolpair > .tool { background: none; }
.article .figure .io__code { background: rgb(21 23 34 / .05); }
.article .figure .loop li { background: #f0e8da; }

/* ---------- aetherlabs.ai adaptation ---------- */
/* the cover is the CRIS-0 film: show the whole 16:9 frame so the burned-in subtitles stay visible */
.article-cover .panel--video { aspect-ratio: 16 / 9; background: #000; animation: none; }
.article-cover .panel--video video { object-fit: contain; background: #000; }

/* the author list follows the reference entry used across the other aetherlabs.ai posts */
.article .references { margin-top: 72px; }
.article .references h2 { margin: 0 0 18px; font-size: 25px; }
.article .references ol { margin: 0; padding-left: 28px; }
.article .references li { padding-left: 8px; margin-bottom: 23px; scroll-margin-top: 32px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.article .references li::marker { color: var(--accent); font-family: var(--mono); }
.article .references p { margin: 0; }
.article .references p.reference-title { margin-bottom: 4px; color: var(--fg); font-size: 16px; font-weight: 500; line-height: 1.5; }
.article .references sup { line-height: 0; }

/* All six experiment tabs stay visible: spread across the column instead of
   overflowing it (the last tab was clipped behind the hidden scrollbar), and
   wrap onto a second row on narrow screens. */
.article .tabs { justify-content: space-between; flex-wrap: wrap; column-gap: 8px; overflow: visible; }
.article .tab, .article .tab:first-child { padding: 12px 0 14px; }
.article .tab::after, .article .tab:first-child::after { left: 0; right: 0; }
@media (max-width: 720px) {
  .article .tabs { justify-content: flex-start; }
  .article .tab, .article .tab:first-child { padding: 10px 0 12px; font-size: .84rem; }
}