:root {
  --burgundy: #5A1025;
  --cream: #F2E3C6;
  --black: #171113;
  --rose: #9B2F47;
  --amber: #D99A3D;
  --mauve: #B8A0A4;
  --violet: #24162D;
  --display: 'EB Garamond', Garamond, Georgia, serif;
  --swash: 'Cormorant Garamond', Garamond, Georgia, serif;
  --stamp: 'Archivo', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--black);
  font-family: var(--display);
  overflow-x: hidden;
  cursor: none;
}

.wall-noise, body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.wall-noise {
  opacity: .18;
  background-image:
    radial-gradient(circle at 18% 33%, rgba(242,227,198,.3) 0 1px, transparent 1px),
    radial-gradient(circle at 71% 62%, rgba(23,17,19,.8) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(217,154,61,.08) 49% 50%, transparent 51%);
  background-size: 17px 19px, 23px 29px, 190px 170px;
  mix-blend-mode: overlay;
}
body::before {
  background: radial-gradient(circle at 75% 18%, rgba(217,154,61,.2), transparent 18rem), radial-gradient(circle at 30% 75%, rgba(155,47,71,.35), transparent 22rem);
  z-index: 0;
}
body::after {
  background: repeating-linear-gradient(90deg, rgba(242,227,198,.035) 0 1px, transparent 1px 90px), repeating-linear-gradient(0deg, rgba(242,227,198,.025) 0 1px, transparent 1px 84px);
  z-index: 1;
}

.cursor-moon {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: -9px 0 0 -3px var(--black), 0 0 22px rgba(217,154,61,.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 40;
  opacity: .85;
}

.wall-sequence { position: relative; z-index: 3; }
.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(22px, .4fr) repeat(10, minmax(0, 1fr)) minmax(22px, .5fr);
  grid-template-rows: repeat(8, minmax(70px, auto));
  padding: 6vh 0;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}
.wall-sequence { scroll-snap-type: y proximity; }
.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  left: 2.4rem;
  top: 2rem;
  font-family: var(--stamp);
  letter-spacing: .22em;
  font-size: .68rem;
  color: var(--amber);
  z-index: 3;
}

.label, .stamp {
  font-family: var(--stamp);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  font-weight: 800;
}
.stamp-top { grid-column: 2 / 6; grid-row: 1; color: var(--amber); transform: rotate(-2deg); }

.hero-wall {
  background:
    linear-gradient(128deg, rgba(36,22,45,.92), rgba(90,16,37,.88) 42%, rgba(23,17,19,.98)),
    repeating-linear-gradient(0deg, rgba(184,160,164,.08) 0 9px, transparent 9px 18px);
}
.spray-field { position: absolute; inset: 0; background: radial-gradient(circle at 20% 44%, rgba(242,227,198,.16) 0 2px, transparent 3px), radial-gradient(circle at 62% 13%, rgba(217,154,61,.19) 0 1px, transparent 2px); background-size: 34px 31px, 57px 53px; opacity: .5; }
.wordmark {
  grid-column: 2 / 11;
  grid-row: 2 / 5;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5.2rem, 16vw, 16rem);
  line-height: .72;
  font-weight: 800;
  letter-spacing: -.08em;
  color: var(--cream);
  text-shadow: 9px 8px 0 var(--rose), -4px -3px 0 var(--black);
  transform: translateX(-4vw) rotate(-3deg);
  z-index: 2;
}
.wordmark span { color: var(--amber); }

.lotus-art svg { width: 100%; height: auto; filter: drop-shadow(18px 24px 0 rgba(23,17,19,.55)); }
.hero-lotus { grid-column: 5 / 12; grid-row: 2 / 8; z-index: 4; transform: rotate(5deg); transform-style: preserve-3d; }
.paste-shadow { fill: var(--cream); opacity: .88; }
.petal { fill: var(--rose); stroke: var(--black); stroke-width: 7; }
.petal-a, .petal-f { fill: var(--burgundy); }
.petal-c, .petal-e { transform: translate(7px, 8px); opacity: .92; }
.lotus-base { fill: var(--cream); stroke: var(--black); stroke-width: 7; }
.halftone { opacity: .8; mix-blend-mode: multiply; }
.crack, .registration { fill: none; stroke: var(--black); stroke-width: 6; stroke-linecap: square; }
.registration { stroke: var(--amber); stroke-width: 5; }

.torn-panel, .large-fragment, .final-paste, .notebook-copy, .diagram, .tape-note {
  background: var(--cream);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 12px 14px 0 rgba(23,17,19,.72);
  clip-path: polygon(1% 5%, 96% 0, 100% 88%, 93% 100%, 8% 96%, 0 78%);
}
.intro-note { grid-column: 2 / 5; grid-row: 5 / 8; padding: 1.4rem; transform: rotate(4deg); z-index: 6; touch-action: none; }
.intro-note p { font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: .82; margin: .4rem 0 1rem; color: var(--burgundy); }
.intro-note small { font-size: 1.08rem; }

