[data-chapter-hero]{
  --chapter-sequence-inset-x:clamp(18px,3vw,44px);
  --chapter-sequence-inset-y:clamp(18px,3vw,40px);
  position:relative;
}

/* ===========================================================================
   The wash · how one chapter becomes another
   ---------------------------------------------------------------------------
   Nothing slides. One chapter's color leaves the screen, the room is briefly
   the archive's own ground, the next chapter's color rises into it, the motif
   grows in the direction that motif actually runs, and the type arrives inside
   the late stage of that growth.

   FOUR MOVEMENTS, AND WHY THEY ARE IN THIS ORDER

   1 WASH OFF   The field canvas drains before the veil closes, so the last
                thing the reader watches leave is the chapter's color rather
                than the chapter's furniture. That is the whole difference
                between this and the curtain it replaces, which announced
                itself by sliding a colored panel across the page.
   2 GROUND     The veil is painted in the DESTINATION's ground, not the
                departing chapter's, so the surface the reader is left holding
                is already the one the next chapter is painted on. The document
                swap happens inside that moment and costs nothing to look at.
   3 WASH IN    The arrival cover clears. The destination's field is already
                running underneath it, so clearing the cover IS the color
                rising, and there is no second color animation to keep in sync.
   4 MOTIF, THEN TEXT
                The motif grows through a mask cut for its own geometry, and
                every chapter's is different because every chapter's motif is:

                  01 Frames        a closed ring behind the title
                                   -> swept round, from the top, like a shutter
                  02 Measurement   a sine and its cosine, symmetrical about the
                                   center of the field
                                   -> opens from that center, along the axis
                  03 Claims-makers a contour map banked on the right, rings
                                   nested around their summits
                                   -> rises out of the summits, outward
                  04 Money         one current entering at the left and
                                   dividing into four channels
                                   -> runs from the inlet, through the split
                  05 Summary       five strands falling to a single join
                                   -> falls with them, top to bottom
                  C  Sources       ten tributaries entering from every edge
                                   -> closes inward on the confluence

                The number, the title and the description then arrive while the
                last third of that growth is still happening, and the controls
                and the chapter chrome last of all. Overlapping them is
                deliberate: text held back until the motif had finished read as
                two consecutive arrivals rather than as one.

   TIMELINE JOINS THIS SYSTEM ONLY ON A RETURN. The first entry of a session
   has a loading page, because the archive has to be fetched and built, and
   that page is its transition: the wash stops at the ground and hands over to
   the loader, and no chapter color is ever shown. Every later entry carries
   html.timeline-returning instead, and timeline.html holds the ground until
   the records are rebuilt and then lifts it on this block's rise. See the
   timeline rules at the foot of this block.

   One registered property drives every mask, so a mask can be written as
   geometry rather than as a keyframe per chapter, and the animation is a single
   number ramp the compositor can hold.
   =========================================================================== */
@property --chapter-reveal{syntax:'<number>';inherits:true;initial-value:1}

:root{
  /* Every duration is scaled by one multiplier so the whole choreography can be
     run at half or quarter speed without restating a single number. */
  --chapter-wash-scale:1;
  --chapter-drain:calc(560ms * var(--chapter-wash-scale));
  --chapter-veil:calc(640ms * var(--chapter-wash-scale));
  --chapter-veil-delay:calc(120ms * var(--chapter-wash-scale));
  --chapter-rise:calc(1000ms * var(--chapter-wash-scale));
  --chapter-motif:calc(1800ms * var(--chapter-wash-scale));
  --chapter-motif-delay:calc(240ms * var(--chapter-wash-scale));
  --chapter-type:calc(640ms * var(--chapter-wash-scale));
  /* The type arrives INSIDE the late stage of the motif rather than after it.
     1360ms puts the number on screen at about two thirds of the motif's growth
     and lands the description as the last of the mask clears, so the reader
     watches one continuous arrival instead of two consecutive ones. */
  --chapter-type-delay:calc(1360ms * var(--chapter-wash-scale));
  --chapter-chrome-delay:calc(1900ms * var(--chapter-wash-scale));

  /* Two curves, because the wash asks two different things of its motion.

     The color is a dissolve and wants the ordinary slow-in slow-out.

     The motif is a GROWTH, and growth is the one thing an expo curve cannot
     express: an expo spends four fifths of its travel in the first third of its
     time, so however long the duration, the shape appears to snap into place
     and then sit still. This curve is close to linear through its middle (at
     half the time it is at .508 of the travel) with a soft entry and a long
     settle, so the mask crosses the motif at a readable rate for the whole of
     its length, which is what makes it read as something growing rather than
     something being switched on. */
  --chapter-wash-ease:cubic-bezier(.4,0,.35,1);
  --chapter-soft-ease:cubic-bezier(.45,0,.4,1);
  --chapter-grow-ease:cubic-bezier(.42,.2,.58,.82);
}

/* The ground the wash rests on. Both shipped themes resolve the inverted
   surface to the ground itself; only the legacy theme separates them, and the
   two chapters painted on it must not step through white on the way out. */
html:is(.measurement-arriving,.claims-arriving),
html[data-field-chapter='measurement'],html[data-field-chapter='claims-makers']{
  --chapter-wash-ground:var(--mhc-surface-inverted,var(--mhc-ground));
}

/* ---- 1 · the color leaves --------------------------------------------- */

.chapter-transition-veil{
  position:fixed;
  z-index:1000;
  inset:0;
  background:var(--chapter-veil-ground,var(--chapter-wash-ground,var(--mhc-ground)));
  opacity:0;
  pointer-events:none;
  transition:opacity var(--chapter-veil) var(--chapter-soft-ease) var(--chapter-veil-delay);
  will-change:opacity;
}
.chapter-transition-veil.is-active{opacity:1}
/* The field drains ahead of the veil, so the last thing the reader watches
   leave is the chapter's color rather than the chapter's furniture. */
