/* ============================================================================
   THE CRAFT — a book about photographs.

   Loaded AFTER ../css/site.css, which supplies the :root tokens. Nothing here
   invents a colour: ../../frontend/styles.css :root is the machine truth, there
   are already two copies of it, and the palette has been changed unasked once
   before and had to be reverted. Do not do it again.

   THE DESIGN DECISION, so nobody flattens it back into a document:

   The page has one accent and a near-black ground, which on its own is the most
   generic dark-theme look there is. It escapes that by being IMAGE-LED — chapter
   plates run full-bleed at 78vh, comparison stages run edge to edge, and the
   colour a reader actually perceives is the orange sodium light and teal dusk in
   the photographs, not the chrome. Shrink the imagery back into the text column
   and the whole thing collapses into a text file with figures, which is exactly
   what it was on the first pass.

   Type carries the rest. Archivo at wdth:125 / wght:800 is the display face —
   wide, engraved, technical, closer to the markings on a lens barrel than to a
   magazine headline. It is used ONLY for chapter numbers and part titles, at
   sizes that would be absurd anywhere else. Schibsted Grotesk (the product's
   face) sets the prose; Spline Sans Mono sets everything that is data.

   --accent still means exactly one thing: this is live. Never decoration.
   ============================================================================ */

.craft {
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;                 /* clip, not hidden — hidden makes a scroll container */
  --display: 'Archivo', 'Schibsted Grotesk', system-ui, sans-serif;
  --measure: 63ch;
  --nav: 264px;
}

.craft ::selection { background: var(--accent-35); color: var(--fg); }

/* The page preaches grain in chapter 01.5 and would be a hypocrite without it.
   One fixed turbulence layer at 3.5% — enough to kill the flat digital black,
   not enough to see unless you look for it. */
.craft::after {
  content: '';
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reading-progress hairline */
.rail { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.rail i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

/* ============================== the contents ==============================
   Styled as a camera report rather than a nav: mono throughout, tabular part
   numbers, a hairline spine, and the running chapter marked by a lit bar. */

.toc {
  position: fixed;                  /* fixed, not sticky — site.css puts overflow on body */
  inset: 0 auto 0 0;
  width: var(--nav);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--sunk);
  border-right: 1px solid var(--line);
}

.toc__home { display: block; padding: 22px 22px 18px; text-decoration: none; border-bottom: 1px solid var(--line); }
.toc__mark {
  display: block; font-family: var(--display); font-weight: 800;
  font-stretch: 125%; font-size: 15px; letter-spacing: .01em;
  text-transform: uppercase; color: var(--fg);
}
.toc__back { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--fg-faint); }
.toc__home:hover .toc__back { color: var(--accent); }

.toc__search { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toc__search input {
  width: 100%; box-sizing: border-box;
  background: var(--ink); border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); font-family: var(--mono); font-size: 11px; padding: 7px 10px;
}
.toc__search input::placeholder { color: var(--fg-faint); }
.toc__search input:focus { outline: none; border-color: var(--accent-35); }

.toc__list { flex: 1; overflow-y: auto; padding: 8px 0 20px; scrollbar-width: thin; }
.toc__list::-webkit-scrollbar { width: 5px; }
.toc__list::-webkit-scrollbar-thumb { background: var(--border-2); }

.tocp__h {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 12px 20px 8px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted);
}
.tocp__h:hover { color: var(--fg); }
.tocp__n { color: var(--accent-60); font-variant-numeric: tabular-nums; }
.tocp__h[aria-expanded="false"] + .tocp__ch { display: none; }

.tocl {
  display: block; padding: 6px 18px 6px 41px; position: relative;
  color: var(--fg-muted); text-decoration: none; font-size: 12.5px; line-height: 1.4;
  border-left: 2px solid transparent;
}
.tocl:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.tocl.on { color: var(--fg); border-left-color: var(--accent); background: var(--accent-05); }
.tocl.off { display: none; }

.toc__foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); }
.toc__all {
  background: none; border: 1px solid var(--border-2); border-radius: 5px;
  color: var(--fg-muted); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; cursor: pointer;
}
.toc__all:hover { color: var(--fg); border-color: var(--border-3); }
.toc__count { font-size: 9.5px; color: var(--fg-faint); margin-left: auto; }

.toc__open {
  display: none; position: fixed; z-index: 55; left: 14px; top: 14px;
  background: var(--raise); border: 1px solid var(--border-2); border-radius: 7px;
  color: var(--fg); font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 9px 13px; cursor: pointer;
}

/* ================================= the doc ================================
   The doc is NOT padded. Full-bleed children reach the viewport edge; prose
   opts back in with .col. That is the inversion that makes it a book. */

.doc { margin-left: var(--nav); padding: 0 0 120px; }
.col { max-width: 1180px; padding: 0 clamp(22px, 4vw, 64px); margin: 0 auto; }
.col--read { max-width: calc(var(--measure) + 128px); margin: 0; }

/* ---- masthead. The title is the largest thing on the site, over the plate. -- */

.top { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.top__bg { position: absolute; inset: 0; z-index: 0; }
.top__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.top__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,14,17,.72) 0%, rgba(13,14,17,.35) 38%, var(--ink) 96%);
}
.top__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 7vh, 84px); }

.top__h {
  margin: 12px 0 0;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(64px, 13vw, 188px); line-height: .82; letter-spacing: -.045em;
  text-transform: uppercase; text-wrap: balance;
}
.top__sub {
  margin: 20px 0 0; max-width: 34ch;
  font-size: clamp(18px, 2.1vw, 25px); line-height: 1.28; color: var(--fg);
  font-weight: 600; letter-spacing: -.018em;
}
.top__stand { margin: 16px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.62; color: var(--fg-muted); }
.top__meta {
  display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 0;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  border-top: 1px solid var(--border-2);
}
.top__meta span {
  padding: 12px 22px 0 0; margin-right: 22px; color: var(--fg-faint);
  border-right: 1px solid var(--border); padding-bottom: 4px;
}
.top__meta span:last-child { border-right: 0; }
.top__meta b { color: var(--accent); font-weight: 600; }

/* ---- book divider. A full stop, not a heading. ---- */

.book { padding: clamp(80px, 14vh, 150px) 0 clamp(30px, 6vh, 66px); }
.book__n {
  margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}
.book__t {
  margin: 14px 0 0;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(48px, 10vw, 140px); line-height: .84; letter-spacing: -.05em;
  text-transform: uppercase;
}
.book__s { margin: 22px 0 0; max-width: 48ch; font-size: 15.5px; line-height: 1.55; color: var(--fg-muted); }

/* ---- chapter opener. Full-bleed plate, the number set enormous over it. ---- */

.open { position: relative; min-height: 74vh; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 8px; }
.open--bare { min-height: 0; padding-top: 116px; }
.open__bg { position: absolute; inset: 0; z-index: 0; }
.open__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.open__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,14,17,.55) 0%, rgba(13,14,17,.18) 34%, var(--ink) 97%);
}
.open__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(28px, 5vh, 60px); }

.open__n {
  display: block;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(58px, 11vw, 150px); line-height: .78; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--border-3);
}
.open--bare .open__n { -webkit-text-stroke-color: var(--border-2); }
.open__h {
  margin: -.1em 0 0;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(36px, 6.6vw, 92px); line-height: .9; letter-spacing: -.04em;
  text-transform: uppercase; text-wrap: balance;
}
.open__b { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--fg-soft); }

/* ---- chapter (collapsible) ---- */

.ch { border-top: 1px solid var(--line); }
.ch[open] { padding-bottom: 52px; }

.ch__sum { list-style: none; cursor: pointer; }
.ch__sum::-webkit-details-marker { display: none; }
.ch__row { display: flex; align-items: baseline; gap: 15px; padding: 30px 0 20px; }
.ch__sum:hover .ch__t { color: var(--accent); }

.ch__mark { flex: none; width: 12px; height: 12px; position: relative; top: 6px; border: 1px solid var(--border-3); border-radius: 3px; transition: .18s var(--ease); }
.ch__mark::before, .ch__mark::after { content: ''; position: absolute; background: var(--fg-muted); transition: .18s var(--ease); }
.ch__mark::before { inset: 5px 2px auto; height: 1px; }
.ch__mark::after { inset: 2px auto 2px 5px; width: 1px; }
.ch[open] .ch__mark::after { transform: scaleY(0); }
.ch[open] .ch__mark { border-color: var(--accent-35); }
.ch[open] .ch__mark::before { background: var(--accent); }

