:root {
  --ink: #120A1E;
  --violet: #221035;
  --cyan: #38F7FF;
  --fuchsia: #FF3DBE;
  --brass: #C79A45;
  --parchment: #F4E8C8;
  --verdigris: #2FD08B;
  --rose: #6E294F;
  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-body: "Libre Baskerville", Georgia, serif;
  --seal: "Cinzel Decorative", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background:
    radial-gradient(circle at 72% 15%, rgba(255, 61, 190, .2), transparent 28rem),
    radial-gradient(circle at 28% 78%, rgba(56, 247, 255, .18), transparent 28rem),
    linear-gradient(135deg, var(--ink), var(--violet) 54%, #0a0611);
  font-family: var(--serif-body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at center, rgba(244, 232, 200, .12) 0 1px, transparent 1.6px),
    repeating-radial-gradient(ellipse at 16% 42%, transparent 0 16px, rgba(199, 154, 69, .08) 17px 18px, transparent 19px 35px),
    repeating-linear-gradient(90deg, rgba(199, 154, 69, .05) 0 1px, transparent 1px 58px);
  background-size: 38px 38px, 260px 180px, 100% 100%;
  mix-blend-mode: screen;
}

.conservatory-spine {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  bottom: 0;
  width: 138px;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(90deg, rgba(18, 10, 30, .98), rgba(34, 16, 53, .94)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(199,154,69,.12) 19px 20px);
  border-right: 1px solid rgba(199, 154, 69, .68);
  box-shadow: 0 0 42px rgba(56, 247, 255, .16), inset -10px 0 28px rgba(255, 61, 190, .08);
}

.conservatory-spine::before,
.conservatory-spine::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  border: 1px solid rgba(199, 154, 69, .72);
  border-radius: 54px 54px 26px 26px;
  pointer-events: none;
}

.conservatory-spine::after {
  inset: 22px 22px;
  border-color: rgba(56, 247, 255, .45);
  filter: drop-shadow(0 0 8px var(--cyan));
  animation: spinePulse 5s ease-in-out infinite;
}

.spine-current {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 50%;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--fuchsia), var(--verdigris), var(--cyan));
  background-size: 100% 220%;
  opacity: .65;
  box-shadow: 0 0 14px var(--cyan);
  animation: currentTravel 7s linear infinite;
}

.vertical-wordmark {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  padding: 18px 5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--parchment);
  text-shadow: 0 0 12px rgba(56,247,255,.45);
}

.vertical-wordmark span { color: var(--brass); font-style: italic; }

.chapter-rail {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  width: 82px;
}

.chapter-link {
  min-height: 72px;
  color: var(--parchment);
  text-decoration: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(199, 154, 69, .65);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle, rgba(110,41,79,.62), rgba(18,10,30,.82));
  box-shadow: inset 0 0 22px rgba(199,154,69,.12);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.chapter-link span { font-family: var(--seal); font-size: 22px; color: var(--brass); }
.chapter-link em { font-size: 10px; color: rgba(244,232,200,.72); font-style: normal; letter-spacing: .12em; }
.chapter-link.active, .chapter-link:hover { transform: translateX(8px); border-color: var(--cyan); box-shadow: 0 0 18px rgba(56,247,255,.48), inset 0 0 20px rgba(255,61,190,.16); }

.spine-glyphs { position: relative; z-index: 2; display: grid; gap: 8px; color: var(--verdigris); text-shadow: 0 0 10px var(--verdigris); }

.garden-stage { margin-left: 138px; min-height: 100vh; position: relative; }

.pollen-field { position: fixed; inset: 0 0 0 138px; pointer-events: none; z-index: 8; overflow: hidden; }
.pollen { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: .75; }

.story-room {
  position: relative;
  min-height: 100vh;
  padding: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.room-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 45%, rgba(56,247,255,.09), transparent 34%),
    radial-gradient(ellipse at 35% 65%, rgba(255,61,190,.1), transparent 33%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, rgba(199,154,69,.08) 31px 32px, transparent 33px 60px);
  opacity: .82;
}

