.elementor-5855 .elementor-element.elementor-element-b3649a6{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b3649a6:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-b3649a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F5F1;}.elementor-5855 .elementor-element.elementor-element-40eec40{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b6a99e3{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b6a99e3:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-b6a99e3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F5F1;}.elementor-5855 .elementor-element.elementor-element-69171c4{--display:flex;}.elementor-5855 .elementor-element.elementor-element-966d259{--display:flex;}.elementor-5855 .elementor-element.elementor-element-3c27f1c{--display:flex;}.elementor-5855 .elementor-element.elementor-element-3c27f1c:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-3c27f1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F5F1;}.elementor-5855 .elementor-element.elementor-element-6819ee0{--display:flex;}.elementor-5855 .elementor-element.elementor-element-43960e9{--display:flex;}.elementor-5855 .elementor-element.elementor-element-7daa7e4{--display:flex;}.elementor-5855 .elementor-element.elementor-element-2a53f78{--display:flex;}.elementor-5855 .elementor-element.elementor-element-eb72324{--display:flex;}.elementor-5855 .elementor-element.elementor-element-a261605{--display:flex;}.elementor-5855 .elementor-element.elementor-element-a3b1197{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b88ceb0{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b341672{--display:flex;}.elementor-5855 .elementor-element.elementor-element-2ff8553{--display:flex;}.elementor-5855 .elementor-element.elementor-element-58f1538{--display:flex;}.elementor-5855 .elementor-element.elementor-element-6d017d1{--display:flex;}.elementor-5855 .elementor-element.elementor-element-10606fe{--display:flex;}.elementor-5855 .elementor-element.elementor-element-39437bd{--display:flex;}.elementor-5855 .elementor-element.elementor-element-4afb3af{--display:flex;}.elementor-5855 .elementor-element.elementor-element-2a49c3b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-6e98ccb{--display:flex;}.elementor-5855 .elementor-element.elementor-element-3b70739{--display:flex;}.elementor-5855 .elementor-element.elementor-element-c4933eb{--display:flex;}.elementor-5855 .elementor-element.elementor-element-b42f01b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-3e856b4{--display:flex;}.elementor-5855 .elementor-element.elementor-element-261cec6{--display:flex;}.elementor-5855 .elementor-element.elementor-element-261cec6:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-261cec6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EAE4DA;}.elementor-5855 .elementor-element.elementor-element-228d49d{--display:flex;}.elementor-5855 .elementor-element.elementor-element-e762f99{--display:flex;}.elementor-5855 .elementor-element.elementor-element-e862499{--display:flex;}.elementor-5855 .elementor-element.elementor-element-acbf629{--display:flex;}.elementor-5855 .elementor-element.elementor-element-7352a94{--display:flex;}.elementor-5855 .elementor-element.elementor-element-4ff26be{--display:flex;}.elementor-5855 .elementor-element.elementor-element-83cf4d5{--display:flex;}.elementor-5855 .elementor-element.elementor-element-00950ac{--display:flex;}.elementor-5855 .elementor-element.elementor-element-1ad15d5{--display:flex;}.elementor-5855 .elementor-element.elementor-element-8f5ea9b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-2daf22a{--display:flex;}.elementor-5855 .elementor-element.elementor-element-57eb565{--display:flex;}.elementor-5855 .elementor-element.elementor-element-e721e6b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-a9b859b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-a6b9bca{--display:flex;}.elementor-5855 .elementor-element.elementor-element-300ceed{--display:flex;}.elementor-5855 .elementor-element.elementor-element-3aa49fc{--display:flex;}.elementor-5855 .elementor-element.elementor-element-2945e8b{--display:flex;}.elementor-5855 .elementor-element.elementor-element-e04ba30{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-b3649a6 *//* ============================================================================
   READ ME FIRST  —  Active Kili Top, journal article template
   ----------------------------------------------------------------------------
   You do NOT need this CSS for the everyday changes:
     - Any heading or paragraph   ->  click it and type
     - A link inside a paragraph  ->  select the words, use the link button
     - A photo                    ->  click the image, choose a new one
     - FAQ                        ->  the Accordion widget, one item per question.
       The same questions are in the page's JSON-LD (the HTML widget at the very
       bottom): change both, or Google sees text that is not on the page.
     - The at-a-glance table      ->  one Text Editor holding a plain <table>
       (Elementor has no table widget); edit its cells in the Text tab.
     - Section background colour  ->  select the section, Style > Background

   The article is written in journal_content/<slug>.py and built by
   build_journal.py; a change made only here is lost on the next export.

   Block order in this field is fixed. Nothing goes after GLUE except glue.
     1 READ ME   2 ELEMENTOR RESET   3 PALETTE   4 REFERENCE SHEET   5 GLUE
   ========================================================================== */

/* ============================================================================
   2. ELEMENTOR RESET  -  scoped with :where() so it adds zero specificity.
   ========================================================================== */
body { margin:0; padding:0; box-sizing:border-box; }
body * { margin:0; padding:0; box-sizing:border-box; }

body .e-con:where(.ja,.dst-cta),
body :where(.ja,.dst-cta) .e-con,
body :where(.ja,.dst-cta) .e-con-inner {
  display:block !important;
  gap:0 !important;
  padding:0 !important;
  --content-width:none;
  --flex-direction:row !important;
  --flex-wrap:nowrap !important;
  width:auto !important;
  --width:auto;
}
/* playbook 3.12: Elementor caps top-level containers at (0,2,0); roots only */
body .e-con:where(.ja,.dst-cta) { max-width:none !important; }
body :where(.ja,.dst-cta) .elementor-widget { position:static; width:auto; max-width:none !important; gap:0; }
body :where(.ja,.dst-cta) .elementor-widget-container { display:contents !important; }

/* ==========================================================================
   3. PALETTE  -  the -rgb companions every tint is built from. The colours
   themselves are the :root tokens at the top of the reference sheet below.
   Tints are written rgba(var(--x-rgb), .n) so they follow their colour.
   ======================================================================== */
body {
  --c-000000: #000000;
  --c-000000-rgb: 0, 0, 0;
  --gold-rgb: 72, 120, 72;
  --ocean-rgb: 143, 187, 225;
  --paper-rgb: 255, 255, 255;
}

/* ==========================================================================
   4. REFERENCE SHEET  -  the page CSS, every .elementor-5855 .elementor-element.elementor-element-b3649a6 prefixed `body `,
   pruned to the rules that can match this markup.
   ======================================================================== */
:root{
  --cream:#F7F5F1;
  --paper:#FFFFFF;
  --linen:#EAE4DA;
  --linen-d:#DCD4C6;
  --ink:#1E2422;
  --ink-soft:#454E4B;
  --stone:#78807C;
  --gold:#487848;
  --gold-d:#35593A;
      --forest: #1C1F1E; --forest-d: #121413; --moss: #3A403D; --sage: #EAE4DA;
  --gold-l:#8FB58F;
  --olive:#2E3331;
  --hair:#D5CDBF;
  --mf:'DM Sans',system-ui,sans-serif;
  --md:'Playfair Display',Georgia,serif;
  --me:cubic-bezier(.16,1,.3,1);
  --nh:74px;
  --ub:36px;
}body *, body *::before, body *::after{box-sizing:border-box;margin:0;padding:0}body a{text-decoration:none;color:inherit}body img{max-width:100%;display:block}
@media(max-width:720px){:root{--nh:64px}}
@media(max-width:420px){:root{--nh:60px}}:root{
  --cream:      #F7F5F1;
  --paper:      #FFFFFF;
  --linen:      #EAE4DA;
  --ink:        #1E2422;
  --ink-soft:   #454E4B;
  --stone:      #78807C;
  /* Brand accent — Active Kili Top forest green (was literal gold #487848)
     Variables still named --gold so 48 existing refs work unchanged.
     Dark sections (.mk-strip, .mk-cta, .mk-mine) override these
     back to real gold below — where gold pops on ink. */
  --gold:       #487848;
  --gold-dark:  #35593A;
  --gold-tint:  #DDE7DC;
  --hair:       #D5CDBF;
  --hair-soft:  #E2DBCF;
  /* Forest-green structural tokens (v2.0 green-main retrofit) */
  --forest:     #1C1F1E;
  --forest-d:   #121413;
  --forest-l:   #2E3331;
  --moss:       #3A403D;
  --sage:       #EAE4DA;
  --d: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --b: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}body{
  font-family: var(--b);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}
@media (max-width: 680px){body{font-size: 17px}}/* ─────────────────────────────────────────────── */

/* ------------------------------------------------------------------
   ACTIVE KILI TOP - ocean blue
   Taken from the sky in the badge. Used for the coast: Zanzibar, Pemba and anything on the water. Green stays the land accent.
   ------------------------------------------------------------------ */
:root{
  --ocean:   #8FBBE1;   /* the brand ocean blue */
  --ocean-d: #2F6A9B;   /* darker, for text on cream (contrast) */
  --ocean-l: #C4DCF0;   /* lighter, for washes */
}/* ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   ACTIVE KILI TOP — header + explore section
   Structure and rhythm after madeforspainandportugal.com:
   a fixed translucent bar with a centred logo, a full-bleed hero
   with a credential marquee, then a filterable explore block.
   Colour is Active Kili's own: forest #487848, ocean #8FBBE1.
   ══════════════════════════════════════════════════════════════ */
:root{
  --ub:0px;          /* utility bar retired — folded into the nav */
  --nh:78px;         /* nav height, incl. the 4px accent rule */
  --akt-rule:#487848;
  --nv-util-w:308px;
}

@media(max-width:1440px){:root{--nv-util-w:268px}}
@media(max-width:1280px){:root{--nv-util-w:178px}}/* ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   ACTIVE KILI TOP — the remaining sections
   Same language as the header: section heads after
   madeforspainandportugal, dark photo cards after kaer.co, quiet category eyebrows after sabbatical, and the
   scroller/counter treatment after 66nord.
   Layered over the original markup by document order — the older
   rules are left intact so any section can be reverted.
   ══════════════════════════════════════════════════════════════ */
:root{
  --akt-b:'DM Sans',system-ui,sans-serif;
  --akt-d:'Playfair Display',Georgia,serif;
  --akt-dark:#12100E;
}/* ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   FOOTER IN OCEAN BLUE
   The client's #8FBBE1 had been scoped to the coast section only.
   This gives it the footer too: a deep ocean ground with the blue
   as the accent. One variable switches the ground back to basalt
   if only the accents are wanted — see --akt-ft-bg below.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* the one dial for the footer ground:
     #1E2422 basalt (accents only) · #101E29 deep ocean, near-black
     #15323F committed ocean (current) · #1B4257 brighter, more teal */
  --akt-ft-bg:#15323F;
  --akt-ft-line:rgba(var(--ocean-rgb),.20);
}/* ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   TYPEFACES — Cormorant Garamond + Jost
   Replaces Playfair Display + DM Sans. Playfair is the default
   "elegant" choice and reads a little generic; Cormorant is a
   high-contrast old-style with far better italics, which matter
   here because every accent on the page is italic. Jost is a
   geometric sans whose letterspaced caps carry the eyebrows.
   Every face on the page routes through the six vars below.
   ══════════════════════════════════════════════════════════════ */
