/* Cinematic depth, crisp typography and restrained 3D lighting. */
html { text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.opening-card,
.family-card,
.glass-card {
    border-color: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.13));
    box-shadow:
        0 1px 0 rgba(255,255,255,.11) inset,
        0 -1px 0 rgba(0,0,0,.28) inset,
        0 22px 62px rgba(0,0,0,.31),
        0 7px 20px color-mix(in srgb, var(--primary) 13%, transparent);
}

.eyebrow,
.section-label,
.preview-eyebrow {
    text-shadow: 0 1px 0 rgba(255,255,255,.13), 0 3px 12px rgba(0,0,0,.65), 0 0 13px color-mix(in srgb, var(--accent) 25%, transparent);
}

.hero h1,
.preview-heading {
    color: #fff9ed;
    -webkit-text-stroke: .22px color-mix(in srgb, var(--accent) 45%, transparent);
    text-shadow:
        0 1px 0 rgba(255,255,255,.22),
        0 2px 0 color-mix(in srgb, var(--accent) 26%, #5e3440),
        0 5px 13px rgba(0,0,0,.8),
        0 0 22px color-mix(in srgb, var(--accent) 19%, transparent);
}

.section h2,
.couple-name,
.story-signature {
    color: var(--accent);
    -webkit-text-stroke: .28px color-mix(in srgb, #fff 50%, var(--accent));
    text-shadow:
        0 1px 0 #fff3cf,
        0 2px 0 color-mix(in srgb, var(--accent) 70%, #8a5439),
        0 3px 0 color-mix(in srgb, var(--accent) 48%, #512a34),
        0 7px 8px rgba(0,0,0,.58),
        0 15px 30px rgba(0,0,0,.27),
        0 0 25px color-mix(in srgb, var(--accent) 25%, transparent);
}

.opening-card .animated-name-char,
.hero .animated-name-char {
    color: transparent;
    background: linear-gradient(180deg, #fff9dc 4%, var(--accent) 40%, color-mix(in srgb, var(--accent) 68%, #9d593a) 72%, #fff1c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: .28px color-mix(in srgb, #fff 44%, var(--accent));
    text-shadow:
        0 1px 0 #fff5d5,
        0 2px 0 color-mix(in srgb, var(--accent) 72%, #704033),
        0 3px 0 color-mix(in srgb, var(--accent) 45%, #3c2029),
        0 7px 8px rgba(0,0,0,.66),
        0 13px 28px rgba(0,0,0,.3);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 26%, transparent));
}
.opening-card .name-ampersand,
.hero .name-ampersand {
    background: linear-gradient(180deg, #fffef2, var(--accent) 55%, #fff0be);
    -webkit-background-clip: text;
    background-clip: text;
}

.footer-couple-names {
    -webkit-text-stroke: .22px color-mix(in srgb, #fff 42%, var(--accent));
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.58)) drop-shadow(0 0 15px color-mix(in srgb, var(--accent) 25%, transparent));
}

.count-grid div,
.guest-info-card,
.ceremony-card {
    position: relative;
    overflow: hidden;
}
.count-grid div::before,
.guest-info-card::before,
.ceremony-card::before,
.family-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 31%, transparent 70%, color-mix(in srgb, var(--accent) 7%, transparent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -18px 34px rgba(0,0,0,.08);
}
.family-card { position: relative; overflow: hidden; }
.family-card > *,
.ceremony-card > *,
.guest-info-card > * { position: relative; z-index: 1; }

.count-grid strong {
    color: #fff7dd;
    -webkit-text-stroke: .25px var(--accent);
    text-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 52%, #613441), 0 7px 13px rgba(0,0,0,.7), 0 0 19px color-mix(in srgb, var(--accent) 28%, transparent);
}
.detail-list span,
.family-card b {
    color: #fffaf2;
    text-shadow: 0 2px 5px rgba(0,0,0,.74);
}

.gallery-item {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.14));
    box-shadow: 0 2px 0 rgba(255,255,255,.1) inset, 0 16px 36px rgba(0,0,0,.4), 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
}
.gallery-item img {
    filter: contrast(1.045) saturate(1.06) brightness(1.015);
}

.btn {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 9px 24px rgba(0,0,0,.24);
}
.btn.primary {
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 30px color-mix(in srgb, var(--primary) 38%, transparent), 0 4px 8px rgba(0,0,0,.34);
}

@media (hover: hover) and (min-width: 761px) {
    .family-card,
    .ceremony-card,
    .guest-info-card { transition: transform .38s cubic-bezier(.2,.75,.2,1), box-shadow .38s, border-color .38s; }
    .family-card:hover,
    .ceremony-card:hover,
    .guest-info-card:hover {
        transform: perspective(900px) translateY(-7px) rotateX(1.4deg);
        border-color: color-mix(in srgb, var(--accent) 48%, transparent);
        box-shadow: 0 30px 75px rgba(0,0,0,.36), 0 9px 24px color-mix(in srgb, var(--primary) 17%, transparent);
    }
}

@media (max-width: 760px) {
    .section h2,
    .couple-name,
    .story-signature {
        -webkit-text-stroke-width: .2px;
        text-shadow:
            0 1px 0 #fff0c7,
            0 2px 0 color-mix(in srgb, var(--accent) 58%, #633743),
            0 6px 8px rgba(0,0,0,.62),
            0 0 20px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .opening-card .animated-name-char,
    .hero .animated-name-char {
        -webkit-text-stroke-width: .2px;
        text-shadow: 0 1px 0 #fff2ce, 0 2px 0 color-mix(in srgb, var(--accent) 52%, #5b313c), 0 6px 8px rgba(0,0,0,.66);
        filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 23%, transparent));
    }
    .gallery-item img { filter: contrast(1.035) saturate(1.045); }
}

.owner-toolbar {
    position: fixed;
    z-index: 75;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 110px);
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(18, 12, 20, .82);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
    font-family: Montserrat, sans-serif;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.owner-toolbar-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    padding: 0 7px;
    color: #fff;
    white-space: nowrap;
}

.owner-toolbar-label > i {
    grid-row: 1 / 3;
    color: var(--accent);
    font-style: normal;
    filter: drop-shadow(0 0 8px var(--accent));
}

.owner-toolbar-label b {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.owner-toolbar-label small {
    max-width: 160px;
    overflow: hidden;
    color: rgba(255, 255, 255, .62);
    font-size: 9px;
    text-overflow: ellipsis;
}

.owner-toolbar-actions {
    display: flex;
    gap: 7px;
}

.owner-toolbar-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.owner-toolbar-actions a i {
    color: var(--accent);
    font-size: 14px;
    font-style: normal;
}

.owner-toolbar-actions .owner-edit-link {
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #fff 5%), var(--primary));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 36%, transparent);
}

@media (hover: hover) {
    .owner-toolbar-actions a:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--accent) 70%, transparent);
        background-color: rgba(255, 255, 255, .13);
    }
}

@media (max-width: 700px) {
    .owner-toolbar {
        top: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        max-width: none;
        justify-content: space-between;
        gap: 7px;
        padding: 8px;
        border-radius: 15px;
    }

    .owner-toolbar-label { padding-inline: 4px; }
    .owner-toolbar-label small { max-width: 92px; }
    .owner-toolbar-actions { flex: 1; justify-content: flex-end; }
    .owner-toolbar-actions a { min-height: 44px; padding-inline: 10px; }
}

@media (max-width: 390px) {
    .owner-toolbar-label b,
    .owner-toolbar-label small { display: none; }
    .owner-toolbar-label { display: block; padding: 0 3px; }
    .owner-toolbar-actions a { flex: 1; padding-inline: 8px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .family-card,
    .ceremony-card,
    .guest-info-card { transform: none !important; transition: none !important; }
    .owner-toolbar-actions a { transition: none; }
}