:root {
    --ink: #2a1a10;
    --ink-soft: #5b4634;
    --ink-faint: #8a7563;
    --cream: #f7f2e8;
    --cream-deep: #efe6d6;
    --paper: #fffdf8;
    --gold: #b98b4e;
    --gold-light: #e2c88d;
    --sage: #7f9070;
    --lake: #6d8794;
    --line: rgba(42, 26, 16, .14);
    --photo-grade: saturate(.62) contrast(.95) sepia(.14) brightness(.99);
    --shadow-soft: 0 30px 70px -50px rgba(42, 26, 16, .7);
    --display: "Marcellus", "Times New Roman", serif;
    --serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --sans: "Karla", ui-sans-serif, system-ui, -apple-system, sans-serif
}

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

body.is-locked {
    overflow: hidden;
    height: 100%
}

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

h1,h2,h3 {
    margin: 0;
    font-weight: 400
}

p {
    margin: 0
}

::selection {
    background: #b98b4e47
}

.hero {
    position: relative;
    height: 100svh;
    min-height: 560px;
    width: 100%;
    overflow: hidden;
    background: #16100b
}

.hero__video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 2.4s cubic-bezier(.22,1,.36,1),filter 1.2s ease
}

.hero--idle .hero__video {
    filter: saturate(.92) brightness(.72)
}

.hero--playing .hero__video {
    filter: none;
    transform: scale(1)
}

.hero--done .hero__video {
    filter: none;
    transform: scale(1.04)
}

.hero__dim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(76% 62% at 50% 48%,#0a080529,#0a080547 66%,#0a080570),linear-gradient(to bottom,#0a08052e,#0a080505 45%,#0a080547);
    transition: opacity 1.6s cubic-bezier(.22,1,.36,1)
}

.hero--reveal .hero__dim {
    opacity: 1
}

.hero.hero--reveal .hero__video {
    filter: blur(4px) brightness(.94) saturate(1);
    transform: scale(1.06);
    transition: filter 1.7s cubic-bezier(.22,1,.36,1),transform 2.6s cubic-bezier(.22,1,.36,1)
}

.hero__vignette {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 40%,transparent 35%,rgba(20,12,7,.55) 100%),linear-gradient(to bottom,rgba(20,12,7,.35),transparent 30%,transparent 62%,rgba(20,12,7,.72));
    transition: opacity 1.4s ease
}

.hero--playing .hero__vignette {
    opacity: .35
}

.hero__gate-prompt {
    position: absolute;
    left: 50%;
    bottom: 10vh;
    transform: translate(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #120c0873;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226,200,141,.4);
    border-radius: 999px;
    color: var(--cream);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 30px #00000059;
    transition: opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),background .3s ease;
    z-index: 5;
    animation: pulsePrompt 2.6s ease-in-out infinite
}

.hero__gate-prompt:hover {
    background: #120c08bf;
    border-color: #e2c88db3
}

@keyframes pulsePrompt {
    0%,to {
        transform: translate(-50%) scale(1);
        box-shadow: 0 10px 30px #00000059
    }

    50% {
        transform: translate(-50%) scale(1.02);
        box-shadow: 0 12px 36px #b98b4e40
    }
}

.hero__info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    padding: 6vh 24px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1);
    z-index: 4
}

.hero__info.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto
}

.hero__info .hero__eyebrow,.hero__info .hero__monogram,.hero__info .hero__names,.hero__info .hero__rule,.hero__info .hero__date-cue {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.1s ease,transform 1.1s cubic-bezier(.22,1,.36,1)
}

.hero__info.is-visible .hero__eyebrow {
    opacity: 1;
    transform: none;
    transition-delay: .12s
}

.hero__info.is-visible .hero__monogram {
    opacity: 1;
    transform: none;
    transition-delay: .32s
}

.hero__info.is-visible .hero__names {
    opacity: 1;
    transform: none;
    transition-delay: .52s
}

