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

  .g {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .g > * {
    grid-column: 1 / -1;
  }

  /* ---------- Media: every photograph on the site ---------- */

  /* No background of its own: until the photograph has loaded, the ambient
     light shows through, so an empty frame never reads as a dark box. */
  .media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ar, auto);
  }

  .media picture,
  .media img {
    width: 100%;
    height: 100%;
  }

  .media img {
    object-fit: cover;
    transition: opacity 900ms var(--ease), transform 1200ms var(--ease);
  }

  /* With JS, each photograph fades in once loaded (main.js adds is-loaded). */
  .js .media:not(.is-loaded) img {
    opacity: 0;
  }

  /* One grain for every image, so the photographs read as one shoot. */
  .media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.16;
    mix-blend-mode: overlay;
    transition: opacity 900ms var(--ease);
  }

  .js .media:not(.is-loaded)::after {
    opacity: 0;
  }

  /* Pages without a full-bleed hero start below the header. */
  .page-hero {
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: var(--space-6);
  }

  @media (min-width: 900px) {
    .page-hero {
      padding-top: calc(var(--header-h) + var(--space-7));
      padding-bottom: var(--space-7);
    }
  }
}