/* ─── Layout primitives ─────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-bleed {
  width: 100%;
  padding-inline: var(--gutter);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

.col-full   { grid-column: 1 / -1; }
.col-half   { grid-column: span 6; }
.col-third  { grid-column: span 4; }
.col-2third { grid-column: span 8; }
.col-quart  { grid-column: span 3; }

@media (max-width: 900px) {
  .col-half, .col-third, .col-2third, .col-quart { grid-column: 1 / -1; }
}

.stack > * + * { margin-top: var(--stack, var(--s-5)); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-7); }

.section {
  padding-block: var(--s-10);
  position: relative;
}
.section--snug { padding-block: var(--s-8); }
.section--xl   { padding-block: clamp(7rem, 16vh, 12rem); }

.rule { height: 1px; background: var(--line); width: 100%; }
.rule-strong { height: 1px; background: var(--line-strong); width: 100%; }

/* Editorial chapter marker that runs in the margin */
.chapter-mark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.chapter-mark::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--line-strong);
}

/* Paper grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Steam glow behind hero */
.steam-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 600px at 18% 28%, var(--steam-glow) 0%, transparent 55%),
    radial-gradient(900px 520px at 88% 72%, var(--steam) 0%, transparent 60%);
  opacity: 0.95;
  z-index: 0;
}