/* Painting pages (then-and-now, dossier, record) on the paint-and-ledger system.
   Loaded after the page's own stylesheets; it only re-points tokens and re-seats the hero. */

body.then-now-page,
body.findings-page,
body.window-page,
body.dossier-page,
body.record-page {
  --ground: #ece8de;
  --ground-deep: #e2ddd0;
  --ink: #18202c;
  --muted: #434b57;
  --line: rgba(24, 32, 44, .18);
  --line-strong: rgba(24, 32, 44, .55);
  --accent: #c3262f;
  --paper: #ece8de;
  --white: #f6f3ec;
  --green: #c3262f;
  --green-dark: #18202c;
  --winter-blue: #3d6790;
  --thaw: #a0522d;
  --focus: #c3262f;
  --ice: #ece8de;
  --ice-deep: #e2ddd0;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Serif 4", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Serif 4", Georgia, serif;
  --page-max: 1360px;
  --page-edge: clamp(20px, 4.4vw, 64px);
  background: #ece8de;
  color: #18202c;
  font-family: var(--text);
}

body.findings-page h1,
body.findings-page h2,
body.findings-page .section-heading,
body.findings-page .subsection-heading,
body.window-page h1,
body.window-page h2,
body.dossier-page h1,
body.dossier-page h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 72;
}
body.findings-page .eyebrow,
body.findings-page .section-kicker,
body.findings-page .chart-label,
body.window-page .eyebrow {
  font-family: var(--text);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red-ink);
}