.ch__t {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(22px, 2.7vw, 34px); line-height: 1.05; letter-spacing: -.03em;
  transition: color .16s var(--ease);
}
.ch__k { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); padding-top: 8px; }

/* ---- text blocks ---- */

.b-lead {
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.42; color: var(--fg);
  max-width: 46ch; margin: 0 0 26px; font-weight: 600; letter-spacing: -.018em;
}
.b-p { margin: 0 0 18px; max-width: var(--measure); color: var(--fg-soft); }
.b-p b, .b-lead b { color: var(--fg); font-weight: 700; }
/* italic is emphasis on a WORD, where bold is emphasis on a claim. Schibsted has no
   true italic, so lean on colour and a hair of tracking rather than a synthesised slant. */
.b-p i, .b-lead i, .b-li i, .b-td i, .b-cap i, .b-note i {
  font-style: normal; color: var(--fg); letter-spacing: .005em;
  box-shadow: inset 0 -1px 0 var(--accent-35);
}
.b-p code, .b-lead code, .b-li code, .b-td code {
  font-family: var(--mono); font-size: .86em; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--fg);
}
.b-p a, .b-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-35); }
.b-p a:hover, .b-note a:hover { border-bottom-color: var(--accent); }

/* The rule is a full-measure statement, not a boxed callout. A hairline above,
   the word RULE in the margin, and the sentence at display size. */
.b-rule {
  margin: 40px 0 38px; padding: 20px 0 0; max-width: 30ch;
  border-top: 2px solid var(--fg);
  font-family: var(--display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(21px, 2.5vw, 31px); line-height: 1.1; letter-spacing: -.032em;
  color: var(--fg);
}
.b-rule::before {
  content: 'Rule'; display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}

.b-note {
  margin: 22px 0; padding: 0 0 0 18px; max-width: var(--measure);
  border-left: 1px solid var(--border-2);
  font-size: 13px; line-height: 1.62; color: var(--fg-muted);
}

.b-list, .b-steps { margin: 0 0 22px; padding: 0; max-width: var(--measure); list-style: none; counter-reset: s; }
.b-li { position: relative; padding-left: 27px; margin-bottom: 12px; color: var(--fg-soft); }
.b-list .b-li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 1px; background: var(--border-3); }
.b-steps .b-li { padding-left: 40px; margin-bottom: 16px; }
.b-steps .b-li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-60);
  font-variant-numeric: tabular-nums;
}
.b-li b { color: var(--fg); font-weight: 700; }

/* ---- table: a spec sheet, not a grid ---- */

.b-tw { margin: 28px 0 32px; overflow-x: auto; }
.b-table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 13.5px; }
.b-table th {
  text-align: left; padding: 0 20px 10px 0; border-bottom: 2px solid var(--fg);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap;
}
.b-td { padding: 13px 20px 13px 0; border-bottom: 1px solid var(--line); color: var(--fg-soft); vertical-align: top; line-height: 1.5; }
.b-table tr:hover .b-td { color: var(--fg); }
.b-td:first-child { color: var(--fg); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

/* ---- do / don't ---- */

.b-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0 32px; border-top: 1px solid var(--border-2); }
.b-col { padding: 18px 24px 20px 0; }
.b-col--do { padding-left: 24px; border-left: 1px solid var(--border-2); }
.b-col h4 { margin: 0 0 14px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.b-col--dont h4 { color: var(--danger); }
.b-col--do h4 { color: var(--ok); }
.b-col ul { margin: 0; padding: 0; list-style: none; }
.b-col li { font-size: 13px; line-height: 1.5; color: var(--fg-soft); padding: 9px 0; border-top: 1px solid var(--line); }
.b-col li:first-child { border-top: 0; padding-top: 0; }
.b-col--dont li { font-family: var(--mono); font-size: 11.5px; color: var(--fg-muted); }

/* ---- copyable prompt: a slate ---- */

.b-prompt { margin: 28px 0 32px; max-width: 78ch; border: 1px solid var(--border-2); background: var(--sunk); }
.b-prompt__bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--border-2); }
.b-prompt__l { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); }
.b-prompt__w { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.b-prompt__t { margin: 0; padding: 17px 19px; font-family: var(--mono); font-size: 11.5px; line-height: 1.9; color: var(--fg-soft); white-space: pre-wrap; word-break: break-word; }
.b-prompt__n { margin: 0; padding: 0 19px 16px; font-size: 12.5px; line-height: 1.55; color: var(--fg-faint); max-width: 68ch; }

.copy {
  flex: none; background: none; border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--fg-muted); font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; cursor: pointer;
  transition: .15s var(--ease);
}
.copy:hover { color: var(--accent); border-color: var(--accent-35); }
.copy.done { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ---- token chips ---- */

.b-tokens { margin: 26px 0 30px; max-width: 78ch; }
.b-tokens__h { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border-2); }
.tok {
  display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 0; transition: .14s var(--ease);
}
.tok:hover { background: var(--accent-05); padding-left: 8px; }
.tok.done { background: var(--accent-12); }
.tok__t { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--fg); line-height: 1.5; }
.tok__d { flex: none; max-width: 46%; text-align: right; font-size: 12px; color: var(--fg-faint); }
.tok:hover .tok__t { color: var(--accent); }

