:root {
  /* Design typography token: Space Grotesk* Grotesk** */
  --cream: #FFF1CF;
  --night: #251226;
  --burgundy: #7A1832;
  --foam: #F9FFF6;
  --pink: #FF7AAE;
  --aqua: #38E8D4;
  --teal: #087D82;
  --fraunces: "Fraunces", Georgia, serif;
  --gloria: "Gloria Hallelujah", "Comic Sans MS", cursive;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--night);
  background: var(--cream);
  font-family: var(--space);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,122,174,.42), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(56,232,212,.42), transparent 28%),
    linear-gradient(135deg, var(--cream), #ffe3bc 46%, #f8e2d2);
}

.lagoon-shell { position: relative; min-height: 100vh; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
}

.current-layer {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  padding: 10px 16px;
  border: 2px solid var(--burgundy);
  border-radius: 999px;
  background: rgba(249,255,246,.8);
  box-shadow: 6px 6px 0 var(--burgundy);
  color: var(--teal);
  font-family: var(--gloria);
  transform: rotate(2deg);
}

.hero {
  display: grid;
  align-items: center;
  background: var(--cream);
  border: clamp(10px, 2vw, 24px) solid var(--burgundy);
  isolation: isolate;
}

.graph-paper,
.graph-paper::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(8,125,130,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,125,130,.13) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .48;
  z-index: -2;
}

.graph-paper::after {
  background-image: radial-gradient(circle, rgba(122,24,50,.22) 1px, transparent 1.5px);
  background-size: 23px 23px;
  transform: rotate(-4deg) scale(1.1);
}

.current {
  position: absolute;
  width: 160vw;
  height: 120px;
  left: -30vw;
  border-top: 3px solid rgba(56,232,212,.42);
  border-bottom: 3px solid rgba(56,232,212,.24);
  background: linear-gradient(90deg, transparent, rgba(56,232,212,.25), rgba(249,255,246,.42), transparent);
  filter: blur(.2px);
  z-index: -1;
  animation: driftCurrent 13s linear infinite;
}

.current-one { top: 24%; transform: rotate(-18deg); }
.current-two { top: 62%; transform: rotate(-18deg); animation-duration: 18s; animation-direction: reverse; }

@keyframes driftCurrent {
  from { translate: -18vw 0; }
  to { translate: 18vw 0; }
}

.wax-moon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 28vw, 430px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 48% 52%;
  background: var(--burgundy);
  color: var(--pink);
  font-size: clamp(70px, 12vw, 170px);
  transform: translate(-50%, -54%) rotate(-9deg);
  box-shadow: inset 0 0 0 14px rgba(255,241,207,.22), 18px 22px 0 rgba(8,125,130,.35);
  z-index: -1;
}

.ledger-nav,
.passport-strip {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  right: clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--gloria);
  color: var(--teal);
}

.ledger-nav { top: 30px; }
.passport-strip { bottom: 30px; }

.ledger-nav span,
.passport-strip span {
  padding: 8px 14px;
  border: 2px solid var(--teal);
  border-radius: 999px 999px 999px 12px;
  background: rgba(249,255,246,.72);
}

.hero-copy {
  max-width: 1060px;
  margin: auto;
  text-align: center;
  transform: rotate(-1.5deg);
}

.doodle-note,
.hand-label {
  margin: 0 0 14px;
  font-family: var(--gloria);
  color: var(--teal);
  font-size: clamp(1rem, 2vw, 1.45rem);
}

h1, h2, h3 { font-family: var(--fraunces); margin: 0; }

h1 {
  color: var(--foam);
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: .76;
  letter-spacing: -.08em;
  text-shadow: 8px 8px 0 var(--burgundy), 14px 14px 0 var(--aqua), -3px -3px 0 var(--night);
}

.subtitle {
  max-width: 710px;
  margin: 34px auto 0;
  padding: 18px 24px;
  border: 3px solid var(--burgundy);
  border-radius: 28px 12px 34px 18px;
  background: rgba(255,241,207,.86);
  box-shadow: 10px 10px 0 rgba(56,232,212,.72);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.grid-chapter {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,122,174,.38), transparent 18%),
    radial-gradient(circle at 12% 80%, rgba(56,232,212,.45), transparent 22%),
    var(--cream);
}

