/* ==========================================================================
   The Porch Light — design tokens + base system
   Source of truth: docs/design/DESIGN_BRIEF.md + dc exploration turns 6–9.
   Laws: category colors are semantic and fixed; the accent never overlaps
   them; --alert-red exists here and appears on NO screen except a live
   Red Alert banner; every state carries mark + word + count (grayscale-safe).
   ========================================================================== */

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

:root {
  /* ground + ink */
  --paper: #FBF6EE;
  --paper-deep: #F4EDE1;
  --ink: #221E1A;
  --ink-soft: #4A443C;
  --muted: #8A8578;
  --hairline: #EDE7DA;
  --card: #FFFFFF;
  --card-line: #E7DFD2;

  /* the accent — three jobs only: wayfinding, primary action, masthead period.
     Indigo per dc turn 9a (evolved from the berry candidate). */
  --accent: #57519E;

  /* semantic category colors (fixed, colorblind-safe set) */
  --cat-person: #b34700;
  --cat-property: #0072b2;
  --cat-weapons: #8a6100;
  --cat-other: #007a59;

  /* reserved. Never referenced by any component except .redalert. */
  --alert-red: #C1301C;

  /* issue tints — 12-month rotation, one low-chroma band */
  --tint-jan:#E7E3EE; --tint-feb:#F2EBD9; --tint-mar:#E3EAF2;
  --tint-apr:#F4E4D7; --tint-may:#DDEAE2; --tint-jun:#E9DFF2;
  --tint-jul:#F5E7DC; --tint-aug:#E4EDE4; --tint-sep:#EFE6D8;
  --tint-oct:#E6E4F0; --tint-nov:#E9EEE9; --tint-dec:#EEE3E3;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* scale */
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 60rem;
}

