/* Royal Ivory: isolated ivory stationery, indigo type and antique gold artwork. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500&display=swap');
.opening-overlay.op-ivory{padding:54px 14px 28px;background:#F8F2E6;color:#20264B;display:flex;flex-direction:column;justify-content:center;gap:12px;isolation:isolate}
.op-ivory .ri-fold{position:relative;flex:none;width:min(100%,calc((100dvh - 116px) * 2 / 3));aspect-ratio:2/3;perspective:1400px;direction:ltr;filter:drop-shadow(0 10px 18px #6c4d2826)}
.ri-reveal-sheet,.ri-flap{position:absolute;inset:0;background-color:#F8F2E6}
.ri-sheet-art{width:100%;height:100%;display:block;object-fit:fill}
.ri-flap{width:50%;z-index:2;backface-visibility:hidden;background-image:url('/themes/royal-ivory/cover.webp');background-size:200% 100%;transition:transform 2.25s cubic-bezier(.25,.1,.15,1) .3s;will-change:transform}
.ri-flap-left{right:auto;background-position:left;transform-origin:left center;border-right:1px solid #96714266}
.ri-flap-right{left:auto;background-position:right;transform-origin:right center;border-left:1px solid #fff6de80}
.op-ivory.is-opening .ri-flap-left{transform:rotateY(-112deg)}
.op-ivory.is-opening .ri-flap-right{transform:rotateY(112deg)}
.ri-reveal-copy{position:absolute;top:23%;left:17%;right:17%;bottom:37%;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center;overflow:auto;scrollbar-width:thin;color:#20264B}
.ri-reveal-copy p{font:14px/1.6 Georgia,serif;margin:0}
.ri-reveal-copy strong{font:italic 34px/1.1 'Cormorant Garamond',Georgia,serif;font-weight:400;overflow-wrap:anywhere}
.ri-reveal-copy strong span,.ri-reveal-copy em{display:block}.ri-reveal-copy em{font-size:24px;line-height:1.4}
.ri-monogram,.ri-enter{position:absolute;z-index:3;left:50%;transform:translate(-50%,-50%);border:0;cursor:pointer;transition:opacity .25s,visibility .25s;color:#20264B}
.ri-monogram{top:50%;width:30%;height:20%;background:transparent;font:italic 34px/1.2 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere;padding:8px}
.ri-monogram span{display:block;max-height:100%;overflow:hidden}
.ri-enter{bottom:5%;transform:translateX(-50%);width:72%;min-height:44px;padding:10px 8px;border:1px solid #B39155;background:#F8F2E6f2;font:11px/1.5 Georgia,serif;letter-spacing:1.4px;text-transform:uppercase}
.op-ivory.is-opening :is(.ri-monogram,.ri-enter){display:none!important;opacity:0;visibility:hidden;pointer-events:none}
.ri-skip{position:absolute;top:8px;right:12px;z-index:5;border:0;background:#F8F2E6;color:#20264B;min-height:44px;padding:8px 12px;font:12px/1.5 Georgia,serif;cursor:pointer}
.ri-opening-brand{font:8px/1.6 Arial,sans-serif;letter-spacing:2px;text-align:center;color:#20264B;margin:0}
.op-ivory button:focus-visible{outline:3px solid #20264B;outline-offset:3px}
body[data-theme=ivory] #invitation{background:var(--paper,#F8F2E6);color:var(--base-text,#20264B)}
body[data-theme=ivory] #invitation .topbar{background:var(--paper);color:var(--base-text);border-bottom:1px solid var(--gold);padding:16px 22px}
body[data-theme=ivory] #invitation .topbar :is(.monogram,a,button){color:var(--base-text)}
body[data-theme=ivory] #invitation .ri-hero{display:block;min-height:0;padding:0 10px;background:var(--paper);border:0;overflow:hidden}
body[data-theme=ivory] #invitation .ri-hero:before,body[data-theme=ivory] #invitation .ri-hero:after{display:none}
.ri-arch{width:100%;aspect-ratio:1024/380;overflow:hidden;position:relative;pointer-events:none}
.ri-arch img{display:block;width:100%;height:auto;max-width:none}
.ri-garden{width:100%;aspect-ratio:1024/570;overflow:hidden;position:relative;pointer-events:none}
.ri-garden img{position:absolute;bottom:0;left:0;display:block;width:100%;height:auto;max-width:none}
.ri-hero-copy{border-inline:3px double var(--gold);margin-inline:1%;padding:0 32px 14px;text-align:center}
.ri-hero-copy p{font:17px/1.8 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere;margin:14px 0;color:var(--base-text)}
.ri-hero-copy .ri-bismillah{font:24px/1.8 Georgia,serif;margin-top:0}
.ri-guest{font-style:italic!important}.ri-guest strong{display:block;font-weight:500}
body[data-theme=ivory] #invitation .ri-names{font:italic 52px/1.12 'Cormorant Garamond',Georgia,serif;color:var(--base-heading);margin:25px 0;overflow-wrap:anywhere}
.ri-names span,.ri-names em{display:block}.ri-names em{font:italic 28px/1.5 Georgia,serif;color:var(--base-heading)}
.ri-divider{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold,#B39155);margin:18px auto;max-width:180px;font:24px/1 Georgia,serif}
.ri-divider:before,.ri-divider:after{content:'';height:1px;background:var(--gold,#B39155);width:46px}
.ri-hero-copy .ri-date{font-size:16px;border-block:1px solid var(--line);padding:12px 0}
.ri-explore{display:inline-flex;align-items:center;min-height:44px;font:12px/1.6 Georgia,serif;color:var(--base-link);text-decoration:none}
.ri-portrait{display:block;width:80%;max-height:250px;object-fit:cover;margin:20px auto;border-radius:120px 120px 2px 2px;border:3px double var(--gold)}
body[data-theme=ivory] #invitation .ri-section{padding:0 12px 20px;margin:22px 0;border:3px double var(--gold);background:var(--paper);color:var(--base-text);overflow:hidden}
.ri-section .ri-arch{margin:0 -9px;width:calc(100% + 18px);aspect-ratio:1024/260}
.ri-frame-copy{padding:14px 14px 10px;position:relative;min-width:0}
body[data-theme=ivory] #invitation .section h2{font:400 36px/1.15 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere;margin:12px 0 24px;color:var(--base-heading)}
body[data-theme=ivory] #invitation .section h3{font-family:'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere}
body[data-theme=ivory] #invitation .small{font:10px/1.8 Georgia,serif;letter-spacing:1.4px;color:var(--base-muted);overflow-wrap:anywhere}
body[data-theme=ivory] #invitation .ri-events{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
body[data-theme=ivory] #invitation .ri-event{padding:36px 18px 24px;border:3px double var(--gold);border-radius:130px 130px 2px 2px;background:var(--paper);color:var(--base-text);box-shadow:none;min-width:0}
.ri-event-number{font:12px Georgia,serif;color:var(--base-muted);letter-spacing:3px}
body[data-theme=ivory] #invitation .ri-event h3{font-size:34px;color:var(--base-heading);margin:12px 0}
.ri-event p{overflow-wrap:anywhere}.ri-event-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.ri-event-actions :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--gold);padding:8px 12px;background:var(--paper);color:var(--base-link);font:12px/1.5 Georgia,serif;text-decoration:none;cursor:pointer}
body[data-theme=ivory] #invitation .counter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body[data-theme=ivory] #invitation .counter>div{min-width:0;border:1px solid var(--gold);padding:16px 2px;background:var(--paper)}
body[data-theme=ivory] #invitation .counter strong{font-size:30px;color:var(--base-text)}
body[data-theme=ivory] #invitation .counter span{font-size:9px;letter-spacing:0;color:var(--base-muted)}
.ri-venue{margin:20px auto;width:80%;max-height:250px;overflow:hidden;border:3px double var(--gold);padding:3px}
.ri-venue>img{display:block;width:100%;max-height:238px;object-fit:cover}
.ri-default-venue{width:100%;max-height:none;border:0;padding:0}.ri-default-venue figcaption{font:italic 14px/1.5 Georgia,serif;color:var(--base-muted);padding-top:8px}
body[data-theme=ivory] #invitation .venue-frame{padding:16px 4px;max-width:100%}
body[data-theme=ivory] #invitation :is(.form-box,.upload-panel,.moment){max-width:100%;padding:20px 12px;border:1px solid var(--gold);background:var(--paper);color:var(--base-text);min-width:0}
body[data-theme=ivory] #invitation .section :is(input,select,textarea){max-width:100%;box-sizing:border-box}
body[data-theme=ivory] #invitation footer.dark{padding:44px 26px;background:var(--paper);color:var(--base-text);border:3px double var(--gold);margin:20px 0 0;--ui-surface:var(--base-surface);--ui-text:var(--base-text);--ui-muted:var(--base-muted);--ui-heading:var(--base-heading);--ui-link:var(--base-link);--ui-primary:var(--base-primary);--ui-on-primary:var(--base-on-primary)}
body[data-theme=ivory] #invitation footer .script{font:italic 32px/1.4 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere;color:var(--base-heading)}
body[data-theme=ivory][dir=rtl] #invitation :is(.ri-hero-copy,.ri-frame-copy,.ri-reveal-copy){font-family:'Noto Nastaliq Urdu',serif;line-height:2.3}
body[data-theme=ivory][dir=rtl] #invitation :is(.ri-names,.section h2,.ri-event h3){font-family:'Noto Nastaliq Urdu',serif;font-style:normal;line-height:2;font-size:30px}
body[data-theme=ivory][dir=rtl] #invitation :is(.ri-hero-copy p,.small,.ri-enter,.ri-explore){font-family:'Noto Nastaliq Urdu',serif;line-height:2.4;letter-spacing:0}
.op-ivory[lang=ur] :is(.ri-enter,.ri-skip,.ri-reveal-copy p){font-family:'Noto Nastaliq Urdu',serif;line-height:2.3;letter-spacing:0}
.op-ivory[lang=ur] .ri-reveal-copy strong{font-family:'Noto Nastaliq Urdu',serif;font-size:25px;line-height:2;font-style:normal}
@media(min-width:768px){.op-ivory .ri-fold{width:min(100%,calc((min(900px,100dvh) - 116px) * 2 / 3))}}
@container invitation (max-width:359px){.ri-hero-copy{padding-inline:22px}body[data-theme=ivory] #invitation .ri-names{font-size:43px}.ri-frame-copy{padding-inline:6px}}

@media(max-width:359px){.ri-reveal-copy strong{font-size:27px}.ri-reveal-copy p{font-size:12px}}
@media(max-height:540px){.opening-overlay.op-ivory{padding-top:48px;padding-bottom:14px}.op-ivory .ri-fold{width:calc((100dvh - 92px) * 2 / 3)}.ri-enter{font-size:9px;min-height:32px;padding:4px}.ri-monogram{font-size:24px}.ri-reveal-copy strong{font-size:22px}.ri-reveal-copy p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.op-ivory *{animation:none!important;transition:none!important}}

/* A continuous nine-slice stationery frame keeps the original artwork intact.
   The centre and every text wrapper are transparent, with no faded overlay.
   Ornament lives in the borders; dynamic content grows in the clear centre. */
body[data-theme=ivory] #invitation .ri-hero{
 --ri-art-width:100cqw;
 box-sizing:border-box;width:100%;margin:0;padding:0;
 border-style:solid;border-color:transparent;
 border-width:calc(var(--ri-art-width) * .3711) calc(var(--ri-art-width) * .1416) calc(var(--ri-art-width) * .5566);
 border-image-source:url('/themes/royal-ivory/stationery.webp');
 border-image-slice:380 145 570 145 fill;border-image-repeat:stretch round;
 background:transparent;overflow:visible;
}
body[data-theme=ivory] #invitation .ri-hero-copy{
 border:0;margin:0;padding:0 2px;background:transparent;min-width:0;
}
body[data-theme=ivory] #invitation :is(.ri-hero-copy,.ri-frame-copy,.ri-event,footer.dark):before,
body[data-theme=ivory] #invitation :is(.ri-hero-copy,.ri-frame-copy,.ri-event,footer.dark):after{content:none}
body[data-theme=ivory] #invitation :is(.ri-hero-copy,.ri-frame-copy) :is(p,h1,h2,h3,a,strong){
 max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty;
}
body[data-theme=ivory] #invitation .ri-hero-copy :is(p,h1,h2,h3){background:transparent}
body[data-theme=ivory] #invitation .ri-names{font-size:clamp(36px,calc(10 * 1cqw),48px);line-height:1.18}
body[data-theme=ivory] #invitation .ri-hero-copy .ri-bismillah{font-size:clamp(19px,calc(5.2 * 1cqw),23px);line-height:1.9}
body[data-theme=ivory] #invitation .ri-welcome{font-size:17px;line-height:1.8}
body[data-theme=ivory] #invitation .ri-section{
 --ri-art-width:100cqw;
 padding:0;margin:22px 0;background:transparent;
 border-style:solid;border-color:transparent;
 border-width:calc(var(--ri-art-width) * .3711) calc(var(--ri-art-width) * .1416) calc(var(--ri-art-width) * .5566);
 border-image-source:url('/themes/royal-ivory/stationery.webp');
 border-image-slice:380 145 570 145 fill;border-image-repeat:stretch round;
}
body[data-theme=ivory] #invitation .ri-frame-copy{padding:8px 2px;background:transparent}
body[data-theme=ivory] #invitation .section h2{font-size:clamp(28px,calc(8 * 1cqw),34px)}
body[data-theme=ivory] #invitation .ri-event{background:transparent;padding:30px 10px 20px}
body[data-theme=ivory] #invitation :is(.form-box,.upload-panel,.moment){background:transparent;padding-inline:8px}
body[data-theme=ivory] #invitation .ri-event-actions{gap:8px}
body[data-theme=ivory] #invitation .ri-event-actions :is(a,button){width:100%;padding-inline:6px}
body[data-theme=ivory] #invitation .counter{gap:4px}
body[data-theme=ivory] #invitation .counter strong{font-size:clamp(20px,calc(6 * 1cqw),28px)}
body[data-theme=ivory] #invitation .counter span{font-size:8px}
body[data-theme=ivory][dir=rtl] #invitation :is(.ri-names,.section h2,.ri-event h3){font-size:28px;line-height:2}

