/* ═══ FONTS ═══ */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/dm-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/dm-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ RESET & FIGMA VARIABLES ═══ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Colors */
    --accent: #d4af37;
    --text: #2a2520;
    --text-80: rgba(42, 37, 32, 0.8);
    --text-white: #f9f9f7;
    --text-white-80: rgba(249, 249, 247, 0.8);
    --dark-bg: #1c1b1b;
    --white: #ffffff;
    --black-10: rgba(0, 0, 0, 0.1);
    --bg: #fdfbf7;
    --subtitle: #515151;

    /* Spacing */
    --space-xs: 13.3px;
    --space-s: 20px;
    --space-m: 30px;
    --space-l: 60px;
    --space-xl: 67.5px;
    --section-padding-x: 30px;
    --section-space-m: 120px;

    /* Sizes */
    --content-width: 1350px;
    --width-m: 540px;
    --width-l: 810px;
    --radius-m: 16px;
    --radius-xxl: 128px;

    /* Typography */
    --heading: 'Cormorant Garamond', Georgia, serif;
    --body: 'DM Sans', system-ui, sans-serif;
    --h2-size: 60px;
    --h3-size: 32px;
    --body-m-size: 18px;
    --body-s-size: 14px;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
.accent { color: var(--accent); }

/* ═══ ANIMATIONS ═══ */

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero staggered fade-in */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-banner-label {
    opacity: 0;
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.hero-banner-heading {
    opacity: 0;
    animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Heart icon pulse */
@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.section-farewell-icon {
    animation: heartPulse 2.8s ease-in-out infinite;
}

/* Image zoom on reveal */
.section-moment-image img,
.section-closing-image img {
    transform: scale(1.05);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible .section-moment-image img,
.reveal.visible .section-closing-image img {
    transform: scale(1);
}

/* Gold accent fade-in */
.reveal .accent {
    opacity: 0.4;
    transition: opacity 0.8s ease 0.3s;
}
.reveal.visible .accent {
    opacity: 1;
}

/* Contact card hover */
.contact-card {
    transition: transform 0.3s ease;
}
.contact-card:hover {
    transform: translateY(-4px);
}

/* Footer link underline animation */
.footer-links a {
    position: relative;
}
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.footer-links a:hover::after {
    width: 100%;
}
.footer-links a:hover {
    opacity: 1;
}

/* ═══ HEADER ═══ */

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px var(--section-padding-x);
}
.header-inner { text-align: center; }
.header-logo {
    font-family: var(--heading);
    font-size: 48px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    line-height: 1.2;
}
.header-subtitle {
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--subtitle);
    margin-top: 12px;
    line-height: 1.2;
}

/* ═══ HERO BANNER ═══ */

.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 650px;
    overflow: hidden;
    padding: var(--section-space-m) var(--section-padding-x);
}
.hero-banner-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-banner-bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 14, 14, 0.85);
}
.hero-banner-content {
    position: relative;
    text-align: center;
    max-width: var(--width-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
.hero-banner-label {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.384px;
}
.hero-banner-heading {
    font-family: var(--heading);
    font-size: 140px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

/* ═══ SECTION: MOMENT ═══ */

.section-moment {
    background: var(--dark-bg);
    padding: var(--section-space-m) var(--section-padding-x);
}
.section-moment-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    gap: var(--space-m);
    align-items: center;
}
.section-moment-text {
    flex: 0 0 660px;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}
.section-moment-heading {
    font-family: var(--heading);
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-white);
}
.section-moment-heading .accent {
    color: var(--accent);
}
.section-moment-desc {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-white-80);
    max-width: var(--width-m);
}
.section-moment-image {
    flex: 0 0 660px;
    height: 445px;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.section-moment-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* ═══ SECTION: CLOSING ═══ */

.section-closing {
    padding: var(--section-space-m) var(--section-padding-x);
}
.section-closing-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    gap: var(--space-l);
    align-items: center;
}
.section-closing-image {
    flex: 0 0 660px;
    height: 445px;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.section-closing-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.section-closing-text {
    flex: 0 0 660px;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}
.section-closing-heading {
    font-family: var(--heading);
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.section-closing-heading .accent {
    color: var(--accent);
}
.section-closing-desc {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-80);
    max-width: var(--width-m);
}

/* ═══ SECTION: FAREWELL ═══ */

.section-farewell {
    background: var(--dark-bg);
    padding: var(--section-space-m) var(--section-padding-x);
}
.section-farewell-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}
.section-farewell-icon {
    width: 45px;
    height: 40px;
}
.section-farewell-icon img {
    width: 100%;
    height: 100%;
}
.section-farewell-heading {
    font-family: var(--heading);
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-white);
    text-align: center;
    max-width: 1008px;
}
.section-farewell-text {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-white-80);
    text-align: center;
    max-width: 950px;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* ═══ CONTACT ═══ */

.contact-section {
    padding: var(--section-space-m) var(--section-padding-x);
}
.contact-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}
.contact-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
.contact-header h2 {
    font-family: var(--heading);
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.contact-header p {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-80);
    max-width: var(--width-m);
}
.contact-cards {
    display: flex;
    gap: var(--space-m);
    width: 100%;
}
.contact-card {
    flex: 1;
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
}
.contact-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xxl);
    background: var(--black-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-icon img {
    width: 26px;
    height: 26px;
}
.contact-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}
.contact-card-body h3 {
    font-family: var(--heading);
    font-size: var(--h3-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.contact-card-body p {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-80);
}
.contact-card-body a {
    font-family: var(--body);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-80);
    text-decoration: none;
    word-break: break-word;
    position: relative;
    display: inline;
}
.contact-card-body a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.contact-card-body a:hover::after {
    width: 100%;
}
.contact-card-body strong {
    font-weight: 700;
    color: var(--text);
}

