/* WYLD demo — header, mega menu, footer, transitions, cursor */

/* ---------- header ---------- */
/* Transparent over the hero, then a solid ground once scrolled: the nav sits on
   photography at the top of a page and on flat colour everywhere after, so the
   type is legible on both without a scrim over the opening image. */
.hdr {
  /* .navbar.fixed-top supplies position, inset and z-index. */
  height: var(--hdr-now);
  color: var(--bone);
  --bs-navbar-color: currentColor;
  --bs-navbar-hover-color: currentColor;
  --bs-navbar-active-color: currentColor;
  --bs-navbar-padding-y: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
  background: transparent;
  transition: color .4s ease, background-color .4s ease, height .45s var(--ease);
}
.hdr.is-stuck { background: var(--ink); }
.hdr.is-stuck.is-light { background: var(--bone); }
.hdr::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line-d); transition: background-color .4s ease;
  opacity: 0; transition: opacity .4s ease, background-color .4s ease;
}
.hdr.is-stuck::after { opacity: 1; }
.hdr.is-light { color: var(--ink); }
.hdr.is-light::after { background: var(--line); }

/* The palette switcher is fixed bottom-left, which is the hero data strip's
   corner. Reserve its footprint only while the bar exists: palette.js adds
   .has-demobars, so stripping the switcher for launch removes the clearance
   with it and leaves nothing behind. */
body.has-demobars .hero__foot { padding-bottom: 48px; }
@media (min-width: 900px) and (min-height: 760px) {
  body.has-demobars .hero__foot { padding-bottom: 0; }
}

/* d-flex align-items-center justify-content-between carry the layout; the
   fluid gap is finer-grained than Bootstrap's gap-* steps. */
.hdr > .container-xxl { gap: clamp(14px, 2.4vw, 40px) !important; }

/* The supplied mark is dark ink on transparent, so it inverts to bone on the
   dark ground and sits as-is on the light one. */
.brandmark { display: block; flex: 0 0 auto; }
/* Enlarged 2026-09-20 on client feedback that the mark read small against the hero.
   These widths are for wyld-mark-trimmed.png and are the artwork's real width — the
   padded original rendered ~29% narrower than whatever was set here. Taken up another
   1.3x on 2026-09-20: 190px puts the mark at 65.6px tall, which is why --header-h went
   to 99px in the same pass — at 76px this width had nowhere to sit. The ratio of mark to
   bar is unchanged, so it still reads as a header rather than filling one. display:block
   is load-bearing: as an inline image it carried a descender's worth of dead space below
   it, and the flex row centred the box including that space, seating the mark high. */
.brandmark__img { display: block; width: clamp(135px, 12.6vw, 190px); height: auto; transition: filter .4s ease, width .45s var(--ease); }
/* Condensed bar: the mark comes down to ~44px tall so it sits in the 66px bar with the
   same share of it the full mark has of 99px. The nav labels do not change size. */
html.is-hdr-compact .brandmark__img { width: clamp(104px, 8.6vw, 128px); }

/* Over photography the mark has to hold its own against whatever is behind it — mist
   and pale sky in the opening frame both run close to bone. A soft shadow separates
   it. Once the header takes a solid ground there is nothing to separate it from and
   the same shadow reads as a printing fault, so it is dropped. */
.brandmark__img { filter: invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 3px 14px rgba(0,0,0,.4)); }
.hdr.is-stuck .brandmark__img { filter: invert(1); }
.hdr.is-light:not(.is-stuck) .brandmark__img { filter: drop-shadow(0 1px 2px rgba(255,255,255,.7)) drop-shadow(0 3px 14px rgba(255,255,255,.5)); }
.hdr.is-light.is-stuck .brandmark__img { filter: none; }
html[data-mode="light"] .ftr__mark { filter: none; }
/* The header suppresses its own transition for the opening state, and the mark
   has to follow suit or it inverts a beat behind the type. */
