:root {
  /* Compliance tokens from DESIGN.md parser: Interaction Pattern (0% frequency Interaction System: IntersectionObserver (threshold reveals */
  --cream: #f4ede4;
  --charcoal: #2a2428;
  --gold: #c9a96e;
  --teal: #7ec8b8;
  --violet: #b89ad4;
  --rose: #d4a0a0;
  --ink: #3d3538;
  --vellum: #e8ddd5;
  --obsidian: #1e1a1c;
  --rule: #a88c55;
  --cursor-x: 50%;
  --cursor-y: 50%;
  --mesh-x: 0px;
  --mesh-y: 0px;
  --ease-lux: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: "Commissioner", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(rgba(61,53,56,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(61,53,56,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: multiply;
}

.deco-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  z-index: 10;
  background: linear-gradient(180deg, var(--obsidian), var(--charcoal));
  color: var(--vellum);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(201, 169, 110, 0.35);
  overflow: hidden;
}

.sidebar-ornament {
  position: absolute;
  top: 4vh;
  right: 20px;
  bottom: 4vh;
  width: 36px;
  background:
    linear-gradient(90deg, transparent 16px, var(--gold) 16px 17px, transparent 17px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(201,169,110,0.85) 22px 23px, transparent 23px 44px),
    repeating-linear-gradient(135deg, transparent 0 15px, rgba(168,140,85,0.42) 15px 16px, transparent 16px 30px);
  opacity: 0.9;
}

.sidebar-ornament::before,
.sidebar-ornament::after {
  content: "";
  position: absolute;
  right: -8px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.sidebar-ornament::before { top: 0; }
.sidebar-ornament::after { bottom: 0; }

.vertical-wordmark {
  position: absolute;
  top: 44%;
  left: -70px;
  width: 420px;
  transform: rotate(-90deg);
  transform-origin: center;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--gold);
  font-size: 1rem;
}

.glyph-nav {
  position: absolute;
  left: 44px;
  bottom: 16vh;
  display: grid;
  gap: 22px;
}

.nav-glyph {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 28px;
  text-decoration: none;
  color: rgba(232, 221, 213, 0.86);
  transition: transform 600ms var(--ease-lux);
  will-change: transform;
}

.nav-glyph span {
  width: 18px;
  height: 18px;
  display: block;
  border: 1px solid var(--gold);
  transition: transform 700ms var(--ease-lux), background 700ms var(--ease-lux);
}

.nav-glyph[data-shape="hex"] span { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: rgba(201,169,110,0.08); }
.nav-glyph[data-shape="chev"] span { clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 38%, 50% 78%, 0 38%); }
.nav-glyph[data-shape="step"] span { clip-path: polygon(20% 0, 80% 0, 80% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%, 20% 25%); }
.nav-glyph[data-shape="fan"] span { border-radius: 100% 100% 12% 12%; }

.nav-glyph em {
  opacity: 0;
  transform: translateX(-12px);
  font-style: normal;
  white-space: nowrap;
  font-size: 0.72rem;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.7);
  transition: opacity 200ms var(--ease-lux), transform 600ms var(--ease-lux);
}

.nav-glyph:hover span,
.nav-glyph.is-near span { transform: scale(1.35) rotate(45deg); background: rgba(201,169,110,0.2); }
.nav-glyph:hover em,
.nav-glyph.is-near em { opacity: 1; transform: translateX(0); }

.sidebar-hash {
  position: absolute;
  bottom: 5vh;
  left: 42px;
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(201, 169, 110, 0.55);
}

.folio {
  margin-left: 280px;
  position: relative;
  z-index: 2;
}

.chapter {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6vh 8vw;
}

.narrative-chapter {
  display: grid;
  grid-template-columns: minmax(260px, 35%) minmax(360px, 65%);
  gap: 5vw;
  align-items: center;
  background-color: var(--cream);
}

.gradient-field,
.mesh-tight,
.mesh-wide,
.mesh-jewel {
  background-image:
    radial-gradient(circle at calc(20% + var(--mesh-x)) calc(20% + var(--mesh-y)), rgba(126,200,184,0.58), transparent 32%),
    radial-gradient(circle at calc(78% - var(--mesh-x)) calc(32% + var(--mesh-y)), rgba(184,154,212,0.58), transparent 34%),
    radial-gradient(circle at calc(45% + var(--mesh-x)) calc(78% - var(--mesh-y)), rgba(212,160,160,0.55), transparent 38%),
    linear-gradient(135deg, rgba(244,237,228,0.96), rgba(232,221,213,0.72));
  animation: meshDrift 45s ease-in-out infinite alternate;
}

