/* ==========================================================================
   Press F Studios — main stylesheet
   Brand: orange #ff5d17 / charcoal #282828 / Titillium Web 900 uppercase headings /
   Poppins body / square uppercase buttons / slanted (≈12°) panel geometry.
   ========================================================================== */

/* ---------- Fonts (self-hosted from @fontsource) ---------- */
@font-face { font-family: 'Titillium Web'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/titillium-web/titillium-web-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-weight: 600; font-display: swap; src: url(/vendor/fonts/titillium-web/titillium-web-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-weight: 700; font-display: swap; src: url(/vendor/fonts/titillium-web/titillium-web-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-weight: 900; font-display: swap; src: url(/vendor/fonts/titillium-web/titillium-web-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/poppins/poppins-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(/vendor/fonts/poppins/poppins-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(/vendor/fonts/poppins/poppins-latin-600-normal.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --orange: #ff5d17;
  --orange-hot: #ff7a3d;
  --orange-deep: #c9400a;
  --blood: #b3121a;
  --char: #282828;
  --bg: #0b0b0b;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --ink: #f5f2ed;
  --mute: #a8a29a;
  --dim: #6d6861;
  --line: rgba(245, 242, 237, 0.12);
  --line-2: rgba(245, 242, 237, 0.22);

  --f-display: 'Titillium Web', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1560px;
  --nav-h: 84px;
  --lean: 12deg;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--mute);
  font: 400 16px/1.7 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input { font: inherit; }
::selection { background: var(--orange); color: var(--bg); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 18px; background: var(--orange); color: var(--bg); font: 700 14px var(--f-display); text-transform: uppercase; letter-spacing: .12em; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  line-height: .86;
  letter-spacing: -.015em;
}
.display .line { display: block; white-space: nowrap; }
.sw { white-space: nowrap; }
.display--xl { font-size: clamp(3.4rem, 10.5vw, 11rem); }
.display--lg { font-size: clamp(2.8rem, 7vw, 7.4rem); }
.display--md { font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: .9; }
.accent { color: var(--orange); }
/* Brand F-key glyph standing in for the letter; tinted by the surrounding text colour */
.f-key {
  display: inline-block; height: 1em; aspect-ratio: 256 / 288;
  vertical-align: -.1em; margin-right: -.06em;
  background: currentColor;
  -webkit-mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
  mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
}
.body-lg { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.75; color: var(--mute); max-width: 60ch; }
.lede { font-size: clamp(1rem, 1.15vw, 1.1rem); max-width: 58ch; }
.statement {
  font: 700 clamp(1.35rem, 2.35vw, 2.4rem)/1.18 var(--f-display);
  color: var(--ink);
  letter-spacing: -.005em;
}
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 .88rem/1.2 var(--f-body); color: var(--mute); }
.meta > * { display: inline-flex; align-items: center; gap: 8px; }
.meta .icon { width: 13px; height: 13px; color: var(--orange); }
.meta a:hover { color: var(--ink); }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Buttons (square, uppercase, brand) ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 1.1em 1.7em;
  font: 700 .86rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  transition: color .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.btn__fill {
  position: absolute; inset: -2px -30%; z-index: -1;
  transform: translateX(-101%) skewX(calc(var(--lean) * -1));
  transition: transform .6s var(--ease);
}
.btn:hover .btn__fill, .btn:focus-visible .btn__fill { transform: translateX(0) skewX(calc(var(--lean) * -1)); }
.btn__label { display: block; overflow: hidden; height: 1em; }
.btn__text { display: block; position: relative; transition: transform .55s var(--ease); }
.btn__text::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.btn:hover .btn__text, .btn:focus-visible .btn__text { transform: translateY(-100%); }
.btn__icon { width: 1.05em; height: 1.05em; transition: transform .55s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--solid { background: var(--orange); color: var(--bg); }
.btn--solid .btn__fill { background: var(--ink); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn--line .btn__fill { background: var(--orange); }
.btn--line:hover { color: var(--bg); box-shadow: inset 0 0 0 2px var(--orange); }
.btn--under { padding: .9em 0; color: var(--ink); overflow: visible; }
.btn--under::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); transform-origin: left; transition: transform .6s var(--ease); }
.btn--under .btn__fill { display: none; }
.btn--under:hover::after { transform: scaleX(.35); }
.btn--under .btn__icon { color: var(--orange); }
/* Disabled "coming soon" state: looks normal, hover dims it under a striped stamp */
.btn--soon { cursor: not-allowed; user-select: none; }
.btn--soon > :not(.btn__soon) { transition: opacity .35s var(--ease); }
.btn--soon:hover > :not(.btn__soon) { opacity: .35; }
.btn__soon {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, rgba(11, 11, 11, .78) 0 6px, rgba(11, 11, 11, .62) 6px 12px);
  color: var(--ink); font-size: .74em; letter-spacing: .22em; white-space: nowrap;
  opacity: 0; transition: opacity .35s var(--ease);
}
.btn--soon:hover .btn__soon { opacity: 1; }

/* ---------- Tags (square chips) ---------- */


/* ==========================================================================
   Chrome: loader, nav, menu, HUD, grain
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  background: var(--bg);
}
.no-js .loader, .reduced-motion .loader, .is-loaded .loader { display: none; }
.loader__inner { width: min(620px, 78vw); }
.loader__logo { color: var(--ink); width: 100%; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--char); }
.loader__bar span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding-inline: var(--gutter);
  transition: transform .6s var(--ease), background-color .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(11, 11, 11, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo img { height: 46px; width: auto; transition: transform .5s var(--ease); }
.nav__logo:hover img { transform: rotate(-4deg) scale(1.04); }
.nav__links ul { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 40px); }
.nav__links a {
  position: relative; display: block; padding: 10px 0; overflow: hidden;
  font: 700 .82rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.nav__links a span { display: block; transition: transform .5s var(--ease); }
.nav__links a span::after { content: attr(data-text); position: absolute; left: 0; top: calc(100% + 10px); color: var(--orange); }
.nav__links a:hover span { transform: translateY(calc(-100% - 10px)); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange);
  transform: scaleX(0) skewX(calc(var(--lean) * -1)); transform-origin: left; transition: transform .5s var(--ease);
}
.nav__links a[aria-current]::after { transform: scaleX(1) skewX(calc(var(--lean) * -1)); }
.nav__actions { display: flex; align-items: center; gap: 22px; }
.nav__actions .btn { padding: .95em 1.3em; }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); transition: color .3s, background-color .3s; }
.socials a:hover { color: var(--bg); background: var(--orange); }
.socials .icon { width: 17px; height: 17px; }
.socials--labelled { flex-direction: column; gap: 0; }
.socials--labelled a { width: auto; height: auto; display: flex; justify-content: flex-start; gap: 14px; padding: 12px 0; font: 700 .9rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.socials--labelled a:hover { background: none; color: var(--orange); }

.nav__burger { display: none; width: 48px; height: 48px; place-items: center; }
.nav__burger-lines { position: relative; width: 28px; height: 14px; display: block; }
.nav__burger-lines i { position: absolute; left: 0; height: 3px; background: var(--ink); transition: transform .5s var(--ease), width .5s var(--ease); }
.nav__burger-lines i:first-child { top: 0; width: 100%; }
.nav__burger-lines i:last-child { bottom: 0; width: 64%; background: var(--orange); }
.menu-open .nav__burger-lines i:first-child { transform: translateY(5.5px) rotate(45deg); }
.menu-open .nav__burger-lines i:last-child { width: 100%; transform: translateY(-5.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 85;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path .8s var(--ease-in-out);
}
.menu-open .menu { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.menu__links a { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; font: 900 clamp(2.6rem, 11vw, 5rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.menu__links small { font-size: .8rem; letter-spacing: .2em; color: var(--orange); }
.menu__links a:hover { color: var(--orange); }
.menu__foot { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.menu__mail { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.menu__mail .icon { color: var(--orange); }

.hud { pointer-events: none; }
.hud__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; }
.hud__progress span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.hud__wave {
  position: fixed; left: 14px; top: 50%; z-index: 80;
  display: flex; align-items: center; gap: 12px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-family: var(--f-display); text-transform: uppercase; color: var(--ink);
  mix-blend-mode: difference;
  opacity: 0; transition: opacity .5s;
}
.hud__wave { display: none !important; }
.hud__label { font-weight: 700; font-size: .7rem; letter-spacing: .3em; }
.hud__num { font-weight: 900; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hud__name { font-weight: 700; font-size: .7rem; letter-spacing: .24em; opacity: .7; }

.grain {
  position: fixed; inset: -50%; z-index: 120; pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(4%, -8%); }
  60% { transform: translate(-3%, 9%); } 80% { transform: translate(8%, -3%); } 100% { transform: translate(0, 0); }
}
.reduced-motion .grain { animation: none; }

/* "Press F" easter egg toast */
.respects {
  position: fixed; right: var(--gutter); bottom: 22px; z-index: 110;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--orange); color: var(--bg);
  font: 900 .95rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(160%); transition: transform .6s var(--ease);
  pointer-events: none;
}
.respects.is-on { transform: none; }
.respects b { font-size: 1.5rem; }
/* 10 presses in a row: F-key confetti over everything */
.f-confetti { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.f-confetti__key {
  position: absolute; left: 0; top: 0; aspect-ratio: 256 / 288; will-change: transform;
  -webkit-mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
  mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
}

/* ==========================================================================
   HOME — Hero
   ========================================================================== */
.hero {
  --ticker-h: 78px;
  --max: 1840px;
  position: relative; isolation: isolate;
  height: 100svh; min-height: 620px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
}
/* Keeps the nav legible over bright frames of the hero image */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--nav-h) * 2.2); z-index: -1;
  background: linear-gradient(180deg, rgba(11, 11, 11, .78), rgba(11, 11, 11, 0));
  pointer-events: none;
}
.hero__media { position: absolute; inset: -4%; z-index: -3; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; opacity: 0; transition: opacity 1.4s var(--ease-in-out), transform 7s linear; transform: scale(1.06); }
.hero__media img.is-active { opacity: 1; transform: scale(1); }
.no-js .hero__media img:first-child, .reduced-motion .hero__media img:first-child { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(11, 11, 11, .94) 0%, rgba(11, 11, 11, .6) 38%, rgba(11, 11, 11, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(11, 11, 11, .2) 38%, rgba(11, 11, 11, 0) 60%),
    radial-gradient(ellipse at 70% 40%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
}
.hero__content { padding-bottom: calc(var(--ticker-h) + clamp(28px, 6vh, 64px)); }
.hero__kicker { margin-bottom: clamp(.6rem, 2vh, 1.4rem); }
.hero__kicker b { color: var(--ink); font-weight: 900; }
/* Sized against BOTH axes so the headline always sits on exactly two lines:
   width  — "THE UNDEAD" is ~5.45em wide, so it must fit the content column;
   height — two .8em lines plus kicker, tagline/CTAs, ticker and nav must fit the viewport. */
.hero__title {
  --fit-w: calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 5.6);
  --fit-h: calc((100svh - 430px) / 1.64);
  font: 900 max(2.6rem, min(var(--fit-w), var(--fit-h), 10.5vw, 11rem)) / .8 var(--f-display);
  text-transform: uppercase; letter-spacing: -.025em; color: var(--ink);
  margin: 0 0 clamp(18px, 3.2vh, 36px) -.045em;
}
.hero__line { display: block; overflow: hidden; padding: .04em 0 .03em; white-space: nowrap; }
.hero__line > span { display: inline-block; }
.hero__line--accent { color: var(--orange); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 64px); }
.hero__text {
  max-width: 46ch; padding-left: 18px; border-left: 3px solid var(--orange);
  font: 600 clamp(1.05rem, 1.35vw, 1.4rem)/1.3 var(--f-display); color: var(--ink);
}
.hero__foot .btn-row { margin-top: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Reticle cursor + shots */
.reticle {
  position: absolute; left: 0; top: 0; z-index: 5; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border: 2px solid rgba(245, 242, 237, .85); border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .25s, width .25s, height .25s;
}
.reticle::before, .reticle::after, .reticle i::before, .reticle i::after { content: ''; position: absolute; background: var(--orange); }
.reticle::before { left: 50%; top: -12px; width: 2px; height: 20px; margin-left: -1px; }
.reticle::after { left: 50%; bottom: -12px; width: 2px; height: 20px; margin-left: -1px; }
.reticle i::before { top: 50%; left: -12px; height: 2px; width: 20px; margin-top: -1px; }
.reticle i::after { top: 50%; right: -12px; height: 2px; width: 20px; margin-top: -1px; }
.hero.has-reticle { cursor: none; }
.hero.has-reticle a, .hero.has-reticle button { cursor: pointer; }
.hero.has-reticle .reticle.is-on { opacity: 1; }
.shot-key {
  position: absolute; z-index: 4; width: 46px; aspect-ratio: 256 / 288; pointer-events: none;
  background: var(--ink);
  -webkit-mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
  mask: url('/assets/img/brand/press-f-key-icon.png') center / contain no-repeat;
}
.flash { position: fixed; inset: 0; z-index: 130; pointer-events: none; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 190, 120, .5), rgba(255, 93, 23, .12) 30%, transparent 60%); opacity: 0; }

