/* =====================================================================
   TRIWAYS — EXPERIENCES INSIDE PAGES  (/experiences/<slug>/)
   Loaded after triways-article.css and triways-visual.css.
   Prefix: tv-xp-   Scope: <body class="hub-page tv-xp">
   First used on /experiences/egypt-adventure-tours/.

   Colours and type are the site tokens from triways-core.css (--hb-ink,
   --hb-ivory, --hb-white, --hb-gold, --hb-champagne, --hb-serif, --hb-sans)
   and --tv-brass-text / --tv-scrim from triways-visual.css. Nothing here
   styles the header, the navigation or the footer.

   Every component sits ON TOP of an existing block, so a sibling page is
   converted by adding classes, not by rewriting its copy:

     .tv-xp-hero     photograph behind the title        (+ .hub-hero)
     .tv-xp-facts    the hero facts, 2 x 2 on hairlines (+ .art-standing--pairs)
     .tv-xp-split    title left, statement + entries    (+ .art-split)
     .tv-xp-strip    a row of photographs with captions (--4 | --pair)
     .tv-xp-feature  one large photograph beside copy, on ink
     .tv-xp-regions  named places in ruled columns, on ink
     .tv-xp-faq      plus / minus accordion skin        (+ .tv-faq, native <details>)
     .tv-xp-enquiry  the closing enquiry                (+ .art-enquiry)
     .tv-xp-form     underline fields, brass labels     (+ .art-form)

   Added with /experiences/egypt-spiritual-tours/ (end of this file):
     .tv-xp-hero__answer--outlined  the hero answer as a hairline-outlined panel
     .tv-xp-split--plate   .tv-xp-split with a portrait under the title and a rule between the columns
     .tv-xp-numbered       01, 02 … beside each .art-entry (CSS counter, not content)
     .tv-xp-plate          a photograph with a small caption (--portrait | --wide)
     .tv-xp-rows           label | name | description rows on ink   (+ .art-register)
     .tv-xp-strip--named   landscape tiles with a serif name and a small label
     .tv-xp-feature--text-first   the feature with its copy first, on any ground
     .tv-xp-faq--ruled / .tv-xp-enquiry--ruled   a vertical hairline between the two columns

   Markup for each is given above its rules.
   ===================================================================== */

.tv-xp {
  --tv-xp-header: 3.8rem;                          /* the solid site bar */
  --tv-xp-y: clamp(3.75rem, 2.4rem + 6vw, 8rem);   /* section rhythm: ~60px on a phone, ~124px at 1440 */
  --tv-xp-gap: clamp(0.75rem, 1.6vw, 1.5rem);      /* between photographs */
  --tv-xp-gold: #C9A96A;                           /* brass for small type and rules on ink (8.6:1 on --hb-ink) */
  --tv-xp-rule: rgba(166, 138, 91, 0.45);          /* --hb-gold as a hairline on ivory */
  --tv-xp-rule-dark: rgba(201, 169, 106, 0.38);    /* --tv-xp-gold as a hairline on ink */
}

.tv-xp .hb-section { padding-block: var(--tv-xp-y); }

/* Small type: brass that passes AA on each ground */
.tv-xp .hb-section--ivory .hb-eyebrow,
.tv-xp .hb-section--white .hb-eyebrow { color: var(--tv-brass-text); }
.tv-xp .hb-section--dark .hb-eyebrow,
.tv-xp .tv-xp-hero .hb-eyebrow { color: var(--tv-xp-gold); }
.tv-xp .hb-section--dark .hb-kicker::after,
.tv-xp .tv-xp-hero .hb-kicker::after { background: var(--tv-xp-gold); opacity: 0.6; }

.tv-xp main a:focus-visible, .tv-xp main summary:focus-visible, .tv-xp main button:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }
.tv-xp .hb-section--dark a:focus-visible, .tv-xp .hb-section--dark button:focus-visible, .tv-xp .tv-xp-hero a:focus-visible { outline-color: var(--tv-xp-gold); }

