/* Explorer tour-display page (v3). Loaded only on the tour page; do NOT fold into the site-wide tw_main.css.
   Color utilities (bg-exp-*, text-exp-*) come from tailwind.config.js `exp`; these vars give them their values. */

.tour-explorer{
  position:relative;
  --exp-paper:244 238 223; --exp-paper-2:236 226 207; --exp-card:255 253 247;
  --exp-ink:26 36 31; --exp-ink-soft:85 96 90; --exp-ink-faint:140 138 124;
  --exp-line:222 210 186; --exp-brass:168 121 58; --exp-accent:47 77 110;
  --exp-check:22 163 74; --exp-danger:185 74 47;
}
.dark .tour-explorer{
  --exp-paper:24 22 17; --exp-paper-2:33 30 24; --exp-card:33 30 24;
  --exp-ink:236 229 214; --exp-ink-soft:177 169 149; --exp-ink-faint:131 124 108;
  --exp-line:50 46 38; --exp-brass:200 164 95; --exp-accent:143 178 218;
  --exp-check:74 222 128; --exp-danger:226 114 91;
}

/* grain, scoped to the content wrapper (does NOT cover the server nav/footer) */
.tour-explorer > .grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark .tour-explorer > .grain{opacity:.06; mix-blend-mode:soft-light}

/* scroll-reveal: hidden state gated on .js-reveal (added by JS) so no-JS renders visible */
@media (prefers-reduced-motion: no-preference){
  .tour-explorer.js-reveal .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
  .tour-explorer.js-reveal .reveal.in{opacity:1; transform:none}
}

/* opening lead drop cap */
.tour-explorer .exp-lead > p:first-of-type::first-letter{font-family:'Fraunces',Georgia,serif; font-weight:600; float:left; font-size:3.5em; line-height:.7; padding:.04em .1em 0 0; color:rgb(var(--exp-brass))}

/* overview: highlights pinned top-right; a LONG lead wraps underneath them (L-shape) instead of leaving dead space bottom-right.
   mobile stacks (lead first); a lead with no highlights stays a readable single column. */
.tour-explorer .exp-overview{display:flex; flex-direction:column; gap:28px}
.tour-explorer .exp-overview .exp-lead{order:1; max-width:68ch}
.tour-explorer .exp-overview-hl{order:2}
@media(min-width:768px){
  .tour-explorer .exp-overview{display:block; gap:0}
  .tour-explorer .exp-overview::after{content:""; display:block; clear:both}
  .tour-explorer .exp-overview-hl{float:right; width:min(44%,440px); margin:0 0 26px 52px}
  .tour-explorer .exp-overview-hl:only-child{float:none; width:auto; margin:0}
  .tour-explorer .exp-overview-hl + .exp-lead{max-width:none}
}

/* itinerary journey trail */
.tour-explorer .exp-trail{position:relative; padding-left:54px}
.tour-explorer .exp-trail::before{content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg, rgb(var(--exp-accent)), rgb(var(--exp-accent)) 86%, transparent)}
.tour-explorer .exp-stop{position:relative; padding-bottom:clamp(30px,4vw,46px)}
.tour-explorer .exp-stop:last-child{padding-bottom:0}
.tour-explorer .exp-pin{position:absolute; left:-54px; top:-2px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.02rem; border-radius:50%; color:rgb(var(--exp-accent)); background:rgb(var(--exp-card)); border:2px solid rgb(var(--exp-accent)); box-shadow:0 0 0 6px rgb(var(--exp-paper))}

/* explorer prose (day descriptions + fine-print lists): brass-dot bullets */
.tour-explorer .prose-exp p{margin:0 0 .8em; color:rgb(var(--exp-ink-soft))}
.tour-explorer .prose-exp ul{list-style:none; margin:0; padding:0; display:grid; gap:.55em}
.tour-explorer .prose-exp li{position:relative; padding-left:18px; font-size:1.02rem; color:rgb(var(--exp-ink-soft))}
.tour-explorer .prose-exp li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:rgb(var(--exp-brass))}
.tour-explorer .prose-exp strong, .tour-explorer .prose-exp b{color:rgb(var(--exp-ink)); font-weight:700}

/* pull-quote band: ported verbatim from the mock .pullquote (bg=paper-2, brass glyph at .45); var-driven so light/dark switch automatically */
.tour-explorer .exp-pullquote{margin:clamp(24px,4vw,44px) 0; padding:clamp(32px,4.5vw,54px) clamp(28px,4vw,56px); background:rgb(var(--exp-paper-2)); border:1px solid rgb(var(--exp-line)); border-radius:20px; position:relative}
.tour-explorer .exp-pullquote::before{content:"\201C"; position:absolute; top:.04em; left:.22em; font-family:'Fraunces',Georgia,serif; font-size:5rem; line-height:1; color:rgb(var(--exp-brass)); opacity:.45}
.tour-explorer .exp-pullquote p{font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(1.32rem,2.5vw,1.95rem); line-height:1.34; color:rgb(var(--exp-ink)); margin:0; max-width:32ch}
.tour-explorer .exp-pullquote .by{margin-top:16px; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--exp-ink-faint))}

/* opening bento gallery: equal-height tiles that crop ANY aspect ratio (images + Vimeo player-x) so mixed user media never leaves orphan gaps */
.tour-explorer .exp-gallery{display:grid; grid-template-columns:1fr; gap:10px}
.tour-explorer .exp-gallery-right{display:grid; gap:10px; grid-auto-rows:1fr; grid-template-columns:repeat(2,1fr)}
.tour-explorer .exp-gallery-right.c1{grid-template-columns:1fr}
.tour-explorer .exp-tile{position:relative; overflow:hidden; aspect-ratio:4/3; min-height:0; border-radius:16px; cursor:pointer; background:rgb(var(--exp-paper-2))}
.tour-explorer .exp-tile > img, .tour-explorer .exp-tile > player-x, .tour-explorer .exp-tile > player-x video, .tour-explorer .exp-tile > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
@media(min-width:768px){
  .tour-explorer .exp-gallery.cols-2{grid-template-columns:1fr 1fr; height:min(58vh,600px)}
  .tour-explorer .exp-gallery.cols-2 .exp-tile{aspect-ratio:auto}
}

/* trip details: sub-blocks + included/excluded icon bullets + 2-column lists */
.tour-explorer .exp-detail{margin-top:6px}
.tour-explorer .exp-detail + .exp-detail{margin-top:34px; padding-top:30px; border-top:1px solid rgb(var(--exp-line))}
.tour-explorer .exp-detail-head{margin-bottom:18px; font-family:'Fraunces',Georgia,serif; font-size:1.5rem; font-weight:500; color:rgb(var(--exp-ink))}
.tour-explorer .prose-cols ul{columns:2; column-gap:clamp(24px,3vw,48px)}
.tour-explorer .prose-cols li{margin:0 0 .7em; break-inside:avoid; -webkit-column-break-inside:avoid}
@media(max-width:680px){.tour-explorer .prose-cols ul{columns:1}}
.tour-explorer .prose-yes ul, .tour-explorer .prose-no ul{list-style:none; margin:0; padding:0}
.tour-explorer .prose-yes li, .tour-explorer .prose-no li{position:relative; padding-left:30px; color:rgb(var(--exp-ink-soft))}
.tour-explorer .prose-yes li::before, .tour-explorer .prose-no li::before{content:""; position:absolute; left:0; top:.16em; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:contain}
.tour-explorer .prose-yes li::before{background-image:url('/mf_tw/assets/icons/check-circle-emerald.svg')}
.tour-explorer .prose-no li::before{background-image:url('/mf_tw/assets/icons/close-circle-red.svg')}