html.chapter-transitioning .mhc-chapter-field,
html.chapter-transitioning .mhc-chapter-field-grain{
  opacity:0;
  transition:opacity var(--chapter-drain) var(--chapter-soft-ease);
}
html.chapter-transitioning{overflow:hidden;scrollbar-gutter:stable}
html.chapter-transitioning [data-chapter-pager] a,
html.chapter-transitioning .chapter-list a,
html.chapter-transitioning .mhc-chapter-list a{pointer-events:none}

/* ---- 2 · the ground, 3 · the color returns ----------------------------- */

html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving,.about-arriving)::before{
  content:'';
  position:fixed;
  z-index:1000;
  inset:0;
  background:var(--chapter-wash-ground,var(--mhc-ground));
  pointer-events:none;
  animation:chapter-wash-rise var(--chapter-rise) var(--chapter-wash-ease) both;
  will-change:opacity;
}
@keyframes chapter-wash-rise{from{opacity:1}to{opacity:0}}

/* ---- 4a · the motif, by its own geometry -------------------------------- */

/* Three ramps on one element, each with exactly two keyframes, because a CSS
   timing function is applied BETWEEN keyframes rather than across an animation:
   a single intermediate stop, even one that only touches opacity, cuts the
   easing of every property in the block in half and the motif arrives at two
   visibly different speeds. Splitting them costs nothing and keeps the growth
   on one curve for its whole length.

     reveal  the mask front, on the growth curve
     ink     a short linear fade, so a browser that will not composite the mask
             still shows the motif appearing rather than switching on
     settle  a little under two per cent of scale, resolving over the whole
             reveal. It is not meant to be seen as a movement; it is what stops
             a mask crossing a still drawing from reading as a wipe.

   Each chapter is named separately below. The route container carries all three
   of its chapters' heroes in one document, display:none between them, so a rule
   written for "any motif" would also drive two hidden ones. */
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) [data-chapter-motif],
html.summary-arriving .hero-motif,
html.claims-arriving .claims-hero-topography{
  animation:chapter-motif-reveal var(--chapter-motif) var(--chapter-grow-ease) var(--chapter-motif-delay) both,
            chapter-motif-ink calc(var(--chapter-motif) * .42) linear var(--chapter-motif-delay) both,
            chapter-motif-settle var(--chapter-motif) var(--chapter-grow-ease) var(--chapter-motif-delay) both;
  will-change:opacity,transform,mask-image;
}
html.summary-arriving [data-chapter-motif],
html.frames-arriving .hero-motif{animation:none}
@keyframes chapter-motif-reveal{from{--chapter-reveal:0}to{--chapter-reveal:1}}
@keyframes chapter-motif-ink{from{opacity:0}to{opacity:1}}
@keyframes chapter-motif-settle{from{transform:scale(1.018)}to{transform:none}}

/* EVERY FEATHER HERE IS WIDE ON PURPOSE. A narrow soft edge is a line crossing
   a drawing, and a line crossing a drawing is a wipe however slowly it travels.
   At these widths there is no edge to follow: a broad band of the motif is
   half-present at any instant, so the marks inside it arrive by strengthening
   rather than by being uncovered. The cost is that the mask has to run further
   to finish, which is why each ending shape below is larger than the box it
   covers. */

/* 01 Frames · a closed ring of twelve strands, centerd behind the title. Swept
   round from the top, so the loop closes the way a shutter closes. The trailing
   feather is a little over a fifth of the circle, which at this duration keeps
   roughly a second of the ring in partial ink at any moment. */
