/* ===========================================================
   TVK COVAI — Design tokens & global styles
   Mobile-first (375px+), scales up to desktop at >=900px.
   =========================================================== */

/* TVK Official Fonts — mirrors tvkvijay.com */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/tvk-instrument-sans-regular-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20CF;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/tvk-instrument-sans-regular-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Teko';
  src: url('/assets/fonts/tvk-teko-light-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-007F, U+00A0-00FF, U+0100-017F;
}
@font-face {
  font-family: 'Teko';
  src: url('/assets/fonts/tvk-teko-light-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Teko';
  src: url('/assets/fonts/tvk-teko-light-devanagari.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+200B-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: 'neythal';
  src: url('/assets/fonts/tvk-neythal-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Restrict to Tamil block only — without this, neythal's built-in Latin
     glyphs (serif-styled) would override Teko when font stacks list it
     before Teko, producing the "English looks bad on Tamil page" bug. */
  unicode-range: U+0964-0965, U+0B80-0BFF, U+200B-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: 'neythal';
  src: url('/assets/fonts/tvk-neythal-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0964-0965, U+0B80-0BFF, U+200B-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: 'tamil010';
  src: url('/assets/fonts/tvk-tamil010-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Tamil-only — see comment on neythal above. */
  unicode-range: U+0964-0965, U+0B80-0BFF, U+200B-200D, U+20B9, U+25CC;
}

:root {
  /* Brand palette */
  --red-900:  #3F0608;
  --red-800:  #5A0C12;
  --red-700:  #7A1018;
  --red-600:  #A8131A;
  --red-500:  #C71820;
  --red-300:  #E04652;
  --gold-600: #C99A0E;
  --gold-500: #F5C518;
  --gold-400: #FFD84A;
  --gold-200: #FFEEA8;
  --cream:    #FBF7F1;
  --cream-2:  #F1E9DA;
  --ink:      #1A0606;
  --ink-2:    #2A1212;
  --line:     rgba(26,6,6,.10);
  --line-on-red: rgba(255,255,255,.16);

  --bg: var(--cream);
  --fg: var(--ink);

  /* Type — TVK official faces (mirrors tvkvijay.com)
     English glyphs render in Teko / Instrument Sans (which have no Tamil
     coverage). When the same element renders Tamil text — either because
     the page lang is Tamil, OR because a class explicitly mixes scripts —
     the browser AUTOMATICALLY falls through to the next stack entry that
     has Tamil glyphs (tamil010 / neythal). So English text always stays
     in Teko regardless of the active language toggle.
     Teko Light (300) is the only weight on disk. Tamil-only classes can
     still opt into pure Tamil display via --font-display-ta. */
  --font-display:    "Teko", "tamil010", "neythal", system-ui, sans-serif;
  --font-display-ta: "tamil010", "neythal", "Teko", system-ui, sans-serif;
  --font-body:       "Instrument Sans", "neythal", system-ui, sans-serif;
  --font-body-ta:    "neythal", "Instrument Sans", system-ui, sans-serif;
  --font-num:        "Instrument Sans", system-ui, monospace;

  --s-0: 4px; --s-1: 8px; --s-2: 12px; --s-3: 16px;
  --s-4: 20px; --s-5: 24px; --s-6: 32px; --s-7: 40px;
  --s-8: 56px; --s-9: 72px; --s-10: 96px;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;

  --shadow-lg: 0 24px 60px -20px rgba(20,2,2,.45), 0 4px 12px rgba(20,2,2,.18);
  --shadow-md: 0 8px 24px -8px rgba(20,2,2,.25);
  --shadow-sm: 0 2px 8px rgba(20,2,2,.10);

  --shell-max: 480px;
  --section-px: 16px;
}

/* Tamil-page font handling is now done per-glyph via fallback stacks above
   (Teko has no Tamil glyphs, so Tamil chars auto-fall through to tamil010 /
   neythal). This preserves the proper Teko look for English text — TVK
   COVAI, MEET OUR MINISTERS, etc. — on BOTH language toggles.
   Tamil-only classes (.hero-display-ta, .minister-portfolio-ta, etc.) still
   set font-family: var(--font-display-ta) explicitly. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: 0.005em;
}
img { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ============= Container — mobile shell ============= */
.tvk-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 80px -20px rgba(20,2,2,.25);
  min-height: 100vh;
  overflow: hidden;
}

/* ============= Display type =============
   Teko is a narrow condensed face; Light (300) is the only weight on disk.
   Use 300 + a touch of letter-spacing + roomy line-height so display text
   breathes on a wide canvas. */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
:root[lang="ta"] .display {
  font-weight: 400;
  text-transform: none;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.num { font-family: var(--font-num); font-feature-settings: "tnum" 1; font-weight: 600; letter-spacing: 0; }

/* ============= TOPBAR ============= */
.tvk-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(180deg, #2A0608 0%, #520A10 100%);
  color: #fff;
  border-bottom: 1px solid var(--line-on-red);
  backdrop-filter: saturate(120%) blur(6px);
  gap: 12px;
}
.tvk-mark { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tvk-mark .vagai {
  width: 32px; height: 32px;
  background: radial-gradient(circle at 50% 60%, #F5C518 0%, #C71820 38%, #5A0C12 70%, #3F0608 100%);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 1.5px #F5C518, 0 1px 4px rgba(0,0,0,.4);
}
.tvk-mark .vagai::before {
  content: ""; position: absolute; inset: 4px;
  background-image: url("assets/bg/deco1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.15) saturate(1.2);
  border-radius: 50%;
}
.tvk-mark .word { display: flex; flex-direction: column; line-height: 1; }
.tvk-mark .word .en {
  font-family: var(--font-display); font-weight: 300;
  font-size: 18px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.tvk-mark .word .ta {
  font-family: var(--font-display-ta); font-weight: 400;
  font-size: 13px; color: var(--gold-400); margin-top: 4px;
  line-height: 1.1;
}

.tvk-nav-desktop {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  gap: 22px;
}
.tvk-nav-desktop a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: .85;
  padding: 10px 0;
  position: relative;
  line-height: 1.2;
}
:root[lang="ta"] .tvk-nav-desktop a {
  font-weight: 400;
  text-transform: none; letter-spacing: 0.02em; font-size: 15px;
}
.tvk-nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold-400); transform: scaleX(0);
  transform-origin: left; transition: transform .25s ease;
}
.tvk-nav-desktop a:hover { opacity: 1; }
.tvk-nav-desktop a:hover::after { transform: scaleX(1); }

/* Lang switch */
.lang-switch {
  position: relative; display: inline-flex;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line-on-red);
  border-radius: var(--r-pill);
  padding: 3px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
}
.lang-switch button {
  position: relative; z-index: 2;
  border: 0; background: transparent;
  color: #fff; padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color .25s ease;
  min-width: 44px;
  letter-spacing: 0.04em;
}
.lang-switch button.active { color: var(--ink); }
.lang-switch .thumb {
  position: absolute; z-index: 1; top: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: linear-gradient(180deg, #FFE166 0%, #F5C518 100%);
  border-radius: var(--r-pill);
  transition: transform .3s cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.lang-switch[data-lang="ta"] .thumb { transform: translateX(100%); }

.menu-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff;
  border: 1px solid var(--line-on-red);
  border-radius: var(--r-2);
  cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ============= DRAWER ============= */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86%, 360px);
  background: linear-gradient(180deg, #3F0608, #5A0C12 50%, #3F0608);
  color: #fff;
  z-index: 61;
  transform: translateX(110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding: 20px 22px 28px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer h4 { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em;
  color: var(--gold-400); text-transform: uppercase; margin: 22px 0 10px; font-weight: 600; }
.drawer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drawer ul li a {
  display: block; padding: 14px 4px; font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--line-on-red);
  min-height: 44px; line-height: 1.4;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-close { background: none; border: 1px solid var(--line-on-red); color: #fff; border-radius: var(--r-pill); padding: 8px 14px; font-size: 12px; cursor: pointer; }

/* ============= HERO ============= */
.hero {
  position: relative;
  background: radial-gradient(120% 80% at 50% 0%, #7A1018 0%, #5A0C12 45%, #3F0608 100%);
  color: #fff;
  overflow: hidden;
  padding: 20px 0 0;
  isolation: isolate;
}
.hero .crowd-bg {
  /* Removed — was a near-white crowd photo rendered with mix-blend-mode: screen
     over the deep-red hero, which produced a whitish horizontal overlay band. */
  display: none;
}
.hero .elephants {
  /* Removed — elephants-bg.png is a near-white twin-elephants image. Even at
     opacity .12 with no blend mode, painting it over the deep-red base across
     the bottom 55% of the hero produced a visible cream/lighter band exactly
     where the description text and CTA buttons sit. Killing this layer
     eliminates the horizontal seam. */
  display: none;
}
.hero .stars-halo {
  position: absolute; right: -25%; top: -5%; width: 80%; aspect-ratio: 1;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: contain; background-repeat: no-repeat;
  opacity: .2; z-index: 0;
  animation: spin 180s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner {
  position: relative; z-index: 2;
  padding: 0 var(--section-px);
  display: flex; flex-direction: column;
  gap: 28px;
}

/* PART A — Party intro block */
.hero-party-block {
  position: relative;
  padding: 8px 0 8px;
}
.hero-flag-strip {
  position: absolute; left: -16px; top: 0; width: 8px; height: 100%;
  background: linear-gradient(180deg, var(--red-500) 0%, var(--red-500) 50%, var(--gold-500) 50%, var(--gold-500) 100%);
  border-radius: 0 4px 4px 0;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #F5C518, #FFD84A);
  color: var(--red-900);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  width: max-content;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
:root[lang="ta"] .hero-tag { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.hero-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 13vw, 96px);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 14px 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.hero-display-ta {
  font-family: var(--font-display-ta);
  font-weight: 400;
  font-size: clamp(30px, 9vw, 56px);
  color: var(--gold-400);
  margin-top: 10px;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.hero-lede {
  margin: 18px 0 0;
  font-size: 16px;
  color: rgba(255,255,255,.88);
  max-width: 42ch;
  line-height: 1.65;
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
.hero-party-row {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hero-party-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-400);
  font-weight: 600;
}
:root[lang="ta"] .hero-party-name { text-transform: none; letter-spacing: .03em; font-size: 14px; }

.flag-mini {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line-on-red);
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  font-family: var(--font-display); font-weight: 400;
  line-height: 1;
}
:root[lang="ta"] .flag-mini { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.flag-mini::before {
  content: "";
  width: 26px; height: 16px;
  background-image: url("assets/branding/flag.png");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.4);
  flex: none;
}

/* PART B — Leadership intro */
.hero-lead-block { padding: 0; }
.eyebrow-on-red {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-400);
  display: inline-flex; align-items: center; gap: 8px;
}
:root[lang="ta"] .eyebrow-on-red { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.eyebrow-on-red::before {
  content: ""; width: 26px; height: 2px; background: var(--gold-400);
}
.hero-lead-sub {
  margin: 8px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  max-width: 38ch;
  line-height: 1.5;
}

/* PART C — Sampath poster card (proper layout) */
.hero-poster-card {
  position: relative;
  border-radius: var(--r-4);
  overflow: hidden;
  background: linear-gradient(160deg, #6F1118 0%, #3F0608 100%);
  border: 1px solid var(--line-on-red);
  box-shadow: var(--shadow-lg);
}
.flag-cloth {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 25% 30%, rgba(255, 216, 74, .35) 0%, transparent 60%),
    radial-gradient(70% 60% at 80% 70%, rgba(199,24,32,.5) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.flag-cloth::before, .flag-cloth::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(40px);
}
.flag-cloth::before {
  width: 70%; height: 60%; left: -10%; top: 0;
  background: linear-gradient(135deg, var(--red-500), var(--gold-500));
  opacity: .45;
}
.flag-cloth::after {
  width: 50%; height: 50%; right: -8%; bottom: 0;
  background: linear-gradient(135deg, var(--gold-500), var(--red-500));
  opacity: .40;
}
.hero-poster-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
}
.hero-poster-text {
  padding: 20px 18px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-posting-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-500);
  color: var(--red-900);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  width: max-content;
}
:root[lang="ta"] .hero-posting-tag { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.hero-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 13vw, 72px);
  line-height: 0.98;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.hero-name .break { display: block; }
.hero-name-ta {
  font-family: var(--font-display-ta);
  font-weight: 900;
  font-size: clamp(22px, 7vw, 28px);
  color: var(--gold-200);
  line-height: 1;
  margin-top: 2px;
}
.hero-roles {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 6px;
}
.hero-roles li {
  border-left: 3px solid var(--gold-400);
  padding-left: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.4;
}
.hero-roles li b { color: var(--gold-200); font-weight: 700; font-size: 14px; }
.hero-roles li span { color: rgba(255,255,255,.65); font-size: 11px; }

.hero-poster-portrait {
  position: relative;
  height: 460px;
  margin-top: 8px;
}
.vagai-emblem-lg {
  position: absolute; right: 14px; top: 14px;
  width: 72px; height: 72px;
  z-index: 3;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 55%, #3F0608 100%);
  border: 2.5px solid var(--gold-400);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.vagai-emblem-lg::after {
  content: ""; position: absolute; inset: 14px;
  background-image: url("assets/branding/whistle.svg");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.2) saturate(1.3);
  border-radius: 50%;
}
.hero-poster-portrait img {
  position: absolute;
  /* Flush to the right edge of the card — NO gap between Sampath portrait
     and card border. Was previously centered (left:50% + translateX(-50%)),
     which left visible empty strips on either side of the cutout. */
  right: 0; left: auto; bottom: 0;
  transform: none;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover; object-position: right bottom;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
  z-index: 2;
}
.video-placeholder-tag {
  position: absolute; left: 14px; bottom: 14px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px dashed var(--gold-400);
  padding: 5px 10px;
  font-family: var(--font-num);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-1);
  max-width: 60%;
  line-height: 1.2;
}
.video-placeholder-tag .dot { width: 6px; height: 6px; background: var(--gold-400); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .35; transform: scale(.7);} }

/* HERO ticker */
.hero-victory {
  position: relative; z-index: 2;
  margin-top: 28px;
  background: linear-gradient(90deg, #F5C518 0%, #FFD84A 50%, #F5C518 100%);
  color: var(--red-900);
  border-top: 3px solid var(--red-900);
  border-bottom: 3px solid var(--red-900);
  padding: 10px 0;
  overflow: hidden;
}
.hero-victory .marquee {
  display: flex; gap: 26px;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.hero-victory .marquee .sep {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--red-700);
}
.hero-victory .marquee .sep::before { content: "★"; color: var(--red-700); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============= Section frame ============= */
section { position: relative; padding: 52px var(--section-px); }
.section-head {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px;
  max-width: 760px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-600);
  line-height: 1.3;
}
:root[lang="ta"] .eyebrow {
  text-transform: none; letter-spacing: .04em; font-size: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red-600); }
.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 9.5vw, 56px);
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
:root[lang="ta"] .section-title {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.section-sub { color: rgba(26,6,6,.65); font-size: 15px; max-width: 52ch; line-height: 1.6; letter-spacing: 0.005em; }

.section-dark {
  background: linear-gradient(180deg, #3F0608 0%, #5A0C12 100%);
  color: #fff;
}
.section-dark .section-title { color: #fff; }
.section-dark .eyebrow { color: var(--gold-400); }
.section-dark .eyebrow::before { background: var(--gold-400); }
.section-dark .section-sub { color: rgba(255,255,255,.75); }

/* ============= Stats grid ============= */
.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-on-red);
  border: 1px solid var(--line-on-red);
  border-radius: var(--r-3);
  overflow: hidden;
}
.stat-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat .v { font-family: var(--font-num); font-size: 30px; font-weight: 700; color: var(--gold-400); letter-spacing: -.01em; }
.stat .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); font-family: var(--font-display); font-weight: 500; }
:root[lang="ta"] .stat .l { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.stat .delta { font-family: var(--font-num); font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; }

/* ============= MLA Grid ============= */
.mla-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mla-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.mla-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Gold ring for winning MLAs */
.mla-card.won {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1.5px var(--gold-500), var(--shadow-sm);
}
.mla-card.won:hover {
  box-shadow: 0 0 0 1.5px var(--gold-500), var(--shadow-md);
}
.mla-face {
  /* On mobile + tablet, the card is horizontal: photo column + text column.
     Stretch the face to fill the row height (no fixed aspect-ratio) so the
     photo column never has empty space when the text column is taller.
     Desktop (>=1280px) overrides this with a 1:1.05 aspect — see media query. */
  position: relative;
  align-self: stretch;
  min-height: 130px;
  background: linear-gradient(180deg, var(--red-600), var(--red-800));
  overflow: hidden;
}
.mla-face img {
  /* Safari-safe positioning. `height: 100%` on a flex/grid child can collapse
     in Safari when the parent uses aspect-ratio or auto-rows; absolute inset
     forces the image to cover the face element on every engine. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.mla-num {
  position: absolute; left: 0; top: 0;
  background: var(--gold-500); color: var(--red-900);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  padding: 3px 8px; border-bottom-right-radius: var(--r-2);
}
.mla-badge {
  position: absolute; right: 6px; top: 6px;
  background: var(--ink);
  color: var(--gold-400);
  font-family: var(--font-display); font-weight: 600; font-size: 9px; letter-spacing: .12em;
  padding: 3px 6px; border-radius: var(--r-1);
  text-transform: uppercase;
}
:root[lang="ta"] .mla-badge { text-transform: none; letter-spacing: .03em; }

.mla-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.mla-ac {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-600);
}
:root[lang="ta"] .mla-ac { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.mla-nm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}
:root[lang="ta"] .mla-nm {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 19px;
  line-height: 1.2;
}
.mla-role { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: 4px; letter-spacing: 0.005em; }
.mla-stats {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: rgba(26,6,6,.65);
}
.mla-stats b { color: var(--ink); font-weight: 700; }
.mla-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-600);
  font-weight: 600;
}
:root[lang="ta"] .mla-cta { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.mla-cta svg { width: 12px; height: 12px; }

/* ============= Leadership pair ============= */
.leadership-grid { display: grid; gap: 14px; }
.leader-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.leader-card .photo-wrap {
  position: relative; aspect-ratio: 4/3.4; overflow: hidden;
  background: linear-gradient(135deg, var(--red-600), var(--red-800));
}
.leader-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.leader-card .photo-wrap .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(63,6,8,.85) 100%);
}
.leader-card .photo-wrap .badge {
  position: absolute; left: 12px; top: 12px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  color: var(--red-900);
  padding: 4px 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .14em;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
:root[lang="ta"] .leader-card .photo-wrap .badge { text-transform: none; letter-spacing: .03em; }
.leader-card .photo-wrap .vagai-emblem {
  position: absolute; right: 12px; top: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 55%, #3F0608 100%);
  border: 2px solid var(--gold-400);
  display: grid; place-items: center;
}
.leader-card .photo-wrap .vagai-emblem::after {
  content: ""; width: 65%; height: 65%;
  background-image: url("assets/bg/deco1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.2) saturate(1.3);
}
.leader-card .info { padding: 14px 16px 18px; }
.leader-card .info .role-en {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .14em;
  color: var(--red-600); text-transform: uppercase;
}
:root[lang="ta"] .leader-card .info .role-en { text-transform: none; letter-spacing: .03em; font-size: 12px; }
.leader-card .info .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1; margin: 4px 0 0;
}
.leader-card .info .sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }

/* ============= Ideological leaders ============= */
.ideo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ideo-card { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.ideo-card .ring {
  width: 100%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--cream-2) 0%, var(--cream) 100%);
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.section-dark .ideo-card .ring { background: rgba(0,0,0,.35); border-color: var(--gold-400); }
.ideo-card .placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px);
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 8px;
  color: rgba(26,6,6,.5);
  letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 4px;
}
.section-dark .ideo-card .placeholder {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px);
  color: rgba(255,255,255,.7);
}
.ideo-card .ring img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.ideo-card .nm {
  font-family: var(--font-display); font-weight: 300;
  font-size: 11px; letter-spacing: 0.08em; line-height: 1.2;
  text-transform: uppercase; text-wrap: balance;
  margin-top: 2px;
}
.section-dark .ideo-card .nm { color: var(--gold-400); }
:root[lang="ta"] .ideo-card .nm {
  font-weight: 400;
  text-transform: none; letter-spacing: 0.005em; font-size: 13px; line-height: 1.3;
}
.ideo-card .pillar {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  line-height: 1.3;
  margin-top: 2px;
}
:root[lang="ta"] .ideo-card .pillar {
  text-transform: none; letter-spacing: 0.005em; font-size: 11px;
}
@media (min-width: 768px) {
  .ideo-card .nm { font-size: 13px; }
  .ideo-card .pillar { font-size: 10px; }
  :root[lang="ta"] .ideo-card .nm { font-size: 15px; }
}
@media (min-width: 1280px) {
  .ideo-card .nm { font-size: 14px; }
  .ideo-card .pillar { font-size: 11px; }
}

.design-note {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--r-3);
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line-on-red);
  font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.55;
}
.design-note b {
  font-family: var(--font-display); font-weight: 600;
  color: var(--gold-400); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
:root[lang="ta"] .design-note b { text-transform: none; letter-spacing: .04em; }

/* ============= Biography =============
   DOM order is: hero card, body paragraphs, timeline, photo grid.
   On MOBILE we re-order with flex `order` so the timeline comes BEFORE the
   long body text (right after the hero card). Desktop re-uses the same
   DOM but the grid override below restores the editorial column layout. */
.bio-layout { display: flex; flex-direction: column; gap: 22px; }
.bio-layout > .bio-hero      { order: 1; }
.bio-layout > .bio-timeline  { order: 2; }
.bio-layout > .bio-body      { order: 3; }
.bio-layout > .bio-photogrid { order: 4; }
.bio-hero {
  position: relative;
  border-radius: var(--r-4);
  background: linear-gradient(160deg, var(--red-700) 0%, var(--red-900) 100%);
  overflow: hidden;
  color: #fff;
}
.bio-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 80% auto; background-position: 110% center;
  background-repeat: no-repeat;
  opacity: .15;
}
/* ===========================================================
   BIO HERO CARD — Editorial layout
   Mobile (<768px):  portrait on top (full-width, 320px tall),
                     content panel below (meta + 2-col data grid)
   Desktop (>=768px): portrait LEFT 42%, content panel RIGHT 58%,
                      both stretching to equal height; portrait
                      full-bleed, content padded
   =========================================================== */
.bio-hero-portrait {
  position: relative;
  background: var(--red-900);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.bio-hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.bio-hero-content {
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  gap: 18px;
}
.bio-hero-meta { display: flex; flex-direction: column; gap: 6px; }
.bio-hero-meta .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold-400);
  text-transform: uppercase;
  align-self: flex-start;
  padding: 5px 11px;
  background: rgba(255,216,74,.10);
  border: 1px solid rgba(255,216,74,.42);
  border-radius: var(--r-pill);
  margin-bottom: 4px;
}
:root[lang="ta"] .bio-hero-meta .label { text-transform: none; letter-spacing: .03em; }
.bio-hero-meta .nm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: .015em;
  line-height: 1.0;
  margin: 0;
  color: #fff;
}
.bio-hero-meta .nm-ta {
  font-family: var(--font-display-ta);
  font-weight: 400;
  font-size: 22px;
  color: var(--gold-200);
  line-height: 1.1;
}
.bio-hero-meta .roles {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,216,74,.20);
}
.bio-hero-meta .role {
  font-size: 13px;
  color: rgba(255,255,255,.86);
  line-height: 1.4;
}