.ornate-frame {
  position: relative;
  width: min(1120px, 92vw);
  min-height: min(760px, 86vh);
  border: 1px solid rgba(199,154,69,.78);
  border-radius: 46px 46px 24px 24px;
  background: linear-gradient(145deg, rgba(18,10,30,.76), rgba(34,16,53,.62)), radial-gradient(circle at 50% 50%, rgba(244,232,200,.08), transparent 45%);
  box-shadow: inset 0 0 0 8px rgba(199,154,69,.06), inset 0 0 70px rgba(56,247,255,.08), 0 0 50px rgba(0,0,0,.42);
  overflow: hidden;
}

.ornate-frame::before,
.ornate-frame::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid transparent;
  border-radius: 34px 34px 16px 16px;
  background: linear-gradient(90deg, var(--cyan), var(--fuchsia), var(--brass), var(--verdigris), var(--cyan)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background-size: 320% 100%;
  animation: borderGlimmer 9s linear infinite;
  opacity: .78;
  pointer-events: none;
}

.ornate-frame::after { inset: 34px; opacity: .26; animation-direction: reverse; }

.corner { position: absolute; z-index: 3; width: 76px; height: 76px; border-color: var(--brass); filter: drop-shadow(0 0 6px rgba(199,154,69,.55)); }
.corner-a { top: 22px; left: 22px; border-top: 2px solid; border-left: 2px solid; border-radius: 30px 0 0; }
.corner-b { top: 22px; right: 22px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 30px 0 0; }
.corner-c { bottom: 22px; left: 22px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 30px; }
.corner-d { bottom: 22px; right: 22px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 30px; }

.hero-frame { display: grid; place-items: center; }
.hero-copy { position: absolute; left: 72px; bottom: 58px; max-width: 620px; z-index: 4; }
.chapter-seal { margin: 0 0 12px; font-family: var(--seal); color: var(--brass); font-size: 13px; letter-spacing: .16em; text-transform: lowercase; }
h1, h2 { margin: 0; font-family: var(--serif-display); font-weight: 600; line-height: .9; }
h1 { font-size: clamp(78px, 12vw, 170px); letter-spacing: -.045em; text-shadow: 0 0 16px rgba(56,247,255,.38), 0 0 34px rgba(255,61,190,.2); }
h2 { font-size: clamp(48px, 7vw, 96px); color: var(--parchment); }
.lead { margin: 18px 0 0; max-width: 560px; font-size: 20px; line-height: 1.7; color: rgba(244,232,200,.84); }

.shell-conservatory { position: relative; width: min(52vw, 560px); height: min(52vw, 560px); transform-style: preserve-3d; animation: drift 8s ease-in-out infinite; }
.shell-glow { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle, rgba(56,247,255,.24), rgba(255,61,190,.11) 46%, transparent 70%); filter: blur(14px); }
.shell-spiral { position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(244,232,200,.55); box-shadow: 0 0 28px rgba(56,247,255,.7), inset 0 0 32px rgba(255,61,190,.28); background: conic-gradient(from 40deg, rgba(56,247,255,.3), rgba(255,61,190,.18), rgba(47,208,139,.24), rgba(56,247,255,.3)); }
.shell-spiral span { position: absolute; border: 1px solid rgba(244,232,200,.72); border-radius: 50%; box-shadow: 0 0 16px rgba(56,247,255,.48); }
.shell-spiral span:nth-child(1) { inset: 10% 10% 10% 20%; }
.shell-spiral span:nth-child(2) { inset: 20% 18% 22% 30%; }
.shell-spiral span:nth-child(3) { inset: 32% 28% 32% 42%; }
.shell-spiral span:nth-child(4) { inset: 43% 39% 43% 53%; }
.shell-spiral span:nth-child(5) { inset: 49% 46% 49% 60%; background: var(--cyan); }
.greenhouse-ribs { position: absolute; inset: 18%; border-radius: 50%; background: repeating-conic-gradient(from 20deg, rgba(199,154,69,.78) 0 1deg, transparent 1deg 18deg); opacity: .55; }

