/* ─── Reset & CSS variables ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:              #0a0a0a;
  --bg-surface:      #111111;
  --bg-elevated:     #1a1a1a;
  --accent:          #cc0000;
  --accent-glow:     rgba(204, 0, 0, 0.18);
  --text:            #e8e8e8;
  --text-sub:        #999999;
  --border:          #222222;
  --border-strong:   #333333;

  --topbar-h:        54px;
  --sidebar-w:       220px;
  --sidebar-mini-w:  44px;
  --panel-w:         300px;
  --panel-mini-w:    40px;
  --ease:            0.22s ease;

  /* Serif for editorial / memorial copy; clean UI stack for chrome. */
  --font-serif:      Georgia, 'Times New Roman', 'Noto Serif', 'Liberation Serif', serif;
  --font-ui:         system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Kept under its own name so Latin long-form copy can ask for it even on
     a Persian page, where --font-serif is redefined to Vazirmatn. */
  --font-serif-latin: Georgia, 'Times New Roman', 'Noto Serif', 'Liberation Serif', serif;
}

/* ─── Persian / Farsi typeface ───────────────────────────────
   Vazirmatn (SIL OFL, github.com/rastikerdar/vazirmatn) — the de-facto
   standard open Persian web font: on Google Fonts since 2022, and what
   Telegram uses to render Persian. Self-hosted so the site keeps working
   offline and nothing is requested from a third party.
   Its Latin glyphs are good, so Persian pages use it for *all* text
   rather than mixing two typefaces mid-sentence.                       */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Estedad (SIL OFL, github.com/aminabedi68/Estedad) — the display face for
   Persian headings. A variable font, so weights 100–900 arrive in one 118 KB
   file rather than one request per weight.

   Two faces, not one, on the advice that Persian sites should not set every
   role in a single typeface: Estedad is the more characterful face and holds
   up at large sizes, Vazirmatn is the steadier one and stays legible down at
   12px, so headings get the former and running text the latter. */
@font-face {
  font-family: 'Estedad';
  src: url('/fonts/Estedad-Variable.woff2') format('woff2-variations'),
       url('/fonts/Estedad-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

a { text-decoration: none; }

/* ─── Top bar ───────────────────────────────────────────── */
#topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  gap: 16px;
}

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1;
}

#logo-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
}

#logo .accent { color: var(--accent); }

#topnav {
  display: flex;
  align-items: center;
  gap: 4px;
}

#topnav a {
  color: var(--text-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  transition: color var(--ease), background var(--ease);
}

#topnav a:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

#topnav a.active {
  color: var(--accent);
  background: var(--accent-glow);
}

/* The wordmark plus six nav links already overflow a narrow-desktop bar on
   their own, and the language switcher needs room too: the full row wants
   roughly 1020px. Below that the top nav is dropped — the sidebar beside it
   carries exactly the same links, so nothing becomes unreachable. (Under
   768px the sidebar itself collapses to the hamburger; that breakpoint is
   handled in the mobile block below.) */
@media (max-width: 1019px) {
  #topnav { display: none; }
}

/* ─── Layout shell ──────────────────────────────────────── */
#layout {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  display: flex;
}

/* ─── Sidebar ───────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--ease);
  z-index: 100;
}

body.sidebar-collapsed #sidebar {
  width: var(--sidebar-mini-w);
}

/* Toggle button */
#sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--ease), background var(--ease);
}

#sidebar-toggle:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--ease);
}

body.sidebar-collapsed .toggle-icon {
  transform: rotate(180deg);
}

/* Nav items */
#sidenav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-sub);
  padding: 6px 14px 10px;
  white-space: nowrap;
  transition: opacity var(--ease);
  opacity: 0.7;
}

body.sidebar-collapsed .nav-section-label {
  opacity: 0;
  pointer-events: none;
}

.sidenav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-sub);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease);
  position: relative;
}

.sidenav-link:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.sidenav-link.active {
  color: var(--accent);
  background: var(--accent-glow);
}

/* Active leading-edge bar (flips to the right edge in RTL) */
.sidenav-link.active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--accent);
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
}

.link-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
  transition: background var(--ease);
}

.sidenav-link.active .link-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.link-text {
  transition: opacity var(--ease);
}

body.sidebar-collapsed .link-text {
  display: none;
}

/* Nav icons: 18px, inherit link colour (accent when active) */
.link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Collapsed sidebar → centre the icon, no label */
body.sidebar-collapsed .sidenav-link {
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}

/* ─── Main content ──────────────────────────────────────── */
#main {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

/* ─── Leaflet map container ─────────────────────────────── */
#map {
  width: 100%;
  height: 100%;
}

/* Dark-theme Leaflet overrides */
.leaflet-container {
  background: #12121e;
  font-family: var(--font-ui);
}

.leaflet-control-attribution {
  background: rgba(10, 10, 10, 0.75) !important;
  color: var(--text-sub) !important;
  font-size: 10px !important;
  border-top-left-radius: 4px !important;
}

.leaflet-control-attribution a {
  color: var(--accent) !important;
}

