/* ============================================================================
   Boundless Landing Pages — page styles (WordPress)
   ----------------------------------------------------------------------------
   The blocks, the page chrome and the Gravity Forms restyle. Builds on tokens.css
   and components.css; together the three files are the canonical landing page
   style. Only var(--w-light|--w-med|--w-bold) weights.
   ========================================================================== */

/* ===== Site-chrome mode: neutralise the theme's element rules inside the LP =====
   With the theme's header or footer on the page, foundation.css is loaded too. It styles
   bare elements (p 18px with 20px margins, h1/h2 with 36px margins and black text,
   section padding, list margins). These rules use :where() so they stay at element
   specificity: they beat the theme's rules only because this sheet loads later, and they
   never beat the component classes above/below. */
:where(.bjlp-main) :is(section,p,ul,ol,li,h1,h2,h3,h4,blockquote,figure){margin:0;padding:0;border:0;max-width:none}
:where(.bjlp-main) :is(h1,h2,h3,h4){color:inherit}
:where(.bjlp-main) :is(p,li){font-size:inherit;line-height:inherit}
:where(.bjlp-main) :is(ul,ol){list-style:none}
:where(.bjlp-main) :is(input,select,textarea){margin:0;box-shadow:none}

/* ===== Site-chrome mode: hand the theme's chrome its own box model back =====
   The other direction of the same meeting. components.css opens with the design system's
   reset, *{box-sizing:border-box}, written for a page the system owns outright. With the
   theme's header or footer on the page it reaches them too, and the theme sizes its chrome
   in content-box: header{height:49px} is the white mobile bar UNDER a 50px utility strip, so
   as border-box the strip swallows the whole height, the bar's box collapses to nothing and
   its background (the white bar with the cutout around the logo) has nowhere to paint: the
   menu button sits on the hero instead. The footer's 1000px column loses its 60px of side
   padding the same way. content-box is simply what these elements have on every other page.
   Zero specificity throughout, so it outranks only the reset (this sheet loads later) and
   never a box-sizing the theme sets itself. The reset's margin and padding need no undoing:
   the theme's own reset already zeroes both. .foot is the plugin's Minimal footer. */
:where(.bjlp) :where(header.header, .bj-topbar, footer:not(.foot)),
:where(.bjlp) :where(header.header, .bj-topbar, footer:not(.foot)) :where(*){box-sizing:content-box}

/* ===== Running text, retuned for WordPress =====
   The tokens set running text at a flat 19px/1.55 with a deck that tops out at 22px,
   which suits a page standing alone. On this site the same words sit beside the
   theme's own body copy, which steps 18px to 21px at 960px and sets line-height 1.4
   (foundation.css, and measured on /special-departures/ and /about-boundless-journeys/).
   A landing page two steps lighter and looser reads as an insert from somewhere else, so
   the tokens are matched to the theme here rather than each rule being patched.
   The deck moves with it: at 22px it would have been indistinguishable from 21px body.
   24px is the theme's own next step up, used for its sub-heads and CTA lines. */
.bjlp{--fs-body:18px;--lh-body:1.4;--fs-lead:20px}
@media (min-width:960px){.bjlp{--fs-body:21px;--fs-lead:24px}}

/* ===== Legibility floor =====
   Boundless's travellers are largely 55 and over, and the design system was drawn for a
   denser reading distance: eleven rules sat at 11-12px and ten more at 13px. The theme
   itself bottoms out at 14px and runs most of its interface at 15-18px, so the plugin read
   smaller than the pages around it as well as smaller than this audience wants. Everything
   below 14px has been raised in place; these four are base components from
   components.css, tuned here with the rest of the WordPress-specific sizing. */
.bjlp .btn{font-size:16px}
.bjlp .btn--sm{font-size:15px}
.bjlp .privacy-line{font-size:15px}
.bjlp .field label{font-size:14px}
/* The pull quote's attribution was the last text under the floor, and its gold name sat at
   3.5:1 on cream (audit 2026-09-16). Russet is the same warm register at 5.8:1. */
.bjlp .pullquote cite{font-size:14px}
.bjlp .pullquote cite b{color:var(--russet)}
/* The pull quote on a charcoal About: light text, and marigold for the name. */
.bjlp .lp-bg--charcoal .pullquote p,.bjlp .lp-bg--charcoal .pullquote cite{color:var(--ink-invert-soft)}
.bjlp .lp-bg--charcoal .pullquote cite b{color:var(--marigold)}

/* ===== Links inside grey notes =====
   A red phone number in a grey sentence is 1.2:1 against the words around it, so colour
   alone does not mark it as a link. Underlined, as links on dark sections already are. */
.bjlp-main .deps__note a,.bjlp-main .lptours__empty a,.bjlp-main .form-status a,.bjlp-main .cband__phone a{text-decoration:underline;text-underline-offset:3px}

/* ===== Focus on dark sections =====
   The system's focus ring is charcoal, which vanishes on a charcoal section or the hero's
   scrim. The slim header already switches to white; the sections do the same. */
.lp-bg--charcoal :focus-visible,.lp--photo :focus-visible{outline-color:var(--white)}
/* The panels that stay white inside a dark section keep the dark ring. */
.lp-bg--charcoal :is(.form-shell,.tcard,.trow__card,.lptours__sidebox,.lptours__empty) :focus-visible{outline-color:var(--charcoal)}

/* ===== Undo one site-wide Additional CSS rule =====
   Appearance > Customize > Additional CSS carries this, to bring black bullets back in post
   content:
       .entry-content ul li, .post-content ul li, main ul li
         { display:list-item !important; color:#000000 !important }
   Every block on a landing page sits inside <main class="bjlp-main">, so the third selector
   reaches every list the plugin builds. It flattened the departure rows out of flex, which
   is why the date and the price ran together with no gap, and it repainted every list item
   pure black over the #333 and #5a5e66 the design asks for. Two !important declarations, so
   only !important can answer them. Scoped to this plugin's lists; post content keeps its
   bullets. Worth correcting at the source too: `main:not(.bjlp-main) ul li` in that same
   Additional CSS box leaves every other page exactly as it is. */
.bjlp-main ul li{color:inherit !important}
.bjlp-main .terms li{color:var(--ink-soft) !important}
.bjlp-main .trow__hl li{color:var(--ink-soft) !important}
.bjlp-main .deps .dep{display:flex !important}
.bjlp-main .lprev__card{display:flex !important}   /* the review card is an <li> too */

/* ===== One layout system for every block =====
   Eight blocks had five wrapper widths, three kicker markups and backgrounds fixed per
   block, so the page's light and dark rhythm depended on whatever order the sections
   landed in. Every block now renders through bjlp_section_head() and
   bjlp_section_classes() and sits on these classes; a block adds its own rules on top.

   Two widths only. The reading column (--wrap-narrow, 760px) for copy, the form, About
   and fine print. The wide column for both trip blocks: 1580 across, 30px of padding
   from 960px, the theme's own content column, so a trip section lines up with /tours/
   and the site header rather than sitting inside them. The wide wrap carries its own
   horizontal padding so a wide section sets none of its own. */
.lp-section{padding:40px var(--gutter-sm)}
.lp-section--tight{padding:28px var(--gutter-sm)}
.lp-section--wide{padding-left:0;padding-right:0}
.lp-wrap{max-width:var(--wrap-narrow);margin:0 auto}
.lp-wrap--wide{max-width:1580px;padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}
@media (min-width:700px){.lp-section{padding:56px var(--gutter)}.lp-section--tight{padding:32px var(--gutter)}.lp-section--wide{padding-left:0;padding-right:0}}
@media (min-width:960px){.lp-section{padding:72px var(--gutter)}.lp-section--tight{padding:36px var(--gutter)}.lp-section--wide{padding-left:0;padding-right:0}.lp-wrap--wide{padding-left:30px;padding-right:30px}}

/* Backgrounds: the same four choices on every block, so a page can be set to alternate
   deliberately. Charcoal flips the text; a photo section (hero, call to action) shares
   the flip through .lp--photo. */
