/* ══════════════════════════════════════════════════════════════════════════
   THE RAJMAHAL PALACE
   tokens → type → chrome → the film → scenes → footer → responsive → reduced
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --sapphire: #0A0E1A;
  --ivory:    #F5F0E8;
  --gold:     #C9A96E;
  --teal:     #1B3A4B;

  /* Semantic pair — tweened by the footer theme inversion. */
  --bg: var(--sapphire);
  --fg: var(--ivory);

  --gold-dim:  rgba(201, 169, 110, .34);
  --gold-hair: rgba(201, 169, 110, .18);
  --fg-soft:   rgba(245, 240, 232, .62);
  --fg-faint:  rgba(245, 240, 232, .34);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gut: clamp(1.5rem, 4.4vw, 5rem);
  --bay: clamp(6rem, 16vh, 13rem);

  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, dl, dd, figure { margin: 0; }

html, body { background: var(--bg); }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` not `hidden`: overflow:hidden makes the body a scroll container,
     which silently breaks position:sticky on the film stage. */
  overflow-x: clip;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--sapphire); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(.58rem, .72vw, .7rem);
  font-weight: 500;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 clamp(1.4rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  max-width: 5.5rem;
  height: 1px;
  background: var(--gold-dim);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 0 0 5.5rem;
  height: 1px;
  background: var(--gold-dim);
}

.display {
  font-family: var(--serif);
  font-weight: 200;
  font-optical-sizing: auto;
  line-height: .96;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.display--hero {
  font-size: clamp(3.1rem, 9.2vw, 11rem);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  max-width: 15ch;
}
.display--italic { font-style: italic; font-weight: 250; }

.display--section {
  font-size: clamp(2.1rem, 4.6vw, 4.4rem);
  font-variation-settings: "opsz" 96;
  line-height: 1.02;
  max-width: 18ch;
}

.display--finale {
  font-size: clamp(2rem, 5.2vw, 5.2rem);
  font-variation-settings: "opsz" 120;
  line-height: 1.08;
  max-width: 19ch;
  margin-inline: auto;
}
.display--finale em { font-style: italic; font-weight: 250; }

.body {
  font-size: clamp(.94rem, 1.06vw, 1.06rem);
  font-weight: 300;
  line-height: 1.7;
  max-width: 65ch;
  color: var(--fg-soft);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.stat__num, .chapters span, .preloader__count, .suite__price, .suite__idx {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

/* ── Split-text primitives (own splitter, no paid plugin) ──────────────── */
.w, .ln {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.w-i, .ln-i { display: inline-block; will-change: transform; }
/* Each .ln was measured as exactly one visual line — hold it to one row. */
.ln-i { white-space: nowrap; }
/* The mask only needs to clip vertically. The extra width is empty slack so
   sub-pixel rounding on the rebuilt line can never shave the last glyph. */
.ln {
  display: block;
  width: calc(100% + 2em);
  padding-right: 2em;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHROME
   ══════════════════════════════════════════════════════════════════════════ */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 9000;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-6%, -4%); }
  25%  { transform: translate(4%, -7%); }
  37%  { transform: translate(-3%, 5%); }
  50%  { transform: translate(7%, 3%); }
  62%  { transform: translate(-7%, 2%); }
  75%  { transform: translate(3%, 6%); }
  87%  { transform: translate(-4%, -6%); }
}

/* ── Custom cursor ─────────────────────────────────────────────────────── */
.cursor { display: none; }
body.has-cursor .cursor {
  display: block;
  position: fixed;
  top: 0; left: 0;
  z-index: 9500;
  pointer-events: none;
  mix-blend-mode: difference;
}
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }

.cursor__dot, .cursor__ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__dot { width: 6px; height: 6px; background: var(--gold); }
.cursor__ring {
  width: 74px; height: 74px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  opacity: 0;
}
.cursor__label {
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) var(--gut);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  mix-blend-mode: difference;
}
.nav__brand {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  letter-spacing: .04em;
  color: var(--ivory);
}
.nav__brand-sub {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: .7em;
  vertical-align: .28em;
}
.nav__links { display: flex; gap: clamp(1.4rem, 2.6vw, 2.9rem); }
.nav__links a, .nav__cta {
  position: relative;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-bottom: .35em;
}
.nav__links a::after, .nav__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.nav__links a:hover::after, .nav__cta:hover::after { transform: scaleX(1); }
.nav__cta { color: var(--gold); }
.nav__cta::after { transform: scaleX(1); transform-origin: right; }
.nav__cta:hover::after { transform: scaleX(0); }

/* ── Fixed chapter numerals ────────────────────────────────────────────── */
.chapters {
  position: fixed;
  left: var(--gut);
  top: 50%;
  translate: 0 -50%;
  z-index: 700;
  pointer-events: none;
  display: grid;
}
.chapters span {
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--gold);
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FILM — one sticky stage, six stacked scenes
   ══════════════════════════════════════════════════════════════════════════ */
.film-wrap {
  position: relative;
  width: 100%;
  /* height is written by JS from the sum of each scene's data-vh */
}

.film {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--sapphire);
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}
/* First frame is painted before JS runs, so the page is never black. */
.scene[data-scene="1"] { opacity: 1; }

.scene__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, clip-path;
}
.scene__video, .scene__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__still { z-index: 0; }
.scene__video { z-index: 1; opacity: 0; }
.scene__video.is-ready { opacity: 1; }

/* Oversized inner video for the parallax drift in scene 4. */
.scene__media--parallax .scene__video,
.scene__media--parallax .scene__still { height: 118%; top: -9%; }

/* ── Scrims ────────────────────────────────────────────────────────────── */
.scene__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10, 14, 26, .58) 0%,
      rgba(10, 14, 26, .18) 34%,
      rgba(10, 14, 26, .30) 62%,
      rgba(10, 14, 26, .78) 100%);
}
.scene__scrim--left {
  background:
    linear-gradient(to right, rgba(10, 14, 26, .84) 0%, rgba(10, 14, 26, .34) 44%, rgba(10, 14, 26, 0) 74%),
    linear-gradient(to bottom, rgba(10, 14, 26, .48) 0%, rgba(10, 14, 26, .16) 40%, rgba(10, 14, 26, .70) 100%);
}
.scene__scrim--right {
  background:
    linear-gradient(to left, rgba(10, 14, 26, .62) 0%, rgba(10, 14, 26, .18) 46%, rgba(10, 14, 26, 0) 76%),
    linear-gradient(to bottom, rgba(10, 14, 26, .40) 0%, rgba(10, 14, 26, .12) 44%, rgba(10, 14, 26, .58) 100%);
}
.scene__scrim--heavy {
  background: linear-gradient(to bottom, rgba(10, 14, 26, .74) 0%, rgba(10, 14, 26, .52) 45%, rgba(10, 14, 26, .88) 100%);
}
.scene__scrim--soft {
  background: linear-gradient(to bottom, rgba(10, 14, 26, .34) 0%, rgba(10, 14, 26, .10) 45%, rgba(10, 14, 26, .52) 100%);
}

/* Vignette lives on the stage, not the scene, so it never cross-fades. */
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(90px, 15vw, 240px) clamp(30px, 5vw, 90px) rgba(10, 14, 26, .72);
}

/* ── Overlays ──────────────────────────────────────────────────────────── */
.ov {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: calc(var(--bay) * .62) var(--gut);
  pointer-events: none;
  will-change: opacity, transform;
}
.ov > * { pointer-events: auto; }

.ov--center { align-items: center; justify-content: center; text-align: center; }
.ov--edge   { justify-content: center; }
.ov--bottom { justify-content: flex-end; }

/* Hero's two headlines share a cell so they can cross-fade in place. */
.stack { display: grid; place-items: center; }
.stack > * { grid-area: 1 / 1; }
.ov--center .eyebrow { margin-bottom: clamp(2.4rem, 5vw, 4.4rem); }

/* ── Scroll cue ────────────────────────────────────────────────────────── */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 5vh, 3.6rem);
  translate: -50% 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: clamp(46px, 7vh, 74px);
  background: rgba(245, 240, 232, .16);
  overflow: hidden;
}
.scroll-cue__line i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: top;
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-cue__label {
  font-size: .53rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ── Chapter progress hairline ─────────────────────────────────────────── */
.rail {
  position: absolute;
  right: var(--gut);
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: clamp(80px, 16vh, 150px);
  background: rgba(245, 240, 232, .13);
  z-index: 40;
}
.rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   SCENE 2 — sliding lines + jali
   ══════════════════════════════════════════════════════════════════════════ */
.slide-lines { display: flex; flex-direction: column; gap: clamp(.1rem, .4vw, .4rem); }
.slide-line {
  display: block;
  font-family: var(--serif);
  font-weight: 200;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.3rem, 7.4vw, 8.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  will-change: transform;
}
.slide-line:nth-child(2) { font-style: italic; color: var(--gold); }
.slide-line:nth-child(3) { padding-left: clamp(0rem, 8vw, 9rem); }

.jali {
  position: absolute;
  inset: 0;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   SCENE 3 — floating ivory panel
   ══════════════════════════════════════════════════════════════════════════ */
.panel {
  position: absolute;
  top: 50%;
  right: var(--gut);
  translate: 0 -50%;
  z-index: 22;
  width: min(44vw, 640px);
  max-height: 82svh;
  overflow: hidden;
  padding: clamp(1.9rem, 3.2vw, 3.4rem);
  background: var(--ivory);
  color: var(--sapphire);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  will-change: transform, opacity;
}
.panel .eyebrow { color: #8A6D34; }
.panel .eyebrow::after { background: rgba(138, 109, 52, .34); }
.panel .body { color: rgba(10, 14, 26, .66); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
  padding-top: clamp(1.3rem, 2.2vw, 2rem);
  border-top: 1px solid rgba(138, 109, 52, .26);
}
.stat { display: flex; flex-direction: column; gap: .5rem; }
.stat__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #8A6D34;
}
.stat__label {
  margin: 0;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(10, 14, 26, .5);
}

/* ══════════════════════════════════════════════════════════════════════════
   SCENE 4 — horizontal suite strip
   ══════════════════════════════════════════════════════════════════════════ */
.ov--strip {
  justify-content: center;
  gap: clamp(2rem, 5vh, 4rem);
  padding-inline: 0;
}
.hstrip__head { padding-inline: var(--gut); }

.hstrip__track {
  display: flex;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  padding-left: var(--gut);
  padding-right: clamp(var(--gut), 26vw, 30rem);
  width: max-content;
  will-change: transform;
}

.suite {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 38vw, 540px);
  padding: clamp(1.7rem, 2.6vw, 2.6rem);
  border: 1px solid var(--gold-hair);
  /* Solid enough to carry contrast on its own — the blur is an enhancement,
     not a dependency, since `will-change` on the scene can isolate the
     backdrop root and drop it entirely. */
  background: rgba(9, 13, 24, .62);
  backdrop-filter: blur(11px) saturate(1.1);
  -webkit-backdrop-filter: blur(11px) saturate(1.1);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition:
    transform .7s var(--ease-out),
    border-color .7s var(--ease-out),
    box-shadow .7s var(--ease-out),
    background-color .7s var(--ease-out);
}
.suite:hover {
  transform: translateY(-10px);
  border-color: var(--gold);
  background: rgba(9, 13, 24, .76);
  box-shadow:
    0 26px 60px -22px rgba(0, 0, 0, .8),
    0 0 44px -12px rgba(201, 169, 110, .3);
}
.suite__idx {
  font-family: var(--serif);
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--gold);
}
.suite__name {
  font-family: var(--serif);
  font-weight: 250;
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 1.85vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.suite__line {
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--fg-soft);
  flex: 1 1 auto;
}
.suite__price {
  margin-top: .4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-hair);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--gold);
}
.suite__price span {
  color: var(--fg-faint);
  letter-spacing: .18em;
  font-size: .62rem;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCENE 5 — drifting keywords (arch clip-path is written by JS)
   ══════════════════════════════════════════════════════════════════════════ */
.drift { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
.drift__word {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  color: var(--ivory);
  text-shadow: 0 2px 40px rgba(10, 14, 26, .85);
  will-change: transform;
}
.drift__word:nth-child(1) { top: 22%; left: 9%;   font-size: clamp(1.6rem, 4.2vw, 4.4rem); }
.drift__word:nth-child(2) { top: 47%; right: 11%; left: auto; font-size: clamp(1.2rem, 2.9vw, 3.1rem); color: var(--gold); }
.drift__word:nth-child(3) { top: 69%; left: 26%;  font-size: clamp(1.9rem, 5.4vw, 5.8rem); }

/* ══════════════════════════════════════════════════════════════════════════
   SCENE 6 — CTA
   ══════════════════════════════════════════════════════════════════════════ */
.cta-wrap {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1rem, 1.7vw, 1.5rem) clamp(2.4rem, 4.4vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-hair);
}
.cta__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* width/height are set as attributes by JS — Safari is unreliable with the
   CSS geometry properties on <rect>. */
.cta__border rect { fill: none; stroke: var(--gold); stroke-width: 1; }
.cta__sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(201, 169, 110, .16) 46%,
    rgba(201, 169, 110, .30) 50%,
    rgba(201, 169, 110, .16) 54%,
    transparent 70%);
  transform: translateX(-115%);
}
.cta__text {
  font-family: var(--sans);
  font-size: clamp(.68rem, .86vw, .8rem);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MISSING-ASSET PLACEHOLDER
   ══════════════════════════════════════════════════════════════════════════ */
.scene__media.is-missing .scene__video,
.scene__media.is-missing .scene__still { display: none; }
.scene__media.is-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 18%, #14203A 0%, #0A0E1A 62%),
    linear-gradient(160deg, #0E1A2E 0%, #0A0E1A 55%, #10182B 100%);
}
.scene__media.is-missing::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 2;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(201, 169, 110, .05) 46%,
    rgba(201, 169, 110, .16) 50%,
    rgba(201, 169, 110, .05) 54%,
    transparent 62%);
  animation: shimmer 6.5s var(--ease-soft) infinite;
}
@keyframes shimmer {
  0%, 100% { transform: translateX(-42%); }
  50%      { transform: translateX(42%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  z-index: 100;
  background: var(--bg);
  color: var(--fg);
  padding: var(--bay) var(--gut) clamp(2rem, 4vw, 3rem);
}
.footer__jali { position: absolute; inset: 0 0 auto 0; color: var(--gold); opacity: .5; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  padding-bottom: clamp(3.4rem, 7vw, 6rem);
}
.footer__col { display: flex; flex-direction: column; gap: .95rem; align-items: flex-start; }
.footer__mark {
  font-family: var(--serif);
  font-weight: 250;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.footer__addr, .footer__note {
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: .58;
}
.footer__h {
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.footer__col a {
  position: relative;
  font-size: .86rem;
  font-weight: 300;
  opacity: .74;
  padding-bottom: .18em;
  transition: opacity .4s var(--ease-out);
}
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.footer__col a:hover { opacity: 1; }
.footer__col a:hover::after { transform: scaleX(1); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--gold-dim);
  font-size: .7rem;
  font-weight: 300;
  opacity: .5;
  letter-spacing: .06em;
}
.footer__fine { font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .panel { width: min(58vw, 560px); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .chapters { display: none; }
}

@media (max-width: 768px) {
  :root { --bay: clamp(4rem, 12vh, 7rem); }

  .nav__links { display: none; }
  .rail { right: calc(var(--gut) * .5); height: 70px; }

  .display--hero { font-size: clamp(2.8rem, 13.5vw, 5rem); max-width: 12ch; }
  .display--section { font-size: clamp(1.85rem, 7.6vw, 3rem); }
  .display--finale { font-size: clamp(1.8rem, 8vw, 3rem); }
  .slide-line { font-size: clamp(2rem, 11.5vw, 4.4rem); }
  .slide-line:nth-child(3) { padding-left: 1.5rem; }

  /* Panel drops to a full-width card anchored near the bottom. */
  .panel {
    top: auto;
    bottom: clamp(1.5rem, 5vh, 3rem);
    right: var(--gut);
    left: var(--gut);
    width: auto;
    translate: 0 0;
    max-height: 66svh;
    padding: 1.5rem 1.4rem;
  }
  .panel .body { font-size: .86rem; margin-top: 1rem; }
  .stats { gap: 1.1rem; margin-top: 1.3rem; padding-top: 1rem; }
  .stat__num { font-size: 1.5rem; }

  .suite { width: 78vw; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.6rem; }

  .drift__word:nth-child(1) { top: 16%; left: 7%; }
  .drift__word:nth-child(2) { top: 40%; right: 7%; }
  .drift__word:nth-child(3) { top: 60%; left: 18%; }

  .eyebrow { letter-spacing: .26em; font-size: .55rem; gap: .8em; }
  .eyebrow--center::before { display: none; }
  .eyebrow--center::after { max-width: 2.2rem; }
}

@media (hover: none), (pointer: coarse) {
  body.has-cursor { cursor: auto; }
  body.has-cursor .cursor { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   The film unsticks and the six scenes become ordinary stacked blocks.
   No scrubbing, no pinning, no Lenis — JS skips all of it too.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .scroll-cue__line i { animation: none; transform: scaleY(1); }

  .film-wrap { height: auto !important; }
  .film { position: static; height: auto; overflow: visible; }
  .film::after { display: none; }

  .scene {
    position: relative;
    inset: auto;
    min-height: 100svh;
    opacity: 1 !important;
  }
  .scene__video { display: none; }
  .scene__media { clip-path: none !important; }

  .ov { position: absolute; }

  /* Both hero lines read one after the other instead of sharing a cell. */
  .stack { display: block; text-align: center; }
  .stack > * { grid-area: auto; }
  .stack .display--hero + .display--hero { margin-top: .12em; }

  .hstrip__track {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    padding-right: var(--gut);
  }
  .suite { scroll-snap-align: center; }

  .drift__word { transform: none !important; opacity: .8; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRELOADER
   ══════════════════════════════════════════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: var(--sapphire);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.preloader.is-done { pointer-events: none; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.preloader__word {
  display: flex;
  font-family: var(--serif);
  font-weight: 200;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.9rem, 6.4vw, 5.2rem);
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1;
  color: var(--ivory);
}
.preloader__word span { opacity: 0; will-change: transform, opacity; }
.preloader__rule {
  width: clamp(150px, 34vw, 460px);
  height: 1px;
  background: rgba(201, 169, 110, .16);
}
.preloader__rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}
.preloader__count {
  font-family: var(--serif);
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .2em;
  color: var(--gold);
}

body:not(.is-loaded) { overflow: hidden; }