/* Shared by all seven stage pages. Extracted verbatim from the seven inline
   <style> blocks, which were byte-identical apart from the --stop line each page
   still sets for itself. */
body{font:400 23px/var(--leading-prose) var(--font-body)}
a{color:var(--ink-line)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ink-line);outline-offset:3px;border-radius:var(--radius)}

/* The same frame the module pages use (`modules.css:34`), so the two long-form shapes
   share one width: 1380px on a 1440 screen, which is the reference's own `.ccenter`. It was
   1180 with 40px gutters, and that 200px is where the prose column went. */
.wrap{max-width:1460px; width:calc(100% - 60px); margin:0 auto; padding:0 0 140px}
/* --sep is the gap between sections, so it goes above each one after the hero. On the hero,
   which has nothing above it, it opened every stage on 300px of empty band. Named by the hero
   rather than written `section + section`, because the stage nav sits between the hero and
   the section after it. */
section:not(.hero){padding-top:var(--sep)}
section.hero{padding-top:var(--sep-s)}
section{
  display:grid; grid-template-columns:200px 1fr; gap:0 48px;
  align-items:start;
}
/* A grid item's automatic minimum size is its min-content width, so a `1fr` track cannot
   shrink below the longest unbreakable thing inside it however narrow the screen gets. On a
   390px phone that floored this track at 434px against a 346px container and pushed the
   directory and door two sideways — found by M4 once it swept widths instead of sampling one.

   Unconditional rather than inside the narrow at-rule, because it can only ever let a track
   shrink to its container and never widen one: above the width where the floor bites, the
   container is already the larger of the two and this changes nothing. */
section > *{min-width:0}
.rail{
  font:500 13px/1.5 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted);
  padding-top:10px;
}
/* ADR-001 decision 7. The reference's .article: two columns swapping sides each section,
   column two taking what was never prose to begin with -- the pull quote, the source note,
   the drawing. Grids and card decks span both; they are already not prose.

   Not 50/50, which is where this went wrong. Theirs is 650 and 650 because it sits at the
   full width of their .ccenter and both columns hold an argument. Ours sits inside the
   200px rail's `1fr`, so an even split halved an already-halved track: the prose column
   measured 386px, 34 characters at 23px, against the 52 that ADR-001 decision 5 specifies
   and the 45 that is the floor anyone gives. It was capped at var(--measure) and never
   reached it, which is why nothing caught it.

   The prose column is now var(--measure) outright and the apparatus takes the rest: 600
   and 452 inside the wider frame above. The measure is the number that has to hold, so it
   is stated rather than derived. */
.body{
  display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);
  gap:0 80px;align-items:start;
}
.body > *{grid-column:1;max-width:var(--measure)}
.body > :is(h2,.three,.helps,.spine,nav,.next,.tier,.act,.herotext,.mk,table){
  grid-column:1 / -1;max-width:none;
}
/* The span-both exceptions are containers: a card grid, a tier, a next-page card. The box
   wants the width; the sentences inside it do not. A paragraph in `.act` was setting at
   972px — about 100 characters, where W2 put the floor at 45 and the ceiling at 75 — and
   nothing caught it because the harness only asks whether a column is too narrow. Cap the
   prose, not the box, so the instruction lists and the meta chips keep the room they were
   given. `.next .q` stays uncapped: at 34px the same box is about 68 characters. */
:is(.act,.tier) > :is(p,ul.plain), .next > .why{max-width:var(--measure)}
.body > :is(.pull,.aside,.srcnote,.obit,.evidence,figure){grid-column:2}
/* The swap has to move the track, not just the child: prose in column two of an
   asymmetric grid would be the 452px one. */
section:nth-of-type(even) .body{grid-template-columns:minmax(0,1fr) minmax(0,var(--measure))}
section:nth-of-type(even) .body > *{grid-column:2}
section:nth-of-type(even) .body > :is(h2,.three,.helps,.spine,nav,.next,.tier,.act,.herotext,.mk,table){grid-column:1 / -1}
section:nth-of-type(even) .body > :is(.pull,.aside,.srcnote,.obit,.evidence,figure){grid-column:1}

