/* Let 'er Ride — leterride.com
 *
 * One look, on purpose: the game's own world at sundown. Every colour is one
 * of the 24 in assets/palette.gpl ("Dust & Denim", GAME_BIBLE 13.2) and both
 * faces are the game's pixel faces, converted by site/tools/bitmap_font_to_ttf.py.
 * Type sizes sit on each face's grid (D-266): Slab on multiples of 12 px, Sans
 * on multiples of 8, so every font pixel lands on whole screen pixels.
 */

@font-face {
  font-family: "LER Slab";
  src: url("../fonts/ler-slab.woff?v=b622465c5e") format("woff"), url("../fonts/ler-slab.ttf?v=35a535b2f2") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LER Sans";
  src: url("../fonts/ler-sans.woff?v=bf51eb6a80") format("woff"), url("../fonts/ler-sans.ttf?v=d502b30085") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LER Sans";
  src: url("../fonts/ler-sans-bold.woff?v=bfd771b27f") format("woff"), url("../fonts/ler-sans-bold.ttf?v=69b3fc825c") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LER Sans";
  src: url("../fonts/ler-sans-oblique.woff?v=b2a146389f") format("woff"), url("../fonts/ler-sans-oblique.ttf?v=39255597d3") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "LER Sans";
  src: url("../fonts/ler-sans-bold-oblique.woff?v=264d7f238f") format("woff"), url("../fonts/ler-sans-bold-oblique.ttf?v=4985ef65c3") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Dust & Denim */
  --ink: #1a1410;
  --shadow: #2e241c;
  --leather: #4a3628;
  --saddle: #6e4f33;
  --adobe: #9c6b43;
  --tan: #c49a6c;
  --sand: #e0c39a;
  --cream: #f2ead8;
  --parchment: #d9cbb0;
  --dust: #b5aa98;
  --warm-gray: #857d72;
  --oxblood: #8e2f2f;
  --ember: #b04a3a;
  --rust: #a05a2c;
  --gold: #c9a227;
  --pale-gold: #e2c96a;
  --cactus: #5a7a4a;
  --sage: #8fa578;
  --felt-deep: #1e3d2f;
  --felt-light: #2c5240;
  --denim: #4a6785;
  --denim-light: #7b93ad;
  --gunmetal: #3a4a58;
  --slate: #5d707f;

  --slab: "LER Slab", "Rockwell", "Courier New", monospace;
  --sans: "LER Sans", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --page: 1152px;
  --bar-h: 64px;
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  font-synthesis: none;
  overflow-x: hidden;
}

img,
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
}

a {
  color: var(--pale-gold);
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}

:focus-visible {
  outline: 3px solid var(--pale-gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 60;
  padding: 8px 16px;
  background: var(--cream);
  color: var(--ink);
  font: 24px/24px var(--slab);
  text-decoration: none;
}
.skip:focus {
  top: 16px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- type */

.slab {
  font-family: var(--slab);
  font-weight: 400;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--slab);
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-size: 48px;
  line-height: 56px;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--ink);
}

h3 {
  font-size: 24px;
  line-height: 32px;
  color: var(--pale-gold);
  text-shadow: 0 2px 0 var(--ink);
}

p {
  margin: 0;
}

.eyebrow {
  font-family: var(--slab);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.lede {
  font-size: 24px;
  line-height: 36px;
  max-width: 34em;
  color: var(--sand);
}

/* Flavor is the drawl's only home: lowercase, dry, set apart, last (§15). */
.flavor {
  font-style: italic;
  color: var(--dust);
}
.flavor cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: var(--warm-gray);
}

