/* ================================================================
   TNCC — Tamil Nadu Congress Committee
   Implemented from the Claude Design handoff (TNCC Website.dc.html)
   ================================================================ */

:root {
  --bg: #FAF6EE;
  --ink: #14181C;
  --saffron: #E8630A;   /* retained: tricolour + sparing accent only */
  --saffron2: #F4791F;
  --blue: #0B4F9E;      /* Congress blue: primary */
  --blue2: #1668C9;     /* lighter blue: hovers, fills */
  --blue-deep: #073A75;
  --green: #0E7B3D;
  --gold: #F6B26B;
  --link: #0B4F9E;
  --muted: #6B655A;
  --body: #3A3E42;
  --kicker: #12559F;
  --px: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Mukta Malar", system-ui, sans-serif;
  overflow-x: clip;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--green); }
::selection { background: var(--blue2); color: #fff; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

.norail { scrollbar-width: none; }
.norail::-webkit-scrollbar { display: none; }

.spacer { flex: 1; }
.upper { text-transform: uppercase; }
.container { max-width: 1240px; margin: 0 auto; }

section[id], footer[id] { scroll-margin-top: 84px; }
#president, #movements, #manifesto, #press, #wall, #gallery, #history, #leaders, #districts, #meet, #join { scroll-margin-top: 84px; }

/* ---- Language switching ---- */
[data-lang="en"] .l-ta { display: none !important; }
[data-lang="ta"] .l-en { display: none !important; }

/* ---- Tamil leading ----
   Tamil stacks vowel signs above (ெ ே ை ொ) and below (ழ ஞ ங + pulli) the base
   glyph, so a line of Tamil paints well outside the em box that Latin fills.
   The display line-heights below (1.02–1.15) are tuned for Inter; with Tamil
   the lines touch. Give Tamil its own leading wherever a heading can wrap. */
[data-lang="ta"] :is(
  .hero__title, .hero__caption-name,
  .news__title, .pagehero__title, .tl-mile__title,
  .president__name, .movements__title, .mv-hero__title, .mv-card__title,
  .press__title, .wall__title, .gallery__title, .gal__h, .mv-card--light__title,
  .history__title, .leaders__title, .meet__title,
  .join__title, .join-card__title
) { line-height: 1.3; }
[data-lang="ta"] .cinema__h { line-height: 1.26; }

/* ---- Mixed-script runs ----
   Latin tracking and casing mean nothing in Tamil: letter-spacing prises a
   consonant away from the vowel sign it belongs to, and there is no uppercase
   to transform to. Measured at 100px, Tamil base glyphs stand 56 tall against
   Inter's 73 cap, so beside a caps label the Tamil also reads a size small.
   Wrap the Tamil run of a mixed label in <i class="ta-run"> to opt out. */
.ta-run {
  font-family: "Noto Sans Tamil", system-ui, sans-serif;
  font-style: normal;
  font-size: 1.1em;
  letter-spacing: normal;
  text-transform: none;
}

/* ---- Keyframes ---- */
@keyframes rvIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pxUp { from { transform: translateY(46px); } to { transform: translateY(-46px); } }
@keyframes pxDown { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(11, 79, 158, .55); } 70% { box-shadow: 0 0 0 12px rgba(11, 79, 158, 0); } }
@keyframes stampPop { 0% { transform: scale(.2) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes chatIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dotBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes navShrink { to { padding-top: 7px; padding-bottom: 7px; box-shadow: 0 8px 26px rgba(20, 24, 28, .1); } }

/* Scroll-reveal: time-based fallback everywhere, scroll-driven where supported */
.rv { animation: rvIn .8s both; }
.rise { animation: heroRise .8s cubic-bezier(.2, .7, .2, 1) both; }

@supports (animation-timeline: view()) {
  .rv {
    animation-timeline: view();
    animation-range: entry var(--d, 0%) entry calc(var(--d, 0%) + 40%);
  }
  .parallax-up { animation: pxUp linear both; animation-timeline: view(); }
  .parallax-down { animation: pxDown linear both; animation-timeline: view(); }
  .nav { animation: navShrink linear both; animation-timeline: scroll(); animation-range: 0 220px; }
  .progress__fill { animation: growX linear both; animation-timeline: scroll(); }
}

/* ---- Scroll progress bar ---- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 90;
  background: rgba(20, 24, 28, .08);
}
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #F4791F 0 33.4%, #FBF8F1 33.4% 66.7%, #0E7B3D 66.7% 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---- Top utility bar ---- */
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3FB950; display: inline-block; }
.dot--pulse { animation: pulse 2.4s infinite; }
.lang-switch { display: inline-flex; }
.lang-btn {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(20, 24, 28, .3); padding: 2px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.lang-switch .lang-btn:first-child { border-radius: 4px 0 0 4px; }
.lang-switch .lang-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.lang-btn.is-on { background: var(--blue2); color: #fff; }
.lang-switch--nav { margin-left: 10px; }
/* 10 nav links now — compress and collapse to burger earlier */
.nav .nav__links { font-size: 14px; gap: 16px; }
/* Never wrap onto a second row: wrapping was pushing the CTA and lang switch below the links. */
.nav { flex-wrap: nowrap; }
.nav__links { flex-wrap: nowrap !important; }
/* The brand must never be squeezed by the links; the links collapse instead. */
.nav__brand { flex: none; }

/* Progressive tightening before anything is dropped. Kept wide (<=1900) so the links never
   jump back to full size just above the collapse point and overflow again. */
@media (max-width: 1900px) {
  .nav { gap: 18px; padding: 12px 20px; }
  .nav .nav__links { gap: 13px; font-size: 13.5px; }
  .nav__cta { padding: 9px 18px; }
}
@media (max-width: 760px) {
  .lang-switch--nav { display: none; }
}
.hero__live {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--green); white-space: nowrap;
}

/* ---- In the News (admin-uploaded newspaper clippings) ---- */
.news { padding: 64px 0 10px; }
.news[hidden] { display: none; }
.news__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.news__grid { columns: 3; column-gap: 18px; margin-top: 30px; }
.news__item {
  break-inside: avoid; margin: 0 0 18px; background: #fff;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(20, 24, 28, .1);
}
.news__item img { display: block; width: 100%; }
.news__item figcaption { padding: 10px 14px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 1100px) { .news__grid { columns: 2; } }
@media (max-width: 640px) { .news__grid { columns: 1; } }

/* ---- Subpages (organization / elected-members / history) ---- */
.pagehero { position: relative; overflow: hidden; padding: 72px 0 30px; background: linear-gradient(180deg, rgba(11, 79, 158, .05), transparent); }
.pagehero__ghost {
  position: absolute; right: -20px; top: 50%; transform: translateY(-52%);
  font-family: "Noto Serif Tamil", serif; font-weight: 600; font-size: clamp(140px, 22vw, 300px);
  line-height: 1; color: rgba(11, 79, 158, .07); letter-spacing: -8px;
  user-select: none; pointer-events: none;
}
.pagehero__stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pagehero__stat {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: #fff; border-radius: 999px; padding: 8px 18px;
  box-shadow: 0 8px 22px rgba(20, 24, 28, .08); font-size: 13px; font-weight: 700; color: var(--muted);
}
.pagehero__stat strong { font-size: 17px; font-weight: 800; color: var(--blue2); }
.pagehero__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -1px; }
.pagehero__lead { margin: 14px 0 0; max-width: 720px; font-size: 16.5px; line-height: 1.65; color: var(--body); }
.subpage .leaders--page { padding-top: 26px; }
.subpage .dcc--page { padding-top: 34px; }

.orgpres { padding: 26px 0 8px; }
.orgpres__card {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: #fff; border-radius: 18px; padding: 24px 26px; margin-top: 16px;
  box-shadow: 0 16px 40px rgba(20, 24, 28, .1); border-top: 4px solid var(--blue);
}
.orgpres__photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.orgpres__name { font-weight: 800; font-size: 22px; }
.orgpres__role { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.orgpres__contact { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-weight: 700; font-size: 14px; }
.orgpres__contact a { color: var(--green); }
.orgpres__addr { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* CLP Leader / Deputy CLP / Treasurer — placeholder cards until names arrive */
.orgpres__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.orgpres__mini {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(20, 24, 28, .08); border-top: 3px solid var(--green);
}
.orgpres__mini-avatar {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: rgba(14, 123, 61, .1); color: var(--green); border: 1.5px dashed rgba(14, 123, 61, .45);
}
.orgpres__mini-role { font-weight: 800; font-size: 14.5px; line-height: 1.45; }
.orgpres__mini-note { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-style: italic; }

/* Elected members — Rajya Sabha / Lok Sabha / MLA tabs */
.em-tabs {
  position: sticky; top: 64px; z-index: 40; background: var(--ink);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--saffron) 33%, #fff 33% 66%, var(--green) 66%) 1;
}
.em-tabs__row {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 14px 0;
  overflow-x: auto; scrollbar-width: none;
}
.em-tabs__row::-webkit-scrollbar { display: none; }
.em-tabs__row a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  color: #C8CDD2; font-size: 13.5px; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .16);
  white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.em-tabs__row a:hover { color: var(--gold); border-color: rgba(246, 178, 107, .6); }
.em-tabs__row a.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--blue), var(--blue2));
  box-shadow: 0 4px 14px rgba(11, 79, 158, .4);
}
.em-tabs__count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); font-size: 11.5px; font-weight: 800;
}
.em-tabs__row a.is-active .em-tabs__count { background: rgba(255, 255, 255, .25); }
.em-tabbed .em-panel { display: none; }
.em-tabbed .em-panel.is-open { display: block; animation: rvIn .35s ease both; }
#leaders { scroll-margin-top: 130px; }

.drill { margin-top: 30px; }
.drill__districts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.drill__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid rgba(20, 24, 28, .1); border-radius: 14px;
  padding: 15px 18px; font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.drill__btn:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 24, 28, .1); }
.drill__btn-count {
  flex-shrink: 0; min-width: 26px; height: 26px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center; padding: 0 8px;
}
.drill__btn--other .drill__btn-count { background: var(--muted); }
.drill__back {
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: 10px 22px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; margin-bottom: 18px;
}
.drill__district { font-weight: 800; font-size: 28px; margin: 0 0 16px; }
.drill__empty { color: var(--muted); font-weight: 600; }

