/* ----------------------------------------------------------------------
   POURHOUSE - pourhousegame.com
   Cinematic pre-launch site. Illustrated key art + game-authentic pixel chrome.
   Palette values were sampled from the game art. Both palettes are defined
   as custom properties in :root below.
   ---------------------------------------------------------------------- */

:root {
  /* -- Palette A: marketing / key art -- */
  --gold:        #FDD56A;
  --gold-hot:    #FFE79A;
  --gold-deep:   #E0AE3C;
  --navy:        #4454AC;
  --navy-deep:   #3E446E;
  --brick:       #C7624A;
  --wood:        #A55E4E;
  --wood-dark:   #904D39;
  --oxblood:     #703237;
  --plum:        #594059;
  --brass:       #C4955A;
  --cream:       #EDE4ED;

  /* -- Palette B: in-game UI chrome -- */
  --menu-teal:    #87C7BE;
  --menu-teal-dk: #66A1AD;
  --panel:        #DCD7E6;
  --panel-edge:   #AFBBC9;
  --panel-shadow: #6C7181;
  --ui-ink:       #4A444D;
  --wheat:        #F0C47D;
  --saloon-tan:   #DAB06E;
  --saloon-orange:#CF6014;
  --saloon-rust:  #9A371B;
  --floor-brown:  #66281E;

  /* -- Cinematic stage -- */
  --void:      #100C14;
  --void-2:    #17111C;
  --void-3:    #201828;
  --ink:       #0A070D;
  --text:      #F2EAF0;
  --text-dim:  #B3A5B8;
  --text-faint:#7C6E84;

  /* -- Type -- */
  --f-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --f-pixel:   "Press Start 2P", ui-monospace, monospace;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -- Rhythm -- */
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --max:  1280px;
  --wide: 1680px;
}

/* -------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto stops the HTML width/height attributes from overriding
   any aspect-ratio or max-width we set in CSS. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 0.95; letter-spacing: -0.02em; overflow-wrap: break-word; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--ink);
  padding: 0.75rem 1.25rem; font-family: var(--f-pixel); font-size: 0.7rem; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------- film grain */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 900;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 700ms steps(3) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* -------------------------------------------------- layout helpers */
.wrap  { width: min(100% - var(--gut) * 2, var(--max));  margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gut) * 2, var(--wide)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 12vh, 9rem); position: relative; }

/* -------------------------------------------------- eyebrow */
.eyebrow {
  font-family: var(--f-pixel);
  font-size: clamp(0.55rem, 1.4vw, 0.72rem);
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
  opacity: 0.5;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { display: none; }

/* -------------------------------------------------- display headings */
/* Sized to stay readable at a glance. Archivo Black is a wide face, so the old
   7rem ceiling filled the viewport and forced the eye to track instead of read.
   The small min also keeps "SURVIVE THE RUSH." inside a 360px phone. */
.h-mega {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 5.2vw, 4.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.h-big {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.h-mid {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--text-dim);
  max-width: 58ch;
  margin: 1.5rem 0 0;
}
.gold { color: var(--gold); }

/* ----------------------------------------------------------------------
   PIXEL CHROME - mimics the game's beveled bitmap UI panels
   ---------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  color: var(--ui-ink);
  border: 3px solid var(--ui-ink);
  box-shadow:
    inset 3px 3px 0 0 #fff,
    inset -3px -3px 0 0 var(--panel-edge),
    6px 6px 0 0 rgba(10,7,13,0.55);
  border-radius: 0;
}
.panel-dark {
  background: var(--navy-deep);
  color: var(--cream);
  border: 3px solid var(--ink);
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,0.14),
    inset -3px -3px 0 0 rgba(0,0,0,0.4),
    6px 6px 0 0 rgba(10,7,13,0.6);
}

/* -------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--f-pixel);
  font-size: clamp(0.62rem, 1.5vw, 0.8rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.15em 1.6em;
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 90ms steps(2), box-shadow 90ms steps(2), background-color 140ms;
  position: relative;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow:
    inset 3px 3px 0 0 var(--gold-hot),
    inset -3px -3px 0 0 var(--gold-deep),
    6px 6px 0 0 var(--navy-deep);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-hot);
  transform: translate(3px, 3px);
  box-shadow:
    inset 3px 3px 0 0 #fff,
    inset -3px -3px 0 0 var(--gold-deep),
    3px 3px 0 0 var(--navy-deep);
}
.btn-primary:active {
  transform: translate(6px, 6px);
  box-shadow: inset 3px 3px 0 0 var(--gold-deep), 0 0 0 0 var(--navy-deep);
}

/* Built the same way as .btn-primary on purpose. Both buttons are the same
   height, but a cream OUTER border read as a larger box next to the primary,
   whose ink border disappears against the dark hero. Putting the cream on an
   inset ring instead lands both visible edges at the same place, and the 6px
   shadow and 3px press match the primary too. */
.btn-ghost {
  background: rgba(20,14,24,0.55);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow:
    inset 0 0 0 2px var(--cream),
    6px 6px 0 0 rgba(10,7,13,0.6);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--cream); color: var(--ink);
  transform: translate(3px,3px);
  box-shadow:
    inset 0 0 0 2px var(--cream),
    3px 3px 0 0 rgba(10,7,13,0.6);
}

/* Pending state, shown until config.steamUrl is filled in. Deliberately NOT
   aria-disabled: the button still does something (it sends people to the
   mailing list), and marking it disabled would tell screen readers otherwise. */
.btn-pending {
  cursor: pointer;
  background: var(--panel-shadow);
  color: rgba(255,255,255,0.78);
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,0.16),
    inset -3px -3px 0 0 rgba(0,0,0,0.35),
    6px 6px 0 0 rgba(10,7,13,0.5);
}
/* Same press as the other buttons, kept one step quieter so it never reads as
   a live Steam link. */
.btn-pending:hover,
.btn-pending:focus-visible {
  background: #7C8290;
  color: #fff;
  transform: translate(3px, 3px);
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,0.24),
    inset -3px -3px 0 0 rgba(0,0,0,0.30),
    3px 3px 0 0 rgba(10,7,13,0.5);
}
.btn-pending:active {
  transform: translate(6px, 6px);
  box-shadow:
    inset 3px 3px 0 0 rgba(0,0,0,0.25),
    0 0 0 0 rgba(10,7,13,0.5);
}

.btn .ico { width: 1.35em; height: 1.35em; flex: none; }

/* ----------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -8% 0 0;
  height: 116%;
  z-index: -2;
  will-change: transform;
  /* The parallax script writes translate3d(...) scale(1.04). Declaring the SAME
     scale here as the resting state matters: without it the element sits at
     scale(1) until the first scroll event, then snaps to 1.04, which reads as
     the background glitching and changing size. Keep these two in sync. */
  transform: translate3d(0, 0, 0) scale(1.04);
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: saturate(1.02) contrast(1.04) brightness(0.66);
}
/* Cinematic scrim. Two layers: a soft centre pool that lifts the logo and body
   copy off a very busy illustration, and a vertical wash that dissolves the art
   into the page background so the hero has no visible seam. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(75% 55% at 50% 46%,
      rgba(10,7,13,0.62) 0%,
      rgba(10,7,13,0.42) 45%,
      rgba(10,7,13,0.10) 78%,
      transparent 100%),
    linear-gradient(to bottom,
      rgba(10,7,13,0.92) 0%,
      rgba(10,7,13,0.42) 18%,
      rgba(16,12,20,0.38) 48%,
      rgba(16,12,20,0.90) 84%,
      var(--void) 100%);
}

.hero-inner {
  display: grid; place-items: center; text-align: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gut) 2rem;
}
.hero-logo {
  width: min(660px, 82vw);
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.7));
}
.hero-tag {
  font-family: var(--f-pixel);
  font-size: clamp(0.6rem, 2.1vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
  text-shadow: 0 3px 0 rgba(10,7,13,0.85);
}
.hero-sub {
  color: var(--cream);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  max-width: 46ch;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) auto 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 4px 22px rgba(0,0,0,0.85);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.hero-foot {
  position: relative; z-index: 2;
  padding: 0 var(--gut) clamp(1.75rem, 4vh, 2.75rem);
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  font-family: var(--f-pixel);
  font-size: clamp(0.5rem, 1.1vw, 0.62rem);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.hero-foot .platform { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
@media (max-width: 520px) { .scroll-cue { display: none; } }
.hero-foot .platform svg { width: 1.5em; height: 1.5em; fill: var(--text-dim); }

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  color: var(--gold);
  padding: 0.4rem 0.9rem;
}
.scroll-cue span {
  display: block;
  font-size: 2.1rem;          /* the hero-foot base size is tiny, so override it */
  line-height: 1;
  text-shadow: 0 3px 10px rgba(0,0,0,0.9);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue:hover span { color: var(--gold-hot); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* Intro choreography. The gaps are deliberately generous: the logo lockup carries
   both the title and the tagline, so the reader needs a beat to take those in
   before the supporting line arrives. */
.hero-logo, .hero-sub, .hero-cta {
  opacity: 0; animation: rise 1.35s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-logo { animation-delay: 0.2s; }
.hero-sub  { animation-delay: 1.15s; }
.hero-cta  { animation-delay: 1.95s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-sub, .hero-cta { animation: none; opacity: 1; }
}

/* ----------------------------------------------------------------------
   STICKY NAV
   ---------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--gut);
  background: rgba(12,9,16,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 2px solid rgba(253,213,106,0.18);
  transform: translateY(-105%);
  transition: transform 380ms cubic-bezier(.2,.7,.3,1);
}
.nav.on { transform: none; }
.nav-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--text); }
.nav-brand img { width: 34px; height: 34px; }
.nav-brand b {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.8rem); }
.nav-links a:not(.btn) {
  font-family: var(--f-pixel); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase;
}
.nav-links a:not(.btn):hover { color: var(--gold); }
.nav .btn { padding: 0.85em 1.15em; }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ----------------------------------------------------------------------
   REVEAL ON SCROLL
   ---------------------------------------------------------------------- */
.rv {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.2,.7,.3,1);
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 200ms; }
.rv-d2 { transition-delay: 400ms; }
.rv-d3 { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ----------------------------------------------------------------------
   STATEMENT BAND
   ---------------------------------------------------------------------- */
.statement { text-align: center; padding-block: clamp(6rem, 16vh, 11rem); }
.statement .h-mega span { display: block; }
.statement .h-mega .l2 { color: var(--gold); }
.statement .h-mega .l3 { -webkit-text-stroke: 2px var(--gold); color: transparent; }
@supports not (-webkit-text-stroke: 2px red) { .statement .h-mega .l3 { color: var(--gold); } }

/* ----------------------------------------------------------------------
   FULL-BLEED CINEMATIC SHOWCASE
   ---------------------------------------------------------------------- */
.showcase { position: relative; isolation: isolate; }
.showcase-media img { width: 100%; height: clamp(420px, 78vh, 860px); object-fit: cover; }
.showcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--void) 0%, rgba(16,12,20,0.15) 18%, rgba(16,12,20,0.55) 62%, var(--void) 100%);
}
.showcase-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 var(--gut) clamp(2.5rem, 7vh, 5rem);
}
.showcase-copy .inner { width: min(100%, var(--max)); margin-inline: auto; }
.showcase-copy .lede { color: var(--cream); text-shadow: 0 2px 14px rgba(0,0,0,0.85); }

