:root {
  /* Typography note: Space Mono** from Google Fonts sparingly for coordinates. */
  --charcoal-bark: #171714;
  --wet-soil: #2C2922;
  --warm-paper: #F1EBDD;
  --ash-line: #BDB5A4;
  --pale-sprout: #D9D2B8;
  --root-gray: #6E6A5E;
  --display: "Nunito Sans", "Trebuchet MS", Arial, sans-serif;
  --body: "Nunito", "Trebuchet MS", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }

body {
  margin: 0;
  background: var(--charcoal-bark);
  color: var(--charcoal-bark);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .24;
  background:
    radial-gradient(circle at 18% 23%, rgba(23,23,20,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 61%, rgba(110,106,94,.18) 0 1px, transparent 1.4px),
    repeating-linear-gradient(92deg, transparent 0 9px, rgba(44,41,34,.035) 10px 11px);
  background-size: 19px 23px, 29px 31px, auto;
  mix-blend-mode: multiply;
}

.atlas { background: var(--warm-paper); }

.spread {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(28px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ash-line);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(189,181,164,.8) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    radial-gradient(circle at 20% 85%, rgba(217,210,184,.45), transparent 24rem),
    var(--warm-paper);
}

.spread::before {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 42px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--root-gray);
  writing-mode: vertical-rl;
  z-index: 3;
}

.folio, .kicker, .annotation, .specimen-label, .label, .cover-annotations, .bottom-ledger, .ledger-row span, .ledger-row em {
  font-family: var(--mono);
  color: var(--root-gray);
  letter-spacing: .08em;
}

.folio { position: absolute; top: 18px; font-size: 11px; z-index: 4; }
.folio-left { left: clamp(28px, 4vw, 64px); }
.folio-right { right: clamp(28px, 4vw, 64px); }

.crop { position: absolute; width: 22px; height: 22px; border-color: var(--charcoal-bark); opacity: .5; z-index: 2; }
.crop-a { left: 20px; top: 20px; border-left: 1px solid; border-top: 1px solid; }
.crop-b { right: 20px; top: 20px; border-right: 1px solid; border-top: 1px solid; }
.crop-c { left: 20px; bottom: 20px; border-left: 1px solid; border-bottom: 1px solid; }
.crop-d { right: 20px; bottom: 20px; border-right: 1px solid; border-bottom: 1px solid; }

h1, h2, .chapter-title { font-family: var(--display); line-height: .88; margin: 0; color: var(--charcoal-bark); }
h1 { font-size: clamp(72px, 15vw, 230px); font-weight: 900; letter-spacing: -.09em; }
h2 { font-size: clamp(44px, 7vw, 108px); font-weight: 900; letter-spacing: -.06em; }
p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; margin: 0; }
.kicker { font-size: 12px; margin-bottom: 18px; }

.cover-copy { grid-column: 1 / 7; align-self: center; position: relative; z-index: 3; }
.thesis { width: min(620px, 95%); margin-top: 24px; color: var(--wet-soil); font-weight: 700; }
.cover-annotations { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 36px; font-size: 11px; }
.cover-annotations span { border-top: 1px solid var(--ash-line); padding-top: 8px; }

.plate { grid-column: 7 / 13; align-self: center; margin: 0; position: relative; }
.plate svg, .root-diagram svg, .canopy-map svg { width: 100%; height: auto; overflow: visible; }
.specimen-label { position: absolute; right: 2%; bottom: 8%; width: 210px; font-size: 11px; padding: 12px; border: 1px solid var(--ash-line); background: rgba(241,235,221,.76); }

svg text { font-family: var(--mono); font-size: 22px; fill: var(--root-gray); letter-spacing: .04em; }
.rings path, .cutaway ellipse { stroke: var(--ash-line); stroke-width: 2; }
.branch { stroke: var(--charcoal-bark); stroke-width: 2.4; stroke-linecap: round; }
.fine { stroke: var(--root-gray); stroke-width: 1.4; }
.arc { stroke: var(--ash-line); stroke-width: 1; stroke-dasharray: 3 10; opacity: .8; }
.seed { fill: var(--wet-soil); stroke: var(--pale-sprout); stroke-width: 2; }
.seed.active, .token.active { fill: var(--pale-sprout); }
.token { fill: var(--warm-paper); stroke: var(--charcoal-bark); stroke-width: 1.5; }
.soil { fill: none; stroke: var(--root-gray); stroke-width: 2; stroke-dasharray: 7 11; }
.draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: drawLine 3.8s ease forwards; }
.draw:nth-child(2n) { animation-delay: .25s; }
.draw:nth-child(3n) { animation-delay: .55s; }
.ring-hover { transition: stroke-width .45s ease, stroke .45s ease; }
.ring-hover:hover { stroke-width: 7; stroke: var(--wet-soil); }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.margin-column { grid-column: 1 / 4; align-self: center; padding-right: 20px; border-right: 1px solid var(--ash-line); z-index: 2; }
.margin-column h2 { font-size: clamp(34px, 4vw, 64px); margin-bottom: 22px; }
.margin-column p:not(.kicker) { color: var(--wet-soil); }
.root-diagram { grid-column: 4 / 13; align-self: center; }
.annotation { position: absolute; left: 35%; bottom: 10%; font-size: 11px; padding: 10px 12px; border: 1px solid var(--ash-line); background: var(--warm-paper); }

