/* ============================================================
   VIF — landing page
   Identity: ink black · signature coral (#FF6B7D) · warm ivory
   Type: Fraunces (editorial italic) · Instrument Sans · Space Mono
   ============================================================ */

:root{
  --ink:#08080A;
  --ink-2:#0d0d10;
  --coral:#FF6B7D;
  --coral-deep:#E85062;
  --violet:#9B82FF;
  --ivory:#F6F1EA;
  --ivory-dim:rgba(246,241,234,.62);
  --ivory-faint:rgba(246,241,234,.36);
  --hair:rgba(246,241,234,.14);
  --hair-soft:rgba(246,241,234,.08);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,80px);
  --gap:clamp(5rem,13vh,11rem);   /* vertical rhythm: every section (and every chapter) gets --gap top and bottom */
  --maxw:1400px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
canvas{display:block}
::selection{background:var(--coral);color:var(--ink)}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.02em;
}
.wordmark em{color:var(--coral);font-style:italic;position:relative}
.wordmark em::after{
  /* the signature dot on the i */
  content:"";
  position:absolute;left:.06em;top:-.12em;width:.16em;height:.16em;
  background:var(--coral);border-radius:50%;
}

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ivory-faint);
  margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.9em;
}
.eyebrow span{position:relative;padding-left:2.6em}
.eyebrow span::before{
  content:"";position:absolute;left:0;top:50%;width:2em;height:1px;
  background:var(--coral);transform:translateY(-50%);
}
.eyebrow.center{justify-content:center}
.eyebrow.center span{padding-left:0}
.eyebrow.center span::before{display:none}

em{font-style:italic}
.chapter__title em,.hero__title em,.spark__title em,.showcase__title em,
.safety__title em,.care__line em,.manifesto__text em{
  font-family:var(--serif);color:var(--coral);font-weight:300;
}

/* ---------- Buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--ivory);
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.98rem;font-weight:500;
  padding:.95em 1.6em;border-radius:100px;
  color:var(--fg);cursor:pointer;border:1px solid var(--hair);
  background:var(--bg);
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.btn--solid{--bg:var(--coral);--fg:var(--ink);border-color:transparent;font-weight:600}
.btn--solid:hover{background:#fff}
.btn--ghost{background:transparent}
.btn--ghost:hover{border-color:var(--ivory);background:rgba(246,241,234,.04)}
.btn--text{border:none;padding:.95em .2em;background:none}
.btn--text .arrow{transition:transform .45s var(--ease)}
.btn--text:hover .arrow{transform:translateX(6px)}

/* ---------- Grain + cursor ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,2%)}
  80%{transform:translate(4%,1%)}100%{transform:translate(0,0)}
}
.cursor{
  position:fixed;top:0;left:0;z-index:9999;width:34px;height:34px;
  border:1px solid var(--coral);border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s;
  mix-blend-mode:difference;opacity:0;
}
.cursor.is-active{width:64px;height:64px;background:rgba(255,107,125,.14)}
@media (hover:none){.cursor{display:none}}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.preloader__mark .wordmark{font-size:clamp(3rem,10vw,6rem)}
.preloader__bar{width:min(220px,50vw);height:1px;background:var(--hair)}
.preloader__bar span{display:block;height:100%;width:0;background:var(--coral)}
.preloader.is-done{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--pad);
  transition:padding .5s var(--ease),background .5s var(--ease),backdrop-filter .5s;
}
.nav.is-stuck{
  padding:.85rem var(--pad);
  background:rgba(8,8,10,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair-soft);
}
.nav__brand{font-size:1.7rem;z-index:2}
.nav__links{display:flex;gap:2.4rem}
.nav__links a{
  font-size:.95rem;color:var(--ivory-dim);position:relative;padding:.2em 0;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--coral);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{color:var(--ivory)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{padding:.6em 1.2em;font-size:.9rem}
@media (max-width:820px){.nav__links{display:none}.nav__cta{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem var(--pad) 6rem;overflow:hidden; /* top clears the fixed nav; bottom clears the scroll hint */
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 30%,transparent 40%,rgba(8,8,10,.75) 100%),
    linear-gradient(180deg,rgba(8,8,10,.5) 0%,transparent 22%,transparent 60%,var(--ink) 100%);
}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.hero__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(3.4rem,11vw,10.5rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:.1em 0 .55em;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title em{font-weight:300}
.hero__sub{
  max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.3rem);
  color:var(--ivory-dim);line-height:1.55;margin:0 0 2.4rem;
}
.hero__actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.hero__scroll{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivory-faint);
}
.hero__scroll-line{width:1px;height:56px;background:var(--hair);position:relative;overflow:hidden}
.hero__scroll-line i{position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--coral);animation:scrolldrop 2.2s var(--ease-in-out) infinite}
@keyframes scrolldrop{0%{top:-45%}60%,100%{top:120%}}
@media (max-height:740px){.hero__scroll{display:none}.hero{padding-bottom:3rem}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:var(--gap) var(--pad)}
.manifesto__wrap{max-width:1200px;margin:0 auto}
.manifesto__text{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2rem,5.2vw,4.6rem);
  line-height:1.18;letter-spacing:-.02em;margin:0;
}
.manifesto__text .w{
  display:inline-block;opacity:.14;
  transition:opacity .5s var(--ease),color .5s var(--ease);
}
.manifesto__text .w.coral{color:var(--coral)}
.manifesto__text .w.break{display:block;height:.4em;width:100%}
.manifesto__text .w em{font-family:var(--serif)}

/* ============================================================
   SPARK — two silhouettes, one glow between them
   ============================================================ */
.spark{position:relative}
.spark__pin{
  position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  padding:6rem var(--pad);overflow:hidden;
}
.spark__scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.spark__glow{
  position:absolute;inset:-12%;transform-origin:50% 58%;
  background:
    radial-gradient(34% 36% at 50% 68%,rgba(255,107,125,.6),rgba(255,107,125,0) 100%),
    radial-gradient(58% 62% at 50% 60%,rgba(155,130,255,.38),rgba(155,130,255,0) 100%);
  opacity:.95;transform:scale(1.1);will-change:transform,opacity;
}
/* cool, distant version of the glow — shown while the two are still far apart, crossfades to the warm one.
   The wide floor light at the bottom is what lets the black shadows read against the black page at the start. */
.spark__glow--cool{
  background:
    radial-gradient(36% 46% at 50% 58%,rgba(155,130,255,.5),rgba(155,130,255,0) 100%),
    radial-gradient(62% 72% at 50% 58%,rgba(70,60,140,.35),rgba(70,60,140,0) 100%),
    radial-gradient(95% 36% at 50% 100%,rgba(120,100,220,.26),rgba(120,100,220,0) 100%);
  opacity:0;
}
/* full-body figures at equal height, close to the camera: the floor crops them at the shins (heads stay clear of the nav) */
.spark__figure{position:absolute;bottom:-16%;height:calc(106% * var(--scale,1));aspect-ratio:var(--ar,600/1000);will-change:transform;transform-origin:50% 100%}
.spark__figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.spark__figure--a{left:clamp(1rem,50% - 46rem,10%)}
.spark__figure--b{right:clamp(1rem,50% - 46rem,10%)}
.spark__flare{
  position:absolute;left:50%;top:25%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;opacity:.6;transform:scale(.8);
  box-shadow:0 0 0 2px rgba(255,107,125,.9),0 0 30px 10px rgba(255,107,125,.8),0 0 110px 44px rgba(255,107,125,.35);
  will-change:transform,opacity;
}
.spark__flare::after{content:"";position:absolute;inset:-28px;border-radius:50%;border:1px solid rgba(255,107,125,.45)}
.is-lit .spark__flare::after{animation:sparkRing 2.8s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes sparkRing{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.9);opacity:0}}
/* ignition: a one-shot flash behind the figures + a burst of embers from the spark (time-based, fired by JS) */
.spark__flash{
  position:absolute;left:50%;top:25%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,228,232,.95),rgba(255,107,125,.4) 28%,rgba(255,107,125,0) 62%);
  opacity:0;pointer-events:none;will-change:opacity;
}
.spark__burst{position:absolute;left:50%;top:25%;width:0;height:0}
.spark__burst i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 8px 2px rgba(255,107,125,.85)}
/* the word "spark." ignites with the spark; step numbers light up as the story reaches them */
.spark__title em{transition:color .6s ease,text-shadow .6s ease}
.is-unlit .spark__title em{color:rgba(246,241,234,.62);text-shadow:none}
.is-lit .spark__title em{text-shadow:0 0 28px rgba(255,107,125,.55)}
.spark__steps li::before{transition:color .4s ease}
.spark__steps li.is-on::before{color:var(--coral)}
.spark__copy{position:relative;z-index:2;text-align:center;max-width:36rem;margin:clamp(40px,10vh,96px) auto 0}
.spark__copy::before{
  content:"";position:absolute;inset:-14% -18%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(8,8,10,.4),rgba(8,8,10,.18) 55%,transparent 78%);
}
.spark__title{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.03em;margin:.2em 0 .6em;
}
.spark__lead{color:var(--ivory);opacity:.85;font-size:1.12rem;margin:0 auto 1.8rem;max-width:34ch}
.spark__steps{list-style:none;margin:0 auto;padding:0;counter-reset:s;max-width:26rem;text-align:left}
.spark__steps li{
  position:relative;padding:1rem 0 1rem 3.2rem;border-top:1px solid var(--hair);
  font-size:1.05rem;color:var(--ivory);
}
.spark__steps li:last-child{border-bottom:1px solid var(--hair)}
.spark__steps li b{color:var(--coral);font-weight:600}
.spark__steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1.1rem;font-family:var(--mono);font-size:.8rem;color:var(--ivory-dim);
}
@media (max-width:900px){
  .spark{--fig:min(100vw,55svh)} /* figure height; the pin reserves .92 of it below the copy */
  .spark__pin{align-content:start;padding:5.5rem var(--pad) calc(var(--fig) * .92)}
  .spark__figure{height:calc(var(--fig) * var(--scale,1));bottom:calc(var(--fig) * -.1)}
  .spark__figure--a{left:-7%}
  .spark__figure--b{right:-7%}
  .spark__glow{inset:-20%;transform-origin:50% 66%}
  .spark__copy{margin-top:0}
  .spark__copy::before{inset:-10% -12%}
}
@media (max-width:420px){
  .spark__title{font-size:2.3rem}
  .spark__lead{font-size:1rem;margin-bottom:1.3rem}
  .spark__steps li{font-size:.98rem;padding:.75rem 0 .75rem 2.6rem}
  .spark__steps li::before{top:.85rem}
}