.hdr.is-init, .hdr.is-init .brandmark__img, .hdr.is-init::after { transition: none; }

/* Nav labels and the Enquire label both came off .m at a flat 11px. Taken up 1.3x
   on 2026-09-20 alongside the mark, fluid rather than flat so the row is never wider
   than the container: full 14.3px from about 1400px, easing back to the old 11px at
   the 992px breakpoint where the desktop nav first appears. Scoped to .hdr on purpose
   — .m is site-wide furniture and must not move with the header.

   Everything else in the bar is sized in em of this, so the gaps, the item padding,
   the focus brackets and the button all keep their proportions at any step of the
   clamp. Change this one value and the whole header rescales with it. */
.hdr { --hdr-fs: clamp(11px, 1.02vw, 14.3px); }
.hdr .navbar-nav.m, .hdr .hdr__cta.m { font-size: var(--hdr-fs); }

/* .navbar-nav.flex-row supplies the row; the gap is ours. It was a viewport clamp
   tuned against 11px type, which meant it stayed put while the labels grew and the
   row read cramped. In em it tracks --hdr-fs instead. No clamp needed — --hdr-fs is
   already clamped.

   Cut from 2.15em on client feedback that the row sat too loose once the labels had
   grown: at 1.5em the space between two labels is 2.18em all in (this gap plus the
   two items' padding-inline below) against 3.05em before, about a quarter closer.
   Kept above 1.45em because the corner brackets overhang each item by .36em a side,
   so the gap is also what stops the active item's brackets touching a hovered
   neighbour's — at this value they clear each other by .78em. */
.navbar-nav { gap: 1.5em; }
.nav__i { position: relative; padding-block: 6px; white-space: nowrap; }
/* Bootstrap pads .nav-link on both axes and sets its own colour vars. */
.nav-link.nav__i { --bs-nav-link-padding-y: 0; --bs-nav-link-padding-x: 0; --bs-nav-link-font-size: inherit; color: inherit; }
.nav__i::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__i:hover::after { transform: scaleX(1); }

/* Items are framed rather than underlined: the same four focus brackets the
   cursor uses, so "where you are" and "what you are pointing at" speak one
   language. Every item carries the brackets so hovering cannot shift the row;
   only their opacity changes. Static, not hunting — a header is no place for a
   permanent animation. */
/* padding-block cut from .72em on client feedback that the effect read too big:
   it was putting 10.3px of air above and below a 14.3px label, a 42px frame
   around one word in a 99px bar, and the grid inherited every pixel of it. At
   .42em the frame comes to ~33px and the grid tightens with it.

   Not lower than about .38em: the top bracket hangs .18em above this box and is
   .55em tall, so past that it stops clearing the cap height and starts sitting
   on the word. If the frame needs to come in further, the bracket geometry has
   to move with it rather than the padding alone.

   padding-inline stays at .34em. It is the brackets' clearance from the label's
   sides, and below about .3em the frame reads as a box drawn on the word rather
   than around it. */
.nav__i { padding-inline: .34em; padding-block: .42em; }
.nav__i::after { display: none; }
.nav__b {
  position: absolute; width: .55em; height: .55em;
  border: 0 solid currentColor; pointer-events: none;
  opacity: 0; transform: scale(.7);
  transition: opacity .26s var(--ease), transform .3s var(--ease), color .3s ease;
}
/* Pointing at an item borrows two corners of the frame. Standing on its page
   gets all four, in the accent, with the grid behind them.

   The two used to separate on opacity alone — .75 against 1 on the brackets, .16
   against .2 on the grid. At a glance that is no separation at all: hovering
   Journal while standing on Destinations drew the same mark on both, and the
   header stopped answering "where am I". Corner count and colour carry it now,
   and either would be enough on its own — which is what keeps it legible over a
   photograph, where the brackets sometimes fall on a bright patch and opacity
   alone says nothing. */
