/* Crooked Tram Games: direction stills. Tokens are sampled from the title skyline render
   (docs/direction-notes.md); paper is the one derived tint. Contrast checked with check_contrast.py. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-2.211-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --night: #0b0707;
  --brick: #2b1311;
  --soot: #1b1c1d;
  --sodium: #c7b956;
  --pavement: #a99b79;
  --paper: #ece3c8;
  --olive: #413527;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --nav-h: 36px;
  --gutter: clamp(16px, 4vw, 64px);
  --mark-w: clamp(150px, 16vw, 240px);
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--sodium);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sodium); color: var(--night); padding: 8px 12px; z-index: 20;
}
.skip:focus { left: 8px; top: 44px; }

/* The tab bar (ZA/UM): thin, fixed, the current section highlighted. */
.tabs {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 10;
  display: flex; background: var(--night);
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
}
.tabs a {
  display: flex; align-items: center; padding: 0 14px; text-decoration: none;
  color: var(--pavement); white-space: nowrap;
}
.tabs a[aria-current="true"] { background: var(--paper); color: var(--night); }

/* The fixed mark (ZA/UM), crooked on purpose: the page's one rule-break. */
/* It rides centred through the hero and the statement (the .stage), then leaves with them,
   so it never sits on the copy further down. */
.stage { position: relative; }
.mark-rail { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.mark {
  position: sticky; top: 50vh;
  width: var(--mark-w);
  transform: translateY(-50%) rotate(-3deg);
  margin: 50vh auto 0;
  border: 2px solid var(--sodium);
  background: var(--night);
  padding: 10px 10px 8px;
  text-align: center;
}
.mark img { width: 100%; height: auto; }
.mark span {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--mark-w) * 0.135); line-height: 1; letter-spacing: 0.02em;
  color: var(--paper);
}

/* Full-screen sections. */
.screen { position: relative; min-height: 100dvh; overflow: clip; }
.screen > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen > .bg.bottom { top: auto; height: 78%; object-position: center bottom; }

.hero-line {
  position: absolute; left: var(--gutter); bottom: clamp(16px, 4vh, 40px); z-index: 2;
  max-width: 34ch; margin: 0;
  background: var(--night); padding: 10px 14px;
  font-size: 16px; color: var(--paper);
}

.statement {
  position: relative; z-index: 2;
  padding: calc(var(--nav-h) + 6vh) var(--gutter) 0;
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(52px, 8vw, 132px); line-height: 1;
  color: var(--paper);
  text-wrap: balance;
}
.statement-source {
  position: relative; z-index: 2; margin: 18px var(--gutter) 0; width: fit-content;
  background: var(--night); padding: 4px 8px;
  font-family: var(--font-mono); font-size: 14px; color: var(--pavement);
}

.game-title {
  position: absolute; z-index: 2; left: var(--gutter); bottom: var(--gutter);
  background: var(--night); padding: 22px 26px 24px; max-width: 30rem;
}
.game-title h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--sodium);
}
.game-title p { margin: 10px 0 0; color: var(--paper); }
.poster-note {
  position: absolute; z-index: 2; right: var(--gutter); bottom: var(--gutter);
  margin: 0; font-family: var(--font-mono); font-size: 13px;
  background: var(--night); color: var(--pavement); padding: 6px 10px;
}

/* Zig-zag rows (Hollow Knight). */
.rows { padding: clamp(64px, 12vh, 160px) var(--gutter); display: grid; gap: clamp(64px, 12vh, 140px); }
.row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.row.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.row.flip figure { order: 2; }
.row figure { margin: 0; }
.row img { width: 100%; height: auto; border: 2px solid var(--brick); }
.row h3 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; color: var(--paper);
}
.row p { margin: 0; color: var(--pavement); max-width: 36ch; }

