@charset "utf-8";
/* ============================================================================
   深墨草原 Wulan — 主题样式
   基于 museum_white 主题的布局与交互结构改写，保留表单、灯箱、抽屉、分页、
   滚动进入等可访问性逻辑，视觉改为深墨、暖白、朱砂、鎏金体系。
   顺序：令牌 → 基础 → 版式 → 布局 → 头部 → 首屏 → 刊头 → 区块 → 组件 →
         页面 → 表单 → 页脚 → 动效 → 响应式
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 设计令牌
   --------------------------------------------------------------------------- */
:root {
    /* 色彩 */
    --wl-ink: #0F1114;
    --wl-ink-2: #171A1E;
    --wl-ink-3: #22262B;
    --wl-paper: #F4EFE6;
    --wl-paper-2: #E8DFD1;
    --wl-text: #F4EFE6;
    --wl-text-dim: #B7AFA3;
    --wl-ink-text: #1A1815;
    --wl-ink-text-2: #5E574E;
    --wl-gold: #C9A063;
    --wl-gold-text: #D8B77E;
    --wl-cinnabar: #A93226;
    --wl-cinnabar-hover: #C0392B;
    --wl-red-text: #8F2C20;
    --wl-steppe: #6F8F7A;
    --wl-sky: #8FB3C7;
    --wl-line-dark: rgba(201, 160, 99, .28);
    --wl-line-light: #D5CBBB;
    --wl-danger: #8A3B2E;

    /* 字体 */
    --wl-font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --wl-font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --wl-font-num: "Cormorant Garamond", "Times New Roman", "Songti SC", serif;

    /* 间距 */
    --wl-s1: 4px;
    --wl-s2: 8px;
    --wl-s3: 12px;
    --wl-s4: 16px;
    --wl-s5: 24px;
    --wl-s6: 32px;
    --wl-s7: 48px;
    --wl-s8: 64px;
    --wl-s9: 80px;
    --wl-s10: 120px;

    /* 布局 */
    --wl-container: 1320px;
    --wl-reading: 800px;
    --wl-gutter: 48px;
    --wl-header-h: 84px;
    --wl-section-y: 120px;

    /* 动效 */
    --wl-ease: cubic-bezier(.22, .61, .36, 1);
    --wl-dur-hover: 250ms;
    --wl-dur-enter: 600ms;
    --wl-hero-dur: 800ms;
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --wl-dur-hover: 0ms;
        --wl-dur-enter: 0ms;
        --wl-hero-dur: 0ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   2. 基础
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body.wl-no-scroll { overflow: hidden; }

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--wl-dur-hover) var(--wl-ease);
}

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

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

button { cursor: pointer; }

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

::selection {
    background: rgba(169, 50, 38, .45);
    color: var(--wl-paper);
}

.wl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.wl-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--wl-cinnabar);
    color: var(--wl-paper);
    padding: 10px 18px;
}
.wl-skip:focus { left: 0; color: var(--wl-paper); }

/* ---------------------------------------------------------------------------
   3. 版式
   --------------------------------------------------------------------------- */
.wl-display,
.wl-h1,
.wl-h2,
.wl-h3 {
    font-family: var(--wl-font-serif);
    font-weight: 500;
    margin: 0;
}

.wl-display {
    font-size: clamp(48px, 6.4vw, 84px);
    line-height: 1.08;
    letter-spacing: .02em;
}

.wl-h1 {
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.2;
    letter-spacing: .02em;
}

.wl-h2 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.28;
    letter-spacing: .02em;
}

.wl-h3 {
    font-size: clamp(21px, 2.2vw, 25px);
    line-height: 1.4;
    letter-spacing: .01em;
}

.wl-lead {
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.85;
    color: var(--wl-ink-text-2);
    margin: 0;
}

.wl-body { font-size: 16px; line-height: 1.85; margin: 0; }
.wl-small { font-size: 13px; line-height: 1.7; color: var(--wl-text-dim); margin: 0; }
.wl-num { font-variant-numeric: tabular-nums; }

.wl-meta {
    font-family: var(--wl-font-num);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .12em;
    color: var(--wl-text-dim);
    margin: 0;
}

.wl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--wl-gold-text);
    margin: 0;
}
.wl-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.wl-index {
    display: block;
    font-family: var(--wl-font-num);
    font-size: 44px;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--wl-gold);
}

/* 深色区块内的浅色文字 */
.wl-on-dark .wl-kicker { color: var(--wl-gold-text); }
.wl-on-dark .wl-lead,
.wl-on-dark .wl-body { color: var(--wl-text-dim); }

/* 富文本正文 */
.wl-prose {
    font-size: 17px;
    line-height: 1.95;
    color: var(--wl-ink-text);
    overflow-wrap: anywhere;
}
.wl-prose p { margin: 0 0 1.15em; }
.wl-prose p:last-child { margin-bottom: 0; }
.wl-prose h2,
.wl-prose h3,
.wl-prose h4 {
    font-family: var(--wl-font-serif);
    font-weight: 500;
    line-height: 1.4;
    margin: 1.8em 0 .7em;
}
.wl-prose h2 { font-size: 28px; }
.wl-prose h3 { font-size: 23px; }
.wl-prose h4 { font-size: 19px; }
.wl-prose img {
    max-width: 100% !important;
    height: auto !important;
    margin: var(--wl-s5) auto;
}
.wl-prose a {
    color: var(--wl-red-text);
    border-bottom: 1px solid currentColor;
}
.wl-prose blockquote {
    margin: var(--wl-s6) 0;
    padding: 4px 0 4px var(--wl-s5);
    border-left: 1px solid var(--wl-gold);
    font-family: var(--wl-font-serif);
    font-size: 22px;
    line-height: 1.7;
    color: var(--wl-ink-text-2);
}
.wl-prose ul,
.wl-prose ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.wl-prose li { margin-bottom: .35em; }
.wl-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--wl-s5) 0;
    font-size: 15px;
}
.wl-prose th,
.wl-prose td {
    border: 1px solid var(--wl-line-light);
    padding: 8px 12px;
    text-align: left;
}
.wl-prose iframe,
.wl-prose video {
    max-width: 100%;
    border: 0;
}
.wl-prose .aligncenter,
.wl-prose p[style*="text-align: center"] {
    text-align: center;
}