.hero__info.is-visible .hero__rule {
    opacity: 1;
    transform: none;
    transition-delay: .9s
}

.hero__info.is-visible .hero__date-cue {
    opacity: 1;
    transform: none;
    transition-delay: 1.08s
}

.hero__info:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(66% 50% at 50% 48%,rgba(10,7,4,.42) 0%,rgba(10,7,4,.26) 45%,transparent 78%);
    opacity: 0;
    transition: opacity 1.2s ease
}

.hero__info.is-visible:before {
    opacity: 1
}

.hero__card {
    display: grid;
    justify-items: center;
    gap: 20px;
    max-width: 560px;
    padding: 0 8px
}

.hero__eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #fffdf9;
    text-shadow: 0 1px 3px rgba(12,8,5,.7),0 0 18px rgba(12,8,5,.95)
}

.hero__monogram {
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: .22em;
    color: #fffdf9;
    text-shadow: 0 1px 3px rgba(12,8,5,.7),0 0 20px rgba(12,8,5,.92)
}

.hero__monogram em {
    font-style: normal;
    color: var(--gold);
    padding: 0 6px
}

.hero__names {
    font-family: var(--display);
    font-size: clamp(46px,9.4vw,76px);
    line-height: 1.06;
    letter-spacing: .02em;
    text-align: center;
    display: grid;
    gap: 2px;
    color: #fffdf9;
    text-shadow: 0 1px 3px rgba(12,8,5,.75),0 0 26px rgba(12,8,5,.9),0 12px 44px rgba(12,8,5,.7)
}

.hero__amp {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 24px;
    letter-spacing: .08em;
    color: var(--gold-light);
    margin: 6px 0;
    text-shadow: 0 1px 3px rgba(12,8,5,.75),0 0 20px rgba(12,8,5,.9)
}

.hero__rule {
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(226,200,141,.9),transparent)
}

.hero__date-cue {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fffdf9;
    text-shadow: 0 1px 3px rgba(12,8,5,.7),0 0 18px rgba(12,8,5,.95)
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #f7f2e8e0
}

.hero__knock {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 #e2c88db3;
    animation: knock 2.6s ease-out infinite
}

.hero__skip {
    position: absolute;
    right: 22px;
    bottom: 26px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(247,242,232,.34);
    background: #120c0866;
    color: #f7f2e8e6;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fadeIn .7s ease both
}

.hero__skip:hover {
    background: #120c08a8
}

.hero__scrollcue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%);
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #f7f2e8cc;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .34em;
    text-transform: uppercase;
    animation: fadeIn 1.4s ease .6s both
}

.hero__scrollcue i {
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom,rgba(247,242,232,.8),transparent);
    animation: drift 2.4s ease-in-out infinite
}

.invitation {
    position: relative;
    background: var(--cream);
    opacity: 0;
    transition: opacity .9s ease
}

.invitation.is-open {
    opacity: 1
}

.invitation:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom,rgba(20,12,7,.28),transparent);
    pointer-events: none
}

.section {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(72px,12vw,140px) 24px
}

.section__head {
    max-width: 620px;
    margin: 0 auto clamp(40px,6vw,72px);
    text-align: center;
    --head-align: center;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)
}

.section__head.is-in {
    opacity: 1;
    transform: none
}

.section__head--left {
    margin-left: 0;
    text-align: left;
    max-width: 700px
}

.eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px
}

.eyebrow--light {
    color: #f7f2e8db
}

.section__title {
    font-family: var(--display);
    font-size: clamp(34px,5.4vw,56px);
    line-height: 1.08;
    letter-spacing: .01em
}

.section__lede {
    margin-top: 18px;
    font-size: 19px;
    font-style: italic;
    color: var(--ink-soft)
}

.couple {
    padding-top: clamp(52px,7vw,88px)
}

.couple__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(24px,4vw,64px);
    margin-top: 40px
}

.couple__centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.couple__amp {
    font-family: var(--display);
    font-size: clamp(38px,6vw,64px);
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 4px 16px rgba(185,139,78,.2)
}

.couple__tag {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.person-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)
}

.person-card--groom {
    transition-delay: .16s
}

.person-card.is-in {
    opacity: 1;
    transform: none
}

.person-card__frame {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 48px -12px #2a1a1059;
    border: 1px solid rgba(185,139,78,.3);
    background: #1c140e
}

.person-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1),filter .8s ease;
    filter: saturate(1.05) contrast(1.02)
}

.person-card:hover .person-card__image {
    transform: scale(1.04)
}

.person-card__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,rgba(20,12,7,.6) 0%,transparent 45%);
    pointer-events: none
}

.person-card__initial-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #120c0899;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226,200,141,.6);
    color: var(--gold-light);
    font-family: var(--display);
    font-size: 22px;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px #0000004d
}

.person-card__content {
    margin-top: 24px;
    max-width: 360px
}

.person-card__role {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold)
}

.person-card__name {
    font-family: var(--display);
    font-size: clamp(30px,3.8vw,42px);
    margin-top: 6px;
    color: var(--ink)
}

.person-card__parents {
    margin-top: 6px;
    font-size: 16px;
    font-style: italic;
    color: var(--ink-soft)
}

.person-card__city {
    margin-top: 8px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.person-card__blurb {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
    font-style: italic
}

.save {
    background: transparent
}

.scratch {
    display: grid;
    justify-items: center;
    gap: 28px
}

.scratch__card {
    position: relative;
    width: min(560px,100%);
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 40px 80px -60px #2a1a10bf
}

.scratch__card:after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    border: 1px solid rgba(185,139,78,.22);
    pointer-events: none;
    z-index: 3
}

.scratch__under {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
    background: radial-gradient(80% 60% at 50% 30%,rgba(185,139,78,.07),transparent 70%),var(--paper)
}

.scratch__weekday {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.scratch__date {
    display: flex;
    align-items: center;
    gap: clamp(10px,2.4vw,20px);
    font-family: var(--display);
    font-size: clamp(34px,7vw,58px);
    line-height: 1;
    color: var(--ink)
}

.scratch__date i {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: var(--gold);
    opacity: .75
}

.scratch__month {
    font-size: .62em;
    letter-spacing: .04em
}

.scratch__time {
    font-size: 16px;
    font-style: italic;
    color: var(--ink-soft)
}

.scratch__foil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: crosshair;
    touch-action: none;
    transition: opacity .9s ease,transform .9s ease
}

.scratch.is-revealed .scratch__foil {
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none
}

.scratch.is-revealed .scratch__under {
    animation: pop .9s cubic-bezier(.22,1,.36,1) both
}

.scratch__shortcut {
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px
}

.scratch__shortcut:hover {
    color: var(--gold);
    border-color: var(--gold)
}

.countdown {
    display: grid;
    justify-items: center;
    gap: 16px;
    animation: riseIn .9s cubic-bezier(.22,1,.36,1) both
}

.countdown__label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.countdown__list {
    display: flex;
    gap: clamp(16px,4vw,40px);
    list-style: none;
    margin: 0;
    padding: 0
}

.countdown__list li {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 62px
}

.countdown__list strong {
    font-family: var(--display);
    font-size: clamp(30px,4.4vw,42px);
    font-weight: 400;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}

.countdown__list span {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.story {
    background: transparent
}

.story__timeline {
    display: grid;
    gap: clamp(64px,10vw,120px);
    margin-top: 56px
}

.chapter {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    align-items: center;
    gap: clamp(32px,6vw,76px);
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)
}

.chapter.is-in {
    opacity: 1;
    transform: none
}

.chapter--flip .chapter__frame {
    order: 2
}

.chapter__frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 56px -16px #2a1a1059;
    border: 1px solid rgba(185,139,78,.28)
}

.chapter__figure {
    margin: 0;
    position: relative
}

