/* Page rhythm and grid primitives */

.page { width: 100%; }

/* Horizontal inset shared by every block on the page */
.section {
  padding-inline: var(--gutter);
  padding-block-end: var(--section-y);
}

.section--top { padding-block-start: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush { padding-block-end: 0; }

.section--ruled {
  border-block-start: 1px solid var(--border);
  padding-block-start: clamp(2rem, 4vw, 3rem);
}

.measure { max-width: 42.5rem; }   /* 680px */
.measure-sm { max-width: 40rem; }  /* 640px */
.measure-lg { max-width: 51.25rem; }

/* Grids — all collapse to a single column on small screens */
.grid { display: grid; gap: var(--gap); }
.grid--gap-sm { gap: var(--gap-sm); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Asymmetric splits used by a few flows */
.grid--wide-left { grid-template-columns: 1.3fr 1fr; }
.grid--wide-right { grid-template-columns: 1fr 1.3fr; }
.grid--wide-right-lg { grid-template-columns: 1fr 1.4fr; }
.grid--split-115 { grid-template-columns: 1.15fr 1fr 1fr; }

.grid > * { min-width: 0; }
.span-all { grid-column: 1 / -1; }

/* Section heading block */
.section-title {
  font-size: var(--fs-section);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-block-end: 0.5rem;
}

.section-intro {
  color: var(--text-3);
  margin-block-end: 2rem;
}

.eyebrow {
  font-size: var(--fs-2xs);
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 0.5rem;
}

@media (max-width: 900px) {
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .grid--2,
  .grid--wide-left,
  .grid--wide-right,
  .grid--wide-right-lg { grid-template-columns: minmax(0, 1fr); }
  .grid--3,
  .grid--split-115 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--split-115 { grid-template-columns: minmax(0, 1fr); }
}