@layer base {
  html {
    scroll-behavior: smooth;
  }
  /* Smooth root scrolling fights ScrollTrigger start/end math and can
     leave the hero claim in a mid-scrub state until a hard refresh. */
  html.js-motion {
    scroll-behavior: auto;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overscroll-behavior-x: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-ink);
    background-color: var(--color-canvas);
  }
  /* Clip sideways overflow on the page column, not html/body: clip on the
     root kills position:sticky after vertical scroll (Safari + Chrome). */
  main {
    flex-grow: 1;
    overflow-x: clip;
    max-width: 100%;
  }
  /* Phone: lock sideways swipe so vertical scroll stays one-axis. */
  @media (max-width: 767px) {
    html,
    body {
      overscroll-behavior-x: none;
      touch-action: pan-y pinch-zoom;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    text-wrap: balance;
  }
  h1 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-tighter);
  }
  h2 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    letter-spacing: var(--letter-spacing-tighter);
  }
  h3 {
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  }
  h4 {
    font-size: var(--text-xl);
  }
  p {
    line-height: var(--line-height-relaxed);
    color: var(--color-ink-subtle);
    text-wrap: pretty;
  }
  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-color: var(--color-link-decoration);
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: 0.18em;
    transition:
      color var(--duration-fast) var(--ease-out),
      text-decoration-color var(--duration-fast) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover {
      color: var(--color-link-hover);
      text-decoration-color: var(--color-link-decoration-hover);
    }
  }
  strong, b {
    font-weight: var(--font-weight-semibold);
  }
  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--color-canvas-alt);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
  }
  ::selection {
    background-color: var(--color-link-tint);
    color: var(--color-ink);
  }
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}