/* base.css - reset, typography, links, focus, accessibility helpers. No component styling here. */

/* self-hosted fonts (SIL OFL, licences in /fonts); latin subset only. Chakra Petch 700 is the wordmark face and is used nowhere else. */
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-clear) + var(--space-4)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, dl, dd { margin: 0; }
::selection { background: var(--accent); color: var(--text-inverse); }

/* headings: form capitals for titles, plain sans for run-in subheads */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-wrap: balance;
}
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--heading-4); line-height: 1.3; text-wrap: balance; }
h4, .label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: 1.35;
}
p { text-wrap: pretty; }
strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* inline links are always underlined: colour alone never carries the affordance */
a { color: inherit; }
p a, li a, dd a, .link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
p a:hover, li a:hover, dd a:hover, .link:hover { text-decoration-thickness: 3px; color: var(--accent-strong); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  background: var(--espresso); color: var(--text-inverse);
  font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); outline-color: var(--text-inverse); }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; }

/* forms baseline: printed lines, not boxes */
label { display: block; }
input, textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--espresso);
  border-radius: 0;
  padding: var(--space-2) 0;
  min-height: 2.75rem;
  font-size: var(--text-control);
}
textarea { resize: vertical; min-height: 7.5rem; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .skip-link { display: none !important; }
}