/* ============================================================
   NUQTA — saturated color-field luxury.
   Tokens first; every color and size derives from these.
   ============================================================ */

/* ---------- fallback font metrics (no layout shift) ---------- */
@font-face {
  font-family: "Fraunces-fb";
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "SpaceGrotesk-fb";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 99%;
}
@font-face {
  font-family: "Amiri-fb";
  src: local("Geeza Pro"), local("Times New Roman");
  size-adjust: 102%;
}

:root {
  /* neutrals */
  --ink: #0d0b10;
  --cream: #f5efe6;
  --gold: #c9a15c;

  /* live color world — JS drives these every frame (defaults: LAYL) */
  --w-core: #5b2ebf;
  --w-deep: #1e0e4e;
  --w-glow: #9d7bff;
  --w-base: #150c2e;
  --w-core-rgb: 91 46 191;
  --w-deep-rgb: 30 14 78;
  --w-glow-rgb: 157 123 255;

  /* gradient drift positions — JS drives these (dt-normalized) */
  --g1x: 30%; --g1y: 30%;
  --g2x: 75%; --g2y: 70%;
  --g3x: 55%; --g3y: 10%;

  /* type */
  --font-display: "Fraunces", "Fraunces-fb", Georgia, serif;
  --font-body: "Space Grotesk", "SpaceGrotesk-fb", Arial, sans-serif;
  --font-ar: "Amiri", "Amiri-fb", serif;

  --fs-hero: clamp(88px, 17vw, 320px);
  --fs-name: clamp(64px, 11.5vw, 210px);
  --fs-manifesto: clamp(30px, 5vw, 82px);
  --fs-title: clamp(38px, 5.5vw, 92px);
  --fs-line: clamp(17px, 1.6vw, 24px);
  --fs-body: clamp(15px, 1.15vw, 17px);

  /* layers */
  --z-under: 4;
  --z-gl: 10;
  --z-main: 20;
  --z-grain: 40;
  --z-nav: 100;
  --z-cursor: 200;
  --z-preloader: 300;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color-scheme: dark; scrollbar-width: thin; scrollbar-color: rgba(201, 161, 92, 0.35) transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(245 239 230 / 0.72);
}
.ghost {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1px solid rgb(245 239 230 / 0.38);
  border-radius: 999px;
  color: var(--cream);
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
  cursor: pointer;
}
.ghost:hover { border-color: var(--gold); background: rgb(245 239 230 / 0.08); }

/* ---------- the color field ---------- */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  transform: translateZ(0); /* own compositor layer: repaints stay contained */
  background-color: var(--w-base);
  background-image:
    radial-gradient(90vmax 90vmax at var(--g1x) var(--g1y), rgb(var(--w-core-rgb)) 0%, rgb(var(--w-core-rgb) / 0) 62%),
    radial-gradient(70vmax 70vmax at var(--g2x) var(--g2y), rgb(var(--w-glow-rgb) / 0.32) 0%, rgb(var(--w-glow-rgb) / 0) 58%),
    radial-gradient(115vmax 115vmax at var(--g3x) var(--g3y), rgb(var(--w-deep-rgb)) 0%, rgb(var(--w-deep-rgb) / 0) 75%);
}

/* ---------- film grain ---------- */
.grain {
  position: fixed;
  inset: -100px;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  animation: grainMove 0.9s steps(6) infinite;
}
@keyframes grainMove {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-38px, 22px, 0); }
  40% { transform: translate3d(24px, -44px, 0); }
  60% { transform: translate3d(-52px, -18px, 0); }
  80% { transform: translate3d(40px, 36px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* fixed blend-mode texture layers are a desktop luxury (studio standard):
   on phones they cost scroll repaints for texture the panel barely shows */
@media (pointer: coarse) {
  .grain { display: none; }
}

/* ---------- layers under the canvas ---------- */
.under {
  position: fixed;
  inset: 0;
  z-index: var(--z-under);
  pointer-events: none;
}
/* hero wordmark rides ABOVE the bottle and fades away as the zoom begins */
.over-hero {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.hero-word {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 16px);
  will-change: transform, opacity;
}
.hero-ar {
  font-family: var(--font-ar);
  font-size: clamp(26px, 4.4vw, 64px);
  color: rgb(245 239 230 / 0.45);
  line-height: 1;
}
.hero-en {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--cream);
  display: flex;
}
.hero-en .char { display: inline-block; overflow: hidden; }
.hero-en .char-in { display: inline-block; will-change: transform; }

.glyphs { position: absolute; inset: 0; }
.glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ar);
  font-size: clamp(280px, 44vw, 720px);
  line-height: 1;
  color: var(--cream);
  opacity: 0;
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* ---------- per-fragrance atmospheres (chapter backdrops) ---------- */
.atmos-layer { position: absolute; inset: 0; }
.atmos {
  position: absolute;
  width: 74vw;
  height: 74vw;
  top: 2vh;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 95%);
  will-change: transform, opacity;
  transform: translateZ(0);
}
.atmos:nth-child(odd) { left: -18vw; }
.atmos:nth-child(even) { right: -18vw; top: 8vh; }
.atmos img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.atmos img.loaded { opacity: 1; }
@media (max-width: 767px) {
  .atmos { width: 130vw; height: 130vw; }
  .atmos:nth-child(odd) { left: -45vw; }
  .atmos:nth-child(even) { right: -45vw; }
}