/* ---------------------------------------------------------------------
   HERO — a dark-graded photograph behind the title.
   The photograph is atmosphere (alt=""); the scrim keeps the H1, the facts
   and the answer panel above AA wherever the picture is bright.

   <section class="hub-hero tv-xp-hero" aria-labelledby="page-title">
     <picture class="tv-xp-hero__media">
       <source media="(max-width: 767.98px)" srcset="…-mobile.webp" width height>
       <img src srcset sizes="100vw" alt="" width height fetchpriority="high">
     </picture>
     <div class="hb-wrap">
       <nav aria-label="Breadcrumb"><ol class="hub-crumbs">…</ol></nav>
       <div class="hub-hero__grid tv-xp-hero__grid">
         <div> kicker · h1.hub-hero__title · dl.art-standing.art-standing--pairs.tv-xp-facts </div>
         <div class="hub-hero__answer tv-xp-hero__answer"> label + paragraphs </div>
       </div>
     </div>
   </section>
   Set --tv-xp-hero-pos on the section to move the crop for another picture.
   ------------------------------------------------------------------- */
.tv-xp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(35rem, 68vh, 46rem);
  padding: calc(var(--tv-xp-header) + clamp(1.75rem, 3vw, 2.75rem)) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 0;
}
.tv-xp-hero__media { display: contents; }
.tv-xp-hero__media img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--tv-xp-hero-pos, 60% 35%);
}
.tv-xp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--tv-scrim), 0.86) 0%, rgba(var(--tv-scrim), 0.66) 36%, rgba(var(--tv-scrim), 0.3) 66%, rgba(var(--tv-scrim), 0.42) 100%),
    linear-gradient(180deg, rgba(var(--tv-scrim), 0.5) 0%, rgba(var(--tv-scrim), 0.08) 34%, rgba(var(--tv-scrim), 0.72) 100%);
}
.tv-xp-hero > .hb-wrap { flex: 1; display: flex; flex-direction: column; }
.tv-xp-hero > .hb-wrap > nav { margin-bottom: auto; }
.tv-xp-hero .hub-crumbs li { color: rgba(244, 240, 232, 0.78); }
.tv-xp-hero .hub-crumbs a { color: rgba(244, 240, 232, 0.86); }
.tv-xp-hero .hub-crumbs a, .tv-xp-hero .hub-crumbs [aria-current="page"] { display: inline-block; padding-block: 0.8rem; }
.tv-xp-hero .hub-crumbs { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }
.tv-xp-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: end; }
.tv-xp-hero .hub-hero__title { text-shadow: 0 1px 28px rgba(var(--tv-scrim), 0.45); }

/* The facts: two pairs, ruled across and down */
.tv-xp-hero .tv-xp-facts { gap: 0; max-width: 34rem; margin-top: clamp(1.75rem, 3.4vw, 2.75rem); }
.tv-xp-facts > div { padding: 0.95rem 1.5rem 1.05rem 0; border-top: 1px solid var(--tv-xp-rule-dark); }
.tv-xp-facts > div:nth-child(even) { padding-left: 1.5rem; padding-right: 0; border-left: 1px solid var(--tv-xp-rule-dark); }
.tv-xp-facts dt { color: var(--tv-xp-gold); }
.tv-xp-facts dd { font-size: 1.3rem; }

/* The answer: a quiet ink panel on a brass rule */
.tv-xp-hero__answer {
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.4vw, 2rem);
  border-top: 0; border-left: 1px solid var(--tv-xp-gold);
  background: rgba(var(--tv-scrim), 0.72);
}
.tv-xp-hero .tv-xp-hero__answer .art-hero__label { color: var(--tv-xp-gold); margin-bottom: 0.85rem; }
.tv-xp-hero__answer p { color: rgba(244, 240, 232, 0.9); font-size: 1rem; }

/* ---------------------------------------------------------------------
   TWO-COLUMN STATEMENT — eyebrow and title left; the serif statement and
   its entries right, each entry on a brass hairline.

   <div class="art-split tv-xp-split">
     <div class="art-split__head"> kicker + h2.hb-heading.hb-heading--h2 </div>
     <div class="art-prose"> p.art-prose__lead + div.art-entry (h3 + p) … [p.art-note] </div>
   </div>
   ------------------------------------------------------------------- */
.tv-xp-split.art-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 8rem); }
.tv-xp-split .art-split__head .hb-heading--h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
.tv-xp-split .art-prose__lead { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem) !important; line-height: 1.22 !important; max-width: 27ch !important; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.tv-xp-split .art-entry + .art-entry { margin-top: clamp(1.5rem, 2.4vw, 2rem); padding-top: clamp(1.5rem, 2.4vw, 2rem); border-top-color: var(--tv-xp-rule); }
.tv-xp-split .art-entry h3 { margin-bottom: 0.6rem; }
.tv-xp-split .art-entry p { font-size: 1rem; line-height: 1.8; }
.tv-xp-split .art-note { margin-top: clamp(1.5rem, 2.4vw, 2rem); padding-top: 1.1rem; border-top: 1px solid var(--tv-xp-rule); max-width: none; }

/* ---------------------------------------------------------------------
   IMAGE STRIP — photographs of one height, a small caption under each.
   --4    four portrait tiles (2 x 2 below 1024px)
   --pair a wide picture and a narrower one, same top and bottom edge
          (the columns and the two aspect ratios share one unit, 43 : 21)

   <ol class="tv-xp-strip tv-xp-strip--4" role="list" aria-label="…">
     <li class="tv-xp-tile">
       <figure>
         <div class="tv-xp-tile__media"><img … loading="lazy"></div>
         <figcaption>Caption <span>Qualifier</span></figcaption>
       </figure>
     </li>
   </ol>
   A tile that leads somewhere wraps the figure in <a class="tv-xp-tile__link">
   and ends the caption with <span class="tv-xp-tile__go" aria-hidden="true">&rarr;</span>.
   No link, no arrow.
   ------------------------------------------------------------------- */
.tv-xp-strip { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) var(--tv-xp-gap); margin: clamp(2.75rem, 2rem + 3.6vw, 5rem) 0 0; padding: 0; list-style: none; }
.tv-xp-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-xp-strip--pair { grid-template-columns: minmax(0, 43fr) minmax(0, 21fr); }
.tv-xp-tile { margin: 0; min-width: 0; }
.tv-xp-tile figure { margin: 0; }
.tv-xp-tile__link { display: block; color: inherit; }
.tv-xp-tile__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.tv-xp-strip--pair .tv-xp-tile:first-child .tv-xp-tile__media { aspect-ratio: 43 / 25; }
.tv-xp-strip--pair .tv-xp-tile:last-child .tv-xp-tile__media { aspect-ratio: 21 / 25; }
.tv-xp-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--tv-xp-pos, 50% 50%); transition: transform 0.4s ease; }
.tv-xp-tile--top { --tv-xp-pos: 50% 12%; }   /* keep the top of a picture when it is cropped wide */
.tv-xp-tile:hover .tv-xp-tile__media img { transform: scale(1.03); }
.tv-xp-tile figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding-top: 0.85rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--hb-ink);
}
.tv-xp-tile figcaption span { font-weight: 500; letter-spacing: 0.14em; color: var(--tv-brass-text); text-align: right; }
.tv-xp-tile figcaption .tv-xp-tile__go { font-size: 0.95rem; letter-spacing: 0; transition: transform 0.25s var(--hb-ease); }
.tv-xp-tile__link:hover .tv-xp-tile__go { transform: translateX(4px); }
.hb-section--dark .tv-xp-tile figcaption { color: var(--hb-ivory); }
.hb-section--dark .tv-xp-tile figcaption span { color: var(--tv-xp-gold); }

