/* ============================================================
   BIG GUY ($BIG)
   Structure and type modelled on rockstargames.com/VI (Nov 2026):
   black top bar, the media first, condensed cream titles, pill
   buttons, rounded dark cards, Helvetica body copy. Colors are the
   Cleveland Browns' (dark brown, orange, white) at the owner's
   request, Nov 6 2026; the dog wears the Dawg Pound spiked collar.
   Rockstar's faces are proprietary: GTA Art Deco Condensed Heavy ->
   Mohave 700, GTA Art Deco Bold (wide) -> Jost 700, Helvetica Now ->
   the Helvetica Neue stack with Inter as the web fallback. The BIG
   GUY wordmark is Pricedown (the GTA logo face) pre-rendered to a
   PNG by scripts/make-wordmark.cjs: white, orange stroke, brown drop.
   Every color on the site comes from the tokens below.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Cleveland Browns colors (brown #311d00, orange #ff3c00, white) on Rockstar's VI structure */
  --bg: #130b04;
  --bg-grad: linear-gradient(189deg, #2b1a0b 0.55%, #211308 30.38%, #180e05 65.19%, #120903 100%);
  --surface: #281a0e;
  --surface-2: #332215;
  --border: #46311f;
  --border-2: #5c4230;
  --text: #fdfaf5;
  --muted: #cdb9a3;

  --brown: #311d00;
  --orange: #ff3c00;
  --orange-hot: #ff6a2b;
  --tan: #e9b98a;          /* dates and meta (Rockstar used lavender here) */
  --cream: #f7edc1;        /* titles */
  --gold: #e3aa3c;         /* the collar */
  --on-orange: #1f1000;


  --radius: 12px;
  --radius-lg: 18px;

  --font-display: "Mohave", "Arial Narrow", Impact, sans-serif;
  --font-wide: "Jost", "Futura", "Helvetica Neue", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 24px 60px rgb(0 0 0 / 0.55);

  --content-max: 1180px;
  --pad-x: clamp(16px, 4vw, 40px);
  --pad-y: clamp(44px, 6vw, 80px);
  --topbar-h: 72px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg-grad) fixed, var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.wrap {
  width: min(100% - 2 * var(--pad-x), var(--content-max));
  margin-inline: auto;
}

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: var(--cream);
}

.kicker {
  margin: 0 0 12px;
  font-family: var(--font-wide);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
}

h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--cream);
}

.sub {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.ticker { color: var(--cream); font-weight: 700; white-space: nowrap; }

/* the big wordmark: Pricedown "Big Guy" pre-rendered (public/images/big-guy-wordmark.png, 2124x820 with
   its glow baked in, so it sits a little wide of the text it replaces) */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-left: -2.2%;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px) scale(1.03); border-color: var(--tan); }
