:root {
  /* IBM Plex Mono* Mono** only tiny coordinate marks */
  --black: #050403;
  --charcoal: #11100D;
  --gold: #C8A24A;
  --brass: #8A6428;
  --vellum: #F2E4BF;
  --umber: #3B2412;
  --wine: #5C1020;
  --seam-x: 50vw;
  --seam-width: 2px;
  --gold-line-opacity: 0.42;
  --parallax-depth: 0px;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--vellum);
  background: radial-gradient(circle at 48% 10%, rgba(200, 162, 74, 0.11), transparent 26%), linear-gradient(115deg, var(--charcoal), var(--black) 58%, #010100);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 228, 191, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(200, 162, 74, 0.035) 1px, transparent 1px);
  background-size: 7.5vw 100%, 100% 12vh;
  opacity: var(--gold-line-opacity);
  z-index: 6;
  mix-blend-mode: screen;
}

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

.grain {
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242, 228, 191, 0.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 72%, rgba(200, 162, 74, 0.13) 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 36%, rgba(255, 255, 255, 0.12) 0 0.8px, transparent 1.4px);
  background-size: 131px 127px, 173px 181px, 97px 109px;
  animation: dustDrift 20s steps(10) infinite;
}

.gold-wash {
  z-index: 19;
  opacity: 0.34;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(200, 162, 74, 0.16), transparent 18rem);
  mix-blend-mode: screen;
}

#cursor-polish {
  position: fixed;
  width: 13rem;
  height: 13rem;
  margin: -6.5rem 0 0 -6.5rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 22;
  opacity: 0;
  background: radial-gradient(circle, rgba(242, 228, 191, 0.22), rgba(200, 162, 74, 0.08) 34%, transparent 66%);
  transition: opacity 700ms ease;
  mix-blend-mode: screen;
}

.split-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.world {
  position: absolute;
  inset: 0;
  transition: clip-path 420ms cubic-bezier(.2,.7,.1,1);
}

.world-day {
  clip-path: polygon(0 0, var(--seam-x) 0, calc(var(--seam-x) - 5vw) 100%, 0 100%);
  background:
    radial-gradient(circle at 28% 20%, rgba(242, 228, 191, 0.34), transparent 29%),
    linear-gradient(115deg, rgba(242, 228, 191, 0.2), rgba(138, 100, 40, 0.22) 38%, rgba(17, 16, 13, 0.15)),
    repeating-linear-gradient(118deg, rgba(59, 36, 18, 0.18) 0 1px, transparent 1px 18px);
  filter: saturate(0.82);
}

.world-mystery {
  clip-path: polygon(var(--seam-x) 0, 100% 0, 100% 100%, calc(var(--seam-x) - 5vw) 100%);
  background:
    radial-gradient(circle at 72% 45%, rgba(92, 16, 32, 0.18), transparent 23%),
    radial-gradient(circle at 78% 16%, rgba(200, 162, 74, 0.13), transparent 22%),
    linear-gradient(128deg, rgba(17, 16, 13, 0.95), var(--black) 56%, #000);
}

.seam {
  position: absolute;
  top: 0;
  left: var(--seam-x);
  width: var(--seam-width);
  height: 100%;
  transform: translateX(-50%);
  z-index: 4;
  background: linear-gradient(to bottom, transparent, var(--vellum) 9%, var(--gold) 32%, var(--brass) 68%, transparent);
  box-shadow: 0 0 22px rgba(200, 162, 74, 0.85), 0 0 78px rgba(138, 100, 40, 0.45);
}

.seam-glow,
.seam-door {
  position: absolute;
  inset: 0;
  transform: translateX(-50%);
  left: 50%;
}

.seam-glow {
  width: clamp(80px, 14vw, 240px);
  background: linear-gradient(90deg, transparent, rgba(242, 228, 191, 0.18), transparent);
  animation: doorReveal 3.4s cubic-bezier(.22,.8,.18,1) both;
}

.seam-door {
  width: clamp(16px, calc(4vw + 28px * var(--scroll-progress)), 150px);
  border-left: 1px solid rgba(200, 162, 74, 0.28);
  border-right: 1px solid rgba(200, 162, 74, 0.22);
  background: linear-gradient(90deg, transparent, rgba(200, 162, 74, 0.08), transparent);
}

.time-rail {
  position: fixed;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 1.5rem;
  z-index: 30;
  font: 300 0.64rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
}

.time-rail a {
  color: rgba(242, 228, 191, 0.62);
  text-decoration: none;
  writing-mode: vertical-rl;
  border-right: 1px solid rgba(200, 162, 74, 0.33);
  padding-right: 0.48rem;
}

.scene {
  position: relative;
  min-height: 100vh;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 9vh 7vw;
  border: 1px solid rgba(200, 162, 74, 0.18);
  pointer-events: none;
  z-index: -1;
}

[data-depth] {
  transform: translate3d(0, calc(var(--parallax-depth) * var(--depth, 0)), 0);
}

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

.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25vw;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.94), rgba(59, 36, 18, 0.38), rgba(5, 4, 3, 0));
  filter: blur(0.2px);
  z-index: -1;
}