@media (max-width: 640px) {
  h2 {
    font-size: 36px;
    line-height: 44px;
    text-shadow: 0 3px 0 var(--ink);
  }
  .lede {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ---------------------------------------------------------- buttons */

.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 16px;
  font: 24px/24px var(--slab);
  color: var(--ink);
  text-decoration: none;
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow:
    inset 0 3px 0 var(--pale-gold),
    inset 0 -3px 0 var(--rust),
    0 6px 0 var(--ink);
  transform: translateY(var(--lift));
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 90ms ease-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover {
  --lift: -3px;
  background: var(--pale-gold);
  box-shadow:
    inset 0 3px 0 var(--cream),
    inset 0 -3px 0 var(--gold),
    0 9px 0 var(--ink);
}
.btn:active {
  --lift: 4px;
  box-shadow:
    inset 0 3px 0 var(--pale-gold),
    inset 0 -3px 0 var(--rust),
    0 2px 0 var(--ink);
}
.btn svg {
  width: 32px;
  height: 32px;
  flex: none;
  fill: currentColor;
}
.btn span {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .btn {
    gap: 8px;
    padding: 12px 14px 12px 10px;
  }
  .btn svg {
    width: 24px;
    height: 24px;
  }
}

.btn-small {
  gap: 8px;
  padding: 6px 12px 6px 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  border-width: 2px;
  box-shadow:
    inset 0 2px 0 var(--pale-gold),
    inset 0 -2px 0 var(--rust),
    0 4px 0 var(--ink);
}
.btn-small:hover {
  box-shadow:
    inset 0 2px 0 var(--cream),
    inset 0 -2px 0 var(--gold),
    0 6px 0 var(--ink);
}
.btn-small svg {
  width: 20px;
  height: 20px;
}

.cta-note {
  font-size: 16px;
  line-height: 26px;
  color: var(--parchment);
}

/* A press on an unwired Wishlist: the store page is not up yet. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  transform: translate(-50%, 16px);
  padding: 12px 20px;
  background: var(--parchment);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  font: 24px/24px var(--slab);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-up {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------- bar */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  pointer-events: none;
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.bar > * {
  pointer-events: auto;
}
.bar.is-solid {
  background: var(--ink);
  box-shadow: 0 3px 0 var(--shadow);
}
.bar-logo {
  display: block;
  flex: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.bar-logo img {
  display: block;
  width: 160px;
  height: 48px;
}
.bar.is-solid .bar-logo {
  opacity: 1;
  transform: none;
}
.bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.bar .wishlist {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.bar.is-solid .wishlist {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-out;
}

/* Sound holds the far right, so the bar's hidden Wishlist never pushes it
   into the title card's way. */
.sound {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(26, 20, 16, 0.72);
  border: 2px solid var(--ink);
  color: var(--cream);
  font: 16px/16px var(--sans);
  cursor: pointer;
}
.sound img {
  width: 48px;
  height: 24px;
}
.sound:hover {
  background: var(--shadow);
}

@media (max-width: 520px) {
  .bar-logo img {
    width: 107px;
    height: 32px;
  }
  .bar-right {
    gap: 8px;
  }
  .bar .wishlist span {
    display: none;
  }
}
/* A narrow phone closes the bar's gaps so the wordmark keeps its shape. The
   narrowest lets the wordmark go and keeps Sound and the Wishlist whole. */
@media (max-width: 359px) {
  .bar {
    gap: 8px;
  }
  .sound {
    gap: 4px;
    padding-inline: 6px;
  }
}
@media (max-width: 319px) {
  .bar-logo {
    display: none;
  }
}

/* ----------------------------------------------------------- the Drift */

.drift {
  position: relative;
  height: calc(100svh + var(--ride, 440svh));
  background: var(--slate);
}
.drift-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  background: var(--slate) url("../art/drift/still.png?v=d9d87a76b5") center bottom / auto 100% no-repeat;
}
/* One canvas pixel per art pixel; site.js sizes it to a whole number of
   device pixels per art pixel and pins it to the stage's bottom edge. */
.drift-canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}
@keyframes kick {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6px, 4px); }
  50% { transform: translate(5px, -3px); }
  75% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

/* The title card: the game's own intro, card one, card two, the wordmark. */
.drift-title {
  position: absolute;
  inset: calc(var(--bar-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-inline: var(--gutter);
  text-align: center;
  z-index: 3;
  container: title / inline-size;
}
/* A short, wide desktop screen: the title rises into the bar's empty middle
   so the Wishlist stays clear of the first toll booth. Narrower than 1100 px
   the centred story lines would reach the Sound toggle, so they stay below it. */
@media (min-width: 1100px) and (max-height: 860px) {
  .drift-title {
    top: calc(20px + env(safe-area-inset-top, 0px));
  }
}
/* A short screen (a phone on its side, a small window): the wordmark and the
   Wishlist keep the sky; the story's two lines wait for the ride's captions. */
@media (max-height: 599px) and (orientation: landscape) {
  .drift-title {
    top: calc(12px + env(safe-area-inset-top, 0px));
    gap: 8px;
  }
  .drift-title .intro-line {
    display: none;
  }
  .drift-title .tagline {
    font-size: 16px;
    line-height: 24px;
  }
  .drift-title .cta {
    gap: 6px;
    margin-top: 0;
  }
  .scroll-cue {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}
.intro-line {
  max-width: 32em;
  font: 24px/32px var(--slab);
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}
.intro-line + .intro-line {
  margin-top: -8px;
}
.logo {
  position: relative;
  line-height: 0;
  margin-block: 8px;
}
.logo img {
  display: block;
  width: calc(320px * var(--logo-scale, 2));
  height: auto;
  max-width: none;
  filter: drop-shadow(0 calc(3px * var(--logo-scale, 2)) 0 var(--ink));
}
/* The flare: a band of lamplight run across the wordmark once it lands. */
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(242, 234, 216, 0.85) 48%, transparent 58%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: url("../art/logo.png?v=61af0142f1") center / 100% 100% no-repeat;
  mask: url("../art/logo.png?v=61af0142f1") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.logo.is-flared::after {
  animation: flare 900ms ease-out 1 both;
}
@keyframes flare {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -60% 0; }
}
.tagline {
  font-size: 24px;
  line-height: 32px;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  max-width: 30em;
}
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.cta .cta-note {
  color: var(--cream);
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
}
/* A title narrower than the Wishlist's one line stacks its words beside the
   icon: Wishlist over on Steam. */
@container title (max-width: 333px) {
  .cta .btn-label {
    display: grid;
  }
}
/* A short screen that crowds the riders even with the smallest wordmark
   (site.js marks it tight) closes the title's gaps. */
.drift-title.is-tight {
  gap: 8px;
}
.drift-title.is-tight .cta {
  gap: 6px;
  margin-top: 0;
}

/* Beats hold until the sequence plays them; everything is at rest without script. */
.js .drift-title [data-beat] {
  opacity: 0;
}
.js .drift-title.is-played [data-beat] {
  opacity: 1;
}
.drift-title .intro-line.is-in,
.drift-title .tagline.is-in,
.drift-title .cta.is-in {
  opacity: 1;
  transition: opacity 500ms ease-out;
}
.drift-title .logo.is-in {
  opacity: 1;
  animation: title-drop 520ms cubic-bezier(0.2, 0, 0.1, 1) both;
}
@keyframes title-drop {
  0% { transform: translateY(-40px) scale(1.7); opacity: 0; }
  55% { transform: translateY(0) scale(0.94); opacity: 1; }
  72% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.drift-title.is-gone {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 240ms ease-in, transform 240ms ease-in;
  pointer-events: none;
}

.drift-captions {
  position: absolute;
  inset: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 16px) 0 auto 0;
  padding-inline: var(--gutter);
  z-index: 2;
  pointer-events: none;
}
.caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  margin-inline: auto;
  max-width: 22em;
  font: 36px/44px var(--slab);
  color: var(--cream);
  text-align: center;
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.caption.is-in {
  opacity: 1;
  transform: none;
}

/* A pitch on the trail: its art dealt into the sky, a line in the display
   face, then the sentences in the body face. */
.caption.pitch {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 720px;
}
.pitch-head {
  color: var(--pale-gold);
}
.pitch-line {
  max-width: 30em;
  font: 24px/32px var(--sans);
  color: var(--cream);
}
.pitch-fan,
.pitch-posse {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.pitch-fan img {
  width: 64px;
  height: 88px;
  margin-left: -24px;
}
.pitch-fan img:first-child {
  margin-left: 0;
}
.pitch-fan img:nth-child(1),
.pitch-fan img:nth-child(5) {
  margin-top: 8px;
}
.pitch-fan img:nth-child(2),
.pitch-fan img:nth-child(4) {
  margin-top: 3px;
}
.pitch-posse {
  gap: 8px;
}
.pitch-posse img {
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  background: var(--gunmetal);
}
/* The cards and the riders land one after another as the pitch comes up. */
.pitch-fan img,
.pitch-posse img {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 160ms ease-out, transform 220ms cubic-bezier(0.2, 0, 0.1, 1.3);
}
.caption.is-in .pitch-fan img,
.caption.is-in .pitch-posse img {
  opacity: 1;
  transform: none;
}
.caption.is-in :is(.pitch-fan, .pitch-posse) img:nth-child(2) { transition-delay: 70ms; }
.caption.is-in :is(.pitch-fan, .pitch-posse) img:nth-child(3) { transition-delay: 140ms; }
.caption.is-in :is(.pitch-fan, .pitch-posse) img:nth-child(4) { transition-delay: 210ms; }
.caption.is-in :is(.pitch-fan, .pitch-posse) img:nth-child(5) { transition-delay: 280ms; }
@media (min-width: 721px) {
  .pitch-posse img {
    width: 96px;
    height: 96px;
  }
}
/* A tall desktop sky takes the royal flush at twice its size. */
@media (min-width: 721px) and (min-height: 860px) {
  .pitch-fan img {
    width: 128px;
    height: 176px;
    margin-left: -56px;
  }
  .pitch-fan img:nth-child(1),
  .pitch-fan img:nth-child(5) {
    margin-top: 16px;
  }
  .pitch-fan img:nth-child(2),
  .pitch-fan img:nth-child(4) {
    margin-top: 6px;
  }
}
/* A narrow phone fits all five riders across. */
@media (max-width: 380px) {
  .pitch-posse {
    gap: 6px;
  }
  .pitch-posse img {
    width: 52px;
    height: 52px;
  }
}
/* A short screen keeps the words and lets the art go. */
@media (max-height: 599px) and (orientation: landscape) {
  .pitch-fan,
  .pitch-posse {
    display: none;
  }
}

@media (max-width: 720px) {
  .caption {
    font-size: 24px;
    line-height: 32px;
  }
  .pitch-line {
    font-size: 16px;
    line-height: 24px;
    text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  }
  .intro-line {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 22px;
    text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  }
  .tagline {
    font-size: 16px;
    line-height: 24px;
    text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  }
}

/* The Proprietor's card: drawn at the gate, like the run draws them. */
.proprietor {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 16px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  width: min(560px, calc(100% - 2 * var(--gutter)));
  padding: 16px;
  background: var(--ink);
  border: 3px solid var(--oxblood);
  box-shadow: 0 0 0 3px var(--ink), 0 9px 0 3px var(--ink);
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.2, 0, 0.1, 1.3);
  pointer-events: none;
}
.proprietor.is-in {
  opacity: 1;
  transform: none;
}
@media (min-width: 721px) {
  .proprietor.is-left {
    right: auto;
    left: var(--gutter);
    transform: translateX(-48px);
  }
  .proprietor.is-left.is-in {
    transform: none;
  }
}
.proprietor-face {
  width: 128px;
  height: 128px;
  background: var(--shadow);
  border: 3px solid var(--leather);
}
.proprietor-face img {
  display: block;
  width: 100%;
  height: 100%;
}
.proprietor-kicker {
  font: 700 16px/18px var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ember);
}
.proprietor-name {
  margin-top: 8px;
  font: 36px/40px var(--slab);
  color: var(--cream);
}
.proprietor-rule {
  margin-top: 8px;
  color: var(--parchment);
}
.proprietor-flavor {
  margin-top: 8px;
}
.proprietor-bet {
  margin-top: 8px;
  font: 24px/24px var(--slab);
  color: var(--pale-gold);
}
@media (max-width: 720px) {
  .proprietor {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 48%;
    transform: translate(-50%, 24px);
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
  }
  .proprietor.is-in {
    transform: translate(-50%, 0);
  }
  .proprietor-face {
    width: 96px;
    height: 96px;
  }
  .proprietor-name {
    font-size: 24px;
    line-height: 28px;
  }
}

.scroll-cue {
  white-space: nowrap;
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  font: 24px/24px var(--slab);
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  transition: opacity 240ms ease-out;
  pointer-events: none;
}
.scroll-cue img {
  width: 48px;
  height: 48px;
  transform: rotate(90deg);
  animation: nudge 1.4s steps(2, end) infinite;
}
@keyframes nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}
.scroll-cue.is-gone {
  opacity: 0;
}
@media (max-width: 520px) {
  .scroll-cue {
    gap: 8px;
    font: 700 16px/16px var(--sans);
  }
  .scroll-cue img {
    width: 32px;
    height: 32px;
  }
}

/* The trail laid flat: read aloud always, shown where the ride does not run. */
.drift-static {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.drift.is-static {
  height: auto;
}
.drift.is-static .drift-stage {
  position: relative;
  height: min(100svh, 900px);
}
.drift.is-static .drift-captions,
.drift.is-static .proprietor,
.drift.is-static .scroll-cue {
  display: none;
}
.drift.is-static .drift-static {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding-block: 48px;
  background: var(--shadow);
}
.static-line {
  margin: 0 0 32px;
  font: 24px/32px var(--slab);
  color: var(--cream);
}
.static-pitches {
  display: grid;
  gap: 24px;
  margin: 0 0 32px;
}
.static-pitch h2 {
  margin: 0 0 8px;
  font: 24px/32px var(--slab);
  color: var(--pale-gold);
}
.static-pitch p {
  max-width: 36em;
  color: var(--sand);
}
.seats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.seats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--leather);
  border: 2px solid var(--ink);
}
.seats .bet {
  font-family: var(--slab);
  font-size: 24px;
  line-height: 26px;
  color: var(--pale-gold);
}

