/* THE FRONT DOOR.
   Written MOBILE FIRST — every rule here is the phone layout, and the desktop
   gets the media queries at the bottom. That is the right way round for a page
   whose whole job is to look extraordinary in a thumb's-width of screen.

   The art carries it. Type gets out of the way. */

body.landing{
  margin:0;
  overflow-x:hidden;            /* nothing horizontal but the strips */
  -webkit-font-smoothing:antialiased;
}
body.landing::before,
body.landing::after{content:none;}   /* the game's grain/dust layers, off */

.wrap{max-width:1060px; margin:0 auto; padding:0 16px 40px;}

/* things fade up as they arrive */
section, .hero-plate{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
section.in, .hero-plate.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  section, .hero-plate{opacity:1; transform:none; transition:none;}
}

/* ══════════ THE HERO ══════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end; justify-content:center;
  padding:24px 16px 34px;
  overflow:hidden;
  isolation:isolate;
}
/* the convoy, crawling under an enormous dust sky */
.hero-art{
  position:absolute; inset:0; z-index:-2;
  background:url(../assets/title.png) center 28% / cover no-repeat;
  filter:saturate(.78) contrast(1.06) brightness(.62);
  /* a slow drift, so the sky is never quite still */
  animation:skydrift 40s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes skydrift{
  from{transform:scale(1.06) translate3d(-1%,0,0);}
  to  {transform:scale(1.14) translate3d(2%,-1.5%,0);}
}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none;}}
/* the horizon burns; everything above and below it goes to nothing */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 62%, rgba(216,167,44,.20), transparent 62%),
    linear-gradient(rgba(8,9,11,.35) 0%, rgba(8,9,11,.05) 30%, rgba(8,9,11,.86) 78%, #0b0c0e 100%);
}

.hero-plate{
  position:relative; z-index:1;
  width:100%; max-width:620px; text-align:center;
  background:var(--plate);
  border:var(--plate-edge); border-radius:var(--radius);
  box-shadow:var(--plate-rule), 0 22px 60px rgba(0,0,0,.75),
             0 0 90px -18px rgba(255,207,98,.42);
  padding:22px 18px 24px;
  transform:rotate(-.4deg);       /* nobody hangs a bill straight */
}
.hero-plate .kicker{margin-bottom:9px;}
.hero h1{
  font-family:"Playbill",Rockwell,Impact,Haettenschweiler,sans-serif;
  font-size:clamp(34px, 12vw, 66px);
  letter-spacing:.06em; line-height:.98;
  color:#2a2119; margin:0 0 12px;
  text-shadow:0 1px 0 rgba(255,255,255,.5), 0 3px 0 rgba(20,17,14,.14);
  animation:marquee 7s linear infinite;   /* the bulbs are old, the current is bad */
}
@media(prefers-reduced-motion:reduce){.hero h1{animation:none;}}
.hero-line{color:var(--ink); font-size:15px; line-height:1.5; margin:0 auto; max-width:44ch;}
.hero-turn{
  margin-top:12px; color:var(--red);
  font:700 12px/1.4 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase;
}
/* Both calls to action are the same object at the same size — one is just
   printed louder. Different padding on .big vs .ghost made them mismatch. */
.hero-cta{
  display:flex; flex-direction:column; gap:9px; align-items:stretch;
  margin-top:18px;
}
.hero-cta .btn{
  margin:0; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 24px;
  font-size:12px; letter-spacing:.2em;
}
.hero-note{
  margin-top:11px; color:var(--ink2);
  font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
}

/* ══════════ SECTIONS ══════════ */
.landing h2{
  font-family:"Playbill",Rockwell,Impact,sans-serif;
  font-size:clamp(26px,7.5vw,40px); letter-spacing:.03em;
  color:var(--gold); text-transform:none; border:0; padding:0;
  margin:0 0 10px; line-height:1.05;
  text-shadow:0 0 26px rgba(216,167,44,.28);
}
.lede{
  color:#c3b59c; font-size:15px; line-height:1.55; max-width:60ch;
  margin:0 0 18px;
}
.lede b{color:var(--glow);}
.caption{
  margin-top:14px; color:var(--dim); font-size:13px; font-style:italic;
  max-width:60ch;
}
.landing section{padding:52px 0 12px;}

/* ---- the hook ---- */
.beats{display:grid; gap:10px;}
.beat{
  background:var(--plate);
  border:1px solid var(--ink); border-left:5px solid var(--green);
  border-radius:var(--radius); padding:14px 15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.5);
  color:var(--ink);
}
.beat.bad{border-left-color:var(--red);}
.beat-n{
  display:block; margin-bottom:5px;
  font:700 10px/1 ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red);
}
.beat p{margin:0; font-size:14px; line-height:1.5;}
.beat b{color:var(--red);}

