:root {
  --paper: #ffffff;
  --wash: #f3f5f5;
  --ink: #1c2226;
  --muted: #5d676e;
  --rule: #e2e6e8;
  --estuary: #1f5c6b;
  --estuary-dark: #164552;
  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 40rem;
  --max: 72rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--estuary); text-underline-offset: 3px; }
a:hover { color: var(--estuary-dark); }
:focus-visible { outline: 3px solid var(--estuary); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: var(--measure); }
.muted { color: var(--muted); }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }
main { padding: 2.5rem 0 4rem; }
section + section { margin-top: 3.5rem; }

/* header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: 1rem; }
.brand { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.brand span { color: var(--estuary); }
.nav { display: flex; gap: 1.5rem; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--estuary); text-decoration: underline; }
.menu-btn { display: none; background: none; border: 1px solid var(--rule); border-radius: 6px; padding: .45rem .8rem; font: inherit; color: var(--ink); }
@media (max-width: 760px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 4rem; background: var(--paper); flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--rule); padding: .5rem 1.25rem 1rem; z-index: 1000; }
  .nav.open { display: flex; }
  .nav a { padding: .7rem 0; width: 100%; font-size: 1.1rem; }
  .site-header { position: relative; }
}

/* buttons */
.btn { display: inline-block; padding: .7rem 1.1rem; border-radius: 6px; background: var(--estuary); color: #fff; text-decoration: none; font: inherit; font-weight: 700; border: 0; cursor: pointer; }
.btn:hover { background: var(--estuary-dark); color: #fff; }
.btn.plain { background: transparent; color: var(--estuary); border: 1px solid var(--rule); }
.btn.plain:hover { border-color: var(--estuary); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* home */
.intro { padding: 1rem 0 0; }
.home-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 960px) { .home-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } .home-grid .map-col { position: sticky; top: 1.5rem; } }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.section-head h2 { margin: 0; }
.section-head a { white-space: nowrap; font-size: .95rem; }

/* case list */
.case-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.case-list li { border-bottom: 1px solid var(--rule); }
.case-row { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; padding: 1rem 0; color: var(--ink); text-decoration: none; }
.tile { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--a, #1f5c6b) 13%, white); }
.tile svg { width: 40px; height: 40px; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.area-tag { color: var(--a); font-weight: 600; }
@media (max-width: 560px) { .case-row { grid-template-columns: 52px 1fr; gap: .85rem; } .tile { width: 52px; height: 52px; } .tile svg { width: 34px; height: 34px; } }
.case-row:hover .case-title { color: var(--estuary); text-decoration: underline; }
.case-meta { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.case-title { font-weight: 700; font-size: 1.08rem; margin: .15rem 0 .2rem; }
.case-sum { color: var(--muted); font-size: .98rem; margin: 0; }
.more-wrap { margin-top: 1.25rem; }

/* trust */
.trust { font-weight: 700; color: var(--ink); }
.trust::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .35em; vertical-align: .05em; background: var(--t, #9aa3a8); }
.t-A { --t: #2e7d4f; } .t-Bp { --t: #2f6db3; } .t-B { --t: #6b5bb5; } .t-C { --t: #c08a1e; } .t-D { --t: #9aa3a8; }

/* featured */
.feature { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; background: var(--wash); border-radius: 8px; }
.feature img { border-radius: 4px; max-height: 320px; margin: 0 auto; }
@media (min-width: 760px) { .feature { grid-template-columns: 220px 1fr; align-items: center; } }
.feature h3 { font-size: 1.3rem; }

/* areas */
.area-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
@media (min-width: 760px) { .area-list { columns: 3; } }
.area-list li { break-inside: avoid; padding: .45rem 0; }
.area-list .n { color: var(--muted); font-size: .9rem; }

/* map */
.map { height: 340px; border-radius: 8px; border: 1px solid var(--rule); background: var(--wash); }
@media (min-width: 960px) { .map { height: 520px; } }
.map.full { height: calc(100vh - 13rem); min-height: 420px; }
.map.small { height: 220px; }

/* How-to-use hint over the map */
.map { position: relative; }
.map-hint { position: absolute; z-index: 800; left: 50%; width: max-content; bottom: 1.6rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; max-width: calc(100% - 1.5rem); padding: .5rem .9rem; border-radius: 999px; background: rgba(28, 34, 38, .86); color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.3; box-shadow: 0 2px 10px rgba(0,0,0,.18); pointer-events: none; transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.map-hint svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-hint span { overflow: hidden; text-overflow: ellipsis; }
.map-hint.gone { opacity: 0; transform: translate(-50%, .4rem); }
.map-hint.nudge { opacity: 1; transform: translate(-50%, 0); background: var(--estuary); }
@media (max-width: 600px) { .map-hint { bottom: 3.4rem; white-space: normal; text-align: left; } }

/* Bigger, easier zoom and reset buttons */
.map.leaflet-container .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; font-size: 20px; color: var(--ink); }
.map.leaflet-touch .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; font-size: 24px; }
.map.leaflet-container a.map-reset { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 4px; }
.map.leaflet-touch a.map-reset { border: 2px solid rgba(0,0,0,.2); background-clip: padding-box; width: 46px; height: 46px; }
.map-reset svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.map-reset:hover svg { stroke: var(--estuary); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--a, var(--estuary)); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--estuary); color: #fff; font-weight: 700; font-size: .8rem; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px var(--estuary); }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content { font-size: .95rem; line-height: 1.45; margin: .8rem 1rem; }
.leaflet-popup-content b { display: block; margin: .2rem 0; }

/* filters */
.filters summary { cursor: pointer; display: inline-block; padding: .6rem 1rem; border: 1px solid var(--rule); border-radius: 6px; font-weight: 700; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters[open] summary { border-color: var(--estuary); color: var(--estuary); }
.filter-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; padding: 1rem 0 .5rem; }
@media (min-width: 760px) { .filter-grid { grid-template-columns: repeat(4, 1fr); } }
label.field { display: grid; gap: .3rem; font-size: .92rem; font-weight: 700; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #c9d0d4; border-radius: 6px; padding: .65rem .75rem; width: 100%; }
.search-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }
.search-row input { flex: 1 1 16rem; }
.count { color: var(--muted); font-size: .95rem; margin: .75rem 0; }

/* case page */
.crumb { font-size: .95rem; margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 1.5rem 0; padding: 1.25rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: .98rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.summary { font-size: 1.2rem; line-height: 1.55; }
.story h2 { font-size: 1.3rem; margin-top: 2rem; }
.story ul { padding-left: 1.2rem; }
.story li { margin: .35rem 0; }
figure { margin: 1.5rem 0; }
figure img { border-radius: 4px; margin: 0 auto; max-height: 520px; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
.note { background: var(--wash); border-radius: 8px; padding: 1rem 1.25rem; }

/* listen & read */
.res-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.res-list > li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.res-list h3 { margin: 0; }
.res-list .by { color: var(--muted); font-size: .95rem; margin: .1rem 0 .4rem; }
.res-list p { margin: 0 0 .5rem; max-width: var(--measure); }
.links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-weight: 700; }
.toc { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.25rem 0 0; }
details.group { border-top: 1px solid var(--rule); }
details.group:last-of-type { border-bottom: 1px solid var(--rule); }
details.group summary { cursor: pointer; padding: 1rem 0; font-weight: 700; font-size: 1.1rem; }
details.group .res-list { border-top: 0; margin-bottom: 1rem; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: .98rem; }
th, td { text-align: left; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 400; }

/* form */
form.report { display: grid; gap: 1.1rem; max-width: 36rem; }
form.report .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { form.report .two { grid-template-columns: 1fr; } }
.hint { font-weight: 400; color: var(--muted); }
textarea { min-height: 9rem; resize: vertical; }
.ok, .err { padding: 1rem 1.25rem; border-radius: 8px; }
.ok { background: #e8f3ec; }
.err { background: #fbeaea; }

/* footer */
.site-footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; color: var(--muted); font-size: .95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { color: var(--muted); }
.loading { color: var(--muted); padding: 1rem 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.home-grid > section { margin: 0; }
main section { margin-top: 3.5rem; }
main .home-grid > section, main section:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .area-list { columns: 1; }
  .area-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); padding: .7rem 0; }
  .feature { padding: 1.25rem; }
  .feature img { max-height: 200px; }
  .case-list.short li:nth-child(n+4) { display: none; }
  main section { margin-top: 2.75rem; }
}

/* colour */
.banner { position: relative; border-radius: 14px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: #0d1830 url(https://rayvhzkalmzxigfxfiem.supabase.co/storage/v1/object/public/case-images/site/hero.jpg) 70% 60% / cover no-repeat; color: #fff; margin-top: 1.5rem; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,30,0) 30%, rgba(8,14,30,.85) 100%); }
.banner .in { position: relative; z-index: 1; padding: 2rem 1.75rem; max-width: 40rem; }
.banner h1 { color: #fff; margin-bottom: .4rem; }
.banner p { color: #dbe3f0; margin: 0; font-size: 1.1rem; }
@media (min-width: 900px) { .banner { min-height: 420px; } .banner .in { padding: 3rem; } }
@media (max-width: 560px) { .banner { min-height: 340px; border-radius: 10px; background-position: 62% 60%; } .banner .in { padding: 1.5rem 1.25rem; } .banner h1 { font-size: 1.7rem; } .banner p { font-size: 1rem; } }
.area-list a { display: inline-flex; align-items: center; gap: .55rem; }
.area-list a::before { content: ""; width: .8rem; height: .8rem; border-radius: 3px; background: var(--a); flex: none; }
.feature { background: #fdf3e4; }
.btn.accent { background: #d9692b; } .btn.accent:hover { background: #b8561f; }

/* case file (dark card, after the Oct 2026 mock-ups) */
.casefile { --cf-bg: #0a1424; --cf-panel: #0e1b30; --cf-line: #24406a; --cf-ink: #e6edf7; --cf-muted: #9fb0c8; --cf-accent: #6fb0ff;
  background: var(--cf-bg); color: var(--cf-ink); border-radius: 14px; overflow: hidden; border: 1px solid var(--cf-line); max-width: 64rem; margin: 0 auto; }
.casefile a { color: var(--cf-accent); }
.cf-head { display: flex; align-items: stretch; gap: 1.25rem; margin: 1rem; padding: .85rem 1.25rem; border: 1px solid var(--cf-line); border-radius: 8px; background: rgba(14,27,48,.85); }
.cf-no { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--cf-accent); padding-right: 1.25rem; border-right: 1px solid var(--cf-line); display: flex; align-items: center; white-space: nowrap; }
.cf-when { font-size: 1.05rem; line-height: 1.45; display: flex; flex-direction: column; justify-content: center; }
.cf-where { color: var(--cf-muted); }
.cf-sep { color: var(--cf-line); margin: 0 .35rem; }
.cf-scene { margin: 0; position: relative; aspect-ratio: 800 / 440; background: #050a18; }
.cf-scene svg, .cf-scene img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; max-height: none; }
.cf-scene figcaption { position: absolute; right: .75rem; bottom: .6rem; margin: 0; font-size: .78rem; color: #c9d6ea; background: rgba(5,10,24,.7); padding: .25rem .55rem; border-radius: 4px; }
.cf-body { display: grid; grid-template-columns: 1fr; gap: 0; margin: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-panel); }
@media (min-width: 860px) { .cf-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .cf-facts { border-right: 1px solid var(--cf-line); } }
.cf-facts, .cf-desc { padding: 1.5rem; }
@media (max-width: 859px) { .cf-facts { border-bottom: 1px solid var(--cf-line); } .cf-head { margin: .75rem; padding: .75rem 1rem; gap: 1rem; } .cf-no { padding-right: 1rem; } .cf-body { margin: .75rem; } .cf-facts, .cf-desc { padding: 1.25rem; } }
.cf-title { font-size: clamp(1.4rem, 3.2vw, 1.8rem); color: #fff; margin-bottom: 1.25rem; }
.cf-fact { display: grid; grid-template-columns: 1.6rem 7.5rem 1fr; gap: .75rem; align-items: start; padding: .7rem 0; border-top: 1px solid rgba(36,64,106,.55); }
.cf-ico { color: var(--cf-accent); width: 1.5rem; height: 1.5rem; }
.cf-ico svg, .cf-h svg { width: 100%; height: 100%; }
.cf-k { color: var(--cf-accent); font-weight: 600; }
.cf-v { color: var(--cf-ink); }
.cf-sub { display: block; color: var(--cf-muted); font-size: .9rem; margin-top: .15rem; }
@media (max-width: 480px) { .cf-fact { grid-template-columns: 1.3rem 6.2rem 1fr; gap: .6rem; font-size: .98rem; } .cf-scene figcaption { font-size: .7rem; right: .4rem; bottom: .35rem; } }
.casefile .trust { color: var(--cf-ink); }
.cf-h { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; color: var(--cf-accent); margin: 0 0 .75rem; }
.cf-h svg { width: 1.4rem; height: 1.4rem; flex: none; }
.casefile .summary { font-size: 1.12rem; color: #fff; }
.casefile .story, .casefile .cf-desc p { color: var(--cf-ink); }
.casefile .story h2 { color: #fff; }
.casefile .map.small { border-color: var(--cf-line); margin-top: 1rem; }
.cf-scene.photo { aspect-ratio: auto; }
.cf-scene.photo img { height: auto; }
.cf-scene.photo figcaption { position: static; display: block; border-radius: 0; background: #07101f; padding: .55rem 1rem; font-size: .85rem; line-height: 1.45; }
.cf-fig { margin: 0 0 1.5rem; }
.cf-fig img { border-radius: 4px; max-height: 420px; margin: 0; background: #fff; }
.cf-fig figcaption { color: var(--cf-muted); }

/* listen & read with covers */
.res-item { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; }
.res-item.book { grid-template-columns: 84px 1fr; }
.thumb { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(13,24,48,.18); background: #0d1830; }
.book .thumb { width: 84px; height: 126px; border-radius: 3px 6px 6px 3px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.blank { display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; color: #fff; font-weight: 700; font-size: .78rem; line-height: 1.2; background: linear-gradient(160deg, #1f5c6b, #0d1830); }
.res-item a.cover:hover .thumb { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,24,48,.25); }
.thumb { transition: transform .15s, box-shadow .15s; }
.links a.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--rule); text-decoration: none; font-size: .92rem; }
.links a.pill:hover { border-color: var(--estuary); }
.links { gap: .6rem; }
@media (max-width: 480px) { .res-item { grid-template-columns: 72px 1fr; gap: .9rem; } .thumb { width: 72px; height: 72px; } .res-item.book { grid-template-columns: 64px 1fr; } .book .thumb { width: 64px; height: 96px; } }

/* author's note */
.author-note { margin: 0 0 1.75rem; padding: 1rem 1.25rem; border-left: 4px solid #d9692b; background: #fdf3e4; border-radius: 0 8px 8px 0; }
.author-note p { margin: 0; font-size: 1.05rem; }
.author-note footer { margin-top: .5rem; font-size: .85rem; font-weight: 700; color: #b8561f; text-transform: uppercase; letter-spacing: .04em; }
.author-note.dark { background: rgba(217,105,43,.12); }
.author-note.dark p { color: #fbe9d7; }
.author-note.dark footer { color: #f0a35a; }

/* home spotlight cards */
.spots { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 860px) { .spots { grid-template-columns: 1.25fr 1fr; } }
.spot { display: flex; flex-direction: column; height: 100%; background: #0a1424; color: #e6edf7; border-radius: 12px; overflow: hidden; text-decoration: none; border: 1px solid #24406a; transition: transform .15s, box-shadow .15s; }
.spot:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,20,36,.25); color: #e6edf7; }
.spot-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050a18; }
.spot-pic img, .spot-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; max-height: none; }
.spot-label { position: absolute; left: .75rem; top: .75rem; background: #d9692b; color: #fff; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .6rem; border-radius: 4px; }
#spot-latest .spot-label { background: #2f6db3; }
.spot-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.spot-meta { font-size: .88rem; color: #9fb0c8; }
.spot h3 { color: #fff; font-size: 1.3rem; margin: .35rem 0 .5rem; }
.spot p { color: #c9d6ea; margin: 0 0 1rem; font-size: .98rem; }
.spot-more { margin-top: auto; color: #6fb0ff; font-weight: 700; }
.spot:hover .spot-more { text-decoration: underline; }
.spots > div { min-width: 0; }
.spot-pic img { object-position: center 22%; }

/* type scale: a touch larger on bigger screens, nothing under ~14px */
@media (min-width: 760px) { body { font-size: 1.125rem; } }
.case-meta, .spot-meta, .count, .crumb { font-size: .92rem; }
figcaption, .cf-scene figcaption, .cf-scene.photo figcaption { font-size: .875rem; }
.case-sum { font-size: 1rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--estuary); text-decoration: underline; cursor: pointer; margin-left: .4rem; }

/* share */
.share-wrap { margin-top: 3rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; }
.share-h { font-weight: 700; margin-right: .25rem; }
.share button { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid #c9d0d4; border-radius: 999px; padding: .45rem .85rem; cursor: pointer; min-height: 40px; }
.share button:hover { border-color: var(--estuary); color: var(--estuary); }
.share svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .share button span { display: none; } .share button { padding: .5rem; width: 42px; justify-content: center; } .share button[data-s="native"] span, .share button[data-s="native"] { width: auto; } .share button[data-s="native"] span { display: inline; } .share button[data-s="native"] { padding: .5rem .9rem; } }

/* home: stats strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-top: 2rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--paper); padding: 1.1rem 1.25rem; }
.stat b { display: block; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; color: var(--estuary); letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: .95rem; }

/* home: decade bars (one series, so one colour; peak bar picked out) */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 220px; padding-top: 1.5rem; border-bottom: 1px solid var(--rule); }
.bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none; color: var(--muted); position: relative; }
.bar-f { width: 100%; max-width: 44px; background: color-mix(in srgb, var(--estuary) 55%, white); border-radius: 4px 4px 0 0; transition: background .15s; }
.bar.peak .bar-f, .bar:hover .bar-f, .bar:focus-visible .bar-f { background: var(--estuary); }
.bar-n { font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; opacity: 0; transition: opacity .15s; }
.bar.peak .bar-n, .bar:hover .bar-n, .bar:focus-visible .bar-n { opacity: 1; }
.bar-l { position: absolute; bottom: -1.6rem; font-size: .8rem; white-space: nowrap; }
.decades { padding-bottom: 1.6rem; }
@media (max-width: 560px) { .bar-l { font-size: .68rem; } .bar:nth-child(even) .bar-l { visibility: hidden; } .bars { height: 180px; } }
.casefile + .share { max-width: 64rem; margin: 1.25rem auto 0; }

/* ---- phone reading size ----
   On small screens 1rem = 18px, so every size in this file scales up together:
   body text 18px, summaries ~17px, dates and labels ~16px, nothing under ~14px. */
@media (max-width: 760px) {
  html { font-size: 112.5%; }
  body { font-size: 1rem; line-height: 1.6; }
  .wrap { padding: 0 1rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  .case-sum, .spot p, .res-list p, .summary, .casefile .summary { font-size: 1rem; }
  .case-meta, .spot-meta, .count, .crumb, .res-list .by, .stat span { font-size: .875rem; }
  .bar-l { font-size: .75rem; }
  .leaflet-container { font-size: .8rem; }
  /* case file: less nesting so the text column is wider */
  .casefile { border-radius: 10px; margin: 0 -.25rem; }
  .cf-head { margin: .5rem; padding: .7rem .85rem; }
  .cf-no { font-size: 1.35rem; }
  .cf-when { font-size: .95rem; }
  .cf-body { margin: .5rem; }
  .cf-facts, .cf-desc { padding: 1rem .9rem; }
  .cf-fact { grid-template-columns: 1.3rem 6.6rem 1fr; gap: .55rem; font-size: .95rem; }
  .cf-title { font-size: 1.4rem; }
  .author-note { padding: .85rem 1rem; }
  .author-note p { font-size: 1rem; }
  .spot-body { padding: 1rem; }
  .spot h3 { font-size: 1.25rem; }
  .spot-label { font-size: .75rem; }
  .stat b { font-size: 1.8rem; }
  .share-h { font-size: 1rem; }
}
@media (max-width: 480px) {
  .cf-fact { grid-template-columns: 1.2rem 5.8rem 1fr; }
}

/* brand */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand img { width: 40px; height: 40px; flex: none; }
.foot-brand { display: flex; align-items: center; gap: 1rem; max-width: 34rem; }
.foot-brand img { width: 88px; height: 88px; flex: none; }
@media (max-width: 760px) { .brand img { width: 36px; height: 36px; } .brand { font-size: 1rem; } }
@media (max-width: 380px) { .brand-t { font-size: .92rem; } }
.brand .brand-t { color: var(--ink); white-space: nowrap; }
.brand .brand-t span { color: var(--estuary); }
@media (max-width: 760px) { .brand .brand-t { font-size: .9rem; } }
@media (max-width: 360px) { .brand .brand-t { font-size: .8rem; } }

/* Humber Bridge banner */
.banner { background: #0d1830 url(/assets/brand/banner.jpg) 70% 50% / cover no-repeat; }
.banner::after { background: linear-gradient(90deg, rgba(8,14,30,.7) 0%, rgba(8,14,30,.25) 45%, rgba(8,14,30,0) 65%), linear-gradient(180deg, rgba(8,14,30,0) 45%, rgba(8,14,30,.75) 100%); }
@media (min-width: 900px) { .banner { min-height: 460px; } }
@media (max-width: 560px) { .banner { background-position: 74% 50%; } }
@media (max-width: 560px) {
  .banner { min-height: 500px; background-position: 71% 30%; }
  .banner::after { background: linear-gradient(180deg, rgba(8,14,30,0) 35%, rgba(8,14,30,.85) 75%); }
  .banner h1 { font-size: 1.55rem; }
}

/* ---- simple case page ----
   One column, big type, the essentials first; everything else behind a tap. */
.case-simple { max-width: 44rem; margin: 0 auto; }
.cs-kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; color: var(--estuary); margin: 0 0 .35rem; }
.case-simple h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin-bottom: .4rem; }
.cs-when { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.5rem; line-height: 1.5; }
.cs-pic { margin: 0 0 1.5rem; border-radius: 12px; overflow: hidden; background: #050a18; aspect-ratio: 16 / 9; }
.cs-pic svg, .cs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; max-height: none; margin: 0; }
.cs-pic.photo { aspect-ratio: auto; }
.cs-pic.photo img { height: auto; }
.cs-pic figcaption { margin: 0; padding: .6rem .9rem; background: #0a1424; color: #c9d6ea; font-size: .9rem; }
.cs-summary { font-size: 1.3rem; line-height: 1.55; margin: 0 0 1.5rem; }
.case-simple .author-note { margin-bottom: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.chip { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; background: var(--wash); color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; }
a.chip:hover { background: #e3eaec; color: var(--ink); }
.chip .trust { font-weight: 600; }
.more-list { border-top: 1px solid var(--rule); }
details.more { border-bottom: 1px solid var(--rule); }
details.more > summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-size: 1.2rem; font-weight: 700; position: relative; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem; border-right: 2.5px solid var(--estuary); border-bottom: 2.5px solid var(--estuary); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
details.more[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.more > summary:hover { color: var(--estuary); }
.more-in { padding: 0 0 1.5rem; }
.more-in .story h2 { font-size: 1.25rem; margin-top: 1.75rem; }
.more-in .cf-fig img { background: #fff; max-height: 420px; }
.more-in .cf-fig figcaption { color: var(--muted); }
.plain-facts { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.25rem; margin: 0; }
.plain-facts dt { color: var(--muted); }
.plain-facts dd { margin: 0; }
@media (max-width: 480px) { .plain-facts { grid-template-columns: 1fr; gap: .1rem; } .plain-facts dd { margin-bottom: .7rem; } }
.case-simple .share { margin-top: 2rem; }
.case-simple .map.small { height: 260px; }

/* bigger reading size overall */
@media (min-width: 761px) { body { font-size: 1.1875rem; } }
@media (max-width: 760px) {
  html { font-size: 118.75%; }       /* 1rem = 19px on phones */
  .case-simple h1 { font-size: 1.8rem; }
  .cs-summary { font-size: 1.15rem; }
  .cs-when { font-size: 1rem; }
  details.more > summary { font-size: 1.1rem; }
}

/* logo in the banner */
.banner-logo { position: absolute; top: 1.5rem; left: 1.75rem; z-index: 2; width: 128px; height: 128px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
@media (min-width: 900px) { .banner-logo { width: 150px; height: 150px; top: 2rem; left: 3rem; } }
@media (max-width: 560px) { .banner-logo { width: 96px; height: 96px; top: 1rem; left: 1rem; } }
/* bigger logo in the header too */
.brand img { width: 52px; height: 52px; }
@media (max-width: 760px) { .brand img { width: 44px; height: 44px; } }

/* what this site is */
.intro-what { margin-top: 2rem; max-width: 46rem; }
.iw-lead { font-size: 1.35rem; line-height: 1.5; margin: 0 0 1.25rem; }
.iw-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.iw-points li { padding-left: 1.6rem; position: relative; }
.iw-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 50%; background: var(--estuary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--estuary) 18%, white); }
.iw-points b { display: block; font-size: 1.1rem; }
@media (max-width: 760px) { .iw-lead { font-size: 1.15rem; } }
@media (min-width: 900px) { .banner { min-height: 520px; } }

/* ---- brand presence ---- */
.site-header .wrap { min-height: 5rem; }
.brand img { width: 60px; height: 60px; }
.brand .brand-t { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
/* logo in the banner: a light ring so it stands out from the dark sky */
.banner-logo { border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 28px 6px rgba(111,176,255,.45), 0 8px 24px rgba(0,0,0,.5); filter: none; }
@media (min-width: 900px) { .banner-logo { width: 170px; height: 170px; } .banner { min-height: 560px; } }
@media (max-width: 760px) {
  .site-header .wrap { min-height: 4.75rem; }
  .brand { gap: .7rem; }
  .brand img { width: 58px; height: 58px; }
  /* stack the name over two lines so it can be big */
  .brand .brand-t { white-space: normal; font-size: 1.1rem; line-height: 1.05; }
  .brand .brand-t span { display: block; }
}
@media (max-width: 560px) {
  .banner { min-height: 560px; }
  .banner-logo { width: 150px; height: 150px; top: 1.25rem; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 360px) { .brand img { width: 50px; height: 50px; } .brand .brand-t { font-size: 1rem; } }
@media (max-width: 560px) { .banner-logo { width: 124px; height: 124px; left: 1rem; top: 1rem; transform: none; } }

/* ---- type icons ---- */
.tile { width: 72px; height: 72px; border-radius: 14px; background: color-mix(in srgb, var(--t, #6b7680) 14%, white); position: relative; overflow: visible; }
.tile .ticon { width: 48px; height: 48px; }
.tile.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.tile-badge { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.tile-badge .ticon { width: 22px; height: 22px; }
.case-row { grid-template-columns: 72px 1fr; gap: 1.1rem; }
.type-tag { color: var(--t); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.type-tag::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--t); }
.case-meta .trust { font-weight: 600; }
@media (max-width: 560px) { .case-row { grid-template-columns: 60px 1fr; gap: .95rem; } .tile { width: 60px; height: 60px; border-radius: 12px; } .tile .ticon { width: 40px; height: 40px; } .tile.has-img img { border-radius: 12px; } }

/* ---- biggest comfortable reading size ---- */
@media (min-width: 761px) { body { font-size: 1.25rem; } }   /* 20px */
@media (max-width: 760px) { html { font-size: 125%; } }      /* 1rem = 20px on phones */

/* ---- big brand in the top bar ---- */
.site-header .wrap { min-height: 6rem; }
.brand { gap: .85rem; }
.brand img { width: 76px; height: 76px; }
.brand .brand-t { font-size: 1.55rem; font-weight: 800; line-height: 1.05; white-space: normal; }
.brand .brand-t span { display: block; }
@media (max-width: 760px) {
  .site-header .wrap { min-height: 5.25rem; }
  .brand { gap: .65rem; }
  .brand img { width: 68px; height: 68px; }
  .brand .brand-t { font-size: 1.12rem; }
  .menu-btn { font-size: .9rem; padding: .5rem .75rem; }
  .nav { top: 5.25rem; }
}
@media (max-width: 360px) { .brand img { width: 56px; height: 56px; } .brand .brand-t { font-size: .98rem; } }

/* banner logo at double size */
.banner-logo { width: 256px; height: 256px; }
@media (min-width: 900px) { .banner-logo { width: 340px; height: 340px; top: 2rem; left: 2.5rem; } .banner { min-height: 680px; } }
@media (max-width: 899px) and (min-width: 561px) { .banner { min-height: 620px; } }
/* phones: logo centred at the top on plain night sky, the bridge photo below it */
@media (max-width: 560px) {
  .banner { min-height: 760px; background-color: #0b1427; background-size: auto 68%; background-position: 70% 100%; }
  .banner::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 12%; background: linear-gradient(180deg, #0b1427, rgba(11,20,39,0)); z-index: 1; }
  .banner-logo { width: 248px; height: 248px; left: 50%; top: 1.25rem; transform: translateX(-50%); }
}
@media (min-width: 900px) { .banner { min-height: 740px; } }

/* type icons drawn from the icon set, coloured by type */
.ticon { display: inline-block; background: var(--t); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tile .ticon { width: 46px; height: 46px; }
.tile-badge .ticon { width: 20px; height: 20px; }
@media (max-width: 560px) { .tile .ticon { width: 38px; height: 38px; } }

/* icons as images */
img.ticon { display: block; object-fit: contain; }
.tile img.ticon { width: 46px; height: 46px; }
.tile-badge img.ticon { width: 20px; height: 20px; }
.tile.has-img > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 560px) { .tile img.ticon { width: 38px; height: 38px; } }

/* location lozenges */
.loc-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem .18rem .5rem; border-radius: 999px; background: #e6f0f2; color: var(--estuary-dark); font-size: .85em; font-weight: 600; text-decoration: none; line-height: 1.4; }
.loc-pill svg { width: 1em; height: 1em; flex: none; }
a.loc-pill:hover { background: #d5e6ea; color: var(--estuary-dark); }
.case-meta { align-items: center; }
.cs-loc { margin: -1rem 0 1.5rem; }
.cs-loc .loc-pill, .chips .loc-pill { font-size: .95rem; padding: .45rem .9rem .45rem .7rem; }
img.ticon { background: none; -webkit-mask: none !important; mask: none !important; }

/* map: type-icon markers, legend, bigger home map */
.tmark { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2.5px solid var(--t); box-shadow: 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.tmark img.ticon { width: 22px; height: 22px; }
.pop-type { display: flex; align-items: center; gap: .4rem; font-weight: 700; margin-bottom: .2rem; }
.pop-type img.ticon { width: 20px; height: 20px; }
.map.big { height: 460px; }
@media (min-width: 900px) { .map.big { height: 580px; } }
.home-map { margin-top: 2.5rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.leg { display: inline-flex; align-items: center; gap: .35rem; }
.leg img.ticon { width: 22px; height: 22px; }

/* type chip and kicker icon on the case page */
.type-chip { gap: .45rem; color: var(--t); background: color-mix(in srgb, var(--t) 12%, white); }
.type-chip img.ticon { width: 22px; height: 22px; }
.cs-kicker { display: flex; align-items: center; gap: .55rem; }
img.kick-icon { width: 34px; height: 34px; }

/* decades as labelled rows */
.dec-list { display: grid; gap: .35rem; }
.dec-row { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; align-items: center; gap: .8rem; padding: .35rem .2rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.dec-row:hover { background: var(--wash); }
.dec-l { font-weight: 700; }
.dec-track { height: 14px; background: var(--wash); border-radius: 7px; overflow: hidden; }
.dec-f { display: block; height: 100%; background: color-mix(in srgb, var(--estuary) 55%, white); border-radius: 7px; }
.dec-row.peak .dec-f, .dec-row:hover .dec-f { background: var(--estuary); }
.dec-n { text-align: right; font-weight: 700; color: var(--estuary); }
@media (max-width: 480px) { .dec-row { grid-template-columns: 6.2rem 1fr 2rem; gap: .6rem; } }
.decades { padding-bottom: 0; }

/* new to the subject */
.newto h2 { display: flex; align-items: center; gap: .6rem; }
.h-icon { width: 1.4em; height: 1.4em; color: var(--estuary); flex: none; }
.newto-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1rem; }
@media (min-width: 700px) { .newto-grid { grid-template-columns: repeat(3, 1fr); } }
.newto-card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; color: var(--ink); }
.newto-card:hover { border-color: var(--estuary); color: var(--ink); }
.newto-card svg { grid-row: span 2; width: 48px; height: 48px; padding: 10px; border-radius: 12px; background: #e6f0f2; color: var(--estuary); }
.newto-card b { font-size: 1.1rem; }
.newto-card span { color: var(--muted); font-size: .9rem; }
.area-list a.loc-pill::before { content: none; }
.area-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); padding: .55rem 0; }
.area-list .loc-pill { font-size: 1rem; padding: .35rem .85rem .35rem .65rem; }

/* type tag with icon */
.type-tag::before { content: none; }
.type-tag img.ticon { width: 1.25em; height: 1.25em; }
.spot .type-tag img.ticon { width: 1.2em; height: 1.2em; }

/* filter by type */
.type-filter { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scrollbar-width: none; }
.type-filter::-webkit-scrollbar { display: none; }
@media (min-width: 761px) { .type-filter { flex-wrap: wrap; overflow: visible; margin: 0; padding: .25rem 0 1rem; } }
.tf { flex: none; display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid #c9d0d4; border-radius: 999px; padding: .4rem .8rem .4rem .55rem; cursor: pointer; }
.tf img.ticon { width: 22px; height: 22px; }
.tf b { color: var(--muted); font-weight: 600; }
.tf:hover { border-color: var(--t, var(--estuary)); }
.tf.on { background: var(--t, var(--estuary)); border-color: var(--t, var(--estuary)); color: #fff; }
.tf.on b { color: rgba(255,255,255,.85); }
.tf.on img.ticon { filter: brightness(0) invert(1); }
.tf[data-k=""] { padding-left: .9rem; }
.tf.zero { opacity: .45; cursor: default; }
.tf.zero:hover { border-color: #c9d0d4; }
.tf.zero.on { opacity: 1; }

/* strongest cases gallery */
.strong-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .strong-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .strong-grid { grid-template-columns: repeat(3, 1fr); } }
.strong-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--paper); transition: transform .15s, box-shadow .15s; }
.strong-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,20,36,.12); color: var(--ink); }
.sc-pic { aspect-ratio: 16 / 9; background: #050a18; overflow: hidden; }
.sc-pic img, .sc-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; max-height: none; }
.sc-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .88rem; color: var(--muted); }
.strong-card h3 { margin: .1rem 0 0; font-size: 1.2rem; }
.sc-loc .loc-pill { font-size: .85rem; }
.strong-card p { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* strongest: top 3 + carousel */
.more-strong { margin-top: 2rem; }
.ms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ms-head h3 { margin: 0; font-size: 1.15rem; }
.ms-nav { display: flex; gap: .5rem; }
.ms-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #c9d0d4; background: var(--paper); font-size: 1.6rem; line-height: 1; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.ms-btn:hover { border-color: var(--estuary); color: var(--estuary); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
@media (min-width: 640px) { .carousel { grid-auto-columns: calc((100% - 1rem) / 2.2); } }
@media (min-width: 1000px) { .carousel { grid-auto-columns: calc((100% - 2rem) / 3.3); } }
.carousel .strong-card { scroll-snap-align: start; }
@media (max-width: 560px) { .ms-nav { display: none; } }
/* phones: compact top 3 (picture beside text) */
@media (max-width: 639px) {
  .strong-grid .strong-card { flex-direction: row; }
  .strong-grid .sc-pic { width: 38%; flex: none; aspect-ratio: auto; min-height: 150px; }
  .strong-grid .sc-body { padding: .75rem .85rem; gap: .25rem; }
  .strong-grid .strong-card h3 { font-size: 1.02rem; }
  .strong-grid .sc-loc, .strong-grid .strong-card p { display: none; }
  .strong-grid .sc-meta { font-size: .8rem; }
  .strong-grid { gap: .8rem; }
}

/* area-coloured location pills */
.loc-pill { background: color-mix(in srgb, var(--ac, #1f5c6b) 13%, white); color: color-mix(in srgb, var(--ac, #1f5c6b) 80%, black); }
.loc-pill svg { color: var(--ac, #1f5c6b); }
a.loc-pill:hover { background: color-mix(in srgb, var(--ac, #1f5c6b) 22%, white); color: color-mix(in srgb, var(--ac, #1f5c6b) 80%, black); }

/* what people have seen */
.ti-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 760px) { .ti-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem 1.5rem; } }
.ti { display: grid; grid-template-columns: 52px 8.5rem 1fr 2.8rem; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--t) 7%, white); text-decoration: none; color: var(--ink); border: 1px solid color-mix(in srgb, var(--t) 18%, white); }
.ti:hover { border-color: var(--t); color: var(--ink); }
.ti-ico { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ti-ico img.ticon { width: 34px; height: 34px; }
.ti-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ti-txt b { font-size: 1.5rem; color: var(--t); }
.ti-txt span { font-size: .9rem; font-weight: 600; }
.ti-bar { height: 12px; background: color-mix(in srgb, var(--t) 14%, white); border-radius: 6px; overflow: hidden; }
.ti-bar span { display: block; height: 100%; background: var(--t); border-radius: 6px; }
.ti-pct { text-align: right; color: var(--muted); font-size: .88rem; font-weight: 600; }
@media (max-width: 480px) { .ti { grid-template-columns: 44px 1fr 2.4rem; } .ti-bar { grid-column: 2 / 4; grid-row: 2; } .ti-ico { width: 44px; height: 44px; grid-row: span 2; } .ti-ico img.ticon { width: 28px; height: 28px; } }

/* new to the subject: one colour per card */
.newto-card svg { background: color-mix(in srgb, var(--nc, #1f5c6b) 14%, white); color: var(--nc, #1f5c6b); }
.newto-card:hover { border-color: var(--nc, #1f5c6b); }
@media (max-width: 759px) {
  .ti-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .ti { grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: .35rem .55rem; padding: .55rem .6rem; }
  .ti-ico { width: 38px; height: 38px; grid-row: auto; border-radius: 10px; }
  .ti-ico img.ticon { width: 24px; height: 24px; }
  .ti-txt b { font-size: 1.2rem; }
  .ti-txt span { font-size: .78rem; }
  .ti-bar { grid-column: 1 / 3; grid-row: 2; height: 8px; }
  .ti-pct { display: none; }
}
.self-tag { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; color: #7a4fc0; background: #f0eafa; padding: .12rem .55rem; border-radius: 999px; }
.self-chip { color: #7a4fc0; background: #f0eafa; }

/* lozenges never wrap inside */
.loc-pill { white-space: nowrap; max-width: 100%; }
.loc-pill span { overflow: hidden; text-overflow: ellipsis; }
.cs-loc .loc-pill { white-space: normal; }

/* report form */
form.report .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; row-gap: 1.1rem; }
form.report input, form.report select, form.report textarea { min-width: 0; max-width: 100%; }
form.report input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 3rem; display: block; }
@media (max-width: 560px) { form.report .two { grid-template-columns: 1fr; } }
.more-detail { border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem 1.3rem; margin: .5rem 0 0; display: grid; gap: 1.1rem; background: var(--wash); }
.more-detail legend { font-weight: 700; font-size: 1.1rem; padding: 0 .4rem; }
.more-detail > p { margin: -.25rem 0 0; font-size: .95rem; }
.tips { margin: 1.5rem 0 1.25rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: #eef4f6; }
.tips h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.tips ul { margin: 0; padding-left: 1.2rem; }
.tips li { margin: .4rem 0; }
form.report input, form.report select, form.report textarea { font-weight: 400; }
.more-detail legend { float: left; width: 100%; padding: 0; margin-bottom: .2rem; }
.more-detail legend + * { clear: both; }

/* Report a sighting: stand-out button */
.btn.report-btn { display: inline-flex; align-items: center; gap: .55rem; background: #d9692b; color: #fff; border: 2px solid #b8561f; box-shadow: 0 3px 0 #9a4718, 0 6px 16px rgba(217,105,43,.3); padding: .7rem 1.2rem; font-size: 1.05rem; }
.btn.report-btn:hover { background: #c95d22; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 #9a4718, 0 8px 20px rgba(217,105,43,.35); }
.btn.report-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a4718; }
.btn.report-btn svg { width: 1.35em; height: 1.35em; flex: none; }
.nav a.nav-report { display: inline-flex; align-items: center; gap: .4rem; color: #b8561f; font-weight: 700; border: 2px solid #d9692b; border-radius: 999px; padding: .35rem .85rem; text-decoration: none; }
.nav a.nav-report svg { width: 1.15em; height: 1.15em; }
.nav a.nav-report:hover, .nav a.nav-report[aria-current="page"] { background: #d9692b; color: #fff; text-decoration: none; }
@media (max-width: 760px) { .nav a.nav-report { width: auto; margin-top: .4rem; padding: .55rem 1rem; } }
.report-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; }
.btn.report-btn { font-size: 1em; }

/* military sites layer */
.mil-box { margin: 0 0 .7rem; }
.mil-toggle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; padding: .55rem .9rem; border: 2px solid #3d4a5c; border-radius: 10px; background: #f3f5f8; font-weight: 700; font-size: .95rem; cursor: pointer; }
.mil-toggle input { width: 1.25rem; height: 1.25rem; accent-color: #3d4a5c; margin: 0; padding: 0; }
.mil-key { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; color: var(--muted); font-size: .85rem; }
.mil-key .milmark { width: 16px; height: 16px; display: inline-block; border-width: 2px; }
.milmark { width: 28px; height: 28px; border-radius: 6px; background: #fff; border: 2.5px solid #6b7680; color: #6b7680; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.milmark svg { width: 18px; height: 18px; }
.milmark.now { border-color: #2b3646; color: #2b3646; background: #e9edf3; }
.mil-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #eceff2; color: #4b5561; margin-bottom: .2rem; }
.mil-badge.now { background: #2b3646; color: #fff; }

/* get in touch */
.kind-pick { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.kind-pick legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.kind-pick label { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1.5px solid #c9d0d4; border-radius: 10px; cursor: pointer; font-weight: 600; }
.kind-pick label:has(input:checked) { border-color: var(--estuary); background: #e6f0f2; }
.kind-pick input { width: 1.2rem; height: 1.2rem; margin: 0; padding: 0; accent-color: var(--estuary); flex: none; }
.suggest-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.25rem; padding: 1rem 1.2rem; border: 2px dashed #c9d0d4; border-radius: 12px; }
.suggest-btn { display: inline-flex; align-items: center; gap: .5rem; border: 2px solid var(--estuary); font-weight: 700; }
.suggest-btn svg { width: 1.25em; height: 1.25em; }
#archives { margin-top: 2.5rem; }
[hidden] { display: none !important; }

/* military markers: clear, distinct from sighting markers */
.milmark { width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 2.5px solid #4a5a2a; color: #4a5a2a; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.milmark svg { width: 22px; height: 22px; }
.milmark.now { background: #4a5a2a; border-color: #2f3a19; color: #fff; }
.milmark.now svg [stroke="#fff"] { stroke: #4a5a2a; }
.milmark.mini { width: 24px; height: 24px; border-radius: 6px; border-width: 2px; box-shadow: none; flex: none; }
.milmark.mini svg { width: 16px; height: 16px; }
.mil-toggle { border-color: #4a5a2a; background: #f3f5ec; }
.mil-toggle input { accent-color: #4a5a2a; }
.mil-key { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.mil-key .mk { display: inline-flex; align-items: center; gap: .35rem; }
.mil-badge.now { background: #4a5a2a; }

/* strongest: 4 cards — 2x2 on tablets, 4 across on wide screens */
@media (min-width: 640px) { .strong-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .strong-grid { grid-template-columns: repeat(4, 1fr); } .strong-grid .strong-card h3 { font-size: 1.1rem; } }

/* official witness badge and filter */
.pro-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; color: #1d3b6e; background: #e3ebf7; padding: .12rem .55rem .12rem .4rem; border-radius: 999px; white-space: nowrap; }
.pro-tag svg { width: 1.05em; height: 1.05em; }
.pro-chip { color: #1d3b6e; background: #e3ebf7; gap: .35rem; }
.pro-chip svg { width: 1.1em; height: 1.1em; }
.pro-filter { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; padding: .55rem .9rem; border: 2px solid #1d3b6e; border-radius: 10px; background: #f1f5fb; color: #1d3b6e; font-weight: 700; font-size: .95rem; cursor: pointer; }
.pro-filter input { width: 1.2rem; height: 1.2rem; margin: 0; padding: 0; accent-color: #1d3b6e; flex: none; }
.pro-filter svg { width: 1.2em; height: 1.2em; flex: none; }
.pro-filter span { display: inline-flex; align-items: center; gap: .4rem; }

/* Multiple sources per case */
.src-h{font-size:1.1rem;margin:1.4rem 0 .6rem}
.src-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.src-list li{border:1px solid var(--line,#ddd);border-left:4px solid var(--line,#ccc);border-radius:10px;padding:.7rem .9rem;display:grid;gap:.2rem}
.src-list li.primary{border-left-color:#c58a1a}
.src-kind{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7;font-weight:600}
.src-title{font-weight:600}
.src-pub{font-size:.9rem;opacity:.8}
.src-says{font-size:.95rem}

/* Tablet header (iPad portrait and small landscape): logo on top, links in one row underneath */
.nav a { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1099px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; padding-top: .75rem; }
  .brand .brand-t { font-size: 1.45rem; }
  .brand .brand-t span { display: inline; }
  .brand .brand-t { white-space: nowrap; }
  .nav { width: 100%; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--rule); margin-top: .75rem; padding: .55rem 0; }
  .nav a { font-size: 1.02rem; padding: .35rem .15rem; }
  .nav a.nav-report { padding: .4rem .95rem; }
}

/* ===== UFO brand refresh: night-sky chips for type icons and areas ===== */
:root { --night: #0b1626; --night-2: #16304a; --signal: #46d9f0; }
.stars { background:
  radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.85), transparent 60%),
  radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(1.5px 1.5px at 84% 68%, rgba(255,255,255,.7), transparent 60%),
  radial-gradient(1px 1px at 32% 80%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.35), transparent 60%),
  radial-gradient(circle at 30% 20%, var(--night-2), var(--night) 72%); }
/* list tiles */
.tile { background:
  radial-gradient(1px 1px at 20% 24%, rgba(255,255,255,.8), transparent 60%),
  radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(1.4px 1.4px at 82% 74%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(circle at 30% 22%, var(--night-2), var(--night) 72%);
  box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); }
.tile .ticon, .tile img.ticon { width: 52px; height: 52px; }
.tile-badge { background: var(--night); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.3); }
.tile-badge .ticon, .tile-badge img.ticon { width: 24px; height: 24px; }
@media (max-width: 560px) { .tile .ticon, .tile img.ticon { width: 44px; height: 44px; } }
/* small inline icons (type labels, legend, chips) sit in a dark round chip */
.type-tag img.ticon, .spot .type-tag img.ticon, .leg img.ticon, .type-chip img.ticon, .tf img.ticon, .pop-type img.ticon {
  background: radial-gradient(circle at 35% 30%, var(--night-2), var(--night) 75%); border-radius: 50%; padding: 2px; box-sizing: border-box; }
.type-tag img.ticon { width: 1.45em; height: 1.45em; }
.leg img.ticon { width: 26px; height: 26px; }
.type-chip { color: var(--t); background: color-mix(in srgb, var(--t) 10%, white); }
.type-chip img.ticon { width: 26px; height: 26px; }
/* "what people have seen" cards */
.ti { background: #fff; border: 1px solid var(--rule); }
.ti:hover { border-color: var(--t); box-shadow: 0 2px 10px color-mix(in srgb, var(--t) 18%, transparent); }
.ti-ico { background:
  radial-gradient(1px 1px at 22% 26%, rgba(255,255,255,.8), transparent 60%),
  radial-gradient(1px 1px at 76% 70%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(circle at 30% 22%, var(--night-2), var(--night) 72%); box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); }
.ti-ico img.ticon { width: 40px; height: 40px; }
@media (max-width: 480px) { .ti-ico img.ticon { width: 34px; height: 34px; } }
@media (max-width: 759px) { .ti-ico img.ticon { width: 30px; height: 30px; } }
/* map markers and clusters */
.tmark { background: var(--night); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--t), 0 2px 8px rgba(0,0,0,.35); }
.tmark img.ticon { width: 26px; height: 26px; }
.cluster { background: var(--night); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--signal), 0 0 14px rgba(70,217,240,.55); }
/* area pills: dark with a glowing pin in the area's signal colour */
.loc-pill, a.loc-pill { background: var(--night); color: #eaf2ff; }
.loc-pill svg { color: var(--ac, var(--signal)); filter: drop-shadow(0 0 3px var(--ac, var(--signal))); }
a.loc-pill:hover { background: var(--night-2); color: #fff; }

/* Browse by area: a night-sky panel */
.area-panel { border-radius: 16px; padding: 1.5rem 1.5rem 1.25rem; color: #eaf2ff; }
.area-panel h2 { color: #fff; margin-top: 0; }
.area-panel .muted { color: #a9bbd1; }
.area-panel .area-list { columns: initial; display: grid; grid-template-columns: 1fr; gap: .55rem; padding: 0; margin: 1rem 0 0; list-style: none; }
@media (min-width: 640px) { .area-panel .area-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .area-panel .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-panel .area-list li { border: 1px solid rgba(160,195,255,.16); background: rgba(255,255,255,.04); border-radius: 12px; padding: .5rem .6rem .5rem .5rem; }
.area-panel .area-list li:hover { border-color: rgba(160,195,255,.4); }
.area-panel .loc-pill { background: rgba(255,255,255,.08); }
.area-panel .n { color: #c8d6e8; font-size: .9rem; }

/* Official witnesses spotlight */
.official { margin: 2.5rem 0; border-radius: 16px; padding: 1.5rem; color: #eaf2ff; display: grid; gap: 1.1rem; position: relative; overflow: hidden; }
.official::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(70,217,240,.22), transparent 65%); pointer-events: none; }
@media (min-width: 860px) { .official { grid-template-columns: auto 1fr auto; align-items: center; padding: 1.75rem 2rem; gap: 1.75rem; } }
.off-badge { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(70,217,240,.12); box-shadow: inset 0 0 0 1px rgba(70,217,240,.45), 0 0 22px rgba(70,217,240,.25); color: var(--signal); }
.off-badge svg { width: 40px; height: 40px; }
.off-kicker { margin: 0 0 .2rem; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--signal); }
.official h2 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.official p.off-why { margin: 0 0 .8rem; color: #c3d2e6; }
.off-kinds { display: flex; flex-wrap: wrap; gap: .5rem; }
.off-kinds a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(160,195,255,.22); color: #eaf2ff; text-decoration: none; font-size: .92rem; font-weight: 600; }
.off-kinds a b { color: var(--signal); }
.off-kinds a:hover { border-color: var(--signal); color: #fff; }
.off-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 10px; background: var(--signal); color: var(--night); font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 0 20px rgba(70,217,240,.35); position: relative; z-index: 1; }
.off-cta:hover { background: #7fe6f6; color: var(--night); }
.off-cta svg { width: 1.1em; height: 1.1em; }

/* Month in the archive: folded away by default */
details.month-fold { border: 1px solid var(--rule); border-radius: 14px; padding: 0 1.1rem; margin: 2.5rem 0; }
details.month-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .9rem; padding: 1rem 0; }
details.month-fold > summary::-webkit-details-marker { display: none; }
.mf-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--signal); }
.mf-ico svg { width: 24px; height: 24px; }
.mf-t { flex: 1; }
.mf-t b { display: block; font-size: 1.15rem; }
.mf-t span { color: var(--muted); font-size: .92rem; }
.mf-chev { width: .75rem; height: .75rem; border-right: 2.5px solid var(--estuary); border-bottom: 2.5px solid var(--estuary); transform: rotate(45deg); transition: transform .2s; margin-right: .3rem; }
details.month-fold[open] .mf-chev { transform: rotate(-135deg); }
details.month-fold > summary:hover .mf-t b { color: var(--estuary); }
details.month-fold .case-list { margin-top: 0; border-top: 1px solid var(--rule); }
.mf-all { display: inline-block; margin: .5rem 0 1rem; font-weight: 600; }

.tf img.ticon { width: 26px; height: 26px; }
.tf.on img.ticon { filter: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.pop-type img.ticon { width: 24px; height: 24px; }
/* decade bars: night to signal */
.dec-f { background: linear-gradient(90deg, #1d3a58, #3d7f9e); }
.dec-row.peak .dec-f, .dec-row:hover .dec-f { background: linear-gradient(90deg, var(--night-2), var(--signal)); box-shadow: 0 0 10px rgba(70,217,240,.45); }
.dec-n { color: var(--night-2); }
/* phone and dark-card fixes */
.official { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .official { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 559px) { .official { padding: 1.25rem; } .off-badge { width: 56px; height: 56px; border-radius: 14px; } .off-badge svg { width: 32px; height: 32px; } .off-cta { width: 100%; } }
.area-panel .n { white-space: nowrap; }
@media (max-width: 559px) { .area-panel { padding: 1.25rem 1rem 1rem; } }
@media (max-width: 760px) { .mf-t b { font-size: 1rem; } .mf-t span { font-size: .8rem; } details.month-fold { padding: 0 .85rem; } }
.spot .type-tag, .cs-hero .type-tag { color: var(--g, #cfe3f5); }
/* resource cards: glowing icons on night-sky chips, matching the type icons */
.newto-card svg { background:
  radial-gradient(1px 1px at 22% 26%, rgba(255,255,255,.8), transparent 60%),
  radial-gradient(1px 1px at 78% 72%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(circle at 30% 22%, var(--night-2), var(--night) 72%);
  color: var(--nc, var(--signal)); filter: drop-shadow(0 0 0 transparent);
  box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); }
.newto-card svg path, .newto-card svg rect { filter: drop-shadow(0 0 2.5px var(--nc, var(--signal))); }
.newto-card:hover { border-color: color-mix(in srgb, var(--nc) 70%, #0b1626); box-shadow: 0 2px 12px color-mix(in srgb, var(--nc) 22%, transparent); }
.newto h2 .h-icon { color: var(--night-2); }

/* Stats: night-sky band with glowing counters */
.stats { margin: 2rem 0 0; border: 0; border-radius: 16px; gap: 0; background-color: var(--night); box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); }
.stats .stat { background: transparent; padding: 1.25rem 1.4rem; border-right: 1px solid rgba(160,195,255,.14); border-bottom: 1px solid rgba(160,195,255,.14); }
@media (min-width: 760px) { .stats .stat { border-bottom: 0; padding: 1.5rem 1.6rem; } .stats .stat:last-child { border-right: 0; } }
@media (max-width: 759px) { .stats .stat:nth-child(2n) { border-right: 0; } .stats .stat:nth-child(n+3) { border-bottom: 0; } }
.stats .stat b { color: var(--signal); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(70,217,240,.45); font-size: clamp(2rem, 4.5vw, 2.8rem); }
.stats .stat span { color: #b9c9dd; }
.stats.counted .stat b { animation: stat-pop .5s ease-out; }
@keyframes stat-pop { 0% { text-shadow: 0 0 30px rgba(70,217,240,.9); } 100% { text-shadow: 0 0 18px rgba(70,217,240,.45); } }
@media (prefers-reduced-motion: reduce) { .stats.counted .stat b { animation: none; } }

/* Suggest box: solid panel instead of a dashed outline */
.suggest-row { border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--rule)); background: linear-gradient(135deg, #f2f8fb, #eef1fb); border-radius: 14px; padding: 1.1rem 1.25rem; gap: 1rem; flex-wrap: nowrap; }
.sg-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #ffd166; box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); }
.sg-ico svg { width: 28px; height: 28px; filter: drop-shadow(0 0 3px #ffd166); }
.sg-t { flex: 1; min-width: 0; }
.sg-t b { display: block; color: var(--ink); }
.sg-t span { color: var(--muted); font-size: .92rem; }
.suggest-btn, a.btn.plain.suggest-btn { flex: none; background: var(--night); color: #fff; border: 0; border-radius: 10px; padding: .75rem 1.1rem; box-shadow: 0 0 0 1px rgba(70,217,240,.35), 0 0 16px rgba(70,217,240,.2); }
.suggest-btn svg { color: var(--signal); }
.suggest-btn:hover, a.btn.plain.suggest-btn:hover { background: var(--night-2); color: #fff; }
@media (max-width: 640px) { .suggest-row { flex-wrap: wrap; } .suggest-row .suggest-btn { width: 100%; justify-content: center; } }

/* Buttons in the night-sky brand */
.btn { background: var(--night); color: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(70,217,240,.35), 0 0 16px rgba(70,217,240,.18); transition: background .15s, box-shadow .15s, transform .15s; }
.btn:hover { background: var(--night-2); color: #fff; box-shadow: 0 0 0 1px rgba(70,217,240,.6), 0 0 20px rgba(70,217,240,.3); }
.btn.plain { background: transparent; color: var(--night-2); box-shadow: none; border: 1px solid var(--rule); }
.btn.plain:hover { border-color: var(--signal); color: var(--night); background: transparent; }
/* Report a sighting: the primary call to action, glowing cyan */
.btn.report-btn { background: var(--signal); color: var(--night); border: 0; font-weight: 800; box-shadow: 0 0 0 1px rgba(11,22,38,.08), 0 0 22px rgba(70,217,240,.45); }
.btn.report-btn:hover { background: #7fe6f6; color: var(--night); transform: translateY(-1px); box-shadow: 0 0 28px rgba(70,217,240,.6); }
.btn.report-btn:active { transform: translateY(1px); box-shadow: 0 0 14px rgba(70,217,240,.4); }
.actions .btn { padding: .8rem 1.3rem; }
/* Header "Report a sighting" pill */
.nav a.nav-report { color: var(--night); border: 2px solid var(--signal); background: color-mix(in srgb, var(--signal) 12%, white); box-shadow: 0 0 12px rgba(70,217,240,.25); }
.nav a.nav-report svg { color: #0d93ad; }
.nav a.nav-report:hover, .nav a.nav-report[aria-current="page"] { background: var(--signal); color: var(--night); }
.nav a.nav-report:hover svg, .nav a.nav-report[aria-current="page"] svg { color: var(--night); }
form.report button[type=submit], form.report .btn { background: var(--signal); color: var(--night); font-weight: 800; box-shadow: 0 0 22px rgba(70,217,240,.4); }
form.report button[type=submit]:hover, form.report .btn:hover { background: #7fe6f6; color: var(--night); }
.iw-points li::before { background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, white), 0 0 8px rgba(70,217,240,.6); }

/* Spotlight labels: top right, larger, in the night-sky brand */
.spot-label, .spot .spot-label { left: auto; right: 1rem; top: 1rem; font-size: 1rem; font-weight: 800; letter-spacing: .07em; padding: .55rem 1rem; border-radius: 999px; z-index: 2;
  background: rgba(11,22,38,.82); color: #ffd166; border: 1.5px solid #ffd166; box-shadow: 0 0 18px rgba(255,209,102,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#spot-latest .spot-label { background: rgba(11,22,38,.82); color: var(--signal); border-color: var(--signal); box-shadow: 0 0 18px rgba(70,217,240,.45); }
@media (max-width: 760px) { .spot-label, .spot .spot-label { font-size: .82rem; padding: .45rem .85rem; right: .75rem; top: .75rem; } }

/* No italics anywhere: emphasis in case write-ups shows as semibold instead */
em, i { font-style: normal; font-weight: 600; }

/* Source groups on case pages */
.src-note { font-size: .92rem; color: var(--muted); margin: -.2rem 0 .7rem; }
.src-ref, .src-held { font-size: .9rem; }
.src-ref b { font-variant-numeric: tabular-nums; }
.src-held .addr { color: var(--muted); }
.src-list.src-held li { border-left-color: var(--estuary); border-style: dashed solid dashed solid; }
.src-list.src-later li { border-left-color: var(--rule); }
.src-more { margin: 1.4rem 0 .4rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.src-more summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style-position: outside; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.src-more[open] summary { margin-bottom: .6rem; }

/* ===== Oct 2026 simplification: one plain, white look ===== */
/* Home page */
.home { padding-top: 1rem; }
.home-top { padding-bottom: .5rem; }
.home-strip { display: block; width: 100%; height: 170px; object-fit: cover; object-position: 68% 45%; border-radius: 12px; margin: 0 0 1.25rem; background: #0d1830; }
@media (min-width: 760px) { .home-strip { height: 280px; } }
.home-top h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; max-width: 40rem; }
.home-lede { font-size: 1.12rem; margin: 0 0 .5rem; max-width: 40rem; }
.home-trust { color: var(--muted); margin: 0 0 1.25rem; max-width: 40rem; }
.home .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.home .actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
@media (min-width: 760px) { .home .actions .btn { flex: 0 0 auto; } }
.home-sec { margin-top: 2.5rem; }
.home-sec .sec-intro { margin: -.25rem 0 .75rem; }
.home-sec .map.big { height: 320px; }
@media (min-width: 960px) { .home-sec .map.big { height: 460px; } }
.more-btn { margin-top: 1rem; width: 100%; }
@media (min-width: 760px) { .more-btn { width: auto; } }
.home-links { display: grid; gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 760px) { .home-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .home-links { grid-template-columns: repeat(4, 1fr); } }
.home-links a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--paper); }
.home-links a:hover { border-color: var(--estuary); }
.home-links b { display: block; color: var(--estuary-dark); }
.home-links span { color: var(--muted); font-size: .95rem; }
.btn.plain { background: var(--paper); color: var(--estuary-dark); border: 1px solid #c9d0d4; }
.btn.plain:hover { background: var(--wash); color: var(--estuary-dark); }

/* Case lists: title first, then one grey line */
.case-row .case-title { margin: 0 0 .15rem; font-size: 1.08rem; line-height: 1.3; }
.case-line { color: var(--muted); font-size: .9rem; margin: 0 0 .3rem; }
.case-sum { color: var(--ink); opacity: .85; }

/* Area pills: light, not navy */
.loc-pill, a.loc-pill { background: #e6f0f2; color: var(--estuary-dark); }
.loc-pill svg { filter: none; color: var(--ac, var(--estuary)); }
a.loc-pill:hover { background: #d5e6ea; color: var(--estuary-dark); }

/* Case page: smaller picture so the summary shows on the first phone screen */
@media (max-width: 760px) {
  .cs-pic, .cs-pic.photo { aspect-ratio: auto; }
  .cs-pic img, .cs-pic svg { height: 190px; width: 100%; object-fit: cover; }
  /* Real pictures show whole, not sliced into a strip; only the drawn scenes stay short */
  .cs-pic.photo img { height: auto; object-fit: contain; }
}
.cs-pic figcaption { background: var(--wash); color: var(--muted); }
/* Author note: label first */
.author-note footer { margin: 0 0 .35rem; }

/* ===== Podcast episodes (Listen page) ===== */
.eps { margin-top: 2rem; }
.eps h2 { margin: 0 0 .25rem; }
.eps .sub { margin: 0 0 1rem; }
.ep-art { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--night-2), var(--night) 72%); box-shadow: 0 2px 8px rgba(13,24,48,.18); transition: transform .15s, box-shadow .15s; }
.ep-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-art.sq img { object-fit: contain; }
.ep-art .src { position: absolute; left: .5rem; bottom: .5rem; background: rgba(11,22,38,.85); color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
a:hover > .ep-art, a.ep-art:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,24,48,.25); }
.ep-title { font-weight: 700; line-height: 1.3; margin: .6rem 0 .1rem; }
.ep-title a { color: var(--ink); text-decoration: none; }
.ep-title a:hover { color: var(--estuary); text-decoration: underline; }
.ep-show { color: var(--muted); font-size: .92rem; margin: 0 0 .35rem; }
.ep-note { margin: 0; font-size: .97rem; }

/* Latest listen: one wide card */
.ep-latest { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.1rem; border-radius: 14px; background: linear-gradient(135deg, #f2f8fb, #eef1fb); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--rule)); }
.ep-latest .label { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--estuary); }
.ep-latest .ep-title { font-size: 1.2rem; margin-top: .25rem; }
.ep-latest .links { margin-top: .75rem; }
@media (max-width: 640px) { .ep-latest { grid-template-columns: 1fr; } }

/* Recommended: card grid */
.ep-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem 1rem; }
.ep-grid .ep-note { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Library: compact rows */
.ep-lib { list-style: none; padding: 0; margin: 0 0 1rem; }
.ep-lib li { display: grid; grid-template-columns: 112px 1fr; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.ep-lib li:last-child { border-bottom: 0; }
.ep-lib .ep-art { border-radius: 6px; box-shadow: none; }
.ep-lib .ep-art .src { display: none; }
.ep-lib .ep-title { margin: 0; font-size: .98rem; }
.ep-lib .ep-show { margin: 0; font-size: .88rem; }
@media (max-width: 480px) { .ep-lib li { grid-template-columns: 88px 1fr; } }

/* Home: strongest cases as picture cards */
.hc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .hc-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .hc-grid { grid-template-columns: repeat(3, 1fr); } }
.hc { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); color: var(--ink); text-decoration: none; }
.hc:hover { border-color: var(--estuary); box-shadow: 0 6px 18px rgba(10,20,36,.10); color: var(--ink); }
.hc-pic { position: relative; display: block; aspect-ratio: 16 / 9; background: #0d1830; overflow: hidden; }
.hc-pic img, .hc-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-type { position: absolute; left: .6rem; bottom: .6rem; }
.hc-type .type-tag { background: rgba(255,255,255,.94); color: var(--t); border-radius: 999px; padding: .2rem .65rem .2rem .3rem; font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.hc-body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1.1rem; }
.hc-title { font-size: 1.12rem; line-height: 1.3; }
.hc:hover .hc-title { color: var(--estuary); }
.hc-meta { color: var(--muted); font-size: .9rem; }
.hc-note { font-size: .98rem; }

/* Bigger type icons on pictures */
.hc-type { left: .7rem; bottom: .7rem; }
.hc-type .type-tag { font-size: 1rem; padding: .3rem .85rem .3rem .35rem; gap: .45rem; }
.hc-type .type-tag img.ticon { width: 2.1em; height: 2.1em; padding: 3px; }
@media (max-width: 560px) {
  .hc-type .type-tag { font-size: .95rem; }
  .hc-type .type-tag img.ticon { width: 2em; height: 2em; }
}
.tile-badge { width: 36px; height: 36px; right: -8px; bottom: -8px; }
.tile-badge .ticon { width: 28px; height: 28px; }

/* Listen page: headings with coloured icons */
.ih { display: flex; align-items: center; gap: .65rem; }
.h-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; color: var(--ic); background: color-mix(in srgb, var(--ic) 13%, white); }
.h-ico svg { width: 1.4rem; height: 1.4rem; }
.h-ico.sm { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
.h-ico.sm svg { width: 1.2rem; height: 1.2rem; }
.eps h2.ih { font-size: 1.45rem; }
.eps .sub { margin-top: .35rem; }
/* tap-to-open sections: chevron on the right instead of the small triangle */
details.group > summary.ih { list-style: none; padding: .85rem 0; }
details.group > summary.ih::-webkit-details-marker { display: none; }
details.group > summary.ih::after { content: ""; margin-left: auto; width: .65rem; height: .65rem; border-right: 2.5px solid var(--estuary); border-bottom: 2.5px solid var(--estuary); transform: rotate(45deg); transition: transform .2s; margin-right: .35rem; }
details.group[open] > summary.ih::after { transform: rotate(-135deg); }
/* latest listen card: no inner label now, so tighten it */
.ep-latest .ep-title { margin-top: 0; }

/* Rating filter chips (map and sightings pages) */
.rating-filter { padding-bottom: .6rem; }
.rf { padding-left: .8rem; }
.rf-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--t, #9aa3a8); flex: none; }
.rf-hint { font-weight: 400; color: var(--muted); }
.tf.rf.on .rf-hint { color: rgba(255,255,255,.88); }
.tf.rf.on .rf-dot { background: #fff; }
.rf-label { margin: .4rem 0 .3rem; font-weight: 600; }
.rf-label a { font-weight: 400; margin-left: .5rem; font-size: .92rem; }
.map-count { margin: .6rem 0 0; }
@media (max-width: 760px) { .tf.rf:not(.on) .rf-hint { display: none; } }
.mil-toggle { flex-wrap: nowrap; }
.mil-toggle input { flex: none; width: 1.25rem; }

/* Military sites: filled square tiles, so they never look like the round sighting markers */
.milmark { position: relative; width: 30px; height: 30px; border-radius: 7px; background: #8b9470; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.milmark::before { content: none; }
.milmark svg { width: 18px; height: 18px; stroke-width: 2.2; }
.milmark.now { background: #3f4d22; border-color: #fff; color: #fff; }
.milmark.mini { width: 22px; height: 22px; border-radius: 5px; border-width: 1.5px; box-shadow: 0 0 0 1px #c9cdbd; }
.milmark.mini svg { width: 13px; height: 13px; }

/* Rating chips: on phones, five equal buttons that always fit */
@media (max-width: 760px) {
  .rating-filter { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: .4rem; overflow: visible; margin: 0; padding: .25rem 0 .8rem; }
  .rating-filter .tf.rf { justify-content: center; gap: .3rem; padding: .5rem .2rem; min-width: 0; }
  .rating-filter .tf.rf .rf-hint { display: none; }
  .rating-filter .rf-dot { width: .6em; height: .6em; }
}
/* Bigger military tiles so the icon reads at a glance */
.milmark { width: 38px; height: 38px; border-radius: 9px; border-width: 2.5px; }
.milmark svg { width: 26px; height: 26px; stroke-width: 2.6; }
.milmark.mini { width: 30px; height: 30px; border-radius: 7px; }
.milmark.mini svg { width: 20px; height: 20px; }

/* Map keys: bigger icons in a tidy grid, easy to read on a phone */
.legend, .mil-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .65rem .8rem; margin-top: 1rem; font-size: .95rem; color: var(--ink); }
.leg, .mil-key .mk { display: flex; align-items: center; gap: .6rem; }
.leg img.ticon { width: 38px; height: 38px; flex: none; }
.mil-key .milmark.mini { width: 38px; height: 38px; border-radius: 9px; border-width: 2.5px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mil-key .milmark.mini svg { width: 26px; height: 26px; }
.mil-key .mk b { font-weight: 600; }
.legend, .mil-key { line-height: 1.2; }
.leg img.ticon, .mil-key .milmark.mini { width: 34px; height: 34px; }
.mil-key .milmark.mini svg { width: 23px; height: 23px; }
.mil-key .milmark, .milmark { display: flex; align-items: center; justify-content: center; padding: 0; }
.milmark svg { display: block; margin: 0; }

/* Who to follow */
.fl-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.fl { border: 1px solid #dde3e6; border-radius: 12px; padding: 1rem 1.1rem; background: var(--paper, #fff); }
.fl-top { display: flex; align-items: center; gap: .8rem; }
.fl-av { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--estuary, #1f5c6b); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fl h3 { margin: 0; font-size: 1.15rem; }
.fl .by { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; }
.fl > p { margin: .7rem 0 0; }
.fl-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.fl-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 600; text-decoration: none; color: #fff; background: #3d4a5c; }
.fl-btn svg { width: 1.15rem; height: 1.15rem; }
.fl-x { background: #111; } .fl-facebook { background: #1877f2; } .fl-youtube { background: #d62a2a; } .fl-instagram { background: #c13584; }
.fl-substack { background: #e2611f; } .fl-podcast { background: #7a3fb8; } .fl-website { background: var(--estuary, #1f5c6b); }
.fl-btn:hover { filter: brightness(1.1); }
/* Who to follow: picture or icon avatars */
.fl-av { position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--k, #1f5c6b); color: #fff; }
.fl-av > svg { width: 1.9rem; height: 1.9rem; }
.fl-av.has-img { background: #e9eef0; }
.fl-av.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.fl-kind { position: absolute; right: -4px; bottom: -4px; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--k); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.fl-kind svg { width: .95rem; height: .95rem; }
.fl-spotify { background: #1db954; color: #fff; }
.fl-spotify svg circle { fill: #fff; }
.fl-btn { padding: .45rem .85rem; font-size: .95rem; }

/* Header: room for seven links between tablet and wide desktop */
@media (min-width: 761px) and (max-width: 1100px) { .nav { gap: 1rem; } .nav a { font-size: .92rem; } .brand-t { font-size: .95em; } }
@media (min-width: 761px) and (max-width: 900px) { .nav { gap: .75rem; } .nav a { font-size: .86rem; } }

/* Who to follow: tools */
.fl-tools { display: grid; gap: .75rem; margin: 1.25rem 0 1rem; }
.fl-tools input { width: 100%; font: inherit; padding: .65rem .85rem; border: 1px solid #c9d0d4; border-radius: 8px; }
.fl-sort { display: inline-flex; justify-self: start; border: 1px solid #c9d0d4; border-radius: 999px; padding: 3px; background: var(--wash); }
.fl-sort button { font: inherit; font-size: .92rem; font-weight: 600; border: 0; background: none; color: var(--muted); padding: .4rem .95rem; border-radius: 999px; cursor: pointer; }
.fl-sort button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.fl-kinds { padding-bottom: .25rem; }
.tf .tf-ico { display: inline-flex; width: 1.35rem; height: 1.35rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--t); color: #fff; }
.tf .tf-ico svg { width: .85rem; height: .85rem; }
.tf.on .tf-ico { background: rgba(255,255,255,.25); }
.tf.on b { color: rgba(255,255,255,.85); }
.fl-count { font-size: .95rem; font-weight: 600; color: var(--muted); background: var(--wash); border-radius: 999px; padding: .1rem .55rem; vertical-align: middle; }
.fl-letter { font-size: 1.5rem; color: var(--estuary); border-bottom: 2px solid var(--rule); padding-bottom: .25rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.fl-jump { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.fl-jump a { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: 6px; background: var(--wash); font-weight: 700; text-decoration: none; }
.fl-jump a:hover { background: var(--estuary); color: #fff; }
.fl-new { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #d9692b; color: #fff; border-radius: 4px; padding: .1rem .4rem; vertical-align: middle; }

/* Listen & read: Who to follow teaser */
.fl-teaser { display: grid; gap: .9rem; margin: 1.5rem 0 .5rem; padding: 1.2rem 1.25rem; border-radius: 14px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(90,169,255,.35), transparent 45%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 75% 40%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.7), transparent), linear-gradient(135deg, #0b1730, #16264a 60%, #1f5c6b); }
.fl-teaser:hover { color: #fff; box-shadow: 0 6px 20px rgba(11,23,48,.3); }
.fl-teaser-head { display: flex; gap: .8rem; align-items: center; }
.fl-teaser-head strong { display: block; font-size: 1.3rem; line-height: 1.2; }
.fl-teaser-head span span { display: block; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.4; margin-top: .15rem; }
.fl-teaser-ico { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.fl-teaser-ico svg { width: 1.5rem; height: 1.5rem; }
.fl-faces { display: flex; padding-left: .5rem; }
.fl-faces .fl-av { width: 2.9rem; height: 2.9rem; margin-left: -.55rem; border: 2px solid #0f1e3c; box-sizing: content-box; }
.fl-faces .fl-av > svg { width: 1.4rem; height: 1.4rem; }
.fl-faces .fl-kind { display: none; }
.fl-more { background: rgba(255,255,255,.18); font-size: .9rem; }
.fl-teaser-new { font-size: .92rem; color: rgba(255,255,255,.9); }
.fl-teaser-new b { background: #d9692b; border-radius: 4px; padding: .05rem .4rem; margin-right: .35rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.fl-teaser-go { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: #0b1730; font-weight: 700; padding: .55rem 1rem; border-radius: 999px; }
.fl-teaser-go svg { width: 1.1rem; height: 1.1rem; transition: transform .15s; }
.fl-teaser:hover .fl-teaser-go svg { transform: translateX(3px); }
@media (max-width: 420px) { .fl-faces .fl-av:nth-child(n+6):not(.fl-more) { display: none; } }

/* Local media: books, films and archives about our area */
.lm-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; }
@media (min-width: 640px) { .lm-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .lm-grid.four { grid-template-columns: repeat(4, 1fr); } }
.lm { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); }
.lm:hover { border-color: var(--estuary); }
.lm-pic { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #1f5c6b, #0d1830); overflow: hidden; }
.lm-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(192,57,43,.92); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.lm-play svg { width: 26px; height: 26px; margin-left: 3px; }
.lm-pic:hover .lm-play { transform: scale(1.06); }
.lm-cover { height: 82%; aspect-ratio: 2 / 3; border-radius: 3px 6px 6px 3px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.4); background: #f4efe4; }
.lm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-typo { display: flex; flex-direction: column; justify-content: space-between; padding: .7rem .6rem; color: #1c2226; border-left: 6px solid #17904b; text-align: left; }
.lm-typo b { font-size: .95rem; line-height: 1.15; }
.lm-typo span { font-size: .7rem; color: #5d676e; }
.lm-Magazine .lm-typo { border-left-color: #b8379b; }
.lm-icon { width: 72px; height: 72px; border-radius: 18px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; }
.lm-icon svg { width: 40px; height: 40px; }
.lm-body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1.1rem; flex: 1; }
.lm-kind { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; font-weight: 700; color: var(--k); }
.lm-kind svg { width: 1.15em; height: 1.15em; }
.lm h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.lm h3 a { color: var(--ink); text-decoration: none; }
.lm h3 a:hover { color: var(--estuary); text-decoration: underline; }
.lm-by { margin: 0; color: var(--muted); font-size: .92rem; }
.lm-why { margin: .2rem 0 0; font-size: .98rem; }
.lm-cases { margin: .3rem 0 0; font-size: .92rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.lm-cases span { color: var(--muted); margin-right: .15rem; }
.lm-cases a { background: var(--wash); border-radius: 999px; padding: .15rem .6rem; text-decoration: none; color: var(--ink); font-weight: 600; }
.lm-cases a:hover { background: #e3eaec; }
.lm .links { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.lm.compact .lm-why { font-size: .95rem; }
.local-media { margin: 1.5rem 0 2rem; padding: 1.25rem; border-radius: 14px; background: var(--wash); }
.local-media h2 { margin-top: 0; }
.local-media .sub { margin: 0 0 1rem; }
@media (max-width: 480px) { .local-media { padding: 1rem .75rem; margin-left: -.25rem; margin-right: -.25rem; } }

/* "Featured in" on a case page */
.feat-in { margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; }
.feat-in h2 { font-size: 1rem; margin: 0 0 .6rem; }
.feat-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.feat-in li { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; align-items: center; }
.feat-in .lm-pic { border-radius: 8px; }
.feat-in .lm-play { width: 32px; height: 32px; }
.feat-in .lm-play svg { width: 16px; height: 16px; margin-left: 2px; }
.feat-in .lm-typo b { font-size: .55rem; } .feat-in .lm-typo span { display: none; } .feat-in .lm-typo { padding: .3rem; border-left-width: 3px; }
.feat-in .lm-icon { width: 40px; height: 40px; border-radius: 10px; } .feat-in .lm-icon svg { width: 22px; height: 22px; }
.feat-in .lm-kind { font-size: .8rem; }
.feat-in b.t { display: block; line-height: 1.3; }
.feat-in b.t a { color: var(--ink); }
.feat-in .lm-by { font-size: .88rem; }
a.lm-pic, a.lm-pic * { text-decoration: none; }
.feat-in b.t a { text-decoration: none; } .feat-in b.t a:hover { text-decoration: underline; color: var(--estuary); }

/* Video library and case-page videos */
.vid { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); }
.vid:hover { border-color: var(--estuary); }
.vid h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.vid h3 a { color: var(--ink); text-decoration: none; } .vid h3 a:hover { color: var(--estuary); text-decoration: underline; }
.lm-by a { color: var(--muted); }
.vid-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #0d1830; cursor: pointer; overflow: hidden; }
.vid-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play:hover .lm-play, .vid-play:focus-visible .lm-play { transform: scale(1.08); }
.vid-dur, .vid-from { position: absolute; bottom: .5rem; background: rgba(10,14,20,.85); color: #fff; font-size: .8rem; font-weight: 700; border-radius: 5px; padding: .1rem .4rem; }
.vid-dur { right: .5rem; } .vid-from { left: .5rem; background: rgba(192,57,43,.92); }
.vid-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.vid-note { margin: .2rem 0 0; font-size: .95rem; color: var(--muted); }
.vid-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .vid-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .vid-grid.three { grid-template-columns: repeat(3, 1fr); } .vid-grid.four { grid-template-columns: repeat(4, 1fr); } }
.w-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0 1.25rem; }
.w-tools input { max-width: 22rem; }
.w-kinds { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-kinds button { font: inherit; font-size: .92rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; min-height: 40px; }
.w-kinds button svg { width: 1.1em; height: 1.1em; color: var(--t, var(--estuary)); }
.w-kinds button.on { background: var(--estuary); border-color: var(--estuary); color: #fff; } .w-kinds button.on svg { color: #fff; }
.w-kinds b { font-weight: 400; opacity: .8; }
.w-count { color: var(--muted); font-size: .95rem; margin: 0 0 .75rem; }
.w-channels { margin-top: 2.5rem; }
.case-vids { margin: 1.5rem 0; }
.case-vids h2 { font-size: 1.15rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.case-vids h2 svg { width: 1.3em; height: 1.3em; color: #c0392b; }
.watch-teaser { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.watch-teaser:hover { border-color: var(--estuary); color: var(--ink); }
.watch-teaser .wt-thumbs { display: flex; flex-shrink: 0; }
.watch-teaser .wt-thumbs img { width: 64px; height: 40px; object-fit: cover; border-radius: 5px; border: 2px solid var(--paper); margin-left: -14px; }
.watch-teaser .wt-thumbs img:first-child { margin-left: 0; }
.watch-teaser span.t { display: flex; flex-direction: column; } .watch-teaser span.t span { color: var(--muted); font-size: .92rem; }
@media (max-width: 480px) { .watch-teaser .wt-thumbs img:nth-child(n+3) { display: none; } }

/* Events */
.ev-h { font-size: 1.15rem; margin: 1.75rem 0 .75rem; }
.ev { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 1rem; background: var(--paper); }
.ev.past { opacity: .75; }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; padding: .5rem .25rem; border-radius: 10px; background: var(--estuary); color: #fff; line-height: 1.15; }
.ev-date b { font-size: 1.7rem; }
.ev-date span { font-size: .85rem; font-weight: 600; }
.ev h2 { font-size: 1.2rem; margin: 0 0 .5rem; line-height: 1.3; }
.ev h2 a { color: var(--ink); text-decoration: none; } .ev h2 a:hover { color: var(--estuary); text-decoration: underline; }
.ev-local { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; color: var(--estuary); }
.ev-facts { display: grid; grid-template-columns: 6rem 1fr; gap: .3rem .75rem; margin: 0 0 .6rem; font-size: .98rem; }
.ev-facts dt { color: var(--muted); }
.ev-facts dd { margin: 0; }
.ev-details { margin: 0 0 .6rem; }
.ev .links { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 480px) { .ev { grid-template-columns: 1fr; } .ev-date { flex-direction: row; gap: .4rem; justify-self: start; padding: .3rem .7rem; } .ev-date b { font-size: 1rem; } .ev-facts { grid-template-columns: 1fr; gap: 0; } .ev-facts dd { margin-bottom: .4rem; } }
.ev-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; }
.ev-tags > span { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--wash); color: var(--ink); }
.ev-tags svg { width: 1.1em; height: 1.1em; }
.ev-fmt.f-in-person { color: #1f5c6b; } .ev-fmt.f-online { color: #6a4fd6; } .ev-fmt.f-hybrid { color: #b8379b; }
.ev-tags .ev-price { color: #17904b; }
.ev-tags .ev-local { color: var(--estuary); background: #e3eef0; }
#ev-tools { flex-direction: column; align-items: flex-start; gap: .5rem; }
.fl.fl-hl { border-color: var(--estuary); box-shadow: 0 0 0 3px #cfe3e7; }
.ev-facts dd a { color: var(--estuary); }
.ref-hl { outline: 3px solid #cfe3e7; outline-offset: 4px; border-radius: 12px; }
.ref-ico { display: inline-flex; vertical-align: -0.15em; color: var(--estuary); }
.ref-ico svg { width: 1.05em; height: 1.05em; }

/* Resources page */
.rs-jump { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; margin: 1rem 0 .5rem; background: var(--paper); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.rs-jump::-webkit-scrollbar { display: none; }
.rs-jump a { flex: none; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--rule); font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--paper); }
.rs-jump a:hover { border-color: var(--estuary); color: var(--estuary); }
.rs-sec { padding-top: 1.75rem; margin-top: 1.25rem; border-top: 1px solid var(--rule); scroll-margin-top: 4rem; }
.rs-sec:first-of-type { border-top: 0; }
.rs-sec > h2 { margin: 0; }
.rs-sec > .sub { margin: .3rem 0 1rem; max-width: var(--measure); }
.rs-h3 { font-size: 1.05rem; margin: 1.25rem 0 .6rem; color: var(--estuary-dark); }
.rs-sec .more-btn { margin-top: .75rem; }
.rs-sec .more-rest { margin-top: 1rem; }
.rs-all { margin-top: 1.25rem; }
.rs-star { display: inline-block; vertical-align: middle; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #fff3d6; color: #8a6100; }
.rs-tag { display: inline-block; font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; background: var(--wash); color: var(--muted); margin-left: .25rem; }
.rs-people { grid-template-columns: 1fr; }
@media (min-width: 760px) { .rs-people { grid-template-columns: repeat(2, 1fr); } }
.rs-sec .res-list { max-width: 52rem; }
.lm-Podcast .lm-cover { aspect-ratio: 1 / 1; height: 78%; border-radius: 10px; }
@media (max-width: 639px) {
  .rs-swipe { display: flex; overflow-x: auto; gap: .75rem; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-right: -16px; padding-right: 16px; }
  .rs-swipe > * { flex: 0 0 78%; scroll-snap-align: start; }
}
#local .lm-grid.four .lm-why { font-size: .95rem; }

/* Resources: every section is a swipeable row, with Show all as a grid */
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rs-rowwrap { position: relative; }
.rs-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 2px 2px .75rem; scrollbar-width: thin; }
.rs-item { flex: 0 0 17rem; scroll-snap-align: start; display: flex; }
.rs-item > * { flex: 1; min-width: 0; }
@media (max-width: 639px) { .rs-row { margin-right: -16px; padding-right: 16px; gap: .75rem; } .rs-item { flex-basis: 80%; } }
.rs-row.all { flex-wrap: wrap; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); scroll-snap-type: none; margin-right: 0; padding-right: 2px; }
.rs-arrow { display: none; position: absolute; top: 40%; z-index: 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px rgba(10,20,36,.15); cursor: pointer; align-items: center; justify-content: center; }
.rs-arrow svg { width: 1.2rem; height: 1.2rem; }
.rs-arrow.prev { left: -.9rem; } .rs-arrow.next { right: -.9rem; }
@media (hover: hover) and (min-width: 760px) { .rs-arrow { display: inline-flex; } }
.rs-rowwrap.all .rs-arrow { display: none; }
.rs-all-btn { margin-top: .5rem; }
.rs-chips { margin-bottom: 1rem; }
.rs-chips button svg { width: 1.1em; height: 1.1em; }
.rs-item .fl { width: 100%; }
.fl-tags { margin: .5rem 0 0; display: flex; gap: .3rem; flex-wrap: wrap; }
.fl-tags .rs-tag { margin-left: 0; }
.lm-rate { margin-left: .35rem; font-weight: 400; }
.ep-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); }
.ep-card .ep-art { border-radius: 0; box-shadow: none; }
.ep-card-body { padding: .7rem .9rem 1rem; }
.ep-card .ep-title { margin-top: 0; }
.ep-flag { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; color: #d0640f; }
.ep-card .ep-note { color: var(--muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-item .fl > p:not(.fl-tags) { font-size: .98rem; line-height: 1.55; }
.rs-item .fl .fl-links { flex-wrap: wrap; }

/* Image viewer */
.cs-pic.photo img, .cf-fig img, .story img, img[data-zoom] { cursor: zoom-in; }
.cf-fig figcaption::after, .cs-pic.photo figcaption::after { content: " Tap to enlarge."; opacity: .75; }
html.zoom-open { overflow: hidden; }
.zoom-box { position: fixed; inset: 0; z-index: 9999; background: #050a18; display: flex; flex-direction: column; }
.zoom-scroll { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.zoom-scroll img { max-width: 100vw; max-height: calc(100vh - 3.5rem); width: auto; height: auto; object-fit: contain; cursor: zoom-in; margin: 0; border-radius: 0; background: #fff; }
.zoom-box.big .zoom-scroll { display: block; }
.zoom-box.big .zoom-scroll img { max-width: none; max-height: none; width: max(1000px, 160vw); cursor: zoom-out; }
.zoom-x { position: absolute; top: .5rem; right: .6rem; z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1.8rem; box-shadow: 0 0 0 1px rgba(255,255,255,.35); line-height: 1; cursor: pointer; }
.zoom-x:hover, .zoom-x:focus-visible { background: rgba(255,255,255,.3); }
.zoom-cap { margin: 0; padding: .7rem 1rem; color: #c9d6ea; font-size: .9rem; text-align: center; }

/* AFU archive guide */
.ag-lead { font-size: 1.1rem; max-width: 46rem; }
.ag-how { max-width: 46rem; }
.ag-start { border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.25rem 0 1.5rem; max-width: 46rem; background: var(--paper); }
.ag-start h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.ag-start ol { margin: 0; padding-left: 1.3rem; } .ag-start li { margin: .3rem 0; }
.ag-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0 .75rem; }
.ag-search { flex: 1 1 18rem; } .ag-search input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--rule); border-radius: 10px; font: inherit; }
.ag-sort select { margin-left: .4rem; padding: .5rem; border-radius: 8px; border: 1px solid var(--rule); font: inherit; }
.ag-only { display: inline-flex; gap: .5rem; align-items: center; margin: .6rem 0 0; }
.ag-count { margin: .5rem 0 1rem; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.ag-card { border: 1px solid var(--rule); border-top: 4px solid var(--c); border-radius: 12px; padding: 1rem 1.1rem; background: var(--paper); display: flex; flex-direction: column; scroll-margin-top: 6rem; }
.ag-card h2 { font-size: 1.15rem; margin: .1rem 0 .2rem; }
.ag-cat { margin: 0; font-size: .8rem; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .04em; }
.ag-by { margin: 0; color: var(--muted); font-size: .92rem; }
.ag-facts { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.ag-facts span { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--ink, inherit); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; font-weight: 600; }
.ag-about { margin: .2rem 0 .6rem; }
.ag-loc { margin: 0 0 .6rem; background: #fff7e6; border-radius: 8px; padding: .5rem .7rem; font-size: .92rem; }
.ag-loc summary { cursor: pointer; } .ag-loc ol { margin: .5rem 0 0; padding-left: 1.2rem; } .ag-loc li { margin: .25rem 0; word-break: break-word; }
.ag-none { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.ag-folder { margin: auto 0 0; font-size: .85rem; color: var(--muted); word-break: break-word; }
.ag-foot { margin-top: 2rem; }
#ag-cats button[style] { border-color: color-mix(in srgb, var(--k) 45%, transparent); }
#ag-cats button.on[style] { background: var(--k); color: #fff; border-color: var(--k); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ag-only { display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem; width: auto; font-weight: 600; }
.ag-only input { width: 1.15rem !important; height: 1.15rem; margin: 0; flex: none; }
.ag-sort { display: flex !important; flex-direction: row !important; align-items: center; gap: .4rem; width: auto; }
.ag-sort select { margin: 0; width: auto; }

/* Resources: grids with "Show all", collapsible sections (replaces the swipe rows) */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.rs-grid .rs-item { flex: none; display: flex; }
.rs-grid .rs-item[hidden] { display: none; }
details.rs-sec > summary.rs-head { list-style: none; cursor: pointer; justify-content: flex-start; }
details.rs-sec > summary.rs-head::-webkit-details-marker { display: none; }
details.rs-sec > summary.rs-head::after { content: ""; width: .7rem; height: .7rem; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); margin: -.3rem 0 0 auto; transition: transform .15s; flex: none; }
details.rs-sec:not([open]) > summary.rs-head::after { transform: rotate(-45deg); margin-top: 0; }
details.rs-sec > summary h2 { margin: 0; }
details.rs-sec[hidden] { display: none; }
.rs-jump a.rs-jump-hi { background: var(--estuary); border-color: var(--estuary); color: #fff; }
.afu-callout { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .5rem; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(120deg, #0d1830, #1f5c6b); color: #fff; text-decoration: none; max-width: 52rem; box-shadow: 0 6px 20px rgba(13,24,48,.18); }
.afu-callout:hover { filter: brightness(1.08); }
.afu-callout b { display: block; font-size: 1.15rem; margin-bottom: .2rem; }
.afu-callout span span { color: #d7e3f2; font-size: .95rem; line-height: 1.45; }
.afu-ico { flex: none; width: 3rem; height: 3rem; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.afu-ico svg { width: 1.7rem; height: 1.7rem; }
.afu-go { flex: none; margin-left: auto; font-weight: 700; white-space: nowrap; background: #fff; color: #0d1830; border-radius: 999px; padding: .45rem .9rem; font-size: .9rem; }
@media (max-width: 640px) { .afu-callout { flex-wrap: wrap; } .afu-go { margin-left: 4rem; } }
.afu-inline { background: #eef4fb; border-left: 4px solid #2a6fd6; padding: .6rem .8rem; border-radius: 6px; max-width: var(--measure); margin: 0 0 1rem; }
.afu-callout > span:nth-child(2) > span { display: block; }
@media (max-width: 640px) { .afu-ico { display: none; } .afu-callout { padding: .85rem 1rem; gap: .5rem; } .afu-callout b { font-size: 1.05rem; } .afu-callout span span { font-size: .9rem; } .afu-go { margin-left: 0; } }

/* About me and support */
.about-me { margin: 2.5rem 0 0; scroll-margin-top: 5rem; }
.about-banner { width: 100%; height: auto; border-radius: 12px; margin: .75rem 0 1rem; display: block; }
.about-links:empty { display: none; }
.about-links, .foot-support { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.x-btn, .coffee-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .95rem; }
.x-btn { background: #000; color: #fff; } .x-btn:hover { background: #222; color: #fff; }
.coffee-btn { background: #ffdd00; color: #1a1a1a; } .coffee-btn:hover { background: #ffe74d; color: #1a1a1a; }
.x-btn svg, .coffee-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.x-btn.big, .coffee-btn.big { font-size: 1.05rem; padding: .7rem 1.2rem; }
.support-box { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; border-radius: 12px; background: #fffbe6; border: 1px solid #f3e3a1; }
.support-box h3 { margin: 0 0 .4rem; }
.support-box p:last-child { margin-bottom: 0; }
.foot-support a { font-size: .9rem; }
.site-footer .x-btn { color: #fff; } .site-footer .coffee-btn { color: #1a1a1a; }
.free-note { background: #eef8f1; border-left: 4px solid #17904b; padding: .6rem .85rem; border-radius: 6px; }
#support-btn:empty { display: none; }

/* Sightings list as picture cards, same as the home page */
.case-list { display: grid; grid-template-columns: 1fr; gap: 1rem; border-top: 0; }
@media (min-width: 640px) { .case-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .case-list { grid-template-columns: repeat(3, 1fr); } }
.case-list > li { border-bottom: 0; display: flex; }
.case-list > li > .hc { flex: 1; }
.case-list > li.loading, .case-list > li.err { grid-column: 1 / -1; }
.hc-note { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.expl-banner { display: flex; flex-direction: column; gap: .2rem; margin: .75rem 0 1rem; padding: .8rem 1rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0c95a; border-left: 6px solid #d99a00; color: #4a3500; }
.expl-banner b { font-size: 1.05rem; }
.hc-expl { position: absolute; right: .6rem; top: .6rem; background: #ffcf4d; color: #3a2a00; font-size: .78rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; }
.me-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.25rem 0 0; padding: .75rem 1rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); max-width: 46rem; }
.me-who { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.me-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.me-who u { color: var(--estuary); text-underline-offset: 2px; margin-left: .25rem; white-space: nowrap; }
.me-who:hover u { text-decoration-thickness: 2px; }
.nav .coffee-btn.nav-coffee { padding: .4rem .8rem; font-size: .88rem; margin-left: .25rem; color: #1a1a1a; }
.nav .coffee-btn.nav-coffee:hover { color: #1a1a1a; }
@media (max-width: 900px) { .nav .coffee-btn.nav-coffee { align-self: flex-start; margin: .5rem 0 0; } }
@media (min-width: 901px) {
  .nav .coffee-btn.nav-coffee { width: 2.4rem; height: 2.4rem; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .nav .coffee-btn.nav-coffee svg { width: 1.25rem; height: 1.25rem; }
}
.me-strip { max-width: none; width: fit-content; }
.yt-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .95rem; background: #c4302b; color: #fff; }
.yt-btn:hover { background: #a92721; color: #fff; }
.yt-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.yt-btn.big { font-size: 1.05rem; padding: .7rem 1.2rem; }
.about-fun { font-size: .95rem; margin: .6rem 0 0; }
.cases-map { margin: .25rem 0 1.25rem; }
.cases-map .map-note { margin: .4rem 0 0; font-size: .9rem; }
.cases-map .map.big { height: 420px; }
@media (max-width: 760px) { .cases-map .map.big { height: 300px; } }
.region-filter { padding-bottom: .5rem; }
.away-regions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.away-regions .btn { font-size: .95rem; }
/* YUFOR brand: big logo tile, name over strapline. Sizes step down with the screen. */
.brand img { width: 84px; height: 84px; border-radius: 14px; background: #000; }
.brand .brand-t { display: flex; flex-direction: column; line-height: 1.02; }
.brand .brand-t { font-size: 2.1rem; font-weight: 800; letter-spacing: .04em; }
.brand .brand-t span { display: block; font-size: .5em; font-weight: 700; letter-spacing: .01em; margin-top: .2rem; }
.site-header .wrap { min-height: 6.5rem; }
@media (min-width: 761px) and (max-width: 1100px) { .brand img { width: 68px; height: 68px; } .brand .brand-t { font-size: 1.7rem; } }
@media (max-width: 760px) {
  .site-header .wrap { min-height: 5.5rem; }
  .brand { gap: .6rem; }
  .brand img { width: 68px; height: 68px; border-radius: 12px; }
  .brand .brand-t { font-size: 1.7rem; }
  .brand .brand-t span { font-size: .48em; }
  .nav { top: 100%; }
}
@media (max-width: 360px) { .brand img { width: 56px; height: 56px; } .brand .brand-t { font-size: 1.4rem; } }
.foot-brand img { border-radius: 14px; background: #000; }
@media (max-width: 760px) { .section-head { flex-wrap: wrap; gap: .25rem 1rem; } }
.brand .brand-t span { white-space: nowrap; }
@media (max-width: 380px) { .brand .brand-t span { font-size: .44em; } }
@media (max-width: 360px) { .site-header .wrap { gap: .5rem; } .menu-btn { padding: .4rem .55rem; font-size: .8rem; } .brand { gap: .45rem; } }
/* cookie consent bar */
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 3000; max-width: 40rem; margin: 0 auto; background: var(--paper, #fff); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.cookie-bar p { margin: 0; flex: 1 1 18rem; font-size: .95rem; }
.cookie-bar div { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie-bar .btn { font-size: .95rem; padding: .5rem 1rem; }
@media (max-width: 420px) { .brand img { width: 60px; height: 60px; } .brand .brand-t { font-size: 1.6rem; } .brand .brand-t span { font-size: .44em; } .menu-btn { padding: .4rem .6rem; font-size: .85rem; } .site-header .wrap { gap: .5rem; } }
@media (max-width: 360px) { .brand img { width: 50px; height: 50px; } .brand .brand-t { font-size: 1.35rem; } }
/* region tag on picture cards */
.hc-reg { position: absolute; left: .6rem; top: .6rem; display: inline-flex; align-items: center; gap: .25rem; background: rgba(8,14,30,.78); color: #fff; font-size: .8rem; font-weight: 700; padding: .2rem .6rem .2rem .45rem; border-radius: 999px; backdrop-filter: blur(2px); }
.hc-reg svg { width: 1em; height: 1em; }
/* home intro */
.home-about { max-width: 46rem; margin: 0 0 1.25rem; }
.home-about p { margin: 0 0 .9rem; }
.home-find { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem; }
.home-find li { padding-left: 1.1rem; position: relative; color: var(--muted); }
.home-find li::before { content: ''; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--estuary); }
.home-find b { color: var(--ink); margin-right: .35rem; }
.home-find a { text-decoration: none; }
.home-hobby { background: var(--wash); border-left: 4px solid var(--estuary); padding: .75rem 1rem; border-radius: 6px; font-size: .97rem; }
/* Tablets: the menu sits on its own row, so the brand can fill the top row */
@media (min-width: 761px) and (max-width: 1100px) {
  .brand { gap: 1.1rem; }
  .brand img { width: 136px; height: 136px; border-radius: 20px; }
  .brand .brand-t { font-size: 3.9rem; letter-spacing: .05em; }
  .brand .brand-t span { font-size: .42em; margin-top: .35rem; letter-spacing: .02em; }
}

/* ===== YUFOR header: dark night-sky bar to match the logo, with a metallic wordmark ===== */
.site-header { background: radial-gradient(120% 140% at 20% 0%, #1b2233 0%, #0a0d14 55%, #000 100%); border-bottom: 1px solid #2a3140; color: #e8edf3; }
.site-header .wrap { border: 0; }
.brand .brand-t { font-family: 'Orbitron', 'Public Sans', sans-serif; font-weight: 800; letter-spacing: .08em; color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #dfe5ec 38%, #8f9aa6 52%, #f4f7fa 70%, #b7c0ca 100%); -webkit-background-clip: text; background-clip: text; }
.brand .brand-t span { font-family: 'Orbitron', 'Public Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #c9d2dc; -webkit-text-fill-color: #c9d2dc; background: none; }
.brand img { background: #000; box-shadow: 0 0 0 1px #2f3747, 0 6px 22px rgba(120,170,255,.12); }
.site-header .nav a { color: #dfe6ee; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"] { color: #8fe3f5; }
.site-header .nav a.nav-report { color: #e9fbff; background: rgba(70,217,240,.12); border-color: #46d9f0; }
.site-header .nav a.nav-report svg { color: #8fe3f5; }
.site-header .nav a.nav-report:hover { background: #46d9f0; color: #06121a; }
.site-header .menu-btn { color: #e8edf3; border-color: #3a4456; background: rgba(255,255,255,.04); }
@media (max-width: 760px) { .site-header .nav { background: #0a0d14; border-bottom-color: #2a3140; } }
/* Tablet: menu drops to its own row, so centre a big brand and centre the menu under it */
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header .wrap { justify-content: center; padding-top: .6rem; }
  .site-header .brand { margin: 0 auto; }
  .site-header .nav { justify-content: center; border-top-color: #2a3140 !important; }
  .brand .brand-t { font-size: 4.6rem; }
  .brand .brand-t span { font-size: .3em; }
}
/* Desktop and phone sizes for the new font (it runs wider than the old one) */
@media (min-width: 1101px) { .brand .brand-t { font-size: 2.2rem; } .brand .brand-t span { font-size: .36em; } }
@media (max-width: 760px) { .brand .brand-t { font-size: 1.55rem; } .brand .brand-t span { font-size: .36em; letter-spacing: .1em; } }
@media (max-width: 380px) { .brand .brand-t { font-size: 1.3rem; } }
.milcluster { display: inline-flex; align-items: center; gap: .2rem; height: 32px; padding: 0 .5rem; border-radius: 8px; background: #4a5a32; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); font-size: 13px; }
.milcluster svg { width: 15px; height: 15px; }