/* Newsletter band. */
.signup { background: var(--sodium); color: var(--night); padding: clamp(56px, 10vh, 120px) var(--gutter); }
.signup h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 5vw, 72px); line-height: 1;
}
.signup p { margin: 12px 0 24px; max-width: 40ch; }
.signup form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 34rem; }
.signup label { position: absolute; left: -9999px; }
.signup input {
  flex: 1 1 16rem; min-width: 0; height: 52px; padding: 0 16px;
  font: inherit; color: var(--night); background: var(--paper); border: 2px solid var(--night);
}
.signup button {
  height: 52px; padding: 0 24px; font: 600 18px var(--font-body);
  background: var(--night); color: var(--paper); border: 2px solid var(--night); cursor: pointer;
}

footer {
  padding: 40px var(--gutter) 56px; display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-family: var(--font-mono); font-size: 14px; color: var(--pavement);
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .row, .row.flip { grid-template-columns: minmax(0, 1fr); }
  .row.flip figure { order: 0; }
  .tabs a { padding: 0 10px; font-size: 12px; }
  .tabs a.wide { display: none; }
  .poster-note { display: none; }
  .game-title { right: var(--gutter); }
  .mark-rail { bottom: auto; height: 100dvh; }
}

/* ---------- Build additions (motion and the live pieces) ---------- */

/* The hero skyline: the title screen's four rows, each a strip that tiles along its own width and
   drifts left at its own speed (world/title_skyline.gd). --s scales the 720-high title canvas. */
.sky {
  --s: 1;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(720px * var(--s));
  background: var(--night);
}
.sky-row {
  position: absolute; left: 0; right: 0;
  top: calc(var(--top) * var(--s));
  height: calc(var(--h) * var(--s));
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 0;
  will-change: background-position;
}
.sky-poster { display: none; }

/* Gameplay loop behind the game section's title (Dinosaur Polo Club). */
.screen > video.bg { object-fit: cover; }

/* Reveals (Hollow Knight): once, short, eased out; off without JS and under reduced motion. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* The signup band's top edge: a curved edge that rolls as it scrolls in (Dinosaur Polo Club). */
.signup { position: relative; }
.edge {
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 56px); width: 100%;
  fill: var(--sodium); display: block;
}
.edge path { transform-box: fill-box; transform: translateX(calc(var(--roll, 0) * -50%)); }

.signup .note { margin: 14px 0 0; font-size: 14px; }
.signup .sent { margin: 14px 0 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .edge path { transform: none; }
}

.signup input:disabled, .signup button:disabled { opacity: 0.55; cursor: not-allowed; }

/* The cold open, set like the game's own text panel (JetBrains Mono, a thin rule). */
.cold-open {
  position: relative; z-index: 2;
  margin: calc(var(--nav-h) + 6vh) var(--gutter) 0;
  max-width: 34rem; padding: 22px 26px 6px;
  background: var(--night); border: 1px solid var(--pavement);
  font-family: var(--font-mono); font-size: 16px; line-height: 1.65; color: var(--paper);
}
.cold-open p { margin: 0 0 1.1em; }
.cold-open + .statement { padding-top: 5vh; }

/* The rows' lines are the game's own words, in the game's face. */
.row .line {
  margin: 0; max-width: 24ch;
  font-family: var(--font-mono); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45;
  color: var(--sodium);
}
.signup h2 { max-width: 18ch; text-wrap: balance; }

.screen > .bg.bottom.low { height: 40%; }
.stage > .screen:nth-of-type(2) { padding-bottom: 42vh; }

/* The band, toned down (Bob, 2026-11-09: "too bright"): brick ground, lamp gold only for the
   heading and the button. brick/paper 13.6:1, brick/sodium 8.7:1, sodium/night 10.0:1. */
.signup { background: var(--brick); color: var(--paper); }
.signup h2 { color: var(--sodium); }
.signup .lede { color: var(--paper); }
.signup .note { color: var(--pavement); }
.signup input { border-color: var(--pavement); }
.signup button { background: var(--sodium); color: var(--night); border-color: var(--sodium); }
.edge { fill: var(--brick); }

/* The title music: a toggle at the end of the tab bar (browsers will not autoplay sound). */
.tabs .sound {
  margin-left: auto; padding: 0 14px; border: 0; border-left: 1px solid var(--olive);
  background: transparent; color: var(--sodium);
  font: inherit; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.tabs .sound[aria-pressed="true"] { background: var(--sodium); color: var(--night); }