/* ============================================================
   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(56px, 8vw, 110px);
  --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; }
}

/* ---------- Hero. Phones: the dog portrait first with the BIG GUY wordmark straddling its bottom edge (half on,
   half off), then the clip, the copy and the GTA VI logo. 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: "portrait" "video" "copy";
  gap: clamp(22px, 3vw, 32px);
  align-items: center;
}
.hero-portrait {
  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; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgb(255 255 255 / 0.06); }
.hero-portrait 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 {
  grid-area: portrait;
  align-self: end;
  justify-self: center;
  z-index: 2;
  width: min(84%, 380px);
  margin-bottom: var(--wordmark-overhang, 52px);
  transform: translateY(45%);
  pointer-events: none;
}
.hero-title { margin: 0; }
.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); }
/* 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: 60px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "video video" "copy portrait";
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: clamp(36px, 4.5vw, 64px);
    align-items: center;
  }
  .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); }
  .hero-copy { max-width: 56ch; align-self: center; justify-self: center; }
}

.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;
}

.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; }

.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.ca-pill[disabled] { cursor: default; color: var(--muted); }
.ca-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--tan); }
.ca-value { font-family: var(--font-mono); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-action { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); }
.ca-action svg { width: 16px; height: 16px; }
.ca-pill[disabled] .ca-action { display: none; }
.ca-pill .ico-check { display: none; }
.ca-pill.is-copied .ico-copy { display: none; }
.ca-pill.is-copied .ico-check { display: block; color: var(--orange-hot); }
.toast { min-height: 1.4em; margin: 8px 0 0; font-size: 0.9rem; color: var(--orange-hot); }

/* ---------- Lore: the Newswire article look ---------- */

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

.article-grid {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 880px) {
  .article-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .article-figure { position: sticky; top: calc(var(--topbar-h) + 24px); }
}
.article-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--orange);
}
.article-sub {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--cream);
}
.article-date { margin: 0 0 28px; font-size: 0.9rem; color: var(--tan); }
.article-body p { margin: 0 0 1.15em; max-width: 62ch; }
.article-body .lede { font-weight: 700; font-size: 1.15rem; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.article-body a:hover { color: var(--orange-hot); }

.article-figure { margin: 0; }
.article-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.article-figure figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }

/* ---------- 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; }

/* ---------- Watch more: the trailer cards ---------- */

.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 { 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 { 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); }
.cards-title { margin: 0 0 18px; font-family: var(--font-body); font-weight: 700; font-size: 1.35rem; text-transform: none; color: var(--text); }

/* ---------- Logo lockup + links ---------- */

.lockup { text-align: center; overflow: hidden; } /* the rays reach past the viewport on phones */
.lockup-logo {
  position: relative;
  isolation: isolate;
  width: clamp(180px, 28vw, 240px);
  margin: 0 auto 22px;
}
.lockup-logo::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 60 0 / 0.26) 0%, rgb(255 60 0 / 0.10) 38%, transparent 66%);
}
.lockup-logo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), 0 0 0 1px rgb(255 255 255 / 0.06);
  animation: bob 4.5s ease-in-out infinite;
}
.lockup-meta {
  margin: 0;
  text-align: center;
  color: var(--tan);
  font-family: var(--font-wide);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lockup-meta .sep { margin-inline: 12px; opacity: 0.45; font-weight: 400; }
.links-row { margin: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 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-socials { display: flex; gap: 10px; }
.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.82rem; color: var(--muted); text-align: justify; hyphens: auto; }
.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 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, .lockup-logo img { animation: none; }
  .js .reveal, .js .reveal.is-in { opacity: 1; animation: none; }
  .btn:hover, .card:hover { transform: none; }
}