@layer base {
  *, *::before, *::after { box-sizing: border-box; }

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

  body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: 1.6;
  }

  body > main { flex: 1; }

  img { display: block; max-width: 100%; height: auto; }

  h1, h2, h3 { color: var(--color-blue-dark); line-height: 1.25; font-weight: bold; }
  h1 { font-size: var(--text-x-large); margin: 0 0 var(--space); }
  h2 { font-size: var(--text-large); margin: var(--space-double) 0 var(--space-half); }

  a { color: var(--color-blue); }
  a:hover { color: var(--color-blue-dark); }

  :focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
}

@layer components {
  .button {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-blue);
    color: var(--color-white);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }

  .button:hover { background: var(--color-blue-dark); color: var(--color-white); }

  .prose { max-width: var(--content-width); }
  .prose img { margin: var(--space) 0; border-radius: var(--radius); }

  /* Display sizes chosen in the editor (K.5) */
  .prose__image-link { display: block; }
  .prose__image--medium { width: 66%; margin-inline: auto; }
  .prose__image--small { width: 40%; margin-inline: auto; }
  .prose ul { padding-inline-start: 1.2em; }
}