.chapter-heading { max-width: 760px; margin-bottom: 38px; }
.chapter-heading h2, .proof-ledger h2, .after-dark h2 { color: var(--burgundy); font-size: clamp(3rem, 9vw, 8rem); line-height: .86; letter-spacing: -.05em; }
.chapter-heading p:not(.hand-label), .proof-ledger p:not(.hand-label), .after-dark p { font-size: 1.2rem; max-width: 560px; }

.specimen-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(90px, 11vw);
  gap: clamp(14px, 2vw, 26px);
  max-width: 1240px;
  margin: 0 auto;
}

.tile {
  position: relative;
  padding: 20px;
  border: 3px solid var(--burgundy);
  background: var(--cream);
  border-radius: 24px 12px 30px 16px;
  box-shadow: 10px 10px 0 var(--teal);
  transition: transform .36s cubic-bezier(.2,1.4,.28,1), box-shadow .36s, background .36s, color .36s;
  cursor: pointer;
  transform: rotate(var(--tilt, -2deg));
  overflow: hidden;
}

.tile::before {
  content: attr(data-line);
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  font-family: var(--gloria);
  color: var(--burgundy);
  opacity: 0;
  transform: translateY(12px) rotate(-2deg);
  transition: .3s;
}

.tile:hover,
.tile.is-active {
  z-index: 5;
  background: linear-gradient(135deg, var(--foam), var(--aqua));
  transform: scale(1.08) rotate(0deg);
  box-shadow: 16px 18px 0 var(--burgundy);
}

.tile:hover::before,
.tile.is-active::before { opacity: 1; transform: translateY(0) rotate(-2deg); }

.tile h3 { font-size: clamp(1.35rem, 2.8vw, 2.35rem); color: var(--burgundy); line-height: .92; }
.tile p { color: var(--teal); font-weight: 700; }
.tile small { position: absolute; top: 14px; right: 14px; font-family: var(--gloria); color: var(--pink); }
.tile-icon { display: block; margin-bottom: 8px; color: var(--pink); font-size: 2.1rem; }

