/* ============================================================
   LAIKA · felt space
   ============================================================ */

:root{
  /* felt palette, pulled from the artwork */
  --blue:        #16429B;
  --blue-deep:   #0C2A66;
  --blue-soft:   #3A68C4;
  --sky:         #9CCBF2;
  --sky-pale:    #CDE6FA;
  --cream:       #FBF4E6;
  --cream-2:     #F2E6CE;
  --star:        #F5B338;
  --gold:        #B07C0D;
  --star-pale:   #FFD780;
  --lilac:       #B6A6E6;
  --ember:       #E8452C;
  --ink:         #16233F;
  --ink-soft:    #4F6184;
  --stone:       #AFACA5;
  --night:       #060A18;

  --fibre: url('assets/felt-fibre.webp?v6');
  --fibre-size: 180px 180px;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);

  /* motion */
  --e-out:   cubic-bezier(.22,.80,.30,1);
  --e-soft:  cubic-bezier(.33,.72,.28,1);
  --e-felt:  cubic-bezier(.34,1.46,.44,1);   /* settle with a touch of overshoot */
  --t-fast: 160ms;
  --t-base: 280ms;

  --shadow-felt:
     0 1px 0 rgba(255,255,255,.55) inset,
     0 2px 4px rgba(16,35,80,.07),
     0 10px 24px -8px rgba(16,35,80,.18),
     0 28px 60px -32px rgba(16,35,80,.35);
}

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

html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(15.5px,.8vw + 13px,18px);
  line-height:1.65;
  letter-spacing:-.003em;
  color:var(--ink);
  background:var(--sky);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- fixed sky stack ---------- */
#sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.sky__layer{
  position:absolute; inset:-6% -2%;
  background-size:cover; background-position:center;
  will-change:opacity,transform;
}
.sky__clouds{ background-image:url('assets/bg-clouds.webp?v6'); opacity:1; }
.sky__nebula{ background-image:url('assets/bg-nebula.webp?v6'); opacity:0; }
.sky__dusk{
  opacity:0;
  background:
    linear-gradient(to bottom, rgba(4,8,24,.95) 0%, rgba(6,12,34,.88) 45%, rgba(9,17,46,.74) 100%);
}
.sky__deep{
  opacity:0;
  background:
    radial-gradient(130% 90% at 50% 18%, #1B2A55 0%, #0B1232 46%, #05080F 100%);
}
.sky__cream{
  opacity:0;
  background-image:
    radial-gradient(125% 90% at 50% 0%, rgba(255,253,247,.58) 0%, rgba(252,245,232,.18) 44%, rgba(234,219,188,.42) 100%),
    url('assets/felt-cream.webp?v6');
  background-size:cover, cover;
  background-position:center, center;
}
.sky__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 86% at 50% 42%, transparent 52%, rgba(10,22,52,.17) 100%);
}

/* ---------- felt fibre grain ---------- */
#grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- the felt skin ----------
   One wool fibre tile, layered into each surface's own background so it works
   on solid colour, on glass and on gradients without a pseudo element. */
.label, .step, .frame, .social, .ca__chip,
.btn, .step__num, .hero__badge, .hero__cue{
  background-image:var(--fibre);
  background-size:var(--fibre-size);
  background-repeat:repeat;
}

