/* Layout: header, main, grid, footer */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--color-bg) 82%, transparent);
  border-bottom: 1px solid var(--color-ui);
  transition: transform var(--transition-med), background var(--transition-med);
}

header.site-header.nav--hidden { transform: translateY(-100%); }

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
}

.nav__list { display: flex; gap: var(--space-lg); align-items: center; }
.nav__list--left { justify-content: flex-start; }
.nav__list--right { justify-content: flex-end; }
.nav__logo { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-sm); border-radius: 999px; }
.nav__logo img { height: 28px; width: auto; }

main { display: block; }
section { padding-block: var(--space-2xl); }
section.section-tight { padding-block: var(--space-xl); }

.grid { display: grid; gap: var(--space-xl); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

footer.site-footer {
  border-top: 1px solid var(--color-ui);
  padding-block: var(--space-xl);
}

.footer__inner { display: flex; justify-content: space-between; gap: var(--space-lg); align-items: center; }
.footer__nav { display: flex; gap: var(--space-md); }
.social { display: flex; gap: var(--space-md); align-items: center; }
.social a { display: inline-flex; padding: var(--space-xs); }