/* ==========================================================================
   HOME — Key art reveal
   ========================================================================== */
.keyart__pin { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.keyart__frame { position: absolute; inset: 0; }
.keyart__svg { display: block; width: 100%; height: 100%; }
/* Stencil word: the image shows through these letters at the start of the sequence */
.keyart__word {
  font-family: var(--f-display); font-weight: 900; letter-spacing: 0;
  font-size: min(34vw, 92svh);
}
.no-js .keyart__stencil-img, .reduced-motion .keyart__stencil-img { display: none; }
/* Blends the window's slanted edge into the copy once it has opened */
.keyart__frame::after {
  content: ''; position: absolute; inset: 0; opacity: var(--shade, 1); pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0) 30%, rgba(11, 11, 11, .7) 38%, rgba(11, 11, 11, 0) 62%), linear-gradient(0deg, rgba(11, 11, 11, .7), rgba(11, 11, 11, 0) 35%);
}
.keyart__copy { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 10vh; }
.keyart__copy > * { max-width: min(640px, 48vw); }
.keyart__copy > .keyart__title { max-width: none; font-size: clamp(2.3rem, 5.2vw, 6rem); white-space: nowrap; }
.keyart__copy .body-lg { max-width: 54ch; margin-top: 1.6rem; color: #d3cdc5; }

/* ==========================================================================
   Marquee bands
   ========================================================================== */
.bands { position: relative; z-index: 3; height: clamp(170px, 19vw, 300px); overflow: hidden; margin-block: -1vw; }
.band { position: absolute; left: -6%; width: 112%; top: 50%; }
.band--a { z-index: 2; background: var(--orange); color: var(--bg); transform: translateY(-50%) rotate(-3.5deg); }
.band--b { z-index: 1; background: var(--bg-2); color: var(--ink); border-block: 1px solid var(--line); transform: translateY(-50%) rotate(3deg); }
.marquee { overflow: hidden; }
.marquee__track { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); width: max-content; padding: clamp(10px, 1.1vw, 18px) 0; will-change: transform; }
.marquee__track span { font: 900 clamp(1.5rem, 3.3vw, 3.3rem)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.01em; }
.marquee--outline .marquee__track span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: .01em; }
.marquee__icon { width: clamp(20px, 2.2vw, 34px); height: clamp(20px, 2.2vw, 34px); }
.band--b .marquee__icon { color: var(--orange); }
.marquee__sep { color: var(--orange) !important; -webkit-text-stroke: 0 !important; }

/* ==========================================================================
   HOME — Features rail (pinned horizontal)
   ========================================================================== */
.rail { position: relative; background: var(--orange); }
.rail__pin { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.rail__head {
  position: absolute; z-index: 5; top: calc(var(--nav-h) + 16px); left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.rail__count { display: flex; align-items: center; gap: 12px; font: 900 1.4rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rail__count i { width: 42px; height: 2px; background: var(--ink); }
.rail__count span:first-child { color: var(--orange); font-size: 2.6rem; }
.rail__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.panel {
  --w: 76vw; --slant: 13vw;
  position: relative; flex: none; width: var(--w); height: 100%;
  margin-right: calc(var(--slant) * -1 + .7vw);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  overflow: hidden; background: var(--bg);
}
.panel:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.panel:last-child { margin-right: 0; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
.panel__img { position: absolute; inset: 0 -12%; }
.panel__img img { width: 100%; height: 100%; object-fit: cover; }
.panel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 11, .95) 0%, rgba(11, 11, 11, .35) 45%, rgba(11, 11, 11, .15) 100%), linear-gradient(90deg, rgba(11, 11, 11, .6), transparent 60%); }
.panel__num {
  position: absolute; right: calc(var(--slant) + 2vw); top: calc(var(--nav-h) + 4vh);
  font: 900 clamp(8rem, 20vw, 22rem)/.8 var(--f-display); color: transparent;
  -webkit-text-stroke: 2px rgba(245, 242, 237, .28);
}
.panel__body { position: absolute; left: clamp(24px, 5vw, 80px); bottom: 12vh; width: min(640px, 62%); }
.panel__body p { max-width: 44ch; }
.panel:not(:first-child) .panel__body { left: calc(var(--slant) * .55 + 2vw); }
.panel__icon { display: grid; place-items: center; width: 58px; height: 58px; background: var(--orange); color: var(--bg); margin-bottom: 26px; }
.panel__icon .icon { width: 26px; height: 26px; }
.panel__title { font: 900 clamp(2.8rem, 5.6vw, 6.2rem)/.86 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: -.02em; }
.panel__title { white-space: nowrap; font-size: clamp(2rem, 3.9vw, 4.6rem); }
.panel__title .accent { display: block; }
.panel__body p { margin-top: 1.3rem; font-size: clamp(1rem, 1.15vw, 1.12rem); color: #d3cdc5; }
.rail__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(11, 11, 11, .5); z-index: 5; }
.rail__bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* ==========================================================================
   Characters (shared)
   ========================================================================== */
.chars { position: relative; background: radial-gradient(ellipse at 75% 55%, rgba(179, 18, 26, .22), transparent 55%), var(--bg); }
.chars__pin {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 4vw;
  max-width: var(--max); margin: 0 auto;
  padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
}
.chars__copy { position: relative; z-index: 2; }
.chars__copy .display { font-size: clamp(2.6rem, 5.6vw, 6.2rem); }
.chars__copy .body-lg { margin-top: 1.6rem; }
.chars__list { margin-top: 2.2rem; border-bottom: 1px solid var(--line); }
.chars__list button {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center;
  padding: 18px 0 16px; border-top: 1px solid var(--line);
  font: 900 clamp(1.3rem, 2vw, 2rem)/1 var(--f-display); text-transform: uppercase; color: var(--dim); text-align: left;
  transition: color .4s, padding .5s var(--ease);
}
.chars__list button::before { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.chars__idx { font-size: .55em; letter-spacing: .1em; }
.chars__list .icon { width: 22px; height: 22px; opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .5s var(--ease); }
.chars__list button:hover { color: var(--mute); }
.chars__list button[aria-selected='true'] { color: var(--ink); padding-left: 10px; }
.chars__list button[aria-selected='true']::before { transform: scaleX(1); }
.chars__list button[aria-selected='true'] .chars__idx { color: var(--orange); }
.chars__list button[aria-selected='true'] .icon { opacity: 1; transform: none; color: var(--orange); }
.chars__stage { position: relative; z-index: 1; aspect-ratio: 850 / 1000; height: min(calc(100svh - var(--nav-h) - 120px), 760px); width: auto; max-width: 100%; justify-self: center; }
.chars__fig { position: absolute; inset: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); opacity: 0; }
.chars__fig.is-active { opacity: 1; }
.chars__fig img { width: 100%; height: 100%; object-fit: cover; }
.chars__fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 11, .85), transparent 40%); }
.chars__fig figcaption {
  position: absolute; z-index: 1; left: 12%; bottom: 7%;
  font: 900 clamp(1.8rem, 3.2vw, 3.2rem)/.9 var(--f-display); text-transform: uppercase; color: var(--ink);
}
.chars__fig figcaption span { display: block; font-size: .32em; letter-spacing: .2em; color: var(--orange); margin-bottom: .5em; }
.chars__slash {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: -22px; width: 100%;
  background: var(--orange); pointer-events: none;
  clip-path: polygon(10% 0, calc(10% + 8px) 0, 8px 100%, 0 100%);
}

/* ==========================================================================
   The Fall (shared)
   ========================================================================== */
