/* ==========================================================================
   base.css — reset and element defaults
   Unclassed HTML must already look right. Components build on top of this.
   ========================================================================== */

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

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

/* --- Headings ---------------------------------------------------------
   Weights sit between 600 and 700 and tighten as they grow; the negative
   tracking is what keeps large type from looking loose. */
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
h1 { font-size: var(--fs-h1); font-weight: 660; line-height: 1.08; letter-spacing: -0.026em; }
h2 { font-size: var(--fs-h2); font-weight: 620; line-height: 1.15; letter-spacing: -0.021em; }
h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: -0.014em; }
h4 { font-size: var(--fs-body); line-height: 1.4; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* --- Links ---------------------------------------------------------------
   Accent, underline on hover only. Links inside prose underline always —
   see content.css. */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Focus ---------------------------------------------------------------
   One ring for the whole system. Keyboard only: a mouse click never shows it. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Lists ---------------------------------------------------------------  */
ul, ol { padding-inline-start: var(--s-6); }
li + li { margin-block-start: var(--s-2); }
li::marker { color: var(--text-3); }

/* --- Code ----------------------------------------------------------------  */
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* --- Tables --------------------------------------------------------------  */
table { width: 100%; border-collapse: collapse; }

/* --- Rules ---------------------------------------------------------------  */
hr { border: 0; border-block-start: 1px solid var(--hairline); margin-block: var(--s-8); }

/* --- Forms inherit type, always ------------------------------------------  */
input, textarea, select, button { font: inherit; color: inherit; letter-spacing: inherit; }

/* --- Selection -----------------------------------------------------------  */
::selection { background: var(--accent-wash); color: var(--text); }

/* --- Skip link -----------------------------------------------------------
   First tab stop on every page. Off-canvas until focused. */
.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--sh-md);
}
.skip:focus { inset-block-start: var(--s-4); }

/* --- Motion --------------------------------------------------------------
   Honour the OS setting. Not "less" — effectively none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}