@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Italiana&display=swap');

@font-face {
  font-family: 'HK Gothic Louis G';
  src: url('assets/hk-gothic-light.otf') format('opentype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #0b0a09;
  --ink: #f6f0e7;
  --muted: rgba(246, 240, 231, 0.68);
  --gold: #c7a06b;
  --gold-soft: #e0c49b;
  --progress: 0;
  --scene-position: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  --header-height: 98px;
  font-family: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: auto; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--black);
  font-weight: 300;
}
body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: #15120f;
  background: #f4efe7;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(24px, 4.4vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(16,15,13,.94), rgba(16,15,13,.76));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.wordmark {
  position: absolute;
  left: 50%;
  display: grid;
  gap: 3px;
  text-align: center;
  text-decoration: none;
  transform: translateX(-50%);
}
.wordmark span {
  font-family: 'HK Gothic Louis G', 'DM Sans', sans-serif;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .3em;
}
.wordmark small {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .62em;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.menu-lines { display: grid; gap: 6px; width: 29px; }
.menu-lines i { height: 1px; background: currentColor; }
.header-actions { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); margin-left: auto; }
.chapter-readout { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); font-size: 8px; letter-spacing: .22em; }
.chapter-readout i { width: 30px; height: 1px; background: currentColor; }
.header-cta {
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.3);
  text-decoration: none;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease;
}
.header-cta:hover, .header-cta:focus-visible { color: #14110e; background: #f1eadf; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

.menu-scrim { position: fixed; z-index: 108; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.menu-scrim[hidden] { display: none; }
.site-menu {
  position: fixed;
  z-index: 110;
  inset: 0 auto 0 0;
  width: min(480px, 92vw);
  padding: 30px clamp(28px, 5vw, 58px) 46px;
  overflow-y: auto;
  color: #1a1713;
  background: #f0ece4;
  box-shadow: 30px 0 90px rgba(0,0,0,.36);
  transform: translateX(-104%);
  transition: transform 400ms cubic-bezier(.22,1,.36,1);
}
.site-menu.is-open { transform: translateX(0); }
.menu-topline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,.16); }
.menu-topline > span { font-family: 'HK Gothic Louis G', sans-serif; font-size: 18px; letter-spacing: .18em; }
.menu-topline button { padding: 8px 0; color: inherit; background: none; border: 0; cursor: pointer; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.site-menu nav { display: grid; gap: 17px; padding: 34px 0; }
.site-menu nav a { font-family: 'Italiana', Georgia, serif; font-size: 29px; letter-spacing: .04em; text-decoration: none; transition: opacity 180ms ease; }
.site-menu nav a:hover, .site-menu nav a:focus-visible { opacity: .45; outline: none; }
.site-menu nav a[aria-current='page'] { color: #8c6d45; }
.menu-note { padding-top: 26px; border-top: 1px solid rgba(0,0,0,.16); }
.menu-note span { font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.menu-note p { max-width: 32ch; margin: 12px 0 0; color: rgba(26,23,19,.64); font-size: 13px; line-height: 1.65; }

.scroll-track { height: 760vh; }
.stage {
  position: sticky;
  top: var(--header-height);
  height: calc(100svh - var(--header-height));
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background: #0b0a09;
  perspective: 1400px;
}

.ambient-film { position: absolute; z-index: -6; inset: -8%; overflow: hidden; opacity: .22; }
.ambient-film img { width: 100%; height: 100%; object-fit: cover; filter: blur(42px) saturate(.5) brightness(.45); transform: scale(1.14); }
.ambient-film::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, transparent 0 22%, rgba(5,4,3,.48) 70%, #090807 100%); }

.world { position: absolute; z-index: -3; inset: 0; transform-style: preserve-3d; transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -5px), calc(var(--progress) * 440px)) rotateX(calc(var(--pointer-y) * -1deg)) rotateY(calc(var(--pointer-x) * 1.1deg)); will-change: transform; }
.floor-grid, .ceiling-grid { position: absolute; left: -25%; width: 150%; height: 64%; opacity: .38; background-image: linear-gradient(rgba(199,160,107,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(199,160,107,.18) 1px, transparent 1px); background-size: 88px 88px; }
.floor-grid { bottom: -24%; transform: rotateX(69deg); transform-origin: bottom; mask-image: linear-gradient(to top, #000 28%, transparent 95%); }
.ceiling-grid { top: -29%; transform: rotateX(-69deg); transform-origin: top; mask-image: linear-gradient(to bottom, #000 20%, transparent 92%); }
.hallway-lines { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 0 12%, rgba(199,160,107,.1) 12.1%, transparent 12.3% 87.7%, rgba(199,160,107,.1) 87.9%, transparent 88%), radial-gradient(ellipse at 50% 50%, transparent 0 28%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.72) 100%); }
.portal-frame { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(214,178,125,.2); box-shadow: inset 0 0 50px rgba(199,160,107,.025), 0 0 50px rgba(199,160,107,.025); transform: translate(-50%,-50%); }
.portal-frame--near { width: 83vw; height: 78%; }
.portal-frame--mid { width: 64vw; height: 62%; opacity: .7; }
.portal-frame--far { width: 43vw; height: 44%; opacity: .5; }
.light-column { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(224,196,155,.65), transparent); box-shadow: 0 0 32px rgba(224,196,155,.45); }
.light-column--left { left: 13vw; }
.light-column--right { right: 13vw; }

.scene-stack, .scene { position: absolute; inset: 0; }
.scene { visibility: hidden; opacity: 0; transform-style: preserve-3d; will-change: opacity, transform; }
.scene.is-visible { visibility: visible; }

.scene--hero { display: grid; place-items: center; }
.film-plane {
  position: absolute;
  top: 50%; left: 50%;
  width: min(33vw, 420px);
  aspect-ratio: 9 / 16;
  max-height: 78%;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(207,166,105,.13);
  transform: translate(-50%,-50%) translateZ(-30px);
  overflow: visible;
}
.film-plane video { width: 100%; height: 100%; object-fit: cover; }
.film-edge { position: absolute; top: 4%; bottom: 4%; width: 18px; border: 1px solid rgba(222,191,147,.25); }
.film-edge--left { left: -34px; border-right: 0; }
.film-edge--right { right: -34px; border-left: 0; }
.hero-copy { position: relative; z-index: 3; width: min(1240px, calc(100vw - 48px)); text-align: center; pointer-events: none; }
.eyebrow { margin: 0 0 18px; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: 'Italiana', Georgia, serif; font-weight: 400; line-height: .94; letter-spacing: .015em; text-wrap: balance; }
h1 { font-size: clamp(58px, 9.4vw, 146px); text-shadow: 0 12px 42px rgba(0,0,0,.6); }
h1 em, h2 em { color: var(--gold-soft); font-weight: 400; }
.hero-intro { max-width: 420px; margin: 22px auto 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.entry-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 38px; color: rgba(255,255,255,.62); font-size: 8px; letter-spacing: .32em; text-transform: uppercase; }
.entry-cue i { width: 1px; height: 52px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .35; transform: scaleY(.35); } 50% { opacity: 1; transform: scaleY(1); } }

.scene--chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(34px, 5vw, 86px); padding: clamp(34px, 5vw, 78px) clamp(48px, 10vw, 168px); }
.media-wing, .chapter-card { position: relative; z-index: 3; will-change: opacity, transform; }
.media-wing { display: grid; place-items: center; perspective: 1200px; }
.media-shell { position: relative; width: min(32vw, 390px); aspect-ratio: 9 / 16; max-height: 68svh; border: 1px solid rgba(255,255,255,.2); background: #171410; box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 0 12px rgba(255,255,255,.025); transform: rotateY(7deg) translateZ(24px); overflow: hidden; }
.scene--right .media-shell { transform: rotateY(-7deg) translateZ(24px); }
.media-shell::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(226,192,143,.26); transform: translate(-12px,12px); pointer-events: none; }
.media-shell video { width: 100%; height: 100%; object-fit: cover; }
.media-shell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,7,6,.52)); pointer-events: none; }
.media-caption { position: absolute; z-index: 4; right: 16px; bottom: 15px; font-size: 8px; letter-spacing: .26em; text-transform: uppercase; }
.scene--right .media-wing { order: 2; }
.scene--right .chapter-card { order: 1; }
.chapter-card { width: min(520px, 100%); padding: clamp(28px, 3.6vw, 54px); background: linear-gradient(135deg, rgba(24,21,17,.86), rgba(15,13,11,.5)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 80px rgba(0,0,0,.36); backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8); }
.chapter-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.chapter-index { color: var(--gold-soft); font-family: 'Italiana', Georgia, serif; font-size: 21px; }
.chapter-kicker { color: rgba(255,255,255,.56); font-size: 8px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.chapter-card h2 { margin: 28px 0 16px; font-size: clamp(48px, 5.4vw, 82px); }
.chapter-lead { margin: 0 0 14px !important; color: #f4e1c1 !important; font-family: 'Italiana', Georgia, serif; font-size: clamp(19px, 1.6vw, 25px) !important; line-height: 1.3 !important; }
.chapter-card p { margin: 0; color: var(--muted); font-size: clamp(13px, .95vw, 16px); line-height: 1.7; }
.detail-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.78); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.detail-list li { position: relative; padding-left: 18px; }
.detail-list li::before { content: ''; position: absolute; left: 0; top: .44em; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); }

