/* ==========================================================================
   Nerv Linux — site
   Square corners, hairline rules, an 8px rhythm, and no ornament that isn't
   carrying information.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  /* Distribute words evenly across lines instead of filling greedily, which
     is what strands a single short word on the last line of a heading. */
  text-wrap: balance;
}
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
li { text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

code, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.9em; }
img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--text-on-brand);
  padding: var(--s-3) var(--s-4); font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: none; }
.prose p { text-wrap: wrap; }
/* Term colours: cyan for upstream tools, red for what Nerv made, green for NVIDIA. */
.kw { font-weight: 600; }
.diagram { margin: var(--s-7) 0 0; }
.diagram figcaption { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-tertiary); }
.diagram + .table-scroll { margin-top: var(--s-6); }
.diagram svg { width: 100%; height: auto; display: block; max-width: 960px; }
.kw--tool { color: var(--accent-cyan); }
.kw--nerv { color: var(--brand); }
.kw--nvidia { color: var(--accent-green); }

.section { padding-block: var(--s-10); }
.section--subtle { background: var(--bg-subtle); }
.section + .section { border-top: 1px solid var(--border); }
.section--head { padding-block: var(--s-9) var(--s-8); }

/* --- Headings ------------------------------------------------------------ */
.page-title {
  font-size: var(--t-3xl); margin-bottom: var(--s-5);
  font-weight: var(--w-display);   /* large, therefore lighter */
}
.page-lede {
  font-size: var(--t-md); line-height: var(--lh-loose);
  color: var(--text-secondary); max-width: none; text-wrap: wrap;
}
.section-title {
  font-size: var(--t-xl); font-weight: var(--w-title);
  margin-bottom: var(--s-5); max-width: none; text-wrap: wrap;
}
.section-lede {
  font-size: var(--t-base); color: var(--text-secondary);
  max-width: none; margin-bottom: var(--s-5);
}
.sub-title {
  font-size: var(--t-lg);
  margin-top: var(--s-8); margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.crumb {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.crumb a { color: var(--text-tertiary); }

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-subtle); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.masthead__inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter);
  height: 56px; display: flex; align-items: center; gap: var(--s-6);
}
.masthead__brand { display: flex; align-items: center; text-decoration: none; }
.masthead__brand .logo { height: 30px; width: auto; }

/* One artwork, both themes. The wordmark is red with a white keyline: the
   keyline separates it from a dark ground and disappears into a light one, so
   the pair of theme-swapped files this used to need is gone. */

.masthead__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.masthead__nav a {
  color: var(--text); font-size: var(--t-sm);
  padding: var(--s-2) var(--s-3); opacity: .8;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.masthead__nav a:hover { opacity: 1; background: var(--bg-sunken); text-decoration: none; }
.masthead__nav a[aria-current="page"] {
  opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand);
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--s-2);
  width: 34px; height: 34px;
  background: none; border: 1px solid var(--border-interactive); color: var(--text);
  cursor: pointer; opacity: .8;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { opacity: 1; border-color: var(--text-secondary); }
/* Show the icon for the theme you would switch TO. */
.icon--sun  { display: var(--show-when-dark); }
.icon--moon { display: var(--show-when-light); }

/* --- Landing hero -------------------------------------------------------- */
/* Sits on artwork, so it stays dark in both themes and sets its own colours.

   The grey gradient is the design, not a placeholder for a photo. Three
   layers, in the order they stack:

     1. scanlines at a 3px pitch. A 72px grid was tried first and the problem
        with it was structural rather than cosmetic: cells that large are read
        as an alignment, so every viewport width that does not divide evenly
        looks like a mistake. At 3px there is no perceptible cell, only
        texture, and it cannot mis-align with anything.
     2. a light source off the top-left corner, so the panel has a direction
        instead of being a flat wash.
     3. the grey itself, four stops running to near-black bottom-right.

   All CSS, no image, nothing to load. */
