/* ============================================================
   the monopole center — a pastoral broadsheet
   palette: honeyed-neutral · layout: editorial-flow · type: handwritten
   ------------------------------------------------------------
   Display / headings ....... Caveat            (handwritten ink)
   Marginalia / asides ...... Shadows Into Light Two
   Body / running text ...... Crimson Pro       (fallback: Lora, Georgia)
   Micro / labels ........... Cousine           (fallback: Space Mono, monospace)
   (Inter is used only as a last-resort UI fallback.)
   The weathervane angle is driven from the section currently
   intersecting viewport centre via `IntersectionObserver`.
   ============================================================ */

:root {
  --beeswax:   #F4ECDC; /* Beeswax Paper — dominant background */
  --oat:       #E7D8BC; /* Oat Bran — panels, plate backings, rail */
  --walnut:    #3A3326; /* Walnut Ink — text & hand-lettering */
  --almond:    #7A6A4F; /* Toasted Almond — hairlines, the pole, paths, borders */
  --honey:     #C99A4B; /* Raw Honey — the single warm accent */
  --sage:      #9FB07A; /* Garden Sage — the only cool note */
  --milk:      #FBF7EE; /* Top Of The Milk — lightest tint, bubble highlights */

  --measure: 62ch;
  --rail-w: 210px;
  --baseline: 8px;
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-overshoot: cubic-bezier(.34,1.32,.5,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--beeswax);
  /* a faint warm-paper grain */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(122,106,79,.045) 0 1px, transparent 1px),
    radial-gradient(circle at 67% 55%, rgba(122,106,79,.04) 0 1px, transparent 1px),
    radial-gradient(circle at 41% 81%, rgba(201,154,75,.035) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 9px 9px;
  color: var(--walnut);
  font-family: 'Crimson Pro', Lora, Georgia, 'Times New Roman', serif;
  font-size: 19.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-ligatures: common-ligatures;
}

/* ── the soap-bubble field, painted behind everything ────────────────── */
#bubble-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ── the monopole: a fixed vertical hairline, slightly left of centre ── */
.pole-line {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 42%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0,
    rgba(122,106,79,.0) 28px,
    rgba(122,106,79,.34) 60px,
    rgba(122,106,79,.34) calc(100% - 40px),
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.weathervane {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(1px 2px 0 rgba(58,51,38,.12));
}
.vane-arrow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: transform 720ms var(--ease-soft);
  will-change: transform;
}
.vane-letter {
  font-family: 'Shadows Into Light Two', 'Caveat', cursive;
  font-size: 10px;
  fill: var(--almond);
}

/* ── the hand-numbered "pages" rail, tied to the pole-line ───────────── */
.pages-rail {
  position: fixed;
  left: 42%;
  top: 50%;
  transform: translate(-100%, -50%) translateX(-22px);
  z-index: 3;
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
  pointer-events: none;
}
.pages-rail.shown { opacity: 1; pointer-events: auto; }
.pages-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.pages-rail li { margin: 4px 0; }
.pages-rail a {
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 15px;
  color: var(--almond);
  text-decoration: none;
  display: inline-block;
  padding: 1px 0;
  opacity: .55;
  transition: opacity 260ms var(--ease-soft), color 260ms var(--ease-soft);
  position: relative;
}
.pages-rail a::before {
  /* the little knot tied to the line */
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border: 1.2px solid var(--almond);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  background: var(--beeswax);
  opacity: .5;
  transition: background 260ms, border-color 260ms, opacity 260ms;
}
.pages-rail a::after {
  content: attr(data-folio);
  font-family: 'Caveat', cursive;
  font-size: 13px;
  color: var(--honey);
  margin-left: 7px;
}
.pages-rail a:hover { opacity: 1; color: var(--walnut); }
.pages-rail a.active { opacity: 1; color: var(--walnut); }
.pages-rail a.active::before {
  background: var(--sage);
  border-color: var(--sage);
  opacity: 1;
}

