/* ========== 叙事长卷：章节联动 ========== */
:root {
    --font-display: 'Playfair Display', 'Noto Serif SC', serif;
    --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
    --narrative-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --narrative-duration: 0.9s;
    --ink: 0;
    --tint: 0;
    --breathe: 0;
    --trail-draw: 0;
    --flow: 0;
    /* 纸色连续谱：全程同一卷，避免硬切到纯白 */
    --paper-a: #f7f4ef;
    --paper-b: #f3eee6;
    --paper-c: #f6f1e8;
    --paper-d: #faf7f2;
    --paper-e: #f8f4ec;
    --paper-f: #f4efe6;
    --ink-moss: #1a2f26;
    --ink-moss-soft: rgba(26, 47, 38, 0.08);
    --font-hand: 'Caveat', 'Ma Shan Zheng', cursive;
    --font-hand-cn: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', cursive;
}

/* 整页底纸：内容区透明，让长卷底色贯通 */
html {
    background: var(--paper-a);
}

body {
    background: var(--paper-a) !important;
}

.page-content.show,
html.home-intro-seen .page-content {
    background: transparent;
}

/* 固定氛围层：随滚动缓慢漂移的暖色雾，把各章焊成一体 */
.narrative-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--narrative-ease);
    background:
        radial-gradient(
            ellipse 70% 45% at 18% calc(12% + var(--flow) * 68%),
            rgba(26, 47, 38, 0.045),
            transparent 58%
        ),
        radial-gradient(
            ellipse 65% 40% at 82% calc(88% - var(--flow) * 70%),
            rgba(180, 140, 90, 0.07),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--paper-a) 92%, #e8dfd2) 0%,
            color-mix(in srgb, var(--paper-c) 88%, #ebe3d6) 45%,
            color-mix(in srgb, var(--paper-f) 90%, #e6ddd0) 100%
        );
}

.narrative-atmosphere.is-ready {
    opacity: 1;
}

html.narrative-on-hero:not(.hero-sketch) .narrative-atmosphere {
    opacity: 0;
}

/* 右侧章节进度轨（桌面） */
.narrative-rail {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--narrative-ease);
}

.narrative-rail.is-ready {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1100px) {
    .narrative-rail {
        display: flex;
    }
}

.narrative-rail-track {
    position: absolute;
    right: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.narrative-rail-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(26, 47, 38, 0.55);
    transition: height 0.12s linear;
}

.narrative-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

.narrative-rail-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.narrative-rail-label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.25s var(--narrative-ease), color 0.25s ease, transform 0.25s var(--narrative-ease);
    white-space: nowrap;
}

.narrative-rail-item:hover .narrative-rail-label,
.narrative-rail-item.is-active .narrative-rail-label,
.narrative-rail:hover .narrative-rail-label {
    opacity: 1;
    transform: translateX(0);
}

.narrative-rail-item.is-active .narrative-rail-label {
    color: rgba(26, 47, 38, 0.82);
}

.narrative-rail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(26, 47, 38, 0.28);
    background: #fff;
    flex-shrink: 0;
    transition: transform 0.3s var(--narrative-ease), background 0.3s ease, border-color 0.3s ease;
}

.narrative-rail-item.is-active .narrative-rail-dot {
    background: var(--ink-moss);
    border-color: var(--ink-moss);
    transform: scale(1.25);
}

.narrative-rail-item.is-passed .narrative-rail-dot {
    background: rgba(26, 47, 38, 0.35);
    border-color: rgba(26, 47, 38, 0.35);
}

/* 深色首屏时进度轨变浅（手绘纸面首屏沿用墨色轨） */
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-track {
    background: rgba(255, 255, 255, 0.22);
}
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-progress {
    background: rgba(255, 255, 255, 0.7);
}
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-dot {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-item.is-active .narrative-rail-dot,
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-item.is-passed .narrative-rail-dot {
    background: #fff;
    border-color: #fff;
}
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-label {
    color: rgba(255, 255, 255, 0.45);
}
html.narrative-on-hero:not(.hero-sketch) .narrative-rail-item.is-active .narrative-rail-label {
    color: rgba(255, 255, 255, 0.88);
}

/* 跨模块叙事线：挂在整页内容层，不受单个 section 边界裁切 */
.page-content {
    position: relative;
    isolation: isolate;
}

.narrative-thread-layer {
    --thread-len: 1;
    --thread-progress: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.72;
    contain: layout paint;
}

.narrative-thread-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible;
}

@media (max-width: 767px) {
    .narrative-thread-layer {
        opacity: 0.42;
    }

    .narrative-thread-path--wash {
        stroke-width: 12;
    }

    .narrative-thread-dot {
        width: 7px;
        height: 7px;
        box-shadow: 0 0 0 5px rgba(247, 244, 239, 0.36);
    }
}

