/* ==========================================================================
   MSN26 Insights -- FT-broadsheet-style recap minisite
   Self-contained CSS. Consumes the RT brand palette but tuned for a LIGHT
   "Seashell" paper surface (per rt-mip-demo/docs/mip-editions v2-broadsheet
   concept), since the parent MSN26 site itself is a dark event page. The
   canonical dark RT footer at the bottom is ported verbatim and keeps its
   own dark-surface contract (pure white text, no inheritance assumed).
   ========================================================================== */

:root {
  --ins-paper: #fff5ee;
  --ins-paper-raised: #fffaf5;
  --ins-ink: #1a1210;
  --ins-ink-muted: #6b5f57;
  --ins-ink-faint: #a89a8d;
  --ins-line: #ddd0c1;
  --ins-line-strong: #c9b8a4;
  --ins-red: #e31b23;
  --ins-red-dark: #b8151c;
  /* Darkened gold for LIGHT surfaces -- the site's --accent-gold (#ddc074) /
     --on-dark-accent tokens are tuned for dark backgrounds and fail contrast
     here; this is a distinct, deliberately deeper shade for paper. */
  --ins-gold: #8a6a1f;
  --ins-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ins-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --ins-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ins-measure: 1160px;
  /* --ins-header-h (anchor scroll-margin offset) is declared in the
     canonical-nav :root block below: 123px desktop (74px fixed main nav
     + ~49px sticky msn-subnav), 77px at <=768px where the subnav goes
     static and only the fixed nav stays pinned. */
  color-scheme: light;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ins-paper);
  color: var(--ins-ink);
  font-family: var(--ins-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* --------------------------------------------------------------------
   i18n show/hide -- lang= is the real HTML lang attribute (semantic +
   accessible); html[data-lang] on the root drives which block is visible.
   -------------------------------------------------------------------- */
.i18n[lang] { display: none; }
html[data-lang="pl"] .i18n[lang="pl"] { display: block; }
html[data-lang="en"] .i18n[lang="en"] { display: block; }

.i18n-inline[lang] { display: none; }
html[data-lang="pl"] .i18n-inline[lang="pl"] { display: inline; }
html[data-lang="en"] .i18n-inline[lang="en"] { display: inline; }

/* ==========================================================================
   Canonical MSN26 chrome, ported from the main event site (#msn-nav +
   msn-subnav). Row 1: fixed dark nav (gold MSN26 Warsaw logo, uppercase
   links, PL/EN toggle, red CTA, hamburger). Row 2: the Insights section
   menu as a canonical msn-subnav band (gold active pill, red press CTA).
   Dark-surface rule: every text pure #ffffff or canonical gold, opacity 1.
   ========================================================================== */

:root {
  --bg-primary: #0a0a0a;
  --accent-gold: #ddc074;
  --accent-gold-light: #e8cd8a;
  --border: #4a4846;
  --on-dark-primary: #ffffff;
  --on-dark-secondary: #ffffff;
  --on-dark-muted: #ffffff;
  --on-dark-accent: #ddc074;
  --rt-red: #e31b23;
  --ins-header-h: 123px;
}

/* Minisite pages are not body.msn-subpage; the fixed nav needs its own
   content offset here. */
body {
  padding-top: 74px;
}

.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--accent-gold);
  color: var(--bg-primary);
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 0;
  transition: top 180ms ease;
}

.skip-nav:focus {
  top: 0.5rem;
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.9rem max(1.5rem, calc((100vw - 1160px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  background: rgba(10, 10, 10, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
}

.nav-logo {
  text-decoration: none;
  padding: 0.2rem 0;
}

.nav-logo picture,
.nav-logo img {
  display: block;
  height: 1.75rem;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  position: relative;
  display: inline-block;
  color: #e8e6e3; /* canonical event-site --on-dark-secondary — main menu must byte-match the site chrome */
  opacity: 1;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #e3c178; /* canonical event-site --on-dark-accent (insights.css re-tunes its own token to #ddc074 for light surfaces — chrome must use the site value) */
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-links a[aria-current="page"] {
  color: #e3c178; /* canonical event-site --on-dark-accent */
}

.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px;
}

.nav-cta {
  position: relative;
  overflow: hidden;
  background: var(--rt-red, #e31b23) !important;
  color: #ffffff !important;
  border: 1px solid var(--rt-red, #e31b23);
  padding: 0.55rem 1.1rem;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
  will-change: transform;
}

.nav-cta:hover {
  background: #c8141c !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(227, 27, 35, 0.40) !important;
}

.nav-cta:active,
.lang-toggle:active {
  transform: translateY(0) scale(0.98);
}

.lang-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 0;
  opacity: 1;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
  will-change: transform;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  outline: none;
}

.lang-opt {
  color: #ffffff;
  opacity: 1;
  transition: color 180ms ease, opacity 180ms ease;
}

.lang-opt.lang-active,
.lang-opt.is-active {
  color: #ddc074;
  opacity: 1;
  font-weight: 700;
}

.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 27, 35, 0.2);
}

.nav-hamburger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #ffffff;
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nav-hamburger span:nth-child(1) {
  top: 14px;
}

.nav-hamburger span:nth-child(2) {
  top: 21px;
}

.nav-hamburger span:nth-child(3) {
  top: 28px;
}

.nav-hamburger.open span:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Load-bearing 44px tap targets used by the canonical 74px navigation. */
.nav-cta,
.lang-toggle,
.nav-links a,
.nav-logo {
  min-height: 44px;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
}

/* Canonical focus treatment, scoped to the chrome so the light content
   area keeps its own focus indicators. */
.nav a:focus-visible,
.nav button:focus-visible,
.msn-subnav a:focus-visible,
.msn-subnav button:focus-visible,
.lang-toggle:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(184, 149, 106, 0.15);
  border-radius: 2px;
}

body.nav-menu-open {
  overflow: hidden;
}

/* Canonical dark second-tier navigation. */
.msn-subnav {
  position: sticky;
  top: 74px;
  z-index: 900;
  background: #14110e;
  border-bottom: 1px solid #000000;
}

.msn-subnav-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 2rem;
  flex-wrap: wrap;
}

.msn-subnav-inner > a:first-child {
  margin-left: auto;
}

.msn-subnav a {
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff; /* Insights menu stays pure white (Alex ruling 2026-07-19) — do NOT dim to the event-site #b0aca8 subnav token */
  opacity: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 5px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.msn-subnav a:hover {
  color: #ffffff;
}

.msn-subnav a.active,
.msn-subnav a[aria-current="true"],
.msn-subnav a[aria-current="page"] {
  background: #ddc074;
  color: #061c38;
  font-weight: 600;
}

.ins-print-btn {
  flex: 0 0 auto;
  margin-left: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  opacity: 1;
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: inherit;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease,
              background 0.15s ease,
              border-color 0.15s ease;
}

.ins-print-btn:hover,
.ins-print-btn:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
}

.ins-print-short {
  display: none;
}

.msn-subnav-cta {
  margin-left: 0.6rem;
  color: #ffffff !important;
  background: #e31b23;
  padding: 0.5rem 1rem !important;
  border-radius: 4px;
}

.msn-subnav-cta:hover {
  background: #c8161d;
}

.msn-subnav .msn-subnav-cta.active,
.msn-subnav .msn-subnav-cta[aria-current="page"] {
  background: #ddc074;
  color: #061c38 !important;
  font-weight: 600;
}

/* Row-2 Insights subnav mobile hamburger toggle -- hidden on desktop, shown
   under the .msn-subnav breakpoint (see @media max-width:768px). The horizontal
   overflow bar was un-swipeable to its last items (notably "Dla mediow"); the
   toggle opens #ins-subnav-inner as a tap drawer instead. Dark-surface rule:
   label + icon bars pure #ffffff at opacity 1. */
.ins-subnav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 1.1rem;
  min-height: 48px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 27, 35, 0.2);
}

