/* Shared archive shell for the complete numbered sequence, 00–07. */
:root{
  /* THE SIZE OF THE BAR IS ONE NUMBER.
     Every measurement the menu bar is built from is written below as the size
     it was drawn at multiplied by this factor, so that the column, the
     capsules standing in it, the padding around them, the gaps between them
     and the glyphs inside them all move together whenever the factor moves.
     It is set to .9 here, which takes the bar down by a tenth from the 72px
     column it carried before. Because the compact breakpoints further down
     now state their own drawn sizes in the same form, and because everything
     measured from those sizes is derived rather than copied, this one number
     governs the bar at every width and on all three docks. Type is the
     deliberate exception: the rail's labels are already at the small end of
     the system, so they keep their drawn sizes rather than following the
     capsule down. */
  --elastic-rail-scale:.9;
  /* The one measurement the factor is not allowed to take with it. A capsule
     is what the reader presses, so the column may never come in under a
     capsule of 44px and the padding either side of it, and each of the three
     widths below is therefore the drawn size or that floor, whichever is
     larger. The floor binds at the narrowest breakpoint alone, where the
     column comes to rest at 53px rather than the 52.2px a tenth off 58 would
     have given it. */
  --elastic-rail-min-width:calc(44px + (2 * var(--elastic-rail-pad)));
  --elastic-rail-width:max(var(--elastic-rail-min-width),calc(72px * var(--elastic-rail-scale)));
  --elastic-rail-height:min(calc(650px * var(--elastic-rail-scale)),calc(100svh - 48px));
  /* The padding the rail carries across its short axis and at the head of its
     long one, named for the axis rather than for an edge so that the bottom
     dock can lay the same two measurements down with it. A control only stays
     round while its row height tracks the column's own inner width, so the
     capsule is the width less both of its cross-axis paddings rather than a
     literal of its own. */
  --elastic-rail-pad:calc(8px * var(--elastic-rail-scale));
  --elastic-rail-pad-lead:calc(12px * var(--elastic-rail-scale));
  --elastic-rail-control-size:calc(var(--elastic-rail-width) - (2 * var(--elastic-rail-pad)));
  /* The glyph inside a capsule, which follows the capsule rather than holding
     its drawn size while the surface shrinks around it. */
  --elastic-rail-icon:calc(24px * var(--elastic-rail-scale));
  --elastic-rail-inset:calc(8px * var(--elastic-rail-scale));
  /* The withdrawn handle keeps its drawn thickness, since ten pixels is
     already the least this glass can be and still be found, whereas its length
     belongs to the bar and travels with it. */
  --elastic-rail-minimized-width:10px;
  --elastic-rail-minimized-height:calc(96px * var(--elastic-rail-scale));
  /* The section register's column, and the height of one bead's row at rest,
     which is the least a pointer target may be. */
  --mhc-section-register-width:clamp(52px,4.2vw,72px);
  --mhc-section-register-mark:24px;
  --elastic-rail-left:4px;
  --elastic-drawer-left:0px;
  --elastic-rail-gap:calc(10px * var(--elastic-rail-scale));
  --elastic-drawer-width:520px;
  /* The reading canvas begins at the visible rail edge. Heroes keep the
     larger copy-safe inset below, so their established lockups do not move.
     Each of these was previously a literal that happened to agree with the
     column's width, which meant widening the rail silently left the canvas
     overlapping it; they are derived now so the arithmetic cannot drift. The
     compact breakpoints still state their own values and still win, because
     the relationships below hold for the desktop column only. */
  --elastic-content-left:calc(var(--elastic-rail-width) + var(--elastic-rail-left));
  --elastic-content-half:calc(var(--elastic-content-left) / 2);
  --elastic-page-safe-left:calc(var(--elastic-content-left) + 36px);
  --elastic-page-safe-half:calc(var(--elastic-page-safe-left) / 2);
  --elastic-copy-safe-left:var(--elastic-page-safe-left);
  /* The rail's claim on the viewport, stated once and without naming an edge,
     so that the reader's chosen dock can move the reservation from the left to
     the right or to the foot of the page without any of the arithmetic above
     having to be restated. Because the compact breakpoints below re-declare
     the width and the offset rather than the sum, this derivation agrees with
     each of their literals instead of drifting away from them. */
  --elastic-rail-claim:calc(var(--elastic-rail-width) + var(--elastic-rail-left));
  /* An edge the rail is not resting against still needs an inset, since a
     title set flush against the glass reads as a fault rather than as a
     decision. rail-dock.css raises these on whichever side has been vacated. */
  --elastic-rail-free-inset:clamp(22px,3.4vw,64px);
  --elastic-content-right:0px;
  --elastic-content-bottom:0px;
  /* The rail's drag handle occupies the head of the column, ahead of the menu
     capsule, so every offset measured from the top of the rail carries it.
     rail-dock.js raises it from zero once the handle is actually mounted,
     which keeps a page whose dock script never runs on its original geometry. */
  --elastic-rail-head:0px;
  --elastic-drawer-control-x:12px;
  --elastic-drawer-control-y:11px;
  /* The drawer and search irises open from the center of the capsule that
     summons them, so both origins are measured from the rail's own padding and
     control size rather than from literals that used to encode a 72px column
     with a 56px capsule in it. */
  --elastic-drawer-origin-x:calc(var(--elastic-rail-left) + var(--elastic-rail-pad) + (var(--elastic-rail-control-size) / 2));
  --elastic-drawer-origin-y:calc(var(--elastic-rail-pad-lead) + var(--elastic-rail-head) + (var(--elastic-rail-control-size) / 2));
  --elastic-search-origin-x:var(--elastic-drawer-origin-x);
  --elastic-search-origin-y:calc(var(--elastic-rail-pad-lead) + var(--elastic-rail-head) + var(--elastic-rail-control-size) + var(--elastic-rail-gap) + (var(--elastic-rail-control-size) / 2));
  --elastic-paper:var(--mhc-surface-room);
  --elastic-ink:var(--mhc-on-paper);
  --elastic-light:var(--mhc-on-plate);
  --elastic-ease:cubic-bezier(.16,1,.3,1);
  --elastic-pill:999px;
  --elastic-glass-edge:color-mix(in srgb,var(--mhc-ink) 22%,transparent);
  --elastic-glass-edge-soft:color-mix(in srgb,var(--mhc-ink) 12%,transparent);
  --elastic-glass-highlight:color-mix(in srgb,var(--mhc-ink) 14%,transparent);
  --elastic-glass-shadow:0 18px 44px rgba(var(--mhc-shadow-rgb),.18),0 3px 10px rgba(var(--mhc-shadow-rgb),.08),inset 0 1px 0 var(--elastic-glass-highlight),inset 0 -1px 0 color-mix(in srgb,var(--mhc-ink) 5%,transparent);
  --elastic-glass-surface:linear-gradient(135deg,rgba(var(--mhc-float-rgb),.9),rgba(var(--mhc-float-rgb),.66));

  /* ---------------------------------------------------------------------
     The rail capsule's own glass.
     ---------------------------------------------------------------------
     The two tokens above are shared with the chapter pager, the frame list
     dock, the cross-reference ledger, the section panel and the pin notice,
     so the rail's material is held in its own pair rather than written over
     them; a panel carrying a paragraph of type wants far more ground behind
     it than a 72px capsule standing on a chapter field does.

     What separates the capsule from the plate it used to be is that it now
     transmits the chapter rather than covering it, the surface falling from
     .9 / .66 of the float color to .46 / .26 with the blur raised to match,
     and that it shows its edge. Two rings carry that edge: an outer bright
     hairline sitting on the perimeter, and an inner darker compression a
     little further in, with the gap the eye reads between the two standing
     for the thickness of the glass. Apparent thickness comes from having two
     edges to see rather than from one stronger edge, which is what lets the
     amplitude here stay as low as it does.

     Both rings are inset shadows rather than gradient bands, and that is not
     an implementation detail: a linear gradient knows an element's box and
     not its border radius, so at the rounded cap of a pill its band cuts
     straight across the dome instead of following it, which confines any
     curvature it describes to the left and right edges. An inset shadow
     inherits the radius, so these hold one even depth along a straight side
     and around a cap alike, and the capsule reads as curved on every edge.

     The specular is white in either theme rather than following the ground,
     since glass lit from a dark room is still lit by a light source; what
     changes in dark is that it is halved. */
  --elastic-glass-spec-rgb:255,255,255;
  --elastic-glass-spec:1;
  --elastic-capsule-surface:
    radial-gradient(120% 108% at 50% 50%,
      rgba(var(--elastic-glass-spec-rgb),0) 58%,
      rgba(var(--elastic-glass-spec-rgb),calc(.07 * var(--elastic-glass-spec))) 90%,
      rgba(var(--elastic-glass-spec-rgb),calc(.15 * var(--elastic-glass-spec))) 100%),
    linear-gradient(140deg,rgba(var(--mhc-float-rgb),.46),rgba(var(--mhc-float-rgb),.26));
  /* A tight contact shadow under a broad ambient one, because a single soft
     blur reads as a printed tint where the pair reads as an object standing
     off the page. */
  --elastic-capsule-cast:
    0 24px 52px rgba(var(--mhc-shadow-rgb),.18),
    0 7px 16px rgba(var(--mhc-shadow-rgb),.09),
    0 1px 2px rgba(var(--mhc-shadow-rgb),.10);
  --elastic-capsule-bevel:
    inset 0 0 0 .75px rgba(var(--elastic-glass-spec-rgb),calc(.44 * var(--elastic-glass-spec))),
    inset 0 0 0 2.25px rgba(var(--mhc-shadow-rgb),.06),
    inset 0 2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.30 * var(--elastic-glass-spec))),
    inset 0 -2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.18 * var(--elastic-glass-spec))),
    inset 0 0 13px 4px rgba(var(--mhc-shadow-rgb),.03);
  --elastic-capsule-shadow:var(--elastic-capsule-cast),var(--elastic-capsule-bevel);
  --elastic-capsule-blur:blur(34px) saturate(168%) brightness(1.04);
}

