/* ==========================================================================
   MAIN — base styles + shared layout
   ========================================================================== */

html {
  background-color: var(--color-bg-primary);
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Anchor targets — leave headroom for the fixed compact header (26px).
   Used by the custom JS smooth-scroll in js/main.js via getComputedStyle. */
section[id],
footer[id] {
  scroll-margin-top: 40px;
}

/* --------------------------------------------------------------------------
   .container — 12-column grid
   Figma grid: 12 cols, gutter 4px, margin 4px each side, frame 1440px
   Column width = (1440 - 2×4px margin - 11×4px gutter) / 12 = 115.67px
-------------------------------------------------------------------------- */
.container {
  padding: 0 4px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 4px;
}