@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ─── Variables ─────────────────────────────────────────────────────────── */

:root {
  /* Colour */
  --clr-bg:          #151515;
  --clr-bg-raised:   #1e1e1e;
  --clr-bg-card:     #222222;
  --clr-red:         #D91E18;
  --clr-red-bright:  #FF2B24;
  --clr-yellow:      #F5C518;
  --clr-off-white:   #F0EDE8;
  --clr-muted:       #888888;
  --clr-border:      rgba(240, 237, 232, 0.08);

  /* Typography */
  --font-display:    'Bebas Neue', sans-serif;
  --font-condensed:  'Barlow Condensed', sans-serif;
  --font-body:       'Barlow', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  3rem;
  --text-5xl:  4.5rem;
  --text-6xl:  7rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --max-width:    1280px;
  --gutter:       clamp(1rem, 5vw, 2.5rem);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* Surface extras */
  --clr-bg-dark:        #0e0e0e;
  --clr-bg-darker:      #111111;
  --clr-border-solid:   #2a2a2a;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* No double-tap zoom: a quick second tap on a link or the carousel zoomed
     the page in on phones. Pinch zoom still works, for anyone who needs it. */
  touch-action: manipulation;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-off-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

input, textarea, select {
  font: inherit;
}

/* ─── Base Typography ────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 { font-size: clamp(var(--text-4xl), 10vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-3xl), 6vw,  var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 4vw,  var(--text-4xl)); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

p {
  max-width: 65ch;
  line-height: 1.7;
}

.lead {
  font-family: var(--font-condensed);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.label {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.accent-red    { color: var(--clr-red); }
.accent-yellow { color: var(--clr-yellow); }
.muted         { color: var(--clr-muted); }

/* ─── Layout Utilities ───────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-24);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-condensed);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-out),
              color            var(--duration-fast) var(--ease-out),
              border-color     var(--duration-fast) var(--ease-out);
}

.btn-primary {
  background-color: var(--clr-red);
  color: var(--clr-off-white);
}

.btn-primary:hover {
  background-color: var(--clr-red-bright);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--clr-off-white);
  color: var(--clr-off-white);
}

.btn-outline:hover {
  background-color: var(--clr-off-white);
  color: var(--clr-bg);
}

.btn-ghost {
  background-color: transparent;
  color: var(--clr-off-white);
  padding-inline: 0;
}

.btn-ghost:hover {
  color: var(--clr-red-bright);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out);
}

.card:hover {
  border-color: rgba(240, 237, 232, 0.2);
}

/* ─── Dividers ───────────────────────────────────────────────────────────── */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--clr-border);
  border: none;
}

.divider-red {
  background-color: var(--clr-red);
}

/* ─── Focus ──────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--clr-yellow);
  outline-offset: 3px;
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21, 21, 21, 0.98);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3rem;
  padding: 0 3rem 0 calc(3rem - 30px);
  height: 120px;
  backdrop-filter: blur(8px);
  overflow: visible;
  --hang-end: 338px;
}

.nav-rule {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 33px);
  pointer-events: none;
  overflow: visible;
}

.nav-rule-line {
  fill: none;
  stroke: var(--clr-border);
  stroke-width: 2;
}

@media (max-width: 768px) {
  .nav-rule { display: none; }
}

/* Badge trapezoid */
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 500px;
  height: 33px;
  background: rgba(21, 21, 21, 1);
  clip-path: polygon(0 0, calc(var(--hang-end) + 57px) 0, var(--hang-end) 33px, 0 33px);
}

.nav-logo {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: flex;
  padding-top: 20px;
  min-width: 0;
}

.nav-logo img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  display: inline-block;
  color: #aaa;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links a:hover {
  color: var(--clr-off-white);
}

.nav-links a[aria-current="page"] {
  color: var(--clr-off-white);
}

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background-color: var(--clr-red);
}

.nav-links a[aria-current="page"]:hover {
  color: var(--clr-off-white);
}

.nav-cta {
  background: var(--clr-red);
  color: var(--clr-off-white) !important;
  padding: 7px 18px;
  border-radius: 2px;
  transition: background var(--duration-fast) var(--ease-out);
}

.nav-cta:hover {
  background: var(--clr-red-bright);
  color: var(--clr-off-white) !important;
}

/* A phone on its side is wide enough for the desktop nav but under 450px
   tall, and a 150px sticky bar took a third of the screen. On a screen that
   short the nav shrinks and scrolls away with the page. Touch screens only,
   so a short desktop window keeps its sticky nav. */
@media (max-height: 500px) and (min-width: 769px) and (pointer: coarse) {
  .nav {
    position: relative;
    height: 72px;
  }

  .nav-logo {
    padding-top: 12px;
  }

  .nav-logo img {
    max-width: 192px;
  }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
}

.hero:not(.hero--loaded):not(.hero--error) .hero-content {
  opacity: 0;
}

.hero.hero--loaded .hero-content,
.hero.hero--error .hero-content {
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.5) 100%),
    var(--hero-bg-image, none),
    radial-gradient(ellipse at 20% 100%, rgba(100, 50, 20, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(80, 30, 10, 0.15) 0%, transparent 50%);
  background-size: cover, cover, auto, auto;
  background-position: center right, center right, 0 0, 0 0;
  background-color: #181410;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3.5rem 3rem;
  align-items: start;
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 197, 24, 0.14);
  border: 1px solid rgba(245, 197, 24, 0.45);
  color: var(--clr-yellow);
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 1.2rem;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

.hero-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-yellow);
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}

/* Upcoming is deliberately quiet — a live release should be the only thing in
   the masthead wearing the brand colour. */
.hero-tag--coming-soon {
  background: rgba(240, 237, 232, 0.08);
  border-color: rgba(240, 237, 232, 0.25);
  color: rgba(240, 237, 232, 0.78);
}

.hero-tag--coming-soon::before {
  background: rgba(240, 237, 232, 0.6);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.hero-title {
  font-size: clamp(52px, 5.5vw, 80px);
  line-height: 0.93;
  letter-spacing: 0.025em;
  margin-bottom: 1.2rem;
}

.hero-title-sub {
  font-size: 20px;
  color: var(--hero-text-colour, var(--clr-off-white));
  letter-spacing: 0.06em;
  display: block;
  margin-top: 0.3em;
}

.hero-logo {
  display: block;
  max-height: 300px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: var(--hero-logo-margin, 0px);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 1rem;
  margin-bottom: 1.6rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(240, 237, 232, 0.16);
  border-bottom: 1px solid rgba(240, 237, 232, 0.16);
  max-width: 460px;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 1.4rem;
  border-left: 1px solid rgba(240, 237, 232, 0.14);
}

/* The first item in each wrapped row loses its divider, so a row never opens
   on a hanging rule. */
.hero-meta-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-meta-label {
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hero-bullet-colour, var(--clr-yellow));
  opacity: 0.9;
}

