:root{
--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--muted:#52525a;--muted-2:#6e6e73;--line:rgba(0,0,0,.09);
--blue:#0a6fd4;--blue-deep:#0959ab;--blue-soft:#e7f1fc;--sky:#3b9ce8;--orange:#f08a24;--orange-ink:#b35f0a;--orange-soft:#fdf0e1;--accent:#0a6fd4;--green:#31564a;--gold:#b88a4a;--radius:16px;
/* One radius scale, used everywhere. Golden Gate's headline reversal is
consistent corner radius across every window, and noticeably less
curvature than Tahoe. Twenty-seven different values became five. */
--font-text:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
--r-xl:22px;--r-lg:16px;--r-md:12px;--r-sm:8px;--r-pill:980px;
/* Liquid Glass, at Golden Gate's settings: biased to opacity so it stays
legible, with a darkened edge and a brighter specular highlight doing
the separating rather than a drop shadow. */
--glass:rgba(255,255,255,.72);
--glass-strong:rgba(255,255,255,.88);
--glass-dark:rgba(28,28,30,.62);
--glass-blur:saturate(180%) blur(20px);
--edge:rgba(0,0,0,.10);
--spec:rgba(255,255,255,.72);--max:1320px;--gutter:clamp(22px,4.5vw,72px)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--font-text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input,select,textarea{font:inherit}
.shell{width:min(calc(100% - var(--gutter) * 2),var(--max));margin:auto}
.site-nav{position:sticky;top:0;z-index:60;background:rgba(248,248,250,.82);backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid var(--line)}
.nav-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{font-weight:900;font-size:clamp(18px,2vw,29px);letter-spacing:-.05em;line-height:.88}
.site-nav .logo,footer .logo{display:inline-flex;align-items:center;gap:clamp(10px,1.05vw,15px)}
footer .logo{margin-bottom:4px}
.logo-mark{flex:0 0 auto;width:auto;height:2.15em;display:block}
footer .logo-mark{height:2.9em}
.logo-type{display:block}
.logo small{display:block;font-size:8px;letter-spacing:.19em;text-transform:uppercase;margin-top:7px;font-weight:800;color:var(--muted)}
.nav-links{display:flex;gap:24px;align-items:center;font-size:14px}.nav-links a:hover{opacity:.62}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:var(--r-pill);background:var(--blue);color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer}
.pill.light{background:#fff;color:var(--blue-deep)}.pill.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(10px)}
.hero{padding:22px 0 0}.hero-card{min-height:78vh;border-radius:var(--r-xl);overflow:hidden;position:relative;display:grid;align-items:end;color:#fff;background-position:center;background-size:cover}
.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 26%,rgba(0,0,0,.76))}
.hero-content{position:relative;z-index:2;padding:clamp(32px,6vw,84px);max-width:1050px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(56px,9vw,126px);line-height:.87;letter-spacing:0;margin-bottom:25px}
.hero p{font-size:clamp(18px,2.1vw,28px);line-height:1.3;max-width:800px;color:rgba(255,255,255,.88)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.section{padding:120px 0}.section.tight{padding-top:50px}.white{background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:36px}
.section-head h2,.display{font-size:clamp(40px,5.2vw,72px);line-height:.98;letter-spacing:0;margin-bottom:0}
.section-head p{max-width:540px;color:var(--muted);font-size:18px;margin-bottom:2px}
.lead{font-size:clamp(24px,3.2vw,42px);line-height:1.2;letter-spacing:0;max-width:1000px}
.muted{color:var(--muted)}
.finder{margin-top:-44px;position:relative;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(24px);box-shadow:0 25px 70px rgba(0,0,0,.14);border-radius:var(--r-xl);padding:18px;display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px}
.field{background:#f2f2f4;border-radius:var(--r-md);padding:12px 15px}.field label{display:block;font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}.field select,.field input{border:0;background:transparent;width:100%;outline:none;font-weight:650}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:var(--card);border-radius:var(--r-xl);overflow:hidden;transition:.3s;box-shadow:0 1px 0 rgba(0,0,0,.03)}.card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(0,0,0,.1)}
.card-image{height:290px;position:relative;overflow:hidden}.card-image img{height:100%;object-fit:cover;transition:.65s}.card:hover img{transform:scale(1.025)}.badge{position:absolute;top:17px;left:17px;background:rgba(255,255,255,.92);padding:8px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:800}
.card-body{padding:25px}.type{font-size:11px;color:var(--accent);font-weight:850;text-transform:uppercase;letter-spacing:.1em}.card h3{font-size:29px;line-height:1.04;letter-spacing:0;margin:11px 0 12px}.card p{color:var(--muted);line-height:1.45}.meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:18px 0}.meta span,.price span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:4px}.meta strong{font-size:14px}.card-foot{display:flex;justify-content:space-between;align-items:end;gap:15px}.price strong{font-size:21px}.text-link{font-weight:800;font-size:13px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.panel{background:var(--card);border-radius:var(--radius);padding:clamp(32px,5vw,70px)}.portrait{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}.portrait img{height:100%;object-fit:cover}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.value{background:#fff;border-radius:var(--r-lg);padding:30px;min-height:225px}.value b{color:var(--accent);font-size:12px}.value h3{font-size:25px;letter-spacing:0;margin:34px 0 12px}.value p{color:var(--muted);line-height:1.45}
.page-hero{padding:80px 0 55px}.page-hero h1{font-size:clamp(52px,8vw,112px);color:var(--ink);margin-bottom:25px}.page-hero p{font-size:clamp(20px,2.5vw,31px);color:var(--muted);max-width:880px;line-height:1.35}
.tour-hero{min-height:75vh;border-radius:var(--r-xl);position:relative;overflow:hidden;display:grid;align-items:end;color:#fff;background-position:center;background-size:cover}.tour-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.8))}.tour-hero .hero-content{max-width:1100px}
.trip-bar{background:#fff;border-radius:var(--r-lg);padding:24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:-34px;position:relative;z-index:8;box-shadow:0 20px 60px rgba(0,0,0,.1)}.trip-bar span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:60px;align-items:start}.sidebar{position:sticky;top:105px;background:#fff;border-radius:var(--r-lg);padding:25px}.sidebar h3{font-size:25px;margin-bottom:15px}.sidebar .pill{width:100%;margin-top:8px}.sidebar ul{padding-left:18px;color:var(--muted);line-height:1.65}
.itinerary{display:grid;gap:14px}.day{background:#fff;border-radius:var(--r-lg);padding:28px}.day-head{display:flex;gap:20px;align-items:flex-start}.day-num{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:850}.day h3{font-size:26px;letter-spacing:0;margin:3px 0 9px}.day p{color:var(--muted);line-height:1.6;margin-bottom:0}.day .overnight{margin-top:14px;color:var(--ink);font-weight:700;font-size:13px;padding-right:172px}
.faq{display:grid;gap:10px}
.faq details{background:#fff;border-radius:var(--r-lg);border:1px solid transparent;transition:box-shadow .25s,border-color .25s}
.faq details:hover{border-color:var(--line)}
.faq details[open]{border-color:var(--line);box-shadow:0 18px 44px rgba(0,0,0,.07)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 26px;font-weight:720;font-size:17px;letter-spacing:-.012em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.38;transition:transform .28s,opacity .2s}
.faq details[open] summary::after{transform:rotate(-135deg);opacity:.85}
.faq summary:hover::after{opacity:.7}
.faq p{color:var(--muted);line-height:1.62;margin:0;padding:0 26px 25px;max-width:840px}
.faq p+p{padding-top:14px}
@media(max-width:700px){.faq summary{padding:19px 20px;font-size:16px}.faq p{padding:0 20px 21px}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:15px;outline:none}.form-grid textarea{grid-column:1/-1;min-height:140px}.form-grid button{grid-column:1/-1}
.cta-card{border-radius:var(--r-xl);padding:clamp(45px,7vw,90px);text-align:center;color:#fff;background-position:center;background-size:cover;position:relative;overflow:hidden}.cta-card:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}.cta-card>*{position:relative;z-index:2}.cta-card h2{font-size:clamp(46px,7vw,92px);line-height:.95;letter-spacing:0;max-width:900px;margin:0 auto 22px}.cta-card p{max-width:700px;margin:0 auto 30px;color:rgba(255,255,255,.84);font-size:19px}
footer{padding:55px 0;background:#111;color:#fff}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:35px}.footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 15px}.footer-grid a{display:block;color:rgba(255,255,255,.65);margin:9px 0;font-size:14px}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:22px;color:rgba(255,255,255,.45);font-size:12px}
@media(max-width:1050px){.nav-links a:not(.pill){display:none}.cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.values{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split,.content-grid{grid-template-columns:minmax(0,1fr)}.sidebar{position:static}.trip-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){.logo{font-size:17px;gap:11px}.logo-mark{height:2.5em}footer .logo-mark{height:2.8em}.nav-inner{min-height:78px}.logo small{font-size:7px}.hero-card,.tour-hero,.cta-card{border-radius:var(--r-xl)}.hero-content{padding:28px}h1{font-size:54px}.section{padding:82px 0}.section-head{display:block}.section-head p{margin-top:15px}.finder{margin-top:12px;grid-template-columns:minmax(0,1fr)}.cards,.values,.trip-bar,.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid textarea,.form-grid button{grid-column:auto}.card-image{height:250px}.footer-grid{grid-template-columns:minmax(0,1fr)}.day{padding:22px}.day-head{display:block}.day-num{margin-bottom:15px}}
/* V2 additions */
.hero-storyline{max-width:980px}
.hero-storyline .mystic{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:850;margin-bottom:18px;color:rgba(255,255,255,.78)}
.story-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story-note{background:linear-gradient(145deg,#1c1c1e,#2b2b2e);color:#fff;border-radius:var(--r-xl);padding:30px;min-height:250px}
.story-note b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c8aa7c}
.story-note h3{font-size:30px;line-height:1.05;margin:38px 0 13px}
.story-note p{color:rgba(255,255,255,.7);line-height:1.5}
.filter-status{margin:20px 0 30px;color:var(--muted);font-weight:650}
.no-results{display:none;background:#fff;border-radius:var(--r-lg);padding:40px;text-align:center}
.no-results.show{display:block}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.team-card{background:#fff;border-radius:var(--r-xl);overflow:hidden}
.team-card img{height:330px;object-fit:cover}
.team-card .body{padding:24px}
.team-card h3{font-size:28px;margin-bottom:6px}
.team-card .role{color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.team-card p{color:var(--muted);line-height:1.5}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product{background:#fff;border-radius:var(--r-lg);overflow:hidden}
.product img{height:260px;object-fit:cover}
.product .body{padding:20px}
.product h3{font-size:22px;margin-bottom:8px}
.product .price{font-weight:800}
.whatsapp{position:fixed;right:22px;bottom:22px;z-index:70;background:#25D366;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .25s}
.whatsapp:hover{transform:scale(1.06)}
.whatsapp svg{width:26px;height:26px;display:block}
.planner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.planner .full{grid-column:1/-1}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.check input{margin-right:8px}
.gallery-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.gallery-grid img{height:260px;object-fit:cover;border-radius:var(--r-lg)}
.gallery-grid img:first-child{grid-row:span 2;height:534px}
@media(max-width:1000px){
.story-strip,.team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shop-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.check-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gallery-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gallery-grid img:first-child{grid-column:1/-1;height:420px;grid-row:auto}
}
@media(max-width:700px){
.story-strip,.team-grid,.shop-grid,.planner,.check-grid,.gallery-grid{grid-template-columns:minmax(0,1fr)}
.planner .full{grid-column:auto}
.gallery-grid img,.gallery-grid img:first-child{height:270px;grid-column:auto}
}
/* Package 2: Journey collection */
.journey-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:44px 0 70px}.journey-facts>div{background:#fff;border-radius:var(--r-lg);padding:24px}.journey-facts span{display:block;color:var(--accent);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}.journey-facts p{color:var(--muted);line-height:1.55;margin:0}.itinerary-title{font-size:48px;margin-bottom:28px}.rule{border:0;border-top:1px solid var(--line);margin:24px 0}/* The margin here used to be part of this rule, which meant every secondary
button carried a 10px top margin even in a horizontal row - so the row
stretched the primary to 54px and left the secondaries at 44px, sitting
10px lower. Spacing belongs to the stacked contexts, which set it below. */
.secondary{background:var(--blue-soft)!important;color:var(--blue-deep)!important}
.sidebar .secondary,.side-col .secondary{margin-top:10px}
.sidebar-link{display:block;text-align:center;margin-top:18px;font-weight:750;font-size:13px}.card p{min-height:68px}.card-body{display:flex;flex-direction:column;height:calc(100% - 290px)}.card-foot{margin-top:auto}@media(max-width:900px){.journey-facts{grid-template-columns:minmax(0,1fr)}.card-body{height:auto}.card p{min-height:0}}
/* PACKAGE 3 — EXPEDITION PLANNING */
.plan-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.plan-card{background:#fff;border-radius:var(--r-xl);padding:clamp(24px,4vw,44px);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.plan-progress{display:flex;gap:8px;margin-bottom:32px}
.plan-progress span{height:5px;flex:1;border-radius:var(--r-pill);background:#e4e4e6;transition:.25s}
.plan-progress span.active{background:var(--ink)}
.plan-step{display:none}
.plan-step.active{display:block}
.plan-step h2{font-size:clamp(34px,4.5vw,58px);letter-spacing:0;line-height:1;margin-bottom:14px}
.plan-step>p{color:var(--muted);font-size:18px;max-width:720px}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.plan-grid .full{grid-column:1/-1}
.plan-grid input,.plan-grid select,.plan-grid textarea{
width:100%;border:1px solid var(--line);background:#fafafa;border-radius:var(--r-md);
padding:16px;outline:none;color:var(--ink)
}
.plan-grid textarea{min-height:130px;resize:vertical}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{
display:block;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
min-height:100%;background:#fff;cursor:pointer;transition:.2s
}
.choice span strong{display:block;margin-bottom:5px}
.choice span small{color:var(--muted);line-height:1.35;display:block}
.choice input:checked+span{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset;background:#f4f4f5}
.plan-actions{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.plan-actions .pill.secondary{background:var(--blue-soft);color:var(--blue-deep)}
.plan-summary{background:#111;color:#fff;border-radius:var(--r-xl);padding:26px;position:sticky;top:104px}
.plan-summary h3{font-size:27px;margin-bottom:18px}
.summary-row{border-top:1px solid rgba(255,255,255,.12);padding:14px 0}
.summary-row span{display:block;color:rgba(255,255,255,.5);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:4px}
.summary-row strong{font-size:14px;line-height:1.4}
.plan-success{display:none;text-align:center;padding:40px 20px}
.plan-success.show{display:block}
.plan-success .mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:30px;margin:0 auto 22px}
.plan-note{background:#f0eee8;border-radius:var(--r-md);padding:18px;color:#57534e;font-size:14px;line-height:1.5;margin-top:20px}
.response-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.response-card{background:#fff;border-radius:var(--r-lg);padding:24px}
.response-card b{display:block;color:var(--accent);font-size:12px;margin-bottom:22px}
.response-card h3{font-size:24px;margin-bottom:10px}
.response-card p{color:var(--muted);margin:0}
.inline-status{display:none;background:#ecf7ef;color:#215c34;border-radius:var(--r-md);padding:14px 16px;margin-top:15px;font-weight:650}
.inline-status.show{display:block}
@media(max-width:980px){
.plan-shell{grid-template-columns:minmax(0,1fr)}
.plan-summary{position:static}
.choice-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.response-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
.plan-grid,.choice-grid{grid-template-columns:minmax(0,1fr)}
.plan-grid .full{grid-column:auto}
.plan-actions{flex-direction:column-reverse}
.plan-actions .pill{width:100%}
}
/* PACKAGE 4 — FIELD NOTES & DESTINATION LIBRARY */
.library-hero{padding:90px 0 50px}
.library-hero h1{font-size:clamp(54px,8vw,112px);line-height:.9;letter-spacing:0;margin-bottom:24px}
.library-hero p{font-size:clamp(20px,2.6vw,31px);line-height:1.35;color:var(--muted);max-width:850px}
.library-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.library-nav a{padding:10px 15px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);font-size:13px;font-weight:750}
.library-feature{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.library-feature .lead-story{position:relative;min-height:620px;border-radius:var(--r-xl);overflow:hidden;color:#fff}
.library-feature .lead-story img{position:absolute;inset:0;height:100%;object-fit:cover}
.library-feature .lead-story:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.76))}
.library-feature .copy{position:absolute;z-index:2;left:36px;right:36px;bottom:34px}
.library-feature .copy h2{font-size:clamp(40px,5vw,68px);line-height:.98;letter-spacing:0;margin-bottom:14px}
.library-feature .copy p{color:rgba(255,255,255,.82);max-width:650px}
.library-side{display:grid;gap:22px}
.library-side article{background:#fff;border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:150px 1fr;min-height:190px}
.library-side img{height:100%;object-fit:cover}
.library-side .body{padding:22px}
.library-side h3{font-size:25px;line-height:1.05;margin:8px 0 9px}
.library-side p{color:var(--muted);font-size:14px;line-height:1.45;margin:0}
.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.note-card{background:#fff;border-radius:var(--r-lg);overflow:hidden}
.note-card img{height:230px;object-fit:cover}
.note-card .body{padding:23px}
.note-card .label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:850}
.note-card h3{font-size:26px;line-height:1.05;letter-spacing:0;margin:10px 0 11px}
.note-card p{color:var(--muted);line-height:1.45}
.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.topic{background:#111;color:#fff;border-radius:var(--r-lg);padding:28px;min-height:215px}
.topic b{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#cab48f}
.topic h3{font-size:27px;line-height:1.04;margin:42px 0 10px}
.topic p{color:rgba(255,255,255,.66);font-size:14px;line-height:1.45}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:60px;align-items:start}
.article-content{background:#fff;border-radius:var(--r-xl);padding:clamp(28px,5vw,70px)}
.article-content h1{font-size:clamp(48px,7vw,92px);line-height:.94;letter-spacing:0;margin-bottom:26px}
.article-content .dek{font-size:clamp(21px,2.7vw,31px);line-height:1.35;color:var(--muted);margin-bottom:40px}
.article-content h2{font-size:38px;letter-spacing:0;margin-top:56px}
.article-content h3{font-size:27px;letter-spacing:0;margin-top:36px}
.article-content p,.article-content li{font-size:18px;line-height:1.72;color:#454545}
.article-content blockquote{margin:45px 0;padding:0 0 0 25px;border-left:3px solid var(--accent);font-size:28px;line-height:1.35;letter-spacing:-.03em}
.article-image{border-radius:var(--r-lg);overflow:hidden;margin:36px 0}
.article-image img{max-height:650px;object-fit:cover}
.article-meta{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:24px}
.article-aside{position:sticky;top:104px}
.article-aside .sidebar{position:static}
.reading-list{display:grid;gap:12px}
.reading-item{background:#fff;border-radius:var(--r-md);padding:18px}
.reading-item strong{display:block;margin-bottom:5px}
.reading-item span{color:var(--muted);font-size:13px}
.destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.destination-card{position:relative;min-height:480px;border-radius:var(--r-xl);overflow:hidden;color:#fff}
.destination-card img{position:absolute;inset:0;height:100%;object-fit:cover}
.destination-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78))}
.destination-card .copy{position:absolute;z-index:2;left:30px;right:30px;bottom:28px}
.destination-card h3{font-size:38px;line-height:1;letter-spacing:0;margin-bottom:10px}
.destination-card p{color:rgba(255,255,255,.8);margin:0}
.glossary{columns:2;column-gap:28px}
.glossary div{break-inside:avoid;background:#fff;border-radius:var(--r-md);padding:20px;margin:0 0 14px}
.glossary dt{font-weight:800;margin-bottom:6px}
.glossary dd{margin:0;color:var(--muted);line-height:1.5}
@media(max-width:1000px){
.library-feature,.article-layout{grid-template-columns:minmax(0,1fr)}
.article-aside{position:static}
.note-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.topic-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:700px){
.library-side article{grid-template-columns:110px 1fr}
.note-grid,.topic-grid,.destination-grid{grid-template-columns:minmax(0,1fr)}
.glossary{columns:1}
.article-content p,.article-content li{font-size:17px}
}
/* PACKAGE 5 — BRAND ELEVATION */
:root{
--display-tracking:-.035em;
--body-tracking:.006em;
}
body{letter-spacing:var(--body-tracking)}
.logo{letter-spacing:-.025em;line-height:1.02}
.logo small{letter-spacing:.12em;line-height:1.25}
h1,h2,h3,.display{letter-spacing:var(--display-tracking)}
p,li{letter-spacing:.004em}
.nav-links{gap:28px}
.hero-content{max-width:1080px}
.hero-content h1{line-height:.93}
.hero-content p{line-height:1.42;max-width:830px}
.page-image-hero{
width:min(calc(100% - var(--gutter) * 2),var(--max));margin:22px auto 0;
min-height:58vh;border-radius:var(--r-xl);overflow:hidden;position:relative;
display:grid;align-items:end;color:#fff;background-position:center;background-size:cover
}
.page-image-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 28%,rgba(0,0,0,.78))}
.page-image-hero .inner{position:relative;z-index:2;padding:clamp(30px,6vw,78px);max-width:980px}
.page-image-hero h1{font-size:clamp(52px,8vw,108px);line-height:.92;margin-bottom:22px}
.page-image-hero p{font-size:clamp(19px,2.25vw,28px);line-height:1.42;color:rgba(255,255,255,.86);max-width:800px}
.eyebrow-light{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.75);margin-bottom:14px}
.editorial-intro{padding:105px 0}
.editorial-intro .lead{font-size:clamp(30px,4.5vw,58px);line-height:1.12;letter-spacing:0;max-width:1120px}
.moment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.moment{position:relative;min-height:360px;border-radius:var(--r-xl);overflow:hidden;color:#fff}
.moment img{position:absolute;inset:0;height:100%;object-fit:cover}
.moment:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.78))}
.moment .copy{position:absolute;z-index:2;left:25px;right:25px;bottom:23px}
.moment h3{font-size:29px;line-height:1.05;margin-bottom:8px}
.moment p{color:rgba(255,255,255,.8);font-size:14px;margin:0}
.testimonial-section{padding:115px 0;background:#111;color:#fff}
.testimonial-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}
.testimonial-head h2{font-size:clamp(42px,6vw,78px);margin:0}
.testimonial-head p{max-width:520px;color:rgba(255,255,255,.58);margin:0}
.testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.testimonial{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:29px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.testimonial blockquote{font-size:21px;line-height:1.48;letter-spacing:-.015em;margin:0 0 30px}
.testimonial .person strong{display:block}
.testimonial .person span{display:block;color:rgba(255,255,255,.52);font-size:12px;margin-top:4px}
.testimonial .sample{display:inline-block;margin-bottom:20px;color:#d1b98d;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.copy-band{padding:100px 0;background:#fff}
.copy-band .lead{font-size:clamp(29px,4.2vw,54px);line-height:1.15;max-width:1050px}
.copy-band p{max-width:730px;color:var(--muted);font-size:19px}
.journey-opening{padding:100px 0 50px}
.journey-opening .lead{font-size:clamp(31px,4.4vw,58px);line-height:1.14;max-width:1080px}
.journey-opening p{font-size:19px;color:var(--muted);max-width:760px}
.journey-testimonials{margin-top:0}
.photo-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.photo-strip img{height:290px;object-fit:cover;border-radius:var(--r-lg)}
.photo-strip img:first-child{height:594px;grid-row:span 2}
.faq-photo,.legal-photo,.team-photo,.values-photo,.planner-photo{
width:min(calc(100% - var(--gutter) * 2),var(--max));height:48vh;margin:22px auto 70px;
border-radius:var(--r-xl);overflow:hidden
}
.faq-photo img,.legal-photo img,.team-photo img,.values-photo img,.planner-photo img{width:100%;height:100%;object-fit:cover}
.cta-card h2{line-height:1.02}
@media(max-width:1000px){
.moment-grid,.testimonials{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.photo-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.photo-strip img:first-child{grid-column:1/-1;grid-row:auto;height:420px}
}
@media(max-width:700px){
.page-image-hero{width:min(calc(100% - var(--gutter) * 2),var(--max));min-height:66vh;border-radius:var(--r-xl)}
.moment-grid,.testimonials,.photo-strip{grid-template-columns:minmax(0,1fr)}
.testimonial-head{display:block}.testimonial-head p{margin-top:15px}
.photo-strip img,.photo-strip img:first-child{height:270px;grid-column:auto}
.faq-photo,.legal-photo,.team-photo,.values-photo,.planner-photo{width:min(calc(100% - var(--gutter) * 2),var(--max));height:38vh;border-radius:var(--r-xl)}
}
/* Package 8: footer social links */
.footer-social{display:flex;align-items:center;gap:10px;margin-top:28px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;background:rgba(255,255,255,.04);transition:transform .22s ease,background .22s ease,border-color .22s ease}
.footer-social a:hover{transform:translateY(-2px);background:#fff;color:#111;border-color:#fff}
.footer-social a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.footer-social svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.footer-social svg rect,.footer-social svg circle{fill:none}
.footer-social svg .play{fill:#111;stroke:none}
.footer-social a:hover svg .play{fill:#fff}
/* Mobile navigation */
.nav-toggle{display:none;width:46px;height:46px;border:0;border-radius:var(--r-md);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1050px){
.nav-toggle{display:flex}
.nav-inner{gap:12px}
.nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gutter) 22px;background:rgba(248,248,250,.97);backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid var(--line);box-shadow:0 26px 44px rgba(0,0,0,.09);max-height:calc(100vh - 78px);overflow-y:auto}
.nav-links.open{display:flex}
.nav-links a:not(.pill){display:block;padding:15px 2px;border-bottom:1px solid var(--line);font-size:16px;font-weight:650}
.nav-links .pill{margin-top:18px;width:100%}
}
/* Grouped navigation */
.nav-group{position:relative;padding:14px 0}
.nav-trigger{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s}
.nav-trigger:hover,.nav-group:hover .nav-trigger{opacity:.62}
.nav-trigger .chev{width:10px;height:6px;transition:transform .25s;opacity:.55}
.nav-group:hover .nav-trigger .chev,.nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-8px);min-width:238px;background:rgba(255,255,255,.98);backdrop-filter:saturate(180%) blur(22px);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px;box-shadow:0 26px 54px rgba(0,0,0,.14);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu,.nav-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-menu a{display:block;padding:11px 14px;border-radius:var(--r-md);font-size:14px;font-weight:640;white-space:nowrap}
.nav-menu a:hover{background:#f0f0f2;opacity:1}
.nav-links a[aria-current="page"],.nav-trigger[data-current="true"]{opacity:1;font-weight:800}
.nav-menu a[aria-current="page"]{background:#f0f0f2}
@media(max-width:1050px){
.nav-group{padding:0;position:static}
.nav-trigger{display:block;width:100%;text-align:left;padding:16px 2px 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;cursor:default;pointer-events:none;opacity:1}
.nav-trigger .chev{display:none}
.nav-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none;padding:0}
.nav-menu a{padding:14px 2px 14px 16px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px;font-weight:650;white-space:normal}
.nav-menu a:hover{background:none}
}
/* Homepage hero headline — sized so the longer line settles on two lines */
.hero h1{font-size:clamp(40px,7.2vw,100px);line-height:.94;letter-spacing:0;max-width:19ch}
/* Journey inclusions */
.spec-panel h3{font-size:27px;letter-spacing:0;margin:0 0 20px}
.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.5;font-size:15px}
.spec-list li:last-child{border-bottom:0}
.spec-list li:before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--accent);margin-top:8px}
.spec-list.excluded li:before{background:rgba(0,0,0,.16)}
/* Theme pages */
.theme-links{display:flex;flex-wrap:wrap;gap:12px}
.pill.ghost-dark{background:#fff;color:var(--ink);border:1px solid var(--line)}
.pill.ghost-dark:hover{background:#efeff1}
.nav-menu-label{display:block;padding:12px 14px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.nav-menu-label:first-child{padding-top:6px}
@media(max-width:1050px){.nav-menu-label{padding:16px 2px 6px;font-size:10px;color:rgba(0,0,0,.35)}}
/* Cards must remain visible on white sections */
.section.white .value,
.section.white .panel,
.section.white .day,
.section.white .faq details,
.section.white .no-results,
.section.white .sidebar{background:var(--bg)}
.section.white .spec-list li{border-bottom-color:rgba(0,0,0,.07)}
/* Draft notice + placeholder tokens */
.notice{background:#fff;border-radius:var(--r-lg);padding:30px 34px;border-left:4px solid var(--gold)}
.notice b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
.notice p{margin:0;color:var(--muted);line-height:1.55;max-width:820px}
.ph{background:rgba(184,138,74,.16);color:var(--accent);padding:1px 7px;border-radius:6px;font-weight:700;font-size:.92em;white-space:nowrap}
.shop-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1050px){.shop-grid.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){.shop-grid.three{grid-template-columns:minmax(0,1fr)}}
/* ---------- Journey detail tabs ---------- */
.tabs{margin-top:8px}
.tab-bar{display:flex;gap:6px;overflow-x:auto;padding:5px;background:var(--bg);border-radius:var(--r-md);margin-bottom:34px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.section.white .tab-bar{background:#fff}
.tab{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;padding:11px 20px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue);color:#fff}
.js-tabs .tab-panel{display:none}
.js-tabs .tab-panel.active{display:block;animation:tabIn .32s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Where you stay */
.stay-list{list-style:none;padding:0;margin:30px 0 40px;border-top:1px solid var(--line)}
.stay-list li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 2px;border-bottom:1px solid var(--line)}
.stay-name{font-weight:700;letter-spacing:-.015em}
.stay-nights{color:var(--muted);font-size:14px;flex:0 0 auto}
.stay-notes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stay-notes>div{background:var(--card);border-radius:var(--r-lg);padding:24px}
.stay-notes h3,.stay-notes h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--accent);margin:0 0 9px}
.stay-notes p{color:var(--muted);line-height:1.6;margin:0;font-size:15px}
@media(max-width:820px){.stay-notes{grid-template-columns:minmax(0,1fr)}}
/* Included / not included */
.spec-cols{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.section.white .spec-cols{background:var(--bg)}
.spec-col{padding:clamp(26px,3vw,38px)}
.spec-col+.spec-col{border-left:1px solid var(--line)}
.spec-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--accent);margin:0 0 18px}
.spec-col.excluded h3{color:var(--muted)}
.spec-list li{display:flex;gap:13px;padding:10px 0;border:0;color:var(--muted);line-height:1.52;font-size:15px}
.spec-list li:before{content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:var(--green) url("data:image/svg+xml;utf8,") center/11px no-repeat}
.spec-list.excluded li:before{background:rgba(0,0,0,.13) url("data:image/svg+xml;utf8,") center/11px no-repeat}
.spec-foot{margin:22px 0 0;max-width:820px;font-size:14px}
@media(max-width:820px){.spec-cols{grid-template-columns:minmax(0,1fr)}.spec-col+.spec-col{border-left:0;border-top:1px solid var(--line)}}
/* Before you go */
.fact-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 36px}
.fact-row div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px}
.section.white .fact-row div{background:var(--bg)}
.fact-row span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted);margin-bottom:8px}
.fact-row strong{font-size:17px;letter-spacing:-.02em;line-height:1.25}
.panel-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--accent);margin:0 0 14px}
@media(max-width:700px){.fact-row{grid-template-columns:minmax(0,1fr)}}
/* ---------- Journey cards: whole card clickable ---------- */
.card{position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.13)}
.card .card-image img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-image img{transform:scale(1.045)}
.card .card-foot .text-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.card .card-foot .text-link{display:inline-flex;align-items:center;gap:7px;font-weight:750;color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:3px;transition:gap .25s}
.card:hover .card-foot .text-link{gap:12px}
.card:focus-within{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--radius)}
/* FAQ jump nav */
.jump-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.jump-nav a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 20px;font-size:14px;font-weight:700;color:var(--ink);transition:background .2s,transform .2s}
.jump-nav a:after{content:"\2193";opacity:.4;font-weight:600}
.jump-nav a:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.jump-nav a:hover:after{opacity:.7}
html{scroll-behavior:smooth}
.section[id]{scroll-margin-top:112px}
/* ---------- Checkboxes and radios: inline with their label ---------- */
input[type="checkbox"],input[type="radio"]{width:auto;min-width:0;min-height:0;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.plan-grid input[type="checkbox"],.form-grid input[type="checkbox"],
.plan-grid input[type="radio"],.form-grid input[type="radio"]{border:0;background:none;padding:0;border-radius:0}
.check{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:15px 17px;cursor:pointer;line-height:1.45;transition:border-color .2s,background .2s}
.check:hover{border-color:rgba(0,0,0,.22)}
.check input{margin:2px 0 0;width:18px;height:18px}
.check:has(input:checked){border-color:var(--ink);background:#fbfbfc}
.check span{flex:1}
/* ---------- Service enquiry form ---------- */
.enq-form{padding:clamp(28px,4vw,52px)}
.enq-block{margin-top:34px;padding-top:32px;border-top:1px solid var(--line)}
.enq-block h3{font-size:22px;letter-spacing:0;margin:0 0 7px}
.enq-block>.muted{margin:0;font-size:15px;line-height:1.5;max-width:640px}
.enq-block .plan-grid{margin-top:20px}
.js-enq .enq-block[data-block]{display:none}
.js-enq .enq-block[data-block].show{display:block;animation:tabIn .3s ease}
.enq-empty{display:none;margin-top:30px;padding:26px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);text-align:center;font-size:15px}
.js-enq .enq-empty.show{display:block}
/* Hero call to action */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-actions .pill{padding:15px 30px}
@media(max-width:700px){.hero-actions{gap:10px}.hero-actions .pill{width:100%;text-align:center}}
/* Skip to content */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-md) 0;font-weight:700;font-size:14px}
.skip-link:focus{left:0}
/* Labelled form fields */
.field{display:block}
.field.full{grid-column:1/-1}
.field-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%}
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#journey-detail{scroll-margin-top:112px}
/* Form error fallback */
.form-error{display:none;margin-top:18px;padding:16px 20px;border-radius:var(--r-md);background:rgba(122,63,37,.08);border:1px solid rgba(122,63,37,.25);color:var(--accent);font-size:15px;line-height:1.5}
.form-error.show{display:block}
.form-error a{color:var(--accent);text-decoration:underline}
button[type="submit"]:disabled{opacity:.55;cursor:progress}
/* ---------- Pricing tables ---------- */
.price-block{margin-bottom:40px}
.price-block h3{font-size:24px;letter-spacing:0;margin:0 0 8px}
.price-block>.muted{margin:0 0 22px;max-width:720px;line-height:1.55}
.price-sub{font-size:24px;letter-spacing:-.03em;margin:0 0 20px}
.price-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.section.white .price-table{background:var(--bg)}
.price-table th,.price-table td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line);font-size:15px}
.price-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--muted);white-space:nowrap}
.price-table tbody th{font-weight:700;letter-spacing:-.015em}
.price-table tbody td{color:var(--muted)}
.price-table tbody td strong{color:var(--ink);font-size:17px}
.price-table tr:last-child th,.price-table tr:last-child td{border-bottom:0}
.price-table tbody tr:hover{background:rgba(0,0,0,.02)}
.price-note{margin:20px 0 0;max-width:840px;font-size:14px;line-height:1.6}
@media(max-width:700px){.price-table th,.price-table td{padding:13px 15px;font-size:14px}}
/* ---------- Form controls: one consistent shape ---------- */
.form-grid input,.form-grid select,.form-grid textarea,
.plan-grid input,.plan-grid select,.plan-grid textarea{
font:inherit;font-size:15px;color:var(--ink);line-height:1.4;
padding:14px 16px;min-height:52px;border-radius:var(--r-md);
border:1px solid var(--line);background:#fff;width:100%;
transition:border-color .2s,box-shadow .2s;
}
.section.white .form-grid input,.section.white .form-grid select,.section.white .form-grid textarea,
.section.white .plan-grid input,.section.white .plan-grid select,.section.white .plan-grid textarea{background-color:#fff}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
.plan-grid input:focus,.plan-grid select:focus,.plan-grid textarea:focus{
border-color:var(--blue);box-shadow:0 0 0 3px rgba(17,17,17,.08);outline:none
}
.form-grid ::placeholder,.plan-grid ::placeholder{color:rgba(0,0,0,.34)}
/* selects: kill the native control, draw our own chevron */
.form-grid select,.plan-grid select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
padding-right:44px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
.form-grid select:invalid,.plan-grid select:invalid,
.form-grid select option[value=""],.plan-grid select option[value=""]{color:rgba(0,0,0,.42)}
.form-grid textarea,.plan-grid textarea{min-height:150px;resize:vertical;line-height:1.55}
/* the label wrapper is a layout box only */
.field{display:flex;flex-direction:column;gap:0;background:none;border:0;padding:0;margin:0}
.field-label{margin-bottom:9px}
/* Editorial statement band */
.statement-band{max-width:1000px}
.statement-band h2{font-size:clamp(38px,5.2vw,66px);margin:0 0 26px;letter-spacing:0;line-height:1.02}
.statement-band p{font-size:clamp(19px,2.1vw,26px);line-height:1.5;color:rgba(255,255,255,.72);margin:0;max-width:900px}
/* ---------- Checkbox rows: box beside the text, always ---------- */
.form-grid input[type="checkbox"],.plan-grid input[type="checkbox"],
.form-grid input[type="radio"],.plan-grid input[type="radio"],
.check input[type="checkbox"],.check input[type="radio"]{
-webkit-appearance:checkbox;appearance:auto;
width:19px!important;height:19px!important;min-height:0!important;
flex:0 0 19px;padding:0!important;margin:1px 0 0!important;
border-radius:4px;border:0;background:none;accent-color:var(--ink);cursor:pointer
}
.check input[type="radio"]{-webkit-appearance:radio;border-radius:50%}
label.check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:13px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
cursor:pointer;line-height:1.5;font-size:15px;color:var(--muted)}
.section.white label.check{background:var(--bg)}
label.check:hover{border-color:rgba(0,0,0,.24)}
label.check>span{flex:1 1 auto;min-width:0}
label.check:has(input:checked){border-color:var(--ink);color:var(--ink)}
/* ---------- Selects: the chevron is not optional ---------- */
select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
padding-right:46px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,")!important;
background-repeat:no-repeat!important;
background-position:right 17px center!important;
background-size:12px 8px!important;
}
select::-ms-expand{display:none}
/* Team member cards */
.member .portrait{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);margin-bottom:18px}
.member .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.member .role{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--accent);margin-bottom:8px}
.member h3{font-size:23px;letter-spacing:0;margin:0 0 10px}
.member p{line-height:1.55;font-size:15px;margin:0}
.member-meta{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:16px 0 0}
.member-meta li{font-size:12px;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted)}
.member-meta li.region{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ======================================================================
READABILITY PASS
Typography and spacing only. No layout or content changes.
====================================================================== */
/* 1. A real typographic base. Body copy was inheriting the browser default
16px with no line-height, so every paragraph relied on a local rule. */
body{font-size:17px;line-height:1.6}
/* 2. Small text was as low as 7px. Nothing below 11px, and label text gets
the letter-spacing it needs to stay legible at that size. */
.logo small{font-size:11px;letter-spacing:.14em}
@media(max-width:700px){.logo small{font-size:10px;letter-spacing:.12em}}
.meta span,.price span,.trip-bar span{font-size:11px;letter-spacing:.1em}
.value b,.type,.text-link{font-size:12px}
/* 3. Long-form paragraphs were set at 1.45, which is tight for 15-16px text
in a card. 1.6 is the comfortable range for this size. */
.card p,.value p,.member p,.team-card p,.stay-notes p,.spec-list li,.price-table td,.price-table th{line-height:1.6}
.day p{line-height:1.65}
/* 4. Measure. Standalone paragraphs had no upper bound, so on a wide screen a
muted paragraph could run the full 1320px container - roughly 150
characters a line, about twice the comfortable maximum. */
.shell>p,.shell>.muted,.section>.shell>p{max-width:72ch}
.lead{max-width:22em}
.lead+p,.price-note,.spec-foot{max-width:68ch}
.section-head p{max-width:56ch}
.statement-band p{max-width:46ch}
/* 5. Vertical rhythm. 120px top and bottom meant 240px between two adjacent
sections - a full screen of nothing on a laptop. Scaled to the viewport,
and consecutive same-coloured sections no longer double up. */
.section{padding:clamp(64px,7.5vw,104px) 0}
.section.tight{padding-top:clamp(34px,3.6vw,52px)}
.section+.section:not(.white):not(.tight){padding-top:clamp(34px,3.6vw,52px)}
.section-head{margin-bottom:clamp(26px,3vw,40px)}
@media(max-width:700px){.section{padding:64px 0}}
/* 6. The fact bar was five columns at every width above 700px, so between
700 and 1050 the labels wrapped mid-word. */
@media(max-width:1050px){.trip-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media(max-width:640px){.trip-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 7. Dense card grids: a compact variant for lists of short items, so twelve
months do not occupy twelve full-height cards. */
.values.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.values.compact .value{min-height:0;padding:22px 24px}
.values.compact .value h3{font-size:20px;margin:14px 0 8px}
.values.compact .value p{font-size:15px}
@media(max-width:1050px){.values.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.values.compact{grid-template-columns:minmax(0,1fr)}}
/* 8. Keyboard focus was only styled on form controls. */
a:focus-visible,button:focus-visible,summary:focus-visible,.tab:focus-visible{
outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.pill:focus-visible{outline-offset:4px}
.measure{max-width:68ch}
p.muted.measure{max-width:68ch}
/* ---------- Mega menus: columns for the long dropdowns ---------- */
.nav-menu.mega{display:grid;gap:4px 30px;padding:18px 20px 16px;
min-width:0;width:max-content;max-width:min(820px,calc(100vw - 48px))}
.nav-menu.cols-2{grid-template-columns:repeat(2,minmax(190px,1fr))}
.nav-menu.cols-3{grid-template-columns:repeat(3,minmax(180px,1fr))}
.nav-col{display:flex;flex-direction:column;min-width:0}
.nav-menu.mega .nav-menu-label{padding:10px 10px 5px}
.nav-menu.mega .nav-menu-label:first-child{padding-top:0}
.nav-menu.mega a{padding:9px 10px;border-radius:var(--r-sm);white-space:nowrap}
/* keep a wide menu inside the viewport near the ends of the bar */
.nav-group:nth-last-child(2) .nav-menu.mega,
.nav-group:nth-last-child(3) .nav-menu.mega{left:auto;right:0;transform:translateX(0) translateY(-8px)}
.nav-group:nth-last-child(2):hover .nav-menu.mega,
.nav-group:nth-last-child(3):hover .nav-menu.mega,
.nav-group:nth-last-child(2):focus-within .nav-menu.mega,
.nav-group:nth-last-child(3):focus-within .nav-menu.mega,
.nav-group:nth-last-child(2) .nav-menu.mega.open,
.nav-group:nth-last-child(3) .nav-menu.mega.open{transform:translateX(0) translateY(0)}
@media(max-width:1050px){
.nav-menu.mega{display:block;width:auto;max-width:none;padding:0}
.nav-menu.mega a{white-space:normal;border-radius:0}
.nav-menu.mega .nav-menu-label{padding:16px 2px 6px}
.nav-col+.nav-col{margin-top:4px}
}
/* ── Journey gallery ────────────────────────────────────────────────────────
A filmstrip, not a carousel: nothing moves unless the reader moves it.
Scroll-snap does the work, so it is swipeable on a phone, scrollable with a
trackpad, and reachable from the keyboard with no script at all. The arrows
are an enhancement layered on top. */
.tour-gallery{margin:38px 0 40px}
.tg-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:16px}
.tg-head h2{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0}
.tg-nav{display:flex;gap:8px}
.tg-nav button{
width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;
font-size:15px;line-height:1;transition:background .18s,border-color .18s,opacity .18s;
}
.tg-nav button:hover:not(:disabled){background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.tg-nav button:disabled{opacity:.3;cursor:default}
.tg-nav button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tg-track{
display:flex;width:100%;min-width:0;max-width:100%;box-sizing:border-box;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
padding-bottom:4px;
}
.tg-track::-webkit-scrollbar{display:none}
.tg-wrap{position:relative;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.tg-wrap:after{
content:"";position:absolute;right:0;top:0;bottom:26px;width:56px;pointer-events:none;
background:linear-gradient(90deg,rgba(250,249,247,0),var(--bg,#faf9f7));opacity:.9;
}
.tg-wrap.at-end:after{opacity:0;transition:opacity .2s}
.tg-track:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:var(--r-lg)}
.tg-item{flex:0 0 auto;width:352px;scroll-snap-align:start;margin:0}
.tg-item img{
width:100%;height:236px;object-fit:cover;border-radius:var(--r-md);display:block;
background:var(--sand,#efece6);
}
.tg-item figcaption{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media(max-width:700px){
.tg-item{width:274px}
.tg-item img{height:200px}
.tg-nav{display:none} /* a thumb is the better control here */
.tour-gallery{margin:30px 0 32px}
}
@media(prefers-reduced-motion:reduce){.tg-track{scroll-behavior:auto}}
/* ── Colour, used where a person can act ────────────────────────────────────
Blue for anything interactive, saffron for the small labels. Headings,
body text and surfaces stay as they were, which is what keeps it from
turning into a theme. */
.pill:hover{background:var(--blue-deep)}
.pill.light:hover{background:#fff;color:var(--blue)}
.pill.secondary:hover{background:#d6e7fa}
.tab:hover:not([aria-selected="true"]){color:var(--blue);background:var(--blue-soft)}
.text-link:hover{color:var(--blue-deep);border-bottom-color:var(--blue-deep)}
.badge{color:var(--blue)}
/* A hairline of saffron under a section label, so the eye finds the start of
each block without another block of colour. */
.section-head .kicker,.sechead .kicker{color:var(--blue)}
/* ── Marigold ───────────────────────────────────────────────────────────────
Orange is never text on a light ground here — at the brightness that reads
as Mongolian it cannot carry small type. It is a fill instead, with
near-black on it, which is both legible and far more visible. */
.badge{background:var(--orange);color:#1d1d1f;font-weight:850}
.card:hover .badge{background:#ffa03f}
/* A short marigold rule ahead of each section label: the warm note, in a place
where it marks the start of something rather than decorating it. */
/* One warm mark per page section, at the point where the section starts.
Deliberately not on the cards: fifteen of these in a grid would be noise. */
.page-hero .kicker,.section-head .kicker,.sechead .kicker{
color:var(--blue);display:flex;align-items:center;gap:11px;
}
.page-hero .kicker:before,.section-head .kicker:before,.sechead .kicker:before{
content:"";width:24px;height:3px;border-radius:2px;background:var(--orange);flex:0 0 auto;
}
/* Over a photograph the label stays white and unmarked. */
.hero-content .kicker{display:block;color:#fff}
.hero-content .kicker:before{display:none}
.tg-head h2{color:var(--blue)}
.day-num{box-shadow:0 0 0 4px var(--blue-soft)}
/* ══════════════════════════════════════════════════════════════════════════
GOLDEN GATE MATERIAL
macOS 27 keeps Tahoe's Liquid Glass but stops it being ghostly: opacity is
raised so content behind is diffused rather than shown through, and the
separation comes from a darkened edge with a brighter specular highlight
along the top. That pair is the whole signature, and it is what is applied
below. Blur is used only where something genuinely sits over other content.
═══════════════════════════════════════════════════════════════════════ */
/* The two-line material: dark edge, bright specular. */
.card,.journey-facts>div,.day,.sidebar,.panel,.plan-card,.note-card,
.stay-notes>div,.spec-cols,.price-table,.finder,.trip-bar,.tg-item img,
.destination-card,.moment{
box-shadow:inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec),
0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.055);
}
/* Active state reads through a deeper shadow, as window focus now does. */
.card:hover,.destination-card:hover{
box-shadow:inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec),
0 2px 6px rgba(0,0,0,.07), 0 22px 48px rgba(0,0,0,.11);
}
/* The header is the one surface with real content moving behind it, so it is
the one that genuinely blurs. */
header{
background:var(--glass);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 -.5px 0 var(--edge), inset 0 1px 0 var(--spec);
border-bottom:0;
}
/* "Toolbars are actual bars, not horizontal areas of floating glassy buttons."
The tab strip becomes a bar with its own shading. */
.tab-bar{
background:var(--glass-strong);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec),
0 1px 3px rgba(0,0,0,.05);
padding:6px;
}
.tab[aria-selected="true"]{
box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(10,111,212,.35);
}
/* Controls keep the capsule the Mac toolbar uses, and pick up the same
specular top edge the system buttons have. */
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(0,0,0,.14)}
.pill:active{transform:translateY(.5px)}
/* Over a photograph the light button is real glass, because there is
something behind it to diffuse. */
.pill.light{
background:var(--glass-strong);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 0 0 .5px var(--edge), inset 0 1px 0 rgba(255,255,255,.9),
0 2px 10px rgba(0,0,0,.18);
}
.pill.ghost{
box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Badges sit on photographs; glass over the marigold rather than a flat chip. */
.badge{
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5),
0 1px 3px rgba(0,0,0,.2);
}
/* The enquiry panel is the page's sidebar: edge-aligned, its own shading,
no floating. */
.sidebar{background:var(--glass-strong);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
/* Concentric corners: an inner radius is the outer one less its padding, so
curves never nest inside curves. */
.card-image{border-radius:var(--r-lg) var(--r-lg) 0 0}
.tg-item img{border-radius:var(--r-md)}
@media(prefers-reduced-transparency:reduce){
/* Golden Gate's own answer to this is the transparency slider: drop the
refraction, keep the surface. Only the blur goes; colour is untouched. */
header,.tab-bar,.pill.light,.sidebar,.badge{
-webkit-backdrop-filter:none;backdrop-filter:none;
}
header,.tab-bar,.pill.light,.sidebar{background:var(--card)}
}
/* ── Nothing may exceed the screen ──────────────────────────────────────────
Grid and flex children default to a minimum of their content width, which is
how one wide element (a tab strip, a table, a long place name) drags an
entire page wider than the phone it is being read on. */
.shell>*,.content-grid>*,.split>*,.cards>*,.tabs,.tab-panel{min-width:0}
/* ── Phone: things you tap should be big enough to tap ──────────────────────
Standalone controls get a 44px target. Links inside a sentence keep their
size, because padding them out would break the paragraph. */
@media(max-width:700px){
.sidebar-link{min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:10px}
.finder select,.finder input,.field input,.field select,.field textarea{min-height:44px}
.finder{padding:12px}
.tab{padding:13px 18px}
.tg-nav button{width:44px;height:44px}
}
/* A standalone link — a card's "View journey", a section's "See all" — needs a
44px target. Padding would drag its underline away from the text, so the
target is extended with a transparent overlay and the type does not move. */
@media(max-width:700px){
.text-link{position:relative}
.text-link:after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
transform:translateY(-50%)}
/* A link inside a sentence keeps the line's own height; extending it would
make it overlap the lines above and below. */
p .text-link:after{content:none}
.check input{width:20px;height:20px}
}
/* ══════════════════════════════════════════════════════════════════════════
THE WORDMARK
The body of this site is the system sans, and it should stay that way. The
company name is the one place that needs a voice of its own, so it gets a
face of its own: Fraunces, at the weight that balances the mark beside it.
Only the thirteen glyphs the name needs are downloaded — 19KB, not 340.
═══════════════════════════════════════════════════════════════════════ */
.logo{font-size:clamp(20px,2.15vw,33px);letter-spacing:0;line-height:.92}
.logo-type{
font-family:var(--font-display);
font-weight:700;
/* opsz 144 is the display cut: tighter fit, sharper contrast, the shapes the
name is worth seeing at header size. WONK gives the y and J their kick. */
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;
letter-spacing:-.022em;
font-synthesis:none;
}
/* The strapline stays in the body sans. The contrast between a warm serif and
a cold letterspaced sans is the whole point of the lockup. */
.logo small{
font-family:var(--font-text);
font-variation-settings:normal;letter-spacing:.17em;
}
@media(max-width:1050px){
/* Smaller sizes take a lower optical size, which opens the letterforms and
thickens the hairlines — what the axis exists for. */
.logo-type{font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1;letter-spacing:-.012em}
}
@media(max-width:700px){
.logo{font-size:19px;line-height:.98}
.logo-type{font-variation-settings:"opsz" 30,"SOFT" 50,"WONK" 1;letter-spacing:-.005em}
}
/* ══════════════════════════════════════════════════════════════════════════
TYPE SYSTEM
Two faces, each with one job. Fraunces carries the voice: the wordmark and
every display heading, with its optical-size axis set per size so the
letterforms are drawn for the size they are read at rather than scaled.
Schibsted Grotesk carries everything a person reads or operates — body,
labels, tables, buttons, menus, forms.
═══════════════════════════════════════════════════════════════════════ */
/* ── Display ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.display,.mega,.itinerary-title,.lead{
font-family:var(--font-display);
font-synthesis:none;
font-variation-settings:"opsz" 72,"SOFT" 50,"WONK" 1;
/* No negative tracking. The old values were tuned for SF Pro, which is drawn
loose for UI and needs tightening at display size. Fraunces at a high
optical size is already fitted for display; taking more out of it welded
"Journeys across" into one word. */
letter-spacing:0;
}
/* Big type takes the display cut: tighter fit, sharper contrast. */
h1,.mega,.display,.cta-card h2,.section-head h2,.plan-step h2,
.article-content h1,.library-feature .copy h2{
font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;
letter-spacing:0;
font-weight:700;
line-height:1.03;
}
/* Small headings take a text cut, which opens them up and keeps the hairlines
from disappearing. */
h3,h4,.sidebar h3,.day h3,.card h3,.note-card h3,.topic h3{
font-variation-settings:"opsz" 48,"SOFT" 50,"WONK" 1;
letter-spacing:.002em;
font-weight:650;
}
/* The pull quote that opens each journey. */
.lead{font-variation-settings:"opsz" 96,"SOFT" 60,"WONK" 1;font-weight:500;letter-spacing:0}
/* ── Text, UI, controls ────────────────────────────────────────────────── */
body,button,input,select,textarea,.pill,.tab,.kicker,.badge,.text-link,
.nav-links,.site-nav,.nav-menu,.footer-grid,.member-meta,.price-table,
.trip-bar,.field,.field-label,.spec-list,.stay-list,.day .overnight{
font-family:var(--font-text);
}
/* No tabular figures. In this face the tabular set gives the comma a full
digit advance, so "US$4,475" sets as "US$4 , 475". Correct punctuation is
worth more than a perfectly aligned column. */
/* Tabular figures only where numbers line up in a column. Applied to running
text they widen the comma to a full digit, which is why "US$1,875" was
rendering as "US$1 , 875". */
.price-block .price-table td{font-variant-numeric:normal}
/* The uppercase labels were letterspaced for SF; this face is a shade
narrower, so they take slightly more. */
.kicker,.eyebrow-light,.logo small,.footer-grid h4,.member .role,
.stay-notes h3,.journey-facts span{letter-spacing:.1em}
/* ── Strapline, menu, body ──────────────────────────────────────────────────
The three pieces of running text a visitor meets first. */
/* The strapline was 8px at weight 800 — at that size a heavy weight fills its
own counters and reads as a smudge. Lighter, larger, and given the tracking
a small cap line actually needs. */
.logo small{
font-size:10.5px;font-weight:550;letter-spacing:.24em;
color:#71717a;margin-top:9px;line-height:1.3;
}
@media(max-width:1050px){.logo small{font-size:10px;letter-spacing:.2em}}
@media(max-width:700px){.logo small{font-size:9.5px;letter-spacing:.16em;margin-top:7px}}
footer .logo small{color:rgba(255,255,255,.62)}
/* Menu: one step up in size, a real weight rather than the face's default,
and the tracking left alone. Hanken's open apertures do the work at this
size, which is why it was chosen. */
.nav-links{font-size:15px}
.nav-links a,.nav-trigger,.nav-menu a,.nav-menu-label{
font-weight:500;letter-spacing:0;
}
.nav-menu-label{font-weight:600}
.nav-links a:hover{opacity:1;color:var(--blue)}
/* Body: a touch larger and more leading than the old face wanted. */
body{font-size:17px;line-height:1.62;letter-spacing:.002em}
.lede,.measure p,.content-grid p,.article-content p{line-height:1.62}
/* ── Heroes ────────────────────────────────────────────────────────────────
The hero headings were set at .92–.93 leading, which suits SF Pro's shallow
descenders. Fraunces has real ones — the y in "Journeys", the g in
"Mongolia's" — and at that leading they run into the line beneath. */
.hero-content h1,.page-image-hero h1,.hero-card h1,.tour-hero h1{
line-height:1.03;letter-spacing:0;
font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;
font-weight:700;
}
/* The standfirst under a hero headline, given room to match. */
.hero-content p,.page-image-hero p,.hero-card p{line-height:1.5;letter-spacing:.002em}
/* The small cap line above a hero headline had the same problem the strapline
did: heavy weight at a small size closes up its own counters. */
.hero-storyline .mystic,.hero-content .kicker,.page-image-hero .kicker{
font-weight:600;letter-spacing:.2em;font-size:12px;
}
@media(max-width:700px){
.hero-content h1,.page-image-hero h1,.hero-card h1,.tour-hero h1{line-height:1.06}
.hero-storyline .mystic,.hero-content .kicker,.page-image-hero .kicker{
font-size:11px;letter-spacing:.16em;
}
}
/* ══════════════════════════════════════════════════════════════════════════
VERTICAL RHYTHM AND WEIGHT
Heading margins were set in pixels, one value at a time — a 72px display
heading sat 14px above its paragraph while a 22px card heading sat 8px.
Setting them in em makes the space a proportion of the type it belongs to,
so every heading on the site is spaced the same way whatever its size.
═══════════════════════════════════════════════════════════════════════ */
h1,.mega{margin-bottom:.36em}
h2,.display,.section-head h2,.statement-band h2,.cta-card h2,
.library-feature .copy h2,.plan-step h2{margin-bottom:.42em}
h3,.card h3,.day h3,.note-card h3,.sidebar h3,.value h3,.member h3,
.topic h3,.destination-card h3{margin-bottom:.55em}
h4{margin-bottom:.7em}
.kicker,.eyebrow-light{margin-bottom:1.15em}
p{margin-bottom:1.05em}
p:last-child,.lead:last-child,.card p:last-child{margin-bottom:0}
/* The standfirst that follows a display heading is part of the same block and
wants a little more air beneath it than between its own lines. */
.lead,.lede{margin-bottom:1.3em}
/* ── Weight ────────────────────────────────────────────────────────────────
Hanken Grotesk sits lighter than SF Pro at the same nominal weight, so the
values inherited from the system stack rendered thin. Each role moves up
one step rather than the whole scale being shifted. */
body{font-weight:450}
p,li,dd,td,.lede,.muted,.card p,.day p,.para{font-weight:450}
.nav-links a,.nav-trigger,.nav-menu a{font-weight:600}
.nav-menu-label{font-weight:700}
.pill,.tab,.text-link,.btn{font-weight:650}
.field-label,.kicker,.eyebrow-light{font-weight:700}
strong,b,.trip-bar strong,.fact-row strong{font-weight:650}
.logo small{font-weight:600}
/* ── Corrections found by measuring the computed values ────────────────────
Three things the cascade was quietly deciding for itself. */
/* The nav rule was more specific than the button rule, so "Plan a trip" was
taking the menu's weight instead of a button's. */
.site-nav .nav-links a.pill,.nav-links a.pill{font-weight:650}
/* A standalone call to action was computing to 12px, which is a footnote, not
a link someone is meant to follow. */
.text-link{font-size:14px}
.card-foot .text-link,.section-head .text-link{font-size:14.5px}
/* And the menu size, which a base rule was still winning. */
.site-nav .nav-links{font-size:15px}
/* The size was set on the container and the links were inheriting an earlier
value; set it on the links themselves so there is nothing to inherit from. */
.site-nav .nav-links>a,.site-nav .nav-trigger,.site-nav .nav-group>a{font-size:15px}
/* ── Hero overlap cards ────────────────────────────────────────────────────
The trip bar and the finder are pulled up by a negative margin so they tuck
under the hero's rounded corner. On a wide screen the hero's buttons sit
well clear of that. On a phone the copy wraps to five or six lines and the
buttons stack full-width, so they reach the bottom edge and the card lands
on top of them. The tuck is a large-screen nicety; below 860px it simply
sits under the hero. */
@media(max-width:860px){
.trip-bar,.finder{margin-top:16px}
.hero-content,.tour-hero .hero-content{padding-bottom:clamp(30px,5vw,44px)}
}
/* ══════════════════════════════════════════════════════════════════════════
ITINERARY
The marker used to be a bare number in a circle, which answered neither
"day or activity?" nor "what happens when one day holds two things?". It
now says which unit it is counting, and it is wide enough to hold a range
("Days 4–5") when a single entry covers more than one.
═══════════════════════════════════════════════════════════════════════ */
.day-num{
flex:0 0 62px;width:62px;height:auto;min-height:58px;border-radius:var(--r-md);
display:grid;place-content:center;justify-items:center;gap:2px;padding:9px 6px;
background:var(--blue-soft);color:var(--blue-deep);
box-shadow:inset 0 0 0 1px rgba(10,111,212,.2);
}
.day-num span{
font-family:var(--font-text);font-size:9px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;opacity:.85;line-height:1;
}
.day-num b{
font-family:var(--font-display);font-size:23px;font-weight:700;line-height:1;
font-variation-settings:"opsz" 48,"SOFT" 50,"WONK" 1;white-space:nowrap;
}
/* A range needs the room a single digit does not. */
.day-num b:not(:only-child){letter-spacing:0}
.itinerary .day-num b{font-variant-numeric:lining-nums}
/* ── Multi-night stays ─────────────────────────────────────────────────────
Every journey has stretches where the traveller stays put — seven nights at
one field camp on the Altai route. Repeating "Overnight: Field camp" seven
times is noise, so the first night states the run and a rail carries it
down the days that follow. */
.day{position:relative}
.day.stay-start:after,.day.stay-mid:after{
content:"";position:absolute;left:calc(28px + 31px);top:100%;width:2px;height:14px;
background:linear-gradient(var(--blue-soft),rgba(10,111,212,.22));
transform:translateX(-1px);
}
.day.stay-mid .day-num,.day.stay-end .day-num{
background:transparent;box-shadow:inset 0 0 0 1px rgba(10,111,212,.22);
}
.overnight.cont{
color:var(--muted);font-weight:500;
display:inline-flex;align-items:center;gap:7px;
}
.overnight.cont:before{
content:"";width:5px;height:5px;border-radius:50%;
background:rgba(10,111,212,.45);flex:0 0 auto;
}
@media(max-width:700px){
.day.stay-start:after,.day.stay-mid:after{left:31px}
.day-num{flex:0 0 auto;width:auto;min-height:0;display:inline-flex;align-items:baseline;
gap:7px;padding:7px 12px;margin-bottom:14px}
.day-num span{font-size:9.5px}
.day-num b{font-size:19px}
}
/* ── A day that holds more than one thing ──────────────────────────────────
Some days are two activities, and some activities run across two days. The
marker takes a range ("Days 4–5", written with the plural in the label) and
a day can carry a list of activities beneath its heading, each with its own
time or place, without inventing a second day number for them. */
.day-acts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.day-acts li{
display:grid;grid-template-columns:94px 1fr;gap:14px;align-items:baseline;
padding-top:11px;border-top:1px solid var(--line);
}
.day-acts li:first-child{border-top:0;padding-top:0}
.day-acts .when{
font-family:var(--font-text);font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--blue);white-space:nowrap;padding-top:2px;
}
.day-acts .what{font-size:15.5px;line-height:1.55;color:var(--muted);font-weight:450}
.day-acts .what b{color:var(--ink);font-weight:650;display:block;margin-bottom:2px}
@media(max-width:560px){
.day-acts li{grid-template-columns:1fr;gap:3px}
.day-acts .when{min-width:0}
}
/* ── More about this day ───────────────────────────────────────────────────
A disclosure inside the day card. Collapsed it adds one line and nothing
else, so the card keeps the height it had; open, it drops a definition list
of facts already on the page — which base, which night of the stay, and the
site's own description of that kind of accommodation. Built on ,
so it works with no script and is keyboard-operable by default. */
/* Closed, the control sits on the card's own last line, so the card keeps
exactly the height it had before this existed. Open, it becomes a normal
block and the panel flows beneath it. */
.day-more{margin-top:0}
.day-more>summary{position:absolute;right:28px;bottom:26px;margin:0}
.day-more[open]{margin-top:14px;border-top:1px solid var(--line);padding-top:11px}
.day-more[open]>summary{position:static;margin-bottom:2px}
.day-more>summary{
list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-text);font-size:13px;font-weight:650;color:var(--blue);
padding:2px 0;letter-spacing:0;line-height:1.4;
}
.day-more>summary::-webkit-details-marker{display:none}
.day-more>summary:after{
content:"";width:7px;height:7px;flex:0 0 auto;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;
}
.day-more[open]>summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
.day-more>summary:hover{color:var(--blue-deep)}
.day-more>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.day-more-body{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 26px;margin:14px 0 2px;
}
.day-more-body>div{display:grid;gap:3px;min-width:0}
.day-more-body>div.wide{grid-column:1/-1;padding-top:12px;border-top:1px solid var(--line)}
.day-more-body dt{
font-family:var(--font-text);font-size:10.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);
}
.day-more-body dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink);font-weight:500}
.day-more-body .wide dd{color:var(--muted);font-weight:450;font-size:14.5px}
@media(prefers-reduced-motion:reduce){.day-more>summary:after{transition:none}}
@media(max-width:560px){
.day-more-body{grid-template-columns:minmax(0,1fr);gap:11px}
.day-more-body>div.wide{padding-top:11px}
}
@media(max-width:820px){
/* Too narrow to tuck the control beside the text without a collision. */
.day-more,.day-more>summary{position:static}
.day-more{margin-top:13px;border-top:1px solid var(--line);padding-top:10px}
.overnight{padding-right:0}
}
/* ── Tab panel rhythm ──────────────────────────────────────────────────────
.panel-title was written with no top margin, taking its gap from whatever
happened to sit above it. That worked where a .fact-row preceded it and
failed the moment anything else did — the heading landed flush against the
card above. The heading now owns its own space. */
.tab-panel .panel-title:not(:first-child){margin-top:clamp(30px,3.2vw,42px)}
.tab-panel>.spec-cols+*{margin-top:clamp(30px,3.2vw,42px)}
/* A list sitting directly in a tab panel had the browser's default disc and
indent, which matches nothing else on the site. */
.tab-panel>ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:74ch}
.tab-panel>ul>li{position:relative;padding-left:21px;color:var(--muted);line-height:1.6}
.tab-panel>ul>li:before{
content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
background:var(--blue);opacity:.55;
}
.tab-panel>ul+p{margin-top:clamp(22px,2.4vw,30px)}
/* ── Founder note ──────────────────────────────────────────────────────────
Sits under the enquiry card in the same column, and reads as a note rather
than a testimonial: a small portrait, the line itself, and a signature. */
/* The enquiry card and the note travel together as one column of the grid;
adding the note as a second grid item pushed it onto a new row. */
.side-col{position:sticky;top:105px;display:grid;gap:16px;align-content:start;min-width:0}
.founder-note{background:var(--card);border-radius:var(--r-lg);padding:24px}
/* A real portrait now exists, so this holds the photograph rather than a monogram. */
.founder-mark{
width:46px;height:46px;border-radius:50%;display:block;object-fit:cover;
background:var(--blue-soft);
box-shadow:inset 0 0 0 1px rgba(10,111,212,.2);margin-bottom:14px;
}
.founder-note blockquote{
margin:0 0 15px;font-family:var(--font-display);font-size:18px;line-height:1.45;
font-weight:500;letter-spacing:0;color:var(--ink);
font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1;
}
.founder-note blockquote:before{content:"\201C"}
.founder-note blockquote:after{content:"\201D"}
.founder-by{display:grid;gap:2px;padding-top:13px;border-top:1px solid var(--line)}
.founder-by strong{font-size:14px;font-weight:650}
.founder-by span{
font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);
}
.founder-note .sidebar-link{margin-top:14px;font-size:13px}
@media(max-width:900px){.side-col{position:static;top:auto}}
/* ── Founder block on the team page ───────────────────────────────────────
One person, at a size that says so, with the portrait at the same 4:5 the
page was already built for. */
.founder-split{align-items:start;gap:clamp(30px,4vw,58px)}
.founder-split .founder-portrait{max-width:430px;margin-inline:auto}
@media(max-width:860px){.founder-split .founder-portrait{max-width:320px;margin-inline:auto}}
/* A pull quote in the founder section: his voice, set in the display face,
sitting above the biography rather than competing with it. */
.founder-pull{
margin:0 0 22px;padding:0 0 0 20px;border-left:3px solid var(--blue);
font-family:var(--font-display);font-size:clamp(21px,2.1vw,26px);line-height:1.38;
font-weight:500;letter-spacing:0;color:var(--ink);
font-variation-settings:"opsz" 72,"SOFT" 60,"WONK" 1;
}
.founder-pull:before{content:"\201C"}
.founder-pull:after{content:"\201D"}
@media(max-width:700px){.founder-pull{padding-left:16px}}
/* ══════════════════════════════════════════════════════════════════════════
SMALL TYPE
An audit of everything rendering under 16px found a floor of 9px and a
great deal of 10–11px uppercase. Sizes are raised, and the tables are given
a hierarchy instead of one weight at one size.
═══════════════════════════════════════════════════════════════════════ */
/* ── Tables ────────────────────────────────────────────────────────────────
The row label is the thing a reader scans, so it takes the display face.
Column heads move up and out; the body goes to full reading size. */
.price-table th,.price-table td{font-size:16px;padding:19px 24px;line-height:1.52}
.price-table thead th{
font-size:11.5px;letter-spacing:.15em;font-weight:700;color:var(--muted);
padding-top:22px;padding-bottom:14px;
}
.price-table tbody th{
font-family:var(--font-display);font-size:18px;font-weight:650;letter-spacing:0;
font-variation-settings:"opsz" 48,"SOFT" 50,"WONK" 1;color:var(--ink);
}
.price-table tbody td{color:var(--muted);font-weight:450}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-block .price-table td strong{
font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink);
font-variation-settings:"opsz" 48,"SOFT" 50,"WONK" 1;
}
@media(max-width:900px){
.price-table th,.price-table td{font-size:15px;padding:15px 16px}
.price-table tbody th{font-size:16.5px}
}
/* ── The micro-label floor ─────────────────────────────────────────────────
Uppercase set below 11px closes up its own counters. Nothing sits under
11px now, and the tracking rises with the size. */
.meta span,.price span,.fact-row span,.journey-facts span,.trip-bar span,
.field .field-label,.field label{font-size:11.5px;letter-spacing:.13em}
.day-more-body dt,.founder-by span,.member .role{font-size:11px;letter-spacing:.13em}
.day-num span{font-size:10px;letter-spacing:.12em}
.nav-menu-label{font-size:11px;letter-spacing:.13em}
.badge{font-size:11.5px}
.eyebrow-light,.kicker{font-size:12.5px}
.type{font-size:12.5px}
.value b{font-size:12.5px;letter-spacing:.12em}
.copyright{font-size:13px}
/* ── Small text that is read, not scanned ──────────────────────────────── */
.overnight{font-size:14px}
.day-more>summary{font-size:14px}
.sidebar-link{font-size:14px}
.footer-grid h4{font-size:13.5px;letter-spacing:.13em}
.spec-col h3{font-size:13px;letter-spacing:.12em}
.spec-list li{font-size:15.5px;line-height:1.6}
.stay-name{font-size:16px}
.stay-nights{font-size:14px}
/* Two rules above were losing to more specific selectors written earlier. */
.day .overnight{font-size:14px}
.founder-note .sidebar-link,.sidebar .sidebar-link{font-size:14px}
/* The moments now lead somewhere, so they behave like cards rather than
pictures: the whole tile is the link, and it says where it goes. */
a.moment{display:block;text-decoration:none;color:#fff;transition:transform .35s ease,box-shadow .35s ease}
a.moment:hover{transform:translateY(-4px)}
a.moment:hover img{transform:scale(1.04)}
a.moment img{transition:transform .65s ease}
a.moment:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.moment-read{
display:inline-flex;align-items:center;gap:7px;margin-top:11px;
font-family:var(--font-text);font-size:12.5px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:#fff;opacity:.88;
}
a.moment:hover .moment-read{opacity:1}
/* ── Section rhythm ────────────────────────────────────────────────────────
Every section carried a full pad top and bottom, so two in a row produced
a 208px void. The pad comes down, and where two sections do share a ground
the second drops its top pad so the gap is one unit rather than two. */
.section{padding:clamp(52px,5.4vw,76px) 0}
.section.tight{padding-top:clamp(34px,3.4vw,48px)}
.section.white{background:var(--card)}
/* Two sections on the same ground read as one band, so do not pad twice. */
.section:not(.white) + .section:not(.white){padding-top:0}
.section.white + .section.white{padding-top:0}
@media(max-width:700px){.section{padding:clamp(40px,8vw,56px) 0}}
/* The dark band sat outside the section scale at 115px a side. */
.testimonial-section{padding:clamp(58px,6vw,84px) 0}
@media(max-width:700px){.testimonial-section{padding:clamp(44px,8vw,60px) 0}}
@media(max-width:700px){.home-hero{background-position:50% 72%!important}}
/* Named properties inside the "Where you stay" tab. The full .card component is
built for the 3-up section grid; in this narrower column it collapsed to a
283px sliver 862px tall and sat flush against .stay-notes below. This matches
the two-column rhythm of the notes instead. */
.stay-props{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 34px}
.stay-props .sp{background:var(--card);border-radius:var(--r-lg);overflow:hidden;
display:grid;grid-template-columns:138px minmax(0,1fr);align-items:stretch;
text-decoration:none;color:inherit;transition:.25s}
.stay-props .sp:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-1px)}
.stay-props .sp-img{position:relative;overflow:hidden;background:var(--blue-soft)}
.stay-props .sp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stay-props .sp-body{padding:17px 19px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stay-props .sp-where{font-size:11px;text-transform:uppercase;letter-spacing:.12em;
font-weight:800;color:var(--accent);margin:0}
.stay-props .sp-name{font-family:var(--font-display);font-size:19px;line-height:1.2;
font-weight:600;margin:0;color:var(--ink)}
.stay-props .sp-line{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.stay-props .sp-facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:auto;padding-top:10px;
border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.stay-props .sp-facts b{color:var(--ink);font-weight:650}
@media(max-width:860px){.stay-props{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.stay-props .sp{grid-template-columns:minmax(0,1fr)}
.stay-props .sp-img{height:170px}}
/* On a phone a long card link ('Enter the Altai →') broke mid-phrase beside the
price. Let the foot wrap so the link drops to its own line intact instead. */
@media(max-width:700px){.card-foot{flex-wrap:wrap}}
/* The copy is pinned to the bottom of the card, so it grows upward - a one-line
subtitle lifted that card's headline above its neighbours' (31px out on 14 of
16 pages). Give the block a floor and start its content from the top instead:
headlines line up, and the slack falls after the subtitle - before the link,
where it reads as spacing - never as a gap under the headline. Floors are the
measured tallest block in each column count. */
.moment .copy{display:flex;flex-direction:column;min-height:93px}
.moment .copy:has(.moment-read){min-height:126px}
.moment .moment-read{margin-top:auto}
@media(max-width:1000px){.moment .copy{min-height:123px}
.moment .copy:has(.moment-read){min-height:168px}}
/* One column: no neighbour to line up with, so let the copy sit tight again. */
@media(max-width:700px){.moment .copy{display:block;min-height:0}}
/* Founder portrait on the about page, stacked above the sidebar in the same column. */
.portrait-card{margin:0;background:var(--card);border-radius:var(--r-lg);overflow:hidden}
.portrait-card .portrait{border-radius:var(--r-lg) var(--r-lg) 0 0}
.portrait-card img{width:100%;display:block}
.portrait-card figcaption{display:grid;gap:2px;padding:16px 20px 18px}
.portrait-card figcaption strong{font-size:16px;font-weight:650;color:var(--ink)}
.portrait-card figcaption span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--accent)}
/* Booking calendar. The frame is a third-party page, so it gets a fixed
height rather than trying to size to its contents, and a link underneath
for anyone whose browser blocks third-party frames. */
.sched-frame{width:100%;min-height:720px;border:0;border-radius:var(--r-lg);background:var(--card);display:block}
@media(max-width:700px){.sched-frame{min-height:900px}}
.sched-escape{margin-top:14px;font-size:14px;color:var(--muted)}
.sched-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.sched-fallback p{color:var(--muted);line-height:1.6;margin:0;max-width:64ch}
/* The wordmark is set in the page's own type, so it always matches the site. The line under
it is flanked by short rules, as on the printed logo: — MONGOLIA BEYOND THE EXPECTED — */
.logo small{display:flex;align-items:center;gap:.9em;white-space:nowrap}
.logo small::before,.logo small::after{content:"";flex:1 1 0;min-width:.8em;max-width:3em;height:1px;background:currentColor;opacity:.7}
.logo small{justify-content:center;letter-spacing:.14em}