/* ---------------------------------------------------------------------
   FEATURE — one large photograph with its caption beneath, the copy beside
   it. Both columns start on the same line; nothing overlaps.

   <div class="tv-xp-feature">
     <figure class="tv-xp-feature__media"><img …><figcaption>…</figcaption></figure>
     <div class="art-prose tv-xp-feature__body"> kicker · h2 · p.art-prose__lead · p </div>
   </div>
   ------------------------------------------------------------------- */
.tv-xp-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tv-xp-feature__media { margin: 0; }
.tv-xp-feature__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--hb-ink-soft); }
.tv-xp-feature__media figcaption { margin-top: 0.9rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: rgba(244, 240, 232, 0.72); }
.tv-xp-feature__body .hb-heading--h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.06; margin-bottom: 1.25rem; }
.tv-xp-feature__body .art-prose__lead { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem) !important; max-width: 24ch !important; margin-bottom: 1.4rem; }
.tv-xp-feature__body p { font-size: 1rem; line-height: 1.8; }

/* ---------------------------------------------------------------------
   REGION COLUMNS — named places grouped by region, ruled between columns.
   Stacks under 768px. A place that has its own page is simply a link.

   <ul class="tv-xp-regions" role="list" aria-label="…">
     <li class="tv-xp-regions__col">
       <h3 class="tv-xp-regions__name">Region</h3>
       <ul><li>Place</li>…</ul>
     </li>
   </ul>
   ------------------------------------------------------------------- */
.tv-xp-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2.75rem, 2rem + 3.6vw, 5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tv-xp-rule-dark); }
.tv-xp-regions__col { padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.25rem, 3vw, 2.75rem) 0.25rem; border-left: 1px solid var(--tv-xp-rule-dark); }
.tv-xp-regions__col:first-child { padding-left: 0; border-left: 0; }
.tv-xp-regions__col:last-child { padding-right: 0; }
.tv-xp-regions__name { margin: 0 0 0.9rem; font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5; color: var(--tv-xp-gold); }
.tv-xp-regions ul { margin: 0; padding: 0; list-style: none; }
.tv-xp-regions ul li { padding: 0.3rem 0; font-family: var(--hb-serif); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.25; color: var(--hb-ivory); }
.tv-xp-regions ul a { color: #fff; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--hb-ease); }
.tv-xp-regions ul a:hover, .tv-xp-regions ul a:focus-visible { background-size: 100% 1px; }
.tv-xp .hb-section--dark .tv-xp-regions + .art-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 78ch; color: rgba(244, 240, 232, 0.7); }

/* ---------------------------------------------------------------------
   FAQ — the shared .tv-faq layout (triways-visual.css) with a drawn
   plus / minus. Native <details>, so every answer stays in the DOM; give
   the first item the `open` attribute.

   <section class="hb-section hb-section--white tv-faq tv-xp-faq">
     <div class="hb-wrap tv-faq__grid">
       <div class="tv-faq__head"> kicker + h2 </div>
       <div class="hb-faq tv-faq__list"> details.hb-faq__item … </div>
     </div>
   </section>
   ------------------------------------------------------------------- */
.tv-xp-faq .hb-faq, .tv-xp-faq .hb-faq__item { border-color: var(--tv-xp-rule); }
.tv-xp-faq .hb-faq__item { padding: 0; }
.tv-xp-faq .hb-faq__item > summary { min-height: 2.75rem; padding: 1.3rem 0; }
.tv-xp-faq .hb-faq__item > summary::after {
  content: ""; width: 0.9rem; height: 0.9rem; transform: none;
  background:
    linear-gradient(var(--hb-gold), var(--hb-gold)) 50% 50% / 100% 1px no-repeat,
    linear-gradient(var(--hb-gold), var(--hb-gold)) 50% 50% / 1px 100% no-repeat;
  transition: background-size 0.25s var(--hb-ease);
}
.tv-xp-faq .hb-faq__item[open] > summary::after { transform: none; background-size: 100% 1px, 1px 0; }
.tv-xp-faq .hb-faq__item p { margin: 0; padding: 0 2.5rem 1.5rem 0; font-size: 1rem; line-height: 1.8; }