.ins-subnav-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
}

.ins-subnav-toggle-icon span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #ffffff;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.ins-subnav-toggle-icon span:nth-child(1) { top: 0; }
.ins-subnav-toggle-icon span:nth-child(2) { top: 6px; }
.ins-subnav-toggle-icon span:nth-child(3) { top: 12px; }

.ins-subnav-toggle[aria-expanded="true"] .ins-subnav-toggle-icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.ins-subnav-toggle[aria-expanded="true"] .ins-subnav-toggle-icon span:nth-child(2) {
  opacity: 0;
}

.ins-subnav-toggle[aria-expanded="true"] .ins-subnav-toggle-icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.ins-subnav-toggle-label {
  line-height: 1;
}

/* Attention pulse for the press CTA: soft diagonal shimmer + faint red
   glow ring, triggered by .is-attn (every second scroll gesture, JS). */
.ins-nav-press {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ins-nav-press::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -45%;
  bottom: -45%;
  left: -65%;
  width: 38%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(0) skewX(-22deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0)
  );
}

.ins-nav-press > span {
  position: relative;
  z-index: 2;
}

.ins-nav-press.is-attn {
  animation: ins-press-glow 1.1s ease both;
}

.ins-nav-press.is-attn::before {
  animation: ins-press-shimmer 1.1s ease both;
}

@keyframes ins-press-shimmer {
  0% {
    left: -65%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

@keyframes ins-press-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(227, 27, 35, 0);
  }
  45% {
    box-shadow: 0 0 0 4px rgba(227, 27, 35, 0.22);
  }
}

/* In-flow masthead title: the textual "Insights" identity (plain text,
   non-sticky) between the dark chrome and the dateline band. */
.ins-masthead-title {
  max-width: var(--ins-measure);
  margin: 0 auto;
  padding: 0.9rem 1.25rem 0.15rem;
  font-family: var(--ins-serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ins-ink);
}

@media (max-width: 980px) {
  .nav-logo img {
    height: 1.45rem;
  }
}

@media (max-width: 720px) {
  .nav-links a,
  .nav-cta,
  .lang-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 720px) and (pointer: coarse) {
  .nav-links a,
  .nav-cta,
  .lang-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :root {
    --ins-header-h: 77px;
  }

  body {
    padding-top: 77px;
  }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: inline-block;
  }

  .nav-links.nav-sections {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(6, 28, 56, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem 1.5rem 1rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.22s ease,
                opacity 0.2s ease,
                visibility 0s linear 0.22s;
    margin: 0;
    flex-wrap: nowrap;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    z-index: 999;
    display: flex;
  }

  .nav-links.nav-sections.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.22s ease,
                opacity 0.2s ease,
                visibility 0s linear 0s;
  }

  .nav-links.nav-sections > a,
  .nav-links.nav-sections > button {
    display: flex;
    align-items: center;
    padding: 0.9rem 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    min-height: 48px;
    color: #ffffff;
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    width: 100%;
    background: transparent;
    letter-spacing: 0.05em;
  }

  /* Active page item keeps its gold in the drawer (Alex 2026-07-20) — carry the
     desktop active-gold into the mobile hamburger; resting items stay white. */
  .nav-links.nav-sections > a[aria-current="page"] {
    color: #e3c178;
  }

  .nav-links.nav-sections > a:last-child,
  .nav-links.nav-sections > button:last-child {
    border-bottom: none;
  }

  .nav-links.nav-sections .lang-toggle {
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin: 0.5rem 0;
  }

  .nav-links.nav-sections .nav-cta {
    background: var(--rt-red, #e31b23) !important;
    color: #ffffff !important;
    margin-top: 0.5rem;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .nav#msn-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(6, 28, 56, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 200ms ease;
  }

  .nav#msn-nav.menu-open {
    background: rgba(6, 28, 56, 0.97);
  }

  /* Row-2 Insights section subnav collapses to a hamburger drawer on mobile.
     The old horizontal overflow bar was un-swipeable to its last items (the
     "Dla mediow" press-kit CTA especially). The toggle shows and
     .msn-subnav-inner becomes a tap drawer anchored to the now-relative bar,
     listing ALL items in the same order + hrefs. Desktop is untouched. */
  .msn-subnav {
    position: relative;
    top: auto;
  }

  .ins-subnav-toggle {
    display: flex;
  }

  .msn-subnav-inner {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    padding: 0.4rem 1.1rem 0.85rem;
    background: #14110e;
    border-bottom: 1px solid #000000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease,
                opacity 0.2s ease,
                visibility 0s linear 0.22s;
    z-index: 950;
  }

  .msn-subnav-inner.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.22s ease,
                opacity 0.2s ease,
                visibility 0s linear 0s;
  }

  .msn-subnav-inner > a,
  .msn-subnav-inner > button {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.9rem 0.5rem;
    min-height: 48px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    white-space: normal;
  }

  .msn-subnav-inner > a:first-child {
    margin-left: 0;
  }

  .msn-subnav-inner > *:last-child {
    border-bottom: none;
  }

  /* Print row: strip its desktop box border so it reads as a menu row. */
  .msn-subnav-inner > .ins-print-btn {
    margin-left: 0;
    justify-content: flex-start;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
  }

  /* Press-kit CTA stays visually distinct (red button) at the drawer foot. */
  .msn-subnav-inner > .msn-subnav-cta {
    margin-left: 0;
    margin-top: 0.5rem;
    justify-content: flex-start;
    background: #e31b23;
    border-radius: 4px;
  }

  .msn-subnav-inner > .msn-subnav-cta.active,
  .msn-subnav-inner > .msn-subnav-cta[aria-current="page"] {
    background: #ddc074;
  }
}

@media (max-width: 640px) {
  .nav-logo img {
    height: 1.25rem;
  }
}

@media (max-width: 480px) {
  .ins-print-full {
    display: none;
  }

  .ins-print-short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ins-nav-press,
  .ins-nav-press::before {
    animation: none !important;
  }
}

