/* ==========================================================================
   The Respawn Bureau — site styles
   Identity: official bureau paperwork (mono labels, dashed rules, stamps)
   colliding with arcade paint (Red vs Blue splat colour).
   Single committed light-paper brand look — no theme switching.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --ink: #14161d;
  --ink-2: #2c313d;
  --ink-3: #5d6472;
  --paper: #f7f4ec;
  --paper-2: #efeade;
  --line: #d6cfbe;

  --red: #e8442f;
  --blue: #2d7ff9;
  --yellow: #ffc233;

  --font-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 3px;
}

/* --- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.35rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; font: 600 .9rem/1 var(--font-mono);
}
.skip-link:focus { left: .5rem; top: .5rem; }

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

/* --- Layout primitives --------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark .eyebrow { color: var(--yellow); }
.section--paper2 { background: var(--paper-2); }
.section + .section:not(.section--dark):not(.section--paper2) { border-top: 1px solid var(--line); }

/* Mono "form field" label used above every section heading. */
.eyebrow {
  font: 600 .7rem/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px;
  background: currentColor; flex: none;
}

.lede { font-size: clamp(1.1rem, 1.9vw, 1.3rem); color: var(--ink-2); }
/* .hero is its own dark block, not a .section--dark, so it needs the light-on-dark
   treatment spelled out — otherwise .lede keeps --ink-2 and goes near-invisible. */
.section--dark .lede,
.hero .lede { color: #cdc9bd; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 68px;
}

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; font-family: var(--font-display);
  font-weight: 800; letter-spacing: -0.02em; font-size: 1.02rem;
}
.brand__seal { width: 32px; height: 32px; flex: none; }
.brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name small {
  font: 600 .58rem/1.3 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.75rem); }
.nav a {
  font: 600 .82rem/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2);
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--red); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 560px) { .nav a.nav--hide-sm { display: none; } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 700 .82rem/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .95rem 1.5rem;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--red); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--light:hover { box-shadow: 4px 4px 0 rgba(247,244,236,.35); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding-block: clamp(4rem, 11vw, 8.5rem);
}
/* Faint bureau grid — the "form paper" the brand is printed on. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(247,244,236,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,244,236,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 75% at 30% 0%, #000 30%, transparent 78%);
}
.hero > * { position: relative; }
.hero h1 { color: var(--paper); }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 70%, var(--red) 70%, var(--red) 95%, transparent 95%);
}
.hero__body { max-width: 46rem; }
.hero .lede { margin-top: 1.5rem; }

/* Two-column hero for the game page: copy left, key art right. The art carries its own
   title treatment, so it needs room to breathe rather than being cropped behind text. */
.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hero__grid .hero__body { max-width: none; }
}
.hero__art { margin: 0; }
.hero__art img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(247, 244, 236, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* Splat marks: pure CSS blurred blobs, cheap and decorative only. */
.hero__splat {
  position: absolute; border-radius: 50%;
  filter: blur(58px); opacity: .5; pointer-events: none;
}
.hero__splat--red { width: 30rem; height: 30rem; background: var(--red); right: -9rem; top: -7rem; }
.hero__splat--blue { width: 24rem; height: 24rem; background: var(--blue); right: 5rem; bottom: -11rem; opacity: .38; }

/* --- Stat strip ---------------------------------------------------------- */
.stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--paper); padding: 1.4rem 1.35rem; }
.stat__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  letter-spacing: -0.03em; line-height: 1;
}
.stat__label {
  font: 600 .68rem/1.4 var(--font-mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .55rem;
}

/* --- Card grid ----------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
/* Explicit 2-up rather than auto-fit: with four cards, auto-fit finds room for three
   columns at desktop width and leaves a lone orphan on the second row. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
}
.section--dark .card {
  background: #1b1e27; border-color: #333846;
}
.card__num {
  font: 700 .72rem/1 var(--font-mono);
  letter-spacing: .1em; color: var(--red);
  margin-bottom: .9rem; display: block;
}
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-2); font-size: .98rem; margin: 0; }
.section--dark .card p { color: #b9b5aa; }

/* --- Game card ----------------------------------------------------------- */
/* Stacked, not side-by-side. Two columns could never work here: the art is 16:9, the copy
   column is taller than the art is at half width, so the art cell always had leftover
   space — letterboxed dark bands whichever way it was fitted. Full-width banner over the
   copy lets the art sit at its true aspect ratio with nothing cropped and no dead space. */
.game {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

/* Exactly the source art's ratio (1600x900), so `cover` trims nothing. */
.game__media {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.game__media img { width: 100%; height: 100%; object-fit: cover; }

.game__body { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.game__body h3 { margin-top: .9rem; }

/* The copy spans the full card width under the banner, so cap the measure for readability
   rather than letting a single paragraph run to 1000px. */
.game__body > p { max-width: 62ch; }

/* Chips and CTA share one baseline row, pushed apart. Wraps to stacked on narrow screens.
   These were previously separate grid items, which stranded the button in its own row
   whenever the paragraph was taller than the chips. */
.game__footer {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.85rem;
}
.game__footer .game__meta { margin: 0; }
.game__footer .btn { flex: none; }
.game__body h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: .75rem;
}
.game__meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.35rem 0 0; padding: 0; list-style: none;
}
.game__meta li {
  font: 600 .68rem/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .8rem; color: var(--ink-2);
}

.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 .68rem/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .7rem; border-radius: var(--radius);
  background: var(--yellow); color: var(--ink);
}
.badge--soon { background: transparent; border: 1px dashed var(--line); color: var(--ink-3); }
.badge--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* Dashed "awaiting filing" placeholder for unannounced titles. */
.game--soon {
  border-style: dashed; background: transparent;
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem);
  display: block;
}
.game--soon h3 { color: var(--ink-3); margin-bottom: .5rem; }
.game--soon p { color: var(--ink-3); margin: 0; }

