:root {
  /* Design lexicon: Sans* Sans** from IntersectionObserver scroll-timeline-style thinking changes footnotes 4* 4** like warming custom properties earth palette Grotesk* Grotesk** */
  --loam: #17130D;
  --fern: #465C3B;
  --gold: #D8A84F;
  --vellum: #EFE3C6;
  --taupe: #A88F73;
  --mauve: #B47886;
  --ink: #2A2118;
  --lichen: #C7D889;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --body: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--loam); }

body {
  margin: 0;
  color: var(--vellum);
  background: var(--loam);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .34;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(216,168,79,.13) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 66%, rgba(239,227,198,.08) 0 1px, transparent 1px),
    linear-gradient(105deg, transparent 0 48%, rgba(199,216,137,.035) 49% 51%, transparent 52%);
  background-size: 42px 42px, 58px 58px, 100% 100%;
  mix-blend-mode: screen;
}

.folio { position: relative; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at var(--mx, 48%) var(--my, 45%), rgba(216,168,79,.19), transparent 34vw),
    radial-gradient(circle at 12% 18%, rgba(70,92,59,.24), transparent 36vw),
    var(--loam);
  transition: background-position .5s ease;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 7vw 9vw;
  z-index: -1;
  border: 1px solid rgba(168,143,115,.14);
  border-radius: 52% 48% 49% 51% / 2% 4% 3% 2%;
  opacity: .75;
}

.glyph-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 16px;
}

.glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--taupe);
  text-decoration: none;
  border: 1px solid rgba(168,143,115,.35);
  border-radius: 50% 42% 49% 46%;
  background: rgba(23,19,13,.45);
  font: 500 11px/1 var(--display);
  transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.glyph.active {
  color: var(--lichen);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(216,168,79,.26);
}

.table-scene {
  display: grid;
  grid-template-columns: minmax(230px, 34vw) 1fr;
  align-items: center;
  gap: 8vw;
  padding-left: 9vw;
}

.candle-wrap { position: relative; width: min(300px, 64vw); justify-self: center; }
.halo {
  position: absolute;
  inset: -28%;
  z-index: -1;
  background: radial-gradient(circle, rgba(216,168,79,.38), rgba(216,168,79,.1) 28%, transparent 60%);
  animation: halo-breathe 4s ease-in-out infinite;
}

.candle { width: 100%; filter: drop-shadow(0 0 28px rgba(216,168,79,.32)); }
.candle path, .candle ellipse, .fern-line path, .moth path, .moth circle, .twig path, .door-plate path, .door-plate circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.candle { color: var(--taupe); }
.flame.outer { fill: rgba(216,168,79,.32); stroke: var(--gold); animation: flame 1.8s ease-in-out infinite; transform-origin: 92px 86px; }
.flame.inner { fill: rgba(239,227,198,.48); stroke: var(--vellum); animation: flame 1.35s ease-in-out infinite reverse; transform-origin: 93px 72px; }
.smoke { color: var(--vellum); opacity: .34; stroke-width: 2; stroke-dasharray: 90; animation: smoke-rise 5s ease-in-out infinite; }
.smoke-two { animation-delay: -2s; opacity: .22; }
.candle-body { fill: rgba(239,227,198,.82); stroke: var(--taupe); }
.wax, .wax-drip { stroke: var(--ink); opacity: .52; }
.wax-pool { fill: rgba(168,143,115,.22); stroke: var(--taupe); }

.domain-block { max-width: 650px; transform: translateY(4vh); }
.chapter {
  margin: 0 0 22px;
  color: var(--gold);
  font: 600 12px/1 var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
}
h1, h2 { font-family: var(--display); letter-spacing: -.055em; margin: 0; }
h1 { font-size: clamp(58px, 10vw, 156px); line-height: .82; font-weight: 600; color: var(--vellum); }
h2 { font-size: clamp(40px, 6vw, 88px); line-height: .9; font-weight: 500; }
.warm-ink { color: var(--vellum); text-shadow: 0 0 24px rgba(216,168,79,.2); }
.thesis {
  width: min(420px, 75vw);
  margin: 28px 0 0 12vw;
  color: var(--taupe);
  font: italic 500 clamp(18px, 2vw, 25px)/1.35 var(--serif);
}

