/* Generated by tools/build-mobile-reading.mjs from tools/mobile-reading/*.css; edit the partials, not this file. */
/* ---- 00-foundation.css ----------------------------------------------------- */
/* ===========================================================================
   mobile-reading · the phone layer: the desktop's instruments, seated for
   the hand
   ---------------------------------------------------------------------------
   Every shipped page links this sheet last, immediately before its head
   closes, and every declaration below the first rule sits inside the phone
   query, a viewport at or under 700px or a coarse-pointer landscape viewport
   under 1000 by 500, so a desktop reader receives a cascade that has not
   changed by one rule. That much is inherited from the layer this replaces.
   What is not inherited is its remedy. The retired layer took the rail, the
   register, the pill menu and the masthead away from a phone and let every
   composition fall to its reduced-motion form; this one keeps all of them and
   seats each where a hand can use it:

   - the rail stands along the foot of the page, which is one of the three
     docks the desktop already offers, with its capsules sized to the 44px a
     finger needs and nothing else about them restyled;
   - the register leaves the right margin, where it stood on the reading edge,
     and opens as a sheet out of the identity capsule instead;
   - the pill menu keeps its field and its wheel, over a veil that covers the
     page rather than an ellipse that leaves its edges readable;
   - archive search opens over the whole screen with its field at the top,
     where the keyboard cannot cover it;
   - the masthead keeps its one line and the appearance dot at its end;
   - the covers, the quotations, the arrivals and the wash run as authored,
     and each chapter's instrument takes the phone composition written for it
     in the partials that follow this one.

   The rule for a following session: a phone fix still belongs in this layer
   rather than in a chapter's own stylesheet, and a declaration here that
   needs !important needs it because a chapter script writes the same
   property inline, or because the desktop states it at a specificity this
   file cannot otherwise meet without restating the whole selector.
   =========================================================================== */

/* Elements this layer builds must not survive a resize into the desktop. */
.mhc-phone-scrim,.mhc-phone-scrub,.mhc-phone-register-head,.mhc-phone-search-close{display:none}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  :root{
    /* The side gutter every reading column keeps on a phone. */
    --mhc-phone-gutter:18px;
    /* The foot rail: a 44px capsule, 6px of padding around it, and the gap
       it keeps above the home indicator. --mhc-phone-foot is the height of
       everything the rail claims from the bottom of the viewport, and is the
       number any fixed control hanging from the foot must clear. */
    --mhc-phone-capsule:44px;
    --mhc-phone-bar:56px;
    --mhc-phone-bar-gap:8px;
    --mhc-phone-safe-bottom:env(safe-area-inset-bottom,0px);
    --mhc-phone-foot:calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) + var(--mhc-phone-safe-bottom));
    /* The rail's own arithmetic, taken to the scale at which a capsule is
       exactly 44px, so that every derived inset and iris follows it. */
    --elastic-rail-scale:.72;
    --elastic-rail-width:var(--mhc-phone-bar);
    --elastic-rail-pad:6px;
    --elastic-rail-pad-lead:6px;
    --elastic-rail-gap:8px;
    --elastic-rail-control-size:var(--mhc-phone-capsule);
    --elastic-rail-bar-height:var(--mhc-phone-bar);
    --elastic-rail-bar-length:calc(100vw - 24px);
    --elastic-rail-bar-claim:var(--mhc-phone-foot);
    --mhc-rail-bottom-clearance:var(--mhc-phone-foot);
    --elastic-rail-free-inset:var(--mhc-phone-gutter);
    --elastic-page-safe-left:var(--mhc-phone-gutter);
    --elastic-copy-safe-left:var(--mhc-phone-gutter);
    /* The label floor rises one step, as it did under the retired layer:
       ten-pixel mono at arm's length is a texture rather than a label. */
    --mhc-type-2xs:11px;
    --mhc-type-xs:12px;
  }
  /* Nothing on a phone may push the page sideways. */
  html,body{overflow-x:clip}
  /* The covers set their chapter numeral at a literal 10px below 759px,
     under the floor the phone raises to 11px, and one step up is all the
     lockup's gap and offset need. */
  :root{--chapter-number-size:var(--mhc-type-2xs)}
  .woven-cover-number{font-size:var(--mhc-type-2xs)}
}

/* ---- 05-entrance.css ------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The entrance notice
   ---------------------------------------------------------------------------
   The landing carried a dialog on a phone until 20 September, when the mobile
   audit retired it together with the layer it introduced. It returns here,
   because the archive's timeline, networks and tables still read best at the
   scale they were drawn for, and a reader holding a phone should know that
   before the first gesture rather than discover it in the Claims-makers
   constellation.

   The dialog the audit retired was a centerd card on the landing only, which
   meant a reader who arrived through a shared chapter link never saw it and a
   reader who did see it had to reach the middle of the screen to dismiss it.
   This one is built by 05-entrance.js on whichever page opens a session, and
   it stands at the foot of the screen, on the safe-area inset, so that its
   one action sits under the thumb exactly where the foot rail will stand once
   the notice is gone.

   Its material is the archive's glass rather than a plate, with the rail
   capsule's two inset rings standing for its edge, and its lockup is the
   masthead's, so the notice reads as the archive speaking rather than as the
   browser interrupting it. Every rule sits inside the phone query, which is
   the only place the script ever builds the element.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  .mhc-phone-entrance{
    --entrance-ease:cubic-bezier(.16,1,.3,1);
    --entrance-gutter:12px;
    --entrance-radius:30px;
    box-sizing:border-box;
    width:min(460px,calc(100% - (var(--entrance-gutter) * 2)));
    max-width:none;
    max-height:calc(100dvh - (var(--entrance-gutter) * 2) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    margin:auto auto calc(var(--entrance-gutter) + env(safe-area-inset-bottom,0px));
    padding:26px 22px 14px;
    overflow:auto;
    overscroll-behavior:contain;
    border:0;
    border-radius:var(--entrance-radius);
    background:
      linear-gradient(180deg,rgba(var(--mhc-float-rgb),.94),rgba(var(--mhc-float-rgb),.84));
    color:var(--mhc-ink);
    font-family:var(--mhc-font-sans);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--mhc-ink) 14%,transparent),
      inset 0 0 0 4px color-mix(in srgb,var(--mhc-ground) 30%,transparent),
      inset 0 1px 0 4px color-mix(in srgb,var(--mhc-ink) 5%,transparent),
      0 28px 80px rgba(var(--mhc-shadow-rgb),.28),
      0 4px 14px rgba(var(--mhc-shadow-rgb),.1);
    -webkit-backdrop-filter:blur(30px) saturate(1.3);
    backdrop-filter:blur(30px) saturate(1.3);
    -webkit-tap-highlight-color:transparent;
  }
  .mhc-phone-entrance[open]{
    display:flex;
    flex-direction:column;
    animation:mhc-entrance-rise .72s var(--entrance-ease) both;
  }
  .mhc-phone-entrance::backdrop{
    background:rgba(var(--mhc-ground-rgb),.46);
    -webkit-backdrop-filter:blur(14px) saturate(.9);
    backdrop-filter:blur(14px) saturate(.9);
    animation:mhc-entrance-veil .5s ease both;
  }
  .mhc-phone-entrance.is-leaving{animation:mhc-entrance-fall .3s cubic-bezier(.4,0,.8,.3) both}
  .mhc-phone-entrance.is-leaving::backdrop{animation:mhc-entrance-veil-out .34s ease both}

  /* The parts arrive in reading order, a few frames apart, after the sheet
     has most of its travel behind it. */
  .mhc-phone-entrance-part{animation:mhc-entrance-part .64s var(--entrance-ease) both;animation-delay:calc(.14s + var(--part,0) * .05s)}

  .mhc-phone-entrance-kicker{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 18px;
    color:var(--mhc-ink-3);
    font:500 var(--mhc-type-xs)/1 var(--mhc-font-mono);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .mhc-phone-entrance-kicker::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--mhc-accent);
    box-shadow:0 0 0 4px rgba(var(--mhc-accent-rgb),.16);
    flex:none;
  }

  /* The lockup is the masthead's, set at display size: the preface at two
     thirds of the subject and a lighter italic, the subject at the system's
     one emphasis weight, and only the word Crisis in the accent. */
  .mhc-phone-entrance h2{
    margin:0;
    color:var(--mhc-ink);
    font:600 clamp(30px,8.6vw,36px)/.98 var(--mhc-font-sans);
    letter-spacing:-.058em;
    text-wrap:balance;
  }
  .mhc-phone-entrance h2 i{
    display:block;
    margin-bottom:.16em;
    font-size:.68em;
    font-style:italic;
    font-weight:350;
    letter-spacing:-.044em;
  }
  .mhc-phone-entrance h2 b{font-weight:inherit;color:var(--mhc-accent-ink)}
  .mhc-phone-entrance-span{
    margin:12px 0 0;
    color:var(--mhc-ink-3);
    font:400 var(--mhc-type-xs)/1.3 var(--mhc-font-mono);
    letter-spacing:.04em;
  }

  .mhc-phone-entrance-copy{
    margin:22px 0 0;
    padding-top:18px;
    border-top:1px solid color-mix(in srgb,var(--mhc-ink) 12%,transparent);
  }
  .mhc-phone-entrance-copy p{margin:0}
  .mhc-phone-entrance-warning{
    color:var(--mhc-ink);
    font-size:var(--mhc-type-xl);
    font-weight:550;
    line-height:1.3;
    letter-spacing:-.022em;
    text-wrap:balance;
  }
  .mhc-phone-entrance-description{
    margin-top:8px!important;
    color:var(--mhc-ink-2);
    font-size:var(--mhc-type-lg);
    line-height:1.48;
    letter-spacing:-.012em;
    text-wrap:pretty;
  }

  .mhc-phone-entrance-actions{
    display:grid;
    gap:4px;
    margin:24px 0 0;
  }
  .mhc-phone-entrance-actions button{
    -webkit-appearance:none;
    appearance:none;
    margin:0;
    border:0;
    font-family:inherit;
    cursor:pointer;
    touch-action:manipulation;
  }
  .mhc-phone-entrance-continue{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    min-height:56px;
    padding:8px 8px 8px 22px;
    border-radius:999px;
    background:var(--mhc-ink);
    color:var(--mhc-ground);
    font-size:var(--mhc-type-lg);
    font-weight:600;
    letter-spacing:-.018em;
    text-align:left;
    transition:background-color .24s ease,color .24s ease,transform .32s var(--entrance-ease);
  }
  .mhc-phone-entrance-continue svg{
    width:40px;
    height:40px;
    padding:11px;
    box-sizing:border-box;
    border-radius:50%;
    background:var(--mhc-accent);
    color:var(--mhc-on-accent);
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
    transition:transform .32s var(--entrance-ease);
  }
  .mhc-phone-entrance-continue:active{transform:scale(.98)}
  .mhc-phone-entrance-continue:active svg{transform:translateX(3px)}
  @media (hover:hover){
    .mhc-phone-entrance-continue:hover{background:var(--mhc-action-hover);color:var(--mhc-action-hover-ink)}
    .mhc-phone-entrance-continue:hover svg{background:var(--mhc-ink);color:var(--mhc-ground)}
  }
  .mhc-phone-entrance-send{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    background:transparent;
    color:var(--mhc-ink-2);
    font-size:var(--mhc-type-md);
    font-weight:500;
    letter-spacing:-.008em;
    transition:color .2s ease,background-color .2s ease;
  }
  .mhc-phone-entrance-send svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
  }
  .mhc-phone-entrance-send:active{background:color-mix(in srgb,var(--mhc-ink) 7%,transparent)}
  .mhc-phone-entrance-send[data-state="done"]{color:var(--mhc-ink)}
  .mhc-phone-entrance :is(.mhc-phone-entrance-continue,.mhc-phone-entrance-send):focus-visible{
    outline:2px solid var(--mhc-accent-ink);
    outline-offset:3px;
  }

  /* A landscape phone has the width and not the height, so the sheet takes
     the lockup and the copy side by side and keeps the actions beneath. */
  @media (max-height:500px) and (min-width:560px){
    .mhc-phone-entrance{
      width:min(720px,calc(100% - (var(--entrance-gutter) * 2) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
      padding:20px 20px 12px;
    }
    .mhc-phone-entrance[open]{
      display:grid;
      grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
      column-gap:28px;
      align-items:start;
    }
    .mhc-phone-entrance-kicker,.mhc-phone-entrance h2,.mhc-phone-entrance-span{grid-column:1}
    .mhc-phone-entrance-copy{grid-column:2;grid-row:1 / span 3;margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid color-mix(in srgb,var(--mhc-ink) 12%,transparent)}
    .mhc-phone-entrance-actions{grid-column:1 / -1;grid-template-columns:1fr auto;align-items:center;margin-top:18px}
  }

  html:has(.mhc-phone-entrance[open]){overflow:hidden}

  @keyframes mhc-entrance-rise{
    from{opacity:0;transform:translateY(calc(40px + 6vh)) scale(.985)}
    to{opacity:1;transform:none}
  }
  @keyframes mhc-entrance-fall{
    from{opacity:1;transform:none}
    to{opacity:0;transform:translateY(28px) scale(.99)}
  }
  @keyframes mhc-entrance-veil{from{opacity:0}to{opacity:1}}
  @keyframes mhc-entrance-veil-out{from{opacity:1}to{opacity:0}}
  @keyframes mhc-entrance-part{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
  }
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .mhc-phone-entrance[open],.mhc-phone-entrance.is-leaving{animation-name:mhc-entrance-veil;animation-duration:.2s}
    .mhc-phone-entrance.is-leaving{animation-name:mhc-entrance-veil-out}
    .mhc-phone-entrance-part{animation:none}
    .mhc-phone-entrance :is(.mhc-phone-entrance-continue,.mhc-phone-entrance-continue svg){transition:none}
  }
}

/* ---- 10-rail.css ----------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The rail at the foot
   ---------------------------------------------------------------------------
   rail-dock.css already describes a rail lying along the foot of the page:
   its row template, its identity label lying down, its progress filling from
   the leading edge, its irises struck from the capsules' new centers, and the
   list of fixed and sticky surfaces that have to give the bar its height
   back. The phone takes that dock whole and changes three things about it.
   The capsules are 44px, which is the size a finger needs and the size the
   rail's own floor already guarantees; the handle is gone, because a phone
   has one dock and nowhere to carry the rail to; and the bar sits on the
   safe-area inset rather than on the viewport's edge, so the home indicator
   never lands on a capsule.

   The selectors below repeat rail-dock.css's own shapes on purpose. Each of
   them has to meet a rule of equal weight there, and this sheet is read last.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  /* Phone chrome shares the expanded menus' translucent glass. Keep only
     inset edges, so the material stays inside each rounded surface while
     popovers remain free to leave the rail box. The fallback serves landing,
     which does not load the elastic shell's tokens. */
  html.mhc-wayfinding-ready body>:is(.rail-home-card,.archive-rail,.mhc-archive-rail),
  .landing-masthead .landing-home-card{
    background:var(--elastic-glass-surface,linear-gradient(135deg,rgba(var(--mhc-float-rgb),.9),rgba(var(--mhc-float-rgb),.66)))!important;
    box-shadow:var(--elastic-capsule-bevel,inset 0 0 0 1px var(--mhc-hairline))!important;
    backdrop-filter:blur(24px) saturate(138%)!important;
    -webkit-backdrop-filter:blur(24px) saturate(138%)!important;
  }
  /* The phone's archive name, appearance and Search share one compact row.
     Search closes the right edge; its source keeps the chapter's listeners.
     Geometry is ready before script moves the controls, including on refresh. */
  html.mhc-wayfinding-ready body>.rail-home-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px 44px;
    align-items:center;
    gap:2px;
    width:min(420px,calc(100vw - 24px));
    height:56px;
    padding:6px;
    border-radius:20px;
    box-sizing:border-box;
  }
  html.mhc-wayfinding-ready body>.rail-home-card>.rail-home{
    grid-column:1;
    grid-row:1;
    order:0!important;
    min-width:0;
    min-height:44px;
    width:100%;
    height:44px;
    box-sizing:border-box;
    padding:0 6px;
    overflow:hidden;
    font-size:clamp(12px,calc(7vw - 10px),18px);
    line-height:44px;
    white-space:nowrap;
    flex-wrap:nowrap;
    text-overflow:ellipsis;
  }
  html.mhc-wayfinding-ready body>.rail-home-card>.rail-home i{margin-right:.2em}
  html.mhc-wayfinding-ready .rail-home-details{display:none!important}
  html.mhc-wayfinding-ready .rail-home-card>.rail-appearance{
    grid-column:2;
    grid-row:1;
    order:0!important;
    width:44px;
    height:44px;
    margin:0!important;
    inset:auto!important;
    transform:none!important;
  }
  html.mhc-wayfinding-ready body:is(.drawer-open,.mhc-nav-open)>.rail-home-card{
    visibility:hidden;
    pointer-events:none;
  }
  .mhc-phone-header-action{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--mhc-ink);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mhc-phone-header-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mhc-phone-header-action:is(:hover,:focus-visible),
  .mhc-phone-header-action[aria-expanded="true"]{
    background:var(--way-hover-surface);
    box-shadow:inset 0 0 0 1px var(--way-hover-border);
  }
  .mhc-phone-header-action:focus-visible{outline:2px solid var(--mhc-accent-ink);outline-offset:2px}

  :root,html.mhc-rail-dock-ready{
    --elastic-rail-head:0px;
    /* The irises open from the capsules as they now stand. */
    --elastic-drawer-origin-x:calc(12px + 6px + (var(--mhc-phone-capsule) / 2));
    --elastic-drawer-origin-y:calc(100svh - var(--mhc-phone-bar-gap) - var(--mhc-phone-safe-bottom) - (var(--mhc-phone-bar) / 2));
    --elastic-search-origin-x:calc(var(--elastic-drawer-origin-x) + var(--mhc-phone-capsule) + var(--elastic-rail-gap));
    --elastic-search-origin-y:var(--elastic-drawer-origin-y);
  }

  .mhc-rail-grip,.mhc-rail-landing{display:none!important}

  :root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){
    left:50%;
    right:auto;
    top:auto;
    bottom:calc(var(--mhc-phone-bar-gap) + var(--mhc-phone-safe-bottom));
    width:var(--elastic-rail-bar-length);
    height:var(--mhc-phone-bar);
    grid-template-rows:minmax(0,1fr);
    grid-template-columns:var(--mhc-phone-capsule) var(--mhc-phone-capsule) minmax(0,1fr) var(--mhc-phone-capsule);
    gap:var(--elastic-rail-gap);
    padding:6px;
    transform:translateX(-50%);
    transition:transform .52s var(--elastic-ease);
    /* A long press on a capsule must not open the system's callout. */
    -webkit-touch-callout:none;
    user-select:none;
    -webkit-user-select:none;
  }
  html.mhc-phone-header-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){
    width:max-content!important;
  }
  html.mhc-phone-header-ready.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>:is(.chapter-search,#search-toggle,#mhc-search-toggle,.rail-top,.mhc-rail-top){
    display:none!important;
  }
  html.mhc-phone-header-ready.mhc-wayfinding-ready .rail-home-card>.mhc-phone-header-search{grid-column:3;grid-row:1;order:0!important}
  html.mhc-phone.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-grip{display:none!important}
  /* Each section takes its measured width beside the chapter control. The
     old full-width row overflows a bottom bar that remains one line tall. */
  html.mhc-phone-header-ready.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){
    order:5;
    flex:0 1 auto;
    width:var(--mhc-counter-w)!important;
    min-width:44px!important;
    margin-left:4px!important;
  }
  html.mhc-phone-header-ready.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail).has-open-window>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){
    width:var(--rail-held-w)!important;
  }
  html.mhc-phone-header-ready.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail) .mhc-rail-counter-item{width:100%;box-sizing:border-box}
  html.mhc-phone-header-ready.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail) .mhc-rail-counter-label{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis!important;
  }

  /* Return navigation has its own right-aligned capsule below the header.
     The body portal keeps it clear of the bottom rail's transformed box. */
  html.mhc-phone.mhc-wayfinding-ready body>.rail-way{
    position:fixed!important;
    left:auto!important;
    right:max(12px,env(safe-area-inset-right))!important;
    top:calc(max(12px,env(safe-area-inset-top)) + 56px + 10px)!important;
    bottom:auto!important;
    z-index:1101;
    width:max-content!important;
    height:44px;
    padding:4px;
    box-sizing:content-box;
    background:var(--elastic-capsule-surface);
    box-shadow:var(--elastic-capsule-shadow);
    backdrop-filter:var(--elastic-capsule-blur);
    -webkit-backdrop-filter:var(--elastic-capsule-blur);
    transform:none!important;
  }
  html.mhc-phone.mhc-wayfinding-ready body>.rail-way .mhc-xref-return{height:44px}
  html.mhc-phone.mhc-wayfinding-ready body>.rail-way .mhc-xref-trail-toggle{
    height:44px;
    min-height:44px;
    max-width:none;
    padding:0 10px;
    font-size:11px;
  }
  /* The narrow desktop chip supplies a count-only pseudo-element. The
     phone shows the full label, so that extra grid item would push it down. */
  html.mhc-phone.mhc-wayfinding-ready body>.rail-way .mhc-xref-trail-toggle::before{content:none}
  html.mhc-phone.mhc-wayfinding-ready body>.rail-way .mhc-xref-ledger{
    width:calc(100vw - 24px);
    box-sizing:border-box;
  }
  :root[data-rail-dock="bottom"] :is(#menu-toggle,#mhc-menu-toggle){grid-row:1;grid-column:1}
  :root[data-rail-dock="bottom"] :is(.chapter-search,#search-toggle,#mhc-search-toggle){grid-row:1;grid-column:2}
  :root[data-rail-dock="bottom"] :is(.archive-rail>.rail-index,.archive-rail>.rail-mark,.mhc-archive-rail>.mhc-rail-identity){grid-row:1;grid-column:3}
  :root[data-rail-dock="bottom"] :is(.archive-rail>.rail-top,.mhc-archive-rail>.mhc-rail-top){grid-row:1;grid-column:4}
  /* A drag along the identity is the scrubber's, so the browser keeps only
     the vertical pan it needs to go on scrolling the page. Otherwise a
     sideways drag is taken for a pan, and the pointer is cancelled before
     the scrub can begin. */
  :root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){touch-action:pan-y}

  /* The identity reads along its own length, beside the pin at its leading
     edge. The touch rule in elastic-archive-shell.css reserves 42px beneath
     the label for the vertical column, which lying down lifts it out of the
     capsule, so that reserve is returned. */
  :root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity)>.mhc-rail-section-rest,
  :root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>[data-rail-pinned]>.mhc-rail-section-rest{
    inset:0 14px 0 40px;
    padding:0;
    justify-content:flex-start;
    font-size:11px!important;
    letter-spacing:.07em!important;
  }
  /* A chapter name can be too long for the capsule as well as a section's,
     "Measurement method" among them, so the chapter's part may shrink to an
     ellipsis too, and it gives way only after the section's part has. */
  :root[data-rail-dock="bottom"] .mhc-rail-section-rest>b{flex-shrink:0}
  :root[data-rail-dock="bottom"] .mhc-rail-section-rest>span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
  :root[data-rail-dock="bottom"] .mhc-rail-section-rest>em{flex-shrink:1000}
  :root[data-rail-dock="bottom"] .mhc-rail-pin-indicator{left:9px;top:50%;transform:translateY(-50%)}

  /* Without script nothing seats the rail at the foot, and none of its
     capsules would answer a press, so a phone reading the plain document is
     given the document alone. */
  :root:not([data-rail-dock]) :is(.archive-rail,.mhc-archive-rail){display:none}

  /* A woven cover's pause control stood 24px above the viewport's foot,
     which is under the rail's last capsule, so it rises above the bar. */
  .woven-motion-toggle{bottom:calc(var(--mhc-phone-foot) + 12px)}
  :root[data-rail-dock="bottom"] :is(.rail-progress,.mhc-rail-progress,.rail-mark-progress){inset:4px!important}

  /* A press answers with the capsule's own give rather than the system's
     gray flash, which would read as a second, flatter control. */
  :is(.archive-rail,.mhc-archive-rail) :is(button,a,[role="group"]){-webkit-tap-highlight-color:transparent}

  /* ---- the scrub preview ------------------------------------------------ */
  .mhc-phone-scrub{
    position:absolute;
    z-index:8;
    left:var(--phone-scrub-x,50%);
    bottom:calc(100% + 12px);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    align-items:baseline;
    width:max-content;
    max-width:calc(100vw - 48px);
    padding:10px 16px 11px;
    border-radius:var(--elastic-pill);
    background:var(--elastic-glass-surface);
    color:var(--elastic-light);
    box-shadow:var(--elastic-glass-shadow),inset 0 0 0 1px var(--elastic-glass-edge);
    backdrop-filter:blur(24px) saturate(138%);
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    opacity:0;
    transform:translate(-50%,8px) scale(.96);
    pointer-events:none;
    transition:opacity .16s ease,transform .32s var(--elastic-ease);
  }
  .mhc-phone-scrub small{
    color:var(--phone-scrub-accent,var(--mhc-accent-ink));
    font:500 12px/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    letter-spacing:.06em;
  }
  .mhc-phone-scrub b{
    min-width:0;
    overflow:hidden;
    font:400 17px/1.2 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    letter-spacing:-.018em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  html.mhc-phone-scrubbing .mhc-phone-scrub{opacity:1;transform:translate(-50%,0) scale(1)}
  .mhc-phone-scrub[hidden]{display:none}
  /* The Timeline's own preview opens upward out of the bar already; it only
     needs the glass the rest of the phone chrome wears. */
  :root[data-rail-dock="bottom"] .rail-scrub-preview{
    bottom:calc(100% + 16px);
    padding:10px 16px 11px;
    border-radius:var(--elastic-pill);
  }

  /* ---- receding ---------------------------------------------------------
     The rail sinks until only its upper edge stands above the inset, and the
     sliver the desktop draws over a cover is drawn on that edge; the
     capsules fade on the way down so that nothing half-visible can be
     pressed. A press anywhere on what remains brings the chrome back. */
  :is(.archive-rail,.mhc-archive-rail)::before{
    content:"";
    position:absolute;
    left:50%;
    top:3px;
    width:64px;
    height:5px;
    border-radius:var(--elastic-pill);
    background:color-mix(in srgb,var(--mhc-rail-section-accent,var(--mhc-chapter-color,var(--mhc-accent))) 34%,rgba(var(--mhc-float-rgb),.82));
    box-shadow:var(--elastic-capsule-shadow);
    opacity:0;
    transform:translateX(-50%) scaleX(.6);
    transition:opacity .2s ease,transform .44s var(--elastic-ease);
    pointer-events:none;
  }
  :is(.archive-rail,.mhc-archive-rail)>*{transition:opacity .22s ease,background .2s ease,color .2s ease,box-shadow .28s ease,transform .38s var(--elastic-ease)}
  html.mhc-phone-receded:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){
    transform:translate(-50%,calc(100% + var(--mhc-phone-bar-gap) - 14px));
  }
  html.mhc-phone-receded :is(.archive-rail,.mhc-archive-rail)>*{opacity:0;pointer-events:none}
  html.mhc-phone-receded :is(.archive-rail,.mhc-archive-rail)::before{opacity:1;transform:translateX(-50%) scaleX(1)}

  /* A narrow window with a pointer that can hover is a phone here too, and
     there the desktop's own minimized rail (withdrawn to a sliver until the
     pointer approaches it) would stand in for the receding one. The phone
     answers minimized with receding instead, so the hover rules are met
     here at their own weight, which is nine classes deep and can only be
     met with !important without restating every one of them. */
  @media (hover:hover) and (pointer:fine){
    :root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail){transform:translateX(-50%)!important;pointer-events:auto!important}
    html.mhc-phone-receded:root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail){transform:translate(-50%,calc(100% + var(--mhc-phone-bar-gap) - 14px))!important}
    :root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.rail-index,.rail-mark,.mhc-rail-action,.mhc-rail-identity){opacity:1!important;pointer-events:auto!important}
    html.mhc-phone-receded:root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.rail-index,.rail-mark,.mhc-rail-action,.mhc-rail-identity){opacity:0!important;pointer-events:none!important}
    :root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail)::after{content:none!important}
    :root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail)::before{
      inset:auto!important;
      left:50%!important;
      top:3px!important;
      width:64px!important;
      height:5px!important;
      opacity:0!important;
      transform:translateX(-50%) scaleX(.6)!important;
    }
    html.mhc-phone-receded:root[data-rail-dock="bottom"] body :is(.archive-rail,.mhc-archive-rail)::before{opacity:1!important;transform:translateX(-50%) scaleX(1)!important}
  }

  /* The return capsule and the Timeline's filter launcher hang from the foot
     and follow the rail down, so that they never float over empty ground. */
  :root[data-rail-dock="bottom"] .mhc-xref-cluster{
    right:12px;
    left:12px;
    width:auto;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    transition:transform .52s var(--elastic-ease);
  }
  html.mhc-phone-receded .mhc-xref-cluster{transform:translateY(calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) - 10px))}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    :root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail),
    :is(.archive-rail,.mhc-archive-rail)>*,
    :is(.archive-rail,.mhc-archive-rail)::before,
    .mhc-phone-scrub,
    .mhc-xref-cluster{transition-duration:.01ms!important}
  }
}

