/* ============================================================
   SPOILS by M&F · shared styles
   Landfill is theft from future generations.
   ------------------------------------------------------------
   Black and white, hard borders, heavy type. Colour appears
   only as functional marks, the way spray paint does on site:
   green REINSTATE · blue STORE · purple SELL · red DOWNCYCLE
   Type: Neue Haas Unica (Adobe Fonts, use.typekit.net/fwv4gqd.css)
   with Helvetica fallback · IBM Plex Mono for data and labels
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper-dim:#F2F2F0;
  --ink:#0A0A0A;
  --grey:#585858;
  --rule:#D8D8D6;
  --card:#F7F7F5;
  --white:#FFFFFF;

  /* functional marks */
  --mk-green:#00A651;
  --mk-blue:#0050EF;
  --mk-purple:#7B2FBE;
  --mk-red:#E4231C;

  /* legacy aliases used by the map app */
  --concrete:var(--paper);
  --concrete-deep:var(--paper-dim);
  --ink-soft:var(--grey);
  --recover:var(--mk-blue);        /* updated this week */
  --recover-dark:#0038A8;
  --hivis:var(--mk-green);         /* new this week */
  --rust:var(--mk-red);            /* closed / inactive */

  --font-display:"neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:"neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --maxw:1240px;
  --bw:3px;               /* the house border weight */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--ink); color:var(--paper);}
b, strong{font-weight:700;}

/* ---------- shared header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 24px;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--paper);
  position:sticky; top:0; z-index:1200;
}
.brand{display:flex; align-items:baseline; gap:12px; text-decoration:none;}
.brand-mark{
  font-family:var(--font-display);
  font-weight:800; font-size:20px; letter-spacing:-0.01em;
  text-transform:uppercase;
}
.brand-mark .amp{font-weight:400;}
.brand-tag{
  font-family:var(--font-mono); font-size:11px;
  color:var(--grey); letter-spacing:0.06em; text-transform:uppercase;
}
.topnav{display:flex; gap:8px; align-items:center;}
.topnav a{
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  text-decoration:none; padding:9px 16px;
  border:2px solid var(--ink); border-radius:0;
  background:var(--paper); transition:background .12s, color .12s;
}
.topnav a:hover{background:var(--ink); color:var(--paper);}
.topnav a.primary{background:var(--ink); color:var(--paper);}
.topnav a.primary:hover{background:var(--paper); color:var(--ink);}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
}

/* ---------- sheet label (section eyebrow) ---------- */
.stamp{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase;
  border:2px solid var(--ink);
  padding:5px 12px; border-radius:0;
  background:var(--paper); font-weight:600;
}
.stamp.inv{border-color:var(--paper); color:var(--paper); background:transparent;}

/* ---------- badges ---------- */
.badge{
  display:inline-block; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:0; white-space:nowrap; font-weight:600;
}
.badge.new{background:var(--mk-green); color:var(--white);}
.badge.updated{background:var(--mk-blue); color:var(--white);}
.badge.existing{background:transparent; color:var(--grey); border:1px solid var(--rule);}
.badge.closed{background:transparent; color:var(--mk-red); border:1px solid var(--mk-red); text-decoration:line-through;}
.badge.approx{background:transparent; color:var(--grey); border:1px dashed var(--grey);}
.badge.exact{background:var(--ink); color:var(--paper);}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  border:2px solid var(--ink); background:var(--paper);
  color:var(--ink); padding:9px 16px; border-radius:0;
  transition:background .12s, color .12s;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.solid{background:var(--ink); color:var(--paper);}
.btn.solid:hover{background:var(--paper); color:var(--ink);}
.btn.small{font-size:11px; padding:6px 11px;}

/* ---------- footer ---------- */
.site-footer{
  border-top:var(--bw) solid var(--ink);
  padding:28px 24px;
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:12px; color:var(--grey);
}
.site-footer a{color:var(--ink);}
.site-footer .marks{display:inline-flex; gap:6px; vertical-align:middle;}
.site-footer .marks i{width:11px; height:11px; display:inline-block;}