/* Pick's Place — "The Roadside Showcard"
   Palette, type and motifs come from Dave's logo: a sunburst behind a chrome-grilled
   sedan, a Western slab wordmark in coral, a teal tagline, on olive showcard paper. */

@font-face {
  font-family: 'Rye';
  src: url('/fonts/rye.woff2?v=e751e9b5bb') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('/fonts/oswald.woff2?v=4d19f170bd') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2?v=888f883ac1') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2?v=93e3ae1b7c') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ----------
   One set, day/night via light-dark(): the OS preference applies unless the toggle has set
   data-theme, which pins color-scheme. Contrast (WCAG AA) is checked for text tokens on
   --paper and --card in both schemes. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#cfd09a, #1d2318);
  --paper-deep: light-dark(#b5b77a, #141911);
  --card: light-dark(#f0ebcb, #2a3122);
  --card-edge: light-dark(#d8d1a6, #3a4330);
  --ink: light-dark(#26301f, #f1edd0);
  --ink-soft: light-dark(#4b5440, #c8c4a5);
  --teal: light-dark(#2f5a66, #2f6573);
  --coral: light-dark(#c8513f, #e26a52);
  --coral-ink: light-dark(#a13a2a, #f0907a);
  /* Behind button text: #fffbea on it is 5.6:1 (the logo coral would be 4.3:1). */
  --coral-btn: #b0412f;
  --sun: #ffd16e;
  --sun-orange: #e8963a;
  --rust: #895b43;
  --chrome: #eef1f1;
  --chrome-shade: #9ea7a8;
  --chrome-bezel: linear-gradient(145deg, var(--chrome) 0%, var(--chrome-shade) 45%, var(--chrome) 60%, #c7cecf 100%);
  --cream: #f4efd3;
  --link: light-dark(#24505c, #9fd0dc);
  --footer: light-dark(#39432a, #11150e);
  --shadow: light-dark(rgb(38 48 31 / 0.35), rgb(0 0 0 / 0.5));
  --btn-shadow: light-dark(#26301f, #070906);
  --tagline: light-dark(#2f5a66, #7fb6c6);
  --eyebrow: light-dark(#2f5a66, #ffd16e);
  /* Focus ring: 7:1 on paper by day, 11:1 by night. */
  --focus: light-dark(#1f3f48, #ffd16e);

  --font-display: 'Rye', 'Georgia', serif;
  --font-sign: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;

  --radius: 14px;
  --gutter: 16px;
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.6;
  overflow-x: hidden;
}
/* The vignette, pinned to the viewport behind everything. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgb(20 25 15 / 0.22) 100%);
}
/* Touch: the site draws its own pressed and focus states, so drop the grey tap flash, and
   skip the double-tap-to-zoom wait on controls. */
a,
button,
label,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Showcard paper grain over everything, never intercepting clicks. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--coral-ink);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
h1,
h2,
h3 {
  line-height: 1.1;
  margin: 0 0 0.5em;
}
p {
  margin: 0 0 1em;
}
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 700px) {
  :root {
    --gutter: 28px;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-sign);
  text-transform: uppercase;
}
.skip:focus {
  top: 1rem;
}
.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

/* ---------- Buttons & signs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.3em;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.25),
    4px 4px 0 var(--btn-shadow);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
  cursor: pointer;
}
@media (hover: hover) {
  .btn:hover {
    transform: translate(-1px, -1px);
    box-shadow:
      inset 0 0 0 2px rgb(255 255 255 / 0.25),
      5px 5px 0 var(--btn-shadow);
  }
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.25),
    2px 2px 0 var(--btn-shadow);
}
.btn--teal {
  background: var(--teal);
  color: var(--cream);
}
.btn--coral {
  background: var(--coral-btn);
  color: #fffbea;
}
.btn--teal:hover,
.btn--coral:hover {
  color: #fff;
}
.btn--small {
  padding: 0.45em 0.9em;
  font-size: 0.9rem;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.25),
    3px 3px 0 var(--btn-shadow);
}
.btn--block {
  display: flex;
  width: 100%;
}

/* The logo's wordmark treatment: coral with an ink outline and an offset drop shadow.
   Each element sets --outline / --drop-x / --drop-y for its size. */
.brand__name,
.hero__title,
.ride__year,
.error-page__code {
  color: var(--coral);
  text-shadow:
    calc(-1 * var(--outline)) calc(-1 * var(--outline)) 0 var(--ink),
    var(--outline) calc(-1 * var(--outline)) 0 var(--ink),
    calc(-1 * var(--outline)) var(--outline) 0 var(--ink),
    var(--outline) var(--outline) 0 var(--ink),
    var(--drop-x) var(--drop-y) 0 var(--shadow);
}

/* Painted tin plate: double border, corner rivets, offset shadow. */
.tin-sign {
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: 0.38em 1.1em 0.46em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  color: var(--cream);
  background:
    radial-gradient(circle at 12px 12px, var(--cream) 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--cream) 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--cream) 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--cream) 3px, transparent 4px),
    var(--teal);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 4px var(--teal),
    inset 0 0 0 6px rgb(244 239 211 / 0.55),
    6px 6px 0 var(--shadow);
}
.eyebrow {
  font-family: var(--font-sign);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  color: var(--eyebrow);
  margin-bottom: 0.6rem;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--chrome-shade);
  background: color-mix(in srgb, var(--paper) 88%, var(--card));
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding-block: 0.7rem;
}
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.brand__badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  --outline: 1px;
  --drop-x: 2px;
  --drop-y: 3px;
}
.brand__tag {
  font-family: var(--font-sign);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
.site-nav > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sign);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav > a[aria-current='page'] {
  border-bottom-color: var(--coral);
}
@media (hover: hover) {
  .site-nav > a:not(.btn):hover {
    border-bottom-color: var(--coral);
  }
}
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle[hidden] {
  display: none;
}
/* main.js sets data-mode from the effective theme (the button only exists with JS). */
.theme-toggle .icon--sun,
.theme-toggle[data-mode='dark'] .icon--moon {
  display: none;
}
.theme-toggle[data-mode='dark'] .icon--sun {
  display: block;
}
@media (max-width: 520px) {
  .brand__tag {
    display: none;
  }
  /* Brand and toggle share the first row; the nav gets its own. */
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 0.4rem 0.9rem;
  }
  .site-nav .btn--small {
    min-width: 44px;
    min-height: 44px;
  }
  /* Icon-only subscribe so the nav fits on one row; the label stays for screen readers. */
  .site-nav .btn--small span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Sunburst ----------
   Built up like a screen print, one layer per ink, each on its own clock so the motion
   never lines up the same way twice:
     rays          36 wide rays, inked through a worn Codex ink plate (img/sun/ink.webp)
     rays--fine    72 hairline rays turning the other way, only in the middle band
     corona        a Codex halftone dot burst (img/sun/halftone.webp) that slowly breathes
     glint         a soft wedge of light sweeping round faster than the rays
     disc          the Codex screen-printed sun, cut into core and rings over a soft bloom
   The whole stack is dimmed and fades out toward its edge so it stays behind the copy.
   Only transforms, opacity and filter animate, so it all runs on the compositor. */
.sunburst {
  position: absolute;
  z-index: 0;
  width: min(1400px, 190vw);
  aspect-ratio: 1;
  left: 50%;
  top: 100%;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0.72;
  mask-image: radial-gradient(circle closest-side, #000 30%, rgb(0 0 0 / 0.55) 62%, transparent 100%);
}
/* The textures (~350 KB) are decoration, so they must not compete with the page's own first
   load. With JS (theme.js marks <html class="js">), the sunburst stays hidden until main.js
   has fetched and decoded them after window load, then fades in; without JS they load with
   the CSS as usual. They are custom properties so a hidden sunburst requests nothing. */
:root:not(.js) .sunburst,
.sunburst.is-ready {
  --sun-ink: url('/img/sun/ink.webp?v=14f5908489');
  --sun-halftone: url('/img/sun/halftone.webp?v=5b1c649475');
  --sun-bloom: url('/img/sun/bloom.webp?v=6865e709fe');
  --sun-core: url('/img/sun/core.webp?v=1f75f505f3');
  --sun-ring-inner: url('/img/sun/ring-inner.webp?v=275503cad4');
  --sun-ring-outer: url('/img/sun/ring-outer.webp?v=eabf84212f');
  animation: sun-in 1.8s ease-out both;
}
.js .sunburst:not(.is-ready) {
  visibility: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sunburst {
    opacity: 0.5;
  }
}
:root[data-theme='dark'] .sunburst {
  opacity: 0.5;
}
.sunburst > * {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.sunburst__rays {
  /* A half-degree feather keeps the long ray edges from stair-stepping. */
  background: repeating-conic-gradient(rgb(232 150 58 / 0.5) 0deg 4.6deg, transparent 5.1deg 9.5deg, rgb(232 150 58 / 0.5) 10deg);
  mask: var(--sun-ink) center / cover;
  animation: spin 240s linear infinite;
  will-change: rotate;
}
.sunburst__rays--fine {
  background: repeating-conic-gradient(from 2.5deg, rgb(255 209 110 / 0.55) 0deg 0.6deg, transparent 0.9deg 4.7deg, rgb(255 209 110 / 0.55) 5deg);
  mask:
    var(--sun-ink) center / 140%,
    radial-gradient(circle closest-side, transparent 24%, #000 34%, #000 58%, transparent 82%);
  mask-composite: intersect;
  animation: spin 420s linear infinite reverse;
}
.sunburst__corona {
  inset: 12%;
  background: radial-gradient(circle closest-side, var(--sun-orange) 40%, var(--coral) 75%);
  mask: var(--sun-halftone) center / contain no-repeat;
  opacity: 0.32;
  animation: breathe 14s ease-in-out infinite alternate;
}
.sunburst__glint {
  background: conic-gradient(transparent 0deg 310deg, rgb(255 236 190 / 0.4) 340deg, transparent 360deg);
  mask-image: radial-gradient(circle closest-side, transparent 22%, #000 30%, transparent 75%);
  animation: spin 70s linear infinite;
  will-change: rotate;
}
/* The disc: the Codex sun cut into core and two rings (step 08b) over a blurred bloom of
   itself, which fills the paper gaps and softens every edge into one glow. A pulse ripples
   outward every 6s (core, inner ring, outer ring, then the bloom), and each ring turns and
   drifts a few pixels out of register on its own clock, like a print slipping. The ripple
   offsets are negative delays so every layer starts mid-cycle: a positive delay would show
   the un-animated style (full-strength bloom) until it kicked in. */
.sunburst__disc {
  inset: 28%;
  isolation: isolate;
}
.sunburst__disc > * {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: center / contain no-repeat;
}
.sunburst__bloom {
  inset: -20%; /* the bloom canvas is 1.4x the disc */
  background-image: var(--sun-bloom);
  opacity: 0.5;
  animation: bloom 6s ease-in-out -4.5s infinite;
}
/* Light bleeding across the rings only; over the core it would wash out the halftone. */
.sunburst__bloom--over {
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle closest-side, transparent 45%, #000 60%, #000 76%, transparent 92%);
  opacity: 0.1;
  animation-name: bloom-over;
}
.sunburst__ring,
.sunburst__core {
  filter: saturate(0.72);
}
.sunburst__ring--outer {
  background-image: var(--sun-ring-outer);
  animation:
    spin 600s linear infinite,
    drift-a 11s ease-in-out infinite alternate,
    ring-pulse 6s ease-in-out -5s infinite;
}
.sunburst__ring--inner {
  background-image: var(--sun-ring-inner);
  animation:
    spin 480s linear infinite reverse,
    drift-b 7s ease-in-out infinite alternate,
    ring-pulse 6s ease-in-out -5.5s infinite;
}
.sunburst__core {
  background-image: var(--sun-core);
  animation:
    core-pulse 6s ease-in-out infinite,
    ring-pulse 6s ease-in-out infinite;
}
@media (min-width: 960px) {
  .hero .sunburst {
    left: 72%;
    top: 92%;
  }
}
.sunburst--small {
  width: 640px;
  top: 40%;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
/* No "to": it fades up to whatever opacity the theme gives the sunburst. */
@keyframes sun-in {
  from {
    opacity: 0;
  }
}
@keyframes breathe {
  from {
    scale: 0.94;
    opacity: 0.22;
  }
  to {
    scale: 1.04;
    opacity: 0.4;
  }
}
@keyframes bloom {
  0%,
  100% {
    opacity: 0.5;
    scale: 1;
  }
  35% {
    opacity: 0.8;
    scale: 1.05;
  }
}
@keyframes bloom-over {
  0%,
  100% {
    opacity: 0.1;
  }
  35% {
    opacity: 0.24;
  }
}
@keyframes ring-pulse {
  0%,
  100% {
    filter: saturate(0.72) brightness(1);
  }
  35% {
    filter: saturate(0.8) brightness(1.14);
  }
}
@keyframes core-pulse {
  0%,
  100% {
    scale: 1;
  }
  35% {
    scale: 1.02;
  }
}
@keyframes drift-a {
  from {
    translate: -0.4% 0.3%;
  }
  to {
    translate: 0.35% -0.4%;
  }
}
@keyframes drift-b {
  from {
    translate: 0.3% 0.35%;
  }
  to {
    translate: -0.35% -0.25%;
  }
}
/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}
/* .hero isolates its layers, which traps the player's z-index below the page grain; once a
   video is playing, lift the whole hero above the grain so the video isn't dimmed. */
.hero:has(iframe) {
  z-index: 101;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
  }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.3rem, 2rem + 6.5vw, 6.4rem);
  line-height: 0.95;
  margin: 0;
  --outline: 3px;
  --drop-x: 9px;
  --drop-y: 10px;
}
@media (max-width: 520px) {
  /* A deep drop shadow reads as a ghost second line at phone size. */
  .hero__title {
    --outline: 2px;
    --drop-x: 4px;
    --drop-y: 5px;
  }
}
.hero__tagline {
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tagline);
  margin: 0.5rem 0 1.2rem;
}
.hero__pitch {
  max-width: 34em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

.now-showing {
  position: relative;
}
.now-showing__sign {
  position: absolute;
  z-index: 102; /* above .player, which sits above the grain overlay */
  top: -0.9rem;
  left: -0.4rem;
  margin: 0;
  padding: 0.25em 0.9em;
  rotate: -3deg;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--coral-btn);
  color: #fffbea;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--btn-shadow);
}
.now-showing__placard {
  margin: -0.4rem 0.8rem 0;
  padding: 0.9rem 1.1rem 0.8rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}
.now-showing__placard h2 {
  font-family: var(--font-sign);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  margin: 0 0 0.2rem;
}
.now-showing__placard h2 a {
  padding-block: 0.4em; /* a taller tap target; vertical padding on inline text moves nothing */
  color: var(--ink);
  text-decoration: none;
}
.now-showing__placard h2 a:hover {
  color: var(--coral-ink);
}
.now-showing__specs {
  margin: 0;
  font-family: var(--font-sign);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Player (click-to-load) ---------- */
.player {
  position: relative;
  z-index: 101; /* above the body::before grain, so a playing video isn't dimmed */
  padding: 9px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--chrome-bezel);
  box-shadow: 6px 6px 0 var(--shadow);
}
.player__facade,
.player iframe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 16:9 inside the 9px padding + 3px border on each side. On the home page the cap goes on
     the whole now-showing block so its sign and placard stay with the player. */
  .now-showing,
  :not(.now-showing) > .player {
    max-width: calc((100svh - 2rem - 24px) * 16 / 9 + 24px);
    margin-inline: auto;
  }
}
.player__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player__button {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fffbea;
  text-decoration: none;
}
.player__hubcap {
  display: grid;
  place-items: center;
  width: clamp(64px, 12vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 35% 30%, #fff, var(--chrome) 35%, var(--chrome-shade) 70%, #6d7677 100%);
  box-shadow:
    0 0 0 5px rgb(38 48 31 / 0.35),
    4px 6px 0 rgb(0 0 0 / 0.35);
  color: var(--coral);
  transition: transform 0.2s ease;
}
.player__hubcap .icon {
  width: 46%;
  height: 46%;
  margin-left: 6%;
}
.player__label {
  font-family: var(--font-sign);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.15em 0.7em;
  border-radius: 6px;
  background: rgb(20 25 15 / 0.75);
}
.player__facade:focus-visible .player__hubcap {
  transform: scale(1.07) rotate(18deg);
}
@media (hover: hover) {
  .player__facade:hover .player__hubcap {
    transform: scale(1.07) rotate(18deg);
  }
}

/* ---------- Stats band ---------- */
.stats {
  background: var(--teal);
  color: var(--cream);
  border-block: 4px solid var(--ink);
  box-shadow:
    inset 0 5px 0 rgb(244 239 211 / 0.25),
    inset 0 -5px 0 rgb(244 239 211 / 0.25);
}
.stats__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-block: 0;
  padding-block: 1.6rem;
  text-align: center;
}
@media (min-width: 760px) {
  .stats__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stats dt {
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  opacity: 0.9;
}
.stats dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 0.9rem + 2.6vw, 2.6rem);
  white-space: nowrap;
  color: var(--sun);
  text-shadow: 3px 3px 0 rgb(0 0 0 / 0.3);
}

/* ---------- Collections ---------- */
.collections {
  padding-block: clamp(2.5rem, 5vw, 4rem) 1rem;
}
.collections__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.1rem;
}
.lane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  padding: 0.8rem;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--shadow);
  isolation: isolate;
  transition: transform 0.15s ease;
}
.lane:focus-visible {
  color: #fff;
  transform: translateY(-3px);
}
.lane:active {
  transform: translateY(1px);
}
.lane__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.lane::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgb(25 45 50 / 0.9));
}
.lane:focus-visible .lane__img {
  opacity: 0.8;
}
@media (hover: hover) {
  .lane:hover {
    color: #fff;
    transform: translateY(-3px);
  }
  .lane:hover .lane__img {
    opacity: 0.8;
  }
}
.lane__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.5);
}
.lane__count {
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--sun);
}

