/* =============================================================== */
/* CoolLanding — Anti-Template Multi-World Demo                     */
/* Nine switchable design languages via body[data-world]            */
/* =============================================================== */

:root {
  color-scheme: dark;

  /* shared raw palette tokens */
  --black: #050606;
  --void: #08090b;
  --ink: #0c0c0a;
  --paper: #f1ece0;
  --paper-warm: #ebe3cf;
  --white: #ffffff;
  --cyan: #5efbff;
  --acid: #c7ff2e;
  --orange: #ff3c08;
  --orange-ink: #c41f00;   /* WCAG-AA text variant of the hot orange (5.4:1 on paper) */
  --pink: #ff7dbb;
  --blue: #0393ff;
  --blue-ink: #0058b8;     /* WCAG-AA text variant of the blue (4.9:1 on paper) */
  --green: #5cc140;
  --yellow: #ffd743;
  --oxblood: #5a1a23;
  --ivory: #f3eddc;
  --brass: #c39257;
  --brass-deep: #7d5722;

  /* per-world tokens (active world swaps these) */
  --bg: var(--black);
  --fg: var(--white);
  --fg-muted: rgba(255, 255, 255, 0.7);
  --accent: var(--cyan);
  --accent-hot: var(--orange);
  --rule: rgba(255, 255, 255, 0.18);

  /* type stacks */
  --font-display: Impact, Haettenschweiler, "Arial Black", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-body: "Aptos", "Segoe UI", sans-serif;
  --font-serif: "GT Sectra", "Times New Roman", Georgia, serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--font-body);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
/* Lenis owns interpolation when the enhancement is available. Keeping the
   browser's native smooth behavior out of that path prevents two scroll
   integrators from fighting over the same scroll position. */
html.lenis-active { scroll-behavior: auto !important; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  cursor: auto;
  transition: background 700ms var(--ease), color 700ms var(--ease);
  font-size: 16px;
  line-height: 1.5;
}

a, button { color: inherit; cursor: pointer; }
a { text-decoration: none; }
button { font: inherit; background: none; border: none; padding: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

/* =============================================================== */
/* World backgrounds                                                */
/* =============================================================== */
.world-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
body[data-world="cinematic-dark"] .world-bg-cinematic { display: block; background: #04050c; }
body[data-world="editorial-interference"] .world-bg-editorial { display: block; }
body[data-world="luxury-alcove"] .world-bg-luxury { display: block; background: #120d09; }
body[data-world="spatial-architecture"] .world-bg-spatial { display: block; background: #d9dcd4; }
body[data-world="generative-system"] .world-bg-generative { display: block; background: #06070a; }
body[data-world="data-monument"] .world-bg-data-monument { display: block; background: #e8e0d2; }

/* World visibility */
.world { display: none; position: relative; z-index: 1; }
body[data-world="cinematic-dark"] .world-cinematic-dark { display: block; }
body[data-world="editorial-interference"] .world-editorial-interference { display: block; }
body[data-world="ritual-craft"] .world-ritual-craft { display: block; }
body[data-world="luxury-alcove"] .world-luxury-alcove { display: block; }
body[data-world="spatial-architecture"] .world-spatial-architecture { display: block; }
body[data-world="festival-kinetic"] .world-festival-kinetic { display: block; }
body[data-world="papercraft-tactile"] .world-papercraft-tactile { display: block; }
body[data-world="generative-system"] .world-generative-system { display: block; }
body[data-world="data-monument"] .world-data-monument { display: block; }

main { position: relative; z-index: 1; }

/* Shared skill + primitive explanation blocks */
.skill-primitives {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) clamp(20px, 6vw, 96px);
  color: var(--fg);
  --primitive-bg: rgba(255, 255, 255, 0.055);
  --primitive-border: var(--rule);
  --primitive-muted: var(--fg-muted);
}
.skill-primitives-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.72fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--primitive-border);
}
.skill-kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.skill-primitives h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 0.96;
  color: var(--fg);
}
.skill-primitives-head > p:not(.skill-kicker) {
  margin: 0;
  color: var(--primitive-muted);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.6;
}
.skill-primitive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.skill-primitive-grid article {
  min-height: 210px;
  padding: 24px 22px;
  border: 1px solid var(--primitive-border);
  border-radius: 8px;
  background: var(--primitive-bg);
}
.skill-primitive-grid article span {
  display: block;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.skill-primitive-grid article h3 {
  margin: 0 0 10px;
  color: var(--fg);
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.05;
}
.skill-primitive-grid article p {
  margin: 0;
  color: var(--primitive-muted);
  font-size: 14px;
  line-height: 1.55;
}
.skill-primitives-cinematic,
.skill-primitives-generative {
  --primitive-bg: rgba(7, 13, 16, 0.72);
  --primitive-border: rgba(94, 251, 255, 0.22);
}
.skill-primitives-spatial {
  /* daylight world: ivory cards over the raymarched sky */
  --primitive-bg: rgba(245, 247, 242, 0.90);
  --primitive-border: rgba(31, 38, 43, 0.20);
  --primitive-muted: rgba(24, 32, 39, 0.76);
  isolation: isolate;
}
.skill-primitives-spatial::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,247,242,0.76), rgba(245,247,242,0.62));
}
.skill-primitives-editorial,
.skill-primitives-papercraft {
  --primitive-bg: #fff8ec;
  --primitive-border: rgba(12, 12, 10, 0.24);
  --primitive-muted: rgba(12, 12, 10, 0.68);
}
.skill-primitives-ritual {
  --primitive-bg: rgba(255, 255, 255, 0.82);
  --primitive-border: rgba(12, 12, 10, 0.24);
  --primitive-muted: rgba(12, 12, 10, 0.68);
}
.skill-primitives-luxury {
  --primitive-bg: rgba(255, 255, 255, 0.035);
  --primitive-border: rgba(195, 146, 87, 0.32);
}
.skill-primitives-festival {
  --primitive-bg: rgba(8, 10, 9, 0.84);
  --primitive-border: rgba(199, 255, 46, 0.24);
}

/* =============================================================== */
/* Loader (cinematic-only)                                          */
/* =============================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), visibility 900ms;
}
body.is-loaded .loader,
body:not([data-world="cinematic-dark"]) .loader {
  visibility: hidden;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.loader-copy {
  position: absolute;
  left: 50%;
  bottom: 37%;
  display: flex;
  gap: 22px;
  align-items: center;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  justify-content: center;
}
.loader-copy p { margin: 0; }
.loader-line {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: min(320px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
}
.loader-line span { display: block; width: 0%; height: 100%; background: var(--white); }

/* =============================================================== */
/* Cursor                                                           */
/* =============================================================== */
.cursor-dot, .cursor-label {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
}
.cursor-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--fg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 220ms var(--ease), height 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease), opacity 220ms var(--ease);
}
.cursor-label {
  padding: 5px 7px;
  color: var(--black);
  background: var(--acid);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translate(14px, 16px);
}
.cursor-label:empty { display: none; }
.cursor-dot.is-active, .cursor-label.is-active { opacity: 1; }
.cursor-dot.is-hot { transform: translate(-50%, -50%) scale(1.7); }

body[data-world="editorial-interference"] .cursor-dot {
  width: 80px; height: 80px;
  border-color: var(--ink);
  background: rgba(255, 60, 8, 0.06);
  mix-blend-mode: normal;
}
body[data-world="editorial-interference"] .cursor-label { background: var(--orange); color: var(--white); }
body[data-world="ritual-craft"] .cursor-dot {
  width: 22px; height: 22px;
  border-color: var(--ink); border-width: 3px;
  background: var(--yellow);
  mix-blend-mode: normal;
}
body[data-world="ritual-craft"] .cursor-label { background: var(--ink); color: var(--yellow); }
body[data-world="luxury-alcove"] .cursor-dot {
  width: 10px; height: 10px;
  border-color: var(--brass);
  background: rgba(195, 146, 87, 0.45);
  mix-blend-mode: normal;
}
body[data-world="luxury-alcove"] .cursor-label {
  background: transparent;
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* =============================================================== */
/* Topbar + World Switcher                                          */
/* =============================================================== */
.topbar {
  position: fixed;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}
.brand, .nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(18px);
  padding: 0 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.brand { gap: 10px; }
.brand-mark {
  width: 12px; height: 12px;
  background: var(--accent-hot);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  box-shadow: 0 0 18px var(--accent-hot);
}
.nav-cta { justify-self: end; transition: background 220ms var(--ease), color 220ms var(--ease); }
.nav-cta:hover { color: var(--black); background: var(--accent); }

body[data-world="editorial-interference"] .brand,
body[data-world="editorial-interference"] .nav-cta {
  background: rgba(241, 236, 224, 0.94);
  color: var(--ink);
  border-color: var(--ink);
}
body[data-world="ritual-craft"] .brand,
body[data-world="ritual-craft"] .nav-cta {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
body[data-world="luxury-alcove"] .brand,
body[data-world="luxury-alcove"] .nav-cta {
  background: rgba(11, 8, 5, 0.85);
  color: var(--ivory);
  border-color: rgba(195, 146, 87, 0.45);
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: none;
}

.world-switcher {
  display: flex;
  gap: 6px;
  justify-self: center;
  padding: 6px;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(18px);
}
.switcher-label {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.switcher-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}
.switcher-btn:hover { color: var(--fg); }
.switcher-btn.is-active { color: var(--bg); background: var(--accent); }
.switcher-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
}
.switcher-btn.is-active .switcher-num { background: var(--bg); color: var(--accent); }

body[data-world="editorial-interference"] .world-switcher {
  background: rgba(241, 236, 224, 0.94);
  border-color: var(--ink);
}
body[data-world="editorial-interference"] .switcher-label { color: rgba(0,0,0,0.55); }
body[data-world="editorial-interference"] .switcher-btn { color: rgba(0,0,0,0.55); }
body[data-world="editorial-interference"] .switcher-btn:hover { color: var(--ink); }
body[data-world="editorial-interference"] .switcher-btn.is-active { color: var(--white); background: var(--orange-ink); }

body[data-world="ritual-craft"] .world-switcher {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
body[data-world="ritual-craft"] .switcher-label { color: rgba(0,0,0,0.6); }
body[data-world="ritual-craft"] .switcher-btn { color: rgba(0,0,0,0.55); }
body[data-world="ritual-craft"] .switcher-btn:hover { color: var(--ink); }
body[data-world="ritual-craft"] .switcher-btn.is-active { color: var(--ink); background: var(--yellow); }

body[data-world="luxury-alcove"] .world-switcher {
  background: rgba(11, 8, 5, 0.85);
  border: 1px solid rgba(195, 146, 87, 0.45);
}
body[data-world="luxury-alcove"] .switcher-label { color: rgba(243, 237, 220, 0.5); font-family: var(--font-serif); font-style: italic; }
body[data-world="luxury-alcove"] .switcher-btn {
  color: rgba(243, 237, 220, 0.6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}
body[data-world="luxury-alcove"] .switcher-btn:hover { color: var(--ivory); }
body[data-world="luxury-alcove"] .switcher-btn.is-active {
  color: var(--oxblood);
  background: var(--ivory);
}

/* Scroll meter */
.scroll-meter {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 70;
  width: 100%;
  height: 3px;
  background: var(--rule);
}
.scroll-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent));
}

/* =============================================================== */
/* WORLD 01 — Cinematic Dark                                        */
/* =============================================================== */
body[data-world="cinematic-dark"] {
  --bg: var(--black);
  --fg: var(--white);
  --fg-muted: rgba(255, 255, 255, 0.7);
  --accent: var(--cyan);
  --accent-hot: var(--orange);
  --rule: rgba(255, 255, 255, 0.18);
}

.cn-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 120px 5vw 96px;
  /* the WebGL scene carries the hero — only a slight text-protection scrim */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(2, 3, 8, 0.38));
}
.cn-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  mix-blend-mode: screen;
}
.ascii-cloud {
  /* ambient code noise — pushed to the edge so the signal instrument owns the focal plane */
  position: absolute;
  inset: 14vh auto auto 4vw;
  z-index: 1;
  min-height: 280px;
  color: rgba(94, 251, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.05;
  text-align: left;
  white-space: pre;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.2px);
  animation: asciiDrift 9s ease-in-out infinite;
}

.cn-hero-frame {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 48px;
  align-items: end;
  min-height: 70vh;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 18vh;
}
.cn-left { max-width: 720px; }
.cn-eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cn-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.8rem, 10vw, 8.6rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--white);
  /* The particle wordmark glows behind the type. A tight dark scrim keeps
     the glyphs at full contrast (white stays ≥4.5:1) while letting the
     cyan bloom read through the letter counters. */
  text-shadow:
    0 0 60px rgba(94, 251, 255, 0.22),
    0 0 2px rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 0 18px rgba(2, 4, 10, 0.85);
}
.cn-lede {
  margin: 0 0 32px;
  max-width: 540px;
  /* 0.86 alpha → ≈11:1 on the black stage; holds ≥4.5:1 even where the
     particle field brightens the background behind it. */
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.55;
  text-shadow: 0 0 14px rgba(2, 4, 10, 0.7);
}
.cn-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cn-cta-primary, .cn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}
.cn-cta-primary {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}
.cn-cta-primary:hover { background: var(--cyan); color: var(--black); }
.cn-cta-secondary { color: var(--white); }
.cn-cta-secondary:hover { background: var(--white); color: var(--black); }
.cn-cta-arrow { font-size: 18px; }

/* Telemetry HUD */
.cn-hud {
  width: min(420px, 100%);
  padding: 22px 24px;
  border: 1px solid rgba(94, 251, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(94, 251, 255, 0.07), rgba(0, 0, 0, 0.5)),
    rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 0 22px rgba(94, 251, 255, 0.08),
    0 12px 60px rgba(0, 0, 0, 0.45);
}
.cn-hud header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(94, 251, 255, 0.22);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.cn-hud-dot {
  width: 8px; height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  animation: hudPulse 1.6s ease-in-out infinite;
}
.cn-hud-tag {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(94, 251, 255, 0.4);
  font-size: 10px;
}
.cn-hud dl { display: grid; gap: 8px; margin: 16px 0 14px; }
.cn-hud dl div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.cn-hud dt { color: rgba(255, 255, 255, 0.5); }
.cn-hud dd { margin: 0; color: var(--white); }
.cn-hud footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(94, 251, 255, 0.22);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.cn-status {
  position: absolute;
  left: 5vw; right: 5vw;
  bottom: 34px;
  z-index: 4;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cn-status span:first-child { color: var(--cyan); }

/* Chapter sections */
.cn-chapter {
  position: relative;
  z-index: 2;
  padding: 120px 5vw 100px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
}
.cn-chapter-head { max-width: 880px; margin: 0 auto 56px; }
.cn-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.cn-chapter-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
}
.cn-card {
  position: relative;
  padding: 28px 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(94, 251, 255, 0.05), rgba(255, 255, 255, 0.02));
  transition: transform 380ms var(--ease), border-color 380ms var(--ease), background 380ms var(--ease);
  overflow: hidden;
}
.cn-card::before {
  position: absolute;
  inset: -1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, rgba(94, 251, 255, 0.36), transparent 40%, transparent 60%, rgba(255, 60, 8, 0.18));
  opacity: 0;
  transition: opacity 380ms var(--ease);
  mix-blend-mode: screen;
}
.cn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 251, 255, 0.5);
}
.cn-card:hover::before { opacity: 1; }
.cn-card-num {
  margin-bottom: 18px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.cn-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.cn-card p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.5;
}
.cn-card code {
  display: block;
  padding: 8px 10px;
  border-top: 1px solid rgba(94, 251, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  word-break: break-all;
}

/* Cinematic footer */
.cn-footer {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 12% 110%, rgba(94, 251, 255, 0.18), transparent 36%),
    radial-gradient(circle at 86% 0%, rgba(255, 60, 8, 0.18), transparent 30%),
    #050606;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cn-footer-frame {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 5vw 60px;
}
.cn-footer-left .cn-h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.cn-footer-lede {
  max-width: 540px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.55;
}
.cn-footer-stack {
  display: grid;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(94, 251, 255, 0.25);
  background:
    linear-gradient(180deg, rgba(94, 251, 255, 0.05), transparent);
  font-family: var(--font-mono);
  font-size: 13px;
}
.cn-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(94, 251, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
}
.cn-footer-row:last-child { border-bottom: none; }
.cn-footer-row span { color: var(--cyan); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.cn-footer-row b { color: var(--white); }
.cn-footer-marquee {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.cn-footer-marquee span {
  display: inline-block;
  padding-left: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(94, 251, 255, 0.8);
  animation: cnMarquee 28s linear infinite;
}
.cn-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 5vw 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cn-footer-base a:hover { color: var(--cyan); }

/* Chapter 02 — scroll arms the orbit (live signature readout) */
.cn-orbit { padding-top: 90px; }
.cn-orbit-body { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); gap: 40px; max-width: 1400px; margin: 0 auto; align-items: start; }
.cn-orbit-lede { font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 34px; max-width: 52ch; }
.cn-bars { display: grid; gap: 16px; max-width: 460px; }
.cn-bar { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; }
.cn-bar > span { color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; }
.cn-bar i { display: block; height: 4px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; }
.cn-bar i b { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--orange)); box-shadow: 0 0 12px var(--cyan); transition: width 120ms linear; }
.cn-bar em { text-align: right; font-style: normal; color: var(--white); }
.cn-orbit-readout { border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); padding: 18px; font-family: var(--font-mono); }
.cn-orbit-readout header { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.cn-orbit-readout dl { margin: 0; display: grid; gap: 10px; }
.cn-orbit-readout dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 9px; }
.cn-orbit-readout dt { color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; }
.cn-orbit-readout dd { margin: 0; color: var(--white); text-align: right; }

/* Stat band — count-up */
.cn-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border-block: 1px solid rgba(255,255,255,0.12); }
.cn-stat { background: var(--black); padding: clamp(34px, 6vw, 64px) 24px; text-align: center; }
.cn-stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6vw, 80px); line-height: 1; color: var(--white); letter-spacing: -0.02em; }
.cn-stat span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }

/* Chapter 03 — pipeline ladder */
.cn-ladder { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; counter-reset: rung; }
.cn-rung { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,0.9fr); gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.14); transition: background 300ms var(--ease); }
.cn-rung:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.cn-rung:hover { background: linear-gradient(90deg, rgba(94,251,255,0.06), transparent); }
.cn-rung-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); color: rgba(94,251,255,0.5); }
.cn-rung h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.cn-rung p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.62); }
.cn-rung code { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); background: rgba(94,251,255,0.08); border: 1px solid rgba(94,251,255,0.18); padding: 8px 12px; border-radius: 3px; justify-self: end; }

/* =============================================================== */
/* WORLD 02 — Editorial Interference                                */
/* =============================================================== */
body[data-world="editorial-interference"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: rgba(12, 12, 10, 0.6);
  --accent: var(--orange);
  --accent-hot: var(--orange);
  --rule: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.04), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(255, 60, 8, 0.05), transparent 30%);
}

.ed-masthead {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 100px 5vw 28px;
  border-bottom: 2px solid var(--ink);
}
.ed-mast-num, .ed-mast-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.ed-mast-date { justify-self: end; }
.ed-mast-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.12em;
  color: var(--ink);
}

