/*
Theme Name: Tanzania Safaris ASV
Author: Tanzania Safaris
Description: Classic PHP theme for Tanzania Safaris. The African Safari Vacations layout (torn-paper hero, six-tile destination grid, featured packages with a promo panel, journey strip, gallery carousel, testimonial slider, FAQ accordion and a five-column footer) recoloured end to end into the Tanzania Safaris deep-green and gold palette. Albert Sans (display) + Google Sans (text) + Caveat (accent).
Version: 1.8.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tanzaniasafari-asv
Tags: travel, safari, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================
   Design tokens.

   Structure and naming are inherited from the African Safari
   Vacations design; every value is a Uganda Safaris palette
   colour, or a documented tint of one. No olive-family colour
   from the source design survives.
   ========================================================== */
:root{
  /* --- Citrus Bloom palette (generated from palettes/28-citrus-bloom.json) ---

     TOKEN NAMES ARE HISTORICAL. --olive is a deep TEAL here and --gold is a
     burnt orange; neither name describes its colour any more. They are kept
     because they are referenced right through this file AND re-exported by the
     safaris plugin as --ato-primary / --ato-secondary, so renaming them is a
     large sweep across two codebases for no rendering gain. Read --olive as
     "primary" and --gold as "accent".

     Do not hand-edit the block below to taste: it is a generated palette and
     the next regeneration will overwrite it. Adjust the source palette. */
  --cream:#fbf3e8;
  --cream2:#f2e3cf;
  --paper:#fffaf1;
  --olive:#0e5f5c;         /* primary: deep teal */
  --olive-dark:#083f3d;
  --ink:#2c1a10;--ink-max:#000000;
  --footer:#0b3a38;
  --gold:#b8421a;          /* accent: burnt orange */
  --gold-dark:#973513;
  --tan:#f0a35c;
  --text:#57483b;
  --muted:#6b594a;
  --line:#f2e3cf;

  /* --- derived neutrals --- */
  --rule:#d8c3a6;          /* hairline rules / inactive dots on cream */
  --on-dark:#a5c8c5;       /* body copy on the deep teal surfaces */
  --on-dark-soft:#96bcb9;  /* meta copy on the deep teal surfaces */
  --on-dark-strong:#d2e7e5;/* topbar copy on --footer */
  --dark-line:#16544f;     /* hairlines inside the deep teal footer */
  --sale-bg:#fbe6cf;       /* pale field behind the sale tag (tint of --tan) */
  /* --cream-rgb is NOT in the source palette and must be derived from --cream
     whenever that changes: #fbf3e8. It backs the translucent glass washes over
     photography, so a stale value shows as a colour cast on the hero only. */
  --cream-rgb:251,243,232;
  --shadow:11,58,56;      /* --footer as an rgb triplet, for shadows */

  /* TOKEN NAMES ARE HISTORICAL - READ BEFORE USING.
     --serif no longer holds a serif. The site moved to the owner's two
     families and both are sans-serifs; --serif is now the DISPLAY/heading face
     and --sans is the TEXT/UI face. The names are kept because they are
     referenced ~30 times here and again across the safaris plugin's
     --ato-font-* re-exports, and renaming them is a large risky sweep for no
     rendering gain. Read them as "display" and "text".

     Both faces ship a TRUE italic (Albert Sans ital axis 0,100..900;1,100..900,
     Google Sans ital axis), so font-style:italic is safe on either and the
     browser never has to synthesise a slant.

     Weights: keep display headings at 400. The axis goes down to 100, but the
     palette here is warm and low-contrast and anything under 300 disappears
     against it. 400 vs 500 changes advance width by only 0.3%, so weight is a
     colour decision, not a fitting one.

     Albert Sans covers latin + latin-ext only. Google Sans covers 25 subsets.
     Non-Latin copy must not be set in the display face. */
  --serif:'Albert Sans','Segoe UI',Arial,sans-serif;
  --sans:'Google Sans','Segoe UI',Arial,sans-serif;
  --navbar-h:104px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--text);font-size:16px;line-height:1.65}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer;border:none}
.pp-wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* The small-caps labels (.pp-sechead h3, .pp-colhead, .pp-cat-label b,
   .pp-footer h5, .pp-organize-title h2,.pp-organize-title h4) use the heading font deliberately.
   They inherited the body font for as long as the heading face was a
   high-contrast serif, which is fragile at 11.5px uppercase with wide
   tracking. The heading face is now a geometric sans that holds up at
   label sizes, so the exception has been retired. */

/* ---------- announcement bar ---------- */
.pp-topbar{background:var(--footer);color:var(--on-dark-strong);font-size:11.5px;letter-spacing:.06em}
.pp-topbar-in{max-width:1180px;margin:0 auto;padding:7px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-topbar b{color:#fff;font-weight:600}
.pp-topbar-msgs{display:flex;gap:22px;flex-wrap:wrap}
.pp-topbar-msgs span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pp-topbar-social{display:flex;gap:12px;opacity:.85}
/* Below ~1000px the bar cannot hold two messages, the operator pill and four
   icons on one row, and it wrapped. The icons go first: the same four links are
   in the footer, and they are the only item here that is decoration rather than
   navigation. */
@media(max-width:1000px){.pp-topbar-social{display:none}}
/* At 820px the bar's content box is 749: the operator pill takes 243 and flex
   shrinks the message list to 490, while two messages need 511 and wrap inside
   it. Widening the list instead would overflow the bar into a horizontal
   scroll, so below 900 it carries one message. The survivor says what the site
   IS; the other says what happens after you find something. */
@media(max-width:900px){.pp-topbar-msgs span+span{display:none}}
.pp-topbar-social svg{width:12px;height:12px;fill:var(--on-dark-strong)}

/* ---------- header ---------- */
.pp-header{background:var(--paper);border-bottom:1px solid var(--line)}
.pp-header-in{max-width:1180px;margin:0 auto;padding:20px 28px 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.pp-search{display:flex;align-items:center;gap:8px;color:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pp-search svg{width:15px;height:15px;stroke:var(--text)}
.pp-logo{text-align:center}
/* the_custom_logo() output. Height-driven so a re-upload at a different pixel
   size cannot change the header height; width follows the aspect ratio. */
.pp-logo .custom-logo-link{display:inline-block;line-height:0}
.pp-logo .custom-logo{height:58px;width:auto;max-width:100%;display:block}
.pp-logo h1{margin:0}
.pp-logo-mark{font-size:11px;color:var(--olive);letter-spacing:.2em}
.pp-logo h1,.pp-logo .pp-logo-title{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.18em;color:var(--ink);white-space:nowrap}
.pp-logo .amp{color:var(--olive)}
.pp-logo-sub{font-size:9.5px;letter-spacing:.34em;color:var(--text);text-transform:uppercase;margin-top:4px}
/* --hr-gap is the single source of truth for the spacing between the header
   utilities. The tap-target zones at the foot of this file derive their width
   from it, so the zone can never drift out of step with the gap and start
   overlapping its neighbour. Change the gap here, not on `gap` directly. */
.pp-header-right{--hr-gap:22px;display:flex;justify-content:flex-end;align-items:center;gap:var(--hr-gap);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.pp-header-right .pp-cart{display:flex;align-items:center;gap:7px}
.pp-cart-badge{background:var(--olive);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.pp-header-right svg{width:15px;height:15px;stroke:var(--text)}
.pp-nav{background:var(--paper)}
.pp-nav ul{max-width:1180px;margin:0 auto;padding:2px 28px 14px;list-style:none;display:flex;justify-content:center;gap:34px}
.pp-nav a{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text);font-weight:600;padding-bottom:4px;border-bottom:2px solid transparent;transition:.2s}
.pp-nav a:hover,.pp-nav a.on,.pp-nav .current-menu-item>a,.pp-nav .current_page_item>a,.pp-nav .current-menu-ancestor>a{color:var(--olive);border-color:var(--gold)}

/* ---------- hero ---------- */
.pp-hero{position:relative;background:var(--cream2);overflow:hidden}
.pp-hero-img{position:absolute;inset:0;background-position:center 60%;background-size:cover;background-repeat:no-repeat}
.pp-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--cream-rgb),.97) 0%,rgba(var(--cream-rgb),.93) 42%,rgba(var(--cream-rgb),.62) 62%,rgba(var(--cream-rgb),0) 86%)}
.pp-hero-in{position:relative;max-width:1180px;margin:0 auto;padding:60px 28px 64px;min-height:0;display:flex;align-items:center}
.pp-hero-copy{max-width:600px}
.pp-eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:16px}
/* The headline is the one place on the page that should shout. 800 is a real
   drawn weight on Albert Sans\x27 100-900 axis, not a synthesised bold, and it
   stops short of 900 which starts closing the counters at this size.
   -0.015em tracking because geometric sans letterfit opens up as weight rises. */
.pp-hero h1,.pp-hero h2{font-family:var(--serif);font-weight:800;font-size:46px;line-height:1.08;letter-spacing:-.015em;color:var(--ink-max);margin-bottom:18px}
.pp-hero p{font-size:15.5px;color:var(--text);max-width:520px;margin-bottom:20px}