/* lit felt panel, so body copy reads on any sky */
.panel{
  position:relative;
  background-color:var(--cream);
  background-image:var(--fibre), linear-gradient(180deg, #FFFDF7 0%, var(--cream) 100%);
  background-size:var(--fibre-size), cover;
  background-repeat:repeat, no-repeat;
  border-radius:clamp(26px,3vw,40px);
  padding:clamp(32px,4.4vw,68px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 20px 50px -22px rgba(8,20,54,.55),
    0 60px 120px -60px rgba(8,20,54,.7);
}
.panel::after{
  content:''; position:absolute; inset:12px;
  border:2px dashed rgba(22,66,155,.16);
  border-radius:clamp(16px,2vw,28px); pointer-events:none;
}

/* ---------- shared layout ---------- */
main{ position:relative; z-index:2; }
section[id]{ scroll-margin-top:96px; }
.wrap{ width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto; }

.band{ position:relative; padding:clamp(88px,11.5vh,150px) 0; }
.band--wall{
  padding-block:clamp(96px,14vh,180px);
  background-color:var(--cream);
  background-image:var(--fibre), url('assets/felt-cream.webp?v6');
  background-size:var(--fibre-size), cover;
  background-repeat:repeat, no-repeat;
  background-position:center, center;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 clamp(50px,7vh,100px), #000 calc(100% - clamp(50px,7vh,100px)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 clamp(50px,7vh,100px), #000 calc(100% - clamp(50px,7vh,100px)), transparent 100%);
}
.band--quiet{ padding-block:clamp(84px,11vh,140px) clamp(84px,11vh,140px); }

.label{
  display:inline-block;
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:.7rem; letter-spacing:.21em; text-transform:uppercase;
  color:var(--blue);
  background:rgba(255,255,255,.72);
  border-radius:999px; padding:.42em 1.05em;
  box-shadow:0 0 0 1.5px rgba(22,66,155,.14), 0 4px 12px -6px rgba(16,35,80,.3);
  margin-bottom:1.1rem;
}
.label--quiet{ color:var(--ink-soft); box-shadow:0 0 0 1.5px rgba(22,35,63,.12), 0 4px 12px -6px rgba(16,35,80,.22); }

.h1,.h2{
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  line-height:.9; letter-spacing:.015em; text-transform:uppercase;
  color:var(--blue-deep); margin:0 0 .4em;
  text-wrap:balance;
}
.h1{ font-size:clamp(3.5rem,9vw,7rem); }
.h2{ font-size:clamp(2.9rem,6.4vw,5rem); }

.lede{ font-size:clamp(1.06rem,.52vw + .95rem,1.28rem); color:var(--ink); font-weight:600; margin:0 0 1.1em; }
.center{ text-align:center; margin-inline:auto; max-width:60ch; }
p{ margin:0 0 1.05em; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }

/* the statement. Heavy, tight, set straight onto the felt. */
.statement{
  font-family:'Inter',sans-serif; font-weight:800;
  font-size:clamp(1.45rem,2.75vw,2.45rem);
  line-height:1.2; letter-spacing:-.021em;
  color:var(--blue-deep);
  margin:0 0 1.15em; max-width:19ch;
  text-wrap:pretty;
}
.statement--sm{ font-size:clamp(1.18rem,1.75vw,1.6rem); max-width:34ch; line-height:1.3; }
.statement em{ font-style:normal; color:var(--gold); }
.statement.center{ max-width:26ch; }
.statement--sm.center{ max-width:40ch; }

/* spec rows. Label left, condensed value right, hairline between. */
.spec{ margin:clamp(26px,3.6vh,44px) 0 0; display:grid; }
.spec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5em;
  padding:.62em 0 .5em;
  border-top:1px solid rgba(22,66,155,.17);
}
.spec > div:last-child{ border-bottom:1px solid rgba(22,66,155,.17); }
.spec dt{
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.85;
}
.spec dd{
  margin:0;
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:clamp(1.35rem,2.1vw,1.9rem); line-height:1;
  letter-spacing:.035em; text-transform:uppercase;
  color:var(--blue-deep);
}
.spec--wide{ max-width:820px; margin:clamp(44px,6.5vh,78px) auto 0; }

/* split-word reveal unit */
[data-split] .w{ display:inline-block; will-change:transform,opacity,filter; }

/* ---------- buttons ---------- */
.btn{
  --_bg:var(--blue);
  position:relative;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:1.12rem; letter-spacing:.055em; text-transform:uppercase;
  text-decoration:none; color:#fff;
  background:var(--_bg);
  border-radius:999px;
  padding:.78em 1.5em;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.30) inset,
    0 -2px 0 rgba(6,20,56,.30) inset,
    0 6px 16px -6px rgba(12,42,102,.55);
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background var(--t-fast) linear;
  will-change:transform;
}
.btn::after{
  content:''; position:absolute; inset:4px;
  border:1.5px dashed rgba(255,255,255,.42);
  border-radius:999px; pointer-events:none;
}
.btn--lg::after{ inset:6px; }
.btn:hover{
  transform:translateY(-2px);
  background:var(--blue-soft);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.34) inset,
    0 -2px 0 rgba(6,20,56,.30) inset,
    0 12px 26px -8px rgba(12,42,102,.6);
}
.btn:active{ transform:translateY(0) scale(.975); transition-duration:90ms; }
.btn:focus-visible{ outline:3px solid var(--star); outline-offset:3px; }
.btn--sm{ padding:.62em 1.2em; font-size:1rem; }
.btn--lg{ padding:.95em 2.3em; font-size:1.42rem; }

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:clamp(12px,2vw,28px);
  padding:.7rem clamp(14px,3.2vw,30px);
  margin:clamp(10px,1.6vw,18px);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  transition-property:transform,opacity,background,box-shadow;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.6), 0 10px 30px -14px rgba(12,32,78,.5);
  transform:translateY(calc(-100% - 24px));
  opacity:0;
  transition-duration:520ms,300ms,420ms,420ms;
  transition-timing-function:var(--e-out),linear,linear,linear;
  will-change:transform,opacity;
}
#nav.is-in{ transform:translateY(0); opacity:1; }
#nav.is-night{
  background:rgba(12,20,48,.54);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14), 0 10px 30px -14px rgba(0,0,0,.7);
}
#nav.is-night .nav__mark img{
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.5));
}
#nav.is-night .nav__links a{ color:rgba(226,235,255,.74); }
#nav.is-night .nav__links a:hover{ color:#fff; }