.shell-stamp { grid-column: 1 / span 3; grid-row: span 2; --tilt: -5deg; }
.alias-scroll { grid-column: 4 / span 3; grid-row: span 3; --tilt: 3deg; }
.tidal-map { grid-column: 7 / span 5; grid-row: span 2; --tilt: -2deg; }
.badge { grid-column: 10 / span 3; grid-row: 3 / span 3; border-radius: 50%; --tilt: 7deg; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.note-scrap { grid-column: 2 / span 4; grid-row: 4 / span 2; --tilt: 4deg; }
.starfish-seal { grid-column: 6 / span 4; grid-row: 4 / span 2; --tilt: -6deg; background: #ffe7ed; }
.jelly-tag { grid-column: 9 / span 3; grid-row: 6 / span 2; --tilt: 2deg; }

.hover-card {
  max-width: 460px;
  margin: 38px auto 0;
  padding: 18px 22px;
  border: 2px dashed var(--burgundy);
  border-radius: 18px;
  background: var(--foam);
  box-shadow: 7px 7px 0 var(--pink);
  font-family: var(--gloria);
  color: var(--teal);
}
.hover-card b { display: block; color: var(--burgundy); font-family: var(--fraunces); font-size: 1.55rem; }

.bubble-field { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border: 2px solid var(--aqua);
  border-radius: 50%;
  background: rgba(249,255,246,.42);
  box-shadow: inset 3px 3px 0 rgba(249,255,246,.85);
  animation: bubbleRise .95s ease-out forwards;
}
@keyframes bubbleRise { to { transform: translate(var(--drift), -90px) scale(.45); opacity: 0; } }

.proof-chapter {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 44px;
  align-items: center;
  background: linear-gradient(160deg, var(--cream) 0 43%, var(--night) 43% 100%);
}

.proof-ledger {
  padding: 28px;
  border: 3px solid var(--burgundy);
  border-radius: 26px 16px 42px 18px;
  background: rgba(255,241,207,.92);
  box-shadow: 12px 12px 0 var(--aqua);
}

.constellation-wrap {
  position: relative;
  min-height: 470px;
  border: 4px solid var(--foam);
  border-radius: 44px;
  background:
    radial-gradient(circle at 26% 22%, rgba(56,232,212,.3), transparent 18%),
    radial-gradient(circle at 68% 70%, rgba(255,122,174,.25), transparent 20%),
    var(--night);
  box-shadow: 14px 14px 0 var(--burgundy);
}

#constellation { width: 100%; height: 100%; min-height: 390px; overflow: visible; }
#constellationPath { fill: none; stroke: var(--aqua); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: var(--dash, 1200); filter: drop-shadow(0 0 8px var(--aqua)); transition: stroke-dashoffset 1.6s ease; }
.stars circle { fill: var(--foam); stroke: var(--pink); stroke-width: 4; animation: starPulse 2.4s ease-in-out infinite; }
.stars circle:nth-child(even) { animation-delay: .6s; }
@keyframes starPulse { 50% { transform: scale(1.2); opacity: .72; } }

.snorkel-moon {
  position: absolute;
  right: 8%;
  top: 8%;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--burgundy);
  border: 3px solid var(--pink);
  font-family: var(--gloria);
  text-align: center;
  line-height: 1;
  transform: rotate(10deg);
}

.seal-chapter {
  background:
    linear-gradient(rgba(249,255,246,.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(249,255,246,.08) 2px, transparent 2px),
    var(--night);
  background-size: 58px 58px;
}
.dark-heading h2, .dark-heading p { color: var(--foam); }
.dark-heading .hand-label { color: var(--aqua); }

.crest-stage {
  position: relative;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  margin: 20px auto 0;
  border-radius: 50%;
  border: 3px dashed var(--aqua);
}
.crest-core, .crest-piece {
  position: absolute;
  display: grid;
  place-items: center;
  border: 3px solid var(--burgundy);
  background: var(--cream);
  box-shadow: 10px 10px 0 var(--aqua);
  font-family: var(--fraunces);
  color: var(--burgundy);
}
.crest-core {
  inset: 32%;
  border-radius: 50%;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .78;
  text-align: center;
  background: radial-gradient(circle, var(--foam), var(--cream) 62%, var(--pink));
}
.crest-piece { width: 142px; height: 96px; border-radius: 28px 10px; transition: transform 1s cubic-bezier(.2,1.2,.2,1); }
.piece-a { left: 8%; top: 16%; transform: rotate(-13deg); }
.piece-b { right: 6%; top: 24%; transform: rotate(10deg); }
.piece-c { left: 16%; bottom: 14%; transform: rotate(7deg); }
.piece-d { right: 15%; bottom: 9%; transform: rotate(-8deg); }
.crest-stage.assembled .piece-a { transform: translate(150px, 118px) rotate(0); }
.crest-stage.assembled .piece-b { transform: translate(-142px, 88px) rotate(0); }
.crest-stage.assembled .piece-c { transform: translate(116px, -128px) rotate(0); }
.crest-stage.assembled .piece-d { transform: translate(-122px, -148px) rotate(0); }

.after-dark {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(56,232,212,.28), transparent 24%),
    radial-gradient(circle at 20% 80%, rgba(255,122,174,.22), transparent 18%),
    var(--night);
  color: var(--foam);
}
.after-dark h2 { color: var(--foam); text-shadow: 6px 6px 0 var(--burgundy), 10px 10px 0 var(--teal); }
.ticket-stub {
  padding: 12px 28px;
  border: 3px solid var(--pink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--burgundy);
  font-family: var(--gloria);
  transform: rotate(-4deg);
  box-shadow: 8px 8px 0 var(--aqua);
}
.night-tags { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.night-tags span { padding: 10px 16px; border: 2px solid var(--aqua); border-radius: 999px; color: var(--aqua); background: rgba(249,255,246,.08); font-family: var(--gloria); }

@media (max-width: 860px) {
  .proof-chapter { grid-template-columns: 1fr; }
  .specimen-grid { display: block; }
  .tile { min-height: 190px; margin: 22px 0; }
  .badge { border-radius: 30px; }
  .ledger-nav, .passport-strip { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 16px 0; }
  .hero { align-content: center; }
}