.chapter__figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1)
}

.chapter:hover .chapter__figure img {
    transform: scale(1.03)
}

.chapter__figure-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,rgba(20,12,7,.65) 0%,transparent 40%);
    pointer-events: none
}

.chapter__caption {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fffdf9;
    text-shadow: 0 1px 4px rgba(0,0,0,.6)
}

.chapter__badge {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-block;
    margin-bottom: 6px
}

.chapter__year {
    display: block;
    font-family: var(--display);
    font-size: clamp(36px,5vw,52px);
    line-height: 1;
    color: var(--gold);
    opacity: .85
}

.chapter__title {
    font-family: var(--display);
    font-size: clamp(28px,4vw,42px);
    margin-top: 10px;
    color: var(--ink)
}

.chapter__title:after {
    content: "";
    display: block;
    width: 52px;
    height: 1px;
    margin-top: 16px;
    background: linear-gradient(90deg,var(--gold),transparent)
}

.chapter__text {
    margin-top: 18px;
    color: var(--ink-soft);
    max-width: 46ch;
    font-size: 19px;
    line-height: 1.6
}

.events__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: clamp(24px,3.2vw,36px);
    margin-top: 48px
}

.event-card {
    position: relative;
    background: var(--paper);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 40px -16px #2a1a1033;
    border: 1px solid rgba(185,139,78,.22);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
    transition-delay: calc(var(--i) * .1s)
}

.event-card.is-in {
    opacity: 1;
    transform: none
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px -16px #2a1a104d;
    border-color: #b98b4e80
}

.event-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden
}

.event-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.22,1,.36,1)
}

.event-card:hover .event-card__image {
    transform: scale(1.06)
}

.event-card__image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,rgba(20,12,7,.6) 0%,transparent 60%)
}

.event-card__index {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--display);
    font-size: 14px;
    color: var(--gold-light);
    background: #120c088c;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(226,200,141,.4)
}

.event-card__date-badge {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fffdf9;
    background: #120c08a6;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(247,242,232,.25)
}

.event-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1
}

.event-card__title {
    font-family: var(--display);
    font-size: clamp(26px,3.2vw,32px);
    color: var(--ink);
    line-height: 1.1
}

.event-card__time,.event-card__place {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0
}

.event-card__time {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold)
}

.event-card__icon {
    font-size: 14px;
    opacity: .8
}

.event-card__attire {
    margin-top: 4px;
    padding: 8px 12px;
    background: #b98b4e14;
    border-left: 2px solid var(--gold);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 13px
}

.event-card__attire-label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    align-self: center
}

.event-card__attire-value {
    font-style: italic;
    color: var(--ink)
}

.event-card__note {
    margin-top: auto;
    padding-top: 10px;
    font-size: 15px;
    font-style: italic;
    color: var(--ink-faint);
    border-top: 1px solid var(--line)
}

.venue__hero-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: clamp(420px,58vw,620px);
    display: grid;
    align-items: end;
    box-shadow: 0 28px 64px -16px #2a1a1066;
    border: 1px solid rgba(185,139,78,.35);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1);
    margin-top: 36px
}

.venue__hero-frame.is-in {
    opacity: 1;
    transform: none
}

.venue__hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05)
}

.venue__hero-scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,rgba(14,18,22,.86) 0%,rgba(14,18,22,.4) 45%,transparent 100%)
}

.venue__hero-copy {
    position: relative;
    padding: clamp(32px,6vw,64px);
    color: var(--cream);
    max-width: 680px
}

.venue__hero-badge {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-light);
    display: inline-block;
    margin-bottom: 12px
}

.venue__hero-name {
    font-family: var(--display);
    font-size: clamp(36px,6vw,58px);
    line-height: 1.05;
    color: #fffdf9;
    text-shadow: 0 2px 20px rgba(0,0,0,.6)
}

