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

/* Case pages (/case/ and /en/case/). Written by npm run build from scripts/generate-case-pages.js. */
body {
  margin: 0;
  background: #f4efe8;
  color: #1f1f1f;
  font-family: Georgia, serif;
}
.instagram-link-case {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border: 1px solid #d8cec3;
  border-radius: 10px;
  background: rgba(244, 239, 232, 0.96);
  color: #1f1f1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.instagram-link-case svg {
  width: 17px;
  height: 17px;
}
.instagram-link-case:hover {
  background: rgba(244, 239, 232, 0.96);
  border-color: #d8cec3;
  color: #fff;
}
.instagram-link-case:hover svg .ig-stroke {
  stroke: url(#igGradientCase);
}
.instagram-link-case:hover svg .ig-fill {
  fill: url(#igGradientCase);
}
*, *::before, *::after { box-sizing: border-box; }
/* Scrolls away with the header here, so it never covers the list. */
.instagram-link-case { position: absolute; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 52px 16px 0;
}
.crumbs {
  font: 600 12px/1.5 Manrope, sans-serif;
  letter-spacing: 0.04em;
  color: #9a938c;
}
.crumbs a { color: #7b211a; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { padding: 0 6px; }
.lang-switch {
  margin-left: auto;
  color: #7b211a;
  text-decoration: none;
  font: 700 12px/1.2 Manrope, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang-switch:hover { text-decoration: underline; }

/* Map teaser: a still of the map with every case pinned, linking to the real one. */
.map-hero {
  position: relative;
  height: clamp(500px, 68vh, 620px);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #ddd6ca;
  box-shadow: 0 30px 60px -30px rgba(31, 31, 31, 0.5);
  color: #fff;
}
.map-hero-stage {
  --s: 1;
  --fx: 66%;
  --fy: 46%;
  position: absolute;
  z-index: 0;
  width: calc(1536px * var(--s));
  /* Sized here, not by the image: on phones a case page loads only a piece of the map. */
  aspect-ratio: 1536 / 1280;
  /* Centre the focus point, but never pull the map's edge into view. */
  left: clamp(calc(100% - 1536px * var(--s)), calc(var(--fx) - var(--cx) * var(--s) * 1px), 0px);
  top: clamp(calc(100% - 1280px * var(--s)), calc(var(--fy) - var(--cy) * var(--s) * 1px), 0px);
  transform-origin: calc(var(--cx) * var(--s) * 1px) calc(var(--cy) * var(--s) * 1px);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.map-hero:hover .map-hero-stage { transform: scale(1.03); }
.map-hero-stage img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.6) sepia(0.1) contrast(0.97);
}
.map-hero-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.35));
}
.map-hero-stage .pins { animation: pin-in 0.7s ease-out both; }
.map-hero-stage .latest-ring {
  fill: none;
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring 2.4s ease-out infinite;
}
@keyframes pin-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ring {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-hero-stage, .map-hero-stage .pins, .map-hero-stage .latest-ring { animation: none; transition: none; }
  .map-hero:hover .map-hero-stage { transform: none; }
}
.map-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 19, 17, 0.93) 0%, rgba(22, 19, 17, 0.8) 30%, rgba(22, 19, 17, 0.2) 56%, rgba(22, 19, 17, 0) 70%),
    linear-gradient(0deg, rgba(22, 19, 17, 0.4), rgba(22, 19, 17, 0) 30%);
}
.map-hero-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.map-hero-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 480px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.map-hero-copy a { pointer-events: auto; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font: 700 12px/1 Manrope, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f2b4aa;
}
.kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kc, #e74c3c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc, #e74c3c) 30%, transparent);
}
.map-hero h1 {
  font: 400 clamp(42px, 5.4vw, 64px)/1 Georgia, serif;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #fff;
}
.lead {
  font: 400 18px/1.6 Georgia, serif;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 26px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px 15px 18px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  text-decoration: none;
  font: 700 15px/1 Manrope, sans-serif;
  box-shadow: 0 12px 24px -10px rgba(192, 57, 43, 0.9);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-map:hover { background: #a93226; transform: translateY(-1px); }
.btn-map svg { width: 18px; height: 18px; flex: none; }
.btn-list {
  padding: 14px 4px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font: 700 12px/1 Manrope, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-list:hover { color: #fff; text-decoration: underline; }
.osm-credit {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: #5f5a55;
  text-decoration: none;
  font: 600 10px/1.2 Manrope, sans-serif;
}
.osm-credit:hover { color: #1f1f1f; }

/* Floating shortcut back to the map, shown once the teaser has scrolled away. */
.float-map {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font: 700 14px/1 Manrope, sans-serif;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.float-map:hover { background: #000; }
.float-map svg { width: 18px; height: 18px; color: #e74c3c; }
@supports (animation-timeline: scroll()) {
  .float-map {
    animation: float-in linear both;
    animation-timeline: scroll(root);
    animation-range: 420px 560px;
  }
}
@keyframes float-in {
  from { opacity: 0; transform: translate(-50%, 16px); visibility: hidden; }
  to { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 12px; }
  .topbar { padding: 14px 48px 12px 4px; }
  .map-hero { height: min(680px, 88svh); border-radius: 16px; }
  .map-hero-stage { --s: 0.8; --fx: 50%; --fy: 29%; }
  .map-hero-shade {
    background: linear-gradient(180deg, rgba(22, 19, 17, 0) 24%, rgba(22, 19, 17, 0.8) 52%, rgba(22, 19, 17, 0.95) 100%);
  }
  .map-hero-copy { max-width: none; padding: 24px 22px 30px; }
  .lead { font-size: 16.5px; margin-bottom: 22px; }
  .osm-credit { top: 8px; bottom: auto; }
}
.case-hero {
  height: auto;
  min-height: 460px;
}
.case-hero .map-hero-stage { --fx: 74%; --fy: 52%; }
.case-hero .map-hero-stage .pins-layer {
  position: absolute;
  inset: 0;
  height: 100%;
  filter: none;
  opacity: 0.5;
}
.case-hero .map-hero-shade {
  background:
    linear-gradient(90deg, rgba(22, 19, 17, 0.93) 0%, rgba(22, 19, 17, 0.82) 40%, rgba(22, 19, 17, 0.25) 62%, rgba(22, 19, 17, 0) 74%),
    linear-gradient(0deg, rgba(22, 19, 17, 0.4), rgba(22, 19, 17, 0) 30%);
}
.case-hero .map-hero-copy {
  height: auto;
  min-height: 460px;
  max-width: 620px;
  padding-top: 110px;
}
.case-hero h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: 0;
}

/* Facts, then the story with the photos beside it (above it on phones). */
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "facts media" "story media" "source media";
  grid-template-rows: auto auto 1fr;
  gap: 0 56px;
  max-width: 1080px;
  margin: 44px auto 0;
  padding: 0 8px;
  scroll-margin-top: 16px;
}
.case-body.no-media {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "facts" "story" "source";
  max-width: 760px;
}
.case-facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0 0 30px;
  padding: 18px 0;
  border-top: 1px solid #ddd3c7;
  border-bottom: 1px solid #ddd3c7;
}
.case-facts div { min-width: 0; }
.case-facts dt {
  margin-bottom: 4px;
  font: 700 10px/1.3 Manrope, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a938c;
}
.case-facts dd {
  margin: 0;
  font: 600 14px/1.45 Manrope, sans-serif;
  color: #2b2724;
  overflow-wrap: anywhere;
}
.case-facts .is-unsolved dd { color: #c0392b; }
.fact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: 1px;
}
.case-media {
  grid-area: media;
  align-self: start;
  position: sticky;
  top: 20px;
  display: grid;
  gap: 18px;
}
.case-media figure { margin: 0; }
.case-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 14px;
  background: #e9e2d9;
  box-shadow: 0 18px 40px -24px rgba(31, 31, 31, 0.5);
}
.case-media figcaption {
  margin-top: 8px;
  font: 600 12px/1.45 Manrope, sans-serif;
  color: #5f5a55;
}
.story {
  grid-area: story;
  font: 400 19px/1.75 Georgia, serif;
  color: #2b2724;
  white-space: pre-line;
}
.story::first-letter {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1;
  color: #7b211a;
}
.source {
  grid-area: source;
  align-self: start;
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ddd3c7;
  font: 600 13px/1.5 Manrope, sans-serif;
  color: #8a837c;
}
.source a { color: #7b211a; font-weight: 700; text-decoration: none; }
.source a:hover { text-decoration: underline; }

.related {
  max-width: 1080px;
  margin: 64px auto 0;
  padding: 28px 8px 120px;
  border-top: 1px solid #ddd3c7;
}
.adjacent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 44px;
}
.adj {
  display: block;
  padding: 16px 18px;
  border: 1px solid #ddd3c7;
  border-radius: 14px;
  background: #fbf8f4;
  color: #1f1f1f;
  text-decoration: none;
  font: 400 17px/1.35 Georgia, serif;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.adj span {
  display: block;
  margin-bottom: 6px;
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b211a;
}
.adj[rel="next"] { grid-column: 2; text-align: right; }
.adj:hover { border-color: #7b211a; background: #fff; }
.related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.related-head h2 {
  margin: 0;
  font: 400 clamp(24px, 3vw, 30px)/1.1 Georgia, serif;
  color: #111;
}
.year-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #1f1f1f;
  border-radius: 999px;
  color: #1f1f1f;
  text-decoration: none;
  font: 700 12px/1 Manrope, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.year-link svg { width: 15px; height: 15px; }
.year-link:hover { background: #1f1f1f; color: #fff; }
.related-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid #ddd3c7;
}
.related-list li {
  display: grid;
  grid-template-columns: 10px 92px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding: 12px 6px;
  border-bottom: 1px solid #ddd3c7;
}
.related-list .dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c);
}
.related-list .d {
  padding-top: 4px;
  font: 600 12px/1.4 Manrope, sans-serif;
  letter-spacing: 0.03em;
  color: #9a938c;
}
.related-list a {
  color: #1f1f1f;
  text-decoration: none;
  font: 400 17px/1.4 Georgia, serif;
}
.related-list a:hover { color: #7b211a; text-decoration: underline; }
.all-link {
  font: 700 12px/1.2 Manrope, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b211a;
  text-decoration: none;
}
.all-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .case-hero,
  .case-hero .map-hero-copy { min-height: 0; }
  /* Long titles make the hero tall; the pin stays in the strip of map
     above them, and the map may stop short of the dark bottom. */
  .case-hero { background: rgb(22, 19, 17); }
  .case-hero .map-hero-stage {
    --s: 0.9;
    --fx: 50%;
    --fy: 120px;
    top: min(calc(var(--fy) - var(--cy) * var(--s) * 1px), 0px);
  }
  .case-hero .map-hero-shade {
    /* Solid by 255px: where the map ends below the southernmost case (Uithoorn). */
    background: linear-gradient(180deg, rgba(22, 19, 17, 0) 0, rgba(22, 19, 17, 0) 130px, rgba(22, 19, 17, 0.9) 210px, rgb(22, 19, 17) 255px);
  }
  .case-hero .map-hero-copy { max-width: none; padding: 215px 22px 26px; }
  .case-hero h1 { font-size: 25px; line-height: 1.15; }
  .lang-switch { white-space: nowrap; }
  .case-body,
  .case-body.no-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "facts" "media" "story" "source";
    margin-top: 24px;
    padding: 0 4px;
  }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
  /* Photos become a swipeable strip, so the story starts right after. */
  .case-media {
    position: static;
    display: flex;
    gap: 12px;
    margin: 0 -16px 26px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .case-media::-webkit-scrollbar { display: none; }
  .case-media figure { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .case-media figure:only-child { flex-basis: 100%; }
  .case-media img { height: 340px; max-height: none; object-position: center 25%; }
  .case-media figure:only-child img { height: auto; max-height: 440px; }
  .story { font-size: 18px; line-height: 1.7; }
  .related { margin-top: 48px; padding: 24px 4px 110px; }
  .adjacent { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  .adj[rel="next"] { grid-column: auto; }
  .year-link { margin-left: 0; }
  .related-list li { grid-template-columns: 10px minmax(0, 1fr); padding: 12px 4px; }
  .related-list .d { grid-column: 2; padding-top: 0; }
  .related-list a { grid-column: 2; }
}

/* The <source> in renderCaseMapHero: one piece of the map, put where it sits on the whole map. */
@media (max-width: 460px) {
  .case-hero .map-hero-stage picture img {
    position: absolute;
    left: calc(var(--px) * var(--s) * 1px);
    top: calc(var(--py) * var(--s) * 1px);
    width: calc(768px * var(--s));
  }
}