/* The door pages' list of their own steps, and the tiles to the other doors, which used to
   hold its place at the top and now close the page. The list is set like the front page's
   full index, since it is the same kind of thing: links a reader already has the words for. */
.onpage .k{
  font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.onpage ol{list-style:none; margin:0; padding:0}
.onpage li{border-top:1px solid var(--rule)}
.onpage li:last-child{border-bottom:1px solid var(--rule)}
.onpage a{
  display:block; padding:9px 0; font:400 17px/1.35 var(--font-body);
  color:var(--ink-line); text-decoration:none;
}
.onpage a:hover{color:var(--ink); text-decoration-line:underline; text-underline-offset:4px}
.onpage a:focus-visible{outline:2px solid var(--ink-line); outline-offset:2px; border-radius:var(--radius)}

.doorsfoot{max-width:360px; margin:var(--sep-s) 0}
.doorsfoot h2{
  font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}

/* A door's hero is the card the reader clicked, opened (DESIGN_SYSTEM, "The door hero";
   REVIEW-2026-09-13 §44c). The band is the card's stop, number and drawing, full-bleed as the
   stage band is. Under it the steps are the summary, in one column read top to bottom with the
   card's spine, never in columns that read across; beside them, the standfirst and the two
   lines the list cannot say. The list and that column are both children of .top, so the
   geometry check's M10 holds one to within 120px of the other. */
.wrap > .top.door{
  display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:0 64px;
  align-items:start;
}
.door > .band{
  grid-column:1 / -1; position:relative;
  display:grid; grid-template-columns:46px minmax(0,1fr) 190px; gap:6px 28px;
  grid-template-areas:"num eyebrow mk" "num h1 mk"; align-items:end;
  padding-block:26px; margin-bottom:28px;
}
.door > .band::before{
  content:''; position:absolute; z-index:-1;
  inset:0 calc(50% - 50vw);
  background:var(--stop);
}
.door > .band > .num{grid-area:num; align-self:start; margin:0}
/* --muted is not usable on a stop, so the label takes --ink, as the stage band's do. */
.door > .band > .eyebrow{
  grid-area:eyebrow; margin:0; font:500 13px/1.5 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink);
}
.door > .band > h1{
  grid-area:h1; align-self:start; margin:0;
  font:500 clamp(34px,3.9vw,44px)/1.1 var(--font-display);
  letter-spacing:var(--track-display); text-wrap:balance;
}
.door > .band > .mk{grid-area:mk; align-self:center; height:140px}
.door .mk svg{display:block; width:100%; height:100%; overflow:visible}
.door .mk .a{fill:var(--ground); stroke:var(--ink-line); stroke-width:2.5}
.door .mk .s{fill:none; stroke:var(--ink-line); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}

.door > .onpage{--disc:30px}
.door > .onpage > ol{border-left:13px solid var(--stop)}
.door > .onpage li:first-child{border-top:0}
.door > .onpage li:last-child{border-bottom:0}
.door > .onpage a{
  display:grid; grid-template-columns:var(--disc) minmax(0,1fr); gap:16px; align-items:start;
  padding:3px 0 3px 16px; font:400 17px/1.3 var(--font-body);
}
/* Level with a row's first 22px line, not centred on the whole row, which put it 11px low
   beside a wrapped one. The text drops 4px to meet the disc's centre, which also centres a
   one-line row; padding below as well would add 4px more to every wrapped row. */
.door > .onpage a > span{padding-top:4px; text-wrap:pretty}
.door > .onpage .num:empty{border-color:transparent}

.door > .side{display:flex; flex-direction:column; gap:16px; max-width:var(--measure-lead)}
/* Level with the first row's text, which its padding sets 4px down */
@media (min-width:1080px){ .door > .side{padding-top:4px} }
.door > .side > :is(p, dl){margin:0; font:400 23px/var(--leading-prose) var(--font-body); color:var(--ink); text-wrap:pretty}
/* Two plain lines, not a labelled box: the label runs into its sentence at the same size. */
.door > .side :is(dt, dd){display:inline; margin:0}
.door > .side dt{font-weight:700}
.door > .side dl > div + div{margin-top:16px}
.wrap > .top.door + .onward{margin-top:28px; max-width:var(--measure)}
/* The list is 560px from 1080 up, and the full measure ran 9px past its edge */
@media (min-width:1080px){ .wrap > .top.door + .onward{max-width:560px} }

/* Below 1080 the side column narrows under its 440px measure, its 23px lines multiply, and it
   ran up to 351px past the list's foot (M10), so it goes under the list. The list comes first:
   it is the first action, and rule 26 puts that before any explanation. Then the two lines,
   then the standfirst. */
