/* ---------- 1. Global ---------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #11110f;
    color: #11110f;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

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

a {
    color: inherit;
    text-decoration: none;
}

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

figure,
blockquote,
p,
h1,
h2,
h3 {
    margin: 0;
}

button {
    font: inherit;
}

.page {
    width: 100%;
    max-width: 1257px;
    margin: 0 auto;
    overflow: hidden;
    background: #e9e6df;
}

.section-light {
    background: #e9e6df;
    color: #11110f;
}

.section-dark {
    background: #121211;
    color: #eeeae1;
}

.eyebrow {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1.5px;
}

.accent {
    color: #c23d33;
}

.section-title {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 19px;
}

.section-title h2 {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 138px;
    line-height: 130px;
    font-weight: 900;
    letter-spacing: 5px;
}

.section-title small {
    padding-bottom: 35px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.section-title--accent {
    color: #c23d33;
}

.section-intro {
    padding-top: 31px;
    font-family: Tinos, "Times New Roman", "Noto Serif SC", serif;
    font-size: 19px;
    line-height: 37px;
    letter-spacing: .85px;
}

.section-intro-en {
    display: block;
    padding-top: 10px;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

/* ---------- 2. Header ---------- */
.site-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 50%;
    width: min(100%, 1257px);
    height: 70px;
    padding: 0 50px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.site-logo {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.site-logo__cn {
    font-family: "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.7px;
}

.site-logo__en {
    font-size: 9px;
    letter-spacing: .99px;
}

.site-nav__list {
    display: flex;
    gap: 28px;
}

.site-nav__item a {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.68px;
}

.site-nav__item small {
    margin-left: 5px;
    font-size: 8px;
    letter-spacing: .88px;
    opacity: .6;
}

/* ---------- 3. Hero ---------- */
.hero {
    position: relative;
    height: 815px;
    background: #111;
    color: #f4f0e9;
}

.hero__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 815px;
    overflow: hidden;
}

.hero__image img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #111 0%, rgba(17, 17, 16, .76) 32%, rgba(17, 17, 16, .10) 75%);
}

.hero__content {
    position: absolute;
    z-index: 2;
    top: 154px;
    left: 97px;
    width: 760px;
}

.hero h1 {
    padding-top: 32px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 138px;
    line-height: 101px;
    font-weight: 900;
    letter-spacing: -2px;
}

.hero h1 span {
    display: block;
    padding-top: 35px;
    color: #a82f28;
    line-height: 143px;
}

.hero__lead {
    padding-top: 29px;
    color: #d8d4cd;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: .85px;
}

