:root {
  --morning-vellum: #F4F8FF;
  --aurora-blue: #9CCBFF;
  --deep-ink: #18324A;
  --mist-lavender: #D9E2FF;
  --lamp-parchment: #FFF4D8;
  --faded-brass: #B8924A;
  --desk-walnut: #6C4A32;
  --quiet-graphite: #2B3037;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body: "Libre Baskerville", Lora, Georgia, serif;
  --caption: "Source Serif 4", Inter, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--deep-ink);
  background: linear-gradient(135deg, var(--morning-vellum) 0%, var(--lamp-parchment) 56%, var(--mist-lavender) 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

.ambient-aurora,
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ambient-aurora {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(156, 203, 255, .55), transparent 42%),
    radial-gradient(ellipse at 82% 10%, rgba(217, 226, 255, .68), transparent 44%),
    linear-gradient(100deg, transparent 10%, rgba(156, 203, 255, .18) 34%, rgba(255, 244, 216, .2) 48%, rgba(217, 226, 255, .22) 62%, transparent 80%);
  filter: blur(16px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
.paper-grain {
  opacity: .44;
  background-image:
    repeating-linear-gradient(0deg, rgba(24, 50, 74, .025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(108, 74, 50, .018) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.folio-nav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.folio-nav a {
  width: 38px;
  height: 25px;
  display: grid;
  place-items: center;
  font-family: var(--caption);
  font-size: 11px;
  letter-spacing: .16em;
  text-decoration: none;
  color: var(--desk-walnut);
  background: rgba(255, 244, 216, .66);
  border: 1px solid rgba(184, 146, 74, .45);
  box-shadow: 0 6px 18px rgba(24, 50, 74, .08);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.folio-nav a.active,
.folio-nav a:hover {
  transform: translateX(7px);
  color: var(--deep-ink);
  background: var(--mist-lavender);
}

.tableau {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: clamp(44px, 7vw, 92px) clamp(42px, 8vw, 130px);
  overflow: hidden;
  border-bottom: 1px solid rgba(184, 146, 74, .28);
}
.tableau::before {
  content: attr(data-chapter);
  position: absolute;
  right: 5vw;
  top: 5vh;
  font-family: var(--display);
  font-size: clamp(72px, 12vw, 168px);
  color: rgba(156, 203, 255, .18);
  z-index: -1;
}
.tableau::after {
  content: "";
  position: absolute;
  inset: 8vh 8vw;
  border-top: 1px solid rgba(184, 146, 74, .28);
  border-bottom: 1px solid rgba(156, 203, 255, .28);
  transform: skewY(-8deg);
  z-index: -1;
}

.chapter-stamp,
.tiny-label,
.card-kicker,
.folio-tab,
.playtest-strip span {
  font-family: var(--caption);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
}
.chapter-stamp {
  position: absolute;
  top: 34px;
  left: clamp(42px, 8vw, 130px);
  color: var(--desk-walnut);
  border-left: 3px solid var(--faded-brass);
  padding-left: 14px;
  z-index: 4;
}

.paper-sheet,
.mixed-fragment,
.specimen-card,
.artifact,
.playtest-strip,
.revision-stack i {
  background:
    linear-gradient(135deg, rgba(255,255,255,.68), rgba(244,248,255,.5)),
    repeating-linear-gradient(0deg, rgba(24,50,74,.035) 0 1px, transparent 1px 21px),
    var(--lamp-parchment);
  border: 1px solid rgba(184, 146, 74, .38);
  box-shadow: 0 24px 55px rgba(24, 50, 74, .13), 0 1px 0 rgba(255,255,255,.8) inset;
}
.paper-sheet { padding: clamp(24px, 4vw, 48px); }

.folio-title {
  position: absolute;
  left: 9vw;
  top: 20vh;
  width: min(560px, 52vw);
  transform: rotate(-1.4deg);
}
h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: .92;
  margin: 10px 0 22px;
  color: var(--deep-ink);
}
h1 { font-size: clamp(84px, 13vw, 188px); letter-spacing: .035em; }
h2 { font-size: clamp(44px, 6vw, 86px); letter-spacing: .018em; }
p { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.85; margin: 0; color: rgba(24, 50, 74, .86); }
.tiny-label { color: var(--faded-brass); font-weight: 700; }

.aurora-pane {
  position: absolute;
  top: 11vh;
  right: 8vw;
  width: min(560px, 48vw);
  height: 210px;
  background: linear-gradient(115deg, transparent, rgba(156,203,255,.72), rgba(217,226,255,.76), rgba(255,244,216,.52), transparent);
  border: 1px solid rgba(156, 203, 255, .45);
  filter: blur(.2px);
  opacity: .74;
  transform: rotate(3deg);
  animation: paneDrift 13s ease-in-out infinite alternate;
}
.aurora-pane.compact { top: 14vh; width: 420px; height: 150px; }
.aurora-pane.night-band { inset: 14vh 6vw auto auto; width: 72vw; background: linear-gradient(100deg, rgba(24,50,74,.1), rgba(156,203,255,.8), rgba(217,226,255,.7), transparent); }

.z-thread,
.constellation {
  position: absolute;
  inset: 13vh 7vw 10vh 8vw;
  width: 85vw;
  height: 70vh;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}
.z-thread path,
.constellation path {
  fill: none;
  stroke: var(--aurora-blue);
  stroke-width: 2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 9px rgba(156,203,255,.55));
}
.tableau.in-view .z-thread path,
.tableau.in-view .constellation path { animation: drawThread 2.8s ease forwards; }
.constellation { left: 9vw; top: 20vh; width: 420px; height: 260px; }
.constellation circle { fill: var(--faded-brass); opacity: .72; }

.specimen-card {
  border: 0;
  padding: 0;
  position: absolute;
  width: 240px;
  height: 310px;
  cursor: pointer;
  perspective: 1100px;
  background: transparent;
  color: var(--deep-ink);
  z-index: 5;
}
.hero-card { right: 12vw; bottom: 14vh; transform: rotate(4deg); }
.lower-card { right: 10vw; bottom: 11vh; transform: rotate(2deg); }
.lower-card.left { left: 13vw; right: auto; transform: rotate(-3deg); }
.final-card { right: 18vw; bottom: 18vh; transform: rotate(3deg); }
.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s ease;
  border: 1px solid rgba(184,146,74,.48);
  background:
    radial-gradient(circle at 16% 14%, rgba(184,146,74,.22) 0 5px, transparent 6px),
    linear-gradient(150deg, rgba(244,248,255,.92), rgba(255,244,216,.94));
  box-shadow: 0 20px 42px rgba(24,50,74,.17);
}
.card-front::after {
  content: "";
  position: absolute;
  inset: 72px 30px 84px;
  background: linear-gradient(135deg, transparent 45%, rgba(156,203,255,.55) 46% 49%, transparent 50%), radial-gradient(circle, rgba(24,50,74,.09) 1px, transparent 2px);
  background-size: 100% 100%, 18px 18px;
}
.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--mist-lavender), rgba(244,248,255,.98));
  box-shadow: 0 22px 48px rgba(156,203,255,.38);
}
.flip-card.is-flipped .card-front { transform: rotateY(180deg); }
.flip-card.is-flipped .card-back { transform: rotateY(360deg); }
.specimen-card strong { font-family: var(--display); font-size: 31px; line-height: 1; font-weight: 600; position: relative; z-index: 2; }
.specimen-card em, .specimen-card span:not(.card-face):not(.card-kicker) { font-family: var(--body); font-size: 14px; line-height: 1.6; position: relative; z-index: 2; }
.card-kicker { color: var(--faded-brass); position: relative; z-index: 2; }

