/* Reset, document defaults, accessibility basics (mockup base + kit core rules). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.55 var(--font-text);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -.025em; line-height: 1.02; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ic, .icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; }
.icon--missing { outline: 1px dashed var(--color-error); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.visually-hidden.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  padding: 10px 16px; border-radius: var(--radius-1); background: var(--brand); color: #fff; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* A hidden element stays hidden even when a component sets display. */
[hidden][hidden] { display: none !important; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Tap targets: 24×24 minimum by pseudo-element, never by padding. */
.tap-target { position: relative; }
.tap-target::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }