/* Capital Catalyst · a11y additions */

/* --- legibility pass (10 Nov 2026) ----------------------------------------------------------------------------
   1. The name in the top bar sat straight on the scene: dark ink over the dark tower by day and at golden hour.
      It gets the same soft scrim the floor headlines use. */
.brand { position: relative; }
.brand::before {
  content: ""; position: absolute; inset: -12px -26px -12px -18px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, var(--scrim) 0%, var(--scrim) 50%, transparent 82%);
}
html.plain .brand::before { display: none; }

/* 2. The headline and intro on each floor's left side: a larger solid core in the scrim, and a little more of it at night,
      so the text no longer depends on which windows are behind it. */
body.night { --scrim: rgba(7, 9, 13, .82); }
.split .story::before {
  background: radial-gradient(ellipse 70% 68% at 48% 50%, var(--scrim) 0%, var(--scrim) 64%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 48% 50%, #000 60%, transparent 92%);
  mask-image: radial-gradient(ellipse 70% 68% at 48% 50%, #000 60%, transparent 92%);
}

/* 3. Phones: captions sat on top of the panel's text. They move down to just above the pager, get a solid backing,
      and the panel ends above them whenever captions can appear (x-a11y.js sets html.caps-live). */
@media (max-width: 760px) {
  .subs { bottom: 58px; background: rgba(8, 10, 14, .9); }
  html.caps-live:not(.plain) .panel,
  html.caps-live:not(.plain) .panel.hero,
  html.caps-live:not(.plain) .panel.contact { max-height: calc(100vh - 150px - 72px); max-height: calc(100dvh - 150px - 72px); }
}