/* premium-v2 Project Panda Design System */
:root {
    --primary-green: #2d5a27;
    --deep-forest: #1e3d1a;
    --light-green: #eaf2e9;
    --dark-green: #2d5a27;
    --accent-gold: #009C61;
    --dark-charcoal: #1a1a1a;
    --soft-white: #f5f5f5;
    --pure-white: #ffffff;
    --text-muted: #888888;
    --soft-cream: #f9f7f2;
    --light-gray: #f2f2f2;
    --rich-red: #e74c3c;
    /* Added Brand Red */

    --font-main: 'Inter', -apple-system, sans-serif;
    --font-serif: 'Playfair Display', 'Noto Serif JP', serif;

    --transition-smooth: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    --premium-gold: #b49650;
    --dark-bg: #141414;
}

/* --- Full Capacity Notice Bar (Sticky & Slim version) --- */
.full-notice-bar {
    background: #fff5f5;
    border-bottom: 1px solid var(--rich-red);
    padding: 6px 0;
    /* 更加纤细 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    box-shadow: 0 1px 19px rgba(231, 76, 60, 0.1);
}

.notice-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.notice-text {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--dark-charcoal);
}

.notice-text i {
    color: var(--rich-red);
    font-size: 1.4rem;
}

.notice-text p {
    margin: 0;
    font-size: 0.85rem;
    /* 字体调细 */
    line-height: 1.4;
    font-weight: 500;
}

.notice-text strong {
    color: var(--rich-red);
    font-weight: 700;
}

.notice-link-btn {
    background: var(--rich-red);
    color: #fff;
    padding: 5px 14px;
    /* 按钮也调细 */
    border-radius: 4px;
    font-size: 0.75rem;
    /* 字体调小 */
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    border: none;
    box-shadow: none;
    /* 去除阴影 */
}

.notice-link-btn:hover {
    background: #c0392b;
    color: #fff;
    transform: none;
    /* 去除悬浮位移 */
    box-shadow: none;
    /* 确保无阴影 */
}

@media (max-width: 991px) {
    .full-notice-bar {
        padding: 8px 15px;
        /* 侧边留白 */
    }

    .notice-inner {
        flex-direction: row;
        /* 左右两栏布局 */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .notice-text {
        flex: 1;
        gap: 6px;
    }

    .notice-text i {
        display: none;
        /* 手机端隐藏大图标，改用红点 */
    }

    .notice-text p {
        font-size: 0.72rem;
        /* 极致精简字体 */
        line-height: 1.25;
        position: relative;
        padding-left: 12px;
        text-align: left;
    }

    /* 手机端改用小红点标识，更精致 */
    .notice-text p::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 6px;
        height: 6px;
        background: var(--rich-red);
        border-radius: 50%;
    }

    .notice-link-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        border-radius: 4px;
        flex-shrink: 0;
        /* 按钮不换行 */
    }

    /* 极致压缩按钮文字 */
    .notice-link-btn i {
        display: none;
        /* 按钮内箭头也隐藏，节省空间 */
    }
}

.pc-only {
    display: none;
}

@media (min-width: 992px) {
    .pc-only {
        display: block;
    }
}

/* --- Tour Features (Compact Magazine Grid) --- */
.tour-features {
    background-color: #f2f2f2;
    /* 调深一点点的浅灰，让对比更清晰 */
    padding: 60px 0;
    color: var(--dark-charcoal);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 25px 30px;
    background: var(--pure-white);
    /* 卡片变回纯白，在浅绿底色上更有立体感 */
    border: none;
    /* 去掉生硬边框 */
    transition: var(--transition-smooth);
}

.feature-item:hover {
    background: var(--light-green);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.f-number {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-gold);
    opacity: 0.3;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 3px;
}

.f-info {
    flex: 1;
}

.f-info h3 {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--dark-charcoal);
    margin-bottom: 0;
    /* 增加间距给线条留位置 */
    letter-spacing: 0.02em;
    font-family: var(--font-serif);
    position: relative;
    /* 确保线条定位准确 */
}


.feature-item:hover .f-info h3::after {
    width: 70px;
    /* 悬停时线条伸长 */
}

.f-info p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

@media (max-width: 900px) {
    .features-grid {
        gap: 15px;
    }

    .f-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .tour-features {
        padding: 40px 0;
    }

    .feature-item {
        padding: 20px;
        gap: 15px;
    }
    .d-none{
        display: none;
    }
}

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

html {
    scroll-behavior: smooth;
    font-size: 115%; /* Scale up all rem values for 50-70yo demographic (1rem = ~18.4px) */
}

body {
    font-family: var(--font-main);
    background-color: var(--pure-white);
    color: var(--dark-charcoal);
    line-height: 1.8;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: var(--font-serif);
    font-weight: 700;
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loader-inner {
    text-align: center;
}

.loader-logo {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    letter-spacing: 0.5em;
    color: var(--primary-green);
    margin-top: 20px;
}

.loader-line {
    display: block;
    width: 150px;
    height: 1px;
    background: #eeeeee;
    position: relative;
    overflow: hidden;
}

.loader-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-gold);
    transform: translateX(-100%);
    animation: loadingLine 1.5s infinite ease-in-out;
}

@keyframes loadingLine {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Animations */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-smooth);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Section Refinement --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2% 5% 5%;
    /* banner.jpg background with white overlay mask */
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('img/banner/main_bg1.jpg') no-repeat center center / cover;
    overflow: hidden;
}

.hero-main-img-container {
    width: 70%;
    height: 90%;
    position: relative;
    z-index: 2;
    padding-top: 25px;
    /* 为印章留出空间 */
    transform: translateY(-12px);
}

.hero-accent-shape {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    background-color: var(--accent-gold);
    /* Using the target green #009C61 */
    opacity: 0.15;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: -1;
}

.hero-main-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.hero-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

.hero-watermark {
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20;
    pointer-events: none;
    letter-spacing: 0.15em;

}

.hero-corner-line {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 100px;
    height: 100px;
    border-top: 1px solid var(--accent-gold);
    border-left: 1px solid var(--accent-gold);
    opacity: 0.4;
}

.hero-side-text {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 0.75rem;
    letter-spacing: 0.8em;
    color: var(--accent-gold);
    opacity: 0.6;
    font-weight: 300;
}

/* 催行決定印章：复古红色印章 */
.status-stamp {
    position: absolute;
    top: -25px;
    right: -30px;
    z-index: 20;
    transform: rotate(12deg);
    padding: 10px 22px;
    background: #fff;
    border: 4px double #e74c3c;
    color: #e74c3c;
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 15px rgba(231, 76, 60, 0.15),
        2px 2px 0 rgba(231, 76, 60, 0.1);
    pointer-events: none;
    border-radius: 4px;

    /* 动画配置：延迟 2s 显示 */
    opacity: 0;
    animation: stampIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 3.5s;
}

@keyframes stampIn {
    0% {
        opacity: 0;
        transform: rotate(15deg) scale(2);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: rotate(12deg) scale(1);
        filter: blur(0);
    }
}

.status-stamp::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* 移动端适配印章尺寸 */
@media (max-width: 768px) {
    .status-stamp {
        top: -15px;
        right: -10px;
        font-size: 1rem;
        padding: 6px 15px;
        border-width: 3px;
    }
}

/* Scroll Hint Animation */
.scroll-hint {
    position: absolute;
    right: 30px;
    bottom: 22px;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 28;
    pointer-events: none;
}

.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    opacity: 0.5;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent-gold) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: scrollMove 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes scrollMove {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Base title group (Original Colors) */
.hero-title-group {
    position: absolute;
    left: 15%;
    bottom: 24%;
    z-index: 5;
    pointer-events: none;
}

.hero-title-group h1 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 8vw, 4.5rem);
    line-height: 1.1;
    color: #1a1a1a;
    /* Original Charcoal */
}

.hero-title-group .sub {
    font-size: 1rem;
    letter-spacing: 0.5em;
    color: #009C61;
    /* Updated to Green */
    display: block;
    margin-bottom: 20px;
}

.hero-title-group p {
    color: #1a1a1a;
    margin-top: 25px;
    letter-spacing: 0.12em;
    font-size: 1.5rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-block;
    padding: 10px 22px;
    border-left: 3px solid var(--accent-gold);
}

.hero-title-group p em {
    font-style: normal;
    color: var(--accent-gold);
    font-weight: 800;
}

.hero-date-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.85em;
    /* 稍微缩小，体现主次 */
    font-weight: 400;
    /* 稍微变细 */
    letter-spacing: 0.08em;
    opacity: 0.8;
    /* 稍微柔和一点 */
    margin-left: 1.5rem;
}

.hero-date-tag::before {
    content: "|";
    margin-right: 1.5rem;
    opacity: 0.4;
    font-weight: 300;
}

.hero-title-group-split p .hero-date-tag {
    color: #ffffff;
    opacity: 0.9;
}

/* Split layer: same position as base, all white text.
   JS sets clip-path to match image polygon exactly. */
.hero-title-group-split {
    position: absolute;
    left: 15%;
    bottom: 24%;
    z-index: 15;
    /* 确保高于图片容器 (z-index: 2) */
    /* above image (z:auto), below nav */
    pointer-events: none;
    /* clip-path applied by JS */
}

.hero-title-group-split h1 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 8vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero-title-group-split .sub {
    font-size: 1rem;
    letter-spacing: 0.5em;
    display: block;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 1);
}

.hero-title-group-split p {
    color: #fff;
    margin-top: 25px;
    letter-spacing: 0.12em;
    font-size: 1.5rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-block;
    padding: 10px 22px;
    border-left: 3px solid var(--accent-gold);
}

.hero-title-group-split p em {
    font-style: normal;
    color: #5EFFA3;
    font-weight: 800;
}

/* Sticky Navigation */
.nav-container {
    display: none;
    /* Temporarily hidden per user request */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 5%;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: 0.5s;
}

.nav-container.scrolled {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 5%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.nav-container.scrolled .logo,
.nav-container.scrolled .nav-links a {
    color: var(--dark-charcoal);
}

.logo {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--pure-white);
    font-weight: 700;
}

.nav-container.scrolled .logo {
    color: var(--primary-green);
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    color: var(--pure-white);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transition: 0.3s;
}

/* --- Concept Monograph Section --- */
.concept-monograph {
    position: relative;
    overflow: hidden;
}

/* Background Watermark - Moved to left and refined */
.concept-watermark {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    font-size: 20rem;
    font-weight: 800;
    color: var(--accent-gold);
    opacity: 0.05;
    /* Slightly more visible */
    font-family: var(--font-serif);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

.monograph-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Typography Refinement */
.concept-header .section-title {
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 40px;
}

.concept-header .highlight {
    color: var(--accent-gold);
    display: inline-block;
    /* Ensure border-bottom works correctly with the line break */
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 2px;
}

.monograph-copy {
    margin-top: 30px;
    max-width: 580px;
    /* 稍微放宽以平衡文字量 */
}

.concept-subtitle {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: var(--accent-gold);
    margin-bottom: 25px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
}

.concept-subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--accent-gold), transparent);
}

.lead-text {
    font-size: 1.25rem;
    /* 字数多时稍微调细一点，增加可读性 */
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: var(--dark-charcoal);
    line-height: 1.8;
}

.copy-block p {
    color: #444;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.8;
}

/* 哲理性金句区 */
.monograph-quote {
    margin: 40px 0;
    padding: 25px 30px;
    background: var(--light-green);
    /* 使用浅绿背景提示这是一份特殊的感悟 */
    border-left: 3px solid var(--accent-gold);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--deep-forest);
    line-height: 1.8;
    position: relative;
}

.copy-footer {
    margin-top: 40px;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--dark-charcoal);
    padding-left: 0;
    border-left: none;
    /* 取消边框，改用文字加粗来收尾 */
}

/* --- Tour Summary Ribbon (The Commerce Bridge) --- */
.tour-summary-ribbon {
    background: var(--deep-forest);
    padding: 35px 0;
    position: relative;
    z-index: 100;
}

.ribbon-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

/* 数值与状态组 */
.m-val-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Premium 状态标签：精致横版设计 */
.m-status-premium {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 100px;
    /* 完美胶囊 */
    border: 1.5px solid #e74c3c;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;

    /* 动画配置：同步主印章节奏 */
    opacity: 0;
    transform: translateX(-10px);
    animation: slideInRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.5s;
}

/* 售罄/满员状态扩展 */
.sold-out {
    color: #e74c3c !important;
    border-color: #e74c3c !important;
}

/* 禁用/置灰按钮 */
.disabled-style {
    background: #95a5a6 !important;
    background-color: #95a5a6 !important;
    border-color: #95a5a6 !important;
    color: #fff !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.disabled-style::after {
    display: none !important;
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ribbon-item {
    display: flex;
    flex-direction: column;
}

.ribbon-item .r-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
}

.ribbon-item .r-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* 针对价格項目的特殊强化 */
.ribbon-item:nth-child(2) .r-value {
    color: #ffd700;
    /* 高级感极强的亮金色 */
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
}


.ribbon-cta .r-btn {
    color: var(--accent-gold);
    padding: 16px 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    transition: 0.4s;
}

.ribbon-cta .r-btn:hover {
    background: var(--accent-gold);
    color: white;
}

/* Visual Layering: Stacked Book Design */
.visual-container {
    position: relative;
    padding: 20px 80px 80px 0;
    /* Increase right/bottom padding for the spreading images */
}

.stacked-visuals {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.visual-frame {
    background: white;
    padding: 10px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.08);
    /* 减小阴影，让边缘更干脆 */
    transition: var(--transition-smooth);
}

.frame-primary {
    width: 80%;
    position: relative;
    z-index: 1;
}

.frame-secondary {
    width: 70%;
    position: absolute;
    top: 60%;
    left: 58%;
    z-index: 2;
    transform: rotate(4deg);
    box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.1);
}

.visual-frame img {
    width: 100%;
    display: block;
}

.frame-caption {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: center;
}

.visual-deco-box {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 280px;
    height: 280px;
    background-image: radial-gradient(var(--accent-gold) 1.2px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.25;
    /* 降低透明度，使其作为优雅背景存在 */
    z-index: 0;
}

.visual-deco-box::after {
    content: '50';
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-size: 12rem;
    font-weight: 900;
    font-family: var(--font-serif);
    color: var(--accent-gold);
    opacity: 0.08;
    line-height: 1;
}

@media (max-width: 1024px) {
    .monograph-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .concept-watermark {
        font-size: 10rem;
        top: 0;
        right: 5%;
    }
}

.section {
    padding: 100px 0;
    /* Reduced from 150px */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.section-label {
    font-size: 0.8rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.5em;
    display: block;
    margin-bottom: 10px;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 60px;
    line-height: 1.2;
}

/* --- Exhibition Section (12-Column Balanced Grid) --- */
.exhibition {
    background-color: var(--soft-white);
    padding: 120px 0;
}

.exhibition-header {
    margin-bottom: 60px;
}

.moodboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 110px);
    /* Slightly taller units */
    gap: 24px;
}

.mood-item {
    position: relative;
    overflow: hidden;
    background: #000;
    border-radius: 2px;
}

.mood-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
    opacity: 0.95;
    display: block;
}

.mood-item:hover img {
    opacity: 1;
    transform: scale(1.04);
}

/* TOP ROW: Force aligned to top */
.item-1 {
    grid-column: 1 / 7;
    grid-row: 1 / 5;
}

.item-2 {
    grid-column: 7 / 10;
    grid-row: 1 / 4;
    /* Aligned to item-3 top */
}

.item-3 {
    grid-column: 10 / 13;
    grid-row: 1 / 4;
    /* Previously started at row 2, now starts at row 1 to ALIGN TOP */
}

/* MIDDLE BLOCK: Staggered */
.item-4 {
    grid-column: 7 / 13;
    grid-row: 4 / 7;
}

.item-5 {
    grid-column: 1 / 4;
    grid-row: 5 / 9;
}

.item-6 {
    grid-column: 4 / 7;
    grid-row: 5 / 7;
    /* Height swapped: was 5/9 */
}

/* LOWER BLOCK: Balanced */
.item-7 {
    grid-column: 7 / 13;
    grid-row: 7 / 11;
}

.item-8 {
    grid-column: 1 / 4;
    grid-row: 9 / 11;
}

.item-9 {
    grid-column: 4 / 7;
    grid-row: 7 / 11;
    /* Height swapped: was 9/11 */
}

.mood-caption {
    position: absolute;
    bottom: 25px;
    left: 25px;
    max-width: 80%;
    color: white;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    background: rgba(0, 0, 0, 0.6);
    /* Glass effect */
    padding: 8px 16px;
    backdrop-filter: blur(8px);
    z-index: 2;
    transform: translateY(10px);
}

.mood-item:hover .mood-caption {
    opacity: 1;
    transform: translateY(0);
}


/* --- Artist Profile Section (Editorial) --- */
.artist-profile {
    position: relative;
    background-color: #fcfaf5;
    /* Premium Ivory for Special Project 1 */
    padding: 120px 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.profile-watercolor {
    position: absolute;
    bottom: -20px;
    left: 20%;
    font-size: 18rem;
    font-weight: 800;
    font-family: var(--font-serif);
    color: var(--accent-gold);
    opacity: 0.04;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* Portrait Styling */
.portrait-frame {
    position: relative;
    padding: 30px;
}

.portrait-frame::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 90%;
    background: var(--light-green);
    /* Subtle green backdrop */
    z-index: -1;
}

.portrait-frame img {
    width: 100%;
    display: block;
    filter: drop-shadow(20px 20px 60px rgba(0, 0, 0, 0.1));
}



/* Photographer Section: Professional Magazine Editorial Layout */
.artist-section-header {
    text-align: left;
    margin-bottom: 50px;
    position: relative;
}

/* Background Design Accent */
.artist-section-header::before {
    content: '01';
    position: absolute;
    left: -20px;
    top: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    z-index: -1;
    font-family: var(--font-serif);
}

.editorial-tag {
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: var(--accent-gold);
    font-weight: 800;
    display: block;
    margin-bottom: 25px;
    padding-left: 45px;
    position: relative;
}

/* Horizontal line for tag */
.editorial-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 35px;
    height: 1px;
    background: var(--accent-gold);
}

.editorial-title {
    font-size: 2.1rem;
    font-family: var(--font-serif);
    color: var(--dark-charcoal);
    line-height: 1.3;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.editorial-divider {
    width: 40px;
    height: 4px;
    background: var(--accent-gold);
    margin: 0;
}

/* Symmetric Editorial Grid (Author vs Story Balance) */
.magazine-editorial-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: flex-start;
}

/* Narrative Section: Refined Editorial Storytelling */
.narrative-wrapper {
    position: relative;
    /* Space for the vertical accent */
}



/* Narrative Diversity: Dynamic Storytelling Styles */
.narrative-lead {
    font-size: 1.3rem;
    color: var(--dark-charcoal);
    font-family: var(--font-serif);
    margin-bottom: 25px;
    line-height: 1.6;
}

.narrative-lead strong {
    color: var(--accent-gold);
}

.narrative-desc {
    font-size: 1.1rem;
    line-height: 2.1;
    color: #444;
    margin-bottom: 45px;
    text-align: justify;
    font-weight: 300;
}

.highlight-year {
    font-weight: 700;
    color: var(--dark-charcoal);
    border-bottom: 2px solid var(--accent-gold);
}

.narrative-desc strong {
    font-weight: 600;
    color: var(--dark-charcoal);
}

/* Philosophical Quote Area */
.narrative-philosophy {
    border-left: 3px solid #f0f0f0;
    padding-left: 30px;
    margin: 30px 0;
}

.experience-text {
    font-size: 1rem;
    color: #888;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.quote-text {
    font-size: 1.4rem;
    font-family: var(--font-serif);
    color: var(--accent-gold);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 15px;
}

.opportunity-text {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.8;
    font-weight: 300;
}

/* Author Feature Card (Portrait & Bio Integrated) */
.author-card-integrated {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    margin-bottom: 50px;
}


.portrait-container {
    width: 100%;
    margin: 0;
    line-height: 0;
}

.img-portrait-s {
    width: 100%;
    display: block;
    box-shadow: none;
    /* Shadow is now on the card */
}

.author-profile-box {
    padding: 35px 30px;
    background: #fff;
}

.portrait-caption {
    font-size: 0.75rem;
    color: #999;
    font-weight: 300;
    text-align: left;
    margin: 12px 0 -10px 30px;
    /* Push in to align with box text, negative bottom margin to preserve spacing to author box */
    line-height: 1.5;
}

