/* ==========================================================================
   The Hood Map. Sits on top of style.css and borrows its bands, buttons and
   type. What is new here: the map itself, the pins, the sheets you fill in.
   ========================================================================== */

.map-page { background: var(--ink); }
.map-main { display: block; }

/* ---------- head ---------- */
.map-head { padding-block: clamp(36px, 6vw, 64px) 0; overflow: hidden; }
/* The city strip. Its sky is the same green as the band, so the buildings
   read as growing out of the page, and the map starts right under them. */
.map-city { margin-top: clamp(18px, 3vw, 36px); line-height: 0; }
.map-city img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center bottom; }
.map-head-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 32px; align-items: end; }
.map-title {
  font-family: var(--display); font-size: clamp(46px, 9vw, 108px); line-height: 0.9;
  letter-spacing: -0.02em; margin: 14px 0 18px; color: var(--ink);
}
.map-title .marker { font-family: var(--marker); font-size: 0.92em; color: var(--paper); text-shadow: 4px 4px 0 var(--ink); display: inline-block; transform: rotate(-2deg); }
.map-lede { max-width: 62ch; font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.55; margin: 0; color: #0C4715; font-weight: 500; }
.map-lede strong { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.map-lede em { font-style: normal; background: var(--ink); color: var(--green); padding: 0 6px; font-family: var(--mono); font-size: 0.9em; }

.map-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--edge-w) solid var(--ink); background: var(--ink); box-shadow: var(--pop); }
.mstat { background: var(--paper); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.mstat + .mstat { border-left: var(--edge-w) solid var(--ink); }
.mstat-v { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mstat-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #0C4715; }
.mstat-v small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #0C4715; margin-top: 4px; }
/* leaflet paints every link in its container blue; ours are buttons */
.leaflet-container .pop-actions a.btn, .sheet .pop-actions a.btn { color: var(--ink); }
.leaflet-container .claim-tx, .sheet .claim-tx { color: #0C4715; }

/* ---------- the map ---------- */
.map-shell { position: relative; border-top: var(--edge-w) solid var(--ink); border-bottom: var(--edge-w) solid var(--ink); background: #0B120C; }
.map-canvas { height: clamp(460px, 72vh, 820px); width: 100%; background: #0B120C; }
@supports (height: 1dvh) { .map-canvas { height: clamp(460px, 72dvh, 820px); } }

/* full screen: the shell pins itself over everything and the map fills it */
.map-shell.is-full { position: fixed; inset: 0; z-index: 2500; border: 0; }
.map-shell.is-full .map-canvas { height: 100vh; height: 100dvh; }
body.map-full { overflow: hidden; }
/* sits outside the scrolling toolbar so it can never be scrolled out of sight */
.chip-full { position: absolute; z-index: 810; top: 14px; right: 14px; background: var(--ink); color: var(--green); border-color: var(--green); box-shadow: 4px 4px 0 #000; }
.map-shell.is-full .chip-full { background: var(--green); color: var(--ink); border-color: var(--ink); }

.map-touch-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 800; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-align: center; max-width: 88%;
  color: var(--green); background: rgba(10, 13, 10, 0.86); border: 2px solid var(--green); padding: 7px 11px;
  pointer-events: none; transition: opacity .3s;
}
.map-touch-hint.is-fading { opacity: 0; }

/* The tiles are CARTO's dark set, pulled toward the brand: a little green in
   the blacks, colour drained out of everything that is not ours. */
.map-canvas .leaflet-tile-pane { filter: saturate(0.2) brightness(0.9) sepia(0.4) hue-rotate(58deg) contrast(1.1); }
.map-canvas .leaflet-shadow-pane { filter: saturate(0.2) sepia(0.4) hue-rotate(58deg); }
.map-canvas .leaflet-container { font-family: var(--body); background: #0B120C; }
.leaflet-control-attribution { display: none; }
.leaflet-control-zoom { border: var(--edge-w) solid var(--ink) !important; box-shadow: 4px 4px 0 var(--ink) !important; border-radius: 0 !important; overflow: hidden; }
.leaflet-control-zoom a { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--display) !important; border-radius: 0 !important; width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 20px !important; border-bottom: 2px solid var(--ink) !important; }
.leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.leaflet-control-zoom a:hover { background: var(--green) !important; }

.map-tools {
  position: absolute; z-index: 800; top: 14px; left: 14px; right: 110px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: none;
}
.map-tools > * { pointer-events: auto; }
.chip {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: var(--edge-w) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 12px; cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.chip:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.chip.is-on { background: var(--green); }
.chip-open.is-on { background: var(--green); }
.chip-found.is-on { background: var(--amber); }
.chip-paid.is-on { background: var(--paper); text-decoration: underline; text-decoration-thickness: 3px; }
.chip-me { margin-left: auto; background: var(--ink); color: var(--green); box-shadow: 4px 4px 0 #000; border-color: var(--green); }
.chip:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.map-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: var(--ink); padding: 6px 10px; border: 2px solid var(--green); }

/* nav cta: never wraps, and shortens on a phone */
.nav-cta { white-space: nowrap; flex: none; margin-right: var(--pad); }
.nav-cta .short { display: none; }

/* file inputs as real buttons, because the native one on a phone is a tiny
   grey "Choose file" that looks like a mistake */
.file-btn { position: relative; display: block; border: var(--edge-w) solid var(--ink); background: var(--green); box-shadow: 4px 4px 0 var(--ink); }
.file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn-txt { display: block; text-align: center; font-family: var(--display); font-size: 16px; padding: 13px 14px; color: var(--ink); pointer-events: none; }
.file-btn:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.file-btn.is-set { background: var(--green-pale); }

.map-empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; z-index: 700;
}
.map-empty p { font-family: var(--marker); font-size: clamp(18px, 3vw, 26px); color: var(--green); margin: 8px 0 0; max-width: 28ch; text-shadow: 3px 3px 0 #000; }
.cat-empty { width: 64px; height: 64px; color: var(--green); }

/* ---------- pins ---------- */
.pin { width: 44px; height: 44px; position: relative; }
.pin-body {
  position: absolute; inset: 0; border: var(--edge-w) solid var(--ink); background: var(--green); color: var(--ink);
  display: grid; place-items: center; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg);
  transition: transform .12s;
}
.pin-body svg { width: 30px; height: 30px; }
.pin:hover .pin-body { transform: rotate(0deg) scale(1.08); }
.pin-found .pin-body { background: var(--amber); }
.pin-paid .pin-body { background: var(--paper); }
.pin-paid .pin-body::after { content: "✓"; position: absolute; right: -8px; top: -10px; width: 20px; height: 20px; background: var(--ink); color: var(--green); font-family: var(--display); font-size: 13px; display: grid; place-items: center; border: 2px solid var(--green); }
.pin-amt {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; font-weight: 700; white-space: nowrap;
  background: var(--ink); color: var(--green); padding: 2px 6px; border: 2px solid var(--green);
}
.pin-new .pin-body { background: var(--paper); border-style: dashed; animation: pin-bob 1.2s ease-in-out infinite; }
@keyframes pin-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pin-new .pin-body { animation: none; } }

/* ---------- popups ---------- */
.leaflet-popup-content-wrapper { border-radius: 0 !important; border: var(--edge-w) solid var(--ink); box-shadow: 6px 6px 0 var(--ink) !important; background: var(--paper) !important; color: var(--ink); padding: 0 !important; }
.leaflet-popup-content { margin: 0 !important; width: min(320px, 82vw) !important; font-family: var(--body); line-height: 1.45; }
.leaflet-popup-tip { background: var(--paper) !important; border: var(--edge-w) solid var(--ink); border-top: 0; border-left: 0; box-shadow: none !important; }
.leaflet-popup-close-button { color: var(--ink) !important; font-size: 22px !important; top: 6px !important; right: 8px !important; font-family: var(--display) !important; }
.pop-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--edge-w) solid var(--ink); background: var(--ink); }
.pop-body { padding: 12px 14px 14px; }
.pop-city { font-family: var(--display); font-size: 20px; line-height: 1.05; margin: 0 0 4px; }
.pop-amt { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #0C4715; margin: 0 0 8px; }
.pop-amt b { color: var(--ink); font-size: 16px; }
.pop-note { font-family: var(--marker); font-size: 14px; color: #0C4715; margin: 0 0 8px; }
.pop-meta { font-family: var(--mono); font-size: 11px; color: #4C5A4B; margin: 0 0 10px; }
.pop-status { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 2px solid var(--ink); margin-bottom: 10px; }
.pop-status.open { background: var(--green); }
.pop-status.found { background: var(--amber); }
.pop-status.paid { background: var(--ink); color: var(--green); }
.pop-claims { border-top: 2px dashed var(--ink); margin-top: 8px; padding-top: 10px; display: grid; gap: 10px; }
.claim { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.claim img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); }
.claim-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #4C5A4B; display: block; }
.claim-addr { font-family: var(--mono); font-size: 11.5px; word-break: break-all; display: block; }
.claim-tx { font-family: var(--mono); font-size: 11px; display: inline-block; margin-top: 3px; color: #0C4715; text-decoration: underline; }
.claim .btn { margin-top: 6px; }
.pop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pop-actions .btn { font-size: 12px; padding: 8px 12px; box-shadow: 4px 4px 0 var(--ink); }

/* ---------- city picker: a select dressed as a chip ---------- */
.chip-city {
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  max-width: 180px; text-overflow: ellipsis;
}
.chip-city.is-on { background-color: var(--green); }

/* ---------- latest ---------- */
.map-feed { padding-block: clamp(26px, 4vw, 40px); }
.feed-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.feed-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: #1F2A1F; border: 2px solid #1F2A1F; }
.feed li { background: var(--ink-2); display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.feed li img { width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--green); display: block; }
.feed-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); display: block; }
.feed-t a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.feed-t code { font-family: var(--mono); font-size: 12.5px; color: var(--green-pale); }
.feed-when { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.feed-empty { grid-template-columns: 1fr !important; font-family: var(--marker); color: var(--green); font-size: 16px; }
.feed li.paid .feed-k { color: var(--amber); }

/* ---------- boards ---------- */
.boards { padding-block: clamp(36px, 6vw, 64px); }
.boards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.board h2 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); line-height: 0.95; margin: 12px 0 8px; }
.board-note { margin: 0 0 16px; font-size: 14.5px; color: #0C4715; font-weight: 500; max-width: 48ch; }
.rank { list-style: none; margin: 0; padding: 0; border: var(--edge-w) solid var(--ink); background: var(--ink); display: grid; gap: var(--edge-w); box-shadow: var(--pop); }
.rank li { background: var(--paper); display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; font-size: 14px; }
.rank li:first-child { background: var(--green-pale); }
.rank-n { font-family: var(--display); font-size: 18px; text-align: center; }
.rank-who { min-width: 0; }
.rank-who code { font-family: var(--mono); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-who small { display: block; font-family: var(--mono); font-size: 10.5px; color: #4C5A4B; letter-spacing: 0.04em; }
.rank-v { font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: right; white-space: nowrap; }
.rank-v small { display: block; font-weight: 400; font-size: 10.5px; color: #4C5A4B; }
.rank li.is-link { cursor: pointer; }
.rank li.is-link:hover { background: var(--green); }
.rank-empty { grid-template-columns: 1fr !important; font-family: var(--marker); font-size: 15px; color: #0C4715; }

.pop-share { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 2px solid var(--ink); padding: 7px 10px; cursor: pointer; }
.pop-share:hover { background: var(--ink); color: var(--green); }
.pop-share.done { background: var(--green); }
.claim-holds { display: block; font-family: var(--mono); font-size: 10.5px; color: #0C4715; margin-top: 2px; }
.claim-attested { display: block; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: #7A3E12; margin-top: 3px; }
.claim-attested b { color: #7A3E12; }
.claim-attested a { color: #7A3E12; text-decoration: underline; }
.claim-holds.none { color: #7A3E12; }

/* ---------- how it works ---------- */
.map-how { padding-block: clamp(36px, 6vw, 64px); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-card { background: var(--paper); border: var(--edge-w) solid var(--ink); box-shadow: var(--pop); padding: 20px 20px 18px; position: relative; }
.how-n { position: absolute; top: -16px; left: 16px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--green); border: var(--edge-w) solid var(--ink); font-family: var(--display); font-size: 16px; }
.how-card h3 { font-family: var(--display); font-size: 22px; margin: 8px 0 8px; }
.how-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #24301F; }
.how-foot { margin: 22px 0 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #24301F; max-width: 90ch; }

/* ---------- a drop as a sheet, phones ---------- */
.sheet-card-view { padding: 0 0 calc(22px + env(safe-area-inset-bottom)); position: relative; }
.sheet-x-float { position: absolute; top: 10px; right: 10px; z-index: 2; border: 2px solid var(--green); }
.sheet-card-view .pop-photo { border-bottom: var(--edge-w) solid var(--ink); aspect-ratio: 4 / 3; }
.sheet-card-view .pop-body { padding: 14px 18px 4px; }
.sheet-card-view .pop-city { font-size: 26px; }
.sheet-card-view .pop-actions .btn { font-size: 14px; padding: 11px 16px; flex: 1 1 auto; text-align: center; }
.sheet-card-view .claim img { width: 64px; height: 64px; }

/* ---------- sheets ---------- */
/* above the full screen map (2500), or a drop opened from it would sit under it */
.sheet { position: fixed; inset: 0; z-index: 3000; background: rgba(5, 8, 5, 0.72); display: grid; place-items: end center; padding: 0; }
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(560px, 100%); max-height: 92vh; max-height: 92dvh; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper); color: var(--ink);
  border: var(--edge-w) solid var(--ink); border-bottom: 0; box-shadow: 0 -6px 0 var(--green);
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
}
/* a grab handle, so it reads as a sheet you can dismiss */
.sheet-card::before { content: ""; display: block; width: 44px; height: 4px; background: var(--ink); margin: 0 auto 12px; opacity: .5; }
@media (min-width: 720px) { .sheet-card::before { display: none; } }
@media (min-width: 720px) {
  .sheet { place-items: center; padding: 24px; }
  .sheet-card { border-bottom: var(--edge-w) solid var(--ink); box-shadow: 8px 8px 0 var(--green), 8px 8px 0 3px var(--ink); }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head h2 { font-family: var(--display); font-size: 28px; margin: 0; }
.sheet-x { background: var(--ink); color: var(--green); border: 0; width: 36px; height: 36px; font-size: 24px; line-height: 1; cursor: pointer; font-family: var(--display); }
.sheet-sub { font-family: var(--mono); font-size: 12.5px; color: #0C4715; margin: 0 0 14px; }
.field { display: block; margin-top: 14px; }
.field-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #0C4715; margin-bottom: 6px; font-weight: 700; }
.field input[type="text"], .field input[type="number"] {
  width: 100%; font: 500 16px var(--body); padding: 11px 12px; border: var(--edge-w) solid var(--ink); background: #fff; color: var(--ink);
}
.field input[type="file"] { font: 500 14px var(--body); }
.field input:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.field-hint { display: block; font-size: 12.5px; color: #4C5A4B; margin-top: 5px; line-height: 1.45; }
.where { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: var(--edge-w) dashed var(--ink); padding: 10px 12px; background: #fff; }
.where.is-set { border-style: solid; background: var(--green-pale); }
.where-txt { font-family: var(--mono); font-size: 13px; flex: 1; }
.btn-ghost { background: var(--paper); }
.btn-full { width: 100%; margin-top: 18px; justify-content: center; }
.preview { margin-top: 10px; border: var(--edge-w) solid var(--ink); background: var(--ink); }
.preview img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-out { margin: 12px 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 2px solid var(--ink); background: #fff; }
.form-out.good { background: var(--green-pale); }
.form-out.bad { background: #F8DED9; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* placing mode: the whole map is a target */
.map-canvas.is-placing { cursor: crosshair; }
.map-canvas.is-placing::after {
  content: "tap where the wall is"; position: absolute; left: 50%; top: 70px; transform: translateX(-50%);
  font-family: var(--marker); font-size: 18px; color: var(--ink); background: var(--green); padding: 6px 14px;
  border: var(--edge-w) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); z-index: 900; pointer-events: none;
}

@media (max-width: 860px) {
  .map-head-inner { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; gap: 26px; }
  .map-tools { top: 10px; left: 10px; right: 10px; }
  .chip { padding: 7px 10px; font-size: 11px; }
  .map-count { display: none; }
}

@media (max-width: 720px) {
  .nav-cta .long { display: none; }
  .nav-cta .short { display: inline; }

  .map-head { padding-top: 26px; }
  .map-title { font-size: clamp(44px, 15vw, 64px); margin: 10px 0 12px; }
  .map-lede { font-size: 15.5px; }

  /* three stats as three rows: label left, number right. the cells could not
     hold a value like "12.5 · $1,398" side by side on a phone */
  .map-stats { grid-template-columns: 1fr; margin-top: 18px; }
  .mstat { flex-direction: row-reverse; align-items: baseline; justify-content: space-between; padding: 10px 14px; gap: 12px; }
  .mstat + .mstat { border-left: 0; border-top: var(--edge-w) solid var(--ink); }
  .mstat-v { font-size: 18px; text-align: right; }
  .mstat-v small { display: inline; margin: 0 0 0 6px; font-size: 10.5px; }
  .mstat-k { font-size: 10px; }

  .map-city img { max-height: 150px; }

  /* the toolbar is one scrolling row, and the two buttons that matter on a
     phone stay on the right where the thumb is */
  .map-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; right: 96px; mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .chip-full { top: 10px; right: 10px; }
  .map-tools::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .chip-me { margin-left: 8px; }

  .map-canvas { height: clamp(420px, 62vh, 640px); }
  @supports (height: 1dvh) { .map-canvas { height: clamp(420px, 62dvh, 640px); } }

  .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 12px 52px 0; }
  .map-shell.is-full .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: calc(52px + env(safe-area-inset-bottom)); }

  .pin-amt { font-size: 9.5px; }

  .boards-grid { grid-template-columns: 1fr; gap: 30px; }
  .feed li { grid-template-columns: 40px 1fr; }
  .feed li img { width: 40px; height: 40px; }
  .feed-when { grid-column: 2; }
  .chip-city { max-width: 140px; }

  .how-card { padding: 18px 16px 16px; }
  .how-card h3 { font-size: 20px; }
  .how-card p { font-size: 14.5px; }
  .how-foot { font-size: 12px; }

  .sheet-head h2 { font-size: 24px; }
  .field { margin-top: 12px; }
  .where { padding: 9px 10px; }
  .where .btn { width: 100%; justify-content: center; }
}