/* 文字链 */
.wl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: .12em;
    color: inherit;
    border-bottom: 1px solid var(--wl-gold);
    padding-bottom: 4px;
}
.wl-link::after { content: "\2192"; color: var(--wl-gold); }
.wl-link:hover { color: var(--wl-gold-text); }

/* 按钮 */
.wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 26px;
    border: 1px solid var(--wl-line-dark);
    background: transparent;
    color: var(--wl-text);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-align: center;
    transition: background var(--wl-dur-hover) var(--wl-ease),
                border-color var(--wl-dur-hover) var(--wl-ease),
                color var(--wl-dur-hover) var(--wl-ease);
}
.wl-btn:hover {
    border-color: var(--wl-gold);
    color: var(--wl-gold-text);
}
.wl-btn--primary {
    background: var(--wl-cinnabar);
    border-color: var(--wl-cinnabar);
    color: var(--wl-paper);
}
.wl-btn--primary:hover {
    background: var(--wl-cinnabar-hover);
    border-color: var(--wl-cinnabar-hover);
    color: var(--wl-paper);
}
.wl-btn--ghost {
    border-color: rgba(244, 239, 230, .45);
    color: var(--wl-paper);
}
.wl-btn--ghost:hover {
    border-color: var(--wl-gold);
    color: var(--wl-gold-text);
}
.wl-btn--dark {
    background: var(--wl-ink);
    border-color: var(--wl-ink);
    color: var(--wl-paper);
}
.wl-btn--dark:hover {
    background: var(--wl-ink-2);
    border-color: var(--wl-ink-2);
    color: var(--wl-paper);
}
.wl-btn--line {
    border-color: var(--wl-line-light);
    color: var(--wl-ink-text);
}
.wl-btn--line:hover {
    border-color: var(--wl-gold);
    color: var(--wl-red-text);
}

/* ---------------------------------------------------------------------------
   4. 布局
   --------------------------------------------------------------------------- */
.wl-container {
    width: 100%;
    max-width: var(--wl-container);
    margin: 0 auto;
    padding-left: var(--wl-gutter);
    padding-right: var(--wl-gutter);
}
.wl-container--narrow { max-width: var(--wl-reading); }

.wl-main { display: block; min-height: 60vh; }
.wl-main--offset { padding-top: var(--wl-header-h); }
.wl-main--home { padding-top: 0; }

.wl-section {
    padding: var(--wl-section-y) 0;
}
.wl-section--ink {
    background: var(--wl-ink);
    color: var(--wl-text);
}
.wl-section--ink-2 {
    background: var(--wl-ink-2);
    color: var(--wl-text);
}
.wl-section--paper {
    background: var(--wl-paper);
    color: var(--wl-ink-text);
}
.wl-section--paper-2 {
    background: var(--wl-paper-2);
    color: var(--wl-ink-text);
}
.wl-section--tight { padding: var(--wl-s9) 0; }
.wl-section--flush-top { padding-top: 0; }

.wl-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wl-s5);
    padding-bottom: var(--wl-s5);
    border-bottom: 1px solid var(--wl-line-dark);
    margin-bottom: var(--wl-s8);
}
.wl-section-head__title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--wl-s5);
    align-items: end;
}
.wl-section-head__title .wl-h2 { margin-top: 2px; }
.wl-section-head__side {
    display: flex;
    align-items: center;
    gap: var(--wl-s4);
    padding-bottom: 4px;
}
.wl-section-head--light { border-bottom-color: var(--wl-line-light); }
.wl-section-head--light .wl-kicker { color: var(--wl-red-text); }

/* ---------------------------------------------------------------------------
   5. 头部与导航
   --------------------------------------------------------------------------- */
.wl-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    color: var(--wl-paper);
    transition: background var(--wl-dur-hover) var(--wl-ease),
                border-color var(--wl-dur-hover) var(--wl-ease),
                backdrop-filter var(--wl-dur-hover) var(--wl-ease);
}
.wl-header--solid {
    background: rgba(15, 17, 20, .96);
    border-bottom: 1px solid rgba(201, 160, 99, .12);
}
.wl-header--overlay {
    background: linear-gradient(to bottom, rgba(15, 17, 20, .72), rgba(15, 17, 20, 0));
    border-bottom-color: transparent;
}
.wl-header[data-state="scrolled"] {
    background: rgba(15, 17, 20, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--wl-line-dark);
}

.wl-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wl-s5);
    min-height: var(--wl-header-h);
}

.wl-brand {
    display: flex;
    align-items: center;
    gap: var(--wl-s4);
    flex: none;
}
.wl-brand img {
    width: auto;
    height: 36px;
    filter: brightness(0) invert(1);
    opacity: .94;
}
.wl-brand__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.wl-brand__name {
    font-family: var(--wl-font-serif);
    font-size: 20px;
    letter-spacing: .08em;
}
.wl-brand__en {
    font-family: var(--wl-font-num);
    font-size: 10px;
    letter-spacing: .28em;
    color: var(--wl-text-dim);
}

.wl-nav { display: flex; align-items: center; }
.wl-nav__list {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wl-nav__item { position: relative; }
.wl-nav__link {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .12em;
    white-space: nowrap;
}
.wl-nav__link:hover { color: var(--wl-gold-text); }
.wl-nav__link[aria-current="page"] { color: var(--wl-gold-text); }
.wl-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--wl-gold);
}
.wl-nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: var(--wl-cinnabar);
}

.wl-header__side {
    display: flex;
    align-items: center;
    gap: var(--wl-s4);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--wl-text-dim);
    flex: none;
}
.wl-header__side a { color: var(--wl-text-dim); }
.wl-header__side a:hover { color: var(--wl-gold-text); }
.wl-header__divider {
    width: 1px;
    height: 14px;
    background: var(--wl-line-dark);
}