.fall__pin { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.fall__media { position: absolute; inset: 0; }
.fall__media img { width: 100%; height: 100%; object-fit: cover; }
.fall__mask {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); color: #fff; mix-blend-mode: multiply;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
}
.no-js .fall__mask, .reduced-motion .fall__mask { display: none; }
.fall__mask-sm { font-size: clamp(2rem, 6vw, 6rem); letter-spacing: .5em; line-height: 1; margin-right: -.5em; }
.fall__mask-lg { font-size: 25vw; line-height: .76; letter-spacing: -.04em; }
.fall__copy {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; align-items: end;
  padding-top: 24vh; padding-bottom: 9vh;
  background: linear-gradient(0deg, rgba(11, 11, 11, .96) 0%, rgba(11, 11, 11, .75) 50%, rgba(11, 11, 11, 0) 100%);
}
.fall__copy > * { max-width: 760px; }
.fall__text p { color: #d3cdc5; }
.fall__text .body-lg { color: var(--ink); }
.fall__debut { margin: 1.8rem 0 .8rem; font: 900 clamp(1.6rem, 2.4vw, 2.4rem)/.95 var(--f-display); text-transform: uppercase; color: var(--orange); }
.fall__beats { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding-block: 14vh 16vh; }
.beat:nth-child(2) { margin-top: 14vh; }
.beat__img { position: relative; overflow: hidden; aspect-ratio: 1200 / 838; }
.beat__img img { width: 100%; height: 115%; object-fit: cover; }
.beat--0 .beat__img { overflow: visible; }
.beat--0 .beat__img img { height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.beat--1 .beat__img { clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.beat--1 .beat__img::before { content: ''; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 17.5%; background: linear-gradient(to right, transparent calc(100% - 14px), var(--orange) calc(100% - 14px)); clip-path: polygon(calc(100% - 14px) 0, 100% 0, 14px 100%, 0 100%); }
.beat__body { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 28px; padding-left: 8%; }
.beat__icon { grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid var(--orange); color: var(--orange); }
.beat__icon .icon { width: 24px; height: 24px; }
/* Artwork icons (sampler render, blood-wave skull) need more room than the line icons */
.beat__icon:has(img, .beat__glyph) { width: 64px; height: 64px; }
.beat__icon img { width: 58px; height: 58px; object-fit: contain; }
.beat__glyph { width: 40px; height: 40px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.beat h3 { font: 900 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); }

/* ==========================================================================
   Early Access (shared)
   ========================================================================== */
.ea { position: relative; overflow: hidden; padding-block: 16vh; background: radial-gradient(ellipse at 28% 50%, rgba(255, 93, 23, .2), transparent 55%), var(--bg); }
/* Solid, very low-contrast backdrop type, faded towards the section edges so it sits well behind the content */
.ea__ghost {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; gap: .15em; white-space: nowrap;
  font: 900 30vw/.8 var(--f-display); letter-spacing: 0; color: rgba(245, 242, 237, .035);
  pointer-events: none;
}
.ea { --ghost-fade: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.ea__ghost { -webkit-mask-image: var(--ghost-fade); mask-image: var(--ghost-fade); }
.ea__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
/* The box art's floor glow is hard-cropped at the image's left edge; fade both sides out */
.ea__art img {
  width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
}
.ea__copy .body-lg { margin-top: 1.6rem; }
.ea__copy .display { font-size: clamp(2.4rem, 4.8vw, 5.4rem); }

/* ==========================================================================
   HOME — Studio
   ========================================================================== */
.studio { position: relative; isolation: isolate; overflow: hidden; padding-block: 16vh; }
.studio__bg { position: absolute; inset: 0; z-index: -1; }
.studio__bg img { width: 100%; height: 120%; object-fit: cover; opacity: .38; }
.studio__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 20%, rgba(11, 11, 11, .6) 70%, rgba(11, 11, 11, .4)), linear-gradient(0deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.studio__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 6vw; align-items: center; }
.studio__copy .statement { margin-top: 2.2rem; }
.stats { display: grid; grid-template-columns: repeat(3, auto); margin-top: 3rem; border-top: 1px solid var(--line); }
.stats > div { padding: 22px 20px 0 0; }
.stats > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.stats dt { font: 500 .9rem/1 var(--f-body); color: var(--mute); margin-bottom: 12px; }
.stats dd { font: 900 clamp(2.4rem, 4vw, 4rem)/.85 var(--f-display); color: var(--orange); font-variant-numeric: tabular-nums; }
.stats .stats__text { font-size: clamp(1.5rem, 2.2vw, 2.2rem); color: var(--ink); text-transform: uppercase; }
.stats .stats__text small { display: block; font-size: .5em; color: var(--mute); margin-top: 6px; }
.studio__team img { width: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); }

/* ==========================================================================
   News teaser / list
   ========================================================================== */
.news-teaser { padding-block: 7vh; }
.news-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 3.5vh; }
/* Home teaser is a compact strip: wide, short thumbnail, smaller title, two-line excerpt */
.news-teaser .post-feature { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3vw; }
.news-teaser .post-feature__img img { aspect-ratio: 21 / 9; }
.news-teaser .post-feature h3 { margin: .7rem 0 .6rem; font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.news-teaser .post-feature__body > p:not(.meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.news-teaser .post-feature .btn { margin-top: .8rem; }
.post-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4vw; align-items: center; }
.post-feature + .post-feature { margin-top: 8vh; }
.post-feature__img { display: block; overflow: hidden; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.post-feature__img img { width: 100%; aspect-ratio: 970 / 570; object-fit: cover; transition: transform 1s var(--ease); }
.post-feature:hover .post-feature__img img { transform: scale(1.06); }
.post-feature h2, .post-feature h3 { margin: 1.2rem 0 1rem; font: 900 clamp(2rem, 3.4vw, 3.4rem)/.92 var(--f-display); text-transform: uppercase; color: var(--ink); }
.post-feature h2 a:hover, .post-feature h3 a:hover { color: var(--orange); }
.post-feature__body > p:not(.meta) { max-width: 56ch; }
.post-feature .btn { margin-top: 1.6rem; }

/* ==========================================================================
   Contact + Footer
   ========================================================================== */
.contact { position: relative; padding-bottom: 12vh; border-top: 1px solid var(--line); overflow: hidden; }
.contact__marquee { padding-block: 5vh 7vh; }
.contact__marquee .marquee__track span { font-size: clamp(3.5rem, 10vw, 10rem); -webkit-text-stroke-width: 2px; }
.contact__marquee .marquee__sep { font-size: clamp(3.5rem, 10vw, 10rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: start; }
.contact__title { font-size: clamp(2.6rem, 5.2vw, 5.4rem); white-space: nowrap; }
.contact__lead .lede { margin-top: 1.6rem; }
.contact__mail { display: inline-flex; align-items: center; gap: 14px; font: 900 clamp(1.2rem, 1.8vw, 1.9rem)/1 var(--f-display); color: var(--ink); position: relative; padding-bottom: 10px; overflow-wrap: anywhere; }
.contact__mail .icon { color: var(--orange); width: .8em; height: .8em; }
.contact__mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--ease); }
.contact__mail:hover::after { transform: scaleX(1); }
.contact__loc { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 500 .98rem/1 var(--f-body); color: var(--ink); }
.contact__loc .icon { color: var(--orange); }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 32px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 96px; padding: 16px;
  border: 1.5px solid var(--line-2); color: var(--ink);
  font: 700 .72rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
  transition: color .4s, border-color .4s;
}
.tile .icon { width: 26px; height: 26px; }
/* Diagonal sweep: parked far enough below that the skewed corner never shows at rest */
.tile::before { content: ''; position: absolute; inset: -20px -30%; z-index: -1; background: var(--orange); transform: translateY(125%) skewY(-6deg); transition: transform .55s var(--ease); }
a.tile:hover { color: var(--bg); border-color: var(--orange); }
a.tile:hover::before, a.tile:focus-visible::before { transform: translateY(0) skewY(-6deg); }
.tile--hot { border-color: var(--orange); }
.tile--hot .icon { color: var(--orange); }
a.tile--hot:hover .icon { color: var(--bg); }
.tile--soon { color: var(--dim); border-style: dashed; }
.newsletter { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.newsletter__title { font: 900 1.3rem/1 var(--f-display); text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.newsletter__row { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 14px; align-items: end; }
.field { display: grid; gap: 8px; }
.field span { font: 500 .85rem/1 var(--f-body); color: var(--mute); }
.field input { width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 2px solid var(--line-2); color: var(--ink); outline: none; transition: border-color .3s; border-radius: 0; }
.field input:focus { border-color: var(--orange); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter__msg { min-height: 1.6em; margin-top: 12px; font-size: .9rem; color: var(--orange); }

.footer__base { background: #070707; border-top: 1px solid var(--line); padding-top: 9vh; }
.footer__cols { display: grid; grid-template-columns: 1.5fr 1.1fr .9fr .7fr; gap: 4vw; padding-bottom: 7vh; }
.footer__logo img { width: 150px; margin-bottom: 26px; }
.footer__h { font: 900 1.25rem/1 var(--f-display); text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.footer__h span { color: var(--orange); }
.footer__col p { font-size: .92rem; max-width: 46ch; }
.footer__news a { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.footer__news img { width: 90px; height: 60px; object-fit: cover; }
.footer__news strong { display: block; font: 900 1rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); transition: color .3s; }
.footer__news a:hover strong { color: var(--orange); }
.footer__news time { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .78rem; }
.footer__news .icon { color: var(--orange); }
.footer__platforms { display: grid; gap: 10px; }
.footer__platforms a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line-2); color: var(--ink); transition: border-color .3s, color .3s; }
.footer__platforms a:hover { border-color: var(--orange); color: var(--orange); }
.footer__platforms .icon { width: 26px; height: 26px; }
.footer__platforms span { display: flex; flex-direction: column; font: 900 1rem/1 var(--f-display); text-transform: uppercase; }
.footer__platforms small { font: 500 .78rem/1 var(--f-body); text-transform: none; color: var(--mute); margin-bottom: 4px; }
.footer__nav { display: grid; gap: 10px; }
.footer__nav a { font: 700 .82rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); transition: color .3s; }
.footer__nav a:hover { color: var(--orange); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid var(--line); font-size: .82rem; }

/* ==========================================================================
   GAME PAGE
   ========================================================================== */
.ghero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 3vh); overflow: hidden; }
.ghero__bg { position: absolute; inset: 0; z-index: -2; }
.ghero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ghero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 11, .95) 10%, rgba(11, 11, 11, .55) 55%, rgba(11, 11, 11, .35)), linear-gradient(0deg, var(--bg) 2%, transparent 45%); }
.ghero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; padding-block: 3vh 6vh; }
.ghero__title { margin: 0; }
.ghero__title img { display: block; width: min(560px, 70vw); height: auto; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .6)); }
.ghero__letters { display: flex; font: 900 clamp(7rem, 23vw, 25rem)/.78 var(--f-display); letter-spacing: -.035em; color: var(--ink); margin-left: -.05em; }
.ghero__letters span { display: inline-block; }
.ghero__letters .is-z { color: var(--orange); }
.ghero__full { max-width: 34ch; margin: 1.6rem 0 0; font: 600 clamp(1.1rem, 1.5vw, 1.45rem)/1.35 var(--f-display); color: var(--ink); }
.ghero__poster { justify-self: end; width: 100%; max-width: 420px; transform: rotate(3deg); }
.ghero__poster img { width: 100%; box-shadow: 0 40px 80px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); }
.ghero__poster figcaption { margin-top: 18px; font-size: .88rem; padding-left: 16px; border-left: 3px solid var(--orange); }
.ghero__facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.ghero__facts li { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px 0; font: 900 .98rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.ghero__facts li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.ghero__facts small { font: 500 .85rem/1 var(--f-body); text-transform: none; color: var(--mute); }

.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6vw; padding-block: 16vh; align-items: start; }
.about__body { display: grid; gap: 3rem; }
.namequote { border-left: 4px solid var(--orange); padding: 4px 0 4px 28px; max-width: 62ch; }
.namequote p { font-size: 1.05rem; font-style: italic; color: #d3cdc5; }
.namequote footer { margin-top: 1rem; }
.namequote a { display: inline-flex; align-items: center; gap: 10px; font: 700 .76rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.namequote a:hover { color: var(--ink); }

.slants { padding-bottom: 14vh; overflow: hidden; }
.slants__head { margin-bottom: 6vh; }
.slants__row {
  --w: min(calc((100vw - 2 * var(--gutter)) / 3.2), 520px);
  display: flex; justify-content: center; padding-inline: var(--gutter);
}
.slant {
  position: relative; flex: none; width: var(--w); aspect-ratio: 794 / 1185;
  margin-right: calc(var(--w) * -.267);
  clip-path: polygon(29.7% 0, 100% 0, 65.3% 100%, -1.5% 100%);
  transition: filter .6s var(--ease);
  outline: none;
}
.slant:last-child { margin-right: 0; }
.slant img { width: 100%; height: 100%; transition: transform 1s var(--ease); }
.slant__num { position: absolute; top: 4%; right: 8%; font: 900 clamp(1.4rem, 2.4vw, 2.6rem)/1 var(--f-display); color: var(--ink); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.slants__row:hover .slant, .slants__row:focus-within .slant { filter: grayscale(.9) brightness(.45); }
.slants__row .slant:hover, .slants__row .slant:focus-visible { filter: none; z-index: 2; }
.slant:hover img, .slant:focus-visible img { transform: scale(1.06); }

/* --paper-top starts the newspaper just below the two-line heading (font-size × .86 line-height × 2),
   and min-height leaves room for the whole 3:1 spread underneath it. */
.lore__intro {
  --lore-title: clamp(2.8rem, 6vw, 6.6rem);
  --paper-top: calc(16vh + var(--lore-title) * 1.72 + 7vh);
  position: relative; isolation: isolate; padding-block: 16vh; overflow: hidden;
  min-height: calc(var(--paper-top) + 100vw / 3 + 8vh);
}
.lore__paper { position: absolute; inset: 0; z-index: -1; }
.lore__paper img { width: 100%; height: auto; margin-top: var(--paper-top); opacity: .16; filter: grayscale(1) contrast(1.2); }
.lore__paper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), transparent 25%, transparent 75%, var(--bg)); }
.lore__intro-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5vw; align-items: start; }
.lore__intro-grid .display { font-size: var(--lore-title); }
.lore__cols { columns: 2 280px; column-gap: 3vw; }
.lore__cols p { margin-bottom: 1.2rem; break-inside: avoid; color: #cfc9c1; }
.lore__cols p:first-child::first-letter { float: left; font: 900 4.6rem/.8 var(--f-display); color: var(--orange); margin: .06em .12em 0 0; }

.ops { position: relative; isolation: isolate; padding-block: 16vh 12vh; overflow: hidden; }
.ops__bg { position: absolute; inset: 0; z-index: -1; }
.ops__bg img { width: 100%; height: 120%; object-fit: cover; opacity: .55; }
.ops__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 15%, rgba(11, 11, 11, .55) 60%, rgba(11, 11, 11, .2)), linear-gradient(0deg, var(--bg), transparent 30%, transparent 75%, var(--bg)); }
.ops__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: end; }
.ops__text p + p { margin-top: 1.2rem; }
.ops__text p { color: #d3cdc5; max-width: 58ch; }
.ops__punch { margin-top: 12vh; font: 900 clamp(2.2rem, 6vw, 6.4rem)/.9 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: -.02em; }

.timeline { position: relative; background: var(--bg-2); }
.timeline__pin { position: relative; height: 100svh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; }
.timeline__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: calc(var(--nav-h) + 3vh); flex: none; }
.timeline__ticks { display: flex; gap: 6px; }
.timeline__ticks li {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); font: 900 1.05rem/1 var(--f-display); color: var(--dim);
  transition: background-color .4s, color .4s, border-color .4s;
}
.timeline__ticks li.is-active { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.timeline__ticks li.is-past { color: var(--ink); border-color: var(--ink); }
.timeline__track { flex: 1; display: flex; align-items: center; width: max-content; will-change: transform; padding-inline: var(--gutter); }
.year {
  flex: none; width: min(78vw, 1180px); margin-right: 5vw;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3.5vw; align-items: center;
}
.year__num { position: relative; font: 900 clamp(10rem, 26vw, 26rem)/.75 var(--f-display); color: transparent; -webkit-text-stroke: 2px var(--orange); letter-spacing: 0; }
.year__num small { position: absolute; top: -.5em; left: .05em; font-size: .1em; letter-spacing: .35em; -webkit-text-stroke: 0; color: var(--ink); text-transform: uppercase; }
.year__body h4 { font: 900 clamp(2.2rem, 4vw, 4.4rem)/.9 var(--f-display); text-transform: uppercase; color: var(--ink); margin-bottom: 1.4rem; }
.year__body h4 small { display: block; margin-top: .45em; font-size: .36em; letter-spacing: .12em; color: var(--orange); }
.year__body p { color: #cfc9c1; max-width: 66ch; font-size: clamp(.92rem, 1vw, 1.02rem); }
.year__body p + p { margin-top: .9rem; }
.timeline__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--char); }
.timeline__bar span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }

.finale { padding: 20vh var(--gutter); max-width: var(--max); margin: 0 auto; }
.finale__text { font: 900 clamp(2.4rem, 6.4vw, 7rem)/.92 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: -.02em; }
.finale__text em { font-style: normal; color: var(--orange); }

.gallery { padding-block: 14vh; overflow: hidden; }
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 5vh; }
.gallery__hint { display: flex; align-items: center; gap: 12px; font: 500 .92rem/1 var(--f-body); color: var(--mute); }
.gallery__hint .icon { color: var(--orange); }
.gallery__viewport { cursor: grab; padding-inline: var(--gutter); }
.gallery__viewport.is-dragging { cursor: grabbing; }
.gallery__track { display: flex; gap: 14px; width: max-content; }
.gallery__track li:nth-child(odd) { margin-top: 6vh; }
.shot { position: relative; display: block; width: clamp(280px, 36vw, 620px); overflow: hidden; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.shot img { width: 100%; aspect-ratio: 1024 / 636; object-fit: cover; transition: transform 1s var(--ease), filter .6s; pointer-events: none; user-select: none; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.07); }
.shot__zoom { position: absolute; right: 9%; top: 10%; width: 44px; height: 44px; display: grid; place-items: center; background: var(--orange); color: var(--bg); transform: scale(0); transition: transform .5s var(--ease); }
.shot:hover .shot__zoom, .shot:focus-visible .shot__zoom { transform: scale(1); }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 8, .96); color: var(--ink); }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 90vw; max-height: 82vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
.lightbox__count { position: absolute; left: var(--gutter); bottom: 24px; font: 900 1.4rem/1 var(--f-display); }
.lightbox__btn { position: absolute; width: 56px; height: 56px; display: grid; place-items: center; border: 1.5px solid var(--line-2); transition: background-color .3s, color .3s, border-color .3s; }
.lightbox__btn:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox__close { top: 20px; right: var(--gutter); }
.lightbox__prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--gutter); top: 50%; transform: translateY(-50%); }

.specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; padding-block: 12vh 14vh; border-top: 1px solid var(--line); }
.specs .display--md { margin-bottom: 2.4rem; }
.details { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.details > div { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.details > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.details dt, .req dt { display: flex; align-items: center; gap: 10px; font: 500 .88rem/1 var(--f-body); color: var(--mute); margin-bottom: 10px; }
.details dt .icon, .req dt .icon { color: var(--orange); width: 14px; height: 14px; }
.details dd { font: 900 1.1rem/1.2 var(--f-display); text-transform: uppercase; color: var(--ink); }
.specs__h { display: flex; align-items: center; gap: 10px; margin: 2.6rem 0 1rem; font: 900 1.3rem/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.specs__h .icon { color: var(--orange); }
.langs { width: 100%; border-collapse: collapse; }
.langs th, .langs td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.langs thead th { font: 500 .85rem/1 var(--f-body); color: var(--mute); }
.langs th:first-child { text-align: left; padding-left: 0; }
.langs tbody th { font: 900 1rem/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.langs .yes { color: var(--orange); }
.langs .no { color: var(--dim); }
.specs__platform { display: flex; align-items: center; gap: 10px; margin: -1.4rem 0 1.4rem; font: 700 .8rem/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--line-2); margin-bottom: 1.4rem; }
.seg button { padding: 14px 22px; font: 700 .78rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); transition: background-color .3s, color .3s; }
.seg button[aria-selected='true'] { background: var(--orange); color: var(--bg); }
.req > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.req dt { margin: 0; }
.req dd { color: var(--ink); font-size: .95rem; }
.req__note { margin-top: 14px; font-size: .82rem; font-style: italic; color: var(--mute); }
.share ul { display: flex; gap: 8px; }
.share a { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--line-2); color: var(--ink); transition: background-color .3s, color .3s, border-color .3s; }
.share a:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); }