.profile-header {
    margin-bottom: 25px;
}

.profile-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-gold);
    letter-spacing: 0.3em;
    display: block;
    margin-bottom: 2px;
}

.profile-name-jp {
    font-size: 1.6rem;
    font-family: var(--font-serif);
    color: var(--dark-charcoal);
    margin: 0;
    letter-spacing: 0.05em;
}

.profile-name-en {
    display: block;
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 0.05em;
    font-weight: 300;
}

.profile-text-jp {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    text-align: justify;
    font-weight: 300;
    margin: 0;
}

/* Birthday Exclusive Feature Card */
.featured-birthday-card {
    background: #fffdf7;
    /* Soft champagne background */
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 0;
    margin-top: 61px;
    box-shadow: 0 15px 45px rgba(212, 175, 55, 0.05);
    /* Soft gold shadow */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

/* Celebrating Badge (Gift Icon & Text) */
.birthday-badge {
    position: absolute;
    top: 0;
    right: 25px;
    background: var(--accent-gold);
    color: #fff;
    padding: 12px 10px 18px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    writing-mode: vertical-lr;
    /* Vertically elegant */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    text-align: center;
    z-index: 2;
}

.birthday-badge i {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Card Column Layout */
.birthday-inner-layout {
    display: flex;
    align-items: center;
}

/* Calendar Style Date Column */
.birthday-date-column {
    background: #fff;
    padding: 35px 30px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    min-width: 140px;
}

.birthday-date-column .month {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent-gold);
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

.birthday-date-column .day {
    display: block;
    font-size: 2.8rem;
    font-family: var(--font-serif);
    color: var(--dark-charcoal);
    line-height: 1;
}

/* Event Detail Column */
.birthday-content-column {
    padding: 35px 40px;
    position: relative;
}

.birthday-title-jp {
    font-size: 1.4rem;
    font-family: var(--font-serif);
    color: var(--dark-charcoal);
    margin-bottom: 18px;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.birthday-title-jp .title-main {
    font-size: 1.15rem;
    color: var(--accent-gold);
    border-bottom: 2px solid var(--accent-gold);
    display: inline-block;
    padding-bottom: 2px;
}

.birthday-text-jp {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* Subtle Celebration Sparkle Decor (Pseudo-elements) */
.featured-birthday-card::after {
    content: '✦';
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: rgba(212, 175, 55, 0.15);
    font-size: 3rem;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .magazine-editorial-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}






.signature {
    font-family: 'Outfit', sans-serif;
    /* Fallback for signature-like feel */
    font-style: italic;
    font-size: 2rem;
    color: var(--accent-gold);
    opacity: 0.6;
}

@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .profile-watercolor {
        font-size: 8rem;
    }
}

/* =============================================
   ITINERARY SECTION — Clean Rebuild
   ============================================= */
.itinerary-path {
    position: relative;
    padding: 120px 0;
    background-image: url('img/banner/main_bg2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.itinerary-path::before {
    content: '';

    position: absolute;
    inset: 0;
    top: -2px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(3px);
    z-index: 0;
}

.itinerary-path .container {
    position: relative;
    z-index: 1;
}

/* Wide centered canvas — no sidebar tricks */
.timeline-canvas {
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-right: 20px;
    padding-left: 20px;
}

.timeline-canvas::after {
    display: none;
}

/* Remove old decoration */

/* ---- Each Day Block ---- */
.itinerary-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    margin-bottom: 60px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 40px;
}

.itinerary-row::before {
    display: none;
}

.itinerary-row:last-child {
    margin-bottom: 0;
}

/* ---- Left: Day Marker ---- */
.itinerary-col.day-sticky {
    position: sticky;
    top: 120px;
    align-self: start;
    padding-right: 30px;
    padding-top: 3px;
    border-right: 1px solid rgba(0, 156, 97, 0.15);
    text-align: right;
}

.day-num {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-gold);
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.day-num .d-text {
    font-family: var(--font-main);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin-right: 4px;
    opacity: 0.8;
}

.day-label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- Right: Card Content ---- */
.itinerary-col.itinerary-card {
    padding-left: 50px;
    max-width: none;
    /* Remove old constraint */
    width: 100%;
}

.itinerary-card h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dark-charcoal);
    margin-bottom: 28px;
    position: static;
    /* Remove old ::before hacks */
}

.itinerary-card h3::before {
    display: none;
}

/* ---- Events Grid ---- */
.detail-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0 24px;
    margin-bottom: 16px;
    align-items: baseline;
    position: static;
    /* Remove old ::before/::after */
}

.detail-item::before,
.detail-item::after {
    display: none;
}

.detail-item .time {
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-gold);
    letter-spacing: 0.04em;
    text-align: right;
    padding-top: 0;
    white-space: nowrap;
}

.detail-item p {
    font-size: 0.97rem;
    line-height: 1.8;
    color: #1e1e1e;
    /* Slightly darker for better contrast against white+image bg */
    margin: 0;
}

.detail-item p strong {
    color: var(--dark-charcoal);
    font-weight: 700;
}

.inline-plane {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
    color: var(--accent-gold);
    opacity: 0.9;
}

/* ---- Pink Highlights (starred events) ---- */
.highlight-pink {
    background: rgba(255, 182, 193, 0.12);
    border-left: 3px solid #ffb6c1;
    padding: 16px 18px;
    margin-left: -84px;
    /* Pull back to align with left grid edge */
    padding-left: 84px;
    margin-bottom: 16px;
}

.highlight-pink p strong {
    color: #b85068;
}

.highlight-pink .time {
    color: #b85068;
}

/* Special birthday event box — Gold Celebration style (contrasts with pink parent) */
.special-event-new {
    border-top: 1px solid rgba(var(--accent-gold-rgb, 180, 150, 80), 0.3);
    border-bottom: 1px solid rgba(var(--accent-gold-rgb, 180, 150, 80), 0.3);
    border-left: 3px solid var(--accent-gold);
    border-right: none;
    padding: 20px 24px;
    background: #fff;
    /* Warm ivory, distinct from pink */
    margin-top: 12px;
    margin-right: -20px;
    margin-bottom: 4px;
    position: relative;
}

/* "BIRTHDAY" label tag */
.special-event-new::before {
    content: 'BIRTHDAY EVENT';
    position: absolute;
    top: -1px;
    right: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-gold);
    padding: 3px 8px;
    border-bottom: 1px solid rgba(180, 150, 80, 0.25);
    border-left: 1px solid rgba(180, 150, 80, 0.25);
}

.special-event-new strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #8a6800;
    /* Warm gold text */
    margin-bottom: 10px;
}

.special-event-new p {
    font-size: 0.88rem;
    line-height: 1.75;
    color: #4a3f28;
    margin: 0;
}

/* ---- Meal/Stay Footer ---- */
.meal-status {
    margin-top: 28px;
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 156, 97, 0.12);
    background: rgba(0, 156, 97, 0.03);
    font-size: 0.95rem;
    color: #1a1a1a;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* SVG pin icon before accommodation info */
.meal-status span::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: var(--primary-green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .d-none {
        display: none;
    }

    .itinerary-row {
        grid-template-columns: 1fr;
    }

    .itinerary-col.day-sticky {
        position: static;
        border-right: none;
        border-bottom: 1px solid rgba(0, 156, 97, 0.15);
        text-align: left;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .itinerary-col.itinerary-card {
        padding-left: 0;
    }

    .highlight-pink {
        margin-left: 0;
        padding-left: 0;
    }

    /* --- Timeline Canvas Mobile --- */
    .timeline-canvas {
        padding: 0 16px 30px;
    }

    .itinerary-path {
        padding: 60px 0;
        background-attachment: scroll;
        /* Fix parallax glitch on iOS */
    }
}

@media (max-width: 1024px) {
    .bamboo-spine {
        left: 20px;
        transform: none;
        width: 4px;
    }

    .itinerary-row,
    .itinerary-row:nth-child(even) {
        flex-direction: column;
        padding-left: 0px;
        gap: 30px;
    }

    .itinerary-col {
        width: 100%;
    }

    .itinerary-row::before {
        left: 20px;
    }

    .day-num {
        font-size: 4rem;
    }
}

@media (max-width: 768px) {
    .bamboo-timeline {
        padding-left: 40px;
    }

    .time-aside {
        position: static;
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
    }

    .timeline-item {
        flex-direction: column;
        gap: 0;
    }

    .timeline-item::after {
        left: -45px;
    }
}

/* ==========================================
   Final CTA Section (Watercolor Epilogue)
   ========================================== */
.footer-cta {
    position: relative;
    min-height: 720px;
    padding: 86px 0 120px;
    text-align: center;
    color: #2f3826;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.78), transparent 42%),
        linear-gradient(180deg, #f8f3e7 0%, #f3ecd9 100%);
    overflow: hidden;
}

.footer-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(120, 103, 70, 0.07) 1px, transparent 1px);
    background-size: 7px 7px;
    opacity: 0.38;
    pointer-events: none;
}

.footer-mountain {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -158px;
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.72;
    pointer-events: none;
    z-index: 1;
}

.footer-panda {
    position: absolute;
    right: max(70px, calc((100vw - 1480px) / 2 + 48px));
    bottom: 16px;
    width: min(260px, 18vw);
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 14px 24px rgba(58, 62, 40, 0.16));
}

.footer-bamboo {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.62;
}

.footer-bamboo-top {
    top: -70px;
    right: -24px;
    width: min(360px, 25vw);
}

.footer-bamboo-bottom {
    left: -80px;
    bottom: 70px;
    width: min(330px, 23vw);
}

.cta-container {
    position: relative;
    z-index: 4;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.cta-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 34px;
}

.cta-message {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1.55;
    margin: 0 0 36px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #2c3220;
    text-shadow: 0 4px 18px rgba(255, 255, 255, 0.72);
}

.cta-lead {
    margin: 0 0 35px; /* 减少外边距以呼应卡片 */
    color: #394138;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.8;
}

/* 旅の概要カード (招募要素 - 杂志双色看板版) */
.cta-summary-card {
    background: #fdfbf7; /* 极柔和的温暖白麻色 */
    border: 1px solid rgba(184, 151, 91, 0.35); /* 细金色边框 */
    border-radius: 8px;
    max-width: 860px;
    margin: 0 auto 45px;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 16px 40px rgba(80, 85, 60, 0.08);
    /* 左右交界处的上下凹切角抠图 (真正的挖空，露出底层渐变背景) */
    -webkit-mask-image:
        radial-gradient(circle at 220px 0, transparent 7px, black 8px),
        radial-gradient(circle at 220px 100%, transparent 7px, black 8px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle at 220px 0, transparent 7px, black 8px),
        radial-gradient(circle at 220px 100%, transparent 7px, black 8px);
    mask-composite: intersect;
}

