:root {
 --canvas:#f7f7f4; --paper:#fff; --ink:#13233d; --ink-soft:#2f3d52; --muted:#657083; --line:#dce2e9;
 --accent:#c84b24; --accent-dark:#913317; --accent-soft:#fff0e9; --danger:#a63127; --focus:#c84b24;
 --font-display:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light;background:var(--canvas)}
body{margin:0;color:var(--ink);background:var(--canvas);font:16px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
input,textarea,button{font:inherit}
a{color:var(--accent-dark);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.site-header{min-height:64px;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{width:min(1180px,calc(100% - 32px));min-height:64px;margin:auto;display:flex;align-items:center}
.brand{margin:0;color:var(--ink);font:700 clamp(20px,2vw,25px)/1.2 var(--font-display);letter-spacing:-.02em}
.surround-shell{width:min(1280px,calc(100% - 32px));margin:24px auto 36px;display:grid;grid-template-columns:minmax(180px,250px) minmax(520px,680px) minmax(180px,250px);justify-content:center;align-items:start;gap:22px}
.form-column{min-width:0}
.card{width:100%;margin:0;padding:clamp(22px,3.2vw,42px);background:var(--paper);border:1px solid var(--line);border-radius:14px}
body>.card{width:min(720px,calc(100% - 32px));margin:30px auto 48px}
body>.card .brand{margin-bottom:22px}
body>.card h1{margin-bottom:22px}
h1{margin:0;font:700 clamp(30px,4.2vw,48px)/1.04 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.invitation{margin-bottom:22px}
.intro{margin:12px 0 0;color:var(--ink-soft)}
.intro+.intro{margin-top:7px}
.quiet{color:var(--muted);font-size:15px}
.auth-gate{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--canvas)}
form{display:grid;gap:22px}
.field{display:grid;gap:8px;min-width:0}
label,legend{display:block;font-weight:700}
.upload-wrap{position:relative}
.upload{min-height:148px;padding:22px;display:grid;align-content:center;justify-items:center;gap:6px;border:2px dashed #c9d1db;border-radius:12px;background:#fbfcfd;text-align:center;cursor:pointer}
.upload:hover{border-color:var(--accent);background:var(--accent-soft)}
.upload strong{font-size:18px}
.upload>span:last-child{color:var(--muted);font-size:14px;font-weight:400}
.upload-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--accent)}
#photos{position:absolute;width:1px;height:1px;opacity:0;padding:0;bottom:0;left:50%}
body:has(#photos:focus-visible) .upload{outline:3px solid var(--focus);outline-offset:3px}
.upload-more{display:none}
body:has(#previews article) .upload-title{display:none}
body:has(#previews article) .upload-more{display:block}
#previews{display:grid;gap:10px;min-width:0}
#previews:empty{display:none}
#previews article{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:14px;min-width:0}
#previews img{width:58px;height:58px;object-fit:cover;border-radius:8px;background:var(--canvas)}
#previews span{font-weight:650;overflow-wrap:anywhere}
#previews button{min-width:70px;min-height:44px;padding:0 12px;border:1px solid var(--line);background:var(--paper);color:var(--danger);font-size:14px;font-weight:650}
#previews button:hover{border-color:var(--danger);background:#fff0ee}
textarea,input[type=text]{width:100%;min-height:48px;padding:12px 13px;border:1px solid #cbd3dc;border-radius:9px;color:var(--ink);background:var(--paper)}
textarea{min-height:118px;resize:vertical}
textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
textarea:focus,input[type=text]:focus{border-color:var(--accent)}
fieldset{border:0;padding:0;margin:0;min-width:0}
.choice-row{display:flex;gap:10px;margin-top:10px}
.choice{min-height:44px;margin:0;padding:10px 13px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
#name-row{margin-top:12px}
#public-name{display:block;margin-top:8px}
.consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;min-height:44px;color:var(--ink-soft);font-size:15px;font-weight:400;cursor:pointer}
.consent input{width:21px;height:21px;margin:2px 0 0;accent-color:var(--accent)}
.rules{margin:4px 0 0 33px;font-size:14px}
.rules a{min-height:44px;display:inline-flex;align-items:center}
button,.button{display:inline-block;min-height:50px;padding:12px 18px;border:0;border-radius:10px;background:var(--accent);color:white;font-weight:750;text-decoration:none;text-align:center;cursor:pointer}
#submit{width:100%}
button:hover,.button:hover{background:var(--accent-dark);color:white}
button:disabled{opacity:1;color:white;background:var(--accent-dark);cursor:wait}
#error{margin:0;padding:12px;border-radius:10px;color:var(--danger);background:#fff0ee;font-weight:650;overflow-wrap:anywhere}
#error:empty{display:none}
.receipt{margin-top:24px}
#submission-id{display:block;margin-top:8px;color:var(--ink);font-size:22px;font-weight:750}
#submission-id{overflow-wrap:anywhere}
body:has(#success:not([hidden])) .invitation{display:none}
body:has(#success:not([hidden])) .surround-stack{opacity:.45}
.photo-card{margin:0;padding:8px 8px 10px;border-radius:9px;background:var(--paper);box-shadow:0 7px 20px rgb(19 35 61 / 9%)}
.photo-card img{width:100%;height:auto;border-radius:5px}
.surround-stack{display:grid;gap:24px;padding-top:40px}
.surround-stack .photo-card:first-child{transform:rotate(-2.2deg)}
.surround-stack .photo-card:last-child{transform:rotate(1.3deg)}
.surround-stack.right{padding-top:70px}
.surround-stack.right .photo-card:first-child{transform:rotate(2deg)}
.surround-stack.right .photo-card:last-child{transform:rotate(-1.3deg)}
.mobile-collage{display:none}
body:has(#previews article) .surround-stack,body:has(#previews article) .mobile-collage{opacity:.38}
.source-details{width:min(680px,calc(100% - 32px));margin:0 auto 34px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.source-details summary{min-height:44px;padding:13px 0;cursor:pointer;color:var(--ink-soft);font-weight:650}
.source-details a,body>.card a{display:inline-flex;min-height:44px;align-items:center}
.source-details p{margin:0 0 14px}
@media(max-width:1023px){
 .surround-shell{width:min(720px,calc(100% - 32px));display:block}
 .surround-stack{display:none}
 .mobile-collage{height:128px;margin:0 4px 14px;display:grid;grid-template-columns:1.12fr 1fr 1fr;align-items:center;gap:5px}
 .mobile-collage figure{height:calc(100% - 8px);margin:0;min-width:0;overflow:hidden;padding:5px;border-radius:8px;background:white;box-shadow:0 5px 16px rgb(19 35 61 / 10%)}
 .mobile-collage figure:first-child{transform:rotate(-1.6deg)}
 .mobile-collage figure:nth-child(2){transform:rotate(2deg) translateY(3px)}
 .mobile-collage figure:last-child{transform:rotate(-1.3deg) translateY(-2px)}
 .mobile-collage img{width:100%;height:100%;object-fit:cover}
}
@media(max-width:600px){
 body{font-size:15px}
 .site-header,.header-inner{min-height:58px}
 .header-inner{width:calc(100% - 24px)}
 .surround-shell{width:calc(100% - 20px);margin:12px auto 24px}
 .card{padding:18px 16px 22px;border-radius:12px}
 h1{font-size:clamp(29px,9.6vw,38px)}
 .invitation{margin-bottom:16px}
 .intro{margin-top:8px;line-height:1.42}
 .intro+.intro{margin-top:5px}
 .quiet{font-size:14px}
 form{gap:18px}
 .upload{min-height:132px;padding:16px}
 .upload-mark{width:40px;height:40px}
 .upload strong{font-size:17px}
 #previews article{grid-template-columns:50px minmax(0,1fr) auto;gap:9px;padding:8px}
 #previews img{width:50px;height:50px}
 #previews button{padding:0 8px;font-size:13px}
 .choice-row{display:grid;grid-template-columns:1fr 1fr}
 .choice{padding:10px}
 .consent{font-size:14px;line-height:1.42}
 .mobile-collage{height:102px;margin-bottom:10px}
 .source-details{width:calc(100% - 24px);margin-bottom:24px}
}
@media(max-width:370px){.card{padding-inline:14px}h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}