/* ==========================================================================
   BRUTAL MAGIC
   Dark-fantasy promotional site. Mobile-first, no dependencies.
   Palette is sampled from the official logo: arcane violet, frost blue, ember.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{ font-family:"Cinzel"; src:url("../assets/fonts/cinzel-500-900.woff2") format("woff2"); font-weight:500 900; font-display:swap; }
@font-face{ font-family:"Barlow Condensed"; src:url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Barlow Condensed"; src:url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Barlow Condensed"; src:url("../assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-400-600.woff2") format("woff2"); font-weight:400 600; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  /* base */
  --void:      #0a0a10;
  --obsidian:  #0f0e17;
  --ash:       #16151f;
  --smoke:     #201e2c;
  --edge:      #2d2a3c;

  /* type */
  --bone:      #eeebf4;
  --mist:      #b3aec4;
  --dim:       #908aa3;

  /* logo colours */
  --ember:     #f26a1b;
  --ember-lo:  #ffa35c;
  --ember-ink: #1a0b03;
  --arcane:    #9b6bff;
  --arcane-lo: #cdb2ff;
  --frost:     #5d8fef;
  --frost-lo:  #a9c6f5;

  --f-display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --f-ui:      "Barlow Condensed", "Oswald", "Helvetica Neue", sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --rhythm:    clamp(4.5rem, 10vw, 8.5rem);
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --maxw:      1240px;
  --nav-h:     6.25rem;

  --ease:      cubic-bezier(.16,.84,.44,1);
  --ease-out:  cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem); color-scheme:dark; scrollbar-color:var(--edge) var(--void); }
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ display:block; max-width:100%; }
/* the hidden attribute must win over component display rules (e.g. .field is a grid) */
[hidden]{ display:none !important; }
h1,h2,h3{ margin:0; line-height:1.1; font-weight:700; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--arcane); color:#fff; }
:focus-visible{ outline:2px solid var(--ember-lo); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:1rem; z-index:300;
  background:var(--ember); color:var(--ember-ink); padding:.75rem 1.25rem; font-weight:600;
  font-family:var(--f-ui); text-transform:uppercase; letter-spacing:.08em;
}
.skip-link:focus{ top:1rem; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:900px; }
.section{ padding-block:var(--rhythm); position:relative; }
.section--tint{ background:var(--obsidian); border-block:1px solid var(--edge); }

