:root {
  --burgundy: #5A1024;
  --wine: #7B1E33;
  --parchment: #F4E8D2;
  --ivory: #FFF8EA;
  --laurel: #6F7F4C;
  --brass: #C49A4A;
  --umber: #2A1812;
  --serif: "Cormorant Garamond", serif;
  --hand: "Caveat", cursive;
  --body: "Literata", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--umber);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 0%, rgba(196, 154, 74, .22), transparent 30rem),
    radial-gradient(circle at 88% 12%, rgba(111, 127, 76, .16), transparent 28rem),
    linear-gradient(115deg, rgba(255, 248, 234, .92), rgba(244, 232, 210, .96)),
    var(--parchment);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(90, 16, 36, .025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(42, 24, 18, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  mix-blend-mode: multiply;
  z-index: 1;
}

.lamp-warmth {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 10%, rgba(255, 248, 234, .98), rgba(196, 154, 74, .28) 22%, transparent 54%);
  opacity: 0;
  animation: lampWarm 2.2s ease forwards, brassBreathe 8s ease-in-out infinite 2.2s;
  z-index: 2;
}

.folio-index {
  position: fixed;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .65rem .35rem;
  border-left: 1px solid rgba(90, 16, 36, .28);
}

.index-mark {
  position: relative;
  width: 3rem;
  min-height: 4.2rem;
  padding: .55rem .2rem;
  color: var(--burgundy);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(255, 248, 234, .9), rgba(244, 232, 210, .7));
  border: 1px solid rgba(196, 154, 74, .45);
  border-left: 5px solid var(--wine);
  box-shadow: 0 10px 28px rgba(42, 24, 18, .11);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), background .7s ease;
}

.index-mark span { display: block; font-weight: 500; }
.index-mark em { writing-mode: vertical-rl; font-style: normal; opacity: .72; margin-top: .45rem; }
.index-mark.is-active { transform: translateX(.42rem); background: var(--ivory); border-left-color: var(--brass); }

.manuscript { position: relative; z-index: 3; }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 7rem clamp(2rem, 8vw, 8rem);
  isolation: isolate;
}

.scene::after {
  content: attr(data-argument);
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: 2rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(90, 16, 36, .45);
  text-transform: uppercase;
}

.hero-scene { min-height: 100vh; }

.conservatory-arch {
  position: absolute;
  top: 6vh;
  width: 34vw;
  height: 82vh;
  border: 1px solid rgba(196, 154, 74, .28);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  opacity: .42;
  filter: blur(.2px);
}
.arch-left { left: 13vw; }
.arch-right { right: 8vw; transform: scaleX(.82); }

.parchment-panel {
  position: relative;
  width: min(78vw, 980px);
  min-height: 52vh;
  padding: clamp(2.2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 248, 234, .95), transparent 22rem),
    linear-gradient(145deg, rgba(255, 248, 234, .94), rgba(244, 232, 210, .92));
  border: 1px solid rgba(196, 154, 74, .58);
  box-shadow: 0 34px 90px rgba(42, 24, 18, .22), inset 0 0 0 12px rgba(255, 248, 234, .35);
  transform: rotate(-1.2deg);
}

.hero-panel::before,
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(90, 16, 36, .18);
  pointer-events: none;
}
.hero-panel::after { inset: 2rem; border-color: rgba(196, 154, 74, .35); transform: rotate(.55deg); }

.folio-label {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wine);
}

.wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--burgundy);
  font-family: var(--hand);
  font-size: clamp(5.8rem, 16vw, 13.5rem);
  line-height: .75;
  letter-spacing: -.045em;
  text-shadow: 0 6px 0 rgba(196, 154, 74, .16);
  transform: rotate(-2deg);
}

.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.wordmark::before { color: var(--wine); transform: translate(-2px, 1px); }
.wordmark::after { color: var(--brass); transform: translate(2px, -1px); }
.wordmark.glitching::before,
.wordmark.glitching::after { animation: manuscriptGlitch .58s steps(2, end) 1; }

.ink-write {
  display: inline-block;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: .045em solid var(--burgundy);
  animation: writeInk 2.35s cubic-bezier(.45,0,.1,1) .95s forwards, quillBlink .8s steps(1) 3.2s 3 forwards;
}

.hero-copy {
  max-width: 36rem;
  margin: 2.1rem 0 0 auto;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.65;
  color: rgba(42, 24, 18, .86);
}

.ritual-caption {
  max-width: 30rem;
  margin: 1.15rem 0 0 auto;
  font-family: var(--mono);
  font-size: .58rem;
  line-height: 1.55;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(90, 16, 36, .48);
}

.marginalia,
.hand-note {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--laurel);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  transform: rotate(-6deg);
}

.hero-annotation { position: absolute; right: 4rem; top: 2.4rem; opacity: 0; animation: noteAppear .8s ease 3.6s forwards; }
.glitch-note::before { content: attr(data-note); position: absolute; color: var(--wine); transform: translate(2px, 0); opacity: .24; clip-path: inset(42% 0 36% 0); }

.relic { position: absolute; transform-style: preserve-3d; will-change: transform; }
.leaf-cluster { width: 13rem; height: 13rem; filter: drop-shadow(0 22px 18px rgba(42, 24, 18, .18)); }
.hero-leaf { right: 13vw; top: 9vh; animation: driftIn 2.8s cubic-bezier(.25,.75,.2,1) forwards, relicFloat 8s ease-in-out infinite 2.6s; opacity: 0; }
.leaf-cluster span {
  position: absolute;
  width: 5.8rem;
  height: 2.35rem;
  background: radial-gradient(circle at 28% 35%, #FFF8EA 0 7%, #6F7F4C 32%, #4f6336 100%);
  border-radius: 100% 0 100% 0;
  transform-origin: 100% 50%;
  box-shadow: inset -9px -8px 16px rgba(42, 24, 18, .12), 0 9px 16px rgba(42, 24, 18, .12);
}
.leaf-cluster span:nth-child(1) { left: 4rem; top: 1rem; transform: rotate(-54deg); }
.leaf-cluster span:nth-child(2) { left: 5.2rem; top: 3.1rem; transform: rotate(-24deg); }
.leaf-cluster span:nth-child(3) { left: 5.4rem; top: 5.5rem; transform: rotate(12deg); }
.leaf-cluster span:nth-child(4) { left: 4.4rem; top: 7.8rem; transform: rotate(44deg); }
.leaf-cluster span:nth-child(5) { left: 2.6rem; top: 9.4rem; transform: rotate(78deg); }

.branch-gavel { left: 9vw; bottom: 13vh; width: 16rem; height: 7rem; animation: driftIn 2.6s ease .35s forwards, relicFloat 9s ease-in-out infinite 2.6s reverse; opacity: 0; }
.branch-gavel i { position: absolute; display: block; background: linear-gradient(90deg, #6b3d22, var(--umber)); box-shadow: 0 18px 24px rgba(42,24,18,.18); }
.branch-gavel i:nth-child(1) { width: 14rem; height: 1.1rem; left: 0; top: 3.2rem; border-radius: 1rem; transform: rotate(-18deg); }
.branch-gavel i:nth-child(2) { width: 5rem; height: 3rem; right: .8rem; top: 1.2rem; border-radius: 1.5rem; transform: rotate(-18deg); background: linear-gradient(135deg, var(--brass), #6b3d22); }
.branch-gavel i:nth-child(3) { width: 1rem; height: 5rem; left: 2.6rem; top: .9rem; border-radius: 1rem; transform: rotate(22deg); background: var(--laurel); }

.silk-tab {
  position: absolute;
  padding: .7rem 1.8rem;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--wine), var(--burgundy));
  box-shadow: 0 18px 34px rgba(90, 16, 36, .28);
}
.tab-one { right: 7vw; bottom: 26vh; transform: rotate(7deg); }
.tab-two { left: 22vw; top: 17vh; transform: rotate(-8deg); background: linear-gradient(135deg, var(--brass), var(--wine)); }

.evidence-slip {
  position: absolute;
  width: 14rem;
  padding: 1rem;
  background: rgba(255, 248, 234, .84);
  border: 1px solid rgba(196, 154, 74, .5);
  box-shadow: 0 18px 36px rgba(42, 24, 18, .14);
  transform: rotate(var(--r, 4deg));
}
.evidence-slip b { display: block; font-family: var(--mono); font-size: .7rem; color: var(--wine); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .45rem; }
.evidence-slip span { font-size: .86rem; line-height: 1.45; }
.slip-claim { --r: -7deg; left: 15vw; top: 18vh; }
.slip-counter { --r: 8deg; right: 17vw; bottom: 12vh; }
.slip-witness { --r: -5deg; left: 10vw; bottom: 17vh; }

.chapter-scene { grid-template-columns: minmax(18rem, 36rem) minmax(18rem, 44rem); gap: clamp(2rem, 8vw, 8rem); }
.chapter-copy { position: relative; z-index: 4; max-width: 38rem; padding: 2rem; }
.chapter-copy h2 {
  margin: 0 0 1.2rem;
  color: var(--burgundy);
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 8.5rem);
  font-weight: 700;
  line-height: .82;
  text-shadow: 0 5px 0 rgba(196, 154, 74, .16);
}
.chapter-copy p:not(.folio-label):not(.hand-note) { font-size: clamp(1.05rem, 1.75vw, 1.35rem); line-height: 1.72; }

.vellum-stack, .redaction-page, .open-notebook, .glass-specimen {
  position: relative;
  z-index: 3;
  box-shadow: 0 38px 92px rgba(42, 24, 18, .2);
}
.vellum-stack {
  width: min(38vw, 34rem);
  height: 62vh;
  background: linear-gradient(145deg, rgba(255,248,234,.92), rgba(244,232,210,.9));
  border: 1px solid rgba(196,154,74,.46);
  transform: rotate(-8deg);
}
.vellum-stack::before, .vellum-stack::after {
  content: "";
  position: absolute;
  inset: 1.8rem;
  border: 1px solid rgba(90,16,36,.16);
  transform: rotate(9deg);
  background: rgba(255,248,234,.36);
}
.vellum-stack::after { inset: 4.4rem 2.8rem 2.8rem 4.7rem; transform: rotate(-3deg); border-color: rgba(111,127,76,.25); }

.wax-orbit { position: absolute; left: 28vw; top: 22vh; z-index: 5; }
.wax-seal {
  width: 8rem;
  height: 8rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ivory);
  font-family: var(--hand);
  font-size: 1.9rem;
  background: radial-gradient(circle at 35% 28%, #a34b55, var(--wine) 45%, var(--burgundy) 100%);
  box-shadow: inset -12px -15px 24px rgba(42, 24, 18, .24), 0 20px 38px rgba(90, 16, 36, .22);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), filter .8s ease;
  animation: sealTurn 11s linear infinite;
}
.wax-seal:hover, .wax-seal.is-open { filter: saturate(1.2); transform: rotate(18deg) scale(1.04); }
.hidden-counter {
  position: absolute;
  left: 6rem;
  top: 5.5rem;
  width: 18rem;
  padding: 1rem 1.2rem;
  color: var(--burgundy);
  background: var(--ivory);
  border: 1px solid rgba(196,154,74,.5);
  box-shadow: 0 20px 40px rgba(42,24,18,.15);
  opacity: 0;
  transform: translateY(.7rem) rotate(2deg);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.hidden-counter.is-open { opacity: 1; transform: translateY(0) rotate(-3deg); }

.taxonomy-line { position: absolute; right: 13vw; bottom: 18vh; width: 35vw; height: 1px; background: var(--brass); transform: rotate(-18deg); opacity: .55; }
.taxonomy-line::before, .taxonomy-line::after { content:""; position:absolute; width: .65rem; height:.65rem; border: 1px solid var(--brass); border-radius: 50%; top: -.32rem; }
.taxonomy-line::before { left:0; } .taxonomy-line::after { right:0; }

.glass-specimen {
  width: min(42vw, 36rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255,248,234,.72), rgba(255,248,234,.28) 35%, rgba(111,127,76,.08) 70%), rgba(255,248,234,.32);
  border: 1px solid rgba(196,154,74,.52);
  backdrop-filter: blur(2px);
}
.glass-specimen::after { content:""; position:absolute; inset: 9%; border-radius:50%; border:1px solid rgba(255,248,234,.85); box-shadow: inset 18px 18px 28px rgba(255,248,234,.55); }
.fern-frond { width: 4px; height: 60%; background: var(--laurel); position: relative; transform: rotate(-18deg); }
.fern-frond i { position: absolute; left: 0; width: 9rem; height: 1.2rem; background: linear-gradient(90deg, var(--laurel), rgba(111,127,76,.12)); border-radius: 100% 0 100% 0; transform-origin: left center; }
.fern-frond i:nth-child(1){top:4%; transform:rotate(-50deg)} .fern-frond i:nth-child(2){top:17%; transform:rotate(42deg)} .fern-frond i:nth-child(3){top:30%; transform:rotate(-36deg)} .fern-frond i:nth-child(4){top:43%; transform:rotate(32deg)} .fern-frond i:nth-child(5){top:56%; transform:rotate(-29deg)} .fern-frond i:nth-child(6){top:69%; transform:rotate(25deg)} .fern-frond i:nth-child(7){top:82%; transform:rotate(-20deg)}
.currant-beads { position: absolute; right: 13vw; top: 18vh; width: 12rem; height: 12rem; }
.currant-beads span { position: absolute; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #d4888e, var(--wine) 55%, var(--burgundy)); box-shadow: 0 14px 22px rgba(90,16,36,.22); }
.currant-beads span:nth-child(1){left:1rem; top:2rem}.currant-beads span:nth-child(2){left:4rem; top:4.2rem}.currant-beads span:nth-child(3){left:7rem; top:2.8rem}.currant-beads span:nth-child(4){left:5.8rem; top:7rem}

.redaction-page {
  width: min(42vw, 37rem);
  min-height: 56vh;
  padding: 5rem 3rem;
  background: var(--ivory);
  border: 1px solid rgba(196,154,74,.5);
  transform: rotate(5deg);
}
.tear { display:block; height: .72rem; margin: 1.3rem 0; background: linear-gradient(90deg, transparent, var(--burgundy) 22%, var(--burgundy) 72%, transparent); clip-path: polygon(0 45%, 12% 25%, 20% 57%, 31% 33%, 43% 62%, 52% 30%, 66% 55%, 79% 28%, 100% 48%, 100% 100%, 0 100%); opacity:.85; }
.t2 { width: 72%; margin-left: 18%; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.t3 { width: 84%; background: linear-gradient(90deg, transparent, var(--wine), transparent); }
.typed-line { font-family: var(--mono); letter-spacing: .08em; color: var(--umber); text-transform: uppercase; font-size: .85rem; }
.typed-line.ghost { color: var(--brass); transform: translate(3px,-12px); opacity: .5; clip-path: inset(35% 0 42% 0); }

.open-notebook {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(76vw, 880px);
  min-height: 44vh;
  transform: rotate(-1deg);
}
.page { position: relative; padding: 3rem; background: linear-gradient(135deg, var(--ivory), var(--parchment)); border: 1px solid rgba(196,154,74,.5); }
.left-page { border-radius: 1rem 0 0 1rem; box-shadow: inset -18px 0 24px rgba(42,24,18,.06); }
.right-page { border-radius: 0 1rem 1rem 0; box-shadow: inset 18px 0 24px rgba(42,24,18,.06); }
.page p { font-family: var(--hand); font-size: clamp(2rem, 5vw, 4rem); color: var(--burgundy); margin: 0; }
.quill-line { position: absolute; left: 3rem; bottom: 5rem; width: 65%; height: 3px; background: var(--laurel); transform: rotate(-3deg); }
.seal-stamp { position: absolute; right: 3rem; bottom: 2.5rem; width: 6rem; height: 6rem; display:grid; place-items:center; border-radius:50%; color:var(--ivory); background: var(--wine); font-family: var(--hand); font-size:2.5rem; box-shadow: inset -10px -10px 18px rgba(42,24,18,.2); }
.closing-copy { grid-column: 1 / -1; text-align: center; margin-inline: auto; }
.cursor-quill { position: fixed; left: var(--cursor-x, 50%); top: var(--cursor-y, 50%); width: 1.6rem; height: 1.6rem; pointer-events: none; z-index: 30; opacity: .55; transform: translate(12px, 12px) rotate(-28deg); }
.cursor-quill::before { content:""; position:absolute; width: 1.3rem; height: .35rem; background: var(--brass); border-radius: 50% 0 50% 0; }
.cursor-quill::after { content:""; position:absolute; left: .1rem; top:.25rem; width:2.2rem; height:1px; background:var(--burgundy); transform: rotate(-20deg); }

.bloom-note { display: inline-block; transition: color .7s ease, text-shadow .7s ease, transform .7s ease; }
.bloom-note:hover, .bloom-note.ink-bloom { color: var(--wine); text-shadow: 0 0 18px rgba(123,30,51,.28); transform: rotate(-4deg) scale(1.04); }

.revealable { opacity: 0; transform: translateY(3rem) rotate(var(--entry-rotate, 0deg)); transition: opacity 1.2s ease, transform 1.35s cubic-bezier(.2,.8,.2,1); }
.revealable.is-visible { opacity: 1; transform: translateY(0) rotate(var(--entry-rotate, 0deg)); }

@keyframes lampWarm { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes brassBreathe { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.04); opacity: .92; } }
@keyframes writeInk { from { max-width: 0; } to { max-width: 8em; } }
@keyframes quillBlink { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: var(--burgundy); } }
@keyframes manuscriptGlitch { 0% { opacity: 0; clip-path: inset(0 0 0 0); } 28% { opacity: .72; clip-path: inset(18% 0 62% 0); } 48% { opacity: .35; clip-path: inset(62% 0 18% 0); } 72% { opacity: .62; clip-path: inset(38% 0 40% 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes noteAppear { to { opacity: 1; transform: rotate(-6deg) translateY(0); } }
@keyframes driftIn { from { opacity: 0; transform: translateY(2rem) rotate(-10deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes relicFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -1.1rem; } }
@keyframes sealTurn { to { rotate: 360deg; } }

@media (max-width: 900px) {
  .folio-index { left: .2rem; transform: translateY(-50%) scale(.86); transform-origin: left center; }
  .scene { padding: 6rem 1.25rem 6rem 4.2rem; }
  .chapter-scene { grid-template-columns: 1fr; }
  .parchment-panel { width: 100%; }
  .wordmark { font-size: clamp(4.6rem, 24vw, 8rem); }
  .vellum-stack, .glass-specimen, .redaction-page { width: min(76vw, 28rem); }
  .wax-orbit { left: 54vw; top: 13vh; transform: scale(.74); }
  .open-notebook { width: 84vw; grid-template-columns: 1fr; }
  .left-page, .right-page { border-radius: .8rem; }
  .evidence-slip, .silk-tab, .branch-gavel { display: none; }
}