@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400..700&family=Noto+Color+Emoji&display=swap');

/* ==========================================================================
   Public Square Magazine
   1. Tokens   2. Base   3. Masthead   4. Homepage   5. Story cards
   6. Sidebar  7. Country & research pages   8. Articles   9. Data
   10. Footer  11. Motion   12. Small screens
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --paper: #f5f0e6;
  --card: #fffdf8;
  --ink: #0e1412;
  --ink-soft: #1b2623;
  --muted: #56615c;
  --line: #d9d1c0;
  --accent: #f0641e;
  --accent-ink: #b0440d;
  --forest: #0f3a31;
  --forest-light: #2f7a66;
  --gold: #f2b93f;
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Instrument Sans", "DM Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  --shadow: 0 1px 2px #0e141210, 0 12px 32px -12px #0e141230;
  --shadow-lift: 0 2px 4px #0e141214, 0 28px 48px -18px #0e141255;
  --header-h: 76px;
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
  --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1412' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@view-transition { navigation: auto; }

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: var(--ink); }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent-ink); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(1240px, 92%); margin-inline: auto; }

/* Body-copy links: quiet underline, loud on hover */
main p a, main li a, main td a, .data-note a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  transition: background-color .15s, color .15s;
}
main p a:hover, main li a:hover, main td a:hover, .data-note a:hover {
  color: var(--ink);
  background: #f2b93f66;
}

/* Section label: the small square is the brand motif */
.label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--accent-ink);
  font: 600 11.5px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.label::before {
  content: "";
  flex: none;
  width: .62em;
  height: .62em;
  background: var(--accent);
}
.deck {
  margin: 0 0 18px;
  color: var(--muted);
  font: italic 400 clamp(18px, 1.9vw, 23px)/1.5 var(--serif);
}
.read, .more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 650;
  text-decoration: none;
}
.read::after, .more::after {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--accent);
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform .2s;
}
.read:hover::after, .more:hover::after { transform: translateX(4px); }
.more { margin-top: 16px; }

/* 3. Masthead ------------------------------------------------------------- */
body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: #fff8ea;
  background: #0e1412f2;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 3px solid var(--accent);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 40px);
  min-height: var(--header-h);
}
.brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  justify-self: start;
  column-gap: .5em;
  flex: none;
  color: inherit;
  font: 700 clamp(24px, 2.5vw, 30px)/1 var(--serif);
  letter-spacing: -.025em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: inherit; }
/* Emblem: the plan of a public square, four walks meeting at a fountain */
.brand::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1.55em;
  height: 1.55em;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cmask id=%22m%22%3E%3Crect width=%2248%22 height=%2248%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%228.8%22 fill=%22%23000%22/%3E%3C/mask%3E%3Crect x=%221.1%22 y=%221.1%22 width=%2245.8%22 height=%2245.8%22 fill=%22none%22 stroke=%22%23f2b93f%22 stroke-width=%221.2%22/%3E%3Cg fill=%22%23f2b93f%22 mask=%22url%28%23m%29%22%3E%3Cpath d=%22M8.4 6.4h31.2L24 22z%22/%3E%3Cpath d=%22M41.6 8.4v31.2L26 24z%22/%3E%3Cpath d=%22M39.6 41.6H8.4L24 26z%22/%3E%3Cpath d=%22M6.4 39.6V8.4L22 24z%22/%3E%3C/g%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%226.1%22 fill=%22none%22 stroke=%22%23f2b93f%22 stroke-width=%221.3%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%222.5%22 fill=%22%23f2b93f%22/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.brand:hover::before { transform: rotate(90deg); }
.brand-name { display: block; }
.brand-square { margin-left: .22em; }
.brand small {
  display: flex;
  align-items: center;
  gap: .9em;
  margin-top: .7em;
  color: var(--gold);
  font: 500 9px/1 var(--mono);
  letter-spacing: .5em;
  text-transform: uppercase;
}
.brand small::after { content: ""; flex: 1; height: 1px; background: #f2b93f59; }
.bar nav { display: flex; align-items: center; gap: 2px; }
.bar nav a {
  position: relative;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: #e9e3d3;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.bar nav a:hover { color: #fff; background: #ffffff1c; }
.bar nav a[aria-current="page"] { color: var(--ink); background: var(--gold); }
.bar a:focus-visible { outline-color: var(--gold); }

/* 4. Homepage ------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero img {
  height: clamp(340px, 50vw, 680px);
  object-fit: cover;
  object-position: center 48%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0e141200 45%, #0e1412b8 100%);
}
.hero figcaption {
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: 14px;
  width: auto;
  max-width: min(92%, 32rem);
  margin: 0;
  padding: 4px 10px;
  color: #fff;
  background: #0e1412c4;
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .04em;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 36px;
}
.layout > div { min-width: 0; }

.lead {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3.4vw, 46px);
  background: var(--card);
  border-top: 6px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
}
.hero + .layout { margin-top: 0; }
.hero + .layout .lead { margin-top: clamp(-150px, -9vw, -56px); }
.hero + .layout .sidebar { margin-top: 36px; }
.lead h1 {
  max-width: 15ch;
  margin: 14px 0 16px;
  font-size: clamp(38px, 5.3vw, 78px);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.045em;
}
.lead .deck { max-width: 56ch; margin-bottom: 26px; }
.lead .read {
  margin: 0 6px 10px 0;
  padding: .62rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.25;
  transition: background-color .15s, color .15s, border-color .15s;
}
.lead .read:hover { color: #fff; background: var(--ink); }
.lead .read:hover::after { color: var(--gold); }
.lead .read:first-of-type {
  padding: .8rem 1.3rem;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-size: 1rem;
}
.lead .read:first-of-type::after { color: #fff; }
.lead .read:first-of-type:hover { background: var(--ink); border-color: var(--ink); }

/* Numbered region sections */
.layout > div { counter-reset: region; }
section.section { margin-top: clamp(48px, 6vw, 84px); counter-increment: region; }
section.section > h2 {
  display: flex;
  align-items: baseline;
  gap: .45em;
  margin: 0 0 26px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -.035em;
}
section.section > h2::before {
  content: counter(region, decimal-leading-zero);
  color: var(--accent-ink);
  font: 600 .32em/1 var(--mono);
  letter-spacing: .08em;
  transform: translateY(-.9em);
}
section.section > h2::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 2px;
  margin-left: .3em;
  background: linear-gradient(90deg, var(--ink) 0 48px, var(--line) 48px);
}
section.section > h2 a { text-decoration: none; }
section.section > h2 a::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-left: .25em;
  background: var(--accent);
  -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
  mask: var(--icon-arrow-up-right) center / contain no-repeat;
  vertical-align: .45em;
}

/* 5. Story cards ---------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.story {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.story:hover { transform: translateY(-5px); border-color: var(--ink); box-shadow: var(--shadow-lift); }
.story:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.story a:focus-visible { outline: none; }
.story-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e6dfd0;
  transition: filter .3s;
}
.story:hover .story-art { filter: saturate(1.15) contrast(1.04); }
.story > .label { margin: 20px 22px 0; }
.story h3 {
  margin: 10px 22px 10px;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.story > a + h3, .story > img + h3 { margin-top: 18px; }
.story h3:last-child { margin-bottom: 22px; }
.story h3 a {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s;
}
.story:hover h3 a { color: var(--ink); background-size: 100% 2px; }
.story h3 a::after { content: ""; position: absolute; inset: 0; }
.story p { margin: 0 22px 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }

@media (min-width: 700px) {
  /* The first story of each region, and any story left alone on a row, runs wide */
  section.section > .grid > .story:first-child,
  section.section > .grid > .story:last-child:nth-child(even) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
  }
  section.section > .grid > .story:first-child > .story-art,
  section.section > .grid > .story:last-child:nth-child(even) > .story-art {
    grid-area: 1 / 1 / -1 / 2;
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }
  section.section > .grid > .story:first-child > :not(.story-art),
  section.section > .grid > .story:last-child:nth-child(even) > :not(.story-art) {
    grid-column: 2;
    margin-inline: clamp(22px, 2.6vw, 36px);
  }
  section.section > .grid > .story:first-child > .label,
  section.section > .grid > .story:last-child:nth-child(even) > .label { grid-row: 2; margin-top: 26px; justify-self: start; }
  section.section > .grid > .story:first-child > h3,
  section.section > .grid > .story:last-child:nth-child(even) > h3 { grid-row: 3; }
  section.section > .grid > .story:first-child > p,
  section.section > .grid > .story:last-child:nth-child(even) > p { grid-row: 4; margin-bottom: 26px; font-size: 16px; }
  section.section > .grid > .story:first-child > h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.06; letter-spacing: -.03em; }
}

/* Callout blocks ("brief") */
.brief {
  margin: 28px 0 0;
  padding: clamp(22px, 3vw, 36px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.brief h2 { margin: 10px 0 12px; font-size: clamp(25px, 2.6vw, 34px); font-weight: 750; letter-spacing: -.025em; }
.brief h2:first-child { margin-top: 0; }
.brief p { max-width: 70ch; margin: 0 0 12px; }
.brief p:last-child { margin-bottom: 0; }
section.section + .brief { margin-top: clamp(48px, 6vw, 84px); }
.brief:has(> h2 > a) {
  position: relative;
  color: #fff8ea;
  background: var(--forest);
  border-color: var(--forest);
  transition: background-color .2s;
}
.brief:has(> h2 > a):hover { background: var(--ink); }
.brief:has(> h2 > a) h2 a { color: inherit; text-decoration: none; }
.brief:has(> h2 > a) h2 a::before { content: ""; position: absolute; inset: 0; }
.brief:has(> h2 > a) h2 a::after {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .35em;
  background: var(--gold);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  vertical-align: -.06em;
  transition: transform .2s;
}
.brief:has(> h2 > a):hover h2 a::after { transform: translateX(6px); }
.brief:has(> h2 > a) p { color: #d7e0d9; }

/* 6. Sidebar -------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + 22px);
  max-height: calc(100vh - var(--header-h) - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sidebar h2 {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 14px;
  font: 600 12px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sidebar h2::before { content: ""; width: .7em; height: .7em; background: var(--accent); }
.sidebar h2.section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.sidebar p { color: var(--muted); margin: 8px 0 12px; }
.sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.sidebar nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid #e8e2d4;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
  transition: color .15s, padding-left .15s;
}
.sidebar nav a::after {
  content: "";
  flex: none;
  width: .85em;
  height: .85em;
  background: var(--accent);
  opacity: .55;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: opacity .15s, transform .15s;
}
.sidebar nav a:hover { padding-left: 5px; color: var(--accent-ink); }
.sidebar nav a:hover::after { opacity: 1; transform: translateX(3px); }
.sidebar .region {
  grid-column: 1 / -1;
  margin: 18px 0 4px;
  padding: 4px 8px;
  color: #fff8ea;
  background: var(--ink);
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sidebar .region:first-child { margin-top: 0; }
.country-layout .sidebar nav:first-of-type { grid-template-columns: 1fr; }
.country-layout .sidebar nav:first-of-type a { padding: 9px 0; font-size: 14.5px; font-weight: 600; }

/* 7. Country & research pages -------------------------------------------- */
.country-intro {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4.5vw, 60px);
  color: #fff8ea;
}
.country-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -100vmax;
  background:
    linear-gradient(90deg, #0e1412 20%, #0e141200 70%),
    linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(120deg, var(--ink) 0%, var(--forest) 100%);
  border-bottom: 4px solid var(--accent);
}
.country-intro h1 {
  max-width: 18ch;
  margin: 14px 0 20px;
  font-size: clamp(42px, 7.2vw, 104px);
  font-weight: 880;
  line-height: .96;
  letter-spacing: -.05em;
}
.evidence-hub .country-intro h1 { max-width: 22ch; font-size: clamp(36px, 5.2vw, 72px); }
.country-intro .label { color: var(--gold); }
.country-intro .label::before { background: var(--gold); }
.country-intro .deck { max-width: 62ch; color: #d9d6c8; }
.country-intro p { margin: 0 0 14px; color: #c9c2b0; font-size: 14.5px; }
.country-intro p:last-child { margin-bottom: 0; }
.country-intro p a { color: #fff8ea; text-decoration-color: var(--gold); }
.country-intro p a:hover { color: var(--ink); background: var(--gold); }
.country-intro .country-crime-jump a::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-down) center / contain no-repeat;
  mask: var(--icon-arrow-down) center / contain no-repeat;
  transition: transform .2s;
}
.country-intro .country-crime-jump a:hover::after { transform: translateY(3px); }
.country-intro .country-crime-jump a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 8px;
  padding: .6rem 1.1rem;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}
.country-intro .country-crime-jump a:hover { color: #fff; background: var(--accent); }

.country-layout { margin-top: clamp(28px, 4vw, 48px); }
.country-layout .brief:first-child { margin-top: 0; }
.country-layout .brief { border-left: 5px solid var(--forest); }
.country-layout .brief p { font-size: 17px; line-height: 1.7; }

.evidence-panel, .article-evidence {
  max-width: none;
  margin-block: clamp(36px, 5vw, 64px);
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}
.evidence-panel > h2, .article-evidence > h2 {
  margin: 0 0 18px;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
}
.evidence-panel h2 + h2, .evidence-panel p + h2, .evidence-panel figure + h2 { margin-top: 40px; }
.evidence-panel h3 { margin: 34px 0 12px; font-size: clamp(21px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.evidence-panel p { max-width: 74ch; font-size: 17px; line-height: 1.75; }
.evidence-panel .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-block: 22px; }

.evidence-panel ul:not(.profile-links) {
  columns: 2 320px;
  column-gap: 36px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.evidence-panel ul:not(.profile-links) li {
  break-inside: avoid;
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--accent), var(--accent)) 0 1.25em / 7px 7px no-repeat;
  line-height: 1.45;
}
.evidence-panel ul:not(.profile-links) li > a { text-decoration: none; }
.profile-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}
.profile-links li a {
  display: block;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.profile-links li a:hover { color: #fff; background: var(--ink); border-color: var(--ink); }

/* Timelines */
.evidence-panel ol { max-width: 76ch; margin: 18px 0; padding: 0; list-style: none; counter-reset: step; }
.evidence-panel ol li {
  position: relative;
  padding: 0 0 22px 46px;
  counter-increment: step;
  font-size: 17px;
  line-height: 1.6;
}
.evidence-panel ol li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--ink);
  font: 600 12px/1 var(--mono);
}
.evidence-panel ol li::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 2px;
  background: var(--line);
}
.evidence-panel ol li:last-child { padding-bottom: 0; }
.evidence-panel ol li:last-child::after { display: none; }

.country-crime-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(20px, 4vw, 48px);
}
.country-crime-grid img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.country-crime-grid figcaption { margin-top: 8px; color: var(--muted); font: 500 11px/1.5 var(--mono); }
.country-crime-grid article h3 { margin-top: 0; }

