:root{
  --paper:#f3ede2; --paper2:#ece4d5; --card:#fbf7ef;
  --ink:#2a251f; --ink2:#6b6256; --ink3:#9b9182;
  --line:#e0d7c6; --accent:#b0673a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5}

/* Wordmark */
.wordmark{font-family:var(--serif);font-weight:600;letter-spacing:.18em;color:var(--ink)}
.tagline{font-family:var(--serif);color:var(--ink2)}

/* Gate */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--paper);z-index:10;padding:24px}
.gate-card{max-width:340px;width:100%;text-align:center}
.gate .wordmark{font-size:42px;letter-spacing:.22em}
.rule{width:34px;height:2px;background:var(--accent);margin:18px auto}
.gate .tagline{font-size:19px;margin:0 0 26px}
#gate-form{display:flex;flex-direction:column;gap:10px}
#gate-pass{font-family:var(--sans);font-size:16px;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);text-align:center}
#gate-pass:focus{outline:none;border-color:var(--accent)}
#gate-form button{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:13px;border:none;border-radius:12px;background:var(--ink);color:var(--paper);cursor:pointer}
.gate-error{color:var(--accent);font-size:13px;margin-top:14px}
.gate-foot{color:var(--ink3);font-size:12px;letter-spacing:.04em;margin-top:30px}

/* App */
main{max-width:760px;margin:0 auto;padding:26px 20px 60px}
.head{text-align:center;padding:14px 0 22px}
.head .wordmark.sm{font-size:26px;letter-spacing:.24em}
.head .tagline.sm{font-size:13px;color:var(--ink3);margin-top:8px;letter-spacing:.02em}

.status{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-bottom:18px}
.status-loading{color:var(--ink3);text-align:center}
.status .big{font-family:var(--serif);font-size:23px;color:var(--ink)}
.status .sub{font-size:13px;color:var(--ink2);margin-top:8px;letter-spacing:.02em}
.status .bar{height:6px;background:var(--paper2);border-radius:4px;margin-top:16px;overflow:hidden}
.status .bar > i{display:block;height:100%;background:var(--accent);border-radius:4px}
.status .feel{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

#map{height:340px;border-radius:16px;border:1px solid var(--line);overflow:hidden;margin-bottom:22px}
.leaflet-container{background:var(--paper2);font-family:var(--sans)}
.pos-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--paper);box-shadow:0 0 0 2px var(--accent)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.shot{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shot img{width:100%;height:150px;object-fit:cover;display:block}
.shot .cap{padding:9px 12px;font-size:12px;color:var(--ink2);display:flex;justify-content:space-between}
.shot .cap .d{color:var(--ink3)}

.empty{text-align:center;color:var(--ink2);font-family:var(--serif);font-size:18px;padding:30px 0}
.foot{text-align:center;color:var(--ink3);font-size:12px;letter-spacing:.04em;margin-top:34px}

@media (max-width:480px){
  #map{height:300px}
  .gallery{grid-template-columns:repeat(2,1fr)}
}