/* --- Gallery ------------------------------------------------------------- */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin: 0; padding: 0;
}
.gallery__item { margin: 0; }
.gallery__link {
  display: block; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--ink);
  aspect-ratio: 16 / 10;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gallery__link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,22,29,.18); }
.gallery__link img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption {
  font: 600 .7rem/1.5 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .6rem;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: rgba(20,22,29,.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(20,22,29,.94); }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  width: auto; margin-inline: auto;
  border-radius: var(--radius);
}
.lightbox__caption {
  color: var(--paper); text-align: center; margin-top: 1rem;
  font: 600 .78rem/1.5 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(247,244,236,.4);
  border-radius: var(--radius); color: var(--paper);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgba(247,244,236,.12); }

/* --- Spec table ---------------------------------------------------------- */
.spec-table-wrap { overflow-x: auto; }
.spec-table {
  width: 100%; border-collapse: collapse;
  font-size: .98rem; text-align: left;
}
.spec-table th, .spec-table td {
  padding: .95rem 1rem;
  border-bottom: 1px dashed var(--line);
  vertical-align: top;
}
.spec-table th {
  width: 34%; white-space: nowrap;
  font: 600 .72rem/1.5 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table caption {
  text-align: left; padding-bottom: .75rem;
  font: 600 .72rem/1.5 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* --- Feature list -------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 2rem; color: var(--ink-2); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--red);
}
.ticks li:nth-child(even)::before { background: var(--blue); }
.ticks strong { color: var(--ink); }

/* --- Controls tabs ------------------------------------------------------- */
.tabs__list {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .75rem; margin-bottom: 1.75rem;
}
.tabs__tab {
  font: 700 .74rem/1 var(--font-mono);
  letter-spacing: .07em; text-transform: uppercase;
  padding: .7rem 1rem; cursor: pointer;
  background: transparent; color: var(--ink-3);
  border: 1px solid transparent; border-radius: var(--radius);
}
.tabs__tab:hover { color: var(--ink); background: var(--paper-2); }
.tabs__tab[aria-selected="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.tabs__panel[hidden] { display: none; }
.tabs__note {
  font: 500 .84rem/1.6 var(--font-mono);
  color: var(--ink-3); margin-top: 1.5rem;
}

/* Controls read as a keycard list, not prose. */
.controls { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.controls__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem; background: var(--paper); padding: 1.05rem 1.25rem;
  align-items: baseline;
}
@media (max-width: 620px) { .controls__row { grid-template-columns: 1fr; gap: .3rem; } }
.controls__input {
  font: 700 .8rem/1.4 var(--font-mono);
  letter-spacing: .04em;
}
.controls__action { color: var(--ink-2); font-size: .96rem; }

/* --- Contact ------------------------------------------------------------- */
.mail {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 4.2vw, 2.5rem);
  letter-spacing: -0.025em;
  color: var(--paper); text-decoration: none;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: .1em; word-break: break-word;
}
.mail:hover { color: var(--yellow); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #8d93a1;
  padding-block: 2.75rem;
  border-top: 1px solid #333846;
  font: 500 .84rem/1.7 var(--font-mono);
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.site-footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid #4a505f; }
.site-footer a:hover { border-bottom-color: var(--yellow); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --- Utilities ----------------------------------------------------------- */
.stack > * + * { margin-top: 1.25rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}