/* ------------------------------------------------------- screenshots */

.shots {
  padding-block: 96px;
  background: var(--ink);
}
.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.shot {
  display: block;
  padding: 0;
  border: 3px solid var(--leather);
  background: var(--shadow);
  box-shadow: 0 6px 0 var(--ink), 0 0 0 3px var(--ink);
  cursor: zoom-in;
  transition: transform 140ms ease-out, border-color 140ms ease-out;
}
.shot:first-child {
  grid-column: 1 / -1;
}
.shot:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
/* The lead: a late-game hand recorded in the game, looping like a GIF. */
.shot-video {
  position: relative;
  margin: 0;
  cursor: default;
}
.shot-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--shadow);
}
.shot-video .video-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.shot-video:hover .video-toggle,
.shot-video:focus-within .video-toggle,
.shot-video.is-paused .video-toggle {
  opacity: 1;
}
.shot-video video {
  cursor: pointer;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: auto;
}
@media (max-width: 720px) {
  .shot-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.lightbox:not([open]) {
  display: none;
}
.lightbox[open] {
  display: grid;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  place-items: center;
  padding: 24px;
  background: rgba(26, 20, 16, 0.94);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  color: var(--cream);
}
.lightbox::backdrop {
  background: rgba(26, 20, 16, 0.94);
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100svh - 120px);
  border: 3px solid var(--leather);
  image-rendering: auto;
}
.lightbox-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
}