.ed-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4vw, 56px);
  max-width: 1500px;
  margin: 0 auto;
  padding: 48px 5vw 32px;
  overflow-x: clip;
}
.ed-megaword {
  position: absolute;
  left: 1vw;
  right: 0;
  bottom: -6vw;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(10rem, 30vw, 36rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.045);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  overflow: clip;
}

.ed-portrait {
  position: relative;
  z-index: 1;
  margin: 0;
  grid-row: span 3;
  transform: rotate(-1.4deg);
  transform-origin: center;
  /* cut-out portrait floats on the paper; hard print shadow + soft lift */
  filter:
    drop-shadow(10px 14px 0 rgba(20, 18, 14, 0.10))
    drop-shadow(0 14px 26px rgba(20, 18, 14, 0.22));
}
.ed-portrait img { width: 100%; height: auto; display: block; }
.ed-portrait figcaption {
  position: absolute;
  left: -6px; bottom: 26px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 8px 14px;
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-warm);
}
.ed-portrait figcaption em {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.ed-marks {
  position: absolute;
  pointer-events: none;
  width: 240px;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.ed-marks-portrait { right: -50px; top: 20px; width: 180px; transform: rotate(8deg); }

.ed-headline-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}
.ed-eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ed-headline {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.2vw, 5.8rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}
.ed-headline em {
  color: var(--orange-ink);
  font-style: italic;
}
.ed-deck {
  max-width: 540px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

.ed-meta {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.ed-meta-col span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ed-meta-col p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.ed-meta-col p em { color: var(--orange-ink); font-style: italic; }

.ed-marquee {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 36px -5vw 0;
  padding: 14px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}
.ed-marquee span {
  display: inline-block;
  padding-left: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--paper);
  animation: edMarquee 32s linear infinite;
}

/* Editorial spread */
.ed-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1.1fr;
  gap: 60px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 100px 5vw 60px;
}
.ed-feature { max-width: 540px; }
.ed-feature-num {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.ed-h2 {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.ed-body {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.ed-dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.2em;
  line-height: 0.72;
  padding: 6px 12px 0 0;
  color: var(--orange-ink);
}

/* Contents — magazine table of contents */
.ed-contents { max-width: 1200px; margin: 0 auto; padding: 40px 6vw 70px; }
.ed-contents-head { display: flex; align-items: baseline; gap: 20px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; margin-bottom: 8px; }
.ed-toc { list-style: none; margin: 0; padding: 0; }
.ed-toc-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 1fr auto; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(12,12,10,0.16); transition: color 300ms var(--ease); }
.ed-toc-row:hover { color: var(--orange-ink); }
.ed-toc-n { font-family: var(--font-mono); font-size: 13px; color: var(--orange-ink); letter-spacing: 0.1em; }
.ed-toc-main h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; color: inherit; }
.ed-toc-main p { margin: 0; font-family: var(--font-body); font-size: 14px; color: rgba(12,12,10,0.6); }
.ed-toc-lead { align-self: center; height: 0; border-bottom: 2px dotted rgba(12,12,10,0.3); }
.ed-toc-page { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 3vw, 38px); color: var(--ink); }
.ed-toc-row:hover .ed-toc-page { color: var(--orange-ink); }
.ed-still {
  position: relative;
  margin: 0;
  transform: rotate(0.8deg);
  filter:
    drop-shadow(10px 12px 0 rgba(20, 18, 14, 0.08))
    drop-shadow(0 14px 24px rgba(20, 18, 14, 0.20));
}
.ed-still img { width: 100%; display: block; transition: transform 480ms var(--ease); }
.ed-still:hover img { transform: scale(1.04) rotate(-1deg); }
.ed-still-tag {
  position: absolute;
  left: 4px; top: 8px;
  z-index: 2;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ed-still-grid {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 60, 8, 0.0) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 60, 8, 0.0) 1px, transparent 1px);
  background-size: 32px 32px;
  transition: background-image 220ms var(--ease);
}
.ed-still:hover .ed-still-grid {
  background-image:
    linear-gradient(rgba(255, 60, 8, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 60, 8, 0.4) 1px, transparent 1px);
}
.ed-marks-still { right: -30px; bottom: 30px; width: 220px; transform: rotate(-6deg); }

.ed-pullquote {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 5vw 40px;
  font-family: var(--font-serif);
  text-align: center;
}
.ed-pullquote p {
  margin: 0 auto 18px;
  max-width: 980px;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-style: italic;
  line-height: 1.18;
  color: var(--ink);
}
.ed-pullquote .ed-quote-mark {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.8;
  color: var(--orange-ink);
  opacity: 0.25;
  user-select: none;
}
.ed-quote-by {
  margin: 0 !important;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-style: normal !important;
  text-transform: uppercase;
  color: var(--ink);
}

.ed-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 5vw 100px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ed-col { padding: 12px 0; }
.ed-col-num {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ed-col h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.1;
  color: var(--ink);
}
.ed-col p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.ed-col p em.ed-hot { color: var(--orange-ink); font-style: italic; font-weight: 600; }

/* Editorial footer */
.ed-footer {
  position: relative;
  z-index: 2;
  padding: 80px 0 60px;
  background: var(--paper);
}
.ed-footer-rule { height: 1px; background: var(--ink); }
.ed-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 5vw 30px;
}
.ed-footer-block .ed-h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.ed-footer-block .ed-body { font-size: 16px; }
.ed-footer-credits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 0;
  padding-left: 28px;
  border-left: 1px solid var(--ink);
  font-family: var(--font-mono);
}
.ed-footer-credits div { display: grid; gap: 4px; }
.ed-footer-credits dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ed-footer-credits dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
}
.ed-final-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(640px, 90%);
  margin: 30px 5vw 30px;
  padding: 22px 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-style: italic;
  transition: background 220ms var(--ease);
}
.ed-final-cta:hover { background: var(--orange); }
.ed-footer-base {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 5vw 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =============================================================== */
/* WORLD 03 — Ritual Craft                                          */
/* =============================================================== */
body[data-world="ritual-craft"] {
  --bg: #fde9c0;
  --fg: var(--ink);
  --fg-muted: rgba(12, 12, 10, 0.7);
  --accent: var(--pink);
  --accent-hot: var(--blue);
  --rule: var(--ink);
  background-color: #fde9c0;
}
body[data-world="ritual-craft"] main {
  background:
    url("assets/ritual-paper-texture.png") repeat,
    radial-gradient(circle at 18% 18%, rgba(255, 125, 187, 0.55), transparent 35%),
    radial-gradient(circle at 86% 80%, rgba(3, 147, 255, 0.4), transparent 38%);
  background-size: 800px auto, 100% 100%, 100% 100%;
  background-blend-mode: multiply, normal, normal;
}

.rc-hero {
  position: relative;
  min-height: 100svh;
  padding: 140px 5vw 80px;
  overflow: hidden;
}
.rc-doodle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
}
.rc-doodle-tl { left: 2vw; top: 16vh; width: clamp(180px, 22vw, 320px); transform: rotate(-12deg); }
.rc-doodle-br { right: 0; bottom: -2vh; width: clamp(220px, 28vw, 360px); transform: rotate(8deg) scaleX(-1); }
.rc-doodle-footer { left: 50%; top: -40px; width: clamp(220px, 30vw, 360px); transform: translateX(-50%) rotate(-2deg); }

.rc-eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
}
.rc-eyebrow .rc-tape {
  display: inline-block;
  padding: 6px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.rc-headline {
  position: relative;
  z-index: 2;
  margin: 0 0 40px;
  max-width: 980px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 7.2vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.rc-headline-emph {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
}
.rc-sticker-pack {
  position: relative;
  z-index: 2;
  margin: 0 0 32px;
  padding: 18px;
  width: min(720px, 100%);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(-1.2deg);
}
.rc-sticker-pack img { width: 100%; display: block; }
.rc-sticker-pack figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-align: center;
}

.rc-stickers {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 32px;
}
.rc-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  transition: transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-spring);
}
.rc-sticker-pink { background: var(--pink); transform: rotate(-2deg); }
.rc-sticker-blue { background: var(--blue); color: var(--white); transform: rotate(1.5deg); }
.rc-sticker-yellow { background: var(--yellow); transform: rotate(-1deg); }
.rc-sticker-green { background: var(--green); transform: rotate(2deg); }
.rc-sticker-orange { background: var(--orange); color: var(--white); transform: rotate(-2.4deg); }
.rc-sticker:hover {
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 10px 10px 0 var(--ink);
}
.rc-wobble:active { transform: scale(0.92) rotate(-1deg); }

.rc-readout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  padding: 24px;
  border: 3px solid var(--ink);
  background: var(--white);
  box-shadow: 10px 10px 0 var(--ink);
}
.rc-readout div span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.rc-readout div p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* dropped sticker stamps (signature mechanic) */
.rc-stamp {
  position: fixed;
  z-index: 30;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  transform-origin: center;
  box-shadow: 3px 4px 0 rgba(12,12,10,0.35);
  animation: rcStamp 520ms var(--ease-spring) forwards;
}
.rc-stamp.from-yoo { background: var(--pink); }
.rc-stamp.from-ship { background: var(--blue); color: var(--white); }
.rc-stamp.from-mit { background: var(--yellow); }
.rc-stamp.from-fork { background: var(--green); }
.rc-stamp.from-star { background: var(--orange); color: var(--white); }
body:not([data-world="ritual-craft"]) .rc-stamp,
body:not([data-world="ritual-craft"]) .rc-confetti {
  display: none;
}
@keyframes rcStamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-20deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(calc(var(--stamp-rot, -4deg) - 4deg)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--stamp-rot, -4deg)); }
}

/* Confetti bits on stamp / tick */
.rc-confetti {
  position: fixed;
  z-index: 31;
  width: 9px; height: 12px;
  border-radius: 2px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Tactile checklist */
.rc-checklist-section {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 36px; align-items: start;
  max-width: 1100px; margin: 0 auto; padding: 30px 5vw 80px;
}
.rc-clipboard {
  position: relative;
  background: #fffdf6;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 8px 9px 0 rgba(12,12,10,0.22);
  padding: 28px 26px 22px;
  transform: rotate(-0.8deg);
}
.rc-clip { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: var(--ink); border-radius: 7px; }
.rc-clip::after { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 54px; height: 10px; background: #cdc6b4; border-radius: 4px; }
.rc-list-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed rgba(12,12,10,0.25); padding-bottom: 12px; margin-bottom: 8px; }
.rc-list-head h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 3.4vw, 38px); color: var(--ink); text-transform: uppercase; }
.rc-list-prog { font-family: var(--font-mono); font-size: 13px; color: var(--blue-ink); }
.rc-list-prog b { color: var(--green); font-size: 16px; }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-list li { border-bottom: 1px solid rgba(12,12,10,0.12); }
.rc-check { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; text-align: left; color: var(--ink); transition: transform 200ms var(--ease); }
.rc-check:hover { transform: translateX(4px); }
.rc-box { flex: none; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; position: relative; }
.rc-check-label { font-family: var(--font-body); font-size: clamp(16px, 1.8vw, 20px); }
.rc-check.is-done .rc-box { background: var(--green); }
.rc-check.is-done .rc-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 17px; }
.rc-check.is-done .rc-check-label { text-decoration: line-through; text-decoration-thickness: 2px; color: rgba(12,12,10,0.45); }
.rc-list-foot { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: rgba(12,12,10,0.5); }
.rc-list-aside { align-self: center; padding: 10px 6px; }
.rc-list-aside p { font-size: clamp(16px, 1.9vw, 21px); line-height: 1.55; color: var(--ink); margin: 18px 0; }
.rc-list-aside em { color: var(--blue-ink); font-style: normal; font-weight: 700; }
.rc-list-doodle { font-size: 26px; color: var(--pink); letter-spacing: 0.3em; }

/* Guestbook stamp meter */
.rc-stamp-meter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 8px 0 22px; font-family: var(--font-mono); font-size: 14px; color: var(--white); }
.rc-stamp-meter b { color: var(--yellow); font-size: 18px; }
.rc-clear { padding: 9px 18px; border: 2px solid var(--white); border-radius: 100px; font-family: var(--font-mono); font-size: 12px; color: var(--white); transition: background 240ms, color 240ms; }
.rc-clear:hover { background: var(--white); color: var(--ink); }
@media (max-width: 880px) { .rc-checklist-section { grid-template-columns: 1fr; gap: 24px; } }

.rc-track-section {
  position: relative;
  height: 300vh;
}
body[data-world="ritual-craft"] .rc-track-section { background: var(--ink); color: var(--white); }
.rc-track-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.rc-track {
  display: flex;
  width: 300vw;
  height: 100%;
  will-change: transform;
}
.rc-panel {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100%;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 36px;
  align-items: center;
  padding: 110px 6vw 70px;
  overflow: hidden;
}
.rc-panel-pink { background: var(--pink); color: var(--ink); }
.rc-panel-blue { background: var(--blue); color: var(--white); }
.rc-panel-yellow { background: var(--yellow); color: var(--ink); }
.rc-panel-text { position: relative; z-index: 2; max-width: 540px; }
.rc-panel-num {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rc-panel h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: none;
}
.rc-panel p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 500px; }

.rc-window {
  position: relative;
  z-index: 2;
  width: min(580px, 92%);
  justify-self: center;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  font-family: var(--font-mono);
}
.rc-window-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 3px solid var(--ink);
  background: var(--white);
}
.rc-window-bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.rc-window-bar span:nth-child(2) { background: var(--green); }
.rc-window-bar span:nth-child(3) { background: var(--blue); }
.rc-window-bar strong { margin-left: auto; font-family: var(--font-display); }
.rc-window-grid { display: grid; grid-template-columns: 80px 1fr; }
.rc-window-grid span, .rc-window-grid b {
  min-height: 60px;
  padding: 16px;
  border-bottom: 2px solid var(--ink);
}
.rc-window-grid span { border-right: 2px solid var(--ink); background: var(--yellow); }

.rc-tape-stack {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  justify-self: center;
  width: min(440px, 92%);
}
.rc-tape-card {
  display: block;
  padding: 20px 26px;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--ink);
}
.rc-tape-1 { transform: rotate(-2deg); }
.rc-tape-2 { background: var(--yellow); transform: rotate(1.5deg); }
.rc-tape-3 { background: var(--orange); color: var(--white); transform: rotate(-1.2deg); }

.rc-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 26px;
  padding: 16px 24px;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--ink);
}
.rc-cta:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 var(--ink); }

/* Ritual footer (guestbook) */
.rc-footer {
  position: relative;
  z-index: 2;
  padding: 120px 5vw 60px;
  text-align: center;
  background:
    url("assets/ritual-paper-texture.png") repeat,
    radial-gradient(circle at 50% 100%, rgba(255, 215, 67, 0.8), transparent 40%),
    #fde9c0;
  background-size: 800px auto, 100% 100%, 100% 100%;
  background-blend-mode: multiply, normal, normal;
  border-top: 3px solid var(--ink);
}
.rc-footer-eyebrow { margin: 24px 0 26px; }
.rc-footer-h {
  margin: 0 auto 18px;
  max-width: 880px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 0.96;
  text-transform: none;
  color: var(--ink);
}
.rc-footer-lede {
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.rc-guestbook {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 980px;
  margin: 0 auto 40px;
}
.rc-gb-entry {
  display: inline-block;
  padding: 12px 22px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.rc-gb-pink { background: var(--pink); transform: rotate(-3deg); }
.rc-gb-blue { background: var(--blue); color: var(--white); transform: rotate(2deg); }
.rc-gb-yellow { background: var(--yellow); transform: rotate(-1.5deg); }
.rc-gb-green { background: var(--green); transform: rotate(1deg); }
.rc-gb-orange { background: var(--orange); color: var(--white); transform: rotate(-2.5deg); }
.rc-gb-hand {
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  transform: rotate(-2deg);
}
.rc-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.rc-footer-base a:hover { color: var(--blue-ink); }

/* =============================================================== */
/* WORLD 04 — Luxury Alcove                                         */
/* =============================================================== */
body[data-world="luxury-alcove"] {
  --bg: #0e0b08;
  --fg: var(--ivory);
  --fg-muted: rgba(243, 237, 220, 0.6);
  --accent: var(--brass);
  --accent-hot: var(--oxblood);
  --rule: rgba(195, 146, 87, 0.32);
  background-color: #0e0b08;
}

.lx-hero {
  position: relative;
  min-height: 100svh;
  padding: 130px 5vw 100px;
  overflow: hidden;
}
.lx-hero-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
}
.lx-eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--brass);
}
.lx-headline {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 5.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ivory);
}
.lx-headline em {
  color: var(--brass);
  font-style: italic;
}
.lx-rule {
  width: 90px;
  height: 1px;
  margin: 28px 0;
  background: var(--brass);
}
.lx-lede {
  margin: 0 0 38px;
  max-width: 540px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.lx-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 320ms var(--ease-luxury), color 320ms var(--ease-luxury);
}
.lx-audio-toggle:hover { background: var(--brass); color: var(--bg); }
.lx-audio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
  transition: background 320ms var(--ease);
}
.lx-audio-toggle[aria-pressed="true"] .lx-audio-dot {
  background: #f3e2a8;
  box-shadow: 0 0 12px #f3e2a8;
}
.lx-audio-toggle[aria-pressed="true"] .lx-audio-label::after { content: " · on"; color: var(--brass); }

