/* Fonts, served from /vendor/ (SIL Open Font License, see OFL.txt beside
   each). npm run build puts these rules at the top of every stylesheet.
   Manrope is one variable file per alphabet for weights 500 to 700, so text
   set at 400 shows at 500. The letters in the cases need only Latin and
   Latin Extended (ć, š, ş, ł). Cormorant Garamond is only the title of the
   welcome screen. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/vendor/manrope-v20/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/vendor/manrope-v20/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/vendor/cormorant-garamond-v21/cormorant-garamond-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The map page (/) and the year pages (/2026/ and so on). npm run build
   writes it to /static/ under a hashed name. */

/* Year rail */
.seo-static-content {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 1450;
  background: rgba(26, 26, 26, 0.94);
  border: 1px solid #333;
  border-radius: 14px;
  color: #ddd;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  font-family: 'Manrope', sans-serif;
  padding: 10px 8px;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
}

.seo-static-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.seo-year-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-year-nav a {
  color: #fff;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  min-width: 48px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid #555;
  background: #242424;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-sizing: border-box;
}

/* The case list is a different kind of link than the years above it. */
.seo-archive-nav {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #3a3a3a;
}

.seo-year-nav a[aria-current="page"] {
  background: #c0392b;
  border-color: #c0392b;
}

.seo-year-nav a:hover:not([aria-current="page"]) {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.seo-year-nav a {
  transition: background 0.15s ease, border-color 0.15s ease;
}

@media (max-width: 680px) {
  .seo-static-content {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 20px);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .seo-static-content > .seo-year-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* On phones the case list sits at the end of the scrolling year row. */
  .seo-static-content > .seo-archive-nav {
    flex: none;
    margin-top: 0;
    padding: 0 0 2px 8px;
    border-top: 0;
    border-left: 1px solid #3a3a3a;
  }

  .seo-year-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .seo-year-nav a {
    flex: 0 0 auto;
  }

  /* Each chip looks 31 px tall but takes taps across 44 px. The rows borrow
     the room for that from the bar's padding, so nothing moves. */
  .seo-static-content > .seo-year-nav,
  .seo-static-content > .seo-archive-nav {
    padding-top: 7px;
    padding-bottom: 8px;
    margin-top: -7px;
    margin-bottom: -6px;
  }

  .seo-year-nav a {
    position: relative;
  }

  .seo-year-nav a::after {
    content: '';
    position: absolute;
    inset: -7px -3px;
  }

  /* Push legend above the year nav bar on year pages */
  .seo-static-content ~ .map-legend {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  }
}

/* Map, sidebar, dialogs */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
#map { height: 100vh; }
/* Hamburger button */
.hamburger-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1700;
  width: 38px;
  height: 38px;
  background: #1f1f1f;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}
.hamburger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transform-origin: center;
}
.hamburger-btn.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sidebar overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1590;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar panel */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 240px;
  background: #1a1a1a;
  z-index: 1600;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  padding: 68px 0 24px;
  box-sizing: border-box;
  overflow-y: auto;
}
.sidebar.is-open {
  transform: translateX(0);
}
/* The title bar of the filter sheet on phones */
.sidebar-sheet-head {
  display: none;
}
/* Accordion sections */
.sidebar-section {
  border-bottom: 1px solid #2a2a2a;
}
.sidebar > .sidebar-section:last-child {
  border-bottom: none;
}
.sidebar-section-header {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  color: #999;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  transition: color 0.18s ease;
}
.sidebar-section-header:hover {
  color: #c0392b;
}
.sidebar-section-header.is-open {
  color: #fff;
}
.sidebar-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.28s ease;
}
.filter-badge {
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 7px;
  background: #c0392b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 20px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
.filter-badge.is-active {
  display: inline-block;
}
.sidebar-section-header.is-open .sidebar-chevron {
  transform: rotate(180deg);
}
.sidebar-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
#yearContent.is-open,
#methodContent.is-open,
#genderContent.is-open,
#statusContent.is-open,
#neighborhoodContent.is-open {
  max-height: 80px;
}
#searchContent.is-open {
  max-height: 450px;
}
.sidebar-select {
  width: 100%;
  appearance: auto;
  border: 1px solid #333;
  border-radius: 8px;
  background: #2a2a2a;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
  margin-bottom: 12px;
}