/* ======================= the comparison instrument ========================
   THE reason this page is not a document. One large frame you actually look
   at, thumbnails beneath, and clicking one swaps the STAGE in place — so a
   lens change reads as a flicker in the same position rather than as two small
   pictures side by side. Arrow keys step it. This is the whole argument of the
   guide turned into a control. Do not demote it back to a row of figures. */

.cmp { margin: 40px 0 46px; }
.cmp__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border-2); }
.cmp__t { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.cmp__hint { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.cmp__note { margin: 14px 0 18px; font-size: 13.5px; color: var(--fg-muted); max-width: var(--measure); }

.cmp__stage { position: relative; background: var(--sunk); border: 1px solid var(--border); overflow: hidden; }
.cmp__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the swap. Opacity only — never a hue shift; that is a house rule. */
.cmp__stage img { transition: opacity .16s linear; }
.cmp__stage.swap img { opacity: .3; }

.cmp__slate {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 20px 12px 18px;
  background: linear-gradient(90deg, rgba(10,11,14,.94) 0%, rgba(10,11,14,.82) 70%, transparent 100%);
  padding-right: 64px;
}
.cmp__lab {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1; letter-spacing: -.03em;
  color: var(--fg); text-transform: uppercase;
}
.cmp__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--accent); }
.cmp__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  background: rgba(10,11,14,.7); border: 1px solid var(--border-2); border-radius: 5px;
  color: var(--fg-soft); font-family: var(--mono); font-size: 10px; padding: 6px 10px; cursor: pointer;
}
.cmp__zoom:hover { color: var(--accent); border-color: var(--accent-35); }

/* the filmstrip */
.cmp__film { display: flex; gap: 4px; margin-top: 4px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.cmp__film::-webkit-scrollbar { height: 5px; }
.cmp__film::-webkit-scrollbar-thumb { background: var(--border-2); }
.cmp__cell {
  flex: 1 1 0; min-width: 86px; padding: 0; cursor: pointer; position: relative;
  background: var(--sunk); border: 1px solid var(--line); border-top: 2px solid transparent;
  transition: border-color .15s var(--ease);
}
.cmp__cell img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .5; transition: opacity .15s var(--ease); }
.cmp__cell:hover img { opacity: .85; }
.cmp__cell.on { border-top-color: var(--accent); }
.cmp__cell.on img { opacity: 1; }
.cmp__cell b {
  display: block; padding: 6px 7px 7px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 500; letter-spacing: .04em; color: var(--fg-faint); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp__cell.on b { color: var(--accent); font-weight: 700; }

/* the prompt behind the current frame */
.cmp__p { margin-top: 14px; max-width: 88ch; border-top: 1px solid var(--line); }
.cmp__p summary {
  list-style: none; cursor: pointer; padding: 11px 0 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
}
.cmp__p summary::-webkit-details-marker { display: none; }
.cmp__p summary:hover { color: var(--accent); }
.cmp__pb { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0 16px; }
.cmp__pt {
  flex: 1; margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.85;
  color: var(--fg-faint); white-space: pre-wrap; word-break: break-word;
}
/* held text is dimmed inline by craft.js; what stays lit is the one variable */
.cmp__pt mark, .lbx__prompt mark { background: none; color: var(--fg); padding: 0; }

/* ---- a single frame / a pair ---- */

.b-one { margin: 30px 0 0; }
.b-one img, .b-pair img { display: block; width: 100%; height: auto; }
.b-one__f { border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; }
.b-cap { margin: 12px 0 30px; font-size: 13px; color: var(--fg-faint); max-width: 66ch; }

.b-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 30px 0 0; }
.b-pair figure { margin: 0; position: relative; border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); }
.b-pair figcaption {
  position: absolute; left: 0; bottom: 0; padding: 10px 16px 9px;
  background: linear-gradient(90deg, rgba(10,11,14,.94), transparent);
  padding-right: 40px;
  font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: 15px;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--fg);
}
@media (max-width: 720px) { .b-pair { grid-template-columns: 1fr; } }