.lp-bg--white{background:var(--white)}
.lp-bg--stone{background:var(--stone)}
.lp-bg--cream{background:var(--cream)}
.lp-bg--charcoal{background:var(--charcoal)}
.lp-bg--charcoal,.lp--photo{color:var(--ink-invert)}
.lp-bg--charcoal .sec-title,.lp--photo .sec-title{color:var(--ink-invert)}
.lp-bg--charcoal .sec-kicker,.lp--photo .sec-kicker{color:var(--marigold)}
.lp-bg--charcoal .sec-sub,.lp--photo .sec-sub{color:var(--ink-invert-soft)}
.lp-bg--charcoal a:not(.btn),.lp--photo a:not(.btn){color:var(--ink-invert);text-decoration:underline}
.lp-bg--charcoal .sec-title b,.lp--photo .sec-title b{color:var(--marigold);font-weight:var(--w-bold)}
.lp-bg--charcoal .lptxt__body,.lp-bg--charcoal .about__facts p,.lp-bg--charcoal .about__facts b{color:var(--ink-invert)}
.lp-bg--charcoal .fine-print li,.lp-bg--charcoal .fine-print h2{color:var(--ink-invert-soft)}
/* The form shell and a trip card stay white inside a dark section, so everything the flip
   changed is put back inside them: without this a charcoal Form had a white heading on a
   white panel and a charcoal Trip cards had white reserve links on white cards. */
.lp-bg--charcoal .form-shell,.lp-bg--charcoal .tcard{color:var(--ink)}
.lp-bg--charcoal .form-shell .sec-title,.lp-bg--charcoal .tcard .tcard__title{color:var(--ink-strong)}
.lp-bg--charcoal .form-shell .sec-kicker{color:var(--red)}
.lp-bg--charcoal .form-shell .sec-sub{color:var(--ink-soft)}
.lp-bg--charcoal .form-shell a:not(.btn),.lp-bg--charcoal .tcard a:not(.btn){color:var(--ink-soft)}
.lp-bg--charcoal .tcard .tcard__reserve:hover{color:var(--red)}
/* The same link as a button: "Ask about this tour" acts on this page rather than leaving it. */
.tcard__ask{width:100%;background:none;border:0;padding:0;font-family:var(--font);font-weight:var(--w-light);cursor:pointer}

/* The head: kicker, heading, intro. One scale for every h2 (the theme's own h2 is 36px);
   the hero sets its own display size on top. Left by default, centred where the block
   asks for it. */
.lp-head{margin-bottom:28px}
.lp-head .sec-kicker{margin-bottom:12px}
.lp-head .sec-title{font-size:var(--fs-h2);margin-bottom:12px}
.lp-head .sec-sub{font-size:var(--fs-lead);max-width:660px;margin-bottom:0}   /* colour comes from .sec-sub and the background flip, never from here */
.lp-head--center{text-align:center}
.lp-head--center .sec-sub{margin-left:auto;margin-right:auto}
@media (min-width:700px){.lp-head{margin-bottom:36px}}

/* The optional button at the foot of a block: left under a reading column, centred under
   the wide grids and centred text. */
.lp-cta{margin-top:28px}
.lp-cta--center{text-align:center}
.lp-cta .btn{min-width:260px;max-width:100%}
@media (min-width:700px){.lp-cta{margin-top:40px}}

.bjlp .site-wrapper.bjlp-site-wrapper{padding-top:0}
.bjlp-main--site-header .offer{min-height:0}
@media (max-width:1074px){.bjlp-main--site-header .offer{padding-top:165px}} /* the theme's mobile header floats its logo over the top ~145px of the page */
/* Desktop: the theme's nav is absolutely positioned and its bottom edge hangs 50px below
   .site-wrapper's content edge, so that much of the hero's top padding is hidden behind it.
   A short hero also leaves the kicker grazing the nav the moment the header pins on scroll.
   The theme's own heroes run ~593px with the headline set low, so match that height and add
   the 50px back to the top padding. */
@media (min-width:1075px){.bjlp-main--site-header .offer{min-height:600px;padding-top:134px}}
.bjlp .stickybar,.bjlp .bjlp-notice{z-index:9999} /* above the theme's fixed header */

/* ===== Slim header: logo + phone (+ header CTA from 700px) ===== */
.slim{position:sticky;top:0;z-index:50;background:var(--charcoal);box-shadow:var(--shadow-bar);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-sm);padding:9px 16px}
/* with the site footer, the theme's bare header / header>div rules load; keep .slim's own geometry */
.bjlp header.slim{height:auto;min-height:0;max-height:none;width:auto;margin:0;border:0;background:var(--charcoal);position:sticky;top:0;transition:none}
.bjlp header.slim>div,.bjlp header.slim>a{height:auto;min-height:0;max-width:none;width:auto;margin:0;padding:0;border:0;background:none;float:none;transition:none}
.bjlp header.slim>div::before,.bjlp header.slim>div::after{display:none}
.slim__logo{height:34px;width:auto}
.slim__home{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.slim__right{display:flex;align-items:center;gap:18px}
.slim :focus-visible{outline-color:var(--white)}
.slim__cta{display:none}
.slim__cta-note{display:none}
@media (min-width:700px){
  .slim__cta{display:inline-flex;opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity var(--dur) ease,transform var(--dur) var(--ease)}
  .slim__cta.is-on{opacity:1;transform:none;pointer-events:auto}
}
@media (min-width:1080px){
  .slim__cta-note{display:inline;font-weight:var(--w-light);letter-spacing:.04em;text-transform:none;font-size:15px;opacity:.9;margin-right:6px;padding-right:12px;border-right:1px solid rgba(255,255,255,.35)}
}
@media (prefers-reduced-motion:reduce){.slim__cta{transition:none}}
.slim__phone{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--ink-invert);
  font-weight:var(--w-bold);font-size:15px;letter-spacing:.05em;white-space:nowrap}
.slim__phone:hover{text-decoration:underline}
@media (min-width:700px){.slim{padding:10px 28px}.slim__logo{height:44px}.slim__phone{font-size:17px}}
/* From 1000px the Minimal header follows the site's own chrome.
   Width: the logo and the phone sit in the theme header's column, a 1520px wrap with its
   content 13px in, instead of running out to the edges of a wide screen.
   Logo: at the top of the page it hangs out of the bar over the hero, as the site's does:
   two and a half times the size (the lockup is wide and short, so 44px of height is only
   70px across), the mountain in a peak cut out of the bar's lower edge with the photo showing
   through it, the script below the bar on the photo. It is white on the photo exactly as the
   hero's own headline is, and carries the same soft shadow. It is drawn back in BY the scroll,
   not on a timer: lp-wp.js sets --slim-p from 0 (top of the page) to 1 (180px down), and the
   logo's size and drop, the peak's depth and the shadow all follow it, so the page scrolls a
   while before the header is the slim sticky strip it always was (and it is never a pixel
   taller). About 200px is the ceiling: the hero's headline moves up with the page while the
   logo's lower edge rises more slowly, and at 1000px wide, where a long headline runs into the
   logo's columns, the 72px between them at the top would close before the logo had shrunk
   out of the way.
   The bar is painted by ::before so the peak can be clipped out of it without clipping the
   logo that hangs through it. The peak's apex sits over the mountain's: 51% across the
   lockup, 86px from its left edge at this size. Its shape and the logo's place in it are
   measured from the site's own header art (images/bg/header-960.png): an apex of 88 degrees
   (height just over half the base), two thirds of the bar tall, with the mountain's tip a
   quarter of the peak's height above the bar's lower edge, so most of the mountain hangs
   below the bar. Transform and clip-path only, so nothing on
   the page moves. --slim-p defaults to 1, so with no script, or on a page that does not open
   on the hero (lp-wp.js checks), it is simply the compact header; for a visitor who asked for
   less motion it switches once, without easing. */
