:root{
  --accent:#f45d88;
  --accent-soft:#fff1f5;
  --text:#202024;
  --muted:#92929a;
  --line:#e9e9ed;
  --bg:#fff;
  --soft:#f5f5f4;
  --nav-h:68px;
  --top-h:68px;
  --timeline-h:62px;
  font-family:"DIN Neuzeit Grotesk","Neuzeit Grotesk","DIN Neuzeit","Avenir Next","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:#fff;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;font-weight:400}
body.viewer-open{overflow:hidden}
button,input,select{font:inherit}
button{border:0;background:none;color:inherit}
a{text-decoration:none;color:inherit}
.shell{width:100%;min-height:100vh;padding-bottom:var(--nav-h);background:#fff}

/* Header */
.top{height:var(--top-h);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#fff;position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line)}
.brand{font-size:54px;line-height:1;letter-spacing:-2.8px;font-weight:500;cursor:pointer;padding:0}
.topactions{position:relative}.downloadBtn{display:flex;align-items:center;gap:7px;font-size:14px;color:#5d5d63;padding:9px 11px;border-radius:18px;cursor:pointer}.downloadBtn:hover{background:#f6f6f7}.smallicon{width:18px;height:18px}
.downloadmenu{position:fixed;top:68px;right:18px;width:235px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(20,20,20,.14);z-index:100}.downloadtitle{font-size:13px;color:var(--muted);padding:7px 11px 6px}.downloadmenu button{width:100%;text-align:left;padding:12px 11px;border-radius:11px;cursor:pointer;font-size:15px}.downloadmenu button:hover{background:var(--accent-soft)}

/* FamilyAlbum-style navigation: one year row + one month row. */
.timeline-nav{position:sticky;top:var(--top-h);z-index:70;background:#fff;border-bottom:1px solid var(--line)}
.yearbar,.monthbar{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.yearbar::-webkit-scrollbar,.monthbar::-webkit-scrollbar{display:none}
.yearbar{gap:24px;padding:3px 18px 1px;min-height:29px}.yearbtn{flex:0 0 auto;color:#b3b3bb;font-size:17px;line-height:1;padding:1px 0 3px;cursor:pointer;transition:color .18s ease,font-size .18s ease}.yearbtn.active{color:var(--text);font-size:21px;font-weight:500}
.monthbar{gap:28px;padding:2px 18px 4px;min-height:33px}.monthbtn{flex:0 0 auto;color:#8d8d95;font-size:17px;line-height:1;padding:2px 0 5px;position:relative;cursor:pointer;transition:color .18s ease}.monthbtn.active{color:var(--accent);font-weight:500}.monthbtn.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:3px;background:var(--accent)}

/* One month at a time. */
.monthViewport{width:100%;min-height:calc(100vh - var(--top-h) - var(--timeline-h));touch-action:pan-y}
.monthsection{padding:22px 14px 60px;scroll-margin-top:calc(var(--top-h) + var(--timeline-h));animation:monthIn .32s cubic-bezier(.2,.7,.2,1) both}
.monthcontent{width:min(1280px,100%);margin:0 auto}
.monthLayout{width:100%}
.thumb{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--soft);cursor:pointer;padding:0;border:1px solid #e6e6e9;border-radius:0}
.thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease;opacity:1}.thumb img.reveal{opacity:0}.thumb img.revealed{opacity:1}.thumb:hover img{transform:scale(1.012)}
.heroThumb{width:100%;display:block;position:relative}
.heroOverlay{position:absolute;left:0;bottom:0;right:0;padding:22px 24px 20px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.55));display:flex;flex-direction:column;align-items:flex-start}.heroOverlay strong{font-size:30px;font-weight:500;line-height:1.05}.heroOverlay small{font-size:15px;margin-top:4px;opacity:.9}
.threeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1px}
.featureGrid{display:grid;grid-template-columns:2fr 1fr;gap:1px;margin-top:1px}.featureMain .thumb{width:100%;height:100%}.featureSide{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:1px}
.moreGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:1px}
.playbadge{position:absolute;right:12px;bottom:12px;width:31px;height:31px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.16)}.playbadge svg{width:13px;height:13px;margin-left:2px;color:var(--accent)}

/* Date overlay shown while moving through a month's photos. */
.dateToggle{position:sticky;top:10px;margin-left:auto;margin-right:14px;width:max-content;z-index:35;opacity:0;pointer-events:none;background:rgba(32,32,36,.88);color:#fff;padding:7px 13px;border-radius:18px;font-size:13px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.10);transition:opacity .18s ease,transform .18s ease;transform:translateY(-5px);backdrop-filter:blur(8px)}
.dateToggle.visible{opacity:1;transform:translateY(0)}

/* Bottom navigation */
.bottom{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);display:flex;align-items:stretch;background:#fff;border-top:1px solid var(--line);z-index:90;padding-bottom:env(safe-area-inset-bottom)}.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9a9aa0;font-size:12px;cursor:pointer}.navbtn.active{color:var(--accent)}.navicon{width:24px;height:24px}

/* Fullscreen viewer */
.viewer{position:fixed;inset:0;background:#fff;z-index:120;display:flex;flex-direction:column}.viewerbar{min-height:64px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}.viewerTitle{text-align:center;font-size:14px;color:#67676d}.vieweractions{display:flex;gap:7px}.vbtn{border:1px solid #ddd;border-radius:20px;background:#fff;color:var(--text);padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px}.vbtn svg{width:15px;height:15px}
.viewerMediaWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#fff;touch-action:pan-y}.viewerMedia{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}video.viewerMedia{width:auto;height:auto;max-width:100%;max-height:100%}
.viewerArrow{position:absolute;z-index:125;top:50%;transform:translateY(-50%);width:28px;height:48px;padding:0;background:transparent;border:0;color:#777;display:grid;place-items:center;cursor:pointer;opacity:.62}.viewerArrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.viewerPrev{left:12px}.viewerNext{right:12px}.viewerArrow:hover{opacity:.9}
.comments{background:#fff;max-height:44vh;overflow:auto;padding:16px;border-top:1px solid var(--line);border-radius:18px 18px 0 0}.comment{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.4}.comment small{display:block;color:var(--muted);margin-top:3px}.commentform{display:flex;gap:8px;margin-top:14px}.commentform input{flex:1;border:1px solid #ddd;border-radius:20px;padding:10px 14px;min-width:0}.commentform button{background:var(--accent);color:#fff;border-radius:20px;padding:10px 16px;cursor:pointer}

/* Map: intentionally light/minimal, with photo thumbnails as markers. */
.mapPage{height:calc(100vh - var(--top-h) - var(--nav-h));min-height:520px;position:relative;background:#f2f3f2}.leafletmap{position:absolute;inset:0;filter:grayscale(.9) brightness(1.06) contrast(.92)}
.mapClose{position:absolute;z-index:600;top:16px;right:18px;width:40px;height:40px;border:1px solid #dedee1;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;color:#666;box-shadow:0 6px 18px rgba(20,20,20,.08);cursor:pointer}.mapClose svg{width:20px;height:20px}
.mapClusterWrap{background:transparent;border:0}.mapCluster{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--text);display:grid;place-items:center;font-size:12px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.photoMarkerWrap{background:transparent;border:0}.photoMarker{width:54px;height:54px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}.photoMarker img{width:100%;height:100%;object-fit:cover;display:block}.mappopup img{width:176px;height:112px;object-fit:cover;border-radius:8px;display:block;background:#f5f5f5}.mappopupmeta{display:flex;justify-content:space-between;align-items:center;padding-top:8px;font-size:12px;color:#777}.mappopupmeta button{color:var(--accent);cursor:pointer;font-size:12px}.mapError{display:grid;place-items:center;height:100%;color:#777}

.empty{min-height:calc(100vh - var(--top-h) - var(--nav-h));display:grid;place-items:center;color:var(--muted);padding:30px}
.admin{padding:30px 22px}.adminIntro span{font-size:13px;color:var(--accent)}.adminIntro h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:4px 0 8px}.adminIntro p{color:var(--muted);font-size:14px;margin:0 0 24px}.card{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.025);margin-bottom:16px}.admin h2{font-size:20px;font-weight:500;margin:0 0 15px}.userform{display:grid;grid-template-columns:1fr 1fr 1fr .9fr auto;gap:8px;margin-bottom:18px}.userform input,.userform select{border:1px solid #ddd;border-radius:13px;padding:11px 12px;min-width:0;background:#fff}.userform button{background:var(--accent);color:#fff;border-radius:13px;padding:11px 15px;cursor:pointer}.admin table{width:100%;border-collapse:collapse}.admin th,.admin td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px}.admin table button{border:1px solid #ddd;border-radius:16px;padding:7px 11px;color:#555;cursor:pointer}
.login{min-height:100vh;display:grid;place-items:center;padding:30px;background:#fff}.loginbox{width:min(360px,100%);text-align:center}.loginbrand{font-size:52px;letter-spacing:-2px}.loginrule{height:3px;background:var(--accent);width:42px;margin:18px auto 30px;border-radius:4px}.loginbox input{display:block;width:100%;padding:14px 15px;border:1px solid #ddd;border-radius:13px;margin:10px 0}.loginbox button{width:100%;padding:14px;background:var(--accent);color:#fff;border-radius:13px;margin-top:6px;cursor:pointer}.error{color:#c33;margin-top:12px;font-size:13px}

@keyframes monthIn{from{opacity:.82;transform:translateY(5px)}to{opacity:1;transform:none}}
.month-slide-left{animation:slideLeft .22s ease both}.month-slide-right{animation:slideRight .22s ease both}@keyframes slideLeft{from{opacity:.5;transform:translateX(18px)}to{opacity:1;transform:none}}@keyframes slideRight{from{opacity:.5;transform:translateX(-18px)}to{opacity:1;transform:none}}

@media(min-width:700px){
  :root{--top-h:76px;--nav-h:78px;--timeline-h:70px}.top{padding:0 24px}.brand{font-size:54px}.yearbar{padding-left:24px;padding-right:40px}.monthbar{padding-left:24px;padding-right:40px}.monthsection{padding-left:24px;padding-right:24px}.bottom{left:50%;right:auto;transform:translateX(-50%);width:min(520px,100%);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0}.admin{max-width:1100px;margin:auto;padding:40px}.mapPage{height:calc(100vh - var(--top-h) - 20px)}
}
@media(max-width:600px){
  :root{--top-h:64px;--timeline-h:66px}.top{padding:0 10px}.brand{font-size:39px;letter-spacing:-2px}.downloadBtn span{display:none}.downloadBtn{padding:7px}.yearbar{gap:18px;padding:4px 10px 2px;min-height:29px}.yearbtn{font-size:15px;padding-bottom:2px}.yearbtn.active{font-size:19px}.monthbar{gap:20px;padding:3px 10px 6px;min-height:37px}.monthbtn{font-size:17px;padding-bottom:4px}.monthsection{padding:18px 10px 48px}.heroOverlay{padding:18px 17px 16px}.heroOverlay strong{font-size:26px}.heroOverlay small{font-size:14px}.threeGrid{gap:1px}.featureGrid{grid-template-columns:2fr 1fr}.moreGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.bottom{height:68px}.mapPage{height:calc(100vh - var(--top-h) - 68px);min-height:0}.mapClose{top:12px;right:12px}.dateToggle{top:10px;right:16px;font-size:12px;padding:6px 11px}.userform{grid-template-columns:1fr 1fr}.userform button{grid-column:1/-1}.admin{padding:24px 16px 30px;overflow:auto}.admin table{min-width:640px}.card{overflow:auto}.viewerbar{grid-template-columns:auto 1fr auto;padding:9px 9px}.viewerTitle{font-size:13px}.vbtn{padding:7px 9px}.vbtn span{display:none}.vieweractions{gap:5px}.viewerMediaWrap{padding:8px}.viewerArrow{width:24px;height:42px}.viewerArrow svg{width:18px;height:18px}.viewerPrev{left:7px}.viewerNext{right:7px}
}
@media(max-width:380px){.monthbar{gap:20px}.monthbtn{font-size:18px}.yearbar{gap:16px}.threeGrid{gap:1px}.brand{font-size:40px}}

/* Refined motion: quiet, editorial and non-distracting. */
@keyframes monthIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes monthSlideLeft{from{opacity:.55;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes monthSlideRight{from{opacity:.55;transform:translateX(-16px)}to{opacity:1;transform:none}}
.month-slide-left{animation:monthSlideLeft .28s cubic-bezier(.2,.7,.2,1)}
.month-slide-right{animation:monthSlideRight .28s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.monthsection,.month-slide-left,.month-slide-right{animation:none!important}.thumb img{transition:none!important}}


/* Admin upload */
.uploadBtn{display:flex;align-items:center;gap:6px;color:var(--text);padding:8px 10px;cursor:pointer}.uploadBtn:hover,.downloadBtn:hover{color:var(--accent)}
.uploadModal{position:fixed;inset:0;z-index:150;background:rgba(20,20,24,.28);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}
.uploadPanel{width:min(620px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 20px 70px rgba(0,0,0,.16);animation:uploadIn .22s ease both}
.uploadHead{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.uploadEyebrow{font-size:11px;letter-spacing:.16em;color:var(--muted)}.uploadHead h2{margin:4px 0 7px;font-size:25px;font-weight:500;letter-spacing:-.4px}.uploadHead p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:480px}.uploadClose{border:0;background:transparent;color:#777;width:32px;height:32px;display:grid;place-items:center;cursor:pointer}.uploadClose svg{width:18px;height:18px}
.uploadDrop{margin-top:22px;border:1px dashed #cfcfd3;border-radius:16px;min-height:170px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}.uploadDrop:hover,.uploadDrop.dragover{border-color:var(--accent);background:#faf8ff}.uploadDrop input{display:none}.uploadDropIcon{font-size:30px;line-height:1;color:var(--accent);font-weight:300}.uploadDrop strong{font-size:15px;font-weight:500}.uploadDrop small{font-size:12px;color:var(--muted)}
.uploadSelection{max-height:150px;overflow:auto;margin-top:12px;border-top:1px solid var(--line)}.uploadSelection>div{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px}.uploadSelection small{color:var(--muted);white-space:nowrap}.uploadHint{display:block;color:var(--muted);font-size:12px;padding:10px 2px}.uploadProgress{min-height:20px;margin-top:12px;font-size:13px}.uploadStatus{color:var(--muted);margin-bottom:8px}.uploadSpinner{width:18px;height:18px;border:1.5px solid #ddd;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.uploadSuccess,.uploadError{display:flex;flex-direction:column;gap:4px}.uploadSuccess strong{font-weight:500}.uploadSuccess span{color:var(--muted);font-size:12px}.uploadError,.uploadError span{color:#b33;font-size:12px}.uploadError strong{font-size:14px}.uploadErrorList{margin-top:8px;max-height:100px;overflow:auto}.uploadErrorList div{padding:5px 0;border-top:1px solid #eee;display:flex;flex-direction:column;gap:2px}.uploadActions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.uploadCancel,.uploadSubmit{border-radius:18px;padding:9px 15px;cursor:pointer}.uploadCancel{border:1px solid #ddd;background:#fff;color:#555}.uploadSubmit{border:0;background:var(--accent);color:#fff}.uploadSubmit:disabled{opacity:.45;cursor:not-allowed}@keyframes spin{to{transform:rotate(360deg)}}@keyframes uploadIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:600px){.uploadModal{padding:10px;align-items:end}.uploadPanel{border-radius:20px 20px 16px 16px;padding:20px}.uploadDrop{min-height:145px}.uploadHead h2{font-size:22px}.uploadBtn span{display:none}.uploadBtn{padding:7px}}