:root {
  color-scheme: light;
  --ink: #18201d;
  --muted: #606a65;
  --line: #cfd5d1;
  --line-strong: #8d9892;
  --paper: #f7f8f7;
  --white: #fff;
  --green: #315f52;
  --green-dark: #20483d;
  --sea: #759ba4;
  --rain-two: #b98359;
  --focus: #8b431e;
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font: 17px/1.56 var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }

.site-header {
  height: 68px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .035em;
}
.wordmark {
  color: var(--ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-decoration: none;
}
.findings-page #app,
.findings-page #then-now-app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 90px;
}

.hero {
  min-height: calc(100vh - 68px);
  padding: 32px 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
  gap: clamp(42px, 5vw, 78px);
  align-items: center;
}
.artwork-figure { margin: 0; min-width: 0; }
.artwork-figure img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(24, 32, 29, .12);
  outline-offset: -1px;
}
.artwork-figure figcaption {
  max-width: 76ch;
  margin-top: 11px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}
.artwork-empty {
  min-height: 470px;
  display: grid;
  place-items: center;
  padding: 40px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}
.hero-copy { align-self: center; }
.eyebrow {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .025em;
}
.hero h1 {
  margin: 0;
  font: 400 clamp(1.8rem, 2.4vw, 2.65rem)/1.05 var(--serif);
  letter-spacing: -.018em;
}
.object-line { margin: 12px 0 0; color: var(--muted); font-size: .82rem; }
.headline {
  max-width: 18ch;
  margin: 27px 0 22px;
  font: 400 clamp(2rem, 3vw, 3.2rem)/1.02 var(--serif);
  letter-spacing: -.028em;
}
.findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  border-top: 1px solid var(--line-strong);
}
.finding {
  min-height: 106px;
  padding: 16px 18px 13px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.finding:nth-child(odd) { border-right: 1px solid var(--line); }
.finding:nth-child(even) { padding-left: 20px; }
.finding:hover .finding-value { color: var(--green); }
.finding-value {
  display: block;
  font: 500 clamp(2rem, 3vw, 3.2rem)/.94 var(--sans);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums lining-nums;
}
.finding-label {
  display: block;
  max-width: 27ch;
  margin-top: 9px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}

.story-section { padding: 96px 0; border-top: 1px solid var(--line); }
.section-heading {
  max-width: 23ch;
  margin: 0 0 44px;
  font: 400 clamp(2.2rem, 4vw, 4.2rem)/1.02 var(--serif);
  letter-spacing: -.03em;
}
.section-kicker {
  margin: 0 0 11px;
  color: var(--green);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .035em;
}
.chart-shell { position: relative; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: -18px 0 22px;
  color: var(--muted);
  font-size: .8rem;
}
.legend-key { display: inline-flex; gap: 8px; align-items: center; }
.legend-key::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.legend-key.rain-one::before { height: 7px; background: var(--sea); }
.legend-key.rain-two::before { height: 7px; background: var(--rain-two); }
.weather-chart,
.then-now-chart { width: 100%; height: auto; display: block; overflow: visible; }
.weather-chart text,
.then-now-chart text { fill: var(--muted); font: 12px var(--sans); }
.weather-chart .chart-label,
.then-now-chart .chart-label,
.then-now-chart .target-label,
.then-now-chart .baseline-label,
.then-now-chart .thaw-label,
.then-now-chart .freezing-label { fill: var(--ink); font-weight: 600; letter-spacing: .01em; }
.weather-chart .grid,
.then-now-chart .grid { stroke: #dfe3e0; stroke-width: 1; }
.weather-chart .threshold { stroke: #9b6849; stroke-width: 1; stroke-dasharray: 5 5; }
.weather-chart .wind-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.weather-chart .gale-dot { fill: var(--focus); stroke: var(--white); stroke-width: 2; }
.weather-chart .gale-label { fill: var(--ink); font-size: 11px; font-weight: 600; }
.weather-chart .visit-band { fill: #edf2ef; }
.weather-chart .gap-band { fill: #f0f1f0; }
.weather-chart .rain-one { fill: var(--sea); opacity: .8; }
.weather-chart .rain-two { fill: var(--rain-two); opacity: .74; }
.weather-chart .cursor,
.then-now-chart .cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.weather-chart .hit-area,
.then-now-chart .hit-area { fill: transparent; cursor: crosshair; }
.chart-readout {
  min-height: 82px;
  margin-top: 18px;
  padding: 15px 0;
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 20px;
  align-items: baseline;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.readout-item { min-width: 0; }
.readout-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 600; }
.readout-value { display: block; margin-top: 4px; font-size: .92rem; font-variant-numeric: tabular-nums; }
.chart-control { width: 100%; margin: 17px 0 0; accent-color: var(--green); }
.chart-instruction,
.chart-caption { color: var(--muted); font-size: .8rem; }
.chart-instruction { margin: 7px 0 0; }
.chart-caption { max-width: 92ch; margin: 17px 0 0; }

.limits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(38px, 7vw, 110px); }
.limit-column h3 { margin: 0 0 22px; font: 400 1.42rem/1.2 var(--serif); }
.limit-list { margin: 0; padding: 0; list-style: none; }
.limit-list li { padding: 15px 0; border-top: 1px solid var(--line); font-size: .98rem; }
.limit-list li::before { content: none; }

.sources-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: end; }
.source-only { display: block; }
.source-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.source-list li { border-bottom: 1px solid var(--line); }
.source-list a { padding: 14px 0; display: flex; justify-content: space-between; gap: 20px; text-decoration: none; }
.source-list a::after { content: "↗"; color: var(--muted); }
.source-list a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.record-button,
.download-link {
  display: inline-block;
  padding: 7px 0 5px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.record-button::after { content: " →"; color: var(--green); }
.download-link::after { content: " ↓"; color: var(--green); }
.record-button:hover,
.download-link:hover { color: var(--green-dark); border-bottom-width: 2px; }
.empty-section { padding: 34px; border: 1px solid var(--line); color: var(--muted); }

/* The complete record keeps a compact document layout. */
.record-page,
body:not(.findings-page):not(.record-page) {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
  background: var(--white);
}
.record-page header { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.record-page h1,
body:not(.findings-page):not(.record-page) h1 { font: 400 2.25rem/1.15 var(--serif); margin-bottom: .5rem; }
.record-page h2,
body:not(.findings-page):not(.record-page) h2 { font: 400 1.55rem/1.2 var(--serif); margin: 0 0 .7rem; }
.record-page h3 { font: 400 1.15rem/1.25 var(--serif); }
.record-page p { max-width: 82ch; }
.record-page section,
body:not(.findings-page):not(.record-page) section { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; text-align: left; }
th,
td { padding: .58rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f1f3f2; font-weight: 650; }
caption { text-align: left; padding: .4rem 0; }
.scroll { overflow-x: auto; max-width: 100%; }
.daily { max-height: 34rem; overflow: auto; }
.daily th { position: sticky; top: 0; }
code { overflow-wrap: anywhere; font-size: .82em; }
details { margin: .75rem 0; }
summary { cursor: pointer; text-decoration: underline; text-underline-offset: .16em; }
select,
button { font: inherit; padding: .4rem .58rem; background: var(--white); color: inherit; border: 1px solid var(--line-strong); }
.record-page select,
.record-page button { margin: .25rem .5rem; }
.record-page svg { width: 100%; height: auto; display: block; }

/* Then and now: a publication-like object study with data kept secondary to the work. */
.then-now-page {
  --winter-blue: #78959b;
  --winter-pale: #eef2f1;
  --thaw: #b78a57;
}
.then-now-page .then-now-hero { grid-template-columns: minmax(0, 1.1fr) minmax(490px, .9fr); }
.then-now-page .artwork-figure img { background: #dce3e2; }
.then-now-page .headline { margin-top: 23px; }
.then-now-page .finding-value { font-size: clamp(1.85rem, 2.45vw, 3rem); }
.then-now-page .comparison-value { font-size: clamp(1.35rem, 1.75vw, 1.95rem); letter-spacing: -.035em; }
.then-now-chart-block + .subsection-heading { margin-top: 82px; }
.subsection-heading { margin: 0 0 27px; font: 400 clamp(1.6rem, 2.7vw, 2.55rem)/1.08 var(--serif); letter-spacing: -.02em; }
.then-now-chart-block { margin-top: 22px; }
.chart-summary { max-width: 66ch; margin: 28px 0 0; font: 400 1.16rem/1.55 var(--serif); }
.then-now-chart .chart-zero { stroke: #89928d; stroke-width: 1; }
.then-now-chart .annual-bar { fill: var(--winter-blue); opacity: .5; }
.then-now-chart .target-bar { fill: var(--focus); opacity: 1; }
.then-now-chart .baseline-line { stroke: var(--green); stroke-width: 1.5; }
.then-now-chart .target-marker { stroke: var(--focus); stroke-width: 1; stroke-dasharray: 3 4; }
.then-now-chart .freezing-line { stroke: #7f8984; stroke-width: 1.25; stroke-dasharray: 6 5; }
.then-now-chart .thaw-band { fill: #eee6d9; opacity: .68; }
.then-now-chart .temperature-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.then-now-chart .maximum-line { stroke: var(--thaw); }
.then-now-chart .minimum-line { stroke: var(--green); }
.then-now-chart .record-dot { fill: var(--focus); stroke: var(--white); stroke-width: 2; }
.compact-readout {
  min-height: 52px;
  margin: 13px 0 0;
  padding: 13px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.then-now-page .chart-control { margin-top: 13px; }
.daily-legend { margin: 0 0 17px; }
.daily-legend .legend-key::before { height: 2px; }
.maximum-key::before { background: var(--thaw); }
.minimum-key::before { background: var(--green); }

.series-intro { max-width: 72ch; margin: -12px 0 42px; font: 400 1.2rem/1.55 var(--serif); }
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.series-grid li { min-width: 0; }
.series-work {
  min-height: 210px;
  padding: 15px 0 18px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}
.series-index { color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.series-title { margin-top: 19px; font: 400 1.18rem/1.22 var(--serif); }
.series-meta { margin-top: 10px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.series-work:hover .series-title { text-decoration: underline; text-underline-offset: .2em; }

.making-copy { max-width: 77ch; }
.making-copy p { margin: 0 0 1em; font: 400 clamp(1.15rem, 1.65vw, 1.4rem)/1.55 var(--serif); }
.source-citation { max-width: 95ch; margin: 25px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }

.witness-disclosure { margin: -8px 0 0; }
.witness-disclosure summary { width: fit-content; color: var(--green-dark); font-size: .84rem; font-weight: 600; }
.witness-intro { max-width: 72ch; margin: 30px 0 34px; font: 400 1.1rem/1.55 var(--serif); }
.witness-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(34px, 5vw, 70px); }
.witness { padding-top: 19px; border-top: 1px solid var(--line-strong); }
.witness blockquote { margin: 0; padding-left: 20px; border-left: 1px solid var(--line-strong); }
.witness blockquote p { margin: 0; font: 400 1.15rem/1.58 var(--serif); }
.translation { margin: 21px 0 0; color: var(--muted); font-size: .86rem; }
.witness-source { margin: 17px 0 0; color: var(--muted); font-size: .74rem; }

.label-box { padding: 32px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.label-text { max-width: 65ch; margin: 0; font: 400 clamp(1.2rem, 2vw, 1.6rem)/1.52 var(--serif); }
.copy-row { display: flex; gap: 16px; align-items: center; margin-top: 26px; }
.copy-button { padding: 8px 0 5px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; font-size: .76rem; font-weight: 650; }
.copy-button:hover { color: var(--green-dark); border-bottom-width: 2px; }
.copy-status,
.label-citation { color: var(--muted); font-size: .74rem; }
.label-citation { margin: 11px 0 0; }

.then-now-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; border-top: 1px solid var(--line-strong); }
.then-now-limits li { padding-right: 12px; }
.reuse-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 70px; align-items: end; }
.reuse-copy { max-width: 78ch; }
.reuse-copy p { margin: 0 0 10px; }
.reuse-copy p:last-child { margin-bottom: 0; }
.source-details { margin: 0; padding-top: 17px; border-top: 1px solid var(--line-strong); }
.source-details summary { font-size: .8rem; font-weight: 600; }
.source-subheading { margin: 30px 0 12px; font: 400 1.15rem/1.25 var(--serif); }
.receipt-list { margin: 19px 0 0; padding: 0; list-style: none; }
.receipt-list li { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 24px; padding: 11px 0; border-top: 1px solid var(--line); }
.receipt-list code { color: var(--muted); font-size: .68rem; }

@media (max-width: 1120px) {
  .site-header { padding: 0 32px; }
  .findings-page #app,
  .findings-page #then-now-app { padding-right: 32px; padding-left: 32px; }
  .hero,
  .then-now-page .then-now-hero { grid-template-columns: minmax(0, 1fr) minmax(450px, 1fr); gap: 34px; }
  .then-now-page .finding-value { font-size: 1.75rem; }
  .then-now-page .comparison-value { font-size: 1.18rem; }
  .chart-readout { grid-template-columns: repeat(3, 1fr); }
  .series-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .site-header { height: 62px; padding: 0 20px; }
  .findings-page #app,
  .findings-page #then-now-app { padding: 0 20px 56px; }
  .hero,
  .then-now-page .then-now-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 24px; }
  .artwork-empty { min-height: 300px; }
  .headline { max-width: none; }
  .story-section { padding: 66px 0; }
  .limits-grid,
  .sources-layout,
  .reuse-layout,
  .witness-grid,
  .then-now-limits { grid-template-columns: 1fr; }
  .reuse-layout { gap: 28px; align-items: start; }
  .chart-readout { grid-template-columns: repeat(2, 1fr); }
  .weather-chart,
  .then-now-chart { min-width: 760px; }
  .chart-shell { overflow-x: auto; padding-bottom: 8px; }
  .chart-control,
  .chart-instruction { min-width: 760px; }
  .record-page { padding: 1rem; }
  .then-now-page .finding-value { font-size: 1.95rem; }
  .then-now-page .comparison-value { font-size: 1.4rem; }
  .series-grid { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
  .series-work { min-height: 190px; }
  .receipt-list li { grid-template-columns: 1fr; gap: 5px; }
  .receipt-list code { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }