/* The list, which is the one piece of reading vocabulary every page needs and no page
   owned. It lived in stage.css, so the seven stage pages had it and the module pages
   (the home page, how-money-leaves) did not, which is why those two kept turning three
   things of the same shape into a sentence instead of a list. ADR-001 decision 3 asks
   for the list; this is where it lives so both worlds can have it.
   Loaded by Base on every page. .act overrides the spacing in stage.css. */
/* Capped because a list is reading, not apparatus. stage.css caps the copy inside .act and
   .tier; nothing capped this one, so on how-money-leaves a two-item list in a loud module
   ran to 1220px and set its longest line at 105 characters, where W2 put the ceiling at 75.
   Only lists already wider than the measure move; every list inside a column is untouched. */
ul.plain{margin:0 0 22px; padding-left:20px; max-width:var(--measure)}
ul.plain li{margin-bottom:11px}
ul.plain li b{font-weight:700}

/* --- m-term: the words that decide whether money comes back ------------------------
   Seven terms gate a money decision on this site, and a reader meets them at the worst
   moment. The treatment is a <details> placed after the block that first uses the word:
   it expands in place, needs no JavaScript, and the browser gives it a keyboard and touch
   affordance we would otherwise have to build and get wrong.

   The gloss is in the <summary>, not behind it. A definition a reader has to click for is
   a definition most readers never see, so the closed state already answers the question
   and the open state only qualifies it. That is also why print does not need to force
   these open: the answer is on the line that prints either way.

   Sized at the 23px prose floor rather than the 17px apparatus tier. This is the sentence
   the whole page turns on for somebody who did not know the word, so it is not apparatus.
   Leading is 1.5, which is the value W8 collapses every 23px rule onto, so this rule adds
   no eighth leading to the count.

   Parcours: fill only. The left rule is --ink-line because structure is ink, and the
   ground is --raised, which P9 holds at 4.5:1 against --ink. */
.m-term{
  background:var(--raised); border-left:3px solid var(--ink-line);
  margin:22px 0; padding:14px 20px; max-width:var(--measure);
}
.m-term summary{
  position:relative; padding-right:34px; cursor:pointer;
  font-size:23px; line-height:var(--leading-prose); color:var(--ink);
  list-style:none;  /* Firefox. Safari needs the -webkit- pseudo below. */
}
.m-term summary::-webkit-details-marker{display:none}
.m-term summary:focus-visible{outline:2px solid var(--ink-line); outline-offset:3px}
.m-term summary b{font-weight:700}
.m-term .gloss{color:var(--ink-line)}

/* The state is announced by <details> itself; this is the sighted half of the same thing,
   and it is a glyph rather than a colour so it survives forced-colors. */
.m-term summary::after{
  content:'+'; position:absolute; right:0; top:0;
  font-family:var(--font-mono); color:var(--ink-line);
}
.m-term[open] summary::after{content:'\2212'}

/* `summary + p` rather than a bare descendant, because Astro emits a page's own styles
   into a <style> block after these linked sheets. `.act p`, `.worry p` and `.route p` all
   tie this on specificity and used to win on source order alone, which cost five of the
   twenty blocks the gap between the gloss and the body. Two elements to their one settles
   it wherever the block is placed. */
.m-term summary + p{
  font-size:23px; line-height:var(--leading-prose); color:var(--ink);
  margin:.55em 0 0; max-width:var(--measure);
}

/* ---------- the page's lag against the wheel ----------
   The reference's substrate transforms every marked element by the scroll position itself,
   and `delay` is an extra offset added on top of that position: currentspeed * delay * -500,
   where currentspeed is the same viewport-width-normalised velocity we publish as
   --scroll-acc. Because the offset is additive and separable from the position, it ports
   onto a natively scrolled page unchanged - which is the whole reason we can have this
   without taking their body{overflow:hidden} and losing the scrollbar with it.

   Theirs marks four to nine elements a page: two title lines and seven image wrappers. Ours
   marks the drawings only, and the constant is theirs untouched. The titles are left still
   on purpose, and the reason is typography rather than nerve: their marked blocks sit in a
   magazine layout with hundreds of pixels of air, ours are running prose where a head sits
   12px above its paragraph and an h1 28px above its standfirst. Measured at their constant,
   a heading lag of one crosses that gap on the first hard spin and prints the head over the
   body on every page type. A drawing has 106px of its own cell to move inside and crosses
   nothing, which is why it is the one element here that can carry their number as written.

   So this is smaller than their page, and it is smaller for a reason that is not fixable by
   tuning: the mechanism is identical, the canvas is not. Widening the leading enough to
   carry a heading lag would cost more than the motion is worth to a reader over 75. */
@media (prefers-reduced-motion:no-preference){
  .fig{transform:translate3d(0, calc(var(--scroll-acc,0) * var(--lag,1) * 500px), 0)}
}

/* Design 1: a phone number that breaks at a hyphen reads as two numbers. The directory had this
   for its own lists only; every page with a tel: link needs it. */
a[href^="tel:"]{white-space:nowrap}