/* Original stationery sheets stay square: the same complete artwork on every screen. */
.collection-art{display:block;background-image:var(--art-url);background-size:300% 200%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat;aspect-ratio:1}
.public-design-cover:has(.collection-art){aspect-ratio:1;min-height:0;height:auto}
.public-design-cover>.collection-art,.design-cover>.collection-art{position:absolute;inset:0;width:100%;height:100%}
.public-design-cover:has(.collection-art) .public-design-type{inset:15% 18% 17%;color:var(--design-ink);padding:0;background:transparent;justify-content:center}
.public-design-cover:has(.collection-art) .public-design-type strong{font-size:clamp(30px,3.4vw,48px);line-height:1.04}
.public-design-cover:has(.collection-art) .public-design-type>span{font-size:10px;letter-spacing:.1em;margin-bottom:14px}
.public-design-cover:has(.collection-art) .public-design-type small{font-size:10px;margin-top:16px}
.public-design-cover:has(.collection-art) .public-cover-action{background:#fffffff0;color:#243e35}
.opening-options .collection-art{display:block;width:100%;height:auto;padding:0;background-image:var(--art-url);background-size:300% 200%;background-position:var(--art-x) var(--art-y)}
.studio-choice-art{width:100%;height:auto!important;min-height:0;object-fit:cover}
.studio-design-card:has(.collection-art){display:flex;flex-direction:column}
.chosen-theme-art{width:90px;height:90px;flex:0 0 90px}
.design-cover:has(.collection-art){aspect-ratio:1;min-height:0;height:auto}
.design-cover:has(.collection-art) .design-cover-type{padding:15%;color:var(--design-ink);background:transparent}
.design-cover:has(.collection-art) .design-cover-type strong{font-size:42px}
body[data-edition=new] .stationery-scene{min-height:0;container-type:inline-size}
body[data-edition=new] .theme-scene{min-height:0;aspect-ratio:1;max-width:610px;margin:auto;overflow:hidden}
body[data-edition=new] .theme-picture{width:100%;height:100%;inset:0;z-index:-1;aspect-ratio:1;object-fit:initial}
body[data-edition=new] .invitation-card{width:70%;max-width:none;padding:20px 16px;position:relative;z-index:1}
body[data-edition=new] .invitation-card h2{font-size:clamp(42px,9.5cqw,66px);line-height:.98;margin:0;letter-spacing:-.035em}
body[data-edition=new] .invitation-card h2 span{font-size:.55em;margin:5px 0;line-height:.9}
body[data-edition=new] .card-kicker{font-size:11px;line-height:1.5;letter-spacing:.12em;max-width:100%;margin:0 auto 18px}
body[data-edition=new] .card-script{font-size:21px;margin:13px 0}
body[data-edition=new] .card-date{font-size:13px;line-height:1.5;margin:13px 0}
body[data-edition=new] .card-venue{font-size:22px;line-height:1.2;margin:5px 0}
body[data-edition=new] .card-rule{font-size:15px;margin:12px 0}
body[data-edition=new] .card-closing,body[data-edition=new] .card-time,body[data-edition=new] .edition-number,body[data-edition=new] .scene-tag{display:none}
body[data-edition=new] .welcome-copy h1{font-size:clamp(44px,4.6vw,65px)}
body[data-edition=new] .venue-card{border:1px solid var(--line);padding:32px}
body[data-edition=new] #studio-menu{padding:30px;border-top:3px double var(--coral)}
body[data-edition=new] .day{margin-bottom:14px;border-bottom:1px solid var(--line)}
body[data-edition=new] .dress-note{padding:25px;border-radius:0}
body[data-dark=true] .wordmark img{filter:invert(1)}
body[data-dark=true] .demo-note{background:#ffffff12;color:var(--ink)}
body[data-dark=true] .rsvp-paper{background:#ffffff09}
/* Landscape below a floating, unbordered olive letter. */
[data-layout=olive] .theme-scene{align-items:flex-start}
body[data-layout=olive] .invitation-card{width:70%;padding:8% 5% 4%}
body[data-layout=olive] .card-kicker{margin-bottom:12px}
body[data-layout=olive] .invitation-card h2{font-style:italic;font-size:clamp(38px,9cqw,62px)}
body[data-layout=olive] .card-script,body[data-layout=olive] .card-rule{display:none}
body[data-layout=olive] .card-date{margin-top:17px}
body[data-layout=olive] .venue-card{border:0;border-left:3px solid var(--coral)}
/* Picnic centre with a strong top and bottom rule. */
body[data-layout=citrus] .invitation-card{width:57%;padding:14px 4px;border-block:1px solid var(--ink);background:#fff9e8d9}
body[data-layout=citrus] .invitation-card h2{font-style:italic;font-size:clamp(38px,8.5cqw,58px)}
body[data-layout=citrus] .card-rule,body[data-layout=citrus] .card-script{display:none}
body[data-layout=citrus] #studio-menu{outline:1px solid var(--coral);outline-offset:-8px;text-align:center}
/* A porcelain oval, held inside the hydrangea border. */
body[data-layout=hydrangea] .invitation-card{width:67%;border:1px solid #7995b899;border-radius:50%;padding:9% 6%;background:#fffef38c}
body[data-layout=hydrangea] .card-kicker,body[data-layout=hydrangea] .card-rule{display:none}
body[data-layout=hydrangea] .invitation-card h2{font-size:clamp(39px,9cqw,62px)}
body[data-layout=hydrangea] .venue-card{border-radius:100px 100px 0 0;text-align:center;padding-top:48px}
body[data-layout=hydrangea] #studio-menu{border:1px solid var(--ink);text-align:center}
/* An asymmetric quiet note beneath the blossom. */
body[data-layout=sakura] .invitation-card{width:63%;margin-left:12%;text-align:left;padding:4% 6%;border-left:1px solid #a35d6580;background:#fff5e976}
body[data-layout=sakura] .card-kicker{margin-left:0;font-size:10px}
body[data-layout=sakura] .invitation-card h2{font-size:clamp(40px,9cqw,63px)}
body[data-layout=sakura] .invitation-card h2 span{display:inline;margin:0 .15em}
body[data-layout=sakura] .card-rule{width:45px;margin:16px 0}
body[data-layout=sakura] .card-script{display:none}
body[data-layout=sakura] .day{border-left:1px solid var(--coral);padding-left:18px}
/* A forest clearing with glowing, framed typography. */
body[data-layout=woodland] .invitation-card{width:64%;padding:7% 5%;border:1px solid #e4d7a260;border-radius:45% 45% 5px 5px;background:#122c25cf;box-shadow:0 0 55px #dccf9520}
body[data-layout=woodland] .card-kicker{font-size:10px;max-width:160px}
body[data-layout=woodland] .card-script{display:none}
body[data-layout=woodland] .venue-card,body[data-layout=woodland] .rsvp-paper{border-radius:65px 65px 0 0}
body[data-layout=woodland] .theme-picture{animation:clearing-light 8s ease-in-out infinite}
/* Offset arch and sculptural, stacked type. */
body[data-layout=desert] .invitation-card{width:62%;margin-left:-5%;padding:10% 6% 7%;border-radius:50% 50% 0 0;background:#fff0dcce}
body[data-layout=desert] .invitation-card h2{font-weight:500;font-size:clamp(40px,9cqw,62px)}
body[data-layout=desert] .card-kicker,body[data-layout=desert] .card-script{display:none}
body[data-layout=desert] .venue-card{border-radius:120px 120px 0 0;text-align:center;padding-top:55px}
body[data-layout=desert] .day{background:#d8aa7420;padding:8px 18px}
/* A tall courtyard frame, deliberately finer than the desert arch. */
body[data-layout=marrakech] .invitation-card{width:59%;margin-top:6%;padding:8% 3%;background:#ffe9c9e3;border:3px double var(--coral);border-radius:45% 45% 2px 2px}
body[data-layout=marrakech] .card-kicker,body[data-layout=marrakech] .card-script{display:none}
body[data-layout=marrakech] .invitation-card h2{font-size:clamp(36px,8.7cqw,58px)}
body[data-layout=marrakech] #studio-menu{border:3px double var(--ink);text-align:center}
/* Alpine travel stationery: picture above, invitation below. */
body[data-layout=alpine] .theme-scene{display:block;aspect-ratio:auto;background:#fcfcf7;border:9px solid #fff;box-shadow:0 10px 35px #27495616}
body[data-layout=alpine] .theme-picture{position:relative;height:auto;aspect-ratio:1;max-height:none;width:100%;z-index:0}
body[data-layout=alpine] .invitation-card{width:100%;max-width:none;padding:25px 20px 30px;margin-top:-13%;background:#fcfcf7;z-index:1;border-top:1px solid #becbd0}
body[data-layout=alpine] .invitation-card h2{font-size:clamp(36px,8cqw,52px)}
body[data-layout=alpine] .invitation-card h2 span{display:inline;margin:0 .15em}
body[data-layout=alpine] .card-script,body[data-layout=alpine] .card-rule{display:none}
body[data-layout=alpine] .card-kicker{font-size:10px;margin-bottom:12px}
body[data-layout=alpine] .card-date{margin:10px}
body[data-layout=alpine] .card-venue{font-size:20px}
body[data-layout=alpine] .day{border:1px solid var(--line);padding:10px 22px}
/* Palm Springs: bold type low on the cover, ample sky above. */
body[data-layout=palms] .theme-scene{align-items:flex-end}
body[data-layout=palms] .invitation-card{width:90%;text-align:left;background:#ffe8cddf;border-radius:70px 0 0 0;padding:7% 6% 4%;margin-bottom:3%}
body[data-layout=palms] .invitation-card h2{font-family:var(--sans);font-weight:600;font-size:clamp(37px,9cqw,60px);letter-spacing:-.075em}
body[data-layout=palms] .invitation-card h2 span{display:inline;margin:0 .1em}
body[data-layout=palms] .card-kicker{margin-left:0;margin-bottom:12px;font-size:10px}
body[data-layout=palms] .card-script,body[data-layout=palms] .card-rule{display:none}
body[data-layout=palms] .card-date{margin:10px 0}
body[data-layout=palms] .welcome-copy h1{font-family:var(--sans);letter-spacing:-.06em}
body[data-layout=palms] .venue-card,body[data-layout=palms] .rsvp-paper{border-radius:50px 0 0 0}
/* Provence: a tucked-in note with a lightly turned edge. */
body[data-layout=lavender] .invitation-card{width:57%;margin-left:16%;margin-top:-12%;padding:5% 3%;background:#fff9e9e8;transform:rotate(3deg);box-shadow:5px 10px 24px #4e385421}
body[data-layout=lavender] .invitation-card h2{font-style:italic;font-size:clamp(34px,8cqw,54px)}
body[data-layout=lavender] .card-kicker{font-size:10px}
body[data-layout=lavender] .card-script,body[data-layout=lavender] .card-rule{display:none}
body[data-layout=lavender] .card-venue{font-size:20px}
body[data-layout=lavender] .dress-note{border:1px dashed var(--coral)}
/* Deco uses stepped geometry and widely tracked capitals. */
body[data-layout=deco] .invitation-card{width:65%;padding:7% 4%;border-block:3px double #d8b579}
body[data-layout=deco] .invitation-card h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(30px,7.3cqw,48px);letter-spacing:.06em}
body[data-layout=deco] .card-kicker{font-size:10px;letter-spacing:.16em}
body[data-layout=deco] .card-script{font:10px var(--sans);text-transform:uppercase;letter-spacing:.17em}
body[data-layout=deco] .card-rule{margin:9px}
body[data-layout=deco] .day,body[data-layout=deco] .rsvp-paper{border:3px double var(--coral);padding:12px 22px}
body[data-layout=deco] #studio-menu{text-align:center;border:3px double var(--coral)}
/* Champagne has a soft pill-shaped toast card beside the coupe tower. */
body[data-layout=champagne] .invitation-card{width:60%;margin-left:6%;padding:8% 4%;background:#fff8e8bd;border-radius:100px;border:1px solid #98754445}
body[data-layout=champagne] .invitation-card h2{font-style:italic;font-size:clamp(36px,8.5cqw,58px)}
body[data-layout=champagne] .card-kicker{font-size:10px}
body[data-layout=champagne] .card-rule,body[data-layout=champagne] .card-script{display:none}
body[data-layout=champagne] .venue-card{border-radius:90px 90px 0 0;text-align:center;padding-top:50px}
/* A bright red bow, with compact formal type inside the scalloped artwork. */
body[data-layout=bow] .invitation-card{width:61%;padding:6% 2% 0;margin-top:9%}
body[data-layout=bow] .invitation-card h2{font-style:italic;font-size:clamp(38px,9cqw,64px)}
body[data-layout=bow] .card-kicker,body[data-layout=bow] .card-script{display:none}
body[data-layout=bow] .card-rule{margin:12px}
body[data-layout=bow] .venue-card,body[data-layout=bow] #studio-menu{border:1px solid var(--coral);outline:1px solid var(--coral);outline-offset:-7px;text-align:center}
/* The editorial lily card uses a deliberately asymmetric black rule. */
body[data-layout=ink] .invitation-card{width:59%;margin-left:9%;text-align:left;padding:5% 0;border-left:4px solid var(--ink);padding-left:20px}
body[data-layout=ink] .invitation-card h2{font-family:var(--sans);font-weight:600;font-size:clamp(32px,8cqw,56px);letter-spacing:-.07em}
body[data-layout=ink] .card-kicker{font-size:10px;margin-left:0}
body[data-layout=ink] .card-script,body[data-layout=ink] .card-rule{display:none}
body[data-layout=ink] .card-venue{font:16px var(--sans)}
body[data-layout=ink] .welcome-copy h1,body[data-layout=ink] .page-intro h1{font-family:var(--sans);letter-spacing:-.07em}
body[data-layout=ink] .venue-card{border:0;border-top:4px solid var(--ink)}
/* Meadow is an open field note, with generous yellow space. */
body[data-layout=meadow] .invitation-card{width:66%;padding:4%;margin-top:-8%}
body[data-layout=meadow] .invitation-card h2{font-style:italic;font-size:clamp(42px,10cqw,68px)}
body[data-layout=meadow] .card-kicker{font-size:10px;letter-spacing:.16em}
body[data-layout=meadow] .card-rule,body[data-layout=meadow] .card-script{display:none}
body[data-layout=meadow] .day{border-radius:25px;background:#d9c66420;padding:8px 20px}
/* Dawn's circular paper floats inside the cloudscape. */
body[data-layout=dawn] .invitation-card{width:73%;aspect-ratio:1;padding:6%;display:flex;flex-direction:column;justify-content:center;border-radius:50%;background:#fff4e8ba;border:1px solid #c5a67566}
body[data-layout=dawn] .invitation-card h2{font-size:clamp(40px,9cqw,62px)}
body[data-layout=dawn] .card-kicker,body[data-layout=dawn] .card-script{display:none}
body[data-layout=dawn] .card-rule{margin:9px}
body[data-layout=dawn] .card-date{margin:7px}
body[data-layout=dawn] .rsvp-paper{border-radius:70px 70px 0 0}
/* Ballroom lettering sits below the chandelier, inside the architectural frame. */
body[data-layout=ballroom] .invitation-card{width:56%;padding:4% 0;margin-top:8%}
body[data-layout=ballroom] .invitation-card h2{font-size:clamp(37px,8.5cqw,59px)}
body[data-layout=ballroom] .card-kicker{font-size:10px;margin-bottom:12px}
body[data-layout=ballroom] .card-script{display:none}
body[data-layout=ballroom] .card-rule{margin:10px}
body[data-layout=ballroom] .card-date{font-size:12px;margin:10px}
body[data-layout=ballroom] .card-venue{font-size:21px}
body[data-layout=ballroom] .venue-card,body[data-layout=ballroom] #studio-menu{border:3px double var(--coral);text-align:center}
/* The festival ticket: a clear perforation, giant names and an admission stub. */
body[data-layout=festival] .invitation-card{width:66%;margin-top:4%;padding:5% 3%;background:#fff5dedb;border-block:2px dashed var(--coral)}
body[data-layout=festival] .invitation-card h2{font-family:var(--sans);font-size:clamp(33px,8.5cqw,59px);font-weight:600;letter-spacing:-.06em}
body[data-layout=festival] .invitation-card h2 span{display:inline;margin:0 .1em}
body[data-layout=festival] .card-kicker{font-size:10px;letter-spacing:.12em}
body[data-layout=festival] .card-script,body[data-layout=festival] .card-rule{display:none}
body[data-layout=festival] .day{padding:8px 20px;border:1px dashed var(--coral);box-shadow:4px 4px 0 #c2895830}
body[data-layout=festival] .welcome-copy h1{font-family:var(--sans);font-weight:600;letter-spacing:-.06em}
/* Six tactile reveals. The artwork is the paper, with accessible text over it. */

/* Motion stays quiet and is always optional. */
@keyframes clearing-light{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.12)}}
.motion-paused .collection-art{animation:none!important}
h1[tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:reduce){.collection-art{animation:none!important}}
@media(max-width:760px){
 .main{overflow-x:clip}
 body:not([data-theme=garden]) .main{padding:20px 18px 32px}
 body:not([data-theme=garden]) .stationery-scene{max-width:500px;margin-bottom:28px}
 body:not([data-theme=garden]) .welcome-copy{max-width:500px;margin:auto;padding:15px 4px}
 body:not([data-theme=garden]) .welcome-copy h1{font-size:clamp(39px,10vw,52px)}
 body:not([data-theme=garden]) .details-layout,body:not([data-theme=garden]) .rsvp-layout{max-width:550px;margin:auto}
 body:not([data-theme=garden]) .event-essentials{padding:18px 0;border-block:1px solid var(--line)}
 body:not([data-theme=garden]) .countdown{gap:22px;margin-top:20px;padding-top:5px}
 body:not([data-theme=garden]) .countdown b{font-size:32px}
 body:not([data-theme=garden]) .card-time{display:none}
 body[data-layout=arch] .card-closing{display:none}
 body[data-layout=arch] .theme-scene{min-height:550px}
 body[data-layout=arch] .invitation-card{padding:95px 40px 110px!important}
 body[data-layout=tile] .theme-scene{min-height:590px}
 body[data-layout=tile] .invitation-card{padding:65px 42px 155px!important}
 body[data-layout=tile] .invitation-card h2{font-size:clamp(45px,14vw,60px)}
 body[data-layout=scrapbook] .theme-scene{min-height:620px}
 body[data-layout=scrapbook] .invitation-card h2{font-size:clamp(38px,12vw,50px)!important}
 body[data-layout=scrapbook] .card-closing{display:none}
 body[data-layout=constellation] .theme-scene{min-height:540px}
 body[data-layout=editorial] .theme-scene{min-height:540px}
 body[data-layout=party] .theme-scene{min-height:550px}
 body[data-edition=new] .invitation-card{padding-block:6%}
 body[data-edition=new] .card-kicker{font-size:9px;line-height:1.4;margin-bottom:12px}
 body[data-edition=new] .card-script{font-size:16px;margin:9px 0}
 body[data-edition=new] .card-date{font-size:11px;margin:9px 0;letter-spacing:.02em}
 body[data-edition=new] .card-venue{font-size:18px}
 body[data-edition=new] .card-rule{font-size:12px;margin:8px 0}
 body[data-edition=new] .invitation-card h2{font-size:clamp(32px,10cqw,52px)}
 body[data-layout=olive] .invitation-card{padding-top:7%}
 body[data-layout=olive] .invitation-card h2{font-size:clamp(34px,10cqw,52px)}
 body[data-layout=ink] .invitation-card h2,body[data-layout=palms] .invitation-card h2,body[data-layout=festival] .invitation-card h2{font-size:clamp(30px,9cqw,46px)}
 body[data-layout=palms] .invitation-card h2 span,body[data-layout=festival] .invitation-card h2 span{margin-inline:.2em}
 body[data-layout=deco] .invitation-card h2{font-size:clamp(29px,8.5cqw,42px)}
 body[data-layout=deco] .card-script{font-size:9px}
 body[data-layout=lavender] .invitation-card h2{font-size:clamp(31px,9cqw,45px)}
 body[data-layout=alpine] .invitation-card{padding:22px 14px}
 body[data-layout=alpine] .invitation-card h2{font-size:clamp(32px,8.5cqw,43px)}
 body[data-layout=ballroom] .card-kicker{max-width:135px;margin-bottom:10px}
 .public-design-cover:has(.collection-art) .public-design-type strong{font-size:clamp(32px,10vw,48px)}
 .public-design-cover:has(.collection-art) .public-design-type small{font-size:10px}

}
/* Very long names stay within the card without shrinking the guest controls. */
body[data-edition=new] .invitation-card h2[data-long=true]{font-size:clamp(24px,7cqw,43px);line-height:1.06}
body[data-edition=new] .invitation-card:has(h2[data-long=true]) .card-kicker{display:none}