/* All reading sections expose the same textured stationery as the hero.
   No inner paper panels, translucent fills, inset outlines or raised cards. */
body[data-theme=ivory] #invitation .ri-frame-copy,
body[data-theme=ivory] #invitation .ri-frame-copy :is(.timeline,.moment,.message,.event,.ri-event,.venue-frame,.form-box,.upload-panel,.counter,.counter>div,.date-under,.scratch-wrap,.photo-selection-item){
 background:transparent;box-shadow:none;backdrop-filter:none;
}
body[data-theme=ivory] #invitation .ri-frame-copy :is(.moment,.event,.ri-event,.venue-frame,.form-box,.upload-panel,.counter>div,.photo-selection-item){
 border:0;outline:0;border-radius:0;
}
body[data-theme=ivory] #invitation .ri-frame-copy .moment{margin:24px 0;padding:8px 0 24px;text-align:center}
body[data-theme=ivory] #invitation .ri-frame-copy .moment:before{content:none}
body[data-theme=ivory] #invitation .ri-frame-copy .moment+.moment{border-top:1px solid var(--line);padding-top:28px}
body[data-theme=ivory] #invitation :is(.ri-frame-copy,.ri-hero-copy) .text-button{background:transparent;box-shadow:none}
body[data-theme=ivory] #invitation .ri-frame-copy :is(input,select,textarea){background:transparent;box-shadow:none}
body[data-theme=ivory] #invitation .scratch-wrap{background:transparent;box-shadow:none}
body[data-theme=ivory] #invitation .date-under{color:var(--base-text);border:0;background:transparent}
body[data-theme=ivory] #invitation footer.dark{background:transparent;box-shadow:none}

/* Opening copy stays inside the stationery, even for long Pakistani names. */
.op-ivory .ri-fold{max-height:calc(100dvh - 104px)}
.op-ivory .ri-sheet-art{object-fit:contain}
.op-ivory .ri-reveal-copy{
 top:19%;bottom:32%;left:16%;right:16%;
 overflow:hidden;scrollbar-width:none;
 gap:clamp(2px,1cqh,7px);
}
.op-ivory .ri-reveal-copy::-webkit-scrollbar{display:none}
.op-ivory .ri-reveal-copy strong{
 display:flex;flex-direction:column;justify-content:center;
 font-size:clamp(19px,7cqw,34px);
 line-height:1.12;max-width:100%;
 overflow-wrap:normal;word-break:normal;hyphens:none;
}
.op-ivory .ri-reveal-copy strong span{text-wrap:balance;overflow-wrap:normal;word-break:normal}
.op-ivory .ri-reveal-copy em{font-size:.72em;line-height:1.05}
@media(max-height:580px){
 .op-ivory .ri-reveal-copy{top:17%;bottom:30%;gap:2px}
 .op-ivory .ri-reveal-copy p{font-size:11px;line-height:1.3}
}