.hero__lead-en {
    display: block;
    padding-top: 10px;
    color: #d8d4cd;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

.walk-button {
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    margin-top: 55px;
}

.walk-button__footprints {
    position: relative;
    width: 21px;
    height: 38px;
}

.walk-button__footprints i {
    position: absolute;
    width: 10px;
    height: 15px;
    background: #a82f28;
    border-radius: 50%;
}

.walk-button__footprints i:first-child {
    top: 0;
    left: 0;
    transform: rotate(26deg);
}

.walk-button__footprints i:last-child {
    right: 0;
    bottom: 0;
    transform: rotate(-17deg);
}

.walk-button__text {
    font-size: 14px;
    letter-spacing: 1.4px;
}

.walk-button__text small {
    display: block;
    padding-top: 4px;
    font-size: 9px;
    letter-spacing: 1.17px;
    opacity: .56;
}

.walk-button__arrow {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50px;
    font-size: 9px;
    letter-spacing: .9px;
}

/* ---------- 4. Passing ---------- */
.passing {
    position: relative;
    height: 3153px;
    padding: 120px 100px 120px 97px;
}

.passing__header {
    width: 983px;
}

.passing__axis {
    position: absolute;
    top: 455px;
    left: 641px;
    height: 2575px;
    border-left: 1px dashed #aaa69d;
}

.passing__note {
    position: absolute;
    left: 97px;
    width: 233px;
    color: #2a2a2a;
}

.passing__note p {
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 16.48px;
    line-height: 28.35px;
    letter-spacing: .41px;
}

.passing__note small {
    display: block;
    padding-top: 15px;
    font-size: 9.44px;
    line-height: 14.16px;
    letter-spacing: .94px;
    opacity: .7;
}

.passing__note--one {
    top: 720px;
}

.passing__note--two {
    top: 1770px;
}

.photo-story {
    position: absolute;
}

.photo-story figure {
    position: relative;
}

.photo-story__image {
    overflow: hidden;
    background: #161615;
    box-shadow: 0 13px 26px rgba(20, 20, 18, .16);
}

.photo-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.photo-story--one {
    top: 521px;
    left: 454px;
    width: 701px;
}

.photo-story--one .photo-story__image {
    height: 442px;
}

.photo-story--two {
    top: 1153px;
    left: 189px;
    width: 810px;
}

.photo-story--two .photo-story__image {
    height: 462px;
}

.photo-story--three {
    top: 1815px;
    left: 416px;
    width: 739px;
}

.photo-story--three .photo-story__image {
    height: 454px;
}

.photo-story--four {
    top: 2482px;
    left: 189px;
    width: 758px;
}

.photo-story--four .photo-story__image {
    height: 413px;
}

.photo-card {
    position: absolute;
    z-index: 2;
    width: 195px;
    padding: 18px 19px 17px;
    background: #f1ece1;
    color: #181714;
    box-shadow: 7px 8px rgba(73, 68, 58, .12);
}

.photo-card small {
    color: #8b2821;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 1.08px;
}

.photo-card h3 {
    padding-top: 13px;
    font-family: "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 24px;
    line-height: 30px;
}

.photo-card p {
    padding-top: 7px;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 14px;
    line-height: 24.5px;
}

.photo-card--left {
    top: 52px;
    left: -106px;
    width: 176px;
}

.photo-card--right-top {
    top: -65px;
    right: -85px;
    width: 172px;
}

.photo-card--left-bottom {
    left: -68px;
    bottom: 55px;
}

.photo-card--right-bottom {
    right: -137px;
    bottom: -72px;
}

.frame-link {
    display: grid;
    grid-template-columns: 55px 16px;
    width: 98px;
    min-height: 31px;
    padding: 5px 7px 5px 10px;
    border: 1px solid rgba(242, 238, 231, .58);
    background: rgba(17, 17, 15, .82);
    color: #f2eee7;
    font-size: 10px;
    line-height: 10px;
    opacity: .76;
}

.frame-link small {
    grid-column: 1;
    padding-top: 2px;
    font-size: 7px;
    line-height: 7px;
    letter-spacing: .91px;
}

.frame-link span {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 15px;
}

/* ---------- 5. Staying ---------- */
.staying {
    position: relative;
    height: 1207px;
    padding-top: 120px;
}

.staying__header {
    position: absolute;
    z-index: 2;
    top: 120px;
    left: 97px;
    width: 302px;
}

.staying .section-title h2 {
    font-size: 126px;
    line-height: 118px;
    letter-spacing: -4px;
}

.staying__photo {
    position: absolute;
    top: 220px;
    left: 310px;
    width: 637px;
    height: 382px;
}

.staying__photo .photo-reveal,
.staying__photo img {
    width: 100%;
    height: 100%;
}

.recordings {
    position: absolute;
    top: 712px;
    left: 0;
    width: 100%;
}

.recordings__header {
    display: flex;
    justify-content: space-between;
    padding: 0 97px 41px;
}

.recordings__header h3 {
    color: #c23d33;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.recordings__header p {
    color: #bbb5a8;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 15px;
    letter-spacing: .45px;
}

.recordings__list {
    display: flex;
    gap: 88px;
    padding: 0 126px;
}

.recordings__list li {
    width: 277px;
}

.recording {
    min-height: 208px;
    padding-top: 21px;
    border-top: 1px solid rgba(235, 230, 219, .37);
}

.recording blockquote {
    font-family: Tinos, "Times New Roman", serif;
    font-size: 21px;
    line-height: 32.5px;
    letter-spacing: .42px;
}

.recording cite {
    display: block;
    padding-top: 23px;
    color: #a8a399;
    font-size: 9px;
    font-style: normal;
    letter-spacing: .9px;
}

.audio-button {
    display: grid;
    grid-template-columns: 27px 1fr 54px;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 11px 0;
    border: 1px solid rgba(236, 231, 219, .35);
    border-right: 0;
    border-left: 0;
    background: transparent;
    color: #eeebe2;
    cursor: pointer;
}

.audio-button > span {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(238, 235, 226, .8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.audio-button i {
    height: 22px;
    background: repeating-linear-gradient(90deg, #d8d2c6 0 1px, transparent 1px 8px);
    opacity: .8;
}

.audio-button small {
    color: #aaa69d;
    font-size: 8px;
}

.street-quotes {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96px;
    padding: 25px 0 30px;
    overflow: hidden;
    border-top: 1px solid rgba(235, 230, 219, .2);
    border-bottom: 1px solid rgba(235, 230, 219, .2);
}

.street-quotes__track {
    display: flex;
    align-items: center;
    gap: 29px;
    width: max-content;
    white-space: nowrap;

}

.street-quotes__track span {
    font-family: "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 35px;
    line-height: 39px;
}

.street-quotes__track span small {
    color: #918c82;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.street-quotes__track b {
    color: #c23d33;
    font-size: 24px;
}



/* ---------- 6. Seeing ---------- */
.seeing {
    height: 1318px;
    padding-top: 120px;
}

.seeing__header {
    display: flex;
    align-items: flex-start;
    height: 525px;
    padding-left: 97px;
}

.seeing__header > .eyebrow {
    width: 251px;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 17px;
    line-height: 32px;
    letter-spacing: .42px;
}

.seeing__title-group {
    width: 420px;
}

.seeing__title-group h2 {
    width: 161px;
    font-family: "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 138px;
    line-height: 139px;
    font-weight: 900;
    letter-spacing: -7.6px;
}

.seeing__title-group > small {
    display: block;
    padding-top: 18px;
    font-size: 10px;
    letter-spacing: 1.2px;
    opacity: .65;
}

.seeing__title-group > p {
    padding-top: 18px;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 17px;
    line-height: 32.3px;
    letter-spacing: .42px;
}

.seeing__viewport {
    width: 100%;
    height: 575px;
    padding-left: 97px;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color: #8c887f transparent;
}

.seeing__list {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: max-content;
    min-width: 100%;
}

.seeing__item {
    flex: 0 0 364.5px;
    width: 364.5px;
}

.seeing__item--low {
    padding-top: 72px;
}

.seeing__item--mid {
    padding-top: 25px;
}

.seeing__item figure {
    width: 100%;
}

.photo-reveal {
    height: 480px;
    overflow: hidden;
    background: #161615;
}

.photo-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.seeing__item figcaption {
    height: 33px;
    padding-top: 10px;
    font-size: 11px;
    letter-spacing: .88px;
}

.crop-baby img {
    object-position: 35% center;
}

.crop-children img {
    object-position: 70% center;
}

.crop-shoulder img {
    object-position: center top;
}

.crop-worker img {
    object-position: 35% center;
}

/* ---------- 7. Trace ---------- */
.trace {
    position: relative;
    height: 800px;
}

.trace__copy {
    position: absolute;
    top: 141px;
    left: 97px;
    width: 438px;
}

.trace__note {
    width: 384px;
    margin-top: 2px;
    color: #c7c1b5;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 16.48px;
    line-height: 28.35px;
    letter-spacing: .41px;
}

.trace__note-en {
    display: block;
    width: 384px;
    padding-top: 9px;
    color: #c7c1b5;
    font-size: 9.44px;
    line-height: 14px;
    letter-spacing: .94px;
    opacity: .7;
}

.route-map {
    position: absolute;
    top: 140px;
    left: 723px;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
}

.route-map__vectors {
    position: absolute;
    inset: 0;
}

.vector {
    position: absolute;
    width: auto;
    height: auto;
}

/* 原始 SVG 按 Figma 路线图比例定位 */
.vector--0 { left: 55.29%; top: 22.48%; width: 4.71%; height: 55.16%; }
.vector--1 { left: 54.57%; top: 22.36%; width: 4.57%; height: 55.40%; }
.vector--2 { left: 58.71%; top: 28.64%; width: 34.72%; height: 1.90%; }
.vector--3 { left: 5.86%;  top: 42.60%; width: 52.57%; height: 8.47%; }
.vector--4 { left: 58%;    top: 55.34%; width: 36%;    height: .80%; }
.vector--5 { left: 5.57%;  top: 62.34%; width: 51.72%; height: 10.32%; }
.vector--6 { left: 29.86%; top: 26.27%; width: 5.57%;  height: 14.24%; }
.vector--7 { left: 75.14%; top: 31.61%; width: 5%;     height: 15.66%; }
.vector--8  { left: 35.29%; top: 63.17%; width: 4.57%;  height: 14.12%; }
.vector--9  { left: 76.62%; top: 53.46%; width: 6.02%;  height: 17.88%; }
.vector--10 { left: 53.47%; top: 23.08%; width: 7.41%;  height: 47.31%; }

.route-map__direction {
    position: absolute;
    z-index: 4;
    left: 14px;
    padding: 5px 7px;
    background: rgba(17, 17, 15, .7);
    color: #eeebe4;
    font-size: 10px;
    letter-spacing: 1px;
}

.route-map__direction--north {
    top: 10px;
}

.route-map__direction--south {
    bottom: 10px;
}

.route-map__street {
    position: absolute;
    z-index: 3;
    color: #afaaa0;
    font-size: 7.4px;
}

.route-map__street--chaozong { top: 48.2%; left: 62%; color: #e4dfd5; }
.route-map__street--beizheng { top: 28.2%; left: 68.9%; }
.route-map__street--liansheng { top: 40.8%; left: 20.7%; }
.route-map__street--shuidao   { top: 52.9%; left: 71%; }
.route-map__street--sangui    { top: 61.5%; left: 18.3%; }

.route-point {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    color: #f2eee6;
    white-space: nowrap;
}

.route-point span {
    width: 37px;
    height: 37px;
    border: 1px solid #817c72;
    border-radius: 50%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.route-point b {
    margin-left: 14px;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;
}

.route-point--01 { left: 331px; top: 62px; }
.route-point--02 { left: 254px; top: 140px; }
.route-point--03 { left: 228px; top: 218px; }
.route-point--04 { left: 202px; top: 290px; }
.route-point--05 { left: 250px; top: 347px; }
.route-point--06 { left: 176px; top: 394px; }
.route-point--07 { left: 103px; top: 435px; }
.route-point--08 { left: 138px; top: 321px; }

.route-map__footprints {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.route-footprint {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;

}

.route-footprint--1 { left: 58.3%; top: 53.2%; width: 14px; height: 17px; animation-delay: 0s; }
.route-footprint--2 { left: 55.0%; top: 61.7%; width: 14px; height: 17px; animation-delay: .6s; }
.route-footprint--3 { left: 52.2%; top: 69.5%; width: 16px; height: 18px; animation-delay: 1.2s; }
.route-footprint--4 { left: 58.0%; top: 75.6%; width: 16px; height: 18px; animation-delay: 1.8s; }



/* ---------- 8. About ---------- */
.about {
    position: relative;
    height: 850px;
}

.about__header {
    position: absolute;
    top: 135px;
    left: 97px;
    width: 263px;
}

.section-title--vertical {
    display: block;
}

.section-title--vertical small {
    display: block;
    padding-top: 25px;
}

.about__text {
    position: absolute;
    top: 175px;
    left: 459px;
    width: 275px;
}

.about__text > p:not(.about__concept) {
    padding-bottom: 10px;
    color: #4f4d48;
    font-size: 14px;
    line-height: 28.7px;
    letter-spacing: .56px;
}

.about__text > small {
    display: block;
    padding-bottom: 27px;
    color: #4f4d48;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

.about__concept {
    font-family: Tinos, "Times New Roman", serif;
    font-size: 19px;
    line-height: 37px;
    letter-spacing: .85px;
}

.about__photo {
    position: absolute;
    top: 175px;
    left: 776px;
    width: 379px;
}

.about__photo .photo-reveal {
    height: 510px;
}

/* ---------- 9. Footer ---------- */
.site-footer {
    min-height: 420px;
    padding: 82px 126px 34px;
    background: #11110f;
    color: #ece7dc;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 72px 154px 30px;
    column-gap: 24px;
}

.site-footer__brand span {
    display: block;
    font-family: "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 50px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: 4px;
}

.site-footer__brand small {
    display: block;
    padding-top: 11px;
    color: #b7b1a5;
    font-size: 9px;
    letter-spacing: 1.62px;
}

.site-footer__sentence {
    justify-self: end;
    font-family: Tinos, "Times New Roman", serif;
    font-size: 19px;
    line-height: 33px;
    letter-spacing: .85px;
}

.site-footer__sentence span {
    color: #c23d33;
}

.site-footer__nav {
    grid-column: 1 / -1;
    align-self: end;
    display: flex;
    gap: 24px;
    font-size: 11px;
    letter-spacing: 1.1px;
}

.site-footer__bottom {
    grid-column: 1 / -1;
    border-top: 1px solid #4b4943;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    color: #9d998f;
    font-size: 9px;
    letter-spacing: .9px;
}

/* =========================================================
   10. Responsive Design
   课堂方式：使用 @media，根据屏幕宽度重新安排布局。
   ========================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .site-header {
        padding: 0 32px;
    }

    .hero__content {
        left: 7vw;
    }

    .passing {
        height: 2850px;
        padding-right: 6vw;
        padding-left: 6vw;
    }

    .passing__axis {
        left: 51%;
        height: 2300px;
    }

    .passing__note {
        left: 6vw;
    }

    .photo-story--one { left: 38%; width: 56%; }
    .photo-story--two { left: 15%; width: 68%; top: 1100px; }
    .photo-story--three { left: 34%; width: 60%; top: 1680px; }
    .photo-story--four { left: 15%; width: 64%; top: 2260px; }

    .staying__header {
        left: 6vw;
    }

    .staying__photo {
        left: 25%;
        width: 58%;
    }

    .recordings__header {
        padding-right: 6vw;
        padding-left: 6vw;
    }

    .recordings__list {
        gap: 5vw;
        padding: 0 7vw;
    }

    .recordings__list li {
        flex: 1;
    }

    .seeing__header,
    .seeing__viewport {
        padding-left: 6vw;
    }

    .trace__copy {
        left: 6vw;
        width: 38%;
    }

    .route-map {
        left: auto;
        right: 6vw;
    }

    .about__header {
        left: 6vw;
    }

    .about__text {
        left: 36%;
    }

    .about__photo {
        right: 6vw;
        left: auto;
        width: 31%;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .page {
        max-width: none;
    }

    .site-header {
        height: 60px;
        padding: 0 20px;
    }

    .site-logo__en,
    .site-nav__item small {
        display: none;
    }

    .site-nav__list {
        gap: 12px;
    }

    .site-nav__item a {
        font-size: 11px;
    }

    .hero {
        min-height: 650px;
        height: 100svh;
    }

    .hero__image {
        width: 100%;
        height: 100%;
        opacity: .55;
    }

    .hero__content {
        top: 22vh;
        right: 20px;
        left: 20px;
        width: auto;
    }

    .hero h1 {
        font-size: 58px;
        line-height: 54px;
    }

    .hero h1 span {
        padding-top: 16px;
        line-height: 62px;
    }

    .hero__scroll {
        left: 20px;
    }

    .section-title h2,
    .staying .section-title h2 {
        font-size: 68px;
        line-height: 70px;
        letter-spacing: 1px;
    }

    .section-title small {
        padding-bottom: 15px;
    }

    .passing {
        height: auto;
        padding: 80px 20px;
    }

    .passing__header {
        width: 100%;
    }

    .passing__axis {
        display: none;
    }

    .passing__note,
    .photo-story {
        position: static;
        width: 100%;
    }

    .passing__note {
        margin: 55px 0;
    }

    .photo-story {
        margin-bottom: 85px;
    }

    .photo-story__image,
    .photo-story--one .photo-story__image,
    .photo-story--two .photo-story__image,
    .photo-story--three .photo-story__image,
    .photo-story--four .photo-story__image {
        height: auto;
        aspect-ratio: 1.6 / 1;
    }

    .photo-card,
    .photo-card--left,
    .photo-card--right-top,
    .photo-card--left-bottom,
    .photo-card--right-bottom {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .staying {
        height: auto;
        padding: 80px 20px 0;
    }

    .staying__header,
    .staying__photo,
    .recordings {
        position: static;
        width: 100%;
    }

    .staying__photo {
        height: auto;
        margin-top: 45px;
    }

    .staying__photo .photo-reveal {
        height: auto;
        aspect-ratio: 1.67 / 1;
    }

    .recordings {
        margin-top: 70px;
    }

    .recordings__header {
        display: block;
        padding: 0 0 35px;
    }

    .recordings__header p {
        padding-top: 12px;
    }

    .recordings__list {
        display: block;
        padding: 0;
    }

    .recordings__list li {
        width: 100%;
        margin-bottom: 35px;
    }

    .street-quotes {
        position: relative;
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .seeing {
        height: auto;
        padding: 80px 0;
    }

    .seeing__header {
        display: block;
        height: auto;
        padding: 0 20px 55px;
    }

    .seeing__header > .eyebrow {
        width: auto;
        font-size: 12px;
    }

    .seeing__title-group {
        width: 100%;
        padding-top: 25px;
    }

    .seeing__title-group h2 {
        font-size: 82px;
        line-height: 78px;
    }

    .seeing__viewport {
        height: auto;
        padding-left: 20px;
    }

    .seeing__item {
        flex-basis: 76vw;
        width: 76vw;
    }

    .seeing__item--low,
    .seeing__item--mid {
        padding-top: 0;
    }

    .trace {
        height: auto;
        padding: 80px 20px;
    }

    .trace__copy,
    .route-map {
        position: static;
        width: 100%;
    }

    .trace__copy {
        margin-bottom: 55px;
    }

    .route-map {
        max-width: 432px;
        margin: 0 auto;
    }

    .about {
        height: auto;
        padding: 80px 20px;
    }

    .about__header,
    .about__text,
    .about__photo {
        position: static;
        width: 100%;
    }

    .about__text {
        margin-top: 45px;
    }

    .about__photo {
        margin-top: 45px;
    }

    .site-footer {
        min-height: 420px;
        padding: 60px 20px 30px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 45px;
    }

    .site-footer__sentence,
    .site-footer__nav,
    .site-footer__bottom {
        grid-column: 1;
        justify-self: start;
    }

    .site-footer__nav {
        flex-wrap: wrap;
    }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px) {
    .site-nav__list {
        gap: 8px;
    }

    .site-nav__item a {
        font-size: 10px;
    }

    .hero h1 {
        font-size: 48px;
        line-height: 48px;
    }

    .section-title h2,
    .staying .section-title h2 {
        font-size: 58px;
        line-height: 62px;
    }

    .seeing__item {
        flex-basis: 82vw;
        width: 82vw;
    }

    .route-map {
        transform-origin: top left;
    }
}

/* 尊重系统“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .street-quotes__track,
    .route-footprint {
        animation: none !important;
        transition: none !important;
    }

    .photo-reveal img,
    .photo-story__image img {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 1025px) {
    :root { --u: calc(100vw / 1257); }

    body { width: 100%; overflow-x: hidden; }
    .page { width: 100%; max-width: none; margin: 0; }

    /* Header */
    .site-header {
        left: 0; width: 100%; height: calc(70 * var(--u));
        padding: 0 calc(50 * var(--u)); transform: none;
    }
    .site-logo { gap: calc(15 * var(--u)); }
    .site-logo__cn { font-size: calc(18 * var(--u)); letter-spacing: calc(2.7 * var(--u)); }
    .site-logo__en { font-size: calc(9 * var(--u)); }
    .site-nav__list { gap: calc(28 * var(--u)); }
    .site-nav__item a { font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }
    .site-nav__item small { margin-left: calc(5 * var(--u)); font-size: calc(8 * var(--u)); }

    /* Hero */
    .hero { height: calc(815 * var(--u)); }
    .hero__image { width: 62%; height: 100%; }
    .hero__content {
        top: calc(154 * var(--u)); left: calc(97 * var(--u));
        width: calc(760 * var(--u));
    }
    .hero h1 {
        padding-top: calc(32 * var(--u));
        font-size: calc(138 * var(--u));
        line-height: calc(101 * var(--u));
        letter-spacing: calc(-2 * var(--u));
    }
    .hero h1 span { padding-top: calc(35 * var(--u)); line-height: calc(143 * var(--u)); }
    .hero__lead {
        padding-top: calc(29 * var(--u));
        font-size: calc(19 * var(--u)); line-height: calc(32 * var(--u));
    }
    .hero__lead-en {
        padding-top: calc(10 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }
    .walk-button { gap: calc(15 * var(--u)); margin-top: calc(55 * var(--u)); }
    .walk-button__footprints { width: calc(21 * var(--u)); height: calc(38 * var(--u)); }
    .walk-button__footprints i { width: calc(10 * var(--u)); height: calc(15 * var(--u)); }
    .walk-button__text { font-size: calc(14 * var(--u)); }
    .walk-button__text small { font-size: calc(9 * var(--u)); }
    .walk-button__arrow {
        width: calc(35 * var(--u)); height: calc(35 * var(--u));
        font-size: calc(18 * var(--u));
    }
    .hero__scroll {
        left: calc(50 * var(--u)); bottom: calc(30 * var(--u));
        font-size: calc(9 * var(--u));
    }

    /* Shared typography */
    .eyebrow { font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); }
    .section-title { gap: calc(12 * var(--u)); padding-top: calc(19 * var(--u)); }
    .section-title h2 {
        font-size: calc(138 * var(--u)); line-height: calc(130 * var(--u));
        letter-spacing: calc(5 * var(--u));
    }
    .section-title small { padding-bottom: calc(35 * var(--u)); font-size: calc(10 * var(--u)); }
    .section-intro {
        padding-top: calc(31 * var(--u));
        font-size: calc(19 * var(--u)); line-height: calc(37 * var(--u));
    }
    .section-intro-en {
        padding-top: calc(10 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }

    /* 01 Passing */
    .passing {
        height: calc(3153 * var(--u));
        padding: calc(120 * var(--u)) calc(100 * var(--u))
                 calc(120 * var(--u)) calc(97 * var(--u));
    }
    .passing__header { width: calc(983 * var(--u)); }
    .passing__axis {
        top: calc(455 * var(--u)); left: calc(641 * var(--u));
        height: calc(2575 * var(--u));
    }
    .passing__note { left: calc(97 * var(--u)); width: calc(233 * var(--u)); }
    .passing__note--one { top: calc(720 * var(--u)); }
    .passing__note--two { top: calc(1770 * var(--u)); }
    .passing__note p { font-size: calc(16.48 * var(--u)); line-height: calc(28.35 * var(--u)); }
    .passing__note small { font-size: calc(9.44 * var(--u)); line-height: calc(14.16 * var(--u)); }

    .photo-story--one {
        top: calc(521 * var(--u)); left: calc(454 * var(--u));
        width: calc(701 * var(--u));
    }
    .photo-story--one .photo-story__image { height: calc(442 * var(--u)); }
    .photo-story--two {
        top: calc(1153 * var(--u)); left: calc(189 * var(--u));
        width: calc(810 * var(--u));
    }
    .photo-story--two .photo-story__image { height: calc(462 * var(--u)); }
    .photo-story--three {
        top: calc(1815 * var(--u)); left: calc(416 * var(--u));
        width: calc(739 * var(--u));
    }
    .photo-story--three .photo-story__image { height: calc(454 * var(--u)); }
    .photo-story--four {
        top: calc(2482 * var(--u)); left: calc(189 * var(--u));
        width: calc(758 * var(--u));
    }
    .photo-story--four .photo-story__image { height: calc(413 * var(--u)); }

    .photo-card {
        width: calc(195 * var(--u));
        padding: calc(18 * var(--u)) calc(19 * var(--u)) calc(17 * var(--u));
    }
    .photo-card small { font-size: calc(9 * var(--u)); }
    .photo-card h3 {
        padding-top: calc(13 * var(--u));
        font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u));
    }
    .photo-card p {
        padding-top: calc(7 * var(--u));
        font-size: calc(14 * var(--u)); line-height: calc(24.5 * var(--u));
    }
    .photo-card--left {
        top: calc(52 * var(--u)); left: calc(-106 * var(--u));
        width: calc(176 * var(--u));
    }
    .photo-card--right-top {
        top: calc(-65 * var(--u)); right: calc(-85 * var(--u));
        width: calc(172 * var(--u));
    }
    .photo-card--left-bottom { left: calc(-68 * var(--u)); bottom: calc(55 * var(--u)); }
    .photo-card--right-bottom { right: calc(-137 * var(--u)); bottom: calc(-72 * var(--u)); }

    /* 02 Staying */
    .staying { height: calc(1207 * var(--u)); padding-top: calc(120 * var(--u)); }
    .staying__header {
        top: calc(120 * var(--u)); left: calc(97 * var(--u));
        width: calc(302 * var(--u));
    }
    .staying .section-title h2 {
        font-size: calc(126 * var(--u)); line-height: calc(118 * var(--u));
        letter-spacing: calc(-4 * var(--u));
    }
    .staying__photo {
        top: calc(220 * var(--u)); left: calc(310 * var(--u));
        width: calc(637 * var(--u)); height: calc(382 * var(--u));
    }
    .recordings { top: calc(712 * var(--u)); }
    .recordings__header {
        padding: 0 calc(97 * var(--u)) calc(41 * var(--u));
    }
    .recordings__list { gap: calc(88 * var(--u)); padding: 0 calc(126 * var(--u)); }
    .recordings__list li { width: calc(277 * var(--u)); }
    .recording { min-height: calc(208 * var(--u)); padding-top: calc(21 * var(--u)); }
    .recording blockquote { font-size: calc(21 * var(--u)); line-height: calc(32.5 * var(--u)); }
    .recording cite { padding-top: calc(23 * var(--u)); font-size: calc(9 * var(--u)); }
    .street-quotes { height: calc(96 * var(--u)); }
    .street-quotes__track { gap: calc(29 * var(--u)); }
    .street-quotes__track span { font-size: calc(35 * var(--u)); line-height: calc(39 * var(--u)); }
    .street-quotes__track span small { font-size: calc(16 * var(--u)); }

    /* 03 Seeing */
    .seeing { height: calc(1318 * var(--u)); padding-top: calc(120 * var(--u)); }
    .seeing__header {
        height: calc(525 * var(--u)); padding-left: calc(97 * var(--u));
    }
    .seeing__header > .eyebrow {
        width: calc(251 * var(--u));
        font-size: calc(17 * var(--u)); line-height: calc(32 * var(--u));
    }
    .seeing__title-group { width: calc(420 * var(--u)); }
    .seeing__title-group h2 {
        width: calc(161 * var(--u));
        font-size: calc(138 * var(--u)); line-height: calc(139 * var(--u));
        letter-spacing: calc(-7.6 * var(--u));
    }
    .seeing__title-group > p {
        font-size: calc(17 * var(--u)); line-height: calc(32.3 * var(--u));
    }
    .seeing__viewport {
        height: calc(575 * var(--u)); padding-left: calc(97 * var(--u));
    }
    .seeing__list { gap: calc(7 * var(--u)); }
    .seeing__item {
        flex: 0 0 calc(364.5 * var(--u));
        width: calc(364.5 * var(--u));
    }
    .seeing__item--low { padding-top: calc(72 * var(--u)); }
    .seeing__item--mid { padding-top: calc(25 * var(--u)); }
    .photo-reveal { height: calc(480 * var(--u)); }
    .seeing__item figcaption {
        height: calc(33 * var(--u)); padding-top: calc(10 * var(--u));
        font-size: calc(11 * var(--u));
    }

    /* 04 Trace
       内部仍使用 432×520 的 Figma 坐标系，
       整体缩放，保证 11 个 SVG、节点和文字不会互相错位。 */
    .trace { height: calc(800 * var(--u)); }
    .trace__copy {
        top: calc(141 * var(--u)); left: calc(97 * var(--u));
        width: calc(438 * var(--u));
    }
    .trace__note, .trace__note-en { width: calc(384 * var(--u)); }
    .trace__note {
        font-size: calc(16.48 * var(--u)); line-height: calc(28.35 * var(--u));
    }
    .route-map {
        top: calc(140 * var(--u)); right: calc(102 * var(--u)); left: auto;
        width: 432px; height: 520px;
        transform: scale(calc(100vw / 1257));
        transform-origin: top right;
    }

    /* 05 About */
    .about { height: calc(850 * var(--u)); }
    .about__header {
        top: calc(135 * var(--u)); left: calc(97 * var(--u));
        width: calc(263 * var(--u));
    }
    .about__text {
        top: calc(175 * var(--u)); left: calc(459 * var(--u));
        width: calc(275 * var(--u));
    }
    .about__text > p:not(.about__concept) {
        font-size: calc(14 * var(--u)); line-height: calc(28.7 * var(--u));
    }
    .about__text > small {
        padding-bottom: calc(27 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }
    .about__concept { font-size: calc(19 * var(--u)); line-height: calc(37 * var(--u)); }
    .about__photo {
        top: calc(175 * var(--u)); left: calc(776 * var(--u));
        width: calc(379 * var(--u));
    }
    .about__photo .photo-reveal { height: calc(510 * var(--u)); }

    /* Footer */
    .site-footer {
        min-height: calc(420 * var(--u));
        padding: calc(82 * var(--u)) calc(126 * var(--u)) calc(34 * var(--u));
        grid-template-rows: calc(72 * var(--u)) calc(154 * var(--u)) calc(30 * var(--u));
        column-gap: calc(24 * var(--u));
    }
    .site-footer__brand span {
        font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u));
        letter-spacing: calc(4 * var(--u));
    }
    .site-footer__brand small { padding-top: calc(11 * var(--u)); font-size: calc(9 * var(--u)); }
    .site-footer__sentence { font-size: calc(19 * var(--u)); line-height: calc(33 * var(--u)); }
    .site-footer__nav { gap: calc(24 * var(--u)); font-size: calc(11 * var(--u)); }
    .site-footer__bottom { padding-top: calc(16 * var(--u)); font-size: calc(9 * var(--u)); }
}


/* =========================================================
   V4 TRACE — FIXED FIGMA COORDINATE SYSTEM
   route-map__canvas 永远为 432 × 520。
   所有路线元素共享这一个定位参照；响应式只缩放整个 canvas。
   ========================================================= */

.route-map {
    --route-scale: 1;
    position: absolute;
    width: calc(432px * var(--route-scale));
    height: calc(520px * var(--route-scale));
    overflow: visible;
    border: 0;
    background: transparent;
    transform: none;
}

.route-map__canvas {
    position: relative;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
    transform: scale(var(--route-scale));
    transform-origin: top left;
}

/* 所有内部元素只认 432 × 520 画布，不再跟随断点分别改坐标 */
.route-map__vectors,
.route-map__footprints {
    position: absolute;
    inset: 0;
}

.route-map__vectors {
    pointer-events: none;
}

.route-map__footprints {
    z-index: 5;
    pointer-events: none;
}

.route-map__direction,
.route-map__street,
.route-point,
.route-footprint,
.vector {
    position: absolute;
}

/* Desktop：1257px Figma = 1:1，整张地图一起缩放 */
@media (min-width: 1025px) {
    .route-map {
        --route-scale: calc(100vw / 1257);
        top: calc(140 * var(--u));
        right: calc(102 * var(--u));
        left: auto;
    }
}

/* Tablet：文案在上，路线图在下 */
@media (min-width: 769px) and (max-width: 1024px) {
    .trace {
        height: auto;
        min-height: 1050px;
        padding: 82px 6vw 100px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: min(620px, 100%);
        margin: 0;
    }

    .trace__note,
    .trace__note-en {
        width: min(520px, 100%);
    }

    .route-map {
        --route-scale: min(1.35, calc(88vw / 432));
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 64px auto 0;
    }
}

/* Mobile：路线图按可用屏幕宽度整体缩小 */
@media (max-width: 768px) {
    .trace {
        height: auto;
        min-height: 0;
        padding: 72px 20px 84px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
    }

    .trace__note,
    .trace__note-en {
        width: 100%;
    }

    .route-map {
        --route-scale: min(1, calc((100vw - 40px) / 432));
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 48px auto 0;
    }
}

@media (max-width: 480px) {
    .trace {
        padding-right: 16px;
        padding-left: 16px;
    }

    .route-map {
        --route-scale: min(1, calc((100vw - 32px) / 432));
        margin-top: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
}


/* =========================================================
   V4.1 TRACE — SAFE FIT
   解决窄屏时路线图被右侧裁切：
   - 内部仍固定 432 × 520，不改任何节点坐标；
   - 外层只改变整张地图的 scale；
   - 使用明确的 @media 缩放档位，避免浏览器对
     length/length calc() 支持差异造成 scale 失效。
   ========================================================= */

.trace {
    overflow: hidden;
}

.route-map {
    overflow: visible;
}

.route-map__canvas {
    overflow: hidden;
}

/* 平板：路线图完整居中显示 */
@media (min-width: 769px) and (max-width: 1024px) {
    .route-map {
        --route-scale: 1;
        width: 432px;
        height: 520px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 601–768px */
@media (min-width: 601px) and (max-width: 768px) {
    .route-map {
        --route-scale: .90;
        width: 388.8px;
        height: 468px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 481–600px */
@media (min-width: 481px) and (max-width: 600px) {
    .route-map {
        --route-scale: .78;
        width: 336.96px;
        height: 405.6px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 391–480px */
@media (min-width: 391px) and (max-width: 480px) {
    .route-map {
        --route-scale: .68;
        width: 293.76px;
        height: 353.6px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* <=390px */
@media (max-width: 390px) {
    .route-map {
        --route-scale: .60;
        width: 259.2px;
        height: 312px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .trace {
        overflow: hidden;
    }

    .route-map__canvas {
        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}


/* =========================================================
   V4.2 TRACE — CONTINUOUS FLUID FIT
   无论视口多窄，整张 432×520 路线图始终完整显示。
   关键：不用固定缩放档位；使用 CSS 自定义属性计算可用宽度，
   再由 transform: scale() 连续缩放。
   ========================================================= */

@media (max-width: 768px) {
    .trace {
        --trace-side-space: 32px;
        overflow: hidden;
    }

    /*
       外层宽度始终等于“当前可用宽度”。
       aspect-ratio 保持 Figma 432:520 比例，
       所以占位高度也会同步连续变化。
    */
    .route-map {
        --route-width: min(432px, calc(100vw - var(--trace-side-space)));
        --route-scale: calc(var(--route-width) / 432px);

        position: relative;
        top: auto;
        right: auto;
        left: auto;

        width: var(--route-width);
        height: auto;
        aspect-ratio: 432 / 520;

        margin: 48px auto 0;
        overflow: visible;
    }

    /*
       内部仍然永远是 432×520。
       11 个 SVG / 01–08 / 街道名 / 脚印完全不改坐标。
    */
    .route-map__canvas {
        width: 432px;
        height: 520px;

        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}

/* 极窄屏幕只缩小 section 左右留白，地图仍连续适配 */
@media (max-width: 480px) {
    .trace {
        --trace-side-space: 24px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .route-map {
        margin-top: 38px;
    }
}

@media (max-width: 320px) {
    .trace {
        --trace-side-space: 16px;
        padding-right: 8px;
        padding-left: 8px;
    }
}


/* =========================================================
   V4.3 TRACE MOBILE NATURAL HEIGHT
   移动端轨迹 section 高度完全由内容自然撑开，
   消除路线图下方的大面积空白。
   ========================================================= */

@media (max-width: 768px) {
    .trace {
        height: auto;
        min-height: 0;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
    }

    .route-map {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin-top: 48px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .trace {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .route-map {
        margin-top: 38px;
    }
}

.seeing__viewport {
    overflow: visible;
}

@media (max-width: 768px) {
    .seeing {
        height: auto;
        padding-bottom: 72px;
    }

    .seeing__viewport {
        height: auto;
        padding: 0 20px;
        overflow: visible;
    }

    .seeing__list {
        display: block;
        width: 100%;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        width: 100%;
        max-width: 430px;
        margin: 0 auto 28px;
        padding-top: 0;
    }

    .seeing__item .photo-reveal {
        width: 100%;
        height: auto;
        aspect-ratio: 364.5 / 480;
    }

    .seeing__item figcaption {
        height: auto;
        padding-top: 10px;
    }
}

/* 路线图只做静态展示：脚印保留在 Figma 位置，但不移动。 */
.route-footprint {
    transform: none;
}

/* 1. HERO：开始行走上移，首屏底部不再掉出画面 */
.walk-button {
    margin-top: 34px;
}

.hero__scroll {
    bottom: 48px;
}

/* 首屏顶部不额外留黑色条带 */
.hero,
.hero__image {
    top: 0;
    margin-top: 0;
}

/* 2. 经过：桌面端整体稍微上移，让进入下一屏后更快看到图文 */
@media (min-width: 1025px) {
    .passing {
        height: calc(3075 * var(--u));
        padding-top: calc(86 * var(--u));
    }

    .passing__axis {
        top: calc(410 * var(--u));
        height: calc(2540 * var(--u));
    }

    .passing__note--one { top: calc(670 * var(--u)); }
    .passing__note--two { top: calc(1720 * var(--u)); }

    .photo-story--one { top: calc(471 * var(--u)); }
    .photo-story--two { top: calc(1103 * var(--u)); }
    .photo-story--three { top: calc(1765 * var(--u)); }
    .photo-story--four { top: calc(2432 * var(--u)); }

    /* HERO 桌面比例下同步修正“开始行走” */
    .walk-button {
        margin-top: calc(34 * var(--u));
    }

    .hero__scroll {
        bottom: calc(48 * var(--u));
    }
}

/* 3. 停留：去掉底部多余的浅色/白色细条 */
.staying,
.street-quotes {
    margin-bottom: 0;
}

.street-quotes {
    border-bottom: 0;
}

.seeing {
    margin-top: 0;
    border-top: 0;
}

/* 4. 轨迹文案恢复 Figma 的“两段式”节奏：
      第一段靠近标题，第二段明显下移 */
.trace__note {
    margin-top: 122px;
}

/* 路线图 02：把“北正街”从“车厢里的片刻”文字旁移开 */
.route-map__street--beizheng {
    top: 25.6%;
    left: 65.2%;
}

/* 5. Footer：导航与横线拉开距离 */
.site-footer__nav {
    padding-bottom: 24px;
}

.site-footer__bottom {
    padding-top: 18px;
}

/* 桌面端按 Figma 比例同步 footer 间距 */
@media (min-width: 1025px) {
    .trace__note {
        margin-top: calc(122 * var(--u));
    }

    .site-footer__nav {
        padding-bottom: calc(24 * var(--u));
    }

    .site-footer__bottom {
        padding-top: calc(18 * var(--u));
    }
}

/* 平板/手机不强行保留桌面的大段空隙，避免窄屏出现过量留白 */
@media (max-width: 1024px) {
    .trace__note {
        margin-top: 56px;
    }
}

@media (max-width: 768px) {
    .trace__note {
        margin-top: 38px;
    }

    .site-footer__nav {
        padding-bottom: 20px;
    }
}


/* =========================================================
   V5.2 HERO — ONE SCREEN FIT
   首屏始终以浏览器可视高度为边界：
   Header / 主标题 / 文案 / 开始行走 / SCROLL 全部在一屏内。
   仅使用基础 CSS + @media。
   ========================================================= */

.hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    max-height: none;
    overflow: hidden;
}

/* 首图跟随首屏高度，不再按照页面宽度把 Hero 一起纵向放大 */
.hero__image {
    height: 100%;
}

/* 桌面端恢复以“视口高度”为主要尺度，而不是之前的 --u 宽度尺度 */
@media (min-width: 1025px) {
    .hero {
        height: 100vh;
        min-height: 620px;
    }

    .hero__image {
        top: 0;
        height: 100%;
    }

    .hero__content {
        top: 18vh;
    }

    .hero__eyebrow {
        margin-bottom: 2.6vh;
    }

    .hero__title {
        font-size: min(10.3vw, 18vh);
        line-height: .90;
    }

    .hero__intro {
        margin-top: 4.2vh;
        font-size: min(1.55vw, 2.6vh);
        line-height: 1.55;
    }

    .hero__intro-en {
        margin-top: 1.8vh;
        font-size: min(.82vw, 1.35vh);
    }

    .walk-button {
        margin-top: 5.8vh;
    }

    .hero__scroll {
        bottom: 2.2vh;
    }
}

/* 较矮的笔记本屏幕进一步压缩纵向间距，确保内容仍完整露出 */
@media (min-width: 1025px) and (max-height: 760px) {
    .hero__content {
        top: 15vh;
    }

    .hero__title {
        font-size: min(9.5vw, 16.5vh);
    }

    .hero__intro {
        margin-top: 3vh;
    }

    .walk-button {
        margin-top: 4vh;
    }

    .hero__scroll {
        bottom: 1.6vh;
    }
}


/* =========================================================
   V5.3 HERO — MORE BREATHING ROOM
   保持一屏完整显示，同时减小主标题并整体略上移。
   ========================================================= */

@media (min-width: 1025px) {
    .hero__content {
        top: 13.5vh;
    }

    .hero__eyebrow {
        margin-bottom: 2.2vh;
    }

    .hero__title {
        font-size: min(9.25vw, 15.8vh);
        line-height: .91;
    }

    .hero__intro {
        margin-top: 3.2vh;
        font-size: min(1.42vw, 2.35vh);
        line-height: 1.5;
    }

    .hero__intro-en {
        margin-top: 1.35vh;
        font-size: min(.78vw, 1.25vh);
    }

    .walk-button {
        margin-top: 4.2vh;
    }

    .hero__scroll {
        bottom: 2.4vh;
    }
}

@media (min-width: 1025px) and (max-height: 760px) {
    .hero__content {
        top: 12vh;
    }

    .hero__title {
        font-size: min(8.8vw, 14.6vh);
    }

    .hero__intro {
        margin-top: 2.5vh;
    }

    .walk-button {
        margin-top: 3.2vh;
    }
}


/* =========================================================
   V5.3-HOME-MATCH
   只在 V5.3 基础上重做首页 Hero。
   目标：严格匹配用户提供的 1257×768 参考版式。
   其他章节不修改。
   ========================================================= */

@media (min-width: 1025px) {
    .page {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .site-header {
        left: 0;
        width: 100%;
        height: 70px;
        padding: 0 48px;
        transform: none;
    }

    .site-logo {
        gap: 15px;
    }

    .site-logo__cn {
        font-size: 18px;
        letter-spacing: 2.7px;
    }

    .site-logo__en {
        font-size: 9px;
        letter-spacing: .99px;
    }

    .site-nav__list {
        gap: 28px;
    }

    .site-nav__item a {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 1.68px;
    }

    .site-nav__item small {
        margin-left: 5px;
        font-size: 8px;
        letter-spacing: .88px;
    }

    .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 700px;
        max-height: none;
        overflow: hidden;
        background: #111;
    }

    /* 参考图：图片从约 38% 处开始，一直到屏幕最右侧 */
    .hero__image {
        top: 0;
        right: 0;
        width: 62%;
        height: 100%;
        overflow: hidden;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center bottom;
        }

    .hero__image::after {
        background:
            linear-gradient(
                90deg,
                #111 0%,
                rgba(17,17,16,.92) 12%,
                rgba(17,17,16,.70) 34%,
                rgba(17,17,16,.18) 72%,
                rgba(17,17,16,0) 100%
            );
    }

    /* 1257×768 参考图中的主内容位置 */
    .hero__content {
        top: 145px;
        left: 90px;
        width: 760px;
    }

    .hero__content > .eyebrow {
        margin: 0;
        padding: 0;
        font-size: 10px;
        line-height: 19px;
        letter-spacing: 1.5px;
    }

    .hero h1 {
        margin: 0;
        padding-top: 29px;
        font-size: 138px;
        line-height: 101px;
        letter-spacing: -2px;
        white-space: nowrap;
    }

    .hero h1 span {
        padding-top: 35px;
        line-height: 143px;
    }

    .hero__lead {
        margin: 0;
        padding-top: 27px;
        font-size: 19px;
        line-height: 32px;
        letter-spacing: .85px;
    }

    .hero__lead-en {
        padding-top: 8px;
        font-size: 10px;
        line-height: 17px;
        letter-spacing: .8px;
    }

    .walk-button {
        margin-top: 54px;
    }

    .hero__scroll {
        left: 45px;
        bottom: 24px;
        font-size: 9px;
        letter-spacing: .9px;
    }
}

/* 参考图高度附近：确保“开始行走”和 SCROLL 都完整留在首屏 */
@media (min-width: 1025px) and (max-height: 800px) {
    .hero__content {
        top: 145px;
    }

    .hero h1 {
        font-size: 138px;
        line-height: 101px;
    }

    .hero h1 span {
        padding-top: 35px;
        line-height: 143px;
    }

    .hero__lead {
        padding-top: 27px;
    }

    .walk-button {
        margin-top: 54px;
    }
}

/* 仅当桌面高度明显更矮时才做最小限度压缩，不改变版式关系 */
@media (min-width: 1025px) and (max-height: 720px) {
    .hero__content {
        top: 118px;
    }

    .hero h1 {
        font-size: 122px;
        line-height: 92px;
    }

    .hero h1 span {
        padding-top: 28px;
        line-height: 126px;
    }

    .hero__lead {
        padding-top: 20px;
    }

    .walk-button {
        margin-top: 32px;
    }
}


/* =========================================================
   STAY TOP ALIGN — 真正顶部对齐
   STAY 是 .section-title 内的 flex 子元素，因此不能靠 top 移动。
   ========================================================= */
@media (min-width: 1025px) {
    .staying .section-title {
        align-items: flex-start;
    }

    .staying .section-title small {
        padding-bottom: 0;
        padding-top: 0;
        margin-top: 0;
        align-self: flex-start;
    }
}

/* FRAME 02：标题“车厢里的片刻”保持一行显示 */
@media (min-width: 769px) {
    .photo-story--two .photo-card--right-top {
        width: 230px;
    }

    .photo-story--two .photo-card--right-top h3 {
        white-space: nowrap;
    }
}

@media (min-width: 1025px) {
    .photo-story--two .photo-card--right-top {
        width: calc(230 * var(--u));
    }
}

/* =========================================================
   V5.3.4 HERO PHOTO — 保持照片顶部连续，不再用黑条硬切
   通过取景位置 + 顶部渐暗保证人物完整、导航清晰。
   ========================================================= */
@media (min-width: 1025px) {
    .hero__image {
        top: 0;
        right: 0;
        width: 62%;
        height: 100%;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 42%;
    }

    .hero__image::after {
        background:
            linear-gradient(180deg, rgba(17, 17, 16, .52) 0%, rgba(17, 17, 16, .12) 17%, rgba(17, 17, 16, 0) 34%),
            linear-gradient(90deg, #111 0%, rgba(17, 17, 16, .76) 32%, rgba(17, 17, 16, .10) 75%);
    }
}

/* V5.3.5 — 首页“开始行走”双层脚印
   仅增加右下方深灰实体残影，不改 Hero 人物取景、导航和其他布局。 */
.walk-button__footprints i {
    box-shadow: 5px 7px 0 rgba(92, 92, 92, .48);
}

@media (min-width: 1025px) {
    .walk-button__footprints i {
        box-shadow: calc(5 * var(--u)) calc(7 * var(--u)) 0 rgba(92, 92, 92, .48);
    }
}


/* =========================================================
   V5.3.7 · PASSING / FRAME 05
   按最新 Figma 截图：第五组延续纵向轴线节奏，图片居中偏右，
   文案卡从图片左侧叠入；不改 V5.3.5 已确认的首页。
   ========================================================= */
@media (min-width: 1025px) {
    .passing {
        height: calc(3760 * var(--u));
    }

    .passing__axis {
        height: calc(3265 * var(--u));
    }

    .photo-story--five {
        top: calc(3060 * var(--u));
        left: calc(355 * var(--u));
        width: calc(760 * var(--u));
    }

    .photo-story--five .photo-story__image {
        height: calc(430 * var(--u));
    }

    .photo-story--five .photo-story__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 48%;
    }

    .photo-card--frame05 {
        left: calc(-145 * var(--u));
        bottom: calc(58 * var(--u));
        width: calc(210 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .passing {
        height: 3520px;
    }

    .passing__axis {
        height: 2970px;
    }

    .photo-story--five {
        top: 2820px;
        left: 29%;
        width: 62%;
    }

    .photo-story--five .photo-story__image {
        height: auto;
        aspect-ratio: 760 / 430;
    }

    .photo-card--frame05 {
        left: -19%;
        bottom: 13%;
    }
}

@media (max-width: 768px) {
    .photo-story--five .photo-story__image {
        height: auto;
        aspect-ratio: 760 / 430;
    }

    .photo-card--frame05 {
        position: static;
        width: 100%;
        box-shadow: none;
    }
}

/* =========================================================
   V5.3.8 · FRAME 01 / FRAME 05 文案保持单行
   仅调整两张说明卡的宽度与正文换行，不改变其他版式。
   ========================================================= */
.photo-card--left p,
.photo-card--frame05 p {
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .photo-card--left {
        width: calc(235 * var(--u));
    }

    .photo-card--frame05 {
        width: calc(300 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .photo-card--left {
        width: 235px;
    }

    .photo-card--frame05 {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .photo-card--left p,
    .photo-card--frame05 p {
        white-space: normal;
    }
}


/* =========================================================
   V5.3.8 TRACE — SVG X / Y COORDINATE VERSION
   老师课堂方式：整张路线图使用 432 × 520 SVG 坐标系。
   左上角为 (0,0)，x 向右，y 向下。
   路线、街名、节点和脚印都直接使用 SVG 坐标定位。
   ========================================================= */
.route-map__canvas { display: none !important; }

.route-map__svg {
    display: block;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
    transform: scale(var(--route-scale));
    transform-origin: top left;
}

.route-map__background { fill: #161615; }
.route-map__vectors { pointer-events: none; }

.route-map__directions rect { fill: rgba(17, 17, 15, .7); }
.route-map__directions text {
    fill: #eeebe4;
    font-size: 10px;
    letter-spacing: 1px;
}

.route-map__streets text {
    fill: #afaaa0;
    font-size: 7.4px;
}
.route-map__streets .route-map__street--main { fill: #e4dfd5; }

.route-map__points a { text-decoration: none; }
.route-map__points circle {
    fill: #111;
    stroke: #817c72;
    stroke-width: 1;
}
.route-map__points text { fill: #f2eee6; }
.route-map__points .route-point__number {
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.route-map__points .route-point__title {
    font-family: Tinos, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;
}

.route-map__footprints { pointer-events: none; }

/* 新版 SVG 本身就是固定 432×520 画布，响应式仍只缩放整张地图 */
@media (max-width: 768px) {
    .route-map__svg {
        width: 432px;
        height: 520px;
        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}


/* 原生 HTML5 音频播放器：不使用 JavaScript */
.native-audio {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 18px;
    border-top: 1px solid rgba(238, 234, 225, 0.32);
    border-bottom: 1px solid rgba(238, 234, 225, 0.32);
    padding: 7px 0;
    color-scheme: dark;
    background: transparent;
}

.native-audio:focus {
    outline: none;
}

/* ABOUT 文案：手写风格字体 */
.about__text {
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "Segoe Print", "Bradley Hand", cursive;
}

.about__text > p:not(.about__concept),
.about__text > small,
.about__concept {
    font-family: inherit;
}

/* ABOUT 文案：更明显的钢笔手记风格（V2） */
.about__text {
    font-family: "STXingkai", "华文行楷", "Kaiti SC", "STKaiti", "KaiTi", cursive;
    font-weight: 400;
}

.about__text > p:not(.about__concept) {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.045em;
}

.about__text > small {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.035em;
}

.about__concept {
    font-family: "STXingkai", "华文行楷", "Kaiti SC", "STKaiti", "KaiTi", cursive;
    font-weight: 400;
    letter-spacing: 0.055em;
}

/* ABOUT 总结句：恢复原字体，并保持单行 */
.about__concept {
    font-family: Tinos, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .85px;
    white-space: nowrap;
}

.about__concept + small {
    font-family: Tinos, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .8px;
    white-space: nowrap;
}

/* ABOUT 手写正文可读性微调 V4：仅放大手写正文，不改变总结句与版式 */
.about__text > p:not(.about__concept) {
    font-size: 16px;
    line-height: 31.5px;
}

.about__text > small:not(.about__concept + small) {
    font-size: 11px;
    line-height: 18.5px;
}

@media (min-width: 1025px) {
    .about__text > p:not(.about__concept) {
        font-size: calc(16 * var(--u));
        line-height: calc(31.5 * var(--u));
    }

    .about__text > small:not(.about__concept + small) {
        font-size: calc(11 * var(--u));
        line-height: calc(18.5 * var(--u));
    }
}

/* =========================================================
   ABOUT 响应式防遮挡修正
   中间文字与右侧照片始终保留安全间距；总结句保持单行。
   ========================================================= */
@media (min-width: 1025px) {
    .about__text {
        width: calc(300 * var(--u));
        z-index: 2;
    }

    .about__photo {
        left: calc(815 * var(--u));
        width: calc(340 * var(--u));
        z-index: 1;
    }

    .about__photo .photo-reveal {
        height: calc(510 * var(--u));
    }

    .about__concept {
        font-size: calc(18 * var(--u));
        letter-spacing: calc(.55 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .about__text {
        left: 34%;
        width: 30%;
        z-index: 2;
    }

    .about__photo {
        left: auto;
        right: 4.5vw;
        width: 29%;
        z-index: 1;
    }

    .about__concept {
        font-size: clamp(14px, 1.7vw, 17px);
        letter-spacing: .35px;
        white-space: nowrap;
    }

    .about__concept + small {
        font-size: clamp(8px, 1vw, 10px);
        white-space: nowrap;
    }
}

/* =========================================================
   SEEING 横向摄影画廊｜纯 CSS 左右滑动
   不使用 JavaScript：触控板、Shift+滚轮、触屏拖动均可横向浏览。
   ========================================================= */
.seeing__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.seeing__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
}

.seeing__item {
    flex: 0 0 364.5px;
    scroll-snap-align: start;
}

/* 小屏仍保持横向摄影长廊，不改成纵向列表 */
@media (max-width: 768px) {
    .seeing {
        height: auto;
        padding-bottom: 72px;
    }

    .seeing__viewport {
        height: 575px;
        padding-left: 20px;
        padding-right: 20px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .seeing__list {
        display: flex;
        width: max-content;
        gap: 7px;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        width: min(78vw, 364.5px);
        max-width: none;
        margin: 0;
        flex: 0 0 min(78vw, 364.5px);
    }

    .seeing__item--low { padding-top: 72px; }
    .seeing__item--mid { padding-top: 25px; }

    .seeing__item .photo-reveal {
        width: 100%;
        height: 480px;
        aspect-ratio: auto;
    }
}

/* =========================================================
   SEEING 横向画廊修正｜完整显示图注 + 隐藏滚动条
   保留横向滚动功能，只隐藏浏览器原生滚动条。
   ========================================================= */
.seeing__viewport {
    height: 620px;
    padding-bottom: 28px;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧版 Edge / IE */
}

.seeing__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                  /* Chrome / Edge / Safari */
}

/* 给每张错落照片的图注留出完整空间 */
.seeing__item figure {
    overflow: visible;
}

.seeing__item figcaption {
    min-height: 33px;
    height: auto;
    padding-bottom: 8px;
    overflow: visible;
}

@media (max-width: 768px) {
    .seeing__viewport {
        height: 620px;
        padding-bottom: 28px;
        scrollbar-width: none;
    }

    .seeing__viewport::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* =========================================================
   SEEING 自适应修正｜横向画廊图注始终完整显示
   原因：桌面端照片会随 --u 放大，viewport 高度也必须同步缩放。
   ========================================================= */
.seeing__viewport {
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.seeing__viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (min-width: 1025px) {
    .seeing__viewport {
        /* 72 错落 + 480 照片 + 图注空间，并随 Figma 基准比例一起缩放 */
        height: calc(630 * var(--u));
        padding-bottom: calc(28 * var(--u));
    }

    .seeing__item figcaption {
        min-height: calc(33 * var(--u));
        height: auto;
        padding-bottom: calc(8 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .seeing__viewport {
        height: 630px;
        padding-bottom: 28px;
    }
}

@media (max-width: 768px) {
    .seeing__viewport {
        height: 630px;
        padding-bottom: 28px;
    }
}