:root{
  --ink:#f4ece0;
  --ink-soft:#a89c8a;
  --ink-faint:#5e554a;
  --rule:rgba(244,236,224,.1);
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Imagery (Unsplash CDN — swap any URL to re-skin a section) */
  --img-hero: url("https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?w=2400&q=85&auto=format&fit=crop");
  --img-mx:   url("https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?w=1800&q=85&auto=format&fit=crop");
  --img-fr:   url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=1800&q=85&auto=format&fit=crop");
  --img-jp:   url("https://images.unsplash.com/photo-1542051841857-5f90071e7989?w=1800&q=85&auto=format&fit=crop");
  --img-it:   url("https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?w=1800&q=85&auto=format&fit=crop");

  /* Morph demo (cat/dog precision-edit illustration) */
  --img-dog:  url("https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=1600&q=85&auto=format&fit=crop");
  --img-cat:  url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?w=1600&q=85&auto=format&fit=crop");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0b0805;color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;overscroll-behavior-x:none;width:100%;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
img{max-width:100%;display:block}

/* film grain (very subtle, fixed) */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ─── Nav ─────────────────────────────────────────────────────── */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  mix-blend-mode:difference; /* nav adapts to changing realm backgrounds */
}
/* mobile nav: drop the blend trick (unreadable over photo realms) and use a
   soft gradient + blur so labels stay legible */
@media (max-width:720px){
  nav.top{
    mix-blend-mode:normal;
    background:linear-gradient(180deg, rgba(11,8,5,.86) 0%, rgba(11,8,5,.55) 65%, rgba(11,8,5,0) 100%);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    padding:16px 20px;
    color:#f4ece0;
  }
  nav.top .logo{color:#fff}
  nav.top .nav-cta, nav.top a{color:#f4ece0}
}
nav.top .left, nav.top .right{display:flex;align-items:center;gap:32px}
nav.top a:hover{color:#fff}
nav.top .logo{
  font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.005em;
  text-transform:none;color:#fff;font-style:italic;
}
@media (max-width:780px){
  nav.top .right .hide-sm{display:none}
}

/* ─── Vertical timecode ticker ───────────────────────────────── */
.ticker{
  position:fixed;left:18px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center;
  z-index:55;font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--ink-faint);
  white-space:nowrap;mix-blend-mode:difference;
}
@media (max-width:980px){.ticker{display:none}}

/* ═════════════════════════════════════════════════════════════
   SECTION 1 · OPENING — A market materializes from black
   ════════════════════════════════════════════════════════════ */
.stage{
  position:relative;min-height:100vh;
  background:#0b0805;
  overflow:hidden;
  isolation:isolate;
}

/* Layered scene composed entirely from CSS+SVG.
   Wakes up via .stage.lit (added on load). */
.scene{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.8s ease 0.3s;overflow:hidden}
.stage.lit .scene{opacity:1}

.scene .photo{
  position:absolute;inset:-4%;width:108%;height:108%;
  background:var(--img-hero) center/cover no-repeat;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.04);
  transition:transform 8s ease-out;
}
.stage.lit .scene .photo{transform:scale(1)}
.scene .tint{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(11,8,5,.95) 0%, rgba(11,8,5,.4) 50%, transparent 80%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(11,8,5,.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(40,16,8,.45) 0%, rgba(11,8,5,.15) 40%, rgba(11,8,5,.85) 100%);
}
.scene .tint::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 80%, rgba(217,119,87,.18) 0%, transparent 70%);
  mix-blend-mode:overlay;
}

/* dust motes drifting in sun */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(253,220,170,.6);box-shadow:0 0 6px rgba(253,200,130,.4);
  animation:float linear infinite;
}
@keyframes float{
  0%{transform:translate3d(0,100vh,0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate3d(60px,-10vh,0);opacity:0}
}

/* Hero content */
.hero-content{
  position:relative;z-index:2;
  min-height:100vh;
  display:grid;grid-template-rows:1fr auto auto;
  padding:120px 48px 60px;
  max-width:1480px;margin:0 auto;
}
@media (max-width:720px){.hero-content{padding:120px 24px 40px}}

.cue{
  align-self:start;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
}
.cue .pulse{
  width:8px;height:8px;border-radius:50%;background:#fde2a4;
  box-shadow:0 0 0 0 rgba(253,226,164,.6);
  animation:cuePulse 2s ease-in-out infinite;
}
@keyframes cuePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(253,226,164,.7)}
  50%{box-shadow:0 0 0 14px rgba(253,226,164,0)}
}

.headline{
  align-self:end;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(60px, 11vw, 188px);
  line-height:.92;letter-spacing:-0.035em;
  font-variation-settings:"opsz" 144;
  margin-bottom:32px;max-width:14ch;
}
.headline em{
  font-style:italic;font-weight:300;
  color:#fde2a4;
  font-variation-settings:"opsz" 144;
}
.headline .word{display:inline-block;opacity:0;transform:translateY(.4em);transition:all 1.1s cubic-bezier(.2,.8,.2,1)}
.stage.lit .headline .word{opacity:1;transform:none}
.stage.lit .headline .word:nth-child(1){transition-delay:.6s}
.stage.lit .headline .word:nth-child(2){transition-delay:.9s}
.stage.lit .headline .word:nth-child(3){transition-delay:1.2s}
.stage.lit .headline .word:nth-child(4){transition-delay:1.5s}