/* Dark halves the specular rather than inverting it, and the guard matches the
   one theme.css uses so an explicit choice always outranks the system one. */
:root[data-theme="dark"]{--elastic-glass-spec:.5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]){--elastic-glass-spec:.5}
}

.archive-rail,.mhc-archive-rail{
  position:fixed;
  z-index:1100;
  inset:auto;
  left:var(--elastic-rail-left);
  top:50%;
  width:var(--elastic-rail-width);
  height:var(--elastic-rail-height);
  display:grid;
  grid-template-rows:var(--elastic-rail-control-size) var(--elastic-rail-control-size) minmax(0,1fr) var(--elastic-rail-control-size);
  gap:var(--elastic-rail-gap);
  padding:var(--elastic-rail-pad-lead) var(--elastic-rail-pad) 0;
  background:transparent;
  color:var(--elastic-light);
  border:0;
  filter:none;
  transform:translateY(-50%);
  transition:transform .5s var(--elastic-ease);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Chapter heroes own the entire viewport field. On devices that can actually
   hover, the shared rail can rest as a short pill and return when the
   reader approaches it. The same state is available manually; pinning the rail
   overrides the hero treatment. Touch devices keep the complete rail. */
@media (hover:hover) and (pointer:fine){
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail){
    transform:translate(calc(-100% + var(--elastic-rail-minimized-width) + var(--elastic-rail-inset)),-50%);
    pointer-events:none;
  }
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):not(:hover):not(:focus-within)>*{
    opacity:0;
    pointer-events:none;
    transition:opacity .14s ease;
  }
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::before{
    content:"";
    position:absolute;
    inset:50% 0 auto auto;
    width:var(--elastic-rail-minimized-width);
    height:var(--elastic-rail-minimized-height);
    /* The handle is the same glass seen edge-on, so it carries the capsule's
       bevel rather than the hairline it used to; at ten pixels wide the two
       rings nearly meet, which is exactly how a thin section of this material
       should read. The chapter tint stays, since the handle is the only thing
       on screen naming the room the reader is in. It also keeps most of the
       ground the capsules give up, because while a hero is open this sliver is
       the only navigation on the page and a ten pixel width leaves it nothing
       else to be found by; transparency that costs a capsule nothing costs the
       handle its entire visibility. */
    border:0;
    border-radius:var(--elastic-pill);
    background:color-mix(in srgb,var(--mhc-rail-section-accent,var(--mhc-chapter-color,var(--mhc-accent))) 20%,rgba(var(--mhc-float-rgb),.78));
    box-shadow:var(--elastic-capsule-shadow);
    backdrop-filter:var(--elastic-capsule-blur);
    -webkit-backdrop-filter:var(--elastic-capsule-blur);
    opacity:1;
    transform:translateY(-50%);
    transition:opacity .18s ease;
    pointer-events:none;
  }
  /* This clear target overlaps the rail throughout its slide, keeping hover
     continuous even when the pointer approaches beside the narrow pill. */
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::after{
    content:"";
    position:absolute;
    right:calc(var(--elastic-rail-minimized-width) - 44px);
    top:50%;
    width:44px;
    height:calc(var(--elastic-rail-minimized-height) + 24px);
    transform:translateY(-50%);
    pointer-events:auto;
  }
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within){
    transform:translate(0,-50%);
    pointer-events:auto;
  }
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within)>*{opacity:1}
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within)::before,
  body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within)::after{opacity:0}
}

.archive-rail>.rail-button,.archive-rail>.rail-top,.archive-rail>.rail-index,.archive-rail>.rail-mark,
.mhc-archive-rail>.mhc-rail-action,.mhc-archive-rail>.mhc-rail-identity{
  min-width:0;
  min-height:0;
  overflow:hidden;
  /* The perimeter is the bevel's outer ring, so a drawn border would sit
     outside it as a third edge and flatten the pair back into a hairline. */
  border:0;
  border-radius:999px;
  background:var(--elastic-capsule-surface);
  color:var(--elastic-light);
  box-shadow:var(--elastic-capsule-shadow);
  backdrop-filter:var(--elastic-capsule-blur);
  -webkit-backdrop-filter:var(--elastic-capsule-blur);
  transition:background .2s ease,color .2s ease,box-shadow .28s ease,transform .38s var(--elastic-ease);
}

#menu-toggle,#mhc-menu-toggle{grid-row:1}
.chapter-search{position:relative;isolation:isolate;grid-row:2}
.archive-rail>.rail-index,.mhc-archive-rail>.mhc-rail-identity{grid-row:3}
.archive-rail>.rail-top,.mhc-archive-rail>.mhc-rail-top{grid-row:4}

#menu-toggle .menu-icon--close,#mhc-menu-toggle .mhc-menu-icon--close,
.chapter-search>.chapter-search-icon{
  position:absolute;
  z-index:1;
  transition:opacity .18s ease,transform .32s var(--elastic-ease),filter .22s ease;
}
#menu-toggle .menu-icon--close,#mhc-menu-toggle .mhc-menu-icon--close,
.chapter-search>.chapter-search-icon--close{opacity:0;transform:rotate(-12deg) scale(.78);filter:blur(3px)}
.chapter-search>.chapter-search-icon--search{opacity:1;transform:none;filter:blur(0)}
body.drawer-open #menu-toggle:is(:hover,:focus-visible) .menu-icon--menu,
body.mhc-nav-open #mhc-menu-toggle:is(:hover,:focus-visible) .mhc-menu-icon--menu,
body.chapter-search-open .chapter-search:is(:hover,:focus-visible)>.chapter-search-icon--search{
  opacity:0;
  transform:rotate(12deg) scale(1.12);
  filter:blur(3px);
}
body.drawer-open #menu-toggle:is(:hover,:focus-visible) .menu-icon--close,
body.mhc-nav-open #mhc-menu-toggle:is(:hover,:focus-visible) .mhc-menu-icon--close,
body.chapter-search-open .chapter-search:is(:hover,:focus-visible)>.chapter-search-icon--close{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.archive-rail>.rail-button:hover,.archive-rail>.rail-button:focus-visible,.archive-rail>.rail-top:hover,.archive-rail>.rail-top:focus-visible,
.mhc-archive-rail>.mhc-rail-action:hover,.mhc-archive-rail>.mhc-rail-action:focus-visible{
  /* Approach thickens the glass rather than filling it, because a capsule that
     turns into an opaque tile under the pointer announces that it was never
     glass to begin with. The float color rises, both rings brighten, and the
     chapter still crosses the surface underneath. */
  background:linear-gradient(140deg,rgba(var(--mhc-float-rgb),.62),rgba(var(--mhc-float-rgb),.40));
  color:var(--mhc-ink);
  box-shadow:
    0 18px 40px rgba(var(--mhc-shadow-rgb),.22),
    0 2px 5px rgba(var(--mhc-shadow-rgb),.12),
    inset 0 0 0 1px rgba(var(--elastic-glass-spec-rgb),calc(.46 * var(--elastic-glass-spec))),
    inset 0 0 0 2.5px rgba(var(--mhc-shadow-rgb),.07),
    inset 0 2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.60 * var(--elastic-glass-spec))),
    inset 0 -2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.26 * var(--elastic-glass-spec))),
    inset 0 0 13px 4px rgba(var(--mhc-shadow-rgb),.04);
  transform:scale(1.05);
}
.archive-rail>.rail-button:active,.archive-rail>.rail-top:active,.mhc-archive-rail>.mhc-rail-action:active{transform:scale(.91)}
.archive-rail svg,.mhc-archive-rail svg{width:var(--elastic-rail-icon);height:var(--elastic-rail-icon);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}

/* These two rules restored the capsule's border across the identity's ends.
   The bevel now owns the whole perimeter, and a straight hairline laid over a
   rounded cap reads as a cut rather than as an edge, so they are dropped. */
.rail-index,.mhc-rail-identity{border-top:0!important;border-bottom:0!important}
.rail-progress,.mhc-rail-progress,.rail-mark-progress{
  inset:calc(5px * var(--elastic-rail-scale))!important;
  width:auto!important;
  border-radius:inherit!important;
  background:color-mix(in srgb,var(--mhc-rail-section-accent,var(--mhc-accent)) 30%,transparent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mhc-ink) 10%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--mhc-ink) 4%,transparent);
  clip-path:inset(0 0 var(--rail-fill-remaining,100%) 0 round 999px);
  transform:none!important;
  transition:clip-path .18s linear,background .2s ease;
  will-change:clip-path!important;
}
.rail-index span,.rail-index-label,.mhc-rail-label{font-size:12px!important;line-height:1.05;letter-spacing:.1em!important}

/* Timeline's progress belongs to its active era. Keep the light wash so the
   location text stays readable; chapter identity still owns the other rooms. */
.rail-mark.is-timeline .rail-mark-progress{
  background:color-mix(in srgb,var(--rail-era-field,var(--rail-era-color)) 30%,transparent)!important;
}

.chapter-drawer,.mhc-chapter-drawer{
  position:fixed;
  z-index:1050;
  inset:auto;
  left:var(--elastic-drawer-left);
  top:calc(50% - (var(--elastic-rail-height) / 2));
  width:min(var(--elastic-drawer-width),calc(100vw - 48px));
  height:auto;
  max-height:var(--elastic-rail-height);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(var(--mhc-on-paper-rgb),.2);
  border-radius:42px;
  background:linear-gradient(145deg,rgba(var(--mhc-ground-rgb),.94),rgba(var(--mhc-ground-rgb),.8));
  color:var(--elastic-ink);
  box-shadow:0 34px 86px rgba(var(--mhc-shadow-rgb),.28),0 5px 18px rgba(var(--mhc-shadow-rgb),.1),inset 0 1px 0 color-mix(in srgb,var(--mhc-ink) 10%,transparent);
  opacity:0;
  visibility:hidden;
  clip-path:circle(28px at var(--elastic-drawer-origin-x) var(--elastic-drawer-origin-y));
  transform:translateX(-18px) scale(.98);
  pointer-events:none;
  backdrop-filter:blur(30px) saturate(142%);
  -webkit-backdrop-filter:blur(30px) saturate(142%);
  transition:clip-path .7s var(--elastic-ease),opacity .14s ease,visibility 0s linear .7s,transform .62s var(--elastic-ease);
}
body.drawer-open .chapter-drawer,body.mhc-nav-open .mhc-chapter-drawer{
  opacity:1;
  visibility:visible;
  clip-path:circle(900px at var(--elastic-drawer-origin-x) var(--elastic-drawer-origin-y));
  transform:translateX(0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
}

.drawer-inner,.mhc-drawer-inner{min-height:0;padding:22px 22px 16px calc(var(--elastic-content-left) + 20px)}
.drawer-head,.mhc-drawer-head{position:static;min-height:32px;padding:0;border-bottom:0}
.mhc-drawer-context{display:none}
.drawer-close,.mhc-drawer-close{display:none}
.chapter-list,.mhc-chapter-list{padding:4px 0 14px}
.chapter-list li,.mhc-chapter-list li{border-bottom:0}
.chapter-list a,.mhc-chapter-list a{
  --elastic-drawer-chapter-color:var(--chapter-color,var(--mhc-chapter-color,var(--elastic-paper)));
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:28px;
  padding-inline:12px;
  background:transparent;
  box-shadow:inset 0 0 0 1px transparent;
  transition:color .18s ease,box-shadow .28s var(--elastic-ease);
}
.chapter-list a::before,.mhc-chapter-list a::before{
  --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:0;
  inset:2px;
  border-radius:20px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--elastic-drawer-chapter-color) 34%,rgba(var(--mhc-float-rgb),.7)),color-mix(in srgb,var(--elastic-drawer-chapter-color) 12%,rgba(var(--mhc-float-rgb),.28)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--elastic-drawer-chapter-color) 28%,transparent),inset 0 1px 0 color-mix(in srgb,var(--mhc-ink) 9%,transparent);
  opacity:0;
  transform:scale(.94,.86);
  transform-origin:center left;
  pointer-events:none;
  transition:opacity .12s ease,transform .46s var(--elastic-ease);
}
.chapter-list a>*,.mhc-chapter-list a>*{position:relative;z-index:1}
.chapter-list a:hover,.chapter-list a:focus-visible,
.mhc-chapter-list a:hover,.mhc-chapter-list a:focus-visible{
  background:transparent;
  color:var(--elastic-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--elastic-drawer-chapter-color) 34%,transparent);
}
.chapter-list li:is(.active,.is-current) a:is(:hover,:focus-visible),
.mhc-chapter-list li:is(.active,.is-current) a:is(:hover,:focus-visible){color:var(--elastic-ink)}
.chapter-list a:hover::before,.chapter-list a:focus-visible::before,
.mhc-chapter-list a:hover::before,.mhc-chapter-list a:focus-visible::before{opacity:.82;transform:scale(1)}
.chapter-list :is(.active,.is-current) a::before,.mhc-chapter-list :is(.active,.is-current) a::before{opacity:.68;transform:scale(1)}
.chapter-list a:active::before,.mhc-chapter-list a:active::before{transform:scale(.985,.94);transition-duration:.1s}
.chapter-copy,.mhc-chapter-copy{display:block;padding:15px 0;transition:none}
.chapter-title,.mhc-chapter-title{
  display:inline-block;
  transform:translateX(0) scale(1);
  transform-origin:left center;
  transition:transform .46s var(--elastic-ease);
}
.chapter-list a:hover .chapter-title,.chapter-list a:focus-visible .chapter-title,
.mhc-chapter-list a:hover .mhc-chapter-title,.mhc-chapter-list a:focus-visible .mhc-chapter-title{transform:translateX(4px) scale(1.018)}
.chapter-list a:active .chapter-title,.mhc-chapter-list a:active .mhc-chapter-title{transform:translateX(2px) scale(.99);transition-duration:.1s}
.chapter-subtitle,.mhc-chapter-subtitle{display:none}
.drawer-foot,.mhc-drawer-foot{display:none}

body.drawer-open .archive-rail,body.mhc-nav-open .mhc-archive-rail{filter:none}
body.drawer-open .archive-rail>.rail-button,body.drawer-open .archive-rail>.rail-index,body.drawer-open .archive-rail>.rail-top,
body.mhc-nav-open .mhc-archive-rail>.mhc-rail-action,body.mhc-nav-open .mhc-archive-rail>.mhc-rail-identity{
  border-color:transparent;
  background:transparent;
  color:var(--elastic-ink);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.drawer-open #menu-toggle,body.mhc-nav-open #mhc-menu-toggle{
  background:var(--elastic-ink);
  color:var(--mhc-ink-on-ground);
  transform:none;
}
body.drawer-open .chapter-search,body.drawer-open .archive-rail>.rail-index,body.drawer-open .archive-rail>.rail-top,
body.mhc-nav-open .chapter-search,body.mhc-nav-open .mhc-archive-rail>.mhc-rail-identity,body.mhc-nav-open .mhc-archive-rail>.mhc-rail-top{display:none}