/* ---------- Garage ---------- */
.garage {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem);
  scroll-margin-top: 1rem;
}
.filters {
  margin-bottom: 1.8rem;
  padding: 1rem 1.1rem 0.6rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--shadow);
}
.filters[hidden] {
  display: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35em 1em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
.chip input:checked + span {
  background: var(--teal);
  color: var(--cream);
  box-shadow: 2px 2px 0 var(--ink);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  /* Background and shadow are dropped in high-contrast mode; mark the selection another way. */
  .chip input:checked + span {
    outline: 3px solid CanvasText;
    text-decoration: underline;
  }
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 10rem;
}
.field--grow {
  flex: 1 1 14rem;
}
@media (max-width: 560px) {
  /* Decade and sort share a row evenly when both fit ("Newest episode" needs ~10rem), else
     each takes the full width, instead of sitting at their natural widths. */
  .field {
    flex: 1 1 10rem;
    min-width: 0;
  }
}
.field > span {
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.field select,
.field input {
  min-height: 44px;
  font: inherit;
  font-size: 1rem;
  padding: 0.45em 0.6em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.filters__status {
  margin: 0.7rem 0 0.2rem;
  font-family: var(--font-sign);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.garage__empty {
  font-style: italic;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.8rem 1.6rem;
}
.card[hidden] {
  display: none;
}
.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 7px 0 var(--shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.card__link:focus-visible {
  color: inherit;
  transform: translateY(-4px);
  box-shadow: 8px 11px 0 var(--shadow);
}
.card__link:active {
  transform: translateY(1px);
  box-shadow: 4px 5px 0 var(--shadow);
}
@media (hover: hover) {
  .card__link:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: 8px 11px 0 var(--shadow);
  }
}
.card__bezel {
  position: relative;
  display: block;
  margin: 8px 8px 0;
  padding: 6px;
  border-radius: 10px;
  background: var(--chrome-bezel);
  border: 2px solid var(--ink);
}
.card__bezel img {
  border-radius: 5px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}
.card__play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff, var(--chrome) 40%, var(--chrome-shade) 100%);
  color: var(--coral);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.card__play .icon {
  margin-left: 3px;
}
.card__link:focus-visible .card__play {
  opacity: 1;
  transform: scale(1);
}
@media (hover: hover) {
  .card__link:hover .card__play {
    opacity: 1;
    transform: scale(1);
  }
}
@media (hover: none) {
  .card__play {
    opacity: 1;
    transform: scale(0.9);
  }
}
.card__placard {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem 1.1rem;
}
.card__year {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--coral-ink);
}
.card__name {
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  margin-top: 0.25rem;
  font-family: var(--font-sign);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.card__specs > span + span::before {
  content: '•' / '';
  margin-right: 0.55rem;
  color: var(--rust);
}
.card__highlight {
  margin-top: 0.35rem;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
/* Phones: posters two-up, so the 32-ride garage is half the scroll and still a wall of art.
   (Under 360px a single column reads better.) */
@media (min-width: 360px) and (max-width: 559.98px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 0.85rem;
  }
  .card__link {
    box-shadow: 4px 5px 0 var(--shadow);
  }
  .card__bezel {
    margin: 5px 5px 0;
    padding: 4px;
    border-radius: 8px;
  }
  .card__play {
    right: 9px;
    bottom: 9px;
    width: 32px;
    height: 32px;
  }
  .card__play .icon {
    width: 14px;
    height: 14px;
  }
  .card__placard {
    padding: 0.5rem 0.65rem 0.8rem;
    gap: 0.1rem;
  }
  .card__year {
    font-size: 1.4rem;
  }
  .card__name {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
  .card__specs {
    gap: 0 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
  .card__specs > span + span::before {
    margin-right: 0.35rem;
  }
  .card__highlight {
    font-size: 0.85rem;
    line-height: 1.35;
  }
}

/* ---------- About ---------- */
.about {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: color-mix(in srgb, var(--paper) 70%, var(--paper-deep));
  border-top: 3px solid var(--ink);
}
.about__inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 3.5rem;
  }
}
.about__copy {
  max-width: 38em;
}
.lede {
  font-size: 1.25em;
  font-weight: 600;
}
.four-factors {
  padding: 1.1rem 1.2rem 1.4rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}
.four-factors .player {
  margin-bottom: 1.2rem;
  box-shadow: 4px 4px 0 var(--shadow);
}
.four-factors h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--coral-ink);
}
.four-factors ol {
  list-style: none;
  counter-reset: factor;
  margin: 0 0 1.2rem;
  padding: 0;
}
.four-factors li {
  counter-increment: factor;
  position: relative;
  padding: 0.35rem 0 0.35rem 2.8rem;
}
.four-factors li::before {
  content: counter(factor);
  position: absolute;
  left: 0;
  top: 0.25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--rust);
  color: var(--cream);
  border: 2px solid var(--sun);
  font-family: var(--font-sign);
  font-weight: 600;
}

