/* DETOX world experience
   The visual system is deliberately asset-optional. Real captures replace the
   procedural scenes through data-media-key slots without changing layout. */

:root {
  --xp-bg: #070a0b;
  --xp-bg-warm: #0d0e0c;
  --xp-panel: rgba(15, 19, 19, 0.78);
  --xp-ink: #f0efe8;
  --xp-dim: #9ca39e;
  --xp-faint: #626b66;
  --xp-acid: #d6f26f;
  --xp-acid-bright: #e8ff91;
  --xp-copper: #e58a4a;
  --xp-sky: #7ba5a5;
  --xp-line: rgba(231, 239, 226, 0.14);
  --xp-line-strong: rgba(231, 239, 226, 0.28);
  --xp-display: "Arial Narrow", "Roboto Condensed", "Aptos Narrow", Impact, sans-serif;
  --xp-body: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  --xp-mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

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

body.experience-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--xp-bg);
  color: var(--xp-ink);
  font-family: var(--xp-body);
  line-height: 1.5;
}

body.site-shell-page {
  --bg: var(--xp-bg);
  --bg2: var(--xp-bg-warm);
  --panel: var(--xp-panel);
  --panel-solid: #101514;
  --ink: var(--xp-ink);
  --dim: var(--xp-dim);
  --accent: var(--xp-acid);
  --accent-soft: rgba(214, 242, 111, 0.12);
  --line: var(--xp-line);
  background: var(--xp-bg);
  color: var(--xp-ink);
}

.experience-page main { max-width: none; margin: 0; padding: 0; }
.experience-page section { border: 0; }
.experience-page section + section { border: 0; }
.experience-page h1,
.experience-page h2,
.experience-page h3,
.experience-page p { margin-top: 0; }
.experience-page a { color: inherit; }
.experience-page button,
.experience-page input,
.experience-page textarea { font: inherit; }

#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
}