.specimen-label, .ledger-scrap {
  position: absolute;
  z-index: 5;
  padding: 12px 16px;
  max-width: 250px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(244,232,200,.96), rgba(199,154,69,.88));
  border: 1px solid var(--brass);
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 0 18px rgba(56,247,255,.12);
  font-size: 13px;
  line-height: 1.55;
  transform: rotate(-2deg);
}
.label-north { top: 74px; left: 38%; }
.label-east { top: 40%; right: 72px; transform: rotate(3deg); }
.label-west { top: 32%; left: 70px; transform: rotate(-5deg); }

.split-scene, .orchard-scene, .ledger-scene { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 34px; padding: 84px; }
.oval-cartouche { position: relative; min-height: 520px; border-radius: 50%; border: 1px solid rgba(199,154,69,.72); background: radial-gradient(circle, rgba(47,208,139,.13), rgba(18,10,30,.18) 52%, rgba(110,41,79,.3)); box-shadow: inset 0 0 70px rgba(56,247,255,.14), 0 0 28px rgba(255,61,190,.12); }
.seed-bed { position: absolute; inset: 16%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22px, rgba(199,154,69,.18) 23px 25px), radial-gradient(circle at 50% 65%, rgba(244,232,200,.13), transparent 48%); }
.seed { position: absolute; width: 48px; height: 72px; border-radius: 60% 40% 60% 40%; background: var(--verdigris); box-shadow: 0 0 22px var(--verdigris); }
.seed-one { left: 28%; top: 52%; transform: rotate(-32deg); }
.seed-two { left: 48%; top: 34%; transform: rotate(18deg); background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.seed-three { right: 24%; bottom: 26%; transform: rotate(46deg); background: var(--fuchsia); box-shadow: 0 0 22px var(--fuchsia); }
.vine-wire { position: absolute; inset: 8%; border: 2px dashed rgba(56,247,255,.52); border-radius: 46% 54% 48% 52%; animation: spinSlow 18s linear infinite; }
.folio-note { position: relative; z-index: 3; padding: 34px; border-left: 1px solid var(--brass); background: linear-gradient(90deg, rgba(244,232,200,.08), transparent); }
.folio-note p:not(.chapter-seal), .weather-book p { font-size: 18px; line-height: 1.8; color: rgba(244,232,200,.82); }
.ledger-scrap { position: relative; margin-top: 26px; display: inline-block; transform: rotate(1deg); }

.orchard-arch { position: relative; min-height: 540px; border: 1px solid rgba(56,247,255,.48); border-radius: 52% 52% 8% 8%; background: radial-gradient(ellipse at 50% 18%, rgba(56,247,255,.22), transparent 34%), linear-gradient(rgba(18,10,30,.2), rgba(110,41,79,.24)); overflow: hidden; }
.moon-vial { position: absolute; width: 104px; height: 174px; left: calc(50% - 52px); top: 48px; border-radius: 52px 52px 18px 18px; border: 1px solid var(--parchment); background: radial-gradient(circle at 50% 38%, rgba(244,232,200,.68), rgba(56,247,255,.18) 42%, transparent 62%); box-shadow: 0 0 30px rgba(56,247,255,.5); }
.branch { position: absolute; bottom: 82px; width: 44%; height: 220px; border-top: 3px solid var(--brass); }
.branch-left { left: 8%; border-left: 3px solid var(--brass); border-radius: 80% 0 0; transform: rotate(-10deg); }
.branch-right { right: 8%; border-right: 3px solid var(--brass); border-radius: 0 80% 0 0; transform: rotate(10deg); }
.branch i { position: absolute; width: 28px; height: 54px; border-radius: 50%; background: var(--verdigris); box-shadow: 0 0 18px var(--verdigris); }
.branch i:nth-child(1) { top: 42px; left: 24%; } .branch i:nth-child(2) { top: 92px; left: 52%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); } .branch i:nth-child(3) { top: 148px; left: 72%; background: var(--fuchsia); box-shadow: 0 0 18px var(--fuchsia); }
.neon-bloom { position: absolute; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, var(--parchment), var(--fuchsia) 26%, transparent 62%); animation: bloomPulse 4s ease-in-out infinite; }
.bloom-a { left: 18%; top: 26%; } .bloom-b { right: 16%; top: 35%; animation-delay: 1s; } .bloom-c { left: 43%; bottom: 18%; animation-delay: 2s; }

