/* =================================================================
   Barnowl Adventures — site styles
   -----------------------------------------------------------------
   Ported verbatim from docs/design-reference.html, which is the
   approved visual contract. Do not redesign. Tokens below are the
   only source of colour and type — never write a raw hex in a
   template; add a variable or a utility class here instead.
   ================================================================= */

:root{
  --ink:#191310;
  --ink-2:#241C17;
  --sand:#F6F1E8;
  --sand-2:#EFE8DB;
  --white:#FFFFFF;
  --grey:#7A7068;
  --line:#E2DACB;
  --line-d:rgba(246,241,232,.16);
  --amber:#D98E2B;
  --honey:#F0B44E;
  --clay:#9E4A26;
  --olive:#3A4430;
  --disp:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(18px,4.4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wrap{max-width:1380px;margin:0 auto;padding-inline:var(--gut)}

.d1,.d2,.d3{font-family:var(--disp);font-weight:800;font-stretch:82%;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
.d1{font-size:clamp(40px,7.2vw,96px)}
.d2{font-size:clamp(30px,4.6vw,60px)}
.d3{font-size:clamp(21px,2.4vw,31px);font-weight:700;line-height:1}
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.lede{font-size:clamp(16.5px,1.35vw,19px);color:#4C443E;line-height:1.65}

/* ---- reveal system ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}

/* ---- announcement ---- */
.ann{background:var(--ink);color:var(--honey);font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;padding:9px 0;border-bottom:1px solid rgba(240,180,78,.22)}
.ann .wrap{display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.ann a{border-bottom:1px solid rgba(240,180,78,.55);font-weight:500}
.ann .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* ---- nav ---- */
.nav{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;gap:30px;height:72px}
.logo{margin-right:auto;display:block;width:auto}
.logo img{height:44px;width:auto;object-fit:contain}
.nav a.n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B5AA9E;transition:color .15s;position:relative;padding-block:6px}
.nav a.n::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--amber);transition:width .28s cubic-bezier(.22,1,.36,1)}
.nav a.n:hover{color:#fff}
.nav a.n:hover::after{width:100%}
@media(max-width:980px){.nav a.n{display:none}}

.btn{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;transition:.22s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.btn-amber{background:var(--amber);color:#211812}
.btn-amber:hover{background:var(--honey);transform:translateY(-2px)}
.btn-out{border:1px solid currentColor}
.btn-out:hover{background:var(--amber);color:#211812;border-color:var(--amber);transform:translateY(-2px)}

/* ---- hero ---- */
.hero{position:relative;min-height:clamp(540px,88vh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:-2%;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.11) translate3d(-1.5%,-1.5%,0)}}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,19,16,.52) 0%,rgba(25,19,16,.08) 34%,rgba(25,19,16,.72) 72%,rgba(25,19,16,.94) 100%)}
.hero-in{position:relative;z-index:2;width:100%;color:#fff;padding-block:clamp(36px,6vw,78px)}
.hero .d1{margin:16px 0 18px;max-width:17ch}
.hero .d1 em{font-style:normal;color:var(--honey)}
.hero .lede{color:#DCD3C8;max-width:52ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .kicker{color:#F0E7DA}
.scroll-hint{position:absolute;right:var(--gut);bottom:clamp(36px,6vw,78px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#BFB4A6;writing-mode:vertical-rl}
.scroll-hint i{display:block;width:1px;height:54px;background:linear-gradient(180deg,transparent,var(--amber));animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(max-width:900px){.scroll-hint{display:none}}

/* ---- marquee ---- */
.marq{background:var(--amber);color:#211812;overflow:hidden;padding:13px 0;border-block:1px solid rgba(33,24,18,.16)}
.marq-t{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.marq-t span{font-family:var(--disp);font-weight:800;font-stretch:80%;text-transform:uppercase;font-size:17px;letter-spacing:.02em;padding-inline:26px;display:flex;align-items:center;gap:26px;white-space:nowrap}
.marq-t span::after{content:"";width:7px;height:7px;background:#211812;border-radius:50%;opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}
.marq:hover .marq-t{animation-play-state:paused}

/* ---- stats ---- */
.stats{background:var(--sand);padding-block:clamp(44px,5.5vw,76px)}
.stat-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.stat-g{grid-template-columns:repeat(2,1fr)}}
.st{background:var(--sand);padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,26px);text-align:center}
.st b{display:block;font-family:var(--disp);font-weight:800;font-stretch:80%;font-size:clamp(38px,5vw,62px);line-height:1;color:var(--ink)}
.st b i{font-style:normal;color:var(--amber)}
.st span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:12px}

/* ---- band ---- */
.band{background:var(--white);padding-block:clamp(56px,7vw,104px);text-align:center}
.band .d2{max-width:20ch;margin:0 auto 22px}
.band .lede{max-width:68ch;margin:0 auto}

.sec{padding-block:clamp(56px,7vw,104px)}
.sec-head{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:flex-end;margin-bottom:clamp(26px,3.5vw,44px)}
.sec-head .d2{max-width:18ch}
.sec-head .right{margin-left:auto}

/* ---- tours ---- */
.tour{display:block;border-top:1px solid var(--line);padding-block:clamp(28px,4vw,54px);transition:background .3s}
.tour:hover{background:var(--sand)}
.tour-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,3.4vw,54px);align-items:start}
@media(max-width:900px){.tour-in{grid-template-columns:1fr;gap:18px}}
.shotwrap{position:relative;padding:0 0 16px 16px}
.shotwrap::before{content:"";position:absolute;left:0;bottom:0;width:56%;height:62%;background:var(--amber);opacity:0;transform:translate(10px,-10px);transition:.55s cubic-bezier(.22,1,.36,1)}
.tour:hover .shotwrap::before{opacity:.9;transform:none}
.shot{position:relative;z-index:1;aspect-ratio:3/2;overflow:hidden;background:var(--sand-2)}
.shot img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tour:hover .shot img{transform:scale(1.055)}
.pill{position:absolute;top:0;left:0;z-index:3;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:8px 13px;background:var(--amber);color:#211812}
.pill.wait{background:var(--ink);color:var(--honey)}
.pill.soon{background:var(--olive);color:#E4EAD9}
.where{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.tour .d3{margin:10px 0 12px}
.tour p{color:#4C443E;max-width:48ch;font-size:16.5px}
.spec{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);margin-top:22px;background:var(--white)}
@media(max-width:520px){.spec{grid-template-columns:repeat(3,1fr)}}
.spec div{padding:12px 12px 13px;border-right:1px solid var(--line);transition:background .25s}
.spec div:last-child{border-right:0}
.tour:hover .spec div{background:var(--white)}
@media(max-width:520px){.spec div:nth-child(3n){border-right:0}.spec div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
.spec dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:6px}
.spec dd{font-family:var(--disp);font-weight:700;font-stretch:84%;line-height:1.05}
.spec dd s{text-decoration:none;font-family:var(--body);font-weight:400;font-size:12px;color:var(--grey);margin-left:2px}
.row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:22px}
.price{font-family:var(--mono);font-size:13px;color:var(--grey)}
.price b{font-family:var(--disp);font-weight:700;font-stretch:84%;font-size:21px;color:var(--ink);margin-right:3px}
.go{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:500}
.go i{font-style:normal;display:inline-block;transition:transform .24s}
.tour:hover .go i{transform:translateX(6px)}

/* ---- break ---- */
.break{position:relative;height:clamp(320px,56vh,600px);background:var(--ink);overflow:hidden}
.break img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.break.in img{transform:scale(1)}
.break .cap{position:absolute;left:0;bottom:0;z-index:2;color:#fff;padding:var(--gut);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.75)}

/* ---- approach ---- */
.dark{background:var(--ink);color:#fff}
.dark .lede{color:#BEB2A6}
.dark .kicker{color:#9A8E82}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.cellx{background:var(--ink);padding:clamp(24px,2.8vw,36px);transition:background .3s;position:relative}
.cellx::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--amber);transition:width .45s cubic-bezier(.22,1,.36,1)}
.cellx:hover::before{width:100%}
.cellx:hover{background:var(--ink-2)}
.cellx .no{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.16em;display:block;margin-bottom:18px}
.cellx h3{font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;font-size:19px;line-height:1.05;margin-bottom:10px}
.cellx p{color:#B3A79B;font-size:16px;line-height:1.6}

/* ---- proof ---- */
.proof{background:var(--sand)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:880px){.quotes{grid-template-columns:1fr}}
.q{background:var(--white);padding:clamp(24px,2.6vw,34px);border-top:3px solid var(--amber);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.q:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(25,19,16,.09)}
.q blockquote{font-size:16.5px;line-height:1.58;color:#3B342F}
.q .who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.q .who b{display:block;font-family:var(--disp);font-weight:700;font-stretch:86%;text-transform:uppercase;font-size:15px}
.q .who span{display:block;font-size:13.5px;color:var(--grey);margin-top:3px}
.q .who em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-top:8px}

/* ---- reserve ---- */
.reserve{background:var(--olive);color:#fff;position:relative;overflow:hidden}
.reserve::before{content:"";position:absolute;right:-8%;top:-30%;width:46%;height:160%;background:radial-gradient(circle,rgba(217,142,43,.22),transparent 68%)}
.reserve-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(48px,6vw,92px)}
@media(max-width:880px){.reserve-in{grid-template-columns:1fr}}
.reserve p{color:#CBD4BE;margin-top:16px;max-width:44ch}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:18px;align-items:flex-start;font-size:16px;color:#DDE4D3;padding-block:16px;border-top:1px solid rgba(255,255,255,.16)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.step b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--honey);padding-top:4px;flex:none}
.reserve .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fine{font-family:var(--mono);font-size:11.5px;color:#9DAE8C;margin-top:18px;letter-spacing:.03em}

/* ---- footer ---- */
footer{background:var(--ink);color:#fff;padding-block:clamp(44px,5vw,70px) 34px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:880px){.fg{grid-template-columns:1fr 1fr}.fg .f1{grid-column:1/-1}}
.fg p{color:#9C9084;font-size:15.5px;max-width:32ch;margin-top:16px}
.fg h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9A8E82;margin-bottom:16px}
.fg ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.fg ul a{color:#C9BEB2;transition:color .15s}
.fg ul a:hover{color:var(--honey)}
.base{margin-top:clamp(34px,4vw,52px);padding-top:20px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9A8E82}
.base .r{margin-left:auto}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero-img{inset:0}
}

/* =================================================================
   Template hooks
   -----------------------------------------------------------------
   The reference is a single static page, so a few of its values sat
   in inline style="" attributes. They are turned into classes here
   so no template carries a raw hex. Nothing below changes how the
   page looks.
   ================================================================= */

/* Skip link — invisible until focused by keyboard */
.skip{position:absolute;left:0;top:0;transform:translateY(-120%);z-index:100;background:var(--amber);color:#211812;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px}
.skip:focus{transform:none}

/* was style="margin-top:12px" on every kicker-then-heading pair */
.kicker+.d2{margin-top:12px}

/* was style="color:#fff" on outline buttons sitting on dark ground */
.hero .btn-out,.reserve .btn-out{color:#fff}

/* was style="color:#9DAE8C" on the reserve band kicker */
.reserve .kicker{color:#9DAE8C}

/* was style="max-width:38ch" on the approach section's standfirst */
.sec-head .lede.right{max-width:38ch}

/* footer logo sits slightly larger than the nav one (was style="height:42px") */
.logo-f img{height:50px}

/* =================================================================
   Mobile menu
   -----------------------------------------------------------------
   An addition beyond docs/design-reference.html, agreed with Sampath:
   the reference simply hides the nav links below 980px, which left
   phone visitors -- most of the paid traffic -- with no way through
   the site but the footer. Built from the same tokens as everything
   else. Above 980px none of it renders.
   ================================================================= */

/* visible only to screen readers */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.navtoggle{display:none}
.navmenu{display:none}

@media(max-width:980px){
  .navtoggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:14px;flex:none;
    background:none;border:1px solid var(--line-d);color:#fff;
    cursor:pointer;padding:0;transition:border-color .2s,background .2s;
  }
  .navtoggle:hover{border-color:var(--amber);background:rgba(217,142,43,.12)}

  /* three bars, drawn with the middle element and its two pseudo-elements */
  .navtoggle i,
  .navtoggle i::before,
  .navtoggle i::after{
    display:block;width:18px;height:1.5px;background:currentColor;
    transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s;
  }
  .navtoggle i{position:relative}
  .navtoggle i::before,
  .navtoggle i::after{content:"";position:absolute;left:0}
  .navtoggle i::before{top:-6px}
  .navtoggle i::after{top:6px}

  /* becomes a cross while the menu is open */
  .navtoggle[aria-expanded="true"] i{background:transparent}
  .navtoggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

  .navmenu{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--ink);border-top:1px solid var(--line-d);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .32s;
  }
  .navmenu.open{max-height:70vh;overflow-y:auto;visibility:visible;transition-delay:0s,0s}
  .navmenu .wrap{display:flex;flex-direction:column;padding-block:6px 18px}
  .navmenu a{
    font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:#B5AA9E;padding-block:16px;border-bottom:1px solid var(--line-d);transition:color .15s;
  }
  .navmenu a:last-child{border-bottom:0;color:var(--honey)}
  .navmenu a:hover,.navmenu a:focus-visible{color:#fff}
}

/* Narrow phones: the logo, the Reserve button and the new menu button
   do not all fit at 375px, and the Reserve button -- the thing the ads
   are paying for -- was the one being squashed. Tighten the spacing and
   step the logo down from 38px to 32px below 560px. Desktop is untouched. */
@media(max-width:560px){
  .nav-in{gap:12px}
  .nav .logo img{height:38px}
  .nav .btn-amber{padding:12px 14px;font-size:11px}
  .navtoggle{margin-left:0}
}

/* =================================================================
   Tour page
   -----------------------------------------------------------------
   The design reference covers the homepage only. Nothing here is a
   new visual idea -- every block reuses the reference's components
   (the spec strip, the dark section, the olive band, the bordered
   grid) so the tour page reads as the same site.
   ================================================================= */

.tour-hero{min-height:clamp(560px,78vh,820px)}
.tour-hero .d1{max-width:20ch;font-size:clamp(34px,5.4vw,74px)}
.tour-hero .lede{max-width:56ch}

/* spec strip sitting on the dark hero rather than on white */
.spec-dark{margin-top:clamp(24px,3vw,34px);border-color:var(--line-d);background:rgba(25,19,16,.42)}
.spec-dark div{border-right-color:var(--line-d)}
.spec-dark dd{color:#fff}
.spec-dark dt{color:#BFB4A6}
.spec-dark dd s{color:#BFB4A6}
@media(max-width:520px){.spec-dark div:nth-child(-n+3){border-bottom-color:var(--line-d)}}

/* the at-a-glance strip reuses the marquee bar, without the travel */
.marq-static{width:100%;animation:none;flex-wrap:wrap;justify-content:center}
.marq-static span{font-size:14px}
.marq-static span:last-child::after{display:none}

/* intro + facts */
.tour-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:900px){.tour-intro{grid-template-columns:1fr}}
.tour-para{margin-top:18px;max-width:64ch}
.tour-facts{border-top:2px solid var(--amber);background:var(--sand)}
.tour-facts div{display:flex;gap:16px;padding:14px clamp(16px,2vw,22px);border-bottom:1px solid var(--line)}
.tour-facts div:last-child{border-bottom:0}
.tour-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);flex:0 0 38%;padding-top:3px}
.tour-facts dd{font-size:15.5px;color:#3B342F;flex:1}
/* Airport links. Without this they inherit a{color:inherit;text-decoration:none}
   and read as plain text -- same amber underline as the hotel links in
   .day-spec, so an external link looks the same wherever it appears. */
.tour-facts dd a{border-bottom:1px solid var(--amber)}

/* UPI payment screen. The QR is Barnowl's own Kotak code, so it carries no
   amount and no reference -- the caption below it has to, or a desktop rider
   scanning it sends the wrong sum against nothing. */
.upi-qr{margin:24px 0 0;padding:clamp(16px,2vw,22px);background:var(--sand);
  border:1px solid var(--line);max-width:360px}
.upi-qr img{display:block;width:100%;height:auto;background:#fff}
.upi-qr figcaption{font-family:var(--mono);font-size:11.5px;line-height:1.6;
  letter-spacing:.03em;color:#4C443E;margin-top:14px}
.upi-qr strong{color:var(--ink);font-weight:600}
@media(max-width:560px){
  /* On a phone the deep-link button is the path that works; the code is a
     fallback, so it stops competing for the fold. */
  .upi-qr{max-width:260px}
}

/* the week, day by day -- one bar per day, height = metres climbed.
   Built from real text rather than an SVG so the day numbers, distances
   and place names stay legible and selectable at every width, and so the
   whole thing can turn into rows on a phone. */
.profile-sec{background:var(--sand)}
.week{--track:clamp(150px,21vw,220px);--gut-l:56px;margin:clamp(20px,2.6vw,34px) 0 0}
.week-plot{position:relative;height:var(--track);margin-left:var(--gut-l)}
.week-line{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line)}
.week-line:first-of-type{border-top-style:dashed}
.week-line i{position:absolute;right:calc(100% + 11px);top:-.66em;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey);white-space:nowrap}
.week-unit{position:absolute;left:calc(var(--gut-l)*-1);bottom:calc(100% + 9px);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.week-days{position:absolute;inset:0;z-index:1;display:grid;
  grid-template-columns:repeat(var(--n),1fr);gap:clamp(3px,.7vw,9px);
  list-style:none;margin:0;padding:0}
.wd{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.wd-track{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.wd-m{flex:none;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);
  text-align:center;line-height:1;padding-bottom:5px;min-height:11px;white-space:nowrap}
.wd-bar{width:100%;height:calc(var(--pct) * 1%);background:var(--amber);min-height:2px}
.wd-chip{width:100%;padding:5px 0;background:rgba(58,68,48,.13);color:var(--olive);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;line-height:1;white-space:nowrap;overflow:hidden}
.week-legend{list-style:none;margin:0;padding:9px 0 0;margin-left:var(--gut-l);
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(3px,.7vw,9px);
  border-top:1.5px solid var(--ink);text-align:center}
.week-legend li{min-width:0}
.week-legend b{display:block;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);letter-spacing:.04em}
.week-legend span{display:block;font-family:var(--mono);font-size:11px;color:var(--clay);margin-top:3px}

/* The bars grow in once, in step with the rest of the scroll reveals. */
@media(prefers-reduced-motion:no-preference){
  .wd-bar,.wd-chip{transform:scaleY(.001);transform-origin:bottom;
    transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .wd-m{opacity:0;transition:opacity .5s ease .5s}
  .week.in .wd-bar,.week.in .wd-chip{transform:none}
  .week.in .wd-m{opacity:1}
  .wd:nth-child(2) .wd-bar,.wd:nth-child(2) .wd-chip{transition-delay:.05s}
  .wd:nth-child(3) .wd-bar,.wd:nth-child(3) .wd-chip{transition-delay:.1s}
  .wd:nth-child(4) .wd-bar,.wd:nth-child(4) .wd-chip{transition-delay:.15s}
  .wd:nth-child(5) .wd-bar,.wd:nth-child(5) .wd-chip{transition-delay:.2s}
  .wd:nth-child(6) .wd-bar,.wd:nth-child(6) .wd-chip{transition-delay:.25s}
  .wd:nth-child(7) .wd-bar,.wd:nth-child(7) .wd-chip{transition-delay:.3s}
  .wd:nth-child(8) .wd-bar,.wd:nth-child(8) .wd-chip{transition-delay:.35s}
  .wd:nth-child(9) .wd-bar,.wd:nth-child(9) .wd-chip{transition-delay:.4s}
  .wd:nth-child(10) .wd-bar,.wd:nth-child(10) .wd-chip{transition-delay:.45s}
  .wd:nth-child(n+11) .wd-bar,.wd:nth-child(n+11) .wd-chip{transition-delay:.5s}
}

/* On a phone eleven columns cannot hold a legible label, so the chart
   becomes one row per day and the bars run left to right instead. The
   day number and distance come from data- attributes because the legend
   below is a separate list, and duplicating it in the markup would make
   a screen reader read every day twice. */
@media(max-width:680px){
  .week{--gut-l:0px}
  .week-plot{height:auto}
  .week-line,.week-unit{display:none}
  .week-days{position:static;grid-template-columns:1fr;gap:0}
  .wd{flex-direction:row;align-items:center;gap:9px;padding:8px 0;
    border-bottom:1px solid var(--line)}
  .wd:last-child{border-bottom:0}
  .wd::before{content:"D" attr(data-n);flex:0 0 30px;
    font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
  .wd::after{content:attr(data-km);flex:0 0 52px;text-align:right;
    font-family:var(--mono);font-size:11px;color:var(--clay)}
  .wd-track{flex:1;flex-direction:row;align-items:center;justify-content:flex-start;
    height:14px;gap:8px}
  .wd-bar{order:1;height:100%;width:calc(var(--pct) * 1%);min-width:3px}
  /* margin-left:auto keeps the numbers in a column while the bars all
     start at the same left edge, so their lengths stay comparable. */
  .wd-m{order:2;flex:0 0 46px;margin-left:auto;min-height:0;padding:0;
    text-align:right;font-size:11px}
  .wd-chip{order:1;width:auto;padding:3px 9px;font-size:8.5px}
  .week-legend{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;border:0}
  @media(prefers-reduced-motion:no-preference){
    .wd-bar,.wd-chip{transform:scaleX(.001);transform-origin:left}
  }
}

/* itinerary */
@media(max-width:760px){.day{grid-template-columns:1fr;gap:12px}}
.day-no{position:sticky;top:96px;align-self:start}
@media(max-width:760px){.day-no{position:static}}
.day-no .n{font-family:var(--disp);font-weight:800;font-stretch:82%;text-transform:uppercase;
  font-size:clamp(20px,2.1vw,26px);line-height:1;display:block;color:var(--ink)}
.restpill{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive);border:1px solid var(--olive);padding:4px 8px}
.day-rest .day-no .n{color:var(--grey)}
.day-body>p{margin-top:14px;color:#4C443E;max-width:70ch;font-size:16.5px}
.day-spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:16px 0 4px}
@media(max-width:620px){.day-spec{grid-template-columns:repeat(2,1fr)}
  .day-spec div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .day-spec div:nth-child(2n){border-right:0}}
.day-spec div{padding:11px 13px;border-right:1px solid var(--line)}
.day-spec div:last-child{border-right:0}
.day-spec dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.day-spec dd{font-size:14.5px;font-weight:500;line-height:1.3}
.day-spec dd a{border-bottom:1px solid var(--amber)}
.day-hl{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.day-hl li{position:relative;padding-left:22px;font-size:15.5px;color:#3B342F}
.day-hl li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--amber)}

/* pricing */
.pricebox{margin-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.pricebox div{display:flex;align-items:baseline;gap:16px;padding-block:13px;border-bottom:1px solid rgba(255,255,255,.16)}
.pricebox dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9DAE8C;flex:1}
.pricebox dd{font-family:var(--disp);font-weight:700;font-stretch:84%;font-size:24px;color:#fff}
.depstatus{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--honey);margin-top:5px}

/* inclusions */
.inex{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px);margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:820px){.inex{grid-template-columns:1fr}}
.q-ex{border-top-color:var(--clay)}
.inex .d3{margin-bottom:16px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:26px;font-size:16px;color:#3B342F;line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;color:var(--amber)}
.ticks-no li::before{content:"×";color:var(--clay);font-size:15px}

/* practical accordions */
.practical{border-top:1px solid var(--line)}
.pblock{border-bottom:1px solid var(--line)}
.pblock summary{cursor:pointer;list-style:none;padding-block:20px;display:flex;align-items:center;gap:14px;
  font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;font-size:clamp(17px,1.9vw,21px)}
.pblock summary::-webkit-details-marker{display:none}
.pblock summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;color:var(--amber);
  font-weight:400;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pblock[open] summary::after{transform:rotate(45deg)}
.pblock summary:hover{color:var(--clay)}
.pbody{padding-bottom:24px;max-width:74ch}
.pbody p{margin-bottom:12px;color:#4C443E;font-size:16.5px}
.pbody p:last-child{margin-bottom:0}
.pbullet{position:relative;padding-left:22px}
.pbullet::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1.5px;background:var(--amber)}

/* photograph grid */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:820px){.shots{grid-template-columns:repeat(2,1fr)}}
.shotcell{aspect-ratio:3/2;overflow:hidden;background:var(--sand-2)}
.shotcell img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.shotcell:hover img{transform:scale(1.06)}

/* the "also running" cards reuse .cellx as links */
a.cellx:hover h3{color:var(--honey)}
a.cellx .no{color:var(--honey)}

/* =================================================================
   Content pages
   ================================================================= */

.phero{background:var(--ink);color:#fff;padding-block:clamp(48px,7vw,96px) clamp(40px,5.5vw,72px)}
.phero .d1{max-width:18ch;font-size:clamp(36px,6vw,80px)}
.phero .lede{color:#DCD3C8;max-width:58ch;margin-top:20px}
.phero .kicker{color:#9A8E82;margin-bottom:16px}

/* long-form prose */
.prose{max-width:72ch}
.prose h2{font-family:var(--disp);font-weight:800;font-stretch:82%;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,32px);line-height:1;margin:clamp(34px,4vw,52px) 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;
  font-size:19px;margin:30px 0 10px}
.prose p{margin-bottom:15px;color:#4C443E;font-size:16.5px}
.prose ul{list-style:none;margin:0 0 18px}
.prose li{position:relative;padding-left:24px;margin-bottom:10px;color:#4C443E;font-size:16.5px}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1.5px;background:var(--amber)}
.prose a{border-bottom:1px solid var(--amber)}
.prose strong{font-weight:600;color:var(--ink)}

/* data tables (payment schedule, difficulty levels) */
.dtable{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:15.5px}
.dtable th,.dtable td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.dtable th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:400;background:var(--sand)}
.dtable td:first-child{font-family:var(--mono);font-size:13px;white-space:nowrap}
.tablewrap{overflow-x:auto}

/* key/value callout, e.g. bank details */
.kv{border-top:2px solid var(--amber);background:var(--sand);margin:22px 0}
.kv div{display:flex;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);flex:0 0 40%;padding-top:3px}
.kv dd{font-size:15.5px;font-weight:500;flex:1}

/* two-column content page */
.pcols{display:grid;grid-template-columns:1fr 320px;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.pcols{grid-template-columns:1fr}}
.pside{border-top:2px solid var(--amber);background:var(--sand);padding:clamp(20px,2.4vw,28px);position:sticky;top:96px}
@media(max-width:900px){.pside{position:static}}
.pside h3{font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;font-size:17px;margin-bottom:14px}
.pside ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
.pside a{color:#4C443E}
.pside a:hover{color:var(--clay)}

/* archive cards on the tours index */
.archive{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:900px){.archive{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.archive{grid-template-columns:1fr}}
.acard{background:var(--white);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.acard:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(25,19,16,.09)}
.ashot{aspect-ratio:3/2;overflow:hidden;background:var(--sand-2)}
.ashot img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.acard:hover .ashot img{transform:scale(1.05)}
.abody{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.abody .d3{margin:8px 0 10px;font-size:20px}
.ameta{font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.03em;margin-bottom:16px}
.abody .go{margin-top:auto;margin-left:0}

/* team */
.team{display:flex;flex-direction:column;gap:1px;background:var(--line-d);
  border:1px solid var(--line-d);margin-top:clamp(26px,3.5vw,44px)}
.member{background:var(--ink);display:grid;grid-template-columns:180px 1fr;gap:clamp(18px,3vw,38px);
  padding:clamp(20px,2.6vw,32px);transition:background .3s}
.member:hover{background:var(--ink-2)}
@media(max-width:640px){.member{grid-template-columns:110px 1fr;gap:18px}}
.mphoto{aspect-ratio:1;overflow:hidden;background:var(--ink-2)}
.mphoto img{filter:saturate(.9)}
.mbody .d3{color:#fff}
.mrole{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:6px 0 12px}
.mbody p{color:#B3A79B;font-size:16px;line-height:1.6}

/* forms */
.eform{margin-top:26px;max-width:66ch}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px}
.field label span{color:var(--clay);margin-left:6px}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);padding:13px 14px;border-radius:0;width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,142,43,.16)}
.eform button{border:0;cursor:pointer;margin-top:6px}
.fineprint{font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:16px;letter-spacing:.03em}
.fineprint a{border-bottom:1px solid var(--line)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{border-top:3px solid var(--amber);background:var(--sand);padding:20px 22px;margin-bottom:30px}
.notice-bad{border-top-color:var(--clay)}
.notice p{margin-top:8px;color:#4C443E}

/* gallery */
.gfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.gf{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--line);color:var(--grey);transition:.2s}
.gf span{opacity:.55;margin-left:5px}
.gf:hover{border-color:var(--amber);color:var(--ink)}
.gf.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gf.on span{opacity:.6}
.gcount{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--grey);margin-bottom:20px}

.gg{columns:3;column-gap:14px}
@media(max-width:900px){.gg{columns:2}}
@media(max-width:560px){.gg{columns:1}}
.gcell{break-inside:avoid;margin:0 0 14px;position:relative;background:var(--sand-2);overflow:hidden}
.gcell img{width:100%;height:auto;object-fit:contain;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.gcell:hover img{transform:scale(1.04)}
.gcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;color:#fff;
  font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(6px);transition:.35s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(180deg,transparent,rgba(25,19,16,.88))}
.gcell:hover figcaption,.gcell:focus-within figcaption{opacity:1;transform:none}

/* blog index */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.post{background:var(--white);border-top:3px solid var(--amber);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(25,19,16,.09)}
.pshot{aspect-ratio:16/9;overflow:hidden;background:var(--sand-2)}
.pshot img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.post:hover .pshot img{transform:scale(1.05)}
.post .pbody{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post .d3{margin:10px 0 8px}
.pstrap{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clay);margin-bottom:12px}
.post p{color:#4C443E;font-size:16px}
.post .go{margin-top:auto;margin-left:0;padding-top:16px}

/* long-form post */
.phero-post .d1{font-size:clamp(30px,4.6vw,60px);max-width:22ch}
.longread p{font-size:17.5px;line-height:1.75;margin-bottom:20px}
.longread p:first-child::first-letter{font-family:var(--disp);font-weight:800;font-stretch:82%;
  font-size:3.6em;line-height:.82;float:left;margin:4px 10px 0 0;color:var(--amber)}


/* =================================================================
   Fixes and additions — 26 Aug 2026
   ================================================================= */

/* ---- announcement bar: was eating the top of every phone screen ---- */
.ann{padding:7px 0;font-size:12px}
.ann .wrap{gap:9px;flex-wrap:nowrap;overflow:hidden}
.ann-link{display:flex;align-items:center;gap:9px;min-width:0;border-bottom:0}
.ann-link b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-date{white-space:nowrap;opacity:.85}
.ann-tag{white-space:nowrap;opacity:.7}
.ann-go{opacity:.8}
.ann-link:hover b{text-decoration:underline}
@media(max-width:820px){
  .ann{padding:6px 0;font-size:11px;letter-spacing:0}
  .ann .dot{width:5px;height:5px}
  .ann-tag{display:none}
}
@media(max-width:520px){
  .ann-date{display:none}
}

/* ---- hero images: portrait crop on phones ---- */
.hero-img picture{display:block;width:100%;height:100%}
@media(max-width:700px){
  .tour-hero{min-height:clamp(500px,72vh,680px)}
  .tour-hero .hero-img img{object-position:center 32%}
}

/* ---- itinerary: collapsible days ---- */
.itin-hint{margin-bottom:6px;display:flex;justify-content:flex-end}
.itin-all{background:none;border:1px solid var(--line);cursor:pointer;color:var(--grey);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;transition:.2s}
.itin-all:hover{border-color:var(--amber);color:var(--ink)}

details.day{border-top:1px solid var(--line)}
details.day:last-of-type{border-bottom:1px solid var(--line)}
details.day > summary{
  cursor:pointer;list-style:none;display:grid;align-items:baseline;gap:4px 18px;
  grid-template-columns:auto 1fr auto auto;padding-block:clamp(16px,2.1vw,22px);
  transition:background .25s;
}
details.day > summary::-webkit-details-marker{display:none}
details.day > summary:hover{background:var(--sand)}
.day-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);min-width:52px}
.day-t{font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;
  font-size:clamp(16px,1.9vw,23px);line-height:1.05}
.day-quick{display:flex;gap:14px;font-family:var(--mono);font-size:11.5px;color:var(--grey);white-space:nowrap}
.day-quick em{font-style:normal}
details.day[open] .day-quick{opacity:.55}
.day-chev{width:11px;height:11px;border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1);margin-left:8px;align-self:center}
details.day[open] .day-chev{transform:rotate(-135deg)}
.day-rest .day-t{color:var(--grey)}
.day-body{padding-bottom:clamp(22px,3vw,34px);padding-left:70px}
@media(max-width:760px){
  details.day > summary{grid-template-columns:1fr auto;gap:2px 12px}
  .day-n{grid-column:1;min-width:0}
  .day-chev{grid-column:2;grid-row:1/span 3}
  .day-t{grid-column:1}
  .day-quick{grid-column:1;margin-top:6px}
  .day-body{padding-left:0}
}

/* day detail tabs */
.dtabs{margin-top:20px}

/* The selected tab is a solid ink chip, the same idiom as the gallery
   filters (.gf.on). It had been a 2px underline, which at 11px mono was
   too quiet to read as "selected", and the pane below it had no
   container at all -- so switching tabs changed the words and nothing
   else. The amber rule down the pane is what ties the two together.

   Chips rather than a joined-up tab strip on purpose: the three labels
   wrap onto two rows on a narrow phone, and a tab styled to merge with
   the pane directly beneath it comes apart when a second row lands in
   between. A chip does not care where it sits. */
.dtab-bar{display:none;gap:4px;margin-bottom:14px}
.dtabs.js .dtab-bar{display:flex;flex-wrap:wrap}
.dtab{background:none;border:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding:9px 15px;transition:.2s}
.dtab:hover{border-color:var(--amber);color:var(--ink)}
.dtab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.dtabs.js .dpane{border-left:2px solid var(--amber);padding-left:18px}

/* Tighten the chips so all three sit on one line on a phone. Only the
   horizontal padding and the tracking give way -- the vertical padding
   stays, because these are touch targets. */
@media(max-width:560px){
  .dtab{padding:9px 10px;letter-spacing:.10em}
  .dtab-bar{gap:3px}
  .dtabs.js .dpane{padding-left:14px}
}
.dpane p{margin-bottom:14px;color:#4C443E;max-width:70ch;font-size:16.5px}
.dpane p:last-child{margin-bottom:0}
.dpane-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:12px}
.dtabs.js .dpane-h{display:none}          /* the tab already names it */
.dtabs.js .dpane + .dpane{margin-top:0}
.dpane + .dpane{margin-top:24px}

/* ---- photograph grids become clickable ---- */
.gcell,.shotcell{position:relative}
.gopen{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  background:none;border:0;padding:0;cursor:zoom-in}
.gopen:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}

/* ---- lightbox ---- */
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(15,11,9,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb[hidden]{display:none}
.lb-fig{max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:14px;margin:0}
.lb-fig img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;
  display:block;margin:0 auto;background:#241C17}
.lb-fig figcaption{color:#E6DED4;font-size:14.5px;line-height:1.5;text-align:center;max-width:70ch;margin:0 auto}
.lb-x,.lb-nav{position:absolute;background:rgba(246,241,232,.1);border:1px solid rgba(246,241,232,.24);
  color:#fff;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.lb-x{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);width:46px;height:46px;font-size:26px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:32px;line-height:1}
.lb-prev{left:clamp(6px,1.6vw,22px)}
.lb-next{right:clamp(6px,1.6vw,22px)}
.lb-x:hover,.lb-nav:hover{background:var(--amber);border-color:var(--amber);color:#211812}
.lb-count{position:absolute;bottom:clamp(12px,2.4vw,24px);left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#9A8E82}
@media(max-width:620px){
  .lb-nav{width:42px;height:52px;font-size:26px}
  .lb-fig img{max-height:70vh}
}

/* ---- gallery ---- */
.gcell figcaption{pointer-events:none}

/* the tour at-a-glance bar was stacking four full-height lines on phones */
.marq-static{padding:0;row-gap:0}
.marq-static span{padding-inline:14px;font-size:13px;gap:14px}
@media(max-width:700px){
  .marq{padding:9px 0}
  .marq-static{gap:2px 0}
  .marq-static span{font-size:11.5px;padding-inline:9px;gap:9px;letter-spacing:.01em}
  .marq-static span::after{width:4px;height:4px}
}

/* =================================================================
   Grade help — the "?" beside Grade in the spec strip
   ================================================================= */

.qmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;padding:0;flex:none;vertical-align:middle;
  border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;
  font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:0;
  opacity:.65;transition:.18s;
}
.qmark:hover{opacity:1;background:var(--amber);border-color:var(--amber);color:#211812}
.spec dt{display:flex;align-items:center}

/* the listing-page equivalent, which cannot sit inside the card link */
.gradelink{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay);transition:color .18s;
}
.gradelink:hover{color:var(--ink)}
.gradelink .qmark{opacity:1;width:16px;height:16px;margin:0}
.gradelink:hover .qmark{background:var(--amber);border-color:var(--amber);color:#211812}

/* the popup itself */
.gh{position:fixed;inset:0;z-index:210;background:rgba(15,11,9,.72);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,44px)}
.gh[hidden]{display:none}
.gh-box{position:relative;background:var(--white);color:var(--ink);
  max-width:640px;width:100%;max-height:88vh;overflow-y:auto;
  padding:clamp(24px,3.4vw,40px);border-top:3px solid var(--amber)}
.gh-x{position:absolute;top:10px;right:10px;width:38px;height:38px;font-size:24px;line-height:1;
  background:none;border:0;color:var(--grey);cursor:pointer;transition:color .18s}
.gh-x:hover{color:var(--ink)}
.gh-lede{color:#4C443E;font-size:15.5px;margin-top:10px}
.gh-levels{margin-top:22px;border-top:1px solid var(--line)}
.gh-level{padding-block:16px;border-bottom:1px solid var(--line)}
.gh-level.on{background:var(--sand);margin-inline:calc(-1 * clamp(24px,3.4vw,40px));
  padding-inline:clamp(24px,3.4vw,40px);border-left:3px solid var(--amber)}
.gh-head{display:flex;align-items:center;gap:12px}
.gh-head h3{font-family:var(--disp);font-weight:700;font-stretch:84%;text-transform:uppercase;font-size:18px}
.gh-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--amber);color:#211812;padding:4px 8px}
.gh-nums{display:flex;gap:26px;margin:10px 0 8px}
.gh-nums dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:3px}
.gh-nums dd{font-family:var(--disp);font-weight:700;font-stretch:84%;font-size:17px}
.gh-level p{font-size:15px;color:#4C443E;line-height:1.55}
.gh-you{margin-top:20px;padding:14px 16px;background:var(--ink);color:#DCD3C8;font-size:15px;line-height:1.55}
.gh-you b{color:var(--honey);font-weight:500}
.gh-more{margin-top:16px;font-size:14.5px;color:#4C443E}
.gh-more a{border-bottom:1px solid var(--amber)}
@media(max-width:520px){
  .gh{padding:0;align-items:flex-end}
  .gh-box{max-height:92vh;border-top-width:4px}
  .gh-nums{gap:18px}
}

.glevel-copy{margin-top:12px;color:#3B342F}

/* The "?" is deliberately small, but a 15px tap target is not enough on a
   phone. Extend the hit area with a pseudo-element instead of growing it. */
.qmark{position:relative}
.qmark::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px}
@media(hover:hover){.qmark::after{width:26px;height:26px}}

/* =================================================================
   Tour FAQs
   ================================================================= */

.faqs{margin-top:clamp(26px,3.5vw,44px);border-top:1px solid var(--line-d)}
.faq{border-bottom:1px solid var(--line-d)}
.faq > summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:18px;
  padding-block:clamp(15px,1.9vw,19px);transition:color .2s;
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary:hover{color:var(--honey)}
.faq-q{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.45;font-weight:500;flex:1}
.faq-mark{position:relative;flex:none;width:13px;height:13px;margin-top:5px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--amber);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq-mark::before{top:6px;left:0;width:13px;height:1.5px}
.faq-mark::after{left:6px;top:0;width:1.5px;height:13px}
.faq[open] .faq-mark::after{transform:scaleY(0)}
.faq[open] .faq-q{color:var(--honey)}
.faq-a{padding-bottom:clamp(16px,2.2vw,22px);max-width:74ch}
.faq-a p{color:#B3A79B;font-size:16px;line-height:1.65;margin-bottom:12px}
.faq-a p:last-child{margin-bottom:0}
.faq-ask{border-bottom:1px solid var(--amber)}

/* =================================================================
   Design fixes — 26 Aug 2026
   Each block notes the symptom it fixes.
   ================================================================= */

/* 1. On hover the "View tour →" arrow slid 6px right and escaped the
      sand highlight, because .tour had no horizontal padding. Bleed the
      row slightly into the gutter so the highlight always contains it. */
.tour{margin-inline:-16px;padding-inline:16px}
.go{padding-right:2px}

/* 5. Price, dates and the CTA sat on three different lines because .row
      centred boxes of different heights. Align their text baselines. */
.row{align-items:baseline}
.price b{line-height:1}

/* 6. .grid3 used a pale wash as its background so the 1px gaps read as
      hairlines — but any empty cell in the last row showed that wash as a
      grey block. Put the section colour behind instead and draw the
      hairlines on the cells themselves. */
.grid3{background:var(--ink)}
.cellx{box-shadow:0 0 0 1px var(--line-d)}

/* 2. The full-width photograph was a 2.83:1 letterbox holding a 4:3
      picture, losing 53% of its height. Give the band an aspect closer to
      the source and let it breathe on phones. */
.break{width:100%;height:auto;aspect-ratio:3/2;max-height:none}
@media(min-width:760px){.break{aspect-ratio:21/9;max-height:620px}}

@media(max-width:760px){
  /* 3. Section headings and their button stacked with the button pushed to
        the far right, which read as a mistake. Stack them left. */
  .sec-head{display:block}
  .sec-head .right{margin-left:0;margin-top:18px}
  .sec-head .btn.right{display:inline-block}
  .sec-head .lede.right{max-width:none}

  /* 4a. .shotwrap reserves 16px on the left for the amber slide-in block,
         which is a hover effect phones never see — it just made the photo
         narrower than the text and pushed it out of alignment. */
  .shotwrap{padding:0}
  .shotwrap::before{display:none}

  /* 4b. margin-left:auto threw the CTA to the far right, away from the
         price and dates it belongs with. Let the row stack naturally. */
  .row{gap:8px 18px}
  .go{margin-left:0;width:100%;padding-top:4px}
}

/* Spelling "Intermediate" in full broke it mid-word ("Intermedia te") in the
   narrow card spec strip. Size the value to the cell it actually sits in —
   the hero strip is full width and can afford more — and if a break is ever
   unavoidable, hyphenate properly rather than snapping mid-syllable. */
.spec dd{font-size:clamp(13px,1.15vw,17px);hyphens:auto;overflow-wrap:break-word}
.spec-dark dd{font-size:clamp(15px,1.5vw,21px)}

/* ...and drop the grid's outer frame, which was still drawing a box around
   the empty part of the last row. Each cell's own hairline defines the shape
   now, so the filled cells read as a group and the gap is simply background. */
.grid3{border:0}

/* From the sweep: a few tap targets were under the 36px comfortable minimum
   on phones, and two elements were hidden with left:-9999px, which can widen
   the scrollable area on some browsers. */
@media(max-width:820px){
  .ann{padding:0}
  .ann .wrap{min-height:34px}
  .ann-link{padding-block:9px}
}
.itin-all{padding:11px 15px}

/* honeypot: still in the DOM and fillable by bots, but no negative offset */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;left:auto;top:auto}

/* Gallery captions were pinned open on touch devices, so on phones every
   photograph carried a block of text across it. The caption now belongs to
   the lightbox; on pointer devices it still fades in on hover. */
@media(hover:none),(max-width:760px){
  .gcell figcaption{display:none}
}

/* short explanatory line under a pair of optional fields */
.fieldnote{font-size:13.5px;color:var(--grey);margin:-6px 0 20px;max-width:52ch;line-height:1.5}

/* filter chips were one-per-row on a phone; let them sit two or three up */
@media(max-width:560px){
  .gfilter{gap:6px}
  .gf{padding:9px 11px;font-size:10.5px;letter-spacing:.1em}
}

/* =================================================================
   Rider photographs, and the documentaries
   ================================================================= */

/* the face beside each quote */
.q .who{display:flex;align-items:flex-start;gap:14px}
.face{width:56px;height:56px;flex:none;margin-top:2px;border-radius:50%;object-fit:cover;
  background:var(--sand-2);filter:saturate(.92)}
.whotext{min-width:0}

/* film grid */
.films{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:820px){.films{grid-template-columns:1fr}}
.film{display:flex;flex-direction:column}
.film-play{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--ink-2);aspect-ratio:16/9;overflow:hidden}
.film-play img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .3s}
.film-play:hover img{transform:scale(1.04);opacity:.82}
.film-icon{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  background:rgba(25,19,16,.62);border:1px solid rgba(246,241,232,.4);border-radius:50%;
  transition:.25s cubic-bezier(.22,1,.36,1)}
.film-icon::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.film-play:hover .film-icon{background:var(--amber);border-color:var(--amber);transform:scale(1.06)}
.film-play:hover .film-icon::after{border-left-color:#211812}
.film-play:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.film-body{padding-top:16px}
.film-body .d3{color:#fff;font-size:clamp(17px,1.8vw,21px)}
.film-body p{color:#B3A79B;font-size:15.5px;line-height:1.55;margin-top:8px;max-width:52ch}
.film-chan{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
/* once playing, the iframe takes the thumbnail's place */
.film-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =================================================================
   About: the archive strip
   ================================================================= */

.archive-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(26px,3.5vw,44px)}
@media(max-width:820px){.archive-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.archive-strip{grid-template-columns:1fr}}
.arch{position:relative;margin:0;background:var(--white);display:flex;flex-direction:column}
.arch img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.arch figcaption{padding:14px 16px 16px}
.arch figcaption b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--clay);margin-bottom:6px}
.arch figcaption span{display:block;font-size:14.5px;line-height:1.5;color:#4C443E}
.arch .gopen{inset:0 0 auto 0;height:auto;aspect-ratio:4/3}

/* itinerary day rows: give the hover highlight room, so the chevron on the
   right cannot sit outside it (same fix as the tour rows on the homepage) */
details.day > summary{margin-inline:-16px;padding-inline:16px}

/* On phones the team photo sat in its own 110px column beside a much taller
   bio, leaving a long empty gap underneath it. Put the portrait alongside
   the name and role instead, and let the bio run the full width below. */
@media(max-width:640px){
  .member{
    grid-template-columns:68px 1fr;
    grid-template-areas:"photo name" "photo role" "bio bio";
    align-items:start;
    gap:0 16px;
  }
  .mphoto{grid-area:photo;align-self:start}
  .mbody{display:contents}
  .mbody > .d3{grid-area:name;align-self:end}
  .mbody > .mrole{grid-area:role;align-self:start;margin:5px 0 0}
  .mbody > p:last-child{grid-area:bio;margin-top:16px}
}