@font-face { font-family: "General Sans"; src: url("fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Acid night: a triad 120 degrees apart in OKLCH. Acid lime leads; sky and bubblegum are signals only */
  --lime: #d1fd39;        /* oklch(93% 0.21 122) brand */
  --lime-deep: #bce426;   /* oklch(86% 0.20 122) pressed and hovered lime */
  --sky: #38aefa;         /* oklch(72% 0.15 242) signal: your catch */
  --bubblegum: #f5739c;   /* oklch(72% 0.165 2) signal: the radio lamp */
  --amber: #faab3f;       /* the reel's pinned orange */
  --signal-red: #f4514f;  /* the reel's pinned red */

  /* neutrals, cooled toward 265 */
  --night: #0b0c0f;       /* oklch(15.5% 0.006 265) page */
  --graphite: #15171b;    /* oklch(20.5% 0.008 265) surfaces */
  --line: #292b30;        /* oklch(29% 0.010 265) hairlines */
  --chalk: #f2f3f6;       /* oklch(96.5% 0.004 265) text */
  --muted: #9598a0;       /* oklch(68% 0.012 265) secondary text */
  --on-scene: #f2f3f6;    /* type set over the live scene */

  /* the radio: a pale object standing on the dark page */
  --shell: #e8e9ed;
  --shell-key: #dadce1;
  --shell-key-hover: #ced1d7;
  --shell-ink: #15171b;
  --shell-grille: #6e7279;
  --screen: #121212;

  --reel-good: var(--lime);
  --reel-warn: var(--amber);
  --reel-danger: var(--signal-red);

  /* type: one family */
  --face: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-title: clamp(30px, 3.4vw, 46px);
  --fs-hero: clamp(44px, 6.4vw, 96px);

  /* space */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 112px;
  --radius-media: 20px;
  --header: 76px;
  --frame-margin: 20px;   /* the lake window's inset from the screen edges */
  --frame-inset: 24px;    /* type inside the window sits this far in; the header lines up with it */
  --stage-run: 170svh;    /* how much scroll the descent from the sky takes */
  --fs-wordmark: calc((100vw - 2 * (var(--frame-margin) + var(--frame-inset))) / 6.2);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-ui: 220ms;
  --dur-reveal: 700ms;

  color-scheme: dark;
  scrollbar-color: var(--line) var(--night);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background: var(--night);
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* the short hold at the lake never shifts the layout */
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--night);
  color: var(--chalk);
  font-family: var(--face);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--lime);
}
::selection { background: var(--lime); color: var(--night); }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
button, a, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
h1, h2, p, ul, figure { margin: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4em; padding: 0.5em 0.9em; background: var(--lime); color: var(--night); text-decoration: none; border-radius: 999px; z-index: 10; }
.skip:focus-visible { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.brand-ink { color: var(--lime); }

/* ---------- header ---------- */

.header-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--header); }
/* the header spans the screen like the lake window, lined up with the type inside it */
.site-header .wrap { max-width: none; padding-inline: calc(var(--frame-margin) + var(--frame-inset)); }
/* on the home page it floats over the sky; during the descent it stays put */
.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; transition: background-color var(--dur-ui) var(--ease-out); }
.has-stage .home .site-header { position: fixed; }
.has-stage.is-past-stage .home .site-header { background: var(--night); }
.has-stage .home .brand-name { opacity: var(--brand-in, 0); }
/* one second at the lake before the page scrolls on, until the first catch */
html.is-holding { overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chalk); }
.brand-mark { width: 30px; height: 30px; fill: var(--lime); flex: none; }
.brand-sails { transform-origin: 16px 12px; transform-box: view-box; rotate: calc(var(--descent, 0) * 90deg); }
.brand-name { font-weight: 500; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.nav a:not(.button) { text-decoration: none; color: var(--muted); transition: color var(--dur-ui) var(--ease-out); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  background: var(--lime); color: var(--night);
  font-weight: 500; font-size: 15px; text-decoration: none; letter-spacing: 0.005em;
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.button--small { min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.button:active { transform: scale(0.97); }

/* ---------- the stage: the sky, the descent, the lake ---------- */

.stage { position: relative; }
.stage-anchor { position: absolute; left: 0; top: 100svh; }
.stage-pin { display: flex; flex-direction: column; }

/* without the live descent (no WebGL, reduced motion, no JS) the sky and the lake simply stack */
.sky-hero {
  order: -1;
  position: relative;
  height: 100svh; min-height: 520px;
  background: var(--graphite) url("img/sky.webp") 50% 100% / cover;
}
.lake {
  --frame-w: calc(100vw - 2 * var(--frame-margin));
  position: relative;
  margin: var(--frame-margin) var(--frame-margin) 0;
  /* fill the screen, but never wider than 2.4 or taller than 1.3 */
  height: clamp(var(--frame-w) / 2.4, 100svh - 2 * var(--frame-margin), var(--frame-w) / 1.3);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--graphite);
  isolation: isolate;
}
.lake-window, .lake-media { position: absolute; inset: 0; }
.lake-media { overflow: hidden; background: var(--graphite); }
.lake-poster, .lake-canvas, .lake-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.lake-poster { object-fit: cover; object-position: 50% 37.5%; }
.lake-poster--sky { display: none; }
.lake-canvas { opacity: 0; }
.lake-canvas.is-live { animation: lift-in var(--dur-reveal) var(--ease-out) forwards; }
/* the frame only carries the controls; clicks on the water fall through to it (hold anywhere to cast) */
.lake-frame { position: absolute; inset: 0; pointer-events: none; }
.reel-control, .lake-back { pointer-events: auto; }
.has-stage .stage-pin:not(.is-settled) :is(.reel-control, .lake-back) { pointer-events: none; }

/* the live descent: one pinned screen, scrubbed by native scroll */
.has-stage .stage { height: calc(100svh + var(--stage-run)); }
.has-stage .stage-anchor { top: var(--stage-run); }
.has-stage .stage-pin { position: sticky; top: 0; display: block; height: 100svh; overflow: hidden; background: var(--night); }
.has-stage .sky-hero { position: absolute; inset: 0; height: auto; min-height: 0; background: none; pointer-events: none; }
/* the horizon's warmth, still below the edge, just reaches the foot of the sky; it hands over to the real glow as you look down */
.sky-hero::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(to top, rgb(250 171 63 / 0.1), rgb(250 171 63 / 0)); opacity: var(--sky-warmth, 1); pointer-events: none; }
/* stacked page: the sky settles into the night page instead of ending in a cut */
html:not(.has-stage) .sky-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(to bottom, rgb(11 12 15 / 0), var(--night)); pointer-events: none; }
html:not(.has-stage) .wordmark { z-index: 1; }
.is-wordmark-visible .home .brand-name { opacity: 0; }
.has-stage .lake {
  position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0;
  /* the frame closes in around the scene as you arrive */
  clip-path: inset(calc(var(--close, 0) * var(--header)) calc(var(--close, 0) * var(--frame-margin)) calc(var(--close, 0) * var(--frame-margin)) round calc(var(--close, 0) * var(--radius-media)));
}
.has-stage .lake-poster--sky { display: block; object-position: 50% 50%; }
.has-stage .lake-poster--lake { display: none; }
.has-stage .lake-frame { inset: var(--header) var(--frame-margin) var(--frame-margin); transition: opacity var(--dur-ui) var(--ease-out); }
.has-stage .stage-pin:not(.is-settled) .lake-frame { opacity: 0; pointer-events: none; }
.has-stage .lake-video { inset: var(--header) var(--frame-margin) var(--frame-margin); width: auto; height: auto; }