body.chapter-search-open .archive-rail,body.chapter-search-open .mhc-archive-rail{filter:none}
body.chapter-search-open .archive-rail>.rail-button,body.chapter-search-open .archive-rail>.rail-index,body.chapter-search-open .archive-rail>.rail-top,
body.chapter-search-open .mhc-archive-rail>.mhc-rail-action,body.chapter-search-open .mhc-archive-rail>.mhc-rail-identity{
  border-color:transparent;
  background:transparent;
  color:var(--elastic-ink);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.chapter-search-open .chapter-search{grid-row:2;background:var(--elastic-ink)!important;color:var(--mhc-ink-on-ground)!important;transform:none!important}
body.chapter-search-open #menu-toggle,body.chapter-search-open #mhc-menu-toggle,
body.chapter-search-open .archive-rail>.rail-index,body.chapter-search-open .archive-rail>.rail-top,
body.chapter-search-open .mhc-archive-rail>.mhc-rail-identity,body.chapter-search-open .mhc-archive-rail>.mhc-rail-top{display:none}

/* Keep the click-away layer without visually erasing the document. The drawer
   is a floating navigation instrument, not a modal replacement for the page. */
.drawer-scrim,.mhc-drawer-scrim{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Only the chapter field bleeds beneath the floating spine. The reading
   canvas begins beyond it, so navigation and body copy never sit underneath. */
body:not(.mhc-archive-enabled)>.site-shell{margin-left:var(--elastic-content-left)}
/* Timeline already reserves the rail inside its chronology. Its evidence
   field and guide stay full bleed; do not apply the reading-room inset twice. */
body[data-chapter="timeline"]>.site-shell{margin-left:0}
body.mhc-archive-enabled{padding-left:var(--elastic-content-left)}
body.mhc-archive-enabled.chapter-reading:is([data-chapter='frames'],[data-chapter='summary']){padding-left:0}
body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames,
body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary{padding-left:var(--elastic-content-left)}
body.mhc-archive-enabled.chapter-reading[data-chapter='about'] #sec-about{position:relative;isolation:isolate}
body.mhc-archive-enabled.chapter-reading[data-chapter='about'] #sec-about::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset-block:0;
  right:100%;
  width:var(--elastic-content-left);
  background:inherit;
  pointer-events:none;
}

/* Cross-references retain a one-step return even when their target lives in a
   standalone chapter document. This is the numbered chapters' counterpart to
   the Timeline's authored archive-return capsule. */
.mhc-xref-cluster{
  position:fixed;
  z-index:1200;
  right:18px;
  bottom:max(18px,env(safe-area-inset-bottom));
  width:min(430px,calc(100vw - var(--elastic-content-left) - 36px));
}
.mhc-xref-return{
  position:relative;
  z-index:1;
  isolation:isolate;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:center;
  width:100%;
  min-height:64px;
  padding:7px 98px 7px 7px;
  overflow:hidden;
  border:1px solid var(--elastic-glass-edge);
  border-radius:999px;
  background:var(--elastic-glass-surface);
  color:var(--elastic-light);
  box-shadow:var(--elastic-glass-shadow);
  cursor:pointer;
  text-align:left;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,calc(100% + 40px),0) scale(.96);
  backdrop-filter:blur(24px) saturate(138%);
  -webkit-backdrop-filter:blur(24px) saturate(138%);
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .28s ease,opacity .2s ease,transform .56s var(--elastic-ease);
}
.mhc-xref-cluster .xref-back{position:relative;z-index:1;right:auto;bottom:auto;width:100%;grid-template-columns:44px minmax(0,1fr);padding-right:98px}
.mhc-xref-return.is-visible{opacity:1;pointer-events:auto;transform:none}
.mhc-xref-return:is(:hover,:focus-visible){
  border-color:var(--mhc-action-hover-border);
  background:var(--mhc-action-hover);
  color:var(--mhc-action-hover-ink);
  box-shadow:0 16px 38px rgba(var(--mhc-shadow-rgb),.22),inset 0 1px 0 color-mix(in srgb,var(--mhc-ground) 18%,transparent);
  transform:translateY(-2px) scale(1.012);
}
.mhc-xref-return:focus-visible{outline:2px solid var(--elastic-light);outline-offset:3px}
.mhc-xref-return:active{transform:translateY(1px) scale(.975)}
.mhc-xref-return:disabled{cursor:wait;opacity:.72}
.mhc-xref-return__icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%}
.mhc-xref-return__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.mhc-xref-return__copy{display:grid;min-width:0;gap:3px}
.mhc-xref-return__copy small{color:inherit;font:500 10px/1 var(--mhc-font-mono);letter-spacing:.1em;text-transform:uppercase}
.mhc-xref-return__copy span{min-width:0;overflow:hidden;font-size:13px;font-weight:450;line-height:1.2;letter-spacing:-.012em;text-overflow:ellipsis;white-space:nowrap}
.mhc-xref-trail-toggle{position:absolute;z-index:2;right:8px;bottom:15px;display:grid;place-items:center;min-height:34px;padding:0 12px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:500 10px/1 var(--mhc-font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.mhc-xref-trail-toggle:is(:hover,:focus-visible),.mhc-xref-cluster.is-ledger-open .mhc-xref-trail-toggle{border-color:var(--mhc-action-hover-border);background:var(--mhc-action-hover);color:var(--mhc-action-hover-ink)}
.mhc-xref-trail-toggle:focus-visible{outline:2px solid var(--elastic-light);outline-offset:2px}
.mhc-xref-ledger{position:absolute;z-index:3;right:8px;bottom:calc(100% + 6px);display:grid;width:min(330px,calc(100vw - var(--elastic-content-left) - 52px));max-height:min(48vh,420px);padding:10px;overflow:auto;border:1px solid var(--elastic-glass-edge);border-radius:16px;background:var(--elastic-glass-surface);color:var(--elastic-light);box-shadow:var(--elastic-glass-shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.985);transform-origin:bottom right;backdrop-filter:blur(24px) saturate(138%);-webkit-backdrop-filter:blur(24px) saturate(138%);transition:opacity .18s ease,visibility .18s ease,transform .32s var(--elastic-ease)}
.mhc-xref-cluster:has(.mhc-xref-trail-toggle:hover) .mhc-xref-ledger,.mhc-xref-cluster:has(.mhc-xref-trail-toggle:focus-visible) .mhc-xref-ledger,.mhc-xref-cluster.is-ledger-open .mhc-xref-ledger,.mhc-xref-ledger:is(:hover,:focus-within){opacity:1;visibility:visible;pointer-events:auto;transform:none}
.mhc-xref-ledger header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 1px 8px;border-bottom:1px solid var(--elastic-glass-edge)}
.mhc-xref-ledger header div{display:flex;align-items:baseline;gap:9px;min-width:0}
.mhc-xref-ledger header small,.mhc-xref-ledger header span{font:500 10px/1.2 var(--mhc-font-mono);letter-spacing:.08em;text-transform:uppercase}
.mhc-xref-ledger header span{color:var(--mhc-on-plate-3)}
.mhc-xref-ledger header button{display:grid;flex:0 0 32px;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.mhc-xref-ledger header button:is(:hover,:focus-visible){border-color:var(--mhc-action-hover-border);background:var(--mhc-action-hover);color:var(--mhc-action-hover-ink)}
.mhc-xref-ledger header button:focus-visible{outline:2px solid var(--elastic-light);outline-offset:2px}
.mhc-xref-ledger header button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.mhc-xref-ledger ol{display:grid;margin:0;padding:0;list-style:none}
.mhc-xref-ledger li{border-bottom:1px solid var(--elastic-glass-edge)}
.mhc-xref-ledger li>button{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;width:100%;padding:8px 2px;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}
.mhc-xref-ledger li>button:is(:hover,:focus-visible){background:color-mix(in srgb,currentColor 8%,transparent)}
.mhc-xref-ledger li>button:focus-visible{outline:2px solid var(--elastic-light);outline-offset:-2px}
.mhc-xref-ledger li>button>:first-child{padding-top:2px;color:var(--mhc-on-plate-3);font:500 10px/1 var(--mhc-font-mono);letter-spacing:.08em}
.mhc-xref-ledger li div{display:grid;min-width:0;gap:3px}
.mhc-xref-ledger li b{overflow:hidden;font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.mhc-xref-ledger li small{color:var(--mhc-on-plate-3);font:500 10px/1.15 var(--mhc-font-mono);letter-spacing:.055em;text-transform:uppercase}
.mhc-xref-beginning{
  position:relative;
  justify-self:stretch;
  margin-top:9px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--elastic-glass-edge);
  border-radius:999px;
  background:var(--elastic-glass-surface);
  color:var(--elastic-light);
  box-shadow:0 10px 26px rgba(var(--mhc-shadow-rgb),.14);
  font:500 10px/1 var(--mhc-font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:1;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease,transform .38s var(--elastic-ease);
}
.mhc-xref-beginning[hidden]{display:none}
.mhc-xref-beginning.is-visible{opacity:1;pointer-events:auto;transform:none}
.mhc-xref-beginning:is(:hover,:focus-visible){border-color:var(--mhc-action-hover-border);background:var(--mhc-action-hover);color:var(--mhc-action-hover-ink);transform:translateY(-1px)}
.mhc-xref-beginning:focus-visible{outline:2px solid var(--elastic-light);outline-offset:3px}
.mhc-xref-beginning:active{transform:translateY(1px) scale(.98)}
.mhc-xref-beginning:disabled{cursor:wait;opacity:.72}
.mhc-archive-enabled .prog{left:var(--elastic-page-safe-left);width:calc(100% - var(--elastic-page-safe-left))}
body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero{
  width:100vw;
  margin-left:calc(-1 * var(--elastic-content-left));
  padding-left:max(var(--elastic-copy-safe-left),var(--gutter,0px));
}
body.mhc-archive-enabled.chapter-reading>.site-shell>.chapter-hero{
  width:100vw;
  margin-left:calc(-1 * var(--elastic-content-left));
  padding-left:max(var(--elastic-copy-safe-left),var(--gutter,0px));
}
body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.measurement-hero-scale{inset-inline:0}
body:not(.mhc-archive-enabled)>.site-shell>main>.chapter-section,
body:not(.mhc-archive-enabled)>.site-shell>.end-marker,
body:not(.mhc-archive-enabled)>main.site-shell>:is(.bridge,.reading-key,.story,.chapter-evidence,.after),
body:not(.mhc-archive-enabled)>main.site-shell>.chapter-evidence>.evidence-threshold{
  position:relative;
  isolation:isolate;
}
body:not(.mhc-archive-enabled)>.site-shell>main>.chapter-section::before,
body:not(.mhc-archive-enabled)>.site-shell>.end-marker::before,
body:not(.mhc-archive-enabled)>main.site-shell>:is(.bridge,.reading-key,.story,.chapter-evidence,.after)::before,
body:not(.mhc-archive-enabled)>main.site-shell>.chapter-evidence>.evidence-threshold::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset-block:0;
  right:100%;
  width:var(--elastic-content-left);
  background:inherit;
  pointer-events:none;
}
body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero],
body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sec-head[data-chapter-hero]{
  margin-left:calc(50% - 50vw - var(--elastic-content-half));
  margin-right:calc(50% - 50vw + var(--elastic-content-half));
  padding-left:var(--elastic-copy-safe-left);
  padding-right:max(var(--layout-gutter,20px),calc(50vw - 50% - var(--elastic-content-half)));
}
.mhc-archive-enabled.chapter-reading .frame-local-nav,
.mhc-archive-enabled.chapter-reading .sum-local-nav{margin-inline:calc(50% - 50vw + var(--elastic-content-half))}

/* Chapter section controls share the Timeline's floating control language.
   The navigator itself stays transparent so the chapter field remains visible
   between the independently surfaced controls. */
[data-chapter-sequence-dock]{
  --chapter-local-accent:var(--elastic-paper);
  --chapter-local-control-bg:rgba(var(--mhc-float-rgb),.78);
  --chapter-local-control-line:rgba(var(--mhc-on-plate-rgb),.24);
  --chapter-local-control-muted:var(--mhc-on-plate-2);
  top:10px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,max-content)!important;
  align-items:center;
  justify-content:end;
  gap:8px;
  min-height:68px!important;
  margin-inline:10px!important;
  padding:6px 0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--elastic-light);
  visibility:hidden;
  opacity:0;
  transform:translate3d(0,-10px,0);
  transition:opacity .2s ease-out,transform .34s var(--elastic-ease),visibility 0s linear .34s;
  pointer-events:none;
}
[data-chapter-sequence-dock].is-chapter-nav-revealed{
  visibility:visible;
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:0s;
}
[data-chapter-sequence-dock="frames"]{--chapter-local-accent:var(--mhc-chapter-frames-field)}
[data-chapter-sequence-dock="measurement"]{--chapter-local-accent:var(--mhc-sage)}
[data-chapter-sequence-dock="claims-makers"]{--chapter-local-accent:var(--mhc-steel)}
[data-chapter-sequence-dock="money"]{--chapter-local-accent:var(--mhc-money)}
[data-chapter-sequence-dock="summary"]{--chapter-local-accent:var(--mhc-chapter-summary-field)}