/* ---------- Shared type ---------- */
.sec-title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem);
  letter-spacing:-.01em; text-transform:uppercase;
}
.sec-title em{ font-style:normal; color:var(--arcane-lo); }
.sec-lede{
  margin-top:1.4rem; max-width:58ch; color:var(--mist);
  font-size:clamp(1.02rem, .98rem + .3vw, 1.2rem);
}
.sec-head{ margin-bottom:clamp(2.5rem, 6vw, 4rem); }
.textlink{
  color:var(--bone); border-bottom:1px solid var(--ember);
  transition:color .25s, border-color .25s;
}
.textlink:hover{ color:var(--ember-lo); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-ui); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.98rem; line-height:1.2;
  padding:.9rem 1.8rem; border:1px solid var(--edge); background:transparent;
  transition:transform .3s var(--ease), border-color .3s, color .3s, background-color .3s, box-shadow .3s;
}
.btn--lg{ padding:1.1rem 2.4rem; font-size:1.06rem; }
.btn--sm{ padding:.6rem 1.05rem; font-size:.86rem; letter-spacing:.1em; }
.btn--primary{
  border-color:var(--ember); color:var(--ember-ink);
  background:linear-gradient(120deg, var(--ember-lo) -30%, var(--ember) 45%, #e0560c);
  box-shadow:0 10px 30px -14px rgba(242,106,27,.9);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(242,106,27,1); }
.btn--ghost{ color:var(--bone); background:rgba(10,10,16,.35); }
.btn--ghost:hover{ border-color:var(--arcane-lo); transform:translateY(-2px); }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.btn--pulse{ animation:beckon 2.8s var(--ease) infinite; }
@keyframes beckon{
  0%,100%{ box-shadow:0 10px 30px -14px rgba(242,106,27,.9), 0 0 0 0 rgba(242,106,27,.45); }
  65%    { box-shadow:0 10px 30px -14px rgba(242,106,27,.9), 0 0 0 14px rgba(242,106,27,0); }
}
.i{ width:1.15em; height:1.15em; flex-shrink:0; fill:currentColor; }

/* ==========================================================================
   NAV: centered logo, links split either side
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s;
}
.nav.is-stuck,
.nav--solid{
  background:rgba(10,10,16,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--edge);
}
.nav__inner{
  max-width:1360px; margin-inline:auto; padding:.5rem var(--gutter);
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.nav__brand{ display:block; justify-self:center; }
.nav__brand img{
  height:4.2rem; width:auto;
  transition:transform .4s var(--ease-out);
}
.nav.is-stuck .nav__brand img{ transform:scale(.8); }

.nav__side{ display:none; align-items:center; gap:clamp(1.25rem, 2.4vw, 2.25rem); }
.nav__side a:not(.btn){
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:.95rem; color:var(--mist); position:relative; padding-block:.4rem;
  transition:color .25s;
}
.nav__side a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav__side a:not(.btn):hover{ color:var(--bone); }
.nav__side a:not(.btn):hover::after,
.nav__side a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__side a[aria-current="page"]{ color:var(--bone); }
.nav__side--left{ justify-content:flex-end; }
.nav__social{ display:flex; gap:1.1rem; margin-right:auto; }
.nav__social a{ color:var(--dim); transition:color .25s; padding:.35rem; }
.nav__social a:hover{ color:var(--bone); }
.nav__side .nav__social a::after{ display:none; }
.nav__social .i{ width:1.1rem; height:1.1rem; }
.nav__side--right .btn{ margin-left:auto; }

.nav__toggle{
  justify-self:start; width:44px; height:44px; display:grid; place-content:center; gap:5px;
}
.nav__toggle span{
  display:block; width:24px; height:2px; background:var(--bone);
  transition:transform .3s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__mobile-cta{ justify-self:end; }

.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--ember), var(--arcane), var(--frost));
  transform:scaleX(0); transform-origin:left;
}

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  padding:6rem var(--gutter) 3rem;
  background:rgba(10,10,16,.97); backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s;
}
.menu.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.menu > a:not(.btn){
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:1.9rem; color:var(--mist);
}
.menu > a[aria-current="page"]{ color:var(--bone); }
.menu .btn{ margin-top:.75rem; }
.menu__social{ display:flex; gap:1.75rem; margin-top:1rem; }
.menu__social a{ color:var(--mist); padding:.4rem; }
.menu__social .i{ width:1.4rem; height:1.4rem; }

@media (min-width:1100px){
  .nav__side{ display:flex; }
  .nav__toggle,
  .nav__mobile-cta,
  .menu{ display:none; }
  .nav__brand img{ height:4rem; }
  .nav__side--left{ padding-right:1.25rem; }
  .nav__side--right{ padding-left:1.25rem; }
}
@media (max-width:1099px){
  :root{ --nav-h:5rem; }
  .nav__brand img{ height:3.3rem; }
}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 4.5rem; text-align:center; overflow:hidden;
  /* tinted toward the capsule art: slate sky behind it, maroon stone either side,
     so the faded edges of the image land on matching colour */
  background:
    radial-gradient(60% 46% at 50% 30%, rgba(52,66,90,.55) 0%, transparent 72%),
    radial-gradient(38% 42% at 14% 40%, rgba(88,44,42,.34) 0%, transparent 72%),
    radial-gradient(38% 42% at 86% 40%, rgba(88,38,40,.34) 0%, transparent 72%),
    radial-gradient(90% 70% at 12% 95%, rgba(155,107,255,.12) 0%, transparent 60%),
    radial-gradient(80% 60% at 90% 90%, rgba(242,106,27,.08) 0%, transparent 60%),
    linear-gradient(180deg, #16151f 0%, var(--void) 100%);
}
.hero__embers{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
/* fade the hero's glow into the page so it never ends on a hard line */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:7rem; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--void));
}
.hero__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.3;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero__sigil{
  position:absolute; z-index:0; width:min(125vw, 920px); aspect-ratio:1;
  top:46%; left:50%; translate:-50% -50%; opacity:.45;
}
.runes{ width:100%; height:100%; animation:spin 140s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__content{ position:relative; z-index:3; max-width:60rem; display:grid; justify-items:center; }
.hero__art{ margin:0; }
.hero__art img{
  display:block; width:min(64rem, 100vw); height:auto;
  --fade-x:18%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 58%, transparent 97%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 58%, transparent 97%);
          mask-composite:intersect;
}
/* the tagline tucks into the fully faded bottom, never over visible art */
.hero__art{ margin:0 0 -2rem; }
@media (max-width:700px){
  /* narrow screens keep more of the columns and don't overlap at all */
  .hero__art img{ --fade-x:7%; }
  .hero__art{ margin-bottom:.25rem; }
}
.hero__tag{
  margin-top:1.25rem;
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(1rem, .9rem + .45vw, 1.25rem); color:var(--bone);
  padding-bottom:1.1rem; border-bottom:1px solid var(--edge);
}
.hero__lede{ margin-top:1.1rem; color:var(--mist); max-width:46ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.1rem; }
.socials{
  list-style:none; margin:1.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.75rem;
}
.socials a{
  display:inline-flex; align-items:center; gap:.5rem; padding-block:.35rem;
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.9rem; color:var(--mist); transition:color .25s;
}
.socials a:hover{ color:var(--bone); }
.socials .i{ width:1.05rem; height:1.05rem; }

