/* Shared eclipse page refinements, lifted from the Egypt Eclipse reference. */
/* The hero frame IS a totality: near-black sky, lamplit sandstone.
     The shared expedition scrim (.72 → .58) buried it, so this page
     runs a much lighter one and leans on text-shadow for legibility.
     The lower stops stay heavier because the pale horizon gap between
     the pylons sits exactly behind the rates and the buttons. */
  /* Two layers rather than one flat scrim. The ellipse darkens only the
     centre column the copy actually sits in – the corona and the pale
     horizon gap between the pylons both land there, and gold type can
     never clear 4.5:1 against anything brighter than itself. Outside
     that column the photograph stays far lighter than the shared scrim
     left it, which is the point: the frame is already a night shot. */
  body.wpj-expedition #hero .hero-overlay{
    background:
      radial-gradient(ellipse 54% 40% at 50% 15%,
        rgba(6,6,10,.62) 0%,
        rgba(6,6,10,.34) 58%,
        rgba(6,6,10,0) 100%),
      linear-gradient(180deg,
        rgba(10,10,13,.40) 0%,
        rgba(10,10,13,.22) 30%,
        rgba(10,10,13,.36) 58%,
        rgba(11,11,13,.47) 72%,
        rgba(12,12,14,.58) 84%,
        rgba(18,18,19,.88) 96%,
        #1A1A1A 100%);
  }
  /* A square or portrait desktop window centres the photograph (the shared
     rule in wpj-redesign.css), which brings the eclipse back into frame and
     puts the lit face of the pylon behind the subtitle: 3.6:1 on an upright
     Surface, 3.8:1 on an upright iPad Pro. A light band under the copy lifts
     the tightest line there to 5.2:1 and leaves every other shape as it was. */
  @media (min-width:901px) and (max-aspect-ratio:11/10){
    body.wpj-expedition #hero .hero-overlay{
      background:
        linear-gradient(90deg,
          rgba(6,6,10,.30) 0%,
          rgba(6,6,10,.30) calc(6% + 470px),
          rgba(6,6,10,0) calc(6% + 820px)),
        radial-gradient(ellipse 54% 40% at 50% 15%,
          rgba(6,6,10,.62) 0%,
          rgba(6,6,10,.34) 58%,
          rgba(6,6,10,0) 100%),
        linear-gradient(180deg,
          rgba(10,10,13,.40) 0%,
          rgba(10,10,13,.22) 30%,
          rgba(10,10,13,.36) 58%,
          rgba(11,11,13,.47) 72%,
          rgba(12,12,14,.58) 84%,
          rgba(18,18,19,.88) 96%,
          #1A1A1A 100%);
    }
  }

  /* ---- 2. Hero frame --------------------------------------------- */
  /* The base #hero is a fixed 100vh with overflow:hidden; the extra
     rate rows would clip the eyebrow off the top on short screens, so
     let this one grow past the viewport instead of cropping itself. */
  html body.wpj-expedition #hero{height:auto;min-height:calc(100vh - 114px);padding:34px 0 40px}
  /* On a phone the hero takes the same frame as every other expedition
     (css/wpj-redesign.css): the screen below the nav, with 28px above the
     eyebrow and below "We reply within 24 hours". With no padding here the
     reply line sat on the hero's bottom edge, against the next section. The
     hero still grows past the viewport when the rate rows need it. */
  @media (max-width:640px){html body.wpj-expedition #hero{min-height:max(440px,calc(100vh - 106px));padding:28px 0}}
  /* A wider stage so "Totality on the Nile" holds one line on desktop.
     width:100% matters as much as the max-width: #hero is a flex row, so
     without it the content box sizes to its widest child's max-content
     and slides off both edges of a narrow phone. */
  body.wpj-expedition #hero .hero-content{width:100%;max-width:1120px}
  /* Sitewide left-hero pass (Sep 2026): on desktop the stage widens to the
     shared 1440px column and every hero element left-aligns; the hero also
     grows with its content instead of clipping the headline on short
     windows. Phones keep the centered layout above. */
  @media(min-width:901px){
    body.wpj-expedition #hero{height:auto;min-height:max(100vh,760px);padding:150px 0 48px}
    body.wpj-expedition #hero .hero-content{max-width:1440px;padding:36px 6%}
    body.wpj-expedition #hero .ege-meta-row{margin-left:0;justify-content:flex-start}
    body.wpj-expedition #hero .ege-rates{margin-left:0;margin-right:auto}
    body.wpj-expedition #hero .hero-subtitle{max-width:36em}
    body.wpj-expedition #hero .hero-tagline{margin-left:0}
  }

  /* ---- 3. No word gets a line to itself --------------------------- */
  /* The headline carries a   between "the" and "Nile" – that is
     the floor in every browser, balance or no balance: greedy wrapping
     can then only break after "on", never before a lone "Nile". */
  body.wpj-expedition .hero-title{line-height:1.03;margin-bottom:.75rem}
  @media (max-width:359px){body.wpj-expedition .hero-title{font-size:clamp(2.5rem,13vw,3.5rem)}}

  body.wpj-expedition .hero-subtitle{text-wrap:balance;max-width:22em;margin-left:auto;margin-right:auto}
  /* 50px of air around a 1px rule is a lot of a phone hero */
  @media (max-width:560px){
    .wpj-hero-meta::before{margin:18px auto 16px}
    .wpj-hero-meta{margin-bottom:20px}
    body.wpj-expedition #hero .ege-rates{margin-bottom:24px}
    body.wpj-expedition .hero-tagline{margin-top:10px}
  }
  body.wpj-expedition .hero-tagline{text-wrap:balance;max-width:30em;color:rgba(240,234,225,.93)}
  /* on a very wide screen the hero grows past the scrim's falloff and this
     line lands on lit stone – lift the ink rather than dim the photograph */
  body.wpj-expedition .wp-hero-reply{color:rgba(236,230,220,.88)}

  /* The same rule everywhere else on the page. Two tools do the work:
     `balance` evens display type out so a heading cannot drop its last
     word alone, `pretty` pulls a word back up out of a one-word last
     line in running copy. Both degrade to today's behaviour, so the
      s in the markup are the floor where neither is supported. */
  body.wpj-expedition .hero-eyebrow,
  body.wpj-expedition .section-label,
  body.wpj-expedition .section-title,
  body.wpj-expedition .feature-title,
  body.wpj-expedition .day-location,
  body.wpj-expedition .pull-quote blockquote,
  body.wpj-expedition .intro-image-caption,
  body.wpj-expedition .itinerary-header p,
  body.wpj-expedition .faq-header-label,
  body.wpj-expedition .faq-header-title,
  body.wpj-expedition .faq-question,
  body.wpj-expedition .pricing-label,
  body.wpj-expedition .pricing-per,
  body.wpj-expedition .ege-includes-head,
  body.wpj-expedition .ege-includes li,
  body.wpj-expedition .ege-rate-label,
  body.wpj-expedition .security-title,
  body.wpj-expedition .related-card-name,
  body.wpj-expedition .related-card-subtitle,
  body.wpj-expedition .footer-tagline,
  body.wpj-expedition .footer-copy,
  body.wpj-expedition .ege-banner-title{text-wrap:balance}

  body.wpj-expedition .intro-text p,
  body.wpj-expedition .feature-desc,
  body.wpj-expedition .day-desc,
  body.wpj-expedition .detail-value,
  body.wpj-expedition .faq-answer-inner,
  body.wpj-expedition .security-text p,
  body.wpj-expedition .pricing-note,
  body.wpj-expedition .pricing-terms,
  body.wpj-expedition .ege-alt-rate-label{text-wrap:pretty}

  /* The eyebrow and the FAQ kicker are small caps on wide tracking; on
     a narrow phone the tracking alone is what pushes them to a second
     line. Tighten it rather than let them break. */
  @media (max-width:400px){
    body.wpj-expedition .hero-eyebrow{letter-spacing:.19em;font-size:.66rem}
    body.wpj-expedition .faq-header-label{letter-spacing:.14em}
  }

  /* the date must never split across lines ("July 30 – August 8," / "2027") */
  /* .wpj-hero-meta itself has to stay a block: its ::before is the 56px gold
     rule that belongs ABOVE the line, and a flex container would lay that
     rule out beside the facts. So the flex row goes on an inner wrapper.
     The facts are nowrap – "July 30 – August 8, 2027" split mid-date
     otherwise – and since the spans sit tight against each other with no
     whitespace between them, nowrap alone left the line no break
     opportunity at all and ran it off the right edge of a phone. */
  /* The obelisk is a lit vertical column dead-centre of the frame, and on a
     wide screen the facts line lands straight on it – where neither the gold
     day count nor the off-white facts can reach 4.5:1 against stone that
     bright. Rather than crush the whole photograph back down, the row
     carries its own band, feathered at both ends so it reads as shadow
     rather than as a chip. */
  .ege-meta-row{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
    width:fit-content;max-width:100%;margin:0 auto;padding:7px 32px;
    /* The feather is a fixed length, not a percentage: as a percentage it
       scaled with the row, and on a wide screen the leading "10 DAYS" ended
       up inside the fade with almost no cover under it. */
    background:linear-gradient(90deg,
      rgba(8,8,11,0) 0,
      rgba(8,8,11,.68) 28px,
      rgba(8,8,11,.68) calc(100% - 28px),
      rgba(8,8,11,0) 100%);
  }
  @media (max-width:560px){
    .ege-meta-row{
      padding:6px 20px;
      background:linear-gradient(90deg,
        rgba(8,8,11,0) 0,
        rgba(8,8,11,.68) 17px,
        rgba(8,8,11,.68) calc(100% - 17px),
        rgba(8,8,11,0) 100%);
    }
  }
  .ege-meta-row>span{white-space:nowrap}
  .wpj-hero-meta .wpj-meta-sep{margin:0 7px}
  /* Below 560 the three facts cannot share a line. Break after the date and
     drop the separator that would otherwise dangle at the end of line one. */
  @media (max-width:560px){
    .ege-meta-row>span:last-child{flex:0 0 100%;margin-top:5px}
    /* :last-of-type keys off the tag, and every child here is a <span>,
       so it never matched the separator. The one to drop is simply the
       second-to-last child. */
    .ege-meta-row>span:nth-last-child(2){display:none}
  }
  @media (max-width:400px){
    .wpj-hero-meta{font-size:.72rem;letter-spacing:.13em}
    .wpj-hero-meta .wpj-meta-sep{margin:0 5px}
  }
  @media (max-width:359px){
    .wpj-hero-meta{font-size:.66rem;letter-spacing:.09em}
  }

  /* ---- 4. Hero rates --------------------------------------------- */
  /* Two rates, not two sentences. One hairline block, price column
     right-aligned against a shared edge so the numbers stack, labels
     left-aligned off a shared edge so the eye reads down either one.
     The inclusive rate is the headline; the land-only rate is quieter
     by a full step in size, weight and colour. */
  .ege-rates{
    width:max-content;max-width:100%;margin:0 auto 30px;
    display:grid;grid-template-columns:auto auto;
    border-top:1px solid rgba(196,148,74,.28);
    border-bottom:1px solid rgba(196,148,74,.28);
    /* the plate is what guarantees the gold numbers stay readable
       wherever the crop puts the lit sandstone behind them */
    background:rgba(8,8,11,.50);
    -webkit-backdrop-filter:blur(7px) saturate(.92);backdrop-filter:blur(7px) saturate(.92);
    padding:0 22px;
    font-family:'Source Sans 3',sans-serif;
    text-align:left;
  }
  .ege-rate{display:contents}
  .ege-rate-price,.ege-rate-label{
    margin:0;padding:11px 0;
    text-shadow:0 1px 4px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6);
  }
  .ege-rate-price{
    grid-column:1;justify-self:end;text-align:right;
    padding-right:18px;white-space:nowrap;
    font-size:1.32rem;font-weight:700;letter-spacing:.03em;color:var(--gold, #C4944A);
  }
  .ege-rate-label{
    grid-column:2;align-self:center;
    font-size:.78rem;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;line-height:1.45;color:rgba(245,237,224,.94);
  }
  .ege-rate-cur{font-size:.62em;font-weight:600;letter-spacing:.1em;margin-left:.32em}
  /* the land-only rate: same block, deliberately a step quieter */
  .ege-rate--alt+.ege-rate--alt{border-top:0}
  /* Quieter by size and weight, NOT by alpha: a translucent gold composites
     toward the plate behind it and drops under 3.5:1, where full-strength
     gold at the same size clears AA. */
  .ege-rate--alt .ege-rate-price{font-size:1rem;font-weight:600;color:var(--gold, #C4944A);padding-top:0}
  .ege-rate--alt .ege-rate-label{font-size:.7rem;font-weight:400;letter-spacing:.11em;color:rgba(232,224,212,.66);padding-top:0}
  .ege-rate--alt .ege-rate-price,.ege-rate--alt .ege-rate-label{padding-bottom:12px}
  .ege-rate--main .ege-rate-price,.ege-rate--main .ege-rate-label{padding-bottom:9px}
  @media print{
    .ege-rates{border-color:#000}
    .ege-rate-price,.ege-rate-label{color:#000!important;text-shadow:none!important}
  }
  /* Narrow: the rates keep their two columns, price beside label, and the
     labels wrap inside theirs. Stacked price-over-label ran 184px deep on
     a phone and pushed the hero's buttons below the fold. */
  @media (max-width:719px){
    .ege-rates{padding:0 16px}
    .ege-rate-price{padding-right:14px}
    .ege-rate-label{line-height:1.35}
  }
  /* On the narrowest phones the label column is under 200px; slightly
     smaller, less tracked caps keep "including accommodation" on one line.
     The price now sits over brighter stone at 320px, so the plate is a
     little deeper there, keeping the small gold "USD" above 4.5:1. */
  @media (max-width:400px){
    .ege-rates{padding:0 14px;background:rgba(8,8,11,.56)}
    .ege-rate-price{padding-right:12px}
    .ege-rate-label{font-size:.7rem;letter-spacing:.06em}
    .ege-rate--alt .ege-rate-label{font-size:.68rem;letter-spacing:.06em}
  }

  /* ---- 5. Mid-page banner ----------------------------------------- */
  /* 640px stranded "Luxor." on a line of its own at every desktop
     width; the second line now fits whole, and below that the &nbsp;
     in "Over Luxor." keeps the pair together. */
  .ege-banner-title{max-width:900px;line-height:1.1}
  /* The band was a flat 480px at every width while the type inside it ran
     105-166px, so the photograph carried ~170px of dead space above the
     kicker and the same again under the headline. Scale the band with the
     viewport instead and let the type sit in it, not float in the middle
     of it. */
  /* The floor only matters where the headline is short; centring here keeps
     the leftover split evenly instead of pooling under the type. */
  .ege-banner{min-height:230px;display:flex;align-items:center}
  /* The photograph fills the band from behind; the band's height comes from
     the copy plus this padding, so the air above and below the headline
     stays proportional at every width instead of being whatever is left
     over inside a fixed 480px. */
  /* <picture> is display:contents sitewide, so it generates no box and
     cannot itself be positioned – the image is what has to be taken out
     of flow. Its width/height/object-position stay on the element. */
  .ege-banner>picture>img{position:absolute;inset:0}
  /* flex:1 matters – as a bare flex item the inner block would shrink to
     its text and sit against the left edge of the band. */
  .ege-banner-inner{position:relative;z-index:1;flex:1 1 auto;min-width:0;padding:clamp(54px,6.4vw,82px) 2rem}
  .ege-banner-kicker{margin-bottom:.55rem}
  @media (max-width:640px){
    .ege-banner-inner{padding:46px 1.4rem}
    .ege-banner-kicker{margin-bottom:.5rem;font-size:.66rem;letter-spacing:.26em}
  }

  /* ---- 6. Pricing ------------------------------------------------- */
  body.wpj-expedition #book .pricing-divider{margin-top:.2rem}

  /* The land-only rate, restated where people actually decide. Same
     hierarchy as the hero: the big number above is the price, this is
     the alternative, and it says so at a lower volume. */
  .ege-alt-rate{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
    gap:4px 12px;margin:1.9rem auto 2.4rem;padding:13px 22px;max-width:38rem;
    border:1px solid rgba(196,148,74,.3);background:rgba(0,0,0,.2);
    font-family:'Source Sans 3',sans-serif;text-wrap:balance;
  }
  .ege-alt-rate-price{font-size:1.06rem;font-weight:700;letter-spacing:.03em;color:var(--gold, #C4944A);white-space:nowrap}
  .ege-alt-rate-price .ege-rate-cur{font-size:.66em}
  .ege-alt-rate-label{font-size:.82rem;line-height:1.5;color:rgba(232,224,212,.72)}

  /* The inclusions used to run as one centred nine-clause sentence –
     six lines of prose at the exact moment someone is checking what
     their money buys. Same words, now a list you can scan. */
  .ege-includes-head{
    font-family:'Source Sans 3',sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold, #C4944A);
    margin:0 0 1.1rem;
  }
  .ege-includes{
    list-style:none;margin:0 auto 2.2rem;padding:0;max-width:42rem;
    column-count:2;column-gap:2.4rem;text-align:left;
  }
  .ege-includes li{
    position:relative;padding-left:1.35rem;margin-bottom:.55rem;
    break-inside:avoid;-webkit-column-break-inside:avoid;
    font-size:.94rem;line-height:1.55;color:rgba(245,237,224,.78);
  }
  .ege-includes li::before{
    content:'';position:absolute;left:0;top:.62em;
    width:7px;height:7px;border:1px solid var(--gold, #C4944A);
    transform:rotate(45deg);
  }
  @media (max-width:700px){
    .ege-includes{column-count:1;max-width:30rem}
  }

  /* Payment terms: the one unusual thing about this
     departure. Ranged left inside its box – centring five lines of
     conditions made them read like a caption. */
  .pricing-terms{
    max-width:44rem;margin:0 auto 1.4rem;padding:18px 22px;
    border:1px solid rgba(196,148,74,.45);background:rgba(0,0,0,.24);
    font-size:.9rem;line-height:1.68;color:rgba(232,224,212,.9);
    text-align:left;text-wrap:pretty;
  }
  .pricing-terms strong{color:var(--gold, #C4944A);font-weight:600}
  body.wpj-expedition .pricing-note{max-width:48rem;margin-left:auto;margin-right:auto;text-wrap:pretty}

  /* Email + divider + WhatsApp measures 387px against the shared 17px
     type, so it wraps onto two rows – and left the divider stranded at the
     end of the first – on anything under ~430px. Stacking them fixed the
     stranded divider but cost the single line the other expedition pages
     keep, so instead the row scales down enough to hold one line all the
     way to 320px. flex-wrap stays on as the safety valve below that. */
  @media (max-width:465px){
    .contact-options{gap:10px}
    .contact-option{font-size:.9rem;gap:7px}
    .contact-option svg{width:17px;height:17px}
    .contact-separator{height:19px}
  }
  @media (max-width:359px){
    .contact-options{gap:6px}
    .contact-option{font-size:.76rem;gap:4px}
    .contact-option svg{width:14px;height:14px}
    .contact-separator{height:15px}
  }

  /* ---- 7. Overview ------------------------------------------------ */
  /* The copy column runs ~1300px on a desktop and the photograph is a
     fixed 700px, so the right half of the section was empty from the
     caption down. Let the picture ride along instead. */
  /* 901px is where expedition.css still runs the two-column grid; the
     min-height guard keeps the picture from pinning on a short laptop
     screen, where its own caption would end up below the fold. */
  @media (min-width:901px) and (min-height:880px){
    body.wpj-expedition .intro-image-wrap{align-self:stretch}
    body.wpj-expedition .ege-intro-sticky{position:sticky;top:150px}
  }
  /* Two-line captions clear the gradient and sat on bare sandstone. */
  .intro-image-caption span{text-shadow:0 1px 4px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.7)}