/* Trip pages (destinations/<slug>.html), design B: a dark title band with the trip's photo, section
   tabs, the trip's story on the left and a facts card on the right that stays in place while you read.
   Phones and tablets get the facts first and an enquiry bar along the foot of the screen.
   Every colour, size and gap is a token from brand.css. The pages are written by trips/build_pages.py. */

.trip{--tabs-h:3.4rem;--dock:0px}
html.docked-on .trip{--dock:calc(4.5rem + env(safe-area-inset-top, 0px))}

/* ---- title band ---- */
.b-top{background:var(--ink);color:var(--bone);padding:calc(9rem + env(safe-area-inset-top, 0px)) 0 var(--s7)}   /* clear of the family bar and the nav */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--on-ink-muted)}
.crumb a{color:var(--on-ink);text-decoration:none}
.crumb a:hover{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.b-top h1{margin-top:var(--s3);font-size:var(--t-4xl);color:var(--bone);max-width:16ch}
.b-top .sub{margin-top:var(--s4);color:var(--on-ink);font-size:var(--t-md);max-width:var(--measure-narrow);text-wrap:pretty}

/* ---- the top of a trip page: its own photo across the first screen, the name, line and three facts on a dark
   fade at the foot of the photo, and the enquiry button. The fade is strongest where the words sit. ---- */
.h-full{position:relative;display:grid;align-items:end;min-height:min(100svh,58rem);background:var(--ink);color:var(--bone);overflow:hidden}
.h-bg{position:absolute;inset:0;margin:0;container-type:size}
.h-bg picture{display:contents}
/* the photo's focal point (--fx, --fy: faces' eyes, people's heads, or the peak, set per trip) lands at --tx, --ty of
   the frame, as near as the photo's edges allow: worked out from the frame's own size, so it holds on any screen.
   On upright phones the browser shows a slice cut around the subject: its shape and the point's place in it. */
.h-bg img{width:100%;height:100%;object-fit:cover;--a:var(--fa,1.5);--x:var(--fx,.5);--tx:.5;--ty:.36;
  object-position:calc(var(--x) * 100%) calc(var(--fy,.5) * 100%);
  object-position:clamp(calc(100cqw - max(100cqw, 100cqh * var(--a))), calc(var(--tx) * 100cqw - var(--x) * max(100cqw, 100cqh * var(--a))), 0px)
                  clamp(calc(100cqh - max(100cqh, 100cqw / var(--a))), calc(var(--ty) * 100cqh - var(--fy,.5) * max(100cqh, 100cqw / var(--a))), 0px)}
@media(max-aspect-ratio:2/3){.h-bg img{--a:var(--pa,var(--fa,1.5));--x:var(--pfx,var(--fx,.5))}}
/* the shade sits behind the words (bottom left, or bottom right with .h-right) and under the nav; the rest of the
   photo stays clear */
.h-full::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,24,28,.55) 0%,rgba(20,24,28,0) 18%),
    radial-gradient(115% 80% at 0% 100%,rgba(20,24,28,.88) 0%,rgba(20,24,28,.7) 32%,rgba(20,24,28,.3) 60%,rgba(20,24,28,0) 80%),
    linear-gradient(0deg,rgba(20,24,28,.45) 0%,rgba(20,24,28,0) 30%)}
.h-right::after{background:linear-gradient(180deg,rgba(20,24,28,.55) 0%,rgba(20,24,28,0) 18%),
    radial-gradient(115% 80% at 100% 100%,rgba(20,24,28,.88) 0%,rgba(20,24,28,.7) 32%,rgba(20,24,28,.3) 60%,rgba(20,24,28,0) 80%),
    linear-gradient(0deg,rgba(20,24,28,.45) 0%,rgba(20,24,28,0) 30%)}
.h-full .h-in{position:relative;z-index:1;width:100%;padding-block:12rem var(--s8);text-shadow:0 1px 18px rgba(20,24,28,.45)}
.h-full .crumb,.h-full .crumb a{color:var(--bone)}
.h-copy{container-type:inline-size}
/* the name: as big as the screen allows, never so big that its longest unbreakable run (--hl letters, from the build)
   is wider than the column, and capped on very wide screens so it keeps the break it has on a laptop */
.h-full h1{margin-top:var(--s3);color:var(--bone);font-size:min(clamp(2.6rem,6.4vw,5.1rem),calc(100cqi / (var(--hl,10) * .66)));max-width:16ch}
.h-full .sub{margin-top:var(--s4);color:var(--bone);font-size:var(--t-md);font-weight:600;max-width:var(--measure-narrow);text-wrap:pretty}   /* no lone last word */
.h-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin-top:var(--s5)}
.h-chips li{display:flex;gap:var(--s3);align-items:center;max-width:none}
.h-chips .i{color:var(--orange);width:1.5rem;height:1.5rem}
.h-chips b{display:block;font-weight:800;font-size:var(--t-base);line-height:1.2}
.h-chips small{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-ink)}
.h-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s6);text-shadow:none}
/* a photo whose subject stands on the left: the words take the right of the screen instead */
@media(min-width:64em){.h-copy{max-width:min(44rem,58%)}.h-right .h-copy{margin-left:auto}}
@media(min-width:43.8125em) and (max-width:63.9375em){.h-right .h-copy{margin-left:auto;max-width:min(40rem,80%)}}
/* phones (and phones turned sideways, where a full-screen photo would sit under the nav and the bottom bar): the
   photo has the top of the screen to itself, clear of any words, and fades into ink at its foot, where the name
   overlaps it; the line, facts and buttons follow on the ink below */
@media(max-width:43.75em),(max-height:31.25em) and (min-aspect-ratio:3/2){
  .h-full{display:block;min-height:0;padding-top:calc(7.25rem + env(safe-area-inset-top, 0px))}   /* the photo starts below the nav: nothing covers it */
  .h-full::after{content:none}
  .h-bg{position:relative;inset:auto;height:min(58svh,33rem)}
  .h-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(20,24,28,0) 0%,rgba(20,24,28,0) 64%,rgba(20,24,28,.7) 86%,var(--ink) 100%)}
  .h-full .h-in{margin-top:-5.5rem;padding-block:0 var(--s7)}
  .h-bg img{--ty:.4}   /* the photo's foot fades into the words: the subject sits a little lower than centre */
  .h-chips{gap:var(--s3) var(--s5)}
}
@media(max-height:31.25em) and (min-aspect-ratio:3/2){
  .h-bg{height:max(10rem,calc(100svh - 13.5rem))}   /* what is left between the nav and the bottom bar, with the name above the bar */
  .h-full .h-in{margin-top:-4rem}
  .h-full h1{font-size:clamp(1.75rem,4.6vw,2.5rem);max-width:none}   /* one line: the name stays above the bottom bar */
}
/* wide screens: the words keep to one side, so the photo's subject is held toward the other */
@media(min-width:64em){.h-bg img{--tx:.7}.h-right .h-bg img{--tx:.3}}