/* ---- 12-register.css ------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The register as a sheet
   ---------------------------------------------------------------------------
   The same element the desktop draws down the right margin, opened as a
   panel above the foot rail in the drawer's own glass. Each mark becomes a
   row with its numeral and its whole name, because a hand cannot approach a
   mark to read its label the way a pointer can; the rule that marks the
   reading's place stands on the row's leading edge instead of its trailing
   one, and the open section keeps the chapter's accent. The sheet grows out
   of the identity capsule, which is the control that opened it, so its
   reveal is clipped from the bar upward rather than faded in place.

   Several of the desktop's states are stated at a weight this sheet can only
   meet with !important: the label is an absolutely placed hover card there,
   and the withheld and blocked states both write a transform of their own.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  .mhc-section-register,
  .mhc-section-register.is-withheld,
  .mhc-section-register.is-dense{
    position:fixed;
    z-index:1060;
    left:12px;
    right:12px;
    top:auto;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    width:auto;
    max-height:min(62svh,560px);
    display:grid;
    grid-auto-rows:auto;
    gap:2px;
    align-content:start;
    justify-items:stretch;
    padding:6px 8px 10px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:28px;
    background:linear-gradient(145deg,rgba(var(--mhc-ground-rgb),.95),rgba(var(--mhc-ground-rgb),.86));
    box-shadow:0 30px 80px rgba(var(--mhc-shadow-rgb),.3),0 5px 18px rgba(var(--mhc-shadow-rgb),.1),inset 0 0 0 1px var(--elastic-glass-edge-soft),inset 0 1px 0 var(--elastic-glass-highlight);
    backdrop-filter:blur(30px) saturate(142%);
    -webkit-backdrop-filter:blur(30px) saturate(142%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px);
    clip-path:inset(calc(100% - 44px) 32% 0 32% round 22px);
    transition:opacity .16s ease,transform .52s var(--elastic-ease),clip-path .52s var(--elastic-ease),visibility 0s linear .52s;
  }
  /* The foot dock centers the register on the reading area with a top edge
     stated at the root's weight, which held the sheet to the lower half of
     the screen and let its rows fall to their floor, so that a two-line name
     ran into the row beneath it. The sheet's own edge and measure are stated
     at the same weight here, and every row keeps the height of what it holds
     while the sheet scrolls. */
  :root[data-rail-dock] .mhc-section-register{
    top:auto;
    max-height:min(62svh,560px);
    grid-auto-rows:max-content;
  }
  /* The return capsule floats above every page at a greater depth than the
     sheet, so while the sheet is open it is quieted under the scrim with the
     rest of the page rather than standing on the list. */
  html.mhc-phone-register-open .mhc-xref-cluster{z-index:1040}
  html.mhc-phone-register-open .mhc-section-register.mhc-section-register{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    clip-path:inset(0 round 28px);
    transition:opacity .12s ease,transform .56s var(--elastic-ease),clip-path .56s var(--elastic-ease),visibility 0s linear 0s;
  }

  .mhc-phone-register-head{
    display:flex;
    align-items:baseline;
    gap:9px;
    margin:10px 12px 8px 14px;
    color:var(--mhc-ink-3);
    font:500 11px/1.2 var(--mono,"Geist Mono",ui-monospace,monospace);
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .mhc-phone-register-head b{color:var(--mhc-rail-section-accent,var(--mhc-accent-ink));font-weight:500}
  .mhc-phone-register-head span{color:var(--mhc-ink);white-space:nowrap}
  .mhc-phone-register-head small{white-space:nowrap}
  .mhc-phone-register-head small{margin-left:auto;font:inherit;letter-spacing:inherit}

  .mhc-section-register .mhc-section-mark{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    place-items:center start;
    align-items:center;
    width:100%;
    min-width:0;
    height:auto;
    min-height:50px;
    padding:7px 14px 7px 0;
    border-radius:18px;
    color:color-mix(in srgb,var(--mhc-ink) 76%,transparent);
    text-align:left;
    -webkit-tap-highlight-color:transparent;
    transition:background .3s var(--elastic-ease),color .2s ease;
  }
  .mhc-section-register .mhc-section-mark:active{background:color-mix(in srgb,var(--mhc-ink) 7%,transparent)}
  .mhc-section-register .mhc-section-mark-index{
    display:grid;
    place-items:center;
    justify-self:stretch;
    width:44px;
    height:auto;
    font:500 12px/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    letter-spacing:.05em;
  }
  .mhc-section-register .mhc-section-mark .mhc-section-mark-label{
    position:static!important;
    display:block;
    width:auto;
    max-width:none!important;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:inherit;
    font:400 17px/1.25 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    letter-spacing:-.018em;
    text-align:left;
    white-space:normal;
    opacity:1!important;
    transform:none!important;
    pointer-events:none;
  }
  .mhc-section-register .mhc-section-mark-span{display:block;margin-top:3px;font-size:11px;opacity:.7}
  /* The row's rule is stated here in full, because the desktop now draws each
     mark as a bead and shares no more of it with the sheet than the pseudo
     element itself. It is drawn at its full length and scaled, so its
     extension on the open row is a composited transform. */
  .mhc-section-register .mhc-section-mark::after{
    top:50%;
    right:auto;
    left:0;
    width:3px;
    height:24px;
    margin-top:-12px;
    border-radius:0 var(--elastic-pill) var(--elastic-pill) 0;
    background:color-mix(in srgb,var(--mhc-ink) 30%,transparent);
    transform:scaleY(.46);
    transition:transform .4s var(--elastic-ease),background .4s var(--elastic-ease);
  }
  .mhc-section-register .mhc-section-mark.is-current::after{transform:scaleY(1);background:var(--mhc-rail-section-accent,var(--mhc-accent))}
  .mhc-section-register .mhc-section-mark.is-current{
    color:var(--mhc-ink);
    background:color-mix(in srgb,var(--mhc-rail-section-accent,var(--mhc-accent)) 17%,transparent);
  }
  .mhc-section-register .mhc-section-mark.is-method{color:var(--mhc-accent-ink)}
  .mhc-section-register .mhc-section-mark.is-method .mhc-section-mark-label::after{content:" \2192";font-size:.8em}
  .mhc-section-register .mhc-section-mark:focus-visible{outline:2px solid var(--mhc-accent-ink);outline-offset:-2px}

  /* The scrim closes the sheet and quiets the page behind it without
     erasing it, which is how the desktop's drawer treats the page too. */
  .mhc-phone-scrim{
    display:block;
    position:fixed;
    z-index:1045;
    inset:0;
    padding:0;
    border:0;
    background:rgba(var(--mhc-ground-rgb),.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility 0s linear .3s;
    -webkit-tap-highlight-color:transparent;
  }
  html.mhc-phone-register-open .mhc-phone-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  /* While the sheet is open the identity is the control that closes it, and
     it says so the way the menu capsule does: it inverts to ink. */
  html.mhc-phone-register-open :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){
    background:color-mix(in srgb,var(--mhc-ink) 90%,var(--mhc-rail-section-accent,var(--mhc-accent)));
    color:var(--mhc-ground);
  }
  html.mhc-phone-register-open :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity) .mhc-rail-section-rest{color:var(--mhc-ground)}
  /* The section's part of the label carries a softened light ink of its own,
     which on the inverted capsule nearly vanished, so it is softened from
     the capsule's own ink instead. */
  html.mhc-phone-register-open :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity) .mhc-rail-section-rest em{color:color-mix(in srgb,var(--mhc-ground) 72%,transparent)}
  html.mhc-phone-register-open :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity) :is(.rail-progress,.mhc-rail-progress,.rail-mark-progress){opacity:0}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .mhc-section-register,.mhc-section-register.is-withheld,.mhc-section-register.is-dense,
    html.mhc-phone-register-open .mhc-section-register.mhc-section-register{clip-path:none;transform:none;transition:opacity .01ms,visibility 0s}
  }
}

/* ---- 14-menu-search.css ---------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The pill menu and archive search, over the whole phone
   ---------------------------------------------------------------------------
   The pill menu is the one desktop instrument that was already a phone
   gesture: its column turns under native vertical scrolling, one chapter to a
   snap, and a press on any pill leaves for that chapter through the wash.
   What it lacked on a narrow screen was ground. Its veil is an ellipse sized
   for a column standing in the middle of a wide page, so on a phone the
   paragraphs behind it stayed readable at both edges and the chapter names
   were set over running text. Here the ellipse is taken past the viewport on
   every side, and the veil deepens, so the column stands on the field alone.
   Everything else about the menu is its own: the aperture, the position
   scale down the right edge, and the close control, which is the menu
   capsule inverted to ink in the foot rail, exactly as it is on the desktop.

   Archive search is struck from its capsule on the desktop as a panel beside
   the rail. On a phone a panel that size would sit under the keyboard, so the
   iris opens over the whole screen and the field stands at the top, with its
   own close control beside it, because the capsule that opened the search is
   behind the keyboard while a reader is typing. The control is built by the
   layer's script, since the chapter search authors none of its own.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  :root{
    --chapter-menu-veil:.95;
    --chapter-menu-field-x:130vw;
    --chapter-menu-field-y:115svh;
    --chapter-menu-field-top:9%;
    --chapter-menu-fade-a:13%;
    --chapter-menu-fade-b:17%;
    --chapter-menu-fade-c:24%;
  }
  .chapter-pill-position{right:4px}
  /* The return capsule floats over every page at a greater depth than the
     menu and search, and on a phone it spans the foot of the screen, where
     it stood over the menu's lower names and took their presses. It steps
     aside while either panel holds the whole screen, as the appearance dot
     does, and returns with the page. */
  body:is(.drawer-open,.mhc-nav-open,.chapter-search-open,.search-open) .mhc-xref-cluster{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .chapter-pill-position button{width:40px;height:34px}
  /* The whole title row answers a press, not only its letters. */
  .chapter-pill-menu :is(.chapter-copy,.mhc-chapter-copy){padding:10px 14px;min-height:44px;align-items:center}
  /* On a phone each entry's box is taller than the step between two names,
     so the box after it used to lie over the name above, and a press on
     Money opened Summary. Stacking every entry over the one that follows it
     gives each name its own press back without moving anything, because the
     boxes are transparent and the forms are drawn on the canvas beneath. */
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(1){z-index:12}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(2){z-index:11}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(3){z-index:10}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(4){z-index:9}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(5){z-index:8}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(6){z-index:7}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(7){z-index:6}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(8){z-index:5}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(9){z-index:4}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(10){z-index:3}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(11){z-index:2}
  .chapter-pill-menu :is(.chapter-list,.mhc-chapter-list)>li:nth-child(12){z-index:1}

  /* ---- search -----------------------------------------------------------
     The Timeline keeps an older search panel of its own, opened by the same
     capsule under body.search-open rather than body.chapter-search-open, and
     on a phone it is given the same whole screen as every other chapter's. */
  .chapter-search-panel,
  .chapter-search-panel.has-query,
  :root[data-rail-dock="bottom"] .chapter-search-panel,
  #search-panel.search-panel,
  #search-panel.search-panel.has-query{
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
    max-height:none;
    border:0;
    border-radius:0;
    transform:none;
    clip-path:circle(24px at var(--elastic-search-origin-x) var(--elastic-search-origin-y));
  }
  :root[data-rail-dock] body.chapter-search-open .chapter-search-panel,
  :root[data-rail-dock] body.chapter-search-open .chapter-search-panel.has-query,
  :root[data-rail-dock] body.search-open #search-panel.search-panel,
  :root[data-rail-dock] body.search-open #search-panel.search-panel.has-query{
    clip-path:circle(160vmax at var(--elastic-search-origin-x) var(--elastic-search-origin-y));
  }
  :is(.chapter-search-panel,#search-panel.search-panel) .search-shell{
    padding:calc(env(safe-area-inset-top,0px) + 58px) var(--mhc-phone-gutter) calc(var(--mhc-phone-foot) + 28px);
  }
  :is(.chapter-search-panel,#search-panel.search-panel) .search-line{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  :is(.chapter-search-panel,#search-panel.search-panel) .search-line input{font-size:clamp(30px,9vw,38px);line-height:1}
  /* The Timeline's results set each record's kind in an 82px column, where
     a kind of two words wrapped inside its own rounded pill and spilled out
     of it. On a phone the kind stands above the title as its label, the
     record's notation below it, and the arrow keeps the row's end. */
  #search-panel .search-result,
  #search-panel.has-query .search-result{
    grid-template-columns:minmax(0,1fr) 18px;
    row-gap:8px;
  }
  #search-panel .search-result>.search-result-kind{grid-column:1;grid-row:1;font-size:var(--mhc-type-2xs)}
  #search-panel .search-result>.search-result-title{grid-column:1;grid-row:2}
  #search-panel .search-result>.search-result-meta{grid-column:1;grid-row:3;font-size:var(--mhc-type-2xs)}
  #search-panel .search-result>.search-result-arrow{grid-column:2;grid-row:1/-1;align-self:center}
  /* The Timeline moves its search capsule to a second row of the rail when
     search opens, which suits a column and drops a capsule out of a bar. */
  :root[data-rail-dock="bottom"] body.search-open #search-toggle{grid-row:1}
  .mhc-phone-search-close{
    position:fixed;
    z-index:4;
    top:calc(env(safe-area-inset-top,0px) + 8px);
    right:10px;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--elastic-glass-edge);
    border-radius:50%;
    background:var(--elastic-capsule-surface);
    color:var(--mhc-ink);
    box-shadow:var(--elastic-capsule-shadow);
    font-size:0;
    cursor:pointer;
  }
  .mhc-phone-search-close::before{
    content:"";
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .mhc-phone-search-close:focus-visible{outline:2px solid var(--mhc-accent-ink);outline-offset:2px}
  body:not(.chapter-search-open):not(.search-open) .mhc-phone-search-close{visibility:hidden}
  .chapter-search-panel .search-mode-switch{margin-bottom:16px}
  .chapter-search-panel .search-mode-switch button{min-width:0;flex:1 1 0}
}

/* ---- 18-masthead.css ------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The masthead and the appearance dot
   ---------------------------------------------------------------------------
   The one-line header is the landing's lockup and already fits a phone, and
   chapter-field.js
   paints it with the strip of field it stands on exactly as it does on the
   desktop. Two things change. The appearance dot keeps its 44px target in the
   corner, so the header's trailing inset makes room for it instead of letting
   the chapter note run underneath; and the header leaves with the rail during
   a downward reading run, lifting away by its own height, so that the reading
   has the whole screen until the reader moves back up.
   ------------------------------------------------------------------------- */


@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  /* THE BAND IS THE PHONE HEADER'S, NOT THE NARROW DESKTOP'S. rail-dock.css
     reserves 224px at this width for a top bar that wraps on a narrow desktop
     window, and until 1 October nothing on the phone restated it, so every
     room cleared 224px under a header whose capsule ends at 68px (a 12px inset
     and the 56px row): sticky heads pinned with a strip of text showing above
     them and every section landed 187px low. Consumers add the safe-area
     inset themselves, as the Frames framework already did. */
  html.mhc-wayfinding-ready{--archive-masthead-band:68px;--elastic-rail-top-band:68px}
  /* The compact home card supplies the phone header's surface. Retiring the
     old full-width canvas strip also removes its rectangular blur seam. */
  html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead){display:none}
  :root{
    --archive-masthead-type:15px;
    --archive-masthead-trail:48px;
    --archive-masthead-lead:0px;
  }
  .archive-masthead{
    gap:14px;
    padding-top:calc(var(--archive-masthead-pad) + env(safe-area-inset-top,0px));
    transition:opacity .42s ease,visibility .42s,transform .44s var(--elastic-ease),background-color .24s ease;
  }
  /* The trailing note stays legible while yielding to the archive name. */
  .archive-masthead-note{font-size:var(--mhc-type-xs)}
  /* The note is the part that yields: the archive's name is never cut. */
  .archive-masthead-mark{flex:0 0 auto}
  .archive-masthead-note{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .archive-corner-toggle{top:env(safe-area-inset-top,0px);transition:opacity 140ms ease,color 160ms ease,transform .44s var(--elastic-ease)}
  .archive-corner-toggle::before{top:15px;right:18px}
  .archive-corner-toggle>.theme-toggle-icon{top:9px;right:12px}

  /* The dot yields to the panels that take the whole screen, as the header
     already does, so that search's own close control has the corner. */
  body:is(.drawer-open,.mhc-nav-open,.chapter-search-open,.search-open):not(.landing-page) .archive-corner-toggle{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  html.mhc-phone-receded .archive-masthead,
  html.mhc-phone-receded body:not(.landing-page) .archive-corner-toggle{
    transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px));
  }
  /* The sections land below the header whether or not it is standing, since
     a reader who taps a mark is about to scroll up past it anyway. */
  html.mhc-section-rail-ready:has(body.has-chapter-masthead){
    --mhc-section-scroll-inset:calc(18px + var(--archive-masthead-band));
  }
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .archive-masthead,.archive-corner-toggle{transition-duration:.01ms!important}
  }
}