.countdown{ margin-top:2.75rem; }
.countdown__label{
  /* not uppercased: the full date is too long to read in tracked caps */
  font-family:var(--f-ui); font-weight:600; letter-spacing:.02em;
  font-size:1.05rem; color:var(--mist); margin-bottom:.8rem;
}
.countdown__grid{ display:flex; gap:clamp(1.25rem, 4vw, 2.75rem); justify-content:center; }
.cd{ display:flex; flex-direction:column; align-items:center; min-width:3.5rem; }
.cd__n{
  font-family:var(--f-display); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height:1.3; color:var(--bone);
}
.cd__l{
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; color:var(--dim); margin-top:.2rem;
}

/* ---------- 404 ---------- */
.hero--404{ min-height:min(100svh, 46rem); }
.lost__code{
  font-family:var(--f-ui); font-weight:700; letter-spacing:.3em;
  color:var(--ember); font-size:1.1rem; margin-bottom:.75rem;
}
.lost__title{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height:1.1;
}
.hero--404 .hero__lede{ margin-top:1.1rem; }

/* ==========================================================================
   INNER PAGE HEADER
   ========================================================================== */
.page-head{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(242,106,27,.1) 0%, transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(155,107,255,.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--obsidian), var(--void));
  border-bottom:1px solid var(--edge);
}
.page-head .sec-title{ font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem); }

/* ==========================================================================
   TRAILER FRAME (swap the <a> for an <iframe> or <video> when a trailer is embeddable)
   ========================================================================== */
.reel{ max-width:1080px; margin-inline:auto; }
.reel__frame{
  position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden;
  border:1px solid var(--edge); background:var(--obsidian);
}
.reel__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000;
}
.reel__video[controls]{ object-fit:contain; }
.reel__sound{
  position:absolute; right:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem;
  font-family:var(--f-ui); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;
  color:var(--bone); background:rgba(10,10,16,.72); border:1px solid var(--edge);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .25s, background-color .25s;
}
.reel__sound:hover{ border-color:var(--ember-lo); }
.reel__sound[aria-pressed="true"]{ border-color:var(--ember); }

/* ==========================================================================
   FEATURE ROWS (image + text, alternating)
   ========================================================================== */
.features{ display:grid; gap:clamp(4rem, 9vw, 7rem); }
.feature{ display:grid; gap:clamp(1.75rem, 4vw, 4rem); align-items:center; }
@media (min-width:900px){
  .feature{ grid-template-columns:1.12fr .88fr; }
  .feature--flip .feature__media{ order:2; }
}
.feature__media{ margin:0; position:relative; overflow:hidden; border:1px solid var(--edge); }
.feature__media img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; transition:transform .8s var(--ease); }
.feature__media:hover img{ transform:scale(1.03); }
.feature h2{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom:1.1rem;
}
.feature p{ color:var(--mist); max-width:48ch; }
.feature p + p{ margin-top:1rem; }
.feature strong{ color:var(--bone); font-weight:600; }
.feature__more{ margin-top:1.5rem; }