/* bio-data is now nested inside .bio-hero-content on both mobile + desktop.
   Style for the maroon backdrop: transparent cells, gold-tinted dividers. */
.bio-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,216,74,.18);
  border-radius: var(--r-3);
  overflow: hidden;
  margin: 0;
}
.bio-data .cell {
  background: transparent;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,216,74,.10);
  border-right: 1px solid rgba(255,216,74,.10);
}
.bio-data .cell:nth-child(2n) { border-right: 0; }
.bio-data .cell:nth-last-child(-n+2) { border-bottom: 0; }
.bio-data .cell .k {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-weight: 500;
}
:root[lang="ta"] .bio-data .cell .k { text-transform: none; letter-spacing: .03em; font-size: 10px; }
.bio-data .cell .v {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.bio-body p {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.bio-body p:first-of-type:first-letter {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.4em;
  float: left;
  line-height: .85;
  padding: 6px 8px 0 0;
  color: var(--red-600);
}
.bio-body p.no-drop:first-letter { font-size: 1em; float: none; padding: 0; color: inherit; font-family: inherit; }

.bio-timeline {
  position: relative;
  padding-left: 22px;
}
.bio-timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold-500), var(--red-600));
}
.bio-timeline .ev { position: relative; padding: 6px 0 12px; }
.bio-timeline .ev::before {
  content: ""; position: absolute; left: -22px; top: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-500);
  border: 3px solid var(--red-600);
}
.bio-timeline .ev .when { font-family: var(--font-num); font-size: 11px; color: var(--red-600); font-weight: 700; letter-spacing: .04em; }
.bio-timeline .ev .what { font-size: 13px; color: var(--ink); margin-top: 2px; line-height: 1.4; }

.bio-photogrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
/* Each photo cell is a <button> so the whole tile is keyboard-tabbable and
   has a hover/focus state for the lightbox trigger. */
