:root {
  --aged-parchment: #E8D7B6;
  --bone-vellum: #F5EAD2;
  --burnt-umber: #3A271C;
  --olive-ash: #6F7352;
  --terracotta-seal: #B86645;
  --oxidized-brass: #A1844F;
  --deep-walnut: #17110D;
  --dusty-rose: #C79A84;
  --display: "Playfair Display", Playfair, Georgia, serif;
  --display-token: "Display**";
  --serif: "Cormorant Garamond", Cormorant, Garamond, serif;
  --sans: "Manrope", Inter, system-ui, sans-serif;
}

/* DESIGN FONT TOKENS: Playfair Display** wordmark holos.dev wordmark */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--burnt-umber);
  background: var(--deep-walnut);
  font-family: var(--serif);
  overflow-x: hidden;
}

.grain-field,
.grain-field::before,
.grain-field::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain-field {
  opacity: .42;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 12% 19%, rgba(58,39,28,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 67% 41%, rgba(111,115,82,.11) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 78%, rgba(184,102,69,.13) 0 1.5px, transparent 2.5px);
  background-size: 31px 37px, 43px 49px, 57px 61px;
}

.grain-field::before {
  content: "";
  background: repeating-linear-gradient(98deg, rgba(23,17,13,.05) 0 1px, transparent 1px 9px);
}

.grain-field::after {
  content: "";
  opacity: .28;
  background: linear-gradient(90deg, transparent, rgba(245,234,210,.2), transparent 58%);
}

.cursor-line {
  position: fixed;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oxidized-brass), transparent);
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 22;
  pointer-events: none;
  opacity: .35;
  transition: opacity .4s ease;
}

.folio-index {
  position: fixed;
  left: clamp(18px, 3vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 18px;
}

.folio-index a {
  color: var(--bone-vellum);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: .48;
  transition: opacity .7s ease, color .7s ease, transform .7s ease;
}

.folio-index a span { font-family: var(--display); font-size: 16px; letter-spacing: 0; }
.folio-index a em { font-style: normal; margin-top: 5px; }
.folio-index a.active { opacity: 1; color: var(--oxidized-brass); transform: translateX(5px); }

.archive { position: relative; }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(78px, 10vw, 132px) clamp(34px, 8vw, 128px);
}

.chapter::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -5;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(245,234,210,.38), transparent 32%),
    radial-gradient(ellipse at 80% 80%, rgba(184,102,69,.14), transparent 35%);
}