/* ==========================================================================
   WAYS TO PLAY, DETAILS, SPECS
   ========================================================================== */
/* Game modes: heading, one line, then hairline rows in the navbar lettering */
.modes{ margin-top:clamp(3.5rem, 8vw, 5.5rem); }
.modes__title{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.9rem, 1.4rem + 2vw, 3rem);
}
.modes__lede{ margin-top:.6rem; color:var(--mist); }
.modes__rows{
  list-style:none; padding:0; margin:1.75rem 0 0;
  display:grid; grid-template-columns:1fr; column-gap:2.5rem;
  border-top:1px solid var(--edge);
}
.modes__rows li{
  padding:.95rem 0; border-bottom:1px solid var(--edge);
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  font-size:1.05rem; color:var(--bone);
}
/* same lettering as the name, only dimmer */
.modes__rows li span{ color:var(--dim); }
@media (min-width:700px){ .modes__rows{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .modes__rows{ grid-template-columns:repeat(3, 1fr); } }

.details{ border:1px solid var(--edge); margin:0; }
.details > div{ display:grid; gap:.2rem 2rem; padding:1rem 1.25rem; border-bottom:1px solid var(--edge); }
.details > div:last-child{ border-bottom:0; }
.details dt{ font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.9rem; color:var(--mist); }
.details dd{ margin:0; color:var(--bone); }
@media (min-width:640px){ .details > div{ grid-template-columns:11rem 1fr; align-items:baseline; } }

.split{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); }
@media (min-width:960px){ .split{ grid-template-columns:1fr 1fr; align-items:start; } }
.split h2{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom:1.5rem; }

.specs__tabs{ display:flex; gap:.5rem; margin-bottom:1.5rem; }
.specs__tab{
  padding:.7rem 1.4rem; border:1px solid var(--edge); background:var(--ash);
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.92rem; color:var(--mist); transition:background-color .3s, border-color .3s, color .3s;
}
.specs__tab:hover{ color:var(--bone); }
.specs__tab[aria-selected="true"]{ background:var(--ember); border-color:var(--ember); color:var(--ember-ink); }
.specs__table{ border:1px solid var(--edge); }
.specs__table th,
.specs__table td{ padding:1rem 1.25rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--edge); }
.specs__table tr:last-child th,
.specs__table tr:last-child td{ border-bottom:0; }
.specs__table th{
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.9rem; color:var(--mist); width:34%; background:var(--ash);
}
.specs__note{ margin-top:1.25rem; color:var(--dim); font-size:.92rem; }

/* ==========================================================================
   MEDIA: gallery + lightbox
   ========================================================================== */
/* 8 screenshots: 2 columns x 4 rows on wider screens, no gaps or orphans */
.gallery{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:700px){ .gallery{ grid-template-columns:repeat(2, 1fr); } }
.gallery__item{ margin:0; }
.gallery__open{ display:block; width:100%; position:relative; overflow:hidden; border:1px solid var(--edge); background:var(--obsidian); }
.gallery__open img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; transition:transform .7s var(--ease), filter .4s; }
.gallery__open:hover img{ transform:scale(1.04); filter:brightness(1.08); }

.lightbox{
  width:min(96vw, 1600px); max-width:none; max-height:none; padding:0; border:0;
  background:transparent; color:var(--bone);
}
.lightbox::backdrop{ background:rgba(5,5,9,.92); backdrop-filter:blur(6px); }
.lightbox img{ width:100%; max-height:84vh; object-fit:contain; margin-inline:auto; }
.lightbox__bar{ display:flex; justify-content:flex-end; align-items:center; gap:1rem; margin-top:.75rem; }

/* ==========================================================================
   PROSE (privacy)
   ========================================================================== */
.prose h2{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  margin:2.5rem 0 .75rem;
}
.prose h2:first-of-type{ margin-top:0; }
.prose p{ color:var(--mist); }
.prose p + p{ margin-top:.9rem; }
.prose strong{ color:var(--bone); font-weight:600; }
.prose ul{ margin:.9rem 0 0; padding-left:1.25rem; list-style:disc; color:var(--mist); }
.prose li{ margin-bottom:.45rem; }
.prose__note{
  border-left:2px solid var(--ember); padding:.75rem 0 .75rem 1rem;
  background:rgba(242,106,27,.06); color:var(--mist);
}

