/* KICC navigation + readable-surface layer
 *
 * Two measured defects this file closes:
 *
 * 1. NAV LEGIBILITY. approved-design.css paints .nav with
 *    linear-gradient(rgba(179,38,30,.86), transparent) and sets
 *    .nav-links a{color:var(--ui-muted)}. On a page whose background is an
 *    immersive film (marketplace, institution profiles) that puts 13.5px
 *    grey-red text directly on moving photography: measured contrast fell
 *    below 2:1 on light frames. The bar now carries its own opaque surface,
 *    so link colour is read against a known background, not a video frame.
 *
 * 2. TEXT ON FILM. Every content block that sits over an immersive film now
 *    owns an opaque panel. Nothing is dimmed or hidden — the film stays
 *    visible in the gaps between panels.
 *
 * Colour is taken from the theme tokens, never hard-coded, so light theme
 * (ink #0B0B0B on the brand yellow) and dark theme (white on #0B0B0B) both
 * clear WCAG AA 4.5:1 for body text and 3:1 for large text.
 */

/* ── 1 · the bar ──────────────────────────────────────────────────────── */
#nav,
#nav.scrolled {
  background: var(--ui-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ui-line);
  backdrop-filter: saturate(1.05);
}
#nav .nav-inner {
  background: transparent !important;
  border-bottom: 0 !important;
  gap: 14px;
  min-height: 62px;
}
#nav .nav-links { gap: 2px; }
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a,
html body #nav .nav-links a {
  color: var(--ui-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: .88;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 8px 12px;
  border-radius: 9px;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a:hover,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a:focus-visible,
#nav .nav-links a:hover,
#nav .nav-links a:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--ui-ink) 9%, transparent) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a.active,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a[aria-current="page"],
#nav .nav-links a.active {
  opacity: 1;
  color: var(--ui-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--ui-accent) !important;
}
#nav .nav-links a.active::after { background: var(--ui-accent); }
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a::after{background:var(--ui-accent)!important}
#nav .logo span,
#nav .logo small { color: var(--ui-ink) !important; }
#nav .logo small { opacity: .72; font-size: 9.5px; letter-spacing: .12em; }
#nav .nav-caret { opacity: .6; font-size: 9px; margin-left: 2px; }
#nav .nav-drop-menu {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34) !important;
}
#nav .nav-drop-menu a {
  color: var(--ui-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: .9;
}
#nav .nav-drop-menu a:hover { opacity: 1; background: color-mix(in srgb, var(--ui-ink) 8%, transparent) !important; }

/* ── the utility cluster ──────────────────────────────────────────────── */
/* One primary call to action, one cart, and one muted utility group.
   The duplicate gold "Marketplace" pill is gone: the word already exists in
   .nav-links, and two identical destinations in one bar is the crowding the
   audit measured. */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
#nav .nav-cta .nav-cta-primary,
.nav-cta .nav-cta-primary {
  min-height: 36px;
  padding: 0 16px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  -webkit-text-fill-color: currentColor !important;
  border-radius: 999px;
  white-space: nowrap;
}
.nav-util {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-ink) 5%, transparent);
}
.nav-util > *,
#nav .nav-util > a {
  -webkit-text-fill-color: currentColor !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ui-ink) !important;
  opacity: .85;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-transform: none;
  white-space: nowrap;
}
.nav-util > *:hover,
.nav-util > *:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--ui-ink) 10%, transparent) !important;
}
.nav-util form { padding: 0; margin: 0; display: inline-flex; }
.nav-util form button { min-height: 30px; padding: 0 10px; }
.nav-util .theme-toggle span[data-theme-label] { font-size: 11.5px; }

/* Cart stays a visible, high-contrast pill — it is a destination, not a
   utility toggle, and the badge count must read at a glance. */
.nav-cta .kicc-cart-link {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: static !important;
}
.nav-cta .kicc-cart-link:hover { border-color: var(--ui-accent) !important; }

/* Burger only where the links are gone. */
#nav .burger { color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 9px; }

