:root {
  --ink: #17251f;
  --pine: #24392f;
  --moss: #50745c;
  --fern: #86a672;
  --paper: #f4f0e6;
  --sand: #e5ddcd;
  --rust: #aa5b3c;
  --mist: #dbe4d6;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.masthead { display: flex; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4.5rem) max(1.5rem, calc((100vw - 1240px) / 2)); background: var(--pine); color: #fffdf7; }
.eyebrow { margin: 0 0 .4rem; color: var(--fern); text-transform: uppercase; letter-spacing: .13em; font: 700 .68rem/1.2 system-ui, sans-serif; }
h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.7rem); font-weight: 400; line-height: .95; letter-spacing: -.055em; }
.lede { margin: 1rem 0 0; color: #dfe8da; font-size: 1.12rem; }
.progress { align-self: end; min-width: 152px; padding-bottom: .4rem; font-family: system-ui, sans-serif; }
.progress strong { display: block; color: #fffdf7; font: 400 2.45rem/.9 Georgia, serif; }
.progress span { display:block; margin-top: .35rem; color: #dfe8da; font-size: .76rem; }
.progress-track { height: 5px; margin-top: .75rem; overflow: hidden; background: #587061; border-radius: 99px; }
.progress-track i { display: block; height:100%; width:0; background: var(--fern); transition: width .25s ease; }
main { max-width: 1240px; margin: 0 auto; padding: 1.25rem max(1.1rem, 2vw) 2.5rem; }
.map-panel { position: relative; height: clamp(300px, 48vw, 520px); overflow: hidden; border: 1px solid #cfc5b2; border-radius: 4px; box-shadow: 0 10px 32px #25342914; }
#map { width:100%; height:100%; background: var(--mist); }
.map-key { position: absolute; z-index: 500; right: 12px; bottom: 2px; margin:0; padding: .48rem .65rem; border-radius: 2px; background: #fffdf7e8; font: .7rem system-ui, sans-serif; box-shadow: 0 1px 4px #0002; }
.key-dot { display:inline-block; width:8px; height:8px; margin: 0 .25rem 0 .65rem; border: 1px solid #537262; border-radius:100%; background: #fffdf7; }.key-dot:first-child { margin-left:0; }.key-dot.visited { background: var(--rust); border-color: var(--rust); }
.list-panel { margin-top: 1.7rem; }
.toolbar { display:flex; align-items:center; gap: .65rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid #d6cdbd; }
.search { flex: 1 1 200px; }.search input { width:100%; padding: .66rem .8rem; border:1px solid #c8bfaf; border-radius:3px; outline-color:var(--moss); background:#fffdf7; }
.filters { display:flex; border: 1px solid #c8bfaf; border-radius:3px; overflow:hidden; }.filter { padding: .62rem .65rem; border: 0; border-right:1px solid #c8bfaf; color:var(--pine); background:#fffdf7; font-size:.78rem; }.filter:last-child{border:0}.filter.active { color:#fffdf7; background:var(--pine); }.filter span { opacity:.7; }
.subtle-button, .save-button { padding: .62rem .75rem; border:1px solid #bdb39f; border-radius:3px; color:var(--pine); background:transparent; font-size:.78rem; text-decoration:none; }.subtle-button:hover { background: var(--sand); }.import-label { display:inline-block; }
.park-list { display:grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding-top: 1rem; }
.park-card { position:relative; min-height: 105px; padding: 1rem 3.5rem 1rem 1rem; border: 1px solid #d6cdbd; border-radius:3px; background:#fffdf7; text-align:left; transition: border .15s, transform .15s; }.park-card:hover { border-color:var(--moss); transform: translateY(-1px); }.park-card.is-visited { border-left: 4px solid var(--rust); }.park-card h3 { margin: 0 0 .38rem; font-size: 1.04rem; font-weight: 400; line-height: 1.08; }.park-card p { margin:0; color:#6c756d; font: .72rem system-ui, sans-serif; }.park-card .status { position:absolute; top:1rem; right:.8rem; color:#68756a; font: .7rem system-ui,sans-serif; }.park-card.is-visited .status { color:var(--rust); }.park-card .note-preview { margin-top:.65rem; color:#786957; font-style:italic; }
.empty { padding: 2rem 0; color:#69736a; }
#parkDialog { width:min(460px, calc(100vw - 2rem)); padding:0; border:0; border-radius:5px; box-shadow:0 24px 80px #17251f55; color:var(--ink); background:#fffdf7; }#parkDialog::backdrop { background:#17251f99; }#parkForm { position:relative; padding: 2rem; }#parkForm h2 { margin:.1rem 0 1.25rem; font-size: 2rem; font-weight:400; }.close { position:absolute; top:.75rem; right:1rem; padding:.1rem .4rem; border:0; color:var(--pine); background:transparent; font-size:1.7rem; }.checkline { display:flex; align-items:center; gap:.6rem; padding: .75rem 0; border-top:1px solid var(--sand); border-bottom:1px solid var(--sand); font-family:system-ui,sans-serif; font-size:.9rem; }.checkline input { width:1.1rem; height:1.1rem; accent-color:var(--rust); }.visit-details { display:grid; gap: .85rem; padding-top:1rem; }.visit-details label { display:grid; gap:.35rem; font:.78rem system-ui,sans-serif; }.visit-details input,.visit-details textarea { padding:.58rem .65rem; border:1px solid #c8bfaf; border-radius:3px; resize:vertical; background:#fffdf7; }.visit-details.is-hidden { display:none; }.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; padding-top:1.35rem; }.save-button { color:#fffdf7; border-color:var(--pine); background:var(--pine); }.save-button:hover { background:#17251f; }
.leaflet-popup-content-wrapper { border-radius:3px; font-family:Georgia,serif; }.popup-name { margin:0 0 .2rem; font-size:1rem; }.popup-state { margin:0 0 .6rem; color:#607065; font: .7rem system-ui,sans-serif; }.popup-open { padding: .35rem .5rem; border:1px solid #bdb39f; border-radius:2px; color:var(--pine); background:#fffdf7; font:.72rem system-ui,sans-serif; }.leaflet-container { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }footer { padding: 1.5rem; border-top:1px solid #d6cdbd; color:#68756a; text-align:center; font:.72rem system-ui,sans-serif; }
@media (max-width: 760px) { .masthead { display:block; }.progress { margin-top:2rem; }.park-list { grid-template-columns: repeat(2, 1fr); }.toolbar { align-items:stretch; }.filters { width:100%; }.filter { flex:1; }.subtle-button { flex:1; text-align:center; }.map-panel { margin: 0 -1.1rem; border-radius:0; } }
@media (max-width: 430px) { .park-list { grid-template-columns:1fr; } }