/* 左侧浅色视觉重心块 */
.cta-summary-hero {
    flex: 0 0 220px;
    background: linear-gradient(135deg, #f0f2ea 0%, #e2e6d8 100%); /* 优雅的轻浅灰绿泥渐变，告别沉重 */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #2c3220;
    text-align: center;
    position: relative;
    border-right: 1px dashed rgba(184, 151, 91, 0.45); /* 撕票虚线 */
}

/* 撕票圆角缺口金色边框描边（越界裁剪出内凹金色边框） */
.cta-summary-card::before,
.cta-summary-card::after {
    content: '';
    position: absolute;
    left: 211px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(184, 151, 91, 0.35);
    background: transparent;
    z-index: 5;
    pointer-events: none;
}
.cta-summary-card::before {
    top: -8px;
}
.cta-summary-card::after {
    bottom: -8px;
}

.summary-hero-stamp {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(120, 128, 71, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #788047; /* 品牌绿图标 */
}

.summary-hero-stamp i {
    font-size: 1.3rem;
}

.summary-hero-eyebrow {
    font-family: var(--font-serif);
    font-size: 0.72rem;
    font-weight: 700;
    color: #b8975b; /* 金色小字 */
    letter-spacing: 0.22em;
    display: block;
    margin-bottom: 8px;
}

.summary-hero-title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    color: #2c3220; /* 暗橄榄黑文字 */
    margin: 0;
    letter-spacing: 0.12em;
    font-weight: 600;
}

/* 右侧详细行板块 */
.cta-summary-body {
    flex: 1;
    padding: 35px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-summary-rows {
    display: flex;
    flex-direction: column;
}

.cta-summary-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(184, 151, 91, 0.2);
    gap: 24px;
    text-align: left;
}

.cta-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cta-summary-row:first-child {
    padding-top: 0;
}

.row-label {
    flex: 0 0 100px;
    font-size: 0.82rem;
    color: #8c9377;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding-top: 3px;
}

.row-value {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.row-value strong {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #2c3220;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.row-value-sub {
    font-size: 0.8rem;
    color: #8c9377;
    line-height: 1.4;
}

.val-highlight {
    color: #b8975b !important; /* 金色价格高亮 */
}

/* Clean Price List Styling */
.price-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 4px 0;
}

.price-item-clean {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.98rem;
    color: #2c3220;
    font-family: var(--font-serif);
}

.price-label-badge {
    background: #eef2e6;
    color: #4a5438;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid #dce4d0;
    font-family: var(--font-serif);
}

.price-value-text {
    font-size: 1.15rem;
    color: var(--primary-green, #2d5a27); /* 品牌森林绿强调色 */
    font-weight: 700;
    font-family: var(--font-serif);
}

.price-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-green, #2d5a27); /* 品牌深绿大号价格数字 */
    font-family: var(--font-serif);
    margin-right: 2px;
}

.price-unit-text {
    font-size: 0.82rem;
    color: #7a8268;
    font-weight: 400;
    font-family: var(--font-serif);
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 34px;
    margin-bottom: 58px;
}

/* Large CTA Buttons */
.btn-primary-large,
.btn-secondary-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 420px;
    min-height: 86px;
    padding: 0 44px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: 0.12em;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary-large i,
.btn-secondary-large i {
    font-size: 1.04rem;
    transition: transform 0.3s ease;
}

.btn-primary-large i:first-child,
.btn-secondary-large i:first-child {
    margin-right: 18px;
    font-size: 1.4rem;
    opacity: 0.86;
}

.btn-primary-large i:last-child,
.btn-secondary-large i:last-child {
    margin-left: 28px;
    font-size: 0.95rem;
}

/* 底部大按钮的主颜色与扫光效果 (继承 ribbon-cta 的 r-btn-primary 风格配色) */
.btn-primary-large {
    background: #788047;
    color: #ffffff;
        background: linear-gradient(180deg, #788047, #657039);
    border: 1px solid #52602e;
    color: #fff;
    box-shadow: 0 12px 24px rgba(73, 80, 43, 0.24), inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.btn-primary-large::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    animation: buttonGleam 1.2s ease-in-out 1.5s 1 forwards;
}


.btn-primary-large:hover i:last-child {
    transform: translateX(5px);
}

.btn-secondary-large {
    background: rgba(255, 253, 246, 0.54);
    color: #4d5c2d;
    border: 1px solid rgba(76, 91, 48, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.btn-secondary-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(65, 76, 42, 0.12);
}

.btn-secondary-large:hover i:last-child {
    transform: translateX(5px);
}

.cta-note {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    color: #394138;
    font-family: var(--font-serif);
    font-size: 1.22rem;
    letter-spacing: 0.12em;
}

.cta-note::before,
.cta-note::after {
    content: "";
    width: 18px;
    height: 18px;
    background:
        radial-gradient(circle at 50% 50%, #c4a45e 0 22%, transparent 24%),
        radial-gradient(ellipse at 50% 10%, #c4a45e 0 32%, transparent 34%);
    opacity: 0.88;
}

.cta-note::after {
    transform: scaleX(-1);
}

@media (max-width: 900px) {
    .footer-cta {
        min-height: auto;
        padding: 92px 0 120px;
    }

    .cta-message {
        font-size: 2.2rem;
        letter-spacing: 0.08em;
    }

    .cta-lead,
    .cta-note {
        font-size: 1rem;
    }

    .cta-summary-card {
        margin-left: 20px;
        margin-right: 20px;
        /* 在左侧缩窄至 180px 时，圆心坐标自适应平移至 180px 处，确保百分百对准 */
        -webkit-mask-image:
            radial-gradient(circle at 180px 0, transparent 7px, black 8px),
            radial-gradient(circle at 180px 100%, transparent 7px, black 8px);
        mask-image:
            radial-gradient(circle at 180px 0, transparent 7px, black 8px),
            radial-gradient(circle at 180px 100%, transparent 7px, black 8px);
    }
    .cta-summary-card::before,
    .cta-summary-card::after {
        left: 173px; /* 180px - 7px 半径 */
    }
    .cta-summary-hero {
        flex: 0 0 180px;
        padding: 30px 20px;
    }
    .cta-summary-body {
        padding: 25px 30px;
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .btn-primary-large,
    .btn-secondary-large {
        width: min(100%, 520px);
        min-width: 0;
        min-height: 72px;
        padding: 0 24px;
        font-size: 1.08rem;
    }

    .footer-panda {
        width: 180px;
        right: -18px;
        bottom: 30px;
        opacity: 0.82;
    }

    .footer-bamboo-top {
        width: 220px;
        right: -96px;
    }

    .footer-bamboo-bottom {
        width: 210px;
        left: -116px;
    }
}

@media (max-width: 560px) {
    .footer-mountain{
        bottom: -88px;
    }
    .cta-container {
        padding: 0 22px;
    }

    .cta-summary-card {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 35px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .cta-summary-hero {
        flex: 0 0 auto;
        width: 100%;
        padding: 24px 20px;
        border-right: none;
        border-bottom: 1px dashed rgba(184, 151, 91, 0.45);
    }

    /* 手机端隐藏上下的撕票缺口遮罩，防止背景错乱 */
    .cta-summary-card::before,
    .cta-summary-card::after {
        display: none;
    }

    .summary-hero-stamp {
        display: none; /* 手机端隐藏图标以节省垂直高度 */
    }

    .cta-summary-body {
        padding: 25px 20px;
    }

    .cta-summary-row {
        flex-direction: column;
        gap: 6px;
        padding: 12px 0;
    }

    .row-label {
        flex: 0 0 auto;
    }



    .cta-message {
        font-size: 1.72rem;
    }

    .cta-message br {
        display: none;
    }

    .btn-primary-large,
    .btn-secondary-large {
        letter-spacing: 0.06em;
    }

    .btn-primary-large i:first-child,
    .btn-secondary-large i:first-child {
        margin-right: 10px;
    }

    .btn-primary-large i:last-child,
    .btn-secondary-large i:last-child {
        margin-left: 12px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .photographer-wrap {
        flex-direction: column;
    }

    .photo-sideways,
    .bio-content {
        width: 100%;
    }

    .photo-sideways {
        position: static;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hero {
        padding: 40px 20px 120px 20px;
        /* Increased bottom padding to protect the scroll hint */
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* Force image to top and text towards bottom with space between */
        align-items: center;
    }

    .hero-main-img-container {
        width: 100%;
        height: 48vh;
        /* Reduce slightly to guarantee fit */
        order: 1;
        margin: 0;
        transform: translateY(-4px);
    }

    .hero-title-group {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        order: 2;
        padding: 0;
        margin: 0;
    }

    .hero-title-group-split {
        display: none;
        /* Hide the clipping layer on mobile to avoid double text */
    }

    .hero-main-img {
        width: 100%;
        height: 100%;
    }

    .hero-title-group h1 {
        font-size: 2rem;
        word-break: break-all;
    }

    .hero-title-group p {
        font-size: 1.1rem;
        margin-top: 15px;
        width: 100%;
        padding: 10px;
    }

    .scroll-hint {
        right: 12px;
        bottom: 8px;
        gap: 6px;
        /* Pull it closer to the bottom edge */
    }

    .scroll-text {
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }

    .scroll-line {
        height: 24px;
        /* Shorten the line on mobile */
    }


    .hero-title-group .sub {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }


    .section-title {
        font-size: 2rem;
    }
}

/* Floating Booking CTA */
.floating-cta {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 2000;
    background: var(--accent-gold);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 156, 97, 0.3);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.f-text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.floating-cta:hover {
    background: #008150;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 156, 97, 0.4);
}

.floating-cta:active {
    transform: scale(0.95);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .floating-cta {
        bottom: 20px;
        right: 20px;
        padding: 10px 20px;
    }
}

/* Mobile Adjustments for Floating CTA */
@media (max-width: 768px) {
    .floating-cta {
        bottom: 20px;
        right: 20px;
        padding: 10px 20px;
    }
}

/* =============================================
   MOBILE RESPONSIVE — Global Overrides
   ============================================= */
@media (max-width: 768px) {

    /* --- Tour Summary Ribbon --- */
    .ribbon-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 16px;
        padding: 0 4px;
    }

    .ribbon-cta {
        grid-column: 1 / -1;
        /* Full width */
        text-align: center;
    }

    .ribbon-cta .r-btn {
        display: block;
        padding: 14px;
        font-size: 0.95rem;
    }

    .ribbon-item .r-value {
        font-size: 0.95rem;
    }

    /* --- Gallery / Moodboard --- */
    .moodboard {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
    }

    .mood-item {
        width: 100%;
        height: 220px;
    }

    .mood-item.item-1,
    .mood-item.item-4,
    .mood-item.item-7 {
        height: 260px;
        /* Slightly taller for hero items */
    }

    .mood-caption {
        opacity: 1;
        /* Always show captions on mobile (no hover) */
        transform: translateY(0);
    }

    /* --- Concept Monograph --- */
    .monograph-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .concept-header .section-title {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .concept-watermark {
        font-size: 5rem;
        left: 0;
        opacity: 0.03;
    }

    .monograph-copy {
        max-width: 100%;
        margin-top: 20px;
    }

    .lead-text {
        font-size: 1.1rem;
    }

    /* --- Footer CTA --- */
    .cta-inner-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cta-divider {
        display: none;
    }

    .cta-right {
        align-items: stretch;
    }

    .cta-button-main {
        justify-content: center;
    }

    .cta-title {
        font-size: 1.6rem;
    }

    /* --- Profile Section --- */
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* --- Hero Responsive --- */
    .hero-side-text {
        display: none;
        /* Too cramped on mobile */
    }

    .hero-main-img {
        width: 95%;
        right: 0;
        left: auto;
    }
}

/* Special Project 02: Exhibition Integrated Styles */
.exhibition-modern {
    background-color: var(--pure-white);
    padding: 120px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.exhibition-modern .magazine-editorial-grid {
    display: grid;
    grid-template-columns: 0.4fr 1.6fr;
    gap: 80px;
    align-items: flex-start;
}

/* Project 2 Exclusive Narrative Styling */
.exhibition-modern .narrative-philosophy {
    border-left: 3px solid var(--accent-gold) !important;
    background: linear-gradient(to right, rgba(212, 175, 55, 0.04), transparent) !important;
    padding: 35px 40px !important;
    margin-top: 40px !important;
}

.exhibition-modern .opportunity-text {
    font-size: 1.15rem !important;
    line-height: 2.1 !important;
    color: #222 !important;
    font-family: var(--font-serif);
    font-style: italic;
}

/* Moodboard Scroller spacing */
.moodboard-scroller {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 80px;
}

/* Concept Monogram (Left Accent for Project 2) */
.concept-monogram {
    position: relative;
    padding-top: 60px;
}

.monogram-vertical-label {
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: 0.75rem;
    letter-spacing: 0.6em;
    color: var(--accent-gold);
    text-transform: uppercase;
    opacity: 0.8;
    position: relative;
    padding-right: 20px;
    border-right: 1px solid rgba(212, 175, 55, 0.3);
}

.monogram-number {
    position: absolute;
    top: -40px;
    left: -20px;
    font-size: 10rem;
    font-family: var(--font-serif);
    color: var(--accent-gold);
    opacity: 0.05;
    font-weight: 800;
    pointer-events: none;
}

.monogram-subtitle {
    margin-top: 40px;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--dark-charcoal);
    letter-spacing: 0.1em;
    font-weight: 600;
}


/* Feature Highlight Box: Ya'an Bifengxia */
.feature-highlight-box {
    background: #fdfaf4;
    padding: 45px 50px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    position: relative;
    margin-top: 40px;
}

.feature-highlight-box::before,
.feature-highlight-box::after {
    content: '';
    position: absolute;
    color: var(--accent-gold);
    font-size: 0.8rem;
    opacity: 0.5;
}

.feature-highlight-box::before {
    left: 20px;
    top: 15px;
}

.feature-highlight-box::after {
    right: 20px;
    bottom: 15px;
}

.highlight-text {
    font-size: 1.25rem;
    line-height: 2;
    color: var(--dark-charcoal);
    font-family: var(--font-serif);
    margin: 0;
    font-weight: 500;
}

.narrative-lead-centered {
    font-size: 1.35rem !important;
    line-height: 1.9 !important;
    color: #333 !important;
    margin: 0 auto 40px !important;
    font-weight: 400 !important;
}

.narrative-lead-column {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 35px;
    font-weight: 300;
}

.narrative-content-p strong {
    font-weight: 600;
}

.exhibition-modern .artist-section-header {
    text-align: left !important;
    margin-bottom: 50px !important;
}

.exhibition-modern .artist-section-header::before {
    display: none !important;
}

.exhibition-modern .editorial-divider {
    margin: 0 !important;
}

/* --- Responsive Adjustments for Mobile (Portrait) --- */
@media (max-width: 768px) {

    /* Magazine Editorial Grid stacking */
    .magazine-editorial-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Birthday Card Mobile Layout */
    .birthday-inner-layout {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .birthday-date-column {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 30px 20px !important;
        min-width: unset !important;
    }

    .birthday-content-column {
        padding: 30px 25px !important;
        text-align: center !important;
    }

    .birthday-title-jp {
        font-size: 1.25rem !important;
    }

    .birthday-badge {
        right: 15px !important;
        padding: 8px 6px 14px !important;
    }

    /* Project 2 Monogram stacking */
    .concept-monogram {
        padding-top: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    .monogram-vertical-label {
        writing-mode: horizontal-tb !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
        padding-right: 0 !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }

    .monogram-subtitle {
        writing-mode: horizontal-tb !important;
        margin-top: 15px !important;
        font-size: 1.5rem !important;
    }

    .monogram-number {
        font-size: 6rem !important;
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .exhibition-modern .artist-section-header {
        text-align: center !important;
    }

    .exhibition-modern .editorial-divider {
        margin: 0 auto !important;
    }
}

/* --- Advanced Itinerary Styles --- */
.tour-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 60px auto;
    max-width: 1000px;
    width: 95%;
    background: #fff;
    padding: 40px 0;
    border-top: 1px solid var(--accent-gold);
    border-bottom: 1px solid var(--accent-gold);
    border-radius: 4px;
    /* 增加微弱圆角感 */
}

.meta-card {
    background: transparent;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    /* 柔和的分隔线 */
    text-align: center;
    position: relative;
    /* 为内部绝对定位元素提供参考点 */
}

.meta-card:last-child {
    border-right: none;
}

.meta-card i {
    font-size: 1.5rem;
    /* 增大图标 */
    color: var(--accent-gold);
}

.m-label {
    display: block;
    font-size: 0.85rem;
    /* 增大字号 */
    color: #666;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.m-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-green);
}

.loc-tag {
    font-size: 0.75rem;
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    padding: 2px 8px;
    display: inline-block;
    margin-top: 10px;
}

.card-header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.transport {
    font-size: 0.8rem;
    background: var(--light-green);
    color: var(--primary-green);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
}

.highlight-base {
    background: #fffdf5;
    border-left-color: #f1c40f !important;
}

.meal-row {
    margin-top: 25px;
    padding-top: 15px;
    padding-left: 5px;
    border-top: 1px dashed #ddd;
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #666;
}

.meal-row span::before {
    content: "●";
    margin-right: 5px;
    color: var(--accent-gold);
}

.hotel-info-tag {
    margin-top: 15px;
    font-size: 1rem;
    color: var(--primary-green);
    font-weight: 700;
    padding: 10px 15px;
    background: #f0f7f2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {

    /* 0. 结构性调整：从左右布局改为上下堆叠，释放正文宽度 */
    .itinerary-row {
        grid-template-columns: 1fr;
        padding-top: 35px;
        margin-bottom: 45px;
    }

    .itinerary-col.day-sticky {
        position: static;
        text-align: left;
        border-right: none;
        border-bottom: 2px solid rgba(0, 156, 97, 0.08);
        padding: 0 0 12px 0;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
    }

    .day-num {
        font-size: 2.4rem;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .day-label {
        font-size: 0.9rem;
        padding-left: 15px;
        border-left: 1px solid #ddd;
        margin-top: 4px;
    }

    .loc-tag {
        margin-top: 0;
        margin-left: auto;
        /* 标签自动靠右 */
        font-size: 0.7rem;
    }

    .itinerary-col.itinerary-card {
        padding-left: 0;
    }

    /* 1. 解决标题与标签拥挤问题 */
    .card-header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-header-main h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        width: 100%;
    }

    .transport {
        font-size: 0.75rem;
        padding: 2px 10px;
    }

    /* 2. 优化正文宽度：减小午前/午后的边距 */
    .detail-item {
        gap: 12px;
        align-items: flex-start;
    }

    .detail-item .time {
        min-width: 40px;
        font-size: 0.85rem;
    }

    .detail-item p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* 3. 解决底部餐食重叠 */
    .meal-row {
        flex-wrap: wrap;
        gap: 10px 15px;
        font-size: 0.85rem;
    }

    .meal-row span {
        white-space: nowrap;
    }

    /* 4. 优化酒店标签 */
    .hotel-info-tag {
        font-size: 0.9rem;
        padding: 10px;
        flex-wrap: wrap;
    }
}

.hotel-info-tag::before {
    content: "\f236";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--accent-gold);
}

.birthday-highlight-box {
    background: #fff0f0;
    border-left: 4px solid #e74c3c !important;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px !important;
    margin-top: 20px;
}

.b-badge {
    font-size: 2rem;
    color: #e74c3c;
    /* 对齐首行文字 */
}

.itinerary-footer-notes {
    margin: 30px auto 0;
    max-width: 1000px;
    width: 100%;
    padding: 20px 30px;
    background: #f9f9f9;
    /* border-radius: 8px; */
    font-size: 0.82rem;
    color: #888;
    line-height: 2;
    position: relative;
}

.itinerary-footer-notes p {
    padding-left: 20px;
    position: relative;
}

.itinerary-footer-notes p::before {
    content: "※";
    position: absolute;
    left: 0;
    color: var(--accent-gold);
}

.itinerary-footer-notes:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .tour-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 0;
        width: 100%;
        margin: 40px auto;
    }

    .meta-card {
        padding: 25px 15px;
        border-right: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* 处理 2x2 网格的边框逻辑 */
    .meta-card:nth-child(2n) {
        border-right: none;
    }

    .meta-card:nth-child(1),
    .meta-card:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

@media (max-width: 480px) {
    .meta-card {
        padding: 20px 10px;
    }

    .meta-card i {
        font-size: 1.25rem;
    }

    .m-label {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    .m-val {
        font-size: 0.85rem;
    }
}

/* --- Conductor (添乗員) Specific Enhancements (Premium Overlap Design) --- */
.conductor-attention-banner {
    text-align: center;
    padding: 0;
    background: transparent;
    position: absolute;
    left: 50%;
    bottom: 60px;
    z-index: 35;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.conductor-attention-banner.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.conductor-attention-banner.reveal,
.conductor-attention-banner.reveal.active {
    opacity: 1;
    transform: none;
}

.conductor-attention-banner .container {
    display: flex;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 0;
}

.conductor-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(242, 250, 245, 0.94));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 156, 97, 0.28);
    border-radius: 50px;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 156, 97, 0.14);
}


.conductor-badge-inline .badge-tag {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--dark-charcoal);
    letter-spacing: 0.1em;
    font-weight: 400;
    padding-right: 12px;
    position: relative;
}

.conductor-badge-inline .badge-tag::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.1em;
    background: rgba(0, 156, 97, 0.3);
}

.conductor-badge-inline .badge-main {
    color: var(--rich-red);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.conductor-badge-inline i {
    color: #d94233;
    font-size: 0.95rem;
}

.itinerary-conductor-note {
    background: rgba(231, 76, 60, 0.03);
    border-left: 4px solid var(--rich-red);
    padding: 15px 20px;
    margin: 20px 0 30px 45px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.itinerary-conductor-note i {
    color: var(--rich-red);
    margin-top: 4px;
    font-size: 1rem;
}

.itinerary-conductor-note p {
    color: var(--rich-red);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.6;
}

.feature-item.conductor-feat {
    grid-column: 1 / -1;
    width: calc((100% - 20px) / 2);
    justify-self: center;
    margin: 0;
    border: 1px solid rgba(231, 76, 60, 0.15);
    background: linear-gradient(135deg, #fff, #fffafa);
}

.feature-item.conductor-feat h3 {
    color: var(--rich-red);
}

@media (max-width: 991px) {
    .conductor-attention-banner {
        bottom: 96px;
    }

    .conductor-badge-inline {
        padding: 8px 14px;
        flex-direction: row;
        gap: 8px;
        border-radius: 50px;
        width: auto;
        max-width: calc(100vw - 20px);
    }

    .conductor-badge-inline .badge-tag {
        font-size: 0.75rem;
        padding-right: 10px;
    }

    .conductor-badge-inline .badge-main {
        font-size: 0.92rem;
        line-height: 1.3;
        white-space: nowrap;
    }

    .feature-item.conductor-feat {
        width: 100%;
    }

    .itinerary-conductor-note {
        margin: 20px 0;
        padding: 12px 15px;
        font-size: 0.85rem;
    }

    .itinerary-conductor-note p {
        font-size: 0.85rem;
    }
}

@media (max-width: 575px) {
    .conductor-attention-banner {
        bottom: 70px;
        width: 90%;
    }

    .conductor-badge-inline {
        padding: 8px 10px;
        gap: 6px;
        width: 90%;
        border-radius: 18px;
    }

    .conductor-badge-inline .badge-tag {
        font-size: 0.7rem;
        padding-right: 8px;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

    .conductor-badge-inline .badge-tag::after {
        height: 1em;
    }

    .conductor-badge-inline i {
        font-size: 0.82rem;
        flex-shrink: 0;
    }

    .conductor-badge-inline .badge-main {
        font-size: 0.82rem;
        white-space: normal;
        text-align: left;
        line-height: 1.25;
    }
}

/* --- Sold Out State --- */
.is-sold-out {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: #bbbbbb !important;
    box-shadow: none !important;
    transform: none !important;
}

.is-sold-out span, .is-sold-out i, .is-sold-out svg {
    opacity: 0.6;
}

/* =============================================
   HERO JOURNEY COLLAGE — New first view
   ============================================= */
.hero-journey {
    min-height: calc(100vh - 110px);
    height: auto;
    padding: 72px 4.8vw 52px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
 background: linear-gradient(90deg, rgba(255, 255, 250, 0.3) 0%, rgba(255, 255, 250, 0.28) 32%, rgba(255, 255, 255, 0.08) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(246, 242, 230, 0.10)), url(img/banner/main_bg1.jpg) center / cover no-repeat;
}

.hero-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
   mix-blend-mode: screen;
}

.hero-journey::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24%;
    height: 100%;
    background:
        radial-gradient(circle at 34% 18%, rgba(171, 142, 82, 0.12) 0 1px, transparent 2px),
        linear-gradient(135deg, rgba(250, 246, 234, 0.96), rgba(240, 233, 213, 0.92));
    background-size: 18px 18px, auto;
    box-shadow: -26px 0 60px rgba(74, 79, 43, 0.08);
    pointer-events: none;
}

.hero-paper-map {
    position: absolute;
    top: 0;
    right: 3%;
    width: 24%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.72;
}

.hero-paper-map::before {
    content: "";
    position: absolute;
    top: 24%;
    right: 26%;
    width: 90px;
    height: 230px;
    border-right: 2px dashed rgba(104, 111, 73, 0.58);
    border-bottom: 2px dashed rgba(104, 111, 73, 0.45);
    border-radius: 48% 38% 42% 36%;
    transform: rotate(-14deg);
}

.hero-paper-map::after {
    content: "\f1bb  \f6fc  \f66f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14%;
    top: 33%;
    width: 120px;
    color: rgba(104, 111, 73, 0.58);
    font-size: 1.05rem;
    line-height: 4.6;
    letter-spacing: 0.65em;
    transform: rotate(-8deg);
}

.hero-bamboo-deco {
    position: absolute;
    left: -36px;
    bottom: 18px;
    width: 210px;
    opacity: 0.32;
    transform: rotate(-8deg);
    z-index: 1;
    pointer-events: none;
}

.hero-journey-inner {
    position: relative;
    z-index: 2;
    width: min(1480px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(460px, 0.94fr) minmax(520px, 1.06fr);
    align-items: center;
    gap: 38px;
}

.hero-journey-copy {
    max-width: 760px;
    color: #3f462b;
    padding-bottom: 12px;
}

.journey-project-mark {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    color: #3f462bc9;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    position: relative;
    padding-left: 22px;
}

.journey-project-mark::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: rgba(159, 136, 89, 0.72);
    transform: translateY(-50%);
}

.journey-eyebrow {
    display: inline-flex;
    flex-direction: row; /* 恢复为横向一排排列 */
    align-items: center;
    justify-content: center;
    gap: 0; /* 使用 border 和 padding 精确控制 */
    padding: 13px 32px;
    border: 1px solid rgba(127, 103, 55, 0.74);
    background: rgba(255, 255, 249, 0.72);
    margin-bottom: 34px;
    box-shadow: 0 12px 34px rgba(73, 68, 42, 0.08);
}

/* 框内会长身份小字 */
.journey-badge-inner {
    color: #a8946e; /* 优雅古铜金，契合外边框调性，主次分明 */
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-serif);
    letter-spacing: 0.08em;
    line-height: 1.2;
    padding-right: 18px;
    margin-right: 18px;
    border-right: 1px solid rgba(127, 103, 55, 0.4); /* 精致的淡金竖线分隔 */
}

/* 框内原本主文本 */
.journey-eyebrow-main {
    color: #3f462b;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    font-weight: 600;
}

.hero-journey-copy h1 {
    font-family: var(--font-serif);
    font-size: 4.75rem;
    line-height: 1.36;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 24px;
    color: #3f462b;
    text-shadow: 0 3px 24px rgba(255, 255, 255, 0.58);
}

.journey-subtitle {
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #2f3523;
    margin: 0;
    /* font-size: 1.05rem; */
    line-height: 2.05;
    letter-spacing: 0.1em;
    color: #171b14;
    margin: 0 0 0px;
}

.journey-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 440px;
    max-width: 100%;
    margin: 26px 0 32px;
}

.journey-divider::before,
.journey-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(127, 103, 55, 0.5);
}

.journey-divider span {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(170, 130, 54, 0.72);
    border-radius: 50%;
    position: relative;
}

.journey-divider span::before,
.journey-divider span::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(170, 130, 54, 0.5);
    border-radius: 50%;
}

.journey-info-card {
    background: linear-gradient(90deg, rgba(255, 255, 250, 0.88) 0%, rgba(255, 255, 250, 0.48) 48%, rgba(255, 255, 250, 0.0) 82%, rgba(255, 255, 250, 0) 100%);
    border-left: 3.5px solid #a07737;
    border-radius: 0;
    padding: 16px 20px 16px 18px;
    margin-top: 20px;
    margin-bottom: 24px;
    box-shadow: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.journey-lead {
    font-size: 1.02rem;
    line-height: 1.95;
    letter-spacing: 0.08em;
    color: #1f2618;
    margin: 0 0 14px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.6);
}

.journey-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 1.06rem;
    font-weight: 700;
    color: #28321d;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(160, 119, 55, 0.45);
    padding: 7px 18px;
    border-radius: 30px;
    letter-spacing: 0.12em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-left: 0;
}

.hero-collage {
    position: relative;
    min-height: 560px;
    z-index: 2;
}

.photo-card {
    position: absolute;
    margin: 0;
    background: #fbfaf1;
    padding: 12px;
    box-shadow: 0 22px 44px rgba(50, 55, 35, 0.28);
}

.photo-card img:not(.photo-tape) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-card-large {
    top: 16px;
    right: 128px;
    width: 520px;
    height: 318px;
    transform: rotate(-5deg);
    z-index: 3;
}

.photo-card-wide {
    right: 20px;
    bottom: 26px;
    width: 560px;
    height: 310px;
    transform: rotate(3deg);
    z-index: 4;
}

.photo-card-small {
    left: 10px;
    bottom: 44px;
    width: 190px;
    height: 250px;
    padding: 10px 10px 28px;
    transform: rotate(-2deg);
    z-index: 5;
}

.photo-tape {
    position: absolute;
    width: 92px;
    height: auto;
    opacity: 0.86;
    z-index: 6;
    pointer-events: none;
}

.tape-top {
    top: -34px;
    left: -42px;
    transform: rotate(11deg);
}

.tape-corner {
    right: -38px;
    bottom: -30px;
    transform: rotate(-12deg);
}

.journey-stamp {
    position: absolute;
    top: 2px;
    right: 0;
    width: 150px;
    height: 150px;
    z-index: 6;
    opacity: 0.74;
}

.journey-stamp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.journey-summary-ribbon {
    position: relative;
    z-index: 20;
    margin: 0;
    padding: 22px 0 26px;
    background:
        radial-gradient(circle at 20% 40%, rgba(157, 130, 72, 0.08), transparent 28%),
        linear-gradient(180deg, #f6f1e6, #fbf8f0);
    box-shadow: 0 -16px 35px rgba(66, 69, 45, 0.08);
}

.journey-summary-ribbon .container {
    max-width: 1500px;
}

.journey-summary-ribbon .ribbon-inner {
    min-height: 78px;
    padding: 0 22px;
    display: grid;
    grid-template-columns: 150px 270px 160px 160px 1fr;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 250, 0.82);
    border: 1px solid rgba(127, 103, 55, 0.22);
    border-radius: 7px;
    box-shadow: 0 16px 35px rgba(73, 68, 42, 0.08);
}

.journey-summary-ribbon .ribbon-item {
    height: 48px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-right: 1px solid rgba(127, 103, 55, 0.18);
}

.journey-summary-ribbon .ribbon-item i {
    color: #7c8551;
    font-size: 1.35rem;
}

.journey-summary-ribbon .r-label {
    font-size: 0.78rem;
    color: #565b3a;
    letter-spacing: 0.08em;
    margin: 0;
}

.journey-summary-ribbon .r-value {
    font-family: var(--font-serif);
    font-size: 1.34rem;
    line-height: 1;
    color: #3f462b;
    font-weight: 700;
    white-space: nowrap;
}

.journey-summary-ribbon .ribbon-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-left: 24px;
}

.journey-summary-ribbon .r-btn {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 7px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}

.journey-summary-ribbon .r-btn-primary {
    background: #788047;
    color: #fff;
    border: 1px solid #788047;
}

.journey-summary-ribbon .r-btn-secondary {
    background: rgba(255, 255, 250, 0.74);
    color: #565b3a;
    border: 1px solid rgba(86, 91, 58, 0.42);
}

.journey-summary-ribbon .r-btn:hover {
    transform: translateY(-2px);
}

.journey-summary-ribbon .r-btn-primary:hover {
    background: #626b36;
}

.journey-summary-ribbon .r-btn-secondary:hover {
    background: #fff;
}

@media (max-width: 1280px) {
    .hero-journey-inner {
        grid-template-columns: minmax(400px, 0.9fr) minmax(480px, 1.1fr);
        gap: 20px;
    }

    .hero-journey-copy h1 {
        font-size: 4rem;
    }

    .photo-card-large {
        width: 460px;
        height: 290px;
        right: 98px;
    }

    .photo-card-wide {
        width: 500px;
        height: 288px;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: 130px 230px 140px 140px 1fr;
    }

    .journey-summary-ribbon .r-btn {
        padding: 0 16px;
        font-size: 0.86rem;
    }
}

@media (max-width: 1024px) {
    .hero-journey {
        min-height: auto;
        padding: 58px 24px 42px;
    }

    .hero-journey::after,
    .hero-paper-map {
        display: none;
    }

    .hero-journey-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-journey-copy {
        max-width: 680px;
    }

    .hero-collage {
        min-height: 500px;
    }

    .photo-card-large {
        left: 7%;
        right: auto;
    }

    .photo-card-wide {
        right: 7%;
    }

    .photo-card-small {
        left: 4%;
    }

    .journey-stamp {
        right: 8%;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 18px;
    }

    .journey-summary-ribbon .ribbon-item {
        border-right: none;
        border-bottom: 1px solid rgba(127, 103, 55, 0.14);
        padding: 0 8px 12px;
    }

    .journey-summary-ribbon .ribbon-cta {
        grid-column: 1 / -1;
        justify-content: center;
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .hero-journey {
        padding: 42px 18px 34px;
        background-position: 58% center;
    }

    .hero-bamboo-deco {
        width: 150px;
        opacity: 0.24;
    }

    .journey-badge-inner {
        font-size: 0.72rem;
        padding-right: 0;
        margin-right: 0;
        border-right: none; /* 手机端折叠后隐藏金色分隔竖线 */
    }

    .journey-project-mark {
        font-size: 0.74rem;
        letter-spacing: 0.1em;
        padding-left: 18px;
        margin-bottom: 10px;
    }

    .journey-eyebrow-main {
        font-size: 0.95rem;
    }

    .journey-eyebrow {
        min-width: 0;
        flex-direction: column; /* 手机端恢复垂直排列，以防横向溢出 */
        padding: 10px 24px;
        margin-bottom: 24px;
        gap: 4px;
    }

    .hero-journey-copy h1 {
        font-size: 3rem;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    .journey-subtitle {
        font-size: 1.1rem;
    }

    .journey-lead {
        font-size: 0.95rem;
        line-height: 1.9;
        letter-spacing: 0.05em;
    }

    .journey-note {
        font-size: 1rem;
    }

    .hero-collage {
        min-height: 390px;
    }

    .photo-card {
        padding: 8px;
    }

    .photo-card-large {
        width: 76%;
        height: 205px;
        left: 3%;
        top: 10px;
    }

    .photo-card-wide {
        width: 76%;
        height: 205px;
        right: 2%;
        bottom: 18px;
    }

    .photo-card-small {
        width: 130px;
        height: 170px;
        left: 1%;
        bottom: 44px;
        padding-bottom: 20px;
    }

    .journey-stamp {
        width: 96px;
        height: 96px;
        right: 0;
        top: 0;
    }

    .photo-tape {
        width: 66px;
    }

    .journey-summary-ribbon {
        padding: 16px 0 20px;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .journey-summary-ribbon .ribbon-item {
        height: auto;
        min-height: 44px;
        justify-content: flex-start;
    }

    .journey-summary-ribbon .r-value {
        font-size: 1.05rem;
    }

    .journey-summary-ribbon .ribbon-cta {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .journey-summary-ribbon .r-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-journey-copy h1 {
        font-size: 2.38rem;
    }

    .journey-eyebrow {
        font-size: 0.86rem;
        letter-spacing: 0.1em;
    }

    .hero-collage {
        min-height: 330px;
    }

    .photo-card-large {
        width: 82%;
        height: 170px;
    }

    .photo-card-wide {
        width: 82%;
        height: 170px;
    }

    .photo-card-small {
        width: 105px;
        height: 145px;
    }
}

/* First-view precision pass: closer to the travel handbill reference */
body .floating-cta {
    display: none;
}

.hero-journey {
    min-height: calc(100vh - 122px);
    box-sizing: border-box;
    padding: 10px clamp(42px, 6.6vw, 126px) 36px;
    align-items: center;
    background-position: center top;
}

.hero-journey::after {
    width: 12.5%;
    background: url('img/banner/main_bg2.jpg') right center / cover no-repeat;
}

.hero-paper-map {
    display: none;
}

.hero-topo-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 190px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.48;
    background: url("data:image/svg+xml,%3Csvg width='270' height='190' viewBox='0 0 270 190' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23988e70' stroke-width='1.25' stroke-linecap='round' opacity='.62'%3E%3Cpath d='M-26 10C12 2 33 18 63 8C96-3 120 0 151 13C181 26 211 13 282 18'/%3E%3Cpath d='M-28 27C9 19 34 35 64 23C97 10 121 14 151 29C181 44 216 31 284 36'/%3E%3Cpath d='M-31 45C9 36 33 54 65 40C99 24 126 31 152 47C182 65 217 48 286 55'/%3E%3Cpath d='M-33 64C9 55 34 73 66 58C101 41 126 48 154 66C182 84 221 68 288 75'/%3E%3Cpath d='M-37 84C4 73 36 96 69 77C104 57 130 70 155 88C185 110 221 91 291 98'/%3E%3Cpath d='M-40 105C4 92 36 119 71 99C106 79 131 91 159 111C187 132 223 116 292 122'/%3E%3Cpath d='M-43 128C2 114 35 142 74 123C111 104 137 113 163 135C189 158 224 141 292 148'/%3E%3Cpath d='M-45 153C-2 139 36 164 76 148C114 133 139 136 166 158C191 180 223 168 291 175'/%3E%3C/g%3E%3Cg stroke='%23988e70' stroke-width='1' stroke-linecap='round' opacity='.36'%3E%3Cpath d='M54-20C65 5 53 21 69 41C85 61 113 58 125 80C138 102 121 126 139 149'/%3E%3Cpath d='M86-22C98 2 87 24 102 43C118 62 147 64 158 87C170 112 154 130 172 157'/%3E%3C/g%3E%3C/svg%3E") left top / 270px 190px no-repeat;
}

.hero-topo-deco {
    width: 230px;
    height: 132px;
    opacity: 0.36;
    background: url("data:image/svg+xml,%3Csvg width='230' height='132' viewBox='0 0 230 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23A79B7B' stroke-width='1' stroke-linecap='round' opacity='.72'%3E%3Cpath d='M-38 118C-7 114 12 96 8 75C5 55 18 38 39 31C60 24 75 36 95 27C118 17 133 3 159 7C179 10 190 18 219 14'/%3E%3Cpath d='M-41 100C-13 97 3 84 0 66C-3 49 12 34 32 27C53 20 68 30 88 21C110 11 126-2 151 2C174 5 186 13 213 9'/%3E%3Cpath d='M-43 84C-18 83-6 70-9 55C-12 39 4 26 24 20C43 14 59 22 77 14C99 4 112-9 138-6C159-4 174 5 201 1'/%3E%3Cpath d='M-44 68C-24 68-15 58-17 44C-20 30-5 18 13 12C31 6 47 14 64 7C86-2 98-16 124-13C146-11 160-3 188-8'/%3E%3Cpath d='M-45 52C-30 53-23 44-25 33C-28 20-14 10 2 4C19-2 35 5 51-2C70-10 85-23 110-21C133-20 147-12 174-17'/%3E%3Cpath d='M-45 36C-34 38-31 29-33 20C-35 9-24 2-10-3C4-8 20-3 34-9C51-17 66-29 88-29C111-29 126-21 153-26'/%3E%3C/g%3E%3Cg stroke='%23A79B7B' stroke-width='.9' stroke-linecap='round' opacity='.46'%3E%3Cpath d='M63 129C80 110 108 105 128 119C145 131 166 129 184 114'/%3E%3Cpath d='M76 126C89 114 108 113 124 124C137 134 153 133 168 123'/%3E%3C/g%3E%3C/svg%3E") left top / 230px 132px no-repeat;
}

.hero-journey::before {
}

.hero-journey-inner {
    position: static;
    width: min(1480px, 100%);
    grid-template-columns: minmax(720px, 1.05fr) minmax(680px, 0.95fr);
    gap: 18px;
    padding: 0 40px;
}

.hero-journey-copy {
    position: relative;
    z-index: 3;
    max-width: 780px;
    padding-bottom: 6px;
}

.hero-journey-copy::before {
    display: none;
}

.journey-eyebrow {
    min-width: 340px;
    margin-bottom: 24px;
    padding: 12px 36px;
    background: rgba(255, 255, 249, 0.82);
}

.hero-journey-copy h1 {
    width: max-content;
    max-width: none;
    white-space: nowrap;
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 6px;
}

.journey-subtitle {
    font-size: 1.35rem;
}
.journey-subtitle span{
    font-size: 2.5rem;
    color: #a07737;
}
.journey-divider {
    width: 540px;
    margin: 5px 0 22px;
}

.journey-lead {
    margin-bottom: 15px;
}

.hero-paper-map {
    right: 0;
    width: 18%;
}

.hero-paper-map::before {
    top: 24%;
    right: 22%;
}

.hero-bamboo-deco {
    left: 100px;
    bottom: -5px;
    width: 170px;
    opacity: 0.5;
    transform: scaleX(-1) rotate(-5deg);
}

.hero-collage {
    min-height: 604px;
    transform: translateX(-22px);
}

.photo-card {
    padding: 11px;
    box-shadow: 0 24px 44px rgba(50, 55, 35, 0.22);
}

.photo-card-large {
    top: 42px;
    right: 88px;
    width: 585px;
    height: 340px;
    transform: rotate(-5deg);
}

.photo-card-wide {
    right: -8px;
    bottom: 38px;
    width: 610px;
    height: 318px;
    transform: rotate(3deg);
}

.photo-card-small {
    left: 18px;
    bottom: 64px;
    width: 176px;
    height: 246px;
    transform: rotate(-2deg);
}

.journey-stamp {
    top: 34px;
    right: -18px;
    width: 142px;
    height: 142px;
}

.tape-top {
    top: -36px;
    left: -46px;
}

.tape-corner {
    right: -34px;
    bottom: -32px;
}

.journey-summary-ribbon {
    padding: 20px clamp(42px, 2.6vw, 48px) 22px;
}

.journey-summary-ribbon .container {
    max-width: 1600px;
}

.journey-summary-ribbon .ribbon-inner {
    position: relative;
    min-height: 78px;
    padding: 0;
    grid-template-columns: 154px 310px 168px 168px 168px minmax(510px, 1fr);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.journey-summary-ribbon .ribbon-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 968px;
    max-width: calc(100% - 540px);
    background: rgba(255, 255, 250, 0.86);
    border: 1px solid rgba(127, 103, 55, 0.24);
    border-radius: 7px;
    box-shadow: 0 16px 35px rgba(73, 68, 42, 0.08);
}

.journey-summary-ribbon .ribbon-item {
    position: relative;
    z-index: 1;
    height: 62px;
    padding: 0 22px;
    gap: 12px;
}

.journey-summary-ribbon .ribbon-item:nth-child(2) .r-value {
    color: #3f462b;
    font-size: 1.34rem;
    letter-spacing: 0.02em;
}

/* Legacy nth-child overrides removed to ensure uniform inline layout */

.journey-summary-ribbon .ribbon-cta {
    padding-left: 26px;
    gap: 14px;
}

.journey-summary-ribbon .r-btn {
    min-height: 58px;
    padding: 0 24px;
}

@media (max-width: 1480px) {
    .hero-journey-inner {
        grid-template-columns: minmax(610px, 1fr) minmax(590px, 0.95fr);
    }

    .hero-journey-copy h1 {
        font-size: 4.3rem;
    }

    .photo-card-large {
        width: 520px;
        height: 318px;
    }

    .photo-card-wide {
        width: 555px;
        height: 300px;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: 135px 250px 145px 145px 145px minmax(440px, 1fr);
    }

    .journey-summary-ribbon .ribbon-inner::before {
        width: 820px;
        max-width: calc(100% - 470px);
    }
}

@media (max-width: 1180px) {
    .hero-journey {
        min-height: auto;
    }

    .hero-journey-inner {
        grid-template-columns: 1fr;
    }

    .hero-journey-copy h1 {
        width: auto;
        white-space: normal;
    }

    .hero-collage {
        transform: none;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: repeat(5, 1fr);
    }

    .journey-summary-ribbon .ribbon-inner::before {
        width: 100%;
        max-width: none;
    }

    .journey-summary-ribbon .ribbon-cta {
        grid-column: 1 / -1;
        padding: 16px 0 0;
    }
}

/* Collage coordinate system: scale every postcard from one fixed-ratio stage */
.hero-collage {
    position: absolute;
    top: clamp(82px, 11.2vh, 118px);
    right: 10vw;
    width: clamp(560px, 39.6vw, 760px);
    max-width: none;
    aspect-ratio: 720 / 650;
    min-height: 0;
    justify-self: auto;
    transform: none;
    z-index: 2;
}

.photo-card {
    box-sizing: border-box;
}

.photo-card-large {
    top: -1.5%;
    left: auto;
    right: 3%;
    bottom: auto;
    width: 68.5%;
    height: auto;
    aspect-ratio: 520 / 385;
    transform: rotate(-4deg);
    z-index: 3;
}

.photo-card-wide {
    top: auto;
    left: auto;
    right: -12%;
    bottom: 5.5%;
    width: 58.5%;
    height: auto;
    aspect-ratio: 450 / 315;
    transform: rotate(8deg);
    z-index: 5;
}

.photo-card-small {
    top: auto;
    left: 20%;
    right: auto;
    bottom: 7%;
    width: 30%;
    height: auto;
    aspect-ratio: 230 / 240;
    transform: rotate(5deg);
    z-index: 6;
}

.journey-stamp {
    top: -6.5%;
    left: auto;
    right: -6.5%;
    bottom: auto;
    width: 20%;
    height: auto;
    aspect-ratio: 1;
}

.photo-tape {
    width: 21.8%;
}

.tape-top {
    top: -9%;
    left: -8%;
}

.tape-corner {
    right: -8%;
    bottom: -10%;
}

@media (max-width: 1480px) {
    .hero-collage {
        width: clamp(560px, 48vw, 690px);
    }
}

@media (max-width: 1180px) {
    .hero-journey-inner {
        position: relative;
    }

    .hero-collage {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 720px);
        max-width: 100%;
        justify-self: center;
        transform: none;
    }
}

@media (max-width: 768px) {
    .hero-collage {
        width: min(100%, 560px);
        max-width: calc(100vw - 36px);
    }

    .photo-card {
        padding: 8px;
    }

    .journey-stamp {
        width: 18%;
        right: -2%;
        top: -2%;
    }
}

@media (max-width: 480px) {
    .hero-collage {
        width: 100%;
        max-width: calc(100vw - 36px);
    }

    .photo-card-small {
        width: 30%;
        left: 5%;
        bottom: 5%;
    }
}

/* Tour summary ribbon: compact 1480px booking bar */
.journey-summary-ribbon {
    padding: 18px 24px 22px;
    background:
        linear-gradient(180deg, rgba(248, 244, 234, 0.96), rgba(244, 237, 222, 0.98));
    box-shadow: 0 -14px 30px rgba(59, 55, 36, 0.08);
}

.journey-summary-ribbon .container {
    width: min(1480px, calc(100vw - 48px));
    max-width: 1480px;
    padding: 0;
}

.journey-summary-ribbon .ribbon-inner {
    min-height: 86px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0;
    background: rgba(255, 255, 249, 0.9);
    border: 1px solid rgba(126, 111, 75, 0.22);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(72, 66, 42, 0.09);
    overflow: hidden;
}

.journey-summary-ribbon .ribbon-inner::before {
    display: none;
}

.journey-summary-ribbon .ribbon-item {
    height: 58px;
    padding: 0 18px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-right: 1px solid rgba(126, 111, 75, 0.18);
}

.journey-summary-ribbon .ribbon-item i {
    color: #7b8450;
    font-size: 1.32rem;
}

.journey-summary-ribbon .r-label {
    display: block;
    margin: 0;
    color: #6f704e;
    font-family: var(--font-main);
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.journey-summary-ribbon .r-value,
.journey-summary-ribbon .ribbon-item:nth-child(2) .r-value,
.journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
    display: block;
    flex-basis: auto;
    color: #3f462b;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.journey-summary-ribbon .ribbon-item:nth-child(2) .r-value {
    font-size: 1.16rem;
}

.journey-summary-ribbon .ribbon-cta {
    height: 100%;
    padding: 14px 16px 14px 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(126, 111, 75, 0.18);
}

.journey-summary-ribbon .r-btn {
    min-height: 52px;
    padding: 0 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.journey-summary-ribbon .r-btn-primary {
    background: #788047;
    border-color: #788047;
    color: #fff;
    box-shadow: 0 10px 20px rgba(85, 93, 48, 0.18);
}

.journey-summary-ribbon .r-btn-secondary {
    background: rgba(255, 255, 250, 0.66);
    border-color: rgba(86, 91, 58, 0.36);
    color: #565b3a;
}

.journey-summary-ribbon .r-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 1320px) {
    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: 126px 230px 124px 124px 132px auto;
        justify-content: center;
    }

    .journey-summary-ribbon .ribbon-item {
        padding: 0 12px;
        column-gap: 9px;
    }

    .journey-summary-ribbon .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
        font-size: 1.16rem;
    }

    .journey-summary-ribbon .r-btn {
        padding: 0 14px;
        font-size: 0.82rem;
    }
}

@media (max-width: 1080px) {
    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: repeat(5, 1fr);
    }

    .journey-summary-ribbon .ribbon-cta {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        border-top: 1px solid rgba(126, 111, 75, 0.16);
        border-left: 0;
        padding: 14px;
    }

    .journey-summary-ribbon .ribbon-item:nth-child(5) {
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .journey-summary-ribbon {
        padding: 14px 14px 18px;
    }

    .journey-summary-ribbon .container {
        width: 100%;
    }

    .journey-summary-ribbon .ribbon-inner {
        grid-template-columns: 1fr 1fr;
    }

    .journey-summary-ribbon .ribbon-item {
        min-height: 58px;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(126, 111, 75, 0.14);
    }

    .journey-summary-ribbon .ribbon-cta {
        display: flex;
        justify-content: center;
    }
}

/* Tour summary ribbon: floating booking card */
.journey-summary-ribbon {
    position: relative;
    z-index: 30;
    margin-top: -64px;
    padding: 0 54px 34px;
    background:
        linear-gradient(180deg, transparent 0 30px, rgba(247, 241, 229, 0.96) 52px 100%);
    box-shadow: none;
}

.journey-summary-ribbon .container {
    width: min(1560px, calc(100vw - 108px));
    max-width: 1560px;
    padding: 0;
    background-image: url(img/banner/banner_des_left.png), url(img/banner/banner_des_right.png), linear-gradient(180deg, rgba(255, 255, 251, 0.97), rgba(250, 246, 236, 0.98));
    background-position: left 16px bottom 12px, right 18px top 15px, center;
    background-size: 66px auto, 44px auto, auto;
    background-repeat: no-repeat;
    border: 1px solid rgba(184, 151, 91, 0.28);
    border-radius: 20px;
    box-shadow: 0 22px 42px rgba(76, 69, 45, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.journey-summary-ribbon .ribbon-inner {
    min-height: 86px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 14px 45px;
    padding: 0 22px;
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(184, 151, 91, 0.48);
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
    overflow: hidden;
}

.journey-summary-ribbon .ribbon-inner::before {
    display: none;
}

.journey-summary-ribbon .ribbon-item {
    min-height: 78px;
    padding: 0 clamp(16px, 1.6vw, 28px);
    display: grid;
    grid-template-columns: 52px max-content;
    grid-template-rows: auto auto;
    gap: 0px 13px;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 0;
    border-right: 1px dotted rgba(184, 151, 91, 0.38);
    background: transparent;
}

.journey-summary-ribbon .ribbon-item i {
    width: 48px;
    height: 48px;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #788047;
    font-size: 1.32rem;
    border: 1px solid rgba(184, 151, 91, 0.36);
    border-radius: 50%;
    background: rgba(255, 255, 250, 0.66);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}

.journey-summary-ribbon .r-label {
    display: block;
    align-self: end;
    color: #686444;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.08em;
    margin: 0 0 7px;
    white-space: nowrap;
}

.journey-summary-ribbon .r-value,
.journey-summary-ribbon .ribbon-item:nth-child(2) .r-value,
.journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
    display: block;
    align-self: start;
    color: #2f3523;
    font-family: var(--font-serif);
    font-size: 1.36rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.journey-summary-ribbon .ribbon-item:nth-child(2) .r-value {
    font-size: 1.2rem;
}

.journey-summary-ribbon .ribbon-cta {
    min-height: 78px;
    padding: 0 22px 0 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    border: 0;
}

.journey-summary-ribbon .r-btn {
    min-height: 58px;
    padding: 0 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
}

.journey-summary-ribbon .r-btn-primary {
    background: linear-gradient(180deg, #788047, #657039);
    border: 1px solid #52602e;
    color: #fff;
    box-shadow:
        0 12px 24px rgba(73, 80, 43, 0.24),
        inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.journey-summary-ribbon .r-btn-secondary {
    background: rgba(255, 255, 250, 0.72);
    border: 1px solid rgba(86, 91, 58, 0.38);
    color: #565b3a;
}

.journey-summary-ribbon .r-btn:hover {
    transform: translateY(-2px);
}

.journey-summary-ribbon .r-btn-primary:hover {
    background: linear-gradient(180deg, #6f783f, #596533);
    box-shadow:
        0 15px 28px rgba(73, 80, 43, 0.28),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.journey-summary-ribbon .r-btn-secondary:hover {
    background: #fff;
}

@media (max-width: 1320px) {
    .journey-summary-ribbon {
        padding-right: 32px;
        padding-left: 32px;
    }

    .journey-summary-ribbon .container {
        width: min(1240px, calc(100vw - 64px));
        background-position:
            left 12px center,
            right 12px center,
            center;
        background-size:
            62px auto,
            64px auto,
            auto;
    }

    .journey-summary-ribbon .ribbon-inner {
        padding: 0;
    }

    .journey-summary-ribbon .ribbon-item {
        grid-template-columns: 48px max-content;
        padding: 0 15px;
        column-gap: 10px;
    }

    .journey-summary-ribbon .ribbon-item i {
        width: 44px;
        height: 44px;
        font-size: 1.16rem;
    }

    .journey-summary-ribbon .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
        font-size: 1.14rem;
    }

    .journey-summary-ribbon .r-btn {
        min-height: 54px;
        padding: 0 18px;
        font-size: 0.88rem;
    }
}

@media (max-width: 1080px) {
    .journey-summary-ribbon {
        margin-top: -42px;
    }

    .journey-summary-ribbon .ribbon-inner {
        justify-content: center;
        padding: 0 38px;
    }

    .journey-summary-ribbon .ribbon-item {
        min-width: 180px;
        border-bottom: 1px dotted rgba(184, 151, 91, 0.26);
    }

    .journey-summary-ribbon .ribbon-item:nth-child(5) {
        border-right: 0;
    }

    .journey-summary-ribbon .ribbon-cta {
        flex-basis: 100%;
        min-height: 66px;
        padding: 12px 0 0;
    }
}

@media (min-width: 1081px) and (max-width: 1400px), (min-width: 1081px) and (max-height: 820px) {
    .hero-journey {
        min-height: calc(100vh - 96px);
        padding-top: clamp(18px, 3vh, 28px);
        padding-bottom: 28px;
    }

    .journey-eyebrow {
        margin-bottom: 14px;
        padding: 8px 24px;
    }

    .hero-journey-copy h1 {
        font-size: clamp(3.2rem, 4.2vw, 4.1rem);
        line-height: 1.16;
        margin-bottom: 12px;
    }

    .journey-subtitle {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .journey-subtitle span {
        font-size: 1.95rem;
    }

    .journey-divider {
        margin: 10px 0 14px;
    }

    .journey-info-card {
        padding: 14px 18px;
        margin-top: 12px;
        margin-bottom: 16px;
    }

    .journey-info-card .journey-lead {
        font-size: 0.96rem;
        line-height: 1.75;
        margin-bottom: 10px;
    }

    .journey-info-card .journey-note {
        font-size: 0.98rem;
        padding: 6px 14px;
    }

    .hero-collage {
        top: clamp(40px, 6vh, 60px);
        width: clamp(500px, 42vw, 610px);
    }

    .journey-summary-ribbon {
        margin-top: -20px;
    }

    .journey-summary-ribbon .container {
        width: min(1320px, calc(100vw - 48px));
    }

    .journey-summary-ribbon .ribbon-inner {
        min-height: 76px;
        margin: 10px 26px;
        padding: 0;
    }

    .journey-summary-ribbon .ribbon-item {
        min-height: 68px;
        grid-template-columns: 42px max-content;
        padding: 0 12px;
        column-gap: 9px;
    }

    .journey-summary-ribbon .ribbon-item i {
        width: 40px;
        height: 40px;
        font-size: 1.08rem;
    }

    .journey-summary-ribbon .r-label {
        font-size: 0.68rem;
        margin-bottom: 6px;
    }

    .journey-summary-ribbon .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(2) .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
        font-size: 1.08rem;
    }

    .journey-summary-ribbon .ribbon-item:nth-child(2) .r-value {
        font-size: 1rem;
    }

    .journey-summary-ribbon .ribbon-cta {
        min-height: 68px;
        padding: 0 12px 0 14px;
    }

    .journey-summary-ribbon .r-btn {
        min-height: 50px;
        padding: 0 18px;
        font-size: 0.86rem;
    }
}

@media (max-width: 720px) {
    .journey-summary-ribbon {
        margin-top: -28px;
        padding: 0 16px 24px;
        background:
            linear-gradient(180deg, transparent 0 24px, rgba(247, 241, 229, 0.96) 24px 100%);
    }

    .journey-summary-ribbon .container {
        width: 100%;
        background-position:
            left -10px top 16px,
            right -10px bottom 14px,
            center;
        background-size:
            54px auto,
            56px auto,
            auto;
    }

    .journey-summary-ribbon .ribbon-inner {
        border-radius: 16px;
        margin: 10px;
        padding: 0 14px;
    }

    .journey-summary-ribbon .ribbon-item {
        width: 100%;
        min-width: 0;
        justify-content: start;
        border-right: 0;
        border-bottom: 1px dotted rgba(184, 151, 91, 0.28);
    }

    .journey-summary-ribbon .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(2) .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
        font-size: 1.16rem;
    }

    .journey-summary-ribbon .ribbon-cta {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .journey-summary-ribbon .r-btn {
        width: 100%;
        min-height: 52px;
    }
}

/* ==========================================================================
   炫酷入场动画效果 (Cool Entrance Animations)
   ========================================================================== */

/* 1. 关键帧定义 (Keyframes) */

/* 眉标渐显及字间距舒展效果 */
@media (max-width: 768px) {
    .hero-journey {
        min-height: auto;
        padding: 34px 18px 52px;
        align-items: flex-start;
        /* 手机端升级为垂直向下的柔和白雾渐变，虚化并提亮文字区域背景，提高对比度与可读性 */
        background:
            linear-gradient(180deg,
                rgba(255, 255, 250, 0.94) 0%,
                rgba(255, 255, 250, 0.88) 42%,
                rgba(255, 255, 250, 0.7) 68%,
                rgba(255, 255, 250, 0.15) 100%
            ),
            url(img/banner/main_bg1.jpg) 62% top / cover no-repeat;
    }

    .hero-journey::after {
        display: none;
    }

    .hero-topo-deco {
        width: 150px;
        height: 86px;
        opacity: 0.2;
    }

    .hero-bamboo-deco {
        left: -26px;
        bottom: 10px;
        width: 112px;
        opacity: 0.16;
    }

    .hero-journey-inner {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 10px;
        align-items: start;
    }

    .hero-journey-copy {
        max-width: 100%;
        padding-bottom: 0;
    }

    .journey-eyebrow {
        min-width: 0;
        max-width: 100%;
        padding: 9px 16px;
        margin-bottom: 16px;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
    }

    .journey-project-mark {
        font-size: 0.68rem;
        padding-left: 14px;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
    }

    .hero-journey-copy h1 {
        width: auto;
        max-width: 100%;
        white-space: normal;
        font-size: clamp(2.15rem, 11vw, 3.1rem);
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .journey-subtitle {
        font-size: 0.98rem;
        line-height: 1.75;
        letter-spacing: 0.04em;
        margin-bottom: 12px;
    }

    .journey-subtitle .days,
    .journey-subtitle span {
        font-size: 1.7rem;
    }

    .journey-divider {
        width: min(100%, 320px);
        margin: 14px 0 18px;
        gap: 10px;
    }

    .journey-info-card {
        padding: 14px 16px;
        margin-top: 14px;
        margin-bottom: 18px;
    }

    .journey-lead {
        font-size: 0.92rem;
        line-height: 1.8;
        letter-spacing: 0.04em;
        margin-bottom: 10px;
    }

    .journey-lead br {
        display: none;
    }

    .journey-note {
        margin-left: 0;
        font-size: 0.94rem;
        padding: 6px 14px;
        letter-spacing: 0.06em;
    }

    .hero-collage {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 420px);
        max-width: 100%;
        min-height: 0;
        aspect-ratio: 360 / 300;
        justify-self: center;
        margin: 10px auto 0;
    }

    .photo-card {
        padding: 6px;
        box-shadow: 0 10px 24px rgba(50, 55, 35, 0.18);
    }

    .photo-card-large {
        top: 0;
        left: 4%;
        right: auto;
        width: 66%;
        height: auto;
        aspect-ratio: 520 / 318;
        transform: rotate(-3deg);
        z-index: 2;
    }

    .photo-card-wide {
        right: 2%;
        bottom: 2%;
        width: 58%;
        height: auto;
        aspect-ratio: 560 / 310;
        transform: rotate(3deg);
        z-index: 4;
    }

    .photo-card-small {
        left: 2%;
        bottom: 6%;
        width: 35%;
        height: auto;
        aspect-ratio: 190 / 250;
        padding: 5px 5px 16px;
        transform: rotate(-5deg);
        z-index: 3;
    }

    .journey-stamp {
        width: 68px;
        height: auto;
        right: 6%;
        top: -8px;
        z-index: 5;
    }

    .photo-tape {
        width: 22%;
    }
}

@media (max-width: 480px) {
    .hero-journey {
        padding: 26px 14px 46px;
    }

    .journey-eyebrow {
        padding: 8px 12px;
        font-size: 0.74rem;
    }

    .journey-project-mark {
        font-size: 0.62rem;
        padding-left: 12px;
        margin-bottom: 6px;
        width: 100%;
    }

    .hero-journey-copy h1 {
        font-size: clamp(1.9rem, 10vw, 2.55rem);
        line-height: 1.18;
    }

    .journey-subtitle {
        font-size: 0.88rem;
    }

    .journey-subtitle .days,
    .journey-subtitle span {
        font-size: 1.45rem;
    }

    .journey-info-card {
        padding: 12px 14px;
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .journey-lead {
        font-size: 0.85rem;
        line-height: 1.7;
        margin-bottom: 8px;
    }

    .journey-note {
        font-size: 0.85rem;
        padding: 5px 12px;
        letter-spacing: 0.04em;
    }

    .hero-collage {
        width: calc(100vw - 32px);
        max-width: 380px;
        aspect-ratio: 340 / 290;
    }

    .photo-card-large {
        left: 3%;
        width: 67%;
    }

    .photo-card-wide {
        right: 2%;
        bottom: 2%;
        width: 59%;
    }

    .photo-card-small {
        left: 2%;
        bottom: 5%;
        width: 36%;
        padding: 4px 4px 4px;
    }

    .journey-stamp {
        width: 60px;
        right: 4%;
        top: -6px;
    }
}

@keyframes eyebrowReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: 0.05em;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0.16em;
        filter: blur(0);
    }
}

/* 主标题3D偏转及毛玻璃渐显 */
@keyframes mainTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(35px) rotateX(12deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

/* 子标题渐显 */
@keyframes subtitleReveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 分割线水平展开 */
@keyframes dividerExpand {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* 分割线中心小圆圈旋转渐显 */
@keyframes dividerDot {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* 导语及注释淡入 */
@keyframes journeyFadeUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 邮票飘落带微旋转效果 */
@keyframes stampDrop {
    0% {
        opacity: 0;
        transform: translateY(-80px) rotate(25deg) scale(1.3);
        filter: blur(5px);
    }
    70% {
        opacity: 1;
        transform: translateY(5px) rotate(-5deg) scale(0.95);
        filter: blur(0);
    }
    100% {
        opacity: 0.74;
        transform: translateY(0) rotate(0) scale(1);
    }
}

/* 大相片放置效果 (保持 -5deg 倾角) */
@keyframes cardLargeIn {
    0% {
        opacity: 0;
        transform: translate(40px, 40px) rotate(-15deg) scale(0.85);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-5deg) scale(1);
        filter: blur(0);
    }
}

/* 宽相片放置效果 (保持 3deg 倾角) */
@keyframes cardWideIn {
    0% {
        opacity: 0;
        transform: translate(-40px, 40px) rotate(15deg) scale(0.85);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(3deg) scale(1);
        filter: blur(0);
    }
}

/* 小相片放置效果 (保持 -2deg 倾角) */
@keyframes cardSmallIn {
    0% {
        opacity: 0;
        transform: translate(-30px, -20px) rotate(-10deg) scale(0.8);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-2deg) scale(1);
        filter: blur(0);
    }
}

/* 大相片胶带张贴 */
@keyframes tapeTopIn {
    0% {
        opacity: 0;
        transform: translate(-20px, -20px) scale(1.6) rotate(30deg);
    }
    100% {
        opacity: 0.86;
        transform: translate(0, 0) scale(1) rotate(11deg);
    }
}

/* 宽相片胶带张贴 */
@keyframes tapeCornerIn {
    0% {
        opacity: 0;
        transform: translate(20px, 20px) scale(1.6) rotate(-30deg);
    }
    100% {
        opacity: 0.86;
        transform: translate(0, 0) scale(1) rotate(-12deg);
    }
}

/* 缎带容器升起渐显 */
@keyframes ribbonIn {
    0% {
        opacity: 0;
        transform: translateY(45px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 缎带数据项渐显 */
@keyframes ribbonItemIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 缎带CTA按钮弹性放大 */
@keyframes ctaIn {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(15px);
    }
    70% {
        transform: scale(1.04) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 按钮高光流扫 */
@keyframes buttonGleam {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}


/* 2. 应用入场动画 (Apply Animations) */

/* 文字复制区域元素 */
.hero-journey-copy .journey-project-mark {
    opacity: 0;
    animation: eyebrowReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

.hero-journey-copy .journey-eyebrow {
    opacity: 0;
    animation: eyebrowReveal 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

.hero-journey-copy h1 {
    opacity: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: mainTitleReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.35s forwards;
}

.hero-journey-copy .journey-subtitle {
    opacity: 0;
    animation: subtitleReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

.hero-journey-copy .journey-divider {
    opacity: 0;
    transform-origin: center;
    animation: dividerExpand 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
}

.hero-journey-copy .journey-divider span {
    opacity: 0;
    animation: dividerDot 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}

.hero-journey-copy .journey-lead {
    opacity: 0;
    animation: journeyFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.75s forwards;
}

.hero-journey-copy .journey-note {
    opacity: 0;
    animation: journeyFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.95s forwards;
}

/* 拼贴相册区域元素 */
.hero-collage .journey-stamp {
    opacity: 0;
    animation: stampDrop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}

.hero-collage .photo-card-large {
    opacity: 0;
    animation: cardLargeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

.hero-collage .photo-card-wide {
    opacity: 0;
    animation: cardWideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards;
}

.hero-collage .photo-card-small {
    opacity: 0;
    animation: cardSmallIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

.hero-collage .photo-card-large .photo-tape {
    opacity: 0;
    animation: tapeTopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s forwards;
}

.hero-collage .photo-card-wide .photo-tape {
    opacity: 0;
    animation: tapeCornerIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.25s forwards;
}

/* 缎带信息栏区域元素 */
.journey-summary-ribbon .ribbon-inner {
    opacity: 0;
    animation: ribbonIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.85s forwards;
}

.journey-summary-ribbon .ribbon-item:nth-child(1) {
    opacity: 0;
    animation: ribbonItemIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
}

.journey-summary-ribbon .ribbon-item:nth-child(2) {
    opacity: 0;
    animation: ribbonItemIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

.journey-summary-ribbon .ribbon-item:nth-child(3) {
    opacity: 0;
    animation: ribbonItemIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.3s forwards;
}

.journey-summary-ribbon .ribbon-item:nth-child(4) {
    opacity: 0;
    animation: ribbonItemIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.4s forwards;
}

.journey-summary-ribbon .ribbon-item:nth-child(5) {
    opacity: 0;
    animation: ribbonItemIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
}

.journey-summary-ribbon .ribbon-cta {
    opacity: 0;
    animation: ctaIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s forwards;
}

/* CTA按钮光流特效 */
.journey-summary-ribbon .ribbon-cta .r-btn-primary {
    position: relative;
    overflow: hidden;
}

.journey-summary-ribbon .ribbon-cta .r-btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

/* 加载时自动播放一次闪烁，并在 hover 时重复播放 */
.journey-summary-ribbon .ribbon-cta .r-btn-primary::after {
    animation: buttonGleam 1.2s ease-in-out 3.2s 1 forwards;
}

.journey-summary-ribbon .ribbon-cta .r-btn-primary:hover::after {
    animation: buttonGleam 0.8s ease-in-out 0s 1 forwards;
}

/* ==========================================================================
   Message Section (この旅に込めた想い)
   ========================================================================== */
.message-section {
    position: relative;
    padding: 78px 0 72px;
    background:#F7F1E6;
    overflow: hidden;
    z-index: 5;
}

.message-top-wrap {
    width: min(1480px, calc(100vw - 40px));
    min-height: 520px;
    margin: 0 auto 42px;
}
.message-deco-bamboo {
position: absolute;
    top: -40px;
    left: -40px;
    width: 240px;
    opacity: 0.62;
    z-index: 2;
    pointer-events: none;
    transform: rotate(25deg);
}

.message-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 950px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.message-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.24) 11%, black 28%, black 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 84%, transparent 100%);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.24) 11%, black 28%, black 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 84%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.message-container {
    position: relative;
    z-index: 3;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
    display: block;
}

.message-content {
    max-width: 42%;
    position: relative;
    padding-top: 0;

}

/* Header */
.message-header {
    margin-bottom: 22px;
    padding-left: 0;
}

.m-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 11px;
    min-width: 318px;
    border-bottom: 1px solid rgba(151, 123, 73, 0.45);
}

.m-eyebrow {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    letter-spacing: 0.18em;
    color: #4e5135;
    margin: 0;
}

.m-divider {
    width: auto;
    height: auto;
    margin: 0;
    color: #9d8a5a;
    line-height: 1;
}

.m-divider::before {
    content: "/";
}

.m-sub {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    color: #4e5135;
    letter-spacing: 0.08em;
    line-height: 1;
}

.message-header h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: #2c3220;
    line-height: 1.22;
    margin: 0;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* Card */
.message-card {
    width: 680px;
    margin-top: 50px;

    background: rgba(255, 255, 253, 0.94);
    border-radius: 12px;
    padding: 52px 48px;
    box-shadow: 0 18px 42px rgba(80, 85, 60, 0.11);
    backdrop-filter: blur(8px);
    margin-bottom: 80px;
    border: 1px solid rgba(220, 215, 195, 0.62);
    position: relative;
}

.m-card-item {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(180, 175, 150, 0.22);
}

.m-card-item:first-child {
    padding-top: 0;
}

.m-card-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.m-icon {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #eef0e5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

.m-icon img {
    width: 70%;
    height: auto;
    object-fit: contain;
}

.m-card-item p {
    font-size: 1rem;
    line-height: 2;
    color: #3f462b;
    margin: 0;
    padding-top: 1px;
    font-weight: 400;
}

/* Bottom Banner */
.message-banner-container {
    width: min(1480px, calc(100vw - 92px));
    max-width: 980px;
    padding: 0;
}

.message-banner {
    position: relative;
    min-height: 120px;
    background: linear-gradient(180deg, rgba(250, 247, 237, 0.96), rgba(236, 229, 207, 0.92));
    border-radius: 8px;
    padding: 15px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    box-shadow: 0 16px 32px rgba(80, 85, 60, 0.12);
    border: 1px solid rgba(220, 215, 195, 0.8);
}

.mb-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(235, 230, 215, 0.9);
    box-shadow: 0 6px 16px rgba(105, 110, 85, 0.1);
    z-index: 3;
}

.message-banner p {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3f462b;
    margin: 0;
    font-family: var(--font-serif);
    position: relative;
    z-index: 2;
    line-height: 1.5;
}

.mb-deco-left {
    position: absolute;
    left: -40px;
    bottom: -5px;
    height: 90%;
    width: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

.mb-deco-right {
    position: absolute;
    right: -40px;
    bottom: -5px;
    transform:  scaleX(-1);
    height: 90%;
    width: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

/* Tour Features Grid (Appended 5-col) */
.tour-features-container {
    width: min(1480px, calc(100vw - 80px));
    padding: 0;
    margin: 40px auto 60px;
}

.tf-section-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #3f462b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.tf-section-title::before,
.tf-section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 1px;
    background: #a07737;
    opacity: 0.4;
    transform: translateY(6px);
}

.tf-title-text {
    display: flex;
    align-items: baseline;
}

.tf-big-num {
    font-size: 2.8rem;
    font-weight: 700;
    color: #4b5435;
    margin: 0 4px;
}

.tour-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tf-card {
    background: rgba(255, 255, 253, 0.96);
    border: 1px solid rgba(220, 215, 195, 0.62);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 14px 38px rgba(80, 85, 60, 0.08);
    position: relative;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
}

.tf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(80, 85, 60, 0.12);
}

.tf-wide {
    grid-column: span 2;
}

.tf-num-watermark {
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 8rem;
    font-family: var(--font-serif);
    color: #a07737;
    opacity: 0.05;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.tf-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.tf-icon-wrap {
    width: 56px;
    height: 56px;
    background: #edf1e4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 2px 6px rgba(91, 104, 70, 0.1);
}

.tf-icon-wrap i {
    font-size: 1.5rem;
    color: #5b6846;
}

.tf-card-header h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: #3f462b;
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
}

.tf-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #565b3a;
    margin: 0;
    text-align: justify;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Responsive */
@media (max-width: 1200px) {
    .message-top-wrap {
        width: min(1480px, calc(100vw - 40px));
        min-height: 480px;
    }

    .message-content {
        width: 430px;
        margin-left: 48px;
    }

    .message-bg-image {
        width: 73%;
        height: 480px;
        mask-image:
            linear-gradient(to right, transparent 0%, rgba(0,0,0,0.24) 11%, black 28%, black 88%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, black 12%, black 84%, transparent 100%);
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, rgba(0,0,0,0.24) 11%, black 28%, black 88%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, black 12%, black 84%, transparent 100%);
    }

    .message-card {
        width: 360px;
    }
}

@media (max-width: 1024px) {
    .message-section {
        padding: 70px 0;
    }

    .message-top-wrap {
        width: min(760px, calc(100vw - 36px));
        min-height: auto;
        margin-bottom: 32px;
        padding-top: 220px;
    }

    .message-bg-image {
        width: 100%;
        height: 300px;
        opacity: 0.32;
        mask-image:
            linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.74) 18%, rgba(0,0,0,0.74) 58%, transparent 100%);
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.74) 18%, rgba(0,0,0,0.74) 58%, transparent 100%);
    }

    .message-container {
        width: 100%;
    }

    .message-content {
        width: min(520px, 100%);
        max-width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }

    .message-card {
        width: auto;
    }

    .message-banner-container {
        width: min(760px, calc(100vw - 36px));
    }
}

@media (max-width: 768px) {
    .message-section {
        padding: 48px 0 54px;
    }
    .message-container {
        padding: 0 0px;
    }

    .message-top-wrap {
        width: 100%;
        padding-top: 154px;
        margin-bottom: 24px;
    }

    .message-deco-bamboo {
        width: 110px;
        top: -12px;
        left: -24px;
        opacity: 0.18;
    }

    .message-bg-image {
        height: 220px;
        opacity: 0.26;
    }

    .message-content {
        width: 100%;
    }

    .message-header .m-eyebrow-wrap {
        min-width: 0;
        width: auto;
        max-width: 100%;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 8px;
    }

    .message-header .m-eyebrow,
    .message-header .m-sub {
        font-size: 0.92rem;
        letter-spacing: 0.06em;
    }

    .message-header h2 {
        font-size: 1.7rem;
        line-height: 1.32;
        letter-spacing: 0.06em;
    }

    .message-header h2 br {
        display: none;
    }

    .message-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .m-card-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 18px 0;
    }

    .m-icon {
        width: 54px;
        height: 54px;
    }

    .m-card-item p {
        font-size: 0.94rem;
        line-height: 1.82;
    }

    .message-banner-container {
        width: calc(100vw - 28px);
    }

    .message-banner {
        min-height: auto;
        padding: 76px 18px 22px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
        border-radius: 14px;
        overflow: hidden;
    }

    .mb-icon {
        position: absolute;
        left: 50%;
        top: 18px;
        width: 54px;
        height: 54px;
        transform: translateX(-50%);
    }

    .message-banner p {
        font-size: 0.92rem;
        line-height: 1.7;
        max-width: 100%;
    }

    .mb-deco-left,
    .mb-deco-right {
        display: none;
    }
}

@media (max-width: 480px) {
    .message-section {
        padding: 40px 0 48px;
    }

    .message-top-wrap {
        width: calc(100vw - 40px);
        padding-top: 138px;
    }

    .message-bg-image {
        height: 190px;
        opacity: 0.22;
    }

    .message-header .m-eyebrow-wrap {
        gap: 8px;
        padding-bottom: 7px;
    }

    .message-header .m-eyebrow,
    .message-header .m-sub {
        font-size: 0.8rem;
    }

    .message-header h2 {
        font-size: 1.56rem;
    }

    .message-card {
        padding: 18px 14px;
        margin-top: 10px;
        margin-bottom: 0;
    }

    .m-card-item p {
        font-size: 0.88rem;
        line-height: 1.74;
    }

    .message-banner-container {
        width: calc(100vw - 40px);
    }

    .message-banner {
        padding: 68px 14px 18px;
    }

    .message-banner p {
        font-size: 0.86rem;
        line-height: 1.68;
    }
}

/* ===========================================================================
   Past Tour Album Link
   =========================================================================== */
.album-link-section {
    position: relative;
    padding: 52px 0 58px;
    background: linear-gradient(180deg, #f7f3e9 0%, #fbfaf5 100%);
    overflow: hidden;
}

.album-link-container {
    width: 1400px;
    margin: 0 auto;
    padding: 0 0px;
}

.album-link-card {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.1fr);
    min-height: 250px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 254, 249, 0.9);
    border: 1px solid rgba(192, 166, 101, 0.48);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(80, 72, 48, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.album-link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(80, 72, 48, 0.13);
}

.album-cover {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background: #d9dfd0;
}


.album-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 68%;
    transition: transform 0.45s ease;
}

.album-link-card:hover .album-cover img {
    transform: scale(1.035);
}

.album-cover-label {
    position: absolute;
    z-index: 1;
    left: 18px;
    top: 18px;
    padding: 6px 10px;
    color: #fffdf7;
    background: rgba(44, 50, 32, 0.72);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
}

.album-link-copy {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 48px;
}

.album-link-copy::after {
content: "";
    position: absolute;
    z-index: 0;
    right: -18px;
    bottom: -30px;
    width: 230px;
    height: 591px;
    background: url(img/bamboo11.png) no-repeat right bottom / contain;
    opacity: 0.48;
    pointer-events: none;
}

.album-link-copy > * {
    position: relative;
    z-index: 1;
}

.album-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 318px;
    margin-bottom: 24px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(151, 123, 73, 0.45);
}

.album-eyebrow span {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    color: #4e5135;
}

.album-eyebrow span:first-of-type {
    letter-spacing: 0.18em;
}

.album-eyebrow span:last-of-type {
    letter-spacing: 0.08em;
}

.album-eyebrow i {
    color: #8d7a4b;
    font-size: 1.15rem;
}

.album-eyebrow em {
    color: #9d8a5a;
    font-style: normal;
    line-height: 1;
}

.album-link-copy h2 {
    margin: 0;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.07em;
}

.album-title-divider {
    display: block;
    width: min(220px, 62%);
    height: auto;
    margin: 5px 0 12px;
}

.album-link-copy p {
    margin: 0 0 22px;
    color: #606252;
    font-family: var(--font-serif);
    font-size: 0.94rem;
    letter-spacing: 0.06em;
}

.album-link-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #536238;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.album-link-action i {
    font-size: 0.78rem;
    transition: transform 0.25s ease;
}

.album-link-card:hover .album-link-action i {
    transform: translateX(4px);
}

@media (max-width: 760px) {
    .album-link-section {
        padding: 38px 0 44px;
    }

    .album-link-container {
        width: min(100% - 36px, 560px);
        padding: 0;
    }

    .album-link-card {
        grid-template-columns: 1fr;
    }

    .album-cover {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .album-cover img {
        object-position: 50% 70%;
    }

    .album-link-copy {
        padding: 24px 22px 27px;
    }

    .album-link-copy::after {
        right: -24px;
        bottom: -38px;
        width: 160px;
        height: 180px;
        opacity: 0.34;
    }

    .album-eyebrow {
        min-width: 0;
        max-width: 100%;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 8px;
    }

    .album-eyebrow span {
        font-size: 0.92rem;
        letter-spacing: 0.06em;
    }

    .album-link-copy h2 {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .album-title-divider {
        width: min(180px, 70%);
        margin: 3px 0 10px;
    }

    .album-link-copy p {
        margin: 9px 0 17px;
        font-size: 0.86rem;
    }
}

@media (max-width: 640px) {
    .album-eyebrow {
        gap: 8px;
        padding-bottom: 7px;
    }

    .album-eyebrow span {
        font-size: 0.8rem;
    }
}

/* ===========================================================================
   Chairman Profile Section (One Row Layout)
   ========================================================================== */
.chairman-section {
    padding: 140px 0 80px 0;
    background: #ffffff;
    position: relative;
    z-index: 5;
}

.chairman-container-wide {
    max-width: 1480px; /* Wider container for one-row */
    margin: 0 auto;
    padding: 0 40px;
}

.chairman-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* --- Col 1: Profile Image --- */
.cp-col-image {
    width: 320px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-top: 50px; /* Staggered drop effect */
}

.cp-image-bamboo,
.cp-image-tape {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.cp-image-bamboo {
    width: 220px;
    left: -210px;
    /* top: 64px; */
    bottom: 50px;
    transform: rotate(-16deg) scaleX(-1);
    opacity: 0.32;
    z-index: 1;
}

.cp-image-tape {
    width: 120px;
    left: -48px;
    top: -40px;
    transform: rotate(116deg);
    opacity: 0.86;
}

.cp-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
}

/* --- Col 2: Bio Box --- */
.cp-col-bio {
    width: 640px;
    flex-shrink: 0;
    background: #faf8f2;
    padding: 60px 40px 60px 100px; /* Padding left clears image overlap */
    margin-left: -60px; /* Negative margin pulls box under image */
    position: relative;
    z-index: 1;
}

.cp-eyebrow-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.cp-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #9d9d9d;
    margin-right: 15px;
}

.cp-line {
    flex: 1;
    height: 1px;
    background: #dfdfdf;
}

.cp-name-wrap {
    margin-bottom: 30px;
}

.cp-name-label {
    font-size: 0.85rem;
    color: #7b7b7b;
    margin-bottom: 15px;
    margin-left: -5px;
}

.cp-name {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #2c3220;
    font-weight: 500;
    margin: 0 0 5px 0;
}

.cp-name-kana {
    font-size: 0.8rem;
    color: #8c8c8c;
    letter-spacing: 0.1em;
}

.cp-desc {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cp-desc-intro {
    font-size: 0.92rem;
    color: #2c3220; /* 权威墨绿 */
    line-height: 1.8;
    font-weight: 500;
    margin: 0 0 20px 0;
    padding-left: 16px;
    border-left: 2px solid rgba(180, 150, 80, 0.45); /* 柔和金色边线 */
    letter-spacing: 0.05em;
    text-align: justify;
    transition: border-color 0.3s ease;
}

.cp-history-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 适当的项间距，利用负空间代替分割线 */
}

.cp-history-list li {
    display: flex;
    align-items: baseline; /* 基线对齐，使年份与文字视觉更自然 */
    gap: 20px;
    padding: 0;
    transition: all 0.25s ease;
}

/* 极简淡金色年份区间 */
.cp-history-year {
    font-family: var(--font-serif);
    font-weight: 700;
    color: #a8946e; /* 优雅温润的淡古铜金 */
    font-size: 0.88rem;
    width: 135px; /* 固定宽度，确保年份和事件绝对左对齐 */
    min-width: 135px;
    flex-shrink: 0;
    text-align: left; /* 左对齐使线条感更整齐 */
    line-height: 1.3;
    transition: color 0.25s ease;
}

.cp-history-event {
    font-size: 0.85rem;
    color: #555e46; /* 优雅的橄榄灰绿 */
    line-height: 1.5;
    transition: color 0.25s ease;
}

/* 极其微弱柔和的划过效果，不造成视觉负担 */
.cp-desc:hover .cp-desc-intro {
    border-color: rgba(180, 150, 80, 0.9);
}

.cp-history-list li:hover .cp-history-year {
    color: #2c3220; /* 悬浮时年份稍微加深 */
}

.cp-history-list li:hover .cp-history-event {
    color: #2c3220; /* 悬浮时文字变深聚焦 */
}

/* 响应式：在超小屏幕下，年份与事件改为上下垂直排列 */
@media (max-width: 480px) {
    .cp-history-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cp-history-year {
        width: auto;
        min-width: auto;
    }
}

/* --- Col 3: Theme List --- */
.cp-col-theme {
    flex-grow: 1;
    margin-left: 60px; /* Spacing from bio box */
    padding-top: 30px; /* Align slightly below the top of image */
}

.ct-header {
    margin-bottom: 40px;
}

.ct-eyebrow {
    font-family: var(--font-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #a3a897;
    display: block;
    margin-bottom: 15px;
}

.ct-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: #333928;
    line-height: 1.4;
    margin: 0;
}

.ct-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: #4f5442;
    margin-top: 14px;
    margin-bottom: 0;
    letter-spacing: 0.04em;
}

.ct-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-list li {
    display: flex;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #eaeaea;
}

.ct-list li:first-child {
    padding-top: 0;
}

.ct-list li:last-child {
    border-bottom: none;
}

.ct-num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: #e2d7c1;
    margin-right: 25px;
    font-weight: 500;
}

.ct-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
    letter-spacing: 0.05em;
}

/* 列表最右侧的高清精致小图标 */
.ct-icon {
    margin-left: auto;
    height: 48px;
    width: auto;
    display: block;
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ct-list li:hover .ct-icon {
    transform: scale(1.1); /* 划过时轻微缩放高亮 */
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .chairman-container-wide {
        padding: 0 32px;
        box-sizing: border-box;
    }
    .chairman-row {
        flex-direction: column;
        align-items: center;
    }
    .cp-col-image {
        width: 100%;
        max-width: 300px;
        margin-top: 0;
    }
    .cp-image-bamboo {
        width: 150px;
        left: -86px;
        top: 48px;
    }
    .cp-image-tape {
        width: 76px;
        left: -20px;
        top: -26px;
    }
    .cp-col-bio {
        width: 100%;
        max-width: 600px;
        margin-left: 0;
        padding: 80px 40px 40px;
        margin-top: -60px; /* Still overlapping the image on tablet */
    }
    .cp-col-theme {
        width: 100%;
        max-width: 600px;
        margin-left: 0;
        margin-top: 60px;
        padding-top: 0;
    }
}

/* ==========================================================================
   Map Section
   ========================================================================== */
.map-section {
    padding: 86px 0 92px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.7), transparent 28%),
        linear-gradient(180deg, #f7f1e4 0%, #f2ead8 100%);
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.map-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(115, 96, 62, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
    background-size: 7px 7px, 100% 100%;
    opacity: 0.45;
    pointer-events: none;
}

.map-intro {
    position: relative;
    z-index: 3;
    max-width: 1480px;
    padding: 0 40px;
    margin-bottom: 34px;
}

.map-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 11px;
    min-width: 318px;
    border-bottom: 1px solid rgba(151, 123, 73, 0.45);
    color: #4e5135;
    font-family: var(--font-serif);
    font-size: 1.12rem;
    letter-spacing: 0.18em;
}

.map-label i,
.m-eyebrow-wrap i,
.h-eyebrow-wrap i {
    color: #8d7a4b;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.map-label em {
    color: #9d8a5a;
    font-style: normal;
    letter-spacing: 0;
}

.map-intro h2 {
    margin: 0 0 18px;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.08em;
}

.map-subtitle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    color: #6e4b2b;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0.16em;
}

.map-subtitle::before {
    transform: rotate(-32deg);
}

.map-subtitle::after {
    transform: scaleX(-1) rotate(-32deg);
}

.map-lead {
    margin: 0;
    color: #33372b;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.08em;
}

.map-container-wide {
    position: relative;
    z-index: 4;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
}

.map-frame {
    position: relative;
    padding: 8px;
    border-radius: 18px;
    background: rgba(251, 247, 235, 0.78);
}

.map-frame::before {
    content: "";
    position: absolute;
    inset: 9px;

    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}

.map-mountain-deco {
    position: absolute;
    top: 200px;
    right: 170px;
    width: min(720px, 48vw);
    opacity: 0.58;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.map-bamboo-top {
    position: absolute;
    top: 0;
    right: -28px;
    width: min(270px, 20vw);
    opacity: 0.72;
    pointer-events: none;
    z-index: 2;
}

.map-bamboo-side {
    position: absolute;
    left: 0px;
    bottom: 0;
    max-width: 320px;
    /* width: min(250px, 18vw); */
    opacity: 0.7;
    pointer-events: none;
    z-index: 5;
}
.map-image-full {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* 优雅的地图图注免责说明 */
.map-disclaimer {
    font-size: 0.75rem;
    color: #8a917b; /* 优雅的低对比度卡其灰绿 */
    text-align: right; /* 大图右下方对齐，极具画册出版规范 */
    margin: 12px 8px 0 0; /* 距上方外框 12px，右对齐边缘微调 */
    letter-spacing: 0.04em;
    font-weight: 500;
}

@media (max-width: 992px) {
    .cp-col-bio {
        padding: 80px 20px 40px;
    }
    .map-section {
        padding: 66px 0 72px;
    }

    .map-intro {
        padding: 0 24px;
    }

    .map-intro h2,
    .f-title-block h2,
    .op-title-block h2,
    .it-title-block h2 {
        font-size: 2.2rem;
    }

    .map-container-wide {
        padding: 0 24px;
    }

    .map-mountain-deco {
        right: 20px;
        width: 72vw;
        opacity: 0.36;
    }

    .map-bamboo-top {
        width: 180px;
        right: -60px;
    }

    .map-bamboo-side {
        left: -116px;
        width: 190px;
    }
}

@media (max-width: 640px) {
    .map-label {
        min-width: 0;
        width: 100%;
        font-size: 0.9rem;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .map-intro h2,
    .f-title-block h2,
    .op-title-block h2,
    .it-title-block h2 {
        font-size: 1.7rem !important;
    }
    .cta-title-block{
        margin-bottom: 5px;
    }
    .map-lead br {
        display: none;
    }

    .map-frame {
        padding: 5px;
        border-radius: 12px;
    }

    .map-frame::before {
        inset: 6px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Habitat Section (About Sichuan)
   ========================================================================== */
.habitat-section {
    padding: 100px 0;
    background: #fbfbf8; /* Very subtle earthy tone */
    position: relative;
}

.habitat-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* --- Left: Text --- */
.habitat-text-block {
    flex: 0 0 45%;
}

.h-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 11px;
    min-width: 318px;
    border-bottom: 1px solid rgba(151, 123, 73, 0.45);
}

.h-eyebrow {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    letter-spacing: 0.18em;
    color: #4e5135;
}

.h-divider {
    color: #9d8a5a;
    line-height: 1;
}

.h-divider::before {
    content: "/";
}

.h-sub {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    color: #4e5135;
    letter-spacing: 0.08em;
    line-height: 1;
}

.h-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #2c3220;
    line-height: 1.4;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
}

.h-desc-wrap {
    border-left: 2px solid #e0e2d5;
    padding-left: 30px;
}

.h-desc {
    font-size: 1rem;
    color: #555;
    line-height: 2.2;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

.h-desc:last-child {
    margin-bottom: 0;
}

/* --- Right: Visual Collage (Creative Scattered Style) --- */
.habitat-visual-block {
    flex: 0 0 50%;
    position: relative;
    padding: 40px 0;
}

.hv-collage {
    position: relative;
    width: 100%;
    height: 580px;
    display: block;
}

.hv-img {
    position: absolute;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-radius: 2px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border: 10px solid #ffffff; /* Premium photo print border */
}

.hv-img:hover {
    transform: scale(1.05) rotate(0deg) translateY(-10px) !important;
    z-index: 10 !important;
    box-shadow: 0 30px 50px rgba(0,0,0,0.18);
}

/* Photo 1: Large Vertical Image (Main) */
.hv-img-main {
    width: 52%;
    height: 90%;
    top: 5%;
    right: 2%;
    z-index: 1;
    transform: rotate(2deg);
}

/* Photo 2: Landscape / Square (Bottom Left) */
.hv-img-sub1 {
    width: 55%;
    height: 50%;
    bottom: 5%;
    left: 0;
    z-index: 2;
    transform: rotate(-3deg);
}

/* Photo 3: Small Accent Photo (Top Center-Left) */
.hv-img-sub2 {
    width: 45%;
    height: 42%;
    top: 4%;
    left: 12%;
    z-index: 3;
    transform: rotate(4deg);
}

@media (max-width: 992px) {
    .habitat-container {
        flex-direction: column;
        gap: 36px;
        padding: 0 20px;
    }
    .habitat-text-block {
        flex: 0 0 100%;
        width: 100%;
    }
    .habitat-visual-block {
        flex: 0 0 100%;
        width: 100%;
        padding: 0; /* 折叠后将 visual 容器的 padding 归零，由 container-gap 统一控制垂直间距 */
    }
    .h-eyebrow-wrap {
        min-width: 0; /* 彻底移除撑开视口的致命最小宽度 */
        width: auto; /* 由内容自然撑开 */
        max-width: 100%;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap; /* 弹性容器不换行 */
        white-space: nowrap; /* 核心：绝对禁止文本折行 */
        gap: 8px; /* 适当减小内部图标和字间距 */
        padding-bottom: 8px;
        margin-bottom: 20px;
    }
    .h-eyebrow {
        font-size: 0.88rem; /* 适当缩减英文，适应窄屏 */
        letter-spacing: 0.12em;
    }
    .h-sub {
        font-size: 0.88rem; /* 适当缩减中文，适应窄屏 */
        letter-spacing: 0.05em;
    }
    .h-title {
        font-size: 1.75rem; /* 收缩大字号，使折行表现平滑 */
        margin-bottom: 28px;
        line-height: 1.4;
    }
    .h-desc-wrap {
        border-left: none;
        padding-left: 0;
    }
    .hv-collage {
        width: 100%;
        max-width: min(440px, 90vw); /* 限制大图最大宽度为 min 格式以提供小屏无感缩放 */
        height: auto; /* 清除硬编码的高度 */
        aspect-ratio: 4 / 3; /* 核心：使用黄金高宽比锁定，实现所有子图在小屏下等比例纯净缩放，绝不错乱 */
        margin: 0 auto;
    }
    .hv-img {
        border: 6px solid #ffffff !important; /* 精简小屏下的白边厚度 */
        box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* 稍微减淡多层重叠带来的阴影噪点 */
    }
}

/* 超窄屏手机深度调优 */
@media (max-width: 480px) {
    .h-title {
        font-size: 1.45rem; /* 进一步压低超小手机端的字号 */
        line-height: 1.45;
        margin-bottom: 20px;
    }
    .hv-img {
        border-width: 4px !important; /* 极窄设备白边降低到 4px */
    }
}

/* ==========================================================================
   Facilities Section
   ========================================================================== */
.facilities-section {
    padding: 120px 0 110px;
    background:
        radial-gradient(circle at 52% 12%, rgba(255, 255, 255, 0.76), transparent 34%),
        linear-gradient(180deg, #f8f4e9 0%, #f3ecd9 100%);
    position: relative;
    overflow: hidden;
}

.facilities-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(110, 95, 62, 0.04) 1px, transparent 1px);
    background-size: 7px 7px;
    opacity: 0.5;
    pointer-events: none;
}

.f-deco-bamboo,
.f-deco-paw {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.f-deco-bamboo-left {
    top: -44px;
    left: -30px;
    width: min(260px, 18vw);
    opacity: 0.58;
}

.f-deco-bamboo-right {
    top: -12px;
    right: -36px;
    width: min(230px, 16vw);
    opacity: 0.56;
}

.f-deco-paw {
    top: 148px;
    right: max(250px, calc((100vw - 1480px) / 2 + 220px));
    width: 158px;
    opacity: 0.34;
    z-index: 2;
    mix-blend-mode: multiply;
}

.facilities-container {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
}

.f-header {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.f-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.f-title-block h2 {
    margin: 0;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.f-grid {
    display: flex;
    gap: 52px;
    margin-bottom: 50px;
}

.f-card {
    flex: 1;
    position: relative;
    padding: 28px 28px 34px;
    background:
        linear-gradient(180deg, rgba(255, 252, 244, 0.94), rgba(250, 246, 235, 0.96));
    border: 1px solid rgba(215, 205, 179, 0.72);
    border-radius: 4px;
    box-shadow:
        0 20px 42px rgba(74, 66, 44, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Image Wrapper with elegant aspect ratio */
.f-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
    margin-bottom: 30px;
    position: relative;
    border-radius: 2px;
    background: #fbfaf2;
    padding: 14px 14px 18px;
    box-shadow: 0 13px 24px rgba(74, 66, 44, 0.12);
}

.f-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.f-card:hover .f-img {
    transform: scale(1.05);
}

/* Base Info Typography */
.f-info {
    text-align: center;
    position: relative;
    z-index: 2;
    padding-top: 2px;
}

.f-name {
    font-family: var(--font-serif);
    font-size: 1.58rem;
    color: #2c3220;
    margin: 0 auto 8px;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    line-height: 1.35;
    width: fit-content;
    max-width: 100%;
    font-weight: 500;
    white-space: nowrap;
}

.f-name img {
    width: auto;
    height: 46px;
    /* opacity: 0.7; */
    flex-shrink: 0;
    position: absolute;
    top: -10px;
    left: -45px;
    object-fit: contain;
}

.f-en {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: #78805f;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-serif);
}

.f-desc {
    max-width: 500px;
    margin: 20px auto 0 !important;
    color: #555 !important;
    font-size: 0.96rem;
    line-height: 1.95 !important;
    letter-spacing: 0.05em;
    margin-top: 20px !important;
    font-weight: 400;
}

.f-visit-badge {
    position: absolute;
    top: -28px;
    left: -16px;
    width: 92px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 8px 12px rgba(49, 64, 42, 0.18));
}

.f-card-pin {
    position: absolute;
    top: -22px;
    right: 24px;
    width: 30px;
    z-index: 4;
    transform: rotate(4deg);
    opacity: 0.82;
}

.f-card-tape {
    position: absolute;
    top: -22px;
    right: -18px;
    width: 116px;
    z-index: 4;
    transform: rotate(9deg);
    opacity: 0.9;
}

/* Note - Modern rounded info bar */
.f-note-wrap {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    position: relative;
    width: 100%;
}

.f-note-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 24px;
    background-color: #f5f2ea; /* 柔和淡雅的卡其米色背景 */
    border: 1px solid rgba(184, 151, 91, 0.25); /* 柔和边框 */
    border-radius: 12px; /* 圆角矩形背景框 */
    position: relative;
    transition: all 0.3s ease;
    width: 100%; /* 在小屏/手机端强制撑满宽度 */
    max-width: 820px; /* 大屏下最大宽度限宽，提供高级感比例 */
    box-sizing: border-box;
}

.f-note-inner:hover {
    border-color: rgba(120, 128, 71, 0.4);
    background-color: #ebe5d8;
}

/* 绿色圆形带白色 i 的图标 */
.f-note-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #274d32; /* 森林深绿色背景 */
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-serif); /* Serif 字体让 i 的外形优雅 */
    border-radius: 50%; /* 圆形 */
    flex-shrink: 0;
    line-height: 1;
    padding: 0 0 1px 0;
}

.f-note {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #3f462b; /* 优雅的墨绿/橄榄绿色 */
    letter-spacing: 0.08em;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .facilities-section {
        padding: 88px 0 82px;
    }

    .f-deco-bamboo-left,
    .f-deco-bamboo-right {
        width: 150px;
        opacity: 0.32;
    }

    .f-deco-paw {
        right: 28px;
        top: 145px;
        width: 100px;
        opacity: 0.2;
    }

    .f-grid {
        flex-direction: column;
        gap: 22px;
        margin-bottom: 20px;
    }

    .f-card {
        padding: 22px 18px 28px;
    }

    .f-visit-badge {
        width: 76px;
        top: -22px;
        left: -10px;
    }

    .f-card-tape {
        width: 82px;
        right: -15px;
        top: -12px;
    }

    .f-card-pin {
        width: 18px;
        right: 18px;
        top: -12px;
    }

    .f-name {
        font-size: 1.28rem;
        gap: 8px;
        white-space: normal;
    }

    .f-name img {
        height: 34px;
        left: -24px;
    }

    .f-desc {
        font-size: 0.92rem;
        line-height: 1.75;
    }
    .facilities-container{
        padding: 0 20px;
    }
}

/* ==========================================================================
   Optional Program Section
   ========================================================================== */
.optional-section {
    padding: 78px 0 92px;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(180deg, #f8f5ed 0%, #f5efe2 100%);
    position: relative;
    overflow: hidden;
}

.optional-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(110, 95, 62, 0.035) 1px, transparent 1px);
    background-size: 7px 7px;
    opacity: 0.42;
    pointer-events: none;
}

.optional-container {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
}

.op-header {
    text-align: center;
    margin-bottom: 42px;
}

.op-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.op-title-block h2 {
    margin: 0;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.op-subtitle {
    margin: 0;
    color: #4c5043;
    font-family: var(--font-serif);
    font-size: clamp(0.92rem, 1.15vw, 1.14rem);
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.op-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.02fr);
    gap: 30px;
    align-items: stretch;
}

.op-feature-media {
    position: relative;
    min-width: 0;
}

.op-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    aspect-ratio: 1.09 / 1;
    background: #e6dfcd;
    padding: 3px;
    border: 1px solid rgba(201, 169, 92, 0.68);
    box-shadow:
        0 18px 38px rgba(84, 74, 44, 0.12),
        0 0 0 1px rgba(255, 248, 232, 0.72) inset;
}

.op-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    border-radius: 18px;
}

.op-feature-copy {
    min-width: 0;
    position: relative;
    padding: 38px 70px 50px 40px;
    background: rgba(255, 254, 250, 0.15);
    background-size: 190px auto, auto;
    border: 1px solid rgba(214, 188, 123, 0.62);
    border-radius: 22px;
    box-shadow:
        0 16px 34px rgba(84, 74, 44, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    position: relative;
}
.op-feature-copy::after{
    content: "";
    display: block;
    position: absolute;
    width: 450px;
    height: 230px;
    right: -60px;
    bottom: -20px;
    background: url(img/leaf_bg.png) no-repeat right bottom;
    background-size: contain;
}
.op-feature-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 7px 18px 7px 12px;
    background: linear-gradient(180deg, rgba(245, 240, 223, 0.98), rgba(238, 232, 214, 0.92));

    border-radius: 999px;
}

.op-feature-label img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.op-feature-label span {
    color: #526238;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.op-feature-copy h3 {
    margin: 0 0 24px;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size:1.5rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.op-feature-copy h3::before {
    content: "■";
    display: inline-block;
    margin-right: 10px;
    color: #4b5d2f;
    font-size: 0.85em;
    transform: translateY(-1px);
}

.op-feature-copy p {
    margin: 0 0 15px;
    color: #3f4238;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.02em;
}

.op-feature-copy p:last-child {
    margin-bottom: 0;
}

.op-feature-copy p:first-of-type {
    color: #596043;
    font-weight: 400;
}

.op-note {
    width: min(940px, 78vw);
    min-height: 62px;
    margin: 54px auto 0;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(232, 229, 207, 0.46);
    border: 1px solid rgba(178, 171, 137, 0.42);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.op-note i {
    color: #6b793f;
    font-size: 1.45rem;
    flex-shrink: 0;
}

.op-note p {
    margin: 0;
    color: #4d4f43;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    line-height: 1.6;
}

/* ===========================================================================
   Kaedehama Birthday Feature
   =========================================================================== */
/* ===========================================================================
   Kaedehama Birthday Feature
   =========================================================================== */
.kaedehama-section {
    position: relative;
    padding: 100px 0 110px;
    overflow: hidden;
    background: #F5EFE3;
}

.kaedehama-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 80%, rgba(205, 179, 114, 0.12), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(113, 133, 85, 0.1), transparent 28%);
    pointer-events: none;
}

.kaedehama-container {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 50px;
    background: #fff;
}

.kh-decor-bamboo {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.kh-decor-left {
    top: 0px;
    left: 0px;
    width: 320px;
}

.kh-decor-right {
    top: 20px;
    right: 0px;
    width: 280px;
}



/* 第1のカード：ストーリー紹介 */
.kh-story-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin: 0 auto 48px;
    background: linear-gradient(135deg, #ffffff 0%, #fcfbf7 100%);
    border: 1px solid #e8e3d5;
    border-radius: 16px;
    padding: 38px 42px;
    box-shadow: 0 10px 30px rgba(63, 70, 43, 0.05);
}

.kh-story-visual {
    display: flex;
    align-items: center;
}

.kh-frame-outer {
    width: 100%;
    border: 1px solid #e3decb;
    padding: 8px;
    background: #fbfbf9;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.kh-frame-inner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    aspect-ratio: 4 / 3;
}

.kh-frame-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.kh-story-card:hover .kh-frame-inner img {
    transform: scale(1.04);
}

.kh-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kh-story-tag-wrap {
    margin-bottom: 10px;
}

.kh-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #a07737;
    letter-spacing: 0.1em;
}

.kh-story-heading {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    color: #2c3220;
    line-height: 1.38;
    margin: 0 0 16px;
    font-weight: 700;
}

.kh-story-text {
    font-size: 0.95rem;
    color: #4f5442;
    line-height: 1.88;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.kh-story-text:last-of-type {
    margin-bottom: 20px;
}

.kh-story-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kh-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #3f462b;
    background: rgba(244, 240, 228, 0.85);
    border: 1px solid rgba(160, 119, 55, 0.35);
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 600;
}

/* 第2のカード：誕生日お祝い企劃 */
.kh-birthday-card {
    padding: 15px;
    position: relative;
    display: flex;
    margin: 0 auto;
    background: #fbf5edb0;
    border: 1px solid #e8e3d5;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(71, 63, 42, 0.04);
    overflow: hidden;
}

.kh-birthday-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(189, 162, 96, 0.25);
    border-radius: 14px;
    pointer-events: none;
}

