/*
  Projects catalog: ordered sections per stage (band color via data-stage),
  each with a card grid.
*/

.page-projects {
  padding-block: var(--space-xl) var(--space-5xl);
}
.page-projects > h1 {
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
  color: var(--brand);
  font-size: var(--text-h2);
  margin-block-end: var(--space-md);
}
.page-projects > p.intro {
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
  color: var(--ink-muted);
  max-inline-size: var(--width-narrow);
  margin-block-end: var(--space-3xl);
  font-size: 1.05rem;
}

/* ---- Stage sections: full-bleed colored bands ---- */

.page-projects > section[data-stage] {
  padding-block: var(--space-2xl);
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
}
.page-projects > section[data-stage="blooming"]  { background: oklch(94% 0.05 var(--hue-blooming)); }
.page-projects > section[data-stage="growing"]   { background: oklch(94% 0.04 var(--hue-growing)); }
.page-projects > section[data-stage="sprouting"] { background: oklch(94% 0.05 var(--hue-sprouting)); }
.page-projects > section[data-stage="seed"]      { background: oklch(94% 0.04 var(--hue-seed)); }

.page-projects > section[data-stage] > h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.5vw + .9rem, 1.7rem);
  font-weight: 700;
  margin-block-end: var(--space-lg);
  letter-spacing: -.01em;
}
.page-projects > section[data-stage="blooming"]  > h2 { color: oklch(35% 0.14 var(--hue-blooming)); }
.page-projects > section[data-stage="growing"]   > h2 { color: oklch(35% 0.12 var(--hue-growing)); }
.page-projects > section[data-stage="sprouting"] > h2 { color: oklch(35% 0.12 var(--hue-sprouting)); }
.page-projects > section[data-stage="seed"]      > h2 { color: oklch(38% 0.08 var(--hue-seed)); }

/* ---- Project list within a stage ---- */

.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-md);
}