/* ---- 19-closing.css -------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The way out of a chapter
   ---------------------------------------------------------------------------
   Every chapter closes the same way on the desktop: the epilogue, then the
   pager with the previous chapter, the method stop and the next chapter set
   side by side on one translucent plate, then the crisis notice and the
   colophon. Below 600px the shipped pager keeps the three cells side by side
   and shrinks their names to thirteen pixels and their icons to thirty, so
   the one instrument whose whole job is to say where a reader goes next is
   the least legible thing at the end of the page. The phone keeps the plate,
   the cells and rings, with the two chapter names on one line and the method
   stop reduced to its familiar document symbol between them. Full names and
   scope remain in the accessible links.

   The closing region also has to clear the foot rail, which returns at the
   end of every chapter; the foot dock's own reservation already does that.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  .chapter-pager,
  .chapter-next-block.chapter-pager{
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    gap:4px;
    width:calc(100% - (2 * var(--mhc-phone-gutter)));
    padding:5px;
    border-radius:24px!important;
    background:transparent!important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* A stable, rounded glass layer prevents hover repaints of the moving
     links from leaving a backdrop rectangle over the notice and colophon. */
  .chapter-pager::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:var(--chapter-pager-surface);pointer-events:none;
    backdrop-filter:blur(20px) saturate(112%);
    -webkit-backdrop-filter:blur(20px) saturate(112%);
  }
  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:calc(100% - (2 * var(--mhc-phone-gutter)));
    margin-inline:var(--mhc-phone-gutter);
  }
  .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.is-first{grid-template-columns:44px minmax(0,1fr)}
  .chapter-pager.is-first>.chapter-pager__link--next{grid-column:2;grid-row:1}
  .chapter-pager>.chapter-methods{grid-column:2;grid-row:1}
  .chapter-pager.is-first>.chapter-methods{grid-column:1}
  body:not(.chapter-reading) .chapter-pager--routed>.chapter-methods{grid-template-columns:minmax(0,1fr)}

  .chapter-pager__link,
  .chapter-pager__link--next{
    grid-template-columns:24px minmax(0,1fr);
    grid-template-areas:"icon copy";
    justify-items:stretch;
    align-content:center;
    gap:6px!important;
    min-height:48px!important;
    padding:6px!important;
    border-radius:18px!important;
    text-align:left;
  }
  /* The next cell keeps its arrow on the side it points to. */
  .chapter-pager__link--next{
    grid-template-columns:minmax(0,1fr) 24px;
    grid-template-areas:"copy icon";
    padding:6px!important;
    text-align:right;
  }
  .chapter-pager__icon{width:24px;height:24px}
  .chapter-pager__icon svg{width:14px;height:14px}
  .chapter-pager__title{display:flex;flex-wrap:nowrap;gap:0}
  .chapter-pager__title strong{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chapter-pager__scope:not(:empty),.chapter-pager__title b,.chapter-methods .chapter-method-copy{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .chapter-pager__link:has(.chapter-pager__scope:not(:empty)){min-height:48px!important}

  .chapter-methods a.chapter-method-link{
    flex-direction:row;
    justify-content:center;
    gap:0;
    min-height:48px;
    padding:6px;
    border-radius:18px;
  }
  .chapter-methods .chapter-method-copy strong{font-size:15px;text-align:left}
  .chapter-methods .chapter-method-symbol{width:28px;height:28px;padding:6px}
  /* At the narrowest phone width, give the names the whole cell. The links
     retain their previous/next accessible names and their original order. */
  @media(max-width:360px){
    .chapter-pager__link,.chapter-pager__link--next{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy"}
    .chapter-pager__icon{display:none}
    .chapter-pager__title strong{font-size:12px}
  }

  /* The page already ends above the rail: rail-dock.css reserves the bar's
     claim as the body's foot padding, and the claim is the phone's foot here,
     so no second reservation is stated. */

  /* Every chapter closes on one statement at the ramp's 58px, the floor of
     its clamp, and at a phone's measure that statement wrapped to four or
     five lines of one or two words each. It takes the next step down, 44px,
     which keeps it the largest type at the end of the page and lets it read
     as a sentence again. The selectors meet each chapter's own rule. */
  :root.mhc-phone :is(.end-marker>div>h2,#frame-close-title,#fr-money-conclusion,#sum-conclusion-title,#after-title){
    font-size:var(--mhc-type-5xl);
  }

  /* The crisis notice's link was set at a literal 10px, under the label
     floor the phone raises to 11px, and two pixels short of a target. */
  .support-in a{min-height:44px;font-size:var(--mhc-type-2xs)}
  /* The two colophon facts are links, and a finger needs their full row. */
  .archive-credit .archive-credit-meta>a{display:flex;align-items:center;min-height:44px;padding-block:0}
}

/* ---- 20-landing.css -------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The landing, seated for a portrait screen
   ---------------------------------------------------------------------------
   The opening keeps every rest it has on the desktop. What changes is where
   its parts stand, because a portrait room is divided top to bottom rather
   than left to right: a band at the top of the room holds what is being said,
   the column of names stands below it, and the way through the opening (the
   position mark and the skip control) keeps its own place under the column,
   clear of the ground as it is on the desktop. The band is published by the
   landing partial as --landing-phone-band, and the column's rows by the plan
   the field engine reads, so this sheet only places type.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  /* Match the chapters' single-row phone header. The scope remains on the
     opening cover; appearance stays directly reachable beside the wordmark. */
  .landing-masthead .landing-home-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    gap:2px;
    width:min(420px,calc(100vw - 24px));
    height:56px;
    padding:6px;
    border-radius:20px;
    box-sizing:border-box;
  }
  .landing-masthead .archive-masthead-mark.landing-home{
    min-width:0;
    height:44px;
    padding:0 6px;
    overflow:hidden;
    font-size:clamp(12px,calc(7vw - 10px),18px);
    line-height:44px;
  }
  .landing-masthead .landing-home-details,
  .landing-masthead .landing-home-footer{display:contents}
  .landing-masthead .landing-home-scope{display:none}
  .landing-masthead .landing-home-appearance.theme-toggle{
    grid-column:2;
    grid-row:1;
    width:44px;
    height:44px;
    margin:0;
  }

  /* The directions take the full measure of the band, at a size a phone
     reads at arm's length, and stand at its top whichever side of the page
     they were written for on the desktop. */
  .landing-intro .intro-beat.intro-beat--guidance,
  .landing-intro .intro-beat.intro-beat--guidance.intro-beat--right{
    --direction-size:18px;
    /* The single-row header ends at the 68px ceiling. */
    --direction-top:calc(var(--ceiling) + 18px);
    left:calc(var(--mhc-phone-gutter) - (50vw - var(--corridor) / 2));
    width:calc(100vw - (2 * var(--mhc-phone-gutter)));
    line-height:1.36;
  }
  /* A word that travels in from the side would start outside a phone's
     width altogether, so its travel is shortened to a glance. */
  .intro-beat--guidance{--word-travel:-54px}
  .intro-beat--guidance.intro-beat--right{--word-travel:54px}

  .landing-intro{--corridor:calc(100vw - (2 * var(--mhc-phone-gutter)));--quote-lift:0px}
  .intro-beat{font-size:clamp(22px,6.4vw,27px);line-height:1.36}
  .intro-credit{font-size:11px;line-height:1.55}
  .intro-credit-work,.intro-credit-journal{display:none}

  /* The way through the opening. Progress and Skip share the quotation's
     edges on desktop and the reading gutter on phones. A
     portrait room has no height to spare above the ground once nine names
     stand there, so it moves onto the ground's own foot, above the home
     indicator, where a thumb is, and
     the skip control takes the capsule glass so that it reads over the
     weave. */
  .intro-navigation{
    left:var(--mhc-phone-gutter);
    right:var(--mhc-phone-gutter);
    top:auto;
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
  }
  .intro-skip{
    margin-left:0;
    padding:13px 18px;
    font-size:12px;
    background:rgba(var(--mhc-ground-rgb),.62);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
  }

  /* ---- the index ---------------------------------------------------------
     One size for every name, a step down from the desktop's so that nine
     rows and the band above them fit a phone's room; the module measures the
     row from the type, so the rhythm follows. The rows answer a press with
     the archive's own link surface, which is the hover state a hand cannot
     otherwise reach. */
  .pill-link{--chapter-title-size:20px}
  @media (max-height:720px){.pill-link{--chapter-title-size:17px}}
  .landing-enhanced.pill-field-enhanced .pill-chapter-label{--chapter-mark-gap:12px}
  .pill-chapter-label::before{inset:-8px -16px}
  .landing-enhanced.pill-field-enhanced .pill-link{-webkit-tap-highlight-color:transparent}

  /* The brief stands in the right of the band, beside the form, and is read
     at the phone's caption size. */
  .chapter-brief{
    left:var(--brief-x,50%);
    top:var(--slot-y,22%);
    width:calc(50vw - var(--mhc-phone-gutter));
    transform:translate(0,-50%);
  }
  .chapter-brief-body{font-size:14px;line-height:1.45}
  .chapter-form-caption{width:calc(50vw - var(--mhc-phone-gutter));gap:1px}
  .chapter-form-name,.chapter-form-use{font-size:11px;line-height:1.4}
  /* The index names are the phone's chapter controls. The form and its
     explanatory band belong to the wider three-part composition. */
  .globe-interface :is(.chapter-brief,.chapter-form-caption){display:none!important}
  body.landing-page .pill-material{visibility:hidden!important}
  .pill-specimen-facts dt{font-size:var(--mhc-type-xs)}

  /* The title keeps its bas-relief and its three parts, but on a phone the
     subject breaks after Health, so Crisis stands on a line of its own at
     the size the whole lockup can afford, rather than the three words being
     shrunk until one line holds them against the edge of the screen. The
     shared title that carries the words into the masthead measures each word
     where it actually stands, so the break travels with it. */
  .landing-hero-copy h1{font-size:clamp(44px,13.2vw,58px);line-height:.86}
  .landing-title-line--subject{white-space:normal;line-height:1.02}
  /* The scope line hangs from that last line at the label size the phone's
     other notation reads at. Its drop and its edge are written against the
     phone's own title clamp, and the edge is the C of Crisis rather than the
     M of Mental, since Crisis is now the word that begins the line. */
  .landing-title-scope-text{left:clamp(2px,.59vw,2.6px);margin-top:clamp(8.8px,2.64vw,11.6px);font-size:var(--mhc-type-xs)}

  /* The cover's own furniture: the archive entry signal and the continue
     cue keep their corners, above the home indicator. */
  .landing-continue{bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
}

/* ---- 30-prose.css ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Reading depth, and the setting of a paragraph on a phone
   ---------------------------------------------------------------------------
   The brief reading shows each long paragraph's first sentence and hides
   the rest from sight only, so that a screen reader, the browser's find and
   a copied selection all still meet the whole paragraph. The mark that says
   how much remains is set in the archive's mono, because it is notation
   about the text rather than part of it, and it is softened from the
   paragraph's own ink with color-mix, since opacity on readable text is the
   one way of softening it that the design rules forbid.

   Two settings apply in either reading. Paragraphs take the balanced wrap
   where the browser has it, which keeps the last line of a long paragraph
   from ending on one word, and the phone's paragraphs keep the full
   measure the chapters already give them, so nothing here changes the
   chapters' sizes, which belong to each chapter's own partial.
   ------------------------------------------------------------------------- */
.mhc-phone-brief-more,.mhc-phone-brief-note,.mhc-phone-brief-switch{display:none}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  p,dd,li{text-wrap:pretty}

  /* ---- the brief reading ------------------------------------------------ */
  html[data-mhc-phone-reading="brief"] .mhc-phone-brief:not(.is-brief-open)>.mhc-phone-brief-rest{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  html[data-mhc-phone-reading="brief"] .mhc-phone-brief:not(.is-brief-open){-webkit-tap-highlight-color:transparent}
  html[data-mhc-phone-reading="brief"] .mhc-phone-brief:not(.is-brief-open)>.mhc-phone-brief-more{display:inline-flex}
  .mhc-phone-brief-more,
  #sec-summary .mhc-phone-brief-more{
    position:relative;
    align-items:center;
    height:20px;
    margin:0 0 0 7px;
    padding:0 9px;
    vertical-align:.14em;
    border:1px solid color-mix(in srgb,currentColor 30%,transparent);
    border-radius:999px;
    background:none;
    color:color-mix(in srgb,currentColor 74%,transparent);
    font:500 var(--mhc-type-2xs)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    font-style:normal;
    letter-spacing:.07em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* The whole paragraph opens under a tap, so the mark's own target only
     has to meet the 44px floor where a thumb aims at it directly. */
  .mhc-phone-brief-more::after{content:"";position:absolute;inset:-13px -10px}
  .mhc-phone-brief.is-brief-open>.mhc-phone-brief-rest{animation:mhc-phone-brief-open .36s var(--elastic-ease,ease) both}
  @keyframes mhc-phone-brief-open{from{opacity:0}to{opacity:1}}

  /* ---- the depth in the sections sheet ----------------------------------
     The switch stands at the sheet's foot, just above the capsule that
     opened it, where the thumb already is, and it stays there while the
     rows scroll above it, because the sheet opens scrolled to the section
     being read and a switch at its head would scroll out of reach. */
  .mhc-section-register>.mhc-phone-brief-switch{
    order:99;
    position:sticky;
    bottom:0;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    margin:8px 6px 0;
    padding:3px;
    border-radius:999px;
    background:linear-gradient(color-mix(in srgb,var(--mhc-ink) 7%,transparent),color-mix(in srgb,var(--mhc-ink) 7%,transparent)),rgb(var(--mhc-ground-rgb));
    box-shadow:0 -12px 16px 2px rgba(var(--mhc-ground-rgb),.9);
  }
  /* The row the sheet opens on is scrolled to the sheet's lower edge, which
     is where the switch stands, so the switch's height is kept clear of it. */
  .mhc-section-register:has(>.mhc-phone-brief-switch){scroll-padding-bottom:64px}
  .mhc-phone-brief-switch button{
    display:grid;
    justify-items:center;
    align-content:center;
    gap:3px;
    min-height:44px;
    padding:5px 10px;
    border:0;
    border-radius:999px;
    background:none;
    color:var(--mhc-ink-3);
    font:500 var(--mhc-type-xs)/1.1 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    letter-spacing:-.005em;
    -webkit-tap-highlight-color:transparent;
    transition:background .3s var(--elastic-ease,ease),color .2s ease;
  }
  .mhc-phone-brief-switch button small{
    font:500 var(--mhc-type-2xs)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  .mhc-phone-brief-switch button[aria-pressed="true"]{
    background:var(--mhc-ground);
    color:var(--mhc-ink);
    box-shadow:0 1px 3px rgba(var(--mhc-shadow-rgb,0,0,0),.18),inset 0 0 0 1px var(--mhc-hairline-soft,transparent);
  }
  .mhc-phone-brief-switch button:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}

  /* Each section's reading time stands at the end of its row, for the depth
     the reader has chosen. */
  .mhc-section-register .mhc-section-mark[data-mhc-minutes]{position:relative;padding-right:68px}
  .mhc-section-register .mhc-section-mark[data-mhc-minutes]::before{
    content:attr(data-mhc-minutes);
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
    color:var(--mhc-ink-3);
    font:500 var(--mhc-type-2xs)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
    letter-spacing:.07em;
    text-transform:uppercase;
    white-space:nowrap;
    pointer-events:none;
  }

  /* ---- the note, once a session ----------------------------------------- */
  .mhc-phone-brief-note{
    position:fixed;
    z-index:1030;
    left:12px;
    right:12px;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px 8px 12px 18px;
    border-radius:24px;
    background:var(--elastic-glass-surface);
    color:var(--elastic-light,var(--mhc-ink));
    box-shadow:var(--elastic-glass-shadow),inset 0 0 0 1px var(--elastic-glass-edge);
    backdrop-filter:blur(24px) saturate(138%);
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .2s ease,transform .5s var(--elastic-ease,ease),visibility 0s linear .5s;
  }
  .mhc-phone-brief-note.is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s ease,transform .5s var(--elastic-ease,ease),visibility 0s}
  .mhc-phone-brief-note p{margin:0;font:400 var(--mhc-type-md)/1.4 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);letter-spacing:-.005em}
  .mhc-phone-brief-note button{
    min-height:44px;
    padding:0 16px;
    border:0;
    border-radius:999px;
    background:var(--mhc-ink);
    color:var(--mhc-ground);
    font:500 var(--mhc-type-xs)/1 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  html.mhc-phone-receded .mhc-phone-brief-note,
  html.mhc-phone-register-open .mhc-phone-brief-note{opacity:0;visibility:hidden;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .mhc-phone-brief.is-brief-open>.mhc-phone-brief-rest{animation:none}
    .mhc-phone-brief-note,.mhc-phone-brief-note.is-shown{transition:none}
  }
}

/* ---- 40-timeline.css ------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   00 Timeline, seated for the hand
   ---------------------------------------------------------------------------
   The Timeline was composed around a rail standing down the left edge, and
   it states that reservation once, as --rail-stage-gutter, which the cover,
   the guide and the chronology all subtract from the viewport before they
   lay anything out. On a phone the rail lies along the foot instead, so that
   column is returned first, and everything below follows from the width it
   gives back: the cover's title stands on the phone's own gutter, the guide's
   plates take the whole reading width, and the entries beside the spine gain
   the sixty pixels they had been giving to a rail that was not there.

   Each instrument then keeps the desktop's own behavior and takes a phone
   composition of its own:

   - the cover keeps its field, its title and its live year, and a finger
     drawn across the field reads the years as a pointer's hover does;
   - the guide keeps its ring and its one gesture per plate, but the ring is
     laid on its side, so that a plate travels the way the finger that moves
     it travels, and its position mark floats above the foot rail;
   - the docked era band stands below the masthead's band rather than under
     it, on one line, as the desktop asks of a narrow screen;
   - the filter launcher and the return capsule share one row above the foot
     rail, and the launcher's window opens out of its corner as a sheet;
   - the closing numeral keeps its place as the chapter's last instrument,
     and the launcher gives the closing sequence the width it needs.

   Every rule is scoped to the Timeline's body or to classes only the Timeline
   carries, because this sheet is joined with every other chapter's and is
   read on every page the chapter shell swaps in.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){

  /* ---- the reservation the rail no longer claims ----------------------- */
  body[data-chapter="timeline"]{
    --rail-stage-gutter:0px;
    /* The width a guide plate opens to, and the pitch between two plates on
       the ring once it lies on its side. A neighbor at rest recedes to 94%
       of its size, so a pitch a little under the plate's width leaves the
       near-touching seam the desktop's ring keeps between its plates and
       about fourteen pixels of the neighbor's glass at the screen's edge. */
    --phone-guide-w:calc(100vw - 44px);
    --phone-guide-pitch:calc(var(--phone-guide-w) - 2px);
  }
  /* The title travels clear of a pinned rail on the desktop; with the rail at
     the foot there is nothing beside it to clear. */
  body[data-chapter="timeline"] .hero-title-block{--hero-rail-shift:0px}

  /* ---- the cover --------------------------------------------------------
     The desktop sets the title against the left edge and the live year
     against the lower right, with the guide cue closing the lower edge. The
     portrait plate keeps that diagonal: the title leads in the upper half
     and the live year has a separate reading space below on the right, and
     the cue stands above the foot rail, which the rail's own reservation
     already lifts it clear of. The chapter number hangs outside the title's
     upper left corner, so the title stands that far inside the gutter and
     the number lands on it. */
  body[data-chapter="timeline"] .hero{
    padding:calc(var(--archive-masthead-band,37px) + 16px) var(--mhc-phone-gutter) 20px calc(var(--mhc-phone-gutter) + (1.3 * var(--chapter-number-size,10px)) + var(--chapter-number-gap,10px));
    row-gap:16px;
  }
  /* The cue stands at the title's reading edge rather than at the centre,
     where the right-aligned year readout ran its lines underneath it. */
  body[data-chapter="timeline"] .hero-footer{left:0;justify-content:flex-start}
  body[data-chapter="timeline"] .heat-readout span{font-size:11px}
  /* A finger drawn sideways across the field reads its years, which is the
     hover the desktop gives a pointer; a vertical drag still scrolls, so the
     cover never holds the page. */
  body[data-chapter="timeline"] .hero-year-grid{touch-action:pan-y pinch-zoom}
  /* While the field is being read the live year takes the rounded plate the
     design allows an instrument, because a finger covers part of the bloom
     the readout was set against. */
  body[data-chapter="timeline"] .heat-readout::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-12px -10px -12px -16px;
    border-radius:26px;
    background:rgba(var(--mhc-float-rgb),.42);
    box-shadow:inset 0 0 0 1px var(--elastic-glass-edge-soft,rgba(255,255,255,.12));
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    opacity:0;
    transform:scale(.96);
    transition:opacity .2s ease,transform .42s var(--elastic-ease);
    pointer-events:none;
  }
  body[data-chapter="timeline"] .hero.mhc-phone-field-reading .heat-readout::before{opacity:1;transform:none}

  /* ---- the guide --------------------------------------------------------
     On the desktop the guide is one viewport: three plates on a ring that
     closes on its height, one wheel or sideways gesture to a plate, and a
     count at the foot of the stage. A phone cannot hold the controls plate
     inside one screen, so the stage is not pinned here; the page scrolls
     through it natively, and the ring is kept for the one thing it does
     best, which is to move one plate for one gesture. Because a finger
     moving sideways expects what it touches to move sideways, the ring lies
     on its side: the chapter's own script still turns it, and the layer's
     script reads each plate's place on the ring and hands it to the portrait
     rules at the end of this sheet as a horizontal position. The stage takes
     the height of the plate facing the reader, blended between two plates
     while they trade places. */
  body[data-chapter="timeline"] .timeline-convergence{
    padding:calc(var(--archive-masthead-band,37px) + 22px) 0 28px;
  }
  /* The guide's column is the screen's width and no wider. The plain reel
     reduced motion reads is a scroller in the flow, and without a ceiling on
     the column its row of plates would widen the column to its own length. */
  body[data-chapter="timeline"] .convergence-guide{
    --guide-masthead-width:calc(100% - (2 * var(--mhc-phone-gutter)));
    --guide-radius:40px;
    grid-template-columns:minmax(0,1fr);
  }
  body[data-chapter="timeline"] .guide-stage{min-width:0}
  /* The live reel changes panels through deliberate phone gestures, rather
     than receiving an unbounded native horizontal fling. Vertical page
     scrolling remains available. */
  html.guide-reel-live body[data-chapter="timeline"] .guide-panel-stack{touch-action:pan-y pinch-zoom}
  body[data-chapter="timeline"] .guide-overture{
    width:auto;
    margin:0 var(--mhc-phone-gutter) 16px;
    padding-bottom:14px;
  }
  /* Reduced motion reads the plates as a plain reel, which is already a
     native horizontal snap scroller; each plate keeps its own height rather
     than the tallest plate's. */
  html:not(.guide-reel-live) body[data-chapter="timeline"] .guide-reel{
    grid-template-rows:auto;
    align-items:start;
    padding-block:12px 20px;
  }
  html:not(.guide-reel-live) body[data-chapter="timeline"] .guide-beat{height:auto}

  /* The navigation plate lights the capsule a row describes. The desktop
     does that by holding the rail at its column's center, a transform that
     would throw the foot rail half its height up and half its length across,
     so on a phone the rail is held where it lies, and standing rather than
     receded, since the capsule being named has to be seen. The desktop
     states the hold with !important. */
  body.menu-guide-active[data-guide-control] :is(.archive-rail,.mhc-archive-rail){transform:translateX(-50%)!important}

  /* ---- the era journey --------------------------------------------------
     A banner that scrolls away contracts into a band that stays at the top
     of the reading. On the foot dock the chapter script holds it twelve
     pixels from the top, which on a phone is under the masthead's band, so
     the band is carried down by the masthead's height as it docks. It stays
     there while the masthead recedes, because a band that moved with the
     masthead would move under a reader's eyes every time they changed
     direction. */
  body[data-chapter="timeline"] .timeline .era-header-surface{text-align:left}
  body[data-chapter="timeline"] .timeline .era-heading .era-meta{
    justify-content:flex-start;
    text-align:left;
  }
  /* List years lead each group at the records' reading edge, with enough
     scale and ink to distinguish chronology from the source metadata. */
  body[data-chapter="timeline"] .timeline.is-list-view .year-number{
    text-align:left;
    font-size:var(--mhc-type-4xl);
    font-weight:400;
    color:var(--mhc-on-plate);
  }
  body[data-chapter="timeline"] .timeline .era-header.is-reader-docked .era-header-surface{
    translate:0 calc(var(--journey-reader-progress,0) * (var(--archive-masthead-band,37px) - 4px));
  }
  /* The desktop's rule for a narrow screen: the docked title stays complete
     on a single line, and only its type comes down to make it fit. */
  body[data-chapter="timeline"] .timeline .journey-reader-compact{
    padding:12px 16px;
    font-size:clamp(12px,3.45vw,14px);
    line-height:1.4;
    letter-spacing:-.005em;
  }
  body[data-chapter="timeline"] .timeline .journey-reader-compact>span{white-space:nowrap}
  /* The chronology's mono notation (an era's span and counts, a photograph's
     credit, a connection card's place in its stack) meets the phone's
     eleven-pixel floor, as the rest of the archive's labels do here. */
  body[data-chapter="timeline"] #timeline :is(.era-heading .era-meta,.era-summary small,.image-credit,.connection-card-position){font-size:11px}
  /* A docked band gives way to the controls window rather than standing over
     its heading. */
  body[data-chapter="timeline"]:has(#timeline-stage>.timeline-apparatus.filter-drawer-open) .timeline .era-header.is-reader-docked{opacity:0;pointer-events:none}

  /* ---- the controls launcher and its window -----------------------------
     On the desktop the launcher is a rail capsule standing at the corner of
     the chronology, and its window opens out of that corner. On a phone the
     launcher takes the right end of the row above the foot rail, which it
     shares with the return capsule, and follows the rail down while the
     chrome recedes. The rail-dock rule that lifts it is written against a
     descendant of the root rather than the root itself, so it never matches,
     and the lift is stated here. */
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus,
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus.has-return-control{
    --filter-bottom:calc(var(--mhc-phone-foot) + 10px);
    right:12px;
    width:calc(100vw - 24px);
  }
  html.mhc-phone-receded body[data-chapter="timeline"].timeline-records-active #timeline-stage>.timeline-apparatus:not(.filter-drawer-open){
    transform:translateY(calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) - 10px));
  }
  /* The window is a sheet above the foot rail in the drawer's own glass. It
     opens as an iris from the launcher's corner, which is the gesture the
     desktop's window makes from its own corner, and it stops below the
     masthead's band so that its heading is never covered. */
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus .timeline-filter-drawer{
    right:0;
    bottom:calc(var(--mhc-phone-capsule) + 10px);
    width:min(100%,420px);
    max-height:calc(100svh - var(--mhc-phone-foot) - var(--mhc-phone-capsule) - var(--archive-masthead-band,37px) - 40px);
    padding:20px 18px 18px;
    border-radius:28px;
    transform:translateY(10px);
    clip-path:inset(calc(100% - 44px) 0 0 calc(100% - 44px) round 22px);
    transition:opacity .16s ease,transform .52s var(--elastic-ease),clip-path .52s var(--elastic-ease),visibility 0s linear .52s;
  }
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus.filter-drawer-open .timeline-filter-drawer{
    transform:none;
    clip-path:inset(0 round 28px);
    transition:opacity .12s ease,transform .56s var(--elastic-ease),clip-path .56s var(--elastic-ease),visibility 0s linear 0s;
  }
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus.filter-drawer-open{z-index:48}
  /* The page behind the sheet is quieted rather than erased, as it is behind
     the register. The veil stays in the hit path for its fade, so that the
     release of the press that closed the sheet lands on the veil and not on
     an entry beneath it. */
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    background:rgba(var(--mhc-ground-rgb),.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:auto;
    transition:opacity .3s ease,visibility 0s linear .3s;
  }
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus.filter-drawer-open::before{opacity:1;visibility:visible;transition-delay:0s}
  /* The launcher inverts to ink while its window is open, which is how the
     menu capsule says it has become the close control. */
  body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus.filter-drawer-open .timeline-filter-trigger{
    background:color-mix(in srgb,var(--mhc-ink) 90%,var(--mhc-chapter-timeline-field,var(--mhc-accent)));
    color:var(--mhc-ground);
  }
  /* Labels meet the phone's floor, and the one control drawn smaller than a
     finger takes the full target. */
  body[data-chapter="timeline"] .timeline-filter-heading output,
  body[data-chapter="timeline"] .timeline-filter-subgroup-label output{font-size:11px}
  body[data-chapter="timeline"] .timeline-filter-drawer .filter-reset{min-height:44px;margin-block:-10px;padding-inline:10px 0}
  body[data-chapter="timeline"] .timeline-filter-drawer .timeline-motion-toggle{font-size:13px}

  /* ---- the return capsule and the jump trail ----------------------------
     The return capsule takes the rest of the launcher's row, so that the two
     controls that hang from the foot never stand on one another. */
  :root[data-rail-dock="bottom"] body[data-chapter="timeline"] .mhc-xref-cluster--timeline{
    left:12px;
    right:calc(12px + var(--mhc-phone-capsule) + 8px);
    width:auto;
    bottom:calc(var(--mhc-phone-foot) + 10px);
  }
  /* The trail opens above the row, from its leading edge, across the width
     of the screen rather than the width of the capsule. */
  body[data-chapter="timeline"] .mhc-xref-cluster--timeline .mhc-xref-ledger{
    left:0;
    right:auto;
    width:calc(100vw - 24px);
    transform-origin:bottom left;
    max-height:min(52svh,420px);
    border-radius:22px;
  }

  /* ---- the close of the chapter -----------------------------------------
     The chapter ends on the last year it holds, so the numeral keeps its
     part as the closing instrument at a size a phone can give it. */
  body[data-chapter="timeline"] .end-marker{padding-inline:var(--mhc-phone-gutter)}
  body[data-chapter="timeline"] .end-marker>div>b{font-size:clamp(88px,30vw,132px)}
  body[data-chapter="timeline"] .end-marker>div>p{margin-top:24px}
  /* Retain Timeline's ruled close within the shared compact phone row. */
  body[data-chapter="timeline"] [data-chapter-pager="timeline"].chapter-pager{
    gap:0;
    padding:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-radius:0!important;
    background:transparent;
    box-shadow:none;
  }
  body[data-chapter="timeline"] [data-chapter-pager="timeline"]>.chapter-pager__link{
    min-height:48px!important;
    padding:6px 4px!important;
    border:0;
    border-radius:0!important;
    background:transparent;
    box-shadow:none;
    text-align:left;
  }
  body[data-chapter="timeline"] [data-chapter-pager="timeline"]>.chapter-pager__link--next{border-top:1px solid var(--line)}
  body[data-chapter="timeline"] [data-chapter-pager="timeline"] .chapter-pager__title strong{font-size:13px}
  body[data-chapter="timeline"] [data-chapter-pager="timeline"] .chapter-pager__scope{text-align:left}
  body[data-chapter="timeline"] [data-chapter-pager="timeline"]>.chapter-methods{border-top:1px solid var(--line)}
  body[data-chapter="timeline"] [data-chapter-pager="timeline"] .chapter-methods .chapter-method-link{
    justify-content:center;
    min-height:48px;
    padding:6px 4px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  body[data-chapter="timeline"] [data-chapter-pager="timeline"] .chapter-method-symbol{width:28px;height:28px;padding:6px}
  /* The launcher acts on the chronology, which is over by the time the
     closing sequence arrives, so it steps down and leaves the pager, the
     notice and the colophon the whole width. It returns with the records. */
  html.mhc-phone-timeline-closing body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus:not(.filter-drawer-open){
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px) scale(.96);
  }
  /* The return capsule stays through the close, because a reader who jumped
     here may want to go back, so while it shows the page ends a capsule's
     height further down and the colophon can be read clear of it. */
  body[data-chapter="timeline"]:has(#xref-back.is-visible) .end-marker{padding-bottom:calc(64px + 20px)}

  /* ---- the rail's year scrubber -----------------------------------------
     The preview rises out of the bar where the finger is, in the era's own
     field, and keeps clear of both edges of the screen. */
  :root[data-rail-dock="bottom"] body[data-chapter="timeline"] .rail-scrub-preview{
    left:clamp(64px,var(--rail-scrub-y,50%),calc(100% - 64px));
    gap:9px;
    min-height:44px;
    align-items:center;
    box-shadow:0 18px 40px rgba(var(--mhc-shadow-rgb),.3),0 2px 6px rgba(var(--mhc-shadow-rgb),.14);
  }
  :root[data-rail-dock="bottom"] body[data-chapter="timeline"] .rail-scrub-preview b{font-size:22px;line-height:1}
  /* The identity inverts to ink while the register sheet is open, and the
     Timeline's capsule reads the era and the year in type of its own, which
     inverts with it so that the year is not left pale on a pale capsule. */
  html.mhc-phone-register-open body[data-chapter="timeline"] .archive-rail>.rail-mark :is(.rail-mark-archive,.rail-mark-chapter,.rail-mark-timeline,.rail-mark-era-count,.rail-mark-era-name,.rail-mark-year){color:var(--mhc-ground)}
  /* The return capsule stands above the page, and the register sheet is
     opened over the page, so while the sheet is open the capsule is quieted
     with everything else under the scrim instead of standing on the sheet. */
  html.mhc-phone-register-open body[data-chapter="timeline"] .mhc-xref-cluster--timeline{z-index:1040}
  /* Two of the ten era names run to two lines in the sheet. The sheet's rows
     otherwise fall to their fifty-pixel floor whenever the sheet is shorter
     than its list, and a two-line name then runs into the row below it, so
     each row keeps the height of what it holds and the sheet scrolls. */
  body[data-chapter="timeline"] .mhc-section-register{grid-auto-rows:max-content}

  /* ---- the portrait phone ------------------------------------------------
     The chapter's own layout turns at 700 pixels: below it the cover stacks,
     the entries stand beside a spine at the left, and the guide stops being
     one pinned viewport. A phone held on its side is wider than that, and it
     keeps the desktop's composition of all three, so the rules that re-seat
     those three compositions apply to the portrait phone alone. */
  @media (max-width:700px){
    body[data-chapter="timeline"] .timeline.is-list-view .year-header{padding-block:24px 12px}
    /* Two flexible fields separate the chapter identity from the live year.
       Reserve four source lines so touching another year never moves the
       title. The year stays smaller than the title, even on a narrow phone. */
    body[data-chapter="timeline"] .hero{
      --chapter-title-size:clamp(52px,17vw,72px);
      grid-template-rows:minmax(140px,1.25fr) minmax(124px,1fr) auto;
    }
    body[data-chapter="timeline"] .hero-title-block{align-self:center}
    body[data-chapter="timeline"] .hero-title-scope{
      max-width:30ch;
      margin-top:20px;
      font-size:11px;
      line-height:1.7;
      letter-spacing:.04em;
      text-wrap:balance;
    }
    body[data-chapter="timeline"] .heat-readout{
      justify-self:end;
      align-self:center;
      width:max-content;
      max-width:100%;
      min-height:124px;
      align-content:start;
    }
    body[data-chapter="timeline"] .heat-readout b{font-size:44px;line-height:1}

    body[data-chapter="timeline"] .convergence-guide{--guide-card-width:var(--phone-guide-w)}
    body[data-chapter="timeline"] :is(#guide-sources,#guide-menu){
      --guide-open-width:var(--phone-guide-w);
    }
    body[data-chapter="timeline"] .guide-panel-stack{--guide-edge:calc((100vw - var(--phone-guide-w)) / 2)}

    html.guide-reel-live body[data-chapter="timeline"] .guide-stage-viewport{
      height:calc(var(--phone-guide-h,var(--guide-stage-height,600px)) + 18px);
    }
    html.guide-reel-live body[data-chapter="timeline"] .guide-beat{
      top:6px;
      width:var(--phone-guide-w);
      height:var(--guide-natural-h,auto);
      border-radius:var(--guide-radius);
      opacity:var(--phone-guide-alpha,var(--guide-ring-alpha,1));
      transform:
        translate3d(calc(var(--guide-x,50vw) - 50% + (var(--phone-guide-r,0) * var(--phone-guide-pitch))),var(--guide-float-y,0px),0)
        scale(var(--phone-guide-s,1))
        scale(var(--guide-liquid-x,1),var(--guide-liquid-y,1));
      transform-origin:50% 0;
    }
    /* A plate no longer closes into a band, so its content keeps its place and
       the band's label is not drawn. */
    html.guide-reel-live body[data-chapter="timeline"] .guide-panel{
      width:100%;
      height:var(--guide-natural-h,auto);
      transform:none;
    }
    html.guide-reel-live body[data-chapter="timeline"] .guide-spine{display:none}

    /* The count stands at the foot of the stage on the desktop, where the eye
       lands after reading the plate. A plate on a phone runs past the bottom
       of the screen, so the same count floats at the foot of the screen while
       the guide is in view, in the capsule glass of the rail below it, and
       comes to rest under the stage once the reader reaches it. */
    body[data-chapter="timeline"] .guide-coda{
      position:sticky;
      z-index:8;
      bottom:calc(var(--mhc-phone-foot) + 10px);
      display:flex;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:center;
      gap:6px;
      width:max-content;
      max-width:calc(100% - (2 * var(--mhc-phone-gutter)));
      margin:12px auto 0;
      padding:4px;
      border-radius:var(--elastic-pill,999px);
      background:var(--elastic-glass-surface);
      box-shadow:var(--elastic-glass-shadow),inset 0 0 0 1px var(--elastic-glass-edge);
      backdrop-filter:blur(24px) saturate(138%);
      -webkit-backdrop-filter:blur(24px) saturate(138%);
      transition:bottom .52s var(--elastic-ease),opacity .2s ease;
    }
    html.mhc-phone-receded body[data-chapter="timeline"] .guide-coda{bottom:calc(var(--mhc-phone-safe-bottom) + 18px)}
    body[data-chapter="timeline"] .guide-progress{padding:0 2px;background:transparent}
    body[data-chapter="timeline"] .guide-progress button{height:44px}
    body[data-chapter="timeline"] .guide-enter,
    body[data-chapter="timeline"] .guide-coda.is-final .guide-enter{
      position:relative;
      right:auto;
      top:auto;
      min-height:44px;
      padding:0 18px;
      font-size:11px;
    }
    body[data-chapter="timeline"] .guide-coda:not(.is-final) .guide-enter{display:none}
  }
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    /* The static spine reduced motion draws in place of the live one stands
       at the entries' spine column, which no longer sits beside a rail. */
    body[data-chapter="timeline"].journey-in-era::after{left:36px}
    body[data-chapter="timeline"] .heat-readout::before,
    body[data-chapter="timeline"] .guide-coda,
    body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus::before,
    body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus .timeline-filter-drawer{transition-duration:.01ms!important}
    body[data-chapter="timeline"] #timeline-stage>.timeline-apparatus .timeline-filter-drawer{clip-path:none;transform:none}
  }
}