.artifact {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--desk-walnut);
  font-family: var(--caption);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  z-index: 3;
}
.artifact.one { right: 36vw; top: 42vh; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, var(--lamp-parchment), var(--mist-lavender)); }
.rule-slip { left: 42vw; bottom: 22vh; width: 245px; height: 54px; transform: rotate(-7deg); }
.silhouette { right: 18vw; bottom: 22vh; width: 125px; height: 190px; clip-path: polygon(42% 0, 65% 18%, 58% 48%, 82% 100%, 16% 100%, 38% 47%, 27% 18%); background: var(--deep-ink); color: var(--lamp-parchment); }

.folio-tab {
  position: absolute;
  z-index: 7;
  color: var(--deep-ink);
  text-decoration: none;
  padding: 13px 16px;
  background: rgba(255,244,216,.78);
  border: 1px solid rgba(184,146,74,.55);
  box-shadow: 0 10px 26px rgba(24,50,74,.12);
  transition: transform .35s ease, background .35s ease;
}
.folio-tab:hover { transform: translate(-5px, -5px); background: var(--mist-lavender); }
.lower-right { right: 7vw; bottom: 5vh; }

.chapter-copy { position: absolute; width: min(560px, 45vw); z-index: 4; }
.top-left { top: 18vh; left: 10vw; transform: rotate(-1deg); }
.top-right { top: 17vh; right: 9vw; transform: rotate(1deg); }
.mixed-fragment { position: absolute; right: 12vw; top: 18vh; width: 330px; padding: 24px; transform: rotate(4deg); z-index: 4; }
.mixed-fragment b { font-family: var(--caption); color: var(--faded-brass); text-transform: uppercase; letter-spacing: .17em; }
.vellum-map { position: absolute; inset: 30vh auto auto 34vw; width: 380px; height: 230px; background: rgba(217,226,255,.32); border: 1px solid rgba(156,203,255,.55); transform: rotate(-8deg); z-index: 2; }
.vellum-map span { position: absolute; border: 1px solid rgba(24,50,74,.2); border-radius: 50%; }
.vellum-map span:nth-child(1) { width: 140px; height: 88px; left: 34px; top: 48px; }
.vellum-map span:nth-child(2) { width: 180px; height: 115px; right: 40px; top: 75px; }
.vellum-map span:nth-child(3) { width: 80px; height: 160px; left: 154px; top: 32px; }
.notebook-lines { position: absolute; inset: 24vh 8vw 18vh 32vw; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(156,203,255,.35) 28px 29px); transform: rotate(2deg); }
.playtest-strip { position: absolute; left: 31vw; top: 44vh; display: flex; gap: 8px; padding: 18px; transform: rotate(-4deg); z-index: 3; }
.playtest-strip span { padding: 13px 15px; background: rgba(244,248,255,.72); color: var(--desk-walnut); border: 1px solid rgba(184,146,74,.28); }
.revision-stack { position: absolute; left: 10vw; top: 22vh; width: 430px; height: 350px; }
.revision-stack i { position: absolute; width: 330px; height: 220px; display: block; }
.revision-stack i:nth-child(1) { left: 40px; top: 8px; transform: rotate(-8deg); }
.revision-stack i:nth-child(2) { left: 74px; top: 62px; transform: rotate(5deg); background-color: var(--mist-lavender); }
.revision-stack i:nth-child(3) { left: 16px; top: 122px; transform: rotate(-2deg); }
.brass-pin { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--faded-brass); box-shadow: 0 0 0 7px rgba(184,146,74,.12), 0 0 24px rgba(184,146,74,.44); }
.p1 { left: 17vw; top: 22vh; }.p2 { right: 18vw; top: 36vh; }.p3 { left: 48vw; bottom: 18vh; }
.twilight { background: linear-gradient(145deg, rgba(255,244,216,.58), rgba(217,226,255,.68)); }
.night { background: linear-gradient(145deg, rgba(24,50,74,.12), rgba(244,248,255,.82) 45%, rgba(217,226,255,.78)); }
.final-note { position: absolute; left: 13vw; top: 23vh; width: min(660px, 54vw); transform: rotate(-1.5deg); }

@keyframes auroraDrift { from { transform: translateX(-3vw) translateY(-1vh) scale(1); } to { transform: translateX(4vw) translateY(2vh) scale(1.04); } }
@keyframes paneDrift { from { transform: rotate(3deg) translateX(-8px); } to { transform: rotate(1deg) translateX(18px); } }
@keyframes drawThread { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  .folio-nav { display: none; }
  .tableau { min-height: 118vh; padding: 72px 24px; }
  .folio-title, .chapter-copy, .final-note { position: relative; left: auto; right: auto; top: auto; width: 100%; margin: 6vh 0 24px; }
  .specimen-card, .hero-card, .lower-card, .lower-card.left, .final-card { position: relative; left: auto; right: auto; bottom: auto; margin: 34px auto; display: block; }
  .aurora-pane { width: 74vw; right: 5vw; }
  .mixed-fragment, .vellum-map, .playtest-strip, .revision-stack, .artifact { display: none; }
  h1 { font-size: 78px; }
}