:root {
  --green: #244A36;
  --gold: #F4B942;
  --vellum: #FFF7DF;
  --cream: #F5E8C8;
  --blue: #3B6177;
  --rose: #D99AAE;
  --violet: #6E4B8B;
  --night: #2A1835;
  --title-font: "Cormorant Garamond", Cormorant, serif;
  --label-font: "Unbounded", Inter, sans-serif;
  --body-font: "Fraunces", serif;
  --ui-font: Inter, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--vellum);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--night);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at 12% 6%, rgba(244, 185, 66, .34), transparent 28rem),
    radial-gradient(circle at 85% 18%, rgba(217, 154, 174, .28), transparent 30rem),
    linear-gradient(135deg, var(--vellum), var(--cream) 45%, #fff0c5 100%);
}

.paper-grain,
.sun-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.paper-grain {
  opacity: .28;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(42, 24, 53, .045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(36, 74, 54, .035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 20% 30%, rgba(110, 75, 139, .14) 0 1px, transparent 2px);
  background-size: auto, auto, 19px 23px;
}

.sun-wash {
  z-index: 45;
  opacity: .72;
  background: linear-gradient(105deg, transparent 0 22%, rgba(255, 247, 223, .88) 36%, rgba(244, 185, 66, .26) 48%, transparent 66%);
  transform: translateX(-38%);
  animation: sunlightReveal 4.5s ease-out forwards;
}

.cursor-charm {
  position: fixed;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(244, 185, 66, .55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .3s ease, transform .3s ease;
}

.cursor-charm::before,
.cursor-charm::after {
  content: "";
  position: absolute;
  inset: 48% -18%;
  border-top: 1px solid rgba(110, 75, 139, .4);
}

.cursor-charm::after { transform: rotate(90deg); }

.cursor-charm.visible {
  opacity: .9;
  transform: translate(-50%, -50%) scale(1);
}

.ritual-nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: .45rem;
  padding: .45rem;
  border: 1px solid rgba(36, 74, 54, .28);
  border-radius: 999px;
  background: rgba(255, 247, 223, .66);
  box-shadow: 0 1rem 3rem rgba(42, 24, 53, .08);
  backdrop-filter: blur(12px);
}

.ritual-nav a {
  padding: .65rem .9rem;
  border-radius: 999px;
  color: var(--green);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font: 400 .58rem var(--label-font);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.ritual-nav a.active,
.ritual-nav a:hover {
  color: var(--vellum);
  background: var(--green);
  transform: translateY(-1px);
}

.dial-meter {
  position: fixed;
  right: 2rem;
  top: 50%;
  z-index: 39;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid rgba(42, 24, 53, .22);
  border-radius: 50%;
  transform: translateY(-50%) rotate(var(--dial-rotation, 0deg));
  transition: transform .7s cubic-bezier(.22, .78, .22, 1);
  background: rgba(245, 232, 200, .46);
  box-shadow: inset 0 0 0 1.15rem rgba(255, 247, 223, .45);
}

.dial-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  border-top: 2px solid var(--gold);
  transform-origin: left center;
}

.dial-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--violet);
  font-size: 1.2rem;
}

.tick {
  position: absolute;
  left: 50%;
  top: .35rem;
  width: 1px;
  height: .75rem;
  background: rgba(42, 24, 53, .38);
  transform-origin: 0 3.4rem;
}
.t2 { transform: rotate(90deg); } .t3 { transform: rotate(180deg); } .t4 { transform: rotate(270deg); }

.spellbook { position: relative; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 6rem clamp(1.5rem, 5vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: -2;
  border: 1px solid rgba(36, 74, 54, .16);
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255, 247, 223, .64), rgba(245, 232, 200, .28));
  box-shadow: inset 0 0 6rem rgba(244, 185, 66, .09);
}

.chapter-dawn {
  background: radial-gradient(circle at 72% 45%, rgba(244, 185, 66, .28), transparent 29rem), linear-gradient(160deg, rgba(255, 247, 223, .6), rgba(217, 154, 174, .18));
}

.chapter-noon {
  background: radial-gradient(circle at 32% 35%, rgba(244, 185, 66, .32), transparent 32rem), linear-gradient(180deg, rgba(255, 247, 223, .25), rgba(59, 97, 119, .16));
}

.chapter-dusk {
  background: radial-gradient(circle at 74% 62%, rgba(217, 154, 174, .36), transparent 30rem), linear-gradient(150deg, rgba(245, 232, 200, .52), rgba(110, 75, 139, .18));
}

.chapter-night {
  color: var(--vellum);
  background: radial-gradient(circle at 50% 50%, rgba(244, 185, 66, .2), transparent 25rem), linear-gradient(155deg, var(--night), var(--violet) 58%, var(--blue));
}

.chapter-night::before {
  border-color: rgba(255, 247, 223, .18);
  background: linear-gradient(145deg, rgba(42, 24, 53, .35), rgba(255, 247, 223, .07));
}

.chapter-copy {
  position: relative;
  z-index: 5;
  max-width: 43rem;
}

.hero-copy { margin-left: clamp(0rem, 7vw, 8rem); }
.right-copy { justify-self: end; margin-right: clamp(0rem, 8vw, 8rem); }
.left-copy { margin-left: clamp(0rem, 5vw, 7rem); }
.centered-copy { justify-self: center; text-align: center; }

.ritual-tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .18em;
  font: 400 .65rem var(--label-font);
  background: rgba(255, 247, 223, .35);
}

.chapter-night .ritual-tag { color: var(--gold); }

h1, h2 {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 500;
  line-height: .83;
  letter-spacing: .045em;
}

h1 {
  max-width: 11ch;
  color: var(--green);
  font-size: clamp(5rem, 16vw, 15rem);
  text-shadow: .06em .08em 0 rgba(244, 185, 66, .18);
}

h2 {
  color: var(--night);
  font-size: clamp(4.2rem, 11vw, 11rem);
}

.chapter-night h2 { color: var(--vellum); text-shadow: 0 0 2rem rgba(244, 185, 66, .28); }

.poem {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: rgba(42, 24, 53, .78);
  font: italic 400 clamp(1.15rem, 2vw, 1.75rem)/1.55 var(--body-font);
}

.chapter-night .poem { color: rgba(255, 247, 223, .8); }

.charm-link,
.closing-charm,
.oracle-charms button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.8rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(36, 74, 54, .38);
  border-radius: 999px;
  color: var(--green);
  background: rgba(255, 247, 223, .48);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 400 .68rem var(--label-font);
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}

.charm-link:hover,
.closing-charm:hover,
.oracle-charms button:hover,
.oracle-charms button.active {
  transform: translateY(-3px) rotate(-1deg);
  color: var(--vellum);
  border-color: var(--green);
  background: var(--green);
}

.closing-charm {
  color: var(--vellum);
  border-color: rgba(255, 247, 223, .36);
  background: rgba(244, 185, 66, .12);
}

.glyph {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  opacity: .86;
  filter: drop-shadow(0 2rem 2.5rem rgba(42, 24, 53, .12));
  animation: rotateGlyph 42s linear infinite;
}

.glyph-large {
  right: -15vmin;
  top: 7vmin;
  width: min(76vmin, 54rem);
  height: min(76vmin, 54rem);
}

.glyph-offset {
  left: -14vmin;
  top: 12vmin;
  width: min(70vmin, 48rem);
  height: min(70vmin, 48rem);
  animation-duration: 34s;
}

.glyph-night {
  left: 50%;
  top: 50%;
  width: min(88vmin, 58rem);
  height: min(88vmin, 58rem);
  transform: translate(-50%, -50%);
  animation: rotateGlyphCentered 48s linear infinite;
  opacity: .35;
}

.glyph-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(36, 74, 54, .38);
}

.chapter-night .glyph-ring { border-color: rgba(255, 247, 223, .34); }

.ring-one {
  background:
    repeating-conic-gradient(from 2deg, rgba(244, 185, 66, .8) 0 1deg, transparent 1deg 9deg),
    radial-gradient(circle, transparent 57%, rgba(244, 185, 66, .12) 58%, transparent 62%);
}

