/* ══════════════════════════════════════════════════════
   EXODUS — The Mars Program
   Palette sampled from the source film:
   slate #2a2e33 (earth) · ember #5c3929 (impact) · rust #3a2e2c (mars)
   ══════════════════════════════════════════════════════ */

:root{
  --void:      #06070a;
  --void-2:    #0a0c11;
  --void-3:    #10131a;
  --bone:      #ece7df;
  --bone-dim:  #b9b4ac;
  --dust:      #7e838e;
  --rust:      #c0552c;
  --ember:     #ff7a33;
  --ice:       #6f9dc4;
  --line:      rgba(236,231,223,.13);
  --line-soft: rgba(236,231,223,.07);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(20px, 4vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--void); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.booting{ overflow:hidden; height:100vh; }

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

::selection{ background:var(--rust); color:var(--bone); }

/* ── shared type ─────────────────────────────────── */
.mono, .kicker, .lbl, .sec-no, .ph-no, .ph-meta, .t-lbl, .hud-l, .hud-c, .hud-r,
.nav-links a, .nav-clock, .boot-log, .boot-num, .foot-r, .foot-sub, .val{
  font-family:var(--mono);
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sec-head, .ph-head{ position:relative; }
.sec-no{
  display:block; color:var(--rust); margin-bottom:1.6em;
}
.sec-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 6vw, 5.2rem);
  line-height:1.02; letter-spacing:-.015em; margin:0;
}
.sec-title em{ font-style:italic; color:var(--rust); }
.sec-sub{
  max-width:46ch; margin:1.6rem 0 0;
  font-size:clamp(.94rem,1.2vw,1.06rem); line-height:1.65;
  color:var(--bone-dim); font-weight:200;
}

/* ══════════ BOOT ══════════ */
#boot{
  position:fixed; inset:0; z-index:200;
  background:var(--void);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
#boot.done{ opacity:0; visibility:hidden; }
.boot-inner{ width:min(420px, 74vw); }
.boot-mark{
  font-family:var(--serif); font-size:clamp(2rem,5vw,3rem);
  letter-spacing:.28em; text-indent:.28em; text-align:center;
  margin-bottom:1.8rem; opacity:.9;
}
.boot-bar{ height:1px; background:var(--line); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0%; background:var(--rust); }
.boot-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.9rem; color:var(--dust); font-size:.6rem;
}
.boot-num{ color:var(--bone); }

/* ══════════ PERSISTENT LAYERS ══════════ */
#stars{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; pointer-events:none;
}
.grain{
  position:fixed; inset:-150%; z-index:120; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) } 80%{ transform:translate(3%,1%) }
}
.vignette{
  position:fixed; inset:0; z-index:110; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(4,5,8,.55) 82%, rgba(4,5,8,.9) 100%);
}
.reticle{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  opacity:0; transition:opacity .4s var(--ease);
  mix-blend-mode:difference;
}
.reticle span{
  position:absolute; inset:0; border:1px solid rgba(236,231,223,.6);
  border-radius:50%; transform:scale(var(--r-s,1));
  transition:transform .35s var(--ease), border-color .35s;
}
.reticle i{
  position:absolute; top:50%; left:50%; width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px; background:var(--bone); border-radius:50%;
}
body.has-cursor .reticle{ opacity:1; }
.reticle.hot{ --r-s:1.9; }
.reticle.hot span{ border-color:var(--ember); }