:root{
  --md:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mf:'Jost',system-ui,-apple-system,sans-serif;
  --d:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --b:'Jost',system-ui,-apple-system,sans-serif;
  --akt-d:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --akt-b:'Jost',system-ui,-apple-system,sans-serif;
}body .dst-rule{display:flex; align-items:center; gap:20px; margin-bottom:20px}body .dst-rule::after{content:''; height:1px; flex:1 1 auto; background:var(--hair)}body .dst-rule span{
  font-family:var(--akt-b); font-size:11.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap;
}body .dst-cta h2{
  font-family:var(--akt-d); font-weight:500;
  font-size:clamp(28px,4vw,52px); line-height:1.08;
  color:var(--ink); margin:0 0 18px;
}/* ── faq ── */
body .dst-faq{border-top:1px solid var(--hair)}body .dst-faq details{border-bottom:1px solid var(--hair)}body .dst-faq summary{
  list-style:none; cursor:pointer; padding:20px 34px 20px 0; position:relative;
  font-family:var(--akt-d); font-weight:500; font-size:21px; line-height:1.28; color:var(--ink);
}body .dst-faq summary::-webkit-details-marker{display:none}body .dst-faq summary::after{
  content:''; position:absolute; right:6px; top:31px;
  width:11px; height:1px; background:var(--gold);
  box-shadow:0 0 0 0 transparent;
}body .dst-faq summary::before{
  content:''; position:absolute; right:11px; top:26px;
  width:1px; height:11px; background:var(--gold);
  transition:transform .3s var(--me), opacity .3s;
}body .dst-faq details[open] summary::before{transform:rotate(90deg); opacity:0}body .dst-faq details p{padding:0 40px 22px 0; margin:0 !important; font-size:15.5px !important}/* ── cta ── */
body .dst-cta{background:var(--forest); color:var(--cream); padding:clamp(52px,6vw,96px) 0}body .dst-cta-in{
  max-width:1320px; margin:0 auto; padding:0 clamp(20px,3vw,48px);
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); align-items:center;
}body .dst-cta .dst-rule::after{background:rgba(var(--paper-rgb),.22)}body .dst-cta .dst-rule span{color:rgba(var(--paper-rgb),.66)}body .dst-cta h2{color:var(--cream)}body .dst-cta p{font-family:var(--akt-b); font-size:16px; line-height:1.75; color:rgba(var(--paper-rgb),.76); margin:0; max-width:58ch}body .dst-cta-act{display:flex; flex-direction:column; align-items:flex-start; gap:14px}body .dst-btn, body .dst-btn-ghost{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--akt-b); font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  padding:17px 34px; transition:background .3s,color .3s,border-color .3s;
}body .dst-btn{background:var(--cream); color:var(--ink); border:1px solid var(--cream)}body .dst-btn:hover{background:var(--gold); border-color:var(--gold); color:#fff}body .dst-btn-ghost{background:transparent; color:var(--cream); border:1px solid rgba(var(--paper-rgb),.34)}body .dst-btn-ghost:hover{background:#25D366; border-color:#25D366; color:#fff}

/* ── narrow ── */
@media(max-width:980px){body .dst-cta-in{grid-template-columns:minmax(0,1fr)}}/* ═══ 2. THE ROUTE — the map (base styles, used by the route section and cards) */
body .itn-map{background:var(--paper); box-shadow:0 0 0 1px var(--hair); padding:clamp(14px,1.6vw,22px)}body .itn-map svg{display:block; width:100%; height:auto}body .itn-rmap{padding:clamp(16px,2vw,30px); border-radius:18px}
@media (max-width:760px){body .itn-rmap{padding:10px; border-radius:14px}}/* ═══ the route map from a WordPress shortcode ════════════════════════════
   The inline script in section III moves the shortcode's output into the
   slot and adds .is-embed / .has-embed. The drawn map's legend and hint no
   longer describe what is on screen, so they go. */
body .itn-rmap.is-embed{padding:0; overflow:hidden; display:flex; min-height:clamp(320px,40vw,560px)}body .itn-rmap.is-embed > *, body .itn-rmap.is-embed > :where(.elementor-widget) > :where(.elementor-widget-container) > *{flex:1 1 auto; width:100% !important; min-height:inherit}/* the Golden Safari Itinerary map: its block and canvas fill the whole slot (the plugin's own
   floor is 360px, which left a dark band under it in a 560px slot) */
body .itn-rmap.is-embed .gsi-block--map{display:flex; flex-direction:column; height:auto}body .itn-rmap.is-embed #routeMap{flex:1 1 auto; height:auto !important; min-height:clamp(320px,40vw,560px) !important}body /* "body .itn-map svg{width:100%;height:auto}" is for the drawn map; on the plugin map it shrank Leaflet's
   route layer (an svg in a zero-size pane) to 0x0, so the road route and day line never showed */
.itn-map.is-embed .leaflet-pane svg{width:auto !important; height:auto !important; max-width:none !important; display:inline}body .itn-pb{margin:0 0 18px; padding:14px 0 0; border-top:1px solid var(--hair); font-family:var(--akt-b); color:var(--ink)}body .itn-pb--rates{margin:0 0 16px; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--hair)}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — shared by the experience and destination page families.

   Both families were readable and completely inert: nothing responded to
   scroll, the sticky sub-navs never said where you were, and moving between
   pages was a white flash. Three techniques, in order of how new they are:

     1. cross-document view transitions   @view-transition
     2. scroll-driven animations           animation-timeline: scroll() / view()
     3. IntersectionObserver reveals       .mo-rise, driven by js/motion.js

   1 and 2 sit behind @supports, so browsers without them get the static page.
   3 only ever applies once motion.js sets .js-motion on <html>, which means a
   script that fails to load cannot leave content invisible.

   Everything is switched off under prefers-reduced-motion except the scroll-spy,
   which is navigation rather than decoration and lives in the JS.

   Keyframes are shared and prefixed mo-. Family-specific rules are grouped
   below; anything generic lives in the EXPERIENCE block only because it was
   written there first — .mo-rise, the view transitions, scroll-behavior and
   interpolate-size all apply to both.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER
   The pages were readable and completely inert — nothing responded to scroll,
   the sticky sub-nav never said where you were, and moving between pages was a
   white flash. Three techniques, in order of how new they are:

     1. cross-document view transitions   @view-transition
     2. scroll-driven animations           animation-timeline: scroll() / view()
     3. IntersectionObserver reveals       .mo-rise, driven by experience.js

   1 and 2 are progressive: behind @supports, and absent browsers simply get the
   static page. 3 only ever applies once motion.js has set .js-motion, so a
   failed script cannot leave content invisible.

   Every one of them is switched off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. page-to-page transitions ─────────────────────────────────────────
   Same-origin navigation between any two pages that load this stylesheet
   cross-fades instead of flashing white. The hero image is a named element,
   so navigating from a hub card to its page morphs the picture across. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {body ::view-transition-old(root){ animation: mo-vt-out .22s var(--me) both; }body ::view-transition-new(root){ animation: mo-vt-in  .38s var(--me) both; }
  @keyframes mo-vt-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes mo-vt-in  { from { opacity: 0; transform: translateY(14px); } }body ::view-transition-group(page-hero){ animation-duration: .5s; }}
