/* HKVC shared site styles — synced to all pages via scripts/phase2-head-cleanup.py */

/* Fonts loaded via <link rel="preload"> in shared/head-assets.html — no @import (render-blocking) */

html, body { overflow-x: clip; }
body { font-family: 'Noto Sans', sans-serif; }

/* Homepage manifesto: the official mark enters between HKVC and “transform”. */
#manifesto .manifesto-opening {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  white-space: nowrap;
}

#manifesto .manifesto-keyword {
  display: inline-block;
  transform-origin: center;
}

#manifesto .manifesto-logo-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 0;
  height: 0.98em;
  padding-inline: 0;
  overflow: visible;
  transform-origin: center;
  will-change: width, padding, opacity;
}

#manifesto .manifesto-logo-mark {
  display: block;
  width: auto;
  height: 100%;
  min-width: 0;
  max-width: none;
  will-change: transform, opacity;
}

#manifesto .manifesto-emphasis {
  white-space: nowrap;
}

#manifesto .manifesto-emphasis > div[aria-hidden="true"] {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
  #manifesto .manifesto-opening { gap: 0.12em; }
}

/* Heading baseline — all headings use brand display font.
   Explicit inline overrides on individual pages are protected by specificity. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Futura', 'Jost', sans-serif;
}
h1, h2, h3, h4, h5, h6, .tracking-tight, .tracking-tighter {
  font-family: 'Futura', 'Jost', sans-serif;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.carousel-card { min-height: 400px; }
@media (min-width: 768px) { .carousel-card { min-height: 440px; } }

/* Focus ring for all interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: #00C2B2;
  color: #fff;
  padding: 12px 20px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }
.skip-link:hover { background: #009b8e; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .carousel-card { transition: none !important; }
}

/* Production Navigation — Conducted Hybrid */
.hk-nav,
.hk-mobile-stage {
  --hk-nav-panel: color-mix(in srgb, var(--hk-nav-blue-dark) 34%, var(--hk-nav-dark));
  --hk-nav-panel-light: color-mix(in srgb, var(--hk-nav-blue) 20%, var(--hk-nav-panel));
  --hk-nav-atmosphere:
    radial-gradient(ellipse 62% 130% at 8% 126%, color-mix(in srgb, var(--hk-nav-teal) 20%, transparent), transparent 64%),
    radial-gradient(ellipse 78% 180% at 55% -78%, color-mix(in srgb, var(--hk-nav-blue) 30%, transparent), transparent 68%),
    radial-gradient(ellipse 58% 120% at 104% 118%, color-mix(in srgb, var(--hk-nav-blue-deep) 34%, transparent), transparent 66%),
    var(--hk-nav-panel);
}

.hk-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--hk-nav-white);
  transition-property: transform, background-color, box-shadow, color;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}
.hk-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hk-nav-dark) 72%, transparent), transparent);
  opacity: .72;
  transition: opacity 260ms ease;
}
.hk-nav__bar {
  height: 76px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.hk-nav__logo {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 44px;
  display: grid;
  place-items: center start;
}
.hk-nav__logo img { display: block; width: auto; height: 46px; }
.hk-nav__desktop {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hk-nav__trigger,
.hk-nav__direct {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  background: transparent;
  font: 600 14px/1 "Noto Sans", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.hk-nav__trigger svg { width: 15px; transition: transform 200ms ease; }
.hk-nav__trigger.is-active {
  color: var(--hk-nav-white);
  background: color-mix(in srgb, var(--hk-nav-blue) 58%, transparent);
}
.hk-nav__trigger.is-active svg { transform: rotate(180deg); }
.hk-nav__split {
  min-height: 44px;
  padding-left: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  transition: color 180ms ease, background-color 180ms ease;
}
.hk-nav__split-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.hk-nav__split-toggle.hk-nav__trigger {
  min-width: 34px;
  padding: 0 10px 0 6px;
  border-radius: 0 999px 999px 0;
}
.hk-nav__split:hover,
.hk-nav__split:focus-within,
.hk-nav__split.is-active {
  color: var(--hk-nav-white);
  background: color-mix(in srgb, var(--hk-nav-blue) 58%, transparent);
}
.hk-nav__split .hk-nav__trigger.is-active { background: transparent; }
.hk-nav__actions { display: flex; align-items: center; gap: 10px; }
.hk-nav__donation {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--hk-nav-white);
  background: var(--hk-nav-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease;
}
.hk-nav__donation:hover { background: var(--hk-nav-blue-deep); }
.hk-nav__mobile-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  color: inherit;
  background: transparent;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  cursor: pointer;
}
.hk-nav__menu-icon {
  width: 22px;
  height: 16px;
  display: grid;
  align-content: center;
  gap: 6px;
}
.hk-nav__menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 220ms ease;
}
.hk-nav.is-mobile-open .hk-nav__menu-icon span:first-child { transform: translateY(4px) rotate(45deg); }
.hk-nav.is-mobile-open .hk-nav__menu-icon span:last-child { transform: translateY(-4px) rotate(-45deg); }
.hk-nav.is-menu-open::before,
.hk-nav.is-sticky-return::before {
  opacity: 1;
  background: var(--hk-nav-atmosphere);
  box-shadow: 0 10px 36px color-mix(in srgb, var(--hk-nav-dark) 22%, transparent);
}
.hk-nav.is-hidden { transform: translateY(-110%); }
.hk-nav.is-menu-open,
.hk-nav.is-mobile-open,
.hk-nav:focus-within { transform: translateY(0); }

/* Desktop panel family */
.hk-nav__panel-root {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1280px;
  margin: 0 auto;
  pointer-events: none;
}
.hk-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(840px, 100%);
  max-height: calc(100vh - 96px);
  overflow: hidden auto;
  color: var(--hk-nav-white);
  background: var(--hk-nav-atmosphere);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 28px 64px color-mix(in srgb, var(--hk-nav-dark) 34%, transparent), inset 0 1px color-mix(in srgb, var(--hk-nav-white) 10%, transparent);
  opacity: 0;
  transform: translateY(-14px) scale(.985);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}
.hk-nav-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.hk-nav-panel--compact { right: auto; left: var(--hk-compact-panel-left, 0); width: 370px; padding: 22px 18px 28px; }
.hk-nav-panel__kicker {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--hk-nav-white) 62%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hk-nav-panel__heading {
  margin: 0;
  color: var(--hk-nav-white);
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.04;
}
.hk-nav-panel__intro {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--hk-nav-white) 66%, transparent);
  font-size: 13px;
  line-height: 1.5;
}
.hk-nav-panel__links { position: relative; margin-top: 12px; display: grid; gap: 3px; }
.hk-nav-highlight {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 60px;
  border-radius: 14px;
  background: var(--hk-nav-panel-light);
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), height 200ms ease, opacity 160ms ease;
}
.hk-nav-destination {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  color: var(--hk-nav-white);
  text-decoration: none;
}
.hk-nav-destination__copy strong { display: block; font: 600 20px/1.18 "Jost", sans-serif; letter-spacing: -0.01em; }
.hk-nav-destination > svg { width: 16px; opacity: .44; transition: opacity 180ms ease, transform 180ms ease; }
.hk-nav-destination:hover > svg,
.hk-nav-destination:focus-visible > svg { opacity: 1; transform: translateX(3px); }
.hk-nav-destination--soon { opacity: .43; cursor: default; }
.hk-nav-destination__soon { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* Programmes — stationary conducted workspace */
.hk-nav-panel--programmes { right: auto; left: 0; width: 100%; padding: 30px 28px 38px; }
.hk-workspace {
  display: grid;
  grid-template-columns: 270px minmax(0,1fr) minmax(370px,400px);
  gap: clamp(22px,2.4vw,34px);
  height: 500px;
}
.hk-workspace__audiences {
  padding: 104px 22px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hk-workspace__audiences .hk-nav-panel__kicker { height: 14px; flex: 0 0 14px; }
.hk-audience-control {
  position: relative;
  flex: 0 0 78px;
  width: 100%;
  height: 78px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--hk-nav-white) 58%, transparent);
  background: transparent;
  font: 600 clamp(30px,2.4vw,38px)/1 "Jost", sans-serif;
  letter-spacing: -.035em;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.hk-audience-control:hover {
  color: color-mix(in srgb, var(--hk-nav-white) 86%, transparent);
  background: color-mix(in srgb, var(--hk-nav-blue) 9%, transparent);
}
.hk-audience-control.is-active {
  color: var(--hk-nav-white);
  background: color-mix(in srgb, var(--hk-nav-blue) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--audience-color, var(--hk-nav-teal)) 24%, transparent), 0 14px 34px color-mix(in srgb, var(--audience-color, var(--hk-nav-teal)) 9%, transparent);
}
[data-audience="schools"], [data-audience-theme="schools"], [data-mobile-audience="schools"] { --audience-color: var(--hk-nav-schools); }
[data-audience="organisations"], [data-audience-theme="organisations"], [data-mobile-audience="organisations"] { --audience-color: var(--hk-nav-organisations); }
[data-audience="individuals"], [data-audience-theme="individuals"], [data-mobile-audience="individuals"] { --audience-color: var(--hk-nav-individuals); }
.hk-workspace__content[data-audience-theme] .hk-nav-panel__kicker { color: var(--audience-color); }
.hk-workspace__content { padding-top: 8px; }
.hk-workspace__content .hk-nav-panel__heading { max-width: 470px; font-size: clamp(30px,2.6vw,40px); }
.hk-workspace__content .hk-nav-panel__intro {
  max-width: 520px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--hk-nav-white) 14%, transparent);
}
.hk-workspace__content .hk-nav-panel__links { margin-top: 10px; }
.hk-spotlight {
  min-width: 0;
  position: relative;
  align-self: stretch;
  min-height: 390px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--hk-nav-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hk-nav-white) 9%, transparent);
}
.hk-spotlight__image { position: absolute; inset: 0; overflow: hidden; }
.hk-spotlight__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82);
  transition: transform 500ms cubic-bezier(.16,1,.3,1);
}
.hk-spotlight:hover img { transform: scale(1.04); }
.hk-spotlight__body {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: linear-gradient(0deg, color-mix(in srgb, var(--hk-nav-dark) 96%, transparent) 0%, color-mix(in srgb, var(--hk-nav-dark) 64%, transparent) 43%, transparent 76%), linear-gradient(90deg, color-mix(in srgb, var(--hk-nav-dark) 44%, transparent), transparent 70%);
}
.hk-spotlight__body span {
  color: var(--hk-nav-teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hk-spotlight__body h3 { margin: 8px 0; max-width: 320px; font-size: clamp(27px,2.5vw,38px); line-height: .98; }
.hk-spotlight__body p {
  max-width: 310px;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--hk-nav-white) 76%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
.hk-spotlight__body a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hk-nav-white);
  font-size: 12px;
  font-weight: 700;
}
.hk-spotlight__body a svg { width: 14px; }
.hk-staff-strip { position: absolute; inset: auto 24px 10px; height: 18px; overflow: hidden; opacity: .55; }
.hk-staff-strip::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hk-nav-teal) 50%, transparent) 0 1px, transparent 1px 3px);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