/* The second column goes at 1250, not at 900. A stated measure plus an apparatus column
   plus the 200px rail need 1288px of viewport to all be themselves; below that the split
   was taking the width out of the prose, which at 1000px meant a 306px column and 27
   characters. It collapses where it stops fitting rather than where it stops rendering. */
@media(max-width:1250px){
  .body,section:nth-of-type(even) .body{grid-template-columns:1fr}
  .body > *,.body > :is(.pull,.aside,.srcnote,.obit,.evidence,figure),
  section:nth-of-type(even) .body > *,
  section:nth-of-type(even) .body > :is(.pull,.aside,.srcnote,.obit,.evidence,figure){grid-column:1}
}
/* ---------- the hero band ----------
   The reference gives an article page the whole viewport in one of seven colours, so a
   reader who cannot recall a section name still recognizes "the yellow one". Ours had the
   ramp only as svg fills and a 4px spine — too little surface to recognize anything by.
   The band is the hero section, full-bleed: at 1440x900 that is 896px of one colour under
   the provenance strip, which is the whole first screen. It stops at the hero's bottom
   edge rather than running the page, so body text, links and captions stay on white where
   all three inks are safe, and print and reduced-contrast never have to deal with a
   colour field under running prose.
   The bleed is a pseudo-element pulled to 100vw. 100vw counts the classic scrollbar that
   clientWidth does not, so on a platform that has one this overhangs by half a scrollbar
   at each end; overflow-x:clip on the body cuts it at the visible edge. clip rather than
   hidden, because hidden would make the body a scroll container and .upnav's sticky would
   then stick to the body instead of the viewport. */
body{overflow-x:clip}
section.hero{position:relative}
section.hero::before{
  content:''; position:absolute; z-index:-1;
  inset:0 calc(50% - 50vw);
  background:var(--stop);
}
/* --muted clears neither the 4.5 floor nor the 3:1 one on any stop (2.67 at worst), so
   the two things that sat on it in the hero move up: the stage number and the act labels
   are 13px and take --ink, the deck is 28px display and so is large text, which --ink-line
   clears at 3.12 while keeping the step below the title. The rail's own chips carry a
   --raised background of their own and are unaffected. Ratios in tokens.css. */
.hero .stagenum,.hero .rail .actlabel{color:var(--ink)}
.hero .deck{color:var(--ink-line)}
/* Rule 26: on a phone the stage's first action comes before the deck, so it is on the first
   screen. Only where the rail stacks above the text: beside the rail it made the text column
   150 to 193px taller than the stage list (M10). On a stop the link takes --ink, since
   --ink-line is 3.12 there and this is 23px; the block and its padding make the target 44px
   or more. */
.hero .first{margin:24px 0 28px; font:500 23px/var(--leading-prose) var(--font-body)}
.hero .first .k{display:block; color:var(--ink); margin-bottom:2px}
.hero .first a{display:block; padding-block:7px; color:var(--ink); text-wrap:balance}
/* --ink-line is 3.12:1 on stop 01; --ink clears 4.5 on every stop, as the hatch ring does. */
.hero .first a:focus-visible{outline-color:var(--ink)}
@media (min-width:821px){ .hero .first{display:none} }

/* The stage's own mark sits beside the title and deck, in the space the measure leaves to
   their right, centred in the height of the hero. The column stretches to the rail's height,
   so on stage 04, whose text is the shortest, the mark is what the rail is measured against:
   the rail must stay within 120px of it (M10), which is what holds the stage list short
   (REVIEW-2026-09-13 §44b). Where the column is too narrow for both, the mark wraps under
   the text.
   The height is stated outright: a percentage height inside an auto-height parent is
   indefinite, and the svg silently falls back to sizing off its width. */
