:root {
  --navy: #0a1f44;
  --navy-light: #15315f;
  --accent: #c9a227;
  --ink: #1a1a1a;
  --ink-secondary: #555;
  --muted: #888;
  --line: #ddd;
  --bg: #fff;
  --bg-nav: #fafafa;
  --maxw: 1080px;
  --site-header-height: 44px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-font: "Libre Franklin", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Site header (matches main Inventing Indices site) ──────────────────────── */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-header .bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  flex-wrap: wrap;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.005em;
}
.brand .tick { color: var(--accent); }
.brand-tagline {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.site-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.site-nav a {
  color: #cdd5e1;
  text-decoration: none;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 3px;
}
.site-nav a:hover { color: #fff; background: var(--navy-light); }
.site-nav a.active { color: #fff; border-bottom: 2px solid var(--accent); border-radius: 0; }
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: var(--navy-light); border-color: rgba(255, 255, 255, 0.5); }
@media (max-width: 768px) {
  :root { --site-header-height: 52px; }
  .site-header .bar { padding: 0 16px; min-height: 52px; }
  .nav-toggle { display: block; order: 2; }
  .brand-block { order: 1; }
  .brand { font-size: 21px; }
  .brand-tagline { display: none; }
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    gap: 0;
    padding: 0 0 8px;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 13px 8px;
    font-size: 16px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .site-nav a.active { border-bottom: 1px solid var(--accent); color: var(--accent); }
  /* The mega-menu bar's own mobile layout (accordion under this same hamburger) is declared in
     its OWN @media block right after the desktop .mb-menu rules below — NOT here — so its
     overrides win the cascade against the unconditional desktop declarations (equal specificity,
     source order decides; this early block would otherwise lose to rules declared further down
     the file, mirroring the existing .mb-section-nav split in this same media query). */
}

/* ── Masthead ──────────────────────────────────────────────────────── */
.mb-masthead {
  position: relative; /* anchors the search widget (mb#163) hard-right of the centered title */
  --mb-title-size: 40px; /* shared by the h1 AND the search anchor so they stay height-locked */
  text-align: center;
  padding: 14px 16px 10px;
  border-bottom: 2px solid var(--ink);
}
.mb-masthead h1 {
  font-family: var(--serif);
  font-size: var(--mb-title-size);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2; /* explicit so the search anchor below can mirror the h1 line box exactly */
  margin: 0;
}
@media (max-width: 480px) {
  /* Shrink the title and clear symmetric side lanes so the magnifier never collides with the h1
     on narrow phones (bp#163 review, MEDIUM). Symmetric padding keeps the title centered. */
  .mb-masthead { --mb-title-size: 28px; padding-left: 52px; padding-right: 52px; }
}
.mb-masthead .mb-date {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Section nav / mega-menu bar (bp#257) ─────────────────────────────
   Structure: .mb-section-nav > ul.mb-menu-bar > li.mb-menu, each carrying a real <a> trigger
   (.mb-menu__link, navigates to the section page), a disclosure <button> (.mb-menu__toggle,
   opens/closes the panel — wired by mb-nav.js, never CSS :hover-only) and a .mb-menu__panel of
   .mb-menu__col columns. The panel's OPEN state is driven entirely by JS ([hidden] /
   aria-expanded / .mb-menu--open); these rules only style the two states, they never open one. */
:root {
  --mb-menu-panel-width: 200px;
  --mb-menu-panel-gap: 20px;
  --mb-menu-viewport-margin: 16px;
}
.mb-section-nav {
  position: sticky;
  top: var(--site-header-height);
  z-index: 150;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.mb-menu-bar {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
}
.mb-menu {
  position: relative;
  display: flex;
  align-items: stretch;
}
.mb-menu__link {
  display: block;
  padding: 12px 8px 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mb-menu__link:hover {
  color: var(--ink);
  text-decoration: none;
}
.mb-menu__link.active {
  color: var(--ink);
  border-bottom-color: var(--navy);
}
.mb-menu__toggle {
  display: flex;
  align-items: center;
  padding: 0 14px 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}
.mb-menu__toggle:hover,
.mb-menu__toggle:focus-visible { color: var(--ink); }
.mb-menu--open .mb-menu__toggle { color: var(--ink); }
/* Desktop: no visible caret next to the menu names (operator call 2026-07-17). The toggle stays
   in the DOM and tab order because the panel must never be hover-only (see the structure comment
   above): it is visually collapsed by default and pops back in while keyboard-focused, so
   tab-to-open still works. The mobile accordion (max-width block below) keeps its caret — there
   it is the only expand affordance. */
@media (min-width: 769px) {
  .mb-menu__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .mb-menu__toggle:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: 0 14px 0 2px;
    overflow: visible;
    clip-path: none;
  }
  /* With the caret collapsed, the link is the tab's full visual footprint — restore the
     right-side padding the button used to occupy so labels stay evenly spaced. */
  .mb-menu__link {
    padding-right: 20px;
  }
}
/* Panel width/overflow (orchestrator Codex review of PR #265, finding 1): capped so even the
   widest (3-column) panel — Banking/Economy at 3 * 200px columns + 2 inter-column gaps + the
   panel's own left/right padding = 680px — fits inside the viewport with margin to spare down to
   the 769px desktop floor (769 - 2*16px margin = 737px >= 680px), and `min()` re-clamps further
   for anything narrower still (columns wrap via flex-wrap rather than force an overflow). Which
   EDGE the panel anchors to (left/right/viewport-pinned) is decided at open time by
   `adjustPanelAlignment` in mb-nav.js (pure geometry in `shouldAlignPanelRight` /
   `rightAlignedWouldOverflowLeft`, unit-tested at 769/1024/1280/1440px) via the
   `--right`/`--edge` modifier classes below — this rule only bounds the SIZE, never the
   position. */
.mb-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-menu-panel-gap);
  width: max-content;
  max-width: min(680px, calc(100vw - 2 * var(--mb-menu-viewport-margin)));
  padding: 20px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.mb-menu__panel[hidden] { display: none; }
/* Right-anchored: the panel's RIGHT edge lines up with its trigger's right edge (grows leftward)
   instead of the default left-anchor (grows rightward) — flipped by mb-nav.js when a left-anchor
   would cross the viewport's right edge. */
.mb-menu__panel--right { left: auto; right: 0; }
/* Viewport-pinned fallback: even right-anchoring would cross the LEFT edge (a panel wider than
   the space available on either side of its trigger, which the width cap above makes vanishingly
   rare but not geometrically impossible). mb-nav.js sets an explicit inline `left` (computed from
   the trigger's real position so the panel's edge lands at the viewport margin) — this class just
   clears the `right: 0` from `--right` so it doesn't fight that inline value. */
.mb-menu__panel--edge { right: auto; }
.mb-menu__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 var(--mb-menu-panel-width);
  min-width: var(--mb-menu-panel-width);
  max-width: var(--mb-menu-panel-width);
}
.mb-menu__col-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.mb-menu__item {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  padding: 4px 0;
}
a.mb-menu__item:hover { color: var(--navy); text-decoration: underline; }
.mb-menu__item--planned {
  color: var(--muted);
  cursor: default;
}
.mb-menu__item--planned em {
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Mobile mega-menu: two-level accordion under the existing hamburger (memo §6). Declared AFTER
   the desktop rules above so equal-specificity conflicting properties (padding, position, etc.)
   correctly win the cascade at narrow widths — do not hoist this above the desktop block.

   No-JS baseline (orchestrator Codex review of PR #265, finding 5): the static markup ships each
   .mb-menu__panel with a literal `hidden` attribute, and mb-nav.js is the only thing that ever
   clears it — so WITHOUT JS every link would be permanently unreachable on mobile if the panel
   stayed hidden and the bar collapsed by default. The un-namespaced rules below therefore render
   every row's panel already expanded (a flat, always-visible list — no accordion, but every link
   present and reachable) and keep .mb-section-nav itself visible. The collapsed-behind-the-
   hamburger accordion is a pure ENHANCEMENT, gated behind the `html.mb-nav-js` marker class that
   mb-nav.js adds to <html> the moment it actually runs — never required to reach a link. */
@media (max-width: 768px) {
  .mb-menu-bar {
    flex-direction: column;
    max-width: none;
    padding: 0;
  }
  .mb-menu {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
  }
  .mb-menu__link {
    padding: 13px 44px 13px 16px;
    white-space: normal;
  }
  .mb-menu__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 16px;
    border-bottom: 0;
  }
  .mb-menu__panel {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 4px 16px 14px 28px;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
  /* Equal specificity to the desktop `.mb-menu__panel[hidden]{display:none}` rule, later in
     source -> wins at these widths: the panel stays visible even while `hidden` is still set
     (the no-JS case). */
  .mb-menu__panel[hidden] { display: flex; }
  .mb-menu__col { width: auto; max-width: none; }

  /* JS enhancement only: collapse the bar behind the hamburger, and collapse each panel back
     down until its own toggle opens it. Higher specificity than the un-namespaced rules above
     (extra `html.mb-nav-js` ancestor), so it correctly overrides them once JS has proven it's
     running — never on its own, so a script error after this class is added can't strand a
     mid-open state (setOpen(null) always runs first on any close path). */
  html.mb-nav-js .mb-section-nav { display: none; position: static; }
  html.mb-nav-js .mb-section-nav.mb-mobile-open { display: block; max-width: 100%; }
  html.mb-nav-js .mb-menu__panel { display: none; }
  html.mb-nav-js .mb-menu__panel[hidden] { display: none; }
  html.mb-nav-js .mb-menu--open .mb-menu__panel:not([hidden]) { display: flex; }
}

/* ── Content container ─────────────────────────────────────────────── */
.mb-content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ── Lead article ──────────────────────────────────────────────────── */
.mb-lead {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.mb-lead .mb-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 8px;
}
.mb-lead h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.mb-lead h2 a { color: var(--ink); }
.mb-lead h2 a:hover { text-decoration: underline; }
.mb-lead .mb-dek {
  font-size: 16px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.mb-lead .mb-meta {
  font-size: 13px;
  color: var(--muted);
}

/* ── Lead headlines (mb#226: dominant lead + up to two secondary headlines) ── */
/* The primary headline keeps the big .mb-lead h2 treatment above; the secondaries sit below in a
   two-up row that collapses to a single column on narrow screens. curateFrontPage may hand back
   1, 2, or 3 headlines — the layout renders whatever exists without gaps. */
.mb-headline--primary {
  margin: 0;
}
.mb-headlines-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* A 2-headline thin day yields a single secondary: span it rather than leave an empty column. */
.mb-headline--secondary:only-child {
  grid-column: 1 / -1;
}
.mb-headline--secondary {
  margin: 0;
}
.mb-headline--secondary h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}
.mb-headline--secondary h3 a { color: var(--ink); }
.mb-headline--secondary h3 a:hover { text-decoration: underline; }
.mb-headline--secondary .mb-dek {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-bottom: 6px;
}
@media (max-width: 640px) {
  .mb-headlines-secondary { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Section cluster (homepage) ────────────────────────────────────── */
.mb-cluster {
  margin-bottom: 40px;
}
.mb-cluster-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
}
.mb-cluster-header h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.mb-cluster-header h3 a {
  color: var(--navy);
  text-decoration: none;
}
.mb-cluster-header h3 a:hover { text-decoration: underline; }

/* ── Article tile grid ─────────────────────────────────────────────── */
.mb-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .mb-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mb-tile-grid { grid-template-columns: 1fr; }
}

.mb-tile {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mb-tile h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.mb-tile h4 a { color: var(--ink); }
.mb-tile h4 a:hover { text-decoration: underline; }
.mb-tile .mb-dek {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-bottom: 6px;
}
.mb-tile .mb-meta {
  font-size: 12px;
  color: var(--muted);
}

/* ── Empty / placeholder ───────────────────────────────────────────── */
.mb-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: 4px;
}

/* ── Section page (simpler list layout) ────────────────────────────── */
.mb-section-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-top: 16px;
}
.mb-section-subtitle {
  color: var(--muted, #666);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 60ch;
}
.mb-list-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.mb-list-item h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.mb-list-item h3 a { color: var(--ink); }
.mb-list-item h3 a:hover { text-decoration: underline; }
.mb-list-item .mb-dek {
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.mb-list-item .mb-meta {
  font-size: 13px;
  color: var(--muted);
}

/* Earnings: curated newspaper view + explicit complete-archive doorway (bp#197). */
.mb-earnings-all {
  display: block;
  margin: 16px 0 32px;
  padding: 18px 20px;
  color: var(--ink);
  background: var(--paper-alt, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
}
.mb-earnings-all:hover { border-color: var(--navy); }
.mb-earnings-all strong,
.mb-earnings-all span { display: block; }
.mb-earnings-all strong { font-family: var(--serif); font-size: 21px; margin: 3px 0; }
.mb-earnings-all__eyebrow {
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.mb-earnings-all--back { padding: 12px 16px; }
.mb-earnings-industries__title {
  font-family: var(--serif);
  font-size: 28px;
  margin: 8px 0 20px;
}

/* ── Section panes (multi-pane section pages: Banking, Microcaps…) ──── */
.mb-pane {
  margin-bottom: 44px;
  scroll-margin-top: 64px; /* clear the sticky blue site header on #anchor deep links */
}
.mb-pane__head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mb-pane__viewall {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.mb-pane__viewall:hover { text-decoration: underline; }
.mb-pane__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.mb-pane__desc {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-top: 4px;
}
.mb-pane__list .mb-list-item:last-child {
  border-bottom: none;
}

/* Microcaps: earnings column plus deals/filing-trends column */
body[data-mb-section="microcaps"] #article-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}
body[data-mb-section="microcaps"] #micro-earnings {
  grid-column: 1;
  grid-row: 1 / span 2;
}
body[data-mb-section="microcaps"] #micro-deals,
body[data-mb-section="microcaps"] #micro-filing-trends {
  grid-column: 2;
}
body[data-mb-section="microcaps"] .mb-pane {
  margin-bottom: 34px;
}

/* Two-column newspaper stream (industry blocks, bp#83) */
.mb-pane__list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
.mb-pane__list--grid .mb-list-item {
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .mb-pane__list--grid { grid-template-columns: 1fr; }
  body[data-mb-section="microcaps"] #article-list {
    grid-template-columns: 1fr;
  }
  body[data-mb-section="microcaps"] #micro-earnings,
  body[data-mb-section="microcaps"] #micro-deals,
  body[data-mb-section="microcaps"] #micro-filing-trends {
    grid-column: auto;
    grid-row: auto;
  }
}
.mb-list-item--compact {
  padding: 14px 0;
}
.mb-list-item--compact h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

/* ── Pinned/featured block (industry-wide coverage above a pane's stream) ── */
.mb-pane__pinned {
  background: var(--paper-alt, rgba(0, 0, 0, 0.03));
  border-left: 3px solid var(--navy);
  padding: 4px 16px 8px;
  margin-bottom: 16px;
}
.mb-pane__pinned-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--navy);
  padding-top: 10px;
}
.mb-pane__pinned .mb-list-item:last-child {
  border-bottom: none;
}

/* ── Industries hub ────────────────────────────────────────────────── */
.mb-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .mb-industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mb-industry-grid { grid-template-columns: 1fr; }
}
.mb-industry-block h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.mb-industry-block h4 a { color: var(--ink); }
.mb-industry-block ul {
  list-style: none;
  padding: 0;
}
.mb-industry-block li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.mb-industry-block li a {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.mb-footer {
  margin-top: 60px;
  padding: 24px 0;
  border-top: 2px solid var(--ink);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ── Ticker/company search (bp#124; magnifier chrome mb#163) ─────────────
   Collapsed to a magnifier icon hard-right of the masthead title; clicking expands the input to
   its left. The wrapper is absolutely positioned inside the position:relative masthead and, as in
   the original, declares NO z-index and creates NO stacking context (no transform/filter/opacity),
   so the dropdown's z-index competes at the root level above both sticky bars (see
   .mb-search__results). Vertical anchoring mirrors the h1's line box exactly — top = the
   masthead's 14px top padding, height = the h1's font-size × its explicit 1.2 line-height (the
   shared --mb-title-size variable) — so the icon centers on the TITLE row, not the whole
   masthead: section pages (h1 + .mb-date) and article pages (h1 only) get identical placement
   (bp#163 review, LOW). NOT translateY, which would open a stacking context and trap the
   dropdown. */
.mb-search {
  position: absolute;
  top: 14px;
  height: calc(var(--mb-title-size) * 1.2);
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mb-search__toggle {
  order: 2; /* keep the icon hard-right of the expanding input */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.mb-search__toggle:hover { color: var(--navy); background: var(--bg-nav); }
.mb-search__toggle:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(10, 31, 68, 0.12);
}
.mb-search__input {
  order: 1; /* sits to the LEFT of the icon */
  width: 0;
  min-width: 0;
  padding: 7px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
}
.mb-search.is-open .mb-search__input {
  /* Cap the width so the field never runs off a narrow masthead (leaves room for the icon + edge
     padding). It may overlay the centered title while open — expected for an expand-search — but
     never reaches the separate section nav below. */
  width: min(240px, calc(100vw - 96px));
  padding: 7px 10px;
  border-color: var(--line);
  opacity: 1;
  pointer-events: auto;
}
.mb-search.is-open .mb-search__input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(10, 31, 68, 0.12);
}
@media (max-width: 480px) {
  /* Narrow phones (bp#163 review, MEDIUM): the open field spans the whole masthead as a solid
     overlay COVERING the title (its background is opaque), instead of a partial strip awkwardly
     half-overlapping it. Collapsed, only the icon shows and the shrunken title (see the masthead
     block above) keeps clear of it. left is only set while open so the collapsed wrapper stays a
     right-anchored icon box. */
  .mb-search.is-open { left: 16px; background: var(--bg); }
  .mb-search.is-open .mb-search__input { flex: 1; width: auto; }
}
.mb-search__results {
  position: absolute;
  /* Above BOTH sticky bars — .mb-section-nav (150) and .site-header (200 here; 30 in the
     article page's assets/css/style.css). The dropdown opens below the masthead, so on scroll
     the sticky bars would otherwise paint over its top rows (Codex review of PR #135). The
     .mb-search wrapper is absolutely positioned WITHOUT a z-index (and with no
     transform/filter/opacity), so it creates no stacking context and this value competes at the
     root level as intended. */
  z-index: 300;
  top: 100%;
  right: 0;
  left: auto;
  width: min(360px, calc(100vw - 32px));
  margin-top: 6px;
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.mb-search__group { border-bottom: 1px solid var(--line); padding: 6px 0; }
.mb-search__group:last-child { border-bottom: none; }
.mb-search__company {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px;
}
.mb-search__ticker { font-weight: 700; font-size: 13px; color: var(--navy); }
.mb-search__name {
  font-size: 13px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-search__tier {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
.mb-search__no-articles {
  padding: 2px 12px 4px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.mb-search__article {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px 5px 22px;
  font-size: 13px;
  color: var(--ink);
}
.mb-search__article:hover,
.mb-search__article.is-active { background: var(--bg-nav); color: var(--navy); }
.mb-search__article-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-search__article-date { flex: none; font-size: 11px; color: var(--muted); }
.mb-search__empty { padding: 8px 12px; font-size: 13px; color: var(--muted); }

/* --- Per-company landing pages + search company-links (bp#164) --- */
/* A company's dropdown header is an <a> landing on its company page. */
a.mb-search__company { text-decoration: none; color: inherit; }
a.mb-search__company:hover,
a.mb-search__company.is-active { background: var(--bg-nav); }
/* Company sheets use the page width for multi-year tables and coverage blocks; long-form article
   prose keeps the narrower 74ch reading measure from assets/css/style.css. */
.prose.article.mb-company {
  width: calc(100% - 48px);
  max-width: 1180px;
}
@media (max-width: 640px) {
  .prose.article.mb-company { width: calc(100% - 24px); }
}
/* Company-page header meta: ticker list + tier badge. */
.mb-company__tickers { font-weight: 700; color: var(--navy); }
.mb-company__tier {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: middle;
}
.mb-company__coverage { margin-top: 24px; }
.mb-company__coverage h2 { font-family: var(--serif); font-size: 24px; }
.mb-company__articles { margin-top: 8px; }
/* Company-page data sections (bp#139 tier history / bp#140 recent filings): compact date-led
   rows matching the archive list rhythm. */
.mb-company__tier-history,
.mb-company__filings { margin-top: 18px; }
.mb-company__data-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 14px;
}
.mb-company__data-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.mb-company__data-date {
  display: inline-block;
  min-width: 130px;
  color: var(--muted);
  font-size: 13px;
}
/* Price-free financial tearsheet (bp#192): compact annual-fundamentals table, horizontal scroll
   on narrow viewports (the wrapper scrolls, never the page body). */
.mb-company__tearsheet { margin-top: 18px; }
.mb-company__tearsheet-scroll {
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mb-company__tearsheet-table {
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
  min-width: 100%;
}
.mb-company__tearsheet-table th,
.mb-company__tearsheet-table td {
  padding: 4px 14px 4px 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-weight: 400;
}
.mb-company__tearsheet-table th[scope="col"] {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.mb-company__tearsheet-table th[scope="row"],
.mb-company__tearsheet-table thead th:first-child { text-align: left; }
/* mb#961: Income Statement / Balance Sheet / Cash Flow Statement subheader rows within the one
   table (shared fiscal-year columns, no repeated thead). */
.mb-company__tearsheet-table tr.mb-company__tearsheet-section th {
  text-align: left;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.mb-company__tearsheet-shares { margin-top: 10px; font-size: 14px; }
.mb-company__tearsheet-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Companies size-tier landing pages (bp#258, IA memo §6 Phase 2) ──── */
.mb-tier-blurb {
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
  max-width: 68ch;
}
.mb-tier-intro { margin: 8px 0 24px; }
.mb-tier-count {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.mb-tier-asof {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
/* "Pending refresh" banner — shown only when the consumed size-tier snapshot is past fresh_until. */
.mb-tier-stale {
  margin: 12px 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 4px;
  background: #fdf9ec;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.mb-tier-grid-section { margin: 28px 0; }
.mb-tier-grid__title,
.mb-tier-coverage__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.mb-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.mb-tier-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.mb-tier-card--link { transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.mb-tier-card--link:hover,
.mb-tier-card--link:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.mb-tier-card__ticker {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.mb-tier-card__name {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.3;
}
.mb-tier-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
}
.mb-tier-card__coverage { color: var(--navy); font-weight: 600; }
.mb-tier-card__coverage--none { color: var(--muted); font-style: italic; }

/* Coverage block — the small/micro commercial differentiator leads above the grid on those tiers. */
.mb-tier-coverage { margin: 28px 0; }
.mb-tier-coverage__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mb-tier-coverage__co {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}
.mb-tier-coverage__ticker { color: var(--navy); font-weight: 700; }
.mb-tier-coverage__arts { list-style: none; margin: 0; padding: 0; }
.mb-tier-coverage__arts li { padding: 3px 0; font-size: 14px; line-height: 1.4; }
.mb-tier-coverage__arts a { color: var(--ink); }
.mb-tier-coverage__arts a:hover { color: var(--navy); text-decoration: underline; }
.mb-tier-coverage__date { color: var(--muted); font-size: 12px; margin-left: 6px; }