/* ==============================================================
   KORUKONDA WEDDING INVITATION
   FINAL LUXURY DESIGN

   COLOUR THEME:
   Royal Maroon
   Antique Gold
   Warm Ivory
   Soft Cream

   DESIGN:
   Traditional Indian / Telugu Wedding
   Luxury
   Cinematic
   Elegant
   Mobile Friendly
   ============================================================== */


/* ==============================================================
   01. COLOUR VARIABLES
   ============================================================== */

:root {

    --maroon-deep: #350812;
    --maroon: #541323;
    --maroon-light: #721D35;
    --wine: #8B3048;

    --gold-dark: #8B6632;
    --gold: #C9A24E;
    --gold-light: #E2C574;
    --gold-bright: #F4DEA0;

    --ivory: #FFF9ED;
    --cream: #F7EFE2;
    --paper: #F4EBDD;
    --paper-light: #FFFDF8;

    --brown: #3B292C;
    --brown-light: #65565A;
    --muted: #77696C;

    --line: rgba(139, 102, 50, 0.30);

    --shadow:
        0 25px 70px rgba(53, 8, 18, 0.14);

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --display:
        "Playfair Display",
        Georgia,
        serif;

    --telugu:
        "Noto Serif Telugu",
        serif;

    --sans:
        Arial,
        Helvetica,
        sans-serif;
}


/* ==============================================================
   02. RESET
   ============================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--ivory);

    color:
        var(--brown);

    font-family:
        var(--serif);

    font-size:
        20px;

    line-height:
        1.65;
}


body.locked {
    overflow: hidden;
}


button,
a {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    text-decoration: none;
    color: inherit;
}


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


.hidden {
    display: none !important;
}


/* ==============================================================
   03. GOLD PARTICLES
   ============================================================== */

#goldCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 40;
}


/* ==============================================================
   04. FALLING FLOWERS
   ============================================================== */

#petals {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 35;
}


#petals span {

    position: absolute;

    top: -40px;

    color:
        rgba(201, 162, 78, 0.30);

    animation:
        fallingFlower
        linear
        infinite;
}


@keyframes fallingFlower {

    0% {

        transform:
            translate3d(0, -40px, 0)
            rotate(0deg);

    }

    100% {

        transform:
            translate3d(80px, 110vh, 0)
            rotate(320deg);

    }

}


/* ==============================================================
   05. OPENING SCREEN
   ============================================================== */

.opening {

    min-height:
        100svh;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    padding:
        40px 20px 110px;

    color:
        var(--ivory);

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(201,162,78,.20),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #721D35,
            #541323 45%,
            #350812
        );
}


.opening::before {

    content:
        "";

    position:
        absolute;

    inset:
        18px;

    border:
        1px solid
        rgba(244,222,160,.72);

    box-shadow:

        inset
        0 0 0 7px
        rgba(244,222,160,.05);

    pointer-events:
        none;
}


.opening-border {

    position:
        absolute;

    inset:
        32px;

    border:
        1px solid
        rgba(244,222,160,.20);

    pointer-events:
        none;
}


.opening-halo {

    position:
        absolute;

    width:
        75vmin;

    height:
        75vmin;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(244,222,160,.18),
            transparent 68%
        );

    filter:
        blur(12px);
}


/* ==============================================================
   06. OPENING TITLE
   ============================================================== */

.opening-title {

    position:
        absolute;

    top:
        5%;

    z-index:
        8;

    display:
        grid;

    justify-items:
        center;

    gap:
        5px;

    text-align:
        center;
}


.opening-om {

    color:
        var(--gold-bright);

    font-size:
        52px;

    line-height:
        1;
}


.opening-telugu {

    font-family:
        var(--telugu);

    font-size:
        20px;

    color:
        #F6E4AC;
}


.opening-brand {

    font-family:
        var(--sans);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #EBD59A;
}


/* ==============================================================
   07. INVITATION CARD OPENING
   ============================================================== */