.venue__hero-address {
    margin-top: 10px;
    font-style: italic;
    font-size: 20px;
    color: #f7f2e8e6
}

.btn--gold {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #120c0899;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226,200,141,.6);
    border-radius: 999px;
    color: var(--gold-light);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    transition: all .3s ease
}

.btn--gold:hover {
    background: var(--gold);
    color: #120c08;
    border-color: var(--gold)
}

.venue__detail {
    margin-top: clamp(48px,7vw,84px);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    gap: clamp(32px,6vw,72px);
    align-items: start;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)
}

.venue__detail.is-in {
    opacity: 1;
    transform: none
}

.venue__blurb {
    font-size: 21px;
    line-height: 1.6;
    font-style: italic;
    color: var(--ink-soft)
}

.venue__spaces-grid {
    display: grid;
    gap: 16px;
    margin-top: 28px
}

.venue__space-card {
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid rgba(185,139,78,.2);
    border-radius: 8px;
    box-shadow: 0 4px 16px #2a1a100d
}

.venue__space-num {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .24em;
    color: var(--gold)
}

.venue__space-title {
    font-family: var(--display);
    font-size: 22px;
    color: var(--ink);
    margin-top: 4px
}

.venue__space-note {
    font-size: 15px;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 4px
}

.venue__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.venue__gallery-item {
    margin: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 36px -12px #2a1a1040;
    border: 1px solid rgba(185,139,78,.2)
}

.venue__gallery-item:first-child {
    margin-top: clamp(24px,4vw,48px)
}

.venue__gallery-item img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block
}

.venue__gallery-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: linear-gradient(to top,rgba(18,12,8,.75),transparent);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fffdf9
}

.map__box {
    margin-top: 36px;
    background: var(--paper);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 48px -12px #2a1a1040;
    border: 1px solid rgba(185,139,78,.28)
}

.map__frame {
    position: relative;
    width: 100%;
    height: clamp(340px,48vw,480px);
    background: #201a15
}

.map__embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: contrast(1.02) saturate(.95)
}

.map__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px 32px;
    padding: 24px 28px;
    background: var(--paper);
    border-top: 1px solid var(--line)
}

.map__place {
    font-family: var(--display);
    font-size: clamp(24px,3.2vw,30px);
    color: var(--ink);
    line-height: 1.1
}

.map__coords {
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.travel-guide {
    margin-top: clamp(48px,6vw,72px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)
}

.travel-guide.is-in {
    opacity: 1;
    transform: none
}

.travel-guide__title {
    font-family: var(--display);
    font-size: clamp(24px,3.2vw,32px);
    color: var(--ink);
    margin-bottom: 24px;
    text-align: center
}

.travel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 20px
}

.travel-card {
    background: var(--paper);
    border-radius: 10px;
    padding: 22px 20px;
    border: 1px solid rgba(185,139,78,.2);
    box-shadow: 0 8px 24px -8px #2a1a101a;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

.travel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -10px #2a1a1033;
    border-color: #b98b4e73
}

.travel-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.travel-card__mode {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold)
}

.travel-card__index {
    font-family: var(--display);
    font-size: 12px;
    color: var(--ink-faint)
}

.travel-card__place {
    font-family: var(--display);
    font-size: 20px;
    color: var(--ink);
    line-height: 1.2
}

.travel-card__detail {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.travel-card__note {
    margin-top: auto;
    font-size: 14px;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.45;
    border-top: 1px solid var(--line);
    padding-top: 8px
}

.btn--gold-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease
}

.btn--gold-outline:hover {
    background: var(--gold);
    color: #120c08
}

.btn--gold-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 8px;
    color: #1a120b;
    font-weight: 500;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 24px -4px #b98b4e66;
    transition: all .3s cubic-bezier(.22,1,.36,1)
}

.btn--gold-solid:hover {
    background: #cba265;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px #b98b4e8c
}

.btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 8px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease
}

.btn--outline:hover {
    background: var(--ink);
    color: var(--cream)
}

.rsvp__box-container {
    max-width: 720px;
    margin-inline:auto;margin-top: 36px
}

.rsvp__form-card {
    background: var(--paper);
    border-radius: 14px;
    padding: clamp(28px,5vw,44px);
    border: 1px solid rgba(185,139,78,.3);
    box-shadow: 0 28px 64px -16px #2a1a1040;
    display: grid;
    gap: 28px
}

.rsvp__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.rsvp__card-tag {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold)
}

.rsvp__card-monogram {
    font-family: var(--display);
    font-size: 20px;
    color: var(--gold);
    letter-spacing: .1em
}

.rsvp__section-box {
    display: grid;
    gap: 12px
}

.rsvp__box-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500
}

.rsvp__choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.rsvp__choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease
}

.rsvp__choice-card input {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.rsvp__choice-card:hover {
    border-color: var(--gold);
    background: #fffdf9
}

.rsvp__choice-card.is-active {
    border-color: var(--gold);
    background: #fffdf9;
    box-shadow: 0 4px 18px #b98b4e2e
}

.rsvp__choice-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(185,139,78,.5);
    flex-shrink: 0;
    margin-top: 2px;
    display: grid;
    place-items: center;
    transition: all .25s ease
}

.rsvp__choice-card.is-active .rsvp__choice-indicator {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: 0 0 0 3px #b98b4e33
}

.rsvp__choice-text {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.rsvp__choice-title {
    font-family: var(--display);
    font-size: 19px;
    color: var(--ink);
    line-height: 1.2
}

.rsvp__choice-desc {
    font-size: 13px;
    color: var(--ink-faint);
    font-style: italic
}

.rsvp__input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.rsvp__input-group {
    display: grid;
    gap: 6px
}

.rsvp__input-group label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.rsvp__input-group input,.rsvp__section-box textarea {
    width: 100%;
    padding: 12px 14px;
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.25);
    border-radius: 8px;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    transition: all .25s ease
}

.rsvp__input-group input:focus,.rsvp__section-box textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #fffdf9;
    box-shadow: 0 0 0 3px #b98b4e26
}

.rsvp__input-group input::placeholder,.rsvp__section-box textarea::placeholder {
    color: #8a756373;
    font-style: italic;
    font-size: 16px
}

.rsvp__seats-selector {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

.rsvp__seat-btn {
    padding: 12px 8px;
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.25);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: all .25s ease
}

.rsvp__seat-btn:hover {
    border-color: var(--gold);
    background: #fffdf9
}

.rsvp__seat-btn.is-active {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 4px 14px #b98b4e4d
}

.rsvp__seat-num {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink)
}

.rsvp__seat-btn.is-active .rsvp__seat-num {
    color: #1a120b
}

.rsvp__seat-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.rsvp__seat-btn.is-active .rsvp__seat-label {
    color: #2c1c12;
    font-weight: 500
}

.rsvp__events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.rsvp__event-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease
}

.rsvp__event-tile input {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.rsvp__event-tile:hover {
    border-color: var(--gold);
    background: #fffdf9
}

.rsvp__event-tile.is-selected {
    border-color: var(--gold);
    background: #fffdf9;
    box-shadow: 0 3px 12px #b98b4e1f
}

.rsvp__event-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(185,139,78,.5);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: all .2s ease
}

.rsvp__event-tile.is-selected .rsvp__event-check {
    background: var(--gold);
    border-color: var(--gold)
}

.rsvp__event-tile.is-selected .rsvp__event-check:after {
    content: "✓";
    color: #1a120b;
    font-size: 11px;
    font-weight: 700
}

