:root {
  /* DESIGN TYPOGRAPHY TOKEN: IBM Plex Mono for tiny ledger codes */
  --violet: #6E5A8A;
  --copper: #A9672B;
  --burgundy: #7C2F36;
  --apricot: #F2A65A;
  --black: #1E1914;
  --cream: #F6EACB;
  --green: #386B45;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", "Inter", "Lato", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--black);
  background:
    radial-gradient(circle at 30% 20%, rgba(56,107,69,.24), transparent 45%),
    linear-gradient(135deg, #F6EACB 0%, #F2A65A 42%, #6E5A8A 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(30,25,20,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,25,20,.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(30,25,20,.18) 1px, transparent 1.6px);
  background-size: 100% 38px, 42px 100%, 7px 7px;
  mix-blend-mode: multiply;
  z-index: 20;
}

.atmosphere {
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 70% 12%, rgba(242,166,90,.55), transparent 28%),
    radial-gradient(circle at 10% 60%, rgba(124,47,54,.22), transparent 35%),
    radial-gradient(circle at 80% 74%, rgba(56,107,69,.20), transparent 32%);
  animation: dawnBleed 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes dawnBleed {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .65; }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); opacity: .95; }
}

.issue-tabs {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  gap: .35rem;
  transform: rotate(1deg);
}

.issue-tabs a {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--black);
  text-decoration: none;
  text-transform: uppercase;
  padding: .45rem .55rem;
  background: rgba(246,234,203,.76);
  border: 1px solid rgba(169,103,43,.7);
  box-shadow: 2px 2px 0 rgba(124,47,54,.22);
}

.living-vine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 620vh;
  z-index: 3;
  pointer-events: none;
}

#vinePath {
  fill: none;
  stroke: var(--copper);
  stroke-width: 3.2;
  stroke-dasharray: 18 12 3 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(169,103,43,.35));
}

.spread {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 7vw, 8rem);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.spread::after {
  content: attr(data-scene);
  position: absolute;
  left: 1.2rem;
  bottom: 1rem;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .22em;
  color: rgba(30,25,20,.45);
  writing-mode: vertical-rl;
}

.hero { grid-template-columns: minmax(0, 1fr) 280px; }

.paper-frame,
.draw-frame {
  position: relative;
  background: rgba(246,234,203,.73);
  border: 1px solid rgba(169,103,43,.35);
  box-shadow: 0 28px 80px rgba(30,25,20,.14), inset 0 0 0 1px rgba(246,234,203,.55);
}

.draw-frame::before,
.draw-frame::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--copper);
  pointer-events: none;
  transform-origin: left top;
  clip-path: inset(0 100% 100% 0);
}

.draw-frame::after {
  inset: -16px;
  border-color: rgba(56,107,69,.72);
  border-style: double;
  transform-origin: right bottom;
}

.draw-frame.in-view::before { animation: drawBorder 1.35s ease forwards, copperPulse 1.8s ease 1.35s; }
.draw-frame.in-view::after { animation: drawBorderAlt 1.55s ease .18s forwards; }

@keyframes drawBorder { to { clip-path: inset(0 0 0 0); } }
@keyframes drawBorderAlt { to { clip-path: inset(0 0 0 0); } }
@keyframes copperPulse { 50% { box-shadow: 0 0 24px rgba(169,103,43,.45); } }

.hero-frame {
  width: min(920px, 88vw);
  padding: clamp(2rem, 6vw, 5rem);
  margin-left: 4vw;
  transform: rotate(-1.2deg);
}

.kicker,
.dek,
.chapter-label,
.mono,
.caption { font-family: var(--mono); }

.kicker {
  margin: 0 0 1.4rem;
  color: var(--burgundy);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .76rem;
}

h1, h2, .pull-quote {
  font-family: var(--display);
  font-weight: 600;
  line-height: .9;
  margin: 0;
}