* { box-sizing: border-box; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.skip-link { position:absolute; left:-999px; top:0; background:var(--ink);
  color:#fff; padding:.5rem 1rem; z-index:100; }
.skip-link:focus { left:0; }

/* ---- voice utilities ------------------------------------------------------ */
.mono-meta {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.display { font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.02; }
.accent-dot { color: var(--accent); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- masthead / nav ------------------------------------------------------- */
/* The bar's background runs edge to edge; its contents sit on the same
   grid as the page below (see .bar-wrap), so the ends line up. */
.mast-bar {
  padding: .95rem 0; border-bottom: 1px solid var(--hairline);
  position:sticky; top:0; z-index:40; background:var(--paper);
}
.bar-wrap { display:flex; justify-content:space-between; align-items:baseline; }
body.scrolled .mast-bar { box-shadow:0 6px 18px rgba(40,32,20,.06); }
.mast-name { font-family:var(--font-mono); font-weight:500;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; }
.mast-name .accent-dot { display:none; }
.mast-bar nav { display:flex; gap: 1.15rem; }
.mast-bar nav a { text-decoration:none; color:var(--ink-soft); font-weight:600;
  font-size:.92rem; }
.mast-bar nav a[aria-current="page"] { color: var(--accent); }

/* floating pill nav (mobile) — the stacked navigation */
.tabbar { display:none; }
@media (max-width: 44rem) {
  .mast-bar nav { display:none; }
  .tabbar {
    display:flex; position:fixed; z-index:50; gap:.2rem;
    left:.8rem; right:.8rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    background:#FFFFFF; border-radius:999px; padding:.4rem;
    box-shadow:0 10px 30px rgba(30,25,20,.14), 0 1px 2px rgba(30,25,20,.08);
  }
  .tabbar a { flex:1; text-align:center; font-size:.92rem; font-weight:700;
    color:var(--ink-soft); text-decoration:none; padding:.6rem 0;
    border-radius:999px; }
  .tabbar a[aria-current="page"] { background:var(--ink); color:#fff; }
  .tabbar a.act-link { color:var(--accent); }
  .tabbar a.act-link[aria-current="page"] { background:var(--accent);
    color:#fff; }
  body { padding-bottom: 5rem; }
}

/* ---- the notice ladder ---------------------------------------------------- */
/* Rung 1 · NOTICE — paper voice */
.notice {
  border:1px solid var(--card-line); background:var(--card);
  border-radius: var(--radius-sm); padding:.7rem .9rem; font-size:.9rem;
}
/* Rung 2 · ADVISORY — system voice (ink). Top of page + email. */
.advisory {
  background: var(--ink); color:#fff; border-radius: var(--radius);
  padding: .9rem 1.1rem; font-size:.95rem;
}
.advisory a { color:#fff; }
/* Rung 3 — reserved. The ONLY component allowed to use --alert-red. */
.redalert {
  background: var(--alert-red); color:#fff; border-radius: var(--radius);
  padding: .9rem 1.1rem; font-size:.95rem;
}
.lifecycle {
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em;
  padding:.28rem .75rem; border-radius:999px; text-transform:uppercase;
  background:var(--tile-sand); color:var(--ink-soft);
}
.lifecycle.active { background:var(--ink); color:#fff; }

/* ---- desks ---------------------------------------------------------------- */
.desk { margin: 2.4rem 0; }
.desk-head {
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom: 2px solid var(--ink); padding-bottom:.45rem; margin-bottom:.9rem;
}
.desk-head h2 { font-family:var(--font-display); font-size:1.35rem; margin:0;
  font-weight:700; }
.desk-head h2 .no { color: var(--accent); margin-right:.5rem;
  font-variant-numeric: tabular-nums; }
.desk-head .src { text-align:right; }
.desk-empty {
  border: 1px dashed var(--card-line); border-radius: var(--radius);
  padding: 1rem 1.1rem; color: var(--ink-soft); font-size: .93rem;
  background: transparent;
}
.desk-empty b { color: var(--ink); }

/* stat plates (crime desk) */
.plates { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; }
@media (min-width:44rem){ .plates { grid-template-columns:repeat(4,1fr); } }
.plate { border-radius:var(--radius); padding:.8rem .85rem .7rem; color:#fff;
  min-height:5.6rem; display:flex; flex-direction:column;
  justify-content:space-between; }
.plate .mono-meta { color:rgba(255,255,255,.85); font-size:.6rem; }
.plate .n { font-family:var(--font-display); font-size:2.1rem; font-weight:700;
  line-height:1; }
.plate .d { font-family:var(--font-mono); font-size:.66rem;
  color:rgba(255,255,255,.85); }
.plate.person{background:var(--cat-person)} .plate.property{background:var(--cat-property)}
.plate.weapons{background:var(--cat-weapons)} .plate.other{background:var(--cat-other)}

/* context sentence */
.context { border-left:3px solid var(--accent); padding:.15rem 0 .15rem .8rem;
  color:var(--ink-soft); font-size:.95rem; margin:1rem 0; }
.context b { color: var(--ink); }

/* cards (streets desk etc.) */
.itemcard { background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--radius); padding:.85rem 1rem; margin-bottom:.6rem; }
.itemcard h3 { margin:0 0 .15rem; font-size:1rem; }
.itemcard .no { color:var(--accent); margin-right:.55rem;
  font-variant-numeric:tabular-nums; font-family:var(--font-display); }
a.itemcard, a.itemcard * { text-decoration:none; }
a.itemcard { color:inherit; }
a.itemcard.idx h3 { font-family:var(--font-display); }
a.itemcard.idx p { font-size:.95rem; color:var(--ink-soft); }
.itemcard p { margin:0; font-size:.88rem; color:var(--ink-soft); }
.itemcard .mono-meta { display:block; margin-top:.45rem; }
.itemcard .mono-meta a { color: var(--muted); }

/* ledger rows */
.ledger-head {
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  padding:.6rem 0 .4rem; border-bottom:2px solid var(--ink);
  display:flex; justify-content:space-between;
}
.lrow { display:flex; gap:.7rem; align-items:baseline; padding:.6rem .1rem;
  border-bottom:1px solid var(--hairline); font-size:.9rem; }
.lrow .date { font-family:var(--font-mono); font-size:.72rem;
  color:var(--muted); min-width:2.9rem; }
.lrow .catpill { margin-left:auto; font-size:.66rem; font-weight:700;
  padding:.1rem .6rem; border-radius:999px; color:#fff; white-space:nowrap; }
.catpill.person{background:var(--cat-person)} .catpill.property{background:var(--cat-property)}
.catpill.weapons{background:var(--cat-weapons)} .catpill.other{background:var(--cat-other)}
.group-label { font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:.55rem 0 .1rem; }

/* colophon */
.colophon { border-top:2px solid var(--ink); margin-top:2.2rem;
  padding:.8rem 0 2rem; font-family:var(--font-mono); font-size:.66rem;
  line-height:1.9; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; }
.colophon a { color: var(--accent); }

/* buttons + chips */
.btn { display:inline-block; background:var(--accent); color:#fff;
  border:0; border-radius:999px; padding:.6rem 1.3rem; font-weight:700;
  font-size:.95rem; text-decoration:none; cursor:pointer;
  font-family:var(--font-body); }
.chip { display:inline-block; border:1px solid var(--muted); border-radius:999px;
  padding:.25rem .85rem; font-size:.85rem; font-weight:600; color:var(--ink);
  text-decoration:none; background:var(--card); }
.chip[aria-current="true"], .chip.on { background:var(--accent); color:#fff;
  border-color:var(--accent); }

/* email signup (shared markup with classic theme) */
.signup { background:var(--paper-deep); border-radius:var(--radius);
  padding:.9rem 1.1rem; max-width:30rem; margin-top:.6rem; }
.signup label { display:block; font-weight:600; margin-bottom:.3rem;
  font-size:.9rem; }
.signup input[type="email"] { width:100%; padding:.5rem .6rem; font-size:1rem;
  border:1px solid var(--muted); border-radius:8px; margin-bottom:.6rem;
  font-family:var(--font-body); background:var(--card); }
.signup button { background:var(--accent); color:#fff; border:0;
  border-radius:999px; padding:.5rem 1.2rem; font-size:.95rem; font-weight:700;
  cursor:pointer; font-family:var(--font-body); }
.fineprint { color:var(--muted); font-size:.8rem; }

/* tables kept for digest interior */
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; margin:.7rem 0 1.1rem; }
th,td { text-align:left; padding:.42rem .7rem; border-bottom:1px solid var(--hairline);
  font-variant-numeric:tabular-nums; font-size:.92rem; }
th { border-bottom:2px solid var(--ink); font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); }

/* ==========================================================================
   9a homepage — two-panel spread (cover plate + carded index | desk sheet)
   ========================================================================== */
:root {
  --panel-cream: #F5F3EC;
  --sheet: #FBFAF6;
  --tile-mint: #EDF2EC;
  --tile-sand: #F5EEE2;
  --tile-stone: #F0EDE4;
  --ptile-property: #CFE2EE;
  --ptile-person: #EED3C0;
  --ptile-other: #CFE4DA;
  --ptile-weapons: #E9DFC0;
}

body.pl-home { background: #F1EBDE; }

/* top bar — sticky; quiet at top, earns a shadow once scrolled */
.pl-topbar { display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1.4rem; position:sticky; top:0; z-index:40;
  background:inherit; }
body.pl-home .pl-topbar { background:#F1EBDE;
  /* the spread below caps at 100rem and centers; the bar's contents follow */
  padding-inline:max(1.4rem, calc((100% - 100rem) / 2 + 1.4rem)); }
@media (max-width:44rem){ body.pl-home .pl-topbar { padding-inline:.8rem; } }
body.scrolled .pl-topbar { box-shadow:0 1px 0 rgba(40,32,20,.08),
  0 6px 18px rgba(40,32,20,.06); }
.pl-topbar .wordmark { font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; font-weight:500; }
.pl-topbar nav { display:flex; gap:1.4rem; align-items:center; }
.pl-topbar nav a { text-decoration:none; color:var(--ink-soft);
  font-weight:600; font-size:.92rem; font-family:var(--font-body); }
.pl-topbar nav a[aria-current="page"] { color:var(--ink);
  border-bottom:2px solid var(--ink); padding-bottom:2px; }
.pl-topbar .act-pill { background:var(--accent); color:#fff; border-radius:999px;
  padding:.45rem 1.05rem; font-weight:700; font-size:.9rem;
  text-decoration:none; }
.pl-topbar .act-pill:focus-visible { outline-offset:3px; }

/* spread */
.pl-spread { display:grid; grid-template-columns:minmax(320px,30rem) 1fr;
  gap:1.4rem; padding:0 1.4rem 2rem; max-width:100rem; margin:0 auto;
  align-items:start; }
@media (max-width:60rem){ .pl-spread { grid-template-columns:1fr; } }

/* left panel (offset clears the sticky topbar) */
.pl-left { position:sticky; top:4.2rem; }
@media (max-width:60rem){ .pl-left { position:static; } }

/* giant month wordmark — the cover glyph on mobile (the "63 treatment") */
.cover-giant { display:none; position:relative; margin:.4rem 0 .9rem;
  overflow:hidden; }
.cover-giant .echo, .cover-giant .face {
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(3.4rem, 17vw, 6.5rem); line-height:.96; display:block; }
.cover-giant .echo { position:absolute; top:.14em; left:.22em;
  color:transparent; -webkit-text-stroke:1.5px var(--accent);
  opacity:.5; user-select:none; white-space:nowrap; }
.cover-giant .face { position:relative; color:var(--ink); }
.cover-giant .face .accent-dot { color:var(--accent); }
@media (max-width:60rem){
  .cover-plate { display:none; }
  .issue-wordmark { display:none; }
  .cover-giant { display:block; }
  .pl-left .hero { font-size:1.42rem; line-height:1.42; color:var(--ink);
    font-weight:500; max-width:none; letter-spacing:-.01em; }
}
.hero a { color:var(--accent); text-decoration:underline dotted;
  text-decoration-thickness:2px; text-underline-offset:5px; }

/* topbar issue meta (mobile replaces nav) */
.pl-topbar .tb-meta { display:none; }
@media (max-width:60rem){
  .pl-topbar nav { display:none; }
  .pl-topbar .tb-meta { display:block; }
}
.cover-plate { position:relative; border-radius:var(--radius);
  overflow:hidden; margin-bottom:.9rem; background:var(--tile-stone);
  container-type:inline-size; }
.cover-plate img { display:block; width:100%; height:25rem; object-fit:cover; }
.cover-plate .plate-fallback { height:25rem; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:4rem; color:var(--accent); }
.cover-chips { position:absolute; top:.8rem; left:.8rem; display:flex;
  gap:.45rem; }
.cover-chips span { background:var(--paper); border-radius:999px;
  padding:.28rem .8rem; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
/* With the month set on the plate, the wordmark is the issue line, not
   the display glyph. */
.issue-wordmark { font-family:var(--font-display); font-weight:700;
  font-size:2rem; letter-spacing:-.02em; line-height:1; margin:.1rem 0 .55rem; }
.issue-wordmark .accent-dot { color:var(--accent); }
.pl-left .hero { font-size:1.02rem; line-height:1.5; color:var(--ink-soft);
  max-width:34ch; margin:0 0 .9rem; }
.pl-left .panel-foot { font-size:.8rem; color:var(--muted); line-height:1.5;
  margin-top:.8rem; max-width:38ch; }

/* index cards */
.idx-card { display:flex; align-items:center; gap:.8rem; background:#fff;
  border-radius:16px; padding:.7rem 1rem; margin-bottom:.5rem;
  text-decoration:none; color:var(--ink);
  box-shadow:0 1px 3px rgba(40,32,20,.07); }
.idx-card:hover { box-shadow:0 3px 10px rgba(40,32,20,.12); }
.idx-tile { width:2.1rem; height:2.1rem; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); }
.idx-tile.dots { display:grid; grid-template-columns:repeat(2,7px); gap:3px;
  place-content:center; }
.idx-tile.dots i { width:7px; height:7px; border-radius:50%; display:block; }
.idx-card .name { font-weight:700; font-size:1.02rem; }
.idx-card .stat { margin-left:auto; text-align:right; }
.idx-card .stat .big { font-family:var(--font-display); font-weight:700;
  font-size:1.55rem; line-height:1.05; display:block; }
.idx-card .stat .cap { font-size:.72rem; color:var(--muted); display:block;
  margin-top:.1rem; }

/* right sheet */
.pl-sheet { background:var(--sheet); border-radius:22px;
  padding:1.5rem 1.6rem 1rem; box-shadow:0 1px 2px rgba(40,32,20,.05); }
.sheet-desk { margin-bottom:2rem; }
.sheet-desk .dhead { display:flex; align-items:center; gap:.7rem;
  margin-bottom:.85rem; }
.sheet-desk .dhead h2 { font-family:var(--font-body); font-weight:800;
  font-size:1.25rem; margin:0; }
.sheet-desk .dhead .src { margin-left:auto; }
.sheet-grid2 { display:grid; grid-template-columns:2fr 1fr; gap:.8rem; }
.sheet-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.sheet-gridcrime { display:grid; grid-template-columns:1fr 1fr 1.15fr;
  gap:.8rem; }
@media (max-width:72rem){
  .sheet-grid3, .sheet-gridcrime { grid-template-columns:1fr 1fr; }
}
@media (max-width:44rem){
  .sheet-grid2, .sheet-grid3, .sheet-gridcrime { grid-template-columns:1fr; }
}

.mintcard { background:var(--tile-mint); border-radius:16px;
  padding:1.15rem 1.25rem; font-size:.93rem; line-height:1.5; }
.mintcard b { display:block; font-size:1.02rem; margin-bottom:.25rem; }
.whitecard { background:#fff; border-radius:16px;
  padding:1.05rem 1.15rem; font-size:.92rem;
  box-shadow:0 1px 3px rgba(40,32,20,.07); }
.whitecard h3 { margin:0 0 .2rem; font-size:1rem; }
.whitecard p { margin:0; color:var(--ink-soft); font-size:.88rem; }
.statcard .bignum { font-family:var(--font-display); font-weight:700;
  font-size:2.7rem; line-height:1.05; }
.statcard .lbl { font-weight:700; margin-top:.15rem; }
.statcard .sub { color:var(--muted); font-size:.8rem; }

/* pastel crime tiles */
.ptile { border-radius:var(--radius); padding:.9rem 1rem .8rem;
  position:relative; min-height:6.2rem; display:flex; flex-direction:column;
  justify-content:space-between; }
.ptile .n { font-family:var(--font-display); font-weight:700; font-size:2.4rem;
  line-height:1; color:var(--ink); }
.ptile .lbl { display:flex; align-items:center; gap:.45rem; font-weight:700;
  font-size:.92rem; }
.ptile .lbl i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.ptile .delta { position:absolute; top:.75rem; right:.8rem; background:#fff;
  border-radius:999px; padding:.18rem .6rem; font-family:var(--font-mono);
  font-size:.68rem; }
.ptile.property{background:var(--ptile-property)} .ptile.person{background:var(--ptile-person)}
.ptile.other{background:var(--ptile-other)} .ptile.weapons{background:var(--ptile-weapons)}
.dot-person{background:var(--cat-person)} .dot-property{background:var(--cat-property)}
.dot-weapons{background:var(--cat-weapons)} .dot-other{background:var(--cat-other)}

/* crime slabs — mobile 5a treatment (full-width, numeral left, chip right) */
.crime-slabs { display:none; }
.slab-group { margin:0 -1.1rem; border-radius:18px; overflow:hidden; }
.slab { padding:1.05rem 1.15rem; display:flex;
  align-items:center; gap:.85rem; }
.slab .n { font-family:var(--font-display); font-weight:700; font-size:2.3rem;
  line-height:1; min-width:2ch; }
.slab .lbl { display:flex; align-items:center; gap:.45rem; font-weight:700;
  font-size:.95rem; }
.slab .lbl i { width:9px; height:9px; border-radius:50%; }
.slab .delta { margin-left:auto; background:#fff; border-radius:999px;
  padding:.3rem .75rem; font-family:var(--font-mono); font-size:.7rem;
  white-space:nowrap; box-shadow:0 1px 2px rgba(40,32,20,.12); }
.slab.property{background:var(--ptile-property)} .slab.person{background:var(--ptile-person)}
.slab.other{background:var(--ptile-other)} .slab.weapons{background:var(--ptile-weapons)}
.crime-compress { background:#fff; padding:1rem 1.15rem; display:flex;
  justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; font-size:.95rem; }
.crime-compress .more { color:var(--ink-soft); }
.crime-compress a { font-weight:700; text-decoration:none; }

/* desk differentiation + mobile stack */
.sheet-desk .dnum { display:none; }
@media (max-width:44rem){
  .pl-spread { padding:0 .8rem 2rem; }
  .pl-sheet { padding:1.35rem 1.1rem 1.1rem; border-radius:24px; }
  .sheet-desk { margin-bottom:2.2rem; }
  .sheet-desk .dhead .idx-tile { display:none; }
  .sheet-desk .dhead h2 { font-family:var(--font-mono); font-weight:500;
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
  .sheet-desk .dnum { display:inline; }
  .sheet-gridcrime { display:none; }
  .crime-slabs { display:block; }
}

/* map card */
.mapcard { background:var(--tile-mint); border-radius:var(--radius);
  position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; min-height:13rem; overflow:hidden; }
/* the background is a self-hosted OSM composite whose edges are known to
   the build; the pin layer keeps the image's aspect and covers the card,
   so pins placed as percentages of the image land on their blocks. */
/* the box is the whole diagram, scaled up and shifted by the build's
   MAP_CARD_VIEW so the card shows a zoomed view of the middle of the
   neighborhood; the card clips the rest. Pins are % of the box, so
   they stay on their blocks at any zoom. */
.mapcard .mapbox { position:absolute; left:0; top:0; transform-origin:0 0;
  width:calc(var(--z, 1.3) * 100%);
  transform:translate(calc(-1% * var(--vx, 0)), calc(-1% * var(--vy, 0)));
  background:url(/static/map-diagram.svg) center / 100% 100% no-repeat; }
a.mapcard { display:flex; text-decoration:none; color:var(--ink); }
a.mapcard:hover { box-shadow:0 3px 10px rgba(40,32,20,.14); }
.mapcard .foot .open { color:var(--accent); font-weight:700; }
.mapcard .pin { position:absolute; width:1rem; height:1rem;
  transform:translate(-50%,-50%); border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.56rem; font-weight:500;
  border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.22); }
.mapcard .pin.one { width:.6rem; height:.6rem; border-width:1.5px; }
.mapcard .credit { position:absolute; top:.55rem; right:.7rem;
  font-size:.52rem; color:var(--muted); background:rgba(255,255,255,.7);
  border-radius:999px; padding:.12rem .45rem; }
.mapcard .foot .mono-meta { font-size:.58rem; margin-left:.3rem; }
.mapcard .foot { background:#fff; margin:.6rem; border-radius:10px;
  padding:.6rem .85rem; display:flex; justify-content:space-between;
  align-items:center; font-weight:700; font-size:.9rem; position:relative; }
.mapcard .foot a { text-decoration:none; }

/* sheet footer */
.sheet-foot { border-top:1px solid var(--hairline); padding:.85rem .2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--muted); }
.sheet-foot a { font-weight:700; text-decoration:none; }

/* banners (existing states, reskinned) */
.banner { background:var(--paper-deep); border-left:4px solid var(--ink);
  padding:.7rem 1rem; margin:1rem 0; border-radius:0 var(--radius-sm)
  var(--radius-sm) 0; }
.banner.sample { border-left-color: var(--cat-person); font-weight:600; }

/* ==========================================================================
   Landing cover (mobile) — art on top, facts in the sheet, nav off the art
   ========================================================================== */
.landing { display:none; }
@media (max-width:60rem){
  .landing { display:flex; flex-direction:column;
    height:calc(100dvh - 3.4rem); }
  .landing .art { flex:1; position:relative; overflow:hidden;
    display:flex; align-items:center; }
  .landing .art img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; }
  .landing .art .cover-giant { display:block; margin:0 auto;
    padding:0 1.2rem; }
  .landing-sheet { position:relative; z-index:2; background:#fff;
    border-radius:22px 22px 0 0; margin-top:-22px;
    padding:1.15rem 1.15rem 1rem;
    box-shadow:0 -6px 24px rgba(30,25,20,.10); }
  .landing-sheet .lstat { font-size:1.05rem; }
  .landing-sheet .lstat .n { font-family:var(--font-display);
    font-weight:700; font-size:2.6rem; line-height:1; margin-right:.55rem;
    vertical-align:-.12em; }
  .landing-sheet .lrow2 { display:flex; justify-content:space-between;
    align-items:center; margin:.7rem 0 .9rem; flex-wrap:wrap; gap:.5rem; }
  .legend { display:flex; gap:.9rem; font-size:.92rem; font-weight:600;
    color:var(--ink-soft); }
  .legend i { width:9px; height:9px; border-radius:50%; display:inline-block;
    margin-right:.3rem; }
  .landing-sheet .openlink { font-weight:700; text-decoration:none;
    color:var(--ink); }
  .sheet-nav { display:flex; gap:.2rem; background:var(--paper-deep);
    border-radius:999px; padding:.35rem; }
  .sheet-nav a { flex:1; text-align:center; font-size:.92rem; font-weight:700;
    color:var(--ink-soft); text-decoration:none; padding:.55rem 0;
    border-radius:999px; }
  .sheet-nav a[aria-current="page"] { background:var(--ink); color:#fff; }
  .sheet-nav a.act-link { color:var(--accent); }
  /* the issue's own glyph is redundant under the landing */
  .pl-left .cover-giant { display:none; }
  /* floating nav only appears once the landing is scrolled past */
  body.has-landing .tabbar { opacity:0; pointer-events:none;
    transition:opacity .2s; }
  body.has-landing.past-landing .tabbar { opacity:1; pointer-events:auto; }
}

/* outline month over photo covers — 3c scale, clipped past the bleed.
   The build sets --w (percent of the frame); the phone landing reads it
   against the viewport, the desktop plate against its own width. */
.art-word {
  position:absolute; left:-.03em; bottom:8%;
  font-family:var(--font-display); font-weight:700; line-height:.82;
  letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:3px #FFFFFF;
  opacity:.95; user-select:none; pointer-events:none;
  white-space:nowrap; max-width:none;
}
.landing .art .art-word { font-size:calc(var(--w, 30) * 1vw); }
.cover-plate .art-word { font-size:calc(var(--w, 30) * 1cqw);
  -webkit-text-stroke-width:2.5px; }

/* ==========================================================================
   Act — five choices fill the screen, targets for one hand at night
   ========================================================================== */
.act-wrap { max-width:34rem; margin:0 auto; padding:0 .3rem; }
.act-hero { font-family:var(--font-display); font-weight:700;
  font-size:3.4rem; letter-spacing:-.03em; line-height:1; margin:1.4rem 0 1.1rem; }
.act-hero .accent-dot { color:var(--accent); }
.bigcard { display:block; border-radius:22px; padding:1.5rem 1.5rem 1.4rem;
  margin-bottom:.85rem; background:#fff; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 3px rgba(40,32,20,.07); }
.bigcard h3 { font-family:var(--font-display); font-weight:700;
  font-size:1.55rem; line-height:1.1; margin:0 0 .3rem; letter-spacing:-.01em; }
.bigcard p { margin:0; font-size:1rem; line-height:1.45; color:var(--muted); }
.bigcard.ink { background:var(--ink); color:#fff; min-height:13.5rem;
  display:flex; flex-direction:column; justify-content:flex-end; }
.bigcard.ink h3 { font-size:2.2rem; color:#fff; }
.bigcard.ink p { color:rgba(255,255,255,.62); }
.bigcard.accent { background:var(--accent); color:#fff; }
.bigcard.accent h3 { color:#fff; }
.bigcard.accent p { color:rgba(255,255,255,.78); }
.act-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem;
  margin-bottom:.85rem; }
.act-row .bigcard { margin-bottom:0; }
.act-fine { text-align:center; font-size:.88rem; color:var(--muted);
  line-height:1.5; margin:1rem 0 1.4rem; padding:0 .5rem; }

/* the Red Alert card — the only red the site ever shows. Same stacked-card
   grammar as everything else: rounded, soft shadow, inset from the edges. */
.alert-pin { display:block; text-decoration:none;
  padding:1rem 1.1rem 0.95rem;
  box-shadow:0 10px 30px rgba(30,25,20,.20), 0 1px 2px rgba(30,25,20,.10); }
.alert-pin b { display:inline; }
.alert-pin .alert-meta { display:block; margin-top:.35rem; font-size:.82rem;
  color:rgba(255,255,255,.78); font-family:var(--font-mono);
  letter-spacing:.04em; }
/* in-flow variant: descends from the header like the other stacked cards */
.alert-pin--flow { margin:.85rem auto .2rem;
  animation:alert-drop .5s cubic-bezier(.2,.7,.25,1) .25s backwards; }
/* overlay variant (mobile home): full width, tucked flush under the header,
   descending over the top of the cover like a drawer — square top corners
   where it meets the header, the card's rounded corners below. Clipped by
   .art's overflow:hidden so it appears from underneath the header. Takes
   no vertical space; the one-screen landing stays intact. */
.landing .art .alert-pin--overlay { position:absolute; z-index:3;
  top:0; left:0; right:0; margin:0;
  border-radius:0 0 var(--radius) var(--radius);
  animation:alert-drop .55s cubic-bezier(.2,.7,.25,1) .35s backwards; }
@keyframes alert-drop { from { transform:translateY(-110%); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .alert-pin--flow, .landing .art .alert-pin--overlay { animation:none; }
}
/* interior screens at mobile width: same full-width drawer under the header */
@media (max-width:60rem) {
  .alert-wrap { padding:0; max-width:none; }
  .alert-pin--flow { margin:0 0 .5rem;
    border-radius:0 0 var(--radius) var(--radius); }
}
/* on the home spread the card aligns with the spread's edges, not --wrap */
.pl-home .alert-wrap { max-width:100rem; padding:0 1.4rem; }
/* on mobile the landing overlay carries the alert; hide home's flow card */
@media (max-width:60rem) { .alert-pin--home { display:none; } }
.lifecycle.alert-live { background:var(--alert-red); color:#fff; }

/* ---- fetched conditions: AQI card, stacked utilities column -------------- */
.util-stack { display:grid; gap:.8rem; align-content:start; }
.statcard.aqi .bignum { display:flex; align-items:center; gap:.5rem; }
/* AirNow's standard AQI category color, required by its data-use guidelines;
   a small dot only — never the site's palette, never the reserved red. */
.aqi-dot { width:14px; height:14px; border-radius:50%; display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(30,25,20,.18); flex:none; }
.statcard .sub + .sub { margin-top:.15rem; }
.lrow a { color:var(--ink); text-decoration:none;
  border-bottom:1px dotted var(--muted); }

/* ---- About (dc 5d): one word, plain cards, no spec boxes ---------------- */
.about-lede { font-size:1.12rem; line-height:1.5; margin:0 0 1.6rem;
  max-width:36ch; color:var(--ink); }
.about-label { font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:1.6rem 0 .6rem; }
.about-desks { display:grid; gap:.6rem; }
.about-desk { display:flex; gap:.8rem; align-items:flex-start;
  background:#fff; border-radius:16px; padding:.9rem 1rem;
  text-decoration:none; color:var(--ink);
  box-shadow:0 1px 3px rgba(40,32,20,.07); }
.about-desk:hover { box-shadow:0 3px 10px rgba(40,32,20,.12); }
.about-desk .idx-tile { margin-top:.1rem; }
.about-desk .name { font-weight:700; font-size:1.02rem; display:block; }
.about-desk p { margin:.15rem 0 0; font-size:.9rem; line-height:1.45;
  color:var(--ink-soft); }
.about-desk .mono-meta { display:block; margin-top:.4rem; }
.bigcard.about-card { padding:1.25rem 1.3rem 1.2rem; }
.bigcard.about-card h3 { font-size:1.3rem; }
.bigcard.about-card p { color:var(--ink-soft); }
.bigcard.about-card.ink p { color:rgba(255,255,255,.72); }
.bigcard.about-card .signup { margin-top:.9rem; max-width:none; }
.about-note { font-size:.95rem; color:var(--ink-soft); line-height:1.5;
  margin:.2rem .2rem 0; max-width:40ch; }

/* ---- the issue standfirst on mobile: its own card, not a caption -------- */
/* On desktop the sentence sits under the wordmark with room to breathe. On
   phones the wordmark is hidden and it landed flush under the landing sheet,
   easy to gloss over. Give it the deck treatment: tinted card, display
   scale, a label, solid underlines instead of squiggles. */
@media (max-width:60rem){
  .pl-left .hero {
    background:var(--issue-tint, var(--paper-deep)); border-radius:22px;
    padding:1.35rem 1.25rem 1.4rem; margin:1.4rem 0 1rem;
    /* margin > scroll offset so the landing sheet is fully under the bar */
    font-size:1.5rem; line-height:1.32; font-weight:600;
    letter-spacing:-.015em; color:var(--ink); }
  .pl-left .hero::before { content:"In this issue"; display:block;
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:.6rem;
    font-weight:400; }
  .pl-left .hero a { color:var(--ink); font-weight:700;
    text-decoration:underline; text-decoration-color:var(--accent);
    text-decoration-thickness:3px; text-underline-offset:.22em; }
}

/* ---- anchor landings clear the sticky bars ------------------------------ */
/* "Open the issue ↓" and the desk jump links land under the sticky topbar
   otherwise. The offset is the bar (~3.4rem) plus breathing room. */
/* scroll-padding (the bar) and scroll-margin (per target) ADD UP:
   bar 3.4rem + 1rem of ground above whatever the link lands on. */
html { scroll-padding-top:3.4rem; }
#issue, #lede, .sheet-desk { scroll-margin-top:1rem; }
@media (prefers-reduced-motion: no-preference){ html { scroll-behavior:smooth; } }

/* ---- Streets deep screen: ranked rows (mark + word + count) --------------- */
.rank { display:grid; gap:.55rem; margin:.2rem 0 0; }
.rank .row { display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem;
  align-items:baseline; font-size:.95rem; }
.rank .row .n { font-family:var(--font-display); font-weight:700;
  font-variant-numeric:tabular-nums; }
.rank .bar { grid-column:1 / -1; height:6px; border-radius:999px;
  background:var(--paper-deep); overflow:hidden; }
.rank .bar i { display:block; height:100%; border-radius:999px;
  background:var(--accent); }
.deep-stat { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.deep-stat .big { font-family:var(--font-display); font-weight:700;
  font-size:3.6rem; line-height:1; letter-spacing:-.03em; }
.deep-stat .delta { font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; background:#fff;
  border-radius:999px; padding:.25rem .7rem; color:var(--ink-soft); }
.deep-stat .lbl { width:100%; font-weight:700; }
.deep-stat .sub { width:100%; color:var(--muted); font-size:.88rem; }
.bigcard.sand { background:var(--tile-sand); }
.bigcard.mint { background:var(--tile-mint); }
.bigcard .mono-meta a { color:var(--muted); }
.deep-wrap .bigcard.ink { min-height:auto; display:block; }
.deep-wrap a.bigcard:hover { box-shadow:0 3px 10px rgba(40,32,20,.12); }

/* ---- Utilities & Air deep screen: the daily AQI strip -------------------- */
.aqi-dot.big { width:.55em; height:.55em; margin-right:.18em;
  vertical-align:.08em; }
.aqi-strip { display:grid; grid-template-columns:repeat(10, 1fr); gap:.35rem;
  margin-top:.8rem; }
@media (max-width:30rem){ .aqi-strip { grid-template-columns:repeat(6, 1fr); } }
.aqi-day { display:flex; flex-direction:column; align-items:center; gap:.15rem;
  font-size:.78rem; line-height:1; }
.aqi-day i { width:100%; height:10px; border-radius:999px; display:block;
  box-shadow:inset 0 0 0 1px rgba(30,25,20,.14); }
.aqi-day b { font-family:var(--font-display); font-weight:700; }
.aqi-day small { font-family:var(--font-mono); font-size:.6rem;
  color:var(--muted); }
.bigcard.about-card.ink h3 { font-size:1.3rem; }
.deep-wrap .bigcard .signup { margin-top:.9rem; max-width:none; }
.deep-wrap .alert-wrap { padding:0; max-width:none; }
.deep-wrap .alert-pin--flow { margin:0 0 .85rem; border-radius:22px; animation:none; }

/* ---- Crime deep screen: category tiles, bar strips --------------------- */
.tiles2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.6rem; }
.trend { display:flex; align-items:flex-end; gap:3px; height:6.5rem;
  margin-top:.6rem; }
.trend span { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; min-width:0; }
.trend i { display:block; width:100%; background:var(--paper-deep);
  border-radius:4px 4px 0 0; }
.trend .now i { background:var(--accent); }
.trend b { font-family:var(--font-display); font-size:.78rem; line-height:1;
  margin-bottom:.2rem; }
.trend small { font-family:var(--font-mono); font-size:.55rem; color:var(--muted);
  margin-top:.25rem; line-height:1; }
.trend.months i { background:var(--tile-sand); }
.trend.months .now i { background:var(--accent); }
.trend.dow i { background:var(--tile-stone); }

/* ---- the map sheet (dc 5b): map behind, chips in front ------------------ */
body.pl-map { overflow:hidden; }
.pl-map .pl-topbar { position:relative; z-index:1002; }
.pl-map .pl-topbar .tb-meta { display:block; margin-left:auto; margin-right:.9rem; }
.pl-map .map-close { font-weight:700; font-size:1.05rem; text-decoration:none;
  color:var(--ink); background:#fff; border-radius:999px; width:2.1rem;
  height:2.1rem; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(40,32,20,.12); }
.pl-map #map { position:fixed; left:0; right:0; bottom:0; top:3.4rem;
  background:var(--paper-deep); z-index:0; }
.map-sheet { position:fixed; left:.8rem; right:.8rem;
  bottom:calc(.8rem + env(safe-area-inset-bottom)); z-index:1001;
  max-width:34rem; margin:0 auto; background:#fff; border-radius:22px;
  padding:1rem 1.1rem 1rem;
  box-shadow:0 10px 30px rgba(30,25,20,.18), 0 1px 2px rgba(30,25,20,.08); }
.map-sheet .sheet-row { display:flex; justify-content:space-between; gap:.6rem;
  align-items:baseline; }
.map-sheet .fine { font-size:.8rem; color:var(--muted); line-height:1.4;
  margin:.7rem 0 0; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
.chips button { border:0; border-radius:999px; padding:.45rem .85rem; font:inherit;
  font-weight:700; font-size:.88rem; background:var(--paper-deep);
  color:var(--ink-soft); display:inline-flex; gap:.45rem; align-items:center;
  cursor:pointer; }
.chips button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.chips.cats button { background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--paper-deep); }
.chips.cats button[aria-pressed="true"] { background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink); }
.chips.cats button[aria-pressed="false"] { color:var(--muted);
  text-decoration:line-through; }
.chips.cats button[aria-pressed="false"] i { opacity:.3; }
.chips button i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.chips button .n { font-family:var(--font-mono); font-size:.72rem; opacity:.75; }
.count-label { background:transparent !important; border:0 !important;
  box-shadow:none !important; color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:.74rem; }
.count-label::before { display:none; }
.leaflet-popup-content-wrapper { border-radius:14px; font-family:var(--font-body); }
.leaflet-popup-content b { font-family:var(--font-display); }
.popup-list { list-style:none; margin:.4rem 0 0; padding:0; font-size:.85rem; }
.popup-list li { display:flex; align-items:center; gap:.4rem; padding:.1rem 0; }
.popup-list i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.pl-map .banner.sample { position:fixed; top:3.6rem; left:.8rem; right:.8rem;
  z-index:1001; }
.pl-map .pl-topbar .wordmark { white-space:nowrap; }
@media (max-width:30rem){ .pl-map .pl-topbar .tb-meta { font-size:.6rem; } }

/* ---- the record (per-month list), the shelf, category strips ------------ */
.bigcard.record { padding:.4rem 1.1rem; }
.record-row { display:grid; grid-template-columns:4.6rem 1fr auto; gap:.6rem;
  align-items:center; padding:.55rem 0; border-bottom:1px solid var(--hairline); }
.record-row:last-child { border-bottom:0; }
.record-row .d { font-size:.66rem; letter-spacing:.08em; }
.record-row .b { font-weight:600; }
.record-row .c { font-size:.85rem; color:var(--ink-soft); display:flex;
  align-items:center; gap:.4rem; white-space:nowrap; }
.record-row .c i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.jump { display:block; margin:0 0 1.2rem; }
.jump select { display:block; width:100%; margin-top:.35rem; font:inherit;
  font-weight:600; padding:.7rem .9rem; border:0; border-radius:14px;
  background:#fff; box-shadow:0 1px 3px rgba(40,32,20,.07); color:var(--ink); }
.shelf { display:grid; grid-template-columns:repeat(2, 1fr); gap:.8rem; }
@media (min-width:34rem){ .shelf { grid-template-columns:repeat(3, 1fr); } }
.shelf .issue { display:block; text-decoration:none; color:var(--ink);
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 3px rgba(40,32,20,.07); }
.shelf .issue:hover { box-shadow:0 3px 10px rgba(40,32,20,.12); }
.shelf .issue img, .shelf .issue .glyph { display:block; width:100%;
  aspect-ratio:4 / 3; object-fit:cover; }
.shelf .issue .glyph { display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:2.2rem;
  letter-spacing:-.03em; color:var(--ink); }
.shelf .issue .meta { display:block; padding:.6rem .8rem .7rem; }
.shelf .issue .meta b { display:block; font-size:.95rem; }
.shelf .issue.now .meta b::after { content:" · now"; color:var(--accent);
  font-weight:700; }
.cat-strip { margin-top:.9rem; }
.cat-strip .lbl { display:flex; align-items:center; gap:.45rem; font-weight:700;
  font-size:.92rem; }
.cat-strip .lbl i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.cat-strip .lbl .n { margin-left:auto; font-family:var(--font-display); }
.trend.cat { height:3rem; margin-top:.3rem; }
.trend.cat i { opacity:.35; }
.trend.cat .now i { opacity:1; }

/* the crime desk's taller map card */
.mapcard.deep { min-height:22rem; margin-bottom:.85rem; border-radius:22px; }
.mapcard.deep .pin { width:1.5rem; height:1.5rem; font-size:.72rem; border-width:2px; }
.mapcard.deep .pin.one { width:.9rem; height:.9rem; }
.mapcard .foot { gap:.4rem .7rem; }
.mapcard .foot a, .mapcard .foot .mono-meta { white-space:nowrap; }
.mapcard .foot .mono-meta { display:inline-block; }

/* ---- desktop layout for the phone-first screens ---------------------------
   Head (back link, the word, the lede) sticks on the left; the cards read
   in a wider column on the right — the homepage spread's shape. */
@media (min-width:60rem){
  .wrap:has(> .act-wrap) { max-width:72rem; }
  /* the colophon rides the same grid, so its rule meets the content's edges */
  .foot-wrap > .colophon { grid-column:1 / -1; }
  .act-wrap.bar-wrap { align-items:baseline; }
  .bar-wrap > nav { justify-self:end; }
  .bar-wrap > .mast-name { justify-self:start; }
  .act-wrap { max-width:70rem; display:grid;
    grid-template-columns:minmax(15rem, 19rem) minmax(0, 44rem);
    justify-content:center; gap:0 3.2rem; align-items:start;
    padding:0 1.4rem; }
  .act-wrap .deep-head { position:sticky; top:5rem; padding-top:.4rem; }
  .act-wrap .deep-head .act-hero { font-size:3.8rem; margin:.6rem 0 .9rem; }
  .act-wrap .deep-head .about-lede { max-width:none; font-size:1.05rem; }
  .act-wrap .deep-body { min-width:0; padding-top:.8rem; }
  .act-wrap .deep-body > .about-label:first-child { margin-top:0; }
  .deep-body .act-fine { text-align:left; padding:0; }
  .about-wrap .deep-body .about-desks { grid-template-columns:1fr 1fr; }
  .shelf { grid-template-columns:repeat(4, 1fr); }
  .mapcard.deep { min-height:26rem; }
}
@media (min-width:84rem){
  .act-wrap { grid-template-columns:minmax(17rem, 22rem) minmax(0, 46rem); gap:0 4rem; }
}

/* phone: the crime desk's map card is a short, close view; the whole card
   opens the map, so it needs no height for browsing */
@media (max-width:60rem){
  .mapcard.deep { min-height:11rem; }
  .mapcard.deep .mapbox { --z:2.0; --vx:16; --vy:19; }  /* the park sits in the frame's upper right (x .30–.80, edge sloping down to the east): start west of it and just below its high end */
  .mapcard.deep .foot { margin:.45rem; padding:.45rem .75rem; font-size:.85rem; }
}

/* ---- the energy card (Utilities desk) ------------------------------------ */
.whitecard.energy h3 { font-size:1rem; margin:0 0 .3rem; }
.whitecard.energy p { margin:0 0 .4rem; font-size:.88rem; line-height:1.45; }
.whitecard.energy .mono-meta a, .bigcard.energy .mono-meta a { color:var(--muted); }
.bigcard.energy p b { color:var(--ink); }

/* ---- Committee desk (behind Access): same cards, plus a form --------------- */
.committee-line { margin-top:-.6rem; }
.act-fine a, .committee-line a { color:var(--muted); }
.committee-wrap .bigcard.about-card code { font-family:var(--font-mono);
  font-size:.82em; background:var(--paper-deep); padding:.05em .35em;
  border-radius:6px; }
.linklist, .steps { margin:0; padding-left:1.2rem; color:var(--ink-soft);
  font-size:.95rem; line-height:1.5; }
.linklist { list-style:none; padding-left:0; }
.linklist li { padding:.5rem 0; border-bottom:1px solid var(--hairline); }
.linklist li:last-child { border-bottom:0; }
.linklist a, .committee-wrap .bigcard table a { color:var(--accent);
  font-weight:700; text-decoration:none; }
.steps li { margin:.35rem 0; }
.steps li::marker { font-family:var(--font-mono); font-size:.8em;
  color:var(--muted); }
.bigcard.about-card > .fineprint { margin:.8rem 0 0; }
.bigcard.about-card table { margin:.2rem 0 .6rem; }
.bigcard.about-card th { font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom-color:var(--hairline); }
.bigcard.about-card td { font-size:.9rem; vertical-align:top; }

.checklist { list-style:none; margin:0; padding:0; }
.checklist li + li { border-top:1px solid var(--hairline); }
.checklist label { display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  align-items:start; padding:.6rem 0; font-size:.95rem; line-height:1.45;
  color:var(--ink-soft); cursor:pointer; }
.checklist input { width:1.15rem; height:1.15rem; margin:.15rem 0 0;
  accent-color:var(--accent); }
.checklist strong { color:var(--ink); }
.compose-grid { display:grid; gap:.9rem; }
.compose-grid label, #bolo-wrap label { display:block; font-weight:700;
  font-size:.9rem; }
.compose-grid input, .compose-grid textarea,
#bolo-wrap input, #bolo-wrap textarea {
  display:block; width:100%; margin-top:.3rem; font-weight:400;
  font-size:1rem; padding:.5rem .6rem; border:1px solid var(--muted);
  border-radius:8px; font-family:var(--font-body); background:var(--paper);
  color:var(--ink); }
.compose-grid input:focus, .compose-grid textarea:focus,
#bolo-wrap input:focus, #bolo-wrap textarea:focus, .composer-out:focus {
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
#bolo-wrap { margin-top:1rem; }
#bolo-wrap summary { font-weight:700; font-size:.9rem; cursor:pointer;
  color:var(--ink-soft); }
#bolo-wrap label { margin:.75rem 0; }
.lint { background:var(--tile-sand); border-radius:12px; padding:.75rem 1rem;
  margin:0 0 .8rem; font-size:.92rem; color:var(--ink); }
.lint ul { margin:.4rem 0 0; padding-left:1.2rem; color:var(--ink-soft); }
.composer-out { display:block; width:100%; font-family:var(--font-mono);
  font-size:.82rem; line-height:1.45; padding:.7rem .8rem; border:0;
  border-radius:12px; background:var(--paper-deep); color:var(--ink);
  resize:vertical; }
.composer-actions { display:flex; align-items:center; gap:.8rem;
  flex-wrap:wrap; margin:.8rem 0 .3rem; }
.btn:disabled { background:var(--muted); cursor:not-allowed; opacity:.6; }