.hero-meta-value {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--hero-text-colour, var(--clr-off-white));
  white-space: nowrap;
}

.hero-sub {
  font-size: 16px;
  color: var(--hero-text-colour, var(--clr-off-white));
  line-height: 1.6;
  max-width: 46ch;
}

.hero-sub strong {
  color: var(--hero-text-colour, var(--clr-off-white));
  font-weight: 600;
}

/* ─── Volatility meter ───────────────────────────────────────────────────── */

/* Rising bars rather than a word. Height carries the reading on its own, so it
   still says "high" in a screenshot, at a glance, and in greyscale. The word
   itself survives as the tooltip and the accessible name. */
.vol {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  vertical-align: -2px;
  --vol-colour: var(--clr-yellow);
}

.vol-bar {
  width: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.22;
}

.vol-bar--on {
  background: var(--vol-colour);
  opacity: 1;
}

/* Percentages, not fixed heights, so the whole meter scales from the one
   `height` on .vol wherever it is used. */
.vol-bar:nth-child(1) { height: 38%; }
.vol-bar:nth-child(2) { height: 53%; }
.vol-bar:nth-child(3) { height: 69%; }
.vol-bar:nth-child(4) { height: 84%; }
.vol-bar:nth-child(5) { height: 100%; }

/* The masthead is themed per game, so the meter follows that game's accent
   rather than the site default. */
.hero-meta .vol {
  --vol-colour: var(--hero-bullet-colour, var(--clr-yellow));
  /* Sized to the 21px display type it sits beside in the stats row. */
  height: 19px;
  gap: 4px;
}

.hero-meta .vol-bar {
  width: 6px;
}

/* ─── Hero Video Panel ───────────────────────────────────────────────────── */

.hero-right {
  display: flex;
  flex-direction: column;
  align-self: center;
  /* One shadow under the card and buttons together, lifting them off the
     hero art; drop-shadow follows their combined outline */
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.hero-video {
  position: relative;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  border: 1px solid var(--clr-border-solid);
  border-bottom: none;
  cursor: pointer;
}

.video-thumb {
  width: 100%;
  height: 100%;
  background-image: var(--hero-thumb-image, none);
  background-size: cover;
  background-position: center;
  transition: filter var(--duration-base) var(--ease-out);
}

.hero-video:hover .video-thumb {
  filter: brightness(0.8);
}

/* No trailer: a still screenshot, nothing to click */
.hero-video--still {
  cursor: default;
}

.hero-video--still:hover .video-thumb {
  filter: none;
}

.play-btn[hidden] {
  display: none;
}

.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.play-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(217, 30, 24, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.hero-video:hover .play-circle {
  transform: scale(1.08);
  background: var(--clr-red-bright);
}

.play-triangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid white;
  margin-left: 4px;
}

.play-label {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.video-meta {
  border-left: 1px solid var(--clr-border-solid);
  border-right: 1px solid var(--clr-border-solid);
  background: var(--clr-bg-darker);
  padding: 0.9rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-meta-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.video-badge {
  background: var(--clr-yellow);
  color: #111;
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 1px;
  display: inline-block;
  align-self: flex-start;
}

/* Matches the masthead tag. The two chips label the same fact about the same
   game, so they must not disagree about what colour that fact is: yellow when
   the game is live, quiet neutral when it is coming soon. */
.video-badge--coming-soon {
  background: rgba(240, 237, 232, 0.08);
  color: rgba(240, 237, 232, 0.78);
}

.video-game-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--clr-off-white);
  line-height: 1;
}

.video-meta-right {
  text-align: right;
}

.video-launch {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: #666;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}

.video-platform {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: #444;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--clr-border-solid);
  border-radius: 3px;
  overflow: hidden;
}

.video-actions .btn {
  justify-content: center;
  padding: 13px 0;
  border-radius: 0;
  border: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.video-actions .btn-secondary {
  background: #181818;
  color: #888;
  border-left: 1px solid var(--clr-border-solid);
}

.video-actions .btn-secondary:hover {
  background: #1f1f1f;
  color: var(--clr-off-white);
}

.video-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--clr-red) 0%, transparent 100%);
}

/* ─── Section Header ─────────────────────────────────────────────────────── */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-solid);
}

.section-label {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 0.25rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.06em;
  color: var(--clr-off-white);
  line-height: 1;
}

.section-link {
  font-family: var(--font-condensed);
  color: #888;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.section-link:hover {
  color: var(--clr-off-white);
}

/* ─── Games Grid ─────────────────────────────────────────────────────────── */

.games-section {
  padding: 3rem;
  background: var(--clr-bg);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.game-card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: pointer;
  background: #1f1f1f;
}

.game-card-art {
  width: 100%;
  height: 100%;
  transition: transform 0.4s var(--ease-out);
}

.game-card:hover .game-card-art {
  transform: scale(1.05);
}

.game-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}

.game-card:hover .game-card-overlay {
  opacity: 1;
}

.game-card-tag {
  background: var(--clr-red);
  color: var(--clr-off-white);
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 1px;
  margin-bottom: 4px;
  display: inline-block;
  align-self: flex-start;
}

.game-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--clr-off-white);
  line-height: 1;
  margin-bottom: 3px;
}