/* ============================================================
   CHAPTERS
   ============================================================ */
.chapters{padding:0}
.chapter{
  max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,6vw,7rem);row-gap:1.4rem;align-items:center;
}
/* index + body stack in the text column; visual fills the other, centered */
.chapter__index{grid-column:1;grid-row:1;align-self:end}
.chapter__body{grid-column:1;grid-row:2;align-self:start}
.chapter__visual{grid-column:2;grid-row:1 / span 2;align-self:center}
.chapter--reverse .chapter__index,
.chapter--reverse .chapter__body{grid-column:2}
.chapter--reverse .chapter__visual{grid-column:1;grid-row:1 / span 2}
.chapter__index{display:flex;align-items:center;gap:1rem}
.chapter__index .num{font-family:var(--mono);font-size:.85rem;color:var(--coral)}
.chapter__index .rule{width:clamp(30px,6vw,72px);height:1px;background:var(--hair)}
.chapter__index .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-faint)}
.chapter__title{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 1.2rem;
}
.chapter__text{color:var(--ivory-dim);font-size:1.15rem;max-width:40ch;margin:0}
.chapter__visual{position:relative;min-height:clamp(320px,42vw,560px)}

/* chips cloud */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;align-content:center}
.chip{
  font-family:var(--sans);font-size:clamp(.9rem,1.4vw,1.15rem);
  padding:.55em 1.05em;border-radius:100px;border:1px solid var(--hair);
  color:var(--ivory-dim);white-space:nowrap;background:rgba(246,241,234,.02);
  will-change:transform,opacity;
}
.chip.on{background:var(--coral);color:var(--ink);border-color:transparent;font-weight:500}