.herobig {
  position: relative;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--myelin-n90) 3%, transparent) 0 1px,
      transparent 1px 3px),
    radial-gradient(120% 150% at 8% -20%,
      color-mix(in srgb, var(--myelin-n90) 14%, transparent) 0%,
      transparent 55%),
    linear-gradient(155deg, var(--myelin-n42) 0%, var(--myelin-n32) 42%,
                    var(--myelin-n28) 78%, var(--myelin-n24) 100%);
}
.herobig__inner {
  /* Above the photo. The panel comes later in the DOM, so without this the
     photo would paint over the headline at the same stacking level. */
  position: relative; z-index: 3; padding-block: var(--s-11);
}
/* The text column is an explicit width, NOT a percentage padding on .wrap.
   Percentage padding resolves against the containing block's inline size,
   which here is the section (the viewport), not the wrap's content width, so
   `padding-right: 52%` quietly took 749px of a 1264px column and starved the
   text. An explicit measure is predictable at every viewport width.

   600px is set by the heading's longest authored line, "built from scratch on
   musl". Starve the column below that and the line wraps before its own <br>
   can apply, which is the single thing the authored breaks exist to prevent.
   It also keeps the text clear of the point where the photo's mask reaches
   about 0.2 alpha, so nothing is ever read against a competing image. */
@media (min-width: 900px) {
  .herobig__title,
  .herobig__points,
  .herobig .actions { max-width: 720px; }
}

/* The photo panel: full height, bleeding to the right edge of the viewport.
   The mask is the whole trick. The gradient bottoms out on Myelin's darkest
   neutral and the grade lands its shadows there too, so a photo fading left stops
   reading as an inserted picture and becomes part of the same surface.
   Without the mask this is a rectangle stuck on a gradient.

   The ramp is placed by what is PERCEPTIBLE rather than by even percentages.
   Measured against a checkerboard in this panel, alpha under roughly 0.2 is
   invisible on this gradient, so a mask that spends its first third down
   there wastes that third and the photo still reads as a narrow strip. This
   one reaches useful opacity early and is solid by 34% of the panel, which
   lands the photo across the right half of the page. The intermediate stops
   approximate an ease, so there is no visible band where the ramp starts or
   finishes. */
/* Scrim: sits above the photo and below the text. The art direction asks for
   an empty, shadowed left third, but a headline must not depend on a
   photographer honouring that. This makes the contrast behind the text a
   property of the page rather than of the picture. */
.herobig::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--myelin-n24) 72%, transparent) 0%,
    color-mix(in srgb, var(--myelin-n24) 52%, transparent) 34%,
    color-mix(in srgb, var(--myelin-n24) 18%, transparent) 52%,
    transparent 66%);
}

.herobig__photo {
  position: absolute; z-index: 1;
  top: 0; bottom: 0; right: 0; width: 60%;
  overflow: hidden;
  /* A mask reads only the alpha channel, so the black here is arbitrary and
     is not a colour the palette owns. */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.16) 12%,
    rgba(0,0,0,.42) 18%, rgba(0,0,0,.72) 24%, rgba(0,0,0,.92) 29%,
    rgba(0,0,0,1) 34%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.16) 12%,
    rgba(0,0,0,.42) 18%, rgba(0,0,0,.72) 24%, rgba(0,0,0,.92) 29%,
    rgba(0,0,0,1) 34%);
}
.herobig__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.herobig__photo .slot { height: 100%; border-left: 0; }
/* Below 900px the photo moves under the text as a band that fades in from
   the gradient above it, instead of disappearing. */
@media (max-width: 899px) {
  .herobig::after { display: none; }
  .herobig__inner { padding-bottom: var(--s-6); }
  .herobig__photo {
    position: relative; width: 100%; height: clamp(240px, 70vw, 420px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, rgba(0,0,0,1) 40%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, rgba(0,0,0,1) 40%);
  }
  .herobig__photo img { object-position: center 12%; }
}
.herobig__title {
  font-size: var(--t-display);
  font-weight: var(--w-display);
  line-height: 1.2; letter-spacing: 0; color: var(--myelin-n100);
  margin-bottom: var(--s-6);
  /* The text column is already bounded by the photo panel's padding, so a ch
     cap here only narrows it twice. And `balance` is wrong in a narrow column:
     evening the line lengths made four short lines out of what fills in three.
     Let it fill greedily against the column it is in. */
  /* The breaks in this heading are authored, so no measure cap and no
     balancing: either would rewrap the line before the <br> could apply.
     .br-wide drops them below 700px and the line reflows on its own. */
  max-width: none;
  text-wrap: initial;
}
.herobig__title .hl { color: var(--nerv-green); }