.game-card-meta {
  display: flex;
  gap: 6px;
  font-family: var(--font-condensed);
  font-size: 10px;
  color: #888;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Placeholder Art ────────────────────────────────────────────────────── */

/* Placeholder art: coloured glows over a dark base, with the brand's grunge
   triangles blended in on top for texture. art-texture.webp is a neutral-grey
   texture map, not the photo — the triangles high-passed so the vignette and
   black lower third flatten to 50% grey, which soft-light leaves untouched.
   Only the facets and grunge lighten or darken the glow beneath. Built by
   tools/make-art-texture.sh.

   The url is written out in each rule rather than held in a custom property:
   browsers disagree on what a relative url() inside a variable is relative to,
   and pages under games/ and news/ would resolve it differently. */

.art-1, .art-2, .art-3, .art-4, .art-5, .art-6 {
  background-blend-mode: soft-light, normal, normal, normal;
}

.art-1 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 40% 60%, rgba(232,101,10,0.7) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(245,197,24,0.5) 0%, transparent 40%), linear-gradient(135deg, #1a0500, #2a0a00); }
.art-2 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 60% 40%, rgba(30,100,200,0.5) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(100,0,200,0.4) 0%, transparent 40%), linear-gradient(135deg, #030a1a, #0a0520); }
.art-3 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 50% 50%, rgba(0,180,100,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(245,197,24,0.3) 0%, transparent 40%), linear-gradient(135deg, #001a05, #001505); }
.art-4 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 30% 50%, rgba(217,30,24,0.5) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(180,30,24,0.3) 0%, transparent 40%), linear-gradient(135deg, #1a0000, #250505); }
.art-5 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 60% 30%, rgba(200,150,0,0.5) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(200,100,0,0.3) 0%, transparent 40%), linear-gradient(135deg, #1a1000, #1a0800); }
.art-6 { background: url('../images/art-texture.webp') center / cover no-repeat, radial-gradient(circle at 50% 50%, rgba(80,0,180,0.5) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(200,0,100,0.3) 0%, transparent 40%), linear-gradient(135deg, #0a0015, #150020); }

/* Studio News with no images of its own: the red placeholder glow with the
   company logo over it. The logo is contained in an inset box rather than
   sized in pixels, so it fits every slot shape — the 4:1 homepage strip, the
   16:9 cards and the 90x66 thumbnail — from one rule. */
.news-art--studio {
  position: relative;
}

.news-art--studio::after {
  content: '';
  position: absolute;
  inset: 24% 16%;
  background: url('../images/bbg-logo-studio.webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}

/* ─── News Section ───────────────────────────────────────────────────────── */

.news-section {
  background: var(--clr-bg-darker);
  border-top: 1px solid var(--clr-border-solid);
  padding: 3rem;
}

.news-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1px;
  background: var(--clr-border-solid);
  align-items: stretch;
}

.news-card {
  background: var(--clr-bg-darker);
  padding: 1.8rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  background: #161616;
}

.news-card.featured {
  padding: 2rem;
}

.news-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--clr-border-solid);
}

.news-stack .news-card {
  flex: 1;
}

.news-tag {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-red-bright);
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--clr-red);
  padding-bottom: 2px;
}

/* Fixed ratio, not a fixed height: at 160px tall in a fluid card the crop
   drifted from 4:1 to 6.4:1 across screen widths, so no image could be
   composed for it reliably. 4:1 matches how it looked at ~1280. */
.news-thumb {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.news-thumb > div,
.news-thumb-sm > div {
  width: 100%;
  height: 100%;
}

.news-title {
  font-family: var(--font-condensed);
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-off-white);
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}

.news-card.featured .news-title {
  font-size: 22px;
  margin-bottom: 0.8rem;
}

.news-excerpt {
  font-size: var(--text-sm);
  color: #888;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
  max-width: none;
}

.news-date {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: #555;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
}

.news-card-sm {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.news-thumb-sm {
  width: 90px;
  height: 66px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-card-sm-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-title-sm {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-off-white);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Partners ───────────────────────────────────────────────────────────── */

.partners-section {
  background: var(--clr-bg);
  padding: 2rem 3rem;
  border-top: 1px solid var(--clr-border-solid);
}

.partners-label {
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #444;
  text-align: center;
  margin-bottom: 1.5rem;
  /* The global p rule caps width at 65ch, which at 10px is under 300px and
     pins the box to the left edge, so the centring had nothing to centre in. */
  max-width: none;
}

.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 3rem;
  flex-wrap: wrap;
}

/* The logos are white silhouettes; opacity does the greying, so they sit back
   as a set and hover lifts one without needing a second image. */
.partner-logo {
  display: block;
  height: auto;
  max-width: 100%;
  opacity: 0.26;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Mouse only: a tap leaves :hover stuck, and the tapped logo stayed lit */
@media (hover: hover) {
  .partner-logo:hover {
    opacity: 0.6;
  }
}

/* "And many more…" closes the set, in the same tone as the logos so it reads
   as part of the strip rather than a caption. */
.partner-more {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0.26;
}

/* Carousel mode, switched on by initPartnerCarousel(). Each item carries its
   own trailing space rather than the row using gap, so one set's width is an
   exact multiple of the loop and the seam never jumps. */
.partners-row--carousel {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partners-scroll var(--partners-duration, 40s) linear infinite;
}

.partners-track > * {
  flex: none;
  margin-right: 3.5rem;
}

/* Hover pauses it for a mouse. Only for a mouse: on a touchscreen a tap
   leaves :hover stuck on, and the strip stopped dead until the next tap
   somewhere else on the page. */
@media (hover: hover) {
  .partners-row--carousel:hover .partners-track {
    animation-play-state: paused;
  }
}

@keyframes partners-scroll {
  to { transform: translateX(var(--partners-loop, -50%)); }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--clr-bg-dark);
  border-top: 1px solid var(--clr-border-solid);
  padding: 2.5rem 3rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.footer-logo img {
  height: 36px;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.6;
  max-width: 190px;
  margin-bottom: 1rem;
}

.footer-licence {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: #3a3a3a;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col-title {
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  color: #555;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-links a:hover {
  color: var(--clr-off-white);
}

.footer-bottom {
  border-top: 1px solid var(--clr-border-solid);
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: var(--text-xs);
  color: #333;
}

.footer-credit {
  font-size: var(--text-xs);
  color: #333;
}

.footer-credit span {
  color: #555;
  font-weight: 600;
}

/* ─── Modals ─────────────────────────────────────────────────────────────── */

body.modal-open {
  overflow: hidden;
}

.modal {
  width: min(90vw, 1200px);
  max-height: 85vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--clr-border-solid);
  border-radius: 3px;
  background: var(--clr-bg-raised);
  color: var(--clr-off-white);
  overflow: hidden;
}

.modal[open] {
  display: flex;
  flex-direction: column;
}

/* A trailer stays 16:9 whichever way the screen is held; only the demo
   turns portrait (below) */
.modal--demo,
.modal--video {
  /* Cap width so 16:9 body + ~70px header never exceeds 85vh */
  width: min(90vw, 1200px, calc((85vh - 70px) * 16 / 9));
}

.modal--demo .modal-body,
.modal--video .modal-body {
  flex: none;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Narrower than tall (a phone held upright): the demo turns portrait. The
   games are responsive, so a 9:16 frame gets their portrait layout rather
   than a letterboxed strip. Capped so frame + header fits 90vh. */
@media (orientation: portrait) {
  .modal--demo {
    width: min(94vw, calc((90vh - 70px) * 9 / 16));
    max-height: 90vh;
  }

  .modal--demo .modal-body {
    aspect-ratio: 9 / 16;
  }
}

/* A phone, either way up: the demo takes the whole screen. vh on iOS Safari
   counts the space behind its toolbars, so a frame sized in vh ran off the
   bottom and the game was cut off; dvh is the part actually visible. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .modal--demo {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .modal--demo .modal-header {
    padding: var(--space-2) var(--space-4);
  }

  .modal--demo .modal-title {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modal--demo .modal-body {
    flex: 1;
    aspect-ratio: auto;
  }
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--clr-border-solid);
  background: var(--clr-bg-darker);
}

.modal-title {
  font-family: var(--font-condensed);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--clr-muted);
  border-radius: 2px;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.modal-close:hover {
  color: var(--clr-off-white);
  background: rgba(255, 255, 255, 0.06);
}

.modal-body {
  flex: 1;
  min-height: 0;
  background: #0d0d0d;
  overflow: hidden;
}

.modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Nav — logo above links, no diagonal hang */
  .nav {
    flex-direction: column;
    height: auto;
    padding: 1rem 1.5rem;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
  }

  .nav::after {
    display: none;
  }

  .nav-logo {
    align-self: auto;
    padding-top: 0;
  }

  .nav-logo img {
    width: 200px;
    height: auto;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin-left: 0;
  }

  /* Hero — single column stack */
  .hero-content {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    max-width: 100%;
  }

  /* Constrain the whole left column as one unit — every child inside is then
     naturally left-aligned from the same edge as the centred video widget */
  .hero-left {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.5rem;
  }

  /* Game logo: centred within the left column, larger on mobile */
  .hero-logo {
    max-height: 360px;
    margin: var(--hero-logo-margin, 0px) auto;
    display: block;
  }

  /* Override global max-widths so elements fill the hero-left container */
  .hero-meta,
  .hero-sub {
    max-width: 100%;
  }

  /* Reset vertical centering — not needed in single column */
  .hero-right {
    align-self: auto;
  }

  /* Cap video width and centre it — explicit width keeps aspect-ratio working */
  .hero-video,
  .video-meta {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Games — single column */
  .games-grid {
    grid-template-columns: 1fr;
  }

  /* News — single column; unwrap the stack so all cards flow together */
  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-stack {
    gap: 1px;
  }

}

/* ─── Page Head (interior pages) ─────────────────────────────────────────── */

.page-head {
  position: relative;
  padding: 3.5rem 3rem 0;
  background-color: var(--clr-bg-darker);
  /* url() in a stylesheet resolves against the stylesheet, so this one path
     works from the site root and from /news/ alike.
     Layers, front to back: a fade into the section below, a left-weighted
     scrim that keeps the type legible while letting the texture read on the
     open right-hand side, then the texture itself. */
  background-image:
    linear-gradient(to bottom,
      rgba(17, 17, 17, 0) 45%,
      rgba(17, 17, 17, 0.9) 100%),
    linear-gradient(100deg,
      rgba(17, 17, 17, 0.95) 0%,
      rgba(17, 17, 17, 0.85) 30%,
      rgba(17, 17, 17, 0.45) 62%,
      rgba(17, 17, 17, 0.7) 100%),
    url('../images/bbg_background.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* Rule runs the full width of the block, like the hero's, while the copy stays
   on the same 3rem gutter as every section below it */
.page-head .hero-rule {
  margin-top: 2.5rem;
  margin-inline: -3rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--clr-off-white);
  margin-bottom: 0.6rem;
}

.page-lead {
  font-family: var(--font-condensed);
  font-size: var(--text-lg);
  font-weight: 300;
  color: #8a8a8a;
  max-width: 48ch;
}

/* ─── News Page ──────────────────────────────────────────────────────────── */

.news-page {
  background: var(--clr-bg);
  padding: 3rem;
}

/* Segmented filter bar — hairline gaps on a border-coloured bed */
.news-filters,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--clr-border-solid);
  margin-bottom: 1.5rem;
}

.news-filter,
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-bg-darker);
  padding: 0.8rem 1.3rem;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  box-shadow: inset 0 -2px 0 transparent,
              1px 0 0 var(--clr-border-solid),
              0 1px 0 var(--clr-border-solid);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.news-filter:hover,
.filter-btn:hover {
  color: var(--clr-off-white);
  background: #161616;
}

.news-filter[aria-pressed="true"],
.filter-btn[aria-pressed="true"] {
  color: var(--clr-off-white);
  background: #1a1a1a;
  box-shadow: inset 0 -2px 0 var(--clr-red),
              1px 0 0 var(--clr-border-solid),
              0 1px 0 var(--clr-border-solid);
}

.news-filter-count,
.filter-count {
  font-size: 10px;
  font-weight: 700;
  color: #555;
}

.news-filter[aria-pressed="true"] .news-filter-count,
.filter-btn[aria-pressed="true"] .filter-count {
  color: var(--clr-red-bright);
}

/* Top stories — the pinned story large, the next two stacked beside it */
.news-top {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.news-top-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
}

.news-top-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-darker);
  border: 1px solid var(--clr-border-solid);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.news-top-card:hover {
  border-color: #3a3a3a;
}

