:root {
  --peat: #24180F;
  --fern: #3F5A35;
  --parchment: #F3DFAE;
  --clay: #B7653A;
  --honey: #F2B84B;
  --mauve: #A77B73;
  --moss: #C8D36B;
  --brown: #5A3824;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--peat);
  background:
    radial-gradient(circle at 18% 14%, rgba(200, 211, 107, .26), transparent 24rem),
    radial-gradient(circle at 86% 22%, rgba(242, 184, 75, .24), transparent 22rem),
    linear-gradient(135deg, #24180F 0%, #3F5A35 48%, #5A3824 100%);
  font-family: "Source Serif 4", Georgia, serif;
  overflow-x: hidden;
}

.grain,
.leaf-shadow,
.pollen-field,
.manuscript-hud { position: fixed; inset: 0; pointer-events: none; }

.grain {
  z-index: 40;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(36, 24, 15, .34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 63%, rgba(243, 223, 174, .28) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(90, 56, 36, .15), rgba(200, 211, 107, .08));
  background-size: 11px 11px, 17px 17px, 100% 100%;
}

.leaf-shadow {
  z-index: 1;
  opacity: .32;
  background:
    radial-gradient(ellipse at 9% 28%, rgba(36, 24, 15, .7) 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 14% 36%, rgba(36, 24, 15, .55) 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 91% 60%, rgba(36, 24, 15, .58) 0 6%, transparent 6.5%),
    radial-gradient(ellipse at 82% 74%, rgba(36, 24, 15, .45) 0 4%, transparent 4.5%);
  filter: blur(10px);
  transform: rotate(-8deg);
}

.pollen-field { z-index: 30; }

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 16px 4px rgba(242, 184, 75, .65);
  transform: translate3d(var(--x), var(--y), 0) scale(var(--s));
  animation: pollenDrift var(--d) ease-in-out infinite alternate;
}

@keyframes pollenDrift {
  to { transform: translate3d(calc(var(--x) + 34px), calc(var(--y) - 48px), 0) scale(calc(var(--s) * 1.25)); opacity: .35; }
}

.manuscript-hud {
  z-index: 50;
  padding: 22px;
  color: var(--parchment);
  font-family: "Fraunces", "Roboto Slab", Georgia, serif;
  text-shadow: 0 2px 10px rgba(36, 24, 15, .75);
}

.corner {
  position: absolute;
  width: 86px;
  height: 86px;
  border-color: rgba(243, 223, 174, .82);
  filter: drop-shadow(0 0 12px rgba(242, 184, 75, .2));
}
.corner::after { content: ""; position: absolute; inset: 14px; border-color: rgba(200, 211, 107, .65); }
.corner-tl { top: 18px; left: 18px; border-top: 2px solid; border-left: 2px solid; border-radius: 22px 0 0 0; }
.corner-tr { top: 18px; right: 18px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 22px 0 0; }
.corner-bl { bottom: 18px; left: 18px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 22px; }
.corner-br { bottom: 18px; right: 18px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 22px 0; }

.hud-topline,
.hud-page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 8px 18px;
  background: rgba(90, 56, 36, .45);
  border: 1px solid rgba(243, 223, 174, .4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hud-topline { top: 20px; font-size: 13px; letter-spacing: .06em; }
.hud-page { bottom: 22px; font: 800 11px/1 "Nunito Sans", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }

.hud-rail {
  position: absolute;
  top: 19vh;
  bottom: 19vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hud-rail-left { left: 28px; }
.hud-rail-right { right: 28px; }
.hud-rail span { width: 28px; height: 1px; background: rgba(243, 223, 174, .68); box-shadow: 0 0 12px rgba(242, 184, 75, .35); }
.hud-rail-right span { margin-left: auto; }

.chapter-index {
  pointer-events: auto;
  position: fixed;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 15px;
}
.index-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--parchment);
  border-radius: 50% 50% 50% 12%;
  transform: rotate(45deg);
  background: rgba(63, 90, 53, .55);
  transition: .25s ease;
}
.index-dot span {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0;
  color: var(--parchment);
  font: 800 10px/1 "Nunito Sans", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.index-dot.active { background: var(--honey); box-shadow: 0 0 18px rgba(242, 184, 75, .8); }
.index-dot.active span, .index-dot:hover span { opacity: 1; }

.sundial {
  position: fixed;
  left: 44px;
  top: 50%;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(243, 223, 174, .72);
  border-radius: 50%;
  transform: translateY(-50%) rotate(var(--dial, 0deg));
  background: radial-gradient(circle, rgba(242, 184, 75, .42), rgba(90, 56, 36, .2) 55%, transparent 56%);
  transition: transform .2s linear;
}
.sundial i { position: absolute; left: 35px; top: 7px; width: 3px; height: 29px; background: var(--honey); border-radius: 6px; transform-origin: bottom; }
.sundial b { position: absolute; inset: 18px; border: 1px dashed rgba(200, 211, 107, .65); border-radius: 50%; }

.day-manuscript { position: relative; z-index: 10; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 12vh 11vw;
  isolation: isolate;
}
.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: var(--phaseOpacity, .8);
  transition: opacity .5s ease;
}
.dawn::before { background: radial-gradient(circle at 50% 42%, rgba(243, 223, 174, .36), transparent 36%), linear-gradient(135deg, rgba(36, 24, 15, .15), rgba(63, 90, 53, .35)); }
.midday::before { background: radial-gradient(circle at 52% 35%, rgba(242, 184, 75, .42), transparent 34%), linear-gradient(135deg, rgba(183, 101, 58, .24), rgba(63, 90, 53, .26)); }
.errata::before { background: radial-gradient(circle at 50% 38%, rgba(167, 123, 115, .38), transparent 35%), linear-gradient(135deg, rgba(90, 56, 36, .34), rgba(183, 101, 58, .22)); }
.dusk::before { background: radial-gradient(circle at 52% 44%, rgba(242, 184, 75, .28), transparent 30%), linear-gradient(135deg, rgba(36, 24, 15, .45), rgba(90, 56, 36, .36)); }

.folio-spread,
.library-card {
  position: relative;
  width: min(760px, 74vw);
  min-height: 560px;
  padding: clamp(34px, 6vw, 74px);
  background:
    linear-gradient(90deg, rgba(90, 56, 36, .16), transparent 8%, transparent 92%, rgba(90, 56, 36, .14)),
    radial-gradient(circle at 28% 18%, rgba(242, 184, 75, .23), transparent 20rem),
    var(--parchment);
  border: 2px solid rgba(90, 56, 36, .72);
  border-radius: 28px 18px 34px 16px;
  box-shadow: 0 34px 90px rgba(36, 24, 15, .58), inset 0 0 45px rgba(90, 56, 36, .13);
  transform: perspective(900px) rotateX(4deg) rotateZ(var(--tilt, -1.7deg));
  transition: transform .7s cubic-bezier(.2,.9,.2,1), box-shadow .7s ease;
}
.chapter.is-active .folio-spread { transform: perspective(900px) rotateX(0deg) rotateZ(var(--tilt, -1.7deg)) translateY(-8px); box-shadow: 0 42px 110px rgba(36, 24, 15, .65), 0 0 38px rgba(242, 184, 75, .28), inset 0 0 45px rgba(90, 56, 36, .13); }
.hero-folio { --tilt: -2.5deg; text-align: center; }
.tilted-left { --tilt: 2.5deg; }
.tilted-right { --tilt: -3.2deg; }

.folio-spread::before,
.library-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(90, 56, 36, .42);
  border-radius: 22px 12px 27px 12px;
  pointer-events: none;
}
.folio-spread::after {
  content: "";
  position: absolute;
  left: 50%; top: 3%; bottom: 3%;
  width: 1px;
  background: linear-gradient(transparent, rgba(90, 56, 36, .35), transparent);
}

.specimen {
  margin: 0 0 16px;
  color: var(--clay);
  font: 800 12px/1 "Nunito Sans", Arial, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Roboto Slab", Rockwell, Georgia, serif;
  color: var(--peat);
  letter-spacing: -.045em;
  line-height: .88;
}
h1 { font-size: clamp(64px, 12vw, 142px); text-shadow: 0 2px 0 rgba(183, 101, 58, .32); }
h2 { max-width: 650px; font-size: clamp(46px, 7vw, 92px); text-transform: lowercase; }

.lede,
.folio-spread p:not(.specimen),
.library-card p {
  max-width: 580px;
  margin: 26px auto 0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.34;
  color: rgba(36, 24, 15, .88);
}
.folio-spread:not(.hero-folio) p:not(.specimen) { margin-left: 0; }

.title-glyphs { display: flex; justify-content: center; gap: 26px; margin-top: 42px; color: var(--honey); font-size: 32px; }
.title-glyphs span { animation: glyphFlutter 1.8s ease-in-out infinite alternate; }
.title-glyphs span:nth-child(2) { color: var(--fern); animation-delay: .3s; }
@keyframes glyphFlutter { to { transform: translateY(-10px) rotate(10deg); filter: drop-shadow(0 0 10px rgba(242, 184, 75, .75)); } }

