/* =============================================================
   Reset — neutralise user-agent defaults so the design tokens and
   component styles stay the single source of truth. Loaded BEFORE
   tokens.css, so all semantic typography and colour layer on top.
   ============================================================= */

/* Border-box everywhere — padding and borders no longer inflate widths. */
*,
*::before,
*::after { box-sizing: border-box; }

/* Drop the UA margins components would otherwise keep overriding. Spacing is
   owned by layout (gap / owl selectors) and component rules instead — this also
   removes the default 8px gutter the browser puts around <body>. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd,
ol, ul,
pre, hr, fieldset { margin: 0; }

/* Lists used as UI reset their indentation here; .prose re-adds its own padding
   and keeps markers, so article bullets are unaffected. */
ol, ul { padding: 0; }

/* Block-level media that never overflows its container. */
img, picture, video, canvas { display: block; max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* Form controls inherit typography rather than the UA's system font. */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
fieldset, legend { padding: 0; }

/* Tables align to the token grid, not UA spacing. */
table { border-collapse: collapse; border-spacing: 0; }

/* Long words and URLs wrap instead of forcing horizontal overflow. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }