/* ===========================================================================
   archive-masthead: one header for the whole archive, landing included
   ---------------------------------------------------------------------------
   Until 16 September the About entrance carried the archive's only page-level
   header, while every other chapter left that band of the viewport empty and
   relied on the rail's vertical label for identity. Because a reader who
   arrives on a chapter directly, whether from a search result or from a link
   somebody sent them, otherwise meets a cover that names the chapter without
   naming the work it belongs to, the header was generalised to all eight
   chapters. Since 22 September the landing wears the same component too, so
   the one line naming the archive reads the same on the index as in the rooms.

   ONE LINE, AND THE LANDING'S LOCKUP · revised 22 September 2026

   The header used to set the wordmark on two lines under a top inset of the
   frame plus six, so it stood 60px tall over a cover and 87px once it took a
   plate, and the landing set its own single line in a 72px bar. Both were too
   thick for chrome that now stands for the length of every chapter, and they
   disagreed with each other. The line is therefore the landing's, which is the
   archive's visual authority: an italic preface, `Making of the`, at a lighter
   weight and, since 28 September, at the same size, ahead of `Mental Health
   Crisis` at the emphasis weight, with only `Crisis` carrying the accent. It sits in a band of ten pixels above and below one line of type,
   which comes to about 41px at 1440 and is published as
   --archive-masthead-band, so every room that has to clear the header reads
   one number instead of guessing at it.

   IT STANDS THROUGH THE WHOLE CHAPTER

   The header stands for the length of the chapter, because the one line
   naming the archive is also the way back to it, and a reader who is eight
   screens into the Timeline should not have to scroll to the top to find the
   way home. It still yields to the drawer and to archive search, since a
   header laid over an open modal names nothing the reader is looking at.

   NO PLATE AT REST, AND ONE ON REQUEST · revised 22 September 2026

   For a few days the header took the Timeline era header's glass once the
   cover had gone by, on the reasoning that over running text it had to hold
   its own legibility. That is reversed, because a bar laid across the top of
   every chapter reads as a second and flatter surface interrupting the
   chapter's own gradient field, and the field is the thing each room is
   composed on. The legibility argument still holds, however, so the header is
   painted with the field itself rather than left open: chapter-field.js hands
   it an opaque copy of the strip of the field it stands on, exactly as it
   hands one to Measurement's and Claims-makers' covering reading, so the
   reading disappears beneath the header while the header shows no surface of
   its own. A room without a field, which is the Timeline, Sources and About,
   gets its plain ground instead once its cover has gone by, since that ground
   is what the room is drawn on. The translucent plate appears only while the
   pointer is on the header or keyboard focus is inside it, which is the moment
   a reader is actually reading it, and there the field's copy steps aside so
   the glass shows the reading blurred beneath it.

   WHY CRISIS TAKES THE ARCHIVE'S ACCENT AND NOT THE CHAPTER'S

   Nearly every tinted element on a chapter page draws the chapter's own field
   color, and the word Crisis deliberately does not: it carries
   --mhc-accent-ink, which is the Vial Cap the landing has always used, so that
   the one line naming the whole work reads identically in all of the rooms
   rather than changing hue as the reader moves between them.

   WHERE THE RAIL IS STILL HOLDING ITS COLUMN

   rail-dock.js compares the full column's resting top with this header's band.
   Only a column that reaches the header reserves a side inset. That reserve
   stays in place when the reader unpins the rail, because approaching the
   handle brings the full column back. Pinning therefore never moves the name.
   Both insets name the dock's reservation, so clearance follows its edge.
   =========================================================================== */

:root{
  --archive-masthead-frame:clamp(12px,1.5vw,24px);
  --archive-masthead-gutter:calc(var(--archive-masthead-frame) + 10px);
  --archive-masthead-pad:10px;
  --archive-masthead-type:clamp(15px,1.2vw,18px);
  --archive-masthead-line:calc(var(--archive-masthead-type) * 1.15);
  /* Raised only where the full rail would reach the header. */
  --archive-masthead-lead:0px;
  --archive-masthead-trail:0px;
  /* The height the header occupies: one line of the wordmark and the band
     above and below it. Any room that has to begin below the header, or keep
     a sticky surface clear of it, reads this and nothing else. */
  --archive-masthead-band:calc(var(--archive-masthead-pad) * 2 + var(--archive-masthead-line));
}

.archive-masthead{
  position:fixed;
  z-index:990;
  top:0;
  left:0;
  right:0;
  box-sizing:border-box;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  min-height:var(--archive-masthead-band);
  padding:
    var(--archive-masthead-pad)
    max(var(--archive-masthead-gutter),var(--archive-masthead-trail))
    var(--archive-masthead-pad)
    max(var(--archive-masthead-gutter),var(--archive-masthead-lead));
  /* The header states its own absence of surface rather than assuming one,
     because focused-chapters.html carries a bare `header` element rule from
     its own history which paints every header in the document with a paper
     gradient and closes it with a hairline, and anything this class leaves
     unsaid that rule wins by default. */
  background:transparent;
  border:0;
  margin:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:var(--mhc-ink);
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease,visibility .42s,background-color .24s ease,-webkit-backdrop-filter .24s ease,backdrop-filter .24s ease;
  /* The covers underneath are operable: Money's terrain answers the pointer
     and the Timeline's capsules are draggable. Only the two runs of type take
     the pointer back, and hovering either of them is what raises the plate. */
  pointer-events:none;
}
.archive-masthead>*{pointer-events:auto}

/* The header is up from the first paint and is not raised by a script,
   because it is standing chrome in the same sense as the rail: a chapter-shell
   swap builds the incoming header fresh, and a header that waited for a class
   would blink out and fade back in on every change of room while the rail
   beside it held still. It yields only to the drawer and to archive search. */
body:is(.drawer-open,.mhc-nav-open,.chapter-search-open,.search-open) .archive-masthead{
  opacity:0;
  visibility:hidden;
}

/* The field's copy, which chapter-field.js mounts inside the header on every
   room that has a field. It fills the header's own box rather than the
   viewport, and it sits beneath the type because the header is already a
   stacking context. */
.archive-masthead>:is(.mhc-chapter-field,.mhc-chapter-field-grain){
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  transition:opacity .24s ease;
}
/* A room without a field stands on its plain ground, and past its cover the
   header takes that same ground so the reading does not run through the type.
   The three rooms are named rather than inferred from a missing field, since
   a field room has no field for the first frames after a shell swap and a
   header that inferred would flash a white band across it. The ground also
   waits for chapter-sequence-nav.js to have measured the cover, which it has
   done by the time it raises has-chapter-masthead, for the same reason. The
   selector carries no weight of its own, so the plate below still wins. */
:where(html:is([data-scrollbar-chapter="timeline"],[data-scrollbar-chapter="sources"]) body.has-chapter-masthead:not(.is-chapter-hero-active),body[data-chapter="about"]) .archive-masthead{
  background-color:var(--mhc-ground);
}

/* The plate, on request only. Its material is the Timeline era header's glass,
   the archive's lightest, tinted with the shared veil so that it holds the
   wordmark over whatever the chapter has scrolled beneath it. */
.archive-masthead:is(:hover,:focus-within)>:is(.mhc-chapter-field,.mhc-chapter-field-grain){opacity:0}
.archive-masthead:is(:hover,:focus-within){
  background-color:var(--mhc-surface-veil);
  -webkit-backdrop-filter:blur(4px) saturate(.95);
  backdrop-filter:blur(4px) saturate(.95);
}

/* A reader who has asked for less transparency, or a printer, gets the ground
   itself rather than a plate that resolves to nothing. */
@media (prefers-reduced-transparency:reduce){
  .archive-masthead:is(:hover,:focus-within){
    background-color:var(--mhc-ground);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* A persistent header covers the top of the viewport, so the scrollspy's probe
   line and every section's landing offset have to clear it. Both read one
   variable, which elastic-archive-shell.css declares on the root at 28px;
   raising it here on the same element keeps the pair in agreement rather than
   moving the landing and leaving the probe where it was. */
html.mhc-section-rail-ready:has(body.has-chapter-masthead){
  --mhc-section-scroll-inset:calc(28px + var(--archive-masthead-band));
}

/* The dock controller measures the current column, including its scale and
   responsive height. Clearance depends on that resting geometry, never on
   the pin state or the rail's temporary hover/drag transform. */
.archive-masthead.has-rail-clearance{
  --archive-masthead-lead:calc(var(--elastic-content-left,0px) + 12px);
  --archive-masthead-trail:calc(var(--elastic-content-right,0px) + 12px);
}
/* A refused script keeps conservative clearance for the standalone rail. */
@media (max-height:769px){
  html:not(.mhc-rail-dock-ready) .archive-masthead{
    --archive-masthead-lead:calc(var(--elastic-content-left,0px) + 12px);
    --archive-masthead-trail:calc(var(--elastic-content-right,0px) + 12px);
  }
}

/* The lockup is the landing's: the preface in italic at a lighter weight and,
   since 28 September, at the subject's own size, so that the one line reads
   as one measure rather than as a small word ahead of a large one; the
   subject at the system's one emphasis step, and the tight tracking the
   landing title has always carried. */
.archive-masthead-mark{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  color:inherit;
  font:var(--mhc-weight-bold,600) var(--archive-masthead-type)/1.15 var(--mhc-font-sans,Helvetica,Arial,sans-serif);
  letter-spacing:-.064em;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-decoration:none;
}
.archive-masthead-mark i{
  margin-right:.24em;
  font-size:1em;
  font-style:italic;
  font-weight:350;
  letter-spacing:-.048em;
}
/* Only the word Crisis carries the accent; the rest of the subject stays in
   ink at the same weight, so the accent names the claim rather than the field. */
.archive-masthead-mark b{
  font-weight:inherit;
  color:var(--mhc-accent-ink);
}
/* Over a chapter field in the bright theme the accent measured between 3.3:1
   (Frames' blue) and 4.2:1 (Measurement's sage) at the header's size, which is
   under the 4.5 floor for type below the large-text step. It deepens there by
   lightness alone, so the hue and chroma that make it the archive's accent are
   held, and the dark theme, which already clears 4.7, keeps the token as it
   is. The chooser follows chapter-field.css: one number per theme, picked by
   the same selectors that pick the field's own notation. */
html.mhc-field-on{--archive-masthead-crisis-shift:.1}
@media (prefers-color-scheme:dark){
  html.mhc-field-on:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]){--archive-masthead-crisis-shift:0}
}
html.mhc-field-on[data-theme="dark"]{--archive-masthead-crisis-shift:0}
@supports (color:oklch(from white l c h)){
  html.mhc-field-on :is(.archive-masthead-mark,.mhc-mobile-wordmark) b{
    color:oklch(from var(--mhc-accent-ink) calc(l - var(--archive-masthead-crisis-shift,0)) c h);
  }
}
/* The phone's bar names the chapter under the wordmark in the chapter's own
   color, which held on the plate the bar used to carry and does not hold on
   the field itself, so over a field it takes the field's own deepened
   notation, which chapter-field.css already measures against that field. */
