@import url("/arabian-art.css");
.opening-overlay.op-arabian{padding:0;background:#123544;color:#f8f1e5;overflow:hidden}
.an-gateway{position:absolute;inset:0;overflow:hidden}
.an-artboard{container-type:inline-size;position:absolute;top:0;left:50%;height:100%;width:max(100%,calc(100dvh * .57957));transform:translateX(-50%);overflow:hidden}
.an-reveal-scene,.an-door{position:absolute;inset:0;pointer-events:none}
.an-artboard .an-art{height:100%;width:100%;aspect-ratio:auto}
.an-door{z-index:2;transition:transform 3s cubic-bezier(.3,.05,.2,1);will-change:transform}
.an-door-left{clip-path:inset(0 50% 0 0)}.an-door-right{clip-path:inset(0 0 0 50%)}
.op-arabian.is-opening .an-door-left{transform:translateX(-52%)}.op-arabian.is-opening .an-door-right{transform:translateX(52%)}
.an-enter,.an-medallion,.an-opening-brand,.an-reveal-copy{position:absolute;z-index:3;text-align:center;left:50%;transform:translateX(-50%);width:min(82%,340px);color:#f8f1e5}


.an-medallion{z-index:5;top:54.4%;top:93.85cqw;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);width:76px;height:76px;max-width:110px;padding:0;border-radius:50%;border:0;background:transparent;color:#123544;font:italic 21px/1.2 Georgia,serif;overflow-wrap:anywhere;box-shadow:none;cursor:pointer}
.an-enter{bottom:12%;border:1px solid #c7a36b;border-radius:5px;background:#123544f5;min-height:52px;padding:13px 20px;font:600 13px/1.5 Arial,sans-serif;box-shadow:0 5px 25px #0006}
.an-skip{position:absolute;z-index:5;top:12px;right:12px;min-height:44px;padding:8px 14px;border:1px solid #c7a36b80;border-radius:24px;background:#123544f5;color:#f8f1e5;font:12px/1.4 Arial,sans-serif}
.an-opening-brand{bottom:3%;font:8px/1.6 Arial,sans-serif;letter-spacing:2px;text-shadow:0 1px 6px #000;margin:0}
.an-reveal-copy{pointer-events:none;visibility:hidden;top:36%;padding:20px;background:#102d3aeb;border:1px solid #c7a36b90;opacity:0;transition:opacity 1s 1.7s}
.an-reveal-copy p{font:italic 16px/1.5 Georgia,serif}.an-reveal-copy strong{display:block;font:400 30px/1.2 Georgia,serif;overflow-wrap:anywhere}.an-reveal-copy em{display:block;color:#e5c78f}
.op-arabian.is-opening .an-reveal-copy{opacity:1;visibility:visible}.op-arabian.is-opening :is(.an-enter,.an-medallion){opacity:0;pointer-events:none;transition:opacity .3s}
.op-arabian :is(button:focus-visible){outline:3px solid #fff;outline-offset:4px}
body[data-theme=arabian] #invitation{background:var(--paper)}
body[data-theme=arabian] #invitation .topbar{background:var(--inverse-surface,#123544);color:var(--inverse-text,#f8f1e5);border-bottom:1px solid var(--gold);padding-inline:22px}
body[data-theme=arabian] #invitation .topbar :is(.monogram,.event-shortcut){color:var(--inverse-text,#f8f1e5)}
body[data-theme=arabian] #invitation .hero.an-hero{display:block;min-height:0;padding:0;background:var(--paper);text-align:center;overflow:hidden}
body[data-theme=arabian] .an-hero:before,body[data-theme=arabian] .an-hero:after{display:none}
.an-hero-scene{position:relative;margin:0;width:100%}.an-hero-scene .an-art{aspect-ratio:488/760}
.an-hero-scene figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#102d3af2);color:#f8f1e5;padding:60px 20px 24px;font:10px/1.5 Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}
.an-hero-copy{position:relative;padding:42px 28px 48px;border:1px solid var(--gold);border-top:0;margin:0;background:var(--paper)}
.an-kicker{font:9px/1.6 Arial,sans-serif;letter-spacing:3px;color:var(--base-muted)}
.an-bismillah{font:26px/1.8 Georgia,serif;margin:24px 0;color:var(--base-text)}
.an-family,.an-guest{font:18px/1.6 Georgia,serif;color:var(--base-text)}.an-guest strong{display:block}
body[data-theme=arabian] #invitation .an-names{font:400 47px/1.13 'Cormorant Garamond',Georgia,serif;margin:28px 0;color:var(--base-heading);overflow-wrap:anywhere}
.an-names span,.an-names em{display:block}.an-names em{font:italic 30px/1.5 Georgia,serif;color:var(--base-heading)}
.an-welcome{font:18px/1.7 Georgia,serif;color:var(--base-text)}.an-date{border-block:1px solid var(--line);padding:16px 0;margin:28px 0;font:12px/1.8 Arial,sans-serif;letter-spacing:1px;color:var(--base-text)}
.an-explore{display:inline-block;min-height:44px;padding:12px 0;font:11px/1.8 Arial,sans-serif;color:var(--base-link);letter-spacing:1px}
.an-portrait{display:block;max-width:100%;width:240px;height:290px;object-fit:cover;margin:24px auto;border-radius:120px 120px 4px 4px;border:3px double var(--gold)}
body[data-theme=arabian] #invitation .section{padding:56px 24px}
body[data-theme=arabian] #invitation .section h2{font-size:38px;overflow-wrap:anywhere}
body[data-theme=arabian] #invitation .dark{background:var(--inverse-surface,#123544);color:var(--inverse-text,#f8f1e5)}
body[data-theme=arabian] #invitation .events{display:grid;grid-template-columns:1fr;gap:20px}
body[data-theme=arabian] #invitation .event{padding:30px 22px;border:1px solid var(--gold);border-radius:110px 110px 4px 4px;background:var(--paper);color:var(--base-text);box-shadow:0 8px 28px #071e2612}
body[data-theme=arabian] #invitation .event .flower{color:var(--base-heading)}
.an-section-art{overflow:hidden;border-radius:160px 160px 3px 3px;margin:0 auto 30px;max-width:360px}.an-section-art .an-art{aspect-ratio:488/510}
.an-venue-art{position:relative;margin:24px auto;border:1px solid var(--gold);padding:5px}.an-venue-art figcaption{padding:12px;font:italic 16px/1.4 Georgia,serif}
body[data-theme=arabian] #invitation #countdown{background:var(--inverse-surface,#123544);color:var(--inverse-text,#f8f1e5)}
body[data-theme=arabian] #invitation #countdown :is(h2,.small,.counter strong,.counter span){color:var(--inverse-text,#f8f1e5)}
body[data-theme=arabian] #invitation .counter{gap:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-theme=arabian] #invitation .counter>div{min-width:0;padding:18px 4px;border:1px solid var(--gold);background:transparent}
body[data-theme=arabian] #invitation .counter strong{font-size:34px}
body[data-theme=arabian] #invitation .counter span{font-size:9px;letter-spacing:.5px}
body[data-theme=arabian] #invitation footer{padding:48px 24px}
@media(min-width:768px){body.sealed #invitation .op-arabian .an-artboard{width:max(100%,calc(min(900px,100dvh) * .57957))}}
@media(max-height:600px){.an-enter{bottom:8%;min-height:44px}.an-opening-brand{bottom:1%}.an-medallion{width:60px;height:60px;font-size:17px}}
@container invitation (max-width:359px){body[data-theme=arabian] #invitation .an-names{font-size:39px}.an-hero-copy{padding-inline:18px}}

@media(max-width:359px){.an-enter{font-size:11px}}
@media(prefers-reduced-motion:reduce){.op-arabian *{animation:none!important;transition:none!important}}

.opening-overlay.op-arabian .an-reveal-copy :is(p,strong){color:#f8f1e5!important}
.opening-overlay.op-arabian .an-reveal-copy em{color:#e5c78f!important}