.bio-photogrid .ph {
  aspect-ratio: 4 / 3;
  background: var(--red-800);
  border-radius: var(--r-2);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bio-photogrid .ph:hover,
.bio-photogrid .ph:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.55);
  outline: none;
}
.bio-photogrid .ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.bio-photogrid .ph:hover img { transform: scale(1.05); }
.bio-photogrid .ph .tag {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,.66); color: #fff;
  font-family: var(--font-num); font-size: 10px;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: .04em;
}
.bio-photogrid .ph .ph-zoom {
  position: absolute; right: 6px; top: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: var(--gold-400);
  font-size: 12px;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s ease;
}
.bio-photogrid .ph:hover .ph-zoom,
.bio-photogrid .ph:focus-visible .ph-zoom { opacity: 1; }
@media (min-width: 768px) {
  .bio-photogrid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ---------------- LIGHTBOX MODAL ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 2, 4, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: lightbox-fade-in .2s ease-out;
  backdrop-filter: blur(8px);
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-inner {
  position: relative; max-width: 1200px; width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  animation: lightbox-pop .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes lightbox-pop {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lightbox-inner img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  border: 2px solid var(--gold-500);
}
.lightbox-caption {
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 12px;
}
:root[lang="ta"] .lightbox-caption {
  text-transform: none; letter-spacing: .02em; font-size: 15px;
}
.lightbox-close {
  position: fixed; top: 14px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1.5px solid var(--gold-400);
  color: var(--gold-400);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 1;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover {
  background: var(--gold-500); color: var(--red-900);
  transform: rotate(90deg);
}

/* ===========================================================
   PARTY LEADERSHIP — Vijay × Sampath composite artwork
   Full-bleed 16:9 image with name captions overlaid at the bottom.
   Falls back to a 2-card grid if the artwork file isn't there.
   =========================================================== */
.lead-artwork {
  position: relative;
  border-radius: var(--r-4);
  overflow: hidden;
  background: linear-gradient(180deg, var(--red-800), var(--red-900));
  border: 2px solid var(--gold-500);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55);
  /* Mobile-first: use the image's NATURAL aspect (let the height grow with
     the image) so neither Vijay nor Sampath gets cropped on narrow screens.
     Desktop tightens this back to 16:9 below. */
  aspect-ratio: auto;
  min-height: 200px;
}
.lead-artwork > img {
  width: 100%; height: auto;
  display: block;
}
.lead-artwork-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: end;
  padding: 18px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,2,4,.78) 65%, rgba(20,2,4,.92) 100%);
  pointer-events: none;
  color: #fff;
}
.lead-cap { display: flex; flex-direction: column; gap: 2px; max-width: 42%; }
.lead-cap-right { text-align: right; align-items: end; }
.lead-cap-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-400);
  line-height: 1.2;
}
:root[lang="ta"] .lead-cap-tag { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.lead-cap-nm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.0;
  color: #fff;
}
.lead-cap-sub {
  font-size: 11px;
  color: rgba(255,255,255,.8);
  line-height: 1.3;
}
@media (min-width: 768px) {
  /* Tablet+: lock to 16:9 with cover so the composite has a magazine feel. */
  .lead-artwork { aspect-ratio: 16 / 9; min-height: 380px; }
  .lead-artwork > img { height: 100%; object-fit: cover; object-position: center; }
  .lead-artwork-caption { padding: 24px 36px; }
  .lead-cap-nm { font-size: 30px; }
  .lead-cap-tag { font-size: 10px; }
  .lead-cap-sub { font-size: 13px; }
}
@media (min-width: 1280px) {
  .lead-artwork { min-height: 480px; }
  .lead-artwork-caption { padding: 32px 48px; }
  .lead-cap-nm { font-size: 40px; }
}

/* Fallback layout — only rendered when the artwork image fails to load */
.lead-artwork-fallback {
  position: absolute; inset: 0;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold-500);
}
.lead-artwork-fallback .fb-figure {
  position: relative;
  background: var(--red-800);
  overflow: hidden;
}
.lead-artwork-fallback .fb-figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
}
.lead-artwork-fallback .fb-figure span {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px;
  color: var(--gold-400);
  background: rgba(0,0,0,.62);
  padding: 6px 12px;
  border-radius: 4px;
}

/* Compact image-prominent featured card — square image on top, clean text box below */
.feat-card.feat-card-compact {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feat-card.feat-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feat-card-compact .feat-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex: 0 0 auto;
}
.feat-card-compact .feat-img-wrap .ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .4s ease;
}
.feat-card-compact:hover .feat-img-wrap .ph { transform: scale(1.04); }
.feat-card-compact .feat-img-wrap .ribbon {
  position: absolute; left: 10px; top: 10px;
  background: var(--gold-500); color: var(--red-900);
  font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .14em;
  padding: 4px 8px; border-radius: var(--r-1); text-transform: uppercase;
}
:root[lang="ta"] .feat-card-compact .feat-img-wrap .ribbon { text-transform: none; letter-spacing: .03em; }
.feat-card-compact .feat-body {
  padding: 14px 14px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
.feat-card-compact .feat-body .kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .14em;
  color: var(--red-600); text-transform: uppercase;
  margin: 0;
}
:root[lang="ta"] .feat-card-compact .feat-body .kicker { letter-spacing: .04em; text-transform: none; font-size: 11px; }
.feat-card-compact .feat-body h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 3);
}
.feat-card-compact .feat-body .meta {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--font-num); font-size: 10px;
  color: rgba(26,6,6,.55);
  margin-top: auto;
  padding-top: 6px;
}

/* Hero — single column with right-side visual */
.hero-inner-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.hero-tagline {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  max-width: 44ch;
  line-height: 1.65;
  letter-spacing: 0.005em;
}
.hero-visual {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  border: 1px solid var(--line-on-red);
  min-height: 240px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
}
.hero-visual-vagai {
  display: grid; place-items: center;
  background: rgba(0,0,0,.32);
  border-radius: var(--r-2);
  padding: 14px;
  border: 1px solid var(--line-on-red);
}
.vagai-emblem-xl {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 45%, #5A0C12 75%, #3F0608 100%);
  border: 3px solid var(--gold-400);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  position: relative;
}
.vagai-emblem-xl::after {
  content: ""; position: absolute; inset: 14%;
  background-image: url("assets/bg/deco1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.25) saturate(1.3);
}
.hero-visual-stack { display: flex; flex-direction: column; gap: 10px; }
.hero-visual-tile {
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background-size: cover; background-position: center;
  flex: 1; min-height: 110px;
  border: 1px solid var(--line-on-red);
}
.hero-visual-tile.small { min-height: 72px; }
.hero-visual-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.placeholder-tile {
  background:
    repeating-linear-gradient(45deg, rgba(245,197,24,.10) 0 10px, transparent 10px 20px),
    rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 10px;
  font-family: var(--font-num);
  font-size: 10px; color: var(--gold-200); line-height: 1.3;
}
.placeholder-tile .ptag {
  display: inline-block;
  background: var(--gold-500); color: var(--red-900);
  font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .12em;
  padding: 3px 7px; border-radius: 3px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* District Secretary section */
/* FIX 1 — District Secretary: pure deep-red, no light/white tints anywhere.
   Section is its own seam-free deep-red block; poster card is flat deep-red
   too. Previously the .flag-cloth pseudo + radial yellows produced a
   visible white-ish band between Hero and Ministers. */
.district-sec {
  padding-top: 32px;
  padding-bottom: 80px;
  background: linear-gradient(180deg, #3F0608 0%, #5A0C12 100%);
  color: #fff;
}
@media (min-width: 768px) {
  .district-sec { padding-bottom: 96px; }
}
@media (min-width: 1280px) {
  .district-sec { padding-bottom: 120px; }
}
.district-sec .section-title { color: #fff; }
.district-sec .section-sub { color: rgba(255,255,255,.78); }
.district-sec .eyebrow { color: var(--gold-400); }
.district-sec .eyebrow::before { background: var(--gold-400); }
.district-sec .hero-poster-card {
  background: linear-gradient(160deg, #4A0810 0%, #2A0406 100%);
  border-color: rgba(255,216,74,.28);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.7);
}
.district-sec .flag-cloth { display: none; }

/* Standalone ideology ticker */
.ideology-ticker {
  position: relative;
  background: linear-gradient(90deg, #F5C518 0%, #FFD84A 50%, #F5C518 100%);
  color: var(--red-900);
  border-top: 3px solid var(--red-900);
  border-bottom: 3px solid var(--red-900);
  padding: 11px 0;
  overflow: hidden;
}
.ideology-ticker .marquee {
  display: flex; gap: 28px;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
:root[lang="ta"] .ideology-ticker .marquee { text-transform: none; letter-spacing: .04em; font-size: 15px; }
.ideology-ticker .marquee .sep {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--red-700);
}
.ideology-ticker .marquee .sep::before { content: "✦"; color: var(--red-700); }

/* Integrated Vijay × Sampath leadership composite */
.section-head-center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head-center .eyebrow { justify-content: center; }
.integrated-lead { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.lead-composite {
  position: relative;
  border-radius: var(--r-4);
  overflow: hidden;
  background: linear-gradient(180deg, #5A0C12 0%, #3F0608 60%, #2A0405 100%);
  min-height: 480px;
  padding: 28px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  isolation: isolate;
}
.lead-bg-crowd {
  position: absolute; inset: 0; z-index: -3;
  background-image: url("assets/bg/bg.png");
  background-size: cover; background-position: center;
  opacity: .18; mix-blend-mode: screen;
}
.lead-bg-flagcloth {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(50% 60% at 25% 35%, rgba(255,216,74,.35) 0%, transparent 65%),
    radial-gradient(60% 60% at 75% 65%, rgba(199,24,32,.55) 0%, transparent 70%);
  filter: blur(10px);
}
.lead-bg-stars {
  position: absolute; right: -25%; top: -10%; width: 80%; aspect-ratio: 1; z-index: -1;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: contain; background-repeat: no-repeat;
  opacity: .15;
  animation: spin 200s linear infinite;
}
.lead-artwork-tag {
  position: absolute; left: 16px; top: 16px;
  z-index: 5;
  background: rgba(0,0,0,.55);
  border: 1px dashed var(--gold-400);
  padding: 6px 10px;
  font-family: var(--font-num); font-size: 9px;
  color: var(--gold-200); letter-spacing: .04em;
  border-radius: var(--r-1);
  max-width: 240px;
  line-height: 1.3;
}
.lead-artwork-tag .ptag {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  background: var(--gold-500); color: var(--red-900);
  padding: 2px 6px; border-radius: 3px;
  font-size: 9px; letter-spacing: .14em;
  margin-bottom: 4px;
  width: max-content;
  text-transform: uppercase;
}
.lead-figure {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  color: #fff;
}
.lead-figure-img {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold-400);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  background: var(--red-800);
}
.lead-figure-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lead-figure-emblem {
  position: absolute; right: -8px; bottom: -8px;
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 55%, #3F0608 100%);
  border: 2px solid var(--gold-400);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.lead-figure-emblem::after {
  content: ""; position: absolute; inset: 6px;
  background-image: url("assets/bg/deco1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.25) saturate(1.3);
}
.lead-figure-meta { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.lead-figure-tag {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .14em;
  color: var(--gold-400); text-transform: uppercase;
}
:root[lang="ta"] .lead-figure-tag { letter-spacing: .04em; text-transform: none; font-size: 12px; }
.lead-figure-nm {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1;
  color: #fff;
}
.lead-figure-nm-ta {
  font-family: var(--font-display-ta); font-weight: 900;
  font-size: 22px; line-height: 1; color: var(--gold-200);
}
.lead-figure-sub {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  max-width: 28ch;
  margin-top: 2px;
  line-height: 1.35;
}
.lead-connector {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0;
}
.lead-connector-emblem {
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 55%, #3F0608 100%);
  border: 2.5px solid var(--gold-400);
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  position: relative; z-index: 2;
}
.lead-connector-emblem::after {
  content: ""; position: absolute; inset: 8px;
  background-image: url("assets/bg/deco1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(1.25) saturate(1.3);
}
.lead-connector-line {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 80%;
  background: linear-gradient(180deg, transparent, var(--gold-400) 30%, var(--gold-400) 70%, transparent);
  transform: translateX(-50%);
  z-index: 1;
}

/* ============= Articles ============= */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.featured > * { height: 100%; }
.featured .reveal { display: flex; }
.featured .reveal > * { width: 100%; }
.feat-card {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-md);
}
.feat-card .ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.9);
}
.feat-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.05) 40%, rgba(63,6,8,.92) 100%);
}
.feat-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px; }
.feat-card .kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .14em;
  color: var(--gold-400); text-transform: uppercase;
}
:root[lang="ta"] .feat-card .kicker { letter-spacing: .04em; text-transform: none; font-size: 11px; }
.feat-card h3 {
  margin: 6px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.1; text-wrap: balance;
}
.feat-card .meta {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-num); font-size: 11px;
  color: rgba(255,255,255,.7);
}
.feat-card .ribbon {
  position: absolute; left: 12px; top: 12px;
  background: var(--gold-500); color: var(--red-900);
  font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .14em;
  padding: 4px 8px; border-radius: var(--r-1); text-transform: uppercase;
}
:root[lang="ta"] .feat-card .ribbon { text-transform: none; letter-spacing: .03em; }

.article-list { display: grid; gap: 10px; margin-top: 18px; }
.art-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  align-items: stretch;
  transition: transform .15s ease;
}
.art-row:hover { transform: translateX(2px); }
.art-row .pic { background-size: cover; background-position: center; }
.art-row .body { padding: 10px 12px 12px; }
.art-row .kicker { font-family: var(--font-display); font-weight: 600; font-size: 9px; letter-spacing: .14em; color: var(--red-600); text-transform: uppercase; }
:root[lang="ta"] .art-row .kicker { letter-spacing: .04em; text-transform: none; font-size: 10px; }
.art-row h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; margin: 4px 0 6px; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.art-row .meta { font-family: var(--font-num); font-size: 10px; color: rgba(26,6,6,.55); display: flex; gap: 8px; align-items: center; }

/* ============= Events ============= */
.events-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 60px;
  gap: 6px;
}
.events-grid .e {
  background: var(--ink) center/cover no-repeat;
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  border: 0;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.events-grid .e:hover,
.events-grid .e:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 32px -14px rgba(0,0,0,.6);
  outline: none;
}
.events-grid .e img { transition: transform .35s ease; }
.events-grid .e:hover img { transform: scale(1.04); }
.events-grid .e .ph-zoom {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: var(--gold-400);
  font-size: 14px;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s ease;
}
.events-grid .e:hover .ph-zoom { opacity: 1; }
.events-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.events-cta-row .btn-gold { display: inline-flex; align-items: center; gap: 10px; }

.events-grid .e img { width: 100%; height: 100%; object-fit: cover; }
.events-grid .e .cap {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  font-family: var(--font-num); font-size: 9px; color: #fff;
  background: rgba(0,0,0,.55); padding: 3px 6px; border-radius: 4px;
  letter-spacing: .04em;
}

