/*! © 2026 Dastan Invites, dastaninvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

.events {
    --sun-y: 0px;
    --sun-x: -24%;
    padding: calc(var(--seam-h) * .5 + 40px) 16px calc(var(--seam-h) * .5 + 56px);
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent
}

.ev-mehndi {
    --tone: var(--mehndi);
    --tone-ink: #95600f;
    --leaves: url(../assets/events/leaves-mehndi.webp)
}

.ev-nikah {
    --tone: var(--nikah);
    --tone-ink: #1d6a6f;
    --leaves: url(../assets/events/leaves-nikah.webp)
}

.ev-baraat {
    --tone: var(--baraat);
    --tone-ink: #983322;
    --leaves: url(../assets/events/leaves-baraat.webp)
}

.ev-walima {
    --tone: var(--walima);
    --tone-ink: #1d3a82;
    --leaves: url(../assets/events/leaves-walima.webp)
}

.ev-head {
    position: relative;
    text-align: center;
    margin: 0 0 clamp(20px, 6cqi, 36px)
}

.ev-head>* {
    margin: 0
}

.ev-kicker {
    font: 700 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: var(--kick)
}

.ev-title {
    font: 400 clamp(46px, 13.5cqi, 80px)/1.2 "Great Vibes", cursive
}

.ev-title .glaze {
    display: inline-block;
    padding: 0 .28em .08em
}

.ev-list {
    position: relative;
    --door-w: min(100cqi - 6px, 360px);
    display: grid;
    justify-content: center;
    gap: clamp(46px, 13cqi, 64px);
    margin: 0 auto
}

.ev {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--door-w);
    text-align: center
}

.ev-door {
    position: relative;
    width: var(--door-w);
    aspect-ratio: var(--door-r)
}

.ev-inside,
.ev-leaf,
.ev-spill {
    position: absolute;
    top: var(--dw-t);
    height: var(--dw-h)
}

.ev-inside {
    left: var(--dw-l);
    width: var(--dw-w);
    -webkit-mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
    background: radial-gradient(ellipse 80% 42% at 50% 100%, rgba(255, 196, 110, .45), transparent 70%), radial-gradient(ellipse 90% 70% at 50% 58%, #6a4522, #2b190b 72%, #160c05)
}

.ev-card {
    position: absolute;
    left: calc(var(--dw-l) + var(--dw-w) * .07);
    width: calc(var(--dw-w) * .86);
    top: calc(var(--dw-t) + var(--dw-h) * .04);
    height: calc(var(--dw-h) * .96);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--door-w) * .1) calc(var(--door-w) * .035) 0;
    -webkit-mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/events/doorway.svg) 0 0 / 100% 100% no-repeat;
    background: linear-gradient(90deg, #341e0c57, #341e0c00 20%), linear-gradient(180deg, #341e0c47, #341e0c00 16%), linear-gradient(0deg, #341e0c38, #341e0c00 10%), linear-gradient(105deg, #fff4d64d, #fff4d600 55%), url(../assets/letter/paper-back.webp) 0 0 / calc(var(--door-w) * .7) repeat, #efe4cb;
    color: var(--ink)
}

.ev-card>* {
    position: relative;
    margin: 0
}

.ev-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tone);
    opacity: .8;
    --in: calc(var(--door-w) * .028);
    -webkit-mask: url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2) calc(100% - var(--in) * 2) no-repeat, url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2 - 3px) calc(100% - var(--in) * 2 - 3px) no-repeat;
    -webkit-mask-composite: xor;
    mask: url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2) calc(100% - var(--in) * 2) no-repeat exclude, url(../assets/events/doorway.svg) 50% 50% / calc(100% - var(--in) * 2 - 3px) calc(100% - var(--in) * 2 - 3px) no-repeat
}

.ev-star {
    width: calc(var(--door-w) * .062);
    aspect-ratio: 1;
    margin-bottom: calc(var(--door-w) * .02) !important;
    background: radial-gradient(circle at 34% 30%, #ffffffb3, #fff0 38%), radial-gradient(circle at 50% 50%, var(--tone) 50%, color-mix(in srgb, var(--tone), #000 30%));
    clip-path: polygon(50% 0, 61.5% 22.3%, 85.4% 14.6%, 77.7% 38.5%, 100% 50%, 77.7% 61.5%, 85.4% 85.4%, 61.5% 77.7%, 50% 100%, 38.5% 77.7%, 14.6% 85.4%, 22.3% 61.5%, 0 50%, 22.3% 38.5%, 14.6% 14.6%, 38.5% 22.3%);
    filter: drop-shadow(0 1px 0 rgba(60, 35, 10, .35))
}

.ev-name {
    font: 400 max(26px, calc(var(--door-w) * .118))/1.1 "Great Vibes", cursive
}

.ev-name .glaze {
    display: inline-block;
    padding: 0 .22em .06em
}

.ev-ur {
    margin: calc(var(--door-w) * -.012) 0 calc(var(--door-w) * -.008) !important;
    font: 400 max(13px, calc(var(--door-w) * .056))/1.9 "Noto Nastaliq Urdu", serif;
    color: var(--tone-ink)
}

.ev-rule {
    width: calc(var(--door-w) * .22);
    height: 9px;
    margin: calc(var(--door-w) * .012) 0 calc(var(--door-w) * .026) !important;
    background: linear-gradient(var(--tone), var(--tone)) 50% 50% / 100% 1px no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent)
}

.ev-rule:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--tone);
    transform: translate(-50%, -50%) rotate(45deg)
}

.ev-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--door-w) * .008);
    text-wrap: balance
}

.ev-day {
    font: 700 max(10.5px, calc(var(--door-w) * .033))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: var(--kick)
}

.ev-dmy {
    font: 600 max(13px, calc(var(--door-w) * .054))/1.15 "Cormorant Garamond", Georgia, serif;
    white-space: nowrap;
    color: var(--ink)
}

.ev-time {
    margin-top: calc(var(--door-w) * .006);
    font: italic 500 max(12px, calc(var(--door-w) * .044))/1.25 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-open {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: calc(var(--door-w) * 2.4);
    perspective-origin: 50% 54%;
    -webkit-tap-highlight-color: transparent
}

.ev-open:focus-visible {
    outline: 0
}

.ev-open:focus-visible .ev-frame {
    filter: drop-shadow(0 0 3px var(--cobalt)) drop-shadow(0 0 1px var(--cobalt))
}

.ev-leaf {
    width: calc(var(--dw-w) / 2);
    background: var(--leaves) 0 0 / 200% 100% no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.ev-leaf-l {
    left: var(--dw-l);
    transform-origin: 0 50%
}

.ev-leaf-r {
    left: calc(var(--dw-l) + var(--dw-w) / 2);
    background-position: 100% 0;
    transform-origin: 100% 50%
}

.ev.is-open .ev-leaf-l {
    transform: rotateY(100deg)
}

.ev.is-open .ev-leaf-r {
    transform: rotateY(-100deg)
}

.ev.is-swung .ev-leaf {
    visibility: hidden
}

.ev-frame {
    position: absolute;
    inset: 0;
    background: url(../assets/events/frame.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(calc(var(--door-w) * .016) calc(var(--door-w) * .02) calc(var(--door-w) * .022) rgba(70, 40, 16, .32))
}

.ev-spill {
    left: calc(var(--dw-l) - var(--dw-w) * .2);
    width: calc(var(--dw-w) * 1.4);
    top: calc(var(--dw-t) + var(--dw-h) * .82);
    height: calc(var(--dw-h) * .3);
    background: radial-gradient(ellipse 50% 45% at 50% 50%, #ffce828c, #ffce8200 72%);
    mix-blend-mode: soft-light;
    opacity: 0;
    pointer-events: none
}

.ev.is-open .ev-spill {
    opacity: 1
}

.ev-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    flex: 1;
    width: min(100cqi, var(--door-w) + var(--more-x, 40px));
    margin-top: 14px
}

.ev-more>* {
    margin: 0
}

.ev-venue {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.ev-place {
    font: 700 clamp(17px, 5cqi, 20px)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-addr {
    font: italic 500 clamp(15px, 4.3cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #1b2a52d1
}

.ev-dress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font: 600 clamp(14.5px, 4.2cqi, 16.5px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.ev-dress-k {
    font: 700 11px/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--kick)
}

.ev-sw {
    display: flex;
    gap: 5px
}

.ev-sw i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffffbf, #fff0 42%), var(--c);
    box-shadow: inset 0 -1px 2px #00000040, 0 0 0 1px #50371940
}

.ev-note {
    font: italic 500 clamp(14.5px, 4.2cqi, 16.5px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #1b2a52c7;
    text-wrap: balance
}

.ev-actions {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    width: 100%;
    max-width: 330px;
    margin-top: auto !important;
    padding-top: 4px
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid rgba(176, 132, 58, .7);
    border-radius: 999px;
    background: #fffbf0c7;
    box-shadow: 0 1px 2px #3c280a24;
    color: var(--ink);
    font: 700 14px/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ev-btn svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: var(--tone-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ev-btn:hover {
    background: #fffdf8;
    border-color: var(--tone-ink)
}

.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px
}

.ev-cal-menu {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(100% + 6px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: min(250px, 92vw);
    padding: 6px;
    border: 1px solid rgba(176, 132, 58, .7);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 8px 22px #141c3c4d;
    text-align: left
}

.ev-cal-menu[hidden] {
    display: none
}

.ev-cal-menu a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    font: 700 15px/1.2 Cormorant Garamond, Georgia, serif;
    text-decoration: none
}

.ev-cal-menu a small {
    display: block;
    font: italic 500 13px/1.3 Cormorant Garamond, Georgia, serif;
    color: #1b2a52b3
}

.ev-cal-menu a:hover {
    background: #b0843a24
}

.events.is-ready .ev:not(.is-open) .ev-more {
    visibility: hidden
}

.events:not(.is-ready) .ev-leaf {
    visibility: hidden
}

.events:not(.is-ready) .ev-spill {
    opacity: 1
}

.ev-door,
.ev-head {
    transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1)
}

.events.is-ready .ev:not(.is-seen) .ev-door {
    opacity: 0;
    translate: 0 24px
}

.events.is-ready:not(.is-seen) .ev-head {
    opacity: 0
}

html.is-tablet .events,
html:not(.is-tablet) .card .events {
    padding-inline: 32px
}

@media(max-aspect-ratio:5/8) {
    html:not(.is-tablet) .card .events {
        padding-inline: 16px
    }
}

@container (min-width: 600px) {
    html.is-tablet .ev-list,
    html:not(.is-tablet) .card .ev-list {
        --door-w: min((100cqi - 40px) / 2, 330px);
        --more-x: 20px;
        grid-template-columns: repeat(2, auto);
        gap: 52px 40px
    }
    html.is-tablet .events.is-some .ev.is-odd-last,
    html:not(.is-tablet) .card .events.is-some .ev.is-odd-last {
        grid-column: 1 / -1;
        justify-self: center
    }
    html.is-tablet .ev-actions,
    html:not(.is-tablet) .card .ev-actions {
        grid-auto-flow: row;
        justify-items: center;
        gap: 7px;
        max-width: 230px
    }
    html.is-tablet .ev-actions>a.ev-btn,
    html:not(.is-tablet) .card .ev-actions>a.ev-btn {
        width: 100%;
        min-height: 40px;
        border-color: color-mix(in srgb, var(--tone-ink), #000 18%);
        background: linear-gradient(180deg, color-mix(in srgb, var(--tone-ink), #fff 14%), var(--tone-ink) 70%);
        box-shadow: inset 0 1px #ffffff47, 0 2px 5px #2819083d;
        color: #fdf6e6;
        font-size: 14.5px
    }
    html.is-tablet .ev-actions>a.ev-btn svg,
    html:not(.is-tablet) .card .ev-actions>a.ev-btn svg {
        stroke: #fdf6e6
    }
    html.is-tablet .ev-actions>a.ev-btn:hover,
    html:not(.is-tablet) .card .ev-actions>a.ev-btn:hover {
        background: var(--tone-ink)
    }
    html.is-tablet .ev-btn-cal,
    html:not(.is-tablet) .card .ev-btn-cal {
        min-height: 30px;
        padding: 4px 13px;
        background: #fffbf08c;
        border-color: #b0843a80;
        box-shadow: none;
        font-size: 12.5px;
        letter-spacing: .05em
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .events {
        padding: calc(var(--seam-h) * .5 + 18px) 40px calc(var(--seam-h) * .5 + 24px);
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    html.is-tablet .ev-head {
        margin-bottom: 12px
    }
    html.is-tablet .ev-title {
        font-size: clamp(46px, 7cqi, 66px)
    }
    @container (min-width: 880px) {
        html.is-tablet .ev-list {
            --door-w: min((100cqi - 3 * 30px) / 4, 300px, (100svh - 480px) * .75);
            --more-x: 22px;
            grid-template-columns: repeat(4, auto);
            gap: 0 30px
        }
        html.is-tablet .events.is-some .ev-list {
            grid-template-columns: repeat(var(--cards), auto)
        }
        html.is-tablet .events.is-some .ev.is-odd-last {
            grid-column: auto
        }
        html.is-tablet .ev-more {
            gap: 6px;
            margin-top: 10px
        }
        html.is-tablet .ev-actions {
            max-width: 196px
        }
        html.is-tablet .ev-place {
            font-size: 18px
        }
        html.is-tablet .ev-addr,
        html.is-tablet .ev-dress,
        html.is-tablet .ev-note {
            font-size: 15px
        }
    }
}

@media(prefers-reduced-motion:reduce) {
    .ev-door,
    .ev-head {
        transition: none
    }
}