:root{--ink:#1f3b2c;--paper:#fbf6ea;--stamp:#b8432f;--green:#2f7d4f;--blue:#2b5d8a;--line:#e3d9c2}
*{box-sizing:border-box}
body{margin:0;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
a{color:var(--blue)}
.site-header{padding:18px 20px 14px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;border-bottom:3px dashed var(--line);
 background:repeating-linear-gradient(45deg,#f6efdc 0 12px,#fbf6ea 12px 24px)}
.brand{display:flex;gap:12px;align-items:center}
.logo{font-size:2.4rem;width:60px;height:60px;display:grid;place-items:center;border:3px double var(--green);border-radius:50%;background:#fff;transform:rotate(-8deg)}
h1{margin:0;font-size:1.9rem;letter-spacing:.5px;font-family:Georgia,serif}
.tag{margin:2px 0 0;font-size:.95rem;color:var(--green);font-weight:bold;text-transform:uppercase;letter-spacing:1px}
.intro{flex:1 1 320px;margin:0;font-size:1.02rem;line-height:1.45}
.x-btn{background:#111;color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;font-weight:bold;white-space:nowrap}
.x-btn:hover{background:#333}
.map-wrap{position:relative}
#map{width:100%;height:68vh;min-height:420px;background:#aad3df}
#map .leaflet-tile-pane{filter:saturate(.75) brightness(1.04)}
/* passport stamp markers */
.stamp-icon{background:none;border:none}
.stamp{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:7.5px;font-weight:bold;letter-spacing:.4px;line-height:1.05;text-transform:uppercase;
 color:var(--c);border:3px double var(--c);background:rgba(255,253,245,.93);box-shadow:0 2px 6px rgba(0,0,0,.3);transform:rotate(var(--r));cursor:pointer;transition:transform .15s}
.stamp .f{font-size:17px;display:block;margin-bottom:1px}
.stamp:hover,.stamp.active{transform:rotate(0) scale(1.18)}
.stamp.active{background:#fff6d6}
/* card */
.card{position:absolute;z-index:1000;top:12px;right:12px;width:min(390px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:#fffdf6;border:2px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:16px 18px}
.card .close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:1.6rem;cursor:pointer;color:#666}
.card h3{margin:0 30px 2px 0;font-family:Georgia,serif;font-size:1.45rem}
.card .sci{margin:0;font-style:italic;color:#555}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}
.country{font-weight:bold}.country .fl{font-size:1.4rem;vertical-align:middle}
.stamped{color:var(--stamp);border:2px solid var(--stamp);border-radius:6px;padding:3px 8px;font-weight:bold;font-size:.8rem;letter-spacing:1px;transform:rotate(-4deg);display:inline-block;white-space:nowrap}
.card p.d{line-height:1.5;margin:8px 0}
.gallery .main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#eee;display:block}
.thumbs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.thumbs button{padding:0;border:2px solid transparent;border-radius:6px;cursor:pointer;background:none}
.thumbs button[aria-current=true]{border-color:var(--green)}
.thumbs img{width:58px;height:44px;object-fit:cover;border-radius:4px;display:block}
.credit{font-size:.78rem;color:#555;margin:6px 0 0}
details.credits{font-size:.78rem;color:#555;margin-top:8px}
details.credits li{margin:3px 0}
.see-x{display:inline-block;margin-top:12px;background:#111;color:#fff;padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:bold}
/* grid */
.stamps{padding:22px 20px 10px;max-width:1200px;margin:0 auto}
.stamps h2{font-family:Georgia,serif;margin:0 0 14px}
#count{font-size:1rem;color:var(--green)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.grid button{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#fff;border:2px dashed var(--line);border-radius:12px;padding:10px;position:relative;transition:transform .15s}
.grid button:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--green)}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.grid .n{font-weight:bold;margin-top:8px;display:block}
.grid .s{font-style:italic;font-size:.85rem;color:#555;display:block}
.grid .c{font-size:.85rem;display:block;margin-top:4px}
.grid .mini{position:absolute;top:16px;right:16px;background:rgba(255,253,245,.95);color:var(--stamp);border:2px solid var(--stamp);border-radius:5px;font-size:.65rem;font-weight:bold;padding:2px 5px;transform:rotate(6deg)}
footer{text-align:center;font-size:.85rem;color:#666;padding:20px;border-top:3px dashed var(--line);margin-top:20px}
@media (max-width:640px){
 h1{font-size:1.5rem}.logo{width:48px;height:48px;font-size:1.9rem}
 #map{height:52vh;min-height:340px}
 .card{position:relative;top:0;right:0;width:100%;max-height:none;border-radius:0;border-left:none;border-right:none;box-shadow:none}
 .grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
