/* Gather: the pieces every screen shares. Builders add their own file beside this one. */
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/static/fonts/CourierPrime-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.skip { position: absolute; left: -999px; top: var(--s2); background: var(--card); padding: var(--s2) var(--s3); border-radius: var(--corner-control); }
.skip:focus { left: var(--s3); z-index: 10; }

.head { display: flex; justify-content: flex-end; align-items: flex-start; padding: var(--s5) var(--s4) 0; }
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-voice); font-weight: 600; font-size: var(--size-lead); letter-spacing: -0.0147em; line-height: 1; }
.wordmark .dot { display: inline-block; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--mark); margin-left: 0.08em; transform: translateY(-0.02em); transition: transform 700ms var(--curve); }
.wordmark:hover .dot { transform: translateY(-0.02em) scale(1.5); }

.main { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: var(--s4); }
.foot { padding: var(--s4); font-size: var(--size-caption); color: var(--ink-soft); }
.foot nav { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.foot a { color: inherit; }
.foot a, .caption a { display: inline-flex; align-items: center; min-height: var(--tap); }  /* a link is a 44px target */

.card { background: var(--card); border-radius: var(--corner-card); padding: var(--s4); border: var(--stroke) solid var(--line); }
.card + .card { margin-top: var(--s4); }

.title { font-family: var(--font-voice); font-weight: var(--weight-title); font-size: var(--size-title); line-height: var(--leading-tight); margin: 0 0 var(--s3); letter-spacing: var(--track-title); }
.lead { font-family: var(--font-voice); font-weight: var(--weight-lead); font-size: var(--size-lead); line-height: 1.4; margin: 0 0 var(--s3); }
.body { margin: 0 0 var(--s3); }
.caption { font-size: var(--size-caption); color: var(--ink-soft); margin: 0; }
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

label { display: block; font-size: var(--size-caption); color: var(--ink-soft); margin-bottom: var(--s1); text-transform: var(--label-case); letter-spacing: var(--label-track); }
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--field);
  border: var(--stroke) solid var(--ink-soft); border-radius: var(--corner-control);  /* 3:1 or better, so the field can be found */
  padding: var(--s2) var(--s3); min-height: var(--tap);
}
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.button, button {
  font: inherit; font-weight: var(--weight-button); min-height: var(--tap); padding: var(--s2) var(--s4);
  border-radius: var(--corner-button); border: var(--stroke) solid var(--button-line); background: var(--button-bg); color: var(--button-ink);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  box-shadow: var(--lift);
  transition: background var(--fast) var(--curve), box-shadow var(--fast) var(--curve), transform var(--fast) var(--curve);
}
.button:hover, button:hover { box-shadow: var(--lift-hover); }
.button:active, button:active { box-shadow: var(--lift-press); }
.button.quiet, button.quiet { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.button.block, button.block { width: 100%; }
button[disabled] { opacity: 0.5; cursor: default; }

.stack > * + * { margin-top: var(--s3); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The stamp: the one place the colour is an area. */
.stamp { display: inline-block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  color: var(--on-mark); background: var(--mark); padding: var(--s2) var(--s3); border-radius: var(--corner-tag); transform: rotate(var(--tilt)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}