/* ---- section tabs, under the nav ---- */
.tabs{position:sticky;top:var(--dock);z-index:30;background:var(--paper);border-bottom:1px solid var(--grid);transition:top .25s var(--ease)}
.tabs .wrap{display:flex;align-items:center;gap:var(--s5);overflow-x:auto;scrollbar-width:none;min-height:var(--tabs-h)}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:var(--s4) 0;font-weight:700;font-size:var(--t-sm);color:var(--slate);text-decoration:none;border-bottom:3px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-color:var(--orange)}

/* ---- the two columns ---- */
.b-grid{display:grid;gap:var(--s7);padding-block:var(--s7) var(--s9);grid-template-columns:minmax(0,1fr)}   /* one column never grows wider than the screen, even with large text */
.b-main{min-width:0}
.b-main > section{padding-top:var(--s8);scroll-margin-top:calc(var(--dock) + var(--tabs-h) + var(--s4))}
.b-main > section:first-child{padding-top:0}
@media(min-width:65.625em){
  .b-grid{grid-template-columns:minmax(0,1fr) 23rem;gap:var(--s8);align-items:start}
  .b-main{grid-column:1;grid-row:1}
  .side{grid-column:2;grid-row:1}
}
.tp-h{font-size:var(--t-2xl)}
.tp-h3{font-size:var(--t-lg);margin-top:var(--s7)}
.sec-sub{margin-top:var(--s2);color:var(--muted)}
.lead{font-size:var(--t-md);color:var(--slate);max-width:var(--measure)}

/* ---- the facts card: it stays put beside the page while you read ---- */
.side{align-self:start}
@media(min-width:65.625em){.side{position:sticky;top:calc(var(--dock) + var(--tabs-h) + var(--s5));transition:top .25s var(--ease)}}
.card{background:var(--paper);border:1px solid var(--grid);border-radius:1rem;padding:var(--s5);box-shadow:var(--shadow-pop)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--grid)}
.card-k{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.card-d{font-weight:800;font-size:var(--t-xl);letter-spacing:var(--tr-head)}
.card dl{display:grid}
.card dl div{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;padding-block:var(--s3);border-bottom:1px solid var(--grid)}
.card dt{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-sm);color:var(--muted);font-weight:600}
.card dd{font-weight:800;font-size:var(--t-sm);text-align:right;text-wrap:balance}   /* "5,555 m (18,225 ft)" breaks before the bracket, not inside it */
.sure{list-style:none;display:grid;gap:var(--s2);margin-top:var(--s4)}
.sure li{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t-sm);font-weight:600;max-width:none}
.sure .i{color:var(--orange);margin-top:.15rem;flex:none}
.card .go{margin-top:var(--s5)}
.card .pill{width:100%;justify-content:center}
.card-help{margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted);text-align:center;max-width:none}
.card-help a{color:var(--ink);font-weight:700;white-space:nowrap}
/* short screens: tighter, so the whole card still fits beside the page */
@media(min-width:65.625em) and (max-height:47.5em){
  .card{padding:var(--s4)}
  .card dl div{padding-block:var(--s2)}
  .sure{display:none}
}

/* ---- overview ---- */
.hl{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:43.75em){.hl{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
.hl li{display:flex;gap:var(--s3);align-items:flex-start;max-width:none}
.hl .i{color:var(--orange);margin-top:.25rem;flex:none}
.feat{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media(min-width:43.75em){.feat{grid-template-columns:1fr 1fr}}
.feat div{background:var(--paper);border:1px solid var(--grid);border-radius:.75rem;padding:var(--s5)}
.feat h3{font-size:var(--t-base)}
.feat p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--slate)}
.say{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media(min-width:43.75em){.say{grid-template-columns:1fr 1fr}}
.say figure{background:var(--paper);border-radius:.75rem;padding:var(--s5)}
.say figure::before{content:"";display:block;width:2.5rem;height:3px;background:var(--orange);margin-bottom:var(--s4)}
.say blockquote{color:var(--ink);font-size:var(--t-sm);line-height:var(--lh-body)}
.say figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);font-weight:700}

/* ---- itinerary ---- */
.tl{list-style:none;margin-top:var(--s5);position:relative}
.tl::before{content:"";position:absolute;left:.6rem;top:.5rem;bottom:.5rem;width:2px;background:var(--grid)}
.tl > li{position:relative;padding:0 0 var(--s5) var(--s7);max-width:none}
.tl > li:last-child{padding-bottom:0}
.tl > li::before{content:"";position:absolute;left:0;top:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--bone);border:3px solid var(--orange)}
.tl > li.trek::before{background:var(--orange)}
.tl .d{font-weight:800;font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.tl h3{font-size:var(--t-base);margin-top:var(--s1)}
.tl p{margin-top:var(--s2);color:var(--slate)}
.tl ul{margin-top:var(--s2);padding-left:1.1rem;color:var(--slate)}
.tl ul li{max-width:none}
.tl.clip > li.more-hide{display:none}
.tl.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3rem;background:linear-gradient(transparent,var(--bone));pointer-events:none}
.tl-more{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;
  padding:var(--s3) var(--s5);font:inherit;font-weight:800;font-size:var(--t-sm);color:var(--ink);cursor:pointer}
.tl-more:hover{background:var(--ink);color:var(--bone)}
.pk-note{margin-top:var(--s5);color:var(--slate)}

/* ---- photos: a slideshow, one photo at a time with its caption, thumbnails underneath. trip.js adds the
   arrows, swipe and keys, and a full-screen view when a photo is clicked; without it the row scrolls sideways ---- */
.ss{position:relative;margin-top:var(--s5);container-type:inline-size}
.ss-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:.75rem}
.ss-track::-webkit-scrollbar{display:none}
.ss-track:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.ss-slide{min-width:0;scroll-snap-align:start}
.ss-zoom{display:block;cursor:zoom-in;border-radius:.75rem}
.ss-slide img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.75rem;background:var(--grid)}
.ss-slide.ss-fit img{object-fit:contain;background:var(--ink)}   /* an upright or square photo: whole, on a dark mat, never cropped */
.ss-slide figcaption{display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s3);font-size:var(--t-sm);color:var(--slate);max-width:none}
.ss-n{flex:none;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ss-btn{position:absolute;top:calc(100cqi / 3);transform:translateY(-50%);display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;
  background:var(--ink);color:var(--bone);cursor:pointer;box-shadow:0 .25rem 1rem rgba(20,24,28,.25);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ss-btn:hover{transform:translateY(-50%) scale(1.06)}
.ss-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ss-btn[disabled]{opacity:0;pointer-events:none}
.ss-prev{left:var(--s3)}
.ss-next{right:var(--s3)}
.ss-prev .i,.lb-prev .i{transform:scaleX(-1)}
.ss-thumbs{display:flex;gap:var(--s2);margin-top:var(--s4);padding:3px;overflow-x:auto;scrollbar-width:none}
.ss-thumbs::-webkit-scrollbar{display:none}
.ss-th{flex:none;display:block;width:5.25rem;aspect-ratio:3/2;border-radius:.4rem;overflow:hidden;opacity:.55;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s var(--ease)}
.ss-th img{display:block;width:100%;height:100%;object-fit:cover}
.ss-th.ss-up img{object-position:50% 30%}   /* upright thumbnails keep the upper part, where faces usually are */
.ss-th:hover{opacity:.9}
.ss-th.on{opacity:1;outline-color:var(--orange)}
.ss-th:focus-visible{outline-color:var(--ink)}
@media(max-width:32.5em){.ss-btn{width:2.4rem;height:2.4rem}.ss-th{width:4.25rem}}

/* the full-screen view: the photo on ink, its caption and count, arrows, swipe and the arrow keys */
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--bone)}
.lb::backdrop{background:var(--ink)}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:calc(var(--s4) + env(safe-area-inset-top, 0px)) max(var(--s5), env(safe-area-inset-right, 0px)) var(--s3) max(var(--s5), env(safe-area-inset-left, 0px))}
.lb-n{font-weight:800;font-size:var(--t-sm);letter-spacing:var(--tr-label);font-variant-numeric:tabular-nums;color:var(--on-ink)}
.lb-stage{position:relative;min-height:0;display:grid;place-items:center;padding:0 var(--s5);touch-action:pan-y}
@media(min-width:43.8125em){.lb-stage{padding:0 5.5rem}}   /* the arrows sit beside the photo, never on it */
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem;user-select:none;-webkit-user-drag:none}
.lb-cap{padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));margin-inline:auto;max-width:60ch;text-align:center;color:var(--on-ink);font-size:var(--t-sm)}
.lb-x,.lb-btn{display:grid;place-items:center;width:3rem;height:3rem;border:0;border-radius:50%;background:rgba(245,242,235,.12);color:var(--bone);cursor:pointer;transition:background .2s var(--ease)}
.lb-x:hover,.lb-btn:hover{background:rgba(245,242,235,.24)}
.lb-x:focus-visible,.lb-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:var(--s4)}
.lb-next{right:var(--s4)}
@media(max-width:43.75em){.lb-btn{display:none}.lb-stage{padding:0}}   /* phones: swipe */

/* ---- what's included ---- */
.inc{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:50em){.inc{grid-template-columns:1fr 1fr}}
.inc > div{background:var(--paper);border:1px solid var(--grid);border-radius:.75rem;padding:var(--s5)}
.inc h3{font-size:var(--t-lg);margin-bottom:var(--s4)}
.inc ul{list-style:none;display:grid;gap:var(--s3)}
.inc li{display:flex;gap:var(--s3);align-items:flex-start;max-width:none}
.inc li .i{margin-top:.25rem;flex:none}
.inc .yes .i{color:var(--orange)}
.inc .no{background:transparent;color:var(--slate)}
.inc .no .i{color:var(--muted)}

/* ---- services ---- */
.svc{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media(min-width:43.75em){.svc{grid-template-columns:1fr 1fr}}
.svc h3{font-size:var(--t-base);margin-top:var(--s3)}
.svc p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--slate)}
.svc .ic{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1.5px solid var(--ink)}
.extras{margin-top:var(--s7)}
.extras h3{font-size:var(--t-lg)}
.extras ul{list-style:none;display:grid;gap:0 var(--s7);margin-top:var(--s3)}
@media(min-width:50em){.extras ul{grid-template-columns:repeat(2,1fr)}}
.extras li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:center;padding-block:var(--s3);border-bottom:1px solid var(--grid);max-width:none}
.extras b{display:block;font-weight:800}
.extras li span span{display:block;color:var(--slate);font-size:var(--t-sm)}
.extras a{display:inline-flex;align-items:center;gap:var(--s1);font-weight:800;font-size:var(--t-sm);color:var(--ink);white-space:nowrap;text-decoration:none}
.extras a:hover{color:var(--orange)}

/* ---- more trips like this ---- */
.rel{background:var(--paper);border-top:1px solid var(--grid);padding-block:var(--s8)}
.rel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.more-all{display:inline-flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--t-sm);color:var(--ink);text-decoration:none}
.more-all:hover{color:var(--orange)}
.rel-grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:50em){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{display:flex;flex-direction:column;gap:var(--s2);background:var(--bone);border-radius:.75rem;padding:var(--s5);color:var(--ink);text-decoration:none;
  border:1px solid transparent;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.rel-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel-cat{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.rel-card b{font-size:var(--t-lg);font-weight:800;letter-spacing:var(--tr-head);line-height:var(--lh-snug)}
.rel-line{color:var(--slate);font-size:var(--t-sm)}
.rel-go{margin-top:auto;padding-top:var(--s3);display:inline-flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--t-sm)}

/* ---- closing band ---- */
.end{background:var(--ink);color:var(--bone);padding-block:var(--s8)}
.end .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5)}
.end h2{font-size:var(--t-2xl);color:var(--bone)}
.end p{color:var(--on-ink);margin-top:var(--s2);max-width:var(--measure-narrow)}

/* ---- phones and tablets: facts first, the enquiry bar at the foot of the screen ---- */
.b-bar{display:none}
@media(max-width:65.5625em){
  .b-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:var(--s3);align-items:center;justify-content:space-between;
    background:var(--paper);border-top:1px solid var(--grid);padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom, 0px))}
  .b-bar b{font-weight:800}
  .b-bar span{display:block;font-size:var(--t-xs);color:var(--muted)}
  .b-bar .pill{flex:none}
  body.trip{padding-bottom:5.5rem}
  .card{box-shadow:none}
  .card .go{display:none}
}
@media(max-width:65.5625em){
  /* the facts as a compact grid of small cards, label over value */
  .card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s4);padding-top:var(--s4)}
  .card dl div{grid-template-columns:1fr;gap:var(--s1);padding:0;border:0}
  .card dt{font-size:var(--t-xs)}
  .card dd{text-align:left;font-size:var(--t-sm)}
  .sure{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);padding-top:var(--s4);border-top:1px solid var(--grid)}
  .card-help{text-align:left}
}
@media(min-width:43.75em) and (max-width:65.5625em){.card dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:26.25em){.b-bar .pill{padding-inline:var(--s4)}.b-bar .pill svg{display:none}}

/* ---- the enquiry form ---- */
.eq{border:0;padding:0;margin:auto;width:min(40rem,calc(100vw - var(--s5)));max-height:calc(100dvh - var(--s6));border-radius:1rem;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop);overflow:auto}
.eq::backdrop{background:var(--scrim)}
.eq[open]{animation:eqIn .3s var(--ease)}
@keyframes eqIn{from{opacity:0;transform:translateY(12px)}}
.eq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:var(--s5) var(--s5) 0}
.eq-k{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.eq-h{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--tr-head);line-height:var(--lh-snug);margin-top:var(--s1)}
.eq-x{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1.5px solid var(--grid);background:var(--paper);color:var(--ink);cursor:pointer}
.eq-x:hover{border-color:var(--ink)}
.eq-x .i{stroke:currentColor;fill:none;stroke-width:2}
.eq-body{padding:var(--s4) var(--s5) 0}
.eq-lead{color:var(--slate);font-size:var(--t-sm)}
.eq-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);margin-top:var(--s5)}
.eq-f label{display:grid;gap:var(--s2);font-size:var(--t-sm);font-weight:700}
.eq-f em{font-style:normal;font-weight:500;color:var(--muted)}
.eq-wide{grid-column:1/-1}
.eq-i{width:100%;min-height:48px;border:1.5px solid var(--grid);border-radius:999px;background:var(--paper);padding:0 var(--s4);
  font-family:Montserrat,sans-serif;font-weight:600;font-size:max(16px, var(--t-base));color:var(--ink)}
select.eq-i{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 1.25rem) 50%,calc(100% - .95rem) 50%;background-size:.32rem .32rem;background-repeat:no-repeat;padding-right:var(--s7)}
textarea.eq-i{border-radius:1rem;padding:var(--s3) var(--s4);min-height:5.5rem;resize:vertical;line-height:1.45}
.eq-i::placeholder{color:var(--muted);font-weight:500}
.eq-i:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--orange-tint)}
.eq-i[aria-invalid="true"]{border-color:var(--error)}
.eq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.em-check{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:calc(var(--s2) * -1) 0 0;
  padding:0 var(--s2);font-size:var(--t-xs);font-weight:500;color:var(--muted);max-width:none;min-height:1.5em}
.em-check svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.em-check span{display:inline}
.em-check b{font-weight:700;word-break:break-all}
.em-check.wait{color:var(--muted)}
.em-check.ok{color:#1E6B3A;font-weight:600}
.em-check.bad{color:var(--error);font-weight:600}
.em-check.warn{color:var(--ink);font-weight:600}
.em-check button{min-height:36px;padding:0 var(--s3);border-radius:999px;cursor:pointer;font:700 var(--t-xs)/1 Montserrat,sans-serif}
.em-check .em-fix{border:0;background:var(--ink);color:var(--paper)}
.em-check .em-keep{border:1.5px solid var(--grid);background:var(--paper);color:var(--ink)}
.em-check button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.eq-err{color:var(--error);font-weight:600;font-size:var(--t-sm);margin-top:var(--s4);max-width:none}
.eq-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-top:var(--s5);padding:var(--s4) var(--s5);background:var(--paper);border-top:1px solid var(--grid)}
.eq-foot small{font-size:var(--t-xs);color:var(--muted);max-width:28ch}
.eq-send{border:0;cursor:pointer;font-family:Montserrat,sans-serif}
.eq-send[aria-busy="true"]{opacity:.7;pointer-events:none}
.eq-done{padding:var(--s7) var(--s5);text-align:center;display:grid;justify-items:center;gap:var(--s3)}
.eq-done[hidden]{display:none}
.eq-tick{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--orange);color:var(--ink)}
.eq-done .eq-h:focus{outline:none}
.eq-msg{color:var(--slate);max-width:var(--measure-narrow)}
.eq-close{background:none;border:0;font:inherit;font-weight:700;font-size:var(--t-sm);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:var(--s2)}
@media(max-width:37.5em){
  .eq{width:100vw;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:1rem 1rem 0 0}
  .eq-f{grid-template-columns:1fr}
  .eq-foot{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom, 0px))}
}

