@font-face{font-family:Dominican;src:url('/fonts/dominican.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('/fonts/newsreader.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Courier;src:url('/fonts/courier-prime.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:light;--bg:#f0e6d2;--ink:#662330;--muted:#775e4d;--line:#a7897e;--display:Newsreader,Georgia,serif;--body:Courier,'Courier New',monospace;font-family:var(--body);color:var(--ink);background:#d9cdb9;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;padding:30px;background-image:url('/studies/paper.svg')}[hidden]{display:none!important}h1,h2,p,figure{margin:0}a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}.shell{max-width:1440px;min-height:calc(100svh - 60px);margin:auto;padding:65px 8% 80px;background:var(--bg);background-image:url('/studies/paper.svg');box-shadow:0 2px 4px #48331f12}main{animation:arrive .4s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.painting{display:block;width:100%;height:auto;box-shadow:0 13px 24px -13px #37271e60}h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em}h1{font-size:42px;line-height:1.1}h2{font-size:32px}.hero{width:80%;max-width:900px;margin:0 0 65px auto}.content{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,110px);align-items:start}.date{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.6}dl{margin:36px 0 0}dl>div{display:grid;grid-template-columns:70px 1fr;gap:18px;margin-bottom:23px}dt{font-size:12px;color:var(--muted);padding-top:4px}dd{font:400 22px/1.35 var(--display);margin:0;max-width:280px}.note{font-size:12px;line-height:1.65;color:var(--muted)}.logistics{max-width:340px;margin-top:28px}.muted{color:var(--muted)}.tabs{display:flex;gap:28px;margin:-9px 0 20px;align-items:center}.tabs button{font-size:14px;min-height:44px;background:none;color:var(--muted);border:0;padding:10px 0}.tabs .active{color:var(--ink);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}.tabs button:hover{color:var(--ink)}.field{display:block;font-size:12px;line-height:1.5;margin-bottom:20px}.field input,.field textarea{display:block;width:100%;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:44px;padding:10px 0 7px;font-size:16px}.field textarea{min-height:63px;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--ink);background:#66233004}input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-size:12px;margin-bottom:4px}.choices{display:flex;gap:28px}.choice{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px;cursor:pointer}input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--ink)}.primary{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:13px 21px;min-height:46px;font-size:14px;border-radius:0;transition:background .18s}.primary:hover{background:#481b25}.text-button{background:none;border:0;color:var(--ink);font-size:13px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:10px}.error{font-size:13px;line-height:1.5;margin-top:16px;color:var(--ink)}.success{padding:10px 0}.success p{margin-top:15px}.success button{margin-top:26px}.loading{padding:60px 0;color:var(--muted);font-size:13px}
/* The selected Folio entry: painting and correspondence share a sheet of paper. */
.locked .shell{padding:85px 10% 100px 8%;display:flex;align-items:center}.locked main{width:100%}.gate{width:100%}.gate figure{width:91%;margin-left:auto}.correspondence{width:91%;margin:74px auto 0 0;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.entry-date time{font:400 clamp(25px,2.45vw,36px)/1.2 var(--display);letter-spacing:-.025em}.entry-date p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:9px}.gate form{width:100%;max-width:360px;justify-self:end}.password-control{display:flex;align-items:center;border-bottom:1px solid var(--ink);transition:background .2s}.password-control:focus-within{background:transparent;border-bottom-width:2px;margin-bottom:-1px}.password-entry{width:0;flex:1;min-width:0;min-height:56px;padding:12px 0;background:none;border:0;border-radius:0;color:var(--ink);font-size:16px;outline:none!important}.password-entry::placeholder{color:var(--ink);opacity:.75}.entry-submit{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 0 12px 16px;background:none;border:0;color:var(--ink);font-size:16px}.entry-submit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .2s}.entry-submit:hover svg{transform:translateX(4px)}.entry-submit:hover span{text-decoration:underline;text-underline-offset:4px}
/* Host controls remain available only when enabled by the server. */
.host-head,.host-actions{display:flex;gap:20px;justify-content:space-between}.totals{display:flex;flex-wrap:wrap;gap:32px;margin:30px 0}.total b{display:block;font:36px var(--display)}.total span,.badge{font-size:12px}.response{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}.response h3{font:26px var(--display);margin:10px 0}.host-edit{max-width:450px;margin:40px 0}.host>.field{margin-top:20px}.eyebrow{font-size:12px;margin-bottom:20px}.intro{font-size:14px;line-height:1.6;margin:20px 0}
@media(max-width:950px) and (min-width:701px){.correspondence{width:100%;gap:30px}.locked .shell{padding-left:7%;padding-right:7%}.gate figure{width:100%}.entry-submit{font-size:14px}.content{gap:45px}dd{font-size:20px}.hero{width:90%}}
@media(max-width:700px){body{padding:13px}.shell{min-height:calc(100svh - 26px);padding:34px 23px 48px}.hero{width:100%;margin:0 0 42px}.content{grid-template-columns:1fr;gap:42px}h1{font-size:36px}h2{font-size:29px}dl{margin-top:28px}dl>div{grid-template-columns:62px 1fr;gap:14px;margin-bottom:20px}dd{font-size:21px}.logistics{margin-top:22px}.tabs{gap:24px}.tabs button{font-size:13px}.primary{width:100%}.field input,.field textarea{font-size:16px}.locked .shell{padding:40px 23px 120px}.gate figure{width:100%;margin:0}.correspondence{display:flex;flex-direction:column;align-items:stretch;width:100%;margin:49px 0 0;gap:48px}.entry-date time{font-size:28px}.entry-date p{font-size:12px}.gate form{max-width:none}.host-head{flex-wrap:wrap}.response{grid-template-columns:1fr}.host h1{font-size:30px}}
@media(max-width:360px){.shell,.locked .shell{padding-left:18px;padding-right:18px}.entry-date time{font-size:25px}.tabs{gap:20px}.choice{font-size:13px}.choices{gap:19px}}
@media(prefers-reduced-motion:reduce){main{animation:none}button,.entry-submit svg,.password-control{transition:none}}

.rsvp-deadline{margin:-6px 0 22px}
/* Keep the desktop entrance on one screen, including short laptop windows. */
@media(min-width:701px){
 body.locked{height:100svh;padding:clamp(12px,3svh,30px);overflow:hidden}
 .locked .shell{height:100%;min-height:0;padding:clamp(20px,6svh,65px) 8%;justify-content:center}
 .locked main{max-height:100%;min-height:0}
 .locked .gate{display:flex;flex-direction:column;align-items:stretch;max-height:100%}
 .locked .gate figure{width:91%;min-height:0;flex:1 1 auto;display:flex;justify-content:flex-end}
 .locked .gate .painting{width:auto;max-width:100%;height:auto;max-height:calc(100svh - 240px);object-fit:contain}
 .locked .correspondence{flex:0 0 auto;margin-top:clamp(20px,6svh,64px)}
}
/* One composition before and after entry; only the correspondence changes. */
.painting{view-transition-name:banquet}
::view-transition-group(banquet){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.7,.2,1)}
::view-transition-old(root){animation:fade-out .2s ease both}
::view-transition-new(root){animation:fade-in .4s ease .12s both}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
.details h1:focus{outline:none}
@media(min-width:701px){
 body{padding:clamp(12px,3svh,30px);overflow-y:auto;scrollbar-gutter:stable}
 .shell,.locked .shell{padding:clamp(30px,8svh,90px) 8% 65px;display:block;min-height:calc(100svh - clamp(24px,6svh,60px))}
 .locked .gate{display:block}
 .hero,.locked .gate figure{width:91%;height:clamp(180px,43svh,430px);max-width:none;margin:0 0 0 auto;display:flex;align-items:center;justify-content:flex-end}
 .hero .painting,.locked .gate .painting{width:auto;max-width:100%;max-height:100%;height:auto;object-fit:contain}
 .content,.locked .correspondence{width:91%;margin:clamp(24px,6svh,64px) auto 0 0;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}
 .details h1{font-size:clamp(25px,2.45vw,36px);line-height:1.2}
 .rsvp{width:100%;max-width:360px;justify-self:end}
}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Center the painting consistently on both sides of the password gate. */
.gate figure,.hero{margin-left:auto;margin-right:auto}
@media(min-width:701px){
 .hero,.locked .gate figure{margin-left:auto;margin-right:auto;justify-content:center}
 .content,.locked .correspondence{margin-left:auto;margin-right:auto}
}

/* A quiet, compact host ledger. */
.host{max-width:1100px;margin:0 auto;color:var(--ink)}
.host-toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:30px}
.attendance-summary{font-size:13px;line-height:1.8;margin:0}.attendance-summary span{opacity:.4;padding:0 7px}
.host-toolbar .text-button{white-space:nowrap;font-size:12px}
.host .host-search{max-width:340px;margin:0 0 35px}.host-search input{font-size:14px}
.guest-table{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
.guest-table th{font-size:11px;font-weight:400;opacity:.6;padding:0 20px 14px 0}
.guest-table th:nth-child(1){width:25%}.guest-table th:nth-child(2){width:29%}.guest-table th:nth-child(3){width:16%}
.guest-table td{vertical-align:top;padding:20px 20px 20px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.guest-name{font:24px/1.2 var(--display);color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.guest-name:hover{color:#762536}.guest-name:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.guest-email{opacity:.7}.guest-status{opacity:.8}.guest-diet{white-space:pre-wrap}.empty-guests{font-size:13px;opacity:.65;padding:24px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.host-toolbar{align-items:flex-start;gap:14px}.attendance-summary{max-width:220px;font-size:12px}.host .host-search{max-width:none;margin-bottom:24px}.guest-table,.guest-table tbody{display:block}.guest-table thead{display:none}.guest-table tr{display:grid;grid-template-columns:1fr auto;gap:7px 14px;padding:22px 0;border-top:1px solid var(--line)}.guest-table td{padding:0;border:0}.guest-table td:first-child{grid-column:1;grid-row:1}.guest-table .guest-email{grid-column:1/-1;grid-row:2}.guest-table .guest-status{grid-column:2;grid-row:1;padding-top:5px;font-size:11px}.guest-table .guest-diet{grid-column:1/-1;grid-row:3}.guest-name{font-size:25px}.host-toolbar .text-button{font-size:11px}.host-edit{margin:28px 0}}

/* ENVELOPE MATERIALS — replace these four URLs with aligned photographs. */
:root {
 --letter-stock: #f7f1e3;
 --envelope-stock: #f2ecde;
 --paper-fibre: url('/studies/paper.svg');
 --paper-ease: cubic-bezier(.32,0,.2,1);
}
body.locked.invitation-open {height:auto;overflow-y:auto;overflow-x:clip}
.invitation-open .shell {display:block;height:auto;min-height:calc(100svh - 26px);padding-top:var(--entry-offset);padding-bottom:80px}
.invitation-open main,.invitation-open .gate {max-height:none}
.invitation-open .correspondence {align-items:start}
.letter-stage {position:relative;width:100%;min-width:0;max-width:360px;justify-self:end;isolation:isolate;overflow-anchor:none}
.invitation-card {position:relative;z-index:3;color:#53473c;transform-origin:50% 0;filter:drop-shadow(0 3px 2px #4936210b) drop-shadow(0 12px 22px #49362114);outline:none}
.invitation-card::before {content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-fibre),linear-gradient(110deg,#fffcf320,transparent 55%,#b29d7310),var(--letter-stock);clip-path:polygon(0 .2%,5% .08%,12% .24%,20% 0,28% .17%,35% .06%,44% .2%,52% 0,63% .14%,72% .02%,83% .18%,92% .05%,100% .16%,99.86% 8%,100% 20%,99.8% 35%,100% 47%,99.86% 61%,100% 77%,99.8% 90%,100% 99.8%,92% 100%,83% 99.87%,73% 100%,62% 99.84%,52% 100%,43% 99.82%,33% 100%,22% 99.9%,13% 100%,4% 99.8%,0 100%,.14% 88%,0 72%,.2% 60%,0 46%,.15% 30%,0 17%)}
.card-print {padding:34px 28px 32px;font:14px/1.65 var(--body)}
.invitation-card dl {margin:0}
.invitation-card dl>div {grid-template-columns:58px minmax(0,1fr);gap:12px;margin:0 0 15px}
.invitation-card dt {font:11px/1.7 var(--body);padding-top:1px;color:#887762}
.invitation-card dd {font:14px/1.6 var(--body);max-width:none}
.invitation-card .logistics {font-size:11px;line-height:1.6;margin:22px 0 30px;color:#887762}
.invitation-card .rsvp {width:100%;max-width:none}
.invitation-card .tabs {gap:22px;margin:0 0 14px;flex-wrap:wrap}
.invitation-card .tabs button {font-size:12px}
.invitation-card .rsvp-deadline {font-size:11px;margin-bottom:24px}
.invitation-card .field,.invitation-card legend {font-size:11px}
.invitation-card .field input,.invitation-card .field textarea {border-color:#c7baa7;color:#53473c}
.invitation-card .choices {gap:0 20px;flex-wrap:wrap}.invitation-card .choice {font-size:12px}
.invitation-card .primary {font-size:12px;min-height:44px;padding:12px 17px}
.invitation-card .success h2 {font:20px/1.4 var(--body)}
.reveal-reduced .invitation-card{animation:letter-fade 280ms ease both}
@keyframes letter-fade {from{opacity:0}to{opacity:1}}
@media(min-width:701px){.invitation-open .shell{min-height:calc(100svh - clamp(24px,6svh,60px))}}
@media(max-width:700px){.letter-stage{max-width:none}.card-print{padding:29px 22px 28px}.invitation-card dl>div{grid-template-columns:54px 1fr;gap:9px}.invitation-card dd{font-size:13px}}

@media(min-width:701px) and (max-width:1000px){
 .card-print{padding:27px 22px}
 .invitation-card dl>div{display:block;margin-bottom:17px}
 .invitation-card dt{margin-bottom:4px}
 .invitation-card dd{font-size:13px}
 .invitation-card .tabs{gap:8px 18px}
}

/* Dominican echoes the printed invite; form controls retain their readable mono. */
.entry-date time{font-family:Dominican,Georgia,serif;letter-spacing:0;font-size:clamp(28px,2.6vw,39px);line-height:1.2}
.invitation-card dd{font:400 21px/1.35 Dominican,Georgia,serif;letter-spacing:.005em}
.invitation-card .success h2{font:400 25px/1.3 Dominican,Georgia,serif}
@media(max-width:700px){.entry-date time{font-size:30px}.invitation-card dd{font-size:20px}}
@media(max-width:360px){.entry-date time{font-size:26px}.invitation-card dd{font-size:19px}}
@media(min-width:701px) and (max-width:1000px){.entry-date time{font-size:27px}.invitation-card dd{font-size:20px}}

/* Center the opened correspondence beneath the existing date and painting. */
@media(min-width:701px){
 .invitation-open .correspondence{row-gap:30px}
 .letter-stage{grid-column:1 / -1;justify-self:center;max-width:520px}
 .invitation-card .card-print{padding:40px 42px}
 .invitation-card .card-print dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px}
 .invitation-card .card-print dd{font-size:22px}
 .invitation-card form{max-width:none}
}

/* Lit envelope owns only the presentation interval; the live card never moves. */
.opening-3d .invitation-card{opacity:0;pointer-events:none}
.envelope-webgl{position:absolute;z-index:6;pointer-events:none;max-width:none;display:block}
.opening-skip{position:absolute;inset:0;z-index:8;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;color:transparent;outline:none}
.opening-skip:hover,.opening-skip:focus{background:transparent;border:0;box-shadow:none}
.opening-skip:focus-visible{outline:1px dotted #897563;outline-offset:8px}
/* Validation stays outside the layout, so a corrected password cannot shift the painting. */
#login{position:relative}
#login>.error{position:absolute;top:100%;left:0;width:100%;margin-top:12px}
/* The invitation's fixed anchors do not participate in the old page-arrival tween. */
.locked main{animation:none}

/* A compact printed invitation; Dominican matches the date above. */
.invitation-card .card-print{font:400 21px/1.35 Dominican,Georgia,serif;padding:30px 36px 22px}
.letter-details p{margin:0 0 14px}
.letter-details p:last-child{margin-bottom:0}
.letter-address{line-height:1.35}
.invitation-card .logistics{font:400 16px/1.45 Dominican,Georgia,serif;margin:18px 0 14px;color:#776656;max-width:none}
.invitation-card .rsvp-deadline{font:400 15px/1.4 Dominican,Georgia,serif;margin:0;color:#776656}
.invitation-card .tabs{margin:0;gap:20px}
.invitation-card .tabs button{font:400 16px/1.3 Dominican,Georgia,serif;min-height:44px;padding:7px 0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.invitation-card .tabs button:hover{text-decoration-thickness:2px}
.invitation-card #rsvp-body:not([hidden]){padding-top:10px}
.invitation-card .field{font:400 15px/1.4 Dominican,Georgia,serif;margin-bottom:12px}
.invitation-card legend,.invitation-card .choice{font:400 15px/1.4 Dominican,Georgia,serif}
.invitation-card fieldset{margin-bottom:12px}
.invitation-card .field input,.invitation-card .field textarea{font:400 16px/1.4 var(--body)}
.invitation-card .primary,.invitation-card .text-button{font:400 16px/1.3 Dominican,Georgia,serif;min-height:44px;padding:10px 14px}
.invitation-card .success h2{font:400 22px/1.35 Dominican,Georgia,serif;letter-spacing:0}
@media(max-width:700px){.invitation-card .card-print{font-size:19px;padding:25px 24px 19px}.invitation-card .logistics{font-size:15px}.invitation-card .tabs{gap:18px}}

/* Printed card composition: centered invitation, quiet footer, practical form. */
.letter-stage{max-width:460px;justify-self:center}
.invitation-card .card-print{text-align:center;padding:40px 34px 28px}
.letter-details{max-width:360px;margin:0 auto}
.letter-details p{margin-bottom:22px}
.letter-details .letter-address{font-size:23px;line-height:1.4}
.invitation-card .logistics{max-width:310px;margin:24px auto 20px;font-size:15px;line-height:1.5}
.invitation-card .tabs{justify-content:center;gap:22px}
.invitation-card .rsvp-deadline{font-size:14px}
.invitation-card #rsvp-body:not([hidden]){padding-top:20px;text-align:left}
@media(max-width:700px){
 .letter-stage{max-width:380px}
 .invitation-card .card-print{padding:32px 22px 23px;font-size:18px}
 .letter-details p{margin-bottom:20px}
 .letter-details .letter-address{font-size:21px}
 .invitation-card .logistics{font-size:14px;margin:22px auto 18px;max-width:270px}
}

/* Bring the mobile invitation into view without moving its anchors on unlock. */
@media(max-width:700px){
 body.locked:not(.invitation-open) .shell{display:block;padding-top:32px;padding-bottom:44px}
 .locked .correspondence{margin-top:28px;gap:26px}
 .invitation-open .shell{padding-bottom:32px}
}

/* Fine irregular stock edges, rather than a perfectly cut rectangle. */
.invitation-card::before{clip-path:polygon(0 .3%,4% .12%,9% .35%,14% .08%,20% .28%,27% 0,34% .24%,41% .1%,49% .32%,57% .04%,65% .25%,74% .08%,83% .3%,91% .1%,100% .26%,99.7% 9%,99.95% 18%,99.65% 29%,100% 41%,99.75% 53%,99.95% 66%,99.6% 78%,99.9% 91%,100% 99.65%,91% 99.9%,81% 99.7%,72% 100%,63% 99.75%,54% 99.95%,44% 99.68%,35% 100%,25% 99.8%,15% 99.95%,5% 99.65%,0 99.9%,.3% 88%,.05% 75%,.35% 63%,0 51%,.25% 39%,.04% 26%,.3% 13%)}

/* The framed artwork turns as one object; the page underneath stays still. */
.painting-toggle{position:relative;display:block;flex:none;width:100%;aspect-ratio:1986 / 792;padding:0;border:0;background:none;color:var(--muted);perspective:2800px;isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.painting-lift{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform 280ms cubic-bezier(.2,.7,.2,1)}
.painting-rotor{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.45,0,.35,1);transform:rotateY(0deg)}
.painting-toggle.is-flipped .painting-rotor{transform:rotateY(180deg)}
.painting-face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 13px 24px -13px #37271e60;transition:box-shadow 280ms ease}
.painting-reverse{transform:rotateY(180deg)}
.locked .gate .painting-toggle .painting{width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;box-shadow:none;view-transition-name:none;user-select:none;-webkit-user-drag:none}
.painting-toggle:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.painting-toggle:disabled{opacity:1;cursor:default}
@media(min-width:701px){.painting-toggle{width:min(100%,calc(clamp(180px,43svh,430px) * 2.507576))}}
@media(hover:hover){.painting-toggle:not(:disabled):hover .painting-face{box-shadow:0 17px 32px -13px #37271e48}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.painting-toggle:not(:disabled):hover .painting-lift{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.painting-rotor,.painting-lift,.painting-face{transition:none}}

/* A small question for guests joining the table. */
form:not(:has(input[name="status"][value="attending"]:checked)) .favorite-animal{display:none}

/* Match the correspondence to the actual painting, including its height cap. */
@media(min-width:701px){
 .locked .correspondence{width:min(91%,calc(clamp(180px,43svh,430px) * 2.507576));margin-left:auto;margin-right:auto}
}
.entry-date{text-align:left}

/* Center RSVP form actions while keeping the fields left aligned. */
.invitation-card #response > .primary,
.invitation-card #lookup > .primary{display:block;margin-inline:auto}

/* Stop viewport rubber-banding without blocking longer invitations or forms. */
html,body{overscroll-behavior-y:none}

/* One centered anchor for the live card and its envelope overlay at every width. */
.letter-stage{margin-inline:auto;align-self:center;justify-self:center}

/* Animated paint may extend beyond the card without extending the document. */
.letter-stage{overflow:clip;overflow-clip-margin:240px}
form:not(:has(input[name="status"][value="attending"]:checked)) .dietary-field{display:none}
.letter-stage{contain:paint}
.invitation-open .shell{overflow:clip}

/* Directions read as part of the printed address. */
.directions-link{color:inherit;text-decoration:none}
.directions-link:hover{opacity:.8}
.directions-link:focus-visible{outline:1px solid currentColor;outline-offset:5px}

/* Responsive invitation: one artwork footprint before and after unlocking. */
.evening-times>span:not(.time-divider){white-space:nowrap}
@media(min-width:701px){
 .locked{--art-width:min(91%,calc(clamp(140px,calc(100svh - 550px),360px) * 2.507576))}
 .locked .shell,.locked.invitation-open .shell{padding-top:clamp(20px,3svh,32px);padding-bottom:24px}
 .locked .gate figure{width:var(--art-width);height:auto;aspect-ratio:1986 / 792;flex:none;margin-inline:auto}
 .locked .gate figure>.painting,.locked .gate .painting-toggle{width:100%;height:auto;max-height:none;max-width:100%}
 .locked .correspondence{width:var(--art-width);margin:22px auto 0;gap:20px 24px;container-type:inline-size}
 .locked.invitation-open .entry-date{grid-column:1 / -1}
 .invitation-card .card-print{padding:28px 30px 22px}
 .letter-details p{margin-bottom:16px}
 .invitation-card .logistics{margin:18px auto 14px}
}
/* A short desktop window narrows the painting. Keep its date on one row in
   both states, with the password beneath it rather than squeezing the date. */
@container(max-width:620px){
 .entry-date,#login{grid-column:1 / -1}
}
@media(max-width:700px){
 .locked.invitation-open .shell{padding-top:32px}
 .invitation-card #rsvp-body:not([hidden]){padding-top:12px}
 .invitation-card .field{margin-bottom:8px}
 .invitation-card .field input{padding-top:5px;padding-bottom:5px}
 .invitation-card .field textarea{min-height:48px;padding-top:5px;padding-bottom:5px}
 .invitation-card fieldset{margin-bottom:8px}
}
@media(max-width:360px){
 .evening-times>span:not(.time-divider){display:block}
 .evening-times .time-divider{display:none}
 .invitation-card .card-print{padding:24px 18px 20px}
}

/* Keep the wax in front of the live card without raising the envelope pocket. */
.envelope-seal{position:absolute;z-index:9;pointer-events:none;max-width:none;display:block}
.opening-skip{z-index:10}
.letter-stage.opening-3d{overflow:visible;contain:none}
@media(min-width:701px){
 .locked .entry-date{grid-column:1 / -1}
 .locked .gate #login{grid-column:1 / -1;justify-self:center;width:100%;max-width:300px}
}