/* Dateline band sits BELOW the sticky bar and scrolls away with the page. */
.ins-dateline-band {
  border-bottom: 1px solid var(--ins-line);
}
.ins-dateline {
  max-width: var(--ins-measure);
  margin: 0 auto;
  font-family: var(--ins-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--ins-ink-muted);
  padding: 0.7rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.ins-edition-tag { color: var(--ins-red); text-transform: uppercase; letter-spacing: 0.08em; }
.ins-dateline-sep { color: var(--ins-line-strong); }

/* Page-local contents strip (dla-mediow "Na tej stronie") */
.ins-contents-strip {
  max-width: var(--ins-measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.15rem 1.25rem 1.1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ins-strip-label {
  font-family: var(--ins-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ins-ink-faint);
  white-space: nowrap;
  padding-right: 0.4rem;
}
.ins-strip-pill {
  font-family: var(--ins-sans);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ins-ink);
  border: 1px solid var(--ins-line);
  padding: 0.35rem 0.85rem;
  transition: border-color 150ms ease, color 150ms ease;
}
.ins-strip-pill:hover { border-color: var(--ins-red); color: var(--ins-red); }

/* Anchor offset: anchored sections must clear the sticky masthead. */
.ins-rail, .ins-lead, #main { scroll-margin-top: calc(var(--ins-header-h) + 0.75rem); }

/* ==========================================================================
   Main content shell
   ========================================================================== */

main#main {
  max-width: var(--ins-measure);
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}

.ins-eyebrow {
  display: inline-block;
  font-family: var(--ins-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ins-red);
  margin-bottom: 0.5rem;
}

.ins-byline {
  display: block;
  font-family: var(--ins-mono);
  font-size: 0.74rem;
  color: var(--ins-ink-faint);
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------
   Media boxes -- photos display in FULL, never cropped. Each MSN26 stage
   photo carries the MSN26 mark at the top and partner/sponsor logos at
   the bottom of the frame, so a cover-fit crop cuts that branding (and,
   on portrait shots, the subject's head) straight off. No forced
   aspect-ratio box; the box grows to the image's own natural size, capped
   by a per-context max-height (set inline by build.py's render_media())
   so a portrait photo doesn't dominate the layout.
   -------------------------------------------------------------------- */
.ins-media {
  position: relative;
  overflow: hidden;
  background: var(--ins-line);
  width: 100%;
}
.ins-media-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}
.ins-media-fallback {
  /* No aspect-ratio box to size against any more (see .ins-media above) --
     give the "no photo yet" placeholder its own floor so it still reads as
     a media slot instead of a thin sliver of text. */
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(150deg, #efe2d2, var(--ins-paper-raised));
  border: 1px solid var(--ins-line);
}
.ins-media-fallback-mark {
  font-family: var(--ins-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--ins-ink-faint);
  letter-spacing: 0.02em;
}
.ins-media-fallback-hint {
  font-family: var(--ins-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ins-ink-faint);
  text-align: center;
  padding: 0 1rem;
}
.ins-caption {
  font-family: var(--ins-sans);
  font-size: 0.78rem;
  color: var(--ins-ink-muted);
  padding: 0.5rem 0.1rem 0;
  line-height: 1.4;
}
.ins-caption-text::after { content: ""; }
.ins-credit {
  color: var(--ins-ink-faint);
  font-style: italic;
}

/* ==========================================================================
   Lead story -- asymmetric grid, the page's one loud editorial gesture.
   ========================================================================== */

.ins-lead {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.25rem;
  align-items: start;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--ins-line);
  margin-bottom: 2.25rem;
}
.ins-lead-body { display: flex; flex-direction: column; padding-top: 0.2rem; }
.ins-lead-title {
  font-family: var(--ins-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  color: var(--ins-ink);
  margin-bottom: 0.9rem;
}
.ins-lead-dek {
  font-family: var(--ins-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ins-ink);
}
.ins-dropcap {
  float: left;
  font-family: var(--ins-serif);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.03em 0.09em 0 0;
  color: var(--ins-red);
}
.ins-read-more {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--ins-mono);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-red);
  padding-bottom: 0.15rem;
  align-self: flex-start;
}
.ins-read-more:hover { color: var(--ins-red); }

/* ==========================================================================
   Second front -- two supporting cards, image-forward, no dropcap.
   ========================================================================== */

.ins-second-front {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--ins-line);
}

.ins-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ins-card-title {
  font-family: var(--ins-serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0.7rem 0 0.4rem;
  color: var(--ins-ink);
}
.ins-card-second .ins-card-title { font-size: 1.45rem; }
.ins-card-dek {
  font-family: var(--ins-sans);
  font-size: 0.92rem;
  color: var(--ins-ink-muted);
  line-height: 1.45;
}
.ins-card:hover .ins-card-title { color: var(--ins-red); }

/* ==========================================================================
   Section rails
   ========================================================================== */

.ins-rail { padding: 0 0 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--ins-line); }
.ins-rail:last-of-type { border-bottom: none; }
.ins-rail-title {
  font-family: var(--ins-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}
/* Section header: SSOT title + gallery cross-link(s) + GEO question + intro */
.ins-rail-head { margin-bottom: 1.2rem; }
.ins-rail-head .ins-rail-title { margin-bottom: 0; }
.ins-rail-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  border-bottom: 2px solid var(--ins-ink);
  padding-bottom: 0.5rem;
}
.ins-rail-head-row .ins-rail-title { border-bottom: none; padding-bottom: 0; }
.ins-rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
}
.ins-rail-gallery {
  font-family: var(--ins-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ins-ink-muted);
  border-bottom: 2px solid var(--ins-red);
  padding-bottom: 0.1rem;
}
.ins-rail-gallery:hover { color: var(--ins-red); }
.ins-rail-question {
  font-family: var(--ins-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ins-ink);
  margin-top: 0.8rem;
}
.ins-rail-intro {
  max-width: 72ch;
}
.ins-rail-intro p {
  font-family: var(--ins-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ins-ink-muted);
  margin-top: 0.5rem;
}

.ins-rail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.ins-rail-empty {
  font-family: var(--ins-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ins-ink-muted);
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--ins-line-strong);
  background: var(--ins-paper-raised);
}
.ins-rail-empty a { color: var(--ins-red); text-decoration: none; border-bottom: 1px solid var(--ins-red); }

/* ==========================================================================
   Pull-quote -- signature component, oversized quotation mark.
   ========================================================================== */

.ins-pullquote {
  position: relative;
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 2.2rem;
  border-left: 3px solid var(--ins-red);
}
.ins-pullquote::before {
  content: "\201C";
  position: absolute;
  left: -0.15rem;
  top: -0.9rem;
  font-family: var(--ins-serif);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--ins-red);
  opacity: 0.85;
}
.ins-pq-text p {
  font-family: var(--ins-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ins-ink);
}
.ins-pq-attrib {
  margin-top: 0.6rem;
  font-family: var(--ins-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ins-ink-muted);
}

.ins-pq-strip { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--ins-line); }
.ins-strip-heading {
  display: block;
  font-family: var(--ins-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.4rem;
}
.ins-pq-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem 2.25rem;
}
.ins-pq-strip-grid .ins-pullquote { margin: 0; }

/* ==========================================================================
   Photo band -- contact sheet + native <dialog> lightbox
   ========================================================================== */

.ins-photoband { padding-bottom: 1rem; }
.ins-article-photoband { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--ins-line); }
.ins-article-photoband .ins-gallery-link { margin-right: 1.25rem; }
.ins-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ins-photo-thumb {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.ins-photo-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
  transition: opacity 150ms ease;
}
.ins-photo-thumb:hover img { opacity: 0.82; }
.ins-gallery-link {
  display: inline-block;
  font-family: var(--ins-mono);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-red);
  padding-bottom: 0.15rem;
}
.ins-gallery-link:hover { color: var(--ins-red); }