.star-map { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.star-map i {
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px;
  background: var(--amber); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: flicker 2.8s infinite var(--d); box-shadow: 0 0 20px var(--amber);
}
@keyframes flicker { 0%, 100% { opacity: .25; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.35) rotate(20deg); } 73% { opacity: .55; } }

.constellation-nav { position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 1rem; }
.constellation-nav a { width: 32px; height: 32px; display: grid; place-items: center; color: var(--black); background: var(--amber); border: 2px solid var(--black); border-radius: 50%; text-decoration: none; font-family: var(--stamp); text-transform: uppercase; box-shadow: 4px 4px 0 var(--rose); transition: transform .25s ease, background .25s ease; }
.constellation-nav a.active, .constellation-nav a:hover { transform: translateX(-8px) rotate(-12deg); background: var(--cream); }
.nav-line { position: absolute; left: 15px; top: 10px; width: 2px; height: calc(100% - 20px); background: linear-gradient(var(--amber), transparent 30%, var(--cream)); z-index: -1; opacity: .45; }

.brick-layer { background: linear-gradient(90deg, var(--black), var(--burgundy) 55%, var(--violet)); }
.brick-layer::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 42px, rgba(242,227,198,.07) 43px 45px), repeating-linear-gradient(90deg, transparent 0 92px, rgba(23,17,19,.4) 93px 96px); z-index: -1; }
.pole-strip { grid-column: 2 / 3; grid-row: 2 / 8; display: flex; flex-direction: column; gap: 1rem; transform: rotate(2deg); }
.pole-strip span { writing-mode: vertical-rl; background: var(--rose); border: 2px solid var(--black); padding: 1rem .5rem; font-family: var(--stamp); letter-spacing: .15em; color: var(--cream); }
.large-fragment { grid-column: 4 / 10; grid-row: 2 / 6; padding: clamp(1.4rem, 4vw, 4rem); transform: rotate(-2deg); }
h2 { margin: .2rem 0 1rem; font-size: clamp(3.5rem, 9vw, 9rem); line-height: .77; color: var(--burgundy); font-weight: 800; }
h2 em { font-family: var(--swash); color: var(--rose); }
.large-fragment p, .notebook-copy p, .final-paste p { font-size: clamp(1.2rem, 2.3vw, 2rem); line-height: 1.12; }
.ink-reveal { background-image: linear-gradient(100deg, rgba(155,47,71,.18), transparent 40%), radial-gradient(circle at 75% 25%, rgba(217,154,61,.3), transparent 25%); }

.flip-card { perspective: 900px; cursor: pointer; }
.poster-flip { grid-column: 8 / 12; grid-row: 5 / 8; height: 230px; transform: rotate(7deg); z-index: 5; }
.flip-inner { position: relative; width: 100%; height: 100%; display: block; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.19,1,.22,1); }
.flip-card.flipped .flip-inner, .flip-card:hover .flip-inner { transform: rotateY(180deg) rotateZ(-1deg); }
.flip-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.2rem; backface-visibility: hidden; border: 3px solid var(--black); background: var(--cream); color: var(--burgundy); box-shadow: 10px 10px 0 rgba(23,17,19,.7); clip-path: polygon(3% 0, 100% 7%, 94% 100%, 0 91%); }
.flip-front strong { font-family: var(--swash); font-size: 2.7rem; line-height: .9; text-align: center; }
.flip-back { transform: rotateY(180deg); background: var(--violet); color: var(--amber); font-family: var(--stamp); font-size: .95rem; text-align: center; }
.closed-stencil { grid-column: 3 / 6; grid-row: 6 / 8; align-self: end; border: 4px dashed var(--cream); color: var(--cream); padding: 2rem; font-family: var(--stamp); font-size: 2.3rem; letter-spacing: .16em; transform: rotate(-9deg); }
.closed-stencil span { font-size: .7rem; color: var(--amber); }

.star-chart { background: radial-gradient(circle at 60% 20%, rgba(217,154,61,.16), transparent 22rem), linear-gradient(140deg, var(--violet), var(--black) 62%, var(--burgundy)); }
.constellation-board { grid-column: 2 / 11; grid-row: 2 / 7; position: relative; border: 2px solid rgba(242,227,198,.35); transform: rotate(1deg); background: rgba(23,17,19,.34); }
.scratched-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.scratched-lines path { fill: none; stroke: var(--mauve); stroke-width: 3; stroke-dasharray: 9 13; opacity: .72; }
.celestial-sticker { position: absolute; width: 112px; height: 112px; left: 22%; top: 34%; background: transparent; border: 0; padding: 0; font: inherit; }
.celestial-sticker .flip-face { border-radius: 50%; clip-path: none; font-size: 3rem; }
.sticker-two { left: 69%; top: 18%; width: 92px; height: 92px; transform: rotate(13deg); }
blockquote { grid-column: 6 / 12; grid-row: 6 / 8; margin: 0; font-family: var(--swash); font-size: clamp(3rem, 8vw, 8rem); line-height: .76; color: var(--cream); text-shadow: 4px 4px 0 var(--rose); transform: rotate(-3deg); z-index: 3; }
.margin-code { grid-column: 2 / 5; grid-row: 6 / 8; align-self: center; font-family: var(--stamp); color: var(--amber); letter-spacing: .05em; transform: rotate(5deg); }

.notebook-layer { background: linear-gradient(102deg, var(--cream) 0 38%, var(--mauve) 38% 44%, var(--burgundy) 44% 100%); color: var(--black); }
.diagram { grid-column: 2 / 6; grid-row: 2 / 7; padding: 2rem; transform: rotate(-5deg); }
.petal-diagram { height: 360px; position: relative; margin-top: 1.4rem; }
.petal-diagram i { position: absolute; left: 38%; top: 22%; width: 82px; height: 210px; background: var(--rose); border: 3px solid var(--black); border-radius: 80% 20% 80% 20%; transform-origin: 50% 90%; }
.petal-diagram i:nth-child(1) { transform: rotate(-48deg); background: var(--burgundy); }
.petal-diagram i:nth-child(2) { transform: rotate(-22deg); }
.petal-diagram i:nth-child(3) { transform: rotate(0deg); background: var(--cream); }
.petal-diagram i:nth-child(4) { transform: rotate(24deg); }
.petal-diagram i:nth-child(5) { transform: rotate(50deg); background: var(--burgundy); }
.notebook-copy { grid-column: 6 / 12; grid-row: 2 / 5; padding: 2.5rem; transform: rotate(2deg); }
.tape-note { grid-column: 8 / 10; grid-row: 5 / 8; padding: 1.5rem; background: var(--amber); transform: rotate(-8deg); touch-action: none; }
.tape-note p { font-size: 2.1rem; margin: .5rem 0; line-height: .9; }
.petal-secret { grid-column: 5 / 8; grid-row: 6 / 8; height: 145px; transform: rotate(8deg); }

.dawn-wall { background: linear-gradient(180deg, var(--violet), var(--burgundy) 46%, var(--mauve)); }
.small-seal { grid-column: 2 / 6; grid-row: 3 / 7; transform: rotate(-7deg); }
.small-seal svg path { fill: var(--cream); stroke: var(--black); stroke-width: 7; }
.final-paste { grid-column: 6 / 11; grid-row: 3 / 6; padding: clamp(1.5rem, 4vw, 4rem); transform: rotate(2deg); }
.final-paste h2 { font-size: clamp(4rem, 11vw, 11rem); letter-spacing: -.07em; }
.moths i { position: absolute; width: 18px; height: 10px; background: var(--black); border-radius: 50%; box-shadow: 0 0 18px var(--amber); animation: moth 5s infinite ease-in-out; }
.moths i:nth-child(1) { left: 68%; top: 26%; }
.moths i:nth-child(2) { left: 78%; top: 41%; animation-delay: 1.3s; }
.moths i:nth-child(3) { left: 58%; top: 58%; animation-delay: 2.2s; }
@keyframes moth { 0%,100% { transform: translate(0,0) rotate(0deg); } 45% { transform: translate(22px,-34px) rotate(38deg); } 70% { transform: translate(-12px,14px) rotate(-22deg); } }

.draggable-note.dragging { z-index: 30; transition: none; filter: saturate(1.2) brightness(1.04); }
[data-tilt] { transition: transform .25s ease; }

@media (max-width: 800px) {
  body { cursor: auto; }
  .cursor-moon { display: none; }
  .constellation-nav { right: .5rem; transform: translateY(-50%) scale(.82); }
  .chapter { grid-template-columns: 1rem repeat(6, 1fr) 1rem; grid-template-rows: repeat(10, minmax(58px, auto)); }
  .wordmark { grid-column: 2 / 8; grid-row: 2 / 4; }
  .hero-lotus { grid-column: 2 / 8; grid-row: 4 / 8; }
  .intro-note, .large-fragment, .notebook-copy, .final-paste { grid-column: 2 / 8; }
  .intro-note { grid-row: 7 / 10; }
  .pole-strip { display: none; }
  .large-fragment { grid-row: 2 / 5; }
  .poster-flip { grid-column: 2 / 6; grid-row: 6 / 8; }
  .closed-stencil { grid-column: 4 / 8; grid-row: 8 / 10; }
  .constellation-board { grid-column: 2 / 8; }
  blockquote { grid-column: 2 / 8; grid-row: 6 / 8; }
  .margin-code { grid-column: 2 / 7; grid-row: 8; }
  .diagram { grid-column: 2 / 8; grid-row: 2 / 5; }
  .notebook-copy { grid-row: 5 / 7; }
  .tape-note { grid-column: 2 / 5; grid-row: 8 / 10; }
  .petal-secret { grid-column: 5 / 8; grid-row: 8 / 10; }
  .small-seal { grid-column: 2 / 8; grid-row: 2 / 5; }
  .final-paste { grid-row: 5 / 8; }
}