/* Primary CTA.
   Under the previous palette the accent could not carry white text -- the
   source design's gold reached 2.6:1 and the Uganda gold 3.1:1, both short of
   4.5:1 -- so the solid CTA took the primary colour and the accent was
   restricted to rings, underlines and marks.

   Citrus Bloom lifts that constraint: white on --gold (#b8421a) measures
   5.48:1 and on --gold-dark 7.41:1, so an accent-filled button is now a real
   option if the design wants one. The CTA stays on --olive deliberately --
   7.47:1, and it keeps one loud accent colour in reserve rather than spending
   it on every button. .pp-btn-gold is the on-dark variant: pale --tan field,
   --ink label, 8.00:1.

   Verified by backups/tanzaniasafari-scripts/check-palette-contrast.php --
   re-run it if the palette is regenerated. */
.pp-btn{display:inline-block;background:var(--olive);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:13px 26px;border-radius:3px;transition:.2s}
.pp-btn:hover{background:var(--olive-dark)}
.pp-btn-olive{background:var(--olive)}
.pp-btn-olive:hover{background:var(--olive-dark)}
.pp-btn-gold{background:var(--tan);color:var(--ink)}
.pp-btn-gold:hover{background:var(--cream)}
.pp-hero-tear{position:absolute;left:0;right:0;bottom:-2px;height:38px;background:var(--cream);clip-path:polygon(0 62%,3% 44%,7% 66%,11% 40%,15% 60%,19% 38%,24% 64%,28% 42%,33% 58%,37% 36%,42% 62%,47% 44%,52% 66%,56% 40%,61% 60%,65% 38%,70% 62%,74% 42%,79% 58%,83% 36%,88% 62%,92% 44%,96% 64%,100% 40%,100% 100%,0 100%)}

/* ---------- section headings ---------- */
.pp-sechead{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:34px}
.pp-sechead::before,.pp-sechead::after{content:"";width:64px;height:1px;background:var(--rule)}
.pp-sechead h2,.pp-sechead h3{font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);font-weight:600}

/* ---------- destinations ---------- */
.pp-cats{padding:56px 0 44px}
.pp-cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pp-cat{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(var(--shadow),.06);transition:.25s}
.pp-cat:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(var(--shadow),.12)}
.pp-cat-img{height:118px;background-size:cover;background-position:center}
.pp-cat-label{background:var(--olive);color:#fff;text-align:center;padding:11px 6px 12px}
.pp-cat-label b{font-family:var(--serif);display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.pp-cat-label span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
/* sixth tile: the gold "Special Offers" treatment. Pale gold field with a
   deep-green label so the 10px caps still clear 4.5:1. */
.pp-cat.sale .pp-cat-label{background:var(--tan);color:var(--ink)}
.pp-cat.sale .pp-cat-label span{opacity:.8}
.pp-cat.sale .pp-cat-img{display:flex;align-items:center;justify-content:center;background:var(--sale-bg)}
.pp-sale-tag{width:64px;height:64px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:24px;font-weight:700;transform:rotate(-8deg);box-shadow:0 6px 14px rgba(154,124,72,.35);position:relative}
.pp-sale-tag::before{content:"";position:absolute;top:7px;left:7px;width:8px;height:8px;border-radius:50%;background:var(--sale-bg)}

/* ---------- featured ---------- */
.pp-featured{padding:12px 0 56px}
.pp-featured-grid{display:grid;grid-template-columns:repeat(6,1fr) 300px;gap:16px;align-items:stretch}
@media(min-width:900px){.pp-featured-grid{grid-template-columns:repeat(3,1fr) 300px;grid-auto-rows:auto}}
.pp-featured-left{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:1/4}
.pp-product{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:10px 10px 14px;text-align:center;transition:.25s}
.pp-product:hover{box-shadow:0 8px 20px rgba(var(--shadow),.12)}
.pp-product-img{height:110px;border-radius:3px;background-size:cover;background-position:center;margin-bottom:10px}
.pp-product b{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:600;line-height:1.4;min-height:36px}
.pp-price{font-family:var(--serif);font-size:18px;color:var(--olive);font-weight:700;margin:4px 0 2px}
.pp-stars{color:var(--gold-dark);font-size:11px;letter-spacing:2px}
.pp-promo{grid-column:4;grid-row:1/3;background:var(--olive);border-radius:4px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;padding:34px 28px}
.pp-promo::after{content:"";position:absolute;right:-30px;bottom:-30px;width:230px;height:200px;background-image:var(--promo-img);background-position:center;background-size:cover;border-radius:8px;transform:rotate(-6deg);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.pp-promo-spark{position:absolute;top:20px;right:26px;color:var(--tan);font-size:18px;letter-spacing:6px}
.pp-promo h3,.pp-promo h4{font-family:var(--serif);font-size:27px;line-height:1.12;font-weight:600;margin-bottom:14px;position:relative;z-index:1}
.pp-promo p{font-size:13.5px;opacity:.85;max-width:260px;margin-bottom:20px;position:relative;z-index:1}
.pp-promo .pp-btn{position:relative;z-index:1;align-self:flex-start;padding:11px 20px}
.pp-brush{position:absolute;left:-10px;bottom:36px;width:150px;height:34px;background:var(--gold);opacity:.85;border-radius:50% 40% 55% 45%/60% 50% 45% 55%;transform:rotate(-5deg)}

/* ---------- journey strip ---------- */
.pp-organize{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* minmax(0,1fr) on the middle track, for the same reason the header lockup
   needs it: a bare 1fr has min-width:auto, so between 821px (where the
   single-column rule stops applying) and ~940px it refused to shrink and
   pushed the Browse button 53px off the right of the viewport, giving the
   whole page a horizontal scrollbar. */
.pp-organize-in{max-width:1180px;margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:28px;align-items:center}
.pp-organize-title h2,.pp-organize-title h4{font-family:var(--serif);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:700;line-height:1.5}
.pp-organize-title p{font-size:13px;color:var(--text);margin-top:6px}
.pp-organize-leaf{color:var(--olive);font-size:18px;margin-top:6px}
.pp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pp-step{display:flex;gap:12px;align-items:flex-start}
.pp-step-ic{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--olive);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--olive)}
.pp-step-ic svg{width:19px;height:19px;stroke:var(--olive);fill:none;stroke-width:1.6}
.pp-step b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pp-step small{font-size:12.5px;color:var(--text);line-height:1.5;display:block;margin-top:3px}
.pp-step .stars{color:var(--gold-dark);font-size:10px;letter-spacing:2px}

/* ---------- gallery carousel ---------- */
.pp-gallery{padding:52px 0 56px}
.pp-carousel{position:relative}
.pp-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.pp-track::-webkit-scrollbar{display:none}
.pp-shot{position:relative;flex:0 0 210px;height:150px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);box-shadow:0 3px 10px rgba(var(--shadow),.08);overflow:hidden}
/* Gallery slides now name the place they show. The gradient is on a pseudo
   element rather than the tile so it sits over the background image without a
   second box, and the label stays legible on a pale sky or a dark forest. */
.pp-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none}
.pp-shot-label{position:absolute;left:10px;right:10px;bottom:8px;z-index:1;color:#fff;font-size:13px;line-height:1.25;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-size:13px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pp-arrow.prev{left:-12px}
.pp-arrow.next{right:-12px}

/* ---------- triple row ---------- */
.pp-triple{padding:0 0 54px}
.pp-triple-grid{display:grid;grid-template-columns:300px 330px 1fr;gap:34px}
.pp-colhead{font-family:var(--serif);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:16px}
.pp-sub-box p{font-size:14px;color:var(--text);margin-bottom:16px;max-width:280px}
.pp-envelope{color:var(--olive);margin:6px 0 12px}
.pp-envelope svg{width:44px;height:34px;stroke:var(--olive);fill:none;stroke-width:1.4}
.pp-field{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;max-width:280px}
.pp-field input{flex:1;border:none;outline:none;padding:12px 13px;font-size:13.5px;font-family:var(--sans);color:var(--text);background:transparent}
.pp-field button{background:var(--olive);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0 16px;transition:.2s}
.pp-field button:hover{background:var(--olive-dark)}
.pp-quote-mark{font-family:var(--serif);font-size:44px;color:var(--tan);line-height:.6;margin-bottom:10px}
.pp-quote{font-size:14.5px;color:var(--text);line-height:1.75;font-style:italic;margin-bottom:14px}
.pp-quote-by{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.pp-dots{display:flex;gap:7px;margin-top:14px}
.pp-dot{width:7px;height:7px;border-radius:50%;background:var(--rule);cursor:pointer}
.pp-dot.on{background:var(--olive)}
.pp-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pp-mini{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:8px 8px 12px;text-align:center;position:relative}
.pp-mini-img{height:82px;border-radius:3px;background-size:cover;background-position:center;margin-bottom:8px}
.pp-new-badge{position:absolute;top:4px;left:4px;background:var(--tan);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:2px}
.pp-mini b{display:block;font-size:11.5px;color:var(--ink);font-weight:600;line-height:1.4;min-height:32px}
.pp-mini .pp-price{font-size:16px;margin:3px 0 0}
.pp-shopall{margin-top:16px;text-align:center}
.pp-ghost{display:inline-block;border:1px solid var(--ink);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:9px 20px;border-radius:2px;background:transparent;transition:.2s}
.pp-ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- faq + journal ---------- */
.pp-lower{padding:0 0 56px}
.pp-lower-grid{display:grid;grid-template-columns:340px 1fr;gap:44px}
.pp-faq-item{background:var(--paper);border:1px solid var(--line);border-radius:3px;margin-bottom:9px}
.pp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;padding:14px 16px;font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:.03em;text-align:left;gap:12px}
.pp-faq-q span{color:var(--olive);font-size:13px;transition:.25s}
.pp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;color:var(--text);padding:0 16px}
.pp-faq-item.open .pp-faq-a{max-height:220px;padding:0 14px 12px}
.pp-faq-item.open .pp-faq-q span{transform:rotate(45deg)}
.pp-journal-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.pp-journal-head p{font-size:13.5px;color:var(--text)}
.pp-viewall{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px}
.pp-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-post{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.25s}
.pp-post:hover{box-shadow:0 8px 20px rgba(var(--shadow),.12)}
.pp-post-img{height:110px;background-size:cover;background-position:center}
.pp-post-body{padding:12px 14px 16px}
.pp-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:2px;margin-bottom:8px}
.pp-tag.g{background:var(--olive);color:#fff}
.pp-tag.y{background:var(--tan);color:var(--ink)}
.pp-post b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.45;min-height:38px}
.pp-post small{display:block;font-size:11px;color:var(--text);margin-top:7px}