/* Four statements sharing one red rule. A list, not <br>-separated text, so a
   long line wraps under itself on a narrow screen instead of breaking the
   set apart. */
.herobig__points {
  list-style: none; margin: 0 0 var(--s-7); padding: 0 0 0 var(--s-5);
  font-size: var(--t-md); line-height: 1.9;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  border-left: 3px solid var(--brand);
  /* Wide enough that the longest of the four sits on one line at desktop
     width. Four statements that wrap into six lines stop reading as a set. */
  max-width: 72ch;
}
.herobig__points li + li { margin-top: var(--s-3); }

/* Authored line break, dropped on narrow screens so the line can reflow
   instead of stranding a fragment. */
@media (max-width: 700px) { .br-wide { display: none; } }

/* --- Buttons ------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn {
  display: inline-flex; align-items: center;
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-sm); font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
/* Myelin ships an -ink variant precisely for a fill, with --myelin-on-ink as
   the text on it. The hover darkens the same colour rather than naming a
   second one. */
.btn--primary { background: var(--brand); color: var(--text-on-brand); }
.btn--primary:hover { background: color-mix(in srgb, var(--brand) 84%, var(--myelin-fg)); }
.btn--ghost {
  border-color: color-mix(in srgb, var(--text) 45%, transparent);
  color: var(--text);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-color: var(--text);
}

/* --- Claim tiles --------------------------------------------------------- */
.claims {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.claim {
  padding: var(--s-6);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.claim__head {
  font-size: var(--t-lg); line-height: var(--lh-snug);
  margin-bottom: var(--s-4);
}
.claim p { color: var(--text-secondary); font-size: var(--t-sm); line-height: var(--lh-loose); }
.claim__more { margin-top: auto; padding-top: var(--s-4); font-weight: 600; }
.claim__more a { color: var(--brand); }

/* --- Essay (long-form argument pages) ------------------------------------ */
/* Read, not scanned — so this is the one place the serif takes over. Headings
   stay sans: the voice is in the display face, the reading is in the text
   face, and the contrast between them is the hierarchy. */
.essay { max-width: 40rem; margin-inline: auto; font-family: var(--font-serif); }
.essay h2, .essay h3, .essay .lead { font-family: var(--font-sans); }
.essay > p { font-size: var(--t-md); line-height: var(--lh-loose); margin-bottom: var(--s-5); }
.essay h2 {
  font-size: var(--t-xl); margin-top: var(--s-10); margin-bottom: var(--s-5);
  padding-top: var(--s-5); border-top: 1px solid var(--border);
}
.essay h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.essay h3 { font-size: var(--t-lg); margin-top: var(--s-7); margin-bottom: var(--s-4); }
.essay .lead {
  font-size: var(--t-lg); line-height: var(--lh-snug);
  color: var(--text); margin-bottom: var(--s-7);
}
.essay ul, .essay ol { padding-left: var(--s-5); margin-bottom: var(--s-5); }
.essay li { font-size: var(--t-md); line-height: var(--lh-loose); margin-bottom: var(--s-3); }

/* A claim set apart because the argument turns on it. */
.pull {
  margin: var(--s-7) 0;
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 3px solid var(--brand);
  font-size: var(--t-lg); line-height: var(--lh-snug);
  color: var(--text);
}
.pull p { margin: 0; }
.pull cite { display: block; margin-top: var(--s-3); font-size: var(--t-sm);
             font-style: normal; color: var(--text-tertiary); }

/* The escaped/returned table — the centre of the argument. */
.escaped { width: 100%; border-collapse: collapse; margin: var(--s-6) 0 var(--s-7); font-size: var(--t-base); }
.escaped th, .escaped td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--border); }
.escaped thead th {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-strong);
}
.escaped tr.open td { color: var(--brand); font-weight: 600; }

/* --- Index list (front page + /design/) ---------------------------------- */
.index-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.index-item {
  padding: var(--s-5) var(--s-6);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.index-item:hover { background: var(--bg-subtle); }
.index-item h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.index-item p { color: var(--text-secondary); font-size: var(--t-sm); line-height: var(--lh-loose); }

/* --- Terminal ------------------------------------------------------------ */
/* Myelin's plain colours, not the -ink variants: a terminal block is a
   picture of the palette rather than a use of it. */
.term {
  background: var(--nerv-bg); color: var(--nerv-fg);
  border: 1px solid var(--term-bg-deep);
  font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-snug);
  overflow-x: auto; margin: 0;
}
.term__bar {
  background: var(--term-bg-deep); padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs); letter-spacing: var(--tracking-wide);
  color: var(--nerv-gray); border-bottom: 1px solid var(--nerv-bg);
}
.term__body { padding: var(--s-4); margin: 0; white-space: pre; }
.term .c-red { color: var(--nerv-red); }
.term .c-green { color: var(--nerv-green); }
.term .c-yellow { color: var(--nerv-yellow); }
.term .c-blue { color: var(--nerv-blue); }
.term .c-purple { color: var(--nerv-magenta); }
.term .c-cyan { color: var(--nerv-cyan); }
.term .c-grey { color: var(--nerv-gray); }
.term .c-fg { color: var(--nerv-fg); }

/* --- Tables -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-block: var(--s-6); scrollbar-color: var(--border-strong) transparent; }
.table-scroll:last-child { margin-bottom: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th, table.data td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.data tbody tr:hover { background: var(--bg-subtle); }
.section--subtle table.data tbody tr:hover { background: var(--bg); }
table.data td code { font-size: var(--t-xs); background: var(--bg-sunken); padding: 2px 6px; }
.col-classic { color: var(--text-tertiary); }
.col-nerv { color: var(--accent-green); font-weight: 600; }

/* --- Benchmark small multiples ------------------------------------------- */
.bench {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4) var(--s-6); margin-block: var(--s-6);
}
.bench__group {
  grid-column: 1 / -1; margin: var(--s-3) 0 0; padding-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand); border-bottom: 1px solid var(--border-strong);
}
.bench__group:first-child { margin-top: 0; }
.bench__tile { min-width: 0; }
.bench__title { margin: 0 0 var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.bench__title span { font-weight: 400; font-size: var(--t-xs); color: var(--text-tertiary); white-space: nowrap; }
.bench__row {
  display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1; margin-bottom: 4px;
}
.bench__name { color: var(--text-secondary); }
.bench__track { display: flex; align-items: center; gap: var(--s-2); min-width: 0; height: 14px; }
.bench__bar { height: 12px; border-radius: 0 3px 3px 0; background: var(--border-strong); flex: none; min-width: 2px; }
.bench__val { color: var(--text); white-space: nowrap; }
.bench__none { color: var(--text-tertiary); }
.bench__row--nerv .bench__name { color: var(--brand); font-weight: 600; }
.bench__row--nerv .bench__bar { background: var(--brand); }
.bench__row--nerv .bench__val { font-weight: 600; }

/* --- Misc content -------------------------------------------------------- */
.list { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.list li { margin-bottom: var(--s-2); }
.doclink {
  font-size: var(--t-sm); color: var(--text-tertiary);
  border-top: 1px solid var(--border); padding-top: var(--s-4); margin-top: var(--s-6);
}
.after-table { font-size: var(--t-sm); }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 2px var(--s-2); border: 1px solid currentColor; white-space: nowrap;
}
.pill--shipping { color: var(--accent-green); }
.pill--building { color: var(--accent-yellow); }
.pill--design { color: var(--text-tertiary); }

/* --- Footer -------------------------------------------------------------- */
.footer {
  background: var(--bg-sunken); color: var(--text);
  border-top: 1px solid var(--border);
  padding-block: var(--s-8) var(--s-7);
}
.footer a { color: var(--text); opacity: .8; }
.footer a:hover { opacity: 1; }
.footer__links {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--border);
}
.footer__base { padding-top: var(--s-5); font-size: var(--t-xs); opacity: .65; }
.footer__base p { margin-bottom: var(--s-3); line-height: var(--lh-body); max-width: none; text-wrap: wrap; }
.footer__tm { opacity: .8; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .herobig__inner { padding-block: var(--s-9); }
  .section { padding-block: var(--s-8); }
  .page-title { font-size: var(--t-2xl); }
}
.masthead__links { display: flex; align-items: center; gap: var(--s-1); }
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  margin-left: var(--s-2); width: 34px; height: 34px;
  background: none; border: 1px solid var(--border-interactive); color: var(--text); cursor: pointer;
}
.menu-toggle__close { display: none; }
.masthead.is-open .menu-toggle__open { display: none; }
.masthead.is-open .menu-toggle__close { display: inline; }