/* ---------- smoke layers ---------- */
.smoke {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translateZ(0);
  /* feather so the photo's frame can never read as a rectangle */
  mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
}
.smoke .ph {
  position: absolute; inset: 0;
  background: radial-gradient(closest-side circle at 50% 45%, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.12) 55%, transparent 72%);
  filter: blur(26px);
}
.smoke img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.smoke img.loaded { opacity: 0.85; }
.smoke img.loaded + .ph, .smoke:has(img.loaded) .ph { opacity: 0; }
.smoke-back { width: 62vw; height: 62vw; left: -14vw; top: 12vh; opacity: 0.3; }
.smoke-front { width: 54vw; height: 54vw; right: -16vw; bottom: -8vh; opacity: 0.26; z-index: 2; }

/* ---------- the bottle layer (photoreal imagery) ---------- */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-gl);
  pointer-events: none;
  perspective: 1400px;
}
body.no-webgl #gl { display: none; }
.bottle-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 78vh;
  height: 78svh;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: transform;
}
.bottle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform, opacity;
}
.bottle-frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: opacity;
}
.bottle-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30vh;
  height: 5.5vh;
  border-radius: 50%;
  /* dense contact core + wide soft penumbra — reads like studio floor shadow */
  background: radial-gradient(
    closest-side,
    rgb(8 4 12 / 0.8) 0%,
    rgb(8 4 12 / 0.55) 28%,
    rgb(8 4 12 / 0.2) 55%,
    transparent 78%
  );
  filter: blur(7px);
  will-change: transform, opacity;
}
@media (max-width: 767px) {
  .bottle-stage { height: 56vh; height: 56svh; }
  .bottle-shadow { width: 26vh; height: 5vh; }
}

/* ---------- main flow ---------- */
main { position: relative; z-index: var(--z-main); }
section { position: relative; }

/* ----- Scene 1: hero ----- */
/* svh everywhere a scene is pinned: iOS Safari's collapsing toolbar
   changes vh mid-scroll and shifts pinned layouts — svh is stable */
.s1 { height: 100vh; height: 100svh; }
.s1-eyebrow { position: absolute; top: 96px; left: clamp(20px, 3vw, 40px); }
.s1-tag {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgb(245 239 230 / 0.8);
  white-space: nowrap;
}
.s1-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(245 239 230 / 0.55);
}
.s1-cue i { width: 1px; height: 44px; background: rgb(245 239 230 / 0.28); position: relative; overflow: hidden; }
.s1-cue i::after {
  content: "";
  position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: cueDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cueDrop { 0% { top: -100%; } 55% { top: 0; } 100% { top: 100%; } }

/* ----- Scene 2: manifesto ----- */
.s2 { height: 100vh; height: 100svh; overflow: clip; }
.mlines { position: absolute; inset: 0; }
.mline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 100;
  font-weight: 340;
  font-size: var(--fs-manifesto);
  line-height: 1.04;
  color: var(--cream);
}
.mline-in { display: block; will-change: transform, clip-path; }

/* ----- Scene 3: the collection ----- */
.s3 { height: 100vh; height: 100svh; overflow: clip; }
.s3-stage { position: absolute; inset: 0; }
.chapter {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
}
.ch-copy {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(46vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2.2vh, 24px);
}
.ch-eyebrow .ch-no { color: var(--gold); }
.ch-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: var(--fs-name);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--cream);
  overflow: hidden;
  margin-left: -0.04em;
  white-space: nowrap;
}
.ch-name-in { display: inline-block; will-change: transform, clip-path; }
.ch-line { font-size: var(--fs-line); font-weight: 300; color: rgb(245 239 230 / 0.85); max-width: 34ch; }
.notes { display: flex; flex-wrap: wrap; gap: 10px; }
.note {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid rgb(245 239 230 / 0.26);
  border-radius: 999px;
  color: rgb(245 239 230 / 0.85);
  white-space: nowrap;
}
.note span { color: var(--gold); margin-right: 8px; }
.ch-cta { margin-top: 4px; pointer-events: auto; }

