/* waysideapp.io — colours come from /assets/theme.css, generated from
   src/theme. Layout is flex throughout; the only fixed-position thing is the
   CRT filter, which sits over everything and takes no space. */

@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/cinzel-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plex-mono-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plex-mono-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --gutter: 16px;
  --mono: 'Plex Mono', ui-monospace, Menlo, monospace;
  --fantasy: 'Cinzel', Georgia, serif;
  --glow: 0 0 6px color-mix(in srgb, var(--primary) 45%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  background: var(--background);
  color: var(--primary);
  font: 16px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* The CRT filter, as in the app's Scanlines: 2px line, 2px gap. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / var(--scanline)) 0 2px,
    transparent 2px 4px
  );
  z-index: 10;
}

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fantasy); font-weight: 700; color: var(--primary); letter-spacing: 0.04em; margin: 0; }

/* Copy slots Drew hasn't filled yet — visible on purpose. */
.todo {
  color: var(--dim);
  outline: 1px dashed var(--dim);
  outline-offset: 2px;
  font-style: italic;
}

/* ── the stage ──────────────────────────────────────────────────────────── */

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom));
}

.marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.wordmark-h { margin: 0; line-height: 0; }
.wordmark { width: min(82vw, 560px); }
.tagline {
  margin: 0;
  max-width: 60ch;
  color: var(--midtone);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
}
/* What Wayside is: full amber, a step brighter than the subtitle's midtone,
   so it reads as the answer to the wordmark rather than another line of mood. */
.about {
  margin: 0;
  max-width: 52ch;
  color: var(--primary);
  font-size: 17px;
  line-height: 1.65;
}
.title-top, .title-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title-top { gap: 24px; }
.title-bottom { gap: 18px; }
/* The first screen: the title, then the way down, centred under all of it. */
.fold { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.more-link {
  display: flex;
  align-items: center;
  gap: 0.9em;
  color: var(--midtone);
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 8px 4px;
}
/* The terminal's prompt, turned to face down: the scroll cue, still. */
.chev {
  display: inline-block;
  transform: rotate(90deg);
  color: var(--primary);
  text-shadow: var(--glow);
}
.more-link:hover, .more-link:focus-visible { color: var(--accent); }

/* ── the title screen: key art beside the title, as a game's would be ──── */

.title-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.title-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* The plate has no frame in the app — it sits in the dark. Here its edges
   are faded into the page's black so it reads the same way, not as a photo
   pasted on. On a phone it's cropped to the fire; the sky above is empty. */
.keyart { margin: 0; width: 100%; display: flex; justify-content: center; }
/* The plate and its lightning frame stacked in one cell. */
.plate { display: grid; width: min(100%, 520px); }
.plate img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 78%;
}
.plate .lightning { opacity: 0; pointer-events: none; }

/* Phone: wordmark and subtitle, then the plate, then what it is, then the
   download. */
@media (max-width: 959px) {
  .title-side, .title-top { display: contents; }
  .marquee { order: 1; }
  .keyart { order: 2; }
  .about { order: 3; margin: 16px 0 20px; }
  .title-bottom { order: 4; }
}

@media (min-width: 960px) {
  /* The title side is exactly as tall as the plate: wordmark level with
     its top edge, the store badges with its bottom. */
  /* The fold fills the first viewport: the title screen takes the room and
     centres the plate in it, and "more info" sits at the bottom. */
  .fold { min-height: calc(100svh - 48px); gap: 16px; }
  .title-screen {
    --plate-h: clamp(440px, calc(100svh - 300px), 820px);
    flex: 1 0 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
  }
  .keyart { width: auto; flex: 0 0 auto; }
  .plate { width: auto; }
  /* Cut clean, full width kept: the top 12% of sky and the bottom 15% of
     ground go. object-position puts the cut 12 : 15 between top and bottom.
     --plate-h leaves the plate well short of the viewport, so it sits in
     black above and below (margin-block: auto centres it). */
  .plate img {
    width: auto;
    height: var(--plate-h);
    aspect-ratio: 1694 / 1845;
    object-position: 50% 44%;
  }
  .title-side {
    height: var(--plate-h);
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 1 620px;
    gap: 24px;
  }
  .title-side :is(.marquee, .title-top, .title-bottom) { align-items: flex-start; text-align: left; }
  /* The wordmark gives way first on a short screen, so the column never
     runs taller than the plate. */
  .title-side .wordmark { width: min(560px, calc(var(--plate-h) * 0.55)); }
}

/* ── download: the official store badges, unaltered ────────────────────── */

/* The badges can't take the page's colours — Apple and Google both forbid
   recolouring — so the page meets them instead: Apple's black badge, whose
   grey border is part of the artwork, sits on the same black, under a
   Cinzel heading like the rest of the title. Apple first; Google's no
   smaller; a quarter-height of clear space between. */