.kh-birthday-left-badge {
    position: relative;
    width: 290px;
    min-height: 290px;
    background: url('img/birthday_icon_bg.png') no-repeat center center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px 0 0 18px;
    flex-shrink: 0;
    padding-bottom: 40px;
}

.kh-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8c7336;
    text-align: center;
    padding-left: 10px;
}

.kh-date-num {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    /* font-weight: 700; */
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kh-date-num span {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 1px;
}

.kh-date-label {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

.kh-badge-leaf {
    margin-top: 12px;
    opacity: 0.85;
}

.kh-svg-bamboo-leaf {
    width: 22px;
    height: 22px;
    color: #bda260;
    display: block;
}

.kh-birthday-right-content {
    flex: 1;
    padding: 46px 52px 46px 65px;
    position: relative;
    background: transparent url('img/birthday_right_bg.png') no-repeat right bottom;
    background-size: 380px auto;
    border-radius: 0 18px 18px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    z-index: 1;
}

.kh-birthday-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    width: 100%;
}

.kh-paw-icon {
    font-size: 42px;
    color: #dfcdad;
    position: absolute;
    left: 8px;
    top: 88px;
    transform: rotate(-12deg);
}

.kh-birthday-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #7d692e;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.kh-birthday-text {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.82;
    color: #4a4d41;
    margin: 0 0 10px 0;
    max-width: 65%;
}

