/* BEASTMODE — layout.css  (lead lane) ---------------------------------- */

.bleed { width: 100%; margin-inline: 0; }
.section { padding-block: clamp(4rem, 3rem + 8vw, 12rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section--flush  { padding-block: 0; }

/* rail: the persistent left gutter of mono metadata, drawing-sheet style */
.rail { position: relative; }
@media (min-width: 900px) {
  .rail { display: grid; grid-template-columns: 11rem 1fr; gap: var(--gutter); align-items: start; }
  .rail__meta { position: sticky; top: calc(var(--nav-h) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); }
}
.rail__meta { overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }

/* stage: a full-viewport media panel */
.stage { position: relative; width: 100%; height: 100svh; min-height: 34rem; overflow: clip; }
.stage--tall { height: 120svh; }
.stage__media { position: absolute; inset: -16% 0; width: 100%; height: 132%; }
.stage__media picture, .fig picture { display: block; width: 100%; height: 100%; }
.stage__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bmd-void) 0%, rgba(8,9,10,0.80) 22%, rgba(8,9,10,0.30) 58%, rgba(8,9,10,0.62) 100%),
    linear-gradient(to right, rgba(8,9,10,0.985) 0%, rgba(8,9,10,0.97) 26%, rgba(8,9,10,0.80) 46%,
      rgba(8,9,10,0.38) 64%, rgba(8,9,10,0.06) 84%);
  pointer-events: none; }
.stage__scrim--soft { background: linear-gradient(to top, rgba(8,9,10,0.92) 0%, rgba(8,9,10,0.25) 50%, rgba(8,9,10,0.6) 100%); }
.stage__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding-block-end: clamp(2rem, 1rem + 5vw, 5rem); }

/* two-up / split */
.split { display: grid; gap: clamp(2rem, 1rem + 5vw, 6rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--wide-l { grid-template-columns: 1.4fr 1fr; }
  .split--wide-r { grid-template-columns: 1fr 1.4fr; } }

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); } .stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); } .stack-8 { gap: var(--space-8); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.row--between { justify-content: space-between; }
.prose { max-width: var(--content-max-w); }
.measure-s { max-width: 44ch; }

/* figure */
.fig { position: relative; display: block; overflow: clip; background: var(--bmd-graphite); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig--4x3  { aspect-ratio: 4/3; }
.fig--16x9 { aspect-ratio: 16/9; }
.fig--21x9 { aspect-ratio: 21/9; }
.fig--1x1  { aspect-ratio: 1/1; }
.fig--3x4  { aspect-ratio: 3/4; }
/* edge-to-edge, breaking free of .container -- reserved for the rare lead
   shot the brief calls out to "use big" instead of every project repeating
   the same contained width. */
.fig--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
@media (max-width: 640px) { .fig--21x9 { aspect-ratio: 4/3; } }
.fig__cap { display: flex; gap: var(--space-3); margin-top: var(--space-3); color: var(--bmd-mist); }

/* grain overlay, global */
.grain { position: fixed; inset: 0; z-index: var(--z-hairline); pointer-events: none;
  background-image: url('../img/tex/grain.png'); background-size: 256px 256px;
  opacity: 0.045; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.03; } }