/* ---- 41-frames.css --------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   01 Frames, seated for the hand
   ---------------------------------------------------------------------------
   The cover, the curled quotation, the configuration table and the full
   argument list were already phone compositions of their own, so what this
   partial changes about them is small: the chapter takes the phone's gutter,
   the cover's continuation clears the foot rail instead of sitting under it,
   and the table's key stops holding its column open past the screen.

   The framework stage is the one instrument that needed to be seated again.
   On the desktop it is a pinned room that a reader scrolls through, three
   lenses handing over one to the next, with the question and its explanation
   on one side and the lens's cards dealt across the other. Below 600 pixels
   the same room kept its pinning and its scroll run but stacked the cards two
   rows deep at the foot of the screen, so the deck was dealt off the right
   edge and half of it could never be reached. Because the room fits one
   phone screen once the masthead band and the foot rail are taken out of it,
   the phone uses the lens switcher to choose a group directly. The question
   reads first, followed by the switcher and a two-column register. Every term
   has its own cell, with the authored definition on its reverse. Cards flow
   in the page, so scrolling never changes the group or enters a nested panel.

   The desktop states the stage twice, once for the pinned reading and once,
   a class deeper, for the reading reduced motion gets, which is not pinned.
   A rule here that must hold in both is therefore written against both,
   through `:is(.is-motion-ready,:not(.is-motion-ready))`, which matches every
   enhanced stage and carries the weight of the heavier of the two.
   ------------------------------------------------------------------------- */

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  #sec-frames{
    /* The room the pinned stage may occupy: below the masthead band and the
       notch, and above the foot rail with a little air on both sides. */
    --fw-phone-top:calc(var(--archive-masthead-band,37px) + env(safe-area-inset-top,0px) + 8px);
    --fw-phone-bottom:calc(var(--mhc-phone-foot,64px) + 8px);
    --fw-phone-stage:calc(100svh - var(--fw-phone-top) - var(--fw-phone-bottom));
    /* The desktop's run, two viewports and a fifth, is kept: each lens is
       held for the same share of a reading run as it is on a wide screen. */
    --fw-phone-run:220svh;
  }
  /* The hidden desktop masthead still reports its full content height.
     Pin below the visible phone header: its safe inset, 56px row and gap. */
  html.mhc-phone-header-ready #sec-frames{
    --fw-phone-top:calc(max(12px,env(safe-area-inset-top,0px)) + 56px + 8px);
  }
  html.mhc-phone-header-ready #sec-frames :is(#frame-register,#frame-table-primer,#frame-bench){scroll-margin-top:var(--fw-phone-top)}
  /* One gutter for the chapter, the phone's own, in place of the desktop's
     clamp that happens to land two pixels wider. */
  body.chapter-reading #sec-frames>.wrap{padding-inline:var(--mhc-phone-gutter)}

  /* ---- the cover -------------------------------------------------------
     The continuation stood on the viewport's foot, which on a phone is where
     the rail now stands, so the arrow was drawn under the identity capsule. */
  body.chapter-reading[data-chapter='frames'] #sec-frames .sec-head[data-chapter-hero]>.frame-hero-continue{
    bottom:calc(var(--mhc-phone-foot) + 10px);
  }

  /* ---- the framework stage: the room, pinned in one screen ------------- */
  #sec-frames .frame-framework-shell{--framework-sticky-top:var(--fw-phone-top)}
  #sec-frames .frame-framework-guide.is-stack-ready{overflow-anchor:none}
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready{
    --framework-stage-top:var(--fw-phone-top);
    height:calc(var(--fw-phone-stage) + var(--fw-phone-run));
  }
  /* The stage runs to both edges of the screen so that the deck can too; the
     reading rows take the gutter back as padding. The desktop states its
     width as a percentage, which a negative margin shifts rather than widens,
     so the width is handed back to the margins to decide. */
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-stage{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    row-gap:14px;
    width:auto;
    min-height:0;
    margin-inline:calc(-1 * var(--mhc-phone-gutter));
    padding:4px var(--mhc-phone-gutter) 6px;
    border:0;
    border-radius:0;
  }
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-stage{height:var(--fw-phone-stage)}
  /* Without the scroll run the stage is not pinned and reads in the page, in
     the same order, ending clear of the next section. */
  #sec-frames .frame-framework-guide.is-stack-ready:not(.is-motion-ready) .frame-framework-stage{
    grid-template-rows:auto auto auto auto;
    padding-bottom:20px;
    overflow:visible;
  }

  /* The statement reads first, as it does down the desktop's left column.
     Between 600 and 700 pixels, and on a landscape phone, the viewport also
     falls inside the desktop's own spread, which narrows the statement to a
     rail and drops it toward the band's middle, so the phone gives it back
     its whole row. */
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-heading{grid-row:1;grid-column:1;width:auto;margin:0}
  #sec-frames .frame-framework-heading>.frame-framework-lens-copy{gap:10px}
  #sec-frames .frame-framework-lens-copy .frame-framework-question{
    max-width:16ch;
    font-size:clamp(var(--mhc-type-3xl),4.3svh,var(--mhc-type-4xl));
    line-height:1.04;
  }
  #sec-frames .frame-framework-copy{max-width:60ch;font-size:var(--mhc-type-lg);line-height:1.5}

  /* The lens switcher is the configuration table's own capsule, since it is
     the same choice between the same three lenses one screen further on. */
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher{
    position:relative;
    inset:auto;
    z-index:24;
    grid-row:2;
    grid-column:1;
    justify-self:stretch;
    align-self:start;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
    width:auto;
    padding:4px;
    border:0;
    border-radius:var(--frame-pill);
    background:var(--frame-glass-surface-soft);
    box-shadow:inset 0 1px 0 rgba(var(--mhc-on-plate-rgb),.1),0 8px 22px rgba(var(--mhc-shadow-rgb),.06);
    backdrop-filter:blur(18px) saturate(132%);
    -webkit-backdrop-filter:blur(18px) saturate(132%);
  }
  #sec-frames .frame-framework-guide.is-stack-ready .frame-framework-switcher button{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-content:center;
    place-items:center;
    text-align:center;
    min-width:0;
    min-height:44px;
    gap:0;
    padding:6px 10px;
    border:1px solid transparent;
    border-radius:var(--frame-pill);
    background:transparent;
    color:var(--frame-soft);
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .24s ease,color .24s ease,border-color .24s ease,box-shadow .34s var(--ease-out,cubic-bezier(.16,1,.3,1)),transform .42s var(--ease-out,cubic-bezier(.16,1,.3,1));
  }
  #sec-frames .frame-framework-switcher button::before{display:none}
  #sec-frames .frame-framework-guide.is-stack-ready .frame-framework-switcher button:active{transform:scale(.97)}
  #sec-frames .frame-framework-guide.is-stack-ready .frame-framework-switcher button[aria-current='step']{
    --mhc-ink-rgb:var(--mhc-on-chroma-rgb);
    border-color:var(--mhc-on-paper);
    background:var(--mhc-on-paper);
    color:var(--mhc-surface-room);
    box-shadow:0 10px 24px rgba(var(--mhc-shadow-rgb),.15),inset 0 1px 0 rgba(var(--mhc-ground-rgb),.18);
  }
  #sec-frames .frame-framework-switcher span{font:500 var(--mhc-type-md)/1.2 var(--sans);letter-spacing:-.02em;white-space:nowrap}

  /* The instruction keeps its desktop place at the head of the deck; its
     rule stands down, as the desktop already has it do below 520 pixels. */
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-instruction{
    position:static;
    grid-row:3;
    grid-column:1;
    margin:0;
  }
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-instruction::after{display:none}

  /* ---- the deck --------------------------------------------------------
     Each lens's field becomes the band its deck lies in, sized by the stage
     rather than by the card, and named a container so the card can take its
     height from the band and its width from the screen, whichever binds. */
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-components{
    grid-row:4;
    grid-column:1;
    align-self:stretch;
    margin-inline:calc(-1 * var(--mhc-phone-gutter));
    padding:0;
    overflow:visible;
  }
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-components{
    position:relative;
    inset:auto;
    display:block;
    min-height:0;
    container-type:size;
    /* The desktop band clips a handover at its head so that no card crosses
       the question; here the band is clipped on every side, because the deck
       also rises in from the stage's foot, where the position mark stands. */
    overflow:clip;
    clip-path:none;
  }
  #sec-frames .frame-framework-guide .frame-framework-component-list,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-component-list{
    --component-card-width:min(62vw,236px);
    /* Positioned so that a card's offset is read against its own deck. */
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    width:auto;
    max-width:none;
    margin:0;
    padding:16px calc(50% - var(--component-card-width) / 2) 20px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  /* Tall enough to read a definition, and never wider than leaves the next
     card showing at the edge, which is what says the deck goes on. The
     desktop's spread sizes its cards one class deeper, so the measure is
     stated at that weight too. */
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-components .frame-framework-component-list{
    --component-card-width:min(62cqw,calc((100cqh - 36px) / 1.5));
  }
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-component-list{
    position:absolute;
    inset:0;
    place-content:normal;
    padding:16px calc(50cqw - var(--component-card-width) / 2) 20px;
  }
  #sec-frames .frame-framework-component-list::-webkit-scrollbar{display:none}
  #sec-frames .frame-framework-guide .frame-framework-component-list li,
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-component-list li{
    flex:0 0 var(--component-card-width);
    width:var(--component-card-width);
    height:calc(var(--component-card-width) * 1.5);
    margin:0;
    scroll-snap-align:center;
    --fan-scale:.96;
  }
  #sec-frames .frame-framework-component-list li:has(button[aria-expanded='true']){z-index:6}

  /* Only the selected group takes space. Its cards read in the page, without
     an internal scroll region or a scroll-driven lens handover. */
  @media screen{
    #sec-frames .frame-framework-guide.is-stack-ready:not(.is-motion-ready) .frame-framework-components:not(.is-active){display:none}
  }
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-components{overflow:visible}
  #sec-frames .frame-framework-guide.is-stack-ready:not(.is-motion-ready) .frame-framework-components{position:relative;height:auto}
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-components{container-type:normal}
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-component-list,
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-components .frame-framework-component-list{
    --component-card-width:auto;
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:112px;
    align-content:start;
    justify-content:stretch;
    gap:10px;
    width:100%;
    height:auto;
    padding:6px var(--mhc-phone-gutter) 12px;
    overflow:visible;
    overscroll-behavior:auto;
    scroll-snap-type:none;
    touch-action:auto;
    transform:none;
    scrollbar-width:none;
  }
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-component-list li,
  #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-component-list li{
    grid-column:auto!important;
    width:auto;
    height:112px;
    aspect-ratio:auto;
    min-width:0;
    margin:0;
    transform:none;
  }
  #sec-frames .frame-framework-component-list button{border-radius:16px}
  #sec-frames .frame-framework-card-face{
    --component-card-inset:12px;
    --component-card-guard:0px;
    padding:12px;
    box-shadow:0 5px 12px rgba(var(--mhc-shadow-rgb),.1),inset 0 1px 0 color-mix(in srgb,var(--component-ink) 16%,transparent);
  }
  #sec-frames .frame-framework-card-front b{font-size:17px;line-height:1.2}
  #sec-frames .frame-framework-card-front::after{left:12px;right:12px;bottom:39px}
  #sec-frames .frame-framework-glyph{left:12px;bottom:9px;width:24px}
  #sec-frames .frame-framework-card-back span{font-size:12px;line-height:1.3}
  #sec-frames .frame-framework-component-list button[aria-pressed='true']{outline:2px solid var(--frame-ink);outline-offset:-2px}

  /* ---- the configuration table ----------------------------------------
     The key under the matrix is a max-content row, and the view it stands in
     sized its only column to it, so on a phone the matrix window was held
     open about a hundred pixels past the screen and its last columns and the
     key's end were cut by the page. The column takes the width it is given
     and the key wraps inside it. */
  #sec-frames .frame-matrix-view{grid-template-columns:minmax(0,1fr)}
  #sec-frames .frame-matrix-legend{justify-self:stretch;width:auto;margin-right:0}

  /* ---- a landscape phone -----------------------------------------------
     Turned on its side the screen cannot stand the statement over the deck,
     so the stage reads as the desktop spread does: the statement and the
     switcher down the left, the register across the right. */
  @media (orientation:landscape){
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-stage{
      grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
      grid-template-rows:auto minmax(0,1fr) auto auto;
      column-gap:20px;
      row-gap:10px;
    }
    #sec-frames .frame-framework-guide.is-stack-ready:not(.is-motion-ready) .frame-framework-stage{grid-template-rows:auto auto auto auto}
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-heading{grid-row:1 / 3;grid-column:1;align-self:start}
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher{grid-row:3;grid-column:1;align-self:end}
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-instruction{grid-row:1;grid-column:2;align-self:start}
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-components{
      grid-row:2 / 4;
      grid-column:2;
      margin-inline:0 calc(-1 * var(--mhc-phone-gutter));
    }
    #sec-frames .frame-framework-lens-copy .frame-framework-question{max-width:none;font-size:var(--mhc-type-2xl)}
    #sec-frames .frame-framework-copy{max-width:none;font-size:var(--mhc-type-md);line-height:1.45}
  }

  /* A short phone gives the deck the height it would otherwise spend on the
     explanation's leading. */
  @media (max-height:720px) and (orientation:portrait){
    #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-stage{row-gap:10px}
    #sec-frames .frame-framework-copy{font-size:var(--mhc-type-md);line-height:1.45}
  }
}

/* Reduced motion keeps the cards flat as each lens changes. */
@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    #sec-frames .frame-framework-guide .frame-framework-component-list li{--fan-scale:1}
  }
}

/* ---- 42-measurement.css ---------------------------------------------------- */
/* ---------------------------------------------------------------------------
   02 · Measurement, seated for the hand
   ---------------------------------------------------------------------------
   The chapter already reads on a phone: its cover waves, the Borsboom
   quotation and its curl, the definitions, the DSM editions and the five
   comparisons all run as the desktop authors them, and the curl spends the
   same number of screens on a phone as on a desktop because its run is
   measured in viewport heights. What the phone lost were four instruments
   that answer a pointer, and this sheet gives each of them back in a form a
   thumb can use rather than taking it away.

   To begin with, the counting-rule matrix. Below 640px the chapter confines
   it to a sideways scroller that shows four of its ten eras at a time, which
   keeps the matrix whole and hides most of the pattern it exists to show.
   Here the matrix is turned a quarter so that time runs down the page, as it
   already does in the era register directly beneath it: the three routes
   stand as column heads across the top, each still the toggle that lights its
   eras, and the ten eras become rows, each row the link that opens its
   reading. Nothing is hidden and every era is a full-width target.

   In addition, the era register. A pointer previews an era's paradigm by
   resting on its row, which a thumb cannot do, so the first tap on a closed
   row is the rest and the second tap is the press; the mark at the row's end
   still opens at once, and says so while a row is previewed. The paradigm
   takes the title's cell as it does under a pointer, and the cell keeps room
   for both, so a preview never moves the rows beneath it.

   The evidence desk keeps its own container-query composition, which was
   already written for a narrow desk; it only takes the phone's label floor,
   its chart answers a finger drawn along the plot as it answers a passing
   pointer, and its ledger becomes a scroller a reader can see is one: the
   period stays pinned at the leading edge on the sticky head's own surface,
   the columns snap, and the trailing edge fades while more of the table lies
   beyond it.

   Several selectors below carry html.mhc-phone and an id. The chapter's two
   late style blocks follow this sheet in its head and state the narrow
   register at an id's weight, so this sheet meets them at a greater one
   rather than with !important.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){

  /* ---- the cover ---------------------------------------------------------
     The pause control stands at the foot of the cover, which is where the
     foot rail now stands, so it rises above the rail's claim rather than
     sitting under a capsule where no thumb can reach it. The chapter number
     beside the title takes the phone's label floor. */
  .woven-chapter-hero[data-woven-chapter="measurement"]>.woven-motion-toggle{bottom:calc(var(--mhc-phone-foot) + 12px);right:10px}
  [data-chapter-hero="measurement"]{--chapter-number-size:11px}

  /* ---- the counting rules, turned so that time runs down ------------------ */
  @media (max-width:640px){
    html.mhc-phone #era-instruments .era-routes-scroll{overflow:visible}
    html.mhc-phone #era-instruments .era-routes-grid{
      min-width:0;
      grid-template-columns:48px repeat(3,minmax(0,1fr));
      grid-template-rows:auto repeat(10,minmax(44px,auto));
      /* The rows are measured against this width, so that a whole row can
         answer the finger that presses any part of it. */
      container-type:inline-size;
      border-bottom:1px solid rgba(var(--mhc-on-plate-rgb),.24);
    }
    html.mhc-phone #era-instruments .era-routes-corner{grid-column:1;grid-row:1;visibility:hidden}
    html.mhc-phone #era-instruments .era-route{
      grid-row:1;
      align-content:end;
      justify-items:center;
      gap:7px;
      padding:14px 4px 13px;
      border-top:0;
      text-align:center;
      /* The held route is marked on the edge that faces its column, which is
         the top edge once the column runs down beneath it. */
      box-shadow:inset 0 2px 0 transparent;
    }
    html.mhc-phone #era-instruments .era-route[data-route="record"]{grid-column:2}
    html.mhc-phone #era-instruments .era-route[data-route="report"]{grid-column:3}
    html.mhc-phone #era-instruments .era-route[data-route="threshold"]{grid-column:4}
    html.mhc-phone #era-instruments .era-route[aria-pressed="true"]{box-shadow:inset 0 2px 0 var(--mhc-chapter-measurement-ink)}
    html.mhc-phone #era-instruments .era-route-head{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:7px}
    html.mhc-phone #era-instruments .era-route-count{flex-basis:auto;margin-left:0}
    html.mhc-phone #era-instruments .era-route-gloss{display:block;max-width:15ch;font-size:12px;line-height:1.36}
    html.mhc-phone #era-instruments :is(.era-routes-eras,.era-routes-marks){
      grid-row:2/span 10;
      grid-template-columns:none;
      grid-template-rows:subgrid;
      padding:0;
      border-top:1px solid rgba(var(--mhc-on-plate-rgb),.24);
    }
    html.mhc-phone #era-instruments .era-routes-eras{grid-column:1}
    html.mhc-phone #era-instruments .era-routes-marks[data-route="record"]{grid-column:2}
    html.mhc-phone #era-instruments .era-routes-marks[data-route="report"]{grid-column:3}
    html.mhc-phone #era-instruments .era-routes-marks[data-route="threshold"]{grid-column:4}
    html.mhc-phone #era-instruments :is(.era-routes-eras,.era-routes-marks) li{min-height:0}
    html.mhc-phone #era-instruments :is(.era-routes-eras,.era-routes-marks) li+li{box-shadow:inset 0 1px 0 rgba(var(--mhc-on-plate-rgb),.1)}
    html.mhc-phone #era-instruments .era-routes-eras li{display:flex}
    html.mhc-phone #era-instruments .era-routes-era{position:relative;flex:1 1 auto;min-height:0;margin:4px 2px}
    /* The era number is the row's link, and its target is the row: an
       invisible extension runs across the three mark cells, which carry no
       control of their own, so a finger anywhere on the line opens the era. */
    html.mhc-phone #era-instruments .era-routes-era::after{
      content:"";
      position:absolute;
      top:-4px;
      bottom:-4px;
      left:-2px;
      width:100cqw;
    }
  }

  /* A held route answers in the reading line under the matrix, which on a
     phone lies half a screen below the column heads that asked. While a route
     is held the line therefore stands at the foot of the screen, over the
     matrix it describes, in the glass the phone's own chrome wears, and it
     sinks with the rail when the rail recedes; released, it returns to its
     place in the column. */
  html.mhc-phone #era-instruments .era-routes:has(.era-route[aria-pressed="true"]) .era-routes-reading{
    position:sticky;
    z-index:3;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    margin-inline:-8px;
    padding:12px 14px 13px;
    border-radius:18px;
    background:var(--elastic-glass-surface);
    box-shadow:var(--elastic-glass-shadow),inset 0 0 0 1px var(--elastic-glass-edge);
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    backdrop-filter:blur(24px) saturate(138%);
    color:var(--elastic-light,var(--mhc-ink));
    font-size:15px;
    line-height:1.5;
    transition:translate .52s var(--elastic-ease),opacity .16s ease,transform .22s var(--ease);
  }
  html.mhc-phone-receded #era-instruments .era-routes:has(.era-route[aria-pressed="true"]) .era-routes-reading{
    translate:0 calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) - 10px);
  }

  /* A phone on its side has no height to spare for a pinned line. */
  @media (max-height:500px){
    html.mhc-phone #era-instruments .era-routes:has(.era-route[aria-pressed="true"]) .era-routes-reading{position:static;translate:none}
  }

  /* ---- the era register: the first tap is the rest ------------------------
     The paradigm is kept in the cell it shares with the title even while it
     is hidden, so the row is sized for the longer of the two and a preview
     never pushes the rows below it. */
  html.mhc-phone #era-instruments .era-tile:not([open]):not([data-era-closing]) .era-brief{
    display:block;
    visibility:hidden;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .28s ease,transform .44s var(--ease),visibility 0s linear .44s;
  }
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]:not([open]) .era-brief{
    visibility:visible;
    opacity:1;
    transform:none;
    transition:opacity .28s ease,transform .44s var(--ease),visibility 0s;
  }
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]:not([open]) .era-title{opacity:0;transform:translateY(-6px)}
  /* The previewed row takes the lit plate a pointer gives it, which the
     chapter keys to its own hover attribute: the era's wash, its ring, its bar
     and the small lift. */
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]{--era-accent-gain:var(--era-gain)}
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]:not([data-era-moving]){
    z-index:2;
    transform:translate3d(0,calc(-1 * var(--era-lift)),0) scale(var(--era-grow));
  }
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]::before{
    box-shadow:
      inset 0 0 0 1px rgba(var(--mhc-on-plate-rgb),.15),
      inset 0 0 0 1px color-mix(in srgb,var(--era-tone) calc(76% * var(--era-accent-gain)),transparent),
      0 22px 52px rgba(var(--mhc-shadow-rgb),.13);
  }
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]::after{transform:none;opacity:1}
  html.mhc-phone #era-instruments .era-tile[data-phone-preview] .era-open-mark{color:var(--era-mark-small)}
  html.mhc-phone #era-instruments .era-tile[data-phone-preview] .era-open-mark i{opacity:1}
  /* The mark names the second tap while a row is previewed, and names the
     way back once it is open. Its word keeps its width at rest, so the title
     beside it never re-wraps when the word appears. */
  html.mhc-phone #era-instruments .era-open-mark>span{visibility:hidden}
  html.mhc-phone #era-instruments .era-open-mark>.era-mark-shut{display:inline}
  html.mhc-phone #era-instruments .era-open-mark>.era-mark-open{display:none}
  html.mhc-phone #era-instruments .era-tile[open]:not([data-era-closing]) .era-open-mark>.era-mark-shut{display:none}
  html.mhc-phone #era-instruments .era-tile[open]:not([data-era-closing]) .era-open-mark>.era-mark-open{display:inline}
  html.mhc-phone #era-instruments .era-tile[data-phone-preview]:not([open]) .era-open-mark>.era-mark-shut,
  html.mhc-phone #era-instruments .era-tile[open]:not([data-era-closing]) .era-open-mark>.era-mark-open{visibility:visible;opacity:1;transform:none}
  @media (max-width:640px){
    /* The mark leaves the title's rows and stands beside the years, so that
       its word takes room from the short line of the year range rather than
       from the title. */
    html.mhc-phone #era-instruments .era-tile .era-tile-face{grid-template-columns:34px minmax(0,1fr) auto}
    html.mhc-phone #era-instruments .era-tile .era-open-mark{grid-column:3;grid-row:1;align-self:center;min-height:24px}
    html.mhc-phone #era-instruments .era-tile .era-title,
    html.mhc-phone #era-instruments .era-tile .era-brief{grid-column:1/-1;align-self:start}
  }
  @media (min-width:641px){
    html.mhc-phone #era-instruments .era-tile .era-tile-face{grid-template-columns:44px 108px minmax(0,1fr) auto}
  }

  /* ---- the evidence desk ------------------------------------------------- */
  html.mhc-phone .evidence-workbench .mode-tab,
  html.mhc-phone .evidence-workbench .survey-filter{font-size:11px}
  html.mhc-phone .evidence-workbench .survey-filter{min-height:44px}
  html.mhc-phone .evidence-workbench :is(.chart-label,.chart-break-label){font-size:11px}
  html.mhc-phone .evidence-workbench .chart-figure figcaption{font-size:11px}
  /* The chart answers a finger drawn along it, so the page only takes the
     vertical part of a gesture that starts on the plot. */
  html.mhc-phone .evidence-workbench .chart-wrap{touch-action:pan-y}

  /* ---- the published estimates, a scroller that reads as one ------------ */
  html.mhc-phone .evidence-workbench .data-table-wrap{
    --phone-period-col:92px;
    position:relative;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--phone-period-col);
    -webkit-overflow-scrolling:touch;
  }
  html.mhc-phone .evidence-workbench .data-table :is(th,td){scroll-snap-align:start}
  html.mhc-phone .evidence-workbench .data-table :is(th,td):first-child{
    position:sticky;
    left:0;
    z-index:1;
    width:var(--phone-period-col);
    min-width:var(--phone-period-col);
    white-space:normal;
    /* The pinned column is the head's float material laid on the plain
       ground, so it reads as the same surface as the sticky head while
       staying opaque: a translucent pane would let the estimates scrolling
       under it print through the period beside them. */
    background:linear-gradient(rgba(var(--mhc-float-rgb),.76),rgba(var(--mhc-float-rgb),.76)),var(--mhc-ground);
    box-shadow:inset -1px 0 0 var(--desk-line);
  }
  html.mhc-phone .evidence-workbench .data-table thead th:first-child{z-index:3}
  /* The trailing edge fades while more of the table lies beyond it. The
     script reports which ends the scroller has reached; without it the table
     simply scrolls as it did, and a fade is used rather than a cast shadow
     because the desk stands on the chapter's field, where a shadow would read
     as a stain. */
  html.mhc-phone .evidence-workbench .data-table-wrap:is([data-phone-scroll="start"],[data-phone-scroll="middle"]){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.18));
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.18));
  }
  html.mhc-phone .evidence-workbench .data-table-wrap:focus-visible{outline:2px solid var(--mhc-sage-ink);outline-offset:3px}

  /* ---- the full-screen dashboard ------------------------------------------
     The dialog is the one surface that takes the whole phone, so its sticky
     heading clears the notch. The field sheet clears the heading's ground for
     the in-page desk, and because the dialog carries the same desk, the rule
     reached the dialog's sticky heading too, which then let the series title
     scroll through its words; the heading takes the dialog's own ground back
     here. */
  html.mhc-phone .measurement-dashboard-dialog .evidence-workbench .dashboard-heading{
    padding-top:calc(18px + env(safe-area-inset-top,0px));
    background:var(--mhc-ground);
  }
}

/* The chapter's own reduced-motion block already stills the title, the
   paradigm and the reading line; the preview only has its lift to give up. */
@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    html.mhc-phone #era-instruments .era-tile[data-phone-preview]:not([data-era-moving]){transform:none}
  }
}

/* ---- 43-claims.css --------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   03 Claims-makers · the constellation seated for the hand
   ---------------------------------------------------------------------------
   The desktop stage is a wide field with its instruments standing around the
   edges of it: the series along the top, the stage copy down the left, the
   zoom group at the upper right, the two keys in the lower corners, the lens
   tabs below them, and an inspector that rises as a strip along the foot. A
   portrait screen has no corners to spare, because every one of those
   instruments landed on the field at 390 pixels, so the phone keeps each of
   them and gives them the one arrangement a tall screen has room for. The
   stage copy and the zoom group stand at the head of the stage, where the
   desktop already keeps its readouts, the field takes everything between the
   head and the foot, and the series and the lens bar become two unboxed rows
   docked above the foot rail, where the thumb already is. The two keys fold
   into a panel the tray opens, and a selected claims-maker or tie opens as a
   sheet in the drawer's glass rather than as a strip beside the field.

   ONE ARITHMETIC FOR THE WHOLE STAGE. The chapter's own camera frames the live
   field inside whatever box the world is given, and it reads the lens bar and
   the zoom group to learn what it may not cover. The world is therefore laid
   out once, between the head and the raised tray, and it never changes size
   while the reader scrolls: when the chrome recedes, the tray and its sheets
   follow the rail down by the same distance, and the field underneath stays
   where the camera left it. Were the world to grow with the receding chrome,
   every downward run would refit the field under the reader's eye.

   Several of the chapter's declarations are stated through two classes and
   an ancestor, and a few at the 620 pixel breakpoint set `bottom` and `top`
   directly on states this layer composes differently. The stage's id is the
   one selector that meets all of them without restating each, so the rules
   below are written against it and scoped away from fullscreen, which keeps
   the chapter's own composition. They also wait for the class the phone
   layer's script sets on the root, because the tray's glass and the key are
   built by that script: a phone with scripts refused keeps the chapter's own
   narrow stage rather than half of this one.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){

  /* The five roles form a reading list on a phone, with the symbol beside
     its definition. The desktop fan's tilt and tall proportions stay there. */
  #reading-key .role-key{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    margin-top:28px;
    padding:0;
    perspective:none;
  }
  #reading-key .role-key::before{content:none}
  #reading-key .role-key article:nth-child(n){
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:8px 16px;
    width:100%;
    min-height:0;
    aspect-ratio:auto;
    margin:0;
    padding:20px;
    box-sizing:border-box;
    border-radius:22px;
    transform:none;
    transform-style:flat;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--role-label) 18%,transparent);
    transition:none;
    animation:none;
  }
  #reading-key .role-key article::after{content:none}
  #reading-key .role-key h3{
    grid-column:2;
    grid-row:1;
    max-width:none;
    font-size:22px;
    line-height:1.12;
    letter-spacing:-.025em;
    text-wrap:pretty;
  }
  #reading-key .role-key p{
    grid-column:2;
    grid-row:2;
    max-width:none;
    padding:0;
    font-size:16px;
    line-height:1.5;
  }
  #reading-key .role-key i{grid-column:1;grid-row:1/3;align-self:start;margin:4px 0 0}

  /* ---- the cover ---------------------------------------------------------
     The motif's pause control stands at the lower right corner of the cover,
     which on a phone is where the rail's top capsule already stands, so it is
     lifted clear of the foot rail rather than left underneath it. */
  .woven-chapter-hero[data-woven-chapter="claims-makers"]>.woven-motion-toggle{
    right:12px;
    bottom:calc(var(--mhc-phone-foot) + 12px);
  }

  /* ---- the stage's arithmetic ------------------------------------------- */
  html.mhc-phone #stage{
    --cm-band:calc(var(--archive-masthead-band,37px) + env(safe-area-inset-top,0px));
    --cm-gutter:14px;
    --cm-head-top:calc(var(--cm-band) + 6px);
    --cm-zoom-h:54px;
    /* The year's row, then a title reserved at two lines, which only the last
       stage's title needs. */
    --cm-copy-h:calc(var(--cm-zoom-h) + 47px);
    --cm-status-h:34px;
    --cm-row:44px;
    --cm-tray-pad:5px;
    --cm-tray-gap:4px;
    --cm-tray-h:calc(var(--cm-tray-pad) * 2 + var(--cm-row) * 2 + var(--cm-tray-gap));
    /* The tray docks six pixels above the foot rail, and everything that
       hangs from the foot measures itself from this line. */
    --cm-dock:calc(var(--mhc-phone-foot) + 6px);
    /* How far the chrome sinks when it recedes, which is the rail's own
       travel, so the tray lands just above the sliver the rail leaves. */
    --cm-sink:calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) - 14px);
    --cm-sheet:clamp(240px,44svh,400px);
    --cm-key-bottom:calc(var(--cm-dock) + var(--cm-tray-h) + 8px);
    --cm-roles-h:154px;
    --cm-ties-h:64px;
    --field-gutter:var(--cm-gutter);
    --field-top:calc(var(--cm-head-top) + var(--cm-copy-h) + 6px + var(--cm-status-h) + 8px);
    --field-bottom:calc(var(--cm-dock) + var(--cm-tray-h) + 10px);
    --inspector-strip:var(--cm-sheet);
    /* The stage takes the whole height of the small viewport. rail-dock.css
       shortens it by the bar's claim so that its keys and its lens bar clear
       the rail; here the tray does that job itself, and the stage keeps the
       foot so the tray has somewhere to follow the rail to. */
    height:100svh;
  }
  /* A tall screen keeps the stage's own sentence under its title, which never
     runs past three lines at its measure; a short one gives those lines to the
     field, which is the trade the chapter makes below 620 pixels of width,
     because the title and the year still say which stage the field shows.
     The shortest screens give up the operating line as well, since below 640
     pixels the field would otherwise fall under a third of the screen. */
  @media (min-height:700px){
    html.mhc-phone #stage{--cm-copy-h:calc(var(--cm-zoom-h) + 47px + 64px)}
  }
  @media (max-height:639px){
    html.mhc-phone #stage{--cm-status-h:0px}
    html.mhc-phone #stage:not(.is-focused) .stage-status{display:none}
  }
  /* With a claims-maker or a tie open, the stage copy has already stood down
     and the sheet holds the reading, so the field rises to meet the zoom row
     and takes what the sheet leaves above it. */
  html.mhc-phone #stage:not(.is-focused):is(.has-inspector,.has-edge-review){
    --field-top:calc(var(--cm-head-top) + var(--cm-zoom-h) + 10px);
    --field-bottom:calc(var(--cm-dock) + var(--cm-sheet) + 10px);
  }

  html.mhc-phone #stage:not(.is-focused) .network-world{
    top:var(--field-top);
    bottom:var(--field-bottom);
    left:0;
    right:0;
    /* The camera still glides; the box does not, because a box that slides
       while the camera is framing a selection hands the chapter a frame that
       is still moving and then refits the whole field once it settles. */
    transition:transform .38s var(--ease);
  }
  /* A finger is broader than the stroke a pointer follows, so the line's own
     hit path widens; the drawn line keeps its weight. */
  html.mhc-phone #stage .edge-hit{stroke-width:28}
  /* Node names rise to the label floor. */
  html.mhc-phone #stage .node-label,
  html.mhc-phone #stage.is-zoomed .node-label{font-size:11px;letter-spacing:.06em}
  html.mhc-phone #stage.is-zoomed .node-label{font-size:calc(11px * var(--annotation-zoom-counter))}
  /* A name that is not drawn cannot be pressed. The chapter fades a minor
     claims-maker's name out below 620 pixels and leaves it answering the
     pointer, which on a phone let an invisible label take a press meant for
     the line beneath it. */
  html.mhc-phone #stage .node-label{pointer-events:none}
  html.mhc-phone #stage :is(.node[data-major="true"],.node.is-selected) .node-label:not(.is-collided):not(.is-title-collided),
  html.mhc-phone #stage.is-detailed .node.is-live .node-label:not(.is-collided):not(.is-title-collided){pointer-events:auto}
  /* The coding step lists a second role only where the dossier records one;
     the chip's own grid outranked its hidden attribute and left an empty row. */
  html.mhc-phone #stage .inspector-code-item[hidden]{display:none}

  /* ---- the head: the stage copy, the zoom group and the status ----------- */
  html.mhc-phone #stage:not(.is-focused) .era-copy{
    top:var(--cm-head-top);
    left:var(--cm-gutter);
    /* The copy spans the stage on purpose: the chapter keeps the field to the
       right of the copy's box, and a box that reaches the far edge is the one
       the camera reads as leaving the whole width to the field. */
    right:var(--cm-gutter);
    width:auto;
  }
  html.mhc-phone #stage:not(.is-focused) .era-year{
    display:block;
    height:var(--cm-zoom-h);
    margin:0;
    font-size:40px;
    line-height:var(--cm-zoom-h);
  }
  html.mhc-phone #stage:not(.is-focused) .era-copy h2{
    max-width:none;
    margin:2px 0 0;
    font-size:21px;
    line-height:1.08;
    letter-spacing:-.024em;
  }
  html.mhc-phone #stage:not(.is-focused) .era-copy p{display:none}
  @media (min-height:700px){
    html.mhc-phone #stage:not(.is-focused) .era-copy p{
      display:block;
      display:-webkit-box;
      max-width:46ch;
      margin:8px 0 0;
      overflow:hidden;
      color:var(--mhc-on-plate-3);
      font-size:13px;
      line-height:1.42;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
    }
  }
  html.mhc-phone #stage:not(.is-focused) .stage-status{
    top:calc(var(--cm-head-top) + var(--cm-copy-h) + 6px);
    left:var(--cm-gutter);
    right:var(--cm-gutter);
    max-width:none;
    font-size:11px;
    line-height:1.45;
    letter-spacing:.04em;
    text-align:left;
    transition:opacity .25s ease;
  }
  /* The operating line and the count run as one line of notation, joined by
     the separator every record line in the archive uses, which holds the
     status to two lines at any phone width instead of three. */
  html.mhc-phone #stage:not(.is-focused) .stage-status b{display:inline;max-width:none}
  html.mhc-phone #stage:not(.is-focused) .stage-status b::after{content:"\00a0\00b7\0020";color:var(--mhc-on-plate-4)}
  /* The sheet names what is selected, so the operating line steps aside for
     it rather than standing over the raised field. */
  html.mhc-phone #stage:not(.is-focused):is(.has-inspector,.has-edge-review) .stage-status{opacity:0;visibility:hidden}

  html.mhc-phone #stage:not(.is-focused) .zoom-controls{
    top:var(--cm-head-top);
    right:10px;
    bottom:auto;
    left:auto;
    height:var(--cm-zoom-h);
    padding:4px;
    gap:0;
    transform:none;
  }

  /* ---- the tray: the series above, the lenses and the key below -------- */
  .cm-phone-tray{
    display:block;
    position:absolute;
    z-index:13;
    left:8px;
    right:8px;
    bottom:var(--cm-dock);
    height:var(--cm-tray-h);
    border-radius:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:transform .52s var(--elastic-ease,var(--ease)),opacity .25s ease;
  }
  html.mhc-phone #stage:not(.is-focused) .series-toolbar{
    left:calc(8px + var(--cm-tray-pad));
    right:calc(8px + var(--cm-tray-pad));
    top:auto;
    bottom:calc(var(--cm-dock) + var(--cm-tray-pad) + var(--cm-row) + var(--cm-tray-gap));
    height:var(--cm-row);
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:transform .52s var(--elastic-ease,var(--ease)),opacity .25s ease;
  }
  html.mhc-phone #stage .series-range{display:none}
  html.mhc-phone #stage:not(.is-focused) .series-controls{width:100%;height:100%;gap:0}
  /* The play control keeps its fill and its states and gives up its words,
     which the row has no width for: the mark says which of play, pause and
     replay a press will do, and the accessible name the chapter writes on
     every change still says it in full. */
  html.mhc-phone #stage:not(.is-focused) .series-play{
    flex:0 0 var(--cm-row);
    width:var(--cm-row);
    height:var(--cm-row);
    padding:0;
    border-radius:0;
    font-size:0;
    color:var(--light);
  }
  html.mhc-phone #stage:not(.is-focused) .series-play::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:16px;
    height:16px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  html.mhc-phone #stage:not(.is-focused) .series-play[aria-pressed="true"]::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z' fill='black'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z' fill='black'/%3E%3C/svg%3E");
  }
  html.mhc-phone #stage:not(.is-focused) .series-play[aria-label^="Replay"]::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12a6.5 6.5 0 1 0 2-4.7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4.5 4.5v4.2h4.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12a6.5 6.5 0 1 0 2-4.7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4.5 4.5v4.2h4.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* Seven stages share the row with Play; the shared view switcher marks
     the current stage with a dot and a full-height touch target for each numeral. */
  html.mhc-phone #stage:not(.is-focused) .era-index{
    flex:1 1 auto;
    display:flex;
    height:100%;
    gap:0;
    overflow:visible;
  }
  html.mhc-phone #stage:not(.is-focused) .era-index button{
    position:relative;
    isolation:isolate;
    flex:1 1 0;
    min-width:0;
    height:var(--cm-row);
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:var(--soft);
    font-size:11px;
    letter-spacing:0;
    -webkit-tap-highlight-color:transparent;
  }

  html.mhc-phone #stage:not(.is-focused) .lens-bar{
    left:calc(8px + var(--cm-tray-pad));
    right:calc(8px + var(--cm-tray-pad) + var(--cm-row) + 6px);
    top:auto;
    bottom:calc(var(--cm-dock) + var(--cm-tray-pad));
    height:var(--cm-row);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:none;
    transition:transform .52s var(--elastic-ease,var(--ease)),opacity .25s ease;
  }
  html.mhc-phone #stage:not(.is-focused) .lens-bar button{
    min-width:0;
    min-height:var(--cm-row);
    padding:0 4px;
    font-size:11px;
    letter-spacing:.03em;
    -webkit-tap-highlight-color:transparent;
  }
  html.mhc-phone #stage .lens-bar button[aria-pressed="true"]{transform:none}
  /* Ownership has no keys and no series of its own, so the tray keeps its
     lens row alone and the lenses take the width the key toggle leaves. */
  html.mhc-phone #stage.is-movement .cm-phone-tray{
    height:calc(var(--cm-tray-pad) * 2 + var(--cm-row));
  }
  html.mhc-phone #stage:not(.is-focused).is-movement .lens-bar{right:calc(8px + var(--cm-tray-pad))}

  /* ---- the key ---------------------------------------------------------- */
  .cm-phone-key-toggle{
    display:grid;
    position:absolute;
    z-index:15;
    right:calc(8px + var(--cm-tray-pad));
    bottom:calc(var(--cm-dock) + var(--cm-tray-pad));
    width:var(--cm-row);
    height:var(--cm-row);
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--soft);
    cursor:pointer;
    font:500 11px/1 var(--mono);
    letter-spacing:.06em;
    text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
    transition:transform .52s var(--elastic-ease,var(--ease)),background .3s var(--ease),color .2s,box-shadow .2s,opacity .25s ease;
  }
  /* The toggle is a different kind of control from the three lenses, which
     the desktop said with a hairline beside its Profiles jump, so the same
     hairline stands between them here. */
  .cm-phone-key-toggle::before{
    content:"";
    position:absolute;
    left:-4px;
    top:10px;
    bottom:10px;
    border-left:1px solid var(--line);
  }
  .cm-phone-key-toggle[aria-expanded="true"]{
    box-shadow:inset 0 0 0 1px var(--light);
    color:var(--light);
  }
  .cm-phone-key-toggle:focus-visible{outline:2px solid var(--light);outline-offset:-3px}
  /* A role chosen in the key goes on thinning the field after the key has
     closed, so the toggle carries a mark in the chosen role's color while it
     does. */
  .cm-phone-key-toggle[data-filtered]::after{
    content:"";
    position:absolute;
    top:9px;
    right:9px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cm-filter-color,var(--steel));
    box-shadow:0 0 0 2px rgba(var(--mhc-float-rgb),.9);
  }
  html.mhc-phone #stage.is-movement .cm-phone-key-toggle{opacity:0;visibility:hidden;pointer-events:none}
  /* Fullscreen keeps the chapter's own composition, in which the series, the
     lenses and the keys all stand down, so the tray and the key go with them. */
  html.mhc-phone #stage.is-focused :is(.cm-phone-tray,.cm-phone-key,.cm-phone-key-toggle){display:none}
  /* Fullscreen covers the whole window on a phone, the status bar and the
     home indicator included, so its corners keep the safe-area insets. */
  html.mhc-phone #stage.is-focused .focus-exit{top:calc(12px + env(safe-area-inset-top,0px))}
  html.mhc-phone #stage.is-focused .network-world{top:calc(68px + env(safe-area-inset-top,0px))}
  html.mhc-phone #stage.is-focused :is(.focus-info,.inspector,.edge-review){bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html.mhc-phone #stage.is-focused .zoom-controls{bottom:calc(var(--focus-panel) + 20px + env(safe-area-inset-bottom,0px))}
  html.mhc-phone #stage.is-focused .focus-info small{font-size:11px}

  .cm-phone-key{
    display:block;
    position:absolute;
    z-index:13;
    left:8px;
    right:8px;
    bottom:var(--cm-key-bottom);
    height:calc(16px * 3 + var(--cm-roles-h) + var(--cm-ties-h));
    border-radius:26px;
    background:linear-gradient(145deg,rgba(var(--mhc-ground-rgb),.95),rgba(var(--mhc-ground-rgb),.86));
    box-shadow:0 30px 80px rgba(var(--mhc-shadow-rgb),.3),0 5px 18px rgba(var(--mhc-shadow-rgb),.1),inset 0 0 0 1px var(--elastic-glass-edge-soft,rgba(var(--mhc-on-plate-rgb),.14)),inset 0 1px 0 var(--elastic-glass-highlight,rgba(var(--mhc-on-plate-rgb),.08));
    backdrop-filter:blur(30px) saturate(142%);
    -webkit-backdrop-filter:blur(30px) saturate(142%);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .2s ease,transform .46s var(--ease),visibility 0s linear .46s;
  }
  html.mhc-phone #stage[data-lens="position"] .cm-phone-key{height:calc(16px * 2 + var(--cm-roles-h))}
  html.mhc-phone #stage[data-phone-key="open"] .cm-phone-key{opacity:1;visibility:visible;transform:none;transition-delay:0s}

  html.mhc-phone #stage:not(.is-focused) .legend{
    left:calc(8px + 16px);
    right:calc(8px + 16px);
    width:auto;
    z-index:14;
    padding:0;
    border:0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .2s ease,transform .46s var(--ease),visibility 0s linear .46s;
  }
  html.mhc-phone #stage:not(.is-focused) .legend-roles{
    bottom:calc(var(--cm-key-bottom) + 16px + var(--cm-ties-h) + 16px);
    height:var(--cm-roles-h);
  }
  html.mhc-phone #stage:not(.is-focused)[data-lens="position"] .legend-roles{bottom:calc(var(--cm-key-bottom) + 16px)}
  html.mhc-phone #stage:not(.is-focused) .legend-ties{
    bottom:calc(var(--cm-key-bottom) + 16px);
    height:var(--cm-ties-h);
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  html.mhc-phone #stage:not(.is-focused)[data-phone-key="open"] .legend{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  /* The chapter hides the keys behind an open sheet; the key is closed by
     then, and this keeps it closed if a sheet opens underneath it. */
  html.mhc-phone #stage:not(.is-focused):is(.has-inspector,.has-edge-review) .legend{visibility:hidden}
  html.mhc-phone #stage .legend-group>b{margin-bottom:4px;font-size:11px;letter-spacing:.1em}
  html.mhc-phone #stage:not(.is-focused) .legend-role{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 8px;
  }
  html.mhc-phone #stage:not(.is-focused) .legend-role button{
    min-height:var(--cm-row);
    margin:0;
    padding:0 12px;
    font-size:11px;
    letter-spacing:.06em;
    -webkit-tap-highlight-color:transparent;
  }
  html.mhc-phone #stage:not(.is-focused) .legend-relationship{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 8px;
  }
  html.mhc-phone #stage:not(.is-focused) .legend span{font-size:11px;letter-spacing:.06em}
  html.mhc-phone #stage:not(.is-focused) .legend-relationship i{width:30px;min-width:30px}

  /* ---- the sheets ------------------------------------------------------- */
  /* A selected claims-maker and a selected tie open in the drawer's glass,
     above the foot rail and over the tray, which is where the register sheet
     opens too. Each is one reading down its own height, in the four steps the
     chapter names, and it scrolls inside itself without handing the scroll to
     the page, because the page's scroll is the chronology. */
  html.mhc-phone #stage:not(.is-focused) :is(.inspector,.edge-review){
    inset:auto 8px var(--cm-dock) 8px;
    height:var(--cm-sheet);
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-snap-type:none;
    padding:0 0 10px;
    border:0;
    border-radius:28px;
    background:linear-gradient(145deg,rgba(var(--mhc-ground-rgb),.96),rgba(var(--mhc-ground-rgb),.88));
    color:var(--mhc-ink);
    box-shadow:0 30px 80px rgba(var(--mhc-shadow-rgb),.3),0 5px 18px rgba(var(--mhc-shadow-rgb),.1),inset 0 0 0 1px var(--elastic-glass-edge-soft,rgba(var(--mhc-on-plate-rgb),.14)),inset 0 1px 0 var(--elastic-glass-highlight,rgba(var(--mhc-on-plate-rgb),.08));
    backdrop-filter:blur(30px) saturate(142%);
    -webkit-backdrop-filter:blur(30px) saturate(142%);
    z-index:20;
  }
  /* The close control keeps its corner while the sheet scrolls under it. */
  html.mhc-phone #stage:not(.is-focused) :is(.inspector-close,.edge-review-close){
    position:sticky;
    top:10px;
    z-index:4;
    width:44px;
    height:44px;
    margin:10px 10px -54px auto;
    right:auto;
  }
  html.mhc-phone #stage:not(.is-focused) .inspector-section{
    flex:none;
    width:auto;
    min-height:0;
    padding:16px 20px 18px;
    overflow:visible;
    border-inline-end:0;
    border-bottom:1px solid var(--mhc-hairline-paper-soft);
  }
  html.mhc-phone #stage:not(.is-focused) .inspector-section:last-child{border-bottom:0}
  html.mhc-phone #stage:not(.is-focused) .inspector-identity{padding-top:18px;padding-right:64px}
  html.mhc-phone #stage:not(.is-focused) .inspector h3{max-width:none;font-size:26px;line-height:1.04}
  html.mhc-phone #stage:not(.is-focused) .inspector-code{margin-top:14px}
  html.mhc-phone #stage:not(.is-focused) .inspector-meta dd{font-size:14px;line-height:1.4}
  html.mhc-phone #stage:not(.is-focused) .inspector-intro{
    display:block;
    max-width:62ch;
    font-size:15px;
    line-height:1.55;
    -webkit-line-clamp:unset;
  }
  html.mhc-phone #stage:not(.is-focused) .inspector-source{margin-top:14px}
  html.mhc-phone #stage:not(.is-focused) .inspector-evidence{padding-right:20px}
  html.mhc-phone #stage:not(.is-focused) .inspector-evidence-head{padding-right:0}
  html.mhc-phone #stage:not(.is-focused) .inspector-evidence-scroll{display:block;height:auto;overflow:visible;border-top:0}
  html.mhc-phone #stage:not(.is-focused) .relation{padding:14px 0 12px 14px;border-inline-end:0;border-top-width:2px}
  html.mhc-phone #stage:not(.is-focused) .relation+.relation{margin-top:6px}
  html.mhc-phone #stage:not(.is-focused) .relation p{display:block;-webkit-line-clamp:unset;font-size:14px}
  html.mhc-phone #stage:not(.is-focused) .relation a{min-height:44px}

  html.mhc-phone #stage:not(.is-focused) .edge-review{padding:0 0 12px}
  html.mhc-phone #stage:not(.is-focused) .edge-review-section{padding:0 20px}
  html.mhc-phone #stage:not(.is-focused) .edge-review-identity{padding:18px 64px 16px 20px}
  html.mhc-phone #stage:not(.is-focused) .edge-review-route{padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--mhc-hairline-paper-soft)}
  html.mhc-phone #stage:not(.is-focused) .edge-review-evidence{padding-top:16px}
  html.mhc-phone #stage:not(.is-focused) .edge-review-evidence p{font-size:15px;line-height:1.55}
  html.mhc-phone #stage:not(.is-focused) .edge-review-source-section{padding-top:8px;padding-bottom:4px}

  /* ---- Position ---------------------------------------------------------
     Position is a matrix of five standings by five bases, and its axis names
     were drawn for a stage a thousand pixels wide: the basis names end at the
     grid's left edge and ran off the screen, and the five standings, set in
     full along the foot, ran into one another. The stage copy stands down in
     this lens, so the matrix takes the head's height and keeps a gutter at
     its left for the basis names, which the phone draws in two lines, and the
     standings take the brief form the chapter already authors for the same
     axis in its own narrow panel below. Both sets of names are drawn inside
     the field, so they pan and zoom with the grid they label; the drawn names
     they replace are withdrawn only while this lens is on a phone. */
  html.mhc-phone #stage[data-lens="position"]:not(.is-focused){
    --field-top:calc(var(--cm-head-top) + var(--cm-zoom-h) + 6px + var(--cm-status-h) + 8px);
  }
  html.mhc-phone #stage[data-lens="position"]:not(.is-focused) .stage-status{top:calc(var(--cm-head-top) + var(--cm-zoom-h) + 6px)}
  html.mhc-phone #stage[data-lens="position"] .network-world{left:26px;right:4px}
  html.mhc-phone #stage[data-lens="position"] .position-grid text{display:none}
  .cm-phone-axis{
    display:block;
    position:absolute;
    z-index:3;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
  }
  html.mhc-phone #stage[data-lens="position"] .cm-phone-axis{opacity:1}
  .cm-phone-axis span{
    position:absolute;
    color:var(--mhc-on-plate-3);
    font:500 calc(11px * var(--annotation-zoom-counter,1))/1.15 var(--mono);
    letter-spacing:.02em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .cm-phone-axis .is-row{
    right:calc(88.5% + 6px);
    width:62px;
    text-align:right;
    white-space:normal;
    transform:translateY(-50%);
  }
  .cm-phone-axis .is-column{top:6.5%;transform:translateX(-50%)}
  /* Forty-one names cannot all stand in a matrix this narrow, so the lens
     names the claims-makers the relationships lens names at this width, and
     the rest as soon as the reader zooms in or selects one. The chapter
     states the position lens's names with !important, because it keeps every
     name up there even where two collide, so this rule has to as well. */
  html.mhc-phone #stage[data-lens="position"]:not(.is-detailed) .node:not([data-major="true"]):not(.is-selected):not(:focus-visible) .node-label{opacity:0!important;pointer-events:none}
  /* The authored sides send a name away from its neighbors in a cell a
     hundred and eighty pixels wide; in a column of seventy they send the two
     outer columns' names off the screen and cross the middle names over one
     another. On a phone every name stands to the right of its mark and wraps
     inside the width its column leaves before the screen's edge, which the
     two short names in the last column fit whole, and the chapter's own
     placement then nudges each one clear of the rest. */
  html.mhc-phone #stage[data-lens="position"] .node .node-label{left:calc(50% + var(--position-label-gap,20px));right:auto;max-width:104px;text-align:left;white-space:normal}
  html.mhc-phone #stage[data-lens="position"] .node[data-position-cell^="3-"] .node-label{max-width:88px}
  html.mhc-phone #stage[data-lens="position"] .node[data-position-cell^="4-"] .node-label{max-width:40px}

  /* ---- Ownership ---------------------------------------------------------
     The ownership map opens over the stage and keeps the tray's lens row,
     which is how a reader leaves it, so the map ends above the tray and the
     tray's glass stands over the map rather than under it. */
  html.mhc-phone #stage.is-movement .cm-phone-tray{z-index:14}
  html.mhc-phone #stage:not(.is-focused) .ownership-movement{
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px;
    padding:var(--cm-head-top) 10px calc(var(--cm-dock) + var(--cm-row) + var(--cm-tray-pad) * 2 + 10px);
  }
  html.mhc-phone #stage .movement-head{grid-template-columns:minmax(0,1fr);gap:8px}
  html.mhc-phone #stage .movement-head h3{max-width:none;font-size:25px;line-height:1}
  html.mhc-phone #stage .movement-head p{font-size:13px;line-height:1.45}
  html.mhc-phone #stage .movement-head p strong{font-size:11px}
  /* On a short screen the map needs the three lines of instruction more than
     the reader does, so the head keeps only its count. */
  @media (max-height:779px){
    html.mhc-phone #stage .movement-head p{font-size:0;line-height:0}
    html.mhc-phone #stage .movement-head p strong{margin:0;line-height:1.3}
  }
  html.mhc-phone #stage .movement-controls button,
  html.mhc-phone #stage .movement-connector-key{font-size:11px}
  html.mhc-phone #stage .movement-lane-head b{font-size:11px}
  html.mhc-phone #stage .movement-lane-head span{font-size:11px}
  html.mhc-phone #stage .movement-event strong{font-size:12px}
  html.mhc-phone #stage .movement-event small,
  html.mhc-phone #stage .movement-event-meta{font-size:11px!important}
  /* The lanes are the wide stage here, and a thumb crosses them one lane to a
     flick: each lane heading is a snap point, set just clear of the era names
     that now hold the left edge. */
  html.mhc-phone #stage .movement-scroll{scroll-snap-type:x proximity}
  html.mhc-phone #stage .movement-lane-head{scroll-snap-align:start;scroll-margin-left:94px}
  /* Crossing the lanes used to carry the time axis off the left edge, so a
     reader three lanes over could no longer tell which era a move belonged
     to. The era names now keep to the left edge as the lanes pass under them,
     on a plate of the map's own ground; the bands that carry them are lifted
     above the moves for that and no longer take presses, which reach the
     moves beneath them as before. */
  html.mhc-phone #stage .movement-band{z-index:5;pointer-events:none}
  html.mhc-phone #stage .movement-band-label,
  html.mhc-phone #stage .movement-band-note{
    position:sticky;
    left:0;
    display:block;
    width:max-content;
    max-width:86px;
    padding:3px 8px 3px 0;
    background:rgba(var(--mhc-float-rgb),.97);
    box-shadow:6px 0 10px rgba(var(--mhc-float-rgb),.6);
  }
  /* The heading row keeps the same corner, so the lane passing under the era
     names does not show its tail above them either. */
  html.mhc-phone #stage .movement-heads::before{
    content:"";
    position:sticky;
    z-index:1;
    left:0;
    display:block;
    width:86px;
    height:100%;
    background:rgba(var(--mhc-float-rgb),.97);
  }
  html.mhc-phone #stage .movement-band-label{margin-top:8px;padding-top:2px;font-size:11px}
  html.mhc-phone #stage .movement-band-note{padding-bottom:6px;font-size:11px}

  /* The move's evidence opens as the constellation's sheets do. */
  html.mhc-phone #stage:not(.is-focused) .movement-inspector{
    left:8px;
    right:8px;
    bottom:var(--cm-dock);
    height:var(--cm-sheet);
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-snap-type:none;
    border:0;
    border-radius:28px;
    background:linear-gradient(145deg,rgba(var(--mhc-ground-rgb),.96),rgba(var(--mhc-ground-rgb),.88));
    color:var(--mhc-ink);
    box-shadow:0 30px 80px rgba(var(--mhc-shadow-rgb),.3),0 5px 18px rgba(var(--mhc-shadow-rgb),.1),inset 0 0 0 1px var(--elastic-glass-edge-soft,rgba(var(--mhc-on-plate-rgb),.14)),inset 0 1px 0 var(--elastic-glass-highlight,rgba(var(--mhc-on-plate-rgb),.08));
    backdrop-filter:blur(30px) saturate(142%);
    -webkit-backdrop-filter:blur(30px) saturate(142%);
    transform:translateY(calc(100% + var(--cm-dock) + 12px));
    transition:transform .52s var(--elastic-ease,var(--ease));
  }
  html.mhc-phone #stage:not(.is-focused) .ownership-movement.has-selection .movement-inspector{transform:none}
  html.mhc-phone #stage:not(.is-focused) .ownership-movement.has-selection .movement-scroll{margin-bottom:0}
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-close{
    position:sticky;
    top:10px;
    z-index:4;
    margin:10px 10px -54px auto;
    right:auto;
    border-radius:50%;
  }
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-section{
    flex:none;
    width:auto;
    padding:16px 20px;
    overflow:visible;
    border-inline-end:0;
    border-bottom:1px solid var(--mhc-hairline-paper-soft);
  }
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-section:last-child{border-bottom:0}
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-identity{padding-top:18px;padding-right:64px}
  html.mhc-phone #stage:not(.is-focused) .movement-inspector h4{font-size:26px;line-height:1}
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-section>span,
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-facts dt{font-size:11px}
  html.mhc-phone #stage:not(.is-focused) .movement-inspector-action a{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:11px}
  /* The sheet covers the tray while it is open, as the claims-maker's does. */
  html.mhc-phone #stage.has-movement-inspector:not(.is-focused) :is(.cm-phone-tray,.lens-bar){opacity:0;visibility:hidden}

  /* Each phone reading carries its own fixed snapshot after the prose.
     No panel covers the next statement or changes while it is being read. */
  #claims-readings .claims-holds-grid>.claims-field-panel{display:none}
  #claims-readings .claims-reading>.claims-field-panel{
    display:grid;
    position:static;
    order:0;
    margin-top:8px;
    gap:12px;
    padding:16px;
    border-radius:22px;
  }
  #claims-readings .is-field-bound .claims-reading{opacity:1;min-height:0;padding-block:32px}
  #claims-readings .claims-field-head-full{display:none}
  #claims-readings .claims-field-head-brief{display:inline}
  #claims-readings .claims-field{grid-template-columns:62px repeat(5,minmax(0,1fr))}
  #claims-readings .claims-field-head b{font-size:11px;letter-spacing:0}
  #claims-readings .claims-field-basis{font-size:11px;line-height:1.1;letter-spacing:0}
  /* The directory's controls reach the finger's floor. */
  #profiles .list-role-filter,
  #profiles .list-disclosure-tools button{min-height:44px}
  /* The chapter sets its notation at a literal ten pixels throughout the
     directory and the institutions, outside the ramp the phone raises, and the
     20 September audit left those runs for a pass of this kind. Every one of
     them comes up to the phone's floor here, and nothing else about it
     changes. */
  html.mhc-phone #stage .zoom-controls output,
  :root[data-scrollbar-chapter="claims-makers"] .mhc-section-head .mhc-section-aside,
  #institutions :is(.institution-sense-key dt,.institution-filter-controls button,.institution-toolbar output,.institution-identity small,.institution-sense,.institution-year,.institution-index,.institution-reading h4,.institution-update h4,.institution-finding b),
  #profiles :is(.return-lens,.list-role-filter,.list-disclosure-tools button,.list-disclosure-tools span,.list-count,.profile-role-block b,.profile-index,.profile-track-label span,.profile-meta dt,.profile-evidence-link span,.profile-relation span,.profile-relation small){font-size:11px}

  /* The reading note the phone layer shows once a session stands where the
     tray docks, so it stands aside while the stage holds the screen. */
  html:has(#stage[data-phone-onscreen]) .mhc-phone-brief-note{opacity:0;visibility:hidden;pointer-events:none}

  /* ---- receding with the rail ------------------------------------------ */
  /* The tray hangs from the foot rail, so it goes down with the rail and comes
     back with it, as the return capsule does; an open sheet goes with them,
     since it is hung from the same line. The field does not move. */
  html.mhc-phone-receded.mhc-phone #stage:not(.is-focused) :is(.cm-phone-tray,.series-toolbar,.lens-bar,.cm-phone-key-toggle){
    transform:translateY(var(--cm-sink));
  }
  html.mhc-phone-receded.mhc-phone #stage:not(.is-focused)[data-phone-key="open"] :is(.cm-phone-key,.legend){
    transform:translateY(var(--cm-sink));
  }
  html.mhc-phone-receded.mhc-phone #stage:not(.is-focused) :is(.inspector.is-open,.edge-review.is-open),
  html.mhc-phone-receded.mhc-phone #stage:not(.is-focused) .ownership-movement.has-selection .movement-inspector{
    transform:translateY(var(--cm-sink));
  }
  html.mhc-phone #stage:not(.is-focused) :is(.inspector,.edge-review){
    transition:opacity .28s ease,filter .42s var(--ease),transform .52s var(--elastic-ease,var(--ease));
  }
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .cm-phone-tray,.cm-phone-key,.cm-phone-key-toggle,
    html.mhc-phone #stage:not(.is-focused) :is(.series-toolbar,.lens-bar,.legend,.inspector,.edge-review,.stage-status),
    html.mhc-phone #stage:not(.is-focused) .era-index button::before{transition-duration:.01ms!important}
  }
}

/* ---- 44-money.css ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   04 · Money, seated for the hand
   ---------------------------------------------------------------------------
   Money was rebuilt as one continuous passage and already narrows well: its
   figures sit under their prose, its drawers rise as sheets, and its own
   controller reveals every frame once. What a phone lost were the chapter's
   compositions, which below 900px fall to lists, and the few controls that
   were sized for a pointer. Each is given back here, and nothing in this
   sheet touches the reveal controller, which keeps the whole of the arrival.

   To begin with, the five questions. The desktop hangs the five stages on one
   thread that rises and falls between them, and the narrow chapter drops the
   thread and keeps a list. Here the same thread runs down the page instead,
   turned a quarter so that it leaves each stage on alternate sides of a
   narrow band, with the numbered rings on it and every question read from one
   edge beside them.

   In addition, the atlas. On the desktop the register stands beside the
   reading, so a reader choosing a record sees its reading change beside the
   finger. Stacked, the reading changed half a screen below the list that
   chose it. The register therefore becomes a strip of record cards across the
   top of the reading, in year order, that stays pinned under the masthead
   while its reading scrolls beneath it, so that choosing and reading happen
   in one view as they do on the desktop.

   Finally, the controls sized for a pointer. The share-of-spending chart is
   drawn in a 960-unit box and its labels arrived at four pixels, so the
   script reports the box's scale and its labels and lines are restated at
   their size on the glass; the revenue columns answer a finger drawn across
   them as they answer a pointer; and every small target keeps its drawn size
   while answering the 44px a finger needs.
   ------------------------------------------------------------------------- */

/* Elements this partial builds, which must not survive a resize into the
   desktop. */
.mhc-phone-gloss,.mhc-phone-rev-preview{display:none}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  body[data-chapter="money"]{--r-gutter:var(--mhc-phone-gutter)}

  /* ---- the cover ---------------------------------------------------------- */
  .woven-chapter-hero[data-woven-chapter="money"]>.woven-motion-toggle{bottom:calc(var(--mhc-phone-foot) + 12px);right:10px}
  [data-chapter-hero="money"]{--chapter-number-size:11px}

  /* ---- the five questions, on one thread running down ---------------------
     The composition waits for the script to have measured the list, which it
     marks on the flow, so a page whose script never ran keeps the numbered
     list the chapter ships below 900px. */
  body[data-chapter="money"] .stage-flow[data-phone-thread]{--phone-thread-band:76px;position:relative}
  body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-nodes{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:0}
  body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-node{
    position:relative;
    grid-template-columns:var(--phone-thread-band) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:4px 14px;
    padding:18px 0;
    border-top:0;
  }
  body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-dot{
    position:absolute;
    z-index:1;
    top:50%;
    left:calc(var(--phone-thread-band) * .25);
    translate:-50% -50%;
  }
  body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-node[data-lift="high"] .stage-dot{left:calc(var(--phone-thread-band) * .75)}
  body[data-chapter="money"] .stage-flow[data-phone-thread] :is(.stage-name,.stage-ask,.stage-eg){grid-column:2}
  /* The thread is the chapter's own drawing, turned a quarter about its
     corner and laid down the band at the length of the list. */
  body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-thread{
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:var(--phone-thread-length,0px);
    max-width:none;
    height:var(--phone-thread-band);
    transform-origin:0 0;
    transform:translateX(var(--phone-thread-band)) rotate(90deg);
  }
  /* The drawn line is shorter than the desktop's, so the dash that draws it
     in is shortened with it and the line arrives across the whole of the
     reveal rather than in its last third. */
  @media (prefers-reduced-motion:no-preference){
    .has-js body[data-chapter="money"] .stage-flow[data-phone-thread] .stage-thread path{stroke-dasharray:1000;stroke-dashoffset:1000}
  }

  /* ---- the share of health spending -------------------------------------
     --phone-chart-k is the number of drawing units to one pixel on the glass,
     so every size below is the chapter's own size in pixels, restated. The
     axis labels hang to the left of the plot, so the figure gives them room
     inside the column instead of letting them run into the gutter. */
  body[data-chapter="money"] #scope .frame-fig>.chart{margin-left:22px;width:calc(100% - 22px)}
  body[data-chapter="money"] .chart text{font-size:calc(11px * var(--phone-chart-k,1))}
  body[data-chapter="money"] .chart .series-line{stroke-width:calc(2px * var(--phone-chart-k,1))}
  body[data-chapter="money"] .chart :is(.axis-rule,.break-line){stroke-width:calc(1px * var(--phone-chart-k,1))}
  body[data-chapter="money"] .chart .break-line{stroke-dasharray:calc(2px * var(--phone-chart-k,1)) calc(4px * var(--phone-chart-k,1))}
  body[data-chapter="money"] .chart .series-dot{r:calc(2.4px * var(--phone-chart-k,1));stroke-width:calc(1.2px * var(--phone-chart-k,1))}

  /* ---- the sources of growth ---------------------------------------------
     The reading a row gives lies under all six rows. Once a row has been
     chosen it stands at the foot of the screen while the rows are in view,
     so the answer to a tap is never below the fold. */
  body[data-chapter="money"] #growth .growth:has(.growth-row[aria-pressed="true"])+#growth-read{
    position:sticky;
    z-index:3;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    margin:10px -8px 0;
    padding:12px 14px 13px;
    border-radius:18px;
    background:var(--elastic-glass-surface);
    box-shadow:var(--elastic-glass-shadow),inset 0 0 0 1px var(--elastic-glass-edge);
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    backdrop-filter:blur(24px) saturate(138%);
    color:var(--elastic-light,var(--mhc-ink));
    transition:translate .52s var(--elastic-ease);
  }
  html.mhc-phone-receded body[data-chapter="money"] #growth .growth:has(.growth-row[aria-pressed="true"])+#growth-read{
    translate:0 calc(var(--mhc-phone-bar) + var(--mhc-phone-bar-gap) - 10px);
  }

  /* ---- the atlas: a strip of records over its reading ---------------------
     Only a page whose script has folded the atlas to one series at a time
     takes the strip; without script the chapter lists every series and every
     reading, and that list is left as it ships. */
  .has-js body[data-chapter="money"] .atlas{display:flex;flex-direction:column;gap:14px}
  .has-js body[data-chapter="money"] .atlas-series{order:1}
  .has-js body[data-chapter="money"] .atlas-primer{order:2;align-self:stretch}
  .has-js body[data-chapter="money"] .atlas-register{order:3}
  .has-js body[data-chapter="money"] .atlas-readings{order:4}
  .has-js body[data-chapter="money"] .atlas-key{order:2}
  /* The four series read along one line that scrolls, rather than wrapping
     into three rows above the strip. */
  .has-js body[data-chapter="money"] .atlas-series{
    flex-wrap:nowrap;
    gap:6px;
    margin-inline:calc(-1 * var(--r-gutter));
    padding:2px var(--r-gutter);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--r-gutter);
    scrollbar-width:none;
  }
  .has-js body[data-chapter="money"] .atlas-series::-webkit-scrollbar{display:none}
  .has-js body[data-chapter="money"] .atlas-series button{flex:0 0 auto;min-height:44px;scroll-snap-align:start;white-space:nowrap}
  .has-js body[data-chapter="money"] .atlas-register{
    position:sticky;
    z-index:4;
    top:calc(var(--archive-masthead-band,37px) + env(safe-area-inset-top,0px));
    display:block;
    align-self:stretch;
    min-width:0;
    max-height:none;
    margin-inline:calc(-1 * var(--r-gutter));
    padding:10px var(--r-gutter) 12px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--r-gutter);
    scrollbar-width:none;
    border-top:0;
    background:var(--mhc-field-float,rgba(var(--mhc-ground-rgb),.9));
    box-shadow:inset 0 -1px 0 var(--r-line-soft),inset 0 1px 0 var(--r-line-soft);
    -webkit-backdrop-filter:var(--mhc-field-float-blur,blur(22px));
    backdrop-filter:var(--mhc-field-float-blur,blur(22px));
    transition:top .44s var(--elastic-ease);
  }
  /* The masthead lifts away during a reading run, and the strip rises into
     the room it leaves rather than hanging under an empty band. */
  html.mhc-phone-receded.has-js body[data-chapter="money"] .atlas-register{top:env(safe-area-inset-top,0px)}
  .has-js body[data-chapter="money"] .atlas-register::-webkit-scrollbar{display:none}
  .has-js body[data-chapter="money"] .atlas-head{display:none}
  .has-js body[data-chapter="money"] .atlas-rows{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(144px,40%);
    gap:8px;
    width:max-content;
    min-width:100%;
  }
  .has-js body[data-chapter="money"] .atlas-row{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;
    align-items:start;
    gap:6px;
    height:100%;
    min-height:118px;
    padding:12px 14px 13px;
    border-bottom:0;
    border-radius:18px;
    scroll-snap-align:start;
    box-shadow:inset 0 0 0 1px var(--r-line-soft);
  }
  .has-js body[data-chapter="money"] .atlas-row::before{inset:0;border-radius:18px}
  .has-js body[data-chapter="money"] .atlas-row:is(:hover,:focus-visible,[aria-current="true"])::before{inset:0}
  .has-js body[data-chapter="money"] .atlas-row[aria-current="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-money-ink) 70%,transparent)}
  .has-js body[data-chapter="money"] .atlas-row time{grid-row:1}
  .has-js body[data-chapter="money"] .atlas-row-title{grid-row:2;font-size:15px;line-height:1.28}
  .has-js body[data-chapter="money"] .atlas-row-kind{display:block;grid-column:1;grid-row:3}
  .has-js body[data-chapter="money"] .atlas-row-kind:empty{display:none}
  .has-js body[data-chapter="money"] .atlas-row .stages{grid-column:1;grid-row:4;align-self:end;width:100%}
  /* A card does not travel under the finger the way a row travels under a
     pointer: the title stays where it was drawn. */
  .has-js body[data-chapter="money"] .atlas-row:is(:hover,:focus-visible) :is(.atlas-row-title,.atlas-row-kind){transform:none}
  .has-js body[data-chapter="money"] .atlas-readings{scroll-margin-top:calc(var(--archive-masthead-band,37px) + 150px)}

  /* A phone turned on its side has too little height to spend on a pinned
     strip, so there the strip scrolls with the page above its reading; the
     same holds for the growth reading pinned at the foot. */
  @media (max-height:500px){
    .has-js body[data-chapter="money"] .atlas-register{position:relative;top:auto}
    body[data-chapter="money"] #growth .growth:has(.growth-row[aria-pressed="true"])+#growth-read{position:static;translate:none}
  }

  /* ---- the gloss, kept inside its line -----------------------------------
     A gloss is a button, and a button is laid out as one block, so a term of
     several words either jumped whole to the next line or broke into a block
     that left its comma stranded on a line of its own. The script sets an
     inline twin in the line that presses the button, and the button itself
     stands aside, but only where its twin exists, so that a page whose
     script never ran keeps every term it was written with. Its padding reaches
     the 44px a finger needs without opening the leading, because the padding
     of an inline box does not move the lines around it. */
  body[data-chapter="money"] .mhc-phone-gloss+.gloss{display:none}
  body[data-chapter="money"] .mhc-phone-gloss{
    display:inline;
    position:relative;
    padding:12px 1px;
    margin:0 -1px;
    color:inherit;
    cursor:pointer;
    background-image:repeating-linear-gradient(90deg,var(--r-money-ink) 0 2px,transparent 2px 4px);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:0 1.12em;
    background-origin:content-box;
    -webkit-box-decoration-break:slice;
    box-decoration-break:slice;
    -webkit-tap-highlight-color:transparent;
    transition:background-size .3s var(--r-ease),color .3s var(--r-ease);
  }
  body[data-chapter="money"] .mhc-phone-gloss[aria-expanded="true"]{
    color:var(--r-money-type);
    background-image:linear-gradient(var(--r-money-ink),var(--r-money-ink));
    background-size:100% 2px;
  }
  body[data-chapter="money"] .mhc-phone-gloss:focus-visible{outline:2px solid var(--r-money-ink);outline-offset:-6px;border-radius:4px}

  /* ---- the small targets --------------------------------------------------
     The chips keep the 32px the archive draws them at, and answer a band of
     44px; the detail and close controls simply take the finger's size. */
  body[data-chapter="money"] .mhc-link.mhc-link-sm,
  body[data-chapter="money"] :is(.context-timeline a,.context-source).mhc-link{position:relative}
  body[data-chapter="money"] .mhc-link.mhc-link-sm::before,
  body[data-chapter="money"] :is(.context-timeline a,.context-source).mhc-link::before{
    content:"";
    position:absolute;
    inset:-7px 0;
  }
  .has-js body[data-chapter="money"] .money-detail-toggle{min-height:44px}
  .has-js body[data-chapter="money"] .drawer-close{min-height:44px;padding-inline:20px}
  .has-js body[data-chapter="money"] .drawer-sheet{
    max-height:calc(100svh - env(safe-area-inset-top,0px) - 28px);
    padding-bottom:calc(34px + env(safe-area-inset-bottom,0px));
  }

  /* ---- the tables inside the drawers --------------------------------------
     The drawer tables are wider than the sheet and already scroll sideways
     in a labeled region. The year stays pinned at the leading edge on the
     sheet's own ground, the columns snap, and the trailing edge fades while
     more of the table lies beyond it, as the Measurement ledger does. */
  .has-js body[data-chapter="money"] .drawer .r-scroll{
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--phone-year-col,64px);
  }
  .has-js body[data-chapter="money"] .drawer .r-table :is(th,td){scroll-snap-align:start}
  .has-js body[data-chapter="money"] .drawer .r-table tr>:first-child{
    position:sticky;
    left:0;
    z-index:1;
    background:var(--mhc-ground);
    box-shadow:inset -1px 0 0 var(--r-line-soft);
  }
  .has-js body[data-chapter="money"] .drawer .r-scroll:is([data-phone-scroll="start"],[data-phone-scroll="middle"]){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.18));
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.18));
  }

  /* ---- the publication revenue -------------------------------------------
     Fourteen columns share the column's width, which leaves each about
     twenty pixels, so a finger is allowed to draw across them and the column
     under it is read as a pointer resting on it would be. The value rises
     above the column, where a thumb pressing the chart cannot cover it. */
  body[data-chapter="money"] .revenue{height:190px;touch-action:pan-y}
  body[data-chapter="money"] #publication-revenue .frame-fig{position:relative}
  body[data-chapter="money"] .mhc-phone-rev-preview{
    display:flex;
    position:absolute;
    z-index:3;
    left:var(--phone-rev-x,50%);
    top:var(--phone-rev-y,0px);
    align-items:baseline;
    gap:8px;
    width:max-content;
    padding:8px 14px 9px;
    border-radius:999px;
    background:var(--elastic-glass-surface,var(--mhc-field-float));
    box-shadow:var(--elastic-glass-shadow,none),inset 0 0 0 1px var(--elastic-glass-edge,var(--r-line));
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    backdrop-filter:blur(24px) saturate(138%);
    color:var(--elastic-light,var(--mhc-ink));
    opacity:0;
    transform:translate(-50%,calc(-100% - 6px)) scale(.96);
    pointer-events:none;
    transition:opacity .16s ease,transform .32s var(--r-ease);
  }
  body[data-chapter="money"] .mhc-phone-rev-preview.is-on{opacity:1;transform:translate(-50%,calc(-100% - 12px))}
  body[data-chapter="money"] .mhc-phone-rev-preview small{color:var(--r-money-type);font:400 12px/1 var(--r-mono);letter-spacing:.06em}
  body[data-chapter="money"] .mhc-phone-rev-preview b{font:400 17px/1.1 var(--r-sans);font-variant-numeric:tabular-nums}
}

/* Stillness takes the four motions this sheet adds and leaves the chapter's
   own reduced-motion contract, which already settles every reveal, alone. */
@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    .has-js body[data-chapter="money"] .atlas-register,
    body[data-chapter="money"] .mhc-phone-rev-preview,
    body[data-chapter="money"] .mhc-phone-gloss,
    body[data-chapter="money"] #growth .growth:has(.growth-row[aria-pressed="true"])+#growth-read{transition:none}
  }
}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  body[data-chapter="money"] .ledger-toolbar { flex-direction:column; align-items:stretch; gap:18px; }
  body[data-chapter="money"] .ledger-controls { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
  body[data-chapter="money"] .ledger-controls :is(select,.ledger-select-trigger) { width:100%; max-width:100%; font-size:var(--r-body); padding-inline:16px 38px; }
  body[data-chapter="money"] .ledger-key { gap:12px 18px; }
  body[data-chapter="money"] .ledger-key > span:last-child { margin-left:0; width:100%; }
  body[data-chapter="money"] .year-ledger { grid-template-columns:minmax(0,1fr); gap:28px; }
  body[data-chapter="money"] .ledger-columns,body[data-chapter="money"] .ledger-row { grid-template-columns:98px minmax(0,1fr) 78px; gap:6px; }
  body[data-chapter="money"] .ledger-axis span:nth-child(2),body[data-chapter="money"] .ledger-axis span:nth-child(4),body[data-chapter="money"] .ledger-range-heading { display:none; }
  body[data-chapter="money"] .ledger-row { grid-template-rows:37px 23px; min-height:66px; }
  body[data-chapter="money"] .ledger-country { grid-column:1; grid-row:1 / span 2; }
  body[data-chapter="money"] .ledger-range { grid-column:2; grid-row:1 / span 2; }
  body[data-chapter="money"] .ledger-row-value { align-self:start; padding-top:12px; }
  body[data-chapter="money"] .ledger-row-range { grid-column:3; margin-top:-16px; align-self:end; padding-bottom:5px; }
  body[data-chapter="money"] .ledger-detail { border-left:0; border-top:1px solid var(--r-line); padding:24px 0 0; }
  body[data-chapter="money"] .ledger-detail-jump { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; }
  body[data-chapter="money"] .ledger-return { display:inline-flex; align-items:center; min-height:44px; margin-bottom:8px; }
  body[data-chapter="money"] .ledger-limits { grid-template-columns:minmax(0,1fr); gap:20px; }
  body[data-chapter="money"] .share-small-grid { grid-template-columns:minmax(0,1fr); }

  /* ---- the Community Care year strip --------------------------------------
     The strip stands on the reading, so it takes the header capsule's glass
     rather than letting the event's prose and tabs print through its years,
     and it rises to the top edge with the header when the header recedes. */
  body[data-chapter="money"] .series-companion{
    padding:4px;
    border-radius:20px;
    background:var(--elastic-capsule-surface);
    box-shadow:var(--elastic-capsule-shadow);
    -webkit-backdrop-filter:var(--elastic-capsule-blur);
    backdrop-filter:var(--elastic-capsule-blur);
  }
  html.mhc-phone-receded body[data-chapter="money"]{--case-top:calc(8px + env(safe-area-inset-top,0px))}
  body[data-chapter="money"] .series-index{--view-padding-x:4px}
  body[data-chapter="money"] .series-index>:is(a,button){flex:1 0 auto;width:auto;min-width:44px}

  /* ---- the growth readings ------------------------------------------------ */
  body[data-chapter="money"] .growth-head span{flex:none;white-space:nowrap}

  /* ---- the Senate inquiry --------------------------------------------------
     Four rows of four cells, two of them sentences, will not fit a phone as
     columns, and a pinned first column of organization names would leave the
     reading a sliver. Each row becomes one ruled entry instead: the
     organization and its period on one line, then what was reported and its
     source. The table's roles are written into the markup, so the restack
     keeps its semantics. */
  body[data-chapter="money"] #industry-funding .r-scroll{overflow:visible;mask-image:none;-webkit-mask-image:none}
  body[data-chapter="money"] #industry-funding .r-table{display:block;min-width:0;width:100%;table-layout:auto}
  body[data-chapter="money"] #industry-funding .r-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body[data-chapter="money"] #industry-funding .r-table tbody{display:block}
  body[data-chapter="money"] #industry-funding .r-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--r-line-soft)}
  body[data-chapter="money"] #industry-funding .r-table :is(th,td){display:block;width:auto!important;padding:0;border:0}
  body[data-chapter="money"] #industry-funding .r-table tbody th{grid-column:1}
  body[data-chapter="money"] #industry-funding .r-table tbody td:nth-child(2){grid-column:2;grid-row:1;align-self:baseline;white-space:nowrap}
  body[data-chapter="money"] #industry-funding .r-table tbody td:nth-child(n+3){grid-column:1 / -1}
  body[data-chapter="money"] #industry-funding .r-table tbody td:nth-child(4){font-size:var(--r-note)}

  /* ---- drawer captions -----------------------------------------------------
     A caption takes its table's width, so inside a sideways scroller its
     opening sentence ran past the sheet's edge. It stays on the sheet. */
  .has-js body[data-chapter="money"] .drawer .r-table caption{display:block;position:sticky;left:0;width:calc(100vw - 2 * var(--r-gutter));max-width:100%;box-sizing:border-box;text-align:left}
}

/* ---- 45-summary.css -------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   05 Summary, seated for the hand
   ---------------------------------------------------------------------------
   The Summary's narrow composition was drawn while the rail still stood down
   the left edge of a phone, so its sections kept an 88 pixel inset on that
   side for a column that now lies along the foot. The inset goes, and the
   shelf and the findings take the phone's gutter on both sides; the cover
   keeps its own placement, because there the copy is set clear of the
   strands the motif runs down the left edge, and that relation is the
   composition rather than a reservation.

   THE SHELF stays the column of native disclosures the desktop already uses
   below 1100 pixels. Each closed volume shows its numeral, its chapter and
   its title, so the five together are the overview a reader chooses from;
   one opens at a time, as the named group has it, and its two pages stand
   one above the other with the fold drawn as a rule between them.

   THE FINDINGS stay in flow. On the desktop the four readings are exchanged
   upward inside one pinned frame, which only works because each card fits the
   frame it is pinned in. On a phone each card is two to three screens long:
   a pinned frame would have to scroll inside itself, and a sideways deck
   would put three quarters of every card out of sight behind a gesture. So
   the cards run down the page as complete objects, and what the desktop's
   frame gave a reader, which is knowing which finding is in front of them
   and reaching any other in one move, is given by the index instead. The four
   ruled links remain fully named and never resize on selection. They sit on
   the left wherever the reading fits, and form two rows above the reading
   below 520px. The index follows the masthead as it recedes.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  #sec-summary{
    --sum-phone-top:calc(76px + env(safe-area-inset-top,0px));
  }

  /* ---- the cover -------------------------------------------------------
     Both of the cover's controls stood on its foot, which on a phone is the
     rail's place, so they are lifted clear of it and keep their own sides. */
  #sec-summary .hero-continue{bottom:calc(var(--mhc-phone-foot) + 8px)}
  #sec-summary .motion-toggle{bottom:calc(var(--mhc-phone-foot) + 10px);right:max(10px,env(safe-area-inset-right,0px))}

  /* ---- the sections take the phone's gutter ---------------------------- */
  #sec-summary .section-pad{
    width:auto;
    margin:0;
    padding:clamp(72px,10svh,96px) var(--mhc-phone-gutter);
    transform:none;
  }
  #sec-summary .mhc-section-statement{max-width:15ch}

  /* ---- the shelf -------------------------------------------------------- */
  #sec-summary .sum-volumes{gap:10px}
  /* The narrow shelf keeps a volume's title on its spine while the volume is
     open, and hides the copy of it on the page instead. The wide shelf's
     rule that takes the title off an open spine was written one class deeper
     than that intention, so on a phone the opened volume lost its title
     altogether; the intention is restated at the wide rule's weight. */
  #sec-summary .sum-volume[open] .sum-spine-title{display:block}
  #sec-summary .sum-spine{
    grid-template-columns:30px minmax(0,1fr) 30px;
    gap:10px 12px;
    min-height:76px;
    padding:18px 16px 18px 18px;
  }
  /* The whole spine is the control; its plus is enlarged to read as one. */
  #sec-summary .sum-spine i{width:30px;height:30px}
  #sec-summary .sum-spread{padding:22px 18px}
  #sec-summary .sum-page--edge{padding-top:22px}
  #sec-summary .sum-actions{margin-top:20px}
  #sec-summary .sum-actions .mhc-link{min-height:44px}

  /* The findings keep the left index down to 520px. Only very narrow
     readings put its four fully named, ruled links above the text. */
  #sec-summary .sum-proof-stage{position:relative}
  #sec-summary .sum-proof-index{top:var(--sum-phone-top)}
  #sec-summary .sum-proof-index>a{min-height:44px}
  html.mhc-phone-receded #sec-summary .sum-proof-index{top:calc(env(safe-area-inset-top,0px) + 8px)}

  /* Each card keeps its gradient and its corners, at the phone's measure. */
  #sec-summary .sum-proof-deck{gap:18px}
  #sec-summary .sum-proof-card{padding:24px 20px 20px}
  #sec-summary .sum-proof-limit>summary{min-height:48px}
  #sec-summary .sum-proof-source{padding-block:10px}

  /* ---- the conclusion -------------------------------------------------- */
  #sec-summary .closing{padding-inline:var(--mhc-phone-gutter)}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    html.sum-js #sec-summary .sum-proof-index,
    html.sum-js #sec-summary .sum-proof-index>a,
    html.sum-js #sec-summary .sum-proof-index b{transition:none}
  }
}

