@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Libre+Caslon+Display&display=swap');
:root{--paper:#f7f5f0;--ink:#30382f;--muted:#74786b;--line:#dedfd4;--accent:#b4583f;--glass:#ffffff55;--rim:#ffffffa0;--shadow:0 8px 32px #33331f16;color-scheme:light}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink)}body.dark{--paper:#202620;--ink:#f0eee5;--muted:#b0b3a6;--line:#424a40;--accent:#e59c7a;--glass:#27342b66;--rim:#ffffff36;--shadow:0 8px 32px #0003;color-scheme:dark}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button svg{height:19px;width:19px}#map{position:fixed;inset:0;background:#e8e9df}.leaflet-tile-pane{filter:grayscale(.8) saturate(.55) contrast(.85) brightness(1.07)}.dark .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.7) contrast(.85)}.dark #map{background:#252c27}#map-vignette{display:none}.geographic-fog{pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:color-mix(in srgb,var(--paper),transparent 64%);mask-mode:alpha;will-change:transform}.intro{position:fixed;z-index:500;top:40px;left:45px;pointer-events:none;max-width:430px}.intro:before{content:'';position:absolute;z-index:-1;inset:-45px -55px -35px -45px;background:radial-gradient(ellipse at 25% 35%,var(--paper) 15%,color-mix(in srgb,var(--paper),transparent 8%) 42%,transparent 73%)}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:59px;font-weight:400;line-height:1.02;letter-spacing:-1.7px;margin:0}h1 span{color:var(--accent)}.tools{position:fixed;right:28px;top:30px;z-index:600;display:flex;gap:9px}.circle,.glass,.collection,.leaflet-control-zoom a{background:var(--glass)!important;border:1px solid var(--rim)!important;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 1px #fff6,inset 0 -1px 1px #0001,var(--shadow)}.circle{display:grid;place-items:center;border-radius:50%;width:45px;height:45px;font-size:24px}.circle:hover,.glass:hover{background:color-mix(in srgb,var(--glass),var(--paper) 25%)!important}.collection{position:fixed;left:35px;bottom:35px;z-index:600;border-radius:18px;padding:10px 12px;width:88px;height:66px;display:grid;place-items:center}.stack{width:62px;height:42px;position:relative}.stack img{position:absolute;width:38px;height:42px;object-fit:cover;border:3px solid var(--paper);border-radius:5px;transform:rotate(-10deg)}.stack img+img{left:22px;transform:rotate(9deg)}.leaflet-control-zoom{border:0!important;border-radius:22px!important;overflow:hidden;box-shadow:var(--shadow)!important;background:var(--glass)}.leaflet-control-zoom a{color:var(--ink)!important;font-weight:400!important;width:40px!important;height:38px!important;line-height:38px!important;box-shadow:none!important}.leaflet-control-zoom a.leaflet-disabled{opacity:.4}.leaflet-bottom.leaflet-left{left:25px;bottom:120px}.leaflet-bottom.leaflet-right{right:10px;bottom:8px}.leaflet-control-attribution{font-size:9px!important;background:var(--paper)!important;color:var(--muted)!important}.leaflet-control-attribution a{color:var(--muted)!important}.memory-marker{background:none;border:0}.pin{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;position:absolute;left:0;top:0}.pin:before{content:'';height:13px;width:13px;border-radius:50%;background:#ba593e;border:3px solid #fff6e9;box-shadow:0 0 0 6px #ba593e20,0 2px 9px #0004;transition:transform .2s}.pin:hover:before{transform:scale(1.3)}.pin img{display:none}.photos-visible .pin{height:66px;width:66px;left:-11px;top:-11px;border:4px solid var(--paper);border-radius:13px;background:var(--paper);box-shadow:0 4px 14px #0004;transition:transform .2s}.photos-visible .pin:hover{transform:translateY(-4px) rotate(-2deg)}.photos-visible .pin img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.photos-visible .pin:before{position:absolute;width:8px;height:8px;border:2px solid var(--paper);bottom:-9px;left:25px;box-shadow:none}.pin.active{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}#panel{position:fixed;z-index:900;inset:0 0 0 auto;width:50vw;background:var(--paper);box-shadow:-12px 0 45px #0001;overflow-y:auto;overscroll-behavior:contain;padding:24px 38px 45px;animation:slide .22s ease-out}.panel-top{display:flex;justify-content:flex-end;margin-bottom:12px}.close{width:38px;height:38px;font-size:26px}#panel h2{font-family:'Libre Caslon Display',Georgia,serif;font-size:43px;font-weight:400;line-height:1.12;margin:10px 0 24px}#panel h3{font-size:18px;font-weight:500;margin:25px 0 10px}.story{font-size:14px;color:var(--muted);line-height:1.8;white-space:pre-wrap;margin:0 0 25px}.group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}.group-card{border:0;padding:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:12px;min-width:0}.group-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;transition:transform .2s}.group-card:hover img{transform:translateY(-3px)}.group-card strong{font-size:14px;font-weight:500}.group-card small{font-size:12px;color:var(--muted);display:block;line-height:1.6;margin-top:7px;white-space:pre-wrap}.back{background:none;border:0;padding:0;margin:0 0 12px;font-size:12px;color:var(--muted);text-align:left}.hero-photo{display:block;border:0;padding:0;background:none;width:100%;border-radius:12px;overflow:hidden}.hero-photo img{width:100%;max-height:62dvh;object-fit:contain;display:block;background:color-mix(in srgb,var(--ink),transparent 96%)}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0}.gallery-controls>.glass{border-radius:50%;width:38px;height:38px;flex:none;font-size:19px}.photo-strip{display:flex;gap:8px;max-width:75%;overflow:auto;padding:5px}.mini-photo{padding:0;border:2px solid transparent;flex:none;background:none;border-radius:8px;width:46px;height:46px}.mini-photo img{width:100%;height:100%;object-fit:cover;border-radius:5px}.mini-photo.selected{border-color:var(--accent)}body.panel-open #map,body.panel-open #map-vignette{right:50vw}body.panel-open .intro,body.panel-open .collection,body.panel-open .tools{display:none}#shade{position:fixed;z-index:850;inset:0;background:#0004}dialog{border:0;padding:25px;background:#121510f5;color:#fff;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;margin:0}dialog::backdrop{background:#121510}dialog img{width:100%;height:calc(100% - 75px);object-fit:contain}dialog p{text-align:center;font-size:12px;line-height:1.5}dialog .circle{position:absolute;right:20px;top:20px;color:#fff}#map-status,.nojs{position:fixed;z-index:1100;left:50%;top:20px;transform:translateX(-50%);padding:14px 22px;background:var(--paper);box-shadow:var(--shadow);border-radius:12px;max-width:90vw;font-size:13px}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}@keyframes slide{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}@media(max-width:1000px) and (min-width:761px){#panel{padding:22px}.group-grid{grid-template-columns:1fr}h1{font-size:48px}.intro{left:28px}}@media(max-width:760px){.intro{top:33px;left:23px;max-width:290px}h1{font-size:42px;letter-spacing:-1px}.tools{right:17px;top:27px;flex-direction:column}.circle{width:38px;height:38px}.collection{left:20px;bottom:calc(30px + env(safe-area-inset-bottom))}.leaflet-bottom.leaflet-left{left:15px;bottom:112px}#panel{width:100%;inset:7dvh 0 0;border-radius:22px 22px 0 0;padding:18px 23px calc(30px + env(safe-area-inset-bottom));animation:rise .22s ease-out}#panel:before{content:'';display:block;width:35px;height:4px;background:var(--line);border-radius:3px;margin:-7px auto 13px}.panel-top{margin-bottom:14px}#panel h2{font-size:35px}.group-grid{gap:23px 16px}.group-card strong{font-size:12px}body.panel-open #map,body.panel-open #map-vignette{right:0}.hero-photo img{max-height:52dvh}.gallery-controls{gap:10px}@keyframes rise{from{transform:translateY(50px);opacity:0}to{transform:none;opacity:1}}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
/* Vector map: one composited canvas; no per-tile CSS filters or blur surfaces. */
.memory-marker{width:44px;height:44px;cursor:pointer}.maplibregl-canvas:focus{outline:none}.maplibregl-ctrl-bottom-left{left:25px;bottom:120px}.maplibregl-ctrl-bottom-right{right:10px;bottom:8px}.maplibregl-ctrl-group{border:1px solid var(--rim);border-radius:22px;overflow:hidden;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 1px #fff6,var(--shadow)}.maplibregl-ctrl-group button{width:40px;height:38px;background:transparent!important;border-color:var(--rim)!important}.maplibregl-ctrl-group button:hover{background:color-mix(in srgb,var(--glass),var(--paper) 25%)!important}.dark .maplibregl-ctrl-icon{filter:invert(1)}.maplibregl-ctrl-attrib{font-size:9px!important;line-height:14px!important;background:var(--paper)!important;color:var(--muted)!important}.maplibregl-ctrl-attrib a{color:var(--muted)!important}.back-label{font-size:12px;color:var(--muted);margin:0 0 12px}.location-story{margin-bottom:18px!important}.maplibregl-marker{will-change:transform}.mini-photo img,.pin img{background:color-mix(in srgb,var(--paper),var(--ink) 6%)}
@media(max-width:760px){.maplibregl-ctrl-bottom-left{left:15px;bottom:112px}}
/* Keep the sheet opaque while it enters; photographs should never ghost over the map. */
@keyframes slide{from{transform:translateX(25px)}to{transform:none}}
@keyframes rise{from{transform:translateY(50px)}to{transform:none}}

.hero-video{display:block;width:100%;max-height:62dvh;border-radius:12px;background:#121510}@media(max-width:760px){.hero-video{max-height:52dvh}}

.memory-date{display:block;font-size:12px;color:var(--muted);margin:-12px 0 22px}
/* Persistent tour controls share the map's glass treatment. */
#tour{position:fixed;z-index:1000;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);width:184px}
.tour-buttons{display:flex;align-items:center;justify-content:space-between;border-radius:999px;padding:4px 8px}
.tour-buttons button{display:grid;place-items:center;width:48px;height:46px;border:0;border-radius:50%;background:transparent}
.tour-buttons button:hover{background:color-mix(in srgb,var(--paper),transparent 55%)}
.tour-buttons button:disabled{opacity:.35;cursor:default}
.tour-buttons button svg{width:21px;height:21px}
#tour-play{color:var(--accent)}
.tour-progress{height:3px;margin:0 14px 10px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--accent),transparent 78%)}
#tour-fill{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;will-change:transform}
body.panel-open #tour{left:75%}
#panel{padding-bottom:130px}
@media(max-width:760px){#tour,body.panel-open #tour{left:50%;bottom:calc(23px + env(safe-area-inset-bottom))}#panel{padding-bottom:calc(125px + env(safe-area-inset-bottom))}}
/* Leave room for the thumbnail strip above the fixed playback controls. */
#panel:has(.gallery-controls,h3) .hero-photo img,#panel:has(.gallery-controls,h3) .hero-video{max-height:min(56dvh,calc(100dvh - 380px))}
@media(max-width:760px){#panel:has(.gallery-controls,h3) .hero-photo img,#panel:has(.gallery-controls,h3) .hero-video{max-height:min(48dvh,calc(100dvh - 420px))}}

/* Location context belongs to the selected map thumbnail. */
.pin-label{display:none;position:absolute;top:calc(100% + 17px);left:50%;transform:translateX(-50%);width:max-content;max-width:220px;padding:9px 13px;border-radius:12px;background:color-mix(in srgb,var(--paper),transparent 10%);border:1px solid var(--rim);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:center;pointer-events:none;font-size:12px;line-height:1.4}
.pin-label strong{font-weight:500}.pin-label>span{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.pin.active .pin-label{display:block}.memory-marker.selected-location{z-index:10}
#panel h2{font-size:clamp(28px,3vw,43px);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:20px}
#panel .memory-date{margin:0 0 22px}.photo-story{color:var(--ink)}

/* Per-browser visibility preferences. */
.collection-view{display:flex;align-items:center;justify-content:center;padding:0 16px;min-height:38px;border-radius:999px;color:var(--ink);font-size:12px;text-decoration:none;white-space:nowrap}
.visibility-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 16px;border-radius:999px;font-size:12px;margin:-8px 0 18px}
.all-photos-view #photo-visibility{color:var(--accent)}
@media(max-width:760px){.collection-view{padding:8px 12px}.tools{align-items:flex-end}}
/* Reserve space for the visibility action above the image and the tour below. */
#panel:has(.gallery-controls) .hero-photo img,#panel:has(.gallery-controls) .hero-video{max-height:min(52dvh,calc(100dvh - 430px))}
@media(max-width:760px){#panel:has(.gallery-controls) .hero-photo img,#panel:has(.gallery-controls) .hero-video{max-height:min(44dvh,calc(100dvh - 470px))}}

/* Count the currently available collection beside its photo stack. */
.collection{display:flex;align-items:center;justify-content:center;gap:9px;width:88px;height:46px;padding:8px 11px;border-radius:13px}
.photo-count{font-size:14px;font-weight:450;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1;color:var(--muted);text-align:center}
.collection .stack{flex:none;width:34px;height:28px}
.collection .stack img{width:24px;height:28px;border-width:2px;border-radius:4px;transform:rotate(-7deg)}
.collection .stack img+img{left:12px;transform:rotate(7deg)}