/* ==========================================================================
   Visual Provenance — a research agenda
   Single stylesheet for the paper website. Hand-written, not minified.

   Look and layout follow the Distill article template as used by long-form
   interpretability write-ups (named grid lines, 704px text column, left
   Contents rail, margin notes, restrained single accent). Re-created from
   measured values; no code, text or artwork was copied.

   Contents
     0. Tokens
     1. Base / reset
     2. Grid (named lines + breakpoints)
     3. Chrome: skip link, header, title band, opener, byline, footer
     4. Contents rail (and mobile disclosure)
     5. Article typography
     6. Section rules, plain box, callout, key ideas
     7. Figures, gallery, chips, credits, lightbox
     8. Highlights and margin notes
     9. Tabs, pipeline tabs, source/render demo
    10. Evidence table
    11. Prompt / completion boxes
    12. Quiz
    13. Questions explorer
    14. Spec list, glossary, reading list
    15. Utilities
    16. No-JavaScript fallbacks
    17. Print
   ========================================================================== */


/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root {
  /* Surfaces */
  --ground: #fff;
  --band: #fbfbfa;                 /* title band, footer */
  --band-2: #faf9f8;               /* full-bleed gallery strip */
  --band-2-rule: #eee;

  /* Ink (all >= 4.5:1 on --ground and --band) */
  --ink: rgba(0, 0, 0, .8);
  --ink-strong: #000;
  --ink-muted: rgba(0, 0, 0, .6);  /* 5.7:1 */
  --ink-faint: rgba(0, 0, 0, .58); /* 5.3:1 (reference uses .5 = 3.95:1, too low) */
  --rule: rgba(0, 0, 0, .1);
  --rule-strong: rgba(0, 0, 0, .4);

  /* The single accent: "clay" coral.
     --coral       fills, rules, arrows, focus ring, selected marks (non-text)
     --coral-chip  background behind white 12px text (white on it = 4.95:1)
     --coral-ink   coral-coloured TEXT on white / band (5.8:1)           */
  --coral: #d97757;
  --coral-chip: #b5532f;
  --coral-ink: #a8482b;
  --coral-t1: rgba(217, 119, 87, .18);
  --coral-t2: rgba(217, 119, 87, .32);
  --coral-t3: rgba(217, 119, 87, .55);
  --charcoal: #2b2b2a;

  /* Boxes */
  --prompt-bg: #f6f6f3;
  --prompt-ink: #4a4a4a;
  --completion-bg: #eedcd5;
  --completion-ink: #842f26;
  --comment-bg: hsl(54, 78%, 96%);
  --comment-rule: hsl(54, 33%, 67%);
  --code-bg: #fafafa;
  --code-rule: #eee;

  /* Evidence strength shading */
  --ev-strong: hsl(125, 45%, 65%);
  --ev-medium: hsl(125, 40%, 80%);
  --ev-sugg: hsl(125, 30%, 90%);
  --ev-t-strong: hsl(180, 50%, 65%);
  --ev-t-medium: hsl(180, 42%, 80%);
  --ev-t-sugg: hsl(180, 35%, 90%);
  --ev-na: hsl(125, 0%, 90%);

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --cap-size: 12px;                /* captions: 12px below 1024, 13px above */

  /* Tablet grid helpers (768-1179). `%` resolves against the grid container. */
  --tab-m: clamp(0px, calc((100% - 704px) / 2 - 16px), 40px);
  --tab-p: clamp(0px, calc((100% - 704px) / 2 - 56px), 56px);

  color-scheme: light;
}


/* ==========================================================================
   1. Base / reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 14px;
  line-height: 1.6em;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 768px) { html { font-size: 16px; } }
@media (min-width: 1024px) { :root { --cap-size: 13px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, pre { margin-top: 0; }

/* Links: 1px underline in ink, darker on hover; colour inherits. */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
a:hover { border-bottom-color: rgba(0, 0, 0, .8); }

button { font: inherit; color: inherit; }

/* One visible focus treatment everywhere. */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* In-page targets stop below the top edge. */
.sec, .sec h2, .sec h3, details.q, .sidenote { scroll-margin-top: 24px; }


/* ==========================================================================
   2. Grid: named lines (screen / page / middle / text / gutter / kicker)
   --------------------------------------------------------------------------
   Every wide block (section, title band, byline, footer) is its own .grid,
   so children simply choose a column class:
     .l-text (default)  .l-middle  .l-page  .l-screen  .l-gutter  .l-kicker
   ========================================================================== */

/* < 768px: one centred column, 16px gutters, never wider than 640px. */
.grid {
  display: grid;
  grid-template-columns:
    [screen-start] minmax(16px, 1fr)
    [page-start kicker-start middle-start text-start gutter-start] minmax(0, 640px)
    [text-end gutter-end kicker-end middle-end page-end] minmax(16px, 1fr)
    [screen-end];
  column-gap: 0;
}
.grid > * { grid-column: text; min-width: 0; }