.kh-dots-divider {
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    margin: 13px 0 15px;
    width: 100%;
}

.kh-dots-divider span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c0a665;
    opacity: 0.45;
}

.kh-highlight-msg {
    font-size: 0.9rem;
    font-weight: 600;
    color: #5c634a;
    line-height: 1.85;
    max-width: 85%;
    margin: 0;
}

/* ===========================================================================
   Kaedehama Responsive Styles
   =========================================================================== */
@media (max-width: 992px) {
    .kaedehama-section {
        padding: 80px 0 90px;
    }

    .kaedehama-container {
        padding: 0 24px;
    }

    .kh-main-title {
        font-size: 2rem;
    }

    .kh-story-card {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px;
        margin-bottom: 36px;
    }

    .kh-frame-outer {
        max-width: 520px;
        margin: 0 auto;
    }

    .kh-birthday-card {
        flex-direction: column;
    }

    .kh-birthday-left-badge {
        width: 100%;
        min-height: 220px;
        border-radius: 18px 18px 0 0;
    }

    .kh-badge-content {
        padding-left: 0;

    }

    .kh-paw-icon {
        left: 20px;
        top: 38px;
        font-size: 32px;
    }

    .kh-birthday-right-content {
        border-radius: 0 0 18px 18px;
        padding: 36px 32px 36px 64px;
        background-size: 260px auto;
    }

    .kh-birthday-text {
        max-width: 100%;
    }

    .kh-highlight-msg {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .kaedehama-section {
        padding: 58px 0 64px;
    }

    .kaedehama-container {
        padding: 20px 14px;
        margin: 10px;
    }

    .kh-decor-left {
        top: -34px;
        left: -92px;
        width: 165px;
        opacity: 0.25;
        z-index: 0;
    }

    .kh-decor-right {
        top: 12px;
        right: -94px;
        width: 145px;
        opacity: 0.22;
        z-index: 0;
    }



    .kh-story-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 14px 12px 18px;
        margin-bottom: 26px;
        border-radius: 10px;
    }

    .kh-story-visual {
        order: -1;
    }

    .kh-frame-outer {
        border-radius: 10px;
        padding: 6px;
    }

    .kh-story-paragraph {
        gap: 12px;
        margin-bottom: 20px;
    }

    .kh-story-paragraph p {
        margin: 0;
        padding-bottom: 17px;
        font-size: 0.88rem;
        line-height: 1.85;
        letter-spacing: 0.025em;
    }

    .kh-birthday-card {
        border-radius: 14px;
    }

    .kh-birthday-card::after {
        inset: 6px;
        border-radius: 10px;
    }

    .kh-birthday-left-badge {
        border-radius: 14px 14px 0 0;
    }

    .kh-date-num {
        font-size: 2.18rem;
    }

    .kh-date-label {
        font-size: 0.92rem;
    }

    .kh-paw-icon {
        left: 12px;
        top: 24px;
        font-size: 22px;
    }

    .kh-birthday-right-content {
        border-radius: 0 0 14px 14px;
        padding: 26px 18px 28px 28px;
        background-size: 150px auto;
    }

    .kh-birthday-title {
        font-size: 1.15rem;
        line-height: 1.55;
        margin-bottom: 13px;
    }

    .kh-birthday-text {
        font-size: 0.86rem;
        line-height: 1.9;
        letter-spacing: 0.025em;
    }

    .kh-dots-divider {
        margin: 14px 0 16px;
    }

    .kh-highlight-msg {
        font-size: 0.88rem;
        line-height: 1.9;
    }
}