/* end-of-journey marker (clean break on warm paper) */
.tour-explorer .exp-endcap{display:flex; flex-direction:column; align-items:center; gap:12px; max-width:1320px; margin:0 auto; padding:clamp(72px,10vw,132px) clamp(24px,4vw,44px) clamp(52px,7vw,88px); text-align:center}
.tour-explorer .exp-endcap .kk{position:relative; padding:0 20px; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:rgb(var(--exp-ink-faint))}
.tour-explorer .exp-endcap .kk::before, .tour-explorer .exp-endcap .kk::after{content:""; position:absolute; top:50%; width:clamp(26px,6vw,68px); height:1px; background:rgb(var(--exp-line))}
.tour-explorer .exp-endcap .kk::before{right:100%}
.tour-explorer .exp-endcap .kk::after{left:100%}
.tour-explorer .exp-endcap .sub{max-width:32ch; margin:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.05rem,2vw,1.35rem); color:rgb(var(--exp-ink-soft))}

/* tailor-your-trip promo: deep-ink panel (a clean break, not tour content) */
.tour-explorer .exp-tailor{position:relative; z-index:2; background:#1b1e16; color:#ece5d6}
.dark .tour-explorer .exp-tailor{background:#262a1c; border-top:1px solid #3a3d2c; border-bottom:1px solid #0b0a06}
.tour-explorer .exp-tailor-inner{max-width:1180px; margin:0 auto; padding:clamp(44px,6vw,82px) clamp(24px,4vw,44px); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,58px); align-items:center}
@media(max-width:840px){.tour-explorer .exp-tailor-inner{grid-template-columns:1fr; gap:26px}}
.tour-explorer .exp-tailor-video{position:relative; display:block; overflow:hidden; aspect-ratio:16/10; border-radius:16px; background:#000; box-shadow:0 26px 54px -22px rgba(0,0,0,.7); cursor:pointer}
.tour-explorer .exp-tailor-video .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .5s ease, opacity .4s ease}
.tour-explorer .exp-tailor-video:hover .poster{opacity:1; transform:scale(1.04)}
.tour-explorer .exp-tailor-video .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.tour-explorer .exp-tailor-video .play > span{display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.45); transition:background .25s ease, transform .25s ease, box-shadow .25s ease}
.tour-explorer .exp-tailor-video:hover .play > span{background:rgba(255,255,255,.34); transform:scale(1.1); box-shadow:0 0 0 8px rgba(255,255,255,.08)}
.tour-explorer .exp-tailor-video .play svg{width:22px; height:22px; margin-left:3px; color:#fff}
.tour-explorer .exp-tailor-video .vbadge{position:absolute; left:14px; bottom:12px; font-family:'Hanken Grotesk',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88); pointer-events:none}
.tour-explorer .exp-tailor .kicker{font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#c8a45f}
.tour-explorer .exp-tailor h2{font-family:'Fraunces',Georgia,serif; font-weight:500; color:#fff; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; margin:.42em 0 .6em}
.tour-explorer .exp-tailor h2 em{font-style:italic; color:#c8a45f}
.tour-explorer .exp-tailor .checks{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:15px}
.tour-explorer .exp-tailor .checks li{display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; color:rgba(236,229,214,.86); font-size:1.02rem; line-height:1.5}

/* ── content sections ported from moonshot-refined.html <style> (vars mapped 1:1 to exp-* tokens). Exact values live here per the "Tailwind where it can, custom CSS catches the rest" rule. ── */

/* opening: title + kicker + meta */
.tour-explorer .exp-title{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2.1rem,4.8vw,3.9rem); line-height:1.05; letter-spacing:-.015em; color:rgb(var(--exp-ink)); max-width:20ch; margin:.16em 0 .5em}
.tour-explorer .exp-title em{font-style:italic; color:rgb(var(--exp-brass))}
.tour-explorer .exp-kicker{font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--exp-accent))}
.tour-explorer .exp-kicker-brass{color:rgb(var(--exp-brass))}
.tour-explorer .exp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:11px 18px; color:rgb(var(--exp-ink-soft)); font-weight:500; font-size:1rem}
.tour-explorer .exp-meta span{display:inline-flex; align-items:center; gap:8px}
.tour-explorer .exp-meta svg{width:18px; height:18px; color:rgb(var(--exp-ink-faint))}
.tour-explorer .exp-meta .dot{width:4px; height:4px; border-radius:50%; background:rgb(var(--exp-brass))}

/* section rhythm + header pattern */
.tour-explorer .exp-section{margin-top:clamp(52px,7vw,86px)}
.tour-explorer .exp-section-head{margin-bottom:30px}
.tour-explorer .exp-h2{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.08; letter-spacing:-.01em; color:rgb(var(--exp-ink)); margin:.42em 0 0}
.tour-explorer .exp-rule{width:46px; height:2px; border:0; margin:14px 0 0; background:linear-gradient(90deg, rgb(var(--exp-accent)), transparent)}

/* opening lead size (drop-cap is below) */
.tour-explorer .exp-lead{font-size:clamp(1.18rem,2vw,1.42rem); line-height:1.55; font-weight:400}

/* overview highlights */
.tour-explorer .exp-hl-title{font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--exp-ink-faint)); margin-bottom:18px}
.tour-explorer .exp-highlights{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.tour-explorer .exp-highlights li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:15px 0; border-top:1px solid rgb(var(--exp-line))}
.tour-explorer .exp-highlights li:last-child{border-bottom:1px solid rgb(var(--exp-line))}
.tour-explorer .exp-highlights .idx{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:1.05rem; color:rgb(var(--exp-accent)); min-width:1.6em}
.tour-explorer .exp-highlights .txt{font-size:1.06rem; color:rgb(var(--exp-ink)); font-weight:500}

/* at a glance */
/* 6-track base so a 3-col layout can split its last row into halves; tiles span 2 (=3 per row) */
.tour-explorer .exp-glance{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgb(var(--exp-line)); border:1px solid rgb(var(--exp-line)); border-radius:16px; overflow:hidden}
.tour-explorer .exp-glance .tile{grid-column:span 2}
.tour-explorer .exp-glance.cols-2{grid-template-columns:repeat(2,1fr)}
.tour-explorer .exp-glance.cols-2 .tile{grid-column:auto}
/* fill the last row so a partial row never reveals empty (tan) cells */
@media(min-width:621px){
  /* one orphan -> full width */
  .tour-explorer .exp-glance.cols-3 .tile:last-child:nth-child(3n+1){grid-column:span 6}
  /* two orphans -> first keeps its normal column (col 1 stays aligned), last fills the rest */
  .tour-explorer .exp-glance.cols-3 .tile:last-child:nth-child(3n+2){grid-column:span 4}
  .tour-explorer .exp-glance.cols-2 .tile:last-child:nth-child(2n+1){grid-column:1 / -1}
}
@media(max-width:620px){
  .tour-explorer .exp-glance{grid-template-columns:repeat(2,1fr)}
  .tour-explorer .exp-glance .tile{grid-column:auto}
  .tour-explorer .exp-glance .tile:last-child:nth-child(2n+1){grid-column:1 / -1}
}
.tour-explorer .exp-glance .tile{background:rgb(var(--exp-card)); padding:20px 18px; display:flex; flex-direction:column; gap:10px}
.tour-explorer .exp-glance .tile svg{width:22px; height:22px; color:rgb(var(--exp-ink-soft))}
.tour-explorer .exp-glance .lbl{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:rgb(var(--exp-ink-faint)); font-weight:600}
.tour-explorer .exp-glance .val{font-family:'Fraunces',Georgia,serif; font-size:1.12rem; font-weight:500; line-height:1.2; color:rgb(var(--exp-ink))}
.tour-explorer .exp-glance .val.warm{color:rgb(var(--exp-brass))}

/* itinerary day label + title */
.tour-explorer .exp-dayno{font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--exp-accent))}
.tour-explorer .exp-stop h3{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.42rem; line-height:1.08; letter-spacing:-.01em; margin:.18em 0 .7em; color:rgb(var(--exp-ink))}

