@layer base {
  html,
  body {
    overflow-x: clip;
  }

  html {
    font-size: var(--text-base);
    scrollbar-gutter: stable;
  }

  body {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    interpolate-size: allow-keywords;
    line-height: 1.375;
    max-inline-size: 100vw;
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
    text-size-adjust: none;
  }

  /* Short pages: the footer stays at the viewport bottom. The spare space
     goes into main's end margin so its content keeps its natural height.
     Flex items with auto inline margins shrink to fit their content, so
     keep the block layout's full width for every row. */
  body > * {
    inline-size: 100%;
  }

  main {
    margin-block-end: auto;
  }

  /* Help prevent overflow of long words/names/URLs */
  p,
  li,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: anywhere;
  }

  /* Make the disclosure triangle ours to style (Preflight gives summary
     `display: list-item` but leaves the default marker visible). */
  summary {
    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }
  }

  button {
    cursor: pointer;
  }

  dialog {
    padding: 0;
    border: 0;

    &:where(:focus-visible):focus,
    &:where(:focus-visible):active {
      outline: 0;
    }
  }

  /* Suppress animations and transitions for users who request reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }

    html {
      scroll-behavior: initial;
    }
  }

  :is(details) {
    interpolate-size: allow-keywords;

    &::details-content {
      overflow: hidden;
      block-size: 0;
      opacity: 0;
      transition: opacity 200ms, block-size 200ms, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}