/* voice */
.voice{display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.voice__card{
  display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;
  border:1px solid var(--hair);border-radius:22px;background:var(--ink-2);max-width:420px;
}
.voice__play{width:52px;height:52px;flex:none;border-radius:50%;background:var(--coral);display:grid;place-items:center;cursor:pointer}
.voice__play i{width:0;height:0;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;transition:opacity .3s}
.voice__play.playing i{border:none;width:12px;height:14px;border-left:4px solid var(--ink);border-right:4px solid var(--ink);margin:0}
.voice__wave{flex:1;display:flex;align-items:center;gap:3px;height:40px}
.voice__wave span{flex:1;background:var(--ivory-faint);border-radius:2px;height:20%;transition:background .3s}
.voice__wave span.hot{background:var(--coral)}
.voice__time{font-family:var(--mono);font-size:.8rem;color:var(--ivory-faint)}
.voice__prompt{padding-left:.3rem;max-width:420px}
.voice__q{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:.4rem}
.voice__a{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ivory)}

/* deck */
.deck{perspective:1400px}
.pcard{
  position:absolute;left:50%;top:50%;width:min(70%,300px);aspect-ratio:3/4;
  border-radius:22px;overflow:hidden;border:1px solid var(--hair);background:var(--ink-2);
  transform:translate(-50%,-50%) translateY(calc(var(--i)*14px)) scale(calc(1 - var(--i)*.05));
  box-shadow:0 30px 80px rgba(0,0,0,.5);will-change:transform;
  padding:1.1rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;
}
.pcard__ph{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 30% 20%,rgba(255,107,125,.28),transparent 60%),
  linear-gradient(180deg,#1a1a20,#0c0c10);}
.pcard__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.85));}
.pcard__name{position:relative;font-weight:600;font-size:1.05rem}
.pcard__tag{position:relative;font-family:var(--mono);font-size:.72rem;color:var(--coral);letter-spacing:.08em}

@media (max-width:820px){
  .chapter{grid-template-columns:1fr;row-gap:2rem}
  .chapter__index,.chapter__body,.chapter__visual,
  .chapter--reverse .chapter__index,.chapter--reverse .chapter__body,.chapter--reverse .chapter__visual{
    grid-column:1;grid-row:auto;align-self:auto
  }
  .chapter__visual{min-height:340px}
}

/* ============================================================
   DEVICE SHOWCASE
   ============================================================ */
.showcase{position:relative;background:linear-gradient(180deg,var(--ink),#050506 40%,var(--ink))}
.showcase__pin{
  min-height:100svh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--pad);padding:0 var(--pad);position:relative;overflow:hidden;
}
.showcase__head{max-width:26rem}
.showcase__title{font-family:var(--serif);font-weight:340;font-size:clamp(2.6rem,6vw,5.2rem);line-height:1;letter-spacing:-.03em;margin:.3em 0 0}
.showcase__labels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.2rem}
.showcase__labels li{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.2rem);
  color:var(--ivory-faint);cursor:default;transition:color .4s var(--ease),transform .5s var(--ease);
  transform:translateX(0);
}
.showcase__labels li.is-active{color:var(--coral);transform:translateX(12px)}

/* phone */
.phone{position:relative;justify-self:center;width:clamp(260px,26vw,330px);aspect-ratio:896/2014} /* = the app screenshots' display area */
.phone__frame{
  position:absolute;inset:0;border-radius:44px;background:#050506;
  border:1px solid rgba(246,241,234,.16);
  box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 0 0 8px #0b0b0e;
  overflow:hidden;
}
.phone__glow{position:absolute;inset:-18% -26%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,107,125,.2),rgba(255,107,125,.08) 45%,transparent 72%)} /* no filter: Safari can paint blurred layers inside pinned (fixed) elements at a stale position, which looks like a second phone */
.phone__screens{position:absolute;inset:8px;border-radius:38px;overflow:hidden;background:var(--ink)}

.screen{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.screen.is-active{opacity:1;transform:scale(1)}
.screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;user-select:none;-webkit-user-drag:none}

@media (max-width:900px){
  .showcase__pin{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.6rem;padding:5.5rem var(--pad) 3rem}
  .phone{width:max(220px,min(clamp(240px,26vw,330px),calc((100svh - 22rem) * .445)))} /* fit one viewport (title + phone + labels) but never below 220px; if that doesn't fit, JS skips the pin */
  .showcase__head{max-width:34rem}
  .showcase__labels{flex-direction:row;gap:1.4rem}
  .showcase__labels li.is-active{transform:translateY(-4px)}
}

/* ============================================================
   THE GAME — Perception · Connection · Reflection
   ============================================================ */
.game{max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--pad)}
.game__head{max-width:46ch;margin:0 auto clamp(3rem,6vw,5rem);text-align:center}
.game__title{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.6rem,6.5vw,5rem);line-height:1;letter-spacing:-.03em;margin:0 0 1.2rem;
}
.game__lead{color:var(--ivory-dim);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;margin:0}
.game__lead em{color:var(--coral);font-style:italic}
.game__die{
  width:58px;height:58px;margin:2.6rem auto 0;padding:10px;
  border:1.5px solid var(--coral);border-radius:15px;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  box-shadow:0 12px 40px -12px rgba(255,107,125,.5);
  animation:diefloat 5s var(--ease-in-out) infinite;
}
.game__die span{width:8px;height:8px;border-radius:50%;background:var(--coral);align-self:center;justify-self:center}
.game__die span:nth-child(1){grid-area:1/1}
.game__die span:nth-child(2){grid-area:1/3}
.game__die span:nth-child(3){grid-area:2/2}
.game__die span:nth-child(4){grid-area:3/1}
.game__die span:nth-child(5){grid-area:3/3}
@keyframes diefloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(7deg)}}

/* three level tiers as alternating editorial rows (the site's chapter rhythm) */
.game__tiers{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(3rem,6vw,5.5rem)}
.tier{--accent:var(--coral);
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:1.6rem;align-items:center}
.tier--l1{--accent:var(--violet)}
.tier--l2{--accent:var(--coral)}
.tier--l3{--accent:var(--coral-deep)}
.tier__label{grid-column:1;grid-row:1}
/* one fanned deck per tier: the three cards share a cell; --i is the depth (0 = top card, set by JS) */
.tier__deck{grid-column:2;grid-row:1;display:grid;padding-top:22px}
.tier__deck .flip{grid-area:1/1;transform-origin:50% 100%;
  transform:translate(calc(var(--i,0) * 7px),calc(var(--i,0) * -10px)) rotate(calc(var(--i,0) * -1.4deg)) scale(calc(1 - var(--i,0) * .025));
  z-index:calc(10 - var(--i,0));filter:brightness(calc(1 - var(--i,0) * .17));
  transition:transform .5s var(--ease),opacity .5s var(--ease),filter .5s var(--ease)}