/* route map */
.tour-explorer .exp-mapwrap{border-radius:20px; overflow:hidden; border:1px solid rgb(var(--exp-line)); background:rgb(var(--exp-card)); box-shadow:0 2px 6px rgba(26,36,31,.06), 0 18px 50px -18px rgba(26,36,31,.22)}
.dark .tour-explorer .exp-mapwrap{box-shadow:0 2px 6px rgba(0,0,0,.3), 0 22px 60px -20px rgba(0,0,0,.6)}
.tour-explorer .exp-mapwrap img{width:100%}
.tour-explorer .exp-mapcap{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; font-size:.9rem; color:rgb(var(--exp-ink-soft))}
.tour-explorer .exp-mapcap .route{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:rgb(var(--exp-ink))}
.tour-explorer .exp-mapcap .route svg{width:16px; height:16px; color:rgb(var(--exp-accent))}

/* meeting & route facts */
.tour-explorer .exp-facts{display:grid; gap:16px}
.tour-explorer .exp-fact{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.tour-explorer .exp-fact > svg{width:20px; height:20px; margin-top:2px; color:rgb(var(--exp-accent))}
.tour-explorer .exp-fact .l{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--exp-ink-faint)); font-weight:600}
.tour-explorer .exp-fact .v{font-family:'Fraunces',Georgia,serif; font-size:1.1rem; color:rgb(var(--exp-ink))}
.tour-explorer .exp-fact .sub{font-size:.9rem; font-style:italic; color:rgb(var(--exp-ink-soft)); margin-top:2px}

/* "what to bring" suitcase bullets (info variant of the icon lists) */
.tour-explorer .prose-bring ul{list-style:none; margin:0; padding:0}
.tour-explorer .prose-bring li{position:relative; padding-left:30px; color:rgb(var(--exp-ink-soft))}
.tour-explorer .prose-bring li::before{content:""; position:absolute; left:0; top:.16em; width:18px; height:18px; background:no-repeat center/contain url('/mf_tw/assets/icons/suitcase-brass.svg')}