@media (max-width: 1180px) {
  .nav-util > a:not(.kicc-cart-link) { display: none; }
}
@media (max-width: 900px) {
  .nav-cta { gap: 6px; }
  #nav .nav-cta .nav-cta-primary,
.nav-cta .nav-cta-primary { display: none; }   /* carried by the drawer */
  /* The collapse below used to lose to `.nav-util > *, #nav .nav-util > a`
     (a CHILD selector beats `.nav-util > *` on specificity), so "Admin" stayed
     in the bar on a phone and its 64px pushed the cart pill on top of the
     burger: at 390x844 the cart sat at x=284 while the burger ran 265-303.
     Hide the group itself, not just its children. */
  #nav .nav-util,
  #nav .nav-util > a,
  #nav .nav-util > * { display: none !important; }
  #nav .nav-util { border: 0; background: none; padding: 0; width: 0; min-width: 0; }
}

/* ── 2 · readable surfaces over film ──────────────────────────────────── */
/* Panels, not scrims: the film keeps its brightness, the words get a floor. */
body.experience-world #app > .wrap,
body.experience-world #app > section,
body.experience-world #app > header.split-hero {
  position: relative;
  z-index: 1;
}
body.experience-world #app .page-head,
body.experience-world #app .mkt-head,
body.experience-world #app .mkt-cats,
body.experience-world #app .split-hero__info {
  background: var(--ui-bg);
}
/* Marketplace masthead: an explicit plate so the search field, the county
   select and the category chips never sit on moving photography. */
body.experience-world #app .mkt-head {
  border-bottom: 1px solid var(--ui-line);
  padding-bottom: 18px !important;
}
body.experience-world #app .mkt-head h1,
body.experience-world #app .mkt-head .eyebrow { color: var(--ui-ink) !important; opacity: 1 !important; }
body.experience-world #app .mkt-head p { color: var(--ui-ink) !important; opacity: .82 !important; }

#app .mkt-head .input,
#app .mkt-head input[type="search"],
#app .mkt-head select {
  background: color-mix(in srgb, var(--ui-ink) 8%, var(--ui-bg)) !important;
  color: var(--ui-ink) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 28%, transparent) !important;
  opacity: 1 !important;
}
#app .mkt-head .input::placeholder { color: var(--ui-ink) !important; opacity: .58 !important; }

#app .mkt-chip {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 26%, transparent) !important;
  opacity: 1 !important;
}
#app .mkt-chip:hover { border-color: var(--ui-accent) !important; }
#app .mkt-chip.active {
  background: var(--ui-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--ui-accent) !important;
  font-weight: 700;
}
#app .mkt-chip .mkt-chip-count { opacity: .82 !important; }

/* Product cards: the media panel keeps the picture, the body gets the floor,
   and every action is a solid button instead of a frosted ghost pill. */
#app .mkt-card { background: var(--ui-bg); border-color: var(--ui-line) !important; }
#app .mkt-card .pc-body,
#app .mkt-card > div { background: var(--ui-bg); }
#app .mkt-card h2,
#app .mkt-card h2 a,
#app .mkt-card .price { color: var(--ui-ink) !important; opacity: 1 !important; }
#app .mkt-card p { color: var(--ui-ink) !important; opacity: .8 !important; }
#app .mkt-card .btn.ghost {
  background: color-mix(in srgb, var(--ui-ink) 12%, var(--ui-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 30%, transparent) !important;
  color: var(--ui-ink) !important;
  opacity: 1 !important;
}

/* Badges and eyebrows that were 40–60% opacity on dark film. */
#app .badge.grey,
#app .badge.gold {
  background: color-mix(in srgb, var(--ui-ink) 14%, var(--ui-bg)) !important;
  color: var(--ui-ink) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 24%, transparent) !important;
  opacity: 1 !important;
}
#app .eyebrow {
  color: var(--ui-ink) !important;
  opacity: .78 !important;
}
#app .split-hero__eyebrow { opacity: .9 !important; }
#app .muted,
#app .muted-xs,
#app .split-hero__lead,
#app .split-hero__facts li {
  color: var(--ui-ink) !important;
  opacity: .84 !important;
}
#app .split-hero__facts li b { opacity: 1; }