.btn.pink { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.btn.pink:hover { background: var(--orange-hot); border-color: var(--orange-hot); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; }
.btn .ico { width: 18px; height: 18px; }
.btn img.ico { width: 18px; height: 18px; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  background: #000;
  border-bottom: 3px solid var(--orange);
}
.topbar::after {
  /* the Browns helmet stripe: brown, white, brown */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 7px;
  background: linear-gradient(180deg, var(--brown) 0 2px, #fff 2px 5px, var(--brown) 5px 7px);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand img:not(.brand-wordmark) { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.brand .brand-wordmark { display: block; width: calc(48px * 2124 / 820); max-width: none; height: 48px; margin-left: -8px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.social:hover { border-color: var(--orange); transform: translateY(-1px); }
.social img { width: 18px; height: 18px; }
.social[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.social[aria-disabled="true"]:hover { transform: none; border-color: var(--border-2); }

@media (max-width: 560px) {
  .topbar-actions .btn { padding-inline: 16px; }
}
/* narrow phones: smaller marks and tighter gaps so the wordmark never runs into the buttons; the dog mark goes at 340px */
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand img:not(.brand-wordmark) { width: 34px; height: 34px; border-radius: 8px; }
  .brand .brand-wordmark { height: 40px; width: calc(40px * 2124 / 820); margin-left: -6px; }
  .topbar-inner { gap: 10px; }
  .topbar-actions { gap: 8px; }
  .topbar-actions .social { width: 38px; height: 38px; }
  .topbar-actions .btn { padding-inline: 14px; min-height: 38px; }
}
@media (max-width: 340px) {
  .brand img:not(.brand-wordmark) { display: none; }
  .brand .brand-wordmark { margin-left: 0; }
}

/* ---------- Hero. Phones: the clip first, then the dog portrait with the BIG GUY wordmark over its bottom edge,
   the pets line and the copy. Desktop: the clip first and full width, then portrait
   (same straddling wordmark), copy and logo in one row. ---------- */

.hero { padding-block: clamp(16px, 2.5vw, 32px) clamp(48px, 7vw, 90px); }
.hero-top {
  display: grid;
  grid-template-areas: "video" "launch" "portrait" "copy";
  gap: clamp(22px, 3vw, 32px);
  align-items: center;
}
.hero-portrait {
  position: relative;
  grid-area: portrait;
  margin: 0 0 var(--wordmark-overhang, 52px);   /* room for the part of the wordmark that hangs below */
  justify-self: center;
  width: min(100%, 460px);
}
.hero-portrait-box {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow), 0 0 0 1px rgb(255 255 255 / 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.hero-portrait-box:hover { transform: scale(1.01); }
.hero-portrait-box.is-petted { animation: pet 0.28s cubic-bezier(0.2, 1.6, 0.4, 1); }
.hero-portrait-box:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.hero-portrait-box img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.hero-portrait-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 100%);
  pointer-events: none;
}
/* the wordmark shares the portrait's grid area, bottom-centered, then slides down past the edge (collar stays visible) */
.hero-head {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: min(84%, 380px);
  margin: 0;
  transform: translate(-50%, 45%);   /* hangs 45% of its height below the box */
  pointer-events: none;
}
.hero-title { margin: 0; }
/* the game's PET prompt, top-right of the portrait */
.hud {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  gap: 6px;
  justify-items: end;
  pointer-events: none;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 12px rgb(0 0 0 / 0.6);
}
.hud-row { display: inline-flex; align-items: center; gap: 10px; }
.hud-key {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
  text-shadow: none;
}
.hud-row.is-live .hud-key { background: var(--orange); border-color: var(--orange); color: var(--on-orange); box-shadow: 0 0 0 3px rgb(255 60 0 / 0.25); }
.hud-key.is-tap { border-radius: 8px; font-size: 0.62rem; letter-spacing: 0.08em; }
.hud-key.is-pad { font-size: 0.95rem; }

.plus-one {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--orange);
  text-shadow: 0 2px 0 var(--brown), 0 0 18px rgb(255 60 0 / 0.5);
  pointer-events: none;
  animation: floatup 0.9s ease-out forwards;
}
.pets {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  margin: 0;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 12px rgb(0 0 0 / 0.6);
}
.pets strong { color: var(--cream); font-family: var(--font-wide); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; margin-right: 6px; }
.pets-hint { margin-left: 10px; opacity: 0.7; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pets-hint[hidden] { display: none; }

/* the contract address bar + links, right under the clip */
.launch { grid-area: launch; display: grid; gap: 12px; }
.launch[hidden] { display: none; }
.hero-top:has(> .launch[hidden]) { grid-template-areas: "video" "portrait" "copy"; }
.ca-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ca-bar[disabled] { cursor: default; color: var(--muted); }
.ca-bar .ca-value { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-bar .ca-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--orange); }
.ca-bar .ca-action { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); }
.ca-bar .ca-action svg { width: 18px; height: 18px; }
.ca-bar[disabled] .ca-action { display: none; }
.ca-bar .ico-check { display: none; }
.ca-bar.is-copied .ico-copy { display: none; }
.ca-bar.is-copied .ico-check { display: block; color: var(--orange-hot); }
.launch-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.launch-links .btn { width: 100%; }
@media (min-width: 880px) {
  .launch { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
  .launch .toast { grid-column: 1 / -1; }
  .launch-links { grid-template-columns: repeat(3, auto); }
  .launch-links .btn { width: auto; min-width: 128px; }
}
.hero-copy { grid-area: copy; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 60ch; }
.hero-copy p { margin: 0 0 14px; }
.hero-copy strong { color: var(--cream); font-weight: 700; }
.hero-copy a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.hero-copy a:hover { color: var(--orange-hot); }
/* controller prompts inside the copy: small round caps like the game's HUD, not links */
.hero-copy kbd {
  display: inline-grid; place-items: center;
  min-width: 1.55em; height: 1.55em; padding: 0 0.4em; margin: 0 0.08em;
  border-radius: 999px; border: 1.5px solid rgb(247 237 193 / 0.6);
  background: rgb(0 0 0 / 0.35); color: var(--cream);
  font: 700 0.76em/1 "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em;
  vertical-align: -0.2em;
}
.hero-pads { display: grid; gap: 6px; color: var(--tan); font-size: 0.94em; }
.hero-pads strong { color: var(--orange); margin-right: 0.15em; white-space: nowrap; }
/* the official GTA VI mark, small, heading the copy */
.hero-game { margin: 0 0 16px; }
.hero-game img { display: block; width: clamp(96px, 12vw, 128px); height: auto; filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.55)); }

