/* Static site pages (spec 002 T084): maintenance, coming soon, legal texts and the leave
   page. Tokens copied from frontend/src/styles/tokens.css (DESIGN.md), light and dark.
   `.site` is the home hero: the range photo with a navy fade on the left from 992 px, a
   photo band above the copy below it. */
@font-face {
  font-family: Archivo; src: url(/_site/archivo.woff2) format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
:root {
  --navy: #0f2740; --on-navy: #ffffff; --on-navy-muted: #c5d3e3; --gold: #f2b807; --on-gold: #10273f;
  --canvas: #f3f6f9; --surface: #ffffff; --ink: #10273f; --ink-muted: #4a5d72;
  --brand: #0e5490; --on-brand: #ffffff; --line: #d9e1ea; --control: #7a8aa0;
  --danger: #c2362b; --success: #1d7a47; --gold-ink: #875800; color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0c1a2a; --surface: #12243a; --ink: #e8eef5; --ink-muted: #a9b8c9;
    --brand: #7db3ee; --on-brand: #0c1a2a; --line: #26405c; --control: #6f86a0;
    --danger: #f08a80; --success: #5cc48a; --gold-ink: #f2c75c;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 1rem/1.6 Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.legal, .plain { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
@media (min-width: 768px) { .legal, .plain { padding: 4.5rem 1.5rem 5rem; } }
.plain { max-width: 40rem; }
.legal p { max-width: none; }
.logo { display: flex; align-items: center; gap: 0.75rem; width: fit-content; height: 2.75rem; margin-bottom: 2rem; color: var(--brand); }
.logo i, .logo b { display: block; height: 100%; background: currentColor; }
.logo i { aspect-ratio: 359 / 299; mask: url(/_site/logo-mark.png) center / contain no-repeat; }
.logo b { height: 46%; aspect-ratio: 735 / 128; mask: url(/_site/logo-wordmark.png) center / contain no-repeat; }
h1, h2, h3 { font-weight: 700; font-stretch: 112.5%; letter-spacing: -0.015em; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; }
@media (min-width: 768px) { h1 { font-size: 2.25rem; } }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
p { margin: 0 0 1rem; max-width: 65ch; }
.lead { font-size: 1.1875rem; }
.until:empty { display: none; }
a { color: var(--brand); text-underline-offset: 3px; }
form { margin-top: 1.5rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 1rem; }
label { font-weight: 600; }
input[type="email"] {
  width: 100%; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--control); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit;
}
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
legend { font-weight: 600; margin-bottom: 0.5rem; }
fieldset label, .terms { font-weight: 400; display: flex; gap: 0.75rem; align-items: flex-start; min-height: 1.5rem; cursor: pointer; }
/* Drawn controls, like the site's: an outline on the card in both themes (the browser's own
   radios and checkboxes get a dark fill in dark mode). */
input[type="radio"], input[type="checkbox"] {
  appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0;
  border: 1.5px solid var(--control); background: transparent center / 75% no-repeat; cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"]:checked { border-color: var(--brand); background-image: radial-gradient(circle, var(--brand) 0 45%, transparent 50%); }
input[type="checkbox"]:checked {
  border-color: var(--brand); background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230c1a2a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
@media (forced-colors: active) { input[type="radio"], input[type="checkbox"] { appearance: auto; } }
button {
  min-height: 2.75rem; padding: 0.375rem 1.25rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; justify-self: start;
}
button[disabled] { opacity: 0.6; cursor: wait; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.error { color: var(--danger); font-weight: 600; margin: 0; }
.done { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--success); border-radius: 12px; background: var(--surface); }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }
.table { overflow-x: auto; margin: 0 0 1rem; }
table { border-collapse: collapse; min-width: 36rem; width: 100%; font-size: 0.875rem; }
th, td { border: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.to-complete { border: 1px dashed var(--gold-ink); border-radius: 6px; padding: 0.75rem; color: var(--gold-ink); }

/* The hero. */
body:has(.site) { background: var(--navy); }
.site {
  position: relative; isolation: isolate; min-height: 100dvh; padding: 15rem 1rem 2rem;
  background: var(--navy); color: var(--on-navy-muted);
}
.site::before {
  content: ""; position: absolute; z-index: -2; inset: 0 0 auto; height: 17rem;
  background: url(/_site/hero-archers-640.webp) 48% 40% / cover no-repeat;
}
.site::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 17rem;
  background: linear-gradient(180deg, transparent 45%, var(--navy));
}
.site > * { max-width: 30rem; margin-inline: auto; }
.site .logo { position: absolute; top: 1.25rem; left: 1rem; margin: 0; color: var(--on-navy); }
.site h1 { color: var(--on-navy); font-size: 2.25rem; line-height: 1.08; font-weight: 800; }
.site .lead { color: var(--on-navy); font-weight: 500; font-size: 1.125rem; }
.site a { color: inherit; }
.site :focus-visible { outline-color: var(--gold); }
.site form { color: var(--ink); box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.28); }
.site form a { color: var(--brand); }
.site form :focus-visible { outline-color: var(--brand); }
.site button { background: var(--gold); color: var(--on-gold); font-weight: 700; justify-self: stretch; min-height: 3rem; }
.site .done { color: var(--ink); }
.site nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.5rem; font-size: 0.875rem; }
@media (min-width: 640px) { .site { padding-inline: 1.5rem; } .site .logo { left: 1.5rem; }
  .site::before { background-image: url(/_site/hero-archers-1024.webp); } }
@media (min-width: 992px) {
  .site { display: flex; flex-direction: column; justify-content: center; padding: 6.5rem 3rem 3rem; }
  .site > * { margin-inline: 0; width: 100%; max-width: 32rem; }
  .site .logo { top: 2rem; left: 3rem; width: fit-content; height: 3rem; }
  .site h1 { font-size: 3.5rem; }
  .site::before { height: auto; bottom: 0; background: url(/_site/hero-archers-1392.webp) 0 center / cover no-repeat; }
  .site::after {
    height: auto; bottom: 0;
    background: linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 92%, transparent) 30%, color-mix(in srgb, var(--navy) 45%, transparent) 58%, transparent 82%);
  }
}