/* Approved cloth opening; each design retains its own palette and composition. */
dialog.invitation-cover.fabric-cover{padding:0;background:transparent;perspective:none;overflow:hidden}
.fabric-stage{position:absolute;inset:0;background:var(--cover-ground)}
.fabric-sheet{--fabric-base:#12402e;--fabric-filter:none;--fabric-opacity:1;--fabric-blend:normal;position:absolute;inset:0 0 auto;height:calc(100svh - 110px);z-index:1;overflow:hidden;background:var(--fabric-base);box-shadow:inset 0 0 80px #061b1744}
.fabric-sheet::before{content:'';position:absolute;inset:0;background:url('images/fabric/forest-silk.webp') center/100% 100%;filter:var(--fabric-filter);opacity:var(--fabric-opacity);mix-blend-mode:var(--fabric-blend);pointer-events:none}
.fabric-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#061b1722,transparent 12%,transparent 86%,#061b1733)}
.fabric-cover .booklet-face{height:100%;max-height:none;width:100%;padding:24px 7vw 36px;background:transparent;display:grid;grid-template-columns:1fr 1.1fr;gap:5vw}
.fabric-cover .book-spine,.fabric-cover .book-botanical,.fabric-cover .book-edition{display:none}
.fabric-cover .cover-crest{position:relative;grid-column:1;grid-row:1;width:100%;height:75%;max-height:530px;justify-self:center;align-self:center;margin:0}
.fabric-cover .cover-crest img{width:100%;height:100%;object-fit:contain}
.fabric-cover .cover-content{grid-column:2;grid-row:1;align-self:center;justify-self:center;max-width:540px}
.fabric-cover #gate-title{font-size:clamp(60px,6.5vw,100px)}
.fabric-cover .cover-label{font-size:18px}
.fabric-cover .cover-city{font-size:25px}
.fabric-cover .invocation{font-size:17px}
.fabric-cover .cover-recipient{border-color:#e3c68b55;margin-top:22px}
.fabric-cover [data-recipient-label]{font-size:20px}
.fabric-cover [data-recipient-name]{font-size:28px}
.fabric-cover #open-invitation{font-size:20px;margin-top:20px;min-height:50px}
.fabric-hem{position:absolute;z-index:3;top:calc(100svh - 110px);left:0;width:100%;height:0;pointer-events:none}
.fabric-roll{position:absolute;top:-24px;left:0;width:100%;height:48px;transform-origin:50% 50%;border-radius:48% / 12%;background:var(--cover-paper);box-shadow:0 9px 22px #081a204d,inset 0 2px 3px #d0d5a629;overflow:hidden}
.fabric-roll::before{content:'';position:absolute;inset:0;background:url('images/fabric/forest-silk.webp') center 70%/100% auto;filter:var(--fabric-filter,none);opacity:var(--fabric-opacity,1);mix-blend-mode:var(--fabric-blend,normal)}
.fabric-roll::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#061d1866 0%,#fff7d928 19%,#fffbd833 34%,transparent 47%,#031b1466 90%,#071f1899)}
.fabric-flowers{--flower-height:100px;position:absolute;display:flex;justify-content:space-between;left:8%;top:9px;width:84%;height:var(--flower-height);transform-origin:50% 0;filter:drop-shadow(0 4px 3px #05120c3d)}
.fabric-flowers>span{align-self:flex-start;position:relative;display:block;width:calc(var(--flower-height)*.424);height:var(--flower-height);overflow:hidden;flex:none}.fabric-flowers img{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
@media(max-width:899px){
 .fabric-sheet{height:calc(100svh - 100px);background-size:auto 100%;background-position:center}
 .fabric-cover .booklet-face{display:flex;flex-direction:column;justify-content:center;gap:0;padding:20px 32px 30px}
 .fabric-cover .cover-crest{flex:none;height:clamp(110px,22svh,170px);width:165px;max-height:none;margin:0 0 10px}
 .fabric-cover .cover-content{flex:none;max-width:460px}
 .fabric-cover #gate-title{font-size:clamp(38px,10.5vw,54px)}
 .fabric-cover .invocation{font-size:13px;margin-bottom:5px}
 .fabric-cover .cover-label{font-size:15px;margin-bottom:10px}
 .fabric-cover .cover-city{font-size:20px;margin-top:12px}
 .fabric-cover .cover-recipient{margin-top:15px;padding-top:12px}
 .fabric-cover [data-recipient-label]{font-size:16px}
 .fabric-cover [data-recipient-name]{font-size:23px}
 .fabric-cover #open-invitation{font-size:19px;min-height:48px;margin-top:15px}
 .fabric-hem{top:calc(100svh - 100px)}
 .fabric-roll{height:36px;top:-18px}
 .fabric-flowers{--flower-height:92px;width:92%;left:4%;top:6px}
}
@media(max-height:660px) and (max-width:899px){
 .fabric-cover .booklet-face{padding:12px 30px 22px}
 .fabric-cover .cover-crest{height:96px;width:118px;margin-bottom:4px}
 .fabric-cover .cover-city{margin-top:8px;font-size:18px}
 .fabric-cover .cover-label{font-size:13px;margin-bottom:6px}
 .fabric-cover .cover-recipient{margin-top:10px;padding-top:8px}
 .fabric-cover #gate-title{font-size:37px}
 .fabric-cover #open-invitation{margin-top:10px}
}
@media(max-height:450px) and (orientation:landscape){
 .fabric-sheet{height:calc(100svh - 58px)}
 .fabric-cover .booklet-face{display:grid;grid-template-columns:35% 1fr;padding:14px 8vw 20px;gap:4vw}
 .fabric-cover .cover-crest{grid-column:1;grid-row:1;width:100%;height:90%;margin:0}
 .fabric-cover .cover-content{grid-column:2;grid-row:1}
 .fabric-cover #gate-title{font-size:33px}
 .fabric-cover .cover-label{display:none}
 .fabric-cover .invocation{font-size:11px}
 .fabric-cover .cover-city{font-size:15px;margin-top:5px}
 .fabric-cover .cover-recipient{margin-top:7px;padding-top:5px}
 .fabric-cover [data-recipient-label]{font-size:14px}
 .fabric-cover [data-recipient-name]{font-size:18px}
 .fabric-cover #open-invitation{font-size:16px;min-height:44px;margin-top:7px;padding:8px 16px}
 .fabric-hem{top:calc(100svh - 58px)}
 .fabric-flowers{--flower-height:55px}
}

/* Light and dark silks use the same original weave as a material layer. */
.fabric-cover[data-cover-palette=jaipur-rose]{--fabric-filter:grayscale(1) brightness(2.6);--fabric-opacity:.13;--fabric-blend:multiply}
.fabric-cover[data-cover-palette=jasmine]{--fabric-filter:grayscale(1) brightness(2.6);--fabric-opacity:.13;--fabric-blend:multiply}
.fabric-cover[data-cover-palette=rose-procession]{--fabric-filter:grayscale(1);--fabric-opacity:.65;--fabric-blend:luminosity}
.fabric-cover:not([data-cover-palette=courtyard]) .fabric-sheet{--fabric-base:var(--cover-paper);--fabric-filter:inherit;--fabric-opacity:inherit;--fabric-blend:inherit}
.fabric-cover[data-cover-palette=jasmine] .fabric-sheet{--fabric-base:#e1e7d3}
.fabric-cover[data-cover-palette=courtyard] .fabric-roll{background:#12402e}
.fabric-cover .fabric-sheet>.cover-face{height:100%;max-height:none;width:100%;background:transparent}
.fabric-cover .stationery-face{isolation:auto}
.fabric-cover .cover-watermark{z-index:1}
.fabric-cover .stationery-corner{z-index:1}
.fabric-cover .canopy-face{border-bottom:0}
.fabric-cover .canopy-face .cover-crest{height:clamp(95px,15svh,145px);width:165px}
.fabric-cover .canopy-face #gate-title{font-size:clamp(40px,7vw,82px)}
.fabric-cover .arch-face{padding:16px 5vw}
.fabric-cover .arch-portal{background:transparent;padding:28px 30px 22px;max-width:880px}
.fabric-cover .arch-face .cover-crest{height:clamp(94px,14svh,135px);width:155px}
.fabric-cover .arch-face #gate-title{font-size:clamp(40px,7vw,80px)}
.fabric-cover .arch-leaf{display:none}
@media(min-width:900px){.fabric-cover .canopy-face{padding:35px 100px}.fabric-cover .stationery-face{padding:35px 7vw}.fabric-cover .stationery-face .cover-content{grid-column:auto;grid-row:auto;align-self:auto;justify-self:auto}.fabric-cover .stationery-face #gate-title{font-size:clamp(65px,6.5vw,100px)}}
@media(max-width:899px){.fabric-cover .canopy-face{padding:40px 30px 26px}.fabric-cover .canopy-face #gate-title,.fabric-cover .arch-face #gate-title{font-size:clamp(38px,10.5vw,54px)}.fabric-cover .arch-portal{padding:32px 24px 24px}}
@media(max-height:660px) and (max-width:899px){.fabric-cover .canopy-face .cover-crest,.fabric-cover .arch-face .cover-crest{height:90px;width:115px}.fabric-cover .canopy-face #gate-title,.fabric-cover .arch-face #gate-title{font-size:37px}.fabric-cover .canopy-face{padding:24px 26px}.fabric-cover .arch-portal{padding:20px 22px}}
@media(max-height:450px) and (orientation:landscape){.fabric-cover .canopy-face{display:grid;grid-template-columns:30% 1fr;padding:22px 6vw}.fabric-cover .arch-portal{display:grid;grid-template-columns:30% 1fr;gap:14px;padding:18px 22px}.fabric-cover .canopy-face .cover-crest,.fabric-cover .arch-face .cover-crest{height:130px;width:95px}.fabric-cover .canopy-face #gate-title,.fabric-cover .arch-face #gate-title{font-size:33px}.fabric-cover .stationery-face{padding:16px 7vw}}

.fabric-cover[data-cover-palette=jaipur-rose] .fabric-roll::after,.fabric-cover[data-cover-palette=jasmine] .fabric-roll::after{background:linear-gradient(180deg,#5b493933,#fffaf233 25%,transparent 50%,#5b493944)}

@media(min-width:900px) and (max-height:800px){.fabric-cover:has([data-recipient-name]:not(:empty)) .booklet-face #gate-title,.fabric-cover:has([data-recipient-name]:not(:empty)) .stationery-face #gate-title{font-size:70px}.fabric-cover:has([data-recipient-name]:not(:empty)) [data-recipient-name]{font-size:24px}.fabric-cover:has([data-recipient-name]:not(:empty)) .cover-city{font-size:22px}}

/* Desktop: the fringe emerges with the roll instead of taking space from the card. */
@media(min-width:900px){
 .fabric-sheet{height:100svh}
 .fabric-hem{top:100svh}
 .fabric-roll{top:0;transform-origin:50% 0}
 .fabric-flowers{top:33px}
 .fabric-cover .fabric-sheet>.cover-face{padding-bottom:56px}
 .fabric-cover .canopy-face{max-width:none}
}
/* Fit the effective viewport of a laptop with browser chrome or display scaling. */
@media(min-width:900px) and (max-height:700px){
 .fabric-cover .cover-face #gate-title,
 .fabric-cover:has([data-recipient-name]:not(:empty)) .cover-face #gate-title{font-size:clamp(42px,8.5svh,60px)}
 .fabric-cover .invocation{font-size:14px;margin-bottom:4px}
 .fabric-cover .cover-label{font-size:15px;margin-bottom:8px}
 .fabric-cover .cover-city,
 .fabric-cover:has([data-recipient-name]:not(:empty)) .cover-city{font-size:20px;margin-top:9px}
 .fabric-cover .cover-recipient{margin-top:12px;padding-top:10px}
 .fabric-cover [data-recipient-label]{font-size:17px}
 .fabric-cover [data-recipient-name],
 .fabric-cover:has([data-recipient-name]:not(:empty)) [data-recipient-name]{font-size:22px}
 .fabric-cover #open-invitation{font-size:18px;min-height:48px;margin-top:12px}
 .fabric-cover .stationery-face{padding-top:24px}
 .fabric-cover .stationery-face .cover-recipient{padding-top:0}
 .fabric-cover .booklet-face #gate-title i{margin:5px 0}
 .fabric-cover .canopy-face .cover-crest,.fabric-cover .arch-face .cover-crest{height:clamp(70px,13svh,95px);width:130px}
 .fabric-cover .canopy-face #gate-title,.fabric-cover .arch-face #gate-title{font-size:clamp(52px,12svh,80px)}
}
@media(min-width:900px) and (max-height:550px){
 .fabric-cover .booklet-face .cover-recipient{margin-top:8px;padding-top:6px}
 .fabric-cover .booklet-face #open-invitation{margin-top:10px}
}

/* Preserve the artwork and Open clearance when a household or couple name is long. */
.fabric-cover.cover-compact .cover-face{padding-top:10px;padding-bottom:12px}
.fabric-cover.cover-compact .cover-crest{height:70px;width:96px;margin-bottom:2px}
.fabric-cover.cover-compact .arch-portal{padding:10px 14px}
.fabric-cover.cover-compact .invocation{margin-bottom:2px;font-size:11px}
.fabric-cover.cover-compact .cover-label{margin-bottom:3px;font-size:12px}
.fabric-cover.cover-compact #gate-title{font-size:30px;line-height:1.02;overflow-wrap:anywhere}
.fabric-cover.cover-compact .cover-city{font-size:15px;margin-top:4px}
.fabric-cover.cover-compact .cover-recipient{margin-top:5px;padding-top:4px}
.fabric-cover.cover-compact [data-recipient-label]{font-size:13px}
.fabric-cover.cover-compact [data-recipient-name]{font-size:17px;line-height:1.12}
.fabric-cover.cover-compact #open-invitation{margin-top:5px;min-height:44px;font-size:16px;padding:8px 14px}
.fabric-cover.cover-tiny .cover-crest{height:54px;width:76px}
.fabric-cover.cover-tiny #gate-title{font-size:25px}
.fabric-cover.cover-tiny .cover-label{display:none}

.fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest{position:relative;display:block;isolation:isolate}
.fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest::before{content:"";position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none}
.fabric-cover[data-cover-palette=jasmine] .cover-crest::before{background-image:url('images/shrine-niche.webp')}
.fabric-cover[data-cover-palette=rose-procession] .cover-crest::before{background-image:url('images/rose-alcove.webp')}
.fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest img{position:absolute;left:20%;bottom:10%;width:60%;height:62%;object-fit:contain}
.fabric-cover[data-cover-palette=jasmine] .canopy-crown{display:none}
@media(min-width:900px){
 .fabric-cover[data-cover-palette=jasmine] .canopy-face{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3vw;align-items:center;padding:3vh 6vw}
 .fabric-cover[data-cover-palette=rose-procession] .arch-portal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:3vw;align-items:center;max-width:none;padding:3vh 4vw}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest{width:100%;height:min(70svh,520px);max-height:none;grid-row:1;margin:0}
 .fabric-cover[data-cover-palette=jasmine] .cover-crest{grid-column:1}
 .fabric-cover[data-cover-palette=rose-procession] .cover-crest{grid-column:2}
 .fabric-cover[data-cover-palette=jasmine] .cover-content{grid-column:2;grid-row:1}
 .fabric-cover[data-cover-palette=rose-procession] .cover-content{grid-column:1;grid-row:1}
}
@media(max-width:899px) and (min-height:451px){
 .fabric-cover[data-cover-palette=jasmine] .canopy-face,.fabric-cover[data-cover-palette=rose-procession] .arch-portal{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto auto auto;gap:0 6px;align-content:center;justify-items:center}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-content{display:contents}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest{grid-column:2;grid-row:1;width:165px;height:150px;margin:0}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .invocation{grid-column:1;grid-row:1;align-self:center;margin:0}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-label{grid-column:1/-1;grid-row:2}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) #gate-title{grid-column:1/-1;grid-row:3}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-city{grid-column:1/-1;grid-row:4}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-recipient{grid-column:1/-1;grid-row:5}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) #open-invitation{grid-column:1/-1;grid-row:6}
 .fabric-cover:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) [data-invite-notice]{grid-column:1/-1;grid-row:7}
 .fabric-cover.cover-compact:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest{width:110px;height:100px}
 .fabric-cover.cover-tiny:is([data-cover-palette=jasmine],[data-cover-palette=rose-procession]) .cover-crest{width:90px;height:80px}
}

@media(max-width:899px) and (min-height:451px){.fabric-cover[data-cover-palette=jasmine] .cover-crest{grid-column:1}.fabric-cover[data-cover-palette=jasmine] .invocation{grid-column:2}}

@media(max-width:899px) and (max-height:660px){
 .fabric-cover[data-cover-palette=jasmine].cover-compact .cover-crest::before{clip-path:inset(12% 0 0 14%)}
 .fabric-cover[data-cover-palette=jasmine].cover-compact .cover-crest{width:120px;height:110px}
 .fabric-cover[data-cover-palette=jasmine].cover-compact .cover-crest img{height:84%;width:70%;left:15%;bottom:11%}
}

@media(max-height:450px) and (orientation:landscape){.fabric-cover[data-cover-palette=rose-procession] .arch-portal{grid-template-columns:1fr 30%}.fabric-cover[data-cover-palette=rose-procession] .cover-crest{grid-column:2;grid-row:1}.fabric-cover[data-cover-palette=rose-procession] .cover-content{grid-column:1;grid-row:1}}

@media(max-height:450px) and (orientation:landscape){.fabric-cover[data-cover-palette=jasmine] .cover-crest::before{clip-path:inset(12% 0 0 14%)}.fabric-cover[data-cover-palette=jasmine] .cover-crest img{height:75%;width:70%;left:15%;bottom:9%}}

@media(max-height:660px){.fabric-cover[data-cover-palette=jasmine] .cover-crest::after{content:"";position:absolute;z-index:2;right:-8px;bottom:0;width:38px;height:38px;background:url("images/shrine-lamp.webp") center/contain no-repeat;pointer-events:none}}