.evidence-hub .article-hero { margin-block: clamp(24px, 3.5vw, 40px); }
.evidence-hub .article-hero img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* 8. Articles ------------------------------------------------------------- */
.article-hero { margin: 0 auto; }
.article-hero img { height: clamp(260px, 42vw, 600px); object-fit: cover; }
.article-hero figcaption {
  padding-top: 8px;
  color: var(--muted);
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .03em;
  text-align: right;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(240px, 1fr);
  align-items: start;
  gap: clamp(30px, 5vw, 72px);
  margin-top: clamp(26px, 3.5vw, 44px);
}
.article-copy { min-width: 0; }
.article-copy h1 {
  margin: 14px 0 20px;
  font-size: clamp(38px, 5.2vw, 70px);
  font-weight: 870;
  line-height: 1;
  letter-spacing: -.045em;
}
.article-copy > .deck {
  margin-bottom: 30px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(20px, 2.1vw, 25px);
}
.article-copy > p:not(.deck):not(.data-note) {
  max-width: 66ch;
  margin: 0 0 1.25em;
  font: 400 19px/1.75 var(--serif);
}
.article-copy > .deck + p::first-letter {
  float: left;
  margin: .09em .1em 0 0;
  color: var(--accent);
  font: 900 4.3em/.78 var(--serif);
}
.article-copy h2 { margin: 40px 0 14px; font-size: clamp(25px, 2.5vw, 32px); font-weight: 750; letter-spacing: -.025em; }
.article-copy > section {
  margin: 34px 0;
  padding: clamp(20px, 3vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-top-width: 1px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-copy > section > h2 { margin-top: 0; }
.article-copy > section p { line-height: 1.7; }
.article-copy > section > :last-child { margin-bottom: 0; }

.article-sources ul { margin: 0 0 18px; padding: 0; list-style: none; }
.article-sources li { padding: 10px 0; border-bottom: 1px solid #e8e2d4; font-size: 14.5px; line-height: 1.4; }
.article-sources li + li { margin-top: 0; }
.article-sources .read {
  padding: .6rem 1rem;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  font-size: .9rem;
}
.article-sources .read::after { color: var(--gold); }
.article-sources .read:hover { color: #fff; background: var(--accent); }
.article-sources .read:hover::after { color: #fff; }

/* 9. Data ----------------------------------------------------------------- */
.evidence-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 22px;
  margin-block: 22px;
}
.evidence-charts .data-chart { margin: 0; }
.data-chart {
  min-width: 0;
  margin: 24px 0;
  padding: clamp(20px, 3vw, 32px);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 5px solid var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.data-chart figcaption {
  margin-bottom: 20px;
  font: 750 clamp(19px, 2vw, 24px)/1.2 var(--serif);
  letter-spacing: -.015em;
}
.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 16px;
  margin-block: 18px;
  font: 500 14.5px/1.35 var(--sans);
}
.data-row strong {
  font: 600 clamp(18px, 2vw, 23px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.data-track {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #0e141224 calc(25% - 1px) 25%),
    #e9e2d2;
}
.data-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--forest), var(--forest-light));
  transform-origin: left;
}
.data-row:first-of-type .data-track > span { background: linear-gradient(90deg, var(--accent-ink), var(--accent)); }
.data-note {
  max-width: 76ch;
  margin: 16px 0 0;
  color: var(--muted);
  font: 400 13.5px/1.55 var(--sans);
}
.data-chart .data-note { padding-top: 14px; border-top: 1px dashed var(--line); }

.impact-record { margin-block: 28px; overflow-x: auto; }
.impact-record table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  font-size: 15px;
}
.impact-record th, .impact-record td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.impact-record tr:last-child > td { border-bottom: 0; }
.impact-record th:first-child { width: 28%; }
.impact-record thead th {
  color: #fff8ea;
  background: var(--ink);
  font: 600 11.5px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.impact-record tbody tr:nth-child(even) { background: #f8f3e8; }
.impact-record tbody td:first-child, .impact-record tbody th { font-weight: 650; }

/* 10. Footer -------------------------------------------------------------- */
footer {
  margin-top: clamp(64px, 9vw, 120px);
  padding: clamp(40px, 6vw, 72px) 0;
  color: #fff8ea;
  background:
    linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 44px 44px,
    var(--ink);
  border-top: 4px solid var(--accent);
}
footer .brand { font-size: clamp(30px, 5vw, 60px); letter-spacing: -.03em; }
footer .brand small { color: var(--gold); font-size: 11px; }
footer a:not(.brand) { color: var(--gold); font-weight: 600; }
footer a:hover { color: #fff; }

/* 11. Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bar-grow { from { transform: scaleX(0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  @keyframes hero-in { from { transform: scale(1.06); } }
  @keyframes lead-in { from { opacity: 0; transform: translateY(34px); } }

  .hero img { animation: hero-in 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .lead { animation: lead-in .8s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .country-intro > * { animation: lead-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .country-intro > :nth-child(2) { animation-delay: .08s; }
  .country-intro > :nth-child(3) { animation-delay: .16s; }
  .country-intro > :nth-child(n+4) { animation-delay: .24s; }
  .data-track > span { animation: bar-grow 1.1s cubic-bezier(.2, .7, .2, 1) both; }

  @supports (animation-timeline: view()) {
    .data-track > span {
      animation: bar-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
    section.section .story, .evidence-panel .story, .data-chart, .country-layout .brief {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* 12. Small screens ------------------------------------------------------- */
@media (max-width: 900px) {
  .layout, .article-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .hero + .layout .sidebar { position: static; max-height: none; margin-top: 0; }
  .sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .country-layout .sidebar nav:first-of-type { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 0px; }
  body > header { position: static; }
  .bar { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-top: 14px; }
  .bar nav {
    margin: 12px -4.4% 0;
    padding: 8px 4.4%;
    overflow-x: auto;
    border-top: 1px solid #ffffff22;
    scrollbar-width: none;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .hero img { height: clamp(250px, 68vw, 380px); }
  .hero figcaption { top: 10px; right: 10px; bottom: auto; }
  .hero + .layout .lead { margin-top: -44px; }
  .lead .read { display: flex; justify-content: space-between; margin-right: 0; }
  section.section > h2::after { display: none; }
  .country-crime-grid { grid-template-columns: 1fr; }
  .impact-record table { table-layout: auto; min-width: 520px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-copy > p:not(.deck):not(.data-note) { font-size: 18px; }
}

/* 13. Flourishes ---------------------------------------------------------- */
/* Reading progress along the masthead edge */
body > header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

/* Full-height opening image */
.hero img { height: clamp(380px, 74vh, 800px); }

/* Outlined section numerals */
section.section > h2 { align-items: center; gap: .3em; }
section.section > h2::before {
  color: transparent;
  font: 900 1.55em/.8 var(--serif);
  letter-spacing: -.05em;
  -webkit-text-stroke: 1.5px var(--accent);
  transform: none;
}

/* Cards: image pushes in, a gold square snaps into the corner */
.story-art { transform-origin: 50% 100%; transition: filter .3s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.story:hover .story-art { transform: scale(1.07); }
.story::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  background: var(--gold) var(--icon-arrow-up-right) center / 22px no-repeat;
  pointer-events: none;
  transform: scale(0) rotate(-90deg);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.story:hover::after, .story:focus-within::after { transform: none; }
@media (min-width: 700px) {
  section.section > .grid > .story:first-child > .story-art,
  section.section > .grid > .story:last-child:nth-child(even) > .story-art { transform-origin: 100% 50%; }
}

/* The square, drifting behind page titles */
.country-intro { overflow-y: clip; }
.country-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -2%;
  width: clamp(180px, 26vw, 340px);
  aspect-ratio: 1;
  border: 2px solid #f2b93f73;
  box-shadow: inset 0 0 0 26px #f2b93f12, 26px 26px 0 -2px #f0641e2e;
  translate: 0 -50%;
  rotate: 12deg;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1.5%); } }
  @keyframes square-spin { to { rotate: 372deg; } }
  @keyframes progress { to { transform: scaleX(1); } }

  .hero img { animation: hero-drift 26s ease-in-out infinite alternate; }
  .country-intro::after { animation: square-spin 90s linear infinite; }

  @supports (animation-timeline: scroll()) {
    body > header::after { animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@media (max-width: 760px) {
  body > header::after { display: none; }
  .hero img { height: clamp(260px, 70vw, 400px); }
  .country-intro::after { right: -18%; opacity: .6; }
  section.section > h2::before { font-size: 1.3em; }
}

/* 14. Country flags ------------------------------------------------------- */
a[href="united-states.html"], a[href^="united-states.html#"] { --flag: "🇺🇸"; }
a[href="canada.html"], a[href^="canada.html#"] { --flag: "🇨🇦"; }
a[href="netherlands.html"], a[href^="netherlands.html#"] { --flag: "🇳🇱"; }
a[href="united-kingdom.html"], a[href^="united-kingdom.html#"] { --flag: "🇬🇧"; }
a[href="france.html"], a[href^="france.html#"] { --flag: "🇫🇷"; }
a[href="germany.html"], a[href^="germany.html#"] { --flag: "🇩🇪"; }
a[href="italy.html"], a[href^="italy.html#"] { --flag: "🇮🇹"; }
a[href="spain.html"], a[href^="spain.html#"] { --flag: "🇪🇸"; }
a[href="belgium.html"], a[href^="belgium.html#"] { --flag: "🇧🇪"; }
a[href="sweden.html"], a[href^="sweden.html#"] { --flag: "🇸🇪"; }
a[href="ireland.html"], a[href^="ireland.html#"] { --flag: "🇮🇪"; }
a[href="switzerland.html"], a[href^="switzerland.html#"] { --flag: "🇨🇭"; }
a[href="denmark.html"], a[href^="denmark.html#"] { --flag: "🇩🇰"; }
a[href="norway.html"], a[href^="norway.html#"] { --flag: "🇳🇴"; }
a[href="finland.html"], a[href^="finland.html#"] { --flag: "🇫🇮"; }
a[href="iceland.html"], a[href^="iceland.html#"] { --flag: "🇮🇸"; }
a[href="austria.html"], a[href^="austria.html#"] { --flag: "🇦🇹"; }
a[href="portugal.html"], a[href^="portugal.html#"] { --flag: "🇵🇹"; }
a[href="greece.html"], a[href^="greece.html#"] { --flag: "🇬🇷"; }
a[href="poland.html"], a[href^="poland.html#"] { --flag: "🇵🇱"; }
a[href="czechia.html"], a[href^="czechia.html#"] { --flag: "🇨🇿"; }
a[href="hungary.html"], a[href^="hungary.html#"] { --flag: "🇭🇺"; }
a[href="romania.html"], a[href^="romania.html#"] { --flag: "🇷🇴"; }
a[href="bulgaria.html"], a[href^="bulgaria.html#"] { --flag: "🇧🇬"; }
a[href="croatia.html"], a[href^="croatia.html#"] { --flag: "🇭🇷"; }
a[href="slovenia.html"], a[href^="slovenia.html#"] { --flag: "🇸🇮"; }
a[href="serbia.html"], a[href^="serbia.html#"] { --flag: "🇷🇸"; }
a[href="bosnia-and-herzegovina.html"], a[href^="bosnia-and-herzegovina.html#"] { --flag: "🇧🇦"; }
a[href="montenegro.html"], a[href^="montenegro.html#"] { --flag: "🇲🇪"; }
a[href="north-macedonia.html"], a[href^="north-macedonia.html#"] { --flag: "🇲🇰"; }
a[href="albania.html"], a[href^="albania.html#"] { --flag: "🇦🇱"; }
a[href="kosovo.html"], a[href^="kosovo.html#"] { --flag: "🇽🇰"; }
a[href="estonia.html"], a[href^="estonia.html#"] { --flag: "🇪🇪"; }
a[href="latvia.html"], a[href^="latvia.html#"] { --flag: "🇱🇻"; }
a[href="lithuania.html"], a[href^="lithuania.html#"] { --flag: "🇱🇹"; }
a[href="slovakia.html"], a[href^="slovakia.html#"] { --flag: "🇸🇰"; }
a[href="cyprus.html"], a[href^="cyprus.html#"] { --flag: "🇨🇾"; }
a[href="malta.html"], a[href^="malta.html#"] { --flag: "🇲🇹"; }
a[href="luxembourg.html"], a[href^="luxembourg.html#"] { --flag: "🇱🇺"; }
a[href="liechtenstein.html"], a[href^="liechtenstein.html#"] { --flag: "🇱🇮"; }
a[href="andorra.html"], a[href^="andorra.html#"] { --flag: "🇦🇩"; }
a[href="monaco.html"], a[href^="monaco.html#"] { --flag: "🇲🇨"; }
a[href="san-marino.html"], a[href^="san-marino.html#"] { --flag: "🇸🇲"; }
a[href="vatican.html"], a[href^="vatican.html#"] { --flag: "🇻🇦"; }
a[href="ukraine.html"], a[href^="ukraine.html#"] { --flag: "🇺🇦"; }
a[href="moldova.html"], a[href^="moldova.html#"] { --flag: "🇲🇩"; }
a[href="russia.html"], a[href^="russia.html#"] { --flag: "🇷🇺"; }
a[href="belarus.html"], a[href^="belarus.html#"] { --flag: "🇧🇾"; }
a[href="turkey.html"], a[href^="turkey.html#"] { --flag: "🇹🇷"; }
a[href="georgia.html"], a[href^="georgia.html#"] { --flag: "🇬🇪"; }
a[href="armenia.html"], a[href^="armenia.html#"] { --flag: "🇦🇲"; }
a[href="azerbaijan.html"], a[href^="azerbaijan.html#"] { --flag: "🇦🇿"; }
a[href="kazakhstan.html"], a[href^="kazakhstan.html#"] { --flag: "🇰🇿"; }
a[href="uzbekistan.html"], a[href^="uzbekistan.html#"] { --flag: "🇺🇿"; }
a[href="kyrgyzstan.html"], a[href^="kyrgyzstan.html#"] { --flag: "🇰🇬"; }
a[href="tajikistan.html"], a[href^="tajikistan.html#"] { --flag: "🇹🇯"; }
a[href="australia.html"], a[href^="australia.html#"] { --flag: "🇦🇺"; }
.sidebar nav a, .profile-links li a { justify-content: flex-start; }
.sidebar nav a::after { margin-left: auto; }
.sidebar nav a[href$=".html"]::before, .profile-links li a::before {
  content: var(--flag, "");
  flex: none;
  margin-right: 2px;
  font: 400 1.25em/1 "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.profile-links li a { display: flex; align-items: center; gap: 8px; }