/* Both crops are 16:9 ('lead' 1920x1080, 'sub' 1280x720), so the box is pinned
   to that ratio — the images are cut for it */
.news-top-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.news-top-media > div,
.news-row-thumb > div {
  position: absolute;
  inset: 0;
  transition: transform 0.5s var(--ease-out);
}

.news-top-card:hover .news-top-media > div,
.news-row:hover .news-row-thumb > div {
  transform: scale(1.03);
}

.news-top-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: 1.25rem 1.4rem 1.4rem;
}

.news-top-card--lead .news-top-body {
  padding: 1.6rem 1.8rem 1.8rem;
}

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.news-meta .news-date {
  margin: 0;
}

.news-top-title,
.news-row-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-off-white);
  transition: color var(--duration-fast) var(--ease-out);
}

.news-top-card:hover .news-top-title,
.news-row:hover .news-row-title {
  color: #fff;
}

.news-top-card--lead .news-top-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.news-top-card--side .news-top-title {
  font-size: 1.15rem;
}

.news-top-excerpt,
.news-row-excerpt {
  color: #9a9a9a;
  font-size: 0.95rem;
  line-height: 1.6;
}

.news-top-more {
  margin-top: auto;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-red-bright);
}

/* All stories — filters, then a paged list */
.news-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-solid);
  scroll-margin-top: 140px;
}

.news-controls {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
}

.news-controls .news-filters {
  margin: 0;
}

.news-year {
  appearance: none;
  cursor: pointer;
  padding: 0 2.2rem 0 1rem;
  background-color: var(--clr-bg-darker);
  background-image: linear-gradient(45deg, transparent 50%, #888 50%),
                    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--clr-border-solid);
  color: var(--clr-off-white);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--clr-border-solid);
}

.news-row-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.news-row-title {
  font-size: 1.2rem;
  margin: 0.35rem 0 0.3rem;
}

.news-row-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-row-arrow {
  padding-right: 0.25rem;
  font-size: 1.3rem;
  color: #555;
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.news-row:hover .news-row-arrow {
  color: var(--clr-red-bright);
  transform: translateX(3px);
}

.news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.news-pager-count {
  color: #777;
  font-size: 0.9rem;
}

.news-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.news-page-btn {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  background: var(--clr-bg-darker);
  border: 1px solid var(--clr-border-solid);
  color: #999;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.news-page-btn:hover:not([disabled]) {
  color: var(--clr-off-white);
  border-color: #3a3a3a;
}

.news-page-btn[aria-current="page"] {
  color: var(--clr-off-white);
  border-color: var(--clr-red);
  box-shadow: inset 0 -2px 0 var(--clr-red);
}

.news-page-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* The related-stories cards on the article page keep the archive card */
.news-archive-body .news-tag {
  align-self: flex-start;
}

/* Archive grid */
/* Hairlines are drawn per card rather than as gaps over a coloured bed, so a
   part-filled last row leaves plain negative space instead of a grey block */
.news-archive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--clr-border-solid);
  border-top: none;
}