.hero__ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: var(--ticker-h); border-top: 1px solid var(--line);
  max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  background: linear-gradient(0deg, rgba(11, 11, 11, .9), rgba(11, 11, 11, .55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero__ticker li { display: flex; align-items: center; gap: 14px; padding: 18px 0; font: 900 1.02rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.hero__ticker li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.hero__ticker .icon { width: 22px; height: 22px; color: var(--orange); }

/* ==========================================================================
   HOME — Our games (split cards)
   ========================================================================== */
.games { padding-block: 14vh 12vh; }
.games__head { margin-bottom: 5vh; }
.games__split {
  --cut: 5vw;
  display: flex; height: min(84svh, 900px); min-height: 560px;
  padding-inline: var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.gcard {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; display: flex; align-items: flex-end;
  color: var(--mute); background: var(--bg-2);
  transition: flex-grow .9s var(--ease);
}
.gcard:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.gcard:last-child { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); margin-left: calc(var(--cut) * -1 + 12px); }
.games__split:hover .gcard, .games__split:focus-within .gcard { flex-grow: .8; }
.games__split .gcard:hover, .games__split .gcard:focus-visible { flex-grow: 1.3; }
.gcard__media { position: absolute; inset: 0; z-index: -2; transition: filter .8s var(--ease); }
.gcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gcard--tfzp .gcard__media img { object-position: 30% 40%; }
.gcard--tup .gcard__media img { object-position: 50% 60%; }
.gcard:hover .gcard__media img { transform: scale(1.05); }
.games__split:hover .gcard:not(:hover) .gcard__media { filter: grayscale(.75) brightness(.45); }
.gcard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 11, 11, .96) 0%, rgba(11, 11, 11, .55) 40%, rgba(11, 11, 11, 0) 72%); }
.gcard__body { position: relative; width: 100%; max-width: 640px; padding: 0 calc(var(--cut) + 2vw) 7vh 3.5vw; }
.gcard:last-child .gcard__body { padding-left: calc(var(--cut) + 3vw); padding-right: 3vw; }
.gcard__title { font: 900 clamp(4rem, 8.5vw, 9rem)/.8 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: -.02em; }
.gcard__logo { display: block; width: min(100%, 460px); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .7)); }
.gcard__logo--tfzp { width: min(80%, 380px); }
.gcard__text { max-width: 44ch; margin-top: 1.4rem; color: #d8d2ca; font-size: clamp(.98rem, 1.1vw, 1.08rem); }
.gcard__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.6rem; padding: .9em 0; border-bottom: 3px solid var(--orange); font: 700 .86rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.gcard__cta .icon { color: var(--orange); transition: transform .5s var(--ease); }
.gcard:hover .gcard__cta .icon, .gcard:focus-visible .gcard__cta .icon { transform: translateX(6px); }

/* ==========================================================================
   Cinematic reel bands (3:1 loops)
   ========================================================================== */
.reel { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: clamp(300px, 33.34vw, 80svh); display: flex; align-items: flex-end; }
.reel__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 11, .85) 0%, rgba(11, 11, 11, .2) 55%, rgba(11, 11, 11, 0) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 30%, transparent 80%, var(--bg) 100%); }
.reel--bare::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 25%, transparent 75%, var(--bg) 100%); }
.reel__inner { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 7%; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.reel__title { font-size: clamp(2.6rem, 6.6vw, 7.4rem); }
.reel__ctas { margin-top: 0; }
.reel__text { max-width: 48ch; margin-top: 1.2rem; color: #d8d2ca; font-size: clamp(.98rem, 1.1vw, 1.1rem); }

/* ==========================================================================
   YouTube facade + watch sections
   ========================================================================== */
.yt { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.yt__btn { position: absolute; inset: 0; width: 100%; display: block; }
.yt__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: brightness(.72); }
.yt__btn:hover img, .yt__btn:focus-visible img { transform: scale(1.04); filter: brightness(.9); }
.yt__play {
  position: absolute; left: 50%; top: 50%; width: clamp(72px, 7vw, 110px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--orange); color: var(--bg); transform: translate(-50%, -50%);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); transition: transform .5s var(--ease);
}
.yt__play .icon { width: 34%; height: 34%; margin-left: 6%; }
.yt__btn:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); }
.yt__title { position: absolute; left: 24px; bottom: 20px; right: 24px; text-align: left; font: 900 clamp(1.1rem, 1.8vw, 1.7rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__fallback { position: absolute; inset: auto 24px 20px; color: var(--ink); }

.watch { padding-block: 4vh 14vh; }
.watch__title { margin-bottom: 4vh; }
.watch--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; align-items: center; padding-block: 14vh; }
.watch--split .statement { margin-top: 2rem; }

/* ==========================================================================
   TFZP — gear
   ========================================================================== */
.gear { padding-block: 12vh 8vh; }
.gear__title { margin-bottom: 5vh; }
.gear__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.gear__img { overflow: hidden; aspect-ratio: 16 / 10; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
.gear__item:first-child .gear__img { aspect-ratio: auto; height: calc(100% - 92px); min-height: 280px; }
.gear__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gear__item:hover .gear__img img { transform: scale(1.05); }
.gear__item h3 { margin: 20px 0 6px; font: 900 clamp(1.4rem, 1.9vw, 2rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.gear__item { display: flex; flex-direction: column; }

/* ==========================================================================
   TUP page
   ========================================================================== */
.thero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--nav-h) + 6vh) 0 12vh; }
.thero__bg { position: absolute; inset: 0; z-index: -2; }
.thero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.thero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, .45) 50%, rgba(11, 11, 11, .1) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%), linear-gradient(180deg, rgba(11, 11, 11, .6), transparent 25%); }
.thero__title { margin: 0; }
.thero__title img { width: min(760px, 86vw); height: auto; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .75)); }
.thero__text { max-width: 44ch; margin-top: 2rem; padding-left: 18px; border-left: 3px solid var(--orange); font: 600 clamp(1.05rem, 1.35vw, 1.35rem)/1.35 var(--f-display); color: var(--ink); }

.tiles4 { padding-block: 14vh 10vh; }
.tiles4 .display { margin-bottom: 5vh; }
.tiles4__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile4 { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; }
.tile4__media { position: absolute; inset: 0; z-index: -2; }
.tile4__media img, .tile4__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile4:hover .tile4__media img, .tile4:hover .tile4__media video { transform: scale(1.06); }
.tile4::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 11, 11, .95) 0%, rgba(11, 11, 11, .35) 45%, transparent 70%); }
.tile4__body { padding: 0 24px 26px; }
.tile4 h3 { font: 900 clamp(1.5rem, 2.1vw, 2.3rem)/.95 var(--f-display); text-transform: uppercase; color: var(--ink); margin-bottom: .6rem; }
.tile4 p { color: #d3cdc5; font-size: .95rem; }

.tsoon { position: relative; isolation: isolate; overflow: hidden; padding-block: 18vh; }
.tsoon__bg { position: absolute; inset: 0; z-index: -1; }
.tsoon__bg img { width: 100%; height: 120%; object-fit: cover; opacity: .55; }
.tsoon__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 15%, rgba(11, 11, 11, .4) 70%), linear-gradient(0deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.tsoon .body-lg { margin-top: 1.6rem; }

/* ==========================================================================
   Sub pages: page head, article, 404
   ========================================================================== */
.pagehead { position: relative; isolation: isolate; padding: calc(var(--nav-h) + 12vh) 0 8vh; overflow: hidden; border-bottom: 1px solid var(--line); }
.pagehead__bg { position: absolute; inset: 0; z-index: -1; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.pagehead__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), rgba(11, 11, 11, .4)); }
.news-list { padding-block: 10vh 14vh; }

.article__hero { position: relative; isolation: isolate; min-height: 78svh; display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 10vh) 0 8vh; overflow: hidden; }
.article__bg { position: absolute; inset: 0; z-index: -1; }
.article__bg img { width: 100%; height: 115%; object-fit: cover; }
.article__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 5%, rgba(11, 11, 11, .55) 60%, rgba(11, 11, 11, .35)); }
.article__head .display { max-width: 16ch; margin-bottom: 1.8rem; }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 6vw; padding-block: 8vh 14vh; }
.prose { max-width: 72ch; font-size: 1.06rem; }
.prose p { margin-bottom: 1.3rem; color: #cfc9c1; }
.prose__standfirst { font: 700 clamp(1.4rem, 2.2vw, 2rem)/1.2 var(--f-display) !important; color: var(--ink) !important; margin-bottom: 2rem !important; }
.prose h2, .prose h3 { margin: 3rem 0 1rem; font: 900 clamp(1.8rem, 2.6vw, 2.6rem)/.95 var(--f-display); text-transform: uppercase; color: var(--ink); }
.prose h2::before { content: ''; display: block; width: 48px; height: 4px; background: var(--orange); margin-bottom: 18px; transform: skewX(calc(var(--lean) * -1)); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .3s; }
.prose a:hover { color: var(--orange); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose__list { margin: 0 0 1.6rem; display: grid; gap: .7rem; }
.prose__list li { position: relative; padding-left: 26px; color: #cfc9c1; }
.prose__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 12px; height: 3px; background: var(--orange); transform: skewX(calc(var(--lean) * -1)); }
.prose__fig { margin: 2.4rem 0; }
.prose__fig img, .prose__fig video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-2); }
.prose__loop video { aspect-ratio: 3 / 1; }
.prose__pair > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prose__fig figcaption { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--orange); font-size: .9rem; color: var(--mute); }
.article__sub { max-width: 52ch; margin: -.6rem 0 1.6rem; font: 600 clamp(1.05rem, 1.4vw, 1.35rem)/1.35 var(--f-display); color: var(--ink); }
.side-game { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 2 / 3; }
.side-game > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.side-game::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 11, 11, .95) 8%, rgba(11, 11, 11, 0) 42%); }
.side-game:hover > img { transform: scale(1.06); }
.side-game__body { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 12px; color: #d8d2ca; font-size: .92rem; }
.side-game__logo { width: 150px; height: auto; }
.side-game__cta { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding-bottom: 6px; border-bottom: 3px solid var(--orange); font: 700 .8rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.side-game__cta .icon { color: var(--orange); }
.prose blockquote { margin: 3rem 0 0; padding: 26px 0 0; border-top: 4px solid var(--orange); }
.prose blockquote p { font: 900 clamp(2.4rem, 5vw, 4.4rem)/.9 var(--f-display); text-transform: uppercase; color: var(--ink); }
.article__side { display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--nav-h) + 20px); }
.side-card { padding: 22px; border: 1.5px solid var(--line); }
.side-card__h { margin: 0 0 12px; font: 900 1.1rem/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.side-card--cta img { margin: -8px 0 12px; }

.lost { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.lost__bg { position: absolute; inset: 0; z-index: -1; }
.lost__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.lost__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 20%, rgba(11, 11, 11, .4)); }
.lost .body-lg { margin-top: 1.6rem; }

