/* ═══════════════════════════════════════════════════════════
   LAYOUT — container, grid helpers, section scaffolding
═══════════════════════════════════════════════════════════ */

:root {
  --anchor-offset: 128px;
}

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

/* ── two-column equal ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--content-media-gap);
}

/* ── section base ── */
section {
  position: relative;
}

:where(main, section)[id] {
  scroll-margin-top: var(--anchor-offset);
}

main[id]:focus {
  outline: none;
}