/* ---------------------------------------------------------------------
   ENQUIRY — heading, copy and three ways in on the left; the form right.
   Field names, validation and the submit handler are untouched: this is
   a skin over .art-enquiry / .art-form.

   <div class="hb-wrap art-enquiry tv-xp-enquiry">
     <div class="art-enquiry__head">
       kicker · h2 · p.hb-copy
       <a class="hb-link tv-xp-go" href>Label <span class="hb-arrow" aria-hidden="true">&rarr;</span></a>
       <div class="art-enquiry__direct"><a class="hub-close__direct">…</a></div>
       <p class="art-enquiry__aside">…</p>
     </div>
     <form class="art-form tv-xp-form" …> … <button class="hb-cta hb-cta--solid tv-xp-btn"> </form>
   </div>
   ------------------------------------------------------------------- */
.tv-xp-enquiry .hb-heading--h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); line-height: 1.1; text-wrap: balance; }
.tv-xp-enquiry .hb-link.tv-xp-go { gap: 0.9rem; min-height: 2.75rem; padding-bottom: 0; border-bottom: 0; color: var(--tv-xp-gold); }
.tv-xp-go .hb-arrow { order: -1; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--tv-xp-gold); border-radius: 50%; font-size: 0.95rem; letter-spacing: 0; transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease); }
.tv-xp-enquiry .hb-link.tv-xp-go:hover .hb-arrow, .tv-xp-enquiry .hb-link.tv-xp-go:focus-visible .hb-arrow { transform: none; background: var(--tv-xp-gold); color: var(--hb-ink); }
.tv-xp-enquiry .hb-link.tv-xp-go:hover, .tv-xp-enquiry .hb-link.tv-xp-go:focus-visible { color: var(--hb-white); }
.tv-xp-enquiry .art-enquiry__direct { margin-top: 0.6rem; }
.tv-xp-enquiry .hub-close__direct { align-self: flex-start; gap: 0.9rem; min-height: 2.75rem; color: var(--tv-xp-gold); }
.tv-xp-enquiry .hub-close__direct .bi { display: inline-grid; place-items: center; width: 2.25rem; font-size: 1.15rem; }
.tv-xp-enquiry .hub-close__direct:hover, .tv-xp-enquiry .hub-close__direct:focus-visible { color: var(--hb-white); }
.tv-xp-enquiry .art-enquiry__aside { margin-top: 1.25rem; }
.tv-xp-enquiry .art-enquiry__aside a { display: inline-block; padding-block: 0.6rem; }

