/* =========================================================================
   THE GRID · one horizontal origin for the whole page
   Loaded last, so this file is the single authority on the inline axis.
   Before this existed the page carried eight different left edges (72, 100.8,
   115.2, 130, 144, 195, 230.4, 244.8 at 1440px) and eight column gutters,
   because three stylesheets each set their own vw paddings and centred
   max-widths. Nothing here is a new look; it is the same composition measured
   from one place, so that a deliberate break reads as a break.
   ========================================================================= */
:root{
  /* Page edge. Every band starts here, at every width. */
  --gutter:clamp(22px,7vw,160px);
  /* One gutter for every column system on the page. */
  --col-gap:clamp(16px,2vw,32px);
  /* One column plus its gutter: the only sanctioned indent. Percentages
     resolve against the using element's containing block, which is always
     the padded band, so this is the same distance in every section. */
  --col-step:calc((100% - var(--col-gap) * 11) / 12 + var(--col-gap));
  /* One vertical rhythm for the editorial bands. The three scroll stages
     keep their own heights; they are sized by their canvases, not by copy. */
  --section-y:clamp(88px,12vh,152px);
}

/* ---- the inline origin ------------------------------------------------- */
.top,
.pass,
.end-fine,
.thesis,
.base#base,
.output#output,
.evidence{padding-inline:var(--gutter)}

/* ---- the vertical rhythm (editorial bands only) ------------------------ */
.thesis,
.base#base,
.output#output,
.evidence{padding-block:var(--section-y)}

/* ---- the hero: absolutely positioned, same origin ---------------------- */
.title{left:var(--gutter);width:calc(100% - var(--gutter) * 2)}
.story-nav{left:var(--gutter);right:var(--gutter)}
.cap.l{left:var(--gutter)}
.cap.r{right:var(--gutter)}
/* One indent, on the display lockup alone. The deck and the call to action
   return to the page origin, so the hero reads on two edges instead of
   drifting rightward in three steps -- and the indented word is framed by
   type above and below it rather than starting a staircase. */
.title h1 em{margin-left:var(--col-step)}


/* ---- the twelve-column grid, declared once ----------------------------- */
.relations-interlude,
.base#base,
.output#output.demo-invitation .output-head,
.evidence-inner{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap);
  align-items:start;
  max-width:none;
  margin-inline:0;
}
.relations-interlude{row-gap:clamp(24px,3vw,38px)}
.base#base{row-gap:clamp(30px,3.6vw,48px)}
.output#output.demo-invitation .output-head{row-gap:clamp(30px,4vw,52px)}
.evidence-inner{row-gap:clamp(30px,4vw,48px)}

/* ---- column assignments ------------------------------------------------
   Two proportions, each used twice, and nothing else:

     A  even split, boundary at column 7   — thesis, evidence
     B  eight-and-four, boundary at 9      — demo invitation (wide left)
     B' the same split mirrored, at 5      — baseline (wide right)
     —  full bleed, 1/-1                   — the drawings

   So every block starts at the gutter, and a block that does not is sitting
   on one of three shared verticals rather than on a number of its own. The
   measure of the prose is capped in `ch` by the section stylesheets: the
   column sets where a text block begins, its own max-width sets how wide it
   is allowed to read. Those are different jobs and should stay separate. */

/* thesis — A. `align-items:start` above also repairs the inherited `end`
   from .thesis-inner, which had been hanging both paragraphs off a shared
   bottom and leaving a 168px hole under the heading. */
.relations-interlude .measurement-thesis{grid-column:1/9;max-width:none}
.relations-interlude .thesis-note{grid-column:1/7}
.relations-interlude .relations-purpose{grid-column:7/-1}
.relations-interlude .plate{grid-column:1/-1}
.relations-interlude .measurement-boundary{grid-column:1/-1}

/* baseline — B'. `display:contents` dissolves the nested grid that had been
   running a second, 30px gutter inside the section's 24px one. */
.base#base .base-mid{display:contents}
.base#base .quiet-reference{grid-column:1/5;grid-row:1;margin-left:0}
.base#base .baseline-intro{grid-column:1/5;grid-row:2}
.base#base .baseline-illustration{grid-column:5/-1;grid-row:1/span 2;max-width:none;align-self:center}
.base#base .method-detail{grid-column:1/5;grid-row:3;max-width:none}
.base#base .base-foot{grid-column:5/10;grid-row:3}

/* demo invitation — B */
.output#output.demo-invitation .output-lede{grid-column:1/9}
.output#output.demo-invitation .output-aside{grid-column:9/-1}
.output#output h2{left:0}

/* evidence — A above, then full width. The heading states the claim and the
   report excerpt demonstrates it, side by side; the three machine files and
   the closing note run the full measure beneath, because their content is
   rows of field names and they need the width more than the heading does. */
.evidence-inner .evidence-head{grid-column:1/7;grid-row:1}
.evidence-inner .evidence-report{grid-column:7/-1;grid-row:1}
.evidence-inner .evidence-files{grid-column:1/-1;grid-row:2}

/* ---- the collapse -------------------------------------------------------
   One place where the page grid stacks. 900px is not a new number: it is the
   breakpoint the evidence section already used, so the collapse happens
   where something already collapsed. */
@media (max-width:900px){
  .relations-interlude,
  .base#base,
  .output#output.demo-invitation .output-head,
  .evidence-inner{grid-template-columns:1fr}
  /* Repeated at the same specificity as the assignments above, not shortened
     to `> *`: a descendant selector there would lose to `.evidence-inner
     .evidence-files` and the spans would leak into the stacked layout. */
  .relations-interlude .measurement-thesis,
  .relations-interlude .thesis-note,
  .relations-interlude .relations-purpose,
  .relations-interlude .plate,
  .relations-interlude .measurement-boundary,
  .base#base .quiet-reference,
  .base#base .baseline-intro,
  .base#base .baseline-illustration,
  .base#base .method-detail,
  .base#base .base-foot,
  .output#output.demo-invitation .output-lede,
  .output#output.demo-invitation .output-aside,
  .evidence-inner .evidence-head,
  .evidence-inner .evidence-report,
  .evidence-inner .evidence-files{grid-column:1/-1;grid-row:auto}
  .base#base .base-mid{display:block}
  .base#base .baseline-illustration{align-self:auto}
}

/* ---- reduced motion -----------------------------------------------------
   The scroll stages become ordinary flow and .sticky carries the gutter as
   padding, so the hero's children are relatively positioned. `left` on a
   relative box is an offset from its static position, not a page origin, so
   these must go back to auto or the hero would be indented twice. */
@media (prefers-reduced-motion:reduce){
  .title{left:auto;width:100%}
  .cap.l{left:auto}
  .cap.r{right:auto}
}