@media (prefers-reduced-motion: reduce) {body ::view-transition-old(root), body ::view-transition-new(root){ animation: none; }}

/* ── 2. scroll-driven, no JavaScript at all ──────────────────────────────*/
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes mo-progress { to { transform: scaleX(1); } }
    @keyframes mo-hero-drift {
      from { transform: scale(1.14) translateY(-1.5%); }
      to   { transform: scale(1.02) translateY(3.5%); }
    }
    @keyframes mo-hero-lift { to { opacity: 0; transform: translateY(-26px); } }
    @keyframes mo-rail { to { transform: scaleY(1); } }
    @keyframes mo-num { from { opacity: 0; transform: translateY(10px); } }}}

/* ── 5. the FAQ opens instead of snapping ────────────────────────────────*/
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {:root{ interpolate-size: allow-keywords; }}}

/* ── 6b. the hero arrives, once, on load ─────────────────────────
   Staggered rather than all at once, so the eye lands on the kicker, then the
   headline, then the standfirst — which is the order it should read in. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-enter { from { opacity: 0; transform: translateY(20px); } }}

/* ── 7. anything that scrolls, scrolls smoothly ──────────────────────────*/
@media (prefers-reduced-motion: no-preference) {html{ scroll-behavior: smooth; }}


/* ═══════════════════════════════════════════════════════════════════════════
   DESTINATION FAMILY
   Same three techniques as above, tuned to the destination tokens. The two
   differences that matter: the destination sub-nav sits on cream rather than
   near-black, so the active state is gold-on-ink instead of white-on-fire; and
   the signature element here is the month strip rather than a time rail.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── scroll-driven, no JavaScript ───────────────────────────────────────*/
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {/* the section rules draw themselves in rather than just being there */
    body .dst-rule::before, body .dst-rule::after{
      transform-origin: 0 50%;
      animation: mo-rule linear both;
      animation-timeline: view(); animation-range: entry 10% entry 90%;
    }
    @keyframes mo-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }}}

/* ── the FAQ opens instead of snapping ──────────────────────────────────*/
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {body .dst-faq details::details-content{
      block-size: 0; overflow: clip;
      transition: block-size .42s var(--me), content-visibility .42s allow-discrete;
    }body .dst-faq details[open]::details-content{ block-size: auto; }}}body .dst-faq summary{ transition: color .25s; }body .dst-faq summary:hover, body .dst-faq details[open] summary{ color: var(--gold-d); }body .dst-btn{ transition: background .25s, color .25s, transform .25s var(--me); }
@media (prefers-reduced-motion: no-preference) {body .dst-btn:hover{ transform: translateY(-2px); }}/* journal articles - generated by build_journal.py, do not edit */
body .ja *{box-sizing:border-box}body .ja{font-family:'Jost',system-ui,-apple-system,sans-serif;color:#1E2422}body .ja a{color:#35593A;text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.4);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}body .ja a:hover{color:#487848;text-decoration-color:#487848}body .ja-wrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}body .ja-wide{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}body .ja-top{padding:clamp(120px,14vw,170px) 0 clamp(34px,4vw,48px)}body .ja-crumb{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#7A7D76}body .ja-crumb a{color:#7A7D76;text-decoration:none}body .ja-crumb span{margin:0 10px;opacity:.5}body .ja-kicker{display:block;margin-top:26px;font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#487848}body .ja-h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(38px,5vw,64px);line-height:1.06;letter-spacing:.012em;text-transform:uppercase;margin:16px 0 0;color:#1C1F1E}body .ja-stand{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;font-size:clamp(21px,2.2vw,26px);line-height:1.45;color:#5E625C;margin:22px 0 0}body .ja-by{margin-top:24px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#7A7D76}body .ja-hero{margin:clamp(28px,4vw,44px) auto 0;max-width:1180px;padding:0 clamp(20px,4vw,40px)}body .ja-hero figure{margin:0}body .ja-hero .ja-ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#E4E0D7}body .ja-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}body .ja figcaption{font-size:13px;color:#7A7D76;margin-top:10px;line-height:1.5}body .ja-body{padding:clamp(40px,5vw,64px) 0 clamp(70px,8vw,110px)}body .ja p{font-size:17px;line-height:1.8;margin:0 0 20px;color:#2B302D}body .ja-intro p:first-child::first-letter{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;float:left;font-size:64px;line-height:.9;margin:6px 10px 0 0;color:#487848}body .ja-answer{border-left:3px solid #487848;background:#fff;padding:22px 26px;margin:30px 0}body .ja-answer b{display:block;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#487848;margin-bottom:8px}body .ja-answer p{margin:0;font-size:17px}body .ja-toc{border-top:1px solid #D5CDBF;border-bottom:1px solid #D5CDBF;padding:22px 0;margin:34px 0}body .ja-toc b{display:block;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#7A7D76;margin-bottom:12px}body .ja-toc ol{margin:0;padding:0;list-style:none;counter-reset:t}body .ja-toc li{counter-increment:t;margin:0 0 8px}body .ja-toc li::before{content:counter(t,decimal-leading-zero);font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;color:#487848;margin-right:12px}body .ja-toc a{font-size:16px;text-decoration:none;color:#1E2422}body .ja h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1.15;margin:48px 0 18px;color:#1C1F1E;scroll-margin-top:110px}body .ja section{scroll-margin-top:110px}body .ja-tbl{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:15px;background:#fff}body .ja-tbl th{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#7A7D76;text-align:left;padding:12px 14px;border-bottom:1px solid #D5CDBF}body .ja-tbl td{padding:13px 14px;border-bottom:1px solid #ECE7DE;vertical-align:top;line-height:1.5}body .ja-tbl td:first-child{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:20px;white-space:nowrap;color:#1C1F1E}body .ja-skip{display:flex;justify-content:space-between;gap:16px;margin:26px 0 0;padding-top:14px;border-top:1px dashed #D5CDBF}body .ja-skip a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#487848}body .ja-faq details{border-bottom:1px solid #D5CDBF;padding:16px 0}body .ja-faq summary{cursor:pointer;list-style:none;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:22px;line-height:1.3;color:#1C1F1E;padding-right:30px;position:relative}body .ja-faq summary::-webkit-details-marker{display:none}body .ja-faq summary::after{content:"+";position:absolute;right:0;top:0;font-family:'Jost',sans-serif;font-size:22px;color:#487848}body .ja-faq details[open] summary::after{content:"\2212"}body .ja-faq details p{margin:12px 0 0;font-size:16px}body .ja-plans{padding:clamp(50px,6vw,80px) 0}body .ja-plans h2{margin-top:0}body .ja-plans .fj-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}body .ja-upd{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#7A7D76;margin-top:36px}body .ja-pill{position:fixed;left:18px;bottom:18px;z-index:40;background:#1C1F1E;color:#F7F5F1!important;text-decoration:none!important;border-radius:999px;padding:11px 18px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 10px 24px -12px rgba(var(--c-000000-rgb),.5)}
@media (max-width:900px){body .ja-plans .fj-cards{grid-template-columns:1fr}}
@media (max-width:600px){body .ja-tbl{font-size:14px}body .ja-tbl th, body .ja-tbl td{padding:11px 8px}body .ja-tbl td:first-child{font-size:17px;white-space:normal}body .ja-pill{display:none}}body .ja-sec, body .ja-src{scroll-margin-top:110px}body .ja.ja-hero{max-width:none;margin:0;padding:clamp(28px,4vw,44px) clamp(20px,4vw,40px) 0}body .ja-hero-fig{max-width:1100px;margin:0 auto}body .ja-tblw{overflow-x:auto;-webkit-overflow-scrolling:touch}body .ja-tbl caption{caption-side:bottom;text-align:left;font-size:13px;color:#7A7D76;padding-top:10px;line-height:1.5}body .ja-src{margin:44px 0 0;padding:22px 0 0;border-top:1px solid #D5CDBF}body .ja-src h2{font-size:clamp(22px,2.2vw,26px);margin:0 0 12px}body .ja-src ul{margin:0;padding:0 0 0 18px}body .ja-src li{font-size:14px;line-height:1.6;color:#5E625C;margin:0 0 6px}body .ja-src p{font-size:14px;color:#5E625C;margin:12px 0 0}body .ja-rel{margin:40px 0 0;padding:26px 28px;background:#fff;border:1px solid #E6E0D5}body .ja-rel b{display:block;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#7A7D76;margin-bottom:12px}body .ja-rel ul{list-style:none;margin:0;padding:0}body .ja-rel li{margin:0 0 10px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:21px;line-height:1.3}body .ja-rel li:last-child{margin:0}body .ja-rel span{display:block;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#487848;margin-bottom:2px}body .ja-rel a{text-decoration:none;color:#1C1F1E}body .ja-rel a:hover{color:#487848}body .ja .fj-c{display:flex;flex-direction:column;text-decoration:none;color:#1E2422;background:#fff;border:1px solid #E6E0D5;transition:border-color .3s,transform .5s cubic-bezier(.16,1,.3,1)}body .ja .fj-c:hover{border-color:#487848;transform:translateY(-3px)}body .ja .fj-c[hidden]{display:none}body .ja .fj-c-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#E4E0D7}body .ja .fj-c-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}body .ja .fj-c:hover .fj-c-img img{transform:scale(1.04)}body .ja .fj-c-stamp{position:absolute;left:0;bottom:0;background:#F7F5F1;color:#1C1F1E;padding:10px 14px 8px;display:flex;align-items:baseline;gap:6px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}body .ja .fj-c-stamp b{font:500 30px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:0}body .ja .fj-c-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}body .ja .fj-c-meta{font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#487848}body .ja .fj-c-t{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:22px;line-height:1.18;letter-spacing:.012em;text-transform:uppercase;color:#1C1F1E}body .ja .fj-c-parks{font-size:14px;line-height:1.55;color:#5E625C}body .ja .fj-c-season{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:auto;padding-top:12px}body .ja .fj-c-season i{height:6px;border-radius:1px;background:#E6E0D5}body .ja .fj-c-season i.fj-d2{background:#A9C2A0}body .fj-c-season i.fj-d3{background:#487848}
/* ============================================================================
   5. GLUE  -  Elementor's widget markup vs what the reference sheet expects.
   ========================================================================== */
body :where(.elementor-widget-heading) :where(.elementor-heading-title) {
  font: inherit; color: inherit; margin: 0; letter-spacing: inherit;
}
body :where(.ja,.dst-cta) .elementor-widget-heading .elementor-heading-title { line-height: inherit; }

/* Images: the sheet sizes the <img>; Elementor's figure/link wrappers vanish */
body :where(.ja,.dst-cta) .elementor-widget-image,
body :where(.ja,.dst-cta) .elementor-widget-image figure,
body :where(.ja,.dst-cta) .elementor-widget-image a { display: contents; }
/* the widget's <img> carries no class, so the sizing class on the wrapper is
   handed down (playbook section 4) */
body .elementor-widget-image.ph-img img,
body .dst-hero-media .elementor-widget-image img,
body .itn-card-media .elementor-widget-image img,
body .itn-hub-m .elementor-widget-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* ADD IMAGE: the empty slot hides its <img> and shows its brief; a real URL
   hides the brief. CSS only (master prompt 3.3). */
body .elementor-widget-image img[src="ADD IMAGE"] { display:none !important; }
body :where(.ph, .itn-card-media, .dst-hero-media, .itn-hub-m):has(.elementor-widget-image img:not([src="ADD IMAGE"])) :where(.ph-l, .itn-card-need) { display:none !important; }

/* Buttons: strip Elementor's chrome, let the sheet style the wrapper, and
   stretch the anchor over the whole box (playbook 3.6, 3.7) */
body .elementor-widget-button .elementor-button { background-color: transparent; border-radius: 0; box-shadow: none; fill: currentColor; }
body .elementor-widget-button > .elementor-widget-container,
body .elementor-widget-button .elementor-button-wrapper,
body .elementor-widget-button .elementor-button-content-wrapper { display: contents; }
body .elementor-widget-button .elementor-button-text { font: inherit; color: inherit; }
body :where(.ja,.dst-cta) .elementor-button.elementor-button {
  padding: 0; line-height: inherit; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit;
}
body .elementor-widget-button { position: relative; }
body .elementor-widget-button .elementor-button::after { content: ""; position: absolute; inset: 0; }
body .dst-jump-in > .elementor-widget-button { flex: 0 0 auto; }

/* Kit defaults (Global colours/typography) written at (0,3,0) — hand them back */
body.elementor-page .elementor-widget-heading .elementor-heading-title,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text {
  color: inherit; font-family: inherit; font-weight: inherit;
}
body.elementor-page .elementor-widget-button .elementor-button { background-color: transparent; }

/* the reset forces display with !important; the `hidden` attribute (rate
   panels, form steps) must still win */
body [hidden][hidden] { display: none !important; }

/* Text Editors are pass-throughs: the wrapper keeps the class, its container
   vanishes from layout */
body .elementor-widget-text-editor > .elementor-widget-container { display: contents; }
/* a pass-through widget is not a box at all: the element inside it is */
body .elementor-widget-text-editor.ba-pass { display: contents !important; }
body :where(.ba-t-span, .ba-t-b, .ba-t-i, .ba-t-em, .ba-t-strong, .ba-t-small,
            .ba-t-a, .ba-t-cite, .ba-t-time, .ba-t-abbr, .ba-t-code,
            .ba-t-mark, .ba-t-sub, .ba-t-sup) { display: inline; }

/* link containers (hub and related cards) are real <a> elements */
body a.e-con { color: inherit; text-decoration: none; }

/* HTML widgets are pass-throughs too: the markup inside is the design */
body .elementor-widget-html,
body .elementor-widget-html > .elementor-widget-container { display: contents !important; }
/* a subgrid inherits its parent's gap; the reset's gap:0 would stop that */
body .e-con.itn-nstrip { gap: normal !important; }

/* FAQ: Elementor's Accordion restyled to the page's question list */
body .dst-faq .elementor-accordion { border-top: 1px solid var(--hair); }
body .dst-faq .elementor-accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--hair); }
body .dst-faq .elementor-accordion .elementor-tab-title {
  padding: 20px 40px 20px 0; border: 0; font-family: var(--akt-d); font-size: 21px;
  font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer; position: relative;
}
body .dst-faq .elementor-accordion .elementor-tab-title a { color: inherit; }
body .dst-faq .elementor-accordion .elementor-tab-content {
  padding: 0 40px 22px 0; border: 0; font-family: var(--akt-b); font-size: 15.5px; line-height: 1.75; color: var(--ink-soft);
}
body .dst-faq .elementor-accordion .elementor-accordion-icon { color: var(--gold); }

