@layer layout {
  .container {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-inline-size: var(--container-narrow); }

  .section { padding-block: var(--space-fluid); }

  /* header */
  /* full-bleed bar; the contents sit in the same container as the page and the footer */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    border-block-end: var(--border);
  }
  .site-header__inner {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--header-h);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
      background: color-mix(in srgb, var(--color-bg) 80%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      backdrop-filter: blur(16px) saturate(160%);
    }
  }
  @media (min-width: 480px) {
    .site-header__inner { gap: var(--space-md); }
  }

  /* footer: ink surface, cream text + cream logo. M18: one row from 640 px, half the height.
     After M39.2: the row starts at 900 px. M18's 640 fitted a row of two blocks; the newsletter
     column M28 (D5) put between them needs about 850 px before the three fit side by side
     (the brand and the legal links do not shrink, the newsletter block stops at its field's
     14 rem), so between 640 and 830 px the legal links ran past the window. */
  .site-footer {
    background: var(--color-ink);
    color: var(--color-cream);
    padding-block: var(--space-xl);
    margin-block-start: var(--space-3xl);
  }
  .site-footer__inner {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .site-footer a { color: var(--color-cream); }
  .site-footer .logo-mark { inline-size: 2rem; block-size: auto; color: var(--color-cream); }
  .site-footer__brand { display: flex; align-items: center; gap: var(--space-sm); }
  .site-footer__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-1); margin: 0; }
  /* M28 (D5, D5.1): the newsletter block, the social icons under it */
  .site-footer__news { display: grid; gap: var(--space-sm); justify-items: start; }
  /* 2026-09-13 review: the lead reads as the block's title, same size as the brand name */
  .site-footer__lead { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-1); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
  .footer-signup { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
  .footer-signup__field {
    min-inline-size: 14rem;
    flex: 1 1 14rem;
    padding: var(--space-2xs) var(--space-sm);
    min-block-size: 44px;
    border: 1px solid rgb(247 242 232 / .45);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-cream);
    font: inherit;
  }
  .footer-signup__field::placeholder { color: rgb(247 242 232 / .55); }
  .footer-signup__field:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 2px; }
  .site-footer__interests { font-size: var(--fs--1); margin: 0; }
  .site-footer__interests a { font-weight: 400; }
  /* 2026-09-13 review: air around the icon row; the first icon's glyph sits flush
     with the content edge (the 44px tap target is 8px wider than the 28px glyph) */
  .site-footer .social-row { padding-block: 1.5rem .875rem; }
  .site-footer .social-row li:first-child .social-link--icon { margin-inline-start: -8px; }
  .site-footer__heading {
    font-family: var(--font-body);
    font-size: var(--fs--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-block-end: var(--space-xs);
  }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
  .site-footer__note {
    padding-inline: var(--gutter);  /* 2026-09-13 review: align with the container gutter */
    max-inline-size: var(--container);
    margin-inline: auto;
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid rgb(247 242 232 / .2);
    font-size: var(--fs--1);
  }
  @media (min-width: 900px) {
    /* M28 (D5): three columns hold the row: brand, newsletter, legal */
    .site-footer__inner { flex-direction: row; align-items: start; gap: var(--space-xl); }
    .site-footer__brand { flex: 0 0 auto; align-items: start; }
    .site-footer__news { flex: 1 1 22rem; }
    .site-footer__inner > .site-footer__nav { flex: 0 0 auto; margin-inline-start: auto; }
    .site-footer__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }

  /* simple flowing prose pages */
  .prose { display: grid; gap: var(--space-md); }
  .prose h2 { margin-block-start: var(--space-lg); }
  /* M22: the description's markup (events/markup.py) */
  .prose h3 { margin-block-start: var(--space-md); }
  .prose ul { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2xs); }
}