@media (min-width:1000px){
  .slim,.bjlp header.slim{--slim-pad:max(28px,calc(50% - 747px));--peak-x:calc(var(--slim-pad) + 86px);
    padding-left:var(--slim-pad);padding-right:var(--slim-pad);background:transparent}
  .slim::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--charcoal);
    clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--peak-x) + 40px) 100%,var(--peak-x) calc(22px + 42px * var(--slim-p,1)),calc(var(--peak-x) - 40px) 100%,0 100%);
    transition:clip-path .12s linear}   /* the apex runs from 22px (open) to the bar's 64px (closed); the short ease only smooths a wheel's steps */
  .slim.is-top,.bjlp header.slim.is-top{box-shadow:none}   /* a shadow under the bar would draw a line across the open peak */
  /* One straight move. The logo scales about the mountain's TIP (51% across, the top edge) and
     the compact logo rests on the same centre line as the peak (.has-peak shifts it the 50px),
     so the tip never leaves that line: the logo goes straight up while the peak closes over
     it. Scaling from the top-left corner walked the mountain out from under the peak, and
     sliding it back to the column's edge afterwards read as a second animation. .has-peak is
     set by lp-wp.js only on a page whose header has the peak, so any other keeps the logo at
     the column's edge. */
  .slim__logo{transform-origin:51% 0;transition:transform .12s linear}
  .slim.has-peak .slim__logo{
    transform:translate(50px,calc(44px * (1 - var(--slim-p,1)))) scale(calc(1 + 1.4 * (1 - var(--slim-p,1))));
    filter:drop-shadow(0 1px 8px rgba(0,0,0,calc(.45 * (1 - var(--slim-p,1)))))}
  /* The site's header floats over its hero, which is why a peak cut out of it shows photo. This
     bar is sticky and sits above the hero in the flow, so the cut-out would show the page's
     white instead (and a white mountain on it). The hero therefore runs up underneath the bar
     by the bar's 64px, and is that much taller, so what is seen of it is unchanged. Its content
     starts 116px below the bar: clear of the logo, which reaches 96px down, so a wide headline
     can never run in behind white-on-white. */
  .bjlp-main:not(.bjlp-main--site-header) > section.offer:first-child{margin-top:-64px;padding-top:180px;min-height:624px}
  /* the focus ring follows the logo as drawn, not the 70px box it is laid out in */
  .slim__home:focus-visible{outline:none}
  .slim__home:focus-visible .slim__logo{outline:2px solid var(--white);outline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.slim__logo,.slim::before{transition:none}}

/* ===== Sticky bottom bar (phones only) ===== */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(0,0,0,.14);padding:10px var(--gutter-sm) calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform var(--dur) var(--ease);visibility:hidden}
.stickybar.is-on{transform:none;visibility:visible}
.stickybar__inner{display:flex;align-items:center;gap:12px}
.stickybar__text{flex:1;min-width:0;font-size:14px;line-height:1.3;color:var(--ink-soft)}
.stickybar__text b{display:block;font-weight:var(--w-bold);color:var(--charcoal);font-size:15px}
.stickybar__text span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* a phone/note stays one line, never wraps digit by digit */
.stickybar__btn{flex:none;min-height:var(--control-h-sm);padding:0 18px;font-size:15px}
/* No text (Minimal chrome, default copy): the button is the whole bar. */
.stickybar--cta-only .stickybar__btn{flex:1;justify-content:center}
@media (min-width:700px){.stickybar{display:none}}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}
/* The theme's Olark launcher (hard-coded in its footer, so it cannot be dequeued) sits in
   the same corner as the bar and over the first form field on a phone. Lift it clear. */
@media (max-width:699px){.bjlp-bar-on .bjlp .olark-launch-button-wrapper{bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;transition:bottom var(--dur) var(--ease)}}

/* ===== Hero: the offer ===== */
.offer{position:relative;overflow:hidden;background:var(--night);text-align:center;isolation:isolate;padding-top:34px;padding-bottom:36px}
.offer picture{position:absolute;inset:0;z-index:-2;display:block}
.offer__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.offer::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,17,32,.62) 0%,rgba(13,17,32,.6) 40%,rgba(13,17,32,.8) 100%)} /* mid stop .5 -> .6: the headline clears contrast on a bright photo too */
.offer__inner{position:relative}
.offer .lp-head{margin-bottom:0}
.offer .lp-head .sec-kicker{margin-bottom:12px}
.offer .lp-head .sec-sub{color:var(--ink-invert);opacity:.92;margin:0 auto 16px}
/* The hero's display size, on top of the shared head's h2 scale. */
.offer .lp-head .sec-title{font-size:clamp(28px,7.4vw,52px);font-weight:var(--w-bold);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);text-transform:uppercase;margin-bottom:12px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.deadline{display:inline-block;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);
  padding:10px 16px;margin-bottom:18px;font-size:15px;line-height:1.4}
.deadline__code{display:block;margin-top:6px;font-weight:var(--w-light);letter-spacing:.02em}
.deadline__code b{font-weight:var(--w-bold);letter-spacing:.06em}
.deadline__label{display:block;font-size:14px;font-weight:var(--w-bold);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--marigold);margin-bottom:2px}
.deadline b{font-weight:var(--w-bold);color:var(--ink-invert)}
.deadline--over{border-color:var(--marigold)}
.offer__cta{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:420px;margin:0 auto}
.offer__cta .btn{width:100%}
.offer__see{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--ink-invert);
  font-size:16px;font-weight:var(--w-med);letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px}
.offer__see:hover{color:var(--marigold)}
@media (min-width:700px){.offer{padding-top:84px;padding-bottom:88px;min-height:560px;display:flex;align-items:center;justify-content:center}.deadline{font-size:17px;padding:12px 22px}}

/* ===== Award: strip under the hero, or a seal stamped on it from 1080px ===== */
.trust{background:var(--stone);border-bottom:1px solid var(--line);padding:14px var(--gutter-sm)}
.trust__inner{display:flex;justify-content:center;max-width:var(--wrap);margin:0 auto}
.badge{display:flex;align-items:center;gap:14px;min-width:0}
.badge img{width:64px;height:64px;flex:none;background:var(--white);border-radius:50%;object-fit:cover}
.badge__title{font-size:14px;font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal);line-height:1.25}
.badge__sub{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.stamp{display:none}
@media (min-width:700px){.trust{padding:16px var(--gutter)}}
@media (min-width:1080px){
  .trust{display:none}
  .stamp{display:flex;flex-direction:column;align-items:center;gap:6px;position:absolute;right:56px;bottom:44px;z-index:1}
  .stamp img{width:120px;height:120px;background:var(--white);border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.35);object-fit:cover}
  .stamp__sub{font-size:14px;font-weight:var(--w-med);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-invert);opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.6)}
}

/* ===== Trip cards ===== */
.lpcards{scroll-margin-top:calc(var(--bjlp-sticky-top,44px) + 20px)}
.tgrid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:700px){.tgrid{grid-template-columns:1fr 1fr;gap:26px}}
@media (min-width:1080px){.tgrid{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:1400px){.tgrid{grid-template-columns:repeat(4,1fr)}}
.tcard{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;cursor:pointer;
  transition:box-shadow var(--dur) ease,transform var(--dur) var(--ease)}
.tcard:hover,.tcard:focus-within{box-shadow:var(--shadow-lift)}
.tcard__media{position:relative;display:block;background:var(--charcoal);aspect-ratio:2/1;overflow:hidden}   /* wider than a row's 3:2: a card has to fit one laptop screen, and the trips' header photos are banners anyway */
/* Fill the box absolutely rather than with height:100%. A percentage height has to resolve
   against the aspect-ratio box, which some Chrome builds treat as indefinite and then let the
   image's own height stretch the box past 2:1; inset:0 pins all four edges, so the 2:1 box
   wins whatever the source ratio or a stray height:auto. */
.tcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tcard__img--empty{background:linear-gradient(135deg,var(--charcoal),var(--night-2))}
.tcard__body{padding:16px 18px 14px;display:flex;flex-direction:column;flex:1}
.tcard__title{font-size:19px;font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:6px;line-height:1.3}
.tcard__hook{font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* two lines; the trip page has the rest */
/* Summary display: a "from" price, then one line that opens to every date. */
.tcard__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0;padding:8px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.tcard__price b{font-size:26px;line-height:1.1;font-weight:var(--w-bold);color:var(--charcoal)}
.tcard__price s{font-size:17px}
.tcard__price b.tcard__promo{color:var(--red)}
.tcard__dates,.tcard__one{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:12px}
.tcard__one{padding:11px 0;font-size:16px;color:var(--ink-soft)}
.tcard__one b{font-weight:var(--w-med);color:var(--charcoal)}
.tcard__dates summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap-min);list-style:none;cursor:pointer;font-size:16px;color:var(--ink-soft)}
.tcard__dates summary::-webkit-details-marker{display:none}
.tcard__dates summary b{font-weight:var(--w-med);color:var(--charcoal)}
.tcard__dates summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 3px 0;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg)}
.tcard__dates[open] summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.tcard__dates summary:hover b{color:var(--red)}
.tcard__dates .deps__head{border-top:1px solid var(--line);padding-top:10px}
.tcard__dates .deps .dep:last-child{border-bottom:0}
.tcard__foot{margin:6px 0 0;text-align:center}
.lpcards__note{margin:18px 0 0;font-size:15px;color:var(--ink-soft)}
.lp-bg--charcoal .lpcards__note{color:var(--ink-invert-soft)}
/* A card carries the same labelled facts as a trip row (.trow__facts), a size down. */
/* Two fixed columns rather than a wrapping row: a card is narrow enough that a long level
   name ("Moderate to Strenuous") used to push Activity level under Duration. The name now
   wraps inside its own column, with the gauge and the number held to the first line.
   Doubled class: the shared .trow__facts rules come later in this file. */
.trow__facts.tcard__facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;padding:10px 0 10px}
.trow__facts.tcard__facts dd{flex-wrap:nowrap;align-items:flex-start;font-size:17px;line-height:1.3}
.tcard__facts .trow__gauge{margin-top:2px}
.deps__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 8px;border-top:1px solid var(--line);
  font-size:14px;font-weight:var(--w-bold);letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--ink-soft)}
.deps__head span:last-child{font-weight:var(--w-med);letter-spacing:.1em;white-space:nowrap}
.deps{list-style:none;border-top:1px solid var(--line)}
/* Date left, price right, and both refuse to break mid-value. At the larger sizes the pair
   no longer fits a three-up card, and without the wrap the gap collapsed and the price ran
   into the date. Wrapped, the price drops to its own right-aligned line instead. */
.dep{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}
/* flex:none on both, or they shrink past their own text and overlap instead of wrapping. */
.dep__date{flex:none;font-weight:var(--w-med);color:var(--charcoal);white-space:nowrap}
.dep__price{flex:none;margin-left:auto;text-align:right;white-space:nowrap}
.dep__reg{color:var(--ink-soft);font-size:15px;margin-right:6px}
.dep__promo{font-weight:var(--w-bold);color:var(--red);font-size:21px}
.dep__promo--plain{color:var(--charcoal)}
.dep__call{font-size:15px;color:var(--ink-soft)}
.dep__soldout{font-size:14px;font-weight:var(--w-med);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.dep--closed .dep__date{color:var(--ink-soft);text-decoration:line-through}
.deps__note{font-size:15px;color:var(--ink-soft);margin:8px 0 16px}
.deps__note--empty{border-top:1px solid var(--line);padding-top:10px;font-size:var(--fs-small)}
.tcard__details{margin-top:auto}
.tcard__reserve{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);
  margin-top:6px;font-size:15px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.tcard__reserve:hover{color:var(--red)}
.js-ready .tcard.reveal{transition-duration:.45s}
/* If the runtime never marks cards as revealed (script error, blocked), show them anyway after 2.5s */
@keyframes bjlp-show{to{opacity:1;transform:none}}
.js-ready .reveal{animation:bjlp-show .4s ease 2.5s forwards}
@media (prefers-reduced-motion:reduce){.js-ready .reveal{animation:none}}
html{scroll-padding-bottom:80px} /* keep focused controls above the phone CTA bar */

/* ===== About ===== */
.about__facts p{font-size:var(--fs-body);color:var(--ink);margin-bottom:8px}
.about__facts b,.about__facts strong{font-weight:var(--w-bold);color:var(--petrol)}
.about__facts ul,.about__facts ol{margin:0 0 8px 22px;font-size:var(--fs-body)}
.about .pullquote{margin:24px 0 20px}
.about__link{display:inline-flex;align-items:center;min-height:var(--tap-min);font-size:16px;font-weight:var(--w-med);
  letter-spacing:.04em;color:var(--red);text-decoration:underline;text-underline-offset:4px}

/* ===== Form ===== */
/* The 44px fallback keeps a 64px offset when the script has not run. */
.lpform{scroll-margin-top:calc(var(--bjlp-sticky-top,44px) + 20px)}
/* One column keeps a form measure, roughly 65 characters at the 17px input size. Two
   columns take the reading column, so the page holds one centred edge throughout. */
.lpform .form-shell{max-width:560px;margin:0 auto}
.lpform .form-shell--two{max-width:var(--wrap-narrow)}
.lpform .lp-head{margin-bottom:24px}
.form-shell select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--charcoal) 50%),linear-gradient(135deg,var(--charcoal) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.form-shell .field--trip{margin-bottom:16px}

/* Gravity Forms, restyled to the system (works with the "gravity-theme" markup GF 2.5+
   renders; the Orbital theme's variables are set too). Scoped to the form shell. */
.bjlp .form-shell .gform_wrapper{margin:0;--gf-color-primary:var(--red);--gf-color-primary-contrast:var(--white);--gf-ctrl-border-color:var(--line-input);--gf-ctrl-border-radius:0;--gf-ctrl-size:var(--control-h);--gf-ctrl-font-family:var(--font);--gf-ctrl-font-size:var(--input-fs);--gf-ctrl-btn-border-radius:0;--gf-ctrl-btn-font-family:var(--font);--gf-label-font-family:var(--font)}
.bjlp .form-shell .gform_wrapper .gform_heading{display:none}
.bjlp .form-shell .gform_wrapper .gform_fields{row-gap:16px}
.bjlp .form-shell .gform_wrapper .gfield{margin:0}
.bjlp .form-shell .gform_wrapper .gfield_visibility_hidden,
.bjlp .form-shell .gform_wrapper .gfield--type-honeypot{display:none !important}
.bjlp .form-shell .gform_wrapper .gfield_label,
.bjlp .form-shell .gform_wrapper legend.gfield_label,
.bjlp .form-shell .gform_wrapper .gfield_label.gform-field-label{
  display:block;font-family:var(--font) !important;font-size:14px !important;font-weight:var(--w-med) !important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--charcoal) !important;margin:0 0 6px !important;padding:0;line-height:1.3}
.bjlp .form-shell .gform_wrapper .gfield_required{color:var(--red);font-weight:var(--w-med);padding-left:3px}
.bjlp .form-shell .gform_wrapper .ginput_complex label,
.bjlp .form-shell .gform_wrapper .gform-field-label--type-sub{
  font-family:var(--font) !important;font-size:14px !important;font-weight:var(--w-light) !important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft) !important;margin:5px 0 0 !important}
.bjlp .form-shell .gform_wrapper .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
.bjlp .form-shell .gform_wrapper select,
.bjlp .form-shell .gform_wrapper textarea{
  width:100% !important;min-height:var(--control-h) !important;padding:var(--input-pad) !important;
  border:1px solid var(--line-input) !important;border-radius:0 !important;background:var(--white) !important;
  font-family:var(--font) !important;font-weight:var(--w-light) !important;font-size:var(--input-fs) !important;color:var(--ink) !important;
  line-height:1.3 !important;box-shadow:none;transition:border-color var(--dur-fast)}
.bjlp .form-shell .gform_wrapper textarea{min-height:88px !important;resize:vertical}
.bjlp .form-shell .gform_wrapper .ginput_container input:focus,
.bjlp .form-shell .gform_wrapper select:focus,
.bjlp .form-shell .gform_wrapper textarea:focus{outline:none !important;border-color:var(--charcoal) !important;box-shadow:0 0 0 3px rgba(46,48,56,.12) !important}
.bjlp .form-shell .gform_wrapper .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bjlp .form-shell .gform_wrapper .ginput_complex > span{display:block;padding:0 !important;margin:0 !important}
.bjlp .form-shell .gform_wrapper .ginput_complex > span.name_prefix,.bjlp .form-shell .gform_wrapper .ginput_complex > span.name_middle,.bjlp .form-shell .gform_wrapper .ginput_complex > span.name_suffix{display:none}
/* Stacked, a sub-label sitting under its own box reads as the label for the next box
   down: "First" lands directly above the Last name input. Put each one back above the
   field it names. Side by side, where GF's own convention is legible, they stay below. */
@media (max-width:699px){
  .bjlp .form-shell .gform_wrapper .ginput_complex{grid-template-columns:1fr}
  .bjlp .form-shell .gform_wrapper .ginput_complex > span{display:flex;flex-direction:column}
  .bjlp .form-shell .gform_wrapper .ginput_complex > span > label{order:-1;margin:0 0 5px !important}
}

/* ===== Two-column fields =====
   Gravity Forms pairs fields only where the form author set a span in its layout editor,
   and Boundless's forms never have: every field is unset or the default full width. So the
   field list becomes a flex line here and the short types claim half of it. Flex rather
   than grid because the last field of an odd run then grows to fill its own row, where a
   grid leaves a hole beside it. Only the types listed below pair, so a field type this
   sheet has never met keeps a full row rather than being broken by it. Hidden fields are
   display:none and take no slot. */
@media (min-width:700px){
  .bjlp .form-shell--two .gform_wrapper .gform_fields{display:flex;flex-wrap:wrap;column-gap:2%;row-gap:16px}
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield{flex:0 0 100%;min-width:0}
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-text,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-email,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-phone,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-number,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-date,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-time,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-website,
  .bjlp .form-shell--two .gform_wrapper .gform_fields > .gfield--type-select{flex:1 1 49%}
}
.bjlp .form-shell .gform_wrapper .gfield_radio,.bjlp .form-shell .gform_wrapper .gfield_checkbox{display:flex;flex-wrap:wrap;gap:8px 22px;margin:2px 0 0}
/* The label is the tap target, not the 24px circle: it is clickable, so it is the thing
   that gets the 44px height (a tall row around a short label activates nothing). */
.bjlp .form-shell .gform_wrapper .gchoice{display:flex;align-items:center;gap:9px;margin:0 !important;padding:0 !important}
.bjlp .form-shell .gform_wrapper .gchoice input[type=radio],.bjlp .form-shell .gform_wrapper .gchoice input[type=checkbox]{width:24px !important;height:24px !important;min-height:0 !important;margin:0 !important;accent-color:var(--red);flex:none}
.bjlp .form-shell .gform_wrapper .gchoice label{display:flex;align-items:center;min-height:44px;font-family:var(--font) !important;font-size:var(--fs-small) !important;font-weight:var(--w-light) !important;color:var(--ink-soft) !important;text-transform:none !important;letter-spacing:0 !important;margin:0 !important;padding:0 6px 0 0 !important;max-width:none !important;line-height:1.4}
.bjlp .form-shell .gform_wrapper .gfield_description{font-family:var(--font);font-size:15px !important;color:var(--ink-soft) !important;padding:4px 0 0 !important;line-height:1.5}
.bjlp .form-shell .gform_wrapper .gfield--type-turnstile{margin-top:4px}
.bjlp .form-shell .gform_wrapper .gfield--type-turnstile .gfield_label{display:none}
.bjlp .form-shell .gform_wrapper .gform_footer,.bjlp .form-shell .gform_wrapper .gform-footer{padding:0 !important;margin:20px 0 0 !important;display:block}
.bjlp .form-shell .gform_wrapper .gform_button,.bjlp .form-shell .gform_wrapper .gform_footer button,.bjlp .form-shell .gform_wrapper .gform-footer button{
  display:flex !important;align-items:center;justify-content:center;width:100% !important;min-height:var(--control-h) !important;padding:0 var(--control-pad-x) !important;
  background:var(--red) !important;color:var(--ink-invert) !important;border:0 !important;border-radius:0 !important;
  font-family:var(--font) !important;font-weight:var(--w-med) !important;font-size:16px !important;letter-spacing:var(--ls-button);text-transform:uppercase;line-height:1.2 !important;
  cursor:pointer;transition:background var(--dur-fast) ease-in-out;margin:0 !important;box-shadow:none !important}
.bjlp .form-shell .gform_wrapper .gform_button:hover,.bjlp .form-shell .gform_wrapper .gform_footer button:hover{background:var(--red-deep) !important}
.bjlp .form-shell .gform_wrapper .gform_button:disabled{opacity:.6}
.bjlp .form-shell .gform_wrapper .gform_validation_errors{background:var(--error-bg) !important;border:1px solid var(--red-tint) !important;border-radius:0 !important;box-shadow:none !important;padding:10px 14px !important;margin:0 0 16px !important}
.bjlp .form-shell .gform_wrapper .gform_validation_errors h2,.bjlp .form-shell .gform_wrapper .gform_validation_errors .gform_submission_error{font-family:var(--font) !important;font-size:var(--fs-small) !important;font-weight:var(--w-med) !important;color:var(--error) !important;text-transform:none !important;letter-spacing:0 !important;margin:0 !important;padding:0 !important}
.bjlp .form-shell .gform_wrapper .gform_validation_errors ol,.bjlp .form-shell .gform_wrapper .gform_validation_errors ul{margin:6px 0 0 18px !important;padding:0 !important;font-size:var(--fs-small)}
.bjlp .form-shell .gform_wrapper .gform_validation_errors li{margin:2px 0 !important;padding:0 !important}
.bjlp .form-shell .gform_wrapper .gform_validation_errors a{color:var(--error) !important;text-decoration:underline;text-underline-offset:3px}
.bjlp .form-shell .gform_wrapper .gfield_error .ginput_container input,.bjlp .form-shell .gform_wrapper .gfield_error select,.bjlp .form-shell .gform_wrapper .gfield_error textarea{border-color:var(--error) !important}
.bjlp .form-shell .gform_wrapper .gfield_validation_message,.bjlp .form-shell .gform_wrapper .validation_message{background:none !important;border:0 !important;color:var(--error) !important;font-family:var(--font) !important;font-size:var(--fs-small) !important;padding:5px 0 0 !important;margin:0 !important}
.bjlp .form-shell .gform_wrapper .gfield_error{background:none !important;border:0 !important;padding:0 !important;margin:0 !important;width:auto !important;max-width:none !important}
.bjlp .form-shell .gform_wrapper .gform_required_legend{display:none}
.bjlp .form-shell .gform_wrapper .gform_ajax_spinner{margin-left:12px}
.bjlp .form-shell .gform_confirmation_message{font-size:var(--fs-body);color:var(--ink)}

/* ===== Text section ===== */
.lptxt__inner--standard{max-width:var(--wrap)}   /* the block's "Standard" width: one step up from the reading column */
.lptxt--center{text-align:center}
.lptxt .lp-head{margin-bottom:20px}
.lptxt__body{font-size:var(--fs-body)}
.lptxt__body p,.lptxt__body ul,.lptxt__body ol{margin-bottom:14px}
.lptxt__body ul,.lptxt__body ol{padding-left:24px}
.lptxt__body h3{margin:22px 0 8px}
.lptxt__body img{margin:16px auto}
.lptxt__body a{text-decoration:underline;text-underline-offset:3px}

/* ===== Call to action ===== */
.cband{position:relative;overflow:hidden;text-align:center;isolation:isolate}
.cband picture{position:absolute;inset:0;z-index:-2;display:block}
.cband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cband--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,17,32,.68)}
.cband__inner{position:relative}
.cband .lp-head{margin-bottom:22px}
.cband .btn{min-width:260px}
.cband__phone{margin-top:14px;font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cband__phone a{color:var(--charcoal);font-weight:var(--w-bold)}
.lp-bg--charcoal .cband__phone,.lp--photo .cband__phone{color:var(--ink-invert-soft)}
.lp-bg--charcoal .cband__phone a,.lp--photo .cband__phone a{color:var(--ink-invert)}

/* ===== Testimonials =====
   Three quote cards to a row on the wide column, six as two rows. Each card is the same
   white panel a trip card is, so the two read as one family; on charcoal they go a step
   darker than the section instead. The opening quote mark is the pull quote's. */
.lprev__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:700px){.lprev__grid{grid-template-columns:1fr 1fr;gap:26px}}
@media (min-width:1080px){.lprev__grid{grid-template-columns:repeat(3,1fr)}}
.lprev__card{display:flex}
.lprev__quote{position:relative;flex:1;display:flex;flex-direction:column;margin:0;padding:26px 24px 22px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.lprev__quote::before{content:"\201C";position:absolute;right:20px;top:6px;font-family:var(--font);font-size:72px;line-height:1;color:var(--gold);font-weight:var(--w-bold);opacity:.55}
.lprev__rating{display:flex;align-items:center;margin-bottom:12px}
.lprev__stars{display:block;width:100px;height:20px}
.lprev__stars .is-on{fill:var(--red)}
.lprev__stars .is-off{fill:var(--line-input)}
.lprev__title{font-size:19px;font-weight:var(--w-bold);letter-spacing:.02em;color:var(--ink-strong);line-height:1.3;margin:0 0 10px;padding-right:36px}
.lprev__text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);margin:0 0 18px;flex:1}
/* Footer: who and when on one line, the trip on its own line under it. Three items in one
   justified row collided as soon as a trip name ran long. */
/* Widths and margins set outright: the theme sizes bare footer and div elements by
   element, and the first version of this footer inherited a 70% width and auto margins. */
.lprev__who{display:block;width:auto;margin:0;padding:14px 0 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft);text-align:left}
.lprev__byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding:0}
.lprev__name{font-style:normal;font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal)}
.lprev__date{font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.lprev__name + .lprev__date::before{content:"\00B7";margin-right:10px;color:var(--ink-soft);opacity:.7}
.lprev__trip{display:block;margin-top:5px;line-height:1.4}
.lprev__trip a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.lprev__trip a:hover{color:var(--red)}
.lp-bg--charcoal .lprev__quote{background:var(--charcoal-deep);border-color:rgba(255,255,255,.12);box-shadow:none}
.lp-bg--charcoal .lprev__title,.lp-bg--charcoal .lprev__name{color:var(--ink-invert)}
.lp-bg--charcoal .lprev__text{color:var(--ink-invert)}
.lp-bg--charcoal .lprev__who{border-color:rgba(255,255,255,.12);color:var(--ink-invert-soft)}
.lp-bg--charcoal .lprev__trip a{color:var(--ink-invert-soft)}
.lp-bg--charcoal .lprev__stars .is-off{fill:rgba(255,255,255,.25)}

/* ===== Fine print + footer ===== */
.fine-print{border-top:1px solid var(--line)}
/* Fine print keeps a small caps label rather than a section heading: it is the one block
   that should not announce itself. */
.fine-print .lp-head{margin-bottom:8px}
.fine-print .lp-head .sec-title{font-size:14px;letter-spacing:var(--ls-kicker);color:var(--ink-soft);margin-bottom:0}
.fine-print ul{list-style:none}
.fine-print li{font-size:16px;color:var(--ink-soft);padding:3px 0}
.foot{background:var(--charcoal-deep);color:var(--ink-invert-soft);padding:30px var(--gutter);text-align:center;font-size:var(--fs-micro);line-height:1.7}
.foot__logo{height:48px;width:auto;margin:0 auto 14px;opacity:.9}
.foot a{color:var(--ink-invert);text-decoration:underline;text-underline-offset:3px}
.foot__phone{font-size:17px;font-weight:var(--w-bold)}
.foot__links a{margin:0 8px}
.foot__since{margin-top:10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}

/* ===== Editors' check bar (logged-in editors only; collapsed by default) ===== */
.bjlp-notice{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff8e1;border-top:2px solid var(--marigold);color:var(--charcoal);font-size:15px;line-height:1.45;box-shadow:0 -4px 20px rgba(0,0,0,.12)}
.bjlp-notice__inner{max-width:var(--wrap-wide);margin:0 auto;padding:8px var(--gutter)}
.bjlp-notice__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bjlp-notice__head b{font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;font-size:14px;white-space:nowrap}
.bjlp-notice__summary{flex:1;min-width:200px}
.bjlp-notice__toggle,.bjlp-notice__close{background:var(--charcoal);color:var(--white);border:0;border-radius:0;padding:6px 12px;font-family:var(--font);font-size:14px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.bjlp-notice__toggle{background:var(--white);color:var(--charcoal);border:1px solid var(--charcoal)}
.bjlp-notice__body{display:none;max-height:40vh;overflow:auto;margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.1)}
.bjlp-notice.is-open .bjlp-notice__body{display:block}
.bjlp-notice__row{margin:2px 0}
.bjlp-notice__list{margin:6px 0 0 18px}
.bjlp-notice__list li{padding:2px 0}

/* ============================================================================
   TOUR ROWS — one tour per row, with an optional filter bar.
   Widths follow the theme's own container (max 1520 with 18px gutters, 30px from
   960px up) so rows line up with the rest of the site; the row list itself caps at
   1320px so it does not stretch on large monitors.
   ========================================================================== */

/* --- The sticky fix -------------------------------------------------------
   The theme wraps every page in .site-wrapper{overflow:hidden}, which makes that
   wrapper a scroll container: a sticky bar inside it sticks to the wrapper and
   scrolls away with the page. `overflow: clip` clips identically but creates no
   scroll container, so sticky resolves against the viewport again. Scoped to LP
   pages and to 768px up, because below that the theme needs `hidden` for the
   slide-out menu and the bar does not stick on phones anyway. Verified: clip
   restores sticky with no horizontal scrollbar, where `visible` reintroduces one.
   Browsers without `overflow: clip` drop the declaration, keep `hidden`, and the
   bar simply scrolls away. */
@media (min-width:768px){ .bjlp .site-wrapper{ overflow:clip } }

/* --- Section ---------------------------------------------------------- */
/* The theme's header is fixed on scroll and covers roughly its first 105px, so anything
   we scroll to needs to clear it. (Ordinary reading still passes under the header, as it
   does on every page of the site.) */
/* scroll-margin applies to the element scrolled into view, which for keyboard navigation
   is the focused control, not its row. Tabbing down a row used to put the trip link, the
   ask button and the expander summary underneath the chrome. The offset the script just
   measured is used rather than a guess, plus room for the sticky bar above them. */
.lptours,.trow{scroll-margin-top:calc(var(--bjlp-sticky-top,0px) + 24px)}
.lptours :is(a,button,summary,input,select,textarea){scroll-margin-top:calc(var(--bjlp-sticky-top,0px) + 130px)}
/* [hidden] needs a backstop here too: the UA rule loses to any author display rule from
   the theme's stylesheet, and the empty state and resets rely on it. */
.lptours [hidden]{display:none !important}
/* Names the chip counts for a screen reader without repeating them on screen. */
.bjlp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The side gutter lives on the wrap, not the section, and is stated here rather than
   inherited: the theme's own "section > div" rule was supplying 30px, which stacked on
   top of the section's padding to put this section 54px in where the theme's own content
   sits at 30, and which disappears entirely in Minimal chrome where that stylesheet is
   dequeued. Owning it keeps both chrome modes identical and matching the site. */
/* One column for the whole section, at the width the theme uses for its own content.
   Two things were wrong. The list and bar capped at 1320 and centred while the heading,
   intro and collection index sat at the wrap's edge, so above 1600 they staggered apart
   by 70px. And the column itself matched nothing else on the site: the theme runs 1520 of
   content inside 30px of padding, putting its edge at 140 on an 1800px screen, where this
   section sat at 240. Everything now shares --lp-col, so the whole section lines up with
   the rest of the page and with itself. Narrowing it again is one value. */
.lptours__wrap{margin:0 auto;
  /* The section's left edge is the site's. The rows are capped narrower than it and
     anchored to that edge rather than centred inside it: centring is what pushed them
     100px right of the heading, and filling the full 1520 made them too wide to read.
     --lp-col is the single value that sets how wide a tour row gets. */
  --lp-col:1520px;                                     /* the section fills the site's column */
  --lp-inset:0px}
/* Spans both columns: capped at reading width it read as a caption on the sidebar rather
   than a header over the section, and the narrative paragraph it used to carry stranded
   750px of empty space beside it. Long copy belongs in a Text block set to Stone, which
   shares this background. */
.lptours__head{margin-left:var(--lp-inset)}
.lptours__empty{margin-left:var(--lp-inset)}

/* "In this collection" */
.lptours__coll{margin:34px 0 0 var(--lp-inset);max-width:var(--wrap)}   /* shorthand, so the inset has to live here */
.lptours__coll-label{display:flex;align-items:center;gap:8px;min-height:var(--tap-min);cursor:pointer;list-style:none;
  font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--ink-soft)}
.lptours__coll-label::-webkit-details-marker{display:none}
.lptours__coll-label::after{content:"+";font-size:21px;font-weight:var(--w-light);line-height:1;color:var(--ink-soft)}
.lptours__coll[open] .lptours__coll-label::after{content:"–"}
.lptours__coll-n{font-weight:var(--w-light);letter-spacing:0}
/* On wide screens it is just a list: no disclosure affordance, always shown. */
@media (min-width:700px){
  .lptours__coll-label{cursor:default;margin-bottom:8px}
  .lptours__coll-label::after,.lptours__coll-n{display:none}
}
.lptours__coll ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px 4px}
/* Charcoal, not red: twelve of these under the intro should read as an index, not as
   twelve calls to action competing with the row buttons below them. */
.lptours__jump{background:none;border:0;padding:6px 0;min-height:var(--tap-min);font-family:var(--font);font-weight:var(--w-light);font-size:17px;
  color:var(--ink-soft);text-decoration:none;cursor:pointer;text-align:left}
.lptours__jump:hover,.lptours__jump:focus-visible{color:var(--red);text-decoration:underline;text-underline-offset:4px}
.lptours__coll li:not(:last-child) .lptours__jump::after{content:"\00b7";margin:0 2px 0 8px;color:var(--line-input);text-decoration:none;display:inline-block}
.lptours__coll li:not(:last-child) .lptours__jump:hover::after{text-decoration:none}

/* --- Filters: a left sidebar beside the results -------------------------
   Replaced a bar that pinned across the top of the section. Three rows of chips was a
   quarter of the screen to carry down the page, it had to be measured against a header
   that collapses mid-animation, and it had to be tucked under an angled nav. A column
   does none of that, and the results end up narrower than the full site width without
   anything being capped and centred inside it.

   The hierarchy is deliberate: group names are a quiet micro-label, and the options are
   the largest thing, because the options are what you read and click. The panel is a
   white surface like the tour cards, so it reads as a control rather than as text lying
   on the page. Months are tiles rather than a twelfth checkbox row: twelve of anything
   in a narrow column is dead weight, and most months have nothing behind them. */
.lptours__cols{display:grid;gap:28px;margin-top:40px}   /* the intro used to hold this gap open */
@media (min-width:900px){
  /* Two tracks only once the script has revealed the sidebar. Declaring them up front put
     the results into the 262px sidebar track for anyone without JavaScript, because an
     aside carrying [hidden] is not a grid item at all. */
  .lptours__cols--split{grid-template-columns:262px minmax(0,1fr);gap:48px;align-items:start}
  /* Pinned, but never taller than what is left of the screen: six destinations, five levels
     and twelve months overflow a 768px viewport, and the lower filters and Clear were then
     unreachable until the very bottom of the results. */
  .lptours__cols--split .lptours__side{position:sticky;top:calc(var(--bjlp-sticky-top,0px) + 20px);
    max-height:calc(100vh - var(--bjlp-sticky-top,0px) - 40px);overflow-y:auto;overscroll-behavior:contain}
}

.lptours__sidebox{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.lptours__side-head{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;
  padding:15px 20px;border-bottom:1px solid var(--line);
  font-family:inherit;font-size:14px;font-weight:var(--w-bold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.lptours__side-head::-webkit-details-marker{display:none}
.lptours__side-head::after{content:"";width:8px;height:8px;flex:none;margin:0 0 3px auto;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg)}
.lptours__sidebox[open] .lptours__side-head::after{transform:rotate(-135deg);margin-bottom:-3px}
.lptours__side-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;background:var(--red);color:var(--white);font-size:14px;letter-spacing:0;border-radius:9999px}
.lptours__side-body{padding:20px}
@media (min-width:900px){
  .lptours__side-head{cursor:default}
  .lptours__side-head::after{display:none}
  .lptours__side-n{margin-left:auto}
}

.lptours__group{border:0;padding:0;margin:0 0 22px}
.lptours__group + .lptours__group{padding-top:4px}
/* The rule sits on the legend itself. Putting it on the fieldset cut a notch around the
   legend and drew the line straight through the group's name. */
.lptours__group-title{display:block;width:100%;padding:0 0 9px;margin:0 0 8px;
  border-bottom:1px solid var(--line);
  font-size:14px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.lptours__opts{list-style:none;margin:0;padding:0}

.lptours__opt{display:flex;align-items:center;gap:11px;min-height:34px;cursor:pointer;
  font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink)}
.lptours__opt input{appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:17px;height:17px;margin:0;border:1.5px solid var(--line-input);background:var(--white);cursor:pointer}
.lptours__opt input:checked{background:var(--red);border-color:var(--red)}
.lptours__opt input:checked::after{content:"";position:absolute;left:4.5px;top:1px;
  width:4px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lptours__opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lptours__opt-label{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.lptours__opt-n{flex:none;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lptours__opt:hover .lptours__opt-label{color:var(--red)}
.lptours__opt:has(input:checked){font-weight:var(--w-bold)}
.lptours__opt:has(input:disabled){cursor:default;color:var(--line-input)}
.lptours__opt:has(input:disabled) .lptours__opt-n{color:var(--line-input)}
.lptours__opt:has(input:disabled):hover .lptours__opt-label{color:var(--line-input)}
.lptours__opt:has(input:disabled) input{background:#f6f6f5;border-color:#e8e8e6}

/* Months stay ordinary option rows, two to a line. As tiles with the count stacked under
   the abbreviation they read as dates: "Mar" over "1" is March 1st, not one tour in March.
   Two columns costs no more height than the tiles did (about 190px against 200) and keeps
   the same checkbox, label and right-aligned count as the groups above it. */
.lptours__opts--months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.lptours__opts--months .lptours__opt{min-height:32px;font-size:16px}

.lptours__reset{width:100%;min-height:var(--tap-min);margin-top:4px;padding:10px 16px;
  border:1px solid var(--line-input);background:var(--white);cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:var(--w-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.lptours__reset:hover{border-color:var(--ink);color:var(--ink)}

.lptours__count{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

.lptours__list{list-style:none;margin:0;display:flex;flex-direction:column;gap:24px}
.trow__card{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.trow[hidden]{display:none !important}
.trow__media{position:relative;background:var(--charcoal);aspect-ratio:1.5;overflow:hidden}
.trow__img{width:100%;height:100%;object-fit:cover;display:block}
.trow__img--empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--charcoal),var(--night-2))}
.trow__body{padding:20px 18px 22px;display:flex;flex-direction:column;flex:1}
.trow__kicker{margin-bottom:8px}
.trow__title{font-size:clamp(23px,3.4vw,30px);font-weight:var(--w-bold);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;color:var(--ink-strong);margin-bottom:10px}
/* A trip's title and photo link to its page, as on the tours page. The title keeps its
   own colour and takes the underline on hover; stated at this weight so the dark-section
   link flip (white, underlined) does not reach inside a white card. */
.bjlp-main .tcard .tcard__title a,.bjlp-main .trow .trow__title a{color:inherit;text-decoration:none}
.bjlp-main .tcard .tcard__title a:hover,.bjlp-main .trow .trow__title a:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.trow__medialink{display:block;width:100%;height:100%}
/* The star line under a title: one red star, the average, the count. */
.bjlp-main .tcard .trating,.bjlp-main .trow .trating{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:-2px 0 10px;align-self:flex-start;
  font-size:16px;line-height:1.2;color:var(--ink-soft);text-decoration:none}
.trating__star{flex:none;fill:var(--red);margin-top:-2px}
.trating b{font-weight:var(--w-bold);color:var(--charcoal)}
.trating span{border-left:1px solid var(--line-input);padding-left:8px;margin-left:2px}
.bjlp-main a.trating:hover span{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.trow__hook{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);margin-bottom:14px;max-width:56ch}
/* The facts strip: three labelled facts, then the price on a line of its own. Margins,
   padding and weights are stated outright because the theme styles bare dl, dt and dd. */
.trow__facts{display:flex;flex-wrap:wrap;gap:14px 40px;margin:0;padding:16px 0 14px;border-top:1px solid var(--line)}
.trow__f{margin:0;padding:0;min-width:0}
.trow__facts dt{margin:0 0 4px;padding:0;font-size:14px;font-weight:var(--w-bold);letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--ink-soft)}
.trow__facts dd{margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 7px;font-size:19px;font-weight:var(--w-light);line-height:1.4;color:var(--ink-soft)}
.trow__facts dd b{font-weight:var(--w-bold);color:var(--charcoal)}
.trow__f--when dd{display:block}
.trow__yr{display:block}
.trow__yr b{margin-right:5px}
.trow__tba{font-style:italic}
/* An offer: regular price struck through, promo in red, the same treatment as a card's date row. */
.trow__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px;margin:0 0 18px;padding:12px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-soft)}
.trow__price b{font-size:30px;line-height:1.1;font-weight:var(--w-bold);color:var(--charcoal)}
.trow__price s{font-size:19px;color:var(--ink-soft)}
.trow__price b.trow__promo{color:var(--red)}
.trow__pp{font-size:16px}
.trow__actions{display:flex;flex-wrap:wrap;gap:10px}
.trow__ask{cursor:pointer}
.trow__note{font-size:15px;color:var(--ink-soft);margin-top:10px}

/* Activity-level gauge, from the theme's sprite. Six cells: five needle positions
   plus a multi-colour "tailored" face. The cell mapping lives in inc/trip-rows.php
   because the theme has no rule for level "1+" and those trips would otherwise show
   the Level 1 gauge. */
.trow__gauge{display:inline-block;width:44px;height:18px;flex:none;background-image:var(--bjlp-level-sprite);background-repeat:no-repeat;background-size:44px auto}
/* No size variants: the cell offsets are pixel values tied to the 44px render width, so a
   smaller copy would slice across two cells of the sprite. */

/* Corner ribbons, using the theme's artwork */
.trow__ribbon{position:absolute;left:0;top:0;width:110px;height:112px;text-indent:-9999em;overflow:hidden;background-repeat:no-repeat;background-size:110px auto;pointer-events:none}
.trow__ribbon--new{background-image:var(--bjlp-tag-new)}
.trow__ribbon--special{background-image:var(--bjlp-tag-special)}
.trow__ribbon--relaunch{width:auto;height:auto;text-indent:0;left:14px;top:14px;padding:6px 12px;background:var(--white);border:1px dotted var(--taupe);color:var(--maroon);
  font-size:14px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase}

/* --- Expander ---------------------------------------------------------- */
.trow__x{border-top:1px solid var(--line);background:var(--stone)}
.trow__x summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;
  font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--charcoal)}
.trow__x summary::-webkit-details-marker{display:none}
.trow__x summary::after{content:"+";font-size:24px;font-weight:var(--w-light);line-height:1;color:var(--ink-soft)}
.trow__x[open] summary::after{content:"–"}
.trow__x summary:hover{color:var(--red)}
/* The drawer holds up to three things, each with a fixed place: the departures box, one
   "extra" column (the itinerary or the highlights) and the route map. Stacked by default.
   The side-by-side layouts key on the drawer's own width rather than the window's, because
   the same row is 900px wide beside the filter sidebar and 1200px without it; a browser
   without container queries simply keeps the stack. */
.trow__x{container-type:inline-size;container-name:trowx}
.trow__panel{padding:18px 18px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;border-top:1px solid var(--line);align-items:start}
.trow__panel h4{font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.trow__dates{grid-area:dates}
.trow__days,.trow__hl{grid-area:extra}
.trow__mapwrap{grid-area:map}
.trow__panel{grid-template-areas:"dates" "extra" "map"}
.trow__panel:not(.has-dates){grid-template-areas:"extra" "map"}
.trow__panel:not(.has-extra){grid-template-areas:"dates" "map"}
.trow__panel:not(.has-map){grid-template-areas:"dates" "extra"}
.trow__panel.has-dates:not(.has-extra):not(.has-map){grid-template-areas:"dates"}
.trow__panel.has-extra:not(.has-dates):not(.has-map){grid-template-areas:"extra"}
.trow__panel.has-map:not(.has-dates):not(.has-extra){grid-template-areas:"map"}

/* Departures: a charcoal box, so the dates and prices read as one object and the columns
   beside it no longer have to line their rules up with a table header. Prices are white,
   a promo price marigold: the red used on light grounds is 2.4:1 on charcoal. */
.trow__dates{max-width:440px;background:var(--charcoal);color:var(--ink-invert);padding:18px 20px 16px}
.trow__dates-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.28)}
.trow__dates-head h4{margin:0;color:var(--ink-invert)}
.trow__dates-head span{font-size:var(--fs-micro);font-weight:var(--w-med);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-invert-soft);white-space:nowrap}
.trow__dtable{width:100%;border-collapse:collapse;font-size:17px}
.trow__dtable th.num,.trow__dtable td.num{text-align:right;white-space:nowrap}
.trow__dtable td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);color:var(--ink-invert);vertical-align:baseline}
.trow__dtable td:first-child{padding-right:12px}
.trow__dtable tr.is-out td{color:var(--ink-invert-soft)}
.trow__dates .dep__reg{color:var(--ink-invert-soft)}
.trow__dates .dep__promo{color:var(--marigold);font-size:19px}
.trow__dates .dep__promo--plain{color:var(--ink-invert)}
.trow__dates .dep__call,.trow__dates .dep__soldout{color:var(--ink-invert-soft)}
.trow__dnote{font-size:14px;line-height:1.45;color:var(--ink-invert-soft);margin-top:12px}