.ins-lightbox {
  /* The page's global "* { margin:0 }" reset wipes the browser's native
     dialog auto-centering (UA default: position:fixed; inset-block:0;
     width/height:fit-content; margin:auto -- vertical centering comes from
     inset-block + margin:auto, horizontal from width:fit-content + margin:auto
     with left/right left unconstrained). Only inset-block + margin need
     restating; a full inset:0 would force-stretch the box and break it. */
  position: fixed;
  inset-block: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: none;
  padding: 0;
  max-width: min(90vw, 900px);
  max-height: 88vh;
  background: var(--ins-ink);
  color: #fff;
}
.ins-lightbox::backdrop { background: rgba(10, 8, 6, 0.82); }
.ins-lightbox img { width: 100%; max-height: 74vh; object-fit: contain; background: #000; }
.ins-lightbox .ins-caption { color: #d8d0c8; padding: 0.7rem 1rem; }
.ins-lightbox .ins-credit { color: #a89a8d; }
.ins-lightbox-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.ins-lightbox-close:hover { background: var(--ins-red); }

/* ==========================================================================
   "Front page in production" empty state
   ========================================================================== */
.ins-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  font-family: var(--ins-serif);
}
.ins-empty-state h2 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.ins-empty-state p { color: var(--ins-ink-muted); font-family: var(--ins-sans); }

/* ==========================================================================
   Article page
   ========================================================================== */

.ins-article-head { max-width: 760px; margin: 1.4rem auto 0; text-align: left; }
.ins-article .ins-media { margin: 0 auto; max-width: var(--ins-measure); }
.ins-article-title {
  font-family: var(--ins-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  margin: 0.6rem 0 0.9rem;
}
.ins-article-dek {
  font-family: var(--ins-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ins-ink-muted);
  line-height: 1.5;
}
.ins-byline-article {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ins-line);
}

.ins-article-body {
  max-width: 700px;
  margin: 2.2rem auto 0;
  font-family: var(--ins-sans);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ins-ink);
}
.ins-article-body p { margin-bottom: 1.15rem; }
.ins-subhead {
  font-family: var(--ins-serif);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 1.9rem 0 0.9rem;
  color: var(--ins-ink);
}
.ins-list {
  margin: 0 0 1.15rem 1.3rem;
  padding: 0;
}
.ins-list li { margin-bottom: 0.45rem; }
.ins-quote {
  font-family: var(--ins-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ins-ink-muted);
  border-left: 3px solid var(--ins-line-strong);
  padding-left: 1.1rem;
  margin: 1.4rem 0;
}
.ins-article-body .ins-pullquote { max-width: 700px; }

.ins-article-nav {
  max-width: var(--ins-measure);
  margin: 2.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ins-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  font-family: var(--ins-mono);
  font-size: 0.82rem;
}
.ins-article-nav a { text-decoration: none; color: var(--ins-ink); }
.ins-article-nav a:hover { color: var(--ins-red); }
.ins-nav-hub { flex-basis: 100%; order: -1; color: var(--ins-ink-muted); }

/* ==========================================================================
   Share row (article pages + press kit)
   ========================================================================== */

.ins-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
}
.ins-share-label {
  font-family: var(--ins-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ins-ink-faint);
  padding-right: 0.25rem;
}
.ins-share-btn {
  font-family: var(--ins-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ins-ink-muted);
  background: transparent;
  border: 1px solid var(--ins-line-strong);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.ins-share-btn:hover { border-color: var(--ins-ink); color: var(--ins-ink); }
/* Twin per-language mailto anchors (hrefs differ by language): keep the
   button box model when the i18n rules flip them to "inline". */
html[data-lang="pl"] a.ins-share-btn.i18n-inline[lang="pl"],
html[data-lang="en"] a.ins-share-btn.i18n-inline[lang="en"] { display: inline-block; }
.ins-share-copy-done { display: none; color: var(--ins-red-dark); }
.ins-share-copy.is-copied .ins-share-copy-idle { display: none; }
.ins-share-copy.is-copied .ins-share-copy-done { display: inline; }

/* ==========================================================================
   Tag rail (article pages)
   ========================================================================== */

.ins-tagrail {
  max-width: 700px;
  margin: 2.2rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ins-line);
}
.ins-tagrail-heading {
  display: block;
  font-family: var(--ins-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ins-ink-faint);
}
.ins-tagrail-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.4rem;
  margin-top: 0.65rem;
}
.ins-tag-label {
  font-family: var(--ins-mono);
  font-size: 0.72rem;
  color: var(--ins-ink-muted);
  padding-right: 0.35rem;
}
.ins-tag {
  display: inline-block;
  font-family: var(--ins-sans);
  font-size: 0.78rem;
  color: var(--ins-ink);
  border: 1px solid var(--ins-line);
  padding: 0.2rem 0.6rem;
}
a.ins-tag {
  text-decoration: none;
  border-color: var(--ins-line-strong);
}
a.ins-tag:hover { color: var(--ins-red); border-color: var(--ins-red); }

/* ==========================================================================
   Canonical RT footer -- ported verbatim from ../css/overrides.css .cf-footer
   (dark surface; pure white / gold text, explicit -- never inherited).
   ========================================================================== */