/* --- Handbook chapters --------------------------------------------------- */
/* mdrender.py emits these. They exist here rather than in the renderer so a
   chapter is styled by the site, not by the thing that converted it. */
hr.rule {
  border: 0; border-top: 1px solid var(--border);
  margin-block: var(--s-8);
}
/* The handbook's sanctioned "Underneath." box: one sentence of mechanism plus
   a link. A callout, not a quotation, so it does not get quote styling. */
blockquote.note {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent-blue);
  font-family: var(--font-sans);
  font-size: var(--t-sm); line-height: var(--lh-loose);
}
blockquote.note p { margin: 0; }
.essay > .table-scroll table.data { font-family: var(--font-sans); }
.essay pre.term { margin-block: var(--s-6); padding: var(--s-4); }

/* --- Fleet answers (enterprise) ----------------------------------------- */
.answers {
  /* Two columns, not auto-fit: four items with a paragraph each read as a
     2x2 block, where auto-fit makes four thin columns of wildly uneven
     height. The count is known, so it is stated. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin-block: var(--s-6);
}
.answer { background: var(--bg); padding: var(--s-5) var(--s-6); }
.section--subtle .answer { background: var(--bg-subtle); }
.answer__q {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--s-3);
}
.answer h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.answer p { color: var(--text-secondary); font-size: var(--t-sm); line-height: var(--lh-loose); }
.answer__tool { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 600; }
.answer__tool a { color: var(--brand); }
@media (max-width: 760px) { .answers { grid-template-columns: 1fr; } }


/* --- Poster: one sentence nobody can parse without stopping -------------- */
/* Some capabilities are not demonstrable in fifteen seconds of video; they are
   a stack of things that should not coexist. Those want a poster, and the
   annotation row underneath is where each clause names the thing that makes it
   true. */
.poster { padding-block: var(--s-9) 0; }
.poster__label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent-cyan); margin-bottom: var(--s-5);
}
.poster__line {
  font-family: var(--font-display);
  font-weight: var(--w-poster);
  /* Just under the hero. A proof section that outsizes the h1 inverts the
     page's hierarchy, however much the proof deserves the room. */
  font-size: var(--t-display);
  line-height: 1.18; letter-spacing: 0;
  margin: 0 0 var(--s-7);
  /* No measure cap. A ch limit on a display line manufactures line breaks,
     which is the opposite of letting the page respond to its width. */
  /* The breaks in this heading are authored, so no measure cap and no
     balancing: either would rewrap the line before the <br> could apply.
     .br-wide drops them below 700px and the line reflows on its own. */
  max-width: none;
  text-wrap: initial;
  color: var(--text);
}
/* No colour here. Green means NVIDIA on this site and nothing else; a claim
   that borrows it dilutes the one place it carries meaning. Size and position
   carry this line. */

/* The demonstration, under the claim. Big enough to be read as part of the
   headline rather than as body copy, small enough that the claim still wins. */
.poster__sub {
  font-size: var(--t-md); line-height: var(--lh-snug);
  color: var(--text-secondary);
  /* No measure cap. This is one sentence under a claim, not a column of body
     copy, and it fits the full width at this size. A ch cap here did what a ch
     cap always does: invented a line break nobody asked for. */
  max-width: none;
  margin: calc(var(--s-6) * -1) 0 var(--s-7);
}

/* The readout. Real values, in the machine's voice: cyan and monospaced. */
.readout {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .04em;
  border: 1px solid var(--border); border-left: 2px solid var(--accent-cyan);
  padding: var(--s-3) var(--s-4);
  color: var(--accent-cyan);
  margin-bottom: var(--s-7);
}
.readout p { margin: 0; text-wrap: wrap; }
.readout p + p { margin-top: var(--s-4); }
.readout__text { max-width: none; font-size: var(--t-base); line-height: var(--lh-body); color: var(--text); }
.readout span { white-space: nowrap; }
.readout .sep { color: var(--border-strong); }

