/* The Shanghaier · immersive illustrated edition · 21 October 2026. */
.immersive-hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:max(600px,calc(100svh - 164px));overflow:hidden;background:var(--paper)}
.immersive-hero .hero-art,.arrival-playing .immersive-hero .hero-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;align-self:stretch;justify-self:stretch;isolation:isolate}
.immersive-hero .hero-art-image{width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;object-fit:cover;object-position:50% 55%;mix-blend-mode:normal}
.hero-wash{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 43%,rgba(245,240,231,.94),rgba(245,240,231,.73) 28%,rgba(245,240,231,.15) 64%,transparent 88%),linear-gradient(0deg,rgba(245,240,231,.28),transparent 24%)}
.immersive-hero .hero-content{position:relative;width:calc(100% - 80px);max-width:980px;padding:58px 0 76px;text-align:center}
.immersive-hero .hero-eyebrow{max-width:none;margin:0 auto 22px;font-size:10px;letter-spacing:.2em;color:var(--ink)}
.immersive-hero .hero-title{max-width:950px;margin:0 auto 24px;font-size:clamp(76px,6.7vw,104px);line-height:.97;letter-spacing:-.04em}
.immersive-hero .hero-copy{max-width:560px;margin:0 auto;font-size:18px;line-height:1.65;color:var(--ink)}
.immersive-hero .hero-actions{justify-content:center;margin:26px 0 0;gap:14px}
.immersive-hero .hero-meta{justify-content:center;max-width:none;margin:27px auto 0;font-size:10px;color:var(--ink);gap:6px 20px}
.immersive-hero .hero-caption{position:absolute;right:22px;bottom:17px;left:auto;z-index:3;display:block;width:auto;padding:0;margin:0;border:0;font-size:8px;color:var(--ink)}
.hero-scroll{position:absolute;bottom:18px;left:50%;z-index:3;transform:translateX(-50%);font:400 9px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:15px}
.hero-scroll span{font-size:18px;color:var(--red)}
.immersive-hero .arrival-skip{left:22px;right:auto;bottom:17px;z-index:4}
.hero-wash,.scene-wash{pointer-events:none}
.immersive-walks{padding:0}
.walks-intro{max-width:940px;text-align:center;padding-block:90px 80px}
.walks-intro .section-heading{margin:0 auto;max-width:780px}
.walks-intro .section-heading>p{margin-inline:auto}
.tour-scene,.illustrated-intro{position:relative;isolation:isolate;overflow:hidden;background:var(--wash)}
.tour-scene{min-height:720px;border-top:10px solid var(--paper);display:grid;align-items:end}
.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;z-index:0}
.tour-scene-food .scene-image{object-position:50% 54%}
.tour-scene-history .scene-image{object-position:50% 40%}
.tour-scene-architecture .scene-image{object-position:50% 45%}
.scene-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(245,240,231,.98),rgba(245,240,231,.91) 18%,rgba(245,240,231,.38) 52%,rgba(245,240,231,.02) 85%)}
.tour-scene-content{position:relative;z-index:2;max-width:990px;padding:330px 0 68px;text-align:center}
.tour-scene-content .eyebrow{color:var(--red);font-size:10px;margin-bottom:18px}
.tour-scene-content h3{font-size:clamp(52px,5.3vw,78px);line-height:1.03;margin:0 auto 24px;max-width:930px}
.scene-description{font-size:18px;line-height:1.6;max-width:620px;margin:0 auto 23px}
.scene-rate{font:400 15px/1.6 var(--sans);margin:0 auto 25px}
.scene-rate span{font-weight:300}
.art-label{position:absolute;right:20px;bottom:15px;z-index:3;font:300 8px/1.5 var(--sans);letter-spacing:.035em;color:var(--grey)}
.host-section{position:relative;isolation:isolate;overflow:hidden;padding-block:120px}
.host-copy{max-width:840px;text-align:center}
.host-copy h2{max-width:750px;margin-inline:auto;font-size:clamp(43px,4.5vw,64px)}
.host-copy>p:not(.eyebrow){font:400 18px/1.9 var(--text);max-width:740px;margin-inline:auto}
.host-copy blockquote{max-width:750px;margin:45px auto;border:0;padding:0;font-size:36px;line-height:1.3}
.host-copy .credentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;text-align:left;margin:45px 0 35px;padding-top:28px;border-top:1px solid var(--line)}
.host-copy .credentials dt{font-size:12px}
.host-copy .credentials dd{font-size:11px}
.host-geometry{position:absolute;left:-115px;bottom:-35px;z-index:-1;opacity:.1}
.host-geometry .brand-mark{width:440px;height:520px}
.illustrated-intro{min-height:640px;display:grid;align-items:end;text-align:center}
.illustrated-intro-content{position:relative;z-index:2;padding:260px 0 65px;max-width:1100px}
.illustrated-intro-content .eyebrow{color:var(--red)}
.illustrated-intro h1{max-width:1000px;margin:0 auto 26px;font-size:clamp(52px,5vw,76px)}
.illustrated-intro .lead{margin:0 auto;max-width:820px;font-size:19px;line-height:1.7}
.page-tour .section-tight{padding-top:65px}
.tour-price{font-size:54px!important;letter-spacing:-.03em}
.tour-price>span{display:block;font:400 10px/1.6 var(--sans);letter-spacing:.1em;margin-top:10px;text-transform:uppercase}
.quote-block .eyebrow{margin-bottom:14px}
.enquiry-pricing{border-block:1px solid var(--line);padding:23px 0}
.enquiry-pricing .eyebrow{margin-bottom:8px;font-size:9px}
.enquiry-pricing>p:last-child{font-size:16px;color:var(--ink);max-width:580px}
.editorial-illustration img,.credit-illustration img{width:100%;height:auto}
.editorial-illustration figcaption{font-size:10px;line-height:1.6;color:var(--grey);margin-top:12px}
.art-credit-entry{padding-top:35px;border-top:1px solid var(--line)}
.art-credit-entry .credit-illustration{margin-bottom:28px}
.art-credit-entry>p{font-size:15px}
.illustrated-note{display:flex;align-items:end;position:relative;isolation:isolate;min-height:440px;overflow:hidden;background:var(--paper)}
.illustrated-note .note-image{position:absolute;inset:0;z-index:0}
.illustrated-note .note-image img,.notes-grid-four .illustrated-note .note-image img{width:100%;height:100%;min-height:0;object-fit:cover;transition:transform .6s ease}
.illustrated-note:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(245,240,231,.98),rgba(245,240,231,.9) 25%,rgba(245,240,231,.1) 76%)}
.illustrated-note .note-body{padding:220px 28px 28px;position:relative;z-index:2;width:100%}
.illustrated-note .note-body h3{font-size:31px;margin-bottom:22px}
.illustrated-note .note-body .eyebrow{font-size:9px;margin-bottom:16px}
.illustrated-note:hover .note-image img{transform:scale(1.025)}
.notes-grid-four .illustrated-note{min-height:480px}
.motion-preview-mode .immersive-hero{min-height:650px}
@media(min-width:1600px){.immersive-hero{min-height:760px}.immersive-hero .hero-content{padding-block:100px 120px}.tour-scene{min-height:830px}.tour-scene-content{padding-top:440px}}
@media(max-width:800px){
 .immersive-hero{min-height:max(650px,calc(100svh - 94px))}
 .immersive-hero .hero-content{width:calc(100% - 48px);max-width:650px;padding:70px 0 85px}
 .immersive-hero .hero-title{font-size:clamp(64px,10vw,86px);line-height:1.01;max-width:650px}
 .immersive-hero .hero-copy{font-size:17px;max-width:500px}
 .immersive-hero .hero-art-image{object-position:44% 50%}
 .immersive-hero .hero-caption{right:16px;font-size:7px;max-width:130px;text-align:right}
 .walks-intro{padding-block:70px 60px}
 .tour-scene{min-height:680px}.tour-scene-content{padding:330px 0 58px}
 .tour-scene-content h3{font-size:58px}.scene-description{font-size:17px;max-width:580px}
 .scene-rate span{display:block;margin-top:5px}
 .host-section{padding-block:85px}.host-copy blockquote{font-size:31px}
 .illustrated-intro{min-height:670px}.illustrated-intro-content{padding:300px 0 60px}
 .illustrated-intro h1{font-size:55px}.illustrated-intro .lead{font-size:18px}
 .illustrated-note{min-height:430px;display:flex}.illustrated-note .note-body{padding-top:230px}
 .host-copy .credentials{grid-template-columns:1fr;text-align:center;gap:20px}
 .page-tour .section-tight{padding-top:45px}
}
@media(max-width:520px){
 .immersive-hero{min-height:640px}
 .immersive-hero .hero-content{width:calc(100% - 42px);padding:62px 0 88px}
 .immersive-hero .hero-title{font-size:64px;line-height:1.02;letter-spacing:-.04em;margin-bottom:24px}
 .immersive-hero .hero-eyebrow{font-size:8px;letter-spacing:.13em;max-width:290px;margin-bottom:24px}
 .immersive-hero .hero-copy{font-size:16px;max-width:320px;line-height:1.65}
 .immersive-hero .hero-actions{gap:10px;margin-top:26px}.immersive-hero .hero-actions .button{padding:11px 18px;font-size:11px}
 .immersive-hero .hero-meta{font-size:9px;max-width:300px;gap:4px 14px;margin-top:26px}
 .hero-wash{background:radial-gradient(ellipse at 50% 43%,rgba(245,240,231,.95),rgba(245,240,231,.82) 35%,rgba(245,240,231,.2) 78%,transparent)}
 .immersive-hero .hero-caption{bottom:10px;max-width:100px;font-size:6px}
 .hero-scroll{font-size:8px;bottom:16px;gap:10px}
 .walks-intro{padding-block:65px 55px}.walks-intro .section-heading h2{font-size:40px}
 .tour-scene{min-height:650px}.tour-scene-content{padding:305px 0 55px}
 .tour-scene-content .eyebrow{font-size:9px;margin-bottom:15px}.tour-scene-content h3{font-size:48px;margin-bottom:20px}
 .scene-description{font-size:16px;line-height:1.7}.scene-rate{font-size:14px;margin-bottom:25px}.scene-rate span{font-size:11px}
 .art-label{font-size:7px;right:14px;bottom:10px}
 .host-copy h2{font-size:42px}.host-copy>p:not(.eyebrow){font-size:16px}.host-copy blockquote{font-size:29px;margin-block:32px}
 .host-copy .credentials{margin-block:32px 27px}.host-geometry{left:-150px;opacity:.07}
 .illustrated-intro{min-height:660px}.illustrated-intro-content{padding:275px 0 55px}
 .illustrated-intro h1{font-size:46px;line-height:1.08;letter-spacing:-.035em}.illustrated-intro .lead{font-size:16px;line-height:1.7}
 .illustrated-intro-content .eyebrow{font-size:9px;letter-spacing:.11em}
 .page-tour .section-tight{padding-top:35px}
 .illustrated-note,.notes-grid-four .illustrated-note{min-height:450px}.illustrated-note .note-body{padding:240px 25px 28px}.illustrated-note .note-body h3{font-size:32px}
 .motion-preview-mode .immersive-hero{min-height:640px}
}
@media(prefers-reduced-motion:reduce){.illustrated-note .note-image img{transition:none}.illustrated-note:hover .note-image img{transform:none}}