:root {
  /* Design font token: Grotes* Grotesk** */
  --vellum: #FFF4DF;
  --blush: #F8C8D8;
  --lavender: #CDB7FF;
  --sage: #6FAF8B;
  --apricot: #FFC48A;
  --plum: #34213F;
  --mist: #BFE7F5;
  --glass: rgba(255, 244, 223, 0.42);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--plum);
  background:
    radial-gradient(circle at 18% 10%, rgba(248, 200, 216, 0.75), transparent 28rem),
    radial-gradient(circle at 88% 26%, rgba(191, 231, 245, 0.7), transparent 32rem),
    linear-gradient(135deg, var(--vellum), #fff9eb 42%, #f6e8ff);
  font-family: Literata, Georgia, serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.21;
  background-image:
    repeating-radial-gradient(circle at 10% 20%, rgba(52, 33, 63, 0.09) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(92deg, rgba(52, 33, 63, 0.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

.cursor-orb {
  position: fixed;
  width: 18rem;
  height: 18rem;
  margin: -9rem 0 0 -9rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255, 196, 138, 0.32), transparent 68%);
  transform: translate3d(50vw, 50vh, 0);
}

.marginal-nav {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.marginal-nav span { color: rgba(52, 33, 63, 0.45); writing-mode: vertical-rl; margin: 0 0 1rem 0.2rem; }
.marginal-nav a { color: var(--plum); text-decoration: none; background: rgba(255, 244, 223, 0.45); border: 1px solid rgba(52, 33, 63, 0.08); padding: 0.34rem 0.5rem; border-radius: 999px; backdrop-filter: blur(9px); }

.atlas { position: relative; z-index: 2; }

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

.hero { overflow: hidden; justify-content: center; }

.page-curtain {
  position: absolute;
  top: -8vh;
  bottom: -8vh;
  width: 54vw;
  background: linear-gradient(100deg, rgba(255,244,223,0.82), rgba(205,183,255,0.34), rgba(255,255,255,0.18));
  border: 1px solid rgba(255, 255, 255, 0.54);
  filter: drop-shadow(0 2rem 3rem rgba(52, 33, 63, 0.12));
  backdrop-filter: blur(11px);
  animation: partPages 2.4s cubic-bezier(.2,.8,.14,1) forwards;
}
.page-left { left: -7vw; border-radius: 0 42% 55% 0; transform-origin: left center; }
.page-right { right: -7vw; border-radius: 42% 0 0 55%; transform-origin: right center; }

.hero-word {
  position: absolute;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(6.5rem, 18vw, 19rem);
  font-weight: 750;
  font-variation-settings: "SOFT" 85, "WONK" 1;
  line-height: 0.72;
  letter-spacing: -0.095em;
  color: rgba(52, 33, 63, 0.88);
  top: 11vh;
  left: 4vw;
  white-space: nowrap;
  clip-path: inset(0 0 15% 0 round 2rem);
  z-index: -1;
}

.open-book, .final-book {
  position: absolute;
  width: min(62vw, 54rem);
  height: 24rem;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.86;
}

.book-page, .final-page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,244,223,0.9), rgba(248,200,216,0.25));
  border: 1px solid rgba(52,33,63,0.09);
  box-shadow: inset 0 0 4rem rgba(255,196,138,0.23), 0 2rem 5rem rgba(52,33,63,0.12);
}
.book-page-left, .left-page { left: 0; border-radius: 100% 7% 10% 100% / 25% 8% 16% 32%; transform: skewY(-5deg); }
.book-page-right, .right-page { right: 0; border-radius: 7% 100% 100% 10% / 8% 25% 32% 16%; transform: skewY(5deg); }
.book-spine { position: absolute; left: 49.5%; top: 3%; bottom: 0; width: 1%; background: rgba(52,33,63,0.12); border-radius: 999px; }

.glass-card {
  position: relative;
  border-radius: 2rem 4rem 2.5rem 3rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,244,223,0.2)),
    radial-gradient(circle at 14% 8%, rgba(191,231,245,0.46), transparent 35%),
    rgba(205, 183, 255, 0.24);
  box-shadow: 0 1.6rem 5rem rgba(52, 33, 63, 0.15), inset 0 0 0 1px rgba(255,255,255,0.2);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: transform 520ms cubic-bezier(.2,.8,.14,1), box-shadow 520ms, background 520ms;
}

.hover-scale:hover { transform: translateY(-0.4rem) scale(1.055) rotate(var(--hover-rotate, 0deg)); box-shadow: 0 2.2rem 6rem rgba(52, 33, 63, 0.21), 0 0 0 0.35rem rgba(255,196,138,0.18); }

