/* 首页视觉精修：在既有「纸张 / 墨绿 / 手绘」叙事上收束细节，不改变功能结构。 */
:root {
    --home-ink: #1b3027;
    --home-ink-soft: rgba(27, 48, 39, 0.68);
    --home-gold: #aa7b4b;
    --home-paper: #f7f3ec;
    --home-line: rgba(27, 48, 39, 0.12);
    --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body::selection {
    color: #fffdf8;
    background: rgba(27, 48, 39, 0.72);
}

/* 固定导航保持像一层轻薄的纸，而不是突兀的工具栏。 */
.main-header {
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    transition: background-color 320ms var(--home-ease), box-shadow 320ms var(--home-ease), border-color 320ms var(--home-ease);
}

.main-header.is-over-light {
    background: rgba(247, 243, 236, 0.72);
    border-bottom: 1px solid rgba(27, 48, 39, 0.06);
    box-shadow: 0 8px 30px rgba(27, 48, 39, 0.035);
}

.main-header .nav-section-toggle,
.main-header .nav-section--utils .menu-btn {
    letter-spacing: 0.09em;
}

.main-header .nav-section-toggle:focus-visible,
.main-header .nav-tap-item:focus-visible,
.bc-journey-link:focus-visible,
.footer-list a:focus-visible,
.footer-icon-link:focus-visible {
    outline: 2px solid rgba(170, 123, 75, 0.72);
    outline-offset: 4px;
}

/* 首屏：强化标题的呼吸感，让手绘线条仍然是主角。 */
#topSection.narrative-chapter::before {
    background-size: 180px 180px, auto, auto, auto, auto, auto;
}

.hero-title-frame::before,
.hero-title-frame::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0.42;
    pointer-events: none;
}

.hero-title-frame::before {
    top: 4px;
    left: 4px;
    border-top: 1px solid var(--home-ink);
    border-left: 1px solid var(--home-ink);
}

.hero-title-frame::after {
    right: 4px;
    bottom: 4px;
    border-right: 1px solid var(--home-ink);
    border-bottom: 1px solid var(--home-ink);
}

.hero-title-frame {
    isolation: isolate;
}

.hero-title-whisper {
    --whisper-x: 91%;
    --whisper-y: -12%;
    --whisper-r: 6deg;
    position: absolute;
    top: var(--whisper-y);
    left: var(--whisper-x);
    z-index: 0;
    width: clamp(5.9rem, 9vw, 8rem);
    height: auto;
    white-space: nowrap;
    opacity: 0.56;
    overflow: visible;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--whisper-r));
    transform-origin: center;
}

.hero-title-whisper text {
    font-family: 'Zhi Mang Xing', 'STXingkai', 'KaiTi', cursive;
    font-size: 65px;
    font-weight: 400;
    letter-spacing: 8px;
    fill: rgba(27, 48, 39, 0.34);
    stroke: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    clip-path: inset(0 100% 0 0);
}

#topSection.hero-sketch.is-inked .hero-title-whisper text {
    animation: heroWhisperWrite 1.35s var(--home-ease) 0.9s forwards;
}

#topSection.hero-sketch.is-inked .hero-title-whisper {
    animation: heroWhisperSettle 1.35s var(--home-ease) 0.9s both;
}

@keyframes heroWhisperWrite {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; }
    12% { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes heroWhisperSettle {
    0% { opacity: 0; transform: translate(-50%, -43%) rotate(calc(var(--whisper-r) - 3deg)) scale(1.08); }
    100% { opacity: 0.56; transform: translate(-50%, -50%) rotate(var(--whisper-r)) scale(1); }
}

#topSection.hero-sketch .main-title {
    position: relative;
    z-index: 2;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.hero-title-ink { z-index: 1; }

.hero-sketch-aside { letter-spacing: 0.075em; }

/* 每一个章节采用一致的轻分隔，增强纵向阅读的联动感。 */
.quote-section.narrative-chapter,
.bg-background.narrative-chapter,
.bc-journey-section.narrative-chapter,
.horizontal-scroll-section.narrative-chapter,
.center-text-section.narrative-chapter {
    isolation: isolate;
}

.highlight-quote.narrative-reveal::before {
    content: '“';
    display: block;
    height: 0.52em;
    margin-left: -0.14em;
    color: rgba(170, 123, 75, 0.45);
    font-family: Georgia, serif;
    font-size: 3.1em;
    font-weight: 400;
    line-height: 0.65;
}

/* 语录卡不再像普通矩形：用极轻的层次和克制的悬浮反馈承载文字。 */
.bg-background.narrative-chapter .testimonial-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 10px 26px rgba(27, 48, 39, 0.025);
}

.bg-background.narrative-chapter .testimonial-item::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(170, 123, 75, 0.52), transparent);
    transform: scaleY(0.35);
    transition: transform 400ms var(--home-ease);
}

.bg-background.narrative-chapter .testimonial-item:hover::before { transform: scaleY(1); }

.bg-background.narrative-chapter .testimonial-item:hover {
    box-shadow: 0 14px 34px rgba(27, 48, 39, 0.075);
}

.testimonial-name { letter-spacing: 0.06em; }
.testimonial-role { letter-spacing: 0.045em; }

/* 漂流数据区与摄影区的节奏统一。 */
.bc-journey-section.narrative-chapter .bc-journey-main,
.bc-journey-section.narrative-chapter .bc-journey-aside {
    border-color: var(--home-line);
}

.bc-journey-section.narrative-chapter .bc-journey-link {
    background: rgba(255, 253, 248, 0.88);
    border-color: rgba(27, 48, 39, 0.32);
    color: var(--home-ink);
    box-shadow: 0 6px 16px rgba(27, 48, 39, 0.07);
    transition: color 240ms var(--home-ease), background 240ms var(--home-ease), transform 240ms var(--home-ease), box-shadow 240ms var(--home-ease);
}

.bc-journey-section.narrative-chapter .bc-journey-link:hover {
    color: #fffdf8;
    background: var(--home-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(27, 48, 39, 0.14);
}

.horizontal-scroll-section.narrative-chapter .photo-item {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.52);
}

.horizontal-scroll-section.narrative-chapter .photo-caption {
    padding: 18px 18px 14px;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
}

.gallery-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: -8px 0 12px;
    color: rgba(27, 48, 39, 0.44);
    font-family: var(--font-serif);
    line-height: 1;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 520ms var(--home-ease), transform 520ms var(--home-ease), max-height 520ms var(--home-ease), margin 520ms var(--home-ease);
}

.gallery-hint.is-dismissed {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    pointer-events: none;
}

.gallery-hint-cn {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
}

.gallery-hint-en {
    font-family: var(--font-display);
    font-size: 0.57rem;
    font-style: italic;
    letter-spacing: 0.14em;
}

.gallery-hint-arrow {
    width: 34px;
    height: 9px;
    animation: galleryHintDrift 1.9s var(--home-ease) infinite;
}

@keyframes galleryHintDrift {
    0%, 100% { transform: translateX(0); opacity: 0.65; }
    50% { transform: translateX(5px); opacity: 1; }
}

.scroll-thumb {
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(255,255,255,0.55) inset;
}

/* 收束区把视线带向页脚，避免突兀结束。 */
.center-text.narrative-fade {
    color: var(--home-ink);
    letter-spacing: 0.08em;
}

.center-text.narrative-fade::before {
    content: '— 序章 —';
    display: block;
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
    font-size: 0.68em;
    font-style: italic;
    letter-spacing: 0.28em;
    color: rgba(170, 123, 75, 0.72);
}

#pageFooter {
    border-top: 1px solid rgba(27, 48, 39, 0.1);
}

#pageFooter .footer-brand { letter-spacing: 0.14em; }
#pageFooter .footer-col-title { color: var(--home-ink); }

#pageFooter .footer-list a,
#pageFooter .footer-list .doudou-trigger {
    transition: color 180ms var(--home-ease), transform 180ms var(--home-ease);
}

#pageFooter .footer-list a:hover,
#pageFooter .footer-list .doudou-trigger:hover {
    color: var(--home-gold);
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .main-header.is-over-light { background: rgba(247, 243, 236, 0.86); }
    .hero-title-frame::before, .hero-title-frame::after { width: 11px; height: 11px; }
    .hero-title-whisper { width: 5.25rem; opacity: 0.46; }
    .highlight-quote.narrative-reveal::before { font-size: 2.45em; }
    .center-text.narrative-fade { letter-spacing: 0.045em; }
    .horizontal-scroll-section.narrative-chapter .photo-caption { padding: 14px 14px 12px; }
    .gallery-hint { margin: -4px 0 10px; gap: 7px; }
    .gallery-hint-en { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bc-journey-section.narrative-chapter .bc-journey-link:hover,
    #pageFooter .footer-list a:hover,
    #pageFooter .footer-list .doudou-trigger:hover { transform: none; }

    .hero-title-whisper text {
        animation: none !important;
        clip-path: none;
    }

    .gallery-hint-arrow { animation: none; }
}