.site-atmosphere,
.site-grain,
.cursor-light {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.site-atmosphere {
  z-index: 0;
  background:
    radial-gradient(circle at 82% 15%, rgba(76, 117, 112, 0.14), transparent 28%),
    radial-gradient(circle at 8% 72%, rgba(195, 98, 48, 0.09), transparent 29%),
    linear-gradient(180deg, #070a0b 0%, #090d0d 48%, #080a09 100%);
}

.site-grain {
  z-index: 90;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.cursor-light {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(420px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(214, 242, 111, 0.045), transparent 72%);
  transition: opacity 300ms ease;
}

@media (pointer: fine) { .cursor-light.active { opacity: 1; } }

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 2px;
  background: var(--xp-acid);
  box-shadow: 0 0 12px rgba(214, 242, 111, 0.45);
  pointer-events: none;
}

.xp-nav {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 0 3.2vw;
  border-bottom: 1px solid transparent;
  transition: background 250ms ease, border-color 250ms ease, min-height 250ms ease;
}

.xp-nav.scrolled {
  min-height: 62px;
  border-color: var(--xp-line);
  background: rgba(7, 10, 11, 0.8);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.xp-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-family: var(--xp-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.31em;
  line-height: 1;
}

.xp-mark > span:nth-child(2) > span { color: var(--xp-acid); }

.xp-mark small {
  margin-left: 0.35rem;
  color: var(--xp-faint);
  font-family: var(--xp-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.xp-mark-glyph {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(214, 242, 111, 0.66);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(214, 242, 111, 0.035);
}

.xp-mark-glyph::before,
.xp-mark-glyph::after {
  content: "";
  position: absolute;
  background: var(--xp-acid);
}

.xp-mark-glyph::before { left: 4px; right: 4px; top: 11px; height: 1px; transform: rotate(-28deg); }
.xp-mark-glyph::after { width: 3px; height: 3px; border-radius: 50%; top: 5px; right: 5px; box-shadow: -9px 9px 0 var(--xp-acid); }

.xp-nav > nav { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin: 0 auto; }
.xp-nav > nav a,
.nav-login {
  position: relative;
  color: #c2c7c2;
  font-family: var(--xp-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.xp-nav > nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.45rem;
  height: 1px;
  background: var(--xp-acid);
  transition: right 180ms ease;
}
.xp-nav > nav a:hover { color: #fff; }
.xp-nav > nav a:hover::after { right: 0; }
.xp-nav > nav a[aria-current="page"],
.nav-login[aria-current="page"] { color: var(--xp-acid); }
.xp-nav > nav a[aria-current="page"]::after { right: 0; }

.xp-nav-actions { display: flex; align-items: center; gap: 1.25rem; }
.worldline { display: flex; align-items: center; gap: 0.48rem; color: var(--xp-dim); font-family: var(--xp-mono); font-size: 0.59rem; letter-spacing: 0.12em; text-transform: uppercase; }
.worldline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--xp-acid); box-shadow: 0 0 8px rgba(214, 242, 111, 0.8); animation: xp-pulse 2.4s ease-in-out infinite; }
.worldline .dot.down { background: #e26d55; box-shadow: 0 0 8px rgba(226, 109, 85, 0.7); animation: none; }
@keyframes xp-pulse { 50% { opacity: 0.36; } }

.nav-login { text-decoration: none; }
.nav-login:hover { color: #fff; }
.nav-cta {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(214, 242, 111, 0.48);
  color: var(--xp-acid);
  font-family: var(--xp-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease;
}
.nav-cta:hover { color: #101308; background: var(--xp-acid); }

.experience-page a:focus-visible,
.experience-page button:focus-visible,
.experience-page input:focus-visible,
.experience-page textarea:focus-visible {
  outline: 2px solid var(--xp-acid);
  outline-offset: 3px;
}
.site-shell-page a:focus-visible,
.site-shell-page button:focus-visible,
.site-shell-page input:focus-visible,
.site-shell-page textarea:focus-visible {
  outline: 2px solid var(--xp-acid);
  outline-offset: 3px;
}

.eventbar { z-index: 95; background: rgba(16, 19, 12, 0.94); border-color: rgba(214, 242, 111, 0.42); color: var(--xp-ink); }
.eventbar b,
.eventbar a { color: var(--xp-acid); }

.xp-hero {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}

.hero-media,
.hero-media > * { position: absolute; inset: 0; }
.hero-media { z-index: -1; background: #0a0e10; overflow: hidden; }
.hero-video,
.hero-still img { width: 100%; height: 100%; object-fit: cover; }
.hero-video { z-index: 7; filter: saturate(0.82) contrast(1.06); }
.hero-still { z-index: 6; }
.hero-still img { display: block; filter: saturate(0.78) contrast(1.08); }
.hero-still.has-media ~ .hero-sky,
.hero-still.has-media ~ .hero-planet,
.hero-still.has-media ~ .hero-ridge { opacity: 0.08; }

.hero-sky {
  background:
    radial-gradient(circle at 76% 24%, rgba(203, 226, 197, 0.22), transparent 1.2%, transparent 9%),
    radial-gradient(ellipse at 70% 22%, rgba(104, 145, 145, 0.22), transparent 25%),
    linear-gradient(155deg, #071015 0%, #162228 37%, #594232 71%, #0c1111 100%);
}

.hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.44;
  background-image:
    radial-gradient(circle, rgba(238, 244, 234, 0.9) 0 0.7px, transparent 0.9px),
    radial-gradient(circle, rgba(238, 244, 234, 0.65) 0 0.55px, transparent 0.8px);
  background-position: 0 0, 41px 57px;
  background-size: 97px 97px, 73px 73px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}

.hero-planet {
  left: auto;
  right: -8vw;
  top: 9vh;
  bottom: auto;
  width: min(38vw, 590px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(209, 232, 216, 0.42), transparent 6%),
    radial-gradient(ellipse at 42% 52%, rgba(45, 76, 62, 0.7), transparent 30%),
    radial-gradient(circle at 38% 37%, #7e9383 0, #364a42 34%, #14201e 64%, #070c0c 75%);
  box-shadow: inset -60px -25px 75px #030707, -18px 0 34px rgba(193, 224, 193, 0.1), 0 0 110px rgba(102, 143, 129, 0.13);
  opacity: 0.82;
}

.hero-planet span {
  position: absolute;
  inset: -11%;
  border: 1px solid rgba(205, 228, 205, 0.2);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-25deg);
}

.hero-orbit-world,
.hero-orbit-ship {
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--orbit-x, 0), var(--orbit-y, 0), 0);
  /* The pointer is eased in JS every frame, so a transform transition here
     would only add lag on top of it. Opacity is the reveal, nothing else. */
  transition: opacity 900ms ease;
  will-change: transform;
}
/* The world canvas takes no pointer offset: the planet spins on its own clock
   and the cursor must not jog or reframe it. Only the ship parallaxes. */
.hero-orbit-world { z-index: 3; transform: scale(1.018); }

/* The ship canvas repaints every frame, so the compositor must re-run this
   drop-shadow every frame too, and filter cost scales with LAYER AREA. As a
   full-viewport layer these two shadows cost more than the entire planet
   shader (measured: 60fps -> 13fps). Keep the ship canvas a small box around
   where the ship actually flies. JS derives its projection from the box size,
   so moving the box is safe; making it full-bleed again is not. */
.hero-orbit-ship {
  z-index: 4;
  inset: 22% auto auto 54%;
  width: 40%;
  height: 52%;
  transform: translate3d(var(--orbit-x, 0), var(--orbit-y, 0), 0) rotate(var(--orbit-bank, 0deg));
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
}
.orbit-world-ready .hero-orbit-world,
.orbit-ship-ready .hero-orbit-ship { opacity: 1; }
.orbit-world-ready .hero-planet,
.orbit-world-ready .hero-ridge { opacity: 0; }
.hero-has-capture .hero-orbit-world,
.hero-has-capture .hero-orbit-ship { opacity: 0; }

.hero-ridge { top: auto; }
.hero-ridge-far {
  bottom: -2vh;
  height: 43vh;
  opacity: 0.78;
  background: #17211f;
  clip-path: polygon(0 62%, 7% 50%, 13% 60%, 21% 37%, 27% 55%, 34% 29%, 41% 52%, 47% 42%, 56% 58%, 64% 34%, 69% 48%, 76% 40%, 82% 57%, 89% 45%, 100% 62%, 100% 100%, 0 100%);
}
.hero-ridge-near {
  bottom: -1px;
  height: 29vh;
  background: linear-gradient(170deg, #111816, #060909 75%);
  clip-path: polygon(0 46%, 9% 37%, 18% 53%, 29% 43%, 37% 61%, 49% 50%, 59% 67%, 69% 54%, 78% 65%, 88% 47%, 100% 57%, 100% 100%, 0 100%);
}
.hero-ridge-near::before {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  opacity: 0.26;
  background: repeating-linear-gradient(102deg, transparent 0 38px, rgba(214, 242, 111, 0.16) 39px 40px, transparent 41px 73px);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.hero-scrim {
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(5, 8, 9, 0.93) 0%, rgba(5, 8, 9, 0.56) 47%, rgba(5, 8, 9, 0.08) 75%),
    linear-gradient(180deg, rgba(5, 8, 9, 0.1) 45%, #070a0b 100%);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(880px, 85vw);
  margin-left: 8vw;
  padding: 9rem 0 12rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.25rem;
  color: var(--xp-acid);
  font-family: var(--xp-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.72; }
.hero-eyebrow::before { display: none; }
.hero-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

.hero-copy h1,
.section-heading h2,
.chapter-copy h3,
.orbit-break h2,
.claim h2 {
  font-family: var(--xp-display);
  font-weight: 900;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 1040px;
  margin-bottom: 1.6rem;
  font-size: clamp(4.3rem, 8.6vw, 9.3rem);
  letter-spacing: -0.055em;
  line-height: 0.83;
  text-wrap: balance;
}
.hero-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(240, 239, 232, 0.68); text-stroke: 1px rgba(240, 239, 232, 0.68); }
.hero-lede { max-width: 650px; color: #d8d9d2; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.65; }
.hero-actions { display: flex; gap: 0.85rem; margin-top: 2.4rem; }

.xp-button {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  padding: 0 1.25rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--xp-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.xp-button span,
.xp-button b { position: relative; z-index: 1; }
.xp-button b { font-size: 1rem; font-weight: 400; }
.xp-button-primary { color: #111409; background: var(--xp-acid); border-color: var(--xp-acid); }
.xp-button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f1ffb6;
  transform: translateX(-103%);
  transition: transform 220ms ease;
}
.xp-button-primary:hover::before { transform: translateX(0); }
.xp-button-quiet { color: var(--xp-ink); border-color: var(--xp-line-strong); background: rgba(7, 10, 11, 0.25); backdrop-filter: blur(4px); }
.xp-button-quiet:hover,
.xp-button-outline:hover { color: #111409; border-color: var(--xp-acid); background: var(--xp-acid); }
.xp-button-outline { color: var(--xp-acid); border-color: rgba(214, 242, 111, 0.48); background: transparent; }

.hero-receipts {
  position: absolute;
  z-index: 5;
  right: 3.2vw;
  bottom: 4.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  border-top: 1px solid var(--xp-line);
  border-bottom: 1px solid var(--xp-line);
  background: rgba(5, 8, 9, 0.4);
  backdrop-filter: blur(8px);
}
.hero-receipts div { padding: 0.85rem 1.1rem; border-left: 1px solid var(--xp-line); }
.hero-receipts div:first-child { border-left: 0; }
.hero-receipts strong { display: block; color: var(--xp-acid-bright); font-family: var(--xp-display); font-size: 1.35rem; letter-spacing: -0.02em; text-transform: uppercase; }
.hero-receipts span { color: var(--xp-dim); font-family: var(--xp-mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-scroll { position: absolute; z-index: 5; left: 3.2vw; bottom: 3.8rem; display: flex; align-items: center; gap: 0.7rem; margin: 0; color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left center; }
.hero-scroll span { width: 45px; height: 1px; overflow: hidden; background: var(--xp-line-strong); }
.hero-scroll span::after { content: ""; display: block; width: 45%; height: 1px; background: var(--xp-acid); animation: scroll-line 1.8s ease-in-out infinite; }
@keyframes scroll-line { 0% { transform: translateX(-110%); } 65%, 100% { transform: translateX(240%); } }

.xp-section { position: relative; z-index: 2; }
.world-promise,
.life-paths,
.planetary,
.world-index-preview,
.question,
.reel,
.gallery,
.dispatches,
.alpha-note { padding: clamp(6rem, 10vw, 11rem) max(5vw, calc((100vw - 1440px) / 2)); }

.world-promise { background: linear-gradient(180deg, #070a0b, #0b0e0c 60%, #090c0c); }
.world-promise::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--xp-line) 1px, transparent 1px), linear-gradient(90deg, var(--xp-line) 1px, transparent 1px); background-size: 12.5vw 12.5vw; opacity: 0.12; mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent); }

.section-heading { position: relative; z-index: 1; max-width: 700px; }
.section-heading-wide { max-width: 910px; }
.section-heading h2 {
  margin-bottom: 1.45rem;
  color: var(--xp-ink);
  font-size: clamp(3.2rem, 6.2vw, 7.2rem);
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.section-heading h2 span { color: transparent; -webkit-text-stroke: 1px rgba(240, 239, 232, 0.45); }
.section-heading > p:last-child,
.section-heading-split > p { max-width: 590px; color: var(--xp-dim); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.75; }
.section-heading-split { display: grid; max-width: none; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.65fr); gap: 5vw; align-items: end; }
.section-heading-split h2 { margin-bottom: 0; font-size: clamp(3rem, 5.4vw, 6rem); }

.promise-chain {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  gap: 0;
  align-items: center;
  margin-top: 6rem;
}
.promise-chain article { min-height: 230px; padding: 1.7rem; border: 1px solid var(--xp-line); background: rgba(10, 14, 13, 0.68); }
.promise-chain article span { display: block; margin-bottom: 4.5rem; color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.62rem; letter-spacing: 0.16em; }
.promise-chain article b { display: block; margin-bottom: 0.6rem; font-family: var(--xp-display); font-size: 1.75rem; letter-spacing: -0.02em; text-transform: uppercase; }
.promise-chain article p { margin: 0; color: var(--xp-dim); font-size: 0.9rem; line-height: 1.55; }
.promise-chain > i { position: relative; height: 1px; background: var(--xp-line-strong); }
.promise-chain > i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--xp-acid); border-right: 1px solid var(--xp-acid); transform: rotate(45deg); }

.life-paths { background: #090c0c; overflow: hidden; }
.life-paths::before { content: "LIVES"; position: absolute; top: 16rem; right: -0.07em; color: rgba(239, 242, 233, 0.018); font-family: var(--xp-display); font-size: 27vw; font-weight: 900; line-height: 0.8; writing-mode: vertical-rl; }

.life-chapter {
  display: grid;
  max-width: 1440px;
  min-height: 660px;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, 0.75fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  margin: clamp(7rem, 13vw, 15rem) auto 0;
}
.life-chapter-reverse { grid-template-columns: minmax(390px, 0.75fr) minmax(0, 1.25fr); }
.life-chapter-reverse .chapter-media { order: 2; }

.chapter-media {
  position: relative;
  min-height: min(66vw, 720px);
  overflow: hidden;
  border: 1px solid var(--xp-line);
  background: #111817;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.32);
  isolation: isolate;
}
.chapter-media::before,
.chapter-media::after { content: ""; position: absolute; z-index: 4; pointer-events: none; }
.chapter-media::before { inset: 0; border: 12px solid rgba(6, 9, 9, 0.26); }
.chapter-media::after { inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(4, 7, 7, 0.75) 100%); }
.chapter-media > img { position: absolute; z-index: 1; width: 100%; height: 108%; object-fit: cover; transform: translateY(var(--media-shift, 0)); filter: saturate(0.82) contrast(1.06); }
.chapter-media.has-media .media-placeholder { opacity: 0; }
.chapter-media.has-media .shot-note { opacity: 0; }

.media-placeholder { position: absolute; inset: 0; overflow: hidden; transition: opacity 400ms ease; }
.media-forest .media-placeholder { background: linear-gradient(#344749 0%, #8d7654 54%, #1a211b 55%); }
.media-forest .sun { position: absolute; top: 18%; right: 14%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #f0d58c; box-shadow: 0 0 90px 35px rgba(238, 199, 118, 0.32); }
.media-forest .tree { position: absolute; bottom: 13%; width: 3.5%; height: 62%; background: linear-gradient(90deg, #161d18, #394133 48%, #121713); transform-origin: bottom; }
.media-forest .tree::before { content: ""; position: absolute; left: 50%; top: -7%; width: 900%; height: 65%; border-radius: 50%; background: radial-gradient(ellipse, #1a271d 0 20%, transparent 21%), radial-gradient(ellipse at 70% 30%, #273728 0 18%, transparent 19%), radial-gradient(ellipse at 25% 55%, #18251a 0 24%, transparent 25%); transform: translateX(-50%); filter: blur(1px); }
.media-forest .t1 { left: 15%; height: 75%; }.media-forest .t2 { left: 53%; height: 58%; }.media-forest .t3 { right: 17%; height: 82%; }
.media-forest .ground { position: absolute; inset: 74% 0 0; background: linear-gradient(168deg, #34301e, #111813 58%); clip-path: polygon(0 32%, 34% 2%, 62% 22%, 100% 0, 100% 100%, 0 100%); }

.media-market .media-placeholder { background: linear-gradient(158deg, #111923, #422d27 67%, #0c0e0d); }
.media-market .awning { position: absolute; bottom: 28%; width: 36%; height: 42%; border: 1px solid rgba(239, 196, 117, 0.28); background: linear-gradient(135deg, #433629, #171915 56%); clip-path: polygon(8% 0, 92% 0, 100% 20%, 93% 24%, 93% 100%, 7% 100%, 7% 24%, 0 20%); }
.media-market .a1 { left: 7%; }.media-market .a2 { right: 7%; transform: scale(0.84); transform-origin: bottom right; }
.media-market .awning::before { content: ""; position: absolute; inset: 26% 12% 17%; background: rgba(240, 183, 94, 0.2); box-shadow: inset 0 0 35px rgba(240, 174, 70, 0.3); }
.media-market .lamp { position: absolute; bottom: 44%; width: 5px; height: 29%; background: #101311; }
.media-market .lamp::before { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #ffcf75; box-shadow: 0 0 45px 18px rgba(255, 174, 75, 0.34); transform: translateX(-50%); }
.media-market .l1 { left: 42%; }.media-market .l2 { right: 17%; height: 23%; }
.media-market .street { position: absolute; inset: 66% 0 0; background: linear-gradient(170deg, #27241d, #0c0f0f); clip-path: polygon(0 20%, 50% 0, 100% 19%, 100% 100%, 0 100%); }

.media-orbit .media-placeholder { background: radial-gradient(circle at 82% 23%, rgba(117, 157, 169, 0.28), transparent 18%), linear-gradient(145deg, #071019, #111b24 48%, #05080b); }
.media-orbit .planet { position: absolute; right: -18%; bottom: -17%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 28% 25%, #789090, #283e43 45%, #071011 72%); box-shadow: -25px -18px 60px rgba(128, 169, 170, 0.18); }
.media-orbit .ship { position: absolute; left: 28%; top: 39%; width: 27%; height: 6%; background: linear-gradient(90deg, #0b1013 0 14%, #9ba5a1 15% 65%, #363f40 66%); clip-path: polygon(0 45%, 18% 15%, 68% 0, 100% 48%, 68% 100%, 18% 82%); transform: rotate(-9deg); box-shadow: 0 0 18px rgba(180, 217, 215, 0.16); }
.media-orbit .ship::before { content: ""; position: absolute; left: 44%; top: -140%; width: 13%; height: 380%; background: #626e6f; clip-path: polygon(45% 0, 100% 45%, 80% 55%, 48% 42%, 20% 100%, 0 94%); }
.media-orbit .beam { position: absolute; left: 18%; top: 54%; width: 31%; height: 2px; background: var(--xp-acid); box-shadow: 0 0 12px var(--xp-acid); transform: rotate(18deg); transform-origin: right; }
.media-orbit .rock { position: absolute; border-radius: 43% 57% 46% 54%; background: radial-gradient(circle at 30% 25%, #75746b, #272a29 70%); box-shadow: -5px -5px 14px rgba(255,255,255,0.06); }
.media-orbit .r1 { left: 8%; top: 61%; width: 16%; aspect-ratio: 1.2; }.media-orbit .r2 { right: 15%; top: 15%; width: 7%; aspect-ratio: 1; }

.media-frontier .media-placeholder { background: linear-gradient(172deg, #17272f, #70807c 48%, #1a2020 49%); }
.media-frontier .moon { position: absolute; top: 12%; left: 13%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #d9e0d3; box-shadow: 0 0 55px 14px rgba(214, 226, 211, 0.18); }
.media-frontier .peak { position: absolute; bottom: 0; background: linear-gradient(145deg, #56615c 0 24%, #202827 25% 64%, #0c1111); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.media-frontier .p1 { left: -12%; width: 80%; height: 67%; }.media-frontier .p2 { right: -14%; width: 82%; height: 78%; background: linear-gradient(220deg, #7d8981 0 17%, #29312f 18% 62%, #101414); }
.media-frontier .traveler { position: absolute; z-index: 2; left: 51%; bottom: 11%; width: 2.7%; height: 14%; border-radius: 40% 40% 5% 5%; background: #080b0b; box-shadow: -8px 10px 0 -5px #080b0b, 8px 10px 0 -5px #080b0b; }
.media-frontier .traveler::before { content: ""; position: absolute; left: 18%; top: -25%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: #080b0b; }

.shot-note { position: absolute; z-index: 6; left: 1.4rem; bottom: 1.1rem; margin: 0; color: rgba(237, 239, 230, 0.78); font-family: var(--xp-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 220ms ease; }
.shot-note span { color: var(--xp-acid); }

.chapter-copy { position: relative; z-index: 2; }
.chapter-number { margin-bottom: 1.1rem; color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; }
.chapter-copy h3 { margin-bottom: 1.6rem; font-size: clamp(3.2rem, 5.4vw, 6.2rem); letter-spacing: -0.05em; line-height: 0.84; }
.chapter-copy > p:not(.chapter-number) { max-width: 540px; color: var(--xp-dim); font-size: 1rem; line-height: 1.8; }
.chapter-features { margin: 2.3rem 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--xp-line); }
.chapter-features li { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--xp-line); color: #d0d3cd; font-size: 0.82rem; }

.st {
  display: inline-flex;
  min-width: 76px;
  justify-content: center;
  margin-right: 0.8rem;
  padding: 0.17rem 0.44rem;
  border: 1px solid;
  border-radius: 0;
  font-family: var(--xp-mono);
  font-size: 0.51rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.st.in { color: var(--xp-acid); border-color: rgba(214, 242, 111, 0.38); background: rgba(214, 242, 111, 0.045); }
.st.rough { color: #f0a167; border-color: rgba(240, 161, 103, 0.4); background: rgba(240, 161, 103, 0.04); }
.st.next { color: #9faeaf; border-color: rgba(159, 174, 175, 0.32); background: rgba(159, 174, 175, 0.035); }

.text-link { color: var(--xp-ink); font-family: var(--xp-mono); font-size: 0.63rem; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.text-link span { display: inline-block; margin-left: 0.4rem; color: var(--xp-acid); transition: transform 160ms ease; }
.text-link:hover span { transform: translate(3px, -3px); }

.orbit-break {
  min-height: 100svh;
  padding: clamp(7rem, 12vw, 13rem) max(6vw, calc((100vw - 1440px) / 2));
  overflow: hidden;
  background: radial-gradient(circle at 78% 45%, rgba(74, 104, 106, 0.18), transparent 20%), linear-gradient(135deg, #05090d, #10191c 50%, #080b0c);
}
.orbit-break::before { content: ""; position: absolute; right: -11vw; top: 50%; width: 59vw; aspect-ratio: 1; border: 1px solid rgba(205, 224, 214, 0.16); border-radius: 50%; box-shadow: inset 45px 15px 100px rgba(136, 176, 167, 0.06); transform: translateY(-50%); }
.orbit-break::after { content: ""; position: absolute; right: -3vw; top: 50%; width: 38vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 29% 26%, #607b76, #263b3a 42%, #0a1112 69%, #050809 72%); box-shadow: -30px -15px 100px rgba(112, 159, 147, 0.17); transform: translateY(-50%); }
.orbit-lines { position: absolute; z-index: 1; right: -8vw; top: 50%; width: 70vw; height: 34vw; border-top: 1px solid rgba(214, 242, 111, 0.14); border-radius: 50%; transform: rotate(-18deg); }
.orbit-lines::before,
.orbit-lines::after { content: ""; position: absolute; inset: 12% -4%; border-top: 1px solid rgba(214, 242, 111, 0.09); border-radius: 50%; }
.orbit-lines::after { inset: 28% -9%; }
.orbit-break-copy { position: relative; z-index: 3; max-width: 900px; }
.orbit-break h2 { margin-bottom: 2rem; font-size: clamp(3.5rem, 6.5vw, 7.5rem); letter-spacing: -0.045em; line-height: 0.88; }
.orbit-break h2 em { color: var(--xp-acid); font-style: normal; }
.orbit-break-copy > p:last-child { max-width: 590px; color: #aab2ae; line-height: 1.75; }
.orbit-route { position: relative; z-index: 3; display: grid; max-width: 830px; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 6rem; }
.route-line { position: absolute; left: 7%; right: 7%; top: 4px; height: 1px; background: linear-gradient(90deg, var(--xp-acid), rgba(214, 242, 111, 0.12)); }
.orbit-route div { position: relative; padding-top: 1.6rem; }
.orbit-route i { position: absolute; z-index: 1; top: 0; left: 0; width: 9px; height: 9px; border: 1px solid var(--xp-acid); border-radius: 50%; background: #0c1213; box-shadow: 0 0 12px rgba(214, 242, 111, 0.24); }
.orbit-route b { display: block; font-family: var(--xp-display); font-size: 1rem; text-transform: uppercase; }
.orbit-route small { color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.51rem; letter-spacing: 0.08em; text-transform: uppercase; }

.planetary { overflow: hidden; background: #090b0b; }
.planet-grid { display: grid; max-width: 1440px; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 5rem auto 0; background: var(--xp-line); border: 1px solid var(--xp-line); }
.planet-card { min-height: 560px; padding: 2rem; overflow: hidden; background: #0c1010; }
.planet-card > p { color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.56rem; letter-spacing: 0.16em; }
.planet-card h3 { margin: 0 0 0.45rem; font-family: var(--xp-display); font-size: clamp(2.5rem, 4vw, 4.5rem); letter-spacing: -0.04em; text-transform: uppercase; }
.planet-card > span { color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.54rem; letter-spacing: 0.07em; text-transform: uppercase; }
.planet-card > span i { display: inline-block; width: 2px; height: 2px; margin: 0 0.45rem; border-radius: 50%; background: var(--xp-acid); vertical-align: middle; }
.planet-orb { position: relative; width: 82%; max-width: 390px; margin: 2.5rem auto 4rem; aspect-ratio: 1; border-radius: 50%; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.planet-card:hover .planet-orb { transform: scale(1.035) rotate(2deg); }
.planet-orb::before { content: ""; position: absolute; inset: -7%; border: 1px solid rgba(231, 239, 226, 0.09); border-left-color: transparent; border-radius: 50%; transform: rotate(-28deg); }
.planet-orb span { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.earth .planet-orb { background: radial-gradient(circle at 35% 28%, #9da885, #395346 27%, #223d3d 50%, #091011 72%); box-shadow: inset -45px -20px 65px #050909, -20px -8px 50px rgba(100, 147, 128, 0.12); }
.earth .planet-orb span { background: radial-gradient(ellipse at 65% 45%, rgba(208, 224, 207, 0.25), transparent 11%), repeating-linear-gradient(23deg, transparent 0 21px, rgba(232, 238, 221, 0.06) 22px 24px, transparent 25px 49px); }
.alpine .planet-orb { background: radial-gradient(circle at 34% 25%, #e2e8e0, #819294 24%, #35494e 49%, #0b1113 72%); box-shadow: inset -48px -18px 68px #05090b, -20px -8px 50px rgba(169, 194, 194, 0.13); }
.alpine .planet-orb span { background: repeating-radial-gradient(ellipse at 34% 33%, transparent 0 16px, rgba(242, 246, 238, 0.16) 17px 19px, transparent 20px 35px); }
.aridus .planet-orb { background: radial-gradient(circle at 33% 25%, #dba574, #8e513b 29%, #3f2824 52%, #100c0c 72%); box-shadow: inset -50px -20px 70px #080708, -20px -8px 50px rgba(192, 105, 67, 0.14); }
.aridus .planet-orb span { background: repeating-linear-gradient(12deg, transparent 0 20px, rgba(253, 183, 110, 0.08) 21px 23px, transparent 24px 44px); }

.world-index-preview { background: linear-gradient(180deg, #0b0e0d, #070a0a); }
.status-legend { display: flex; align-items: center; gap: 0.5rem; margin: 3.5rem 0 2.4rem; padding: 1rem 0; border-top: 1px solid var(--xp-line); border-bottom: 1px solid var(--xp-line); }
.status-legend p { margin: 0 2rem 0 0; color: var(--xp-faint); font-size: 0.75rem; }
.feature-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(240px, auto); gap: 1px; background: var(--xp-line); border: 1px solid var(--xp-line); }
.feature-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; padding: 1.6rem; overflow: hidden; background: linear-gradient(145deg, rgba(20, 27, 25, 0.98), rgba(10, 13, 13, 0.98)); transition: background 220ms ease; }
.feature-tile::before { content: ""; position: absolute; top: 20%; right: -20%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(214, 242, 111, 0.06); border-radius: 50%; transition: transform 500ms ease, border-color 220ms ease; }
.feature-tile:hover { background: linear-gradient(145deg, #18211e, #0c1010); }
.feature-tile:hover::before { border-color: rgba(214, 242, 111, 0.2); transform: scale(1.14); }
.feature-tile-wide { grid-column: span 2; }
.feature-tile-tall { grid-row: span 2; }
.feature-tile > div { position: absolute; z-index: 1; top: 1.4rem; left: 1.4rem; right: 1.4rem; display: flex; justify-content: space-between; align-items: center; }
.feature-tile small { color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; }
.feature-tile h3 { position: relative; z-index: 1; margin-bottom: 0.4rem; font-family: var(--xp-display); font-size: clamp(1.8rem, 3vw, 3.7rem); letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; }
.feature-tile p { position: relative; z-index: 1; max-width: 390px; margin: 0; color: var(--xp-dim); font-size: 0.82rem; }
.feature-code { position: absolute; right: 1rem; bottom: 1rem; color: rgba(214, 242, 111, 0.28); font-family: var(--xp-mono); font-size: 0.48rem; letter-spacing: 0.12em; writing-mode: vertical-rl; }
.atlas-cta { margin: 2.3rem 0 0; text-align: right; }

.question { background: #090d0d; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 4rem 0 0; background: var(--xp-line); border: 1px solid var(--xp-line); }
.card {
  position: relative;
  min-height: 190px;
  padding: 1.4rem;
  border: 0;
  border-radius: 0;
  color: var(--xp-ink);
  background: rgba(13, 18, 17, 0.98);
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.card.frame::before,
.card.frame::after { display: none; }
.card:hover { z-index: 2; border: 0; background: #171f1c; box-shadow: 0 0 0 1px rgba(214, 242, 111, 0.44), 0 20px 45px rgba(0,0,0,0.3); transform: translateY(-4px); }
.card small { display: block; margin-bottom: 3.5rem; color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.53rem; letter-spacing: 0.16em; text-transform: uppercase; }
.card strong { display: block; margin-bottom: 0.4rem; font-family: var(--xp-display); font-size: 1.7rem; letter-spacing: -0.025em; text-transform: uppercase; }
.card > span { color: var(--xp-faint); font-size: 0.78rem; line-height: 1.45; }
.card.picked { background: linear-gradient(150deg, rgba(214, 242, 111, 0.17), rgba(16, 22, 19, 0.98)); box-shadow: inset 0 0 0 1px var(--xp-acid); }
.card.picked::after { content: attr(data-order); position: absolute; display: grid; top: 1.2rem; right: 1.2rem; width: 27px; height: 27px; place-items: center; border: 1px solid var(--xp-acid); border-radius: 50%; color: var(--xp-acid); background: transparent; box-shadow: none; font-family: var(--xp-mono); font-size: 0.62rem; }
.after-picks { max-width: 720px; margin: 3rem auto 0; padding: 2.2rem; border: 1px solid var(--xp-line); background: rgba(14, 19, 18, 0.8); }
.after-picks .noted { color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; }
.after-picks label { display: block; margin: 0 0 0.8rem; color: #d9dcd5; font-family: var(--xp-display); font-size: 1.35rem; text-transform: uppercase; }

.experience-page textarea,
.experience-page input[type="text"],
.experience-page input[type="password"],
.experience-page input[type="email"] { border: 1px solid var(--xp-line-strong); border-radius: 0; color: var(--xp-ink); background: rgba(4, 7, 7, 0.58); }
.experience-page textarea:focus,
.experience-page input:focus { outline: 1px solid var(--xp-acid); border-color: var(--xp-acid); box-shadow: none; }

.reel,
.gallery,
.dispatches { background: #080b0b; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 4rem; background: var(--xp-line); border: 1px solid var(--xp-line); }
.clips video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0a0d0e; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: var(--xp-line); }
.shots figure { position: relative; margin: 0; overflow: hidden; border: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.shots figure:nth-child(5n + 1) { grid-column: span 2; aspect-ratio: 16 / 8.5; }
.shots img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform 500ms ease, filter 500ms ease; }
.shots figure:hover img { transform: scale(1.035); filter: saturate(1); }
.posts { display: grid; max-width: none; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: var(--xp-line); border: 1px solid var(--xp-line); }
.post { min-height: 280px; padding: 1.6rem; border: 0; border-radius: 0; background: #101514; }
.post time { color: var(--xp-acid); font-size: 0.58rem; }
.post h3 { margin-top: 2.8rem; font-family: var(--xp-display); font-size: 2rem; line-height: 1; text-transform: uppercase; }

.claim { display: grid; min-height: 860px; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.65fr); gap: 7vw; align-items: center; padding: 8rem max(6vw, calc((100vw - 1440px) / 2)); overflow: hidden; background: #0d1110; }
.claim-backdrop { position: absolute; inset: 0; z-index: 0; }
.claim-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.28) saturate(0.7); }
.claim-backdrop::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 18% 35%, rgba(225, 136, 67, 0.16), transparent 22%), linear-gradient(90deg, rgba(8, 12, 11, 0.96) 0%, rgba(8, 12, 11, 0.8) 52%, rgba(8, 12, 11, 0.66)); }
.claim-copy,
.claim-form { position: relative; z-index: 2; }
.claim h2 { margin-bottom: 1.5rem; font-size: clamp(3.6rem, 6vw, 7rem); letter-spacing: -0.05em; line-height: 0.85; }
.claim-copy > p:not(.eyebrow):not(.download-note) { max-width: 600px; color: #a9b0ab; font-size: 1.05rem; line-height: 1.75; }
.claim-copy .xp-button { margin-top: 1.2rem; }
.download-note { max-width: 500px; margin-top: 0.8rem; color: var(--xp-faint); font-size: 0.76rem; }
.claim-form { padding: 2.2rem; border: 1px solid var(--xp-line-strong); background: rgba(10, 15, 14, 0.84); backdrop-filter: blur(18px); }
.claim-form::before { content: ""; position: absolute; top: -1px; left: -1px; width: 30px; height: 30px; border-top: 2px solid var(--xp-acid); border-left: 2px solid var(--xp-acid); }
.claim-form-label { margin-bottom: 1.7rem; color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; }
.claim-form form { display: flex; flex-direction: column; gap: 1rem; }
.claim-form label:not(.check) > span { display: block; margin-bottom: 0.38rem; color: var(--xp-dim); font-family: var(--xp-mono); font-size: 0.56rem; letter-spacing: 0.11em; text-transform: uppercase; }
.claim-form input { padding: 0.82rem 0.9rem; }
.claim-form .check { display: flex; align-items: center; gap: 0.65rem; color: var(--xp-dim); font-size: 0.75rem; }
.claim-form .check input { width: 15px; height: 15px; accent-color: var(--xp-acid); }
.claim-form .xp-button { align-self: stretch; margin-top: 0.4rem; }
.form-privacy { margin: 1.3rem 0 0; color: var(--xp-faint); font-size: 0.68rem; line-height: 1.5; }
#su-website { position: absolute; left: -9999px; height: 0; opacity: 0; }

.alpha-note { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr); gap: 8vw; align-items: end; border-top: 1px solid var(--xp-line); background: #080b0b; }
.alpha-note > div:first-child > p:last-child { max-width: 770px; margin-bottom: 0; color: #bec3bd; font-size: 1.1rem; line-height: 1.75; }
.waitlist p { color: var(--xp-dim); font-family: var(--xp-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.waitlist form { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.waitlist input { min-width: 0; }
.waitlist button { border-color: var(--xp-acid); border-radius: 0; color: #111409; background: var(--xp-acid); }
.waitlist .msg { grid-column: 1 / -1; }

.xp-footer { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; align-items: start; padding: 4rem max(5vw, calc((100vw - 1440px) / 2)); border-top: 1px solid var(--xp-line); color: var(--xp-dim); background: #060909; font-family: var(--xp-body); font-style: normal; text-align: left; }
.footer-mark { color: var(--xp-ink); }
.xp-footer > p { font-size: 0.85rem; line-height: 1.6; }
.xp-footer nav { display: flex; justify-content: flex-end; gap: 1.4rem; }
.xp-footer nav a { color: var(--xp-dim); font-family: var(--xp-mono); font-size: 0.57rem; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.xp-footer nav a:hover { color: var(--xp-acid); }
.footer-alpha { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--xp-line); color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.5rem; letter-spacing: 0.15em; text-transform: uppercase; }
.footer-alpha i { display: inline-block; width: 3px; height: 3px; margin: 0 0.7rem; border-radius: 50%; background: var(--xp-acid); vertical-align: middle; }

.msg { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.76rem; }
.msg.ok { color: var(--xp-acid); }
.msg.err { color: #ed826c; }
.hidden { display: none !important; }

.rv { opacity: 0; transform: translateY(26px); transition: opacity 850ms cubic-bezier(.2,.7,.2,1), transform 850ms cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* World index page */
.atlas-page main { position: relative; z-index: 2; max-width: none; margin: 0; padding: 0; }
.atlas-hero { padding: 11rem max(5vw, calc((100vw - 1440px) / 2)) 6rem; background: radial-gradient(circle at 78% 18%, rgba(86, 121, 113, 0.2), transparent 25%); }
.atlas-hero h1 { max-width: 1100px; margin: 0 0 1.5rem; font-family: var(--xp-display); font-size: clamp(4.4rem, 8.5vw, 9rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.83; text-transform: uppercase; }
.atlas-hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(240, 239, 232, 0.48); }
.atlas-hero > p:last-of-type { max-width: 670px; color: var(--xp-dim); font-size: 1.05rem; line-height: 1.7; }
.atlas-controls { position: sticky; z-index: 20; top: 62px; display: flex; align-items: center; gap: 0.5rem; padding: 1rem max(5vw, calc((100vw - 1440px) / 2)); border-top: 1px solid var(--xp-line); border-bottom: 1px solid var(--xp-line); background: rgba(8, 11, 11, 0.9); backdrop-filter: blur(16px); }
.atlas-controls > span { margin-right: auto; color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; }
.filter-button { padding: 0.55rem 0.8rem; border: 1px solid var(--xp-line); color: var(--xp-dim); background: transparent; cursor: pointer; font-family: var(--xp-mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.filter-button:hover,
.filter-button.active { border-color: var(--xp-acid); color: #111409; background: var(--xp-acid); }
.atlas-content { padding: 4rem max(5vw, calc((100vw - 1440px) / 2)) 9rem; }
.atlas-group { display: grid; grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr); gap: 5vw; padding: 4.5rem 0; border-top: 1px solid var(--xp-line); }
.atlas-group:first-child { border-top: 0; }
.atlas-group-head { position: sticky; top: 155px; align-self: start; }
.atlas-group-head small { color: var(--xp-acid); font-family: var(--xp-mono); font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; }
.atlas-group-head h2 { margin: 0.8rem 0 1rem; font-family: var(--xp-display); font-size: clamp(2.2rem, 3.5vw, 4rem); letter-spacing: -0.04em; line-height: 0.9; text-transform: uppercase; }
.atlas-group-head p { color: var(--xp-faint); font-size: 0.82rem; line-height: 1.55; }
.atlas-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--xp-line); border: 1px solid var(--xp-line); }
.atlas-item { position: relative; min-height: 210px; padding: 1.4rem; background: #101514; }
.atlas-item[hidden] { display: none; }
.atlas-item .st { margin-bottom: 3.5rem; }
.atlas-item h3 { margin: 0 0 0.5rem; font-family: var(--xp-display); font-size: 1.8rem; letter-spacing: -0.025em; line-height: 1; text-transform: uppercase; }
.atlas-item p { margin: 0; color: var(--xp-dim); font-size: 0.78rem; line-height: 1.55; }
.atlas-item small { position: absolute; top: 1.5rem; right: 1.3rem; color: var(--xp-faint); font-family: var(--xp-mono); font-size: 0.48rem; letter-spacing: 0.1em; }
.atlas-empty { display: none; padding: 4rem 1rem; color: var(--xp-faint); text-align: center; }
.atlas-group.empty { display: none; }

@media (max-width: 1120px) {
  .xp-nav-actions { margin-left: auto; }
  .hero-copy { margin-left: 7vw; }
  .hero-receipts { right: 2vw; grid-template-columns: repeat(2, 1fr); }
  .hero-receipts div:nth-child(3) { border-left: 0; border-top: 1px solid var(--xp-line); }
  .hero-receipts div:nth-child(4) { border-top: 1px solid var(--xp-line); }
  .promise-chain { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--xp-line); }
  .promise-chain > i { display: none; }
  .life-chapter,
  .life-chapter-reverse { grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr); gap: 3rem; }
  .feature-mosaic { grid-template-columns: repeat(3, 1fr); }
  .claim { gap: 4vw; }
}

@media (max-width: 820px) {
  /* Matches the 820px mobile branch in hero-orbit.js, which puts the globe
     higher and further right. */
  .hero-orbit-ship { inset: 6% auto auto 38%; width: 56%; height: 32%; }
  .xp-nav { min-height: 62px; padding: 0 1rem; background: rgba(7, 10, 11, 0.72); backdrop-filter: blur(12px); }
  .xp-mark small,
  .worldline { display: none; }
  .xp-nav > nav {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    display: flex;
    gap: 1.35rem;
    margin: 0;
    padding: 0.72rem 1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--xp-line);
    background: rgba(7, 10, 11, 0.88);
    scrollbar-width: none;
  }
  .xp-nav > nav::-webkit-scrollbar { display: none; }
  .xp-nav > nav a { flex: 0 0 auto; font-size: 0.55rem; }
  .xp-nav-actions { gap: 0.75rem; }
  .nav-login { font-size: 0.56rem; }
  .nav-cta { padding: 0.62rem 0.75rem; }
  .hero-copy { width: auto; margin: 0; padding: 8rem 1.25rem 14rem; align-self: end; }
  .hero-copy h1 { font-size: clamp(3.9rem, 17vw, 7rem); }
  .hero-copy h1 br { display: none; }
  .hero-copy h1 em { display: block; margin-top: 0.08em; }
  .hero-eyebrow { flex-wrap: wrap; gap: 0.5rem; font-size: 0.5rem; }
  .hero-receipts { left: 1rem; right: 1rem; bottom: 2rem; grid-template-columns: repeat(4, 1fr); }
  .hero-receipts div { padding: 0.6rem; }
  .hero-receipts div:nth-child(3),
  .hero-receipts div:nth-child(4) { border-top: 0; }
  .hero-receipts div:nth-child(3) { border-left: 1px solid var(--xp-line); }
  .hero-receipts strong { font-size: 1rem; }
  .hero-receipts span { font-size: 0.42rem; line-height: 1.2; }
  .hero-scroll { display: none; }
  .hero-planet { top: 13vh; right: -22vw; width: 85vw; }
  .hero-orbit-ship { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(70, 166, 255, 0.1)); }
  .hero-scrim { background: linear-gradient(180deg, rgba(5,8,9,.08) 20%, rgba(5,8,9,.62) 55%, #070a0b 90%); }

  .world-promise,
  .life-paths,
  .planetary,
  .world-index-preview,
  .question,
  .reel,
  .gallery,
  .dispatches,
  .alpha-note { padding: 6rem 1.2rem; }
  .section-heading h2 { font-size: clamp(3.1rem, 14vw, 5.2rem); }
  .section-heading-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .promise-chain { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .promise-chain article { min-height: 190px; }
  .promise-chain article span { margin-bottom: 2.8rem; }
  .life-chapter,
  .life-chapter-reverse { display: flex; min-height: 0; flex-direction: column; gap: 2.4rem; margin-top: 7rem; }
  .life-chapter-reverse .chapter-media { order: 0; }
  .chapter-media { width: 100%; min-height: 72vh; max-height: 760px; }
  .chapter-copy h3 { font-size: clamp(3rem, 14vw, 5.4rem); }
  .orbit-break { min-height: 900px; padding: 7rem 1.2rem; }
  .orbit-break h2 { font-size: clamp(3.1rem, 13vw, 5.8rem); }
  .orbit-break::before { right: -46vw; width: 115vw; top: 73%; }
  .orbit-break::after { right: -26vw; width: 82vw; top: 73%; }
  .orbit-lines { right: -35vw; top: 73%; width: 115vw; }
  .orbit-route { grid-template-columns: 1fr; margin-top: 4rem; }
  .route-line { left: 4px; right: auto; top: 4px; bottom: 9%; width: 1px; height: auto; background: linear-gradient(var(--xp-acid), rgba(214, 242, 111, 0.12)); }
  .orbit-route div { min-height: 58px; padding: 0 0 0 1.8rem; }
  .orbit-route i { left: 0; }
  .planet-grid { grid-template-columns: 1fr; margin-top: 3rem; }
  .planet-card { min-height: 500px; }
  .planet-orb { width: min(78vw, 370px); margin-bottom: 2.5rem; }
  .status-legend { display: grid; grid-template-columns: auto 1fr; }
  .status-legend p { margin: 0; }
  .feature-mosaic { grid-template-columns: 1fr 1fr; }
  .feature-tile-wide { grid-column: span 2; }
  .feature-tile-tall { grid-row: auto; }
  .cards { grid-template-columns: 1fr 1fr; }
  .shots,
  .posts { grid-template-columns: 1fr 1fr; }
  .claim { grid-template-columns: 1fr; gap: 3.5rem; padding: 7rem 1.2rem; }
  .claim h2 { font-size: clamp(3.5rem, 14vw, 5.7rem); }
  .alpha-note { grid-template-columns: 1fr; gap: 3rem; }
  .xp-footer { grid-template-columns: 1fr; gap: 1.4rem; padding: 3rem 1.2rem; }
  .xp-footer nav { justify-content: flex-start; flex-wrap: wrap; }

  .atlas-hero { padding: 9rem 1.2rem 4rem; }
  .atlas-controls { top: 62px; overflow-x: auto; padding: 0.8rem 1.2rem; }
  .atlas-controls { scrollbar-width: none; }
  .atlas-controls::-webkit-scrollbar { display: none; }
  .atlas-controls > span { display: none; }
  .atlas-content { padding: 2rem 1.2rem 6rem; }
  .atlas-group { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 0; }
  .atlas-group-head { position: static; }
}

@media (max-width: 540px) {
  .xp-mark { font-size: 0.83rem; }
  .xp-mark-glyph { width: 21px; height: 21px; }
  .nav-cta { font-size: 0.53rem; }
  .hero-copy { padding-bottom: 12.5rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .xp-button { min-height: 48px; }
  .hero-receipts { grid-template-columns: repeat(2, 1fr); }
  .hero-receipts div:nth-child(3) { border-left: 0; border-top: 1px solid var(--xp-line); }
  .hero-receipts div:nth-child(4) { border-top: 1px solid var(--xp-line); }
  .hero-receipts span { font-size: 0.46rem; }
  .chapter-media { min-height: 62vh; }
  .chapter-features li { align-items: flex-start; padding: 0.65rem 0; line-height: 1.35; }
  .feature-mosaic,
  .cards,
  .shots,
  .posts,
  .clips,
  .atlas-items { grid-template-columns: 1fr; }
  .feature-tile-wide { grid-column: auto; }
  .card { min-height: 170px; }
  .claim-form { padding: 1.4rem; }
  .waitlist form { grid-template-columns: 1fr; gap: 0.6rem; }
  .shots figure:nth-child(5n + 1) { grid-column: auto; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .worldline .dot,
  .hero-scroll span::after { animation: none; }
  .planet-orb,
  .xp-button::before,
  .chapter-media > img { transition: none; transform: none !important; }
  .cursor-light { display: none; }
  .hero-orbit-world,
  .hero-orbit-ship { transform: none; transition: none; }
}