.l-text   { grid-column: text; }
.l-middle { grid-column: middle; }
.l-page   { grid-column: page; }
.l-screen { grid-column: screen; }
.l-gutter { grid-column: gutter; }
.l-kicker { grid-column: kicker; }

/* 768-1179px: 704px text column; "middle" and "page" widen by up to
   40px / 96px per side when there is room. Margin notes become inline. */
@media (min-width: 768px) {
  .grid {
    grid-template-columns:
      [screen-start] minmax(16px, 1fr)
      [page-start] var(--tab-p)
      [middle-start] var(--tab-m)
      [text-start kicker-start gutter-start] minmax(0, 704px)
      [text-end kicker-end gutter-end] var(--tab-m)
      [middle-end] var(--tab-p)
      [page-end] minmax(16px, 1fr)
      [screen-end];
  }
}

/* >= 1180px: the reference grid. text = 8x60 + 7x32 = 704px. */
@media (min-width: 1180px) {
  .grid {
    column-gap: 32px;
    grid-template-columns:
      [screen-start] 1fr
      [page-start kicker-start] 60px
      [middle-start] 60px
      [text-start kicker-end] repeat(8, 60px)
      [text-end gutter-start] 60px
      [middle-end] 60px
      [page-end gutter-end] 1fr
      [screen-end];
  }
}


/* ==========================================================================
   3. Chrome
   ========================================================================== */

/* Skip link: first focusable thing on every page. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ground);
  color: var(--ink-strong);
  border: 1px solid var(--rule-strong);
}
.skip-link:focus { top: 8px; }

/* --- Header strip ------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--ground);
}
@media (min-width: 768px) { .site-header { padding-left: 10px; padding-right: 20px; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: #333;
  border-bottom: 0;
  font-size: 15px;
  line-height: 1.3;
}
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-text { border-bottom: 1px solid var(--rule-strong); }
.brand:hover .brand-text { border-bottom-color: rgba(0, 0, 0, .8); }
@media (min-width: 768px) { .brand { font-size: 16px; } }
@media (max-width: 520px) {
  .brand-sub { display: none; }
  .brand { font-size: 15px; white-space: nowrap; }
}

.header-link {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: #333;
}
@media (max-width: 380px) {
  .site-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .header-link { font-size: 13px; text-align: right; }
}

/* --- Title band --------------------------------------------------------- */
.title-band {
  background: var(--band);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  padding-bottom: 48px;
}
@media (min-width: 768px) { .title-band { padding-top: 64px; padding-bottom: 64px; } }

.title-band h1 {
  margin: 24px 0;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 768px) { .title-band h1 { font-size: 40px; line-height: 46px; margin: 40px 0; } }
@media (min-width: 1024px) { .title-band h1 { font-size: 50px; line-height: 55px; } }
@media (max-width: 480px) { .title-band h1 { font-size: 28px; line-height: 33px; margin: 16px 0 24px; } }

.title-band .deck {
  margin: -8px 0 8px;
  max-width: 44rem;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (max-width: 480px) { .title-band .deck { font-size: 16px; margin-top: 0; } }

/* --- Opener: three plain sentences, each above a rule, content below ----- */
.opener {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-top: 24px;
}
@media (max-width: 767px) { .opener-body { max-width: 560px; } }
@media (min-width: 768px) {
  .opener { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
}
@media (min-width: 1024px) { .opener { gap: 32px; } }
/* 768-959px: three columns are too narrow for the code-like box, so the third
   column drops below the two pictures and gets the full width. */
@media (min-width: 768px) and (max-width: 959px) {
  .opener { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opener-col:nth-child(3) { grid-column: 1 / -1; }
  .opener-col:nth-child(3) .opener-cap { min-height: 0; }
  .opener-col:nth-child(3) .opener-body { max-width: 440px; }
}
.opener-col { min-width: 0; }
.opener-cap {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-strong);
  font-size: 15px;
  line-height: 1.4;
}
@media (min-width: 768px) { .opener-cap { min-height: calc(15px * 1.4 * 3 + 20px); } }
.opener-body { padding-top: 20px; }
.opener-body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #eee;
}
.opener-credit {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.opener-body .box { margin: 0; }
.opener-body .box pre { font-size: 12px; }

/* --- Byline strip ------------------------------------------------------- */
.byline {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.byline-list {
  grid-column: text-start / page-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: start;
  gap: 16px 40px;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) { .byline-list { display: flex; flex-wrap: wrap; gap: 16px 56px; } }
.byline-item { min-width: 0; }
.byline-item--authors { grid-column: 1 / -1; }
.byline-item dt {
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.byline-item dd {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-strong);
}
.byline-item dd a { border-bottom-color: var(--rule-strong); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: 120px;
  padding: 48px 0 56px;
  background: var(--band);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}
.footer-cols {
  grid-column: page;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 40px;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer .footer-label { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-faint); }
.site-footer p { margin: 0 0 .6em; }
.site-footer a { color: var(--ink); }


/* ==========================================================================
   4. Contents rail (>= 1200px) and mobile disclosure
   --------------------------------------------------------------------------
   Markup:
     <div class="toc-wrap grid"><nav class="toc" aria-label="Contents">
        <details class="toc-details" open><summary>Contents</summary> ...
   At >= 1200px the wrapper is absolutely positioned over the left margin of
   <main class="article"> and the <nav> sticks while you read. Below that it
   is a normal block with a collapsible <details> (JS closes it on load).
   ========================================================================== */
.article { position: relative; }

.toc-wrap { margin: 32px 0 8px; }
.toc { grid-column: text; margin: 0 0 32px; }

.toc-details { border: 1px solid var(--rule); background: var(--ground); }
.toc-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-muted);
}
.toc-details > summary::-webkit-details-marker { display: none; }
.toc-details > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.toc-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.toc-details[open] > summary { border-bottom: 1px solid var(--rule); }
.toc-body { padding: 12px 16px 16px; }

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 6px 0;
  border-bottom: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 1199px) { .toc a { padding: 10px 0; } }