.mhc-archive-enabled.chapter-reading .frame-local-nav[data-chapter-sequence-dock],
.mhc-archive-enabled.chapter-reading .sum-local-nav[data-chapter-sequence-dock]{margin-inline:10px!important}
.reading-nav-slot:has(>[data-chapter-sequence-dock]){height:78px!important}

[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links),
[data-chapter-sequence-dock]>.chapter-method-pill{pointer-events:auto}
[data-chapter-sequence-dock]>:is(.reading-nav-status,.frame-local-status,.sum-local-status){display:none!important}

[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links){
  display:flex!important;
  align-items:center;
  width:max-content;
  max-width:calc(100vw - var(--elastic-page-safe-left) - 250px);
  gap:3px;
  min-width:0;
  min-height:56px!important;
  padding:5px 6px!important;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  border:1px solid var(--chapter-local-control-line)!important;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(var(--mhc-float-rgb),.92),rgba(var(--mhc-float-rgb),.68))!important;
  box-shadow:var(--elastic-glass-shadow);
  backdrop-filter:blur(24px) saturate(138%);
  -webkit-backdrop-filter:blur(24px) saturate(138%);
}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)::-webkit-scrollbar{display:none}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a{
  display:flex!important;
  align-items:center;
  min-height:44px!important;
  height:44px;
  padding:0 clamp(13px,1.4vw,20px)!important;
  border:1px solid transparent!important;
  border-radius:var(--elastic-pill)!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--chapter-local-control-muted)!important;
  font:500 12px/1.2 var(--mono,"Geist Mono",ui-monospace,monospace);
  letter-spacing:.07em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .3s var(--elastic-ease);
}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a:hover{
  border-color:var(--chapter-local-control-line)!important;
  background:color-mix(in srgb,var(--mhc-ink) 9%,transparent)!important;
  color:var(--elastic-light)!important;
}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a:active{transform:scale(.96)}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a:focus-visible{
  outline:2px solid var(--elastic-light)!important;
  outline-offset:2px;
}
[data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a[aria-current="location"]{
  border-color:color-mix(in srgb,var(--chapter-local-accent) 58%,var(--mhc-ink))!important;
  background:color-mix(in srgb,var(--mhc-ink) 88%,var(--chapter-local-accent))!important;
  color:var(--mhc-ground)!important;
  box-shadow:0 8px 22px rgba(var(--mhc-shadow-rgb),.22),inset 0 1px 0 color-mix(in srgb,var(--mhc-ground) 18%,transparent)!important;
}

.chapter-method-pill{
  align-self:center;
  justify-self:end;
  min-width:max-content;
}

/* Sources kept its section filter in a floating capsule here, in the shared
   glass material every chapter dock wears, and the filter is a field inside the
   bibliography header now. Nothing in this file styles it: a control inside a
   header is that header's own, and the page states it there. */

/* The chapter identity is the section navigator's resting state. Its full
   list grows directly out of the rail, keeping one spatial plane for fixed
   navigation instead of pairing the rail with a second floating dock. */
.archive-rail>:is(.rail-index,.rail-mark),.mhc-archive-rail>.mhc-rail-identity{
  position:relative;
  z-index:2;
}
.archive-rail>.rail-mark{overflow:visible}
:is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity)>.mhc-rail-section-rest{
  position:absolute;
  z-index:3;
  inset:12px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  color:var(--elastic-light);
  font:500 11px/1 var(--mono,"Geist Mono",ui-monospace,monospace)!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.085em!important;
  text-transform:uppercase;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transition:opacity .18s ease,color .2s ease;
  pointer-events:none;
}
.mhc-rail-section-rest.is-long{font-size:10.5px!important;letter-spacing:.065em!important}
.mhc-rail-section-rest b{color:var(--mhc-rail-section-accent,var(--mhc-accent));font:inherit}
/* The era name is the part of the identity that can be too long for the rail,
   and it was being cut wherever the box ended, which on the Timeline's first
   era read TIMELINE · THE ASYLUM CLAIM AND ITS REFU. It is the one flex item
   allowed to shrink, and it ends in an ellipsis when it does, so the cut reads
   as a label that continues rather than as a word that broke. The logical
   min-inline-size is what lets it shrink at all, the writing mode here being
   vertical. */