/* Showcase: signature product */
.lx-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 80px 5vw 100px;
}
.lx-product {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px 0 64px;
}
.lx-product-glow {
  position: absolute;
  left: 50%; top: 44%;
  width: 94%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243, 226, 168, 0.22), rgba(195, 146, 87, 0.07) 44%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.lx-product .lx-product-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  display: block;
  transform: rotate(-5deg) translate(var(--lx-px, 0px), var(--lx-py, 0px));
  filter: drop-shadow(0 44px 60px rgba(0, 0, 0, 0.65));
  transition: transform 1400ms var(--ease-luxury);
}
.lx-product:hover .lx-product-img { transform: rotate(-2.5deg) scale(1.03); }
/* the one kinetic decoration luxury permits: a reflection */
.lx-product .lx-product-mirror {
  position: absolute;
  left: 50%; top: 58%;
  width: 100%; max-width: 560px;
  transform: translateX(-50%) rotate(-5deg) scaleY(-1);
  opacity: 0.14;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 58%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 58%);
  z-index: 0;
  pointer-events: none;
}
.lx-product figcaption {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  align-items: baseline;
  width: max-content;
  max-width: 92%;
  padding-top: 16px;
  border-top: 1px solid rgba(195, 146, 87, 0.4);
  color: var(--ivory);
  text-align: center;
}
.lx-product-cap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--brass);
}
.lx-product figcaption em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.lx-h2 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ivory);
}
.lx-body {
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.lx-spec {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
}
.lx-spec div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; }
.lx-spec dt {
  color: var(--brass);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.lx-spec dd {
  margin: 0;
  color: var(--ivory);
  font-size: 15px;
}

/* Rooms gallery */
.lx-rooms {
  position: relative;
  padding: 80px 5vw 120px;
  background:
    radial-gradient(circle at 86% 14%, rgba(195, 146, 87, 0.1), transparent 36%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
}
.lx-rooms-head { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.lx-rooms-head .lx-eyebrow { text-align: center; }
.lx-rooms-head .lx-h2 { text-align: center; }

.lx-room {
  display: grid;
  grid-template-columns: 80px 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 0;
  border-bottom: 1px solid var(--rule);
}
.lx-room:last-child { border-bottom: none; }
.lx-room-num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: 0.9;
  color: var(--brass);
  font-style: italic;
}
.lx-room-text { max-width: 540px; }
.lx-room-cat {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--brass);
}
.lx-room h3 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  color: var(--ivory);
}
.lx-room p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.lx-room-meta {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brass);
  text-transform: lowercase;
}
.lx-room-mat {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.lx-room-mat::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 88%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243, 226, 168, 0.16), rgba(195, 146, 87, 0.05) 44%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.lx-room-mat img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 32px 46px rgba(0, 0, 0, 0.6));
  transition: transform 1200ms var(--ease-luxury);
}
.lx-room-mat-tall img { max-height: 520px; }
.lx-room-mat-fade img {
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
.lx-room-mat:hover img { transform: scale(1.05) rotate(-1deg); }
.lx-room-tag {
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(11, 8, 5, 0.78);
  border: 1px solid rgba(195, 146, 87, 0.4);
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lx-mat-fill { width: 100%; height: 100%; }
.lx-mat-ivory {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(243, 237, 220, 0.85), rgba(195, 146, 87, 0.22)),
    linear-gradient(135deg, #f3eddc, #c5b894);
}
.lx-mat-oxblood {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(220, 90, 80, 0.4), rgba(60, 14, 20, 0.95)),
    linear-gradient(135deg, #5a1a23, #2c0a10);
}
.lx-mat-brass {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(243, 226, 168, 0.55), rgba(120, 90, 40, 0.6)),
    linear-gradient(135deg, #c39257, #6a4f24);
}

/* Savoir-faire — craftsmanship ladder + maison stats */
.lx-savoir { position: relative; max-width: 1100px; margin: 0 auto; padding: 90px 5vw 100px; }
.lx-savoir-head { text-align: center; margin-bottom: 56px; }
.lx-savoir-head .lx-eyebrow, .lx-savoir-head .lx-h2 { text-align: center; }
.lx-steps { list-style: none; margin: 0 auto 70px; padding: 0; max-width: 820px; }
.lx-step { display: grid; grid-template-columns: 70px 1fr; gap: 28px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--rule); }
.lx-step:last-child { border-bottom: 1px solid var(--rule); }
.lx-step-n { font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 4vw, 48px); color: var(--brass); }
.lx-step h3 { margin: 0 0 8px; font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; color: var(--ivory); }
.lx-step p { margin: 0; color: var(--fg-muted); font-size: 16px; line-height: 1.6; }
.lx-maison { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 60px); flex-wrap: wrap; }
.lx-maison-stat { text-align: center; }
.lx-maison-stat b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(36px, 6vw, 72px); color: var(--brass); line-height: 1; }
.lx-maison-stat span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); }
.lx-maison-rule { width: 1px; height: 56px; background: var(--rule); }

/* Luxury footer (imprint card) */
.lx-footer {
  position: relative;
  padding: 140px 5vw 80px;
  background:
    radial-gradient(circle at 50% 20%, rgba(195, 146, 87, 0.12), transparent 40%),
    linear-gradient(180deg, #0a0805 0%, #050403 100%);
  overflow: hidden;
  border-top: 1px solid rgba(195, 146, 87, 0.22);
}
.lx-footer-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.lx-footer-content .lx-eyebrow { text-align: center; }
.lx-footer-content .lx-h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  text-align: center;
}
.lx-footer-lede {
  max-width: 540px;
  margin: 0 auto 34px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.lx-final-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  background: var(--ivory);
  color: var(--oxblood);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.06em;
  transition: background 320ms var(--ease-luxury), color 320ms var(--ease-luxury), transform 320ms var(--ease-luxury);
}
.lx-final-cta em { font-style: normal; }
.lx-final-cta:hover {
  background: var(--brass);
  color: var(--ivory);
  transform: translateY(-2px);
}
.lx-footer-base {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid rgba(195, 146, 87, 0.18);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(243, 237, 220, 0.6);
}

/* =============================================================== */
/* Reveals + Animations                                              */
/* =============================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes asciiDrift {
  0%, 100% { transform: translate3d(0, -6px, 0); opacity: 0.48; }
  50% { transform: translate3d(0, 8px, 0); opacity: 0.82; }
}
@keyframes edMarquee { to { transform: translateX(-100%); } }
@keyframes cnMarquee { to { transform: translateX(-100%); } }
@keyframes hudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
/* =============================================================== */
/* Responsive                                                        */
/* =============================================================== */
@media (max-width: 1200px) {
  .topbar { grid-template-columns: auto auto 1fr; gap: 12px; }
  .nav-cta { display: none; }
  .switcher-name { display: none; }
  .switcher-btn { padding: 8px 10px; }
  .skill-primitives-head { grid-template-columns: 1fr; align-items: start; }
  .skill-primitives-head > p:not(.skill-kicker) { max-width: 68ch; }

  .cn-hero-frame { grid-template-columns: 1fr; gap: 28px; padding-top: 14vh; }
  .cn-hud { width: 100%; }
  .cn-chapter-body { grid-template-columns: 1fr 1fr; }

  .ed-hero { grid-template-columns: 1fr; gap: 28px; }
  .ed-portrait { grid-row: auto; transform: rotate(0); max-width: 480px; }
  .ed-meta { grid-column: 1; grid-template-columns: 1fr 1fr; }

  .ed-spread { grid-template-columns: 1fr; gap: 40px; }
  .ed-columns { grid-template-columns: 1fr 1fr; }
  .ed-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .ed-footer-credits { grid-template-columns: 1fr 1fr; padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--ink); }

  .lx-showcase { grid-template-columns: 1fr; gap: 40px; }
  .lx-room { grid-template-columns: 60px 1fr; gap: 28px; }
  .lx-room-mat { grid-column: span 2; }
}

@media (min-width: 1201px) and (max-width: 1360px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
  }
  .topbar .nav-cta { display: none; }
  .switcher-name { display: none; }
  .world-switcher { min-width: 0; justify-content: space-between; }
  .switcher-btn { padding: 8px 10px; }

  .ed-hero {
    grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1.24fr);
    gap: 32px;
  }
  .ed-portrait {
    max-width: min(100%, 450px);
    align-self: start;
  }
  .ed-headline {
    font-size: clamp(3rem, 4.75vw, 4.9rem);
    line-height: 1;
  }
  .ed-deck { max-width: min(100%, 52ch); }
  .ed-meta { gap: 18px; }
}

/* Keep the selected world identifiable when the compact rail hides the
   inactive labels. This also prevents Cinematic Dark's wider active tab from
   becoming an unexplained block of accent color. */
@media (max-width: 1360px) {
  .switcher-btn.is-active .switcher-name {
    display: inline-block;
    white-space: nowrap;
  }
}

@media (max-width: 880px) {
  .skill-primitives { padding: 64px 16px; }
  .skill-primitives-head { gap: 18px; padding-bottom: 20px; }
  .skill-primitives h2 { font-size: clamp(2rem, 8vw, 3.8rem); }
  .skill-primitive-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .skill-primitive-grid article { min-height: auto; padding: 20px 18px; }
  .skill-primitive-grid article span { margin-bottom: 14px; }

  .cn-hero { padding: 110px 16px 80px; }
  .cn-chapter { padding: 80px 16px 60px; }
  .cn-chapter-body { grid-template-columns: 1fr; gap: 14px; }
  .cn-footer-frame { grid-template-columns: 1fr; gap: 36px; padding: 80px 16px 36px; }
  .cn-status { font-size: 10px; gap: 12px; bottom: 14px; }

  .ed-hero, .ed-spread, .ed-columns { padding-left: 16px; padding-right: 16px; }
  .ed-megaword { display: none; }
  .ed-marks { display: none; }
  .ed-meta { grid-template-columns: 1fr; gap: 18px; }
  .ed-columns { grid-template-columns: 1fr; }
  .ed-footer-credits { grid-template-columns: 1fr; }

  .rc-hero { padding: 110px 16px 60px; }
  .rc-doodle { display: none; }
  .rc-footer { padding: 80px 16px 60px; }
  .rc-track-section { height: auto; }
  .rc-track-sticky { position: relative; height: auto; overflow: visible; }
  .rc-track { display: block; width: 100%; height: auto; transform: none !important; }
  .rc-panel { width: 100%; min-height: 100svh; grid-template-columns: 1fr; }

  .lx-hero { padding: 110px 16px 70px; }
  .lx-hero-content { max-width: 100%; }
  .lx-headline { font-size: clamp(2rem, 8vw, 3.4rem); }
  .lx-showcase { padding: 60px 16px 80px; }
  .lx-rooms { padding: 60px 16px 80px; }
  .lx-room { grid-template-columns: 60px 1fr; padding: 36px 0; }
  .lx-room-mat { grid-column: span 2; aspect-ratio: 16 / 10; }
  .lx-footer { padding: 100px 16px 60px; }
}

@media (max-width: 720px) {
  body { cursor: auto; }
  a, button { cursor: pointer; }
  .cursor-dot, .cursor-label { display: none; }

  .topbar { left: 12px; right: 12px; top: 12px; }
  .brand { padding: 0 10px; font-size: 11px; }
  .switcher-label { display: none; }
  .switcher-num { width: 18px; height: 18px; font-size: 9px; }

  .cn-title { font-size: clamp(3.4rem, 18vw, 5rem); }
  .ed-headline { font-size: clamp(2.4rem, 9vw, 4rem); }
  .rc-headline { font-size: clamp(2.4rem, 10vw, 4rem); }
  .lx-headline { font-size: clamp(2rem, 9vw, 3.2rem); }

  .rc-stickers { gap: 12px; }
  .rc-sticker { padding: 14px 18px; font-size: 13px; box-shadow: 4px 4px 0 var(--ink); }
  .rc-readout { grid-template-columns: 1fr; padding: 20px; }
  .rc-guestbook { gap: 10px; }
  .rc-gb-entry { padding: 10px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body { cursor: auto; }
  a, button { cursor: pointer; }
  .cursor-dot, .cursor-label { display: none; }
}

/* =============================================================== */
/* Focused refinement overrides                                    */
/* Keep content usable when optional motion or WebGL is unavailable. */
/* =============================================================== */

/* Native pointer is the source of truth. The custom cursor layers stay disabled
   so no unexplained circle sits at the focal point. */
body,
a,
button,
input,
select,
textarea { cursor: auto; }
a,
button { cursor: pointer; }
.cursor-dot,
.cursor-label { display: none !important; }

/* Live-region copy must remain available to assistive tech without becoming
   a stray visual label when a world changes. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keyboard users still get a clear, world-aware focus treatment. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent-hot);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px var(--bg);
}

/* Loader: a short editorial strip sequence stages the compile signal. */
.loader {
  place-items: center;
  background: #07090d;
  clip-path: inset(0 0 0 0);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease), visibility 420ms;
}
.loader-strips {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(320px, calc(100% - 48px));
  height: 64px;
}
.loader-strips span {
  display: block;
  flex: 1 1 0;
  height: 18%;
  background: var(--cyan);
  transform-origin: bottom;
  animation: loaderSlice 720ms var(--ease) infinite alternate;
}
.loader-strips span:nth-child(2) { height: 46%; background: var(--white); animation-delay: 80ms; }
.loader-strips span:nth-child(3) { height: 82%; background: var(--orange); animation-delay: 160ms; }
.loader-strips span:nth-child(4) { height: 58%; background: var(--white); animation-delay: 240ms; }
.loader-strips span:nth-child(5) { height: 30%; background: var(--cyan); animation-delay: 320ms; }
.loader-copy {
  bottom: 31%;
  width: min(560px, calc(100% - 32px));
  gap: 14px;
  color: rgba(255,255,255,0.86);
}
.loader-copy p { color: inherit; }
.loader-line {
  bottom: 14%;
  height: 2px;
  background: rgba(255,255,255,0.18);
}
.loader-line span { background: var(--cyan); }
@keyframes loaderSlice {
  from { transform: scaleY(0.5) translateY(8px); opacity: 0.58; }
  to { transform: scaleY(1) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-strips span { animation: none; }
}

/* Reveals enhance already-visible content rather than gating it. A caller
   can opt into the fade-up treatment by adding .motion-enhanced to body. */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
body.motion-enhanced [data-reveal] {
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
body.motion-enhanced [data-reveal]:not(.is-visible) {
  opacity: 0.001;
  transform: translate3d(0, 18px, 0);
}
body.motion-enhanced [data-reveal].is-visible { opacity: 1; transform: none; }

/* Editorial portrait parallax is an authored motion channel, not the generic
   reveal transform. Keep it alive after the reveal observer marks the figure
   visible (the generic rule above otherwise wins on specificity). */
body.motion-enhanced[data-world="editorial-interference"] .ed-portrait[data-reveal].is-visible {
  opacity: 1;
  transform:
    translate3d(calc(var(--mx) * -34px), calc(var(--ed-p) * 56px + var(--my) * -16px), 0)
    rotate(calc(-1.4deg + var(--mx) * 4deg));
}

/* World transition: three clipped slices create a compact scene change. */
.world-transition {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
  opacity: 0;
  background: transparent !important;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: opacity 180ms ease, transform 360ms var(--ease);
  overflow: hidden;
}
.world-transition::before,
.world-transition::after,
.world-transition span {
  display: block;
  grid-row: 1;
  min-width: 0;
  height: 100%;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  transform: translateY(0);
}
.world-transition::before { content: ""; background: var(--accent-hot); transform: translateY(4%); }
.world-transition::after { content: ""; background: var(--accent); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); transform: translateY(-4%); }
.world-transition span { z-index: 1; background: var(--ink); }
.world-transition span:first-child,
.world-transition span:nth-child(2),
.world-transition span:nth-child(3) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .world-transition { transition: none; transform: none !important; opacity: 0 !important; }
}