.toc a:hover { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.toc-list > li > a { font-weight: 600; }
.toc-list ul { padding-left: 1em; }
.toc-list ul a { font-weight: 400; }
.toc a[aria-current="location"] {
  color: var(--ink-strong);
  box-shadow: inset 2px 0 0 var(--coral);
  padding-left: 10px;
  margin-left: -10px;
}
.toc-secondary { margin-top: 20px !important; }
.toc-secondary::before {
  content: "";
  display: block;
  width: 50px;
  margin: 0 0 12px;
  border-top: 1px solid var(--rule);
}
.toc-secondary a { color: var(--ink-faint); }

@media (min-width: 1200px) {
  .toc-wrap {
    position: absolute;
    top: 0; bottom: 0;
    left: auto;
    right: calc(50% + 384px);      /* right edge = text-start - 32px at every width >= 1200 */
    width: min(336px, calc(50% - 384px));
    display: block;
    margin: 0;
    pointer-events: none;
  }
  .toc {
    position: sticky;
    top: 24px;
    margin: 48px 0 0;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 0 20px 0 clamp(16px, 2.4vw, 34px);
    border-right: 1px solid var(--rule);
    background: var(--ground);     /* opaque, so section rules never run through the rail */
    z-index: 2;
    pointer-events: auto;
    overscroll-behavior: contain;
  }
  /* The disclosure is always open on wide screens; its summary becomes the
     26px "Contents" heading. */
  .toc-details { border: 0; background: none; }
  .toc-details > summary {
    min-height: 0;
    padding: 0 0 20px;
    border: 0 !important;
    font-size: 26px;
    line-height: 1.2;
    cursor: default;
    pointer-events: none;
  }
  .toc-details > summary::after { display: none; }
  .toc-body { padding: 0 0 24px; }
}


/* ==========================================================================
   5. Article typography
   ========================================================================== */
.article { font-size: 1.06rem; line-height: 1.7em; color: var(--ink); }
.article > .sec:first-of-type { margin-top: 48px; }

.sec p, .sec li, .sec dd { line-height: 1.7em; }
.sec p { margin: 0 0 1em; }

.sec h2 {
  margin: 2rem 0 1.5rem;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 1024px) { .sec h2 { font-size: 36px; line-height: 45px; } }

.sec h3 {
  margin: 2.5rem 0 1rem;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-muted);
}
@media (min-width: 1024px) { .sec h3 { font-size: 26px; } }

.sec h2.as-h3 { margin: 2.5rem 0 1rem; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink-muted); }
@media (min-width: 1024px) { .sec h2.as-h3 { font-size: 26px; } }
.sec h3.as-h4 {
  margin: 2.5rem 0 1rem;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}
.sec h4 + .tabs { margin-top: 0; }
.sec h4 {
  margin: 2.5rem 0 1rem;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}

/* Lists: bullets indented ~30px, items 8px apart. */
.sec ul, .sec ol { padding-left: 30px; margin: 0 0 1em; }
.sec li { margin-bottom: 8px; }
.sec li > ul, .sec li > ol { margin-top: 8px; margin-bottom: 0; }

.sec strong, .sec b { color: var(--ink-strong); font-weight: 600; }
.sec em { font-style: italic; }

/* Inline code */
code, kbd, samp {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--code-bg);
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 1px 2px;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Small grey "in the paper:" tag for symbols and section pointers. */
.in-paper {
  display: inline-block;
  margin-left: .35em;
  padding: 0 .5em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
  white-space: nowrap;
}
.in-paper a { border-bottom: 0; }