/* Mobile full-screen destination */
body.mobile-nav-open { overflow: hidden; }
.hk-mobile-stage {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  color: var(--hk-nav-white);
  visibility: hidden;
  pointer-events: none;
}
.hk-mobile-stage.is-open { visibility: visible; pointer-events: auto; }
.hk-mobile-stage__reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--hk-nav-atmosphere);
  clip-path: inset(0 100% 0 0 round 0 60% 60% 0);
  transition: clip-path 820ms cubic-bezier(.72,0,.18,1);
}
.hk-mobile-stage__reveal::before,
.hk-mobile-stage__reveal::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 48%;
  left: -10%;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .34;
}
.hk-mobile-stage__reveal::before {
  top: -18%;
  background: color-mix(in srgb, var(--hk-nav-blue) 46%, transparent);
  transform: rotate(-8deg);
}
.hk-mobile-stage__reveal::after {
  bottom: -20%;
  background: color-mix(in srgb, var(--hk-nav-teal) 28%, transparent);
  transform: rotate(9deg);
}
.hk-mobile-stage.is-open .hk-mobile-stage__reveal { clip-path: inset(0 0 0 0 round 0); }
.hk-mobile-stage__chrome {
  position: relative;
  z-index: 2;
  height: 76px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 280ms ease 420ms, transform 440ms cubic-bezier(.16,1,.3,1) 420ms;
}
.hk-mobile-stage.is-open .hk-mobile-stage__chrome { opacity: 1; transform: translateX(0); }
.hk-mobile-stage__home { display: inline-flex; align-items: center; min-height: 44px; }
.hk-mobile-stage__chrome img { height: 42px; display: block; }
.hk-mobile-stage__close,
.hk-mobile-back {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  color: var(--hk-nav-white);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.hk-mobile-stage__viewport {
  position: relative;
  z-index: 2;
  height: calc(100vh - 76px);
  height: calc(100dvh - 76px);
  overflow: hidden;
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 320ms ease 460ms, transform 480ms cubic-bezier(.16,1,.3,1) 460ms;
}
.hk-mobile-stage.is-open .hk-mobile-stage__viewport { opacity: 1; transform: translateX(0); }
.hk-mobile-view {
  position: absolute;
  inset: 0;
  padding: clamp(18px,4vh,38px) 24px 24px;
  overflow-y: auto;
  transition: transform 440ms cubic-bezier(.16,1,.3,1), opacity 260ms ease;
}
.hk-mobile-view--root { transform: translateX(0); display: flex; flex-direction: column; }
.hk-mobile-view--sub { transform: translateX(104%); }
.hk-mobile-stage.is-subview .hk-mobile-view--root { transform: translateX(-34%); opacity: 0; pointer-events: none; }
.hk-mobile-stage.is-subview .hk-mobile-view--sub { transform: translateX(0); }
.hk-mobile-primary {
  position: relative;
  width: 100%;
  max-width: 620px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.hk-mobile-primary__links { position: relative; }
.hk-mobile-primary__wave {
  position: absolute;
  z-index: 0;
  left: -14px;
  right: -14px;
  top: 0;
  height: 68px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(0) scaleX(.7);
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hk-nav-blue) 28%, transparent) 0 1px, transparent 1px 7px);
  pointer-events: none;
  transition: transform 260ms ease, height 220ms ease, opacity 180ms ease;
}
.hk-mobile-primary__wave::after {
  content: "♪  ♫  ♩";
  position: absolute;
  right: 8%;
  top: 17px;
  color: var(--hk-nav-teal);
  font-size: 17px;
  letter-spacing: 12px;
}
.hk-mobile-primary__item {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 62px;
  padding: 6px 2px;
  border: 0;
  color: var(--hk-nav-white);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  text-align: left;
  font: 500 clamp(32px,10vw,55px)/1 "Jost", sans-serif;
  letter-spacing: -.035em;
  cursor: pointer;
}
.hk-mobile-primary__item svg { width: 24px; opacity: .5; }
.hk-mobile-primary__footer { margin-top: auto; display: grid; justify-items: center; gap: 12px; }
.hk-mobile-socials { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hk-mobile-socials a {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--hk-nav-white) 20%, transparent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--hk-nav-white) 74%, transparent);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.hk-mobile-socials a:hover,
.hk-mobile-socials a:focus-visible { color: var(--hk-nav-white); border-color: var(--hk-nav-teal); }
.hk-mobile-socials svg { width: 18px; height: 18px; }
.hk-mobile-primary__item--donation {
  width: auto;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  justify-content: center;
  background: color-mix(in srgb, var(--hk-nav-blue) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hk-nav-blue) 42%, transparent);
  font: 600 13px/1 "Noto Sans", sans-serif;
  letter-spacing: 0;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.hk-mobile-primary__item--donation:hover,
.hk-mobile-primary__item--donation:focus-visible {
  background: color-mix(in srgb, var(--hk-nav-blue) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hk-nav-blue) 58%, transparent);
}
.hk-mobile-subhead { max-width: 620px; margin: 0 auto 20px; }
.hk-mobile-subhead h2 { margin: 12px 0 0; font-size: clamp(42px,13vw,72px); line-height: .95; }
.hk-mobile-subgroups { max-width: 620px; margin: 0 auto; display: grid; gap: 26px; }
.hk-mobile-subgroup h3 {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 3px solid var(--audience-color, var(--hk-nav-teal));
  color: var(--hk-nav-white);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hk-mobile-subgroup .hk-nav-destination { min-height: 48px; padding-inline: 4px; }
.hk-mobile-subgroup .hk-nav-destination__copy strong { font-size: 18px; }

@media (max-width: 1149px) and (min-width: 1024px) {
  .hk-nav__bar { gap: 10px; padding-inline: 16px; }
  .hk-nav__trigger, .hk-nav__direct { padding-inline: 9px; font-size: 12px; }
  .hk-nav__split { padding-left: 9px; }
  .hk-nav__split-link { font-size: 12px; }
  .hk-nav__donation { padding-inline: 14px; }
  .hk-nav-panel--programmes { padding-inline: 20px; }
  .hk-workspace { grid-template-columns: 220px minmax(0,1fr) minmax(270px,300px); gap: 16px; height: 500px; }
  .hk-audience-control { flex-basis: 70px; height: 70px; padding-inline: 16px 8px; font-size: 30px; }
  .hk-workspace__content .hk-nav-panel__heading { font-size: 30px; }
  .hk-spotlight { min-height: 380px; }
  .hk-spotlight__body { padding: 20px; }
  .hk-spotlight__body h3 { font-size: 27px; }
}

@media (max-width: 1023px) {
  .hk-nav__desktop { display: none; }
  .hk-nav__mobile-toggle { display: flex; }
  .hk-mobile-stage { display: block; }
  .hk-nav__bar { padding-inline: 18px; }
  .hk-nav__actions { margin-left: auto; }
  .hk-nav__donation { display: none; }
  .hk-nav__panel-root { display: none; }
}

@media (max-width: 640px) {
  .hk-nav__bar { height: 70px; }
  .hk-nav__logo img { height: 40px; }
  .hk-nav__menu-word { display: none; }
  .hk-mobile-primary__item { min-height: 58px; font-size: clamp(30px,10vw,46px); }
  .hk-mobile-primary__item--donation { min-height: 42px; font-size: 13px; }
}

/* Card Hierarchy */
.card-primary {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-top: 4px solid #00C2B2;
  border-radius: 2rem;
}
.card-standard {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #e8e8e8;
  border-radius: 2rem;
}
.card-minimal {
  border-radius: 16px;
  background: #F4F5F6;
}

/* Social icons — hidden by default, shown via JS when links exist */
.social-icon-wrap { display: none; }
.social-icon-wrap.has-links { display: flex; }

/* Hero scroll indicator pulse (team / content pages) */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}
#hero-scroll-indicator svg { animation: scrollPulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #hero-scroll-indicator svg { animation: none; }
}

/* ── Hero Editorial Concert Hall (index.html) ── */
.hero-photo {
  opacity: 0.65;
}
.hero-top-gradient {
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.15) 60%, transparent 100%);
}
.hero-vignette {
  background: radial-gradient(circle at 50% 70%, rgba(0, 128, 128, 0.15) 0%, rgba(5, 5, 5, 0.25) 45%, rgba(5, 5, 5, 0.75) 100%);
}
.hero-stage-glows {
  position: relative;
  width: 100%;
  height: 12rem;
  max-width: none;
  aspect-ratio: auto;
}
.hero-glow-amber {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24rem;
  height: 24rem;
  translate: -50% 25%;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.04);
  filter: blur(48px);
  mix-blend-mode: screen;
}
.hero-glow-teal {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20rem;
  height: 20rem;
  translate: -50% 20%;
  border-radius: 9999px;
  background: rgba(20, 184, 166, 0.04);
  filter: blur(48px);
  mix-blend-mode: screen;
}
.hero-arc {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  border-radius: 9999px;
  background: transparent;
  aspect-ratio: 1;
}
.hero-arc-outer {
  width: 180%;
  bottom: 3rem;
  border: 1px solid rgba(245, 158, 11, 0.04);
}
.hero-arc-mid {
  width: 170%;
  bottom: 5rem;
  border: 1px solid rgba(245, 158, 11, 0.06);
}
.hero-arc-inner {
  width: 150%;
  bottom: 9rem;
  border: 1px solid rgba(20, 184, 166, 0.03);
}
@media (min-width: 768px) {
  .hero-arc-outer { width: 120%; }
  .hero-arc-mid { width: 110%; }
  .hero-arc-inner { width: 95%; }
}

.hero-floating-note {
  position: absolute;
  opacity: 0.035;
  pointer-events: none;
  will-change: transform;
}
.hero-floating-note-inner {
  display: block;
  will-change: transform;
}
.hero-floating-note-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