/* 移动端汉堡 */
.wl-burger {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(244, 239, 230, .55);
    background: rgba(15, 17, 20, .35);
    color: var(--wl-paper);
    position: relative;
}
.wl-burger span,
.wl-burger span::before,
.wl-burger span::after {
    position: absolute;
    left: 9px;
    width: 16px;
    height: 1px;
    background: currentColor;
    content: "";
}
.wl-burger span { top: 17px; }
.wl-burger span::before { top: -6px; left: 0; }
.wl-burger span::after { top: 6px; left: 0; }

/* 移动抽屉 */
.wl-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--wl-ink);
    color: var(--wl-text);
    padding: var(--wl-s9) var(--wl-s5) var(--wl-s5);
    display: flex;
    flex-direction: column;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--wl-dur-hover) var(--wl-ease),
                transform var(--wl-dur-hover) var(--wl-ease),
                visibility var(--wl-dur-hover);
}
.wl-drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.wl-drawer__close {
    position: absolute;
    top: var(--wl-s5);
    right: var(--wl-s5);
    width: 40px;
    height: 40px;
    border: 1px solid var(--wl-line-dark);
    background: transparent;
    color: var(--wl-paper);
    font-size: 24px;
    line-height: 1;
}
.wl-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wl-drawer__list > li > a {
    display: block;
    padding: 10px 0;
    font-family: var(--wl-font-serif);
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(201, 160, 99, .14);
}
.wl-drawer__list > li > a[aria-current="page"] { color: var(--wl-gold-text); }
.wl-drawer__list ul {
    list-style: none;
    margin: 0 0 var(--wl-s3);
    padding: 0 0 0 var(--wl-s4);
}
.wl-drawer__list ul a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: var(--wl-text-dim);
}
.wl-drawer__foot {
    margin-top: auto;
    padding-top: var(--wl-s5);
    border-top: 1px solid var(--wl-line-dark);
}
.wl-drawer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wl-s3) var(--wl-s5);
    font-size: 13px;
    color: var(--wl-text-dim);
}
.wl-drawer__contact {
    margin-top: var(--wl-s4);
    font-size: 12px;
    line-height: 1.8;
    color: var(--wl-text-dim);
}

/* ---------------------------------------------------------------------------
   6. 首屏 Hero
   --------------------------------------------------------------------------- */
.wl-hero {
    position: relative;
    min-height: min(86vh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--wl-ink);
    color: var(--wl-paper);
}
.wl-hero__slides { position: absolute; inset: 0; }
.wl-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--wl-hero-dur) var(--wl-ease);
}
.wl-hero__slide.is-active { opacity: 1; }
.wl-hero__link { display: block; width: 100%; height: 100%; }
.wl-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.02);
}
.wl-hero__slide.is-active .wl-hero__img {
    animation: wl-kenburns 12s ease-out forwards;
}
@keyframes wl-kenburns {
    from { transform: scale(1.02); }
    to { transform: scale(1.08); }
}
.wl-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 17, 20, .90) 0%, rgba(15, 17, 20, .62) 38%, rgba(15, 17, 20, .10) 78%),
        linear-gradient(0deg, rgba(15, 17, 20, .82) 0%, rgba(15, 17, 20, 0) 42%);
    pointer-events: none;
}
.wl-hero__content {
    position: relative;
    z-index: 2;
    padding-top: var(--wl-header-h);
    padding-bottom: 96px;
    max-width: var(--wl-container);
}
.wl-hero__inner { max-width: 680px; }
.wl-hero__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(72px, 10vw, 136px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: .08em;
    margin: 18px 0 10px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .18);
}
.wl-hero__sub {
    font-family: var(--wl-font-serif);
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.7;
    letter-spacing: .12em;
    color: rgba(244, 239, 230, .82);
    margin: 0;
}
.wl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wl-s4);
    margin-top: var(--wl-s7);
}
.wl-hero__controls {
    position: absolute;
    left: var(--wl-gutter);
    right: var(--wl-gutter);
    bottom: 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--wl-s4);
    max-width: calc(var(--wl-container) - var(--wl-gutter) * 2);
    margin: 0 auto;
    color: var(--wl-text-dim);
    font-size: 12px;
    letter-spacing: .12em;
}
.wl-hero__count { font-family: var(--wl-font-num); white-space: nowrap; }
.wl-hero__count strong { color: var(--wl-paper); font-weight: 500; }
.wl-hero__progress {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(244, 239, 230, .22);
    overflow: hidden;
}
.wl-hero__progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--wl-gold);
    transform: scaleX(0);
    transform-origin: left center;
    animation: wl-hero-progress 7s linear forwards;
}
@keyframes wl-hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.wl-hero.is-paused .wl-hero__progress span { animation-play-state: paused; }
.wl-hero__btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(244, 239, 230, .28);
    background: transparent;
    color: var(--wl-paper);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--wl-dur-hover) var(--wl-ease),
                color var(--wl-dur-hover) var(--wl-ease);
}
.wl-hero__btn:hover { border-color: var(--wl-gold); color: var(--wl-gold-text); }
.wl-hero__btn[hidden] { display: none; }
.wl-hero__dots {
    position: absolute;
    left: var(--wl-gutter);
    bottom: 84px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
.wl-hero__dot {
    width: 28px;
    height: 2px;
    padding: 0;
    border: 0;
    background: rgba(244, 239, 230, .28);
    transition: background var(--wl-dur-hover) var(--wl-ease);
}
.wl-hero__dot[aria-current="true"] { background: var(--wl-gold); }

/* ---------------------------------------------------------------------------
   7. 刊头与面包屑
   --------------------------------------------------------------------------- */
.wl-masthead {
    position: relative;
    padding: 72px 0 60px;
    background: var(--wl-ink);
    color: var(--wl-text);
    overflow: hidden;
}
.wl-masthead::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 360px;
    height: 360px;
    background: url("/static/home/wulan/img/cloud-pattern.svg") no-repeat center / contain;
    opacity: .10;
    pointer-events: none;
}
.wl-masthead--image {
    background-image:
        linear-gradient(90deg, rgba(15, 17, 20, .92), rgba(15, 17, 20, .55)),
        var(--wl-masthead-img);
    background-size: cover;
    background-position: center 30%;
}
.wl-masthead--image::after { opacity: .06; }
.wl-masthead__row {
    display: flex;
    align-items: flex-end;
    gap: var(--wl-s6);
    margin-top: 40px;
}
.wl-masthead__index {
    font-family: var(--wl-font-num);
    font-size: clamp(56px, 8vw, 96px);
    line-height: .8;
    color: var(--wl-gold);
    opacity: .75;
}
.wl-masthead__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: .04em;
    margin: 10px 0 0;
}
.wl-masthead__sub {
    max-width: 620px;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--wl-text-dim);
}

