:root{color-scheme:light;--paper:#f6f4e9;--ink:#374d3e;--muted:#7d8272;--green:#58745b;--line:#dedfce}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Avenir Next",Avenir,system-ui,sans-serif;background-image:radial-gradient(#63754b0c .8px,transparent .8px);background-size:6px 6px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bd8c4a;outline-offset:4px}button{transition:transform .15s,background .15s}button:hover{transform:translateY(-2px)}button:disabled{opacity:.35;cursor:default;transform:none}[hidden]{display:none!important}.header{max-width:1120px;margin:auto;padding:29px 40px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font:700 25px Georgia,serif}.brand-icon{font:38px Georgia;color:#79916b;background:#e6ead9;border-radius:15px;width:49px;height:49px;text-align:center}.brand-sub{display:block;font:600 9px system-ui;letter-spacing:2px;margin-top:5px}.local-badge{font-size:11px;background:#e9eddf;border:1px solid #dce3d0;border-radius:30px;padding:9px 13px;color:#6a7c60}.local-badge i{display:inline-block;width:6px;height:6px;background:#819671;border-radius:100%;margin-right:6px}main{max-width:960px;margin:auto;padding:0 40px}.welcome{position:relative;min-height:345px;padding-top:42px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#899579}h1{font:normal clamp(46px,6vw,66px)/1.08 Georgia,serif;letter-spacing:-2px;margin:19px 0}h1 em{color:#81936c;font-style:italic}p{color:var(--muted);font-size:14px;line-height:1.8}.welcome p{margin:0}.postcards{position:absolute;right:28px;top:36px;width:350px;height:290px}.card{position:absolute;width:185px;padding:10px 10px 0;background:#fffdf5;box-shadow:0 6px 15px #51483214;border:1px solid #e9e5d6}.card svg{width:100%;display:block}.card span{display:block;text-align:center;font:italic 14px Georgia;padding:13px 0 16px;color:#8c826d}.back{left:3px;top:6px;transform:rotate(-13deg)}.front{right:0;top:43px;transform:rotate(11deg)}.sticker{position:absolute;bottom:2px;left:69px;background:#e4e8c8;border:1px dashed #a5ad7d;border-radius:50%;width:83px;height:83px;display:flex;flex-direction:column;justify-content:center;text-align:center;font:italic 13px/1.5 Georgia;transform:rotate(-12deg)}.spark{position:absolute;color:#c0a05f;font-size:35px}.s1{right:-14px;top:-10px}.s2{left:-25px;bottom:46px;font-size:23px}.selection-panel{background:#fffdf6b8;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 5px 0 #e7e6d640}#empty{text-align:center;border:1px dashed #d7dbc6;border-radius:13px;padding:24px 12px}.flower{font-size:33px;color:#b3b987}h2{font:normal 25px Georgia;margin:12px 0 8px}#empty p{font-size:12px;margin:0 0 20px}.primary,.secondary{border-radius:12px;padding:13px 22px;font-size:12px;font-weight:650;min-height:44px}.primary{background:var(--green);color:#fffdf3;border:1px solid #4c684f;box-shadow:0 3px 0 #3b513e}.primary span{font-size:17px;margin:0 8px}.secondary{background:#f3f2e6;border:1px solid #d9decd;color:var(--ink)}.hint{font-size:10px;color:#969a87;margin-top:16px}.reassurance{display:flex;justify-content:center;gap:30px;padding:25px 0;font-size:10px;color:#8d9380}footer{border-top:1px solid #e3e4d6;margin-top:18px;padding:22px 0;text-align:center;font:italic 12px Georgia;color:#959b88}footer span{color:#a3b18a;margin-left:10px}.selection-heading,.collection-actions{display:flex;justify-content:space-between;align-items:center;gap:14px}.selection-heading h2{font-size:23px}.text-button{border:0;background:none;color:#8a7967;font-size:12px;min-height:44px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:15px;margin:22px 0}.tile{position:relative;aspect-ratio:1;background:#e8eada;border:5px solid white;border-radius:8px;box-shadow:0 2px 6px #344a3810}.tile img{height:100%;width:100%;object-fit:cover;border-radius:4px}.remove{position:absolute;right:3px;top:3px;border:0;width:32px;height:32px;border-radius:100%;background:#fffdf2ec;color:#374d3e;font-size:20px}.collection-actions{margin-top:20px}#count{font:12px system-ui;color:#899579}#viewer{max-width:1200px;margin:auto;padding:12px 24px}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px}#position{font-size:12px;color:#7d8272}#stage{position:relative;height:calc(100dvh - 300px);min-height:220px;display:flex;align-items:center;justify-content:center;margin-top:18px;background:#e8ebdf;border:1px solid #dce1d0;border-radius:18px;overflow:hidden;touch-action:pan-y}#main-photo{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.arrow{position:absolute;z-index:1;border:1px solid #e4e5d8;border-radius:100%;width:44px;height:44px;font:30px Georgia;background:#fffdf1e8;color:var(--ink)}.prev{left:12px}.next{right:12px}.viewer-caption{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#89917d;padding:12px 2px}#photo-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}#filmstrip{display:flex;gap:9px;overflow-x:auto;justify-content:safe center;padding:5px 4px 10px}#filmstrip button{flex:0 0 58px;height:58px;padding:3px;border:2px solid transparent;border-radius:9px;background:#fffdf4}#filmstrip button[aria-current=true]{border-color:#668367}#filmstrip img{width:100%;height:100%;object-fit:cover;border-radius:4px}.share-note{text-align:center;font:italic 12px Georgia;margin:10px 0}dialog{padding:0;border:0;background:var(--paper);color:var(--ink);width:100vw;height:100dvh;max-width:100vw;max-height:100dvh}dialog::backdrop{background:#263329bb}.zoom-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;height:74px;font-size:12px;gap:15px}#zoom-scroll{overflow:auto;height:calc(100% - 74px);background:#252c25}#zoom-photo{display:block;max-width:none;max-height:none;margin:auto}#status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#344a38;color:white;border-radius:12px;padding:12px 20px;font-size:13px;max-width:90%;z-index:5}#status:empty{display:none}@media(max-width:650px){.header{padding:22px 23px}.brand{font-size:21px}.brand-icon{width:42px;height:42px;font-size:33px}.local-badge{font-size:0;padding:8px}.local-badge i{margin:0}.local-badge:after{content:'Local & private';font-size:9px;margin-left:5px}main{padding:0 23px}.welcome{padding-top:28px;min-height:510px;text-align:center}h1{font-size:51px}.welcome p{font-size:13px}.eyebrow{font-size:8px;letter-spacing:1.7px}.postcards{top:245px;left:50%;right:auto;transform:translateX(-50%) scale(.8);transform-origin:top center}.selection-panel{padding:13px;border-radius:19px}#empty{padding:22px 8px}h2{font-size:22px}.reassurance{gap:12px;flex-wrap:wrap;font-size:9px;padding:20px 0}footer{margin-top:7px;font-size:11px}.selection-heading{padding:8px}.selection-heading h2{font-size:20px}.grid{grid-template-columns:repeat(3,1fr);gap:9px}.collection-actions{gap:8px}.collection-actions button{padding:12px 14px;flex:1}#viewer{padding:8px 12px}.viewer-toolbar .secondary{padding:10px 13px}#stage{height:calc(100dvh - 285px);min-height:190px}.viewer-caption{display:block;text-align:center}.viewer-caption span{display:block;max-width:100%!important;margin-bottom:4px}.arrow{width:38px;height:38px}.prev{left:7px}.next{right:7px}.zoom-toolbar{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep the photo picker within the first screen on phones. */
@media (max-width:650px) {
  .header { padding:14px 20px; }
  main { padding:0 20px; }
  .welcome { min-height:320px; padding-top:12px; }
  h1 { font-size:44px; margin:12px 0; }
  .welcome p { font-size:12px; line-height:1.6; }
  .postcards { top:178px; transform:translateX(-50%) scale(.44); }
  .selection-panel { padding:10px; }
  #empty { padding:14px 8px; }
  .flower { font-size:24px; line-height:1; }
  #empty h2 { margin:8px 0 6px; font-size:21px; }
  #empty p { margin-bottom:12px; font-size:11px; }
  .hint { margin-top:11px; }
  .reassurance { padding:16px 0; }
  footer { padding:16px 0; }
}
@media (max-width:650px) and (max-height:700px) {
  .welcome { min-height:260px; padding-top:8px; }
  h1 { font-size:36px; margin:10px 0; }
  .postcards { top:157px; transform:translateX(-50%) scale(.30); }
  #empty .flower { display:none; }
}
@media (max-width:650px) and (max-height:560px) {
  .welcome { min-height:172px; }
  .postcards { display:none; }
}

/* Previews appear as each local file becomes displayable. */
.tile img:not(.ready):not(.unavailable) { opacity:0; }
.tile img { transition:opacity .15s; }
.tile img.unavailable { font-size:11px; color:var(--muted); }
#photo-loading { max-width:70%; text-align:center; padding:16px; }

/* Large collections scroll inside the panel; actions stay in view. */
#collection:has(#selected:not([hidden])) .welcome { display:none; }
#collection:has(#selected:not([hidden])) .selection-panel {
  height:calc(100dvh - 190px);
  min-height:280px;
  max-height:900px;
  margin-top:16px;
}
#selected { height:100%; display:flex; flex-direction:column; min-width:0; }
.selection-heading { flex-shrink:0; }
.selection-heading > div { min-width:0; }
.selection-heading .text-button { flex-shrink:0; }
.grid {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  align-content:start;
  padding:5px;
  margin:16px 0 0;
}
.collection-actions { flex-shrink:0; padding:12px 0 4px; margin-top:0; border-top:1px solid var(--line); }
#collection:has(#selected:not([hidden])) footer { display:none; }
@media (max-width:650px) {
  #collection:has(#selected:not([hidden])) .selection-panel {
    height:calc(100dvh - 142px - env(safe-area-inset-bottom));
    margin-top:4px;
    min-height:240px;
  }
  .grid { margin-top:8px; }
  .collection-actions { padding:12px 0 4px; }
  #collection:has(#selected:not([hidden])) .reassurance { padding:12px 0; }
}
.tile { min-width:0; overflow:hidden; }
@media (max-width:650px) {
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.grid { grid-auto-rows:max-content; }
.tile { align-self:start; }
.tile img { position:absolute; inset:0; }

/* One carousel, expanded to the entire available screen. */
body.viewing-fullscreen { overflow:hidden; }
#viewer.immersive {
  position:fixed; inset:0; z-index:10; width:100%; height:100dvh;
  max-width:none; padding:0; margin:0; background:#141a15; color:#fffdf3;
}
#viewer.immersive #stage {
  position:absolute; inset:0; width:100%; height:100%; min-height:0;
  margin:0; border:0; border-radius:0; background:transparent; touch-action:pan-y pinch-zoom;
}
#viewer.immersive #main-photo { object-fit:contain; }
#viewer.immersive .viewer-toolbar {
  position:absolute; z-index:2; top:0; left:0; right:0;
  padding:calc(12px + env(safe-area-inset-top)) 16px 28px;
  background:linear-gradient(#0009,transparent); pointer-events:none;
}
#viewer.immersive .viewer-toolbar button { pointer-events:auto; background:#18221bbb; border-color:#ffffff40; color:white; }
#viewer.immersive #position { color:white; text-shadow:0 1px 4px #000; }
#viewer.immersive #fullscreen,
#viewer.immersive .viewer-caption,
#viewer.immersive #filmstrip,
#viewer.immersive .share-note { display:none; }
#viewer.immersive .arrow { background:#18221b99; color:white; border-color:#ffffff40; }
#viewer.immersive .prev { left:calc(10px + env(safe-area-inset-left)); }
#viewer.immersive .next { right:calc(10px + env(safe-area-inset-right)); }
#viewer.immersive #photo-loading { color:#e0e6d9; }