/* Origin Epping: reset, type, layout floor. Colours, fonts, radius and motion
 * come from tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

:root {
  --header-h: 4.25rem;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --bleed: calc((100vw - min(100vw, var(--page-max))) / 2 + var(--container-pad));
  --lh-body: 1.7;
  --section-pad: clamp(3.5rem, 7vw, 6rem);
  --hairline: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --hairline-dark: color-mix(in srgb, var(--color-dark-ink) 14%, transparent);
  --forest-wash: color-mix(in srgb, var(--color-forest) 86%, transparent);
}
@media (min-width: 960px) { :root { --header-h: 5.5rem; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-body-size);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: var(--font-heading-tracking);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.1; }
h3 { font-size: 1.5rem; line-height: 1.2; }
em, .accent-word { font-style: italic; }
p { margin: 0 0 1em; }
a { color: var(--color-brass-deep); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; }
[data-count], .num { font-variant-numeric: tabular-nums; }

.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--container-pad); }
.lead { font-size: 1.125rem; line-height: 1.65; color: var(--color-muted); max-width: 60ch; }
.prose { max-width: 60ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--color-paper); color: var(--color-ink); padding: 0.75rem 1rem;
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* Font-size steps: the on-canvas A- / A+ tool maps to these. */
.fs-sm  { font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem); }
.fs-md  { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); }
.fs-lg  { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); }
.fs-xl  { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.15; }
.fs-2xl { font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem); line-height: 1.1; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brass-deep);
  outline-offset: 3px;
}
.on-dark :where(a, button, input, textarea, select, summary):focus-visible,
.site-footer :where(a, button):focus-visible,
dialog :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--color-brass);
}
dialog.plan :where(button):focus-visible { outline-color: var(--color-brass-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}