/* =========================================================
   HARD PAGE FREEZE — Prevent layout flash on mobile
========================================================= */

html.is-loading body > *:not(#page-loader){
  visibility: hidden;
}

html.is-loading body{
  overflow: hidden;
}



/* =========================================================
   PAGE LOADER — Mobile-safe
========================================================= */

html.is-loading,
body.is-loading{
  overflow: hidden;
  height: 100%;
}

#page-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;

  width: 100vw;
  height: 100dvh;

  display: grid;
  place-items: center;

  background:
    radial-gradient(900px 600px at 50% 40%, rgba(119,183,43,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));

  transition: opacity 420ms ease, visibility 420ms ease;
}


.dark #page-loader{
  background:
    radial-gradient(900px 600px at 50% 40%, rgba(119,183,43,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,18,15,.96), rgba(7,18,15,.92));
}

/* Only apply blur where supported (mobile Safari can be picky) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #page-loader{
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
  }
}

#page-loader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner{
  position: relative;
  display: grid;
  place-items: center;
}

.loader-inner::before{
  content:"";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119,183,43,.22), transparent 65%);
  filter: blur(18px);
}

.loader-logo{
  width: 110px;
  height: auto;
  position: relative;
  z-index: 1;
  animation: loader-breathe 2.6s ease-in-out infinite;
}

@keyframes loader-breathe{
  0%{ transform: scale(1); opacity: .86; }
  50%{ transform: scale(1.04); opacity: 1; }
  100%{ transform: scale(1); opacity: .86; }
}






















/* =========================
   CIVIC HEADER — floating glass capsule
========================= */

.civic-header {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 100;

  /* Capsule shape */
  border-radius: 18px;

  /* True glass */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.88),
      rgba(255,255,255,0.62)
    );
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);

  /* Depth */
  box-shadow:
    0 18px 50px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(255,255,255,0.18);

  border: 1px solid rgba(255,255,255,0.38);

  /* Size */
  height: 52px;

  /* Prevent text selection jitter */
  user-select: none;
}

/* Dark mode glass */
.dark .civic-header {
  background:
    linear-gradient(
      180deg,
      rgba(12,16,14,0.82),
      rgba(12,16,14,0.56)
    );
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Inner layout */
.civic-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0 .9rem;

  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--text-dark);
}
.civic-inner{
  justify-content: center;
  text-align: center;
}

/* Date chip — glass inside glass */
.civic-date {
  padding: .28rem .6rem;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(119,183,43,0.26),
      rgba(119,183,43,0.14)
    );
  border: 1px solid rgba(119,183,43,0.38);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45);

  font-weight: 600;
  white-space: nowrap;
}

/* Dark mode date chip */
.dark .civic-date {
  background:
    linear-gradient(
      135deg,
      rgba(119,183,43,0.20),
      rgba(119,183,43,0.10)
    );
  border-color: rgba(119,183,43,0.28);
}

/* Name — anchor */
.civic-name {
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* Type — secondary */
.civic-type {
  opacity: .75;
  white-space: nowrap;
}

/* Specular highlight sweep (very subtle, Apple‑like) */
.civic-header::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: translateX(-28%) rotate(8deg);
  opacity: .7;
  pointer-events: none;
}

@media (max-width: 360px){
  .civic-header{
    height: auto;
    padding: 6px 0;
  }

  .civic-inner{
    flex-direction: column;
    gap: .3rem;
    padding: .55rem .8rem;
  }

  /* Date becomes the visual anchor */
  .civic-date{
    font-size: .78rem;
    padding: .28rem .65rem;
    font-weight: 700;
  }

  .civic-name{
    font-size: .92rem;
    letter-spacing: .06em;
  }

  .civic-type{
    font-size: .82rem;
    opacity: .85;
  }
}











/* =========================================================
   GLASS MENU v1 — stable layout + iOS-safe FAB + real footer
   Works with your exact HTML (no structure changes)
========================================================= */

/* ---------- FAB: must always be visible/clickable ---------- */
.menu-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;

  z-index: 2147483647;
  pointer-events: auto;

  isolation: isolate;          /* prevents backdrop-filter stacking weirdness */
  transform: translateZ(0);    /* iOS fixed-position stability */

  width: 56px;
  height: 56px;
  padding: 0;

  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(255,255,255,0.34);

  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.62));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);

  box-shadow:
    var(--shadow-strong),
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(255,255,255,0.18);

  display: grid;
  place-items: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dark .menu-fab{
  border-color: rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(12,16,14,0.86), rgba(12,16,14,0.56));
}

/* Hamburger → X */
.menu-icon{ position: relative; width: 22px; height: 16px; }
.menu-icon .bar{
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--green-dark);
  transition: transform 260ms var(--ease), opacity 180ms ease, top 260ms var(--ease);
}
.dark .menu-icon .bar{ background: rgba(255,255,255,0.92); }
.menu-icon .bar-1{ top: 0; }
.menu-icon .bar-2{ top: 7px; }
.menu-icon .bar-3{ top: 14px; }

.menu-fab.is-open .bar-1{ top: 7px; transform: rotate(45deg); }
.menu-fab.is-open .bar-2{ opacity: 0; }
.menu-fab.is-open .bar-3{ top: 7px; transform: rotate(-45deg); }

/* ---------- Overlay ---------- */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;

  opacity: 0;
  pointer-events: none;

  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(119,183,43,0.14), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.28);

  transition: opacity 260ms ease;
}

.dark .menu-overlay{
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(119,183,43,0.10), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.44);
}

.menu-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay.is-closing{
  opacity: 0;
  pointer-events: none;
}

/* ---------- Panel: vertical system (content + footer) ---------- */
.menu-panel{
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 76px;
  border-radius: 28px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.62));

  backdrop-filter: blur(30px) saturate(1.25);
  -webkit-backdrop-filter: blur(30px) saturate(1.25);

  box-shadow:
    0 40px 140px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.62);

  transform-origin: calc(100% - 34px) calc(100% - 34px);
  transform: translate3d(0, 18px, 0) scale(0.985);
  opacity: 0;

  transition: transform 720ms var(--ease), opacity 260ms ease;
}

.dark .menu-panel{
  border-color: rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(12,16,14,0.86), rgba(12,16,14,0.56));
  box-shadow:
    0 40px 140px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.menu-overlay.is-open .menu-panel{
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.menu-overlay.is-closing .menu-panel{
  transform: translate3d(0, 22px, 0) scale(0.975);
  opacity: 0;
}

/* Watermark */
.menu-watermark{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.dark .menu-watermark{ opacity: .05; }
.menu-watermark img{
  width: min(62vw, 320px);
  filter: blur(18px) saturate(1.05);
  transform: translateY(10px) rotate(-6deg);
}

/* =========================================================
   CONTENT AREA: scrollable list (modern text + separators)
   (No images required—if JS sets --card-bg, it will be ignored)
========================================================= */

.menu-grid{
  position: relative;
  z-index: 2;

  flex: 1;
  min-height: 0;
  overflow: auto;

  padding: 18px 28px 10px; /* slightly more right padding */

  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* ← THIS moves items to the right */
  gap: 0;
}


/* Each item becomes a “glass row” */
.menu-card{
  position: relative;
  text-decoration: none;
  color: var(--text-dark);

  padding: 18px 6px 18px 6px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  border-radius: 18px;

  transform: translate3d(0, 14px, 0);
  opacity: 0;
  filter: blur(6px);

  transition:
    transform 720ms var(--ease),
    opacity 260ms ease,
    filter 720ms var(--ease);
}

.dark .menu-card{ color: rgba(255,255,255,0.92); }

/* Subtle glass hover/press */
.menu-card::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);

  opacity: 0;
  transition: opacity 220ms ease;
}

.dark .menu-card::before{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

.menu-card:active::before{ opacity: 1; }

/* Separator line between items (not a “button”) */
.menu-card::after{
  content:"";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.14), rgba(0,0,0,0));
  opacity: .9;
}

.dark .menu-card::after{
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0));
}

/* Typography */
.menu-card span{
  position: relative;
  z-index: 1;

  font-family: var(--font-body);
  font-weight: 950;
  letter-spacing: .01em;
  font-size: 1.25rem;
  line-height: 1.1;

  padding: 0 10px;
}

/* “Home” gets hero emphasis without breaking layout */
.menu-card[data-bg="0"]{
  padding: 22px 6px 22px 6px;
}
.menu-card[data-bg="0"] span{
  font-size: 1.55rem;
  letter-spacing: .02em;
}

/* Reveal wave */
.menu-overlay.is-open .menu-card{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0);
  transition-delay: calc(120ms + (var(--i, 0) * 55ms));
}

.menu-overlay.is-closing .menu-card{
  transform: translate3d(0, 10px, 0);
  opacity: 0;
  filter: blur(6px);
  transition-delay: calc((6 - var(--i, 0)) * 35ms);
}

/* =========================================================
   FOOTER: social centered above theme, pinned to bottom
========================================================= */

.menu-social{
  position: relative;
  z-index: 3;

  padding: 10px 18px 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.social-btn{
  width: 46px;
  height: 46px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.dark .social-btn{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.social-btn img{
  width: 20px;
  height: 20px;
  opacity: .92;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

/* Theme switch pinned at bottom */
.menu-theme{
  position: relative;
  z-index: 3;

  margin: 0 18px 18px;
  height: 54px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);

  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;

  box-shadow:
    0 14px 40px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);

  transform: translate3d(0, 10px, 0);
  opacity: 0;
  transition: transform 520ms var(--ease), opacity 260ms ease;
}

.dark .menu-theme{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Thumb */
.menu-theme::before{
  content:"";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;

  background: rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 10px 26px rgba(0,0,0,0.10);

  transform: translateX(var(--theme-x, 100%));
  transition: transform 420ms var(--ease), background 180ms ease;
}

.dark .menu-theme::before{
  background: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 26px rgba(0,0,0,0.34);
}

.theme-seg{
  position: relative;
  z-index: 1;

  border: 0;
  background: transparent;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text-dark);
  opacity: .72;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dark .theme-seg{ color: rgba(255,255,255,0.92); }
.theme-seg[aria-pressed="true"]{ opacity: 1; }

/* Footer reveal timing */
.menu-overlay.is-open .menu-theme{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 420ms;
}

/* Body scroll lock */
body.menu-open{ overflow: hidden; }

/* iPhone SE / short screens: tighten paddings + type */
@media (max-height: 667px){
  .menu-grid{ padding: 14px 14px 8px; }
  .menu-card{ padding: 16px 4px; }
  .menu-card span{ font-size: 1.12rem; }
  .menu-card[data-bg="0"] span{ font-size: 1.35rem; }
  .menu-social{ padding: 8px 14px 8px; }
  .menu-theme{ margin: 0 14px 14px; height: 52px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu-overlay, .menu-panel, .menu-card, .menu-theme, .menu-icon .bar{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}










































/* =========================
   HERO — tactile swipe deck (MOBILE) — BRIGHT GLASS SYSTEM
========================= */

.hero-deck{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;

  --dragX: 0px;
  --dragY: 0px;
  --pX: 0;
  --pY: 0;
  --tilt: 0deg;
  --lift: 0px;
}

/* viewport */
.deck-viewport{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3.5svh 3.5vw 6svh; /* slightly taller */
  touch-action: pan-y;
}

.deck-track{
  position:relative;
  width:100%;
  height:100%;
  max-width: 96vw;
  max-height: 93svh;
  transform: translate3d(calc(var(--dragX) * 0.06), calc(var(--dragY) * 0.03), 0);
  will-change: transform;
}

/* cards */
.deck-card{
  position:absolute;
  inset:0;
  border-radius: 30px;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  will-change: transform, opacity;

  /* brighter, cleaner shadow (less “black hole”) */
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 10px 30px rgba(0,0,0,.18);
}

/* card “glass edge” so it matches header/caption material */
.deck-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* thin edge + inner highlight */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 0 0 1px rgba(255,255,255,0.14);
}

/* BRIGHTENING VEIL (replaces the heavy dark vignette) */
.deck-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* daylight wash + gentle bottom readability (not dark) */
  background:
    radial-gradient(900px 520px at 70% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 62%),
    radial-gradient(700px 520px at 20% 30%, rgba(119,183,43,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
}

/* depth stack */
.deck-back{
  opacity: .22;
  filter: blur(1.4px) saturate(0.98) brightness(1.06);
  transform:
    translate3d(calc(-30px + (var(--dragX) * -0.05)), 26px, 0)
    rotate(calc(-6deg + (var(--pX) * -1.0deg)))
    scale(0.985);
}

.deck-mid{
  opacity: .52;
  filter: blur(0.7px) saturate(1.02) brightness(1.05);
  transform:
    translate3d(calc(-14px + (var(--dragX) * -0.09)), 12px, 0)
    rotate(calc(-2.8deg + (var(--pX) * -0.7deg)))
    scale(0.992);
}

/* front follows finger */
.deck-front{
  opacity: 1;
  filter: saturate(1.06) contrast(1.04) brightness(1.04);
  transform:
    translate3d(var(--dragX), calc(var(--dragY) + var(--lift)), 0)
    rotate(var(--tilt));
}

/* swish animation class (JS toggles) */
.deck-front.is-swish{
  transition: transform 360ms cubic-bezier(.2,.9,.25,1);
}

/* =========================
   Caption glass — SAME MATERIAL AS HEADER, tuned for bright deck
========================= */

.deck-caption{
  position:absolute;
  left: 5.5%;
  right: 28%;
  bottom: 7%;
  padding: 1.05rem 1.05rem 1.0rem;
  border-radius: 18px;
  overflow:hidden;

  /* Apple glass */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.64));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);

  border: 1px solid rgba(255,255,255,0.40);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(255,255,255,0.18);
}

/* specular sweep */
.deck-caption::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: translateX(-28%) rotate(8deg);
  opacity: .70;
  pointer-events:none;
}

/* inner glow + edge */
.deck-caption::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 18% 10%, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.00));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events:none;
}

/* Dark mode: keep deck brighter than before, but still readable */
.dark .deck-card::after{
  background:
    radial-gradient(900px 520px at 70% 18%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 62%),
    radial-gradient(700px 520px at 20% 30%, rgba(119,183,43,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.28));
}

.dark .deck-caption{
  background:
    linear-gradient(180deg, rgba(12,16,14,0.82), rgba(12,16,14,0.56));
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.dark .deck-caption::after{
  background:
    radial-gradient(120% 90% at 18% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

/* =========================
   Caption typography
========================= */

.caption-chip{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  padding:.28rem .6rem;
  border-radius:999px;
  font-size:.86rem;
  margin-bottom:.7rem;
  white-space: nowrap;

  background: linear-gradient(135deg, rgba(119,183,43,0.26), rgba(119,183,43,0.14));
  border: 1px solid rgba(119,183,43,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.dark .caption-chip{
  background: linear-gradient(135deg, rgba(119,183,43,0.20), rgba(119,183,43,0.10));
  border-color: rgba(119,183,43,0.28);
}

.caption-title{
  margin:0 0 .5rem;
  font-size: clamp(1.95rem, 7.0vw, 2.55rem);
  line-height:1.02;
  letter-spacing:.04em;
  color: var(--text-dark);
}

.caption-sub{
  margin:0 0 .85rem;
  line-height:1.55;
  color: var(--text-dark);
  opacity:.92;
}

.caption-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}

.caption-cta{
  display:inline-block;
  padding:.82rem 1.1rem;
  border-radius:999px;
  background: var(--green-dark);
  color:#fff;
  font-weight:700;
}

.caption-tagline{
  font-weight:650;
  opacity:.9;
  color: var(--text-dark);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .deck-front.is-swish{ transition:none !important; }
  .deck-track, .deck-card{ transform:none !important; }
}
















/* =========================================================
   SECTION 1 — Ergebnis & Stichwahl (mobile-first glass)
   Respects your base :root variables + html.dark contract
========================================================= */

.facts{
  padding: 28px 14px 34px;
  max-width: 980px;
  margin: 0 auto;
}

.facts-head{
  padding: 10px 6px 18px;
}

.facts-kicker{
  margin: 0 0 6px;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
  opacity: .9;
}

.facts-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.facts-sub{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  max-width: 62ch;
}

.dark .facts-title{ color: rgba(255,255,255,.92); }
.dark .facts-sub,
.dark .facts-kicker{ color: rgba(255,255,255,.72); }

.facts-grid{
  display: grid;
  gap: 14px;
}

/* ---------- Glass card ---------- */
.glass-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));

  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);

  box-shadow: var(--shadow-strong);
  padding: 16px 16px 14px;
}

.dark .glass-card{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.52));
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
}

.glass-card::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,0) 60%
  );
  transform: translateX(-18%) rotate(10deg);
  opacity: .7;
  pointer-events:none;
}

.card-top{ padding-bottom: 10px; }
.card-title{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: 1.05rem;
}
.card-note{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.35;
  font-size: .92rem;
}

.dark .card-title{ color: rgba(255,255,255,.92); }
.dark .card-note{ color: rgba(255,255,255,.70); }

/* ---------- Card A: Stichwahl split ---------- */
.runoff-split{
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  gap: 10px;
  padding: 10px 0 6px;
}

.runoff-divider{
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,.12),
    rgba(0,0,0,0)
  );
  opacity: .9;
}

.dark .runoff-divider{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.14),
    rgba(255,255,255,0)
  );
}