.tv-xp-form { gap: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.5rem, 3.4vw, 2.75rem); }
.tv-xp-form label { color: var(--tv-xp-gold); }
.tv-xp-form label i { color: rgba(244, 240, 232, 0.62); }
.tv-xp-form input, .tv-xp-form select, .tv-xp-form textarea { min-height: 3rem; border-bottom-color: rgba(244, 240, 232, 0.34); }
.tv-xp-form input::placeholder, .tv-xp-form textarea::placeholder { color: rgba(244, 240, 232, 0.5); }
.tv-xp-form input:hover, .tv-xp-form select:hover, .tv-xp-form textarea:hover { border-bottom-color: var(--tv-xp-gold); }
.tv-xp-form input:focus-visible, .tv-xp-form select:focus-visible, .tv-xp-form textarea:focus-visible { outline: 2px solid var(--tv-xp-gold); outline-offset: 4px; }
.tv-xp-form .tv-xp-btn { gap: 0.9rem; min-height: 3.25rem; padding: 1.05rem 1.9rem; border-radius: 0; border-color: var(--tv-xp-gold); background: var(--tv-xp-gold); color: var(--hb-ink); letter-spacing: 0.18em; transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease); }
.tv-xp-form .tv-xp-btn::after { content: "\2192" / ""; font-size: 0.95rem; letter-spacing: 0; transition: transform 0.3s var(--hb-ease); }
.tv-xp-form .tv-xp-btn:hover, .tv-xp-form .tv-xp-btn:focus-visible { background: transparent; color: var(--tv-xp-gold); }
.tv-xp-form .tv-xp-btn:hover::after { transform: translateX(4px); }
.tv-xp-form .art-form__status { color: var(--tv-xp-gold); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .tv-xp { --tv-xp-header: 3.4rem; }
}
@media (max-width: 1023.98px) {
  .tv-xp-hero { min-height: 0; }
  .tv-xp-hero > .hb-wrap > nav { margin-bottom: clamp(3.5rem, 12vw, 7rem); }
  .tv-xp-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2rem; }
  .tv-xp-hero__answer { max-width: 38rem; }
  .tv-xp-hero::before {
    background:
      linear-gradient(180deg, rgba(var(--tv-scrim), 0.62) 0%, rgba(var(--tv-scrim), 0.56) 14%, rgba(var(--tv-scrim), 0.86) 44%, rgba(var(--tv-scrim), 0.93) 100%);
  }
  .tv-xp-split.art-split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tv-xp-split .art-prose__lead { max-width: 26ch !important; }
  .tv-xp-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-xp-strip--4 .tv-xp-tile__media { aspect-ratio: 4 / 5; }
  .tv-xp-feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 767.98px) {
  /* the phone CTA bar leaves 56px under <main>; keep it ink under the ink enquiry */
  body.tv-xp main { background-color: var(--hb-ink); }
  .tv-xp-hero { --tv-xp-hero-pos: 50% 30%; }
  .tv-xp-strip--pair { grid-template-columns: minmax(0, 1fr); }
  .tv-xp-strip--pair .tv-xp-tile:first-child .tv-xp-tile__media { aspect-ratio: 3 / 2; }
  .tv-xp-strip--pair .tv-xp-tile:last-child .tv-xp-tile__media { aspect-ratio: 1 / 1; }
  .tv-xp-regions { grid-template-columns: minmax(0, 1fr); }
  .tv-xp-regions__col, .tv-xp-regions__col:first-child, .tv-xp-regions__col:last-child { padding: 1.4rem 0 1.1rem; border-left: 0; }
  .tv-xp-regions__col + .tv-xp-regions__col { border-top: 1px solid var(--tv-xp-rule-dark); }
  .tv-xp-faq .hb-faq__item p { padding-right: 0; }
  .tv-xp-form .art-form__submit { flex-direction: column; align-items: stretch; }
  .tv-xp-form .tv-xp-btn { justify-content: center; }
}
@media (max-width: 639.98px) {
  /* .art-standing turns each fact into a label | value row here */
  .tv-xp-facts > div, .tv-xp-facts > div:nth-child(even) { padding: 0.8rem 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-xp-tile__media img, .tv-xp-tile__go, .tv-xp-go .hb-arrow, .tv-xp-form .tv-xp-btn, .tv-xp-form .tv-xp-btn::after, .tv-xp-faq .hb-faq__item > summary::after { transition: none !important; }
  .tv-xp-tile:hover .tv-xp-tile__media img, .tv-xp-tile__link:hover .tv-xp-tile__go, .tv-xp-form .tv-xp-btn:hover::after { transform: none !important; }
}

/* =====================================================================
   ADDED WITH /experiences/egypt-spiritual-tours/
   Modifiers and three small components. Nothing above is changed, so a
   page that does not use these classes renders as before.
   ===================================================================== */

/* HERO ANSWER, OUTLINED — a hairline all round instead of the brass left rule.
   <div class="hub-hero__answer tv-xp-hero__answer tv-xp-hero__answer--outlined"> */
.tv-xp-hero__answer--outlined {
  border: 1px solid rgba(201, 169, 106, 0.5);
  background: rgba(var(--tv-scrim), 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------
   PLATE — one photograph and its caption.
   --portrait 3 : 4      --wide the picture's own panoramic shape (3 : 2 on a phone)

   <figure class="tv-xp-plate tv-xp-plate--portrait"><img …><figcaption>…</figcaption></figure>
   ------------------------------------------------------------------- */
.tv-xp-plate { margin: 0; }
.tv-xp-plate img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 2px; background: var(--hb-ink-soft); }
.tv-xp-plate--portrait img { aspect-ratio: 3 / 4; }
.tv-xp-plate--wide img { aspect-ratio: 1920 / 550; }
.tv-xp-plate figcaption { margin-top: 0.9rem; font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--hb-text-dim); }
.hb-section--dark .tv-xp-plate figcaption { color: rgba(244, 240, 232, 0.72); }

/* ---------------------------------------------------------------------
   SPLIT WITH A PLATE — the title column carries a portrait; a hairline
   runs between the columns. The title does not stick (the column is tall).

   <div class="art-split tv-xp-split tv-xp-split--plate">
     <div class="art-split__head"> kicker · h2 · figure.tv-xp-plate.tv-xp-plate--portrait </div>
     <div class="art-prose [tv-xp-numbered]"> lead · div.art-entry … · [figure.tv-xp-plate.tv-xp-plate--wide] </div>
   </div>
   ------------------------------------------------------------------- */
.tv-xp-split--plate.art-split { gap: 0; align-items: stretch; }
.tv-xp-split--plate .art-split__head { position: static; padding-right: clamp(2rem, 4.5vw, 5rem); }
.tv-xp-split--plate .art-split__head .tv-xp-plate { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.tv-xp-split--plate > .art-prose { padding-left: clamp(2rem, 4.5vw, 5rem); border-left: 1px solid var(--tv-xp-rule); }
.tv-xp-split--plate .tv-xp-plate--wide { margin-top: clamp(2rem, 3.4vw, 3rem); }

/* NUMBERED ENTRIES — the number is drawn by a counter, so the copy is untouched
   and the order follows the markup. Add .tv-xp-numbered to the .art-prose. */
.tv-xp-numbered { counter-reset: tv-xp-n; }
.tv-xp-numbered .art-entry { counter-increment: tv-xp-n; display: grid; grid-template-columns: clamp(2.25rem, 4vw, 3.5rem) minmax(0, 1fr); }
.tv-xp-numbered .art-entry > * { grid-column: 2; }
.tv-xp-numbered .art-entry::before {
  content: counter(tv-xp-n, decimal-leading-zero);
  content: counter(tv-xp-n, decimal-leading-zero) / "";
  grid-column: 1; grid-row: 1 / span 2; padding-top: 0.5rem;
  font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.5; color: var(--tv-brass-text);
}
.hb-section--dark .tv-xp-numbered .art-entry::before { color: var(--tv-xp-gold); }

/* ---------------------------------------------------------------------
   ROWS — label | name | description, a brass hairline between rows.
   Under 1024px each row stacks: label, name, description.

   <ol class="art-register tv-xp-rows" role="list">
     <li class="art-register__row">
       <div><span class="art-register__tag">Label</span><h3 class="art-register__name">Name</h3></div>
       <div class="art-prose"><p>…</p></div>
     </li>
   </ol>
   ------------------------------------------------------------------- */
.tv-xp .hb-intro:has(+ .tv-xp-rows) { max-width: 52rem; }
.tv-xp .hb-intro:has(+ .tv-xp-rows) .hb-copy { max-width: 40rem; }
.tv-xp-rows.art-register { border-top-color: var(--tv-xp-rule-dark); }
.tv-xp-rows .art-register__row { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); gap: 0.4rem clamp(1.5rem, 3vw, 3rem); align-items: baseline; padding: clamp(1.4rem, 2.4vw, 2rem) 0; border-bottom-color: var(--tv-xp-rule-dark); }
.tv-xp-rows .art-register__row > div:first-child { display: contents; }
.tv-xp-rows .art-register__tag { margin: 0; color: var(--tv-xp-gold); }
.tv-xp-rows .art-register__name { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); line-height: 1.15; }
.tv-xp-rows .art-prose p { font-size: 1rem; line-height: 1.75; max-width: 56ch; }

