/* Fonts are self-hosted (SIL Open Font License, see /fonts/*-OFL.txt). Latin subset, variable weight. */
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin.22f9b928aa.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.e9201eddf1.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.14425ba9c6.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* Layout: a live current fills the window; type floats on it like a buoy. One canvas, quiet copy, nothing boxed. */
:root {
  --deep: #061a24;
  --deep-2: #0b2a38;
  --foam: #e4f1f4;
  --silt: #85a3ad;
  --current: #8fd3e6;
  --packet: #f0b35e;
  --display: "Unbounded", "Trebuchet MS", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--deep); }
body {
  margin: 0;
  min-height: 100%;
  background: var(--deep);
  color: var(--foam);
  font: 400 1.0625rem/1.65 var(--body);
}
/* The river lives in the opening section and scrolls away with it. */
.opening { position: relative; overflow: hidden; }
.opening::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(6, 26, 36, 0), var(--deep));
  pointer-events: none;
  z-index: 0;
}
canvas#river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
header.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: max(22px, env(safe-area-inset-top, 0px)) 22px;
}
.wordmark {
  font: 500 1rem/1 var(--display);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--foam);
}
a:focus-visible { outline: 2px solid var(--packet); outline-offset: 3px; }

.hero {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  padding-block: 12vh 8vh;
  pointer-events: none;
}
.hero > * { pointer-events: auto; }
h1 {
  margin: 0;
  font: 300 clamp(2.6rem, 7.4vw, 6.4rem)/1.02 var(--display);
  letter-spacing: -0.02em;
  max-width: 13ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6, 26, 36, 0.8);
}
h1 em { font-style: normal; color: var(--current); }
.hero p {
  margin: 0;
  max-width: 44ch;
  font-size: 1.2rem;
  color: var(--foam);
  text-shadow: 0 1px 16px rgba(6, 26, 36, 0.9);
}
.hint {
  font: 400 0.75rem/1.4 var(--mono);
  color: var(--silt);
  letter-spacing: 0.04em;
}

.stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  padding-block: 56px;
  border-top: 1px solid rgba(228, 241, 244, 0.16);
}
.stage { min-width: 0; }
.stage .k {
  display: block;
  font: 400 0.75rem/1 var(--mono);
  color: var(--packet);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.stage h2 {
  margin: 0 0 8px;
  font: 500 1.3rem/1.2 var(--display);
  letter-spacing: 0.01em;
}
.stage p { margin: 0; color: var(--silt); max-width: 34ch; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 28px max(36px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(228, 241, 244, 0.16);
  font: 400 0.8rem/1.5 var(--mono);
  color: var(--silt);
}

@media (max-width: 760px) {
  .stages { grid-template-columns: 1fr; }
  .hero { min-height: 70vh; }
}