.bookmark-card { width: min(34rem, 82vw); padding: 2rem; margin-top: 5vh; --hover-rotate: -1deg; }
.folio, .citation, .kicker, .voice-card span { font-family: "Space Grotesk", Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--sage); font-weight: 700; }
h1, h2, h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 75, "WONK" 1; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.9; letter-spacing: -0.06em; margin: 0.75rem 0 1rem; }
h2 { font-size: clamp(3rem, 8vw, 8.5rem); line-height: 0.82; letter-spacing: -0.07em; }
h3 { font-size: clamp(1.8rem, 3.2vw, 3.3rem); line-height: 0.9; letter-spacing: -0.045em; margin: 0.55rem 0 0.8rem; }
p { font-size: clamp(1rem, 1.55vw, 1.28rem); line-height: 1.65; margin: 0; }

.drifting-question {
  position: absolute;
  right: 8vw;
  top: 19vh;
  max-width: 25rem;
  color: rgba(52, 33, 63, 0.68);
  animation: driftIn 3.2s 0.7s both ease-out, float 8s 3.8s infinite ease-in-out;
}

.ribbon-line { position: absolute; height: 0.28rem; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--sage), var(--apricot), transparent); transform-origin: left; animation: drawRibbon 2.8s ease both; }
.hero-ribbon { width: 52vw; left: 24vw; bottom: 26vh; transform: rotate(-7deg); }
.context-ribbon { width: 58vw; left: 22vw; bottom: 16vh; transform: rotate(9deg); }

.question { background: radial-gradient(ellipse at 70% 20%, rgba(255,196,138,0.28), transparent 34rem); justify-content: space-between; }
.scene-copy { max-width: 48rem; z-index: 2; }
.scene-copy p { margin-top: 1.35rem; max-width: 38rem; }
.bend-left { margin-left: 8vw; transform: rotate(-2deg); }
.bend-right { margin-left: auto; margin-right: 4vw; text-align: right; transform: rotate(1.5deg); }
.narrow { margin: 0 auto; max-width: 40rem; transform: translateY(24vh); }

.oversized-label {
  position: absolute;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(7rem, 17vw, 20rem);
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.09em;
  color: rgba(248, 200, 216, 0.58);
  z-index: -1;
  left: 4vw;
  top: 7vh;
}
.oversized-label.right { left: auto; right: -5vw; color: rgba(205, 183, 255, 0.48); writing-mode: vertical-rl; font-size: clamp(5rem, 13vw, 16rem); }
.oversized-label.final { left: 6vw; top: 3vh; color: rgba(111, 175, 139, 0.24); }

.ink-moon { position: absolute; left: 51%; top: 41%; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--plum), var(--lavender) 16%, var(--blush) 42%, transparent 70%); animation: blossom 5s infinite ease-in-out; }
.annotation { width: min(27rem, 80vw); padding: 1.6rem; margin-right: 8vw; --hover-rotate: 4deg; }
.rotated-a { transform: rotate(4deg); }
.ruled-lines { height: 4.7rem; margin-top: 1rem; background: repeating-linear-gradient(to bottom, rgba(52,33,63,0.16) 0 1px, transparent 1px 1.05rem); }
.floating-mark { position: absolute; font-family: Fraunces, serif; font-size: 5rem; color: rgba(111,175,139,0.4); animation: float 7s infinite ease-in-out; }
.mark-one { left: 18vw; bottom: 10vh; }
.mark-two { right: 18vw; top: 14vh; animation-delay: -2s; }

.context { background: linear-gradient(170deg, transparent 0 34%, rgba(191,231,245,0.28) 34% 72%, transparent 72%); }
.pool { position: absolute; border-radius: 50% 42% 48% 36% / 40% 55% 38% 50%; filter: blur(0.2px); }
.pool-lavender { left: 6vw; top: 17vh; width: 38rem; height: 28rem; background: radial-gradient(circle, rgba(205,183,255,0.5), rgba(248,200,216,0.22), transparent 70%); }
.page-tab { width: min(25rem, 78vw); padding: 1.7rem; margin-left: 9vw; transform: rotate(-5deg); --hover-rotate: -5deg; }
.lens { position: absolute; right: 12vw; bottom: 18vh; width: 12rem; height: 12rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), rgba(191,231,245,0.36), rgba(255,196,138,0.28)); backdrop-filter: blur(13px); display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.13em; color: var(--plum); box-shadow: 0 1.4rem 4rem rgba(52,33,63,0.14); }