.wl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--wl-text-dim);
}
.wl-breadcrumb a { color: var(--wl-text-dim); }
.wl-breadcrumb a:hover { color: var(--wl-gold-text); }
.wl-breadcrumb span { opacity: .55; }
.wl-breadcrumb__current { color: var(--wl-text); opacity: 1; }

/* 功能页简单页头 */
.wl-page-head {
    background: var(--wl-ink);
    color: var(--wl-text);
    padding: 72px 0 48px;
    position: relative;
    overflow: hidden;
}
.wl-page-head::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 280px;
    height: 280px;
    background: url("/static/home/wulan/img/cloud-pattern.svg") no-repeat center / contain;
    opacity: .08;
    pointer-events: none;
}
.wl-page-head__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 500;
    margin: 18px 0 0;
}
.wl-page-head__sub {
    max-width: 640px;
    margin: 12px 0 0;
    color: var(--wl-text-dim);
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
   8. 首页区块
   --------------------------------------------------------------------------- */
.wl-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.wl-intro__media { position: relative; }
.wl-intro__media::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1px solid var(--wl-line-dark);
    pointer-events: none;
}
.wl-intro__media .wl-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--wl-ink-3);
}
.wl-intro__media .wl-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}
.wl-intro__body .wl-quote { margin-top: var(--wl-s6); }
.wl-intro__text {
    margin: var(--wl-s5) 0 0;
    color: var(--wl-text-dim);
    font-size: 15px;
    line-height: 1.9;
}
.wl-signature {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: var(--wl-s6);
    font-family: var(--wl-font-serif);
    font-size: 26px;
    letter-spacing: .12em;
    color: var(--wl-gold-text);
}
.wl-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--wl-cinnabar);
    color: var(--wl-paper);
    font-family: var(--wl-font-serif);
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
}

/* 引言 */
.wl-quote {
    margin: 0;
    padding: 2px 0 2px var(--wl-s5);
    border-left: 1px solid var(--wl-gold);
    font-family: var(--wl-font-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.65;
    letter-spacing: .02em;
    color: var(--wl-text);
}
.wl-quote--paper { color: var(--wl-ink-text); }
.wl-quote__source {
    display: block;
    margin-top: var(--wl-s3);
    font-family: var(--wl-font-sans);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--wl-text-dim);
}

/* 主推新闻 */
.wl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.wl-feature .wl-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wl-paper-2);
}
.wl-feature .wl-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--wl-ease);
}
.wl-feature:hover .wl-frame img { transform: scale(1.03); }
.wl-feature__body { min-width: 0; }
.wl-feature__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.4;
    font-weight: 500;
    margin: 12px 0 0;
}
.wl-feature__desc {
    margin: 18px 0 0;
    color: var(--wl-ink-text-2);
    font-size: 15px;
    line-height: 1.9;
}
.wl-feature__body .wl-link { margin-top: var(--wl-s5); }
.wl-section--ink .wl-feature__desc,
.wl-section--ink .wl-feature__body .wl-link { color: var(--wl-text-dim); }

/* 新闻列表行 */
.wl-news-list { border-top: 1px solid var(--wl-line-light); }
.wl-news-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 168px;
    gap: var(--wl-s5);
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--wl-line-light);
    transition: color var(--wl-dur-hover) var(--wl-ease);
}
.wl-news-row:hover { color: var(--wl-red-text); }
.wl-news-row__date {
    font-family: var(--wl-font-num);
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--wl-ink-text-2);
}
.wl-news-row__body { min-width: 0; }
.wl-news-row__title {
    display: block;
    font-family: var(--wl-font-serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--wl-ink-text);
    transition: color var(--wl-dur-hover) var(--wl-ease);
}
.wl-news-row:hover .wl-news-row__title { color: var(--wl-red-text); }
.wl-news-row__desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wl-ink-text-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.wl-news-row__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--wl-paper-2);
}
.wl-news-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wl-section--ink .wl-news-list { border-top-color: var(--wl-line-dark); }
.wl-section--ink .wl-news-row { border-bottom-color: var(--wl-line-dark); }
.wl-section--ink .wl-news-row__title { color: var(--wl-text); }
.wl-section--ink .wl-news-row__date,
.wl-section--ink .wl-news-row__desc { color: var(--wl-text-dim); }

/* 卡片网格 */
.wl-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wl-s5);
}
.wl-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-card {
    display: block;
    min-width: 0;
}
.wl-card .wl-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wl-ink-3);
}
.wl-card .wl-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--wl-ease);
}
.wl-card:hover .wl-frame img { transform: scale(1.04); }
.wl-card__body { padding-top: 14px; }
.wl-card__title {
    font-family: var(--wl-font-serif);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    margin: 8px 0 0;
}
.wl-card:hover .wl-card__title { color: var(--wl-gold-text); }
.wl-card__desc {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wl-text-dim);
}
.wl-section--paper .wl-card__title { color: var(--wl-ink-text); }
.wl-section--paper .wl-card:hover .wl-card__title { color: var(--wl-red-text); }
.wl-section--paper .wl-card__desc { color: var(--wl-ink-text-2); }