.runoff-side{
  border-radius: 18px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.dark .runoff-side{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.runoff-name{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 850;
  color: var(--text-dark);
  opacity: .92;
  font-size: .92rem;
}

.dark .runoff-name{ color: rgba(255,255,255,.86); }

.runoff-val{
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: 1.55rem;
  line-height: 1;
}

.dark .runoff-val{ color: rgba(255,255,255,.92); }

.runoff-unit{
  font-size: .95rem;
  opacity: .75;
  margin-left: 4px;
}

.runoff-line{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}

.dark .runoff-line{ background: rgba(255,255,255,.08); }

.runoff-fill{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 900ms var(--ease);
}

.runoff-fill.is-eff{
  background: linear-gradient(90deg, rgba(1,57,20,.55), rgba(1,57,20,.92));
}
.runoff-fill.is-def{
  background: linear-gradient(90deg, rgba(12,18,16,.55), rgba(12,18,16,.92));
}

.card-foot{ padding-top: 10px; }
.card-math{
  margin: 0 0 6px;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.35;
  font-size: .92rem;
}
.dark .card-math{ color: rgba(255,255,255,.72); }

.card-micro{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  opacity: .9;
  font-size: 1.2rem;
}
.dark .card-micro{ color: rgba(255,255,255,.70); }

/* ---------- Ranked list (micro-bars) ---------- */
.rank{
  display: grid;
  gap: 10px;
  padding: 6px 0 10px;
}

.rank-item{
  position: relative;
  border-radius: 18px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.dark .rank-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.rank-top{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.rank-name{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--text-dark);
  font-size: .98rem;
}

.dark .rank-name{ color: rgba(255,255,255,.90); }

.rank-val{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 950;
  color: var(--text-dark);
  font-size: .98rem;
}

.dark .rank-val{ color: rgba(255,255,255,.92); }

.rank-bar{
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}

.dark .rank-bar{ background: rgba(255,255,255,.08); }

.rank-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 900ms var(--ease);
  background: linear-gradient(90deg, rgba(119,183,43,.35), rgba(119,183,43,.92));
}

.rank-meta{
  margin: 8px 0 0;
  font-family: var(--font-body);
  color: var(--muted);
  font-size: .86rem;
  opacity: .95;
}

.dark .rank-meta{ color: rgba(255,255,255,.68); }

/* “Die Ansbacher” highlight (subtle, not loud) */
.rank-item.is-ansbacher .rank-fill{
  background: linear-gradient(90deg, rgba(1,57,20,.35), rgba(1,57,20,.92));
}
.rank-item.is-ansbacher{
  box-shadow: inset 0 0 0 1px rgba(119,183,43,.22);
}

/* Toggle button */
.rank-more{
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 12px 12px;
  font-family: var(--font-body);
  font-weight: 900;
  cursor: pointer;
}

.dark .rank-more{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
}

/* Stats row */
.stats-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 6px;
}

.stat{
  border-radius: 18px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.dark .stat{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.stat-k{
  margin: 0 0 6px;
  font-family: var(--font-body);
  color: var(--muted);
  font-weight: 850;
  font-size: .86rem;
}

.dark .stat-k{ color: rgba(255,255,255,.68); }

.stat-v{
  margin: 0 0 2px;
  font-family: var(--font-body);
  color: var(--text-dark);
  font-weight: 950;
  font-size: 1.05rem;
}

.dark .stat-v{ color: rgba(255,255,255,.92); }

.stat-d{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  font-size: .86rem;
  opacity: .9;
}

.dark .stat-d{ color: rgba(255,255,255,.66); }

.source{
  margin: 12px 0 0;
  font-family: var(--font-body);
  color: var(--muted);
  font-size: .86rem;
  opacity: .9;
}

.dark .source{ color: rgba(255,255,255,.62); }

/* ---------- Reveal ---------- */
.reveal{
  transform: translateY(14px);
  opacity: 0;
  filter: blur(6px);
  transition: transform 700ms var(--ease), opacity 260ms ease, filter 700ms var(--ease);
}

.reveal.is-in{
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

/* ---------- Desktop layout ---------- */
@media (min-width: 860px){
  .facts-grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  #card-runoff{ grid-column: 1 / -1; }
}

/* iPhone SE friendliness */
@media (max-height: 667px){
  .facts{ padding-top: 22px; }
  .glass-card{ padding: 14px 14px 12px; }
  .stats-row{ grid-template-columns: 1fr; }
}






/* =========================================================
   SECTION 2 — People (glass cards + bio overlay)
   Respects base variables + html.dark contract
========================================================= */

.people{
  padding: 28px 14px 34px;
  max-width: 980px;
  margin: 0 auto;
}

.people-head{
  padding: 10px 6px 18px;
}

.people-kicker{
  margin: 0 0 6px;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
  opacity: .9;
}

.people-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.people-sub{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  max-width: 62ch;
}

.dark .people-title{ color: rgba(255,255,255,.92); }
.dark .people-sub,
.dark .people-kicker{ color: rgba(255,255,255,.72); }

/* Grid */
.people-grid{
  display: grid;
  gap: 14px;
}

/* Desktop: featured + two columns */
@media (min-width: 860px){
  .people-grid{
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
  .person-card.is-featured{
    grid-column: 1 / -1;
  }
}

/* Card */
.person-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));

  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);

  box-shadow: var(--shadow-strong);
  min-height: 260px;

  transform: translateY(14px);
  opacity: 0;
  filter: blur(6px);
  transition: transform 700ms var(--ease), opacity 260ms ease, filter 700ms var(--ease);
}

.person-card.is-in{
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

.dark .person-card{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.52));
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
}

/* Image layer */
.person-media{
  position: absolute;
  inset: 0;
  background-size: cover;
background-position: center 20%;
  transform: scale(1.02);
}

.person-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(119,183,43,.18), rgba(0,0,0,0) 55%),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.10) 55%, rgba(0,0,0,0));
}

/* Content */
.person-body{
  position: relative;
  z-index: 2;
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
  min-height: 260px;
  align-content: end;
}

.person-top{
  display: grid;
  gap: 6px;
}

.person-name{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 950;
  letter-spacing: .01em;
  color: rgba(255,255,255,.94);
  font-size: 1.25rem;
  line-height: 1.1;
}

.person-role{
  margin: 0;
  font-family: var(--font-body);
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.25;
}

.person-focus{
  margin: 0;
  font-family: var(--font-body);
  color: rgba(255,255,255,.86);
  font-weight: 850;
  font-size: .98rem;
  line-height: 1.35;
}