/* ============================== camera moves ============================== */

.mv { margin: 30px 0 10px; }
.mv__cats { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 18px; }
.mv__cat {
  padding: 6px 13px; cursor: pointer; border: 1px solid var(--border-2); background: none;
  color: var(--fg-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.mv__cat:hover { border-color: var(--border-3); color: var(--fg); }
.mv__cat.on { background: var(--fg); border-color: var(--fg); color: var(--on-accent); font-weight: 700; }

.mv__grid { display: grid; grid-template-columns: minmax(0,1fr) 366px; gap: 26px; align-items: start; }
@media (max-width: 1100px) { .mv__grid { grid-template-columns: 1fr; } }

.mv__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 3px; }
.mvc { border: 1px solid var(--line); background: var(--surface); padding: 12px 13px 13px; cursor: pointer; text-align: left; transition: .15s var(--ease); }
.mvc:hover { border-color: var(--border-3); background: var(--surface-2); }
.mvc.on { border-color: var(--accent-60); background: var(--surface-2); }
.mvc.off { display: none; }
.mvc__n { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--fg); margin-top: 8px; }
.mvc.on .mvc__n { color: var(--accent); }
.mvc__d { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin-top: 3px; }
.mvc__x { font-size: 11px; line-height: 1.5; color: var(--fg-muted); margin-top: 7px; }

/* the schematic. The arrow draws on a loop so a still page still shows motion —
   that is the entire reason these exist rather than a list of names. */
.mvc svg { width: 100%; height: 54px; display: block; }
.mvc .mvA {
  stroke: var(--accent); stroke-width: 1.8; fill: none;
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: mvDraw 2.6s var(--ease) infinite;
}
.mvc.on .mvA { animation-duration: 1.7s; }
@keyframes mvDraw {
  0%   { stroke-dashoffset: 90; opacity: 0; }
  12%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.mv__out { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 3px; }
.mv__ctl { border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mv__lab { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.mv__ctl textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px;
  background: var(--ink); border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg); font-family: var(--sans); font-size: 12.5px; line-height: 1.6; padding: 9px 11px;
}
.mv__ctl textarea:focus { outline: none; border-color: var(--accent-35); }
.mv__seg { display: flex; gap: 3px; }
.mv__seg button {
  flex: 1; text-align: center; padding: 7px 0; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
}
.mv__seg button.on { background: var(--fg); border-color: var(--fg); color: var(--on-accent); font-weight: 700; }
.mv__ctl input[type=range] { width: 100%; accent-color: var(--accent); }

.mv__prompt { border: 1px solid var(--accent-35); border-top: 2px solid var(--accent); background: var(--sunk); }
.mv__prompt .b-prompt__bar { border-bottom: 1px solid var(--line); }
.mv__prompt .b-prompt__l { color: var(--accent); }
.mv__body { padding: 14px 16px; font-family: var(--mono); font-size: 11px; line-height: 1.85; color: var(--fg-soft); min-height: 128px; }

/* ================================== quiz ==================================
   Folded by default. It is an offer at the end of a part, not an interruption
   inside one — a quiz that blocks the scroll gets scrolled past. */

.qz { margin: 44px 0 8px; border-top: 2px solid var(--fg); }
.qz__open {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 20px 0 22px;
}
.qz__eye {
  display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.qz__t {
  display: block; margin-top: 8px;
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(22px, 2.7vw, 34px); line-height: 1.05; letter-spacing: -.03em; color: var(--fg);
}
.qz__n { display: block; margin-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.qz__open::after {
  content: 'Start →'; display: inline-block; margin-top: 14px;
  border: 1px solid var(--accent-35); color: var(--accent);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px;
}
.qz__open:hover::after { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.qz.on .qz__open::after { content: 'Hide −'; border-color: var(--border-2); color: var(--fg-muted); background: none; }

.qz__body { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; }

.qz__q { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; border: 1px solid var(--line); background: var(--surface); }
.qz__q:has(.qz__fig) { grid-template-columns: 300px minmax(0, 1fr); }
.qz__q:not(:has(.qz__fig)) { grid-template-columns: 1fr; }
@media (max-width: 860px) { .qz__q, .qz__q:has(.qz__fig) { grid-template-columns: 1fr; } }

.qz__fig { background: var(--sunk); border-right: 1px solid var(--line); }
.qz__fig img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }

.qz__ask { padding: 20px 22px 22px; }
.qz__ix { margin: 0; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; color: var(--fg-faint); }
.qz__qt { margin: 8px 0 16px; font-size: 16.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em; color: var(--fg); max-width: 52ch; }

.qz__opts { display: flex; flex-direction: column; gap: 3px; }
.qz__o {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--fg-soft); font-size: 13.5px; line-height: 1.45; font-family: var(--sans);
  transition: .14s var(--ease);
}
.qz__o:hover:not(:disabled) { border-color: var(--accent-35); color: var(--fg); }
.qz__o:disabled { cursor: default; }
.qz__k {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--fg-faint); padding-top: 2px;
}
/* the answer states are the ONLY place status colour appears on this page */
.qz__o.right { border-color: var(--ok); color: var(--fg); background: rgba(63,207,142,.09); }
.qz__o.right .qz__k { color: var(--ok); }
.qz__o.wrong { border-color: var(--danger); color: var(--fg-muted); background: rgba(240,91,84,.07); }
.qz__o.wrong .qz__k { color: var(--danger); }
.qz__o.muted { opacity: .45; }

.qz__why {
  margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--fg-muted); max-width: 62ch;
}
.qz__why b { color: var(--fg); }

