/* ============================================================
   Layout — containers, grid, asymmetric helpers, sections
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}
.container--narrow { max-width: var(--container-narrow); }
.container--text   { max-width: var(--container-text); }

.section {
  padding: var(--s-6) 0;
  position: relative;
  z-index: 2;
}
.section--lg  { padding: var(--s-7) 0; }
.section--sm  { padding: var(--s-4) 0; }
.section--tight { padding: var(--s-3) 0 var(--s-4); }

.section--alt { background: var(--c-limestone-2); }
.section--paper { background: var(--c-paper); }
.section--espresso { background: var(--c-espresso); color: var(--c-limestone); }
.section--terracotta { background: var(--c-terracotta); color: var(--c-paper); }
.section--turquoise { background: var(--c-turquoise); color: var(--c-paper); }

.section--espresso h1,
.section--espresso h2,
.section--espresso h3,
.section--espresso h4,
.section--espresso h5,
.section--terracotta h1,
.section--terracotta h2,
.section--terracotta h3,
.section--turquoise h1,
.section--turquoise h2,
.section--turquoise h3 { color: inherit; }

/* Grids ---------------------------------------------------- */
.grid { display: grid; gap: var(--s-3); }
.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-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }

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

/* Asymmetric editorial layouts ---------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--8-4 { grid-template-columns: 8fr 4fr; }

@media (max-width: 900px) {
  .split, .split--7-5, .split--5-7, .split--8-4 { grid-template-columns: 1fr; gap: var(--s-3); }
}

.stack > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-3); }
.stack-xl > * + * { margin-top: var(--s-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Asymmetric stagger for cards */
.stagger-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: start;
}
.stagger-row > :nth-child(1) { transform: translateY(0); }
.stagger-row > :nth-child(2) { transform: translateY(var(--s-4)); }
.stagger-row > :nth-child(3) { transform: translateY(calc(var(--s-2) * -1)); }

@media (max-width: 900px) {
  .stagger-row { grid-template-columns: 1fr; }
  .stagger-row > * { transform: none !important; }
}

/* Page intro / header */
.page-intro {
  padding: clamp(8rem, 14vh, 12rem) 0 var(--s-5);
  position: relative;
}
.page-intro h1 {
  font-size: var(--type-3xl);
  max-width: 18ch;
}
.page-intro .lede {
  font-size: var(--type-lg);
  max-width: 56ch;
  color: var(--c-text-2);
  margin-top: var(--s-3);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-weight: 350;
  line-height: 1.45;
}