.cf-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3.5rem 0 2.5rem;
  background: #061c38;
  color: #ffffff;
  width: 100%;
  margin: 3rem 0 0;
  text-align: left;
  font-family: var(--ins-sans);
}
.cf-footer .cf-container { width: min(1160px, calc(100vw - 2rem)); margin: 0 auto; padding: 0 1rem; }
.cf-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.cf-footer-brand img { display: block; height: 32px; width: auto; }
.cf-footer-brand p { color: #b0aca8; font-size: 0.88rem; line-height: 1.55; margin-top: 0.8rem; max-width: 420px; }
.cf-footer h4 {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #c5a55a; margin: 0 0 0.9rem; font-family: var(--ins-mono);
}
.cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) { display: flex; flex-direction: column; gap: 0.55rem; }
.cf-footer a { color: #b0aca8; font-size: 0.86rem; text-decoration: none; transition: color 150ms ease; }
.cf-footer a:hover { color: #ffffff; }
.cf-footer span { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }
.cf-footer-cta { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
.cf-footer-cta-label { color: #c5a55a; font-family: var(--ins-mono); font-size: 0.7rem; letter-spacing: 0.1em; }
.cf-footer-cta-link { display: flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.12); transition: border-color 180ms ease; }
.cf-footer-cta-link:hover { border-color: rgba(197, 165, 90, 0.5); }
.cf-footer-cta-fauxinput { flex: 1; padding: 0.7rem 0.9rem; color: #9a9a9a; font-size: 0.85rem; }
.cf-footer-cta-btn { padding: 0.7rem 0.9rem; background: rgba(197, 165, 90, 0.12); color: #c5a55a; font-size: 0.82rem; white-space: nowrap; }
.cf-footer-cta-help { color: #9a9a9a; font-size: 0.78rem; line-height: 1.5; }
.cf-footer a.cf-footer-cta-partner { color: #c5a55a; }
.cf-footer a.cf-footer-cta-partner:hover { color: #d4b84a; }
.cf-footer a.cf-footer-event-featured { color: #c5a55a; font-weight: 600; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.cf-footer a.cf-footer-event-featured:hover { color: #d4b84a; }
.cf-footer-event-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ddc074; }

@media (max-width: 980px) {
  .cf-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-lead { grid-template-columns: 1fr; }
  .ins-second-front { grid-template-columns: 1fr; }
  .ins-rail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .cf-footer-grid { grid-template-columns: 1fr; text-align: center; }
  .cf-footer-brand { display: flex; flex-direction: column; align-items: center; }
  .cf-footer-brand img { margin: 0 auto; }
  .cf-footer-brand p { margin-left: auto; margin-right: auto; max-width: none; }
  .cf-footer-cta { margin-left: auto; margin-right: auto; }
  .cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) { align-items: center; }

  .ins-rail-grid { grid-template-columns: 1fr; }
  .ins-photo-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .ins-article-nav { flex-direction: column; }
}

/* Compact title + dateline at handset widths (375px target). */
@media (max-width: 480px) {
  .ins-masthead-title { font-size: 1.35rem; padding: 0.75rem 0.875rem 0.1rem; }
  .ins-dateline { padding: 0.55rem 0.875rem; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Print -- "take the edition home"
   ========================================================================== */
@media print {
  .skip-nav,
  .nav,
  .nav-hamburger,
  .nav-links,
  .msn-subnav,
  .ins-subnav,
  .ins-print-btn,
  .ins-contents-strip,
  .ins-share,
  .ins-tagrail,
  .ins-photoband,
  .ins-lightbox,
  .ins-article-nav,
  .cf-footer-cta,
  .cf-footer-event-dot {
    display: none !important;
  }
  /* The chrome is hidden on paper; the printout identity is carried by the
     in-flow "Insights" title + dateline bands. */
  body { padding-top: 0 !important; background: #fff; color: #000; }
  .cf-footer { background: #fff; color: #000; border-top: 1px solid #000; }
  .cf-footer a, .cf-footer span, .cf-footer h4 { color: #000 !important; }
  .ins-lead, .ins-rail, .ins-second-front, .ins-pq-strip { border-bottom-color: #ccc; }
  .ins-media { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   Journalist kit (dla-mediow/) + hub press band
   ========================================================================== */

.ins-kit-section { scroll-margin-top: calc(var(--ins-header-h) + 0.75rem); }
.ins-kit-section .ins-article-body { margin-top: 1.7rem; }

.ins-kit-note {
  font-family: var(--ins-mono);
  font-size: 0.8rem;
  color: var(--ins-ink-muted);
  margin-top: 0.35rem;
}

.ins-press-band {
  max-width: var(--ins-measure);
  margin: 0 auto;
  padding: 1.5rem 0 0.25rem;
  border-top: 1px solid var(--ins-line);
  text-align: center;
}
.ins-press-link {
  display: inline-block;
  font-family: var(--ins-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-red);
  padding-bottom: 0.2rem;
}
.ins-press-link:hover { color: var(--ins-red); }

@media print {
  .ins-press-band { display: none; }
}

/* ==========================================================================
   Canonical subnav travelling light + headroom show/hide
   Cloned from the event site's css/overrides.css (MSN unified second-tier
   sub-nav block); driven by the SHARED ../js/subnav.js -- one full lap of
   the golden comet around .msn-subnav-inner (which is position:relative
   above, so the ::before ring anchors correctly), plus scroll-direction
   show/hide.
   ========================================================================== */
@property --msn-sweep { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
/* scroll-direction show/hide ("headroom") -- JS toggles .is-hidden on scroll
   down/up; translateY(-120%) lifts the sticky bar fully out of view above its
   slot. JS owns the toggle; CSS owns the transition. */
.msn-subnav, .phx-subnav { transition: transform .28s ease, opacity .28s ease; }
.msn-subnav.is-hidden, .phx-subnav.is-hidden {
  transform: translateY(-120%); opacity: 0; pointer-events: none;
}
/* continuous travelling light around the inner bar -- the --msn-sweep angle is
   driven by subnav.js (slow resting orbit, boosts on mouse movement, then eases
   back to slow). JS owns the motion so animation is none here. */
.msn-subnav.lit .msn-subnav-inner::before {
  content: ''; position: absolute; inset: 0; padding: 2px; border-radius: 5px;
  background: conic-gradient(from var(--msn-sweep),
     transparent 0deg, transparent 280deg,
     rgba(255,216,122,.55) 305deg, #ffe9b0 330deg, #fff 345deg, #fff 352deg,
     rgba(255,233,176,.6) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255,224,150,.95));
  animation: none; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .msn-subnav.lit .msn-subnav-inner::before { animation: none; }
}

/* ==========================================================================
   Gallery CTA card -- dla-mediow/ (press kit) prompt to browse the MSN26
   Gallery grouped by session. Added 2026-07-19, scoped under
   .ins-gallery-cta only; does not touch any existing rule above.
   ========================================================================== */
.ins-gallery-cta {
  max-width: 700px;
  margin: 1.6rem auto 2.1rem;
  padding: 1.6rem 1.8rem;
  background: var(--ins-paper-raised);
  border: 1px solid var(--ins-line);
  border-left: 4px solid var(--ins-red);
}
.ins-gallery-cta-eyebrow {
  display: block;
  font-family: var(--ins-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ins-red);
  margin-bottom: 0.55rem;
}
.ins-gallery-cta-headline {
  font-family: var(--ins-serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ins-ink);
  margin: 0 0 0.55rem;
}
.ins-gallery-cta-sub {
  font-family: var(--ins-sans);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ins-ink-muted);
  margin: 0 0 1.15rem;
}
.ins-gallery-cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}
.ins-gallery-cta-chip {
  display: inline-block;
  font-family: var(--ins-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ins-ink);
  background: #ffffff;
  border: 1px solid var(--ins-line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ins-gallery-cta-chip:hover,
.ins-gallery-cta-chip:focus-visible {
  border-color: var(--ins-red);
  color: var(--ins-red);
}
.ins-gallery-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ins-red);
  color: #ffffff;
  font-family: var(--ins-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--ins-red);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.ins-gallery-cta-btn:hover,
.ins-gallery-cta-btn:focus-visible {
  background: var(--ins-red-dark);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(227, 27, 35, 0.35);
}
@media (max-width: 640px) {
  .ins-gallery-cta { padding: 1.3rem 1.2rem; }
  .ins-gallery-cta-headline { font-size: 1.2rem; }
}

/* ==========================================================================
   B2BV2V26 London deviations
   --------------------------------------------------------------------------
   Everything ABOVE this line is the RealTimes Insights engine stylesheet,
   copied BYTE-FOR-BYTE from
     events/msn26-warsaw/website/Insights/css/insights.css
     (md5 ac31c7dd5754da57a300862990a17220, 1756 lines)
   and must never be edited in place. Every London-specific change lives here,
   below the canon, each with the reason it exists.

   WHY DEVIATIONS ARE NEEDED AT ALL: MSN26 Insights is a SELF-CONTAINED
   minisite. Its pages load insights.css and NOTHING else, which is why the
   canon re-implements the whole site chrome (.nav, .nav-links, .skip-nav,
   .cf-footer, body offset). The London Insights pages are NOT a minisite:
   they are two pages inside an 11-page site and they load css/style.css
   FIRST, for the nav, the event strip, the canonical footer and the
   WhatsApp / calendar floats that every sibling page carries. Because
   insights.css loads second, its chrome copy would silently overwrite
   London's. Section 1 hands that chrome back to style.css. Sections 2-4 are
   the three genuine London differences.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CHROME OWNERSHIP: css/style.css owns nav + footer on this site.
   Selectors below are `body`-prefixed on purpose: (0,1,x) beats the canon's
   (0,1,1) chrome rules regardless of source order or media-query position,
   while still losing to London's own more specific rules (.nav.scrolled,
   .nav .btn-red, .nav-links a:not(.btn-red)), which therefore keep working
   untouched. No canon rule is edited; control is simply returned.
   -------------------------------------------------------------------------- */

/* 1a. Nav height. The canon assumes MSN26's 74px bar. London's bar is 76px
   (style.css:151 --nav-h, Alex bumped 64 -> 76 on 2026-08-14). Driving both
   the body offset and the sticky sub-bar from the token means the two can
   never drift apart again. THIS IS THE SUBNAV UNDERLAP FIX: both pages
   previously hardcoded `top: 64px` against a 76px bar, a 12px underlap. */
body { padding-top: var(--nav-h-rest); }
.msn-subnav { top: var(--nav-h); }

/* 1a-bis. MASTHEAD CLIP FIX (measured 2026-08-16, both pages, 375x812).
   The rule directly above is UNSCOPED, so it also landed inside the canon's
   <=768px block, where the canon deliberately drops the sub-bar OUT of sticky:

     @media (max-width: 768px) { .msn-subnav { position: relative; top: auto; } }
     (canon insights.css:750-753)

   Same specificity (0,1,0), but the deviation is later in the file, so
   `top: var(--nav-h)` won and the bar became `position:relative; top:76px`.
   A relative offset does NOT reflow: the bar keeps its 49px slot at y152-201
   and merely PAINTS 76px lower, at y228-277, straight over the masthead
   (y201-238) -- an opaque #14110e band cutting the word "Insights" in half,
   with a 76px hole left where the bar should have been. Measured before:
     subnav y228-277 vs .ins-masthead-title y201-238  => 10px overlap
   Restoring the canon value fixes both pages at once (shared stylesheet) and
   is inert on desktop, where the bar is `position: sticky` and 1a still
   supplies the 76px sticky threshold. Scoped to the canon's own breakpoint so
   the two can never disagree again.
   Measured after: subnav y152-201, masthead y201-238 -- flush, zero overlap. */
@media (max-width: 768px) {
  .msn-subnav { top: auto; }
}

/* 1b. Anchor scroll offset must clear BOTH bars. Canon 123px = 74 nav + 49
   subnav; London = 76 + 49 = 125px. Below 768px the canon drops the subnav to
   static and only the fixed nav remains: 76px + a hair. */
:root { --ins-header-h: 125px; }
@media (max-width: 768px) { :root { --ins-header-h: 78px; } }

/* 1c. The bar itself. The canon lays out .nav directly (flex + padding +
   translucent charcoal + blur); London lays out .nav-inner instead and paints
   .nav from its own tokens, adding the blur only via .nav.scrolled. Reset the
   canon's layout/paint so style.css:298 governs again. */
body .nav {
  display: block;
  padding: 0;
  gap: normal;
  background: var(--seashell);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  font-family: var(--font-sans);
  z-index: 100;
}

/* 1d. Wordmark. Canon sizes it by HEIGHT (1.75rem, plus a 1.45rem step at
   980px). London sizes it by WIDTH (140px desktop / 100px at 720px) because
   the asset is a 2.1359:1 SVG lockup; a height-driven rule letterboxes it. */
body .nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0;
  text-decoration: none;
  touch-action: manipulation;
}
body .nav-logo img,
body .nav-logo picture {
  width: 140px;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 720px) {
  body .nav-logo img,
  body .nav-logo picture { width: 100px; }
}

/* 1e. Desktop link gap only. Scoped to >=721px deliberately: below that,
   style.css turns .nav-links into a fixed full-width drawer with gap:0, and an
   unscoped override here would beat it and re-open the gap inside the drawer. */
@media (min-width: 721px) {
  body .nav-links { gap: 1.6rem; }
}

/* 1f. Kill the canon's gold underline sweep on every nav link. London's nav
   has no underline convention; it signals state with full-brightness gold ink
   (style.css:378). The canon's ::after would paint a gold bar under all seven
   links. London's own .nav-links .nav-parent::after (the dropdown caret, at a
   higher 0,2,1) is unaffected and still renders. */
body .nav-links a::after { content: none; }

/* 1g. Canonical RT footer. The canon carries its own .cf-footer port whose ink
   is grey (#b0aca8 links, rgba(255,255,255,0.6) spans). That is a DARK-SURFACE
   INK LAW breach on this site (style.css:63-71, SAR-2026-07-31: on dark, text
   is pure #ffffff and accents are full-brightness gold, never grey), and its
   geometry differs too (width:100% + margin-top:3rem vs London's edge-to-edge
   100vw, margin:0). Restore London's footer exactly as the other 11 pages
   render it. Values copied verbatim from css/style.css. */
body .cf-footer {
  border-top: 1px solid var(--rt-line);
  background: var(--background);
  color: var(--on-dark-primary);
  width: 100vw;
  max-width: none;
  margin: 0;
  font-family: var(--font-sans);
}
body .cf-footer a { color: var(--on-dark-primary); transition: color 0.15s ease; }
body .cf-footer a:hover { color: var(--rt-gold-bright); }
body .cf-footer span { color: var(--on-dark-primary); }
body .cf-footer h4 { color: var(--rt-gold); font-family: var(--font-mono); }
body .cf-footer .cf-footer-brand p { color: var(--on-dark-primary); }
body .cf-footer .cf-footer-cta-label {
  color: var(--rt-gold);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
body .cf-footer .cf-footer-cta-link { border: 1px solid var(--rt-line); overflow: hidden; }
body .cf-footer .cf-footer-cta-link:hover { border-color: var(--rt-gold-45); }
body .cf-footer .cf-footer-cta-fauxinput { color: var(--on-dark-primary); }
body .cf-footer .cf-footer-cta-btn { background: var(--rt-gold-12); color: var(--rt-gold-bright); }
body .cf-footer .cf-footer-cta-help { color: var(--on-dark-primary); }
body .cf-footer a.cf-footer-cta-partner { color: var(--rt-gold); }
body .cf-footer a.cf-footer-cta-partner:hover { color: var(--rt-gold-bright); }
body .cf-footer a.cf-footer-event-featured { color: var(--rt-gold); }
body .cf-footer a.cf-footer-event-featured:hover { color: var(--rt-gold-bright); }
body .cf-footer .cf-footer-event-dot {
  background: var(--rt-gold-bright);
  box-shadow: 0 0 0 0 var(--rt-gold-60);
  animation: cf-footer-pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body .cf-footer .cf-footer-event-dot { animation: none; }
}

/* 1h. HEADING-TYPOGRAPHY OWNERSHIP: undo style.css's ELEMENT-level h2/h3 leak.
   Found by a full computed-style diff of every shared .ins-* class against the
   LIVE MSN26 hub + article (37 hub classes, 29 article classes). All but four
   were byte-identical; those four shared ONE root cause.

   css/style.css:223-232 styles the BARE TAGS site-wide:
     h2 { letter-spacing: -0.02em; line-height: 1.12; ... }
     h3 { letter-spacing: -0.01em; ... }
   The canon deliberately leaves letter-spacing (and, on two components, line-
   height) UNSET so they fall back to `normal` / the inherited unitless ratio.
   On MSN26 nothing competes, so that is what renders. On London the bare-tag
   rules have nothing to lose to -- the canon never declares those properties --
   so they win by default and silently restyle the component. Same class names,
   wrong computed values: the exact hollow-clone failure this rebuild exists to
   avoid, and invisible to any check that only greps for class names.

   Measured London-before vs MSN26-live (1440x900):
     .ins-rail-title  line-height    15.232px  vs  21.08px   (13.6 x 1.12 vs x1.55)
     .ins-subhead     line-height    25.088px  vs  38.08px   (22.4 x 1.12 vs x1.70)
     .ins-lead-title  letter-spacing -0.928px  vs  normal
     .ins-card-title  letter-spacing -0.208px  vs  normal
   Each rule below restores ONLY the property the canon left unset; the ones the
   canon DOES declare are untouched (.ins-rail-title keeps its own 0.1em
   letter-spacing, .ins-lead-title and .ins-card-title keep their own 1.12/1.25
   line-heights). `inherit` is used rather than a hardcoded ratio so the value
   keeps tracking its container exactly as the canon intends -- .ins-rail-title
   from body (1.55) and .ins-subhead from .ins-article-body (1.7).
   Class selectors (0,1,0) beat the bare tags (0,0,1), so this holds regardless
   of load order and does not touch style.css.
   Verified after: all four now equal the live MSN26 values exactly. */
.ins-rail-title { line-height: inherit; }
.ins-subhead { line-height: inherit; letter-spacing: normal; }
.ins-lead-title { letter-spacing: normal; }
.ins-card-title { letter-spacing: normal; }

/* --------------------------------------------------------------------------
   2. ONE-ARTICLE GRID
   Canon pins .ins-rail-grid to repeat(3, 1fr) because MSN26 shipped 11 cards
   across five rails, so every row was full. London's rails carry ONE card
   (Vision, Dialogue, Value) or TWO ("Ahead of the evening"); a fixed 3-track
   grid renders one card at a third width beside two dead columns. auto-fill +
   minmax is count-independent: 1 card fills the row, 2 split it, 3+ wrap
   exactly as the canon does, so the rail needs no edit when a piece publishes.
   The canon's own 980px/720px step-downs become no-ops (they set 2 and 1
   tracks; auto-fill already resolves to that at those widths) and are left in
   place untouched rather than deleted.
   -------------------------------------------------------------------------- */
.ins-rail-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 980px) { .ins-rail-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } }
@media (max-width: 720px) { .ins-rail-grid { grid-template-columns: 1fr; } }

/* auto-FIT, not auto-FILL. MEASURED, not assumed: auto-fill was tried first and
   still resolved a one-card rail to `354.656px 354.672px 354.656px` at 1440px,
   i.e. the card at a third width beside two EMPTY tracks, which is the exact
   defect this section exists to remove. auto-fill reserves empty tracks;
   auto-fit collapses them. */

/* A lone card must not stretch the full 1110px measure either: at that width a
   16:9 card image is ~624px tall and reads as a hero, not a card. Cap the
   single-card case at roughly the two-column width so one card, two cards and
   three cards all read as the same component. Uses :has(), already relied on a
   few rules below for the publish-state toggle. */
.ins-rail-grid:has(> :only-child) { grid-template-columns: minmax(0, 620px); }
@media (max-width: 720px) { .ins-rail-grid:has(> :only-child) { grid-template-columns: 1fr; } }

/* Canon's .ins-lead is a 1.35fr / 1fr split built for a photo-led front page.
   London's lead has no published story behind it yet, so the same split with a
   single 16:9 image is correct and unchanged. Only the second-front rule needs
   the same count-independence, for the day a second lead piece publishes. */
.ins-second-front { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* --------------------------------------------------------------------------
   3. LONDON-ONLY COMPONENTS the canon has no equivalent for.
   MSN26 Insights is a POST-event recap: every card links to a published piece.
   London Insights is a PRE-event hub, so it must show pieces that exist but
   are not published yet, without ever implying they can be read today. That
   forthcoming-card state has no canon counterpart. Styled from canon tokens
   only (--ins-*), so it reads as part of the same publication.
   -------------------------------------------------------------------------- */

/* 3a. The brand is lowercase "b2bv2v26" by house style. Canon uppercases
   .ins-rail-title / .ins-masthead-title; this opts a span back out. */
.ins-keepcase { text-transform: none; }

/* 3b. Status tag. Solid = recap coverage that cannot exist until after the
   evening; outlined = a pre-event piece actively in preparation. Two visually
   distinct states so a prospective ticket buyer is never told that recap
   coverage is available early. */
.ins-mod-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.5rem;
  font-family: var(--ins-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ins-paper);
  background: var(--ins-ink-muted);
  padding: 0.22rem 0.6rem;
}
.ins-mod-tag.is-forthcoming {
  color: var(--ins-red);
  background: transparent;
  border: 1px solid var(--ins-red);
}

/* 3c. Card call-to-action. The anchor is HIDDEN while it carries no href, so
   publishing a piece is a one-attribute edit: add href and the link appears
   while the "in preparation" tag and the not-published note hide themselves.
   Nothing else in the card changes, and an unpublished card can never link. */
.ins-card-cta {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--ins-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ins-ink);
  border-bottom: 2px solid var(--ins-red);
  padding-bottom: 0.12rem;
  align-self: flex-start;
}
.ins-card-cta:hover, .ins-card-cta:focus-visible { color: var(--ins-red); }
.ins-card-cta:not([href]) { display: none; }
.ins-card-forthcoming:has(.ins-card-cta[href]) .ins-forthcoming-only { display: none; }

/* 3d. Canon .ins-card is an <a> wrapping the whole card. A forthcoming card
   must NOT be a link (there is nothing to link to yet), so London renders it
   as an <article> with an inner .ins-card-cta. Restore the column flow the
   anchor version got for free, so the tag and CTA can align to the start. */
.ins-card-rail .ins-card-body,
.ins-card-forthcoming .ins-card-body { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   4. ARTICLE PAGE: nothing to add. The Peter Murray piece uses the canon
   article system as-is (.ins-article / .ins-article-head / .ins-article-title
   / .ins-article-body / .ins-subhead / .ins-list / .ins-pullquote /
   .ins-dropcap / .ins-byline-article / .ins-article-nav / .ins-nav-hub). The
   previous build's parallel .art-* typography layer is deleted, not ported:
   it was a re-implementation of exactly these rules.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. TWO-BAR CHROME: flush, and both bars permanently on.
   Alex, 2026-08-17, looking at the deployed hub: "the secondary nav must be
   right below the main menu and stuck there all the time ... this seashell
   line between the main menu and secondary nav is not needed ... primary
   always on and then secondary when we go to Insights always on as well".
   -------------------------------------------------------------------------- */

/* 5a. THE SEASHELL STRIP: a double offset, not a design choice. Two different
   conventions for clearing the fixed nav both fired at once.

     style.css:3135-3138 (the 7 sibling pages that carry a sub-bar)
       .msn-subnav { top: var(--nav-h); margin-top: var(--nav-h-rest); }
       -- body has NO padding-top on those pages, so the subnav, being the
          first in-flow element, clears the fixed nav with its own margin.

     insights.css deviation 1a (the canon's convention)
       body { padding-top: var(--nav-h-rest); }
       -- the canon clears the nav on <body>, and its .msn-subnav carries no
          margin at all, because MSN26 Insights never loads style.css.

   London Insights loads BOTH stylesheets, so it paid the 76px twice: 76 of
   body padding + 76 of subnav margin. Measured live at 1440x900 before:
     .nav      y0-77      (fixed, 76px + 1px border)
     GAP       y77-152    <- 75px of empty --seashell, the strip Alex flagged
     .msn-subnav y152-202
   Dropping the margin is the correct half to remove: body padding-top works on
   both Insights pages whether or not a sub-bar is present, whereas the margin
   convention silently depends on the subnav being first in flow. Scoped here,
   so the 7 sibling pages keep style.css's convention untouched.
   Measured after: nav y0-77, subnav y76-126, masthead y126- -- flush. */
.msn-subnav { margin-top: 0; }

/* 5b. Layer the sub-bar UNDER the main nav. The canon gives it z-index 900
   (MSN26's own nav is z-100 in the same file, but there the bar never has to
   pass beneath a 1px-bordered 77px bar). London's nav is z-100 and renders
   77px tall, one pixel more than --nav-h, so at z-900 the sub-bar's top pixel
   painted over the nav's bottom border. style.css:3139 already chose 90 for
   exactly this reason ("below the fixed nav(100)+ticker(99) so it slides under
   them"); match it. */
.msn-subnav { z-index: 90; }

/* 5c. ALWAYS ON. subnav.js implements the "headroom" pattern: scrolling down
   adds .is-hidden, which the canon (insights.css:1646) and style.css:3145 both
   translate -120% and fade out; scrolling up brings it back. Alex rejected that
   explicitly -- the section nav must be reachable at every scroll position, not
   only after an upward gesture. Neutralising the two .is-hidden rules is the
   whole fix: JS keeps toggling a class that no longer paints anything, so no
   shared file is touched and the behaviour is one line from being restored.

   DELIBERATE DEVIATION FROM MSN26, on Alex's instruction. MSN26 Insights does
   hide its bar on scroll-down; London does not. Everything else about the bar
   stays canon.

   Cost of the decision, measured: 76px nav + 50px sub-bar = 126px of permanent
   chrome, 14% of a 900px desktop viewport. Accepted -- the hub and the article
   are both long scrolls whose whole navigation lives in that bar.

   NOTE ON MOBILE: the canon drops the bar out of sticky below 768px
   (insights.css:750, `position: relative`), so on a phone it scrolls away with
   the page regardless of this rule, and only the 76px nav stays fixed. That is
   canon MSN26 behaviour and it is left alone deliberately: 126px of an 812px
   phone viewport is 15.5%, and at that width the bar has already collapsed to a
   "Sections" toggle. Desktop gets always-on; mobile keeps the canon. */
.msn-subnav.is-hidden {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* 5d. ARTICLE IN-BODY ANCHOR CLEARANCE — a regression from the 2026-08-16
   rebuild, caught by live QA 2026-08-17, NOT pre-existing.

   The article's sub-nav links point at in-body headings, `<h2 class=
   "ins-subhead" id="cost">` and four siblings. Nothing was giving them a
   scroll offset, so a native anchor jump aligned the heading's top edge with
   y=0 -- behind the 126px nav+sub-bar stack. Measured live on a fresh single
   navigation: #cost landed at y81, #difference at y119, both inside the 76-126
   band. Clicking "Cost" in the sub-bar scrolled to a heading the reader could
   not see. In-page navigation on the article was simply broken.

   Two rules should have covered it and neither can:
     - style.css:3193  `body:has(.msn-subnav) section[id]` -- targets SECTIONS
       only, and says so on purpose ("Deliberately NOT [id], that would put a
       160px scroll-margin on every form field"). The hub's targets ARE
       <section id> and correctly get 172px; the article's are <h2 id> and get
       nothing. That asymmetry is the whole defect.
     - insights.css:922 + 1599 -- the canon offsets .ins-rail, .ins-lead, #main
       and .ins-kit-section. MSN26's sub-bar links to sections, so the canon
       never needed a rule for a bare in-body heading and does not have one.

   HOW I INTRODUCED IT: the pre-rebuild article carried exactly this rule
   inside its 308-line inline <style> block. I deleted that block wholesale
   when linking the engine stylesheet, and neither the canon nor style.css
   picked the shape up. Restoring the identical expression rather than a new
   number, so the offset keeps tracking --ins-header-h (125px desktop / 78px
   mobile) exactly as every other anchor target on both pages does.

   Scoped to headings INSIDE the article body: a bare [id] selector here would
   put a 137px scroll-margin on every form field and every anchor on the page,
   which is the precise over-reach style.css:3193 documents avoiding. */
.ins-article-body .ins-subhead[id] {
  scroll-margin-top: calc(var(--ins-header-h) + 0.75rem);
}

/* 5e. TWO PILLS LIT AT ONCE. Alex, 2026-08-17, with a screenshot of the
   deployed hub: "when non-HOME button is active; Home should not be active as
   well". In the shot HOME and AHEAD are both filled gold.

   MECHANISM -- two independent states painting one identical treatment:
     - insights.html:189 hardcodes `aria-current="page"` on the sub-bar's first
       link. That is CORRECT markup: on the hub, that link points at
       /events/B2BV2V-2026-London/insights/, which IS the current page.
     - js/subnav.js initSpy() adds `.active` to whichever in-page section link
       the scrollspy resolves to.
   Both states resolve to the same gold-fill / dark-ink / 600-weight rule, and
   they do so in BOTH stylesheets these pages load:
     insights.css:386-392 (canon)  .msn-subnav a.active,
                                   .msn-subnav a[aria-current="true"],
                                   .msn-subnav a[aria-current="page"]
     style.css:3160-3163           .msn-subnav a.active,
                                   .msn-subnav a[aria-current="page"]
   Neither knows about the other, so from the first scroll onward the bar shows
   two gold pills: the permanent HOME marker plus the travelling scrollspy one.
   Measured before, 1440x900, scrolled to #ahead: 2 gold pills (Home, Ahead),
   both bg rgb(221,192,116), ink rgb(15,15,15), weight 600.

   WHY CSS HERE AND NOT JS IN subnav.js: subnav.js is shared by EIGHT pages
   (gallery, tribute, venue, canvases, speakers, partnerships and both Insights
   pages). Stripping or suppressing aria-current there would reach seven pages
   that never had this defect. insights.css is loaded by the two Insights pages
   only, so a rule here has exactly the blast radius the defect has.

   WHY aria-current STAYS IN THE MARKUP: it is semantically true, and it is what
   a screen reader announces to place the user on the site. This is a purely
   VISUAL de-emphasis -- the attribute is untouched, only its paint is deferred
   while a section pill owns the highlight. Do NOT "fix" this later by deleting
   the attribute or stripping it in JS; that would trade a cosmetic defect for
   an accessibility regression.

   SPECIFICITY: (0,4,2) -- .msn-subnav-inner + :has(a.active) (which takes the
   specificity of its most specific argument, a.active) + :not(.active) +
   :not(.msn-subnav-cta) + a. That clears both (0,2,1) active rules above
   regardless of source order, so the fix does not silently depend on
   insights.css happening to load second after style.css.

   :not(.msn-subnav-cta) keeps the rule off the red Register pill, which carries
   its own fill and its own mobile-drawer active rule (insights.css:838-841).
   The CTA is never a back-link and must never be dimmed by this.

   SELF-REVERTING: the rule is conditional on :has(a.active), so the moment no
   section link is active HOME paints gold again, with no JS involvement. Note
   what that state actually is on this hub: the scrollspy's IntersectionObserver
   only ever MOVES .active on a new intersection and never clears it when
   nothing intersects, so "no section active" is the fresh-load-at-top state,
   and after any scroll the topmost visible section keeps the highlight even
   back at y0. Either way the invariant holds: exactly one gold pill, always.

   Measured after, 1440x900, hub:
     fresh load, y0       Home gold (221,192,116)/(15,15,15) w600, 0 active  -> 1 gold
     scrolled to #ahead   Home transparent/(255,255,255) w500, Ahead gold    -> 1 gold
     scrolled to #value   Home transparent/(255,255,255) w500, Dialogue gold -> 1 gold
     scrolled back to y0  Home transparent/(255,255,255) w500, About gold    -> 1 gold

   THE ARTICLE PAGE IS UNAFFECTED -- verified, not assumed. Its sub-bar's first
   link (insights-london-next-growth-challenge.html:217) is labelled "Insights"
   and points BACK to the hub, which is NOT the current page, so it correctly
   carries no aria-current at all. Measured there: 0 aria-current pills, 0 gold
   at y0, 1 gold (Difference) when scrolled. The :has() prelude can match but
   the subject selector finds nothing, so this rule is structurally inert on the
   article and its single-gold behaviour is unchanged. */
.msn-subnav-inner:has(a.active) a[aria-current="page"]:not(.active):not(.msn-subnav-cta) {
  background: transparent;
  color: #ffffff;
  font-weight: 500;
}

/* ==========================================================================
   ERA26 ADDITIONS, appended 2026-08-19 (A3 lane).
   Everything above this line is the B2BV2V26 London Insights engine, cloned
   BYTE-FOR-BYTE. Nothing above was re-implemented, re-indented or "simplified":
   the palette, the .ins-* vocabulary and every rule are the donor's.
   Origin of that discipline: SAR-2026-08-16, where the London Insights hub was
   hand-built with 62 invented .ins-* classes while an engine already existed.
   Only the two rules below are new, and each exists because ERA26 needs an
   element London did not have.
   ========================================================================== */

/* 1. BILINGUAL PL/EN.
   ERA26 is PL primary, EN secondary (event-config.json languages), unlike the
   EN-only London donor. Both languages ship in the DOM; CSS decides which is
   visible, so there is no flash of the wrong language and no JS is required to
   render the default.

   html[data-lang] is written by js/event-config.js on DOM ready, and it reads
   localStorage key 'era26-lang' shared with the rest of the event estate, so a
   visitor's choice survives site -> insights -> gallery navigation (gate C4).

   DEFAULT (no attribute, or data-lang="pl"): PL visible, EN hidden.
   'revert' rather than a fixed value so block elements (<p data-l>) return to
   block and inline elements (<span data-l>) return to inline. */
[data-l="en"] { display: none; }
html[data-lang="en"] [data-l="en"] { display: revert; }
html[data-lang="en"] [data-l="pl"] { display: none; }

/* 2. NAV WORDMARK.
   The donor nav logo is an <img> of b2bv2v-london-logo-lockup-ondark.svg. No
   ERA26 logo lockup exists anywhere in this repo, and an <img> pointing at a
   missing file renders broken and fails the deploy asset-MIME probe (gate E3),
   so the lockup is a text wordmark until a real asset lands.
   Pure #ffffff on the dark nav band, per dark-surface-legibility (gate C18):
   no muted white, no opacity dimming.
   TODO(era26-assets): replace with the ERA26 logo lockup when it exists. */
.nav-logo-wordmark {
  display: inline-block;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
}
.nav-logo-wordmark b { font-weight: 800; }