/* Search panel inside sidebar */
.sidebar .map-search {
  width: 100%;
  margin-bottom: 12px;
  background: #242424;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.sidebar .map-search-title {
  color: #ccc;
  font-family: 'Manrope', sans-serif;
}
.sidebar .map-search-close {
  background: #333;
  border-color: #444;
  color: #ccc;
}
.sidebar .map-search input {
  background: #2a2a2a;
  border-color: #444;
  color: #fff;
}
.sidebar .map-search input::placeholder {
  color: #777;
}
/* Light, or it disappears into the dark panel. */
.sidebar .map-search-row button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.sidebar .map-search-results {
  color: #ccc;
}
.language-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1600;
  appearance: none;
  border: 1px solid #242424;
  border-radius: 10px;
  background: #242424;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  min-width: 108px;
  padding: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}
.instagram-link {
  position: fixed;
  top: 10px;
  right: 128px;
  z-index: 1600;
  width: 34px;
  height: 34px;
  appearance: none;
  border: 1px solid #242424;
  border-radius: 10px;
  background: #242424;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease;
}
.instagram-link svg {
  width: 17px;
  height: 17px;
}
.map-search {
  width: min(340px, calc(100vw - 20px));
}
.map-search.is-hidden {
  display: none;
}
.map-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.map-search-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2a2a2a;
  margin-bottom: 0;
}
.map-search-close {
  border: 1px solid #d5d5d5;
  border-radius: 999px;
  background: #fff;
  color: #444;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.map-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.map-search input {
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.map-search button {
  border: 1px solid #242424;
  border-radius: 8px;
  background: #242424;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  cursor: pointer;
}
.map-search button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.map-search-results {
  margin-top: 8px;
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
  color: #333;
  line-height: 1.4;
}
.search-result-address {
  font-size: 11px;
  color: #777;
  margin-bottom: 6px;
}
.search-result-closest {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
}
.search-result-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 2px;
}
.sidebar .search-result-closest {
  color: #fff;
}
.sidebar .search-result-address {
  color: #888;
}
.map-search-results ul {
  margin: 6px 0 0;
  padding-left: 16px;
}
.map-search-results li {
  margin-bottom: 4px;
}
.map-search-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.map-search-back {
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}
.map-search-open {
  display: none;
}
/* Case dossier. Desktop: photo and story side by side, the story scrolls
   inside its column and the source stays pinned below it. Phones: a
   full-height sheet with the photo on top and the source pinned to the
   bottom of the screen. Cases without a photo get a single column. */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(12, 10, 9, 0.62);
}
.story-modal.is-open {
  display: flex;
}
.story-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(88vh, 800px);
  max-height: min(88dvh, 800px);
  overflow: hidden;
  border-radius: 16px;
  background: #fbf8f4;
  color: #1f1f1f;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: story-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-modal-card.has-media {
  width: min(1100px, 100%);
  min-height: min(540px, 88vh);
  min-height: min(540px, 88dvh);
}
@keyframes story-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.story-modal-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
}
.story-modal-close,
.story-modal-share {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.story-modal-close {
  background: #1f1f1f;
  color: #fff;
}
.story-modal-share {
  background: rgba(31, 31, 31, 0.07);
  color: #333;
}
.story-modal-share:hover {
  background: #c0392b;
  color: #fff;
}
/* Copy toast */
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.story-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.has-media .story-modal-content {
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
}

/* Photo column: the photo is shown whole, over a blurred copy of itself. */
.story-modal-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #141210;
  color: #fff;
}
.story-media-frame {
  position: absolute;
  inset: 0;
  margin: 0;
}
.story-media-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.5) saturate(1.1);
  transform: scale(1.2);
}
.story-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 22px 18px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.story-modal-slideshow,
.story-modal-slides,
.story-modal-slides-track {
  position: absolute;
  inset: 0;
}
.story-modal-slides {
  overflow: hidden;
}
.story-modal-slides-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.story-modal-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.story-modal-slide-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.story-modal-slide-btn[data-dir="-1"] { left: 14px; }
.story-modal-slide-btn[data-dir="1"] { right: 14px; }
.story-modal-slide-btn:hover {
  background: #c0392b;
}
.story-modal-slide-dots {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
}
.story-modal-slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.18s ease;
}
.story-modal-slide-dot.is-active {
  background: #fff;
}