/* ══════════ NAV ══════════ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:clamp(16px,2.2vw,26px) var(--pad);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* the film runs bright under the nav — difference blending fails there, a scrim doesn't */
#nav::before{
  content:""; position:absolute; inset:-40% 0 auto 0; height:220%;
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,5,8,.72), rgba(4,5,8,.42) 45%, transparent);
}
#nav .brand-text, #nav .nav-links a, #nav .nav-clock, #nav .brand-sub{
  text-shadow:0 1px 12px rgba(4,5,8,.9);
}
#nav.hidden{ opacity:0; transform:translateY(-14px); pointer-events:none; }
.brand{ display:flex; align-items:center; gap:.62rem; }
.brand-glyph{
  width:9px; height:9px; border:1px solid var(--bone);
  transform:rotate(45deg); flex:none;
  animation:pulseGlyph 3.4s ease-in-out infinite;
}
@keyframes pulseGlyph{ 0%,100%{opacity:1} 50%{opacity:.28} }
.brand-text{
  font-family:var(--mono); font-weight:500; font-size:.78rem;
  letter-spacing:.34em; text-indent:.34em;
}
.brand-sub{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.2em;
  color:var(--dust); padding-left:.7rem; margin-left:.2rem;
  border-left:1px solid var(--line);
}
.nav-links{ display:flex; gap:clamp(1.2rem,2.6vw,2.4rem); }
.nav-links a{ color:var(--bone-dim); position:relative; padding-bottom:3px; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ember); transition:width .45s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ width:100%; }
.nav-clock{ display:flex; align-items:center; gap:.5rem; color:var(--dust); }
.nav-clock .dot{
  width:5px; height:5px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 8px var(--ember); animation:blink 1.9s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.15} }

/* ══════════ THE SCENE — the film is the hero, full viewport ══════════ */
.scene{ position:relative; z-index:2; height:780vh; }
.scene-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  perspective:1100px; perspective-origin:50% 50%;
}
.scene-sticky > video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.06);
  will-change:transform;
}
/* the film runs from near-black to blinding — this keeps type readable at both ends */
.scene-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(6,7,10,.7) 0%, rgba(6,7,10,.24) 26%, transparent 46%),
    linear-gradient(to top,    rgba(6,7,10,.76) 0%, rgba(6,7,10,.2) 26%, transparent 48%),
    radial-gradient(118% 88% at 50% 50%, transparent 38%, rgba(6,7,10,.5) 100%);
}
.frame-marks{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.frame-marks i{
  position:absolute; width:18px; height:18px; opacity:.45;
  border:1px solid rgba(236,231,223,.85);
}
.frame-marks i:nth-child(1){ top:clamp(18px,2.2vw,30px); left:clamp(18px,2.2vw,30px); border-right:0; border-bottom:0; }
.frame-marks i:nth-child(2){ top:clamp(18px,2.2vw,30px); right:clamp(18px,2.2vw,30px); border-left:0; border-bottom:0; }
.frame-marks i:nth-child(3){ bottom:clamp(18px,2.2vw,30px); left:clamp(18px,2.2vw,30px); border-right:0; border-top:0; }
.frame-marks i:nth-child(4){ bottom:clamp(18px,2.2vw,30px); right:clamp(18px,2.2vw,30px); border-left:0; border-top:0; }

.hero-copy{
  position:relative; z-index:5; text-align:center;
  padding:0 var(--pad);
  transform-style:preserve-3d; will-change:transform,opacity;
}
.kicker{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  color:var(--bone-dim); margin:0 0 clamp(1.4rem,3vw,2.4rem);
  /* lands on Earth's bright limb in the opening frame */
  text-shadow:0 1px 16px rgba(4,5,8,.95), 0 0 3px rgba(4,5,8,.8);
}
.kicker em{ color:var(--ember); font-style:normal; }
.title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(4.6rem, 22vw, 20rem);
  line-height:.82; margin:0;
  letter-spacing:.02em; display:flex; justify-content:center;
  filter:drop-shadow(0 10px 46px rgba(4,5,8,.85));
}
.title .ch{
  display:inline-block; will-change:transform,opacity;
  /* stays bright top-to-bottom — the old dark foot vanished against the film */
  background:linear-gradient(180deg, #fffdf9 20%, var(--bone) 54%, #b6a598 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  font-family:var(--serif); font-size:clamp(1.05rem, 2.1vw, 1.7rem);
  line-height:1.5; color:var(--bone); margin:clamp(1.6rem,3vw,2.6rem) 0 0;
  text-shadow:0 2px 26px rgba(4,5,8,.9);
}
.lede em{ font-style:italic; color:var(--bone); }

.hero-foot{
  position:absolute; z-index:5;
  left:var(--pad); right:var(--pad); bottom:clamp(22px,3.4vw,40px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem;
  border-top:1px solid var(--line-soft); padding-top:1.2rem;
}
/* EVA-cam chrome — fades in as the hero copy leaves */
.scene-hud{
  position:absolute; z-index:5; opacity:0;
  left:var(--pad); right:var(--pad); bottom:clamp(18px,2.6vw,30px);
  display:flex; align-items:center; justify-content:space-between;
  color:rgba(236,231,223,.75); pointer-events:none;
  font-size:.58rem !important;
  text-shadow:0 1px 14px rgba(4,5,8,.95);
}
.hf-col{ display:flex; flex-direction:column; gap:.42rem; }
.hf-col.right{ text-align:right; }
.lbl{ color:var(--dust); }
.val{ color:var(--bone); letter-spacing:.1em; }
.hero-foot .lbl, .hero-foot .val, .scroll-cue{ text-shadow:0 1px 14px rgba(4,5,8,.95); }
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-dim);
}
.scroll-cue i{
  display:block; width:1px; height:38px;
  background:linear-gradient(to bottom, var(--ember), transparent);
  animation:cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0 }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1 }
  60%{ transform:scaleY(1); transform-origin:bottom; opacity:1 }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0 }
}

.hud-l{ color:var(--ember); display:flex; align-items:center; gap:.4rem; }
.hud-l::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--ember); animation:blink 1.4s infinite;
}

/* beats */
.beats{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.beat{
  position:absolute; opacity:0;
  left:var(--pad); bottom:clamp(80px,12vh,140px);
  width:min(42ch, 38vw);
  will-change:transform,opacity;
}
/* local scrim — the film goes very bright behind this text */
.beat::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-14vh -22vw -14vh -26vw;
  background:radial-gradient(90% 78% at 12% 62%,
    rgba(4,5,8,.92) 0%, rgba(4,5,8,.78) 42%, rgba(4,5,8,.4) 64%, transparent 82%);
}
.beat.b2::before, .beat.b4::before{
  inset:-14vh -26vw -14vh -22vw;
  background:radial-gradient(90% 78% at 88% 62%,
    rgba(4,5,8,.92) 0%, rgba(4,5,8,.78) 42%, rgba(4,5,8,.4) 64%, transparent 82%);
}
/* clear the progress rail, which lives at the right edge */
.beat.b2, .beat.b4{ left:auto; right:calc(var(--pad) + 46px); text-align:right; }
.beat-no{
  display:block; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.3em; color:var(--ember); margin-bottom:1rem;
}
.beat-h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 4.4vw, 4rem); line-height:1.02;
  letter-spacing:-.015em; margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.9), 0 1px 5px rgba(0,0,0,.7);
}
.beat-h span{ display:inline-block; will-change:transform,opacity; }
.beat-p{
  margin:1.1rem 0 0; max-width:40ch;
  font-size:clamp(.86rem,1.05vw,1rem); line-height:1.7;
  color:var(--bone-dim); font-weight:200;
  text-shadow:0 1px 20px rgba(0,0,0,.95);
}
.beat.b2 .beat-p, .beat.b4 .beat-p{ margin-left:auto; }
.beat-p em{ color:var(--bone); font-style:italic; }

/* rail */
.rail{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  z-index:5; height:min(240px,30vh); display:flex; gap:10px;
  opacity:0; transition:opacity .6s var(--ease);
}
.rail.on{ opacity:1; }
.rail-track{ width:1px; height:100%; background:var(--line); position:relative; }
.rail-track i{
  position:absolute; top:0; left:-1px; width:3px; height:0%;
  background:var(--ember); box-shadow:0 0 10px var(--ember);
}
.rail-ticks{ display:flex; flex-direction:column; justify-content:space-between; }
.rail-ticks b{ width:6px; height:1px; background:var(--line); }