/* Light worlds: solid surfaces and ink values keep topbar controls legible. */
body[data-world="spatial-architecture"] .topbar,
body[data-world="data-monument"] .topbar,
body[data-world="papercraft-tactile"] .topbar { color: #182027; }
body[data-world="spatial-architecture"] .brand,
body[data-world="spatial-architecture"] .nav-cta,
body[data-world="data-monument"] .brand,
body[data-world="data-monument"] .nav-cta,
body[data-world="papercraft-tactile"] .brand,
body[data-world="papercraft-tactile"] .nav-cta {
  color: #182027;
  background: rgba(248,250,246,0.94);
  border-color: rgba(24,32,39,0.42);
  backdrop-filter: blur(14px);
}
body[data-world="data-monument"] .brand,
body[data-world="data-monument"] .nav-cta { color: #0a1224; background: rgba(246,239,226,0.96); }
body[data-world="papercraft-tactile"] .brand,
body[data-world="papercraft-tactile"] .nav-cta { color: #2b2118; background: rgba(255,250,240,0.96); }
body[data-world="spatial-architecture"] .world-switcher,
body[data-world="data-monument"] .world-switcher,
body[data-world="papercraft-tactile"] .world-switcher {
  background: rgba(248,250,246,0.96);
  border-color: rgba(24,32,39,0.42);
  backdrop-filter: blur(14px);
}
body[data-world="data-monument"] .world-switcher { background: rgba(246,239,226,0.97); border-color: rgba(10,18,36,0.3); }
body[data-world="papercraft-tactile"] .world-switcher { background: rgba(255,250,240,0.97); border-color: rgba(43,33,24,0.3); }
body[data-world="spatial-architecture"] .switcher-label,
body[data-world="spatial-architecture"] .switcher-btn { color: rgba(24,32,39,0.76); }
body[data-world="data-monument"] .switcher-label,
body[data-world="data-monument"] .switcher-btn { color: rgba(10,18,36,0.76); }
body[data-world="papercraft-tactile"] .switcher-label,
body[data-world="papercraft-tactile"] .switcher-btn { color: rgba(43,33,24,0.76); }
body[data-world="spatial-architecture"] .switcher-btn:hover,
body[data-world="data-monument"] .switcher-btn:hover,
body[data-world="papercraft-tactile"] .switcher-btn:hover { color: #0a1224; background: rgba(15,90,110,0.12); }

/* Cinematic mobile geometry: reserve a lane for status and prevent long
   words/HUD rows from widening the 390px viewport. */
@media (max-width: 480px) {
  .cn-hero { min-height: 100svh; padding: 88px 16px 92px; }
  .cn-hero-frame { min-height: auto; padding-top: 8vh; gap: 16px; align-content: start; }
  .cn-title { max-width: 100%; font-size: clamp(2.9rem, 15vw, 4.7rem); line-height: 0.9; overflow-wrap: anywhere; }
  .cn-lede { max-width: 34ch; margin-bottom: 22px; font-size: 15px; }
  .cn-actions { gap: 10px; }
  .cn-cta-primary, .cn-cta-secondary { min-height: 48px; padding: 0 16px; }
  .cn-hud { width: 100%; padding: 16px; font-size: 11px; }
  .cn-hud dl div { grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr); gap: 8px; }
  .cn-hud dd { overflow-wrap: anywhere; }
  .cn-status { left: 16px; right: 16px; bottom: 12px; gap: 8px 16px; line-height: 1.35; }
  .cn-status span { flex: 1 1 42%; min-width: 0; }
}

/* =============================================================== */
/* WORLDS 05–09 — palettes + switcher/cursor theming               */
/* =============================================================== */
body[data-world="spatial-architecture"] {
  /* light architectural daylight — the raymarched scene carries the values */
  --bg: #dfe3da; --fg: #1f262b; --fg-muted: rgba(24,32,39,0.84);
  --accent: #0f5a6e; --accent-hot: #8a3f00; --rule: rgba(31,38,43,0.22);
}
body[data-world="festival-kinetic"] {
  --bg: #0a0a12; --fg: #ffffff; --fg-muted: rgba(255,255,255,0.66);
  --accent: #c7ff2e; --accent-hot: #ff7dbb; --rule: rgba(255,255,255,0.16);
}
body[data-world="papercraft-tactile"] {
  --bg: #f1e7d3; --fg: #2b2118; --fg-muted: rgba(43,33,24,0.78);
  --accent: #b03914; --accent-hot: #a06a00; --rule: rgba(43,33,24,0.18);
}
body[data-world="generative-system"] {
  --bg: #06070a; --fg: #e8edf2; --fg-muted: rgba(232,237,242,0.6);
  --accent: #38e1d6; --accent-hot: #ff5e8a; --rule: rgba(232,237,242,0.12);
}
body[data-world="data-monument"] {
  color-scheme: light;
  --bg: #e8e0d2; --fg: #0a1224; --fg-muted: rgba(10,18,36,0.62);
  --accent: #173fcf; --accent-hot: #ef4725; --rule: rgba(10,18,36,0.22);
  --font-display: "Avenir Next Condensed", "Franklin Gothic Medium", sans-serif;
  --font-body: "Iowan Old Style", Baskerville, Georgia, serif;
}

/* switcher theming */
body[data-world="spatial-architecture"] .world-switcher,
body[data-world="generative-system"] .world-switcher { background: rgba(8,12,16,0.7); border: 1px solid var(--rule); }
body[data-world="data-monument"] .world-switcher {
  background: rgba(232,224,210,0.9);
  border: 1px solid rgba(10,18,36,0.34);
  box-shadow: 7px 7px 0 rgba(23,63,207,0.14);
}
body[data-world="data-monument"] .switcher-label,
body[data-world="data-monument"] .switcher-btn { color: rgba(10,18,36,0.62); }
body[data-world="data-monument"] .switcher-btn:hover { color: #0a1224; }
body[data-world="data-monument"] .switcher-btn.is-active { color: #f6efe2; background: #173fcf; }
body[data-world="data-monument"] .switcher-btn.is-active .switcher-num { color: #173fcf; background: #f6efe2; }
body[data-world="festival-kinetic"] .world-switcher { background: rgba(10,10,18,0.7); border: 1px solid var(--rule); }
body[data-world="festival-kinetic"] .switcher-btn.is-active { color: #0a0a12; background: var(--accent); }
body[data-world="festival-kinetic"] .switcher-btn.is-active .switcher-num { background: #0a0a12; color: var(--accent); }
body[data-world="spatial-architecture"] .switcher-btn.is-active,
body[data-world="generative-system"] .switcher-btn.is-active { color: var(--bg); background: var(--accent); }
body[data-world="spatial-architecture"] .switcher-btn.is-active .switcher-num,
body[data-world="generative-system"] .switcher-btn.is-active .switcher-num { background: var(--bg); color: var(--accent); }

body[data-world="papercraft-tactile"] .world-switcher { background: rgba(255,250,240,0.82); border: 1px solid rgba(43,33,24,0.22); }
body[data-world="papercraft-tactile"] .switcher-label { color: rgba(43,33,24,0.6); }
body[data-world="papercraft-tactile"] .switcher-btn { color: rgba(43,33,24,0.6); }
body[data-world="papercraft-tactile"] .switcher-btn:hover { color: var(--ink); }
body[data-world="papercraft-tactile"] .switcher-btn.is-active { color: #fff; background: var(--accent); }
body[data-world="papercraft-tactile"] .switcher-btn.is-active .switcher-num { background: #fff; color: var(--accent); }

body[data-world="papercraft-tactile"] .brand,
body[data-world="papercraft-tactile"] .nav-cta { color: var(--ink); }
body[data-world="papercraft-tactile"] .nav-cta { background: var(--accent); color: #fff; }
body[data-world="data-monument"] .brand,
body[data-world="data-monument"] .nav-cta {
  color: #0a1224;
  background: rgba(232,224,210,0.92);
  border-color: rgba(10,18,36,0.42);
}
body[data-world="data-monument"] .brand-mark {
  background: #ef4725;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 62% 34%, 62% 100%, 38% 100%, 38% 34%, 0 34%);
  box-shadow: none;
}
body[data-world="data-monument"] .nav-cta:hover { color: #f6efe2; background: #173fcf; }

/* cursor theming */
body[data-world="spatial-architecture"] .cursor-dot { background: transparent; border: 1px solid var(--accent); mix-blend-mode: normal; }
body[data-world="spatial-architecture"] .cursor-label { background: var(--accent); color: #0e1418; }
body[data-world="festival-kinetic"] .cursor-dot { background: var(--accent); mix-blend-mode: difference; }
body[data-world="festival-kinetic"] .cursor-label { background: var(--accent-hot); color: #0a0a12; }
body[data-world="papercraft-tactile"] .cursor-dot { background: var(--accent); mix-blend-mode: normal; }
body[data-world="papercraft-tactile"] .cursor-label { background: var(--ink); color: #fff7e8; }
body[data-world="generative-system"] .cursor-dot { background: transparent; border: 1px solid var(--accent); }
body[data-world="generative-system"] .cursor-label { background: var(--accent); color: #06070a; }
body[data-world="data-monument"] .cursor-dot { width: 18px; height: 18px; background: transparent; border: 2px solid #173fcf; mix-blend-mode: multiply; }
body[data-world="data-monument"] .cursor-label { background: #ef4725; color: #f6efe2; }

/* shared section rhythm for new worlds */
.world-spatial-architecture, .world-festival-kinetic,
.world-generative-system { overflow: hidden; }
.world-data-monument { overflow: clip; }

/* =============================================================== */
/* WORLD 05 — Spatial Architecture                                  */
/* =============================================================== */
.sp-hero {
  position: relative; min-height: 100vh;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 6vw, 96px) 80px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; gap: 40px;
}
.sp-coords {
  position: absolute; top: clamp(96px, 13vh, 150px); left: clamp(20px, 6vw, 96px);
  display: flex; gap: 18px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #06485a;
  isolation: isolate; padding: 4px 10px 4px 4px;
  text-shadow: 0 1px 0 rgba(223,227,218,0.92);
}
.sp-coords::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -10px 0 -4px;
  pointer-events: none; background: rgba(223,227,218,0.82);
  -webkit-mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
}
.sp-coords span { padding-left: 16px; position: relative; }
.sp-coords span::before { content: "+"; position: absolute; left: 0; color: var(--accent); }
.sp-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
.sp-hero .sp-eyebrow,
.sp-strata .sp-eyebrow,
.sp-footer .sp-eyebrow {
  display: inline-block; color: #06485a; padding: 2px 6px;
  background: rgba(223,227,218,0.72);
  text-shadow: 0 1px 0 rgba(223,227,218,0.92);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.sp-hero-inner {
  position: relative;
  isolation: isolate;
}
.sp-hero-inner::before {
  /* A continuous reading plane keeps fine copy stable over the live field. */
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -220px -42px -34px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(223,227,218,0.94) 0%, rgba(223,227,218,0.86) 42%, rgba(223,227,218,0.54) 68%, rgba(223,227,218,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
}
.sp-title { margin: 0 0 26px; line-height: 0.92; font-weight: 400; }
.sp-title-line { display: block; font-family: var(--font-display); font-size: clamp(48px, 9vw, 132px); letter-spacing: -0.02em; }
.sp-title-thin { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 3.4vw, 46px); letter-spacing: 0; color: var(--fg-muted); padding-left: 0.1em; }
.sp-lede { max-width: 46ch; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--fg-muted); margin: 0 0 34px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sp-cta {
  display: inline-flex; gap: 10px; align-items: center; padding: 15px 26px;
  background: var(--accent); color: #0e1418; border-radius: 2px; font-weight: 600;
  font-size: 14px; letter-spacing: 0.02em; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.sp-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(134,216,232,0.28); }
.sp-ghost {
  padding: 14px 22px; border: 1px solid var(--rule); border-radius: 2px; color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; transition: color 300ms, border-color 300ms;
}
.sp-ghost:hover { color: var(--fg); border-color: var(--accent); }

.sp-stage {
  /* the louvre tower + waterline are rendered in WebGL behind this column */
  position: relative;
  min-height: 64vh;
}
.sp-waterline {
  position: absolute;
  left: 50%;
  top: calc(54% + var(--sp-water-shift, 0px));
  width: min(560px, 74vw);
  height: 42px;
  transform: translateX(-50%) rotateX(68deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(134,216,232,0.18), rgba(134,216,232,0.04) 55%, transparent 72%);
  filter: blur(0.2px);
  z-index: -1;
}
.sp-model {
  position: relative; width: min(360px, 60vw); height: min(360px, 60vw);
  transform-style: preserve-3d;
  transform: rotateX(var(--sp-rx, 58deg)) rotateZ(var(--sp-rz, 42deg)) translateZ(var(--sp-rise, 0px));
  transition: transform 320ms var(--ease);
  z-index: 2;
}
.sp-model-reflection {
  position: absolute;
  top: 56%;
  opacity: 0.22;
  filter: blur(1px) saturate(0.8);
  transform: translateY(74px) scaleY(-0.58) rotateX(var(--sp-rx, 58deg)) rotateZ(var(--sp-rz, 42deg));
  transform-origin: center top;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 72%);
}
.sp-slab {
  position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  border: 1px solid rgba(134,216,232,0.55);
  background: linear-gradient(135deg, rgba(134,216,232,0.16), rgba(134,216,232,0.03));
  box-shadow: 0 0 40px rgba(134,216,232,0.12) inset;
}
.sp-slab-1 { width: 230px; height: 230px; margin: -115px 0 0 -115px; transform: translateZ(6px); }
.sp-slab-2 { width: 178px; height: 178px; margin: -89px 0 0 -89px; transform: translateZ(46px); border-color: rgba(134,216,232,0.4); }
.sp-slab-3 { width: 126px; height: 126px; margin: -63px 0 0 -63px; transform: translateZ(92px); }
.sp-slab-core { width: 60px; height: 60px; margin: -30px 0 0 -30px; transform: translateZ(150px); background: var(--accent); border: none; box-shadow: 0 0 60px rgba(134,216,232,0.7); }
.sp-slab-roof { width: 96px; height: 96px; margin: -48px 0 0 -48px; transform: translateZ(124px); border-color: var(--accent-hot); background: linear-gradient(135deg, rgba(240,163,90,0.18), transparent); }
.sp-model.is-orbit { animation: sp-orbit 18s linear infinite; }
.sp-model-reflection.is-orbit { animation: sp-orbit-reflection 18s linear infinite; }
@keyframes sp-orbit {
  from { transform: rotateX(58deg) rotateZ(0deg); }
  to { transform: rotateX(58deg) rotateZ(360deg); }
}
@keyframes sp-orbit-reflection {
  from { transform: translateY(74px) scaleY(-0.58) rotateX(58deg) rotateZ(0deg); }
  to { transform: translateY(74px) scaleY(-0.58) rotateX(58deg) rotateZ(360deg); }
}

.sp-index {
  position: absolute; right: clamp(20px, 6vw, 96px); bottom: 64px; width: 240px;
  border: 1px solid var(--rule); background: rgba(8,12,16,0.5); backdrop-filter: blur(6px);
  padding: 16px; font-family: var(--font-mono);
}
.sp-index header { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sp-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-index li { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.sp-index li b { color: var(--fg); }
.sp-index footer { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--fg-muted); }
.sp-index footer b { color: var(--accent); }

.sp-strata { padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 96px); }
.sp-strata,
.sp-footer {
  position: relative;
  isolation: isolate;
}
.sp-strata::before,
.sp-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(223,227,218,0), rgba(223,227,218,0.84) 10%, rgba(223,227,218,0.80) 90%, rgba(223,227,218,0));
}
.sp-strata-head { margin-bottom: 48px; }
.sp-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.01em; margin: 8px 0 0; }
.sp-strata-rows { display: grid; gap: 0; }
.sp-stratum {
  display: grid; grid-template-columns: 100px minmax(0,1fr) minmax(0,1.4fr); gap: 28px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.sp-stratum:last-child { border-bottom: 1px solid var(--rule); }
.sp-stratum-z { font-family: var(--font-mono); font-size: 13px; color: #06485a; letter-spacing: 0.04em; font-weight: 500; text-shadow: 0 1px 0 rgba(223,227,218,0.88); }
.sp-stratum h3 { font-size: clamp(20px, 2.4vw, 30px); margin: 0; font-weight: 500; }
.sp-stratum p { margin: 0; color: var(--fg-muted); font-size: 15px; }

.sp-footer { padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 96px) 56px; }
.sp-footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,0.9fr); gap: 40px; align-items: end; }
.sp-footer-lede { color: var(--fg-muted); max-width: 44ch; margin: 16px 0 0; }
.sp-footer-legend { display: grid; gap: 10px; margin: 0; font-family: var(--font-mono); }
.sp-footer-legend div { display: flex; justify-content: space-between; font-size: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.sp-footer-legend dt { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.sp-footer-legend dd { margin: 0; color: var(--fg); }
.sp-footer-rule { height: 1px; background: var(--rule); margin: 40px 0 22px; }
.sp-footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.sp-footer-base a:hover { color: var(--accent); }

/* =============================================================== */
/* WORLD 06 — Festival Kinetic                                      */
/* =============================================================== */
.fk-index {
  position: fixed; left: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 10px;
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 12px;
}
body:not([data-world="festival-kinetic"]) .fk-index { display: none; }
.fk-index-label { color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; }
.fk-index a { color: var(--fg-muted); letter-spacing: 0.08em; transition: color 240ms; }
.fk-index a:hover { color: var(--accent); }

.fk-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 82px);
  padding: clamp(120px, 16vh, 200px) clamp(20px, 6vw, 110px) 70px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 74px 74px,
    linear-gradient(180deg, rgba(199,255,46,0.12), transparent 42%),
    #0a0a12;
}
.fk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(-12deg, transparent 0 36px, rgba(255,125,187,0.13) 36px 39px, transparent 39px 80px),
    linear-gradient(90deg, transparent 0 62%, rgba(199,255,46,0.14) 62% 64%, transparent 64%);
  opacity: 0.72;
}
.fk-copy {
  position: relative;
  z-index: 2;
  max-width: 960px;
}
.fk-eyebrow { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.fk-title { position: relative; z-index: 1; margin: 0 0 24px; line-height: 0.84; font-family: var(--font-display); font-weight: 400; }
.fk-title span { display: block; }
.fk-title-fill { font-size: clamp(72px, 19vw, 280px); color: var(--fg); letter-spacing: -0.02em; }
.fk-title-out { font-size: clamp(60px, 16vw, 240px); letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 2px var(--accent); }
.fk-lede { position: relative; z-index: 1; max-width: 52ch; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; color: var(--fg-muted); margin: 0 0 30px; }
.fk-lede em { color: var(--accent-hot); font-style: normal; }
.fk-ticket { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 30px; border: 1px solid var(--rule); width: fit-content; }
.fk-ticket div { padding: 14px 26px; border-right: 1px dashed var(--rule); font-family: var(--font-mono); }
.fk-ticket div:last-child { border-right: none; }
.fk-ticket span { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; }
.fk-ticket b { font-size: 16px; color: var(--fg); }
.fk-cta {
  position: relative; z-index: 1; display: inline-flex; gap: 10px; align-items: center; width: fit-content;
  padding: 16px 30px; background: var(--accent); color: #0a0a12; border-radius: 100px; font-weight: 700;
  font-size: 15px; letter-spacing: 0.01em; transition: transform 280ms var(--ease-spring), box-shadow 280ms;
}
.fk-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 44px rgba(199,255,46,0.34); }

.fk-anchor {
  position: relative;
  z-index: 2;
  min-height: min(620px, 72vh);
  display: grid;
  place-items: center;
  perspective: 1200px;
}
.fk-pass {
  position: relative;
  width: min(410px, 76vw);
  aspect-ratio: 0.72;
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  transform: rotateX(var(--fk-rx, 9deg)) rotateY(var(--fk-ry, -14deg)) rotateZ(-7deg);
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, #c7ff2e 0 49%, #101018 49% 51%, #ff7dbb 51% 100%);
  color: #0a0a12;
  border: 2px solid #0a0a12;
  box-shadow:
    18px 18px 0 #0393ff,
    34px 34px 0 rgba(255,255,255,0.08),
    0 34px 90px rgba(0,0,0,0.55);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.fk-pass::before,
.fk-pass::after {
  content: "";
  position: absolute;
  top: 46%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0a0a12;
  border: 2px solid #0a0a12;
}
.fk-pass::before { left: -18px; }
.fk-pass::after { right: -18px; }
.fk-pass-kicker,
.fk-pass em {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fk-pass b {
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(52px, 7.6vw, 112px);
  line-height: 0.78;
  letter-spacing: 0;
  transform: translateZ(38px);
  text-shadow: 4px 4px 0 rgba(255,255,255,0.34);
}
.fk-pass i {
  position: absolute;
  right: 22px;
  top: 20px;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1px #0a0a12;
  font-style: normal;
  transform: rotate(8deg) translateZ(50px);
}
.fk-pass em {
  align-self: end;
  font-style: normal;
}
.fk-pass-rfid {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 76px;
  height: 76px;
  border: 3px solid #0a0a12;
  background:
    repeating-linear-gradient(90deg, #0a0a12 0 4px, transparent 4px 9px),
    #fff;
  transform: translateZ(26px);
}
.fk-pass-stub {
  position: absolute;
  right: 3vw;
  bottom: 12vh;
  padding: 18px 32px;
  background: #fff;
  color: #0a0a12;
  border: 2px dashed #0a0a12;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  transform: rotate(10deg);
  box-shadow: 10px 10px 0 #ff7dbb;
}
.fk-pass-shadow {
  position: absolute;
  bottom: 8vh;
  width: min(380px, 70vw);
  height: 46px;
  transform: rotate(-7deg);
  background: rgba(0,0,0,0.52);
  filter: blur(18px);
  z-index: -1;
}

.fk-marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; background: var(--accent-hot); }
.fk-marquee span { display: inline-block; white-space: nowrap; font-family: var(--font-display); font-size: clamp(24px, 4vw, 52px); color: #0a0a12; animation: fk-scroll 22s linear infinite; }
@keyframes fk-scroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

.fk-quote {
  padding: clamp(46px, 8vh, 96px) clamp(20px, 6vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  background: #fff;
  color: #0a0a12;
}
.fk-quote p {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(34px, 5.8vw, 92px);
  line-height: 0.96;
}
.fk-quote span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(10,10,18,0.62);
}

.fk-grid { padding: clamp(70px, 11vh, 130px) clamp(20px, 6vw, 110px); }
.fk-grid-head { margin-bottom: 44px; }
.fk-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 72px); line-height: 0.96; margin: 8px 0 0; }
.fk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.fk-card {
  position: relative; padding: 28px 24px 30px; border-radius: 8px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #0a0a12; overflow: hidden;
  transition: transform 320ms var(--ease);
}
.fk-card:hover { transform: translateY(-6px); }
.fk-card-acid { background: var(--accent); }
.fk-card-pink { background: var(--accent-hot); }
.fk-card-blue { background: var(--blue); color: #fff; }
.fk-card-tag { position: absolute; top: 18px; left: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.7; }
.fk-card h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 8px; font-weight: 700; }
.fk-card p { margin: 0; font-size: 14px; opacity: 0.82; line-height: 1.5; }

.fk-footer { position: relative; padding: 0 0 50px; }
.fk-footer-marquee { overflow: hidden; padding: 14px 0; border-top: 1px solid var(--rule); }
.fk-footer-marquee span { display: inline-block; white-space: nowrap; font-family: var(--font-display); font-size: clamp(28px, 5vw, 64px); color: var(--accent); animation: fk-scroll 18s linear infinite; }
.fk-footer-inner { padding: clamp(50px, 8vh, 90px) clamp(20px, 6vw, 110px) 0; text-align: center; }
.fk-footer-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 7vw, 110px); line-height: 0.92; margin: 0 0 30px; }
.fk-cta-big { margin: 0 auto; }
.fk-footer-base { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 40px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }

/* =============================================================== */
/* WORLD 07 — Papercraft Tactile                                    */
/* =============================================================== */
.world-papercraft-tactile { color: var(--fg); }
.pc-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body:not([data-world="papercraft-tactile"]) .pc-grain { display: none; }
.pc-hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 6vw, 96px) 60px; overflow: hidden;
}
.pc-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pc-sun { position: absolute; right: 12vw; top: 16vh; width: 160px; height: 160px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 12px 0 rgba(43,33,24,0.12); }
.pc-cloud { position: absolute; height: 56px; border-radius: 40px; background: #fff8ec; box-shadow: 0 10px 0 rgba(43,33,24,0.08); }
.pc-cloud::before, .pc-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: #fff8ec; }
.pc-cloud-1 { width: 180px; right: 26vw; top: 22vh; animation: pc-drift 26s ease-in-out infinite; }
.pc-cloud-1::before { width: 80px; height: 80px; left: 24px; bottom: 4px; }
.pc-cloud-1::after { width: 60px; height: 60px; right: 28px; bottom: 8px; }
.pc-cloud-2 { width: 130px; left: 14vw; top: 30vh; animation: pc-drift 34s ease-in-out infinite reverse; }
.pc-cloud-2::before { width: 60px; height: 60px; left: 18px; bottom: 4px; }
.pc-cloud-2::after { width: 46px; height: 46px; right: 20px; bottom: 8px; }
@keyframes pc-drift { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(28px);} }
.pc-hill { position: absolute; left: -5%; width: 110%; border-radius: 50% 50% 0 0 / 90% 90% 0 0; box-shadow: 0 -8px 0 rgba(43,33,24,0.06) inset; }
.pc-hill-back { bottom: 0; height: 30vh; background: #d8c39a; }
.pc-hill-mid { bottom: 0; height: 22vh; background: #c7a86f; left: -10%; width: 120%; }
.pc-hill-front { bottom: 0; height: 14vh; background: #9c7c47; left: -8%; width: 116%; }
.pc-hero-copy { position: relative; z-index: 1; max-width: 640px; }
.pc-eyebrow { margin: 0 0 22px; }
.pc-tape {
  display: inline-block; padding: 7px 16px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; transform: rotate(-2.5deg);
  box-shadow: 3px 3px 0 rgba(43,33,24,0.25);
}
.pc-tape-alt { background: var(--ink); color: var(--accent-hot); transform: rotate(2deg); }
.pc-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 8.4vw, 116px);
  line-height: 0.92; margin: 0 0 22px; color: var(--ink); text-shadow: 4px 4px 0 rgba(43,33,24,0.12);
}
.pc-title-emph { color: var(--accent); }
.pc-lede { max-width: 52ch; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65; color: var(--fg-muted); margin: 0; }

.pc-path-section { position: relative; height: 240vh; }
body:not([data-world="papercraft-tactile"]) .pc-path-section { height: auto; }
.pc-path-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(43,33,24,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(43,33,24,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.pc-path-sticky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1040px, 94vw);
  height: min(520px, 62vh);
  transform: translate(-50%, -50%) rotate(-1.4deg);
  background: #fff8ec;
  border: 2px solid rgba(43,33,24,0.86);
  box-shadow: 12px 16px 0 rgba(43,33,24,0.16);
  z-index: 0;
}
.pc-prop {
  position: absolute;
  z-index: 8;
  border: 2px solid var(--ink);
  background: #fff8ec;
  box-shadow: 6px 7px 0 rgba(43,33,24,0.18);
}
.pc-prop-note {
  left: 11vw;
  top: 25vh;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  transform: rotate(-4deg);
}
.pc-prop-house {
  right: 12vw;
  top: 27vh;
  width: 116px;
  height: 92px;
  background: #eaf3e4;
  transform: rotate(3deg);
}
.pc-prop-house::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -42px;
  width: 82px;
  height: 82px;
  background: var(--accent);
  border: 2px solid var(--ink);
  transform: rotate(45deg);
  z-index: -1;
}
.pc-prop-house::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: 0;
  width: 32px;
  height: 46px;
  background: #f1e7d3;
  border: 2px solid var(--ink);
  border-bottom: 0;
}
.pc-prop-flag {
  right: 17vw;
  bottom: 15vh;
  padding: 12px 18px;
  background: var(--accent-hot);
  font-family: var(--font-display);
  font-size: 18px;
  transform: rotate(-7deg);
}
.pc-prop-fold {
  left: 15vw;
  bottom: 15vh;
  width: 110px;
  height: 90px;
  background: linear-gradient(135deg, #fff8ec 0 50%, #dfcda7 50% 100%);
  transform: rotate(8deg) skew(-4deg);
}
.pc-fold-stage {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(880px, 82vw);
  height: min(360px, 44vh);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.pc-fold-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid rgba(43,33,24,0.85);
  transform-origin: 50% 100%;
  box-shadow: 8px 10px 0 rgba(43,33,24,0.12);
}
.pc-fold-sheet-back {
  width: 72%;
  height: 56%;
  background: #e7d1a2;
  transform: translateX(-50%) rotateX(52deg) rotateZ(-3deg);
}
.pc-fold-sheet-mid {
  width: 58%;
  height: 62%;
  left: 22%;
  background: #eaf3e4;
  transform: rotateX(58deg) rotateZ(8deg);
}
.pc-fold-sheet-front {
  width: 64%;
  height: 48%;
  left: 40%;
  background: #fdeede;
  transform: rotateX(60deg) rotateZ(-7deg);
}
.pc-path-svg {
  position: absolute;
  width: min(1000px, 90vw);
  height: min(360px, 42vh);
  left: 50%;
  top: 54%;
  transform: translate(-50%,-50%);
  z-index: 6;
  overflow: visible;
}
.pc-path-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-path-shadow {
  stroke: rgba(43,33,24,0.16);
  stroke-width: 18;
  stroke-dasharray: 3 16;
  transform: translate(9px, 12px);
}
.pc-path-svg [data-paper-line] {
  stroke: var(--ink);
  stroke-width: 9;
  stroke-dasharray: var(--pc-draw, 0) var(--pc-rest, 9999);
  stroke-dashoffset: 0;
  opacity: 0.84;
  filter: drop-shadow(3px 4px 0 rgba(43,33,24,0.14));
}
.pc-traveler {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 96px;
  transform: translate(-50%,-86%);
  transition: none;
  z-index: 30;
  isolation: isolate;
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 24px 24px 14px 14px;
  box-shadow: 8px 10px 0 rgba(43,33,24,0.24);
  filter: drop-shadow(0 10px 0 rgba(43,33,24,0.12));
}
.pc-traveler::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 80px;
  height: 18px;
  transform: translateX(-50%);
  background: rgba(43,33,24,0.18);
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
}
.pc-traveler::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -8px;
  width: 18px;
  height: 18px;
  background: var(--accent-hot);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 3px 3px 0 rgba(43,33,24,0.2);
}
.pc-traveler-body {
  display: block;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 36px;
  background: rgba(255,248,236,0.35);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.pc-traveler-body::before,
.pc-traveler-body::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 18px;
  height: 14px;
  background: var(--ink);
  border-radius: 999px;
  transform-origin: 50% 0;
}
.pc-traveler-body::before {
  left: 8px;
  transform: rotate(calc(var(--pc-walk, 0) * 16deg));
}
.pc-traveler-body::after {
  right: 8px;
  transform: rotate(calc(var(--pc-walk, 0) * -16deg));
}
.pc-traveler.is-walking .pc-traveler-face {
  transform: translateX(-50%) translateY(calc(var(--pc-walk, 0) * -2px));
}
.pc-traveler-face {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 3;
  width: 52px;
  height: 34px;
  transform: translateX(-50%);
  display: block;
  overflow: hidden;
  color: transparent;
  background:
    radial-gradient(circle at 34% 42%, var(--ink) 0 3px, transparent 3.5px),
    radial-gradient(circle at 66% 42%, var(--ink) 0 3px, transparent 3.5px),
    radial-gradient(ellipse at 50% 74%, transparent 0 45%, var(--ink) 47% 52%, transparent 54%);
  border: 2px solid var(--ink);
  border-radius: 16px;
  background-color: #fff8ec;
}
.pc-steps { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.pc-step { padding: 9px 16px; background: #fff8ec; border: 2px solid var(--ink); font-family: var(--font-mono); font-size: 12px; box-shadow: 3px 3px 0 rgba(43,33,24,0.2); transition: background 240ms, color 240ms, transform 240ms; }
.pc-step.is-on { background: var(--accent); color: #fff; transform: translateY(-3px) rotate(-2deg); }
.pc-path-hint { position: absolute; top: 18vh; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); letter-spacing: 0.06em; z-index: 8; }

.pc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 96px); perspective: 800px; }
.pc-card { position: relative; padding: 34px 26px 30px; background: #fff8ec; border: 2px solid var(--ink); box-shadow: 6px 7px 0 rgba(43,33,24,0.2); transition: transform 300ms var(--ease-spring); }
.pc-card:nth-child(odd) { transform: rotate(-1.2deg); }
.pc-card:nth-child(even) { transform: rotate(1deg); }
.pc-card:hover { transform: rotate(0deg) translateY(-4px); }
.pc-card-a { background: #fff8ec; }
.pc-card-b { background: #fdeede; }
.pc-card-c { background: #eaf3e4; }
.pc-pin { position: absolute; top: -10px; left: 50%; width: 18px; height: 18px; transform: translateX(-50%); background: var(--accent-hot); border-radius: 50%; box-shadow: 2px 3px 0 rgba(43,33,24,0.3); }
.pc-card h3 { font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 10px; color: var(--ink); }
.pc-card p { margin: 0; color: var(--fg-muted); font-size: 15px; line-height: 1.55; }

.pc-footer { position: relative; margin-top: 40px; background: #fff8ec; padding: 0 0 50px; }
.pc-footer-torn { height: 26px; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Cpath d='M0 26 L0 8 L10 16 L20 4 L30 16 L40 6 L40 26 Z' fill='black'/%3E%3C/svg%3E") repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Cpath d='M0 26 L0 8 L10 16 L20 4 L30 16 L40 6 L40 26 Z' fill='black'/%3E%3C/svg%3E") repeat-x; }
.pc-footer-inner { text-align: center; padding: clamp(40px, 7vh, 80px) clamp(20px, 6vw, 96px) 0; }
.pc-footer-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 6vw, 84px); line-height: 0.96; color: var(--ink); margin: 18px 0 16px; }
.pc-footer-lede { color: var(--fg-muted); margin: 0 auto 24px; max-width: 46ch; }
.pc-cta { display: inline-block; padding: 14px 28px; background: var(--ink); color: #fff8ec; font-weight: 600; border-radius: 4px; transition: transform 260ms var(--ease-spring); }
.pc-cta:hover { transform: translateY(-3px) rotate(-1.5deg); }
.pc-footer-base { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 34px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }

/* =============================================================== */
/* WORLD 08 — Generative System                                     */
/* =============================================================== */
.gs-hero {
  position: relative; min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 40px;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 6vw, 96px) 70px;
}
.gs-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.gs-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; }
.gs-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8vw, 124px); line-height: 0.9; margin: 0 0 24px; letter-spacing: -0.01em; }
.gs-title-accent { color: var(--accent); }
.gs-lede { max-width: 50ch; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: var(--fg-muted); margin: 0 0 30px; }
.gs-seed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(8,10,14,0.5); backdrop-filter: blur(6px); width: fit-content; }
.gs-seed-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.gs-seed code { font-family: var(--font-mono); font-size: 18px; color: var(--accent); letter-spacing: 0.06em; }
.gs-seed-btn { padding: 9px 16px; border: 1px solid var(--rule); border-radius: 100px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); transition: color 240ms, border-color 240ms, background 240ms; }
.gs-seed-btn:hover { color: var(--fg); border-color: var(--accent); }
.gs-seed-btn-solid { background: var(--accent); color: #06070a; border-color: var(--accent); }
.gs-seed-btn-solid:hover { color: #06070a; box-shadow: 0 8px 24px rgba(56,225,214,0.3); }

.gs-controls { position: relative; z-index: 1; border: 1px solid var(--rule); border-radius: 10px; padding: 20px; background: rgba(8,10,14,0.62); backdrop-filter: blur(10px); }
.gs-controls header { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 18px; }
.gs-ctl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: gs-pulse 2.4s ease-in-out infinite; }
@keyframes gs-pulse { 0%,100%{ opacity: 1;} 50%{ opacity: 0.4;} }
.gs-ctl { display: block; margin-bottom: 16px; }
.gs-ctl > span { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-bottom: 7px; }
.gs-ctl > span b { color: var(--accent); }
.gs-ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--rule); border-radius: 3px; cursor: pointer; }
.gs-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(56,225,214,0.6); }
.gs-ctl input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--accent); }
.gs-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--font-mono); }
.gs-readout div { display: flex; flex-direction: column; gap: 4px; }
.gs-readout span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.gs-readout b { font-size: 18px; color: var(--fg); }

