/* Common Cause — site_v2 stylesheet (mobile first).
   Keeps the existing look: Poppins, white header with centred logo,
   yellow #fcd824 hover, red pill Donate, black footer. */

:root {
  --ink: #000;
  --ink-soft: #2e2e2e;
  --muted: #666565;
  --line: #f3f3f3;
  --accent: #fcd824;      /* hover / highlight yellow */
  --donate: #dc3545;      /* donate red */
  --dropdown-bg: rgba(0, 0, 0, 0.85);
  --footer-bg: #000;
  --field-bg: #fcfcfc;
  --field-line: #bebebe;
  --send-bg: #7a7a7a;
  --container: 1140px;
  --gutter: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

.icon { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------------ Header */

.brand {
  padding: 20px var(--gutter);
  text-align: center;
}
.brand a { display: inline-block; }
.brand img { display: block; width: 414px; max-width: 100%; }
/* Large screens: the logo keeps the size it has on the old site (662 x 80, never reduced). */
@media (min-width: 1367px) {
  .brand { padding-block: 30px; }
  .brand img { width: 662px; height: 80px; }
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.main-nav.is-stuck { box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); }

.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 0 8px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav-toggle .icon { width: 28px; height: 28px; }
.nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-flex; }
.nav-toggle-open { display: inline-flex; }

.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink-soft);
}

.btn-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 105px;
  height: 36px;
  padding: 0 18px;
  border-radius: 50px;
  background: var(--donate);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.btn-donate:hover,