/* ---- Follow the trail: one orange line runs down the page, every section and day a stop on it ---- */
.trail{--rail:3.5rem;position:relative;padding-left:var(--rail)}
@media(max-width:43.75em){.trail{--rail:2.25rem}}
.trail::before{content:"";position:absolute;left:calc(.75rem - 1.5px);top:-1rem;bottom:0;border-left:3px dashed var(--orange)}
.trail .stop{position:relative;--pad:0px;padding-top:var(--pad)}
.trail .stop + .stop{--pad:var(--s8)}
.trail .stop::before{content:"";position:absolute;left:calc(-1 * var(--rail));top:calc(var(--pad) + .1rem);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--bone)}
.stop .k{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.stop > .tp-h{margin-top:var(--s1)}
.stop > .lead{margin-top:var(--s1)}
/* the days sit on the same line as small stops */
.trail .tl::before{display:none}
.trail .tl > li{padding-left:0}
.trail .tl > li::before{left:calc(-1 * var(--rail) + .25rem);top:.25rem;width:1rem;height:1rem;border-width:3px;background:var(--bone);box-shadow:0 0 0 4px var(--bone)}
.trail .tl > li.trek::before{background:var(--orange)}
.trail .tl.clip::after{left:calc(-1 * var(--rail))}

/* ---- the line map: real contours in ink on Empact orange, the route in bone ---- */
.lmap{--lm-bg:var(--bone);position:relative;margin-top:var(--s5);width:100%;background:var(--lm-bg);box-shadow:inset 0 0 0 1px var(--grid);border-radius:.75rem;overflow:hidden;color:var(--ink);
  font-family:Montserrat,system-ui,sans-serif;container-type:inline-size}
.lm-c,.lm-r{position:absolute;inset:0;width:100%;height:100%}
.lm-c{opacity:.28}   /* the land as a quiet hairline texture; the route carries the colour */
.lm-r polyline{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.lm-cas{stroke:var(--lm-bg);stroke-width:9}
.lm-line{stroke:var(--orange);stroke-width:4.5}   /* one solid orange line for the route */
.lm-line.flight{stroke-width:2.5;stroke-dasharray:1 8}
/* separate day trips from one base: a thin line out to each place, the base a square, not a number in a row */
.lm-line.spoke{stroke-width:2;stroke-dasharray:6 6;stroke-linecap:round}
.lmap .lm-pin.lm-base .dot{border-radius:.3rem;background:var(--orange);color:var(--paper)}
.lm-pin.many .lab b:not(:first-child){margin-top:.35rem}
.lm-pin.many .lab{top:auto;bottom:-.9rem;transform:none}
.lm-pin.many.r .lab{background-position:0 calc(100% - .9rem)}
.lm-pin.many.l .lab{background-position:100% calc(100% - .9rem)}
.lm-pin.edge .lab{top:1.5rem;bottom:auto;transform:none;left:-1rem;right:auto;padding:0;background:none;text-align:left}
.lm-pin.edge.l .lab{left:auto;right:-1rem;text-align:right}
.lm-pin.edge .dot{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lm-bg)}
.lm-t{position:absolute;left:0;right:0;top:4.5%;text-align:center;font-weight:800;font-size:clamp(.7rem,1.6cqi,.9rem);letter-spacing:.32em;text-transform:uppercase;max-width:none}
.lm-n{position:absolute;right:3.5%;top:4%;display:grid;justify-items:center;font-weight:900;font-size:.8rem;line-height:1}
.lm-n::before{content:"";width:0;height:0;border-left:.35rem solid transparent;border-right:.35rem solid transparent;border-bottom:.8rem solid var(--ink);margin-bottom:.2rem}
.lm-pin{position:absolute;width:0;height:0}
.lm-pin .dot{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:2rem;height:2rem;padding-inline:.45rem;border-radius:999px;
  background:var(--ink);color:var(--bone);font-weight:900;font-size:.75rem;white-space:nowrap;box-shadow:0 0 0 3px var(--lm-bg)}
.lm-pin .lab{position:absolute;top:0;transform:translateY(-50%);display:flex;flex-direction:column;gap:.1rem;font-size:clamp(.7rem,1.4cqi,.82rem);
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(var(--ink),var(--ink)) no-repeat}
.lm-pin.r .lab{left:1.6rem;padding-left:2.1rem;background-position:0 50%;background-size:1.5rem 1.5px}
.lm-pin.l .lab{right:1.6rem;padding-right:2.1rem;text-align:right;background-position:100% 50%;background-size:1.5rem 1.5px}
/* the places around the route: quieter than the stops */
.lm-pl{position:absolute;width:0;height:0}
.lm-pl i{position:absolute;transform:translate(-50%,-50%);width:.45rem;height:.45rem;border-radius:50%;background:var(--ink)}
.lm-pl.peak i{width:0;height:0;border-radius:0;background:none;border-left:.32rem solid transparent;border-right:.32rem solid transparent;border-bottom:.55rem solid var(--ink)}
.lm-pl .pl-lab{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;font-size:clamp(.7rem,1.25cqi,.78rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.82;text-shadow:0 0 2px var(--lm-bg),0 0 4px var(--lm-bg),0 0 8px var(--lm-bg)}
.lm-pl.r .pl-lab{left:.55rem}
.lm-pl.l .pl-lab{right:.55rem;text-align:right}
.lm-pl .pl-lab span{display:block;font-weight:600;letter-spacing:.08em;font-size:.9em}
.lm-pl.village .pl-lab{font-weight:600;text-transform:none;letter-spacing:.04em}
.lm-pl.via i{width:.6rem;height:.6rem;background:var(--bone);border:2px solid var(--ink)}
.lm-pl.via .pl-lab{font-weight:800;opacity:1}
/* the land around the route (trips/context.py): water, parks, district lines and the border sit under it
   as one drawing; district, park and country names, landmarks, lakes and rivers are named on top */
.lm-x{position:absolute;inset:0;width:100%;height:100%}
.lm-area{position:absolute;width:0;height:0;pointer-events:none}
.lm-area span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:max-content;white-space:nowrap;text-align:center;
  font-size:clamp(.56rem,1.05cqi,.66rem);font-weight:700;line-height:1.25;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:.52;
  text-shadow:0 0 2px var(--lm-bg),0 0 4px var(--lm-bg)}
.lm-area.park span{color:#4F5D3B;opacity:.9;letter-spacing:.08em;text-transform:none;font-weight:700;white-space:normal;max-width:10em}
.lm-area.country span{letter-spacing:.42em;font-weight:800;opacity:.46}
.lm-pl.landmark i{width:.46rem;height:.46rem;border-radius:1px;background:var(--lm-bg);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.lm-pl.airport i{width:.5rem;height:.5rem;border-radius:1px;background:var(--ink);box-shadow:0 0 0 1.5px var(--lm-bg)}
.lm-pl.landmark .pl-lab,.lm-pl.airport .pl-lab{font-weight:700;text-transform:none;letter-spacing:.03em}
.lm-pl.lake i,.lm-pl.river i{width:.3rem;height:.3rem;opacity:0}
.lm-pl.toward i{width:1.25rem;height:1.25rem;transform:translate(-50%,-50%) rotate(var(--a));background:none;border-radius:0}
.lm-pl.toward i::before{content:"";position:absolute;left:0;top:50%;width:.8rem;height:2px;margin-top:-1px;background:var(--ink)}
.lm-pl.toward i::after{content:"";position:absolute;right:0;top:50%;margin-top:-.3rem;width:0;height:0;border-left:.55rem solid var(--ink);border-top:.3rem solid transparent;border-bottom:.3rem solid transparent}
.lm-pl.toward .pl-lab{font-weight:800;text-transform:none;letter-spacing:.03em}
.lm-pl.lake .pl-lab,.lm-pl.river .pl-lab{color:#3E6375;opacity:1;font-weight:700;text-transform:none;letter-spacing:.05em}
@media(max-width:32.5em){.lm-pl:not(.via) .pl-lab{display:none}
  .lm-area span{font-size:.5rem;letter-spacing:.14em}.lm-area.park span{display:none}.lmap .lm-pl .pl-lab{display:block;font-size:.6rem;letter-spacing:.02em;text-transform:none}.lmap .lm-pl .pl-lab span{display:none}.lmap .lm-pl.toward .pl-lab span{display:block}}   /* phones: places as markers only, so the stops stay readable */
.lm-pin .lab,.lm-t,.lm-scale{text-shadow:0 0 2px var(--lm-bg),0 0 4px var(--lm-bg),0 0 8px var(--lm-bg)}
.lm-pin .lab b{font-weight:800}
.lm-pin .lab span{font-weight:600;letter-spacing:.1em}
.lm-scale{position:absolute;left:3.5%;bottom:4.5%;display:grid;gap:.3rem;font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;width:100%;pointer-events:none}
.lm-scale span{display:block;height:.45rem;border:1.5px solid var(--ink);border-top:0}
@media(max-width:32.5em){.lm-line{stroke-width:3.5}.lm-cas{stroke-width:7}.lmap.busy .lm-pin .lab{display:none}.lmap.busy .lm-pin .dot{min-width:1.6rem;height:1.6rem;font-size:.7rem;padding-inline:.3rem;box-shadow:0 0 0 2px var(--lm-bg)}}
@media(max-width:32.5em){.lm-pin .lab span{display:none}.lm-pin.r .lab,.lm-pin.l .lab{left:50%;right:auto;top:1.35rem;transform:translateX(-50%);padding:0;background:none;text-align:center}}
/* trip.js lays out every name (figure.t-on): each label sits in its own clear spot, joined to its number
   by a thin leader line where it has moved out; .t-compact keeps the name alone where a map is tight */
.lmap.t-on .lm-pin .lab{display:flex}
.lmap .lm-pin .lab.t-free{left:0;top:0;right:auto;bottom:auto;transform:none;padding:0;background:none;text-align:left}
.lmap .lm-pin .lab.t-free.t-l{text-align:right}
.lmap .lm-pin .lab.t-free.t-c{text-align:center}
.lmap .lm-pin .lab.t-compact span{display:none}
.lmap .lm-pin .lab.t-tiny{width:max-content;max-width:8.5em;white-space:normal;font-size:.66rem;letter-spacing:.02em;text-transform:none;line-height:1.1}
.lmap .lm-pin .lab.t-tiny b{font-weight:800}
.lmap .lm-pl .pl-lab.t-free{left:0;top:0;right:auto;transform:none;text-align:left}
.lmap .lm-pl .pl-lab.t-free.t-l{text-align:right}
.lmap .lm-pl .pl-lab.t-free.t-c{text-align:center}
/* dense maps get smaller number circles */
.lmap.t-small .lm-pin .dot{min-width:1.5rem;height:1.5rem;font-size:.66rem;padding-inline:.3rem;box-shadow:0 0 0 2px var(--lm-bg)}
/* small maps: the decorative title steps aside and the number circles shrink, leaving room for the names */
@media(max-width:32.5em){.lmap.t-on .lm-t{display:none}.lmap.t-on .lm-pin .dot{min-width:1.2rem;height:1.2rem;font-size:.6rem;padding-inline:.22rem;box-shadow:0 0 0 1.5px var(--lm-bg)}
  .lm-lead line{stroke-width:1}}
.lm-key{position:absolute;display:grid;gap:.2rem;font-size:.66rem;font-weight:800;line-height:1.15;color:var(--ink);
  text-shadow:0 0 2px var(--lm-bg),0 0 4px var(--lm-bg),0 0 8px var(--lm-bg)}
.lm-key span{display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.lm-key i{font-style:normal;display:grid;place-items:center;min-width:1.2rem;height:1.2rem;padding-inline:.2rem;border-radius:999px;
  background:var(--ink);color:var(--bone);font-size:.58rem;text-shadow:none}
.lm-key-out{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-top:var(--s2);font-size:.72rem;text-shadow:none;color:var(--slate)}
.lm-key-out span{color:var(--ink)}
.lm-lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lm-lead line{stroke:var(--ink);stroke-width:1.25;stroke-linecap:round}
.lm-lead line.tick{stroke-width:1.5}
.lm-lead circle{fill:var(--ink);stroke:var(--lm-bg);stroke-width:1.5}
/* the off-map ends (Kathmandu and the like) keep their ink ring at every size, so the white circle shows on cream */
.lmap .lm-pin.edge .dot{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lm-bg)}
/* a stop beyond the edge of the map: a small arrow outside its circle points to where it really is */
.lm-pin .dot .out{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--d,1.4rem))}
.lm-pin .dot .out::after{content:"";position:absolute;left:-.3rem;top:-.3rem;border-left:.5rem solid var(--ink);border-top:.3rem solid transparent;border-bottom:.3rem solid transparent}
.lmap.t-small .lm-pin .dot .out{transform:rotate(var(--a)) translateX(calc(var(--d,1.4rem) * .78))}
@media(max-width:32.5em){.lmap.t-on .lm-pin .dot .out{transform:rotate(var(--a)) translateX(calc(var(--d,1.4rem) * .64))}.lm-pin .dot .out::after{left:-.22rem;top:-.22rem;border-left-width:.38rem;border-top-width:.22rem;border-bottom-width:.22rem}}
.map-stops{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:43.75em){.map-stops{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}}
.map-stops li{display:flex;gap:var(--s3);align-items:flex-start;max-width:none}
.map-stops .n{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:900;font-size:var(--t-xs)}
.map-stops b{display:block;font-weight:800}
.map-stops li > span > span{display:block;font-size:var(--t-sm);color:var(--slate)}
.map-note{margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted);max-width:none}

/* ===== Collapsible sections: numbered rows that open in place (the other looks tried in draft/trip-sections/ were dropped) ===== */
.secs{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.sec{min-width:0}
.sec{border-top:1px solid var(--grid)}
.sec:last-child{border-bottom:1px solid var(--grid)}
.sec > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;padding:var(--s5) 0;
  scroll-margin-top:calc(var(--dock) + var(--tabs-h) + var(--s3))}
.sec > summary::-webkit-details-marker{display:none}
/* a tab, or a link with #map and the like, brings a section's heading to just below the nav (as it docks on the
   way down) and the tabs; the page's own scroll padding is for the home page's nav, so trip pages drop it */
html:has(> body.trip){scroll-padding-top:0}
details.sec{scroll-margin-top:calc(4.5rem + env(safe-area-inset-top, 0px) + var(--tabs-h) + var(--s3))}
/* orange passes only as large text (3:1), so the number is set at 19px bold, never smaller */
.sec-n{font-weight:800;font-size:var(--t-md);color:var(--orange);letter-spacing:.02em;font-variant-numeric:tabular-nums;min-width:2ch}
.sec-t{display:grid;gap:.15rem;min-width:0}
/* the number sits on the heading's baseline, whether or not a line of detail follows it */
.sec-n,.sec-t{align-self:first baseline}
.sec-h{font-size:var(--t-xl);line-height:var(--lh-snug)}
.sec-peek{font-size:var(--t-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-chev{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1.5px solid var(--grid);transition:transform .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.sec > summary:hover .sec-chev{border-color:var(--ink)}
.sec[open] > summary .sec-chev{transform:rotate(90deg);background:var(--ink);border-color:var(--ink);color:var(--bone)}
.sec[open] > summary .sec-peek{visibility:hidden}
.sec-body{padding:0 0 var(--s7) calc(2ch + var(--s4))}
@media(max-width:43.75em){.sec-body{padding-left:0}.sec-h{font-size:var(--t-lg)}.sec > summary{padding:var(--s4) 0}}
.sec-body > :first-child{margin-top:0}
.sec[open] .sec-body{animation:secIn .35s var(--ease)}
@keyframes secIn{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.sec[open] .sec-body{animation:none}.sec-chev{transition:none}}
.sec-tools{display:flex;justify-content:flex-end;margin:-.5rem 0 var(--s3)}
.sec-tools button{background:none;border:0;font:inherit;font-weight:700;font-size:var(--t-sm);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the days: a quiet list; days with more to say open in place */
.days2{list-style:none;border-top:1px solid var(--grid)}
.days2 > li{max-width:none;border-bottom:1px solid var(--grid)}
.days2 .dy{display:grid;grid-template-columns:5.5rem 1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0}
.days2 details.dy{display:block;padding:0}
.days2 details.dy > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:5.5rem 1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0}
.days2 details.dy > summary::-webkit-details-marker{display:none}
.days2 .dn{font-weight:800;font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.days2 .dt{font-weight:700}
.days2 .dch{color:var(--muted);transition:transform .2s var(--ease);align-self:center}
.days2 details[open] .dch{transform:rotate(90deg);color:var(--ink)}
.days2 details.dy p,.days2 details.dy ul{padding:0 0 var(--s4) calc(5.5rem + var(--s3));color:var(--slate);max-width:none}
.days2 details.dy ul{padding-left:calc(5.5rem + var(--s3) + 1.1rem)}
@media(max-width:32.5em){.days2 .dy,.days2 details.dy > summary{grid-template-columns:4.2rem 1fr auto}.days2 details.dy p{padding-left:0}.days2 details.dy ul{padding-left:1.1rem}}



/* touch screens: the small text links and buttons get a full 44 px tap area */
@media(pointer:coarse){
  .crumb a,.more-all,.extras a,.sec-tools button,.tl-more{display:inline-flex;align-items:center;min-height:2.75rem}
  .tabs a{padding-inline:var(--s1)}
}

/* the narrowest phones: the bottom bar keeps "16 days" on one line beside the button */
@media(max-width:23.75em){.b-bar{gap:var(--s2);padding-inline:var(--s4)}.b-bar b{white-space:nowrap}.b-bar .pill{padding-inline:var(--s3);font-size:var(--t-xs)}}

/* ---- Add to my trip (assets/mytrip.js keeps it; /my-trip sends one enquiry for everything) ----
   Second to Enquire: an outline beside the orange pill. Once added it reads "Added. View my trip". */
.add-trip{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:2.75rem;margin-top:var(--s3);padding:0 var(--s5);
  border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);background:none;font-weight:800;font-size:var(--t-sm);
  text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.add-trip:hover{background:var(--ink);color:var(--paper)}
.add-trip .at-tick{display:none}
.add-trip.on .at-plus{display:none}
.add-trip.on .at-tick{display:block}
.add-trip.on{border-color:var(--grid);background:var(--bone)}
.add-trip.on:hover{border-color:var(--ink);background:var(--bone);color:var(--ink)}
.end .acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.add-trip.on-ink{margin-top:0;border-color:var(--rule-on-ink);color:var(--bone)}
.add-trip.on-ink:hover,.add-trip.on-ink.on{border-color:var(--bone);background:none;color:var(--bone)}
.b-acts{display:flex;align-items:center;gap:var(--s2);flex:none}
.add-trip.at-icon{width:2.75rem;margin:0;padding:0;flex:none}
@media(max-width:65.5625em){body.trip{--toast-lift:4.75rem}}
/* phones: the bar also holds Add to my trip, so the level goes (it is in the facts card), and on the
   narrowest phones the duration too, leaving the two buttons */
@media(max-width:26.25em){
  .b-bar{gap:var(--s2);padding-inline:var(--s4)}
  .b-bar b{white-space:nowrap}
  .b-bar span{display:none}
  .b-bar .pill{padding-inline:var(--s3)}
}
@media(max-width:23.75em){
  .b-bar > div:first-child{display:none}
  .b-acts{flex:1;gap:var(--s2)}
  .b-acts .pill{flex:1;justify-content:center;font-size:var(--t-sm)}
  .b-acts{min-width:0}.b-acts .pill{min-width:0;white-space:normal;text-align:center;line-height:1.2}   /* very large text: the label wraps, never runs off the screen */
}

/* ---- Questions first? WhatsApp, email and call as three small icons (trip pages' facts card, My trip) ---- */
.ask{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--grid);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ask p{font-size:var(--t-xs);font-weight:700;color:var(--muted);max-width:none}
.ask ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.ask a{display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-width:2.75rem;color:var(--ink);text-decoration:none}
.ask-i{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--bone);border:1px solid var(--grid);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.ask-i .i{width:1.15rem;height:1.15rem}
.ask-l{font-size:var(--t-xs);font-weight:700;color:var(--slate)}
.ask a:hover .ask-i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(pointer:coarse){.ask-i{width:2.75rem;height:2.75rem}}
@media(max-width:65.5625em){.ask{justify-content:flex-start;gap:var(--s5)}}
.ph-b.n1 > img:first-child{grid-column:1/-1}
.ph-b.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-b.n2 > img{grid-column:auto;grid-row:span 2}
.lm-scale.r{left:auto;right:3.5%;justify-items:end;text-align:right}
@media(min-width:43.75em){.say figure:nth-child(3){grid-column:1/-1}}   /* a third review takes the full width */

/* an exit arrow's words, when they go in the key under the map: the same small arrow, pointing the same way */
.lm-key-out i.k-exit{position:relative;background:none;box-shadow:none;width:1.1rem;transform:rotate(var(--a,0deg))}
.lm-key-out i.k-exit::before{content:"";position:absolute;left:.1rem;top:50%;width:.6rem;height:2px;margin-top:-1px;background:var(--ink)}
.lm-key-out i.k-exit::after{content:"";position:absolute;right:.05rem;top:50%;margin-top:-.28rem;border-left:.45rem solid var(--ink);border-top:.28rem solid transparent;border-bottom:.28rem solid transparent}

/* ---- a page per kind of trip (explore/, trips/build_types.py): the type's photo, then its trips as cards ---- */
.xpage .xh{min-height:min(78svh,44rem)}
.xs{padding-block:var(--s8);border-top:1px solid var(--grid)}
.xs:first-of-type{border-top:0}
.xg{display:grid;gap:var(--s6) var(--s5);margin-top:var(--s6);grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}   /* every card the same height */
@media(min-width:40em){.xg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:65.625em){.xg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.xc{display:flex;flex-direction:column;background:var(--bone);border-radius:.75rem;overflow:hidden;box-shadow:inset 0 0 0 1px var(--grid);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.xc:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ink)}
.xc-pic{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}   /* every photo the same 3:2 box, whatever its own shape */
.xc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xc-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.xc-badge{position:absolute;top:var(--s3);left:var(--s3);z-index:1;padding:.3rem .6rem;border-radius:999px;background:var(--orange);color:var(--ink);font-size:var(--t-xs);font-weight:800;letter-spacing:var(--tr-label);text-transform:uppercase;line-height:1.2}   /* on the photo, so every card's name and facts line up */
.xc h3{font-size:var(--t-lg);font-weight:800;letter-spacing:var(--tr-head);line-height:var(--lh-snug)}
.xc h3 a{color:var(--ink);text-decoration:none}
.xc h3 a::after{content:"";position:absolute;inset:0}   /* the whole card opens the trip */
.xc{position:relative;min-height:33rem}   /* the same height in every list on the page, even when one list has a shorter card */
@media(min-width:56.25em) and (max-width:65.5625em){.xc{min-height:34.5rem}}   /* two wide columns: the taller photo needs the room */
@media(max-width:39.9375em){.xc{min-height:31rem}}   /* one column: a little less room is needed */
.xc p{color:var(--slate);font-size:var(--t-sm);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.xc-facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s2);font-size:var(--t-sm);font-weight:700}
.xc-facts li{display:inline-flex;align-items:center;gap:.35rem;max-width:none}
.xc-facts .i{color:var(--orange)}
.xc-acts{margin-top:auto;padding-top:var(--s4);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);position:relative;z-index:1}
.xc-go{display:inline-flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--t-sm);color:var(--ink);text-decoration:none;min-height:2.75rem}
.xc-go:hover{color:var(--orange)}
.xo-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.xo{display:inline-flex;align-items:center;gap:var(--s3);padding:.4rem var(--s4) .4rem .4rem;border-radius:999px;background:var(--bone);box-shadow:inset 0 0 0 1px var(--grid);color:var(--ink);text-decoration:none;font-weight:800;font-size:var(--t-sm);min-height:2.75rem}
.xo .disc{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--orange);color:var(--ink)}
.xo .disc .i{width:1.2rem;height:1.2rem}
.xo:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.xo.on{background:var(--ink);color:var(--bone)}
/* the page any missing address shows (404.html) */
.b-top .sub a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.nf-all{margin-top:var(--s6)}

/* ---- every trip by kind (all-trips.html): a row per kind, each a rail of the home page's Originals cards ---- */
.at-top .xo-row{margin-top:var(--s6)}
.at-top .xo{background:var(--paper-tint);box-shadow:inset 0 0 0 1px var(--rule-on-ink);color:var(--bone)}
.at-top .xo:hover{box-shadow:inset 0 0 0 1px var(--bone)}
/* phones: the kinds sit on one line that swipes, edge to edge, instead of a tall stack */
@media(max-width:43.75em){
  .at-top .xo-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--s5));padding:var(--s1) var(--s5)}
  .at-top .xo-row::-webkit-scrollbar{display:none}
  .at-top .xo{flex:none}
}
.at-sec{padding-block:var(--s8) var(--s6);scroll-margin-top:var(--s5)}
.at-sec:nth-of-type(even){background:var(--paper)}
.at-n{margin-left:var(--s2);font-size:var(--t-sm);font-weight:800;letter-spacing:0;color:var(--muted);vertical-align:middle;white-space:nowrap}
.at-rail{position:relative;margin-top:var(--s6);--cw:82%}
@media(min-width:38.75em){.at-rail{--cw:calc((100% - var(--s5)) / 2)}}
@media(min-width:56.25em){.at-rail{--cw:calc((100% - 2 * var(--s5)) / 3)}}
@media(min-width:67.5em){.at-rail{--cw:calc((100% - 3 * var(--s5)) / 4)}}
.at-track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:var(--s5);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:var(--s1) var(--s3)}
.at-track::-webkit-scrollbar{display:none}
.at-track:focus-visible{outline:2.5px solid var(--orange);outline-offset:4px}
/* round arrows half over the rail's edge, centred on the photos (--bt is measured by rails.js) */
.at-btn{position:absolute;z-index:2;top:var(--bt,30%);width:3.5rem;height:3.5rem;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop);transition:background .2s var(--ease),opacity .25s var(--ease),visibility .25s}
.at-btn[hidden]{display:none}
.at-btn.prev{left:0;transform:translate(-35%,-50%)}
.at-btn.next{right:0;transform:translate(35%,-50%)}
.at-btn:hover{background:var(--orange)}
.at-btn:disabled{opacity:0;visibility:hidden}
@media(max-width:38.6875em){.at-btn{width:3rem;height:3rem}.at-btn.prev{transform:translate(-15%,-50%)}.at-btn.next{transform:translate(15%,-50%)}}
.tc{display:flex;flex-direction:column;scroll-snap-align:start;background:var(--paper);border:1px solid var(--grid);overflow:hidden;position:relative}
.at-sec:nth-of-type(even) .tc{background:var(--bone)}
.tc-im{aspect-ratio:4/3;background:var(--grid);overflow:hidden}
.tc-im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--slow)}
.tc:hover .tc-im img{transform:scale(1.04)}
.tc-body{display:flex;flex-direction:column;flex:1;padding:var(--s5) var(--s4) var(--s4)}
.tc-cat{font-weight:800;font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.tc h3{margin-top:var(--s2);min-height:2.6em;font-size:var(--t-lg);font-weight:900;letter-spacing:var(--tr-head);line-height:var(--lh-snug)}
.tc-facts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s3);color:var(--muted)}
.tc .fact{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.tc-d{color:var(--slate);font-size:var(--t-sm);margin:var(--s3) 0 var(--s5);max-width:34ch}
.tc-go{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:auto;align-self:stretch;min-height:2.75rem;
  background:var(--ink);color:var(--bone);font-weight:800;font-size:var(--t-sm);padding:var(--s3) var(--s4);text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease)}
