:root {
    /* ── 婚礼主题色（沿用，保持品牌） ── */
    --wedding-ink: #3f332d;
    --wedding-muted: #806f65;
    --wedding-paper: #fbf6ef;
    --wedding-card: #fffdf9;
    --wedding-accent: #b56b58;
    --wedding-line: #eadbce;
    --wedding-on-image: #ffffff;

    /* ── 排版令牌（复制自 frontend/src/modules/base.css，本页不引入 base.css） ── */
    --font-size-3xs: 0.5rem;
    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-normal: 0.02em;
    --letter-spacing-wide: 0.12em;

    --text-spacing-xs: 0.5rem;
    --text-spacing-sm: 0.75rem;
    --text-spacing-md: 1rem;
    --text-spacing-lg: 1.5rem;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
}

/* 通用工具类：默认隐藏，由 JS 按状态启用/删除（SSR 结构默认不可见） */
.display-none {
    display: none !important;
}

/* 主题外壳放 body：背景渐变 + 底色 + 文字色 + 衬线字体，整页（含移出 main 的 footer）统一继承。
 * 本 css 仅由 wedding 页面 chunk 加载，body 规则不会影响站点其他页面。 */
body {
    color: var(--wedding-ink);
    background: var(--wedding-paper);
    font-family: "Noto Serif SC", "Songti SC", serif;
}

.wedding-invite {
    min-height: 100vh;

    & * {
        box-sizing: border-box;
    }
}

/* 眉题排版：section 的 eyebrow 与 hero 的 kicker 共享（颜色各自继承/指定） */
.eyebrow,
.kicker {
    margin: 0;
    font-family: Georgia, serif;
    font-size: var(--font-size-2xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.eyebrow {
    color: var(--wedding-accent);
}

.wedding-section.first {
    padding: 0, 0, var(--space-4), 0;
}

.wedding-section {
    position: relative;
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: var(--space-4) 0;

    /* color: #fff; */

    .heading {
        position: relative;
        overflow: hidden;
        /* height: 400px; */
        display: flex;
        gap: var(--space-2);
        flex-direction: column;
        justify-content: flex-start;
        padding: 30px;
        margin-bottom: var(--space-5);
        background: var(--wedding-paper);
        /* 图片加载前 / 视差移动后露出的兜底底色 */

        /* 背景图由各 section 的 <img class="heading-bg"> 提供：
         * width: 100% → 宽度=heading 宽度；height: auto → 按图片原始比例缩放，不变形；
         * 图片比 heading 高，超出部分被 overflow: hidden 裁掉；
         * top: -25% 为 GSAP ScrollTrigger 的 translateY 视差预留移动空间。
         * 视差动画见 src/pages/public/wedding/index.js。 */
        .heading-bg {
            position: absolute;
            top: -25%;
            left: 0;
            width: 100%;
            height: auto;
            z-index: 0;
            pointer-events: none;
            will-change: transform;
            /* 灰一点的滤镜 */
            filter: brightness(0.6) contrast(1.1);
        }

        /* 文字浮在背景图之上 */
        >*:not(.heading-bg) {
            position: relative;
            z-index: 1;
        }

        h2 {
            margin: 0;
            font-size: var(--font-size-2xl);
            font-weight: 400;
            /* color: inherit; */
        }

        p {
            color: var(--wedding-muted);
            /* color: inherit; */
            line-height: var(--line-height-relaxed);
        }

        @media (max-width: 1080px) {
            margin-bottom: var(--space-4);
            padding: var(--space-4);
        }
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);

        .card {
            padding: var(--space-6) var(--space-5);
            border: 1px solid var(--wedding-line);
            background: var(--wedding-card);

            h3 {
                margin: 0 0 var(--space-3);
                color: var(--wedding-accent);
                font-size: var(--font-size-sm);
                font-weight: 500;
                letter-spacing: var(--letter-spacing-wide);
            }

            p {
                margin: 0;
                color: var(--wedding-muted);
                font-size: var(--font-size-md);
                line-height: var(--line-height-relaxed);
            }
        }

        @media (max-width: 1080px) {
            grid-template-columns: 1fr;
            padding: 0 var(--space-4);
        }
    }

}

.note {
    color: var(--wedding-muted);
    line-height: var(--line-height-relaxed);
}

.footer {
    padding: var(--space-6) var(--space-4) var(--space-9);
    color: var(--wedding-muted);
    text-align: center;
    font-size: var(--font-size-xs);
}

/* 信息篇结语：位于 RSVP 之后、相册之前；不再是整页 <footer> */
.closing {
    margin: var(--space-9) var(--space-4) 0;
    color: var(--wedding-ink);
    text-align: center;
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-relaxed);
}

/* ── 兼容性提醒条 ──
 * 传统扁平写法（非嵌套）：必须在不支持 CSS 嵌套的旧浏览器上也能正常显示，
 * 依赖的 --space-*/
--font-size-* 变量定义在顶层 :root 中，旧浏览器同样可读。 */ .browser-warning {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: var(--space-3) var(--space-4);
    color: #fff;
    background: var(--wedding-accent);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    text-align: center;
}

.browser-warning[hidden] {
    display: none;
}