/* Layout: containers, grids, section rhythm */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-paper) 94%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

html.is-scrolled .site-header {
  background: color-mix(in srgb, var(--color-paper) 97%, transparent);
  box-shadow: var(--shadow-header);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.split {
  display: grid;
  /* minmax(0, …) stops a wide headline from setting the track's min-content floor
     and pushing the column past the wrap at 320px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 56.25rem) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-8);
  }

  .split > .split__main {
    grid-column: 1 / span 7;
  }

  .split > .split__aside {
    grid-column: 8 / span 5;
  }

  .split--wide > .split__main {
    grid-column: 1 / span 8;
  }

  .split--wide > .split__aside {
    grid-column: 9 / span 4;
  }
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.stack > * + * {
  margin-top: var(--space-4);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  align-items: end;
}

@media (min-width: 48rem) {
  .section-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.site-footer {
  background: var(--color-surface-deep);
  color: var(--color-on-deep);
  padding-block: var(--space-8) var(--space-6);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-8);
  }
}