.affected { background: radial-gradient(ellipse at 52% 55%, rgba(248,200,216,0.36), transparent 34rem); align-items: flex-start; }
.voices { position: absolute; inset: 16vh 7vw auto auto; width: min(42rem, 78vw); height: 56vh; }
.voice-card { position: absolute; width: 19rem; padding: 1.2rem; }
.voice-card:nth-child(1) { left: 0; top: 2rem; transform: rotate(7deg); --hover-rotate: 7deg; }
.voice-card:nth-child(2) { right: 0; top: 12rem; transform: rotate(-4deg); --hover-rotate: -4deg; }
.voice-card:nth-child(3) { left: 8rem; bottom: 0; transform: rotate(2deg); --hover-rotate: 2deg; }
.voice-card p { font-size: 1.35rem; line-height: 1.35; margin-top: 0.6rem; }
.pressed-flower { position: absolute; left: 13vw; bottom: 12vh; width: 13rem; height: 18rem; opacity: 0.38; background: radial-gradient(ellipse at 50% 18%, var(--sage) 0 9%, transparent 10%), radial-gradient(ellipse at 35% 35%, var(--sage) 0 12%, transparent 13%), radial-gradient(ellipse at 65% 35%, var(--sage) 0 12%, transparent 13%), linear-gradient(90deg, transparent 48%, var(--sage) 49% 51%, transparent 52%); filter: blur(0.4px); transform: rotate(-18deg); }

.reflection { justify-content: space-around; background: linear-gradient(18deg, rgba(255,196,138,0.18), transparent 38%, rgba(205,183,255,0.24)); }
.reflection-copy { max-width: 49rem; }
.pool-blue { right: 5vw; top: 14vh; width: 34rem; height: 36rem; background: radial-gradient(circle, rgba(191,231,245,0.6), rgba(255,244,223,0.15), transparent 72%); }
.quote-pane { width: min(29rem, 78vw); padding: 2.2rem; transform: rotate(5deg); --hover-rotate: 5deg; }
.quote-bracket { display: block; font-family: Fraunces, serif; font-size: 8rem; line-height: 0.35; color: var(--apricot); }
.paper-scale { position: absolute; right: 24vw; bottom: 13vh; width: 18rem; height: 8rem; opacity: 0.6; }
.paper-scale span { position: absolute; left: 50%; top: 0; width: 0.28rem; height: 7rem; background: var(--plum); border-radius: 999px; }
.paper-scale div { position: absolute; bottom: 0; width: 6rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(52,33,63,0.35); background: rgba(255,244,223,0.28); }
.paper-scale div:first-child { left: 1rem; transform: rotate(9deg); }
.paper-scale div:last-child { right: 0; transform: rotate(-12deg); }

.practice { min-height: 112vh; justify-content: center; overflow: hidden; }
.final-book { width: min(76vw, 70rem); height: 36rem; bottom: 14vh; transform: translateX(-50%) rotate(1deg); }
.final-card { width: min(43rem, 84vw); padding: 2.3rem; transform: translateY(7vh) rotate(-2deg); --hover-rotate: -2deg; }
.reading-link { display: inline-block; margin-top: 1.3rem; font-family: "Space Grotesk", Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.15em; color: var(--plum); text-decoration: none; border-bottom: 0.22rem solid var(--sage); padding-bottom: 0.2rem; }
.closing-marginalia { position: absolute; bottom: 6vh; font-family: "Space Grotesk", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(52,33,63,0.45); }

.breathe-word { transition: transform 700ms cubic-bezier(.2,.8,.14,1); }
.breathe-word.near { transform: scale(1.035); }
.glass-card.shift .citation, .glass-card.shift .folio, .glass-card.shift .kicker { color: var(--apricot); }

@keyframes partPages {
  to { transform: translateX(var(--part-x, 0)) rotate(var(--part-r, 0deg)); opacity: 0.64; }
}
.page-left { --part-x: -18vw; --part-r: -7deg; }
.page-right { --part-x: 18vw; --part-r: 7deg; }
@keyframes driftIn { from { opacity: 0; transform: translateY(1.5rem) scale(0.94); filter: blur(10px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1rem) rotate(2deg); } }
@keyframes blossom { 0%,100% { transform: scale(0.74); filter: blur(1px); } 50% { transform: scale(1.12); filter: blur(0); } }
@keyframes drawRibbon { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }

@media (max-width: 860px) {
  .marginal-nav { display: none; }
  .chapter { padding: 6rem 1.2rem; flex-direction: column; justify-content: center; gap: 2rem; }
  .hero-word { left: -1rem; top: 8vh; font-size: 24vw; }
  .drifting-question { position: relative; inset: auto; margin-top: 2rem; }
  .open-book, .final-book { width: 105vw; height: 18rem; }
  .bend-left, .bend-right, .narrow { margin: 0; text-align: left; transform: none; }
  .annotation, .page-tab, .quote-pane, .final-card { margin: 0; transform: rotate(0); }
  .voices { position: relative; inset: auto; width: 100%; height: auto; display: grid; gap: 1rem; }
  .voice-card, .voice-card:nth-child(n) { position: relative; inset: auto; width: 100%; transform: none; }
  .oversized-label, .oversized-label.right { writing-mode: horizontal-tb; font-size: 24vw; left: 0; right: auto; top: 3vh; }
  .lens, .paper-scale { display: none; }
}