.leaflet-bar {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

.leaflet-bar a {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-size: 16px !important;
  line-height: 26px !important;
  width: 28px !important;
  height: 28px !important;
}

.leaflet-bar a:hover {
  background: var(--bg-elevated) !important;
  color: var(--accent) !important;
}

.leaflet-bar a:first-child { border-radius: 4px 4px 0 0 !important; }
.leaflet-bar a:last-child  { border-radius: 0 0 4px 4px !important; }

/* ─── Scrollbar (sidebar) ───────────────────────────────── */
#sidenav::-webkit-scrollbar       { width: 4px; }
#sidenav::-webkit-scrollbar-track { background: transparent; }
#sidenav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE  (body.home)
   ═══════════════════════════════════════════════════════════ */
body.home #main { overflow-y: auto; }

.home-scroll {
  min-height: 100%;
}

.home-scroll ::selection { background: var(--accent); color: #fff; }

/* The homepage is deliberately reduced to three large destinations. */
.home-banners {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(520px, 1fr);
  padding: clamp(18px, 3vw, 42px);
  gap: clamp(12px, 1.6vw, 22px);
  background:
    radial-gradient(circle at 85% 12%, rgba(204, 0, 0, 0.13), transparent 28%),
    linear-gradient(135deg, #080808, #101010 55%, #080808);
}

.home-banner {
  isolation: isolate;
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3.2vw, 46px);
  color: var(--text);
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  background: #151515;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.home-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(105deg, rgba(204, 0, 0, 0.22), transparent 58%);
  transition: opacity 0.35s ease;
}

.home-banner:hover,
.home-banner:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: #191919;
}

.home-banner:hover::before,
.home-banner:focus-visible::before { opacity: 1; }
.home-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.home-banner-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-banner-label {
  color: #aaa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-banner-copy strong {
  max-width: 24ch;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.home-banner-arrow {
  position: relative;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  align-self: center;
  border: 1px solid #444;
  border-radius: 50%;
  color: #bbb;
  font-size: 21px;
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}

.home-banner:hover .home-banner-arrow {
  color: #fff;
  border-color: var(--accent);
  transform: rotate(45deg);
}

.home-banner--mission {
  background:
    linear-gradient(180deg, rgba(8,8,8,.08) 0%, rgba(8,8,8,.26) 42%, rgba(8,8,8,.96) 100%),
    url('/img/home/mission-map-evidence.png') 58% center / cover no-repeat,
    #111;
}
.home-banner--mission:hover,
.home-banner--mission:focus-visible {
  background:
    linear-gradient(180deg, rgba(8,8,8,.02) 0%, rgba(8,8,8,.2) 42%, rgba(8,8,8,.93) 100%),
    url('/img/home/mission-map-evidence.png') 58% center / cover no-repeat,
    #111;
}
.home-banner--about {
  background:
    linear-gradient(180deg, rgba(8,8,8,.06) 0%, rgba(8,8,8,.24) 44%, rgba(8,8,8,.97) 100%),
    url('/img/home/iran-blackout-about.jpg') center 48% / cover no-repeat,
    #111;
}
.home-banner--about:hover,
.home-banner--about:focus-visible {
  background:
    linear-gradient(180deg, rgba(8,8,8,.02) 0%, rgba(8,8,8,.17) 44%, rgba(8,8,8,.94) 100%),
    url('/img/home/iran-blackout-about.jpg') center 48% / cover no-repeat,
    #111;
}

/* Center card: a documentary video still with crisp, platform-inspired UI. */
.home-banner--story { padding: 0; background: #080706; }
.story-video-still { position: absolute; z-index: 1; inset: 0; overflow: hidden; }
.story-video-background { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transition: transform 0.7s ease, filter 0.4s ease; }
.home-banner--story:hover .story-video-background { transform: scale(1.025); filter: saturate(1.08); }
.story-video-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72), transparent 30%, transparent 47%, rgba(0,0,0,.97) 100%), linear-gradient(90deg, rgba(0,0,0,.28), transparent 58%); }
.story-video-topline { position: absolute; z-index: 3; inset: 22px 22px auto; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #fff; font-size: 11px; line-height: 1.15; }
.story-video-topline small { display: block; margin-top: 3px; color: #b9b9b9; font-size: 9px; letter-spacing: .05em; }
.story-avatar { width: 36px; height: 36px; object-fit: cover; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; }
.story-account-meta { min-width: 0; }
.story-account-name { display: flex; align-items: center; gap: 5px; }
.story-account-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-verified { width: 14px; height: 14px; flex: 0 0 14px; }
.story-verified circle { fill: #3897f0; }
.story-verified path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-live-mark { padding: 6px 8px; border: 1px solid rgba(228,192,110,.7); border-radius: 3px; color: #f2d58d; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.story-video-copy { position: absolute; z-index: 3; left: 26px; right: auto; bottom: 28px; display: flex; width: min(76%, 320px); flex-direction: column; gap: 9px; color: #fff; }
.story-video-copy strong { max-width: 11ch; font-family: var(--font-serif); font-size: clamp(29px, 3vw, 47px); line-height: .96; letter-spacing: -.035em; }
.story-social-row { display: flex; align-items: center; gap: 14px; padding-top: 9px; color: #fff; }
.story-social-metric { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.story-social-metric svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.story-social-metric b { margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.story-social-metric--liked { color: #ff3040; }
.story-social-metric--liked svg { fill: currentColor; stroke: currentColor; }
.story-social-metric--liked b { color: #fff; }
.home-banner--story > .home-banner-arrow { position: absolute; z-index: 5; inset: auto 22px 78px auto; width: 38px; height: 38px; background: rgba(0,0,0,.48); }
.home-banner-details--story { gap: 14px; background: radial-gradient(circle at 90% 5%, rgba(178,127,29,.18), transparent 30%), linear-gradient(150deg, rgba(27,16,8,.99), rgba(8,8,8,.995) 58%); }
.story-back-kicker { color: #d7ae55; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.story-pullquote { padding: 13px 0 13px 17px; border-inline-start: 2px solid #d7ae55; color: #fff; font-family: var(--font-serif); font-size: 18px; font-style: italic; line-height: 1.35; }
.story-closing { color: #e3c57f; font-family: var(--font-serif); font-size: 15px; line-height: 1.55; }
.story-explore-link { align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid #9c7427; color: #e2bd65; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.story-explore-link:hover { color: #fff; border-color: #fff; }

.home-banner-images {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.home-banner-images::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,0.98) 5%, rgba(8,8,8,0.76) 58%, rgba(8,8,8,0.28));
}

.home-banner-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.55);
  transition: filter 0.45s ease, transform 0.6s ease;
}

.home-banner--story:hover .home-banner-images img {
  filter: grayscale(0.45) contrast(1.05) brightness(0.7);
  transform: scale(1.025);
}

/* Text reveals for the outer cards; the center story card stays unchanged. */
.home-banner--reveal { cursor: pointer; }

.home-banner-front {
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.home-banner-details {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 42px);
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(28, 12, 12, 0.98), rgba(12, 12, 12, 0.99));
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.home-banner--reveal:hover .home-banner-front,
.home-banner--reveal:focus-visible .home-banner-front,
.home-banner--reveal.is-open .home-banner-front {
  opacity: 0;
  transform: translateY(-14px);
}

.home-banner--reveal:hover .home-banner-details,
.home-banner--reveal:focus-visible .home-banner-details,
.home-banner--reveal.is-open .home-banner-details {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.home-banner--reveal:hover .home-banner-arrow,
.home-banner--reveal:focus-visible .home-banner-arrow,
.home-banner--reveal.is-open .home-banner-arrow {
  z-index: 4;
  color: #fff;
  border-color: var(--accent);
  transform: rotate(45deg);
}

.home-banner-details-title {
  padding-inline-end: 56px;
  font-family: var(--font-serif);
  font-size: clamp(27px, 2.5vw, 40px);
  line-height: 1.05;
  color: #fff;
}

.home-banner-details-intro {
  color: #d0d0d0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
}

.home-banner-details-subtitle {
  margin-top: 4px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-banner-detail,
.home-banner-principle {
  color: #bababa;
  font-size: 13px;
  line-height: 1.55;
}

.home-banner-detail b { color: #fff; }

.home-banner-principle {
  position: relative;
  padding-inline-start: 17px;
}

.home-banner-principle::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.home-banner-tap-hint {
  display: none;
  margin-top: auto;
  padding-top: 8px;
  color: #777;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .home-banners {
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(300px, 1fr));
    align-items: stretch;
    padding: 14px;
    gap: 12px;
  }
  .home-banner {
    grid-template-columns: 1fr auto;
    padding: 22px;
    min-height: 300px;
  }
  .home-banner-copy strong { font-size: clamp(29px, 9vw, 42px); }
  .home-banner-arrow { width: 42px; height: 42px; }
  .home-banner-details { padding: 24px 22px; gap: 9px; }
  .story-video-copy { left: 22px; right: auto; bottom: 24px; width: min(86%, 320px); }
  .story-video-copy strong { font-size: 33px; }
  .story-social-row { gap: 10px; }
  .story-social-metric { gap: 4px; }
  .story-social-metric svg { width: 20px; height: 20px; flex-basis: 20px; }
  .story-social-metric b { font-size: 13px; }
  .home-banner--story > .home-banner-arrow { inset: auto 18px 68px auto; }
  .home-banner-details-title { font-size: 28px; }
  .home-banner-details-intro { font-size: 14px; }
  .home-banner-detail,
  .home-banner-principle { font-size: 12px; line-height: 1.45; }
  .home-banner-tap-hint { display: block; }

  /* Touch browsers often retain :hover after a tap. On phones, the explicit
     is-open class is the sole source of truth so a second tap always closes. */
  .home-banner--reveal:not(.is-open):hover .home-banner-front {
    opacity: 1;
    transform: none;
  }
  .home-banner--reveal:not(.is-open):hover .home-banner-details {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
  }
  .home-banner--reveal:not(.is-open):hover .home-banner-arrow {
    color: #bbb;
    border-color: #444;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner,
  .home-banner::before,
  .home-banner-arrow,
  .home-banner-images img,
  .home-banner-front,
  .home-banner-details { transition: none; }
}

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
  border-bottom: 1px solid var(--border);
  padding: 72px 40px 64px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(204,0,0,0.07), transparent 60%),
    var(--bg);
}

.hero-inner { max-width: 840px; margin: 0 auto; }

.hero-kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.hero-headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 26px;
  /* Sized for the two-sentence headline: 26ch sets it in three full lines in
     both languages, instead of leaving the closing word alone on a fifth. */
  max-width: 26ch;
}

.hero-lede {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.75;
  color: #c9c9c9;
  max-width: 68ch;
  margin-bottom: 38px;
}

/* Death toll counter */
.toll {
  border-inline-start: 4px solid var(--accent);
  padding-block: 6px;
  padding-inline: 22px 0;
  margin: 0 0 40px;
}

.toll-figure {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.toll-caption {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: 12px;
}

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

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: #e60000; border-color: #e60000; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { display: block; width: 100%; text-align: center; }

.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Flip banners ──────────────────────────────────────────
   Three cards below the hero. At rest each shows only its title; on
   hover — or keyboard focus, or a tap where hovering is impossible —
   it rotates on its Y axis and the copy on the back comes up.       */
.banners {
  padding: 56px 40px 80px;
  background: var(--bg-surface);
}

.banners-inner { max-width: 1180px; margin: 0 auto; }

.banners-hint {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-sub);
  text-align: center;
  margin-bottom: 26px;
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* The card is the perspective origin; .flip-inner is what actually turns,
   so both faces share one 3D space and stay pinned to the same box. */
.flip-card {
  perspective: 1400px;
  height: 420px;
  cursor: pointer;
  outline: none;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner,
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front ── title only, over the site's red wash */
.flip-front {
  justify-content: flex-end;
  padding: 30px 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-glow), transparent 62%),
    var(--bg-elevated);
  transition: border-color var(--ease);
}
.flip-card:hover .flip-front,
.flip-card:focus-within .flip-front { border-color: var(--accent); }

.flip-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.flip-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The hover affordance: a short accent rule that runs out on approach. */
.flip-cue {
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 20px;
  background: var(--accent);
  transition: width var(--ease);
}
.flip-card:hover .flip-cue,
.flip-card:focus-within .flip-cue { width: 72px; }

/* Back ── the copy, pre-rotated so it lands face-on */
.flip-back {
  transform: rotateY(180deg);
  padding: 28px;
  background: var(--bg-elevated);
  border-color: var(--accent);
  overflow-y: auto;
}

.flip-back-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.flip-text {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.75;
  color: #c4c4c4;
  margin-bottom: 14px;
}

.flip-note {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--text-sub);
  margin-top: auto;
  padding-top: 14px;
}

.flip-link {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent);
  margin-top: auto;
  padding-top: 12px;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
}
.flip-link:hover { border-bottom-color: var(--accent); }

/* A hidden face must not swallow clicks — Safari still hit-tests through
   backface-visibility, so the links on the back are switched off until
   the card has actually turned. */
.flip-back { pointer-events: none; }
.flip-card:hover .flip-back,
.flip-card:focus-within .flip-back,
.flip-card.flipped .flip-back { pointer-events: auto; }

/* ── Middle card: imagery on both faces ── */
.flip-card--media .flip-front { padding: 0; justify-content: flex-end; }

.flip-media {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.flip-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.62);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.flip-card--media:hover .flip-media img { filter: grayscale(0.35) brightness(0.72); }

/* Title panel sits over the collage; the gradient keeps it legible
   whatever the photographs underneath happen to be. */
.flip-front-body {
  position: relative;
  padding: 30px 28px;
  background: linear-gradient(to top, rgba(10,10,10,0.96) 32%, rgba(10,10,10,0.72) 68%, transparent);
}

.flip-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.flip-thumbs img {
  width: 100%;
  height: 62px;
  object-fit: cover;
  border-radius: 3px;
  filter: grayscale(0.5);
}

/* Focus ring for keyboard users — :focus-visible only, so a mouse tap
   does not leave a ring behind on the card it just flipped. */
.flip-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Rotating a card is decorative; readers who ask for less motion get a
   straight cross-fade to the same content instead. */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .flip-card:hover .flip-inner,
  .flip-card:focus-within .flip-inner,
  .flip-card.flipped .flip-inner { transform: none; }
  .flip-back {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    backface-visibility: visible;
  }
  .flip-card:hover .flip-back,
  .flip-card:focus-within .flip-back,
  .flip-card.flipped .flip-back { opacity: 1; }
  .flip-cue, .flip-media img { transition: none; }
}

.inline-link { color: var(--accent); border-bottom: 1px solid rgba(204,0,0,0.4); }
.inline-link:hover { border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   MAP PAGES  (body.map-page)
   ═══════════════════════════════════════════════════════════ */
.map-layout {
  display: flex;
  height: 100%;
}

.map-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

/* Map fills the wrapper regardless of flex sizing */
.map-layout #map {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

/* ─── Side panels ───────────────────────────────────────── */
.side-panel {
  width: var(--panel-w);
  flex-shrink: 0;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--ease);
  z-index: 500;
}

.side-panel--left  { border-inline-end:   1px solid var(--border); }
.side-panel--right { border-inline-start: 1px solid var(--border); }

.side-panel.collapsed { width: var(--panel-mini-w); }

/* Panel header bar */
.panel-bar {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
  padding-inline: 14px 8px;
  border-bottom: 1px solid var(--border);
}
.side-panel--right .panel-bar { padding-inline: 8px 14px; }

.panel-bar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-sub);
  white-space: nowrap;
  transition: opacity var(--ease);
}
.side-panel.collapsed .panel-bar {
  justify-content: center;
  padding-inline: 0;
}
.side-panel.collapsed .panel-bar-title {
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.panel-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-sub);
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.panel-toggle:hover { color: var(--accent); background: #202020; }

.panel-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--ease);
}
/* Arrow points "outward" to collapse, "inward" to expand */
.side-panel--left  .panel-arrow            { transform: rotate(0deg); }
.side-panel--left.collapsed  .panel-arrow  { transform: rotate(180deg); }
.side-panel--right .panel-arrow            { transform: rotate(180deg); }
.side-panel--right.collapsed .panel-arrow  { transform: rotate(0deg); }

/* Panel body */
.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 14px 24px;
  transition: opacity var(--ease);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.side-panel.collapsed .panel-content { opacity: 0; pointer-events: none; }

.panel-content::-webkit-scrollbar       { width: 4px; }
.panel-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ─── Widgets ───────────────────────────────────────────── */
.widget { margin-bottom: 22px; }

.widget-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 9px;
  white-space: nowrap;
}

/* Inputs / selects / textareas */
.field {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 9px 11px;
  transition: border-color var(--ease);
}
.field:focus { outline: none; border-color: var(--accent); }
.field:disabled { opacity: 0.65; cursor: not-allowed; }
textarea.field { resize: vertical; min-height: 76px; }

/* Checkbox & radio groups */
.check-group, .radio-group { display: flex; flex-direction: column; gap: 9px; }

.check, .radio {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.check input, .radio input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.check input:disabled, .radio input:disabled { cursor: not-allowed; }

/* Range slider */
.range { padding: 0; accent-color: var(--accent); cursor: pointer; }
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 6px;
}

.panel-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-sub);
  margin-top: 10px;
  line-height: 1.5;
}

/* Stats box */
.stats-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: 4px;
  padding: 16px 16px 14px;
}
.stats-figure {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--accent);
}
.stats-caption {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 8px;
}

/* Source note */
.source-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-sub);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  (≤ 767px)   — desktop layout is untouched above this
   New controls below are hidden by default so desktop never sees them.
   ═══════════════════════════════════════════════════════════ */
#hamburger       { display: none; }
#mobile-backdrop { display: none; }
.mobile-tabbar   { display: none; }
.mobile-flowbar  { display: none; }
.drawer-grip     { display: none; }
.mobile-draw-confirm,
.mobile-edit-area { display: none; }