/* ------------------------------------------------------- the Parlor */

/* The sky and the ground are both anchored to the section's floor at the same
   whole-pixel scale, so the horizon of one meets the mesas of the other. */
.parlor {
  --art: 2;
  position: relative;
  overflow: hidden;
  padding-block: 88px 0;
  background-color: var(--gunmetal);
  background-image: url("../art/drift/sky_home.png?v=31ae2ef26b");
  background-size: calc(640px * var(--art)) calc(360px * var(--art));
  background-position: center bottom;
  background-repeat: repeat-x;
}
.parlor-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-bottom: 300px;
}
.parlor-copy {
  display: grid;
  gap: 16px;
  max-width: 640px;
}
.parlor h2 {
  text-shadow: 0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink);
}
.parlor .lede {
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}
/* The Parlor's own ground (sync_assets.py: parlor_band.png, 2400 art px wide,
   the Parlor's door at its centre, x 1200). */
.parlor-ground {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(304px * var(--art));
  background-image: url("../art/drift/parlor_band.png?v=2618dcd690");
  background-repeat: no-repeat;
  background-size: calc(2400px * var(--art)) calc(304px * var(--art));
  background-position: calc(70vw - 1200px * var(--art)) bottom;
  pointer-events: none;
}
@media (max-width: 900px) {
  .parlor {
    --art: 1;
    padding-block: 72px 0;
  }
  .parlor-inner {
    justify-items: center;
    text-align: center;
    padding-bottom: 40px;
  }
  .parlor-copy {
    justify-items: center;
  }
  .parlor-ground {
    position: relative;
    background-position: calc(50vw - 1200px) bottom;
  }
}
@media (max-width: 900px) and (min-width: 600px) {
  .parlor {
    --art: 2;
  }
}

