/* ---------- album: four sets, swipe between them ---------- */
.album-intro { text-align:center; margin-top:10px; font-size:17px; color:var(--mute); }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:calc(100% - 112px); max-width:300px; margin:18px auto 0; }  /* 2x2, clear of the fixed music button */
.tabs button { font-size:15px; padding:4px 2px; white-space:nowrap; border-radius:999px; border:1.2px solid rgba(42,36,32,.35); color:var(--mute); min-height:36px; }
.tabs button[aria-selected=true] { background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.pager { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:8px; font-size:15px; color:var(--mute); }
.pager b { font-family:var(--label); font-weight:500; letter-spacing:.12em; color:var(--ink); }
.album { display:flex; overflow-x:auto; overflow-y:hidden; padding-bottom:44px; touch-action:pan-x pan-y; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; margin:10px -18px 0; -webkit-overflow-scrolling:touch; }
.album::-webkit-scrollbar { display:none; }
.set { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; padding:6px 22px 10px; }
.set-h { text-align:center; font-size:20px; letter-spacing:.14em; }
.set-h small { display:block; font-family:var(--label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--red-ink); }
.board { position:relative; width:100%; aspect-ratio:100/150; margin-top:8px; }
.board > * { position:absolute; }
.pic { cursor:zoom-in; display:block; }
.pic picture, .pic img { display:block; width:100%; height:100%; object-fit:cover; }
.pic .ph { position:relative; aspect-ratio:3/4; background:#cdbda6; overflow:hidden; }
.pic.broken .ph::after { content:'照片没加载出来'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:var(--mute); }
.js .pic img { opacity:0; transition:opacity .6s; }
.js .pic img.loaded { opacity:1; }

/* 1 · gilded frames on a wall */
.wall { inset:0; background:linear-gradient(transparent 76%, rgba(42,36,32,.08) 76.4%, transparent 77%); }
.gilt { padding:3.2%; background:linear-gradient(135deg, #f0cf7c, #b77a27 30%, #f3d68a 52%, #a96b1e 76%, #e6bb62);
  box-shadow:0 6px 14px rgba(42,36,32,.25), inset 0 0 0 1.5px #6e4513; border-radius:3px; }
.gilt .ph { box-shadow:0 0 0 3px #f7e7bf, 0 0 0 4.5px #8c5a1c; }
.gilt::before { content:''; position:absolute; inset:-5px; border:1.5px solid #8c5a1c; border-radius:6px; pointer-events:none; }
.gilt .orn { position:absolute; width:22%; aspect-ratio:1; color:#7a4c14; pointer-events:none; }
.gilt .orn.tl { left:-6%; top:-6%; } .gilt .orn.tr { right:-6%; top:-6%; transform:scaleX(-1); }
.gilt .orn.bl { left:-6%; bottom:-6%; transform:scaleY(-1); } .gilt .orn.br { right:-6%; bottom:-6%; transform:scale(-1,-1); }
.g1 { left:22%; top:9%; width:56%; } .g2 { left:5%; top:63%; width:36%; } .g3 { left:59%; top:61%; width:36%; }
.wire { left:30%; top:0; width:40%; height:10%; color:var(--ink); }

/* 2 · papercut rings with a magpie */
.ringpic { aspect-ratio:1; }
.ringpic .ph { position:absolute; left:21%; top:21%; width:58%; height:58%; aspect-ratio:auto; border-radius:50%; }
.ringpic > img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.r1 { left:14%; top:4%; width:72%; } .r2 { left:2%; top:55%; width:50%; } .r3 { left:48%; top:62%; width:50%; }
.mag { left:66%; top:1%; width:20%; pointer-events:none; }

/* 3 · polaroids on a clothesline */
.line { left:-4%; width:108%; height:10%; color:#6b5a4a; }
.pola { background:#fbf8f1; padding:4% 4% 15%; box-shadow:0 4px 10px rgba(42,36,32,.22); transform-origin:50% 0; }
.pola .cap { position:absolute; left:0; right:0; bottom:2%; text-align:center; font-family:var(--script); font-size:22px; color:var(--red); line-height:1; }
.clip { position:absolute; left:50%; top:-6%; width:9%; height:13%; margin-left:-4.5%; background:linear-gradient(90deg,#b98a57,#d9ad78 45%,#a5773f); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.clip::after { content:''; position:absolute; left:15%; right:15%; top:42%; height:12%; background:#7a5530; }
.p1 { left:6%; top:7%; width:41%; transform:rotate(-4deg); } .p2 { left:54%; top:8.5%; width:41%; transform:rotate(3.5deg); }
.p3 { left:29%; top:57%; width:41%; transform:rotate(-2deg); }

/* 4 · postcards with stamp + postmark */
.card-pc { width:92%; aspect-ratio:3/2; background:#f7f0e2; box-shadow:0 4px 12px rgba(42,36,32,.2); padding:3%; display:flex; gap:4%; }
.card-pc .pic { width:43%; flex:none; height:100%; }
.card-pc .pic .ph { aspect-ratio:auto; height:100%; }
.card-pc .back { position:relative; flex:1; border-left:1px solid rgba(42,36,32,.3); padding-left:6%; }
.card-pc .rule { position:absolute; left:10%; right:4%; height:1px; background:rgba(42,36,32,.35); }
.card-pc .hand { position:absolute; left:10%; top:50%; font-family:var(--script); font-size:24px; color:var(--ink); line-height:1; }
.stamp { position:absolute; right:3%; top:4%; width:34%; aspect-ratio:4/5; padding:7%;
  background:radial-gradient(circle, #e4d8c4 38%, transparent 42%) -3px -3px / 7px 7px, #fffaf0; box-shadow:0 1px 2px rgba(42,36,32,.25); transform:rotate(3deg); }
.stamp i { display:block; width:100%; height:100%; background:var(--red); position:relative; }
.stamp i img { position:absolute; left:8%; top:22%; width:84%; }
.stamp i b { position:absolute; left:0; right:0; top:4%; text-align:center; font-family:var(--label); font-weight:500; font-size:9px; letter-spacing:.1em; color:#fffaf0; }
.postmark { position:absolute; right:22%; top:24%; width:36%; aspect-ratio:1; color:#3b3330; opacity:.78; transform:rotate(-14deg); pointer-events:none; }
.c1 { left:2%; top:1%; transform:rotate(-3deg); } .c2 { left:6%; top:33%; transform:rotate(2.5deg); } .c3 { left:1%; top:65%; transform:rotate(-1.5deg); }
.c2 { flex-direction:row-reverse; } .c2 .back { border-left:0; border-right:1px solid rgba(42,36,32,.3); padding:0 6% 0 0; }

/* ---------- lightbox ---------- */
.lb { position:fixed; inset:0; z-index:60; background:rgba(30,25,22,.96); color:var(--paper-2); opacity:0; transition:opacity .4s var(--out); touch-action:pan-x; }
.lb.open { opacity:1; }
.lb[hidden] { display:none; }
.lb-track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; transform:translate3d(0,var(--dy,0),0); }
.lb-track::-webkit-scrollbar { display:none; }
.lb-track.settle { transition:transform .45s var(--out); }
.lb-slide { flex:0 0 100%; height:100%; display:grid; place-items:center; padding:calc(env(safe-area-inset-top) + 60px) 12px calc(env(safe-area-inset-bottom) + 40px); scroll-snap-align:center; scroll-snap-stop:always; }
.lb-slide img { max-width:100%; max-height:100%; object-fit:contain; border:6px solid #f7f0e2; }
.lb-n { position:absolute; left:18px; top:calc(env(safe-area-inset-top) + 16px); font-family:var(--label); font-size:15px; letter-spacing:.1em; }
.lb-x { position:absolute; right:10px; top:calc(env(safe-area-inset-top) + 6px); width:48px; height:48px; border-radius:50%; border:1.5px solid var(--paper-2); }
.lb-x i { position:absolute; left:13px; right:13px; top:50%; height:2px; background:var(--paper-2); transform:rotate(45deg); }
.lb-x i + i { transform:rotate(-45deg); }
.lb-hint { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 10px); text-align:center; font-size:14px; color:rgba(234,223,207,.75); }
@media (min-width:520px) { .lb { left:calc(50% - 260px); right:calc(50% - 260px); } }