/* ==========================================================================
   layout.css — page frame and the three-column grid
   Structural rules only: widths, gaps, flow. No colour, no type.
   ========================================================================== */

.page {
  padding-top: var(--space-page-top);
  padding-bottom: var(--space-page-bottom);
}

/* Centred measure shared by the grid and the contact block, so both align to
   the same left and right edge. */
.container {
  width: min(100% - var(--container-gutter) * 2, var(--container-max));
  margin-inline: auto;
}

/* Column 1 is a fixed 320px (it is sized by the portrait); columns 2 and 3
   split whatever is left. */
.grid {
  display: grid;
  grid-template-columns: var(--col-intro) 1fr 1fr;
  gap: var(--grid-gap);
  align-items: start;
}

/* A column stacks two sections separated by a .rule. */
.column {
  min-width: 0;
}

/* Rows inside a section: meta on the left, body on the right. */
.entries {
  display: grid;
  gap: var(--space-entries);
  margin-top: var(--space-label-to-entries);
}

.entry {
  display: grid;
  grid-template-columns: var(--col-meta) 1fr;
  column-gap: var(--entry-gap);
  align-items: start;
}