.download { display: flex; flex-direction: column; align-items: center; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.badge { display: block; border-radius: 9px; }
/* Above the CRT filter (z-index 10): the scanlines would otherwise stripe the
   badge artwork, and the artwork isn't ours to alter. */
.badge { position: relative; z-index: 11; }
.badge img { height: 52px; width: auto; }
.badge:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

@media (min-width: 960px) {
  .download { align-items: flex-start; }
  .badges { justify-content: flex-start; }
}

.colophon {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-align: center;
}
.colophon nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.legal { margin: 0; max-width: 90ch; color: var(--shadow); font-size: 11px; line-height: 1.5; }
.colophon a { color: var(--dim); text-decoration: none; }
.colophon a:hover { color: var(--primary); }

/* ── the path: the road continuing below the title ──────────────────────── */

html { scroll-behavior: smooth; }
.path {
  width: min(100%, 1040px);
  margin-top: 48px;
  display: flex;
  flex-direction: column;
}
/* Rail and content side by side; the rail cell runs the stop's full height,
   so consecutive stops draw one unbroken line. */
.stop {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: clamp(16px, 3vw, 36px);
  scroll-margin-top: 32px;
}
.waypoint { display: flex; flex-direction: column; align-items: center; }
/* The marker: the diamond from the wordmark's i, set on the line. */
.waypoint::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 12px;
  background: var(--primary);
  transform: rotate(45deg);
  box-shadow: var(--glow);
}
.waypoint::after { content: ''; flex: 1 1 auto; width: 1px; margin-top: 10px; background: var(--shadow); }
.stop:last-child .waypoint::after { background: linear-gradient(var(--shadow), transparent); }
.stop-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 112px; min-width: 0; }
.stop h2 { font-size: clamp(22px, 3.2vw, 30px); }
.caption { margin: 0; color: var(--midtone); }

/* ── The road: one plate per biome ──────────────────────────────────────── */

/* Three plates side by side, each named beneath in its biome's colour, on
   one line that changes colour where the biome does — the road itself. On a
   phone the row scrolls sideways rather than stacking three tall plates. */
.biomes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68vw;
  overflow-x: auto;
  column-gap: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.biomes li {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.biomes img { border: 1px solid var(--shadow); }
.biomes h3 {
  /* Reaches across the gap to the next plate, so the road doesn't break. */
  margin: 14px -16px 0 0;
  padding-top: 10px;
  border-top: 2px solid var(--biome);
  color: var(--biome);
  font-size: clamp(15px, 1.6vw, 18px);
}
.biomes li:last-child h3 { margin-right: 0; }

@media (min-width: 720px) {
  .biomes { grid-auto-columns: 1fr; overflow: visible; }
}

/* ── Those at the Fire: the inspection screen ───────────────────────────── */

.inspect { display: flex; flex-direction: column; gap: 20px; }
.inspect > input { position: absolute; opacity: 0; pointer-events: none; }

.roster { display: flex; gap: 12px; }
.roster label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--midtone);
  font-size: 13px;
}
.roster img { width: 72px; border: 1px solid var(--shadow); filter: brightness(0.7); }

#who-scribe:checked ~ .roster [for='who-scribe'],
#who-dreamer:checked ~ .roster [for='who-dreamer'],
#who-explorer:checked ~ .roster [for='who-explorer'] { color: var(--accent); }
#who-scribe:checked ~ .roster [for='who-scribe'] img,
#who-dreamer:checked ~ .roster [for='who-dreamer'] img,
#who-explorer:checked ~ .roster [for='who-explorer'] img { border-color: var(--primary); filter: none; }
#who-scribe:focus-visible ~ .roster [for='who-scribe'] img,
#who-dreamer:focus-visible ~ .roster [for='who-dreamer'] img,
#who-explorer:focus-visible ~ .roster [for='who-explorer'] img { outline: 1px solid var(--accent); outline-offset: 3px; }

.dossier article { display: none; flex-direction: column; gap: 24px; }
#who-scribe:checked ~ .dossier .who-scribe,
#who-dreamer:checked ~ .dossier .who-dreamer,
#who-explorer:checked ~ .dossier .who-explorer { display: flex; }
.dossier img { width: min(100%, 320px); border: 1px solid var(--shadow); }
.dossier h3 { font-size: 22px; margin-bottom: 10px; }
.dossier p { margin: 0; max-width: 46ch; }

@media (min-width: 720px) {
  .inspect { flex-direction: row; }
  .roster { flex-direction: column; }
  .dossier article { flex-direction: row; }
}

/* ── Privacy First ──────────────────────────────────────────────────────── */

.facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 64ch; }
.facts li { display: flex; gap: 12px; }
.facts li::before { content: '·'; color: var(--dim); }
.more { margin: 0; font-size: 14px; }

/* ── inner pages: help, privacy ─────────────────────────────────────────── */

.marquee.small { align-self: flex-start; }
.marquee.small .wordmark { width: 160px; }

.document, .terminal {
  width: min(100%, 64ch);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.document h1, .terminal h1 { font-size: 28px; margin-bottom: 8px; }
.document p { margin: 0 0 14px; }
.dated { color: var(--dim); font-size: 14px; }

/* /help is two lines and an address: centred on the page, both ways. */
.terminal { align-items: center; text-align: center; margin-block: auto; }
/* The footer's own auto margin would take a share of the space and push it high. */
.terminal + .colophon { margin-top: 0; }
.terminal p { margin: 0 0 14px; max-width: 64ch; text-wrap: balance; }
.terminal .prompt { color: var(--primary); text-shadow: var(--glow); }
.address { font-size: 20px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}