.glitch-word { position: relative; display: inline-block; }
.glitch-word::before, .glitch-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-word::before { color: var(--lichen); transform: translate(2px, -1px); clip-path: inset(16% 0 62% 0); }
.glitch-word::after { color: var(--mauve); transform: translate(-2px, 1px); clip-path: inset(64% 0 12% 0); }
.glitch-word.flicker::before, .glitch-word.flicker::after { animation: archive-glitch .55s steps(2, end); }

.fern-line { position: absolute; color: var(--fern); opacity: .7; stroke-dasharray: 680; stroke-dashoffset: 680; animation: draw-line 4.4s ease forwards 1s; }
.fern-left { left: 2vw; bottom: -1vh; height: 58vh; }

.margin-scene {
  background: var(--vellum);
  color: var(--ink);
}
.margin-scene::before {
  background:
    radial-gradient(circle at 72% 30%, rgba(216,168,79,.18), transparent 30vw),
    linear-gradient(90deg, rgba(239,227,198,1), rgba(239,227,198,.9));
}
.wide-vellum { position: absolute; inset: 13vh 14vw; border-left: 1px solid rgba(42,33,24,.15); }
.hover-thesis { position: absolute; top: 21vh; left: 25vw; width: min(620px, 58vw); }
.hover-thesis h2 { color: var(--ink); }
.annotation {
  position: absolute;
  width: min(320px, 72vw);
  padding: 22px 24px;
  background: rgba(239,227,198,.72);
  border: 1px solid rgba(42,33,24,.18);
  box-shadow: 0 24px 60px rgba(42,33,24,.09);
  color: var(--ink);
}
.annotation p { margin: 8px 0 0; font: italic 500 21px/1.35 var(--serif); }
.leaf-score { color: var(--fern); font: 600 11px/1 var(--display); letter-spacing: .13em; text-transform: uppercase; }
.slip-one { right: 10vw; bottom: 15vh; transform: rotate(-2deg); }
.slip-two { left: 9vw; bottom: 20vh; transform: rotate(1.5deg); }
.moth { position: absolute; width: 170px; color: var(--mauve); opacity: .66; stroke-width: 2; }
.moth-one { right: 18vw; top: 14vh; animation: moth-drift 7s ease-in-out infinite; }
.illuminated-bracket {
  position: absolute;
  left: 16vw;
  top: 33vh;
  color: var(--gold);
  font: 600 12px/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.illuminated-bracket::before, .illuminated-bracket::after { content: "["; margin-right: 10px; color: var(--lichen); }
.illuminated-bracket::after { content: "]"; margin: 0 0 0 10px; }

.contradiction-scene { background: linear-gradient(120deg, var(--loam), #2A2118); }
.corridor-line { position: absolute; left: 18vw; top: 0; bottom: 0; border-left: 1px dashed rgba(168,143,115,.32); }
.contradiction-note { position: absolute; left: 24vw; top: 16vh; width: min(580px, 57vw); }
.contradiction-note p:not(.chapter) { color: var(--taupe); font-size: 18px; line-height: 1.65; width: 72%; margin-left: 10vw; }
.fragment-stack { position: absolute; right: 8vw; bottom: 11vh; width: min(420px, 78vw); height: 300px; }
.fragment {
  position: absolute;
  width: 330px;
  min-height: 115px;
  padding: 20px;
  border: 1px solid currentColor;
  background: rgba(23,19,13,.58);
  backdrop-filter: blur(4px);
}
.fragment span { display: block; margin-bottom: 12px; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.fragment p { margin: 0; font: 500 22px/1.15 var(--display); letter-spacing: -.03em; }
.mauve-fragment { color: var(--mauve); left: 0; top: 0; transform: rotate(-3deg); }
.lichen-fragment { color: var(--lichen); right: 0; top: 86px; transform: rotate(2deg); }
.dark-fragment { color: var(--vellum); left: 35px; bottom: 0; }
.twig { position: absolute; width: min(480px, 60vw); left: 9vw; bottom: 16vh; color: var(--gold); opacity: .62; stroke-dasharray: 540; stroke-dashoffset: 540; }
.scene.in-view .twig { animation: draw-line 2.6s ease forwards; }

.verdict-scene { background: var(--vellum); color: var(--ink); }
.verdict-scene::before {
  background:
    radial-gradient(circle at 73% 22%, rgba(199,216,137,.24), transparent 25vw),
    radial-gradient(circle at 24% 72%, rgba(180,120,134,.13), transparent 32vw),
    var(--vellum);
}
.moon-index { position: absolute; left: 12vw; top: 16vh; width: min(620px, 66vw); }
.verdict-copy { margin: 30px 0 0 16vw; color: var(--fern); font-size: 19px; line-height: 1.65; max-width: 410px; }
.bookplate {
  margin: 54px 0 0 9vw;
  width: min(360px, 74vw);
  padding: 30px;
  border: 1px solid rgba(42,33,24,.26);
  text-align: center;
  background: rgba(239,227,198,.5);
  box-shadow: inset 0 0 0 10px rgba(168,143,115,.08);
}
.seal {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--mauve);
  color: var(--vellum);
  font: 600 18px/1 var(--display);
}
.bookplate strong { display: block; font: 600 27px/1 var(--display); letter-spacing: -.04em; }
.bookplate em { display: block; margin-top: 10px; color: var(--fern); font: italic 500 16px/1.3 var(--serif); }
.door-plate { position: absolute; right: 12vw; bottom: 12vh; width: min(250px, 34vw); color: var(--fern); opacity: .74; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.in-view .reveal, .scene.in-view .annotation, .scene.in-view .fragment, .scene.in-view .bookplate { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.annotation, .fragment, .bookplate { opacity: 0; transition: opacity .9s ease, transform .9s ease; }
.slip-one { --r: -2deg; } .slip-two { --r: 1.5deg; }
.mauve-fragment { --r: -3deg; } .lichen-fragment { --r: 2deg; } .dark-fragment { --r: 0deg; }

@keyframes flame { 0%,100% { transform: scaleX(1) skewX(0deg); } 50% { transform: scaleX(.91) skewX(3deg) translateX(2px); } }
@keyframes halo-breathe { 0%,100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes smoke-rise { 0% { stroke-dashoffset: 90; transform: translateY(8px); } 50% { opacity: .48; } 100% { stroke-dashoffset: -90; transform: translateY(-12px); opacity: .05; } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes moth-drift { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(14px, -10px) rotate(3deg); } }
@keyframes archive-glitch { 0%,100% { opacity: 0; } 20%,70% { opacity: .82; } 45% { transform: translate(1px, 1px); } }

@media (max-width: 820px) {
  .scene { padding: 30px 24px 90px; }
  .glyph-nav { right: 12px; }
  .table-scene { grid-template-columns: 1fr; gap: 0; align-content: center; padding-left: 24px; }
  .candle-wrap { width: 190px; }
  .domain-block, .hover-thesis, .contradiction-note, .moon-index { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .thesis, .verdict-copy, .bookplate { margin-left: 0; }
  .annotation, .fragment-stack, .twig, .door-plate { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 28px; }
  .fragment-stack { height: 360px; width: 100%; }
  .fragment { width: min(310px, 84vw); }
  .slip-one, .slip-two { transform: none; }
  .moth-one { right: 22vw; top: 52vh; }
}