.news-archive:empty {
  display: none;
}

.news-archive-card {
  background: var(--clr-bg-darker);
  display: flex;
  flex-direction: column;
  box-shadow: 1px 0 0 var(--clr-border-solid),
              0 1px 0 var(--clr-border-solid);
  transition: background var(--duration-fast) var(--ease-out);
}

.news-archive-card:hover {
  background: #161616;
}

.news-archive-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.news-archive-media > div {
  width: 100%;
  height: 100%;
  transition: transform 0.4s var(--ease-out);
}

.news-archive-card:hover .news-archive-media > div {
  transform: scale(1.05);
}

.news-archive-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-archive-body .news-title {
  font-size: 17px;
}

.news-status,
.grid-status {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
  text-align: center;
  padding: 3.5rem 0 1rem;
  max-width: none;
}

/* ─── Press Strip ────────────────────────────────────────────────────────── */

.press-strip {
  background: var(--clr-bg-dark);
  border-top: 1px solid var(--clr-border-solid);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.press-strip-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--clr-off-white);
  margin-bottom: 0.45rem;
}

.press-strip-sub {
  font-size: var(--text-sm);
  color: #666;
}

.press-strip-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.press-strip-actions .btn {
  font-size: var(--text-sm);
}

/* ─── Article Page ───────────────────────────────────────────────────────── */

.article-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  overflow: hidden;
  background: var(--clr-bg-darker);
  border-bottom: 1px solid var(--clr-border-solid);
}

.article-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Placeholder gradients are decorative, not photographic — pull them back so
   the headline still carries the block */
.article-hero-bg--placeholder {
  opacity: 0.5;
}

.article-hero-inner {
  position: relative;
  max-width: 900px;
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--clr-off-white);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.article-game {
  position: relative;
  padding-left: 1.1rem;
}

.article-game::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--clr-red);
  transform: translateY(-50%) rotate(45deg);
}

.article-body {
  max-width: 780px;
  margin-inline: auto;
  padding: 3rem;
}

/* Base game screenshot at the top of a game story */
.article-screenshot {
  margin: 0 0 2.25rem;
  border: 1px solid var(--clr-border-solid);
  border-radius: 2px;
  overflow: hidden;
  background: var(--clr-bg-darker);
}

.article-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-p {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: #b0aca6;
  margin-bottom: 1.4rem;
  max-width: none;
}

.article-p strong {
  color: var(--clr-off-white);
  font-weight: 600;
}

.article-h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: var(--clr-off-white);
  margin: 2.5rem 0 1rem;
}

.article-quote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--clr-red);
}

.article-quote blockquote {
  font-family: var(--font-condensed);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--clr-off-white);
  margin-bottom: 0.8rem;
}

.article-quote figcaption {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.article-list li {
  position: relative;
  padding-left: 1.2rem;
  color: #b0aca6;
  line-height: 1.7;
}

.article-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  background: var(--clr-red);
}

.article-foot {
  max-width: 780px;
  margin-inline: auto;
  padding: 0 3rem 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.related-section {
  background: var(--clr-bg-darker);
  border-top: 1px solid var(--clr-border-solid);
  padding: 3rem;
}

.related-section .news-archive {
  border-top: 1px solid var(--clr-border-solid);
}

/* ─── News + Article Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {

  .news-archive {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-top {
    grid-template-columns: 1fr;
  }

  .news-top-side {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 768px) {

  .page-head {
    padding: 2.5rem 1.5rem 0;
  }

  .page-head .hero-rule {
    margin-top: 2rem;
    margin-inline: -1.5rem;
  }

  .news-page,
  .related-section,
  .article-hero {
    padding: 1.5rem;
  }

  .news-filters,
  .filter-bar {
    width: 100%;
  }

  .news-filter,
  .filter-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 1rem;
  }

  .news-archive {
    grid-template-columns: 1fr;
  }

  .news-top-side {
    grid-template-columns: 1fr;
  }

  .news-row {
    grid-template-columns: 120px 1fr;
    gap: 1rem;
  }

  .news-row-arrow,
  .news-row-excerpt {
    display: none;
  }

  .news-row-title {
    font-size: 1.05rem;
  }

  .article-hero {
    min-height: 300px;
  }

  .article-body {
    padding: 2rem 1.5rem;
  }

  .article-p {
    font-size: var(--text-base);
  }

  .article-foot {
    padding: 0 1.5rem 2rem;
  }

  .press-strip {
    padding: 2rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

}

/* ─── Forms ──────────────────────────────────────────────────────────────── */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.form-row .form-field {
  margin-bottom: 0;
}

.form-row + .form-field,
.form-row + .form-row {
  margin-top: 1.1rem;
}

.form-label {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.form-optional {
  color: #555;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: none;
}

.form-input {
  width: 100%;
  background: #191919;
  border: 1px solid var(--clr-border-solid);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  color: var(--clr-off-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

/* iOS zooms the whole page in on any field under 16px when it takes focus,
   and leaves it zoomed and pannable sideways afterwards */
@media (pointer: coarse) {
  .form-input,
  .news-year {
    font-size: 16px;
  }
}

.form-input::placeholder {
  color: #4a4a4a;
}

.form-input:hover {
  border-color: #3a3a3a;
}

.form-input:focus {
  outline: none;
  background: #1d1d1d;
  border-color: var(--clr-red);
}

/* Keyboard users still get the site-wide ring, on top of the red border */
.form-input:focus-visible {
  outline: 2px solid var(--clr-yellow);
  outline-offset: 2px;
}

/* Only flag a bad value once the visitor has actually tried to submit */
.contact-form.is-validated .form-input:invalid {
  border-color: var(--clr-red-bright);
}

.form-select {
  appearance: none;
  cursor: pointer;
  /* Chevron drawn in CSS so no extra asset is needed */
  background-image:
    linear-gradient(45deg, transparent 50%, #8a8a8a 50%),
    linear-gradient(135deg, #8a8a8a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.form-actions .btn {
  font-size: var(--text-sm);
}

.form-note {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  max-width: 32ch;
}

.form-status {
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--clr-border-solid);
  background: #191919;
  font-size: var(--text-sm);
  color: #9a9a9a;
  max-width: none;
}

.form-status--ok {
  border-left-color: var(--clr-red);
  color: var(--clr-off-white);
}

.form-status--error {
  border-left-color: var(--clr-red-bright);
  color: #d8b4b2;
}

.form-reveal {
  display: block;
  margin-top: 0.5rem;
  padding: 0;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-red-bright);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-reveal:hover {
  border-bottom-color: var(--clr-red-bright);
}

.form-reveal-address {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-condensed);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--clr-off-white);
  border-bottom: 1px solid var(--clr-red);
}

/* ─── Contact Page ───────────────────────────────────────────────────────── */

.contact-page {
  background: var(--clr-bg);
  padding: 3rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.contact-form-panel {
  background: var(--clr-bg-darker);
  border: 1px solid var(--clr-border-solid);
  padding: 2.25rem;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--clr-off-white);
  margin-bottom: 1.6rem;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border-solid);
}

.contact-card {
  background: var(--clr-bg-darker);
  padding: 1.5rem;
  border-bottom: 1px solid var(--clr-border-solid);
}

.contact-card:last-child {
  border-bottom: none;
}

/* The distribution note answers a question rather than offering a way to reach
   us, so it reads as a callout instead of another route card */
.contact-card--note {
  background: #191919;
}

.contact-card-label {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-off-white);
  margin-bottom: 0.55rem;
}

.contact-card-sub {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #7d7d7d;
  max-width: none;
  margin-top: 0.55rem;
}

.contact-card-link {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  transition: color var(--duration-fast) var(--ease-out);
}

.contact-card-link:hover {
  color: var(--clr-off-white);
}

.contact-card:target {
  box-shadow: inset 2px 0 0 var(--clr-red);
}

/* Jumping to an anchor otherwise lands it beneath the sticky nav */
.faqs,
.resources,
.contact-card[id],
.press-strip,
.games-page .catalogue,
.games-page .coming-soon {
  scroll-margin-top: 9rem;
}

/* These margins clear the sticky nav. Where the nav scrolls away (a phone on
   its side, see .nav) there is nothing to clear, and they left a gap. */
@media (max-height: 500px) and (min-width: 769px) and (pointer: coarse) {
  .news-list-head,
  .resources,
  .contact-card[id],
  .press-strip,
  .games-page .catalogue,
  .games-page .coming-soon {
    scroll-margin-top: 1rem;
  }
}

.contact-licences {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.contact-licences li {
  position: relative;
  padding-left: 0.95rem;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #9a9a9a;
}

.contact-licences li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--clr-red);
  transform: rotate(45deg);
}

