:root {
  /* Compliance language: engraved instrument labeling instead overused mono developer look. navigational labels Grotesk** */
  --midnight: #07111F;
  --vellum: #E9DFC8;
  --lapis: #2546A8;
  --vermilion: #D4492E;
  --verdigris: #5F8C7A;
  --gold: #D6A84B;
  --violet: #2B213F;
  --display: "Cormorant Garamond", serif;
  --text: "Literata", serif;
  --label: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--midnight); }
body {
  margin: 0;
  color: var(--vellum);
  background:
    radial-gradient(circle at 78% 12%, rgba(214, 168, 75, .16), transparent 24rem),
    radial-gradient(circle at 12% 42%, rgba(37, 70, 168, .25), transparent 36rem),
    linear-gradient(135deg, var(--midnight), var(--violet) 52%, #050912);
  font-family: var(--text);
  overflow-x: hidden;
}

.night-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(233,223,200,.35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(214,168,75,.25) 0 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(233,223,200,.025) 0 1px, transparent 1px 6px);
  background-size: 130px 130px, 180px 180px, 8px 8px;
  mix-blend-mode: screen;
}

.bookmark-path { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bookmark-path span {
  position: absolute; left: -14vw; top: -4vh; width: 26px; height: 145vh;
  background: linear-gradient(90deg, #9d281b, var(--vermilion), #7d1d18);
  transform: rotate(-34deg); transform-origin: top center;
  box-shadow: 0 0 0 1px rgba(233,223,200,.16), 0 0 34px rgba(212,73,46,.2);
  opacity: .78;
}

.folio-edge {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 10;
  display: flex; flex-direction: column; gap: 8px; font-family: var(--label);
}
.folio-edge a {
  color: var(--vellum); text-decoration: none; writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 7px; background: rgba(43,33,63,.58); border: 1px solid rgba(233,223,200,.18);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.folio-edge a:hover, .folio-edge a.active { transform: translateX(-8px); background: var(--vellum); color: var(--midnight); }

.folio { position: relative; min-height: 100vh; padding: 8vh 8vw; z-index: 1; overflow: hidden; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: .9; margin: 0; }
h2 { font-size: clamp(4rem, 11vw, 10rem); letter-spacing: -.045em; }
p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.65; }
.kicker, .chapter-mark { font-family: var(--label); text-transform: uppercase; letter-spacing: .22em; color: var(--gold); font-size: .76rem; }

.closed-folio { display: grid; place-items: center; }
.star-field { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(233,223,200,.65) 0 1px, transparent 1.6px); background-size: 90px 90px; opacity: .28; }
.closed-book { position: relative; width: min(72vw, 980px); height: min(72vh, 640px); perspective: 1300px; filter: drop-shadow(0 42px 60px rgba(0,0,0,.55)); }
.cover-slab {
  position: absolute; inset: 0 8%; background: var(--vellum); color: var(--midnight);
  border: 1px solid rgba(214,168,75,.55); clip-path: polygon(3% 0, 100% 2%, 96% 100%, 0 96%);
  display: grid; place-items: center; align-content: center; gap: 1rem;
  transform: rotateY(-8deg) rotateZ(-1deg); animation: folioOpen 1.9s cubic-bezier(.2,.8,.2,1) both;
}
.cover-slab:before { content:""; position:absolute; inset:18px; border:1px solid rgba(95,140,122,.45); clip-path: polygon(0 0,96% 3%,100% 96%,4% 100%); }
.page-edge { position: absolute; top: 4%; bottom: 4%; width: 9%; background: repeating-linear-gradient(90deg, #cdbf9f 0 2px, var(--vellum) 2px 5px); opacity: .92; }
.edge-left { left: 1%; transform: skewY(-5deg); } .edge-right { right: 1%; transform: skewY(5deg); }
.illumination { position: relative; width: 220px; height: 220px; display: grid; place-items: center; color: var(--lapis); }
.initial-s { font-family: var(--display); font-size: 13rem; font-weight: 700; line-height: .7; text-shadow: 0 0 22px rgba(37,70,168,.18); }
.initial-map { position: absolute; inset: 0; fill: none; stroke: var(--gold); stroke-width: 2; }
.initial-map circle { fill: var(--gold); stroke: none; } .initial-map .bracket { stroke: var(--vermilion); }
.closed-book h1 { color: var(--lapis); font-size: clamp(4.8rem, 12vw, 11rem); letter-spacing: -.06em; }
.closed-book p { max-width: 520px; text-align: center; margin: 0; color: rgba(7,17,31,.78); }
.seal-note { position: absolute; left: 7vw; bottom: 10vh; color: var(--gold); font-family: var(--label); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; }

.lumen-desk { display: grid; grid-template-columns: 80px minmax(320px, 1fr) minmax(260px, .55fr); gap: 4vw; align-items: center; background: radial-gradient(circle at 58% 45%, rgba(214,168,75,.18), transparent 28rem); }
.marginal-rail { height: 72vh; border-right: 1px solid rgba(95,140,122,.55); color: var(--verdigris); display: flex; flex-direction: column; align-items: center; gap: 3rem; padding-top: 2rem; font-family: var(--label); }
.marginal-rail span { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; }
.vellum-sheet, .vellum-scrap {
  background: linear-gradient(135deg, rgba(233,223,200,.96), rgba(233,223,200,.82)); color: var(--midnight);
  border: 1px solid rgba(214,168,75,.42); box-shadow: 0 28px 60px rgba(0,0,0,.35); position: relative;
}
.primary-sheet { min-height: 62vh; padding: 6vw 5vw; clip-path: polygon(0 2%, 97% 0, 100% 95%, 4% 100%); }
.primary-sheet h2 { color: var(--lapis); font-size: clamp(4rem, 9vw, 8rem); }
.hidden-annotation { color: var(--vermilion); border-left: 2px solid var(--vermilion); padding-left: 1rem; opacity: .45; transition: opacity .3s ease, filter .3s ease; filter: blur(1px); }
.lumen-desk.lens-active .hidden-annotation { opacity: 1; filter: blur(0); }
.vellum-scrap { position: absolute; padding: 1.2rem; font-family: var(--label); letter-spacing: .04em; font-size: .8rem; }
.scrap-a { right: 9vw; top: 18vh; transform: rotate(5deg); } .scrap-b { right: 18vw; bottom: 13vh; transform: rotate(-7deg); }
.glass-lens { position: absolute; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(233,223,200,.65); background: radial-gradient(circle at 36% 30%, rgba(233,223,200,.35), rgba(37,70,168,.13) 45%, rgba(95,140,122,.1)); backdrop-filter: blur(2px); box-shadow: inset 0 0 32px rgba(233,223,200,.22), 0 18px 40px rgba(0,0,0,.32); left: 58%; top: 37%; display: grid; place-items: center; color: var(--gold); font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.desk-diagram { position: absolute; right: 5vw; bottom: 4vh; width: 52vw; opacity: .7; fill: var(--gold); stroke: var(--verdigris); stroke-width: 2; }
.draw-line { fill: none; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawPath 5s ease infinite alternate; } .draw-line.muted { stroke: var(--lapis); opacity: .55; }

.question-astrolabe { display: grid; grid-template-columns: .85fr 1fr; gap: 4vw; align-items: center; }
.instrument-copy p { max-width: 560px; color: rgba(233,223,200,.82); }
.astrolabe-wrap { position: relative; display: grid; place-items: center; }
.astrolabe-svg { width: min(76vw, 620px); filter: drop-shadow(0 0 30px rgba(214,168,75,.13)); }
.ring { fill: none; stroke: var(--verdigris); stroke-width: 2; stroke-dasharray: 2 9; }
.ring-mid { stroke: var(--gold); } .ring-inner { stroke: var(--lapis); }
.arm line, .ticks { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; fill: none; }
.arm circle { fill: var(--vermilion); stroke: var(--vellum); stroke-width: 1; }
.arm-one { transform-origin: 260px 260px; animation: rotateOne 16s linear infinite; }
.arm-two { transform-origin: 260px 260px; animation: rotateTwo 23s linear infinite reverse; }
.arm-three { transform-origin: 260px 260px; animation: rotateThree 31s linear infinite; }
.astrolabe-svg text { font: 600 16px var(--label); fill: var(--vellum); letter-spacing: .08em; text-transform: uppercase; }
.alignment-phrase { position: absolute; bottom: 9%; background: rgba(7,17,31,.72); border: 1px solid rgba(214,168,75,.5); padding: .8rem 1.2rem; color: var(--gold); font-family: var(--label); letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; opacity: .7; }

.marginalia-engine { display: grid; grid-template-columns: 1fr 360px; gap: 5vw; align-items: center; background: linear-gradient(100deg, rgba(233,223,200,.93) 0 55%, transparent 55%); color: var(--midnight); }
.page-column { max-width: 760px; position: relative; }
.page-column h2 { color: var(--violet); }
.oversized-glyph { position: absolute; left: -5vw; top: -18vh; font-family: var(--display); font-size: 19rem; color: rgba(37,70,168,.13); }
.note-rail { display: flex; flex-direction: column; gap: 1rem; }
.gloss-note { text-align: left; border: 1px solid rgba(233,223,200,.22); background: rgba(7,17,31,.72); color: var(--vellum); padding: 1rem; font-family: var(--text); font-size: 1rem; cursor: pointer; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.gloss-note span { display: block; color: var(--vermilion); font-family: var(--label); letter-spacing: .2em; font-size: .7rem; margin-bottom: .45rem; }
.gloss-note:hover, .gloss-note.active { transform: translateX(-22px); border-color: var(--gold); background: rgba(43,33,63,.92); }
.bloom-panel { position: absolute; right: 7vw; bottom: 9vh; max-width: 420px; background: var(--vellum); color: var(--vermilion); border-left: 4px solid var(--vermilion); padding: 1.2rem 1.4rem; box-shadow: 0 22px 50px rgba(0,0,0,.28); font-family: var(--display); font-size: 1.7rem; transform: rotate(-2deg); }

.proof-orchard { background: radial-gradient(circle at 50% 60%, rgba(95,140,122,.17), transparent 32rem), var(--midnight); }
.orchard-title { position: relative; z-index: 2; max-width: 920px; }
.orchard-title h2 { color: var(--vellum); }
.orchard-svg { position: absolute; inset: auto 0 0 8vw; width: 86vw; height: 72vh; overflow: visible; }
.branch { fill: none; stroke: var(--verdigris); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: growBranch 4.5s ease forwards; }
.trunk { stroke-width: 4; stroke: rgba(214,168,75,.75); }
.leaf-cluster text { font: 600 20px var(--label); fill: var(--vellum); letter-spacing: .08em; }
.fruit { fill: var(--gold); animation: fruitPulse 2.8s ease-in-out infinite; }
.knot { fill: var(--vermilion); animation: knotPulse 1.7s ease-in-out infinite; }
.orchard-caption { position: absolute; right: 8vw; bottom: 9vh; max-width: 430px; color: rgba(233,223,200,.76); }

.open-index { display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, rgba(214,168,75,.16), transparent 24rem); }
.index-stack { width: min(920px, 82vw); background: rgba(233,223,200,.94); color: var(--midnight); padding: 5vw; clip-path: polygon(2% 0, 100% 4%, 96% 100%, 0 96%); box-shadow: 0 38px 80px rgba(0,0,0,.42); }
.index-stack h2 { color: var(--lapis); }
.index-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.index-card { min-height: 160px; color: var(--midnight); text-decoration: none; background: #f4ecd9; border: 1px solid rgba(95,140,122,.5); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(var(--tilt, -1deg)); transition: transform .35s ease, box-shadow .35s ease; }
.index-card:nth-child(2) { --tilt: 1.5deg; } .index-card:nth-child(3) { --tilt: -2.2deg; }
.index-card:hover { transform: translateY(-12px) rotate(0); box-shadow: 0 20px 32px rgba(7,17,31,.18); }
.index-card span, .index-card em { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--verdigris); font-style: normal; }
.index-card strong { font-family: var(--display); font-size: 2rem; color: var(--vermilion); font-weight: 600; }
.wax-seal { position: absolute; right: 12vw; bottom: 11vh; width: 92px; height: 92px; border-radius: 50%; background: var(--vermilion); display: grid; place-items: center; font: 700 4rem var(--display); color: var(--vellum); box-shadow: inset 0 0 18px rgba(0,0,0,.28), 0 12px 24px rgba(0,0,0,.32); }

@keyframes folioOpen { from { transform: rotateY(-34deg) rotateZ(-3deg) translateX(80px); opacity: .55; } to { transform: rotateY(-8deg) rotateZ(-1deg); opacity: 1; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes rotateOne { to { transform: rotate(360deg); } }
@keyframes rotateTwo { to { transform: rotate(360deg); } }
@keyframes rotateThree { to { transform: rotate(360deg); } }
@keyframes growBranch { to { stroke-dashoffset: 0; } }
@keyframes fruitPulse { 50% { filter: drop-shadow(0 0 12px var(--gold)); transform: scale(1.08); } }
@keyframes knotPulse { 50% { filter: drop-shadow(0 0 10px var(--vermilion)); opacity: .65; } }

@media (max-width: 860px) {
  .folio { padding: 8vh 7vw; }
  .lumen-desk, .question-astrolabe, .marginalia-engine { grid-template-columns: 1fr; }
  .marginal-rail { display: none; }
  .index-cards { grid-template-columns: 1fr; }
  .folio-edge { display: none; }
  .scrap-a, .scrap-b, .orchard-caption { position: relative; right: auto; top: auto; bottom: auto; margin: 1rem 0; }
}