/* District 12 — Grand Launch design system */
:root{
  --ink:#1C0408;
  --plum:#5C0A12;
  --plum-2:#7A0E1A;
  --plum-glow:#A81C28;
  --gold:#D4AC6E;
  --gold-hi:#EDD3A1;
  --gold-dim:#9C7B4A;
  --cream:#F5EADA;
  --text:#F3E4E1;
  --muted:#D8A9A4;

  --font-display:'Cormorant Garamond',serif;
  --font-body:'Jost',sans-serif;

  --text-hero:clamp(2.6rem,7.5vw,5.4rem);
  --text-big:clamp(1.9rem,4.5vw,3.2rem);
  --text-lead:clamp(1.05rem,2.2vw,1.3rem);

  --sp-s:1rem; --sp-m:2rem; --sp-l:4rem; --sp-xl:7rem;
  --wrap:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{ /* ambient plum radiance */
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(168,28,40,.5), transparent 60%),
    radial-gradient(900px 700px at 85% 110%, rgba(122,14,26,.55), transparent 55%),
    linear-gradient(180deg,#26060B 0%, #1C0408 45%, #150307 100%);
}
img{max-width:100%;display:block}
a{color:var(--gold-hi);text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* type utilities */
.eyebrow{
  font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:400;
}
.display{font-family:var(--font-display);font-weight:500;line-height:1.06;color:var(--cream)}
.display em{font-style:italic;color:var(--gold-hi)}
.gold-grad{
  background:linear-gradient(115deg,#B98D4F 0%,#EDD3A1 38%,#C9A15D 62%,#F1E0B8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{font-size:var(--text-lead);color:var(--muted);font-weight:300}

/* hairline + ornaments */
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(212,172,110,.5),transparent)}
.orn{color:var(--gold);letter-spacing:.6em;font-size:.85rem;text-align:center}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);font-weight:500;font-size:.85rem;
  letter-spacing:.28em;text-transform:uppercase;
  padding:1.05rem 2.4rem;border-radius:2px;cursor:pointer;border:0;
  transition:all .35s cubic-bezier(.2,.7,.2,1);
}
.btn-gold{
  color:#2A070C;
  background:linear-gradient(115deg,#C9A15D,#EDD3A1 45%,#C9A15D);
  box-shadow:0 8px 30px rgba(201,161,93,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(201,161,93,.42)}
.btn-ghost{
  color:var(--gold-hi);background:transparent;
  border:1px solid rgba(212,172,110,.55);
}
.btn-ghost:hover{background:rgba(212,172,110,.1);border-color:var(--gold-hi)}
.btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* card */
.card{
  background:linear-gradient(160deg,rgba(122,14,26,.5),rgba(28,4,8,.72));
  border:1px solid rgba(212,172,110,.25);
  border-radius:6px;
  backdrop-filter:blur(6px);
}

/* top nav (pages 2 & 3) */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.4rem;
  background:linear-gradient(180deg,rgba(24,3,7,.92),rgba(24,3,7,.65) 70%,transparent);
  backdrop-filter:blur(8px);
}
.nav-logo{height:30px;width:auto;display:block}
.nav .mark{font-family:var(--font-display);font-size:1.35rem;color:var(--cream);letter-spacing:.05em}
.nav .mark span{color:var(--gold-hi)}
.nav .btn{padding:.65rem 1.4rem;font-size:.72rem;min-height:44px}
@media(max-width:560px){
  .nav{padding:.7rem 1rem}
  .nav .btn{padding:.55rem 1rem;font-size:.66rem;letter-spacing:.16em}
  .nav-logo{height:26px}
}

/* reveal on scroll — hidden state applies ONLY when JS is confirmed running
   (html.js is set by an inline script). If JS fails or is blocked, content
   simply renders visible instead of being stuck at opacity:0. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.in{opacity:1;transform:none}

/* footer */
footer{
  padding:2.5rem 1.25rem 3rem;text-align:center;color:var(--muted);
  font-size:.8rem;letter-spacing:.12em;
}
footer .mark{font-family:var(--font-display);font-size:1.2rem;color:var(--gold);margin-bottom:.4rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* Animations are what make these visible, so force their end-state
     or the content would stay at opacity:0 forever. */
  .seq,.reveal,.reveal.in{opacity:1!important;transform:none!important}
}

/* film grain + vignette (cinematic finish, all pages) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(10,1,3,.5) 100%)}