/* ============================================================
   hi-nav.css — shared navigation
   ------------------------------------------------------------
   A bottom sheet, because at 500px the masthead's inline links
   are a shrunken desktop and the thumb lives at the bottom of
   the screen. Desktop tools use grouped disclosures below.

   TWO LAWS THIS FILE OBEYS
   1. PROGRESSIVE. Every collapse rule is keyed on
      `html.hi-nav-on`, a class hi-nav.js adds synchronously from
      <head>. Without JS the class never lands, the masthead
      links stay exactly where they were, and no reader loses a
      route. The class is on <html> (not on the navs, which are
      not parsed yet at that point) precisely so the collapse is
      in the cascade BEFORE first paint — no flash of desktop nav.
   2. ELEVATION. The sheet is a surface-2 thing lifted off the
      page: --hi-surface-2 ground, --hi-ambient halo, and the
      1px top rim that the ambient token carries in dark. It does
      not invent a shadow of its own.

   NO italics. NO gold — ◷ is the only gold on this site and this
   component has no receipts to stamp.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE COLLAPSE
   ------------------------------------------------------------
   Up to 1023px (1023.98, so a zoomed 1023.6px viewport is covered) the nine section links fold into the MENU button;
   hi-nav.js uses the same breakpoint. Three masthead dialects ship
   on this site and all three are navy:
     · header.masthead  > .inner > nav.mnav        (the toggle
       button lives INSIDE the nav on most pages, so we hide the
       nav's ANCHORS and leave the container standing)
     · header.site-nav  > nav.nav-links            (toggle is a
       sibling — the whole nav can go)
     · header.do-nav    > nav.do-nav-links         (same)
   The research-desk strip has four spellings across the site and
   every one of them is mirrored into the sheet, so every one of
   them collapses.
   ------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* season.css already said `@media(max-width:860px){.mnav{display:none}}` —
     which on the pages where that rule wins took the THEME TOGGLE down with
     the links, because in this dialect the toggle is a child of the nav. So
     the nav is re-asserted as a bare row: it now carries only the toggle and
     the MENU trigger, and its anchors are what actually collapse. */
  html.hi-nav-on nav.mnav {
    display: flex !important;
    margin-left: auto;
    align-items: center;
    gap: 8px;
  }
  html.hi-nav-on nav.mnav > a { display: none; }
  html.hi-nav-on nav.nav-links,
  html.hi-nav-on nav.do-nav-links,
  html.hi-nav-on nav.rdesk,
  html.hi-nav-on .rdesk,
  html.hi-nav-on .tp-rdesk,
  html.hi-nav-on nav.rw-desk,
  html.hi-nav-on nav[aria-label="Research desk" i] { display: none; }

  html.hi-nav-on .hinav-trigger { display: inline-flex; }
}
@media (max-width: 760px) {
  /* The search affordance on the home masthead loses its label
     but keeps its 44px target — the sheet is now the wide door. */
  html.hi-nav-on .masthead .findbtn > span,
  html.hi-nav-on .masthead .findbtn > kbd { display: none; }
}

/* ------------------------------------------------------------
   2. THE TRIGGER
   ------------------------------------------------------------
   Sits on navy in all three dialects, so it is painted with the
   on-navy tokens, not --hi-blue (which measures ~2:1 there).
   Label grammar is the house's: uppercase, 900, .18em tracked.
   ------------------------------------------------------------ */
.hinav-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hi-navy-line, rgba(157, 184, 221, .26));
  border-radius: var(--rad-pill, 999px);
  background: var(--hi-navy-fill, rgba(255, 255, 255, .06));
  color: var(--hi-on-navy, #dfe9f8);
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: var(--t-micro, .57rem);
  font-weight: var(--hi-lbl-w, 900);
  letter-spacing: var(--hi-lbl-track, .18em);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mo-fast, 120ms) var(--mo-ease, ease),
              border-color var(--mo-fast, 120ms) var(--mo-ease, ease);
}
.hinav-trigger:hover,
.hinav-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: var(--hi-on-navy-hi, #8ab8f2);
}
.hinav-trigger:focus-visible {
  outline: 2px solid var(--hi-on-navy-hi, #8ab8f2);
  outline-offset: 2px;
}
/* The bars are drawn, not typed — a ☰ glyph renders at four
   different weights across the fonts this site loads. */
.hinav-trigger .hinav-bars {
  display: block;
  width: 15px;
  height: 11px;
  position: relative;
  flex: none;
}
.hinav-trigger .hinav-bars::before,
.hinav-trigger .hinav-bars::after,
.hinav-trigger .hinav-bars > i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hinav-trigger .hinav-bars::before { top: 0; }
.hinav-trigger .hinav-bars > i { top: 4.5px; }
.hinav-trigger .hinav-bars::after { bottom: 0; }

/* ------------------------------------------------------------
   3. THE SHEET
   ------------------------------------------------------------ */
.hinav-root {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: block;
}
.hinav-root[hidden] { display: none; }

.hinav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 21, 41, .58);
  opacity: 0;
  transition: opacity var(--mo-base, 240ms) var(--mo-ease, ease);
}

.hinav-sheet {
  /* Local pair for the current-page fill. --hi-blue flips to a
     LIGHTER blue in dark theme, where white text on it measures
     ~2.9:1 — below the floor. So the fill carries its own ink
     for each theme instead of borrowing the token's. */
  --hn-cur-bg: #1f5fbf;
  --hn-cur-ink: #ffffff;
  --hn-cur-ink-2: rgba(255, 255, 255, .84);

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;   /* dvh so the URL bar cannot make it jump */
  background: var(--hi-surface-2, #f7f1e2);
  border-top: 1px solid var(--hi-line, #d7cbb7);
  border-radius: var(--rad, 18px) var(--rad, 18px) 0 0;
  box-shadow: var(--hi-ambient, 0 0 0 1px rgba(13, 31, 60, .04), 0 10px 30px -12px rgba(13, 31, 60, .14));
  color: var(--hi-ink, #0d1f3c);
  transform: translateY(100%);
  transition: transform var(--mo-base, 240ms) var(--mo-ease, cubic-bezier(.22, .61, .36, 1));
  will-change: transform;
  touch-action: none;
}
/* The dialog takes focus on open so screen readers announce it, but
   it is a container, not a control — the UA ring would read as a
   second, brighter top rim and fight the elevation model. Every
   focusable thing INSIDE keeps its ring. */
.hinav-sheet:focus,
.hinav-sheet:focus-visible { outline: none; }

:root[data-theme="dark"] .hinav-sheet {
  --hn-cur-bg: #4d8fe8;
  --hn-cur-ink: #08111f;
  --hn-cur-ink-2: rgba(8, 17, 31, .78);
}

.hinav-root.is-open .hinav-scrim { opacity: 1; }
.hinav-root.is-open .hinav-sheet { transform: translateY(0); }
/* While a finger is on the grip the sheet is positioned by JS,
   frame by frame — a transition here fights the finger. */
.hinav-root.is-dragging .hinav-sheet { transition: none; }

/* --- grip + head ----------------------------------------- */
.hinav-grip {
  padding: 10px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  flex: none;
}
.hinav-grip::before {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--hi-line, #d7cbb7);
}

.hinav-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 18px 12px;
  border-bottom: 1px solid var(--hi-hair, #e4dac7);
  cursor: grab;
}
.hinav-head h2 {
  margin: 0;
  font-family: var(--hi-serif, Georgia, serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.1;
  color: var(--hi-ink, #0d1f3c);
}
.hinav-x {
  margin-left: auto;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hi-line, #d7cbb7);
  border-radius: var(--rad-pill, 999px);
  background: var(--hi-surface-1, #fffaf1);
  color: var(--hi-ink-2, #28405f);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.hinav-x:focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}

/* --- scrolling body -------------------------------------- */
.hinav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 16px 18px 20px;
}

.hinav-lbl {
  margin: 0 0 10px;
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: var(--t-micro, .57rem);
  font-weight: var(--hi-lbl-w, 900);
  letter-spacing: var(--hi-lbl-track, .18em);
  text-transform: uppercase;
  color: var(--hi-muted, #556a80);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hinav-lbl::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hi-hair, #e4dac7);
}
.hinav-lbl + * { margin-top: 0; }
.hinav-sec + .hinav-sec { margin-top: 22px; }

/* --- primary routes: a two-column grid of real targets ---- */
.hinav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hinav-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid var(--hi-line, #d7cbb7);
  border-radius: var(--rad-sm, 12px);
  background: var(--hi-surface-1, #fffaf1);
  text-decoration: none;
  color: var(--hi-ink, #0d1f3c);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--mo-fast, 120ms) var(--mo-ease, ease),
              background var(--mo-fast, 120ms) var(--mo-ease, ease);
}
.hinav-tile:active { background: var(--hi-surface-2, #f7f1e2); }
.hinav-tile:focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}
.hinav-tile b {
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.hinav-tile span {
  font-family: var(--hi-mono, ui-monospace, monospace);
  font-size: var(--t-mono, .62rem);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--hi-muted, #556a80);
}

/* the page you are on — the house's blue fill */
.hinav-tile[aria-current="page"] {
  background: var(--hn-cur-bg);
  border-color: var(--hn-cur-bg);
  color: var(--hn-cur-ink);
}
.hinav-tile[aria-current="page"] span { color: var(--hn-cur-ink-2); }
.hinav-tile[aria-current="page"]:active { background: var(--hn-cur-bg); }

/* the SECTION you are in — the same mark, held back a step */
.hinav-tile[aria-current="true"] {
  background: var(--hi-blue-soft, #e5edfb);
  border-color: var(--hi-blue-line, #bed3f2);
}
.hinav-tile[aria-current="true"] b { color: var(--hi-blue, #1f5fbf); }

/* --- research desk: full-width chips ---------------------- */
.hinav-list { display: grid; gap: 8px; }
.hinav-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--hi-line, #d7cbb7);
  border-radius: var(--rad-pill, 999px);
  background: var(--hi-surface-1, #fffaf1);
  text-decoration: none;
  color: var(--hi-ink, #0d1f3c);
  -webkit-tap-highlight-color: transparent;
}
.hinav-chip:active { background: var(--hi-surface-2, #f7f1e2); }
.hinav-chip:focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}
.hinav-chip b {
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.15;
}
.hinav-chip span {
  margin-left: auto;
  text-align: right;
  font-family: var(--hi-mono, ui-monospace, monospace);
  font-size: var(--t-mono, .62rem);
  font-weight: 500;
  letter-spacing: var(--hi-lbl-track-mono, .14em);
  text-transform: uppercase;
  color: var(--hi-muted, #556a80);
}
.hinav-chip[aria-current="page"] {
  background: var(--hn-cur-bg);
  border-color: var(--hn-cur-bg);
  color: var(--hn-cur-ink);
}
.hinav-chip[aria-current="page"] span { color: var(--hn-cur-ink-2); }
.hinav-chip[aria-current="true"] {
  background: var(--hi-blue-soft, #e5edfb);
  border-color: var(--hi-blue-line, #bed3f2);
}
.hinav-chip[aria-current="true"] b { color: var(--hi-blue, #1f5fbf); }

/* --- footer row ------------------------------------------ */
.hinav-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hi-hair, #e4dac7);
  background: var(--hi-surface-2, #f7f1e2);
}
.hinav-foot > * {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--hi-line, #d7cbb7);
  border-radius: var(--rad-pill, 999px);
  background: var(--hi-surface-1, #fffaf1);
  color: var(--hi-ink-2, #28405f);
  text-decoration: none;
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: var(--t-micro, .57rem);
  font-weight: var(--hi-lbl-w, 900);
  letter-spacing: var(--hi-lbl-track, .18em);
  text-transform: uppercase;
  cursor: pointer;
}
.hinav-foot > *:focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}
.hinav-foot .hinav-glyph { font-size: .82rem; letter-spacing: 0; }
/* One glyph per theme, and only the relevant one is drawn. */
.hinav-theme .hinav-sun { display: none; }
:root[data-theme="dark"] .hinav-theme .hinav-sun { display: inline; }
:root[data-theme="dark"] .hinav-theme .hinav-moon { display: none; }

/* --- body scroll lock ------------------------------------ */
html.hinav-locked, html.hinav-locked body { overflow: hidden; }

/* ------------------------------------------------------------
   4. REDUCED MOTION — the sheet is simply there, or not
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hinav-scrim,
  .hinav-sheet,
  .hinav-trigger,
  .hinav-tile { transition: none !important; }
}

/* ------------------------------------------------------------
   5. ABOVE THE BREAKPOINT nothing exists.
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hinav-root, .hinav-trigger { display: none !important; }
}

/* Shared wide navigation. Specificity intentionally beats the older page
   dialects, some of which load after this sheet. No hidden horizontal links. */
html, body { overflow-anchor: none; }
html .rdesk:not(.hi-explore) > :is(.in, .inner, .rdesk-in) {
  height: auto; flex-wrap: wrap; overflow: visible;
}
html nav[aria-label="Research desk" i]:not(.hi-explore) > :is(.inner, .in),
html .tp-rdesk:not(.hi-explore) > .tp-rdesk-in {
  height: auto; flex-wrap: wrap; overflow: visible;
}
html .hi-explore {
  position: relative; z-index: 75; overflow: visible;
  background: var(--hi-surface-1); color: var(--hi-ink);
  border: 0; border-bottom: 1px solid var(--hi-line);
}
html[data-theme="dark"] .hi-explore { --hi-blue: var(--hi-on-navy-hi); }
html .hi-explore .hi-explore-inner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: var(--maxw, var(--w, 1440px)); margin: 0 auto;
  padding: 4px clamp(16px, 2.2vw, 32px); min-height: 44px; box-sizing: border-box;
}
.hi-explore-label {
  padding-right: 12px; font: 700 .6rem var(--hi-mono, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--hi-muted);
}
.hi-explore-group { position: relative; }
.hi-explore-group > summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  list-style: none; padding: 9px 12px; border-radius: 5px;
  font: 700 .8rem var(--hi-sans, sans-serif); color: var(--hi-ink-2);
}
.hi-explore-group > summary::-webkit-details-marker { display: none; }
.hi-explore-group > summary::after {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.hi-explore-group[open] > summary::after { transform: rotate(225deg); }
.hi-explore-group[open] > summary, .hi-explore-group > summary:hover,
.hi-explore-group > summary.is-current {
  background: var(--hi-blue-soft); color: var(--hi-blue);
}
html .hi-explore .hi-explore-panel {
  position: absolute; top: calc(100% + 5px); left: 0; width: 310px;
  max-width: calc(100vw - 32px); max-height: min(65vh, 520px); overflow-y: auto;
  padding: 6px; border: 1px solid var(--hi-line); border-top: 2px solid var(--hi-blue);
  border-radius: 0 0 8px 8px; box-shadow: var(--hi-ambient);
  background: var(--hi-surface-1); box-sizing: border-box;
}
html .hi-explore a.hi-explore-link {
  display: flex; flex-direction: column; gap: 3px; white-space: normal;
  padding: 10px 12px; margin: 0; border: 0; border-radius: 4px;
  font: 400 .78rem/1.35 var(--hi-sans, sans-serif);
  text-transform: none; letter-spacing: normal; text-decoration: none;
  color: var(--hi-ink); background: transparent;
}
html .hi-explore-link b { font-size: .87rem; }
html .hi-explore-link span { color: var(--hi-muted); }
html .hi-explore a.hi-explore-link:hover,
html .hi-explore a.hi-explore-link[aria-current] { background: var(--hi-blue-soft); color: var(--hi-blue); }
html .hi-explore a.hi-explore-all {
  margin-left: auto; padding: 9px 0 9px 12px; border: 0; background: none;
  font: 600 .78rem var(--hi-sans, sans-serif); color: var(--hi-blue);
  text-transform: none; letter-spacing: normal; white-space: nowrap; text-decoration: none;
}
.hi-explore :is(a, summary):focus-visible { outline: 2px solid var(--hi-blue); outline-offset: 2px; }
@media (min-width: 1024px) {
  html.hi-nav-on :is(header.masthead .inner, header.site-nav, header.do-nav) {
    height: auto; min-height: 58px; flex-wrap: wrap; overflow: visible;
  }
  html.hi-nav-on :is(nav.mnav, nav.nav-links, nav.do-nav-links) {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 14px;
    min-width: 0; overflow: visible;
  }
  html.hi-nav-on :is(nav.mnav, nav.nav-links, nav.do-nav-links) > a { display: inline-flex !important; }
  /* One current-section mark on every masthead: white words on the light
     blue rule. Every dialect draws its links over a transparent bottom rule;
     the navy band's own rule is the darker blue, so this one reads on it. */
  html.hi-nav-on :is(nav.mnav, nav.nav-links, nav.do-nav-links) > a.active { color: #fff; border-bottom-color: #4d8fe8; }
}
/* 1024 to 1239: the nine links stay on ONE row. The two-row masthead this
   replaced grew to 90-120px and pushed every sticky bar under it. Room comes
   from the section name, the dateline and the search label, not the links.
   Above 1239 a masthead that still wraps (a long section name, an extra
   button, a capped width) gets html.hinav-tight from hi-nav.js: the same
   trade at any width. If even that is not enough the row wraps rather than
   letting links overlap the controls. */
@media (min-width: 1024px) and (max-width: 1239.98px) {
  html.hi-nav-on :is(header.masthead .inner, header.site-nav, header.do-nav) { column-gap: 14px; }
  html.hi-nav-on :is(nav.mnav, nav.nav-links, nav.do-nav-links) { gap: 12px; margin-left: auto; }
  html.hi-nav-on :is(nav.mnav, nav.nav-links, nav.do-nav-links) > a { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; white-space: nowrap; }
  html.hi-nav-on .masthead .dateline,
  html.hi-nav-on .masthead .wordmark .section,
  html.hi-nav-on header.site-nav .brand-tag,
  html.hi-nav-on .tp-brand-section { display: none; }
  html.hi-nav-on .masthead .findbtn > span,
  html.hi-nav-on .masthead .findbtn > kbd,
  html.hi-nav-on .hid-pal-trigger-lbl,
  html.hi-nav-on .hid-pal-trigger kbd { display: none; }
  html.hi-nav-on .hid-pal-trigger { width: 36px; padding: 0; justify-content: center; margin-left: 4px; }
  .hi-explore-label { display: none; }
  .hi-explore-group:last-of-type .hi-explore-panel { left: auto; right: 0; }
}
@media (min-width: 1024px) {
  html.hi-nav-on.hinav-tight :is(header.masthead .inner, header.site-nav, header.do-nav) { column-gap: 14px; }
  html.hi-nav-on.hinav-tight :is(nav.mnav, nav.nav-links, nav.do-nav-links) { gap: 12px; margin-left: auto; }
  html.hi-nav-on.hinav-tight :is(nav.mnav, nav.nav-links, nav.do-nav-links) > a { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; white-space: nowrap; }
  html.hi-nav-on.hinav-tight .masthead .dateline,
  html.hi-nav-on.hinav-tight .masthead .wordmark .section,
  html.hi-nav-on.hinav-tight header.site-nav .brand-tag,
  html.hi-nav-on.hinav-tight .tp-brand-section { display: none; }
  html.hi-nav-on.hinav-tight .masthead .findbtn > span,
  html.hi-nav-on.hinav-tight .masthead .findbtn > kbd,
  html.hi-nav-on.hinav-tight .hid-pal-trigger-lbl,
  html.hi-nav-on.hinav-tight .hid-pal-trigger kbd { display: none; }
  html.hi-nav-on.hinav-tight .hid-pal-trigger { width: 36px; padding: 0; justify-content: center; margin-left: 4px; }
}
@media (max-width: 1023.98px) {
  html.hi-nav-on .hi-explore { display: none !important; }
  html.hi-nav-on { --mast-h: 58px; }
  html.hi-nav-on .masthead .inner { gap: 8px; flex-wrap: nowrap; }
  html.hi-nav-on .masthead .wordmark { flex: 0 1 auto; }
  html.hi-nav-on .masthead .mnav:not(:has(.hinav-trigger)) { display: none !important; }
  .hinav-chip { align-items: flex-start; }
  .hinav-chip span { max-width: 52%; font-size: .59rem; letter-spacing: .02em; text-transform: none; }
}
@media (max-width: 760px) {
  html.hi-nav-on .masthead .inner { padding-left: 16px; padding-right: 16px; }
  html.hi-nav-on .masthead .wordmark .section,
  html.hi-nav-on .masthead .dateline,
  html.hi-nav-on .masthead .theme-btn { display: none; }
  html.hi-nav-on .masthead .hinav-trigger { padding-left: 10px; padding-right: 10px; }
}

/* ------------------------------------------------------------
   Draft History tabs (owner, October 5, 2026): one section, seven
   pages, one strip under the masthead. Scrolls sideways on a phone.
   ------------------------------------------------------------ */
.hi-section-tabs {
  background: var(--hi-surface-1, #fff);
  border-bottom: 1px solid var(--hi-line, #dde3ec);
}
.hi-section-tabs-in {
  max-width: var(--hi-maxw, 1180px);
  margin: 0 auto;
  padding: 0 var(--pad, 28px);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hi-section-tabs-home {
  flex: 0 0 auto;
  font-family: var(--hi-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hi-muted, #5b6474);
  text-decoration: none;
}
.hi-section-tabs-list {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hi-section-tabs-list::-webkit-scrollbar { display: none; }
.hi-section-tabs-list a {
  flex: 0 0 auto;
  padding: 0.75rem 0.7rem 0.65rem;
  font-family: var(--hi-sans, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hi-ink-2, #2b3442);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.hi-section-tabs-list a:hover { color: var(--hi-blue, #1f5fbf); }
.hi-section-tabs-list a[aria-current] {
  color: var(--hi-blue, #1f5fbf);
  border-bottom-color: var(--hi-blue, #1f5fbf);
}
.hi-section-tabs-list a:focus-visible,
.hi-section-tabs-home:focus-visible { outline: 2px solid var(--hi-blue, #1f5fbf); outline-offset: -2px; }
@media (max-width: 720px) {
  .hi-section-tabs-in { padding: 0 16px; gap: 0.7rem; }
  .hi-section-tabs-home { display: none; }
}

/* ------------------------------------------------------------
   Reader conveniences (owner, October 6, 2026): hi-nav.js adds
   these on every page. Each rule is scoped to its own class.
   ------------------------------------------------------------ */
.hi-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--hi-navy, #0d1f3c);
  color: var(--hi-on-navy, #fff);
  font: 800 .78rem/1 var(--hi-sans, system-ui, sans-serif);
  text-decoration: none;
  transition: top .15s ease;
}
.hi-skip:focus, .hi-skip:focus-visible { top: 10px; outline: 2px solid var(--hi-blue, #1f5fbf); outline-offset: 2px; }

/* A theme switch for mastheads that shipped without one. */
.hinav-mode, .hinav-club {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--hi-line, #d7cbb7);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.hinav-mode:hover, .hinav-club:hover { border-color: var(--hi-blue, #1f5fbf); }
.hinav-mode:focus-visible, .hinav-club:focus-visible { outline: 2px solid var(--hi-blue, #1f5fbf); outline-offset: 2px; }
.hinav-mode span { font-size: .95rem; line-height: 1; }
.hinav-mode .hinav-sun { display: none; }
:root[data-theme="dark"] .hinav-mode .hinav-sun { display: inline; }
:root[data-theme="dark"] .hinav-mode .hinav-moon { display: none; }
.hinav-club-crest {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat;
  font: 800 .5rem/1 var(--hi-mono, ui-monospace, monospace);
  letter-spacing: .02em;
}
.hinav-club-crest.is-img { color: transparent; }
@media (max-width: 760px) {
  .hinav-mode, .hinav-club { display: none; }
}

/* Back to the top of a long page. Hidden until well down the page,
   and out of the way of any control already in the corner. */
.hi-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--hi-navy-line, rgba(255,255,255,.18));
  border-radius: 999px;
  background: var(--hi-navy, #0d1f3c);
  color: var(--hi-on-navy, #fff);
  box-shadow: 0 6px 18px rgba(13, 31, 60, .22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hi-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.hi-top:hover { background: var(--hi-blue, #1f5fbf); }
.hi-top:focus-visible { outline: 2px solid var(--hi-blue, #1f5fbf); outline-offset: 3px; }
html.hinav-locked .hi-top { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hi-top, .hi-top.is-on, .hi-skip { transition: none; transform: none; }
}
@media print { .hi-top, .hi-skip { display: none !important; } }

/* The date of the latest final on file. The gold glyph is the receipt mark. */
.hi-fresh::before, .hinav-fresh::before { content: "\25F7\00a0"; color: var(--hi-receipt, #b8892b); }
.hinav-fresh {
  flex: none;
  margin: 0;
  padding: 8px 18px;
  border-top: 1px solid var(--hi-hair, #e4dac7);
  color: var(--hi-muted, #66768c);
  font: 600 .66rem/1.4 var(--hi-mono, ui-monospace, monospace);
}

/* Figures in every table line up by the digit; one focus ring and one
   selection colour across the site. Zero-specificity, so a page's own
   rule still wins. */
:where(table) { font-variant-numeric: tabular-nums lining-nums; }
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}
::selection { background: var(--hi-blue-soft, rgba(31, 95, 191, .18)); color: inherit; }