/* ---------- newsletter band ---------- */
.pp-band{background:var(--olive-dark);color:#fff;position:relative;overflow:hidden}
.pp-band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:300px;background-image:var(--band-img);background-position:center;background-size:cover;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.pp-band-in{max-width:1180px;margin:0 auto;padding:36px 28px;display:flex;align-items:center;gap:34px;position:relative;z-index:1}
.pp-band-ic svg{width:60px;height:44px;stroke:var(--on-dark);fill:none;stroke-width:1.2}
.pp-band h2,.pp-band h4{font-family:var(--serif);font-size:24px;letter-spacing:.12em;font-weight:600;margin-bottom:6px}
.pp-band p{font-size:13.5px;color:var(--on-dark);max-width:340px}
.pp-band .pp-field{margin-left:auto;background:var(--cream);min-width:340px;border:none}
/* the shadow keeps the gold script legible where the band photo runs bright */
/* pointer-events:none is load-bearing, not tidiness. This is a decorative
   handwritten flourish with z-index:2, and once .pp-band-in wraps (below
   ~1080px) it comes to rest ON TOP of the band's "Browse the safaris" button.
   Measured at 320px: the button's rect is 215x45, but document.elementFromPoint
   returned .pp-hand for the bottom 37px of it, so the real hit area was 31px
   tall and the lower two thirds of a primary CTA silently did nothing. Nothing
   about this is visible in a screenshot or in the markup -- the button looks
   and measures fine. It takes no clicks of its own, so it gives them all back. */
.pp-hand{font-family:'Caveat',cursive;position:absolute;right:36px;bottom:14px;color:var(--tan);font-size:24px;transform:rotate(-6deg);z-index:2;pointer-events:none;text-shadow:0 1px 8px rgba(var(--shadow),.9)}

/* ---------- footer ---------- */
.pp-footer{background:var(--footer);color:var(--on-dark)}
.pp-footer-in{max-width:1180px;margin:0 auto;padding:48px 28px 34px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:36px}
.pp-flogo{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:var(--cream);font-weight:600;margin-bottom:10px;line-height:1.25}
/* Reversed logo. Height-driven like the header mark so a re-upload at a
   different pixel size cannot shift the footer layout. */
.pp-flogo-link{display:inline-block;line-height:0;margin-bottom:12px}
.pp-flogo-img{height:52px;width:auto;max-width:100%;display:block}
.pp-footer p.tag{font-size:13px;line-height:1.7;max-width:230px;margin-bottom:16px}
.pp-fsocial{display:flex;gap:12px}
.pp-fsocial a{width:26px;height:26px;border:1px solid var(--dark-line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pp-fsocial svg{width:11px;height:11px;fill:var(--on-dark)}
/* The footer column headings are h2 now, not h5: an h5 under the pages' h2 sections
   skipped two levels in the outline on every page. The h5 selector is kept so any
   stray one still inherits the same label styling rather than rendering as a heading. */
.pp-footer h5,.pp-footer .pp-footer-title{font-family:var(--serif);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);margin-bottom:14px;font-weight:700;line-height:1.3}
.pp-footer ul{list-style:none}
.pp-footer li{margin-bottom:8px}
.pp-footer li a{font-size:13.5px;transition:.2s}
.pp-footer li a:hover{color:#fff}
.pp-badges .pp-badge{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.pp-badge svg{width:22px;height:22px;stroke:var(--tan);fill:none;stroke-width:1.4;flex:0 0 22px}
.pp-badge b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.pp-badge small{font-size:11.5px;color:var(--on-dark-soft)}
.pp-bottombar{border-top:1px solid var(--dark-line)}
.pp-bottombar-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.06em;color:var(--on-dark-soft)}
.pp-bottombar-in .links a{margin-left:22px}
.pp-bottombar-in .links a:hover{color:#fff}

/* ==========================================================
   WordPress additions
   ========================================================== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--ink);display:block;font-size:12px;height:auto;left:6px;line-height:normal;padding:14px 22px;text-decoration:none;top:6px;width:auto;z-index:100000}

/* Search form on search.php. The site had no search form anywhere; the header
   control was a dead div. Sized to the page wrap rather than the header, so it
   cannot disturb the header's three column grid. */
.pp-searchform{display:flex;gap:10px;align-items:stretch;margin:0 0 26px;max-width:620px}
.pp-searchfield{flex:1 1 auto;min-width:0;padding:12px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:14px}
.pp-searchfield:focus{outline:2px solid var(--olive);outline-offset:1px}
/* .pp-btn is an inline-block sized for links; as a submit it needs to match the
   field's height rather than its own padding, hence align-items:stretch above. */
.pp-searchsubmit{border:0;cursor:pointer;padding:13px 22px}
.pp-searchcount{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}

/* Inner pages */
.pp-pagehead{background:var(--cream2);border-bottom:1px solid var(--line);position:relative}
.pp-pagehead-in{max-width:1180px;margin:0 auto;padding:52px 28px 46px;text-align:center}
.pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.14;color:var(--ink)}
.pp-pagehead .pp-eyebrow{margin-bottom:14px}
.pp-crumbs{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:14px}
.pp-crumbs a:hover{color:var(--olive)}
.pp-page{padding:52px 0 64px}
.pp-page-grid{max-width:780px;margin:0 auto}
.page-content{font-size:17px;line-height:1.8;color:var(--text)}
.page-content h2{font-family:var(--serif);font-size:29px;font-weight:600;color:var(--ink);line-height:1.2;margin:36px 0 14px}
.page-content h3{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink);line-height:1.25;margin:28px 0 12px}
.page-content h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700;margin:24px 0 10px}
/* THE MEASURE. .pp-page-grid is 780px, and at the body's 17px that resolved to
   91 characters a line -- measured, not estimated, by rendering a known string
   and dividing. Comfortable running text is 45-75; 91 is a real cost on pages
   that run to 6,000 words and 16,500 pixels of scroll.

   Capped on the PROSE only. Tables, images and the FAQ accordions keep the full
   780px, because a table squeezed to a reading measure starts wrapping cells and
   a wide photograph is the thing that breaks up the scroll. The slight rag that
   leaves on the right of a table is deliberate, and is the usual editorial
   treatment for long-form with data in it.

   NOT expressed in `ch`. The ch unit is the advance width of the digit "0", and
   in this face at 17px that measures 11.35px -- so an apparently tight
   `max-width:68ch` computed to 772px and left the line at 90 characters,
   constraining nothing at all. So the cap is stated in pixels.

   The figure to trust is chars-per-line measured as (paragraph height /
   line-height), not a width divided by an estimated character width: measuring
   each paragraph's own text gives 7.6-7.9px an average character at 17px, not
   the 8.6 a lowercase-alphabet probe suggests. At 620px that puts these pages at
   70-78 characters a line, which is where they should be. Widening the prose
   would push them past it. */
.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote{max-width:620px}
.page-content p{margin-bottom:18px}
.page-content ul,.page-content ol{margin:0 0 18px 20px}
.page-content li{margin-bottom:9px}
.page-content a{color:var(--olive);border-bottom:1px solid var(--tan)}
.page-content a:hover{color:var(--olive-dark)}
.page-content blockquote{border-left:3px solid var(--gold);padding-left:18px;margin:0 0 20px;font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink)}
.page-content img{border-radius:4px;margin:8px 0 18px}
.page-content table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15px}
.page-content th,.page-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.page-content th{background:var(--cream2);color:var(--ink);font-weight:600}
.pp-featimg{border-radius:4px;overflow:hidden;margin-bottom:26px;border:1px solid var(--line)}
.pp-postmeta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:12px}
.pp-postnav{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.pp-postnav a:hover{color:var(--olive)}
.pp-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* --- Safari Journal ------------------------------------------------------
   The journal shows up to 100 cards on one page, so the grid has to stay
   readable at length rather than look good for six. Taller images than the
   generic .pp-post (110px) because a journal card is the article's only
   shopfront; a standfirst under the title for the same reason. Scoped to
   .pp-journal-grid so search results and category archives, which share
   .pp-post, are untouched. */
.pp-journal-intro{margin:0 0 34px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.pp-journal-intro p{max-width:620px}
.pp-journal-intro p:last-child{margin-bottom:0}
.pp-journal-grid{gap:22px}
.pp-journal-grid .pp-post{display:flex;flex-direction:column}
.pp-journal-grid .pp-post-img{height:172px}
.pp-journal-grid .pp-post-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 18px}
.pp-journal-grid .pp-post b{font-size:15.5px;line-height:1.35;min-height:0;margin-bottom:8px}
.pp-post-excerpt{display:block;font-size:13px;line-height:1.55;color:var(--text);flex:1}
.pp-journal-grid .pp-post small{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:1023px){.pp-journal-grid .pp-post-img{height:150px}}
@media(max-width:560px){
  .pp-journal-intro{margin-bottom:26px;padding-bottom:20px}
  .pp-journal-grid .pp-post-img{height:180px}
}

.pp-pagination{margin-top:34px;text-align:center;font-size:12.5px;letter-spacing:.1em}
.pp-pagination .page-numbers{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:3px;margin:0 3px;background:var(--paper);color:var(--ink)}
.pp-pagination .page-numbers.current,.pp-pagination .page-numbers:hover{background:var(--olive);color:#fff;border-color:var(--olive)}

/* ---------- hamburger + mobile drawer ---------- */
.pp-burger{display:none;width:34px;height:30px;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:transparent;border-radius:3px;padding:0;flex:0 0 34px}

/* ---------- tap targets for the header controls ----------
   At 320px the account and saved icons measure 15x15 (their .pp-lbl text is
   hidden at <=560px) and the burger 34x30, all well under the ~44px floor.
   The boxes are left exactly where they are -- the header grid has little
   slack at 320px and resizing them shifts the icons -- and the hit area is
   extended with a transparent ::after instead. The widths below are chosen
   so the three zones abut without overlapping, which would be worse than a
   small target: acct 206.5-232.5, cart 233.5-259.5, burger 261-305. */
@media(max-width:820px){
  .pp-header-right .pp-acct,.pp-header-right .pp-cart{position:relative}
  .pp-header-right .pp-acct::after,.pp-header-right .pp-cart::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:100%;min-width:26px;height:44px;
  }
  .pp-burger{position:relative}
  .pp-burger::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;
  }
}
.pp-burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.pp-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pp-burger.is-open span:nth-child(2){opacity:0}
.pp-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* desktop dropdowns (only appear if a menu has children) */
.pp-nav li{position:relative}
.pp-nav .sub-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:190px;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:0 10px 24px rgba(var(--shadow),.16);padding:8px 0;margin:0;z-index:120;flex-direction:column;justify-content:flex-start;gap:0;max-width:none}
.pp-nav li:hover>.sub-menu,.pp-nav li:focus-within>.sub-menu{display:flex}
.pp-nav .sub-menu li{width:100%}
/* nowrap, and the panel sizes to its widest label. Without it the 190px
   min-width is also the MAX width, and seven of the twenty-five rows broke
   mid-name -- "Lake Manyara National / Park". Measured after: every row is a
   single line box and the pitch is a uniform 32.98px, which is what the tap
   target note for #12 assumes. Widest panel is 245px; at 830px, the narrowest
   width where dropdowns are used at all, none reaches the viewport edge. */
.pp-nav .sub-menu a{display:block;padding:7px 16px;border-bottom:none;letter-spacing:.1em;white-space:nowrap}

/* ==========================================================
   Marketplace components.

   Added when the home page was reframed from "we run safaris"
   to "we list safaris other people run". Everything below
   reuses the existing tokens - no new colours, no new fonts.
   ========================================================== */

/* ---------- hero: secondary action + the honesty line ---------- */
.pp-hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pp-hero-link{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px;transition:.2s}
.pp-hero-link:hover{color:var(--olive)}
/* The "we do not sell or book these trips" line. Deliberately quiet but
   present in the first screen - it is the single most load-bearing sentence
   on the page, so it is not allowed to drop below 12.5px. */
.pp-hero-note{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:400px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}

/* ---------- safari finder ---------- */
/* The finder as it appears inside the hero: its own paper panel, because the
   hero background is a photograph and the wash alone cannot be relied on to keep
   select controls legible at every viewport width. Two columns, so three selects
   and the button land as a tidy 2x2 rather than a cramped 4-up. */
.pp-hero-finder{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--olive);border-radius:4px;padding:16px 18px 17px;box-shadow:0 6px 20px rgba(var(--shadow),.09);max-width:560px}
.pp-hero-finder .pp-finder-form{grid-template-columns:1fr 1fr;gap:12px}
.pp-hero-finder .pp-finder-action{align-items:end}
.pp-hero-finder .pp-finder-submit{width:100%;justify-content:center}
.pp-finder{padding:30px 0 6px}
.pp-finder-box{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--olive);border-radius:4px;padding:22px 24px 20px;box-shadow:0 6px 20px rgba(var(--shadow),.07)}
.pp-finder-head{margin-bottom:16px}
.pp-finder-title{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:700}
.pp-finder-sub{font-size:13.5px;color:var(--text);margin-top:6px;max-width:640px}
.pp-finder-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:end}
.pp-finder-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-finder-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
/* min-height, not a hit zone: a <select> is a replaced element and renders no
   ::before/::after at all, and laying a transparent box over one would stop the
   native picker opening. This control has to grow or stay broken. It was 41.2
   tall, so 44 costs 2.8px -- the only measurable layout movement in this whole
   pass, and it is inside a form panel with nothing pinned to its bottom edge.
   The arrow's background-position of 19px from the top is left alone: it now
   lands 19.5px from centre in a 44px box, i.e. very slightly closer to centred
   than it was before. */