/* ── the editorial-flow column ───────────────────────────────────────── */
.pamphlet {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.leaf {
  position: relative;
  padding: 56px 0 24px;
}
.cover { padding-top: 92px; }

/* a section grid: the running column hangs left of the pole-axis,
   the marginalia rail sits to the right */
.column-wrap {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail-w);
  gap: 40px;
  margin-left: clamp(0px, calc(42% - 33ch), 220px);
  align-items: start;
  margin-top: 16px;
  margin-bottom: 16px;
}
.text-col > p {
  margin: 0 0 1.5em;
  text-align: left;
  hyphens: auto;
  max-width: var(--measure);
}
.text-col .lede {
  font-size: 1.06em;
}

.dropcap {
  font-family: 'Caveat', cursive;
  float: left;
  font-size: 3.4em;
  line-height: .8;
  padding: .08em .12em 0 0;
  color: var(--honey);
  font-weight: 700;
}

/* ── the marginalia rail ─────────────────────────────────────────────── */
.margin-rail {
  position: relative;
  padding: 6px 4px 6px 16px;
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 16px;
  line-height: 1.5;
  color: var(--almond);
  /* faint ruled-notebook lines behind it */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 23px,
    rgba(122,106,79,.16) 23px 24px);
  background-position: 0 4px;
}
.margin-rail::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(201,154,75,.4);
}
.margin-note { margin: 0 0 14px; }
.margin-stamp {
  font-family: 'Cousine', 'Space Mono', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--almond);
  letter-spacing: -.2px;
  margin: 0 0 14px;
  opacity: .9;
}
.coord-stamp {
  font-family: 'Cousine', 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: -.1px;
  color: var(--almond);
  margin: 18px 0 0;
}

/* ── isometric paper-cut icons in the rail ───────────────────────────── */
.iso-icon {
  margin: 4px 0 12px;
}
.iso-icon svg {
  width: 96px;
  height: 96px;
  display: block;
  filter: drop-shadow(2px 3px 0 rgba(58,51,38,.12));
  overflow: visible;
}

/* ── chapter heads, with a drop-folio numeral in the margin ──────────── */
.chapter-head {
  position: relative;
  margin: 0 0 6px;
  margin-left: clamp(0px, calc(42% - 33ch), 220px);
}
.folio {
  position: absolute;
  left: -2.6em;
  top: .12em;
  font-family: 'Caveat', cursive;
  font-size: 2.6em;
  color: var(--honey);
  font-weight: 700;
  line-height: 1;
}
.chapter-title {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  color: var(--walnut);
  margin: 0;
}

/* ── the masthead — a framed, self-drawing hedgerow border ───────────── */
.masthead {
  position: relative;
  max-width: 760px;
  margin: 0 auto 12px;
  padding: 48px clamp(28px, 6vw, 64px) 40px;
  text-align: left;
}
.kicker {
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 17px;
  color: var(--almond);
  margin: 0 0 8px;
  letter-spacing: .3px;
}
.masthead-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(56px, 12vw, 112px);
  line-height: .94;
  color: var(--walnut);
  margin: 0 0 18px;
  transform: rotate(-1.1deg);
}
.masthead-sub {
  font-family: 'Crimson Pro', Lora, Georgia, serif;
  font-style: italic;
  font-size: 1.18em;
  max-width: 46ch;
  margin: 0;
  color: var(--walnut);
}

/* ── the animated dashed frame (border-animate, the signature) ───────── */
.frame-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.frame-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hedge-rect {
  fill: none;
  stroke: var(--almond);
  stroke-width: .55;
  stroke-dasharray: 3 2.4;
  vector-effect: non-scaling-stroke;
  /* drawn on entry by JS via stroke-dashoffset on a continuous path proxy;
     here a perpetual slow march once "planted" */
  opacity: .85;
}
/* slow dash-march hover variant for figures & framed elements */
.plate:hover .hedge-rect,
.masthead:hover .hedge-rect,
.pamphlet-footer:hover .hedge-rect {
  animation: dash-march 9s linear infinite;
}
@keyframes dash-march {
  to { stroke-dashoffset: -22; }
}

/* the self-drawing entry: a wrapper class toggled by JS */
.frame-svg.planting .hedge-rect {
  animation: hedge-plant 1300ms var(--ease-overshoot) forwards;
}
@keyframes hedge-plant {
  0%   { stroke-dasharray: 0 600; opacity: 0; }
  10%  { opacity: .85; }
  100% { stroke-dasharray: 3 2.4; opacity: .85; }
}

