/* Shared foundation for every site in the family (hub + product sites).
   No colours or look of its own: each site sets the tokens below in its own theme file. */

@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #fff; --ink: #111; --muted: #444; --accent: #000; --accent-ink: #fff;
  --font-display: system-ui, sans-serif; --font-text: system-ui, sans-serif;
  --margin: clamp(16px, 2.2vw, 32px);
  --radius: 0px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
table { border-collapse: collapse; }
:where(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: var(--margin); top: -100px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Each theme swaps travel for a gentle fade; this only stops looping keyframes. */
  *, *::before, *::after { animation-iteration-count: 1 !important; }
}