.gs-explain { position: relative; z-index: 1; padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 96px); background: linear-gradient(180deg, transparent, rgba(6,7,10,0.85) 30%); }
.gs-explain-head { margin-bottom: 40px; }
.gs-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.6vw, 64px); line-height: 1; margin: 8px 0 0; }
.gs-explain-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gs-ex-card { padding: 26px 22px; border: 1px solid var(--rule); border-radius: 10px; background: rgba(8,10,14,0.5); transition: transform 300ms var(--ease), border-color 300ms; }
.gs-ex-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.gs-ex-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }
.gs-ex-card h3 { font-size: clamp(18px, 2.2vw, 26px); margin: 14px 0 8px; font-weight: 500; }
.gs-ex-card p { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.55; }
.gs-ex-card em { color: var(--accent); font-style: normal; }

.gs-footer { position: relative; z-index: 1; padding: clamp(60px, 9vh, 110px) clamp(20px, 6vw, 96px) 56px; background: rgba(6,7,10,0.9); }
.gs-footer-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.gs-footer-lede { color: var(--fg-muted); margin: 0 auto 28px; max-width: 50ch; }
.gs-footer-stat { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; font-family: var(--font-mono); }
.gs-footer-stat div { display: flex; flex-direction: column; gap: 5px; }
.gs-footer-stat span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.gs-footer-stat b { font-size: 17px; color: var(--accent); }
.gs-cta { display: inline-block; padding: 14px 28px; border: 1px solid var(--accent); border-radius: 100px; color: var(--accent); font-family: var(--font-mono); font-size: 13px; transition: background 260ms, color 260ms; }
.gs-cta:hover { background: var(--accent); color: #06070a; }

/* =============================================================== */
/* WORLDS 05–09 — responsive                                        */
/* =============================================================== */
@media (max-width: 900px) {
  .sp-hero { grid-template-columns: 1fr; }
  .sp-stage { min-height: 44vh; order: 2; }
  .sp-index { position: static; width: auto; margin-top: 24px; }
  .sp-stratum { grid-template-columns: 70px 1fr; }
  .sp-stratum p { grid-column: 1 / -1; }
  .sp-footer-grid { grid-template-columns: 1fr; }
  .sp-hero-inner::before {
    inset: -26px -100px -36px -24px;
    background: linear-gradient(90deg, rgba(223,227,218,0.9) 0%, rgba(223,227,218,0.84) 64%, rgba(223,227,218,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
  }
  .skill-primitives-spatial::before,
  .sp-strata::before,
  .sp-footer::before {
    inset: -28px 0;
    background: linear-gradient(180deg, rgba(223,227,218,0), rgba(223,227,218,0.82) 10%, rgba(223,227,218,0.78) 90%, rgba(223,227,218,0));
  }
  .gs-hero { grid-template-columns: 1fr; }
  .gs-controls { order: 2; }
  .fk-index { display: none !important; }
  .fk-hero { grid-template-columns: 1fr; }
  .fk-anchor { min-height: 46vh; place-items: start center; }
  .fk-pass { width: min(340px, 74vw); }
  .fk-pass-stub { right: 12vw; bottom: 5vh; }
  .fk-quote { grid-template-columns: 1fr; }
  .fk-hero, .pc-hero, .gs-hero, .sp-hero { padding-left: clamp(16px, 5vw, 40px); padding-right: clamp(16px, 5vw, 40px); }
  .pc-path-section { height: 180vh; }
  .pc-prop-note { left: 5vw; top: 24vh; }
  .pc-prop-house { right: 6vw; top: 24vh; transform: scale(0.82) rotate(3deg); }
  .pc-prop-flag { right: 8vw; bottom: 20vh; }
  .pc-prop-fold { left: 8vw; bottom: 20vh; transform: scale(0.82) rotate(8deg) skew(-4deg); }
}

/* =============================================================== */
/* KINETIC PARITY LAYER — continuous reference-grade motion          */
/* =============================================================== */
.world {
  --world-p: 0;
  --mx: 0;
  --my: 0;
  --ed-p: 0;
  --rc-track-p: 0;
  --gs-p: 0;
}

/* Mask-line reveal: wrap each line of a headline in <span class="mask-line">
   inside a [data-mask] container. The line sits hidden under a clip mask
   and rises into view on scroll (GSAP drives yPercent in setupMotion).
   Without GSAP, these just show statically — no content is gated. */
[data-mask] { overflow: hidden; }
[data-mask] .mask-line { display: block; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-mask] { overflow: visible; }
}

.world.is-entering .cn-title,
.world.is-entering .ed-headline,
.world.is-entering .rc-headline,
.world.is-entering .lx-headline,
.world.is-entering .sp-title,
.world.is-entering .fk-title,
.world.is-entering .pc-title,
.world.is-entering .gs-title {
  animation: world-entry-pop 920ms var(--ease) both;
}

@keyframes world-entry-pop {
  0% { opacity: 0; transform: translate3d(0, 42px, 0) scale(0.975); filter: blur(10px); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

/* Editorial: Blit-style collision, cursor loupe, active contents */
body[data-world="editorial-interference"] .ed-megaword {
  transform: translate3d(calc(var(--ed-p) * -160px), calc(var(--my) * 18px), 0);
}
body[data-world="editorial-interference"] .ed-portrait {
  transform:
    translate3d(calc(var(--mx) * -34px), calc(var(--ed-p) * 56px + var(--my) * -16px), 0)
    rotate(calc(-1.4deg + var(--mx) * 4deg));
  transition: transform 120ms linear;
}
body[data-world="editorial-interference"] .ed-headline-wrap {
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--ed-p) * -36px), 0);
  transition: transform 120ms linear;
}
body[data-world="editorial-interference"] .ed-marks {
  transform: translate3d(calc(var(--mx) * -22px), calc(var(--my) * 22px), 0) rotate(8deg);
}
.ed-toc-row.is-current {
  color: var(--orange-ink);
  background: linear-gradient(90deg, rgba(255,60,8,0.12), transparent 62%);
}
.ed-toc-row.is-current .ed-toc-lead {
  height: 2px;
  background: var(--orange);
  transform-origin: left;
  animation: ed-leader-draw 620ms var(--ease) both;
}
@keyframes ed-leader-draw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
body[data-world="editorial-interference"] .ed-still {
  transform: translate3d(calc(var(--mx) * 26px), calc(var(--my) * -18px), 0) rotate(calc(0.8deg + var(--mx) * -2deg));
}
body[data-world="editorial-interference"] .ed-still-grid { opacity: calc(0.2 + var(--ed-p) * 0.65); }

/* Ritual: Framer-like toy UI motion and pinned panel state */
body[data-world="ritual-craft"] .rc-doodle-tl {
  transform: translate3d(calc(var(--mx) * 28px), calc(var(--my) * 22px), 0) rotate(calc(-12deg + var(--rc-track-p) * 7deg));
}
body[data-world="ritual-craft"] .rc-doodle-br {
  transform: translate3d(calc(var(--mx) * -34px), calc(var(--my) * -20px), 0) rotate(calc(8deg - var(--rc-track-p) * 8deg)) scaleX(-1);
}
body[data-world="ritual-craft"] .rc-sticker {
  animation: rc-idle-wobble 3.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -220ms);
}
body[data-world="ritual-craft"] .rc-sticker:nth-child(1) { --i: 1; }
body[data-world="ritual-craft"] .rc-sticker:nth-child(2) { --i: 2; }
body[data-world="ritual-craft"] .rc-sticker:nth-child(3) { --i: 3; }
body[data-world="ritual-craft"] .rc-sticker:nth-child(4) { --i: 4; }
body[data-world="ritual-craft"] .rc-sticker:nth-child(5) { --i: 5; }
@keyframes rc-idle-wobble {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  45% { rotate: 1.5deg; translate: 0 -4px; }
  70% { rotate: -1deg; translate: 0 2px; }
}
.rc-panel .rc-window,
.rc-panel .rc-tape-stack,
.rc-panel .rc-cta {
  transform: translate3d(0, calc((1 - var(--panel-p, 0)) * 42px), 0) rotate(calc((1 - var(--panel-p, 0)) * -2deg));
  transition: transform 260ms var(--ease), filter 260ms var(--ease);
}
.rc-panel.is-active .rc-window,
.rc-panel.is-active .rc-tape-stack,
.rc-panel.is-active .rc-cta {
  filter: saturate(1.18) contrast(1.05);
}

/* Luxury: Cartier-like slow rooms, reflection, and material drift */
body[data-world="luxury-alcove"] .lx-product-glow {
  transform: translate(calc(-50% + var(--mx) * 26px), calc(-50% + var(--my) * 18px)) scale(calc(1 + var(--world-p) * 0.05));
}
.lx-room {
  opacity: calc(0.58 + var(--room-p, 0) * 0.52);
}
.lx-room-text {
  transform: translate3d(0, calc((0.5 - var(--room-p, 0)) * 56px), 0);
  transition: transform 180ms linear;
}
.lx-room-mat img {
  transform: translate3d(0, calc((0.5 - var(--room-p, 0)) * -44px), 0) scale(calc(0.96 + var(--room-p, 0) * 0.08));
}
.lx-room.is-active .lx-room-num { text-shadow: 0 0 28px rgba(195,146,87,0.34); }
.lx-step.is-active { background: linear-gradient(90deg, rgba(195,146,87,0.12), transparent); }

/* Spatial: AIR-style waterline, dolly and section drawing emphasis */
.sp-stage {
  --sp-p: 0;
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 10px), 0);
}
.sp-stage::before {
  transform: translate(-50%, calc(18% + var(--sp-p) * 12%)) rotateX(72deg) scale(calc(1 + var(--sp-p) * 0.08));
}
.sp-model {
  --sp-rise: calc(var(--sp-p, 0) * 70px);
}
@keyframes sp-orbit {
  from { transform: rotateX(58deg) rotateZ(0deg) translateZ(var(--sp-rise, 0px)); }
  to { transform: rotateX(58deg) rotateZ(360deg) translateZ(var(--sp-rise, 0px)); }
}
@keyframes sp-orbit-reflection {
  from { transform: translateY(74px) scaleY(-0.58) rotateX(58deg) rotateZ(0deg); }
  to { transform: translateY(74px) scaleY(-0.58) rotateX(58deg) rotateZ(360deg); }
}
.sp-stratum {
  background: linear-gradient(90deg, rgba(134,216,232,calc(var(--row-p, 0) * 0.12)), transparent 70%);
}
.sp-stratum.is-current .sp-stratum-z { color: #06485a; font-weight: 600; }
.sp-stratum.is-current h3 { color: var(--accent); }

/* Festival: Razorpay-style live chapter index, pass energy, card assembly */
body[data-world="festival-kinetic"] .fk-hero::before {
  transform: translate3d(calc(var(--mx) * -28px), calc(var(--fk-hero-p, 0) * -70px), 0);
}
body[data-world="festival-kinetic"] .fk-pass {
  animation: fk-pass-breathe 2.4s ease-in-out infinite;
}
@keyframes fk-pass-breathe {
  0%, 100% { box-shadow: 0 36px 80px rgba(199,255,46,0.22), inset 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 46px 110px rgba(255,125,187,0.34), inset 0 0 48px rgba(255,255,255,0.08); }
}
.fk-index a.is-active { color: var(--accent); text-shadow: 0 0 18px rgba(199,255,46,0.55); }
.fk-card {
  opacity: 0.72;
  transform: translate3d(0, calc((1 - var(--card-p, 0)) * 48px), 0) rotate(calc((1 - var(--card-p, 0)) * -2deg));
}
.fk-card.is-on {
  opacity: 1;
  transition-delay: var(--card-delay, 0ms);
}

/* Papercraft: baked-stage illusion, path draw, character walk feedback */
.pc-sun { transform: translate3d(calc(var(--mx) * -18px), calc(var(--pc-hero-p, 0) * 44px), 0); }
.pc-hill-back { transform: translate3d(calc(var(--mx) * 18px), calc(var(--pc-hero-p, 0) * 22px), 0); }
.pc-hill-mid { transform: translate3d(calc(var(--mx) * 28px), calc(var(--pc-hero-p, 0) * 36px), 0); }
.pc-hill-front { transform: translate3d(calc(var(--mx) * 38px), calc(var(--pc-hero-p, 0) * 52px), 0); }
.pc-path-sticky {
  perspective: 900px;
}
.pc-path-sticky::before {
  transform: translate(-50%, -50%) rotate(calc(-1.4deg + var(--pc-p, 0) * 2.2deg)) scale(calc(1 + var(--pc-p, 0) * 0.035));
}
.pc-path-svg [data-paper-line] {
  stroke-dashoffset: 0;
}
.pc-fold-sheet-back { transform: translateX(-50%) rotateX(calc(52deg + var(--pc-p, 0) * 13deg)) rotateZ(-3deg); }
.pc-fold-sheet-mid { transform: rotateX(calc(58deg - var(--pc-p, 0) * 10deg)) rotateZ(calc(8deg + var(--pc-p, 0) * 3deg)); }
.pc-fold-sheet-front { transform: rotateX(calc(60deg + var(--pc-p, 0) * 9deg)) rotateZ(calc(-7deg - var(--pc-p, 0) * 4deg)); }
.pc-card {
  opacity: calc(0.68 + var(--card-p, 0) * 0.38);
  translate: 0 calc((1 - var(--card-p, 0)) * 26px);
}
.pc-card.is-on { transition-delay: var(--card-delay, 0ms); }

/* Generative: Active-Theory-style live system readout */
body[data-world="generative-system"] .gs-controls {
  transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0);
}
body[data-world="generative-system"] .gs-hero-copy {
  transform: translate3d(calc(var(--mx) * 14px), calc(var(--gs-p) * -24px), 0);
}
.gs-ex-card {
  opacity: calc(0.56 + var(--card-p, 0) * 0.5);
  transform: translate3d(0, calc((1 - var(--card-p, 0)) * 34px), 0);
}
.gs-ex-card.is-on {
  box-shadow: 0 18px 52px rgba(56,225,214,0.08);
}

/* Festival title entrance — replays each time the world is shown */
.world-festival-kinetic .fk-title-fill,
.world-festival-kinetic .fk-title-out { opacity: 0; transform: translateY(46px); }
body[data-world="festival-kinetic"] .fk-title-fill { animation: fk-rise 760ms var(--ease) 100ms forwards; }
body[data-world="festival-kinetic"] .fk-title-out { animation: fk-rise 760ms var(--ease) 240ms forwards; }
@keyframes fk-rise { to { opacity: 1; transform: translateY(0); } }

/* =============================================================== */
/* WORLD 09 — Data Monument                                         */
/* =============================================================== */
.world-data-monument {
  --dm-p: 0;
  --dm-story-p: 0;
  isolation: isolate;
  font-family: var(--font-body);
}

.dm-hero {
  position: relative;
  min-height: 112vh;
  padding: clamp(128px, 16vh, 190px) clamp(22px, 5vw, 78px) clamp(110px, 15vh, 160px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: clamp(34px, 7vw, 120px);
  align-items: center;
}

.dm-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(10,18,36,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,18,36,0.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.dm-folio {
  position: absolute;
  top: clamp(84px, 10vh, 120px);
  right: -0.025em;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(220px, 37vw, 660px);
  font-weight: 800;
  line-height: 0.68;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23,63,207,0.13);
  user-select: none;
}

.dm-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 810px;
  transform: translate3d(calc(var(--mx) * 12px), calc(var(--dm-p) * -26px), 0);
}

.dm-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.dm-eyebrow span { color: #f6efe2; background: var(--accent); padding: 5px 8px; }

.dm-title {
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(66px, 10.2vw, 174px);
  font-weight: 800;
  line-height: 0.76;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: #0a1224;
}
.dm-title em {
  display: block;
  margin: 0.09em 0 0 0.42em;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 0.54em;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--accent-hot);
}

.dm-lede {
  max-width: 55ch;
  margin: 34px 0 0;
  padding-left: 22px;
  border-left: 5px solid var(--accent);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.52;
  color: rgba(10,18,36,0.78);
  background: rgba(232,224,210,0.78);
  box-shadow: 18px 0 0 rgba(232,224,210,0.78), -18px 0 0 rgba(232,224,210,0.78);
}