h1 {
  font-size: clamp(5.5rem, 15vw, 15rem);
  letter-spacing: -.08em;
  color: var(--black);
  text-shadow: 3px 2px 0 rgba(242,166,90,.55), -2px 0 0 rgba(110,90,138,.22);
}

h2 { font-size: clamp(3.2rem, 7.5vw, 8rem); color: var(--black); }

.dek {
  max-width: 34rem;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.7;
  color: var(--green);
}

.masthead-note {
  display: inline-block;
  margin-top: 2rem;
  padding: .55rem .7rem;
  border-top: 1px solid var(--copper);
  border-bottom: 1px solid var(--copper);
  color: var(--violet);
  font-size: .72rem;
  letter-spacing: .08em;
}

.chapter-label {
  position: absolute;
  top: 16vh;
  left: clamp(1.5rem, 6vw, 7rem);
  color: var(--burgundy);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.editorial-block {
  max-width: 760px;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  transform: rotate(.7deg);
  margin-left: 8vw;
}

.editorial-block.narrow { max-width: 610px; margin-left: auto; margin-right: 9vw; }

p {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.9;
}

.drop {
  float: left;
  font-family: var(--display);
  font-size: 5.6rem;
  line-height: .75;
  color: var(--copper);
  padding-right: .45rem;
}

.botanical-plate {
  z-index: 5;
  color: var(--green);
}

.plate-a { margin-right: 4vw; transform: rotate(4deg); opacity: .92; }
.botanical-plate svg { width: 100%; height: auto; overflow: visible; }
.stem, .leaf, .trace { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stem { stroke: var(--green); stroke-width: 3; }
.leaf { stroke: var(--green); stroke-width: 2.2; fill: rgba(56,107,69,.05); }
.trace { stroke: var(--copper); stroke-width: 1.6; stroke-dasharray: 7 7; }
.botanical-plate circle { fill: var(--burgundy); stroke: var(--cream); stroke-width: 2; }

.root-diagram { position: absolute; right: 7vw; bottom: 7vh; width: min(420px, 40vw); opacity: .8; }

.margin-card {
  width: min(320px, 78vw);
  padding: 1.4rem;
  position: absolute;
  right: 8vw;
  top: 24vh;
  transform: rotate(2deg);
}

.margin-card span { color: var(--green); font-size: .7rem; text-transform: uppercase; }
.margin-card p { color: var(--burgundy); font-family: var(--display); font-size: 1.7rem; line-height: 1.15; }

.soil { background: radial-gradient(circle at 80% 80%, rgba(56,107,69,.18), transparent 36%); }
.labor { background: radial-gradient(circle at 18% 40%, rgba(110,90,138,.18), transparent 34%); }
.price { background: radial-gradient(circle at 68% 35%, rgba(242,166,90,.32), transparent 35%); }
.credit { background: radial-gradient(circle at 28% 70%, rgba(124,47,54,.13), transparent 34%); }
.harvest { background: radial-gradient(circle at 74% 72%, rgba(56,107,69,.16), transparent 34%); }
.tomorrow { background: linear-gradient(160deg, rgba(246,234,203,.45), rgba(110,90,138,.36)); }

.pull-quote {
  max-width: 620px;
  padding: 2rem 2.4rem;
  color: var(--burgundy);
  background: rgba(246,234,203,.68);
  font-size: clamp(3rem, 7vw, 7.6rem);
  transform: rotate(-4deg);
  margin: 0 0 3rem 5vw;
}

.leaf-node {
  position: absolute;
  z-index: 15;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  border: 1px solid var(--copper);
  background: rgba(246,234,203,.84);
  color: var(--green);
  font-size: 1.5rem;
  right: 19vw;
  bottom: 18vh;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(169,103,43,.08);
  transition: transform .28s ease, color .28s ease, box-shadow .28s ease;
}

.leaf-node:hover,
.leaf-node.active { transform: scale(1.18) rotate(14deg); color: var(--copper); box-shadow: 0 0 28px rgba(169,103,43,.45); }
.node-two { left: 16vw; right: auto; top: 28vh; bottom: auto; }
.node-three { right: 12vw; bottom: 28vh; }

.metaphor-bubble {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: .9rem 1rem;
  background: rgba(246,234,203,.95);
  border: 1px solid var(--copper);
  color: var(--black);
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.55;
  opacity: 0;
  transform: translate(-50%, -130%) scale(.94);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.metaphor-bubble.show { opacity: 1; transform: translate(-50%, -145%) scale(1); }

.citrus-chart {
  position: absolute;
  right: 12vw;
  top: 28vh;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #F2A65A 0 38%, #386B45 38% 67%, #6E5A8A 67% 100%);
  border: 10px double rgba(246,234,203,.86);
  box-shadow: inset 0 0 0 1px var(--copper), 0 25px 60px rgba(30,25,20,.16);
}
.citrus-chart::before { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: var(--cream); border: 1px solid var(--copper); }
.citrus-chart span { position: absolute; background: rgba(246,234,203,.8); padding: .3rem; font-size: .68rem; }
.label-a { top: 19%; right: -7%; }.label-b { bottom: 19%; right: 5%; }.label-c { left: -8%; bottom: 40%; }

.receipt-strip {
  position: absolute;
  left: 10vw;
  bottom: 12vh;
  width: min(560px, 78vw);
  padding: .8rem 1rem;
  color: var(--burgundy);
  background: repeating-linear-gradient(90deg, rgba(246,234,203,.85), rgba(246,234,203,.85) 18px, rgba(169,103,43,.11) 19px);
  border-left: 6px dotted var(--copper);
  transform: rotate(1.8deg);
}

.ledger-columns {
  width: min(940px, 86vw);
  margin: auto;
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: center;
}

.ring-plate {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(169,103,43,.75) 19px 21px, transparent 22px 36px), radial-gradient(circle, rgba(242,166,90,.28), transparent 65%);
  border: 1px solid var(--green);
}
.ring-plate span { position: absolute; font-family: var(--mono); font-size: .68rem; color: var(--burgundy); background: var(--cream); padding: .25rem; }
.ring-plate span:nth-child(1){ top: 20%; left: 18%; }.ring-plate span:nth-child(2){ top: 42%; right: 9%; }.ring-plate span:nth-child(3){ bottom: 20%; left: 29%; }.ring-plate span:nth-child(4){ top: 8%; right: 27%; }

.shelf-chart {
  position: absolute;
  right: 12vw;
  bottom: 22vh;
  width: min(420px, 74vw);
  height: 280px;
  padding: 2rem;
  display: flex;
  align-items: end;
  gap: 1.1rem;
  background: rgba(246,234,203,.68);
}
.shelf-chart i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(to top, #386B45, #F2A65A);
  border: 1px solid var(--copper);
  border-radius: 4rem 4rem .2rem .2rem;
}
.caption { position: absolute; right: 13vw; bottom: 16vh; color: var(--violet); font-size: .72rem; }

.closing-frame {
  width: min(880px, 86vw);
  margin: auto;
  padding: clamp(2.2rem, 5vw, 4rem);
  text-align: left;
  background: rgba(30,25,20,.78);
  color: var(--cream);
  border-color: rgba(242,166,90,.45);
}
.closing-frame h2 { color: var(--cream); }
.closing-line { color: var(--apricot); font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.15; }

@media (max-width: 850px) {
  .issue-tabs { left: .6rem; right: .6rem; justify-content: center; flex-wrap: wrap; }
  .hero, .ledger-columns { grid-template-columns: 1fr; }
  .plate-a { display: none; }
  .editorial-block, .editorial-block.narrow { margin: 0; }
  .margin-card, .root-diagram, .citrus-chart, .shelf-chart, .caption { position: relative; inset: auto; margin: 2rem 0 0; }
  .leaf-node { right: 2rem; bottom: 6rem; }
  h1 { font-size: clamp(4.4rem, 22vw, 8rem); }
}