html[data-wedding-style=seaside],.design-preview[data-wedding-style=seaside]{--scene-image:url('/scenes/seaside-cabin.jpg')}
html[data-wedding-style=festival],.design-preview[data-wedding-style=festival]{--scene-image:url('/scenes/coastal-festival.jpg')}
html[data-wedding-style=seaside] body::before,html[data-wedding-style=festival] body::before{background:linear-gradient(color-mix(in srgb,var(--bg) 32%,transparent),color-mix(in srgb,var(--bg) 55%,transparent)),var(--scene-image) center/cover no-repeat;opacity:1}
.design-preview[data-wedding-style=seaside],.design-preview[data-wedding-style=festival]{background:linear-gradient(color-mix(in srgb,var(--bg) 28%,transparent),color-mix(in srgb,var(--bg) 55%,transparent)),var(--scene-image) center/cover no-repeat}
html:is([data-wedding-style=seaside],[data-wedding-style=festival]) body>.wedding-art{opacity:.08}
html:is([data-wedding-style=seaside],[data-wedding-style=festival]) body>header,html:is([data-wedding-style=seaside],[data-wedding-style=festival]) body>footer{background:var(--paper);border-radius:20px;padding:16px 20px}
html:is([data-wedding-style=seaside],[data-wedding-style=festival]) #event>.fine,html:is([data-wedding-style=seaside],[data-wedding-style=festival]) .album-view-controls,html:is([data-wedding-style=seaside],[data-wedding-style=festival]) #wall,html:is([data-wedding-style=seaside],[data-wedding-style=festival]) .intro{background:var(--paper);padding:16px;border-radius:20px}
html:is([data-wedding-style=seaside],[data-wedding-style=festival]) .event-heading{background:var(--paper);border-top:5px solid var(--ornament)}
.design-preview:is([data-wedding-style=seaside],[data-wedding-style=festival]) .de-preview-content>small,.design-preview:is([data-wedding-style=seaside],[data-wedding-style=festival]) .de-invitation,.design-preview:is([data-wedding-style=seaside],[data-wedding-style=festival]) .de-sample-note{background:var(--paper);border-radius:16px;padding:12px;display:block}
.design-preview:is([data-wedding-style=seaside],[data-wedding-style=festival]) .de-invitation{margin:12px 0}
.photo-composer{width:min(620px,94vw);max-width:calc(100% - 24px);max-height:92dvh;overflow:auto;padding:24px;border-radius:24px;border:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #0008}
.photo-composer>img,.photo-composer>video{max-width:100%;object-fit:contain}.photo-composer>video{display:block;width:100%;max-height:35dvh}.photo-composer h2,.photo-composer p{overflow-wrap:anywhere}
/* Prevent Safari's input-focus zoom without disabling pinch-to-zoom. */
#enter input,.comment-form input,.photo-composer input,.photo-composer textarea{font-size:16px}
.photo-composer::backdrop{background:#171217bb;backdrop-filter:blur(4px)}
.photo-composer>img{width:100%;height:min(35dvh,300px);object-fit:contain;background:var(--soft);border-radius:16px}.photo-composer h2{font-size:26px;margin:0 0 16px}.photo-composer .comment-status{flex-basis:100%;font-size:13px}.photo-composer .comment-form{flex-wrap:wrap}.photo-composer .comment-list{max-height:180px;overflow:auto}.photo-composer input{min-width:120px}.photo-composer button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gallery[data-filter=pending]>.media:not([data-state=pending]),.gallery[data-filter=approved]>.media:not([data-state=approved]),.gallery[data-filter=rejected]>.media:not([data-state=rejected]){display:none}
body>header{flex-wrap:wrap;gap:10px}.copy-own-access,.copy-guest-access{font-size:12px;min-height:42px}.album-view-controls{flex-wrap:wrap;gap:10px}.album-view-controls select{width:auto;max-width:100%}
#message:not(:empty){position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 28px));z-index:80;box-shadow:0 8px 28px #0003;border-radius:14px;padding:14px 18px;background:var(--paper);color:var(--ink);border:2px solid var(--accent);max-height:30dvh;overflow:auto}
@media(max-width:650px){.photo-composer{padding:16px}.copy-own-access,.copy-guest-access{flex:1}.photo-composer>img{height:26dvh}.event-dock{gap:4px}.event-dock button{padding-inline:9px}}

#grants .grant-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}#grants .grant-row>strong{flex:1 1 160px}#grants .grant-row>details{flex:1 1 180px;min-width:0}#grants .grant-row>details input{width:100%;min-width:0;font-size:12px}#grants .grant-row .buttons{display:flex;flex-wrap:wrap;gap:8px}#grants summary{cursor:pointer;font-size:13px}