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

:root {
    --onyx: #0d0b09;
    --lacquer: #1a1611;
    --gold: #c9a24b;
    --gold-hi: #f0d99c;
    --brass: #9c7231;
    --ivory: #f3ead8;
    --ink: #2a231b;
    --table: #060504;
    --gold-leaf: linear-gradient(175deg, #fff6d8 0%, #f4d98e 28%, #d9a94c 52%, #fbe6a6 74%, #c08a35 100%);
    --card-w: min(100%, max( 75svh, 360px))
}

html.is-tablet {
    --card-w: 100%
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

html,
body {
    margin: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(120, 84, 32, .22), transparent 70%), radial-gradient(ellipse at 50% 50%, #15110c 0%, #0a0806 62%, var(--table) 100%) fixed;
    background-color: var(--table)
}

body {
    min-height: 100vh
}

img {
    display: block;
    max-width: 100%
}

.card {
    position: relative;
    width: var(--card-w);
    margin: 0 auto;
    background: var(--onyx);
    box-shadow: 0 0 60px #000000b3
}

@media(max-aspect-ratio:3/4),
(max-width:360px) {
    html,
    body {
        background: var(--onyx)
    }
    .card {
        box-shadow: none
    }
}

html.is-tablet,
html.is-tablet body {
    background: var(--onyx)
}

html.is-tablet .card {
    box-shadow: none
}

.silk {
    position: relative;
    background: url(../assets/theme/paper-b.webp) 0 0 / min(92vw, 460px) repeat, var(--ivory);
    color: var(--ink)
}

.silk:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 62% 48% at 50% 50%, rgba(246, 239, 225, .78), rgba(246, 239, 225, .25) 70%, transparent 100%)
}

.silk>* {
    position: relative
}

.seamed:after,
.seamed>.seam-top {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    height: var(--seam-h, clamp(22px, 6.4cqi, 40px));
    background: url(../assets/theme/seam-b.webp) center / auto 100% repeat-x;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
    pointer-events: none
}

.seamed {
    position: relative;
    z-index: 1;
    container-type: inline-size
}

.seamed>.seam-top {
    top: calc(var(--seam-h, clamp(22px, 6.4cqi, 40px)) / -2)
}

.seamed:after {
    bottom: calc(var(--seam-h, clamp(22px, 6.4cqi, 40px)) / -2)
}

.kicker {
    margin: 0;
    font: 600 .72em/1.3 Cormorant Garamond, serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #e6d3a4
}

.title {
    margin: 0;
    font: 400 3.2em/1.05 Luxurious Script, cursive
}

.sub {
    margin: 0;
    font: italic 500 1.05em/1.35 Cormorant Garamond, serif
}

.gold-leaf {
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(0, 0, 0, .5))
}

.silk .kicker {
    color: var(--brass)
}

.silk .title {
    color: #1d1813
}

.silk .sub {
    color: #3a3026
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

[data-section].is-away :is(.h-flame, .h-stars, .h-stars-push, .c-gleam, .fm-hang, .fm-flicker, .fm-gleam, .fm-hint, .ev-glint, .cd-stream, .cd-hint, .rs-glint, .cl-ln-bob, .cl-ln-glow, .cl-hint),
[data-section].is-away :is(.h-lamp-glow, .lt-lamp, .ev-lamp, .rs-lamp):before,
[data-section].is-away .h-lamp-glow:after {
    animation-play-state: paused !important
}

[data-section].is-far :is(.h-flames, .h-stars, .fm-flicker, .ev-glint, .rs-glint, .cl-ln-glow),
[data-section].is-far :is(.h-lamp-glow, .lt-lamp, .ev-lamp, .rs-lamp):before,
[data-section].is-far .h-lamp-glow:after {
    display: none
}

[data-section].is-far :is(.h-stars-push, .c-gleam, .fm-hang, .fm-gleam, .fm-hint, .cd-stream, .cd-hint, .cl-ln-bob, .cl-hint) {
    animation: none !important
}

html.is-lite :is(.h-stars, .h-stars-push, .fm-hang, .fm-gleam, .ev-glint, .rs-glint, .cd-stream, .cd-hint, .cl-ln-bob, .cl-ln-glow, .cl-hint),
html.is-lite .h-lamp-glow:before,
html.is-lite .h-lamp-glow:after,
html.is-lite .music-toggle svg {
    animation: none !important
}

html.is-lite .h-flame {
    animation: none;
    opacity: .7
}

html.is-lite .lt-case>span.c-gleam {
    animation: none;
    opacity: 0
}

html.is-lite .is-lit .fm-flicker {
    animation: none;
    opacity: .35
}

html.is-lite :is(.lt-lamp, .ev-lamp, .rs-lamp):before {
    animation: none;
    will-change: auto
}

html.is-lite :is(.lt-lamp, .rs-lamp):before {
    left: 40%;
    top: 30%
}

html.is-lite .ev-lamp:before {
    left: 50%;
    top: 30%
}

html.is-lite .music-toggle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.cv-clock,
.h-clock,
.lt-clock,
.fm-clock,
.ev-clock,
.cd-clock,
.rs-clock,
.cl-clock {
    display: block;
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    pointer-events: none
}

.sz-wait {
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0
}

html.is-preloading [data-section]:not([data-section=hero]),
html.is-preloading [data-section]:not([data-section=hero]):before,
html.is-preloading [data-section]:not([data-section=hero]):after,
html.is-preloading [data-section]:not([data-section=hero]) *,
html.is-preloading [data-section]:not([data-section=hero]) *:before,
html.is-preloading [data-section]:not([data-section=hero]) *:after {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-image-source: none !important
}