/* Layout switches at 810px (Framer's phone breakpoint). Type scales fluidly
   with vw between the phone and ultra-wide sizes Framer used. */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #999;
  --tile: #1a1a1a;
  --icon-color: #f7f7f8;
  --rule: rgba(255, 255, 255, 0.2);
  --frame: rgba(255, 255, 255, 0.35);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 6vw, 120px);
}

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

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 300 1rem/1.2 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin: 0; }

/* HERO — shown at the video's native ratio (logo is in the video) */
.hero {
  aspect-ratio: 2560 / 1080;
  background: url(/assets/img/hero-poster.jpg) center / cover;
}
.hero video { width: 100%; height: 100%; object-fit: cover; }

/* INTRO */
.intro {
  display: grid;
  gap: 0.6em;
  padding: 2rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.intro h1 {
  font-weight: 600;
  font-size: clamp(1.75rem, 2.85vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.intro h1 span,
.intro .sub span { display: inline-block; } /* wrap between sentences, not mid-word */
.intro .sub {
  font-size: clamp(1.5rem, 2.4vw, 3.9rem);
  letter-spacing: -0.04em;
}
.intro .lede {
  font-size: clamp(1.15rem, 1.5vw, 2.5rem);
  max-width: 34em;
  justify-self: end;      /* pushed right on wide screens, like the original */
}

/* WAR FANTASY — ember video behind trailer + press kit */
.game {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(5rem, 8vw, 8rem) var(--gutter) clamp(3rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* YouTube facade */
.yt {
  position: relative;
  width: min(100%, 48vw);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid var(--fg);
  background: #111;
  cursor: pointer;
}
.yt img, .yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.yt svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.yt svg path:first-child { transition: fill .1s, fill-opacity .1s; }
.yt:hover svg path:first-child { fill: #f00; fill-opacity: 1; }

.press {
  width: 100%;
  max-width: 1300px;
  padding: 0.25em 0.5em;
  border: 3px solid var(--fg);
  background: rgba(255, 255, 255, 0.08);
  font-size: clamp(1.4rem, 2.5vw, 4rem);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.press:hover { background: var(--fg); color: var(--bg); }

/* CONNECT — tree | heading + form */
.connect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 3rem clamp(20px, 3vw, 60px);
}
.tree { width: 100%; max-width: 360px; aspect-ratio: 1; }
.connect-body { display: grid; gap: 2rem; }

.scramble {
  position: relative;
  font: 400 clamp(2.4rem, 5.3vw, 4.8rem)/1 var(--mono);
}
.scramble .scramble-layer { position: absolute; inset: 0; }

.contact { display: grid; gap: 10px; }
.contact input,
.contact textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  border: 1px solid var(--frame);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: 300 0.875rem var(--sans);
}
.contact ::placeholder { color: #aaa; text-transform: uppercase; }
.contact input:focus,
.contact textarea:focus { outline: none; border-color: var(--fg); }
.contact textarea { resize: vertical; }
.contact button {
  padding: 0.4em;
  border: 3px solid var(--fg);
  background: var(--tile);
  color: var(--fg);
  font: 300 clamp(1rem, 1.2vw, 1.5rem) var(--sans);
  text-transform: uppercase;
  cursor: pointer;
}
.contact button:hover:enabled { background: var(--fg); color: var(--bg); }
.contact button:disabled { opacity: .6; cursor: default; }
.contact .hp { position: absolute; left: -9999px; }
.form-status { min-height: 1.2em; font: 0.875rem var(--mono); color: var(--muted); }
.form-status.error { color: #ff6b6b; }

/* SOCIAL — icon files are recolored via mask, so hover is pure CSS */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 90%;
  margin: 0 auto 1.5rem;
  padding: 10px;
  border: 3px solid var(--frame);
}
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--tile);
  transition: background .2s;
}
.social a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--icon-color);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.social a:hover { background: #333; }

/* FOOTER */
footer {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--rule);
}
footer .logo { width: min(100%, 50vw); aspect-ratio: 4 / 1; }
footer p { color: var(--muted); font-size: clamp(0.7rem, 1.1vw, 1.1rem); text-align: center; }

/* ---------- Phone ---------- */
@media (max-width: 809px) {
  .hero {
    aspect-ratio: 4 / 3;
    background-image: url(/assets/img/hero-poster-mobile.jpg);
  }
  .intro { padding-block: 2.25rem; gap: 1em; }
  .intro .lede { justify-self: start; }
  .game { padding-inline: 10px; }
  .yt { width: 100%; }
  .connect { grid-template-columns: 1fr; justify-items: center; padding-inline: 30px; }
  .tree { max-width: 55vw; }
  .connect-body { width: 100%; }
  .social { width: 100%; max-width: calc(100% - 40px); }
  .social a { width: 38px; height: 38px; }
  footer .logo { width: 100%; aspect-ratio: 1280 / 320; }
  footer p { font-size: 2.3vw; }
}