/* Reset and element defaults. Depends on tokens.css and fonts.css — load both
   before this file. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

/* Global, not per-animation: anything added later inherits the courtesy. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-display-xl);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: var(--track-display);
}

h2 {
  font-size: var(--size-display-l);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--track-display);
}

h3 {
  font-size: var(--size-heading);
  letter-spacing: var(--track-heading);
}

h4 {
  font-size: var(--size-subhead);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0; }
p + p { margin-top: var(--space-4); }

ul, ol { margin: 0; padding: 0; }

img, svg, video, picture {
  display: block;
  max-width: 100%;
}

/* `display: block` above out-specifies the UA sheet's `[hidden] { display: none }`,
   so a hidden <img> would still render — as a broken-image icon, since it has
   no src yet. This puts the attribute back in charge for every element. */
[hidden] {
  display: none !important;
}

img { height: auto; }

figure { margin: 0; }

figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-caption);
  line-height: 1.5;
  color: var(--muted);
}

a {
  color: var(--brand-text);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover { text-decoration: underline; }

/* A link sitting inside a run of text must be distinguishable by something
   other than colour — WCAG 1.4.1. Our accent against muted body copy is only
   1.48:1, nowhere near the 3:1 that would let colour alone carry it, so inline
   links are underlined. Buttons and card links are excluded: they are already
   distinguishable by shape and position. */
p a:not(.btn),
.crumbs a,
li a:not(.btn):not(.cell) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

button { font: inherit; color: inherit; }

/* Themed focus. The approved mockup has none — that was a gap, not a style.
   Never leave the browser default here. */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.band--ink :focus-visible { outline-color: var(--ocean-300); }

::selection {
  background: var(--brand);
  color: var(--paper);
}

hr {
  height: var(--hairline);
  border: 0;
  margin: 0;
  background: var(--rule);
}

/* ── Utilities ────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--brand-fill);
  color: var(--paper);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
  text-decoration: none;
}

/* The back-to-top control focuses the document top so a keyboard user's focus
   travels with the scroll. That target is the <body>, which is not an
   interactive control and must not draw a focus ring — a box around the whole
   page is noise, and there is nothing there to operate.

   Suppressing an outline is normally wrong. It is correct here precisely
   because this element is never tabbed TO: tabindex="-1" keeps it out of the
   tab order, so no one is ever navigating by it and no affordance is lost. */
body[tabindex="-1"]:focus {
  outline: none;
}