/* Featured card gets more breathing room */
.person-card.is-featured{
  min-height: 320px;
}
.person-card.is-featured .person-body{
  min-height: 420px;
  padding: 18px 18px 16px;
}
.person-card.is-featured .person-name{
  font-size: 1.55rem;
}
.person-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);

  font-family: var(--font-body);
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  font-size: .82rem;
}

/* Actions */
.person-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

.person-btn{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);

  border-radius: 16px;
  padding: 12px 12px;

  font-family: var(--font-body);
  font-weight: 950;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  -webkit-tap-highlight-color: transparent;
}

.person-btn:active{
  transform: translateY(1px);
}

/* Bio overlay (collapsed by default) */
.person-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;

  display: grid;
  align-content: end;

  padding: 16px;
  background:
    linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 60%, rgba(0,0,0,0));

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: transform 520ms var(--ease), opacity 220ms ease;
}

.person-card.is-open .person-overlay{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.person-overlay-panel{
  border-radius: 18px;
  padding: 14px 14px 12px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.person-bio{
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: rgba(255,255,255,.88);
  line-height: 1.45;
  font-size: .95rem;
}

.person-overlay-actions{
  display: flex;
  justify-content: flex-end;
}

.person-close{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 950;
  cursor: pointer;
}

/* iPhone SE friendliness */
@media (max-height: 667px){
  .person-card{ min-height: 280px; }
  .person-body{ min-height: 340px; }
  .person-name{ font-size: 1.15rem; }
  .person-focus{ font-size: .95rem; }
}















.vision-modal-inner {
  display: none;
}


/* =========================================================
   SECTION 3 — Vision (expandable glass strips)
========================================================= */

.vision{
  padding: 28px 14px 40px;
  max-width: 980px;
  margin: 0 auto;
}

.vision-head{
  padding: 10px 6px 18px;
}

.vision-kicker{
  margin: 0 0 6px;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
}

.vision-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.vision-sub{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  max-width: 62ch;
}

.dark .vision-title{ color: rgba(255,255,255,.92); }
.dark .vision-sub,
.dark .vision-kicker{ color: rgba(255,255,255,.72); }

/* List */
.vision-list{
  display: grid;
  gap: 12px;
}

/* Strip */
.vision-item{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));

  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);

  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s ease;
}

.dark .vision-item{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.52));
}

.vision-item.is-open{
  box-shadow: var(--shadow-strong);
}

/* Header row */
.vision-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 16px;
  cursor: pointer;
}

.vision-num{
  font-family: var(--font-body);
  font-weight: 950;
  font-size: 1.1rem;
  color: var(--green-dark);
}

.dark .vision-num{ color: var(--green-light); }

.vision-headline{
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--text-dark);
  font-size: 1.05rem;
}

.dark .vision-headline{ color: rgba(255,255,255,.92); }

.vision-teaser{
  font-family: var(--font-body);
  color: var(--muted);
  font-size: .92rem;
}

.dark .vision-teaser{ color: rgba(255,255,255,.72); }

.vision-toggle{
  font-size: 1.2rem;
  opacity: .6;
  transition: transform .3s var(--ease);
}

.vision-item.is-open .vision-toggle{
  transform: rotate(45deg);
}

/* Body */
.vision-body{
  padding: 0 16px 16px;
  display: none;
}

.vision-item.is-open .vision-body{
  display: block;
}

.vision-text{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  line-height: 1.5;
}

.dark .vision-text{ color: rgba(255,255,255,.86); }




/* =========================================================
   VISION LONGFORM (works for all 6 topics)
========================================================= */

.vision-longform{
  display: grid;
  gap: 18px;
  margin-top: 12px;
}

.vision-longform h3{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--text-dark);
}

.dark .vision-longform h3{
  color: rgba(255,255,255,.92);
}

