.container {
  width: 100%;
  max-width: var(--site-container);
  margin-inline: auto;
  padding-inline: var(--site-container-padding);
}
.container--narrow { max-width: var(--site-container-narrow); }

#main {
  display: block;
  padding-top: var(--site-spacing-lg);
  padding-bottom: var(--site-spacing-2xl);
  min-height: calc(100svh - 200px);
}

#site-header {
  position: sticky;
  top: 0;
  z-index: var(--site-z-nav);
  background: color-mix(in srgb, var(--site-color-background) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--site-color-border);
}

#site-footer {
  border-top: 1px solid var(--site-color-border);
  background: var(--site-color-surface);
  padding: var(--site-spacing-xl) 0;
  margin-top: var(--site-spacing-2xl);
}

.section {
  padding-top: var(--site-spacing-2xl);
  padding-bottom: var(--site-spacing-2xl);
}
.section--tight { padding-top: var(--site-spacing-xl); padding-bottom: var(--site-spacing-xl); }

.grid {
  display: grid;
  gap: var(--site-spacing-lg);
}
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.safe-area {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}