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

.events {
    overflow-x: clip;
    padding-bottom: 1px
}

.ev-mehndi {
    --tone: #1f7a4c;
    --tone-hi: #7fd6a4
}

.ev-nikah {
    --tone: #d9d2c6;
    --tone-hi: #ffffff
}

.ev-baraat {
    --tone: #a3182f;
    --tone-hi: #ff8a96
}

.ev-walima {
    --tone: #213f94;
    --tone-hi: #8fb0ff
}

.ev-head {
    position: relative;
    z-index: 1;
    padding: calc(clamp(22px, 6.4cqi, 40px)/2 + clamp(30px, 9cqi, 60px)) 16px 0;
    text-align: center
}

.ev-kicker {
    font-size: clamp(11.5px, 3.3cqi, 15px)
}

.ev-title {
    margin-top: .06em;
    font-size: clamp(46px, 13cqi, 84px)
}

.ev-hint {
    margin: .5em 0 0;
    font: italic 500 clamp(14.5px, 4cqi, 18px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #3a3026c7;
    transition: opacity .8s ease
}

.events.is-touched .ev-hint {
    opacity: 0
}

.ev-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: clamp(26px, 8cqi, 56px);
    column-gap: 4cqi;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(6px, 2cqi, 20px) 16px calc(clamp(22px, 6.4cqi, 40px)/2 + clamp(36px, 10cqi, 72px))
}

.ev {
    --bw: min(70cqi, 280px);
    --cwid: min(96cqi, 380px);
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-aspect-ratio:5/8) {
    .ev-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .ev {
        --bw: min(64cqi, 290px);
        --cwid: min(94cqi, 400px)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .ev-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 2.4cqi
    }
    html.is-tablet .ev {
        --bw: min(76cqi, 260px);
        --cwid: 100cqi
    }
}

@media(min-aspect-ratio:5/8) {
    .events.is-some .ev.is-odd-last {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 4cqi)/2)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .events.is-some .ev-list {
        grid-template-columns: repeat(var(--cards), calc((100% - 3 * 2.4cqi) / 4));
        justify-content: center
    }
    html.is-tablet .events.is-some .ev.is-odd-last {
        grid-column: auto;
        justify-self: stretch;
        width: auto
    }
}

.ev-casket {
    position: relative;
    flex: none;
    width: var(--bw);
    aspect-ratio: var(--box-r)
}

.ev-casket>span,
.ev-glow,
.ev-lid>i {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none
}

.ev-shadow {
    position: absolute;
    left: 3%;
    right: 3%;
    top: calc(var(--feet) * 100% - 4%);
    height: 8%;
    background: radial-gradient(closest-side, rgba(52, 34, 10, .5), rgba(52, 34, 10, .18) 60%, transparent);
    pointer-events: none
}

.ev-olid {
    clip-path: inset(0 0 calc((1 - var(--hinge)) * 100%) 0);
    transform-origin: 50% calc(var(--hinge) * 100%)
}

.ev-inner {
    clip-path: inset(calc(var(--hinge) * 100% - 1px) 0 0 0)
}

.ev-lid {
    transform-origin: 50% calc(var(--hinge) * 100%)
}

.ev-sheen {
    position: absolute;
    inset: 0;
    clip-path: var(--panel);
    background: linear-gradient(104deg, transparent 38%, rgba(255, 246, 220, .85) 50%, transparent 62%) no-repeat;
    background-size: 320% 100%;
    background-position: 100% 0;
    mix-blend-mode: soft-light;
    opacity: 0
}

.ev-glow {
    background: radial-gradient(ellipse 40% 12% at 50% calc((var(--hinge) * .35 + var(--front) * .65) * 100%), rgba(255, 206, 128, .5), rgba(255, 190, 110, .16) 55%, transparent 80%);
    mix-blend-mode: screen;
    opacity: 0
}

.ev.is-open .ev-glow {
    opacity: .4
}

.ev-glint {
    position: absolute;
    left: calc((var(--gem-x) - var(--gem-r) * .42) * 100%);
    top: calc((var(--gem-y) - var(--gem-r) * var(--box-r) * .5) * 100%);
    width: calc(var(--gem-r) * 190%);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(circle, #fffffff2 0 6%, #fff0 22%), linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, .9) 50%, transparent 53%), linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, .9) 50%, transparent 53%);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 66%);
    mask-image: radial-gradient(circle, #000 20%, transparent 66%);
    mix-blend-mode: screen;
    opacity: 0;
    scale: 0;
    pointer-events: none;
    animation: ev-glint 5.2s ease-in-out calc(1.5s + var(--i, 0) * 1.3s) infinite
}

@keyframes ev-glint {
    0%,
    84%,
    to {
        opacity: 0;
        scale: 0;
        rotate: 0deg
    }
    90% {
        opacity: 1;
        scale: 1;
        rotate: 45deg
    }
    96% {
        opacity: .4;
        scale: .5;
        rotate: 80deg
    }
}

.ev.is-open .ev-glint {
    animation: none
}

.ev:not(.is-open) .ev-olid {
    visibility: hidden
}

.ev.is-open .ev-lid {
    visibility: hidden
}

.ev-open {
    position: absolute;
    z-index: 1;
    left: 2%;
    right: 2%;
    top: calc(var(--lid-top) * 100% - 2%);
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ev-open:focus {
    outline: none
}

.ev-open:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 4px
}

.ev.is-open .ev-open {
    cursor: default;
    top: calc(var(--olid-top) * 100%)
}

.ev-slot {
    position: relative;
    width: 100%
}

.ev-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15em;
    margin: 0;
    padding-top: clamp(4px, 2cqi, 10px);
    text-align: center
}

.ev-label:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 48%;
    width: min(118%, 340px);
    height: 150%;
    translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(246, 239, 225, .9), rgba(246, 239, 225, .55) 55%, transparent);
    pointer-events: none
}

.ev-lname,
.ev-gold {
    padding: 0 .18em .1em;
    font: 400 clamp(38px, 13cqi, 56px) / 1.05 "Luxurious Script", cursive;
    background: linear-gradient(100deg, transparent calc(var(--gleam) - 12%), rgba(255, 248, 222, .95) var(--gleam), transparent calc(var(--gleam) + 12%)), linear-gradient(172deg, #caa052, #8d6420 34%, #c89a45 58%, #7a561c 80%, #a97c33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .5px 0 rgba(255, 246, 222, .7)) drop-shadow(0 1px .5px rgba(70, 44, 8, .35))
}

.ev-ldate {
    font: 600 clamp(11px, 3.4cqi, 13.5px) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--brass)
}

.ev-card {
    --fs: clamp(13.5px, calc(var(--cwid) * .046), 17px);
    position: relative;
    z-index: 2;
    display: none;
    flex-direction: column;
    justify-content: center;
    width: var(--cwid);
    padding: calc(var(--cwid) * (var(--pin-t) + .06)) calc(var(--cwid) * (var(--pin-r) + .06)) calc(var(--cwid) * (var(--pin-b) + .055)) calc(var(--cwid) * (var(--pin-l) + .06));
    background-color: #f0d8b0;
    background-position: 0 0, 0 100%, 0 calc(var(--cwid) * var(--pt));
    background-size: 100% auto;
    background-repeat: no-repeat, no-repeat, repeat-y;
    box-shadow: 0 1px 2px #402a0c47, 0 calc(var(--cwid) * .02) calc(var(--cwid) * .05) #402a0c33;
    color: var(--ink);
    font: 500 var(--fs) / 1.4 "Cormorant Garamond", Georgia, serif;
    text-align: center;
    transform-origin: 50% 0
}

.ev.is-open .ev-card {
    display: flex;
    margin: clamp(-14px, -3cqi, -6px) auto 0
}

.ev.is-open .ev-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden
}

.ev-card>* {
    margin: 0
}

.ev-name {
    font-weight: 400;
    line-height: 1
}

.ev-gold {
    display: inline-block;
    font-size: calc(var(--fs) * 3.1);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe))
}

.ev-ur {
    margin-top: -.1em;
    font: 400 calc(var(--fs) * 1.02) / 2.1 "Noto Nastaliq Urdu", serif;
    color: #7a5a26
}

