/* Reset + typographic base. */

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ul, ol { padding: 0; margin: 0; }
  fieldset { border: 0; padding: 0; margin: 0; }
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    line-height: var(--lh-base);
    color: var(--ink-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--letter-tight);
    margin: 0 0 var(--space-3);
    color: var(--ink-primary);
  }
  h1 { font-size: var(--fs-800); }
  h2 { font-size: var(--fs-700); }
  h3 { font-size: var(--fs-600); }
  h4 { font-size: var(--fs-500); }

  p { margin: 0 0 var(--space-4); }
  a { color: var(--color-deep-rose); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; }
  a:hover { color: var(--color-rose); }

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

  ::selection { background: var(--color-rose); color: var(--ink-on-rose); }

  .skip-link {
    position: absolute; left: -10000px; top: 0;
    background: var(--ink-primary); color: var(--surface-raised);
    padding: var(--space-2) var(--space-4);
  }
  .skip-link:focus { left: var(--space-3); top: var(--space-3); z-index: 1000; }

  .muted { color: var(--ink-muted); }
  .display { font-size: var(--fs-display); margin-bottom: var(--space-5); }
  .lede { font-size: var(--fs-500); color: var(--ink-secondary); max-width: 38rem; }
  .eyebrow { font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--color-deep-rose); font-weight: 700; margin: 0 0 var(--space-3); }
}