.nav__mark{
  display:inline-flex; align-items:center; flex:none;
  text-decoration:none;
  transition:transform var(--t-fast) var(--e-out);
  will-change:transform;
}
.nav__mark img{
  height:clamp(30px,3.2vw,40px); width:auto;
  filter:drop-shadow(0 1px 2px rgba(12,32,78,.28));
  transition:filter var(--t-fast) linear;
}
.nav__mark:hover{ transform:translateY(-1px) rotate(-1.4deg); }
.nav__mark:focus-visible{ outline:3px solid var(--star); outline-offset:4px; border-radius:10px; }
.nav__links{ display:flex; gap:clamp(10px,1.6vw,24px); margin-left:auto; }
.nav__links a{
  position:relative;
  font-weight:700; font-size:.92rem; text-decoration:none; color:var(--ink-soft);
  padding:.25em .1em;
  transition:color var(--t-fast) linear;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--star);
  transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--e-out);
}
.nav__links a:hover{ color:var(--blue-deep); }
.nav__links a:hover::after{ transform:scaleX(1); }
#nav .btn{ margin-left:0; }

@media (max-width:860px){
  .nav__links{ display:none; }
  #nav .btn{ margin-left:auto; }
}

/* ============================================================
   1. HERO
   ============================================================ */
#hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(100px,14vh,160px) var(--gut) clamp(90px,12vh,130px);
  overflow:clip;
}

.hero__props{ position:absolute; inset:0; pointer-events:none; }

/* ambient felt float, negative delays so they start mid flight */
.prop{
  position:absolute;
  will-change:transform;
  animation:float var(--dur,20s) ease-in-out var(--delay,0s) infinite;
  filter:drop-shadow(0 14px 10px rgba(14,34,82,.30)) drop-shadow(0 34px 44px rgba(14,34,82,.34));
}
@keyframes float{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%    { translate:0 calc(var(--amp,14px) * -1); rotate:var(--rot,5deg); }
}

.prop--star1  { width:clamp(62px,8vw,132px);  top:16%; left:8%; }
.prop--star2  { width:clamp(46px,5.6vw,94px);  top:68%; right:10%; }
.prop--star3  { width:clamp(34px,4vw,66px);    top:30%; right:20%; }
.prop--star4  { width:clamp(40px,4.8vw,80px);  bottom:16%; left:19%; }

.hero__stage::before{
  content:''; position:absolute; z-index:-1;
  left:50%; top:46%; translate:-50% -50%;
  width:min(1100px,118vw); aspect-ratio:1.55;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.80) 0%, rgba(255,255,255,.42) 38%, rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.hero__stage{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; width:100%;
}
.hero__wordmark{ margin:0; width:min(760px,88vw); }
.hero__wordmark img{ width:100%; filter:drop-shadow(0 26px 34px rgba(10,28,72,.32)); }