.qz__score {
  margin: 0; padding: 15px 18px; border: 1px solid var(--border-2); background: var(--sunk);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent);
  font-variant-numeric: tabular-nums; min-height: 46px;
}
.qz__score:empty { display: none; }

/* =============================== token catalog ============================ */

.ax { margin: 26px 0 10px; }
.ax__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ax__find {
  flex: 1; min-width: 200px; background: var(--ink); border: 1px solid var(--border);
  color: var(--fg); font-family: var(--mono); font-size: 11.5px; padding: 10px 13px;
}
.ax__find:focus { outline: none; border-color: var(--accent-35); }
.ax__count { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.ax__tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 16px; }

.ax__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
.axc { border: 1px solid var(--line); background: var(--surface); overflow: hidden; cursor: pointer; text-align: left; padding: 0; transition: .15s var(--ease); }
.axc:hover { border-color: var(--accent-35); }
.axc.done { border-color: var(--accent); }
.axc.off { display: none; }
.axc__im { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); opacity: .88; transition: opacity .15s var(--ease); }
.axc:hover .axc__im { opacity: 1; }
.axc__b { padding: 10px 12px 12px; }
.axc__t { font-size: 12.5px; font-weight: 700; color: var(--fg); line-height: 1.22; letter-spacing: -.012em; }
.axc__ty { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; }
.axc__d { font-size: 11px; color: var(--fg-muted); line-height: 1.45; margin-top: 7px; }
.axc:hover .axc__t { color: var(--accent); }

/* ================================= embeds ================================= */

.emb { margin: 30px 0 32px; border: 1px solid var(--border-2); background: var(--sunk); }
.emb__bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border-2);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg);
}
.emb__out { margin-left: auto; color: var(--fg-faint); text-decoration: none; letter-spacing: .12em; }
.emb__out:hover { color: var(--accent); }
.emb iframe { display: block; width: 100%; border: 0; background: var(--ink); }
.emb--yt iframe { aspect-ratio: 16 / 9; height: auto; }

/* ------------------------------- the island ------------------------------
   The app's real shot list, mounted in the guide. island.css owns everything
   inside .isl__mount — do not style into it from here, or the guide and the
   landing page will drift apart on the one component they share. */

.isl { margin: 30px 0 32px; border: 1px solid var(--border-2); background: var(--sunk); }
.isl__mount { min-height: 200px; }
.isl__note {
  margin: 0; padding: 16px 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--fg-faint);
}
.isl__note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-35); }

/* ================================== end =================================== */