/* ─── Contact Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-panel {
    padding: 2rem;
  }

}

@media (max-width: 768px) {

  .contact-page {
    padding: 1.5rem;
  }

  .contact-form-panel {
    padding: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-row .form-field {
    margin-bottom: 1.1rem;
  }

  .form-row .form-field:last-child {
    margin-bottom: 0;
  }

  .form-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

}

/* ─── Footer Responsive ──────────────────────────────────────────────────── */
/* The four footer columns held their ratios at every width, so the Contact
   column's email address could not shrink and pushed the page sideways on
   narrow screens. */

@media (max-width: 768px) {

  .site-footer {
    padding: 2rem 1.5rem;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

}

@media (max-width: 480px) {

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

}

/* ─── FAQ Page ───────────────────────────────────────────────────────────── */
/* Built on <details>, so the accordion works with no JavaScript and stays
   keyboard operable. The name attribute makes it exclusive where supported
   and degrades to independent toggles where it is not. */

.faqs {
  margin-top: 3rem;
}

/* Full width, matching the resource grid above it — the answers carry their
   own reading measure */
.faq-list {
  border: 1px solid var(--clr-border-solid);
}

.faq-item {
  background: var(--clr-bg-darker);
  border-bottom: 1px solid var(--clr-border-solid);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  cursor: pointer;
  font-family: var(--font-condensed);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-off-white);
  list-style: none;
  transition: background var(--duration-fast) var(--ease-out);
}

/* Suppress the default disclosure triangle in every engine */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::marker {
  content: '';
}

.faq-question:hover {
  background: #161616;
}

.faq-item[open] .faq-question {
  background: #1a1a1a;
}

/* A plus that becomes a minus once the answer is open */
.faq-marker {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 0.3em;
}

.faq-marker::before,
.faq-marker::after {
  content: '';
  position: absolute;
  background: var(--clr-red-bright);
}

.faq-marker::before {
  top: 5.5px;
  left: 0;
  width: 13px;
  height: 2px;
}

.faq-marker::after {
  left: 5.5px;
  top: 0;
  width: 2px;
  height: 13px;
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item[open] .faq-marker::after {
  transform: scaleY(0);
}

.faq-answer {
  padding: 0 1.6rem 1.6rem;
}

.faq-answer p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: #a5a19c;
  max-width: 72ch;
}

.faq-answer p + p {
  margin-top: 1rem;
}

.faq-answer strong {
  color: var(--clr-off-white);
  font-weight: 600;
}

.faq-answer a {
  color: var(--clr-red-bright);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-answer a:hover {
  border-bottom-color: var(--clr-red-bright);
}

@media (max-width: 768px) {

  .faqs {
    margin-top: 2rem;
  }

  .faq-question {
    padding: 1.2rem;
    font-size: var(--text-base);
    gap: 1rem;
  }

  .faq-answer {
    padding: 0 1.2rem 1.2rem;
  }

}

/* ─── Company Page ───────────────────────────────────────────────────────── */

.company-page {
  background: var(--clr-bg);
  padding: 3rem;
}

.company-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.company-panel {
  background: var(--clr-bg-darker);
  border: 1px solid var(--clr-border-solid);
  padding: 2.25rem;
}

.company-prose p {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: #a9a5a0;
  max-width: 62ch;
}

.company-prose p + p {
  margin-top: 1.2rem;
}

.company-facts {
  background: #191919;
  border: 1px solid var(--clr-border-solid);
  padding: 1.75rem 1.5rem;
}

.fact-list {
  margin-top: 1.1rem;
}

.fact {
  padding-block: 0.85rem;
  border-top: 1px solid var(--clr-border-solid);
}

.fact:first-child {
  border-top: none;
  padding-top: 0;
}

.fact:last-child {
  padding-bottom: 0;
}

.fact dt {
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.3rem;
}

.fact dd {
  font-family: var(--font-condensed);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-off-white);
}

/* ─── Resources ──────────────────────────────────────────────────────────── */

.resources {
  margin-top: 3rem;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--clr-border-solid);
}

.resource-card {
  background: var(--clr-bg-darker);
  padding: 1.75rem;
  box-shadow: 1px 0 0 var(--clr-border-solid);
}

.resource-tag {
  display: inline-block;
  background: var(--clr-border-solid);
  color: #9a9a9a;
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 1px;
  margin-bottom: 0.8rem;
}

.resource-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--clr-off-white);
  margin-bottom: 0.7rem;
}

.resource-sub {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: #7d7d7d;
  max-width: 46ch;
}

