:root {
  --burnt-orange: #B85C2E;
  --seed-paper: #F6E8D2;
  --clay-ink: #4B2D22;
  --cloud-blue: #BFD8D2;
  --sage-stem: #6F8A58;
  --marigold-pollen: #E3A72F;
  --dusk-plum: #5B3A4A;
  --ease-garden: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--clay-ink);
  background: var(--seed-paper);
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

.folio-nav {
  position: fixed;
  top: 50%;
  left: 22px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  font-family: "Nunito Sans", sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
}

.folio-link {
  width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--clay-ink);
  text-decoration: none;
  border: 1px solid rgba(75, 45, 34, .28);
  background: rgba(246, 232, 210, .72);
  transition: transform .7s var(--ease-garden), background .7s var(--ease-garden), color .7s var(--ease-garden);
}

.folio-link.active,
.folio-link:hover {
  color: #F6E8D2;
  background: #6F8A58;
  transform: scale(1.08);
}

.progress-vine {
  position: relative;
  width: 2px;
  height: 160px;
  background: rgba(75, 45, 34, .18);
  overflow: hidden;
}

#vineFill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: #6F8A58;
}

.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 10vh);
  column-gap: 24px;
  padding: 46px 7vw 42px 8vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 19%, color-mix(in srgb, var(--accent) 18%, transparent) 0 3px, transparent 4px),
    linear-gradient(115deg, var(--paper) 0%, var(--paper) 67%, color-mix(in srgb, var(--wash) 52%, var(--paper)) 100%);
  color: var(--ink);
}

.spread::before,
.spread::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.spread::before {
  inset: 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.spread::after {
  right: 7vw;
  top: 9vh;
  width: 120px;
  height: 120px;
  border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 0 34px 0 0;
  opacity: .8;
}

.folio-mark {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.folio-mark.light { color: rgba(246, 232, 210, .72); }

.chapter-label {
  grid-column: 9 / 12;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, white 10%);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent) 24%, transparent);
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
}

.copy-block {
  grid-column: 1 / 7;
  grid-row: 2 / 6;
  align-self: center;
  max-width: 720px;
  z-index: 2;
}

.copy-block.narrow { grid-column: 1 / 6; }

.eyebrow,
.accent-line {
  margin: 0 0 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--warm) 86%, var(--ink));
}

.eyebrow.light { color: rgba(246, 232, 210, .72); }

h1,
h2 {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
}

h1 { font-size: clamp(54px, 9vw, 132px); }
h2 { font-size: clamp(46px, 7vw, 104px); }

.story,
.annotation,
.exit-note,
.seed-tab {
  z-index: 3;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
}

.story {
  max-width: 430px;
  font-weight: 400;
}

.lower-mid { grid-column: 5 / 9; grid-row: 7 / 9; align-self: center; }
.lower-left { grid-column: 2 / 6; grid-row: 8 / 10; align-self: center; }
.lower-right { grid-column: 9 / 13; grid-row: 9 / 10; justify-self: end; align-self: end; }

.annotation {
  grid-column: 9 / 12;
  grid-row: 3 / 5;
  align-self: end;
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  font-family: "Newsreader", serif;
  font-style: italic;
}

.exit-note,
.seed-tab {
  padding: 12px 18px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--paper) 68%, white 10%);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 35%, transparent);
  font-weight: 600;
}

