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

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

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

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

.lt-for {
    margin: .08em 0 0;
    font: 400 calc(clamp(46px, 13.5cqi, 86px) * var(--fit, 1)) / 1.12 "Luxurious Script", cursive;
    text-wrap: balance
}

.lt-guest,
.lt-sign-names {
    padding: 0 .18em .1em;
    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;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
    filter: drop-shadow(0 .5px 0 rgba(255, 246, 222, .7)) drop-shadow(0 1px .5px rgba(70, 44, 8, .35))
}

.lt-guest {
    -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))
}

.letter:not(.is-seen) .lt-guest {
    --wipe: -2%
}

.letter.is-seen .lt-guest {
    --wipe: 130%
}

.lt-farman {
    --cw: min(92cqi, 660px);
    --ch: calc(var(--cw) / var(--case-r));
    --sw: calc(var(--cw) * .76);
    --rw: calc(var(--sw) / var(--roll-pw));
    --rh: calc(var(--rw) / var(--roll-r));
    --seal-w: calc(var(--cw) * .17);
    --seal-h: calc(var(--seal-w) / var(--seal-r));
    --foot: calc(var(--seal-h) + clamp(22px, 6.4cqi, 40px) / 2 + clamp(26px, 7cqi, 52px));
    --cap-rest: translate(-26%, 112%) rotate(-11deg);
    position: relative;
    z-index: 2;
    width: var(--cw);
    margin: clamp(12px, 3.6cqi, 28px) auto 0;
    padding: calc(var(--ch) * (var(--tube-b) - .06)) 0 var(--foot)
}

.lt-case {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: var(--ch);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 calc(var(--ch) * .07) calc(var(--ch) * .07) rgba(46, 30, 8, .4))
}

.letter.is-open .lt-case {
    cursor: default
}

.lt-case:focus-visible {
    outline: none
}

.lt-case:focus-visible .c-body {
    filter: drop-shadow(0 0 3px #fff4cf) drop-shadow(0 0 6px rgba(201, 162, 75, .9))
}

.lt-case>span:not(.sr-only) {
    position: absolute;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none
}

.c-body,
.c-gleam {
    inset: 0
}

.c-body {
    clip-path: inset(0 calc(var(--body-cut) * 100%) 0 0)
}

.letter.is-open .c-body {
    clip-path: none
}

.c-shut {
    left: calc(var(--shut-l) * 100%);
    top: 0;
    width: calc(var(--shut-w) * 100%);
    height: 100%
}

.letter.is-open .c-shut {
    opacity: 0
}

.c-cap {
    left: calc(var(--cap-l) * 100%);
    top: calc(var(--cap-t) * 100%);
    width: calc(var(--cap-w) * 100%);
    height: calc(var(--cap-h) * 100%);
    transform-origin: 50% 50%
}

.letter.is-open .c-cap {
    transform: var(--cap-rest)
}

.lt-case>span.c-gleam {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-image: linear-gradient(100deg, transparent 43%, rgba(255, 244, 212, .9) 50%, transparent 57%);
    background-size: 300% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen;
    animation: lt-gleam 11s ease-in-out 1.5s infinite
}

@keyframes lt-gleam {
    0% {
        background-position: 100% 0
    }
    22%,
    to {
        background-position: 0% 0
    }
}

.lt-sheet {
    --fs: clamp(15px, calc(var(--sw) * .05), 20px);
    position: relative;
    z-index: 1;
    display: block;
    width: var(--sw);
    margin: 0 auto;
    padding: calc(var(--sw) * (var(--pin-t) + .075)) calc(var(--sw) * (var(--pin-r) + .07)) calc(var(--sw) * (var(--pin-b) + .07)) calc(var(--sw) * (var(--pin-l) + .07));
    background-color: #f0d8b0;
    background-position: 0 0, 0 100%, 0 calc(var(--sw) * var(--pt));
    background-size: 100% auto;
    background-repeat: no-repeat, no-repeat, repeat-y;
    box-shadow: 0 1px 2px #402a0c47, 0 calc(var(--sw) * .02) calc(var(--sw) * .05) #402a0c33;
    color: var(--ink);
    font: 500 var(--fs) / 1.5 "Cormorant Garamond", Georgia, serif;
    text-align: center;
    clip-path: inset(-40px -40px 100% -40px)
}

.letter.is-open .lt-sheet {
    clip-path: inset(-40px -40px -40px -40px)
}

.lt-sheet:focus {
    outline: none
}

.lt-text>* {
    margin: 0
}

.lt-text>p+p {
    margin-top: .7em
}

.lt-verse {
    font: 400 1.34em/2.05 Amiri Quran, Amiri, serif;
    color: #2b2116;
    text-wrap: balance
}

.lt-text>.lt-verse-en {
    margin-top: .45em;
    font-style: italic;
    font-size: .95em;
    line-height: 1.42;
    color: #3a2e21;
    text-wrap: balance
}

.lt-text>.lt-verse-ref {
    margin-top: .5em;
    font: 600 .7em/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--brass)
}

.lt-text>.lt-rule {
    position: relative;
    height: 1em;
    margin: 1em auto 1.05em;
    width: 62%
}

.lt-rule:before,
.lt-rule:after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - .9em);
    height: 1px;
    background: linear-gradient(90deg, #9c723100, #b08434 60%, #c99d4b)
}

