:root {
  --sc-canvas: #f5f1e8;
  --sc-surface: #d9e3de;
  --sc-ink: #17211d;
  --sc-ink-soft: #52635c;
  --sc-accent: #d49b46;
  --sc-accent-ink: #17211d;
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --forest: #173f35;
  --clay: #a85f45;
  --paper: #f5f1e8;
  --chalk: #f7f4ed;
  --mist: #d9e3de;
  --line: color-mix(in srgb, var(--forest), transparent 72%);
  --gutter: clamp(1.2rem, 4vw, 5rem);
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--sc-ink);
  background: var(--sc-canvas);
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
}

body.nav-open { overflow: hidden; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:hover { text-decoration-color: var(--sc-accent); }
:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; inset: .75rem auto auto .75rem; z-index: 100; transform: translateY(-200%); background: var(--forest); color: white; padding: .65rem 1rem; }
.skip-link:focus { transform: translateY(0); }
.sc-grain { opacity: .025; }

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper), transparent 4%);
}
.brand img { width: min(15rem, 48vw); }
.site-nav { justify-self: end; }
.site-nav ul { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: .2rem; }
.nav-toggle { display: none; border: 1px solid var(--forest); background: transparent; color: inherit; padding: .55rem .8rem; font: inherit; font-weight: 700; }
.donation-status { max-width: 11rem; margin: 0; color: var(--sc-ink-soft); font-size: .72rem; line-height: 1.3; }

.folio {
  position: sticky;
  top: 0;
  z-index: 22;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper), transparent 8%);
  backdrop-filter: blur(12px);
  color: var(--forest);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.title-page { min-height: calc(100svh - 7rem); display: grid; align-content: center; padding: clamp(5rem, 12vh, 10rem) var(--gutter); }
.title-page__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .5fr); align-items: end; gap: clamp(2rem, 7vw, 8rem); }
.title-page h1, .page-hero h1 { max-width: 11ch; margin: 0; font: 500 clamp(4rem, 10vw, 9.5rem)/.88 var(--sc-font-display); letter-spacing: -.055em; text-wrap: balance; }
.title-page__aside { max-width: 25rem; border-top: .32rem solid var(--sc-accent); padding-top: 1.2rem; }
.title-page__aside p { margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.45; }
.title-page__meta { margin-top: 1.25rem !important; color: var(--sc-ink-soft); font-size: .75rem !important; text-transform: uppercase; letter-spacing: .1em; }

.chapter { position: relative; padding: clamp(5rem, 10vw, 10rem) var(--gutter); border-top: 1px solid var(--line); background: var(--chapter-bg, var(--paper)); color: var(--chapter-ink, var(--sc-ink)); }
.chapter--forest { --chapter-bg: var(--forest); --chapter-ink: var(--chalk); --sc-ink: var(--chalk); --sc-ink-soft: #c6d6cf; color: var(--chapter-ink); }
.chapter--mist { --chapter-bg: var(--mist); }
.chapter--clay { --chapter-bg: var(--clay); --chapter-ink: var(--chalk); --sc-ink: var(--chalk); --sc-ink-soft: #f0d8cf; color: var(--chapter-ink); }
.chapter__grid { width: min(100%, 90rem); margin-inline: auto; display: grid; grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.45fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.chapter__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chapter h2, .content-page h2 { margin: 0 0 1.5rem; max-width: 15ch; font: 500 clamp(2.8rem, 6vw, 6rem)/.96 var(--sc-font-display); letter-spacing: -.035em; text-wrap: balance; }
.chapter h3, .content-page h3 { font: 550 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--sc-font-display); }
.lede { max-width: 52ch; margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45; }
.body-copy { max-width: var(--measure); }
.body-copy p { margin: 0 0 1.2rem; }
.source-note { max-width: 68ch; padding-top: 1rem; border-top: 1px solid currentColor; color: var(--sc-ink-soft); font-size: .8rem; }

.mechanism { min-height: 130svh; overflow: clip; }
.mechanism__visual { position: relative; margin-top: 3rem; }
.mechanism__visual > img { width: 100%; height: auto; border: 1px solid var(--line); }
.mechanism__notes { position: relative; min-height: 32rem; }
.field-note { width: min(31rem, 92%); padding: clamp(1.3rem, 3vw, 2.4rem); border: 1px solid var(--line); background: var(--chalk); box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--forest), transparent 84%); }
.field-note + .field-note { margin: -3rem 0 0 auto; }
.field-note strong { display: block; color: var(--forest); font: 550 1.55rem/1.2 var(--sc-font-display); }