.ing-card {
  position: absolute;
  right: clamp(16px, 6vw, 96px);
  top: 16vh;
  width: clamp(180px, 23vw, 340px);
  aspect-ratio: 4 / 5;
  border: 1px solid rgb(201 161 92 / 0.55);
  padding: 10px;
  will-change: transform;
}
.ing-card .ph { position: absolute; inset: 10px; }
.ing-card img {
  position: absolute; inset: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: cover; opacity: 0; transition: opacity 0.9s ease;
}
.ing-card img.loaded { opacity: 1; }
.ing-card figcaption {
  position: absolute;
  bottom: -30px;
  left: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(201 161 92 / 0.9);
}

/* per-world ingredient placeholders — finished-looking with zero images */
.ph-layl { background: radial-gradient(at 30% 25%, #7a4fd6 0%, #3c1e85 45%, #170a38 100%); }
.ph-nar { background: radial-gradient(at 70% 30%, #ff8a3d 0%, #b12a12 45%, #3c0a04 100%); }
.ph-ward { background: radial-gradient(at 35% 70%, #ff6fb5 0%, #a01260 48%, #33031f 100%); }
.ph-zumurrud { background: radial-gradient(at 60% 25%, #4fd9a4 0%, #0b6b4a 48%, #032116 100%); }
.ing-card .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* ----- Scene 4: craft ----- */
.s4 { background: var(--ink); padding: clamp(90px, 16vh, 180px) clamp(20px, 6vw, 96px); }
.s4-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.s4-copy { display: flex; flex-direction: column; gap: clamp(20px, 3.4vh, 36px); max-width: 560px; }
.s4-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 120;
  font-weight: 350;
  font-size: var(--fs-title);
  line-height: 0.94;
}
.s4-body { color: rgb(245 239 230 / 0.68); max-width: 46ch; line-height: 1.7; }
.process { display: flex; gap: 24px; margin-top: 8px; }
.process .rule { width: 1px; background: var(--gold); transform-origin: top; align-self: stretch; }
.process ul { display: flex; flex-direction: column; gap: 22px; padding: 4px 0; }
.process li { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(245 239 230 / 0.85); }
.s4-imgs { position: relative; min-height: 74vh; }
.craft-fig { position: absolute; overflow: hidden; will-change: transform; }
.craft-fig .ph { position: absolute; inset: 0; }
.craft-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.craft-fig img.loaded { opacity: 1; }
.fig-a { width: 72%; aspect-ratio: 3 / 4; right: 0; top: 0; }
.fig-a .ph { background: radial-gradient(at 32% 28%, #5a2c14 0%, #2b130a 55%, #0f0805 100%); }
.fig-b { width: 48%; aspect-ratio: 4 / 5; left: 0; top: 52%; }
.fig-b .ph { background: radial-gradient(at 60% 30%, #35303e 0%, #1a161f 55%, #0d0b10 100%); }
.craft-fig .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity: 0.14;
  mix-blend-mode: overlay;
}

/* ----- Scene 5: finale ----- */
.s5 {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: clamp(18px, 3vh, 30px);
  padding-bottom: 12vh;
}
.s5-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 130;
  font-weight: 350;
  font-size: var(--fs-title);
  line-height: 0.94;
}
.soul-list { display: flex; gap: clamp(22px, 4.5vw, 72px); flex-wrap: wrap; justify-content: center; }
.soul { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; position: relative; }
.soul-en {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 90;
  font-weight: 380;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  transition: color 0.4s ease;
}
.soul-ar { font-family: var(--font-ar); font-size: 15px; color: rgb(245 239 230 / 0.55); }
.soul::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.soul:hover::after, .soul:focus-visible::after { transform: scaleX(1); }
.s5-sub { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(245 239 230 / 0.55); }

/* ----- footer ----- */
.footer {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: clamp(70px, 12vh, 130px) 24px 56px;
}
.foot-mono { display: flex; align-items: center; gap: 12px; font-family: var(--font-ar); font-size: 30px; color: var(--gold); line-height: 1; }
.foot-drop {
  width: 11px; height: 15px;
  background: var(--gold);
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%);
  border-radius: 0 0 50% 50%;
}
.foot-disclaimer { font-size: 12px; color: rgb(245 239 230 / 0.5); max-width: 54ch; line-height: 1.7; }
.foot-links { display: flex; gap: 28px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.foot-links a, .foot-credit a { border-bottom: 1px solid rgb(201 161 92 / 0); transition: border-color 0.3s ease, color 0.3s ease; }
.foot-links a:hover, .foot-credit a:hover { color: var(--gold); border-color: rgb(201 161 92 / 0.7); }
.foot-credit { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(245 239 230 / 0.42); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: calc(72px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(20px, 3vw, 40px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: #fff;
}
.nav-mono {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 450;
  font-size: 17px;
  letter-spacing: 0.14em;
}
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.nav-anchors { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.nav-anchors a {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s ease;
  position: relative;
  padding: 6px 0;
}
.nav-anchors a:hover, .nav-anchors a:focus-visible { opacity: 1; }
.nav-enquire { border-color: rgb(255 255 255 / 0.45); color: #fff; padding: 10px 20px; }
.nav-enquire:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }

/* ---------- preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-drop { width: 24px; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -60vh); }
.pl-word {
  position: absolute;
  bottom: 16vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ar);
  font-size: 24px;
  color: var(--gold);
  opacity: 0.9;
}
.pl-pct {
  position: absolute;
  bottom: 26px;
  right: 30px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgb(245 239 230 / 0.45);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Mobile — designed at 390px, not shrunk to it
   ============================================================ */
@media (max-width: 767px) {
  .nav { height: 60px; }
  .nav-anchors { display: none; }
  .s1-eyebrow { top: 78px; max-width: 60vw; line-height: 1.8; }
  .s1-tag { bottom: 96px; font-size: 10px; letter-spacing: 0.28em; }
  .hero-ar { font-size: 22px; }

  .ch-copy { left: 20px; right: 20px; top: auto; bottom: 9vh; transform: none; max-width: none; gap: 12px; }
  .ch-name { font-size: clamp(64px, 19vw, 96px); }
  .ch-line { font-size: 16px; }
  .note { padding: 7px 12px; font-size: 11px; }
  .ing-card { top: 12vh; right: 20px; width: 40vw; }
  .ing-card figcaption { bottom: -36px; font-size: 9.5px; line-height: 1.7; }
  .glyph { font-size: 78vw; }

  .s4 { padding: 90px 20px; }
  .s4-grid { grid-template-columns: 1fr; gap: 56px; }
  .s4-imgs { min-height: 0; height: 110vw; }

  .s5 { padding-bottom: 12vh; }
  .soul-list { flex-direction: column; gap: 18px; }
  .s5-sub { font-size: 10px; letter-spacing: 0.18em; padding: 0 16px; }
  .smoke-back { width: 120vw; height: 120vw; left: -40vw; }
  .smoke-front { width: 100vw; height: 100vw; right: -34vw; }
}

/* ============================================================
   Reduced motion — clean stacked layout, static beauty
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .s1-cue i::after { animation: none; }
  .soul::after, .ghost, .foot-links a { transition: none; }
}

body.reduced #preloader { display: none; }
body.reduced .under { position: absolute; height: 100vh; }
body.reduced .over-hero { position: absolute; height: 100vh; }
body.reduced #gl { position: absolute; height: 100vh; }
body.reduced .glyphs { display: none; }
body.reduced .smoke-back { display: none; }
body.reduced .s2 { height: auto; padding: 26vh 24px; overflow: visible; }
body.reduced .mlines { position: static; display: flex; flex-direction: column; gap: 18vh; }
body.reduced .mline { position: static; }
body.reduced .s3 { height: auto; }
body.reduced .s3-stage { position: static; }
body.reduced .chapter { position: relative; visibility: visible; min-height: 100vh; }
body.reduced .chapter[data-world="0"] { background: radial-gradient(100vmax 100vmax at 30% 20%, #5b2ebf 0%, #1e0e4e 70%, #150c2e 100%); }
body.reduced .chapter[data-world="1"] { background: radial-gradient(100vmax 100vmax at 70% 20%, #e23a1e 0%, #5e0f06 70%, #200602 100%); }
body.reduced .chapter[data-world="2"] { background: radial-gradient(100vmax 100vmax at 30% 30%, #d9187e 0%, #4e0530 70%, #1c0112 100%); }
body.reduced .chapter[data-world="3"] { background: radial-gradient(100vmax 100vmax at 65% 25%, #0e8a5f 0%, #03301f 70%, #02130c 100%); }
body.reduced .s5 { justify-content: center; padding-bottom: 0; }