/* ==========================================================================
   Earth Giant — design tokens
   ========================================================================== */
:root {
  --color-bg: #1b2523;
  --color-bg-alt: #093008;
  --color-surface: #17241a;
  --color-surface-raised: #1d2e21;
  --color-text: #eef7ea;
  --color-text-muted: #b9c9b6;
  --color-accent: #b3fd7e;
  --color-accent-ink: #10310a;
  --color-border: rgba(238, 247, 234, 0.14);
  --focus-ring: #e8ff9e;

  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* min-height, not height: this keeps short pages full-viewport-tall
   without capping body's box to one viewport on long pages — an
   explicit height:100% here was the reason the sticky header used to
   stop sticking partway down the page (its containing block ran out). */
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn--primary:focus-visible {
  outline-color: var(--color-bg);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--color-accent);
  margin: 0 0 0.75em;
}

.pill {
  display: inline-block;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
}

.empty-state {
  color: var(--color-text-muted);
  font-style: italic;
}

code {
  background: var(--color-surface-raised);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:hover {
  background: #c3ff96;
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(27, 37, 35, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.brand__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0;
  align-items: center;
}
.nav-toggle__bar {
  width: 20px;
  height: 2px;
  background: var(--color-text);
  display: block;
}

.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: none;
}
.primary-nav.is-open { display: block; }
.primary-nav ul {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
}
.primary-nav a {
  display: block;
  padding: 12px 0;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}
.primary-nav li:last-child a { border-bottom: none; }
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    background: transparent;
    border: none;
    display: block;
  }
  .primary-nav ul {
    flex-direction: row;
    padding: 0;
    gap: 2rem;
  }
  .primary-nav a {
    padding: 0;
    border-bottom: none;
  }
}

/* ==========================================================================
   Scroll-triggered fade in/out
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Hero — video
   ========================================================================== */
.hero-video {
  position: relative;
  background: #000;
  overflow: hidden;
}
/* Blurred, scaled-up copy of the same video/image, filling the full-width
   outer box behind .hero-video__frame. A sibling of it now, not a child —
   it needs to extend past the frame's own (possibly narrower, see below)
   width to show on the sides instead of leaving bare background color.
   scale(1.15) pushes the blur filter's soft edge outside the box instead
   of showing a fuzzy border. */
.hero-video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) brightness(0.45) saturate(1.1);
  transform: scale(1.15);
}
/* object-fit does NOT apply to <iframe> in any browser — the YouTube
   embed always renders at exactly this box's own width/height, full
   stop. So instead of relying on object-fit to letterbox the iframe
   (impossible), this box's own size is kept at exactly 16:9 via
   aspect-ratio + a max-width computed from the old max-height budget:
   width is 100% up to the point that would make height exceed 74vh, at
   which point max-width caps it instead — so height and the 16:9 ratio
   both stay correct together, and margin-inline:auto centers whatever
   width that resolves to inside the (wider) .hero-video above.
   Previously the frame was full-width with aspect-ratio alone, which
   breaks the ratio the moment max-height clamps it on a wide/short
   viewport — that mismatch is what made YouTube's own player pillarbox
   the video with real black bars instead of our blurred backdrop
   showing on the sides. */
.hero-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: calc(74vh * 16 / 9);
  margin-inline: auto;
  overflow: hidden;
}
.hero-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* For the plain <img> cases (about page hero, a game's non-video hero
   image): fill the frame's height completely — never leave a vertical
   gap — and derive width from that via the image's own natural ratio
   (width:auto), instead of object-fit:contain shrinking it to fit
   whichever dimension is tighter. If that width comes out narrower than
   the frame, .hero-video__bg's blur fills the sides; if wider, the
   frame's overflow:hidden crops the sides instead. Ratio is never
   distorted either way. max-width:none overrides the global
   `img { max-width:100% }` reset, which would otherwise cap this at the
   frame's width and defeat the width:auto sizing above. */
.hero-video__frame img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  border: 0;
  display: block;
}
/* These trailers are decorative autoplay/muted/looped background video,
   not something visitors interact with — pointer-events:none stops clicks
   from reaching the iframe at all, so YouTube's play/pause icon overlay
   can never appear on top of it (controls=0 alone doesn't prevent that). */
.hero-video__frame iframe {
  /* pointer-events: none; */
}

.hero-video__cue-row {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-video__wishlist {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hero-video__wishlist:hover,
.hero-video__wishlist:focus-visible {
  color: var(--color-accent);
}
.scroll-cue {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(238, 247, 234, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-cue span {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: translateY(-3px) rotate(45deg);
}
.scroll-cue:hover {
  border-color: var(--color-accent);
}
.scroll-cue:hover span {
  border-color: var(--color-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span {
    animation: scroll-cue-bounce 1.6s ease-in-out infinite;
  }
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(-3px) rotate(45deg); }
  50% { transform: translateY(1px) rotate(45deg); }
}

/* ==========================================================================
   Intro section — full-bleed image with overlaid copy
   ========================================================================== */
.intro-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Blurred, scaled-up copy behind .intro-section__bg, filling whatever gap
   contain-fit leaves — same purpose as .hero-video__bg. */
.intro-section__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: blur(10px) grayscale(0.5) brightness(0.35) saturate(0.7);
  transform: scale(1.15);
}
/* Fills the section's height completely (no vertical gap) and derives
   width from that via the image's own ratio — same technique and reasons
   as .hero-video__frame img. Narrower than the section: .intro-section__fill's
   blur shows on the sides. Wider: .intro-section's overflow:hidden crops
   the sides. Ratio is never distorted either way. */
.intro-section__bg {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: grayscale(0.5) brightness(0.5) saturate(0.7);
}
.intro-section__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(27, 37, 35, 0.97) 0%, rgba(27, 37, 35, 0.9) 45%, rgba(27, 37, 35, 0.6) 100%),
    linear-gradient(180deg, rgba(27, 37, 35, 0.55), transparent 25%, transparent 75%, rgba(27, 37, 35, 0.7));
}
.intro-section__content {
  /* .intro-section is a flex container, so without an explicit width this
     flex item shrinks to fit its content instead of filling the section —
     which left .container's max-width/margin-inline:auto centering that
     smaller box instead of the full 1200px row, misaligning it from every
     other .container on the page (e.g. the game cards above it). */
  width: 100%;
  position: relative;
  padding-block: 72px;
}
.intro-section h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 0.4em;
}
.intro-section__subheading {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Games section — large alternating feature rows
   ========================================================================== */
.games-section {
  padding-block: 0px;
}

.game-features {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Not a link itself — it holds two independent ones (the store CTA and
   "View project"), which can't nest inside a single <a>. Instead a
   dedicated invisible link (.game-feature__stretched-link, a direct
   child so .game-feature is unambiguously its containing block) covers
   the whole card for click-anywhere behavior, kept out of the tab order
   so keyboard/AT users land on the real, visible "View project" link
   instead. The store button sits above that overlay via z-index so it
   stays independently clickable. */
.game-feature {
  position: relative;
  display: block;
}
.game-feature__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Full-bleed break-out: spans (almost) the full viewport width no
   matter how deep it sits inside .container-wrapped ancestors. */
.game-feature__media {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  max-height: 75vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, var(--color-surface-raised), #021402);
}
@media (max-width: 640px) {
  /* At narrow widths a strict 16:9 box is too short for the caption
     overlay's content (pill + title + description + link), which then
     gets clipped by overflow:hidden. Give it more room to breathe. */
  .game-feature__media {
    min-height: 440px;
  }
}
/* Blurred, scaled-up copy of the cover art behind the real (letterboxed)
   one — same purpose as .hero-video__bg. */
.game-feature__media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.45) saturate(1.1);
  transform: scale(1.15);
}
/* Fills the card's height completely (no vertical gap) and derives width
   from that via the cover art's own ratio — same technique and reasons as
   .hero-video__frame img. Needs position:absolute (not just to line up
   with .game-feature__media-bg) because without it this stays in normal
   flow and, despite coming later in the DOM, paints BEHIND the bg layer
   once that layer's transform gives it its own stacking context. */
