/* Grouping content */

@layer base {
  /* Block quotes */

  blockquote {
    /* Add vertical rhythm margins. */
    margin-block: 0 var(--spacing-m);

    /* Nicer text wrap, e.g. no lone word on last line. */
    text-wrap: pretty;

    /* Also indent the quote on both sides. */
    margin-inline: var(--indent-amount);

    /* Set max text line width in main for readability. */
    max-width: var(--max-line-width);
  }

  /* Lists */

  dl,
  ol,
  ul,
  menu {
    /* Add vertical rhythm margins. */
    margin-block: 0 var(--spacing-m);
  }

  dt {
    font-weight: var(--fw-bold);
  }

  dd {
    margin: 0;
    margin-inline-start: var(--indent-amount);

    /* Nicer text wrap, e.g. no lone word on last line. */
    text-wrap: pretty;
  }

  ol,
  ul,
  menu {
    padding: 0;
    padding-inline-start: var(--indent-amount);

    /* Turn off margins on nested lists. */
    ol,
    ul,
    menu {
      margin: 0;
    }
  }

  li {
    /* Nicer text wrap, e.g. no lone word on last line. */
    text-wrap: pretty;

    /* Set max text line width in main for readability. */
    .main & {
      max-width: var(--max-line-width);
    }
  }

  /* Horizontal rule */

  hr {
    /* Add vertical rhythm margins. */
    margin-block: var(--spacing-m);
    border: 0;
    border-block-start: 1px solid var(--color-border);
    height: 0;
  }

  /* Paragraphs */

  p {
    /* Add vertical rhythm margins. */
    margin-block: 0 var(--spacing-m);

    /* Nicer text wrap, e.g. no lone word on last line. */
    text-wrap: pretty;

    /* Set max text line width in main for readability. */
    .main & {
      max-width: var(--max-line-width);
    }
  }

  /* Preformatted text */

  pre {
    /* Add vertical rhythm margins. */
    margin-block: 0 var(--spacing-m);
    font-family: var(--ff-monospace);
  }

  /* Code */

  /* Do not set colour for code with syntax highlighting. */
  code:not([data-lang]),
  kbd,
  samp {
    color: var(--color-code);
  }
}