/* DARKRIDE: the house in the dark where the stories live.
   One sheet for every page. Dark by design (a dark ride has no day mode),
   with the gold of the marquee bulbs against the black of the track. */
:root{
  --ground:#0d1114;--raised:#141a1e;--raised2:#1a2227;
  --ink:#dfe5e4;--ink-strong:#f2f6f4;--ink-mut:#8a979b;--ink-faint:#5d686c;
  --rule:#242e34;--gold:#d4a03c;--gold-dim:#8f6c28;--gold-wash:rgba(212,160,60,.09);
  --serif:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0}
body{background:var(--ground);color:var(--ink);font:16px/1.65 var(--sans);
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--ink-strong)}
.wrap{width:min(1060px,100% - 2.5rem);margin-inline:auto}

/* the marquee */
header.mast{padding:18px 0 14px;border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#10161a,var(--ground))}
.mast .wrap{display:flex;align-items:baseline;gap:18px}
.wordmark{font:700 22px/1 var(--mono);letter-spacing:.34em;color:var(--gold);
  text-shadow:0 0 18px rgba(212,160,60,.35)}
.wordmark a{color:inherit}
.mast .tag{color:var(--ink-faint);font-size:13px;letter-spacing:.02em}
.mast nav{margin-left:auto;font-size:13.5px;letter-spacing:.06em}
.mast nav a{color:var(--ink-mut);margin-left:18px;text-transform:uppercase;font-size:12px}
.mast nav a:hover{color:var(--gold)}

/* the hero */
.hero{padding:64px 0 52px;text-align:center;
  background:radial-gradient(ellipse 75% 100% at 50% 0%,#161e23 0%,var(--ground) 70%)}
.hero h1{font:400 clamp(30px,5vw,52px)/1.2 var(--serif);color:var(--ink-strong);
  max-width:21ch;margin-inline:auto}
.hero h1 em{color:var(--gold);font-style:italic}
.hero p{margin:18px auto 0;max-width:56ch;color:var(--ink-mut)}

/* the ride cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;padding:40px 0 64px}
.ride{position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--raised);border:1px solid var(--rule);border-radius:12px;
  padding:22px 22px 18px;transition:.18s;overflow:hidden}
.ride:hover{border-color:var(--gold-dim);background:var(--raised2);transform:translateY(-2px)}
.ride .num{position:absolute;right:10px;top:-14px;font:700 92px/1 var(--serif);
  color:var(--gold-wash);pointer-events:none;-webkit-text-stroke:1px rgba(212,160,60,.16)}
.ride .series{font:11px var(--mono);letter-spacing:.22em;color:var(--gold-dim);
  text-transform:uppercase}
.ride h2{font:400 24px/1.25 var(--serif)}
.ride h2 a{color:var(--ink-strong)}
.ride h2 a::after{content:'';position:absolute;inset:0}   /* whole card clicks */
.ride p{color:var(--ink-mut);font-size:14px;flex:1}
.ride .meta{display:flex;gap:8px;align-items:center;font:12px var(--mono);
  color:var(--ink-faint)}
.badge{border:1px solid var(--rule);border-radius:99px;padding:1px 9px;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-mut)}
.badge.gold{border-color:var(--gold-dim);color:var(--gold)}

/* the story page */
.story{padding:52px 0 30px;flex:1}
.story .series{font:12px var(--mono);letter-spacing:.24em;color:var(--gold-dim);
  text-transform:uppercase}
.story h1{font:400 clamp(30px,4.6vw,46px)/1.2 var(--serif);color:var(--ink-strong);
  margin:8px 0 14px}
.story .teaser{max-width:62ch;color:var(--ink-mut);font-size:17px}
.player{margin:34px 0 10px;background:var(--raised);border:1px solid var(--rule);
  border-radius:12px;padding:22px}
.player audio{width:100%;display:block}
.modes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.btn{display:inline-block;border:1px solid var(--gold-dim);color:var(--gold);
  border-radius:8px;padding:9px 18px;font:14px var(--sans);letter-spacing:.03em;
  background:none;cursor:pointer}
.btn:hover{background:var(--gold-wash);color:var(--gold)}
.btn.quiet{border-color:var(--rule);color:var(--ink-mut)}
.btn.quiet:hover{color:var(--ink);background:none}
.note{color:var(--ink-faint);font-size:13px;margin-top:12px}

/* prose pages (about) */
.prose{padding:52px 0;max-width:64ch;flex:1}
.prose h1{font:400 38px/1.2 var(--serif);color:var(--ink-strong);margin-bottom:18px}
.prose p{margin:0 0 16px;color:var(--ink)}
.prose p.mut{color:var(--ink-mut)}

footer{border-top:1px solid var(--rule);padding:22px 0 30px;margin-top:auto;
  color:var(--ink-faint);font-size:13px}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ink-mut)}
footer a:hover{color:var(--gold)}
@media (max-width:640px){
  .hero{padding:44px 0 36px}
  .mast .tag{display:none}
}