/* ===== product-core.css v0 (drafts, 2026-10-20) — private product pages, shared part. Source order kept as on the pages: main style → product-ed(in product files) → zel-editorial(minus h2 size) → day-by-day → patches. Rule: no h1/h2 font-size at ≥821px (owned by zel-unify). ===== */ /* --- [A] main style (block b139738d, 8 pages; 00762d1c = same + pay rule, pay rule lives in product files FA/OOAL) --- */ :root{ --fxg:#78C6D5; /* ZeL Blue, light -- accent on the navy ground */ --fxgt:#2B7388; /* ZeL Blue, AA-safe -- accent text on paper */ --fxgold:#836A30; /* Deep Gold, AA-safe -- selected marker only */ --fxcard:#FBF8F2; --fxln:rgba(12,16,24,.16); --fxdk:#0C1018; /* the original ink ground -- NOT recoloured */ --fxdk-ln:rgba(244,239,230,.20); --fxdk-tx:rgba(244,239,230,.86); --fxdk-dim:rgba(244,239,230,.68); } .fxw{width:min(100%,1320px);margin:0 auto;padding-left:clamp(20px,4.4vw,56px);padding-right:clamp(20px,4.4vw,56px)} .fx-s{padding:clamp(52px,6.4vw,86px) 0} .fx-s.dk{background:var(--fxdk);color:var(--fxdk-tx)} .fx-s.dk h2,.fx-s.dk h3{color:#fff} .fx-cream{background:var(--cream)} .fx-s + .fx-s.fx-cream{padding-top:0} /* ─────────────────────────── nav ─────────────────────────── */ .fx-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center; gap:clamp(12px,2vw,28px);padding:16px clamp(20px,4.4vw,56px); transition:background .4s var(--e),padding .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e); border-bottom:1px solid transparent} .fx-nav.solid{background:rgba(244,239,230,.96);backdrop-filter:blur(10px); border-color:var(--fxln);padding-top:11px;padding-bottom:11px} .fx-mark{display:flex;align-items:center;gap:14px;flex-shrink:0} .fx-mark b{font-family:var(--d);font-weight:400;font-size:clamp(18px,2.1vw,23px);letter-spacing:.01em; color:#fff;line-height:1;transition:color .4s var(--e);white-space:nowrap} .fx-mark b i{font-style:normal;font-weight:500} .fx-mark span{display:none;padding-left:14px;border-left:1px solid rgba(255,255,255,.34); font-family:var(--s);font-weight:400;font-size:14px;letter-spacing:.2em;text-transform:uppercase; line-height:1.5;color:rgba(255,255,255,.72);transition:color .4s var(--e),border-color .4s var(--e)} .fx-nav.solid .fx-mark b{color:var(--ink)} .fx-nav.solid .fx-mark span{color:var(--faint);border-left-color:var(--fxln)} .fx-nav-l{display:none;margin:0 auto;gap:clamp(14px,1.9vw,28px)} .fx-nav-l a{font-family:var(--s);font-weight:400;font-size:14px;letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.88);padding:4px 0;border-bottom:1px solid transparent;transition:.3s var(--e);white-space:nowrap} .fx-nav-l a:hover{border-bottom-color:var(--fxg)} .fx-nav.solid .fx-nav-l a{color:var(--dim)} .fx-nav.solid .fx-nav-l a:hover{color:var(--ink);border-bottom-color:var(--fxgt)} .fx-lang{display:none;margin-left:auto;font-family:var(--s);font-size:14px;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap} .fx-lang a{padding:6px 4px} .fx-lang a[aria-current]{color:#fff;border-bottom:1px solid var(--fxg)} .fx-lang s{text-decoration:none;opacity:.45;padding:0 4px} .fx-nav.solid .fx-lang{color:var(--faint)} .fx-nav.solid .fx-lang a[aria-current]{color:var(--ink);border-bottom-color:var(--fxgt)} .fx-nav .fx-btn{display:none;flex-shrink:0} .fx-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto; width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;flex-shrink:0} .fx-burger span{display:block;height:1.5px;width:24px;margin:0 auto;background:#fff;transition:.3s var(--e)} .fx-nav.solid .fx-burger span{background:var(--ink)} .fx-drawer{position:fixed;inset:0;z-index:59;background:rgba(12,16,24,.97);display:flex; align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s var(--e)} .fx-drawer.open{opacity:1;visibility:visible} .fx-drawer nav{display:flex;flex-direction:column;gap:2px;text-align:center;padding:24px} .fx-drawer a{font-family:var(--d);font-size:20px;color:rgba(244,239,230,.88);padding:11px 20px} .fx-drawer .sm{font-family:var(--s);font-size:14px;letter-spacing:.14em;text-transform:uppercase; color:rgba(244,239,230,.58);padding:9px 20px} .fx-drawer hr{width:56px;border:0;border-top:1px solid rgba(244,239,230,.22);margin:16px auto} @media(min-width:880px){ .fx-mark span{display:block} .fx-nav-l{display:flex} .fx-lang{display:flex;align-items:center} .fx-nav .fx-btn{display:inline-flex;margin-left:clamp(12px,1.6vw,22px)} .fx-burger{display:none} } /* ─────────────────────────── buttons ─────────────────────────── */ .fx-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--s);font-weight:500; font-size:14px;letter-spacing:.16em;text-transform:uppercase;padding:14px 24px;border-radius:2px; border:1px solid transparent;transition:.32s var(--e);line-height:1.2} .fx-btn.gold{background:var(--fxg);color:#0A1A22;border-color:var(--fxg)} .fx-btn.gold:hover{background:#9BD9E5;border-color:#9BD9E5} .fx-btn.ghost{border-color:rgba(255,255,255,.55);color:#fff} .fx-btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .fx-btn.ink{border-color:var(--ink);color:var(--ink)} .fx-btn.ink:hover{background:var(--ink);color:var(--cream)} .fx-btn i{font-size:1.05em;line-height:1} .fx-nav i,.fx-btn i,.fx-lnk i,.fx-chc-go i,.fx-day-st i,.fx-lists li i, .fx-q>summary i,.fx-inv-big i,.fx-begin-mk i,.fx-mark b i,.fx-root i{font-style:normal} .fx-lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--s);font-weight:500;font-size:14px; letter-spacing:.15em;text-transform:uppercase;color:var(--blue-txt);border-bottom:1px solid currentColor; padding-bottom:3px} .fx-lnk.on-dk{color:#fff} /* ─────────────────────────── cover ─────────────────────────── The original centred cover, built on site.css .pg-hero. Only the three pieces site.css does not already carry live here. */ .fx-cover-line{font-family:var(--d);font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.75; color:rgba(244,239,230,.86);margin:clamp(14px,2vw,18px) auto 0;max-width:46ch} .fx-cover-pr{display:inline-flex;align-items:baseline;flex-wrap:wrap;justify-content:center; gap:6px 11px;margin-top:clamp(16px,2.2vw,22px);padding:9px 17px; border:1px solid rgba(244,239,230,.42);border-radius:2px; font-family:var(--s);font-size:15px;letter-spacing:.09em;text-transform:uppercase; color:rgba(244,239,230,.92)} .fx-cover-pr b{font-family:var(--d);font-weight:400;font-size:clamp(19px,1.9vw,22px);letter-spacing:0; text-transform:none;color:#fff} .fx-cover-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px; margin-top:clamp(18px,2.4vw,26px)} .btn.fx-cover-ghost{border:1px solid rgba(244,239,230,.5);color:rgba(244,239,230,.94); background:transparent;transition:border-color .35s var(--e),background .35s var(--e)} .btn.fx-cover-ghost:hover{border-color:rgba(244,239,230,.9);background:rgba(244,239,230,.10)} .fx-cover .btn{font-size:14px;letter-spacing:.14em;padding:16px 28px} @media(max-width:700px){ .fx-cover .btn{padding:15px 20px} .fx-cover-pr{font-size:14px;gap:5px 9px;padding:9px 14px} } /* ─────────────────────────── section head ─────────────────────────── */ .fx-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,2.2vw,34px); padding-bottom:clamp(16px,2vw,22px);border-bottom:1px solid var(--fxln)} .fx-s.dk .fx-h{border-bottom-color:var(--fxdk-ln)} .fx-h-n{display:flex;align-items:center;gap:12px;font-family:var(--s);font-size:14px;letter-spacing:.12em; color:var(--faint);padding-bottom:6px} .fx-s.dk .fx-h-n{color:var(--fxdk-dim)} .fx-h-n:after{content:'';width:clamp(20px,2.4vw,34px);height:1px;background:var(--fxgt);opacity:.75} .fx-s.dk .fx-h-n:after{background:var(--fxg)} .fx-h h2{font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.055em; line-height:1.08} /* v1: font-size clamp(25px,3.5vw,42px) removed — dead at every width (L2 at >=821px; phone rule below) */ .fx-h-l{padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--fxln); font-family:var(--s);font-weight:400;font-size:14px;letter-spacing:.15em;text-transform:uppercase; line-height:1.85;color:var(--faint);padding-bottom:5px} .fx-s.dk .fx-h-l{border-left-color:var(--fxdk-ln);color:var(--fxdk-dim)} .fx-h-r{margin:0;padding-bottom:0;max-width:78ch;font-size:15px;line-height:1.8;color:var(--dim)} .fx-h-b{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:14px clamp(24px,3.4vw,52px);margin-top:clamp(14px,1.8vw,22px)} .fx-h-go{flex:0 0 auto;padding-bottom:2px} html[lang="zh-Hans"] .fx-h-r{max-width:44em} /* every dark context shares one head treatment */ .fx-s.dk .fx-h,.fx-band .fx-h,.fx-jband .fx-h,.fx-aurora .fx-h,.fx-begin .fx-h{border-bottom-color:rgba(244,239,230,.22)} .fx-s.dk .fx-h-n,.fx-band .fx-h-n,.fx-jband .fx-h-n,.fx-aurora .fx-h-n,.fx-begin .fx-h-n{color:rgba(244,239,230,.74)} .fx-s.dk .fx-h-n:after,.fx-band .fx-h-n:after,.fx-jband .fx-h-n:after,.fx-aurora .fx-h-n:after, .fx-begin .fx-h-n:after{background:var(--fxg)} .fx-s.dk .fx-h h2,.fx-band .fx-h h2,.fx-jband .fx-h h2,.fx-aurora .fx-h h2,.fx-begin .fx-h h2{color:#fff} .fx-s.dk .fx-h-l,.fx-band .fx-h-l,.fx-jband .fx-h-l,.fx-aurora .fx-h-l,.fx-begin .fx-h-l{ border-left-color:rgba(244,239,230,.22);color:rgba(244,239,230,.74)} .fx-s.dk .fx-h-r,.fx-band .fx-h-r,.fx-jband .fx-h-r,.fx-aurora .fx-h-r,.fx-begin .fx-h-r{color:rgba(244,239,230,.80)} @media(max-width:860px){ .fx-h{align-items:flex-start;gap:12px} .fx-h h2{flex-basis:100%} .fx-h-l{padding-left:0;border-left:0;flex-basis:100%} .fx-h-r{margin-left:0;flex-basis:100%;max-width:60ch} } /* ─── 01 · at a glance ─── */ .fx-anchors{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px); margin-top:clamp(26px,3.4vw,42px)} .fx-a-img{overflow:hidden;background:#E4DCCE} .fx-a-img img{width:100%;aspect-ratio:4/3;object-fit:cover} .fx-anchors>div>b{display:block;margin-top:16px;font-family:var(--s);font-weight:500;font-size:14px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.5} .fx-a-n{font-family:var(--d);font-size:15px;color:var(--fxgt);letter-spacing:.06em} .fx-a-w{margin-top:6px;font-family:var(--d);font-size:16px;line-height:1.55;color:var(--blue-txt)} .fx-anchors p{margin-top:8px;font-size:14.5px;line-height:1.75;color:var(--dim)} /* 2026-09-27 · the three facts lead section 01: read first, set large */ .fx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px); margin-top:clamp(22px,2.6vw,34px);padding:0 0 clamp(20px,2.4vw,30px);border-top:0;border-bottom:1px solid var(--fxln)} .fx-fact{display:flex;align-items:flex-start;gap:16px} .fx-fact+.fx-fact{padding-left:clamp(18px,2.4vw,32px);border-left:1px solid var(--fxln)} .fx-fact svg{flex-shrink:0;width:30px;height:30px;stroke:var(--blue-txt);fill:none;stroke-width:1.2;margin-top:2px} .fx-fact b{display:block;font-family:var(--d);font-weight:500;font-size:clamp(22px,2.3vw,30px);color:var(--ink);line-height:1.25} .fx-fact span{display:block;margin-top:6px;font-size:15px;line-height:1.7;color:var(--dim)} @media(max-width:1000px){.fx-anchors{grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,28px)}} @media(max-width:820px){ .fx-facts{grid-template-columns:1fr;gap:0;padding:4px 0} .fx-fact{padding:16px 0} .fx-fact+.fx-fact{padding-left:0;border-left:0;border-top:1px solid var(--fxln)} } @media(max-width:470px){.fx-anchors{grid-template-columns:1fr}.fx-pair{gap:12px}} /* ─── 02 · the big idea (photographic band) ─── */ .fx-band{position:relative;overflow:hidden;background:var(--fxdk);min-height:clamp(380px,46vw,560px); display:flex;align-items:center} .fx-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fx-band:after{content:'';position:absolute;inset:0; background:linear-gradient(100deg,rgba(9,13,21,.93) 0%,rgba(9,13,21,.80) 44%,rgba(9,13,21,.34) 78%,rgba(9,13,21,.46) 100%)} .fx-band .fxw{position:relative;z-index:2;padding-top:clamp(52px,6vw,80px);padding-bottom:clamp(52px,6vw,80px)} .fx-idea-h{margin-top:clamp(26px,3.4vw,40px);font-family:var(--d);font-weight:400;color:#fff; font-size:clamp(25px,3.5vw,44px);line-height:1.3;max-width:19ch} .fx-idea-p{margin-top:clamp(18px,2.2vw,26px);max-width:56ch;font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.9;color:rgba(244,239,230,.84)} /* ─── 03 · the spirit ─── */ .fx-spirit{display:grid;grid-template-columns:1fr 1fr .78fr;gap:clamp(24px,3vw,46px); margin-top:clamp(28px,3.4vw,44px)} .fx-nation+.fx-nation{padding-left:clamp(24px,3vw,46px);border-left:1px solid var(--fxln)} .fx-flag{display:flex;align-items:center;gap:13px} .fx-flag svg{width:34px;height:25px;flex-shrink:0;box-shadow:0 0 0 1px var(--fxln)} .fx-flag b{font-family:var(--s);font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .fx-nation>h3{margin-top:12px;font-family:var(--d);font-weight:400;font-size:clamp(19px,2vw,24px); line-height:1.4;color:var(--blue-txt)} .fx-ideas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px);margin-top:clamp(20px,2.4vw,28px)} .fx-idea b{display:block;font-family:var(--d);font-weight:500;font-size:clamp(17px,1.7vw,20px);color:var(--ink)} .fx-idea span{display:block;margin-top:3px;font-family:var(--s);font-size:14px;letter-spacing:.06em;color:var(--fxgt)} .fx-idea p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--dim)} .fx-root{padding-left:clamp(24px,3vw,46px);border-left:1px solid var(--fxln)} .fx-root>span{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .fx-root div{margin-top:20px} .fx-root b{display:block;font-family:var(--d);font-weight:500;font-size:17px;color:var(--ink)} .fx-root p{margin-top:8px;font-size:14.5px;line-height:1.8;color:var(--dim)} .fx-spirit-close{margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--fxln); font-family:var(--d);font-size:clamp(18px,2vw,23px);line-height:1.6;color:var(--ink);max-width:40ch} @media(max-width:1000px){ .fx-spirit{grid-template-columns:1fr} .fx-nation+.fx-nation,.fx-root{padding-left:0;border-left:0;padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--fxln)} } @media(max-width:520px){.fx-ideas{grid-template-columns:1fr}} /* ─── 04 · the journey (chapter cards over a band) ─── */ .fx-jband{position:relative;overflow:hidden;background:var(--fxdk);padding:clamp(52px,6vw,84px) 0 clamp(120px,15vw,190px)} .fx-jband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fx-jband:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,21,.86),rgba(9,13,21,.94))} .fx-jband .fxw{position:relative;z-index:2} .fx-chcards{position:relative;z-index:3;margin-top:clamp(-110px,-13vw,-170px); display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)} .fx-chc{background:var(--fxcard);border:1px solid var(--fxln);display:flex;flex-direction:column} .fx-chc-b{padding:clamp(18px,1.8vw,24px)} .fx-chc-n{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--fxgt)} .fx-chc h3{margin-top:10px;font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.03em; font-size:clamp(17px,1.65vw,20px);line-height:1.3;color:var(--ink)} .fx-chc-w{margin-top:7px;font-family:var(--d);font-size:15.5px;line-height:1.5;color:var(--blue-txt)} .fx-chc-e{margin-top:9px;font-size:14px;line-height:1.7;color:var(--faint)} .fx-chc figure{position:relative;margin:0;overflow:hidden} .fx-chc figure img{width:100%;aspect-ratio:4/3;object-fit:cover} .fx-chc-go{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%; background:rgba(12,16,24,.62);border:1px solid rgba(255,255,255,.65);color:#fff; display:flex;align-items:center;justify-content:center;font-size:15px;transition:.3s var(--e)} .fx-chc-go:hover{background:var(--fxg);border-color:var(--fxg);color:#0A1A22} .fx-chc-d{display:flex;align-items:baseline;gap:12px;padding:14px clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px); border-top:1px solid var(--fxln);margin-top:auto} .fx-chc-d b{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.1em;color:var(--ink);white-space:nowrap} .fx-chc-d span{font-family:var(--d);font-size:15px;color:var(--dim)} @media(max-width:1040px){.fx-chcards{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.fx-chcards{grid-template-columns:1fr;margin-top:clamp(-90px,-16vw,-110px)}} /* ─── 05 · the days ─── */ .fx-ch{padding-top:clamp(40px,5vw,66px)} .fx-ch+.fx-ch{margin-top:clamp(40px,5vw,66px);border-top:1px solid var(--fxln)} .fx-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3vw,48px);align-items:center} .fx-split.rev>.fx-split-i{order:2} .fx-split.rev{grid-template-columns:1fr 1.05fr} .fx-split.tall{grid-template-columns:.8fr 1fr} .fx-split.tall.rev{grid-template-columns:1fr .8fr} .fx-split-i{overflow:hidden;background:#E4DCCE} .fx-split-i img{width:100%;aspect-ratio:3/2;object-fit:cover} .fx-split.tall .fx-split-i img{aspect-ratio:3/4} .fx-ch-n{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--fxgt)} .fx-ch h3{margin-top:10px;font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.04em; font-size:clamp(22px,2.7vw,33px);line-height:1.18;color:var(--ink)} .fx-ch-w{margin-top:9px;font-family:var(--d);font-size:clamp(16px,1.6vw,19px);color:var(--blue-txt)} .fx-ch-p{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(16px,1.35vw,17.5px);line-height:1.9;color:var(--tx);max-width:52ch} .fx-ch-e{margin-top:16px;padding-top:13px;border-top:1px solid var(--fxln);font-family:var(--s);font-size:14px; letter-spacing:.09em;color:var(--faint);line-height:1.8} /* 2026-09-27 visual QA: the one-line design move is the anchor of section 07, not a footnote */ .fx-ch-i{margin-top:18px;padding-top:14px;border-top:1px solid var(--fxln);font-family:var(--d);font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink);max-width:44ch} .fx-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(18px,2.2vw,28px)} .fx-pair figure{margin:0;overflow:hidden;background:#E4DCCE} .fx-pair img{width:100%;aspect-ratio:16/9;object-fit:cover} /* 2026-09-27 visual QA: lighter pair, the thinking leads */ .fx-days{list-style:none;margin:clamp(20px,2.6vw,32px) 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(14px,1.6vw,22px)} .fx-day{background:var(--fxcard);border:1px solid var(--fxln);display:flex;flex-direction:column} .fx-days>.fx-day:only-child{grid-column:1/-1} @media(min-width:820px){ .fx-days>.fx-day:only-child .fx-day-b>ul{columns:2;column-gap:clamp(26px,3vw,46px)} .fx-days>.fx-day:only-child .fx-day-b>ul li{break-inside:avoid} .fx-days>.fx-day:only-child figure img{aspect-ratio:21/6} } .fx-day figure{margin:0;overflow:hidden} .fx-day figure img{width:100%;aspect-ratio:16/10;object-fit:cover} .fx-day-b{padding:clamp(17px,1.7vw,22px);display:flex;flex-direction:column;flex:1} .fx-day-h{display:flex;align-items:baseline;gap:11px} .fx-day-h b{font-family:var(--d);font-size:20px;font-weight:500;color:var(--fxgt);line-height:1} .fx-day-h span{font-family:var(--s);font-size:14px;letter-spacing:.1em;color:var(--faint);line-height:1.5} .fx-day h4{margin:10px 0 0;font-family:var(--d);font-weight:500;font-size:clamp(17px,1.6vw,19px); line-height:1.4;color:var(--ink)} .fx-day ul{margin:11px 0 0;padding-left:1.05em;font-size:14.5px;line-height:1.8;color:var(--dim)} .fx-day ul li+li{margin-top:7px} .fx-day-st{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline; border-top:1px solid var(--fxln)} .fx-day-st i{font-style:normal;font-family:var(--s);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .fx-day-st b{font-family:var(--d);font-weight:500;font-size:15px;color:var(--ink)} @media(max-width:820px){ .fx-split,.fx-split.tall{grid-template-columns:1fr} .fx-split.rev>.fx-split-i{order:0} .fx-split.tall .fx-split-i img{aspect-ratio:3/2} } /* ─── 06 · where you sleep ─── */ .fx-stays{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(26px,3.2vw,40px)} .fx-stay figure{margin:0;overflow:hidden;background:#E4DCCE} .fx-stay img{width:100%;aspect-ratio:16/10;object-fit:cover} .fx-stay b{display:block;margin-top:16px;font-family:var(--s);font-weight:500;font-size:14.5px; letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} .fx-stay-p{margin-top:6px;font-family:var(--d);font-size:16px;line-height:1.55;color:var(--blue-txt)} .fx-stay-n{margin-top:4px;font-family:var(--s);font-size:14px;letter-spacing:.1em;color:var(--fxgt)} .fx-stay p{margin-top:9px;font-size:14.5px;line-height:1.75;color:var(--dim)} .fx-stay-note{margin-top:clamp(24px,2.8vw,34px);padding-top:16px;border-top:1px solid var(--fxln); font-size:14.5px;line-height:1.8;color:var(--faint);max-width:72ch} @media(max-width:1100px){.fx-stays{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.fx-stays{grid-template-columns:1fr}} /* ─── 07 · aurora ─── */ .fx-aurora{position:relative;overflow:hidden;background:var(--fxdk)} .fx-aurora>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85} /* the sky is the subject of this section — let it through, and keep the veil only where the type sits */ .fx-aurora:after{content:'';position:absolute;inset:0; background:linear-gradient(95deg,rgba(9,13,21,.93) 0%,rgba(9,13,21,.80) 46%,rgba(9,13,21,.42) 100%)} .fx-aurora .fxw{position:relative;z-index:2;padding-top:clamp(52px,6.4vw,86px);padding-bottom:clamp(52px,6.4vw,86px)} .fx-au-g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,52px); margin-top:clamp(26px,3.2vw,40px);align-items:start} .fx-mapband{margin-top:clamp(24px,3vw,36px);position:relative;overflow:hidden; border:1px solid rgba(244,239,230,.22);background:#0A0F17} .fx-mapband svg{display:block;width:100%;height:auto} .fx-land{fill:rgba(244,239,230,.07);stroke:rgba(244,239,230,.34);stroke-width:1; stroke-linejoin:round;vector-effect:non-scaling-stroke} .fx-sea{fill:#0A0F17} .fx-base{fill:none;stroke:rgba(120,198,213,.26);stroke-width:1.4;stroke-dasharray:5 5; stroke-linecap:round;stroke-linejoin:round} .fx-trail{fill:none;stroke:#78C6D5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .fx-veh-h{fill:#78C6D5;stroke:rgba(9,13,21,.55);stroke-width:1.2} .fx-veh-i{fill:#0A0F17} .fx-veh{filter:drop-shadow(0 1px 3px rgba(9,13,21,.55))} @media print{.fx-veh,.fx-trail{display:none}.fx-base{stroke:#666;stroke-dasharray:none}} @media(prefers-reduced-motion:reduce){ .fx-veh{display:none} .fx-trail{stroke-dasharray:none!important;stroke-dashoffset:0!important} } .fx-mapband-c{display:flex;justify-content:space-between;gap:16px;padding:12px clamp(14px,1.6vw,22px); border-top:1px solid rgba(244,239,230,.18);font-family:var(--s);font-size:14px;letter-spacing:.18em; text-transform:uppercase;color:rgba(244,239,230,.58);flex-wrap:wrap;letter-spacing:.1em} .fx-mapband-r{text-align:right} @media(prefers-reduced-motion:reduce){ .fx-route{stroke-dashoffset:0;transition:none} .fx-pin{opacity:1;transition:none} } .fx-au-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,33%); gap:clamp(22px,4vw,66px);align-items:start;margin-top:clamp(20px,2.4vw,30px)} .fx-au-p{font-size:clamp(15.5px,1.4vw,17px);line-height:1.9;color:rgba(244,239,230,.86);max-width:52ch} .fx-au-close{margin:0;padding-left:clamp(18px,2.2vw,30px);border-left:1px solid rgba(244,239,230,.22); font-family:var(--d);font-size:clamp(19px,2.1vw,25px);line-height:1.5;color:#fff} /* four places, one dot per night -- the shape of the whole week in one look */ .fx-nights{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:rgba(244,239,230,.18);border:1px solid rgba(244,239,230,.18); margin-top:clamp(28px,3.4vw,40px)} @media(min-width:760px){.fx-nights{grid-template-columns:repeat(4,1fr)}} .fx-place{background:rgba(9,13,21,.72);padding:clamp(18px,2.2vw,24px)} .fx-dots{display:flex;gap:7px;margin-bottom:13px;min-height:10px} .fx-dot{width:9px;height:9px;border-radius:50%;background:var(--fxg); box-shadow:0 0 14px rgba(120,198,213,.7)} .fx-place b{display:block;font-family:var(--d);font-weight:400;font-size:clamp(17px,1.7vw,20px); color:#fff;line-height:1.25} .fx-place span{display:block;margin-top:7px;font-family:var(--s);font-size:14px;letter-spacing:.14em; text-transform:uppercase;color:var(--fxg);line-height:1.6} .fx-nights-note{margin-top:clamp(16px,2vw,22px);font-size:14.5px;line-height:1.8;color:var(--fxdk-dim)} @media(max-width:900px){ .fx-au-top{grid-template-columns:1fr;gap:clamp(20px,3.4vw,26px)} .fx-au-close{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid rgba(244,239,230,.22)} } .fx-au-ng b{display:block;font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em; text-transform:uppercase;color:var(--fxg)} .fx-au-ng span{display:block;margin-top:7px;font-size:15px;line-height:1.8;color:var(--fxdk-tx)} .fx-au-l{list-style:none;margin:0;padding:0} .fx-au-l li{display:flex;align-items:flex-start;gap:14px;padding:11px 0} .fx-au-l li+li{border-top:1px solid rgba(244,239,230,.16)} .fx-au-l svg{flex-shrink:0;width:24px;height:24px;stroke:var(--fxg);fill:none;stroke-width:1.2;margin-top:2px} .fx-au-l b{display:block;font-family:var(--s);font-weight:400;font-size:15px;color:#fff;line-height:1.5} .fx-au-l span{display:block;font-size:14px;line-height:1.6;color:rgba(244,239,230,.66);margin-top:2px} @media(max-width:860px){.fx-au-g{grid-template-columns:1fr}} /* ─── 08 · the curator ─── */ .fx-cur{display:grid;grid-template-columns:minmax(0,45%) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center; margin-top:clamp(26px,3.2vw,40px);align-items:start} .fx-cur-l{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase; line-height:1.9;color:var(--faint)} .fx-cur-b p{margin-top:16px;font-size:clamp(15.5px,1.35vw,17px);line-height:1.9;color:var(--tx);max-width:46ch} .fx-sign{margin-top:22px;padding-top:16px;border-top:1px solid var(--fxln)} .fx-sign b{display:block;font-family:var(--d);font-weight:500;font-size:19px;color:var(--ink)} .fx-sign span{display:block;margin-top:3px;font-size:14px;color:var(--faint)} .fx-cur-img{overflow:hidden;background:#E4DCCE} .fx-cur-img{margin:0} .fx-cur-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .fx-cur-foot{display:grid;grid-template-columns:minmax(0,45%) minmax(0,1fr);gap:clamp(20px,4vw,64px); align-items:start;margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(20px,2.4vw,30px); border-top:1px solid var(--fxln)} .fx-cur-q{margin:0;font-family:var(--d);font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--ink);max-width:20ch} .fx-cur-lic{max-width:62ch} .fx-cur-lic>span{font-family:var(--s);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .fx-cur-lic b{display:block;margin-top:7px;font-family:var(--d);font-weight:500;font-size:17px;color:var(--ink);line-height:1.45} .fx-cur-lic p{margin-top:10px;font-size:14px;line-height:1.8;color:var(--dim)} @media(max-width:980px){ .fx-cur,.fx-cur-foot{grid-template-columns:1fr} } /* ─── 09 · investment ─── */ .fx-inv{margin-top:clamp(24px,3vw,36px)} .fx-inv-l{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase; line-height:1.9;color:var(--fxdk-dim)} .fx-inv-from{margin-top:clamp(18px,2.2vw,26px);font-family:var(--s);font-size:14px; letter-spacing:.16em;text-transform:uppercase;color:var(--fxdk-dim)} .fx-inv-big{margin-top:6px;font-family:var(--d);font-weight:400;color:#fff; font-size:clamp(30px,3.6vw,44px);line-height:1.1} .fx-inv-big i{font-style:normal;font-size:.45em;color:rgba(244,239,230,.72);letter-spacing:.02em} .fx-inv-sub{margin-top:9px;font-size:14.5px;line-height:1.7;color:var(--fxdk-dim)} .fx-tbl-l{margin-top:clamp(22px,2.6vw,32px);font-family:var(--s);font-weight:500;font-size:14px; letter-spacing:.16em;text-transform:uppercase;color:var(--fxdk-dim)} .fx-tbl{display:none;width:100%;border-collapse:collapse;border:1px solid var(--fxdk-ln);margin-top:26px} .fx-tbl caption{caption-side:top;text-align:left;font-family:var(--s);font-weight:500;font-size:14px; letter-spacing:.16em;text-transform:uppercase;color:var(--fxdk-dim);padding-bottom:10px} .fx-calc{margin-top:clamp(16px,2vw,22px)} .fx-calc-out{min-height:clamp(84px,9vw,112px)} .fx-calc-opts button{min-height:64px} .fx-calc-p{font-family:var(--d);font-weight:400;color:#fff;font-size:clamp(34px,4.4vw,56px); line-height:1.05;transition:opacity .22s var(--e)} .fx-calc-p.swap{opacity:0} .fx-calc-s{margin-top:10px;font-family:var(--s);font-size:14px;letter-spacing:.14em; text-transform:uppercase;color:var(--fxg);transition:opacity .22s var(--e);max-width:40ch;line-height:1.7} .fx-calc-s.swap{opacity:0} .fx-calc-lbl{margin-top:clamp(18px,2.2vw,26px);margin-bottom:10px;font-family:var(--s);font-weight:500; font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--fxdk-dim)} .fx-calc-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px; background:var(--fxdk-ln);border:1px solid var(--fxdk-ln)} .fx-calc-opts button{appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--fxdk); border:0;padding:15px 8px;font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.1em; text-transform:uppercase;color:var(--fxdk-dim);line-height:1.3;transition:.28s var(--e)} .fx-calc-opts button .n{display:block;font-family:var(--d);font-weight:400;font-size:22px; letter-spacing:0;text-transform:none;color:#fff;margin-bottom:3px;transition:.28s var(--e)} .fx-calc-opts button:hover{background:rgba(244,239,230,.08)} .fx-calc-opts button[aria-pressed="true"]{background:var(--fxg);color:#0A1A22} .fx-calc-opts button[aria-pressed="true"] .n{color:#0A1A22} .fx-calc-sic{margin:clamp(14px,1.8vw,20px) 0 0;font-size:14.5px;line-height:1.8; color:var(--fxdk-dim);max-width:64ch} /* five rungs in two columns leaves one orphan -- let the last one span */ @media(max-width:620px){.fx-calc-opts{grid-template-columns:1fr 1fr} .fx-calc-opts button:last-child:nth-child(odd){grid-column:1 / -1}} .fx-tbl th,.fx-tbl td{border:1px solid var(--fxdk-ln);padding:13px 16px;text-align:left; font-size:15px;line-height:1.5;color:var(--fxdk-tx);font-weight:400} .fx-tbl th{font-family:var(--s);letter-spacing:.06em} .fx-tbl td{font-family:var(--d);color:#fff} .fx-tbl tr.lo td,.fx-tbl tr.lo th{background:rgba(200,168,75,.13)} .fx-lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px); margin-top:clamp(28px,3.2vw,40px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--fxdk-ln)} .fx-lists>div+div{padding-left:clamp(20px,2.4vw,34px);border-left:1px solid var(--fxdk-ln)} .fx-lists h3{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase; color:var(--fxdk-dim)} .fx-lists ul{list-style:none;margin:14px 0 0;padding:0} .fx-lists li{display:flex;gap:11px;padding:6px 0;font-size:14.5px;line-height:1.7;color:var(--fxdk-tx)} .fx-lists li i{font-style:normal;flex-shrink:0;width:1em;color:var(--fxg)} .fx-lists .no li i{color:rgba(244,239,230,.50)} .fx-inv-note{margin-top:clamp(28px,3.2vw,40px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--fxdk-ln); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.4vw,34px)} .fx-inv-note b{display:block;font-family:var(--d);font-weight:500;font-size:17px;color:#fff} .fx-inv-note p{margin-top:8px;font-size:14.5px;line-height:1.8;color:var(--fxdk-dim)} .fx-inv-fine{margin-top:22px;font-size:14px;line-height:1.75;color:var(--fxdk-dim);max-width:66ch} .fx-inv-cta{margin-top:clamp(26px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--fxdk-ln); display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px} .fx-inv-cta p{font-family:var(--d);font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:#fff;max-width:36ch} @media(max-width:600px){ .fx-lists{grid-template-columns:1fr} .fx-lists>div+div{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--fxdk-ln)} } /* ─── 10 · questions ─── */ .fx-qs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,46px);margin-top:clamp(24px,3vw,36px)} .fx-q{border-bottom:1px solid var(--fxln)} .fx-q>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px; padding:17px 0;font-family:var(--d);font-size:clamp(16px,1.5vw,18px);line-height:1.5;color:var(--ink)} .fx-q>summary::-webkit-details-marker{display:none} .fx-q>summary i{font-style:normal;flex-shrink:0;width:22px;height:22px;border:1px solid var(--fxln); display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--fxgt);margin-top:2px; transition:.3s var(--e)} .fx-q[open]>summary i{background:var(--ink);border-color:var(--ink);color:var(--cream)} .fx-q[open]>summary i:before{content:'\2013'} .fx-q:not([open])>summary i:before{content:'+'} .fx-q-a{padding:0 0 20px 36px;font-size:15px;line-height:1.9;color:var(--dim);max-width:60ch} .fx-q-a p{margin:0 0 .8em} .fx-q-a p:last-child{margin-bottom:0} @media(max-width:820px){.fx-qs{grid-template-columns:1fr}} /* ─── 11 · begin ─── */ .fx-begin{position:relative;overflow:hidden;background:var(--fxdk)} .fx-begin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fx-begin:after{content:'';position:absolute;inset:0; background:linear-gradient(95deg,rgba(9,13,21,.94) 0%,rgba(9,13,21,.76) 46%,rgba(9,13,21,.40) 100%)} .fx-begin .fxw{position:relative;z-index:2;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)} .fx-begin-g{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 40px} .fx-begin-g>div:first-child{flex:1 1 440px;min-width:min(100%,380px)} .fx-begin-r{flex:0 1 auto} .fx-begin h2{font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.06em; line-height:1.08;color:#fff} /* v1: font-size clamp(30px,4.2vw,52px) removed — dead (overridden by the --fx-t2 rule below) */ .fx-begin-l{margin-top:16px;font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em; text-transform:uppercase;line-height:1.9;color:rgba(244,239,230,.80)} .fx-begin p.b{margin-top:18px;max-width:46ch;font-size:clamp(15.5px,1.4vw,17px);line-height:1.85; color:rgba(244,239,230,.84)} .fx-begin-cta{margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:14px 18px} .fx-begin-r{text-align:right} .fx-begin-tag{font-family:var(--d);font-size:clamp(16px,1.7vw,21px);line-height:1.5;color:rgba(244,239,230,.88)} .fx-begin-mk{margin-top:22px;font-family:var(--d);font-size:clamp(20px,2.2vw,27px);color:#fff;line-height:1} .fx-begin-mk i{font-style:normal;font-weight:500} .fx-begin-mk span{display:block;margin-top:7px;font-family:var(--s);font-size:14px;letter-spacing:.2em; text-transform:uppercase;color:rgba(244,239,230,.62)} .fx-begin-mail{margin-top:20px;font-family:var(--d);font-size:16px;color:rgba(244,239,230,.82)} .fx-begin-note{margin-top:10px;font-size:14px;color:rgba(244,239,230,.62)} @media(max-width:760px){.fx-begin-r{text-align:left}} /* ─── sticky enquiry bar ─── */ .fx-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center; justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,40px); background:rgba(12,16,24,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(244,239,230,.18); transform:translateY(105%);transition:transform .4s var(--e)} .fx-bar.on{transform:none} .fx-bar.np .fx-bar-p{visibility:hidden} .fx-bar-p{font-family:var(--s);font-size:14px;letter-spacing:.06em;color:rgba(244,239,230,.72);line-height:1.4} .fx-bar-p b{display:block;font-family:var(--d);font-size:19px;font-weight:500;color:#fff} .fx-bar-a{display:flex;align-items:center;gap:10px;margin-left:auto} .fx-bar .fx-btn{padding:12px 20px} .fx-bar .fx-btn.wa{display:none;background:transparent;color:rgba(244,239,230,.94); border:1px solid rgba(244,239,230,.45)} .fx-bar .fx-btn.wa:hover{border-color:rgba(244,239,230,.9);background:rgba(244,239,230,.10)} @media(max-width:700px){ .fx-bar .fx-btn.wa{display:inline-flex} .fx-bar-a{gap:8px} .fx-bar .fx-btn{padding:12px 14px;font-size:14px;letter-spacing:.1em} .fx-bar-p{font-size:14px}.fx-bar-p b{font-size:17px} } .fx-tail{height:0} @media(max-width:880px){.fx-tail{height:74px}} /* ═══ 02 · AT A GLANCE — the five stops, scannable in one pass ═══ */ /* 2026-09-27 · the five stops read as one route line: a rule across the top, a dot per stop, no cell borders. Number, place, nights, one line. */ .fx-glance{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,28px); margin-top:clamp(40px,4.8vw,64px);position:relative;padding-top:clamp(22px,2.4vw,30px)} .fx-glance:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--fxln)} .fx-stop{padding:0;position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start} .fx-stop+.fx-stop{padding-left:clamp(14px,1.8vw,28px);border-left:1px solid var(--fxln)} .fx-stop+.fx-stop:before{left:-5px} .fx-stop:before{content:'';position:absolute;left:0;top:calc(-1 * clamp(22px,2.4vw,30px) - 4px);width:9px;height:9px; border-radius:50%;background:var(--blue-txt)} .fx-stop.is-day:before{background:var(--fxgold)} .fx-stop-n{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.22em;color:var(--fxgt)} .fx-stop b{display:block;margin-top:10px;font-family:var(--d);font-weight:400; font-size:clamp(20px,2.1vw,26px);line-height:1.2;color:var(--ink)} .fx-stop em{display:block;margin-top:8px;font-style:normal;font-family:var(--s);font-weight:500; font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-txt)} .fx-stop span{display:block;margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--dim)} .fx-stop.is-day em{color:var(--fxgold)} /* the explaining sentence + link sit under the route line, not in the header */ .fx-glance-r{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px clamp(24px,3.4vw,52px); margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--fxln)} .fx-glance-r .fx-h-r{flex:1 1 40ch} @media(max-width:1000px){ .fx-glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,32px) clamp(18px,3vw,32px);padding-top:0} .fx-glance:before{display:none} .fx-stop{padding-top:16px;border-top:1px solid var(--fxln)} .fx-stop+.fx-stop{padding-left:0;border-left:0} .fx-stop:before,.fx-stop+.fx-stop:before{top:-5px;left:0} } @media(max-width:560px){ .fx-glance{grid-template-columns:1fr;gap:18px} } /* ═══ 03 · THE ROUTE · DAY BY DAY — sticky map + day selection ═══ */ .fx-route-map{margin-top:clamp(24px,3vw,34px)} @media(max-width:1023px){ .fx-mapsvg{overflow-x:auto;-webkit-overflow-scrolling:touch} .fx-mapsvg svg{min-width:700px} } @media(max-width:760px){ .fx-mapsvg svg{min-width:640px} .fx-mapsvg{max-height:32vh} } @media(max-width:760px){ .fx-mapband-c{flex-direction:column;align-items:flex-start;gap:6px} .fx-mapband-c>span{display:block} .fx-mapband-r{text-align:left} } /* the pin for the day you are reading */ .fx-pin{transition:opacity .7s var(--e)} /* Eight days, ordinary vertical document flow. No carousel, no tabs, no arrows, nothing hidden behind an interaction: the customer just scrolls. */ .fx-days8{list-style:none;margin:clamp(26px,3.4vw,46px) 0 0;padding:0} .fx-dayc{padding-top:clamp(30px,3.6vw,52px)} .fx-dayc + .fx-dayc{margin-top:clamp(30px,3.6vw,52px);border-top:1px solid var(--fxdk-ln)} .fx-dayc-h{display:flex;align-items:baseline;gap:clamp(12px,1.5vw,22px);flex-wrap:wrap} .fx-dayc-h b{font-family:var(--d);font-weight:500;font-size:clamp(20px,2.1vw,27px); letter-spacing:.06em;color:var(--fxg);line-height:1.1;white-space:nowrap} .fx-dayc-h span{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.16em; text-transform:uppercase;color:var(--fxdk-dim);line-height:1.65} .fx-dayc-g{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr); gap:clamp(22px,3.2vw,52px);margin-top:clamp(18px,2.2vw,28px);align-items:start} /* ONE fixed frame for all eight days: the source ratio never sets the height */ .fx-dayc-f{margin:0;overflow:hidden;background:rgba(244,239,230,.07);border:1px solid var(--fxdk-ln)} .fx-dayc-f img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .fx-dayc h3{margin:0;font-family:var(--d);font-weight:400;font-size:clamp(22px,2.4vw,32px); line-height:1.24;letter-spacing:.01em;color:#fff} .fx-dayc-p{margin:clamp(10px,1.2vw,15px) 0 0;font-size:clamp(15px,1.25vw,16.5px);line-height:1.85; color:var(--fxdk-tx);max-width:56ch} .fx-dayc ul{margin:clamp(16px,2vw,24px) 0 0;padding:0;list-style:none} .fx-dayc ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.75;color:var(--fxdk-tx)} .fx-dayc ul li + li{margin-top:9px} .fx-dayc ul li:before{content:'';position:absolute;left:0;top:.74em;width:8px;height:1px;background:var(--fxg)} .fx-dayc-st{margin-top:clamp(18px,2.1vw,26px);padding-top:14px;border-top:1px solid var(--fxdk-ln); display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline} .fx-dayc-st i{font-style:normal;font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.2em; text-transform:uppercase;color:var(--fxdk-dim)} .fx-dayc-st b{font-family:var(--d);font-weight:500;font-size:15.5px;color:#fff} @media(max-width:900px){ .fx-dayc-g{grid-template-columns:1fr;gap:clamp(16px,3.2vw,24px)} .fx-dayc-f img{aspect-ratio:16/10} } /* ═══ 04 · FOUR WORLDS — one visual chapter at a time ═══ */ /* 2026-09-27 (Zelts, ZeL_First_Arctic_ZH_v5) · 04 is an image-led editorial sequence: large scene → title left / reading right → two supporting details set narrower and to the right. 05 keeps its alternating split; 08 keeps one image per design move. */ .fx-pay{display:block;padding-top:clamp(40px,4.8vw,72px)} .fx-pay + .fx-pay{margin-top:clamp(56px,7vw,104px);padding-top:clamp(56px,7vw,104px);border-top:1px solid var(--fxln)} .fx-pay-t{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);column-gap:clamp(36px,6vw,96px);align-items:start;margin-top:clamp(26px,3vw,44px)} .fx-pay-n{font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.24em;color:var(--fxgt);grid-column:1;grid-row:1} .fx-pay-h{margin:clamp(10px,1.3vw,16px) 0 0;font-family:var(--d);font-weight:400;grid-column:1;grid-row:2; font-size:clamp(27px,3.4vw,50px);line-height:1.12;letter-spacing:.01em;color:var(--ink);max-width:17ch} .fx-pay-w{margin-top:clamp(10px,1.2vw,14px);font-family:var(--s);font-weight:500;font-size:14px;grid-column:1;grid-row:3; letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt)} .fx-pay-p{margin:0;font-size:clamp(15.5px,1.35vw,17px);line-height:1.9;grid-column:2;grid-row:1 / span 3;align-self:center; color:var(--tx);max-width:44ch} /* the large scene: one wide frame for all four worlds */ .fx-pay-m{margin:0;overflow:hidden;background:#E4DCCE} .fx-pay-m img{display:block;width:100%;aspect-ratio:21/10;object-fit:cover} /* a tall source whose subject sits low in the frame */ .fx-pay-m img.low{object-position:center 74%} /* the two supporting details: side by side, 3:2, under the reading */ .fx-pay-s{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,3.6vw,52px)} .fx-pay-s figure{margin:0;overflow:hidden;background:#E4DCCE} .fx-pay-s img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} @media(max-width:900px){ .fx-pay-m img{aspect-ratio:4/3} .fx-pay-h{max-width:none} } @media(max-width:600px){ .fx-pay-t{grid-template-columns:1fr;gap:0} .fx-pay-p{grid-column:1;grid-row:4;margin-top:clamp(18px,4vw,28px);max-width:none} .fx-pay-s{grid-template-columns:1fr;gap:12px} .fx-pay-s img{aspect-ratio:16/9} } /* ═══ 05 · WHERE THE JOURNEY LIVES — four editorial stays ═══ */ /* One large media frame + one text area. Media alternates side, nothing else does: 01 media-left, 02 text-left, 03 media-left, 04 text-left. */ .fx-liv{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%); gap:clamp(26px,4vw,72px);align-items:center;padding-top:clamp(44px,5.4vw,84px)} .fx-liv + .fx-liv{margin-top:clamp(44px,5.4vw,84px);border-top:1px solid var(--fxln)} .fx-liv.rev{grid-template-columns:minmax(0,55%) minmax(0,45%)} .fx-liv.rev .fx-liv-m{order:2} /* ONE media frame, ONE height — image or video, portrait or landscape source */ .fx-liv-m{margin:0;overflow:hidden;background:#E4DCCE} .fx-liv-m img,.fx-liv-m video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#E4DCCE} .fx-liv-eb{display:flex;align-items:center;gap:14px;font-family:var(--s);font-weight:500;font-size:14px; letter-spacing:.24em;text-transform:uppercase;color:var(--fxgt)} .fx-liv-eb:after{content:'';flex:1;height:1px;background:var(--fxln);max-width:110px} .fx-liv-h{margin:clamp(14px,1.9vw,24px) 0 0;font-family:var(--d);font-weight:400; font-size:clamp(28px,3.7vw,54px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} .fx-liv-nm{margin-top:clamp(14px,1.8vw,20px);font-family:var(--d);font-weight:500; font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--blue-txt)} .fx-liv-me{margin-top:7px;font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint)} .fx-liv-p{margin:clamp(14px,1.8vw,22px) 0 0;font-size:clamp(15.5px,1.35vw,17px);line-height:1.9; color:var(--tx);max-width:46ch} @media(max-width:900px){ .fx-liv,.fx-liv.rev{grid-template-columns:1fr;gap:clamp(18px,3.4vw,26px)} .fx-liv.rev .fx-liv-m{order:0} .fx-liv-m img,.fx-liv-m video{aspect-ratio:4/3} } .fx-stay-foot{margin-top:clamp(34px,4vw,52px);padding-top:18px;border-top:1px solid var(--fxln); display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline; font-family:var(--s);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .fx-stay-foot b{color:var(--ink);font-weight:500} .fx-stay-note2{margin-top:14px;font-size:14.5px;line-height:1.8;color:var(--faint);max-width:72ch} /* 04 sits on the dark ground: re-point the paper tokens the block uses */ .fx-s.dk .fx-liv + .fx-liv,.fx-s.dk .fx-stay-foot{border-top-color:var(--fxdk-ln)} .fx-s.dk .fx-liv-eb{color:var(--fxg)} .fx-s.dk .fx-liv-eb:after{background:var(--fxdk-ln)} .fx-s.dk .fx-liv-h{color:#fff} .fx-s.dk .fx-liv-nm{color:var(--fxg)} .fx-s.dk .fx-liv-me,.fx-s.dk .fx-stay-foot,.fx-s.dk .fx-stay-note2{color:var(--fxdk-dim)} .fx-s.dk .fx-liv-p{color:var(--fxdk-tx)} .fx-s.dk .fx-stay-foot b{color:#fff} .fx-s.dk .fx-liv-m,.fx-s.dk .fx-liv-m img,.fx-s.dk .fx-liv-m video{background:rgba(244,239,230,.07)} /* ─── Chinese typography: no true italics, slightly heavier ─── */ html[lang="zh-Hans"] .fx-idea-h,html[lang="zh-Hans"] .fx-ch-w, html[lang="zh-Hans"] .fx-a-w,html[lang="zh-Hans"] .fx-chc-w,html[lang="zh-Hans"] .fx-liv-p, html[lang="zh-Hans"] .fx-cur-q,html[lang="zh-Hans"] .fx-begin-tag, html[lang="zh-Hans"] .fx-spirit-close,html[lang="zh-Hans"] .fx-au-close,html[lang="zh-Hans"] .fx-nation>h3{ font-style:normal;font-weight:500;letter-spacing:0;line-height:1.6} html[lang="zh-Hans"] .fx-h h2,html[lang="zh-Hans"] .fx-begin h2{letter-spacing:.02em;font-weight:500} html[lang="zh-Hans"] .fx-liv-h,html[lang="zh-Hans"] .fx-pay-h{letter-spacing:.02em;font-weight:500;line-height:1.3} html[lang="zh-Hans"] .fx-stop b{font-weight:500} /* 04 world titles (zh): never break inside the phrase after the dash. Desktop: title column takes the width it needs, one line. Phones: break only after the dash. */ html[lang="zh-Hans"] .fx-pay-h{max-width:none} html[lang="zh-Hans"] .fx-pay-h .nb{white-space:nowrap} @media(min-width:961px){ html[lang="zh-Hans"] .fx-pay-t{grid-template-columns:auto minmax(0,1fr)} html[lang="zh-Hans"] .fx-pay-h{white-space:nowrap} } /* below 960px a one-line zh title leaves no room for the reading: stack, as phones do */ @media(max-width:960px){ html[lang="zh-Hans"] .fx-pay-t{grid-template-columns:1fr;gap:0} html[lang="zh-Hans"] .fx-pay-p{grid-column:1;grid-row:4;margin-top:clamp(18px,4vw,28px);max-width:none} } html[lang="zh-Hans"] .fx-liv-p,html[lang="zh-Hans"] .fx-pay-p,html[lang="zh-Hans"] .fx-dayc ul li, html[lang="zh-Hans"] .fx-dayc-p{line-height:2.0} html[lang="zh-Hans"] .fx-idea-h{max-width:18em;word-break:keep-all} html[lang="zh-Hans"] .fx-cover-line,html[lang="zh-Hans"] .fx-ch-p{max-width:32em} html[lang="zh-Hans"] .fx-ch h3,html[lang="zh-Hans"] .fx-chc h3{letter-spacing:0;font-weight:500} html[lang="zh-Hans"] .fx-cover-line,html[lang="zh-Hans"] .fx-ch-p,html[lang="zh-Hans"] .fx-idea-p, html[lang="zh-Hans"] .fx-au-p,html[lang="zh-Hans"] .fx-cur-b p{line-height:2.0} html[lang="zh-Hans"] .fx-eb,html[lang="zh-Hans"] .fx-h-l,html[lang="zh-Hans"] .fx-cur-l, html[lang="zh-Hans"] .fx-inv-l,html[lang="zh-Hans"] .fx-begin-l{letter-spacing:.12em} /* ─── print: everything visible, nothing hidden behind a tap ─── */ @media print{ .fx-nav,.fx-bar,.fx-drawer,.fx-tail,.fx-chc-go{display:none!important} .r,.px img{opacity:1!important;transform:none!important} .fx-s,.fx-band,.fx-aurora,.fx-begin,.fx-jband{background:#fff!important;color:#000!important; padding-top:18px!important;padding-bottom:18px!important;min-height:0!important} .fx-cover{min-height:0!important;display:block} .fx-cover .pg-hero-bg,.fx-cover .pg-hero-sc,.fx-cover:before,.fx-cover:after{display:none!important} .fx-band>img,.fx-aurora>img,.fx-begin>img,.fx-jband>img{display:none!important} .fx-band:after,.fx-aurora:after,.fx-begin:after,.fx-jband:after{display:none!important} .fx-cover .pg-hero-in{padding:0!important;text-align:left} .fx-cover .inner{width:100%!important} .fx-cover-pr{border-color:#999!important} .fx-cover h1,.fx-cover .eb,.fx-cover .pg-hero-s,.fx-cover-line,.fx-cover-pr,.fx-cover-pr b, .fx-eb,.fx-idea-h,.fx-idea-p,.fx-au-p,.fx-au-close,.fx-au-l b,.fx-au-l span, .fx-place b,.fx-place span,.fx-nights-note, .fx-inv-big,.fx-inv-sub,.fx-tbl th,.fx-tbl td,.fx-lists li,.fx-lists h3,.fx-inv-note b,.fx-inv-note p, .fx-inv-fine,.fx-inv-cta p,.fx-begin h2,.fx-begin p.b,.fx-begin-l,.fx-begin-tag,.fx-begin-mk, .fx-begin-mail,.fx-begin-note,.fx-h h2,.fx-h-n,.fx-h-l,.fx-h-r,.fx-map-c,.fx-tbl-l,.fx-inv-l{ color:#000!important;-webkit-text-fill-color:#000} .fx-eb b,.fx-au-l svg{color:#000!important;stroke:#000!important} .fx-tbl th,.fx-tbl td,.fx-h,.fx-lists>div+div,.fx-inv-note,.fx-inv-cta,.fx-au-close{border-color:#999!important} .fx-jband{padding-bottom:18px!important} .fx-chcards{margin-top:18px!important} .fx-btn,.fx-lnk{border:1px solid #666!important;background:none!important;color:#000!important} .fx-q[open]>summary i,.fx-q>summary i{background:none!important;color:#000!important;border-color:#999!important} .fx-q-a{display:block!important} .fx-anchors,.fx-chcards,.fx-stays,.fx-days{break-inside:auto} .fx-day,.fx-chc,.fx-stay,.fx-anchors>div,.fx-q,.fx-ch,.fx-nation{break-inside:avoid} .fx-aurora>img{opacity:0} .fx-route-map{position:static!important;max-height:none!important} .fx-route-map .fx-mapband{max-height:none!important;overflow:visible!important} .fx-mapsvg{overflow:visible!important;max-height:none!important} /* all eight days print, in order, with nothing to unfold */ .fx-days8{display:block!important} .fx-dayc{background:none!important;border-color:#999!important;padding-top:14px!important} .fx-dayc + .fx-dayc{margin-top:14px!important} .fx-dayc-g{grid-template-columns:34% 1fr!important;gap:16px!important;margin-top:10px!important} .fx-dayc-f{border-color:#999!important} .fx-dayc-f img{aspect-ratio:4/3!important} .fx-dayc ul li:before{background:#000!important} /* four stays print stacked, media kept small enough to sit on one page */ .fx-liv,.fx-liv.rev{grid-template-columns:32% 1fr!important;gap:18px!important; padding-top:16px!important;align-items:start} .fx-liv + .fx-liv{margin-top:16px!important} .fx-liv.rev .fx-liv-m{order:0} .fx-liv-m img,.fx-liv-m video{aspect-ratio:4/3!important} .fx-liv-h{font-size:24px!important;margin-top:8px!important} .fx-dayc h3,.fx-dayc-p,.fx-dayc ul li,.fx-dayc-h b,.fx-dayc-h span,.fx-dayc-st i,.fx-dayc-st b, .fx-liv-eb,.fx-liv-h,.fx-liv-nm,.fx-liv-me,.fx-liv-p, .fx-stop b,.fx-stop em,.fx-pay-n,.fx-pay-h,.fx-pay-w,.fx-pay-p{color:#000!important;-webkit-text-fill-color:#000} .fx-pay-s{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:10px!important} .fx-pay-s img{aspect-ratio:2/1!important} .fx-pay{grid-template-columns:1fr 32%!important;gap:18px!important; padding-top:16px!important;align-items:start} .fx-pay + .fx-pay{margin-top:16px!important} .fx-pay-m{order:0} .fx-pay-m img{aspect-ratio:4/3!important} .fx-pay-h{font-size:24px!important;margin-top:6px!important} .fx-calc,.fx-calc-lbl,.fx-calc-opts{display:none!important} .fx-tbl{display:table!important} .fx-dayc,.fx-liv,.fx-pay,.fx-stop{break-inside:avoid} } /* ── video inside the existing frames ────────────────────────────────────── The clip is layered OVER the frame's poster image, never instead of it, so the frame, the print version and the phone version stay exactly as they were. site.js only gives the element a src above 700px. */ .has-v{position:relative} .has-v>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .8s ease;pointer-events:none} .has-v>video.on{opacity:1} .pg-hero-bg .pg-hero-video{object-position:center 44%;opacity:0;transition:opacity 1s ease} .pg-hero-bg .pg-hero-video.on{opacity:1} @media(max-width:700px){.has-v>video,.pg-hero-video{display:none!important}} @media print{.has-v>video,.pg-hero-video{display:none!important}} @media(prefers-reduced-motion:reduce){.has-v>video,.pg-hero-video{display:none!important}} /* ═══ pre-launch QA · 2026-09-23 ═══════════════════════════════════════════ Readability for older readers, phone first. Five type sizes only: 1 page title (the hero h1, unchanged, from site.css) 2 display section titles, stay titles, the price figure 3 title day / chapter / stop titles and short serif lines 4 body every sentence and list item — 17px on a phone 5 label every uppercase label, button and small caption — 15px Secondary text is darker; sections 05 / 07 / 11 sit on a solid ground. */ :root,body{--fx-t2:clamp(26px,3.2vw,40px);--fx-t3:clamp(20px,2vw,24px); --fx-t4:clamp(17px,1.2vw,18px);--fx-t5:15px; --dim:rgba(12,16,24,.86);--faint:rgba(12,16,24,.78); --fxdk-tx:rgba(244,239,230,.94);--fxdk-dim:rgba(244,239,230,.84)} /* 2 · display */ .fx-liv-h,.fx-idea-h,.fx-calc-p{font-size:var(--fx-t2)} /* v1: heading part of the rule above kept for phones only (closing heading 26px at 390 as today); >=821px owned by zel-unify */ @media(max-width:820px){.fx-h h2,.fx-begin h2{font-size:var(--fx-t2)}} .fx-liv-h,.fx-begin h2{line-height:1.15} /* 3 · title */ .fx-dayc h3,.fx-dayc-h b,.fx-stop b,.fx-ch h3,.fx-nation>h3,.fx-spirit-close,.fx-au-close, .fx-cur-q,.fx-inv-cta p,.fx-begin-mk,.fx-sign b,.fx-cover-pr b,.fx-bar-p b, .fx-calc-opts button .n,.fx-drawer a,.fx-idea b,.fx-root b{font-size:var(--fx-t3)} /* 4 · body */ .fx-h-r,.fx-cover-line,.fx-cover .pg-hero-s,.fx-stop span,.fx-fact b,.fx-fact span, .fx-dayc-p,.fx-dayc ul li,.fx-dayc-st b,.fx-liv-nm,.fx-liv-p,.fx-stay-note2, .fx-ch-w,.fx-ch-p,.fx-ch-i,.fx-idea-p,.fx-idea p,.fx-root p, .fx-au-p,.fx-place b,.fx-nights-note,.fx-cur-b p,.fx-cur-lic b,.fx-cur-lic p, .fx-calc-sic,.fx-tbl th,.fx-tbl td,.fx-tbl-2,.fx-inv-fine,.fx-lists li,.fx-inv-note b, .fx-inv-note p,.fx-q>summary,.fx-q-a,.fx-begin p.b,.fx-begin-mail,.fx-begin-note{ font-size:var(--fx-t4)} .fx-h-r,.fx-dayc-p,.fx-dayc ul li,.fx-liv-p,.fx-ch-p,.fx-idea p,.fx-root p,.fx-au-p, .fx-cur-b p,.fx-calc-sic,.fx-inv-fine,.fx-lists li,.fx-inv-note p,.fx-q-a,.fx-begin p.b, .fx-stay-note2,.fx-nights-note,.fx-stop span,.fx-fact span,.fx-idea-p{line-height:1.8} /* 5 · label */ .fx-cover .eb,.fx-cover-pr span,.fx-cover .btn,.fx-btn,.fx-lnk,.fx-h-n,.fx-h-l,.fx-stop-n, .fx-stop em,.fx-dayc-h span,.fx-dayc-st i,.fx-mapband-c span,.fx-liv-eb,.fx-liv-me, .fx-stay-foot,.fx-ch-n,.fx-ch-e,.fx-flag b,.fx-idea span,.fx-root>span,.fx-place span, .fx-cur-l,.fx-sign span,.fx-cur-lic>span,.fx-inv-l,.fx-tbl-l,.fx-tbl caption,.fx-calc-s, .fx-calc-lbl,.fx-calc-opts button,.fx-lists h3,.fx-begin-l,.fx-begin-mk span,.fx-bar-p, .fx-bar .fx-btn,.fx-nav-l a,.fx-lang,.fx-mark span,.fx-drawer .sm, footer .f-links .col b,footer .f-links .col a,footer .f-brand span,footer .f-bottom,.trust p,.trust p b{ font-size:var(--fx-t5)!important} .fx-cover .eb,.fx-cover-pr span,.fx-cover .btn,.fx-btn,.fx-lnk,.fx-h-l,.fx-stop em, .fx-dayc-h span,.fx-dayc-st i,.fx-mapband-c span,.fx-liv-eb,.fx-liv-me,.fx-stay-foot, .fx-ch-n,.fx-ch-e,.fx-flag b,.fx-root>span,.fx-place span,.fx-cur-l,.fx-cur-lic>span, .fx-inv-l,.fx-tbl-l,.fx-tbl caption,.fx-calc-s,.fx-calc-lbl,.fx-calc-opts button, .fx-lists h3,.fx-begin-l,.fx-begin-mk span,.fx-bar .fx-btn,.fx-nav-l a,.fx-lang, .fx-mark span,footer .col b,footer .f-brand span{letter-spacing:.1em;line-height:1.6} .fx-nav-l{gap:clamp(14px,1.6vw,26px)} @media(max-width:1180px){.fx-nav .fx-mark span{display:none}.fx-nav-l{gap:14px}.fx-nav-l a{letter-spacing:.06em}} .fx-ch-e{line-height:1.8} .fx-calc-opts button{display:flex;align-items:baseline;justify-content:center;gap:.35em} .fx-calc-opts button .n{display:inline;line-height:1} /* 2 · section 06: the explanatory text sits 2px under the body size */ .fx-idea p,.fx-root p{font-size:calc(var(--fx-t4) - 2px)} @media(max-width:760px){.fx-idea p,.fx-root p{font-size:16px}} /* secondary text: darker on paper, lighter on the dark ground */ .fx-s.dk .fx-h-l,.fx-band .fx-h-l,.fx-aurora .fx-h-l,.fx-begin .fx-h-l, .fx-s.dk .fx-h-n,.fx-band .fx-h-n,.fx-aurora .fx-h-n,.fx-begin .fx-h-n{color:rgba(244,239,230,.84)} .fx-s.dk .fx-h-r,.fx-band .fx-h-r,.fx-aurora .fx-h-r,.fx-begin .fx-h-r{color:rgba(244,239,230,.9)} .fx-mapband-c span,.fx-mapband-r{color:rgba(244,239,230,.84)} .fx-mapsvg>svg>text{fill:rgba(244,239,230,.78)} .fx-idea-p,.fx-au-p,.fx-begin p.b{color:rgba(244,239,230,.94)} .fx-begin-mail{color:rgba(244,239,230,.94)} .fx-begin-note,.fx-begin-mk span,.fx-begin-l{color:rgba(244,239,230,.84)} .fx-bar-p{color:rgba(244,239,230,.86)} .fx-lists .no li i{color:rgba(244,239,230,.84)} .fx-cover .pg-hero-s,.fx-cover-line{color:rgba(244,239,230,.94)} footer .f-links .col b,footer .f-bottom{color:rgba(244,239,230,.78)!important} footer .f-links .col a{color:rgba(244,239,230,.9)!important} .trust p{color:var(--dim)!important} .fx-drawer .sm{color:rgba(244,239,230,.84)} /* 2 travellers: stated on its own line under the ladder */ .fx-tbl-2{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:16px 0 0; padding:13px 16px;border:1px solid var(--fxdk-ln);color:var(--fxdk-tx)} .fx-tbl-2 b{font-family:var(--s);font-weight:400} .fx-tbl-2 span{font-family:var(--d);color:#fff} /* 05 / 07 / 11 keep their photographs. On a wide screen the type sits on the dark side of the existing veil, a touch deeper where the text column is; on a phone the photograph becomes a band above the text, and the text sits on the solid ground below it — never over the picture. */ .fx-band:after{background:linear-gradient(100deg,rgba(9,13,21,.94) 0%,rgba(9,13,21,.86) 46%,rgba(9,13,21,.38) 80%,rgba(9,13,21,.46) 100%)} .fx-aurora:after{background:linear-gradient(95deg,rgba(9,13,21,.94) 0%,rgba(9,13,21,.86) 48%,rgba(9,13,21,.42) 100%)} .fx-begin:after{background:linear-gradient(95deg,rgba(9,13,21,.95) 0%,rgba(9,13,21,.84) 48%,rgba(9,13,21,.40) 100%)} @media(max-width:760px){ .fx-band,.fx-aurora,.fx-begin{display:block;min-height:0;background:var(--fxdk)} .fx-band>img,.fx-aurora>img,.fx-begin>img{position:relative;inset:auto;display:block;width:100%; height:auto;aspect-ratio:16/10;object-fit:cover;opacity:1} .fx-band:after,.fx-aurora:after,.fx-begin:after{display:none} .fx-band .fxw,.fx-aurora .fxw,.fx-begin .fxw{padding-top:36px} } /* chapters 02 and 04 stack on narrow screens like 01 and 03: image, then text */ @media(max-width:820px){ .fx-split.tall,.fx-split.tall.rev,.fx-split.rev{grid-template-columns:1fr} .fx-split.tall.rev>.fx-split-i{order:0} } /* the phone bar keeps its three parts on one row at 15px */ @media(max-width:700px){ .fx-bar{gap:12px} .fx-bar-p{flex:1 1 auto;min-width:0;letter-spacing:0;line-height:1.35} .fx-bar-p b{white-space:nowrap} .fx-bar-a{flex:0 0 auto;gap:8px} .fx-bar .fx-btn{padding:12px 13px;letter-spacing:.02em;text-transform:none;white-space:nowrap} } @media print{ .fx-tbl-2{border-color:#999!important;color:#000!important} .fx-tbl-2 span,.fx-tbl-2 b{color:#000!important} img{break-inside:avoid} .fx-h{break-after:avoid} .fx-split,.fx-split.rev,.fx-split.tall,.fx-split.tall.rev{grid-template-columns:32% 1fr!important; gap:18px!important;align-items:start!important} .fx-split.rev>.fx-split-i,.fx-split.tall.rev>.fx-split-i{order:0!important} .fx-split-i img,.fx-split.tall .fx-split-i img{aspect-ratio:3/4!important} .fx-pair{margin-top:12px!important} .fx-pair img{aspect-ratio:2/1!important} .fx-ch{break-inside:auto!important} .fx-split,.fx-pair{break-inside:avoid} .fx-ch+.fx-ch{margin-top:18px!important} .fx-cur-img img{max-height:90mm;width:auto;object-fit:cover} } /* ═══ sales-conversion blocks · 2026-09-23 ══════════════════════════════════ Compact information blocks inside existing sections. Same five type sizes: block label = label (5), item name = body size in the serif, text = body. */ .fx-when,.fx-care,.fx-meals,.fx-two{margin-top:clamp(28px,3.2vw,40px);padding-top:clamp(20px,2.4vw,28px); border-top:1px solid var(--fxln)} .fx-when h3,.fx-care h3,.fx-meals h3,.fx-two h3{margin:0;font-family:var(--s);font-weight:500; font-size:var(--fx-t5);letter-spacing:.1em;text-transform:uppercase;color:var(--fxgt)} .fx-when-g,.fx-care-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px);margin-top:16px} .fx-when-g b,.fx-care-g b{display:block;font-family:var(--d);font-weight:500;font-size:var(--fx-t4); color:var(--ink);line-height:1.45} .fx-when-g p,.fx-care-g p{margin-top:6px;font-size:var(--fx-t4);line-height:1.8;color:var(--dim)} .fx-when-n,.fx-care-n{margin-top:16px;font-size:var(--fx-t4);line-height:1.8;color:var(--dim);max-width:70ch} @media(max-width:900px){.fx-when-g,.fx-care-g{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.fx-when-g,.fx-care-g{grid-template-columns:1fr}} /* 2026-09-27 · "when to go" now sits at the end of 07 aurora, on the dark ground */ .fx-aurora .fx-when{border-top-color:rgba(244,239,230,.22)} .fx-aurora .fx-when h3{color:var(--fxg)} .fx-aurora .fx-when-g b{color:#fff} .fx-aurora .fx-when-g p,.fx-aurora .fx-when-n{color:var(--fxdk-dim)} /* on the dark investment ground */ .fx-s.dk .fx-meals,.fx-s.dk .fx-two{border-top-color:var(--fxdk-ln)} .fx-s.dk .fx-meals h3,.fx-s.dk .fx-two h3{color:var(--fxg)} .fx-two{padding:clamp(18px,2.2vw,24px);border:1px solid var(--fxdk-ln);margin-top:18px} .fx-two p{margin-top:10px;font-size:var(--fx-t4);line-height:1.8;color:var(--fxdk-tx);max-width:62ch} .fx-two .fx-btn{margin-top:16px} .fx-meals ul{list-style:none;margin:14px 0 0;padding:0} .fx-meals li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--fxdk-ln); font-size:var(--fx-t4);line-height:1.7;color:var(--fxdk-tx)} .fx-meals li b{font-family:var(--d);font-weight:500;color:#fff} .fx-meals p{margin-top:12px;font-size:var(--fx-t4);line-height:1.8;color:var(--fxdk-dim)} /* day 01 arrival note */ .fx-dayc-note{margin:clamp(14px,1.6vw,18px) 0 0;padding:12px 16px;border-left:2px solid var(--fxg); background:rgba(244,239,230,.05);font-size:var(--fx-t4);line-height:1.8;color:var(--fxdk-tx)} .fx-dayc-note b{display:block;font-family:var(--s);font-weight:500;font-size:var(--fx-t5); letter-spacing:.1em;text-transform:uppercase;color:var(--fxg);margin-bottom:4px} @media print{ .fx-two,.fx-meals li,.fx-dayc-note{border-color:#999!important;background:none!important} .fx-two p,.fx-two h3,.fx-meals h3,.fx-meals li,.fx-meals li b,.fx-meals p,.fx-dayc-note,.fx-dayc-note b, .fx-when h3,.fx-care h3{color:#000!important;-webkit-text-fill-color:#000} .fx-when,.fx-care,.fx-meals,.fx-two{break-inside:avoid} } /* --- [B] zel-editorial.css tokens + rules (h2 size removed, see below) --- */ /* ZeL Editorial Design System · shared layer · 2026-10-04 One skin for two architectures: · Product Page (collections/*, body.zds.zds-product) keeps its commercial architecture — glance → idea → route → worlds → stays → curator → aurora → why → investment → questions → begin; · Case Study (work/*, body.zds.zds-case) keeps its editorial architecture — brief → idea → chapters → design logic → close → enquiry. What they share is defined here: typography, spacing, colour, navigation, buttons, image treatment, chapter language, CTA styling, footer, trust treatment and responsive behaviour. Each page keeps its own component vocabulary (.fx-* on product pages, .c8/.cs/.sh on case studies); this file maps both onto the same tokens. Loaded last. Spec: project doc zel-editorial-design-system. */ :root{ /* colour (locked Editorial direction, 2026-10-02) */ --zds-paper:#FAF9F6; --zds-panel:#F4F2EE; --zds-ink:#3A3A3A; --zds-ink-2:#55524C; --zds-muted:#64615A; --zds-line:#D9D4CA; --zds-zel:#4BA8D1; --zds-zel-text:#26769C; --zds-gold:#C9A96B; --zds-night:#0F2A44; /* type */ --zds-serif:"Lora","Noto Serif SC",Georgia,serif; --zds-sans:"Jost","Noto Sans SC",system-ui,sans-serif; --zds-num:clamp(44px,4.6vw,64px); /* chapter number */ --zds-h2:clamp(30px,3.2vw,46px); /* chapter title */ --zds-lede:clamp(18px,1.5vw,21px); /* chapter lede, serif */ --zds-h3:clamp(24px,2.1vw,30px); --zds-body:18px; --zds-body-lh:1.8; /* running text: one size, one rhythm, everywhere */ --zds-label:15px; /* the smallest type on any page */ --zds-quote:clamp(19px,1.6vw,22px); /* space */ --zds-sec:clamp(72px,8vw,120px); /* section top / bottom */ --zds-head-gap:clamp(28px,3.4vw,48px); /* chapter head → content */ --zds-nav:84px; --zds-nav-m:72px; } /* ---------- base ---------- */ body.zds{background:var(--zds-paper);color:var(--zds-ink)} /* ---------- navigation: one header, two link sets ---------- Case study: the site header (.hdr, editorial-shell.css). Product page: the page header (.fx-nav) keeps its in-page chapters (commercial), but wears the same bar: same height, mark, type, button and white solid state. */ body.zds .fx-nav{min-height:var(--zds-nav);padding-top:0!important;padding-bottom:0!important;align-items:center} body.zds .fx-nav.solid{background:#fff!important;backdrop-filter:none;box-shadow:0 1px 0 var(--zds-line);border-color:transparent} body.zds .fx-mark b{font:500 22px/1 var(--zds-serif)!important;letter-spacing:.01em;color:var(--zds-zel)!important} body.zds .fx-mark b i{color:#fff;font-weight:500} body.zds .fx-nav.solid .fx-mark b i{color:var(--zds-night)} body.zds .fx-mark span{display:none!important} body.zds .fx-nav-l a{font:500 16px/1 var(--zds-sans)!important;letter-spacing:.14em!important;text-transform:uppercase;padding:8px 0;color:#fff!important} body.zds .fx-nav.solid .fx-nav-l a{color:var(--zds-night)!important} body.zds .fx-nav-l a:hover{border-bottom-color:currentColor!important} body.zds .fx-lang{font:500 16px/1 var(--zds-sans);letter-spacing:.12em} body.zds .fx-nav .fx-btn{min-height:48px;padding:0 24px} body.zds .fx-nav:not(.solid) .fx-btn.gold{background:transparent!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important} body.zds .fx-nav:not(.solid) .fx-btn.gold:hover{background:var(--zds-zel)!important;border-color:var(--zds-zel)!important} body.zds.zh .fx-nav-l a{letter-spacing:.1em!important} @media(min-width:1081px){ body.zds .fx-nav-l,body.zds .fx-lang{display:flex!important} body.zds .fx-nav .fx-btn{display:inline-flex!important} body.zds .fx-burger{display:none!important} } @media(max-width:1080px){ body.zds .fx-nav{min-height:var(--zds-nav-m)} body.zds .fx-nav-l,body.zds .fx-lang{display:none!important} body.zds .fx-burger{display:flex!important} body.zds .fx-burger span{background:currentColor} body.zds .fx-nav{color:#fff} body.zds .fx-nav.solid{color:var(--zds-night)} } @media(max-width:480px){body.zds .fx-nav .fx-btn{display:none!important}} /* ---------- chapter language: number · title · lede ---------- */ body.zds .fx-h-n,body.zds .sh-n{font:400 var(--zds-num)/1 var(--zds-serif)!important;letter-spacing:0!important;color:var(--zds-zel)!important;text-transform:none} body.zds .fx-h-n:after{display:none!important} /* SECTION HEADING · face only. Size is owned by L2 (zel-unify, ≥821px) — see 09 §2–3 and 12-decision 02 (A+C). */ body.zds .fx-h h2,body.zds .sh h2{font-weight:400!important;font-style:normal!important;font-variant:normal!important;font-stretch:normal!important;line-height:1.15!important;font-family:var(--zds-serif)!important;letter-spacing:0!important;text-transform:none!important} /* SECTION HEADING · phone size (L2 has no rule below 821px; keeps today's 30px) */ @media(max-width:820px){body.zds .fx-h h2,body.zds .sh h2{font-size:30px}} body.zds .fx-h-l,body.zds .sh-l{font:400 var(--zds-lede)/1.6 var(--zds-serif)!important;letter-spacing:0!important;text-transform:none!important;color:var(--zds-ink-2)} body.zds .fx-band .fx-h-l,body.zds .fx-aurora .fx-h-l,body.zds .fx-begin .fx-h-l,body.zds .fx-jband .fx-h-l,body.zds .c8-dk .sh-l{color:rgba(255,255,255,.82)!important} body.zds .fx-h-r{font:400 var(--zds-body)/var(--zds-body-lh) var(--zds-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--zds-ink)} body.zds .fx-h{margin-bottom:var(--zds-head-gap)} /* ---------- running text: one size and one rhythm ---------- */ body.zds .dd-p,body.zds .fx-liv-p,body.zds .dbd4 .xt p,body.zds .dbd8 .dm p.dm-p,body.zds .fx-cur-b p, body.zds .fx-q-a p,body.zds .fx-begin p.b,body.zds .fx-pay-p,body.zds .fx-inv-note p, body.zds .cs-p,body.zds .c8-brief p,body.zds .c8-lg p,body.zds .c8 .lead{ font-size:var(--zds-body)!important;line-height:var(--zds-body-lh)!important;font-weight:400!important} body.zds .dd-p,body.zds .fx-liv-p,body.zds .dbd4 .xt p,body.zds .dbd8 .dm p.dm-p,body.zds .fx-cur-b p,body.zds .fx-q-a p, body.zds .cs-p,body.zds .c8-brief p,body.zds .c8-lg p{color:var(--zds-ink)!important} /* ---------- labels: 15px, never smaller; one key label per block in ZeL Blue text tone ---------- */ body.zds .rs-k,body.zds .fx-liv-eb,body.zds .fx-liv-me,body.zds .dbd .rs-dec span,body.zds .cs-dd small, body.zds .rt8-k,body.zds .fx-when h3,body.zds .fx-meals h3,body.zds .fx-inv-l~* .fx-calc-lbl{font-size:var(--zds-label)!important} body.zds .dd-k,body.zds .dbd8 .dm-k,body.zds .cs-side small{font:500 var(--zds-label)/1.4 var(--zds-sans)!important;letter-spacing:.08em!important;color:var(--zds-zel-text)!important} body.zds:not(.zh) .dd-k,body.zds:not(.zh) .dbd8 .dm-k,body.zds:not(.zh) .cs-side small{letter-spacing:.12em!important;text-transform:uppercase} /* ---------- design decision: the same quote on both templates ---------- */ body.zds .dbd .rs-dec,body.zds .cs-dd{border-left:2px solid var(--zds-gold)!important;padding:2px 0 2px 18px!important;background:none!important} body.zds .dbd .rs-dec,body.zds .cs-dd p{font:400 var(--zds-quote)/1.6 var(--zds-serif)!important;color:var(--zds-ink)!important} body.zds .dbd .rs-dec span,body.zds .cs-dd small{display:block;margin-bottom:6px;font:500 var(--zds-label)/1.3 var(--zds-sans)!important;letter-spacing:.08em!important;color:var(--zds-muted)!important;text-transform:none!important} /* ---------- buttons: one system ---------- */ body.zds .fx-btn,body.zds .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px!important; font:500 16px/1 var(--zds-sans)!important;letter-spacing:.14em!important;text-transform:uppercase;border-radius:0!important;border-width:1px;transition:background .25s,border-color .25s,color .25s} body.zds.zh .fx-btn,body.zds.zh .btn{letter-spacing:.06em!important} body.zds .fx-btn.gold,body.zds .btn.pri{background:var(--zds-zel)!important;border-color:var(--zds-zel)!important;color:#fff!important} body.zds .fx-btn.gold:hover,body.zds .btn.pri:hover{background:var(--zds-night)!important;border-color:var(--zds-night)!important} body.zds .fx-nav .fx-btn{min-height:48px;padding:0 24px!important} @media(max-width:480px){body.zds .fx-btn,body.zds .btn{padding:0 18px!important;letter-spacing:.08em!important}} /* ---------- image treatment: square corners, cover, captions in muted 15px ---------- */ body.zds section img{border-radius:0} body.zds figcaption,body.zds .dbd4 .xc span,body.zds .cs-pair figcaption,body.zds .cap{font:400 15px/1.5 var(--zds-sans);color:var(--zds-muted)} /* ---------- spacing ---------- */ body.zds .fx-s,body.zds section.c8{padding-top:var(--zds-sec)!important;padding-bottom:var(--zds-sec)!important} /* ---------- trust: one strip above the footer, one line in the footer ---------- */ body.zds .trust{background:var(--zds-paper);border-top:1px solid var(--zds-line);padding:26px 0!important;text-align:center} body.zds .trust p{font:400 16px/1.6 var(--zds-sans)!important;color:var(--zds-ink-2)!important;margin:0} body.zds .trust p b{color:var(--zds-ink)!important;font-weight:500} /* ---------- footer: Deep Navy, the site footer on every template (footer.ef, editorial-shell.css) ---------- */ body.zds footer.ef{background:var(--zds-night)!important} body.zds footer.ef .f-brand b{font:500 26px/1.2 var(--zds-serif)!important;color:#fff!important} body.zds footer.ef .f-brand b span{display:inline!important;font:inherit!important;letter-spacing:inherit!important;text-transform:none!important;color:var(--zds-zel)!important;margin:0!important} /* ---------- WhatsApp: one float ---------- */ body.zds .wa,body.zds .zwa{right:22px;bottom:22px;width:58px;height:58px} @media(max-width:600px){body.zds .wa,body.zds .zwa{right:16px;bottom:16px;width:54px;height:54px}} /* ---------- responsive: one set of breakpoints (1080 navigation · 900 two-column → one · 480 small phones) ---------- */ @media(max-width:900px){body.zds{--zds-body:17.5px}} @media print{ body.zds .fx-nav,body.zds .wa,body.zds .zwa{display:none!important} body.zds footer.ef{background:none!important;color:#000} } /* secondary buttons: outline — white on photographs, ink on paper (one primary per group) */ body.zds .fx-btn.ghost,body.zds .fx-btn:not(.gold):not(.wa){background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.85)!important} body.zds .fx-s:not(.dk) .fx-btn.ghost,body.zds .fx-inv .fx-btn.ghost{color:var(--zds-ink)!important;border-color:var(--zds-ink)!important} body.zds .fx-btn.ghost:hover,body.zds .fx-btn:not(.gold):not(.wa):hover{background:#fff!important;color:var(--zds-night)!important} body.zds .btn.line{background:transparent!important;color:var(--zds-ink)!important;border:1px solid var(--zds-ink)!important} /* product hero: "see the journey" scrolls the page, so it is the secondary; the enquiry stays primary */ body.zds .fx-cover-cta a[href^="#"]{background:transparent!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important} body.zds .fx-cover-cta a[href^="#"]:hover{background:#fff!important;color:var(--zds-night)!important} /* --- [C] day-by-day (block f9b340ec, 12 pages) --- */ /* F1 方案 Y — Owner 2026-10-23 22:33 批准：逐日正文 .dd-p 中英同值，正文节奏 token 只在逐日模块内重定义（1.8 → 1.62，−10%）。 中文在逐日模块内覆盖 10-12 的 1.8 规则；#route 之外一切不变。证据 drafts/stop-loss-2026-10-19/22、26、28。 */ #route .dd{--zds-body-lh:1.62} /* ===== day-by-day sample (2026-10-04) — Editorial tokens ===== */ #route.dbd{background:#FAF9F6;color:#3A3A3A} #route.dbd .fx-h h2,#route.dbd .fx-h-l,#route.dbd .fx-h-r{color:#3A3A3A} .dbd .ov{margin-top:clamp(28px,3vw,44px)} .dbd .ov-facts{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 28px;padding:18px 0;border-top:1px solid #D9D4CA;border-bottom:1px solid #D9D4CA;margin-bottom:28px} .dbd .ov-facts span{font:400 clamp(22px,2vw,26px)/1.3 Lora,Georgia,serif} .dbd .ov-dl{font:500 16px/1 Jost,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#3A3A3A;border-bottom:1px solid #4BA8D1;padding-bottom:6px;text-decoration:none} .dbd .ov-g{display:block;background:#0F2A44} .dbd .fx-sea{fill:#0F2A44} .dbd .ov-idx ol{columns:2;column-gap:clamp(28px,3vw,48px)} .dbd .ov-idx li{break-inside:avoid} .dbd .ov-map svg{display:block;width:100%;height:auto} .dbd .ov-idx{background:#F4F2EE;padding:clamp(22px,2.4vw,34px)} .dbd .ov-k{font:500 16px/1.4 Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#64615A;margin:0 0 12px} .dbd .ov-idx ol{list-style:none;margin:0;padding:0} .dbd .ov-idx li a{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid #D9D4CA;text-decoration:none;color:#3A3A3A;font:400 17px/1.4 Jost,system-ui,sans-serif} .dbd .ov-idx li a b{font-weight:500;color:#26769C} .dbd .ov-idx li a:hover span{text-decoration:underline;text-decoration-color:#4BA8D1} .dbd .ov-hint{margin:12px 0 0;font:400 15px/1.5 Jost,system-ui,sans-serif;color:#64615A} /* day row */ .dbd .dd{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,3vw,44px);padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid #D9D4CA;scroll-margin-top:100px} .dbd .dd.np{grid-template-columns:1fr} .dbd .dd-f{margin:0;aspect-ratio:4/3;overflow:hidden;background:#ECE9E3} .dbd .dd-f img{width:100%;height:100%;object-fit:cover;display:block} .dbd .dd-b>*{margin:0} .dbd .dd-k{font:500 16px/1 Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#26769C} .dbd .dd-r{margin-top:10px!important;font:400 clamp(24px,2.1vw,30px)/1.25 Lora,Georgia,serif;color:#3A3A3A} .dbd .dd-t{margin-top:6px!important;font:500 18px/1.5 Jost,system-ui,sans-serif;color:#55524C} .dbd .dd-p{margin-top:12px!important;font:400 18px/1.7 Jost,system-ui,sans-serif;color:#3A3A3A;max-width:62ch} .dbd .dd-l{list-style:none;padding:0;margin-top:12px!important;display:flex;flex-wrap:wrap;gap:4px 0;font:400 17px/1.6 Jost,system-ui,sans-serif;color:#55524C;max-width:62ch} .dbd .dd-l li:not(:last-child)::after{content:"·";color:#C9A96B;margin:0 10px;font-weight:600} .dbd .dd-note{margin-top:12px!important;font:400 16px/1.6 Jost,system-ui,sans-serif;color:#55524C;padding-left:14px;border-left:2px solid #C9A96B;max-width:62ch} .dbd .dd-note b{font-weight:500;color:#3A3A3A} .dbd .dd-s{margin-top:14px!important;font:400 18px/1.4 Lora,Georgia,serif;color:#3A3A3A} .dbd .dd-s span{display:inline-block;min-width:84px;margin-right:8px;font:500 15px/1 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#64615A} html[lang^="zh"] .dbd .dd-k,html[lang^="zh"] .dbd .ov-k,html[lang^="zh"] .dbd .dd-s span{letter-spacing:.08em} @media(max-width:820px){ .dbd .ov-idx ol{columns:1} .dbd .dd-f{aspect-ratio:2/1} .dbd .dd{grid-template-columns:1fr;gap:16px} .dbd .ov-idx li a{grid-template-columns:76px 1fr} } @media print{.dbd .ov-dl,.dbd .ov-hint{display:none}.dbd .dd{break-inside:avoid}} .dbd .rc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);margin-top:clamp(28px,3vw,44px);align-items:start} .dbd .rc-l{position:sticky;top:110px} .dbd .rc-map{background:#0F2A44} .dbd .rc-map svg{display:block;width:100%;height:auto} .dbd .rc-map .fx-pin{opacity:.45;transition:opacity .4s} .dbd .rc-map .fx-pin.on{opacity:1} .dbd .rc-facts{margin:16px 0 0;font:400 22px/1.3 Lora,Georgia,serif} .dbd .rc-leg{list-style:none;margin:14px 0 0;padding:0} .dbd .rc-leg li a{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid #D9D4CA;text-decoration:none;color:#64615A;font:400 17px/1.35 Jost,system-ui,sans-serif;transition:color .3s} .dbd .rc-leg li a b{font:400 20px/1 Lora,Georgia,serif;color:inherit} .dbd .rc-leg li a i{font-style:normal;font-size:15px;letter-spacing:.06em} .dbd .rc-leg li.on a{color:#3A3A3A} .dbd .rc-leg li.on a b{color:#4BA8D1} .dbd .rc-leg li.on a span{font-weight:500} .dbd .rs{padding-bottom:clamp(36px,4vw,56px);margin-bottom:clamp(36px,4vw,56px);border-bottom:2px solid #3A3A3A;scroll-margin-top:100px} .dbd .rs:last-child{border-bottom:0} .dbd .rs-h{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:baseline} .dbd .rs-n{font:400 clamp(44px,4vw,60px)/1 Lora,Georgia,serif;color:#4BA8D1;grid-row:1 / span 2} .dbd .rs-how{font:500 15px/1.4 Jost,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#64615A} .dbd .rs-name{font:400 clamp(28px,2.6vw,36px)/1.15 Lora,Georgia,serif;grid-column:2} .dbd .rs-len{grid-column:3;grid-row:1 / span 2;align-self:center;font:500 17px/1 Jost,system-ui,sans-serif;color:#3A3A3A;white-space:nowrap} .dbd .rs-f{margin:20px 0 0;aspect-ratio:16/9;overflow:hidden;background:#ECE9E3} .dbd .rs-f img{width:100%;height:100%;object-fit:cover;display:block} .dbd .rs .dd{grid-template-columns:1fr;padding:22px 0} .dbd .rs .dd:last-of-type{border-bottom:0} .dbd .rs-stay{display:flex;gap:14px;align-items:baseline;background:#F4F2EE;padding:16px 20px;font:400 19px/1.4 Lora,Georgia,serif} .dbd .rs-stay span{font:500 15px/1 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#64615A;white-space:nowrap} .dbd .rc-now{display:none} @media(max-width:900px){ .dbd .rc{grid-template-columns:1fr} .dbd .rc-l{position:static} .dbd .rc-leg{display:none} .dbd .rc-now{display:block;position:sticky;top:67px;z-index:5;background:#FAF9F6;border-bottom:1px solid #D9D4CA;padding:10px 0;font:500 16px/1.3 Jost,system-ui,sans-serif;color:#3A3A3A} .dbd .rc-now b{color:#26769C;font-weight:500;margin-right:8px} .dbd .rs-h{grid-template-columns:auto 1fr} .dbd .rs-len{grid-column:2;grid-row:auto;align-self:start} } /* ---- 03 · map follows the day ---- */ .dbd .rc-map{position:relative} .dbd .rc-map svg{display:block;width:100%;height:auto;aspect-ratio:var(--ard,1000/588);min-height:200px} .dbd .rc-map .fx-trail{display:block!important;stroke:#4BA8D1;stroke-width:3} .dbd .rc-map .fx-pin{opacity:.55} .dbd .rc-map .fx-pin.on{opacity:1} .dbd .rc-map .zm{filter:drop-shadow(0 1px 4px rgba(9,13,21,.6))} .dbd .rc-map .zm .fx-veh-h{fill:#78C6D5;stroke:#fff;stroke-width:2} .dbd .rc-map .zm .fx-veh-i{fill:#0A0F17} .dbd .rc-map .zm-i{display:none}.dbd .rc-map .zm-i.on{display:inline} @media(min-width:901px){.dbd .rc{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.dbd .rcw>.fx-h{position:sticky;z-index:7;background:#FAF9F6;padding-top:18px}.dbd .rc-l.tight .rc-facts,.dbd .rc-l.tight .rc-leg{display:none}} .dbd .rc-day{margin:14px 0 0;padding:14px 18px;background:#F4F2EE;font:400 18px/1.45 Jost,system-ui,sans-serif;color:#3A3A3A} .dbd .rc-day b{display:block;font:500 15px/1 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#26769C;margin-bottom:8px} .dbd .rc-day span{display:block;font:400 22px/1.3 Lora,Georgia,serif} .dbd .rs .dd.cur .dd-k{color:#3A3A3A} .dbd .rs .dd{transition:opacity .3s} @media(max-width:900px){ .dbd .rc-map svg{aspect-ratio:var(--arm,960/436);max-height:none;min-height:0} .dbd .rc-l{position:sticky;top:72px;z-index:6;background:#FAF9F6;padding:8px 0 10px;margin:0 calc(-1 * var(--pad,20px));padding-left:var(--pad,20px);padding-right:var(--pad,20px);border-bottom:1px solid #D9D4CA} .dbd .rc-facts{display:none} .dbd .rc-day{margin-top:8px;padding:8px 12px;font-size:16px} .dbd .rc-day b{display:inline;margin:0 8px 0 0} .dbd .rc-day span{display:inline;font-size:18px} .dbd .rc-now{display:none!important} } @media print{.dbd .rc-l{position:static}.dbd .rc-r{padding-bottom:0!important}.dbd .zm{display:none}} /* 03 · one numbering system: big numerals only for days; a stop is "第 1 站 / Stop 1" in small type */ .dbd .rs-h{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px} .dbd .rs-k{grid-column:1;grid-row:1;font:500 15px/1.4 Jost,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#64615A} .dbd .rs-k i{font-style:normal;color:#64615A} .dbd .rs-name{grid-column:1;grid-row:2} .dbd .rs-len{grid-column:2;grid-row:1 / span 2;align-self:end} html[lang^="zh"] .dbd .rs-k{letter-spacing:.08em} @media(max-width:900px){.dbd .rs-h{grid-template-columns:minmax(0,1fr) auto}.dbd .rs-len{grid-column:2;grid-row:2;align-self:baseline}} /* WhatsApp, always within reach (as on the rest of the site), now that the bottom bar is gone */ .zwa{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22)} .zwa svg{width:30px;height:30px;fill:#fff} @media(max-width:600px){.zwa{right:16px;bottom:16px;width:54px;height:54px}} @media print{.zwa{display:none}} /* ===================== whole-page polish (Zelts 2026-10-04: "top-brand finish, easy reading, my value, trust") ===================== */ /* frozen headings: no fade-up drift while they are held */ #route .rcw>.fx-h.r,.dbd4 .xww>.fx-h.r{transform:none!important} /* 03: map column and day column each sit in their own track so the browser's sticky positioning does all the work */ @media(min-width:901px){.dbd .rlw{display:block;align-self:start}.dbd .rri{position:sticky}} @media(max-width:900px){.dbd .rlw{display:contents}.dbd .rsp{display:none}} @media print{.dbd .rlw{display:block;height:auto!important}.dbd .rri{position:static}.dbd .rsp{display:none}} /* 03: the design decision for each stop, as on Quiet North (fine gold rule, serif) */ .dbd .rs-dec{margin:16px 0 4px;padding:2px 0 2px 18px;border-left:2px solid #C9A96B;font:400 clamp(19px,1.6vw,22px)/1.6 Lora,Georgia,serif;color:#3A3A3A;quotes:none} html[lang^="zh"] .dbd .rs-dec{font-family:"Noto Serif SC",Lora,serif} .dbd .rs-dec span{display:block;margin-bottom:6px;font:500 15px/1.3 Jost,system-ui,sans-serif;letter-spacing:.08em;color:#64615A} /* 03 stop label: one calm line, not shouting capitals */ .dbd .rs-k{text-transform:none;letter-spacing:.03em;font-size:16px} /* 01 at a glance: the stop notes read as text, not footnotes */ #glance .fx-stop span:not(.fx-stop-n){font-size:16.5px;color:#55524C} #glance .fx-stop-n,#glance .fx-stop em{font-size:15px} @media(max-width:700px){ #glance .fx-glance{gap:0} #glance .fx-stop{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;column-gap:8px;align-items:baseline;padding:14px 0!important} #glance .fx-stop:before{display:none} #glance .fx-stop-n{grid-column:1;grid-row:1} #glance .fx-stop b{margin:0;font-size:22px;grid-column:2;grid-row:1} #glance .fx-stop em{margin:0;grid-column:3;grid-row:1;white-space:nowrap} #glance .fx-stop span:not(.fx-stop-n){grid-column:2 / -1;grid-row:2;margin-top:4px} } /* 02 the idea: the paragraph a size up, still on the photograph */ #why .fx-idea-p{font-size:19px;line-height:1.85;color:rgba(255,255,255,.93);max-width:60ch} /* 05 stays: photographs a little smaller (4:3 instead of square) so four stays read as one rhythm */ #stays .fx-liv{grid-template-columns:minmax(0,46%) minmax(0,1fr)!important;align-items:center} #stays .fx-liv.rev{grid-template-columns:minmax(0,1fr) minmax(0,46%)!important} #stays .fx-liv-m img,#stays .fx-liv-m video{aspect-ratio:4/3!important} #stays .fx-liv + .fx-liv{margin-top:clamp(28px,3.4vw,52px)!important;padding-top:clamp(28px,3.4vw,52px)} #stays .fx-liv-p{font-weight:400} @media(max-width:900px){#stays .fx-liv,#stays .fx-liv.rev{grid-template-columns:1fr!important}#stays .fx-liv.rev .fx-liv-m{order:0}} /* 06 the curator: his three lines become the voice of the section; the licence moves to the foot, quieter */ #curator .fx-cur-l{font:400 clamp(24px,2.2vw,30px)/1.5 Lora,Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;color:#3A3A3A!important;margin-bottom:6px} html[lang^="zh"] #curator .fx-cur-l{font-family:"Noto Serif SC",Lora,serif!important} #curator .fx-sign b{font-size:26px} #curator .fx-cur-foot{margin-top:clamp(36px,4vw,56px)} #curator .fx-cur-q{font-size:20px;color:#64615A} #curator .fx-cur-lic>span{font-size:15px} #curator .fx-cur-lic b{font-size:16px} #curator .fx-cur-lic p{font-size:15px;color:#64615A} #curator .fx-care h3{font:400 clamp(22px,2vw,26px)/1.4 Lora,Georgia,serif!important;color:#3A3A3A!important;letter-spacing:0!important;text-transform:none!important} html[lang^="zh"] #curator .fx-care h3{font-family:"Noto Serif SC",Lora,serif!important} #curator .fx-care-g{gap:clamp(20px,2.4vw,36px)!important;margin-top:18px} #curator .fx-care-g>div{padding-top:18px;border-top:1px solid #D9D4CA} #curator .fx-care-g .ci{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#EEF6FA;margin-bottom:14px;font-style:normal} #curator .fx-care-g .ci svg{width:26px;height:26px;fill:none;stroke:#26769C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #curator .fx-care-g b{font-size:18px} @media(max-width:700px){#curator .fx-care-g>div{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start}#curator .fx-care-g .ci{grid-row:1 / span 2;margin:0}#curator .fx-care-g b,#curator .fx-care-g p{grid-column:2}} @media print{#curator .fx-care-g .ci{background:none;border:1px solid #999}} /* 07 aurora: the long paragraph a size up and brighter on the night photograph */ #aurora .fx-au-p{font-size:19px;line-height:1.85;color:rgba(255,255,255,.93)} #aurora .fx-when-g div{font-size:16.5px} /* 08: rows alternate photograph left / right */ /* 07: daylight ring per month */ #aurora .fx-when-g .dl{display:flex;align-items:center;gap:10px;margin:10px 0 8px;font:500 16px/1.4 Jost,system-ui,sans-serif;color:#fff} #aurora .fx-when-g .dl svg{flex:0 0 40px;width:40px;height:40px} #aurora .dl-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:4} #aurora .dl-fg{fill:none;stroke:#4BA8D1;stroke-width:4;stroke-linecap:round} #aurora .dl-sun{fill:#F2C46B} #aurora .fx-when-dl{margin-top:8px;font-size:15px;color:rgba(255,255,255,.7)} @media print{#aurora .fx-when-g .dl{color:#000}#aurora .dl-bg{stroke:#ccc}#aurora .fx-when-dl{color:#333}} /* chapter numbers: large enough to find your place */ .fx-h .fx-h-n{font:400 clamp(26px,2.4vw,34px)/1 Lora,Georgia,serif!important;letter-spacing:.02em!important;color:#4BA8D1!important} /* 08: four design moves as cards, two side by side, photograph on top */ .dbd8 .dms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,52px) clamp(24px,3vw,44px);margin-top:clamp(24px,3vw,40px)} .dbd8 .dms .dm{display:block;padding:0;border:0;margin:0!important} .dbd8 .dms .dm figure{aspect-ratio:3/2} .dbd8 .dms .dm>div{padding-top:18px;border-top:0} @media(max-width:820px){.dbd8 .dms{grid-template-columns:1fr}.dbd8 .dms .dm figure{aspect-ratio:3/2}} @media print{.dbd8 .dms{grid-template-columns:1fr 1fr}.dbd8 .dm{break-inside:avoid}} /* 09 investment: the opening promise is a sentence, not a label */ #investment .fx-inv-l{font:400 clamp(22px,2vw,26px)/1.5 Lora,Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;color:#3A3A3A!important} html[lang^="zh"] #investment .fx-inv-l{font-family:"Noto Serif SC",Lora,serif!important} /* 10 questions: the short answer is on the page; the full answer opens below it */ #questions .fx-q>summary{flex-wrap:wrap} #questions .fx-q>summary .qt{flex:1 1 0;min-width:0} #questions .fx-q-s{display:block;margin-top:6px;font:400 16.5px/1.65 Jost,system-ui,sans-serif;color:#55524C} #questions .fx-q[open] .fx-q-s{color:#3A3A3A} #questions .fx-q.one>summary{cursor:default;pointer-events:none} #questions .fx-q.one>summary i{visibility:hidden} #questions .fx-q.one .fx-q-a{display:none} #investment .fx-meals li b{white-space:nowrap} #investment .fx-meals li{grid-template-columns:120px minmax(0,1fr)!important;column-gap:24px!important} /* 09: the four notes as an even 2 × 2 grid — no orphan in the last row */ #investment .fx-inv-note{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 clamp(28px,3.4vw,56px)!important} #investment .fx-inv-note>div{padding:24px 0 26px!important;border-top:1px solid #D9D4CA;margin:0!important} #investment .fx-inv-note>div:nth-child(-n+2){border-top:0} #investment .fx-inv-note>div:last-child:nth-child(odd){grid-column:1 / -1} #investment .fx-inv-note b{font-size:19px!important} #investment .fx-inv-note p{font-size:16.5px!important;max-width:48ch} @media(max-width:700px){#investment .fx-inv-note{grid-template-columns:1fr!important}#investment .fx-inv-note>div:nth-child(2){border-top:1px solid #D9D4CA}} #investment .fx-inv-note .ni{display:inline-flex;vertical-align:-4px;margin-right:10px;font-style:normal} #investment .fx-inv-note .ni svg{width:24px;height:24px;fill:none;stroke:#4BA8D1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* 11 begin: buttons a touch larger and evenly spaced */ #begin .fx-begin-cta{gap:14px} #begin .fx-begin-cta a{font-size:16px} /* ---- 04 · the photograph changes as the reader scrolls (no arrows, no tapping) ---- Desktop: a large photograph held on the left (about 60%); the four worlds pass on the right, each text held while its three photographs change. Mobile: the photograph held under the nav, the text scrolls below it. */ .dbd4{background:#FAF9F6} .dbd,.dbd4{overflow-x:clip} /* the full-bleed sticky bars on mobile must not widen the page */ .dbd4 .xw{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);margin-top:clamp(28px,3vw,44px);align-items:start} .dbd4 .xs{position:sticky;top:var(--xtop,100px)} .dbd4 .xf{position:relative;height:var(--xh,70vh);background:#0F2A44;overflow:hidden} .dbd4 .xf figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease} .dbd4 .xf figure.on{opacity:1} .dbd4 .xf img{width:100%;height:100%;object-fit:cover;display:block} .dbd4 .xc{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:12px;font:400 17px/1.5 Jost,system-ui,sans-serif;color:#55524C} .dbd4 .xc b{font:500 16px/1 Jost,system-ui,sans-serif;letter-spacing:.12em;color:#3A3A3A;white-space:nowrap} .dbd4 .xt article{min-height:var(--xart,110vh);border-top:1px solid #D9D4CA} .dbd4 .xt article:first-child{border-top:0} .dbd4 .xt .in{position:sticky;top:var(--xtop,100px);padding:22px 0 28px} @media(min-width:901px){.dbd4 .xww>.fx-h{position:sticky;z-index:7;background:#FAF9F6;padding-top:18px}.dbd4 .xt .in{padding:22px 0 0;transition:opacity .35s}.dbd4 .xt article:not(.act) .in{opacity:0}.dbd4 .xt article{border-top:0}} .dbd4 .xt .n{font:400 clamp(30px,2.6vw,38px)/1 Lora,Georgia,serif;color:#4BA8D1} .dbd4 .xt h3{margin:12px 0 0;font:400 clamp(24px,2.1vw,30px)/1.25 Lora,Georgia,serif;color:#3A3A3A} .dbd4 .xt .w{margin:10px 0 0;font:500 17px/1.6 Jost,system-ui,sans-serif;color:#55524C} .dbd4 .xt p{margin:14px 0 0;font:400 18px/1.75 Jost,system-ui,sans-serif;color:#3A3A3A} .dbd4 .xt .pg{display:flex;gap:8px;margin-top:22px} .dbd4 .xt .pg i{width:28px;height:3px;background:#D9D4CA;transition:background .4s} .dbd4 .xt .pg i.on{background:#4BA8D1} @media(prefers-reduced-motion:reduce){.dbd4 .xf figure,.dbd4 .xt .pg i{transition:none}} @media(max-width:900px){ .dbd4 .xw{grid-template-columns:1fr;gap:0} .dbd4 .xs{top:72px;z-index:5;background:#FAF9F6;padding:6px 0 10px;margin:0 calc(-1 * var(--pad,20px));padding-left:var(--pad,20px);padding-right:var(--pad,20px)} .dbd4 .xf{height:32vh;height:32svh} .dbd4 .xc{font-size:16px;margin-top:8px} .dbd4 .xc span{display:none} .dbd4 .xt article{min-height:var(--xartm,110vh)} .dbd4 .xt .in{top:var(--xtm,330px);padding:16px 0 20px} .dbd4 .xt article.long .in{position:static} } @media print{ .dbd4 .xw{display:block} .dbd4 .xs{position:static} .dbd4 .xf{height:auto;display:grid;grid-template-columns:repeat(var(--k,4),1fr);gap:6px;background:none} .dbd4 .xf figure{position:static;opacity:1!important;transition:none;aspect-ratio:4/3} .dbd4 .xc,.dbd4 .xt .pg{display:none} .dbd4 .xt article{min-height:0} .dbd4 .xt .in{position:static} } /* ---- 08 · rows, photograph left ---- */ .dbd8{background:#FAF9F6} .dbd8 .dm{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,3vw,44px);padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid #D9D4CA} .dbd8 .dm:first-of-type{margin-top:clamp(20px,2.4vw,32px);border-top:1px solid #D9D4CA} .dbd8 .dm figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#ECE9E3} .dbd8 .dm img{width:100%;height:100%;object-fit:cover;display:block} .dbd8 .dm-k{margin:0;font:500 16px/1 Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#26769C} .dbd8 .dm h3{margin:10px 0 0;font:400 clamp(24px,2.1vw,30px)/1.25 Lora,Georgia,serif;color:#3A3A3A} .dbd8 .dm-w{margin:6px 0 0;font:500 18px/1.5 Jost,system-ui,sans-serif;color:#55524C} .dbd8 .dm p.dm-p{margin:12px 0 0;font:400 18px/1.7 Jost,system-ui,sans-serif;color:#3A3A3A;max-width:62ch} @media(max-width:820px){.dbd8 .dm{grid-template-columns:1fr;gap:16px}.dbd8 .dm figure{aspect-ratio:2/1}} html[lang^="zh"] .dbd8 .dm-k{letter-spacing:.08em} /* --- [D] patches shared by 12 pages --- */ /* zu-ref-note (474-byte version; Thai pages receive it via T7) */ /* 2026-10-14: reference-itinerary note before the final CTA (page-level; shared CSS untouched) */.zu-ref{padding-top:0!important;padding-bottom:clamp(48px,6vw,80px)!important}.zu-ref-in{max-width:46em;border-top:1px solid rgba(20,28,38,.16);padding-top:clamp(24px,3vw,32px)}.zu-ref-in p{margin:0;font-size:18px;line-height:1.8}.zu-ref-in p+p{margin-top:10px}@media(max-width:820px){.zu-ref-in p{font-size:17.5px}.fx-s.zu-ref{margin-top:-86px}.cp-s.zu-ref{margin-top:-33px}} /* zu-one-header */ /* 2026-10-15: one site header on every page. The product chapter links sit in a bar under the cover. */.zu-chap{position:relative;z-index:2;background:rgba(250,249,246,.96);border-bottom:1px solid var(--zds-line,#D9D4CA)}.zu-chap .fxw{display:flex;gap:30px;align-items:center;overflow-x:auto;min-height:56px;scrollbar-width:none}.zu-chap .fxw::-webkit-scrollbar{display:none}.zu-chap a{font:500 15px/1 Jost,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--zds-ink-2,#45443F);text-decoration:none;white-space:nowrap;padding:8px 0;border-bottom:1px solid transparent}.zu-chap a:hover{color:var(--zds-zel-text,#22749A);border-bottom-color:currentColor}.zu-chap a.go{margin-left:auto;color:var(--zds-zel-text,#22749A)}html[lang^="zh"] .zu-chap a{letter-spacing:.08em}@media(min-width:821px){html.zu .zu-chap a{font-size:calc(14.4px / var(--z))}}@media(max-width:820px){.zu-chap .fxw{padding-left:20px;padding-right:20px}}body.es .fx-s,body.es .fx-begin,body.es section[id]{scroll-margin-top:96px}@media print{.zu-chap{display:none}} /* rh-2026-10-18 */ /* chapter headings: one tighter spacing for all chapters (2026-10-18) */ @media(min-width:901px){ html body .fx-h{padding-bottom:12px!important} html body .fx-h .fx-h-b{margin-top:8px!important} html body .fxw>.fx-h{margin-bottom:32px!important} html body .dbd .rcw>.fx-h,html body .dbd4 .xww>.fx-h{padding-top:8px!important} } @media(max-width:900px){ html body .fx-h{padding-bottom:10px!important;margin-bottom:20px!important} html body .fx-h .fx-h-b{margin-top:8px!important} }