.vision-longform .vision-lead{
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

.dark .vision-longform .vision-lead{
  color: rgba(255,255,255,.72);
}

.vision-longform section{
  display: grid;
  gap: 10px;
}

.vision-longform h4{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.dark .vision-longform h4{
  color: var(--green-light);
}

.vision-longform p{
  margin: 0;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-dark);
  padding-bottom: 20px;
}

.dark .vision-longform p{
  color: rgba(255,255,255,.86);
}

.vision-longform ul{
  list-style: none;
  padding: 0;
  padding-bottom: 30px;;
  margin: 4px 0 0;

  display: grid;
  gap: 10px;
}

.vision-longform li{
  position: relative;
  padding-left: 20px;

  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.dark .vision-longform li{
  color: rgba(255,255,255,.86);
}

.vision-longform li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;

  width: 6px;
  height: 6px;
  border-radius: 999px;

  background: var(--green-light);
  box-shadow: 0 0 0 2px rgba(119,183,43,.18);
}

.dark .vision-longform li::before{
  box-shadow: 0 0 0 2px rgba(119,183,43,.28);
}

.vision-longform .vision-claim{
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.dark .vision-longform .vision-claim{
  border-top-color: rgba(255,255,255,.12);
}

.vision-longform .vision-claim p{
  font-weight: 700;
}



















/* =========================================================
   PODCASTS — Focus stack (MOBILE)
   Click 1: focus   |   Click 2: open modal
========================================================= */

.podcasts{
  position: relative;
  padding: clamp(110px, 12vh, 150px) 6vw;
  background:
    radial-gradient(900px 700px at 50% 0%, rgba(119,183,43,.06), transparent 60%),
    var(--bg);
}

.podcasts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* ---------- Intro ---------- */

.podcasts-intro{
  padding: 26px 22px;
  border-radius: 34px;

  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);

  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 26px 90px rgba(0,0,0,.26);

  opacity: 0;
  transform: translateY(14px);
}

.dark .podcasts-intro{
  background: linear-gradient(180deg, rgba(12,16,14,.84), rgba(12,16,14,.56));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
}

.podcasts-intro.is-in{
  opacity: 1;
  transform: none;
  transition: opacity 650ms ease, transform 950ms cubic-bezier(.2,.8,.2,1);
}

.podcasts-kicker{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.dark .podcasts-kicker{ color: var(--green-light); }

.podcasts-title{
  font-size: clamp(1.9rem, 6vw, 2.35rem);
  line-height: 1.12;
  margin-bottom: 10px;
}

.podcasts-sub{
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   Stack container
========================================================= */

.podcasts-list{
  display: grid;
  gap: 14px;

  padding: 14px;
  border-radius: 38px;

  background:
    radial-gradient(820px 520px at 50% 20%, rgba(119,183,43,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));

  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);

  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 34px 140px rgba(0,0,0,.26);

  overflow: hidden;

  opacity: 0;
  transform: translateY(14px);
}

.dark .podcasts-list{
  background:
    radial-gradient(820px 520px at 50% 20%, rgba(119,183,43,.14), transparent 62%),
    linear-gradient(180deg, rgba(12,16,14,.62), rgba(12,16,14,.34));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 44px 180px rgba(0,0,0,.70);
}

.podcasts-list.is-in{
  opacity: 1;
  transform: none;
  transition: opacity 650ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   Cards: compact by default, expand when active
========================================================= */

.podcast-item{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
    transform-origin: top center;

  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 22px 80px rgba(0,0,0,.22);

  /* compact height */
  height: 120px;

  opacity: 0;
  transform: translateY(10px);

  transition:
    height 700ms cubic-bezier(.2,.8,.2,1),
    transform 700ms cubic-bezier(.2,.8,.2,1),
    box-shadow 650ms cubic-bezier(.2,.8,.2,1),
    filter 700ms cubic-bezier(.2,.8,.2,1),
    opacity 650ms ease;
}

.dark .podcast-item{
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.58));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 30px 120px rgba(0,0,0,.70);
}

.podcast-item.is-in{
  opacity: 1;
  transform: none;
}

/* active expands into a “mini player surface” */
.podcast-item.is-active{
  height: min(56vh, 420px);
  box-shadow: 0 34px 140px rgba(0,0,0,.30);
  filter: none;
    align-self: start;
}

.dark .podcast-item.is-active{
  box-shadow: 0 44px 180px rgba(0,0,0,.78);
}

/* when something is active, keep others calm */
.podcasts-list.has-active .podcast-item:not(.is-active){
  filter: saturate(.86) contrast(.96);
  opacity: .92;
}

/* =========================================================
   Link + media
========================================================= */

.podcast-link{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.podcast-media{
  position: absolute;
  inset: 0;
}

.podcast-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 15% center; /* try 18%–30% */
  transform: scale(1.06);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.podcast-item.is-active .podcast-thumb{
  transform: scale(1.12);
}

.podcast-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 420px at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));
  pointer-events:none;
}

/* =========================================================
   Integrated text
   - inactive: compact chip
   - active: full glass panel
========================================================= */

.podcast-body{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;

  border-radius: 22px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);

  transition:
    opacity 650ms ease,
    transform 800ms cubic-bezier(.2,.8,.2,1),
    padding 650ms ease,
    max-width 650ms ease;
}

.dark .podcast-body{
  background: rgba(12,16,14,.24);
  border-color: rgba(255,255,255,.10);
}

/* inactive chip */
.podcast-item:not(.is-active) .podcast-body{
  padding: 10px 12px;
  max-width: 78%;
  opacity: 1;
  transform: none;
}

.podcast-item:not(.is-active) .podcast-topline,
.podcast-item:not(.is-active) .podcast-meta{
  display: none;
}

.podcast-item:not(.is-active) .podcast-name{
  font-size: 1.02rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* active panel */
.podcast-item.is-active .podcast-body{
  padding: 14px 14px 14px;
  max-width: 100%;
  opacity: 1;
  transform: none;
}

.podcast-topline{
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 8px;
}

.podcast-name{
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 6px;
}

.podcast-meta{
  font-size: .92rem;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
}

/* =========================================================
   Play cue
========================================================= */

.podcast-play{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;

  width: 54px;
  height: 54px;
  border-radius: 20px;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 18px 70px rgba(0,0,0,.32);

  display: grid;
  place-items: center;

  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.dark .podcast-play{
  background: rgba(12,16,14,.72);
  border-color: rgba(255,255,255,.14);
}

.podcast-play::before{
  content:"";
  width: 0;
  height: 0;
  border-left: 14px solid var(--green-dark);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}
.dark .podcast-play::before{ border-left-color: var(--green-light); }

.podcast-item.is-active .podcast-play{
  transform: scale(1.06);
}

/* =========================================================
   YouTube modal — mobile tuned (NO scroll lock)
========================================================= */

.yt-modal{
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
}

.yt-modal.is-open{
  display: block;
}

.yt-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.66);
}

.yt-modal-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 92vw;
  border-radius: 26px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);

  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 44px 170px rgba(0,0,0,.62);
}

.dark .yt-modal-panel{
  background: linear-gradient(180deg, rgba(12,16,14,.86), rgba(12,16,14,.60));
  border-color: rgba(255,255,255,.12);
}

.yt-modal-close{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 44px;
  height: 44px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.70);
  color: var(--text-dark);

  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  z-index: 2;
}

.dark .yt-modal-close{
  background: rgba(12,16,14,.62);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

.yt-modal-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.10);
}

.yt-modal-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt-modal-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 16px;
}

.yt-modal-title{
  margin: 0;
  font-weight: 900;
  color: var(--text-dark);
  font-size: .98rem;
}
.dark .yt-modal-title{ color: rgba(255,255,255,.94); }

.yt-modal-open{
  font-weight: 900;
  text-decoration: none;
  color: var(--green-dark);
  white-space: nowrap;
}
.dark .yt-modal-open{ color: var(--green-light); }

/* Focus affordance: pulse play button only when active */
.podcast-item.is-active .podcast-play{
  animation: podcast-play-pulse 1.8s ease-in-out infinite;
}