.cover-stage {

    width:
        min(76vw, 450px);

    aspect-ratio:
        3 / 4;

    position:
        relative;

    perspective:
        2000px;

    z-index:
        10;

    filter:
        drop-shadow(
            0 35px 40px
            rgba(0,0,0,.42)
        );
}


.inside-card {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    border-radius:
        6px;

    background:
        var(--ivory);

    box-shadow:
        0 0 0 1px
        rgba(244,222,160,.9);
}


.inside-card img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.inside-glow {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            110deg,
            rgba(255,255,255,.18),
            transparent 35%,
            transparent 70%,
            rgba(255,255,255,.10)
        );

    pointer-events:
        none;
}


.cover-card {

    position:
        absolute;

    inset:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        6px;

    overflow:
        hidden;

    background:
        transparent;

    transform-origin:
        left center;

    transition:

        transform
        1.7s
        cubic-bezier(.20,.82,.18,1),

        box-shadow
        1s;

    z-index:
        5;

    box-shadow:

        inset
        0 0 0 1px
        rgba(244,222,160,.95),

        0 20px 45px
        rgba(0,0,0,.28);
}


.cover-card img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.cover-border {

    position:
        absolute;

    inset:
        13px;

    border:
        1px solid
        rgba(244,222,160,.88);

    box-shadow:
        inset
        0 0 0 4px
        rgba(255,255,255,.07);

    pointer-events:
        none;
}


.cover-shine {

    position:
        absolute;

    inset:
        -30%;

    background:

        linear-gradient(
            105deg,
            transparent 38%,
            rgba(255,255,255,.24) 50%,
            transparent 62%
        );

    transform:
        translateX(-85%)
        rotate(10deg);

    animation:
        coverShine
        5s
        infinite;

    pointer-events:
        none;
}


@keyframes coverShine {

    0%,
    42% {

        transform:
            translateX(-85%)
            rotate(10deg);

    }

    65%,
    100% {

        transform:
            translateX(85%)
            rotate(10deg);

    }

}


.opening.opened
.cover-card {

    transform:
        rotateY(-112deg)
        translateX(-4%);

    box-shadow:
        none;
}


/* ==============================================================
   08. OPEN BADGE
   ============================================================== */

.open-badge {

    position:
        absolute;

    left:
        50%;

    bottom:
        -72px;

    transform:
        translateX(-50%);

    display:
        grid;

    justify-items:
        center;

    gap:
        4px;

    white-space:
        nowrap;

    text-align:
        center;

    color:
        #F4DEA0;

    transition:
        opacity .4s;

    z-index:
        10;
}


.badge-star {

    font-size:
        26px;

    color:
        var(--gold-bright);
}


.open-badge strong {

    font-family:
        var(--sans);

    font-size:
        13px;

    letter-spacing:
        2.5px;
}


.open-badge small {

    font-size:
        17px;

    opacity:
        .85;
}


.opening.opened
.open-badge {

    opacity:
        0;
}


.opening.fade-out {

    opacity:
        0;

    transition:
        opacity .9s;

    pointer-events:
        none;
}


.opening-note {

    position:
        absolute;

    bottom:
        4%;

    font-size:
        17px;

    letter-spacing:
        1.7px;

    color:
        #E8D5A0;
}


/* ==============================================================
   09. TOP BAR
   ============================================================== */

.topbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        72px;

    padding:
        0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    z-index:
        30;

    color:
        white;

    background:
        rgba(53,8,18,.95);

    border-bottom:
        1px solid
        rgba(244,222,160,.35);

    backdrop-filter:
        blur(14px);
}


.mini-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-family:
        var(--sans);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.mini-brand span {

    font-size:
        27px;

    color:
        var(--gold-bright);
}


.top-actions {

    display:
        flex;

    gap:
        10px;
}


.icon-button {

    width:
        46px;

    height:
        46px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(244,222,160,.60);

    background:
        rgba(255,255,255,.04);

    color:
        #F5DEA0;

    font-size:
        22px;

    transition:
        .25s;
}