/* the small leaf node that scales in at a corner when the draw completes */
.leaf-node {
  position: absolute;
  width: 11px; height: 11px;
  background: var(--honey);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg) scale(0);
  transition: transform 420ms var(--ease-overshoot) 1100ms;
  box-shadow: 0 0 0 2px var(--beeswax);
}
.frame-svg.planting .leaf-node,
.leaf-node.sprung { transform: rotate(45deg) scale(1); }
.ln-tl { top: -5px; left: -5px; }
.ln-tr { top: -5px; right: -5px; transform: rotate(135deg) scale(0); }
.frame-svg.planting .ln-tr, .ln-tr.sprung { transform: rotate(135deg) scale(1); }
.ln-bl { bottom: -5px; left: -5px; transform: rotate(-45deg) scale(0); }
.frame-svg.planting .ln-bl, .ln-bl.sprung { transform: rotate(-45deg) scale(1); }
.ln-br { bottom: -5px; right: -5px; transform: rotate(225deg) scale(0); }
.frame-svg.planting .ln-br, .ln-br.sprung { transform: rotate(225deg) scale(1); }

/* ── pull-quotes — break wide, footpath routed around them ───────────── */
.pull-quote {
  position: relative;
  max-width: 80ch;
  margin: 40px auto 40px;
  margin-left: clamp(0px, calc(42% - 36ch), 200px);
  padding: 20px 56px;
  font-family: 'Caveat', cursive;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.18;
  color: var(--walnut);
  text-align: left;
}
.pull-quote .quote-mark {
  color: var(--honey);
  font-size: 1.1em;
}
.pull-quote cite {
  display: block;
  font-family: 'Shadows Into Light Two', cursive;
  font-style: normal;
  font-size: 17px;
  color: var(--almond);
  margin-top: 12px;
}
.quote-detour {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -34px;
  width: 116%;
  height: 70px;
  z-index: -1;
  pointer-events: none;
}

/* ── the meandering dotted footpath between sections ─────────────────── */
.path-divider {
  display: block;
  width: 100%;
  height: 70px;
  margin: 28px 0 10px;
  overflow: visible;
}
.footpath {
  fill: none;
  stroke: var(--almond);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: .5 8;
  vector-effect: non-scaling-stroke;
  opacity: .7;
  transition: transform 200ms linear;
}

/* ── plates — full-bleed paper panels with an isometric scene ────────── */
.plate {
  position: relative;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px clamp(20px, 5vw, 60px);
}
.plate .frame-svg {
  inset: clamp(20px, 5vw, 60px);
}
.plate-inner {
  position: relative;
  background-color: var(--oat);
  /* a tiled subtle paper grain + a low-opacity pressed-flower watermark */
  background-image:
    radial-gradient(circle at 25% 30%, rgba(122,106,79,.06) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 70% 65%, rgba(122,106,79,.05) 0 1.2px, transparent 1.2px);
  background-size: 8px 8px, 13px 13px;
  border-radius: 3px;
  box-shadow: 0 18px 40px -28px rgba(58,51,38,.4), inset 0 0 0 1px rgba(122,106,79,.1);
  max-width: 960px;
  width: 100%;
  padding: clamp(24px, 4vw, 52px);
  text-align: center;
}
.plate-inner::after {
  /* the pressed-flower silhouette watermark */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60px 18px at 80% 78%, rgba(159,176,122,.16) 0 60%, transparent 62%),
    radial-gradient(ellipse 20px 60px at 80% 60%, rgba(159,176,122,.1) 0 60%, transparent 62%);
  pointer-events: none;
  border-radius: 3px;
}
.iso-scene {
  width: min(640px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(3px 5px 0 rgba(58,51,38,.1));
  overflow: visible;
}
/* the watermark inside scenes */
.watermark-flower {
  fill: rgba(122,106,79,.06);
}
.scene-part {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 360ms var(--ease-soft), transform 360ms var(--ease-soft);
}
.plate.in-view .scene-part { opacity: 1; transform: translateY(0); }
.plate.in-view .scene-part[data-step="1"] { transition-delay: 0ms; }
.plate.in-view .scene-part[data-step="2"] { transition-delay: 90ms; }
.plate.in-view .scene-part[data-step="3"] { transition-delay: 180ms; }
.plate.in-view .scene-part[data-step="4"] { transition-delay: 270ms; }
.plate.in-view .scene-part[data-step="5"] { transition-delay: 360ms; }

figcaption {
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 16px;
  line-height: 1.5;
  color: var(--almond);
  max-width: 56ch;
  margin: 22px auto 0;
}

/* ── the notes-in-the-box list ───────────────────────────────────────── */
.note-list {
  list-style: none;
  margin: 24px auto 32px;
  margin-left: clamp(0px, calc(42% - 33ch), 220px);
  padding: 0;
  max-width: 64ch;
}
.note-list li {
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 1.18em;
  line-height: 1.5;
  color: var(--walnut);
  padding: 12px 0 12px 28px;
  position: relative;
  border-bottom: 1px dashed rgba(122,106,79,.3);
}
.note-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 1.0em;
  width: 8px; height: 8px;
  border: 1.4px solid var(--almond);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}