.resource-sub a {
  color: var(--clr-red-bright);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.resource-sub a:hover {
  border-bottom-color: var(--clr-red-bright);
}

@media (max-width: 1024px) {

  .company-grid {
    grid-template-columns: 1fr;
  }

  .company-panel {
    padding: 2rem;
  }

}

@media (max-width: 768px) {

  .company-page {
    padding: 1.5rem;
  }

  .company-panel {
    padding: 1.5rem;
  }

  .company-prose p {
    font-size: var(--text-base);
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    box-shadow: 0 1px 0 var(--clr-border-solid);
  }

  .resources {
    margin-top: 2rem;
  }

}

/* ─── Games Page ─────────────────────────────────────────────────────────── */

.games-page {
  background: var(--clr-bg);
  padding: 3rem;
}

/* Square media, because the catalogue tile art is square */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border: 1px solid var(--clr-border-solid);
}

.game-grid:empty {
  display: none;
}

.game-tile {
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-darker);
  box-shadow: 1px 0 0 var(--clr-border-solid),
              0 1px 0 var(--clr-border-solid);
  transition: background var(--duration-fast) var(--ease-out);
}

.game-tile:hover {
  background: #171717;
}

.game-tile-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

.game-tile-media > div {
  width: 100%;
  height: 100%;
  transition: transform 0.45s var(--ease-out);
}

.game-tile:hover .game-tile-media > div {
  transform: scale(1.04);
}

.game-tile-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--clr-red);
  color: var(--clr-off-white);
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 1px;
}

/* Local-only marker on content flagged "unpublished" in its data file (see
   main.js). Yellow, so it can't be confused with the red status tags. */
.unpublished-tag {
  display: inline-block;
  background: var(--clr-yellow);
  color: var(--clr-bg);
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 1px;
  margin: 0 0.5rem 0.7rem 0;
  vertical-align: top;
}

.game-tile-media > .unpublished-tag,
.game-card > .unpublished-tag {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  margin: 0;
}

.game-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem;
}

.game-tile-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--clr-off-white);
  margin-bottom: 0.6rem;
}

.game-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.9rem;
}

.game-tile-tags li {
  background: #242424;
  color: #9a9a9a;
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 1px;
}

/* Distribution tags carry the platform's colour, so a title's route to market
   reads at a glance across a grid of 43 */
.game-tile-tags .tag-platform--yggdrasil {
  background: #3a2411;
  color: #f0902e;
}

.game-tile-tags .tag-platform--light-wonder {
  background: #2b1f3f;
  color: #b28ced;
}

.game-tile-blurb {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #7d7d7d;
  max-width: none;
  margin-bottom: 1.1rem;
  flex: 1;
}

/* Reads as a disabled button rather than stray text. The box matches
   the buttons beside it exactly — same padding, same 2px border, same font
   size — so it sits level with a real button beside it. */
.game-tile-nodemo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--clr-border-solid);
  background: #1a1a1a;
  color: #5a5a5a;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: not-allowed;
}

/* Coming Soon leads the page, so the spacing belongs between it and the
   catalogue below — and disappears when there is nothing coming */
.coming-soon:not([hidden]) + .catalogue {
  margin-top: 3rem;
}

/* One or two upcoming titles should not sit in a frame stretched across the
   page, so this grid hugs its cards rather than filling the row */
.coming-soon .game-grid {
  width: fit-content;
  max-width: 100%;
  /* auto-fit, not auto-fill: empty tracks collapse so the frame ends with the
     last card instead of reserving room for a full row */
  grid-template-columns: repeat(auto-fit, 330px);
}

@media (max-width: 768px) {

  .games-page {
    padding: 1.5rem;
  }

  .game-grid,
  .coming-soon .game-grid {
    width: auto;
    grid-template-columns: 1fr;
  }

  .game-tile {
    box-shadow: 0 1px 0 var(--clr-border-solid);
  }

  .coming-soon:not([hidden]) + .catalogue {
    margin-top: 2rem;
  }

}

/* ─── Game Detail Page ───────────────────────────────────────────────────── */

.game-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  overflow: hidden;
  background: var(--clr-bg-darker);
  border-bottom: 1px solid var(--clr-border-solid);
}

.game-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.game-hero-inner {
  position: relative;
  max-width: 900px;
}

/* the declared display would otherwise beat the UA [hidden] rule, so an
   empty tag kept painting as a red stub on every non-upcoming title */
.game-hero-tag[hidden] {
  display: none;
}

.game-hero-tag {
  display: inline-block;
  background: var(--clr-red);
  color: var(--clr-off-white);
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 1px;
  margin-bottom: 0.8rem;
}

.game-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--clr-off-white);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.game-hero-logo {
  display: block;
  max-height: clamp(140px, 22vw, 240px);
  max-width: min(100%, 460px);
  width: auto;
  height: auto;
}

/* Sits over the art under a scrim, so it needs weight and a reading measure */
.game-hero-promo {
  font-family: var(--font-condensed);
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1.5;
  color: #cfcbc5;
  max-width: 48ch;
  margin-bottom: 1.1rem;
}

/* Specs read as a bar across the page rather than a sidebar panel. Cells wrap
   on narrow screens; the RTP ladder is the widest value so it sets the floor. */
.game-infobar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--clr-bg-darker);
  border-bottom: 1px solid var(--clr-border-solid);
  /* clips the separator the last cell in each row throws past the edge */
  overflow: hidden;
}

.game-infobar .fact {
  padding: 1.1rem 1.5rem;
  border-top: none;
  box-shadow: 1px 0 0 var(--clr-border-solid);
}

.game-infobar .fact:first-child {
  padding-top: 1.1rem;
}

/* No trailing separator: fact counts vary per game (five to seven), so the
   last cell often ends a row early and a line into empty space reads as a
   truncation rather than a wider cell. */
.game-infobar .fact:last-child {
  padding-bottom: 1.1rem;
  box-shadow: none;
}

.game-infobar .fact dd {
  line-height: 1.35;
}

/* qualified with dd: plain .fact dd sets the value colour and would win;
   the names are spans so a dual-platform title colours each one */
.fact dd .fact-platform--yggdrasil {
  color: #f0902e;
}

.fact dd .fact-platform--light-wonder {
  color: #b28ced;
}

/* Released dates on a dual-platform title, each led by its platform's colour */
.release-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.release-dot--yggdrasil {
  background: #f0902e;
}

.release-dot--light-wonder {
  background: #b28ced;
}

.game-blurb {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: #a9a5a0;
  max-width: 62ch;
  margin-bottom: 1.8rem;
}