.rings-spread { background: linear-gradient(90deg, var(--wet-soil) 0 32%, var(--warm-paper) 32% 100%); }
.vertical-word { grid-column: 1 / 4; align-self: center; color: var(--pale-sprout); writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(82px, 11vw, 170px); font-weight: 900; letter-spacing: -.05em; }
.ring-ledger { grid-column: 4 / 8; align-self: end; padding-bottom: 12vh; z-index: 3; }
.ledger-row { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--ash-line); transition: transform .35s ease, background .35s ease; }
.ledger-row:hover { transform: translateX(18px); background: rgba(217,210,184,.25); }
.ledger-row strong { display: block; font-family: var(--display); font-size: clamp(24px, 3vw, 44px); line-height: 1; color: var(--charcoal-bark); }
.ledger-row em { display: block; font-size: 11px; font-style: normal; margin-top: 7px; }
.cutaway { position: absolute; right: 6vw; top: 12vh; width: min(46vw, 610px); }
.scar { fill: none; stroke: var(--wet-soil); stroke-width: 7; stroke-linecap: round; opacity: .72; }
.pullquote { position: absolute; right: 7vw; bottom: 10vh; width: min(420px, 36vw); font-family: var(--display); font-size: clamp(24px, 3.8vw, 58px); font-weight: 900; line-height: .98; letter-spacing: -.04em; color: var(--wet-soil); }

.canopy-spread h2 { grid-column: 1 / 6; align-self: start; margin-top: 12vh; z-index: 2; }
.canopy-map { grid-column: 3 / 13; align-self: center; position: relative; }
.leaf { fill: var(--warm-paper); stroke: var(--charcoal-bark); stroke-width: 2; transition: fill .35s ease; }
.leaf.active, .leaf:hover { fill: var(--pale-sprout); }
.label { position: absolute; font-size: 11px; padding: 9px 11px; border: 1px solid var(--ash-line); background: rgba(241,235,221,.8); }
.label-a { left: 22%; top: 16%; }
.label-b { right: 15%; top: 23%; }
.label-c { right: 2%; bottom: 28%; }

.ledger-spread { background: var(--charcoal-bark); color: var(--warm-paper); }
.ledger-spread::before, .ledger-spread .folio { color: var(--ash-line); }
.ledger-copy { grid-column: 2 / 8; align-self: center; }
.ledger-copy h2, .ledger-copy p { color: var(--warm-paper); }
.ledger-copy .kicker { color: var(--pale-sprout); }
.bottom-ledger { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--root-gray); }
.bottom-ledger span { padding: 22px; border-right: 1px solid var(--root-gray); text-align: center; color: var(--pale-sprout); }
.stamp-cluster { grid-column: 8 / 12; align-self: center; display: grid; grid-template-columns: repeat(2, 150px); gap: 22px; transform: rotate(-7deg); }
.stamp { height: 150px; border: 2px solid var(--ash-line); color: var(--pale-sprout); display: grid; place-items: center; border-radius: 32px; font-family: var(--display); font-weight: 900; font-size: 54px; background: rgba(217,210,184,.05); }
.stamp:nth-child(3) { grid-column: span 2; width: 220px; justify-self: center; }

.magnetic { will-change: transform; transition: transform .22s ease-out; }
.page-index { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 10px; }
.page-index a { width: 34px; height: 24px; display: grid; place-items: center; text-decoration: none; color: var(--root-gray); background: rgba(241,235,221,.78); border: 1px solid var(--ash-line); font-family: var(--mono); font-size: 10px; }
.page-index a.active { background: var(--wet-soil); color: var(--pale-sprout); border-color: var(--wet-soil); }

.spread.is-visible .draw { animation-play-state: running; }

@media (max-width: 820px) {
  html { scroll-snap-type: none; }
  .spread { min-height: auto; grid-template-columns: 1fr; padding: 72px 24px; gap: 30px; }
  .spread::before { display: none; }
  .cover-copy, .plate, .margin-column, .root-diagram, .ring-ledger, .canopy-spread h2, .canopy-map, .ledger-copy, .stamp-cluster { grid-column: 1; }
  h1 { font-size: clamp(68px, 22vw, 122px); }
  .margin-column { border-right: 0; border-bottom: 1px solid var(--ash-line); padding: 0 0 24px; }
  .rings-spread { background: linear-gradient(180deg, var(--wet-soil) 0 22%, var(--warm-paper) 22% 100%); }
  .vertical-word { writing-mode: initial; transform: none; font-size: 64px; }
  .cutaway { position: relative; right: auto; top: auto; width: 100%; grid-column: 1; }
  .pullquote { position: relative; right: auto; bottom: auto; width: auto; }
  .stamp-cluster { grid-template-columns: repeat(2, minmax(110px, 1fr)); transform: none; }
  .page-index { display: none; }
  .bottom-ledger { position: relative; grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
}