/* composition — the c-page grid, its layout zones and the content containers */

/* page grid: 80rem content column between fluid gutters; the .c-page > rules are order-dependent */
.c-page {
  --padding-inline: 1rem;
  --content-max-width: 80rem;
  /* row-gap: var(--_row-gap); */
  /* clips the classic-scrollbar overshoot of full-bleed blocks */
  overflow-x: clip;

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

/* child layout zones */
.c-page > :not(.c-full-width) {
  grid-column: content;
}

/* .c-page > .c-full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
} */
/* the nav spans the full row; its own padding realigns the content column */
.c-page > .b-navigation-section {
  grid-column: full-width;
}
/* the footer band spans the full row the same way */
.c-page > .b-footer {
  grid-column: full-width;
}

/* content container: 76rem */
.c-section-content {
  max-inline-size: 76rem;
  margin-inline: auto;
  inline-size: 100%;
  /* keeps nowrap descendants from widening the main column */
  min-inline-size: 0;
}
.c-section-editor-content {
  /* title-to-content step: 72px */
  padding-block-start: 4.5rem;
  max-inline-size: 45rem;
  margin-inline: auto;
  inline-size: 100%;
}

/* screen-reader-only text (the grids' hidden h2s) */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* skip link (default.hbs): off-screen until keyboard focus lands on it */
.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 20;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
  translate: 0 calc(-100% - 1rem);
}
.skip-link:focus-visible {
  translate: 0;
}
main:focus {
  outline: none;
}