.narrative-thread-path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.narrative-thread-path--wash {
    stroke: rgba(26, 47, 38, 0.075);
    stroke-width: 18;
    stroke-dasharray: 2 22;
    opacity: 0.9;
}

.narrative-thread-path--ink {
    stroke: rgba(26, 47, 38, 0.24);
    stroke-width: 1.35;
    stroke-dasharray: var(--thread-len);
    stroke-dashoffset: calc(var(--thread-len) * (1 - var(--thread-progress)));
    transition: stroke-dashoffset 0.12s linear;
}

.narrative-thread-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(26, 47, 38, 0.22);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-a) 70%, #fff);
    box-shadow: 0 0 0 7px rgba(247, 244, 239, 0.42);
    transform: translate(-50%, -50%) scale(0.82);
    opacity: 0.36;
    transition:
        opacity 0.35s var(--narrative-ease),
        transform 0.35s var(--narrative-ease),
        background 0.35s ease,
        border-color 0.35s ease;
}

.narrative-thread-dot.is-passed,
.narrative-thread-dot.is-active {
    opacity: 1;
    background: var(--ink-moss);
    border-color: var(--ink-moss);
}

.narrative-thread-dot.is-active {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 9px rgba(26, 47, 38, 0.06), 0 0 22px rgba(26, 47, 38, 0.12);
}

.narrative-chapter,
#pageFooter {
    position: relative;
    z-index: 1;
}

.narrative-chapter > *:not(.narrative-soft-edge) {
    position: relative;
    z-index: 2;
}

/* 统一出场 */
.narrative-reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    transition:
        opacity var(--narrative-duration) var(--narrative-ease),
        transform var(--narrative-duration) var(--narrative-ease),
        filter var(--narrative-duration) var(--narrative-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.narrative-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.narrative-reveal--soft {
    transform: translateY(16px);
    filter: blur(2px);
}

.narrative-reveal--line {
    transform: translateY(12px);
    filter: none;
}

/* Hero：纸面手绘，刚好一屏 */
#topSection.narrative-chapter,
#topSection.fullscreen.narrative-chapter {
    transition: none;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding: 0 !important;
    margin: 0;
    background-color: var(--paper-a);
    background-image: none !important;
}

@supports (height: 100dvh) {
    #topSection.narrative-chapter,
    #topSection.fullscreen.narrative-chapter {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}

#topSection.narrative-chapter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 58% 42% at 50% 38%, rgba(255, 255, 255, 0.42), transparent 72%),
        radial-gradient(ellipse 36% 28% at 16% 72%, rgba(160, 122, 78, 0.08), transparent 70%),
        radial-gradient(ellipse 32% 24% at 84% 22%, rgba(26, 47, 38, 0.05), transparent 68%),
        repeating-linear-gradient(
            -18deg,
            transparent 0 13px,
            rgba(26, 47, 38, 0.015) 13px 14px
        ),
        linear-gradient(180deg, #f3eee6 0%, var(--paper-a) 46%, #f4efe6 100%);
}

#topSection.narrative-chapter::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(72px, 16vh, 140px);
    background: linear-gradient(
        180deg,
        rgba(247, 244, 239, 0) 0%,
        rgba(247, 244, 239, 0.22) 42%,
        rgba(247, 244, 239, 0.7) 78%,
        var(--paper-a) 100%
    );
    z-index: 3;
    pointer-events: none;
}

#topSection.narrative-chapter {
    display: block;
    position: relative;
}

#topSection .title-container {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: min(92vw, 900px);
    margin: 0;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: center;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.05s linear;
    will-change: opacity;
}

#topSection.hero-sketch .title-container {
    top: 50%;
}

/* 飘字层保持绝对定位，不参与 flex，避免把标题顶到上方 */
#topSection #decorativeHellos {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-sketch-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-sketch-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-ink {
    fill: none;
    stroke: var(--ink-moss);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.hero-ink--wash {
    stroke-width: 2.15;
    stroke-opacity: 0.3;
}

.hero-ink--stone {
    stroke-width: 2.6;
    stroke-opacity: 0.42;
}

.hero-ink--figure {
    stroke-width: 2.35;
    stroke-opacity: 0.44;
}

.hero-ink--star,
.hero-ink--scribble,
.hero-ink--book,
.hero-ink--arrow,
.hero-ink--flourish {
    stroke-width: 2.05;
    stroke-opacity: 0.45;
}

.hero-ink--oval {
    stroke-width: 3.2;
    stroke-opacity: 0.55;
}

.hero-ink--underline {
    stroke-width: 4.2;
    stroke-opacity: 0.78;
}

#topSection.hero-sketch.is-inked .hero-ink {
    animation: heroInkDraw 1.35s var(--narrative-ease) forwards;
}