/* Story column */
.story-modal-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.story-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 36px 6px;
}
.story-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 96px 16px 0;
}
.story-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #efe8de;
  color: #3a3631;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story-tag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.story-tag.is-unsolved {
  background: rgba(192, 57, 43, 0.12);
  color: #a93226;
}
.story-tag.is-cold {
  background: #2980b9;
  color: #fff;
}
.story-modal-title {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.18;
  color: #111;
}
.story-modal-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid #e4dbcf;
  border-bottom: 1px solid #e4dbcf;
}
.story-modal-facts div {
  min-width: 0;
}
.story-modal-facts dt {
  margin-bottom: 3px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a938c;
}
.story-modal-facts dd {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #2b2724;
  overflow-wrap: anywhere;
}
.story-modal-story {
  margin: 0 0 22px;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  color: #2b2724;
  white-space: pre-line;
}
.story-modal-story::first-letter {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1;
  color: #7b211a;
}
.story-modal-story.is-empty::first-letter {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.story-modal-title:first-child {
  margin-right: 96px;
}
.story-modal-foot {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 14px 36px 16px;
  border-top: 1px solid #e4dbcf;
  background: #fbf8f4;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #8a837c;
}
/* Fades the last lines of a story that continues below the fold. */
.story-modal-foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 56px;
  background: linear-gradient(rgba(251, 248, 244, 0), #fbf8f4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.story-modal-body.has-more .story-modal-foot::before {
  opacity: 1;
}
.story-modal-foot-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a938c;
}
.story-modal-foot a {
  color: #7b211a;
  font-weight: 700;
  text-decoration: none;
}
.story-modal-foot a:hover {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .story-modal-card,
  .story-modal-slides-track,
  .sidebar,
  .sidebar-overlay {
    animation: none;
    transition: none;
  }
}
@keyframes story-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  /* The dossier becomes a full-height sheet: photo on top, then the
     story, with the source pinned to the bottom of the screen. */
  .story-modal {
    padding: 0;
    align-items: stretch;
  }

  .story-modal-card,
  .story-modal-card.has-media {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    border-radius: 0;
    animation-name: story-up;
  }

  .story-modal-content,
  .has-media .story-modal-content {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .story-modal-media {
    height: min(40svh, 380px);
    min-height: 230px;
  }

  .story-modal-body {
    display: block;
  }

  .story-modal-scroll {
    overflow: visible;
    padding: 22px 20px 4px;
  }

  /* Without a photo the sheet is only as tall as the story needs, so a
     short case leaves the map in view above it. */
  .story-modal-card:not(.has-media) {
    align-self: flex-end;
    height: auto;
    max-height: calc(100% - 48px - env(safe-area-inset-top, 0px));
    border-radius: 18px 18px 0 0;
  }

  .story-modal-foot {
    position: sticky;
    bottom: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .story-modal-actions {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
  }

  .story-modal-card:not(.has-media) .story-modal-actions {
    top: 12px;
  }

  .has-media .story-modal-share {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
  }

  .story-modal-close,
  .story-modal-share {
    width: 44px;
    height: 44px;
  }

  .story-modal-slide-btn {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }

  .story-modal-slide-dots {
    top: auto;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .story-modal-slide .story-media-caption {
    padding-bottom: 40px;
  }

  .story-modal-tags,
  .story-modal-title:first-child {
    margin-right: 104px;
  }

  .has-media .story-modal-tags {
    margin-right: 0;
  }

  .story-modal-scroll {
    padding-top: 18px;
  }

  .story-modal-tags {
    margin-bottom: 12px;
  }

  .story-modal-title {
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.2;
  }

  .story-modal-facts {
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 10px 0;
  }

  .story-modal-facts dd {
    font-size: 13px;
  }

  .story-modal-story {
    font-size: 17px;
    line-height: 1.68;
  }

  /* Bigger touch targets */
  .hamburger-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .language-toggle {
    height: 44px;
    font-size: 13px;
    min-width: 116px;
  }
  /* 42 px plus its border, as tall as the language button. */
  .instagram-link {
    width: 42px;
    height: 42px;
    right: 134px;
  }

  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }

  /* The menu slides up from the bottom as a sheet, within reach of the
     thumb, with every filter in view as a row: label left, choice right. */
  .sidebar {
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100% - 56px);
    padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    overscroll-behavior: contain;
  }

  .sidebar-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px 4px 18px;
    background: #1a1a1a;
    /* The bar can be dragged down to close the sheet. */
    touch-action: none;
  }

  .sidebar-sheet-head::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: #444;
  }

  .sidebar-sheet-title {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .sidebar-sheet-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .sidebar-sheet-close:hover {
    color: #fff;
  }

  .sidebar-filters {
    padding: 4px 18px 14px;
    border-bottom: 1px solid #2a2a2a;
  }

  .sidebar-filters .sidebar-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-bottom: none;
  }

  /* On the sheet the section headers are only labels. */
  .sidebar-filters .sidebar-section-header {
    flex: 0 0 104px;
    width: auto;
    padding: 0;
    color: #999;
    font-size: 10px;
    pointer-events: none;
  }

  .sidebar-filters .sidebar-chevron,
  .sidebar-filters .filter-badge {
    display: none;
  }

  .sidebar-filters .sidebar-section-content {
    flex: 1;
    min-width: 0;
    max-height: none;
    overflow: visible;
    transition: none;
  }

  /* 16 px, or iOS zooms the page in when a list is opened. */
  .sidebar-select,
  .sidebar .map-search input {
    font-size: 16px;
  }

  .sidebar-filters .sidebar-select {
    height: 44px;
    margin-bottom: 0;
    padding: 0 10px;
  }

  .sidebar-section-header {
    padding: 16px 18px;
    font-size: 11px;
  }

  .sidebar .map-search {
    width: auto;
    margin: 0 18px 14px;
  }

  .sidebar .map-search input,
  .sidebar .map-search button {
    min-height: 44px;
  }

  /* Not stretched by the full-width rule for the search button below
     420 px; taps land across 44 px. */
  .sidebar .map-search .map-search-close {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    min-height: 0;
  }

  .map-search-close::after {
    content: '';
    position: absolute;
    inset: -6px;
  }

  /* The popup on the address search result: taps land across 44 px. */
  .leaflet-popup-close-button::after {
    content: '';
    position: absolute;
    inset: -10px;
  }

  /* Chips bar: slightly lower to avoid overlap with taller button */
  .active-filters-bar {
    top: 64px;
  }

  .filter-chip {
    position: relative;
    font-size: 12px;
    padding: 5px 10px 5px 12px;
  }

  /* Taps land across 44 px, though the chip looks 25 px tall. */
  .filter-chip::after {
    content: '';
    position: absolute;
    inset: -10px -3px;
  }
}

