/* Reset, document defaults, accessibility basics — mockup base + kit guards. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--color-bg); color: var(--color-text);
  font: 400 var(--fs-body)/var(--lh-base) var(--font-body);
  -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-head); font-weight: 800; line-height: var(--lh-tight); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden, .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.visually-hidden.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
[hidden][hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--color-ink); font-weight: 600; }
.skip-link:focus { left: 8px; top: 8px; }

.icon { width: 1em; height: 1em; flex: none; }
.icon--missing { display: inline-block; width: 1em; height: 1em; outline: 1px dashed var(--color-error); }

/* tap targets: pseudo-element, never padding (S5) */
.tap { position: relative; }
.tap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 100%; min-height: 24px; }