@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,700;1,600&display=swap');

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); }

/* ════════════════════════════════════════════════════════════
   BASE — element defaults, so most text needs no class
   ════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-md); /* root size for rem, independent of the text scale */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--surface-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: var(--border-width-strong) solid var(--color-gold);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Headings: title-lg 42 · h1 30 · h2 22 · h3 17. Always Garamond 700, lh 1.2. */
h1,
h2,
h3,
h4,
h5,
h6,
.h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-lg); }
h2 { font-size: var(--text-lg); color: var(--color-forest); }
h3,
h4,
.h3 { font-size: var(--text-md); }

small,
.caption { font-size: var(--text-sm); }

code { font-family: var(--font-mono); font-size: var(--text-sm); }

/* Text modifiers */
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text--muted,
.text-muted { color: var(--color-text-muted); }
.text--italic { font-style: italic; }
.text--good { color: var(--color-stat-green-strong); }
.text--warn { color: var(--color-stat-amber-strong); }
.text--bad { color: var(--color-stat-red-strong); }
.prose { line-height: var(--leading-loose); }

/* Layout utilities: .row (centred flex row, gap 2) --3 gap 3 --wrap · .cluster (wrapping, gap 3) · .stack (column, gap 3) · .fill (flexible child) */
.row { display: flex; align-items: center; gap: var(--space-2); }
.row--3 { gap: var(--space-3); }
.row--wrap { flex-wrap: wrap; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.fill { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.text--on-dark { color: var(--color-text-on-dark); opacity: .8; }
.section { padding-block: var(--space-8); background: var(--surface-page); }