.mhc-rail-section-rest em{min-inline-size:0;overflow:hidden;color:color-mix(in srgb,var(--elastic-light) 72%,transparent);font:inherit;font-style:normal;text-overflow:ellipsis}
.mhc-rail-section-rest>:is(b,span,em){position:static!important;z-index:auto!important;writing-mode:inherit!important;transform:none!important;font:inherit!important;letter-spacing:inherit!important}
.mhc-rail-section-rest>em{min-inline-size:0!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* The section register.

   The chapter's sections read down the right margin as a column of beads,
   which is the archive's own position mark stood on end: a dot for each
   place, with the current one drawn out into a pill. The landing's opening
   passage, the chapter drawer and the chapter menu's position scale already
   use that mark to say where the reader is in the archive, so the instrument
   that says where the reader is inside a chapter now says it in the same
   form. The column is fixed, takes no height from the reading at any width,
   and occupies the band that every chapter leaves empty on the right.

   The controller reads the reader's place continuously and writes it onto
   each mark as two numbers, `--mhc-section-spot`, which is how much of the
   drawn pill a bead holds, and `--mhc-section-fill`, which is how much of its
   section has been read. The pill therefore fills with the chapter's ink as
   its section is read, and it hands its length to the next bead only as that
   section rises towards the reading line, so the length one bead gives up is
   the length the next one gains and the column never changes height while
   the hand-off happens.

   Only the skeleton below is shared. Everything that draws a bead sits inside
   the desktop query, because the phone opens this same element as a sheet of
   rows (`tools/mobile-reading/12-register.css`) and must not inherit a bead
   geometry that it would then have to undo. The column's offset from the edge
   is a variable rather than a literal, because a right-docked rail claims
   that same edge, and `--elastic-content-right` already states how much of
   the viewport the rail has taken there. */
.mhc-section-register{
  position:fixed;
  z-index:1040;
  right:var(--elastic-content-right,0px);
  top:50%;
  display:grid;
  gap:0;
  justify-items:stretch;
  align-content:center;
  width:var(--mhc-section-register-width);
  max-height:calc(100svh - 24px);
  transform:translateY(-50%);
  transition:opacity .34s var(--elastic-ease),transform .5s var(--elastic-ease),visibility 0s linear 0s;
}
.mhc-section-mark{
  position:relative;
  padding:0;
  border:0;
  background:transparent;
  color:color-mix(in srgb,var(--mhc-ink) 62%,transparent);
  cursor:pointer;
  text-decoration:none;
}
.mhc-section-mark::after{content:"";position:absolute;border-radius:var(--elastic-pill)}
.mhc-section-mark-span{font:400 10px/1.3 var(--mono,"Geist Mono",ui-monospace,monospace);font-style:normal;letter-spacing:.035em;opacity:.72}
.mhc-section-register-sheet{display:none}

@media (min-width:701px) and (min-height:501px),(min-width:1001px),(min-width:701px) and (pointer:fine){
  .mhc-section-register{
    --mhc-section-bead:6px;
    --mhc-section-draw:28px;
    --mhc-section-accent:var(--mhc-rail-section-accent,var(--mhc-accent-ink));
    /* Every size that moves in this column belongs to a small node inside a
       fixed box, and containment keeps each of those layouts inside the
       column rather than letting it reach the page. */
    contain:layout style;
  }
  .mhc-section-mark{
    display:block;
    width:100%;
    height:calc(var(--mhc-section-register-mark) + var(--mhc-section-spot,0) * var(--mhc-section-draw));
    border-radius:var(--elastic-pill);
    transition:color .25s ease;
  }
  /* The bead. Its strong color runs from the top to the fraction read and its
     soft color takes the rest, so a bead holding none of the pill is a flat
     dot that is darker once its section has been read, which is the position
     mark's own distinction between places passed and places ahead. Its width
     and height are stated rather than scaled, because a transform would press
     the round caps of a six pixel mark into ellipses; the drawer's dots and
     the landing's progress change their width for the same reason. */
  .mhc-section-mark::after{
    --mhc-bead-strong:color-mix(in srgb,var(--mhc-section-accent) calc(var(--mhc-section-spot,0) * 100%),color-mix(in srgb,var(--mhc-ink) 44%,transparent));
    --mhc-bead-soft:color-mix(in srgb,color-mix(in srgb,var(--mhc-section-accent) 30%,transparent) calc(var(--mhc-section-spot,0) * 100%),color-mix(in srgb,var(--mhc-ink) 20%,transparent));
    left:50%;
    top:50%;
    width:var(--mhc-section-bead);
    height:calc(var(--mhc-section-bead) + var(--mhc-section-spot,0) * var(--mhc-section-draw));
    background:linear-gradient(to bottom,var(--mhc-bead-strong) calc(var(--mhc-section-fill,0) * 100%),var(--mhc-bead-soft) 0);
    transform:translate(-50%,-50%);
    transition:width .4s var(--elastic-ease);
  }
  .mhc-section-mark:is(:hover,:focus-visible)::after{width:calc(var(--mhc-section-bead) + 3px)}
  .mhc-section-mark.is-method::after{width:8px;height:8px;background:none;box-shadow:inset 0 0 0 1.5px var(--mhc-accent-ink)}
  .mhc-section-mark.is-current{color:var(--mhc-ink)}
  .mhc-section-mark:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:-4px}
  /* A section chosen from the register is reached by a smooth scroll that can
     cross several sections, and the continuous reading would walk the pill
     through every bead between. While that landing is under way the
     controller gives the pill to the destination at once, and these
     transitions carry it there as one movement. */
  .mhc-section-register.is-landing .mhc-section-mark{transition:color .25s ease,height .55s var(--elastic-ease)}
  .mhc-section-register.is-landing .mhc-section-mark::after{transition:width .4s var(--elastic-ease),height .55s var(--elastic-ease)}

  /* The numeral waits beside its bead and comes up in proportion to how close
     the pointer has come, which the controller publishes on the column as
     `--mhc-section-approach`, so a reader passing the margin on the way to
     something else sees the numerals only when the pointer turns towards
     them. */
  .mhc-section-mark-index{
    position:absolute;
    right:calc(50% + 9px);
    top:50%;
    min-width:28px;
    color:color-mix(in srgb,var(--mhc-ink) 64%,transparent);
    font:500 10px/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    font-variant-numeric:tabular-nums;
    letter-spacing:.06em;
    text-align:right;
    opacity:var(--mhc-section-approach,0);
    transform:translate(calc((1 - var(--mhc-section-approach,0)) * 8px),-50%);
  }
  .mhc-section-mark.is-current .mhc-section-mark-index{color:var(--mhc-section-accent)}

  /* Reaching the column unfolds one sheet of the drawer's glass behind it,
     anchored on the column's own edge, so the names read as the beads opening
     rather than as a panel arriving from elsewhere. The register takes no
     ground at rest, since the beads carry their own contrast against the
     reading; the sheet exists only while the names are being read. */
  .mhc-section-register-sheet{
    position:absolute;
    z-index:-1;
    top:-14px;
    right:max(6px,calc(50% - 20px));
    bottom:-14px;
    display:block;
    width:40px;
    border-radius:20px;
    background:var(--elastic-glass-surface);
    box-shadow:var(--elastic-capsule-shadow);
    backdrop-filter:var(--elastic-capsule-blur);
    -webkit-backdrop-filter:var(--elastic-capsule-blur);
    opacity:0;
    pointer-events:none;
    transition:width .6s var(--elastic-ease),opacity .22s ease .08s;
  }
  /* The names stand in one right-aligned column on that sheet. A name wraps
     only when the viewport cannot hold it on a line, which keeps it readable
     at any width at the cost of meeting the row below. */
  .mhc-section-mark-label{
    position:absolute;
    right:calc(50% + 40px);
    top:50%;
    display:block;
    width:max-content;
    max-width:min(46ch,calc(100vw - var(--elastic-content-left,0px) - var(--elastic-content-right,0px) - var(--mhc-section-register-width) - 96px));
    color:color-mix(in srgb,var(--mhc-ink) 74%,transparent);
    font:450 13px/1.25 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    letter-spacing:-.012em;
    text-align:right;
    white-space:normal;
    overflow-wrap:anywhere;
    /* A resting name is clipped away as well as transparent. With opacity
       alone Chrome was found to paint the names faintly beside their beads
       after the column returned from a cover, at a strength that varied from
       one load to the next, whereas a name clipped to nothing is not painted
       at all; the clip also stays out of the accessibility tree's way, so
       each name remains its link's accessible name. Opening the sheet
       unrolls the clip leftward out of the beads. */
    clip-path:inset(0 0 0 100%);
    opacity:0;
    transform:translateY(-50%) translateX(12px);
    pointer-events:none;
    transition:opacity .2s ease,transform .5s var(--elastic-ease),clip-path .45s var(--elastic-ease);
  }
  .mhc-section-mark-span{margin-left:8px}
  .mhc-section-mark.is-current .mhc-section-mark-label{color:var(--mhc-section-accent);font-weight:500}

  .mhc-section-register:is(:hover,:focus-within) .mhc-section-register-sheet{
    width:calc(var(--mhc-section-name-width,160px) + 84px);
    opacity:1;
    pointer-events:auto;
    transition:width .6s var(--elastic-ease),opacity .16s ease;
  }
  .mhc-section-register:is(:hover,:focus-within) .mhc-section-mark-index{
    opacity:1;
    transform:translate(0,-50%);
    transition:opacity .2s ease,transform .45s var(--elastic-ease);
  }
  .mhc-section-register:is(:hover,:focus-within) .mhc-section-mark-label{
    clip-path:inset(-6px);
    opacity:1;
    pointer-events:auto;
    transform:translateY(-50%) translateX(0);
    transition:
      opacity .2s ease calc(70ms + var(--mhc-section-order,0) * 26ms),
      transform .5s var(--elastic-ease) calc(70ms + var(--mhc-section-order,0) * 26ms),
      clip-path .55s var(--elastic-ease) calc(70ms + var(--mhc-section-order,0) * 26ms),
      color .2s ease;
  }
  .mhc-section-register:is(:hover,:focus-within) .mhc-section-mark:not(.is-current):is(:hover,:focus-visible) .mhc-section-mark-label{color:var(--mhc-ink)}
}
/* Withheld while a cover or an opening quotation holds the viewport, and, on
   Timeline, until the chronology arrives. It leaves sideways rather than
   fading in place, so that its return reads as the reading beginning rather
   than as a control blinking on. */
.mhc-section-register.is-withheld{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-50%) translateX(14px);
  transition:opacity .28s ease,transform .5s var(--elastic-ease),visibility 0s linear .5s;
}
/* The drawer, the search panel and Timeline's ambient reading each take the
   whole surface, so the register withdraws rather than floating over them. */
body:is(.drawer-open,.mhc-nav-open,.search-open,.chapter-search-open,.timeline-ambient-active) .mhc-section-register{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-delay:0s,.34s;
}
/* A change of mode animates the color of every surface in view, which
   includes the names, numerals and sheet while they are transparent. Nobody
   can see those parts change, so they take the new mode at once and the mode
   change spends nothing on them; the extra type selector outranks the mode's
   own rule, which is written at the same weight with the same flag. */
html.theme-transitioning body .mhc-section-register :is(.mhc-section-mark-label,.mhc-section-mark-index,.mhc-section-register-sheet){transition:none!important}
@media print{.mhc-section-register{display:none}}
@media (prefers-reduced-motion:reduce){
  .mhc-section-register,.mhc-section-register-sheet,.mhc-section-mark,.mhc-section-mark::after,.mhc-section-mark-index,.mhc-section-mark-label{transition-duration:.01ms!important;transition-delay:0s!important}
}
/* Forced colors take every background, and a bead is nothing but one, so each
   is given the system's own ink and the current one its highlight. */