.tier__deck .flip:not(.is-top){pointer-events:none}
.tier__deck .flip.is-dealt{transform:translate(0,44px) scale(.96);opacity:0}   /* dealt card drops away, then reappears at the back */
.flip.no-anim .flip__inner{transition:none}
.tier--l2{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)} /* mirrored row: keep the deck in the wide column so all cards match */
.tier--l2 .tier__label{grid-column:2}
.tier--l2 .tier__deck{grid-column:1;grid-row:1}
.tier__index{display:flex;align-items:center;gap:1rem;margin:0 0 .9rem}
.tier__index .num{font-family:var(--mono);font-size:.85rem;color:var(--accent)}
.tier__index .rule{flex:0 0 auto;width:clamp(30px,6vw,72px);height:1px;background:var(--accent);opacity:.55}
.tier__index .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-faint)}
.tier__name{font-family:var(--serif);font-style:italic;font-weight:340;
  font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--ivory);margin:0 0 1rem}
.tier__note{display:flex;align-items:center;gap:.7em;margin:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-faint)}
.tier__note::before{content:"";flex:0 0 auto;width:1.6em;height:1px;background:currentColor;opacity:.55}
.tier--l2 .tier__note,.tier--l3 .tier__note{color:var(--accent);opacity:.9}
.tier__deck .flip{aspect-ratio:3/1}

/* flip cards — tap to reveal a prompt */
.flip{
  --accent:var(--coral);
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  perspective:1100px;aspect-ratio:3/2;
}
.flip--l1{--accent:var(--violet)}
.flip--l2{--accent:var(--coral)}
.flip--l3{--accent:var(--coral-deep)}
.flip:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:18px}
.flip__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.2rem 1.1rem;text-align:center;overflow:hidden;
  transition:transform .3s var(--ease);
}

/* FRONT — the solid, brand-coloured level side */
.flip__front{color:#fff;
  background:radial-gradient(120% 85% at 50% -14%,rgba(255,255,255,.18),transparent 62%),var(--accent)}
.flip__lvl{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.flip__tag{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1;color:#fff}
.flip__cue{display:inline-flex;align-items:center;gap:.5em;margin-top:.15rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.flip__cue::after{content:"⤾";font-size:1.15em;letter-spacing:0}
.flip.is-top:hover .flip__front{transform:translateY(-4px)}

/* BACK — the prompt, in the site's serif "voice" on the dark surface */
.flip__back{transform:rotateY(180deg);background:var(--ink-2);
  border:1px solid var(--hair-soft);border-top:2px solid var(--accent)}
.flip__back p{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.4;color:var(--ivory);margin:0}
.flip__back::after{content:"tap again · next card";position:absolute;bottom:.8rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);opacity:.8}

@media (max-width:760px){
  .tier{grid-template-columns:1fr;row-gap:1.4rem}
  .tier__label,.tier--l2 .tier__label{grid-column:1;grid-row:1}
  .tier__deck,.tier--l2 .tier__deck{grid-column:1;grid-row:2}
  .tier__deck .flip{aspect-ratio:5/2}
}
@media (prefers-reduced-motion:reduce){ .flip__inner{transition:none} }

/* ============================================================
   SAFETY
   ============================================================ */
.safety{max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--pad)}
.safety__head{margin-bottom:clamp(3rem,7vw,6rem);max-width:24ch}
.safety__title{font-family:var(--serif);font-weight:340;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.04;letter-spacing:-.03em;margin:0}
.safety__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.safety__item--wide{grid-column:1/-1}
.safety__item--wide p{max-width:56ch}
.safety__item p em{color:var(--coral);font-style:normal;font-weight:500}
.safety__item{
  display:flex;gap:1.6rem;align-items:flex-start;padding:2.4rem 2rem;
  border-top:1px solid var(--hair);
}
.safety__item:nth-child(odd){border-right:1px solid var(--hair)}
.safety__n{
  font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--coral);
  flex:none;width:2.4ch;line-height:1;
}
.safety__item h4{margin:.1rem 0 .5rem;font-size:1.25rem;font-weight:600;font-family:var(--sans)}
.safety__item p{margin:0;color:var(--ivory-dim);font-size:1rem}
@media (max-width:720px){
  .safety__list{grid-template-columns:1fr}
  .safety__item:nth-child(odd){border-right:none}
}