section.hero{align-items:stretch}
section.hero .body{
  max-width:none; display:flex; flex-wrap:wrap; gap:36px 48px;
}
.hero .herotext{flex:0 1 var(--measure); align-self:flex-start}
.hero .mk{flex:1 1 280px; max-width:520px; height:260px; margin-left:auto; align-self:center}
.hero .mk svg{display:block; width:100%; height:100%; overflow:visible}
/* Each of the seven marks carries its own tight viewBox so the drawing fills the well,
   which means a stroke stated in user units is scaled by a different factor on every
   page: 2.5 units rendered at 4.71px on stage 01 and 8.23px on stage 04, a 1.75x spread
   across a set meant to read as one hand. non-scaling-stroke evaluates the width in
   viewport space instead, so the number below is the rendered width and the seven now
   match whatever their viewBoxes do. 3.2px is the weight the rest of the drawing system
   already uses: the Fig wells render at 2.89px on a 232px square and the door marks at
   1.37px on a 110px one, both a shade over 1.2 percent of the drawing. */
.hero .mk :is(.a,.s){stroke-width:3.2px; vector-effect:non-scaling-stroke}
/* The solid halves were filled with the stop, which on a ground of the stop is an
   invisible shape inside an outline. On the band they invert: the fill is the page's
   white and the drawing reads as cut out of the colour. */
.hero .mk .a{fill:var(--ground); stroke:var(--ink-line)}
.hero .mk .s{fill:none; stroke:var(--ink-line); stroke-linecap:round; stroke-linejoin:round}
/* Beside a 600px measure a 180px mark needs 1136px of viewport. Below that, until the rail
   folds at 820, it wrapped under the text and left the band beside the stage list empty
   for up to 322px (M10), so there it goes. */
@media (max-width:1250px){
  .hero .mk{height:190px; flex-basis:180px}
}
@media (min-width:821px) and (max-width:1135px){
  .hero .mk{display:none}
}
h1{
  font:500 clamp(48px,8vw,72px)/1.02 var(--font-display);
  margin:0 0 4px; letter-spacing:var(--track-display); text-wrap:balance;
}
/* At 48px on a 320 screen the stage 02 and 07 titles ended on one word, and 07 ran past the
   six lines balance will even out. 44px, the door h1's cap, is the largest size that clears both. */
@media (max-width:359px){ h1{font-size:44px} }
h2{
  font:500 41px/1.25 var(--font-display); margin:0 0 20px;
  letter-spacing:var(--track-display); text-wrap:balance;
}
h3{
  font:700 13px/1.4 var(--font-body); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-line); margin:0 0 10px;
}
p{margin:0 0 20px}
.deck{font:400 28px/1.55 var(--font-display); color:var(--muted); margin-bottom:0}
.stagenum{
  font:500 13px/1 var(--font-mono); text-transform:uppercase;
  color:var(--muted); letter-spacing:var(--track-label); margin-bottom:22px;
}

/* the arc, as a persistent locator */
.railarc{list-style:none; margin:0; padding:0}
.actlabel{
  display:flex; gap:10px;
  font:500 13px/1.4 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted);
  margin:12px 0 4px; padding-left:2px;
}
.actlabel:first-child{margin-top:0}
/* The child combinator matters: without it the rule also caught the numeral's own span, which
   took a second padding and border and cost the title 26px of a 200px rail. */
.railarc li > :is(a,span){
  display:flex; gap:8px; align-items:baseline;
  padding:5px 8px; margin-bottom:-1px;
  border:1px solid var(--rule); background:var(--raised);
  text-decoration:none; color:var(--muted);
  /* The `font` shorthand resets the font properties and line-height but not tracking or
     case, so these 17px body-font links inherited .rail's letter-spacing and capitals, both
     meant for 13px mono labels. Set in capitals the titles ran to three lines. */
  font:500 17px/1.3 var(--font-body); letter-spacing:normal; text-transform:none; text-wrap:balance;
  transition:background var(--t-micro) var(--ease-quick), color var(--t-micro) var(--ease-quick);
}
.railarc li a:hover{background:var(--raised); color:var(--ink)}
/* The entries overlap by their 1px border, so the next one painted over the bottom of the ring. */
.railarc li > a:focus-visible{position:relative; z-index:1}
.railarc li .n{
  font:500 13px/1 var(--font-mono);
  color:var(--muted); min-width:18px;
}
.railarc li.here > span{
  background:var(--ink-line); border-color:var(--ink-line); color:var(--ground);
  font-weight:700;
}
.railarc li.here .n{color:var(--ground); opacity:.75}

/* On a phone the menu sat above the stage's heading and pushed it most of a screen down, so
   there it folds to one line that opens. Where the rail has a column of its own it is always
   open. A browser that cannot style a closed <details> keeps the one line at every width. */
.stagemenu > summary{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--raised);
  font:500 17px/1.3 var(--font-body); letter-spacing:normal; text-transform:none;
  color:var(--ink); cursor:pointer; list-style:none;
}
.stagemenu > summary::-webkit-details-marker{display:none}
.stagemenu > summary::after{content:"+"; margin-left:auto; font:500 17px/1 var(--font-mono)}
.stagemenu[open] > summary::after{content:"\2212"}
.stagemenu > summary:focus-visible{outline:2px solid var(--ink-line); outline-offset:3px}
.stagemenu[open] > summary{margin-bottom:16px}
.stagemenu > summary + .actlabel{margin-top:0}
@media (min-width:821px){
  @supports selector(::details-content){
    .stagemenu > summary{display:none}
    .stagemenu::details-content{content-visibility:visible; display:block}
  }
}

.three{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px; margin:0 0 8px; max-width:none;
}
.three p{margin:0}
.three .lede{font:500 26px/1.4 var(--font-display); color:var(--ink); margin-bottom:8px}
/* The three column heads open the page, so they are level two: what they head is a
   peer of every other section on it. The label look the columns were built around
   is appearance, not structure, so it stays. */
.three h2{
  font:700 13px/1.4 var(--font-body); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-line); margin:0 0 10px;
}

.pull{
  border-left:3px solid var(--ink-line); background:var(--raised);
  padding:24px 28px; margin:0 0 26px;
}
.pull p{margin:0; font:400 30px/1.45 var(--font-display)}
.pull p + p{margin-top:14px; font:400 23px/var(--leading-prose) var(--font-body); color:var(--muted)}

.aside{
  border-left:3px solid var(--ink-line); background:var(--raised);
  padding:20px 24px; margin:0 0 26px;
}
.aside h3{color:var(--ink)}
.aside p{margin:0; color:var(--muted); font-size:23px}


.next{
  border:1px solid var(--ink-line); padding:26px 28px; margin-top:6px;
  display:block; text-decoration:none; color:inherit; background:var(--raised);
  transition:background var(--t-micro) var(--ease-quick);
}
.next:hover{background:var(--ground)}
.next .k{
  font:500 13px/1.4 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-line);
}
.next .q{font:500 34px/1.28 var(--font-display); margin:8px 0 10px; color:var(--ink)}
.next .why{margin:0; color:var(--muted); font-size:23px}

.helps{margin:0 0 8px}
.tier{margin:0 0 34px}
.tier > h3{margin-bottom:4px}
.tier > .tsub{color:var(--muted); font-size:17px; margin:0 0 18px}
.tier.limited > h3{color:var(--ink)}
.act{border-top:1px solid var(--rule); padding:18px 0 0; margin:0 0 18px}
.act:last-child{margin-bottom:0}
/* The organization names under "Who can help" are level three, not four: they sit
   directly under that section's h2. They keep the h4 look they were built with. */
