@layer reset, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
  img { max-width: 100%; height: auto; display: block; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--ground);
    color: var(--ink-secondary);
    font-family: var(--font-body);
    font-size: var(--step-body);
    font-weight: 400;
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  h1, h2, h3 {
    color: var(--ink);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--step-h1); }
  h2 { font-size: var(--step-h2); }
  h3 { font-size: var(--step-h3); }

  p + p { margin-top: var(--space-2); }

  /* Long-form lists remain recognisable lists. Component CSS resets only the
     navigation lists that deliberately replace browser markers. */
  ul, ol { padding-inline-start: 1.4em; }
  li + li { margin-top: var(--space-1); }

  /*
   * Always underlined. Green and secondary text are contrast-identical
   * (6.87 against 6.82), so colour cannot be the signal. Spec §6.1.
   */
  a {
    color: var(--green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  @media (hover: hover) {
    a:hover { text-decoration-thickness: 2px; }
  }

  @media (prefers-reduced-motion: no-preference) {
    a { transition: color 120ms ease, text-decoration-color 120ms ease; }
  }

  /* Never --rule: at 1.32:1 it is invisible as a focus indicator. */
  :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .frame {
    max-width: var(--frame);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .measure { max-width: var(--measure-read); }

  hr.scene {
    width: 4rem;
    margin: var(--space-4) auto;
    border: 0;
    border-top: 1px solid var(--rule);
  }

  .meta {
    font-size: var(--step-meta);
    color: var(--ink-secondary);
  }
}