/* ============================================================
   Layout — shell, grid, section rhythm, tonal bands
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 940px; }
.shell--full { max-width: none; padding-inline: var(--gutter); }

/* ---- Section rhythm ---- */
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--flush { padding-block: 0; }

/* ---- Tonal bands ---- */
.band-bone  { background: var(--bone); }
.band-bone2 { background: var(--bone-2); }

.band-ink { background: var(--ink); color: var(--on-dark); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--on-dark); }
.band-ink .lead { color: var(--on-dark-muted); }

/* The signal band — full-bleed saturated color. Use sparingly and large. */
.band-blue { background: var(--blue); color: var(--on-blue); }
.band-blue h1, .band-blue h2, .band-blue h3, .band-blue h4 { color: var(--on-blue); }
.band-blue .lead { color: var(--on-blue-muted); }

.band-rule-top { border-top: 1px solid var(--rule); }
.band-ink.band-rule-top { border-top-color: var(--ink-rule); }

/* ---- 12-column grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
}
.g-3 { grid-column: span 3; }
.g-4 { grid-column: span 4; }
.g-5 { grid-column: span 5; }
.g-6 { grid-column: span 6; }
.g-7 { grid-column: span 7; }
.g-8 { grid-column: span 8; }
.g-9 { grid-column: span 9; }
.g-12 { grid-column: span 12; }

@media (max-width: 980px) {
  .g-3, .g-4, .g-5, .g-6 { grid-column: span 6; }
  .g-7, .g-8, .g-9 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .grid > * { grid-column: span 12 !important; }
}

/* ---- Card grids ---- */
.cards {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---- Stacks & rows ---- */
.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }
.row     { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.row-4   { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.row--between { justify-content: space-between; }

.measure { max-width: var(--measure); }
.measure-tight { max-width: 52ch; }

/* ---- Page transition ---- */
#view { animation: view-in var(--dur-slow) var(--ease-out) both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }