/* ==========================================================================
   RIGHT THE BLIGHT — Luna County, New Mexico
   ---------------------------------------------------------------------------
   Design direction: a civic broadsheet. Black ink on weathered paper, oxidized
   iron for anything that demands action, and the technical voice of a public
   records office for anything that carries a number.

   Rules instead of shadows. Hard edges instead of rounded cards. Oversized
   numerals, because the count of derelict buildings in this county IS the
   argument. Old West enters through the typography and the paper, never
   through ornament.

   Deliberately single-theme — a document has one appearance.
   ========================================================================== */

@import url('vendor/fonts.css');

:root {
  /* --- Ink and paper. Neutrals carry a warm olive bias so nothing reads as
         corporate grey next to the rust. --- */
  --ink:        #16150f;
  --ink-2:      #2b281f;
  --ink-3:      #4a4638;
  --ink-4:      #6f6a58;
  --ink-5:      #948e78;

  --paper:      #f2ede2;
  --paper-2:    #e8e1d1;
  --paper-3:    #dbd2bd;
  --paper-hi:   #fbf8f1;

  /* --- One accent, spent only on action. --- */
  --rust:       #a63c1e;
  --rust-dk:    #7d2a12;
  --ochre:      #c8862d;
  --sage:       #55684a;      /* remedied, and nothing else */
  --signal:     #b3271a;

  --rule:       #16150f;
  --rule-soft:  rgba(22, 21, 15, .16);

  --f-display:  'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body:     'Source Sans 3', system-ui, -apple-system, sans-serif;
  --f-mono:     'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --shell:      1240px;
  --gut:        clamp(18px, 4.5vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 74px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Pure CSS — no image request, no third party. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image:
    repeating-linear-gradient(0deg,   rgba(22,21,15,.9) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg,  rgba(22,21,15,.9) 0 1px, transparent 1px 3px);
}

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 760px; }
.center { text-align: center; }

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0 0 .4em; text-wrap: balance; }

h1 { font-weight: 900; letter-spacing: -.035em; line-height: .95; }
h2 {
  font-weight: 800; letter-spacing: -.025em; line-height: 1.02;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem); text-transform: uppercase;
}
h3 { font-weight: 800; letter-spacing: -.015em; line-height: 1.12; font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
h4 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; font-size: 1.05rem; }

p { margin: 0 0 1em; }
a { color: var(--rust); text-underline-offset: 3px; }

/* The technical voice: file numbers, dates, labels, counts. */
.mono, .kicker, .stat-label, .file-label {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 500;
}
.kicker { display: block; color: var(--rust); margin-bottom: 1em; }
.kicker-line { display: flex; align-items: center; gap: 14px; }
.kicker-line::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }

.lead { font-size: clamp(1.06rem, 2.3vw, 1.24rem); color: var(--ink-3); max-width: 62ch; }
.fineprint { font-size: .84rem; color: var(--ink-4); line-height: 1.55; }
.hint { font-size: .9rem; color: var(--ink-3); margin: .4em 0 0; }
.hint.warn {
  background: var(--paper-2); border-left: 4px solid var(--ochre);
  padding: .85em 1.05em; margin-top: 1em;
}
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }

/* Full-bleed hard rule — the broadsheet's structural device. */
.rule { height: 2px; background: var(--ink); }
.rule-thin { height: 1px; background: var(--rule-soft); }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.nav-in { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; min-height: 62px; }
.nav-brand {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--paper); padding: 10px 0;
}
.nav-brand b {
  font-family: var(--f-display); font-weight: 900; font-size: 1.08rem;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1;
}
.nav-brand span {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em;
  color: var(--ink-5); text-transform: uppercase; margin-top: 4px;
}
.nav-links { display: none; align-items: stretch; }
.nav-links a {
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-3); text-decoration: none;
  border-left: 1px solid rgba(242,237,226,.14);
  transition: background .14s, color .14s;
}
.nav-links a:hover { background: rgba(242,237,226,.09); color: #fff; }
.nav-links a.nav-cta {
  background: var(--rust); color: #fff; font-weight: 600; border-left: 0;
}
.nav-links a.nav-cta:hover { background: var(--rust-dk); color: #fff; }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Dispatch number, permanently in the nav — the call is the point. */
.nav-links a.nav-call {
  color: var(--ochre); gap: 8px; letter-spacing: .1em;
}
.nav-links a.nav-call strong {
  font-family: var(--f-display); font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums;
}
.nav-links a.nav-call:hover { background: rgba(200,134,45,.16); color: var(--ochre); }

/* Mobile: call and report, both always one tap away. */
.nav-mobile { display: flex; align-items: stretch; gap: 0; margin: 8px 0; }
@media (min-width: 900px) { .nav-mobile { display: none; } }
.nav-call-mobile, .nav-cta-mobile {
  display: flex; align-items: center; padding: 0 16px; text-decoration: none;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
}
.nav-call-mobile { background: var(--ochre); color: var(--ink); }
.nav-cta-mobile  { background: var(--rust);  color: #fff; }

/* --------------------------------------------------------------------------
   HERO
   Built so a photograph can drop straight in behind it later without
   any structural change — .hero-media is the slot.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 58%;
  filter: grayscale(.35) contrast(1.08);
}
/* Scrim tuned so white display type stays legible over any photograph. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(22,21,15,.94) 0%, rgba(22,21,15,.72) 46%, rgba(22,21,15,.42) 100%),
    linear-gradient(0deg, rgba(22,21,15,.92) 0%, transparent 42%);
}
/* Without a photo: strata, like weathered rock or a faded painted sign. */
.hero-strata {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0 62%, rgba(166,60,30,.13) 62% 66%, transparent 66%),
    linear-gradient(180deg, transparent 0 72%, rgba(200,134,45,.10) 72% 74%, transparent 74%),
    radial-gradient(120% 80% at 82% 6%, rgba(200,134,45,.15), transparent 60%),
    radial-gradient(90% 70% at 6% 100%, rgba(166,60,30,.20), transparent 62%);
}
.hero-in { position: relative; padding: clamp(44px, 7vw, 84px) 0 clamp(38px, 5vw, 64px); }

/* Text and map side by side once there's room; stacked below that. */
.hero-grid { display: grid; gap: clamp(30px, 4vw, 48px); align-items: center; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 4vw, 60px); }
}
.hero-copy { min-width: 0; }

.hero h1 { font-size: clamp(2.6rem, 8.5vw, 5.4rem); margin: 0; text-transform: uppercase; }
.hero-place {
  font-family: var(--f-mono); font-size: clamp(.68rem, 2vw, .8rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ochre);
  margin: 14px 0 0; display: block;
}
.hero-thesis {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 2rem); letter-spacing: -.02em;
  line-height: 1.15; margin: clamp(22px, 4vw, 34px) 0 0; max-width: 20ch;
  color: #fff;
}
.hero-sub { color: var(--paper-3); max-width: 46ch; margin: 18px 0 0; font-size: 1.05rem; }
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(26px, 4vw, 38px); }

/* Dispatch block in the hero. Ochre rather than rust so it reads as a separate
   instrument from the report button — different action, different colour. */
.hero-dispatch {
  display: block; margin-top: clamp(24px, 3.5vw, 34px); padding: 16px 20px;
  text-decoration: none; color: var(--paper);
  border: 2px solid var(--ochre); border-left-width: 8px;
  background: rgba(200, 134, 45, .10);
  transition: background .15s;
  max-width: 30rem;
}
.hero-dispatch:hover { background: rgba(200, 134, 45, .2); }
.hd-label {
  display: block; font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ochre);
}
.hd-number {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.8rem, 5.5vw, 2.6rem); letter-spacing: -.035em;
  color: #fff; margin: 5px 0 4px; font-variant-numeric: tabular-nums;
}
.hd-note {
  display: block; font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-5);
}

/* --------------------------------------------------------------------------
   BUTTONS — square, stamped, no gradients
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 17px 26px; border: 2px solid transparent; border-radius: 0;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .14s, color .14s, border-color .14s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-dk); border-color: var(--rust-dk); color: #fff; }
.btn-outline { background: transparent; color: var(--paper); border-color: rgba(242,237,226,.45); }
.btn-outline:hover { border-color: var(--paper); background: rgba(242,237,226,.1); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-2); color: #fff; }
.btn-big { width: 100%; padding: 20px 28px; font-size: .85rem; }
.btn-gps { background: var(--ink); color: var(--paper); border-color: var(--ink); width: 100%; padding: 16px; }
.btn-gps:hover { background: var(--ink-2); color: #fff; }
.btn-plain { background: none; border: 0; color: var(--ink-3); text-decoration: underline; padding: 16px 10px; }

/* --------------------------------------------------------------------------
   SECTION SHELL
   -------------------------------------------------------------------------- */
.sec { padding: clamp(52px, 8vw, 96px) 0; border-top: 2px solid var(--ink); }
.sec-ink { background: var(--ink); color: var(--paper); }
.sec-ink h2, .sec-ink h3 { color: #fff; }
.sec-ink .lead { color: var(--paper-3); }
.sec-ink .kicker { color: var(--ochre); }
.sec-ink .kicker-line::after { background: rgba(242,237,226,.22); }
.sec-paper2 { background: var(--paper-2); }
.sec-head { max-width: 64ch; margin-bottom: clamp(30px, 5vw, 48px); }

/* --------------------------------------------------------------------------
   TAKE OWNERSHIP
   -------------------------------------------------------------------------- */
.own-statement {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.35rem, 4vw, 2.35rem); letter-spacing: -.025em;
  line-height: 1.14; max-width: 24ch; margin: 0 0 .6em;
}
.own-statement em { font-style: normal; color: var(--rust); }
.own-grid { display: grid; gap: 0; margin-top: clamp(34px, 5vw, 52px); border-top: 2px solid var(--ink); }
@media (min-width: 820px) { .own-grid { grid-template-columns: repeat(3, 1fr); } }
.own-item { padding: 28px 0 30px; border-bottom: 2px solid var(--ink); }
@media (min-width: 820px) {
  .own-item { padding: 30px 30px 34px; border-bottom: 0; border-right: 1px solid var(--rule-soft); }
  .own-item:first-child { padding-left: 0; }
  .own-item:last-child { border-right: 0; padding-right: 0; }
}
.own-item h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: .3em; }
.own-item p { color: var(--ink-3); margin: 0; font-size: .98rem; }

/* --------------------------------------------------------------------------
   DASHBOARD — a public information board, not an analytics panel
   -------------------------------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(242,237,226,.2); }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(4, 1fr); } }
.dash-cell {
  padding: clamp(22px, 3.5vw, 34px) 20px;
  border-bottom: 1px solid rgba(242,237,226,.2);
  border-right: 1px solid rgba(242,237,226,.2);
}
.dash-cell:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .dash-cell:nth-child(2n) { border-right: 1px solid rgba(242,237,226,.2); }
  .dash-cell:nth-child(4n) { border-right: 0; }
}
.dash-n {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(3rem, 9vw, 5.2rem); line-height: .88; letter-spacing: -.045em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.dash-n.is-rust { color: var(--ochre); }
.dash-n.is-sage { color: #8fa87c; }
.dash-l {
  display: block; font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--paper-3);
  margin-top: 14px; line-height: 1.5;
}
.dash-note { margin-top: 26px; color: var(--ink-5); font-size: .82rem; font-family: var(--f-mono); letter-spacing: .06em; }

/* Category breakdown bars */
.break { margin-top: clamp(34px, 5vw, 50px); }
.break-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(242,237,226,.16);
}
.break-row b { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--paper-3); }
.break-row i { font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.break-bar { grid-column: 1 / -1; height: 6px; background: rgba(242,237,226,.14); }
.break-bar span { display: block; height: 100%; background: var(--rust); }

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.step-row {
  display: grid; grid-template-columns: auto 1fr; gap: 18px 22px;
  padding: 26px 0; border-bottom: 1px solid var(--rule-soft); align-items: start;
}
@media (min-width: 760px) { .step-row { grid-template-columns: 108px 1fr; gap: 34px; padding: 32px 0; } }
.step-n {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: .8; letter-spacing: -.05em;
  color: var(--paper-3); font-variant-numeric: tabular-nums;
}
.step-row:hover .step-n { color: var(--rust); }
.step-body h3 { text-transform: uppercase; font-size: clamp(1.2rem, 2.8vw, 1.6rem); margin-bottom: .25em; }
.step-body p { margin: 0; color: var(--ink-3); max-width: 58ch; }

/* --------------------------------------------------------------------------
   PERSISTENCE / FOLLOW-UP
   -------------------------------------------------------------------------- */
.persist-head {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 5.4rem); line-height: .92; letter-spacing: -.04em;
  text-transform: uppercase; color: #fff; margin: 0 0 .35em;
}
.persist-head em { font-style: normal; color: var(--ochre); display: block; }

.chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: clamp(28px, 4vw, 40px) 0; }
.chain-node {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 11px 15px; border: 1.5px solid rgba(242,237,226,.32); color: var(--paper-3);
}
.chain-node.is-start { border-color: var(--paper); color: #fff; }
.chain-node.is-repeat { border-color: var(--ochre); color: var(--ochre); }
.chain-node.is-end { background: var(--sage); border-color: var(--sage); color: #fff; font-weight: 600; }
.chain-arrow { color: var(--ink-5); font-family: var(--f-mono); }

.call-card {
  display: block; text-decoration: none; background: var(--rust); color: #fff;
  padding: clamp(26px, 4vw, 38px); margin: clamp(26px, 4vw, 38px) 0;
  border: 2px solid var(--rust); transition: background .15s;
}
.call-card:hover { background: var(--rust-dk); }
.call-label { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.call-number {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.1rem, 9vw, 3.6rem); letter-spacing: -.035em; margin: 10px 0 8px;
  font-variant-numeric: tabular-nums;
}
.call-cta { display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

.tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(242,237,226,.2); }
.tips li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid rgba(242,237,226,.2); color: var(--paper-3); font-size: .96rem;
}
.tips li::before { content: '—'; color: var(--ochre); font-family: var(--f-mono); }
.tips strong { color: #fff; }

.lawful {
  margin-top: 26px; padding: 18px 20px;
  border-left: 4px solid var(--ochre); background: rgba(242,237,226,.06);
  font-size: .93rem; color: var(--paper-3);
}
.lawful strong { color: #fff; }

/* Official channels — the routes that actually reach government. Deliberately
   given more visual weight than anything asking people to use this site. */
.official {
  margin-top: clamp(30px, 4vw, 42px); border: 2px solid var(--ochre);
  padding: clamp(20px, 3vw, 28px);
}
.official h3 { color: var(--ochre); margin-top: 0; text-transform: uppercase; font-size: clamp(1.05rem, 2.4vw, 1.3rem); }
.official > p { color: var(--paper-3); font-size: .95rem; margin-bottom: 20px; }
.official-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.official-list li {
  display: grid; gap: 3px 16px; padding: 15px 0;
  border-top: 1px solid rgba(242,237,226,.2);
}
@media (min-width: 620px) {
  .official-list li { grid-template-columns: 1fr auto; align-items: baseline; }
  .official-list li span { grid-column: 1 / -1; }
}
.official-list strong { font-family: var(--f-display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.official-list a {
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .06em;
  color: var(--ochre); text-decoration: none; font-weight: 500;
}
.official-list a:hover { text-decoration: underline; }
.official-list span { font-size: .89rem; color: var(--paper-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   MAP
   -------------------------------------------------------------------------- */
/* --- The map panel, which lives in the hero and can fill the window -------
   NB: #map is the WRAPPER, not the canvas. Height belongs on #map-canvas —
   putting it on #map collapses the whole panel. */
.hero-map { min-width: 0; }

.map-panel {
  background: var(--paper-hi); border: 2px solid var(--paper-3);
  display: flex; flex-direction: column;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .28);
}
.map-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--ink-2); color: var(--paper);
  border-bottom: 2px solid var(--paper-3);
}
.map-panel-title {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-3);
}
.map-panel-title .num { color: var(--ochre); font-weight: 600; }
.map-expand {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 600;
  background: none; border: 1.5px solid rgba(242,237,226,.4); color: var(--paper);
  padding: 7px 13px; cursor: pointer; transition: background .14s, border-color .14s;
}
.map-expand:hover { background: rgba(242,237,226,.14); border-color: var(--paper); }

.map-canvas-wrap { position: relative; flex: 1; min-height: 0; }
#map-canvas { height: clamp(300px, 46vh, 480px); width: 100%; background: var(--paper-2); }

/* Expanded: fills the viewport. Class goes on the panel, the map element never
   moves in the DOM — re-parenting a live Leaflet map is asking for trouble. */
.map-panel.is-full {
  position: fixed; inset: 0; z-index: 900; border: 0; box-shadow: none;
  background: var(--paper-hi);
}
.map-panel.is-full #map-canvas { height: 100%; }
.map-panel.is-full .map-canvas-wrap { flex: 1; }
body.map-open { overflow: hidden; }

.filters {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 2px solid var(--paper-3); background: var(--paper-hi);
}
.filter {
  flex: 1 1 auto; min-width: 33.333%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 11px 13px; background: none; border: 0;
  border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; text-align: left;
  transition: background .13s, color .13s;
}
@media (min-width: 560px) { .filter { min-width: 0; flex: 1 1 0; } }
.filter:hover { background: var(--paper-2); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter[aria-pressed="true"] .filter-n { color: var(--ochre); }
.filter-n { font-family: var(--f-display); font-weight: 800; font-size: 1.02rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.filter-swatch { width: 10px; height: 10px; flex: 0 0 auto; display: inline-block; margin-right: 8px; }

.map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 500;
  background: rgba(251, 248, 241, .94); border: 1.5px solid var(--ink);
  padding: 9px 11px; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .09em; text-transform: uppercase; display: grid; gap: 6px;
}
/* On a phone the legend eats the map — hide it until there's room. */
@media (max-width: 560px) { .map-legend { display: none; } }
.map-panel.is-full .map-legend { display: grid; font-size: .64rem; padding: 11px 13px; }
.lg-row { display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--paper-hi); }
.lg-box { width: 12px; height: 12px; flex: 0 0 auto; background: rgba(22,21,15,.42); border: 1.5px solid var(--rust); }
.lg-scope { padding-top: 7px; border-top: 1px solid var(--rule-soft); }

.map-empty {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: 30px; background: var(--paper-2); z-index: 400;
}
.map-empty h3 { text-transform: uppercase; }
.map-empty p { color: var(--ink-3); }

/* --- Case-file popup ---------------------------------------------------- */
.leaflet-popup-content-wrapper { border-radius: 0 !important; border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(22,21,15,.18) !important; }
.leaflet-popup-content { margin: 0 !important; width: 262px !important; }
.leaflet-popup-tip { border: 2px solid var(--ink); }
.gm-style .gm-style-iw-c { border-radius: 0 !important; padding: 0 !important; }
.gm-style-iw-d { overflow: hidden !important; }

.file { font-family: var(--f-body); background: var(--paper-hi); }
.file-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 13px; background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
}
.file-head .file-no { color: var(--ochre); }
.file-photo { position: relative; }
.file-photo img { width: 100%; height: 148px; object-fit: cover; display: block; }
.file-count {
  position: absolute; right: 0; bottom: 0;
  background: var(--rust); color: #fff; padding: 5px 11px;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
}
.file-body { padding: 13px; }
.file-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 4px 10px;
  padding: 6px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: .84rem; align-items: baseline;
}
.file-row:last-of-type { border-bottom: 0; }
.file-row dt { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.file-row dd { margin: 0; font-weight: 600; }
.file-status { display: inline-block; padding: 2px 8px; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.file-status.is-active { background: var(--rust); color: #fff; }
.file-status.is-remedied { background: var(--sage); color: #fff; }
.file-desc { margin: 10px 0 0; font-size: .88rem; color: var(--ink-3); line-height: 1.5; }
.file-strip { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.file-strip img { width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--paper-3); display: block; }

/* --------------------------------------------------------------------------
   RECENT / CASE CARDS
   -------------------------------------------------------------------------- */
.cases { display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 640px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case {
  border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
  background: var(--paper-hi); display: flex; flex-direction: column;
}
.case-img { position: relative; aspect-ratio: 3 / 2; background: var(--paper-3); overflow: hidden; }
.case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-tag {
  position: absolute; left: 0; top: 0; padding: 5px 11px; color: #fff;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}
.case-stack {
  position: absolute; right: 0; bottom: 0; padding: 5px 11px;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}

/* Remedied properties read as wins, not as problems. The photo is desaturated
   so the card visually recedes from the active ones around it. */
.case-tag.is-done { background: var(--sage); }
.case.is-remedied { border-left: 4px solid var(--sage); }
.case.is-remedied .case-img img { filter: grayscale(.55) contrast(.94); opacity: .85; }
.case.is-remedied .case-date { color: var(--sage); font-weight: 600; }

.filter.is-win[aria-pressed="true"] { background: var(--sage); color: #fff; }
.filter.is-win[aria-pressed="true"] .filter-n { color: #fff; }
.case-b { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.case-no { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--ink-4); text-transform: uppercase; }
.case-b h4 { margin: 6px 0 6px; font-size: 1.02rem; text-transform: uppercase; letter-spacing: -.015em; }
.case-b p { font-size: .9rem; color: var(--ink-3); margin: 0 0 12px; }
.case-date { margin-top: auto; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   GET INVOLVED
   -------------------------------------------------------------------------- */
.involve { display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 760px) { .involve { grid-template-columns: repeat(2, 1fr); } }
.involve-item {
  padding: 24px 0; border-bottom: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
}
@media (min-width: 760px) {
  .involve-item { padding: 26px 30px 28px; border-right: 1px solid var(--rule-soft); }
  .involve-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .involve-item:nth-child(2n+1) { padding-left: 0; }
}
.involve-n { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--rust); padding-top: 3px; }
.involve-item h4 { text-transform: uppercase; margin-bottom: .3em; }
.involve-item p { margin: 0; color: var(--ink-3); font-size: .95rem; }

/* --------------------------------------------------------------------------
   LEGAL ACCORDIONS
   -------------------------------------------------------------------------- */
.acc { border-top: 2px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--rule-soft); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.02rem, 2.4vw, 1.24rem); letter-spacing: -.015em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; font-family: var(--f-mono); font-size: 1.3rem; color: var(--rust);
  flex: 0 0 auto; line-height: 1;
}
.acc details[open] summary::after { content: '–'; }
.acc summary:hover { color: var(--rust); }
.acc-body { padding: 0 0 24px; }
.acc-scope { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: -8px 0 18px; }
.acc-item { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.acc-item h4 { margin-bottom: .35em; }
.acc-item p { margin: 0; color: var(--ink-3); font-size: .95rem; }
.acc-cite { margin-top: 9px !important; font-family: var(--f-mono); font-size: .68rem !important; letter-spacing: .06em; color: var(--ink-4) !important; }
.acc-cite em { color: #8a6520; font-style: italic; }

/* Standing disclaimer above the legal summaries. */
.legal-notice {
  border: 2px solid var(--ink); background: var(--paper-hi);
  padding: clamp(20px, 3vw, 28px); margin-bottom: clamp(28px, 4vw, 40px);
}
.legal-notice-head {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 .9em;
}
.legal-notice p { font-size: .92rem; color: var(--ink-3); margin-bottom: .9em; }
.legal-notice p:last-child { margin-bottom: 0; }
.legal-notice strong { color: var(--ink); }

/* "This site is not part of the legal process" callout. */
.acc-warn {
  border-left: 5px solid var(--rust); background: var(--paper-2);
  padding: 15px 18px; margin: 0 0 20px; font-size: .93rem; color: var(--ink-3);
}
.acc-warn strong { color: var(--ink); }

/* The step that matters most gets the emphasis. */
.step-row.is-key .step-n { color: var(--rust); }
.step-row.is-key { background: var(--paper-2); }
.step-row.is-key .step-body p strong { color: var(--ink); }
@media (min-width: 760px) {
  .step-row.is-key { padding-left: 20px; padding-right: 20px; margin: 0 -20px; }
}
.acc-src { margin-top: 16px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.formcard { background: var(--paper-hi); border: 2px solid var(--ink); padding: 0 clamp(18px, 4vw, 34px) clamp(26px, 4vw, 34px); }
.formcard.is-locked { opacity: .4; pointer-events: none; filter: grayscale(.6); }

fieldset { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; padding: 26px 0 4px; }
fieldset:first-of-type { border-top: 0; }
legend {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.12rem; letter-spacing: -.015em; padding: 0;
  display: flex; align-items: center; gap: 14px;
}
.step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: .78rem; font-weight: 600;
}
.optional { font-family: var(--f-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-4); font-size: .9rem; }
.req { font-family: var(--f-mono); color: var(--rust); font-size: .62rem; letter-spacing: .14em; }

label { display: block; font-weight: 600; margin: 18px 0 7px; font-size: .95rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 14px 15px;
  border: 1.5px solid var(--paper-3); border-radius: 0;
  background: #fff; color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-5); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
textarea { resize: vertical; min-height: 120px; }

.or {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 4px;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }

.gps-status { font-size: .91rem; margin: 10px 0 0; min-height: 1.2em; font-weight: 600; }
.gps-status.ok { color: var(--sage); }
.gps-status.err { color: var(--signal); font-weight: 500; }
.gps-status.busy { color: var(--ink-3); font-weight: 500; }

/* Street suggestions. Every Luna County street name is filtered locally, so
   this list appears instantly and nothing leaves the browser. */
.suggest-wrap { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1.5px solid var(--ink); border-top: 0;
  max-height: 17rem; overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(22, 21, 15, .12);
}
.suggest li {
  padding: 12px 15px; cursor: pointer; font-size: .96rem;
  border-bottom: 1px solid var(--rule-soft);
}
.suggest li:last-child { border-bottom: 0; }
.suggest li:hover, .suggest li.on { background: var(--ink); color: var(--paper); }

.picker-map { height: 280px; margin-top: 16px; border: 1.5px solid var(--ink); background: var(--paper-2); }

.file-drop {
  display: block; position: relative; margin-top: 14px; padding: 36px 22px;
  border: 2px dashed var(--paper-3); background: var(--paper); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.file-drop:hover, .file-drop.has-file { border-color: var(--rust); background: var(--paper-2); }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.file-drop-inner strong { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.02rem; margin-bottom: 5px; }
.photo-preview { display: block; width: 100%; max-height: 330px; object-fit: cover; margin-top: 14px; border: 1.5px solid var(--ink); }

.grid-3 { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.disclaimer-box { background: var(--paper-2); margin: 26px calc(clamp(18px, 4vw, 34px) * -1) 0; padding: 26px clamp(18px, 4vw, 34px); border-top: 2px solid var(--ink); }
.disclaimer-text {
  font-size: .88rem; line-height: 1.62; color: var(--ink-3);
  max-height: 240px; overflow-y: auto; padding: 16px 18px; margin-top: 14px;
  background: #fff; border: 1px solid var(--paper-3);
}
.disclaimer-text p:last-child { margin-bottom: 0; }
.check { display: flex; gap: 13px; align-items: flex-start; font-size: .95rem; margin-top: 18px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--rust); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skip link — off-screen until focused, then unmistakably present. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rust); color: #fff; padding: 14px 22px;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

.gate-notice { background: var(--paper-2); border: 2px solid var(--ochre); padding: 26px; margin-bottom: 26px; }
.gate-notice h3 { margin-top: 0; text-transform: uppercase; }

/* Scope conditions */
.scope-grid { display: grid; gap: 0; border-top: 1px solid rgba(242,237,226,.2); }
@media (min-width: 760px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
.scope-item {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid rgba(242,237,226,.2);
}
@media (min-width: 760px) {
  .scope-item { padding: 20px 26px 22px; border-right: 1px solid rgba(242,237,226,.2); }
  .scope-item:last-child { border-right: 0; padding-right: 0; }
  .scope-item:first-child { padding-left: 0; }
}
.scope-item::before { content: '✓'; color: var(--sage); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.sec-ink .scope-item::before { color: #8fa87c; }
.scope-item strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; }
.scope-item span { font-size: .9rem; color: var(--paper-3); }

/* Testing banner — deliberately ugly so it can't be ignored. */
.testbar {
  background: repeating-linear-gradient(135deg, var(--signal) 0 18px, #8e1f14 18px 36px);
  color: #fff; padding: 13px 20px; text-align: center;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; line-height: 1.5;
}
.testbar code { background: rgba(0,0,0,.3); padding: 2px 6px; }

.flash { margin: 20px 0; padding: 16px 20px; border-left: 5px solid; font-size: .96rem; }
.flash-error { background: #f7e6e2; color: #7a1d11; border-color: var(--signal); }
.flash-success { background: #e8ede2; color: #33451f; border-color: var(--sage); }

/* --------------------------------------------------------------------------
   THANKS PAGE
   -------------------------------------------------------------------------- */
.thanks-mark {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 12vw, 6rem);
  line-height: .9; letter-spacing: -.04em; color: var(--sage); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--ink-5); padding: clamp(40px, 6vw, 62px) 0 40px; font-size: .92rem; border-top: 2px solid var(--ink); }
.site-footer a { color: var(--paper-3); }
.site-footer strong { color: var(--paper); font-family: var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.foot-rule { height: 1px; background: rgba(242,237,226,.2); margin: 26px 0; }

/* --------------------------------------------------------------------------
   ADMIN
   -------------------------------------------------------------------------- */
.admin-body { background: var(--paper); }
.admin-bar { background: var(--ink); color: var(--paper); padding: 14px 0; }
.admin-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.admin-bar a { color: var(--paper-3); text-decoration: none; margin-right: 18px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.admin-bar a:hover, .admin-bar a.on { color: #fff; text-decoration: underline; }
.admin-bar strong { font-family: var(--f-display); text-transform: uppercase; font-size: 1rem; }

.tabs { display: flex; gap: 0; margin: 26px 0 22px; flex-wrap: wrap; border: 2px solid var(--ink); }
.tab {
  padding: 12px 18px; text-decoration: none; background: var(--paper-hi); color: var(--ink-3);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  border-right: 1px solid var(--rule-soft); flex: 1 1 auto; text-align: center;
}
.tab:last-child { border-right: 0; }
.tab.on { background: var(--ink); color: var(--paper); }
.tab .badge { font-family: var(--f-display); font-weight: 800; margin-left: 7px; }

.queue { display: grid; gap: 22px; }
.rep-card { background: var(--paper-hi); border: 2px solid var(--ink); display: grid; }
@media (min-width: 780px) { .rep-card { grid-template-columns: 300px 1fr; } }
.rep-photo { background: var(--paper-2); border-right: 1px solid var(--rule-soft); }
.rep-photo img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.rep-body { padding: 22px 24px; }
.rep-body h3 { margin: 6px 0 6px; text-transform: uppercase; font-size: 1.16rem; }
.rep-meta { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 12px; }
.rep-meta a { color: var(--rust); }
.rep-desc { font-size: .96rem; white-space: pre-wrap; }

.tag {
  display: inline-block; font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; margin: 0 6px 6px 0;
}
.tag-burned { background: #f2ddd7; color: #7d2a12; }
.tag-abandoned { background: #dee3ea; color: #2b4459; }
.tag-collapsing { background: #f6e6cd; color: #7a5314; }
.tag-trash { background: #e2e8dc; color: #35492a; }
.tag-other { background: var(--paper-2); color: var(--ink-3); }
.tag-gps_local { background: #e2e8dc; color: #35492a; }
.tag-ip_local { background: #dee3ea; color: #2b4459; }
.tag-unverified { background: #f6e6cd; color: #7a5314; }
.tag-stack { background: var(--ink); color: var(--paper); }
.tag-remedied { background: var(--sage); color: #fff; }

.rep-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.rep-actions input[type=text] { flex: 1; min-width: 170px; padding: 11px 13px; }
.btn-approve { background: var(--sage); color: #fff; border-color: var(--sage); padding: 12px 20px; }
.btn-reject { background: var(--ink-3); color: #fff; border-color: var(--ink-3); padding: 12px 20px; }
.btn-delete { background: var(--signal); color: #fff; border-color: var(--signal); padding: 12px 18px; }
.btn-resolve { background: var(--ochre); color: var(--ink); border-color: var(--ochre); padding: 12px 18px; }
.btn-sm { padding: 10px 15px; font-size: .68rem; }

.login-wrap { max-width: 420px; margin: clamp(40px, 10vh, 96px) auto; background: var(--paper-hi); padding: 38px; border: 2px solid var(--ink); }
.login-wrap h2 { margin-top: 0; font-size: 1.6rem; }

.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--paper-hi); border: 2px solid var(--ink); }
.admin-table th, .admin-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule-soft); font-size: .94rem; }
.admin-table th { background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: 0; }

.empty { text-align: center; padding: 68px 24px; color: var(--ink-4); background: var(--paper-hi); border: 2px solid var(--ink); }
.empty h3 { text-transform: uppercase; color: var(--ink); }