@layer layout {
  /* Page containers — one centered column, capped on large screens, with a
     responsive inline gutter. Shared by the header, main content and footer. */
  .site-header, .wrapper, .site-footer {
    inline-size: 100%;
    max-inline-size: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrapper {
    flex: 1 0 auto; /* grow so the footer sits at the bottom on short pages */
    padding-block: var(--block-space-double);
  }

  /* A single post/page: a centered content column, wider than a pure reading measure
     so images and media have room (the whole column, text included). */
  .wrapper > article {
    max-inline-size: 50rem;
    margin-inline: auto;
  }
  .wrapper > article > h1 {
    font-size: var(--text-display);
    line-height: 1.1;
    margin-block-end: var(--block-space);
  }
  .wrapper > article > .post__byline { margin-block-end: var(--block-space-double); }

  /* A post's text reads at a comfortable measure; its media keeps the wider column. A page keeps
     the full column unless the theme gives it a measure — pages may be laid-out designs. */
  .post { --measure: var(--post-measure, 40rem); --reading-size: var(--post-text-size, var(--text-normal)); }
  .page { --measure: var(--page-measure, 100%); --reading-size: var(--page-text-size, var(--text-normal)); }
  :is(.post, .page) .lexxy-content { font-size: var(--reading-size); }
  /* Centred by margins, not auto, so a narrow block keeps to the column's start edge. */
  :is(.post, .page) > :not(.post__featured, .page__featured, .lexxy-content),
  :is(.post, .page) .lexxy-content > :not(figure, table, :has(img, video, iframe, table, .graduates-directory)) {
    max-inline-size: var(--measure);
    margin-inline: max(0px, (100% - var(--measure)) / 2);
  }

  /* Featured hero image on a post/page — shown whole, never cropped. A wide landscape
     hero fills the column; a portrait upload (e.g. a newspaper clipping) is capped in
     height and centred, scaled down to fit rather than cut into a band. */
  .post__featured, .page__featured, .course__featured { margin-block-end: var(--block-space-double); }
  .post__featured img, .page__featured img, .course__featured img {
    display: block;
    margin-inline: auto;
    --cap: 30rem;
    max-block-size: var(--cap);
    /* The img carries width/height so the browser reserves its box before the bytes land,
       and that needs a definite width. Left at the attribute's value the height cap would
       shrink the height alone and stretch a portrait, so cap the width at what the height
       allows — --ratio comes from image_dimensions. */
    max-inline-size: min(100%, calc(var(--cap) * var(--ratio, 100)));
    block-size: auto;
    border-radius: var(--radius);
  }
  .post__featured-caption, .page__featured-caption, .course__featured-caption {
    margin-block-start: var(--inline-space-half);
    font-size: var(--text-small);
    color: var(--color-muted);
    text-align: center;
  }
}