/* The selected Sweep on a phone: the five chapter markers sit above the
   reading, while the same two movements and twelve readings hold below.
   Long plates travel with the page; they never become nested scrollers. */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  html.sum-stage-phone #sec-summary[data-direction="final"]{
    --reading-inset:20px;--reading-gap:20px;--reading-column-gap:20px;
  }
  html.sum-stage-phone #sec-summary[data-direction="final"] .st-stage{
    height:100svh;height:var(--sum-phone-height,100svh);
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    gap:16px;padding:calc(78px + env(safe-area-inset-top,0px)) 16px calc(82px + env(safe-area-inset-bottom,0px));
  }
  html.sum-stage-phone #sec-summary .fx-index{align-self:start;width:100%}
  html.sum-stage-phone #sec-summary .fx-chapters{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  html.sum-stage-phone #sec-summary .fx-name{
    flex-direction:column;justify-content:flex-start;gap:7px;min-height:62px;
    padding:4px 0;font-size:11px;line-height:1.2;white-space:normal;text-align:center;
  }
  html.sum-stage-phone #sec-summary .fx-name span{max-width:none;overflow-wrap:normal}
  html.sum-stage-phone #sec-summary :is(.fx-notes,.fx-caption){display:none}
  html.sum-stage-phone #sec-summary .st-readings{gap:16px;min-width:0}
  html.sum-stage-phone #sec-summary .st-strip{gap:16px}
  html.sum-stage-phone #sec-summary .st-strip-segment{min-height:44px;padding-top:8px;gap:8px}
  html.sum-stage-phone #sec-summary .st-strip-label{font-size:12px;gap:6px}
  html.sum-stage-phone #sec-summary .st-deck{overflow:clip}
  html.sum-stage-phone #sec-summary .st-reading:not(.fx-hero){
    inset:0 0 auto;min-height:100%;height:auto;display:grid;visibility:hidden;
    align-content:center;translate:0 var(--sum-pan,0px);
    --t-body:16px;--t-title:27px;--t-finding:30px;--t-reading:21px;
  }
  html.sum-stage-phone #sec-summary .st-reading:not(.fx-hero)[data-state]{visibility:visible}
  html.sum-stage-phone #sec-summary .st-reading[data-state="enter"]{transform:translate3d(0,28px,0)}
  html.sum-stage-phone #sec-summary .st-reading[data-state="exit"]{transform:translate3d(0,-20px,0)}
  html.sum-stage-phone #sec-summary .st-reading>:is(.se-volume-plate,.se-finding-plate){max-height:none;overflow:visible}
  html.sum-stage-phone #sec-summary .se-head{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  html.sum-stage-phone #sec-summary .se-head .mhc-section-statement{max-width:19ch;font-size:34px;line-height:1.08}
  html.sum-stage-phone #sec-summary .se-head .mhc-section-support{font-size:16px;line-height:1.55;gap:16px}
  html.sum-stage-phone #sec-summary :is(.se-guide,.se-finding-meaning){padding-top:20px;gap:14px}
  html.sum-stage-phone #sec-summary .se-finding-evidence{display:block}
  html.sum-stage-phone #sec-summary .se-volume-plate{box-shadow:inset 0 0 0 1px var(--edge-soft)}
  html.sum-stage-phone #sec-summary .fx-hero .se-cover-copy{left:22%;top:24%;width:70%;padding:0}
  html.sum-stage-phone #sec-summary .fx-hero>.se-continue{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  html.sum-stage-phone #sec-summary .fx-motion-toggle{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  #sec-summary .fx-close h2{font-size:44px;line-height:1.02}
}

/* ---- 46-sources.css -------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   C Sources · the works-cited room seated for the hand
   ---------------------------------------------------------------------------
   Sources is a list of 294 works read through three controls that compose, a
   search, a category and the chapters that cite a work, and on a phone the
   list is twenty screens long. The desktop keeps the controls in the flow at
   the head of the list, which on a wide screen costs a reader one glance back
   up. On a phone it costs twenty screens of scrolling, so a reader part way
   down the Scholarship section who wants to see only Money's citations has
   nothing within reach but the top capsule, which leaves for the cover.

   So the header holds under the masthead on a phone, on the chapter's own
   plain ground with one hairline beneath it, and it leaves with the chrome.
   A downward reading run takes the masthead, the rail and the header away
   together, and any upward movement brings all three back, which is the one
   rule of receding the whole phone layer follows. The header therefore needs
   no scroll controller of its own, only the knowledge of whether it is held
   yet, which the script supplies. It never leaves while a reader is using
   it, which is to say while the search holds the caret or a keyboard stands
   on one of its controls.

   A header that holds has to earn the band it holds, so each field keeps to
   one line on a phone: its label at the start of the line and its chips in
   one row that scrolls sideways under a fade, which is how a set wider than
   the screen shows that it goes on. Every control keeps a 44px target.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){

  /* ---- the cover ---------------------------------------------------------
     The cover measures itself and seats the arrow in a band below the
     lockup, although the rule that seats the cover in the shell takes that
     band away again. The foot dock then lifts every cover's arrow by the
     rail's height, which is right for a cover that fills the screen and
     wrong for one that ends halfway down it, so on a phone the arrow landed
     on the title. The band is therefore given back without the lift, and the
     arrow stands at the lockup's leading edge, where the numbered chapters'
     arrows stand on a phone. */
  html body>.site-shell>.chapter-hero.sources-cover{padding-bottom:76px}
  :root[data-scrollbar-chapter="sources"] .sources-cover .sources-continue[data-hero-continue]{
    left:calc(var(--mhc-phone-gutter) + max(88px,13%) - 13px);
    bottom:14px;
    margin:0;
    transform:none;
  }

  /* ---- the identity ------------------------------------------------------
     Over its cover the rail's identity names the whole archive, which a
     capsule lying across half of a phone cuts off after three words; it
     names the chapter throughout instead, which is what the phone layer does
     for every chapter that builds a section register, and Sources builds
     none, so it is said here. */
  :root[data-scrollbar-chapter="sources"] .rail-index .rail-index-label--archive{opacity:0}
  :root[data-scrollbar-chapter="sources"] .rail-index .rail-index-label--chapter{opacity:1}

  /* ---- the header ------------------------------------------------------- */
  :root[data-scrollbar-chapter="sources"] .register-heading{
    position:sticky;
    z-index:30;
    top:calc(var(--archive-masthead-band,37px) + env(safe-area-inset-top,0px));
    margin:0 calc(-1 * var(--mhc-phone-gutter)) 18px;
    padding:10px var(--mhc-phone-gutter) 0;
    background:var(--paper);
    box-shadow:0 1px 0 transparent;
    transition:transform .44s var(--elastic-ease,var(--ease)),box-shadow .3s ease;
  }
  :root[data-scrollbar-chapter="sources"] .register-heading[data-phone-stuck]{box-shadow:0 1px 0 var(--line-soft)}
  /* What holds the header in place is a reader using it: the search while it
     has the caret, or any control a keyboard has reached. A chip pressed by a
     finger keeps the focus in some browsers without being in use, so it does
     not count, and the header leaves as soon as the reading goes on. A header
     that stays while the masthead has gone takes the masthead's place rather
     than leaving its band open over the list. */
  html.mhc-phone-receded:root[data-scrollbar-chapter="sources"] .register-heading[data-phone-stuck]{
    transform:translateY(calc(-100% - var(--archive-masthead-band,37px) - env(safe-area-inset-top,0px) - 2px));
  }
  html.mhc-phone-receded:root[data-scrollbar-chapter="sources"] .register-heading[data-phone-stuck]:has(input:focus,:focus-visible){
    transform:translateY(calc(-1 * var(--archive-masthead-band,37px)));
  }
  :root[data-scrollbar-chapter="sources"] .register-heading-lede{gap:6px;padding-bottom:6px}
  :root[data-scrollbar-chapter="sources"] .register-search{height:44px}

  /* Each field is one line: the label, then the controls, then whatever the
     field keeps at its right edge. */
  :root[data-scrollbar-chapter="sources"] .register-field{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:10px;
    padding-top:6px;
    padding-bottom:6px;
  }
  :root[data-scrollbar-chapter="sources"] .register-field-label{
    grid-column:1;
    padding:0;
    font-size:11px;
    letter-spacing:.1em;
  }
  :root[data-scrollbar-chapter="sources"] .register-filters,
  :root[data-scrollbar-chapter="sources"] .register-chapter-row{
    position:relative;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
  :root[data-scrollbar-chapter="sources"] :is(.register-filters,.register-chapter-row)::-webkit-scrollbar{display:none}
  /* The fade stands aside once the row has been scrolled to its end, so the
     last chip is never drawn half gone; the script marks that moment. */
  :root[data-scrollbar-chapter="sources"] :is(.register-filters,.register-chapter-row)[data-phone-at-end]{-webkit-mask-image:none;mask-image:none}
  :root[data-scrollbar-chapter="sources"] .register-filters{grid-column:2/-1}
  :root[data-scrollbar-chapter="sources"] :is(.register-filters,.register-chapter-row) button{
    flex:none;
    min-height:44px;
    scroll-snap-align:start;
  }
  :root[data-scrollbar-chapter="sources"] .register-heading-body{grid-column:2;min-width:0}
  :root[data-scrollbar-chapter="sources"] .register-heading-actions{grid-column:3;gap:6px}
  /* The clear control's words took a third of the line from the chips it
     clears, so on a phone it is drawn as the mark beside the chevron and
     keeps its words as its name. While nothing is chosen it stands aside,
     since a disabled control on a line this short says nothing the chips do
     not. */
  :root[data-scrollbar-chapter="sources"] .register-heading-clear{
    position:relative;
    width:44px;
    min-height:44px;
    padding:0;
    border-radius:50%;
    font-size:0;
    letter-spacing:0;
  }
  :root[data-scrollbar-chapter="sources"] .register-heading-clear::before{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:16px;
    height:16px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  :root[data-scrollbar-chapter="sources"] .register-heading-clear:disabled{display:none}
  :root[data-scrollbar-chapter="sources"] .register-count-field{padding-top:4px;padding-bottom:10px}
  :root[data-scrollbar-chapter="sources"] .register-heading-count{font-size:11px}
  /* A chapter chip's index and count were set at ten pixels inside an
     eleven-pixel name; on a phone they meet the floor with it. */
  :root[data-scrollbar-chapter="sources"] .register-chapter-row button :is(i,small){font-size:11px}

  /* ---- the list --------------------------------------------------------- */
  /* The public copy is the one action a citation carries, and its two lines
     of notation made a 37px target; the link keeps its lines and takes the
     finger's floor. */
  :root[data-scrollbar-chapter="sources"] .bibliography-entry .source-cite{min-height:44px;align-content:center}
  :root[data-scrollbar-chapter="sources"] .register-kind-count{font-size:11px}
  /* The list skips the layout of rows off the screen and holds each at an
     estimated height until it is drawn. The estimate is a desktop row's, 64
     pixels, and a phone's rows are two to four times that, so the page began
     twenty-seven thousand pixels long and grew to fifty thousand as it was
     read, which moved the rail's progress, the scrollbar and every landing
     under the reader. Each kind of work is held at its own measured mean on
     a phone instead, less the row's padding, since the estimate stands for
     the content alone; a row still keeps its real height once it has been
     drawn. */
  :root[data-scrollbar-chapter="sources"] .source-row{contain-intrinsic-size:auto 114px}
  :root[data-scrollbar-chapter="sources"] .source-row[data-category="method"]{contain-intrinsic-size:auto 134px}
  :root[data-scrollbar-chapter="sources"] .source-row[data-category="measurement"]{contain-intrinsic-size:auto 139px}
  :root[data-scrollbar-chapter="sources"] .source-row[data-category="scholarship"]{contain-intrinsic-size:auto 210px}
  /* A section heading keeps clear of the held header when a filter or a
     search lands the reader on it. */
  :root[data-scrollbar-chapter="sources"] :is(.register-kind,.source-row){scroll-margin-top:calc(var(--archive-masthead-band,37px) + var(--src-head-h,220px) + 8px)}

  /* ---- image credits ---------------------------------------------------- */
  :root[data-scrollbar-chapter="sources"] .image-row .source-cite,
  :root[data-scrollbar-chapter="sources"] .image-row .source-kind,
  :root[data-scrollbar-chapter="sources"] .image-reveal dt,
  :root[data-scrollbar-chapter="sources"] .source-action span{font-size:11px}
  :root[data-scrollbar-chapter="sources"] .source-action{display:block;min-height:44px;padding:4px 0}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    :root[data-scrollbar-chapter="sources"] .register-heading{transition:none}
  }
}

/* ---- 47-about.css ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   A About, seated for the hand
   ---------------------------------------------------------------------------
   The two vessels stand one above the other between the masthead and the
   foot rail, each a door with its word at its foot, which is the stacked form
   the controller already lays out below 900 pixels. What changes is what a
   door does when it is entered. The desktop widens the vessel until it holds
   the page and reads inside it; in contrast, a phone gives the vessel the
   whole screen below the masthead, as a sheet the reading scrolls inside,
   because a vessel grown inside a phone's row would leave no ground to press
   and would spend a strip of a short screen on the other vessel's rail. A
   return control therefore stands above the foot rail while a vessel is
   open, and the other door is offered again where the reading ends. The
   script beside this sheet decides when a vessel is a sheet, while
   everything here describes what a sheet looks like.

   Three rules from about-chapter.css are answered here rather than restated.
   Because the retired phone layer read both vessels flat in the page, the
   shipped sheet sets the maker's name at a fixed size with !important, shows
   the name in place of its entrance word, and holds it at full strength with
   !important. Inside a door, however, the word has to cross to the name as
   the vessel opens. Therefore the two opacity rules below meet that weight
   with their own, and the script sets aside the class the size rule keys on.
   ------------------------------------------------------------------------- */

/* The layer's own controls must not survive a resize into the desktop. */
.mhc-phone-about-back,.mhc-phone-about-offer{display:none}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  #sec-about{
    --about-head:calc(var(--archive-masthead-band,37px) + env(safe-area-inset-top,0px) + var(--about-frame));
    --about-phone-foot:calc(var(--mhc-phone-foot) + var(--about-frame));
  }
  /* The visible phone header is a 56px row at a 12px top inset. The retired
     masthead can still report its hidden content height; reserve the actual
     header, then the same frame used beside and below the vessels. */
  html.mhc-phone-header-ready #sec-about{
    --about-head:calc(68px + env(safe-area-inset-top,0px) + var(--about-frame));
  }

  /* ---- the pair at rest ----------------------------------------------
     The row keeps the desktop's frame on all four sides and gives the foot
     rail its height back, so both doors stand whole above the capsules. The
     register's reservation on the right is not taken, because About draws no
     register in the margin on any screen. */
  html #sec-about .about-doors,
  html.mhc-wayfinding-ready #sec-about .about-doors{
    padding:var(--about-head) var(--about-frame) var(--about-phone-foot);
  }

  /* A door answers a press with the give the rail's capsules have, since a
     phone has no pointer to lean it toward. The scale is its own property so
     that the transform the sheet opens with is never interrupted by it. */
  #sec-about .about-door:not([data-phone-sheet]){transition:scale .24s var(--about-ease)}
  #sec-about .about-door:not([data-phone-sheet]):has(>.about-face:active){scale:.985}
  /* A landscape phone narrower than the desktop's split keeps the stacked
     pair, and each door is given the height its word is sized for, so the
     pair runs a little past one short screen rather than cutting the words. */
  @media (orientation:landscape){
    #sec-about[data-about-layout=stack] .about-doors{height:max(100svh,540px)}
  }

  /* The entrance word is the door's word again, and the name it becomes is
     laid over it to cross as the vessel opens, as it does on the desktop. */
  #sec-about.about-ready .about-word-rest{display:block}
  #sec-about.about-ready .about-word-expanded{position:absolute;left:0;top:0;width:max-content}
  /* Meets the retired rule's !important, which held the name at full
     strength whether or not its vessel was open. */
  #sec-about.about-ready .about-door .about-word .about-word-expanded{opacity:0!important;transition:opacity .36s var(--about-ease)}
  #sec-about.about-ready .about-door[data-about-open] .about-word .about-word-expanded{opacity:1!important}
  #sec-about.about-ready .about-door[data-about-open] .about-word .about-word-rest{opacity:0!important;transition:opacity .24s var(--about-ease)}

  /* ---- a vessel entered: the sheet -------------------------------------
     The vessel keeps its frame, its corners and its field, and stands from
     the masthead band to the foot of the screen; the rail's capsules float
     over its lowest band as they float over every page. It stays below the
     masthead, the rail and the register in the page's own order. */
  #sec-about .about-door[data-phone-sheet]{
    position:fixed;
    z-index:980;
    top:var(--about-head);
    left:var(--about-frame);
    right:var(--about-frame);
    bottom:calc(var(--about-frame) + env(safe-area-inset-bottom,0px));
    flex:none;
    min-height:0;
    will-change:transform,clip-path;
  }
  /* The reading scrolls inside the sheet and never hands its momentum to the
     page underneath, and it ends clear of the rail and the return control. */
  #sec-about .about-door[data-phone-sheet] .about-body{
    overscroll-behavior-y:contain;
    padding-bottom:calc(var(--mhc-phone-foot) + 84px);
  }
  /* Nothing of the page can be seen under a sheet, so it does not move. */
  html.mhc-phone-about-open,
  html.mhc-phone-about-open body{overflow:hidden}

  /* ---- the return control ----------------------------------------------
     The capsule the cross-reference return already wears: glass, a ringed
     arrow, and a label set beside it. It stands on the rail's own left edge,
     above the menu capsule, and appears only while a vessel is open. */
  #sec-about .mhc-phone-about-back{
    position:fixed;
    z-index:1100;
    left:12px;
    bottom:calc(var(--mhc-phone-foot) + 10px);
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:4px 18px 4px 4px;
    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);
    font:450 var(--mhc-type-md)/1.2 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
    letter-spacing:-.012em;
    cursor:pointer;
    backdrop-filter:blur(24px) saturate(138%);
    -webkit-backdrop-filter:blur(24px) saturate(138%);
    -webkit-tap-highlight-color:transparent;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(calc(100% + 24px)) scale(.96);
    transition:opacity .2s ease,visibility 0s linear .56s,transform .56s var(--elastic-ease,cubic-bezier(.16,1,.3,1));
  }
  #sec-about .mhc-phone-about-back[data-shown]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:opacity .2s ease .12s,visibility 0s linear 0s,transform .56s var(--elastic-ease,cubic-bezier(.16,1,.3,1)) .08s;
  }
  #sec-about .mhc-phone-about-back:active{transform:scale(.97)}
  #sec-about .mhc-phone-about-back:focus-visible{outline:2px solid var(--elastic-light);outline-offset:3px}
  #sec-about .mhc-phone-about-back__icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid currentColor;
    border-radius:50%;
  }
  #sec-about .mhc-phone-about-back__icon svg{width:20px;height:20px;stroke-width:1.45}

  /* ---- the other door, at the end of the reading ---------------------
     It is the door in small: the other vessel's field and ink, its lattice
     fading down from the top, its word at the foot, and the swap mark the
     desktop rail carries. Entering it opens that vessel out of this shape. */
  #sec-about .mhc-phone-about-offer{
    position:relative;
    isolation:isolate;
    grid-column:1/-1;
    display:block;
    width:100%;
    min-height:156px;
    margin-top:clamp(44px,7vh,72px);
    padding:0;
    overflow:hidden;
    border-radius:var(--about-r);
    background:var(--offer-field);
    color:var(--offer-ink);
    text-align:left;
    box-shadow:0 22px 48px -28px rgba(var(--mhc-shadow-rgb,16,17,15),.46);
    -webkit-tap-highlight-color:transparent;
    transition:transform .36s var(--about-ease);
  }
  #sec-about .about-door--archive .mhc-phone-about-offer{--offer-field:var(--about-maker-field);--offer-ink:var(--about-maker-ink);--offer-mark:var(--about-maker-mark)}
  #sec-about .about-door--me .mhc-phone-about-offer{--offer-field:var(--about-archive-field);--offer-ink:var(--about-archive-ink);--offer-mark:var(--about-archive-mark)}
  #sec-about .mhc-phone-about-offer:active{transform:scale(.985)}
  #sec-about .mhc-phone-about-offer:focus-visible{outline:2px solid var(--about-ink);outline-offset:4px}
  #sec-about .mhc-phone-about-offer__lattice{
    position:absolute;
    z-index:-1;
    inset:0 0 30% 0;
    opacity:var(--offer-mark);
    background-image:radial-gradient(circle at 50% 50%,var(--offer-ink) 1.45px,transparent 1.6px);
    background-size:15px 15px;
    -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);
    mask-image:linear-gradient(to bottom,#000 30%,transparent);
  }
  #sec-about .mhc-phone-about-offer__word{
    position:absolute;
    left:var(--about-dp);
    bottom:calc(var(--about-dp) * .8);
    font-size:var(--mhc-type-5xl);
    font-weight:300;
    line-height:.9;
    letter-spacing:-.052em;
    white-space:nowrap;
  }
  #sec-about .mhc-phone-about-offer__swap{
    position:absolute;
    top:calc(var(--about-dp) * .8);
    right:calc(var(--about-dp) * .8);
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid color-mix(in srgb,var(--offer-ink) 34%,transparent);
    border-radius:999px;
  }
  #sec-about .mhc-phone-about-offer__swap svg{width:18px;height:18px}

  /* The credit line under each reading keeps its rule; the offer after it
     is the reading's last object. */
  #sec-about .about-door[data-phone-sheet] .about-credit{margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
    #sec-about .mhc-phone-about-back,
    #sec-about .mhc-phone-about-back[data-shown],
    #sec-about .mhc-phone-about-offer,
    #sec-about.about-ready .about-door .about-word .about-word-expanded,
    #sec-about.about-ready .about-door[data-about-open] .about-word .about-word-rest{transition:none}
  }
}

/* ---- 48-companions.css ----------------------------------------------------- */
/* ---------------------------------------------------------------------------
   B Methodology and the Measurement method, seated for the hand
   ---------------------------------------------------------------------------
   The two method companions are documents rather than instruments: one
   reading column of sections, registers and disclosures, closed by a return
   to the chapter a reader came from. They already stack below 760px, so the
   phone asks three things of them and changes nothing else.

   To begin with, the column keeps the phone's gutter. The companions set
   their own inset from a ladder that reaches 16px at the narrowest width,
   which left their text two pixels off every chapter's column; the ladder is
   answered with the layer's token instead.

   In addition, the source tables of the Measurement method are wider than any
   phone and already scroll sideways inside labeled regions. What they lacked
   was any sign of being scrollers and any anchor while scrolled, so the
   system or study stays pinned at the leading edge, the columns snap, and the
   trailing edge fades while more of the table lies beyond it, which is the
   treatment the Measurement ledger receives as well.

   Finally, the companion's first line. Its home link and its close control
   stand in the top corners, where the appearance dot also keeps its 44px
   target, so the row gives the corner to the dot and both of its controls
   take the finger's height.
   ------------------------------------------------------------------------- */
@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  body:is([data-chapter="methodology"],[data-chapter="measurement-method"]){--method-gutter:var(--mhc-phone-gutter)}

  /* ---- the first line ---------------------------------------------------- */
  body:is([data-chapter="methodology"],[data-chapter="measurement-method"]) .method-hero{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  body:is([data-chapter="methodology"],[data-chapter="measurement-method"]) .hero-utility{
    align-items:center;
    padding-right:calc(44px - var(--mhc-phone-gutter) + 6px);
  }
  body:is([data-chapter="methodology"],[data-chapter="measurement-method"]) .hero-utility>:is(a,.method-return){
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* ---- the source tables ------------------------------------------------- */
  body.measurement-method .table-wrap{
    --phone-lead-col:112px;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--phone-lead-col);
    -webkit-overflow-scrolling:touch;
  }
  body.measurement-method .table-wrap :is(th,td){scroll-snap-align:start}
  body.measurement-method .table-wrap tr>:first-child{
    position:sticky;
    left:0;
    z-index:1;
    width:var(--phone-lead-col);
    min-width:var(--phone-lead-col);
    background:var(--method-ground);
    box-shadow:inset -1px 0 0 var(--method-line);
  }
  /* The head row and the total row wear the companion's wash, which is an
     opaque mix, so their first cells keep it rather than the plain ground. */
  body.measurement-method .table-wrap :is(thead,tfoot) tr>:first-child{background:var(--method-wash)}
  body.measurement-method .table-wrap:is([data-phone-scroll="start"],[data-phone-scroll="middle"]){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.2));
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.2));
  }
  body.measurement-method .table-wrap:focus-visible{outline-offset:3px}
}

@media (max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  .health-share-method-inputs { grid-template-columns:minmax(0,1fr); }
}