/* ============= About TVK ============= */
.about-tvk {
  background-image:
    radial-gradient(50% 60% at 50% 100%, rgba(245,197,24,.18) 0%, transparent 60%),
    linear-gradient(180deg, #3F0608, #5A0C12),
    url("assets/bg/pledge-bg.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal;
}
.about-pledge {
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line-on-red);
  border-radius: var(--r-3);
  padding: 18px;
}
.about-pledge .quote-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 60px; line-height: .6;
  color: var(--gold-400);
}
.about-pledge .body { font-size: 14px; line-height: 1.55; margin: 8px 0 4px; }
.about-pledge .by { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--gold-400); text-transform: uppercase; }
:root[lang="ta"] .about-pledge .by { text-transform: none; letter-spacing: .03em; }

.about-meta-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.about-cell {
  padding: 14px 12px;
  background: rgba(0,0,0,.32);
  border-radius: var(--r-2);
  border: 1px solid var(--line-on-red);
}
.about-cell .k {
  color: var(--gold-400); font-family: var(--font-display);
  letter-spacing: .12em; font-size: 9px; font-weight: 600;
  text-transform: uppercase;
}
:root[lang="ta"] .about-cell .k { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.about-cell .v { margin-top: 4px; font-weight: 700; font-size: 14px; }

/* ============= CTA Join ============= */
.join-block {
  position: relative;
  background: linear-gradient(135deg, var(--red-700), var(--red-900));
  color: #fff;
  border-radius: var(--r-4);
  padding: 30px 22px;
  overflow: hidden;
  isolation: isolate;
}
.join-block::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 120% auto; background-position: center 80%;
  background-repeat: no-repeat;
  opacity: .25; z-index: -1;
}
.join-pre {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .14em; color: var(--gold-400);
  text-transform: uppercase;
}
:root[lang="ta"] .join-pre { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.join-block h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1; margin: 8px 0 10px;
}
.join-block p { font-size: 14px; opacity: .9; margin: 0 0 18px; max-width: 40ch; }
.join-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #FFE166, #F5C518);
  color: var(--red-900);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  padding: 14px 22px; border-radius: var(--r-pill);
  border: 0; cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -8px rgba(245,197,24,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
:root[lang="ta"] .btn-gold { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.btn-gold .arrow { width: 18px; height: 18px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--gold-400); color: var(--gold-400);
  background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em;
  padding: 11px 18px; border-radius: var(--r-pill);
  cursor: pointer;
  text-transform: uppercase;
}
:root[lang="ta"] .btn-outline { text-transform: none; letter-spacing: .02em; font-size: 13px; }

/* ============= FOOTER — Integrated (flag-vj treatment) ============= */
footer.tvk-foot {
  position: relative;
  background:
    radial-gradient(80% 60% at 70% 40%, #7A1018 0%, #5A0C12 55%, #3F0608 100%);
  color: #fff;
  padding: 0 0 0;
  overflow: hidden;
  isolation: isolate;
}
.foot-hero {
  position: relative;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr; /* stacked on mobile; 2-col on desktop */
  padding: 0;
}
.foot-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.foot-crowd {
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 60% auto;
  background-position: right -15% center;
  background-repeat: no-repeat;
  opacity: .15;
}
.foot-flag {
  background:
    radial-gradient(60% 80% at 30% 50%, rgba(255,216,74,.18) 0%, transparent 65%);
}
/* Sampath-with-flag treatment — contained portrait composition.
   Height + center-center positioning so Sampath's face AND namaste both
   stay in frame (the source image is a 1122x1402 portrait — too tall to
   show fully in a short landscape box). */
.foot-cutout {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 420px;
  background-image: url("assets/branding/sampath-flag-flowing.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #5A0C12;
}
/* No gradient overlay — the PNG bleeds straight into the footer band. */
.foot-cutout::after { content: none; }
/* Hide the legacy <img> inside .foot-cutout if it slipped through */
.foot-cutout img { display: none; }
.foot-cta {
  position: relative;
  z-index: 2;
  padding: 36px var(--section-px) 40px;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(63,6,8,0) 0%, rgba(63,6,8,.65) 100%);
}
.foot-cta .pre {
  font-family: var(--font-display); font-weight: 400;
  font-size: 12px; letter-spacing: .16em; color: var(--gold-400);
  text-transform: uppercase;
}
:root[lang="ta"] .foot-cta .pre { text-transform: none; letter-spacing: .04em; font-size: 14px; }
.foot-cta h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.02;
  margin: 10px 0 14px;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
:root[lang="ta"] .foot-cta h3 {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.foot-cta p { font-size: 15px; opacity: .9; margin: 0 0 22px; max-width: 44ch; line-height: 1.6; }
.foot-cta .btn-gold { width: max-content; }
.foot-socials-inline {
  margin-top: 18px;
  display: flex; gap: 8px;
}
.foot-socials-inline .ic {
  width: 40px; height: 40px;
  border: 1px solid var(--line-on-red);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(0,0,0,.22);
  transition: background .2s ease, color .2s ease;
}
.foot-socials-inline .ic:hover { background: var(--gold-500); color: var(--red-900); }
.foot-socials-inline .ic svg { width: 16px; height: 16px; }

.foot-wordmark {
  position: relative;
  z-index: 2;
  padding: 16px var(--section-px) 0;
  text-align: left;
  border-top: 1px solid var(--line-on-red);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-wordmark-brand { flex: 1 1 auto; min-width: 0; }
.foot-wordmark-copy {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.4;
  text-align: right;
  padding-bottom: 6px;
  max-width: 100%;
}
.foot-wordmark .en {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(44px, 12vw, 72px);
  line-height: 1.0;
  color: var(--gold-500);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.foot-wordmark .ta {
  font-family: var(--font-display-ta); font-weight: 400;
  font-size: clamp(28px, 8vw, 44px);
  color: var(--gold-400);
  margin-top: 8px;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.foot-wordmark .domain {
  margin-top: 8px;
  font-family: var(--font-num);
  color: var(--gold-200); font-size: 12px; letter-spacing: .12em;
}

.foot-cols {
  position: relative; z-index: 2;
  padding: 28px var(--section-px) 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 14px;
}
.foot-cols h5 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 12px; letter-spacing: .16em; color: var(--gold-400);
  margin: 0 0 14px; text-transform: uppercase;
  line-height: 1.3;
}
:root[lang="ta"] .foot-cols h5 {
  text-transform: none; letter-spacing: .04em; font-size: 14px;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-cols ul li a {
  font-size: 14px; opacity: .85; line-height: 1.4;
  display: inline-block;
  min-height: 28px;
  padding: 2px 0;
}
.foot-cols ul li a:hover { color: var(--gold-400); opacity: 1; }

/* ===== Trimmed link grid — 3-item lists instead of 4 (Wings/Committees
   /Resolutions/Action Plan/Press Kit removed). Keep visual cadence tight. */
.foot-cols-trim ul { gap: 8px; }

/* ===== Top-right copyright strip ===== */
.foot-topbar {
  position: relative; z-index: 3;
  padding: 10px var(--section-px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid var(--line-on-red);
}
.foot-topbar-copy {
  font-size: 11px;
  color: rgba(255,255,255,.62);
  line-height: 1.4;
  text-align: right;
}

/* ===== Compact foot-meta — DDS card replaces copyright cell ===== */
.foot-meta-compact {
  align-items: stretch;
}
.foot-meta-compact .foot-meta-cell {
  align-self: center;
}

/* ===== DDS attribution — own row, centered, modest prominence ===== */
.foot-builtby {
  position: relative; z-index: 2;
  display: flex;
  justify-content: center;
  padding: 14px var(--section-px) 22px;
  border-top: 1px solid var(--line-on-red);
}
.foot-builtby-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  text-decoration: none;
}
.foot-builtby-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(245,197,24,.45);
  transform: translateY(-1px);
}
.foot-builtby-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  line-height: 1.2;
  white-space: nowrap;
}
:root[lang="ta"] .foot-builtby-label {
  font-family: var(--font-display-ta);
  text-transform: none;
  letter-spacing: .04em;
  font-size: 13px;
}
.foot-builtby-card img {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* ===== Breadcrumbs (used on every non-homepage route, just below the topbar) ===== */
.crumbs {
  padding: 10px var(--section-px);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .75;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
}
.crumbs a { color: var(--red-700); }
:root[lang="ta"] .crumbs {
  text-transform: none;
  letter-spacing: .02em;
}

/* ===== Footer CTA row — Join TVK + Enquiry buttons side by side ===== */
.foot-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.foot-cta-row .btn-gold,
.foot-cta-row .btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
:root[lang="ta"] .foot-cta-row .btn-gold,
:root[lang="ta"] .foot-cta-row .btn-outline-light {
  font-family: var(--font-display-ta);
  text-transform: none;
  letter-spacing: .04em;
  font-size: 15px;
}
.foot-cta-row .btn-gold {
  background: linear-gradient(180deg, #FFE166, #F5C518);
  color: var(--red-900);
  border: 0;
  box-shadow: 0 4px 14px rgba(245,197,24,.35);
}
.foot-cta-row .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245,197,24,.5); }
.foot-cta-row .btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.foot-cta-row .btn-outline-light:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}
.foot-cta-row .arrow { width: 16px; height: 16px; }

/* ===== Footer quick-links — single flowing row of REAL routes ===== */
.foot-quicklinks {
  position: relative; z-index: 2;
  padding: 24px var(--section-px) 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line-on-red);
}
.foot-quicklinks a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: 6px 0;
  position: relative;
  transition: color .15s ease;
}
:root[lang="ta"] .foot-quicklinks a {
  font-family: var(--font-display-ta);
  text-transform: none;
  letter-spacing: .02em;
  font-size: 14px;
}
.foot-quicklinks a:hover { color: var(--gold-400); }

/* ===== Built-by attribution (Digital and Design Solutions) ===== */
.foot-builtby {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px var(--section-px) 32px;
  border-top: 1px solid var(--line-on-red);
}
.foot-builtby-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
:root[lang="ta"] .foot-builtby-label {
  font-family: var(--font-display-ta);
  text-transform: none;
  letter-spacing: .04em;
  font-size: 12px;
}
.foot-builtby-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.foot-builtby-link:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(245,197,24,.35);
}
.foot-builtby-link img {
  height: 22px;
  width: auto;
  display: block;
  opacity: .95;
}
.foot-builtby-brand {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
  text-transform: none;
}

.foot-meta {
  position: relative; z-index: 2;
  padding: 18px var(--section-px) 26px;
  border-top: 1px solid var(--line-on-red);
  margin-top: 10px;
  display: grid;
  gap: 12px;
}
.foot-meta-cell {
  font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.5;
  display: flex; flex-direction: column; gap: 2px;
}
.foot-meta-cell b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .14em; color: var(--gold-400);
  text-transform: uppercase;
}
:root[lang="ta"] .foot-meta-cell b { text-transform: none; letter-spacing: .04em; }
.foot-meta-copyright {
  font-size: 11px; color: rgba(255,255,255,.5);
  padding-top: 8px; border-top: 1px solid var(--line-on-red);
  display: flex; flex-direction: column; gap: 8px;
}

/* ===== Built-by, inline in the meta row (next to copyright) ===== */
.foot-builtby-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  align-self: flex-start;
  transition: background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.foot-builtby-inline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(245,197,24,.3);
}
.foot-builtby-inline-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
:root[lang="ta"] .foot-builtby-inline-label {
  font-family: var(--font-display-ta);
  text-transform: none;
  letter-spacing: .04em;
  font-size: 12px;
}
.foot-builtby-inline img {
  height: 16px;
  width: auto;
  display: block;
  opacity: .95;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Util */
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }

/* SR only */
.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;
}

/* ===========================================================
   TABLET — >= 768px
   Shell widens off the 480px phone shell. Padding loosens.
   Cards that were 1-up go 2-up where the design supports it.
   =========================================================== */
@media (min-width: 768px) {
  :root {
    --shell-max: 100%;
    --section-px: 32px;
  }

  .tvk-shell {
    max-width: 100%;
    box-shadow: none;
  }

  /* Topbar — a touch more breathing room, nav still hidden */
  .tvk-topbar { padding: 12px 32px; }
  .tvk-mark .word .en { font-size: 17px; }

  /* Hero — keep single column but allow bigger type and a side-by-side visual */
  .hero { padding: 28px 0 0; }
  .hero-inner { padding: 0 32px; gap: 32px; }
  .hero-flag-strip { left: -32px; }
  .hero-display { font-size: clamp(54px, 8vw, 72px); }
  .hero-display-ta { font-size: clamp(32px, 5vw, 42px); }
  .hero-lede { font-size: 16px; max-width: 50ch; }
  .hero-inner-single { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .hero-visual { min-height: 320px; }
  .hero-poster-card { max-width: 720px; margin: 0 auto; }

  /* Sections */
  section { padding: 56px 32px; }
  .section-title { font-size: clamp(36px, 5vw, 48px); }

  /* Stats / data 3-up where it was 2-up */
  .stat-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* MLAs — 2 up */
  .mla-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mla-card { grid-template-columns: 130px 1fr; }

  /* Leadership pair — 2 up */
  .leadership-grid { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* Featured articles — 2 up (already 2 in mobile, just gap up) */
  .featured { grid-template-columns: 1fr 1fr; gap: 18px; }
  .article-list { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Ideology pillars — 5 across already; just bigger names */
  .ideo-card .nm { font-size: 11px; }

  /* About TVK meta — keep 3 across (it's already 3) */
  .about-meta-grid { gap: 12px; max-width: 640px; }

  /* Biography — 2 column block */
  /* ===========================================================
     BIO SECTION — Editorial magazine layout (desktop ≥768px)
     ===========================================================
       Row 1: bio-hero (1.55fr) LEFT  |  bio-timeline (1fr) RIGHT
              (both stretch to equal height — no empty space)
       Row 2: bio-body — full width, max 90ch
       Row 3: bio-photogrid — full width, 3 columns
     Mobile (<768px) layout is unchanged. */
  .bio-layout {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-areas:
      "hero      timeline"
      "body      body"
      "photos    photos";
    gap: 32px 36px;
    align-items: stretch;
  }
  .bio-hero {
    grid-area: hero;
    /* 2-zone editorial card:
         LEFT 42%: portrait, FULL-BLEED (no padding, edge-to-edge)
         RIGHT 58%: content panel with meta + 6-cell data grid
       Both zones stretch to equal height — the portrait fills whatever
       height the content panel needs. */
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--r-4);
    min-height: 520px;
  }
  .bio-hero-portrait {
    aspect-ratio: auto;
    height: 100%;
    min-height: 520px;
  }
  .bio-hero-portrait img {
    object-position: center 18%;
  }
  .bio-hero-content {
    padding: 36px 38px;
    gap: 22px;
    justify-content: space-between;
  }
  .bio-hero-meta { gap: 8px; }
  .bio-hero-meta .nm { font-size: 42px; line-height: 0.95; }
  .bio-hero-meta .nm-ta { font-size: 28px; }
  .bio-hero-meta .roles { margin-top: 10px; padding-top: 14px; gap: 5px; }
  .bio-hero-meta .role { font-size: 14px; }

  /* Data grid sits inside .bio-hero-content as a clean 2-col x 3-row panel,
     transparent so it blends with the maroon card; gold-tinted dividers. */
  .bio-data {
    grid-template-columns: 1fr 1fr;
    background: transparent;
    border: 1px solid rgba(255,216,74,.18);
    border-radius: var(--r-3);
    overflow: hidden;
    margin: 0;
    gap: 0;
  }
  .bio-data .cell {
    background: transparent;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,216,74,.12);
    border-right: 1px solid rgba(255,216,74,.12);
  }
  .bio-data .cell:nth-child(2n) { border-right: 0; }
  .bio-data .cell:nth-last-child(-n+2) { border-bottom: 0; }
  .bio-data .cell .k {
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--gold-400);
    margin-bottom: 4px;
  }
  .bio-data .cell .v { font-size: 14px; color: #fff; font-weight: 500; }

  .bio-body { grid-area: body; max-width: 90ch; }
  /* Timeline now sits as a stand-alone panel to the right of the bio-hero,
     matching its visual weight: dark backdrop, gold inner ring, padded. */
  .bio-timeline {
    grid-area: timeline;
    align-self: stretch;
    padding: 28px 26px 28px 46px;
    background: linear-gradient(180deg, rgba(63,6,8,.04) 0%, rgba(168,19,26,.06) 100%);
    border: 1px solid rgba(168,19,26,.18);
    border-radius: var(--r-4);
    overflow-y: auto;
    max-height: 600px;
    position: relative;
  }
  .bio-timeline::before {
    left: 22px;
  }
  .bio-timeline .ev::before {
    left: -32px;
  }
  .bio-timeline::after {
    content: "TIMELINE";
    position: absolute;
    top: 12px; right: 18px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--gold-600);
    background: var(--cream);
    padding: 2px 8px;
    border: 1px solid rgba(168,19,26,.25);
    border-radius: var(--r-pill);
  }
  .bio-photogrid { grid-area: photos; grid-template-columns: repeat(3, 1fr); }

  /* Integrated leadership — start showing 3-col composite */
  .lead-composite {
    grid-template-columns: 1fr auto 1fr;
    padding: 40px 28px;
    min-height: 460px;
    align-items: center;
  }
  .lead-figure-img { max-width: 220px; }

  /* Events — bigger tiles */
  .events-grid { grid-auto-rows: 86px; gap: 8px; }

  /* Join CTA */
  .join-block { padding: 36px 32px; }
  .join-block h2 { font-size: 38px; }

  /* Footer cols 4-up at tablet width */
  .foot-cols { grid-template-columns: repeat(4, 1fr); padding: 26px 32px 12px; gap: 22px; }
  .foot-wordmark { padding: 18px 32px 0; }
  .foot-cta { padding: 32px 32px 36px; }
  .foot-meta { grid-template-columns: 1fr 1fr 1fr; padding: 20px 32px 28px; gap: 18px; }
  .foot-meta-copyright { padding-top: 0; border-top: 0; text-align: right; }
}

/* ===========================================================
   DESKTOP — >= 1280px
   Full desktop: wider hero, multi-column candidate grid,
   article cards 2-3 per row, nav spread across the top.
   =========================================================== */
@media (min-width: 1280px) {
  :root {
    --shell-max: 100%;
    --section-px: 56px;
  }

  /* GUTTER FIX: shell fills the viewport edge-to-edge; sections cap their own
     inner content with .section-head/.featured/.mla-grid max-widths or via
     padding. No outer gray/cream gutters on desktop. */
  .tvk-shell {
    max-width: 100%;
    box-shadow: none;
    margin: 0;
  }

  /* Topbar */
  .tvk-topbar { padding: 14px 56px; }
  .tvk-mark .word .en { font-size: 18px; }
  .tvk-mark .word .ta { font-size: 13px; }
  .tvk-nav-desktop { display: flex; }
  .menu-btn { display: none; }

  /* Hero — 2 column desktop */
  .hero { padding: 36px 0 0; }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "party  poster"
      "lead   poster";
    gap: 32px;
    align-items: start;
    padding: 0 56px;
  }
  .hero-party-block { grid-area: party; padding: 12px 0 0; }
  .hero-flag-strip { left: -56px; }
  .hero-lead-block { grid-area: lead; }
  .hero-poster-card { grid-area: poster; align-self: stretch; }
  .hero-display { font-size: clamp(56px, 6vw, 84px); }
  .hero-display-ta { font-size: clamp(34px, 3.5vw, 48px); }
  .hero-lede { font-size: 17px; max-width: 44ch; }

  .hero-poster-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .hero-poster-text { padding: 28px 24px; }
  .hero-poster-portrait {
    height: 100%;
    min-height: 480px;
    margin-top: 0;
  }

  .hero-victory { margin-top: 40px; }
  .hero-victory .marquee { font-size: 16px; }

  /* Sections */
  section { padding: 80px 56px; }
  .section-title { font-size: clamp(40px, 4.5vw, 56px); }
  .section-sub { font-size: 16px; }

  /* Victory stats */
  .stat .v { font-size: 44px; }
  .stat { padding: 26px 22px; }

  /* MLAs grid — 3 columns desktop */
  .mla-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .mla-card { grid-template-columns: 140px 1fr; }
  .mla-nm { font-size: 20px; }

  /* Leadership pair — side by side */
  .leadership-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .leader-card .info { padding: 22px 26px 26px; }
  .leader-card .info .name { font-size: 34px; }

  /* Ideology — bigger */
  .ideo-strip { gap: 18px; max-width: 900px; }
  .ideo-card .nm { font-size: 12px; }

  /* Biography — 1280px+ refinements ONLY (no grid template redefinition;
     the desktop grid is set at >=768px above with "hero timeline / body body
     / photos photos"). Earlier this block redeclared a stale 3-col grid with
     a "data" area that no longer existed in the JSX, which is why the
     timeline kept rendering at the bottom instead of beside the hero. */
  .bio-body { column-count: 1; font-size: 15px; }
  .bio-body p { font-size: 16px; }
  .bio-data .cell { padding: 18px 22px; }
  .bio-data .cell .v { font-size: 15px; }
  .bio-photogrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* Articles — featured 2-up consistently */
  .featured { grid-template-columns: 1fr 1fr; gap: 22px; }
  .featured .feat-card:first-child { grid-column: auto; }
  .feat-card-compact .feat-body { padding: 18px 18px 20px; gap: 8px; }
  .feat-card-compact .feat-body h3 { font-size: 18px; -webkit-line-clamp: 2; min-height: calc(1.3em * 2); }
  .feat-card-compact .feat-body .kicker { font-size: 11px; }
  .feat-card-compact .feat-body .meta { font-size: 11px; }
  .article-list { grid-template-columns: 1fr 1fr; }

  /* Integrated leadership composite — Vijay | connector | Sampath */
  .lead-composite {
    grid-template-columns: 1fr auto 1fr;
    padding: 56px 48px;
    min-height: 540px;
    align-items: center;
  }
  .lead-figure-img { max-width: 280px; }
  .lead-figure-nm { font-size: 56px; }
  .lead-figure-nm-ta { font-size: 30px; }
  .lead-figure-sub { font-size: 14px; }
  .lead-connector-line { height: 60%; }

  /* Hero visual desktop tweak */
  .hero-visual { min-height: 360px; padding: 24px; gap: 18px; }
  .hero-tagline { font-size: 16px; max-width: 50ch; }

  /* District secretary section padding */
  .district-sec { padding-top: 64px; }

  /* Events — bigger tiles */
  .events-grid { grid-auto-rows: 110px; gap: 10px; }

  /* About TVK */
  .about-meta-grid { gap: 14px; max-width: 720px; }
  .about-cell { padding: 22px 20px; }
  .about-cell .v { font-size: 18px; }
  .about-pledge { padding: 26px 28px; max-width: 800px; }
  .about-pledge .body { font-size: 16px; }

  /* Join */
  .join-block { padding: 48px 44px; }
  .join-block h2 { font-size: 44px; }

  /* Footer — 2-col integrated layout, Sampath cutout on the left */
  .foot-hero {
    grid-template-columns: 1.1fr 1fr;
    min-height: 560px;
  }
  .foot-cutout {
    height: 100%;
    min-height: 560px;
    background-position: center center;
    background-size: cover;
  }
  .foot-cta {
    padding: 80px 56px 80px 32px;
    justify-content: center;
    background: linear-gradient(90deg, rgba(63,6,8,0) 0%, rgba(63,6,8,.7) 30%, rgba(63,6,8,.85) 100%);
  }
  .foot-cta h3 { font-size: clamp(48px, 4.4vw, 72px); }
  .foot-cta p { font-size: 17px; }

  .foot-wordmark { padding: 24px 56px 12px; }
  .foot-cols { grid-template-columns: repeat(4, 1fr); gap: 0 32px; padding: 32px 56px 12px; }
  .foot-meta {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 22px 56px 24px;
    align-items: end;
  }
  .foot-meta-copyright { padding-top: 0; border-top: 0; text-align: right; }
}

/* ============= LARGER DESKTOP — >= 1600px ============= */
@media (min-width: 1600px) {
  .tvk-shell { max-width: 100%; }
  .hero-display { font-size: clamp(72px, 6vw, 104px); }
  .hero-name { font-size: clamp(60px, 5vw, 80px); }
  .hero-roles li b { font-size: 16px; }
  .section-title { font-size: clamp(48px, 4.2vw, 64px); }
  section { padding: 96px 80px; }
  .tvk-topbar { padding: 16px 80px; }
  .hero-inner { padding: 0 80px; }
  .foot-cols { padding: 36px 80px 14px; }
  .foot-meta { padding: 24px 80px 36px; }
  .foot-wordmark { padding: 28px 80px 14px; }
}

/* ===========================================================
   DESKTOP refinements appended to the 1280+ block above.
   These target very specific issues:
   - candidate cards 3/4 per row
   - article cards 3 per row
   - hero 2-column where it makes sense
   =========================================================== */
@media (min-width: 1280px) {
  /* Hero — 2-col single layout with visual on the right (Hero component uses .hero-inner-single) */
  .hero-inner-single {
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    align-items: center;
  }
  .hero-visual { min-height: 420px; }

  /* MLAs — 4 per row on desktop for the candidate grid */
  .mla-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .mla-card { grid-template-columns: 1fr; }
  .mla-face { aspect-ratio: 1 / 1.05; }
  .mla-info { padding: 14px 16px 16px; }
  .mla-nm { font-size: 19px; }

  /* Articles — 3 per row for the featured grid */
  .featured { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .feat-card-compact .feat-body h3 { font-size: 17px; -webkit-line-clamp: 3; min-height: calc(1.3em * 3); }
  .article-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Ideology — keep 5 across, wider container */
  .ideo-strip { gap: 22px; max-width: 1100px; margin: 0 auto; }

  /* About — meta grid wider, pledge wider */
  .about-meta-grid { max-width: 880px; }
  .about-pledge { max-width: 920px; }

  /* District secretary — center the poster card so it doesn't stretch awkwardly wide */
  .district-sec .hero-poster-card { max-width: 1100px; margin: 0 auto; }
}

/* ===========================================================
   DESIGN PASS — May 2026
   Topbar logo image, hero poster card, ministers, magazine grid,
   about stats strip, and cross-cutting polish.
   =========================================================== */

/* --- Topbar logo image (replaces the inline .vagai disc) --- */
.tvk-mark { gap: 12px; }
.tvk-mark-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  border: 1.5px solid var(--gold-400);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  flex: none;
}
@media (min-width: 1280px) {
  .tvk-mark-logo { width: 44px; height: 44px; }
}
.tvk-mark .vagai { display: none; } /* hide legacy inline disc if it appears */