.game-feature__media img:not(.game-feature__media-bg) {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  transition: transform 0.5s ease;
}
.game-feature:hover .game-feature__media img:not(.game-feature__media-bg),
.game-feature:focus-within .game-feature__media img:not(.game-feature__media-bg) {
  /* translateX(-50%) has to stay — transform is a single property, so
     naming just scale() here would silently drop the centering and jump
     the image to the left on hover. */
  transform: translateX(-50%) scale(1.03);
}

/* Caption bar overlaid on the bottom of the image — solid enough at
   the point the text actually sits that legibility never depends on
   how bright the underlying image is. */
.game-feature__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding-top: 5rem;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(10, 10, 10, 0.65) 40%,
    rgba(20, 20, 20, 0.96) 75%
  );
}

.game-feature__body {
  padding-block: 0 1.75rem;
}
.game-feature__body h3 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin-top: 0.5rem;
}
.game-feature__body p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 46ch;
}

/* Optional store CTA (e.g. "Wishlist Now" / "Buy Now") — sits above
   "View project", independently clickable. */
/* Row that holds the optional store CTA and "View project" — the store
   CTA is always first in markup, so it always renders before "View
   project" both visually (same line) and in reading/tab order. Wraps
   gracefully if a very narrow viewport can't fit both on one line. */
.game-feature__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.game-feature__store-cta {
  flex-shrink: 0;
}

.game-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-accent);
  font-weight: 600;
}
.game-feature__cta span {
  transition: transform 0.15s ease;
  display: inline-block;
}
.game-feature:hover .game-feature__cta span,
.game-feature:focus-within .game-feature__cta span {
  transform: translateX(4px);
}

/* ==========================================================================
   Game detail page
   ========================================================================== */
.game-hero {
  background: var(--color-bg);
}

.game-hero__info {
  padding-block: 2.5rem 3rem;
}
.game-hero__info h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-top: 0.5rem;
}
.game-hero__short {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 55ch;
}

.platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
.platform-list li {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 0.35em 0.9em;
  border-radius: 999px;
  font-size: 0.85rem;
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.store-links-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.5rem;
}


.game-details {
  padding-block: 56px;
}
.game-details__main {
  max-width: 72ch;
}
.game-details__main p {
  color: var(--color-text-muted);
}

.gallery-section {
  padding-block: 16px 72px;
}
.gallery-section .container {
  margin-bottom: 1.75rem;
}
.gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
/* Ultra-wide full-bleed screenshots, matching the video hero and the
   home page's game-feature images — same break-out trick, same 16:9
   frame. */
.gallery-thumb {
  display: block;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
  aspect-ratio: 16 / 9;
  max-height: 75vh;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-thumb:hover img,
.gallery-thumb:focus-visible img {
  transform: scale(1.03);
}

.back-link {
  padding-inline: 20px;
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: 1rem;
}
.back-link a {
  color: var(--color-accent);
  font-weight: 600;
}
.back-link a:hover { text-decoration: underline; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 6, 0.85);
}
.lightbox__dialog {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  z-index: 1;
}
.lightbox__image {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  display: block;
}
.lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover { color: var(--color-accent); }

/* ==========================================================================
   About page
   ========================================================================== */
.page-header {
  padding-block: 56px 24px;
}
.page-header__intro {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 60ch;
}

.about-sections {
  padding-block: 24px 40px;
  display: grid;
  gap: 2.5rem;
}
.about-section {
  max-width: 72ch;
}
.about-section p { color: var(--color-text-muted); }