/* ==========================================================================
   6. Section rules, "In plain words" box, callout, key ideas
   ========================================================================== */
hr.sec-rule {
  height: 0;
  margin: 80px 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 600px) { hr.sec-rule { margin: clamp(88px, 9vw, 140px) 0 clamp(72px, 7.5vw, 120px); } }

/* "In plain words": the reference's pale-yellow comment box. */
.plain {
  margin: 1.5rem 0;
  padding: 1em;
  background: var(--comment-bg);
  border-left: 1px solid var(--comment-rule);
  color: rgba(0, 0, 0, .67);
  font-size: .94em;
}
.sec .plain h4 {
  margin: 0 0 .35em;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(0, 0, 0, .67);
}
.plain p { margin: 0 0 .6em; line-height: 1.6em; }
.plain > :last-child { margin-bottom: 0; }

/* Quiet aside for scope notes ("what this page is not"). */
.callout {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--coral);
  color: var(--ink);
}
.callout > :last-child { margin-bottom: 0; }

.keyideas li::marker { color: var(--ink-faint); }


/* ==========================================================================
   7. Figures, gallery, chips, credits, lightbox
   ========================================================================== */
.fig { margin: 2.5rem 0; }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption, .shot figcaption {
  margin-top: 12px;
  font-size: var(--cap-size);
  line-height: 1.5em;
  color: var(--ink-muted);
}
.fig figcaption { max-width: 704px; }
.fig figcaption strong, .shot figcaption strong { color: var(--ink-strong); font-weight: 600; }
.fig-no { font-weight: 700; color: var(--ink-strong); margin-right: .25em; }
.credit { display: block; margin-top: .3em; color: var(--ink-faint); }

/* Paper figures: white card with 1px rule + soft shadow (reference
   `figure.external`) and 18px inner padding. */
.fig--framed img {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
}
@media (max-width: 600px) { .fig--framed img { padding: 8px; } }

/* Zoomable images */
img[data-zoom] { cursor: zoom-in; }
.zoom-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 0;
  margin-left: 0;
  padding: 0 .1em;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--coral);
  font-size: inherit;
  color: var(--coral-ink);
  cursor: pointer;
}
.zoom-btn::after { content: ""; position: absolute; inset: -12px -10px; }   /* >= 40px tap target, no visual change */
.fig figcaption .zoom-btn { margin-top: 8px; }

/* --- Gallery of real example screenshots -------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 36px 24px;
  margin: 2.5rem 0;
  align-items: stretch;
}
.shot { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.shot figcaption { flex: 1 1 auto; }
.shot > .zoom-btn { margin-top: 8px; align-self: flex-start; font-size: var(--cap-size); line-height: 1.5; }
.shot > .chip { margin-bottom: 8px; max-width: 100%; white-space: normal; align-self: flex-start; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #eee;
}

/* Full-bleed strip behind a gallery */
.band {
  margin: 2.5rem 0;
  padding: 40px 0;
  background: var(--band-2);
  border-top: 1px solid var(--band-2-rule);
  border-bottom: 1px solid var(--band-2-rule);
}
.band .gallery { margin: 0; }

/* --- Chips -------------------------------------------------------------- */
/* Base chip = the reference's coral label (white 12px on --coral-chip).
   Route chips differ by fill AND a small shape so they never rely on colour:
     model  = coral fill + filled circle
     code   = charcoal fill + square, monospace
     mixed  = outlined coral + half-filled square                          */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--coral-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: baseline;
}
.chip--model::before,
.chip--code::before,
.chip--mixed::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  background: currentColor;
}
.chip--model::before { border-radius: 50%; }
.chip--code {
  background: var(--charcoal);
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
}
.chip--mixed {
  background: #fff;
  color: var(--coral-ink);
  border-color: var(--coral);
}
.chip--mixed::before {
  background: linear-gradient(90deg, var(--coral-ink) 50%, transparent 50%);
  border: 1px solid var(--coral-ink);
}
/* unspecified = neutral: white, charcoal text, dashed grey outline + hollow dashed circle
   (used where a source does not say how a video was made) */
.chip--unspec {
  background: #fff;
  color: var(--charcoal);
  border: 1.5px dashed var(--rule-strong);
}
.chip--unspec::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border: 1.25px dashed var(--charcoal);
  border-radius: 50%;
}