.curtain-left { left: 0; --depth: -0.18; }
.curtain-right { right: 0; --depth: 0.14; transform: scaleX(-1); }

.grid-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.68;
  background:
    linear-gradient(112deg, transparent 47%, rgba(200, 162, 74, 0.28) 47.1%, transparent 47.4%),
    linear-gradient(68deg, transparent 56%, rgba(242, 228, 191, 0.18) 56.1%, transparent 56.35%),
    repeating-linear-gradient(90deg, transparent 0 8vw, rgba(200, 162, 74, 0.12) 8vw calc(8vw + 1px));
}

.grid-hero { --depth: 0.08; animation: lineDraw 5s ease both; }

.hero-copy {
  width: min(86vw, 1040px);
  text-align: center;
  --depth: 0.05;
  animation: titleArrive 2.8s 0.4s cubic-bezier(.2,.8,.1,1) both;
}

.kicker,
.archive-label {
  margin: 0 0 1.2rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.58rem, 0.76vw, 0.78rem);
  font-weight: 300;
  letter-spacing: 0.28em;
  color: rgba(200, 162, 74, 0.85);
  text-transform: uppercase;
}

.wordmark,
.intertitle h2 {
  margin: 0;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: clamp(0.13em, 1.25vw, 0.38em);
  color: var(--vellum);
  text-shadow: 0 0 1px var(--gold), 0 0 36px rgba(200, 162, 74, 0.2);
}

.wordmark {
  font-size: clamp(3.9rem, 12vw, 12.8rem);
  line-height: 0.9;
}

.wordmark i {
  color: var(--gold);
  font-style: normal;
  margin: 0 0.02em;
}

.serif-line,
.intertitle p:not(.kicker),
.closing-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(242, 228, 191, 0.86);
}

.serif-line {
  max-width: 640px;
  margin: 1.4rem auto 0;
}

.artifact,
.glass-slab,
.sealed-envelope,
.dossier-stack,
.compass {
  position: absolute;
  border: 1px solid rgba(200, 162, 74, 0.3);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55), inset 0 0 32px rgba(242, 228, 191, 0.04);
}

.vellum-map {
  left: 8vw;
  top: 14vh;
  width: clamp(220px, 25vw, 410px);
  min-height: 300px;
  padding: 1.2rem;
  --depth: 0.22;
  color: var(--umber);
  background: linear-gradient(135deg, rgba(242, 228, 191, 0.86), rgba(200, 162, 74, 0.28));
  transform: rotate(-7deg);
  opacity: 0.82;
}

.vellum-map svg {
  width: 100%;
  margin-top: 1rem;
  fill: none;
  stroke: rgba(59, 36, 18, 0.75);
  stroke-width: 1;
}

.noon-mark {
  position: absolute;
  right: 16vw;
  bottom: 16vh;
  --depth: 0.18;
  width: 7rem;
  height: 7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 74, 0.56);
  color: var(--gold);
  font: 300 2rem/1 Oswald, sans-serif;
  letter-spacing: 0.12em;
  box-shadow: 0 0 0 1.2rem rgba(200, 162, 74, 0.045), inset 0 0 38px rgba(200, 162, 74, 0.13);
}

.scene-cabinet,
.scene-banquet,
.scene-aperture {
  display: grid;
  align-items: center;
}

.intertitle {
  width: min(560px, 74vw);
  margin-left: 11vw;
  --depth: 0.04;
}

.intertitle h2 {
  font-size: clamp(2.8rem, 7vw, 7.2rem);
  line-height: 0.93;
}

.intertitle p:not(.kicker) {
  line-height: 1.3;
  margin-top: 1.4rem;
}

.perspective {
  --depth: 0.12;
  opacity: 0.55;
  transform-origin: 80% 50%;
  background:
    conic-gradient(from 90deg at var(--seam-x) 50%, transparent, rgba(200, 162, 74, 0.2), transparent 28%),
    repeating-linear-gradient(102deg, transparent 0 70px, rgba(200, 162, 74, 0.13) 71px 72px);
}

.glass-slab {
  right: 11vw;
  top: 18vh;
  width: clamp(260px, 29vw, 480px);
  height: 58vh;
  --depth: 0.2;
  background: linear-gradient(135deg, rgba(5, 4, 3, 0.64), rgba(242, 228, 191, 0.06));
  backdrop-filter: blur(7px);
}

.glass-slab .archive-label { display: block; padding: 1rem; }

.watch-face {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(200, 162, 74, 0.55);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.watch-face span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 48%;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: 0 0;
}

.watch-face span:nth-child(1) { transform: rotate(0deg); }
.watch-face span:nth-child(2) { transform: rotate(72deg); }
.watch-face span:nth-child(3) { transform: rotate(151deg); }
.watch-face span:nth-child(4) { transform: rotate(236deg); }
.watch-face strong {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font: 300 3.2rem/1 Oswald, sans-serif;
}

.sealed-envelope {
  left: calc(var(--seam-x) - 12rem);
  bottom: 13vh;
  width: 24rem;
  height: 12rem;
  --depth: 0.28;
  background: linear-gradient(140deg, rgba(242, 228, 191, 0.74), rgba(138, 100, 40, 0.35));
  color: var(--umber);
  transform: rotate(3deg);
}

.sealed-envelope::before,
.sealed-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(32deg, transparent 49.7%, rgba(59, 36, 18, 0.33) 50%, transparent 50.3%);
}

.sealed-envelope::after { transform: scaleY(-1); }

.wax-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 4.8rem;
  height: 4.8rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #7d1b2b, var(--wine));
  color: var(--gold);
  box-shadow: inset 0 0 18px rgba(5, 4, 3, 0.5), 0 10px 30px rgba(92, 16, 32, 0.35);
  font-size: 2rem;
}

.hidden-phrase {
  position: absolute;
  left: 1rem;
  bottom: 0.8rem;
  z-index: 3;
  margin: 0;
  font: 400 0.68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.18em;
  color: rgba(59, 36, 18, 0);
  text-shadow: 0 0 14px transparent;
  transition: color 900ms ease, text-shadow 900ms ease;
}

.hidden-phrase.revealed {
  color: rgba(59, 36, 18, 0.95);
  text-shadow: 0 0 10px rgba(200, 162, 74, 0.4);
}

.marble-table {
  position: absolute;
  inset: 14vh 0 0;
  --depth: 0.04;
  background:
    linear-gradient(138deg, rgba(242, 228, 191, 0.05), transparent 30%),
    repeating-linear-gradient(122deg, transparent 0 38px, rgba(242, 228, 191, 0.035) 39px 40px),
    radial-gradient(ellipse at 55% 70%, rgba(138, 100, 40, 0.18), transparent 45%);
}

.banquet-title {
  margin-left: auto;
  margin-right: 10vw;
  text-align: right;
  --depth: 0.09;
}

.aperture-ring {
  position: absolute;
  left: 8vw;
  top: 14vh;
  width: clamp(280px, 38vw, 620px);
  aspect-ratio: 1;
  --depth: 0.18;
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 74, 0.5);
  background: radial-gradient(circle, transparent 32%, rgba(200, 162, 74, 0.08) 33%, transparent 34%), radial-gradient(circle, rgba(5, 4, 3, 0.92), transparent 58%);
  animation: slowTurn 28s linear infinite;
}

.aperture-ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 50%;
  transform-origin: 0 0;
  background: linear-gradient(var(--gold), transparent);
}

.aperture-ring span:nth-child(1) { transform: rotate(0deg); }
.aperture-ring span:nth-child(2) { transform: rotate(60deg); }
.aperture-ring span:nth-child(3) { transform: rotate(120deg); }
.aperture-ring span:nth-child(4) { transform: rotate(180deg); }
.aperture-ring span:nth-child(5) { transform: rotate(240deg); }
.aperture-ring span:nth-child(6) { transform: rotate(300deg); }