/* the sky: one line of offer, the status, and the name along the foot */
.sky-top {
  position: absolute; left: 0; right: 0; top: calc(var(--header) + 56px);
  padding-inline: calc(var(--frame-margin) + var(--frame-inset));
  display: flex; justify-content: space-between; align-items: start; gap: var(--s-4);
}
.sky-line { max-width: 22ch; font-size: 26px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 1px 3px rgb(1 4 12 / 0.45), 0 10px 32px rgb(1 4 12 / 0.5); }
.hero-status {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 14px;
  border-radius: 999px; background: rgb(11 12 15 / 0.42);
  font-size: var(--fs-small); color: var(--chalk); white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.wordmark, .loader-word {
  position: absolute; left: calc(var(--frame-margin) + var(--frame-inset)); bottom: calc(var(--frame-margin) + 0.1em);
  margin-left: -0.055em; /* the M's side bearing, so the stem lines up with the header */
  font-weight: 500; font-size: var(--fs-wordmark); line-height: 0.9; letter-spacing: -0.045em;
  white-space: nowrap; color: var(--chalk);
  /* soft, deep-navy shadow: lifts the name off the sky without a glow */
  text-shadow: 0 2px 5px rgb(1 4 12 / 0.5), 0 18px 60px rgb(1 4 12 / 0.55);
  transform-origin: 0 0;
}
.has-stage .wordmark, .has-stage .sky-top { will-change: transform, opacity; }

/* one quiet line in the water, gone once play starts */
.lake-caption {
  position: absolute; left: var(--frame-inset); bottom: 20px; right: var(--frame-inset);
  max-width: 90ch;
  font-size: var(--fs-small); line-height: 1.45;
  color: rgb(242 243 246 / 0.74);
  text-shadow: 0 1px 12px rgb(11 12 15 / 0.6);
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.lake-caption strong { font-weight: 500; color: var(--on-scene); margin-right: 0.45em; }
.lake[data-mode]:not([data-mode="idle"]) .lake-caption { opacity: 0; }
.no-js .lake-caption, .lake.is-still .lake-caption { display: none; }

/* the payoff: the 1987 footage set into the window, no bars, no player chrome */
.lake-video { display: grid; place-items: center; container-type: size; background: var(--night); }
.lake-video.is-waiting { opacity: 0; pointer-events: none; }
.lake-video .video-crop {
  position: relative;
  width: min(92cqw, 84cqh * 4 / 3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
}
.lake-video iframe { position: absolute; top: -12.5%; left: -33.334%; width: 166.667%; height: 125%; border: 0; }

/* ink closes onto the fish and lifts off with the video under it */
@property --ink-s { syntax: "<length>"; inherits: false; initial-value: 5000px; }
.lake-ink {
  position: absolute; inset: 0;
  --ink-x: 50%; --ink-y: 50%; --ink-s: 5000px;
  background: var(--night);
  -webkit-mask-image: linear-gradient(var(--night), var(--night)), url("img/ink-bloom.png");
  mask-image: linear-gradient(var(--night), var(--night)), url("img/ink-bloom.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, var(--ink-s) var(--ink-s);
  mask-size: 100% 100%, var(--ink-s) var(--ink-s);
  -webkit-mask-position: 0 0, calc(var(--ink-x) - var(--ink-s) / 2) calc(var(--ink-y) - var(--ink-s) / 2);
  mask-position: 0 0, calc(var(--ink-x) - var(--ink-s) / 2) calc(var(--ink-y) - var(--ink-s) / 2);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --ink-s var(--ink-dur, 900ms) var(--ease-in-out);
  pointer-events: none;
}
.lake-ink[hidden] { display: none; }

/* the reel: the line's own arc and the one word that says what to do */
.reel {
  position: absolute;
  left: 35.6%; top: 60.9%;
  width: 28.8%;
  display: grid; justify-items: center; align-content: start;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.no-js .reel, .lake.is-still .reel { display: none; }
.reel-arc { width: 100%; height: auto; overflow: visible; pointer-events: none; transition: opacity var(--dur-ui) var(--ease-out); }
.reel.is-resting .reel-arc { opacity: 0.85; }
.reel.is-waiting .reel-arc { opacity: 0; }
.reel-control {
  margin-top: -1.4em;
  font: inherit; font-weight: 500; font-size: 16px; letter-spacing: 0.02em;
  color: var(--on-scene);
  background: none; border: 0;
  padding: 0.5em 1.1em;
  min-height: 44px; min-width: 44px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; /* press-and-hold reels in */
  position: relative; z-index: 1; /* above the arc, which gets its own layer when it dims */
  transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.reel-control:active { transform: scale(0.97); }
.reel-control[disabled] { opacity: 0; pointer-events: none; }

.lake-back {
  position: absolute; top: 16px; right: 16px;
  font: inherit; font-weight: 500; font-size: 14px;
  color: var(--night); background: var(--chalk);
  border: 0; border-radius: 999px;
  padding: 0 16px; min-height: 40px;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.lake-back[hidden] { display: none; }
.lake-back:active { transform: scale(0.97); }

.nav-under { display: none; }

/* ---------- the loading screen ---------- */
/* night, the mark turning, and the name filling in exactly where it will stand in the sky */
.loader { display: none; }
.is-loading .loader { display: block; position: fixed; inset: 0; z-index: 60; background: var(--night); }
html.is-loading { overflow: hidden; }
.loader-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header); padding-inline: calc(var(--frame-margin) + var(--frame-inset));
}
.loader .brand-mark { width: 30px; height: 30px; fill: var(--lime); }
.loader .brand-sails { rotate: none; animation: sails-turn 2.4s linear infinite; }
.loader-count { min-width: 4ch; text-align: right; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.loader-ghost { color: var(--line); }
.loader-fill {
  position: absolute; left: 0; top: 0;
  color: var(--chalk);
  clip-path: inset(-0.3em calc(100% - var(--load, 0) * 100%) -0.3em 0);
}
.loader.is-leaving { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); pointer-events: none; }

/* ---------- the gate: the About opens after the catch ---------- */

.gate { scroll-margin-top: var(--header); }
.gate-locked { padding-block: var(--s-6); text-align: center; }
.gate-title { font-weight: 500; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.gate-note { margin-top: 12px; color: var(--muted); }
.unlockable.is-revealed > * { animation: lift-in var(--dur-reveal) var(--ease-out) both; }
.unlockable.is-revealed > * + * { animation-delay: 120ms; }

.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--s-5); align-items: end; padding-bottom: var(--s-6); }

.catch { display: grid; justify-items: start; gap: 6px; padding-bottom: 10px; }
.catch-print { width: 220px; height: auto; display: block; }
.catch-print.is-pressed { animation: press-in var(--dur-reveal) var(--ease-out) both; }
.catch figcaption { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.catch-caption { color: var(--chalk); margin-left: 6px; }
.catch.is-yours .catch-label { color: var(--sky); }

/* the radio: a small Braun-style set standing on the page, Spotify's player in its screen */
.radio { width: 100%; font-size: 15px; }
.radio-body {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 116px;
  padding: 16px;
  border-radius: 20px;
  background: var(--shell);
  color: var(--shell-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 36px -14px rgb(0 0 0 / 0.8);
}
.radio-grille {
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--shell-grille) 0 1.3px, transparent 1.6px);
  background-size: 6.5px 6.5px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle, var(--night) 64%, transparent 66%);
  mask-image: radial-gradient(circle, var(--night) 64%, transparent 66%);
  opacity: 0.55;
}
.radio-screen {
  position: relative; align-self: stretch; min-height: 80px;
  border-radius: 10px; background: var(--screen);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.5);
  overflow: hidden; display: grid; align-items: center;
}
.radio-embed, .radio-screen iframe { width: 100%; border: 0; display: block; border-radius: 10px; }
.radio-screen iframe { opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
.radio.is-painted .radio-screen iframe { opacity: 1; }
.radio-idle { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 16px; color: var(--chalk); line-height: 1.35; font-size: 14px; }
.radio-idle-note { color: var(--muted); }
.radio.is-painted .radio-idle { display: none; }
.radio-keys { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 6px 8px; align-items: center; }
.radio-key {
  --size: 36px;
  width: var(--size); height: var(--size);
  border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  color: var(--shell-ink);
  cursor: pointer;
  background: var(--shell-key);
  border: 1px solid rgb(21 23 27 / 0.08);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.radio-key svg { width: 46%; height: 46%; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.radio-key--prev { grid-column: 1; grid-row: 1; }
.radio-key--next { grid-column: 1; grid-row: 2; }
.radio-key--play { --size: 62px; grid-column: 2; grid-row: 1 / span 2; }
.radio-key--play svg { width: 40%; height: 40%; }
.radio-glyph-pause { display: none; }
.radio.is-playing .radio-glyph-play { display: none; }
.radio.is-playing .radio-glyph-pause { display: block; }
.radio-key:active { transform: scale(0.96); }
.radio-led { position: absolute; top: 12px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklch, var(--bubblegum) 45%, var(--shell)); transition: background-color var(--dur-ui) var(--ease-out); }
.radio.is-playing .radio-led { background: var(--bubblegum); }
.radio.is-offline .radio-screen { opacity: 0.6; }
.radio-caption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- about ---------- */

.about {
  padding-top: var(--s-6); padding-bottom: var(--s-6); scroll-margin-top: 24px;
  /* a hairline over the content column only */
  background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px;
}
.section-title { font-weight: 500; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-5); margin-top: var(--s-5); }
.about-lede { font-size: 20px; line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.services { list-style: none; padding: 0; }
.services li { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-3); padding: 20px 0; border-bottom: 1px solid var(--line); }
.services li:first-child { padding-top: 0; }
.service-name { font-weight: 500; }
.service-note { color: var(--muted); }

/* ---------- contact ---------- */

.contact { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.contact-title { font-weight: 500; font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.035em; max-width: 14ch; text-wrap: balance; }
.contact-row { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }
.contact-mail { color: var(--sky); text-decoration: none; font-size: 17px; }

/* ---------- footer ---------- */

.site-footer { padding-bottom: 28px; }
.horizon { display: block; width: 100%; height: auto; max-height: 140px; object-fit: cover; object-position: bottom; }
.footer-row { display: flex; justify-content: space-between; padding-top: 20px; font-size: 13px; color: var(--muted); }
.footer-row a { text-decoration: none; }

/* ---------- motion ---------- */

@keyframes lift-in { from { opacity: 0; filter: blur(3px); transform: scale(1.01); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sails-turn { to { transform: rotate(360deg); } }
@keyframes press-in { from { opacity: 0.55; filter: blur(2px); transform: scale(1.02); } to { opacity: 1; filter: blur(0); transform: none; } }
.is-radio-playing .brand-sails { animation: sails-turn 9s linear infinite; }

@media (hover: hover) and (pointer: fine) {
  .nav a:not(.button):hover { color: var(--chalk); }
  .button:hover { background: var(--lime-deep); }
  .radio-key:hover { background: var(--shell-key-hover); }
  .brand:hover .brand-sails { animation: sails-turn 2.4s var(--ease-in-out) 1; }
  .is-radio-playing .brand:hover .brand-sails { animation: sails-turn 9s linear infinite; }
  .reel-control:hover, .lake-back:hover { text-decoration: underline; text-underline-offset: 0.3em; }
  .contact-mail:hover { text-decoration: underline; }
  .footer-row a:hover { color: var(--sky); }
  .nav-under a:hover { color: var(--chalk); }
}

/* ---------- work page ---------- */

.work-page { padding-top: clamp(56px, 12vh, 140px); padding-bottom: var(--s-6); }
.page-title { font-weight: 500; font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.035em; max-width: 13.5ch; text-wrap: balance; }
.work-page p { margin-top: var(--s-3); color: var(--muted); font-size: 18px; max-width: 46ch; }
.work-page .button { margin-top: var(--s-4); }

/* ---------- narrow ---------- */

@media (max-width: 899px) {
  :root { --fs-body: 16px; --frame-margin: 12px; --frame-inset: 16px; --stage-run: 140svh; }
  /* one row: the mark and the one action; the section links sit under the stage */
  .nav a:not(.button) { display: none; }
  .button--small { min-height: 44px; padding: 0 18px; }
  .brand-name { font-size: 17px; }
  .brand-mark, .loader .brand-mark { width: 26px; height: 26px; }
  .nav-under { display: flex; gap: 22px; padding: 6px calc(var(--frame-margin) + var(--frame-inset)) 0; font-size: 14px; }
  .nav-under a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
  /* phones get a tall window; past ~68 degrees of vertical view the scene narrows instead of stretching */
  .lake { height: clamp(var(--frame-w) / 2.4, 100svh - 2 * var(--frame-margin), var(--frame-w) / 0.45); border-radius: 16px; }
  .has-stage .lake { clip-path: inset(calc(var(--close, 0) * var(--header)) calc(var(--close, 0) * var(--frame-margin)) calc(var(--close, 0) * var(--frame-margin)) round calc(var(--close, 0) * 16px)); }
  .sky-top { flex-direction: column; gap: var(--s-2); top: calc(var(--header) + 24px); }
  .sky-line { font-size: 22px; }
  .reel { left: 18%; width: 64%; top: 58%; }
  .lake-caption { bottom: 14px; font-size: 13px; }
  .gate-locked { padding-block: var(--s-5); }
  .desk { grid-template-columns: 1fr; gap: var(--s-4); padding-bottom: var(--s-5); }
  .catch { padding-bottom: 0; }
  .radio-body { grid-template-columns: 44px 1fr; grid-template-areas: "screen screen" "grille keys"; gap: 12px; padding: 12px; }
  .radio-screen { grid-area: screen; }
  .radio-grille { grid-area: grille; }
  .radio-keys { grid-area: keys; justify-self: end; grid-template-columns: auto auto auto; grid-template-rows: auto; }
  .radio-key--prev, .radio-key--next, .radio-key--play { grid-row: 1; }
  .radio-key--prev { grid-column: 1; } .radio-key--play { grid-column: 2; --size: 52px; } .radio-key--next { grid-column: 3; }
  .radio-led { top: auto; right: auto; left: 66px; bottom: 44px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .services li { grid-template-columns: 1fr; gap: 4px; }
  .header-row { padding-top: env(safe-area-inset-top); }
  .footer-row { padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lake-canvas.is-live, .catch-print.is-pressed { animation: none; opacity: 1; }
  .lake-ink { transition: none; }
  .lake-caption, .lake-frame { transition: none; }
  .unlockable.is-revealed > * { animation: none; }
  .loader .brand-sails { animation: none; }
  .loader.is-leaving { transition-duration: 200ms; }
  .is-radio-playing .brand-sails, .brand:hover .brand-sails { animation: none; }
  .nav a, .button, .reel, .reel-arc, .reel-control, .radio-key, .radio-led { transition: none; }
}