.chapter-dark {
  color: var(--bone-vellum);
  background:
    radial-gradient(circle at 70% 20%, rgba(161,132,79,.2), transparent 28%),
    linear-gradient(120deg, var(--deep-walnut), #231710 60%, var(--deep-walnut));
}

.chapter-parchment { background: var(--aged-parchment); }
.chapter-olive { background: linear-gradient(125deg, var(--olive-ash), #7d7b56 58%, var(--aged-parchment)); }
.chapter-rose { background: linear-gradient(115deg, var(--dusty-rose), var(--bone-vellum) 62%, var(--aged-parchment)); }
.chapter-final { background: linear-gradient(128deg, var(--deep-walnut), var(--burnt-umber) 42%, var(--aged-parchment) 43%); }

.diagonal-leaf,
.vellum-panel,
.pattern-band,
.opening-corner {
  position: absolute;
  will-change: transform;
  transition: transform 1.4s cubic-bezier(.19, 1, .22, 1), opacity 1.2s ease;
}

.diagonal-leaf {
  inset: -9% -7%;
  background: linear-gradient(120deg, var(--bone-vellum), var(--aged-parchment));
  clip-path: polygon(0 17%, 100% 0, 100% 80%, 0 100%);
  box-shadow: 0 28px 80px rgba(23,17,13,.28), inset 0 0 0 1px rgba(161,132,79,.18);
  opacity: .92;
  z-index: -3;
}

.diagonal-leaf::before,
.vellum-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(72deg, transparent 0 31%, rgba(58,39,28,.08) 31.2%, transparent 31.6%),
    repeating-linear-gradient(0deg, rgba(58,39,28,.045) 0 1px, transparent 1px 15px),
    radial-gradient(circle at 18% 30%, rgba(184,102,69,.12), transparent 11%);
  mix-blend-mode: multiply;
}

.leaf-hero { transform: translate(-18%, 15%) rotate(-8deg); clip-path: polygon(0 44%, 76% 24%, 100% 100%, 0 100%); }
.leaf-left { inset: -5% 22% -4% -18%; transform: rotate(-10deg); }
.leaf-right { inset: -18% -20% -12% 24%; transform: rotate(11deg); background: linear-gradient(105deg, var(--bone-vellum), #dfcaa4); }
.leaf-wide { transform: rotate(-6deg); clip-path: polygon(0 7%, 100% 22%, 100% 88%, 0 73%); }
.leaf-final { inset: -5% 29% -8% -17%; transform: rotate(-12deg); }

.opening-corner {
  left: -12vw;
  bottom: -10vh;
  width: min(78vw, 980px);
  height: 63vh;
  z-index: -1;
  background: var(--aged-parchment);
  clip-path: polygon(0 34%, 100% 0, 80% 100%, 0 100%);
  box-shadow: 24px -24px 70px rgba(0,0,0,.42);
}

.pattern-band {
  z-index: -2;
  opacity: .62;
  border: 1px solid rgba(161,132,79,.28);
  background-color: rgba(245,234,210,.42);
  background-image:
    repeating-linear-gradient(135deg, rgba(58,39,28,.14) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(45deg, rgba(161,132,79,.12) 0 1px, transparent 1px 18px);
}

.band-hero { right: -8vw; top: 10vh; width: 28vw; height: 120vh; transform: rotate(12deg); }
.band-left { left: 5vw; top: -10vh; width: 12vw; height: 120vh; transform: rotate(10deg); }
.fan-band { left: -4vw; top: -12vh; width: 32vw; height: 124vh; transform: rotate(-12deg); background-image: radial-gradient(circle at 0 50%, transparent 0 12px, rgba(245,234,210,.18) 13px 15px, transparent 16px 28px), repeating-conic-gradient(from 18deg, rgba(58,39,28,.08) 0 8deg, transparent 8deg 18deg); }
.checker { right: 6vw; top: -8vh; width: 18vw; height: 116vh; transform: rotate(9deg); background-image: linear-gradient(45deg, rgba(58,39,28,.1) 25%, transparent 25% 75%, rgba(58,39,28,.1) 75%), linear-gradient(45deg, rgba(58,39,28,.1) 25%, transparent 25% 75%, rgba(58,39,28,.1) 75%); background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.ledger { right: -5vw; top: -4vh; width: 34vw; height: 112vh; transform: rotate(13deg); background-image: repeating-linear-gradient(0deg, rgba(58,39,28,.18) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(184,102,69,.12) 0 1px, transparent 1px 56px); }

.vellum-panel {
  background: rgba(245,234,210,.62);
  border-left: 1px solid rgba(161,132,79,.35);
  border-right: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 55px rgba(58,39,28,.16);
  clip-path: polygon(0 9%, 100% 0, 100% 88%, 0 100%);
  backdrop-filter: blur(2px);
}

.panel-right { right: 7vw; top: 8vh; width: 22vw; min-width: 240px; height: 82vh; transform: rotate(7deg); }
.panel-left { left: 12vw; top: 12vh; width: 23vw; min-width: 250px; height: 72vh; transform: rotate(-9deg); }

.chapter-content {
  position: relative;
  z-index: 3;
  width: min(1120px, 100%);
}

.hero-content { padding-left: clamp(28px, 13vw, 190px); align-self: end; margin-bottom: 11vh; }
.split { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(280px, .7fr); gap: clamp(36px, 8vw, 100px); align-items: end; }
.diagonal-copy { width: min(760px, 70vw); margin-left: 22vw; transform: rotate(-5deg); }
.finale { width: min(800px, 86vw); color: var(--bone-vellum); margin-left: clamp(36px, 18vw, 220px); }

.folio-mark,
.edge-note,
.slant-caption,
.closing-note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.folio-mark { color: var(--terracotta-seal); margin: 0 0 20px; }
.chapter-dark .folio-mark, .finale .folio-mark { color: var(--oxidized-brass); }

h1,
h2 {
  font-family: var(--display);
  line-height: .86;
  letter-spacing: -.055em;
  margin: 0;
  font-weight: 700;
  mix-blend-mode: multiply;
}

.chapter-dark h1, .finale h2 { mix-blend-mode: normal; }

h1 {
  font-size: clamp(74px, 15vw, 224px);
  color: var(--aged-parchment);
  text-shadow: 0 12px 38px rgba(0,0,0,.4);
}

h2 {
  font-size: clamp(54px, 9vw, 138px);
  color: var(--burnt-umber);
}

.chapter-olive h2 { color: var(--bone-vellum); text-shadow: 0 10px 30px rgba(23,17,13,.22); }
.chapter-rose h2 { color: var(--3A271C, #3A271C); }
.finale h2 { color: var(--aged-parchment); }

.lede,
.prose {
  font-size: clamp(22px, 2.2vw, 35px);
  line-height: 1.32;
  margin: 28px 0 0;
  max-width: 680px;
}

.lede { color: rgba(245,234,210,.82); font-style: italic; }
.prose { color: rgba(58,39,28,.88); }
.chapter-olive .prose { color: rgba(245,234,210,.86); }
.finale .prose { color: rgba(245,234,210,.82); }

.emblem {
  position: absolute;
  width: clamp(150px, 22vw, 290px);
  aspect-ratio: 1;
  border: 1px solid rgba(161,132,79,.72);
  border-radius: 50%;
  opacity: .78;
}

.emblem span { position: absolute; background: var(--oxidized-brass); transform-origin: center; }
.emblem span:nth-child(1) { width: 72%; height: 1px; left: 14%; top: 50%; transform: rotate(-12deg); }
.emblem span:nth-child(2) { width: 1px; height: 68%; left: 50%; top: 16%; transform: rotate(19deg); }
.emblem span:nth-child(3) { width: 46%; height: 1px; left: 29%; top: 37%; transform: rotate(41deg); }
.emblem span:nth-child(4) { width: 60%; height: 1px; left: 20%; top: 66%; transform: rotate(0deg); }
.emblem-open { right: 10vw; bottom: 12vh; clip-path: polygon(0 0, 72% 0, 72% 100%, 0 100%); }
.emblem-whole { right: 13vw; top: 18vh; background: rgba(245,234,210,.05); }

.oval-medallion {
  position: absolute;
  right: 22vw;
  bottom: 15vh;
  width: 180px;
  height: 96px;
  border: 1px solid var(--oxidized-brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  letter-spacing: .28em;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--terracotta-seal);
  transform: rotate(-12deg);
}

.brass-rule {
  position: absolute;
  left: 14vw;
  top: 16vh;
  width: 62vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oxidized-brass), transparent);
  transform: rotate(-12deg);
  z-index: 2;
}

.binding-tabs {
  position: absolute;
  right: 9vw;
  top: 21vh;
  display: grid;
  gap: 26px;
  transform: rotate(10deg);
}

.binding-tabs i {
  width: 62px;
  height: 18px;
  border-radius: 18px 0 0 18px;
  background: var(--terracotta-seal);
  box-shadow: 0 10px 25px rgba(58,39,28,.22);
}

.registration-grid {
  position: absolute;
  right: 19vw;
  bottom: 18vh;
  width: 240px;
  height: 240px;
  transform: rotate(-10deg);
}

.registration-grid span {
  position: absolute;
  width: 58px;
  height: 58px;
  border-color: var(--oxidized-brass);
}
.registration-grid span:nth-child(1) { left: 0; top: 0; border-top: 1px solid; border-left: 1px solid; }
.registration-grid span:nth-child(2) { right: 0; top: 0; border-top: 1px solid; border-right: 1px solid; }
.registration-grid span:nth-child(3) { left: 0; bottom: 0; border-bottom: 1px solid; border-left: 1px solid; }
.registration-grid span:nth-child(4) { right: 0; bottom: 0; border-bottom: 1px solid; border-right: 1px solid; }

.edge-note { position: absolute; right: 6vw; bottom: 6vh; color: rgba(245,234,210,.55); transform: rotate(-9deg); }
.slant-caption { position: absolute; left: 12vw; bottom: 9vh; color: rgba(58,39,28,.55); transform: rotate(-10deg); }
.closing-note { position: absolute; left: 10vw; bottom: 8vh; color: rgba(245,234,210,.55); transform: rotate(-9deg); }

.reveal-mask {
  clip-path: inset(0 0 100% 0);
  transform: translateY(42px) rotate(var(--content-rotate, 0deg));
  opacity: 0;
  transition: clip-path 1.5s cubic-bezier(.19, 1, .22, 1), transform 1.5s cubic-bezier(.19, 1, .22, 1), opacity 1.1s ease;
}

.diagonal-copy.reveal-mask { --content-rotate: -5deg; }
.chapter.is-visible .reveal-mask { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(var(--content-rotate, 0deg)); opacity: 1; }
.chapter.is-visible .opening-corner { transform: translate(11vw, -7vh) rotate(-1deg); }
.chapter.is-visible .vellum-panel { opacity: .96; }

@keyframes paper-breath {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(.96) brightness(1.025); }
}

.chapter::before { animation: paper-breath 12s ease-in-out infinite; }

@media (max-width: 820px) {
  .folio-index { left: 14px; gap: 12px; }
  .folio-index a em { display: none; }
  .chapter { padding: 86px 28px 92px 54px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .diagonal-copy, .finale, .hero-content { width: 100%; margin-left: 0; padding-left: 0; }
  .pattern-band { width: 36vw; }
  .panel-right, .panel-left { min-width: 150px; opacity: .45; }
  .emblem { opacity: .35; }
  h1 { font-size: clamp(68px, 22vw, 126px); }
  h2 { font-size: clamp(48px, 16vw, 86px); }
}