@media (max-width: 767px) {

  /* ── Top bar ── */
  #topnav { display: none; }                 /* hide desktop nav links */
  #hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  #hamburger:hover { color: var(--accent); }

  /* ── Sidebar → slide-in overlay ── */
  #sidebar,
  body.sidebar-collapsed #sidebar {          /* neutralise desktop collapse width */
    position: fixed;
    top: var(--topbar-h);
    inset-inline-start: 0;
    bottom: 0;
    width: 75%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform var(--ease);
    border-inline-end: 1px solid var(--border);
    z-index: 1200;
  }
  /* Slides in from the right edge when the page reads right-to-left. */
  [dir="rtl"] #sidebar,
  [dir="rtl"] body.sidebar-collapsed #sidebar { transform: translateX(100%); }
  body.mobile-nav-open #sidebar,
  [dir="rtl"] body.mobile-nav-open #sidebar { transform: translateX(0); }

  #sidebar-toggle { display: none; }         /* desktop collapse chevron */
  .nav-section-label { opacity: 1 !important; }
  #sidebar .sidenav-link { justify-content: flex-start; gap: 10px; padding: 10px 14px; }
  #sidebar .link-text { display: inline-block !important; opacity: 1 !important; }

  /* Darkening backdrop (sidebar or drawer open) */
  #mobile-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease);
    z-index: 1100;
  }
  /* Dim only for the nav sidebar. Drawers behave like a half-sheet:
     the map stays visible and interactive behind them, so area-filter
     selections visibly fly the map. */
  body.mobile-nav-open #mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Map pages: full-screen map ── */
  .map-wrap { width: 100%; }
  /* Keep low map controls above the contextual next-step action. */
  .map-layout { padding-bottom: 52px; }

  /* Side panels → bottom-sheet drawers */
  .side-panel,
  .side-panel.collapsed {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    width: auto;
    height: 50vh;
    max-height: 480px;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1300;
  }
  .side-panel.drawer-open { transform: translateY(0); }

  .panel-toggle { display: none; }           /* desktop collapse chevron */
  .panel-bar,
  .side-panel.collapsed .panel-bar {
    justify-content: flex-start;
    padding-inline: 14px 8px;
  }
  .side-panel--right .panel-bar,
  .side-panel--right.collapsed .panel-bar {
    justify-content: flex-start;
    padding-inline: 8px 14px;
  }
  .panel-bar-title {
    width: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  /* Drawer grip + close button */
  .drawer-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 30px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
  }
  .grip-bar {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }
  .drawer-close {
    position: absolute;
    inset-inline-end: 8px;
    top: 3px;
    width: 28px;
    height: 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .drawer-close:hover { color: var(--accent); }

  /* Bottom tab bar */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    height: 52px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    z-index: 1150;
  }
  .mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-sub);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
  }
  .mobile-tab + .mobile-tab { border-inline-start: 1px solid var(--border); }
  .mobile-tab.active { color: var(--accent); }

  /* Contribute uses one contextual action instead of Draw/Details menus. */
  body.contribute-page .mobile-tabbar { display: none; }
  body.contribute-page .mobile-flowbar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    min-height: 58px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(14,14,16,.9), var(--bg-surface));
    border-top: 1px solid var(--border);
    z-index: 1150;
  }
  .mobile-flowbar .btn { width: 100%; font-size: 14px; }
  body.drawer-open .mobile-flowbar { display: none; }
  body.identifying .mobile-flowbar { display: none; }
  .mobile-draw-confirm,
  .mobile-edit-area { display: block; }
  .mobile-draw-confirm { margin-top: 10px; }
  .mobile-edit-area { margin-bottom: 14px; }

  /* ── Homepage ── */
  .hero    { padding: 40px 20px 36px; }
  .banners { padding: 36px 20px 56px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .flip-grid { grid-template-columns: 1fr; gap: 16px; }
  .flip-card { height: 340px; }
}