/* History page — inc.in-style vertical timeline */
.tl-index {
  position: sticky; top: 64px; z-index: 40; background: var(--ink);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--saffron) 33%, #fff 33% 66%, var(--green) 66%) 1;
}
.tl-index__row {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 14px 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.tl-index__row::-webkit-scrollbar { display: none; }
.tl-index__row a {
  flex-shrink: 0; color: #C8CDD2; font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .16);
  white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.tl-index__row a:hover { color: var(--gold); border-color: rgba(246, 178, 107, .6); }
.tl-index__row a.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--blue), var(--blue2));
  box-shadow: 0 4px 14px rgba(11, 79, 158, .4);
}
/* tabbed mode: only the active period panel is visible */
.tl-tabbed .tl-period { display: none; }
.tl-tabbed .tl-period.is-open { display: block; animation: rvIn .35s ease both; }
.timeline-wrap { scroll-margin-top: 128px; }
.tl-caption { text-align: center; padding: 40px 0 0; }
.tl-caption__range { font-weight: 800; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; }
.tl-caption__count { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.timeline { position: relative; padding: 46px 0 70px; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, var(--green), var(--saffron));
}
.tl-item { position: relative; width: 50%; padding: 0 52px 50px 0; text-align: right; }
.tl-item--r { left: 50%; padding: 0 0 50px 52px; text-align: left; }
.tl-item__date {
  position: absolute; top: 0; right: -34px; width: 68px; height: 68px;
  background: linear-gradient(140deg, var(--blue), var(--blue2)); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: 10.5px; font-weight: 800; line-height: 1.2; padding: 6px;
  box-shadow: 0 0 0 5px var(--bg), 0 8px 20px rgba(11, 79, 158, .35); z-index: 2;
}
.tl-item--r .tl-item__date { right: auto; left: -34px; }
.tl-item__img {
  display: inline-block; width: 100%; max-width: 330px;
  border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 24, 28, .16); background: #fff;
}
.tl-item__medal {
  display: inline-grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(140deg, #0E7B3D, #06522A); color: #fff;
  font-weight: 800; font-size: 26px; box-shadow: 0 10px 26px rgba(20, 24, 28, .18);
}
.tl-item__h { margin: 16px 0 4px; font-weight: 800; font-size: 20px; line-height: 1.25; }
.tl-item__sub { font-size: 13px; font-weight: 700; color: var(--blue2); }
.tl-item__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--body); }

.tl-item--full { width: 100%; left: 0; padding: 6px 0 56px; text-align: center; }
.tl-item[id], .tl-item--full { scroll-margin-top: 150px; }
.tl-item__img--pres { max-width: 210px; }
.tl-mile {
  display: inline-block; background: #fff; border-radius: 18px; padding: 26px 36px;
  max-width: 740px; box-shadow: 0 16px 40px rgba(20, 24, 28, .12);
  border-top: 4px solid var(--blue); text-align: center; position: relative; z-index: 2;
}
.tl-mile__year { font-weight: 800; font-size: 15px; letter-spacing: .2em; color: var(--blue2); text-transform: uppercase; }
.tl-mile__title { margin: 8px 0 0; font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; }
.tl-mile__text { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--body); }

@media (max-width: 760px) {
  .tl-index { top: 56px; }
  .tl-index__row { flex-wrap: nowrap; overflow-x: auto; gap: 0 22px; }
  .timeline::before { left: 24px; transform: none; }
  .tl-item, .tl-item--r { width: 100%; left: 0; padding: 0 0 42px 66px; text-align: left; }
  .tl-item__date, .tl-item--r .tl-item__date { left: -8px; right: auto; width: 64px; min-height: 38px; font-size: 10px; }
  .tl-item--full { padding-left: 0; }
  .tl-mile { padding: 20px 22px; }
}

@media (max-width: 1100px) { .drill__districts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .drill__districts { grid-template-columns: repeat(2, 1fr); }
  .pagehero { padding-top: 46px; }
  .tl-nav { top: 56px; }
}
@media (max-width: 420px) { .drill__districts { grid-template-columns: 1fr; } }

/* ---- Social handles (3 columns: TNCC / President / Social media wing) ---- */
.handles { padding: 64px 0 10px; }
.handles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.handles__col {
  background: #fff; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(20, 24, 28, .08);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.handles__head { font-weight: 800; font-size: 16.5px; margin-bottom: 4px; }
.handles__soon { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) { .handles__grid { grid-template-columns: 1fr; } }

/* ---- Live YouTube band ---- */
/* --px, not 0: .container has no gutter of its own, so without this the band
   runs edge to edge on every viewport under 1240px. */
.liveband { padding: 30px var(--px) 6px; }
.liveband[hidden] { display: none; }
.liveband__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.liveband__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E5484D; color: #fff; font-weight: 800; font-size: 12.5px;
  letter-spacing: .14em; padding: 6px 14px; border-radius: 999px;
}
.liveband__chip .dot { background: #fff; animation: pulse 1.6s infinite; }
.liveband__title { font-weight: 800; font-size: 18px; }
.liveband__frame iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 18px; box-shadow: 0 22px 54px rgba(20, 24, 28, .22); background: #000;
}

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250, 246, 238, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 24, 28, .1);
  display: flex; align-items: center; gap: 26px;
  padding: 12px 28px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
.nav__emblem {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff;
  /* Source art is a washed-out photo of the badge — pull the tricolour back up. */
  filter: saturate(1.7) contrast(1.22) brightness(1.04);
  box-shadow: 0 0 0 1.5px rgba(20, 24, 28, .14), 0 3px 10px rgba(20, 24, 28, .28);
}
/* Tamil glyphs carry tall ascenders and pulli/descender marks, so the two lines
   need real leading — at 1.05 the title collided with the sub. */