@keyframes podcast-play-pulse{
  0%{
    transform: scale(1);
    box-shadow: 0 18px 70px rgba(0,0,0,.32);
  }
  50%{
    transform: scale(1.08);
    box-shadow: 0 22px 90px rgba(0,0,0,.42);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 18px 70px rgba(0,0,0,.32);
  }
}
/* Hide by default */
.podcast-play{
  opacity: 0;
  transform: scale(.92);
  transition: opacity 350ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
}

/* Show + pulse only when active */
.podcast-item.is-active .podcast-play{
  opacity: 1;
  transform: scale(1);
  animation: podcast-play-pulse 1.8s ease-in-out infinite;
}

/* Ensure inactive never animates */
.podcast-item:not(.is-active) .podcast-play{
  animation: none;
}






















/* =========================================================
   NEWS — Editorial glass capsules
========================================================= */

.news{
  padding: 28px 14px 40px;
  max-width: 980px;
  margin: 0 auto;
}

.news-head{
  padding: 10px 6px 18px;
}

.news-kicker{
  margin: 0 0 6px;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
}

.news-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.news-sub{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  max-width: 62ch;
}

.dark .news-title{ color: rgba(255,255,255,.92); }
.dark .news-sub,
.dark .news-kicker{ color: rgba(255,255,255,.72); }

/* List */
.news-list{
  display: grid;
  gap: 12px;
}

/* Item */
.news-item{
  border-radius: 22px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));

  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);

  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s ease, transform .3s ease;
}

.news-item:hover{
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
}

.dark .news-item{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.52));
}

/* Link */
.news-link{
  display: block;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: inherit;
}

/* Top */
.news-top{
  margin-bottom: 8px;
}

.news-source{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);

  font-family: var(--font-body);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-dark);
}

.dark .news-source{
  color: rgba(255,255,255,.92);
}

/* Headline */
.news-headline{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.25;
}

.dark .news-headline{ color: rgba(255,255,255,.92); }

/* Excerpt */
.news-excerpt{
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  font-size: .95rem;
}

.dark .news-excerpt{ color: rgba(255,255,255,.72); }

/* Footer */
.news-foot{
  display: flex;
  align-items: center;
  gap: 6px;

  font-family: var(--font-body);
  font-weight: 900;
  font-size: .9rem;
  color: var(--green-dark);
}

.dark .news-foot{ color: var(--green-light); }

.news-domain{
  opacity: .7;
}





/* =========================================================
   CONTACT & DONATION — calm glass panels
========================================================= */

.support{
  padding: 28px 14px 44px;
  max-width: 980px;
  margin: 0 auto;
}

.support-head{
  padding: 10px 6px 18px;
}

.support-kicker{
  margin: 0 0 6px;
  font-family: var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
}

.support-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-dark);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.support-sub{
  margin: 0;
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.45;
  max-width: 62ch;
}

.dark .support-title{ color: rgba(255,255,255,.92); }
.dark .support-sub,
.dark .support-kicker{ color: rgba(255,255,255,.72); }

/* Grid */
.support-grid{
  display: grid;
  gap: 14px;
}

@media (min-width: 860px){
  .support-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Card */
.support-card{
  border-radius: 24px;
  padding: 18px 18px 16px;

  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));

  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);

  box-shadow: var(--shadow-soft);
}

.dark .support-card{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,14,.82), rgba(12,16,14,.52));
}

.support-card-title{
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 950;
  color: var(--text-dark);
  font-size: 1.1rem;
}

.dark .support-card-title{ color: rgba(255,255,255,.92); }

/* Contact */
.support-address{
  font-style: normal;
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: var(--text-dark);
}

.dark .support-address{ color: rgba(255,255,255,.86); }

.support-contact{
  margin: 0 0 12px;
  font-family: var(--font-body);
  color: var(--muted);
}

.support-contact a{
  color: inherit;
  text-decoration: underline;
}

.support-note{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(119,183,43,.12);
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--green-dark);
}

.dark .support-note{
  background: rgba(119,183,43,.18);
  color: var(--green-light);
}

/* Donation */
.support-intro{
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: var(--muted);
}

.donation-summary p{
  margin: 0 0 6px;
  font-family: var(--font-body);
  color: var(--text-dark);
}

.dark .donation-summary p{ color: rgba(255,255,255,.86); }

.donation-toggle{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 12px 12px;
  font-family: var(--font-body);
  font-weight: 950;
  cursor: pointer;
}

.dark .donation-toggle{
  color: rgba(255,255,255,.92);
}

.donation-details{
  margin-top: 12px;
  font-family: var(--font-body);
  color: var(--muted);
}

.dark .donation-details{ color: rgba(255,255,255,.72); }

.donation-details ul{
  padding-left: 18px;
}










/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  padding: 28px 14px 96px; /* space for FAB */
  background: transparent;
}

.footer-inner{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.footer-brand{
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-logo{
  width: 44px;
  height: auto;
}

.footer-brand-text{
  display: flex;
  flex-direction: column;
}

.party-name{
  font-weight: 950;
  color: var(--text-dark);
}

.footer-tagline{
  font-size: .9rem;
  color: var(--muted);
}

.dark .party-name{ color: rgba(255,255,255,.92); }
.dark .footer-tagline{ color: rgba(255,255,255,.72); }

.footer-contact,
.footer-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-contact a,
.footer-link{
  font-family: var(--font-body);
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.footer-link:hover{
  text-decoration: underline;
}

.footer-trade{
  font-size: .85rem;
  color: var(--muted);
}

/* =========================================================
   LEGAL SLIDE‑IN PANELS
========================================================= */


/* =========================================================
   LEGAL MODALS — Centered glass dialogs
========================================================= */

.legal-panel{
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.legal-panel[aria-hidden="false"]{
  pointer-events: auto;
}

/* Modal box */
.legal-panel-inner{
  width: min(92vw, 720px);
  max-height: min(86vh, 820px);

  display: flex;
  flex-direction: column;

  border-radius: 28px;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.92),
    rgba(255,255,255,.72)
  );

  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);

  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 40px 120px rgba(0,0,0,.45);

  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition:
    transform 420ms var(--ease),
    opacity 220ms ease;
}

.dark .legal-panel-inner{
  background: linear-gradient(
    180deg,
    rgba(12,16,14,.92),
    rgba(12,16,14,.72)
  );
  border-color: rgba(255,255,255,.12);
}

/* Open state */
.legal-panel[aria-hidden="false"] .legal-panel-inner{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.legal-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;

  border-bottom: 1px solid rgba(255,255,255,.22);
}

.legal-panel-head h2{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 950;
  font-size: 1.15rem;
  color: var(--text-dark);
}

.dark .legal-panel-head h2{
  color: rgba(255,255,255,.92);
}

/* Close button */
.legal-close{
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-dark);
}