/* Itinerary: every day is kept, so a long trip splits into two sub-columns when the
   drawer is wide enough rather than scrolling or hiding anything. The first day carries a
   top rule in both forms, so the heading is underlined the same way whichever it is. */
.trow__days{max-width:760px}
.trow__days ol{list-style:none}
.trow__days li{font-size:16px;line-height:1.35;padding:7px 0;border-top:1px solid var(--line-input);break-inside:avoid}
.trow__day{font-weight:var(--w-bold);color:var(--red);white-space:nowrap}
.trow__dayline{display:block;color:var(--ink)}
.trow__daymeta{display:block;font-size:14px;color:var(--ink-soft);margin-top:1px}
.trow__hl{max-width:620px}
.trow__hl ul{list-style:none;border-top:1px solid var(--line-input);padding-top:4px}
.trow__hl li{font-size:16px;color:var(--ink-soft);padding:5px 0 5px 20px;position:relative}
.trow__hl li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--red)}
.trow__map{display:block;width:100%;max-width:320px;height:auto;border:1px solid var(--line);background:var(--white)}
/* A drawer holding only the itinerary, the highlights or the map is already named by its
   own bar, so the heading inside would say the same word twice; keep it for screen readers. */
.trow__panel.has-extra:not(.has-dates):not(.has-map) h4,.trow__panel.has-map:not(.has-dates):not(.has-extra) h4{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@container trowx (min-width:640px){
  .trow__panel{padding:22px 28px 30px;column-gap:40px;row-gap:24px}
  /* Two columns: the box on the left with the map tucked under it, the extra on the right. */
  /* Only this arrangement has a second row (the map under the box); "auto 1fr" keeps the
     map tight under the box while the extra column runs on beside them. */
  .trow__panel.has-dates.has-extra{grid-template-columns:minmax(260px,320px) minmax(0,1fr);grid-template-areas:"dates extra" "map extra";grid-template-rows:auto 1fr}
  .trow__panel.has-dates.has-extra:not(.has-map){grid-template-rows:auto}
  .trow__panel.has-dates.has-extra:not(.has-map){grid-template-areas:"dates extra"}
  .trow__panel.has-dates.has-map:not(.has-extra){grid-template-columns:minmax(260px,340px) minmax(0,320px);grid-template-areas:"dates map";justify-content:start}
  .trow__panel.has-extra.has-map:not(.has-dates){grid-template-columns:minmax(0,1fr) minmax(0,280px);grid-template-areas:"extra map"}
  .trow__panel.has-dates:not(.has-extra):not(.has-map){grid-template-columns:minmax(260px,400px)}
  .trow__map{max-width:100%}
}
@container trowx (min-width:820px){
  .trow__days--split ol{column-count:2;column-gap:32px}
}
@container trowx (min-width:1080px){
  /* Three across: box, extra, map. */
  .trow__panel.has-dates.has-extra.has-map{grid-template-columns:320px minmax(0,1fr) 260px;grid-template-areas:"dates extra map";grid-template-rows:auto}
}

/* --- From 700px: photo beside the text, alternating sides --------------- */
@media (min-width:700px){
  .trow__card{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);grid-template-areas:"media body" "x x"}
  .trow__media{grid-area:media;aspect-ratio:auto;min-height:340px}
  /* The photo sets the card height, so centre the text against it rather than letting a
     short row leave a gap above the buttons. */
  .trow__body{grid-area:body;padding:26px 28px 28px;justify-content:center}
  .trow__x{grid-area:x}
  .trow--flip .trow__card{grid-template-columns:minmax(0,55fr) minmax(0,45fr);grid-template-areas:"body media" "x x"}
  .trow__x summary{padding:0 28px}
}
@media (min-width:1080px){ .trow__media{min-height:400px} }