/* ---------- Ride page ---------- */
.ride {
  padding-block: 1.5rem 4rem;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.35rem;
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  text-decoration: none;
}
.ride__layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 960px) {
  .ride__layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 2.5rem;
  }
}
.ride__title {
  margin-top: 1.6rem;
  font-family: var(--font-sign);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
}
.ride__year {
  font-family: var(--font-display);
  font-weight: 400;
  --outline: 1.5px;
  --drop-x: 4px;
  --drop-y: 4px;
}
.ride__original {
  font-style: italic;
  color: var(--ink-soft);
}
.story,
.from-dave {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem 0.4rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-left-width: 10px;
  border-left-color: var(--rust);
  border-radius: var(--radius);
}
.story h2,
.from-dave h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--coral-ink);
}
.story p {
  font-size: 1.1em;
}
.from-dave {
  border-left-color: var(--teal);
}
.placard {
  padding: 1.2rem 1.2rem 1.3rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}
@media (min-width: 960px) and (min-height: 760px) {
  /* Only sticky when the viewport is tall enough to show the whole placard. */
  .placard {
    position: sticky;
    top: 1.5rem;
  }
}
.placard__sign {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2em 0.8em;
  font-family: var(--font-sign);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--rust);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--sun);
}
.placard__facts {
  margin: 0 0 1rem;
}
.placard__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 2px dotted var(--card-edge);
}
.placard__facts dt {
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}
.placard__facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.placard__highlights {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
}
.placard__highlights li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.6rem;
}
.placard__highlights li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.75em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--chrome-shade));
  border: 2px solid var(--ink);
}
.road-signs {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
}
.road-sign {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 48%;
  padding: 0.7rem 1rem;
  background: var(--teal);
  color: var(--cream);
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 3px var(--teal),
    inset 0 0 0 5px rgb(244 239 211 / 0.6),
    4px 4px 0 var(--shadow);
}
@media (hover: hover) {
  .road-sign:hover {
    color: #fff;
  }
}
.road-sign--next {
  margin-left: auto;
  text-align: right;
}
.road-sign__dir {
  display: block;
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--sun);
}
.road-sign__name {
  display: block;
  font-family: var(--font-sign);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.related {
  margin-top: 3.5rem;
}

/* ---------- Error pages ---------- */
.error-page {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding-block: 5rem 6rem;
}
.error-page > :not(.sunburst) {
  position: relative;
  z-index: 1;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 6vw, 8rem);
  line-height: 1;
  margin: 0;
  --outline: 3px;
  --drop-x: 8px;
  --drop-y: 9px;
}
.error-page__title {
  font-family: var(--font-sign);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer);
  color: var(--cream);
  border-top: 3px solid var(--ink);
}
.site-footer a {
  color: var(--cream);
}
@media (hover: hover) {
  .site-footer a:hover {
    color: var(--sun);
  }
}
.farm-strip img {
  width: 100%;
  height: clamp(90px, 14vw, 180px);
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0.8;
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.site-footer__inner {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 1.5rem 1rem;
}
@media (min-width: 800px) {
  .site-footer__inner {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}
.site-footer__thanks {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  color: var(--sun);
  margin-bottom: 0.4rem;
}
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.socials a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
  font-family: var(--font-sign);
  letter-spacing: 0.06em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-footer__fine {
  padding-block: 1rem 2rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Hover lifts, pressed nudges and the hubcap spin are motion too. Last in the file so these
     win over the rules they cancel, which have the same specificity. */
  .btn:hover,
  .btn:active,
  .lane:hover,
  .lane:focus-visible,
  .lane:active,
  .card__link:hover,
  .card__link:focus-visible,
  .card__link:active,
  .player__facade:hover .player__hubcap,
  .player__facade:focus-visible .player__hubcap {
    transform: none;
  }
}