.dark .legal-close{
  color: rgba(255,255,255,.92);
}

/* Content */
.legal-panel-content{
  padding: 20px;
  overflow-y: auto;
  font-family: var(--font-body);
  color: var(--text-dark);
  line-height: 1.55;
}

.dark .legal-panel-content{
  color: rgba(255,255,255,.86);
}
.legal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1000;

  background: rgba(0,0,0,.38);
  backdrop-filter: blur(3px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.legal-backdrop[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
}




/* =========================================================
   GDPR BANNER — Mobile‑first glass
========================================================= */

.gdpr-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;

  padding: 12px;
  pointer-events: none;
}

.gdpr-banner[aria-hidden="false"]{
  pointer-events: auto;
}

.gdpr-banner-inner{
  max-width: 980px;
  margin: 0 auto;

  display: grid;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 22px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.92),
    rgba(255,255,255,.72)
  );

  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);

  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  transform: translateY(20px);
  opacity: 0;
  transition:
    transform 420ms var(--ease),
    opacity 220ms ease;
}

.gdpr-banner[aria-hidden="false"] .gdpr-banner-inner{
  transform: translateY(0);
  opacity: 1;
}

.dark .gdpr-banner-inner{
  background: linear-gradient(
    180deg,
    rgba(12,16,14,.92),
    rgba(12,16,14,.72)
  );
  border-color: rgba(255,255,255,.12);
}

/* Text */
.gdpr-text{
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text-dark);
}

.dark .gdpr-text{
  color: rgba(255,255,255,.86);
}

/* Inline link */
.gdpr-link{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 900;
  color: var(--green-dark);
  cursor: pointer;
  text-decoration: underline;
}

.dark .gdpr-link{
  color: var(--green-light);
}

/* Actions */
.gdpr-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gdpr-btn{
  flex: 1 1 auto;
  padding: 12px 14px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 950;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
}

.gdpr-btn-primary{
  background: rgba(119,183,43,.18);
  color: var(--green-dark);
}

.dark .gdpr-btn-primary{
  color: var(--green-light);
}

.gdpr-btn-secondary{
  background: rgba(255,255,255,.10);
  color: var(--text-dark);
}

.dark .gdpr-btn-secondary{
  color: rgba(255,255,255,.92);
}

/* Desktop refinement */
@media (min-width: 720px){
  .gdpr-banner-inner{
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .gdpr-actions{
    flex-wrap: nowrap;
  }
}















/* =========================
   CANDIDATES PANEL (FINAL)
========================= */

.candidates-panel{
  position: fixed;
  inset: 0;
  z-index: 140;

  display: none;
  padding: 24px 14px 120px;

  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.candidates-panel.is-open{
  display: block;
}

/* =========================
   PANEL SHEET
========================= */

.candidates-panel-inner{
  width: min(980px, 100%);
  margin: 0 auto;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.58)
  );
  border-radius: calc(var(--radius) + 14px);
  box-shadow: var(--shadow-strong);
}

.dark .candidates-panel-inner{
  background: linear-gradient(
    180deg,
    rgba(10,15,13,0.78),
    rgba(10,15,13,0.58)
  );
}

/* =========================
   HEADER (GLASS PILL)
========================= */

.candidates-header{
  position: sticky;
  top: 14px;
  z-index: 3;

  display: flex;
  justify-content: center;

  padding: 10px;
}

.candidates-header h2{
  margin: 0;
  padding: 10px 22px;

  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .06em;

  background: var(--glass);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: var(--shadow-soft);
}

.dark .candidates-header h2{
  border-color: rgba(255,255,255,0.18);
}

/* =========================
   LIST
========================= */

.candidates-list{
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* =========================
   CARD
========================= */

.candidate-card{
  padding: 14px;
  border-radius: calc(var(--radius) + 6px);

  background: var(--glass);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow-soft);

  display: grid;
  gap: 10px;
}

.dark .candidate-card{
  border-color: rgba(255,255,255,0.12);
}

/* Portrait */
.candidate-media{
  all: unset;
  cursor: pointer;
  display: block;
  position: relative;

  -webkit-tap-highlight-color: transparent;
}

.candidate-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  object-fit: cover;
  object-position: center top;
}

/* Click hint */
.candidate-media::after{
  content: "Details";
  position: absolute;
  right: 10px;
  bottom: 10px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .04em;

  color: var(--text-dark);
  background: var(--glass);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: var(--shadow-soft);

  pointer-events: none;
}

.dark .candidate-media::after{
  border-color: rgba(255,255,255,0.18);
}

/* Head */
.candidate-head{
  text-align: center;
}

.candidate-name{
  margin: 6px 0 0;
  font-weight: 700;
}

.candidate-role{
  margin: 2px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

/* =========================
   DETAILS (ANIMATED)
========================= */

.candidate-details{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);

  transition:
    max-height 420ms var(--ease),
    opacity 260ms ease,
    transform 260ms ease;
}

.candidate-card.is-open .candidate-details{
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}

.candidate-details p{
  margin: 6px 0;
}


/* Close button */
.candidates-close{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 22px;
  line-height: 1;

  background: var(--glass);
  color: var(--text-dark);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: var(--shadow-soft);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dark .candidates-close{
  border-color: rgba(255,255,255,0.18);
}

/* Interaction */
.candidates-close:hover{
  transform: translateY(-50%) scale(1.05);
}

.candidates-close:active{
  transform: translateY(-50%) scale(0.96);
}

.candidates-close:focus-visible{
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
}