.icon-button:hover {

    background:
        rgba(244,222,160,.12);

    transform:
        translateY(-2px);
}


/* ==============================================================
   10. HERO
   ============================================================== */

.hero {

    min-height:
        100svh;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    padding:
        130px 25px 90px;

    color:
        var(--ivory);

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(201,162,78,.18),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #721D35,
            #541323 50%,
            #350812
        );
}


.hero-pattern {

    position:
        absolute;

    inset:
        0;

    opacity:
        .09;

    background-image:

        radial-gradient(
            circle,
            var(--gold-bright) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;
}


.hero-frame {

    position:
        absolute;

    inset:
        24px;

    border:
        1px solid
        rgba(244,222,160,.58);

    box-shadow:

        inset
        0 0 0 7px
        rgba(244,222,160,.05);
}


.hero-frame::after {

    content:
        "";

    position:
        absolute;

    inset:
        10px;

    border:
        1px solid
        rgba(244,222,160,.17);
}


.hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        1100px;

    text-align:
        center;
}


/* ==============================================================
   11. HERO TYPOGRAPHY
   ============================================================== */

.hero-om {

    font-size:
        60px;

    line-height:
        1;

    color:
        var(--gold-bright);
}


.telugu-script {

    font-family:
        var(--telugu);

    font-size:
        29px;

    font-weight:
        500;

    color:
        #F5DEA0;

    margin:
        15px 0;
}


.eyebrow {

    font-family:
        var(--sans);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        3.5px;

    color:
        #F5E7C2;
}


.gold-ornament {

    margin:
        20px 0;

    color:
        var(--gold-bright);

    font-size:
        26px;

    letter-spacing:
        9px;
}


.invitation-line {

    max-width:
        850px;

    margin:
        28px auto;

    font-size:
        24px;

    line-height:
        1.6;
}


.small-label {

    margin:
        18px 0 5px;

    font-family:
        var(--sans);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #EEDDAE;
}


.hero h1 {

    margin:
        0;

    font-family:
        var(--display);

    font-size:
        clamp(54px, 7.5vw, 96px);

    line-height:
        1;

    letter-spacing:
        -1.5px;

    text-transform:
        uppercase;

    color:
        #FFFDF7;
}


.degree {

    margin:
        11px 0;

    font-family:
        var(--sans);

    font-size:
        18px;

    font-weight:
        600;

    letter-spacing:
        2px;

    color:
        #EBDCC7;
}


.heart-divider {

    margin:
        15px 0;

    font-size:
        34px;

    color:
        var(--gold-bright);
}


.date-line {

    margin:
        27px 0 6px;

    font-family:
        var(--sans);

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #F5E3B1;
}


.time-line {

    margin:
        0 0 32px;

    font-family:
        var(--sans);

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        white;
}


/* ==============================================================
   12. BUTTONS
   ============================================================== */

.gold-button,
.outline-button,
.map-button {

    min-height:
        56px;

    padding:
        14px 27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        3px;

    text-transform:
        uppercase;

    font-family:
        var(--sans);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    transition:
        .25s;
}


.gold-button {

    color:
        #3A1019;

    background:

        linear-gradient(
            135deg,
            #F2D991,
            #C49A4C
        );

    border:
        1px solid
        #F8E8B7;

    box-shadow:
        0 13px 35px
        rgba(0,0,0,.20);
}


.gold-button:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.07);
}


.outline-button {

    color:
        var(--maroon);

    background:
        transparent;

    border:
        1px solid
        rgba(84,19,35,.48);
}


.outline-button:hover {

    background:
        rgba(201,162,78,.08);
}


.map-button {

    color:
        #FFF1C9;

    background:
        var(--maroon);

    border:
        1px solid
        var(--maroon);
}


/* ==============================================================
   13. RIBBON
   ============================================================== */

.ribbon-section {

    background:
        var(--maroon-deep);

    padding:
        0 18px;
}


.ribbon {

    width:
        min(950px,100%);

    margin:
        auto;

    padding:
        16px 20px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        20px;

    text-align:
        center;

    color:
        #F5E1A7;

    background:
        linear-gradient(
            90deg,
            #721D35,
            #541323,
            #721D35
        );

    border:
        1px solid
        rgba(244,222,160,.45);

    font-size:
        20px;
}


.ribbon b {
    color:
        var(--gold-bright);
}


/* ==============================================================
   14. GENERAL SECTIONS
   ============================================================== */

.section {

    padding:
        115px 25px;
}


.section-inner {

    max-width:
        1150px;

    margin:
        auto;

    text-align:
        center;
}


.section-inner.wide {
    max-width:
        1300px;
}


.section-inner.narrow {
    max-width:
        1050px;
}


.section h2 {

    margin:
        10px 0 17px;

    font-family:
        var(--display);

    font-size:
        clamp(45px,5vw,72px);

    line-height:
        1.1;

    color:
        var(--maroon);
}


.section-kicker {

    margin:
        0 0 12px;

    font-family:
        var(--sans);

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    color:
        var(--gold-dark);
}


.muted {

    max-width:
        850px;

    margin:
        auto;

    color:
        var(--muted);

    font-size:
        22px;

    line-height:
        1.6;
}


/* ==============================================================
   15. COUNTDOWN
   ============================================================== */

.paper-section {

    background:

        linear-gradient(
            180deg,
            #FFFDF8,
            #F4EBDD
        );
}


.countdown {

    max-width:
        1000px;

    margin:
        55px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        22px;
}


.count-card {

    min-height:
        185px;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px 10px;

    background:
        rgba(255,255,255,.70);

    border:
        1px solid
        var(--line);

    box-shadow:
        0 15px 40px
        rgba(53,8,18,.07);
}


.count-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        1px solid
        rgba(139,102,50,.15);
}


.count-card strong {

    position:
        relative;

    z-index:
        2;

    font-family:
        var(--display);

    font-size:
        clamp(58px,6vw,82px);

    line-height:
        1;

    letter-spacing:
        2px;

    color:
        var(--maroon);
}


.count-card span {

    position:
        relative;

    z-index:
        2;

    margin-top:
        16px;

    font-family:
        var(--sans);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        var(--gold-dark);
}


/* ==============================================================
   16. COUPLE
   ============================================================== */

.couple-section {

    background:
        var(--ivory);
}


.couple-layout {

    margin-top:
        65px;

    display:
        grid;

    grid-template-columns:
        minmax(300px,520px)
        minmax(300px,1fr);

    gap:
        80px;

    align-items:
        center;

    text-align:
        left;
}


.portrait-frame {

    position:
        relative;

    padding:
        17px;

    background:
        var(--cream);

    border:
        1px solid
        var(--line);

    box-shadow:
        var(--shadow);
}


.portrait-inner {

    aspect-ratio:
        4 / 5;

    position:
        relative;

    overflow:
        hidden;

    background:
        #EFE3D4;

    display:
        grid;

    place-items:
        center;
}


.portrait-inner img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.photo-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    gap:
        10px;

    color:
        var(--muted);
}


.photo-placeholder span {

    font-size:
        58px;

    color:
        var(--gold);
}


.photo-placeholder strong {

    font-family:
        var(--sans);

    font-size:
        14px;

    letter-spacing:
        2px;
}


.photo-placeholder small {

    max-width:
        280px;

    font-size:
        17px;
}


.frame-flower {

    position:
        absolute;

    z-index:
        3;

    color:
        var(--gold);

    font-size:
        40px;
}


.flower-a {

    top:
        -25px;

    right:
        25px;
}


.flower-b {

    bottom:
        -23px;

    left:
        24px;
}


.large-copy {

    font-size:
        28px;

    line-height:
        1.65;
}


.gold-ornament.dark {

    color:
        var(--gold-dark);
}


.name-block {

    font-size:
        24px;

    line-height:
        1.55;
}