#hero-anchors {
  position: absolute;
  overflow: visible;
}
.hero-chevron {
  position: absolute;
  z-index: 31;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #f4f4f5;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: #52525b;
  padding: 0;
  transform: translate(-50%, -50%);
  animation: heroChevronBounce 2s ease-in-out infinite;
}
.hero-chevron svg {
  width: 1.25rem;
  height: 1.25rem;
}
.hero-chevron:hover,
.hero-chevron:focus-visible {
  color: #008080;
  outline: none;
}
@keyframes heroChevronBounce {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% + 6px)); }
}
.hero-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.25s ease;
}
.hero-anchor-aura {
  position: absolute;
  inset: -1rem;
  border-radius: 9999px;
  background: rgba(20, 184, 166, 0.12);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.hero-anchor:hover .hero-anchor-aura,
.hero-anchor:focus-visible .hero-anchor-aura {
  opacity: 1;
}
.hero-anchor-popover {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 2;
  display: block;
  width: 18rem;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 0.125rem;
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  overflow: hidden;
}
.hero-anchor-popover-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #008080, #27272a);
}
.hero-anchor-popover--align-start {
  left: 0;
  transform: translateY(8px);
}
.hero-anchor-popover--align-end {
  left: auto;
  right: 0;
  transform: translateY(8px);
}
.hero-anchor:hover .hero-anchor-popover,
.hero-anchor:focus-visible .hero-anchor-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hero-anchor:hover .hero-anchor-popover--align-start,
.hero-anchor:focus-visible .hero-anchor-popover--align-start {
  transform: translateY(0);
}
.hero-anchor:hover .hero-anchor-popover--align-end,
.hero-anchor:focus-visible .hero-anchor-popover--align-end {
  transform: translateY(0);
}
.hero-anchor-popover-chapter {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00C2B2;
}
.hero-anchor-popover-title {
  display: block;
  margin-top: 0.375rem;
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
}
.hero-anchor-popover-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
  color: #a1a1aa;
}
.hero-anchor-popover-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #008080;
}
.hero-anchor-popover-cta svg {
  width: 0.75rem;
  height: 0.75rem;
}
.hero-anchor-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #00C2B2;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.hero-anchor-node svg {
  width: 1.25rem;
  height: 1.25rem;
}
.hero-anchor:hover,
.hero-anchor:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
  outline: none;
}
.hero-anchor:hover .hero-anchor-node,
.hero-anchor:focus-visible .hero-anchor-node {
  background: linear-gradient(to top right, #008080, #006666);
  border-color: #009999;
  color: #fff;
  box-shadow: 0 4px 24px rgba(20, 184, 166, 0.2);
}
@media (min-width: 768px) {
  .hero-anchor-popover { width: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chevron { animation: none; }
  .hero-anchor,
  .hero-anchor-node,
  .hero-anchor-popover,
  .hero-anchor-aura {
    transition: none;
  }
}

/* Impact Card — active state + EQ bars (index, hkicf) */
/* Counted state — subtle persistent glow after the number has counted up
   (index homepage, 2026-07-26). Declared before .active so hover wins. */
.impact-card.counted > div {
  border-color: rgba(0, 194, 178, 0.45);
  box-shadow: 0 6px 24px -8px rgba(0, 194, 178, 0.12);
}
.impact-card.active > div {
  border-color: #00C2B2;
  box-shadow: 0 8px 30px -6px rgba(0, 194, 178, 0.18);
  background-color: #F0FDF9;
}
/* EQ soundboard — active (used by hkicf.html; index.html EQ bars are commented out in HTML) */
.impact-card.active .eq-bar { background-color: #00C2B2; }
.impact-card.active .eq-bar:nth-child(even) { background-color: #1A73E8; }
.impact-card.active .eq-bar:nth-child(1)  { animation: eqDance1 0.8s ease-in-out infinite; animation-delay: 0s; }
.impact-card.active .eq-bar:nth-child(2)  { animation: eqDance2 0.75s ease-in-out infinite; animation-delay: 0.05s; }
.impact-card.active .eq-bar:nth-child(3)  { animation: eqDance3 0.85s ease-in-out infinite; animation-delay: 0.1s; }
.impact-card.active .eq-bar:nth-child(4)  { animation: eqDance4 0.7s ease-in-out infinite; animation-delay: 0.15s; }
.impact-card.active .eq-bar:nth-child(5)  { animation: eqDance5 0.9s ease-in-out infinite; animation-delay: 0.2s; }
.impact-card.active .eq-bar:nth-child(6)  { animation: eqDance1 0.75s ease-in-out infinite; animation-delay: 0.12s; }
.impact-card.active .eq-bar:nth-child(7)  { animation: eqDance3 0.8s ease-in-out infinite; animation-delay: 0.18s; }
.impact-card.active .eq-bar:nth-child(8)  { animation: eqDance2 0.85s ease-in-out infinite; animation-delay: 0.08s; }
.impact-card.active .eq-bar:nth-child(9)  { animation: eqDance4 0.7s ease-in-out infinite; animation-delay: 0.22s; }
.impact-card.active .eq-bar:nth-child(10) { animation: eqDance5 0.9s ease-in-out infinite; animation-delay: 0.14s; }

/* EQ soundboard keyframes + reduced-motion override — active (used by hkicf.html; index.html EQ bars are commented out in HTML) */
@keyframes eqDance1 {
  0%, 100% { height: 15%; }
  25% { height: 75%; }
  50% { height: 35%; }
  75% { height: 90%; }
}
@keyframes eqDance2 {
  0%, 100% { height: 20%; }
  25% { height: 45%; }
  50% { height: 85%; }
  75% { height: 30%; }
}
@keyframes eqDance3 {
  0%, 100% { height: 10%; }
  25% { height: 60%; }
  50% { height: 25%; }
  75% { height: 80%; }
}
@keyframes eqDance4 {
  0%, 100% { height: 25%; }
  25% { height: 50%; }
  50% { height: 95%; }
  75% { height: 40%; }
}
@keyframes eqDance5 {
  0%, 100% { height: 18%; }
  25% { height: 70%; }
  50% { height: 20%; }
  75% { height: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-card.active .eq-bar { animation: none !important; height: 10% !important; }
}

/* ===== Section Library — typography ===== */
.section-kicker {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1;
  text-transform: uppercase;
  /* Color set per-instance via Tailwind class — no default color */
}
@media (min-width: 768px) {
  .section-kicker { font-size: 1rem; }
}
.section-headline {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 4.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ===== Section Library — form (T15) ===== */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2C3E50;
  margin-bottom: 0.375rem;
}
.form-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.75rem 1rem;
  color: #2C3E50;
  font-size: 1rem;
  line-height: 1.5;
}
.form-input:focus {
  outline: none;
  border-color: #00C2B2;
  box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.2);
}

/* ===== Section Library — background flow ===== */
.flow-white {
  --flow-start: #ffffff;
  --flow-end: #ffffff;
  background: linear-gradient(to bottom, var(--flow-start) 0%, var(--flow-end) 100%);
}
.flow-blue-tint {
  --flow-start: #ffffff;
  --flow-end: #ecf3f9;
  background: linear-gradient(to bottom, var(--flow-start) 0%, #f6f9fc 45%, var(--flow-end) 100%);
}
.flow-teal-tint {
  --flow-start: #ffffff;
  --flow-end: #e0f8f6;
  background: linear-gradient(to bottom, var(--flow-start) 0%, #f0fdfa 50%, var(--flow-end) 100%);
}
.flow-purple-tint {
  --flow-start: #ffffff;
  --flow-end: #f5f0ff;
  background: linear-gradient(to bottom, var(--flow-start) 0%, #faf5ff 55%, var(--flow-end) 100%);
}
.flow-amber-tint {
  --flow-start: #ffffff;
  --flow-end: #fffbeb;
  background: linear-gradient(to bottom, var(--flow-start) 0%, #fffbeb 60%, var(--flow-end) 100%);
}
.flow-connect-next {
  padding-bottom: 0;
}
.flow-connect-next + .flow-blue-tint,
.flow-connect-next + .flow-teal-tint,
.flow-connect-next + .flow-white {
  margin-top: 0;
}
.flow-break {
  /* explicit hard break — no gradient bleed */
}

/* Category lane washes (3–8% opacity) */
.tint-schools { background-color: rgba(59, 130, 246, 0.05); }
.tint-individuals { background-color: rgba(168, 85, 247, 0.05); }
.tint-corporates { background-color: rgba(245, 158, 11, 0.05); }

/* ============================================================
   Flow canvas — homepage continuous background (2026-07-15)
   The page reads as one composed canvas: each section hands its
   end color to the next section's start color. No hard breaks
   except intentional spotlight moments (see .stage-dark).
   Tokens: tailwind.config.js → theme.extend.colors.flow
   ============================================================ */
.flow-canvas-identity {
  background: linear-gradient(to bottom, #FFFFFF 0%, #f0f5fa 100%);
}
.flow-canvas-programs {
  background: linear-gradient(to bottom, #f0f5fa 0%, #ecf3f9 100%);
}
.flow-canvas-impact {
  /* Picks up #ecf3f9 from .flow-canvas-programs — seam fix */
  background: linear-gradient(to bottom, #ecf3f9 0%, #FFFFFF 45%, #F6F9FC 100%);
}
.flow-canvas-support {
  /* Descent toward the dark footer: ground → card surface */
  background: linear-gradient(to bottom, #F4F5F6 0%, #E4E8EC 100%);
}
.flow-canvas-connected {
  background: #E4E8EC;
}
/* Staff lines need more presence on the deeper connected tint */
.flow-canvas-connected .staff-grid-bg { opacity: 0.55; }

/* Dark stage — the intentional spotlight moment (What's On).
   Transitions in/out are handled by .curve-divider, not hard edges. */
.stage-dark {
  background: linear-gradient(135deg, #1C2321 0%, #2a3a38 50%, #1C2321 100%);
}

/* Curve divider — SVG arch at the bottom of a section, filled with
   the NEXT section's background color (brand curve transitions).
   Place absolutely inside the upper section. */
.curve-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 4rem;
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 768px) {
  .curve-divider { height: 6rem; }
}

/* Staff-sheet motif variants (base .staff-grid-bg defined above) */
.staff-grid-bg--soft { opacity: 0.15; }
.staff-grid-bg--dark {
  opacity: 0.5;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 11px,
    rgba(255,255,255,0.05) 11px, rgba(255,255,255,0.05) 11.5px,
    transparent 11.5px, transparent 23px,
    rgba(255,255,255,0.05) 23px, rgba(255,255,255,0.05) 23.5px,
    transparent 23.5px, transparent 35px,
    rgba(255,255,255,0.05) 35px, rgba(255,255,255,0.05) 35.5px,
    transparent 35.5px, transparent 47px,
    rgba(255,255,255,0.05) 47px, rgba(255,255,255,0.05) 47.5px,
    transparent 47.5px, transparent 59px,
    rgba(255,255,255,0.05) 59px, rgba(255,255,255,0.05) 59.5px,
    transparent 59.5px, transparent 96px
  );
}

/* Floating music-note accent — quiet brand motif for section edges.
   Uses Lucide music glyph; gentle CSS float. Decorative only. */
.motif-note {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: #00C2B2;
  opacity: 0.14;
  animation: motifFloat 7s ease-in-out infinite;
}
.motif-note--ink { color: #2C3E50; opacity: 0.10; }
.motif-note--slow { animation-duration: 10s; }
@keyframes motifFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motif-note { animation: none; }
}

/* Photo stack — tilted backing photo behind a featured image
   (client-approved stacked-card pattern from solo-ccm event recap). */
.photo-stack { position: relative; z-index: 0; }
.photo-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background-image: var(--stack-image);
  background-size: cover;
  background-position: center;
  transform: rotate(-6deg) translate(-6%, 4%);
  box-shadow: 0 20px 50px rgba(28, 35, 33, 0.18);
  z-index: -1;
}
.photo-stack--community { --stack-image: url(/assets/images/events/260207_2220_HKICF26_AL903814.jpg); }
@media (max-width: 767px) {
  .photo-stack::before { transform: rotate(-4deg) translate(-4%, 3%); }
}

/* Participation Highlights — fan deck on desktop, snap row on mobile.
   Cards are waist-aligned (vertical centers share one line) and surfaces are
   opaque color-mix tints (token hue over white) so overlapping cards
   properly occlude each other. The hairline is an inset box-shadow ring, not
   a real border, so images sit flush against the card's outer edge. */
.participation-deck {
  position: relative;
  width: min(100%, 1120px);
  min-height: 490px;
  margin-inline: auto;
  overflow: visible;
}
.participation-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vw, 300px);
  transform: translateX(calc(-50% + var(--deck-x))) translateY(-50%) rotate(var(--deck-rotate));
  transform-origin: 50% 50%;
  z-index: var(--deck-z);
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(28, 35, 33, 0.10),
              0 16px 34px -18px rgba(28, 35, 33, 0.42),
              0 3px 9px rgba(28, 35, 33, 0.08);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 400ms ease;
  cursor: default;
}
.participation-card:hover,
.participation-card:focus-visible,
.participation-card.is-active {
  transform: translateX(calc(-50% + var(--deck-x))) translateY(calc(-50% - 28px)) rotate(0deg) scale(1.04);
  z-index: 20;
  box-shadow: inset 0 0 0 1px rgba(0, 194, 178, 0.45),
              0 24px 55px -16px rgba(28, 35, 33, 0.30);
}
.participation-card:focus-visible {
  outline: 3px solid rgba(0, 194, 178, 0.55);
  outline-offset: 5px;
}
.participation-card:nth-child(1) { --deck-x: clamp(-450px, -35vw, -420px); --deck-rotate: -4.5deg; --deck-z: 1; background-color: color-mix(in srgb, #00C2B2 5%, #fff); }
.participation-card:nth-child(2) { --deck-x: clamp(-225px, -17.5vw, -210px); --deck-rotate: 3deg; --deck-z: 2; background-color: color-mix(in srgb, #3B82F6 5%, #fff); }
.participation-card:nth-child(3) { --deck-x: 0px; --deck-rotate: -2deg; --deck-z: 3; background-color: color-mix(in srgb, #F59E0B 5%, #fff); }
.participation-card:nth-child(4) { --deck-x: clamp(210px, 17.5vw, 225px); --deck-rotate: 3deg; --deck-z: 2; background-color: color-mix(in srgb, #A855F7 5%, #fff); }
.participation-card:nth-child(5) { --deck-x: clamp(420px, 35vw, 450px); --deck-rotate: -4.5deg; --deck-z: 1; background-color: color-mix(in srgb, #F43F5E 5%, #fff); }
.participation-card__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.participation-card__image img {
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.participation-card:hover .participation-card__image img,
.participation-card:focus-visible .participation-card__image img,
.participation-card.is-active .participation-card__image img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .participation-card,
  .participation-card__image img {
    transition: none;
  }
  .participation-card:hover,
  .participation-card:focus-visible,
  .participation-card.is-active {
    transform: translateX(calc(-50% + var(--deck-x))) translateY(-50%);
  }
  .participation-card:hover .participation-card__image img,
  .participation-card:focus-visible .participation-card__image img,
  .participation-card.is-active .participation-card__image img {
    transform: none;
  }
}
@media (max-width: 1199px) {
  .participation-deck {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 1.5rem 1.5rem;
  }
  .participation-deck::-webkit-scrollbar { display: none; }
  .participation-card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(84vw, 340px);
    width: min(84vw, 340px);
    min-height: 0;
    transform: none;
    scroll-snap-align: center;
    z-index: auto;
  }
  .participation-card:nth-child(n) {
    --deck-x: 0px;
    --deck-rotate: 0deg;
    --deck-z: 1;
  }
  .participation-card:hover,
  .participation-card:focus-visible,
  .participation-card.is-active {
    transform: none;
    z-index: auto;
  }
  .participation-card:hover .participation-card__image img,
  .participation-card:focus-visible .participation-card__image img,
  .participation-card.is-active .participation-card__image img {
    transform: none;
  }
  .participation-card:focus-visible {
    outline-offset: 3px;
  }
}

/* Resonance cards — dual-identity pattern (ported from index.html inline
   styles 2026-07-24; now shared by homepage + overseas-tour travel formats).
   Tour page uses the static gutter variant: staff lines only, no JS anchor. */
.resonance-card {
  background: #fff;
  border-radius: 2rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease,
              border-color 0.4s ease;
  overflow: hidden;
  position: relative;
}
.resonance-card:hover,
.resonance-card.resonance-active {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -12px rgba(0, 194, 178, 0.18);
  border-color: rgba(0, 194, 178, 0.35);
}
.resonance-img-wrap { overflow: hidden; position: relative; }
.resonance-img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.resonance-card:hover .resonance-img,
.resonance-card.resonance-active .resonance-img { transform: scale(1.05); }

.resonance-gutter {
  position: relative;
  width: 80px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .resonance-gutter { display: none; }
  .resonance-card-wrap { flex-direction: column !important; gap: 1.5rem !important; }
  .resonance-card { max-width: 100% !important; }
}

.staff-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(0,0,0,0.06);
}
/* Positions via nth-child so pages need no inline styles.
   Homepage's inline top:% styles still win there (inline > stylesheet). */
.resonance-gutter .staff-line:nth-child(1) { top: 15%; }
.resonance-gutter .staff-line:nth-child(2) { top: 30%; }
.resonance-gutter .staff-line:nth-child(3) { top: 45%; }
.resonance-gutter .staff-line:nth-child(4) { top: 60%; }
.resonance-gutter .staff-line:nth-child(5) { top: 75%; }

/* Support cards — deck language (staggered offsets, signature colors,
   hover glow + lift). Homepage #support-us (2026-07-15). */
.support-card {
  --sig-color: #00C2B2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.support-card:hover,
.support-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -12px color-mix(in srgb, var(--sig-color) 30%, transparent);
}
.support-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--sig-color);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.support-card:hover::after,
.support-card:focus-visible::after {
  opacity: 0.85;
}
.support-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.support-card:hover .support-card__bg,
.support-card:focus-visible .support-card__bg {
  transform: scale(1.05);
}
.support-card__cta {
  color: #ffffff;
}
.support-card--individuals { --sig-color: #A855F7; }
.support-card--donate { --sig-color: #1A73E8; }
.support-card--corporates { --sig-color: #F59E0B; }

/* Taller portrait language (PM direction 2026-07-15) */
@media (min-width: 768px) {
  .support-card { min-height: 560px; }
}

/* ============================================================
   Unified card hover (2026-07-15) — ONE hover language.
   Lift + teal-tinted shadow + border brighten. The only other
   expression is the signature-glow on dark photo cards
   (.support-card). No ribbons, no tint washes, no bg swaps.
   ============================================================ */
.card-hover {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -12px rgba(0, 194, 178, 0.18);
  border-color: rgba(0, 194, 178, 0.35);
}

/* Note particle color is context-aware: cards declare --note-color.
   Support-card notes rise ~44px and float above the card onto the light
   section background, so white is invisible — use each card's signature
   color (readable on both the dark photo and the light section). */
.support-card { --note-color: var(--sig-color, #00C2B2); }

/* Hairline fade divider — quiet rhythm separator between sections
   (same device as the Where Art Meets Heart boundary line). */
.hr-fade {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(39,47,49,0.14) 20%, rgba(39,47,49,0.4) 50%, rgba(39,47,49,0.14) 80%, transparent 100%);
}

/* Footer cutout — footer overlaps the preceding section (negative
   margin) and its top edge is arch-masked, so the previous section
   shows through the transparent region while the footer's own
   background (dark + map image) fills the arch. (2026-07-15) */
.footer-cutout {
  margin-top: -4rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C360,0 1080,0 1440,96 L1440,96 L0,96 Z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C360,0 1080,0 1440,96 L1440,96 L0,96 Z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 4rem, 100% calc(100% - 4rem + 1px);
  mask-size: 100% 4rem, 100% calc(100% - 4rem + 1px);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .footer-cutout {
    margin-top: -6rem;
    -webkit-mask-size: 100% 6rem, 100% calc(100% - 6rem + 1px);
    mask-size: 100% 6rem, 100% calc(100% - 6rem + 1px);
  }
}
.support-card__cta svg,
.support-card__cta i {
  transition: transform 0.3s ease;
}
.support-card:hover .support-card__cta svg,
.support-card:hover .support-card__cta i {
  transform: translateX(4px);
}

/* ===== Accent overlays ===== */
.accent-spinning-badge {
  position: absolute;
  width: 7rem;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A73E8;
  border-radius: 9999px;
  box-shadow: 0 10px 30px -5px rgba(26, 115, 232, 0.4);
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .accent-spinning-badge { width: 9rem; height: 9rem; }
}
.accent-pos-br { bottom: 1.5rem; right: 1.5rem; }
.accent-pos-bl { bottom: 1.5rem; left: -0.5rem; }
.accent-pos-tr { top: 15%; right: -1rem; }
.accent-spinning-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: accentSpin 20s linear infinite;
}
.accent-spinning-badge__icon { position: relative; z-index: 1; }
@keyframes accentSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .accent-spinning-badge__ring { animation: none; }
}
.accent-corner-label {
  position: absolute;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
  border: 1px solid #f1f5f9;
  transform: rotate(-6deg);
  min-width: 140px;
}
.accent-number-badge {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.accent-dangle-photo {
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 0.75rem;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ===== V-audience-card-deck ===== */
.audience-deck-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.audience-deck-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
  transition: transform 0.5s ease;
}
.audience-deck-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: inherit;
  padding: 1.25rem;
}
.audience-deck-card__title {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.audience-deck-card__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
  padding-top: 2rem;
}
.audience-deck-card:hover .audience-deck-card__inner,
.audience-deck-card.is-hovered .audience-deck-card__inner {
  border-color: var(--sig-color, #00C2B2);
  box-shadow: 0 8px 30px rgba(0, 194, 178, 0.2);
}
.audience-deck-card:hover .audience-deck-card__title,
.audience-deck-card.is-hovered .audience-deck-card__title {
  color: #fff;
}
.audience-deck-card:hover .audience-deck-card__bg,
.audience-deck-card.is-hovered .audience-deck-card__bg {
  transform: scale(1.05);
}
.audience-deck-card { --sig-color: #00C2B2; }
.audience-deck-card[data-signature-color] { --sig-color: attr(data-signature-color); }

/* ===== Programme filter (Flowbite-inspired) ===== */
.programme-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4A5568;
  background: #fff;
  border: 1px solid #e2e8f0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.programme-filter-btn:hover { border-color: #00C2B2; color: #009b8e; }
.programme-filter-btn.is-active,
.programme-filter-btn[aria-selected="true"] {
  background: #00C2B2;
  color: #fff;
  border-color: #00C2B2;
}
.programme-filter-btn:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
}
.programme-filter-card { transition: opacity 0.2s, transform 0.2s; }
.programme-filter-card.is-hidden {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .programme-filter-card { transition: none; }
}

/* ===== Layout library page ===== */
.library-index {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(28, 35, 33, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.library-index a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.library-index a:hover { background: rgba(0, 194, 178, 0.2); color: #fff; }
.library-demo-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #009b8e;
  background: #e0f8f6;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== V-carousel-radial-marquee ===== */
/* Spinning programme wheel — fixed 18 slots at 20°, ported from
   context/reference/hadi-hero (radial marquee).
   Progressive enhancement: without JS the cards render as a horizontal swipe
   row; assets/js/radial-marquee.js clones them into the fixed slots, sets the
   per-slot rotation angles, and adds .is-enhanced to switch to radial mode. */
.radial-marquee {
  /* fluid card width: 13rem @320px → 18rem @1440px (reference formula) */
  --rm-item-size: clamp(13rem, 11.5714rem + 7.1429vw, 18rem);
  --rm-y: 300%;
  --rm-y-offset: calc((var(--rm-y) * -1) + 50%);
  position: relative;
  width: 100%;
}

/* --- Card (shared by fallback row and radial mode) --- */
.radial-marquee__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #E4E8EC; /* surface.card */
  box-shadow: 2px 20px 50px rgba(16, 28, 44, 0.3);
}
.radial-marquee__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.radial-marquee__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 0.85rem 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  /* lighter darken than the support-card treatment — PM 2026-07-20 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
  /* Always visible at rest (client request 2026-07-26): ~75% presence,
     smaller type. Hover/focus escalates to full size + full opacity. */
  opacity: 0.75;
  transition: opacity 0.25s ease, font-size 0.25s ease, padding 0.25s ease;
  pointer-events: none;
}
.radial-marquee__item:hover .radial-marquee__name,
.radial-marquee__item:focus-visible .radial-marquee__name {
  opacity: 1;
  font-size: 1.25rem;
  padding: 2.5rem 1.1rem 1.1rem;
}
/* No hover on touch — name stays visible so taps are never blind */
@media (hover: none) {
  .radial-marquee__name {
    opacity: 1;
    font-size: 1rem;
    padding: 2rem 0.85rem 0.85rem;
  }
}
/* --- Hover interactions (support-card language, 2026-07-20 PM direction) ---
   Glow border + light-up (brighter img, less darken) + random note pop.
   Colors: JS rolls one of the four category colors per hover and sets
   --sig-color/--note-color on the item (PM choice: random, not per-programme).
   Default teal is the pre-hover/fallback color. */
.radial-marquee__item {
  --sig-color: #00C2B2; /* brand.teal fallback */
  --note-color: #00C2B2;
}
.radial-marquee__card {
  transition: box-shadow 0.5s ease;
}
.radial-marquee__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--sig-color, #00C2B2);
  opacity: 0;
  transition: opacity 0.4s ease, border-color 0.3s ease;
  pointer-events: none;
}
.radial-marquee__item:hover .radial-marquee__card::after,
.radial-marquee__item:focus-visible .radial-marquee__card::after {
  opacity: 0.85;
}
.radial-marquee__item:hover .radial-marquee__card,
.radial-marquee__item:focus-visible .radial-marquee__card {
  box-shadow: 0 24px 60px -12px color-mix(in srgb, var(--sig-color, #00C2B2) 30%, transparent), 2px 20px 50px rgba(16, 28, 44, 0.3);
}
.radial-marquee__card img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.radial-marquee__item:hover .radial-marquee__card img,
.radial-marquee__item:focus-visible .radial-marquee__card img {
  transform: scale(1.05);
  filter: brightness(1.06);
}
/* Random popping note (deck motif adapted from singspiration) —
   spawned by radial-marquee.js on mouseenter */
.radial-marquee__note {
  position: absolute;
  /* starts over the photo's top-right corner and floats a short hop — a longer
     travel would escape the wheel's overflow:clip for cards near the top */
  top: 18px;
  right: 14px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--note-color, #00C2B2);
  pointer-events: none;
  z-index: 20;
  animation: radialNotePop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes radialNotePop {
  0% { transform: scale(0.3) translateY(0); opacity: 1; }
  60% { transform: scale(1.3) translateY(-26px); opacity: 1; }
  100% { transform: scale(1.3) translateY(-34px); opacity: 0; }
}

.radial-marquee__item:focus-visible {
  outline: 2px solid #00C2B2; /* brand.teal */
  outline-offset: 4px;
  border-radius: 1rem;
}

/* --- No-JS fallback: horizontal swipe row --- */
.radial-marquee__list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 1.5rem 2rem;
  scroll-snap-type: x mandatory;
}
.radial-marquee__item {
  flex: none;
  width: var(--rm-item-size);
  scroll-snap-align: center;
  display: block;
}

/* --- Enhanced radial mode (JS adds .is-enhanced) --- */
.radial-marquee.is-enhanced {
  /* Geometry contract (2026-07-20 holistic pass):
     --rm-card-gap: FIXED px distance from header text to center card top —
       intentionally NOT responsive; same visual gap at every screen width.
     --rm-root-h: container height per breakpoint = gap + full card height
       + 96px fade zone + breathing room. Derived from the card size, never
       hand-tuned — smaller screens get TALLER containers so the full card
       always fits (the old 23rem mobile height clipped half the card). */
  --rm-card-gap: 3rem;
  --rm-root-h: 48rem;
  height: var(--rm-root-h);
  overflow: clip;
  pointer-events: none; /* wheel never blocks scroll/text selection; cards re-enable below */
}
@media (max-width: 991px) { .radial-marquee.is-enhanced { --rm-root-h: 42rem; } }
@media (max-width: 767px) { .radial-marquee.is-enhanced { --rm-root-h: 39rem; } }
@media (max-width: 479px) { .radial-marquee.is-enhanced { --rm-root-h: 36rem; } }

.radial-marquee.is-enhanced .radial-marquee__layout {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 140em;
  height: 100%;
  /* reference renders 1em = 18px here → 140em = 2520px circle */
  font-size: 1.125rem;
}
.radial-marquee.is-enhanced .radial-marquee__mask {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 130%;
  overflow: hidden;
  /* fixed 96px bottom dissolve anchored to the container's bottom edge
     (always below the center card, at every breakpoint) */
  -webkit-mask-image: linear-gradient(#000 calc(var(--rm-root-h) - 96px), #0000 var(--rm-root-h));
  mask-image: linear-gradient(#000 calc(var(--rm-root-h) - 96px), #0000 var(--rm-root-h));
}
.radial-marquee.is-enhanced .radial-marquee__circle {
  position: absolute;
  /* cardTop = circleTop + radius(70em) − 3×cardH; solving circleTop so
     cardTop == --rm-card-gap at EVERY viewport width (3×cardH = 16/3 × width):
     one formula replaces the old per-breakpoint top percentages that broke
     on small screens (fixed 1260px radius vs shrinking cards pushed cards
     ~150px down and out of the container). */
  top: calc(var(--rm-card-gap) + (var(--rm-item-size) * 5.3334) - 70em);
  width: 100%;
  aspect-ratio: 1;
  transform: rotate(-90deg);
  will-change: transform;
}

.radial-marquee.is-enhanced .radial-marquee__list {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 0;
  overflow: visible;
  transform-origin: 50%;
  animation: radialMarqueeRotate 90s linear infinite;
  will-change: transform;
}
.radial-marquee.is-enhanced .radial-marquee__item {
  position: absolute;
  flex: none;
  width: var(--rm-item-size);
  transform-origin: center var(--rm-y);
  pointer-events: auto; /* cards stay clickable inside the pointer-events:none wrap */
}
/* Pause rotation while hovering or tabbing through cards */
.radial-marquee.is-enhanced:hover .radial-marquee__list,
.radial-marquee.is-enhanced:focus-within .radial-marquee__list {
  animation-play-state: paused;
}
/* Edge fade into the flow-canvas background (flow.blue-start / flow.blue-mid tokens) */
.radial-marquee.is-enhanced .radial-marquee__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(270deg, #f0f5fa, rgba(240, 245, 250, 0) 5%, rgba(240, 245, 250, 0) 95%, #f0f5fa);
  pointer-events: none;
}
@keyframes radialMarqueeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .radial-marquee.is-enhanced .radial-marquee__list {
    animation: none; /* static arc of cards */
  }
}

/* ===== V-carousel-coverflow-3d ===== */
.coverflow-3d {
  --coverflow-card-w: 280px;
  --coverflow-card-h: 380px;
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  overflow: visible;
  outline: none;
}
@media (min-width: 768px) {
  .coverflow-3d {
    --coverflow-card-w: 360px;
    --coverflow-card-h: 420px;
    min-height: 480px;
  }
}
.coverflow-3d:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 4px;
}
.coverflow-3d__stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}
.coverflow-3d__card {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  background-color: #1a1a1a;
  cursor: pointer;
  user-select: none;
}
.coverflow-3d__card.is-active {
  cursor: pointer;
}
.coverflow-3d__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.coverflow-3d__dim {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}
.coverflow-3d__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}
.coverflow-3d__category {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  pointer-events: none;
}
.coverflow-3d__category--school { background: #3b82f6; }
.coverflow-3d__category--organization { background: #f59e0b; }
.coverflow-3d__category--individuals { background: #a855f7; }
.coverflow-3d__title-overlay {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.coverflow-3d__title-overlay .coverflow-3d__heading {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.coverflow-3d__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.coverflow-3d__content .coverflow-3d__heading {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.coverflow-3d__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.coverflow-3d__cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00C2B2;
}
.coverflow-3d.is-paused .coverflow-3d__card.is-active.is-revealed .coverflow-3d__content {
  opacity: 1;
  transform: translateY(0);
}
.coverflow-3d.is-paused .coverflow-3d__card.is-active.is-revealed .coverflow-3d__title-overlay {
  opacity: 0;
  transform: translateY(8px);
}
/* Pillar variant (about-us) */
.coverflow-3d__card--pillar {
  background: transparent;
  cursor: default;
}
.coverflow-3d__card--pillar.is-active {
  cursor: default;
}
.coverflow-3d__card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.coverflow-3d__card--pillar .coverflow-3d__media {
  flex-shrink: 0;
  height: 55%;
  overflow: hidden;
  position: relative;
}
.coverflow-3d__card--pillar .coverflow-3d__media .coverflow-3d__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coverflow-3d__card--pillar .coverflow-3d__body {
  flex: 1;
  padding: 1rem 1.25rem 1.25rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.coverflow-3d__card--pillar .coverflow-3d__heading {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.coverflow-3d__card--pillar .coverflow-3d__desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.coverflow-3d.is-paused .coverflow-3d__card--pillar.is-active.is-revealed .coverflow-3d__desc {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .coverflow-3d__card,
  .coverflow-3d__content,
  .coverflow-3d__title-overlay,
  .coverflow-3d__desc,
  .coverflow-3d__dim {
    transition: none !important;
  }
}

/* =============================================
   Note-Worthy Chats — Video Feed (2026-07-07)
   ============================================= */

/* Staff grid — 5-line musical staff repeating background */
.staff-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 11px,
    #D0D5D9 11px,
    #D0D5D9 11.5px,
    transparent 11.5px,
    transparent 23px,
    #D0D5D9 23px,
    #D0D5D9 23.5px,
    transparent 23.5px,
    transparent 35px,
    #D0D5D9 35px,
    #D0D5D9 35.5px,
    transparent 35.5px,
    transparent 47px,
    #D0D5D9 47px,
    #D0D5D9 47.5px,
    transparent 47.5px,
    transparent 59px,
    #D0D5D9 59px,
    #D0D5D9 59.5px,
    transparent 59.5px,
    transparent 96px
  );
}

@media (max-width: 767px) {
  .staff-grid-bg {
    opacity: 0.15;
  }
}

/* Note icon + date — triangular rhythmic layout
   12 (big, top-left) → note (medium, center-right) → JUL (small, bottom-left) */
.video-row__date {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.note-icon {
  display: block;
  width: 36px;
  height: 36px;
  color: #A1A1AA;
  margin-top: 10px;
  flex-shrink: 0;
  transition: color 0.35s ease;
}

.date-day {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #2C3E50;
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.35s ease;
}

.date-month {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: #7F8C8D;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  transition: color 0.35s ease;
}

.video-row:hover .note-icon,
.video-row:hover .date-day {
  color: var(--accent-color, #00C2B2);
}

.video-row:hover .date-month {
  color: var(--accent-color, #00C2B2);
}

/* Title + watch link hover — uses random accent color */
.video-row__title:hover,
.video-row__watch-link:hover {
  color: var(--accent-color, #00C2B2) !important;
}

/* Resonance thumbnail — hover overlay + play icon + teal border */
.resonance-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.35s ease;
}

.resonance-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resonance-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 35, 33, 0.4);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.resonance-thumb .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  color: #FFFFFF;
  z-index: 2;
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.resonance-thumb:hover::after {
  opacity: 1;
}

.resonance-thumb:hover .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.resonance-thumb:hover {
  box-shadow: inset 0 0 0 2px var(--accent-color, #00C2B2);
}

/* Thumbnail fallback — no image or load failure */
.resonance-thumb.thumb-fallback {
  background: #E4E8EC;
}

.resonance-thumb.thumb-fallback::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: #A1A1AA;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect width='14' height='16' x='2' y='4' rx='2'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 0;
}

/* Video row — 4-column grid */
.video-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid #E4E8EC;
}

.video-row:last-child {
  border-bottom: none;
}

/* Column 1 — note-head date (layout defined above) */

/* Column 3 — text content */
.video-row__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Column 4 — watch link centering */
.video-row__watch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Desktop-only: static accent line is left of content */
@media (min-width: 768px) {
  .feed-accent-line {
    display: block;
  }
}

/* Mobile: stack columns vertically */
@media (max-width: 767px) {
  .video-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
    align-items: start;
  }

  .video-row__date {
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
  }

  .video-row__date .note-icon {
    width: 28px;
    height: 28px;
    margin-top: 8px;
  }

  .video-row__date .date-day {
    font-size: 1.5rem;
  }

  .video-row__watch {
    justify-content: flex-start;
  }

  .feed-accent-line {
    display: none;
  }
}

/* Entry animation — fade + slide up on scroll */
.video-row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.video-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion — kill all note-worthy animations */
@media (prefers-reduced-motion: reduce) {
  .note-icon,
  .note-icon *,
  .date-day,
  .date-month,
  .resonance-thumb,
  .resonance-thumb::after,
  .resonance-thumb .play-icon,
  .resonance-thumb *,
  .video-row,
  .video-row.visible,
  .featured-episode,
  .featured-episode *,
  .host-stack__card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .video-row {
    opacity: 1;
  }
}

/* =============================================
   Note-Worthy Chats — Stacked host photos (2026-07-20)
   Polaroid-style tilted photo pair, adapted from the
   solo-ccm "Event Recap & Looking Ahead" stack.
   ============================================= */

.host-stack__label {
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #A1A1AA;
  text-align: center;
  margin: 0 0 1.5rem;
}

.host-stack__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .host-stack__stage {
    aspect-ratio: 4 / 3;
  }
}

.host-stack__card {
  position: absolute;
  width: 48%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #E4E8EC;
  box-shadow: 0 20px 45px -18px rgba(28, 35, 33, 0.35);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

/* Same level — no height difference between the two hosts;
   48% width keeps the overlap while caption bars stay clear */
.host-stack__card--front {
  left: 3%;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%) rotate(-5deg);
}

.host-stack__card--back {
  right: 3%;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%) rotate(4deg);
}

.host-stack__card:hover,
.host-stack__card:focus-visible {
  z-index: 30;
  transform: translateY(-50%) rotate(0deg) scale(1.04);
  box-shadow: 0 28px 60px -20px rgba(28, 35, 33, 0.45);
}

.host-stack__card:focus-visible {
  outline: 3px solid #00C2B2;
  outline-offset: 4px;
}

.host-stack__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.host-stack__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00C2B2 0%, #0E7C74 100%);
  color: #FFFFFF;
  font-family: 'Futura', 'Jost', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.04em;
}

.host-stack__caption {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 0.75rem;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 4px 14px rgba(28, 35, 33, 0.12);
}

.host-stack__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2C3E50;
  line-height: 1.2;
}

.host-stack__role {
  font-size: 0.72rem;
  color: #7F8C8D;
  line-height: 1.35;
}

/* =============================================
   Note-Worthy Chats — Featured episode facade (2026-07-20)
   ============================================= */

.featured-episode {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 2rem;
  overflow: hidden;
  background: #1C2321;
  box-shadow: 0 24px 60px -24px rgba(28, 35, 33, 0.45);
  margin-bottom: 3.5rem;
}

.featured-episode__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
  text-align: left;
}

.featured-episode__facade:focus-visible {
  outline: 3px solid #00C2B2;
  outline-offset: 4px;
}

.featured-episode__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-episode__facade:hover .featured-episode__img,
.featured-episode__facade:focus-visible .featured-episode__img {
  transform: scale(1.04);
}

.featured-episode__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 35, 33, 0.92) 0%, rgba(28, 35, 33, 0.45) 40%, rgba(28, 35, 33, 0.05) 65%, rgba(28, 35, 33, 0.15) 100%);
}

.featured-episode__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 194, 178, 0.95);
  color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.featured-episode__facade:hover .featured-episode__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.featured-episode__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .featured-episode__meta {
    padding: 2.5rem 3rem;
    gap: 0.625rem;
  }
}

.featured-episode__eyebrow {
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00C2B2;
}

.featured-episode__title {
  color: #FFFFFF;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 56rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-episode__sub {
  color: rgba(255, 255, 255, 0.75);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
}

.featured-episode__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .featured-episode {
    margin-bottom: 2.5rem;
  }

  .featured-episode__play {
    width: 3.75rem;
    height: 3.75rem;
    top: 40%; /* shorter card — lift play button clear of the meta block */
  }
}

/* CJK punctuation fallback — episode titles use 【】and ｜, which the
   Latin-only webfonts (Jost/Noto Sans) don't cover. System CJK fonts only
   kick in for those glyphs; Latin text still renders in Noto Sans. */
.video-row__title,
.featured-episode__title {
  font-family: 'Noto Sans', 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans HK', 'Noto Sans CJK TC', sans-serif;
}

/* Archive label between featured card and rows */
.noteworthy-archive-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.noteworthy-archive-label__count {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: #A1A1AA;
}

.noteworthy-ep-tag {
  color: #A1A1AA;
}


/* =============================================
   Calendar Ruler — event listing date strip
   ============================================= */

.ruler-container {
  position: relative;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.ruler-container::-webkit-scrollbar { height: 4px; }
.ruler-container::-webkit-scrollbar-track { background: transparent; }
.ruler-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

.ruler-track {
  display: flex;
  gap: 0;
  min-width: max-content;
  padding: 0 48px 24px;
  align-items: flex-end;
  height: 110px;
  position: relative;
}
.ruler-baseline {
  position: absolute;
  bottom: 24px;
  left: 48px;
  right: 48px;
  height: 1.5px;
  background: #e2e8f0;
  pointer-events: none;
}

.ruler-tick {
  flex: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ruler-tick:hover { transform: scaleY(1.05); }
.ruler-tick__line {
  width: 1.5px;
  border-radius: 1px;
  transition: all 0.2s ease;
}
.ruler-tick:hover .ruler-tick__line { background: #0DDBC7 !important; width: 2px; }

/* Tick sizes */
.ruler-tick--minor .ruler-tick__line { height: 10px; background: #cbd5e1; }
.ruler-tick--medium .ruler-tick__line { height: 16px; background: #94a3b8; }
.ruler-tick--major { flex: 0 0 28px; }
.ruler-tick--major .ruler-tick__line { height: 26px; width: 2px; }
.ruler-tick--month .ruler-tick__line { height: 30px; width: 2.5px; }

.ruler-tick__label {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.ruler-tick__month-label {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #0DDBC7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 5px;
  pointer-events: none;
}
.ruler-tick__badge {
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  font-weight: 700;
  background: #fef9c3;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Tooltip */
.ruler-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: white;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  font-family: 'Jost', system-ui, sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 10;
}
.ruler-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e293b;
}
.ruler-tick:hover .ruler-tooltip { opacity: 1; }

/* Active tick */
.ruler-tick--active .ruler-tick__line {
  background: #0DDBC7 !important;
  width: 3px !important;
  box-shadow: 0 0 10px rgba(13, 219, 199, 0.45);
}
.ruler-tick--active .ruler-tick__label { color: #0DDBC7; font-weight: 700; }

/* Scroll arrow buttons */
.ruler-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  color: #0DDBC7;
  font-size: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ruler-scroll-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.15); transform: translateY(-50%) scale(1.05); }
.ruler-scroll-btn--left { left: 4px; }
.ruler-scroll-btn--right { right: 4px; }
.ruler-scroll-btn.is-hidden { display: none; }

/* Fade edges */
.ruler-fade-left,
.ruler-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.3s;
}
.ruler-fade-left { left: 0; background: linear-gradient(to right, white 30%, transparent); }
.ruler-fade-right { right: 0; background: linear-gradient(to left, white 30%, transparent); }
.ruler-fade-left.is-hidden,
.ruler-fade-right.is-hidden { opacity: 0; }


/* =============================================
   Event Row — listing page feed rows
   ============================================= */

.event-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.event-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.event-row--entering {
  opacity: 0;
  transform: translateY(24px);
}
.event-row--visible {
  opacity: 1;
  transform: translateY(0);
}

.event-row__date {
  width: 80px;
  text-align: center;
  flex-shrink: 0;
}
.event-row__day {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}
.event-row__month {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-row__thumb {
  width: 180px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e2e8f0;
}
.event-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.event-row:hover .event-row__thumb img { transform: scale(1.05); }

.event-row__info { flex: 1; min-width: 0; }
.event-row__badge {
  display: inline-flex;
  padding: 3px 10px;
  color: white;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.event-row__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-row__meta {
  font-size: 0.8rem;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.event-row__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.event-row__meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

.event-row__action {
  width: 90px;
  flex-shrink: 0;
  text-align: center;
  padding: 10px 0;
  background: white;
  border: 1.5px solid;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.event-row__action:hover { color: white !important; }

/* Mobile row stacking */
@media (max-width: 640px) {
  .event-row { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .event-row__date { width: auto; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .event-row__day { font-size: 1.5rem; }
  .event-row__thumb { width: 100%; height: 160px; order: 1; }
  .event-row__info { flex: 1 1 100%; order: 2; }
  .event-row__action { width: 100%; order: 3; }
}


/* =============================================
   Event Detail Page
   ============================================= */

.event-detail-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 100px;
  overflow: hidden;
}
.event-detail-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.event-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,35,33,0.95) 0%, rgba(28,35,33,0.4) 50%, rgba(28,35,33,0.7) 100%);
}
.event-detail-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  max-width: 720px;
}

.event-detail-info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  padding: 28px 32px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.event-detail-info__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.event-detail-info__icon {
  width: 44px;
  height: 44px;
  background: #f0fdfa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-detail-info__label {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.event-detail-info__value {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.95rem;
}
.event-detail-cta {
  margin-left: auto;
  padding: 12px 28px;
  background: #0DDBC7;
  color: white;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.event-detail-cta:hover { background: #00b8a0; }

.event-detail-section {
  padding: 40px 0;
}

/* Programme list */
.event-programme-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 8px;
}
.event-programme-item__num {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 600;
  width: 32px;
  flex-shrink: 0;
}
.event-programme-item__piece { flex: 1; font-weight: 500; font-size: 0.95rem; color: #1e293b; }
.event-programme-item__composer { font-weight: 400; color: #94a3b8; font-size: 0.85rem; }
.event-programme-item__performer { font-size: 0.8rem; color: #94a3b8; text-align: right; flex-shrink: 0; }

/* Performer cards */
.event-performer-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.event-performer-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.event-performer-card__photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #e2e8f0;
}
.event-performer-card--group .event-performer-card__photo { aspect-ratio: 16/9; }
.event-performer-card__body { padding: 14px 16px; }
.event-performer-card__name { font-weight: 600; font-size: 0.95rem; color: #1e293b; }
.event-performer-card__role { font-size: 0.8rem; color: #64748b; margin-top: 2px; }

/* More Events cards */
.more-event-card {
  background: #f8fafc;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}
.more-event-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.more-event-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #e2e8f0;
}
.more-event-card__body { padding: 14px; }
.more-event-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  margin-bottom: 6px;
}
.more-event-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.more-event-card__date { font-size: 0.75rem; color: #94a3b8; margin-top: 6px; }

/* Mobile detail page */
@media (max-width: 640px) {
  .event-detail-info { flex-direction: column; align-items: stretch; gap: 16px; }
  .event-detail-cta { margin-left: 0; text-align: center; }
  .event-programme-item { flex-wrap: wrap; }
  .event-programme-item__performer { text-align: left; width: 100%; margin-top: 4px; }
}

/* ═══════════════════════════════════════════
   Event Detail Page Redesign (event-template.html)
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.ed-hero {
  min-height: 60vh;
  position: relative;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1C2321 0%, #2a3a38 50%, #1C2321 100%);
}
.ed-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: top center;
  opacity: 0.22; mix-blend-mode: luminosity;
}
.ed-hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 35% 40%, transparent 30%, rgba(28,35,33,0.55) 70%, rgba(28,35,33,0.78) 100%);
}
.ed-hero__content {
  position: relative; z-index: 10;
  width: 100%; max-width: 80rem;
  margin-left: max(1.5rem, calc((100vw - 80rem) / 2));
  padding: 5rem 1.5rem 4rem;
}
.ed-hero__badge {
  display: inline-block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: #00C2B2;
  padding: 4px 12px; border-radius: 9999px;
  margin-bottom: 1rem;
}
.ed-hero__title {
  font-family: 'Jost', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; color: #fff;
  margin-bottom: 1.25rem;
  max-width: 42rem;
}
.ed-hero__meta {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2.5rem; margin-bottom: 1.5rem;
}
.ed-hero__meta-item {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.92rem; color: rgba(255,255,255,0.70);
  line-height: 1.4;
}
.ed-hero__meta-icon { color: #00C2B2; flex-shrink: 0; margin-top: 1px; }
.ed-hero__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #00C2B2; color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  padding: 12px 28px; border-radius: 9999px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.ed-hero__cta:hover { background: #009b8e; }
.ed-hero__curve {
  position: absolute; bottom: 0; width: 100%;
  height: clamp(1.5rem, 3vw, 2.5rem); z-index: 20;
}

/* ── Sections ── */
.ed-section { padding: 4.5rem 1.5rem; background: #fff; }
.ed-section--alt { background: #F4F5F6; }
.ed-section__inner { max-width: 80rem; margin: 0 auto; }
.ed-section__wide  { max-width: 80rem; margin: 0 auto; }
.ed-section__full  { max-width: 80rem; margin: 0 auto; }
.ed-section__label {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #00C2B2; margin-bottom: 0.5rem;
  display: block;
}
.ed-section__heading {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600; color: #2C3E50;
  line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.ed-section__heading--light { color: #fff; }

/* ── Performers — team card style ── */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 1024px) { .perf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .perf-grid { grid-template-columns: repeat(2, 1fr); } }
.perf-card {
  display: block; position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px; overflow: hidden;
  background: #cbd5e1;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.perf-card:hover { transform: translateY(-4px); }
.perf-card:focus-visible { outline: 2px solid #00C2B2; outline-offset: 2px; }
.perf-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.perf-card:hover .perf-card__photo { transform: scale(1.04); }
.perf-card__gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(28,35,33,0.9) 0%, rgba(28,35,33,0.6) 35%, rgba(28,35,33,0.25) 65%, transparent 100%);
}
.perf-card__body {
  position: absolute; bottom: 1rem; left: 14px; right: 14px; z-index: 10;
}
.perf-card__name {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: 1.05rem; font-weight: 600;
  color: #fff; letter-spacing: -0.02em; line-height: 1.2;
}
@media (min-width: 1024px) { .perf-card__name { font-size: 1.15rem; } }
.perf-card__role {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.8rem; font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.3; margin-top: 0.2rem;
}
.perf-card__photo--placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #e8edf2 0%, #d5dce4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}

/* ── About + Map ── */
.ed-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .ed-about-grid { grid-template-columns: 1fr; }
}
.ed-about-text {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1rem; line-height: 1.7;
  color: #475569;
}
.ed-pullquote {
  margin: 1.5rem 0 0; padding-left: 1.25rem;
  border-left: 3px solid #00C2B2;
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem; font-weight: 500;
  line-height: 1.5; color: #1C2321;
}
.ed-map {
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  position: relative;
}
.ed-map iframe {
  width: 100%; height: 220px; border: 0; display: block;
}
.ed-map__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer; text-decoration: none;
  transition: background 0.3s ease;
}
.ed-map__overlay:hover { background: rgba(0,0,0,0.06); }
.ed-map__cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; color: #2C3E50;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  padding: 7px 16px; border-radius: 9999px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ed-map__overlay:hover .ed-map__cta { opacity: 1; transform: translateY(0); }

/* ── Programme (dark section) ── */
.ed-prog-dark {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1C2321 0%, #2a3a38 50%, #1C2321 100%);
}
.ed-prog-dark__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.07; mix-blend-mode: luminosity;
  pointer-events: none;
}
.ed-prog-dark__inner { position: relative; z-index: 10; }

.ed-prog-item {
  display: flex; gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ed-prog-item:last-child { border-bottom: none; }
.ed-prog-num {
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem; font-weight: 600;
  color: #00C2B2; min-width: 2.2rem;
  flex-shrink: 0; line-height: 1;
  padding-top: 0.05rem;
}
.ed-prog-piece {
  font-family: 'Jost', sans-serif;
  font-size: 1rem; font-weight: 500;
  color: #fff; line-height: 1.4;
}
.ed-prog-composer {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
}
.ed-prog-performer {
  display: block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.75rem; color: rgba(255,255,255,0.30);
  margin-top: 0.15rem;
}

/* ── More Events ── */
.ed-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.ed-more-card {
  display: block; background: #fff;
  border-radius: 1.25rem; overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.ed-more-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,194,178,0.12);
}
.ed-more-card__thumb { width: 100%; height: 130px; object-fit: cover; display: block; }
.ed-more-card__body { padding: 0.85rem; }
.ed-more-card__badge {
  display: inline-block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; color: #fff;
  padding: 2px 7px; border-radius: 9999px;
  margin-bottom: 0.3rem;
}
.ed-more-card__title {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem; font-weight: 600;
  color: #2C3E50; line-height: 1.3;
}
.ed-more-card__date {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.72rem; color: #7F8C8D; margin-top: 0.15rem;
}

/* ===== carousel-flat — reusable flat horizontal carousel ===== */
.carousel-flat {
  position: relative;
  overflow: hidden;
}

/* Right-edge fade gradient */
.carousel-flat::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right, transparent 0%, #F4F5F6 85%);
}

.carousel-flat__track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.carousel-flat__item {
  flex: 0 0 calc((100% - 32px) / 2.2);
  min-width: 320px;
}

.carousel-flat__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  overflow: hidden;
}

.carousel-flat__label {
  margin-top: 8px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2C3E50;
  line-height: 1.3;
}

/* Controls row */
.carousel-flat__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Dots */
.carousel-flat__dots {
  display: flex;
  gap: 6px;
}

.carousel-flat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #CBD5E1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel-flat__dot.is-active {
  background: #00C2B2;
}

.carousel-flat__dot:hover {
  background: #94A3B8;
}

.carousel-flat__dot.is-active:hover {
  background: #009b8e;
}

/* Nav arrows */
.carousel-flat__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: transparent;
  cursor: pointer;
  color: #94A3B8;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
}

.carousel-flat__arrow:hover {
  border-color: #64748B;
  color: #64748B;
}

.carousel-flat__icon {
  width: 14px;
  height: 14px;
}

/* Side-rail headline (one-off for about-us dual-identity sections) */
.section-headline--side {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #2C3E50;
}

/* Mobile: scale item and fade proportionally */
@media (max-width: 767px) {
  .carousel-flat__item {
    flex-basis: calc((100% - 16px) / 1.8);
    min-width: 260px;
  }

  .carousel-flat::after {
    width: 120px;
  }
}

/* ============ Journey Timeline (V-timeline-journey) ============
   Lara-mechanics journey timeline for milestones.html.
   Spec: docs/superpowers/specs/2026-07-20-milestones-journey-timeline-design.md
   Colors reference brand tokens: teal #00C2B2, teal-deep #009b8e,
   ink #2C3E50, dark #1C2321, dark-accent #313B3A, muted #7F8C8D.
   ============================================================ */

/* --- Layout shell --- */
.journey-section {
  background: linear-gradient(to bottom, #FFFFFF 0%, #F6F9FC 100%); /* existing timeline flow canvas */
}
.journey-wrap {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
}
.journey-years {
  position: relative;
  z-index: 10;
}
.journey-year {
  position: relative;
  min-height: 100vh;
  padding: 14vh 0 16vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 6rem;
}
.journey-year:first-child {
  padding-top: 6vh;
}

/* --- Journey Trail (svg sized in JS; path dashed as footsteps) --- */
.journey-trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.journey-trail-path {
  stroke: rgb(0 194 178 / 0.55); /* brand-teal */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 20 16;
  fill: none;
  will-change: stroke-dashoffset;
}
.journey-trail-mask-path {
  stroke: #fff;
  stroke-width: 12;
  fill: none;
}

/* --- Ghost Year numeral (sticky, right side, behind content) --- */
.journey-ghost {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.journey-ghost span {
  position: sticky;
  top: 18vh;
  display: block;
  font-family: 'Futura', 'Jost', sans-serif;
  font-weight: 700;
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgb(44 62 80 / 0.10); /* ink @ 10% */
  user-select: none;
}

/* --- Quote interstitial (sparse; typewriter voice) --- */
.journey-quote {
  margin: 0 auto 12vh 8%;
  max-width: 50ch;
}
.journey-entry--flip-quote .journey-quote,
.journey-year:nth-child(even) .journey-quote {
  margin-left: auto;
  margin-right: 8%;
}
.journey-quote-text {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.55;
  color: #2C3E50; /* ink */
}
.journey-quote-word {
  display: inline-block;
  white-space: nowrap;
}
.journey-quote-word > span {
  display: inline-block;
}
.journey-quote-attr {
  display: block;
  margin-top: 1.1rem;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #7F8C8D; /* muted */
  font-style: normal;
}

/* --- Entry grid (alternating) --- */
.journey-entry {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.journey-entry--media-right .journey-poster {
  order: 2;
}
.journey-entry--media-right .journey-text {
  order: 1;
}
.journey-entry--no-media {
  grid-template-columns: 1fr;
  max-width: 62ch;
  margin-inline: auto;
}

/* --- Keepsake Frame poster --- */
.journey-poster {
  position: relative;
  z-index: 10;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .journey-poster--clickable:hover {
    transform: translateY(-4px);
  }
}
.journey-poster-frame {
  display: block;
  width: 100%;
  padding: 12px; /* the thick photo-print border */
  background: #fff;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.18), 0 4px 12px rgb(0 0 0 / 0.08);
  transform: rotate(var(--tilt, 0deg));
  cursor: pointer;
  transition: box-shadow 0.25s ease;
  text-align: inherit;
  font: inherit;
}
@media (hover: hover) {
  .journey-poster--clickable:hover .journey-poster-frame {
    box-shadow: 0 32px 64px -16px rgb(0 0 0 / 0.24), 0 6px 16px rgb(0 0 0 / 0.10);
  }
}
.journey-poster-frame:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 4px;
}
.journey-tilt-l { --tilt: -2.5deg; }
.journey-tilt-r { --tilt: 2.5deg; }
.journey-poster-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0.375rem;
}
.journey-poster-frame--portrait img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #fff;
}
.journey-poster-frame--logo {
  padding: 1.5rem;
  cursor: default;
}
.journey-poster-frame--logo img {
  object-fit: contain;
}
.journey-poster-media {
  position: relative;
}
.journey-play-badge {
  position: absolute;
  inset: 12px; /* align with inner image, inside the white border */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgb(0 0 0 / 0.22);
  border-radius: 0.375rem;
  color: #fff;
  pointer-events: none;
  transition: background 0.2s ease;
}
@media (hover: hover) {
  .journey-poster--clickable:hover .journey-play-badge {
    background: rgb(0 0 0 / 0.38);
  }
}
.journey-play-badge svg {
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.4));
}
.journey-play-hint {
  font-size: 0.8rem;
  font-weight: 500;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

/* --- Text column --- */
.journey-text {
  position: relative;
  z-index: 10;
}
.journey-rule {
  height: 1px;
  border: 0;
  background: rgb(0 194 178 / 0.45); /* brand-teal */
  margin: 0 0 1rem;
  width: 100%;
}


/* --- Year Rail (desktop scrollspy TOC) --- */
.journey-rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .journey-rail { display: block; }
}
.journey-rail-link {
  display: block;
  text-align: right;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #2C3E50; /* ink */
  opacity: 0.35;
  padding: 0.3rem 0;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.journey-rail-link:hover {
  opacity: 0.75;
}
.journey-rail-link[aria-current="true"] {
  opacity: 1;
  font-weight: 700;
  color: #009b8e; /* teal-deep */
}
.journey-rail-link:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
  opacity: 1;
}
.journey-rail-divider {
  width: 2rem;
  height: 1px;
  background: rgb(0 0 0 / 0.15);
  margin: 0.6rem 0 0.6rem auto;
}
.journey-rail-cta {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #009b8e; /* teal-deep */
  text-decoration: none;
}
.journey-rail-cta:hover {
  text-decoration: underline;
}

/* --- Skip HUD (fixed bottom-right, all breakpoints) --- */
.journey-hud {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
html.journey-ui-on .journey-rail,
html.journey-ui-on .journey-hud {
  opacity: 1;
  pointer-events: auto;
}
.journey-hud-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgb(44 62 80 / 0.6); /* ink @ 60% */
}
.journey-hud-pill {
  background: #1C2321; /* dark */
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.20);
  transition: transform 0.15s ease, background 0.15s ease;
}
.journey-hud-pill:hover {
  background: #313B3A; /* dark-accent */
  transform: translateY(-2px);
}
.journey-hud-pill:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
}

/* --- Media-stage modal (ADR-0005) --- */
.journey-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-modal[hidden] {
  display: none;
}
.journey-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgb(28 35 33 / 0.85); /* dark @ 85% */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.journey-modal-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 85vw;
}
.journey-modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 85vw;
  max-height: 72vh;
}
.journey-modal-media img {
  max-width: 85vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 32px 80px -16px rgb(0 0 0 / 0.5);
}
.journey-modal-media iframe {
  width: min(85vw, calc(72vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 32px 80px -16px rgb(0 0 0 / 0.5);
}
.journey-modal-caption {
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.85rem;
  text-align: center;
  max-width: 60ch;
}
.journey-modal-counter {
  position: absolute;
  top: -2.25rem;
  right: 0;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.journey-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 2;
}
.journey-modal-close:hover {
  background: rgb(255 255 255 / 0.12);
}
.journey-modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 2;
}
.journey-modal-arrow:hover {
  background: rgb(0 0 0 / 0.65);
}
.journey-modal-arrow--prev { left: 1rem; }
.journey-modal-arrow--next { right: 1rem; }
.journey-modal-close:focus-visible,
.journey-modal-arrow:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
}
body.journey-modal-open {
  overflow: hidden;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .journey-wrap {
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  .journey-wrap {
    padding-right: 110px; /* reserved rail gutter */
  }
  .journey-ghost {
    right: -1rem;
  }
}
@media (max-width: 767px) {
  .journey-year {
    min-height: 0;
    padding: 10vh 0 12vh;
  }
  .journey-entry {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .journey-entry--media-right .journey-poster {
    order: 0;
  }
  .journey-entry--media-right .journey-text {
    order: 1;
  }
  .journey-poster-frame {
    box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.16), 0 3px 8px rgb(0 0 0 / 0.06);
  }
  .journey-quote {
    margin: 0 auto 8vh;
    padding-inline: 0.5rem;
  }
  .journey-year:nth-child(even) .journey-quote {
    margin-left: auto;
    margin-right: auto;
  }
  .journey-ghost span {
    top: 12vh;
    font-size: clamp(4.5rem, 18vw, 7rem);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .journey-poster,
  .journey-poster-frame,
  .journey-play-badge,
  .journey-hud-pill,
  .journey-modal-close,
  .journey-modal-arrow,
  .journey-rail,
  .journey-hud {
    transition: none;
  }
  .journey-rail,
  .journey-hud {
    opacity: 1;
    pointer-events: auto;
  }
}

/* HKICF hero media: static photo on mobile and reduced motion. */
.hkicf-hero-video { display: none; }
.hkicf-hero-poster { display: block; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hkicf-hero-video { display: block; }
  .hkicf-hero-poster { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Editorial Two-Column Layout — sticky left + flowing right
   ══════════════════════════════════════════════════════════════ */

.editorial-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .editorial-layout {
    grid-template-columns: 3fr 7fr;
    gap: 3rem;
  }
}

/* Left column: sticky text anchor */
.editorial-left {
  position: relative;
}

.editorial-sticky {
  position: sticky;
  top: 6rem;
}

.editorial-text-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.editorial-text-panel:first-child {
  position: relative;
}

.editorial-text-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.editorial-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #00C2B2;
  display: block;
}

/* Pillar subtitle — section kicker pattern */
.pillar-subtitle {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00C2B2;
  line-height: 1;
}

/* Right column: continuous card flow */
.editorial-right {
  position: relative;
}

.editorial-card-group {
  margin-bottom: 2.5rem;
}

.editorial-card-group:last-child {
  margin-bottom: 0;
}

/* Programme card grid */
.editorial-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .editorial-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* Programme card — straight, rounded-[2rem] */
.programme-card {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  background: #F4F5F6;
  aspect-ratio: 3 / 4;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.programme-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 194, 178, 0.12);
}

.programme-card:active {
  transform: scale(0.97);
}

.programme-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.programme-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 4.25rem;
  display: flex;
  align-items: flex-end;
  padding: 1.75rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(28,35,33,0.88), rgba(28,35,33,0));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

/* Mobile */
@media (max-width: 1023px) {
  .editorial-sticky {
    position: relative;
    top: auto;
  }
  .editorial-text-panel {
    position: relative;
    opacity: 1;
  }

/* ===== V-fund-selector-split — donation fund selector rows (2026-07-23) =====
   PayPal-style split selector: sticky intro left, selectable fund rows right.
   Signature colors follow the support-card/audience-deck --sig-color pattern. */
.fund-row--general       { --sig-color: #00C2B2; }
.fund-row--student       { --sig-color: #1A73E8; }
.fund-row--hkisc         { --sig-color: #A855F7; }
.fund-row--commissioning { --sig-color: #E7B83D; }

.fund-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem 1.25rem;
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1.25rem;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, transform 0.25s ease;
}
.fund-row:hover {
  border-color: color-mix(in srgb, var(--sig-color) 55%, #e2e8f0);
  box-shadow: 0 6px 24px rgba(28, 35, 33, 0.08);
  transform: translateY(-2px);
}
.fund-row:focus-visible {
  outline: 2px solid var(--sig-color);
  outline-offset: 2px;
}
.fund-row[aria-checked="true"] {
  border-color: var(--sig-color);
  background: color-mix(in srgb, var(--sig-color) 6%, #fff);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--sig-color) 18%, transparent);
}

/* Icon chip */
.fund-row__chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: var(--sig-color);
  background: color-mix(in srgb, var(--sig-color) 12%, #fff);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.fund-row:hover .fund-row__chip { transform: scale(1.06); }
.fund-row[aria-checked="true"] .fund-row__chip {
  background: var(--sig-color);
  color: #fff;
}

/* Floating music-note pop on selection */
.fund-row__chip::after {
  content: "\266A";
  position: absolute;
  left: 50%;
  top: 0;
  font-size: 1rem;
  color: var(--sig-color);
  opacity: 0;
  pointer-events: none;
}
.fund-row--just-selected .fund-row__chip::after {
  animation: fund-note-pop 0.7s ease-out;
}
@keyframes fund-note-pop {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-20%, -1.75rem) scale(1.15) rotate(14deg); }
}

/* Text block */
.fund-row__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fund-row__title {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #2C3E50;
  transition: color 0.25s ease;
}
.fund-row[aria-checked="true"] .fund-row__title { color: #1C2321; }
.fund-row__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #7F8C8D;
}

/* Amount badge */
.fund-row__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  padding-left: 0.5rem;
}
.fund-row__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #2C3E50;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.fund-row[aria-checked="true"] .fund-row__value { color: var(--sig-color); }
.fund-row__impact {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A1A1AA;
  white-space: nowrap;
}

/* Check indicator */
.fund-row__check {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1.5px solid #cbd5e1;
  color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, transform 0.25s ease;
}
.fund-row:hover .fund-row__check { border-color: var(--sig-color); }
.fund-row[aria-checked="true"] .fund-row__check {
  background: var(--sig-color);
  border-color: var(--sig-color);
  color: #fff;
  transform: scale(1.08);
}

/* Live summary (left column) */
.fund-summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: #4A5568;
}
.fund-summary__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: #00C2B2;
  flex-shrink: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.fund-summary__name {
  font-weight: 700;
  color: #1C2321;
  transition: opacity 0.2s ease;
}
.fund-summary__name.is-swapping { opacity: 0; }

/* Impact stats */
.fund-selector-stat {
  padding: 1rem 0.75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  text-align: center;
}
.fund-selector-stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #009b8e;
}
.fund-selector-stat__label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #7F8C8D;
}

/* Ambient background glyphs */
.fund-selector-ambient { position: absolute; inset: 0; pointer-events: none; }
.fund-selector-ambient__note {
  position: absolute;
  font-family: 'Futura', 'Jost', sans-serif;
  color: #00C2B2;
  opacity: 0.05;
  user-select: none;
}
.fund-selector-ambient__note--treble {
  font-size: 26rem;
  line-height: 1;
  top: -6rem;
  right: -4rem;
  transform: rotate(12deg);
}
.fund-selector-ambient__note--eighth {
  font-size: 18rem;
  line-height: 1;
  bottom: -5rem;
  left: -2rem;
  transform: rotate(-10deg);
}

/* Mobile: stack amount under text */
@media (max-width: 640px) {
  .fund-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "chip body check"
      "chip amount check";
  }
  .fund-row__chip   { grid-area: chip; }
  .fund-row__body   { grid-area: body; }
  .fund-row__amount {
    grid-area: amount;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    padding-left: 0;
  }
  .fund-row__check  { grid-area: check; align-self: center; }
  .fund-row__amount { align-items: flex-start; flex-direction: column; }
  .fund-row__value  { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fund-row,
  .fund-row__chip,
  .fund-row__check,
  .fund-row__value,
  .fund-summary__dot,
  .fund-summary__name { transition: none; }
  .fund-row:hover { transform: none; }
  .fund-row--just-selected .fund-row__chip::after { animation: none; }

/* --- V-nimbus-sticky-cards: stacked slide cards (desktop) ---
   Each slide is ONE card (text left + visual right). Cards sticky-stack:
   the next card slides over the previous, leaving only a 4.5rem strip
   (padding + headline) of the covered card visible. Pure CSS — no JS. */
.nimbus-chunk + .nimbus-chunk {
  margin-top: 2rem;
}
@media (min-width: 1024px) {
  .nimbus-chunk {
    position: sticky;
  }
  .nimbus-chunk + .nimbus-chunk {
    margin-top: 0;
  }
  .nimbus-chunk:nth-child(1) {
    top: 6rem;
  }
  .nimbus-chunk:nth-child(2) {
    top: 12rem;
  }
  .nimbus-chunk:nth-child(3) {
    top: 18rem;
  }
  /* Scroll room so each card dwells before the next covers it */
  .nimbus-chunk:not(:last-child) {
    margin-bottom: 22vh;
  }
  /* Stick room for the final card (see spacer note in the shell) */
  .nimbus-stack-spacer {
    height: 30vh;
  }
}