@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }

:root {
  --ground: #f2f6f6;
  --ink: #0e2530;
  --muted: #4d6670;
  --line: #9db3ba;
  --field: #e3ebec;
  --action: #0e2530;
  --action-text: #f2f6f6;
  --focus: #1b6f8a;
  --signal: #c42f25;
  --sky: #dce6e8;
  --sea: #1e5a6e;
  --sea-deep: #164558;
  --hull: #d2382d;
  --hull-band: #f4f7f6;
  --lamp: #f2c230;
  --glow: 0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c1a21;
    --ink: #dde8ea;
    --muted: #8fa8b0;
    --line: #3d5a65;
    --field: #14272f;
    --action: #8fd0e0;
    --action-text: #0a1a22;
    --focus: #8fd0e0;
    --signal: #ff8a7d;
    --sky: #0a1a22;
    --sea: #11404f;
    --sea-deep: #0b2d39;
    --hull: #c4372c;
    --hull-band: #d9e3e4;
    --glow: 1;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.5 "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(18rem, 5fr) 6fr;
}

/* The scene: a channel marker at anchor. The only thing on the page that moves. */
.scene { position: relative; overflow: hidden; background: var(--sky); }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky { fill: var(--sky); }
.sea { fill: var(--sea); }
.sea-deep { fill: var(--sea-deep); }
.hull { fill: var(--hull); }
.band { fill: var(--hull-band); }
.frame { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lamp { fill: var(--lamp); }
.lamp-glow { fill: var(--lamp); opacity: calc(0.28 + var(--glow) * 0.1); }
.buoy { transform-box: fill-box; transform-origin: 50% 85%; animation: bob 7s ease-in-out infinite; }
.flash { animation: flash 5s ease-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(7px) rotate(2.5deg); }
}
@keyframes flash {
  0%, 12% { opacity: 1; }
  30%, 100% { opacity: 0.1; }
}
.mark {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  margin: 0;
  font: 600 1.5rem/1 "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.04em;
  color: var(--ink);
}

main {
  align-self: center;
  width: 100%;
  max-width: 24rem;
  padding: 3rem 1.5rem;
  margin-inline: clamp(1.5rem, 8vw, 6rem) auto;
}
h1 {
  margin: 0 0 0.25rem;
  font: 600 3.25rem/1 "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.01em;
}
.lede { margin: 0 0 2rem; color: var(--muted); overflow-wrap: anywhere; }
main p { margin: 0 0 1rem; }
main p.lede { margin-bottom: 2rem; }
strong { font-weight: 600; }

form { display: grid; gap: 1.25rem; }
label { display: grid; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; }
input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font: 400 1.0625rem/1.25 "Barlow", system-ui, sans-serif;
  color: var(--ink);
  background: var(--field);
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 2px 2px 0 0;
}
input:hover { border-bottom-color: var(--muted); }
input:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 2px 0 var(--focus); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input:focus-visible { outline: none; }

button {
  width: 100%;
  padding: 0.8125rem 1rem;
  font: 600 1.0625rem/1.25 "Barlow", system-ui, sans-serif;
  color: var(--action-text);
  background: var(--action);
  border: 2px solid var(--action);
  border-radius: 2px;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: 0.55; cursor: default; }
button.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
button.secondary:hover:not(:disabled) { border-color: var(--ink); filter: none; }
a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--focus); }

.error {
  margin: 0 0 1.5rem;
  padding: 0.5rem 0 0.5rem 0.875rem;
  border-left: 4px solid var(--signal);
  font-weight: 600;
}

@media (max-width: 52rem) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 11rem 1fr; }
  .scene svg { inset: auto; left: 50%; top: -2rem; width: 14rem; height: 17.5rem; margin-left: -7rem; }
  main { align-self: start; margin-inline: auto; padding: 2rem 1.5rem 3rem; }
  h1 { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .buoy, .flash { animation: none; }
}