/* Where you are within the stage.

   The seven-stage arc in the hero rail says which stage you are in. Nothing said which
   part of the stage you were in, and a stage page runs to several screens, so the rail
   labels scrolled away and the reader was left with no position at all. This is the
   second half of that pair: it lists the stage's own sections and marks the one you are
   reading, the way the reference guide reveals the cards inside a phase when you open it.

   On a wide screen it is fixed in the same 200px column the rails use, and it appears only
   once the hero has scrolled away, so the arrival screen is unchanged. Narrower than the
   cascade breakpoint there is no column to sit in, so it flows inline under the hero and
   stays there. One element, two behaviours, because a second copy would put the section
   links in the document twice for a screen reader. */

.stagenav{margin:56px 0 0}
.stagenav .k{
  display:block; font:500 13px/1.5 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted);
  margin-bottom:14px;
}
/* Matches the slab on the section headers rather than a hairline, so the column and the
   headers it points at are set with the same device. */
.stagenav .k::after{
  content:""; display:block; height:8px; margin-top:10px;
  border-radius:var(--radius); background:var(--raised);
}
.stagenav ol{list-style:none; margin:0; padding:0}
.stagenav a{
  display:grid; grid-template-columns:10px 1fr; gap:0 10px; align-items:baseline;
  padding:6px 0; text-decoration:none; color:var(--muted);
  font:400 23px/1.35 var(--font-body);
}
.stagenav a:hover{color:var(--ink)}
.stagenav a:focus-visible{outline:2px solid var(--ink-line); outline-offset:2px; border-radius:var(--radius)}
.stagenav a::before{
  content:""; width:10px; height:10px; border-radius:var(--radius);
  background:transparent; transform:translateY(1px);
}
.stagenav a[aria-current]{color:var(--ink)}
.stagenav a[aria-current]::before{background:var(--stop)}

@media (min-width:1251px){
  .stagenav{
    position:fixed; top:calc(var(--bar) + 26px); width:200px; margin:0;
    left:var(--railx, 40px); z-index:40;
    opacity:0; pointer-events:none; transition:opacity var(--t-micro) var(--ease-quick);
  }
  .stagenav.on{opacity:1; pointer-events:auto}
  /* The list is the only thing that can outgrow a short viewport. */
  .stagenav ol{max-height:calc(100vh - var(--bar) - 120px); overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){
  .stagenav{transition:none}
}

/* A lighter-pages band runs the full width of the window, which on a wide screen puts it
   under the fixed list above, and the list has no fill of its own. The band is cut back to
   start halfway across the 48px gap, so the list always sits on white and the band still
   runs off the right edge. Cut with clip-path rather than a narrower border-image outset
   because the outset can only grow from the section's edge, and the section starts under
   the list. Every child of the section rests in the text column at this width; the only
   thing the clip ever trims is a section label's first letters while hatch.css slides it
   in from -10vw, so over a band the label appears from the band's edge. */
@media (min-width:1251px){
  main[data-shape="lighter"]:has(> .stagenav) > section:is(.l-tint, .l-raised){
    clip-path:inset(0 -100vmax 0 224px);
  }
}

/* The site foot keeps to the same two columns as the sections above it: the stage grid's
   48px gap rather than the foot's own 40, so its links start where the section text does;
   and above 1250px, where the left column is the section list and nothing else, the whole
   foot moves into the text column, label over links, as each section's header does. */
.wrap > .sitefoot{column-gap:48px}
@media (min-width:1251px){
  .wrap > .sitefoot{margin-left:248px; grid-template-columns:minmax(0,1fr); padding-top:14px}
}

/* The section header.

   It used to be a 12px mono caption with a hairline under it: the smallest type on a page
   whose section bodies open with a 30px h2, so the divider between two subjects was
   quieter than the subjects. This makes it a mark instead of a line, in the brand's own
   vocabulary (fill only, structure is ink): the same filled square the section list uses
   for "you are here", so the square in the margin and the square on the header are one
   object; then the label in full ink; then a slab that fills in the stop colour by how far
   down the page the section sits. The slab is set by stagenav.js and reads as plain
   background without it. */
.wrap > main > section:not(.hero) > .rail{
  display:flex; align-items:center; gap:0 14px;
  max-width:var(--measure); margin:0 0 34px; padding:0;
  font:500 17px/1 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink);
}
.wrap > main > section:not(.hero) > .rail::before{
  content:""; flex:none; width:12px; height:12px;
  border-radius:var(--radius); background:var(--stop);
}
.wrap > main > section:not(.hero) > .rail::after{
  content:""; flex:1 1 40px; min-width:40px; height:8px;
  border-radius:var(--radius); background:
    linear-gradient(to right, var(--stop) 0 var(--fill,0%), var(--raised) var(--fill,0%) 100%);
}

@media (min-width:1251px){
  /* With the section list living in the left column, that column becomes navigation and
     nothing else, and the header above moves into the text column with the copy it names.
     Everything in the section moves, not just the label, so the sources footer, which has
     no rail, does not fall back into column one. */
  .wrap > main > section:not(.hero) > *{grid-column:2}
}
@media (max-width:820px){
  .wrap > main > section:not(.hero) > .rail{margin-bottom:26px}
}