/* --- Inner-content caps on ultra-wide so sections don't sprawl --- */
@media (min-width: 1600px) {
  .section-head,
  .about-pledge,
  .about-stats-strip,
  .ideo-strip,
  .mla-grid,
  .featured,
  .article-list,
  .mag-grid,
  .ministers-grid,
  .events-grid,
  .lead-composite,
  .bio-layout,
  .join-block,
  .hero-poster-card,
  .hero-inner,
  .foot-hero,
  .foot-cols,
  .foot-meta,
  .foot-wordmark {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }
  section { padding-left: 80px; padding-right: 80px; }
  .tvk-topbar { padding-left: 80px; padding-right: 80px; }
}

/* --- HERO redesign: poster card on the right --- */
.hero-cta-row {
  margin-top: 22px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-cta-row .btn-gold,
.hero-cta-row .btn-outline { text-decoration: none; }
.btn-outline-light {
  color: #fff;
  border-color: var(--gold-400);
  background: rgba(0,0,0,.22);
}
.btn-outline-light:hover { background: rgba(0,0,0,.42); color: var(--gold-400); }

.hero-vagai-watermark {
  position: absolute;
  left: -8%; top: 30%;
  width: 70%; height: 70%;
  background-image: url("assets/bg/vaagai.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: .06;
  z-index: 0;
  pointer-events: none;
}
.hero-elephants-bottom {
  /* Removed — was a near-white twin-elephants PNG rendered with
     mix-blend-mode: screen over the deep-red hero, which produced the
     second whitish horizontal overlay band. */
  display: none;
}

.hero-poster-right {
  position: relative;
  margin-top: 18px;
  padding: 0;
  z-index: 2;
}
.hero-poster-strip {
  position: absolute;
  left: -6px; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--gold-500), var(--red-500));
  border-radius: 3px 0 0 3px;
  opacity: .9;
}
.hero-poster-link {
  display: block;
  border-radius: var(--r-3);
  overflow: hidden;
  background: linear-gradient(160deg, #6F1118 0%, #3F0608 100%);
  border: 2px solid var(--gold-400);
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.6);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-poster-link:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -16px rgba(0,0,0,.7); }
.hero-poster-img {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, var(--red-700), var(--red-900));
  overflow: hidden;
}
.hero-poster-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.hero-poster-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.92) 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px; align-items: end;
}
.hero-poster-overlay-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: .85;
  color: var(--gold-400);
  letter-spacing: -0.02em;
}
.hero-poster-overlay-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.badge-won {
  display: inline-flex; width: max-content;
  background: var(--gold-500); color: var(--red-900);
  padding: 3px 8px; border-radius: var(--r-1);
  font-family: var(--font-display);
  font-weight: 700; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
}
:root[lang="ta"] .badge-won { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.hero-poster-overlay-nm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px; line-height: 1;
  color: #fff;
  letter-spacing: -.005em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hero-poster-overlay-role {
  font-size: 11px; line-height: 1.35;
  color: rgba(255,255,255,.85);
}
.hero-poster-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--ink);
  border-top: 2px solid var(--gold-400);
}
.hero-poster-stats .stat-cell {
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  border-right: 1px solid rgba(255,255,255,.08);
}
.hero-poster-stats .stat-cell:last-child { border-right: 0; }
.hero-poster-stats .stat-cell .v {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-400);
  letter-spacing: -.01em;
}
.hero-poster-stats .stat-cell .l {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
:root[lang="ta"] .hero-poster-stats .stat-cell .l { text-transform: none; letter-spacing: .04em; font-size: 10px; }

@media (min-width: 768px) {
  .hero-poster-stats .stat-cell { padding: 14px 12px; }
  .hero-poster-stats .stat-cell .v { font-size: 20px; }
  .hero-poster-overlay-num { font-size: 56px; }
  .hero-poster-overlay-nm { font-size: 22px; }
}
@media (min-width: 1280px) {
  .hero-inner-single { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .hero-poster-right { margin-top: 0; }
  .hero-poster-img { aspect-ratio: 4 / 5; max-height: 620px; }
  .hero-poster-stats .stat-cell .v { font-size: 22px; }
  .hero-poster-overlay-num { font-size: 64px; }
  .hero-poster-overlay-nm { font-size: 24px; }
}

/* --- MINISTERS section --- */
.ministers-sec {
  position: relative;
  background: linear-gradient(180deg, #3F0608 0%, #5A0C12 100%);
}
.ministers-sec::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/bg/pledge-bg.png");
  background-size: cover; background-position: center;
  opacity: .08;
  pointer-events: none;
}
.ministers-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.minister-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: linear-gradient(160deg, #fff 0%, #FBF7F1 100%);
  color: var(--ink);
  border-radius: var(--r-3);
  overflow: hidden;
  border: 2px solid var(--gold-400);
  box-shadow: 0 14px 32px -16px rgba(0,0,0,.6);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.minister-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.7);
}
.minister-card-portrait {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--red-700), var(--red-900));
  overflow: hidden;
}
.minister-card-portrait img {
  /* Safari-safe: width/height 100% on an aspect-ratio parent can collapse
     the image back to its intrinsic size on iOS Safari, leaving empty space
     in the box (the bug the user reported on iPhone). Absolute inset:0
     forces the image to fill the box on every engine. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.minister-card-ac {
  position: absolute; left: 12px; top: 12px;
  background: var(--ink); color: var(--gold-400);
  padding: 5px 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-1);
}
:root[lang="ta"] .minister-card-ac { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.minister-card-oath {
  position: absolute; right: 12px; top: 12px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  color: var(--red-900);
  padding: 5px 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-1);
}
:root[lang="ta"] .minister-card-oath { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.minister-card-body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.minister-card-portfolio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
  line-height: 1.3;
}
:root[lang="ta"] .minister-card-portfolio { text-transform: none; letter-spacing: .03em; font-size: 13px; line-height: 1.35; }
.minister-card-nm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: .95;
  margin: 0;
  letter-spacing: -.005em;
  color: var(--ink);
}
.minister-card-nm-alt {
  font-family: var(--font-display-ta);
  font-weight: 800;
  font-size: 16px;
  color: var(--red-700);
}
.minister-card-stats {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-2);
  overflow: hidden;
}
.minister-card-stats .stat-cell {
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.minister-card-stats .stat-cell:last-child { border-right: 0; }
.minister-card-stats .stat-cell .v {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: 18px;
  color: var(--gold-400);
  letter-spacing: 0;
}
.minister-card-stats .stat-cell .l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  line-height: 1.3;
  margin-top: 3px;
}
:root[lang="ta"] .minister-card-stats .stat-cell .l {
  text-transform: none; letter-spacing: .04em; font-size: 11px;
}
/* Pill CTA — visually obvious "this is a button to a full profile page".
   Gold fill on white card, red ink on the pill. Hover lifts + deepens gold. */
.minister-card-cta {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #FFE166 0%, #F5C518 100%);
  border: 1px solid rgba(170, 110, 0, .35);
  box-shadow: 0 3px 10px -2px rgba(170, 110, 0, .35);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-900);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.minister-card:hover .minister-card-cta {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(170, 110, 0, .55);
  background: linear-gradient(180deg, #FFD84A 0%, #E8B600 100%);
}
:root[lang="ta"] .minister-card-cta { text-transform: none; letter-spacing: .04em; font-size: 14px; }
.minister-card-cta svg { width: 14px; height: 14px; }

@media (min-width: 900px) {
  .ministers-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (min-width: 1280px) {
  .ministers-grid { gap: 28px; }
  .minister-card-portrait { aspect-ratio: 4 / 3; }
  .minister-card-nm { font-size: 36px; }
  .minister-card-portfolio { font-size: 12px; }
  .minister-card-stats .stat-cell .v { font-size: 20px; }
}

/* --- MAGAZINE GRID (Featured Stories rebuild) --- */
.newsroom .mag-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mag-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mag-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mag-card .mag-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--red-800);
}
.mag-card.mag-lead .mag-img { aspect-ratio: 16 / 9; }
.mag-card.mag-lead .mag-img .mag-ribbon {
  position: absolute; left: 14px; top: 14px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  color: var(--red-900);
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--r-1);
}
:root[lang="ta"] .mag-card.mag-lead .mag-img .mag-ribbon { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.mag-card .mag-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.mag-card .mag-body .kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
}
:root[lang="ta"] .mag-card .mag-body .kicker { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.mag-card .mag-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.mag-card.mag-lead .mag-title { font-size: 26px; }
.mag-card .mag-excerpt {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.mag-card .meta {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
  font-size: 11px;
  color: rgba(26,6,6,.55);
  display: flex; gap: 8px; align-items: center;
}
.mag-card .mag-arrow {
  margin-left: auto;
  color: var(--red-600);
  font-family: var(--font-display);
  font-weight: 700;
  transition: transform .2s ease;
}
.mag-card:hover .mag-arrow { transform: translateX(3px); }

.mag-tertiary {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-3);
  padding: 18px 18px 6px;
  border: 1px solid rgba(255,255,255,.08);
}
.mag-tertiary-head .eyebrow { color: var(--gold-400); }
.mag-tertiary-head .eyebrow::before { background: var(--gold-400); }
.mag-tertiary ul { list-style: none; padding: 0; margin: 12px 0 0; }
.mag-tertiary ul li { border-bottom: 1px solid rgba(255,255,255,.08); }
.mag-tertiary ul li:last-child { border-bottom: 0; }
.mag-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 0;
  text-decoration: none;
  color: #fff;
}
.mag-row .kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
:root[lang="ta"] .mag-row .kicker { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.mag-row .title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
}
.mag-row .date {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  font-feature-settings: "tnum" 1;
}
.mag-row:hover .title { color: var(--gold-400); }

@media (min-width: 900px) {
  .newsroom .mag-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "lead lead lead"
      "sec1 sec2 sec3"
      "tert tert tert";
    gap: 18px;
  }
  .mag-card.mag-lead { grid-area: lead; }
  .mag-card.mag-sec-1 { grid-area: sec1; }
  .mag-card.mag-sec-2 { grid-area: sec2; }
  .mag-card.mag-sec-3 { grid-area: sec3; }
  .mag-tertiary { grid-area: tert; }
  .mag-card.mag-lead { display: grid; grid-template-columns: 1.4fr 1fr; }
  .mag-card.mag-lead .mag-img { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .mag-tertiary ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}