/* Footer column titles were dim grey on black. */
.rb-footer h3,
.rb-footer h4,
.rb-footer .rb-footer-title,
.footer h3,
.footer h4 {
  color: var(--ui-ink) !important;
  opacity: .92 !important;
}

/* Institution story panel: first thing in the information column, so it gets
   a solid card rather than a translucent glass one. */
#app .institution-voice {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  padding: 26px 28px;
  margin-top: 22px;
}
#app .institution-voice .eyebrow { margin: 0 0 10px; }
#app .institution-voice p {
  color: var(--ui-ink) !important;
  opacity: .9 !important;
  font-size: 1.02rem;
  line-height: 1.68;
  margin: 0 0 14px;
  max-width: 74ch;
}
#app .institution-voice p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  #nav .nav-links a,
  .nav-util > *,
  #app .mkt-head .input,
#app .mkt-head input[type="search"],
#app .mkt-head select {
  background: color-mix(in srgb, var(--ui-ink) 8%, var(--ui-bg)) !important;
  color: var(--ui-ink) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 28%, transparent) !important;
  opacity: 1 !important;
}
#app .mkt-head .input::placeholder { color: var(--ui-ink) !important; opacity: .58 !important; }

#app .mkt-chip { transition: background .16s, color .16s, border-color .16s, opacity .16s; }
}

/* The gold call to action keeps dark ink on the brand gold (5.39:1), in both
   themes: white on #FFCD05 is 1.10:1 and is what the audit caught. */
#nav .btn.gold,
#nav .btn.gold.sm,
#nav .nav-cta-primary.btn.gold {
  color: #0B0B0B !important;
  -webkit-text-fill-color: #0B0B0B !important;
  background: var(--kicc-gold, #FFCD05) !important;
  border-color: var(--kicc-gold, #FFCD05) !important;
}
#nav .btn.gold:hover { background: #FFE066 !important; border-color: #FFE066 !important; }

/* Theme toggle label and the burger glyph follow the bar's ink. */
#nav .theme-toggle,
#nav .theme-toggle span { color: var(--ui-ink) !important; -webkit-text-fill-color: currentColor !important; }
#nav .burger { color: var(--ui-ink) !important; -webkit-text-fill-color: currentColor !important; }
#nav .logo small { -webkit-text-fill-color: currentColor !important; }

/* CTA repair: some sheets repaint .nav-cta-primary background dark, leaving
   #0B0B0B ink on #0B0B0B fill (1:1, invisible). Pin the gold field. */
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta-primary,
body:not(.admin-shell) #nav a.nav-cta-primary,
#nav .nav-cta-primary,
#nav a.nav-cta-primary{
  background: var(--kicc-gold, #FFCD05) !important;
  background-image: none !important;
  border: 1px solid rgba(11,11,11,.18) !important;
  color: #0B0B0B !important;
  -webkit-text-fill-color: #0B0B0B !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta-primary:hover,
#nav .nav-cta-primary:hover,
#nav a.nav-cta-primary:hover{
  background: #FFE066 !important; color: #0B0B0B !important;
  -webkit-text-fill-color: #0B0B0B !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta-primary:focus-visible,
#nav .nav-cta-primary:focus-visible{
  outline: 2px solid #0B0B0B !important; outline-offset: 2px !important;
}

/* ── 6 · utility cluster: theme-aware ink ───────────────────────────────
   Admin / Sign in / theme toggle were inheriting --ui-ink, which resolves to
   #0B0B0B in the dark world: black text on a black bar (measured 1.00:1). */
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util > a,
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util .theme-toggle,
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util .theme-toggle span,
body.experience-world:not(.light-world) #nav .nav-util > a,
body.experience-world:not(.light-world) #nav .nav-util .theme-toggle,
body.experience-world:not(.light-world) #nav .nav-util .theme-toggle span{
  color: #F7F3EA !important;
  -webkit-text-fill-color: #F7F3EA !important;
  opacity: .92 !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav .nav-util > a,
html[data-theme="light"] body:not(.admin-shell) #nav .nav-util .theme-toggle,
html[data-theme="light"] body:not(.admin-shell) #nav .nav-util .theme-toggle span,
body.light-world #nav .nav-util > a,
body.light-world #nav .nav-util .theme-toggle,
body.light-world #nav .nav-util .theme-toggle span{
  color: #0B0B0B !important;
  -webkit-text-fill-color: #0B0B0B !important;
  opacity: .92 !important;
}
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util > a:hover,
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util .theme-toggle:hover{
  color: #FFCD05 !important; -webkit-text-fill-color: #FFCD05 !important; opacity: 1 !important;
}
/* A real wrapper ring so the group reads as a control, not stray text. */
#nav .nav-util{
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent) !important;
  border-radius: 999px !important;
  padding: 3px 4px !important;
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
  backdrop-filter: none !important;
}

