/* ==========================================================================
   Base — reset, typography defaults, layout primitives, utilities.
   ========================================================================== */

/* ---------- Reset ---------------------------------------------------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; } /* zero specificity so layout classes (.stack) win */

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* ---------- Typography ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  text-wrap: balance;
}

h1, h2, .title-1 { font-size: var(--text-3xl); }
h3, .title-3     { font-size: var(--text-xl); }
.title-2         { font-size: var(--text-2xl); }
.display         { font-size: var(--text-4xl); }

p { text-wrap: pretty; }

strong, b { font-weight: var(--weight-bold); }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.body-md {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.small {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Accent-coloured kicker line, e.g. "Explore The Work" */
.eyebrow {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  /* Normal-size text, so navy rather than tan (tan on white is 2.10:1). */
  color: var(--color-text);
}

/* Uppercase tracked label */
.label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ---------- Layout primitives ---------------------------------------- */

.container {
  --_max: var(--container-default);
  width: min(100% - 2 * var(--gutter), var(--_max));
  margin-inline: auto;
}
.container--wide    { --_max: var(--container-wide); }
.container--narrow  { --_max: var(--container-narrow); }
.container--measure { --_max: var(--measure); }

/* Vertical flow: spacing between siblings */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-5)); }
.stack--intro   { --stack-gap: var(--intro-gap); }
.stack--section { --stack-gap: var(--section-gap); }

.section { padding-block: var(--section-pad-y); }

.section--muted {
  background-color: var(--color-surface-muted);
  --motif-color: var(--color-motif-on-muted);
}

/* Opaque ground — hides the page backdrop (e.g. the contour video). */
.section--solid { background-color: var(--color-bg); }

/* Veil — a translucent muted surface over the page backdrop. Multiply keeps the
   backdrop visible and darkens its lines instead of washing them out.
   Must not sit inside an isolated/stacking ancestor, or it can't reach the backdrop. */
.section--veil { position: relative; }
.section--veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  background-color: var(--color-surface-muted);
  opacity: var(--veil-opacity);
  mix-blend-mode: multiply;
}

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

.text-center { text-align: center; }

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

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-inverse);
  color: var(--color-on-inverse);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; }