/* ============================================================
   SECTION / CONTAINER — shared layout shell used on every page
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }

.section.on-dark   { background: var(--color-ink);   color: var(--color-paper); }
.section.on-light  { background: var(--color-paper); color: var(--color-ink); }
.section.on-indigo { background: var(--color-indigo);color: var(--color-paper); }
.section.on-flame  { background: var(--color-flame); color: var(--color-ink); }
.section.on-yellow { background: var(--color-brass); color: var(--color-ink); }
.section.on-sky    { background: var(--color-sky);   color: var(--color-paper); }
.section.on-green  { background: var(--color-green); color: var(--color-ink); }

/* Every pairing below is checked against WCAG AA 4.5:1 for the
   background it's actually used on — brass/paper read fine on the
   dark surfaces but fail on the brighter sky/green/yellow ones, so
   those get their own contrast-safe eyebrow/muted color. */
.section.on-dark .eyebrow,
.section.on-indigo .eyebrow { color: var(--color-brass); }
.section.on-sky .eyebrow { color: var(--color-paper); }
.section.on-light .eyebrow { color: var(--color-brass-deep); }
.section.on-flame .eyebrow,
.section.on-yellow .eyebrow,
.section.on-green .eyebrow { color: var(--color-ink); opacity: .72; }

.section.on-dark .muted   { color: var(--color-muted-on-ink); }
.section.on-light .muted  { color: var(--color-muted-on-paper); }
.section.on-indigo .muted { color: var(--color-muted-on-indigo); }
.section.on-sky .muted    { color: var(--color-muted-on-sky); }
.section.on-flame .muted,
.section.on-yellow .muted { color: var(--color-muted-on-yellow); }
.section.on-green .muted  { color: var(--color-ink); opacity: .7; }

.section-head { max-width: 60ch; }
.section-head h1,
.section-head h2 { max-width: 16ch; }

/* Page header band — used on interior pages instead of a photo hero.
   Only sets padding-top (nav clearance); the enclosing .section supplies
   the bottom rhythm via its own padding-block, so the two don't stack
   into a doubled gap top and bottom. */
.page-header {
  padding-top: calc(var(--nav-h) + var(--space-xl));
}
@media (min-width: 768px) {
  .page-header { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
}
/* Section's own top padding would otherwise stack under page-header's
   nav-clearance padding, roughly doubling the gap under the fixed nav. */
.section:has(> .page-header) { padding-block-start: 0; }
.page-header p.intro {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 60ch;
}

/* Subtle grain / halftone texture — CSS only, no image asset.
   Scoped to hero/page-header bands only (not the whole document)
   so it stays "subtle" and cheap to paint on low-end phones. */
.texture-grain { position: relative; }
.texture-grain::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }