/* Regions: where things sit on the page.
   Rules here position a region. They never decorate a component. */

@layer layout {
  body {
    /* Horizontal gutter only. The regions below own their vertical rhythm, so
       nothing gets spaced twice. */
    padding-inline: var(--space-m);
  }

  /* One container for the whole page, so the wordmark, every heading and every
     paragraph share a single left edge. The measure is enforced on the text
     itself rather than on the container — constraining <main> to 66ch dragged
     the header narrow too, which is what wrapped the wordmark mid-word. */
  header,
  main,
  footer {
    inline-size: min(60rem, 100%);
    margin-inline: auto;
  }

  main :is(p, ul, ol, blockquote) {
    max-inline-size: var(--measure);
  }

  /* Navigation is not prose. Tag rows and the pager are meant to use the full
     width and wrap by item, not at a reading measure. */
  main nav :is(p, ul, ol) {
    max-inline-size: none;
  }

  /* Header */

  header {
    /* Both ends at --space-l: the header→h1 gap must clearly exceed the
       h1→p gap (--space-m, 24px) so the h1 reads as content, not as part
       of the header's own furniture. */
    padding-block: var(--space-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
  }

  /* header's own flex-wrap does the work: at the mark+toggle width this line
     never fills, so nav (below) is the only child that needs to be forced
     onto its own line. */
  header > nav {
    flex-basis: 100%;
  }

  /* One rule for the nav list. Previously four selectors styled it: .nav-items,
     .nav-items li, .nav-items h2, .nav-item — the last two now have no markup
     to match, and .nav-items li only existed to collapse its own line-height.
     Row and wrapping by default — a subpage header only has room for one
     column's worth of links before it would rather wrap than grow tall. */
  .nav-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    list-style: none;
    padding: 0;
  }

  /* Touch targets, stated once for every standalone link on the site.
     WCAG 2.2 SC 2.5.8 floors them at 24×24px; --tap is 48px. inline-flex
     rather than inline-block so the label centres in the box.

     Links inside a sentence are deliberately excluded — SC 2.5.8 exempts them,
     and padding them out would wreck the line spacing of the prose. */
  .nav-items a,
  .tag-list a,
  .pagination a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    padding-inline: var(--space-xs);
  }

  /* Below 45rem the subpage header's nav row has to hold four links without
     pushing the header past its mobile height budget, so it uses the WCAG
     floor instead of --tap here. Desktop has the room and reverts this
     below. */
  .nav-items a {
    min-block-size: var(--space-m);
    padding-inline: var(--space-2xs);
    font-size: var(--text-meta);
  }

  .nav-items li + li {
    margin-block-start: 0;
  }

  /* Colour and underline for .nav-items a live in components.css, shared
     with .circle a — layout only positions this region, it never decorates. */

  /* Content */

  /* One pattern replaces p{margin}, li{margin} and every per-heading margin
     rule. Children space themselves from the sibling above, and --flow-space
     lets any element ask for more.

     `article >` is here because post templates are out of scope and cannot be
     given the class; without it, post bodies would have no rhythm at all. */
  .flow > * + *,
  article > * + * {
    margin-block-start: var(--flow-space, var(--space-m));
  }

  .flow > h2,
  article > h2 {
    --flow-space: var(--space-xl);
  }

  .flow > h3,
  article > h3 {
    --flow-space: var(--space-l);
  }

  /* With no footer (on /), main ends the page and needs the bottom room the
     footer would have given. */
  main:last-child {
    padding-block-end: var(--space-xl);
  }

  footer {
    margin-block-start: var(--space-xl);
    padding-block-end: var(--space-l);
    text-align: center;
    color: var(--muted);
  }

  @media (min-width: 45rem) {
    .nav-items {
      gap: var(--space-xs) var(--space-s);
    }

    .nav-items a {
      min-block-size: var(--tap);
      padding-inline: var(--space-xs);
      font-size: var(--text-body);
    }
  }
}