/* cinematic photo break (within content column) */
.tour-explorer .exp-photo{position:relative; margin:clamp(24px,4vw,44px) 0; height:clamp(360px,52vw,640px); border-radius:20px; overflow:hidden; background:rgb(var(--exp-paper-2)); box-shadow:0 2px 6px rgba(26,36,31,.06), 0 18px 50px -18px rgba(26,36,31,.22)}
.dark .tour-explorer .exp-photo{box-shadow:0 2px 6px rgba(0,0,0,.3), 0 22px 60px -20px rgba(0,0,0,.6)}
.tour-explorer .exp-photo img{width:100%; height:100%; object-fit:cover}
.tour-explorer .exp-photo .scrim{position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(14,17,11,.64))}
.tour-explorer .exp-photo .cap{position:absolute; left:clamp(20px,4vw,36px); bottom:clamp(20px,3vw,30px); right:24px; color:#fff}
.tour-explorer .exp-photo .cap .k{font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.tour-explorer .exp-photo .cap .t{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.1; margin-top:7px; max-width:20ch; color:#fff}

/* gallery: single-image hero, 4-image wide-top, and mobile aspect ratios (match the mock .bento) */
@media(min-width:768px){
  .tour-explorer .exp-gallery:not(.cols-2){height:min(58vh,600px)}
  .tour-explorer .exp-gallery:not(.cols-2) .exp-tile{aspect-ratio:auto}
}
@media(max-width:767px){
  .tour-explorer .exp-gallery > .exp-tile{aspect-ratio:16/10}
  .tour-explorer .exp-gallery-right .exp-tile{aspect-ratio:1/1}
}
.tour-explorer .exp-gallery-right.r4 > .exp-tile:first-child{grid-column:1 / -1}

/* endcap glyph + tailor checks icon sizing */
.tour-explorer .exp-endcap .glyph{width:30px; height:30px; color:rgb(var(--exp-brass))}
.tour-explorer .exp-endcap .glyph svg{width:100%; height:100%}
.tour-explorer .exp-tailor .checks li svg{width:22px; height:22px; margin-top:1px; flex:none}

/* booking sidebar re-skin: hook classes added to the SHARED widgets (tour-price-calculation-form + external-tour/booking-sidebar). The hooks are inert off .tour-explorer so the live page is byte-identical. CTA stays green via its own Alpine :class; never restyled here. Tokens auto-flip light/dark. */
.tour-explorer .thq-bcard{background:rgb(var(--exp-card)); border:1px solid rgb(var(--exp-line)); border-radius:20px; box-shadow:0 18px 40px -24px rgba(40,30,15,.35); color:rgb(var(--exp-ink-soft))}
.tour-explorer .thq-bcard-eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard-price{font-family:'Fraunces',Georgia,serif; color:rgb(var(--exp-ink))}
.tour-explorer .thq-bcard-price span{font-weight:500}
.tour-explorer .thq-bcard .thq-binput{background:rgb(var(--exp-paper)); border-color:rgb(var(--exp-line)); color:rgb(var(--exp-ink-soft))}
.tour-explorer .thq-bcard .thq-binput::placeholder{color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard .thq-binput:focus{border-color:rgb(var(--exp-accent)); box-shadow:0 0 0 3px rgb(var(--exp-accent)/.18); outline:none}
.tour-explorer .thq-bcard .thq-binput-ic{color:rgb(var(--exp-accent))}
.tour-explorer .thq-bcard .thq-stepper{background:rgb(var(--exp-paper)); border-color:rgb(var(--exp-line))}
.tour-explorer .thq-bcard .thq-step-btn{background:rgb(var(--exp-card)); border-color:rgb(var(--exp-line)); color:rgb(var(--exp-ink))}
.tour-explorer .thq-bcard .thq-step-btn:hover:not(:disabled){background:rgb(var(--exp-line)); border-color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard .thq-bcta{border-radius:13px}
.tour-explorer .thq-bcard .thq-bcta:not(:disabled){box-shadow:0 10px 24px -12px rgba(84,110,4,.6); transition:transform .18s ease, background .2s ease}
.tour-explorer .thq-bcard .thq-bcta:not(:disabled):hover{transform:translateY(-2px)}
.tour-explorer .thq-bcard .thq-total{border-color:rgb(var(--exp-line))}

/* booking sidebar: mock-match refinements (field labels, date field, timeslots, room rate, allocation).
   Hidden/scoped to .tour-explorer so the live page + the shared checkout partial are untouched. */
.thq-fieldlabel{display:none}
.tour-explorer .thq-fieldlabel{display:block; margin-bottom:7px; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard .thq-roomshead{color:rgb(var(--exp-ink-faint))}
/* date input (incl the shared Bokun partial via [x-ref]) -> warm paper field like the steppers */
.tour-explorer .thq-bcard input[x-ref="dateInput"]{background:rgb(var(--exp-paper)); border-color:rgb(var(--exp-line)); color:rgb(var(--exp-ink-soft))}
.tour-explorer .thq-bcard input[x-ref="dateInput"]::placeholder{color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard input[x-ref="dateInput"]:focus{border-color:rgb(var(--exp-accent)); box-shadow:0 0 0 3px rgb(var(--exp-accent)/.18); outline:none}
.tour-explorer .thq-bcard [x-ref="datePickerWrap"] svg{color:rgb(var(--exp-accent))}
/* "Choose a time" + any sub-label */
.tour-explorer .thq-bcard label{color:rgb(var(--exp-ink-faint))}
/* timeslot chips (shared partial): unselected = paper, selected = ink-navy accent (NOT raw green) */
.tour-explorer .thq-bcard button.px-3.text-sm:not(.bg-thq_green-700){background:rgb(var(--exp-paper)); color:rgb(var(--exp-ink)); border-color:rgb(var(--exp-line))}
.tour-explorer .thq-bcard button.px-3.text-sm:not(.bg-thq_green-700):hover{background:rgb(var(--exp-paper-2))}
.tour-explorer .thq-bcard button.px-3.text-sm.bg-thq_green-700{background:rgb(var(--exp-card)); color:rgb(var(--exp-accent)); border-color:rgb(var(--exp-accent)); box-shadow:inset 0 0 0 1px rgb(var(--exp-accent))}
/* room rate: stack the price under the room name (mock), collapse the inline dot via font-size:0 */
.tour-explorer .thq-bcard .thq-roomrate{display:block; margin-top:3px; font-size:0; color:rgb(var(--exp-ink-faint))}
.tour-explorer .thq-bcard .thq-roomrate > *{font-size:.72rem}
/* room allocation status: brass warn / accent ok (mock), dashed underline on the warn link */
.tour-explorer .thq-bcard .text-amber-600{color:rgb(var(--exp-brass))}
.tour-explorer .thq-bcard .text-emerald-600{color:rgb(var(--exp-accent))}
.tour-explorer .thq-bcard .text-amber-600 .font-medium{text-decoration:underline; text-decoration-style:dashed; text-underline-offset:3px}

/* Rate options (multi-rate tours): selectable cards below the timeslots. Capped + thin-scroll so many
   variants don't flood the card. Selected state uses the accent, matching the chosen timeslot. */
.tour-explorer .thq-bcard .thq-rateopts{max-height:17rem; overflow-y:auto; margin:0 -4px; padding:2px 4px; scrollbar-width:thin; scrollbar-color:rgb(var(--exp-line)) transparent}
.tour-explorer .thq-bcard .thq-rateopts::-webkit-scrollbar{width:8px}
.tour-explorer .thq-bcard .thq-rateopts::-webkit-scrollbar-thumb{background:rgb(var(--exp-line)); border-radius:9999px}
.tour-explorer .thq-bcard .thq-rateopts::-webkit-scrollbar-track{background:transparent}
.tour-explorer .thq-bcard .thq-rateopt{background:rgb(var(--exp-paper)); border:1px solid rgb(var(--exp-line)); color:rgb(var(--exp-ink-soft)); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease}
.tour-explorer .thq-bcard .thq-rateopt:hover{background:rgb(var(--exp-paper-2))}
.tour-explorer .thq-bcard .thq-rateopt.is-sel{background:rgb(var(--exp-card)); border-color:rgb(var(--exp-accent)); box-shadow:inset 0 0 0 1px rgb(var(--exp-accent))}
.tour-explorer .thq-bcard .thq-rateopt-radio{border:2px solid rgb(var(--exp-line))}
.tour-explorer .thq-bcard .thq-rateopt.is-sel .thq-rateopt-radio{border-color:rgb(var(--exp-accent))}
.tour-explorer .thq-bcard .thq-rateopt-dot{background:rgb(var(--exp-accent))}
.tour-explorer .thq-bcard .thq-rateopt-title{color:rgb(var(--exp-ink))}
.tour-explorer .thq-bcard .thq-rateopt-price{color:rgb(var(--exp-ink)); font-weight:600}

/* ── nav skin: the GLOBAL nav (common_navbar) renders OUTSIDE .tour-explorer, so .nav-explorer carries its own token block. Added by NavbarComposer on the tour routes (temp flag-gated until cutover); inert elsewhere. */
body, .nav-explorer, .breadcrumb_hldr, .content_main, .footer_hldr{
  --exp-paper:244 238 223;
  --exp-ink:26 36 31; --exp-ink-soft:85 96 90; --exp-ink-faint:140 138 124;
  --exp-line:222 210 186; --exp-brass:168 121 58;
}
.dark body, .dark .nav-explorer, .dark .breadcrumb_hldr, .dark .content_main, .dark .footer_hldr{
  --exp-paper:24 22 17;
  --exp-ink:236 229 214; --exp-ink-soft:177 169 149; --exp-ink-faint:131 124 108;
  --exp-line:50 46 38; --exp-brass:200 164 95;
}
/* bar: warm paper + hairline, drop the white drop-shadow so it blends into the page */
.nav-explorer .nav_main{box-shadow:0 6px 24px -16px rgba(26,36,31,.5)}
.dark .nav-explorer .nav_main{box-shadow:0 10px 30px -18px rgba(0,0,0,.75)}
/* translucent frosted bar (matches the mock): ~85% paper + backdrop blur, so scrolled content shows through faintly */
.nav-explorer .nav_main .nav_child{background:rgb(var(--exp-paper) / .85); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgb(var(--exp-line))}
/* top-level items only (child combinators leave dropdown-panel contents untouched): explorer ink, brass on hover */
.nav-explorer .mid_nav > ul > li > a,
.nav-explorer .mid_nav > ul > li > button,
.nav-explorer .last_nav .login_link{color:rgb(var(--exp-ink))}
.nav-explorer .mid_nav > ul > li > a:hover,
.nav-explorer .mid_nav > ul > li > button:hover,
.nav-explorer .last_nav .login_link:hover{color:rgb(var(--exp-brass))}

/* breadcrumb (tour page templates; the file loads only on explorer routes, so .breadcrumb_hldr is page-scoped by file presence and never touches checkout/other breadcrumbs): warm paper + muted links to match the page */
.breadcrumb_hldr{background:rgb(var(--exp-paper))}
.dark section.breadcrumb_hldr{background:rgb(var(--exp-paper))}
.breadcrumb_hldr > div{border-color:rgb(var(--exp-line))}
.dark .breadcrumb_hldr > div{border-color:rgb(var(--exp-line))}
.breadcrumb_hldr a, .dark .breadcrumb_hldr a{color:rgb(var(--exp-ink-soft)); text-decoration:none}
.breadcrumb_hldr a:hover, .dark .breadcrumb_hldr a:hover{color:rgb(var(--exp-brass)); text-decoration:underline}
.breadcrumb_hldr [aria-current="page"] span, .dark .breadcrumb_hldr [aria-current="page"] span{color:rgb(var(--exp-ink-faint))}
.breadcrumb_hldr .text-gray-400, .dark .breadcrumb_hldr .text-gray-400{color:rgb(var(--exp-ink-faint))}

/* ── verify-pass fixes: paper shell (orphan bands), sticky nav, monochrome logo, footer retint ── */

/* page shell: warm paper edge-to-edge into the footer; kill the white wrapper bg + the wrapper's side/bottom gutters so the closing promo sits flush (no orphan white bands) */
/* page canvas: theme <body> so the translucent nav reads against explorer paper in dark (it was revealing the un-themed light canvas as gray) */
body{background:rgb(var(--exp-paper))}
main.content_main, section.main_section{background:rgb(var(--exp-paper))}
.dark main.content_main, .dark section.main_section{background:rgb(var(--exp-paper))}
.main_section > div{padding-left:0; padding-right:0; padding-bottom:0}

/* sticky nav, desktop only (a body-level sticky nav on mobile would sit over the booking drawer). :has targets the nav's body-level <section> wrapper so sticky travels across the page.
   body's overflow-x:hidden computes overflow-y to auto -> body becomes a scroll container and breaks position:sticky; overflow-x:clip prevents h-scroll WITHOUT establishing a scroll container, so the nav pins to the viewport. */
@media(min-width:1024px){
  body.overflow-x-hidden{overflow-x:clip}
  section:has(.nav-explorer){position:sticky; top:0; z-index:50}
}

/* brand logo: flat white in dark (matches the mock: brightness(0) invert(1)); colored in light */
.dark .nav-explorer .logo_full, .dark .nav-explorer .logo_icon{filter:brightness(0) invert(1)}

/* footer: retint the server footer to the explorer palette on tour routes (scoped by file presence; payment/social/brand icons left intact) */
.footer_hldr footer{background:rgb(var(--exp-paper))}
.dark .footer_hldr footer{background:#0e0c08}
.footer_hldr h3, .dark .footer_hldr h3{color:rgb(var(--exp-ink-faint))}
.footer_hldr a, .dark .footer_hldr a{color:rgb(var(--exp-ink-soft))}
.footer_hldr a:hover, .dark .footer_hldr a:hover{color:rgb(var(--exp-brass))}
.footer_hldr p, .dark .footer_hldr p{color:rgb(var(--exp-ink-soft))}
.footer_hldr .text-2xl, .dark .footer_hldr .text-2xl{color:rgb(var(--exp-ink))}
.footer_hldr span.block, .dark .footer_hldr span.block{color:rgb(var(--exp-ink-faint))}
.footer_hldr hr, .dark .footer_hldr hr{border-color:rgb(var(--exp-line))}
.dark .footer_hldr img.h-6{filter:brightness(0) invert(1)}