html.mhc-field-on .mhc-mobile-bar .mhc-mobile-chapter{
  color:var(--mhc-field-notation,var(--mhc-mobile-chapter-ink,var(--mhc-ink-3)));
}
.archive-masthead-mark:hover b{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.archive-masthead-mark:focus-visible{
  outline:2px solid var(--mhc-accent-ink);
  outline-offset:4px;
  border-radius:2px;
}

/* Mono carries notation only, so the note holds the chapter's letter or number
   and its name, or on the landing the archive's place and span, and nothing
   else. It keeps the .72 ink step, which is the floor for small type over a
   chapter field. */
.archive-masthead-note{
  flex:0 0 auto;
  margin:0;
  color:var(--mhc-on-paper-3,rgba(var(--mhc-ink-rgb,0,0,0),.72));
  font:var(--mhc-weight-medium,500) 10px/1.5 var(--mhc-font-mono,ui-monospace,monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* focused-chapters.html holds Frames, Summary and About in one document and
   names the open route on the body, so the note carries all three readings and
   shows whichever one the route has selected. */
.archive-masthead-note [data-masthead-chapter]{display:none}
body[data-chapter="frames"] .archive-masthead-note [data-masthead-chapter="frames"],
body[data-chapter="summary"] .archive-masthead-note [data-masthead-chapter="summary"],
body[data-chapter="about"] .archive-masthead-note [data-masthead-chapter="about"]{display:inline}

/* About has no hero to pass, so its header is simply up, and it stands on
   paper rather than on either vessel, since about-chapter.css reserves
   --archive-masthead-band above them; laid across the fields themselves the
   word Crisis in --mhc-accent-ink would fall to about 2.3:1 on the olive. */

/* The landing raises the same header once its title has travelled into it.
   landing-loom.js owns that moment through body.landing-minimized, and the
   header sits under the landing's own layers, the travelling title and the
   appearance corner among them, rather than over them. */
.archive-masthead.landing-masthead{z-index:82;opacity:0;visibility:hidden}
body.landing-minimized .archive-masthead.landing-masthead{
  opacity:1;
  visibility:visible;
}

/* THE LANDING WEARS THE ROOMS' HOME PILL · 1 October 2026

   In every room the name is not this bare line but the menu bar's home pill,
   which rail-dock.js builds and rail-dock.css draws: a capsule of the rail's
   clear glass in the top left corner, holding the name, that unfolds on
   approach into the archive's place and span and the appearance control.
   The landing loads no rail, so it carries the same three parts in its own
   markup and they are drawn here to the pill's measurements, which are 12px
   from the corner, 44px tall, 16px of inset and the name at 15px. The glass
   is restated because elastic-archive-shell.css, which owns it, is not on
   this page; a change to the capsule's material has to be made in both.

   The header box keeps the band the rooms reserve under the bar, 68px, which
   is the ceiling landing-intro.js centres both rests below, and the plate the
   rooms' bare header raises on hover stands down, because the pill is the
   surface. Since 4 October the cover has no standalone appearance dot;
   the appearance control becomes available with the pill. */
.archive-masthead.landing-masthead{
  --landing-home-spec:1;
  --landing-home-ease:cubic-bezier(.16,1,.3,1);
  display:block;
  min-height:calc(max(12px,env(safe-area-inset-top,0px)) + 56px);
  padding:0;
}
:root[data-theme="dark"] .archive-masthead.landing-masthead{--landing-home-spec:.5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) .archive-masthead.landing-masthead{--landing-home-spec:.5}
}
.archive-masthead.landing-masthead:is(:hover,:focus-within){
  background-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.landing-home-card{
  position:absolute;
  left:max(12px,env(safe-area-inset-left,0px));
  top:max(12px,env(safe-area-inset-top,0px));
  width:max-content;
  max-width:calc(100vw - 24px);
  border-radius:22px;
  overflow:clip;
  color:var(--mhc-ink);
  background:
    radial-gradient(120% 108% at 50% 50%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,calc(.07 * var(--landing-home-spec))) 90%,
      rgba(255,255,255,calc(.15 * var(--landing-home-spec))) 100%),
    linear-gradient(140deg,rgba(var(--mhc-float-rgb),.46),rgba(var(--mhc-float-rgb),.26));
  box-shadow:
    0 24px 52px rgba(var(--mhc-shadow-rgb),.18),
    0 7px 16px rgba(var(--mhc-shadow-rgb),.09),
    0 1px 2px rgba(var(--mhc-shadow-rgb),.10),
    inset 0 0 0 .75px rgba(255,255,255,calc(.44 * var(--landing-home-spec))),
    inset 0 0 0 2.25px rgba(var(--mhc-shadow-rgb),.06),
    inset 0 2.5px 1.5px -1px rgba(255,255,255,calc(.30 * var(--landing-home-spec))),
    inset 0 -2.5px 1.5px -1px rgba(255,255,255,calc(.18 * var(--landing-home-spec))),
    inset 0 0 13px 4px rgba(var(--mhc-shadow-rgb),.03);
  -webkit-backdrop-filter:blur(34px) saturate(168%) brightness(1.04);
  backdrop-filter:blur(34px) saturate(168%) brightness(1.04);
}
.landing-masthead .archive-masthead-mark.landing-home{
  position:relative;
  display:flex;
  align-items:center;
  height:44px;
  padding:0 16px;
  overflow:visible;
  border-radius:999px;
  font-size:15px;
  line-height:1;
  letter-spacing:-.04em;
  transition:background .25s ease,box-shadow .25s ease;
}
/* The rooms' pill is a flex container holding the name's runs directly, so
   the spaces at their edges collapse and the gaps are its margins alone, .28em
   after the preface and .22em before Crisis. Here the runs sit inside one span
   that the title's travel measures, so the spaces stand, and the margins are
   only what is left of those two gaps once a space has been set. */
.landing-masthead .landing-home i{margin-right:.04em;letter-spacing:-.04em}
.landing-masthead .landing-home b{margin-left:-.02em}
.landing-masthead .landing-home:hover b{text-decoration:none}
.landing-masthead .landing-home:is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--mhc-accent) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mhc-ink) 16%,transparent);
}
.landing-masthead .landing-home:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px;border-radius:999px}
.landing-home-details{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .48s var(--landing-home-ease),opacity .22s ease;
}
.landing-home-card:is(:hover,:focus-within) .landing-home-details{grid-template-rows:1fr;opacity:1}
.landing-home-footer{
  min-height:0;
  overflow:clip;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 8px 0 16px;
}
/* The scope reads in the pill's own small sans, as it does in the rooms,
   rather than in the bare header's mono notation. */
.landing-masthead .archive-masthead-note.landing-home-scope{
  flex:0 1 auto;
  color:color-mix(in srgb,var(--mhc-ink) 76%,transparent);
  font:400 11px/1.4 var(--mhc-font-sans,Helvetica,Arial,sans-serif);
  letter-spacing:.015em;
  text-transform:none;
}
.landing-masthead .landing-home-appearance.theme-toggle{
  position:relative;
  inset:auto;
  z-index:auto;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:36px;
  height:36px;
  margin:0 0 4px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--mhc-ink);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
  transition:background .25s ease,box-shadow .25s ease;
}
.landing-masthead .landing-home-appearance.theme-toggle>.theme-toggle-icon{
  position:static;
  grid-area:1/1;
  display:block;
  width:18px;
  height:18px;
  stroke-width:1.5;
  opacity:0!important;
  transform:scale(.35) rotate(-25deg)!important;
  filter:none!important;
  transition:opacity .18s ease,transform .32s var(--landing-home-ease);
  pointer-events:none;
}
.landing-masthead .landing-home-appearance.theme-toggle[aria-pressed="false"]>.theme-toggle-icon--dark,
.landing-masthead .landing-home-appearance.theme-toggle[aria-pressed="true"]>.theme-toggle-icon--light{opacity:1!important;transform:scale(1) rotate(0)!important}
.landing-masthead .landing-home-appearance.theme-toggle:is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--mhc-accent) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mhc-ink) 16%,transparent);
  color:var(--mhc-ink);
  transform:none;
}
.landing-masthead .landing-home-appearance.theme-toggle:active{transform:scale(.92)}
.landing-masthead .landing-home-appearance.theme-toggle:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}
/* A hand cannot approach, so the place, the span and the control stand open,
   as they do in the rooms. */
@media (hover:none){
  .landing-home-details{grid-template-rows:1fr;opacity:1}
}
@media (max-width:700px){
  .landing-masthead .archive-masthead-mark.landing-home{height:40px;padding:0 12px;font-size:14px}
  .landing-home-details{grid-template-rows:1fr;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .landing-home-card,.landing-home-card *{transition-duration:.01ms!important}
}
@media (prefers-reduced-transparency:reduce){
  .landing-home-card{
    background:rgb(var(--mhc-float-rgb));
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .archive-masthead{transition:opacity .2s linear,visibility .2s}
}

@media print{
  .archive-masthead{display:none!important}
}