/* Element defaults and layout primitives, built on tokens.css */

:root {
  color-scheme: light; /* site is deliberately light-only; blocks forced-dark form-control inversion */
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--p-size);
  line-height: var(--p-leading);
  color: var(--dozen-dark);
  background-color: var(--pure-white);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  font-style: italic;
}

h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
}

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

::selection {
  background-color: var(--dozen-teal);
  color: var(--dozen-dark);
}

/* Screen-reader-only text: kept in the accessible name and crawlable anchor
   text without appearing in the visual design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard skip link: parked above the viewport until it receives keyboard
   focus, then drops into the top-left corner over the header. */
.skip-link {
  position: absolute;
  top: var(--space-10);
  left: var(--space-10);
  z-index: 100;
  padding: var(--space-10) var(--space-20);
  border-radius: 60px;
  background: var(--dozen-blue);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--pure-white);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-20)));
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--dozen-teal);
}

/* Format-negotiation wrapper only. Keeps the inner <img> the real layout
   box (flex/grid item, sibling of ::after tints), exactly as it was before
   the <picture> existed. */
.picture-formats {
  display: contents;
}

.container {
  width: 100%;
  /* Padding sits outside the 1280px content column, mirroring the Figma
     boards (1440 = 1280 content + 80px each side) */
  max-width: calc(var(--content-max) + 2 * var(--container-padding));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}