.ring-two { inset: 13%; border-style: dashed; border-color: rgba(110, 75, 139, .45); }
.ring-three { inset: 31%; border-color: rgba(59, 97, 119, .48); box-shadow: inset 0 0 0 2rem rgba(244, 185, 66, .07); }

.glyph::before,
.glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  bottom: 4%;
  border-left: 1px solid rgba(42, 24, 53, .28);
}

.glyph::after { transform: rotate(90deg); }

.glyph-label {
  position: absolute;
  left: 50%;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .18em;
  white-space: nowrap;
  font: 400 .62rem var(--label-font);
}

.glyph-label.top { top: 2%; transform: translateX(-50%); }
.glyph-label.bottom { bottom: 2%; transform: translateX(-50%); }
.glyph-label.right { right: -6%; left: auto; top: 50%; transform: rotate(90deg); }
.glyph-label.left { left: -10%; top: 50%; transform: rotate(-90deg); }

.annotation {
  position: absolute;
  z-index: 6;
  padding: .55rem .75rem;
  border-left: 1px solid var(--gold);
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: .16em;
  font: 400 .62rem var(--label-font);
  background: rgba(255, 247, 223, .42);
  animation: floatNote 6s ease-in-out infinite;
}
.a1 { left: 12%; bottom: 16%; }
.a2 { right: 26%; top: 22%; animation-delay: -2s; }
.a3 { right: 10%; bottom: 23%; animation-delay: -4s; }

.fern-shadow {
  position: absolute;
  width: 18rem;
  height: 31rem;
  left: 4%;
  top: 25%;
  opacity: .18;
  transform: rotate(-24deg);
  background: repeating-linear-gradient(112deg, transparent 0 1.2rem, var(--green) 1.25rem 1.4rem, transparent 1.45rem 2.2rem);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 70%);
}

.oracle-charms {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
}
.oracle-charms button { margin: 0; }

.omen-card {
  width: min(32rem, 100%);
  margin-top: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(110, 75, 139, .32);
  border-radius: 1.1rem;
  color: var(--night);
  background: linear-gradient(135deg, rgba(255, 247, 223, .76), rgba(245, 232, 200, .62));
  font: italic 400 1.15rem/1.45 var(--body-font);
  box-shadow: 0 1.2rem 3rem rgba(42, 24, 53, .08);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.omen-card.revealed {
  transform: translateY(-4px) rotate(.4deg);
  color: var(--violet);
  border-color: var(--gold);
}

.compass-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  transform-origin: left center;
  animation: needleQuiver 5s ease-in-out infinite;
}

.sun-spots span {
  position: absolute;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 1.4rem rgba(244, 185, 66, .8);
  animation: floatNote 7s ease-in-out infinite;
}
.sun-spots span:nth-child(1) { left: 18%; top: 74%; }
.sun-spots span:nth-child(2) { left: 28%; top: 18%; animation-delay: -1s; }
.sun-spots span:nth-child(3) { right: 20%; bottom: 14%; animation-delay: -2s; }
.sun-spots span:nth-child(4) { right: 38%; top: 28%; animation-delay: -3s; }
.sun-spots span:nth-child(5) { left: 8%; top: 43%; animation-delay: -4s; }

.herbarium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.herbarium-grid article {
  min-height: 11rem;
  padding: 1rem;
  border: 1px solid rgba(36, 74, 54, .28);
  border-radius: .8rem;
  background: linear-gradient(155deg, rgba(255, 247, 223, .76), rgba(217, 154, 174, .18));
  box-shadow: .6rem .8rem 0 rgba(36, 74, 54, .06);
  transform: rotate(var(--tilt, -1deg));
}
.herbarium-grid article:nth-child(2) { --tilt: 1.5deg; }
.herbarium-grid article:nth-child(3) { --tilt: -.5deg; }
.herbarium-grid span {
  color: var(--gold);
  font: 400 .7rem var(--label-font);
}
.herbarium-grid strong {
  display: block;
  margin-top: 1.8rem;
  color: var(--green);
  font: 500 1.45rem var(--title-font);
}
.herbarium-grid em {
  display: block;
  margin-top: .55rem;
  color: rgba(42, 24, 53, .68);
  font-size: .95rem;
}

.wax-seal {
  position: absolute;
  right: 17%;
  top: 28%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  color: var(--vellum);
  font-size: 3rem;
  background: radial-gradient(circle at 33% 28%, var(--rose), var(--violet));
  box-shadow: inset -.8rem -1rem 1.4rem rgba(42, 24, 53, .22), 0 1rem 2rem rgba(42, 24, 53, .12);
  cursor: pointer;
  transition: transform .4s ease;
}
.wax-seal.pressed { transform: scale(.92) rotate(12deg); }

.pressed-flower {
  position: absolute;
  width: 14rem;
  height: 14rem;
  opacity: .45;
}
.flower-one { right: 8%; bottom: 10%; transform: rotate(22deg); }
.flower-two { left: 46%; top: 10%; transform: rotate(-18deg) scale(.72); }
.pressed-flower::before,
.pressed-flower::after,
.pressed-flower span::before,
.pressed-flower span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 8rem;
  border-radius: 100% 0;
  background: rgba(217, 154, 174, .52);
  transform-origin: 0 0;
}
.pressed-flower::before { transform: rotate(0deg); }
.pressed-flower::after { transform: rotate(90deg); }
.pressed-flower span::before { transform: rotate(180deg); }
.pressed-flower span::after { transform: rotate(270deg); }

.constellation-path {
  position: absolute;
  inset: 14% 12% auto auto;
  width: 30rem;
  height: 22rem;
  opacity: .28;
  background:
    radial-gradient(circle at 5% 80%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 45%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 62%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 12%, var(--blue) 0 3px, transparent 4px),
    linear-gradient(28deg, transparent 0 21%, var(--blue) 21.2% 21.5%, transparent 21.7%),
    linear-gradient(350deg, transparent 0 47%, var(--blue) 47.2% 47.5%, transparent 47.7%);
}

.residue-notes {
  position: absolute;
  left: 50%;
  bottom: 7rem;
  z-index: 6;
  display: flex;
  gap: .75rem;
  transform: translateX(-50%);
}
.residue-notes span {
  padding: .55rem .7rem;
  border: 1px solid rgba(255, 247, 223, .24);
  border-radius: 999px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 400 .58rem var(--label-font);
  background: rgba(255, 247, 223, .07);
}

.chapter-copy,
.annotation,
.herbarium-grid article,
.wax-seal,
.residue-notes span {
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .78, .22, 1);
}

.chapter:not(.in-view) .chapter-copy,
.chapter:not(.in-view) .annotation,
.chapter:not(.in-view) .herbarium-grid article,
.chapter:not(.in-view) .wax-seal,
.chapter:not(.in-view) .residue-notes span {
  opacity: .2;
  transform: translateY(2rem);
}

@keyframes sunlightReveal {
  to { transform: translateX(54%); opacity: .24; }
}

@keyframes rotateGlyph {
  to { transform: rotate(360deg); }
}

@keyframes rotateGlyphCentered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes floatNote {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-1rem) rotate(.5deg); }
}

@keyframes needleQuiver {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(16deg); }
}

@media (max-width: 900px) {
  .ritual-nav { width: calc(100% - 1.5rem); overflow-x: auto; justify-content: flex-start; }
  .dial-meter { display: none; }
  .chapter { padding: 6rem 1.2rem 4rem; }
  .chapter::before { inset: 4%; }
  .hero-copy, .right-copy, .left-copy { margin: 0; justify-self: start; }
  .glyph-large, .glyph-offset { width: 82vmin; height: 82vmin; opacity: .42; }
  .glyph-large { right: -38vmin; top: 14vmin; }
  .glyph-offset { left: -40vmin; }
  .herbarium-grid { grid-template-columns: 1fr; }
  .annotation { display: none; }
  .residue-notes { flex-direction: column; bottom: 2rem; }
}