/* ══════════ THE ART STRIPS ══════════
   A rail you flick with a thumb. Scroll-snapped, so it always comes to rest on a
   painting and never half-way between two. */
.gallery.dark{
  background:linear-gradient(rgba(7,8,10,0), rgba(7,8,10,.75), rgba(7,8,10,0));
}
.strip{
  display:flex; gap:10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 16px;
  margin:0 -16px;                 /* bleed to the edges of the phone */
  scrollbar-width:none;
  cursor:grab;
}
.strip::-webkit-scrollbar{display:none;}
.strip.dragging{cursor:grabbing;}
.tile{
  flex:0 0 auto; width:154px; margin:0;
  scroll-snap-align:center;
  position:relative; overflow:hidden;
  border:2px solid var(--ink); border-radius:var(--radius);
  background:linear-gradient(var(--paper), var(--paper3));
  box-shadow:inset 0 0 0 2px var(--gold), 0 5px 0 rgba(0,0,0,.5);
  transition:transform .18s;
}
.tile:hover{transform:translateY(-4px);}
.tile-art{
  display:block; width:100%; aspect-ratio:3/4;
  background-size:cover; background-position:center top;
  border-bottom:2px solid var(--ink);
}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:24px 9px 9px;
  background:linear-gradient(transparent, rgba(10,8,6,.75) 40%, rgba(8,7,6,.96));
}
.tile b{
  display:block; color:#f2e7d0; font-size:12.5px;
  font-family:"Playbill",Rockwell,Impact,sans-serif; letter-spacing:.03em;
  text-shadow:0 1px 3px #000;
}
.tile small{
  display:block; margin-top:2px; color:#bcae95; font-size:10px; line-height:1.3;
  text-shadow:0 1px 3px #000;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ══════════ HOW TO PLAY ══════════ */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.steps li{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--plate);
  border:1px solid var(--ink); border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.5);
  color:var(--ink);
}
.steps li.warn{border-left-color:var(--red);}
.step-n{
  flex:0 0 30px; width:30px; height:30px;
  display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:1px;
  background:var(--red); color:#f7ead2;
  font:800 14px/1 ui-monospace,monospace;
}
.steps h3{
  font-family:"Playbill",Rockwell,Impact,sans-serif;
  font-size:17px; letter-spacing:.03em; color:var(--ink); margin:0 0 4px;
}
.steps p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink2);}
.steps b{color:var(--red);}

/* ══════════ THE TURN ══════════ */
.turn{padding-bottom:40px;}
.turn-plate{
  background:var(--plate);
  border:var(--plate-edge); border-radius:var(--radius);
  box-shadow:var(--plate-rule), 0 18px 50px rgba(0,0,0,.7),
             0 0 80px -20px rgba(255,207,98,.4);
  padding:24px 18px;
  text-align:center; color:var(--ink);
  transform:rotate(.3deg);
}
.turn-plate h2{color:var(--ink); text-shadow:none; margin-bottom:14px;}
.turn-plate p{font-size:14.5px; line-height:1.6; margin:0 auto 12px; max-width:52ch;}
.turn-plate b{color:var(--red);}
.turn-kick{
  border-top:1px solid rgba(20,17,14,.25); padding-top:14px; margin-top:16px !important;
  font-size:15.5px !important; color:var(--ink) !important;
}
.turn-plate .btn{margin-top:14px; text-decoration:none; display:inline-block;}

/* ══════════ FOOT ══════════ */
.foot{
  text-align:center; padding:26px 16px 40px; color:var(--dim);
  font-size:12px; border-top:1px solid var(--line2);
}
.foot a{color:var(--gold);}
.foot p{margin:4px 0;}

/* ══════════ THE DESKTOP ══════════ */
@media(min-width:760px){
  .hero{align-items:center; padding:40px;}
  .hero-plate{padding:34px 40px 36px;}
  .hero-cta{flex-direction:row; justify-content:center;}
  .hero-line{font-size:17px;}
  .landing section{padding:80px 0 20px;}
  .beats{grid-template-columns:1fr 1fr; gap:12px;}
  .steps{grid-template-columns:1fr 1fr; gap:12px;}
  .strip{padding:6px 0 18px; margin:0;}
  .tile{width:186px;}
  .turn-plate{padding:40px;}
}