/* vasl.cc: one page and its privacy text (docs/site-plan.md).
   The application's own tokens (docs/design/brand-spec.md): one black ground,
   silver at rest, 24k gold only when something answers you -- here, the
   download button under the pointer or the keyboard. Self-hosted faces, no
   script, nothing fetched from anywhere else: the people this is for are on
   the connections where a font CDN is a wait. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Five glyphs: the wordmark and nothing else (scripts/check-brand.py). */
@font-face {
  font-family: "Jost";
  src: url("/static/fonts/Jost-Wordmark.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: oklch(0.1448 0 0);
  --fg: oklch(0.97 0 0);
  --muted: oklch(0.725 0 0);
  --faint: oklch(0.6 0 0);
  --raised: oklch(0.221 0 0);
  --silver: #c8ccd0;
  --gold: #ffd700;
  --metal-ink: oklch(0.13 0 0);
  --font-fa: "Vazirmatn", system-ui, sans-serif;
  --font-la: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-fa);
  font-size: 17px;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 4px;
  border-radius: 6px;
}

.top {
  padding: 22px 24px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  text-decoration: none;
}
/* 17px: the size `MARK`'s stroke width is computed for, so the line is the
   window's 1.25px on screen (ADR-179, ADR-183; scripts/check-icons.py). */
.brand svg { width: 17px; height: 17px; }

.wordmark,
.name {
  font-family: "Jost", var(--font-la);
  font-weight: 500;
  letter-spacing: 0.08em;
  direction: ltr;
}
.wordmark { font-size: 17px; color: var(--fg); }

main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 24px 24px 32px;
}

/* ── the one page ───────────────────────────────────────────────── */

.hero {
  width: 100%;
  max-width: 34rem;
  margin: auto 0;
  text-align: center;
}

/* The page's one figure: the application's mark, drawn as a single silver
   line when the page opens. */
.figure {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 8px;
  color: var(--silver);
}
.figure path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.name {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.2;
  color: var(--fg);
}

.intro {
  margin: 0 auto 12px;
  max-width: 30rem;
  color: var(--muted);
  text-wrap: pretty; /* no one-word last line under a centred paragraph */
}

.get { margin-top: 34px; }

/* Silver at rest; gold under the pointer or the keyboard. Dark ink on both,
   never white on metal (14.45:1 on gold, 12.45:1 on silver). */
.download {
  display: inline-block;
  min-width: 15rem;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--silver);
  color: var(--metal-ink);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.9s ease, box-shadow 0.9s ease;
}
.download:hover,
.download:focus-visible {
  background: var(--gold);
  box-shadow: 0 0 28px color-mix(in oklch, var(--gold) 35%, transparent);
}
.download:focus-visible { outline-color: var(--gold); border-radius: 999px; }

.facts {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--faint);
}
.facts span { display: block; }
.num {
  font-family: var(--font-la);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.lost .name { font-family: var(--font-la); letter-spacing: 0; }

/* ── the privacy text ───────────────────────────────────────────── */

.terms {
  width: 100%;
  max-width: 40rem;
}
.terms h1 {
  margin: 8px 0 20px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
}
.terms h2 {
  margin: 32px 0 8px;
  font-size: 19px;
  font-weight: 500;
  color: var(--silver);
}
.terms p,
.terms li { color: var(--muted); text-wrap: pretty; }
.terms ul { margin: 0 0 16px; padding-inline-start: 1.2em; }
.terms li { margin-bottom: 8px; }
.terms li::marker { color: var(--faint); }

.bottom {
  padding: 18px 24px 28px;
  border-top: 1px solid var(--raised);
  text-align: center;
  font-size: 13px;
}
.bottom a { color: var(--faint); text-decoration: none; }
.bottom a:hover { color: var(--silver); text-decoration: underline; }

@media (max-width: 420px) {
  body { font-size: 16px; }
  .figure { width: 104px; height: 104px; }
  .download { min-width: 0; width: 100%; }
}

/* Motion is the one flourish here, and nobody who has asked for none gets it:
   the mark is simply there, and the button changes colour at once. */
@media (prefers-reduced-motion: reduce) {
  .figure path { animation: none; stroke-dashoffset: 0; }
  .download { transition: none; }
}