@media (min-width: 1280px) {
  .newsroom .mag-grid { gap: 22px; }
  .mag-card.mag-lead .mag-title { font-size: 34px; }
  .mag-card .mag-title { font-size: 19px; }
  .mag-tertiary ul { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .mag-row { padding: 14px 0; }
}

/* --- ABOUT TVK stats strip --- */
.about-tvk { position: relative; overflow: hidden; }
.about-bg-layer {
  position: absolute; inset: 0;
  background-image: url("assets/bg/elephants-bg.png");
  background-size: cover; background-position: center;
  opacity: .16;
  pointer-events: none;
  mix-blend-mode: screen;
}
.about-tvk > * { position: relative; z-index: 1; }

/* About-the-Party: real TVK flag as content beside the pledge */
.about-flag-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
}
.about-flag-card {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  background: linear-gradient(160deg, #6F1118 0%, #3F0608 100%);
  border: 2px solid var(--gold-400);
  box-shadow: 0 14px 32px -16px rgba(0,0,0,.6);
}
.about-flag-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  display: block;
}
.about-flag-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 100%);
  display: flex; flex-direction: column; gap: 2px;
}
.about-flag-caption .k {
  font-family: var(--font-display); font-weight: 400;
  font-size: 10px; letter-spacing: .16em;
  color: var(--gold-400); text-transform: uppercase;
}
:root[lang="ta"] .about-flag-caption .k {
  text-transform: none; letter-spacing: .04em; font-size: 12px;
}
.about-flag-caption .v {
  font-family: var(--font-body);
  font-size: 13px; color: #fff; line-height: 1.4;
}
@media (min-width: 900px) {
  .about-flag-row { grid-template-columns: 1.2fr 1fr; gap: 28px; }
}
.about-stats-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-3);
  overflow: hidden;
  margin-top: 18px;
}
.ass-cell {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ass-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
:root[lang="ta"] .ass-k { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.ass-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -.005em;
}
.ass-v.num { font-family: var(--font-num); font-feature-settings: "tnum" 1; }
@media (min-width: 768px) {
  .about-stats-strip { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1280px) {
  .ass-cell { padding: 18px 20px; }
  .ass-v { font-size: 17px; }
}

/* --- Footer Tamil correction for the wordmark --- */
.foot-wordmark .ta { font-family: var(--font-display-ta); }

/* --- Flag + Whistle iconography strip --- */
.tvk-icon-strip {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  padding: 18px var(--section-px);
  background:
    linear-gradient(90deg, var(--red-900) 0%, var(--red-700) 50%, var(--red-900) 100%);
  border-top: 3px solid var(--gold-500);
  border-bottom: 3px solid var(--gold-500);
  min-height: 70px;
  overflow: hidden;
  isolation: isolate;
  /* No negative margin — sits as a regular block between sections */
  margin: 0 calc(-1 * var(--section-px));
}
@media (min-width: 768px) {
  .tvk-icon-strip { gap: 28px; padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1280px) {
  .tvk-icon-strip { gap: 40px; padding-left: 56px; padding-right: 56px; }
}
@media (min-width: 1600px) {
  .tvk-icon-strip { padding-left: 80px; padding-right: 80px; }
}
.tvk-icon-strip::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 300px auto;
  background-repeat: repeat-x;
  background-position: center;
  opacity: .09;
  z-index: -1;
}
/* Match the District Secretary section's .vagai-emblem-lg treatment:
   red-to-gold radial disc, gold ring border, whistle SVG forced white
   via brightness(0) invert(1) so the symbol reads at small sizes. */
.tvk-icon-strip .strip-whistle {
  flex: none;
  width: 52px; height: 52px;
  background: radial-gradient(circle at 50% 60%, #FFD84A 0%, #C71820 55%, #3F0608 100%);
  border: 2.5px solid var(--gold-400);
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tvk-icon-strip .strip-whistle img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Force whistle SVG (which has its own colors) to pure white for max
     contrast against the red disc — same legibility trick the District
     Secretary emblem uses (brightness/saturate boost). */
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.tvk-icon-strip .strip-flag {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  max-width: 240px;
  height: 56px;
}
.tvk-icon-strip .strip-flag img {
  height: 100%; width: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 3px 12px rgba(0,0,0,.5);
}
.tvk-icon-strip .strip-text {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
  text-align: left;
  line-height: 1.3;
}
:root[lang="ta"] .tvk-icon-strip .strip-text {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
}
@media (min-width: 768px) {
  .tvk-icon-strip { padding: 18px var(--section-px); min-height: 100px; gap: 24px; }
  .tvk-icon-strip .strip-whistle { width: 64px; height: 64px; padding: 12px; }
  .tvk-icon-strip .strip-flag { height: 80px; max-width: 320px; }
  .tvk-icon-strip .strip-text { font-size: 13px; letter-spacing: 0.22em; }
  :root[lang="ta"] .tvk-icon-strip .strip-text { font-size: 15px; }
}
@media (min-width: 1280px) {
  .tvk-icon-strip { padding: 22px var(--section-px); min-height: 140px; }
  .tvk-icon-strip .strip-whistle { width: 80px; height: 80px; padding: 14px; }
  .tvk-icon-strip .strip-flag { height: 100px; max-width: 400px; }
  .tvk-icon-strip .strip-text { font-size: 14px; }
}

/* --- Better hero-display Tamil weight for "தவெக கோவை" --- */
.hero-display-ta {
  font-family: var(--font-display-ta);
  font-feature-settings: "kern" 1;
}

/* --- Keyboard focus rings on new links --- */
.minister-card:focus-visible,
.mag-card:focus-visible,
.mag-row:focus-visible,
.hero-poster-link:focus-visible,
.tvk-mark:focus-visible,
.tvk-nav-desktop a:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* --- Buttons as anchor support (anchor-cast btn-gold) --- */
a.btn-gold, a.btn-outline { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }

/* ===========================================================
   USER FEEDBACK PASS — hero/ministers/featured rebuild
   =========================================================== */

/* --- Hero: single centered column (no poster card) --- */
.hero-inner-centered {
  display: flex;
  justify-content: center;
  padding-top: 22px;
  padding-bottom: 48px;
}
.hero-party-block-centered {
  max-width: 760px;
  width: 100%;
  text-align: left;
  position: relative;
}
.hero-party-block-centered .hero-flag-strip { display: none; }
.hero-party-block-centered .hero-lede,
.hero-party-block-centered .hero-tagline {
  max-width: 60ch;
}
@media (min-width: 768px) {
  .hero-inner-centered { padding-top: 36px; padding-bottom: 64px; }
  .hero-party-block-centered .hero-lede { font-size: 17px; }
}
@media (min-width: 1280px) {
  .hero-inner-centered { padding-top: 56px; padding-bottom: 96px; }
  .hero-party-block-centered { max-width: 880px; }
  .hero-party-block-centered .hero-lede { font-size: 18px; }
}

/* --- Ministers: portfolio-first poster cards --- */
.minister-card-badges {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--red-900) 0%, var(--red-700) 100%);
  border-bottom: 2px solid var(--gold-400);
}
.minister-card-badges .minister-card-ac,
.minister-card-badges .minister-card-oath {
  position: static; /* override absolute positioning from earlier rules */
}
.minister-portfolio-display {
  display: flex; flex-direction: column;
  margin: 6px 0 4px;
  line-height: 1.02;
  gap: 2px;
}
.minister-portfolio-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 7vw, 44px);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--red-900);
  display: block;
  line-height: 1.0;
  padding: 2px 0;
}
.minister-portfolio-line:nth-child(even) { color: var(--red-600); }
.minister-portfolio-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2, #4a2a2a);
  opacity: .92;
  margin-top: 8px;
  letter-spacing: 0.005em;
}
.minister-portfolio-ta {
  font-family: var(--font-display-ta);
  font-weight: 400;
  font-size: clamp(19px, 3.6vw, 24px);
  line-height: 1.35;
  color: var(--red-700);
  margin-top: 14px;
  border-top: 1px solid rgba(180,80,40,.18);
  padding-top: 14px;
  letter-spacing: 0.005em;
}
:root[lang="ta"] .minister-portfolio-line {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: clamp(24px, 5.4vw, 36px);
  line-height: 1.18;
  padding: 3px 0;
}
:root[lang="ta"] .minister-portfolio-ta {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(13px, 2.2vw, 16px);
  color: var(--red-700);
  line-height: 1.3;
}

/* Ensure portrait fills nicely; minister-card-body should grow */
.minister-card { display: flex; flex-direction: column; }
.minister-card .minister-card-body {
  padding: 22px 22px 24px;
  gap: 14px;
  flex: 1;
}
.minister-card .minister-card-nm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 6px;
}
:root[lang="ta"] .minister-card .minister-card-nm {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 24px;
  line-height: 1.2;
}
.minister-card .minister-card-nm-alt {
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  opacity: 0.85;
}
.minister-card-cta { padding-top: 4px; }
.minister-card-badges { padding: 14px 18px; }
.minister-card-ac, .minister-card-oath { line-height: 1.2; }

@media (min-width: 768px) {
  .minister-portfolio-line { font-size: clamp(36px, 4.8vw, 50px); }
  .minister-card .minister-card-nm { font-size: 30px; }
  .minister-card .minister-card-body { padding: 26px 28px 28px; gap: 16px; }
}
@media (min-width: 1280px) {
  .minister-portfolio-line { font-size: 54px; line-height: 1.0; letter-spacing: 0.025em; }
  :root[lang="ta"] .minister-portfolio-line { font-size: 40px; line-height: 1.2; }
  .minister-portfolio-sub { font-size: 14px; line-height: 1.6; }
  .minister-portfolio-ta { font-size: 26px; }
  .minister-card .minister-card-nm { font-size: 34px; }
  .minister-card .minister-card-body { padding: 30px 32px 32px; gap: 18px; }
}

/* --- Featured Stories: uniform 3x3 grid --- */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}
.featured-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.featured-card:hover {
  transform: scale(1.01);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}
.featured-card:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}
.featured-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--red-800);
}
.featured-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.featured-card-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-600);
}
:root[lang="ta"] .featured-card-kicker { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.featured-card-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root[lang="ta"] .featured-card-title {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 19px;
  line-height: 1.3;
}
.featured-card-meta {
  margin-top: auto;
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
  font-size: 11px;
  color: rgba(26,6,6,.55);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
@media (min-width: 768px) {
  .featured-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .featured-card-title { font-size: 19px; }
}
@media (min-width: 1024px) {
  .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .featured-card-title { font-size: 19px; }
}
@media (min-width: 1280px) {
  .featured-grid { gap: 28px; }
  .featured-card-title { font-size: 20px; }
}

/* ===========================================================
   USER FEEDBACK PASS 2 — May 2026
   Hero: 2-column with flag-vj on right + leaders emboss
   Ministers: smaller cards, vagai-stars background
   About: vagai-stars background
   Strip flags into proper official iconography
   =========================================================== */

/* --- HERO SPLIT (text-left, flag-vj-right) --- */
.hero-inner-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 22px;
  padding-bottom: 36px;
  align-items: center;
}
.hero-party-block-split {
  position: relative;
  text-align: left;
  max-width: 600px;
}
.hero-party-block-split .hero-flag-strip { display: none; }
.hero-party-block-split .hero-lede,
.hero-party-block-split .hero-tagline {
  max-width: 56ch;
}

/* Plain eyebrow replaces the gold pill that read as "white stuff" */
.hero-eyebrow-plain {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 6px;
}
.hero-eyebrow-plain::before {
  content: ""; width: 28px; height: 2px;
  background: var(--gold-400);
  flex: none;
}
:root[lang="ta"] .hero-eyebrow-plain {
  text-transform: none; letter-spacing: .04em; font-size: 13px;
}

/* Inline party row — no pill backgrounds, just clean text */
.hero-party-block-split .hero-party-row {
  margin-top: 14px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.hero-party-block-split .hero-party-year {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.65);
  border-left: 1px solid rgba(255,216,74,.35);
  padding-left: 12px;
  line-height: 1;
}

/* Right column — flag-vj.png as the hero visual */
.hero-visual-block {
  position: relative;
  width: 100%;
  margin-top: 4px;
}
.hero-flag-vj {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Aspect matches hero-vj-sampath.jpg (1586x992 ≈ 16:10) so the image fills
     the gold-ring frame edge-to-edge with NO letterbox bars top/bottom.
     Mobile: keep aspect-ratio in charge (no min-height) so the image scales
     down with the viewport instead of forcing a tall box on narrow screens. */
  aspect-ratio: 16 / 10;
  border-radius: var(--r-3);
  overflow: hidden;
  /* Deep red base fills any letterboxing left by object-fit: contain */
  background: var(--red-800);
  border: 2px solid var(--gold-400);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.7);
}
.hero-flag-vj img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* cover — image and container share 16:10 so cover and contain produce
     the same result, but cover guards against any future image with slight
     aspect drift; no letterbox bars will appear. */
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Small leaders-strip emboss — anchored to top-right corner */
.hero-leaders-emboss {
  position: absolute;
  top: -10px;
  right: -6px;
  width: clamp(96px, 26vw, 150px);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--gold-400);
  background: linear-gradient(160deg, #6F1118 0%, #3F0608 100%);
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
  z-index: 3;
  transform: rotate(1.5deg);
}
.hero-leaders-emboss img {
  width: 100%; height: auto; display: block;
}

@media (min-width: 768px) {
  .hero-inner-split { padding-top: 32px; padding-bottom: 56px; gap: 30px; }
  .hero-flag-vj { aspect-ratio: 16 / 10; min-height: 320px; }
  .hero-flag-vj img { object-fit: cover; object-position: center center; }
  .hero-leaders-emboss { width: clamp(130px, 18vw, 180px); top: -14px; right: -12px; }
}
@media (min-width: 900px) {
  .hero-inner-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 44px;
    padding-top: 44px;
    padding-bottom: 72px;
  }
  .hero-party-block-split { max-width: none; }
  .hero-visual-block { margin-top: 0; }
  .hero-flag-vj { aspect-ratio: 16 / 10; min-height: 360px; }
  .hero-flag-vj img { object-fit: cover; object-position: center center; }
  .hero-leaders-emboss { width: clamp(150px, 16vw, 200px); top: -18px; right: -16px; }
}
@media (min-width: 1280px) {
  .hero-inner-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    padding-top: 60px;
    padding-bottom: 96px;
  }
  .hero-flag-vj { aspect-ratio: 16 / 10; max-height: 560px; min-height: 420px; }
  .hero-flag-vj img { object-fit: cover; object-position: center center; }
  .hero-leaders-emboss { width: 200px; top: -22px; right: -20px; }
}
@media (min-width: 1600px) {
  .hero-inner-split { gap: 80px; }
}

/* --- MINISTERS: vagai-and-stars background + smaller cards --- */
.ministers-sec {
  background:
    linear-gradient(180deg, rgba(63,6,8,.94) 0%, rgba(90,12,18,.94) 100%),
    url("assets/bg/vagai-and-stars.png");
  background-size: cover, 90% auto;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
}
.ministers-sec::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 140% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* Smaller, tighter cards */
.ministers-grid {
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  gap: 16px;
}
.minister-card .minister-card-body {
  padding: 16px 18px 18px;
  gap: 10px;
}
.minister-card-badges { padding: 10px 14px; }
.minister-card-portrait { aspect-ratio: 1 / 1; }
.minister-card-portrait img { object-position: top center; }

.minister-portfolio-line {
  font-size: clamp(22px, 5.4vw, 32px);
  padding: 1px 0;
}
:root[lang="ta"] .minister-portfolio-line {
  font-size: clamp(18px, 4.4vw, 26px);
  line-height: 1.18;
}
.minister-portfolio-sub {
  font-size: 12px;
  margin-top: 6px;
}
.minister-portfolio-ta {
  font-size: clamp(15px, 3vw, 18px);
  margin-top: 10px;
  padding-top: 10px;
}
.minister-card .minister-card-nm {
  font-size: 22px;
  margin-top: 4px;
}
:root[lang="ta"] .minister-card .minister-card-nm { font-size: 20px; }
.minister-card .minister-card-nm-alt {
  font-size: 12px;
}

@media (min-width: 768px) {
  .ministers-grid { gap: 18px; }
  .minister-card .minister-card-body { padding: 18px 20px 20px; gap: 12px; }
  .minister-portfolio-line { font-size: clamp(26px, 3.6vw, 36px); }
  .minister-card .minister-card-nm { font-size: 24px; }
}
@media (min-width: 900px) {
  .ministers-grid { grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; }
}
@media (min-width: 1280px) {
  .ministers-grid { gap: 24px; max-width: 1080px; }
  .minister-card { max-width: 480px; margin: 0 auto; width: 100%; }
  .minister-card .minister-card-body { padding: 20px 22px 22px; gap: 12px; }
  .minister-portfolio-line { font-size: 38px; }
  :root[lang="ta"] .minister-portfolio-line { font-size: 30px; }
  .minister-portfolio-sub { font-size: 13px; }
  .minister-portfolio-ta { font-size: 20px; }
  .minister-card .minister-card-nm { font-size: 26px; }
  :root[lang="ta"] .minister-card .minister-card-nm { font-size: 22px; }
}