.lt-rule:before {
    left: 0
}

.lt-rule:after {
    right: 0;
    transform: scaleX(-1)
}

.lt-rule i,
.lt-rule i:before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .62em;
    height: .62em;
    margin: -.31em 0 0 -.31em;
    background: linear-gradient(135deg, #e5c273, #9c7231)
}

.lt-rule i {
    transform: rotate(45deg)
}

.lt-rule i:before {
    content: "";
    left: 0;
    top: 0;
    margin: 0;
    transform: rotate(45deg)
}

.lt-text>.lt-greeting {
    font-style: italic;
    font-size: 1.14em;
    color: #2b2116
}

.lt-text>.lt-greeting+p {
    margin-top: .55em
}

.lt-text>.lt-urdu {
    margin-top: 1em;
    font: 400 1.02em/2.3 Noto Nastaliq Urdu, serif;
    color: #3a2c1a;
    text-wrap: balance
}

.lt-text>.lt-urdu-en {
    margin-top: .1em;
    font-style: italic;
    font-size: .86em;
    color: #5a4a36
}

.lt-text>.lt-closing {
    margin-top: 1.25em;
    font-style: italic
}

.lt-text>.lt-sign {
    margin-top: .05em;
    font: 400 2.35em/1.25 Luxurious Script, cursive
}

.lt-parents {
    display: none
}

.lt-text[data-from]>.lt-parents {
    display: block;
    margin-top: .6em
}

.lt-text[data-from]>p:not([class]),
.lt-text[data-from]>.lt-closing,
.lt-text[data-from]>.lt-sign {
    display: none
}

.lt-parents>p {
    margin: 0
}

.lp-mr {
    margin-top: 1.15em !important;
    font: 600 .7em/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--brass)
}

.lt-parents>.lp-mr:first-child {
    margin-top: .2em !important
}

.lp-name {
    font: 600 1.3em/1.2 Cormorant Garamond, Georgia, serif;
    color: #2b2116;
    text-wrap: balance
}

.lp-line {
    margin-top: .65em !important;
    font-style: italic;
    color: #3a2e21;
    text-wrap: balance
}

.lp-couple {
    width: fit-content;
    max-width: 100%;
    margin: .15em auto 0 !important;
    padding: 0 .18em .1em;
    font: 400 2.05em/1.2 Luxurious Script, cursive;
    text-wrap: balance;
    background: linear-gradient(172deg, #caa052, #8d6420 34%, #c89a45 58%, #7a561c 80%, #a97c33);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
    filter: drop-shadow(0 .5px 0 rgba(255, 246, 222, .7)) drop-shadow(0 1px .5px rgba(70, 44, 8, .35))
}

.lp-with {
    margin: -.05em 0 -.1em !important;
    font-style: italic;
    color: var(--brass)
}

.lp-couple+.lp-line {
    margin-top: .3em !important
}

.lt-roll {
    position: absolute;
    left: 50%;
    z-index: 2;
    width: var(--rw);
    height: var(--rh);
    margin-left: calc(var(--rw) / -2);
    top: calc(var(--ch) * var(--tube-c) - var(--rh) / 2)
}

.letter.is-open .lt-roll {
    top: calc(100% - var(--foot) - 2px)
}

.r-art {
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 calc(var(--rh) * .16) calc(var(--rh) * .14) rgba(46, 30, 8, .38))
}

.lt-seal {
    position: absolute;
    left: 50%;
    top: 22%;
    width: var(--seal-w);
    height: var(--seal-h);
    margin-left: calc(var(--seal-w) * var(--seal-hx) * -1);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: calc(var(--seal-hx) * 100%) 2%;
    filter: drop-shadow(0 calc(var(--seal-w) * .05) calc(var(--seal-w) * .05) rgba(46, 30, 8, .35))
}

.lt-mono {
    position: absolute;
    left: 50%;
    top: calc(var(--seal-cy) * 100%);
    translate: -50% -52%;
    white-space: nowrap;
    font: 600 calc(var(--seal-w) * .25) / 1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    color: #5a3b10;
    text-shadow: 0 1px 0 rgba(255, 234, 186, .75), 0 -1px 1px rgba(36, 20, 3, .6), 0 0 1px rgba(60, 36, 6, .5)
}

.lt-mono i {
    font-style: italic;
    font-weight: 500;
    margin: 0 .06em
}

.lt-dust {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none
}

.lt-dust i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--s);
    height: calc(var(--s) * .8);
    background: linear-gradient(135deg, #fff3c4, #e2b85c 45%, #a8792c);
    clip-path: polygon(10% 20%, 55% 0, 100% 35%, 85% 90%, 35% 100%, 0 65%);
    opacity: 0
}

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

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

@keyframes lt-drift {
    0% {
        transform: translate(18cqw, 8cqh)
    }
    35% {
        transform: translate(70cqw, 30cqh)
    }
    70% {
        transform: translate(34cqw, 62cqh)
    }
    to {
        transform: translate(78cqw, 88cqh)
    }
}

@media(prefers-reduced-motion:reduce) {
    .lt-lamp:before {
        animation: none;
        left: 40%;
        top: 30%
    }
    .c-gleam {
        animation: none;
        opacity: 0
    }
}