/* ══════════ TELEMETRY ══════════ */
.telemetry{
  position:relative; z-index:3;
  padding:clamp(90px,14vh,180px) var(--pad) clamp(80px,12vh,150px);
  background:linear-gradient(to bottom, transparent, var(--void-2) 22%, var(--void-2) 78%, transparent);
}
.tgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft);
  margin-top:clamp(3rem,7vw,6rem);
  border:1px solid var(--line-soft);
}
.tcard{
  background:var(--void-2); padding:clamp(1.6rem,3vw,2.8rem);
  min-height:clamp(230px,26vh,300px);
  display:flex; flex-direction:column;
  transform-style:preserve-3d; will-change:transform;
  transition:background .5s var(--ease);
  position:relative; overflow:hidden;
}
.tcard::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at var(--mx,50%) var(--my,50%), rgba(192,85,44,.14), transparent 70%);
  opacity:0; transition:opacity .5s var(--ease);
}
.tcard:hover::before{ opacity:1; }
.tcard.wide{ grid-column:span 2; }
.t-lbl{ color:var(--dust); }
.t-val{
  display:flex; align-items:baseline; gap:.5rem;
  font-family:var(--serif); font-size:clamp(3rem,6.5vw,5.6rem);
  line-height:1; margin:auto 0 .8rem; letter-spacing:-.02em;
}
.t-val i{
  font-family:var(--mono); font-style:normal;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rust); transform:translateY(-.4em);
}
.t-note{
  margin:0; font-size:.84rem; line-height:1.65;
  color:var(--dust); font-weight:200; max-width:36ch;
}