/* ==========================================================================
   Press kit
   ========================================================================== */
.press__grab{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:2rem; }
.press__grab-note{ color:var(--dim); font-size:.95rem; }
.press__row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }

.copyblock{ border:1px solid var(--edge); background:var(--ash); margin-bottom:1rem; }
.copyblock__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--edge);
}
.copyblock__head h3{
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.85rem; color:var(--mist); margin:0;
}
.copyblock__body{ padding:1rem; color:var(--mist); font-size:.98rem; }
.copyblock__body p + p{ margin-top:.75rem; }

.dl-list{ display:grid; gap:.75rem; grid-template-columns:1fr; list-style:none; padding:0; margin:0; }
@media (min-width:700px){ .dl-list{ grid-template-columns:repeat(2, 1fr); } }
.dl-list a{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  border:1px solid var(--edge); background:var(--ash); color:var(--bone);
  transition:border-color .3s, background-color .3s;
}
.dl-list a:hover{ border-color:var(--ember); background:var(--smoke); }
.dl-list a > span{ display:grid; gap:.15rem; flex:1; }
.dl-list__sub{ color:var(--dim); font-size:.9rem; }
.media__more{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.acc{ display:grid; }
.acc__item{ border-bottom:1px solid var(--edge); }
.acc__item:first-child{ border-top:1px solid var(--edge); }
.acc__item summary{
  list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem, 1rem + .4vw, 1.35rem);
  transition:color .3s;
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary:hover{ color:var(--ember-lo); }
.acc__item summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:14px; height:14px;
  border-right:2px solid var(--ember); border-bottom:2px solid var(--ember);
  translate:0 -60%; rotate:45deg; transition:rotate .3s var(--ease), translate .3s var(--ease);
}
.acc__item[open] summary::after{ rotate:225deg; translate:0 -30%; }
.acc__body{ padding:0 3rem 1.75rem 0; color:var(--mist); max-width:64ch; }
.acc__body p + p{ margin-top:.8rem; }

/* ==========================================================================
   JOIN: signup + community
   ========================================================================== */
.join__grid{ display:grid; gap:clamp(3rem, 7vw, 5rem); }
@media (min-width:960px){ .join__grid{ grid-template-columns:1.25fr .75fr; align-items:start; } }

.signup{
  position:relative; margin-top:2.25rem; display:grid; gap:1.25rem;
  border:1px solid var(--edge); background:var(--obsidian);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width:640px){
  .signup{ grid-template-columns:1fr 1fr; }
  .field--full,
  .signup__foot,
  .signup__status{ grid-column:1 / -1; }
}
.field{ display:grid; gap:.45rem; }
.field label{
  font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.9rem; color:var(--mist);
}
/* a full question reads better as written than in tracked capitals */
.field label.field__question{ text-transform:none; letter-spacing:.02em; font-size:1rem; }
.field input,
.field select{
  width:100%; font:inherit; font-size:1rem; color:var(--bone);
  background:var(--ash); border:1px solid var(--edge); border-radius:0;
  padding:.85rem 1rem; -webkit-appearance:none; appearance:none;
  transition:border-color .25s, background-color .25s;
}
.field input:hover,
.field select:hover{ border-color:var(--smoke); }
.field input:focus,
.field select:focus{ outline:none; border-color:var(--ember); background:var(--smoke); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-color:var(--ember-lo); }
.field select{
  padding-right:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f26a1b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px;
}
.field select:invalid{ color:var(--dim); }
.field option{ background:var(--ash); color:var(--bone); }
.signup__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.signup__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.25rem; }
.signup__fine{ flex:1 1 14rem; color:var(--dim); font-size:.9rem; }
.signup__status{ font-weight:600; min-height:1.7em; }
.signup__status[data-state="ok"]{ color:var(--frost-lo); }
.signup__status[data-state="err"]{ color:var(--ember-lo); }

