:root{--green:#103c31;--dark:#09271f;--cream:#faf5e9;--gold:#d6b572;--red:#a52e3d;--ink:#17372f;--muted:#69756e;--line:#e2dac8}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}header{height:94px;padding:16px max(5vw,20px);display:flex;align-items:center;justify-content:space-between;background:var(--dark);color:var(--cream);border-bottom:1px solid #d6b57244}.brand{text-decoration:none;font:italic 32px Georgia,serif;color:var(--gold)}.brand span{font:15px Georgia,serif}.brand small{display:block;font:9px system-ui;letter-spacing:3px;margin-top:3px}button,input,select,textarea{font:inherit}button,.button{cursor:pointer;background:var(--green);border:1px solid transparent;color:white;border-radius:10px;padding:11px 20px;font-weight:650;text-decoration:none;display:inline-block}button:hover,.button:hover{filter:brightness(1.12)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--red)}.secondary{background:transparent;border-color:var(--line);color:var(--ink)}header .secondary{color:var(--cream);border-color:#d6b57266}.danger{color:#aa2936;background:#fff1ef;border-color:#ecc5c5}.small{font-size:13px;padding:7px 11px}.textbutton{background:transparent;color:var(--ink);padding:8px;text-decoration:underline;font-weight:400}.hero{position:relative;min-height:420px;background:var(--green);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;color:var(--cream)}.hero img{width:100%;height:100%;max-height:520px;object-fit:cover;object-position:center 35%}.hero-copy{padding:64px 9%;align-self:center}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:700}h1,h2,h3{font-family:Georgia,serif;line-height:1.15;font-weight:400}h1{font-size:clamp(40px,5vw,70px);margin:16px 0}h2{font-size:32px;margin:8px 0 20px}h3{font-size:23px;margin:0 0 10px}.hero p{color:#e1e8dd;max-width:440px}.content{max-width:1100px;margin:auto;padding:34px 24px}.narrow{max-width:760px}.panel{background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:28px;margin:18px 0;box-shadow:0 5px 24px #103c3106}.rules{white-space:pre-line;line-height:1.85}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.subtle,.hint{color:var(--muted);font-size:14px}.badge{display:inline-block;border-radius:30px;padding:4px 10px;background:#eaf1e9;font-size:12px;color:var(--green)}.badge.warn{background:#fff0d3;color:#7c5620}.nav{display:flex;gap:8px;overflow:auto;padding:12px 0 20px;position:sticky;top:0;background:var(--cream);z-index:2}.nav button{white-space:nowrap;background:transparent;color:var(--ink);border:1px solid var(--line);padding:9px 14px}.nav button.active{background:var(--green);color:white}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid .panel{margin:0}.stat{font:36px Georgia;color:var(--green)}.icon{font-size:26px;margin-bottom:15px}.welcome{display:flex;justify-content:space-between;gap:16px;align-items:center}.avatar{width:45px;height:45px;border-radius:50%;object-fit:cover;background:#e6e8d9;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:8px}.avatar.big{width:85px;height:85px}.person{display:inline-flex;align-items:center;margin:4px 10px 4px 0}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0}.empty{border:1px dashed #c9cebf;padding:26px;border-radius:12px;text-align:center;color:var(--muted)}label{display:block;font-size:14px;font-weight:650;margin:14px 0 5px}input,textarea,select{width:100%;padding:12px;border:1px solid #c7cbbc;border-radius:9px;background:white;color:var(--ink)}textarea{min-height:110px;resize:vertical}input[type=checkbox],input[type=radio]{width:auto;margin-right:9px;accent-color:var(--green)}.check{font-weight:400;display:flex;align-items:flex-start}.check input{margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}td,th{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top}td .actions{margin:0}progress{width:100%;height:8px;accent-color:var(--green);margin:10px 0}.gallery img,.gallery video{width:100%;height:220px;object-fit:cover;border-radius:10px}.error{color:#a52e3d;font-size:14px;white-space:pre-line}.notice{background:#f4ebd6;border-radius:10px;padding:14px;font-size:14px}dialog{border:1px solid var(--line);border-radius:20px;padding:32px;width:min(94vw,560px);max-height:90vh;color:var(--ink);background:var(--cream)}dialog::backdrop{background:#061c18aa;backdrop-filter:blur(4px)}.close{float:right;background:transparent;color:var(--ink);font-size:26px;padding:0 8px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 22px;background:var(--green);color:white;border-radius:12px;box-shadow:0 5px 30px #0002;z-index:10;display:none;max-width:92vw}footer{text-align:center;background:var(--dark);color:var(--gold);padding:32px;font:italic 18px Georgia;margin-top:40px}footer a{font:12px system-ui;color:#ced5c9;display:inline-block;margin-top:18px}.loading{padding:80px;text-align:center}.confetti{font-size:40px;text-align:center}.tabs-title{margin-top:22px}details{margin:15px 0}summary{cursor:pointer;font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}@media(max-width:650px){header{height:80px;padding:13px 20px}.hero{display:flex;flex-direction:column}.hero img{height:280px;order:0}.hero-copy{order:1;padding:26px 24px 32px;width:100%}.hero h1{font-size:45px}.content{padding:24px 16px}.panel{padding:21px}.grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.welcome h2{font-size:28px}.actions>button{flex-grow:1}.nav{margin:0 -4px;padding-left:4px}.brand{font-size:27px}dialog{padding:24px}.row{flex-wrap:wrap}}
.gallery-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#eee8da;border-radius:12px;padding:14px}.gallery-toolbar>span{margin-right:auto;font-size:14px}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.media-card{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fffdf8}.media-preview{display:block;position:relative;width:100%;padding:0;border:0;border-radius:0;background:var(--dark);aspect-ratio:1;overflow:hidden}.media-preview img,.media-preview video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:38px;text-shadow:0 2px 10px #000}.media-select{position:absolute;top:8px;left:8px;display:flex;align-items:center;margin:0;padding:8px;border-radius:8px;background:#fffffff2;font-size:12px}.media-select input{width:20px;height:20px;margin:0 6px 0 0}.media-info{padding:12px;font-size:14px;overflow-wrap:anywhere}.media-info p{margin:5px 0}.media-info .textbutton{float:right}.lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:#081a16;color:var(--cream);padding:22px;overflow:auto}.lightbox .close{position:relative;z-index:2;color:white;font-size:34px}.viewer-heading{display:flex;gap:20px;padding:10px 45px 18px 0;color:var(--gold)}.viewer-stage{height:65dvh;display:flex;align-items:center;justify-content:center;touch-action:pan-y}.viewer-stage img,.viewer-stage video{max-width:100%;max-height:100%;object-fit:contain}.viewer-actions{display:flex;gap:18px;justify-content:center}.lightbox .secondary{color:white;border-color:#d6b57266}.lightbox p{text-align:center}.lightbox .hint{color:#c8d3ce}@media(max-width:650px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.media-select span{display:none}.media-select input{margin:0}.media-info{font-size:12px}.gallery-toolbar button{flex:1}.gallery-toolbar>span{width:100%}.lightbox{padding:14px}.viewer-stage{height:62dvh}}

/* Christmas Dinner · Chiara's cream, teal and gold invitation. */
:root{--green:#467d79;--dark:#102c24;--cream:#fff9d4;--gold:#dfbf70;--ink:#3f7773;--muted:#577c74;--line:#d7c78f}
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%}
body{min-width:0;min-height:100vh;background:radial-gradient(ellipse at 15% 65%,#446c54 0,transparent 55%),radial-gradient(ellipse at 90% 95%,#666233 0,transparent 45%),#102c24;color:var(--cream)}
body>header,body>main,body>footer{position:relative}
body>header{background:transparent;border:0;height:auto;min-height:140px;padding:18px 5%;display:grid;grid-template-columns:1fr auto 1fr}
.brand{grid-column:2;text-align:center;color:var(--gold)}
.brand .monogram{display:block;font:italic 64px/1 Georgia,serif;letter-spacing:-13px;padding-right:12px}
.brand .event-name{display:block;font:italic 28px/1.3 Georgia,serif}
.brand small{font:italic 16px Georgia;letter-spacing:1px}
#account{justify-self:end;min-width:0}
.festive-lights{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.festive-lights:before{content:"";position:absolute;inset:20% -12% 20%;border-bottom:2px solid #cab57288;border-radius:50%;transform:rotate(18deg);box-shadow:0 9px 20px #e9c76f22}
.festive-lights span{position:absolute;color:#ffe8a2;font-size:50px;text-shadow:0 0 8px #fff,0 0 22px #ffd77e,0 0 55px #ffc765;opacity:.8}
.festive-lights span:nth-child(1){left:1%;top:22%}.festive-lights span:nth-child(2){left:12%;top:31%;font-size:35px}.festive-lights span:nth-child(3){left:23%;top:45%}.festive-lights span:nth-child(4){left:32%;top:61%;font-size:32px}.festive-lights span:nth-child(5){left:47%;top:70%;font-size:26px}.festive-lights span:nth-child(6){left:65%;top:62%}.festive-lights span:nth-child(7){left:75%;top:71%;font-size:65px}.festive-lights span:nth-child(8){left:87%;top:36%}.festive-lights span:nth-child(9){left:94%;top:87%;font-size:70px}.festive-lights span:nth-child(10){left:5%;top:75%;font-size:16px}.festive-lights span:nth-child(11){left:58%;top:85%;font-size:15px}.festive-lights span:nth-child(12){left:91%;top:57%;font-size:18px}.festive-lights span:nth-child(13){left:18%;top:57%;font-size:19px}.festive-lights span:nth-child(14){left:40%;top:79%;font-size:18px}.festive-lights span:nth-child(15){left:80%;top:88%;font-size:18px}
.invitation-wrap{max-width:560px;margin:24px auto 0;padding:0 18px}
.invitation-card{position:relative;margin-top:86px;border:7px solid var(--gold);border-top:0;background:var(--cream);color:var(--ink);text-align:center}
.card-crown{position:absolute;left:-7px;right:-7px;top:-82px;height:84px;background:var(--gold);clip-path:polygon(0 100%,0 88%,9% 84%,13% 72%,14% 48%,18% 36%,25% 36%,25% 22%,31% 22%,33% 13%,43% 10%,50% 0,57% 10%,67% 13%,69% 22%,75% 22%,75% 36%,82% 36%,86% 48%,87% 72%,91% 84%,100% 88%,100% 100%)}
.card-crown:after{content:"";position:absolute;inset:8px 7px -1px;background:var(--cream);clip-path:inherit}
.invitation-body{padding:25px 28px 24px;min-height:480px;display:flex;flex-direction:column;justify-content:center}
.invite-text{font:21px/1.45 Georgia,serif;outline:none}
.invite-text p{margin:0 0 25px}
.signature{font-style:italic;font-size:25px}
.invite-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:auto;padding-top:15px}
.invite-controls button{justify-self:end;background:var(--gold);color:var(--ink);border-radius:40px;min-width:48px}
.invite-controls button:first-child{justify-self:start}
.page-count{font:12px system-ui;color:#607d72}
.return-login{text-align:center;color:var(--cream);font-size:14px}
.return-login .textbutton{color:var(--gold)}
.rsvp-actions{display:grid;gap:24px;margin:45px 0}
.rsvp-actions button{font:22px Georgia}
button,.button{border-radius:26px;min-height:44px;max-width:100%;white-space:normal}
.primary{background:var(--green)}
.gold-button{background:var(--gold);color:var(--ink)}
.ornament{font:48px/1.5 Georgia;color:var(--green);letter-spacing:10px;text-align:center}
.ornament span{display:inline-block;transform:translateY(20px)}
.declined-title{margin:60px 0}
.content{max-width:1200px}
.panel,dialog,.media-card{background:var(--cream);color:var(--ink);border-color:var(--gold)}
.panel{box-shadow:none;border-radius:16px}
.panel .eyebrow{color:var(--green)}
#section>.subtle{color:var(--cream)}
#section>.hint{color:var(--cream)}
.empty{color:var(--cream);background:#12362bbf}
.panel .empty{color:var(--ink);background:transparent}
.welcome{flex-wrap:wrap}
.welcome .secondary{background:var(--cream)}
.nav{position:relative;display:flex;flex-wrap:wrap;overflow:visible;background:transparent;gap:10px;padding:18px 0 28px}
.nav button{flex:1 1 120px;background:var(--cream);border:2px solid var(--gold);font:18px Georgia;padding:10px 14px}
.nav button.active{background:var(--green);color:var(--cream);border-color:var(--green)}
.food-title{text-transform:uppercase;color:var(--gold);font-size:clamp(24px,3vw,35px);line-height:1.3}
.food-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.food-grid .panel{margin:0}
.food-grid h3{font-size:28px;line-height:1.25}
.food-choice{display:flex;align-items:center;padding:15px 12px;background:#dfe4c5;border-radius:8px;font:19px Georgia}
.food-choice:has(input:checked){background:#c4d2b6}
.food-choice input{flex:none;width:20px;height:20px}
.food-save{text-align:center}
.food-save button{min-width:180px}
.gallery-toolbar{background:var(--cream);color:var(--ink);margin-bottom:12px}
input,select,textarea{font-size:16px;min-width:0;max-width:100%;background:#fffce7}
input[type=file]{padding:10px 6px}
input[type=file]::file-selector-button{max-width:100%;white-space:normal}
header,main,footer,.content,.grid>*,.food-grid>*,.row>*,.welcome>*,#section{min-width:0}
p,h1,h2,h3,td,.person,.rules{overflow-wrap:anywhere}
img,video{max-width:100%}
.table-wrap{max-width:100%}
#toast{position:fixed;z-index:20}
footer{background:transparent;margin-top:20px}
.extra-rules{text-align:left;font-size:15px}
dialog{max-height:90dvh}
.lightbox{background:#081a16;color:var(--cream)}
@media(max-width:650px){
body>header{min-height:112px;padding:12px 16px;grid-template-columns:1fr auto 1fr}
.brand .monogram{font-size:46px}.brand .event-name{font-size:20px}.brand small{font-size:13px}
header .small{padding:8px;font-size:12px}
.invitation-wrap{padding:0 16px;margin-top:8px}
.invitation-card{border-width:5px;margin-top:66px}
.card-crown{left:-5px;right:-5px;top:-64px;height:66px}
.invitation-body{padding:20px 19px;min-height:430px}
.invite-text{font-size:19px;line-height:1.48}
.invite-text p{margin-bottom:22px}
.rsvp-actions button{font-size:20px}
.content{padding:18px 16px}
.nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:16px 0 22px}
.nav button{font-size:16px;white-space:normal}
.nav button:last-child:nth-child(odd){grid-column:1/-1}
.food-grid{grid-template-columns:1fr;gap:16px}
.food-grid h3{font-size:25px}
.panel{padding:20px}
.invite-controls{gap:7px}
.invite-controls button{padding:10px 14px}
.viewer-actions{gap:8px;flex-wrap:wrap}
.viewer-actions button,.viewer-actions a{padding:10px 14px}
.welcome h2{font-size:26px}
#section>.row{align-items:flex-start}
.festive-lights span{opacity:.45;font-size:32px}
.loading{padding:40px 16px}
}

/* Original artwork supplied by Marco and Chiara */
body{background:#102c24 url('/background.png') center center/cover fixed no-repeat}
.brand img{display:block;width:240px;height:auto;max-width:100%}
body>header{min-height:160px;padding-top:8px;padding-bottom:8px}
.food-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.beverage-block{margin:32px 0;padding-top:20px;border-top:1px solid var(--gold)}
@media(max-width:650px){body{background-image:none}body:before{content:"";position:fixed;inset:0;background:#102c24 url('/background.png') center/cover no-repeat;z-index:-1;pointer-events:none}.brand img{width:185px}body>header{min-height:125px;grid-template-columns:1fr minmax(0,185px) 1fr;gap:5px}.food-grid{grid-template-columns:1fr}}

/* Consistent vector ornaments and Food layout */
.ornament{width:min(220px,100%);margin:0 auto 12px;line-height:0;letter-spacing:0;color:var(--green)}
.ornament svg{display:block;width:100%;height:auto}
.food-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.food-preferences{display:contents}
.food-diet{order:1}.food-allergies{order:2}.food-dislikes{order:3}
.food-save{order:4;grid-column:1/-1}
.food-allergies button{width:100%}
@media(max-width:650px){.food-grid{grid-template-columns:1fr}.ornament{width:180px}}

/* Account controls stay accessible beside the logo on mobile. */
#profile-access{grid-column:1;grid-row:1;justify-self:start;min-width:0}
body>header .brand{grid-column:2;grid-row:1}
#account{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.header-profile{display:flex;align-items:center;gap:7px;background:transparent;color:var(--cream);border-color:#d6b57266}
.header-profile .avatar{margin:0;width:34px;height:34px;flex:none}
.header-profile span.avatar{background:transparent;border:1px solid #d6b57266;color:var(--cream)}
@media(max-width:650px){body>header{grid-template-columns:minmax(60px,1fr) minmax(0,185px) minmax(48px,1fr);gap:8px;padding-left:12px;padding-right:12px}.header-profile{flex-direction:column;gap:3px;padding:7px!important;font-size:12px}.header-profile .avatar{width:30px;height:30px}#account .button{font-size:12px;padding:8px;min-height:36px}}