@media (min-width: 880px) {
  /* first screen = the clip, edge to edge, exactly the viewport height under the top bar and its stripe
     (the 7px stripe overlays the hero's top edge, so the hero pads by that much) */
  .hero { padding-top: 7px; }
  .hero-top {
    --wordmark-overhang: 66px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "video video" "launch launch" "portrait copy";
  }
  .hero-top:has(> .launch[hidden]) {
    grid-template-areas: "video video" "portrait copy";
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: clamp(36px, 4.5vw, 64px);
    align-items: start;
  }
  .hero-media {
    width: auto;
    margin-inline: calc(50% - 50vw);   /* break out of the content column to the viewport edges */
    height: calc(100svh - var(--topbar-h) - 7px);
  }
  .hero-top > .hero-media .hero-clip {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .hero-media .sound-toggle { right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); }
  .hero-portrait { justify-self: center; width: min(100%, 440px); }
  .hero-head { width: min(86%, 380px); }
  /* the copy column is exactly as tall as the portrait + hanging wordmark: logo on the box's top edge,
     the link on the wordmark's bottom edge, the rest spaced evenly between */
  .hero-copy { max-width: 56ch; align-self: stretch; justify-self: center; display: flex; flex-direction: column; justify-content: space-between; }
  .hero-copy > :last-child { margin-bottom: 0; }
}

.hero-media { position: relative; grid-area: video; }
.hero-media .yt,
.hero-media .hero-clip {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-media .hero-clip { border-radius: var(--radius-lg); }
.hero-clip {
  display: block;
  width: 100%;
  height: auto;            /* the width/height attributes only reserve space; keep 16:9 from the file */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.play-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 84px;
  height: 84px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-orange);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
  cursor: pointer;
}
.play-fallback[hidden] { display: none; }
.play-fallback svg { width: 38px; height: 38px; fill: currentColor; margin-left: 5px; }

