/* base.css — reset, typographic defaults, elementals */

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

  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11", "kern";
    tab-size: 4;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    line-height: var(--lh-normal);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--fg);
    background: var(--bg);
    text-underline-offset: 0.22em;
    overflow-x: clip;
  }

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

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

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
  }

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

  /* Default focus ring — custom, accessible, visible */
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ink-900);
    outline-offset: 3px;
    border-radius: 2px;
  }

  :where(section, header, footer, main, article, aside) { display: block; }

  /* Accessible hidden but focusable */
  .sr-only {
    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 {
    position: absolute;
    left: var(--s-4);
    top: var(--s-4);
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--ink-950);
    color: var(--bone-50);
    font-weight: 600;
    transform: translateY(-120%);
    transition: transform var(--dur-short) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }
}

@layer base {
  /* Display headings — Fraunces */
  h1, .h1,
  h2, .h2,
  h3, .h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    color: var(--fg);
    text-wrap: balance;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }

  h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
  h2, .h2 { font-size: var(--fs-3xl); }
  h3, .h3 { font-size: var(--fs-2xl); }

  /* UI headings — Inter, small caps tracking */
  h4, .h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    color: var(--fg);
  }
  h5, .h5 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
  }
  h6, .h6 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  p { line-height: var(--lh-normal); text-wrap: pretty; }

  /* Display variant for hero */
  .display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    text-wrap: balance;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  .display em {
    font-style: italic;
    font-variation-settings: "SOFT" 60, "WONK" 1;
    color: var(--accent);
  }

  /* Eyebrow / kicker — above section headings */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }

  /* Tabular numerals for all data-style content */
  .tabular, .stat, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; }

  /* Mono lockups */
  .mono { font-family: var(--font-mono); }

  /* Blockquote */
  blockquote {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    font-weight: 400;
    color: var(--fg);
  }

  /* Inline link default in prose */
  .prose a,
  p a {
    color: var(--link);
    border-bottom: 1px solid color-mix(in oklch, var(--link) 30%, transparent);
    transition: color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out);
  }
  .prose a:hover,
  p a:hover {
    color: var(--link-hover);
    border-color: currentColor;
  }

  /* Horizontal rule — thin, editorial */
  hr {
    border: 0;
    height: 1px;
    background: var(--border);
  }

  /* Selection */
  ::selection { background: var(--accent); color: var(--bone-50); }
}