@media (max-width:1079px){
  .wrap > .top.door{grid-template-columns:minmax(0,1fr)}
  .door > .onpage a{padding-block:7px}
  .door > .side{margin-top:28px}
  .door > .side > .standfirst{order:1}
}
/* Held to its 440px measure under a full-width list, it left up to 591px empty beside it, and
   332px at 820. In two equal columns the standfirst ended up to 244px above the two lines
   (REVIEW-2026-09-13 §44c, row 53). So Have ready takes the first column, How long and then the
   standfirst the second, each as wide as its share of the characters (DoorTop sets the shares).
   220px keeps a column from ending a line on one word at 740. The dl spans both columns as a
   subgrid; the standfirst sits over its empty cell, lifted so it can still be selected. The second
   row takes the slack, so the standfirst stays under How long, 28px down so the two lines read as a pair. */
@media (min-width:740px) and (max-width:1079px){
  .door > .side{
    max-width:none; display:grid; gap:16px 64px; grid-template-rows:auto 1fr;
    grid-template-columns:minmax(220px,var(--ready,1fr)) minmax(220px,var(--rest,1fr));
  }
  .door > .side > dl{grid-area:1 / 1 / 3 / 3; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid}
  .door > .side > dl > div:first-child{grid-area:1 / 1 / 3 / 2}
  .door > .side > dl > div + div{grid-area:1 / 2; margin-top:0}
  .door > .side > .standfirst{grid-area:2 / 2; margin-top:12px; position:relative; z-index:1}
}
@media (max-width:820px){
  .door > .band{
    grid-template-columns:46px minmax(0,1fr); grid-template-areas:"num mk" "eyebrow eyebrow" "h1 h1";
    padding-block:24px; margin-bottom:28px;
  }
  .door > .band > .mk{height:84px; width:112px; justify-self:end}
  .door > .band > .eyebrow{margin-top:14px}
}

/* One numeral for an order: the front page's disc, on a door's steps and the directory's first
   calls (DESIGN_SYSTEM, "One numeral for an order"). It hangs in a column of its own; baseline
   alignment sets "01" on the first line of the heading beside it, whatever that heading's size.
   --disc sets the size, for a list whose rows are one line tall. The same disc carries a
   door's card number in its hero band. */
.step, .entry:has(> .cn){align-items:baseline}
:is(.step > .num, .entry > .cn, .onpage a > .num, .band > .num){
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:var(--disc, 46px); height:var(--disc, 46px);
  border:1px solid var(--ink-line); border-radius:100%; background:var(--ground);
  font:500 17px/1 var(--font-mono); color:var(--ink); letter-spacing:normal;
}
/* On a phone only the heading sits beside the disc, and everything under it takes the full
   width: hung beside the whole step, the disc's column cost every paragraph 62px
   (REVIEW-2026-09-13 §44d, "Audited"). The body's children join the step's grid, so the heading
   takes the second column and the rest span both. div.body outranks each door's own
   .step .body, which comes later. Grid items never collapse margins, so each gap takes one
   margin, the larger, or it grew by up to 25px at 700 against 701 (§44d, "44e audited"): the
   bottom one, except above a module, a map or a subhead straight under its heading, whose
   top margin is the larger. The disc's negative margin keeps it from making a one-line
   heading's row taller than the heading.
   The heading drops to 1.2rem in its 280px column, where 1.5rem left headings on one word. */
@media (max-width:700px){
  .step > div.body{display:contents}
  .step > .num{margin-bottom:calc(-1 * var(--disc, 46px))}
  .step > .body > :not(.m, .geo, h3 + .subhead){margin-top:0}
  .step > .body > :has(+ :is(.m, .geo)), .step > .body > h3:has(+ .subhead){margin-bottom:0}
  .step > .body > :not(h3){grid-column:1 / -1}
  .step > .body > h3{font-size:1.2rem}
}

/* The gap between steps goes above each one but the first, which sits under its own heading. */
.chron > .step:first-of-type{margin-top:0}

/* Rule 27's reasoning under a step. Closed on screen, so the step reads as the thing to do
   and the why is one tap away; open on paper, where nothing can be tapped. The print half
   sits behind @supports because hiding the summary in an engine that cannot also open the
   content would print neither. */
.why > summary{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font:500 17px/1.3 var(--font-body); color:var(--ink-line); cursor:pointer; list-style:none;
  text-wrap:balance;
}
.why > summary::-webkit-details-marker{display:none}
.why > summary::after{content:"+"; font:500 17px/1 var(--font-mono)}
.why[open] > summary::after{content:"\2212"}
.why > summary:hover{text-decoration-line:underline; text-underline-offset:4px}
.why > summary:focus-visible{outline:2px solid var(--ink-line); outline-offset:3px; border-radius:var(--radius)}
.why > :not(summary){margin:8px 0 0}
@media print{ @supports selector(::details-content){
  .why > summary{display:none}
  .why::details-content{content-visibility:visible; display:block}
}}

/* The questions under a step, or the entries under a section: the same rows, set in from
   the left, so they read as part of the list above them rather than a second list. */
.onpage ol ol{padding-left:22px}
.onpage ol ol li:last-child{border-bottom:0}

/* On a page built from modules the list is a module of its own, and without a limit it
   would run the width of the page. */
.m.onpage{max-width:var(--measure)}