#topSection.hero-sketch.is-inked .hero-ink--wash { animation-duration: 1.8s; animation-delay: 0.05s; }
#topSection.hero-sketch.is-inked .hero-ink--stone { animation-delay: 0.28s; }
#topSection.hero-sketch.is-inked .hero-ink--figure { animation-duration: 1.55s; animation-delay: 0.42s; }
#topSection.hero-sketch.is-inked .hero-ink--star { animation-duration: 0.7s; animation-delay: 0.9s; }
#topSection.hero-sketch.is-inked .hero-ink--scribble { animation-delay: 1.05s; }
#topSection.hero-sketch.is-inked .hero-ink--book { animation-delay: 0.85s; }
#topSection.hero-sketch.is-inked .hero-ink--arrow { animation-delay: 1.15s; }
#topSection.hero-sketch.is-inked .hero-ink--flourish { animation-delay: 1.3s; }
#topSection.hero-sketch.is-inked .hero-ink--oval { animation-duration: 1.5s; animation-delay: 0.55s; }
#topSection.hero-sketch.is-inked .hero-ink--underline { animation-duration: 0.9s; animation-delay: 1.35s; }

@keyframes heroInkDraw {
    to { stroke-dashoffset: 0; }
}

.hero-sketch-mark {
    margin: 0 0 0.35em;
    font-family: var(--font-hand-cn);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.18em;
    color: var(--ink-moss);
    opacity: 0;
    transform: translateY(10px) rotate(-3deg);
    white-space: nowrap;
}

#topSection.hero-sketch.is-inked .hero-sketch-mark {
    animation: heroHandIn 0.9s var(--narrative-ease) 0.12s forwards;
}

.hero-title-frame {
    position: relative;
    display: inline-block;
    padding: 0.85em 1.35em 1em;
}

.hero-title-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#topSection.hero-sketch .main-title {
    color: var(--ink-moss);
    text-shadow: none;
    letter-spacing: 0.1em;
    margin: 0;
}

#topSection.hero-sketch .main-title.is-enhanced .title-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px) rotate(var(--tilt, -1.5deg));
    animation: heroTitleInk 0.72s var(--narrative-ease) forwards;
    animation-delay: calc(var(--i) * 42ms + 280ms);
}

#topSection.hero-sketch .main-title.is-enhanced .title-char:nth-child(3n) { --tilt: -3deg; }
#topSection.hero-sketch .main-title.is-enhanced .title-char:nth-child(3n+1) { --tilt: 2.4deg; }
#topSection.hero-sketch .main-title.is-enhanced .title-char:nth-child(3n+2) { --tilt: -1.2deg; }

@keyframes heroTitleInk {
    0% {
        opacity: 0;
        transform: translateY(10px) rotate(var(--tilt, -2deg));
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(var(--tilt, 0deg));
        filter: blur(0);
    }
}

.hero-sketch-aside {
    margin: 0.15em 0 0;
    font-family: var(--font-hand);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(26, 47, 38, 0.62);
    transform: translateY(8px) rotate(-2deg);
    opacity: 0;
}

#topSection.hero-sketch.is-inked .hero-sketch-aside {
    animation: heroHandIn 0.85s var(--narrative-ease) 1.45s forwards;
}

@keyframes heroHandIn {
    to {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
    }
}

#topSection.hero-sketch .hello-bubble {
    font-family: var(--font-hand);
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    font-weight: 600;
    color: rgba(26, 47, 38, 0.38);
    animation-name: heroNoteFloat;
}

#topSection.hero-sketch .hello-bubble--cjk {
    font-family: var(--font-hand-cn);
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 400;
}

@keyframes heroNoteFloat {
    0% { transform: translateY(0) rotate(var(--note-tilt, -4deg)) scale(1); opacity: 0.85; }
    100% { transform: translateY(-110px) rotate(var(--note-tilt, -4deg)) scale(1.06); opacity: 0; }
}

html.hero-sketch .main-header .nav-section-toggle,
html.hero-sketch .main-header .nav-section-toggle:hover,
html.hero-sketch .main-header .nav-section.is-open > .nav-section-toggle,
html.hero-sketch .main-header .nav-section--utils .menu-btn,
html.hero-sketch .main-header .nav-section--utils .menu-btn:hover {
    color: #222;
}

html.hero-sketch .main-header .nav-hamburger-line {
    background: #222;
}

html.hero-sketch .main-header .text-arc-char,
html.hero-sketch .main-header .rotating-logo-wrapper:hover .text-arc-char {
    color: #222;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

#topSection.hero-sketch .welcome-container:empty {
    display: none;
}

#topSection.hero-sketch .welcome-text,
#topSection.hero-sketch .cursor {
    color: var(--ink-moss);
    text-shadow: none;
    background-color: var(--ink-moss);
}

#topSection.hero-sketch .welcome-text {
    background: none;
}

/* 板块柔边：只做颜色溶入，不画分割线，避免「换页」感 */
.narrative-chapter {
    --seam-from: var(--paper-a);
    position: relative;
}