.sound-toggle {
  position: absolute;
  z-index: 2;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.12s ease;
}
.sound-toggle:hover { background: rgb(0 0 0 / 0.8); transform: translateY(-1px); }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle .ico-on { display: none; }
.sound-toggle.is-on { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.sound-toggle.is-on .ico-off { display: none; }
.sound-toggle.is-on .ico-on { display: block; }

.toast { min-height: 1.4em; margin: 8px 0 0; font-size: 0.9rem; color: var(--orange-hot); }

/* ---------- Section intro ---------- */

.section-head { max-width: 800px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.section-head > :last-child { margin-bottom: 0; }
.section-head h2 { -webkit-text-stroke: 0.35px currentColor; }

/* ---------- Sections ---------- */

.band { padding-block: var(--pad-y); }

/* ---------- About: four short lines ---------- */

.about-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.about { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; }
.about h2 { margin-bottom: 18px; }
.about p { margin: 0 0 0.9em; }
.about p:last-child { margin-bottom: 0; }
.about-figure { margin: 0; }
.about-figure img { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about-figure figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
@media (min-width: 880px) { .about-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ---------- Trailers ---------- */

.cards-title { margin: 0 0 18px; font-family: var(--font-body); font-weight: 700; font-size: 1.35rem; text-transform: none; color: var(--text); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; border-radius: var(--radius); background: var(--surface); color: var(--text); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { text-decoration: none; transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow); }
.card-media { display: block; position: relative; aspect-ratio: 16 / 9; background: #000; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media .dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 4px; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.75rem; font-weight: 700; }
.card-body { display: block; padding: 16px 18px 18px; }
.card-body strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.card-body span { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--muted); }

/* ---------- Banner: Jason and the dog, edge to edge ---------- */

.banner { margin: 0; }
.banner img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
  object-position: 62% center;   /* keeps Jason and the dog when phones crop the sides */
}

/* ---------- Screen time: the airtime argument, a runtime bar, two stills ---------- */

.band.airtime { padding-top: clamp(36px, 5vw, 64px); }
.airtime .lede { max-width: 62ch; margin: 12px auto 0; color: var(--tan); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.5; }
.runtime {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  max-width: 980px; margin: 0 auto clamp(32px, 4.5vw, 52px); padding-bottom: 36px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; color: var(--tan);
}
.runtime-bar { position: relative; height: 10px; border-radius: 999px; background: rgb(247 237 193 / 0.14); }
.runtime-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--at); border-radius: 999px; background: var(--orange); }
.runtime-mark {
  position: absolute; left: var(--at); top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--orange); border: 3px solid var(--cream);
  box-shadow: 0 0 0 5px rgb(255 60 0 / 0.25), 0 0 26px rgb(255 60 0 / 0.6);
  font-style: normal;
}
.runtime-mark > span { position: absolute; top: 100%; left: 0; margin-top: 12px; white-space: nowrap; color: var(--cream); font-size: 1.05rem; }
.runtime-mark b { color: var(--orange); margin-right: 0.35em; }
.airtime-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.airtime-copy { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; }
.airtime-copy p { margin: 0 0 0.9em; }
.airtime-copy p:last-child { margin-bottom: 0; }
.airtime-copy a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.airtime-copy a:hover { color: var(--orange-hot); }
.precedents { list-style: none; margin: 22px 0 24px; padding: 0; border-top: 1px solid rgb(247 237 193 / 0.14); font-size: 0.92em; }
/* closing block: the bet in display type + the link, anchored to the bottom of the column so it ends where the stills end */
.airtime-close { margin-top: auto; padding-top: 8px; }
.airtime-quote {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.02; letter-spacing: 0.01em;
  color: var(--cream); -webkit-text-stroke: 0.35px currentColor;
}
.airtime-quote em { font-style: normal; color: var(--orange); }
.precedents li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgb(247 237 193 / 0.14); }
.precedents strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1em; color: var(--orange); }
.precedents b { color: var(--cream); }
.precedents span { color: var(--tan); }
.airtime-stills { display: grid; gap: 18px; }
.airtime-stills figure { margin: 0; }
.airtime-stills img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.airtime-stills figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
@media (min-width: 560px) and (max-width: 879px) { .airtime-stills { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) {
  .airtime-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .airtime-copy { display: flex; flex-direction: column; }
  .airtime-stills { position: sticky; top: calc(var(--topbar-h) + 24px); }
}

/* ---------- Footer (black, like Rockstar's) ---------- */

.site-footer {
  padding: 48px 0 56px;
  background: #000;
}
.site-footer .wrap { display: grid; gap: 22px; justify-items: center; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.footer-links a { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.footer-links a:hover { color: var(--orange); }
.disclaimer { margin: 0; max-width: 72ch; font-size: 0.85rem; line-height: 1.6; color: var(--muted); }
.footer-meta p { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* ---------- Legal pages + 404 ---------- */

.legal-page { padding-block: clamp(40px, 6vw, 72px); }
.legal-page article { width: min(100% - 2 * var(--pad-x), 760px); margin-inline: auto; }
.legal-page h1 { margin: 0 0 6px; font-family: var(--font-body); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--orange); }
.legal-date { margin: 0 0 20px; color: var(--tan); font-size: 0.9rem; }
.legal-intro { font-size: 1.1rem; }
.legal-page h2 { margin-top: 36px; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; text-transform: none; color: var(--cream); }
.legal-page ul { padding-left: 20px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { text-decoration: underline; text-underline-offset: 3px; }
.legal-home { min-height: 38px; padding: 6px 16px; font-size: 0.9rem; }

/* ---------- Ticker band (orange, Rockstar star separators) ---------- */

.ticker-band {
  overflow: hidden;
  background: var(--orange);
  color: var(--on-orange);
  border-block: 3px solid var(--brown);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marq 32s linear infinite;
}
.ticker-track span {
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track span::after {
  content: "\2605";
  margin-inline: 22px;
  font-size: 0.8em;
  color: var(--brown);
  vertical-align: 0.1em;
}
.ticker-band:hover .ticker-track { animation-play-state: paused; }

/* ---------- Motion ---------- */

@keyframes marq { to { transform: translateX(-50%); } }
@keyframes pet { 0% { transform: scale(1); } 40% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pop {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* scroll reveals: hidden only once the script runs, popped in with a little overshoot */
.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--i, 0) * 90ms) both; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .hero-portrait-box.is-petted { animation: none; }
  .plus-one { animation-duration: 0.01s; }
  .js .reveal, .js .reveal.is-in { opacity: 1; animation: none; }
  .btn:hover, .card:hover { transform: none; }
}