/* One palette, one meaning. The renderer reads these same tokens. */
:root {
  color-scheme: light;
  --paper: #f2efe7; --surface: #faf8f2; --ink: #252c29; --muted: #59635d;
  --line: #cccfc3; --grid: #dedfd5; --film: #a54f2d; --digital: #226b70;
  --simulation: #755277; --calibration: #48584a; --unknown: #6c7067;
  --plate-bg: #1b1b1b; --night: #19221e; --night-ink: #f2efe7; --night-muted: #b6c3b8;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --max: 1240px; --measure: 66ch;
}

/* The report keeps the upstream information design, then prints each figure
   as an engraved scientific plate. This is paper, key ink, hatching and one
   consistent misregistered colour pass rather than a sepia filter. */
@font-face { font-family: 'EB Garamond'; src: url('/assets/EBGaramond.woff2') format('woff2'); font-style: normal; font-weight: 400 800; font-display: swap; }
.report-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 25px; max-width: 520px; }
.report-formats a { padding: 11px 13px; border: 1px solid #657269; color: var(--night-ink); font: 11px/1.35 var(--mono); letter-spacing: .035em; text-decoration: none; }
.report-formats a:hover, .report-formats a:focus-visible { border-color: #c9d7bc; background: rgba(201,215,188,.08); }
.figure { position: relative; overflow: hidden; border: 2px solid var(--ink); outline: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: -7px;
  background-color: #e7ddc7;
  background-image: radial-gradient(circle at 13% 21%, rgba(94,68,35,.075) 0 1px, transparent 2px), radial-gradient(circle at 78% 73%, rgba(94,68,35,.055) 0 2px, transparent 4px), linear-gradient(107deg, rgba(255,255,255,.18), transparent 42%, rgba(80,55,28,.055));
  background-size: 113px 97px, 181px 167px, 100% 100%;
}
.figure-head { padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 42%, transparent); }
.figure-title::before { content: 'Plate · '; font-family: var(--serif); font-style: italic; letter-spacing: .03em; text-transform: none; }
.plate-cite { margin: -13px 0 22px; color: var(--muted); font: italic 13px/1.35 var(--serif); }
.figure > figcaption::before { content: 'Note. '; color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 600; }
.bar-fill { background-color: color-mix(in srgb, var(--bar) 28%, transparent); background-image: repeating-linear-gradient(-52deg, var(--bar) 0 1px, transparent 1px 5px); box-shadow: .9px -.6px 0 color-mix(in srgb, var(--bar) 62%, transparent); border-right: 1px solid var(--ink); }
.swatch { background-color: color-mix(in srgb, var(--swatch) 25%, transparent); background-image: repeating-linear-gradient(-52deg, var(--swatch) 0 1px, transparent 1px 4px); border: 1px solid var(--ink); }
.swatch.simulation { background: transparent; }
.chart svg text { font-family: 'EB Garamond', Georgia, serif; fill: var(--ink); }
.axes-caption { padding: 6px 0; border-block: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); font-family: 'EB Garamond', Georgia, serif; font-style: italic; }
.metric-row, .bar-row { border-bottom-color: color-mix(in srgb, var(--ink) 19%, transparent); }
.grain-screen-noscript { max-width: 60ch; margin: 5rem auto; padding: 2rem; }
@media (max-width: 700px) {
  .report-formats { grid-template-columns: 1fr; }
  .figure { outline-offset: -5px; }
  .plate-cite { font-size: 12px; margin-top: -10px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.7 var(--sans); }
button, input, select { font: inherit; }
button, select, summary { cursor: pointer; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--film); }
button, input, select { border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); }
button { min-height: 44px; padding: 9px 16px; }
button:hover { border-color: var(--ink); }
:focus-visible { outline: 3px solid var(--digital); outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: #d2dfd3; color: var(--ink); }
.wrap { width: min(var(--max), calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 10px 20px; background: var(--surface); }
.skip-link:focus { top: 12px; }
.eyebrow, .section-number, .figure-title { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hero { background: var(--night); color: var(--night-ink); padding: 30px 0 42px; }
.masthead { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #435147; color: var(--night-muted); }
.masthead a { text-decoration: none; }
.hero-layout { display: grid; grid-template-columns: 1fr 1.03fr; align-items: center; gap: 62px; padding: 64px 0 56px; }
.hero h1 { font: 400 clamp(62px, 7vw, 105px)/.95 var(--serif); letter-spacing: -.065em; margin: 0 0 30px; max-width: 8ch; }
.hero h1 em { color: #c9d7bc; font-weight: 400; }
.standfirst { font: 400 clamp(21px, 2vw, 28px)/1.4 var(--serif); max-width: 30ch; margin: 0 0 24px; }
.hero-deck { color: var(--night-muted); font-size: 15px; line-height: 1.7; max-width: 49ch; }
.hero-link { display: inline-block; margin-top: 15px; padding: 9px 0; border-bottom: 1px solid #9aa891; font-size: 14px; text-decoration: none; }
.hero-evidence { margin: 0; }
.hero-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-sample { margin: 0; min-width: 0; }
.hero-sample img { display: block; width: 100%; height: auto; background: #333; }
.hero-sample .texture { margin-top: 8px; image-rendering: pixelated; }
.hero-sample figcaption { margin-top: 14px; font-size: 13px; color: var(--night-muted); line-height: 1.5; }
.hero-sample strong { display: block; color: var(--night-ink); font: 22px/1.3 var(--serif); margin-bottom: 5px; }
.hero-evidence > figcaption { color: var(--night-muted); font: 11px/1.6 var(--mono); margin-top: 22px; padding-top: 18px; border-top: 1px solid #435147; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 18px 42px; border-top: 1px solid #435147; padding-top: 22px; color: var(--night-muted); font-size: 13px; }
.reading-nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.reading-nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 62px; }
.reading-nav a { text-decoration: none; font-size: 13px; white-space: nowrap; }
.reading-nav a[aria-current='location'] { color: var(--film); text-decoration: underline; text-underline-offset: 7px; }
.nav-title { font: 18px var(--serif) !important; margin-right: auto; }
.reading-progress { height: 2px; width: 0; background: var(--film); }
.opening { padding: 66px 0 72px; }
.opening-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; }
.opening h2 { font: 36px/1.18 var(--serif); letter-spacing: -.025em; margin: 0 0 18px; }
.opening p { margin: 0 0 18px; }
.findings-list { list-style: none; margin: 0; padding: 0; counter-reset: finding; }
.findings-list li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.findings-list li:first-child { padding-top: 0; }
.findings-list a { display: flex; gap: 18px; text-decoration: none; font: 21px/1.4 var(--serif); }
.findings-list a::before { counter-increment: finding; content: '0' counter(finding); font: 11px/2.2 var(--mono); color: var(--film); }
.scope-note { max-width: 90ch; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.section { padding: 76px 0 54px; border-top: 1px solid var(--line); scroll-margin-top: 68px; }
.section-heading { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 64px; margin-bottom: 34px; }
.section-number { color: var(--film); margin: 0 0 18px; }
.section-heading h2 { margin: 0; font: 400 clamp(32px, 3vw, 44px)/1.08 var(--serif); letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.section-finding { font: 25px/1.38 var(--serif); margin: 0 0 22px; letter-spacing: -.015em; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 19px; }
.prose.offset { margin: 32px 0 32px auto; width: min(100%, 770px); }
.prose h3 { font: 27px/1.3 var(--serif); margin: 0 0 18px; }
.section-bridge { margin: 38px 0 0 auto; max-width: 770px; padding: 22px 0 0; border-top: 1px solid var(--line); font: 21px/1.5 var(--serif); }
.section-bridge a { text-decoration-color: var(--film); }
.figure { margin: 32px 0; padding: 28px 32px 0; background: var(--surface); border: 1px solid var(--line); }
.figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.figure-title { color: var(--muted); letter-spacing: .06em; }
.tag { font: 10px/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.tag.simulation { color: var(--simulation); }
.figure-question { margin: 10px 0 24px; font: 27px/1.23 var(--serif); letter-spacing: -.025em; max-width: 48ch; }
.figure > figcaption { padding: 20px 0 24px; margin-top: 18px; border-top: 1px solid var(--line); max-width: 100%; font-size: 14px; line-height: 1.65; color: var(--muted); }
.figure > figcaption b { font-weight: 500; color: var(--ink); }
.chart { min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg text { font: 12px var(--sans); }
.chart svg [tabindex]:focus { outline: none; stroke: var(--ink); stroke-width: 3px; }
.chart-intro, .chart-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.chart-note { margin: 16px 0 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; margin: 18px 0; color: var(--muted); }
.chart-legend span { display: inline-flex; gap: 8px; align-items: center; }
.swatch { width: 10px; height: 10px; display: inline-block; background: var(--swatch); }
.swatch.digital { border-radius: 50%; }
.swatch.unknown { transform: rotate(45deg); }
.swatch.simulation { background: transparent; border: 2px solid var(--swatch); }
.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.chart-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-plot { min-width: 0; }
.mini-plot h3 { font: 19px/1.3 var(--serif); margin: 0 0 5px; }
.mini-meta { margin: 0 0 10px; font: 11px/1.6 var(--mono); color: var(--muted); }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 22px; font-size: 13px; }
.chart-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chart-controls input, .chart-controls select { min-height: 44px; padding: 8px 12px; max-width: 100%; }
.chart-controls input { width: 220px; }
.chart-controls .count { margin-left: auto; color: var(--muted); }
.plot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 30px; }
.plot-context { border-left: 1px solid var(--line); padding-left: 23px; font-size: 13px; }
.plot-context h3 { font: 22px/1.3 var(--serif); margin: 0 0 16px; }
.plot-key { padding: 0; list-style: none; margin: 0; }
.plot-key li { padding: 9px 0; border-bottom: 1px solid var(--grid); }
.plot-key button { display: block; width: 100%; padding: 6px 0; text-align: left; border: 0; background: transparent; color: var(--ink); font-size: 13px; min-height: 36px; }
.plot-key button:hover { text-decoration: underline; }
.point-readout { padding: 12px 16px; background: var(--paper); min-height: 50px; font-size: 13px; margin-top: 12px; }
.axes-caption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font: 12px/1.6 var(--mono); margin: 10px 0; }
.raw-data, .reference { margin-top: 20px; border-top: 1px solid var(--line); }
.raw-data summary, .reference summary { padding: 13px 0; font-size: 13px; color: var(--muted); }
.raw-data summary:hover, .reference summary:hover { color: var(--ink); }
.scroller { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { font: 11px/1.5 var(--mono); color: var(--muted); background: var(--paper); }
th:first-child, td:first-child { padding-left: 0; min-width: 140px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--paper); }
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: minmax(180px, 1fr) 1.45fr 55px; gap: 18px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.bar-row .film-name { line-height: 1.3; }
.bar-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.bar-track { height: 8px; background: var(--paper); position: relative; }
.bar-fill { height: 100%; background: var(--bar); min-width: 1px; }
.bar-value { text-align: right; font: 12px var(--mono); }
.rank-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 26px; }
.rank-summary div { border-top: 2px solid var(--bar); padding-top: 12px; font-size: 13px; }
.rank-summary strong { display: block; font: 42px/1.1 var(--serif); margin: 7px 0; color: var(--bar); }
.expand-list { margin-top: 20px; font-size: 13px; }
.metric-list { display: grid; gap: 0; }
.metric-row, .metric-axis { display: grid; grid-template-columns: minmax(155px, .65fr) minmax(0, 1.4fr) 52px; align-items: center; gap: 20px; }
.metric-row { border-bottom: 1px solid var(--grid); padding: 12px 0; font-size: 13px; }
.metric-row svg { min-width: 0; }
.metric-axis { color: var(--muted); font-size: 11px; }
.metric-axis .ruler { position: relative; height: 18px; }
.ruler span { position: absolute; transform: translateX(-50%); }
.ruler span:first-child { left: 8px; }
.ruler span:nth-child(2) { left: 50%; }
.ruler span:last-child { left: calc(100% - 8px); }
.axis-value { text-align: right; }
.metric-row .value { font: 12px var(--mono); text-align: right; }
.empty { padding: 30px; background: var(--paper); font-size: 14px; }
.plate-figure { background: var(--plate-bg); border-color: var(--plate-bg); color: var(--night-ink); }
.plate-figure .figure-title, .plate-figure .tag, .plate-figure > figcaption { color: var(--night-muted); }
.plate-figure > figcaption, .plate-pair { border-color: #435147; }
.plate-figure > figcaption b { color: var(--night-ink); }
.plate-pair { margin: 0; padding: 24px 0; border-top: 1px solid #435147; }
.plate-pair h3 { font: 25px/1.2 var(--serif); margin: 0 0 6px; }
.plate-pair .plate-note { color: var(--night-muted); margin: 0 0 18px; font-size: 13px; }
.plate-images { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plate-images figure { margin: 0; min-width: 0; }
.plate-images a { display: block; }
.plate-images img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.plate-images figcaption { font: 11px/1.6 var(--mono); color: var(--night-muted); margin-top: 10px; }
.plate-provenance { color: var(--night-muted); font-size: 11px; margin-top: 14px; }
.plate-provenance summary { padding: 6px 0; }
.plate-provenance code { overflow-wrap: anywhere; }
.plate-key { display: flex; flex-wrap: wrap; gap: 12px 22px; font: 11px/1.6 var(--mono); margin-bottom: 18px; color: var(--night-muted); }
.plate-key span { display: inline-flex; align-items: center; gap: 7px; }
.plate-key i { width: 12px; height: 12px; background: #808080; }
.plate-key i.mask { background: #3a3a3a; border: 1px solid #889087; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 24px 0; }
.card { padding: 26px 0; border-top: 1px solid var(--line); }
.card h3 { font: 25px/1.3 var(--serif); margin: 0 0 15px; }
.card p, .card li { font-size: 15px; }
.card p { margin: 0 0 14px; }
.card ul { padding-left: 20px; }
.card li { margin-bottom: 10px; }
.glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; margin: 0; }
.glossary div { padding: 17px 0; border-top: 1px solid var(--line); }
.glossary dt { font: 19px var(--serif); scroll-margin-top: 95px; }
.glossary dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.method-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0; border-block: 1px solid var(--line); margin-bottom: 32px; }
.method-strip b { font: 22px var(--serif); display: block; margin-bottom: 9px; }
.method-strip p { margin: 0; font-size: 14px; color: var(--muted); }
.footer { padding: 60px 0 80px; border-top: 1px solid var(--line); background: #e6e7dc; }
.footer h2 { font: 34px var(--serif); margin: 0 0 22px; }
.footer p { max-width: 80ch; font-size: 14px; }
.footer ul { padding-left: 20px; font-size: 13px; color: var(--muted); }
.footer li { margin-bottom: 14px; }
.footer .verified { margin-top: 30px; }
.footer .verified summary { font-size: 14px; padding: 16px 0; cursor: pointer; }
.footer .source { overflow-wrap: anywhere; }
@media (max-width: 1050px) {
 .wrap { width: calc(100% - 56px); }
 .hero-layout { gap: 34px; }
 .opening-grid { gap: 44px; }
 .section-heading { grid-template-columns: .7fr 1.3fr; gap: 36px; }
 .plot-layout { grid-template-columns: 1fr; }
 .plot-context { padding: 0; border-left: 0; }
 .plot-key { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; }
 .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .reading-nav .wrap { gap: 18px; }
}
@media (max-width: 700px) {
 body { font-size: 16px; }
 .wrap { width: calc(100% - 36px); }
 .hero { padding-top: 22px; }
 .masthead { font-size: 9px; letter-spacing: .05em; }
 .hero-layout { grid-template-columns: 1fr; padding: 38px 0; gap: 36px; }
 .hero h1 { max-width: 10ch; font-size: clamp(56px, 18vw, 70px); }
 .standfirst { font-size: 25px; }
 .hero-facts { gap: 10px 22px; font-size: 12px; }
 .reading-nav .wrap { width: 100%; padding: 0 18px; overflow-x: auto; gap: 22px; min-height: 56px; }
 .nav-title { display: none; }
 .opening { padding: 44px 0; }
 .opening-grid { grid-template-columns: 1fr; gap: 28px; }
 .section { padding: 48px 0 30px; }
 .section-heading { grid-template-columns: 1fr; gap: 23px; }
 .section-heading h2 { max-width: 22ch; font-size: 36px; }
 .section-number { margin-bottom: 12px; }
 .section-finding { font-size: 23px; }
 .figure { padding: 20px 16px 0; margin: 24px -6px; }
 .figure-head { align-items: flex-start; }
 .figure-title { font-size: 9px; max-width: 65%; }
 .tag { font-size: 9px; max-width: 40%; }
 .figure-question { font-size: 24px; }
 .chart-grid, .chart-grid.two { grid-template-columns: 1fr; gap: 30px; }
 .bar-row { grid-template-columns: minmax(105px, 1fr) 1fr 40px; gap: 10px; font-size: 12px; }
 .rank-summary { gap: 20px; }
 .rank-summary strong { font-size: 35px; }
 .chart-controls { align-items: flex-start; gap: 12px; }
 .chart-controls label { width: 100%; }
 .chart-controls input, .chart-controls select { flex: 1; min-width: 0; }
 .chart-controls .count { margin-left: 0; width: 100%; }
 .metric-row, .metric-axis { grid-template-columns: minmax(100px, .85fr) minmax(0, 1.2fr) 37px; gap: 10px; font-size: 12px; }
 .metric-row .value { font-size: 10px; }
 .metric-axis { font-size: 10px; }
 .grid2, .glossary, .method-strip { grid-template-columns: 1fr; }
 .plate-images { grid-template-columns: 1fr; gap: 22px; }
 .plate-pair h3 { font-size: 23px; }
 .plot-key { grid-template-columns: 1fr; }
 .method-strip { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
 .reading-nav, .chart-controls, .skip-link, .expand-list { display: none; }
 .wrap { width: 100%; }
 .hero, .plate-figure { print-color-adjust: exact; }
 .section, .figure { break-inside: avoid; }
 .hero-layout { padding: 20px 0; }
 .section { padding: 25px 0; }
}