.narrative-soft-edge {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(64px, 12vh, 110px);
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        180deg,
        var(--seam-from) 0%,
        color-mix(in srgb, var(--seam-from) 62%, transparent) 38%,
        transparent 100%
    );
}

.narrative-soft-edge::after {
    display: none;
}

.narrative-soft-edge--bottom {
    top: auto;
    bottom: 0;
    background: linear-gradient(
        0deg,
        var(--seam-to, var(--paper-d)) 0%,
        color-mix(in srgb, var(--seam-to, var(--paper-d)) 55%, transparent) 42%,
        transparent 100%
    );
}

/* 金句：紧接首屏，不再上叠延伸 */
.quote-section.narrative-chapter {
    --seam-from: var(--paper-a);
    --seam-to: var(--paper-b);
    padding: 88px 24px 64px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
}

/* 首屏→金句：柔边极轻，去掉分割线 */
.quote-section.narrative-chapter > .narrative-soft-edge:not(.narrative-soft-edge--bottom) {
    height: 32px;
    background: linear-gradient(
        180deg,
        var(--paper-a) 0%,
        transparent 100%
    );
    opacity: 0.5;
}

.quote-section.narrative-chapter > .narrative-soft-edge:not(.narrative-soft-edge--bottom)::after {
    display: none;
}

.highlight-quote.narrative-reveal {
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.45rem, 3.1vw, 2.15rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.9;
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
}

.highlight-quote.narrative-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.quote-section .quote-en-mark {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.22em;
    color: rgba(26, 47, 38, 0.42);
}

/* 语录区：滚动染色，接续金句纸色；卡片溶进纸面 */
.bg-background.narrative-chapter {
    --seam-from: var(--paper-b);
    --seam-to: var(--paper-c);
    margin-top: -1px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--paper-b) calc(100% - var(--tint) * 38%), #ebe4d6) 0%,
            color-mix(in srgb, var(--paper-c) calc(100% - var(--tint) * 28%), #e8dfd0) 100%
        );
    transition: background 0.15s linear;
}