.pp-finder-select{width:100%;min-height:44px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;padding:11px 12px;line-height:1.3;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--olive) 50%),linear-gradient(135deg,var(--olive) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.pp-finder-select:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
.pp-finder-action{display:flex}
.pp-finder-submit{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;white-space:nowrap}
.pp-finder-submit svg{width:15px;height:15px;flex:0 0 15px}
.pp-finder-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pp-finder-chips-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:2px}
.pp-finder-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:.2s}
.pp-finder-chip span{font-size:11px;color:#fff;background:var(--olive);border-radius:999px;padding:1px 7px;font-weight:700}
.pp-finder-chip:hover{border-color:var(--olive);background:#fff}

/* ---------- real safari cards ---------- */
/* .pp-product / .pp-mini became links when the invented packages were
   replaced by real listings; they keep the card look and gain a focus ring. */
.pp-product,.pp-mini{display:block}
.pp-product:focus-visible,.pp-mini:focus-visible,.pp-finder-chip:focus-visible,.pp-hero-link:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.pp-product b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-mini b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-product-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.pp-product-by{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.pp-empty{grid-column:1/-1;font-size:14px;color:var(--muted);text-align:center;padding:26px 0}
/* the duration chip reuses the old "New" badge slot */
.pp-new-badge{white-space:nowrap}

/* ---------- operator list ---------- */
.pp-oplist-intro{font-size:13.5px;color:var(--text);margin-bottom:14px}
.pp-oplist{list-style:none;border-top:1px solid var(--line)}
.pp-oplist li{border-bottom:1px solid var(--line)}
/* 43.1 tall, i.e. nine tenths of a pixel short of the floor. Grown rather than
   given a hit zone because these rows abut (the 1px rule between them is the
   whole border), so a 44px zone would overlap its neighbour on both sides and
   the row above would start taking taps meant for the row below. min-height
   costs 0.9px per row and cannot overlap anything. */
.pp-oplist a{display:block;min-height:44px;padding:10px 0;font-size:14px;color:var(--ink);font-weight:600;transition:.2s}
.pp-oplist a:hover{color:var(--olive);padding-left:6px}

/* ---------- closing band ---------- */
.pp-band-action{margin-left:auto}
.pp-band-action .pp-btn{white-space:nowrap}
.pp-band-ic svg circle{fill:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .pp-featured-grid{grid-template-columns:1fr}
  .pp-featured-left{grid-column:auto}
  .pp-promo{grid-column:auto;grid-row:auto;min-height:280px}
  .pp-triple-grid{grid-template-columns:1fr 1fr}
  .pp-minis{grid-column:1/-1}
  .pp-lower-grid{grid-template-columns:1fr}
  .pp-archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* two-up, then the button spanning the row: a 4-track search bar squeezes
     the selects below a usable width well before the 820px breakpoint. */
  .pp-finder-form{grid-template-columns:1fr 1fr}
  .pp-finder-action{grid-column:1/-1}
  .pp-finder-submit{width:100%;justify-content:center}
}
@media(max-width:820px){
  .pp-cats-grid{grid-template-columns:repeat(3,1fr)}
  .pp-band-action{margin-left:0;width:100%}
  .pp-featured-left{grid-template-columns:repeat(2,1fr)}
  .pp-organize-in{grid-template-columns:1fr}
  .pp-steps{grid-template-columns:repeat(2,1fr)}
  /* minmax(0,1fr) lets the logo track shrink; a bare 1fr has min-width:auto
     and refuses to go below the nowrap logo width, pushing the header
     utilities (and the hamburger) off-screen. */
  .pp-header-in{grid-template-columns:auto minmax(0,1fr) auto}
  .pp-nav ul{flex-wrap:wrap;gap:16px}
  .pp-triple-grid{grid-template-columns:1fr}
  .pp-posts{grid-template-columns:1fr}
  .pp-band-in{flex-wrap:wrap}
  .pp-band .pp-field{margin-left:0;min-width:0;width:100%}
  .pp-footer-in{grid-template-columns:1fr 1fr}
  .pp-hero h1,.pp-hero h2{font-size:34px}
  .pp-archive-grid{grid-template-columns:1fr}
  .pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-size:32px}

  /* --- mobile nav: sticky header + hamburger drawer --- */
  .pp-header{position:sticky;top:0;z-index:100}
  .pp-logo h1,.pp-logo .pp-logo-title{font-size:22px;letter-spacing:.12em}
  .pp-logo .custom-logo{height:44px}
  .pp-burger{display:flex}
  .pp-header-right{--hr-gap:16px}
  .pp-nav{position:static}
  .pp-nav ul.pp-nav-list{display:none}
  .pp-nav ul.pp-nav-list.open{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:var(--navbar-h);
    left:0;right:0;bottom:0;
    width:100%;
    max-width:none;
    margin:0;
    height:calc(100vh - var(--navbar-h));
    height:calc(100dvh - var(--navbar-h));
    max-height:calc(100vh - var(--navbar-h));
    max-height:calc(100dvh - var(--navbar-h));
    background:var(--paper);
    border-top:1px solid var(--line);
    z-index:90;
    padding:14px 24px 96px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .pp-nav ul.pp-nav-list.open>li{width:100%;border-bottom:1px solid var(--line);position:static}
  .pp-nav ul.pp-nav-list.open>li:last-child{border-bottom:none}
  .pp-nav ul.pp-nav-list.open a{display:block;padding:16px 2px;font-size:13.5px;letter-spacing:.18em;border-bottom:none}
  .pp-nav ul.pp-nav-list.open>li>a{color:var(--ink)}
  .pp-nav ul.pp-nav-list.open .current-menu-item>a,
  .pp-nav ul.pp-nav-list.open .current_page_item>a{color:var(--olive)}
  /* sub-menus: always visible inside the drawer (no :hover on touch) */
  .pp-nav ul.pp-nav-list.open .sub-menu{
    display:block!important;
    position:static;
    transform:none;
    visibility:visible;
    opacity:1;
    background:rgba(18,85,75,.06);
    border:none;
    border-left:2px solid var(--gold);
    box-shadow:none;
    min-width:0;
    margin:0 0 10px 4px;
    padding:2px 0 2px 12px;
  }
  .pp-nav ul.pp-nav-list.open .sub-menu a{padding:12px 2px;font-size:12.5px;color:var(--text)}
  html.nav-open,body.nav-open{overflow:hidden!important;height:100%;touch-action:none}
}
@media(max-width:782px){
  body.admin-bar .pp-header{top:46px}
}
@media(max-width:560px){
  .pp-cats-grid{grid-template-columns:repeat(2,1fr)}
  .pp-finder{padding:22px 0 4px}
  .pp-finder-box{padding:18px 16px 16px}
  .pp-finder-form{grid-template-columns:1fr}
  .pp-hero-finder{padding:14px 14px 15px;max-width:none}
  .pp-hero-finder .pp-finder-form{grid-template-columns:1fr}
  .pp-hero-actions{gap:14px}
  .pp-hero-note,.pp-hero p{max-width:none}
  .pp-featured-left{grid-template-columns:1fr}
  .pp-minis{grid-template-columns:repeat(2,1fr)}
  .pp-steps{grid-template-columns:1fr}
  .pp-footer-in{grid-template-columns:1fr}
  .pp-flogo-img{height:42px}
  .pp-topbar-in{justify-content:center}
  .pp-lbl{display:none}
  /* Hiding .pp-lbl collapses .pp-search to its 15x15 icon. The account, saved
     and burger controls were given a 44px ::after hit area for exactly this
     reason and .pp-search was missed, because it sits outside .pp-header-right
     and the rule up at line 453 is scoped to that container. A grid scan with
     elementFromPoint measured its effective hit area as 15x15 -- the only
     control on the page with no expansion at all. */
  .pp-search{position:relative}
  .pp-search::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;
  }
  .pp-logo h1,.pp-logo .pp-logo-title{font-size:17px;letter-spacing:.08em;white-space:normal}
  /* The mark is 640x178, 3.598:1, so at 34px tall it is ~122px wide. Measured at
     375px: it spans x 90-212, the search icon ends at 35 and the burger starts at
     321, so it clears both by 55px and 109px. The figures here were 1302x340 and
     ~130px, from the logo this replaced; the conclusion held, the numbers did not. */
  .pp-logo .custom-logo{height:34px}
  .pp-logo-sub{letter-spacing:.2em}
  .pp-header-right{--hr-gap:12px}
  .pp-header-in{padding:14px 20px 10px}
  .pp-wrap{padding:0 20px}
  .pp-hero h1,.pp-hero h2{font-size:29px}
  .pp-hero-in{padding:40px 20px 58px;min-height:0}
  /* the hero copy spans almost the full width on a phone, so carry the cream
     scrim further across than the desktop 75% stop or the text sits on photo */
  .pp-hero-img::after{background:linear-gradient(90deg,rgba(var(--cream-rgb),.97) 0%,rgba(var(--cream-rgb),.93) 45%,rgba(var(--cream-rgb),.72) 78%,rgba(var(--cream-rgb),.3) 100%)}
  .pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-size:26px}
  .pp-bottombar-in{flex-direction:column;gap:8px;text-align:center}
  .pp-bottombar-in .links a{margin:0 10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pp-track{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================
   Operator entry points (nav agent, v1.3.0)

   The marketplace recruits the tour companies whose safaris it
   lists, and until now nothing on the front end linked to that
   side of the site. Two entry points, both deliberately worded
   for operators rather than travellers:

   .pp-oplink  - announcement bar, every page, above the logo
   .pp-fop     - footer, sharing the fifth grid column with the
                 trust badges (adding a sixth child to the
                 five-track .pp-footer-in grid would wrap)

   Colours are existing tokens only: --tan on --footer is the
   same pairing the footer headings already use.
   ========================================================== */

/* the announcement bar splits into messages | (operator CTA + social) */
.pp-topbar-right{display:flex;align-items:center;gap:18px;flex:0 0 auto}

.pp-oplink{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid var(--dark-line);border-radius:999px;
  padding:4px 13px;line-height:1.4;transition:.2s;
}
.pp-oplink:hover,.pp-oplink:focus-visible{border-color:var(--tan);background:rgba(226,186,117,.12)}
/* lower case and unspaced on purpose: it has to read as a question addressed
   to a different visitor, not as another item of tracking-spaced nav chrome */
.pp-oplink-eyebrow{font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--on-dark-soft)}
.pp-oplink-cta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--tan)}
.pp-oplink:hover .pp-oplink-cta{color:#fff}

/* the account control, matching the .pp-cart utility beside it */
.pp-header-right .pp-acct{display:flex;align-items:center;gap:7px}

/* ---------- footer: for tour operators ---------- */
.pp-fop{margin-top:26px;padding-top:22px;border-top:1px solid var(--dark-line)}
.pp-fop-note{font-size:12.5px;line-height:1.6;color:var(--on-dark-soft);margin-bottom:13px}
/* two class selectors so the generic .pp-footer li a rules below it do not win */
.pp-footer .pp-fop-cta{
  display:inline-block;border:1px solid var(--tan);color:var(--tan);
  border-radius:999px;padding:7px 15px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:.2s;
}
.pp-footer .pp-fop-cta:hover{background:var(--tan);color:var(--footer)}

@media(max-width:560px){
  /* the bar centres and wraps at this width; give the operator CTA its own
     full-width row rather than letting it share one with the messages */
  .pp-topbar-in{flex-wrap:wrap;row-gap:9px}
  .pp-topbar-msgs{flex:1 1 100%;justify-content:center;gap:14px}
  .pp-topbar-right{flex:1 1 100%;justify-content:center}
  /* .pp-lbl is hidden at this width, so the utilities are icon-only and the
     operator CTA is the only text in the header that is not the logo */
  .pp-oplink{padding:5px 15px}
}

/* Activity links in the triple section. Shares .pp-oplist's list styling; the
   count sits right-aligned so the names stay scannable as a column. */
.pp-actlist li a{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pp-actcount{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}

/* ---------- Browse By Activity: gateway to /things-to-do/ ----------
   The column leads with a card pointing at the activities page, because that
   page is the fuller resource, and then offers the busiest activity archives
   under the same group headings that page uses. Chips rather than another
   bordered list: the operator column beside it and the destinations block above
   it are both stacked lists, and a third one made the row read as one texture.

   The .pp-actlist rules above are what the flat list used and are left in place
   for any template still calling for them. */
.pp-ttd-card{position:relative;display:block;background:var(--paper);border:1px solid var(--cream2);border-left:3px solid var(--olive);border-radius:3px;padding:15px 50px 16px 17px;color:var(--ink);transition:.2s}
.pp-ttd-card:hover{background:var(--cream2);border-left-color:var(--olive-dark);box-shadow:0 6px 16px rgba(var(--shadow),.10)}
.pp-ttd-kicker{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);margin-bottom:5px}
.pp-ttd-title{display:block;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.14;color:var(--ink)}
.pp-ttd-meta{display:block;font-size:12.5px;line-height:1.5;color:var(--text);margin-top:6px}
.pp-ttd-go{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--olive);transition:.2s}
.pp-ttd-card:hover .pp-ttd-go{background:var(--olive);border-color:var(--olive);color:var(--cream)}

.pp-actlead{font-size:12.5px;line-height:1.55;color:var(--muted);margin:15px 0 11px}

.pp-actgroups{list-style:none;margin:0;padding:0}
.pp-actgroup{padding:9px 0;border-top:1px solid var(--line)}
.pp-actgroup:last-child{border-bottom:1px solid var(--line)}
.pp-actgroup-label{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:7px}
/* Two gap axes, named, because the hit zone at the foot of this file is sized
   from them. The column gap stays at the original 6px. The ROW gap is 17px so
   that a wrapped chip row has a 44.9px pitch (27.9 chip + 17), which is what
   lets each chip carry a 44px-tall zone without overlapping the chip above it.
   It is inert on a single row, so the desktop rendering is unchanged. */
.pp-actchips{--chip-gap-x:6px;--chip-gap-y:17px;display:flex;flex-wrap:wrap;gap:var(--chip-gap-y) var(--chip-gap-x)}
.pp-actchip{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;border:1px solid var(--cream2);border-radius:2px;background:var(--paper);padding:5px 10px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);transition:.2s}
.pp-actchip:hover,.pp-actchip:focus-visible{background:var(--olive);border-color:var(--olive);color:#fff}
.pp-actchip .pp-actcount{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.pp-actchip:hover .pp-actcount,.pp-actchip:focus-visible .pp-actcount{color:var(--tan)}

@media(max-width:560px){
  .pp-ttd-card{padding:14px 44px 15px 15px}
  .pp-ttd-title{font-size:21px}
}

@media(min-width:821px) and (max-width:1080px){
  /* The triple row is 1fr 1fr in this band, so the activity column drops into a
     second row on its own with an empty cell beside it. That was survivable when
     the column was a short list; it is not now that the column carries a card and
     six groups. Give it the whole row and run the groups two up. */
  .pp-actcol{grid-column:1/-1}
  .pp-ttd-card{max-width:560px}
  .pp-actlead{max-width:560px}
  .pp-actgroups{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
  .pp-actgroup{border-top:none;border-bottom:1px solid var(--line)}
  .pp-actgroup:nth-child(1),.pp-actgroup:nth-child(2){border-top:1px solid var(--line)}
  .pp-actgroup:last-child{border-bottom:1px solid var(--line)}
}

/* A page whose content supplies its own <h1> (the planning pillars) gets the
   title rendered in the page head as a plain div, so the H1 in the content is
   the only one on the page. The div is aria-hidden because the real heading is
   a few hundred pixels below it and screen readers should meet it once.
   The content H1 is then hidden visually to avoid printing the title twice. */
.pp-pagetitle--incontent{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.14;color:var(--ink)}
.pp-page-grid > .page-content > h1:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){.pp-pagetitle--incontent{font-size:32px}}
@media (max-width:560px){.pp-pagetitle--incontent{font-size:26px}}

/* ==========================================================================
   Planning hub  (template-planning-hub.php)
   A parent page whose children are the content. The default .pp-page-grid
   column is 780px, which is right for an article and wrong for a directory:
   it buried six guides inside a wall of prose. These rules give the guides a
   full-width band of their own above the text.
   ========================================================================== */

/* ---- hero ---- */
.ugsa-hub-hero{position:relative;min-height:430px;display:flex;align-items:flex-end;background-color:var(--footer);background-size:cover;background-position:center 58%;background-repeat:no-repeat}
.ugsa-hub-hero .pp-wrap{width:100%}
/* the photograph is bright at the top and the type sits at the bottom, so the
   scrim ramps rather than sitting flat, keeping the sky and still clearing AA */
.ugsa-hub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,20,9,.12) 0%,rgba(31,20,9,.48) 52%,rgba(31,20,9,.86) 100%)}
.ugsa-hub-hero--plain{background-image:linear-gradient(140deg,var(--footer) 0%,var(--olive-dark) 100%)}
.ugsa-hub-hero--plain::after{display:none}
.ugsa-hub-hero .pp-wrap{position:relative;z-index:1}
.ugsa-hub-hero-in{padding:104px 0 44px;max-width:760px}
.ugsa-hub-hero .pp-eyebrow{color:var(--tan);margin-bottom:12px}
.ugsa-hub-h1{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.10;color:#fff;margin:0 0 16px}
.ugsa-hub-lede{font-size:18px;line-height:1.66;color:var(--on-dark-strong);margin:0;max-width:60ch}
.ugsa-hub-crumbs{color:var(--on-dark-soft);margin-top:22px}
.ugsa-hub-crumbs a{color:var(--on-dark-soft)}
.ugsa-hub-crumbs a:hover{color:var(--tan)}

/* ---- the guide cards ---- */
.ugsa-hub-guides{background:var(--cream);padding:54px 0 58px;border-bottom:1px solid var(--line)}
.ugsa-hub-h2{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.14;color:var(--ink);margin:0 0 8px}
.ugsa-hub-h2-sub{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 30px;max-width:62ch}
.ugsa-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.ugsa-hub-card{display:flex;flex-direction:column;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;color:var(--ink);transition:transform .22s,box-shadow .22s,border-color .22s}
.ugsa-hub-card:hover,.ugsa-hub-card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(var(--shadow),.15);border-color:var(--rule)}
.ugsa-hub-card:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
/* the card root is an <a>, so every child is a span and needs laying out by hand */
.ugsa-hub-card-img{display:block;width:100%;height:176px;object-fit:cover;background:var(--cream2)}
.ugsa-hub-card-img--none{height:176px}
.ugsa-hub-card-body{display:block;position:relative;flex:1;padding:16px 18px 52px}
.ugsa-hub-card-kicker{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin-bottom:7px}
.ugsa-hub-card-title{display:block;font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.12;color:var(--ink);margin-bottom:9px}
.ugsa-hub-card-blurb{display:block;font-size:14px;line-height:1.62;color:var(--text)}
.ugsa-hub-card-go{position:absolute;left:18px;bottom:16px;width:29px;height:29px;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--olive);transition:.2s}
.ugsa-hub-card:hover .ugsa-hub-card-go{background:var(--olive);border-color:var(--olive);color:var(--cream)}

/* ---- the prose below ---- */
.ugsa-hub-body{background:var(--paper);padding:52px 0 64px}
.ugsa-hub-prose{max-width:780px;margin:0 auto}
.ugsa-hub-prose > h2:first-child{margin-top:0}

/* ---- the three-step strip ---- */
.ugsa-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 8px}
.ugsa-step{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;padding:16px 18px 18px}
.ugsa-step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--olive);color:var(--cream);font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:10px}
.page-content .ugsa-step h3{font-size:20px;margin:0 0 7px}
.page-content .ugsa-step p{font-size:14.5px;line-height:1.62;margin:0}

/* ---- the marketplace mechanics panel ---- */
.ugsa-panel{background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:28px 30px;margin:44px 0 0}
.page-content .ugsa-panel h2{font-size:28px;margin:0 0 6px}
.page-content .ugsa-panel h3{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--olive);margin:22px 0 7px}
.page-content .ugsa-panel p{font-size:15px;line-height:1.72;margin-bottom:12px}
.page-content .ugsa-panel p:last-child{margin-bottom:0}

/* ---- responsive ---- */
@media (max-width:1000px){
  .ugsa-hub-grid{grid-template-columns:repeat(2,1fr)}
  .ugsa-hub-h1{font-size:39px}
  .ugsa-hub-hero-in{padding:88px 0 40px}
}
@media (max-width:900px){
  /* three 220px columns at tablet width wrapped every step heading to three
     lines; stacking reads as the sequence it is */
  .ugsa-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ugsa-hub-h2{font-size:28px}
}
@media (max-width:620px){
  .ugsa-hub-grid{grid-template-columns:1fr}
  .ugsa-hub-h1{font-size:29px}
  .ugsa-hub-lede{font-size:16.5px}
  .ugsa-hub-hero-in{padding:64px 0 32px}
  .ugsa-hub-hero{min-height:340px}
  .ugsa-hub-guides{padding:40px 0 44px}
  .ugsa-hub-card-img,.ugsa-hub-card-img--none{height:196px}
  .ugsa-panel{padding:22px 20px}
}

/* ---------- tap targets for the footer icons and the gallery arrows ----------
   Same case as the header controls above: the visible box stays where it is
   and a transparent ::after carries the hit area.

   #7 The footer icons are 26x26 on a 38px pitch (26 plus a 12px gap), so a
   44px zone would overlap its neighbour and the wrong icon would take the tap.
   The trade-off taken: below 820px the gap widens to 18px, which puts the
   pitch at exactly 44 and lets the four zones abut without overlapping. That
   moves the three right-hand icons right by up to 18px inside the footer's
   first column, which is 319px wide at 375px and carries nothing else on that
   row, so no other element moves. Above 820px the gap is left at 12px and the
   zone is capped at that 38px pitch, so the desktop footer is byte-identical:
   38 wide rather than 44, but 44 tall and still guaranteed not to steal a
   neighbour's tap. The zone width is derived from the same custom property as
   the gap, so the two cannot drift apart.

   #8 The gallery arrows are 30x30 and already position:absolute, so a 44x44
   zone costs no layout whatever. At 320px the prev zone reaches x=1 and the
   next zone x=319, both inside the viewport, so nothing overflows the page.
   The extra area sits over .pp-shot tiles, which are inert divs, so no link
   loses a click. */
.pp-fsocial{--fsoc-gap:12px;gap:var(--fsoc-gap)}
.pp-fsocial a{position:relative}
.pp-fsocial a::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + var(--fsoc-gap));height:44px}
@media(max-width:820px){.pp-fsocial{--fsoc-gap:18px}}
.pp-arrow::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}

/* ---------- tap targets, part two: the rest of the home page ----------

   Same rule as #7/#8 above. A control that has room grows; a control whose
   growth would move its neighbours keeps its box and gets a transparent,
   absolutely-positioned ::after, which is outside flow and therefore cannot
   shift anything. Every zone below was verified with document.elementFromPoint
   at its four corners and its centre, at 320/375/414/768/1024/1280/1440, which
   is the only check that catches all three failure modes at once: a zone
   clipped dead by an ancestor's overflow, two zones overlapping so the wrong
   control answers, and a zone spreading over a card and swallowing its link.

   Every zone that abuts a sibling derives its size from the same custom
   property as the gap between them, so the two cannot drift apart later.

   #9  .pp-oplink -- the announcement-bar operator CTA, 24.3px tall.
       Capped at 38px, not 44, and the cap is the interesting part. The bar is
       38.3px tall in total; a 44px zone has to leave it at one end or the
       other. Upwards is the top of the document, so those pixels do not exist.
       Downwards is under .pp-header, which below 820px is position:sticky with
       z-index:100 and therefore paints over anything the static bar puts there
       -- the zone would be present in the markup, correct in the computed
       styles, and dead to the touch. 38px is the honest number at those
       widths. Above 820px the header is static and the positioned ::after
       paints above it, so the zone is anchored to the pill's top edge and gets
       its full 44. Below 560px the bar wraps and the pill has its own row, so
       the zone grows upwards into the 9px row gap instead and also reaches 44.
   #10 .pp-logo-title a -- the wordmark home link, 20px tall on one line.
       This one was worse than short: at 320px the lockup wraps to two lines,
       the link's border box becomes the union of both line boxes, and its
       CENTRE falls in the leading between them, which belongs to the parent
       div. elementFromPoint at the middle of the site logo returned the div,
       not the link. max(100%,44px) covers the union, so the gap between the
       lines becomes live as well.
   #11 .pp-acct / .pp-cart -- the zone that already existed below 820px now
       applies at every width, because at 1024px and up the labels are visible
       and the controls are still only 19px tall. Width tracks --hr-gap so the
       two zones abut exactly and never overlap, at any of the three gaps.
   #12 .pp-nav > ul > li > a -- desktop nav, 20px tall. 44px vertically fits
       inside the nav band's own padding with 10px to spare at the top, where
       there is nothing but header padding, and 2px at the bottom, so the zone
       never reaches the hero. Width tracks the 34px flex gap. Scoped to
       top-level items on purpose: .sub-menu rows sit on a 33px pitch with no
       gap at all, so a 44px zone there WOULD overlap. THE MENU NOW HAS
       CHILDREN -- 25 of them, added when the primary nav was rebuilt for
       Tanzania -- so the warning that used to sit here has been acted on and
       replaced by a measurement. The pitch was NOT opened up and this selector
       was NOT widened, because neither is needed: each row measures 32.98px
       and is live to itself at its top edge, its centre and its bottom edge
       (probed with elementFromPoint, not with a rect), with no overlap between
       neighbours. 33px clears the WCAG 2.5.8 AA minimum of 24px. Widening the
       zone to 44px is what would BREAK it, by making adjacent rows overlap by
       11px -- the "wrong control receives the tap" failure. Not applied below
       820px -- the drawer's own links are already 54px block rows, and the
       sub-menu rows inside the open drawer measure 44.63px.
   #13 .pp-finder-submit, .pp-promo .pp-btn, .pp-ghost -- 39, 41 and 37.8px.
       All three are buttons or button-shaped links whose height is part of the
       design; growing them changes visual weight, and .pp-promo .pp-btn sits in
       a flex column where growing it moves the promo's whole stack. The zone
       adds 2.5, 1.5 and 3.1px per side respectively, all of which land in
       existing margins. .pp-promo has overflow:hidden but the zone stays well
       inside it, and the button's own z-index:1 keeps it above .pp-promo::after
       (the rotated photo) so nothing steals the tap back.
   #14 .pp-actchip -- 27.9px. Growing the chips to 44 would turn a row of
       quiet labels into a row of pills; the zone keeps the look. Sized from
       --chip-gap-x/--chip-gap-y, which is why the row gap was opened to 17px:
       at the original 6px the pitch of a wrapped row was 33.9px and a 44px
       zone would have overlapped the row above by 10px, which is precisely the
       "wrong control receives the tap" failure. Single-row layouts (desktop)
       are unaffected by a row gap, so nothing moves there.
   #15 .pp-viewall -- 16.4px, and it wears its underline as a border-bottom
       with a 2px padding, so ANY vertical padding would visibly drop the rule
       away from the text. Zone only. Clearance measured: 9px to the operator
       list above it, 4px to the journal cards below it.
   #16 .pp-bottombar-in .links a -- 14.4px. On one row the zone is width plus
       the 22px margin, so the two policy links abut without overlapping; the
       copyright beside them is not a link. Stacked (below 560px) the pitch is
       only 27px, far too tight for two 44px zones, so there the links become
       44px block rows instead and the column gap is closed to compensate.
   #17 .pp-footer .footer-menu li a -- 16.8px on a 34.4px pitch. Nothing here
       can reach 44 without spreading the column, so this one is split by
       width. Below 820px, where the footer has already collapsed to one or two
       columns and the rows are the layout, each link becomes a 44px flex row
       and the li margin is removed, which leaves the pitch at exactly 44: the
       rows abut, nothing overlaps, and the column grows 9.6px per link. Above
       820px the five-column footer has no such room and the desktop rendering
       is left byte-identical, which is the constraint this pass is under.
       These stay under 44 at desktop widths and that is a deliberate,
       recorded trade-off, not an oversight.
   #18 .pp-fop-cta -- the bordered operator pill, 32.9px. Zone rather than
       padding so the pill keeps its proportions, and only below 820px: at
       desktop the link under it sits on a 38.5px pitch, so a 44px zone here
       would overlap that link's row by 1.5px. Below 820px the li keeps its 8px
       margin (the rule in #17 that removes it is scoped to .footer-col), which
       leaves 2.4px of clearance between this zone and the 44px row beneath.
   ---------------------------------------------------------------------- */

/* #9 */
.pp-oplink{position:relative}
.pp-oplink::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:38px}
@media(min-width:821px){
  .pp-oplink::after{top:0;bottom:auto;transform:none;height:44px}
}
@media(max-width:560px){
  .pp-oplink::after{top:auto;bottom:0;transform:none;height:44px}
}

/* #10 */
.pp-logo .pp-logo-title a,.pp-logo h1 a{position:relative}
.pp-logo .pp-logo-title a::after,.pp-logo h1 a::after{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;height:max(100%,44px);
}

/* #11 -- supersedes the max-width:820px pair further up; same idea, every width */
.pp-header-right .pp-acct,.pp-header-right .pp-cart{position:relative}
.pp-header-right .pp-acct::after,.pp-header-right .pp-cart::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% + var(--hr-gap));height:44px;
}

/* #12 */
@media(min-width:821px){
  .pp-nav>ul{--nav-gap:34px;gap:var(--nav-gap)}
  .pp-nav>ul>li>a{position:relative}
  .pp-nav>ul>li>a::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:calc(100% + var(--nav-gap));height:44px;
  }
}

/* #13 */
.pp-finder-submit,.pp-promo .pp-btn,.pp-ghost{position:relative}
.pp-finder-submit::after,.pp-promo .pp-btn::after,.pp-ghost::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:44px;
}

/* #14
   Written as negative insets, not as width/height:100% plus the gap, because
   100% on an absolutely-positioned child resolves against its containing
   block's PADDING box. The chip has a 1px border, so the obvious spelling
   silently lost 2px in each axis and produced a 43.25px zone where 44.85 was
   intended -- under the floor, and invisible in the markup and in the rule.
   The extra 1px per side here is that border, which is why the zone still
   stops exactly half a gap beyond the chip's border box and abuts its
   neighbour rather than overlapping it. */
.pp-actchip{position:relative}
.pp-actchip::after{
  content:"";position:absolute;
  top:calc(var(--chip-gap-y) / -2 - 1px);bottom:calc(var(--chip-gap-y) / -2 - 1px);
  left:calc(var(--chip-gap-x) / -2 - 1px);right:calc(var(--chip-gap-x) / -2 - 1px);
}

/* #15 */
.pp-viewall{position:relative}
.pp-viewall::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:44px;
}

/* #16 */
.pp-bottombar-in .links a{position:relative}
.pp-bottombar-in .links a::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% + 22px);height:44px;
}
@media(max-width:560px){
  .pp-bottombar-in{gap:0}
  .pp-bottombar-in .links a{display:flex;align-items:center;justify-content:center;min-height:44px}
  .pp-bottombar-in .links a::after{content:none}
}

/* #17 + #18 */
@media(max-width:820px){
  .pp-footer .footer-col .footer-menu li{margin-bottom:0}
  .pp-footer .footer-menu li>a:not(.pp-fop-cta){display:flex;align-items:center;min-height:44px}
  .pp-footer .pp-fop-cta{position:relative}
  .pp-footer .pp-fop-cta::after{
    content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;
  }
}

/* ==========================================================================
   Destination guides  (pp-page--dguide: the 111 children of /destinations/)

   Measured on /destinations/mount-kilimanjaro/ at 1440px BEFORE this block:
   .pp-wrap 1180, .pp-page-grid 780, prose 620, no image anywhere above the
   fold, and a 3-up safari card grid and an 11-item attraction directory both
   squeezed into 780px and dropping to two columns. 660px of the viewport went
   unused on a page that has a photograph, a 1,865-word article and eleven
   child attractions to show.

   THE MEASURE IS NOT THE PROBLEM AND IS NOT CHANGED. The 620px cap resolves
   to 70-78 characters a rendered line here -- measured by putting each
   paragraph's own text in an unwrapped span, dividing by its length (7.6-7.9px
   an average character at 17px, not the 8.6 the note further up this file
   estimated) and counting lines as height/line-height. That is already the top
   of the comfortable 45-75 band, so widening the prose would have made the
   page worse, not better. The viewport is reclaimed by what goes BESIDE and
   BELOW the prose instead: a sticky contents rail, and the two directory
   blocks lifted out of the reading column to the full 1180px.

   Everything here is scoped to .pp-page--dguide, so the pillars, the hub, the
   legal pages and the attraction pages are untouched.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------
   Ratio on the BOX, image at height:100% inside it -- the prescription in the
   blueprint. An intrinsically tall photograph at height:auto is what bursts a
   ratio box open, and these come in every ratio from 0.47 to 2.25. */
.dg-hero{margin:0 0 34px}
.dg-hero-media{aspect-ratio:5/2;overflow:hidden;border-radius:5px;border:1px solid var(--line);background:var(--cream2)}
.dg-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.dg-hero--narrow .dg-hero-media{max-width:var(--dg-hero-max);margin-inline:auto}
.dg-hero-credit{margin:0}
.dg-hero-credit .ato-img-credit{margin:7px 0 0}
/* 16/9 below the desktop letterbox, and NOT taller than that on a phone: at
   375x812 a 4/3 hero measured 251px and put the article's first paragraph at
   y=790, below the fold. At 16/9 it is 188px and the first paragraph is at
   y=727, on screen. */
@media(max-width:1023px){.dg-hero-media{aspect-ratio:16/9}}
@media(max-width:560px){.dg-hero{margin-bottom:24px}}

/* ---- the column that holds it all --------------------------------------
   Widened to the wrap so .dg-blocks can use it. The reading column keeps the
   780px it has always had and is centred inside the wider box, so on a screen
   too narrow for the two-column layout below nothing about the article moves. */
.pp-page--dguide .pp-page-grid{max-width:1180px}
.pp-page--dguide .page-content,
.pp-page--dguide .dg-toc{max-width:780px;margin-left:auto;margin-right:auto}

/* ---- contents rail ------------------------------------------------------
   Below 1180px this is a row of chips above the article. The chips are 36-37px
   tall, which is under the 44px tap target, so each carries an inert ::after
   hit zone that reaches 4px beyond it top and bottom. Row gap is 10px, so the
   PITCH is ~47px and two zones can touch but never overlap -- the same
   relationship .ato-dirlist uses. No ancestor here sets overflow:hidden, which
   would clip the zone and silently kill it. */
.dg-toc{margin:0 0 30px;padding:15px 18px 17px;border:1px solid var(--rule);border-radius:5px;background:var(--cream2)}
.dg-toc-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);margin:0 0 11px}
.dg-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 8px}
.dg-toc-list li{margin:0}
/* overflow-wrap:anywhere so no heading can push a horizontal scrollbar into
   the 296px rail. Nothing across the 786 headings on these 111 pages does
   today; this is what stops the next one. */
.dg-toc-list a{position:relative;display:block;font-size:13.5px;line-height:1.3;color:var(--text);padding:9px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);text-decoration:none;overflow-wrap:anywhere}
.dg-toc-list a::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.dg-toc-list a:hover,.dg-toc-list a:focus{color:var(--olive);border-color:var(--tan)}
/* Not on a phone. Measured at 375px: eight headings of this length wrap to two
   lines each and the rail becomes a 469px block between the photograph and the
   first sentence — 58% of an iPhone X screen spent on a list of the headings
   the reader is about to scroll past anyway. It exists to use horizontal space,
   and at 375px there is none. At 768px it is 243px in four rows and stays. */
@media(max-width:767px){.pp-page--dguide .dg-toc{display:none}}

/* ---- the relocated directory blocks ------------------------------------
   Out of .page-content, so the 620px prose cap no longer reaches their
   paragraphs. Those get their own caps, because a 45-word standfirst set
   across 1180px is 150 characters a line. */
.dg-blocks .ato-guide-children > p{max-width:760px}
.dg-blocks .ato-guide-safaris-intro{max-width:760px}
/* The "no operator lists a safari here yet" panel is one sentence and a
   button, not a grid, so it keeps the width of the reading column and its
   left edge rather than being stretched across the page. 83 of the 111
   guides show this rather than cards. */
.dg-blocks .ato-guide-tomarket{max-width:780px}
/* auto-FILL, not auto-fit. The preview holds up to three cards but often
   holds one, and auto-fit collapses the empty tracks and stretches that one
   card across the whole 1124px. This is the same choice, for the same
   reason, that the activity cards in ato-guides.css already make. */
.dg-blocks .ato-guide-safaris-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* A rail link must not drop its heading under the sticky mobile header, and on
   a wide screen a heading pinned to the very top edge reads as cut off. */
.pp-page--dguide .page-content h2{scroll-margin-top:24px}
@media(max-width:900px){.pp-page--dguide .page-content h2{scroll-margin-top:calc(var(--navbar-h,104px) + 14px)}}

/* ---- two columns -------------------------------------------------------
   1180px is where the wrap (viewport - 56px of padding) first reaches
   1124px = 780 reading column + 48 gap + 296 rail, so the article never has to
   give up a pixel to make room for the rail. Below it, one column.
   align-items:start is what gives position:sticky somewhere to travel: a
   stretched grid item is exactly as tall as its row and can never stick. */
@media(min-width:1180px){
  .pp-page--dguide .pp-page-grid{
    display:grid;
    grid-template-columns:minmax(0,780px) minmax(0,296px);
    column-gap:48px;
    row-gap:0;
    justify-content:space-between;
    align-items:start;
  }
  .pp-page--dguide .page-content{grid-column:1;grid-row:1;margin-left:0;margin-right:0}
  .pp-page--dguide .dg-blocks{grid-column:1 / -1;grid-row:2}
  .pp-page--dguide .dg-toc{
    grid-column:2;grid-row:1;
    max-width:none;margin:0;
    position:sticky;top:26px;
    max-height:calc(100vh - 52px);overflow-y:auto;
    padding:16px 4px 16px 0;
    border:0;border-left:1px solid var(--rule);border-radius:0;background:none;
  }
  .pp-page--dguide .dg-toc-h{padding-left:16px}
  .pp-page--dguide .dg-toc-list{display:block}
  /* A pointer, not a thumb: the chips become rows and the hit zones, which
     exist only for touch, are dropped rather than left overlapping. */
  .pp-page--dguide .dg-toc-list a{
    padding:10px 10px 10px 16px;font-size:14px;line-height:1.35;
    border:0;border-left:2px solid transparent;border-radius:0;background:none;
  }
  .pp-page--dguide .dg-toc-list a::after{content:none}
  .pp-page--dguide .dg-toc-list a:hover,
  .pp-page--dguide .dg-toc-list a:focus{border-left-color:var(--gold);background:var(--cream2)}
}