/* Purpose: the spatial systems. Several deliberate ones, not a single wrapper:
   a shared content container, a 12 column grid, an offset editorial grid, a
   full-bleed stage, and the three depth planes used inside immersive chapters. */

.container {
  width: min(calc(100% - (2 * var(--container-pad))), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(calc(100% - (2 * var(--container-pad))), var(--container-wide));
  margin-inline: auto;
}

.container--narrow {
  width: min(calc(100% - (2 * var(--container-pad))), var(--container-narrow));
  margin-inline: auto;
}

.container--bleed { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* A chapter is a full band of the page. Each one owns a ground colour. */
.act {
  position: relative;
  padding-block: var(--chapter-y);
  background: var(--ground);
  isolation: isolate;
}

/* Where one chapter meets the next, the two paddings stack and read as a
   void. Consecutive chapters share a single, tighter join instead. */
.act + .act { padding-top: var(--chapter-y-compact); }
.act--flush + .act { padding-top: var(--chapter-y); }

.act--large { padding-block: var(--chapter-y-large); }
.act--compact { padding-block: var(--chapter-y-compact); }
.act--flush { padding-block: 0; }
.act--clip { overflow: clip; }

/* Chapter grounds. Set on the element so the transition between chapters is a
   material change, not a repeated dark rectangle. */
.act--obsidian { --ground: var(--c-obsidian); --accent: var(--c-brass); }
.act--charcoal { --ground: var(--c-charcoal); --accent: var(--c-brass); }
.act--midnight { --ground: #0A1124; --ground-2: var(--c-midnight); --accent: var(--c-brass-hi); }
.act--green { --ground: #08211C; --ground-2: var(--c-green); --accent: #6FD3AF; }
.act--warm-black { --ground: var(--c-warm-black); --accent: var(--c-brass); }
.act--ivory { --ground: var(--c-ivory); --accent: var(--c-brass-ink); color: var(--c-paper-ink); }

/* The three depth planes used inside immersive chapters. */
.plane-back { position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none; }
.plane-mid { position: relative; z-index: var(--z-raised); }
.plane-front { position: relative; z-index: var(--z-object); }

/* Edge metadata: small mono text pinned to the outer margin on wide screens. */
.edge-note {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--c-dim);
}

@media (min-width: 1280px) {
  .edge-note--vertical {
    position: absolute;
    right: var(--space-32);
    top: 50%;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
  }
}

/* An asymmetric editorial split, 5 / 7 rather than halves. */
.split {
  display: grid;
  gap: var(--space-32);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: start;
  }
  .split__aside { grid-column: 1 / span 5; }
  .split__body { grid-column: 7 / span 6; }
  .split--reverse .split__aside { grid-column: 8 / span 5; order: 2; }
  .split--reverse .split__body { grid-column: 1 / span 6; }
}

/* A hairline that draws itself as a chapter is read. */
.rule-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-hairline-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-editorial) var(--ease-editorial);
}

.is-inview .rule-line { transform: scaleX(1); }

/* ---------------------------------------------------------------
   Chapter head rhythm. One repeated relationship across the site:
   chapter mark, then headline, then intro, then body. Every gap is
   fixed here so no template carries its own margins.
   --------------------------------------------------------------- */

.act__head { display: block; }
.act__head > .t-headline { margin-top: var(--space-20); }
.act__head > .t-body,
.act__head > .section-intro { margin-top: var(--space-24); }

.act__head--16 > .t-headline { max-width: 16ch; }
.act__head--14 > .t-headline { max-width: 14ch; }
.act__head--18 > .t-headline { max-width: 18ch; }

.act__body { margin-top: var(--space-40); }

@media (min-width: 900px) {
  .act__body { margin-top: var(--space-48); }
}