:root {
  /* Compliance phrase: IBM Plex Sans for tiny interface labels. Roboto Flex “alth.ing” wordmark across the first viewport with variable-font animation driven by pointer position or a slow ambient keyframe. Layer translucent page panels over the marble using `backdrop-filter`; Roboto Flex variable axes paired with literary serif companions. */
  --stone-white: #F7F9FA;
  --paper-blue: #DDE6EB;
  --graphite: #25313A;
  --slate: #51616E;
  --vein-blue: #8BA7B7;
  --cyan: #BFEAF2;
  --lavender: #D9D7EA;
  --gold: #F3C96A;
  --display: "Roboto Flex", Roboto, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Literata, Newsreader, Georgia, "Times New Roman", serif;
  --note: Newsreader, Georgia, "Times New Roman", serif;
  --label: "IBM Plex Sans", "Space Grotesk", Inter, system-ui, sans-serif;
  --word-wght: 760;
  --word-wdth: 114;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--graphite);
  background: var(--stone-white);
  font-family: var(--display);
}

.marble-folio {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 19%, rgba(191, 234, 242, .72), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(217, 215, 234, .56), transparent 27%),
    radial-gradient(circle at 62% 80%, rgba(139, 167, 183, .30), transparent 35%),
    radial-gradient(circle at 30% 72%, rgba(247, 249, 250, .82), transparent 31%),
    linear-gradient(132deg, #F7F9FA 0%, #DDE6EB 48%, #F7F9FA 100%);
}

.marble-folio::before,
.marble-folio::after {
  content: "";
  position: absolute;
  inset: -22%;
  background-image:
    repeating-linear-gradient(116deg, transparent 0 44px, rgba(81, 97, 110, .13) 45px, transparent 49px),
    repeating-linear-gradient(29deg, transparent 0 84px, rgba(139, 167, 183, .16) 85px, transparent 89px),
    linear-gradient(48deg, transparent 0 49%, rgba(191, 234, 242, .18) 50%, transparent 52%);
  filter: blur(.2px);
  opacity: .62;
  transform-origin: 50% 50%;
  animation: veinDrift 24s ease-in-out infinite alternate;
}

.marble-folio::after {
  background-image:
    repeating-linear-gradient(151deg, transparent 0 108px, rgba(243, 201, 106, .28) 109px, transparent 112px),
    repeating-linear-gradient(73deg, transparent 0 138px, rgba(37, 49, 58, .08) 139px, transparent 143px);
  opacity: .42;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.stone-bloom,
.ink-pool {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.stone-bloom {
  width: 45vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(247, 249, 250, .78), rgba(191, 234, 242, .25) 44%, transparent 69%);
  mix-blend-mode: screen;
}

.bloom-one { left: -12vw; top: 22vh; }
.bloom-two { right: -14vw; bottom: -6vh; background: radial-gradient(circle, rgba(217, 215, 234, .60), transparent 67%); }
.bloom-three { width: 28vw; right: 18vw; top: 34vh; background: radial-gradient(circle, rgba(221, 230, 235, .54), transparent 66%); }

.ink-pool {
  width: 19vw;
  aspect-ratio: 1.45;
  background: radial-gradient(ellipse, rgba(81, 97, 110, .10), rgba(139, 167, 183, .07) 48%, transparent 72%);
  filter: blur(2px);
}

.pool-one { left: 9vw; bottom: 13vh; transform: rotate(-18deg); }
.pool-two { right: 18vw; top: 18vh; transform: rotate(23deg); }

.generative-vein {
  position: absolute;
  height: 1px;
  width: 54vw;
  background: linear-gradient(90deg, transparent, rgba(81, 97, 110, .47), rgba(191, 234, 242, .66), transparent);
  transform-origin: left center;
  animation: redraw 9s ease-in-out infinite alternate;
}

.generative-vein::after {
  content: "";
  position: absolute;
  left: 48%;
  top: -1px;
  width: 16vw;
  height: 1px;
  background: inherit;
  transform: rotate(24deg);
  opacity: .65;
}

.vein-a { left: 8vw; top: 31vh; transform: rotate(-18deg); }
.vein-b { left: 46vw; top: 58vh; transform: rotate(22deg); animation-delay: -2s; }
.vein-c { left: 21vw; top: 76vh; transform: rotate(-7deg); animation-delay: -5s; }
.vein-d { left: 58vw; top: 28vh; transform: rotate(42deg); animation-delay: -3.4s; opacity: .6; }
.gold-thread { left: 16vw; top: 47vh; background: linear-gradient(90deg, transparent, rgba(243, 201, 106, .78), transparent); transform: rotate(13deg); }

.folio-scroll {
  position: relative;
  scroll-snap-type: y proximity;
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 6vw, 78px);
  display: grid;
  isolation: isolate;
  scroll-snap-align: start;
}

