:root {
  --chalk: #f2efe8;
  --graphite: #222222;
  --blue: #aebfd0;
  --sage: #bfc8b2;
  --amber: #d8ad67;
  --paper: #fbfaf6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--chalk); color: var(--graphite); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
.masthead { padding: 24px 28px 32px; border-bottom: 1px solid var(--graphite); }
.brand-row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 54px; }
.wordmark { color: inherit; text-decoration: none; font-size: 17px; line-height: .86; letter-spacing: -.06em; font-weight: 900; }
.edition { text-align: right; font: 12px/1.3 "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.title-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: end; gap: 28px; }
.title-copy { min-width: 0; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; font: 12px "Courier New", monospace; letter-spacing: .11em; }
h1 { margin: 0; max-width: 820px; font-size: clamp(48px, 7.6vw, 112px); line-height: .84; letter-spacing: -.075em; font-weight: 700; }
.tagline { display: block; white-space: nowrap; font-size: .86em; line-height: .94; }
.progress-block { width: 220px; align-self: end; background: var(--blue); padding: 18px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 12px; }
.progress-number { font-size: 66px; line-height: .8; letter-spacing: -.08em; }
.progress-copy { font: 11px/1.3 "Courier New", monospace; text-transform: uppercase; }
.atlas-shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: 690px; }
.controls { padding: 26px 24px; border-right: 1px solid var(--graphite); display: flex; flex-direction: column; gap: 28px; }
.controls label, .controls legend { display: block; margin-bottom: 8px; font: 11px "Courier New", monospace; text-transform: uppercase; letter-spacing: .09em; }
.controls input[type="search"] { width: 100%; border: 1px solid var(--graphite); background: var(--paper); padding: 12px; outline: none; border-radius: 0; }
.controls input[type="search"]:focus { box-shadow: 0 0 0 3px var(--blue); }
fieldset { border: 0; padding: 0; margin: 0; }
.filter-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.filter-row button { border: 1px solid var(--graphite); background: transparent; padding: 9px 4px; font-size: 12px; cursor: pointer; margin-right: -1px; }
.filter-row button.active { background: var(--graphite); color: var(--chalk); }
.legend { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.legend span { display: flex; align-items: center; gap: 10px; }
.dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2px solid var(--graphite); }
.dot-reviewed { background: var(--sage); }
.dot-unreviewed { background: var(--amber); }
.result-count { margin-top: auto; border-top: 1px solid #aaa59b; padding-top: 14px; font: 11px "Courier New", monospace; text-transform: uppercase; }
.map-wrap, .map { min-height: 690px; height: 100%; width: 100%; }
.map-wrap { position: relative; }
.leaflet-container { background: var(--chalk); font-family: Arial, sans-serif; }
.leaflet-tile-pane { filter: grayscale(1) sepia(.16) saturate(.28) contrast(.88) brightness(1.06); opacity: .78; }
.leaflet-control-zoom a { background: var(--paper); color: var(--graphite); border-color: #b8b4ab; }
.leaflet-control-attribution { background: rgba(242, 239, 232, .88) !important; color: #77736b; }
.leaflet-control-attribution a { color: #5d5a54; }
.pub-marker-wrap { background: transparent !important; border: 0 !important; }
.pub-marker { display: block; width: 20px; height: 20px; border: 3px solid var(--graphite); border-radius: 50%; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); transition: transform .15s; }
.pub-marker:hover, .pub-marker:focus { transform: scale(1.25); }
.pub-marker.is-reviewed { background: var(--sage); }
.pub-marker.is-unreviewed { background: var(--amber); }
.leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 6px 6px 0 rgba(34, 34, 34, .2); padding: 0; border: 1px solid var(--graphite); }
.leaflet-popup-content { margin: 0; width: 260px !important; }
.leaflet-popup-tip { background: var(--graphite); }
.pub-popup { padding: 17px; }
.pub-popup .status { display: inline-block; margin: 0 0 18px; padding: 5px 7px; font: 10px "Courier New", monospace; text-transform: uppercase; letter-spacing: .07em; border: 1px solid var(--graphite); }
.pub-popup .status.reviewed { background: var(--sage); }
.pub-popup .status.unreviewed { background: var(--amber); }
.pub-popup h2 { margin: 0 0 7px; font-size: 25px; line-height: .95; letter-spacing: -.045em; }
.pub-popup .address { margin: 0 0 18px; color: #64615b; font-size: 12px; line-height: 1.45; }
.rating-row { border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); padding: 9px 0; margin-bottom: 13px; display: flex; justify-content: space-between; align-items: baseline; }
.rating-row span { font: 10px "Courier New", monospace; text-transform: uppercase; }
.rating-row strong { font-size: 20px; }
.review-link, .maps-link { display: block; padding: 9px 0; color: var(--graphite); font-size: 12px; font-weight: 700; }
.review-link.disabled { color: #8a867e; text-decoration: none; font-weight: 400; }
.maps-link { font-weight: 400; }

body.cover-only, body.cover-only main, body.cover-only .atlas-shell, body.cover-only .map-wrap, body.cover-only .map { width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
body.cover-only .atlas-shell { display: block; }
body.cover-only .controls { display: none; }
body.cover-only .leaflet-control-container { display: none; }
body.cover-only .map { pointer-events: none; }
body.cover-only .leaflet-tile-pane { filter: grayscale(.7) sepia(.3) saturate(.48) contrast(.88) brightness(1.1); opacity:.62; }
body.cover-only .map-wrap::before { content:""; position:absolute; inset:0; z-index:350; pointer-events:none; background:linear-gradient(rgba(191,200,178,.18),rgba(242,239,232,.12)),repeating-radial-gradient(circle at 28% 37%,rgba(34,34,34,.035) 0 1px,transparent 1px 5px); mix-blend-mode:multiply; opacity:.62; }
body.cover-only .map-wrap::after { content:""; position:absolute; inset:0; z-index:351; pointer-events:none; box-shadow:inset 0 0 130px rgba(102,91,67,.14); }
.cover-pub-marker-wrap { overflow:visible !important; }
.cover-pub-marker { position:relative; display:block; width:21px; height:24px; filter:drop-shadow(1px 2px 0 rgba(242,239,232,.88)); transform:rotate(-1deg); }
.cover-pub-marker::before { content:""; position:absolute; left:3px; top:1px; width:16px; height:15px; border:1.7px solid var(--graphite); border-radius:2px 2px 4px 4px; background:var(--amber); box-shadow:0 0 0 3px rgba(216,173,103,.2); }
.cover-pub-marker::after { content:""; position:absolute; left:2px; top:0; width:2px; height:27px; background:var(--graphite); border-radius:2px; transform:rotate(-3deg); transform-origin:bottom; }
.cover-pub-marker i { position:absolute; z-index:2; left:8px; top:5px; width:7px; height:8px; border:1.4px solid var(--graphite); border-top:0; border-radius:0 0 2px 2px; }
.cover-pub-marker i::before { content:""; position:absolute; right:-4px; top:1px; width:3px; height:4px; border:1.2px solid var(--graphite); border-left:0; border-radius:0 3px 3px 0; }
.cover-pub-marker i::after { content:""; position:absolute; left:0; top:-1px; width:7px; height:2px; background:rgba(242,239,232,.85); border-bottom:1px solid var(--graphite); }
.cover-pub-marker.is-reviewed::before { background:var(--sage); box-shadow:0 0 0 3px rgba(191,200,178,.28); }

@media (min-width: 761px) {
  html, body, #top, .atlas-shell { height: 100%; min-height: 0; }
  .map-wrap, .map { min-height: 0; }
}

@media (max-width: 760px) {
  .masthead { padding: 18px 16px 22px; }
  .brand-row { padding-bottom: 40px; }
  .title-row { display: block; }
  h1 { font-size: 52px; margin-bottom: 25px; }
  .tagline { font-size: clamp(30px, 9.8vw, 38px); }
  .progress-block { width: 100%; }
  .atlas-shell { display: block; }
  .controls { border-right: 0; border-bottom: 1px solid var(--graphite); padding: 20px 16px; gap: 18px; }
  .result-count { margin: 0; }
  .map-wrap, .map { min-height: 62vh; }
}