/* ----------------------------------------------------------------------
   FEATURE PANELS
   ---------------------------------------------------------------------- */
.features {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.feature { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.9rem; }
/* The three panels sit side by side, so they all cross the reveal threshold at the
   same moment. A wider stagger than the global one makes 01, 02, 03 land in order
   and read as a sequence rather than a single pop. */
.feature.rv    { transition-delay: 0ms; }
.feature.rv-d1 { transition-delay: 380ms; }
.feature.rv-d2 { transition-delay: 760ms; }
.feature .num {
  font-family: var(--f-pixel); font-size: 0.65rem; letter-spacing: 0.12em;
  color: var(--gold); background: var(--navy-deep);
  border: 2px solid var(--ink);
  padding: 0.55em 0.75em; align-self: start;
}
.feature h3 {
  font-family: var(--f-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  text-transform: uppercase; color: var(--ui-ink);
}
.feature p { margin: 0; color: #5A525F; font-size: 0.98rem; line-height: 1.6; }

/* ----------------------------------------------------------------------
   TRAILER
   ---------------------------------------------------------------------- */
.trailer-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 4px solid var(--ui-ink);
  box-shadow: inset 4px 4px 0 0 rgba(255,255,255,0.10), inset -4px -4px 0 0 rgba(0,0,0,0.55), 10px 10px 0 0 rgba(10,7,13,0.6);
  overflow: hidden;
  display: grid; place-items: center;
}
.trailer-frame video, .trailer-frame iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.trailer-pending { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--gut); }
.trailer-pending img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(0.3); }
.trailer-pending .msg { position: relative; z-index: 2; }
.trailer-pending .msg p {
  font-family: var(--f-pixel); font-size: clamp(0.6rem, 1.6vw, 0.8rem);
  letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; margin: 0 0 0.9rem;
}
.trailer-pending .msg small { color: var(--text-dim); font-size: 0.9rem; }

/* ----------------------------------------------------------------------
   GALLERY
   ---------------------------------------------------------------------- */
.gallery {
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.1rem);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .gallery { grid-template-columns: 1fr; } }
.shot {
  position: relative; padding: 0; margin: 0;
  border: 3px solid var(--ui-ink); background: var(--ink);
  box-shadow: 5px 5px 0 0 rgba(10,7,13,0.6);
  cursor: zoom-in; overflow: hidden; display: block; width: 100%;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.shot img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}