.hero__tagline{ margin:clamp(14px,2vh,26px) 0 0; width:min(500px,66vw); }
.hero__tagline img{ width:100%; filter:drop-shadow(0 14px 22px rgba(10,28,72,.26)); }

.hero__badge{
  margin-top:clamp(22px,3.4vh,40px);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.5em 1.1em;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 8px 22px -10px rgba(12,32,78,.5);
}
.badge__label{ font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.badge__mark{ width:34px; height:34px; fill:var(--ink); opacity:.9; }
.badge__name{ font-family:'Bebas Neue','Inter',sans-serif; font-weight:400; font-size:1.12rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

.hero__cue{
  position:absolute; left:50%; bottom:clamp(18px,3.4vh,38px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.35em;
  padding:.7em 1.2em .55em;
  border-radius:22px;
  background:rgba(255,255,255,.66);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7), 0 8px 22px -12px rgba(12,32,78,.6);
  font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-deep);
  transition:opacity 420ms linear;
}
.hero__cue svg{ animation:bob 2.6s var(--e-soft) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.hero__cue.is-gone{ opacity:0; }

/* ============================================================
   2. THE FLIGHT
   ============================================================ */
#flight{ position:relative; }
.launch{
  position:relative;
  height:100svh;
  overflow:clip;
}

.launch__streaks{ position:absolute; inset:-10% 0; pointer-events:none; }
.streak{
  position:absolute;
  width:2px; border-radius:2px;
  background:linear-gradient(to bottom, rgba(255,246,222,0), rgba(255,250,236,.98), rgba(255,246,222,0));
  box-shadow:0 0 7px rgba(255,238,198,.75);
  opacity:0;
  will-change:transform,opacity;
}

.launch__moon{
  position:absolute; width:clamp(130px,17vw,300px);
  top:52%; left:44%;
  opacity:0;
  filter:drop-shadow(0 24px 40px rgba(8,20,54,.4));
  will-change:transform,opacity;
}
.launch__planet{
  position:absolute; width:clamp(120px,17vw,300px);
  top:18%; right:6%;
  opacity:0;
  filter:drop-shadow(0 24px 40px rgba(8,20,54,.4));
  will-change:transform,opacity;
}

.launch__scrim{
  position:absolute; inset:auto 0 0; height:62%;
  background:linear-gradient(to top, rgba(5,10,28,.72) 0%, rgba(5,10,28,.34) 46%, rgba(5,10,28,0) 100%);
  opacity:0; pointer-events:none;
  will-change:opacity;
}
.launch__craft{
  position:absolute;
  left:60%; top:46%;
  width:clamp(170px,21vw,330px);
  will-change:transform;
}
.launch__craft img{
  width:100%;
  filter:drop-shadow(0 30px 44px rgba(8,20,54,.4));
  will-change:transform;
}
.launch__flame{
  position:absolute;
  right:-6%; bottom:2%;
  width:62%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,64,.85) 0%, rgba(232,69,44,.45) 36%, rgba(232,69,44,0) 70%);
  filter:blur(14px);
  transform:scale(.6);
  opacity:.5;
  will-change:transform,opacity;
}

.launch__beats{
  position:absolute; left:var(--gut); bottom:clamp(64px,12vh,124px);
  width:min(40ch,44vw);
  display:grid; place-items:start;
  pointer-events:none; z-index:3;
}
.beat{
  grid-area:1/1;
  text-align:left;
  opacity:0;
  will-change:transform,opacity,filter;
}
.beat__kicker{
  display:block;
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.21em; text-transform:uppercase;
  color:var(--star); margin-bottom:.7rem;
  text-shadow:0 2px 10px rgba(6,14,40,.5);
}
.beat__title{
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:clamp(2.6rem,6vw,4.4rem); line-height:.92; letter-spacing:.018em;
  text-transform:uppercase;
  margin:0 0 .5rem; color:#fff;
  text-shadow:0 3px 20px rgba(6,14,40,.55);
}
.beat__body{
  color:rgba(255,255,255,.88); font-weight:600; margin:0;
  text-shadow:0 2px 14px rgba(6,14,40,.6);
}

/* ============================================================
   3. HER STORY
   ============================================================ */
.story{
  display:grid; gap:clamp(36px,5vw,76px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:900px){ .story{ grid-template-columns:1fr; } }

.story__media{ position:relative; padding-bottom:clamp(40px,7vw,90px); }
.story__hero{
  width:min(100%,430px); margin-inline:auto;
  animation:float 13s ease-in-out -3s infinite;
  --amp:16px; --rot:3deg;
  filter:drop-shadow(0 26px 30px rgba(14,34,82,.22)) drop-shadow(0 60px 70px rgba(14,34,82,.26));
  will-change:transform,opacity;
}
.frame--inset{
  position:absolute; right:2%; bottom:0;
  width:clamp(130px,19vw,205px);
  padding:9px 9px 0;
  border-radius:18px;
}
.frame--inset::after{ inset:5px; border-radius:13px; }
.frame--inset img{ border-radius:11px; }
.frame--inset figcaption{ padding:.55em .3em .7em; font-size:.68rem; }
@media (max-width:520px){
  .frame--inset{ position:relative; right:auto; bottom:auto; margin:18px auto 0; width:min(200px,60%); }
  .story__media{ padding-bottom:0; }
}

/* felt photo frame with a stitched edge */
.frame{
  position:relative; margin:0;
  background:var(--cream);
  border-radius:26px;
  padding:14px 14px 0;
  box-shadow:var(--shadow-felt);
  will-change:transform,opacity,filter;
}
.frame::after{
  content:''; position:absolute; inset:7px;
  border:2px dashed rgba(22,66,155,.3);
  border-radius:19px; pointer-events:none;
}
.frame img{
  width:100%; border-radius:16px;
  filter:saturate(.92) contrast(1.04);
}
.frame figcaption{
  padding:.85em .4em 1em;
  font-size:.82rem; font-weight:700; text-align:center;
  color:var(--ink-soft);
}
.frame--quiet{ background:#FFFDF7; }
.frame--quiet::after{ border-color:rgba(22,35,63,.2); }
.frame--quiet img{ filter:saturate(.8) contrast(1.02); }

/* ============================================================
   4. DRIFT, the dark room
   ============================================================ */
#drift{
  position:relative;
  min-height:230svh;
  padding:0 var(--gut);
}
.drift__stars{ position:absolute; inset:0; pointer-events:none; }
.twinkle{
  position:absolute; border-radius:50%;
  background:#fff;
  opacity:0;
  animation:twinkle var(--dur,5s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:var(--lo,.22); scale:.85; }
  50%    { opacity:var(--hi,.8);  scale:1; }
}

.drift__stage{
  position:sticky; top:0;
  height:100svh;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  width:100%;
  padding-top:clamp(40px,6vh,72px);
  box-sizing:border-box;
}
.drift__dog{
  grid-area:1 / 2; justify-self:center;
  width:clamp(190px,25vw,400px);
  opacity:0;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
  will-change:transform,opacity;
}
.drift__words{
  grid-area:1 / 1; justify-self:end;
  z-index:2;
  text-align:left; max-width:21ch;
}
.drift__line{
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:clamp(1.9rem,4.1vw,3.3rem); line-height:1.02; letter-spacing:.02em;
  text-transform:uppercase;
  color:#F4F7FF; margin:0 0 .12em;
  opacity:0;
  text-shadow:0 4px 30px rgba(0,0,0,.7);
  will-change:transform,opacity,filter;
}
.drift__line:last-child{ color:var(--star-pale); }

/* ============================================================
   5. MEMORIAL
   ============================================================ */
.memorial__head{ max-width:62ch; margin-bottom:clamp(40px,6vh,72px); }

.memorial__grid{
  display:grid; gap:clamp(30px,4.5vw,64px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}
@media (max-width:880px){ .memorial__grid{ grid-template-columns:1fr; } }

.memorial__stone{ position:relative; display:grid; place-items:center; }
.memorial__stone > img:first-child{
  width:min(420px,96%);
  filter:drop-shadow(0 30px 40px rgba(16,35,80,.26));
  will-change:transform,opacity;
}
.memorial__rise{
  position:absolute; width:46px; top:4%; left:50%;
  margin-left:-23px;
  opacity:0;
  will-change:transform,opacity;
}

.quote{
  margin:clamp(56px,8vh,96px) auto 0;
  max-width:68ch; text-align:center;
  position:relative; padding:0 clamp(10px,3vw,40px);
}
.quote p{
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:clamp(1.14rem,2.1vw,1.58rem); line-height:1.42; letter-spacing:-.012em;
  color:var(--blue-deep); margin:0 0 1rem;
  text-wrap:balance;
}
.quote cite{
  font-style:normal; font-size:.82rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}


.band__props{ position:absolute; inset:0; pointer-events:none; overflow:clip; }
.band__props .prop{ opacity:.9; filter:drop-shadow(0 12px 14px rgba(14,34,82,.16)); }
@media (max-width:760px){
  /* on a narrow column the props have nowhere to sit but behind the copy, so hold them back */
  .band__props .prop{ opacity:.42; }
}

/* ============================================================
   6. REPRISE
   ============================================================ */
.reprise{ text-align:center; position:relative; }
#reprise{ padding-block:clamp(64px,8vh,104px) clamp(36px,4.5vh,58px); }
#buy{ padding-top:clamp(52px,6.5vh,86px); }
.reprise__star{
  width:clamp(58px,8vw,104px); margin:0 auto clamp(18px,3vh,30px);
  filter:drop-shadow(0 16px 24px rgba(16,35,80,.26));
  will-change:transform,opacity;
}

/* ============================================================
   7. HOW TO BUY
   ============================================================ */
.buy__head{ text-align:center; max-width:60ch; margin:0 auto clamp(44px,6vh,72px); }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.step{
  position:relative;
  background:#FFFDF7;
  border-radius:26px;
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px) clamp(24px,3vw,34px);
  box-shadow:var(--shadow-felt);
  will-change:transform,opacity;
  transition:transform 300ms var(--e-out), box-shadow 300ms var(--e-out);
}
.step::after{
  content:''; position:absolute; inset:9px;
  border:2px dashed rgba(22,66,155,.16);
  border-radius:18px; pointer-events:none;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 2px 4px rgba(16,35,80,.07),
    0 16px 32px -10px rgba(16,35,80,.24),
    0 40px 70px -36px rgba(16,35,80,.4);
}
.step__num{
  position:relative;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400; font-size:1.5rem; letter-spacing:.03em;
  margin-bottom:1rem;
  box-shadow:0 1.5px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(6,20,56,.3) inset, 0 8px 18px -8px rgba(12,42,102,.6);
}
.step__num::after{
  content:''; position:absolute; inset:3px;
  border:1.5px dashed rgba(255,255,255,.4);
  border-radius:50%; pointer-events:none;
}
.step h3{
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:clamp(1.7rem,2.6vw,2.1rem); line-height:1; letter-spacing:.025em;
  text-transform:uppercase;
  margin:0 0 .5em; color:var(--blue-deep);
}
.step p{ margin:0; }

.step__meta{ margin:1.35rem 0 0; display:grid; }
.step__meta > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  padding:.46em 0 .36em;
  border-top:1px solid rgba(22,66,155,.14);
}
.step__meta > div:last-child{ border-bottom:1px solid rgba(22,66,155,.14); }
.step__meta dt{
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.85;
}
.step__meta dd{
  margin:0;
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:1.08rem; line-height:1; letter-spacing:.035em; text-transform:uppercase;
  color:var(--blue-deep);
}