.name-block strong {

    color:
        var(--maroon);
}


.with {

    text-align:
        center;

    font-style:
        italic;

    color:
        var(--gold-dark);

    font-size:
        26px;
}


/* ==============================================================
   17. FAMILY
   ============================================================== */

.family-banner {

    position:
        relative;

    padding:
        120px 25px;

    text-align:
        center;

    color:
        #FFF8E8;

    background:

        linear-gradient(
            145deg,
            #721D35,
            #541323,
            #350812
        );
}


.family-banner::before {

    content:
        "";

    position:
        absolute;

    inset:
        25px;

    border:
        1px solid
        rgba(244,222,160,.42);
}


.family-inner {

    position:
        relative;

    max-width:
        1000px;

    margin:
        auto;
}


.family-banner h2 {

    font-family:
        var(--display);

    font-size:
        clamp(44px,5vw,68px);

    color:
        var(--gold-bright);

    margin:
        10px 0 18px;
}


.family-banner p:not(.section-kicker) {

    font-size:
        25px;

    line-height:
        1.65;

    color:
        #F0DEC0;
}


.section-kicker.light {

    color:
        var(--gold-light);
}


/* ==============================================================
   18. EVENTS
   ============================================================== */

.events-section {

    background:

        linear-gradient(
            180deg,
            #F8F0E4,
            #FFFDF8
        );
}


.event-grid {

    margin-top:
        60px;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        26px;
}


.event-card {

    min-height:
        500px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    background:
        rgba(255,253,248,.88);

    border:
        1px solid
        var(--line);

    box-shadow:
        0 18px 50px
        rgba(53,8,18,.08);

    transition:
        .3s;
}


.event-card:hover {

    transform:
        translateY(-7px);
}


.event-card.featured {

    transform:
        translateY(-15px);

    background:

        linear-gradient(
            160deg,
            #721D35,
            #541323
        );

    border-color:
        var(--gold);

    color:
        #FFF6DE;

    box-shadow:
        0 28px 65px
        rgba(53,8,18,.20);
}


.event-top {

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    font-family:
        var(--sans);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        var(--muted);
}


.event-card.featured
.event-top {

    color:
        #E8D5A2;
}


.event-top em {

    font-style:
        normal;

    color:
        var(--gold-dark);
}


.event-card.featured
.event-top em {

    color:
        var(--gold-bright);
}


.event-icon {

    margin:
        32px 0 11px;

    font-size:
        47px;

    color:
        var(--gold);
}


.event-card h3 {

    margin:
        0;

    font-family:
        var(--display);

    font-size:
        40px;

    color:
        var(--maroon);
}


.event-card.featured h3 {

    color:
        var(--gold-bright);
}


.event-date {

    margin:
        13px 0 0;

    font-size:
        22px;
}


.event-time {

    margin:
        6px 0;

    font-family:
        var(--sans);

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        var(--wine);
}


.event-card.featured
.event-time {

    color:
        #F3DEA0;
}


.event-line {

    width:
        80px;

    margin:
        21px auto;

    border-top:
        1px solid
        var(--gold);
}


.event-copy,
.event-location {

    font-size:
        20px;

    line-height:
        1.55;

    color:
        var(--brown-light);
}


.event-card.featured
.event-location {

    color:
        #F1DEC3;
}


.event-location {

    margin-top:
        auto;
}


/* ==============================================================
   19. VENUE
   ============================================================== */

.venue-section {

    background:
        var(--ivory);
}


.venue-card {

    max-width:
        880px;

    margin:
        55px auto 0;

    padding:
        60px 30px;

    background:

        linear-gradient(
            145deg,
            #FFFDF8,
            #F4EBDD
        );

    border:
        1px solid
        var(--line);

    box-shadow:
        var(--shadow);
}


.venue-symbol {

    font-size:
        58px;

    color:
        var(--gold);
}


.venue-ornament {

    font-size:
        34px;

    color:
        var(--gold-dark);
}