/* Rows that are now containers, and so are also `.e-con`. The reset
   above neutralises Elementor layout with !important, which would
   otherwise beat these plain declarations (standard rule 6). Generated
   from the classes actually used as containers - not hand-listed. */
body .dst-cta h2:where(.elementor-heading-title){font-family:var(--akt-d) !important;font-weight:500 !important;font-size:clamp(28px,4vw,52px) !important;line-height:1.08 !important;color:var(--ink) !important;margin:0 0 18px !important;}
body .dst-cta:where(.e-con, .elementor-widget){color:var(--cream) !important;padding:clamp(52px,6vw,96px) 0 !important;}
body .dst-cta-in:where(.e-con, .elementor-widget){max-width:1320px !important;margin:0 auto !important;padding:0 clamp(20px,3vw,48px) !important;display:grid !important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) !important;gap:clamp(28px,4vw,72px) !important;align-items:center !important;}
body .dst-cta .dst-rule span:where(.e-con){color:rgba(var(--paper-rgb),.66) !important;}
body .dst-cta h2:where(.elementor-heading-title){color:var(--cream) !important;}
body .dst-cta-act:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
/* ── narrow ── */
@media(max-width:980px){
body .dst-cta-in:where(.e-con, .elementor-widget){grid-template-columns:minmax(0,1fr) !important;}
}
body .ja:where(.e-con, .elementor-widget){font-family:'Jost',system-ui,-apple-system,sans-serif !important;color:#1E2422 !important;}
body .ja a:where(.e-con){color:#35593A !important;}
body .ja a:where(.e-con):hover{color:#487848 !important;}
body .ja-wrap:where(.e-con, .elementor-widget){max-width:760px !important;margin:0 auto !important;padding:0 clamp(20px,4vw,32px) !important;}
body .ja-wide:where(.e-con, .elementor-widget){max-width:1180px !important;margin:0 auto !important;padding:0 clamp(20px,4vw,40px) !important;}
body .ja-top:where(.e-con, .elementor-widget){padding:clamp(120px,14vw,170px) 0 clamp(34px,4vw,48px) !important;}
body .ja-h1:where(.e-con, .elementor-widget){font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:500 !important;font-size:clamp(38px,5vw,64px) !important;line-height:1.06 !important;letter-spacing:.012em !important;text-transform:uppercase !important;margin:16px 0 0 !important;color:#1C1F1E !important;}
body .ja-hero:where(.e-con, .elementor-widget){margin:clamp(28px,4vw,44px) auto 0 !important;max-width:1180px !important;padding:0 clamp(20px,4vw,40px) !important;}
body .ja-hero figure:where(.e-con){margin:0 !important;}
body .ja-body:where(.e-con, .elementor-widget){padding:clamp(40px,5vw,64px) 0 clamp(70px,8vw,110px) !important;}
body .ja-answer:where(.e-con, .elementor-widget){padding:22px 26px !important;margin:30px 0 !important;}
body .ja-toc:where(.e-con, .elementor-widget){padding:22px 0 !important;margin:34px 0 !important;}
body .ja-toc a:where(.e-con){font-size:16px !important;color:#1E2422 !important;}
body .ja h2:where(.elementor-heading-title){font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:500 !important;font-size:clamp(28px,3vw,38px) !important;line-height:1.15 !important;margin:48px 0 18px !important;color:#1C1F1E !important;}
body .ja-skip:where(.e-con, .elementor-widget){display:flex !important;justify-content:space-between !important;gap:16px !important;margin:26px 0 0 !important;padding-top:14px !important;}
body .ja-skip a:where(.e-con){font-size:11px !important;font-weight:500 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:#487848 !important;}
body .ja-plans:where(.e-con, .elementor-widget){padding:clamp(50px,6vw,80px) 0 !important;}
body .ja-plans h2:where(.elementor-heading-title){margin-top:0 !important;}
body .ja-plans .fj-cards:where(.e-con, .elementor-widget){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:24px !important;}
@media (max-width:900px){
body .ja-plans .fj-cards:where(.e-con, .elementor-widget){grid-template-columns:1fr !important;}
}
body .ja.ja-hero:where(.e-con, .elementor-widget){max-width:none !important;margin:0 !important;padding:clamp(28px,4vw,44px) clamp(20px,4vw,40px) 0 !important;}
body .ja-hero-fig:where(.e-con, .elementor-widget){max-width:1100px !important;margin:0 auto !important;}
body .ja-src:where(.e-con, .elementor-widget){margin:44px 0 0 !important;padding:22px 0 0 !important;}
body .ja-src h2:where(.elementor-heading-title){font-size:clamp(22px,2.2vw,26px) !important;margin:0 0 12px !important;}
body .ja-rel:where(.e-con, .elementor-widget){margin:40px 0 0 !important;padding:26px 28px !important;}
body .ja-rel span:where(.e-con){display:block !important;font-family:'Jost',sans-serif !important;font-size:11px !important;font-weight:500 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:#487848 !important;margin-bottom:2px !important;}
body .ja-rel a:where(.e-con){color:#1C1F1E !important;}
body .ja-rel a:where(.e-con):hover{color:#487848 !important;}
body .ja .fj-c:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;color:#1E2422 !important;}
body .ja .fj-c-img:where(.e-con, .elementor-widget){display:block !important;}
body .ja .fj-c-body:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;gap:10px !important;padding:20px 22px 22px !important;flex:1 !important;}
body .ja .fj-c-t:where(.e-con, .elementor-widget){margin:0 !important;font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:500 !important;font-size:22px !important;line-height:1.18 !important;letter-spacing:.012em !important;text-transform:uppercase !important;color:#1C1F1E !important;}
body .ja .fj-c-season:where(.e-con, .elementor-widget){display:grid !important;grid-template-columns:repeat(12,1fr) !important;gap:4px !important;margin-top:auto !important;padding-top:12px !important;}

/* ---- journal glue: the FAQ accordion in the article's own type, and the floating pill ---- */
body .ja-faqs .elementor-accordion { border-top: 0; }
body .ja-faqs .elementor-accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid #D5CDBF; }
body .ja-faqs .elementor-accordion .elementor-tab-title {
  padding: 16px 30px 16px 0; border: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px;
  font-weight: 500; line-height: 1.3; color: #1C1F1E; cursor: pointer; position: relative; margin: 0;
}
body .ja-faqs .elementor-accordion .elementor-tab-title a { color: inherit; text-decoration: none; }
body .ja-faqs .elementor-accordion .elementor-tab-content { padding: 0 30px 18px 0; border: 0; }
body .ja-faqs .elementor-accordion .elementor-tab-content p { margin: 0; font-size: 16px; line-height: 1.8; color: #2B302D; }
body .ja-faqs .elementor-accordion .elementor-accordion-icon { color: #487848; position: absolute; right: 0; top: 16px; font-family: 'Jost', sans-serif; font-size: 22px; }
body .ja-faqs .elementor-accordion .elementor-accordion-icon svg { width: 14px; height: 14px; fill: currentColor; }
body .ja-ld { display: none !important; }/* End custom CSS */