/* Crimes Weekly — shared styles for the home page, story pages and the story
   index. Built pages link this file; editorial.html and crime-map.html still
   carries its own styles. Light, newspaper-style: white page, near-black
   text, like the Telegraph and the Mail. The chart images stay dark. */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f5f8;
  --line: #e2e6eb;
  --ink: #0b0c0e;
  --dim: #2f3640;
  --mute: #5b6470;
  --red: #ef4444;
  --blue: #3b82f6;
  /* One accent for buttons, icons and labels. The charts are red, so the
     page chrome stays out of their way in the logo's blue. Change these two
     lines to try another colour (amber: #f59e0b / #b45309). */
  --accent: #1d4ed8;       /* icons, figures and links on white */
  --accent-fill: #1d4ed8;  /* filled buttons and tags, white text on top */
  --radius: 14px;
  --display: "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.page { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .page { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand span { font-family: var(--display); font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.find { position: relative; flex: 1; max-width: 560px; }
.find input {
  width: 100%; height: 44px; padding: 0 18px 0 44px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: 15px var(--body); outline: none;
}
.find input:focus { border-color: var(--blue); }
.find svg { position: absolute; left: 15px; top: 13px; width: 18px; height: 18px; fill: var(--dim); }
.hits { position: absolute; left: 0; right: 0; top: 50px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: none; box-shadow: 0 12px 30px rgba(15,23,42,.14); }
.hits.on { display: block; }
.hits button { display: block; width: 100%; text-align: left; padding: 10px 16px; background: none; border: 0; color: var(--ink); font: 15px var(--body); cursor: pointer; }
.hits button:hover, .hits button[aria-selected="true"] { background: var(--panel-2); }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 15px; }
.nav a { color: var(--dim); }
.nav a:hover, .nav a.on { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.pill svg { width: 18px; height: 18px; fill: currentColor; }
.pill.accent { background: var(--accent-fill); color: #fff; }
.pill.accent:hover { background: #1e3a8a; }
.pill.ghost { border: 1px solid var(--line); color: var(--ink); }
.pill.ghost:hover { border-color: var(--dim); }
@media (max-width: 900px) { .nav a:not(.pill) { display: none; } }
@media (max-width: 640px) {
  .topbar .page { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .find { order: 3; flex-basis: 100%; max-width: none; }
  .brand span { font-size: 15px; }
}

/* ---------- small info tiles ---------- */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.mini { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; transition: border-color .15s, background .15s; }
a.mini:hover { border-color: #c5ccd6; background: var(--panel-2); }
.mini .k { font-size: 12px; color: var(--dim); letter-spacing: .02em; }
.mini .v { font-weight: 700; font-size: 15px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini .big { font-family: var(--display); font-size: 20px; }
.mini img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.mini .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--panel-2); }
.mini .ic svg { width: 22px; height: 22px; fill: var(--accent); }
.mini > div { min-width: 0; }
@media (max-width: 1000px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone the four tiles would push the stories off the first screen, so
   they become one row that scrolls sideways. */
@media (max-width: 520px) {
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .mini { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- main three-column grid ---------- */
.main { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .main { grid-template-columns: minmax(0, 1fr) 300px; } .trending { grid-column: 1 / -1; order: 3; } }
@media (max-width: 760px) { .main { grid-template-columns: 1fr; } .side { order: 2; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.card h2 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.card h2 svg { width: 20px; height: 20px; fill: var(--accent); }

.trending ol { list-style: none; padding: 6px 12px 12px; }
.trending li + li { border-top: 1px solid var(--line); }
.trending a { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 12px 8px; border-radius: 10px; }
.trending a:hover { background: var(--panel-2); }
.trending .thumb { position: relative; }
.trending .thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; }
.trending .n { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 800 13px/22px var(--body); text-align: center; }
.trending .t { font-weight: 650; font-size: 15px; line-height: 1.35; }
.trending .more { display: block; text-align: center; padding: 12px; color: var(--dim); font-weight: 700; font-size: 14px; border-top: 1px solid var(--line); }
.trending .more:hover { color: var(--ink); }

/* ---------- featured carousel ---------- */
.feature { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); aspect-ratio: 16 / 13.4; }
/* Our pictures are charts with their own headline and labels, so the story
   title goes in a panel under the full chart rather than over a cropped one. */
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .5s; }
.slide.on { opacity: 1; z-index: 1; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.slide .cap { flex: 1; padding: 16px 190px 16px 22px; border-top: 1px solid var(--line); }
.tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--accent-fill); border-radius: 4px; padding: 3px 8px; }
.slide h3 { font-family: var(--display); font-size: clamp(20px, 2.1vw, 26px); line-height: 1.12; margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slide p { color: var(--dim); margin-top: 6px; font-size: 15px; max-width: 60ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slide:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.ctrl { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: flex; gap: 8px; }
.ctrl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 20px; cursor: pointer; }
.ctrl button:hover { border-color: var(--dim); }
.count { position: absolute; right: 116px; bottom: 28px; z-index: 3; font-size: 13px; font-weight: 700; color: var(--dim); }
@media (max-width: 760px) { .feature { aspect-ratio: auto; height: calc((100vw - 34px) * 9 / 16 + 210px); } .slide .cap { padding: 14px 16px 64px; } .ctrl { right: 14px; bottom: 14px; } .count { right: auto; left: 16px; bottom: 24px; } }

.below { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .below { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .below { grid-template-columns: 1fr; } }
.tile { display: block; }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.tile .t { font-weight: 700; font-size: 16px; line-height: 1.3; margin-top: 10px; }
.tile .d { color: var(--dim); font-size: 14px; margin-top: 4px; }
.tile:hover .t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- right column ---------- */
.side { display: grid; gap: 18px; }
.area { padding-bottom: 18px; }
.area .find { margin: 10px 20px 0; max-width: none; }
.area .find input { height: 40px; }
.area .res { padding: 16px 20px 0; min-height: 112px; }
.area .seat { font-weight: 700; }
.area .rate { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.area .rate b { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--accent); }
.area .rate span { color: var(--dim); font-size: 14px; }
.area .vs { color: var(--dim); font-size: 14px; margin-top: 6px; }
.area .go { display: block; text-align: center; margin: 16px 20px 0; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; }
.area .go:hover { color: var(--accent); }
.follow ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px 20px 20px; }
.follow a { display: grid; place-items: center; height: 46px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.follow a:hover { border-color: var(--dim); }
.follow svg { width: 20px; height: 20px; fill: var(--ink); }
.help { padding: 0 20px 20px; }
.help p { color: var(--dim); font-size: 14px; margin-top: 8px; }
.help .tel { font-family: var(--display); font-size: 30px; color: var(--ink); margin-top: 4px; }
.help strong { color: var(--ink); }

/* ---------- lower sections ---------- */
.band { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.band h2 { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr; } }
.run { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .run { grid-template-columns: 1fr 1fr; } }
.run li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.run b { display: block; }
.run span { color: var(--dim); font-size: 14px; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }
.about .card { padding: 22px 24px; }
.about h3 { font-size: 17px; margin-bottom: 8px; }
.about p { color: var(--dim); }
.about p + p { margin-top: 10px; }
.about a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

footer.site { margin-top: 50px; border-top: 1px solid var(--line); padding: 34px 0 60px; color: var(--dim); font-size: 13.5px; }
footer.site p + p { margin-top: 10px; }
footer.site a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- story page ---------- */
.story { max-width: 760px; margin: 36px auto 0; }
.story .crumbs { color: var(--dim); font-size: 14px; }
.story .crumbs a:hover { color: var(--ink); }
.story h1 { font-family: var(--display); font-size: clamp(30px, 5.4vw, 48px); line-height: 1.05; margin-top: 14px; }
.story .dek { color: var(--dim); font-size: clamp(18px, 2.6vw, 21px); line-height: 1.45; margin-top: 14px; }
.story .meta { color: var(--mute); font-size: 14px; margin-top: 14px; }
.story .hero { margin: 26px 0 8px; border-radius: var(--radius); border: 1px solid var(--line); }
.prose { font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 24px; line-height: 1.25; margin-top: 1.8em; }
.prose h3 { font-size: 19px; margin-top: 1.5em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose img { border-radius: 12px; border: 1px solid var(--line); margin: 1.4em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose blockquote { border-left: 4px solid var(--accent); padding-left: 18px; color: var(--dim); }
.prose pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
.prose code { font-size: .9em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose th { color: var(--dim); font-weight: 600; }
.prose em { color: var(--dim); }
.related { max-width: 1100px; margin: 50px auto 0; }

/* ---------- stories index ---------- */
.index-head { margin: 36px 0 22px; }
.index-head h1 { font-family: var(--display); font-size: clamp(30px, 5vw, 44px); }
.index-head p { color: var(--dim); margin-top: 6px; }

/* ---------- long-form pages (editorial standards) ----------
   The source lives in content/pages/*.html and keeps its own section markup;
   these rules scope it so it reads like the story pages. */
.doc { max-width: 760px; margin: 0 auto; }
.doc header.head { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.doc .rule { width: 170px; height: 8px; margin-bottom: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--blue)); }
.doc h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 48px); line-height: 1.05; text-transform: uppercase; }
.doc .sub { color: var(--dim); margin-top: 14px; font-size: 18px; max-width: 60ch; }
.doc .wrap { padding: 0; }
.doc section { padding: 34px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.7; }
.doc section:last-of-type { border-bottom: 0; }
.doc h2 { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.doc h3 { font-size: 19px; margin: 26px 0 8px; }
.doc h2 + h3 { margin-top: 0; }
.doc .card + p, .doc .card + h3 { margin-top: 22px; }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 14px; }
.doc ul { margin-left: 20px; }
.doc li + li { margin-top: 8px; }
.doc a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.doc .dim { color: var(--dim); }
.doc .card { padding: 20px 22px; margin-top: 18px; }
.doc .card.flag { border-left: 3px solid var(--red); }
.doc .card.calm { border-left: 3px solid var(--accent); }
.doc .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.doc .badge.high { color: #9b1c1c; border-color: #f3c4c1; background: #fdeeed; }
.doc .badge.low { color: #1e40af; border-color: #c9d8f6; background: #eef3fd; }
.doc .contact { font-size: 19px; font-weight: 700; }
.doc .tel { font-family: var(--display); font-size: 26px; margin-top: 6px; }

/* Provenance caption under every chart and table (same wording as GovKPIs). */
.chart-caption { font-size: 12px; line-height: 1.5; color: var(--mute); letter-spacing: .02em; margin: 8px 0 0 !important; }
.prose img + .chart-caption { margin-top: -12px !important; margin-bottom: 1.6em !important; }
.story .hero + .chart-caption { margin-top: 2px !important; margin-bottom: 1.6em !important; }
.prose table + .chart-caption, .prose pre + .chart-caption { margin-top: 8px !important; }

/* Charts in articles are <picture>s (portrait version on phones); keep the
   image rules working through the wrapper. */
.prose picture, .story picture { display: block; }
.prose picture img { margin: 1.4em 0; }
.prose picture + .chart-caption { margin-top: -12px !important; margin-bottom: 1.6em !important; }
.story picture + .chart-caption { margin-top: 2px !important; margin-bottom: 1.6em !important; }
@media (max-width: 640px) { .prose img, .story .hero { border-radius: 10px; } }