.game-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* .game-tile-nodemo is sized to these, so the two must stay in step */
.game-actions .btn {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

.game-foot {
  padding: 2.5rem 3rem;
  background: var(--clr-bg);
}

.game-page .related-section {
  padding: 3rem;
}

@media (max-width: 768px) {

  .game-hero {
    min-height: 300px;
    padding: 1.5rem;
  }

  .game-page .related-section {
    padding: 1.5rem;
  }

  .game-infobar {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .game-infobar .fact {
    padding: 0.9rem 1.1rem;
  }

  .game-hero-promo {
    font-size: var(--text-lg);
    margin-bottom: 0;
  }

  .game-foot {
    padding: 0 1.5rem 2rem;
  }

}

/* ─── Game Features ──────────────────────────────────────────────────────── */
/* Stacked panels, each screenshot + promo title + blurb. Alternating sides so
   three or four in a row do not read as a list; on mobile every panel falls
   back to screenshot above text. */

/* The game's introduction: its headline and the Game Description from the
   marketing text, between the facts bar and the features */
.game-intro[hidden] {
  display: none;
}

.game-intro {
  padding: 3.5rem 3rem 0;
  background: var(--clr-bg);
}

/* Headline left, copy right: on its own the text left most of a wide screen
   empty. The headline sits large, the rule ties it to the copy. */
.game-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--clr-border-solid);
}

.game-intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  letter-spacing: 0.03em;
  line-height: 0.98;
  color: var(--clr-off-white);
  padding-left: 1.25rem;
  border-left: 4px solid var(--clr-yellow);
  text-wrap: balance;
}

.game-intro-body p {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: #a9a5a0;
  max-width: 62ch;
  margin-bottom: 1rem;
}

.game-intro-body p:first-child {
  font-size: var(--text-xl);
  color: var(--clr-off-white);
}

.game-intro-body strong {
  color: var(--clr-yellow);
  font-weight: 600;
}

.game-intro-body p:last-child {
  margin-bottom: 0;
}

.features {
  padding: 3rem 3rem 0;
  background: var(--clr-bg);
}

.feature-stack {
  border: 1px solid var(--clr-border-solid);
}

.feature-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--clr-bg-darker);
  border-bottom: 1px solid var(--clr-border-solid);
}

.feature-panel:last-child {
  border-bottom: none;
}

/* every other panel puts the screenshot on the right */
.feature-panel:nth-child(even) .feature-media {
  order: 2;
}

.feature-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.feature-media > div {
  width: 100%;
  height: 100%;
}

.feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.25rem;
}

.feature-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--clr-off-white);
  margin-bottom: 0.8rem;
}

.feature-blurb {
  font-size: var(--text-base);
  line-height: 1.7;
  color: #8f8b86;
  max-width: 44ch;
}

@media (max-width: 768px) {

  .game-intro,
  .features {
    padding: 1.5rem 1.5rem 0;
  }

  .game-intro-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
  }

  .feature-panel,
  .feature-panel:nth-child(even) {
    grid-template-columns: 1fr;
  }

  /* screenshot first on every panel once they stack */
  .feature-panel:nth-child(even) .feature-media {
    order: 0;
  }

  .feature-body {
    padding: 1.5rem;
  }

  .feature-title {
    font-size: 22px;
  }

}

.print-brand,
.print-foot {
  display: none;
}

/* ─── Print: the game page doubles as its game sheet ──────────────────────
   Used when a game has no supplied PDF. Prints dark, edge to edge on A4, so
   "Save as PDF" gives a sheet in the site's own look. Background art only
   prints because of print-color-adjust; without it the hero and every
   feature screenshot come out blank. */
@media print {

  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    background: var(--clr-bg);
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nav,
  .site-footer,
  .game-actions,
  .game-foot,
  .related-section,
  dialog {
    display: none !important;
  }

  .game-hero {
    min-height: 0;
    padding: 8mm 14mm 6mm;
  }

  .game-hero-logo {
    max-height: 34mm;
    max-width: 80mm;
  }

  .game-infobar {
    grid-template-columns: repeat(3, 1fr);
  }

  .game-infobar .fact,
  .game-infobar .fact:first-child,
  .game-infobar .fact:last-child {
    padding: 3mm 5mm;
  }

  .game-intro {
    padding: 6mm 14mm 0;
  }

  .game-intro-inner {
    gap: 6mm;
    padding-bottom: 4mm;
  }

  .game-intro-title {
    font-size: 24px;
    padding-left: 3mm;
  }

  .game-intro-body p:first-child {
    font-size: 11px;
  }

  .game-intro-body p {
    font-size: 11px;
    line-height: 1.5;
    max-width: none;
    margin-bottom: 1.5mm;
  }

  .features {
    padding: 5mm 14mm 0;
  }

  .features .section-header {
    margin-bottom: 3mm;
    padding-bottom: 2mm;
  }

  .features .section-label {
    display: none;
  }

  .features .section-title {
    font-size: 22px;
  }

  /* the intro carries the pitch on paper; the hero line would repeat it */
  .game-hero-promo {
    display: none;
  }

  /* a narrower screenshot column keeps three panels on one page */
  .feature-panel {
    grid-template-columns: 0.85fr 1.2fr;
    break-inside: avoid;
  }

  /* screenshot on the right, so the columns swap to keep it the same width */
  .feature-panel:nth-child(even) {
    grid-template-columns: 1.2fr 0.85fr;
  }

  .feature-panel:nth-child(even) .feature-media {
    order: 2;
  }

  .feature-body {
    padding: 4mm 6mm;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-blurb {
    font-size: 11px;
    line-height: 1.5;
  }

  /* Four panels: a shorter hero buys the panels room, so they keep a
     readable screenshot column and normal spacing */
  .game-hero:has(~ .features .feature-panel:nth-child(4)) {
    padding: 6mm 14mm 4mm;
  }

  .game-hero:has(~ .features .feature-panel:nth-child(4)) .game-hero-logo {
    max-height: 24mm;
  }

  .game-hero:has(~ .features .feature-panel:nth-child(4)) .print-brand {
    top: 5mm;
    height: 13mm;
  }
  .feature-stack:has(> .feature-panel:nth-child(4)) .feature-panel {
    grid-template-columns: 0.72fr 1.28fr;
  }

  .feature-stack:has(> .feature-panel:nth-child(4)) .feature-panel:nth-child(even) {
    grid-template-columns: 1.28fr 0.72fr;
  }

  .feature-stack:has(> .feature-panel:nth-child(4)) .feature-body {
    padding: 3.5mm 5mm;
  }

  .feature-stack:has(> .feature-panel:nth-child(4)) .feature-title {
    font-size: 18px;
    margin-bottom: 1.5mm;
  }

  .feature-stack:has(> .feature-panel:nth-child(4)) .feature-blurb {
    font-size: 10.5px;
    line-height: 1.45;
  }

  /* the studio logo, top right of the sheet over the hero art */
  .print-brand {
    display: block;
    position: absolute;
    top: 6mm;
    right: 12mm;
    height: 16mm;
    width: auto;
  }

  .print-foot {
    display: flex;
    justify-content: space-between;
    margin: 6mm 14mm 0;
    padding: 3mm 0 6mm;
    border-top: 1px solid var(--clr-border-solid);
    font-family: var(--font-condensed);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-muted);
  }

}