/* ==========================================================================
   Base — resets, fonts, typography classes, grid/layout helpers
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

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

h1, h2, h3, h4, p, blockquote {
  margin: 0;
  padding: 0;
}

/* ---- Container / grid (§2.2) ---- */
.container {
  max-width: calc(var(--container-max) + 2 * var(--margin-wide));
  margin: 0 auto;
  padding: 0 var(--margin-wide);
}

@media (max-width: 1439px) and (min-width: 1024px) {
  .container { padding: 0 var(--margin-desktop); }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .container { padding: 0 var(--margin-tablet); }
}

@media (max-width: 767px) {
  .container { padding: 0 var(--margin-mobile); }
}

/* ---- Typography classes (§1.4 tokens) ---- */
.type-display {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-display-size); line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
}
.type-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-h2-size); line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}
.type-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-h3-size); line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
}
.type-h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-h4-size); line-height: var(--type-h4-lh);
}
.type-body-l {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh);
}
.type-body-m {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh);
}
.type-body-s {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--type-body-s-size); line-height: var(--type-body-s-lh);
}
.type-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--type-label-size); line-height: var(--type-label-lh);
  letter-spacing: var(--type-label-ls); text-transform: uppercase;
}
.type-label-sm {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-lh);
  letter-spacing: var(--type-label-sm-ls); text-transform: uppercase;
}
.type-editorial {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: var(--type-editorial-size); line-height: var(--type-editorial-lh);
}
.type-metric-l {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-metric-l-size); line-height: var(--type-metric-l-lh);
}
.type-metric-s {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-metric-s-size); line-height: var(--type-metric-s-lh);
}
.type-index {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: var(--type-index-size); line-height: var(--type-index-lh);
}
.type-button {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--type-button-size); line-height: var(--type-button-lh);
  letter-spacing: var(--type-button-ls); text-transform: uppercase;
}

/* ---- Color utility classes ---- */
.ink { color: var(--color-ink); }
.ink-soft { color: var(--color-ink-soft); }
.ink-faint { color: var(--color-ink-faint); }
.purple { color: var(--color-purple); }

/* ---- Visually-hidden (accessible, non-visual) ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: var(--space-3); top: -60px;
  background: var(--color-ink); color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: 2px;
  z-index: 200;
  transition: top 150ms var(--ease-state);
}
.skip-link:focus { top: var(--space-3); }

/* ---- Global focus state (§4.2, §9) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 2px;
}

/* ---- Section rhythm helpers ---- */
.section { position: relative; }
.section--bg { background: var(--color-bg); }
.section--bg-alt { background: var(--color-bg-alt); }