@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: var(--space-xl) var(--gutter);
    margin-block-start: var(--space-3xl);
  }
  .site-footer__inner {
    max-inline-size: var(--container);
    margin-inline: auto;
    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; }
  .site-footer__lead { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-0); 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__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 {
    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);
    opacity: .85;
  }
  @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); }
}