.nav__names { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
/* Prominent on desktop, but scales down so the long Tamil name never crowds the links. */
.nav__title { display: block; font-weight: 800; font-size: clamp(18px, 1.5vw, 27px); letter-spacing: -.015em; line-height: 1.28; }
.nav__sub {
  display: block; font-size: clamp(10px, .72vw, 13px); letter-spacing: .16em;
  font-weight: 600; color: var(--muted); text-transform: uppercase;
  line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
}
.nav__links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px 20px; font-weight: 600; font-size: 14.5px;
}
.nav__links > a { color: var(--ink); white-space: nowrap; }
.nav__links > a:hover { color: var(--blue); }
.nav__cta {
  background: var(--blue); color: #fff !important;
  padding: 9px 22px; border-radius: 999px;
  font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(11, 79, 158, .35);
  transition: background .25s;
}
.nav__cta:hover { background: var(--blue-deep); }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 8px;
  background: transparent; border: none; cursor: pointer;
}
.nav__burger span {
  display: block; height: 2.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .3s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---- Mobile menu overlay ---- */
.mobilemenu {
  /* explicit offsets, not `inset:` — iOS Safari <= 14.4 ignores the shorthand
     and the open menu renders off-layout (burger looks dead) */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 79;
  background: var(--bg);
  padding: 110px 28px 34px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.mobilemenu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobilemenu__links { display: grid; }
.mobilemenu__links a {
  font-size: 26px; font-weight: 800; color: var(--ink);
  padding: 14px 0; border-bottom: 1px solid rgba(20, 24, 28, .08);
}
.mobilemenu__join { color: var(--blue) !important; }
.mobilemenu__lang { margin-top: 26px; }
.mobilemenu__lang .lang-btn { border-color: rgba(20, 24, 28, .3); color: var(--muted); padding: 6px 18px; font-size: 14px; }
.mobilemenu__lang .lang-btn.is-on { color: #fff; }
.mobilemenu__social { margin-top: auto; display: grid; gap: 12px; font-weight: 600; font-size: 15px; }
body.menu-open { overflow: hidden; }
body.menu-open .chat, body.menu-open .progress { visibility: hidden; }

/* ---- Hero ---- */
.hero {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 48px 40px;
  padding: 56px var(--px) 90px;
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__blob { position: absolute; border-radius: 50%; }
.hero__blob--a {
  top: -180px; right: -160px; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(22, 104, 201, .16), transparent 65%);
}
.hero__blob--b {
  bottom: -220px; left: -140px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(14, 123, 61, .14), transparent 65%);
}
.hero__word {
  position: absolute; left: 34px; bottom: 8px;
  font-weight: 800; font-size: clamp(120px, 17vw, 240px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(20, 24, 28, .08);
  white-space: nowrap;
}
.hero__copy { position: relative; flex: 1 1 520px; max-width: 640px; min-width: 0; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--kicker);
}
.hero__flag {
  width: 34px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #FF9933 33%, #fff 33% 66%, #138808 66%);
  border: 1px solid rgba(20, 24, 28, .12);
}
.hero__title {
  margin: 18px 0 0; padding-right: 28px;
  font-weight: 800; font-size: clamp(48px, 5.8vw, 84px);
  line-height: 1.06; letter-spacing: -.01em;
}
.grad-text {
  background: linear-gradient(92deg, #0B4F9E, #1668C9 55%, #0E7B3D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__tagline { margin: 14px 0 0; font-size: 20px; font-weight: 600; letter-spacing: .12em; color: #4A4436; }
.hero__lead { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 520px; text-wrap: pretty; }
.hero__lead--ta { line-height: 1.7; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn { font-weight: 700; font-size: 16px; border-radius: 999px; white-space: nowrap; }
.btn--primary {
  background: var(--blue); color: #fff; padding: 15px 30px; letter-spacing: .03em;
  box-shadow: 0 10px 26px rgba(11, 79, 158, .38);
  transition: background .25s, box-shadow .25s;
}
.btn--primary:hover { background: var(--green); color: #fff; box-shadow: 0 10px 26px rgba(14, 123, 61, .38); }
.btn--ghost { border: 1.5px solid rgba(20, 24, 28, .25); color: var(--ink); padding: 15px 28px; transition: border-color .25s, color .25s; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.hero__checks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 38px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hero__checks > span { white-space: nowrap; }
.hero__media { position: relative; flex: 0 1 480px; min-width: 340px; }
.hero__portrait {
  position: relative; border-radius: 280px 280px 28px 28px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(20, 24, 28, .28);
}
.hero__portrait img { display: block; width: 100%; height: min(600px, 64vh); object-fit: cover; object-position: 18% 20%; }
.hero__portrait-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 24, 28, .55)); }
.hero__caption { position: absolute; left: 22px; bottom: 18px; color: #fff; }
.hero__caption-name { font-weight: 800; font-size: 24px; line-height: 1.1; }
.hero__caption-mp { font-weight: 500; font-size: 15px; }
.hero__caption-role { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.hero__diary-card {
  position: absolute; top: 18px; left: 10px;
  background: #fff; border-radius: 14px; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 14px 34px rgba(20, 24, 28, .18);
  animation: floaty 6s ease-in-out infinite;
  white-space: nowrap;
}
.hero__diary-text { font-size: 13px; font-weight: 700; }
.hero__diary-sub { color: var(--muted); font-weight: 500; }
.hero__seal {
  position: absolute; right: 12px; bottom: 86px;
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--bg);
  box-shadow: 0 16px 34px rgba(20, 24, 28, .25);
  animation: floaty 7s .8s ease-in-out infinite;
}

/* ---- Ticker ---- */
.ticker { background: var(--blue); color: #fff; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, .08); }
.ticker__track {
  display: flex; width: max-content; align-items: center;
  animation: tick 34s linear infinite;
  padding: 11px 0; font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.ticker__item { padding: 0 28px; white-space: nowrap; }
.ticker__dot { opacity: .6; }
/* Album items are links, so the strip has to hold still long enough to click one. */
.ticker__link { color: inherit; text-decoration: none; }
.ticker__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---- Stats ---- */
.stats { background: var(--ink); color: #F2ECDF; padding: 64px var(--px) 58px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; max-width: 1240px; margin: 0 auto; }
.stat { padding-left: 20px; }
.stat--saffron { border-left: 3px solid var(--blue2); }
.stat--cream { border-left: 3px solid #FBF8F1; }
.stat--green { border-left: 3px solid var(--green); }
.stat__num { font-weight: 800; font-size: 56px; line-height: 1; min-height: 56px; }
.stat__label { font-weight: 700; font-size: 15px; margin-top: 6px; }
.stat__sub { font-size: 13px; color: #9BA1A6; }

/* ---- President ---- */
.president { padding: 110px var(--px) 40px; position: relative; overflow: clip; }
.president__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 64px; align-items: center;
}
.president__media { position: relative; }
.president__photo { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(20, 24, 28, .3); }
.president__photo img { display: block; width: 100%; height: 520px; object-fit: cover; }
.president__photo-shade { position: absolute; inset: 0; background: linear-gradient(200deg, transparent 60%, rgba(20, 24, 28, .5)); }
.president__badge {
  position: absolute; right: -18px; top: -18px;
  background: var(--green); color: #fff;
  border-radius: 16px; padding: 12px 18px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 30px rgba(14, 123, 61, .4);
  animation: floaty 6s ease-in-out infinite;
}
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--kicker); }
.kicker--gold { color: var(--gold); }
.kicker--green { color: var(--green); }
.president__name { margin: 14px 0 0; font-weight: 800; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; }
.president__role { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A4436; }
.president__bio { margin: 22px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.president__bio--ta { line-height: 1.75; }
.president__quote {
  margin: 26px 0 0; padding: 18px 24px;
  border-left: 4px solid var(--blue);
  background: #fff; border-radius: 0 16px 16px 0;
  box-shadow: 0 10px 30px rgba(20, 24, 28, .08);
  font-family: "Noto Serif Tamil", serif; font-style: italic;
  font-size: 21px; line-height: 1.5; color: var(--ink);
}
.president__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chip-link {
  border: 1.5px solid rgba(20, 24, 28, .2); border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 14px; color: var(--ink);
  transition: border-color .25s, color .25s;
}
.chip-link:hover { border-color: var(--blue); color: var(--blue); }
.president__chat-btn {
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .25s;
}
.president__chat-btn:hover { background: var(--green); }

/* Tamil paints 1.17em of ink per line where Inter paints 0.78em, so every gap
   tuned by eye against the English falls short once the Tamil is showing. */
[data-lang="ta"] .president__role { margin-top: 16px; }
[data-lang="ta"] .president__badge { line-height: 1.45; }
[data-lang="ta"] .president__bio--ta { margin-top: 26px; }
/* Noto Serif Tamil ships no italic, so the browser skews it — the glyphs lean
   out of shape and stop matching the Latin quote. Weight carries it instead. */
[data-lang="ta"] .president__quote { font-style: normal; font-weight: 600; line-height: 1.68; }

/* ---- Movements ---- */
.movements { background: #fff; padding: 100px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
.movements__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; max-width: 760px; }
.movements__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-top: 48px; }
.mv-hero {
  position: relative; background: #3A2A55; border-radius: 26px; overflow: hidden;
  color: #fff; min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mv-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.mv-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 42, 85, .15) 0%, rgba(38, 26, 58, .92) 78%); }
.mv-hero__logo {
  position: absolute; top: 24px; left: 24px;
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: floaty 7s ease-in-out infinite;
}
.mv-hero__content { position: relative; padding: 32px; }
.mv-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mv-kicker--green { color: var(--green); }
.mv-hero__title { margin: 10px 0 0; font-weight: 800; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; }
.mv-hero__text { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 480px; text-wrap: pretty; }
.mv-hero__text--ta { line-height: 1.7; }
.mv-hero__row { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.pledge-btn {
  background: #fff; color: #3A2A55; border: none; border-radius: 999px;
  padding: 13px 26px; font-weight: 800; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  transition: background .25s, color .25s;
}
.pledge-btn:hover { background: var(--gold); color: #2A1C42; }
.pledge-count { font-weight: 800; font-size: 22px; }
.pledge-count__sub { font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, .7); }
.stamp { position: absolute; right: 36px; bottom: 120px; color: #fff; animation: stampPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.stamp__text { font-weight: 800; font-size: 13px; letter-spacing: .08em; margin-top: 4px; }
.movements__side { display: flex; flex-direction: column; gap: 28px; }
.mv-card--dark {
  position: relative; background: var(--ink); border-radius: 26px; overflow: hidden;
  color: #fff; flex: 1; min-height: 246px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mv-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mv-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20, 24, 28, .9)); }
.mv-card__content { position: relative; padding: 26px; }
.mv-card__title { margin: 8px 0 0; font-weight: 800; font-size: 28px; line-height: 1.15; }
.mv-card__text { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.mv-card__text--ta { line-height: 1.65; }
.mv-card--light { background: var(--bg); border: 1.5px solid rgba(20, 24, 28, .1); border-radius: 26px; padding: 26px; }
.mv-card--light__title { margin: 8px 0 0; font-weight: 800; font-size: 26px; line-height: 1.2; }
.mv-card--light__text { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.mv-card--light__text--ta { line-height: 1.65; }
.mv-card--light__link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; }

/* ---- Manifesto ---- */
.manifesto {
  position: relative;
  background: linear-gradient(100deg, #E3195B 0%, #EF4123 46%, #F7941D 100%);
  color: #fff; padding: 120px var(--px); overflow: clip;
}
.manifesto__decor { position: absolute; inset: 0; pointer-events: none; }
.mf-float { position: absolute; fill: #fff; animation: floaty 8s ease-in-out infinite; }
.manifesto__ring {
  position: absolute; right: -120px; bottom: -140px;
  width: 520px; height: 520px; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .08);
}
.manifesto__grid {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
}
.manifesto__pill {
  display: inline-block; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.manifesto__title { margin: 22px 0 0; font-weight: 800; font-size: clamp(44px, 5.2vw, 76px); line-height: 1.02; }
.manifesto__hl { background: #fff; color: var(--ink); padding: 2px 18px 6px; display: inline-block; transform: rotate(-1deg); }
.manifesto__sub { margin-top: 16px; font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); }
.manifesto__lead { margin: 18px 0 0; font-size: 17px; line-height: 1.6; max-width: 520px; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.manifesto__lead--ta { line-height: 1.7; }
.manifesto__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.manifesto__btn-main {
  background: #fff; color: #C61A44;
  font-weight: 800; font-size: 15px; letter-spacing: .08em;
  padding: 15px 28px; border-radius: 6px; text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  transition: background .25s, color .25s;
}
.manifesto__btn-main:hover { background: var(--ink); color: #fff; }
.manifesto__btn-alt {
  border: 1.5px solid rgba(255, 255, 255, .7); color: #fff;
  font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: 6px;
  transition: background .25s;
}
.manifesto__btn-alt:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.manifesto__panel {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 22px; padding: 26px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.manifesto__panel-kicker { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.manifesto__chapters { display: grid; gap: 12px; margin-top: 16px; }
.manifesto__chapter {
  background: rgba(255, 255, 255, .92); color: var(--ink);
  border-radius: 12px; padding: 14px 18px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.manifesto__num { color: #C61A44; }
.manifesto__panel-note { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* ---- Press ---- */
.press { background: var(--ink); color: #F2ECDF; padding: 110px var(--px); }
.press__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center;
}
.press__collage { position: relative; height: 560px; }
.press__paper {
  position: absolute; display: block; border-radius: 10px; overflow: hidden;
  transition: transform .4s;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.press__paper img { display: block; width: 100%; }
.press__paper--a { left: 0; top: 26px; width: 74%; transform: rotate(-4deg); }
.press__paper--a:hover { transform: rotate(-1deg) translateY(-8px); }
.press__paper--b { right: 0; top: 0; width: 60%; transform: rotate(3.5deg); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.press__paper--b:hover { transform: rotate(1deg) translateY(-8px); }
.press__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 54px); line-height: 1.08; }
.press__lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: #B9BDC1; max-width: 520px; text-wrap: pretty; }
.press__lead--ta { line-height: 1.7; }
.press__list { margin-top: 28px; display: grid; gap: 2px; border-radius: 16px; overflow: hidden; }
.press__row {
  display: flex; gap: 18px; align-items: center;
  background: rgba(255, 255, 255, .06); padding: 18px 22px; color: #F2ECDF;
  transition: background .25s;
}
a.press__row:hover { background: rgba(22, 104, 201, .16); color: #fff; }
.press__date { font-weight: 800; color: var(--gold); font-size: 13px; min-width: 86px; }
.press__row-title { flex: 1; font-weight: 600; font-size: 16px; }
.press__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  border: 1px solid rgba(246, 178, 107, .5); color: var(--gold);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.press__row--muted { background: rgba(255, 255, 255, .03); color: #8A9096; font-size: 14px; font-weight: 600; }
.press__wa { display: flex; gap: 14px; margin-top: 26px; }
.wa-btn {
  background: var(--green); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 12px 22px; border-radius: 999px;
  transition: background .25s;
}
.wa-btn:hover { background: var(--blue2); color: #fff; }

/* ---- Live wall ---- */
.wall { padding: 110px var(--px); background: var(--bg); }
.wall__head { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.wall__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.wall__note { font-size: 13.5px; font-weight: 600; color: var(--muted); max-width: 300px; line-height: 1.5; }
.wall__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.post {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink); border-radius: 16px;
  box-shadow: 0 14px 36px rgba(20, 24, 28, .1);
  transition: transform .3s, box-shadow .3s;
}
.post:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(20, 24, 28, .16); }
.post--x { padding: 20px; }
.post--insta, .post--yt { overflow: hidden; }
.post__head { display: flex; align-items: center; gap: 10px; }
.post__head--pad { padding: 14px 18px; }
.post__avatar { width: 42px; height: 42px; border-radius: 50%; }
.post__avatar--x { border: 2px solid var(--blue2); }
.post__avatar--insta { width: 38px; height: 38px; border: 2px solid #E1306C; padding: 1px; }
.post__id { line-height: 1.2; }
.post__name { font-weight: 800; font-size: 14.5px; }
.post__name--sm { font-size: 14px; }
.post__verified { color: #1D9BF0; }
.post__handle { font-size: 12px; color: var(--muted); }
.post__handle--sm { font-size: 11.5px; }
.post__brand-x { margin-left: auto; font-weight: 900; font-size: 18px; }
.post__brand-insta {
  margin-left: auto; font-size: 12px; font-weight: 700;
  background: linear-gradient(45deg, #F58529, #DD2A7B 60%, #8134AF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.post__text { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.post__attach {
  display: block; width: 100%; height: 150px; object-fit: cover; object-position: top;
  border-radius: 12px; border: 1px solid rgba(20, 24, 28, .12); margin-top: 12px;
}
.post__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
  border-top: 1px solid rgba(20, 24, 28, .08);
}
.post__foot > span { white-space: nowrap; }
.post__foot-first { margin-left: auto; }
.post__photo { display: block; width: 100%; height: 220px; object-fit: cover; }
.post__insta-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 18px 0; font-size: 13px; color: var(--body); font-weight: 700; }
.post__caption { padding: 8px 18px 16px; font-size: 13.5px; line-height: 1.5; }
.post__time { margin-top: auto; padding: 0 18px 14px; font-size: 11.5px; color: #8A9096; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.post__video { position: relative; background: #000; flex: 1; min-height: 220px; }
.post__cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
/* Cards size to their own embed content — no stretch, no white voids */
.wall__grid { align-items: start; }
.post--frame { padding: 10px 10px 0; }
.post__frame { position: relative; overflow: hidden; border-radius: 12px; background: #fff; }
.post__frame iframe { display: block; width: 100%; border: 0; }
.post__frame--x iframe { height: 560px; }
/* IG embed content = fixed header (~180px) + 2 grid rows (2/3 of width).
   Size the iframe to that so no internal white space remains at any width. */
.post__frame--ig { container-type: inline-size; }
.post__frame--ig iframe { height: 530px; height: calc(184px + 66.7cqw); }
.post--yt .post__video { min-height: 380px; }
.post--frame .post__foot { padding: 10px 8px 12px; }
.post__foot-link { color: inherit; font-weight: 700; }
.post__foot-link:hover { color: var(--blue); }
.post__video--embed iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; position: absolute; inset: 0; }
.post__yt-channel a { color: inherit; }
.post__yt-channel a:hover { color: var(--blue); }
.post__video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .94; }
.post__video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 40%, rgba(0, 0, 0, .35)); }
.post__play-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.post__play { width: 60px; height: 42px; border-radius: 12px; background: rgba(255, 0, 0, .94); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.post__play-tri { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 3px; }
.post__live {
  position: absolute; top: 12px; left: 12px;
  background: #FF0000; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  border-radius: 4px; padding: 4px 9px;
  display: inline-flex; align-items: center; gap: 6px;
}
.post__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.post__watching {
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 3px 8px; white-space: nowrap;
}
.post__yt-title-row { display: flex; gap: 12px; padding: 14px 18px 8px; align-items: flex-start; }
.post__yt-avatar { width: 36px; height: 36px; border-radius: 50%; }
.post__yt-title { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.post__yt-channel { padding: 0 18px 16px 66px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.wall__follow { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.chip-link--sm { font-size: 13.5px; border-color: rgba(20, 24, 28, .18); }
.chip-link--muted { color: var(--muted); cursor: default; }
.chip-link--muted:hover { border-color: rgba(20, 24, 28, .18); color: var(--muted); }

/* ---- Social chips: real brand marks, each in its own house colour ----
   The icon carries --sm; the label stays ink so the handle keeps reading as text.
   Hover pulls the border and label over to the brand colour. Declared after
   .chip-link:hover so the brand tint wins over the default blue. */
.chip-link--brand { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; }
.chip-link--brand .sm-ico { width: 17px; height: 17px; flex: none; color: var(--sm); }
.chip-link--brand:hover { border-color: var(--sm); color: var(--sm); }
.chip-link--x  { --sm: #14181C; }
.chip-link--fb { --sm: #1877F2; }
.chip-link--ig { --sm: #DD2A7B; }
.chip-link--yt { --sm: #FF0000; }

/* ---- Photo gallery ---- */
.gallery { background: #fff; padding: 100px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
.gallery__head { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.gallery__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.meta-pill {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kicker); background: rgba(138, 90, 31, .08);
  border: 1px solid rgba(138, 90, 31, .25); border-radius: 999px; padding: 6px 14px;
  max-width: 340px; line-height: 1.5;
}
.gallery__grid { columns: 3; column-gap: 18px; margin-top: 40px; }
.gallery__item {
  break-inside: avoid; margin: 0 0 18px;
  border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 14px 36px rgba(20, 24, 28, .12);
}
.gallery__item img { display: block; width: 100%; transition: transform .45s; }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(10, 12, 14, .72));
  color: #fff; font-weight: 700; font-size: 13px; line-height: 1.45;
  opacity: 0; transition: opacity .3s;
}
.gallery__item:hover figcaption { opacity: 1; }

/* ---- INC / TNCC history ---- */
.history { background: var(--ink); color: #F2ECDF; padding: 100px var(--px); }
.history__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.history__lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: #B9BDC1; max-width: 640px; text-wrap: pretty; }
.history__lead--ta { line-height: 1.7; }
.history__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; }
.pres-chip {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; padding: 11px 14px;
}
.pres-chip__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(140deg, #4A5158, #2B3138);
  font-weight: 800; font-size: 12.5px; color: #E9E2D4; letter-spacing: .02em;
}
.pres-chip__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pres-chip__name { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.pres-chip__term { display: block; font-size: 11px; color: #9BA1A6; margin-top: 1px; }
.pres-chip--legend .pres-chip__avatar { background: linear-gradient(140deg, #0E7B3D, #06522A); color: #fff; }
.pres-chip--now { border-color: rgba(22, 104, 201, .55); background: rgba(22, 104, 201, .1); }
.pres-chip--now .pres-chip__avatar { background: linear-gradient(140deg, #1668C9, #073A75); color: #fff; }
.history__note { margin-top: 22px; font-size: 12.5px; color: #8A9096; font-weight: 600; }

/* ---- MPs & MLAs ---- */
.leaders { background: var(--bg); padding: 100px var(--px); }
.leaders__head { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.leaders__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.leaders__group { margin-top: 44px; }
.leaders__sub { margin: 0 0 18px; font-weight: 800; font-size: 20px; }
.leaders__count {
  margin-left: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); background: rgba(14, 123, 61, .1);
  border: 1px solid rgba(14, 123, 61, .25); border-radius: 999px; padding: 4px 12px;
  vertical-align: middle;
}
.leaders__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leader-card {
  background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: 0 14px 36px rgba(20, 24, 28, .08);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.leader-card__avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 10px; overflow: hidden;
  background: linear-gradient(140deg, #0E7B3D, #06522A);
  color: #fff; font-weight: 800; font-size: 17px;
}
.leader-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.leader-card__name { font-weight: 800; font-size: 17px; }
.leader-card__role { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.leader-card__handle {
  margin-top: 12px; font-weight: 700; font-size: 13px;
  border: 1.5px solid rgba(20, 24, 28, .16); border-radius: 999px; padding: 7px 14px;
  color: var(--ink); transition: border-color .25s, color .25s;
}
a.leader-card__handle:hover { border-color: var(--blue); color: var(--blue); }

/* ---- Office bearers ---- */
.leader-card__email { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; word-break: break-all; }
a.leader-card__email:hover { color: var(--green); }
.footer__addr a { color: inherit; }
.footer__addr a:hover { color: var(--gold); }
.ob-group {
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(20, 24, 28, .07);
  margin-bottom: 12px; overflow: hidden;
}
.ob-group summary {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 16px;
}
.ob-group summary::-webkit-details-marker { display: none; }
.ob-group summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--muted); font-weight: 700; }
.ob-group[open] summary::after { content: "–"; }
.ob-group__count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--green); background: rgba(14, 123, 61, .1);
  border: 1px solid rgba(14, 123, 61, .25); border-radius: 999px; padding: 3px 11px;
}
.ob-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  border-top: 1px solid rgba(20, 24, 28, .07);
  background: rgba(20, 24, 28, .04);
}

/* A group whose roster has not been published yet. It replaces .ob-list rather
   than sitting inside it: .ob-list is a two-column grid, so a single line of
   placeholder text would hug the left column and read as a missing second name. */
.ob-pending {
  padding: 26px 18px; text-align: center;
  border-top: 1px solid rgba(20, 24, 28, .07);
  background: rgba(20, 24, 28, .04);
  color: rgba(20, 24, 28, .55); font-size: 14.5px; font-style: italic; letter-spacing: .01em;
}
.ob-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; padding: 12px 22px;
}
.ob-row__id { min-width: 0; }
.ob-row__name { font-weight: 700; font-size: 14px; }
.ob-row__role { font-size: 12px; color: var(--muted); font-weight: 600; }
.ob-row__tel { margin-left: auto; font-weight: 700; font-size: 12.5px; color: var(--green); white-space: nowrap; }
.ob-row__tels { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ob-row__tels .ob-row__tel { margin-left: 0; }

/* ---- District presidents ---- */
.dcc { background: #fff; padding: 100px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
/* auto-fill keeps each card near the photos' native 303px, so they stay sharp instead of upscaling */
.dcc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; margin-top: 40px; }
/* Portrait card: large photo on top, identity panel beneath (matches the INC leadership layout). */
.dcc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid rgba(20, 24, 28, .08);
  border-radius: 14px; padding: 0;
  box-shadow: 0 10px 28px rgba(20, 24, 28, .08);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.dcc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 24, 28, .16); }
.dcc-card__avatar {
  /* Source portraits are 160x204, so 4:5 shows the whole frame with almost no crop. */
  width: 100%; aspect-ratio: 4 / 5; border-radius: 0; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(140deg, #0E7B3D, #06522A);
  color: #fff; font-weight: 800; font-size: 42px;
}
.dcc-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.dcc-card__id { min-width: 0; flex: 1; background: #0C5C2F; color: #fff; padding: 16px 18px 18px; }
.dcc-card__name { font-weight: 800; font-size: 15px; line-height: 1.3; color: #fff; }
.dcc-card__dcc {
  display: block; width: fit-content; max-width: 100%;
  font-size: 12px; color: rgba(255, 255, 255, .82); font-weight: 700;
  margin-top: 5px; padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, .38);
}
.dcc-card__tel {
  display: inline-block; margin: 10px 12px 0 0;
  font-weight: 700; font-size: 13px; color: #fff; transition: color .2s;
}
.dcc-card__tel:hover { color: var(--gold); }

/* ---- Meet & Request ---- */
.meet { background: #fff; padding: 100px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
.meet__head { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.meet__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.meet__lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 640px; text-wrap: pretty; }
.meet__lead--ta { line-height: 1.7; }
.meet__card {
  margin-top: 36px; max-width: 900px;
  background: var(--bg); border: 1.5px solid rgba(20, 24, 28, .08);
  border-radius: 26px; padding: 34px;
}
.meet__group { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(20, 24, 28, .08); }
.meet__step {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 17px; margin-bottom: 18px;
}
.meet__stepnum {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(14, 123, 61, .1); color: var(--green);
  font-weight: 800; font-size: 14px;
}
.meet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.meet-field {
  display: grid; gap: 6px; align-content: start;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.meet-field--full { margin-top: 14px; }
.meet-field input, .meet-field select, .meet-field textarea {
  background: #fff; border: 1.5px solid rgba(20, 24, 28, .12); border-radius: 10px;
  padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .2s;
}
.meet-field input:focus, .meet-field select:focus, .meet-field textarea:focus { border-color: var(--green); }
.meet-field textarea { resize: vertical; min-height: 84px; }
.meet__improve-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.meet__improve {
  background: #fff; color: var(--green);
  border: 1.5px solid var(--green); border-radius: 10px;
  padding: 10px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
  transition: background .2s, color .2s;
}
.meet__improve:hover { background: var(--green); color: #fff; }
.meet__improve[disabled] { opacity: .6; cursor: wait; }
.meet__improve-hint { font-size: 12.5px; color: var(--muted); font-weight: 600; max-width: 460px; line-height: 1.5; }
.meet__suggest {
  margin-top: 16px; background: #fff;
  border: 1.5px solid rgba(14, 123, 61, .25); border-radius: 14px; padding: 18px 20px;
}
.meet__suggest-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 12px 0 4px;
}
.meet__suggest-label:first-child { margin-top: 0; }
.meet__suggest-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.meet__suggest-meta { margin-top: 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.meet__suggest-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.meet__use {
  background: var(--green); color: #fff; border: none; border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .2s;
}
.meet__use:hover { background: var(--ink); }
.meet__keep {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(20, 24, 28, .2); border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.meet__keep:hover { border-color: var(--blue); color: var(--blue); }
.meet__submit {
  background: var(--blue2); color: #fff; border: none; border-radius: 999px;
  padding: 15px 34px; font-weight: 800; font-size: 16px; letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 12px 30px rgba(11, 79, 158, .3);
  transition: background .25s;
}
.meet__submit:hover { background: var(--ink); }
.meet__note { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 560px; }
.meet__done {
  margin-top: 36px; max-width: 900px; text-align: center;
  background: linear-gradient(160deg, #0E7B3D, #06522A); color: #fff;
  border-radius: 26px; padding: 46px 30px;
  animation: stampPop .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.meet__done-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .15); border: 2px solid rgba(255, 255, 255, .5);
  font-size: 30px; font-weight: 800;
}
.meet__done-title { font-weight: 800; font-size: 26px; margin-top: 14px; }
.meet__done-text { margin: 10px auto 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 460px; }
.meet__reset {
  margin-top: 18px; background: transparent; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 999px;
  padding: 10px 22px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .25s;
}
.meet__reset:hover { background: rgba(255, 255, 255, .12); }

/* ---- Join ---- */
.join { background: #fff; padding: 110px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
.join__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
}
.join__title { margin: 14px 0 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.join__lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 520px; text-wrap: pretty; }
.join__lead--ta { line-height: 1.7; }
.districts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.district-chip {
  background: var(--bg); color: var(--ink);
  border: 1.5px solid rgba(20, 24, 28, .16); border-radius: 999px;
  padding: 8px 15px; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all .2s;
}
.district-chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.join-card {
  position: sticky; top: 110px;
  background: linear-gradient(160deg, #0E7B3D, #06522A);
  border-radius: 26px; padding: 36px; color: #fff;
  box-shadow: 0 30px 70px rgba(14, 123, 61, .35);
}
.join-card__head { display: flex; align-items: center; gap: 12px; }
.join-card__emblem { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); }
.join-card__title { font-weight: 800; font-size: 24px; line-height: 1.1; }
.join-card__sub { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.join-form { display: grid; gap: 14px; margin-top: 26px; }
.join-form[hidden] { display: none; }
.join-field {
  display: grid; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.join-field input, .join-field select {
  background: rgba(255, 255, 255, .94); border: none; border-radius: 10px;
  padding: 13px 16px; font-family: inherit; font-size: 15.5px; color: var(--ink); outline: none;
}
.join-field select { padding: 13px 14px; }
.join-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 999px;
  padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .2s, color .2s;
}
.role-chip.is-on { background: #fff; color: var(--green); }
.join-submit {
  margin-top: 6px; background: var(--blue2); color: #fff;
  border: none; border-radius: 999px; padding: 16px;
  font-weight: 800; font-size: 16.5px; letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: background .25s;
}
.join-submit:hover { background: var(--ink); }
.join-note { font-size: 12px; color: rgba(255, 255, 255, .65); line-height: 1.5; }

/* Join flow stepper: District -> Committee -> Details */
.join-steps { display: flex; list-style: none; margin: 30px 0 4px; padding: 0; max-width: 520px; }
.join-step {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
}
.join-step:not(:last-child)::after {
  content: ''; position: absolute; top: 16px; left: calc(50% + 25px); width: calc(100% - 50px);
  height: 3px; border-radius: 2px; background: rgba(20, 24, 28, .12); transition: background .3s;
}
.join-step.is-done:not(:last-child)::after { background: var(--green); }
.join-step__dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: #fff; color: var(--muted);
  border: 2px solid rgba(20, 24, 28, .18); transition: all .25s;
}
.join-step.is-active .join-step__dot {
  background: var(--blue2); border-color: var(--blue2); color: #fff;
  box-shadow: 0 0 0 5px rgba(230, 126, 34, .18);
}
.join-step.is-done .join-step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.join-step__tick { display: none; }
.join-step.is-done .join-step__num { display: none; }
.join-step.is-done .join-step__tick { display: block; }
.join-step__label { font-size: 12px; font-weight: 800; color: var(--muted); }
.join-step.is-active .join-step__label, .join-step.is-done .join-step__label { color: var(--ink); }

/* Party-committee picker (appears when a district is selected) */
.join-dcc { margin-top: 24px; }
.join-dcc__head { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.join-dcc__num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue2); color: #fff; font-size: 13px; font-style: normal;
  margin-right: 9px; vertical-align: -5px;
}
.join-dcc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dcc-pick {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1.5px solid rgba(20, 24, 28, .12); border-radius: 13px;
  padding: 10px 13px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.dcc-pick:hover { border-color: var(--blue); }
.dcc-pick.is-on { border-color: var(--green); box-shadow: 0 0 0 2.5px rgba(14, 123, 61, .22); }
.dcc-pick__avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.dcc-pick__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.dcc-pick__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcc-pick__name { font-weight: 800; font-size: 13.5px; line-height: 1.25; }
.dcc-pick__pres { font-size: 12px; font-weight: 600; color: var(--muted); }
.join-dcc-note { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #CFF3DD; text-transform: none; letter-spacing: .01em; }
.join-dcc-note[hidden] { display: none; }
/* the committee dropdown only appears once a district is chosen */
.join-field--dcc[hidden] { display: none; }

/* Step 3 badge + progressive lock inside the join card */
.join-stepbadge {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.join-stepbadge b {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--green); font-size: 13px; flex-shrink: 0;
}
.join-lockhint {
  display: flex; align-items: flex-start; gap: 9px;
  background: rgba(255, 255, 255, .1); border: 1.5px dashed rgba(255, 255, 255, .45);
  border-radius: 12px; padding: 11px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, .92);
}
.join-lockhint[hidden] { display: none; }
.join-form .join-field, .join-form .join-roles, .join-form .join-submit, .join-form .join-note { transition: opacity .3s; }
.join-form.is-locked .join-field:not(.join-field--district):not(.join-field--dcc),
.join-form.is-locked .join-submit,
.join-form.is-locked .join-note { opacity: .35; pointer-events: none; user-select: none; }
.form-error {
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: rgba(214, 40, 40, .12); border: 1px solid rgba(214, 40, 40, .4);
  color: #D62828; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.form-error[hidden] { display: none; }
.join-card .form-error { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: #fff; }
.meet__submit[disabled], .join-submit[disabled] { opacity: .6; cursor: wait; }
.join-done { margin-top: 30px; text-align: center; padding: 26px 10px; animation: stampPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.join-done__title { font-weight: 800; font-size: 26px; margin-top: 12px; }
.join-done__text { margin: 10px auto 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 340px; }
.join-reset {
  margin-top: 18px; background: transparent; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 999px;
  padding: 10px 22px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .25s;
}
.join-reset:hover { background: rgba(255, 255, 255, .12); }

/* ---- Footer ---- */
.footer { background: var(--ink); color: #D8DCE0; padding: 80px var(--px) 0; }
.footer__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__emblem {
  width: 54px; height: 54px; border-radius: 50%; background: #fff;
  filter: saturate(1.7) contrast(1.22) brightness(1.04);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .18);
}
.footer__names { display: flex; flex-direction: column; line-height: 1.3; }
.footer__title { font-weight: 800; font-size: 20px; color: #fff; line-height: 1.32; }
.footer__sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #8A9096; font-weight: 600; line-height: 1.35; margin-top: 2px; }
.footer__addr { margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: #9BA1A6; max-width: 420px; text-wrap: pretty; }
.footer__head { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.footer__links { display: grid; gap: 10px; margin-top: 16px; font-weight: 600; font-size: 15px; }
.footer__links a { color: #D8DCE0; transition: color .25s; }
.footer__links a:hover { color: var(--gold); }
.footer__soc { display: grid; gap: 18px; margin-top: 18px; }
.footer__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.footer__soc-name { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A9096; }
.footer__soc-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.footer__soc-icons a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #D8DCE0; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .25s, background .25s, border-color .25s, transform .25s;
}
.footer__soc-icons a:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer__soc-icons svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.footer__bar {
  max-width: 1240px; margin: 56px auto 0; padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; gap: 18px;
  font-size: 12.5px; color: #8A9096;
}
.footer__tricolor { height: 8px; margin: 0 calc(-1 * var(--px)); background: linear-gradient(90deg, #FF9933 0 33.4%, #FBF8F1 33.4% 66.7%, #138808 66.7% 100%); }

/* ---- Chatbot ---- */
.chat { position: fixed; right: 26px; bottom: 26px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.chat__panel {
  width: min(378px, calc(100vw - 48px));
  background: #fff; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(20, 24, 28, .35);
  overflow: hidden;
  animation: chatIn .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.chat__panel[hidden] { display: none; }
.chat__head { background: var(--ink); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.chat__avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--blue2); }
.chat__id { line-height: 1.15; }
.chat__name { font-weight: 800; font-size: 15px; }
.chat__status { font-size: 11.5px; color: #9BA1A6; }
.chat__online { color: #3FB950; }
.chat__close {
  margin-left: auto; background: rgba(255, 255, 255, .12); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px; font-size: 15px; cursor: pointer;
  transition: background .2s;
}
.chat__close:hover { background: rgba(255, 255, 255, .25); }
.chat__body {
  height: clamp(200px, 40vh, 330px); overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
}
.msg {
  max-width: 82%; padding: 11px 14px;
  font-size: 14.5px; line-height: 1.55;
  box-shadow: 0 4px 14px rgba(20, 24, 28, .08);
  white-space: pre-line;
}
.msg--bot { align-self: flex-start; background: #fff; color: var(--ink); border-radius: 14px 14px 14px 4px; }
.msg--me { align-self: flex-end; background: var(--green); color: #fff; border-radius: 14px 14px 4px 14px; }
.chat__typing {
  /* Sits outside #chat-body so toggling it never re-announces the live region. */
  margin: 0 16px 8px; align-self: auto; width: fit-content;
  background: #fff; border-radius: 14px 14px 14px 4px;
  padding: 12px 16px; display: flex; gap: 5px;
  box-shadow: 0 4px 14px rgba(20, 24, 28, .08);
}
.chat__typing[hidden] { display: none; }
.chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: #8A9096; animation: dotBlink 1.2s infinite; }
.chat__typing span:nth-child(2) { animation-delay: .2s; }
.chat__typing span:nth-child(3) { animation-delay: .4s; }
.chat__quickwrap { padding: 12px 14px; background: #fff; border-top: 1px solid rgba(20, 24, 28, .08); }
.chat__quicklabel { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A9096; margin-bottom: 8px; }
.chat__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-btn {
  background: var(--bg); border: 1.5px solid rgba(20, 24, 28, .14); border-radius: 999px;
  padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.quick-btn:hover { border-color: var(--blue); color: var(--blue); }
/* Quick replies that leave the chat: a gallery album, a video, X */
.quick-btn--link {
  display: inline-block; text-decoration: none;
  border-color: rgba(19, 52, 123, .28); color: var(--blue);
  transition: background .2s, border-color .2s, color .2s;
}
.quick-btn--link:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.chat__fab {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: 10px 20px 10px 10px; cursor: pointer;
  box-shadow: 0 18px 44px rgba(20, 24, 28, .4);
  animation: pulse 3s infinite;
  transition: background .25s;
}
.chat__fab:hover { background: var(--green); }
.chat__fab-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--blue2); }
.chat__fab-label { text-align: left; line-height: 1.15; white-space: nowrap; }
.chat__fab-title { display: block; font-weight: 800; font-size: 14.5px; }
.chat__fab-sub { display: block; font-size: 11px; color: #9BA1A6; }

/* ---- Cinematic opener ---- */
.cinema { position: relative; background: var(--bg); }
.cinema__stage {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: clip;
  background: var(--bg);
}
.cinema__frame {
  position: absolute; inset: 0; overflow: hidden;
  background: #07090B;
  transform-origin: 50% 45%;
  will-change: transform;
}
.cinema__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}
.cinema__vid--2, .cinema__vid--3 { opacity: 0; }
.cinema__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(11, 79, 158, .14), transparent 38% 62%, rgba(10, 60, 34, .22)),
    linear-gradient(180deg, rgba(7, 9, 11, .38), transparent 30% 68%, rgba(7, 9, 11, .55));
}
.cinema__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(5, 7, 9, .6));
}
.cinema__grain {
  position: absolute; inset: -60px; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .07; mix-blend-mode: overlay;
  animation: grainShift 1.1s steps(5) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-18px, 12px); }
  40% { transform: translate(14px, -20px); }
  60% { transform: translate(-10px, -14px); }
  80% { transform: translate(20px, 16px); }
  100% { transform: translate(0, 0); }
}
.cinema__bar {
  position: absolute; left: 0; right: 0; height: 10vh;
  background: #07090B; z-index: 5;
  will-change: transform;
}
.cinema__bar--top { top: 0; }
.cinema__bar--bot { bottom: 0; }
.cinema__title {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; text-align: center;
  color: #fff; padding: 0 24px; pointer-events: none;
}
.cinema__title--2 .w, .cinema__title--3 .w, .cinema__title--4 .w, .cinema__beatsub, .cinema__tag { opacity: 0; visibility: hidden; }
.cinema__kicker {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.cinema__flag {
  width: 34px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #FF9933 33%, #fff 33% 66%, #138808 66%);
}
.cinema__h {
  margin: 16px 0 0; font-weight: 800;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 1.04; letter-spacing: -.01em;
  text-shadow: 0 6px 44px rgba(0, 0, 0, .5);
}
.cinema__h--beat { font-size: clamp(48px, 7.4vw, 110px); }
.cinema__h .w { display: inline-block; }
/* Explicit word gap. The words are animated individually, so each is its own
   inline-block; spacing them with a real space depends on a whitespace text
   node surviving between the tags, which is not something to bet a hero title
   on. .28em compensates for the -.01em letter-spacing above. */
.cinema__h .w + .w { margin-left: .28em; }
.cinema__sub, .cinema__beatsub {
  margin-top: 16px;
  font-size: clamp(11px, 1.4vw, 15px); font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.cinema__beatsub { color: var(--gold); }
.cinema__tag {
  position: absolute; left: 40px; bottom: 12.5vh; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, .88);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.cinema__tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; animation: pulse 2s infinite; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  :root { --px: 28px; }
  .president__grid, .press__grid, .manifesto__grid, .join__grid { grid-template-columns: 1fr; gap: 48px; }
  .movements__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .wall__grid { grid-template-columns: repeat(2, 1fr); }
  .join-card { position: static; }
  .president { padding-top: 80px; }
  .movements, .manifesto, .press, .wall, .join { padding-top: 80px; padding-bottom: 80px; }
  .press__collage { height: min(560px, 78vw); max-width: 640px; }
  .president__badge { right: 0; }
  .history__grid { grid-template-columns: repeat(3, 1fr); }
  .leaders__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery, .history, .leaders, .dcc, .meet { padding-top: 80px; padding-bottom: 80px; }
  .meet__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --px: 20px; }
  .hero { padding: 40px var(--px) 70px; }
  .hero__title { padding-right: 0; }
  .hero__media { min-width: 0; flex-basis: 100%; }
  .wall__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__bar { flex-wrap: wrap; row-gap: 6px; }
  .nav { gap: 10px; padding: 10px 14px; }
  .nav__brand { min-width: 0; }
  .nav__names { min-width: 0; }
  .nav__title { font-size: 14.5px; line-height: 1.38; overflow: hidden; text-overflow: ellipsis; }
  .nav__sub { line-height: 1.4; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
  .nav__emblem { width: 40px; height: 40px; flex-shrink: 0; }
  .nav__links { gap: 0; }
  .nav__links > a:not(.nav__cta) { display: none; }
  .nav__cta { padding: 8px 16px; font-size: 13px; }
  .nav__burger { display: flex; margin-right: -8px; }
  .hide-sm { display: none !important; }
  .stats__grid { gap: 24px; }
  .chat { right: 14px; bottom: 14px; }
  .cinema__tag { left: 20px; bottom: 11vh; font-size: 10.5px; letter-spacing: .16em; }
  .gallery__grid { columns: 2; column-gap: 14px; }
  .history__grid { grid-template-columns: repeat(2, 1fr); }
  .leaders__grid { grid-template-columns: 1fr; }
  .meet__grid { grid-template-columns: 1fr; }
  .meet__card { padding: 24px 18px; }
  .ob-list { grid-template-columns: 1fr; }
  /* columns come from auto-fill; just tighten the card interior on small screens */
  .dcc__grid { gap: 16px; }
  .dcc-card__id { padding: 13px 14px 15px; }
  .dcc-card__name { font-size: 13.5px; }
  .ob-row { padding: 12px 16px; }
  .cinema__bar { height: 8vh; }
  .cinema__title { padding: 0 16px; }
  .cinema__h { font-size: clamp(32px, 10vw, 64px); }
  .cinema__h--beat { font-size: clamp(36px, 11.5vw, 72px); }
  .cinema__sub, .cinema__beatsub { letter-spacing: .22em; font-size: 11px; }
  .press__collage { margin: 0 auto; }
  .press__row { flex-wrap: wrap; padding: 14px 16px; gap: 6px 14px; }
  .press__row-title { flex: 1 1 100%; order: 3; font-size: 15px; }
  .press__date { min-width: 0; }
  .movements__grid { gap: 20px; }
  .mv-hero { min-height: 440px; }
}

@media (max-width: 420px) {
  .nav__title { font-size: 16px; }
  .nav__sub { letter-spacing: .16em; }
  .stat__num { font-size: 44px; min-height: 44px; }
  .stats { padding-top: 48px; padding-bottom: 44px; }
  .hero__seal { width: 84px; height: 84px; bottom: 62px; }
  .president__photo img { height: 420px; }
  .mv-hero__content { padding: 24px 20px; }
  .mv-hero__logo { width: 72px; height: 72px; top: 16px; left: 16px; }
  .pledge-btn { font-size: 14px; padding: 12px 20px; }
  .stamp { right: 18px; bottom: 150px; }
  .join-card { padding: 26px 20px; }
  .chat__panel { width: calc(100vw - 28px); }
  .chat__fab-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Scroll-driven timelines ignore duration overrides — stop them explicitly */
  .rv, .rise, .parallax-up, .parallax-down {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nav { animation: none !important; }
  .progress { display: none; }
}

/* ================= Folder-based photo gallery (gallery.html) ================= */
.gal { background: #fff; padding: 76px var(--px); border-top: 1px solid rgba(20, 24, 28, .07); }
.gal--feed { background: var(--bg); }
.gal__head { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.gal__h { margin: 6px 0 0; font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; }
.gal__empty { color: var(--muted); font-weight: 600; }
.gal__empty code { background: var(--bg); padding: 2px 6px; border-radius: 6px; font-size: .9em; }

/* folder cards */
.gal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.gal-folder {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid rgba(20, 24, 28, .1); border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 24, 28, .07);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.gal-folder:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 24, 28, .15); border-color: var(--blue); }
.gal-folder__shot { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.gal-folder__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.gal-folder:hover .gal-folder__shot img { transform: scale(1.06); }
.gal-folder__badge {
  position: absolute; right: 10px; bottom: 10px; background: rgba(11, 79, 158, .94); color: #fff;
  font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
.gal-folder__meta { padding: 14px 16px 16px; }
.gal-folder__name { display: block; font-weight: 800; font-size: 16px; line-height: 1.4; color: var(--ink); }
.gal-folder__sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* photos inside an album */
.gal__photos { columns: 3; column-gap: 16px; }
.gal-photo {
  display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer;
  break-inside: avoid; margin: 0 0 16px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 24, 28, .1);
}
.gal-photo img { display: block; width: 100%; height: auto; transition: transform .45s; }
.gal-photo:hover img { transform: scale(1.04); }
.gal__feed { max-width: 620px; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(10, 14, 20, .93); display: flex; align-items: center; justify-content: center; }
/* author display:flex would otherwise beat the UA [hidden] rule and pin the overlay open */
.lb[hidden] { display: none; }
.lb__img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lb__close, .lb__nav {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: none; cursor: pointer;
  border-radius: 50%; width: 52px; height: 52px; font-size: 30px; line-height: 1; transition: background .2s;
}
.lb__close:hover, .lb__nav:hover { background: var(--blue2); }
.lb__close { top: 22px; right: 22px; font-size: 26px; }
.lb__prev { left: 20px; } .lb__next { right: 20px; }
.lb__cap { position: absolute; bottom: 24px; color: rgba(255, 255, 255, .85); font-weight: 700; font-size: 13px; letter-spacing: .06em; }

@media (max-width: 900px) { .gal__photos { columns: 2; } }
@media (max-width: 560px) {
  .gal__photos { columns: 1; }
  .lb__prev { left: 8px; } .lb__next { right: 8px; }
  .lb__close, .lb__nav { width: 44px; height: 44px; font-size: 24px; }
}

/* Tamil compounds are long; never let a single token overflow its container. */
h1, h2, h3, .hero__title, .pagehero__title, .movements__title,
.manifesto__title, .gal__h, .leaders__title, .meet__title { overflow-wrap: break-word; }

/* ---- Live social feed (gallery.html) ---- */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.feed__note { grid-column: 1 / -1; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.feed__note a { color: var(--blue); font-weight: 700; }
.feed-card {
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: #fff; border: 1px solid rgba(20, 24, 28, .1); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(20, 24, 28, .07);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.feed-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 24, 28, .15); border-color: var(--blue); color: var(--ink); }
.feed-card__shot { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.feed-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.feed-card:hover .feed-card__shot img { transform: scale(1.05); }
.feed-card__play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(11, 79, 158, .92); color: #fff; display: grid; place-items: center;
  font-size: 19px; padding-left: 3px;
}
.feed-card__body { padding: 13px 15px 16px; }
.feed-card__title { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.feed-card__meta { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.gal__feed { max-width: 620px; margin-top: 26px; }

/* X posts and the Instagram profile embed sit side by side under the videos.
   #feed-x is filled by JS only when a post is featured, so :empty collapses
   the column and lets Instagram take the full row on its own. */
.gal__social {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px; align-items: start; margin-top: 26px; max-width: 1000px;
}
.gal__social .gal__feed { max-width: none; margin-top: 0; }
.gal__social .gal__feed:empty { display: none; }
.gal__social .post { max-width: 620px; }

/* Homepage gallery tiles are links now: keep the figure look, add affordance. */
a.gallery__item { display: block; position: relative; color: inherit; cursor: pointer; }
a.gallery__item:hover { color: inherit; }
.gallery__count {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(11, 79, 158, .94); color: #fff;
  font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px;
}

/* ---- Tamil readability ----------------------------------------------------
   Tamil needs more vertical room than Latin at the same size: the script has
   tall ascenders and stacked vowel signs that collide on tight leading.
   Line-height is safe everywhere (it cannot widen the nav). The small size
   bump is limited to prose, so it never re-breaks the nav overflow budget. */
.l-ta { line-height: 1.62; }
.pagehero__lead .l-ta, .hero__lead .l-ta, .manifesto__lead .l-ta,
.mv-card__text .l-ta, .softtip .l-ta, p .l-ta { font-size: 1.045em; line-height: 1.72; }
h1 .l-ta, h2 .l-ta, h3 .l-ta, .hero__title .l-ta,
.pagehero__title .l-ta, .gal__h .l-ta { line-height: 1.28; }
/* stacked vowel signs need the extra room headings otherwise clip */
[data-lang="ta"] h1, [data-lang="ta"] h2, [data-lang="ta"] h3 { padding-bottom: .06em; }

/* official accounts */

/* elected members */
/* inert until the office supplies each member's handles */

/* Client requirement (16 Aug): every nav tab must stay VISIBLE in Tamil, never
   collapsed to the burger. Tamil labels are ~24% wider than English, so instead of
   hiding them we give the links their own full-width row on medium screens. The
   burger only takes over on genuine phone widths, where 10 tabs make no sense. */
/* With the tabs grouped into 5 dropdowns a single row needs only ~1060px
   (measured), so the two-row fallback now applies to a narrow band just
   above the burger breakpoint instead of every laptop. */
@media (max-width: 1100px) {
  /* two-row mode: trim vertical bulk so the sticky bar stays reasonable */
  .nav { flex-wrap: wrap; row-gap: 2px; padding: 8px 20px 7px; }
  .nav__emblem { width: 50px; height: 50px; }
  .nav__sub { display: none; }
  /* row 1: brand left, language switch right. row 2: the tabs.
     .spacer is flex:1 with the default order 0, so it MUST be taken out here or
     it sorts ahead of the brand and pushes it to the right-hand edge. */
  .nav > .spacer { display: none; }
  .nav__brand { order: 0; margin-right: auto; }
  .lang-switch--nav { order: 1; margin-left: auto; }
  .nav__burger { order: 2; }
  .nav__links {
    order: 3; flex-basis: 100%; justify-content: flex-start;
    gap: 14px; font-size: 13.5px; padding-top: 2px;
  }
  .nav .nav__links { gap: 14px; font-size: 13.5px; }
}
@media (max-width: 1280px) {
  .nav .nav__links { gap: 14px; font-size: 13.5px; }
}
@media (max-width: 900px) {
  .nav { flex-wrap: nowrap; padding-bottom: 12px; }
  .nav__links { display: none !important; }
  .nav__burger { display: flex !important; margin-right: -8px; }
}

/* ---- Office bearers / elected members: inc.in-style cards (client, 16 Aug) ----
   "we have kept the photos like circular ones ... see how the photo and the
   details are below that. We need to have like this much big photo."
   Source files are only 160x160, so the square is capped at 168px: any larger
   and we would be upscaling and it would look soft. Higher-res portraits from
   the office would let this grow. */
.leader-card {
  padding: 0; overflow: hidden; align-items: stretch; gap: 0;
  border-radius: 16px;
}
.leader-card__avatar {
  width: 100%; max-width: 168px; height: auto; aspect-ratio: 1 / 1;
  border-radius: 0; margin: 0; font-size: 40px;
  align-self: flex-start;
}
.leader-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.leader-card__body { padding: 14px 18px 18px; }
.leader-card__name, .leader-card__role,
.leader-card__handle, .leader-card__email { margin-left: 18px; margin-right: 18px; }
.leader-card__name { margin-top: 14px; }
.leader-card__email { margin-bottom: 16px; }
.leader-card__handle { margin-bottom: 4px; }

/* President card on the Organization page: bigger, square, not a small circle */
.orgpres__photo {
  width: 170px; height: 210px; border-radius: 14px;
  object-fit: cover; object-position: 50% 14%;
}
@media (max-width: 560px) {
  .leader-card__avatar { max-width: 132px; }
  .orgpres__photo { width: 132px; height: 164px; }
}

/* ---- Our Inspiration (inc.in card pattern, Tamil Nadu leaders) ---- */
.insp { background: #fff; padding: 92px var(--px); border-top: 1px solid rgba(20,24,28,.07); }
.insp__head { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.insp__title { margin: 12px 0 0; font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; }
.insp__lead { margin: 14px 0 0; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--body); }
.insp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.insp-card {
  background: var(--bg); border: 1px solid rgba(20,24,28,.08); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,24,28,.07);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.insp-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(20,24,28,.15); border-color: var(--blue); }
.insp-card__shot { display: block; aspect-ratio: 4 / 5; background: #ECE5D8; overflow: hidden; }
.insp-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; transition: transform .45s; }
.insp-card:hover .insp-card__shot img { transform: scale(1.05); }
.insp-card__body { padding: 14px 16px 17px; }
.insp-card__name { font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.insp-card__role { margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .insp__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---- Grouped nav with dropdowns -------------------------------------------
   The client wanted every tab visible in Tamil, but 10 Tamil labels cannot fit
   one row alongside the enlarged branding (measured: 1461px needed). Grouping
   into 5 top-level items solves both. Mirrors inc.in, which runs 6. */
.nav__grp { position: relative; display: flex; align-items: center; }

/* The trigger must read as a nav link, not a form control: without a full
   reset the browser paints its own grey box and outset border. */
.nav__grp-btn {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: 0;
  font: inherit; line-height: inherit; text-align: left;
  color: var(--ink); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .2s;
}
.nav__grp-btn:hover,
.nav__grp:focus-within .nav__grp-btn,
.nav__grp[data-open="true"] .nav__grp-btn { color: var(--blue); }
.nav__grp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

/* chevron, drawn from borders so it inherits colour */
.nav__caret {
  width: 6px; height: 6px; flex: none; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .5;
  transition: transform .22s var(--ease, ease), opacity .2s;
}
.nav__grp-btn:hover .nav__caret,
.nav__grp[data-open="true"] .nav__caret { opacity: 1; }
.nav__grp[data-open="true"] .nav__caret { transform: rotate(-135deg); margin-top: 1px; }

.nav__grp-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  transform-origin: top center;
  min-width: 212px; z-index: 90;
  background: #fff; border: 1px solid rgba(20, 24, 28, .08); border-radius: 14px;
  box-shadow: 0 4px 10px rgba(20, 24, 28, .05), 0 22px 48px rgba(20, 24, 28, .16);
  padding: 7px; display: grid; gap: 1px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility deliberately not transitioned: it only flips at the end of the
     duration, which delays the menu and makes the open state hard to detect. */
  transition: opacity .18s, transform .18s;
}
/* little notch pointing at the trigger */
.nav__grp-menu::before {
  content: ''; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; background: #fff; transform: rotate(45deg);
  border-left: 1px solid rgba(20, 24, 28, .08); border-top: 1px solid rgba(20, 24, 28, .08);
  border-radius: 2px 0 0 0;
}
.nav__grp:hover .nav__grp-menu,
.nav__grp:focus-within .nav__grp-menu,
.nav__grp[data-open="true"] .nav__grp-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav__grp-menu > a {
  position: relative; display: block; padding: 10px 13px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background .16s, color .16s, padding-left .16s;
}
.nav__grp-menu > a:hover {
  background: rgba(11, 79, 158, .07); color: var(--blue); padding-left: 17px;
}
/* hover bridge so the menu does not close in the gap under the trigger */
.nav__grp::after { content: ''; position: absolute; top: 100%; left: -6px; right: -6px; height: 16px; }
@media (max-width: 900px) { .nav__grp { display: none; } }

/* Timeline badges in Tamil. The date circle is 68px and the medal 88px, both
   sized for two Latin capitals; Tamil clusters are wider, so "ஜூலை 24" and
   "சொப" need a smaller size to keep clear of the circle edge. */
[data-lang="ta"] .tl-item__date { font-size: 9.5px; letter-spacing: 0; }
[data-lang="ta"] .tl-item__medal { font-size: 21px; }


/* ---- Tagore AI assistant: composer, citations, markers ----
   The panel gained a text input, so its height is now the sum of five rows.
   Clamp it, and make the panel a column so the composer cannot be pushed off
   screen by a long transcript or a raised keyboard. */
.chat__panel { max-height: calc(100vh - 92px); display: flex; flex-direction: column; }
.chat__composer {
  display: flex; gap: 8px; padding: 10px 12px; background: #fff;
  border-top: 1px solid rgba(20, 24, 28, .08);
}
.chat__composer[hidden] { display: none; }
.chat__input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid rgba(20, 24, 28, .16); border-radius: 12px;
  background: #fff; color: var(--ink);
}
.chat__input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.chat__send {
  flex: 0 0 auto; width: 42px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 15px; line-height: 1;
}
.chat__send:hover { background: var(--blue2); }
.chat__online--down { color: #C9752B; }

/* Citation chips under an answer: the route to the page the answer came from. */
.chat__cite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Marks an answer written by the model rather than curated, so a reader can
   tell the difference. */
.msg__tag {
  display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8A9096;
}
.msg--me .msg__tag { color: rgba(255, 255, 255, .75); }
.msg--note {
  align-self: center; background: transparent; box-shadow: none;
  color: #6B7178; font-size: 12.5px; max-width: 92%; text-align: center;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  /* iOS zooms the whole page when focusing an input under 16px. */
  .chat__input { font-size: 16px; }
  .chat__panel { max-height: calc(100dvh - 76px); }
}


/* ---- Campaign identities strip ----
   The logos are the party's own field campaigns, so they sit directly under
   Movements. Two identical tracks scroll as one: when the first has moved its
   full width plus the gap, the second is exactly where the first began, so the
   loop has no seam. The clone is aria-hidden, so each campaign is announced
   once. */
.camp { padding: 52px 0 60px; background: var(--bg); overflow: hidden; }
.camp__head { margin-bottom: 24px; }
.camp__title { margin: 6px 0 0; font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; }

.camp__marquee {
  display: flex; gap: 18px; overflow: hidden;
  /* fade the ends so tiles enter and leave rather than being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.camp__track {
  display: flex; gap: 18px; flex: 0 0 auto;
  animation: campScroll 46s linear infinite;
}
.camp__marquee:hover .camp__track,
.camp__marquee:focus-within .camp__track { animation-play-state: paused; }

.camp__item {
  flex: 0 0 auto; width: 208px;
  display: grid; grid-template-rows: 152px auto; gap: 12px; align-content: start;
  padding: 16px 14px; background: #fff; border-radius: 18px;
  box-shadow: 0 10px 28px rgba(20, 24, 28, .09);
  color: inherit; text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.camp__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.camp__cap { font-size: 12.5px; font-weight: 700; line-height: 1.45; text-align: center; color: var(--ink); }
a.camp__item:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 24, 28, .16); }
a.camp__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@keyframes campScroll { to { transform: translateX(calc(-100% - 18px)); } }

@media (max-width: 640px) {
  .camp__item { width: 168px; grid-template-rows: 124px auto; }
}
@media (prefers-reduced-motion: reduce) {
  /* Do not just freeze it — that would strand three campaigns off-screen.
     Hand the row back to the reader as something they can scroll themselves. */
  .camp__track { animation: none; }
  .camp__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .camp__track[aria-hidden="true"] { display: none; }
}


/* ---- Footer location map ----
   OpenStreetMap rather than a Google embed: it needs no API key, sets no
   tracking cookies, and this footer appears on five pages — a third-party
   tracker on every one of them is not a reasonable default for a party site.
   loading="lazy" keeps it off the critical path, since the footer is below the
   fold everywhere it appears. */
.footer__map { margin: 22px 0 0; max-width: 420px; }
.footer__map-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 10; background: #1D2227;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .12);
}
.footer__map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.footer__map-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.footer__map-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #D8DCE0; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04);
  transition: background .2s, color .2s, border-color .2s;
}
.footer__map-links a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.footer__map-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 900px) { .footer__map { max-width: 100%; } }


/* ---- Our Values ----
   Follows inc.in/our-values: name, quotation, attribution, portrait. The quote
   is the hero here, not the face, so the portrait is a narrow column beside it
   rather than a card-topping image — six large faces stacked down the page would
   compete with Our Inspiration directly above. */
.val { padding: 76px 0 84px; background: #fff; }
.val__head { max-width: 760px; margin: 0 0 40px; }
.val__title { margin: 8px 0 0; font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; }
.val__lead { margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 640px; text-wrap: pretty; }

.val__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

.val-card {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 20px;
  padding: 24px; border-radius: 18px; background: var(--bg);
  border: 1px solid rgba(20, 24, 28, .07);
  scroll-margin-top: 120px;
}
.val-card__shot {
  display: block; width: 108px; aspect-ratio: 4 / 5; border-radius: 12px;
  overflow: hidden; background: #ECE5D8;
}
.val-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.val-card__name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--blue); }
.val-card__quote {
  margin: 12px 0 0; padding: 0; border: 0;
  font-size: 15px; line-height: 1.72; color: var(--body); text-wrap: pretty;
}
.val-card__who {
  margin-top: 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
[data-lang="ta"] .val-card__who { text-transform: none; letter-spacing: .01em; font-size: 13.5px; }
[data-lang="ta"] .val-card__quote { line-height: 1.8; }

@media (max-width: 900px) {
  .val__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .val-card { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .val-card__shot { width: 84px; }
}

/* the placeholder shown before the map is requested */
.footer__map-load {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(160deg, #1D2227, #14181C);
  border: 0; cursor: pointer; color: #D8DCE0; font: inherit;
  transition: background .2s;
}
.footer__map-load:hover { background: linear-gradient(160deg, #242A30, #191E23); }
.footer__map-load:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.footer__map-pin { width: 26px; height: 26px; color: var(--gold); }
.footer__map-label { font-size: 14px; font-weight: 800; }
.footer__map-note { font-size: 11.5px; color: #8A9096; }
.footer__map-frame.is-loaded { background: #fff; }


/* ---- Our Inspiration: bigger, with a read panel ----
   Content on the left, portraits on the right, as asked. On a phone the
   portraits come FIRST and the panel follows, because there you tap and then
   read downward; on desktop the reading column leads. */
.insp { padding: 84px 0 92px; }
.insp__head { max-width: 780px; margin: 0 0 44px; }
.insp__title { margin: 8px 0 0; font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; }
.insp__lead { margin: 18px 0 0; font-size: 17px; line-height: 1.72; color: var(--muted); max-width: 660px; text-wrap: pretty; }

.insp__split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }

.insp__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.insp-pick {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  border-radius: 16px; transition: transform .25s;
}
.insp-pick__shot {
  display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  background: #ECE5D8; box-shadow: 0 12px 30px rgba(20, 24, 28, .14);
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .25s, box-shadow .25s;
}
.insp-pick__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  display: block; filter: grayscale(1) contrast(1.03); transition: filter .3s, transform .5s;
}
.insp-pick__name {
  display: block; margin-top: 12px; font-size: 15px; font-weight: 800; line-height: 1.3;
}
.insp-pick:hover .insp-pick__shot img,
.insp-pick.is-on .insp-pick__shot img { filter: grayscale(0) contrast(1.03); }
.insp-pick:hover .insp-pick__shot img { transform: scale(1.04); }
.insp-pick.is-on .insp-pick__shot { outline-color: var(--blue); box-shadow: 0 16px 38px rgba(11, 79, 158, .28); }
.insp-pick:focus-visible .insp-pick__shot { outline-color: var(--gold); }

.insp__read { position: sticky; top: 108px; }
.insp-read[hidden] { display: none; }
.insp-read__name { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.15; color: var(--blue); }
.insp-read__role { margin-top: 6px; font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
[data-lang="ta"] .insp-read__role { text-transform: none; letter-spacing: .01em; font-size: 14.5px; }
.insp-read__quote {
  margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--gold);
  font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--ink); text-wrap: pretty;
}
.insp-read__cite { margin-top: 8px; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.insp-read__cite:empty { display: none; }
.insp-read__bio { margin: 22px 0 0; font-size: 15.5px; line-height: 1.78; color: var(--body); text-wrap: pretty; }
[data-lang="ta"] .insp-read__bio { line-height: 1.85; }

@media (max-width: 980px) {
  .insp__split { grid-template-columns: 1fr; gap: 32px; }
  .insp__picks { order: -1; }          /* tap first, read below */
  .insp__read { position: static; }
}
@media (max-width: 520px) {
  .insp__picks { gap: 14px; }
  .insp-pick__name { font-size: 13.5px; }
}