.pageSwatch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.pageSwatch_preview {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid currentcolor;
  forced-color-adjust: none;
}

.pageLogo {
  max-width: 14em;
}

.pageIconGrid {
  display: flex;
  flex-wrap: wrap; 
  gap: var(--space-3);
}
.pageGeneric {
  display: grid;
  column-gap: var(--grid-gutter);
  grid-template-columns: 1fr;
  grid-template-areas: "header" "toc" "body";
  margin-block: var(--space-8-9);
}

@media (min-width: 52rem) {
  .pageGeneric {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header ." "body toc"; 
  }
}

.pageGeneric_header {
  grid-area: header;
  margin-block-end: var(--space-6-7);
}

.pageGeneric_toc,
.pageGeneric_body {
  margin-block-end: var(--space-6-7);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-regular) solid var(--color-furniture);
}

.pageGeneric_toc {
  grid-area: toc;
}

.pageGeneric_body {
  grid-area: body;
}

.pageGeneric_body > :last-child {
  margin-block-end: 0;
}

.pageTitle {
  margin-block-end: 0;
}