.exit-note.light { color: #F6E8D2; background: rgba(75, 45, 34, .22); border-color: rgba(246, 232, 210, .3); }
.seed-tab { color: #F6E8D2; background: rgba(184, 92, 46, .28); border-color: rgba(246, 232, 210, .34); }

.pullquote {
  max-width: 520px;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: clamp(24px, 3.3vw, 48px);
  line-height: 1.12;
}

.illustration {
  position: relative;
  z-index: 2;
  overflow: visible;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 22px 30px rgba(75, 45, 34, .08));
}

.illustration text {
  fill: currentColor;
  stroke: none;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
}

.seed-envelope { grid-column: 8 / 12; grid-row: 2 / 6; width: min(100%, 420px); align-self: center; justify-self: end; }
.cloud-bed { grid-column: 5 / 12; grid-row: 2 / 7; width: min(100%, 680px); align-self: center; justify-self: end; }
.marigold { grid-column: 7 / 12; grid-row: 2 / 8; width: min(100%, 500px); align-self: center; justify-self: center; color: #F6E8D2; }
.root-diagram { grid-column: 6 / 12; grid-row: 2 / 8; width: min(100%, 620px); align-self: center; justify-self: end; }
.watering { grid-column: 6 / 12; grid-row: 2 / 8; width: min(100%, 680px); align-self: center; justify-self: end; color: #F6E8D2; }

.draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.1s var(--ease-garden);
}

.spread.in-view .draw { stroke-dashoffset: 0; }

.stem { stroke: var(--stem); }
.roots { stroke: var(--stem); }
.tick { stroke: var(--accent); stroke-width: 1.5; }
.light-stroke { stroke: #F6E8D2; }
.pollen { fill: var(--accent); stroke: none; }
.moon { fill: #E3A72F; stroke: none; opacity: .92; }
.center-dot { fill: #4B2D22; stroke: #F6E8D2; stroke-width: 2; }
.fill-petal { fill: #E3A72F; stroke: #F6E8D2; stroke-width: 2; opacity: .92; }

.hover-breathe {
  transform-origin: center;
  transition: transform 1s var(--ease-garden), box-shadow 1s var(--ease-garden), filter 1s var(--ease-garden);
}

.hover-breathe:hover,
.hover-breathe.near {
  transform: scale(1.03);
  filter: drop-shadow(0 26px 34px rgba(75, 45, 34, .12));
}

.z-vine {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stem), var(--accent), transparent);
  transform-origin: left center;
  opacity: .58;
  z-index: 1;
}

.z-vine::after {
  content: "";
  position: absolute;
  right: 16%;
  top: -5px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 48px -16px 0 -3px var(--accent), 84px 12px 0 -4px var(--accent);
  animation: pollenFloat 8s var(--ease-garden) infinite;
}

.vine-a { left: 29%; top: 53%; width: 47%; transform: rotate(25deg); }
.vine-b { left: 21%; top: 45%; width: 58%; transform: rotate(15deg); }
.vine-c { left: 27%; top: 60%; width: 44%; transform: rotate(-23deg); background: linear-gradient(90deg, transparent, rgba(246,232,210,.74), #E3A72F, transparent); }
.vine-d { left: 25%; top: 51%; width: 53%; transform: rotate(22deg); }
.vine-e { left: 20%; top: 62%; width: 58%; transform: rotate(-18deg); background: linear-gradient(90deg, transparent, #BFD8D2, #E3A72F, transparent); }

.spread-wind { background: linear-gradient(160deg, #BFD8D2 0%, #BFD8D2 58%, #F6E8D2 100%); }
.spread-orange { background: radial-gradient(circle at 79% 25%, rgba(227,167,47,.35), transparent 28%), linear-gradient(130deg, #B85C2E 0%, #B85C2E 64%, #A24F2B 100%); }
.spread-night { background: radial-gradient(circle at 83% 17%, rgba(227,167,47,.26), transparent 16%), linear-gradient(140deg, #5B3A4A 0%, #4B2D22 100%); }

.drift-dot { animation: drift 7s var(--ease-garden) infinite; }
.drift-dot.delay { animation-delay: -3s; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0); opacity: .75; }
  45% { transform: translate(34px, 18px); opacity: 1; }
}

@keyframes pollenFloat {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(26px) translateY(-8px); }
}

@media (max-width: 860px) {
  .folio-nav { left: 10px; transform: translateY(-50%) scale(.82); }
  .spread {
    min-height: 112vh;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(12, minmax(64px, auto));
    padding: 34px 7vw 44px 58px;
  }
  .copy-block,
  .copy-block.narrow { grid-column: 1 / 7; grid-row: 2 / 5; }
  .illustration,
  .seed-envelope,
  .cloud-bed,
  .marigold,
  .root-diagram,
  .watering { grid-column: 1 / 7; grid-row: 5 / 8; width: 92%; justify-self: center; }
  .annotation { grid-column: 1 / 6; grid-row: 8 / 9; }
  .lower-mid,
  .lower-left { grid-column: 1 / 7; grid-row: 9 / 11; }
  .lower-right { grid-column: 2 / 7; grid-row: 11 / 12; }
  .chapter-label { grid-column: 2 / 7; grid-row: 1 / 2; }
  h1 { font-size: clamp(42px, 15vw, 76px); }
  h2 { font-size: clamp(38px, 13vw, 68px); }
}