@media (max-width: 420px) {
  .language-toggle {
    top: 10px;
    right: 10px;
  }
  .instagram-link {
    top: 60px;
    right: 10px;
  }

  .map-search {
    width: calc(100vw - 20px);
  }

  .map-search-row {
    grid-template-columns: 1fr;
  }

  .map-search button {
    width: 100%;
  }

  /* Push zoom above the full-width year nav bar at the bottom */
  .leaflet-bottom.leaflet-left {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 130px);
  }

  /* Chips bar */
  .active-filters-bar {
    top: 64px;
    max-width: calc(100vw - 20px);
  }
}

/* Tip button in sidebar */
.sidebar-tip-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 12px 14px;
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 10px;
  color: #ccc;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sidebar-tip-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.sidebar-tip-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Tip modal */
.tip-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: clamp(10px, 2vw, 20px);
  box-sizing: border-box;
}
.tip-modal.is-open {
  display: flex;
}
.tip-modal-card {
  width: min(480px, 100%);
  background: #1a1a1a;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
  color: #ccc;
  font-family: 'Manrope', sans-serif;
}
.tip-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #2a2a2a;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-modal-close:hover {
  background: #c0392b;
  color: #fff;
}
.tip-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 40px 12px 0;
  line-height: 1.25;
}
.tip-modal-body {
  font-size: 13px;
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 20px;
}
.tip-modal-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  background: #fff;
  color: #111;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.18s ease;
}
.tip-modal-link:hover {
  background: #e8e8e8;
}

