:root{
  --cream:#f7f3ee; --ink:#3a3530; --muted:#9a8f82; --line:#e7ddd1;
  --accent:#c08a6f; --accent-dark:#a06a50; --card:#fff; --shadow:0 6px 24px rgba(80,60,40,.10);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Jost',system-ui,sans-serif; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; padding-bottom:120px;}
.hidden{display:none !important}

/* hero */
.hero{text-align:center; padding:54px 20px 30px; background:radial-gradient(120% 90% at 50% 0%,#fffaf4 0%,var(--cream) 70%); border-bottom:1px solid var(--line);}
.kicker{letter-spacing:.32em; text-transform:uppercase; font-size:11px; color:var(--accent); margin:0 0 10px}
.hero h1{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(34px,9vw,56px); margin:0; line-height:1.05;}
.subtitle{font-size:16px; color:var(--muted); margin:12px 0 4px; font-weight:300}
.count{font-size:13px; color:var(--accent-dark); margin:14px 0 0; letter-spacing:.04em}
.count span{font-weight:500}
.ghost-btn{margin-top:18px; background:transparent; border:1.4px solid var(--accent); color:var(--accent-dark); padding:9px 20px; border-radius:30px; font-family:'Jost'; font-size:13px; letter-spacing:.05em; cursor:pointer; transition:.15s}
.ghost-btn:active{transform:scale(.96); background:var(--accent); color:#fff}

/* gallery */
main{max-width:1100px; margin:0 auto; padding:18px 12px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px;}
@media(min-width:560px){ .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px} }
.tile{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#eee5d8; box-shadow:var(--shadow); cursor:pointer; opacity:0; transform:scale(.96); animation:pop .45s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes pop{to{opacity:1; transform:scale(1)}}
.tile img{width:100%; height:100%; object-fit:cover; display:block}
.tile .who{position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:11px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.55)); opacity:0; transition:.2s;}
.tile:hover .who,.tile:active .who{opacity:1}
.vbadge{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; padding-left:2px; backdrop-filter:blur(2px)}
.tile.processing{cursor:default}
.proc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#efe6d8; color:var(--muted); font-size:11px; text-align:center; padding:6px}
.proc.err{color:#b5563f}
.proc-spin{width:22px; height:22px; border:2.5px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite}
.empty{text-align:center; color:var(--muted); padding:60px 20px}
.empty-art{font-size:48px; margin-bottom:10px}
.loading-more{text-align:center; color:var(--muted); font-size:13px; padding:18px}

/* FAB */
.fab{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:16px 24px; border:none; cursor:pointer; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; font-family:'Jost'; font-size:15px; font-weight:500; border-radius:40px; box-shadow:0 10px 30px rgba(160,106,80,.45); z-index:30; transition:transform .15s;}
.fab:active{transform:translateX(-50%) scale(.96)}
.fab-plus{font-size:22px; line-height:1; margin-top:-2px}

/* sheet */
.sheet-backdrop{position:fixed; inset:0; background:rgba(40,30,20,.45); z-index:40; display:flex; align-items:flex-end; animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card); width:100%; border-radius:26px 26px 0 0; padding:10px 22px 30px; animation:slideUp .28s cubic-bezier(.2,.8,.3,1); max-width:520px; margin:0 auto;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:42px; height:5px; background:var(--line); border-radius:3px; margin:8px auto 14px}
.sheet h2{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; margin:0 0 18px; text-align:center}
.name-field{display:block; margin-bottom:18px}
.name-field span{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.name-field input{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px; font-size:16px; font-family:'Jost'; background:#fbf8f3; color:var(--ink);}
.name-field input:focus{outline:none; border-color:var(--accent)}
.choices{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.choice{display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 10px; cursor:pointer; border:1.5px solid var(--line); border-radius:16px; background:#fbf8f3; font-size:13px; font-weight:500; transition:.15s; text-align:center;}
.choice.wide{grid-column:1 / -1; flex-direction:row; justify-content:center; gap:12px; padding:16px}
.choice:active{transform:scale(.97); border-color:var(--accent); background:#fff}
.choice-ico{font-size:28px}
.link-btn{display:block; margin:18px auto 0; background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; font-family:'Jost'}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(20,15,10,.94); z-index:50; display:flex; align-items:center; justify-content:center; flex-direction:column; animation:fade .2s}
.lb-stage{max-width:96vw; max-height:84vh; display:flex; align-items:center; justify-content:center}
.lb-stage img,.lb-stage video{max-width:96vw; max-height:84vh; border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,.6)}
.lb-close{position:absolute; top:14px; right:16px; background:rgba(255,255,255,.15); color:#fff; border:none; width:42px; height:42px; border-radius:50%; font-size:20px; cursor:pointer; z-index:2}
.lb-dl{position:absolute; top:14px; right:68px; background:rgba(255,255,255,.15); color:#fff; width:42px; height:42px; border-radius:50%; font-size:18px; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; text-decoration:none}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:none; width:48px; height:64px; font-size:32px; cursor:pointer; border-radius:10px}
.lb-prev{left:10px} .lb-next{right:10px}
@media(max-width:560px){ .lb-nav{width:40px; height:54px; font-size:26px} }
.lb-meta{color:#f0e6da; margin-top:16px; font-size:14px; min-height:18px}

/* upload bar */
.upload-bar{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:45; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:18px; box-shadow:var(--shadow); font-size:13px; width:min(90vw,360px)}
.upload-info{flex:1}
.upload-track{height:5px; background:rgba(255,255,255,.2); border-radius:3px; margin-top:7px; overflow:hidden}
.upload-fill{height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .2s}
.upload-spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* slideshow */
.slideshow{position:fixed; inset:0; background:#0c0a08; z-index:60; display:flex; align-items:center; justify-content:center}
.ss-stage{width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden}
.ss-stage img,.ss-stage video{max-width:100%; max-height:100%; object-fit:contain; animation:fadein .8s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ss-stage img.kenburns{animation:fadein .8s, ken 6.5s ease-out both}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.ss-caption{position:absolute; bottom:36px; left:0; right:0; text-align:center; color:#fff; font-family:'Cormorant Garamond',serif; font-size:26px; text-shadow:0 2px 12px rgba(0,0,0,.7)}
.ss-close{position:absolute; top:18px; right:20px; background:rgba(255,255,255,.12); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:20px; cursor:pointer}

.footer{text-align:center; color:var(--muted); font-size:12px; padding:30px 20px 10px; font-weight:300}