/* roulang page: index */
:root {
            --ink: #1C1B18;
            --ink-soft: #2A2620;
            --ink-light: #3D3832;
            --gold: #A88648;
            --gold-light: #C4A163;
            --paper: #F4F0E9;
            --surface: #FFFFFF;
            --text-main: #2A2620;
            --text-muted: #6F675B;
            --line: #DCD2C0;
            --cinnabar: #9E3E2A;
            --radius: 2px;
            --shadow-card: 0 1px 2px rgba(28, 24, 20, .04);
            --shadow-hover: 0 12px 30px rgba(28, 24, 20, .08);
            --transition: all .3s ease;
            --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
            --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            overflow-x: hidden;
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--text-main);
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.8;
            padding-top: 76px;
            -webkit-font-smoothing: antialiased;
        }

        body.modal-open {
            padding-right: 0 !important;
        }

        a {
            color: var(--ink-soft);
            text-decoration: none;
            transition: var(--transition);
        }

        a:hover {
            color: var(--gold);
        }

        img {
            max-width: 100%;
            height: auto;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-serif);
            color: var(--ink);
            font-weight: 600;
            margin: 0 0 .5rem;
        }

        p {
            margin-top: 0;
        }

        .container-xl {
            max-width: 1200px;
            padding-left: 24px;
            padding-right: 24px;
            margin-left: auto;
            margin-right: auto;
        }

        @media (max-width: 575.98px) {
            .container-xl {
                padding-left: 18px;
                padding-right: 18px;
            }
        }

        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            height: 76px;
            background: rgba(244, 240, 233, .94);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(220, 210, 192, .7);
            transition: box-shadow .25s ease, background .25s ease;
        }

        .site-header.is-scrolled {
            background: rgba(244, 240, 233, .98);
            box-shadow: 0 1px 12px rgba(28, 24, 20, .06);
        }

        .header-inner {
            position: relative;
            max-width: 1340px;
            margin: 0 auto;
            height: 76px;
            padding: 0 24px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
        }

        .desktop-nav {
            display: flex;
        }

        .desktop-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .desktop-nav-left {
            justify-content: flex-start;
        }

        .desktop-nav-right {
            justify-content: flex-end;
        }

        .desktop-nav .nav-link {
            position: relative;
            display: inline-block;
            padding: 8px 0;
            color: var(--text-main);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .02em;
            background: none;
            border: 0;
        }

        .desktop-nav .nav-link:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--gold);
            transition: width .25s ease;
        }

        .desktop-nav .nav-link:hover,
        .desktop-nav .nav-link.active {
            color: var(--ink);
        }

        .desktop-nav .nav-link:hover:after,
        .desktop-nav .nav-link.active:after {
            width: 100%;
        }

        .header-brand {
            text-align: center;
            padding: 0 18px;
        }

        .brand-link {
            display: inline-flex;
            align-items: baseline;
            font-family: var(--font-serif);
            font-size: 21px;
            font-weight: 700;
            letter-spacing: .06em;
            color: var(--ink);
            white-space: nowrap;
        }

        .brand-link .brand-strong {
            color: var(--ink);
            font-weight: 700;
            font-size: 27px;
        }

        .brand-link:hover {
            color: var(--ink);
        }

        .brand-link .brand-strong {
            color: var(--ink);
            font-weight: 700;
            font-size: 27px;
        }

        .brand-link .brand-sub {
            font-weight: 500;
            font-size: 17px;
            letter-spacing: .14em;
            margin-left: 4px;
            color: var(--ink-soft);
        }

        .desktop-nav .btn {
            margin-left: 12px;
            padding: 9px 22px;
            font-size: 14px;
            line-height: 1.6;
            height: auto;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: var(--radius);
            font-weight: 500;
            border: 1px solid transparent;
            transition: var(--transition);
            cursor: pointer;
        }

        .btn-solid {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink);
            padding: 12px 26px;
            height: 48px;
            font-size: 16px;
        }

        .btn-solid:hover {
            background: var(--gold);
            color: #fff;
            border-color: var(--gold);
        }

        .btn-ghost {
            background: transparent;
            color: var(--ink);
            border-color: var(--ink);
            padding: 12px 26px;
            height: 48px;
            font-size: 16px;
        }

        .btn-ghost:hover {
            background: var(--surface);
            color: var(--gold);
            border-color: var(--gold);
        }

        .btn-narrow {
            padding: 8px 18px;
            height: auto;
            font-size: 14px;
        }

        .btn-light {
            background: #fff;
            color: var(--ink);
            border-color: #fff;
            padding: 12px 26px;
            height: 48px;
            font-size: 16px;
        }

        .btn-light:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
        }

        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            background: transparent;
            border-radius: var(--radius);
            align-items: center;
            justify-content: center;
            color: var(--ink);
            font-size: 22px;
            line-height: 1;
            transition: var(--transition);
        }

        .mobile-toggle:hover,
        .mobile-toggle[aria-expanded="true"] {
            border-color: var(--gold);
            color: var(--gold);
        }

        .mobile-drawer {
            position: fixed;
            top: 76px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--paper);
            z-index: 1040;
            display: flex;
            flex-direction: column;
            padding: 28px 24px 40px;
            overflow-y: auto;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
        }

        .mobile-drawer.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .mobile-drawer ul {
            list-style: none;
            margin: 0;
            padding: 0;
            flex: 1 1 auto;
        }

        .mobile-drawer li {
            border-bottom: 1px solid var(--line);
        }

        .mobile-drawer a {
            display: block;
            padding: 17px 4px;
            font-size: 17px;
            color: var(--text-main);
            font-weight: 500;
        }

        .mobile-drawer a:hover {
            color: var(--gold);
            padding-left: 8px;
        }

        .mobile-drawer a.active {
            color: var(--gold);
        }

        .mobile-drawer .btn {
            margin-top: 24px;
            width: 100%;
        }

        @media (max-width: 991.98px) {
            .desktop-nav {
                display: none;
            }
            .header-inner {
                grid-template-columns: 1fr auto 1fr;
                padding: 0 18px;
            }
            .header-brand {
                grid-column: 2;
                grid-row: 1;
                padding: 0;
            }
            .brand-link {
                font-size: 18px;
            }
            .brand-link .brand-strong {
                font-size: 23px;
            }
            .brand-link .brand-sub {
                font-size: 15px;
            }
            .mobile-toggle {
                display: inline-flex;
                justify-self: end;
                grid-column: 3;
                grid-row: 1;
            }
            .header-brand {
                justify-self: center;
            }
        }

        @media (max-width: 575.98px) {
            body {
                padding-top: 66px;
            }
            .site-header,
            .header-inner {
                height: 66px;
            }
            .mobile-drawer {
                top: 66px;
            }
            .brand-link {
                font-size: 16px;
            }
            .brand-link .brand-strong {
                font-size: 20px;
            }
            .brand-link .brand-sub {
                font-size: 13px;
                letter-spacing: .08em;
            }
            .mobile-toggle {
                grid-column: 3;
            }
        }

        .hero {
            position: relative;
            min-height: calc(100vh - 76px);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--paper);
            background-image: linear-gradient(180deg, rgba(244, 240, 233, .72) 0%, rgba(244, 240, 233, .82) 45%, var(--paper) 100%), url("/assets/images/backpic/back-1.png");
            background-size: cover;
            background-position: center;
            text-align: center;
            overflow: hidden;
            padding: 72px 0 60px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--gold);
            font-weight: 500;
            margin-bottom: 26px;
        }

        .hero-eyebrow:before,
        .hero-eyebrow:after {
            content: "";
            width: 38px;
            height: 1px;
            background: var(--gold);
            opacity: .66;
        }

        .hero-title {
            font-size: clamp(44px, 6.4vw, 84px);
            line-height: 1.12;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--ink);
            margin-bottom: 20px;
        }

        .hero-sub {
            font-size: 17px;
            line-height: 1.9;
            color: var(--text-main);
            max-width: 680px;
            margin: 0 auto 14px;
            font-weight: 400;
        }

        .hero-note {
            font-size: 14px;
            color: var(--text-muted);
            margin: 0 auto 30px;
            max-width: 600px;
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }

        .hero-statusline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            letter-spacing: .16em;
            color: var(--text-muted);
        }

        .hero-statusline .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: .4;
            }
        }

        @media (max-width: 767.98px) {
            .hero {
                min-height: auto;
                padding: 96px 0 72px;
                text-align: center;
            }
            .hero-title {
                font-size: clamp(34px, 9vw, 52px);
            }
            .hero-sub {
                font-size: 15px;
                line-height: 1.85;
            }
            .hero-actions {
                flex-direction: column;
                width: 100%;
            }
            .hero-actions .btn {
                width: 100%;
            }
        }

        .info-strip {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .info-strip .row {
            margin: 0;
        }

        .info-cell {
            padding: 30px 28px;
            text-align: center;
            border-right: 1px solid var(--line);
            min-height: 116px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info-cell:last-child {
            border-right: 0;
        }

        .info-label {
            font-size: 13px;
            letter-spacing: .14em;
            color: var(--gold);
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .info-value {
            font-family: var(--font-serif);
            font-size: 20px;
            color: var(--ink);
            font-weight: 600;
            letter-spacing: .03em;
        }

        .info-value small {
            display: block;
            font-family: var(--font-sans);
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 400;
            margin-top: 2px;
            letter-spacing: 0;
        }

        @media (max-width: 767.98px) {
            .info-cell {
                border-right: 0;
                border-bottom: 1px solid var(--line);
                padding: 22px 16px;
            }
            .info-cell:nth-last-child(1) {
                border-bottom: 0;
            }
        }

        .section {
            padding: 96px 0;
        }

        @media (max-width: 991.98px) {
            .section {
                padding: 72px 0;
            }
        }

        .section-tight {
            padding-top: 64px;
        }

        .section-head {
            margin-bottom: 52px;
        }

        .section-eyebrow {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .22em;
            color: var(--gold);
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        .section-eyebrow:before {
            content: "";
            width: 24px;
            height: 1px;
            background: var(--gold);
        }

        .section-title {
            font-size: clamp(28px, 2.8vw, 40px);
            line-height: 1.28;
            margin-bottom: 14px;
            letter-spacing: .02em;
        }

        .section-intro {
            max-width: 680px;
            color: var(--text-muted);
            font-size: 16px;
            line-height: 1.9;
        }

        .media-row {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 64px;
            align-items: center;
        }

        .media-row.reverse .media-image {
            order: 2;
        }

        .media-figure {
            position: relative;
            overflow: hidden;
            background: var(--line);
            border-radius: var(--radius);
        }

        .media-figure img {
            display: block;
            width: 100%;
            height: 480px;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .media-figure:hover img {
            transform: scale(1.03);
        }

        .media-aside {
            padding-right: 8px;
        }

        .media-aside h2 {
            margin-bottom: 20px;
        }

        .media-aside p {
            color: var(--text-muted);
            font-size: 16px;
            line-height: 1.95;
        }

        .feature-list {
            list-style: none;
            margin: 25px 0 0;
            padding: 0;
        }

        .feature-list li {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 11px 0;
            border-bottom: 1px solid var(--line);
            font-size: 15px;
            color: var(--text-main);
        }

        .feature-list li:first-child {
            border-top: 1px solid var(--line);
        }

        .feature-list .bi {
            color: var(--gold);
            font-size: 15px;
            margin-top: 6px;
        }

        @media (max-width: 991.98px) {
            .media-row {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .media-row.reverse .media-image {
                order: 0;
            }
            .media-figure img {
                height: 340px;
            }
            .media-aside {
                padding-right: 0;
            }
        }

        .timeline-section {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .timeline-wrap {
            position: relative;
            margin-top: 10px;
        }

        .timeline {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .timeline:before {
            content: "";
            position: absolute;
            left: 10px;
            top: 12px;
            bottom: 12px;
            width: 1px;
            background: var(--line);
        }

        .timeline-item {
            position: relative;
            padding: 0 0 40px 54px;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
        }

        .timeline-dot {
            position: absolute;
            left: 4px;
            top: 6px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: var(--surface);
            border: 2px solid var(--gold);
            z-index: 2;
        }

        .timeline-time {
            font-family: var(--font-serif);
            font-size: 15px;
            color: var(--gold);
            font-weight: 600;
            letter-spacing: .08em;
            margin-bottom: 6px;
            display: block;
        }

        .timeline-title {
            font-family: var(--font-serif);
            font-size: 21px;
            color: var(--ink);
            font-weight: 600;
            margin-bottom: 6px;
        }

        .timeline-desc {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.8;
            max-width: 600px;
            margin-bottom: 0;
        }

        @media (min-width: 768px) {
            .timeline {
                max-width: 780px;
            }
        }

        @media (max-width: 575.98px) {
            .timeline-item {
                padding-left: 40px;
            }
            .timeline:before {
                left: 7px;
            }
            .timeline-dot {
                left: 2px;
            }
        }

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

        .highlight-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 30px;
            transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
            position: relative;
        }

        .highlight-card:hover {
            transform: translateY(-4px);
            border-color: var(--gold);
            box-shadow: var(--shadow-hover);
        }

        .highlight-number {
            font-family: var(--font-serif);
            font-size: 32px;
            color: var(--gold);
            font-weight: 600;
            line-height: 1;
            display: block;
            margin-bottom: 16px;
        }

        .highlight-card h3 {
            font-size: 21px;
            margin-bottom: 10px;
        }

        .highlight-card p {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.85;
            margin-bottom: 0;
        }

        @media (max-width: 767.98px) {
            .highlight-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }
        }

        .latest-section {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .news-list {
            border-top: 1px solid var(--line);
        }

        .news-item {
            display: grid;
            grid-template-columns: 220px 1fr auto;
            gap: 30px;
            align-items: center;
            padding: 30px 0;
            border-bottom: 1px solid var(--line);
            transition: background .2s ease;
        }

        .news-item:hover {
            background: rgba(244, 240, 233, .5);
        }

        .news-meta {
            font-size: 13px;
            letter-spacing: .04em;
            color: var(--text-muted);
        }

        .news-meta .tag {
            display: inline-block;
            background: var(--paper);
            border: 1px solid var(--line);
            color: var(--gold);
            padding: 3px 10px;
            font-weight: 500;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 12px;
        }

        .news-item h3 {
            font-size: 18px;
            margin-bottom: 4px;
            font-family: var(--font-sans);
            font-weight: 600;
            color: var(--ink);
            transition: color .2s ease;
        }

        .news-item h3 a {
            color: var(--ink);
        }

        .news-item h3 a:hover {
            color: var(--gold);
        }

        .news-excerpt {
            color: var(--text-muted);
            font-size: 14px;
            margin-bottom: 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .news-read {
            font-size: 14px;
            color: var(--gold);
            font-weight: 500;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .news-read .bi {
            transition: transform .2s ease;
        }

        .news-read:hover .bi {
            transform: translateX(3px);
        }

        .empty-state {
            text-align: center;
            padding: 52px 20px;
            border: 1px dashed var(--line);
            margin-top: 28px;
            color: var(--text-muted);
            background: var(--paper);
        }

        .empty-state .bi {
            color: var(--line);
            font-size: 34px;
            display: block;
            margin-bottom: 14px;
        }

        .empty-state span {
            font-size: 15px;
        }

        @media (max-width: 767.98px) {
            .news-item {
                grid-template-columns: 1fr;
                gap: 10px;
                padding: 22px 0;
            }
            .news-meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
            }
        }

        .ticket-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .ticket-card {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 38px 30px;
            display: flex;
            flex-direction: column;
        }

        .ticket-card.is-popular {
            border: 1px solid var(--gold);
            box-shadow: 0 1px 3px rgba(168, 134, 72, .13);
        }

        .popular-ribbon {
            position: absolute;
            top: -1px;
            right: -1px;
            background: var(--gold);
            color: #fff;
            font-size: 12px;
            padding: 5px 14px;
            border-radius: 0 0 0 2px;
            letter-spacing: .12em;
        }

        .ticket-name {
            font-family: var(--font-serif);
            font-size: 23px;
            color: var(--ink);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .ticket-flag {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .ticket-price {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 20px;
            color: var(--ink);
            font-family: var(--font-serif);
            font-size: 20px;
            font-weight: 600;
        }

        .ticket-price small {
            font-size: 13px;
            color: var(--text-muted);
            font-family: var(--font-sans);
            font-weight: 400;
        }

        .ticket-benefits {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 1px solid var(--line);
            flex: 1 1 auto;
        }

        .ticket-benefits li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
            color: var(--text-main);
        }

        .ticket-benefits .bi {
            color: var(--gold);
            font-size: 13px;
            margin-top: 8px;
        }

        .ticket-card .btn {
            width: 100%;
            margin-top: 22px;
        }

        @media (max-width: 991.98px) {
            .ticket-grid {
                grid-template-columns: 1fr;
                max-width: 520px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (max-width: 575.98px) {
            .ticket-card {
                padding: 28px 22px;
            }
        }

        .faq-section {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .faq-wrap {
            max-width: 860px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid var(--line);
        }

        .faq-item:first-child {
            border-top: 1px solid var(--line);
        }

        .faq-item summary {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 24px 4px;
            cursor: pointer;
            font-family: var(--font-serif);
            font-size: 17px;
            color: var(--ink);
            font-weight: 600;
            line-height: 1.5;
            transition: color .2s ease;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary:hover {
            color: var(--gold);
        }

        .faq-item summary .bi {
            color: var(--gold);
            font-size: 14px;
            transition: transform .3s ease;
            flex-shrink: 0;
        }

        .faq-item[open] summary .bi {
            transform: rotate(90deg);
        }

        .faq-answer {
            padding: 0 28px 24px 4px;
            color: var(--text-muted);
            font-size: 15px;
            line-height: 1.9;
            max-width: 780px;
        }

        .faq-answer p:last-child {
            margin-bottom: 0;
        }

        @media (max-width: 575.98px) {
            .faq-item summary {
                font-size: 16px;
            }
            .faq-answer {
                padding-right: 0;
            }
        }

        .cta-dark {
            background: var(--ink);
            color: rgba(244, 240, 233, .88);
            padding: 96px 0;
        }

        .cta-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: start;
        }

        .cta-copy .section-eyebrow:before {
            background: var(--gold-light);
        }

        .cta-copy .section-eyebrow,
        .cta-copy .section-title {
            color: var(--gold-light);
        }

        .cta-copy h2 {
            color: #fff;
            font-size: clamp(26px, 2.4vw, 38px);
            line-height: 1.36;
            margin-bottom: 20px;
        }

        .cta-copy h2 .text-gold {
            color: var(--gold-light);
        }

        .cta-copy p {
            color: rgba(244, 240, 233, .74);
            font-size: 15px;
            margin-bottom: 18px;
            line-height: 1.9;
        }

        .cta-copy .login-note {
            font-size: 14px;
            color: rgba(244, 240, 233, .55);
            margin-top: 16px;
        }

        .cta-copy .login-note a {
            color: var(--gold-light);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .cta-copy .login-note a:hover {
            color: #fff;
        }

        .cta-form-card {
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius);
            padding: 36px;
        }

        .form-label-custom {
            font-size: 13px;
            color: rgba(244, 240, 233, .68);
            margin-bottom: 7px;
            letter-spacing: .02em;
        }

        .form-control-custom {
            display: block;
            width: 100%;
            background: rgba(255, 255, 255, .055);
            border: 1px solid rgba(255, 255, 255, .18);
            color: #fff;
            font-size: 15px;
            padding: 10px 14px;
            line-height: 1.7;
            border-radius: var(--radius);
            transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
        }

        .form-control-custom::placeholder {
            color: rgba(244, 240, 233, .42);
        }

        .form-control-custom:focus {
            outline: 0;
            border-color: var(--gold);
            background: rgba(255, 255, 255, .09);
            box-shadow: 0 0 0 3px rgba(168, 134, 72, .18);
            color: #fff;
        }

        .form-select-custom {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' opacity='.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            cursor: pointer;
        }

        option {
            background: var(--ink);
            color: #fff;
        }

        .form-tip {
            font-size: 12px;
            color: rgba(244, 240, 233, .5);
            margin-top: 10px;
            line-height: 1.6;
        }

        .submit-tip {
            display: none;
            margin-top: 16px;
            padding: 12px 16px;
            background: rgba(168, 134, 72, .14);
            color: #d8c4a0;
            border: 1px solid rgba(168, 134, 72, .35);
            font-size: 13px;
            border-radius: 2px;
        }

        .submit-tip.show {
            display: block;
        }

        @media (max-width: 991.98px) {
            .cta-inner {
                grid-template-columns: 1fr;
                gap: 48px;
            }
            .cta-form-card {
                padding: 24px;
            }
        }

        @media (max-width: 575.98px) {
            .cta-dark {
                padding: 64px 0;
            }
            .cta-form-card {
                padding: 20px;
            }
        }

        .footer {
            background: var(--ink);
            color: rgba(244, 240, 233, .72);
            padding: 64px 0 26px;
        }

        .footer-top {
            display: grid;
            grid-template-columns: 1.3fr .8fr 1fr;
            gap: 56px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(220, 210, 192, .18);
        }

        .footer-brand .brand-link {
            color: #fff;
            font-size: 23px;
            margin-bottom: 14px;
        }

        .footer-brand .brand-link .brand-strong {
            color: #fff;
            font-size: 28px;
        }

        .footer-brand .brand-link .brand-sub {
            color: rgba(244, 240, 233, .78);
        }

        .footer-brand p {
            font-size: 14px;
            line-height: 1.9;
            margin-bottom: 0;
            color: rgba(244, 240, 233, .58);
            max-width: 320px;
        }

        .footer-title {
            font-size: 14px;
            color: rgba(244, 240, 233, .9);
            letter-spacing: .18em;
            text-transform: uppercase;
            margin-bottom: 20px;
            font-weight: 600;
            font-family: var(--font-sans);
        }

        .footer-link-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-link-list li {
            margin-bottom: 8px;
        }

        .footer-link-list a {
            color: rgba(244, 240, 233, .68);
            font-size: 14px;
            transition: color .2s ease, padding-left .2s ease;
        }

        .footer-link-list a:hover {
            color: var(--gold-light);
            padding-left: 4px;
        }

        .footer-contact-list {
            list-style: none;
            padding: 0;
            margin: 0;
            color: rgba(244, 240, 233, .62);
            font-size: 14px;
            line-height: 2;
        }

        .footer-contact-list .bi {
            color: var(--gold);
            margin-right: 7px;
            font-size: 12px;
        }

        .footer-bottom {
            padding-top: 26px;
            text-align: center;
            font-size: 13px;
            color: rgba(244, 240, 233, .5);
        }

        .footer-bottom a {
            color: rgba(244, 240, 233, .55);
        }

        .footer-bottom a:hover {
            color: var(--gold-light);
        }

        @media (max-width: 991.98px) {
            .footer-top {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .footer-brand p {
                max-width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .footer {
                padding-top: 48px;
            }
            .footer-bottom {
                font-size: 12px;
            }
        }

        .skip-link {
            position: absolute;
            left: -999px;
            top: 0;
            z-index: 1100;
            padding: 12px 20px;
            background: var(--ink);
            color: #fff;
            transition: none;
        }

        .skip-link:focus {
            left: 0;
            color: #fff;
        }

        .js [data-reveal] {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .6s ease, transform .6s ease;
        }

        .js [data-reveal].is-visible {
            opacity: 1;
            transform: none;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
            }
            .js [data-reveal] {
                opacity: 1;
                transform: none;
            }
        }

/* roulang page: article */
:root{
  --ink:#1C1B18;
  --gold:#A88648;
  --paper:#F5F1E9;
  --card:#FFFFFF;
  --text:#2A2620;
  --muted:#6F675B;
  --border:#DCD2C0;
  --cinnabar:#9E3E2A;
  --radius:2px;
  --shadow-sm:0 1px 2px rgba(28,24,20,.04);
  --shadow-lg:0 16px 32px rgba(28,24,20,.08);
  --serif:"Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--text);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;transition:color .2s ease,border-color .2s ease}
a:hover{color:var(--gold)}
button,input,select,textarea{font-family:inherit}
.container{max-width:1280px;padding-left:24px;padding-right:24px;margin:0 auto}
.container-narrow{max-width:760px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
@media(max-width:768px){
  .container{padding-left:18px;padding-right:18px}
  .container-narrow{padding-left:18px;padding-right:18px}
}

/* 按钮 */
.btn{border-radius:var(--radius);font-size:15px;font-weight:500;line-height:1;padding:16px 28px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;transition:all .2s ease}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--paper);border-color:var(--gold);color:var(--gold)}
.btn-narrow{padding:11px 20px;font-size:14px}
.btn-sm{padding:10px 16px;font-size:13px}
@media(max-width:576px){
  .btn{width:100%}
}

/* 导航 */
.site-header{position:sticky;top:0;z-index:1080;background:rgba(245,241,233,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.header-inner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:78px;padding-left:28px;padding-right:28px;gap:16px}
.desktop-nav-left{display:flex;justify-content:flex-start}
.desktop-nav-right{display:flex;justify-content:flex-end}
.desktop-nav ul{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0}
.nav-link{position:relative;font-size:15px;color:var(--ink);padding:6px 0;letter-spacing:.02em;display:inline-block;font-weight:400}
.nav-link::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--gold);transition:all .25s ease;transform:translateX(-50%)}
.nav-link:hover{color:var(--gold)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{font-weight:500;color:var(--ink)}
.header-brand{text-align:center}
.brand-link{display:inline-flex;align-items:baseline;gap:6px;line-height:1.2;white-space:nowrap}
.brand-strong{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.02em;color:var(--ink);position:relative}
.brand-strong::after{content:"·";color:var(--gold);font-family:var(--sans);font-weight:400;margin-left:7px;position:relative;top:-1px}
.brand-sub{font-family:var(--serif);font-size:15px;letter-spacing:.18em;color:var(--muted)}
.brand-link:hover .brand-strong{color:var(--ink)}
.brand-link:hover .brand-sub{color:var(--gold)}
.mobile-toggle{display:none;border:1px solid var(--border);background:#fff;color:var(--ink);width:42px;height:42px;align-items:center;justify-content:center;font-size:20px;border-radius:var(--radius);position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.mobile-drawer{display:none;border-top:1px solid var(--border);background:var(--paper);padding:20px 24px 32px}
.mobile-drawer.open{display:block}
.mobile-drawer ul{list-style:none;margin:0 0 20px;padding:0}
.mobile-drawer li{border-bottom:1px solid rgba(220,210,192,.6)}
.mobile-drawer a{display:block;padding:15px 0;font-size:15px;color:var(--ink)}
.mobile-drawer a:hover,.mobile-drawer a.active{color:var(--gold)}
.mobile-drawer .btn{width:100%}
@media(max-width:991.98px){
  .header-inner{grid-template-columns:1fr auto 1fr;min-height:64px;padding-left:18px;padding-right:70px;gap:8px}
  .desktop-nav-left,.desktop-nav-right{display:none}
  .header-brand{grid-column:1;display:flex;justify-content:flex-start;text-align:left}
  .brand-strong{font-size:26px}
  .brand-sub{font-size:13px}
  .mobile-toggle{display:inline-flex}
  .mobile-drawer{display:none}
  .mobile-drawer.open{display:block}
}

/* 文章页首屏 */
.article-hero{position:relative;background:#25211b;padding:96px 0 80px;margin-top:0;overflow:hidden}
.article-hero::before{content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-1.png');background-size:cover;background-position:center;opacity:.38}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,24,.68) 0%,rgba(28,27,24,.2) 60%,rgba(28,27,24,.78) 100%)}
.article-hero .container{position:relative;z-index:2}
.article-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:32px;letter-spacing:.04em}
.article-breadcrumb a{color:rgba(255,255,255,.82)}
.article-breadcrumb a:hover{color:#fff}
.crumb-line{color:var(--gold);font-size:12px}
.crumb-current{color:#fff}
.article-label{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:20px;color:var(--gold);font-size:13px;letter-spacing:.3em}
.article-label::before,.article-label::after{content:"";width:34px;height:1px;background:rgba(168,134,72,.55)}
.article-title{font-family:var(--serif);font-size:clamp(30px,4.4vw,56px);line-height:1.22;font-weight:600;color:#fff;margin:0 auto 26px;max-width:980px;letter-spacing:.01em;text-wrap:balance}
.article-meta-row{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:center;color:rgba(255,255,255,.78);font-size:14px}
.article-meta-row span{display:inline-flex;align-items:center;gap:7px}
.article-meta-row i{color:var(--gold);font-size:15px}
.notfound-title{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);font-weight:600;color:#fff;text-align:center;margin:0}
@media(max-width:768px){
  .article-hero{padding:68px 0 56px}
  .article-breadcrumb{font-size:12px;margin-bottom:24px}
  .article-label{margin-bottom:16px}
}

/* 正文正文 */
.article-main-body{background:var(--paper);position:relative;z-index:3;padding:72px 0 88px}
.article-meta-side{font-size:14px}
.article-meta-card{border:1px solid var(--border);background:var(--card);padding:20px 24px;margin-bottom:28px;box-shadow:var(--shadow-sm)}
.aside-label{font-size:12px;color:var(--gold);letter-spacing:.16em;margin:16px 0 2px;font-weight:500}
.aside-label:first-child{margin-top:0}
.aside-value{font-size:15px;color:var(--ink);line-height:1.6;margin-bottom:8px}
.aside-note{font-size:13px;line-height:1.8;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:16px;margin:16px 0}
.article-body-zone{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);padding:clamp(28px,4.6vw,64px);box-shadow:var(--shadow-sm)}
.article-body{color:#33302a;font-size:16.5px;line-height:2;font-family:var(--sans)}
.article-body p{color:var(--text);margin:0 0 26px}
.article-body h2{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--ink);font-weight:600;margin:48px 0 18px;line-height:1.4}
.article-body h3{font-family:var(--serif);font-size:clamp(19px,2vw,22px);color:var(--ink);font-weight:600;margin:38px 0 12px;line-height:1.5}
.article-body h4{font-size:17px;font-weight:500;color:var(--ink);margin:24px 0 8px}
.article-body ul,.article-body ol{padding-left:1.5em;margin:0 0 26px}
.article-body li{margin-bottom:10px;line-height:1.9}
.article-body blockquote{margin:30px 0;padding:20px 24px 20px 28px;border-left:3px solid var(--gold);background:var(--paper);color:#3e3831;font-size:15.5px}
.article-body blockquote p{margin-bottom:0;color:#3e3831}
.article-body img{margin:32px auto;border-radius:0;border:1px solid var(--border)}
.article-body figure{margin:36px 0}
.article-body figure img{width:100%;margin-bottom:10px}
.article-body figure figcaption{color:var(--muted);font-size:13px;text-align:center}
.article-body a{color:var(--gold);border-bottom:1px solid rgba(168,134,72,.35)}
.article-body a:hover{color:var(--ink);border-color:var(--ink)}
.article-body table{width:100%;margin:28px 0;font-size:15px;border-collapse:collapse}
.article-body th,.article-body td{border:1px solid var(--border);padding:12px 14px;vertical-align:top}
.article-body th{background:var(--paper);font-weight:500}
.article-body hr{border:none;border-top:1px solid var(--border);margin:38px 0}
.article-body code{background:var(--paper);border:1px solid #e2dfd8;padding:2px 7px;border-radius:2px;font-size:.92em;color:#7a2f28}
.article-body pre{background:#1f1d1a;padding:18px;overflow-x:auto;margin:24px 0}
.article-body pre code{background:transparent;border:0;color:#e8d5b0;padding:0}
.article-info-card{border:1px solid var(--border);background:var(--paper);padding:16px 20px;margin:32px 0}
.article-info-card p{margin:0 0 6px}
@media(max-width:768px){
  .article-main-body{padding:48px 0 60px}
  .article-body-zone{padding:24px 18px}
  .article-body{font-size:16px;line-height:1.95}
  .article-body p{margin-bottom:22px}
}

/* 空文章 */
.empty-state{background:var(--card);border:1px solid var(--border);text-align:center;padding:80px 24px;max-width:640px;margin:48px auto}
.empty-state i{font-size:42px;color:var(--gold);margin-bottom:20px}
.empty-state h2{font-family:var(--serif);font-size:22px;margin-bottom:8px}
.empty-state p{color:var(--muted);margin-bottom:28px}

/* 文章页收纳条 */
.article-next{background:var(--card);border-bottom:1px solid var(--border);padding:40px 0}
.article-next .container{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.article-next-title{font-family:var(--serif);font-size:17px;font-weight:600;margin:0;color:var(--ink);display:flex;align-items:center;gap:10px}
.article-next-title i{color:var(--gold)}
.article-next-links{display:flex;flex-wrap:wrap;gap:8px}
.article-next-links a{font-size:13px;border:1px solid var(--border);padding:7px 13px;color:var(--muted);background:#fff;border-radius:2px;transition:.2s}
.article-next-links a:hover{border-color:var(--gold);color:var(--gold)}

/* CTA 报名区 */
.article-cta{background:var(--ink);position:relative;margin:0;color:#fff;padding:72px 0}
.article-cta .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.article-cta-text h2{color:#fff;font-family:var(--serif);font-size:26px;margin-bottom:10px;font-weight:600}
.article-cta-text p{color:rgba(255,255,255,.66);max-width:440px;margin:0;font-size:15px}
.article-cta-action{display:flex;gap:12px}
.article-cta-action .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.article-cta-action .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:768px){
  .article-cta{padding:56px 0}
  .article-cta .container{gap:20px}
  .article-cta-action{flex-wrap:wrap}
  .article-cta-text h2{font-size:22px}
  .article-next .container{flex-direction:column;align-items:flex-start}
  .article-next-links a{flex:1 1 100%;text-align:center}
}

/* 页脚 */
.footer{background:#171512;color:#b8afa1;padding-top:70px;font-size:14px}
.footer .footer-top{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;padding-bottom:48px}
.footer-brand p{font-size:13px;line-height:1.9;color:#8d857a;max-width:300px;margin-top:20px;margin-bottom:0}
.footer-title{font-family:var(--serif);font-size:16px;color:#fff;margin-bottom:18px;font-weight:500;letter-spacing:.04em}
.footer-link-list,.footer-contact-list{list-style:none;margin:0;padding:0}
.footer-link-list li{margin-bottom:10px}
.footer-link-list a{color:#b8afa1;font-size:13px}
.footer-link-list a:hover{color:var(--gold)}
.footer-contact-list li{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:#b8afa1;font-size:13px;line-height:1.6}
.footer-contact-list i{color:var(--gold);width:16px}
.footer-bottom{border-top:1px solid #2b2721;padding-top:26px;padding-bottom:28px;text-align:left}
.footer-bottom p{display:flex;gap:8px;color:#786f63;font-size:13px;margin:0}
.footer-bottom span{color:var(--gold)}
@media(max-width:991px){
  .footer .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:100%}
}
@media(max-width:576px){
  .footer{padding-top:48px}
  .footer .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .footer-brand{grid-column:1}
  .footer-bottom p{flex-direction:column;gap:4px}
}

/* 共享动效 */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.article-hero{animation:fadeUp .7s ease both}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* roulang page: category1 */
:root {
            --ink: #1C1B18;
            --gold: #A88648;
            --paper: #F4F0E9;
            --surface: #FFFFFF;
            --text: #2A2620;
            --muted: #6F675B;
            --line: #DCD2C0;
            --cinnabar: #9E3E2A;
            --radius: 2px;
            --shadow-sm: 0 1px 2px rgba(28, 24, 20, .04);
            --shadow-md: 0 12px 24px rgba(28, 24, 20, .08);
            --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
            --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
            --header-h: 80px;
            --section-space: clamp(64px, 8vw, 112px);
        }

        html {
            scroll-behavior: smooth;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                transition: none !important;
                animation: none !important;
            }
            .reveal,
            .reveal.is-visible {
                opacity: 1;
                transform: none;
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.8;
            color: var(--text);
            background-color: var(--paper);
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease;
        }

        a:hover {
            color: var(--gold);
        }

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

        .container-xl,
        .container-lg,
        .container {
            max-width: 1200px;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: var(--serif);
            color: var(--ink);
            line-height: 1.32;
            margin: 0 0 .5em;
            font-weight: 600;
        }

        h1 {
            font-size: clamp(36px, 4.6vw, 64px);
        }

        h2 {
            font-size: clamp(28px, 2.6vw, 42px);
            letter-spacing: .01em;
        }

        h3 {
            font-size: clamp(19px, 1.6vw, 24px);
            letter-spacing: .01em;
        }

        p {
            line-height: 1.9;
            color: var(--text);
            margin: 0 0 1em;
        }

        .text-muted {
            color: var(--muted) !important;
        }

        .text-gold {
            color: var(--gold) !important;
        }

        .section {
            padding-top: var(--section-space);
            padding-bottom: var(--section-space);
        }

        .section-paper {
            background: var(--paper);
        }

        .section-surface {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .dark-band {
            background: var(--ink);
            color: #E9E0D0;
        }

        .dark-band h2,
        .dark-band h3,
        .dark-band h4 {
            color: #FFF8EC;
        }

        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .55s ease, transform .55s ease;
        }

        .reveal.is-visible {
            opacity: 1;
            transform: none;
        }

        .btn {
            --bs-btn-padding-y: .58rem;
            --bs-btn-padding-x: 1.55rem;
            --bs-btn-border-radius: var(--radius);
            font-size: 15px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            letter-spacing: .04em;
            border: 1px solid transparent;
            line-height: 1.6;
            transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .2s ease, box-shadow .25s ease;
            white-space: nowrap;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .btn-solid {
            background: var(--ink);
            border-color: var(--ink);
            color: #F7F0E4;
        }

        .btn-solid:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
        }

        .btn-outline {
            background: transparent;
            border-color: var(--ink);
            color: var(--ink);
        }

        .btn-outline:hover {
            background: rgba(168, 134, 72, .08);
            border-color: var(--gold);
            color: var(--gold);
        }

        .btn-outline-light {
            background: transparent;
            border-color: rgba(255, 255, 255, .72);
            color: #FFF7EA;
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, .12);
            border-color: #fff;
            color: #fff;
        }

        .btn-lg {
            padding-top: .8rem;
            padding-bottom: .8rem;
            padding-left: 1.9rem;
            padding-right: 1.9rem;
        }

        .btn-narrow {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }

        .section-meta {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 13px;
            letter-spacing: .18em;
            color: var(--gold);
            margin: 0 0 18px;
            font-weight: 500;
        }

        .section-meta span {
            font-family: var(--serif);
            font-size: 13px;
        }

        .section-meta::after {
            content: "";
            width: 36px;
            height: 1px;
            background: var(--gold);
            display: inline-block;
        }

        .meta-line-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
        }

        .meta-line-wrap .meta-index {
            font-family: var(--serif);
            color: var(--gold);
            font-size: 14px;
            letter-spacing: .08em;
        }

        .meta-line-wrap .short-line {
            width: 32px;
            height: 1px;
            background: var(--gold);
        }

        /* ===== 导航 ===== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(244, 240, 233, .92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(220, 210, 192, .9);
            transition: box-shadow .25s ease;
        }

        .site-header.scrolled {
            box-shadow: 0 6px 20px rgba(28, 24, 20, .05);
        }

        .header-inner {
            position: relative;
            max-width: 1380px;
            min-height: var(--header-h);
            margin: 0 auto;
            padding: 12px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .desktop-nav {
            position: relative;
            z-index: 6;
        }

        .desktop-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.5vw, 28px);
        }

        .desktop-nav a:not(.btn) {
            font-size: 15px;
            font-weight: 400;
            color: var(--text);
            padding: 6px 2px;
            display: inline-flex;
            align-items: center;
            position: relative;
        }

        .desktop-nav a:not(.btn)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 0;
            background: var(--gold);
            transition: width .24s ease;
        }

        .desktop-nav a:not(.btn):hover {
            color: var(--gold);
        }

        .desktop-nav a:not(.btn):hover::after,
        .desktop-nav a:not(.btn).active::after {
            width: 100%;
        }

        .desktop-nav a:not(.btn).active {
            color: var(--ink);
            font-weight: 500;
        }

        .desktop-nav a:not(.btn).active::after {
            width: 100%;
        }

        .desktop-nav .btn {
            margin-left: 8px;
        }

        .header-brand {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
            text-align: center;
            background: rgba(244, 240, 233, .8);
            padding: 0 18px;
            border-radius: 2px;
        }

        .brand-link {
            font-family: var(--serif);
            display: inline-flex;
            align-items: baseline;
            gap: 0;
            line-height: 1.35;
        }

        .brand-link:hover {
            color: inherit;
        }

        .brand-strong {
            font-size: 27px;
            font-weight: 700;
            letter-spacing: .06em;
            color: var(--ink);
        }

        .brand-sub {
            font-size: 15px;
            color: var(--gold);
            letter-spacing: .1em;
            margin-left: 4px;
            font-weight: 400;
        }

        .mobile-toggle {
            display: none;
            width: 42px;
            height: 42px;
            align-items: center;
            justify-content: center;
            border: 1px solid #c5b8a2;
            background: transparent;
            color: var(--ink);
            font-size: 1.35rem;
            border-radius: 2px;
            margin-left: auto;
            transition: border-color .2s ease, color .2s ease;
        }

        .mobile-toggle:hover {
            border-color: var(--gold);
            color: var(--gold);
        }

        .mobile-drawer {
            position: fixed;
            top: var(--header-h);
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--paper);
            z-index: 1029;
            padding: 2rem 1.6rem 3rem;
            overflow-y: auto;
            transform: translateX(100%);
            visibility: hidden;
            opacity: 0;
            transition: transform .3s ease, opacity .25s ease, visibility .25s ease;
            display: block;
        }

        .mobile-drawer.open {
            transform: translateX(0);
            visibility: visible;
            opacity: 1;
        }

        .mobile-drawer ul {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 1px solid var(--line);
        }

        .mobile-drawer ul li {
            border-bottom: 1px solid var(--line);
        }

        .mobile-drawer ul a {
            display: block;
            padding: 1rem 0.2rem;
            font-size: 18px;
            font-weight: 400;
            color: var(--text);
        }

        .mobile-drawer ul a.active {
            color: var(--gold);
        }

        .mobile-drawer .btn {
            margin-top: 1.8rem;
            width: 100%;
        }

        @media (min-width: 992px) {
            .mobile-drawer {
                display: none !important;
            }
        }

        @media (max-width: 991.98px) {
            .header-inner {
                padding: 10px 20px;
            }

            .header-brand {
                position: static;
                transform: none;
                background: none;
                padding: 0;
            }

            .brand-strong {
                font-size: 25px;
            }

            .brand-sub {
                font-size: 14px;
            }

            .mobile-toggle {
                display: inline-flex;
            }
        }

        @media (max-width: 420px) {
            .brand-sub {
                display: none;
            }
        }

        /* ===== Hero / Banner ===== */
        .category-hero {
            position: relative;
            min-height: 520px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--ink);
            overflow: hidden;
            color: #F3ECDF;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('/assets/images/backpic/back-1.png');
            background-size: cover;
            background-position: center 35%;
            z-index: 1;
            transform: scale(1.02);
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(92deg, rgba(28, 27, 24, .58) 0%, rgba(28, 27, 24, .35) 45%, rgba(28, 27, 24, .72) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 3;
            padding: clamp(84px, 10vw, 130px) 0 clamp(70px, 8vw, 110px);
            width: 100%;
        }

        .hero-content .content-inner {
            max-width: 780px;
            color: inherit;
        }

        .category-hero .breadcrumb {
            margin-bottom: 22px;
            --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55);
            --bs-breadcrumb-margin-bottom: 0;
        }

        .category-hero .breadcrumb a {
            color: #E6DDCA;
            font-size: 14px;
        }

        .category-hero .breadcrumb a:hover {
            color: #fff;
        }

        .category-hero .breadcrumb-item.active {
            color: var(--gold);
            font-size: 14px;
        }

        .category-hero .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255, 255, 255, .52);
        }

        .hero-eyebrow {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #D4B98A;
            font-size: 13px;
            letter-spacing: .28em;
            text-transform: uppercase;
            margin-bottom: 22px;
            padding-left: 14px;
            border-left: 1px solid var(--gold);
        }

        .category-hero h1 {
            color: #FFF9ED;
            margin-bottom: .38em;
            letter-spacing: .02em;
            text-shadow: 0 1px 24px rgba(0, 0, 0, .12);
        }

        .category-hero .lead {
            font-size: 17px;
            line-height: 1.95;
            max-width: 640px;
            color: #EDE3D0;
            margin-bottom: 2.1rem;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        .hero-actions .btn-solid {
            background: var(--gold);
            border-color: var(--gold);
        }

        .hero-actions .btn-solid:hover {
            background: #C69A5E;
            border-color: #C69A5E;
        }

        /* 信息条 */
        .meta-strip {
            background: #FFFFFF;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .meta-strip .container-xl {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .meta-strip .strip-item {
            text-align: left;
            padding: 26px 24px 26px 0;
            color: var(--text);
            border-right: 1px solid var(--line);
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        .meta-strip .strip-item:last-child {
            border-right: 0;
            padding-right: 0;
        }

        .meta-strip .strip-item i {
            font-size: 1.3rem;
            color: var(--gold);
            margin-top: 3px;
        }

        .meta-strip .strip-label {
            display: block;
            font-size: 12px;
            color: var(--muted);
            letter-spacing: .08em;
            margin-bottom: 2px;
        }

        .meta-strip .strip-value {
            display: block;
            font-size: 15px;
            color: var(--ink);
            line-height: 1.6;
        }

        @media (max-width: 991.98px) {
            .meta-strip .container-xl {
                grid-template-columns: repeat(2, 1fr);
            }

            .meta-strip .strip-item:nth-child(2) {
                border-right: 0;
            }

            .meta-strip .strip-item {
                padding: 20px 18px 20px 0;
            }
        }

        @media (max-width: 560px) {
            .meta-strip .container-xl {
                grid-template-columns: 1fr;
            }

            .meta-strip .strip-item,
            .meta-strip .strip-item:nth-child(2) {
                border-right: 0;
                padding-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .meta-strip .strip-item:last-child {
                border-bottom: 0;
            }
        }

        /* 板式工具 */
        .section-head {
            margin-bottom: 44px;
        }

        .section-head p {
            color: var(--muted);
            max-width: 620px;
        }

        .thin-divider {
            height: 1px;
            background: var(--line);
            border: 0;
            margin: 0;
        }

        /* 入场即知 */
        .agenda-intro-left .about-list {
            list-style: none;
            margin: 26px 0 0;
            padding: 0;
        }

        .about-list li {
            display: flex;
            gap: 13px;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px dashed #E2D9C6;
        }

        .about-list li i {
            color: var(--gold);
            font-size: 1.05rem;
            line-height: 1.7;
        }

        .about-list li span {
            display: inline-block;
        }

        .agenda-cover {
            position: relative;
            background: #E9E0D0;
            overflow: hidden;
            height: 100%;
            min-height: 330px;
        }

        .agenda-cover img {
            width: 100%;
            height: 100%;
            min-height: 330px;
            object-fit: cover;
            transition: transform .7s ease;
        }

        .agenda-cover:hover img {
            transform: scale(1.04);
        }

        .agenda-cover .cover-symbol {
            position: absolute;
            right: 18px;
            bottom: 18px;
            background: var(--ink);
            color: #FFF;
            font-size: 12px;
            line-height: 1.5;
            padding: 8px 12px 8px 18px;
            border-left: 2px solid var(--gold);
            font-family: var(--serif);
            letter-spacing: .08em;
        }

        @media (max-width: 991.98px) {
            .agenda-cover {
                min-height: 260px;
                margin-top: 20px;
            }
        }

        /* 日程时间线 */
        .schedule-list {
            max-width: 880px;
            margin: 0 auto;
        }

        .schedule-item {
            display: grid;
            grid-template-columns: 120px 22px 1fr;
            gap: 4px 8px;
            padding-top: 10px;
            padding-bottom: 26px;
            position: relative;
        }

        .schedule-time {
            padding-top: 4px;
            text-align: right;
            font-family: var(--serif);
            color: var(--ink);
            line-height: 1.7;
            font-size: 15px;
        }

        .schedule-time small {
            display: block;
            color: var(--gold);
            font-size: 12px;
            letter-spacing: .08em;
            font-weight: 600;
        }

        .schedule-rail {
            position: relative;
            width: 1px;
            background: #D0C4AF;
            justify-self: center;
        }

        .schedule-rail .rail-dot {
            position: absolute;
            top: 6px;
            left: -4px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 0 4px rgba(168, 134, 72, .16);
        }

        .schedule-rail::after {
            content: "";
            position: absolute;
            left: -1px;
            bottom: -12px;
            width: 1px;
            height: 26px;
            background: #D0C4AF;
        }

        .schedule-item:last-child .schedule-rail::after {
            display: none;
        }

        .schedule-card {
            background: var(--surface);
            border: 1px solid var(--line);
            padding: 16px 18px;
            box-shadow: var(--shadow-sm);
            border-radius: 0 0 0 2px;
            margin-left: 8px;
            position: relative;
        }

        .schedule-card:hover {
            transform: translateY(-3px);
            border-color: var(--gold);
            box-shadow: var(--shadow-md);
            transition: all .25s ease;
        }

        .schedule-card .tag {
            display: inline-block;
            color: var(--gold);
            letter-spacing: .1em;
            font-size: 12px;
            margin-bottom: 6px;
            font-weight: 500;
            padding: 1px 0;
        }

        .schedule-card h3 {
            font-size: 18px;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .schedule-card p {
            margin-bottom: 0;
            color: var(--muted);
            line-height: 1.75;
            font-size: 15px;
        }

        @media (max-width: 640px) {
            .schedule-item {
                grid-template-columns: 1fr;
                gap: 0;
                padding-left: 16px;
                position: relative;
            }

            .schedule-item::before {
                content: "";
                position: absolute;
                left: 0;
                top: 12px;
                bottom: 26px;
                width: 1px;
                background: #D0C4AF;
            }

            .schedule-rail {
                display: none;
            }

            .schedule-time {
                text-align: left;
                margin-bottom: 6px;
            }

            .schedule-card {
                margin-left: 0;
            }
        }

        /* 场次分区 */
        .scope-layout {
            border-top: 1px solid var(--line);
        }

        .scope-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .scope-list li {
            display: grid;
            grid-template-columns: 64px 1fr 2fr;
            gap: 16px 26px;
            align-items: start;
            padding: 30px 0;
            border-bottom: 1px solid var(--line);
            transition: padding-left .25s ease;
        }

        .scope-list li:hover {
            padding-left: 10px;
        }

        .scope-list .scope-no {
            font-family: var(--serif);
            font-size: 15px;
            color: var(--gold);
            letter-spacing: .1em;
            padding-top: 3px;
        }

        .scope-list h3 {
            margin: 0 0 6px;
            font-size: 23px;
        }

        .scope-list p {
            color: var(--muted);
            margin: 0;
            font-size: 15px;
        }

        .scope-list .scope-note {
            margin-top: 8px;
            color: var(--muted);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .scope-list .scope-note i {
            color: var(--gold);
        }

        .scope-aside {
            position: relative;
            background: #DDD2BE;
            min-height: 300px;
            margin-top: 10px;
        }

        .scope-aside img {
            width: 100%;
            height: 100%;
            min-height: 300px;
            object-fit: cover;
        }

        .scope-aside .aside-caption {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 18px;
            background: rgba(28, 27, 24, .82);
            color: #FFF;
            padding: 12px 16px;
            font-size: 13px;
            line-height: 1.6;
            border-left: 2px solid var(--gold);
            backdrop-filter: blur(4px);
        }

        @media (max-width: 767.98px) {
            .scope-list li {
                grid-template-columns: 1fr;
                gap: 4px 0;
                padding: 24px 0;
            }

            .scope-list li:hover {
                padding-left: 5px;
            }
        }

        /* 登录流程 */
        .entry-flow {
            background: var(--ink);
            position: relative;
            overflow: hidden;
        }

        .entry-flow::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            right: -140px;
            top: -140px;
            background: radial-gradient(circle, rgba(168, 134, 72, .13), transparent 65%);
            pointer-events: none;
        }

        .entry-overline {
            color: var(--gold);
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 12px;
            letter-spacing: .18em;
            margin-bottom: 18px;
        }

        .entry-overline::before {
            content: "";
            width: 30px;
            height: 1px;
            background: var(--gold);
        }

        .entry-flow h2 {
            color: #FFF6E6;
            max-width: 660px;
        }

        .entry-flow .flow-lead {
            color: rgba(244, 240, 233, .76);
            max-width: 640px;
        }

        .entry-list {
            list-style: none;
            margin: 52px 0 0;
            padding: 0;
            max-width: 820px;
        }

        .entry-list li {
            display: grid;
            grid-template-columns: 70px 1fr;
            gap: 8px 30px;
            padding: 24px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            transition: opacity .2s ease;
        }

        .entry-list li:first-child {
            border-top: 1px solid rgba(255, 255, 255, .12);
        }

        .entry-list .step-num {
            font-family: var(--serif);
            color: var(--gold);
            font-size: 16px;
            letter-spacing: .12em;
            line-height: 1.4;
        }

        .entry-list h3 {
            color: #FFF3E2;
            font-size: 20px;
            margin-bottom: 5px;
        }

        .entry-list li p {
            color: rgba(244, 240, 233, .68);
            margin-bottom: 0;
            font-size: 15px;
        }

        @media (max-width: 560px) {
            .entry-list li {
                grid-template-columns: 1fr;
                gap: 6px 0;
            }
        }

        /* 出行备忘 */
        .travel-note-image {
            background: #D8CFC0;
            height: 100%;
            min-height: 320px;
        }

        .travel-note-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 320px;
        }

        .note-list {
            list-style: none;
            padding: 0;
            margin: 24px 0 0;
            counter-reset: noteCounter;
        }

        .note-list li {
            display: grid;
            grid-template-columns: 34px 1fr;
            gap: 0 16px;
            align-items: start;
            padding: 16px 0;
            border-bottom: 1px dashed #E2D9C8;
            counter-increment: noteCounter;
        }

        .note-list li::before {
            content: "0" counter(noteCounter);
            font-family: var(--serif);
            color: var(--gold);
            font-size: 13px;
            letter-spacing: .1em;
            padding-top: 4px;
        }

        .note-list strong {
            display: block;
            font-weight: 600;
            color: var(--ink);
            font-size: 16px;
        }

        .note-list p {
            color: var(--muted);
            font-size: 15px;
            margin: 4px 0 0;
        }

        /* FAQ */
        .faq-wrap {
            max-width: 860px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid var(--line);
            background: transparent;
        }

        .faq-item:first-of-type {
            border-top: 1px solid var(--line);
        }

        .faq-item details {
            padding: 22px 4px;
        }

        .faq-item summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            cursor: pointer;
            font-size: 17px;
            color: var(--ink);
            font-weight: 500;
            font-family: var(--serif);
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-summary-icon {
            font-size: 24px;
            color: var(--gold);
            font-weight: 300;
            width: 22px;
            flex: none;
            text-align: center;
            transition: transform .2s ease;
        }

        .faq-item details[open] .faq-summary-icon {
            transform: rotate(45deg);
        }

        .faq-answer {
            padding: 14px 0 0;
            max-width: 720px;
            color: var(--muted);
            line-height: 1.9;
            font-size: 15px;
        }

        .faq-answer a {
            color: var(--gold);
            border-bottom: 1px solid rgba(168, 134, 72, .36);
        }

        /* CTA 底部 */
        .cta-band {
            position: relative;
            background-color: var(--ink);
            background-image: url('/assets/images/backpic/back-2.png');
            background-size: cover;
            background-position: center;
            padding: clamp(64px, 8vw, 100px) 0;
            color: #F5EADA;
            border-bottom: 1px solid #000;
        }

        .cta-band::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(28, 27, 24, .88) 0%, rgba(28, 27, 24, .6) 60%, rgba(28, 27, 24, .68) 100%);
            pointer-events: none;
        }

        .cta-band .container-xl {
            position: relative;
            z-index: 2;
        }

        .cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 28px;
        }

        .cta-inner .cta-copy {
            max-width: 670px;
        }

        .cta-inner h2 {
            color: #FFF7E8;
            margin-bottom: 14px;
        }

        .cta-inner p {
            color: rgba(244, 240, 233, .78);
            margin: 0;
            font-size: 16px;
        }

        .cta-inner .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .cta-actions .btn-solid {
            background: var(--gold);
            border-color: var(--gold);
        }

        .cta-actions .btn-solid:hover {
            background: #C49A5D;
            border-color: #C49A5D;
        }

        @media (max-width: 768px) {
            .cta-inner {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        /* Footer */
        .footer {
            background: #151410;
            color: #C9C0AE;
            padding-top: clamp(56px, 6vw, 80px);
            padding-bottom: 36px;
            font-size: 14px;
        }

        .footer .footer-top {
            display: grid;
            grid-template-columns: 2.2fr 1fr 1.5fr;
            gap: 48px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            padding-bottom: 50px;
        }

        .footer .brand-link {
            display: inline-flex;
            margin-bottom: 14px;
        }

        .footer .brand-strong {
            color: #FFF7E6;
            font-size: 27px;
        }

        .footer .brand-sub {
            color: var(--gold);
            font-size: 14px;
        }

        .footer p {
            color: rgba(201, 192, 174, .72);
            font-size: 14px;
            margin: 0;
            line-height: 1.9;
            max-width: 400px;
        }

        .footer-title {
            color: #F1E7D2;
            font-size: 16px;
            margin-bottom: 16px;
            letter-spacing: .05em;
            font-family: var(--serif);
            font-weight: 600;
        }

        .footer ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-link-list li,
        .footer-contact-list li {
            padding: 4px 0;
            line-height: 1.8;
        }

        .footer-link-list a {
            color: rgba(201, 192, 174, .84);
        }

        .footer-link-list a:hover {
            color: var(--gold);
            padding-left: 2px;
            transition: padding-left .2s ease, color .2s ease;
        }

        .footer-contact-list li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            color: rgba(201, 192, 174, .84);
        }

        .footer-contact-list i {
            color: var(--gold);
            margin-top: 5px;
        }

        .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding-top: 28px;
        }

        .footer-bottom p {
            margin-bottom: 0;
        }

        .footer-bottom a {
            color: #A79C86;
        }

        .footer-bottom a:hover {
            color: var(--gold);
        }

        @media (max-width: 991.98px) {
            .footer .footer-top {
                grid-template-columns: 1fr 1fr;
                row-gap: 36px;
            }
        }

        @media (max-width: 640px) {
            .footer .footer-top {
                grid-template-columns: 1fr;
                gap: 36px;
            }
        }

        /* Responsive 微调 */
        @media (max-width: 767.98px) {
            .category-hero {
                min-height: 450px;
            }

            .container-xl {
                padding-left: 18px;
                padding-right: 18px;
            }

            .hero-content .btn-lg {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
                font-size: 14px;
            }

            .schedule-card h3 {
                font-size: 17px;
            }
        }

        @media (max-width: 520px) {
            .category-hero {
                min-height: 430px;
            }

            .category-hero h1 {
                font-size: 34px;
            }

            .category-hero .lead {
                font-size: 15px;
            }

            .hero-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .entry-list .step-num {
                margin-bottom: 2px;
            }
        }

.reveal {
                opacity: 1;
                transform: none;
            }

/* roulang page: category2 */
:root {
            --ink: #1C1B18;
            --gold: #A88648;
            --paper: #F4F0E9;
            --surface: #ffffff;
            --text: #2A2620;
            --muted: #6F675B;
            --line: #DCD2C0;
            --cinnabar: #9E3E2A;
            --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
            --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
            --radius: 2px;
            --shadow-sm: 0 1px 2px rgba(28, 24, 20, .04);
            --shadow-md: 0 8px 20px rgba(28, 24, 20, .06);
            --shadow-hover: 0 12px 24px rgba(28, 24, 20, .08);
            --section-space: 108px;
            --section-space-mobile: 68px;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

        body {
            background: var(--paper);
            color: var(--text);
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease;
        }

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

        ul,
        ol {
            list-style: none;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--serif);
            font-weight: 600;
            color: var(--ink);
            letter-spacing: .02em;
            line-height: 1.3;
        }

        h1 {
            font-size: clamp(38px, 5.8vw, 72px);
        }

        h2 {
            font-size: clamp(28px, 3.4vw, 44px);
        }

        h3 {
            font-size: clamp(18px, 1.5vw, 22px);
        }

        p {
            color: var(--text);
            margin-bottom: 0;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        :focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
            border-radius: 2px;
        }

        .container-xl {
            max-width: 1200px;
            padding-left: 24px;
            padding-right: 24px;
        }

        .section-pad {
            padding-top: var(--section-space);
            padding-bottom: var(--section-space);
        }

        .section-kind {
            font-size: 13px;
            color: var(--gold);
            letter-spacing: .34em;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .section-kind::before {
            content: "";
            width: 32px;
            height: 1px;
            background: var(--gold);
            display: inline-block;
        }

        .section-head h2 {
            margin-top: 18px;
            margin-bottom: 28px;
        }

        .section-head .block-lead {
            max-width: 840px;
            color: var(--muted);
            font-size: 17px;
            line-height: 1.9;
            margin-bottom: 0;
        }

        .btn {
            --bs-btn-border-radius: 2px;
            height: 50px;
            padding: 0 30px;
            font-size: 15px;
            line-height: 1.4;
            letter-spacing: .08em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            transition: all .22s ease;
        }

        .btn-solid {
            background: var(--ink);
            color: #fbf8f2;
            border-color: var(--ink);
        }

        .btn-solid:hover,
        .btn-solid:focus {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
            box-shadow: var(--shadow-md);
        }

        .btn-ghost {
            background: transparent;
            color: var(--ink);
            border-color: var(--ink);
        }

        .btn-ghost:hover,
        .btn-ghost:focus {
            background: rgba(168, 134, 72, .08);
            border-color: var(--gold);
            color: var(--gold);
        }

        .btn-narrow {
            height: 42px;
            padding: 0 22px;
            font-size: 14px;
        }

        .btn-gold {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
        }

        .btn-gold:hover,
        .btn-gold:focus {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
        }

        .text-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            color: var(--ink);
            border-bottom: 1px solid var(--gold);
            padding-bottom: 2px;
            transition: all .2s ease;
        }

        .text-btn i {
            color: var(--gold);
            transition: transform .2s ease;
        }

        .text-btn:hover {
            color: var(--gold);
        }

        .text-btn:hover i {
            transform: translateX(4px);
        }

        .js .reveal {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .6s ease .08s, transform .6s cubic-bezier(.2, .6, .3, 1);
        }

        .js .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: 0.001s !important;
                transition-duration: 0.001s !important;
            }

            .js .reveal {
                opacity: 1;
                transform: none;
            }
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1040;
            background: rgba(244, 240, 233, .96);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .site-header.is-scrolled {
            box-shadow: var(--shadow-sm);
        }

        .header-inner {
            position: relative;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 36px;
        }

        .header-brand {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
        }

        .brand-link {
            font-family: var(--serif);
            font-size: 25px;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--ink);
            white-space: nowrap;
        }

        .brand-strong {
            color: var(--ink);
        }

        .brand-sub {
            font-size: 15px;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: .16em;
            margin-left: 6px;
        }

        .desktop-nav ul {
            display: flex;
            align-items: center;
            gap: 32px;
            margin: 0;
            padding: 0;
        }

        .desktop-nav a:not(.btn) {
            position: relative;
            display: inline-block;
            padding: 10px 0;
            color: var(--ink);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
        }

        .desktop-nav a:not(.btn)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 0;
            height: 1px;
            background: var(--gold);
            transition: width .24s ease;
        }

        .desktop-nav a:not(.btn):hover::after,
        .desktop-nav a:not(.btn).active::after {
            width: 100%;
        }

        .desktop-nav a:not(.btn):hover,
        .desktop-nav a:not(.btn).active {
            color: var(--ink);
            background: transparent;
        }

        .mobile-toggle {
            display: none;
            width: 46px;
            height: 46px;
            border: 1px solid var(--line);
            background: transparent;
            color: var(--ink);
            align-items: center;
            justify-content: center;
            border-radius: 2px;
        }

        .mobile-toggle:hover {
            border-color: var(--gold);
            color: var(--gold);
        }

        .mobile-drawer {
            display: none;
            background: var(--paper);
            border-top: 1px solid var(--line);
            padding: 26px 24px 36px;
        }

        .mobile-drawer.open {
            display: block;
        }

        .mobile-drawer ul {
            margin: 0 0 24px;
            padding: 0;
        }

        .mobile-drawer ul li + li {
            border-top: 1px solid var(--line);
        }

        .mobile-drawer ul a {
            display: block;
            padding: 16px 0;
            color: var(--ink);
            font-size: 17px;
            font-family: var(--serif);
            font-weight: 600;
        }

        .mobile-drawer ul a:hover,
        .mobile-drawer ul a.active {
            color: var(--gold);
        }

        @media (max-width: 991.98px) {
            .desktop-nav {
                display: none !important;
            }

            .mobile-toggle {
                display: inline-flex;
            }

            .header-inner {
                padding: 0 18px;
            }

            .header-brand {
                position: static;
                transform: none;
                margin-right: auto;
            }

            .brand-link {
                font-size: 21px;
            }

            .brand-sub {
                font-size: 13px;
            }
        }

        @media (min-width: 992px) {
            .mobile-drawer {
                display: none !important;
            }
        }

        .footer {
            background: #13110D;
            color: #C9C0B2;
            padding: 72px 0 28px;
            margin-top: var(--section-space);
        }

        .footer-top {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1.2fr;
            gap: 64px;
            padding-bottom: 48px;
            border-bottom: 1px solid rgba(220, 210, 192, .16);
        }

        .footer .brand-link {
            color: #f4f0e9;
            font-size: 24px;
        }

        .footer .brand-sub {
            color: #B8A88A;
            font-size: 14px;
        }

        .footer-brand p {
            margin: 20px 0 0;
            font-size: 15px;
            line-height: 1.9;
            color: #AAA290;
            max-width: 380px;
        }

        .footer-title {
            color: #f4f0e9;
            font-size: 14px;
            font-family: var(--sans);
            letter-spacing: .22em;
            margin-bottom: 20px;
        }

        .footer-link-list li,
        .footer-contact-list li {
            padding-top: 4px;
            padding-bottom: 6px;
            font-size: 15px;
            line-height: 1.8;
        }

        .footer-link-list a {
            color: #AAA290;
            border-bottom: 1px solid transparent;
        }

        .footer-link-list a:hover {
            color: var(--gold);
            border-bottom-color: rgba(168, 134, 72, .5);
        }

        .footer-contact-list i {
            color: var(--gold);
            margin-right: 8px;
            width: 16px;
        }

        .footer-bottom {
            padding-top: 28px;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 13px;
            color: #8F877B;
        }

        .footer-bottom a {
            color: #8F877B;
        }

        .footer-bottom a:hover {
            color: var(--gold);
        }

        @media (max-width: 991.98px) {
            .footer-top {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 767.98px) {
            .footer {
                padding-top: 56px;
            }

            .footer-top {
                gap: 32px;
            }

            .footer-brand p {
                margin-top: 16px;
            }
        }

        .category-banner {
            position: relative;
            min-height: 70vh;
            display: flex;
            align-items: center;
            background: #16140F;
            color: #f2ede3;
            padding: 120px 0 90px;
            overflow: hidden;
        }

        .category-banner-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: .34;
        }

        .category-banner-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(20, 18, 13, .9) 0%, rgba(20, 18, 13, .62) 48%, rgba(20, 18, 13, .42) 100%);
        }

        .category-banner-inner {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .cat-crumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            color: #CFC6B5;
            font-size: 13px;
            letter-spacing: .1em;
            margin-bottom: 46px;
        }

        .cat-crumb a {
            color: #CFC6B5;
        }

        .cat-crumb a:hover {
            color: #fff;
        }

        .cat-crumb span {
            color: var(--gold);
        }

        .cat-crumb .crumb-dot {
            color: #7E7466;
        }

        .cat-eyebrow {
            color: var(--gold);
            font-size: 13px;
            letter-spacing: .46em;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .category-banner h1 {
            color: #f8f4ec;
            margin-bottom: 28px;
            letter-spacing: .08em;
        }

        .cat-lead {
            max-width: 720px;
            font-size: 17px;
            color: #D9D0C0;
            line-height: 2;
            margin-bottom: 46px;
        }

        .cat-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .cat-actions .btn-solid {
            background: #f8f4ec;
            border-color: #f8f4ec;
            color: var(--ink);
        }

        .cat-actions .btn-solid:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
        }

        .cat-actions .btn-ghost {
            color: #f8f4ec;
            border-color: rgba(248, 244, 236, .7);
        }

        .cat-actions .btn-ghost:hover {
            background: rgba(248, 244, 236, .08);
            border-color: var(--gold);
            color: var(--gold);
        }

        @media (max-width: 767.98px) {
            .category-banner {
                min-height: auto;
                padding: 86px 0 70px;
            }

            .cat-crumb {
                margin-bottom: 32px;
            }

            .cat-eyebrow {
                letter-spacing: .24em;
            }

            .cat-lead {
                font-size: 16px;
            }
        }

        .page-prelude {
            padding-top: var(--section-space-mobile);
            padding-bottom: 0;
        }

        .prelude-card {
            background: var(--surface);
            border-top: 3px solid var(--gold);
            padding: 46px 52px;
            box-shadow: var(--shadow-sm);
            border-radius: 0 0 2px 2px;
        }

        .prelude-card p {
            color: var(--muted);
            font-size: 17px;
            line-height: 2;
            max-width: 980px;
        }

        @media (max-width: 767.98px) {
            .prelude-card {
                padding: 32px 26px;
            }
        }

        .guest-note-section {
            padding-top: var(--section-space);
            padding-bottom: var(--section-space);
        }

        .guest-note-grid {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 70px;
            align-items: center;
        }

        .img-frame {
            position: relative;
            background: #DBD2C2;
            border: 1px solid var(--line);
            border-radius: 2px;
            overflow: hidden;
        }

        .img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .img-frame::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 2px;
            pointer-events: none;
        }

        .guest-copy p {
            color: var(--muted);
            line-height: 2;
            margin-bottom: 22px;
        }

        .guest-copy p strong,
        .tick-list strong {
            color: var(--ink);
        }

        .tick-list {
            margin-top: 26px;
            margin-bottom: 0;
        }

        .tick-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: var(--muted);
            line-height: 1.8;
            padding: 10px 0;
            border-bottom: 1px solid var(--line);
        }

        .tick-list li.bi {
            font-size: 14px;
            color: var(--gold);
        }

        .tick-list li i {
            color: var(--gold);
            font-size: 16px;
            line-height: 1.7;
            margin-right: 8px;
        }

        .tick-list span {
            color: var(--muted);
        }

        .btn-row {
            display: flex;
            gap: 14px;
            margin-top: 34px;
            flex-wrap: wrap;
        }

        @media (max-width: 991.98px) {
            .guest-note-grid {
                grid-template-columns: 1fr;
                gap: 42px;
            }
        }

        .direction-section {
            background: #ECE5D8;
        }

        .direction-list {
            border-top: 1px solid var(--line);
        }

        .direction-item {
            display: grid;
            grid-template-columns: 90px 1fr 160px;
            align-items: center;
            gap: 34px;
            padding: 38px 0 34px;
            border-bottom: 1px solid var(--line);
        }

        .direction-index {
            font-family: var(--serif);
            font-size: 34px;
            color: var(--gold);
            line-height: 1;
        }

        .direction-copy h3 {
            margin-bottom: 12px;
        }

        .direction-copy p {
            color: var(--muted);
            max-width: 720px;
        }

        .direction-tag {
            justify-self: end;
            font-size: 13px;
            letter-spacing: .1em;
            border: 1px solid var(--gold);
            color: #6A4E21;
            padding: 6px 14px;
            background: rgba(168, 134, 72, .08);
            border-radius: 2px;
        }

        .direction-action {
            grid-column: 2 / 3;
            margin-top: -10px;
            margin-bottom: 18px;
        }

        @media (max-width: 767.98px) {
            .direction-item {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 30px 0;
            }

            .direction-tag {
                justify-self: start;
            }
        }

        .process-section {
            padding-top: var(--section-space);
            padding-bottom: var(--section-space);
            background: var(--paper);
        }

        .process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
            margin-top: 50px;
        }

        .process-item {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 2px;
            padding: 34px 28px 30px;
            transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
        }

        .process-item:hover {
            transform: translateY(-4px);
            border-color: var(--gold);
            box-shadow: var(--shadow-hover);
        }

        .process-num {
            font-family: var(--serif);
            font-size: 44px;
            color: var(--ink);
            line-height: 1;
            border-bottom: 2px solid var(--gold);
            display: inline-block;
            padding-bottom: 14px;
            margin-bottom: 24px;
        }

        .process-item h3 {
            margin-bottom: 12px;
        }

        .process-item p {
            color: var(--muted);
            font-size: 15px;
        }

        .process-item .bi {
            color: var(--gold);
        }

        @media (max-width: 991.98px) {
            .process-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .faq-section {
            padding-top: var(--section-space);
            padding-bottom: var(--section-space);
            background: #EDE7DB;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .7fr 1.3fr;
            gap: 80px;
            align-items: start;
        }

        .faq-side {
            position: sticky;
            top: 120px;
        }

        .faq-side p {
            color: var(--muted);
            margin-bottom: 30px;
        }

        .faq-accordion .accordion-item {
            border: 0;
            background: transparent;
            border-bottom: 1px solid var(--line);
            border-radius: 0;
        }

        .faq-accordion .accordion-button {
            background: transparent;
            border: 0;
            box-shadow: none;
            border-radius: 0;
            padding: 24px 0;
            font-family: var(--serif);
            font-size: 18px;
            font-weight: 600;
            color: var(--ink);
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            background: transparent;
            color: var(--gold);
            box-shadow: none;
        }

        .faq-accordion .accordion-button:focus {
            box-shadow: none;
            outline: none;
        }

        .faq-accordion .accordion-button::after {
            background-image: none;
            font-family: "bootstrap-icons";
            content: "\F4FE";
            line-height: 1;
            font-size: 18px;
            color: var(--ink);
            transition: transform .25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 18px;
            width: 18px;
        }

        .faq-accordion .accordion-button:not(.collapsed)::after {
            transform: rotate(90deg);
            color: var(--gold);
        }

        .faq-accordion .accordion-body {
            padding: 0 0 30px;
            color: var(--muted);
            line-height: 2;
            max-width: 720px;
        }

        @media (max-width: 991.98px) {
            .faq-layout {
                grid-template-columns: 1fr;
                gap: 38px;
            }

            .faq-side {
                position: static;
            }
        }

        .cta-signin-section {
            background: #13110D;
            color: #f4f0e9;
            padding: 104px 0;
        }

        .cta-signin-inner {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 90px;
            align-items: center;
        }

        .cta-copy h2 {
            color: #f8f4ec;
            font-size: clamp(29px, 3.4vw, 46px);
            line-height: 1.35;
            margin-bottom: 24px;
        }

        .cta-copy h2 em {
            font-style: normal;
            color: var(--gold);
        }

        .cta-copy p {
            color: #C8BFB1;
            font-size: 16px;
            line-height: 2;
            margin-bottom: 38px;
            max-width: 620px;
        }

        .cta-card {
            background: rgba(244, 240, 233, .035);
            border: 1px solid rgba(220, 210, 192, .2);
            border-left: 3px solid var(--gold);
            padding: 40px;
            border-radius: 2px;
        }

        .cta-card h3 {
            color: #f8f4ec;
            margin-bottom: 20px;
            font-size: 18px;
        }

        .cta-card .list-unstyled {
            margin-bottom: 28px;
        }

        .cta-card .list-unstyled li {
            padding: 9px 0;
            color: #D5CCBF;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .cta-card .list-unstyled li i {
            color: var(--gold);
            line-height: 1.8;
        }

        .cta-card .btn {
            width: 100%;
        }

        .cta-note {
            color: #8F8676;
            font-size: 13px;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            text-align: center;
        }

        .cta-note a {
            color: #C8BFB1;
            border-bottom: 1px solid rgba(168, 134, 72, .5);
            margin-left: 4px;
        }

        @media (max-width: 991.98px) {
            .cta-signin-inner {
                grid-template-columns: 1fr;
                gap: 46px;
            }

            .cta-signin-section {
                padding: 76px 0;
            }
        }

        @media (max-width: 575.98px) {
            .section-pad {
                padding-top: var(--section-space-mobile);
                padding-bottom: var(--section-space-mobile);
            }

            .process-section,
            .faq-section,
            .guest-note-section,
            .direction-section {
                padding-top: var(--section-space-mobile);
                padding-bottom: var(--section-space-mobile);
            }

            .btn {
                width: 100%;
            }

            .cat-actions,
            .btn-row {
                flex-direction: column;
            }

            .header-inner {
                padding: 0 14px;
            }

            .brand-sub {
                font-size: 12px;
                letter-spacing: .08em;
                margin-left: 2px;
            }
        }

/* roulang page: category3 */
:root {
            --ink: #1C1B18;
            --gold: #A88648;
            --paper: #F4F0E9;
            --surface: #FFFFFF;
            --text: #2A2620;
            --muted: #6F675B;
            --line: #DCD2C0;
            --vermilion: #9E3E2A;
            --radius: 2px;
            --shadow-soft: 0 1px 2px rgba(28, 24, 20, .04);
            --shadow-hover: 0 12px 24px rgba(28, 24, 20, .08);
            --section-space: 96px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
            background: var(--paper);
            color: var(--text);
            line-height: 1.8;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6,
        .serif, .display-sec, .footer-brand .brand-link {
            font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
        }

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

        a {
            color: var(--ink);
            text-decoration: none;
            transition: color .2s ease;
        }

        a:hover {
            color: var(--gold);
        }

        p {
            margin-top: 0;
        }

        .text-muted {
            color: var(--muted) !important;
        }

        .text-gold {
            color: var(--gold) !important;
        }

        .container-xl {
            max-width: 1200px;
        }

        section,
        .category-banner {
            border-bottom: 1px solid var(--line);
        }

        .section {
            padding-top: calc(var(--section-space) - 8px);
            padding-bottom: var(--section-space);
        }

        .section-sm {
            padding-top: 64px;
            padding-bottom: 64px;
        }

        .section-mark {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px;
            font-weight: 600;
        }

        .section-mark::before {
            content: "";
            display: block;
            width: 34px;
            height: 2px;
            background: var(--gold);
        }

        .section-title {
            font-family: "Noto Serif SC", "Songti SC", serif;
            font-size: clamp(28px, 3vw, 40px);
            line-height: 1.25;
            font-weight: 600;
            color: var(--ink);
            margin: 0 0 16px;
            letter-spacing: .5px;
        }

        .section-title + .section-desc {
            max-width: 680px;
        }

        .section-desc {
            font-size: 16px;
            line-height: 1.8;
            color: var(--muted);
            margin-bottom: 0;
        }

        .btn {
            border-radius: var(--radius);
            font-weight: 600;
            padding: 12px 28px;
            font-size: 15px;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
            border: 1px solid transparent;
        }

        .btn-solid {
            background: var(--ink);
            border-color: var(--ink);
            color: #F8F3EA;
        }

        .btn-solid:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(168, 134, 72, .16);
        }

        .btn-outline {
            background: transparent;
            border-color: var(--ink);
            color: var(--ink);
        }

        .btn-outline:hover {
            border-color: var(--gold);
            color: var(--gold);
            background: rgba(168, 134, 72, .04);
            transform: translateY(-1px);
        }

        .btn-narrow {
            padding: 8px 19px;
            font-size: 14px;
        }

        .btn-gold {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
        }

        .btn-gold:hover {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
        }

        .btn-white-outline {
            background: transparent;
            border-color: rgba(255, 255, 255, .7);
            color: #fff;
        }

        .btn-white-outline:hover {
            background: #fff;
            border-color: #fff;
            color: var(--ink);
        }

        .form-control,
        .form-select {
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: var(--surface);
            font-size: 15px;
            color: var(--text);
            padding: 12px 15px;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(168, 134, 72, .12);
            color: var(--ink);
            background: #fff;
        }

        .form-label {
            font-size: 14px;
            color: var(--muted);
            font-weight: 500;
        }

        :focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        /* ================= Header ================= */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1050;
            background: rgba(244, 240, 233, .94);
            border-bottom: 1px solid var(--line);
            transition: box-shadow .3s ease;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .site-header.is-scrolled {
            box-shadow: 0 8px 24px rgba(28, 24, 20, .06);
        }

        .header-inner {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            min-height: 80px;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 28px;
            gap: 16px;
        }

        .desktop-nav ul {
            list-style: none;
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            gap: 4px;
        }

        .desktop-nav-left ul {
            justify-content: flex-start;
        }

        .desktop-nav-right ul {
            justify-content: flex-end;
        }

        .desktop-nav .nav-link {
            position: relative;
            display: inline-block;
            padding: 8px 13px;
            font-size: 14px;
            letter-spacing: .6px;
            color: var(--ink);
            font-weight: 500;
        }

        .desktop-nav .nav-link::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 100%;
            bottom: 0;
            height: 2px;
            background: var(--gold);
            transition: right .2s ease;
        }

        .desktop-nav .nav-link:hover {
            color: var(--gold);
        }

        .desktop-nav .nav-link:hover::after,
        .desktop-nav .nav-link.active::after {
            right: 12px;
        }

        .desktop-nav .nav-link.active {
            color: var(--ink);
            font-weight: 600;
        }

        .header-brand {
            text-align: center;
            line-height: 1;
        }

        .brand-link {
            display: inline-flex;
            align-items: baseline;
            font-family: "Noto Serif SC", "Songti SC", serif;
        }

        .brand-strong {
            font-size: 27px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: 4px;
        }

        .brand-sub {
            font-size: 14px;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: 2px;
        }

        .header-brand .brand-sub {
            font-weight: 400;
        }

        .mobile-toggle {
            display: none;
            background: transparent;
            border: 1px solid var(--line);
            color: var(--ink);
            width: 42px;
            height: 42px;
            border-radius: var(--radius);
            font-size: 20px;
            line-height: 1;
            align-items: center;
            justify-content: center;
        }

        .mobile-drawer {
            background: var(--paper);
            border-top: 1px solid var(--line);
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
        }

        .mobile-drawer.open {
            max-height: 560px;
        }

        .mobile-drawer ul {
            list-style: none;
            padding: 20px 24px 4px;
            margin: 0;
        }

        .mobile-drawer li a {
            display: block;
            padding: 12px 0;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid rgba(220, 210, 192, .6);
        }

        .mobile-drawer li a.active {
            color: var(--gold);
            font-weight: 600;
        }

        .mobile-drawer > .btn {
            margin: 16px 24px 24px;
            width: calc(100% - 48px);
        }

        /* ---------- category banner ---------- */
        .category-banner {
            position: relative;
            min-height: 430px;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, #1C1B18 0%, rgba(28, 27, 24, .88) 42%, rgba(28, 27, 24, .52) 100%), url("/assets/images/backpic/back-3.webp") center / cover no-repeat;
            color: #F4F0E9;
            padding: 76px 0;
            overflow: hidden;
        }

        .category-banner .container-xl {
            position: relative;
            z-index: 2;
        }

        .crumb-line {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            letter-spacing: .6px;
            color: rgba(244, 240, 233, .72);
            margin-bottom: 22px;
            flex-wrap: wrap;
        }

        .crumb-line a {
            color: rgba(244, 240, 233, .84);
        }

        .crumb-line a:hover {
            color: #fff;
        }

        .crumb-line span.sep {
            opacity: .45;
        }

        .category-banner h1 {
            font-size: clamp(36px, 4.6vw, 64px);
            line-height: 1.15;
            font-weight: 600;
            color: #fff;
            letter-spacing: 3px;
            margin-bottom: 20px;
        }

        .category-banner .lead {
            font-size: 17px;
            max-width: 800px;
            color: rgba(244, 240, 233, .9);
            line-height: 1.9;
            padding: 20px 0 28px;
            position: relative;
        }

        .category-banner .lead::before {
            content: "";
            display: block;
            width: 52px;
            height: 1px;
            background: var(--gold);
            margin-bottom: 20px;
        }

        .banner-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 16px;
        }

        /* ---------- feature path ---------- */
        .feat-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 32px 28px;
            height: 100%;
            color: var(--text);
            transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
            box-shadow: var(--shadow-soft);
        }

        .feat-card:hover {
            transform: translateY(-3px);
            border-color: var(--gold);
            box-shadow: var(--shadow-hover);
        }

        .feat-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            font-size: 20px;
            color: var(--gold);
            background: var(--paper);
            margin-bottom: 20px;
        }

        .feat-card h3 {
            font-size: 20px;
            color: var(--ink);
            margin-bottom: 10px;
            letter-spacing: .4px;
        }

        .feat-card p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
        }

        .feat-card .feature-tag {
            display: inline-block;
            font-size: 12px;
            background: rgba(168, 134, 72, .1);
            color: var(--gold);
            border-radius: 999px;
            padding: 2px 12px;
            margin-bottom: 14px;
            letter-spacing: 1px;
        }

        /* split */
        .split-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 70px;
        }

        .split-visual {
            background: #E7E0D4;
            border-radius: 8px;
            overflow: hidden;
            min-height: 400px;
        }

        .split-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform .45s ease;
        }

        .split-panel-left:hover .split-image,
        .split-panel:hover .split-image {
            transform: scale(1.02);
        }

        .check-list {
            list-style: none;
            margin: 28px 0 0;
            padding: 0;
        }

        .check-list li {
            position: relative;
            padding: 12px 0 12px 28px;
            border-bottom: 1px dashed rgba(220, 210, 192, .8);
            color: var(--text);
            font-size: 15px;
        }

        .check-list li::before {
            content: "\F26E";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            top: 13px;
            color: var(--gold);
            font-size: 14px;
        }

        .portal-summary {
            padding-left: 38px;
            border-left: 1px solid var(--line);
        }

        .portal-summary .portal-item {
            display: flex;
            gap: 18px;
            padding: 24px 0;
            border-bottom: 1px solid var(--line);
        }

        .portal-item .num {
            font-size: 14px;
            color: var(--gold);
            flex: 0 0 26px;
            padding-top: 4px;
            letter-spacing: 1px;
        }

        .portal-item h3 {
            font-size: 18px;
            margin: 0 0 6px;
            color: var(--ink);
        }

        .portal-item p {
            color: var(--muted);
            font-size: 14px;
            margin: 0;
        }

        /* Step */
        .step-wrap {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }

        .step-box {
            position: relative;
            padding: 38px 30px;
            height: 100%;
        }

        .step-box .step-number {
            font-size: 14px;
            letter-spacing: 2px;
            color: var(--gold);
            font-weight: 600;
            margin-bottom: 14px;
        }

        .step-box h3 {
            font-size: 18px;
            color: var(--ink);
            letter-spacing: .4px;
            margin-bottom: 10px;
        }

        .step-box p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
        }

        .step-box::after {
            content: "";
            position: absolute;
            right: 0;
            top: 28px;
            bottom: 28px;
            width: 1px;
            background: var(--line);
        }

        .col-md-3:last-child .step-box::after {
            display: none;
        }

        /* category guide table */
        .guide-card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--surface);
            height: 100%;
            padding: 38px 36px;
            position: relative;
        }

        .guide-card.hot-card {
            border-top: 3px solid var(--gold);
        }

        .guide-card h3 {
            font-size: 24px;
            color: var(--ink);
            margin-bottom: 6px;
        }

        .guide-card .guide-role {
            font-size: 14px;
            color: var(--gold);
            letter-spacing: 2px;
            margin-bottom: 24px;
        }

        .guide-card ul {
            margin: 24px 0 0;
            padding: 0;
            list-style: none;
        }

        .guide-card ul li {
            padding: 9px 0 9px 20px;
            position: relative;
            color: var(--muted);
            font-size: 14px;
        }

        .guide-card ul li::before {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            left: 0;
            top: 19px;
        }

        .guide-badge {
            display: inline-block;
            background: rgba(168, 134, 72, .12);
            color: var(--gold);
            font-size: 12px;
            border-radius: 999px;
            padding: 3px 12px;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        /* venue info */
        .venue-list {
            margin-top: 30px;
        }

        .venue-item {
            border-left: 1px solid var(--line);
            padding: 8px 0 8px 28px;
            margin-bottom: 28px;
            transition: border-color .25s ease;
        }

        .venue-item:hover {
            border-left-color: var(--gold);
        }

        .venue-item .tsp {
            font-size: 13px;
            color: var(--gold);
            letter-spacing: 2px;
        }

        .venue-item h3 {
            font-size: 18px;
            margin: 2px 0 6px;
            color: var(--ink);
        }

        .venue-item p {
            color: var(--muted);
            font-size: 14px;
            margin: 0;
        }

        .venue-photo-card {
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid var(--line);
            position: relative;
            background: #E4DECF;
        }

        .venue-photo-card img {
            width: 100%;
            height: 430px;
            object-fit: cover;
            object-position: center;
        }

        /* FAQ */
        .faq-item {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            margin-bottom: 14px;
        }

        .faq-button {
            width: 100%;
            border: none;
            background: transparent;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 26px;
            font-size: 16px;
            font-weight: 600;
            color: var(--ink);
            border-radius: var(--radius);
            cursor: pointer;
            font-family: "Noto Serif SC", "Songti SC", serif;
            gap: 20px;
        }

        .faq-button .faq-icon {
            flex: 0 0 28px;
            text-align: center;
            transition: transform .3s ease;
            color: var(--gold);
            font-size: 20px;
            font-weight: 300;
            line-height: 1;
        }

        .faq-button[aria-expanded="true"] .faq-icon {
            transform: rotate(45deg);
        }

        .faq-answer {
            padding: 0 26px 24px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.85;
        }

        .faq-answer a {
            color: var(--gold);
            font-weight: 500;
        }

        /* CTA */
        .cta-section {
            background: var(--ink);
            color: #EAE4D8;
            padding-top: 100px;
            padding-bottom: 100px;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: "";
            position: absolute;
            top: -30%;
            right: -5%;
            width: 42%;
            height: 160%;
            background: linear-gradient(180deg, rgba(168, 134, 72, .18), transparent 70%);
            pointer-events: none;
        }

        .cta-title {
            color: #fff;
            font-size: clamp(30px, 3.3vw, 48px);
            margin-bottom: 22px;
            line-height: 1.3;
            position: relative;
        }

        .cta-section .lead {
            max-width: 680px;
            color: rgba(234, 228, 216, .78);
            position: relative;
            z-index: 1;
        }

        .cta-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 32px;
            position: relative;
            z-index: 1;
        }

        .cta-note {
            margin-top: 24px;
            position: relative;
            z-index: 1;
            font-size: 14px;
            color: rgba(234, 228, 216, .55);
        }

        /* footer */
        .footer {
            background: #121110;
            color: #C4BEB2;
        }

        .footer a {
            color: #C4BEB2;
            transition: color .2s ease;
        }

        .footer a:hover {
            color: var(--gold);
        }

        .footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 56px;
            padding-top: 72px;
            padding-bottom: 52px;
        }

        .footer-brand .brand-link {
            color: #F4F0E9;
            margin-bottom: 20px;
        }

        .footer-brand .brand-strong {
            color: #F4F0E9;
            font-size: 24px;
        }

        .footer-brand .brand-sub {
            color: #AFA99E;
            font-size: 12px;
            letter-spacing: 2px;
        }

        .footer-brand p {
            font-size: 14px;
            line-height: 1.85;
            color: #8E887E;
            max-width: 430px;
            margin: 20px 0 0;
        }

        .footer-title {
            color: #F0E9DD;
            font-size: 16px;
            margin-bottom: 18px;
            letter-spacing: 2px;
            font-family: "Noto Serif SC", serif;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(220, 210, 192, .18);
        }

        .footer-link-list,
        .footer-contact-list {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        .footer-link-list li {
            margin-bottom: 10px;
        }

        .footer-link-list li a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .footer-link-list li a::before {
            content: "·";
            color: var(--gold);
            font-weight: 700;
        }

        .footer-contact-list li {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 13px;
            line-height: 1.6;
            align-items: flex-start;
        }

        .footer-contact-list i {
            color: var(--gold);
            margin-top: 3px;
            font-size: 12px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(220, 210, 192, .12);
            padding: 24px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 13px;
            color: #777066;
        }

        /* reveal */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .6s ease, transform .6s ease;
            will-change: opacity, transform;
        }

        .reveal.in-view {
            opacity: 1;
            transform: none;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }

            .reveal {
                opacity: 1;
                transform: none;
            }
        }

        @media (max-width: 1199.98px) {
            .split-panel {
                gap: 46px;
            }

            .header-inner {
                padding: 0 18px;
            }
        }

        @media (max-width: 991.98px) {
            :root {
                --section-space: 70px;
            }

            .category-banner {
                min-height: 390px;
            }

            .desktop-nav {
                display: none;
            }

            .header-inner {
                grid-template-columns: auto 1fr auto;
                min-height: 68px;
            }

            .header-brand {
                text-align: right;
            }

            .header-brand .brand-strong {
                font-size: 22px;
                letter-spacing: 3px;
            }

            .header-brand .brand-sub {
                font-size: 13px;
            }

            .mobile-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .split-panel {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .split-visual {
                min-height: 320px;
                max-height: 440px;
            }

            .venue-photo-card img {
                height: 320px;
            }

            .footer-top {
                grid-template-columns: 1fr;
                gap: 40px;
                padding-top: 56px;
            }

            .category-banner h1 {
                font-size: 42px;
            }

            .step-box::after {
                display: none;
            }

            .step-wrap {
                border: none;
                background: transparent;
                padding: 0;
            }

            .step-box {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 0;
                margin-bottom: 12px;
                padding: 28px 24px;
            }
        }

        @media (max-width: 767.98px) {
            .category-banner {
                padding: 56px 0;
                min-height: 0;
            }

            .category-banner h1 {
                font-size: clamp(30px, 9vw, 42px);
                letter-spacing: 1px;
            }

            .category-banner .lead {
                font-size: 15px;
            }

            .banner-actions {
                align-items: stretch;
                flex-direction: column;
            }

            .section-title {
                font-size: 26px;
                line-height: 1.35;
            }

            .section .section-mark {
                margin-bottom: 12px;
            }

            .feat-card {
                padding: 26px 22px;
            }

            .venue-photo-card img {
                height: 250px;
            }

            .guide-card {
                padding: 28px 22px;
            }

            .portal-summary {
                padding-left: 0;
                border-left: none;
                background: var(--surface);
                padding: 20px;
                border: 1px solid var(--line);
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .faq-button {
                padding: 18px 16px;
                font-size: 15px;
            }

            .faq-answer {
                padding: 0 16px 20px;
            }

            .cta-section {
                padding-top: 64px;
                padding-bottom: 64px;
            }
        }

        @media (max-width: 520px) {
            .header-inner {
                padding: 0 14px;
                gap: 6px;
            }

            .brand-strong {
                font-size: 20px;
                letter-spacing: 2px;
            }

            .brand-sub {
                font-size: 11px;
            }

            .category-banner .lead {
                padding: 16px 0 22px;
            }

            .banner-actions .btn {
                width: 100%;
            }
        }