.shot:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 rgba(10,7,13,0.7); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; inset: auto 0 0 0;
  font-family: var(--f-pixel); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); background: linear-gradient(transparent, rgba(10,7,13,0.92));
  padding: 2.2rem 0.85rem 0.7rem; text-align: left;
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(8,5,10,0.96);
  display: none; place-items: center;
  padding: var(--gut) var(--gut) calc(var(--gut) + 2.4rem);
}
.lb.on { display: grid; }
.lb img {
  max-width: min(1600px, 96vw); max-height: 82vh; width: auto;
  border: 3px solid var(--ui-ink); box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}
.lb-close {
  position: absolute; top: var(--gut); right: var(--gut);
  font-family: var(--f-pixel); font-size: 0.75rem; color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); padding: 0.7em 0.9em; cursor: pointer;
}
.lb-cap {
  position: absolute; bottom: calc(var(--gut) - 0.4rem); left: 0; right: 0; text-align: center;
  font-family: var(--f-pixel); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   SIGNUP
   ---------------------------------------------------------------------- */
.signup {
  position: relative;
  background:
    linear-gradient(rgba(16,12,20,0.90), rgba(16,12,20,0.82)),
    url("../assets/img/screens/saloon.webp") center / cover no-repeat,
    var(--wheat);
  border-block: 2px solid rgba(253,213,106,0.2);
}
/* Gold has no contrast on the light panel, so use the brand navy instead. */
.signup .eyebrow { color: var(--navy); }
.signup .eyebrow::after { background: linear-gradient(90deg, var(--navy), transparent); }
.signup-card { padding: clamp(1.75rem, 4vw, 3rem); text-align: center; max-width: 760px; margin-inline: auto; }
.signup-card h2 { color: var(--ui-ink); }
.signup-card > p { color: #5A525F; max-width: 52ch; margin: 1rem auto 0; }
.form-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.form-row input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--f-body); font-size: 1rem;
  padding: 1.05em 1.1em;
  background: #fff; color: var(--ui-ink);
  border: 3px solid var(--ui-ink); border-radius: 0;
  box-shadow: inset 3px 3px 0 0 var(--panel-edge);
}
.form-row input[type="email"]::placeholder { color: #9A93A0; }
.form-note { font-size: 0.82rem; color: #6B6371; margin: 1.1rem 0 0; }
.form-msg { margin-top: 1rem; font-family: var(--f-pixel); font-size: 0.65rem; letter-spacing: 0.1em; line-height: 1.6; }
.form-msg.ok  { color: #1E7A4C; }
.form-msg.err { color: #B3312C; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ----------------------------------------------------------------------
   DEV SECTION
   ---------------------------------------------------------------------- */
.dev { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .dev { grid-template-columns: 0.85fr 1.15fr; } }
.dev-art { border: 3px solid var(--ui-ink); box-shadow: 10px 10px 0 0 rgba(10,7,13,0.6); }
.dev blockquote {
  margin: 0; font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */
.footer { background: var(--ink); border-top: 2px solid rgba(253,213,106,0.16); padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; }
.footer-mark { display: flex; align-items: center; gap: 0.8rem; }
.footer-mark img { width: 46px; }
.footer-mark b { font-family: var(--f-display); text-transform: uppercase; font-size: 1.2rem; display: block; }
.footer-mark small { color: var(--text-faint); font-size: 0.8rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer nav a { font-family: var(--f-pixel); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
.footer nav a:hover { color: var(--gold); }
.footer-legal {
  margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--text-faint);
}

/* ----------------------------------------------------------------------
   PRESS PAGE
   ---------------------------------------------------------------------- */
.page-head { padding-block: clamp(7rem, 16vh, 10rem) clamp(2rem, 5vh, 3rem); border-bottom: 2px solid rgba(253,213,106,0.16); }
.fact-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.fact-table th, .fact-table td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.09); vertical-align: top; }
.fact-table th { font-family: var(--f-pixel); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; width: 34%; }
.fact-table td { color: var(--text-dim); }
.dl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: 1.5rem; }
.dl { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dl b { font-family: var(--f-display); text-transform: uppercase; color: var(--ui-ink); font-size: 1.05rem; }
.dl span { font-size: 0.85rem; color: #5A525F; }
.copyblock {
  background: var(--void-2); border: 2px solid rgba(255,255,255,0.1);
  padding: 1.4rem; font-size: 0.95rem; color: var(--text-dim); margin-top: 1rem;
  white-space: pre-wrap; font-family: var(--f-body);
}