.venue-card h3 {

    margin:
        8px 0;

    font-family:
        var(--display);

    font-size:
        42px;

    color:
        var(--maroon);
}


.venue-card p {

    font-size:
        24px;

    line-height:
        1.6;
}


.venue-actions {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        16px;

    margin-top:
        32px;
}


/* ==============================================================
   20. GALLERY
   IMPORTANT:
   object-fit: contain
   prevents faces from being cropped.
   ============================================================== */

.gallery-section {

    background:

        linear-gradient(
            180deg,
            #F4EBDD,
            #FFFDF8
        );
}


.gallery-kicker {

    font-size:
        18px;

    letter-spacing:
        4px;
}


.gallery-grid {

    max-width:
        1100px;

    margin:
        60px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        30px;
}


.gallery-card {

    padding:
        10px;

    border:
        1px solid
        var(--line);

    background:
        #FFFDF8;

    box-shadow:
        0 18px 45px
        rgba(53,8,18,.10);

    text-align:
        left;

    transition:
        .3s;
}


.gallery-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 28px 65px
        rgba(53,8,18,.16);
}


/*
   This container does NOT force the photo
   to fill by cropping.

   The photograph keeps its original
   proportions.
*/

.gallery-image-wrap {

    width:
        100%;

    min-height:
        380px;

    max-height:
        560px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px;

    overflow:
        hidden;

    background:
        #F3E7D6;

    border:
        1px solid
        rgba(139,102,50,.12);
}


/*
   IMPORTANT:

   contain = full image visible
   no face cropping
   no stretching
*/

.gallery-image-wrap img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-width:
        100%;

    max-height:
        530px;

    object-fit:
        contain;

    object-position:
        center;
}


.gallery-card span {

    display:
        block;

    padding:
        17px 8px 9px;

    font-family:
        var(--sans);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        var(--maroon);
}


/* ==============================================================
   21. CONTACT
   ============================================================== */

.contact-section {

    background:
        var(--ivory);
}


.contact-grid {

    max-width:
        1000px;

    margin:
        55px auto 38px;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        22px;
}


.contact-card {

    padding:
        32px 18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    background:
        linear-gradient(
            145deg,
            #FFFDF8,
            #F5EBDD
        );

    border:
        1px solid
        var(--line);

    transition:
        .25s;
}


.contact-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--gold);
}


.contact-card span {

    font-family:
        var(--sans);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        var(--gold-dark);
}


.contact-card strong {

    font-family:
        var(--display);

    font-size:
        31px;

    color:
        var(--maroon);
}


.contact-card b {

    font-family:
        var(--sans);

    font-size:
        21px;

    letter-spacing:
        1px;
}


.contact-card small {

    margin-top:
        9px;

    font-family:
        var(--sans);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        var(--wine);
}


.share-row {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;
}


.share-status {

    min-height:
        30px;

    color:
        var(--muted);

    font-size:
        18px;
}


/* ==============================================================
   22. FOOTER
   ============================================================== */

footer {

    padding:
        95px 25px;

    text-align:
        center;

    color:
        #F4E4B7;

    background:

        linear-gradient(
            145deg,
            #721D35,
            #541323,
            #350812
        );
}


.footer-frame {

    max-width:
        920px;

    margin:
        auto;

    padding:
        60px 25px;

    border:
        1px solid
        rgba(244,222,160,.55);
}


.footer-om {

    font-size:
        58px;

    color:
        var(--gold-bright);
}


.footer-script {

    font-family:
        var(--telugu);

    font-size:
        27px;

    color:
        var(--gold-bright);
}


.footer-names {

    font-family:
        var(--sans);

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        2.5px;
}


.footer-date {

    font-family:
        var(--sans);

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        4px;

    color:
        var(--gold-light);
}


.footer-divider {

    width:
        120px;

    margin:
        30px auto;

    border-top:
        1px solid
        rgba(244,222,160,.55);
}


.footer-frame > p {

    font-size:
        21px;

    line-height:
        1.65;
}