/* contract chip */
.ca{ text-align:center; margin-top:clamp(44px,6vh,72px); }
.ca__label{
  display:block; font-size:.74rem; font-weight:800;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.8rem;
}
.ca__chip{
  display:inline-flex; align-items:center; gap:.85em;
  max-width:100%;
  font:inherit; cursor:pointer;
  background:#FFFDF7; border:0;
  border-radius:999px;
  padding:.72em 1.1em .72em 1.4em;
  box-shadow:0 0 0 1.5px rgba(22,66,155,.16), 0 10px 26px -14px rgba(16,35,80,.6);
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.ca__chip:hover{ transform:translateY(-2px); box-shadow:0 0 0 1.5px rgba(22,66,155,.3), 0 16px 32px -14px rgba(16,35,80,.7); }
.ca__chip:active{ transform:translateY(0) scale(.985); transition-duration:90ms; }
.ca__chip:focus-visible{ outline:3px solid var(--star); outline-offset:3px; }
.ca__chip code{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  font-size:clamp(.74rem,1.5vw,.95rem);
  color:var(--blue-deep); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca__icons{ position:relative; display:grid; place-items:center; width:22px; height:22px; flex:none; color:var(--blue); }
.ca__ico{ grid-area:1/1; width:19px; height:19px; transition:opacity 180ms var(--e-out), transform 220ms var(--e-felt), filter 180ms var(--e-out); }
.ca__ico--done{ opacity:0; transform:scale(.6); filter:blur(3px); color:#18924F; }
.ca__chip.is-copied .ca__ico--copy{ opacity:0; transform:scale(.6); filter:blur(3px); }
.ca__chip.is-copied .ca__ico--done{ opacity:1; transform:scale(1); filter:blur(0); }
.ca__chip:disabled .ca__icons{ display:none; }
.ca__chip:disabled{ box-shadow:0 0 0 1.5px rgba(22,66,155,.12); }
.ca__note{ margin:1rem auto 0; max-width:44ch; font-size:.83rem; }

.buy__cta{ text-align:center; margin-top:clamp(36px,5vh,56px); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer{
  position:relative; z-index:2; overflow:clip;
  padding:clamp(60px,9vh,110px) 0 clamp(36px,5vh,56px);
  border-top:2px dashed rgba(22,35,63,.14);
}
.footer__inner{ position:relative; z-index:2; display:grid; gap:clamp(28px,3.4vw,48px); grid-template-columns:1fr auto; align-items:center; }
@media (max-width:760px){ .footer__inner{ grid-template-columns:1fr; } }

.footer__brand img{ width:min(230px,52vw); opacity:.95; }
.footer__brand p{ margin:1rem 0 0; font-size:.88rem; font-weight:700; }

.footer__social{ display:flex; gap:12px; flex-wrap:wrap; }
.social{
  display:inline-flex; align-items:center; gap:.6em;
  text-decoration:none;
  font-family:'Bebas Neue','Inter',sans-serif; font-weight:400;
  font-size:1.06rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-deep);
  background:#FFFDF7;
  border-radius:999px; padding:.7em 1.3em;
  box-shadow:0 0 0 1.5px rgba(22,66,155,.14), 0 8px 20px -12px rgba(16,35,80,.6);
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), color var(--t-fast) linear;
}
.social svg{ width:17px; height:17px; fill:currentColor; }
.social:hover{ transform:translateY(-2px); color:var(--blue); box-shadow:0 0 0 1.5px rgba(22,66,155,.3), 0 14px 28px -12px rgba(16,35,80,.7); }
.social:focus-visible{ outline:3px solid var(--star); outline-offset:3px; }

.footer__meta{ grid-column:1/-1; }
.footer__ca{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem; color:var(--ink-soft);
  background:rgba(255,255,255,.55);
  border-radius:999px; padding:.45em 1em;
  overflow-wrap:anywhere;
}
.footer__legal{ margin:1rem 0 0; font-size:.78rem; max-width:72ch; opacity:.85; }

@media (max-width:900px){
  .launch__beats{ left:var(--gut); right:var(--gut); width:auto; bottom:clamp(48px,9vh,90px); }
  .launch__craft{ left:50%; top:42%; width:clamp(150px,44vw,250px); }
  .launch__moon{ left:6%; width:clamp(110px,30vw,180px); }
  .drift__stage{ grid-template-columns:1fr; align-content:center; gap:clamp(14px,4vh,36px); }
  .drift__dog{ grid-area:1 / 1; width:clamp(170px,46vw,280px); }
  .drift__words{ grid-area:2 / 1; justify-self:center; text-align:center; max-width:20ch; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .prop,.twinkle{ animation:none !important; }
  .twinkle{ opacity:.5 !important; }
  .beat,.drift__line,.drift__dog,.launch__moon,.launch__planet,
  .memorial__rise,.frame,.step,.statement,.spec > div{ opacity:1 !important; }
  .hero__cue svg{ animation:none !important; }
  #nav{ transform:none; opacity:1; }
  /* the pinned launch stage is released in JS, these keep it readable */
  .launch__beats{ position:static; display:grid; gap:2.5rem; padding-block:3rem; }
  .beat{ grid-area:auto; }
  .launch__craft{ position:static; margin:0 auto; }
  .launch{ height:auto; }
}