html.frames-arriving [data-chapter-motif]{
  -webkit-mask-image:conic-gradient(from -90deg at 50% 50%,#000 0deg,#000 calc(var(--chapter-reveal) * 360deg),transparent calc(var(--chapter-reveal) * 360deg + 78deg));
  mask-image:conic-gradient(from -90deg at 50% 50%,#000 0deg,#000 calc(var(--chapter-reveal) * 360deg),transparent calc(var(--chapter-reveal) * 360deg + 78deg));
}

/* 02 Measurement · one sine and its cosine, a quarter turn apart, symmetrical
   about the center of the field. Opens from that center, along the axis: the
   ellipse runs away horizontally far faster than it grows in height.

   Its opaque stop sits at 38% of its own width, so the box is only covered once
   that width reaches 132%, and the ending shape is sized from that rather than
   guessed. A shape that ends too large finishes the reveal a third of the way
   through the ramp and then holds a finished motif for the rest of it. */
html.measurement-arriving [data-chapter-motif]{
  -webkit-mask-image:radial-gradient(ellipse calc(var(--chapter-reveal) * 142%) calc(24% + var(--chapter-reveal) * 182%) at 50% 70%,#000 38%,transparent 100%);
  mask-image:radial-gradient(ellipse calc(var(--chapter-reveal) * 142%) calc(24% + var(--chapter-reveal) * 182%) at 50% 70%,#000 38%,transparent 100%);
}

/* 03 Claims-makers · a contour map banked on the right of the cover, its rings
   nested around four summits. The map's own extent puts its center at 92% of
   the width and just past half the height; the reveal grows from there, so the
   innermost rings are on screen before the shoreline that carries them.

   The radius is stated rather than taken from `farthest-corner`, and that is
   the whole difference between a reveal and a flash. This is the one motif that
   does not fill its own box: it occupies the right half and the left half is
   empty, so a corner-referenced circle has covered every ring it owns by the
   time it is half grown and spends the rest of the ramp crossing ground with
   nothing drawn on it. */
html.claims-arriving :is([data-chapter-motif],.claims-hero-topography){
  -webkit-mask-image:radial-gradient(circle calc(var(--chapter-reveal) * 170vmax) at 92% 52%,#000 34%,transparent 100%);
  mask-image:radial-gradient(circle calc(var(--chapter-reveal) * 170vmax) at 92% 52%,#000 34%,transparent 100%);
}

/* 04 Money · one current entering at the left, dividing a third of the way
   across into four channels that fan down and to the right. The mask runs the
   same course, on the current's own bearing: inlet, split, branches. */
html.money-arriving [data-chapter-motif]{
  -webkit-mask-image:linear-gradient(97deg,#000 calc(var(--chapter-reveal) * 192% - 76%),transparent calc(var(--chapter-reveal) * 192%));
  mask-image:linear-gradient(97deg,#000 calc(var(--chapter-reveal) * 192% - 76%),transparent calc(var(--chapter-reveal) * 192%));
}

/* 05 Summary · five strands entering above the frame and falling to a single
   join low on the left. The mask falls with them. */
html.summary-arriving .hero-motif{
  -webkit-mask-image:linear-gradient(184deg,#000 calc(var(--chapter-reveal) * 192% - 76%),transparent calc(var(--chapter-reveal) * 192%));
  mask-image:linear-gradient(184deg,#000 calc(var(--chapter-reveal) * 192% - 76%),transparent calc(var(--chapter-reveal) * 192%));
}

/* C Sources · ten tributaries entering from every edge of the frame and meeting
   left of center. The only motif here revealed inward: the hole closes on the
   confluence, which is the one place the drawing is about. */
html.sources-arriving [data-chapter-motif]{
  --chapter-close:calc((1 - var(--chapter-reveal)) * 100%);
  --chapter-close-feather:calc((1 - var(--chapter-reveal)) * 62%);
  -webkit-mask-image:radial-gradient(circle farthest-corner at 44% 50%,transparent var(--chapter-close),#000 calc(var(--chapter-close) + var(--chapter-close-feather)));
  mask-image:radial-gradient(circle farthest-corner at 44% 50%,transparent var(--chapter-close),#000 calc(var(--chapter-close) + var(--chapter-close-feather)));
}

@media(max-width:759px){
  /* Claims-makers is the one composition that moves rather than reflows: on a
     narrow screen its map sits low and centerd instead of banked right, so the
     summit the reveal grows from moves with it. */
  html.claims-arriving :is([data-chapter-motif],.claims-hero-topography){
    -webkit-mask-image:radial-gradient(circle calc(var(--chapter-reveal) * 170vmax) at 50% 84%,#000 34%,transparent 100%);
    mask-image:radial-gradient(circle calc(var(--chapter-reveal) * 170vmax) at 50% 84%,#000 34%,transparent 100%);
  }
}

/* ---- 4b · then the text ------------------------------------------------- */

html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) :is([data-hero-type-number],[data-hero-type-title],[data-hero-type-description],[data-chapter-hero-title],[data-chapter-hero-copy]){
  animation:chapter-type-arrive var(--chapter-type) var(--chapter-wash-ease) var(--chapter-type-delay) both;
}
/* A number, a name, a sentence: three beats, in the order they are read. */
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) [data-hero-type-title],
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) [data-chapter-hero-title]{
  animation-delay:calc(var(--chapter-type-delay) + 150ms * var(--chapter-wash-scale));
}
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) [data-hero-type-description],
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) [data-chapter-hero-copy]{
  animation-delay:calc(var(--chapter-type-delay) + 330ms * var(--chapter-wash-scale));
}
@keyframes chapter-type-arrive{
  from{opacity:0;transform:translate3d(0,9px,0)}
  to{opacity:1;transform:none}
}

/* The cover's own controls come last of all, because they belong to the
   chapter being entered and have nothing to say until it has arrived. */
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) :is([data-hero-continue],.woven-motion-toggle,.motion-toggle){
  animation:chapter-chrome-arrive var(--chapter-type) var(--chapter-soft-ease) var(--chapter-chrome-delay) both;
}
@keyframes chapter-chrome-arrive{from{opacity:0}to{opacity:1}}

/* The archive's own standing chrome is not a chapter's to withdraw. The rail,
   the menu control and the chapter's section dock used to be held at nothing
   for the whole 1900ms chrome delay and then faded up, so the one piece of
   furniture that belongs to the reader rather than to either chapter blinked
   out and came back on every move. It sits above the veil already, so leaving
   it alone is all that persistence takes: the color changes underneath it and
   the menu bar stays exactly where the reader left it. The register's contents
   still change, because they name the chapter the reader is now in. */
html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving,.timeline-arriving,.about-arriving) :is(.archive-rail,.mhc-archive-rail,#menu-toggle,#mhc-menu-toggle,[data-chapter-sequence-dock]){
  animation:none!important;
  opacity:1;
}

/* ---- Timeline · the loading page is the transition ---------------------- */

/* No cover, no color, no motif reveal, no staged type. On the first entry
   Chapter 00 answers the arrival with its own loading page, and the veil raised
   on departure is held until that page is running so the still 0% capsule is
   never the thing the reader is shown first. A return has no loading page; its
   held ground is written in timeline.html against html.timeline-returning, and
   the hero under it keeps its own styling, which the rule below protects. */
html.timeline-arriving:not(.timeline-returning)::before{content:none}
html.timeline-arriving :is([data-chapter-motif],.hero-motif,[data-hero-type-number],[data-hero-type-title],[data-hero-type-description],[data-chapter-hero-title],[data-chapter-hero-copy],[data-hero-continue],.archive-rail,.mhc-archive-rail,#menu-toggle,#mhc-menu-toggle,[data-chapter-sequence-dock]){
  animation:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.chapter-transition-veil.is-loading-handoff{
  transition:opacity calc(420ms * var(--chapter-wash-scale)) var(--chapter-soft-ease);
  opacity:0;
}

/* ---- reduced motion ----------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  :root{--chapter-wash-scale:.34}
  html.chapter-transitioning .mhc-chapter-field,
  html.chapter-transitioning .mhc-chapter-field-grain{transition:none}
  .chapter-transition-veil{transition:opacity calc(140ms * var(--chapter-wash-scale) * 3) linear}
  html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving,.about-arriving)::before{
    animation:chapter-wash-rise calc(160ms) linear both;
  }
  html:is(.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving) :is([data-chapter-motif],.hero-motif,[data-hero-type-number],[data-hero-type-title],[data-hero-type-description],[data-chapter-hero-title],[data-chapter-hero-copy],[data-hero-continue],.woven-motion-toggle,.motion-toggle,.archive-rail,.mhc-archive-rail,#menu-toggle,#mhc-menu-toggle,[data-chapter-sequence-dock]),
  html.claims-arriving .claims-hero-topography{
    animation:none!important;
    transform:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}

/*
  The route drawer answers “where can I go?”; this terminal instrument answers
  the narrower reading question “what came before, and what comes next?”. It
  remains in document flow so neither the archive rail nor the pager can cover
  the conclusion, crisis-support copy, or footer at any viewport.

  ITS BACKPLATE IS TRANSLUCENT. The plate is still there, and so is every other
  thing about the instrument: its geometry, its type, its motion and its hover
  are the ones it has always had. What changed is what the plate is made of. It
  used to be painted in the float color at .9 falling to .68, which on a
  chapter field is not glass but a hole, because at that opacity nothing of the
  chapter survives the crossing. At .30 falling to .16 over a 20px blur the
  gradient passes through and arrives softened, which is what a plate laid on a
  colored room is supposed to do, and the instrument reads as resting on the
  chapter rather than as cut out of it.

  The three cells inside it lost their standing fills for the same reason and
  under the same rule: two of them tinted the plate, and the third, Method, held
  a solid accent that made one stop look like a different kind of control from
  its neighbours. All three now take color only as the wash under the cursor,
  and it is the destination's own color. Every chapter that ships a pager
  resolves to this, so the reader leaves all seven chapters through one door.
*/
.chapter-pager{
  --chapter-pager-edge:color-mix(in srgb,currentColor 22%,transparent);
  /* Each destination is drawn as its own control rather than as a region of the
     plate, so its outline is present at rest and only deepens under the cursor. */
  --chapter-pager-cell-edge:color-mix(in srgb,currentColor 20%,transparent);
  --chapter-pager-surface:linear-gradient(135deg,rgba(var(--mhc-float-rgb),.30),rgba(var(--mhc-float-rgb),.16));
  --chapter-pager-shadow:0 14px 36px rgba(var(--mhc-shadow-rgb),.10);
  --mhc-chapter-pager-lead:clamp(72px,9vw,132px);
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr);
  gap:8px;
  box-sizing:border-box;
  width:min(980px,100%);
  /* One lead for every chapter's close. The pager had been taking this space
     from whichever of two rules its markup happened to match, so a chapter
     whose nav carried chapter-next-block was given exactly twice the gap of one
     that did not, and which chapters those were had nothing to do with how they
     end: four carry the class and four do not. The larger figure is the one the
     component was drawn for, since the pager is a bordered card rather than a
     line of links and wants to sit clear of the last sentence, so it is the one
     that is kept and it is now stated once. */
  margin:var(--mhc-chapter-pager-lead) auto 0;
  padding:6px;
  border:1px solid var(--chapter-pager-edge)!important;
  border-radius:32px!important;
  background:var(--chapter-pager-surface)!important;
  color:inherit;
  box-shadow:var(--chapter-pager-shadow)!important;
  text-align:left;
  backdrop-filter:blur(20px) saturate(112%);
  -webkit-backdrop-filter:blur(20px) saturate(112%);
}
/* Four chapters close on a composition of their own and hold the pager inside
   it. Every number below is that composition's, and stays that composition's:
   the pager's width belongs to the chapter that drew it, and the crisis notice
   is placed as its sibling so that it inherits the box rather than asking the
   pager to leave it. */
.end-marker>div:has(>.chapter-pager){width:min(980px,100%)}
.after>.chapter-pager{grid-column:1/-1;margin-top:0}
.chapter-next-block.chapter-pager{width:min(980px,calc(100% - 36px))}
.chapter-pager>.chapter-pager__link--previous{grid-column:1;grid-row:1}
.chapter-pager>.chapter-pager__link--next{grid-column:3;grid-row:1}

.chapter-pager__link{
  --chapter-pager-color:var(--mhc-paper-deep);
  position:relative;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr);
  grid-template-areas:"icon copy";
  gap:12px!important;
  align-items:center;
  min-width:0;
  /* The cell holds one line now: the number and the name. The 88px floor was
     written for a three-line stack, and kept as a floor it would have left the
     type swimming in a card half of which was empty. */
  min-height:68px!important;
  padding:10px 14px!important;
  overflow:hidden;
  border:1px solid var(--chapter-pager-cell-edge)!important;
  border-radius:26px!important;
  /* THE TINT IS BACK, and it is back for the corner rather than for the color.
     Radius is only half of how round a shape looks: the other half is whether
     the corner is filled or merely traced. Stripping this tint left the 26px
     arc drawn as a 1px stroke and nothing inside it, and an outlined corner
     reads tighter than the identical corner filled, so the instrument lost its
     roundness without one geometric value changing. At .045 the chapter's
     gradient still passes through essentially undimmed; it is a tint, not a
     plate, and it exists so the cells read as the rounded tiles they are. */
  background:rgba(var(--mhc-on-plate-rgb),.045)!important;
  color:inherit!important;
  box-shadow:none!important;
  text-align:left;
  text-decoration:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .36s cubic-bezier(.16,1,.3,1)!important;
}
.chapter-pager__link[href^="timeline.html"]{--chapter-pager-color:var(--mhc-chapter-timeline-field)!important}
.chapter-pager__link[href^="frames.html"]{--chapter-pager-color:var(--mhc-chapter-frames-field)!important}
.chapter-pager__link[href^="measurement.html"]{--chapter-pager-color:var(--mhc-chapter-measurement-field)!important}
.chapter-pager__link[href^="claims-makers.html"]{--chapter-pager-color:var(--mhc-chapter-claims-field)!important}
.chapter-pager__link[href^="money.html"]{--chapter-pager-color:var(--mhc-chapter-money-field)!important}
.chapter-pager__link[href^="in-sum.html"]{--chapter-pager-color:var(--mhc-chapter-summary-field)!important}
.chapter-pager__link[href^="sources.html"]{--chapter-pager-color:var(--mhc-chapter-sources-field)!important}
.chapter-pager__link[href^="about.html"]{--chapter-pager-color:var(--mhc-chapter-about-field)!important}
/* The wash is the chapter's own color and nothing else: with the plate gone
   there is no white left under it, so it mixes toward transparent and the
   field keeps running through the cell the reader is pointing at. */
.chapter-pager__link::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:color-mix(in srgb,var(--chapter-pager-color) 32%,transparent);
  opacity:0;
  transform:scale(.92,.82);
  transform-origin:center;
  transition:opacity .18s ease,transform .46s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.chapter-pager__link--next{
  grid-template-columns:minmax(0,1fr) 46px;
  grid-template-areas:"copy icon";
  text-align:right;
}
.chapter-pager__link:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--chapter-pager-color) 54%,var(--chapter-pager-edge))!important;
  background:rgba(var(--mhc-on-plate-rgb),.075)!important;
  color:inherit!important;
  box-shadow:none!important;
  transform:translateY(-2px);
}
/* Under Lumen the cell keeps this hover, wash and lift included, and the
   light falls inside it in the chapter's own color. */
.chapter-pager__link{--mhc-lumen-hover:keep;--mhc-lumen-tint:var(--chapter-pager-color)}
.chapter-pager__link:is(:hover,:focus-visible)::before{opacity:.82;transform:scale(1)}
.chapter-pager__link:focus-visible{outline:2px solid currentColor!important;outline-offset:3px}
.chapter-pager__link:active{transform:translateY(1px) scale(.985)}

.chapter-pager__icon{
  grid-area:icon;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid color-mix(in srgb,currentColor 42%,transparent);
  border-radius:50%;
  background:rgba(var(--mhc-float-rgb),.18);
  transition:border-color .2s ease,background-color .2s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.chapter-pager__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.chapter-pager__link--previous:is(:hover,:focus-visible) .chapter-pager__icon{transform:translateX(-3px)}
.chapter-pager__link--next:is(:hover,:focus-visible) .chapter-pager__icon{transform:translateX(3px)}
.chapter-pager__copy{grid-area:copy;display:grid;min-width:0}
.chapter-pager__title{display:flex;align-items:baseline;gap:9px;min-width:0}
.chapter-pager__link--next .chapter-pager__title{justify-content:flex-end}
.chapter-pager__title b{flex:0 0 auto;font:500 10px/1 var(--mono,"Geist Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.chapter-pager__title strong{min-width:0;font-size:clamp(17px,1.55vw,21px);font-weight:400;line-height:1.05;letter-spacing:-.025em;overflow-wrap:anywhere}
/* THE SCOPE LINE, WHERE A CHAPTER HAS BEEN CLEARED TO CARRY IT. The cell was
   cut to one line because a three-line stack left it swimming; one supporting
   line is not that stack, and it is what tells a reader whether the chapter
   ahead is the one they want. It is drawn only where the router writes it, so
   a chapter still withholding it keeps the single-line cell exactly as before:
   the rule below is written against `:not(:empty)` rather than against the
   chapter, because the router already made that decision once. */
.chapter-pager__scope{display:none;margin-top:5px;font-size:13px;line-height:1.35;letter-spacing:-.012em;color:var(--mhc-on-paper-3);text-wrap:pretty}
.chapter-pager__scope:not(:empty){display:block}
.chapter-pager__link:has(.chapter-pager__scope:not(:empty)){min-height:86px!important}
.chapter-pager__link--next .chapter-pager__scope{text-align:right}
.chapter-pager__link[hidden]{display:none!important}

/* ===========================================================================
   The closing region · what sits under the pager
   ---------------------------------------------------------------------------
   Three things close a chapter, and until now each of them found its own edge:
   the pager at 980px, the crisis notice at the archive's full reading measure,
   and the footer at a third width on a plate of its own. Three left edges in
   150 vertical pixels read as three unrelated pages stacked, which is the last
   impression a chapter leaves. They resolve to one measure here.

   What separates them is no longer a change of surface but a change of weight:
   the pager is the instrument and carries the rules, the notice is the one
   object held clear of the ground, and the footer is the quietest thing on the
   page because the chapter is over and the reader is leaving.
   =========================================================================== */
/* ONE MEASURE, AND IT IS THE PAGER'S. The pager already resolved to 980px inset
   18px from whatever container it was handed, and that number is not restated
   here or altered: the notice and the footer are simply asked for the same
   thing. Where a chapter closes on a composition that insets its own contents,
   the notice goes INSIDE that composition rather than the pager being pulled
   out of it, because the pager's width is part of how each of those closings is
   drawn and is not this file's to change. */
:is(.support,.site-footer,.support~footer,.archive-credit){
  box-sizing:border-box;
  width:min(980px,calc(100% - 36px));
  margin-inline:auto;
}
/* INSIDE A CLOSING COMPOSITION the notice is a sibling of the pager and takes
   the pager's own box, so nothing has to be measured twice and the pager's
   width stays whatever that chapter drew it as. These containers center their
   contents and set their own text alignment; the notice opts out of both,
   because a paragraph a reader may be scanning under stress is read from a left
   edge like every other paragraph in the archive. The colophon under it opts
   out on the same terms and for the same reason: Timeline and Measurement inset
   their closing compositions, so a colophon left outside took the archive's
   own measure instead and closed the page on a left edge 38 and 40 pixels
   adrift of the two objects directly above it. */
/* The plate inside the notice is named on its own line rather than inside the
   list, because :is() takes the specificity of its heaviest argument and
   `.support>.support-in` was lending two classes to `.support` and
   `.archive-credit` as well, which is how this rule went on outranking the
   measure stated for those two below. */
:is(.end-marker,.after) :is(.support,.archive-credit),
:is(.end-marker,.after) .support>.support-in{
  width:100%;
  max-width:none;
  justify-self:stretch;
  text-align:start;
}
.after>.support{grid-column:1/-1}
.end-marker>div>.support{margin-top:0}

/* A CLOSING COMPOSITION MAY CAP ITS OWN TEXT, AND MUST NOT CAP THE REGION WITH
   IT. Measurement holds its closing statement in a 900px column, and the pager,
   the notice and the colophon were inheriting that column, so all three closed
   that chapter forty pixels inside the edge every other chapter closes on. They
   take the archive's own measure here and center themselves on the column
   instead of inside it. The center is the same center, which is why this
   resolves to Frames' left and right edges rather than to a fourth pair. */
.end-marker>div>:is(.chapter-pager,.support,.archive-credit){
  --closing-measure:min(980px,calc(100vw - var(--elastic-content-left,var(--mhc-archive-rail,76px)) - 36px));
  width:var(--closing-measure);
  max-width:none;
  margin-inline:calc((100% - var(--closing-measure)) / 2);
}

/* ONE RHYTHM, AND IT IS ALSO FRAMES'. Timeline and Sources set a row gap on the
   column that holds their closing statement, and the closing region was
   inheriting it on top of the spacing it states for itself, so the same three
   objects stood 26 pixels apart on four chapters and 50 apart on two. The
   column gives up its row gap and states the one space it still needs, which is
   the space under its own closing statement; the notice and the colophon then
   carry their own, as they do everywhere else. */
.end-marker>div{row-gap:0}
.end-marker>div>*+*{margin-block-start:var(--closing-statement-gap,26px)}
.end-marker>div>:is(.support,.archive-credit){margin-block-start:0}
/* The pager is not another statement in that composition. It is the way out of
   the chapter, and it had been taking the closing statement's gap here while
   standing a full lead clear of the last sentence on the five chapters that do
   not close on an end-marker, which put the same control 26 pixels under the
   final line in three rooms and 92 under it in five. It takes the lead in both
   places now, and the statements around it keep their own rhythm. */
.end-marker>div>.chapter-pager{margin-block-start:var(--mhc-chapter-pager-lead)}

.support{
  padding:clamp(18px,2.2vw,26px) 0 0;
  border:0;
  /* The routed three used to paint a band here. The notice carries its own
     surface now, so a second one behind it would only be a wider plate. */
  background:none;
}
/* The footer's .wrap is a container around the footer's copy and gives up its
   gutter so that copy starts on the shared edge. The notice's .wrap is not a
   container: on the routed three it IS the plate, `class="wrap support-in"` on
   one element, so zeroing its inline padding here did not remove a gutter, it
   removed the plate's own inset and pushed the sentence flush against the
   rounded edge it sits inside. The two cases are separated. */
:is(.support,.support~footer,.site-footer)>.wrap{max-width:none;margin-inline:0}
:is(.support~footer,.site-footer)>.wrap{padding-inline:0}
.site-footer{padding-inline:0}

/* THE NOTICE IS GLASS, AND IT IS THE ONLY GLASS DOWN HERE THAT IS COLORED. It
   takes the pager's geometry entire, which is to say its width, its inset, its
   corner and the hairline ring on the control inside it, and it takes the
   pager's material too, so that the chapter's field is not punctured at the
   moment the chapter ends. What it does not take is the pager's color: where
   the pager is a neutral float, this plate is tinted in the archive's own
   accent, which is the one fixed color in a closing region drawn on seven
   chapter colors.

   Color rather than opacity is what makes the object legible as an address to
   the reader. A reader who has come this far because they need the number
   should not have to work out that the paragraph is meant for them, and the
   accent says so on Money's cream exactly as it says so on Frames' blue,
   because it belongs to the archive rather than to whichever chapter is being
   left. Transmitting the field behind it costs that nothing.

   THE TINT IS STATED TWICE, AND THE HUE NEVER MOVES. Its lettering is
   --mhc-on-accent, the dark ink the vial-cap orange takes in every theme, and a
   translucent plate carries whatever is behind it into that reading. Over the
   light grounds the archive paints, 74% holds the paragraph and the control at
   about 6.5:1, which is better than the opaque plate managed; over the dark
   theme's black the same 74% drags the field down to 3.4:1, so the dark theme
   states 88%, where it returns about 4.6:1. Only the strength of the tint
   changes between the two, never its hue, so the notice is one object in both
   rooms rather than two. */
.support-in{
  /* Light and legacy both paint on a light ground, so both take the lower
     strength; the raised one is declared for the dark theme alone, below. */
  --support-plate-strength:74%;
  box-sizing:border-box;
  gap:clamp(16px,2.2vw,30px);
  padding:clamp(16px,1.8vw,20px) clamp(16px,2vw,22px);
  border:1px solid color-mix(in srgb,var(--mhc-accent) 84%,var(--mhc-on-accent));
  border-radius:26px;
  background:color-mix(in srgb,var(--mhc-accent) var(--support-plate-strength),transparent);
  color:var(--mhc-on-accent);
  box-shadow:0 14px 36px rgba(var(--mhc-shadow-rgb),.10);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
}
:root[data-theme="dark"] .support-in{--support-plate-strength:88%}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) .support-in{--support-plate-strength:88%}
}
/* A device that cannot composite a backdrop, or a reader who has asked for less
   transparency, is handed the accent whole rather than a tint of it over
   nothing, since the plate's legibility rests on what is behind it. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .support-in{background:var(--mhc-accent)}
}
@media (prefers-reduced-transparency:reduce){
  .support-in{background:var(--mhc-accent);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* It states its ink for the same reason it states its emphasis. The notice is
   nested inside whatever composition a chapter closes on, and Sources closes on
   an .end-marker whose own `p` rule is more specific than .support-in's, so the
   sentence that tells a reader in distress to call 988 was taking the closing
   paragraph's dim paper ink onto the accent plate and arriving at 3.68:1 in
   dark theme. Inheriting from the plate restores the on-accent ink the plate
   was built around, which reads at about 11:1 in both rooms, and no chapter's
   closing type can reach past it again. */
.support-in>p{margin:0;max-width:64ch;color:inherit;font-size:var(--mhc-type-lg,15px);line-height:1.55;text-wrap:pretty}
/* THE LEAD SENTENCE IS EMPHASIS, NOT DISPLAY TYPE. Four chapters hold the
   notice inside their closing composition, and Timeline's is an .end-marker
   whose own `b` is the year it closes on, set at clamp(76px,13vw,190px). The
   notice is nested in that same element, so `This is a research archive, not a
   crisis service.` was inheriting the year's size and arriving at 133px while
   the sentence it opens ran on at 14px beside it. The paragraph therefore
   states its own emphasis rather than leaving it to whatever composition the
   chapter closed on, which is the same argument that put the control's type
   here rather than in seven chapter stylesheets. */
.support-in>p :is(b,strong){font:inherit;font-weight:600}
/* Its control is the pager's icon ring restated as a pill, in the pager's own
   label type, so the two instruments answer to one another and do so
   identically on all seven chapters. Chapters outside the routed three had no
   rule for this at all and were falling back to their own body face, which is
   why the same notice was set two ways. The one number that does not come from
   the pager is the ring's strength. A hairline drawn for a translucent plate
   arrived at 2.2:1 on the opaque accent, and carrying it to 60% of the
   lettering reached 3.18:1 there; once the plate itself turned translucent the
   same 60% fell back to 2.80:1 against the dark theme's thinner field, so it is
   carried again, to 78%, where the control is bounded rather than merely
   labeled in every chapter and both themes. */
.support-in a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:42px;
  padding:0 18px;
  /* The shared pill fills itself with a wash of the CHAPTER's color, which is
     the one thing that cannot happen on a plate the chapter does not own, so
     the control is returned to the ring it reads as and takes its color from
     the accent underneath it. */
  background:transparent;
  /* Stated rather than inherited, because the route container sets the link's
     color from --mhc-on-paper, which follows the theme and would hand a dark
     plate's lettering to a field that is the same orange in both themes. */
  color:var(--mhc-on-accent);
  border:1px solid color-mix(in srgb,currentColor 78%,transparent);
  border-radius:999px;
  font:500 10px/1.2 var(--mono,"Geist Mono",ui-monospace,monospace);
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.support-in a:is(:hover,:focus-visible){
  border-color:currentColor;
  background:color-mix(in srgb,currentColor 8%,transparent);
}

/* Chapters other than the routed three ship the notice without the archive's
   .wrap, so its two parts are laid out here rather than in one chapter's own
   stylesheet. */
.support-in:not(.wrap){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
@media(max-width:760px){
  .support-in:not(.wrap){grid-template-columns:minmax(0,1fr);justify-items:start}
}

/* The footer resumes the ground. Its rule is the pager's bottom rule, already
   drawn, so it draws none of its own and simply sits in the space beneath it. */
:is(.support~footer,.site-footer,.archive-credit){
  border:0;
  background:none;
}

/* The colophon keeps the research credit and evidence date. The repeated
   archive title and geographic/date scope are omitted from every chapter. */
.archive-credit{
  display:grid;
  padding:clamp(24px,3vw,38px) 0;
}
/* THE PAGE ENDS ON THE COLOPHON. The colophon's own padding is the only space
   under its last line, and it is the same on every chapter: the space above
   its facts, stated again below them. Two bands used to sit under it, 12vh
   of margin on the chapters whose closing region stands outside a composition,
   and the composition's own 12vh of bottom padding on Timeline, Measurement and
   Sources. The margin rule was also meant to exempt those three, but it tested
   the colophon's parent, which there is the composition's inner column rather
   than the composition itself, so they carried both bands and ended 24vh below
   their last line against 12vh everywhere else. Both are gone, and the
   composition gives up its bottom padding wherever the colophon is inside it. */
.archive-credit{margin-bottom:0}
.end-marker:has(>div>.archive-credit){padding-bottom:0}
.archive-credit-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px clamp(18px,3vw,56px);
}
/* Chapter closing compositions set their own type and margins. Keep these
   two facts on the shared mono scale and legible on every chapter ground. */
.archive-credit :is(p,span,a){margin:0;max-width:none}
.archive-credit .archive-credit-meta>a{
  display:block;min-height:24px;padding-block:4px;box-sizing:border-box;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  font:500 var(--mhc-type-2xs,10px)/1.5 var(--mono,"Geist Mono",ui-monospace,monospace);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mhc-on-paper-3);
}
.archive-credit .archive-credit-meta>a+a{text-align:end}
.archive-credit .archive-credit-meta>a:hover{color:var(--mhc-ink)}
.archive-credit .archive-credit-meta>a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

@media(max-width:600px){
  :is(.support,.site-footer,.support~footer,.archive-credit){width:calc(100% - 32px)}
  .support-in{border-radius:22px}
  /* Stack the research credit and date on the phone reading edge. */
  .archive-credit-meta{
    justify-content:flex-start;
    gap:7px;
  }
  .archive-credit .archive-credit-meta>a{flex:0 0 100%}
  .archive-credit .archive-credit-meta>a+a{text-align:start}
}
@media print{
  .support-in{border:0;border-radius:0;background:none;color:inherit;box-shadow:none;padding-inline:0}
}

/* Frames and In sum deliberately bleed their chapter fields beneath the
   archive rail. Their terminal controls, support notice, and footer are not
   chapter fields, so they resume the rail-safe reading canvas here.

   EVERY REFERENCE TO THE RAIL'S COLUMN CARRIES A FALLBACK, because this file
   loads ahead of `elastic-archive-shell.css`, which is where that column is
   declared. A `var()` with nothing behind it is invalid at computed-value time
   rather than merely ignored, so `width` resolves to `auto` and the rule that
   holds these two chapters to their measure produces a full-bleed closing
   region instead of a narrower one. Both link elements are render blocking, so
   a reader is not expected to meet that state; it was met repeatedly while
   probing these pages over a single-threaded local server, where a stalled
   stylesheet leaves the document in exactly the shape the missing token
   describes. The literal is the desktop column the shell computes, so the
   fallback agrees with the token wherever it is the token that is missing. */
body.mhc-archive-enabled.chapter-reading:is([data-chapter="frames"],[data-chapter="summary"]) :is(.chapter-next-block.chapter-pager,.support,.support~footer,.archive-credit){
  width:min(980px,calc(100% - var(--elastic-content-left,76px) - 36px));
  margin-inline-start:max(calc(var(--elastic-content-left,76px) + 18px),calc((100% + var(--elastic-content-left,76px) - 980px) / 2));
  margin-inline-end:18px;
}

/*
  Focused reading bars recede after deliberate downward travel, leaving one
  compact chapter-colored pill behind. The pill is still part of the
  navigation's hover area, and keyboard focus always restores the full bar.
*/
[data-scroll-minimize]{
  --chapter-scroll-nav-peek:14px;
  --chapter-scroll-nav-accent:var(--mhc-on-plate-2);
  --chapter-scroll-nav-hide-offset:0px;
  transform:translate3d(0,0,0);
  transition:transform .24s cubic-bezier(.16,1,.3,1);
}
[data-scroll-minimize]::after{
  --mhc-ink-rgb:var(--mhc-on-chroma-rgb);--mhc-on-plate-rgb:var(--mhc-on-chroma-rgb);--mhc-on-paper-rgb:var(--mhc-on-chroma-rgb);color:var(--mhc-on-chroma);content:"";
  position:absolute;
  z-index:2;
  left:50%;
  bottom:calc(var(--chapter-scroll-nav-peek) * -1);
  width:clamp(54px,7vw,78px);
  height:var(--chapter-scroll-nav-peek);
  border:0;
  border-radius:999px;
  background:color-mix(in srgb,var(--chapter-scroll-nav-accent) 72%,transparent);
  box-shadow:0 8px 20px rgba(var(--mhc-shadow-rgb),.18);
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  opacity:0;
  transform:translate3d(-50%,-2px,0) scale(.72);
  transform-origin:center top;
  transition:opacity .14s ease-out,transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events:auto;
}
.reading-nav[data-scroll-minimize]{--chapter-scroll-nav-accent:var(--sage,var(--claims-field,var(--mhc-on-plate-2)))}
.frame-local-nav[data-scroll-minimize]{--chapter-scroll-nav-accent:var(--mhc-chapter-frames-field)}
.sum-local-nav[data-scroll-minimize]{--chapter-scroll-nav-accent:var(--mhc-chapter-summary-field)}
.chapter-reader-bar[data-scroll-minimize]{--chapter-scroll-nav-accent:var(--mhc-on-plate-2)}
[data-scroll-minimize].is-scroll-minimized:not(:hover):not(:has(:focus-visible)){
  transform:translate3d(0,calc(-100% - var(--chapter-scroll-nav-hide-offset)),0);
}
[data-scroll-minimize].is-scroll-minimized:not(:hover):not(:has(:focus-visible))>*{
  opacity:0;
}
[data-scroll-minimize].is-scroll-minimized::after{
  opacity:1;
  transform:translate3d(-50%,0,0) scale(1);
}
@media(max-width:760px){
  [data-chapter-hero]{
    --chapter-sequence-inset-x:18px;
    --chapter-sequence-inset-y:18px;
  }
  .chapter-pager{border-radius:28px!important}
  .chapter-pager__link{border-radius:22px!important}
}
@media(max-width:600px){
  .chapter-pager{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr);width:100%;gap:3px;padding:5px}
  .chapter-pager__link{grid-template-columns:minmax(0,1fr);grid-template-areas:"icon" "copy";align-content:center;justify-items:start;gap:8px!important;min-height:96px!important;padding:10px 8px!important}
  .chapter-pager__link--next{grid-template-columns:minmax(0,1fr);grid-template-areas:"icon" "copy";justify-items:end}
  .chapter-pager__icon{width:30px;height:30px}
  .chapter-pager__icon svg{width:16px;height:16px}
  .chapter-pager__title{gap:5px;flex-wrap:wrap}
  .chapter-pager__title strong{font-size:13px;line-height:1.2}
  .chapter-pager__title b{font-size:10px}
}
@media(max-width:360px){
  .chapter-pager{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr);gap:2px;padding:4px}
  .chapter-pager__link{padding-inline:4px!important}
  .chapter-pager__title{display:block}
  .chapter-pager__title b{display:block;margin-bottom:4px}
  .chapter-pager__title strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .chapter-pager__link,.chapter-pager__link::before,.chapter-pager__icon{transition:none!important;transform:none!important}
  .chapter-pager__link:is(:hover,:focus-visible)::before{opacity:1}
  [data-scroll-minimize],[data-scroll-minimize]::after{transition:none}
  /* The wash states its own reduced-motion behavior beside each rule. */
}
@media print{
  .chapter-pager{display:none!important}
}