.ribbon {
  position: absolute;
  top: -18px;
  left: 10%;
  padding: 14px 18px 24px;
  background: var(--clay);
  color: var(--parchment);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  font: 800 10px/1 "Nunito Sans", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: tabFlick .9s ease-in-out infinite alternate;
}
@keyframes tabFlick { to { transform: translateY(5px) rotate(-1deg); } }

.seal {
  position: absolute;
  right: 38px;
  top: 34px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--honey), var(--clay));
  color: var(--peat);
  font: 700 20px/1 "Fraunces", Georgia, serif;
  box-shadow: 0 6px 14px rgba(90, 56, 36, .28);
}

.annotation {
  position: absolute;
  max-width: 230px;
  padding: 15px 17px;
  background: rgba(243, 223, 174, .72);
  border: 1px solid rgba(90, 56, 36, .52);
  border-radius: 14px 4px 18px 4px;
  color: var(--peat);
  font: 700 12px/1.35 "Fraunces", Georgia, serif;
  box-shadow: 0 20px 40px rgba(36, 24, 15, .32);
  transform: translateY(36px) rotate(var(--noteTilt, 0deg));
  opacity: .15;
  transition: .65s cubic-bezier(.2,.9,.2,1);
}
.chapter.is-active .annotation { transform: translateY(0) rotate(var(--noteTilt, 0deg)); opacity: 1; }
.gutter-left { left: clamp(72px, 8vw, 160px); }
.gutter-right { right: clamp(72px, 8vw, 160px); }
.note-a, .note-c, .note-e, .note-g { top: 25%; --noteTilt: -5deg; }
.note-b, .note-d, .note-f, .note-h { bottom: 22%; --noteTilt: 4deg; }

.vine-svg {
  position: absolute;
  width: min(560px, 66vw);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: -1;
  opacity: .65;
  overflow: visible;
}
.vine-svg path {
  fill: none;
  stroke: var(--honey);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 10px rgba(242, 184, 75, .65));
  transition: stroke-dashoffset 1.1s ease;
}
.chapter.is-active .vine-svg path { stroke-dashoffset: 0; }
.vine-two { transform: translate(-50%, -50%) rotate(9deg); }
.vine-three { transform: translate(-50%, -50%) rotate(-15deg); }

.acorn-list {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  gap: 14px;
  font-size: 20px;
}
.acorn-list li { display: flex; gap: 12px; align-items: center; }
.acorn-list span { width: 13px; height: 18px; border-radius: 50% 50% 45% 45%; background: var(--brown); box-shadow: inset 0 4px 0 var(--honey); }

.errata-stack { margin-top: 34px; display: grid; gap: 12px; max-width: 430px; }
.errata-stack div { padding: 14px 18px; background: rgba(167, 123, 115, .28); border-left: 5px solid var(--clay); font: 700 17px/1 "Fraunces", Georgia, serif; }

.library-card {
  min-height: 520px;
  width: min(690px, 72vw);
  transform: rotate(-1deg);
  text-align: center;
}
.card-stamp {
  display: inline-block;
  margin-bottom: 32px;
  padding: 12px 22px;
  border: 3px solid var(--clay);
  color: var(--clay);
  border-radius: 8px;
  transform: rotate(-4deg);
  font: 700 16px/1 "Fraunces", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.card-lines { display: grid; gap: 18px; margin: 44px auto 0; max-width: 430px; }
.card-lines i { height: 2px; background: linear-gradient(90deg, transparent, rgba(90, 56, 36, .45), transparent); }
.final-note { margin-top: 30px; color: var(--fern); font: 800 12px/1 "Nunito Sans", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }

.constellation span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 22px 7px rgba(242, 184, 75, .5);
  animation: constellate 1.5s ease-in-out infinite alternate;
}
.constellation span:nth-child(1) { left: 24%; top: 24%; }
.constellation span:nth-child(2) { left: 69%; top: 22%; animation-delay: .2s; }
.constellation span:nth-child(3) { left: 78%; top: 65%; animation-delay: .5s; }
.constellation span:nth-child(4) { left: 31%; top: 72%; animation-delay: .7s; }
.constellation span:nth-child(5) { left: 52%; top: 16%; animation-delay: .9s; }
.constellation span:nth-child(6) { left: 48%; top: 83%; animation-delay: 1.1s; }
@keyframes constellate { to { transform: scale(1.8); opacity: .4; } }

@media (max-width: 850px) {
  .chapter { padding: 14vh 7vw; }
  .folio-spread, .library-card { width: 88vw; min-height: 520px; }
  .annotation { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 18px auto 0; }
  .hud-topline { max-width: 74vw; overflow: hidden; font-size: 11px; }
  .chapter-index { right: 26px; }
  .sundial { left: 25px; width: 54px; height: 54px; }
}