/* ============================================================
   JOIN
   ============================================================ */
.care{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--gap) var(--pad);overflow:hidden;
}
.care__inner{position:relative;z-index:2;max-width:760px;width:100%}
.care__mark{font-size:clamp(4.5rem,16vw,11rem);line-height:.9;display:block;margin:.42em 0 .1em} /* top margin clears the dot on the i, which rides ~.27em above the line box */
.care__line{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2.3rem);color:var(--ivory);margin:0 auto 2.2rem;max-width:22ch}
.care__form{display:grid;gap:.7rem;max-width:560px;margin:0 auto;text-align:left}
.care__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.care__form input,.care__form select,.care__form textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--hair);border-radius:18px;padding:.95em 1.2em;
  color:var(--ivory);font-family:var(--sans);font-size:1rem;line-height:1.4;transition:border-color .3s var(--ease);
}
.care__form input,.care__form select{border-radius:100px}
.care__form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.8em;
  background-image:linear-gradient(45deg,transparent 50%,var(--ivory-dim) 50%),linear-gradient(135deg,var(--ivory-dim) 50%,transparent 50%);
  background-position:calc(100% - 1.45em) 50%,calc(100% - 1.05em) 50%;background-size:.4em .4em;background-repeat:no-repeat}
.care__form textarea{resize:vertical;min-height:7.5em}
.care__form ::placeholder{color:var(--ivory-faint)}
.care__form :is(input,select,textarea):focus{outline:none;border-color:var(--coral)}
.care__form .is-invalid{border-color:var(--coral-deep)}
.care__form button{justify-self:center;margin-top:.4rem}
.care__form button[disabled]{opacity:.6;cursor:progress}
.care__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.care__note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ivory-faint);margin:1.6rem auto 0;max-width:46ch;line-height:1.6}
.care__note a{color:var(--ivory-dim);text-decoration:underline;text-underline-offset:.2em}
.care__note.ok{color:var(--coral)}
.care__note.err{color:var(--coral-deep)}
@media (max-width:520px){.care__row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--pad) 2.4rem;
  display:grid;grid-template-columns:1.4fr 2fr;gap:3rem;
}
.footer__brand .wordmark{font-size:2.4rem}
.footer__brand p{color:var(--ivory-faint);font-family:var(--serif);font-style:italic;margin:.6rem 0 0}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.footer__cols h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-faint);margin:0 0 1.1rem;font-weight:400}
.footer__cols a[href="#"]{opacity:.55;pointer-events:none} /* social placeholders until the real URLs are in */
.footer__cols a{display:block;color:var(--ivory-dim);font-size:.95rem;padding:.32rem 0;transition:color .3s var(--ease)}
.footer__cols a:hover{color:var(--coral)}
.footer__base{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--hair);margin-top:2rem;padding-top:1.6rem;
  font-family:var(--mono);font-size:.72rem;color:var(--ivory-faint);letter-spacing:.05em;flex-wrap:wrap;gap:1rem;
}
@media (max-width:720px){
  .footer{grid-template-columns:1fr;gap:2.4rem}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   REVEAL / MOTION UTILITIES
   ============================================================ */
[data-hero]{opacity:0;transform:translateY(26px)}
.chapter__title,.chapter__text,.chapter__index,
.spark__title,.spark__lead,.spark__steps li,
.safety__title,.safety__head .eyebrow{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-hero]{opacity:1;transform:none}
  .manifesto__text .w{opacity:1}
  .cursor,.grain{display:none}
}