/* ══════════ PHASES ══════════ */
.phases{ position:relative; z-index:3; height:420vh; }
.ph-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.ph-head{ padding:0 var(--pad); margin-bottom:clamp(2rem,5vh,4rem); }
.ph-track{
  display:flex; gap:clamp(20px,2.4vw,40px);
  padding:0 var(--pad); will-change:transform;
}
.ph-card{
  flex:none; width:min(400px, 76vw);
  background:linear-gradient(160deg, var(--void-3), var(--void-2));
  border:1px solid var(--line-soft);
  padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:1rem;
  min-height:clamp(320px,42vh,420px);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
  position:relative;
}
.ph-card::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(to right, var(--rust), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.ph-card:hover{ border-color:rgba(236,231,223,.2); }
.ph-card:hover::after{ transform:scaleX(1); }
.ph-no{ color:var(--rust); }
.ph-card h3{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.05; letter-spacing:-.01em;
}
.ph-card p{
  margin:0; font-size:.9rem; line-height:1.7;
  color:var(--bone-dim); font-weight:200;
}
.ph-meta{ margin-top:auto; color:var(--dust); }
.ph-rail{
  margin:clamp(2rem,5vh,3.4rem) var(--pad) 0;
  height:1px; background:var(--line-soft); position:relative;
}
.ph-rail i{
  position:absolute; left:0; top:-1px; height:3px; width:0%;
  background:var(--ember); box-shadow:0 0 12px var(--ember);
}

/* ══════════ MANIFEST ══════════ */
.manifest{
  position:relative; z-index:3;
  padding:clamp(70px,10vh,130px) 0 clamp(80px,12vh,150px);
  overflow:hidden;
}
.marquee{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:clamp(14px,2vw,24px) 0; overflow:hidden;
}
.mq-inner{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:mq 34s linear infinite;
}
.mq-inner span{
  font-family:var(--serif); font-size:clamp(1.6rem,4vw,3.4rem);
  line-height:1; letter-spacing:.01em; color:var(--bone);
  white-space:nowrap; opacity:.86;
}
.mq-inner b{ color:var(--rust); font-size:1.4rem; }
@keyframes mq{ to{ transform:translateX(-50%) } }

.mf-body{
  padding:clamp(4rem,10vh,8rem) var(--pad) 0;
  max-width:900px;
}
.mf-title{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(2.6rem,8vw,7rem); line-height:.98; letter-spacing:-.02em;
}
.mf-title em{ font-style:italic; color:var(--rust); }
.mf-p{
  max-width:48ch; margin:2rem 0 0;
  font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.7;
  color:var(--bone-dim); font-weight:200;
}
.cta{
  display:inline-flex; align-items:center; gap:1.4rem;
  margin-top:clamp(2.4rem,5vw,3.6rem); padding:1.1rem 1.9rem;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.cta::before{
  content:""; position:absolute; inset:0; background:var(--bone);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.cta .cta-t, .cta .cta-i{ position:relative; z-index:1; }
.cta .cta-i{ transition:transform .5s var(--ease); }
.cta:hover{ color:var(--void); border-color:var(--bone); }
.cta:hover::before{ transform:translateY(0); }
.cta:hover .cta-i{ transform:translateX(6px); }
.mf-fine{
  margin:clamp(2.4rem,5vw,3.4rem) 0 0; max-width:52ch;
  font-family:var(--mono); font-size:.6rem; line-height:1.9;
  letter-spacing:.06em; color:var(--dust);
}

/* ══════════ FOOTER ══════════ */
.foot{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap;
  padding:clamp(2rem,4vw,3rem) var(--pad) clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-soft);
}
.foot-l{ display:flex; flex-direction:column; gap:.5rem; }
.foot-sub{ color:var(--dust); }
.foot-r{ display:flex; gap:.8rem; color:var(--dust); align-items:center; }
.foot-r b{ color:var(--rust); }

/* ══════════ REVEALS ══════════ */
[data-rev]{ opacity:0; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1040px){
  .tgrid{ grid-template-columns:repeat(2,1fr); }
  .tcard.wide{ grid-column:span 2; }
  .beat{ width:min(46ch, 62vw); }
}

@media (max-width:760px){
  .nav-links, .brand-sub{ display:none; }
  /* keep origin/destination paired; drop the cue onto its own row */
  .hero-foot{ flex-wrap:wrap; align-items:flex-end; gap:1.4rem 1rem; }
  .hf-col{ flex:1 1 40%; }
  .scroll-cue{ order:3; flex:1 0 100%; align-items:flex-start; }
  .scroll-cue i{ height:26px; }

  /* mobile keeps the fullscreen scene; only the scrub is dropped —
     the film loops on its own while the beats still key off scroll */
  .scene{ height:620vh; }
  .beat{
    left:var(--pad); right:var(--pad);
    width:auto; bottom:clamp(70px,11vh,110px);
  }
  .beat.b2, .beat.b4{ left:var(--pad); right:var(--pad); text-align:left; }
  .beat.b2 .beat-p, .beat.b4 .beat-p{ margin-left:0; }
  .beat::before, .beat.b2::before, .beat.b4::before{
    inset:-16vh -30vw -18vh -30vw;
    background:radial-gradient(100% 80% at 30% 66%,
      rgba(4,5,8,.94) 0%, rgba(4,5,8,.8) 44%, rgba(4,5,8,.42) 66%, transparent 84%);
  }
  .beat-p{ max-width:none; }
  .rail{ display:none; }

  .tgrid{ grid-template-columns:1fr; }
  .tcard.wide{ grid-column:span 1; }
  .tcard{ min-height:auto; padding:1.8rem 1.4rem; }
  .t-val{ margin-top:2rem; }

  .phases{ height:auto; }
  .ph-sticky{ position:relative; height:auto; padding:clamp(60px,10vh,90px) 0; }
  .ph-track{ flex-direction:column; transform:none !important; }
  .ph-card{ width:100%; min-height:auto; }
  .ph-rail{ display:none; }

  .foot{ flex-direction:column; align-items:flex-start; }
}

@media (hover:none){
  .reticle{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .grain{ display:none; }
}