.dm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; }
.dm-record {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 0 8px 0 20px;
  color: #f6efe2;
  background: var(--accent);
  border: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 rgba(10,18,36,0.15);
  transition: box-shadow 240ms var(--ease), background 240ms, color 240ms;
}
.dm-record b { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent); background: #f6efe2; font-size: 22px; }
.dm-record:hover { color: var(--accent); background: #f6efe2; box-shadow: 3px 3px 0 rgba(10,18,36,0.22); }
.dm-record:hover b { color: #f6efe2; background: var(--accent-hot); }
.dm-record.is-recorded { background: var(--accent-hot); border-color: var(--accent-hot); }
.dm-story-link { padding: 12px 0; border-bottom: 1px solid currentColor; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.dm-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(10,18,36,0.28);
  width: fit-content;
  background: rgba(10,18,36,0.28);
}
.dm-proof li { min-width: 132px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(232,224,210,0.86); }
.dm-proof span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.dm-proof b { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }

.dm-ledger {
  position: relative;
  z-index: 3;
  align-self: end;
  margin-bottom: 4vh;
  border: 1px solid rgba(10,18,36,0.42);
  background: rgba(232,224,210,0.84);
  box-shadow: 12px 12px 0 rgba(23,63,207,0.14);
  backdrop-filter: blur(12px);
  transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0);
}
.dm-ledger header, .dm-ledger footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.dm-ledger header { color: #f6efe2; background: #0a1224; }
.dm-ledger header b { margin-right: auto; }
.dm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #c8ff37; box-shadow: 0 0 0 4px rgba(200,255,55,0.14); animation: dm-blink 1.8s steps(2, end) infinite; }
@keyframes dm-blink { 50% { opacity: 0.28; } }
.dm-ledger dl { margin: 0; }
.dm-ledger dl div { display: grid; grid-template-columns: 0.8fr 1fr; gap: 16px; padding: 14px; border-bottom: 1px solid rgba(10,18,36,0.18); }
.dm-ledger dt { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dm-ledger dd { margin: 0; font-size: 14px; }
.dm-ledger footer { display: block; padding: 15px 14px 17px; }
.dm-ledger footer span { display: block; margin-bottom: 4px; color: var(--fg-muted); }
.dm-ledger footer strong { font-size: 14px; color: var(--accent-hot); }

.dm-axis {
  position: absolute;
  left: clamp(22px, 5vw, 78px);
  right: clamp(22px, 5vw, 78px);
  bottom: 42px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(10,18,36,0.55);
}
.dm-axis i { height: 1px; background: rgba(10,18,36,0.34); }

.dm-story { position: relative; height: 285vh; }
.dm-story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: clamp(110px, 15vh, 160px) clamp(22px, 6vw, 96px) 64px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(320px, 0.48fr);
  align-items: center;
  gap: clamp(40px, 10vw, 170px);
  background: linear-gradient(90deg, rgba(232,224,210,0.93) 0 32%, rgba(232,224,210,0.2) 58%, rgba(232,224,210,0.9) 100%);
}
.dm-story-head h2 {
  margin: 0;
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(62px, 8vw, 132px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.dm-story-head h2 em { color: var(--accent); font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 0.62em; font-weight: 400; text-transform: none; }
.dm-stages { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(10,18,36,0.28); }
.dm-stage { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(10,18,36,0.28); opacity: 0.36; transform: translateX(20px); transition: opacity 320ms var(--ease), transform 320ms var(--ease), color 320ms; }
.dm-stage > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 10px; }
.dm-stage b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.dm-stage p { max-width: 36ch; margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--fg-muted); }
.dm-stage.is-active { opacity: 1; transform: translateX(0); color: var(--accent); }
.dm-stage.is-active > span { color: #f6efe2; background: var(--accent); border-color: var(--accent); }
.dm-stage.is-active p { color: rgba(10,18,36,0.74); }
.dm-scroll-cue { grid-column: 2; display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.dm-scroll-cue span { display: block; width: 44px; height: 1px; background: var(--accent-hot); transform-origin: left; transform: scaleX(calc(0.12 + var(--dm-story-p) * 0.88)); }

.skill-primitives-data {
  max-width: none;
  margin: 0;
  background: rgba(232,224,210,0.94);
  border-top: 1px solid rgba(10,18,36,0.28);
  border-bottom: 1px solid rgba(10,18,36,0.28);
  --primitive-bg: rgba(23,63,207,0.055);
  --primitive-border: rgba(10,18,36,0.25);
  --primitive-muted: rgba(10,18,36,0.62);
}
.skill-primitives-data .skill-primitive-grid article:nth-child(2) { color: #f6efe2; background: var(--accent); }
.skill-primitives-data .skill-primitive-grid article:nth-child(2) span,
.skill-primitives-data .skill-primitive-grid article:nth-child(2) p { color: rgba(246,239,226,0.74); }

.dm-mapping {
  position: relative;
  z-index: 2;
  padding: clamp(90px, 14vh, 160px) clamp(22px, 6vw, 96px);
  color: #f6efe2;
  background: #0a1224;
}
.dm-mapping::before { content: "MAP / CONTRACT"; position: absolute; right: -0.03em; top: 0.12em; font-family: var(--font-display); font-size: clamp(90px, 17vw, 250px); font-weight: 800; line-height: 0.75; color: transparent; -webkit-text-stroke: 1px rgba(246,239,226,0.08); pointer-events: none; }
.dm-mapping > header { position: relative; z-index: 1; display: grid; grid-template-columns: 0.35fr 1fr; gap: 28px; align-items: end; margin-bottom: 70px; }
.dm-mapping .dm-eyebrow { color: rgba(246,239,226,0.54); }
.dm-mapping h2 { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: clamp(46px, 7vw, 104px); font-weight: 800; line-height: 0.84; letter-spacing: -0.045em; text-transform: uppercase; }
.dm-map-table { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(246,239,226,0.25); border-left: 1px solid rgba(246,239,226,0.25); }
.dm-map-table article { min-height: 280px; padding: clamp(24px, 4vw, 52px); border-right: 1px solid rgba(246,239,226,0.25); border-bottom: 1px solid rgba(246,239,226,0.25); }
.dm-map-table article > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #c8ff37; }
.dm-map-table h3 { margin: 46px 0 12px; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 54px); text-transform: uppercase; }
.dm-map-table p { max-width: 45ch; color: rgba(246,239,226,0.68); line-height: 1.52; }
.dm-map-table code { display: block; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: #ef4725; }

.dm-footer { position: relative; z-index: 2; padding: clamp(96px, 15vh, 170px) clamp(22px, 6vw, 96px) 40px; color: #f6efe2; background: var(--accent); display: grid; grid-template-columns: 1fr auto; gap: 50px; }
.dm-footer .dm-eyebrow { color: rgba(246,239,226,0.65); }
.dm-footer h2 { max-width: 10ch; margin: 0; font-family: var(--font-display); font-size: clamp(58px, 8.5vw, 132px); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em; text-transform: uppercase; }
.dm-footer-count { min-width: min(360px, 100%); align-self: end; padding: 22px; border: 1px solid rgba(246,239,226,0.52); }
.dm-footer-count span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,239,226,0.68); }
.dm-footer-count b { display: block; margin: 10px 0 20px; font-family: var(--font-display); font-size: clamp(68px, 9vw, 116px); line-height: 0.8; letter-spacing: -0.04em; }
.dm-footer-count button { padding-bottom: 5px; border-bottom: 1px solid currentColor; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.dm-footer-note { grid-column: 1 / -1; max-width: 82ch; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(246,239,226,0.32); font-size: 13px; line-height: 1.5; color: rgba(246,239,226,0.68); }
.dm-footer-base { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(246,239,226,0.32); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.dm-footer-base a { border-bottom: 1px solid currentColor; }

.world.is-entering .dm-title { animation: world-entry-pop 920ms var(--ease) both; }
.world.is-entering .dm-ledger { animation: dm-ledger-enter 980ms var(--ease) 160ms both; }
@keyframes dm-ledger-enter { from { opacity: 0; transform: translate3d(38px, 28px, 0); } }

@media (max-width: 900px) {
  .dm-hero { min-height: 120vh; grid-template-columns: 1fr; align-content: center; gap: 44px; }
  .dm-hero-copy { max-width: 680px; }
  .dm-ledger { width: min(440px, 100%); margin: 0 0 0 auto; }
  .dm-folio { opacity: 0.52; font-size: 52vw; top: 22vh; }
  .dm-story-sticky { grid-template-columns: 1fr 0.72fr; gap: 44px; background: rgba(232,224,210,0.78); }
  .dm-mapping > header { grid-template-columns: 1fr; }
  .dm-footer { grid-template-columns: 1fr; }
  .dm-footer-count { justify-self: end; }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: minmax(0, 1fr); }
  .topbar .brand { display: none; }
  .world-switcher { justify-self: stretch; min-width: 0; overflow-x: hidden; scrollbar-width: none; justify-content: space-between; gap: 2px; }
  .world-switcher::-webkit-scrollbar { display: none; }
  .switcher-btn { flex: 0 0 auto; padding: 7px 5px; }
  .dm-hero { min-height: 132vh; padding: 112px 16px 110px; }
  .dm-hero-copy { padding: 14px 12px 20px; background: linear-gradient(90deg, rgba(232,224,210,0.94), rgba(232,224,210,0.72)); }
  .dm-title { font-size: clamp(58px, 19vw, 96px); }
  .dm-title em { margin-left: 0.18em; font-size: 0.52em; }
  .dm-lede { padding-left: 14px; }
  .dm-proof { width: 100%; }
  .dm-proof li { flex: 1 1 30%; min-width: 94px; padding: 10px; }
  .dm-ledger { width: calc(100% - 22px); margin-right: 0; }
  .dm-axis { left: 16px; right: 16px; bottom: 34px; }
  .dm-axis span:nth-of-type(even) { display: none; }
  .dm-story { height: 250vh; }
  .dm-story-sticky { padding: 100px 16px 48px; display: block; background: rgba(232,224,210,0.86); }
  .dm-story-head h2 { max-width: 7ch; font-size: clamp(52px, 16vw, 84px); }
  .dm-stages { margin-top: 46px; }
  .dm-stage { padding: 14px 0; }
  .dm-stage p { display: none; }
  .dm-scroll-cue { margin-left: 70px; }
  .dm-map-table { grid-template-columns: 1fr; }
  .dm-map-table article { min-height: auto; }
  .dm-footer { padding-left: 16px; padding-right: 16px; }
  .dm-footer-count { width: 100%; min-width: 0; justify-self: stretch; }
  .dm-footer-base { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-story { height: auto; }
  .dm-story-sticky { position: relative; height: auto; min-height: 100vh; }
  .dm-stage { opacity: 1; transform: none; }
  .dm-live-dot { animation: none; }
}

/* Final cascade guardrails for the daylight worlds and transition layer. */
.world-transition { display: block; }
.world-transition::before,
.world-transition::after,
.world-transition span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  height: auto;
  grid-row: auto;
}
.world-transition::before { left: 0; }
.world-transition span { display: none; }
.world-transition span:first-child { display: block; left: 33%; color: transparent; font-size: 0; visibility: visible; }
.world-transition::after { right: 0; }
.world-transition.is-active { opacity: 1; transform: scaleY(1); pointer-events: auto; }
.world-transition.is-leaving { opacity: 0; transform: scaleY(0); }

/* Keep the world rail usable with a finger at every compact breakpoint. */
.switcher-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
@media (max-width: 720px) {
  .world-switcher {
    justify-self: stretch;
    max-width: 100%;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .world-switcher::-webkit-scrollbar { display: none; }
  .switcher-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }
}

body[data-world="spatial-architecture"] .world-switcher {
  color: #182027;
  /* The fixed rail must mask the section moving underneath it. */
  background: #f8faf6;
  border-color: rgba(24,32,39,0.42);
  box-shadow: 0 4px 16px rgba(24,32,39,0.12);
}
body[data-world="spatial-architecture"] .switcher-label,
body[data-world="spatial-architecture"] .switcher-btn { color: rgba(24,32,39,0.78); }
body[data-world="spatial-architecture"] .switcher-btn:hover { color: #182027; background: rgba(15,90,110,0.12); }
body[data-world="papercraft-tactile"] .world-switcher {
  background: rgba(255,250,240,0.97);
  border-color: rgba(43,33,24,0.34);
  box-shadow: 0 4px 16px rgba(43,33,24,0.1);
}
body[data-world="papercraft-tactile"] .switcher-label,
body[data-world="papercraft-tactile"] .switcher-btn { color: rgba(43,33,24,0.78); }
body[data-world="papercraft-tactile"] .switcher-btn:hover { color: #2b2118; background: rgba(176,57,20,0.1); }
body[data-world="papercraft-tactile"] .brand,
body[data-world="papercraft-tactile"] .nav-cta { color: #2b2118; background: rgba(255,250,240,0.97); border-color: rgba(43,33,24,0.34); }
body[data-world="papercraft-tactile"] .nav-cta { background: #b03914; color: #fffaf0; }
body[data-world="data-monument"] .world-switcher { background: rgba(246,239,226,0.97); border-color: rgba(10,18,36,0.34); box-shadow: 0 4px 16px rgba(10,18,36,0.12); }
body[data-world="data-monument"] .switcher-label,
body[data-world="data-monument"] .switcher-btn { color: rgba(10,18,36,0.78); }

body[data-world="spatial-architecture"] .sp-index {
  color: #182027;
  background: rgba(248,250,246,0.92);
  border-color: rgba(24,32,39,0.4);
  box-shadow: 10px 10px 0 rgba(24,32,39,0.12);
}
body[data-world="spatial-architecture"] .sp-index header { color: #0f5a6e; }
body[data-world="spatial-architecture"] .sp-index li,
body[data-world="spatial-architecture"] .sp-index footer { color: rgba(24,32,39,0.72); }
body[data-world="spatial-architecture"] .sp-index li { border-color: rgba(24,32,39,0.2); }
body[data-world="spatial-architecture"] .sp-index li b { color: #182027; }
body[data-world="spatial-architecture"] .sp-index footer b { color: #0f5a6e; }

@media (max-width: 480px) {
  .cn-status { max-width: calc(100% - 32px); }
  .cn-hud footer { flex-wrap: wrap; gap: 6px 12px; }
}

/* Cinematic hero stage: the live WebGL field becomes a cropped media plane,
   with light and blend layers that frame the copy instead of competing with it. */
body[data-world="cinematic-dark"] .cn-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 38%, rgba(94,251,255,0.11), transparent 32%),
    linear-gradient(112deg, #04050c 0%, #060a13 54%, #020309 100%);
}
body[data-world="cinematic-dark"] .cn-atmosphere-asset,
body[data-world="cinematic-dark"] .cn-media-asset {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
body[data-world="cinematic-dark"] .cn-atmosphere-asset {
  inset: -4% -3%;
  z-index: 1;
  width: 106%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  opacity: 0.24;
  mix-blend-mode: screen;
  transform: translate3d(var(--cn-atmosphere-x, 0px), var(--cn-atmosphere-y, 0px), 0) scale(1.02);
  filter: saturate(1.2) contrast(1.16);
  will-change: transform;
}
body[data-world="cinematic-dark"] .cn-media-asset {
  top: clamp(112px, 14vh, 160px);
  right: clamp(28px, 8vw, 132px);
  /* above the protection scrim, below the copy/HUD stacking context */
  z-index: 4;
  width: clamp(230px, 29vw, 510px);
  height: auto;
  max-width: none;
  opacity: 0.82;
  object-fit: contain;
  transform: translate3d(var(--cn-media-x, 0px), var(--cn-media-y, 0px), 0) rotate(var(--cn-media-rotate, 0deg)) scale(var(--cn-media-scale, 1));
  filter: saturate(0.92) contrast(1.18) brightness(0.96) drop-shadow(0 32px 46px rgba(0,0,0,0.52));
  will-change: transform;
}
body[data-world="cinematic-dark"] #signal-field {
  display: block;
  z-index: 0;
  opacity: 0.9;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 12% 100%);
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.08);
}
body[data-world="cinematic-dark"] .cn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,4,10,0.95) 0%, rgba(3,4,10,0.58) 38%, rgba(3,4,10,0.05) 75%),
    radial-gradient(ellipse at 78% 46%, transparent 0 22%, rgba(0,0,0,0.48) 74%, rgba(0,0,0,0.82) 100%);
  mix-blend-mode: normal;
}
body[data-world="cinematic-dark"] .cn-hero::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 4vw;
  bottom: 12%;
  z-index: 3;
  width: min(46vw, 720px);
  pointer-events: none;
  border: 1px solid rgba(94,251,255,0.2);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(145deg, rgba(94,251,255,0.08), transparent 38%, rgba(255,60,8,0.06));
  box-shadow: inset 0 0 48px rgba(94,251,255,0.07);
  opacity: 0.8;
}
body[data-world="cinematic-dark"] .cn-grid {
  z-index: 3;
  opacity: 0.1;
  mask-image: linear-gradient(90deg, transparent 0 28%, #000 58% 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 28%, #000 58% 100%);
}
body[data-world="cinematic-dark"] .ascii-cloud {
  z-index: 3;
  left: auto;
  right: 3vw;
  top: 20vh;
  max-width: 38vw;
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 78%, transparent);
}
body[data-world="cinematic-dark"] .cn-hero-frame { z-index: 5; }
body[data-world="cinematic-dark"] .cn-left {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 3vw, 42px);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(105deg, rgba(4,5,12,0.78), rgba(4,5,12,0.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
body[data-world="cinematic-dark"] .cn-hud {
  position: relative;
  z-index: 4;
  transform: translateY(8vh);
  border-color: rgba(94,251,255,0.44);
  background: rgba(3,7,13,0.82);
}
body[data-world="cinematic-dark"] .cn-cta-primary,
body[data-world="cinematic-dark"] .cn-cta-secondary {
  min-width: 44px;
  min-height: 52px;
  transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
body[data-world="cinematic-dark"] .cn-cta-primary:hover,
body[data-world="cinematic-dark"] .cn-cta-secondary:hover { transform: translateY(-3px); }
body[data-world="cinematic-dark"] .cn-cta-primary:active,
body[data-world="cinematic-dark"] .cn-cta-secondary:active { transform: translateY(0) scale(0.98); }

@media (max-width: 720px) {
  body[data-world="cinematic-dark"] .cn-atmosphere-asset {
    inset: 0 -28%;
    width: 156%;
    height: 90%;
    opacity: 0.18;
  }
  body[data-world="cinematic-dark"] .cn-media-asset {
    top: 118px;
    right: -2vw;
    width: min(72vw, 340px);
    opacity: 0.74;
  }
  body[data-world="cinematic-dark"] #signal-field {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    opacity: 0.82;
  }
  body[data-world="cinematic-dark"] .cn-hero::after {
    top: 17%;
    right: 10px;
    bottom: 30%;
    width: calc(100% - 20px);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  }
  body[data-world="cinematic-dark"] .cn-left { padding: 18px 16px; background: rgba(4,5,12,0.74); }
  body[data-world="cinematic-dark"] .cn-hud { transform: none; }
  body[data-world="cinematic-dark"] .ascii-cloud { right: -8vw; top: 10vh; max-width: 72vw; opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-world="cinematic-dark"] .cn-atmosphere-asset,
  body[data-world="cinematic-dark"] .cn-media-asset {
    transform: none;
    will-change: auto;
  }
  body[data-world="cinematic-dark"] #signal-field,
  body[data-world="cinematic-dark"] .cn-hero::after { filter: none; }
}

/* Final interaction pass: the HUD sits inside the hero rhythm, while the
   mobile rail keeps the current world name discoverable beside its index. */
body[data-world="cinematic-dark"] .cn-hud { transform: none; }
@media (max-width: 720px) {
  .switcher-btn {
    flex: 0 0 44px;
    width: 44px;
  }
  .switcher-btn.is-active {
    flex: 0 0 auto;
    width: auto;
    min-width: min(156px, 46vw);
    padding-inline: 10px;
  }
  .switcher-btn.is-active .switcher-name {
    display: inline-block;
    max-width: min(112px, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Scene-aware wipe. The colored side slices announce the outgoing and
   incoming worlds, and the labels remain legible over both light and dark
   palettes. */
.world-transition {
  isolation: isolate;
  background: var(--transition-from, #07090d) !important;
}
.world-transition::before,
.world-transition::after {
  z-index: 0;
  background: var(--transition-from, var(--accent-hot)) !important;
  opacity: 0.96;
}
.world-transition::after {
  background: var(--transition-to, var(--accent)) !important;
}
.world-transition span,
.world-transition span:first-child,
.world-transition span:nth-child(2),
.world-transition span:nth-child(3) {
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(7,9,13,0.88);
  color: #f8fbff;
  clip-path: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
  visibility: visible;
  z-index: 2;
}
.world-transition span:first-child { left: clamp(16px, 6vw, 96px); }
.world-transition span:nth-child(2) {
  left: 50%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
}
.world-transition span:nth-child(3) { right: clamp(16px, 6vw, 96px); }
@media (max-width: 720px) {
  .world-transition span,
  .world-transition span:first-child,
  .world-transition span:nth-child(2),
  .world-transition span:nth-child(3) { font-size: 9px; letter-spacing: 0.08em; }
  .world-transition span:first-child { left: 14px; }
  .world-transition span:nth-child(3) { right: 14px; }
}

/* -------------------------------------------------------------------------
   Cinematic final stage
   The particle field is the authored media. The bitmap is only a refractive
   material layer, and the copy sits directly on the stage rather than inside
   a decorative card.
   ------------------------------------------------------------------------- */
body[data-world="cinematic-dark"] .cn-hero-frame {
  z-index: 6;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: clamp(32px, 5vw, 86px);
  min-height: 68vh;
  padding-top: 11vh;
  align-items: center;
}
body[data-world="cinematic-dark"] .cn-left {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-width: 650px;
  text-shadow: 0 14px 42px rgba(0,0,0,0.56);
}
body[data-world="cinematic-dark"] .cn-title {
  max-width: 8ch;
  font-size: clamp(3.8rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
body[data-world="cinematic-dark"] .cn-lede { max-width: 48ch; }
body[data-world="cinematic-dark"] .cn-atmosphere-asset {
  z-index: 0;
  opacity: 0.20;
  filter: saturate(1.35) contrast(1.22);
}
body[data-world="cinematic-dark"] .cn-media-asset {
  top: 9%;
  right: 1.5vw;
  z-index: 1;
  width: min(48vw, 650px);
  height: 78%;
  object-fit: contain;
  opacity: 0.34;
  mix-blend-mode: screen;
  filter: saturate(1.22) contrast(1.28) brightness(1.05) drop-shadow(0 30px 54px rgba(0,0,0,0.58));
}
body[data-world="cinematic-dark"] #signal-field {
  z-index: 2;
  opacity: 0.98;
  clip-path: polygon(31% 0, 100% 0, 100% 100%, 14% 100%);
  mix-blend-mode: screen;
  filter: saturate(1.16) contrast(1.12);
}
body[data-world="cinematic-dark"] .cn-hero::before {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(3,4,10,0.92) 0%, rgba(3,4,10,0.68) 34%, rgba(3,4,10,0.12) 72%, transparent 100%),
    radial-gradient(ellipse at 78% 48%, transparent 0 24%, rgba(0,0,0,0.30) 74%, rgba(0,0,0,0.78) 100%);
}
body[data-world="cinematic-dark"] .cn-hero::after {
  z-index: 4;
  top: 9%;
  right: 2.6vw;
  bottom: 13%;
  width: min(52vw, 760px);
  opacity: 0.62;
  border-color: rgba(94,251,255,0.24);
  background: linear-gradient(145deg, rgba(94,251,255,0.06), transparent 42%, rgba(255,60,8,0.05));
}
body[data-world="cinematic-dark"] .cn-grid,
body[data-world="cinematic-dark"] .ascii-cloud { z-index: 5; }
body[data-world="cinematic-dark"] .cn-status {
  z-index: 7;
  bottom: 48px;
  right: 5vw;
}

/* A compiler timeline gives the loader a job. Each bar represents one of the
   nine authored worlds. */
.loader-strips {
  position: absolute;
  top: 34%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  width: min(620px, calc(100% - 48px));
  height: 104px;
  transform: translateX(-50%) skewX(-12deg);
  transform-origin: center;
}
.loader-strips span {
  align-self: end;
  height: 100%;
  background: rgba(255,255,255,0.14);
  opacity: 0.32;
  transform: scaleY(0.08);
  transform-origin: bottom;
  transition: transform 360ms var(--ease), opacity 260ms var(--ease), background 260ms var(--ease);
}
.loader-strips span:nth-child(2n) { height: 72%; }
.loader-strips span:nth-child(3n) { height: 88%; }
.loader-strips span.is-on { opacity: 0.82; transform: scaleY(0.56); background: var(--cyan); }
.loader-strips span:nth-child(3n).is-on { background: var(--orange); }
.loader-strips span.is-current { opacity: 1; transform: scaleY(1); box-shadow: 0 0 28px rgba(94,251,255,0.38); }
.loader-strips span:nth-child(3n).is-current { box-shadow: 0 0 28px rgba(255,60,8,0.38); }
.loader-copy { bottom: 27%; width: min(720px, calc(100% - 32px)); }
.loader-copy p { color: rgba(255,255,255,0.78); }

@media (max-width: 720px) {
  body[data-world="cinematic-dark"] .cn-hero-frame {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
    padding-top: 8vh;
    align-items: start;
  }
  body[data-world="cinematic-dark"] .cn-left { max-width: 100%; }
  body[data-world="cinematic-dark"] .cn-title { font-size: clamp(3rem, 14vw, 5.2rem); }
  body[data-world="cinematic-dark"] .cn-media-asset {
    top: 16%;
    right: -12vw;
    width: min(70vw, 360px);
    height: 58%;
    opacity: 0.24;
  }
  body[data-world="cinematic-dark"] #signal-field {
    clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
    opacity: 0.88;
  }
  body[data-world="cinematic-dark"] .cn-hero::after {
    top: 14%;
    right: 9px;
    bottom: 30%;
    width: calc(100% - 18px);
  }
  body[data-world="cinematic-dark"] .cn-status {
    left: 16px;
    right: 16px;
    bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    line-height: 1.25;
  }
  body[data-world="cinematic-dark"] .cn-status span:first-child { grid-column: 1 / -1; }
  .loader-strips { top: 32%; height: 76px; gap: 5px; width: min(520px, calc(100% - 32px)); }
  .loader-copy { bottom: 24%; font-size: 10px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-strips span { transition: none; }
  body[data-world="cinematic-dark"] .cn-media-asset { opacity: 0.18; }
}

/* Cinematic art-direction lock. The optical plate is the hero's physical
   subject, so it must sit above the WebGL atmosphere and remain legible at a
   glance. Telemetry is deliberately treated as a calibration annotation, not
   another floating dashboard card. */
body[data-world="cinematic-dark"] .cn-media-asset {
  z-index: 5;
  top: 10%;
  right: 4vw;
  width: min(39vw, 560px);
  height: 78%;
  opacity: 0.34;
  mix-blend-mode: screen;
  filter: saturate(1.28) contrast(1.34) brightness(1.22) drop-shadow(0 34px 54px rgba(0,0,0,0.62));
}
body[data-world="cinematic-dark"] .cn-hud {
  z-index: 8;
  width: min(370px, 100%);
  padding: 0 0 0 20px;
  border: 0;
  border-left: 1px solid rgba(94,251,255,0.56);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 2px 14px rgba(0,0,0,0.92);
}
body[data-world="cinematic-dark"] .cn-hud::before {
  content: "";
  position: absolute;
  inset: -18px -34px -18px -20px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,6,12,0.78), rgba(2,6,12,0.28) 74%, transparent);
  filter: blur(12px);
}
body[data-world="cinematic-dark"] .cn-hud header {
  padding-bottom: 11px;
  border-bottom-color: rgba(94,251,255,0.36);
}
body[data-world="cinematic-dark"] .cn-hud dl { margin: 13px 0 12px; }
body[data-world="cinematic-dark"] .cn-hud footer { border-top-color: rgba(94,251,255,0.36); }

@media (max-width: 720px) {
  body[data-world="cinematic-dark"] .cn-media-asset {
    top: 11%;
    right: -13vw;
    width: min(76vw, 360px);
    height: 58%;
    opacity: 0.34;
  }
  body[data-world="cinematic-dark"] .cn-hud {
    width: min(100%, 360px);
    padding-left: 14px;
  }
}

/* -------------------------------------------------------------------------
   Cinematic calibration lock
   The hero has one physical subject. Keep the supporting marks open-ended so
   they read as optical registration lines rather than an unexplained card.
   ------------------------------------------------------------------------- */
body[data-world="cinematic-dark"] .cn-media-asset {
  opacity: 0.50;
  transform: perspective(1200px)
    translate3d(var(--cn-media-x, 0px), var(--cn-media-y, 0px), 0)
    rotateX(var(--cn-media-rx, 0deg))
    rotateY(var(--cn-media-ry, 0deg))
    rotate(var(--cn-media-rotate, 0deg))
    scale(var(--cn-media-scale, 1));
  filter: saturate(1.14) contrast(1.24) brightness(1.04)
    drop-shadow(0 34px 54px rgba(0,0,0,0.64));
}
body[data-world="cinematic-dark"] .cn-hero::after {
  top: 12%;
  right: 3.4vw;
  bottom: 16%;
  width: min(47vw, 680px);
  border: 0;
  clip-path: none;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(94,251,255,0.38) 8% 8.12%, transparent 8.12% 100%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 88%, rgba(94,251,255,0.30) 88% 88.12%, transparent 88.12% 100%) bottom right / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 13%, rgba(94,251,255,0.22) 13% 13.18%, transparent 13.18% 100%) top right / 1px 100% no-repeat;
  box-shadow: none;
  opacity: 0.72;
}
body[data-world="cinematic-dark"] .switcher-btn:not(.is-active) .switcher-name {
  display: none;
}
body[data-world="cinematic-dark"] .switcher-btn:not(.is-active) {
  min-width: 38px;
  padding-inline: 8px;
}
body[data-world="cinematic-dark"] .switcher-btn.is-active {
  min-width: 136px;
}
body[data-world="cinematic-dark"] .switcher-btn:not(.is-active):hover .switcher-name,
body[data-world="cinematic-dark"] .switcher-btn:not(.is-active):focus-visible .switcher-name {
  display: inline-block;
}
@media (max-width: 720px) {
  .world-switcher {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }
  .switcher-btn {
    scroll-snap-align: center;
  }
  body[data-world="cinematic-dark"] .cn-media-asset {
    opacity: 0.38;
  }
  body[data-world="cinematic-dark"] .cn-hero::after {
    top: 15%;
    right: 10px;
    bottom: 31%;
    width: calc(100% - 20px);
  }
}

/* Final hit-area and rail-stability pass. Keep the desktop rail's compact
   numerals fixed-width; reveal names in an overlay so focus never reflows the
   navigation. At the narrowest supported widths, let the status readout join
   normal flow after the HUD instead of colliding with its footer. */
.brand,
.nav-cta { min-height: 44px; }

@media (min-width: 721px) {
  body[data-world="cinematic-dark"] .switcher-btn:not(.is-active) {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
  }
  body[data-world="cinematic-dark"] .switcher-btn:not(.is-active) .switcher-name {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 3;
    padding: 6px 8px;
    border: 1px solid rgba(94,251,255,0.34);
    background: rgba(3,7,13,0.94);
    color: var(--white);
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  }
  body[data-world="cinematic-dark"] .switcher-btn:not(.is-active):hover .switcher-name,
  body[data-world="cinematic-dark"] .switcher-btn:not(.is-active):focus-visible .switcher-name {
    display: inline-block;
  }
}

@media (max-width: 360px) {
  body[data-world="cinematic-dark"] .cn-status {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 20px 0 0;
  }
}

/* The plate is a physical anchor, not an additive fog layer. Keep its alpha
   and highlights, but render the base pass normally so the instrument retains
   dark occlusion when particles pass behind it. */
body[data-world="cinematic-dark"] .cn-media-asset {
  mix-blend-mode: normal;
  opacity: 0.74;
  filter: saturate(1.16) contrast(1.22) brightness(0.96)
    drop-shadow(0 34px 54px rgba(0,0,0,0.72));
}
@media (max-width: 720px) {
  body[data-world="cinematic-dark"] .cn-media-asset { opacity: 0.58; }
}

/* Scroll compositor budget. The document keeps its authored transforms and
   semantic progress while the wheel is moving; expensive image filters and
   idle loops wait for the settle frame so they cannot compete with Lenis. */
html.is-scroll-active .world-bg,
html.is-scroll-active .cn-atmosphere-asset,
html.is-scroll-active .cn-media-asset,
html.is-scroll-active .lx-product-img,
html.is-scroll-active .lx-product-mirror,
html.is-scroll-active .lx-room-mat img {
  filter: none !important;
}
html.is-scroll-active .ascii-cloud,
html.is-scroll-active .fk-marquee span,
html.is-scroll-active .fk-footer-marquee span,
html.is-scroll-active .pc-cloud-1,
html.is-scroll-active .pc-cloud-2,
html.is-scroll-active .gs-ctl-dot,
html.is-scroll-active .dm-live-dot {
  animation-play-state: paused !important;
}

/* Backdrop blur creates a separate offscreen surface per element. Disable the
   blur kernel during gestures on every tier, and keep it disabled on software
   GL where restoring those surfaces also causes long idle frames. The opaque
   and translucent fills remain intact, so controls keep their contrast. */
html.is-scroll-active *,
html.is-software-gl * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* CSS filters force large offscreen surfaces through software compositing on
   SwiftShader/llvmpipe. The generated plates already carry their final grade,
   and the live canvas remains present, so remove only that redundant filter
   layer on software WebGL devices. Hardware browsers keep the full treatment. */
html.is-software-gl .world-bg,
html.is-software-gl .world,
html.is-software-gl .world * {
  filter: none !important;
}

/* A software WebGL canvas still incurs a GPU readback when it remains a fixed
   composited layer under a moving document, even if its pixels are unchanged.
   The authored hero plate/atmosphere and world background remain visible while
   the gesture is active; the canvas is restored on the first settled frame. */
html.is-software-gl.is-scroll-active .world-bg {
  visibility: hidden !important;
}

/* The photographic atmosphere already fills the viewport. Keeping that
   1500px layer on its own 3D transform costs a full software-compositor pass;
   the live WebGL field and foreground instrument still provide motion. */
html.is-software-gl .cn-atmosphere-asset {
  transform: none !important;
  will-change: auto;
}

/* -------------------------------------------------------------------------
   Semantic hero media lock
   The generated object is the readable product. WebGL supplies atmosphere,
   light and particles behind it, so neither world renders a second SDF prop.
   ------------------------------------------------------------------------- */
body[data-world="cinematic-dark"] .cn-hero {
  isolation: isolate;
  background: #03060c;
}
body[data-world="cinematic-dark"] .cn-hero-product {
  position: absolute;
  /* Keep a hard media lane on narrow desktop. The copy/HUD column ends near
     the midpoint at 1280px, so a 50% origin prevents the plate from entering
     that protected reading area while preserving the wide composition. */
  inset: clamp(74px, 8vh, 108px) 0 0 50%;
  z-index: 2;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  background: #050b13;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
}
body[data-world="cinematic-dark"] .cn-media-asset {
  position: absolute;
  inset: -2% -4%;
  width: 108%;
  height: 104%;
  max-width: none;
  object-fit: cover;
  object-position: 86% center;
  opacity: 0.96;
  mix-blend-mode: normal;
  transform-origin: 78% 62%;
  transform: perspective(1300px)
    translate3d(var(--cn-media-x, 0px), var(--cn-media-y, 0px), 0)
    rotateX(var(--cn-media-rx, 0deg))
    rotateY(var(--cn-media-ry, 0deg))
    rotate(var(--cn-media-rotate, 0deg))
    scale(var(--cn-media-scale, 1));
  filter: saturate(1.04) contrast(1.08) brightness(0.94)
    drop-shadow(0 30px 54px rgba(0,0,0,0.58));
  will-change: transform;
}
body[data-world="cinematic-dark"] .cn-hero-product::after {
  content: "";
  position: absolute;
  inset: -18% -28%;
  pointer-events: none;
  opacity: 0.42;
  background: linear-gradient(112deg,
    transparent 34%,
    rgba(94,251,255,0.02) 43%,
    rgba(214,248,255,0.26) 49%,
    rgba(94,251,255,0.04) 54%,
    transparent 64%);
  mix-blend-mode: screen;
  transform: translate3d(-38%, 0, 0);
  animation: cn-optic-scan 7.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes cn-optic-scan {
  0%, 16% { transform: translate3d(-48%, 0, 0); opacity: 0; }
  34% { opacity: 0.38; }
  58%, 100% { transform: translate3d(52%, 0, 0); opacity: 0; }
}
body[data-world="cinematic-dark"] .cn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,6,12,0.99) 0%, rgba(3,6,12,0.92) 31%, rgba(3,6,12,0.46) 46%, transparent 64%),
    linear-gradient(180deg, rgba(3,6,12,0.20), transparent 54%, rgba(3,6,12,0.78));
}
body[data-world="cinematic-dark"] .cn-hero::after { content: none; }
body[data-world="cinematic-dark"] #signal-field {
  z-index: 0;
  opacity: 0.68;
  clip-path: none;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.04);
}
body[data-world="cinematic-dark"] .cn-atmosphere-asset {
  z-index: 1;
  opacity: 0.11;
  mix-blend-mode: screen;
}
body[data-world="cinematic-dark"] .cn-grid {
  z-index: 4;
  opacity: 0.08;
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 68%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 68%);
}
body[data-world="cinematic-dark"] .ascii-cloud {
  z-index: 4;
  right: 1.5vw;
  opacity: 0.12;
}
body[data-world="cinematic-dark"] .cn-hero-frame {
  z-index: 5;
  grid-template-columns: minmax(0, 650px) minmax(320px, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "copy media"
    "hud media";
  gap: 24px 5vw;
  min-height: calc(100svh - 218px);
  padding-top: 7vh;
  align-content: center;
  align-items: start;
}
body[data-world="cinematic-dark"] .cn-left {
  grid-area: copy;
  max-width: 650px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-world="cinematic-dark"] .cn-title {
  max-width: 8ch;
  font-size: 7rem;
  line-height: 0.88;
  letter-spacing: 0;
}
body[data-world="cinematic-dark"] .cn-lede {
  max-width: 46ch;
  color: rgba(255,255,255,0.88);
}
body[data-world="cinematic-dark"] .cn-hud {
  grid-area: hud;
  z-index: 6;
  width: min(560px, 100%);
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(94,251,255,0.28);
  background: rgba(3,8,15,0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  transform: none;
}
body[data-world="cinematic-dark"] .cn-hud::before { content: none; }
body[data-world="cinematic-dark"] .cn-hud dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
body[data-world="cinematic-dark"] .cn-hud dl div {
  grid-template-columns: 88px minmax(0, 1fr);
}
body[data-world="cinematic-dark"] .cn-status { z-index: 6; }

body[data-world="luxury-alcove"] .lx-hero {
  isolation: isolate;
  min-height: 100svh;
  background: #090a0c;
}
body[data-world="luxury-alcove"] .lx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.99) 0%, rgba(8,8,10,0.94) 30%, rgba(8,8,10,0.44) 46%, transparent 64%),
    linear-gradient(180deg, rgba(8,8,10,0.18), transparent 52%, rgba(8,8,10,0.72));
}
body[data-world="luxury-alcove"] .lx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.46;
  background: linear-gradient(118deg, transparent 54%, rgba(218,226,235,0.10) 61%, transparent 69%);
  mix-blend-mode: screen;
}
body[data-world="luxury-alcove"] .lx-hero-product {
  position: absolute;
  inset: clamp(68px, 7vh, 96px) 0 0 48%;
  z-index: 1;
  display: block;
  overflow: hidden;
  contain: paint;
  border: 0;
  background: #090a0c;
  text-align: left;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
}
body[data-world="luxury-alcove"] .lx-hero-product:focus-visible {
  outline: 1px solid rgba(230,235,241,0.9);
  outline-offset: -8px;
}
body[data-world="luxury-alcove"] .lx-hero-product-img {
  position: absolute;
  inset: -2% -4%;
  width: 108%;
  height: 104%;
  max-width: none;
  object-fit: cover;
  object-position: 86% center;
  transform-origin: 72% 58%;
  transform: perspective(1400px)
    translate3d(var(--lx-hero-x, 0px), var(--lx-hero-y, 0px), 0)
    rotateX(var(--lx-hero-rx, 0deg))
    rotateY(var(--lx-hero-ry, 0deg))
    scale(var(--lx-hero-scale, 1.025));
  filter: saturate(0.88) contrast(1.10) brightness(0.90)
    drop-shadow(0 34px 62px rgba(0,0,0,0.62));
  will-change: transform;
}
body[data-world="luxury-alcove"] .lx-hero-product-sweep {
  position: absolute;
  inset: -22% -38%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(108deg,
    transparent 42%,
    rgba(255,255,255,0.06) 47%,
    rgba(224,233,244,0.50) 50%,
    rgba(255,255,255,0.08) 53%,
    transparent 59%);
  mix-blend-mode: screen;
  transform: translate3d(-58%, 0, 0);
}
body[data-world="luxury-alcove"] .lx-hero-product.is-illuminated .lx-hero-product-sweep {
  animation: lx-hero-sweep 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lx-hero-sweep {
  0% { transform: translate3d(-58%, 0, 0); opacity: 0; }
  22% { opacity: 0.70; }
  76% { opacity: 0.30; }
  100% { transform: translate3d(58%, 0, 0); opacity: 0; }
}
body[data-world="luxury-alcove"] .lx-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(40vw, 620px);
  max-width: none;
  min-height: calc(100svh - 230px);
}
body[data-world="luxury-alcove"] .lx-headline {
  font-size: 5rem;
  letter-spacing: 0;
}
body[data-world="luxury-alcove"] .lx-lede {
  max-width: 46ch;
  color: rgba(243,237,220,0.82);
}
body[data-world="luxury-alcove"] .lx-product-glow {
  width: 118%;
  height: 62%;
  aspect-ratio: auto;
  background: linear-gradient(112deg, transparent 20%, rgba(220,226,236,0.04) 38%, rgba(195,146,87,0.16) 52%, transparent 74%);
}
body[data-world="luxury-alcove"] .lx-rooms {
  background: linear-gradient(122deg, transparent 42%, rgba(195,146,87,0.07) 64%, transparent 82%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
}

@media (max-width: 1200px) {
  body[data-world="cinematic-dark"] .cn-title { font-size: 5.8rem; }
  body[data-world="luxury-alcove"] .lx-headline { font-size: 4rem; }
}

@media (min-width: 1025px) {
  body[data-world="cinematic-dark"] .cn-hero {
    height: 100svh;
    min-height: 100svh;
    padding-top: 110px;
    padding-bottom: 56px;
  }
  body[data-world="cinematic-dark"] .cn-hero-frame {
    height: calc(100svh - 166px);
    min-height: 0;
    padding-top: 0;
  }
  body[data-world="cinematic-dark"] .cn-status { bottom: 18px; }
}

@media (max-width: 1024px) {
  body[data-world="cinematic-dark"] .cn-hero,
  body[data-world="luxury-alcove"] .lx-hero {
    min-height: auto;
    padding: 96px 16px 56px;
  }
  body[data-world="cinematic-dark"] .cn-hero-product,
  body[data-world="luxury-alcove"] .lx-hero-product {
    position: relative;
    inset: auto;
    width: calc(100% + 32px);
    height: clamp(250px, 36svh, 340px);
    margin: -18px -16px 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body[data-world="cinematic-dark"] .cn-media-asset,
  body[data-world="luxury-alcove"] .lx-hero-product-img {
    object-position: 82% center;
  }
  body[data-world="cinematic-dark"] .cn-hero::before,
  body[data-world="luxury-alcove"] .lx-hero::before {
    background: linear-gradient(180deg, rgba(3,6,12,0.06) 0 32%, rgba(3,6,12,0.92) 48%, rgba(3,6,12,0.99) 100%);
  }
  body[data-world="cinematic-dark"] .cn-grid,
  body[data-world="cinematic-dark"] .ascii-cloud { display: none; }
  body[data-world="cinematic-dark"] .cn-hero-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "copy" "hud";
    gap: 24px;
    min-height: auto;
    padding-top: 0;
  }
  body[data-world="cinematic-dark"] .cn-title { font-size: 4.8rem; }
  body[data-world="cinematic-dark"] .cn-hud {
    width: 100%;
    padding: 15px 16px;
  }
  body[data-world="cinematic-dark"] .cn-status {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 22px;
  }
  body[data-world="luxury-alcove"] .lx-hero-content {
    width: 100%;
    min-height: 0;
  }
  body[data-world="luxury-alcove"] .lx-headline { font-size: 3.2rem; }
}

@media (max-width: 560px) {
  body[data-world="cinematic-dark"] .cn-title { font-size: 3.45rem; }
  body[data-world="cinematic-dark"] .cn-hud dl { grid-template-columns: 1fr; }
  body[data-world="luxury-alcove"] .lx-headline { font-size: 2.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-world="cinematic-dark"] .cn-media-asset,
  body[data-world="luxury-alcove"] .lx-hero-product-img {
    transform: none;
    will-change: auto;
  }
  body[data-world="cinematic-dark"] .cn-hero-product::after,
  body[data-world="luxury-alcove"] .lx-hero-product-sweep { animation: none; }
}

html.is-scroll-active .cn-hero-product::after,
html.is-scroll-active .lx-hero-product-sweep {
  animation-play-state: paused !important;
}
html.is-scroll-active .lx-hero-product-img {
  filter: none !important;
}


/* =============================================================== */
/* TATVA CUSTOM EDITORIAL STYLES                                   */
/* =============================================================== */

/* Ensure cursor never blocks clicking on buttons or links */
.cursor-dot,
.cursor-label,
.world-bg {
  pointer-events: none !important;
}

/* Custom Minimal Editorial Header */
.tatva-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
}