.btn-donate:focus-visible { background: var(--accent); color: #000; }

/* Mobile panel: drops below the bar when the menu button is pressed */
.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.nav-panel.is-open { display: block; }

.menu,
.submenu,
.social {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: 500 14px/17px 'Poppins', sans-serif;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
}
.menu-link:hover,
.menu-link[aria-expanded="true"] { background: var(--accent); color: #000; }

.chevron { transition: transform 0.2s; }
.menu-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.submenu {
  display: none;
  background: var(--dropdown-bg);
}
.menu-link[aria-expanded="true"] + .submenu { display: block; }

.submenu a {
  display: block;
  padding: 12px 20px 12px 32px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.submenu a:hover,
.submenu a:focus-visible { background: var(--accent); color: #000; }

.social {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink-soft);
}
.social a:hover { color: #000; background: var(--accent); }

body.nav-open { overflow: hidden; }


/* Desktop: horizontal menu with hover / focus dropdowns */
@media (min-width: 1100px) {
  .nav-bar { padding: 0 50px; min-height: 0; }
  .nav-toggle { display: none; }

  .nav-panel {
    display: flex;
    align-items: center;
    flex: 1;
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .menu { display: flex; }
  .menu-item { position: relative; }

  .menu-link {
    width: auto;
    gap: 2px;
    padding: 14px 12px;
    border: 0;
    white-space: nowrap;
  }
  .chevron { width: 12px; height: 12px; }

  .menu-item:hover > .menu-link { background: var(--accent); color: #000; }

  .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 230px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  }
  .menu-item:hover > .submenu,
  .menu-item:focus-within > .submenu,
  .menu-link[aria-expanded="true"] + .submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .submenu a {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 0;
  }

  .social { margin-left: auto; padding: 0; gap: 0; }
  .social a { width: 34px; height: 34px; }
  .social .icon { width: 16px; height: 16px; }

  .nav-search { margin-left: 16px; }
  .btn-donate { margin-left: 16px; height: 33px; font-size: 14px; }

  body.nav-open { overflow: auto; }
}

/* ------------------------------------------------------------------ Shared bits */

:root {
  --red-heading: #ea1116;   /* card headings */
  --red-count: #ff282e;     /* case counts */
  --text-soft: #4e4e4e;
  --text-muted: #757575;
  --panel: #f8f8f8;
  --shadow-card: 0 7px 13px 6px rgba(0, 0, 0, 0.08);
}

.section-title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.home-section { padding: 28px 0 32px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 15px;
  border: 1px solid #cacaca;
  border-radius: 4px;
  background: #fcfcfc;
  color: #616161;
  font: 400 14px 'Poppins', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-outline:hover,
.btn-outline:focus-visible { background: var(--accent); border-color: var(--accent); color: #000; }

.more-link { margin: 12px 0 0; text-align: right; }
.more-link a,
a.more-link { color: #828282; font-size: 14px; }
a.more-link { display: inline-block; margin-top: 12px; }

@media (min-width: 768px) {
  .section-title { font-size: 30px; }
  .home-section { padding: 30px 0 40px; }
}

/* ------------------------------------------------------------------ Slider (hero, campaigns, card rows)
   Native horizontal scrolling with snap points: swipe works everywhere,
   JS only adds arrows, dots and optional autoplay. */

.slider { position: relative; }

.slider-track {
  position: relative;       /* contain absolutely-positioned children (e.g. visually-hidden text) */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow:hover,
.slider-arrow:focus-visible { background: #000; }
.slider-arrow[disabled] { opacity: 0.25; cursor: default; }
.slider-prev { left: 4px; }
.slider-next { right: 4px; }
.slider.is-ready .slider-arrow { display: inline-flex; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}
.slider-dots button {
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slider-dots button::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  margin: auto;
  border-radius: 50%;
  background: #c9c9c9;
  transition: background 0.2s, transform 0.2s;
}
.slider-dots button[aria-current="true"]::before { background: var(--donate); transform: scale(1.2); }

/* ------------------------------------------------------------------ Hero */

.hero { padding: 16px 0 8px; }

.hero-slide {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.hero-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #ececec;
}
.hero-media > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 4px 4px;
}
.hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.hero-text {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Phones: image is on top (16:10, full container width) — centre arrows on it, not on the text */
@media (max-width: 767.98px) {
  .slider--hero .slider-arrow { top: calc((100vw - 2 * var(--gutter)) * 0.3125); }
}

@media (min-width: 768px) {
  .hero { padding: 24px 0 8px; }
  .hero-slide { flex-direction: row; align-items: stretch; gap: 32px; }
  .hero-media { flex: 0 0 50%; }
  .hero-body { flex: 1; justify-content: center; padding: 8px 56px 8px 0; }
  .hero-title { font-size: 24px; }
  .hero-text { font-size: 16px; -webkit-line-clamp: 7; line-clamp: 7; }
  .slider--hero .slider-prev { left: -8px; }
  .slider--hero .slider-next { right: -8px; }
}

/* Click-to-play video */
.video-lite {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video-lite img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 68px; height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 12px;
  background: rgba(220, 0, 0, 0.9);
  transition: background 0.2s;
}
.video-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -10px 0 0 -7px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.video-lite:hover .video-play,
.video-lite:focus-visible .video-play { background: #f00; }
.video-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.hero-media .video-frame { height: 100%; }

/* ------------------------------------------------------------------ Downloads (slider button + popup) */

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 15px;
  border: 1px solid var(--donate);
  border-radius: 4px;
  background: var(--donate);
  color: #fff;
  font: 500 14px 'Poppins', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-download .icon { width: 17px; height: 17px; }
.btn-download:hover,
.btn-download:focus-visible { background: var(--accent); border-color: var(--accent); color: #000; }
.btn-count { font-weight: 400; opacity: 0.9; }

.dl-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  margin: auto 0 0;          /* phones: bottom sheet */
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: #fff;
  color: #000;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.dl-dialog[open] { display: flex; flex-direction: column; animation: dl-up 0.2s ease-out; }
.dl-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
@keyframes dl-up { from { transform: translateY(30px); opacity: 0; } }

.dl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 12px 20px;
  border-bottom: 1px solid #eee;
}
.dl-kicker {
  margin: 0 0 2px;
  color: var(--donate);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dl-head h2 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.dl-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f2;
  color: #000;
  cursor: pointer;
}
.dl-close:hover { background: var(--accent); }

.dl-list {
  flex: 1;
  margin: 0;
  padding: 4px 20px;
  overflow-y: auto;
  list-style: none;
}
.dl-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.dl-item:last-child { border-bottom: 0; }
.dl-type {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 52px;
  border-radius: 4px;
  background: #555;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.dl-type--pdf { background: #c62828; }
.dl-type--doc, .dl-type--docx { background: #1e5bb8; }
.dl-type--xls, .dl-type--xlsx { background: #1f7a45; }
.dl-type--ppt, .dl-type--pptx { background: #c4511c; }
.dl-info { display: flex; flex-direction: column; min-width: 0; }
.dl-label { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.dl-meta { color: var(--text-muted); font-size: 13px; }
.dl-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.dl-foot { margin: 0; padding: 12px 20px 16px; border-top: 1px solid #eee; text-align: center; }
.dl-foot a { color: #000; font-size: 14px; font-weight: 500; }
.dl-foot a:hover { color: var(--donate); }

@media (min-width: 640px) {
  .dl-dialog {
    max-width: 620px;
    max-height: 80vh;
    margin: auto;            /* centred window */
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  }
  @keyframes dl-up { from { transform: translateY(12px); opacity: 0; } }
  .dl-item { grid-template-columns: 44px 1fr auto; }
  .dl-buttons { grid-column: auto; display: flex; }
}

body.dialog-open { overflow: hidden; }

/* ------------------------------------------------------------------ Promo strip */

.promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);       /* a wide child (the ticker's moving strip) must never stretch the page */
  gap: 16px;
  justify-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: center;
}
.promo-banner { display: block; width: 100%; max-width: 620px; }
.promo-banner img { display: block; width: 100%; }

/* "Latest" ticker — right to left like the old marquee; stops on hover, keyboard focus or the pause button */
.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 0;
  border-top: 3px double #b9b9b9;
  border-bottom: 1px solid #e6e6e6;
}
.ticker-label,
.promo-label {
  flex: none;
  padding: 2px 10px;
  border-radius: 3px;
  background: var(--donate);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ticker-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.ticker-run {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-time, 40s) linear infinite;
}
.ticker-list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.ticker-list li::after {
  content: '||';
  padding: 0 22px;
  color: #8a8a8a;
  font-weight: 400;
}
.ticker-list a { color: #000; font-weight: 600; font-size: 15px; text-decoration: none; }
.ticker-list a:hover,
.ticker-list a:focus-visible { color: var(--donate); text-decoration: underline; }
.ticker:hover .ticker-run,
.ticker:focus-within .ticker-run,
.ticker.is-paused .ticker-run { animation-play-state: paused; }
@keyframes ticker-scroll { to { transform: translateX(var(--ticker-shift, -50%)); } }
.ticker-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #cacaca;
  border-radius: 50%;
  background: #fff;
  color: #444;
  cursor: pointer;
}
.ticker-toggle:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.ticker-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ticker-ico-play { display: none; }
.ticker.is-paused .ticker-ico-pause { display: none; }
.ticker.is-paused .ticker-ico-play { display: block; }
.js .ticker:not(.is-ready) .ticker-run { animation-duration: 40s; }
@media (prefers-reduced-motion: reduce) {
  /* no movement: the same lines, still, wrapped */
  .ticker-run { animation: none; width: auto; flex-wrap: wrap; }
  .ticker-list[aria-hidden="true"], .ticker-toggle { display: none; }
  .ticker-list { flex-wrap: wrap; white-space: normal; }
  .ticker-list li:last-child::after { content: ''; }
  .ticker-window { -webkit-mask-image: none; mask-image: none; }
}
.promo-feedback {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.promo-feedback a { color: #000; font-weight: 600; font-size: 15px; }
.promo-feedback a:hover { color: var(--donate); }

.badge-new {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--donate);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* ------------------------------------------------------------------ Vision / Mission / Objective */

.values { border-top: 1px solid #f1f1f1; }
.values-grid { display: grid; }
.value {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f1f1f1;
}
.value:last-child { border-bottom: 0; }
.value img { grid-row: span 2; width: 44px; height: auto; }
.value h2 { margin: 0; font-size: 19px; font-weight: 400; line-height: 1.3; }
.value p { margin: 0; color: #505050; font-size: 14px; font-weight: 300; line-height: 1.5; }

@media (min-width: 768px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .value {
    display: block;
    padding: 10px 30px 20px;
    text-align: center;
    border-bottom: 0;
    border-right: 1px solid #f1f1f1;
  }
  .value:last-child { border-right: 0; }
  .value img { width: 48px; }
  .value h2 { margin: 6px 0 4px; font-size: 24px; }
  .value p { font-size: 16px; }
}

/* ------------------------------------------------------------------ Covers (SPIR, Journal) */

.covers-section { background: var(--panel); }

.covers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cover { text-align: center; }
.cover-img {
  display: block;
  border: 3px solid #fff;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cover-img:hover { transform: translateY(-3px); box-shadow: 0 6px 14px 4px rgba(0, 0, 0, 0.18); }
.cover-img img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cover-title { margin: 8px 0 2px; color: var(--text-muted); font-size: 13px; }
.cover-actions { display: flex; justify-content: center; gap: 14px; margin: 0; font-size: 13px; }
.cover-actions a { color: #000; }
.cover-actions a:hover { color: var(--donate); }

@media (min-width: 576px) { .covers--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .covers--4 { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
@media (min-width: 992px) { .covers--6 { grid-template-columns: repeat(6, 1fr); } }

/* ------------------------------------------------------------------ Card rows */

.cards-bg {
  background: #fafafa url(../../images/srch_cases_bg1.png) center / cover no-repeat;
}

.slider--cards .slider-track {
  gap: 16px;
  padding: 6px 4px 20px;
  margin: 0 -4px;
  scroll-padding: 0 4px;
}
.slider--cards .slider-item { flex-basis: 85%; display: flex; }

/* Below desktop the card-row arrows sit under the row (cards peek, so swiping is obvious) */
@media (max-width: 991.98px) {
  .slider--cards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .slider--cards .slider-track { flex: 0 0 calc(100% + 8px); }
  .slider--cards .slider-arrow { position: static; margin: 0; width: 36px; height: 36px; }
}

.info-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.info-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #ececec;
}
.info-card-img--empty {
  background: #ececec url(../../images/logo.png) center / 60% auto no-repeat;
  opacity: 0.35;
}
.info-card-body { flex: 1; padding: 14px 20px 8px; }
.info-card-heading {
  margin: 0 0 8px;
  color: var(--red-heading);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.info-card-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.info-card-text {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 300;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.info-card .btn-outline { align-self: flex-start; margin: 8px 20px 20px; }

@media (min-width: 600px) { .slider--cards .slider-item { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 992px) {
  .slider--cards .slider-track { gap: 40px; }
  .slider--cards .slider-item { flex-basis: calc((100% - 80px) / 3); }
  .info-card-heading { font-size: 24px; }
  .info-card-title { font-size: 18px; font-weight: 400; }
  .slider--cards .slider-prev { left: -20px; }
  .slider--cards .slider-next { right: -20px; }
}

/* ------------------------------------------------------------------ Case library */

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.case-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.case-count { color: var(--red-count); font-size: 30px; font-weight: 300; line-height: 1.1; }
.case-box h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.case-box p { flex: 1; margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

@media (max-width: 575.98px) {
  .case-box { padding: 14px 10px; }
  .case-box .btn-outline { min-height: 34px; padding: 4px 12px; font-size: 13px; }
}

@media (min-width: 768px) {
  .case-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .case-count { font-size: 38px; }
  .case-box h3 { font-size: 22px; font-weight: 400; }
  .case-box p { font-size: 14px; }
}
.case-search { justify-content: center; }
.case-search input {
  width: 100%;
  min-height: 40px;
  margin: 8px 0;
  padding: 6px 10px;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  font: 400 15px 'Poppins', sans-serif;
}

/* ------------------------------------------------------------------ Campaigns */

.campaign-slide { display: flex; flex-direction: column; gap: 0; background: #fff; }
.campaign-slide .campaign-media { order: -1; }
.campaign-title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.campaign-media { position: relative; }
.campaign-media > img { object-fit: contain; background: #fff; }
.campaign-download {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}
.campaign-download:hover { background: var(--accent); color: #000; }

@media (min-width: 768px) {
  .campaign-slide { flex-direction: row; gap: 32px; }
  .campaign-slide .campaign-media { order: 0; }
  .campaign-slide .hero-body { padding: 8px 0 8px 48px; }
  .campaign-media { flex: 0 0 34%; aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------------------ Recommendations */

.rec-grid { display: grid; gap: 32px; }
.rec-box h3 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }

.must-read {
  max-height: 330px;
  overflow-y: auto;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
  border-right: 3px solid #f1f1f1;
}
.must-read li {
  position: relative;
  padding: 0 0 12px 18px;
  font-size: 14.5px;
  line-height: 1.45;
}
.must-read li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 8px; height: 8px;
  border: 2px solid var(--donate);
  border-radius: 50%;
}
.must-read a { color: #000; text-decoration: none; }
.must-read a:hover { color: var(--donate); text-decoration: underline; }

.video-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.video-card { margin: 0; }
.video-card .video-lite { aspect-ratio: 16 / 9; height: auto; }
.video-card figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; }

.follow-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.follow-box p { margin: 0 0 4px; color: var(--text-soft); font-size: 14px; }

@media (min-width: 576px) { .video-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .rec-grid { grid-template-columns: 3fr 6fr 3fr; gap: 30px; } }

/* ------------------------------------------------------------------ Search page */

.search-page { padding-top: 24px; padding-bottom: 24px; max-width: 900px; }
.search-form { display: flex; gap: 8px; margin: 0 0 14px; }
.search-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--field-line); border-radius: 4px; font: 400 16px 'Poppins', sans-serif;
}
.search-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.search-kinds a {
  padding: 4px 12px; border: 1px solid #ddd; border-radius: 20px; color: #333; font-size: 13px; text-decoration: none;
}
.search-kinds a:hover, .search-kinds a[aria-current] { background: var(--accent); border-color: var(--accent); color: #000; }
.search-suggest { margin: 0 0 12px; }
.search-answer {
  margin: 0 0 18px; padding: 14px 16px; background: #fffbe0; border-left: 4px solid var(--accent); border-radius: 4px;
}
.search-answer p { margin: 0 0 6px; }
.search-answer-note { color: var(--text-muted); font-size: 12px; margin: 0 !important; }
.search-count { color: var(--text-muted); font-size: 14px; margin: 0 0 8px; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 14px 0; border-bottom: 1px solid #eee; }
.search-kind { display: block; color: var(--red-heading); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.search-title { display: inline-block; margin: 2px 0 4px; color: #000; font-size: 17px; font-weight: 500; line-height: 1.35; }
.search-title:hover { color: var(--donate); }
.search-results p { margin: 0; color: var(--text-soft); font-size: 14px; font-weight: 300; }
.search-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.search-pager a { min-width: 38px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; text-align: center; color: #000; text-decoration: none; }
.search-pager a[aria-current] { background: #000; color: #fff; border-color: #000; }

/* ------------------------------------------------------------------ Footer */

.site-footer {
  margin-top: 48px;
  padding-top: 36px;
  background: var(--footer-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent); }
.site-footer strong { font-weight: 600; }

.footer-grid {
  display: grid;
  gap: 32px;
}

.site-footer h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.site-footer address { font-style: normal; margin-bottom: 16px; }
.site-footer address strong { display: block; padding-bottom: 5px; }
.site-footer p { margin: 0 0 4px; }

.form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.btn-send {
  min-width: 100px;
  min-height: 38px;
  padding: 6px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--send-bg);
  color: #fff;
  font: 400 16px 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn-send:hover,
.btn-send:focus-visible { background: var(--accent); color: #000; }

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  min-height: 40px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  background: var(--field-bg);
  color: #000;
  font: 400 15px 'Poppins', sans-serif;
}
.enquiry-form textarea { resize: vertical; min-height: 90px; }

.form-row { display: grid; gap: 0 12px; }

.g-recaptcha { min-height: 78px; margin-top: 4px; }

.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-block; padding: 6px 0; text-decoration: none; }

.footer-bottom { text-align: center; }
.copyright {
  margin: 40px 0 0 !important;
  padding: 16px 0;
  border-top: 1px solid #ddd;
}
.webd { padding-bottom: 16px; }
.webd a { color: var(--muted); font-size: 13px; }

@media (min-width: 576px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 30px; }
  .footer-form { grid-column: 1 / -1; grid-row: 2; }
  .footer-links { text-align: right; }
}

@media (min-width: 992px) {
  .footer-grid { grid-template-columns: 4fr 5fr 3fr; }
  .footer-form { grid-column: auto; grid-row: auto; }
}

/* ------------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================== Inner pages
   The old inner-page look: patterned background, white card with a centred heading,
   light 300-weight text, Vision / Mission / Objective + Donate beside the card. */

.inner {
  padding: 20px 0 40px;
  background: #fff url(../../images/www.png) center / cover no-repeat fixed;
}
.inner-grid { display: grid; gap: 24px; }
.inner-card {
  min-width: 0;
  padding: 20px 16px 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 13px 6px rgba(0, 0, 0, 0.08);
}
.inner-title {
  margin: 0 0 20px;
  color: #070707;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.inner-subtitle { margin: -6px 0 12px; font-size: 20px; font-weight: 500; text-align: center; }
.inner-card .inner-meta { margin: -12px 0 12px; color: var(--muted); text-align: center; }
.inner-card .inner-lead { font-size: 20px; text-align: center; }
.inner-card hr { margin: 20px 0; border: 0; border-top: 1px solid #e6e6e6; }
.inner-card .center { text-align: center; }
.inner-card .right { text-align: right; }
.clearfix::after { content: ''; display: table; clear: both; }

/* Text from the CMS */
.prose { color: #070707; font-size: 17px; font-weight: 300; overflow-wrap: anywhere; }
.prose p, .inner-card > p { margin: 0 0 1.1em; text-align: left; }
@media (min-width: 768px) { .prose p, .inner-card > p, .box p, .hub-box p { text-align: justify; } }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 { font-weight: 500; line-height: 1.35; margin: 1.2em 0 0.5em; text-align: left; }
.prose img { height: auto !important; max-width: 100% !important; }
.prose a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .inner-card a:hover { background: var(--accent); text-decoration: none; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 4px solid var(--accent); background: #fafafa; }
.prose iframe, .prose embed, .prose video { max-width: 100%; }
.prose iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: left; }
.prose .table-responsive { overflow-x: auto; }
.prose .row, .prose .col-sm-12, .prose .col-md-12, .prose .container { margin: 0; padding: 0; width: auto; max-width: none; }
.prose .panel { margin-bottom: 12px; border: 1px solid #e4e4e4; border-radius: 3px; background: #fff; }
.prose .panel-heading { padding: 10px 12px; }
.prose .panel-title { margin: 0; font-size: 17px; }
.prose .panel-title a { display: block; text-decoration: none; }
.prose .panel-body { padding: 0 12px 6px; }
.js .prose .collapse:not(.in):not(.show) { display: none; }
.prose .panel-title a::after { content: ' +'; color: var(--muted); }
.prose .panel-title a[aria-expanded="true"]::after { content: ' −'; }
.prose .float-right { float: right; }
.prose .float-left { float: left; }
.prose .text-center { text-align: center; }
.prose .content-btn { display: inline-block; padding: 6px 14px; border-radius: 4px; background: var(--donate); color: #fff; font-weight: 500; }
.prose a:hover .content-btn { background: var(--accent); color: #000; }
.form-sign { display: flex; justify-content: space-between; margin-top: 2em !important; }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 20px 0 0; padding: 10px 14px; list-style: none; background: #fefefe; border: 1px solid #eee; border-radius: 4px; font-size: 14px; }
.crumbs li + li::before { content: '/'; padding: 0 8px; color: #999; }
.crumbs a { color: #000; }
.crumbs [aria-current] { color: var(--muted); }

/* Side column (Vision / Mission / Objective + Donate) */
.inner-aside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  text-align: center;
}
.inner-value img { width: 48px; height: auto; }
.inner-value h2 { margin: 4px 0 0; color: rgba(0, 0, 0, 0.6); font-size: 14px; font-weight: 600; }
.inner-value p { margin: 0; line-height: 1.45; }
.inner-donate { grid-column: 1 / -1; justify-self: center; min-width: 170px; letter-spacing: 2px; text-transform: uppercase; }

@media (min-width: 768px) {
  .inner { padding: 30px 0 50px; }
  .inner-card { padding: 20px 35px 24px; }
  .inner-title { font-size: 30px; }
  .prose { font-size: 19px; }
}
@media (min-width: 1100px) {
  .inner-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 30px; }
  .inner-grid--wide { grid-template-columns: minmax(0, 1fr); }
  .inner-grid--wide .inner-aside { grid-template-columns: repeat(3, 1fr) auto; position: static; padding-top: 0; align-items: center; }
  .inner-grid--wide .inner-donate { grid-column: auto; }
  .inner-aside { grid-template-columns: 1fr; position: sticky; top: 80px; padding-top: 140px; gap: 22px; font-size: 15px; }
  .inner-value h2 { font-size: 15px; }
  .inner-value p { font-size: 15px; }
  .prose { font-size: 20px; }
}

/* Tabs between related pages (Governance areas, Supreme / High Court, RTIs) */
.page-tabs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 6px; list-style: none; background: #ffd623; }
.page-tabs a { display: block; padding: 6px 16px; border: 1px solid #c3bebe; background: #fcd824; color: #000; font-size: 16px; text-decoration: none; }
.page-tabs a:hover { background: #fff; }
.page-tabs a[aria-current] { background: #fff; border-color: #ffd420; }

/* Box lists (Current Focus, Representations, Campaigns, Press) */
.boxes { display: grid; gap: 20px; }
.box { position: relative; padding: 15px 20px 18px; border: 1px solid #c3bebe; box-shadow: 0 0 10px #d9d6d6; }
.box-heading { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.box-title { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.box-title a { color: #000; text-decoration: none; }
.box p { margin: 0 0 12px; color: #070707; font-weight: 300; }
.box-more { float: right; }
.box::after { content: ''; display: table; clear: both; }

/* People (Governing Council, Team) */
.people { margin: 0; padding: 0; list-style: none; }
.person { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 3px double #ddddde; }
.person img { width: 100%; height: auto; }
.person p { margin: 0 0 8px; }
.person-name { font-size: 18px; }
.person .prose { font-size: 16px; }
.person-photo { float: left; width: 140px; max-width: 40%; margin: 4px 20px 10px 0; border: 1px solid #d9d9da; }
@media (min-width: 768px) { .person { grid-template-columns: 140px 1fr; gap: 24px; } }

/* Data tables (cases, PILs): table on wide screens, one card per row on phones */
.table-wrap { margin: 0 0 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 8px 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: left; overflow-wrap: break-word; }
@media (min-width: 900px) { .case-table td:nth-child(-n+2), .case-table td:nth-child(6), .case-table td:nth-child(7), .pil-table td:first-child { white-space: nowrap; } }
@media (min-width: 900px) { .case-table td:nth-child(3) { min-width: 220px; } .case-table td:nth-child(4) { min-width: 160px; } }
.data-table th { background: #fafafa; font-weight: 500; }
.data-table a { color: #000; }
.cell-line { display: block; padding: 4px 0; }
.cell-line + .cell-line { border-top: 1px solid #e9f2fd; }
@media (max-width: 899.98px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { margin: 0 0 14px; border: 1px solid #d7d5d5; box-shadow: 0 0 8px rgba(0, 0, 0, 0.06); }
  .data-table td { display: grid; grid-template-columns: 124px 1fr; gap: 10px; border: 0; border-bottom: 1px solid #f0f0f0; }
  .data-table td:last-child { border-bottom: 0; }
  .data-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; overflow-wrap: normal; }
  .data-table td:empty { display: none; }
}
@media (min-width: 900px) { .inner-card--wide .data-table { font-size: 15px; } }

/* Downloads under a case / PIL */
.doc-list { text-align: right; }
.inner-card .doc-list p { margin: 0 0 6px; text-align: right; }
.doc-list ul { margin: 0; padding: 0; list-style: none; }
.doc-list li { padding: 2px 0; }
.doc-list a { color: #0886e8; }

/* Journal */
.covers--journal { margin: 10px 0 20px; }
@media (min-width: 576px) { .covers--journal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .covers--journal { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.cover-img { position: relative; }
.cover-over {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); color: #000; opacity: 0; transition: opacity 0.15s;
}
.cover-over b { padding: 6px 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.9); font-size: 15px; font-weight: 400; }
.cover-img:hover .cover-over, .cover-img:focus-visible .cover-over { opacity: 1; }
.inner-card .journal-old { text-align: right; }
.btn-yellow {
  display: inline-block; padding: 8px 16px; border-radius: 4px; background: #fcd824; color: #000;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.15); text-decoration: none;
}
.btn-yellow:hover { background: #ffe45c; }
.article-list { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.article-list li { padding: 10px 14px; border: 1px solid rgba(0, 0, 0, 0.125); margin-top: -1px; }
.article-list a { color: #000; text-decoration: none; }
@media (min-width: 768px) { .article-list { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.pdf-view { margin: 0 0 1em; }
.pdf-view iframe { display: block; width: 100%; height: 70vh; min-height: 420px; margin-bottom: 8px; border: 1px solid #ddd; }

/* Link lists (News, Must Read, Events) */
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list > li { padding: 12px 16px; border: 1px solid rgba(0, 0, 0, 0.125); margin-top: -1px; }
.link-list a { color: #000; overflow-wrap: anywhere; }
.link-list p { margin: 4px 0 0; }
.link-source { display: block; color: var(--muted); font-size: 14px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; justify-content: center; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0 0; font-size: 14px; }
.pager a, .pager span { padding: 4px 10px; border: 1px solid #ddd; border-radius: 3px; color: #000; text-decoration: none; }
.pager [aria-current] { background: #dfdfdf; }
.pager-off { color: #aaa !important; }
.pager-gap { border: 0 !important; }

/* Videos */
.video-list { display: grid; gap: 28px; }
.video-item { display: grid; gap: 14px; }
.video-item h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.video-item .prose { font-size: 16px; }
.media-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-audio { width: 100%; }
.video-item-media .video-lite { aspect-ratio: 16 / 9; height: auto; }
@media (min-width: 768px) { .video-item { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* Hub boxes (Initiatives, Get Involved, Milestones) */
.hub-grid { display: grid; gap: 20px; margin: 10px 0 0; }
@media (min-width: 768px) { .hub-grid--2 { grid-template-columns: 1fr 1fr; } .hub-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.hub-box { display: flex; flex-direction: column; padding: 15px 20px 20px; border: 1px solid #d7d5d5; box-shadow: 0 0 10px rgba(164, 162, 162, 0.58); text-align: center; }
.hub-box h2 { margin: 6px 0 8px; font-size: 18px; font-weight: 500; }
.hub-box p { flex: 1; margin: 0 0 14px; font-weight: 300; text-align: left; }
.hub-box .btn-outline { align-self: center; }
.hub-img { display: block; max-width: 100%; height: auto; margin: 10px auto; }
.hub-img--round { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }

/* Governance */
.inner-card .read-more-row { text-align: right; }

/* RTI table */
.prose--rti table { font-size: 15px; }
.prose--rti td:first-child { width: 28%; font-weight: 400; }
@media (max-width: 767.98px) {
  .prose--rti tr { display: block; margin-bottom: 14px; border: 1px solid #dee2e6; }
  .prose--rti th { display: none; }
  .prose--rti td { display: block; width: auto !important; border: 0; }
  .prose--rti td:first-child { background: #fafafa; font-weight: 500; }
}

/* Donate */
.notice { padding: 10px 14px; border-left: 4px solid var(--donate); background: #fff5f5; }
.notice-ok { border-color: #2e7d32; background: #f1f8f1; }
.donate-form { display: grid; gap: 14px; max-width: 640px; margin: 0 auto 24px; }
.donate-form input[type="text"], .donate-form input[type="email"], .donate-form input[type="tel"], .donate-form input[type="number"], .donate-form textarea {
  width: 100%; padding: 14px; border: 1px solid #cba; border-radius: 2px; background: #fff; color: #543; font: 300 18px 'Poppins', sans-serif;
}
.donate-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 300; }
.donate-check input { margin-top: 6px; }
.donate-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 576px) { .donate-amounts { grid-template-columns: repeat(4, 1fr); } }
.donate-amount { padding: 14px 8px; border: 1px solid #cba; border-radius: 2px; background: #000; color: #fff; font: 700 17px 'Poppins', sans-serif; cursor: pointer; }
.donate-amount:hover, .donate-amount:focus-visible { background: #fcd824; color: #000; }
.donate-other { display: flex; border: 1px solid #cba; border-radius: 3px; }
.donate-other span { display: flex; align-items: center; padding: 0 14px; background: #ccc; color: #666; font-weight: 700; }
.donate-other input { flex: 1; min-width: 0; border: 0 !important; }
.donate-go { flex: 0 0 auto; padding: 14px 20px; }
.donate-details { font-size: 17px; }


/* ================================================================== Homepage polish (positions unchanged)
   SPIR row: a scroller — 5½ covers show, the next one peeks in, a fade and arrows say "more this way". */
.slider--covers .slider-track {
  list-style: none;
  scroll-padding: 0 4px;                       /* the first cover snaps to the very start, so no left arrow there */
  gap: 16px;
  padding: 6px 4px 16px;                       /* room for the cover shadows (the track clips on all sides) */
  margin: -6px -4px -16px;
  --fade-l: 0px;
  --fade-r: 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.slider--covers:not(.at-start) .slider-track { --fade-l: 48px; }
.slider--covers.at-end .slider-track { --fade-r: 0px; }
.slider--covers .slider-item { flex: 0 0 calc((100% - 16px * 2) / 2.4); }
@media (min-width: 576px) { .slider--covers .slider-item { flex-basis: calc((100% - 16px * 3) / 3.5); } }
@media (min-width: 992px) { .slider--covers .slider-item { flex-basis: calc((100% - 16px * 5) / 5.5); } }
.slider--covers .slider-arrow { top: 36%; background: rgba(0, 0, 0, 0.7); }
.slider--covers .slider-arrow[disabled] { opacity: 0; pointer-events: none; }      /* no arrow where there is nothing more that way */
.slider--covers .slider-prev { left: -6px; }
.slider--covers .slider-next { right: -6px; }
.slider--covers .cover-actions { flex-wrap: wrap; row-gap: 2px; }
@media (prefers-reduced-motion: reduce) { .slider--covers .slider-track { scroll-behavior: auto; } }

/* Our Recommendations: same three columns in the same order. Each gets the thin double rule used under the
   Latest ticker, all three "Click here for more" links sit on one line, and nothing is cut off mid-line. */
.rec-grid { align-items: stretch; }
.rec-box { display: flex; flex-direction: column; padding-top: 12px; border-top: 3px double #c4c4c4; }
.rec-box h3 { font-size: 20px; font-weight: 500; letter-spacing: 0.1px; }
.rec-box > .more-link { margin-top: auto; padding-top: 14px; align-self: flex-start; text-align: left; }
.must-read {
  flex: 1 1 auto;
  max-height: 272px;
  padding: 0 10px 34px 0;                      /* bottom padding lets the last line scroll clear of the fade */
  border-right: 0;
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 #f1f1f1;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.must-read::-webkit-scrollbar { width: 6px; }
.must-read::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.must-read::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
.must-read li { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid #eee; }
.must-read li:last-child { border-bottom: 0; }
.must-read li::before { top: 7px; }
.video-card figcaption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);                 /* both captions take the same space, so the two videos line up */
  margin-top: 8px;
}
.video-card .video-lite { border-radius: 3px; }
.follow-box p { line-height: 1.5; }
.follow-box .btn-outline { min-height: 40px; }


/* ================================================================== Finishing pass
   Newspaper and academic-journal habits, done in CSS only: no words added, nothing moved.
   1 type that sets well (balanced headings, no widows, hyphenated justified columns, lining figures)
   2 square editorial frames, one set of shadows   3 tables that keep their column labels in view
   4 a reading-progress line on inner pages   5 back to top   6 a clean printout   7 comfortable touch targets */
:root { --sticky-h: 47px; --frame-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.15); }
html { scroll-padding-top: calc(var(--sticky-h) + 14px); font-kerning: normal; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: #000; }

/* keyboard focus: a dark ring that shows on white, and yellow on the black footer */
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.site-footer :focus-visible, .dl-dialog :focus-visible { outline-color: var(--accent); }

/* 1 — type */
h1, h2, h3, .hero-title, .section-title, .inner-title, .info-card-heading, .box-heading, .box-title, .campaign-title { text-wrap: balance; }
p, li, figcaption, .hero-text, .info-card-text { text-wrap: pretty; }
.data-table, .cell-line, .box-title, .dateline, .cover-title, .pager { font-variant-numeric: lining-nums tabular-nums; }
.dateline { white-space: nowrap; color: #555; font-weight: 400; }
@media (min-width: 768px) {
  .prose p, .box p, .hub-box p, .inner-card > p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
}
.prose a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose a:hover { text-decoration-thickness: 2px; }

/* 2 — frames: editorial pieces are square-cornered; only controls (buttons, fields) are rounded */
.case-box { border-radius: 0; box-shadow: var(--frame-shadow); }
.dl-dialog { border-radius: 4px; }
.cover-img img { aspect-ratio: 257 / 328; }                 /* the covers' own proportions: nothing is cropped */
.cover-img { box-shadow: var(--frame-shadow); }
.cover-img:focus-visible { outline-offset: 5px; }

/* 3 — long case and PIL tables keep their column labels under the menu while you scroll; rows are easy to follow */
@media (min-width: 900px) {
  .data-table thead th { position: sticky; top: var(--sticky-h); z-index: 2; background: #fafaf8; border-bottom: 0; box-shadow: 0 1px 0 #dee2e6, 0 2px 0 rgba(0, 0, 0, 0.04); }
  .data-table tbody tr:nth-child(even) td { background: #fcfcfa; }
  .data-table tbody tr { transition: background-color 0.15s; }
  .data-table tbody tr:hover td { background: #fffbe0; }
}

/* 4 — reading progress on inner pages (browsers that support scroll-linked animation; invisible otherwise) */
@supports (animation-timeline: scroll()) {
  .inner::before {
    content: '';
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: read-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .inner::before { display: none; } }

/* 5 — back to top */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: #111;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.2s, color 0.2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--accent); color: #000; outline-color: #111; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* 7 — touch targets of 44 px without moving anything: the hit area grows, the layout does not */
@media (max-width: 1024px) {
  .more-link a, a.more-link, .site-footer address a, .site-footer p a, .copyright a, .webd a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
@media (min-width: 992px) and (max-width: 1219px) {
  .slider--cards .slider-prev { left: -12px; }
  .slider--cards .slider-next { right: -12px; }
}
@media (min-width: 1220px) {
  .slider--cards .slider-prev { left: -20px; }
  .slider--cards .slider-next { right: -20px; }
}

/* 6 — a clean printout (case lists and journal articles are printed and cited) */
@media print {
  @page { margin: 16mm 14mm; }
  body, .inner { background: #fff !important; color: #000; }
  .site-header, .main-nav, .ticker, .slider-arrow, .slider-dots, .to-top, .site-footer, .inner-aside, .skip-link, .promo-banner, .search-form, .page-tabs, .dl-dialog, .nav-toggle, .btn-donate { display: none !important; }
  .inner-grid { display: block; }
  .inner-card { box-shadow: none !important; padding: 0 !important; background: #fff !important; }
  .inner::before { display: none; }
  a { color: #000; text-decoration: none; }
  .data-table { font-size: 10pt; }
  .data-table thead th { position: static; }
  .data-table tr, .box, .hub-box, .person { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .prose p, .box p { orphans: 3; widows: 3; }
  .crumbs { display: none; }
}


/* ================================================================== Readability (crisp for everyone)
   Every text colour passes WCAG AA (4.5:1) on its background; text under 18 px uses the regular weight, because the
   thin 300 weight looks faint on screens at small sizes; nothing under 14 px except labels; sharper type on black. */
:root { --text-muted: #5c5c5c; --send-bg: #666; }
a.more-link, .more-link a { color: #595959; }
a.more-link:hover, .more-link a:hover { color: var(--donate); }
.webd, .webd a, .site-footer .webd a { color: #c4c4c4; font-weight: 400; }
.webd a:hover { color: var(--accent); }
.btn-send { background: var(--send-bg); color: #fff; }
.hero-text, .value p, .info-card-text, .search-results p, .box p, .hub-box p, .donate-check, .follow-box p, .case-box p,
.site-footer, .site-footer address, .site-footer p, .site-footer a, .copyright, .copyright a { font-weight: 400; }
.cover-title, .dl-meta, .search-count { font-size: 14px; }
.search-answer-note { font-size: 13px; }
.site-footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.site-footer address, .site-footer p { font-size: 15px; }
@media (max-width: 767.98px) {
  .prose, .inner-card > p { font-weight: 400; }              /* the light weight is for the larger desktop text only */
  .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
@media (min-width: 768px) and (max-width: 1024px) { .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; } }

@media (max-width: 479.98px) { .case-grid { grid-template-columns: 1fr; } }        /* one column on small phones so the text can stay 14 px */
.prose td, .prose th, .prose table a, .prose li { font-weight: 400; }          /* tables and lists are set in the regular weight; the light weight is for running text only */

/* measure and weight for text that sits directly in the card, and a few small blocks */
.inner-card > p { font-size: 17px; }
@media (min-width: 768px) { .inner-card > p { font-size: 19px; } }
@media (min-width: 1100px) { .inner-card > p { font-size: 20px; } }
.person .prose, .video-item .prose, .donate-details, .donate-details a { font-weight: 400; }
.donate-other span { color: #333; }
.donate-details { max-width: 640px; margin-inline: auto; }                 /* bank details line up under the form */
.search-kind { font-size: 13px; }
.search-results p, .search-answer p { max-width: 72ch; }
.search-page p { max-width: 80ch; }

@media (max-width: 1024px) { .cover-actions a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
@media (max-width: 400px) {
  .donate-other span { padding: 0 10px; }
  .donate-go { padding: 14px; }
  .donate-other input { padding: 14px 6px; }
}

.form-notice { margin: 0 0 10px; color: #ffe94d; font-size: 15px; }