@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    background: var(--bg);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
    background:
      radial-gradient(circle at 15% -10%, color-mix(in oklch, var(--sunflower) 18%, transparent), transparent 40rem),
      radial-gradient(circle at 110% 30%, color-mix(in oklch, var(--accent-2) 10%, transparent), transparent 35rem),
      var(--bg);
    accent-color: var(--accent);
    transition: background-color 0.4s, color 0.4s;
  }

  /* Faint film-grain over everything, for that 1968 Technicolor feel. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Clip (not hide) so sticky children keep working while entrance animations overflow. */
  main { overflow-x: clip; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -0.01em; }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); }

  a { color: var(--accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 0.16em; }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-s); }

  ::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); }

  code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
  kbd {
    padding: 0.1em 0.45em;
    border: 1px solid var(--line);
    border-bottom-width: 3px;
    border-radius: var(--radius-s);
    background: var(--bg-raised);
  }

  /* Cross-document view transitions: Turbo visits morph the masthead and Herbie. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
  .masthead { view-transition-name: masthead; }
}