.marginalia-rail {
  position: fixed;
  left: 22px;
  top: 6vh;
  bottom: 6vh;
  z-index: 20;
  width: 46px;
  border-left: 1px solid rgba(81, 97, 110, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rail-mark {
  writing-mode: vertical-rl;
  color: var(--slate);
  margin-bottom: auto;
}

.rail-dot {
  color: var(--slate);
  text-decoration: none;
  padding: 7px 2px;
  border-radius: 99px;
  transition: color .35s ease, background .35s ease, transform .35s ease;
}

.rail-dot.active,
.rail-dot:hover {
  color: var(--graphite);
  background: rgba(191, 234, 242, .58);
  transform: translateX(3px);
}

.opening-scene { align-items: center; }

.thesis-sheet,
.folio-spread,
.reading-drawer,
.closing-tableau,
.margin-column {
  background: rgba(247, 249, 250, .58);
  border: 1px solid rgba(139, 167, 183, .35);
  box-shadow: 0 24px 80px rgba(37, 49, 58, .13), inset 0 0 0 1px rgba(255, 255, 255, .35);
  backdrop-filter: blur(14px);
}

.opening-sheet {
  width: min(1040px, 83vw);
  margin-left: 8vw;
  padding: clamp(28px, 5vw, 68px);
  transform: rotate(-3deg);
}

.folio-caption,
.chapter-label,
.margin-kicker {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
}

.variable-thesis {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(82px, 18vw, 264px);
  line-height: .78;
  letter-spacing: -.09em;
  color: var(--graphite);
  font-stretch: expanded;
  font-variation-settings: "wght" var(--word-wght), "wdth" var(--word-wdth), "opsz" 72;
  animation: thesisBreath 6.5s ease-in-out infinite alternate;
}

.opening-copy {
  width: min(590px, 68vw);
  font-family: var(--serif);
  font-size: clamp(21px, 2.8vw, 35px);
  line-height: 1.22;
  color: var(--slate);
}

.page-panel {
  position: absolute;
  background: rgba(247, 249, 250, .34);
  border: 1px solid rgba(221, 230, 235, .72);
  box-shadow: 0 18px 55px rgba(81, 97, 110, .13);
  backdrop-filter: blur(8px);
  z-index: -1;
  transition: transform .45s ease;
}

.page-panel span,
.fan-page::after {
  position: absolute;
  content: "";
  inset: 18px 16px auto 16px;
  height: 40%;
  border-top: 1px solid rgba(81, 97, 110, .12);
  border-bottom: 1px solid rgba(81, 97, 110, .08);
  background: repeating-linear-gradient(180deg, rgba(81, 97, 110, .09) 0 1px, transparent 1px 22px);
}

.page-one { width: 34vw; height: 72vh; top: 10vh; right: 15vw; transform: rotate(8deg); }
.page-two { width: 24vw; height: 58vh; top: 18vh; right: 32vw; transform: rotate(-9deg); }
.page-three { width: 18vw; height: 42vh; bottom: 8vh; left: 17vw; transform: rotate(13deg); }
.opening-scene:hover .page-one { transform: rotate(9deg) translateY(-5px); }
.opening-scene:hover .page-two { transform: rotate(-10deg) translateY(4px); }

.folio-registration {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--slate);
  opacity: .45;
}

.top-left { top: 34px; left: 96px; border-top: 1px solid; border-left: 1px solid; }
.bottom-right { right: 34px; bottom: 34px; border-right: 1px solid; border-bottom: 1px solid; }

.bookmark-tab {
  position: absolute;
  border: 0;
  background: var(--gold);
  color: var(--graphite);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 10px 30px rgba(81, 97, 110, .18);
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}

.bookmark-tab:hover,
.bookmark-tab.tab-open {
  transform: translateX(8px);
  box-shadow: 0 18px 38px rgba(81, 97, 110, .22);
}

.hero-tab { right: 0; top: 28vh; padding: 18px 12px; writing-mode: vertical-rl; }
.closing-tab { right: 8vw; bottom: 16vh; padding: 14px 28px; }

.micro-note {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  width: 210px;
  font-family: var(--note);
  color: var(--slate);
  font-size: 15px;
  line-height: 1.3;
}

.citation-thread {
  height: 1px;
  background: linear-gradient(90deg, rgba(81, 97, 110, .1), rgba(139, 167, 183, .8), rgba(191, 234, 242, .1));
  transform-origin: left;
  animation: threadPulse 3.8s ease-in-out infinite;
}

.opening-thread { width: 58%; }

.annotation-scene {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 34px;
  align-items: center;
  padding-left: max(90px, 8vw);
}

.annotation-field {
  padding: clamp(28px, 5vw, 64px);
  transform: rotate(1.6deg);
}

.annotation-field h2,
.closing-tableau h2 {
  margin: 12px 0;
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 92px);
  line-height: .98;
  font-weight: 500;
}

.reading-line {
  max-width: 790px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.34;
  color: var(--slate);
}

.gloss-trigger {
  color: var(--graphite);
  background: linear-gradient(180deg, transparent 58%, rgba(191, 234, 242, .72) 59%);
  cursor: crosshair;
  transition: color .25s ease, background .25s ease;
}

.gloss-trigger:hover { color: #25313A; background: linear-gradient(180deg, transparent 42%, rgba(243, 201, 106, .48) 43%); }
.thread-one { width: 42%; margin: 28px 0 0 8%; }
.thread-two { width: 28%; margin: 18px 0 0 52%; background: linear-gradient(90deg, rgba(243, 201, 106, .05), rgba(243, 201, 106, .8), transparent); }

.footnote-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 34px 0 0;
  list-style: none;
}

.footnote-gloss {
  position: relative;
  font-family: var(--note);
  font-size: 15px;
  color: var(--slate);
  border-top: 1px solid rgba(139, 167, 183, .45);
  padding: 10px 18px;
  transition: background .3s ease, transform .3s ease;
}

.footnote-gloss::before { content: attr(data-footnote) "] "; color: var(--gold); }
.footnote-gloss::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--gold); transition: width .35s ease; }
.footnote-gloss:hover { background: rgba(191, 234, 242, .28); transform: translateY(-3px); }
.footnote-gloss:hover::after { width: 100%; }

.margin-column {
  align-self: stretch;
  padding: 24px;
  font-family: var(--note);
  color: var(--slate);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.margin-arrow {
  margin-top: 20px;
  color: var(--gold);
  font-size: 38px;
  animation: arrowFloat 2.6s ease-in-out infinite alternate;
}

.index-scene {
  align-items: center;
  padding-left: max(90px, 8vw);
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 32px;
}

.spine-system {
  display: flex;
  height: min(68vh, 620px);
  align-items: stretch;
  gap: 12px;
}

.index-spine {
  flex: 1;
  min-width: 78px;
  padding: 24px 18px;
  border: 1px solid rgba(81, 97, 110, .28);
  background: rgba(221, 230, 235, .52);
  box-shadow: 0 18px 55px rgba(37, 49, 58, .1);
  writing-mode: vertical-rl;
  cursor: pointer;
  transition: flex .48s ease, background .35s ease, transform .35s ease;
}

.index-spine.open,
.index-spine:hover {
  flex: 2.5;
  background: rgba(247, 249, 250, .68);
  transform: translateY(-8px);
}

.spine-number { font-family: var(--label); color: var(--gold); }
.index-spine strong { font-family: var(--serif); font-size: clamp(28px, 4vw, 54px); font-weight: 500; }
.index-spine p { font-family: var(--note); color: var(--slate); }
.reading-drawer { padding: 30px; font-family: var(--serif); font-size: 28px; line-height: 1.22; }

.decision-scene {
  align-items: center;
  justify-items: center;
  overflow: hidden;
}

.fan-pages {
  position: absolute;
  inset: 8vh 10vw;
  z-index: -1;
}

.fan-page {
  position: absolute;
  width: 42vw;
  height: 70vh;
  left: 28vw;
  top: 7vh;
  background: rgba(247, 249, 250, .52);
  border: 1px solid rgba(139, 167, 183, .34);
  box-shadow: 0 30px 90px rgba(81, 97, 110, .14);
  transform-origin: bottom left;
  backdrop-filter: blur(9px);
  transition: transform .55s ease;
}

.fan-a { transform: rotate(-28deg); }
.fan-b { transform: rotate(-13deg); }
.fan-c { transform: rotate(2deg); }
.fan-d { transform: rotate(17deg); }
.fan-e { transform: rotate(32deg); }
.decision-scene:hover .fan-a { transform: rotate(-33deg) translateY(-4px); }
.decision-scene:hover .fan-e { transform: rotate(37deg) translateY(-4px); }

.closing-tableau {
  width: min(820px, 78vw);
  padding: clamp(34px, 6vw, 78px);
  text-align: center;
}

.closing-tableau p:last-of-type {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 31px);
  line-height: 1.36;
  color: var(--slate);
}

.asterism {
  color: var(--gold);
  font-size: 52px;
  margin-top: 18px;
}

.floating-gloss {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  max-width: 270px;
  padding: 12px 15px;
  border: 1px solid rgba(139, 167, 183, .45);
  background: rgba(247, 249, 250, .86);
  color: var(--graphite);
  font-family: var(--note);
  box-shadow: 0 18px 42px rgba(37, 49, 58, .16);
  opacity: 0;
  transform: translate(-50%, -120%) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

.floating-gloss.visible {
  opacity: 1;
  transform: translate(-50%, -135%) scale(1);
}

@keyframes veinDrift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(1deg); }
}

@keyframes redraw {
  from { clip-path: inset(0 78% 0 0); opacity: .35; }
  to { clip-path: inset(0 0 0 0); opacity: .88; }
}

@keyframes thesisBreath {
  from { font-variation-settings: "wght" 690, "wdth" 96, "opsz" 42; }
  to { font-variation-settings: "wght" 820, "wdth" 128, "opsz" 72; }
}

@keyframes threadPulse {
  0%, 100% { transform: scaleX(.34); opacity: .35; }
  50% { transform: scaleX(1); opacity: .95; }
}

@keyframes arrowFloat {
  from { transform: translate(0, 0); }
  to { transform: translate(8px, -8px); }
}

@media (max-width: 860px) {
  .marginalia-rail { display: none; }
  .scene { padding: 28px; }
  .opening-sheet { width: 94vw; margin-left: 0; }
  .annotation-scene,
  .index-scene { grid-template-columns: 1fr; padding-left: 28px; }
  .spine-system { flex-direction: column; height: auto; }
  .index-spine { writing-mode: horizontal-tb; }
  .page-one,
  .page-two,
  .page-three { opacity: .55; }
  .micro-note { display: none; }
}