/* --- Lightbox (native <dialog>, created by site.js) ---------------------- */
.lightbox {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: #0f0f0f;
  color: #fff;
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; overflow-y: auto; padding: 56px 0 24px; box-sizing: border-box; }
.lightbox::backdrop { background: #0f0f0f; }
html:has(dialog.lightbox[open]) { overflow: hidden; }
.lightbox img {
  max-width: min(96vw, 1600px);
  max-height: calc(100vh - 20rem);
  width: auto; height: auto;
  flex: none;
  background: #fff;
  object-fit: contain;
}
.lightbox-cap {
  max-width: min(90vw, 75ch);
  margin: 14px 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #eee;
  text-align: left;
}
.lightbox-cap a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .55); text-decoration: none; }
.lightbox-cap .credit { color: #cfcfcf; }
.lightbox-cap strong, .lightbox-cap .fig-no { color: #fff; }
@media (max-width: 760px) {
  /* Phones: show the picture at a size where its labels can be read, and let the person pan. */
  .lightbox[open] { overflow: auto; justify-content: flex-start; align-items: flex-start; padding: 0; -webkit-overflow-scrolling: touch; }
  .lightbox img { max-width: none; max-height: none; width: max(900px, 100vw); height: auto; margin-top: 56px; }
  .lightbox-cap { position: sticky; left: 0; max-width: calc(100vw - 32px); }
}
.lightbox-close {
  position: fixed;
  top: 12px; right: 12px;
  min-width: 44px; min-height: 44px;
  padding: 0 16px;
  background: #fff;
  color: #111;
  border: 0;
  font-size: 15px;
  cursor: pointer;
}


/* ==========================================================================
   8. Highlights and margin notes
   ========================================================================== */
mark.hl {
  padding: 0 .12em;
  background: var(--coral-t1);
  color: inherit;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.hl.hl-2 { background: var(--coral-t2); }
mark.hl.hl-3 { background: var(--coral-t3); }

/* Margin note. Below 1180px it is an ordinary note directly under its
   paragraph (always visible, no JS needed). */
.sn-ref { font-size: .7em; line-height: 0; vertical-align: super; }
.sn-ref a { position: relative; padding: 0 2px; border-bottom: 0; color: var(--coral-ink); font-weight: 600; }
.sn-ref a::after { content: ""; position: absolute; inset: -12px -8px; }
.sn-ref a:hover { text-decoration: underline; }

.sidenote {
  grid-column: text;
  margin: -.2em 0 1.2em;
  padding: .1em 0 .1em .9em;
  border-left: 2px solid var(--coral-t2);
  font-size: .86em;
  line-height: 1.5;
  color: var(--ink-muted);
}
.sidenote:target { background: var(--coral-t1); }
.sn-no { font-weight: 700; color: var(--coral-ink); margin-right: .3em; }

@media (min-width: 1180px) {
  /* Lands in the same grid row as the paragraph just before it. */
  .sidenote {
    grid-column: gutter;
    align-self: start;
    margin: .25em 0 1em;
    padding: 0;
    border-left: 0;
    font-size: 12px;
    line-height: 1.45;
  }
}


/* ==========================================================================
   9. Tabs, pipeline tabs, source/render demo
   --------------------------------------------------------------------------
   Content is HTML; site.js wires roving tabindex + ARIA. Without JS all
   panels show stacked (see section 16).
   ========================================================================== */
.tabs { margin: 2rem 0; }
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  border-bottom: 1px solid var(--rule);
}
.tablist [role="tab"] {
  position: relative;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-muted);
  cursor: pointer;
}
.tablist [role="tab"]:hover { color: var(--ink-strong); }
.tablist [role="tab"][aria-selected="true"] {
  color: var(--ink-strong);
  font-weight: 600;
  border-bottom-color: var(--coral);
}
.tabpanel { padding: 20px 0 4px; scroll-margin-top: 24px; }
.tablist [role="tab"] { scroll-margin-top: 24px; }
.tabpanel[hidden] { display: none; }
.tabpanel > :last-child { margin-bottom: 0; }

/* Pipeline variant: stage chips joined by small arrows. */
.tabs--pipeline .tablist {
  gap: 10px 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.tabs--pipeline .tablist [role="tab"] {
  margin: 0;
  min-height: 44px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 14px;
  color: var(--ink);
}
.tabs--pipeline .tablist [role="tab"]:hover { border-color: var(--coral-ink); }
.tabs--pipeline .tablist [role="tab"][aria-selected="true"] {
  background: var(--coral-chip);
  border-color: var(--coral-chip);
  color: #fff;
  font-weight: 600;
}
/* arrow after every stage except the last */
.tabs--pipeline .tablist [role="tab"]:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -18px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--coral);
  border-right: 2px solid var(--coral);
  transform: translateY(-50%) rotate(45deg);
}
.tabs--pipeline .tabpanel { padding-top: 20px; }