@media (forced-colors:active){
  .mhc-section-mark::after{forced-color-adjust:none;background:CanvasText}
  .mhc-section-mark.is-current::after{background:Highlight}
  .mhc-section-register-sheet{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
}
/* A narrower column below the wide breakpoint, since tablets have less margin
   to give; its rows keep the 24 pixel target, and the names still open to the
   left of it. */
@media (max-width:980px){
  :root{--mhc-section-register-width:30px}
}
/* The dynamic identity owns the hold gesture; section links stay ordinary links. */
:is(.rail-index,.rail-mark,.mhc-rail-identity)[data-rail-pinned]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
/* The pin reports itself once, through the ring drawn around its own glyph.
   An earlier revision reported it three times over, adding a tinted fill that
   wiped up the whole identity through the length of the hold, a flash of that
   same fill on release, and a 2px outline around the capsule for as long as
   the rail stayed pinned; three simultaneous accounts of one gesture read as
   three separate events, and the ring already sits where the gesture happens. */
.mhc-rail-pin-indicator{position:absolute;z-index:4;top:12px;left:50%;display:grid;place-items:center;width:28px;height:28px;transform:translateX(-50%);color:var(--mhc-rail-section-accent,var(--mhc-accent));pointer-events:none}
:is(.archive-rail,.mhc-archive-rail) .mhc-rail-pin-indicator svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}
.mhc-rail-pin-glyph{transform:rotate(-32deg);transform-origin:16px 16px;opacity:.42;transition:transform .24s var(--elastic-ease),opacity .2s ease}
[data-rail-pinned="true"] .mhc-rail-pin-glyph{transform:rotate(0);opacity:.9}
.is-pin-holding .mhc-rail-pin-glyph{transform:rotate(0) scale(.86);opacity:1;transition-duration:.12s}
.mhc-rail-pin-track,.mhc-rail-pin-meter{opacity:0;transition:opacity .16s ease}
.mhc-rail-pin-meter{stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:16px 16px}
.is-pin-holding .mhc-rail-pin-track{opacity:.15}
.is-pin-holding .mhc-rail-pin-meter{opacity:.85;animation:mhc-rail-pin-meter 1.5s linear both}
/* This label writes vertically: block-start is its right edge. Reserve the
   pin's physical top space without collapsing the label's narrow width. */
:is(.archive-rail,.mhc-archive-rail)>[data-rail-pinned]>.mhc-rail-section-rest{top:44px}
:is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-notice{position:absolute;z-index:6;left:calc(var(--elastic-rail-inset) + var(--elastic-rail-control-size) + 12px);top:calc(12px + var(--elastic-rail-head) + (var(--elastic-rail-control-size) * 2) + (var(--elastic-rail-gap) * 2) + 26px);width:max-content;max-width:calc(100vw - 100px);padding:8px 12px;border:1px solid var(--elastic-glass-edge);border-radius:var(--elastic-pill);background:var(--elastic-glass-surface);color:var(--elastic-light);box-shadow:0 8px 22px rgba(var(--mhc-shadow-rgb),.14);backdrop-filter:blur(16px);font:500 12px/1.2 var(--sans,Helvetica,Arial,sans-serif);letter-spacing:0;opacity:0;visibility:hidden;transform:translate(-4px,-50%);pointer-events:none;transition:opacity .16s ease,transform .24s var(--elastic-ease),visibility 0s linear .24s}
:is(.archive-rail,.mhc-archive-rail)[data-pin-feedback]>.mhc-rail-pin-notice{opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:0s}
@keyframes mhc-rail-pin-meter{to{stroke-dashoffset:0}}
:is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;pointer-events:none!important}
html.mhc-section-rail-ready .timeline-method-pill{display:none}
@media(max-width:700px){html.mhc-section-rail-ready .timeline-filter-cluster{grid-template-columns:minmax(0,1fr)}}