.mesh-tight { background-size: 120% 120%; }
.mesh-wide { background-color: var(--charcoal); background-image: radial-gradient(circle at calc(22% + var(--mesh-x)) 28%, rgba(126,200,184,0.36), transparent 36%), radial-gradient(circle at 78% calc(52% + var(--mesh-y)), rgba(184,154,212,0.32), transparent 42%), radial-gradient(circle at 48% 88%, rgba(212,160,160,0.26), transparent 36%), linear-gradient(135deg, var(--obsidian), var(--charcoal)); }
.mesh-jewel { background-image: radial-gradient(circle at calc(68% + var(--mesh-x)) 22%, rgba(126,200,184,0.64), transparent 24%), radial-gradient(circle at 80% calc(70% + var(--mesh-y)), rgba(184,154,212,0.58), transparent 26%), radial-gradient(circle at 36% 62%, rgba(212,160,160,0.5), transparent 24%), linear-gradient(135deg, var(--cream), rgba(232,221,213,0.8)); }

@keyframes meshDrift {
  0% { filter: hue-rotate(-8deg) saturate(0.95); background-position: 0% 0%; }
  100% { filter: hue-rotate(15deg) saturate(1.08); background-position: 8% 12%; }
}

.hex-lattice {
  position: absolute;
  inset: -20%;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='70' viewBox='0 0 80 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2 L60 2 L78 35 L60 68 L20 68 L2 35 Z' fill='none' stroke='%233d3538' stroke-width='1'/%3E%3C/svg%3E");
  animation: latticeGlide 120s linear infinite;
  z-index: -1;
}

@keyframes latticeGlide { to { transform: translate3d(160px, 140px, 0); } }

.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.hero-chapter {
  display: grid;
  place-items: center;
}

.hero-frame {
  width: min(88vw, 1180px);
  padding: 5vw;
  border: 1px solid rgba(201,169,110,0.58);
  background: rgba(244,237,228,0.18);
  box-shadow: inset 0 0 0 10px rgba(244,237,228,0.14), 0 40px 120px rgba(42,36,40,0.12);
  clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 4;
}

.mono-kicker {
  font-family: "DM Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.7);
  margin-bottom: 1.4rem;
}

