@layer components {
  .prose-page section {
    margin-top: var(--space-6);
  }

  /* An h3 subdivides a section rather than getting one of its own, so the
     space above it has no container to come from. */
  .prose-page h3 {
    margin-top: var(--space-5);
  }

  .prose-page p + p,
  .prose-page p + div,
  .prose-page p + ol,
  .prose-page div + p,
  .prose-page ol + p {
    margin-top: var(--space-3);
  }

  /* Set in the display serif so a passage quoted from elsewhere is visibly
     not the page's own voice, with the brass rule the rest of the chrome is
     drawn in. */
  .prose-page blockquote {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    color: var(--color-ink-muted);
    font-family: var(--font-display);
  }

  .prose-page details {
    margin-top: var(--space-4);
  }

  .prose-page details summary {
    cursor: pointer;
    color: var(--color-accent);
  }

  .prose-page details[open] summary {
    margin-bottom: var(--space-3);
  }

  .prose-page__seal {
    display: block;
    width: 10rem;
    height: 10rem;
    margin: var(--space-7) auto 0;
    background-color: var(--color-accent);
    mask: url("/assets/vulcan-symbol-filigree-8cf60c54.svg") no-repeat center / contain;
  }

  .era-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .era-pair__well figcaption {
    color: var(--color-well-ink-muted);
    font-size: var(--text-sm);
    text-align: center;
  }
}