.notice {
  position: relative;
  width: min(460px, 100%);
  margin-top: 24px;
  margin-bottom: 104px;
  perspective: 1200px;
  container: notice / inline-size;
}
.notice-card {
  position: relative;
  min-height: 392px;
  transform-style: preserve-3d;
  transition: transform 240ms cubic-bezier(0.2, 0, 0.1, 1.08);
}
.notice.is-turned .notice-card {
  transform: rotateY(180deg);
}
.notice-face {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 16px 24px 104px;
  color: var(--ink);
  background: var(--sand);
  border: 24px solid transparent;
  border-image: url("../art/ui/placard.png?v=af1632ca16") 8 fill / 24px / 0 stretch;
  image-rendering: pixelated;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.notice-back {
  transform: rotateY(180deg);
  padding-bottom: 24px;
}
.notice-kicker {
  font: 36px/36px var(--slab);
  color: var(--oxblood);
}
.notice-cameo {
  width: 128px;
  height: 128px;
}
.notice-small {
  font: 700 16px/18px var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--saddle);
}
.notice-back .cta-note {
  color: var(--leather);
}
.notice-back .btn {
  font-size: 24px;
}
/* Only the full-size notice holds the Wishlist on one line. A narrower one
   stacks its words beside the icon, and on the narrowest phones the frame
   alone keeps the margin. */
