/* Layout follows the 1920px Family Collection board. */
.family-page{--family-paper:#f0f0f0;--family-title:clamp(30px,3.125vw,80px);--family-body:clamp(14px,1.041667vw,27px);--family-script:clamp(26px,2.083333vw,54px);letter-spacing:0}
.family-main{overflow:clip}
.family-main h1,.family-main h2,.family-main h3{font-family:var(--serif);font-weight:400;text-transform:uppercase}
.family-main h2{font-size:var(--family-title);line-height:1.2}
.family-script{font:400 var(--family-script)/1.15 var(--script);font-synthesis:none;text-transform:none}
.family-hero{position:relative;height:56.25vw;min-height:560px;isolation:isolate;overflow:hidden}
.family-hero .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.family-hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.54);z-index:-1}
.hero-copy{position:absolute;left:8%;right:8%;top:30.2%;width:auto;text-align:center}
.family-hero h1{font-size:clamp(38px,4.6875vw,120px);line-height:1.25;text-transform:uppercase}
.family-hero .journey-title-word{white-space:nowrap}
.family-hero .journey-title-rest{font-size:.666667em}
.hero-meta{margin-top:.3vw;font-size:clamp(19px,1.5625vw,40px);line-height:1.5;text-transform:uppercase}
.hero-intro{font:300 var(--family-body)/2 var(--sans);margin-top:.625vw}
.family-anchors{position:absolute;bottom:3.541667vw;left:0;right:0;display:flex;justify-content:center;gap:1.041667vw}
.family-anchors a{font:400 clamp(14px,1.041667vw,27px)/1.5 var(--serif);text-transform:uppercase;padding:.416667vw 1.041667vw;background:rgba(0,0,0,.28);min-width:8.333333vw;text-align:center;transition:background .2s}
.family-anchors a:hover,.family-anchors a:focus-visible{background:var(--navy)}
.family-intro{position:relative;height:56.25vw;background:var(--family-paper);color:var(--navy);isolation:isolate;overflow:clip}
.intro-art{position:absolute;overflow:hidden;will-change:transform,opacity}
.intro-art img{width:100%;height:100%;object-fit:cover}
.intro-art-a{left:0;top:20.3125vw;width:13.333333%;height:28.125vw}
.intro-art-b{left:13.802083%;top:8.333333vw;width:13.802083%;height:36.875vw}
.intro-sketch{position:absolute;left:24.583333%;top:28.90625vw;width:11.145833%;height:auto;pointer-events:none}
#city-life .intro-sketch{left:25.208333%;top:31.25vw;width:11.25%}
#heritage .intro-sketch{left:18.125%;top:32.291667vw;width:22.604167%}
/* Heritage reference: show the temple and bridge, with the printed caption outside the crop. */
#heritage .intro-art-a img{height:137.5%;object-position:26% 0}
#shopping .intro-sketch{left:25%;top:29.947917vw;width:13.541667%}
.intro-copy{position:absolute;left:41.041667%;top:21.510417vw;width:49.479167%;z-index:1}
#city-life .intro-copy{left:42.395833%;top:20.833333vw;width:47.916667%}
#heritage .intro-copy{left:46.354167%;top:22.916667vw;width:44.270833%}
#shopping .intro-copy{left:45.520833%;top:21.510417vw;width:44.791667%}
.section-number{position:absolute;top:-9.166667vw;left:4.6875vw;font:400 clamp(140px,15.625vw,400px)/1 var(--script);font-synthesis:none;color:rgba(185,155,80,.2);z-index:-1;pointer-events:none}
.intro-copy .family-script{margin-top:.833333vw;white-space:nowrap}
.intro-body{margin-top:2.395833vw;font:300 var(--family-body)/2 var(--sans);color:#292929}
#heritage .intro-body,#shopping .intro-body{margin-top:5.520833vw}
.family-flourish{display:block;position:relative;width:16.354167vw;height:auto;margin:-.25vw 0 0 30%;overflow:visible}
@media(min-width:901px){
 #play .family-flourish{margin-left:5.052083vw;top:-.729167vw}
 #city-life .family-flourish{margin-left:10.208333vw;top:-.78125vw}
 #heritage .family-flourish{margin-left:4.739583vw;top:-.729167vw}
 #shopping .family-flourish{margin-left:12.96875vw;top:-.625vw}
}
.family-flourish path{fill:none;stroke:#fff;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--flourish-draw,0)}
.family-feature{height:56.25vw;position:relative;background:#101414;overflow:hidden}
.family-feature>img{width:100%;height:100%;object-fit:cover}
.family-feature .slide-copy{padding:2.8125vw 1.5625vw}
.family-slider{position:relative;height:56.25vw;min-height:540px;background:#0a1420}
.slider-sticky{height:100%;position:relative;overflow:hidden}
.slider-track{height:100%;display:flex;transform:translate3d(var(--family-slider-x,0%),0,0);transition:transform 1.05s cubic-bezier(.22,1,.36,1);will-change:transform}
.family-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:#07162c}
.family-slide>img,.family-slide>video{width:100%;height:100%;object-fit:cover}
.slide-copy{position:absolute;left:0;width:100%;bottom:0;padding:2.4vw 18% 3.8vw;background:rgba(0,0,0,.38);text-align:center;color:#f5f5f5}
.slide-copy h2{font-size:clamp(27px,2.083333vw,54px);line-height:1.2}
.slide-copy .family-script{color:var(--gold);margin-top:0}
.slide-description{margin-top:1.770833vw;font:300 var(--family-body)/2 var(--sans)}
.slide-copy .family-script+.slide-description{margin-top:1.041667vw}
.family-itinerary{position:relative;display:grid;grid-template-columns:31.875% 68.125%;padding-top:12.395833vw;padding-bottom:0;background:var(--navy);isolation:isolate}
.family-itinerary::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(13.333333vw - 1px),rgba(255,255,255,.025) calc(13.333333vw - 1px),rgba(255,255,255,.025) 13.333333vw);z-index:-1}
.itinerary-aside{min-width:0;position:relative}
.itinerary-map{position:sticky;top:5.208333vw;padding:0 2.083333vw 0 1.302083vw}
.itinerary-map h2{font-size:var(--family-title);line-height:1.35;white-space:nowrap;max-width:100%}
.city-route{position:relative;width:16.197917vw;height:30.729167vw;margin:4.583333vw 0 calc((var(--route-fit,1) - 1)*30.729167vw) 6.927083vw;transform:scale(var(--route-fit,1));transform-origin:top center}
.city-route>svg{width:100%;height:100%;overflow:visible}
#route-drawing rect{transform:scaleY(var(--route-draw,1));transform-origin:top}
.route-city{position:absolute;color:var(--gold);font:400 clamp(22px,2.083333vw,53px)/1 var(--script);font-synthesis:none;white-space:nowrap}
.route-city>img{position:absolute;width:2.5vw;height:2.5vw;max-width:none;top:-.25vw;filter:brightness(1.1)}
.city-shanghai{right:.5%;top:-1.5%}
.city-shanghai>img{right:-1.25vw}
.city-shanghai>span{display:block;margin-right:2.6vw}
.city-hangzhou{left:-1%;top:42%}
.city-hangzhou>img{left:-1.25vw}
.city-hangzhou>span{display:block;margin-left:3vw}
.city-beijing{right:4.5%;top:85%}
.city-beijing>img{right:-1.25vw}
.city-beijing>span{display:block;margin-right:2.6vw}
.itinerary-list{min-width:0}
.itinerary-pair{display:grid;grid-template-columns:51.55% 48.45%;min-height:49.739583vw;border-bottom:5px solid var(--navy)}
.pair-days{display:grid;grid-template-rows:1fr 1fr;background:#001120}
.itinerary-day{padding:3.333333vw 1.875vw 2.083333vw;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;border-bottom:4px solid var(--navy);overflow:hidden}
.itinerary-day:last-child{border-bottom:0}
.day-number{display:block;font:400 clamp(38px,3.125vw,80px)/1.3 var(--serif);margin-bottom:5.46875vw}
.itinerary-day h3{font-size:clamp(20px,1.5625vw,40px);line-height:1.35;margin-bottom:1.041667vw}
.itinerary-day p{font:300 var(--family-body)/1.5 var(--sans)}
.pair-photo{min-height:100%;overflow:hidden;will-change:opacity,transform}
.pair-photo img{width:100%;height:100%;object-fit:cover}
.itinerary-pair:nth-child(3) .day-number,.itinerary-pair:nth-child(5) .day-number{margin-bottom:2.916667vw}
.family-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.family-line>span{display:block}
.family-motion-ready [data-family-reveal],.family-motion-ready [data-day-reveal],.family-motion-ready [data-pair-photo]{opacity:0}
.family-motion-ready .family-line>span{opacity:0;transform:translate3d(0,110%,0)}
@media(min-width:901px) and (max-width:1200px){
 .family-page{--family-title:32px;--family-body:14px;--family-script:26px}
 .family-intro{height:65vw}
 .intro-copy{width:54%;left:39%}
 #city-life .intro-copy,#heritage .intro-copy,#shopping .intro-copy{left:41%;width:53%}
 .intro-copy .family-script{white-space:normal}
 .day-number{margin-bottom:3vw}
 .itinerary-pair{min-height:58vw}
 .itinerary-day h3{font-size:19px}
 .itinerary-map h2{font-size:29px}
 .slide-copy{width:100%;left:0}
}
@media(max-width:900px){
 .family-page{--family-title:36px;--family-body:17px;--family-script:30px}
 .family-hero{height:100svh;min-height:650px}
 .hero-copy{left:7%;right:7%;top:27%}
 .family-hero h1{font-size:38px}
 .hero-meta{font-size:17px;margin-top:30px}
 .hero-intro{font-size:16px;line-height:1.7;margin-top:20px}
 .hero-intro br{display:none}
 .family-anchors{bottom:28px;left:6%;right:6%;flex-wrap:wrap;gap:8px}
 .family-anchors a{min-width:27%;font-size:13px;padding:8px 10px}
 .family-intro{height:auto;min-height:760px;padding:400px 7% 80px;overflow:hidden}
 .intro-art-a{top:90px;left:0;width:22%;height:270px}
 .intro-art-b{top:50px;left:23.5%;width:27%;height:285px}
 .intro-sketch,#city-life .intro-sketch,#heritage .intro-sketch,#shopping .intro-sketch{top:200px;left:46%;width:28%;max-height:185px;object-fit:contain}
 .intro-copy,#city-life .intro-copy,#heritage .intro-copy,#shopping .intro-copy{position:relative;top:auto;left:auto;width:100%}
 .section-number{font-size:170px;top:-62px;left:34%}
 .intro-copy .family-script{white-space:normal;margin-top:10px}
 .family-flourish{margin:0 0 0 30%;width:164px;max-width:65%;min-height:0}
 .intro-body,#heritage .intro-body,#shopping .intro-body{margin-top:32px;line-height:1.85}
 .family-slider{height:100svh;min-height:720px}
 .slide-copy,.family-feature .slide-copy{left:0;width:100%;bottom:0;padding:26px 9% 86px}
 .slide-copy h2{font-size:28px;line-height:1.3}
 .slide-copy .family-script{font-size:29px;margin-top:8px}
 .slide-description{font-size:16px;line-height:1.7;margin-top:24px}
 .slide-description br{display:none}
 .slide-copy .family-script+.slide-description{margin-top:20px}
 .family-feature{height:100svh;min-height:720px}
 .family-itinerary{padding:70px 0 0;grid-template-columns:100%}
 .itinerary-aside{padding:0 7%}
 .itinerary-map{position:relative;top:auto;padding:0}
 .itinerary-map h2{font-size:34px;white-space:normal}
 .city-route{width:155px;height:290px;margin:58px auto 40px;transform:none}
 .route-city{font-size:29px}
 .route-city>img{width:30px;height:30px;top:-1px}
 .city-shanghai>img,.city-beijing>img{right:-15px}
 .city-shanghai>span,.city-beijing>span{margin-right:35px}
 .city-hangzhou>img{left:-15px}
 .city-hangzhou>span{margin-left:35px}
 .itinerary-pair{grid-template-columns:1fr;min-height:0;margin-top:20px;border:0}
 .pair-photo{grid-row:1;height:80vw;min-height:0}
 .pair-days{grid-row:2}
 .itinerary-day{padding:32px 7% 38px}
 .day-number,.itinerary-pair:nth-child(3) .day-number,.itinerary-pair:nth-child(5) .day-number{font-size:44px;margin-bottom:25px}
 .itinerary-day h3{font-size:24px;margin-bottom:18px}
 .itinerary-day p{font-size:17px;line-height:1.75}
}
@media(prefers-reduced-motion:reduce){
 .slider-track{transition:none;will-change:auto}
 .carousel-controls button{transition:none}
 [data-family-reveal],[data-day-reveal],[data-pair-photo]{will-change:auto}
}

.intro-copy .intro-body-follow{margin-top:1.666667vw}@media(max-width:900px){.intro-copy .intro-body-follow{margin-top:26px}}

/* Automatic galleries remain in ordinary document flow. */
.carousel-controls{position:absolute;z-index:3;bottom:1.35vw;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:5px 13px;background:rgba(0,0,0,.2);border-radius:24px}
.carousel-controls button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;color:white;transition:opacity .2s;opacity:.65}
.carousel-controls button:hover,.carousel-controls button:focus-visible{opacity:1}
.carousel-controls button:focus-visible{outline:1px solid white;outline-offset:3px}
.carousel-dot::before{content:'';width:6px;height:6px;border-radius:50%;border:1px solid white;background:transparent}
.carousel-dot[aria-current="true"]{opacity:1}
.carousel-dot[aria-current="true"]::before{background:white}
.carousel-toggle{font-family:Arial,sans-serif!important;font-size:15px!important;letter-spacing:-2px}
@media(max-width:900px){.carousel-controls{bottom:13px;gap:10px}.itinerary-map h2{white-space:nowrap}}

.itinerary-pair:last-child{border-bottom:0}
.carousel-controls button[hidden]{display:none}
@media(max-width:900px){.itinerary-pair:last-child .pair-days{grid-row:1}.itinerary-pair:last-child .pair-photo{grid-row:2}}
.carousel-arrows{position:absolute;z-index:4;inset:0;pointer-events:none}
.carousel-arrow{position:absolute;top:50%;width:clamp(68px,5.208333vw,100px);height:clamp(68px,5.208333vw,100px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.16);color:#fff;font:300 clamp(38px,2.5vw,48px)/1 Arial,sans-serif;cursor:pointer;pointer-events:auto;transform:translateY(-50%);transition:background .25s,border-color .25s}
.carousel-arrow:hover,.carousel-arrow:focus-visible{background:rgba(2,29,70,.72);border-color:#fff}
.carousel-arrow:focus-visible{outline:2px solid #fff;outline-offset:5px}
.carousel-arrow-previous{left:3.5%}.carousel-arrow-next{right:3.5%}
@media(max-width:900px){.carousel-arrow{width:56px;height:56px;font-size:32px}.carousel-arrow-previous{left:2%}.carousel-arrow-next{right:2%}}
@media(prefers-reduced-motion:reduce){.carousel-arrow{transition:none}}