/* Clear filters button */
.sidebar-clear-filters {
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
}
.clear-filters-btn {
  width: 100%;
  background: none;
  border: 1px solid #555;
  border-radius: 8px;
  color: #aaa;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.clear-filters-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
@media (max-width: 768px) {
  /* The rest of the filter sheet and the tip dialog: 44 px to tap. */
  .sidebar-clear-filters {
    padding: 12px 18px;
  }
  .clear-filters-btn {
    min-height: 44px;
    font-size: 11px;
  }
  .sidebar-tip-btn {
    width: calc(100% - 36px);
    min-height: 44px;
    margin: 12px 18px 4px;
  }
  .tip-modal-close {
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
  }
  .tip-modal-link {
    padding: 14px 12px;
  }
}

/* Map marker hover animation */
.leaflet-marker-icon {
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-origin: bottom center;
}
.leaflet-marker-icon:hover {
  transform: scale(1.3) translateY(-4px);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.45));
}
.female-marker-active {
  filter: hue-rotate(120deg) saturate(2) brightness(1.1);
}
/* Colored cause-of-death pins */
.method-pin {
  background: none;
  border: none;
}
.method-pin svg {
  display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
/* Taps land across 44 px around the 26 px pin. */
.method-pin::before {
  content: '';
  position: absolute;
  inset: -3px -9px;
}

/* A case the visitor has already opened lies flat on the map. */
.method-pin-opened svg {
  filter: none;
}


/* Active filter chips bar */
.active-filters-bar {
  position: fixed;
  top: 58px;
  left: 10px;
  z-index: 1500;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100vw - 130px);
  pointer-events: none;
}
.filter-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1f1f1f;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px 4px 10px;
  border-radius: 20px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.filter-chip:hover {
  background: #c0392b;
  border-color: #c0392b;
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
/* Hover states */
.hamburger-btn:hover {
  background: #c0392b;
}
.language-toggle:hover {
  background: #c0392b;
  border-color: #c0392b;
}
.instagram-link:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
  transform: translateY(-1px);
}
.instagram-link:hover i {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fff;
  background-clip: unset;
  color: #fff;
}
.sidebar-select:hover {
  border-color: #c0392b;
  background: #2a2a2a;
}
.map-search button:hover:not(:disabled) {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.map-search-close:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.map-search-back:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.story-modal-close:hover {
  background: #c0392b;
}

/* Leaflet popup close button */
.leaflet-popup-close-button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #1f1f1f !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: center;
  top: 8px !important;
  right: 8px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaflet-popup-close-button:hover {
  background: #c0392b !important;
  color: #fff !important;
}

/* Welcome modal */
.welcome-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}
.welcome-modal.is-hidden {
  display: none;
}
.welcome-modal-card {
  width: min(480px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 40px) 0;
  text-align: center;
  color: #ccc;
  font-family: 'Manrope', sans-serif;
}
.welcome-modal-icon {
  margin-bottom: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-modal-logo {
  width: 58px;
  height: 58px;
  display: block;
}
.welcome-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}
.welcome-modal-body {
  font-size: clamp(13px, 2vw, 15px);
  line-height: 1.7;
  color: #aaa;
  margin: 0;
}
/* The text in the site's language; the other one opens below it. */
.welcome-modal-other {
  margin-top: 8px;
}
.welcome-modal-other summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  color: #ddd;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.welcome-modal-other summary::-webkit-details-marker {
  display: none;
}
.welcome-modal-other summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.welcome-modal-other[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.welcome-modal-other summary:hover {
  color: #fff;
}
.welcome-modal-other .welcome-modal-body {
  margin-top: 4px;
}
/* The button stays in view when the text is longer than the screen. */
.welcome-modal-foot {
  position: sticky;
  bottom: 0;
  padding: 20px 0 clamp(28px, 5vw, 44px);
  background: #1a1a1a;
}
.welcome-modal-btn {
  display: inline-block;
  background: #fff;
  color: #111;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.welcome-modal-btn:hover {
  background: #c0392b;
  color: #fff;
}
@media (max-width: 768px) {
  /* On phones the welcome rises from the bottom like the story sheet and
     leaves the map in view above it. */
  .welcome-modal {
    align-items: flex-end;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .welcome-modal-card {
    width: 100%;
    max-height: calc(100% - 48px - env(safe-area-inset-top, 0px));
    border-radius: 18px 18px 0 0;
    padding: 22px 22px 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
  }
  .welcome-modal-card > * {
    grid-column: 1 / -1;
  }
  .welcome-modal-card > .welcome-modal-icon {
    grid-column: 1;
    margin: 0;
  }
  .welcome-modal-card > .welcome-modal-title {
    grid-column: 2;
    margin: 0;
    font-size: 26px;
  }
  .welcome-modal-logo {
    width: 44px;
    height: 44px;
  }
  .welcome-modal-text {
    margin-top: 16px;
  }
  .welcome-modal-body {
    font-size: 15px;
    line-height: 1.65;
  }
  .welcome-modal-other summary {
    margin-left: -8px;
  }
  .welcome-modal-foot {
    padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .welcome-modal-btn {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .welcome-modal-card {
    animation: story-up 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* Cause-of-death legend */
.map-legend {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1400;
  background: rgba(31, 31, 31, 0.92);
  color: #eee;
  font-family: 'Manrope', sans-serif;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  max-width: 46vw;
}
.map-legend-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 7px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
.map-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}
.map-legend-opened {
  display: flex;
  justify-content: center;
  width: 11px;
  flex-shrink: 0;
}
.map-legend-opened svg {
  display: block;
}
.map-legend-forget {
  min-height: 24px;
  margin: -4px 0 -4px auto;
  padding: 0 0 0 8px;
  background: none;
  border: none;
  color: #ccc;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.map-legend-forget:hover {
  color: #fff;
}
@media (max-width: 420px) {
  .map-legend {
    padding: 8px 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .map-legend-item { font-size: 10px; }
}

/* Case count badge */
.case-count {
  position: fixed;
  top: 94px;
  left: 10px;
  bottom: auto;
  right: auto;
  z-index: 1400;
  background: #1f1f1f;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
}

/* No results overlay */
.no-results-msg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1300;
  background: #1f1f1f;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 24px;
  border-radius: 12px;
  pointer-events: none;
}
/* The welcome dialog only greets visitors on the homepage. */
.year-page .welcome-modal {
  display: none !important;
}