:root {
  --aperture-black: #07090C;
  --graphite: #151A20;
  --wet-concrete: #2A3138;
  --pewter-line: #7E8791;
  --fog-paper: #D9DEE3;
  --blue-steel: #8FA6B8;
  --oxidized-violet: #5C5368;
  --font-main: "Commissioner", sans-serif;
  --font-accent: "Cormorant Garamond", serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--aperture-black);
  color: var(--fog-paper);
  font-family: var(--font-main);
  overflow-x: hidden;
}

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

.grain {
  opacity: .18;
  background-image:
    radial-gradient(circle at 23% 31%, rgba(217, 222, 227, .22) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 66%, rgba(126, 135, 145, .20) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0%, rgba(143, 166, 184, .05) 47%, transparent 52%);
  background-size: 29px 31px, 41px 43px, 100% 100%;
  mix-blend-mode: screen;
}

.scanline {
  opacity: .12;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(217, 222, 227, .08) 8px);
}

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: rgba(126, 135, 145, .28);
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .32em;
}

.premise {
  background:
    radial-gradient(circle at 48% 44%, rgba(42, 49, 56, .76), transparent 29rem),
    radial-gradient(circle at 12% 82%, rgba(92, 83, 104, .18), transparent 28rem),
    var(--aperture-black);
}

.aperture {
  position: absolute;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(7, 9, 12, .08) 0 36%, rgba(21, 26, 32, .78) 37% 55%, rgba(126, 135, 145, .12) 56%, transparent 69%);
  box-shadow: inset 0 0 90px rgba(7, 9, 12, .95), 0 0 120px rgba(143, 166, 184, .08);
  animation: breathe 8s ease-in-out infinite;
}

.aperture span {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(126, 135, 145, .24);
  background: repeating-radial-gradient(circle, rgba(126, 135, 145, .13) 0 1px, transparent 2px 14px);
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.96); filter: blur(.2px); }
  50% { transform: translate(-50%, -50%) scale(1.04); filter: blur(1.1px); }
}

.wordmark {
  position: absolute;
  left: clamp(2rem, 7vw, 7rem);
  bottom: 18vh;
  font-size: clamp(1.6rem, 4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -.07em;
}

.premise-line {
  position: absolute;
  left: 54vw;
  bottom: 29vh;
  width: min(22rem, 36vw);
  color: var(--blue-steel);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
}

.premise-note {
  position: absolute;
  right: 10vw;
  bottom: 12vh;
  max-width: 24rem;
  color: rgba(217, 222, 227, .66);
  font-weight: 300;
  line-height: 1.8;
}

.registry-code,
.micro,
.curved-caption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--pewter-line);
  text-transform: uppercase;
}

.registry-code {
  position: absolute;
  top: 3rem;
  left: 3rem;
  writing-mode: vertical-rl;
}

.reveal-text { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s ease; }
.is-visible .reveal-text { opacity: 1; transform: translateY(0); }
.delay { transition-delay: .35s; }

.archive {
  background:
    linear-gradient(135deg, var(--graphite), var(--aperture-black) 68%),
    var(--graphite);
}

.archive::after,
.proof::after {
  content: "";
  position: absolute;
  inset: 8% -10%;
  background: linear-gradient(102deg, transparent 12%, rgba(217, 222, 227, .05), transparent 29%, rgba(143, 166, 184, .06), transparent 61%);
  transform: rotate(-9deg);
  border: 1px solid rgba(126, 135, 145, .12);
  z-index: -1;
}

.chapter-num {
  position: absolute;
  top: 12vh;
  left: 13vw;
  font-family: var(--font-accent);
  font-size: clamp(7rem, 18vw, 19rem);
  color: rgba(126, 135, 145, .11);
  font-style: italic;
}

.curved-caption {
  position: absolute;
  left: 48vw;
  top: 18vh;
  max-width: 24rem;
  transform: rotate(-6deg);
}

.drawer-field {
  position: absolute;
  inset: 25vh 8vw 12vh 18vw;
}

.drawer {
  position: absolute;
  width: min(31rem, 45vw);
  min-height: 12rem;
  padding: 2.4rem 2rem 2rem 4.5rem;
  background: linear-gradient(90deg, rgba(42, 49, 56, .88), rgba(21, 26, 32, .62));
  border: 1px solid rgba(126, 135, 145, .28);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(217, 222, 227, .08);
  transform: translateX(-34%) rotate(var(--r, -2deg));
  opacity: .58;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease, filter .8s ease;
  filter: blur(.7px);
}

.drawer:nth-child(1) { top: 2%; left: 3%; --r: -5deg; }
.drawer:nth-child(2) { top: 32%; left: 34%; --r: 3deg; }
.drawer:nth-child(3) { top: 58%; left: 12%; --r: -1deg; }
.drawer.is-open, .drawer:hover { transform: translateX(0) rotate(var(--r)); opacity: 1; filter: blur(0); }
.drawer-tab { position: absolute; left: 1.2rem; top: 1.2rem; font: 500 .7rem/1 var(--font-mono); color: var(--blue-steel); writing-mode: vertical-rl; }
.drawer h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 3.4rem); letter-spacing: -.08em; font-weight: 600; text-transform: lowercase; }
.drawer p { max-width: 21rem; margin: 0; color: rgba(217, 222, 227, .68); font-weight: 300; line-height: 1.75; }

.pattern {
  background: radial-gradient(circle at 72% 40%, rgba(92, 83, 104, .24), transparent 24rem), linear-gradient(180deg, var(--aperture-black), var(--wet-concrete));
}