.footer-compliment {

    color:
        #E8D5A0;

    font-style:
        italic;

    font-size:
        20px !important;
}


/* ==============================================================
   23. LIGHTBOX
   ============================================================== */

.lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        grid;

    place-items:
        center;

    padding:
        25px;

    background:
        rgba(30,4,10,.96);
}


.lightbox img {

    max-width:
        94vw;

    max-height:
        90vh;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border:
        1px solid
        rgba(244,222,160,.65);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.65);
}


.close-lightbox {

    position:
        absolute;

    top:
        18px;

    right:
        20px;

    width:
        52px;

    height:
        52px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(244,222,160,.65);

    background:
        transparent;

    color:
        white;

    font-size:
        37px;

    line-height:
        1;
}


/* ==============================================================
   24. FLOATING MUSIC
   ============================================================== */

.floating-music {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        62px;

    height:
        62px;

    border-radius:
        50%;

    z-index:
        36;

    border:
        1px solid
        var(--gold-light);

    background:
        var(--maroon);

    color:
        var(--gold-bright);

    font-size:
        27px;

    box-shadow:
        0 15px 35px
        rgba(53,8,18,.30);
}


.floating-music.playing {

    animation:
        musicPulse
        1.6s
        infinite;
}


@keyframes musicPulse {

    50% {

        box-shadow:

            0 0 0 9px
            rgba(201,162,78,.10),

            0 15px 35px
            rgba(53,8,18,.30);

    }

}


/* ==============================================================
   25. SCROLL REVEAL
   ============================================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity .9s ease,

        transform .9s ease;
}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* ==============================================================
   26. TABLET
   ============================================================== */

