/* ===========================================================
   Hidden Express — stylesheet
   -----------------------------------------------------------
   BRAND PINK lives in the :root block below as --pink.
   Change it there and the whole site follows.
   =========================================================== */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:        #0B1230;   /* night-train background        */
  --ink-soft:   #141D45;   /* raised panels                 */
  --line:       rgba(255,255,255,.11);
  --paper:      #F6F3EE;   /* primary text                  */
  --muted:      #A5AECB;   /* secondary text                */
  --pink:       #FF2E88;   /* ★ THE button                  */
  --pink-hi:    #FF63A6;
  --amber:      #FFC24B;   /* departure-board accent        */

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --r: 18px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0;
}

:where(a,button):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================
   HEADER
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(11,18,48,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.masthead.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(11,18,48,.94);
}
.masthead__in{
  display:flex; align-items:center; gap:18px;
  min-height:64px;
}

.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; margin-right:auto;
}
.brand__mark{
  width:38px; height:38px; flex:none;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 3px 12px -2px rgba(0,0,0,.6);
}
.brand__name{
  font-family:var(--display); font-weight:600;
  font-size:16px; letter-spacing:-.01em;
}

.masthead__links{
  display:flex; align-items:center; gap:22px;
  font-size:14px;
}
.masthead__links a{
  color:var(--muted); text-decoration:none;
  transition:color .18s;
}
.masthead__links a:hover{ color:var(--paper); }

/* Play on Web — always visible, every screen size */
.masthead__play{
  display:inline-block;
  padding:9px 18px; border-radius:999px;
  background:var(--pink); color:#fff;
  font-weight:600; font-size:14px; text-decoration:none;
  white-space:nowrap; flex:none;
  transition:background .18s, transform .18s;
}
.masthead__play:hover{ background:var(--pink-hi); transform:translateY(-1px); }

/* The header bar must never wrap. Nav and CTA hold their size;
   only the wordmark gives way, and only once it truly runs out of room. */
.brand{ min-width:0; }
.brand__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.masthead__links{ flex:none; }

/* phones: tighten everything so all three fit on one line */
@media (max-width:759px){
  .masthead__in{ gap:10px; min-height:58px; }
  .brand{ gap:9px; }
  .brand__mark{ width:32px; height:32px; border-radius:8px; }
  .brand__name{ font-size:14.5px; }
  .masthead__links{ gap:14px; font-size:13px; }
  .masthead__play{ padding:7px 13px; font-size:13px; }

  /* .is-secondary = nav links dropped on phones to keep the bar clean.
     Forum has no class, so it stays visible at every width. */
  .masthead__links .is-secondary{ display:none; }
}

/* ============================================================
   HERO — copy pulled UP alongside the artwork
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(28px,5vw,64px) clamp(36px,6vw,72px);
}
.hero::before{        /* soft window-light glow */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 52% at 78% 30%, rgba(255,46,136,.20), transparent 70%),
    radial-gradient(46% 44% at 12% 8%,  rgba(255,194,75,.10), transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid;
  gap:clamp(30px,4.5vw,60px);
  align-items:center;
}
@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.02fr .98fr; }
}

.hero__title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(43px,7.4vw,86px);
  line-height:.94;
  letter-spacing:-.032em;
  margin:14px 0 0;
}
.hero__title span{ display:block; }
.hero__title .t2{ color:var(--pink); }

.hero__copy{
  color:var(--muted);
  font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.62;
  max-width:46ch;
  margin:20px 0 0;
}
.hero__copy b{ color:var(--paper); font-weight:500; }

/* ---- THE BUTTON: a punched train ticket -------------------- */
.ticket{
  position:relative;
  display:inline-flex; align-items:stretch;
  margin-top:clamp(26px,3.4vw,38px);
  border-radius:14px;
  background:var(--pink);
  color:#fff;
  text-decoration:none;
  box-shadow:0 16px 40px -12px rgba(255,46,136,.62);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .18s;
}
.ticket::before,.ticket::after{     /* the punch-outs */
  content:""; position:absolute; top:50%;
  width:20px; height:20px; border-radius:50%;
  background:var(--ink);
  transform:translateY(-50%);
}
.ticket::before{ left:-10px; }
.ticket::after{  right:-10px; }