.rsvp__event-info {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.rsvp__event-title {
    font-family: var(--display);
    font-size: 17px;
    color: var(--ink);
    line-height: 1.2
}

.rsvp__event-meta {
    font-size: 12px;
    color: var(--ink-faint)
}

.rsvp__submit-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.rsvp__btn {
    width: 100%
}

.rsvp__contact-note {
    font-size: 14px;
    color: var(--ink-faint);
    text-align: center;
    font-style: italic
}

.rsvp__success-box {
    background: var(--paper);
    border-radius: 14px;
    padding: clamp(36px,6vw,56px);
    border: 1px solid rgba(185,139,78,.35);
    box-shadow: 0 28px 64px -16px #2a1a1040;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 18px;
    animation: riseIn .9s cubic-bezier(.22,1,.36,1) both
}

.rsvp__seal-stamp {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: #b98b4e1a;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 24px;
    color: var(--gold);
    box-shadow: 0 0 0 6px #b98b4e26
}

.rsvp__success-title {
    font-family: var(--display);
    font-size: clamp(28px,4.4vw,40px);
    color: var(--ink)
}

.rsvp__success-text {
    font-size: 19px;
    line-height: 1.6;
    font-style: italic;
    color: var(--ink-soft);
    max-width: 46ch
}

.rsvp__summary-box {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 12px 0
}

.rsvp__summary-item {
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.2);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.rsvp__summary-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.rsvp__summary-val {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink)
}

.wishes__form-box {
    max-width: 720px;
    margin: 0 auto 52px;
    background: var(--paper);
    border-radius: 14px;
    padding: clamp(28px,5vw,40px);
    border: 1px solid rgba(185,139,78,.28);
    box-shadow: 0 20px 48px -12px #2a1a102e
}

.wishes__form-header {
    margin-bottom: 22px
}

.wishes__form-tag {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold)
}

.wishes__form-title {
    font-family: var(--display);
    font-size: clamp(22px,3vw,28px);
    color: var(--ink);
    margin-top: 4px
}

.wishes__form {
    display: grid;
    gap: 16px
}

.wishes__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.wishes__input-group {
    display: grid;
    gap: 6px
}

.wishes__input-group label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

.wishes__input-group input,.wishes__input-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: #faf7f2;
    border: 1px solid rgba(185,139,78,.25);
    border-radius: 8px;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    transition: all .25s ease
}

.wishes__input-group input:focus,.wishes__input-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #fffdf9;
    box-shadow: 0 0 0 3px #b98b4e26
}

.wishes__input-group input::placeholder,.wishes__input-group textarea::placeholder {
    color: #8a756373;
    font-style: italic;
    font-size: 16px
}

.wishes__form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px
}

.wishes__success-msg {
    font-size: 15px;
    color: #2e6930;
    font-style: italic;
    font-weight: 500
}

.wishes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 24px
}

.wish-box {
    position: relative;
    background: var(--paper);
    border-radius: 12px;
    padding: 28px 24px;
    border: 1px solid rgba(185,139,78,.22);
    box-shadow: 0 12px 32px -12px #2a1a101f;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
    transition-delay: calc(var(--i) * 80ms)
}

.wish-box.is-in {
    opacity: 1;
    transform: none
}

.wish-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -12px #2a1a1038;
    border-color: #b98b4e66
}

.wish-box__quote-icon {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
    opacity: .3
}

.wish-box__text {
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
    font-style: italic;
    color: var(--ink-soft)
}

.wish-box__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--line);
    padding-top: 14px
}

.wish-box__author {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.wish-box__name {
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink)
}

.wish-box__relation {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold)
}

.wish-box__heart {
    color: var(--gold);
    opacity: .6;
    font-size: 16px
}

.footer {
    position: relative;
    margin-top: clamp(60px,9vw,120px);
    min-height: clamp(460px,62vw,620px);
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    color: var(--cream)
}

.footer__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    filter: var(--photo-grade)
}

.footer__scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(70% 60% at 50% 45%,#0c10128c,#0c1012c7 75%),linear-gradient(to bottom,#0c101280,#0c1012db)
}

.footer__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: clamp(56px,8vw,90px) 24px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)
}