.guilloche {
  position: absolute;
  inset: -14% -6%;
  opacity: .32;
  background:
    repeating-radial-gradient(ellipse at 35% 45%, transparent 0 18px, rgba(143, 166, 184, .23) 19px 20px, transparent 21px 37px),
    repeating-linear-gradient(64deg, rgba(92, 83, 104, .22) 0 2px, transparent 2px 18px);
  clip-path: ellipse(58% 36% at 49% 48%);
  transform: rotate(-8deg);
  animation: drift 16s ease-in-out infinite;
}

@keyframes drift { 50% { transform: rotate(-3deg) translateX(4vw); } }

.blind-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 41%;
  width: 19vw;
  background: repeating-linear-gradient(90deg, rgba(7, 9, 12, .9) 0 10px, rgba(42, 49, 56, .66) 11px 18px);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.is-visible .blind-panel { transform: translateX(18vw); }

.pattern-copy {
  position: absolute;
  top: 20vh;
  left: 11vw;
  width: min(42rem, 58vw);
}
.pattern-copy h2, .proof-core h2, .final h2 { font-size: clamp(2.4rem, 7vw, 7.6rem); line-height: .86; letter-spacing: -.09em; margin: 1rem 0 1.5rem; font-weight: 600; text-transform: lowercase; }
.pattern-copy p, .proof-core p { width: min(27rem, 80%); color: rgba(217, 222, 227, .68); line-height: 1.8; font-weight: 300; }

.definition-tabs {
  position: absolute;
  right: 9vw;
  bottom: 28vh;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.tab {
  color: var(--pewter-line);
  background: rgba(21, 26, 32, .76);
  border: 1px solid rgba(126, 135, 145, .32);
  padding: .8rem 1.6rem;
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .4s ease, border-color .4s ease, transform .4s ease;
}
.tab.is-open, .tab:hover { color: var(--fog-paper); border-color: var(--blue-steel); transform: translateX(-.5rem); }
.definition-window { position: absolute; right: 11vw; bottom: 12vh; width: min(28rem, 40vw); min-height: 9rem; border-top: 1px solid var(--pewter-line); }
.definition { display: none; font-family: var(--font-accent); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.5rem); color: var(--fog-paper); }
.definition.is-open { display: block; animation: unseal .65s ease both; }
@keyframes unseal { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }

.proof { background: radial-gradient(circle at 50% 50%, rgba(42, 49, 56, .82), var(--aperture-black) 62%); }
.orbit { position: absolute; inset: 12vh 12vw; border-radius: 50%; border: 1px solid rgba(126, 135, 145, .18); animation: turn 22s linear infinite; }
.orbit i { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--blue-steel); background: var(--graphite); }
.orbit i:nth-child(1) { left: 8%; top: 48%; } .orbit i:nth-child(2) { right: 14%; top: 18%; } .orbit i:nth-child(3) { right: 28%; bottom: 7%; } .orbit i:nth-child(4) { left: 33%; top: 5%; }
@keyframes turn { to { transform: rotate(360deg); } }
.alignment-lens { position: absolute; width: 18rem; aspect-ratio: 1; border-radius: 50%; left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(143, 166, 184, .18), transparent 62%); border: 1px solid rgba(143, 166, 184, .28); mix-blend-mode: screen; transition: opacity .4s ease; }
.proof-core { position: absolute; left: 36vw; top: 28vh; width: min(39rem, 54vw); text-align: left; }
.fragments span { position: absolute; left: var(--x); top: var(--y); color: rgba(217, 222, 227, .24); font-family: var(--font-accent); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 2.8rem); transition: color .5s ease, filter .5s ease, transform .5s ease; filter: blur(2px); }
.fragments span.is-lit { color: var(--fog-paper); filter: blur(0); transform: scale(1.04); }

.final { background: linear-gradient(160deg, var(--graphite), var(--aperture-black) 56%); }
.final-sheet { position: absolute; left: 10vw; top: 13vh; width: min(56rem, 78vw); padding: clamp(2rem, 5vw, 5rem); background: linear-gradient(135deg, rgba(42, 49, 56, .72), rgba(21, 26, 32, .48)); border: 1px solid rgba(126, 135, 145, .28); clip-path: polygon(0 7%, 88% 0, 100% 83%, 15% 100%); }
.registry-list { list-style: none; margin: 2rem 0 0; padding: 0; width: min(42rem, 92%); }
.registry-list li { display: flex; gap: 1.4rem; padding: 1rem 0; border-top: 1px solid rgba(126, 135, 145, .25); color: rgba(217, 222, 227, .72); font-weight: 300; }
.registry-list span { font-family: var(--font-mono); color: var(--blue-steel); font-size: .72rem; letter-spacing: .18em; }
.closing-mark { position: absolute; right: 8vw; bottom: 8vh; font-size: clamp(4rem, 12vw, 13rem); letter-spacing: -.1em; color: rgba(126, 135, 145, .08); font-weight: 700; }

@media (max-width: 760px) {
  .premise-line, .premise-note, .pattern-copy, .proof-core, .definition-window, .definition-tabs { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin-top: 2rem; }
  .wordmark { left: 2rem; bottom: 22vh; }
  .drawer-field { position: relative; inset: auto; margin-top: 22vh; }
  .drawer { position: relative; width: 100%; left: auto !important; top: auto !important; margin: 1rem 0; transform: none; opacity: 1; filter: none; }
  .final-sheet { left: 1rem; width: calc(100% - 2rem); }
}