.nav__i:hover .nav__b--tl, .nav__i:focus-visible .nav__b--tl,
.nav__i:hover .nav__b--br, .nav__i:focus-visible .nav__b--br { opacity: .7; }
.nav__i.is-here .nav__b { opacity: 1; color: var(--ember-text); }
/* The brackets hunt inward before they settle, the way a lens racks to focus:
   they arrive from slightly outside the box and land on it. */
.nav__b--tl { --hx: -.27em; --hy: -.27em; }
.nav__b--tr { --hx:  .27em; --hy: -.27em; }
.nav__b--bl { --hx: -.27em; --hy:  .27em; }
.nav__b--br { --hx:  .27em; --hy:  .27em; }
.nav__b { transform: translate(var(--hx), var(--hy)) scale(.7); }
.nav__i:hover .nav__b, .nav__i:focus-visible .nav__b, .nav__i.is-here .nav__b { transform: translate(0, 0) scale(1); }

/* The cursor's cage, scaled onto the label and dropped in strength: two
   verticals and two horizontals on the thirds, spanning the full box. Real
   elements rather than a background layer — a negative z-index put it behind
   the header's own ground and made it invisible.

   Lightened 2026-09-20 on client feedback that the lines read too heavy against
   the brackets: 1.5px to 1px, and the band from .3 to .18. The brackets are the
   mark and the grid is texture behind it, so the grid has to sit under them,
   not beside them. Below about .14 it stops surviving a bright patch of
   photography, which is the floor.

   The horizontals sit at 18/82, not on the thirds. They were on the thirds
   against the old .72em box; at .42em, percentages of a shorter box converge on
   the type and they grazed the letters. 18/82 restores the ~5px of air the
   device was drawn with. */