/* Three cards need room for the titles to sit on two lines at most;
   below this they go two-up, with the media card spanning the row. */
@media (max-width: 1080px) and (min-width: 768px) {
  .flip-grid { grid-template-columns: repeat(2, 1fr); }
  .flip-card--media { grid-column: 1 / -1; height: 360px; }
  .flip-card--media .flip-media { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   VIDEO MARKERS + MODAL  (Explore page)
   ═══════════════════════════════════════════════════════════ */
/* Strip Leaflet's default divIcon white box */
.vmarker-wrap { background: none !important; border: none !important; }

.vmarker {
  position: relative;
  width: 48px;
  height: 48px;
}

/* Circular video-frame thumbnail — background-image guarantees a clean
   round crop regardless of the source image's aspect ratio. */
.vmarker-thumb {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Small, subtle play indicator */
.vmarker-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-30%, -50%);
  border-left: 11px solid rgba(255, 255, 255, 0.92);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

/* Cluster: small "+N" badge in the top-right corner */
.vmarker-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px;
  border: 1.5px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── Hover-to-play preview ── */
.vmarker { transition: transform 0.25s ease; }
.vmarker:hover { transform: scale(1.1); }           /* subtle cue before playback */
/* big playback circle (48px → 216px). Explicit :hover variant so it can
   never lose the specificity race against the hover rule above. */
.vmarker.previewing,
.vmarker.previewing:hover { transform: scale(4.5); }
/* lift the hovered marker above its neighbours (Leaflet sets inline z-index) */
.leaflet-marker-icon.vmarker-wrap:hover { z-index: 10000 !important; }

.vmarker-video {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
  background: #000;
  pointer-events: none;   /* clicks still hit the marker → modal */
}

.vmarker.previewing .vmarker-play { display: none; }
.vmarker.previewing .vmarker-badge { z-index: 2; }

/* ── Video modal ── */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.video-modal.open { display: flex; }

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.video-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, 92vw);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.video-modal-frame { background: #000; }

#video-modal-player {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: #000;
}

.video-modal-meta { padding: 14px 18px 18px; }
.video-modal-meta h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  margin-bottom: 6px;
}
.video-modal-prov {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.video-modal-prov::before { content: '\25C6\00A0'; }

.video-modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.video-modal-close:hover { color: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   AREA FILTER  (Explore right panel)
   ═══════════════════════════════════════════════════════════ */
.area-toggle {
  display: flex;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.area-tab {
  flex: 1;
  padding: 7px 8px;
  background: var(--bg-elevated);
  color: var(--text-sub);
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.area-tab + .area-tab { border-inline-start: 1px solid var(--border-strong); }
.area-tab:hover { color: var(--text); }
.area-tab.active { background: var(--accent); color: #fff; }

.area-list {
  max-height: 190px;
  overflow-y: auto;
  padding-inline-end: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.area-list::-webkit-scrollbar { width: 4px; }
.area-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.area-clear {
  width: 100%;
  margin-top: 10px;
  padding: 7px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text-sub);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.area-clear:hover { color: var(--accent); border-color: var(--accent); }

.area-search { margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════
   CONTRIBUTE PAGE — view tabs + "Identify videos" gallery
   ═══════════════════════════════════════════════════════════ */
/* Only the contribute page stacks tabs above the map; /map/explore is
   untouched by these rules. */
body.contribute-page #main { display: flex; flex-direction: column; }
body.contribute-page .map-layout { height: auto; flex: 1; min-height: 0; }
/* `display: flex` above would otherwise beat the UA's [hidden] rule, leaving
   both views stacked on screen when switching tabs. */
body.contribute-page .map-layout[hidden],
body.contribute-page .identify-view[hidden] { display: none; }

.contrib-tabs {
  flex: none;
  display: flex;
  justify-content: center;   /* centred so both routes in are noticed */
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.ctab {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-sub);
  padding: 7px 15px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.ctab:hover { color: var(--text); border-color: var(--accent); }
.ctab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ctab-n:not(:empty) {
  display: inline-block;
  margin-inline-start: 6px;
  background: rgba(0, 0, 0, .28);
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 11px;
}
.ctab:not(.active) .ctab-n:not(:empty) { background: var(--accent); color: #fff; }

/* Identify gallery */
.identify-view { flex: 1; min-height: 0; overflow-y: auto; }
.identify-inner { max-width: 1100px; margin: 0 auto; padding: 30px 22px 60px; }
.identify-head { margin-bottom: 26px; }
.identify-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(22px, 3vw, 32px); color: var(--text); margin-bottom: 12px;
}
.identify-sub {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.7;
  color: #c4c4c4; max-width: 68ch;
}
.identify-empty { color: var(--text-sub); font-size: 14px; padding: 30px 0; }

.identify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.idcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.idcard.is-done { border-color: #1d5c36; }
.idvideo { width: 100%; height: 172px; object-fit: cover; background: #000; display: block; }
.idmeta { padding: 11px 13px; }
.idtitle { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; word-break: break-word; }
.idsub { font-size: 11.5px; color: var(--text-sub); margin-bottom: 10px; }
.idthanks { font-size: 12.5px; color: #4ade80; line-height: 1.5; }

.idform { padding: 0 13px 13px; border-top: 1px solid var(--border); padding-top: 12px; }
.idrow { margin-bottom: 9px; }
.idrow-2 { display: flex; gap: 9px; }
.idrow-2 > label { flex: 1; min-width: 0; }
.idform label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--text-sub); margin-bottom: 4px;
}
.idform .field { margin-top: 4px; font-size: 13px; padding: 7px 9px; }
.idhint { font-size: 11.5px; color: var(--text-sub); margin: 2px 0 10px; line-height: 1.5; }
.idmsg { font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
.idmsg.err { color: #ff6b6b; }

/* Chosen pin shown inside a card's form */
.pinrow .pinned {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 7px 9px; font-size: 12.5px; color: var(--text);
}
.pinrow .pin-val { flex: 1; font-variant-numeric: tabular-nums; }
.pinrow .pin-edit, .pinrow .pin-clear {
  background: none; border: 1px solid var(--border-strong); color: var(--text-sub);
  border-radius: 5px; padding: 3px 8px; font-size: 11.5px; cursor: pointer;
}
.pinrow .pin-edit:hover, .pinrow .pin-clear:hover { color: var(--accent); border-color: var(--accent); }

/* ── Pin picker modal (shared by every card) ── */
.pin-modal { position: fixed; inset: 0; z-index: 3000; display: flex; }
.pin-modal[hidden] { display: none; }
.pin-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.pin-dialog {
  position: relative; margin: auto;
  width: min(900px, 94vw); height: min(680px, 90vh);
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.pin-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border); flex: none;
}
.pin-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.pin-hint { font-size: 12px; color: var(--text-sub); line-height: 1.5; max-width: 60ch; }
.pin-x {
  background: none; border: none; color: var(--text-sub);
  font-size: 17px; cursor: pointer; line-height: 1; padding: 2px 4px;
}
.pin-x:hover { color: var(--accent); }
.pin-map { flex: 1; min-height: 0; }
.pin-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--border); flex: none; flex-wrap: wrap;
}
.pin-coords { font-size: 12.5px; color: var(--text-sub); font-variant-numeric: tabular-nums; }

/* Teardrop pin drawn in CSS (no image assets shipped with this Leaflet build) */
.pin-marker { background: none; border: none; cursor: grab; }
.pin-marker:active { cursor: grabbing; }
.pin-marker-dot {
  display: block; width: 26px; height: 26px;
  background: var(--accent);
  border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}
.pin-marker-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: #fff; border-radius: 50%;
}
.pin-actions { display: flex; gap: 8px; }
.pin-actions .btn { padding: 8px 16px; font-size: 13px; }
.pin-actions .btn:disabled { opacity: .45; cursor: default; }
body.pin-open-body { overflow: hidden; }

@media (max-width: 767px) {
  .identify-inner { padding: 22px 16px 70px; }
  .identify-grid { grid-template-columns: 1fr; }
  /* Contribution flow controls are hidden while identifying. */
  body.identifying .mobile-tabbar,
  body.identifying .mobile-flowbar { display: none; }
  /* Full-screen picker on phones — small map panes are unusable for pinning */
  .pin-dialog { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; border: none; }
  .pin-foot { justify-content: stretch; }
  .pin-actions { flex: 1; }
  .pin-actions .btn { flex: 1; }
  .pin-coords { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   CONTRIBUTE PAGE — drawing tools + form
   ═══════════════════════════════════════════════════════════ */
.tool-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.tool-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 11px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: start;
  transition: border-color var(--ease), background var(--ease);
}
.tool-btn:hover { border-color: var(--accent); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-ic { font-size: 15px; width: 16px; text-align: center; }

.tool-hint { font-size: 12px; color: var(--text-sub); line-height: 1.55; margin-top: 4px; }
.tool-hint b { color: var(--text); font-weight: 600; }

/* Snap-to-street toggle */
.snap-toggle {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 2px; padding: 8px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  user-select: none;
}
.snap-toggle:hover { border-color: var(--accent); }
.snap-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.snap-ic { font-size: 14px; }

/* Undo / redo row */
.edit-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.edit-btn { flex: 1; padding: 8px 6px; font-size: 12.5px; }
.edit-btn:disabled { opacity: 0.4; cursor: default; }

.draw-status { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.draw-status #shape-count { color: var(--accent); font-weight: 700; font-size: 16px; }

.req { color: var(--accent); }

.date-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-btn {
  padding: 9px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color var(--ease), background var(--ease);
}
.date-btn:hover { border-color: var(--accent); }
.date-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.time-group .time-btn:last-child { grid-column: 1 / -1; }

.form-msg { font-size: 12.5px; margin-top: 10px; line-height: 1.5; min-height: 16px; }
.form-msg.err { color: #ff6b6b; }
.form-msg.ok  { color: #3fd07a; }

/* ═══════════════════════════════════════════════════════════
   CONTRIBUTE — evidence attachments
   ═══════════════════════════════════════════════════════════ */
.opt-label { color: var(--text-sub); font-weight: 400; text-transform: none; letter-spacing: 0; }

.evidence-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.evidence-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 7px 9px; font-size: 12.5px;
}
.ev-kind { flex-shrink: 0; }
.ev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-size { color: var(--text-sub); font-size: 11.5px; flex-shrink: 0; }
.ev-remove {
  flex-shrink: 0; width: 22px; height: 22px;
  background: none; border: 1px solid var(--border-strong); border-radius: 4px;
  color: var(--text-sub); font-size: 11px; line-height: 1; cursor: pointer;
}
.ev-remove:hover { color: var(--accent); border-color: var(--accent); }

.evidence-limits { font-size: 11.5px; color: var(--text-sub); margin-top: 8px; }

.tips { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; }
.tips summary {
  font-size: 12.5px; font-weight: 600; color: var(--text-sub);
  cursor: pointer; user-select: none;
}
.tips summary:hover { color: var(--text); }
.tips[open] summary { color: var(--text); margin-bottom: 8px; }
.tips ul { margin: 0; padding-inline-start: 18px; }
.tips li { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin-bottom: 7px; }
.tips li b { color: var(--text); }

.upload-progress {
  height: 6px; background: var(--bg-elevated); border-radius: 3px;
  overflow: hidden; margin-top: 12px; display: none;
}
.upload-progress.on { display: block; }
.upload-bar { height: 100%; width: 0; background: var(--accent); transition: width .1s; }

/* ═══════════════════════════════════════════════════════════
   ARTICLES — list + paper reader
   ═══════════════════════════════════════════════════════════ */
.articles-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 28px 80px;
}

.articles-head { margin-bottom: 40px; }
.articles-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--text);
  margin: 10px 0 14px;
}
.articles-sub {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: #c4c4c4;
  max-width: 62ch;
}
.articles-empty { color: var(--text-sub); font-size: 14px; padding: 30px 0; }

/* ── Under-construction placeholder (Mortuary / Funeral) ── */
.uc {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  padding: 46px 30px;
  text-align: center;
  max-width: 62ch;
}
.uc-badge {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 14px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.uc-text { color: var(--text); font-size: 15px; line-height: 1.65; margin: 0 auto 10px; max-width: 46ch; }
.uc-sub  { color: var(--text-sub); font-size: 13px; margin: 0; }
@media (max-width: 767px) { .uc { padding: 34px 20px; } }

/* ── Statistics hub: card grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr; } }

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(204,0,0,0.05), transparent 55%),
    var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 24px;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.stat-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Latest analysis gets the full-width featured slot */
.stat-card.featured {
  grid-column: 1 / -1;
  border-inline-start: 4px solid var(--accent);
  padding: 30px 28px;
}
.stat-card.featured .sc-title { font-size: clamp(22px, 3vw, 30px); max-width: 34ch; }

.sc-top { display: flex; align-items: center; gap: 12px; }
.sc-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(204, 0, 0, 0.12);
  border: 1px solid rgba(204, 0, 0, 0.4);
  border-radius: 12px;
  padding: 4px 12px;
  white-space: nowrap;
}
.sc-chip-mute {
  color: var(--text-sub);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.sc-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sub);
}
.sc-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--text);
  flex: 1;
}
.stat-card:hover .sc-title { color: #fff; }
.sc-read { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Reader header (chip + date above the paper) */
.paper-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Back link */
.article-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 26px;
}
.article-back:hover { color: var(--accent); }
.article-back-bottom { margin: 34px 0 0; }

/* ── The paper itself ── */
.paper {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.8;
  color: #d6d6d6;
}
.paper-date {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-sub);
}
.paper h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 700;
}
.paper h2 {
  font-size: 24px;
  color: #fff;
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-strong);
  font-weight: 700;
}
.paper h3 {
  font-size: 19px;
  color: #f0f0f0;
  margin: 32px 0 12px;
  font-weight: 700;
}
.paper h4, .paper h5, .paper h6 {
  font-size: 16px; color: #eee; margin: 24px 0 10px; font-weight: 700;
}
.paper p { margin: 0 0 16px; }
.paper strong { color: #fff; }
.paper em { color: #e0e0e0; }
.paper a { color: var(--accent); border-bottom: 1px solid rgba(204,0,0,0.4); }
.paper a:hover { border-bottom-color: var(--accent); }
.paper hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin: 36px 0;
}
.paper ul, .paper ol { margin: 0 0 16px; padding-inline-start: 26px; }
.paper li { margin-bottom: 8px; }
.paper code {
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 6px;
  color: #eee;
}
.paper pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 18px;
}
.paper pre code { background: none; border: none; padding: 0; }

/* Key-findings blockquote — the highlighted result box */
.paper blockquote {
  background: rgba(204, 0, 0, 0.06);
  border-inline-start: 4px solid var(--accent);
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  padding: 16px 22px;
  margin: 26px 0;
}
.paper blockquote p { margin: 0 0 8px; color: #ececec; }
.paper blockquote p:last-child { margin-bottom: 0; }

/* Trusted HTML embeds inside articles */
.paper .md-embed { margin: 26px 0; }

/* Statistical tables */
.paper .tbl-wrap { overflow-x: auto; margin: 22px 0; }
.paper table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
}
.paper thead th {
  text-align: start;
  font-weight: 700;
  color: #fff;
  background: var(--bg-elevated);
  border-bottom: 2px solid var(--accent);
  padding: 10px 12px;
  white-space: nowrap;
}
.paper tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: #cfcfcf;
  vertical-align: top;
}
.paper tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.paper tbody tr:hover td { background: rgba(204, 0, 0, 0.05); }

@media (max-width: 767px) {
  .articles-wrap { padding: 32px 18px 60px; }
  .paper { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */
.contact-wrap { max-width: 680px; }
.contact-form .widget { margin-bottom: 26px; }
.contact-form .field { font-size: 14px; }
.contact-form select.field { cursor: pointer; }
.contact-form textarea.field { min-height: 170px; line-height: 1.65; }

.contact-hint,
.contact-privacy {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-sub);
  margin-top: 8px;
}
.contact-privacy {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Shown only on a plaintext connection — see lib/contact.js. */
.contact-insecure {
  border: 1px solid var(--accent);
  border-inline-start: 4px solid var(--accent);
  background: rgba(204, 0, 0, 0.07);
  border-radius: 6px;
  padding: 13px 16px;
  margin-bottom: 26px;
  font-size: 13px;
  line-height: 1.65;
  color: #f0c9c9;
}
.contact-insecure[hidden] { display: none; }

/* Honeypot: out of sight and out of the tab order, but not display:none —
   some bots skip fields that are obviously hidden. */
.contact-hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER  (injected into #topbar by lib/i18n.js)
   ═══════════════════════════════════════════════════════════ */
.lang-switch {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}

.lang-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.lang-btn + .lang-btn { border-inline-start: 1px solid var(--border-strong); }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--accent); color: #fff; }
/* Each button is labelled in its own language, so it must render in that
   language's typeface — otherwise "فارسی" falls back to a system font. */
.lang-btn[lang="fa"] { font-family: 'Vazirmatn', var(--font-ui); font-size: 13px; }

.lang-short { display: none; }

/* The switcher is a fourth item in a top bar that already holds the
   wordmark and the menu button, so on a phone it drops to short codes and
   the bar tightens up — otherwise the hamburger is pushed off-screen. */
@media (max-width: 767px) {
  #topbar { padding: 0 12px; gap: 10px; }
  #logo { font-size: 18px; gap: 8px; }
  .lang-full  { display: none; }
  .lang-short { display: inline; }
  .lang-btn { padding: 7px 11px; font-size: 12px; }
}

/* Below ~350px there is no room for the wordmark; the mark alone carries it. */
@media (max-width: 349px) {
  #logo .logo-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PERSIAN / FARSI  —  typeface + right-to-left layout
   ═══════════════════════════════════════════════════════════ */

/* ── Typeface ──────────────────────────────────────────────
   Vazirmatn replaces both roles. Georgia (--font-serif) has no Persian
   glyphs at all, so leaving it in place would drop editorial copy into
   an arbitrary system fallback.                                        */
[lang="fa"] {
  --font-ui:      'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-serif:   'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  /* Display face for headings, the wordmark and the big figures. Falls back
     to the body face, so nothing loses Persian shaping if it fails to load. */
  --font-display: 'Estedad', 'Vazirmatn', system-ui, Tahoma, sans-serif;
}

/* ── Persian display roles ──────────────────────────────────────────
   Everything a reader parses as a *title* rather than as prose. Body copy,
   form labels, buttons and map chrome deliberately stay on Vazirmatn. */
[lang="fa"] .logo-text,
[lang="fa"] .hero-headline,
[lang="fa"] .toll-figure,
[lang="fa"] .about-title,
[lang="fa"] .flip-title,
[lang="fa"] .flip-back-title,
[lang="fa"] .articles-title,
[lang="fa"] .identify-title,
[lang="fa"] .sc-title,
[lang="fa"] .stats-figure,
[lang="fa"] .video-modal-meta h3,
[lang="fa"] .pin-title,
[lang="fa"] .idtitle {
  font-family: var(--font-display);
}

[lang="fa"] .home-banner-copy strong,
[lang="fa"] .home-banner-details-title,
[lang="fa"] .story-video-copy strong,
[lang="fa"] .story-pullquote,
[lang="fa"] .story-closing {
  font-family: var(--font-display);
}

/* A Persian-language article gets the display face for its headings too;
   a Latin one is already excluded by the [dir="ltr"] rule further down. */
[lang="fa"] .paper[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
}

/* Estedad runs a little wider and taller than Vazirmatn at the same size.
   These headings were tuned against Vazirmatn's metrics, so pull the
   tracking in slightly and let the tall Persian ascenders breathe. */
[lang="fa"] .hero-headline,
[lang="fa"] .articles-title,
[lang="fa"] .identify-title {
  letter-spacing: -0.015em;
}
[lang="fa"] .toll-figure,
[lang="fa"] .stats-figure {
  line-height: 1.25;
}

/* Persian script is cursive: letters join, and letter-spacing physically
   breaks those joins apart. Every tracked-out label in the chrome above
   must therefore reset to normal spacing. `text-transform: uppercase` is
   a no-op on Persian but still applies to any Latin left in the string,
   so it goes too. */
[lang="fa"] #topnav a,
[lang="fa"] .nav-section-label,
[lang="fa"] .sidenav-link,
[lang="fa"] .panel-bar-title,
[lang="fa"] .widget-label,
[lang="fa"] .hero-kicker,
[lang="fa"] .banners-hint,
[lang="fa"] .flip-eyebrow,
[lang="fa"] .flip-title,
[lang="fa"] .flip-link,
[lang="fa"] .toll-caption,
[lang="fa"] .toll-figure,
[lang="fa"] .hero-headline,
[lang="fa"] .btn,
[lang="fa"] .idform label,
[lang="fa"] .uc-badge,
[lang="fa"] .sc-chip,
[lang="fa"] .sc-date,
[lang="fa"] .paper-date,
[lang="fa"] .video-modal-prov,
[lang="fa"] .mobile-tab,
[lang="fa"] .area-tab {
  letter-spacing: normal;
  text-transform: none;
}

[lang="fa"] .home-banner-label,
[lang="fa"] .home-banner-details-subtitle,
[lang="fa"] .story-live-mark,
[lang="fa"] .story-back-kicker,
[lang="fa"] .story-explore-link,
[lang="fa"] .home-banner-tap-hint {
  letter-spacing: normal;
  text-transform: none;
}

/* Keep the portrait treatment physically identical across languages. The
   lower copy remains in the empty left portion of the frame and only its
   reading direction changes, so it never crosses the subject's face. */
[dir="rtl"] .story-video-copy {
  left: 26px;
  right: auto;
  direction: rtl;
  text-align: right;
}
/* The Instagram account chrome is anchored to the physical top-left in both
   languages; mirroring it put the avatar and handle over the subject's face. */
[dir="rtl"] .story-video-topline { direction: ltr; }
[dir="rtl"] .story-account-meta small { direction: rtl; text-align: left; }
[dir="rtl"] .story-social-row { direction: rtl; }

/* The Persian display face is taller and its translated labels run wider.
   Keep the entire overlay in the dark left zone, clear of the portrait. */
[lang="fa"] .story-video-copy {
  left: 22px;
  right: auto;
  width: min(61%, 250px);
  gap: 7px;
}
[lang="fa"] .story-video-copy strong {
  max-width: 10ch;
  font-size: clamp(25px, 2.55vw, 38px);
  line-height: 1.28;
  letter-spacing: normal;
}
[lang="fa"] .story-social-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
}
[lang="fa"] .story-social-metric { gap: 4px; }
[lang="fa"] .story-social-metric svg {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
[lang="fa"] .story-social-metric b {
  font-size: 13px;
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 767px) {
  [dir="rtl"] .story-video-copy { left: 22px; right: auto; }
  [lang="fa"] .story-video-copy { width: min(68%, 245px); }
  [lang="fa"] .story-video-copy strong { font-size: 27px; }
}

/* Persian sits lower and denser than Latin at the same size; a little
   more leading and a hair more size keeps long paragraphs readable. */
[lang="fa"] body,
[lang="fa"] .hero-lede,
[lang="fa"] .about-text,
[lang="fa"] .flip-text,
[lang="fa"] .articles-sub,
[lang="fa"] .identify-sub,
[lang="fa"] .source-note,
[lang="fa"] .tool-hint,
[lang="fa"] .panel-note {
  line-height: 1.9;
}
[lang="fa"] .hero-headline { line-height: 1.45; }   /* measure inherited: 26ch */
[lang="fa"] .articles-title,
[lang="fa"] .identify-title { line-height: 1.5; }
/* Persian has no italic tradition — synthetic obliques look broken. */
[lang="fa"] .about-footnote,
[lang="fa"] .flip-note,
[lang="fa"] .panel-note { font-style: normal; }
/* Persian titles run taller; the cards need the extra room. */
[lang="fa"] .flip-title { line-height: 1.5; }
[lang="fa"] .flip-card { height: 460px; }

/* ── Right-to-left layout ─────────────────────────────────
   Structural mirroring is handled by the logical properties used
   throughout this file (border-inline-*, padding-inline-*, inset-inline-*).
   Only things CSS cannot flip on its own are listed below.              */

/* Collapse chevrons: the SVG points left, so each one needs the opposite
   rotation once the panel it belongs to has moved to the other side. */
[dir="rtl"] .toggle-icon                              { transform: rotate(180deg); }
[dir="rtl"] body.sidebar-collapsed .toggle-icon       { transform: rotate(0deg); }
[dir="rtl"] .side-panel--left  .panel-arrow           { transform: rotate(180deg); }
[dir="rtl"] .side-panel--left.collapsed  .panel-arrow { transform: rotate(0deg); }
[dir="rtl"] .side-panel--right .panel-arrow           { transform: rotate(0deg); }
[dir="rtl"] .side-panel--right.collapsed .panel-arrow { transform: rotate(180deg); }

/* Machine-format fields stay left-to-right — an ISO date or a coordinate
   is not Persian text and gets scrambled by bidi reordering otherwise. */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
}
[dir="rtl"] .pin-coords,
[dir="rtl"] .pinrow .pin-val {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Latin runs inside Persian copy (file names, "HandBrake", "720p") must be
   isolated so the surrounding RTL flow doesn't reorder them. */
[dir="rtl"] .ev-name,
[dir="rtl"] .idtitle {
  unicode-bidi: isolate;
}

/* The play triangle and the teardrop map pin are pictograms, not text:
   media controls and map markers are never mirrored. Restated here so a
   future logical-property sweep doesn't accidentally flip them. */
[dir="rtl"] .vmarker-play {
  border-left: 11px solid rgba(255, 255, 255, 0.92);
  border-right: 0;
}
[dir="rtl"] .pin-marker-dot {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* Leaflet builds its own DOM and assumes LTR. */
[dir="rtl"] .leaflet-container { direction: ltr; }
[dir="rtl"] .leaflet-control-attribution {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 4px !important;
}

/* Articles are published as written and are never machine-translated, so
   the reader takes its direction from the paper's own text (set in
   lib/articles.js). An English paper stays left-to-right inside a Persian
   page; a Persian one flips on its own. */
.paper { text-align: start; }

/* …and a Latin paper keeps its serif rather than inheriting the Persian
   sans from the surrounding page. Long-form copy is where the typeface
   carries the most weight, so it is worth honouring per article. */
[lang="fa"] .paper[dir="ltr"] {
  font-family: var(--font-serif-latin);
  line-height: 1.8;
}
[lang="fa"] .paper[dir="ltr"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif-latin);
}