.join__links{ display:grid; gap:1rem; align-content:start; }
.join__links h2{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.3rem; margin-bottom:.25rem; }
.link-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem;
  padding:1.25rem 1.4rem; border:1px solid var(--edge); background:var(--obsidian);
  transition:transform .35s var(--ease), border-color .35s, background-color .35s;
}
.link-card:hover{ transform:translateX(4px); border-color:var(--brand); background:var(--ash); }
.link-card .i{ width:1.6rem; height:1.6rem; fill:var(--brand); }
.link-card strong{ display:block; font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.05rem; line-height:1.3; }
.link-card__sub{ display:block; margin-top:.15rem; font-size:.92rem; line-height:1.4; color:var(--mist); }
.link-card__chev{ width:.9rem; height:.9rem; fill:none; stroke:var(--dim); stroke-width:2; transition:stroke .3s, transform .3s var(--ease); }
.link-card:hover .link-card__chev{ stroke:var(--brand); transform:translateX(3px); }
.link-card--steam{ --brand:var(--ember-lo); }
.link-card--ks{ --brand:#05ce78; }
.link-card--dc{ --brand:#7c86ff; }
.link-card--x{ --brand:var(--bone); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(5rem, 11vw, 8.5rem); background:var(--void); border-top:1px solid var(--edge); }
.cta__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(55% 80% at 50% 100%, rgba(242,106,27,.24), transparent 70%),
    radial-gradient(40% 60% at 15% 20%, rgba(155,107,255,.2), transparent 70%),
    radial-gradient(40% 60% at 85% 30%, rgba(93,143,239,.14), transparent 70%);
}
.cta__inner{ position:relative; z-index:1; }
.cta h2{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem, 1.5rem + 4vw, 4.4rem); margin-bottom:1.1rem; }
.cta p{ color:var(--mist); max-width:44ch; margin-inline:auto; }
.cta__actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.25rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--obsidian); border-top:1px solid var(--edge); padding-block:3.5rem; }
.foot__inner{ display:grid; gap:2rem; }
.foot__brand img{ height:3.6rem; width:auto; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; }
.foot__nav a{ font-family:var(--f-ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.92rem; color:var(--mist); transition:color .25s; }
.foot__nav a:hover{ color:var(--ember-lo); }
.foot__legal{ color:var(--dim); font-size:.92rem; }
.foot__legal strong{ color:var(--mist); font-weight:600; }
@media (min-width:900px){
  .foot__inner{ grid-template-columns:auto 1fr; align-items:center; }
  .foot__nav{ justify-content:flex-end; }
  .foot__legal{ grid-column:1 / -1; padding-top:2rem; border-top:1px solid var(--edge); }
}

/* ==========================================================================
   PHONES: tighter vertical rhythm, text before pictures, smaller overlays
   ========================================================================== */
@media (max-width:699px){
  :root{ --rhythm:2.75rem; }

  /* hero sizes to its content instead of forcing a full screen */
  .hero{ min-height:0; padding-top:calc(var(--nav-h) + 1rem); padding-bottom:2.25rem; }
  .countdown{ margin-top:2rem; }

  /* the trailer follows straight on from the hero */
  .hero + .section{ padding-top:.5rem; }

  /* heading and text first, then the picture, so blocks don't stack photo on photo */
  .features{ gap:3.25rem; }
  .feature{ gap:1.25rem; }
  .feature__media{ order:2; }
  .feature h2{ margin-bottom:.75rem; }

  .modes{ margin-top:3rem; }
  .modes__rows{ margin-top:1.25rem; }
  .modes__rows li{ padding:.8rem 0; font-size:1rem; }

  .reel__sound{ right:.5rem; bottom:.5rem; padding:.35rem .6rem; font-size:.72rem; gap:.35rem; }

  .page-head{ padding-top:calc(var(--nav-h) + 2rem); padding-bottom:2rem; }
  .sec-head{ margin-bottom:1.75rem; }
  .cta{ padding-block:3.5rem; }
  .cta__actions{ margin-top:1.5rem; }
  .foot{ padding-top:2.5rem; }
  .join__grid,
  .split{ gap:2.5rem; }
}

/* ==========================================================================
   REVEAL (only when JS is running; content is visible otherwise)
   ========================================================================== */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}