/* ── 7 · two more ink leaks found by reading the screenshots ────────────
   (a) Cart count badge: pin literal gold. `var(--kicc-gold)` is re-scoped
       inside the dark nav to #0B0B0B, so the badge collapsed to 1.00:1
       black-on-black.
   (b) Theme toggle: the pill keeps a dark glass fill in the LIGHT world
       (rgba(20,24,28,.88)) while its label takes light-theme ink #0B0B0B
       — 1.1:1. Decide the fill and the ink together.
   (c) Card actions: kicc-calm-ui.css paints `.mkt-card .btn.ghost` as
       rgba(255,255,255,.10) + #F7F4EE text (white-on-white on light card
       bodies). Mirror its specificity to win the cascade. */
html[data-theme="dark"] body:not(.admin-shell) #nav .kicc-cart-link .kicc-cart-count,
body.experience-world:not(.light-world) #nav .kicc-cart-link .kicc-cart-count{
  background: #FFCD05 !important; color: #0B0B0B !important;
  -webkit-text-fill-color: #0B0B0B !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav .kicc-cart-link .kicc-cart-count,
body.light-world #nav .kicc-cart-link .kicc-cart-count{
  background: #0B0B0B !important; color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Theme toggle: fill and ink always agree. */
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util .theme-toggle,
body.experience-world:not(.light-world) #nav .nav-util .theme-toggle{
  background: color-mix(in srgb, #F7F3EA 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, #F7F3EA 26%, transparent) !important;
  color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav .nav-util .theme-toggle,
body.light-world #nav .nav-util .theme-toggle{
  background: #FFFFFF !important;
  border: 1px solid rgba(11,11,11,.26) !important;
  color: #0B0B0B !important; -webkit-text-fill-color: #0B0B0B !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav .nav-util .theme-toggle span,
body.light-world #nav .nav-util .theme-toggle span{
  color: #0B0B0B !important; -webkit-text-fill-color: #0B0B0B !important;
}
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-util .theme-toggle span,
body.experience-world:not(.light-world) #nav .nav-util .theme-toggle span{
  color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important;
}

/* Card actions: solid, edged, theme-aware — never a frosted ghost. */
body:not(.admin-shell) #app .mkt-card .btn.ghost,
body:not(.admin-shell) #app .prod-card .btn.ghost,
body:not(.admin-shell) #app .pc-body .btn.ghost,
body:not(.admin-shell) #app .mkt-card .btn:not(.gold),
body:not(.admin-shell) #app .prod-card .btn:not(.gold){
  background: color-mix(in srgb, var(--ui-ink) 13%, var(--ui-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 36%, transparent) !important;
  color: var(--ui-ink) !important;
  -webkit-text-fill-color: var(--ui-ink) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body:not(.admin-shell) #app .mkt-card .btn.ghost:hover,
body:not(.admin-shell) #app .prod-card .btn.ghost:hover,
body:not(.admin-shell) #app .mkt-card .btn:not(.gold):hover,
body:not(.admin-shell) #app .prod-card .btn:not(.gold):hover{
  background: color-mix(in srgb, var(--ui-ink) 22%, var(--ui-bg)) !important;
  border-color: var(--ui-accent, #B3261E) !important;
}

/* ── 8 · the bar must own its surface ───────────────────────────────────
   Measured on /institutions/* after scrolling: the nav collapses to a dark
   glass panel (color(srgb .215 .215 .215)) while a light-theme document
   still inks its utilities #0B0B0B — 1.05:1, invisible. Ink cannot be
   decided by the document when the surface is decided by the scroll
   position, so pin the bar to the theme's own surface and keep the film
   underneath untouched. */
html[data-theme="dark"] body:not(.admin-shell) #nav,
body.experience-world:not(.light-world) #nav{
  background: #171717 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(247,243,234,.14) !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav,
body.light-world #nav{
  background: #F4F1E9 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(11,11,11,.16) !important;
}
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-links > a,
html[data-theme="dark"] body:not(.admin-shell) #nav .nav-links > a:visited,
body.experience-world:not(.light-world) #nav .nav-links > a{
  color: #F2EDE2 !important; -webkit-text-fill-color: #F2EDE2 !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav .nav-links > a,
html[data-theme="light"] body:not(.admin-shell) #nav .nav-links > a:visited,
body.light-world #nav .nav-links > a{
  color: #17150F !important; -webkit-text-fill-color: #17150F !important;
}

/* ── 9 · the decorative panel behind top-level links, killed for BOTH shells ─
   kicc-responsive-motion.css paints `:is(button,.btn,.pill,.nav-links > a,...)::after`
   as a full-bleed sheen (content:"", inset:-55%, z-index:-1). Line 65 above then
   forces that pseudo-element's background to var(--ui-accent), so on any page it
   became a rust-red rectangle behind "Home" and "Marketplace" — visible on
   /institutions/*, /counties*, /venues, which are served by the static reference
   shell. That shell loads this sheet but NOT kicc-nav-glass.css, so the removal
   written there never reached these pages. The rule now lives in this sheet,
   which both layouts load. */
html body #nav .nav-links > a::after,
html body #nav .nav-links > .nav-drop > a::after,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a::after,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links > .nav-drop > a::after{
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
/* The current page is signalled by gold ink and a 2px inset rule on the bar's
   own baseline — one language for both shells. */
html body #nav .nav-links a[aria-current="page"],
html body #nav .nav-links a.active{
  background: rgba(255,205,5,.12) !important;
  box-shadow: inset 0 -2px 0 #FFCD05 !important;
  color: #FFCD05 !important;
  -webkit-text-fill-color: #FFCD05 !important;
}
html[data-theme="light"] body #nav .nav-links a[aria-current="page"],
html[data-theme="light"] body #nav .nav-links a.active{
  background: rgba(20,17,12,.06) !important;
  box-shadow: inset 0 -2px 0 #B3261E !important;
  color: #6B1D18 !important;
  -webkit-text-fill-color: #6B1D18 !important;
}

/* ============================================================================
   10 · LIGHT-THEME INK ON THE REFERENCE SHELL  (/counties/*, /institutions/*,
        /venues). Measured on the live release 2026-10-30 at 1440x1000:
        #nav .logo              ink rgb(255,248,239) on plate rgb(244,241,233)  1.07:1
        #nav .logo small        same                                            1.07:1
        .split-hero__title      ink rgb(11,11,11) on panel rgb(9,12,15)         1.00:1
        .split-hero__lead       same                                            1.00:1
        .split-hero__facts li   same                                            1.00:1
        .split-hero__eyebrow    gold #FFCD05 on the dark panel                  1.36:1
        .crumb                  ink rgb(11,11,11) over the hero film (no scrim)

        Root cause, not a missing rule: kicc-responsive-motion.css ships
        html[data-kicc-motion-engine] #nav .logo{color:var(--kicc-glass-ink)
        !important} — one attribute selector more specific than anything here,
        so the wordmark stayed cream while the plate turned warm. The split hero
        inherits its panel from --glass (a fixed dark rgba) but its text from
        --ui-ink, which flips with the theme: dark ink met a dark panel.

        Fix: (a) match or beat that specificity with an attribute + theme pair,
        (b) make the info half theme-aware at source instead of leaving a dark
        panel in the light theme, (c) give the breadcrumb its own scrim because
        it rides on top of an undimmed film and cannot rely on the page colour.
   ========================================================================== */