/* The hero: the painting whole on the night desk, identity beside it, never over it. */
.then-now-page .painting-hero {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 50% 60% at 66% 40%, rgba(255, 226, 178, .14), transparent 70%),
    var(--night);
  color: var(--on-night);
}
.then-now-page .hero-stage {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(44px, 7vh, 84px) var(--gutter) clamp(64px, 9vh, 96px);
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.then-now-page .painting-hero .artwork-figure {
  position: relative;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  background: #0b1523;
  overflow: visible;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 40px 80px -24px rgba(0, 0, 0, .8);
}
.then-now-page .painting-hero .artwork-figure img,
.js .then-now-page .painting-hero .artwork-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
  transform: none;
}
.then-now-page .hero-marks .hero-line {
  stroke: var(--red-bright);
  stroke-width: 3.2;
  filter: drop-shadow(0 1px 1.5px rgba(10, 18, 30, .55));
}
.then-now-page .hero-marks .hero-base {
  stroke: #fff;
  opacity: .7;
  filter: drop-shadow(0 1px 1px rgba(10, 18, 30, .5));
}
.then-now-page .hero-marks .hero-tick { stroke: var(--red-bright); stroke-width: 2; }
.then-now-page .hero-marks .hero-dot { fill: var(--red-bright); stroke: #fff; stroke-width: 2; }
.then-now-page .painting-hero .hero-label span {
  background: rgba(14, 27, 45, .88);
  color: #fff;
  text-shadow: none;
  padding: 5px 9px 6px;
  border-radius: 2px;
  font-family: var(--text);
}
.then-now-page .painting-hero .hero-label strong { color: #ff8a7e; font-family: var(--text); font-weight: 600; }
.then-now-page .painting-hero .artwork-figure figcaption {
  position: absolute;
  top: calc(100% + 12px);
  bottom: auto;
  left: 0;
  max-width: none;
  color: var(--on-night-3);
  text-shadow: none;
  font-size: 13.5px;
  opacity: 1;
}
.then-now-page .painting-hero .artwork-figure figcaption a { color: var(--on-night-2); }
.then-now-page .painting-hero .hero-identity {
  position: static;
  width: auto;
  max-width: none;
  padding: 8px 0 0;
  margin: 0;
  background: none;
  color: var(--on-night);
  text-shadow: none;
}
.then-now-page .painting-hero .hero-identity::before { display: none; }
.then-now-page .painting-hero .hero-identity .eyebrow { color: var(--red-bright); font: italic 400 19px/1.3 var(--text); margin: 0 0 12px; }
.then-now-page .painting-hero .hero-identity h1 {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -.018em;
  color: var(--on-night);
  margin: 0 0 20px;
  text-shadow: none;
}
.then-now-page .painting-hero .hero-identity .object-line { color: var(--on-night-2); font: 400 16px/1.5 var(--text); }
.then-now-page .painting-hero .hero-evidence {
  max-width: none;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 6vw, 80px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) clamp(44px, 5vw, 64px);
}
.then-now-page .painting-hero .headline {
  font-family: var(--display);
  font-size: clamp(30px, 2.9vw, 44px);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  color: var(--ink);
  margin: 0 0 24px;
}
.then-now-page .painting-hero .finding-value {
  font-family: var(--text);
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.then-now-page .painting-hero .comparison-value { font-size: clamp(26px, 2.3vw, 34px); }
.then-now-page .painting-hero .finding:first-child .finding-value { color: var(--red); }
.then-now-page .painting-hero .finding-label { color: var(--ink-2); font-family: var(--text); }

/* Charts and data marks take the red pencil. */
.then-now-page .then-now-chart .annual-bar { fill: rgba(24, 32, 44, .3); stroke: none; opacity: 1; }
.then-now-page .then-now-chart .target-bar { fill: var(--red); stroke: none; opacity: 1; }
.then-now-page .minimum-line,
.then-now-page .temperature-line { stroke: var(--red); }
.then-now-page .maximum-line { stroke: #3d6790; }
.then-now-page .target-marker,
.then-now-page .record-dot { fill: var(--red); stroke: var(--red); }
.then-now-page .baseline-line { stroke: #3d6790; }
.then-now-page .chart-control input[type=range] { accent-color: var(--red); }

/* Documents and the label read as paper objects. */
.then-now-page .witness,
.then-now-page .label-box {
  background: var(--card);
  box-shadow: var(--shadow-paper);
  border: 0;
}
.then-now-page .label-box { padding: 32px 34px; }
.then-now-page .witness { padding: 30px 32px 26px; }
.then-now-page .translation { font-family: var(--text); font-style: italic; }

@media (max-width: 1000px) {
  .then-now-page .hero-stage { grid-template-columns: 1fr; }
}

/* Focus must land at once for keyboard readers; no smooth scrolling on these pages. */
html { scroll-behavior: auto !important; }

/* The painting is not a chart ground: the record is drawn in the charts below, not over the canvas. */
.then-now-page .painting-hero .hero-marks,
.then-now-page .painting-hero .hero-labels { display: none; }

@media (max-width: 900px) {
  .findings-page .chart-control,
  .findings-page .chart-instruction { min-width: 0; width: 100%; max-width: 100%; }
}

/* T76 review: the chart key matches the lines it names; the findings panel runs edge to edge. */
.then-now-page .daily-legend .maximum-key::before { background: var(--red); }
.then-now-page .daily-legend .minimum-key::before { background: var(--ink); }
.then-now-page .painting-hero .hero-evidence { max-width: none !important; width: 100%; box-sizing: border-box; }
/* The full record is a working document: full page width on paper, and dates and values never break mid-token. */
body.record-page { max-width: none; margin: 0; padding: 0; }
body.record-page main#app { max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 72px; }
body.record-page td:first-child, body.record-page td:last-child { white-space: nowrap; }
.then-now-page .subsection-heading { margin-top: 56px; }
/* Chart labels keep a halo of the page's paper so a line cannot strike through them. */
.then-now-page .then-now-chart svg text, .then-now-page svg .freezing-label, .then-now-page svg .chart-label { paint-order: stroke; stroke: var(--ground); stroke-width: 5px; stroke-linejoin: round; }
/* The full record styles every <header> and heading as a document; the method card keeps its own form. */
body.record-page .method-card .mc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 30px; padding: 0; border: 0; text-align: left; }
body.record-page .method-card .mc-kicker { flex-basis: 100%; margin: 0; }
body.record-page .method-card .mc-title { font: 500 clamp(30px, 2.8vw, 42px)/1.05 var(--display); letter-spacing: -.012em; margin: 0; font-variation-settings: "opsz" 28; }
body.record-page .method-card .mc-step h3 { font: 600 21px/1.2 var(--display); margin: 0 0 10px; }