/* ==========================================================================
   Layout — the page shell, sections, grid and the two spacing primitives.
   ========================================================================== */

/* ---- Page shell --------------------------------------------------------- */
.page {
  width: 100%;
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--surface);
}

.page-main { flex-grow: 1; }

/* Routes are shown one at a time by assets/js/site.js */
.route[hidden] { display: none !important; }

/* ---- Horizontal gutter -------------------------------------------------- */
.pad {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: var(--section-y); }

.section--hero      { padding-block: 110px 0; position: relative; }
.section--intro     { padding-block: 110px 120px; }
.section--head      { padding-block: 110px 80px; }
.section--flush-top { padding-block: 0 120px; }
.section--tight     { padding-block: 56px; }

.section--ruled       { border-top: 1px solid var(--rule); }
.section--ruled-both  { border-block: 1px solid var(--rule); }
.section--raised      { background: var(--surface-raised); }

/* ---- 12-column grid ----------------------------------------------------- */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.grid12--end { align-items: end; }

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-7  { grid-column: span 7; }
.col-6-7 { grid-column: 6 / span 7; }
.col-7-6 { grid-column: 7 / span 6; }
.col-9-4 { grid-column: 9 / span 4; }

/* ---- Even grids --------------------------------------------------------- */
.grid-2 { --gap: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { --gap: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-5 { --gap: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }

/* A two-column definition list used for feature lists */
.pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-list);
}

/* ---- The two spacing primitives ----------------------------------------- */
/* .stack = vertical rhythm, .cluster = horizontal row. Both take --gap.     */
.stack   { --gap: normal; display: flex; flex-direction: column; gap: var(--gap); }
/* .cluster centres its children. Rows that were plain `display:flex` with no
   align-items need --stretch, or their children stop stretching to equal height. */
.cluster { --gap: normal; display: flex; align-items: center; gap: var(--gap); }
.cluster--stretch { align-items: stretch; }

.cluster--baseline { align-items: flex-end; }
.cluster--between { justify-content: space-between; }
.cluster--wrap   { flex-wrap: wrap; }

/* Gap scale — applies to .stack, .cluster and the even grids.
   These must stay AFTER the rules above: same specificity, source order wins. */
.g-2  { --gap: 2px;  }
.g-4  { --gap: 4px;  }
.g-6  { --gap: 6px;  }
.g-8  { --gap: 8px;  }
.g-10 { --gap: 10px; }
.g-12 { --gap: 12px; }
.g-14 { --gap: 14px; }
.g-16 { --gap: 16px; }
.g-18 { --gap: 18px; }
.g-20 { --gap: 20px; }
.g-22 { --gap: 22px; }
.g-24 { --gap: 24px; }
.g-28 { --gap: 28px; }
.g-32 { --gap: 32px; }
.g-48 { --gap: 48px; }
.g-56 { --gap: 56px; }
.g-72 { --gap: 72px; }

/* ---- Small helpers ------------------------------------------------------ */
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.measure-420 { max-width: 420px; }
.measure-580 { max-width: 580px; }
.measure-600 { max-width: 600px; }
.measure-620 { max-width: 620px; }
.measure-640 { max-width: 640px; }
.measure-820 { max-width: 820px; }
.measure-860 { max-width: 860px; }
.measure-900 { max-width: 900px; }

/* ---- Positioning & text-size utilities ---------------------------------- */
.relative { position: relative; }
.t-3xs  { font-size: var(--t-3xs); }
.t-2xs  { font-size: var(--t-2xs); }
.t-xs   { font-size: var(--t-xs);  }
.t-sm   { font-size: var(--t-sm);  }
.t-base { font-size: var(--t-base); }
.italic    { font-style: italic; }
.underline { text-decoration: underline; }