@font-face{font-family:Cinzel;src:url(assets/cinzel.ttf)}
*{box-sizing:border-box} [hidden]{display:none!important}
:root{color-scheme:light;--ink:#3c3c3c;--muted:#545454;--paper:#f0f0f0;--border:#828282;--button:#f2f2f2}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 28%,#fafafa,#e4e4e4);color:var(--ink);font:16px Cinzel,serif;display:grid;justify-items:center;align-content:center;gap:11px;padding:10px 10px max(10px,env(safe-area-inset-bottom))}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #555555;outline-offset:3px}
.mast,main,footer{width:min(95vw,490px,max(276px,calc((100svh - 116px)*.5625)))}
.mast,.nav{display:flex;align-items:center;justify-content:space-between}.mast{justify-content:center;min-height:21px;font:9px Cinzel,Georgia,serif;letter-spacing:.09em;color:var(--muted)}
.book{position:relative;isolation:isolate;width:100%;aspect-ratio:9/16;container-type:inline-size;overflow:hidden;background:var(--paper);box-shadow:0 14px 38px #35353533,0 1px 3px #30303040;border-radius:2px}
.sheet,.fold{position:absolute;inset:0;overflow:hidden}.sheet{z-index:1}.sheet.under{z-index:0;pointer-events:none}.sheet.turning{pointer-events:none}.full{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;user-select:none}
.cover .full{object-position:center}.cover::after{content:"";position:absolute;inset:44% 0 0;background:linear-gradient(transparent,#23170d26 22%,#20160dd9)}
.cover-copy{position:absolute;z-index:1;bottom:9%;left:7%;right:7%;color:#f3f3f3;text-align:center;text-shadow:0 2px 13px #1e160d}
.label{font:2.7cqw/1.45 Cinzel,Georgia,serif;letter-spacing:.14em;margin:0}.message .full{object-fit:contain;background:#f0f1f2}
.paper{background:radial-gradient(ellipse at 50% 12%,#fafafa,#ededed);text-align:center;color:var(--ink)}
.paper::before{content:"";position:absolute;inset:2.7%;border:1px solid #85858550;pointer-events:none}.paper h2{font:5.2cqw/1.2 Cinzel,serif;margin:2% 0 4%;font-weight:normal}
.gallery,.ceremony{padding:7% 8% 8%;display:flex;align-items:center;flex-direction:column}.gallery-main{position:relative;width:100%;flex:1;min-height:0;padding:0;border:0;background:#dedede}.gallery-main img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 58%}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:2%;margin-top:4%;padding:0 2%}.thumbs button{padding:0;display:block;background:none;border:1px solid transparent;aspect-ratio:3/4;opacity:.75}.thumbs img{display:block;width:100%;height:100%;object-fit:cover}.thumbs [aria-pressed=true]{opacity:1;outline:1px solid #696969;outline-offset:2px}
.invitation,.venue{font-size:3.9cqw;line-height:1.4;margin:0}.date{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;margin:4% 0 3%;font:3cqw Cinzel,Georgia,serif}.date>span{padding:7% 0;border-block:1px solid var(--border)}.date small{display:block;letter-spacing:.13em}.date strong{display:block;font:14cqw/.9 Cinzel,serif;margin:4% 0}.chapel{width:67%;min-height:0;object-fit:contain;flex:1;mix-blend-mode:multiply;margin:2% 0;-webkit-mask-image:radial-gradient(ellipse closest-side, #000 62%, transparent 100%);mask-image:radial-gradient(ellipse closest-side, #000 62%, transparent 100%)}.venue{margin-bottom:4%}
#countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.8cqw;width:100%;margin:1.5cqw auto 0}
#countdown>div{display:grid;gap:1.55cqw;min-width:0;text-align:center}
#countdown strong{position:relative;display:grid;place-items:center;aspect-ratio:3/2;border-radius:4px;background:#656565;color:#fafafa;font-size:6cqw;font-variant-numeric:tabular-nums;font-weight:400;line-height:1}
#countdown strong::after{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid #dedede;pointer-events:none}
#countdown span{font-size:max(9px,2.6cqw);line-height:1.2;color:var(--muted)}
.action{display:inline-flex;align-items:center;justify-content:center;gap:.6em;border:1px solid var(--border);border-radius:30px;padding:2.4cqw 4cqw;text-decoration:none;color:var(--ink);background:var(--button);font:2.8cqw Cinzel,Georgia,serif}.action:hover{background:#e0e0e0}
.closing-photo{position:relative;height:43%;overflow:hidden}.closing-photo img{object-position:50% 79%}.closing-copy{padding:5% 9%;position:relative}.closing-copy h2{font-size:4.25cqw;letter-spacing:.065em}.closing-copy>p{margin:2% 0}.actions{display:grid;gap:1.35cqw;width:min(100%,65cqw);margin:4% auto}.actions:empty{display:none}
.fold{z-index:3;pointer-events:none;background:linear-gradient(125deg,#f7f7f7,#dedede);filter:drop-shadow(-4px -4px 8px #24242465)}
.corner{position:absolute;bottom:0;z-index:4;width:38%;height:9%;border:0;background:none;touch-action:none;padding:0;display:flex;align-items:flex-end;color:var(--ink);cursor:grab}
.corner-next{right:0;justify-content:flex-end}.corner-back{left:0;justify-content:flex-start}
.corner::before{content:"";position:absolute;bottom:0;width:56%;height:115%;background:linear-gradient(136deg,#cacaca,#fafafa 63%,#e3e3e3);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.corner-next::before{right:0}.corner-back::before{left:0;transform:scaleX(-1)}
.corner span{position:relative;display:flex;align-items:center;gap:3px;margin:0 6px 7px;padding:4px 6px;border:1px solid #d1d1d1;border-radius:18px;background:#fafafa;color:#464646;font:max(9px,2.6cqw)/1.15 Cinzel,serif;white-space:nowrap}
.corner .curl-hint{width:14px;height:14px;flex:none}
.corner-back .curl-hint{transform:scaleX(-1)}
.first-page .corner-next .curl-hint{animation:show-curl 1.45s ease-in-out 3}
@keyframes show-curl{50%{transform:translate(-3px,-2px)}}
.dragging .corner{opacity:0}
.nav{margin-top:8px}.nav button,.music{width:42px;height:34px;border:1px solid var(--border);border-radius:24px;background:var(--button);font-size:19px}.nav button:disabled{opacity:.4;cursor:default}.nav output,footer{font:10px Cinzel,Georgia,serif;letter-spacing:.12em;color:var(--muted);text-align:center}footer{letter-spacing:.07em}.music{display:grid;place-items:center;animation:pulse 1.3s infinite alternate}.music[aria-pressed=true]{background:#e0e0e0}.music.started{animation:none}@keyframes pulse{to{opacity:.45}}
dialog{max-width:min(95vw,580px);max-height:95svh;padding:0;border:0;background:#292929;color:white}dialog::backdrop{background:#242424da}dialog img{display:block;max-width:100%;max-height:91svh;object-fit:contain}#lightbox button, dialog .pix-close{position:absolute;top:7px;right:7px;border:1px solid #fff;color:#fff;background:#242424ac;border-radius:50%;width:42px;height:42px;font-size:24px}
@media(prefers-reduced-motion:reduce){.music,.first-page .corner-next .curl-hint{animation:none}}


.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pix-dialog{width:min(90vw,390px);padding:30px 24px 18px;background:var(--paper);color:var(--ink);text-align:center;border:1px solid var(--border);border-radius:4px}
.pix-dialog h2{font-size:19px;font-weight:normal;margin:10px 0 6px}
.pix-dialog p,.pix-dialog label{font-size:12px}
.pix-dialog label{display:block;margin-top:18px}
.pix-dialog textarea{display:block;width:100%;margin:6px 0 14px;padding:8px;resize:none;border:1px solid var(--border);border-radius:4px;color:var(--ink);background:var(--button);font:12px/1.45 Cinzel,serif;overflow-wrap:anywhere}
.pix-dialog .action{padding:10px 16px;font-size:12px}
.pix-dialog .pix-close{width:32px;height:32px;background:transparent;border:1px solid var(--border);color:var(--ink)}
#pix-status{min-height:1.4em;margin:10px 0 0}

.nav button{display:grid;place-items:center}
.action svg{width:1.45em;height:1.45em;flex:none;color:var(--muted)}
.actions .action{width:100%;min-height:32px;padding:1.4cqw 2.4cqw;font-size:max(10px,2.85cqw)}
.gallery{padding-bottom:13%}
.gallery h2{margin:0 0 4%;font-size:4.1cqw;letter-spacing:.09em}
.gallery-main,.thumbs button{cursor:zoom-in}
.gallery-hint{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:20px;background:#fafafa;color:var(--ink);font:max(9px,2.6cqw)/1.2 Cinzel,serif;white-space:nowrap}
.gallery-hint svg{width:14px;height:14px;flex:none}
