/* Press Start 2P is the game's own font, served from this site rather than a
   font CDN: a hosted webfont would send every visitor's IP to a third party,
   which the privacy policy would then have to declare. Licence: fonts/OFL.txt */
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p.ttf") format("truetype");
  font-display: swap;
}

/* Only the two ends of the waldgeist ramps. The full palette is kept for the
   Roaming Rover page, so the company page stays sober. */
:root {
  --bg: #0b1016;
  --surface: #141f25;
  --rule: #323b42;
  --text: #e3ddd1;
  --muted: #879ea3;
  --accent: #a6884a;
  /* The sorbent, magnesium hydroxide: a milky slurry. Bone, from the same ramp. */
  --milk: #bdbbae;

  --pixel: "Press Start 2P", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 6vw, 96px);
}

* { 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(--bg);
  color: var(--text);
  font: 11px/2.2 var(--pixel);
}

a { color: inherit; text-underline-offset: 0.5em; text-decoration-thickness: 2px; }
a:hover { opacity: 0.75; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

p { margin: 0; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Navigation bar, shared by every page */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  border-bottom: 1px solid var(--rule);
}

.nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark { font-size: 12px; letter-spacing: 0.1em; }
.nav-links { display: flex; gap: clamp(16px, 3vw, 40px); font-size: 10px; color: var(--muted); }

/* Landing: opening screen */

.hero {
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
}

.hero-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px clamp(40px, 6vw, 96px);
  padding: 64px 0;
}

.hero-text {
  flex: 999 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.hero h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 7.2vw, 96px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.subtitle { max-width: 32ch; font-size: clamp(12px, 1.4vw, 16px); line-height: 2; color: var(--muted); }
.bar { width: 64px; height: 4px; background: var(--accent); }

.hero-art { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.hero-art svg { width: 100%; max-width: 460px; height: auto; shape-rendering: crispEdges; overflow: visible; }

.scroll {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 32px;
  font-size: 10px;
  color: var(--muted);
  text-decoration: none;
}

/* The controller-to-flask drawing. Stepped timing at the game's own 10 fps,
   so it moves the way the sprites do. */
@keyframes packet { 0% { opacity: 1; } 20%, 100% { opacity: 0.2; } }
/* The bubbles are the signal's colour: the same yellow that runs along the
   cable carries on through the flask. Each rises --rise pixels, one pixel per
   step, and stays inside the glass: up the neck through the middle, or only to
   the surface at the sides, where the shoulders slope in over them. */
@keyframes rise {
  0% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(calc(var(--rise) * -1px)); opacity: 1; }
  100% { transform: translateY(calc(var(--rise) * -1px)); opacity: 0; }
}
@keyframes slosh { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }

.link-anim .ink { fill: var(--text); }
.link-anim .cut { fill: var(--bg); }
.link-anim .liquid { fill: var(--milk); }
.link-anim .screen { fill: var(--accent); }
.link-anim .packet { fill: var(--accent); opacity: 0.2; animation: packet 1.2s steps(1, end) infinite; }
.link-anim .bubble { fill: var(--accent); animation: rise 1.8s steps(var(--rise), end) infinite; }
.link-anim .surface { animation: slosh 1.2s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .link-anim *, .sprite img { animation: none !important; opacity: 1; }
}

/* Landing: numbered sections */

.section { border-top: 1px solid var(--rule); }

.section > .wrap {
  padding-block: clamp(72px, 9vw, 140px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 6vw, 96px);
}

.label { flex: 1 1 200px; font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
.content { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.lead { max-width: 34ch; font-size: clamp(15px, 1.9vw, 24px); line-height: 1.8; }
.muted { color: var(--muted); }
.measure { max-width: 56ch; }

.note {
  max-width: 56ch;
  border: 1px solid var(--rule);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.note-label { font-size: 10px; letter-spacing: 0.08em; color: var(--accent); }

.game {
  flex: 999 1 520px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
}

.game-art {
  flex: 1 1 260px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 -1px -1px 0;
}
/* The game's own sprite sheet: one frame showing, stepped at the game's 10 fps. */
.sprite { display: block; overflow: hidden; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px); }
.sprite img { display: block; height: 100%; width: auto; image-rendering: pixelated; animation: frames calc(var(--n) * 100ms) steps(var(--n)) infinite; }
@keyframes frames { to { transform: translateX(-100%); } }

.game-text {
  flex: 999 1 300px;
  min-width: 0;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-status { font-size: 9px; letter-spacing: 0.04em; color: var(--muted); }
.game h2 { margin: 0; font-weight: 400; font-size: clamp(18px, 2.4vw, 30px); line-height: 1.4; }

.go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 8px;
  text-decoration-color: var(--accent);
}

/* Document pages: game page, privacy, support, 404 */

/* Left-aligned with the nav, not centred: only the reading measure narrows. */
.doc { padding-bottom: 96px; }
.doc > * { max-width: 52rem; }
.doc h1 {
  font-weight: 400;
  font-size: clamp(18px, 3.4vw, 30px);
  line-height: 1.5;
  margin: clamp(56px, 8vw, 96px) 0 32px;
}
.doc h2 { font-weight: 400; font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin: 56px 0 16px; }
.doc p + p { margin-top: 20px; }
.doc ul { padding-left: 1.5em; margin: 0; }
.doc li + li { margin-top: 12px; }
.doc strong { font-weight: 400; color: var(--accent); }
.meta { font-size: 9px; color: var(--muted); margin-bottom: 32px; }

.links { list-style: none; padding: 0 !important; border-top: 1px solid var(--rule); }
.links li { margin: 0 !important; border-bottom: 1px solid var(--rule); }
.links a { display: flex; align-items: center; min-height: 56px; text-decoration: none; }

/* Footer, shared by every page */

.footer { border-top: 1px solid var(--rule); }
.footer .wrap {
  padding-block: 32px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 40px;
  font-size: 9px;
  color: var(--muted);
}
.footer a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; }