/* Screenshot and its explanation side by side; stacks where the hero photo hides. */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  align-items: stretch;
}
.split .readout {
  margin-bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.poster__line--cyan { color: var(--accent-cyan); }
.split .shot figcaption { margin: 0 0 var(--s-3); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

/* --- Figures: screenshots are product photography ----------------------- */
.shot { margin: 0; }
.shot img { width: 100%; display: block; border: 1px solid var(--border); }
.shot figcaption {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .04em; color: var(--text-tertiary);
  margin-top: var(--s-3);
}
/* A stand-in image that must not reach production. The badge is deliberately
   loud, and build.py refuses to publish while any remain, because the failure
   this prevents is shipping somebody else's watermarked marketing still. */
.shot--provisional { position: relative; }
.shot--provisional::after {
  content: "PROVISIONAL";
  position: absolute; top: 0; left: 0;
  background: var(--accent-yellow); color: var(--myelin-on-ink);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-caps);
  padding: var(--s-2) var(--s-3);
}

/* The desktop section. It was full-bleed while the Quake shot sat inside the
   wrap, which put two screenshots of the same machine at 1264px and 1440px on
   a 1440 viewport. A 14% difference is the worst available amount: visible,
   but not enough to read as a decision. They match now, and the markup of the
   two sections is identical, so they cannot drift apart again. */
.bleed { padding-block: var(--s-9) var(--s-10); border-bottom: 1px solid var(--border); }
.bleed .shot { margin-top: var(--s-6); }
.bleed__line {
  font-family: var(--font-display); font-weight: var(--w-poster);
  font-size: var(--t-display);
  line-height: 1.2; letter-spacing: 0;
  max-width: none; text-wrap: wrap;
}
.bleed .shot figcaption { margin-top: var(--s-4); text-wrap: wrap; max-width: none; }

/* A slot with no image yet. Deliberately ugly: an empty frame that looks
   designed is an empty frame that ships. */
.slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  border: 1px dashed var(--accent-yellow);
  color: var(--accent-yellow);
  font-family: var(--font-mono); font-size: var(--t-sm);
  text-align: center; padding: var(--s-6); line-height: var(--lh-body);
}

/* --- Proof strip: the numbers, without the paragraphs ------------------- */
.poster .figures { margin-bottom: var(--s-10); }
.poster .figures:has(+ .figures--second) { margin-bottom: 0; }
.figures--second { border-top: 0; }
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.figure {
  padding: var(--s-5) var(--s-6);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.figure__n {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--t-2xl); line-height: 1; color: var(--text);
  display: block; margin-bottom: var(--s-3);
}
.figure__what { font-size: var(--t-sm); color: var(--text-secondary); line-height: var(--lh-body); }
.figure__what a { color: var(--brand); }

/* Desktop page: Myelin accents and an Ashinoko specimen. */
.swatches { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-4); }
.swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.swatch__chip { height: 56px; border-radius: 4px; }
.swatch__name { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--s-2); }
.specimen { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.specimen__line { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--text); overflow-wrap: anywhere; }
.section--head .shot { margin-top: var(--s-7); }
.diagram + .prose { margin-top: var(--s-7); }
.specimen__line--big { font-size: clamp(1.5rem, 4vw, 2.6rem); letter-spacing: 0.04em; }

/* About: the forest band. The photo stays dark in both themes, so the title
   is set on-dark and a gradient pulls the bottom edge into the page. */
.forest {
  min-height: clamp(320px, 42vw, 560px);
  display: flex; align-items: center; text-align: center;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.05) 40%, rgb(0 0 0 / 0.55)),
    url("/assets/photos/sweden.jpg") center 60% / cover no-repeat;
}
.forest .wrap { width: 100%; }
.forest .page-title { margin-bottom: 0; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / 0.5); }

/* Section titles with a leading line icon (Community). */
.section-title--icon { display: flex; align-items: center; gap: 0.5em; }
.section-icon { width: 1.1em; height: 1.1em; flex: none; color: var(--brand); }