.bg-background.narrative-chapter .testimonial-item {
    background: color-mix(in srgb, #fff 55%, var(--paper-c));
    border: 1px solid rgba(26, 47, 38, 0.06);
    box-shadow: none;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.75s var(--narrative-ease),
        transform 0.75s var(--narrative-ease),
        background 0.35s ease,
        border-color 0.35s ease;
}

.bg-background.narrative-chapter .testimonial-item:hover {
    transform: translateY(-3px);
    box-shadow: none;
    background: color-mix(in srgb, #fff 72%, var(--paper-c));
    border-color: rgba(26, 47, 38, 0.12);
}

.bg-background.narrative-chapter.is-voices-in .testimonial-item {
    opacity: 1;
    transform: translateY(0);
}

.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(1) .testimonial-item:nth-child(1) { transition-delay: 0ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(1) .testimonial-item:nth-child(2) { transition-delay: 70ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(1) .testimonial-item:nth-child(3) { transition-delay: 140ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(2) .testimonial-item:nth-child(1) { transition-delay: 100ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(2) .testimonial-item:nth-child(2) { transition-delay: 170ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(2) .testimonial-item:nth-child(3) { transition-delay: 240ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(3) .testimonial-item:nth-child(1) { transition-delay: 160ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(3) .testimonial-item:nth-child(2) { transition-delay: 230ms; }
.bg-background.narrative-chapter.is-voices-in .testimonial-row:nth-child(3) .testimonial-item:nth-child(3) { transition-delay: 300ms; }

/* 漂流：去掉粉蓝色块，只留纸色长卷 */
.bc-journey-section.narrative-chapter {
    --seam-from: var(--paper-c);
    --seam-to: var(--paper-d);
    margin-top: -1px;
    background:
        radial-gradient(ellipse 55% 40% at 14% 22%, var(--ink-moss-soft), transparent 58%),
        linear-gradient(180deg, var(--paper-c) 0%, var(--paper-d) 70%, var(--paper-d) 100%);
}

.bc-journey-section.narrative-chapter::before {
    background:
        linear-gradient(120deg, rgba(255, 252, 246, 0.4) 0%, transparent 48%);
}

.bc-journey-section.narrative-chapter .bc-journey-title::after {
    background: linear-gradient(90deg, transparent, rgba(26, 47, 38, 0.45), transparent);
    height: 1px;
    width: 96px;
    border-radius: 0;
    opacity: 0.9;
}

.bc-journey-section.narrative-chapter .bc-journey-route {
    color: rgba(26, 47, 38, 0.45);
}

.bc-journey-section.narrative-chapter .bc-journey-route path.narrative-path {
    stroke-dasharray: var(--path-len, 400);
    stroke-dashoffset: calc(var(--path-len, 400) * (1 - var(--trail-draw)));
    opacity: 0.55;
    transition: stroke-dashoffset 0.08s linear;
}

.bc-journey-section.narrative-chapter .bc-journey-route circle {
    opacity: calc(0.15 + var(--trail-draw) * 0.7);
    transition: opacity 0.2s ease;
}

/* 摄影：纸色贯通，照片边框更轻 */
.horizontal-scroll-section.narrative-chapter {
    --seam-from: var(--paper-d);
    --seam-to: var(--paper-e);
    position: relative;
    margin-top: -1px;
    background: linear-gradient(180deg, var(--paper-d) 0%, var(--paper-e) 100%);
}

.horizontal-scroll-section.narrative-chapter .scroll-title:after {
    background: linear-gradient(90deg, transparent, rgba(26, 47, 38, 0.4), transparent);
    height: 1px;
    width: 96px;
    border-radius: 0;
}

.horizontal-scroll-section.narrative-chapter .photo-item {
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(26, 47, 38, 0.08);
    background: color-mix(in srgb, #fff 40%, var(--paper-e));
}

.horizontal-scroll-section.narrative-chapter .photo-item:hover {
    box-shadow: 0 14px 36px rgba(26, 47, 38, 0.14);
}

.scroll-title .scroll-title-en {
    display: block;
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.18em;
    color: rgba(26, 47, 38, 0.42);
}

/* 收束：呼吸感 + 微暖收拢 */
.center-text-section.narrative-chapter {
    --seam-from: var(--paper-e);
    --seam-to: var(--paper-f);
    margin-top: -1px;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(250, 246, 238, 0.92), transparent 62%),
        linear-gradient(180deg, var(--paper-e) 0%, var(--paper-f) 100%);
}

/* 页脚：四栏站点地图 + 备案底栏，延续收束章节纸色 */
#pageFooter {
    margin-top: 0;
    padding: 48px 0 36px !important;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255, 252, 246, 0.9), transparent 55%),
        var(--paper-f);
    text-align: left;
    color: rgba(34, 34, 34, 0.78);
    font-size: 0.86rem;
}

#pageFooter .footer-shell {
    --footer-cols: minmax(10.5rem, 1.15fr) repeat(3, minmax(0, 1fr));
    --footer-col-gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

#pageFooter .footer-grid {
    display: grid;
    grid-template-columns: var(--footer-cols);
    column-gap: var(--footer-col-gap);
    row-gap: 36px;
    align-items: start;
}

/* DOM 为 brand → explore → service → connect；PC 用 order 还原为 brand | explore | connect | service */
#pageFooter .footer-col--brand { order: 1; }
#pageFooter .footer-col--explore { order: 2; }
#pageFooter .footer-col--connect { order: 3; }
#pageFooter .footer-col--service { order: 4; }

#pageFooter .footer-col-title {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    line-height: 1.35;
    color: #1a2f26;
}

#pageFooter .footer-brand {
    margin: 0;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    /* 与栏目标题共用行高；略压视觉字框，避免大号标题顶缘偏高 */
    line-height: 1.35;
    color: #1a2f26;
}

#pageFooter .footer-col {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* 大号品牌字框略高：下移半点，与「探索 / 连接 / 服务」顶缘齐平 */
#pageFooter .footer-col--brand .footer-brand {
    margin-top: 0.06em;
}

#pageFooter .footer-brand-en {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.32em;
    line-height: 1.2;
    color: rgba(39, 76, 59, 0.72);
    text-indent: 0;
}

#pageFooter .footer-tagline {
    margin: 8px 0 26px;
    max-width: 12em;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    line-height: 1.55;
    color: #3d5c4a;
}

#pageFooter .footer-join {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-style: italic;
    letter-spacing: 0.18em;
    text-decoration: none;
    color: #274c3b;
    border-bottom: 1px solid rgba(39, 76, 59, 0.35);
    padding-bottom: 2px;
    transform: translate3d(0, 0, 0);
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        color 200ms ease,
        border-color 200ms ease;
}

#pageFooter .footer-join:hover,
#pageFooter .footer-join:focus-visible {
    color: #1a2f26;
    border-bottom-color: rgba(26, 47, 38, 0.55);
    transform: translate3d(3px, -1px, 0);
}

#pageFooter .footer-join:focus-visible {
    outline: 2px solid rgba(26, 59, 46, 0.3);
    outline-offset: 6px;
}

#pageFooter .footer-join-sub {
    margin: 10px 0 0;
    max-width: 14em;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.48);
}

#pageFooter .footer-join-entries {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

#pageFooter .footer-join-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transform: translate3d(0, 0, 0);
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#pageFooter .footer-join-entry:hover,
#pageFooter .footer-join-entry:focus-visible {
    transform: translate3d(3px, -1px, 0);
}

#pageFooter .footer-join-entry:focus-visible {
    outline: 2px solid rgba(26, 59, 46, 0.3);
    outline-offset: 6px;
}

#pageFooter .footer-join-entry-title {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #274c3b;
    line-height: 1.4;
}

#pageFooter .footer-join-entry-desc {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.48);
}