.hero-foot{
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;
  border-top:1px solid var(--rule);padding-top:28px;
}
@media (max-width:880px){.hero-foot{grid-template-columns:1fr;gap:28px}}

.transcript-box{display:flex;flex-direction:column;gap:14px}
.transcript-meta{
  display:flex;gap:18px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.transcript-meta .live{color:#fde2a4;display:inline-flex;align-items:center;gap:8px}
.transcript-meta .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fde2a4;box-shadow:0 0 10px #fde2a4;animation:cuePulse 1.6s infinite}
.transcript-line{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(22px, 2.2vw, 32px);line-height:1.3;color:var(--ink);
  font-variation-settings:"opsz" 36;
}
.transcript-line .typed{border-right:2px solid #fde2a4;padding-right:2px;animation:caret .9s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}

.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (min-width:881px){.cta-stack{align-items:flex-end}}
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:16px 28px;border-radius:0;
  border:1px solid var(--ink);color:var(--ink);
  transition:background .25s ease, color .25s ease, transform .25s ease;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;
}
.btn:hover{background:var(--ink);color:#0b0805}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-fill{background:#fde2a4;border-color:#fde2a4;color:#3d1e0a}
.btn-fill:hover{background:#fff;border-color:#fff}
.cta-note{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);max-width:24ch}

/* ═════════════════════════════════════════════════════════════
   SECTION 2 · MANIFESTO — editorial slab on parchment-dark
   ════════════════════════════════════════════════════════════ */
.manifesto{
  background:#0b0805;
  padding:200px 48px;
  position:relative;
  border-top:1px solid var(--rule);
}
@media (max-width:720px){.manifesto{padding:120px 24px}}

.manifesto-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
@media (max-width:980px){.manifesto-inner{grid-template-columns:1fr;gap:48px}}

.section-tag{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:48px;
}
.section-tag .num{color:#fde2a4;font-weight:500}
.section-tag .rule{flex:1;height:1px;background:var(--rule)}

.declarations p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px, 4.4vw, 64px);line-height:1.05;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 96;
  margin-bottom:36px;
}
.declarations p .strike{position:relative;color:#5e554a;display:inline-block}
.declarations p .strike::after{
  content:"";position:absolute;left:-2%;right:-2%;top:55%;height:1.5px;
  background:#fde2a4;transform:rotate(-1.5deg);
}
.declarations p em{font-style:italic;color:#fde2a4}

.manifesto-side{padding-top:24px;border-top:1px solid var(--rule)}
.manifesto-side .lede{
  font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:46ch;margin-bottom:32px;
}
.manifesto-side .lede strong{color:var(--ink);font-weight:500}

.contrast-list{display:flex;flex-direction:column;gap:0;margin-top:40px}
.contrast-list li{
  list-style:none;display:grid;grid-template-columns:90px 1fr;gap:20px;
  padding:18px 0;border-top:1px solid var(--rule);align-items:baseline;
}
.contrast-list li:last-child{border-bottom:1px solid var(--rule)}
.contrast-list .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.contrast-list .txt{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.contrast-list li.us .lbl{color:#fde2a4}
.contrast-list li.us .txt{color:var(--ink);font-family:var(--serif);font-style:italic;font-size:18px;font-weight:300}

/* ═════════════════════════════════════════════════════════════
   SECTION 3 · THE MORPH — interactive cat ↔ dog reveal
   ════════════════════════════════════════════════════════════ */
.morph{
  background:linear-gradient(180deg, #0b0805 0%, #160b06 50%, #0b0805 100%);
  padding:200px 48px;
  border-top:1px solid var(--rule);
}
@media (max-width:720px){.morph{padding:120px 24px}}
.morph-inner{max-width:1280px;margin:0 auto}
.morph-head{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;margin-bottom:80px;align-items:end}
@media (max-width:880px){.morph-head{grid-template-columns:1fr;gap:36px}}
.morph-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px, 6vw, 92px);line-height:.98;letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144;
}
.morph-title em{font-style:italic;color:#fde2a4}
.morph-aside{
  font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:38ch;
  border-left:1px solid var(--rule);padding-left:20px;
}

.morph-stage{
  position:relative;width:100%;aspect-ratio:21/9;
  border:1px solid var(--rule);
  background:#1a0e08;
  overflow:hidden;
  user-select:none;cursor:ew-resize;
  box-shadow:0 60px 140px -50px rgba(0,0,0,.7), 0 0 0 1px rgba(253,226,164,.04) inset;
}
@media (max-width:720px){.morph-stage{aspect-ratio:4/3}}

/* Decorative scene-frame markers — like an editorial viewfinder */
.morph-stage::before, .morph-stage::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid #fde2a4;z-index:5;
  pointer-events:none;
}
.morph-stage::before{top:14px;left:14px;border-right:0;border-bottom:0}
.morph-stage::after{bottom:14px;right:14px;border-left:0;border-top:0}

.morph-pane{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* tint overlay per pane */
.morph-pane::after{
  content:"";position:absolute;inset:0;
}
/* WRONG side (user said "perro") — show DOG photo, cool/red shadow */
.pane-wrong{background-image:var(--img-dog)}
.pane-wrong::after{
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(40,8,8,.55) 100%),
    linear-gradient(180deg, rgba(120,30,30,.18), rgba(20,8,8,.35));
}
/* RIGHT side (correct: "gato") — show CAT photo, warm gold tint */
.pane-right{
  background-image:var(--img-cat);
  clip-path:inset(0 0 0 var(--split, 50%));
}
.pane-right::after{
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(40,28,8,.45) 100%),
    linear-gradient(180deg, rgba(120,90,30,.15), rgba(20,16,8,.25));
}

.morph-divider{
  position:absolute;top:0;bottom:0;width:2px;background:#fde2a4;left:var(--split,50%);
  box-shadow:0 0 14px rgba(253,226,164,.6);
  transform:translateX(-50%);pointer-events:none;
}
.morph-handle{
  position:absolute;top:50%;left:var(--split,50%);transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:#fde2a4;color:#3d1e0a;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:18px;font-weight:500;
  box-shadow:0 0 0 6px rgba(253,226,164,.18), 0 12px 32px rgba(0,0,0,.5);
  pointer-events:none;letter-spacing:-.02em;
}
.morph-label{
  position:absolute;bottom:24px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 14px;border:1px solid currentColor;
}
.morph-label.wrong{left:24px;color:#ff8b78}
.morph-label.right{right:24px;color:#fde2a4}

.morph-quote{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.morph-quote .feedback{font-family:var(--serif);font-style:italic;font-size:22px;color:#fde2a4;text-transform:none;letter-spacing:0;font-weight:300}

/* ═════════════════════════════════════════════════════════════
   SECTION 4 · REALMS — four atmospheric panels
   ════════════════════════════════════════════════════════════ */
.realms{padding:200px 0 0;background:#0b0805;border-top:1px solid var(--rule)}
@media (max-width:720px){.realms{padding:120px 0 0}}
.realms-head{max-width:1280px;margin:0 auto;padding:0 48px}
@media (max-width:720px){.realms-head{padding:0 24px}}

.realms-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(54px, 7.5vw, 116px);line-height:.95;letter-spacing:-0.03em;
  font-variation-settings:"opsz" 144;
  max-width:14ch;margin-bottom:36px;
}
.realms-title em{font-style:italic;color:#fde2a4}
.realms-lede{max-width:50ch;font-size:18px;line-height:1.6;color:var(--ink-soft);margin-bottom:80px}

/* ─── Immersive realm: sticky stage + horizontal photo pan + dwell beats ──
   The page "pauses" inside each realm — the stage pins, the photo gently pans,
   and editorial beats fade in/out from the scene as scroll progress flows
   through their slice of the realm. Realm height scales with beat count so each
   beat gets equal dwell time. */

.realm{
  position:relative;
  border-top:1px solid var(--rule);
  --p:0;             /* scroll progress 0→1, set by JS */
  --pan:60%;         /* total horizontal pan range */
  --zoom-start:1.12; /* initial zoom */
  --zoom-end:1.18;   /* end zoom */
}
.realm[data-beats="2"]{min-height:310vh}
.realm[data-beats="3"]{min-height:460vh}

.realm-stage{
  position:sticky;top:0;height:100dvh;width:100%;
  overflow:hidden;background:#0b0805;
  z-index:0;
}

.realm-photo{
  position:absolute;inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:calc(20% + (var(--p) * var(--pan))) center;
  transform:scale(calc(var(--zoom-start) + (var(--zoom-end) - var(--zoom-start)) * var(--p)));
  transform-origin:center center;
  will-change:transform, background-position;
  filter:saturate(1.05);
}
.realm-tint, .realm-vignette{position:absolute;inset:0;pointer-events:none}
.realm-tint{mix-blend-mode:overlay;opacity:.85}
.realm-vignette{
  background:
    linear-gradient(180deg, rgba(11,8,5,.55) 0%, rgba(11,8,5,.05) 22%, rgba(11,8,5,.05) 70%, rgba(11,8,5,.92) 100%),
    radial-gradient(ellipse 130% 90% at 50% 50%, transparent 35%, rgba(11,8,5,.6) 100%);
}

/* fixed meta label tucked into the corner of every realm stage */
.realm-meta-fixed{
  position:absolute;top:32px;left:32px;z-index:5;
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.realm-meta-fixed .num{color:#fde2a4;font-weight:500}
.realm-meta-fixed .sep{opacity:.45}
.realm-meta-fixed .lang{padding:4px 10px;border:1px solid rgba(244,236,224,.3);border-radius:999px}
@media (max-width:720px){.realm-meta-fixed{top:18px;left:18px;font-size:10px;gap:10px}.realm-meta-fixed .lang{display:none}}

/* compass / scroll progress indicator on the stage */
.realm-compass{
  position:absolute;bottom:32px;right:32px;z-index:5;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.realm-compass .track{
  position:relative;width:120px;height:1px;background:rgba(244,236,224,.25);
}
.realm-compass .track::after{
  content:"";position:absolute;left:0;top:-1px;height:3px;
  width:calc(var(--p) * 100%);background:#fde2a4;
  box-shadow:0 0 10px #fde2a4;
}
@media (max-width:720px){.realm-compass{display:none}}

/* content + beats live INSIDE the pinned stage — they pin with the photo. JS
   drives each beat's opacity + drift based on overall realm scroll progress. */
.realm-content{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
}
.realm-beats{position:absolute;inset:0}

.beat{
  position:absolute;inset:0;
  display:flex;align-items:center;
  padding:0 80px;
  opacity:0;             /* JS sets per scroll progress */
  transform:translateY(0);
  pointer-events:none;   /* re-enabled per-beat when active via JS class */
  will-change:opacity, transform;
}
.beat.right{justify-content:flex-end}
@media (max-width:880px){.beat{padding:0 40px}}

.beat-inner{
  max-width:640px;display:flex;flex-direction:column;gap:18px;
  /* readability card — semi-transparent dark glass behind the beat text */
  padding:36px 40px;
  background:linear-gradient(135deg, rgba(11,8,5,.62) 0%, rgba(11,8,5,.48) 100%);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(244,236,224,.08);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
.beat.right .beat-inner{margin-left:auto;text-align:right}

.beat h3{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(40px, 5.5vw, 88px);line-height:.98;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 144;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.beat h3 em{font-style:normal;color:#fde2a4}

.beat .body{
  font-size:17px;line-height:1.6;color:#f4ece0;max-width:46ch;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.beat .body strong{color:#fde2a4;font-weight:500}
.beat .body em{font-style:italic;color:#fff}

.beat .phrase{
  display:inline-block;align-self:flex-start;
  font-family:var(--serif);font-style:italic;font-size:clamp(22px, 2.6vw, 30px);
  color:#fff;font-weight:300;
  padding:14px 18px;background:rgba(0,0,0,.28);
  border-left:2px solid #fde2a4;
}
.beat.right .phrase{align-self:flex-end;border-left:0;border-right:2px solid #fde2a4}
.beat .phrase .gloss{
  display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(253,226,164,.85);margin-top:8px;
}

/* Per-realm tints (overlay the photo) */
.realm.mx .realm-tint{
  background:
    radial-gradient(ellipse 70% 60% at 65% 35%, rgba(255,170,90,.5) 0%, transparent 65%),
    linear-gradient(180deg, rgba(180,75,30,.3), rgba(80,25,10,.2));
}
.realm.mx .beat h3 em{color:#fde2a4}

.realm.fr .realm-tint{
  background:
    radial-gradient(ellipse 55% 45% at 28% 70%, rgba(232,164,200,.4) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 30%, rgba(106,138,204,.4) 0%, transparent 65%),
    linear-gradient(180deg, rgba(58,40,88,.3), rgba(40,24,40,.25));
}
.realm.fr .beat h3 em{color:#f4c4d8}
.realm.fr .beat .phrase{border-color:#f4c4d8}
.realm.fr .beat.right .phrase{border-color:#f4c4d8}
.realm.fr .realm-meta-fixed .num{color:#f4c4d8}
.realm.fr .realm-compass .track::after{background:#f4c4d8;box-shadow:0 0 10px #f4c4d8}

.realm.jp .realm-tint{
  background:
    radial-gradient(ellipse 35% 60% at 22% 60%, rgba(255,77,138,.5) 0%, transparent 50%),
    radial-gradient(ellipse 35% 60% at 78% 50%, rgba(77,204,255,.4) 0%, transparent 50%),
    linear-gradient(180deg, rgba(20,8,40,.25), rgba(4,8,16,.25));
}
.realm.jp .beat h3 em{color:#ffb4d4}
.realm.jp .beat .phrase{border-color:#ffb4d4}
.realm.jp .beat.right .phrase{border-color:#ffb4d4}
.realm.jp .realm-meta-fixed .num{color:#ffb4d4}
.realm.jp .realm-compass .track::after{background:#ffb4d4;box-shadow:0 0 10px #ffb4d4}

.realm.it .realm-tint{
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(244,208,144,.45) 0%, transparent 65%),
    linear-gradient(180deg, rgba(216,168,104,.2), rgba(60,40,16,.35));
}
.realm.it .beat h3 em{color:#f4d090}
.realm.it .beat .phrase{border-color:#f4d090}
.realm.it .beat.right .phrase{border-color:#f4d090}
.realm.it .realm-meta-fixed .num{color:#f4d090}
.realm.it .realm-compass .track::after{background:#f4d090;box-shadow:0 0 10px #f4d090}

/* photo source per realm */
.realm.mx .realm-photo{background-image:var(--img-mx)}
.realm.fr .realm-photo{background-image:var(--img-fr)}
.realm.jp .realm-photo{background-image:var(--img-jp)}
.realm.it .realm-photo{background-image:var(--img-it)}

/* ─── Mobile realm: scaled-down immersive (option 2) ──
   Same sticky-pin + fade-beat mechanic as desktop, tuned for phones:
   • dvh units so address-bar collapse doesn't break the pin
   • no horizontal pan (invisible on a phone-sized photo)
   • shorter dwell (one viewport per beat) so flick-scrolling doesn't get stuck
   • smaller padding, tighter card, slightly smaller type
   • portrait-friendly photo center crop */
@media (max-width:720px){
  .realm{
    --pan:0%;          /* kill horizontal pan on mobile */
    --zoom-start:1;    /* no scale animation — was reading as horizontal drift */
    --zoom-end:1;
  }
  /* shorter dwell — one viewport of pin per beat */
  .realm[data-beats="2"]{min-height:280dvh}
  .realm[data-beats="3"]{min-height:400dvh}

  /* stage: sticky, full dynamic viewport height */
  .realm-stage{
    position:sticky;top:0;
    height:100dvh;width:100%;
    overflow:hidden;background:#0b0805;
    z-index:0;
  }

  /* Photo: center-cover, statically positioned. Override the desktop calc()s
     defensively so no horizontal animation can sneak through. */
  .realm-photo{
    position:absolute;inset:0;
    background-position:center !important;
    transform:none !important;
  }

  /* beat-inner: tighter card, no horizontal pan to dodge */
  .beat{
    position:absolute;inset:0;
    display:flex;align-items:center;
    padding:0 20px;
    opacity:0;
    transform:translateY(0);
    pointer-events:none;
    will-change:opacity, transform;
    justify-content:flex-start;
  }
  .beat.right{justify-content:flex-end}
  .beat-inner{
    max-width:none;width:100%;
    padding:24px 22px;
    background:linear-gradient(135deg, rgba(11,8,5,.7) 0%, rgba(11,8,5,.55) 100%);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    border:1px solid rgba(244,236,224,.08);
    box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
    gap:14px;
  }
  .beat.right .beat-inner{text-align:right}
  .beat h3{
    font-size:clamp(30px, 7.5vw, 44px);
    line-height:1;letter-spacing:-0.02em;
  }
  .beat .body{font-size:15px;line-height:1.5}
  .beat .phrase{font-size:18px;padding:12px 14px}
  .beat .phrase .gloss{font-size:9px;letter-spacing:.18em}
}

/* very narrow / older devices: fall back to a single banner + stacked beats */
@media (max-width:380px){
  .realm,
  .realm[data-beats="2"],
  .realm[data-beats="3"]{min-height:auto}
  .realm-stage{
    position:relative;height:auto;
    display:flex;flex-direction:column;overflow:visible;
  }
  .realm-photo{
    position:relative;inset:auto;width:100%;aspect-ratio:4/5;
    transform:none;order:1;
  }
  .realm-tint,.realm-vignette{
    position:absolute;top:0;left:0;right:0;aspect-ratio:4/5;
  }
  .realm-content{
    position:relative;inset:auto;order:2;
    background:#0b0805;padding:40px 20px 56px;pointer-events:auto;
  }
  .realm-beats{position:relative;inset:auto;display:flex;flex-direction:column;gap:36px}
  .beat{
    position:relative;inset:auto;opacity:1;transform:none;
    pointer-events:auto;padding:0;justify-content:flex-start;
  }
  .beat.right{justify-content:flex-start}
  .beat.right .beat-inner{text-align:left}
  .beat-inner{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0}
}

/* ═════════════════════════════════════════════════════════════
   SECTION 5 · MIND-MAP — interactive force graph
   ════════════════════════════════════════════════════════════ */
.mindmap{
  background:radial-gradient(ellipse at center, #07111a 0%, #04070a 70%);
  padding:200px 48px;
  border-top:1px solid var(--rule);
  position:relative;overflow:hidden;
}
@media (max-width:720px){.mindmap{padding:120px 24px}}
.mindmap-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
@media (max-width:980px){.mindmap-inner{grid-template-columns:1fr;gap:48px}}
.mindmap h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px, 6vw, 96px);line-height:.95;letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144;margin-bottom:28px;
}
.mindmap h2 em{font-style:italic;color:#7feee3}
.mindmap p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:42ch;margin-bottom:24px}
.mindmap .legend{display:flex;flex-direction:column;gap:10px;margin-top:32px;padding-top:28px;border-top:1px solid var(--rule)}
.mindmap .legend div{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.mindmap .legend .swatch{width:10px;height:10px;border-radius:50%}

.graph{
  position:relative;width:100%;aspect-ratio:1/1;max-width:600px;margin:0 auto;
}
.graph svg{width:100%;height:100%;display:block;overflow:visible}
.node{cursor:pointer;transition:transform .3s ease}
.node circle{transition:r .35s cubic-bezier(.2,.8,.2,1), fill .25s ease, filter .25s ease}
.node text{
  font-family:var(--serif);font-style:italic;font-weight:300;
  fill:var(--ink);font-size:13px;pointer-events:none;
  text-anchor:middle;
}
.node.lvl-0 text{font-size:18px;font-style:normal;font-weight:400}
.node.lvl-0 circle{filter:drop-shadow(0 0 12px rgba(253,226,164,.6))}
.node.mastered circle{filter:drop-shadow(0 0 8px rgba(253,226,164,.5))}
.edge{stroke-linecap:round;transition:stroke-opacity .3s ease, stroke-width .3s ease}
.node:hover circle{r:14;filter:drop-shadow(0 0 14px rgba(127,238,227,.7))}

/* breathing animation */
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.graph svg > g.node{animation:breathe 6s ease-in-out infinite}
.graph svg > g.node:nth-child(3n){animation-duration:7.5s;animation-delay:-1s}
.graph svg > g.node:nth-child(3n+1){animation-duration:8.4s;animation-delay:-2.6s}

/* ═════════════════════════════════════════════════════════════
   SECTION 6 · ENGINE — the architecture diagram
   ════════════════════════════════════════════════════════════ */
.engine{
  background:#0b0805;border-top:1px solid var(--rule);
  padding:200px 48px;
}
@media (max-width:720px){.engine{padding:120px 24px}}
.engine-inner{max-width:1280px;margin:0 auto}
.engine h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(48px, 6vw, 100px);line-height:.95;letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144;margin-bottom:24px;max-width:14ch;
}
.engine h2 em{font-style:italic;color:#fde2a4}
.engine .lede{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:52ch;margin-bottom:80px}

.pillars{display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:880px){.pillars{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}
.pillar{background:#0b0805;padding:36px 32px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.pillar .role{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fde2a4}
.pillar .name{
  font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.05;letter-spacing:-0.01em;
  font-variation-settings:"opsz" 96;
}
.pillar .name em{font-style:italic}
.pillar .desc{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-top:auto}
.pillar .num{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.18em;align-self:flex-end;margin-top:auto}

/* ═════════════════════════════════════════════════════════════
   SECTION 6.5 · RECEIPTS — editorial figures from the dossier
   ════════════════════════════════════════════════════════════ */
.receipts{
  background:#0b0805;border-top:1px solid var(--rule);
  padding:160px 48px;
}
@media (max-width:720px){.receipts{padding:100px 24px}}
.receipts-inner{max-width:1280px;margin:0 auto}
.receipts-head{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin-bottom:80px}
@media (max-width:880px){.receipts-head{grid-template-columns:1fr;gap:32px}}
.receipts-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px, 5.5vw, 84px);line-height:.98;letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144;
}
.receipts-title em{font-style:italic;color:#fde2a4}
.receipts-aside{
  font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:42ch;
  border-left:1px solid var(--rule);padding-left:20px;
}

.figs{display:grid;grid-template-columns:1fr 1fr;gap:80px}
@media (max-width:980px){.figs{grid-template-columns:1fr;gap:64px}}

.fig{display:flex;flex-direction:column;gap:24px}
.fig-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.fig-head .num{color:#fde2a4;font-weight:500}

/* — Stat slab — */
.stat-hero{display:flex;align-items:baseline;gap:16px;margin-top:8px}
.stat-hero .big{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(96px, 14vw, 200px);line-height:.85;letter-spacing:-0.04em;
  color:#fde2a4;
  font-variation-settings:"opsz" 144;
}
.stat-hero .pct{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px, 5vw, 64px);line-height:1;color:var(--ink-soft);
  font-variation-settings:"opsz" 96;
}
.stat-blurb{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(20px, 2.2vw, 28px);line-height:1.3;color:var(--ink);max-width:30ch;
  font-variation-settings:"opsz" 36;
}
.stat-blurb em{font-style:normal;color:#fde2a4}

/* — Custom bar chart — */
.bench{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.bench-row{display:grid;grid-template-columns:160px 1fr 60px;gap:18px;align-items:center}
.bench-row .name{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.bench-row.lead .name{color:#fde2a4;font-weight:500}
.bench-row .track{
  position:relative;height:8px;background:rgba(244,236,224,.06);
  border-left:1px solid var(--rule);
}
.bench-row .bar{
  position:absolute;inset:0 auto 0 0;height:100%;
  background:linear-gradient(90deg, rgba(94,85,74,.6), rgba(94,85,74,.4));
  width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1) .2s;
}
.bench-row.lead .bar{
  background:linear-gradient(90deg, #fde2a4 0%, #d4a55a 100%);
  box-shadow:0 0 14px rgba(253,226,164,.4);
}
.bench-row .val{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-align:right;letter-spacing:.05em}
.bench-row.lead .val{color:#fde2a4;font-weight:500}
@media (max-width:560px){.bench-row{grid-template-columns:1fr;gap:6px}.bench-row .val{text-align:left}.bench-row .track{order:3}}

.fig-foot{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.fig-foot .src a{color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.fig-foot .src a:hover{color:#fde2a4}

/* — Architecture diagram — */
.arch{position:relative;width:100%;aspect-ratio:5/4;margin-top:8px}
.arch svg{width:100%;height:100%;overflow:visible}
.arch .node-box{fill:rgba(244,236,224,.03);stroke:rgba(244,236,224,.18);stroke-width:1}
.arch .node-box.gold{fill:rgba(253,226,164,.06);stroke:rgba(253,226,164,.4)}
.arch .node-box.teal{fill:rgba(127,238,227,.05);stroke:rgba(127,238,227,.35)}
.arch .node-label{font-family:var(--serif);font-style:italic;font-weight:300;font-size:13px;fill:var(--ink)}
.arch .node-sub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;fill:var(--ink-soft)}
.arch .arrow{stroke-width:1;fill:none;stroke-linecap:round}
.arch .arrow-gold{stroke:#fde2a4;stroke-opacity:.6}
.arch .arrow-teal{stroke:#7feee3;stroke-opacity:.5}
.arch .edge-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-faint)}
.arch .pulse-dot{fill:#fde2a4}

/* ═════════════════════════════════════════════════════════════
   SECTION 7 · CTA / WAITLIST
   ════════════════════════════════════════════════════════════ */
.cta-final{
  background:#0b0805;border-top:1px solid var(--rule);
  padding:240px 48px;text-align:center;position:relative;overflow:hidden;
}
@media (max-width:720px){.cta-final{padding:140px 24px}}
.cta-final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(253,226,164,.18) 0%, transparent 65%);
  pointer-events:none;
}
.cta-final-inner{position:relative;max-width:900px;margin:0 auto}
.cta-final h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(60px, 9vw, 156px);line-height:.92;letter-spacing:-0.035em;
  font-variation-settings:"opsz" 144;margin-bottom:28px;
}
.cta-final h2 em{font-style:italic;color:#fde2a4}
.cta-final p{font-size:18px;color:var(--ink-soft);max-width:52ch;margin:0 auto 56px;line-height:1.6}

.waitlist{
  display:flex;gap:0;max-width:560px;margin:0 auto;
  border:1px solid var(--ink);
}
.waitlist input{
  flex:1;background:transparent;border:0;outline:0;color:var(--ink);
  font-family:var(--sans);font-size:15px;padding:18px 22px;letter-spacing:.01em;
}
.waitlist input::placeholder{color:var(--ink-faint)}
.waitlist button{
  background:var(--ink);color:#0b0805;padding:18px 28px;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  transition:background .2s ease;
}
.waitlist button:hover{background:#fde2a4}
.cta-meta{
  display:flex;justify-content:center;gap:32px;margin-top:36px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.cta-meta span{display:inline-flex;align-items:center;gap:8px}
.cta-meta .ok{color:#fde2a4}
@media (max-width:560px){
  .waitlist{flex-direction:column}
  .waitlist button{width:100%}
  .cta-meta{flex-direction:column;gap:10px}
}

/* ═════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer{
  background:#0b0805;border-top:1px solid var(--rule);
  padding:60px 48px 40px;
}
@media (max-width:720px){footer{padding:40px 24px}}
.foot-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.foot-mark{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:88px;line-height:.9;
  letter-spacing:-0.03em;color:var(--ink);
  font-variation-settings:"opsz" 144;
}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.foot-cols .col h5{color:var(--ink-faint);margin-bottom:14px;font-weight:400}
.foot-cols .col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-cols .col a{color:var(--ink-soft)}
.foot-cols .col a:hover{color:#fde2a4}
.foot-bar{
  margin-top:60px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:560px){.foot-bar{flex-direction:column;gap:10px}}

.foot-credit{
  max-width:1280px;margin:18px auto 0;padding:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;
}
.foot-credit a{color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.foot-credit a:hover{color:#fde2a4;border-color:#fde2a4}
@media (max-width:560px){.foot-credit{text-align:center}}

/* selection */
::selection{background:#fde2a4;color:#3d1e0a}

/* reveal */
.r{opacity:0;transform:translateY(28px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1)}
.r.in{opacity:1;transform:none}

/* ═════════════════════════════════════════════════════════════
   CONTENT PAGES — Manifesto / Realms / Engine / Press / Careers / Policy
   ════════════════════════════════════════════════════════════ */

/* page hero (smaller, document-style) */
.page-hero{
  position:relative;padding:200px 48px 90px;
  border-bottom:1px solid var(--rule);
  background:#0b0805;
  overflow:hidden;
}
.page-hero.with-photo{padding-top:240px;padding-bottom:120px}
@media (max-width:720px){.page-hero{padding:150px 24px 70px}}
.page-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:2}
.page-hero .ph-eyebrow{
  display:flex;align-items:baseline;gap:14px;margin-bottom:36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.page-hero .ph-eyebrow .num{color:#fde2a4;font-weight:500}
.page-hero .ph-eyebrow .rule{flex:1;height:1px;background:var(--rule);max-width:420px}
.page-hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(54px, 8vw, 132px);line-height:.92;letter-spacing:-0.03em;
  font-variation-settings:"opsz" 144;
  margin-bottom:36px;max-width:14ch;
}
.page-hero h1 em{font-style:italic;color:#fde2a4}
.page-hero .ph-lede{
  font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:60ch;
}
.page-hero .ph-lede strong{color:var(--ink);font-weight:500}

/* atmospheric backdrop for page heroes (subtle photo wash) */
.page-hero.with-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.45;
}
.page-hero.with-photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(11,8,5,.6) 0%, rgba(11,8,5,.85) 60%, #0b0805 100%);
}
.ph-mx::before{background-image:var(--img-mx)}
.ph-fr::before{background-image:var(--img-fr)}
.ph-jp::before{background-image:var(--img-jp)}
.ph-it::before{background-image:var(--img-it)}
.ph-hero::before{background-image:var(--img-hero)}

/* generic content page sections */
.page-section{padding:120px 48px;border-top:1px solid var(--rule);background:#0b0805}
@media (max-width:720px){.page-section{padding:80px 24px}}
.page-section-inner{max-width:1280px;margin:0 auto}

/* prose layout for long-form text */
.prose{max-width:68ch;margin:0 auto}
.prose > * + *{margin-top:1em}
.prose h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px, 4vw, 56px);line-height:1;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 96;
  margin-top:2.4em;margin-bottom:.5em;
}
.prose h2 em{font-style:italic;color:#fde2a4}
.prose h3{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-0.01em;
  margin-top:1.8em;margin-bottom:.4em;
}
.prose p{font-size:17px;line-height:1.7;color:var(--ink-soft)}
.prose p strong{color:var(--ink);font-weight:500}
.prose p em{color:var(--ink);font-style:italic}
.prose a{color:#fde2a4;border-bottom:1px solid rgba(253,226,164,.4);transition:border-color .2s ease}
.prose a:hover{border-color:#fde2a4}
.prose ul, .prose ol{padding-left:1.4em;color:var(--ink-soft);font-size:17px;line-height:1.7}
.prose li + li{margin-top:.4em}
.prose blockquote{
  border-left:2px solid #fde2a4;padding:.4em 0 .4em 1.2em;margin:1.6em 0;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:24px;line-height:1.4;color:var(--ink);
  font-variation-settings:"opsz" 60;
}
.prose blockquote cite{
  display:block;margin-top:.6em;font-style:normal;font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}

/* numbered/principle list (manifesto) */
.principles{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.principles .principle{
  display:grid;grid-template-columns:90px 1fr;gap:48px;
  padding:48px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
@media (max-width:720px){.principles .principle{grid-template-columns:1fr;gap:18px}}
.principles .principle .pnum{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:#fde2a4;
  white-space:nowrap;
}
.principles h3{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px, 3.5vw, 42px);line-height:1.05;letter-spacing:-0.015em;
  margin-bottom:.5em;font-variation-settings:"opsz" 96;
}
.principles h3 em{font-style:italic;color:#fde2a4}
.principles p{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:60ch}

/* role / job listing card (careers) */
.roles{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.role{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:baseline;
  padding:36px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .25s ease, color .25s ease;
}
.role:hover{padding-left:18px}
.role .role-main h3{
  font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-0.01em;
  font-variation-settings:"opsz" 60;margin-bottom:8px;
}
.role .role-main h3 em{font-style:italic;color:#fde2a4}
.role .role-main p{font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:60ch}
.role .role-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);text-align:right;
}
.role .role-meta .arr{margin-top:6px;color:#fde2a4;font-size:14px;letter-spacing:0}
@media (max-width:720px){
  .role{grid-template-columns:1fr;gap:14px}
  .role .role-meta{align-items:flex-start;text-align:left}
}

/* press / asset block */
.press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
@media (max-width:780px){.press-grid{grid-template-columns:1fr}}
.press-cell{background:#0b0805;padding:36px;display:flex;flex-direction:column;gap:14px;min-height:240px}
.press-cell .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fde2a4}
.press-cell h3{
  font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.1;letter-spacing:-0.01em;
  font-variation-settings:"opsz" 60;
}
.press-cell h3 em{font-style:italic}
.press-cell p{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.press-cell .cell-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.press-cell .cell-foot a{color:#fde2a4;border-bottom:1px solid rgba(253,226,164,.3)}
.press-cell .cell-foot a:hover{border-color:#fde2a4}

/* policy / legal page */
.policy-toc{
  display:flex;flex-direction:column;gap:6px;
  padding:24px;border:1px solid var(--rule);background:rgba(244,236,224,.02);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:48px;
}
.policy-toc a{color:var(--ink-soft);display:flex;justify-content:space-between;padding:6px 0}
.policy-toc a:hover{color:#fde2a4}
.policy-toc a .ix{color:var(--ink-faint)}

.policy-banner{
  padding:18px 22px;border:1px solid rgba(253,226,164,.4);background:rgba(253,226,164,.06);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fde2a4;
  margin-bottom:48px;
}

/* small CTA strip on subpages */
.subcta{
  background:#0b0805;border-top:1px solid var(--rule);
  padding:120px 48px;text-align:center;
}
@media (max-width:720px){.subcta{padding:80px 24px}}
.subcta-inner{max-width:760px;margin:0 auto}
.subcta h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px, 5vw, 72px);line-height:1;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 144;margin-bottom:18px;
}
.subcta h2 em{font-style:italic;color:#fde2a4}
.subcta p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-bottom:32px}
.subcta .cta-link{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;border:1px solid #fde2a4;color:#fde2a4;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.subcta .cta-link:hover{background:#fde2a4;color:#0b0805}

/* ─── Auto-tour floating button ───────────────────────────────────
   Sticky bottom-right CTA that animates through every beat of every realm.
   Cancels on any user scroll/touch/keypress. */
.tour-btn{
  position:fixed;bottom:32px;right:32px;z-index:55;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  background:rgba(11,8,5,.6);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  border:1px solid rgba(253,226,164,.4);
  color:#fde2a4;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.55);
}
.tour-btn:hover{background:#fde2a4;color:#0b0805;border-color:#fde2a4;transform:translateY(-2px);box-shadow:0 18px 48px -10px rgba(253,226,164,.4)}
.tour-btn .tour-glyph{display:inline-block;font-size:9px;line-height:1;transform:translateY(-1px)}
.tour-btn[data-active="true"]{
  background:#fde2a4;color:#0b0805;border-color:#fde2a4;
  box-shadow:0 0 0 6px rgba(253,226,164,.18), 0 18px 48px -10px rgba(253,226,164,.5);
}
.tour-btn[data-active="true"] .tour-glyph{font-size:10px;font-family:var(--sans);font-weight:600}
@media (max-width:720px){
  .tour-btn{bottom:18px;right:18px;padding:12px 18px;font-size:10px;letter-spacing:.16em;gap:8px}
}