.evidence-layout { position: relative; width: min(100%, 90rem); margin-inline: auto; display: grid; grid-template-columns: minmax(10rem, .42fr) minmax(0, 1.6fr); gap: clamp(2rem, 7vw, 7rem); }
.evidence-thread { position: sticky; top: 4rem; height: calc(100svh - 6rem); display: grid; place-items: center; align-self: start; }
.evidence-thread svg { width: 7rem; height: 72%; overflow: visible; }
.evidence-thread__path { fill: none; stroke: color-mix(in srgb, var(--sc-accent), white 18%); stroke-width: 3; stroke-dasharray: 4 9; }
.evidence-thread__bed { fill: none; stroke: color-mix(in srgb, white, transparent 82%); stroke-width: 1; }
.evidence-node { cursor: pointer; fill: var(--forest); stroke: var(--sc-accent); stroke-width: 4; transition: transform 160ms var(--sc-ease-out); transform-box: fill-box; transform-origin: center; }
.evidence-node[aria-current="true"] { fill: var(--sc-accent); transform: scale(1.5); }
.evidence-node:focus { outline: none; filter: drop-shadow(0 0 .35rem white); }
.evidence-date { fill: currentColor; font: 700 9px var(--sc-font-text); letter-spacing: .09em; }
.case-study { min-height: 220svh; display: grid; align-content: center; }
.case-study__plate { padding: clamp(1.2rem, 3vw, 3rem); border: 1px solid color-mix(in srgb, white, transparent 65%); }
.case-study__context { color: var(--sc-ink-soft); max-width: 64ch; }
.figures { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: clamp(1rem, 4vw, 4rem); align-items: end; margin: clamp(2.5rem, 7vw, 7rem) 0; }
.figure-block small { display: block; max-width: 16rem; margin-top: .75rem; color: var(--sc-ink-soft); }
.figure { display: block; font: 500 clamp(3rem, 8vw, 8rem)/.85 var(--sc-font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.figure-operator { align-self: center; font: 400 clamp(2rem, 5vw, 5rem)/1 var(--sc-font-display); color: var(--sc-accent); }
.evidence-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.text-link, .evidence-open { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; padding: .2rem 0; font: inherit; font-weight: 700; cursor: pointer; }

.proof-spread { min-height: 100svh; }
.document-figure { margin: 0 0 3rem; }
.document-figure img { width: 100%; height: min(62svh, 42rem); object-fit: cover; }
.document-figure figcaption { max-width: 64ch; padding-top: .7rem; color: var(--sc-ink-soft); font-size: .78rem; }
.proof-list { display: grid; gap: 0; padding: 0; list-style: none; }
.proof-list li { display: grid; grid-template-columns: minmax(8rem, .5fr) 1.5fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.proof-list strong { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }

.history-rail { display: flex; width: max-content; gap: clamp(1rem, 3vw, 3rem); padding: 0 var(--gutter); }
.history-stage { display: grid; align-content: center; gap: clamp(2rem, 5vh, 4rem); overflow: hidden; }
.history-heading { max-width: 17ch; margin: 0 var(--gutter); font: 500 clamp(2.6rem, 5vw, 5.2rem)/.98 var(--sc-font-display); letter-spacing: -.035em; }
.history-card { width: min(76vw, 34rem); min-height: 31rem; display: grid; align-content: end; padding: clamp(1.5rem, 4vw, 3rem); border-top: .35rem solid var(--sc-accent); background: var(--chalk); color: var(--sc-ink); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--forest), transparent 86%); }
.history-card:first-child { width: min(86vw, 46rem); }
.history-card time { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.history-card p { max-width: 52ch; }
.history-card--places { background: var(--forest); color: var(--chalk); }

.colophon { padding: clamp(6rem, 12vw, 12rem) var(--gutter) 2rem; background: var(--forest); color: var(--chalk); }
.colophon__inner { width: min(100%, 82rem); margin: 0 auto; }
.colophon h2 { max-width: 14ch; margin: 0 0 2rem; font: 500 clamp(3rem, 7vw, 7rem)/.94 var(--sc-font-display); letter-spacing: -.04em; }
.colophon__paths { max-width: 70ch; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.disabled-link { display: inline-block; color: #c6d6cf; cursor: not-allowed; text-decoration: line-through; }
.handoff-note { max-width: 62ch; margin: 2rem 0; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, white, transparent 65%); font-size: .85rem; }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding-top: 5rem; border-top: 1px solid color-mix(in srgb, white, transparent 75%); color: #c6d6cf; font-size: .75rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; }

.evidence-dialog { width: min(42rem, calc(100% - 2rem)); border: 0; padding: 0; color: var(--sc-ink); background: var(--chalk); box-shadow: 0 2rem 6rem rgb(0 0 0 / .35); }
.evidence-dialog::backdrop { background: rgb(15 27 23 / .72); }
.evidence-dialog__inner { padding: clamp(1.5rem, 5vw, 3.5rem); }
.dialog-close { float: right; border: 1px solid currentColor; background: transparent; padding: .45rem .7rem; font: inherit; cursor: pointer; }
.evidence-dialog h2 { margin-top: 2.5rem; font: 500 clamp(2.2rem, 5vw, 4rem)/1 var(--sc-font-display); }
.evidence-dialog dl { display: grid; grid-template-columns: 7rem 1fr; gap: .7rem 1rem; }
.evidence-dialog dt { font-weight: 800; }
.evidence-dialog dd { margin: 0; }

.page-hero { padding: clamp(5rem, 11vw, 10rem) var(--gutter); border-bottom: 1px solid var(--line); }
.page-hero p { max-width: 55ch; margin: 2rem 0 0; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.content-page { width: min(100% - (2 * var(--gutter)), 82rem); margin-inline: auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.content-page > section { display: grid; grid-template-columns: minmax(11rem, .55fr) minmax(0, 1.45fr); gap: clamp(2rem, 7vw, 7rem); padding: clamp(3rem, 6vw, 6rem) 0; border-top: 1px solid var(--line); }
.content-page h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); }
.project-list, .update-list { margin: 0; padding: 0; list-style: none; }
.project-list li, .update-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.project-list a, .update-list a { font-weight: 700; }
.notice { max-width: 65ch; padding: 1.25rem; border: 1px solid var(--clay); background: color-mix(in srgb, var(--clay), transparent 92%); }
.status-chip { display: inline-block; padding: .3rem .55rem; background: var(--mist); color: var(--forest); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.contact-list { padding: 0; list-style: none; }
.contact-list li { margin-bottom: 1.2rem; }
.legacy-copy { max-width: 72ch; }
.legacy-copy p { margin: 0 0 1.15rem; }
blockquote { max-width: 58ch; margin: 2rem 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 1px solid var(--clay); font: 500 clamp(1.35rem, 2.2vw, 2rem)/1.4 var(--sc-font-display); }
blockquote cite { display: block; margin-top: 1rem; font: 700 .75rem/1.4 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; }

[hidden] { display: none !important; }
.guide { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; width: min(24rem, calc(100vw - 2rem)); }
.guide__toggle { margin-left: auto; display: block; border: 1px solid var(--chalk); background: var(--forest); color: var(--chalk); padding: .8rem 1rem; box-shadow: 0 .6rem 2rem rgb(0 0 0 / .18); font: 700 .82rem/1 var(--sc-font-text); cursor: pointer; }
.guide__panel { margin-top: .5rem; border: 1px solid var(--forest); background: var(--chalk); color: var(--forest); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .28); }
.guide__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.guide__head button { border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.guide__notice { margin: 0; padding: .8rem 1rem; color: var(--sc-ink-soft); font-size: .75rem; }
.guide__messages { max-height: 14rem; overflow-y: auto; padding: 0 1rem; }
.guide__message { margin: .65rem 0; padding: .65rem .75rem; font-size: .88rem; line-height: 1.45; }
.guide__message--visitor { margin-left: 2rem; background: var(--mist); }
.guide__message--guide { margin-right: 2rem; border: 1px solid var(--line); }
.guide__form { display: grid; gap: .35rem; padding: 1rem; border-top: 1px solid var(--line); }
.guide__form label { margin-top: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide__form select, .guide__form textarea { width: 100%; border: 1px solid var(--forest); border-radius: 0; background: white; color: var(--forest); padding: .6rem; font: inherit; }
.guide__form button { justify-self: start; border: 1px solid var(--forest); background: var(--forest); color: white; padding: .65rem 1rem; font: 700 .85rem/1 var(--sc-font-text); cursor: pointer; }
.guide__form button:disabled { cursor: wait; opacity: .62; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  .site-nav { position: fixed; inset: 0; display: none; place-items: center; background: var(--forest); color: var(--chalk); }
  .site-nav[data-open="true"] { display: grid; }
  .site-nav ul { flex-direction: column; font-size: 1.35rem; }
  .site-nav a { font-size: 1rem; }
  .donation-status { display: none; }
  .nav-toggle { position: relative; z-index: 31; }
  .title-page__inner, .chapter__grid, .content-page > section { grid-template-columns: 1fr; }
  .title-page h1, .page-hero h1 { font-size: clamp(3.6rem, 15vw, 6rem); }
  .evidence-layout { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
  .evidence-thread svg { width: 3rem; }
  .figures { grid-template-columns: 1fr; }
  .figure-operator { transform: rotate(90deg); justify-self: start; }
  .proof-list li { grid-template-columns: 1fr; gap: .25rem; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .folio { padding-inline: 1rem; }
  .folio span:first-child { display: none; }
  .chapter, .title-page, .page-hero { padding-inline: 1.15rem; }
  .evidence-layout { grid-template-columns: 2rem minmax(0, 1fr); }
  .evidence-thread svg { width: 2.2rem; }
  .evidence-date { display: none; }
  .case-study__plate { padding-inline: .8rem; }
  .figure { font-size: clamp(2.7rem, 14vw, 4.8rem); }
  .content-page { width: calc(100% - 2.3rem); }
  .project-list li, .update-list li { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .field-note + .field-note { margin-top: 1rem; }
  .evidence-node { transition: none; }
}