/* (a) wordmark — light theme */
html[data-kicc-motion-engine][data-theme="light"] body:not(.admin-shell) #nav .logo,
html[data-kicc-motion-engine][data-theme="light"] body:not(.admin-shell) #nav .logo small,
html[data-theme="light"] body #nav .logo,
html[data-theme="light"] body #nav .logo small {
  color: #12100B !important;
  -webkit-text-fill-color: #12100B !important;
  opacity: 1 !important;
}
/* (a) wordmark — dark theme keeps the cream, pinned so it never inherits ink */
html[data-kicc-motion-engine][data-theme="dark"] body:not(.admin-shell) #nav .logo,
html[data-kicc-motion-engine][data-theme="dark"] body:not(.admin-shell) #nav .logo small,
html[data-theme="dark"] body #nav .logo,
html[data-theme="dark"] body #nav .logo small {
  color: #FFF8EF !important;
  -webkit-text-fill-color: #FFF8EF !important;
  opacity: 1 !important;
}

/* (b) the facts half of the split hero follows the theme it is drawn on.
      Light: warm paper panel, near-black ink. Dark: the published glass panel. */
html[data-theme="light"] body .split-hero__info {
  background: rgba(250, 247, 241, .90) !important;
  border-color: rgba(18, 16, 11, .16) !important;
}
html[data-theme="light"] body .split-hero__info :is(.split-hero__title, h1, h2) {
  color: #12100B !important;
  -webkit-text-fill-color: #12100B !important;
  opacity: 1 !important;
}
html[data-theme="light"] body .split-hero__info .split-hero__lead {
  color: #2F2A20 !important;
  -webkit-text-fill-color: #2F2A20 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body .split-hero__info .split-hero__facts li {
  color: #2F2A20 !important;
  -webkit-text-fill-color: #2F2A20 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body .split-hero__info .split-hero__facts li b {
  color: #12100B !important;
  -webkit-text-fill-color: #12100B !important;
}
html[data-theme="light"] body .split-hero__info .split-hero__facts li span {
  color: #4A4437 !important;
  opacity: 1 !important;
}
/* gold #FFCD05 is 1.36:1 on paper — darken the eyebrow only, keep the hue */
html[data-theme="light"] body .split-hero__info .split-hero__eyebrow {
  color: #7A5E00 !important;
  -webkit-text-fill-color: #7A5E00 !important;
}
html[data-theme="dark"] .split-hero__info .split-hero__eyebrow { color: #FFCD05 !important; }

/* (c) breadcrumb sits on the film, not on a surface — give it its own plate */
#app .split-hero ~ .crumbs, #app .breadcrumbs, #app .breadcrumbs a,
#app .crumbs, #app .crumb {
  -webkit-text-fill-color: currentColor !important;
}
body:not(.admin-shell) #app > .breadcrumb,
body:not(.admin-shell) #app > .breadcrumbs,
body.experience-world #app .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
html[data-theme="dark"] body #app :is(.breadcrumb,.breadcrumbs,header .breadcrumb) {
  background: rgba(12, 16, 20, .66) !important;
  color: #F3EEE3 !important;
  border: 1px solid rgba(255, 248, 239, .18);
}
html[data-theme="light"] body #app :is(.breadcrumb,.breadcrumbs,header .breadcrumbs) {
  background: rgba(250, 246, 238, .92) !important;
  color: #1B1810 !important;
  border: 1px solid rgba(20, 17, 12, .16);
}
html[data-theme] #app :is(.split-hero,.split-hero__info) .breadcrumb { border-radius: 999px; }

/* the standing "in our own words" / film dock labels are glass on glass: keep
   their ink legible in the light theme too */
html[data-theme="light"] body #app .expo-video__title {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9) !important;
}
/* (c2) the breadcrumb on the reference shell is `div.crumb.wrap` with bare
   <span>s — the earlier scrim only matched .breadcrumb/.breadcrumbs, so the
   live page still showed rgb(69,69,69) ink over a bright film. Measured
   2026-10-30 11:42 at 1440x950 on /institutions/bombolulu-workshop: 1.9:1.
   Match the real class and paint a plate behind it. */
body:not(.admin-shell) #app > .crumb,
body:not(.admin-shell) #app > .crumb.wrap,
body:not(.admin-shell) #app .crumb {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 14px !important;
  margin: 10px auto 2px !important;
  border-radius: 999px !important;
  width: auto !important;
  max-width: calc(100% - 28px);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-size: 10px !important;
  letter-spacing: .16em;
}
html[data-theme="light"] body #app > .crumb,
html[data-theme="light"] body #app .crumb {
  background: rgba(250, 246, 238, .95) !important;
  border: 1px solid rgba(20, 17, 12, .18) !important;
  color: #1B1810 !important;
}
html[data-theme="light"] body #app .crumb :is(a, span, span *) {
  color: #1B1810 !important;
  -webkit-text-fill-color: #1B1810 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body #app > .crumb,
html[data-theme="dark"] body #app .crumb {
  background: rgba(12, 16, 20, .70) !important;
  border: 1px solid rgba(255, 248, 239, .20) !important;
  color: #F3EEE3 !important;
}
html[data-theme="dark"] body #app .crumb :is(a, span, span *) {
  color: #F3EEE3 !important;
  -webkit-text-fill-color: #F3EEE3 !important;
  opacity: 1 !important;
}
@media(max-width:640px){
  body:not(.admin-shell) #app > .crumb { font-size: 9px !important; padding: 6px 11px !important; letter-spacing: .12em; }
}
/* ============================================================================
   11 · HEADINGS THAT SIT DIRECTLY ON A PAGE FILM.
        /venues, 1440x950, data-theme=light, measured 2026-10-30 11:48:
          h2 "Official KICC films"              rgb(11,11,11) over the film  1.06:1
          p  "General tours and promotional …"  rgb(11,11,11) over the film  1.06:1
          h3 "KICC virtual tour" / "KICC and other MICE facilities"  same block
        This block is generated by venueIndex() in reference-production.html and
        has no card wrapper of its own, so the theme's near-black ink lands on a
        dark stage film. Give the block a surface rather than repainting every
        .section heading on the site (which would move layout everywhere).
   ========================================================================== */
body:not(.admin-shell) #app :is(section[aria-label="Official KICC films"], [data-venue-video-library], [data-related-venue-videos]) {
  background: var(--ui-surface, #FFFDF8);
  border: 1px solid var(--ui-line, rgba(20, 17, 12, .14));
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 26px);
  margin-top: 22px;
}
html[data-theme="light"] body #app :is(section[aria-label="Official KICC films"], [data-venue-video-library], [data-related-venue-videos]) {
  background: #FFFCF6 !important;
  border-color: rgba(20, 17, 12, .14) !important;
}
html[data-theme="dark"] body #app :is(section[aria-label="Official KICC films"], [data-venue-video-library], [data-related-venue-videos]) {
  background: #17191C !important;
  border-color: rgba(255, 248, 239, .16) !important;
}
html[data-theme="light"] body #app :is(section[aria-label="Official KICC films"], [data-venue-video-library], [data-related-venue-videos]) :is(h1, h2, h3, h4, p, span, li, a) {
  color: #12100B !important;
  -webkit-text-fill-color: #12100B !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body #app :is(section[aria-label="Official KICC films"], [data-venue-video-library], [data-related-venue-videos]) :is(h1, h2, h3, h4, p, span, li, a) {
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
  opacity: 1 !important;
}

