:root { --ink:#11110f; --ink-soft:#34322e; --paper:#f7f3ec; --paper-deep:#ebe3d6; --line:rgba(17,17,15,.15); --red:#b8201c; --white:#fffaf1; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--paper); color:var(--ink); margin:0; } img { display:block; width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.site-header { align-items:center; background:linear-gradient(to bottom,rgba(8,8,7,.52),rgba(8,8,7,.08),transparent); color:var(--white); display:flex; inset:0 0 auto; justify-content:space-between; padding:24px 32px; position:fixed; transition:background 240ms ease,padding 240ms ease; z-index:20; }
.site-header.is-scrolled { -webkit-backdrop-filter:blur(18px) saturate(115%); backdrop-filter:blur(18px) saturate(115%); background:rgba(15,15,13,.78); padding-bottom:16px; padding-top:16px; }.brand { align-items:center; display:flex; gap:12px; }.brand-icon { filter:drop-shadow(0 1px 10px rgba(0,0,0,.24)); height:34px; object-fit:contain; width:34px; }.brand strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:24px; font-weight:700; line-height:1; }.brand small { color:rgba(255,250,241,.66); display:block; font-size:11px; margin-top:5px; }.header-actions { align-items:center; display:flex; gap:30px; }.back-link,.lang-toggle { font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.back-link { border-bottom:1px solid rgba(255,250,241,.42); padding-bottom:8px; }.back-label-short { display:none; }.lang-toggle { background:none; border:0; color:var(--white); cursor:pointer; }.lang-toggle span:first-child { color:#ed453d; }.lang-toggle.is-zh span:first-child { color:rgba(255,250,241,.66); }.lang-toggle.is-zh span:last-child { color:#ed453d; }
.experience-hero { color:var(--white); height:clamp(620px,72vh,720px); overflow:hidden; position:relative; }.experience-hero picture { inset:0; position:absolute; }.hero-image { height:100%; object-fit:cover; object-position:center 53%; transform:scale(1.04); }.page-ready .hero-image { transform:scale(1); transition:transform 1.8s ease-out; }.hero-shade { background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.4) 42%,rgba(0,0,0,.06) 74%),linear-gradient(0deg,rgba(0,0,0,.56),transparent 44%); inset:0; position:absolute; }.hero-content { padding:clamp(120px,14vh,140px) 32px 48px; position:relative; width:min(1000px,82vw); }@media (min-width:921px) { .hero-content { margin-left:clamp(72px,8vw,150px); } }.eyebrow,.section-label { color:var(--red); font-size:12px; font-weight:800; letter-spacing:.14em; margin:0 0 16px; text-transform:uppercase; }h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:0; }.hero-content h1 { font-size:clamp(58px,5.8vw,88px); line-height:.99; margin:0; max-width:960px; }.hero-body { color:rgba(255,250,241,.88); font-size:18px; line-height:1.6; margin:26px 0 0; max-width:620px; }.hero-meta { border-top:1px solid rgba(255,250,241,.25); display:flex; flex-direction:column; gap:8px; margin-top:22px; max-width:620px; padding-top:16px; }.hero-meta span { color:rgba(255,250,241,.75); font-size:12px; font-weight:700; letter-spacing:.05em; }.hero-actions { display:flex; flex-wrap:wrap; gap:38px; margin-top:26px; }.hero-actions a,.host-note-copy a { font-size:12px; font-weight:800; letter-spacing:.11em; padding-bottom:9px; position:relative; text-transform:uppercase; }.hero-actions a::after,.host-note-copy a::after { background:var(--red); bottom:0; content:""; height:2px; left:0; position:absolute; transform:scaleX(.38); transform-origin:left center; transition:transform 420ms cubic-bezier(.22,1,.36,1); width:100%; }.hero-actions a:hover::after,.hero-actions a:focus-visible::after,.host-note-copy a:hover::after,.host-note-copy a:focus-visible::after { transform:scaleX(1); }.scroll-cue { bottom:28px; font-size:10px; font-weight:800; letter-spacing:.15em; position:absolute; right:32px; text-transform:uppercase; }
.question-section { align-items:start; display:grid; gap:6vw; grid-template-columns:minmax(160px,.45fr) minmax(0,1.55fr); margin:0 auto; max-width:1440px; padding:140px 6vw 150px; }.question-number { color:var(--red); font-family:Georgia,"Times New Roman",serif; font-size:clamp(96px,13vw,190px); line-height:.8; opacity:.18; }.question-copy { max-width:960px; }.question-copy h2,.section-heading h2,.fit-heading h2,.practical-heading h2,.host-note-copy h2,.page-cta h2,.walking-copy h2 { font-size:clamp(43px,5vw,74px); line-height:1.08; margin:0; }.question-copy>p:last-child,.selective-copy>p:last-child,.section-heading>p:last-child,.walking-copy>p:last-child,.page-cta>div>p { color:var(--ink-soft); font-size:18px; line-height:1.75; margin:38px 0 0; max-width:700px; }
.why-section { border-top:1px solid var(--line); display:grid; gap:8vw; grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr); margin:0 auto; max-width:1320px; padding:100px 6vw 140px; }.why-label>span { color:var(--red); font-family:Georgia,"Times New Roman",serif; font-size:clamp(54px,6vw,82px); line-height:1; opacity:.72; }.why-copy { max-width:760px; }.why-copy h2 { font-size:clamp(38px,4.4vw,64px); line-height:1.08; margin:0; }.why-copy p { color:var(--ink-soft); font-size:17px; line-height:1.75; margin:30px 0 0; }.why-copy p:last-child { color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,2.3vw,34px); line-height:1.35; }
.selective-section { background:var(--ink); color:var(--white); padding:140px 7vw 150px; }.selective-copy { margin:0 auto; max-width:1040px; text-align:center; }.selective-copy h2 { font-size:clamp(42px,4.7vw,72px); line-height:1.08; margin:0; }.selective-copy>p:last-child { color:rgba(255,250,241,.72); margin-left:auto; margin-right:auto; }
.route-section { padding:140px 6vw 50px; }.section-heading { margin:0 auto 100px; max-width:940px; text-align:center; }.section-heading h2 { margin:0 auto; }.section-heading>p:last-child { margin-left:auto; margin-right:auto; }.route-row { align-items:center; display:grid; gap:7vw; grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr); margin:0 auto 130px; max-width:1320px; }.route-row.reverse { grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr); }.route-row.reverse .route-copy { grid-column:2; grid-row:1; }.route-row.reverse .route-image { grid-column:1; grid-row:1; }.route-copy { max-width:540px; }.route-copy>span { color:var(--red); display:block; font-size:12px; font-weight:800; letter-spacing:.12em; margin-bottom:28px; text-transform:uppercase; }.route-copy h3 { font-size:clamp(39px,4vw,62px); line-height:1.05; margin:0; }.route-copy p { color:var(--ink-soft); font-size:17px; line-height:1.75; margin:28px 0 0; }.route-image { overflow:hidden; }.route-image.landscape { aspect-ratio:3/2; }.route-image.square { aspect-ratio:1/1; max-width:680px; }.route-image img,.walking-image img { height:100%; object-fit:cover; transition:transform 700ms ease; }.route-image:hover img { transform:scale(1.02); }
.walking-section { background:var(--paper-deep); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:20px; min-height:680px; }.walking-copy { align-self:center; padding:110px 9vw; }.walking-image { min-height:540px; overflow:hidden; }.walking-image img { object-position:center; }.fit-section { display:grid; gap:8vw; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin:0 auto; max-width:1440px; padding:140px 7vw; }.fit-columns { border-top:1px solid var(--line); }.fit-columns>div { border-bottom:1px solid var(--line); padding:35px 0 40px; }.fit-columns h3 { font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.12em; margin:0; text-transform:uppercase; }.fit-columns p { color:var(--ink-soft); font-size:16px; line-height:1.75; margin:18px 0 0; }
.practical-section { background:var(--paper-deep); display:grid; gap:8vw; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); padding:130px 8vw; }.practical-list { border-top:1px solid var(--line); list-style:none; margin:0; padding:0; }.practical-list li { border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:15px; line-height:1.7; padding:20px 0 20px 28px; position:relative; }.practical-list li::before { background:var(--red); content:""; height:5px; left:0; position:absolute; top:30px; width:5px; }.host-note { margin:0 auto; max-width:1320px; padding:140px 6vw; }.host-note-image { aspect-ratio:3/2; overflow:hidden; }.host-note-image img { height:100%; object-fit:contain; object-position:center; }.host-note-copy { margin:72px auto 0; max-width:720px; text-align:center; }.host-note-copy>p { color:var(--ink-soft); font-size:17px; line-height:1.75; margin:30px 0 34px; }.page-cta { background:var(--ink); color:var(--white); padding:130px 7vw 140px; text-align:center; }.page-cta>div { margin:0 auto; max-width:920px; }.page-cta>div>p { color:rgba(255,250,241,.7); margin-left:auto; margin-right:auto; }.cta-link { background:var(--red); display:inline-flex; font-size:12px; font-weight:800; justify-content:center; letter-spacing:.11em; margin-top:38px; min-height:58px; padding:20px 30px; text-transform:uppercase; }.site-footer { align-items:center; background:var(--ink); border-top:1px solid rgba(255,250,241,.12); color:rgba(255,250,241,.7); display:flex; gap:28px; justify-content:center; padding:34px 32px; text-align:center; }.site-footer strong { color:var(--white); font-family:Georgia,"Times New Roman",serif; font-size:20px; }.site-footer a { color:var(--white); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity 700ms ease,transform 700ms ease; }[data-reveal].is-visible { opacity:1; transform:none; }
html:lang(zh-CN) body,html:lang(zh-CN) button { font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif; }html:lang(zh-CN) h1,html:lang(zh-CN) h2,html:lang(zh-CN) h3 { font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong",serif; font-weight:500; }html:lang(zh-CN) .section-label,html:lang(zh-CN) .eyebrow,html:lang(zh-CN) .back-link,html:lang(zh-CN) .hero-actions a,html:lang(zh-CN) .host-note-copy a,html:lang(zh-CN) .cta-link,html:lang(zh-CN) .fit-columns h3 { letter-spacing:.08em; text-transform:none; }html:lang(zh-CN) .hero-content h1 { font-size:clamp(52px,5vw,76px); line-height:1.1; }html:lang(zh-CN) .hero-body,html:lang(zh-CN) .question-copy>p:last-child,html:lang(zh-CN) .selective-copy>p:last-child,html:lang(zh-CN) .route-copy p,html:lang(zh-CN) .fit-columns p,html:lang(zh-CN) .host-note-copy>p,html:lang(zh-CN) .page-cta>div>p { line-height:1.9; }
.footer-links { align-items:center; display:flex; gap:18px; }.site-footer .footer-links a { color:rgba(255,250,241,.78); font-size:10px; letter-spacing:.1em; }.terms-link { color:rgba(255,250,241,.74); display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; margin:24px 0 0 22px; text-transform:uppercase; }
@media (max-width:1380px) and (min-width:921px) { .question-section,.why-section { gap:34px; grid-template-columns:1fr; }.question-section { padding-bottom:120px; padding-top:120px; }.question-number { font-size:104px; line-height:.72; }.why-section { padding-bottom:110px; padding-top:86px; }.why-label>span { font-size:72px; }.question-copy,.why-copy { max-width:820px; }.question-copy h2 { font-size:clamp(48px,5.2vw,66px); }.why-copy h2 { font-size:clamp(42px,4.8vw,58px); } }
@media (max-width:920px) { .site-header { padding:18px 20px; }.brand small { display:none; }.header-actions { gap:14px; }.back-label-full { display:none; }.back-label-short { display:inline; }.brand-icon { height:32px; width:32px; }.brand strong { font-size:20px; }.experience-hero { height:auto; min-height:680px; }.hero-image { object-position:center; }.hero-shade { background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.1) 82%); }.hero-content { padding:150px 24px 70px; width:100%; }.hero-content h1 { font-size:clamp(52px,14vw,74px); }.hero-body { font-size:16px; }.scroll-cue { display:none; }.question-section,.why-section,.walking-section,.fit-section,.practical-section { grid-template-columns:1fr; }.question-section { gap:30px; padding:82px 24px 96px; }.question-number { display:block; font-size:76px; line-height:.72; opacity:.24; }.question-copy h2 { font-size:clamp(36px,10.5vw,46px); line-height:1.1; max-width:100%; overflow-wrap:break-word; }.why-section { gap:24px; padding:68px 24px 80px; }.why-copy h2 { font-size:clamp(34px,9.5vw,44px); line-height:1.1; max-width:100%; overflow-wrap:break-word; }.why-copy p { font-size:16px; line-height:1.75; margin-top:22px; }.why-copy p:last-child { font-size:24px; line-height:1.4; }.selective-section { padding:90px 24px 100px; }.selective-copy { text-align:left; }.selective-copy>p:last-child { margin-left:0; }.route-section { padding:100px 24px 10px; }.section-heading { margin-bottom:68px; text-align:left; }.section-heading>p:last-child { margin-left:0; }.route-row,.route-row.reverse { gap:38px; grid-template-columns:1fr; margin-bottom:90px; }.route-row.reverse .route-copy,.route-row.reverse .route-image { grid-column:auto; grid-row:auto; }.route-row.reverse .route-copy { order:1; }.route-row.reverse .route-image { order:2; }.route-image.square { max-width:600px; }.walking-copy { padding:96px 24px; }.walking-image { min-height:480px; }.fit-section,.practical-section { gap:65px; padding:100px 24px 110px; }.host-note { padding:100px 24px 110px; }.host-note-copy { margin-top:52px; }.page-cta { padding:100px 24px 110px; } }
@media (max-width:560px) { .experience-hero { min-height:760px; }.hero-content { padding-top:140px; }.hero-content h1 { font-size:51px; }html:lang(zh-CN) .hero-content h1 { font-size:46px; }.hero-meta span { font-size:11px; line-height:1.5; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.question-copy h2,.section-heading h2,.fit-heading h2,.practical-heading h2,.host-note-copy h2,.page-cta h2,.selective-copy h2,.walking-copy h2 { font-size:40px; }html:lang(zh-CN) .question-copy h2,html:lang(zh-CN) .section-heading h2,html:lang(zh-CN) .fit-heading h2,html:lang(zh-CN) .practical-heading h2,html:lang(zh-CN) .host-note-copy h2,html:lang(zh-CN) .page-cta h2,html:lang(zh-CN) .selective-copy h2,html:lang(zh-CN) .walking-copy h2 { font-size:36px; }.site-footer { align-items:flex-start; flex-direction:column; text-align:left; }.cta-link { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }.hero-image { transform:none; }[data-reveal] { opacity:1; transform:none; } }