@media (max-width: 900px) {

    body {
        font-size:
            19px;
    }


    .couple-layout {

        grid-template-columns:
            1fr;

        max-width:
            700px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .couple-copy {
        text-align:
            center;
    }


    .event-grid {

        grid-template-columns:
            1fr;

        max-width:
            650px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .event-card.featured {

        transform:
            none;

    }


    .gallery-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .contact-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* ==============================================================
   27. MOBILE
   ============================================================== */

@media (max-width: 620px) {

    body {

        font-size:
            18px;

        line-height:
            1.6;

    }


    /* ---------- NAV ---------- */

    .topbar {

        height:
            60px;

        padding:
            0 14px;

    }


    .mini-brand strong {

        font-size:
            10px;

        letter-spacing:
            1.5px;

    }


    .mini-brand span {

        font-size:
            23px;

    }


    .icon-button {

        width:
            40px;

        height:
            40px;

        font-size:
            19px;

    }


    /* ---------- OPENING ---------- */

    .opening {

        padding:
            30px 14px 90px;

    }


    .opening-title {

        top:
            4%;

    }


    .opening-om {

        font-size:
            42px;

    }


    .opening-telugu {

        font-size:
            17px;

    }


    .opening-brand {

        font-size:
            9px;

        letter-spacing:
            2px;

    }


    .cover-stage {

        width:
            min(88vw,390px);

    }


    .open-badge {

        bottom:
            -65px;

    }


    .opening-note {

        font-size:
            13px;

        letter-spacing:
            1px;

    }


    /* ---------- HERO ---------- */

    .hero {

        padding:
            105px 17px 75px;

    }


    .hero-frame {

        inset:
            12px;

    }


    .hero-om {

        font-size:
            48px;

    }


    .telugu-script {

        font-size:
            22px;

    }


    .eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }


    .gold-ornament {

        font-size:
            21px;

        letter-spacing:
            6px;

    }


    .invitation-line {

        font-size:
            19px;

        line-height:
            1.55;

    }


    .small-label {

        font-size:
            11px;

        letter-spacing:
            2px;

    }


    .hero h1 {

        font-size:
            clamp(
                41px,
                11vw,
                61px
            );

    }


    .degree {

        font-size:
            14px;

    }


    .date-line {

        font-size:
            12px;

        letter-spacing:
            1.5px;

    }


    .time-line {

        font-size:
            12px;

    }


    /* ---------- BUTTONS ---------- */

    .gold-button,
    .outline-button,
    .map-button {

        min-height:
            53px;

        padding:
            13px 20px;

        font-size:
            11px;

    }


    /* ---------- RIBBON ---------- */

    .ribbon {

        font-size:
            15px;

        gap:
            8px;

        padding:
            13px 10px;

    }


    /* ---------- SECTIONS ---------- */

    .section {

        padding:
            82px 16px;

    }


    .section h2 {

        font-size:
            42px;

    }


    .section-kicker {

        font-size:
            11px;

        letter-spacing:
            2.6px;

    }


    .muted {

        font-size:
            18px;

    }


    /* ---------- COUNTDOWN ---------- */

    .countdown {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            13px;

        margin-top:
            32px;

    }


    .count-card {

        min-height:
            145px;

    }


    .count-card strong {

        font-size:
            50px;

    }


    .count-card span {

        font-size:
            9px;

        letter-spacing:
            2px;

    }


    /* ---------- COUPLE ---------- */

    .large-copy {

        font-size:
            22px;

    }


    .name-block {

        font-size:
            21px;

    }


    .with {

        font-size:
            23px;

    }


    /* ---------- FAMILY ---------- */

    .family-banner {

        padding:
            90px 20px;

    }


    .family-banner h2 {

        font-size:
            42px;

    }


    .family-banner p:not(.section-kicker) {

        font-size:
            20px;

    }


    /* ---------- EVENTS ---------- */

    .event-card {

        min-height:
            440px;

        padding:
            25px 18px;

    }


    .event-card h3 {

        font-size:
            34px;

    }


    .event-date {

        font-size:
            19px;

    }


    .event-time {

        font-size:
            15px;

    }


    .event-copy,
    .event-location {

        font-size:
            18px;

    }


    /* ---------- VENUE ---------- */

    .venue-card {

        padding:
            42px 18px;

    }


    .venue-card h3 {

        font-size:
            33px;

    }


    .venue-card p {

        font-size:
            20px;

    }


    .venue-actions {

        flex-direction:
            column;

    }


    .venue-actions
    .gold-button,
    .venue-actions
    .outline-button {

        width:
            100%;

    }


    /* ---------- GALLERY ---------- */

    .gallery-kicker {

        font-size:
            14px;

        letter-spacing:
            3px;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    /*
       On mobile the image gets enough
       vertical room and still doesn't crop.
    */

    .gallery-image-wrap {

        min-height:
            300px;

        max-height:
            600px;

        padding:
            10px;

    }


    .gallery-image-wrap img {

        width:
            100%;

        height:
            auto;

        max-height:
            570px;

        object-fit:
            contain;

    }


    .gallery-card span {

        font-size:
            12px;

        padding:
            14px 7px 8px;

    }


    /* ---------- CONTACT ---------- */

    .contact-grid {

        grid-template-columns:
            1fr;

        max-width:
            500px;

    }


    .contact-card {

        padding:
            25px;

    }


    .contact-card strong {

        font-size:
            29px;

    }


    .contact-card b {

        font-size:
            20px;

    }


    /* ---------- FOOTER ---------- */

    footer {

        padding:
            75px 16px;

    }


    .footer-frame {

        padding:
            48px 18px;

    }


    .footer-script {

        font-size:
            21px;

    }


    .footer-names {

        font-size:
            10px;

    }


    .footer-date {

        font-size:
            13px;

    }


    .footer-frame > p {

        font-size:
            18px;

    }


    /* ---------- MUSIC ---------- */

    .floating-music {

        width:
            55px;

        height:
            55px;

        right:
            14px;

        bottom:
            14px;

    }

}


/* ==============================================================
   28. REDUCED MOTION
   ============================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }


    .reveal {

        opacity:
            1;

        transform:
            none;

    }

}


/* ==============================================================
   END
   ============================================================== */