/* ==========================================================================
   HOUSE OF PRACHAR: layout. Grid, containers, section rhythm, surfaces.
   Breakpoints: 640 / 900 / 1200.
   ========================================================================== */

/* The visible 12-column grid, like a layout sheet under the page */
body::before {
  content: ""; position: fixed; inset: 0 var(--margin); pointer-events: none; z-index: 0;
  max-width: calc(var(--maxw) - 2 * var(--margin)); margin-inline: auto;
  background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  border-right: 1px solid var(--gridline);
}
body > * { position: relative; z-index: var(--z-content); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); }
.c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; }
.c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; }
.c-9 { grid-column: span 9; } .c-12 { grid-column: 1 / -1; }

.section { padding-block: var(--section-y); }
section[id] { scroll-margin-top: 64px; }

/* Surfaces: paper is the default; one band of paper-deep; one dark band per page */
.s-band { background: var(--bg-band); }
.s-ink  { background: var(--bg-dark); color: var(--text-on-dark); --rule: var(--rule-on-dark); }

/* Flow helpers */
.stack > * + * { margin-top: var(--stack, var(--s-5)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.measure { max-width: 65ch; }
h1, h2, h3, .t-mix { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Section head: a kicker in the newspaper's voice, then a plain headline */
.head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.head .t-lead { color: var(--text-soft); max-width: 40ch; }
.s-ink .head .t-lead { color: var(--text-on-dark); opacity: .8; }
.kicker { display: flex; align-items: center; gap: var(--s-4); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform: scaleX(var(--draw, 1)); transform-origin: left; }

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > [class*="c-"] { grid-column: 1 / -1; }
}