.ev-rule {
    position: relative;
    display: block;
    width: 62%;
    height: 1px;
    margin: .55em auto 1em !important;
    background: linear-gradient(90deg, transparent, #b08a3e 20%, #d8b565 50%, #b08a3e 80%, transparent)
}

.ev-stone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--fs) * .78);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, var(--tone-hi) 0 9%, transparent 34%), radial-gradient(circle at 50% 55%, var(--tone) 40%, color-mix(in srgb, var(--tone) 55%, #000) 100%);
    box-shadow: 0 0 0 1.5px #c9a24b, 0 0 0 2.5px #7a561c8c, 0 1px 3px 2px #402a0c40
}

.ev-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .08em
}

.ev-day {
    font: 700 calc(var(--fs) * .72) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: var(--brass)
}

.ev-dmy {
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.2;
    color: #1d1813
}

.ev-time {
    font-style: italic;
    font-size: 1.05em
}

.ev-venue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .08em;
    margin-top: .85em !important;
    text-wrap: balance
}

.ev-place {
    font-weight: 700;
    font-size: 1.14em;
    line-height: 1.2;
    color: #1d1813
}

.ev-addr {
    font-style: italic;
    line-height: 1.3;
    color: #4a3d2f
}

.ev-dress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3em;
    margin-top: .85em !important;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance
}

.ev-dress-k {
    font: 700 calc(var(--fs) * .68) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--brass)
}

.ev-sw {
    display: flex;
    gap: .4em
}

.ev-sw i {
    width: calc(var(--fs) * .9);
    aspect-ratio: 1;
    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 #9c7231b3
}

.ev-note {
    margin-top: .55em !important;
    font-style: italic;
    line-height: 1.3;
    color: #4a3d2f;
    text-wrap: balance
}

.ev-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5em;
    margin-top: 1em !important
}

.ev-btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid rgba(156, 114, 49, .75);
    border-radius: 999px;
    background: #fffaeeb3;
    box-shadow: 0 1px 2px #3c280a24;
    color: var(--ink);
    font: 700 calc(var(--fs) * .88) / 1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ev-btn:first-child {
    border-color: #b08a3e;
    background: linear-gradient(180deg, #221c15, #0f0c09);
    color: #f0d99c
}

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

.ev-btn:first-child svg {
    stroke: #e2c47e
}

.ev-btn:hover {
    border-color: var(--brass);
    background-color: #fffcf4
}

.ev-btn:first-child:hover {
    background: #2a231a
}

.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible {
    outline: 2px solid var(--brass);
    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(156, 114, 49, .75);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 8px 22px #140e0659;
    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: #2a231bb3
}

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

.ev-lamp {
    position: absolute !important;
    inset: 0;
    container-type: size;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: soft-light
}

.ev-lamp:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: max(130cqi, 700px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #ffc468b3, #ffb45a4d 38%, #ffaa5000 68%);
    translate: -50% -50%;
    will-change: transform;
    animation: ev-drift 38s ease-in-out infinite alternate
}

@keyframes ev-drift {
    0% {
        transform: translate(76cqw, 6cqh)
    }
    35% {
        transform: translate(22cqw, 34cqh)
    }
    70% {
        transform: translate(70cqw, 64cqh)
    }
    to {
        transform: translate(28cqw, 92cqh)
    }
}

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

@media(prefers-reduced-motion:reduce) {
    .ev-lamp:before {
        animation: none;
        left: 50%;
        top: 30%
    }
    .ev-glint {
        animation: none
    }
    .ev-hint {
        transition: none
    }
}

.ev-prog {
    margin-top: .7em !important
}

.ev-prog-k {
    margin: 0;
    font: 700 calc(var(--fs) * .68) / 1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: var(--brass)
}

.ev-prog ol {
    margin: .3em 0 0;
    padding: 0;
    list-style: none;
    line-height: 1.35;
    color: #4a3d2f
}

.ev-prog li {
    text-align: center;
    text-wrap: balance
}

.ev-prog li span {
    margin-right: .4em;
    font-style: italic;
    font-weight: 700
}