/* --- Handbook: contents on the left, the chapter beside it -------------- */
.hb { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.hb__main .essay { margin-inline: 0; }
.hb-nav { position: sticky; top: calc(56px + var(--s-6)); max-height: calc(100vh - 56px - var(--s-8)); overflow-y: auto; font-size: var(--t-sm); }
.hb-nav__summary { display: none; }
.hb-nav__home { display: block; font-weight: 600; color: var(--text); margin-bottom: var(--s-5); }
.hb-nav__part {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary); margin: var(--s-5) 0 var(--s-2);
}
.hb-nav__list, .hb-nav__sections { list-style: none; margin: 0; padding: 0; }
.hb-nav__list > li > a { display: block; padding: var(--s-2) var(--s-3); color: var(--text-secondary); border-left: 2px solid var(--border); }
.hb-nav__list > li > a:hover { color: var(--text); text-decoration: none; border-left-color: var(--text-secondary); }
.hb-nav__list > li > a[aria-current="page"] { color: var(--text); font-weight: 600; border-left-color: var(--brand); }
.hb-nav__sections { border-left: 2px solid var(--border); padding: 0 0 var(--s-2); }
.hb-nav__sections a { display: block; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-5); color: var(--text-tertiary); font-size: var(--t-xs); line-height: 1.4; }
.hb-nav__sections a:hover { color: var(--text); text-decoration: none; }

.hb-toc { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.hb-toc li { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); margin: 0; }
.hb-toc a { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-lg); }
.hb-toc p { margin: var(--s-2) 0 0; color: var(--text-secondary); }

.hb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); max-width: 40rem; margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.hb-pager a { display: block; padding: var(--s-4); border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.hb-pager a:hover { border-color: var(--text-secondary); text-decoration: none; }
.hb-pager span { display: block; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--s-1); }
.hb-pager__next { text-align: right; grid-column: 2; }

@media (max-width: 960px) {
  .hb { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hb-nav { position: static; max-height: none; overflow: visible; border: 1px solid var(--border); padding: 0 var(--s-4); }
  .hb-nav__summary { display: block; cursor: pointer; padding: var(--s-3) 0; font-weight: 600; color: var(--text); }
  .hb-nav__box[open] { padding-bottom: var(--s-4); }
  .hb-nav__home { margin-top: var(--s-2); }
}

/* --- Phones ------------------------------------------------------------- */
/* Last in the file so it wins over the component rules above it. */
@media (max-width: 760px) {
  /* The links fold into a panel under the masthead. */
  .menu-toggle { display: inline-flex; }
  .masthead__links {
    display: none; position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
    padding: var(--s-2) var(--gutter) var(--s-4);
  }
  .masthead.is-open .masthead__links { display: flex; }
  .masthead__links a { padding: var(--s-3) 0; font-size: var(--t-base); border-bottom: 1px solid var(--border); }
  .masthead__links a:last-child { border-bottom: 0; }
  .masthead__nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); padding-left: var(--s-3); }

  /* Diagrams are drawn at 960 wide; below this they scroll sideways at a
     readable size instead of shrinking their labels to nothing. */
  .diagram { position: relative; cursor: zoom-in; }
  .diagram figcaption { font-size: var(--t-sm); }
  .diagram::after {
    content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
    background: var(--bg-subtle) center / 16px no-repeat;
    border: 1px solid var(--border-interactive);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  }

  /* Tables become one card per row, each value labelled with its column. */
  table.data thead { display: none; }
  table.data, table.data tbody, table.data td { display: block; width: 100%; }
  table.data tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); column-gap: var(--s-4); }
  table.data td:first-child { grid-column: 1 / -1; }
  table.data td { border: 0; padding: var(--s-1) 0; }
  table.data td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-tertiary);
  }
  table.data td:first-child { font-weight: 600; color: var(--text); }
  table.data td:first-child::before { display: none; }

  /* The headline figures sit two to a row. */
  .figures { grid-template-columns: 1fr 1fr; }
  .figure { padding: var(--s-4); }
  .figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .shot figcaption, .bleed .shot figcaption { font-size: var(--t-sm); letter-spacing: 0; }
}

/* Diagram viewer: a tapped diagram opens full screen at a readable size and
   pans in both directions; pinch zoom works on top of that. */
.zoom {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.zoom svg { display: block; width: 1100px; max-width: none; height: auto; padding: 64px 16px 24px; }
.zoom__close {
  position: fixed; top: 12px; right: 12px; z-index: 101;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text); border: 1px solid var(--border-interactive); cursor: pointer;
}
body.has-zoom { overflow: hidden; }

/* Dark scrollbars on everything that scrolls sideways. */
pre, .table-scroll, .diagram { scrollbar-color: var(--border-strong) transparent; }