/* Shared first-visit surfaces: opaque text plates, never a film-darkening layer. */
html body #kc-consent {
  background: #10251c !important;
  color: #f3f7f4 !important;
  -webkit-text-fill-color: #f3f7f4 !important;
  z-index: 950 !important;
  max-width: 560px;
}
html body #kc-consent p {color:#f3f7f4 !important;-webkit-text-fill-color:#f3f7f4 !important;opacity:1 !important}
html body #kc-consent a {color:#ffe066 !important;-webkit-text-fill-color:#ffe066 !important;text-decoration:underline}
html body #kc-consent .kc-actions {display:flex;gap:10px}
html body #kc-consent button {min-height:44px;flex:1 1 150px;font-weight:600 !important;border-radius:10px !important}
html body #kc-consent .kc-accept {background:#ffcd05 !important;color:#14110c !important;-webkit-text-fill-color:#14110c !important;border:1px solid #ffcd05 !important}
html body #kc-consent .kc-necessary {background:#f3f7f4 !important;color:#10251c !important;-webkit-text-fill-color:#10251c !important;border:1px solid #f3f7f4 !important}
html body #kc-consent button:focus-visible {outline:3px solid #ffe066 !important;outline-offset:3px}
html body:has(#kc-consent.on) #kicc-film-dock {display:none !important}
#nav .kicc-brand-mark,.footer .kicc-brand-mark {width:36px;height:36px;object-fit:contain;flex:0 0 36px}

/* One shared split hero for county and institution routes, with no cropped copy. */
html body #app#app .split-hero {height:auto !important;min-height:0 !important;align-items:stretch}
html body #app#app .split-hero__info {min-height:0 !important;padding:24px !important;justify-content:center}
html body #app#app .split-hero__title {font-size:clamp(1.65rem,2.7vw,2.65rem) !important;line-height:1.1 !important}
html body #app#app .split-hero__info .institution-voice {margin:0;padding:0;border:0;background:transparent;border-radius:0}
html body #app#app .split-hero__info .institution-voice p {font-size:14px;line-height:1.5;margin:0 0 10px;max-width:60ch;color:inherit !important;-webkit-text-fill-color:currentColor !important;opacity:1 !important}
html body #app#app .split-hero__info .institution-voice .eyebrow {font-size:10px;margin:0 0 6px}
html body #app#app .institution-story-details summary {cursor:pointer;min-height:44px;display:list-item;list-style-position:inside;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:10px 0}
html body #app#app .institution-story-details[open] {padding-bottom:12px}
html body #app#app .institution-story-details .institution-signature {font-style:italic}
html body #app#app .split-hero__facts {margin-top:12px;gap:5px}
html body #app#app .split-hero__actions {margin-top:14px}
html body #app#app .split-hero__actions .btn.gold {background:#ffcd05 !important;background-image:none !important;color:#14110c !important;-webkit-text-fill-color:#14110c !important;border:1px solid #9c7a00 !important;min-height:44px}
html body #app#app .split-hero__media .expo-video {min-height:300px;height:100%;max-height:none}
html body #app#app .crumb {display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:44px;padding:10px 14px !important;margin-block:8px !important;overflow-x:auto;border-radius:12px !important}
html body #app#app .crumb > * {white-space:nowrap;flex:0 0 auto}
html body #app#app .crumb > span:last-child {max-width:min(60vw,500px);overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px) {
  html body #app#app .split-hero {grid-template-columns:minmax(0,1fr);gap:12px}
  html body #app#app .split-hero__info {padding:18px !important}
  html body #app#app .split-hero__media .expo-video {min-height:200px;max-height:230px;height:230px}
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app#app section.mkt-head {width:calc(100% - 32px);max-width:1440px;margin-inline:auto !important}
html[data-kicc-motion-engine] body:not(.admin-shell) #app#app section.mkt-head .mkt-find .btn {background:#ffcd05 !important;color:#14110c !important;-webkit-text-fill-color:#14110c !important;border:1px solid #9c7a00 !important;min-height:44px}
html body #app#app .mkt-card .kmt-actions .btn {min-height:44px;display:inline-flex;align-items:center;justify-content:center}
html body #app#app .mkt-card .kmt-media {overflow:hidden}
html body #app#app :is(a,button,input,select,summary):focus-visible {outline:3px solid #a65f00;outline-offset:3px}
@media(prefers-reduced-motion:reduce) {html body #app .mkt-catnav,html body #app .mkt-chip {transition:none !important}}