.scene--final { display: grid; place-items: center; }
.final-orbit { position: absolute; left: 50%; top: 50%; width: min(39vw, 470px); aspect-ratio: 1; border: 1px solid rgba(211,171,113,.2); border-radius: 50%; transform: translate(-50%,-50%) rotateX(68deg) rotateZ(calc(var(--progress) * 120deg)); }
.final-orbit video { position: absolute; left: 50%; top: 50%; width: 48%; aspect-ratio: 9/16; object-fit: cover; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 28px 90px rgba(0,0,0,.7); transform: translate(-50%,-50%) rotateZ(calc(var(--progress) * -120deg)) rotateX(-68deg); }
.final-orbit span { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #e8c891; box-shadow: 0 0 28px #d6ad73; }
.final-copy { position: relative; z-index: 4; width: min(820px, calc(100vw - 48px)); padding: 36px; text-align: center; text-shadow: 0 8px 30px #000; }
.final-copy img { width: 66px; margin: 0 auto 24px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
.final-copy h2 { font-size: clamp(56px, 8vw, 116px); }
.final-copy > p:not(.eyebrow) { max-width: 480px; margin: 24px auto 30px; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.65; }
.primary-cta { display: inline-flex; align-items: center; gap: 30px; padding: 17px 22px; color: #18130e; background: #efe5d6; border: 1px solid #efe5d6; text-decoration: none; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: gap 180ms ease, color 180ms ease, background 180ms ease; }
.primary-cta:hover, .primary-cta:focus-visible { gap: 38px; color: #fff; background: transparent; outline: none; }

.scene-nav { position: absolute; z-index: 50; top: 50%; right: clamp(16px, 2.6vw, 44px); transform: translateY(-50%); }
.scene-nav ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.scene-nav button { position: relative; width: 42px; height: 18px; padding: 0; color: rgba(255,255,255,.5); background: none; border: 0; cursor: pointer; }
.scene-nav button::after { content: ''; position: absolute; right: 0; top: 50%; width: 12px; height: 1px; background: currentColor; transition: width 180ms ease, color 180ms ease; }
.scene-nav button span { position: absolute; right: 30px; top: 50%; opacity: 0; white-space: nowrap; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; transform: translate(8px,-50%); transition: opacity 180ms ease, transform 180ms ease; }
.scene-nav button:hover span, .scene-nav button:focus-visible span, .scene-nav button.is-active span { opacity: 1; transform: translate(0,-50%); }
.scene-nav button.is-active { color: var(--gold-soft); }
.scene-nav button.is-active::after { width: 24px; }
.scene-nav button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.progress-line { position: absolute; z-index: 45; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255,255,255,.08); }
.progress-line span { display: block; width: calc(var(--progress) * 100%); height: 100%; background: linear-gradient(90deg, #8e6a3e, #e4c99f); }
.orientation-cue { position: absolute; z-index: 45; left: clamp(20px, 3vw, 50px); bottom: 24px; margin: 0; color: rgba(255,255,255,.35); font-size: 7px; letter-spacing: .26em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.grain { position: absolute; z-index: 40; inset: -60%; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E"); animation: grain 1.2s steps(2) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(3%,-2%); } 50% { transform: translate(-2%,3%); } 75% { transform: translate(2%,2%); } }
.noscript-note { margin: 120px auto 30px; padding: 20px; max-width: 640px; text-align: center; }

@media (max-width: 900px) {
  :root { --header-height: 82px; }
  .site-header { padding-inline: 20px; }
  .wordmark span { font-size: 22px; }
  .chapter-readout { display: none; }
  .header-cta { padding: 11px 13px; font-size: 7px; }
  .menu-trigger > span:last-child { display: none; }
  .scroll-track { height: 700vh; }
  .scene--chapter { grid-template-columns: 44% 56%; gap: 16px; padding: 30px 52px 30px 26px; }
  .scene--right { grid-template-columns: 56% 44%; }
  .media-shell { width: min(36vw, 320px); }
  .chapter-card { padding: 26px; }
  .chapter-card h2 { margin-top: 22px; font-size: clamp(42px, 8vw, 66px); }
  .detail-list { font-size: 9px; }
  .orientation-cue { display: none; }
  .scene-nav button span { display: none; }
}

@media (max-width: 640px) {
  .site-header { height: var(--header-height); }
  .wordmark { left: 50%; transform: translateX(-50%); }
  .wordmark span { font-size: 17px; letter-spacing: .22em; }
  .wordmark small { font-size: 6px; }
  .header-cta { display: none; }
  .scene-nav { right: 8px; }
  .scene-nav button { width: 28px; }
  .scene--hero { align-items: center; }
  .film-plane { width: min(70vw, 330px); max-height: 72%; opacity: .7; }
  h1 { font-size: clamp(50px, 17vw, 82px); }
  .hero-copy { width: calc(100vw - 40px); }
  .hero-intro { max-width: 280px; }
  .entry-cue { margin-top: 24px; }
  .scene--chapter, .scene--right { grid-template-columns: 1fr; align-content: center; gap: 0; padding: 28px 38px 28px 18px; }
  .media-wing, .scene--right .media-wing { position: absolute; inset: 0; order: initial; opacity: .58; }
  .media-shell, .scene--right .media-shell { width: min(74vw, 330px); max-height: 70svh; transform: translateX(14vw) rotateY(-6deg); filter: brightness(.6); }
  .scene--right .media-shell { transform: translateX(-14vw) rotateY(6deg); }
  .chapter-card, .scene--right .chapter-card { z-index: 5; order: initial; width: min(88vw, 430px); padding: 25px; background: linear-gradient(135deg, rgba(18,16,13,.9), rgba(13,11,9,.72)); }
  .scene--left .chapter-card { margin-right: auto; }
  .scene--right .chapter-card { margin-left: auto; }
  .chapter-card h2 { font-size: clamp(46px, 14vw, 70px); }
  .chapter-card p { font-size: 13px; }
  .detail-list { font-size: 9px; }
  .final-orbit { width: min(86vw, 420px); }
  .final-copy { padding: 22px; }
  .final-copy h2 { font-size: clamp(52px, 16vw, 78px); }
  .final-copy > p:not(.eyebrow) { font-size: 13px; }
  .primary-cta { gap: 16px; padding: 15px 17px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: smooth; }
  .scroll-track { height: auto; }
  .stage { position: relative; top: 0; height: auto; min-height: 0; overflow: visible; perspective: none; }
  .ambient-film, .world, .scene-nav, .progress-line, .orientation-cue, .grain { display: none; }
  .scene-stack { position: relative; }
  .scene { position: relative; min-height: calc(100svh - var(--header-height)); visibility: visible; opacity: 1 !important; transform: none !important; }
  .hero-copy, .media-wing, .chapter-card, .final-copy { opacity: 1 !important; transform: none !important; }
  .entry-cue i { animation: none; }
}