html.mhc-section-rail-ready .rail-index>span:not(.mhc-rail-section-rest),
html.mhc-section-rail-ready .mhc-rail-identity>.mhc-rail-label,
html.mhc-section-rail-ready .rail-mark>:is(.rail-mark-archive,.rail-mark-chapter,.rail-mark-timeline){opacity:0!important;visibility:hidden!important}
html.mhc-section-rail-ready .rail-mark.is-timeline>.mhc-rail-section-rest{opacity:0}
html.mhc-section-rail-ready .rail-mark.is-timeline>.rail-mark-timeline{opacity:1!important;visibility:visible!important;filter:none}
html.mhc-section-rail-ready .rail-mark.is-timeline .rail-mark-era-name{display:none}
html.mhc-section-rail-ready .rail-mark.is-timeline .rail-mark-year{display:inline;font-size:22px;font-variant-numeric:tabular-nums}
html.mhc-section-rail-ready [data-chapter-sequence-dock],
html.mhc-section-rail-ready body.chapter-reading .chapter-reader-bar,
html.mhc-section-rail-ready body.chapter-reading .anchor-nav{display:none!important}
html.mhc-section-rail-ready .reading-nav-slot:has(>[data-chapter-sequence-dock]){height:0!important;min-height:0!important;margin:0!important;padding:0!important}
html.mhc-section-rail-ready [data-scroll-minimize]::after{display:none!important}
html.mhc-section-rail-ready{--mhc-section-scroll-inset:28px;scroll-padding-top:0}
html.mhc-section-rail-ready :is(#timeline-convergence,#timeline-stage,#timeline-controls,#frame-register,#frame-findings,#frame-full-arguments,#era-instruments,#instrument,#evidence,#comparison,#reading-key,#constellation,#institutions,#profiles,#after-network,#source,#control,#transfer,#use,#effect,#trace,#atlas,#finding,#sum-findings,#sum-boundary,#sum-chains,#sum-conclusion,#bibliography,#sec-about,#about-authorship,#about-corpus,#about-limits,#about-contact){scroll-margin-top:var(--mhc-section-scroll-inset)}

/* The focused About room retains its compact context bar without the retired
   previous/next controls. Only its surface finish is refined here. */
.chapter-reading .chapter-reader-bar{
  background:linear-gradient(135deg,rgba(var(--mhc-ground-rgb),.9),rgba(var(--mhc-ground-rgb),.7))!important;
  border-bottom-color:var(--elastic-glass-edge)!important;
  box-shadow:0 16px 42px rgba(var(--mhc-shadow-rgb),.14),inset 0 1px 0 var(--elastic-glass-highlight)!important;
  backdrop-filter:blur(24px) saturate(138%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(138%)!important;
}
.chapter-reader-bar button:hover,.chapter-reader-bar button:focus-visible{
  background:color-mix(in srgb,var(--mhc-ink) 8%,transparent)!important;
  border-radius:999px;
}
/* The wide hero lockup is centered in the rail-safe field, but reads as an
   editorial left edge. The numeral hangs in its own column so it marks the
   sequence without pushing the title away from the visual center. */
@media(min-width:1101px){
  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero],
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sec-head[data-chapter-hero]{
    grid-template-columns:minmax(0,min(640px,calc(100% - 220px)));
    grid-template-rows:auto auto;
    justify-content:center;
    justify-items:start;
    align-content:center;
    column-gap:0;
    row-gap:clamp(28px,4vh,40px);
    padding-right:clamp(28px,3.2vw,48px);
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-title,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-title{
    position:relative;
    grid-column:1;
    align-self:end;
    width:100%;
    text-align:left;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero .hero-number,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-number{
    position:absolute;
    top:0;
    right:calc(100% + clamp(28px,3.4vw,52px));
    width:max-content;
    margin:0;
    text-align:right;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-title h1,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-title h2{
    margin-inline:0;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-reading,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-reading{
    grid-column:1;
    align-self:start;
    justify-items:start;
    width:min(100%,54ch);
    max-width:54ch;
    text-align:left;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-reading :is(.scroll-cue,p),
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading :is(.frame-scroll-cue,p),
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-reading :is(.sum-scroll-cue,p){
    margin-inline:0;
  }

  /* Frames carries a substantially longer, sourced quotation. Give the
     numeral a real column so the complete lockup, rather than only the copy
     column, is optically centered in the rail-safe field. */
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero]{
    grid-template-columns:clamp(150px,12vw,188px) minmax(0,min(600px,calc(100% - 240px)));
    grid-template-rows:auto auto;
    justify-content:center;
    column-gap:clamp(42px,4vw,64px);
    row-gap:clamp(30px,4vh,42px);
    padding-inline:clamp(28px,3.2vw,48px);
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:subgrid;
    align-items:start;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number{
    position:static;
    grid-column:1;
    width:auto;
    text-align:right;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2{
    grid-column:2;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading{
    grid-column:2;
    justify-self:start;
    width:min(100%,52ch);
    max-width:52ch;
  }
}

/* At laptop widths there is still enough rail-safe room for the same side
   numeral, but the title column tightens so the sequence marker never falls
   underneath the menu rail. Compact screens resume the stacked source layout. */
@media(min-width:901px) and (max-width:1100px){
  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero],
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sec-head[data-chapter-hero]{
    grid-template-columns:minmax(0,min(520px,calc(100% - 160px)));
    grid-template-rows:auto auto;
    justify-content:center;
    justify-items:start;
    align-content:center;
    column-gap:0;
    row-gap:clamp(26px,3.5vh,36px);
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-title,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-title{
    position:relative;
    grid-column:1;
    align-self:end;
    width:100%;
    text-align:left;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero .hero-number,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-number{
    position:absolute;
    top:0;
    right:calc(100% + clamp(24px,3vw,32px));
    width:max-content;
    margin:0;
    text-align:right;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-title h1,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-title h2,
  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-reading :is(.scroll-cue,p),
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading :is(.frame-scroll-cue,p),
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-reading :is(.sum-scroll-cue,p){
    margin-inline:0;
  }

  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero>.hero-reading,
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading,
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sum-hero-reading{
    grid-column:1;
    align-self:start;
    justify-items:start;
    width:min(100%,54ch);
    max-width:54ch;
    text-align:left;
  }

  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero]{
    grid-template-columns:clamp(112px,13vw,138px) minmax(0,min(500px,calc(100% - 180px)));
    grid-template-rows:auto auto;
    justify-content:center;
    column-gap:clamp(28px,3vw,36px);
    row-gap:clamp(26px,3.5vh,36px);
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:subgrid;
    align-items:start;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number{
    position:static;
    grid-column:1;
    width:auto;
    text-align:right;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2{
    grid-column:2;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-reading{
    grid-column:2;
    width:min(100%,50ch);
    max-width:50ch;
  }
}

@media(max-width:1040px){
  /* This breakpoint used to restate the column, the capsule and then every
     offset measured from them as a separate literal, each of which happened to
     agree with the others until one of them moved. Only the drawn sizes are
     restated now, in the same scaled form the desktop column uses, and the
     capsule, the reservation, the copy-safe inset and both irises follow from
     them exactly as they do above. The rail's own rule needs nothing said
     about its template or its padding for the same reason. */
  :root{--elastic-rail-width:max(var(--elastic-rail-min-width),calc(64px * var(--elastic-rail-scale)));--elastic-rail-height:min(calc(640px * var(--elastic-rail-scale)),calc(100svh - 32px));--elastic-rail-pad:calc(6px * var(--elastic-rail-scale));--elastic-rail-inset:calc(6px * var(--elastic-rail-scale));--elastic-rail-left:6px;--elastic-drawer-left:0px;--elastic-drawer-width:min(500px,calc(100vw - 12px));--elastic-page-safe-left:calc(var(--elastic-content-left) + 26px)}
  .chapter-drawer,.mhc-chapter-drawer{width:min(var(--elastic-drawer-width),calc(100vw - 32px))}
  .drawer-inner,.mhc-drawer-inner{padding-left:82px}
}

@media(max-width:760px){
  :root{--elastic-rail-width:max(var(--elastic-rail-min-width),calc(58px * var(--elastic-rail-scale)));--elastic-rail-height:min(calc(620px * var(--elastic-rail-scale)),calc(100svh - 28px));--elastic-rail-pad:calc(5px * var(--elastic-rail-scale));--elastic-rail-inset:calc(5px * var(--elastic-rail-scale));--elastic-rail-gap:calc(8px * var(--elastic-rail-scale));--elastic-rail-left:7px;--elastic-drawer-left:0px;--elastic-drawer-width:calc(100vw - 12px);--elastic-page-safe-left:calc(var(--elastic-content-left) + 23px)}
  .chapter-drawer,.mhc-chapter-drawer{width:calc(100vw - 12px);border-radius:36px}
  .drawer-inner,.mhc-drawer-inner{padding:18px 16px 18px 70px}
  .drawer-head,.mhc-drawer-head{min-height:28px}
  .chapter-list a,.mhc-chapter-list a{grid-template-columns:24px minmax(0,1fr);gap:8px;padding-inline:9px}
  .chapter-copy,.mhc-chapter-copy{padding-block:12px}
  .chapter-title,.mhc-chapter-title{font-size:clamp(22px,7vw,28px)}
  .mhc-rail-section-rest{left:7px;right:7px;font-size:10.5px!important;letter-spacing:.065em!important}
  [data-chapter-sequence-dock]{
    top:6px!important;
    left:6px!important;
    right:6px!important;
    width:auto!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:"method links";
    gap:6px;
    min-height:68px!important;
    margin-inline:0!important;
  }
  .mhc-archive-enabled.chapter-reading .frame-local-nav[data-chapter-sequence-dock],
  .mhc-archive-enabled.chapter-reading .sum-local-nav[data-chapter-sequence-dock]{margin-inline:0!important}
  .reading-nav-slot:has(>[data-chapter-sequence-dock]){height:80px!important}
  [data-chapter-sequence-dock]>.chapter-method-pill{grid-area:method;padding-inline:13px!important}
  [data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links)>a{padding-inline:13px!important}
  [data-chapter-sequence-dock]>:is(.reading-nav-links,.frame-local-links,.sum-local-links){grid-area:links;width:100%;max-width:100%}
  .mhc-xref-cluster{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - var(--elastic-content-left) - 24px)}
  .mhc-xref-ledger{right:0;width:100%}
}

/* Frames final hero: keep the aperture and word centered as one composition,
   while the chapter index hangs from the word's upper-left corner exactly as
   it does in the Timeline title lockup. */
@media(min-width:901px){
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero]{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    justify-content:stretch;
    justify-items:center;
    align-content:stretch;
    column-gap:0;
    row-gap:0;
    padding:0;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title{
    position:relative;
    grid-column:1;
    grid-row:1;
    align-self:center;
    justify-self:center;
    display:block;
    width:fit-content;
    max-width:calc(100% - clamp(72px,8vw,112px));
    padding:0;
    text-align:center;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number{
    position:absolute;
    top:.05em;
    right:calc(100% + clamp(10px,1.2vw,18px));
    width:max-content;
    margin:0;
    font:700 clamp(10px,.8vw,12px)/1 var(--mono);
    text-align:right;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2{
    grid-column:1;
    max-width:7ch;
    margin:0;
    text-align:center;
  }
}

@media(max-width:900px){
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero]{
    min-height:max(100svh,820px);
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    justify-content:stretch;
    justify-items:center;
    align-content:stretch;
    gap:0;
    padding:0;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title{
    position:relative;
    grid-column:1;
    grid-row:1;
    align-self:center;
    justify-self:center;
    display:block;
    width:fit-content;
    max-width:calc(100% - clamp(54px,15vw,78px));
    padding:0;
    text-align:center;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-number{
    position:absolute;
    top:.05em;
    right:calc(100% + clamp(10px,1.2vw,18px));
    width:max-content;
    margin:0;
    font:700 clamp(10px,.8vw,12px)/1 var(--mono);
    text-align:right;
  }
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .frame-hero-title h2{
    max-width:7ch;
    margin:0;
    text-align:center;
  }
}

@media(max-width:620px){
  [data-chapter-sequence-dock="frames"]>.chapter-method-pill{
    width:56px;
    min-width:56px;
    padding-inline:0!important;
  }
  [data-chapter-sequence-dock="frames"]>.chapter-method-pill span{display:none}
  html:not(.mhc-section-rail-ready) body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] :is(#frame-anatomy,#frame-register,#frame-complex,#frame-chronology,#frame-findings){scroll-margin-top:150px}
}

@media(hover:none){
  .mhc-rail-section-rest{padding-bottom:42px}
  body.drawer-open #menu-toggle .menu-icon--menu,
  body.mhc-nav-open #mhc-menu-toggle .mhc-menu-icon--menu,
  body.chapter-search-open .chapter-search>.chapter-search-icon--search{opacity:0;transform:rotate(12deg) scale(1.12);filter:blur(3px)}
  body.drawer-open #menu-toggle .menu-icon--close,
  body.mhc-nav-open #mhc-menu-toggle .mhc-menu-icon--close,
  body.chapter-search-open .chapter-search>.chapter-search-icon--close{opacity:1;transform:none;filter:blur(0)}
}

@media(prefers-reduced-motion:reduce){
  .chapter-drawer,.mhc-chapter-drawer{clip-path:none;transition-duration:.01ms!important}
  .rail-progress,.mhc-rail-progress,.rail-mark-progress{transition:background .2s ease}
  #menu-toggle .menu-icon--close,#mhc-menu-toggle .mhc-menu-icon--close,.chapter-search>.chapter-search-icon{transition:none}
  .chapter-list a::before,.mhc-chapter-list a::before{transform:none;transition:opacity .12s ease}
  .chapter-title,.mhc-chapter-title{transform:none!important;transition:none}
  [data-chapter-sequence-dock]{transform:none;transition:none}
  .mhc-rail-pin-glyph{transition:opacity .12s ease}
  .is-pin-holding .mhc-rail-pin-glyph{transform:none}
  :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-notice{transform:translateY(-50%);transition:opacity .12s ease,visibility 0s linear .12s}
  :is(.archive-rail,.mhc-archive-rail)[data-pin-feedback]>.mhc-rail-pin-notice{transform:translateY(-50%)}
  .mhc-xref-return,.mhc-xref-beginning,.mhc-xref-ledger{transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .01ms linear;transform:none!important}
}

@media print{
  .archive-rail,.mhc-archive-rail,.chapter-drawer,.mhc-chapter-drawer,.drawer-scrim,.mhc-drawer-scrim,.mhc-xref-cluster{display:none!important}
  body:not(.mhc-archive-enabled)>.site-shell{margin-left:0}
  body.mhc-archive-enabled{padding-left:0}
  body.mhc-archive-enabled.chapter-reading[data-chapter='about'] #sec-about::before{content:none}
  body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero{width:auto;margin-left:0;padding-left:var(--gutter,0px)}
  body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero],
  body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary .sec-head[data-chapter-hero]{margin-inline:0;padding-inline:var(--layout-gutter,20px)}
}