/* ==========================================================================
   Motion initial states (JS only, so content is fully visible without JS)
   ========================================================================== */
.js:not(.reduced-motion) [data-reveal] { opacity: 0; transform: translateY(40px); }
.js:not(.reduced-motion) [data-hero-word] { transform: translateY(105%); }
.js:not(.reduced-motion) [data-hero-foot] { opacity: 0; }
.js:not(.reduced-motion) [data-ghero-letters] span { transform: translateY(110%); }
.js:not(.reduced-motion) .ghero__letters { overflow: hidden; }
.js:not(.reduced-motion) [data-ghero-fade], .js:not(.reduced-motion) [data-ghero-poster] { opacity: 0; }
.js:not(.reduced-motion) [data-fall-copy] { opacity: 0; }
.js:not(.reduced-motion) [data-keyart-copy] { opacity: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) { .hud__wave { display: none; } }

/* Narrower: 3 tiles over 2 (no empty cells) */
@media (max-width: 1320px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tiles li { grid-column: span 2; }
  .tiles li:nth-child(n + 4) { grid-column: span 3; }
}

@media (max-width: 1180px) {
  .nav__links, .nav__actions .socials { display: none; }
  .nav { grid-template-columns: auto 1fr auto auto; }
  .nav__actions { justify-self: end; }
  .nav__burger { display: grid; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --nav-h: 70px; }
  .nav__logo img { height: 38px; }
  .nav__actions .btn { display: none; }
  .hud__wave { display: none; }

  .hero { --ticker-h: 124px; }
  .hero__text { font-size: 1.05rem; }
  .hero__scroll { display: none; }

  .rail__pin { height: auto; min-height: 0; padding-top: calc(var(--nav-h) + 20px); }
  .rail__head { position: static; margin-bottom: 20px; }
  .rail__track { overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; height: 76svh; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail__track::-webkit-scrollbar { display: none; }
  .panel { --w: 88vw; --slant: 7vw; scroll-snap-align: start; }
  .panel__img { inset: 0; }
  .panel__body { left: 20px !important; right: 12vw; bottom: 6vh; max-width: none; }
  .panel__num { font-size: 9rem; top: 4vh; }
  .rail__bar { display: none; }

  .chars__pin { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 40px); gap: 36px; }
  .chars__stage { height: auto; width: 100%; max-width: 440px; }

  .keyart__pin { height: auto; min-height: 0; padding-top: var(--nav-h); }
  .keyart__frame { position: relative; left: auto; height: 64svh; }
  .keyart__copy { position: relative; padding-top: 32px; padding-bottom: 72px; }
  .keyart__copy > * { max-width: none; }
  .keyart__word { font-size: 40vw; }
  .rail .accent, .rail__count span:first-child { color: var(--bg); }
  .fall__copy { grid-template-columns: 1fr; gap: 18px; padding-top: 16vh; }
  .fall__pin { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .fall__copy { position: relative; }
  .fall__beats { grid-template-columns: 1fr; }
  .beat:nth-child(2) { margin-top: 0; }

  .hero__ticker { grid-template-columns: 1fr 1fr; }
  .hero__ticker li { padding: 13px 0; font-size: .86rem; }
  .hero__ticker li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__ticker li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .watch--split, .gear__grid { grid-template-columns: 1fr; }
  .gear__item:first-child .gear__img { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .tiles4__grid { grid-template-columns: 1fr 1fr; }
  .tile4 { aspect-ratio: 3 / 4.4; }
  .tile4__body { padding: 0 14px 16px; }
  .reel { height: 46svh; }
  .reel--text { height: auto; display: block; }
  .reel--text .reel__video { position: relative; height: auto; aspect-ratio: 4 / 3; object-position: 92% 50%; }
  .reel--text::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 40%); }
  .reel--text .reel__inner { padding-top: 0; padding-bottom: 48px; margin-top: -60px; position: relative; }
  .thero__title img { width: 92vw; }
  .games__split { flex-direction: column; height: auto; min-height: 0; gap: 12px; }
  .gcard { min-height: 76svh; clip-path: none !important; margin: 0 !important; }
  .gcard__body, .gcard:last-child .gcard__body { padding: 0 22px 40px; }
  .games__split:hover .gcard:not(:hover) .gcard__media { filter: none; }
  .ea__grid, .studio__grid, .contact__grid, .post-feature, .ghero__grid, .about, .lore__intro-grid, .ops__grid, .specs, .article__grid { grid-template-columns: 1fr; }
  .ghero__poster { justify-self: start; max-width: 300px; }
  .ghero__facts { grid-template-columns: 1fr 1fr; }
  .ghero__facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ghero__facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }

  .slants__row { --w: 64vw; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
  .slant { scroll-snap-align: center; }
  .slants__row:hover .slant { filter: none; }

  .timeline__pin { height: auto; min-height: 0; }
  .timeline__head { flex-direction: column; align-items: flex-start; }
  .timeline__ticks { display: none; }
  .timeline__track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 40px 60px; align-items: flex-start; scrollbar-width: none; }
  .year { width: 86vw; grid-template-columns: 1fr; gap: 10px; scroll-snap-align: start; }
  .year__num { font-size: 8rem; }
  .timeline__bar { display: none; }

  .newsletter__row { grid-template-columns: 1fr; }
  .req > div { grid-template-columns: 1fr; gap: 6px; }
  .details { grid-template-columns: 1fr; }
  .details > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .footer__cols { grid-template-columns: 1fr; }
  .article__side { position: static; }
  .news-teaser__head, .gallery__head { flex-direction: column; align-items: flex-start; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; }
  .lightbox__prev { left: auto; right: calc(var(--gutter) + 64px); }
  .lightbox__count { bottom: 30px; }
}

@media (max-width: 520px) {
  .btn { padding: 1em 1.3em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}