/* ---------------------------------------------------------------------
   NAMED TILES — landscape tiles, a serif name left and a small label right.
   <ol class="tv-xp-strip tv-xp-strip--4 tv-xp-strip--named"> … as .tv-xp-strip
   ------------------------------------------------------------------- */
.tv-xp-strip--named .tv-xp-tile__media { aspect-ratio: 3 / 2; }
.tv-xp-strip--named .tv-xp-tile figcaption { font-family: var(--hb-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.tv-xp-strip--named .tv-xp-tile figcaption span { font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }

/* ---------------------------------------------------------------------
   FEATURE, COPY FIRST — the copy leads and the photograph sits right, 4 : 3.
   <div class="tv-xp-feature tv-xp-feature--text-first">
     <div class="art-prose tv-xp-feature__body"> … </div>
     <figure class="tv-xp-feature__media"><img …><figcaption>…</figcaption></figure>
   </div>
   ------------------------------------------------------------------- */
.tv-xp-feature--text-first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.tv-xp-feature--text-first .tv-xp-feature__media img { aspect-ratio: 4 / 3; }
.hb-section--ivory .tv-xp-feature__media figcaption, .hb-section--white .tv-xp-feature__media figcaption { color: var(--hb-text-dim); }
.tv-xp .tv-xp-feature + .art-note { margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: 1.1rem; border-top: 1px solid var(--tv-xp-rule); max-width: none; font-size: 0.95rem; }

/* RULED COLUMNS — a vertical hairline between the heading and the list / form */
@media (min-width: 1024px) {
  .tv-xp-faq--ruled .tv-faq__list { grid-column: 5 / -1; margin-top: 0; padding-left: clamp(2rem, 4.5vw, 5rem); border-left: 1px solid var(--tv-xp-rule); }
  .tv-xp-enquiry--ruled.art-enquiry { gap: clamp(1.75rem, 3.4vw, 3.75rem); }
  .tv-xp-enquiry--ruled .art-form { padding-left: clamp(1.75rem, 3.4vw, 3.75rem); border-left: 1px solid var(--tv-xp-rule-dark); }
}

@media (max-width: 1023.98px) {
  .tv-xp-split--plate .art-split__head { padding-right: 0; }
  .tv-xp-split--plate .art-split__head .tv-xp-plate { max-width: 30rem; }
  .tv-xp-split--plate > .art-prose { padding-left: 0; border-left: 0; padding-top: clamp(1.75rem, 5vw, 2.5rem); border-top: 1px solid var(--tv-xp-rule); }
  .tv-xp-rows .art-register__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tv-xp-rows .art-register__row > div:first-child { display: block; margin-bottom: 0.75rem; }
  .tv-xp-rows .art-register__tag { margin-bottom: 0.5rem; }
  .tv-xp-feature--text-first { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .tv-xp-plate--wide img { aspect-ratio: 16 / 9; }
  .tv-xp-strip--named .tv-xp-tile figcaption { flex-direction: column; gap: 0.3rem; font-size: 1.2rem; }
  .tv-xp-strip--named .tv-xp-tile figcaption span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-xp-hero__answer--outlined { -webkit-backdrop-filter: none; backdrop-filter: none; }
}