/* ============================================================================
   BASE, reset and element defaults
   Reads Tier 2 tokens only. No literal values.
   ========================================================================== */

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

html {
  /* The bleed is sized against 100vw, which counts the scrollbar, so it
     overhangs by ~7px each side. Clipping on the root as well as on body is
     what actually removes the sideways scroll; clipping only body leaves the
     document still reporting the overflow.
     `clip` rather than `hidden`: hidden would make this a scroll container and
     silently kill position: sticky on the nav. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Without this the browser paints form controls, scrollbars and native focus
     rings in light chrome on a dark page. */
  color-scheme: dark;
}

@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;
  }
}

body {
  margin: 0;
  /* Full-bleed sections are sized against 100vw, which ignores the scrollbar,
     so they overhang by the scrollbar width and cause sideways scroll.
     `clip` trims that. It must not be `hidden`: hidden makes body a scroll
     container, which silently kills position: sticky on the nav. */
  overflow-x: clip;
  background: var(--color-page);
  color: var(--color-text-body);
  font-family: var(--family-sans);
  font-size: var(--size-400);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Headings -------------------------------------------------------------
   Display face, tight tracking. Sizes are set by component classes rather
   than by tag, so heading level stays a semantic decision.                  */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--family-display);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--size-900); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-flat); }
h2 { font-size: var(--size-800); }
h3 { font-size: var(--size-700); }
h4 { font-size: var(--size-600); }
h5, h6 { font-size: var(--size-500); }

p { margin: 0; text-wrap: pretty; max-width: var(--width-text); }

strong { font-weight: var(--weight-medium); color: var(--color-text); }

/* --- Links ----------------------------------------------------------------
   The accent is 15.6:1 on the page, so it works as text. Inside a bone panel
   it does not, 1.1:1, so the panel overrides it to the darkened variant.  */

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-link-hover); }
a:active { color: var(--color-link-hover); }

/* A heading that is also a link keeps the heading's colour. Without this the
   accent wins and every case-study title turns yellow. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--color-link); }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

figure { margin: 0; }
dl, dd, dt { margin: 0; }

hr {
  border: 0;
  border-top: var(--stroke-thin) solid var(--color-line);
  margin: 0;
}

::selection {
  background: var(--color-selection);
  color: var(--color-selection-text);
}

/* --- Focus ----------------------------------------------------------------
   Never remove this. It is the only cue a keyboard user gets.               */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Utilities ------------------------------------------------------------ */

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--layer-overlay);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--size-300);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  transform: translateY(-250%);
}
.skip-link:focus { transform: translateY(0); color: var(--color-on-accent); }