.tc-go::after{content:"";position:absolute;inset:0}   /* the whole card opens the trip */
.tc-go:hover,.tc:hover .tc-go{background:var(--orange);color:var(--ink)}
.tc-go .i{transition:transform .3s var(--ease)}
.tc:hover .tc-go .i{transform:translateX(3px)}
.at-help{background:var(--bone)}
.at-help .sub{margin-top:var(--s3);color:var(--slate);max-width:var(--measure-narrow)}
.at-help .pill{margin-top:var(--s5)}
@media(prefers-reduced-motion:reduce){.tc-im img,.tc-go .i{transition:none}.tc:hover .tc-im img{transform:none}}
/* touch screens: the slideshow arrows at a full tap size */
@media(pointer:coarse){.ss-btn{width:2.75rem;height:2.75rem}}
/* the small note under each map keeps a readable line length on wide screens */
.map-note{max-width:75ch}
/* phones turned sideways (short and wide): the nav, the section tabs and the bottom bar took half the screen.
   The tabs now scroll away with the page (sections are a scroll away, and the Map, Photos and other headings
   open in place) and the bottom bar is slimmer, so the trip gets two thirds of the screen */
@media(max-height:31.25em) and (orientation:landscape){
  .trip{--tabs-h:0px}
  .tabs{position:static}
  .b-bar{padding-block:var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px))}
  details.sec{scroll-margin-top:calc(4.5rem + env(safe-area-inset-top, 0px) + var(--s3))}
}