#pageFooter .footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#pageFooter .footer-list a,
#pageFooter .footer-list .doudou-trigger {
    display: inline-block;
    position: relative;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: rgba(34, 34, 34, 0.72);
    text-decoration: none;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        color 200ms ease;
}

/* 细淡下划线：绝对定位，不占布局、不改字号/行高 */
#pageFooter .footer-list a::after,
#pageFooter .footer-list .doudou-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.42);
    transform-origin: left center;
    pointer-events: none;
    transition:
        opacity 200ms ease,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#pageFooter .footer-list a:hover,
#pageFooter .footer-list a:focus-visible,
#pageFooter .footer-list .doudou-trigger:hover,
#pageFooter .footer-list .doudou-trigger:focus-visible {
    color: rgba(26, 47, 38, 0.92);
    transform: translate3d(3px, -1px, 0);
}

#pageFooter .footer-list a:hover::after,
#pageFooter .footer-list a:focus-visible::after,
#pageFooter .footer-list .doudou-trigger:hover::after,
#pageFooter .footer-list .doudou-trigger:focus-visible::after {
    opacity: 0.32;
    transform: scaleX(1);
}

#pageFooter .footer-icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
}

#pageFooter .footer-icons a,
#pageFooter .footer-icons #wechat-icon,
#pageFooter .footer-icon-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 3px 8px 3px 0;
    border-radius: 6px;
    color: rgba(34, 34, 34, 0.72);
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    box-shadow: none;
    transform: translate3d(0, 0, 0);
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        color 200ms ease,
        background-color 200ms ease,
        box-shadow 200ms ease;
}

#pageFooter .footer-icon-name {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 200ms ease;
}

#pageFooter .footer-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    display: block;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 200ms ease;
}

#pageFooter .footer-icon-link:hover,
#pageFooter .footer-icon-link:focus-visible {
    color: rgba(26, 47, 38, 0.92);
    background-color: rgba(26, 47, 38, 0.045);
    /* 向左扩一点 hover 底色，不挤动图标左缘 */
    box-shadow: -6px 0 0 rgba(26, 47, 38, 0.045);
    transform: translate3d(2px, -1px, 0);
    filter: none;
}

#pageFooter .footer-icon-link:hover .footer-icon,
#pageFooter .footer-icon-link:focus-visible .footer-icon {
    transform: translate3d(0, -1px, 0) scale(1.07);
    opacity: 1;
    filter: none;
}

#pageFooter .beian-link,
#pageFooter #contactEmail {
    display: inline-block;
    color: rgba(34, 34, 34, 0.62);
    text-decoration: none;
    transform: translate3d(0, 0, 0);
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        color 200ms ease;
}

#pageFooter .beian-link:hover,
#pageFooter .beian-link:focus-visible,
#pageFooter #contactEmail:hover,
#pageFooter #contactEmail:focus-visible {
    color: rgba(26, 47, 38, 0.88);
    text-decoration: none;
    transform: translate3d(2px, -1px, 0);
}

#pageFooter .footer-rule {
    height: 1px;
    margin: 40px 0 28px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(26, 47, 38, 0.18) 12%,
        rgba(26, 47, 38, 0.18) 88%,
        transparent
    );
}

#pageFooter .footer-meta {
    /* 与上方四栏共用列轨，保证备案左缘 / 引用右缘与栏目外缘对齐 */
    display: grid;
    grid-template-columns: var(--footer-cols);
    column-gap: var(--footer-col-gap);
    row-gap: 20px;
    align-items: start;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: rgba(34, 34, 34, 0.62);
}

#pageFooter .footer-meta-main {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 0;
    margin: 0;
}

#pageFooter .footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 28px;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

#pageFooter .footer-row--copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#pageFooter .footer-meta-gap {
    display: none;
}

#pageFooter .footer-quote {
    grid-column: 3 / 5;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-serif);
    font-size: 0.76rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 1.9;
    color: rgba(34, 34, 34, 0.52);
    text-align: left;
}

#pageFooter .footer-quote p {
    margin: 0;
    text-indent: 2em;
}

#pageFooter .footer-quote-source {
    display: block;
    margin-top: 0.55em;
    font-style: normal;
    font-size: 0.92em;
    letter-spacing: 0.08em;
    text-align: right;
    color: rgba(34, 34, 34, 0.42);
}

#pageFooter .doudou-trigger {
    color: rgba(34, 34, 34, 0.72);
}

#pageFooter .doudou-trigger:hover,
#pageFooter .doudou-trigger:focus-visible {
    color: rgba(26, 47, 38, 0.92);
}