.tatva-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.tatva-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.tatva-brand-text {
  display: flex;
  flex-direction: column;
}

.tatva-brand-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tatva-brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange-ink);
  margin-top: 2px;
}

.tatva-nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 32px);
  align-items: center;
}

.tatva-nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  transition: color 200ms ease;
}

.tatva-nav-link:hover {
  color: var(--orange-ink);
}

.tatva-cta-nav {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 10px 18px;
  border-radius: 2px;
  transition: background 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.tatva-cta-nav:hover {
  background: var(--orange-ink);
  color: #fff;
}

/* Hero CTA Button */
.tatva-hero-cta-wrap {
  margin: 36px 0 24px;
}

.tatva-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-ink);
  color: #ffffff !important;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-style: italic;
  font-weight: 600;
  padding: 16px 36px;
  min-height: 54px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 5;
}

.tatva-hero-cta:hover {
  background: var(--ink);
  color: #ffffff !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.tatva-hero-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.tatva-hero-cta-sub {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.tatva-link {
  color: var(--orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.tatva-link:hover {
  color: var(--ink);
}

.tatva-privacy-line {
  margin-top: 12px;
  font-size: 13px;
}

.tatva-bottom-cta {
  cursor: pointer;
  position: relative;
  z-index: 5;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .tatva-nav {
    display: none; /* Keep header clean on small screens */
  }

  .tatva-hero-cta-wrap {
    width: 100%;
  }

  .tatva-hero-cta {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 1.1rem;
    text-align: center;
    box-sizing: border-box;
  }

  .ed-masthead {
    padding-top: 24px;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }

  .ed-mast-date {
    justify-self: center;
  }

  .ed-hero {
    grid-template-columns: 1fr;
    padding: 24px 5vw;
  }

  .ed-meta {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .skill-primitive-grid {
    grid-template-columns: 1fr;
  }

  .ed-columns {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 5vw;
  }

  .ed-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ed-footer-credits {
    border-left: none;
    border-top: 1px solid var(--ink);
    padding-left: 0;
    padding-top: 24px;
  }

  .ed-final-cta {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
    font-size: 1.2rem;
  }
}