/* ═══ FOOTER ═══ */

.footer {
    background: var(--dark-bg);
    padding: var(--space-l) var(--section-padding-x);
}
.footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}
.footer-logo-block { text-align: center; }
.footer-logo {
    font-family: var(--heading);
    font-size: 48px;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    line-height: 1.2;
}
.footer-subtitle {
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-white);
    margin-top: 12px;
    line-height: 1.2;
}
.footer-links {
    display: flex;
    gap: 45px;
    font-size: var(--body-s-size);
    font-weight: 400;
}
.footer-links a {
    font-family: var(--body);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.footer-links a:hover { opacity: 0.7; }
.footer-copy {
    font-family: var(--body);
    font-size: var(--body-s-size);
    font-weight: 400;
    color: var(--text-white);
}
.footer-copy a {
    color: var(--text-white);
    text-decoration: none;
    position: relative;
}
.footer-copy a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.footer-copy a:hover::after {
    width: 100%;
}

/* ═══ MODALS ═══ */

.ov {
    display: none; position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    overflow-y: auto; padding: 4rem 1.5rem;
}
.ov.open { display: flex; justify-content: center; align-items: flex-start; }
.mdl {
    background: var(--white);
    border-radius: 12px;
    max-width: 560px; width: 100%;
    padding: 2.5rem; position: relative;
}
.mdl h2 {
    font-family: var(--heading);
    font-size: 1.3rem; font-weight: 500;
    color: var(--text);
    margin-bottom: 1.2rem; padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mdl h3 {
    font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text); margin: 1.2rem 0 0.3rem;
}
.mdl p {
    font-size: 0.85rem; font-weight: 300;
    color: var(--text-80); line-height: 1.8;
}
.mdl a { color: var(--accent); text-decoration: none; }
.mx {
    position: absolute; top: 1rem; right: 1.5rem;
    background: none; border: none;
    font-size: 1.2rem; color: rgba(42, 37, 32, 0.6);
    cursor: pointer; transition: color 0.2s;
}
.mx:hover { color: var(--text); }

/* ═══ RESPONSIVE ═══ */

/* Large desktop → smaller desktop */
@media (max-width: 1440px) {
    .section-moment-text,
    .section-moment-image,
    .section-closing-image,
    .section-closing-text {
        flex: 1 1 0;
    }
    .hero-banner-heading {
        font-size: 100px;
    }
}

/* Tablet landscape */
@media (max-width: 1100px) {
    :root {
        --h2-size: 48px;
    }
    .section-moment-inner {
        flex-direction: column;
        gap: var(--space-l);
    }
    .section-moment-text { flex: none; width: 100%; }
    .section-moment-image { flex: none; width: 100%; height: 400px; }
    .section-moment-desc { max-width: 100%; }

    .section-closing-inner {
        flex-direction: column;
        gap: var(--space-l);
    }
    .section-closing-image { flex: none; width: 100%; height: 400px; }
    .section-closing-text { flex: none; width: 100%; }
    .section-closing-desc { max-width: 100%; }

    .section-moment-heading,
    .section-closing-heading,
    .section-farewell-heading { font-size: var(--h2-size); }

    .hero-banner-heading { font-size: 80px; }

    .section-farewell-heading { max-width: 100%; }
    .section-farewell-text { max-width: 100%; }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .contact-cards {
        flex-wrap: wrap;
    }
    .contact-card {
        flex: 1 1 calc(50% - var(--space-m) / 2);
        min-width: 260px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --section-space-m: 80px;
        --section-padding-x: 20px;
        --h2-size: 36px;
        --h3-size: 24px;
        --body-m-size: 16px;
    }

    .header { padding: 20px var(--section-padding-x); }
    .header-logo { font-size: 36px; letter-spacing: 2px; }
    .header-subtitle { font-size: 14px; margin-top: 8px; }

    .hero-banner { min-height: 400px; }
    .hero-banner-heading { font-size: 52px; }
    .hero-banner-label { font-size: 14px; }

    .section-moment-image,
    .section-closing-image { height: 280px; }

    .section-moment-inner,
    .section-closing-inner { gap: var(--space-m); }

    .contact-cards {
        flex-direction: column;
        gap: var(--space-m);
    }
    .contact-card {
        flex: none;
        width: 100%;
    }

    .footer-logo { font-size: 36px; letter-spacing: 2px; }
    .footer-subtitle { font-size: 14px; }
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-s);
    }
    .footer-copy { font-size: 14px; text-align: center; }

    .ov { padding: 2rem 1rem; }
    .mdl { padding: 1.5rem; }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --section-space-m: 64px;
        --section-padding-x: 16px;
        --h2-size: 28px;
    }

    .hero-banner { min-height: 340px; }
    .hero-banner-heading { font-size: 40px; }
    .hero-banner-label { font-size: 13px; }

    .header-logo { font-size: 32px; }
    .header-subtitle { font-size: 13px; }

    .section-moment-image,
    .section-closing-image { height: 220px; border-radius: 12px; }

    .contact-icon { width: 52px; height: 52px; }
    .contact-icon img { width: 22px; height: 22px; }

    .footer-logo { font-size: 32px; }
    .footer-subtitle { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .reveal .accent { opacity: 1; transition: none; }
    .hero-banner-label,
    .hero-banner-heading { opacity: 1; animation: none; }
    .section-farewell-icon { animation: none; }
    .section-moment-image img,
    .section-closing-image img { transform: none; transition: none; }
    * { transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}