.dossier-stack {
  right: 12vw;
  bottom: 9vh;
  width: 28rem;
  height: 17rem;
  --depth: 0.25;
  border: 0;
  box-shadow: none;
}

.paper {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200, 162, 74, 0.35);
  background: rgba(242, 228, 191, 0.88);
  color: var(--umber);
  transform-origin: 50% 100%;
}

.paper span {
  position: absolute;
  left: 1.2rem;
  top: 1rem;
  font: 400 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.2em;
}

.paper-one { transform: rotate(-8deg) translate(-1.2rem, 1rem); opacity: 0.6; }
.paper-two { transform: rotate(4deg) translate(1rem, -0.3rem); opacity: 0.8; }
.paper-three { transform: rotate(-1deg); }

.scene-aperture { place-items: center; text-align: center; }

.final-orbit,
.eclipse-disc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.final-orbit {
  width: 78vmin;
  height: 78vmin;
  --depth: 0.12;
  border: 1px solid rgba(200, 162, 74, 0.36);
  box-shadow: inset 0 0 120px rgba(200, 162, 74, 0.06);
}

.eclipse-disc {
  left: calc(var(--seam-x) - 14vmin);
  top: 28vh;
  width: 28vmin;
  height: 28vmin;
  --depth: 0.2;
  background: radial-gradient(circle at 46% 46%, var(--black) 0 48%, rgba(200, 162, 74, 0.82) 49%, rgba(138, 100, 40, 0.1) 53%, transparent 56%);
  filter: drop-shadow(0 0 45px rgba(200, 162, 74, 0.28));
  transition: filter 700ms ease;
}

.eclipse-disc.aligned { filter: drop-shadow(0 0 80px rgba(242, 228, 191, 0.48)); }

.final-title {
  margin: 0;
  --depth: 0.03;
}

.compass {
  right: 9vw;
  bottom: 13vh;
  width: 11rem;
  height: 11rem;
  --depth: 0.24;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(5, 4, 3, 0.46);
}

.compass::before,
.compass::after {
  content: "";
  position: absolute;
  background: rgba(200, 162, 74, 0.45);
}

.compass::before { width: 1px; height: 100%; }
.compass::after { width: 100%; height: 1px; }

.compass span {
  position: absolute;
  font: 300 0.75rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.compass span:nth-child(1) { top: 0.75rem; }
.compass span:nth-child(2) { right: 0.75rem; }
.compass span:nth-child(3) { bottom: 0.75rem; }
.compass span:nth-child(4) { left: 0.75rem; color: var(--wine); }

.closing-line {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(200, 162, 74, 0.75);
  letter-spacing: 0.24em;
}

.polishable {
  transition: box-shadow 500ms ease, border-color 500ms ease, color 500ms ease;
}

.polishable.polished {
  border-color: rgba(242, 228, 191, 0.88);
  box-shadow: 0 0 34px rgba(200, 162, 74, 0.34), inset 0 0 24px rgba(242, 228, 191, 0.11);
  color: var(--vellum);
}

@keyframes titleArrive {
  from { opacity: 0; letter-spacing: 0.62em; filter: blur(10px); transform: translateY(1.5rem); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes doorReveal {
  0% { width: 0; opacity: 0; }
  40% { opacity: 1; }
  100% { width: clamp(80px, 14vw, 240px); opacity: 1; }
}

@keyframes lineDraw {
  from { clip-path: inset(0 50% 0 50%); opacity: 0; }
  to { clip-path: inset(0); opacity: 0.68; }
}

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

@keyframes dustDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2rem, -1.2rem); }
}

@media (max-width: 760px) {
  :root { --seam-width: 1px; }
  .time-rail { display: none; }
  .scene::after { inset: 7vh 5vw; }
  .wordmark { font-size: clamp(3.3rem, 17vw, 6rem); letter-spacing: 0.08em; }
  .vellum-map, .glass-slab, .sealed-envelope, .dossier-stack, .compass { opacity: 0.72; transform: scale(0.82); }
  .vellum-map { left: -4rem; top: 10vh; }
  .glass-slab { right: -5rem; }
  .sealed-envelope { left: 9vw; width: 19rem; }
  .banquet-title, .intertitle { margin-left: 8vw; margin-right: 8vw; text-align: left; }
  .dossier-stack { right: -6rem; width: 22rem; }
}