.act :is(h3,h4){
  font:500 26px/1.35 var(--font-display); margin:0 0 8px; color:var(--ink);
  letter-spacing:normal; text-transform:none;
}
.meta{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin:0 0 12px;
}
.meta span{
  font:500 13px/1 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase;
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:5px 8px; color:var(--muted); background:var(--raised);
}
.meta span.free{color:var(--ink-line); border-color:var(--ink-line)}
.act p{margin:0 0 10px; font-size:23px}
.act p:last-child{margin-bottom:0}
.act p b{font-weight:700; color:var(--ink)}
.act .not{color:var(--muted)}
.act ul.plain{margin:0 0 10px; padding-left:20px; font-size:23px}
.act ul.plain li{margin-bottom:7px}
.srcnote{color:var(--muted); font-size:17px; border-top:1px solid var(--rule); padding-top:18px; margin-top:26px}
.act .link{font:500 17px/1.5 var(--font-mono); word-break:break-word}
.howto{
  font:500 17px/1.6 var(--font-mono);
  background:var(--raised); border-left:2px solid var(--rule);
  padding:10px 14px; margin:0 0 12px; color:var(--muted);
  overflow-x:auto;
}
/* Four device paths in one box are four things of the same shape, which ADR-001 decision 3
   makes a list. The box keeps .howto's own padding, so no marker and no extra indent. */
ul.howto{list-style:none}
ul.howto li + li{margin-top:8px}
.obit{
  border:1px solid var(--ink-line); border-left-width:8px; border-left-color:var(--stop); background:var(--raised);
  padding:26px 28px; margin:30px 0 0;
}
.obit h3{color:var(--ink)}
.obit p{margin:0 0 14px; font-size:23px}
.obit p:first-of-type{font:400 27px/1.45 var(--font-display); color:var(--ink)}
.obit p:last-child{margin-bottom:0}

@media (max-width:820px){
  .wrap{width:calc(100% - 44px); padding:0 0 90px}
  section{grid-template-columns:1fr; gap:0}
  section:not(.hero){padding-top:64px}
  .rail{padding-top:0; margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}
/* The spine. The stage before and the stage after, on every stage page, so the seven are
   one document read in order rather than seven pages reached only from the explorer.
   Parcours rule 5 forbids a hairline around anything clickable, so the edge is a filled
   bar in the destination stage's own stop colour: the link is already the colour of the
   mark it opens onto. */
.spine{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.spine a{
  grid-column:var(--col); display:block; text-decoration:none; color:inherit;
  background:var(--raised); padding:24px 26px 26px; position:relative;
  transition:transform var(--t-micro) var(--ease-quick);
}
.spine a::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--to)}
.spine .bck{--col:1}
.spine .fwd{--col:2}
.spine a:hover{transform:translateY(-2px)}
/* The arc has two ends. Rather than drop the missing half, which leaves a nav whose
   aria-label promises two things and delivers one, the boundary is stated. It is a div,
   so it is not in the tab order and does not announce as a link, and it carries no lift
   and no colour bar because both are how this page says "clickable". Its ground is a
   non-text element and clears 3:1 on its own. */
.spine .edge{
  grid-column:var(--col); display:block; padding:24px 26px 26px;
  background:var(--ground); box-shadow:inset 0 0 0 1px var(--rule);
}
.spine .edge .t{color:var(--ink-line)}

.spine .k{
  display:block; font:500 13px/1.4 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-line);
}
.spine .t{display:block; font:500 34px/1.28 var(--font-display); margin:8px 0 6px; color:var(--ink)}
.spine .d{display:block; font:400 23px/1.5 var(--font-body); color:var(--muted)}
@media (max-width:1250px){.spine{grid-template-columns:1fr} .spine :is(a,.edge){grid-column:1}}
@media (prefers-reduced-motion:reduce){.spine a{transition:none} .spine a:hover{transform:none}}
.hero .stagenum{view-transition-name:stage-num}
.hero h1{view-transition-name:stage-title}
.hero .deck{view-transition-name:stage-deck}
/* Following the spine, the name of the next stage is already on screen, at the foot of the
   page. It is that word, not the headline above it, that should become the next headline —
   so on a spine click the hero hands its three names to the clicked link and the title
   travels from the footer up into the masthead. Two elements may not share a name, hence
   the handover rather than a second set. */
html.viaspine .hero .stagenum,
html.viaspine .hero h1,
html.viaspine .hero .deck{view-transition-name:none}