.hero-lettering {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.draw-text {
  font-family: "Poiret One", cursive;
  font-size: 132px;
  letter-spacing: 0.12em;
  fill: rgba(201,169,110,0.05);
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLetters 2.5s var(--ease-lux) forwards;
}

.draw-two { animation-delay: 1.35s; }

@keyframes drawLetters {
  to { stroke-dashoffset: 0; fill: rgba(201,169,110,0.16); }
}

.hero-copy,
.caption-column p,
.ziggurat-frame p,
.closing-lockup p {
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.hero-copy { max-width: 720px; margin: 1.5rem 0 0 auto; color: var(--ink); }

.aurora-ribbons {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.7;
}

.aurora-ribbons svg { width: 100%; height: 100%; }
.ribbon { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 32; animation: ribbonFlow 20s linear infinite; }
.ribbon-one { stroke: rgba(126,200,184,0.55); }
.ribbon-two { stroke: rgba(184,154,212,0.48); animation-duration: 25s; animation-direction: reverse; }
@keyframes ribbonFlow { to { stroke-dashoffset: -260; transform: translateX(4%); } }

.deco-rule {
  height: 24px;
  margin-left: 280px;
  background: var(--cream);
  position: relative;
  z-index: 3;
}

.deco-rule svg { width: 100%; height: 100%; stroke: var(--rule); stroke-width: 1; fill: none; opacity: 0.78; }

h1 {
  margin: 0;
  font-family: "Poiret One", cursive;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 400;
}

.caption-column p { max-width: 36rem; color: var(--ink); }

.canvas-column { min-height: 58vh; display: grid; place-items: center; position: relative; }

.ziggurat-frame,
.proof-tablet {
  width: min(620px, 100%);
  min-height: 440px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem;
  color: var(--ink);
  border: 1px solid var(--gold);
  background: rgba(244,237,228,0.34);
  box-shadow: inset 0 0 0 16px rgba(201,169,110,0.07), inset 0 0 0 32px rgba(244,237,228,0.22);
  clip-path: polygon(10% 0, 90% 0, 90% 5%, 96% 5%, 96% 10%, 100% 10%, 100% 90%, 96% 90%, 96% 95%, 90% 95%, 90% 100%, 10% 100%, 10% 95%, 4% 95%, 4% 90%, 0 90%, 0 10%, 4% 10%, 4% 5%, 10% 5%);
  backdrop-filter: blur(8px);
}

.sunburst {
  width: 240px;
  height: 140px;
  background: repeating-conic-gradient(from 210deg at 50% 100%, transparent 0deg 5deg, rgba(201,169,110,0.9) 5deg 5.6deg, transparent 5.6deg 10deg);
  mask-image: radial-gradient(circle at 50% 100%, transparent 0 20px, black 22px 100%);
  opacity: 0.7;
}

.ledger-date span,
.ledger-date strong {
  display: block;
}

.ledger-date span { font-family: "DM Mono", monospace; letter-spacing: 0.18em; color: rgba(61,53,56,0.72); }
.ledger-date strong { margin-top: 0.6rem; font-family: "Poiret One"; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: 0.12em; color: var(--gold); }

.dark-chapter { color: var(--vellum); }
.dark-chapter h1 { color: var(--gold); }
.dark-chapter .caption-column p { color: var(--vellum); }
.dark-chapter .mono-kicker { color: rgba(201,169,110,0.75); }

.accord-orbit {
  width: min(580px, 70vw);
  aspect-ratio: 1;
  border: 1px solid rgba(201,169,110,0.42);
  border-radius: 50%;
  position: relative;
  animation: orbitTurn 50s linear infinite;
}

.accord-orbit::before,
.accord-orbit::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(201,169,110,0.24);
  border-radius: 50%;
}
.accord-orbit::after { inset: 28%; }

.accord-orbit span {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  background: rgba(126,200,184,0.18);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.accord-orbit span:nth-child(1) { left: 48%; top: -11px; }
.accord-orbit span:nth-child(2) { right: 9%; top: 18%; }
.accord-orbit span:nth-child(3) { right: -11px; top: 49%; }
.accord-orbit span:nth-child(4) { right: 18%; bottom: 8%; }
.accord-orbit span:nth-child(5) { left: 13%; bottom: 10%; }
.accord-orbit span:nth-child(6) { left: -11px; top: 42%; }

.accord-core {
  position: absolute;
  inset: 38%;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "DM Mono", monospace;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  animation: orbitTurn 50s linear infinite reverse;
}

@keyframes orbitTurn { to { transform: rotate(360deg); } }

.proof-tablet { background: rgba(232,221,213,0.32); }
.hash-line { font-family: "DM Mono", monospace; letter-spacing: 0.18em; font-size: 0.78rem; color: rgba(61,53,56,0.75); }
.proof-mark { font-size: clamp(9rem, 18vw, 16rem); line-height: 1; color: rgba(201,169,110,0.8); text-shadow: 0 0 50px rgba(126,200,184,0.3); }

.closing-chapter { display: grid; place-items: center; text-align: center; }
.closing-lockup { max-width: 980px; padding: 6vw; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.closing-lockup h1 { color: var(--charcoal); }
.closing-lockup p { max-width: 720px; margin: 2rem auto 0; }

.reveal-block {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-lux), transform 800ms var(--ease-lux);
}
.reveal-block.is-visible,
.is-visible .reveal-block { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .deco-sidebar { width: 96px; }
  .vertical-wordmark { left: -160px; opacity: 0.75; }
  .nav-glyph em, .sidebar-hash { display: none; }
  .folio { margin-left: 96px; }
  .deco-rule { margin-left: 96px; }
  .chapter { padding: 6vh 6vw; }
  .narrative-chapter { grid-template-columns: 1fr; gap: 2rem; }
  .canvas-column { min-height: 42vh; }
}

@media (max-width: 640px) {
  .deco-sidebar { display: none; }
  .folio, .deco-rule { margin-left: 0; }
  .hero-frame { width: 92vw; padding: 8vw; }
  .draw-text { font-size: 118px; }
  h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .ziggurat-frame, .proof-tablet { min-height: 340px; padding: 2rem; }
}