/* 爱心卡片 */
.wl-love-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wl-s5);
}
.wl-love-card {
    display: block;
    min-width: 0;
}
.wl-love-card .wl-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wl-ink-3);
}
.wl-love-card .wl-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 600ms var(--wl-ease);
}
.wl-love-card:hover .wl-frame img { transform: scale(1.04); }
.wl-love-card__body { padding-top: 14px; }
.wl-love-card__title {
    font-family: var(--wl-font-serif);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;
    margin: 8px 0 0;
}
.wl-love-card:hover .wl-love-card__title { color: var(--wl-gold-text); }
.wl-love-card__desc {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wl-text-dim);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.wl-section--paper .wl-love-card__title { color: var(--wl-ink-text); }
.wl-section--paper .wl-love-card:hover .wl-love-card__title { color: var(--wl-red-text); }
.wl-section--paper .wl-love-card__desc { color: var(--wl-ink-text-2); }

/* 音乐 */
.wl-music__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
.wl-disc {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--wl-ink-2);
    overflow: hidden;
    animation: wl-spin 24s linear infinite;
}
.wl-disc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wl-disc::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--wl-ink);
    box-shadow: 0 0 0 3px rgba(244, 239, 230, .18);
}
.wl-disc:hover { animation-play-state: paused; }
@keyframes wl-spin {
    to { transform: rotate(360deg); }
}
.wl-music__body .wl-h2 { margin-top: 12px; }
.wl-tracklist {
    list-style: none;
    margin: var(--wl-s6) 0 0;
    padding: 0;
    border-top: 1px solid var(--wl-line-dark);
    counter-reset: wl-track;
}
.wl-track {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--wl-s4);
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--wl-line-dark);
}
.wl-track__no {
    font-family: var(--wl-font-num);
    font-size: 13px;
    color: var(--wl-gold);
    letter-spacing: .08em;
}
.wl-track__no::before {
    counter-increment: wl-track;
    content: counter(wl-track, decimal-leading-zero);
}
.wl-track__title {
    font-family: var(--wl-font-serif);
    font-size: 18px;
    line-height: 1.5;
}
.wl-track__meta {
    font-size: 12px;
    color: var(--wl-text-dim);
    white-space: nowrap;
}
.wl-track__audio { max-width: 220px; height: 32px; }
.wl-music__actions { margin-top: var(--wl-s6); }

/* 图片墙 */
.wl-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 240px;
    gap: var(--wl-s4);
}
.wl-gallery__item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--wl-ink-3);
}
.wl-gallery__item:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}
.wl-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.wl-gallery__btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wl-paper);
    text-align: left;
    position: relative;
    overflow: hidden;
}
.wl-gallery__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--wl-ease);
}
.wl-gallery__btn:hover img { transform: scale(1.04); }
.wl-gallery__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 18px 14px;
    font-size: 13px;
    line-height: 1.6;
    background: linear-gradient(to top, rgba(15, 17, 20, .82), rgba(15, 17, 20, 0));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--wl-dur-hover) var(--wl-ease),
                transform var(--wl-dur-hover) var(--wl-ease);
}
.wl-gallery__btn:hover .wl-gallery__cap,
.wl-gallery__btn:focus-visible .wl-gallery__cap {
    opacity: 1;
    transform: none;
}

/* 联系横幅 */
.wl-cta {
    background: var(--wl-ink-2);
    color: var(--wl-text);
    border-top: 1px solid var(--wl-line-dark);
    border-bottom: 1px solid var(--wl-line-dark);
    padding: 72px 0;
}
.wl-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wl-s7);
}
.wl-cta__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.3;
    font-weight: 500;
    margin: 12px 0 0;
}
.wl-cta__text {
    margin: 12px 0 0;
    color: var(--wl-text-dim);
    font-size: 14px;
}
.wl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wl-s3);
    flex: none;
}

/* ---------------------------------------------------------------------------
   9. 列表页与空状态
   --------------------------------------------------------------------------- */
.wl-list-page { padding-top: 72px; }
.wl-list-page .wl-feature { margin-bottom: var(--wl-s8); }
.wl-list-page .wl-news-list { margin-top: 0; }
.wl-pager-wrap { margin-top: var(--wl-s9); }

.wl-empty {
    padding: var(--wl-s10) 0;
    text-align: center;
    color: var(--wl-ink-text-2);
}
.wl-empty__title {
    font-family: var(--wl-font-serif);
    font-size: 26px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--wl-ink-text);
}
.wl-empty p { margin: 0 0 20px; font-size: 14px; }
.wl-empty--light { color: var(--wl-text-dim); }
.wl-empty--light .wl-empty__title { color: var(--wl-text); }

.wl-music-page { padding-top: 72px; }
.wl-music-page__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
.wl-music-page__body { min-width: 0; }

.wl-gallery-page { padding-top: 72px; }

/* ---------------------------------------------------------------------------
   10. 详情页
   --------------------------------------------------------------------------- */
.wl-article { padding-top: 72px; }
.wl-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.wl-article__main { min-width: 0; max-width: var(--wl-reading); }
.wl-article__head { margin-bottom: var(--wl-s7); }
.wl-article__title {
    font-family: var(--wl-font-serif);
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.35;
    font-weight: 500;
    margin: 14px 0 0;
}
.wl-article__sub {
    margin: 14px 0 0;
    font-size: 16px;
    color: var(--wl-ink-text-2);
}
.wl-article__figure {
    margin: 0 0 var(--wl-s7);
    background: var(--wl-paper-2);
    overflow: hidden;
}
.wl-article__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 30%;
}
.wl-article__figure.is-tall img {
    aspect-ratio: auto;
    max-height: 82vh;
    object-fit: contain;
    margin: 0 auto;
}
.wl-article__rail {
    position: sticky;
    top: calc(var(--wl-header-h) + 32px);
    min-width: 0;
}
.wl-rail {
    border-top: 1px solid var(--wl-line-light);
    padding-top: var(--wl-s4);
}
.wl-rail__title {
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--wl-ink-text-2);
    margin: 0 0 12px;
}
.wl-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wl-rail__list li { border-bottom: 1px solid var(--wl-line-light); }
.wl-rail__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--wl-ink-text);
}
.wl-rail__list a:hover { color: var(--wl-red-text); }
.wl-rail__list a[aria-current="page"] { color: var(--wl-red-text); }
.wl-rail__card {
    margin-top: var(--wl-s6);
    padding: var(--wl-s5);
    background: var(--wl-ink);
    color: var(--wl-text);
}
.wl-rail__card .wl-kicker { color: var(--wl-gold-text); }
.wl-rail__card p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--wl-text-dim);
}
.wl-rail__card .wl-btn { margin-top: var(--wl-s4); width: 100%; }

.wl-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wl-s4);
    margin-top: var(--wl-s9);
    padding-top: var(--wl-s5);
    border-top: 1px solid var(--wl-line-light);
}
.wl-prevnext a,
.wl-prevnext span {
    display: block;
    padding: 16px;
    border: 1px solid var(--wl-line-light);
    font-size: 13px;
    line-height: 1.7;
    color: var(--wl-ink-text-2);
}
.wl-prevnext a:hover { border-color: var(--wl-gold); color: var(--wl-red-text); }
.wl-prevnext strong {
    display: block;
    margin-top: 4px;
    font-family: var(--wl-font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--wl-ink-text);
}
.wl-prevnext .is-next { text-align: right; }

.wl-comments {
    margin-top: var(--wl-s10);
    padding-top: var(--wl-s7);
    border-top: 1px solid var(--wl-line-light);
}
.wl-comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--wl-line-light);
}
.wl-comment__meta {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--wl-ink-text-2);
}

/* ---------------------------------------------------------------------------
   11. 关于页
   --------------------------------------------------------------------------- */
.wl-about { padding-top: 72px; }
.wl-about__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
.wl-about__body { max-width: var(--wl-reading); min-width: 0; }
.wl-about__head { margin-bottom: var(--wl-s7); }
.wl-about__head .wl-lead { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   12. 联系页
   --------------------------------------------------------------------------- */
.wl-contact { padding-top: 72px; }
.wl-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
.wl-contact__info .wl-lead { margin-top: 18px; }
.wl-contact-list {
    list-style: none;
    margin: var(--wl-s6) 0 0;
    padding: 0;
    border-top: 1px solid var(--wl-line-light);
}
.wl-contact-list li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--wl-s4);
    padding: 12px 0;
    border-bottom: 1px solid var(--wl-line-light);
    font-size: 14px;
    line-height: 1.7;
}
.wl-contact-list span:first-child { color: var(--wl-ink-text-2); }
.wl-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wl-s3);
    margin-top: var(--wl-s6);
}
.wl-contact__actions .wl-btn--ghost {
    border-color: var(--wl-line-light);
    color: var(--wl-ink-text);
}
.wl-contact__actions .wl-btn--ghost:hover {
    border-color: var(--wl-gold);
    color: var(--wl-red-text);
}
.wl-map-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: var(--wl-s6);
    background:
        url("/static/home/wulan/img/cloud-pattern.svg") no-repeat center / 60%,
        var(--wl-ink);
    color: var(--wl-text);
    border: 1px solid var(--wl-line-dark);
}
.wl-map-card:hover { color: var(--wl-gold-text); }
.wl-map-card__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--wl-gold);
    color: var(--wl-gold);
    font-size: 18px;
    margin-bottom: auto;
}
.wl-map-card__label {
    display: block;
    margin-top: var(--wl-s6);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--wl-gold-text);
}
.wl-map-card__address {
    display: block;
    margin-top: 8px;
    font-family: var(--wl-font-serif);
    font-size: 20px;
    line-height: 1.5;
}
.wl-contact__prose { margin-top: var(--wl-s7); }

/* ---------------------------------------------------------------------------
   13. 表单与会员
   --------------------------------------------------------------------------- */
.wl-form-wrap { max-width: 640px; margin: 0 auto; }
.wl-form-wrap--wide { max-width: 920px; }
.wl-form-wrap--narrow { max-width: 460px; }

.wl-form { max-width: 640px; }
.wl-field { margin-bottom: var(--wl-s6); }
.wl-field > label {
    display: block;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--wl-ink-text-2);
    margin-bottom: 8px;
}
.wl-required { color: var(--wl-red-text); margin-left: 4px; }

.wl-input,
.wl-textarea {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--wl-line-light);
    border-radius: 0;
    background: transparent;
    color: var(--wl-ink-text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--wl-dur-hover) var(--wl-ease);
}
.wl-input:focus,
.wl-textarea:focus {
    outline: none;
    border-bottom-color: var(--wl-gold);
}
.wl-textarea { min-height: 130px; resize: vertical; }
.wl-form__actions { margin-top: var(--wl-s8); }
.wl-form__error { color: var(--wl-danger); font-size: 14px; margin: 0 0 var(--wl-s5); }
.wl-form__success { color: var(--wl-red-text); font-size: 14px; margin: 0 0 var(--wl-s5); }
.wl-captcha { display: flex; align-items: flex-end; gap: var(--wl-s4); }
.wl-captcha .wl-input { flex: 1; }
.wl-captcha img { height: 40px; cursor: pointer; }

/* 搜索条：与表单底线不同，使用完整边框强调可输入区域 */
.wl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 16px;
    border: 1px solid var(--wl-line-light);
    background: var(--wl-paper);
}
.wl-search .wl-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 10px 0;
}
.wl-search .wl-input:focus { border: 0; }
.wl-search .wl-btn { flex: none; min-height: 44px; }
.wl-search:focus-within { border-color: var(--wl-gold); }

/* 无封面时的占位框，保持卡片网格对齐 */
.wl-frame.wl-frame--placeholder {
    display: block;
    background: var(--wl-paper-2) url("/static/home/wulan/img/cloud-pattern.svg") center / 42% no-repeat;
    border: 1px solid var(--wl-line-light);
}
.wl-section--ink .wl-frame.wl-frame--placeholder,
.wl-section--ink-2 .wl-frame.wl-frame--placeholder {
    background-color: var(--wl-ink-3);
    border-color: var(--wl-line-dark);
}
.wl-form__note {
    margin-top: var(--wl-s5);
    font-size: 13px;
    line-height: 1.8;
    color: var(--wl-ink-text-2);
}
.wl-form__note a { color: var(--wl-red-text); border-bottom: 1px solid currentColor; }

.wl-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wl-s4) var(--wl-s8);
    margin: var(--wl-s7) 0 var(--wl-s9);
    padding: var(--wl-s6) 0;
    border-top: 1px solid var(--wl-line-light);
    border-bottom: 1px solid var(--wl-line-light);
}
.wl-account__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wl-s4);
    margin: 0;
}
.wl-account__label { font-size: 12px; letter-spacing: .08em; color: var(--wl-ink-text-2); }
.wl-account__value {
    margin: 0;
    font-size: 15px;
    color: var(--wl-ink-text);
    text-align: right;
    overflow-wrap: anywhere;
}
.wl-account-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wl-s9);
}
.wl-account-forms .wl-form { max-width: none; }

/* ---------------------------------------------------------------------------
   14. 分页
   --------------------------------------------------------------------------- */
.wl-pager ul,
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    letter-spacing: .08em;
}
.wl-pager li,
.pagination li { display: inline-flex; }
.wl-pager a,
.wl-pager span,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--wl-line-light);
    color: var(--wl-ink-text-2);
    transition: border-color var(--wl-dur-hover) var(--wl-ease),
                color var(--wl-dur-hover) var(--wl-ease),
                background var(--wl-dur-hover) var(--wl-ease);
}
.wl-pager a:hover,
.pagination a:hover {
    border-color: var(--wl-gold);
    color: var(--wl-red-text);
}
.wl-pager .is-current span,
.pagination li.active span {
    background: var(--wl-cinnabar);
    border-color: var(--wl-cinnabar);
    color: var(--wl-paper);
}
.wl-pager .is-disabled,
.pagination li.disabled span {
    opacity: .35;
    pointer-events: none;
}
.wl-pager .wl-pager__num { color: var(--wl-ink-text); }

/* 深色区块内分页 */
.wl-section--ink .wl-pager a,
.wl-section--ink .wl-pager span {
    border-color: var(--wl-line-dark);
    color: var(--wl-text-dim);
}
.wl-section--ink .wl-pager .is-current span {
    background: var(--wl-cinnabar);
    border-color: var(--wl-cinnabar);
    color: var(--wl-paper);
}

/* ---------------------------------------------------------------------------
   15. 灯箱
   --------------------------------------------------------------------------- */
.wl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(15, 17, 20, .96);
    color: var(--wl-paper);
    display: none;
    align-items: center;
    justify-content: center;
}
.wl-lightbox[data-open="true"] { display: flex; }
.wl-lightbox__figure {
    position: relative;
    max-width: 92vw;
    max-height: 86vh;
    margin: 0;
    text-align: center;
}
.wl-lightbox__img {
    max-width: 92vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.wl-lightbox__caption {
    margin-top: var(--wl-s4);
    font-size: 13px;
    color: var(--wl-text-dim);
    letter-spacing: .06em;
}
.wl-lightbox__btn,
.wl-lightbox__close {
    position: absolute;
    border: 1px solid rgba(244, 239, 230, .25);
    background: transparent;
    color: var(--wl-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--wl-dur-hover) var(--wl-ease),
                color var(--wl-dur-hover) var(--wl-ease);
}
.wl-lightbox__btn:hover,
.wl-lightbox__close:hover { border-color: var(--wl-gold); color: var(--wl-gold-text); }
.wl-lightbox__btn {
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 22px;
}
.wl-lightbox__btn--prev { left: var(--wl-s5); }
.wl-lightbox__btn--next { right: var(--wl-s5); }
.wl-lightbox__close {
    top: var(--wl-s5);
    right: var(--wl-s5);
    width: 44px;
    height: 44px;
    font-size: 24px;
}
.wl-lightbox__count {
    position: absolute;
    bottom: var(--wl-s5);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--wl-font-num);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--wl-text-dim);
}

/* ---------------------------------------------------------------------------
   16. 提示页
   --------------------------------------------------------------------------- */
.wl-prompt {
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--wl-s10) 0;
}
.wl-prompt__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--wl-gold);
    color: var(--wl-gold);
    font-size: 22px;
    margin-bottom: var(--wl-s5);
}
.wl-prompt .wl-h2 { color: var(--wl-ink-text); }
.wl-prompt .wl-body { color: var(--wl-ink-text-2); margin: 12px 0 24px; }

/* ---------------------------------------------------------------------------
   17. 页脚
   --------------------------------------------------------------------------- */
.wl-footer {
    background: var(--wl-ink);
    color: var(--wl-text);
    padding: var(--wl-s9) 0 28px;
    border-top: 1px solid var(--wl-line-dark);
    position: relative;
    overflow: hidden;
}
.wl-footer::before {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 420px;
    height: 420px;
    background: url("/static/home/wulan/img/cloud-pattern.svg") no-repeat center / contain;
    opacity: .07;
    pointer-events: none;
}
.wl-footer__top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
    gap: var(--wl-s7);
    padding-bottom: var(--wl-s7);
}
.wl-footer__brand img {
    width: auto;
    height: 38px;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.wl-footer__desc {
    max-width: 320px;
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--wl-text-dim);
}
.wl-footer__title {
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--wl-gold-text);
    margin: 0 0 16px;
}
.wl-footer__nav,
.wl-footer__contact,
.wl-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wl-footer__nav li,
.wl-footer__contact li,
.wl-footer__links li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wl-text-dim);
}
.wl-footer a { color: var(--wl-text-dim); }
.wl-footer a:hover { color: var(--wl-gold-text); }
.wl-footer__legal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--wl-line-dark);
    font-size: 12px;
    line-height: 1.7;
    color: var(--wl-text-dim);
}
.wl-footer__legal a { color: var(--wl-text-dim); }

/* ---------------------------------------------------------------------------
   18. 滚动进入
   --------------------------------------------------------------------------- */
.wl-js .wl-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--wl-dur-enter) var(--wl-ease),
                transform var(--wl-dur-enter) var(--wl-ease);
}
.wl-js .wl-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
   19. 响应式
   --------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    :root {
        --wl-gutter: 40px;
        --wl-section-y: 104px;
    }
    .wl-nav__list { gap: 22px; }
}

@media (max-width: 1080px) {
    :root {
        --wl-header-h: 72px;
        --wl-section-y: 88px;
    }
    .wl-nav,
    .wl-header__side { display: none; }
    .wl-burger { display: block; }
    .wl-brand img { height: 32px; }
    .wl-intro__grid,
    .wl-feature,
    .wl-music__grid,
    .wl-music-page__grid,
    .wl-contact__grid,
    .wl-about__grid,
    .wl-article__grid {
        grid-template-columns: 1fr;
    }
    .wl-article__rail { position: static; }
    .wl-about__grid .wl-rail { order: -1; }
    .wl-card-grid,
    .wl-love-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
    .wl-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 1; }
    .wl-gallery__item:nth-child(6n + 4) { grid-row: span 1; }
    .wl-footer__top { grid-template-columns: 1.5fr 1fr; }
    .wl-cta__inner { flex-direction: column; align-items: flex-start; }
    .wl-hero__dots { bottom: 72px; }
}

@media (max-width: 860px) {
    :root {
        --wl-gutter: 32px;
        --wl-section-y: 72px;
        --wl-reading: 100%;
    }
    .wl-display { font-size: clamp(42px, 8vw, 64px); }
    .wl-section-head { flex-direction: column; align-items: flex-start; }
    .wl-section-head__side { padding-bottom: 0; }
    .wl-news-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }
    .wl-news-row__thumb { display: none; }
    .wl-feature { grid-template-columns: 1fr; }
    .wl-feature .wl-frame { aspect-ratio: 16 / 10; }
    .wl-intro__media::before { inset: 12px -12px -12px 12px; }
    .wl-article__grid { gap: var(--wl-s7); }
    .wl-prevnext { grid-template-columns: 1fr; }
    .wl-prevnext .is-next { text-align: left; }
    .wl-footer__top { grid-template-columns: 1fr 1fr; gap: var(--wl-s6); }
}

@media (max-width: 640px) {
    :root {
        --wl-gutter: 20px;
        --wl-header-h: 64px;
        --wl-section-y: 64px;
    }
    body { font-size: 15px; }
    .wl-brand img { height: 28px; }
    .wl-hero { min-height: 68vh; }
    .wl-hero__content { padding-bottom: 88px; }
    .wl-hero__title { font-size: clamp(56px, 18vw, 82px); margin-top: 14px; }
    .wl-hero__sub { font-size: 15px; letter-spacing: .08em; }
    .wl-hero__actions { margin-top: var(--wl-s6); }
    .wl-hero__actions .wl-btn { flex: 1 1 auto; }
    .wl-hero__controls { bottom: 18px; gap: 10px; }
    .wl-hero__btn { width: 32px; height: 32px; }
    .wl-hero__btn[data-hero-prev],
    .wl-hero__btn[data-hero-next] { display: none; }
    .wl-hero__progress { min-width: 0; }
    .wl-hero__dots { left: var(--wl-gutter); bottom: 66px; }
    .wl-hero__dot { width: 20px; }
    .wl-masthead { padding: 56px 0 40px; }
    .wl-masthead__row { margin-top: 28px; gap: var(--wl-s4); }
    .wl-masthead__index { font-size: 52px; }
    .wl-masthead__title { font-size: clamp(32px, 9vw, 44px); }
    .wl-page-head { padding: 56px 0 36px; }
    .wl-card-grid,
    .wl-love-grid { grid-template-columns: 1fr; }
    .wl-gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .wl-gallery__item:nth-child(6n + 1) { grid-column: span 1; }
    .wl-love-card .wl-frame { aspect-ratio: 4 / 3; }
    .wl-music__grid,
    .wl-music-page__grid { grid-template-columns: 1fr; }
    .wl-disc { max-width: 220px; margin: 0 auto; }
    .wl-track { grid-template-columns: 32px minmax(0, 1fr); }
    .wl-track__meta { grid-column: 2; }
    .wl-track__audio { max-width: 100%; }
    .wl-account { grid-template-columns: 1fr; }
    .wl-account-forms { grid-template-columns: 1fr; gap: var(--wl-s7); }
    .wl-contact-list li { grid-template-columns: 76px minmax(0, 1fr); }
    .wl-footer__top { grid-template-columns: 1fr; gap: var(--wl-s6); }
    .wl-footer__legal { flex-direction: column; }
    .wl-cta { padding: 56px 0; }
    .wl-cta__actions { width: 100%; }
    .wl-cta__actions .wl-btn { flex: 1 1 auto; }
    .wl-news-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .wl-news-row__date { order: 2; }
    .wl-news-row__body { order: 1; }
    .wl-lightbox__btn { width: 40px; height: 40px; }
    .wl-lightbox__btn--prev { left: 8px; }
    .wl-lightbox__btn--next { right: 8px; }
}

@media (max-width: 420px) {
    .wl-hero__controls { flex-wrap: wrap; }
    .wl-hero__progress { order: 10; flex-basis: 100%; }
    .wl-article__title { font-size: 28px; }
    .wl-section-head__title { grid-template-columns: 1fr; gap: 8px; }
    .wl-index { font-size: 34px; }
}