/* Faces and element defaults. Logical properties throughout, so a right-to-left language needs
   no overrides. Albert Sans (a.Foundry) and JetBrains Mono, both SIL OFL, self-hosted and cut by
   scripts/subset_fonts.py; the licences are in fonts/licences/. */
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Variable.14a524fa72f9.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.7877a6968fda.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font: 400 var(--text-md) / var(--leading-body) var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* A reporting address or a record is one long word; it breaks rather than widening the page. */
body { margin: 0; min-block-size: 100vh; overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-title);
  margin-block: 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-xl); letter-spacing: var(--track-lg); }
h2 { font-size: var(--text-lg); letter-spacing: var(--track-lg); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }

p { margin-block: 0 var(--space-4); max-inline-size: var(--measure); text-wrap: pretty; }

a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
a:active { color: var(--blue-active); }

/* Mono is for what is copied character by character. Ligatures off, so a record renders as the
   literal characters a person has to type. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-feature-settings: "calt" 0, "liga" 0;
}

:focus-visible {
  outline: 3px solid var(--seal);
  outline-offset: 3px;
  border-radius: 6px;
}

img, svg { max-inline-size: 100%; block-size: auto; }

/* A term and its value: the term as a quiet label, the value flush under it. */
dt { color: var(--ink-2); font-size: var(--text-sm); }
dd { margin: 0; }

hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-5); }

.skip-link {
  position: absolute;
  inset-block-start: -4rem;
  inset-inline-start: var(--space-3);
  background: var(--card);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  z-index: 30;
}
/* The shadow only once it shows: parked above the page, it would still smudge the top edge. */
.skip-link:focus { inset-block-start: var(--space-3); box-shadow: var(--shadow-lift); }

/* Reduced motion switches animation off rather than shortening it: a 0.01ms infinite animation
   is a strobe, which WCAG 2.3.1 treats as a hazard (phase 9 spec 11.4). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}