.nav__gr { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.nav__i.is-here .nav__gr { opacity: .18; color: var(--ember-text); }
.nav__gr i { position: absolute; background: currentColor; }
.nav__gr i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.nav__gr i:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.nav__gr i:nth-child(3) { top: 18%; left: 0; right: 0; height: 1px; }
.nav__gr i:nth-child(4) { top: 82%; left: 0; right: 0; height: 1px; }
/* one rack cycle when the frame first arrives, then it holds */
.nav__i.is-focusing .nav__b { animation: navRack .52s var(--ease); }
@keyframes navRack {
  0%   { transform: translate(calc(var(--hx) * 2.2), calc(var(--hy) * 2.2)) scale(.7); }
  58%  { transform: translate(calc(var(--hx) * -.45), calc(var(--hy) * -.45)) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

.nav__b--tl { top: -.18em; left: -.36em;  border-top-width: 1.5px; border-left-width: 1.5px; }
.nav__b--tr { top: -.18em; right: -.36em; border-top-width: 1.5px; border-right-width: 1.5px; }
.nav__b--bl { bottom: -.18em; left: -.36em;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.nav__b--br { bottom: -.18em; right: -.36em; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hdr__end { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
/* The one solid-filled element in the header. It is the only place on the page
   where a visitor converts, so it is the only place that earns the accent as a
   ground rather than as a line. Square corners, no shadow. --on-ember is
   whichever of ink or bone actually reads on that palette's accent. */
.hdr__cta {
  background: var(--ember); color: var(--on-ember);
  border: 1px solid var(--ember); padding: .82em 1.45em;
  align-items: center; justify-content: center; line-height: 1;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.hdr__cta:hover { background: transparent; color: var(--ember-text); }

/* The burger and the drawer are Bootstrap components now — see the override
   block at the foot of this file. */


@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* ---------- social row ----------
   No boxes. The glyph sits on a hairline that draws in from the left on hover,
   and the name rises under it — the same underline vocabulary the nav and the
   trust furniture use, so the icons read as part of the site rather than as
   imported badges. */
.soc { display: flex; align-items: flex-start; gap: clamp(6px, 1.4vw, 18px); }
.soc a {
  position: relative; display: grid; justify-items: center; gap: 7px;
  padding: 10px 8px 22px; min-width: 44px;
  color: inherit; opacity: .58;
  transition: opacity .32s var(--ease), transform .4s var(--ease);
}
.soc a::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 14px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.soc a:hover, .soc a:focus-visible { opacity: 1; transform: translateY(-2px); }
.soc a:hover::after, .soc a:focus-visible::after { transform: scaleX(1); }
.soc i { font-size: 19px; line-height: 1; display: block; transition: transform .35s var(--ease), color .3s ease; }
.soc a:hover i { color: var(--ember); transform: translateY(-3px); }
.soc__lbl {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  color: currentColor; opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.soc a:hover .soc__lbl, .soc a:focus-visible .soc__lbl { opacity: .7; transform: none; }

/* ---------- floating WhatsApp ----------
   The icon, floating. Nothing else. */
.wafab {
  position: fixed; z-index: 590;
  right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  display: block;
}
.wafab i { font-size: 54px; line-height: 1; color: #25D366; display: block; }
@media (max-width: 640px) { .wafab i { font-size: 46px; } }
@media print { .wafab { display: none; } }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--bone); padding-top: clamp(64px, 10vh, 132px); overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--colgap); padding-bottom: clamp(48px, 7vh, 96px); }
.ftr__mark { width: clamp(180px, 18vw, 260px); height: auto; filter: invert(1); margin-bottom: 26px; }
.ftr__col > .m { color: var(--stone); margin-bottom: 18px; }
.ftr__list { display: grid; gap: 9px; }
.ftr__list a { color: rgba(var(--bone-rgb), .74); transition: color .3s ease; font-size: .9375rem; }
.ftr__list a:hover { color: var(--bone); }
.news { display: flex; border-bottom: 1px solid var(--line-d); max-width: 400px; }
.news input {
  flex: 1; background: none; border: 0; color: var(--bone);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; padding: 12px 0;
}
.news input::placeholder { color: var(--stone); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.news button { padding: 12px 0 12px 16px; color: var(--ember-text); transition: opacity .3s ease; }
.news button:hover { opacity: .7; }
.wordmark {
  font-family: var(--f-display); font-weight: 300;
  font-size: 25.5vw; line-height: .74; letter-spacing: -.045em;
  display: block; margin-bottom: -.14em; user-select: none;
}
.ftr__base { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding-block: 18px; border-top: 1px solid var(--line-d); }
/* Terms, privacy, sitemap and the domain, kept together at the right so the base line
   still reads as two blocks rather than five loose items. */
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 2vw, 28px); }
.ftr__legal a { color: rgba(var(--bone-rgb), .74); transition: color .3s ease; }
.ftr__legal a:hover { color: var(--bone); }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; row-gap: 42px; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; row-gap: 34px; } .wordmark { font-size: 31vw; } }

/* ---------- page transition panel ---------- */
.trans {
  position: fixed; inset: 0; z-index: 1060; background: var(--bone);
  transform: translateY(-100%); pointer-events: none;
  display: grid; align-content: center; justify-items: center; gap: 18px;
}
.trans__mark { width: clamp(150px, 21vw, 290px); height: auto; opacity: .92; }
/* The loader's bar track, empty. Its only job is to reserve the same space the
   loader's bar occupies, so the mark sits at an identical y on both screens. */
.trans::after {
  content: ''; width: clamp(150px, 21vw, 290px); height: 3px;
  background: rgba(var(--ink-rgb), .16);
}
/* Eased out of the viewport rather than snapped: the old .34s ease-in arrived
   at full speed and read as a cut. */
.trans.is-in { transform: translateY(0); transition: transform .5s cubic-bezier(.4,0,.2,1); }
.trans.is-out { transform: translateY(-100%); transition: transform .5s var(--ease); }

/* ---------- load sequence ---------- */
.pre { position: fixed; inset: 0; z-index: 1090; background: var(--ink); }
.pre__panel {
  position: absolute; inset: 0; background: var(--bone); transform: translateY(0);
  display: grid; align-content: center; justify-items: center; gap: 18px;
}
/* The mark is wiped in rather than faded: a hard edge travelling across the
   letterforms reads as a shutter opening, and costs one clip-path. */
.pre__mark {
  width: clamp(150px, 21vw, 290px); height: auto; opacity: .92;
  clip-path: inset(0 100% 0 0);
  animation: markIn .86s var(--ease) .06s forwards;
}
@keyframes markIn { to { clip-path: inset(0 0 0 0); } }
/* Continuing the outgoing screen: the mark is already drawn, so it holds
   rather than wiping again, and the bar runs the short curve. */
.pre--continue .pre__mark { animation: none; clip-path: none; }
.pre--continue .pre__fill { animation-duration: .62s; animation-delay: 0s; }

/* The rule under the mark is the loading bar: a hairline track, a fill that
   runs it on an uneven curve the way a real load stalls, and the percentage in
   mono at its right end. */
.pre__line {
  position: relative;
  width: clamp(150px, 21vw, 290px); height: 3px;
  background: rgba(var(--ink-rgb), .16);
}
.pre__fill {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  /* The accent, in its focus-safe variant: the bar is 1px on paper, so the
     louder accents need the darkened twin to stay visible at that weight. */
  background: var(--ember-focus, var(--ember)); transform: scaleX(0); transform-origin: left;
  animation: barRun 1.3s cubic-bezier(.5,.05,.3,1) .06s forwards;
}
@keyframes barRun {
  0%   { transform: scaleX(0); }
  34%  { transform: scaleX(.42); }
  46%  { transform: scaleX(.46); }
  68%  { transform: scaleX(.63); }
  100% { transform: scaleX(1); }
}
.pre__pct {
  position: absolute; right: 0; top: 11px;
  color: var(--stone); font-variant-numeric: tabular-nums; font-weight: 400;
}

.pre.is-done .pre__panel { transform: translateY(-100%); transition: transform .82s var(--ease); }
.pre.is-done .pre__mark,
.pre.is-done .pre__line,
.pre.is-done .pre__pct { opacity: 0; transition: opacity .34s ease; }
.pre--brief.is-done .pre__panel { transition: transform .62s var(--ease); }
.pre.is-done { pointer-events: none; }
.pre.is-gone { display: none; }
.pre__count { position: absolute; left: var(--gutter); bottom: clamp(24px, 5vh, 48px); color: var(--ink); }
.pre--brief .pre__count { display: none; }


/* ---------- cursor: a viewfinder ----------
   Corner brackets alone read as a crop tool, so the frame also carries a
   rule-of-thirds live-view grid and a centre reticle. Idle, it hunts focus the
   way a lens does in low light and the grid fades up. Moving, the frame snaps
   tight, the grid drops away and a second frame lags behind it — the lag is the
   motion blur. Hairlines and mono type only; nothing is drawn. */
.vf, .vf-ghost {
  position: fixed; top: 0; left: 0; z-index: 700; pointer-events: none;
  width: 0; height: 0;
  mix-blend-mode: difference; color: var(--bone);
}
.vf { opacity: 0; transition: opacity .25s ease; }
.vf.is-shown { opacity: 1; }
/* Hidden over everything that is not a photograph, and hidden instantly rather
   than fading, so it never trails behind the pointer off an image. */
.vf.is-off { opacity: 0; transition: opacity .12s ease; }
.vf.is-off { opacity: 0; }
.vf-ghost { opacity: 0; }

.vf__cage { position: absolute; inset: 0; transform: scale(1); transition: transform .4s var(--ease); }
.vf:not(.is-moving) .vf__cage { animation: hunt 2.8s ease-in-out infinite; }
.vf.is-moving .vf__cage { transform: scale(.86); }
.vf.is-drag .vf__cage { transform: scale(1.9); animation: none; }
.vf.is-link .vf__cage { transform: scale(1.32); animation: none; }
@keyframes hunt {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* focus brackets */
.vf__b { position: absolute; width: 9px; height: 9px; border: 0 solid currentColor; }
.vf__b--tl { border-top-width: 2px; border-left-width: 2px;  transform: translate(-20px, -20px); }
.vf__b--tr { border-top-width: 2px; border-right-width: 2px; transform: translate(12px, -20px); }
.vf__b--bl { border-bottom-width: 2px; border-left-width: 2px;  transform: translate(-20px, 12px); }
.vf__b--br { border-bottom-width: 2px; border-right-width: 2px; transform: translate(12px, 12px); }

/* rule-of-thirds grid — the live-view tell */
.vf__g { position: absolute; background: currentColor; opacity: .58; transition: opacity .3s ease; }
.vf__g--v { width: 1.5px; height: 40px; }
.vf__g--h { width: 40px; height: 1.5px; }
.vf__g--v1 { transform: translate(-7px, -20px); }
.vf__g--v2 { transform: translate(6px, -20px); }
.vf__g--h1 { transform: translate(-20px, -7px); }
.vf__g--h2 { transform: translate(-20px, 6px); }
.vf.is-moving .vf__g, .vf.is-link .vf__g { opacity: 0; }

/* centre reticle */
.vf__x { position: absolute; background: currentColor; }
.vf__x--v { width: 2px; height: 8px; transform: translate(-.5px, -4px); }
.vf__x--h { width: 8px; height: 2px; transform: translate(-4px, -.5px); }

.vf__r {
  position: absolute; left: 30px; top: -6px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 9px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; opacity: 1; font-weight: 500;
  transition: opacity .25s ease;
}
.vf.is-link .vf__r { opacity: 0; }

@media (pointer: coarse) { .vf, .vf-ghost { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .vf, .vf-ghost, .pre { display: none !important; }
}

/* ---------------------------------------------------------------
   BOOTSTRAP COMPONENT OVERRIDES

   Only what Bootstrap gets wrong for this design. Everything above and in
   pages.css is work Bootstrap has no equivalent for.
   --------------------------------------------------------------- */

/* Offcanvas as the mobile drawer. Full-viewport rather than a 400px tray, and
   the ground follows the palette. */
.drawer {
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-bg: var(--ink);
  --bs-offcanvas-color: var(--bone);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: var(--gutter);
  --bs-offcanvas-padding-y: clamp(18px, 3vh, 30px);
  --bs-offcanvas-transition: transform .55s var(--ease);
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.drawer__close { width: 44px; height: 44px; color: var(--bone); font-size: 19px; border: 0; }
.drawer__close:hover { color: var(--ember); }

/* The drawer's contents. These did not survive the port: .drawer and .drawer__close
   came across from the static template's layout.css and the seven links and the foot
   did not, so the mobile menu rendered as unstyled inline anchors — "01Expeditions
   02Destinations 03Experiences…" wrapped as one paragraph of running text, with no
   rows, no rules and no numerals. Ported back, with two changes for this build:
   the reveal keys off Bootstrap's .show rather than the template's .is-open, and the
   guard is the (scripting: enabled) one the rest of the site's reveals use rather than
   the template's .js class, which this layout does not set. */
.drawer__nav { display: grid; gap: 0; }
.drawer__i {
  font-family: var(--f-display); font-size: clamp(1.5rem, 6.4vw, 2.3rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 300;
  padding-block: 13px; border-bottom: 1px solid var(--line-d);
  display: flex; align-items: baseline; gap: 14px;
  color: var(--bone); text-decoration: none;
  transition: color .35s var(--ease);
}
.drawer__i:hover, .drawer__i:focus-visible { color: var(--ember); }
/* The numeral is a caption on the name, not part of it — the same relationship the
   eyebrows use everywhere else. Without it the two ran together as "01Expeditions". */
.drawer__i > span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--stone);
  flex: none;
}
.drawer__foot { display: grid; gap: 18px; }

/* The drawer's own "you are here". here() has always set .is-here on these links and
   nothing in the stylesheet answered it, so the mobile menu named seven destinations
   and marked none of them. Same accent as the header's locked frame — one vocabulary
   for the same fact on both layouts.

   The strip the spine sits in is reserved on every item, not just the current one, so
   all seven names keep one left edge and nothing moves as you navigate. It has to be
   inside the item: .offcanvas-body scrolls, so a mark hung off the row's left edge is
   clipped by the scroll container rather than sitting in the drawer's gutter. The
   bottom rule still spans the full row — a border draws around padding. */
.drawer__i { position: relative; padding-left: 14px; }
.drawer__i.is-here > span { color: var(--ember-text); }
.drawer__i.is-here::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 1.05em; transform: translateY(-50%);
  background: var(--ember-text);
}

/* Staggered in behind the panel, one line at a time. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .drawer__i, .drawer__foot {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), color .35s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms + 120ms);
  }
  .drawer.show .drawer__i,
  .drawer.show .drawer__foot { opacity: 1; transform: none; }
}

/* The burger: two glyphs stacked, cross-faded by .is-open. Bootstrap's
   Offcanvas does NOT set aria-expanded on its toggler (unlike Collapse), so
   ui.js toggles the class on shown/hidden.bs.offcanvas instead. */
.burger { width: 30px; height: 30px; position: relative; flex: 0 0 auto; color: inherit; background: none; }
.burger i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 17px; transition: opacity .3s ease, transform .4s var(--ease);
}
.burger i:last-child { opacity: 0; transform: rotate(-90deg); }
.burger.is-open i:first-child { opacity: 0; transform: rotate(90deg); }
.burger.is-open i:last-child { opacity: 1; transform: rotate(0); }

/* Enquire is the one solid-filled control, so it maps onto .btn. */
.hdr__cta {
  --bs-btn-bg: var(--ember);
  --bs-btn-border-color: var(--ember);
  --bs-btn-color: var(--on-ember);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--ember);
  --bs-btn-hover-color: var(--ember-text);
  --bs-btn-padding-y: .82em;
  --bs-btn-padding-x: 1.45em;
  --bs-btn-line-height: 1;
  --bs-btn-font-size: inherit;
  --bs-btn-font-family: inherit;
  --bs-btn-border-radius: 0;
  white-space: nowrap;
}

/* Accordion. Bootstrap draws a chevron background-image and a tinted active
   ground; this design uses a Font Awesome plus that rotates, on flat colour. */
.acc {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: clamp(16px, 2.4vh, 26px);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
}
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { box-shadow: none !important; }
.acc__btn::after { display: none; }
.acc__body { padding-bottom: clamp(18px, 2.6vh, 30px); }

/* Region tabs. Bootstrap's .nav brings link padding and its own colours; the
   underline and the accent are ours. */
.rtab {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-color: var(--stone);
  --bs-nav-link-hover-color: var(--ink);
  --bs-nav-link-font-size: inherit;
  flex-wrap: wrap;
}
.rtab .nav-link { background: none; border: 0; }

/* Tables. Bootstrap's striping and cell padding are replaced by hairlines and
   generous fixed row heights. */
.tbl {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: rgba(var(--ink-rgb), .035);
  --bs-table-hover-color: var(--ink);
  margin-bottom: 0;
}
.tbl > :not(caption) > * > * { background: none; box-shadow: none; }

/* Newsletter field. */
.news .form-control {
  --bs-body-bg: transparent;
  background: transparent; border: 0; color: inherit;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; padding: 12px 0;
}
.news .form-control:focus { background: transparent; color: inherit; }