@media (max-width: 960px) {
    /* —— 平板 / 手机：紧凑页脚居中（PC 四栏左对齐不受影响） —— */
    #pageFooter {
        padding: 28px 0 22px !important;
        text-align: center;
    }

    #pageFooter .footer-shell {
        padding: 0 16px;
    }

    #pageFooter .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 18px !important;
        row-gap: 18px !important;
        align-items: start;
        justify-items: center;
    }

    /* 品牌置顶 → 探索|服务 → 连接横条 */
    #pageFooter .footer-col--brand {
        grid-column: 1 / -1;
        order: 1;
        width: 100%;
        text-align: center;
    }

    #pageFooter .footer-col--explore {
        grid-column: auto;
        order: 2;
        width: 100%;
        text-align: center;
    }

    #pageFooter .footer-col--service {
        grid-column: auto;
        order: 3;
        width: 100%;
        text-align: center;
    }

    #pageFooter .footer-col--connect {
        grid-column: 1 / -1;
        order: 4;
        width: 100%;
        text-align: center;
    }

    #pageFooter .footer-col--brand .footer-brand {
        margin-top: 0;
        font-size: 1.18rem;
        letter-spacing: 0.16em;
    }

    #pageFooter .footer-brand-en {
        margin-top: 2px;
        font-size: 0.58rem;
    }

    #pageFooter .footer-tagline {
        margin: 4px auto 10px;
        max-width: none;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        line-height: 1.4;
    }

    /* 避免与固定 logo / 菜单叠字 */
    #pageFooter .footer-join-sub {
        display: none !important;
    }

    #pageFooter .footer-join-entries {
        align-items: center;
        gap: 14px;
        margin-top: 14px;
    }

    #pageFooter .footer-join-entry {
        align-items: center;
        text-align: center;
    }

    #pageFooter .footer-join-entry-title {
        font-size: 0.84rem;
    }

    #pageFooter .footer-join-entry-desc {
        font-size: 0.74rem;
    }

    #pageFooter .footer-col-title {
        margin: 0 0 8px;
        font-size: 0.84rem;
        letter-spacing: 0.16em;
        line-height: 1.3;
        text-align: center;
    }

    #pageFooter .footer-list {
        gap: 6px;
        align-items: center;
    }

    #pageFooter .footer-list li {
        margin: 0;
        padding: 0;
        line-height: 1.35;
        text-align: center;
    }

    #pageFooter .footer-list a,
    #pageFooter .footer-list .doudou-trigger {
        display: inline !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 2px 0;
        font-size: 0.8rem;
        line-height: 1.45;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* 连接：纯图标横排居中 */
    #pageFooter .footer-icons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 2px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #pageFooter .footer-icons a,
    #pageFooter .footer-icons #wechat-icon,
    #pageFooter .footer-icon-link {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 8px;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    #pageFooter .footer-icon-name {
        display: none !important;
    }

    #pageFooter .footer-icon {
        width: 20px !important;
        height: 20px !important;
    }

    #pageFooter .footer-icon-link:hover,
    #pageFooter .footer-icon-link:focus-visible {
        background-color: rgba(26, 47, 38, 0.06);
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    #pageFooter .footer-icon-link:hover .footer-icon,
    #pageFooter .footer-icon-link:focus-visible .footer-icon {
        transform: none !important;
        filter: none !important;
    }

    #pageFooter .footer-rule {
        margin: 18px 0 14px;
    }

    #pageFooter .footer-meta {
        display: grid;
        grid-template-columns: 1fr !important;
        column-gap: 0;
        row-gap: 12px;
        font-size: 0.72rem;
        text-align: center;
        justify-items: center;
    }

    #pageFooter .footer-meta-main,
    #pageFooter .footer-quote {
        grid-column: 1 / -1;
        justify-self: stretch;
        max-width: none;
        text-align: center;
    }

    #pageFooter .footer-meta-main {
        gap: 4px;
        align-items: center;
    }

    #pageFooter .footer-row {
        gap: 2px 12px;
        line-height: 1.5;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #pageFooter .footer-row--copy {
        align-items: center;
    }

    #pageFooter .footer-row--beian {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    /* 手机页脚不放长引文，省高度 */
    #pageFooter .footer-quote {
        display: none !important;
    }
}

@media (max-width: 560px) {
    #pageFooter {
        padding: 24px 0 18px !important;
    }

    #pageFooter .footer-shell {
        padding: 0 14px;
    }

    #pageFooter .footer-grid {
        column-gap: 14px !important;
        row-gap: 16px !important;
    }

    #pageFooter .footer-col--brand .footer-brand {
        font-size: 1.08rem;
        letter-spacing: 0.12em;
    }

    #pageFooter .footer-join {
        font-size: 0.64rem;
    }

    #pageFooter .footer-col-title {
        margin-bottom: 6px;
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }

    #pageFooter .footer-list {
        gap: 5px;
    }

    #pageFooter .footer-list a,
    #pageFooter .footer-list .doudou-trigger {
        font-size: 0.78rem;
    }

    #pageFooter .footer-icons a,
    #pageFooter .footer-icons #wechat-icon,
    #pageFooter .footer-icon-link {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    #pageFooter .footer-meta {
        font-size: 0.68rem;
        row-gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pageFooter .footer-join,
    #pageFooter .footer-join-entry,
    #pageFooter .footer-list a,
    #pageFooter .footer-list .doudou-trigger,
    #pageFooter .footer-list a::after,
    #pageFooter .footer-list .doudou-trigger::after,
    #pageFooter .footer-icon-link,
    #pageFooter .footer-icon,
    #pageFooter .footer-icon-name,
    #pageFooter .beian-link,
    #pageFooter #contactEmail {
        transition: none;
    }

    #pageFooter .footer-join:hover,
    #pageFooter .footer-join:focus-visible,
    #pageFooter .footer-join-entry:hover,
    #pageFooter .footer-join-entry:focus-visible,
    #pageFooter .footer-list a:hover,
    #pageFooter .footer-list a:focus-visible,
    #pageFooter .footer-list .doudou-trigger:hover,
    #pageFooter .footer-list .doudou-trigger:focus-visible,
    #pageFooter .footer-icon-link:hover,
    #pageFooter .footer-icon-link:focus-visible,
    #pageFooter .beian-link:hover,
    #pageFooter .beian-link:focus-visible,
    #pageFooter #contactEmail:hover,
    #pageFooter #contactEmail:focus-visible {
        transform: none;
    }

    #pageFooter .footer-icon-link:hover .footer-icon,
    #pageFooter .footer-icon-link:focus-visible .footer-icon {
        transform: none;
    }

    #pageFooter .footer-list a:hover::after,
    #pageFooter .footer-list a:focus-visible::after,
    #pageFooter .footer-list .doudou-trigger:hover::after,
    #pageFooter .footer-list .doudou-trigger:focus-visible::after {
        opacity: 0.32;
        transform: scaleX(1);
    }
}

/* 收束：从下移入中间，同时从小均匀放大并渐显 */
.center-text.narrative-fade {
    opacity: 0;
    transform: translateY(56px) scale(0.86);
    transform-origin: center center;
    transition:
        opacity 1.6s ease,
        transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    text-align: center;
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
    will-change: opacity, transform;
}

.center-text.narrative-fade.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.center-text .quote-author {
    display: block;
    margin-top: 1.4em;
    font-family: var(--font-display);
    font-size: 0.85em;
    font-style: italic;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.45);
}

/* 章节英文眉题 */
.narrative-eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-style: italic;
    letter-spacing: 0.2em;
    color: rgba(26, 47, 38, 0.42);
    margin-bottom: 14px;
}

.bc-journey-head .narrative-eyebrow {
    text-align: center;
}

/* 标题层级强化 */
.bc-journey-title,
.scroll-title,
.main-title {
    font-family: var(--font-serif);
}

@media (max-width: 767px) {
    .quote-section.narrative-chapter {
        padding: 56px 18px;
    }

    .highlight-quote.narrative-reveal {
        letter-spacing: 0.04em;
    }

    .narrative-soft-edge {
        height: 56px;
    }

    #topSection.narrative-chapter,
    #topSection.fullscreen.narrative-chapter {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        padding: 0 !important;
    }

    @supports (height: 100dvh) {
        #topSection.narrative-chapter,
        #topSection.fullscreen.narrative-chapter {
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    #topSection.narrative-chapter::before {
        inset: 0;
        transform: none;
    }

    #topSection.narrative-chapter::after {
        height: clamp(56px, 14vh, 100px);
    }

    .hero-ink--book,
    .hero-ink--arrow,
    .hero-ink--flourish {
        stroke-opacity: 0.22;
    }

    .hero-sketch-mark {
        letter-spacing: 0.12em;
    }

    .hero-title-frame {
        padding: 0.7em 0.6em 0.85em;
    }

    .quote-section.narrative-chapter {
        margin-top: 0;
        padding: 56px 18px 48px;
    }
}

@media (max-width: 480px) {
    #topSection.narrative-chapter,
    #topSection.fullscreen.narrative-chapter {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        padding: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .narrative-reveal,
    .narrative-reveal.is-in,
    .bg-background.narrative-chapter .testimonial-item,
    .center-text.narrative-fade {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .narrative-rail {
        display: none !important;
    }

    .narrative-thread-path--ink {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .narrative-thread-dot {
        opacity: 0.72 !important;
        transform: translate(-50%, -50%) scale(1) !important;
        transition: none !important;
    }

    .narrative-atmosphere {
        opacity: 0.55 !important;
        transition: none !important;
    }

    html.narrative-on-hero:not(.hero-sketch) .narrative-atmosphere {
        opacity: 0 !important;
    }

    .hero-ink {
        stroke-dashoffset: 0;
        animation: none !important;
    }

    .hero-sketch-mark,
    .hero-sketch-aside,
    #topSection.hero-sketch .main-title,
    #topSection.hero-sketch .main-title.is-enhanced .title-char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}