@container notice (max-width: 459px) {
  .notice-back .btn-label {
    display: grid;
  }
}
@container notice (max-width: 299px) {
  .notice-face {
    padding-inline: 0;
  }
}

.seal {
  position: absolute;
  left: 50%;
  bottom: -52px;
  z-index: 3;
  width: 144px;
  height: 144px;
  margin-left: -72px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seal img {
  position: absolute;
  inset: 0;
  width: 144px;
  height: 144px;
  max-width: none;
  pointer-events: none;
}
.seal .half {
  visibility: hidden;
}
.seal.is-split .whole {
  visibility: hidden;
}
.seal.is-split .half {
  visibility: visible;
}
.seal.is-gone {
  pointer-events: none;
}
.seal:hover .whole {
  filter: brightness(1.12);
}
.seal-hint {
  position: absolute;
  left: 50%;
  bottom: -96px;
  transform: translateX(-50%);
  font: 24px/24px var(--slab);
  color: var(--cream);
  white-space: nowrap;
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  transition: opacity 200ms ease-out;
}
.notice.is-broken .seal-hint {
  opacity: 0;
}
.parlor.is-kicked .notice {
  animation: kick 220ms steps(4, end);
}
.coins {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.no-js .seal,
.no-js .seal-hint,
.no-js .notice-front {
  display: none;
}
.no-js .notice-back {
  transform: none;
}

/* ------------------------------------------------------------ footer */

.foot {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  background: #4a3628;
  border-top: 3px solid var(--ink);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.foot img {
  display: block;
  width: 160px;
  height: 48px;
}
.foot p {
  color: var(--parchment);
}

/* ------------------------------------------------ grain and vignette */

/* The game's always-on film grain (§13.1), kept faint: one device pixel per
   speck, a few percent of ink or cream, and still. site.js paints the tile. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.5;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 60%, rgba(46, 36, 28, 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .grain {
    display: none;
  }
}