/* Phones: every tab strip is one row that scrolls sideways, so the underline and the arrows stay valid. */
@media (max-width: 640px) {
  .tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .tablist [role="tab"] { flex: none; white-space: nowrap; }
  .tabs--pipeline .tablist { gap: 10px 26px; padding: 2px 44px 16px 2px; scroll-snap-type: x proximity; }
  .tabs--pipeline .tablist [role="tab"] { scroll-snap-align: start; }
  .tabs:not(.tabs--pipeline) .tablist { padding-right: 36px; }
}

/* "What you could mark / what could undo it / who needs access" */
.stage-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 28px;
  margin: 0;
}
@media (min-width: 768px) { .stage-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stage-facts dt {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stage-facts dd { margin: 0; font-size: .92em; line-height: 1.55; color: var(--ink); }

/* Source / render demo ("same picture, different recipe") */
.demo { margin: 2.5rem 0; }
.demo .tabpanel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) {
  .demo .tabpanel:not([hidden]) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .demo .demo-note { grid-column: 1 / -1; }
}
.code {
  margin: 0;
  padding: .9rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--code-rule);
  border-radius: 4px;
  font: 12.5px/1.6 var(--mono);
  color: #333;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code:focus-visible { outline-offset: 0; }
@media (max-width: 480px) { .demo .code { white-space: pre-wrap; overflow-wrap: anywhere; } }
.code .c { color: #777; }                   /* comment */
.code .k { color: var(--coral-ink); }       /* key / tag */
.render {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rule);
}
.render svg, .render img { display: block; width: 100%; max-width: 200px; height: auto; }
.demo-note { margin: 0; font-size: var(--cap-size); line-height: 1.5; color: var(--ink-muted); }
.sec .demo-note { margin: 0; line-height: 1.5; }


/* ==========================================================================
   10. Evidence table (strength-shaded, as in the reference)
   --------------------------------------------------------------------------
   <div class="evidence-table l-page" role="table" aria-label="...">
     <div class="et-row et-head" role="row"><div role="columnheader">..</div>...
     <div class="et-row" role="row"><div role="rowheader" class="et-label">..</div>
        <div role="cell" class="evidence strong" data-col="Column name">..</div>
   Override columns with  style="--et-cols: 1.2fr repeat(3, 1fr)".
   ========================================================================== */
.evidence-table {
  --et-cols: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr));
  margin: 2.5rem 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #111;
  border-top: 1px solid var(--rule);
}
.et-row {
  display: grid;
  grid-template-columns: var(--et-cols);
  border-bottom: 1px solid var(--rule);
}
.et-head > * {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.et-label { padding: 12px 12px 12px 0; font-weight: 600; color: var(--ink-strong); }
.evidence { padding: 12px; border-left: 2px solid #fff; background: var(--ev-na); }
.evidence.strong { background: var(--ev-strong); }
.evidence.medium { background: var(--ev-medium); }
.evidence.suggestive { background: var(--ev-sugg); }
.evidence.na { background: var(--ev-na); color: rgba(0, 0, 0, .65); }
/* optional second hue for a different dimension */
.evidence-table.is-teal .evidence.strong { background: var(--ev-t-strong); }
.evidence-table.is-teal .evidence.medium { background: var(--ev-t-medium); }
.evidence-table.is-teal .evidence.suggestive { background: var(--ev-t-sugg); }
.evidence strong { color: #000; }
.sec ul.et-key { padding-left: 0; }
.et-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-muted); }
.et-key li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.et-key li::before { content: ""; width: 14px; height: 14px; background: var(--ev-na); border: 1px solid var(--rule); }
.et-key .k-strong::before { background: var(--ev-strong); }
.et-key .k-medium::before { background: var(--ev-medium); }
.et-key .k-sugg::before { background: var(--ev-sugg); }

/* Narrow: each row becomes a small stack; cells are labelled by data-col. */
@media (max-width: 719px) {
  .et-row { display: block; padding: 14px 0 6px; }
  .et-row.et-head { display: none; }
  .et-label { padding: 0 0 8px; }
  .evidence { display: block; margin-bottom: 6px; border-left: 0; }
  .evidence[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(0, 0, 0, .65);
  }
}


/* ==========================================================================
   11. Prompt / completion boxes (monospace)
   ========================================================================== */
.box { margin: 1.5rem 0; }
.box-label { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-strong); }
.box-label span { font-weight: 400; }
.box pre {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  font: 12.5px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.box--prompt pre { background: var(--prompt-bg); color: var(--prompt-ink); }
.box--completion pre { background: var(--completion-bg); color: var(--completion-ink); }


/* ==========================================================================
   12. Quiz ("Can you tell?")
   ========================================================================== */
.quiz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 32px 24px;
  margin: 2.5rem 0;
}
.quiz-item { margin: 0; min-width: 0; }
.quiz-item img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.quiz-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.quiz-buttons button {
  min-height: 44px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.quiz-buttons button:hover { border-color: var(--coral-ink); }
.quiz-buttons button.is-picked { border: 2px solid var(--coral-ink); font-weight: 600; }
.quiz-buttons button.is-answer { background: var(--coral-t1); }
.quiz-buttons button.is-answer::before { content: "\2713\00a0"; }
.quiz-buttons button:disabled { cursor: default; color: var(--ink); }
.quiz-reveal {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--band);
  border-left: 3px solid var(--coral);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.quiz-reveal[hidden] { display: none; }
.quiz-reveal p { margin: 0 0 .5em; }
.quiz-reveal > :last-child { margin-bottom: 0; }
.quiz-result { font-weight: 600; color: var(--ink-strong); }


/* ==========================================================================
   13. Questions explorer (native <details>)
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.5rem 0 .5rem;
}
.filters button {
  min-height: 40px;
  padding: 4px 14px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.filters button:hover { border-color: var(--coral-ink); }
.filters button[aria-pressed="true"] {
  background: var(--coral-chip);
  border-color: var(--coral-chip);
  color: #fff;
  font-weight: 600;
}
.filters-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 1rem; }
.filters-status { margin: 0; font-size: 13px; color: var(--ink-faint); }
.sec .filters-status { margin: 0; }
.filters-meta .q-toggle {
  min-height: 40px;
  padding: 4px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.filters-meta .q-toggle:hover { border-bottom-color: rgba(0, 0, 0, .8); }

.sec details.q { border-top: 1px solid var(--rule); margin: 0; }
.sec details.q:last-of-type { border-bottom: 1px solid var(--rule); }
details.q[hidden] { display: none; }
details.q > summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
}
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
details.q[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.q[open] > summary .q-no { background: var(--coral-chip); border-color: var(--coral-chip); color: #fff; }
.q-no {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--coral-ink);
  border: 1.5px solid var(--coral);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.q-title { font-size: 1.04em; font-weight: 600; line-height: 1.4; color: var(--ink-strong); }
details.q > summary:hover .q-title { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.q-body { padding: 0 0 20px 46px; }
.q-body p { margin: 0 0 .8em; }
.sec .q-body p { line-height: 1.65em; }
.q-plain { color: var(--ink-strong); }
.q-link { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 480px) { .q-body { padding-left: 0; } }


/* ==========================================================================
   14. Spec list, glossary, reading list
   ========================================================================== */
.sec ol.spec-list { list-style: none; padding: 0; margin: 2rem 0; }
.spec-list > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.spec-list > li:last-child { border-bottom: 1px solid var(--rule); }
.spec-sym {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  font: 600 16px/1 var(--mono);
  color: var(--coral-ink);
}
.sec .spec-list h4 { margin: 2px 0 .3em; font-size: 1.04em; text-transform: none; letter-spacing: 0; color: var(--ink-strong); }
.spec-list p { margin: 0; }

.sec dl.glossary { margin: 2rem 0; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.glossary dt, .glossary dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--rule); }
.glossary dt { font-weight: 600; color: var(--ink-strong); padding-bottom: 0; }
.glossary dd { border-top: 0; padding-top: 2px; }
@media (min-width: 640px) {
  .sec dl.glossary { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .glossary dt, .glossary dd { padding: 12px 0; border-top: 1px solid var(--rule); }
  .glossary dd { padding-left: 24px; }
}

.sec ul.refs { list-style: none; padding: 0; margin: 2rem 0; }
.refs li { margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.refs li:last-child { border-bottom: 1px solid var(--rule); }
.ref-meta { display: block; margin: 2px 0 2px; font-size: 13px; color: var(--ink-faint); }


/* ==========================================================================
   15. Utilities
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.muted { color: var(--ink-muted); }
.small { font-size: .86em; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }


/* ==========================================================================
   16. No-JavaScript fallbacks (html lacks the .js class)
   ========================================================================== */
html:not(.js) .tablist,
html:not(.js) .filters,
html:not(.js) .filters-status,
html:not(.js) .filters-meta,
html:not(.js) .quiz-buttons { display: none; }

html:not(.js) .tabpanel[hidden] { display: block; }
html:not(.js) .demo .tabpanel[hidden] { display: grid; }
/* the label pseudo-element is a grid item: span the whole row so source and picture sit side by side beneath it */
html:not(.js) .demo .tabpanel::before { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 720px) {
  /* hidden panels (shown as stacked sections without JS) need the same two columns as the visible one */
  html:not(.js) .demo .tabpanel[hidden] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px 20px; align-items: stretch; }
  html:not(.js) .demo .tabpanel[hidden] .demo-note { grid-column: 1 / -1; }
}
@media (max-width: 719px) { html:not(.js) .demo .tabpanel[hidden] { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
html:not(.js) .tabpanel[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: .5em;
  font-weight: 700;
  color: var(--ink-strong);
}
html:not(.js) .tabpanel + .tabpanel { margin-top: 12px; border-top: 1px solid var(--rule); }
html:not(.js) .quiz-reveal[hidden] { display: block; }


/* ==========================================================================
   17. Print
   ========================================================================== */
@media print {
  @page { margin: 18mm 16mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .skip-link, .site-header, .toc-wrap, .filters, .filters-meta, .filters-status, .tablist, .zoom-btn, .quiz-buttons, .lightbox { display: none !important; }
  .grid { display: block; }
  .title-band { background: none; border: 0; padding: 0; }
  .opener { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .byline-list { display: flex; }
  .band { background: none; }
  hr.sec-rule { margin: 24px 0; }
  .article { font-size: 11pt; }
  .sec h2 { font-size: 20pt; line-height: 1.2; break-after: avoid; }
  .sec h3, .sec h4 { break-after: avoid; }
  figure, .box, details.q, .plain, .evidence-table .et-row { break-inside: avoid; }
  .tabpanel[hidden] { display: block !important; }
  .demo .tabpanel[hidden] { display: grid !important; }
  .tabpanel[data-label]::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: .4em; }
  .sidenote { display: block; float: none; font-size: 9.5pt; border-left: 2px solid #ccc; padding-left: 8px; margin: 4px 0 10px; }
  .quiz-reveal[hidden] { display: block !important; }
  a { border-bottom: 0; }
  main a[href^="http"]::after, .opener a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #444; word-break: break-all; }
  .site-footer { background: none; margin-top: 32px; }
  mark.hl { background: #f3d9cf !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .evidence, .chip, .q-no { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ==========================================================================
   18. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Assembly additions (assembler, 6 Oct 2026)
   ========================================================================== */
/* Spot vignette (hand-built SVG) right under a section heading */
.spot { margin: 0 0 1.25rem; }
.spot img { display: block; width: 100%; height: auto; max-width: 704px; }
/* Two-column gallery (4 frames -> 2 x 2); single column on small screens */
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .gallery--2 { grid-template-columns: minmax(0, 1fr); } }
/* Gallery frames: same 16:9 box so captions line up (crop is under 3 %; the lightbox shows the full image) */
.gallery .shot img { aspect-ratio: 16 / 9; object-fit: cover; border-color: rgba(0, 0, 0, .18); }
.shot-kind { font-weight: 600; }

/* >= 1200px: the Contents rail is sticky over the left margin, so wide blocks inside the article
   start at the text column (as in the reference) instead of running underneath the rail. */
@media (min-width: 1200px) {
  .article .l-page { grid-column: text-start / page-end; }
  .article .l-middle { grid-column: text-start / middle-end; }
}
/* tighter list under small headings (reading list) */
.sec h4 + ul.refs, .sec h3.as-h4 + ul.refs { margin-top: 1rem; }
@media (min-width: 1180px) { .sidenote--span2 { grid-row: span 2; } }


/* ==========================================================================
   Video poster + player dialog (YouTube loads only after the reader presses play)
   ========================================================================== */
.yt-poster { position: relative; }
.yt-play {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 8px;
  background: rgba(15, 15, 15, .86);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.yt-play:hover { background: rgba(0, 0, 0, .94); }
.yt-play:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.yt-icon { width: 32px; height: 32px; flex: none; }
.yt-icon circle { fill: var(--coral); }
.yt-icon path { fill: #fff; }
.yt-label small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #d6d6d6; }
html:not(.js) .yt-play { display: none; }                 /* no script: the caption's YouTube link remains */
.yt-note { display: block; margin-top: .3em; }
.lightbox--video .video-wrap {
  width: min(1100px, 94vw);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 12rem);
  flex: none;
  background: #000;
}
.lightbox--video .video-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
  .lightbox--video[open] { overflow-y: auto; justify-content: center; align-items: center; padding: 56px 0 24px; }
  .lightbox--video .video-wrap { width: 100vw; max-height: none; }
  .lightbox--video .lightbox-cap { position: static; max-width: calc(100vw - 32px); }
}
@media print { .yt-play, .lightbox--video { display: none !important; } }

/* Featured player (inline): the poster becomes the player in place, 16:9, no layout jump. */
.fig--video { margin: 1.5rem 0 2.5rem; }
.yt-poster--feature { aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.yt-poster--feature > img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid rgba(0, 0, 0, .18); }
.yt-poster--feature .yt-play {
  left: 50%; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  padding: 10px 24px 10px 12px;
  font-size: 16px;
}
.yt-poster--feature .yt-icon { width: 48px; height: 48px; }
.yt-poster--feature iframe { display: block; width: 100%; height: 100%; border: 0; }
.fig--video figcaption .credit { display: block; }

/* Three code-credited frames: three columns on wide screens, one column on small ones */
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .gallery--3 { grid-template-columns: minmax(0, 1fr); } }