.contact-section {
  padding-block: 40px 96px;
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
}
.contact-section__intro {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.contact-form {
  max-width: 560px;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-row label {
  font-weight: 600;
  font-size: 0.95rem;
}
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0.75em 0.9em;
  font: inherit;
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.contact-form .btn { align-self: flex-start; }

/* ==========================================================================
   Press kit page
   ========================================================================== */
.presskit-section {
  padding-block: 40px;
  /* Header (73px) + the sticky in-page nav below it — without this, jumping
     to a section via .presskit-nav leaves its heading hidden underneath
     both sticky bars. */
  scroll-margin-top: 140px;
}
.presskit-section > p { color: var(--color-text-muted); max-width: 65ch; }
.presskit-section--contact {
  border-top: 1px solid var(--color-border);
  padding-block: 40px 96px;
}

.presskit-nav {
  position: sticky;
  /* Sits flush under .site-header, which is 73px tall (44px logo + 14px
     top/bottom padding + 1px border) — without this offset the two sticky
     bars would overlap instead of stacking. */
  top: 73px;
  z-index: 90;
  background: rgba(27, 37, 35, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.presskit-nav__inner {
  padding-block: 10px;
}

/* Below 860px, the 7-item link row doesn't fit without horizontal
   scrolling — a dropdown keeps every section reachable without having to
   scroll sideways to find it, on mobile or a narrowed desktop window. */
.presskit-nav__select {
  display: block;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0.6em 0.9em;
  font: inherit;
  font-weight: 500;
}
.presskit-nav__select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.presskit-nav__list { display: none; }

@media (min-width: 860px) {
  .presskit-nav__inner { padding-block: 0; }
  .presskit-nav__select { display: none; }
  .presskit-nav__list {
    display: flex;
    gap: 1.75rem;
    padding-block: 14px;
  }
  .presskit-nav a {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .presskit-nav a:hover,
  .presskit-nav a:focus-visible {
    color: var(--color-accent);
  }
}

.fact-sheet {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  max-width: 65ch;
}
.fact-sheet__row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fact-sheet__row dt {
  font-weight: 600;
}
.fact-sheet__row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--color-text-muted);
}

@media (min-width: 700px) {
  .fact-sheet__row {
    flex-direction: row;
    gap: 0.5rem;
  }
  .fact-sheet__row dt {
    min-width: 11rem;
    flex-shrink: 0;
  }
}
.fact-sheet__detail {
  display: block;
}
.fact-sheet__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.presskit-images__game {
  margin-top: 1.5rem;
}
.presskit-images__game:first-of-type { margin-top: 0.5rem; }

.press-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}
.press-asset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.press-asset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.press-asset__download {
  font-size: 0.9rem;
  font-weight: 500;
}
.press-asset__download::after {
  content: " \2193"; /* down arrow — flags these as file downloads */
  font-weight: 400;
}
.press-asset--video .press-asset__download {
  color: var(--color-text);
}
.press-asset--video .press-asset__download::after {
  content: " \2197"; /* external-link arrow — this one opens YouTube instead */
}
.press-asset--video:hover .press-asset__download,
.press-asset--video:focus-visible .press-asset__download {
  color: var(--color-accent);
}

/* Marks an inline link sitting in body copy (e.g. fact sheet values) as
   clickable — plain anchors are otherwise indistinguishable from
   surrounding text since links inherit color/no-underline site-wide. */
.icon-link {
  color: var(--color-accent);
  font-weight: 500;
}
.icon-link:hover,
.icon-link:focus-visible {
  text-decoration: underline;
}
.icon-link::after {
  content: " \2197";
  display: inline-block;
  font-size: 0.8em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}
.site-footer__inner {
  padding-block: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.social-list a {
  font-weight: 500;
  color: var(--color-text-muted);
}
.social-list a:hover,
.social-list a:focus-visible {
  color: var(--color-accent);
}
.site-footer__note {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

@media (min-width: 700px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   Simple pages (404 / thank you)
   ========================================================================== */
.simple-page {
  padding-block: 96px;
  text-align: center;
}
.simple-page a {
  color: var(--color-accent);
  font-weight: 600;
}