/* --- ABOUT THE PARTY: vagai-and-stars background --- */
.about-tvk .about-bg-layer {
  background-image: url("assets/bg/vagai-and-stars.png");
  background-size: 110% auto;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .14;
  mix-blend-mode: screen;
}

/* --- TVK ICON STRIP: ensure the official flag (flag.png) is sized clean --- */
.tvk-icon-strip .strip-flag {
  max-width: 280px;
  background: rgba(0,0,0,.18);
  border-radius: 4px;
  padding: 4px;
}
.tvk-icon-strip .strip-flag img {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .tvk-icon-strip .strip-flag { max-width: 320px; padding: 6px; }
  .tvk-icon-strip .strip-flag img { max-height: 76px; }
}
@media (min-width: 1280px) {
  .tvk-icon-strip .strip-flag { max-width: 380px; padding: 8px; }
  .tvk-icon-strip .strip-flag img { max-height: 96px; }
}

/* ===========================================================
   FIX 7 — HEADING FONT WEIGHTS (Teko 500 supplemented from Google Fonts)
   Our local @font-face only provides 300 (Light). Google Fonts now
   supplies Teko 400/500/600/700, all surfacing under the same family
   name. Bump display weight 300 → 500 to better match tvkvijay.com.
   Tamil display (tamil010) is untouched.
   =========================================================== */
.hero-display,
.hero-display-ta,
.hero-name,
.section-title,
.minister-portfolio-line,
.minister-card .minister-card-nm,
.foot-wordmark .en,
.foot-wordmark .ta,
.foot-cta h3,
.tvk-mark .word .en,
.tvk-nav-desktop a {
  font-weight: 500;
}
/* Keep Tamil display script at its natural weight */
:root[lang="ta"] .hero-display,
:root[lang="ta"] .hero-display-ta,
:root[lang="ta"] .hero-name,
:root[lang="ta"] .section-title,
:root[lang="ta"] .minister-card .minister-card-nm,
:root[lang="ta"] .minister-portfolio-line,
:root[lang="ta"] .foot-wordmark .ta {
  font-weight: 400;
}

/* ===========================================================
   FIX 4 — Compress ministers cards. Photo is now a 4/5 portrait crop
   (taller than wide) with object-position pushed UP so the FACE stays
   in frame — previous 16/10 landscape was chopping chins/foreheads.
   Body padding tightened to keep TOTAL card height roughly unchanged.
   =========================================================== */
.minister-card {
  max-height: 560px;
}
.minister-card-portrait {
  /* iOS Safari has a documented bug where `aspect-ratio` combined with
     `max-height` on a grid item shrinks the WIDTH instead of clamping the
     height (WebKit 215327). On a 360px card, that turned this element into
     a 224×280 box with ~136px of empty cream on the right. Chrome/Firefox
     clamped height and kept width:100% as expected.
     Fix: drop aspect-ratio entirely. Explicit width + height = identical
     box on every engine. */
  width: 100%;
  height: 280px;
  max-height: none;
  aspect-ratio: auto;
  display: block;
}
.minister-card-portrait img {
  object-fit: cover;
  /* Push focal point UP so faces (top 40-50% of the source) sit in the
     visible crop. 22% vertical = face roughly centered in the visible area. */
  object-position: center 22%;
}
.minister-card .minister-card-body {
  padding: 12px 14px 14px;
  gap: 6px;
}
.minister-card-badges { padding: 8px 14px; }
.minister-card-badges .minister-card-ac,
.minister-card-badges .minister-card-oath {
  font-size: 10px;
  padding: 3px 8px;
}
.minister-portfolio-display { margin: 2px 0 2px; gap: 1px; }
.minister-portfolio-line {
  font-size: clamp(16px, 4.2vw, 22px) !important;
  line-height: 1.0;
  padding: 0;
  letter-spacing: 0.02em;
}
:root[lang="ta"] .minister-portfolio-line {
  font-size: clamp(14px, 3.6vw, 20px) !important;
  line-height: 1.15;
}
.minister-portfolio-sub {
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.minister-portfolio-ta {
  font-size: 12px;
  margin-top: 6px;
  padding-top: 6px;
  line-height: 1.25;
}
.minister-card .minister-card-nm {
  font-size: 17px !important;
  margin-top: 2px;
  line-height: 1.05;
}
:root[lang="ta"] .minister-card .minister-card-nm {
  font-size: 16px !important;
}
.minister-card .minister-card-nm-alt { font-size: 11px; line-height: 1.3; }
/* Mobile pill — slightly tighter than desktop but still a real button. */
.minister-card-cta {
  font-size: 11px;
  padding: 8px 14px;
}

@media (min-width: 768px) {
  .minister-card { max-height: 540px; }
  .minister-card-portrait { height: 300px; max-height: none; }
  .minister-card .minister-card-body { padding: 14px 16px 16px; gap: 8px; }
  .minister-portfolio-line { font-size: clamp(20px, 3vw, 24px) !important; }
  .minister-card .minister-card-nm { font-size: 19px !important; }
}
@media (min-width: 1280px) {
  .minister-card { max-height: 560px; }
  .minister-card-portrait { height: 320px; max-height: none; }
  .minister-card .minister-card-body { padding: 16px 18px 18px; gap: 8px; }
  .minister-portfolio-line { font-size: 24px !important; }
  :root[lang="ta"] .minister-portfolio-line { font-size: 21px !important; }
  .minister-portfolio-sub { font-size: 12px; }
  .minister-portfolio-ta { font-size: 14px; }
  .minister-card .minister-card-nm { font-size: 21px !important; }
}

/* ===========================================================
   FIX 1 — Five principles strip now lives INSIDE the hero, full-bleed
   bottom band. Deep-red continues from the hero (transparent so the
   hero's radial gradient shows through). Labels and icon ring are gold.
   The legacy standalone .principles-strip-sec is no longer rendered,
   but left as transparent in case any other surface references it.
   =========================================================== */
.principles-strip-sec { display: none; }

.hero-principles-band {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  padding: 22px var(--section-px) 26px;
  background: linear-gradient(180deg, rgba(63,6,8,0) 0%, rgba(63,6,8,.55) 60%, rgba(63,6,8,.85) 100%);
  border-top: 1px solid rgba(255,216,74,.32);
  border-bottom: 1px solid rgba(255,216,74,.32);
}
.principles-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.principle-card {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 8px;
  min-width: 0;
}
.principle-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4A0810, #220305);
  border: 1.5px solid var(--gold-400);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,216,74,.25);
}
.principle-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.principle-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--gold-400);
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
:root[lang="ta"] .principle-label {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--gold-400);
}
@media (min-width: 480px) {
  .principles-strip { gap: 14px; }
  .principle-icon { width: 64px; height: 64px; }
}
@media (min-width: 768px) {
  .hero-principles-band { padding-top: 28px; padding-bottom: 32px; }
  .principles-strip { gap: 18px; }
  .principle-icon { width: 76px; height: 76px; }
  .principle-label { font-size: 12px; }
  :root[lang="ta"] .principle-label { font-size: 14px; }
}
@media (min-width: 1280px) {
  .hero-principles-band { padding-top: 34px; padding-bottom: 40px; }
  .principles-strip { gap: 28px; max-width: 1200px; }
  .principle-icon { width: 92px; height: 92px; border-width: 2px; }
  .principle-label { font-size: 13px; }
  :root[lang="ta"] .principle-label { font-size: 15px; }
}

/* ===========================================================
   FIX 5b — Five Pillars of the Movement (real leader portraits).
   Large circular photos, leader names below. No principle labels.
   =========================================================== */
.ideology-leaders-sec .leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 8px;
}
/* FIX 4 — Kill the white card background behind each Five-Pillars leader
   portrait. Earlier rule at line ~789 (legacy ".leader-card") applied
   background:#fff + border + box-shadow site-wide; here we scope-override
   it inside the ideology section so each gold-ringed circular portrait
   floats directly on the deep-red section background. */
.ideology-leaders-sec .leader-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 10px;
}
.leader-portrait {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--red-700), var(--red-900));
  border: 4px solid var(--gold-400);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.6), 0 0 0 2px rgba(63,6,8,.6);
  position: relative;
  flex: none;
  display: block;
}
@media (min-width: 900px) {
  .leader-portrait { max-width: 180px; border-width: 4px; }
}
@media (min-width: 1280px) {
  .leader-portrait { max-width: 200px; border-width: 5px; }
}
.leader-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.leader-portrait-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--gold-400);
}
.leader-name-en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
}
.leader-name-ta {
  font-family: var(--font-display-ta);
  font-weight: 400;
  font-size: 14px;
  color: var(--gold-200);
  line-height: 1.25;
}
:root[lang="ta"] .leader-name-en {
  text-transform: none;
  font-weight: 400;
  font-size: 18px;
}
:root[lang="ta"] .leader-name-ta {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gold-200);
}
/* Center the lone 5th card on a 2-col grid */
.ideology-leaders-sec .leaders-grid > .leader-card:nth-child(5):nth-last-child(1) {
  grid-column: 1 / -1;
}
@media (min-width: 600px) {
  .ideology-leaders-sec .leaders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .ideology-leaders-sec .leaders-grid > .leader-card:nth-child(5):nth-last-child(1) {
    grid-column: auto;
  }
}
@media (min-width: 900px) {
  .ideology-leaders-sec .leaders-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
  .leader-portrait { width: 180px; height: 180px; }
  .leader-name-en { font-size: 18px; }
  .leader-name-ta { font-size: 16px; }
}
@media (min-width: 1280px) {
  .leader-portrait { width: 220px; height: 220px; }
  .leader-name-en { font-size: 20px; }
  .leader-name-ta { font-size: 18px; }
}

/* ===========================================================
   FIX 6 — About the Party redesign with Action Plan herobanner +
   Flag Description sub-section.
   =========================================================== */
.about-tvk.about-tvk-actionplan {
  position: relative;
  overflow: hidden;
}
/* Override prior background-image cascade so the herobanner shows */
.about-tvk.about-tvk-actionplan {
  background-image: none;
}
.about-tvk-actionplan .about-actionplan-bg {
  position: absolute; inset: 0;
  background-image: url("assets/hero-official/action-plan-herobanner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.about-tvk-actionplan .about-actionplan-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(63,6,8,.78) 0%, rgba(90,12,18,.86) 60%, rgba(63,6,8,.92) 100%);
  pointer-events: none;
  z-index: 0;
}
.about-tvk-actionplan > * { position: relative; z-index: 1; }
/* Hide the older about-bg-layer if it's still in DOM elsewhere */
.about-tvk-actionplan .about-bg-layer { display: none; }

.about-tvk-actionplan .about-pledge-center {
  max-width: 720px;
  margin: 18px auto 0;
}

.flag-feature {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.flag-feature-img {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border: 2px solid var(--gold-400);
  border-radius: var(--r-3);
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.6);
}
.flag-feature-img img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
.flag-feature-text { display: flex; flex-direction: column; gap: 12px; }
.flag-feature-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-400);
}
:root[lang="ta"] .flag-feature-eyebrow {
  font-weight: 400;
  text-transform: none;
  letter-spacing: .04em;
  font-size: 13px;
}
.flag-feature-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 7vw, 44px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  line-height: 1;
}
:root[lang="ta"] .flag-feature-title {
  font-weight: 400;
  text-transform: none;
  font-size: clamp(26px, 5.4vw, 36px);
  line-height: 1.15;
}
.flag-feature-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 0 6px;
  max-width: 52ch;
}
.flag-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}
.flag-card {
  display: grid;
  /* First column auto-sizes to the cue (56px mobile, 64px desktop), so the
     cue never overflows into the body column. Body text wraps inside its
     own 1fr track and stays clear of the disc. minmax(0, 1fr) prevents the
     body from forcing a track to grow beyond its share. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line-on-red);
  border-radius: var(--r-2);
  padding: 14px 16px;
}
@media (min-width: 768px) {
  .flag-card { gap: 18px; padding: 16px 20px; }
}
/* Flag-card cue — shared sizing for both swatch and image variants. */
.flag-card-cue {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.35);
  overflow: hidden;
  background: var(--red-900);
  display: flex; align-items: center; justify-content: center;
}
.flag-card-cue-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
@media (min-width: 768px) {
  .flag-card-cue { width: 64px; height: 64px; }
}
/* Legacy class kept for any cached references — same sizing pattern */
.flag-card-swatch {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.flag-card-swatch img {
  width: 60%; height: 60%; object-fit: contain;
  filter: brightness(1.15);
}
.flag-card-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-400);
  line-height: 1.1;
  margin-bottom: 4px;
}
:root[lang="ta"] .flag-card-h {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
.flag-card-b {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.84);
}
.flag-source {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
:root[lang="ta"] .flag-source {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
@media (min-width: 900px) {
  .flag-feature {
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: center;
  }
  .flag-feature-img { padding: 28px; }
  .flag-feature-img img { max-width: 100%; }
}
@media (min-width: 1280px) {
  .flag-feature { gap: 48px; max-width: 1200px; margin-left: auto; margin-right: auto; }
}