.end { margin-top: 110px; padding-top: 40px; border-top: 2px solid var(--fg); }
.end__p {
  margin: 14px 0 0; max-width: 18ch;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(38px, 7vw, 92px); line-height: .88; letter-spacing: -.045em; text-transform: uppercase;
}
.end__row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 34px; }
.end__go, .end__ghost { padding: 16px 26px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: -.005em; }
.end__go { background: var(--accent); color: var(--on-accent); }
.end__go:hover { background: var(--accent-hover); }
.end__ghost { border: 1px solid var(--border-2); color: var(--fg-soft); }
.end__ghost:hover { border-color: var(--fg); color: var(--fg); }

/* the way back. The guide is a side door into the product, so it should always
   be one click from the thing it is teaching about. */
.end__back {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
}
.end__back span { color: var(--fg-faint); text-transform: uppercase; letter-spacing: .16em; font-size: 9.5px; }
.end__back a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.end__back a:hover { color: var(--accent); border-bottom-color: var(--accent-35); }

/* ================================ lightbox ================================ */

.lbx { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(8,9,11,.96); padding: clamp(14px, 3vw, 40px); overflow-y: auto; }
.lbx[aria-hidden="false"] { display: block; }
.lbx__win { max-width: 1240px; margin: 0 auto; }
.lbx__fig { margin: 0; border: 1px solid var(--border-2); overflow: hidden; background: var(--sunk); }
.lbx__fig img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: var(--sunk); }
.lbx__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 2px; }
.lbx__name { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: 18px; letter-spacing: -.025em; text-transform: uppercase; }
.lbx__acts { margin-left: auto; display: flex; gap: 3px; flex-wrap: wrap; }
.lbx__acts button {
  background: none; border: 1px solid var(--border-2); color: var(--fg-muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 13px; cursor: pointer;
}
.lbx__acts button:hover { color: var(--fg); border-color: var(--fg); }
.lbx__acts button.done { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.lbx__prompt { margin: 0 0 40px; padding: 16px 18px; border: 1px solid var(--line); background: var(--sunk); font-family: var(--mono); font-size: 11px; line-height: 1.85; color: var(--fg-faint); white-space: pre-wrap; word-break: break-word; }

/* ================================= toast ================================== */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 90; opacity: 0; pointer-events: none; transition: .22s var(--ease);
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ================================ a11y / motion =========================== */

.craft :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mvc .mvA { animation: none; stroke-dashoffset: 0; }
  .cmp__stage img { transition: none; }
}

/* ================================ responsive ============================== */

@media (max-width: 980px) {
  .craft { --nav: 0px; }
  .toc { width: 264px; transform: translateX(-100%); transition: transform .24s var(--ease); box-shadow: 0 0 60px rgba(0,0,0,.7); }
  .toc.on { transform: none; }
  .toc__open { display: block; }
  .doc { margin-left: 0; }
  .top { min-height: 74vh; }
  .top__in { padding-top: 70px; }
  .open { min-height: 52vh; }
  .b-split { grid-template-columns: 1fr; }
  .b-col--do { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-2); padding-top: 18px; }
  .cmp__cell { min-width: 74px; }

  /* The kicker is `margin-left:auto` on a nowrap flex row, so a long one ("the most
     important page here") pushed the document 42px wider than the viewport and gave
     the whole page a sideways scroll. Let it drop under the title instead. */
  .ch__row { flex-wrap: wrap; }
  /* padding, not margin: width:100% + a 27px margin is 27px wider than the row.
     box-sizing:border-box is global, so padding stays inside the 100%. */
  .ch__k { margin-left: 0; width: 100%; padding: 5px 0 0 27px; }
  .cmp__head { flex-wrap: wrap; }
  .cmp__hint { margin-left: 0; width: 100%; }

  /* Contents floats bottom-right, not top-left. Top-left is where every chapter
     heading is, and a fixed button parked there covers one on every scroll stop. */
  .toc__open { top: auto; left: auto; right: 14px; bottom: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.6); }

  /* The slate and the zoom button were fighting for the same 90px. Tapping the
     stage already opens full size, so the button goes and the slate wraps. */
  .cmp__zoom { display: none; }
  .cmp__slate { flex-wrap: wrap; gap: 2px 12px; padding-right: 16px; }
  .cmp__slate .cmp__sub { width: 100%; }
}