.weather-book { position: relative; z-index: 4; padding: 48px; color: var(--ink); background: linear-gradient(135deg, rgba(244,232,200,.95), rgba(244,232,200,.78)); border: 1px solid var(--brass); box-shadow: 0 0 35px rgba(199,154,69,.18); transform: rotate(-1deg); }
.weather-book h2 { color: var(--ink); text-shadow: none; }
.weather-book .chapter-seal { color: var(--rose); }
.weather-book p { color: rgba(18,10,30,.82); }
.ledger-lines { margin-top: 22px; border-top: 1px solid rgba(110,41,79,.34); }
.ledger-lines p { border-bottom: 1px solid rgba(110,41,79,.25); margin: 0; padding: 15px 0; }
.night-bloom { position: relative; width: 430px; height: 430px; margin: auto; border-radius: 50%; background: radial-gradient(circle, rgba(56,247,255,.16), transparent 60%); animation: drift 7s ease-in-out infinite reverse; }
.night-bloom span { position: absolute; left: 50%; top: 50%; width: 76px; height: 190px; margin: -95px 0 0 -38px; border-radius: 50% 50% 12% 12%; background: linear-gradient(var(--cyan), var(--fuchsia)); transform-origin: 50% 95%; opacity: .72; box-shadow: 0 0 22px rgba(56,247,255,.7); }
.night-bloom span:nth-child(1) { transform: rotate(0deg); } .night-bloom span:nth-child(2) { transform: rotate(72deg); } .night-bloom span:nth-child(3) { transform: rotate(144deg); } .night-bloom span:nth-child(4) { transform: rotate(216deg); } .night-bloom span:nth-child(5) { transform: rotate(288deg); }

.active-room .ornate-frame { box-shadow: inset 0 0 0 8px rgba(199,154,69,.06), inset 0 0 80px rgba(56,247,255,.14), 0 0 58px rgba(255,61,190,.14); }

@keyframes borderGlimmer { to { background-position: 320% 0; } }
@keyframes currentTravel { to { background-position: 0 220%; } }
@keyframes spinePulse { 50% { border-color: rgba(255,61,190,.5); filter: drop-shadow(0 0 12px var(--fuchsia)); } }
@keyframes drift { 0%, 100% { transform: translate3d(0, -8px, 0) rotate(-1deg); } 50% { transform: translate3d(10px, 12px, 0) rotate(2deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes bloomPulse { 50% { transform: scale(1.18); filter: hue-rotate(45deg); } }

@media (max-width: 900px) {
  .conservatory-spine { width: 92px; padding: 14px 8px; }
  .vertical-wordmark { font-size: 20px; }
  .chapter-rail { width: 58px; gap: 12px; }
  .chapter-link { min-height: 56px; }
  .garden-stage { margin-left: 92px; }
  .pollen-field { left: 92px; }
  .story-room { padding: 18px; }
  .split-scene, .orchard-scene, .ledger-scene { grid-template-columns: 1fr; padding: 48px 28px; }
  .hero-copy { left: 44px; right: 34px; bottom: 42px; }
  .specimen-label { display: none; }
}