.note-list li:last-child { border-bottom: none; }
.note-answer {
  display: block;
  font-family: 'Crimson Pro', Lora, Georgia, serif;
  font-style: italic;
  font-size: .82em;
  color: var(--almond);
  margin-top: 6px;
}

/* ── the footer pamphlet ─────────────────────────────────────────────── */
.pamphlet-footer {
  position: relative;
  max-width: 720px;
  margin: 64px auto 0;
  padding: 56px clamp(28px, 6vw, 60px) 48px;
  text-align: center;
}
.dandelion {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 auto 6px;
  overflow: visible;
}
.dandelion .seed {
  transform-box: fill-box;
  transform-origin: 60px 58px;
  transition: transform 1200ms var(--ease-soft), opacity 1200ms var(--ease-soft);
}
.pamphlet-footer.scattered .seed:nth-child(1) { transform: translate(8px,-46px) rotate(20deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(2) { transform: translate(-58px,-30px) rotate(-30deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(3) { transform: translate(64px,-22px) rotate(28deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(4) { transform: translate(-70px,16px) rotate(-12deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(5) { transform: translate(72px,24px) rotate(18deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(6) { transform: translate(-46px,-52px) rotate(-24deg); opacity: 0; }
.pamphlet-footer.scattered .seed:nth-child(7) { transform: translate(54px,-58px) rotate(30deg); opacity: 0; }
.footer-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 56px);
  color: var(--walnut);
  margin: 4px 0 14px;
}
.footer-line {
  font-family: 'Crimson Pro', Lora, Georgia, serif;
  font-size: 1.04em;
  max-width: 52ch;
  margin: 0 auto 18px;
  color: var(--walnut);
}
.footer-meta {
  font-family: 'Cousine', 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: -.1px;
  color: var(--almond);
  margin: 0;
}

/* ── responsive: collapse the rail inline, drop the pole-axis indent ──── */
@media (max-width: 900px) {
  body { font-size: 18.5px; }
  .pole-line { left: 24px; }
  .pages-rail { display: none; }
  .column-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-left: 0;
  }
  .chapter-head, .pull-quote, .note-list { margin-left: 0; }
  .folio { position: static; display: inline-block; margin-right: .2em; }
  .margin-rail {
    border-left: 3px solid rgba(201,154,75,.4);
    background-image: none;
    padding: 8px 0 8px 16px;
    font-style: italic;
  }
  .margin-rail::before { display: none; }
  .iso-icon svg { width: 78px; height: 78px; }
  .plate { padding: 40px 16px; min-height: auto; }
  .plate .frame-svg { inset: 16px; }
  .quote-detour { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vane-arrow, .scene-part, .seed, .leaf-node { transition-duration: 1ms; }
  .plate:hover .hedge-rect,
  .masthead:hover .hedge-rect,
  .pamphlet-footer:hover .hedge-rect,
  .frame-svg.planting .hedge-rect { animation: none; }
}