@media (max-width: 992px) {
    .optional-container {
        padding: 0 28px;
    }

    .op-feature {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 760px;
        margin: 0 auto;
    }

    .op-feature-copy {
        padding: 32px 28px 42px;
        background-size: 150px auto, auto;
    }

    .op-feature-copy::after {
        right: 38px;
        width: 180px;
    }

    .op-feature-media {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .op-note {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .f-header {
        margin-bottom: 30px;
    }
    .f-title-block h2{
        font-size: 1.5rem;
    }
    .f-note-wrap{
        margin-top: 20px;
        display: block;
    }
    .optional-section {
        padding: 78px 0 88px;
        padding-bottom: 0 !important;
    }

    .optional-container {
        padding: 0 18px;
    }

    .op-header {
        margin-bottom: 30px;
    }

    .op-title-block {
        margin-bottom: 16px;
    }

    .op-title-block h2 {
        font-size: 2rem;
    }

    .op-subtitle {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .op-feature {
        gap: 18px;
    }

    .op-feature-media {
        max-width: 360px;
    }

    .op-feature-image {
        aspect-ratio: 1.02 / 1;
        border-radius: 18px;
        padding: 3px;
    }

    .op-feature-copy {
        padding: 24px 20px 34px;
        border-radius: 18px;
        background-size: 118px auto, auto;
    }

    .op-feature-copy::after {
        right: 26px;
        bottom: 18px;
        width: 112px;
        height: 20px;
    }

    .op-feature-label {
        gap: 10px;
        margin-bottom: 14px;
        padding: 8px 14px 8px 10px;
    }

    .op-feature-label img {
        width: 28px;
        height: 28px;
    }

    .op-feature-label span {
        font-size: 0.84rem;
    }

    .op-feature-copy h3 {
        margin-bottom: 14px;
        font-size: 1.42rem;
        line-height: 1.4;
    }

    .op-feature-copy p {
        margin-bottom: 18px;
        font-size: 0.92rem;
        line-height: 1.82;
    }

    .op-note {
        align-items: flex-start;
        gap: 12px;
        padding: 18px 18px;
        border-radius: 16px;
    }

    .op-note p {
        font-size: 0.84rem;
        line-height: 1.7;
    }
}

/* ==========================================================================
   Itinerary Section (Vertical Timeline)
   ========================================================================== */
.itinerary-section {
    padding: 140px 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.82), transparent 34%),
        linear-gradient(180deg, #f9f6ee 0%, #f5f0e5 100%);
    position: relative;
}

.itinerary-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.it-header {
    text-align: center;
    margin-bottom: 80px;
}

.it-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.it-title-block h2 {
    margin: 0;
    color: #2c3220;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.it-lead {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: #8c7355; /* 温和优雅的古铜金色 */
    margin: 0;
    letter-spacing: 0.06em;
    line-height: 1.6;
}

/* Timeline Layout */
.timeline {
    position: relative;
}

.tl-day {
    display: flex;
    flex-direction: column;
    margin-bottom: 70px;
    position: relative;
}

.tl-day:last-child {
    margin-bottom: 0;
}

/* Full-width Banner Header: Meta (Premium Ticket Style) */
.tl-meta {
    background: url(img/t_panda.png) no-repeat right 30px bottom -10px, linear-gradient(135deg, #fdfaf4 0%, #fdfaf4 100%);
    background-size: auto 95%, auto;
    padding: 20px 40px;
    border-radius: 8px;
    border: 1px solid rgba(184, 151, 91, 0.3);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(184, 151, 91, 0.1);
    position: relative;
    z-index: 2;
    margin-bottom: -20px; /* Overlap with content card */
    margin-left: 20px;
    margin-right: 20px;
    overflow: hidden;
    /* Ticket Cutout Mask */
    -webkit-mask-image:
        radial-gradient(circle at 0 50%, transparent 12px, black 13px),
        radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle at 0 50%, transparent 12px, black 13px),
        radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
    mask-composite: intersect;
}

/* Ticket Perforation Line */
/* 左侧圆弧缺口边框（越界裁剪出内凹金色边框） */
.tl-meta::before {
    content: '';
    position: absolute;
    left: -13px; /* 圆心对准卡片左边缘，露出一半圆弧 */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(184, 151, 91, 0.35); /* 统一的金黄色细边框 */
    background: transparent;
    z-index: 5;
    pointer-events: none;
}

/* 右侧圆弧缺口边框（越界裁剪出内凹金色边框） */
.tl-meta::after {
    content: '';
    position: absolute;
    right: -13px; /* 圆心对准卡片右边缘，露出一半圆弧 */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(184, 151, 91, 0.35); /* 统一的金黄色细边框 */
    background: transparent;
    z-index: 5;
    pointer-events: none;
}

/* 实体大数字背景水印 */
.tl-watermark {
    display: none;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-serif);
    font-size: 140px;
    font-weight: 700;
    color: rgba(184, 151, 91, 0.05);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* 实体行程单分割虚线 */
.tl-split-line {
    flex-shrink: 0;
    width: 1px;
    height: 40px;
    border-left: 2px dashed rgba(184, 151, 91, 0.3);
    margin: 0 5px;
    align-self: center;
    z-index: 1;
}

.tl-day-num {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #ffffff;
    background: linear-gradient(135deg, #c7a972 0%, #a88544 100%);
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    font-weight: 600;
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 10px rgba(184, 151, 91, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.tl-date {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: #2c3220;
    line-height: 1;
    margin: 0;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
}

.tl-date span {
    font-size: 1.05rem;
    margin-left: 6px;
    color: #788047;
    font-weight: 500;
    font-family: var(--font-sans);
}

.tl-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(91, 104, 70, 0.08);
    border: 1px solid rgba(91, 104, 70, 0.25);
    color: #4b5435;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 2;
    position: relative;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(80, 85, 60, 0.06);
    flex-shrink: 0;
}

.tl-title i {
    font-size: 0.85rem;
    color: #5b6846;
}

.tl-title-group {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
}

.tl-title-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(91, 104, 70, 0.06);
    border: 1px solid rgba(91, 104, 70, 0.2);
    padding: 2px 10px 2px 5px;
    border-radius: 14px;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5435;
    white-space: nowrap;
}

.tl-title-tag .tag-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
}

.tl-title-tag.tag-day .tag-label {
    background: #788047;
    color: #ffffff;
}

.tl-title-tag.tag-night .tag-label {
    background: #c7a972;
    color: #ffffff;
}

.tl-route {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-right: 45px;
    margin-left: auto;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
}

.r-node {
    background: rgba(255, 255, 255, 0.7);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(120, 128, 71, 0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    font-size: 0.95rem;
    color: #4a523a;
    font-weight: 500;
    line-height: 1;
}

.r-icon {
    color: #b8975b; /* Gold */
    font-size: 0.9rem;
    opacity: 0.8;
}

.r-icon-stay {
    color: #788047; /* Brand green */
    font-size: 1rem;
    margin-right: -4px;
}

/* Right Column: Content */
.tl-content {
    background: #ffffff;
    border: 1px solid rgba(140, 147, 119, 0.15);
    border-radius: 8px;
    padding: 70px 50px 45px 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    position: relative;
    z-index: 1;
}

.tl-events {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* The vertical line connecting events */
.tl-events::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: -10px;
    left: 20px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(120, 128, 71, 0.6) 0%, rgba(120, 128, 71, 0.1) 100%);
    border-radius: 2px;
}

/* Absolute Alignment using CSS Grid Baseline */
.tl-events li {
    display: grid;
    grid-template-columns: 42px 95px 1fr;
    gap: 15px;
    align-items: baseline; /* Perfect baseline text alignment */
    position: relative;
    margin-bottom: 38px;
}

.tl-events li:last-child {
    margin-bottom: 0;
}

/* The dot on the timeline */
.tl-events li::before {
    content: '';
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #788047;
    z-index: 2;
    justify-self: center; /* Center in the 42px column */
    /* Nudge down slightly to visually center with text cap-height */
    transform: translateY(1px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.tl-events li:hover::before {
    background: #788047;
    box-shadow: 0 0 0 6px rgba(120, 128, 71, 0.15);
    transform: translateY(1px) scale(1.1);
}

.event-highlight::before {
    background: #788047 !important;
    border-color: #788047 !important;
    box-shadow: 0 0 0 6px rgba(120, 128, 71, 0.25);
}

.tl-time {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--deep-forest);
    font-weight: 700;
    padding: 0;
}

.tl-desc {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
}

.tl-desc strong {
    color: var(--deep-forest);
    font-weight: 700;
}

.desc-small {
    font-size: 0.88rem;
    color: #666;
    display: block;
    margin-top: 6px;
    line-height: 1.7;
}

.desc-transport {
    font-size: 0.85rem;
    color: #929982;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-top: 5px;
    font-weight: 500;
}

/* Badges (Meals & Hotels) */
.tl-badges {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px dashed rgba(140, 147, 119, 0.25);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tl-badge {
    font-size: 0.85rem;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.badge-meal {
    background: rgba(140, 147, 119, 0.08);
    color: #5c6646;
}

.badge-hotel {
    background: rgba(184, 151, 91, 0.12);
    color: #8c6f37;
}

.itinerary-disclaimer {
    margin: 32px 0px 0;
    padding: 18px 24px;
    border-left: 3px solid #788047;
    background: rgba(120, 128, 71, 0.08);
    color: #4a523a;
    font-size: 0.92rem;
    line-height: 1.8;
}

.itinerary-disclaimer p {
    margin: 0;
}

/* Bottom Notes Section - Editorial Boarding Pass Design */
.it-notes {
    margin-top: 80px;
    background: linear-gradient(135deg, #fdfaf4 0%, #f4f6ef 100%);
    padding: 50px 60px;
    border-radius: 6px;
    border: 1px solid rgba(184, 151, 91, 0.25); /* 淡淡的金色外框 */
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(80, 85, 60, 0.03),
        0 15px 40px rgba(80, 85, 60, 0.06);
}

/* 纪念邮戳水印 */
.it-notes::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 40px;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='54' fill='none' stroke='%23788047' stroke-width='1.5' stroke-dasharray='4,2'/%3E%3Ccircle cx='60' cy='60' r='46' fill='none' stroke='%23788047' stroke-width='1'/%3E%3Ctext x='60' y='32' font-family='Georgia, serif' font-size='7' fill='%23788047' text-anchor='middle' letter-spacing='1'%3ESICHUAN TOUR%3C/text%3E%3Ctext x='60' y='94' font-family='Georgia, serif' font-size='7' fill='%23788047' text-anchor='middle' letter-spacing='1'%3E★ DEPARTURE ★%3C/text%3E%3Cline x1='22' y1='60' x2='98' y2='60' stroke='%23788047' stroke-width='1'/%3E%3Ctext x='60' y='52' font-family='Georgia, serif' font-size='11' font-weight='bold' fill='%23788047' text-anchor='middle'%3E2026%3C/text%3E%3Ctext x='60' y='74' font-family='Georgia, serif' font-size='7' fill='%23788047' text-anchor='middle' letter-spacing='1'%3EPANDA BASE%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.18;
    transform: rotate(14deg);
    pointer-events: none;
}

/* 顶部标题 */
.it-notes-header {
    margin-bottom: 40px;
    position: relative;
    border-bottom: 1px solid rgba(184, 151, 91, 0.2);
    padding-bottom: 15px;
}

.it-notes-eyebrow {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: #b8975b;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.it-notes-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #3f462b;
    margin: 0;
    letter-spacing: 0.05em;
}

/* 两栏网格 */
.it-notes-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
}

/* 左侧列：旅行基本规格 */
.it-notes-col-specs {
    display: flex;
    flex-direction: column;
}

.it-notes-sub-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #788047;
    margin: 0 0 20px 0;
    padding-left: 10px;
    border-left: 3px solid #788047;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.spec-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(120, 128, 71, 0.15);
}

.spec-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.spec-label {
    font-size: 0.75rem;
    color: #8c9377;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.spec-val {
    font-size: 0.95rem;
    color: #3f462b;
    font-weight: 500;
    line-height: 1.5;
}

.spec-item-warning .spec-val {
    color: #8c7355; /* 温和的警告古铜色 */
    font-size: 0.88rem;
    line-height: 1.6;
}

/* 右侧列：住宿安排 timeline */
.it-notes-col-hotels {
    display: flex;
    flex-direction: column;
    border-left: 1px dashed rgba(184, 151, 91, 0.35); /* 模拟票根撕线 */
    padding-left: 45px;
}

.hotel-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

/* 垂直连线 */
.hotel-timeline::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: rgba(120, 128, 71, 0.15);
}

.hotel-item {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
}

.hotel-day-badge {
    flex-shrink: 0;
    width: 90px;
    padding: 6px 0;
    background: #F2F0E5;
    color: #b8975b;
    border: 1px solid rgba(184, 151, 91, 0.25);
    border-radius: 4px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 2;
}

.hotel-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hotel-city {
    flex-shrink: 0;
    background: #788047;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 2px;
    line-height: 1;
    letter-spacing: 0.05em;
}

.hotel-name {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #3f462b;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

.hotel-name span {
    font-size: 0.8rem;
    color: #7c8567;
    font-weight: 400;
    display: inline-block;
    margin-left: 6px;
}

/* Responsive */
@media (max-width: 992px) {
    .tl-meta {
        margin-left: 0;
        margin-right: 0;
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
        -webkit-mask-image: none; /* Disable cutout mask on smaller screens */
        mask-image: none;
    }
    .tl-meta::before,
    .tl-meta::after {
        display: none;
    }
    .tl-content {
        border-radius: 0 0 8px 8px;
        padding: 40px 20px;
        border-top: none;
    }
}

@media (max-width: 576px) {
    .itinerary-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .tl-day {
        margin-bottom: 20px;
    }
    .tl-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        background: url(img/t_panda.png) no-repeat right 10px bottom -10px, linear-gradient(135deg, #fdfaf4 0%, #fdfaf4 100%);
        background-size: auto 75%, auto;
    }
    .tl-split-line {
        display: none; /* 手机端隐藏虚线 */
    }
    .tl-title {
        font-size: 1rem;
        white-space: normal;
        margin-top: -5px;
    }
    .tl-watermark {
        font-size: 100px;
        right: 10px;
    }
    .tl-route {
        margin-left: 0;
        text-align: left;
        margin-right: 0;
        gap: 5px;

       justify-content: flex-start;
    }
    .tl-events li {
        grid-template-columns: 35px 1fr;
        row-gap: 5px;
    }
    .tl-events::before {
        left: 16px;
    }
    .tl-events li::before {
        grid-row: 1 / 3;
    }
    .tl-time {
        grid-column: 2;
    }
    .tl-desc {
        grid-column: 2;
    }
}

/* ==========================================================================
   手机端所有 Section 间距与 cp-col-theme 统合设计
   ========================================================================== */
@media (max-width: 768px) {
    .message-section,
    .chairman-section,
    .map-section,
    .habitat-section,
    .facilities-section,
    .optional-section,
    .itinerary-section {
        padding: 60px 0 !important; /* 统合全站手机端 Section 上下间距为黄金 60px，形成统一舒适节奏 */
    }
    .optional-section {
        padding: 78px 0 88px;
        padding-bottom: 0 !important;
    }
    /* 解决 cp-col-theme 会长特殊课题在手机端紧贴无间距的问题 */
    .cp-col-theme {
        margin-top: 50px !important; /* 在会长介绍卡片与下方 SPECIAL THEME 之间强行留出 50px 的呼吸空间 */
    }

    /* 强行统一手机端下会长板块的左右安全间距为 24px，解决 SPECIAL THEME 等元素两边顶格贴边的问题 */
    .chairman-container-wide {
        padding: 0 20px !important;
        box-sizing: border-box;
    }

    /* ==========================================
       it-notes 提示栏手机端兼容性重构
       ========================================== */
    .it-notes {
        padding: 32px 20px !important; /* 缩减容器 padding，腾出更多文本视口 */
        margin-top: 50px;
        border-radius: 8px;
    }

    .it-notes::after {
        display: none !important; /* 隐藏大邮戳，防止文字重叠干扰阅读 */
    }

    .it-notes-header {
        margin-bottom: 24px;
        padding-bottom: 12px;
    }

    .it-notes-title {
        font-size: 1.2rem; /* 稍微缩减标题字号，更显精致 */
    }

    .it-notes-grid {
        grid-template-columns: 1fr; /* 转换为单列布局，字不再被挤扁 */
        gap: 36px;
    }

    .it-notes-col-hotels {
        border-left: none; /* 移除折行后不伦不类的左侧票根撕线 */
        padding-left: 0;
        margin-top: 10px;
    }
}

/* 针对超窄屏手机，重塑酒店 timeline 的对齐方式以防挤压 */
@media (max-width: 480px) {
    .hotel-timeline::before {
        display: none !important; /* 窄屏隐藏垂直轴线 */
    }

    .hotel-item {
        flex-direction: column !important; /* 弹性盒子改为垂直两行 */
        align-items: flex-start !important;
        gap: 8px !important;
        padding-left: 14px;
        border-left: 2px solid rgba(184, 151, 91, 0.3); /* 改用左侧精致垂直金线引导，极具设计感 */
    }

    .hotel-day-badge {
        width: auto !important; /* 去除 90px 限制，改为紧凑自适应小标签 */
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
    }

    .hotel-details {
        gap: 8px !important;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .tour-features-container { padding: 0 40px; }
}
@media (max-width: 900px) {
    .tour-features-grid { grid-template-columns: 1fr; }
    .tf-wide { grid-column: span 1; }
    .tour-features-container {         padding: 0 20px;
        margin: 0 0 20px;
        width: 100%; }
}
@media (max-width: 768px) {
    .tf-section-title {
        font-size: 1.3rem;
        gap: 10px;
        margin-bottom: 24px;
    }
    .tf-section-title::before,
    .tf-section-title::after {
        width: 30px;
        flex-shrink: 1;
    }
    .tf-title-text {
        white-space: nowrap;
    }
    .tf-big-num {
        font-size: 2rem;
    }
    .tf-card {
        padding: 20px 16px;
        gap: 12px;
    }
    .tf-card-header {
        gap: 12px;
    }
    .tf-icon-wrap {
        width: 44px;
        height: 44px;
    }
    .tf-icon-wrap i {
        font-size: 1.15rem;
    }
    .tf-card-header h3 {
        font-size: 1.05rem;
    }
    .tf-desc {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .tf-num-watermark {
        font-size: 5rem;
        top: -5px;
        right: 8px;
    }
}