.ticket:hover{
  background:var(--pink-hi);
  transform:translateY(-3px);
  box-shadow:0 22px 50px -12px rgba(255,46,136,.75);
}
.ticket:active{ transform:translateY(-1px); }

.ticket__main{
  padding:19px clamp(24px,3vw,34px) 17px;
  display:flex; flex-direction:column; gap:3px;
  border-right:2px dashed rgba(255,255,255,.42);
}
.ticket__label{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.ticket__action{
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,2.1vw,25px);
  letter-spacing:-.018em; line-height:1.1;
}
.ticket__stub{
  display:grid; place-items:center;
  padding-inline:clamp(17px,2vw,23px);
}
.ticket__stub svg{ width:19px; height:19px; fill:#fff; }

.ticket-note{
  margin:14px 0 0;
  font-family:var(--mono); font-size:12px;
  color:var(--muted); letter-spacing:.02em;
}

/* ---- store row --------------------------------------------- */
.stores{ margin-top:clamp(30px,4vw,42px); }
.stores__list{
  list-style:none; margin:13px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.stores__list a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:13.5px; font-weight:500;
  text-decoration:none;
  transition:border-color .18s, color .18s, background .18s, transform .18s;
}
.stores__list a:hover{
  color:var(--paper);
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.075);
  transform:translateY(-2px);
}
.stores__list svg{ width:15px; height:15px; fill:currentColor; flex:none; }

/* ---- hero artwork ------------------------------------------ */
/* margin (not padding) so bottom:0 on the overlays still means
   "the bottom edge of the cover image" */
.art{ position:relative; margin-bottom:clamp(38px,4.5vw,54px); }
.art__frame{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.85);
  background:var(--ink-soft);
  aspect-ratio:16/10;
}
.art__frame img{ width:100%; height:100%; object-fit:cover; }

/* scenes — bottom LEFT corner of the cover image */
.art__scenes{
  position:absolute;
  left:clamp(-18px,-1.5vw,-8px);
  bottom:clamp(-26px,-2.4vw,-14px);
  width:clamp(148px,44%,258px);
  height:auto;
  border-radius:10px;
  transform:rotate(-2deg);      /* delete this line for dead straight */
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));
  pointer-events:none;
  z-index:2;
}

.art__stamp{
  position:absolute; top:16px; right:16px;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:rgba(11,18,48,.82);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper);
}
.art__stamp i{
  width:6px; height:6px; border-radius:50%;
  background:#3BD97A; display:block;
}

/* ============================================================
   FACTS
   ============================================================ */
.facts{ padding-block:clamp(38px,5.5vw,62px); border-top:1px solid var(--line); }
.facts__grid{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .facts__grid{ grid-template-columns:repeat(3,1fr); } }

.fact h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(19px,1.7vw,22px);
  letter-spacing:-.015em;
  margin:11px 0 6px;
}
.fact p{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.fact__rule{
  width:38px; height:3px; border-radius:2px;
  background:var(--pink);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closer{
  border-top:1px solid var(--line);
  padding-block:clamp(44px,6vw,74px);
  text-align:center;
}
.closer h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.04; letter-spacing:-.028em;
  margin:14px auto 0; max-width:16ch;
}
.closer .ticket{ margin-top:28px; }
.closer .ticket-note{ text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--line);
  padding-block:30px 38px;
  font-size:13.5px; color:var(--muted);
}
.foot__in{
  display:flex; flex-wrap:wrap; gap:14px 26px;
  align-items:center; justify-content:space-between;
}
.foot a{ color:var(--muted); text-decoration:none; }
.foot a:hover{ color:var(--paper); text-decoration:underline; }
.foot__dev{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.foot__sep{ opacity:.4; }

/* ============================================================
   ENTRANCE + REDUCED MOTION
   ============================================================ */
.rise{ opacity:0; transform:translateY(18px); }
.ready .rise{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.ready .rise:nth-child(2){ transition-delay:.07s; }
.ready .rise:nth-child(3){ transition-delay:.14s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; }
}