.footer.is-in .footer__inner {
    opacity: 1;
    transform: none
}

.footer__monogram {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: .24em;
    color: #f7f2e8e6
}

.footer__monogram em {
    font-style: normal;
    color: var(--gold-light);
    padding: 0 4px
}

.footer__names {
    font-family: var(--display);
    font-size: clamp(38px,6.4vw,62px);
    line-height: 1.1;
    color: #fffdf9;
    text-shadow: 0 1px 2px rgba(8,6,4,.5),0 0 30px rgba(8,6,4,.7)
}

.footer__names span {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--gold-light);
    margin: 4px 0
}

.footer__date {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #f7f2e8db
}

.footer__hashtag {
    margin-top: 6px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    color: var(--gold-light)
}

.footer__nav {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    max-width: 620px
}

.footer__nav a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f7f2e8c7;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color .3s ease,border-color .3s ease
}

.footer__nav a:hover {
    color: var(--cream);
    border-color: #e2c88dcc
}

.footer__credit {
    margin-top: 30px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #f7f2e8b3
}

.footer__demo {
    font-size: 15px;
    font-style: italic;
    color: #f7f2e880
}

@keyframes ripple {
    0% {
        transform: scale(.5);
        opacity: .7
    }

    70% {
        transform: scale(1.5);
        opacity: 0
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

@media (max-width: 768px) {
    body {
        font-size:17px
    }

    .couple__grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .couple__centerpiece {
        margin: 8px 0
    }

    .chapter,.chapter--flip .chapter__frame {
        grid-template-columns: 1fr
    }

    .chapter--flip .chapter__frame {
        order: 0
    }

    .events__grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .countdown__list {
        gap: 14px
    }

    .countdown__list li {
        min-width: 48px
    }

    .venue__detail {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .venue__gallery {
        gap: 12px
    }

    .venue__gallery-item:first-child {
        margin-top: 0
    }

    .map__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .travel-grid,.rsvp__choice-grid,.rsvp__input-row,.rsvp__events-grid,.wishes__form-row {
        grid-template-columns: 1fr
    }

    .rsvp__seats-selector {
        grid-template-columns: repeat(4,1fr)
    }

    .wishes__grid {
        grid-template-columns: 1fr
    }

    .music {
        right: 14px;
        top: 14px
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important;
        scroll-behavior: auto!important
    }

    .section__head,.person,.chapter,.event,.venue__frame,.venue__detail,.travel,.wish,.footer {
        opacity: 1;
        transform: none
    }
}

/* Lord Ganesha & Sacred Blessing */
.ganesh-mark {
  width: 98px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px rgba(16, 10, 6, 0.7));
  margin: 0 auto;
  display: block;
}
.hero__ganesh-stack {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 14svh;
  transform: translate(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
}
.hero__ganesh {
  position: static;
  transform: none;
}
.hero__blessing {
  margin: 0;
  font: 400 clamp(22px, 2.7vw, 32px)/1.25 var(--serif, 'EB Garamond', Georgia, serif);
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #f4dfad;
  text-shadow: 0 2px 16px rgba(12, 8, 5, 0.82);
}
.hero__ganesh--inline {
  position: static;
  transform: none;
  width: 68px;
  margin: 0 auto 6px;
  filter: drop-shadow(0 2px 8px rgba(16, 10, 6, 0.18));
}
.hero__blessing--inline {
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: 0.02em;
  margin-top: -4px;
  margin-bottom: 8px;
  color: #f4dfad !important;
  text-shadow: 0 2px 16px rgba(12, 8, 5, 0.85) !important;
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  text-align: center;
}
@media (max-width: 768px) {
  .ganesh-mark { width: 82px; }
  .hero__ganesh-stack { top: 10svh; gap: 8px; }
  .hero__blessing { font-size: 20px; }
  .hero__ganesh--inline { width: 56px; }
  .hero__blessing--inline { font-size: 18px; color: #f4dfad !important; }
}