/* =====================================================================
   TRIWAYS — ARTICLE LAYER (insights articles; reusable for other long-form pages)
   Loaded after triways-core.css and triways-hub.css. Prefix: art-
   Reuses the hub hero, crumbs, FAQ and close blocks unchanged. This file adds only
   what a reading page needs: an answer list, a prose column, fact lists,
   a fleet register, a single-figure plate and a decision matrix.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE SHORT ANSWER — an ordered list in the hero. One sentence per option,
   set for extraction: each item is a self-contained answer.
   ------------------------------------------------------------------- */
.art-answer { margin: 0; padding: 0; list-style: none; counter-reset: artopt; }
.art-answer li {
  position: relative; counter-increment: artopt;
  padding: 1.05rem 0 1.05rem 2.6rem;
  border-bottom: 1px solid var(--hb-line-on-dark);
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.65; color: rgba(244, 240, 232, 0.82);
}
.art-answer li::before {
  content: counter(artopt); position: absolute; left: 0; top: 0.85rem;
  font-family: var(--hb-serif); font-variant-numeric: lining-nums; font-size: 1.7rem; line-height: 1; color: var(--hb-champagne);
}
.art-answer strong { display: block; font-family: var(--hb-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: #fff; margin-bottom: 0.15rem; }
.art-answer__rule { margin-top: 1.4rem; font-family: var(--hb-serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--hb-champagne); max-width: 30ch; }
.hub-hero__answer p a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.hub-hero__answer p a:hover, .hub-hero__answer p a:focus-visible { color: #fff; border-color: #fff; }
.hub-hero__answer p a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
.hub-hero .art-hero__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-champagne); margin: 0 0 0.6rem; }

/* ---------------------------------------------------------------------
   2. SECTION LAYOUTS — a sticky head beside the body (as the hub process and FAQ
   blocks do), a media-led two-up, and a text-led two-up with a small plate.
   ------------------------------------------------------------------- */
.art-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.art-split__head { position: sticky; top: 6.5rem; }
.art-split__head .hb-heading { margin-bottom: 0; }
.art-split__head .hb-heading--h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }

.art-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.art-duo--text-first { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }

/* Prose — a measured reading column */
.art-prose p { font-family: var(--hb-sans); font-size: 1.0625rem; line-height: 1.85; color: var(--hb-text-dim); max-width: 62ch; }
.art-prose p + p { margin-top: 1.15rem; }
.art-prose a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.art-prose a:hover, .art-prose a:focus-visible { color: var(--hb-gold); }
.art-prose a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }
.hb-section--dark .art-prose p { color: rgba(244, 240, 232, 0.76); }
.hb-section--dark .art-prose a { color: var(--hb-champagne); border-color: rgba(200, 183, 156, 0.45); }
.hb-section--dark .art-prose a:hover, .hb-section--dark .art-prose a:focus-visible { color: #fff; border-color: #fff; }
.hb-section--dark .art-prose a:focus-visible { outline-color: var(--hb-champagne); }
.art-prose__lead { font-family: var(--hb-serif) !important; font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem) !important; line-height: 1.32 !important; color: var(--hb-ink) !important; max-width: 30ch !important; margin-bottom: 1.6rem; text-wrap: balance; }
.hb-section--dark .art-prose__lead { color: #fff !important; }

/* Fact list — a definition list, three short facts per vessel type */
.art-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; border-top: 1px solid var(--hb-text); }
.art-facts > div { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--hb-line); }
.art-facts dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); margin: 0 0 0.4rem; }
.art-facts dd { margin: 0; font-family: var(--hb-serif); font-size: 1.3rem; line-height: 1.25; color: var(--hb-ink); }
.hb-section--dark .art-facts { border-top-color: rgba(244, 240, 232, 0.5); }
.hb-section--dark .art-facts > div { border-bottom-color: var(--hb-line-on-dark); }
.hb-section--dark .art-facts dt { color: var(--hb-champagne); }
.hb-section--dark .art-facts dd { color: #fff; }
/* A fact label that leads to its own page carries the hairline the prose links use */
.art-facts dt a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 0.25s var(--hb-ease); }
.art-facts dt a:hover, .art-facts dt a:focus-visible { color: var(--hb-ink); }
.hb-section--dark .art-facts dt a:hover, .hb-section--dark .art-facts dt a:focus-visible { color: #fff; }
.art-facts dt a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.art-onward { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------------------
   3. THE FLEET — the five ships, each photograph matched to its named vessel.
   One panoramic lead, then the other four in a row. Names are text, in an
   ordered list, so they read as content (never baked into an image).
   ------------------------------------------------------------------- */
.art-fleet { margin: clamp(3rem, 6vw, 5.5rem) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem); }
.art-fleet__item { margin: 0; }
.art-fleet__item--lead { grid-column: 1 / -1; }
.art-fleet figure { margin: 0; }
.art-fleet img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 2px; background: var(--hb-ink-soft); }
.art-fleet__item:not(.art-fleet__item--lead) img { aspect-ratio: 900 / 580; }
.art-fleet figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0 0; border-top: 1px solid var(--hb-line); margin-top: 0.85rem; font-family: var(--hb-serif); font-size: 1.3rem; line-height: 1.2; color: var(--hb-ink); }
.art-fleet figcaption span { font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hb-gold); white-space: nowrap; }

/* A single plate — used for the dahabiya and the yacht. Shown at its native width,
   never stretched: the source photographs are small, so the composition is built
   around them rather than enlarging them. */
.art-plate { margin: 0; max-width: 520px; }
.art-plate img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--hb-ink-soft); }
.art-plate figcaption { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--hb-line-on-dark); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 240, 232, 0.6); }
.hb-section--ivory .art-plate { max-width: 300px; }
.hb-section--ivory .art-plate figcaption, .hb-section--white .art-plate figcaption { border-top-color: var(--hb-line); color: var(--hb-text-dim); }
.art-note { margin-top: 1.5rem; font-size: 0.86rem; line-height: 1.7; color: var(--hb-text-dim); max-width: 50ch; }

/* ---------------------------------------------------------------------
   4. THE DECISION MATRIX — a real table: client, way down the river, why.
   ------------------------------------------------------------------- */
.art-matrix { width: 100%; border-collapse: collapse; }
.art-matrix caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.art-matrix thead th { text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); padding: 0 1.5rem 0.9rem 0; border-bottom: 1px solid rgba(244, 240, 232, 0.5); }
.art-matrix tbody th, .art-matrix tbody td { text-align: left; vertical-align: top; padding: clamp(1.4rem, 2.4vw, 2.1rem) 1.5rem clamp(1.4rem, 2.4vw, 2.1rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-matrix tbody th { width: 27%; font-weight: 400; font-family: var(--hb-serif); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.12; color: #fff; }
.art-matrix__way { width: 24%; font-family: var(--hb-serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); line-height: 1.2; color: var(--hb-champagne); }
.art-matrix tbody td:last-child { color: rgba(244, 240, 232, 0.76); line-height: 1.75; font-size: 1rem; padding-right: 0; }
.art-matrix tbody td:last-child a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.art-matrix tbody td:last-child a:hover, .art-matrix tbody td:last-child a:focus-visible { color: #fff; border-color: #fff; }
.art-matrix tbody td:last-child a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
.art-matrix-foot { margin-top: clamp(2rem, 4vw, 3rem); max-width: 62ch; }

/* ---------------------------------------------------------------------
   4b. SERVICE-PAGE PATTERNS — used by the concierge page; reusable by other services.
   .art-entry    a subheading + prose inside a reading column
   .art-register a dark ledger of named parts (name left, description right)
   .art-cases    illustrative scenarios: the moment, then what happens behind it
   .art-contrast two adjacent services set side by side
   ------------------------------------------------------------------- */
.art-entry + .art-entry { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hb-line); }
/* An entry that follows ordinary prose (not the lead) needs the same breathing room */
.art-prose p:not(.art-prose__lead) + .art-entry { margin-top: clamp(2rem, 4vw, 3rem); }
.art-entry h3 { font-family: var(--hb-serif); font-weight: 500; font-size: var(--hb-h3); line-height: 1.2; color: var(--hb-ink); margin: 0 0 0.9rem; }
.art-figure { margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; max-width: 62ch; }
.art-figure img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--hb-ink-soft); }
.art-figure figcaption { margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--hb-line); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-text-dim); }

.art-register { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-register__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(2rem, 6vw, 7rem); padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-register__name { margin: 0; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; color: #fff; }
.art-register__tag { display: block; margin-bottom: 0.7rem; font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
/* Requests beyond the itinerary — one row per kind of access: a photograph, a title that names
   the thing and the place ("Private dining, Giza"), what is arranged, and a way in. */
.art-beyond { margin-top: clamp(3.5rem, 7vw, 6rem); }
.art-beyond__intro { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.art-req { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-req__row { position: relative; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto; gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-req__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.art-req__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--hb-ease); }
.art-req__row:hover .art-req__media img { transform: scale(1.045); }
.art-req__name { margin: 0 0 0.6rem; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.4rem); line-height: 1.1; color: #fff; }
.art-req__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.art-req__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.art-req__name a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 6px; }
.art-req__row:hover .art-req__name a, .art-req__row:focus-within .art-req__name a { background-size: 100% 1px; }
.art-req__desc { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.75; color: rgba(244, 240, 232, 0.76); }
.art-req__go { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-champagne); }
.art-req__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.art-req__row:hover .art-req__go { color: #fff; }
.art-req__row:hover .art-req__go .hb-arrow { transform: translateX(4px); }
.art-req__row--text .art-req__body { grid-column: 2; }
/* Inline links inside a row description (rows whose title is not itself a link) */
.art-req__desc a { position: relative; z-index: 2; color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.art-req__desc a:hover, .art-req__desc a:focus-visible { color: #fff; border-color: #fff; }
.art-req__desc a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
/* Inline links inside a process step, as in the prose column */
.hub-process__step p a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); transition: color 0.25s var(--hb-ease); }
.hub-process__step p a:hover, .hub-process__step p a:focus-visible { color: var(--hb-gold); }
.hub-process__step p a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

.art-cases { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-text); }
.art-cases__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 6vw, 6rem); padding: clamp(2rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--hb-line); }
.art-cases__moment { margin: 0; max-width: 16ch; font-family: var(--hb-serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.12; color: var(--hb-ink); text-wrap: balance; }
.art-cases__label { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); }
.art-cases__body p { font-size: 1.0625rem; line-height: 1.8; color: var(--hb-text-dim); max-width: 56ch; }
.art-cases__body p + p { margin-top: 1.1rem; }
/* On an ink section the scenarios invert: ivory moments, champagne labels, ivory hairlines */
.hb-section--dark .art-cases { border-top-color: rgba(244, 240, 232, 0.5); }
.hb-section--dark .art-cases__row { border-bottom-color: var(--hb-line-on-dark); }
.hb-section--dark .art-cases__moment { color: #fff; }
.hb-section--dark .art-cases__label { color: var(--hb-champagne); }
.hb-section--dark .art-cases__body p { color: rgba(244, 240, 232, 0.76); }
.hb-section--dark .art-cases-note { color: rgba(244, 240, 232, 0.6); }
.hb-section--dark .art-cases-note a { color: var(--hb-champagne); border-bottom-color: rgba(200, 183, 156, 0.45); }
.hb-section--dark .art-cases-note a:hover, .hb-section--dark .art-cases-note a:focus-visible { color: #fff; border-bottom-color: #fff; }
.art-cases-note { margin-top: 1.5rem; font-size: 0.86rem; line-height: 1.7; color: var(--hb-text-dim); max-width: 60ch; }
.art-cases-note a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); transition: color 0.25s var(--hb-ease); }
.art-cases-note a:hover, .art-cases-note a:focus-visible { color: var(--hb-gold); }
.art-cases-note a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

.art-contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 6vw, 6rem); border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-contrast__col { padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-contrast__col h3 { margin: 0 0 0.35rem; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; color: #fff; }
.art-contrast__col h3 a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.art-contrast__col h3 a:hover, .art-contrast__col h3 a:focus-visible { background-size: 100% 1px; }
.art-contrast__col h3 a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; }
.art-contrast__role { margin: 0 0 1.1rem; font-family: var(--hb-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--hb-champagne); }
.art-contrast__col ul { margin: 0; padding: 0; list-style: none; }
.art-contrast__col li { padding: 0.55rem 0; border-top: 1px solid var(--hb-line-on-dark); color: rgba(244, 240, 232, 0.76); line-height: 1.6; font-size: 0.98rem; }
.art-audience { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------------------------
   4c. CORE-SERVICE PATTERNS — used by the Egypt DMC page.
   .art-title-sub  the qualifier line inside an H1
   .art-standing   standing facts in the hero (experience, licence, support)
   .art-coverage   places, by region; linked only where a page exists
   .art-teasers    other services, as a plain list with a way in
   .art-form       the partner enquiry form
   ------------------------------------------------------------------- */
.art-title-sub { display: block; margin-top: 0.9rem; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem); font-weight: 400; font-style: italic; line-height: 1.3; color: var(--hb-champagne); letter-spacing: 0; }

/* Links set inside intro copy read as text, not as the uppercase "link" component */
.hb-copy a:not(.hb-link) { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); transition: color 0.25s var(--hb-ease); }
.hb-copy a:not(.hb-link):hover, .hb-copy a:not(.hb-link):focus-visible { color: var(--hb-gold); }
.hb-section--dark .hb-copy a:not(.hb-link) { color: var(--hb-champagne); border-color: rgba(200, 183, 156, 0.45); }
.art-hero-grid { align-items: start; }
.art-hero-grid .art-standing { max-width: 36rem; margin-top: clamp(2rem, 4vw, 3.25rem); }
.art-standing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.25rem; margin: 1.75rem 0 0; padding: 0; }
.art-standing > div { padding: 0.85rem 0 0; border-top: 1px solid var(--hb-line-on-dark); }
/* Four facts read as two pairs rather than a row of three and an orphan (the heritage eras) */
.art-standing--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.art-standing dt { margin: 0 0 0.3rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
.art-standing dd { margin: 0; font-family: var(--hb-serif); font-size: 1.35rem; line-height: 1.2; color: #fff; }

.art-coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-coverage__region { padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-coverage__name { margin: 0 0 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
.art-coverage ul { margin: 0; padding: 0; list-style: none; }
.art-coverage li { padding: 0.45rem 0; font-family: var(--hb-serif); font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.25; color: rgba(244, 240, 232, 0.86); }
.art-coverage li a { color: #fff; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--hb-ease); }
.art-coverage li a:hover, .art-coverage li a:focus-visible { background-size: 100% 1px; }
.art-coverage li a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
.art-block { margin-top: clamp(3rem, 6vw, 5rem); }
.art-block > .hb-eyebrow { display: block; margin-bottom: 1.25rem; }
.art-block .art-fleet { margin-top: 0; }
.hb-section--dark .art-fleet figcaption { border-top-color: var(--hb-line-on-dark); color: #fff; }
.hb-section--dark .art-fleet figcaption span { color: var(--hb-champagne); }
.hb-section--dark .art-note { color: rgba(244, 240, 232, 0.6); }
.art-note a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.art-note a:hover, .art-note a:focus-visible { color: var(--hb-gold); }
.hb-section--dark .art-note a { color: var(--hb-champagne); border-color: rgba(200, 183, 156, 0.45); }
.hb-section--dark .art-note a:hover, .hb-section--dark .art-note a:focus-visible { color: #fff; border-color: #fff; }
.art-note a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.art-named { display: flex; flex-wrap: wrap; row-gap: 0.3rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-champagne); line-height: 1.6; }
.art-named li::after { content: "\00B7"; margin: 0 0.7em; color: rgba(200, 183, 156, 0.6); }
.art-named li:last-child::after { content: none; }

.art-teasers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-text); }
.art-teasers li { border-bottom: 1px solid var(--hb-line); }
.art-teasers a { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; padding: clamp(1.25rem, 2.2vw, 1.85rem) 0; color: var(--hb-ink); }
.art-teasers__name { font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem); line-height: 1.15; }
.art-teasers__line { color: var(--hb-text-dim); line-height: 1.7; font-size: 1rem; max-width: 46ch; }
.art-teasers__go { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.art-teasers__go .hb-arrow { display: inline-block; transition: transform 0.25s var(--hb-ease); }
.art-teasers a:hover .art-teasers__name, .art-teasers a:focus-visible .art-teasers__name { color: var(--hb-gold); }
.art-teasers a:hover .art-teasers__go .hb-arrow { transform: translateX(4px); }
.art-teasers a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 4px; }

/* The partner form — quiet fields on the ink section: a hairline under each, visible labels, no boxes */
.art-enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.art-enquiry__head .hb-copy { max-width: 30rem; margin-bottom: 1.5rem; }
.art-enquiry__direct { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.75rem; }
.art-enquiry__aside { margin-top: 2rem; font-size: 0.92rem; line-height: 1.7; color: rgba(244, 240, 232, 0.66); max-width: 30rem; }
.art-enquiry__aside a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.art-enquiry__aside a:hover, .art-enquiry__aside a:focus-visible { color: #fff; border-color: #fff; }
.art-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem clamp(1.25rem, 3vw, 2.25rem); }
.art-form__field { display: flex; flex-direction: column; min-width: 0; }
.art-form__field--wide { grid-column: 1 / -1; }
.art-form label { margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hb-champagne); }
.art-form label i { font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: rgba(244, 240, 232, 0.5); }
.art-form input, .art-form select, .art-form textarea {
  width: 100%; min-height: 2.9rem; padding: 0.5rem 0; border: 0; border-bottom: 1px solid rgba(244, 240, 232, 0.4); border-radius: 0;
  background: transparent; color: #fff; font-family: var(--hb-sans); font-size: 1rem; line-height: 1.5; transition: border-color 0.25s var(--hb-ease);
}
.art-form textarea { min-height: 7rem; resize: vertical; }
.art-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hb-champagne) 50%), linear-gradient(135deg, var(--hb-champagne) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem; }
/* Fallback (Firefox and older browsers): a dark list with ivory text. The highlight colour is the
   browser's own and cannot be set here. */
.art-form select option { color: #f4f0e8; background: #1d1c1a; }
.art-form select option:disabled { color: rgba(244, 240, 232, 0.45); }
/* Customisable select (Chrome / Edge 135+): the closed control and the popup are drawn by us.
   The popup is a quiet ink panel with hairline rules, a champagne tick on the chosen role, and
   a wash of champagne, not the system blue, on the option under the pointer or keyboard. */
@supports (appearance: base-select) {
  .art-form select,
  .art-form select::picker(select) { appearance: base-select; }
  .art-form select { background-image: none; padding-right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
  .art-form select::picker-icon { content: ""; width: 0.5rem; height: 0.5rem; margin-right: 0.15rem; border-right: 1px solid var(--hb-champagne); border-bottom: 1px solid var(--hb-champagne); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--hb-ease); }
  .art-form select:open::picker-icon { transform: translateY(2px) rotate(-135deg); }
  .art-form select::picker(select) {
    margin-top: 0.4rem; padding: 0.35rem 0; border: 1px solid rgba(244, 240, 232, 0.28); border-radius: 2px;
    background: #1d1c1a; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0; transform: translateY(-4px); transition: opacity 0.2s var(--hb-ease), transform 0.2s var(--hb-ease), overlay 0.2s allow-discrete, display 0.2s allow-discrete;
  }
  .art-form select::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style { .art-form select::picker(select):popover-open { opacity: 0; transform: translateY(-4px); } }
  .art-form option {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.55rem 1rem;
    font-family: var(--hb-sans); font-size: 0.98rem; line-height: 1.4; color: rgba(244, 240, 232, 0.86); background: transparent;
    border-top: 1px solid rgba(244, 240, 232, 0.08); cursor: pointer; transition: background-color 0.2s var(--hb-ease), color 0.2s var(--hb-ease);
  }
  .art-form option:first-child { border-top: 0; }
  .art-form option:hover, .art-form option:focus-visible { background: rgba(200, 183, 156, 0.14); color: #fff; outline: none; }
  .art-form option:checked { color: var(--hb-champagne); }
  .art-form option::checkmark { content: ""; order: 2; width: 0.4rem; height: 0.75rem; border-right: 1px solid var(--hb-champagne); border-bottom: 1px solid var(--hb-champagne); transform: rotate(40deg) translateY(-2px); }
  /* The "Select" prompt is only the closed control's starting text, not a choice */
  .art-form option:disabled { display: none; }
  .art-form option:not(:disabled):nth-child(2) { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .art-form select::picker(select), .art-form select::picker-icon, .art-form option { transition: none; }
}
.art-form input::placeholder, .art-form textarea::placeholder { color: rgba(244, 240, 232, 0.4); }
.art-form input:hover, .art-form select:hover, .art-form textarea:hover { border-bottom-color: rgba(244, 240, 232, 0.7); }
.art-form input:focus-visible, .art-form select:focus-visible, .art-form textarea:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; border-bottom-color: transparent; }
.art-form input:user-invalid, .art-form select:user-invalid { border-bottom-color: #e0a89a; }
.art-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.art-form__submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.4rem; }
.art-form__submit .hb-cta { cursor: pointer; }
.art-form__submit .hb-cta:disabled { opacity: 0.6; cursor: progress; }
.art-form__status { min-height: 1.5rem; font-size: 0.95rem; line-height: 1.6; color: var(--hb-champagne); }
.art-form__status[data-state="error"] { color: #e6b3a6; }
.art-form__note { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; line-height: 1.6; color: rgba(244, 240, 232, 0.5); }

/* ---------------------------------------------------------------------
   4d. BUSINESS-TRAVEL PATTERNS
   The hub steps rail on an ink section (the hub layer draws it on ivory), and a pair of small plates.
   ------------------------------------------------------------------- */
.hb-section--dark .hub-step { border-top-color: rgba(244, 240, 232, 0.5); }
.hb-section--dark .hub-step__ord { color: var(--hb-champagne); }
.hb-section--dark .hub-step__name { color: #fff; }
.hb-section--dark .hub-step p { color: rgba(244, 240, 232, 0.72); }
.hb-section--dark .hub-step a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
/* A ledger row title with no link (a service that has no page of its own) matches the linked ones */
.hub-ledger tbody th.hub-ledger__cap { font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.1; color: var(--hb-ink); }
.hub-ledger tbody th.hub-ledger__cap a { font-size: inherit; }
/* The four letters of the acronym, set as the page's signature: letter, word, one line */
.art-acronym { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-line-on-dark); }
.art-acronym li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-acronym__letter { font-family: var(--hb-serif); font-weight: 500; font-size: 2.9rem; line-height: 0.85; color: var(--hb-champagne); }
.art-acronym strong { display: block; font-family: var(--hb-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.art-acronym__def { display: block; font-size: 0.98rem; line-height: 1.6; color: rgba(244, 240, 232, 0.76); }
.art-acronym-note { margin-top: 1.1rem; font-size: 0.9rem !important; color: rgba(244, 240, 232, 0.66) !important; }
.art-plates.art-plates--md { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: start; margin-top: clamp(2rem, 4vw, 3rem); }
.art-plates.art-plates--md .art-plate { max-width: 260px; }
.art-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 1rem; justify-content: end; align-items: start; }
.art-plates .art-plate { max-width: 200px; }

/* ---------------------------------------------------------------------
   4e. HOTEL BRANDS — the named brand register (Accommodation). A still, ruled grid rather than the moving
   marquee: each logo is paired with its name as text, so the brands read as content, not decoration.
   The logos are white on transparent, so this block belongs on an ink section.
   ------------------------------------------------------------------- */
.art-brands { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-brands li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.1rem; padding: clamp(1.6rem, 3vw, 2.4rem) 1rem clamp(1.2rem, 2vw, 1.6rem); border-bottom: 1px solid var(--hb-line-on-dark); }
.art-brands li:not(:nth-child(5n)) { border-right: 1px solid var(--hb-line-on-dark); }
.art-brands img { display: block; width: 150px; max-width: 100%; height: auto; opacity: 0.92; }
.art-brands__name { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); text-align: center; }

/* ---------------------------------------------------------------------
   4f. PROPOSAL EXCERPT — an illustrative page of a client proposal (Travel Advisors). A plain sheet on the
   ivory section: hairline border, no shadow, no rounding. Content is real text, so it reads and indexes.
   ------------------------------------------------------------------- */
.art-doc { margin: 0; max-width: 34rem; background: #fff; border: 1px solid var(--hb-line); padding: clamp(1.5rem, 3vw, 2.4rem); }
.art-doc__head { padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--hb-text); }
.art-doc__kicker { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); margin-bottom: 0.45rem; }
.art-doc__title { display: block; font-family: var(--hb-serif); font-size: 1.55rem; line-height: 1.2; color: var(--hb-ink); }
.art-doc__days { margin: 0; padding: 0; list-style: none; }
.art-doc__days li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--hb-line); }
.art-doc__day { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hb-gold); padding-top: 0.25rem; }
.art-doc__place { display: block; font-family: var(--hb-serif); font-size: 1.2rem; line-height: 1.25; color: var(--hb-ink); margin-bottom: 0.25rem; }
.art-doc__days p { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--hb-text-dim); }
.art-doc__stay { display: block; margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--hb-ink); }
.art-doc__more { margin: 0; padding: 0.95rem 0; border-bottom: 1px solid var(--hb-line); font-family: var(--hb-serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--hb-text-dim); }
.art-doc figcaption { margin-top: 1rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-text-dim); }

/* ---------------------------------------------------------------------
   4g. COVERAGE ON IVORY, WITH THE MAP — the destinations map partial (.hub-map, styled in the hub layer)
   beside the coverage regions. A place in the list and its pin light up together (js/hub.js, data-place /
   data-pin). Used by DMC Partners.
   ------------------------------------------------------------------- */
.hb-section--ivory .art-coverage { border-top-color: var(--hb-text); }
.hb-section--ivory .art-coverage__region { border-bottom-color: var(--hb-line); }
.hb-section--ivory .art-coverage__name { color: var(--hb-gold); }
.hb-section--ivory .art-coverage li { color: var(--hb-ink); }
.hb-section--ivory .art-coverage li a { color: var(--hb-ink); }
.hb-section--ivory .art-coverage li a:focus-visible { outline-color: var(--hb-gold); }
.art-coverage li[data-place] { transition: color 0.25s var(--hb-ease); }
.art-coverage li[data-place].is-active, .art-coverage li[data-place].is-active a { color: var(--hb-gold); }
.art-geo .art-coverage { grid-template-columns: minmax(0, 1fr); }
.art-geo .art-coverage__region { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.5rem 1.5rem; align-items: baseline; }
.art-geo .art-coverage ul { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.art-geo .art-coverage li { padding: 0.3rem 0; }
.art-geo .art-coverage__name { margin: 0; font-family: var(--hb-sans); }

/* ---------------------------------------------------------------------
   4h. SAMPLE JOURNEYS — the homepage filmstrip card (portrait photograph, scrim, days, title, a way in),
   set as a small still row on the journey pages: only the sample journeys that suit this kind of traveller.
   Swipes sideways on phones, like the homepage strip.
   ------------------------------------------------------------------- */
.art-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.art-samples--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.art-samples--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-sample { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--hb-ink); color: #fff; }
.art-sample img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--hb-ease); }
.art-sample::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(21, 21, 21, 0.88) 0%, rgba(21, 21, 21, 0.35) 48%, rgba(21, 21, 21, 0) 72%); }
.art-sample__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.art-sample__days { margin-bottom: 0.45rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-champagne); }
.art-sample__title { width: fit-content; margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid transparent; font-family: var(--hb-serif); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.2; transition: border-color 0.3s var(--hb-ease); }
.art-sample__why { margin-bottom: 0.8rem; font-size: 0.86rem; line-height: 1.55; color: rgba(251, 250, 247, 0.84); }
.art-sample__go { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-champagne); }
.art-sample__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.art-sample:hover img, .art-sample:focus-visible img { transform: scale(1.04); }
.art-sample:hover .art-sample__title, .art-sample:focus-visible .art-sample__title { border-color: var(--hb-gold); }
.art-sample:hover .art-sample__go .hb-arrow, .art-sample:focus-visible .art-sample__go .hb-arrow { transform: translateX(4px); }
.art-sample:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }
.art-samples-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.art-samples-head .hb-heading { margin-bottom: 0; }

/* A ruled list of occasions or moments: a short name, then one line. Lighter than the register. */
.art-moments { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--hb-text); }
.art-moments li { padding: clamp(1.2rem, 2.2vw, 1.7rem) 0; border-bottom: 1px solid var(--hb-line); }
.art-moments h3 { margin: 0 0 0.45rem; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.2; color: var(--hb-ink); }
.art-moments p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); max-width: 46ch; }
.art-moments a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); }
.art-moments a:hover, .art-moments a:focus-visible { color: var(--hb-gold); }
.hb-section--dark .art-moments { border-top-color: rgba(244, 240, 232, 0.5); }
.hb-section--dark .art-moments li { border-bottom-color: var(--hb-line-on-dark); }
.hb-section--dark .art-moments h3 { color: #fff; }
.hb-section--dark .art-moments p { color: rgba(244, 240, 232, 0.76); }
.hb-section--dark .art-moments a { color: var(--hb-champagne); border-color: rgba(200, 183, 156, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .art-sample img, .art-sample__title, .art-sample__go .hb-arrow { transition: none; }
}

/* ---------------------------------------------------------------------
   4i. THE RIVER — the Nile between Luxor and Aswan drawn as one gold line (the map's Nile stroke), with the
   stops in their real order along it. The order is information: it is the sailing. Luxor Nile Cruise page.
   ------------------------------------------------------------------- */
.art-river { position: relative; margin: 0; padding: 0 0 0 2.75rem; list-style: none; }
.art-river::before { content: ""; position: absolute; left: 0.62rem; top: 0.9rem; bottom: 0.9rem; width: 2px; border-radius: 2px; background: var(--hb-gold); }
.art-river__stop { position: relative; padding: 0 0 clamp(1.75rem, 3vw, 2.4rem); }
.art-river__stop:last-child { padding-bottom: 0; }
.art-river__stop::before { content: ""; position: absolute; left: -2.75rem; top: 0.55rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--hb-white); border: 2px solid var(--hb-gold); box-sizing: border-box; }
.art-river__stop--end::before { background: var(--hb-gold); }
.art-river__place { margin: 0; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.5rem); line-height: 1.1; color: var(--hb-ink); }
.art-river__bank { display: block; margin-top: 0.3rem; font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); }
.art-river__stop p { margin: 0.65rem 0 0; font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); max-width: 52ch; }
.art-river__stop .hub-named { margin-top: 0.75rem; }
.art-river__stop a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); }
.art-river__stop a:hover, .art-river__stop a:focus-visible { color: var(--hb-gold); }
.art-river-dir { margin-top: 1.25rem; font-family: var(--hb-serif); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--hb-text-dim); max-width: 26ch; }

/* ---------------------------------------------------------------------
   4j. SAMPLE JOURNEY PAGES — the packages hub's nights ribbon, enlarged for the hero (river nights in
   brass), and the itinerary as numbered days. The numbers are a real sequence: day one, day two.
   A day on the river carries the same brass as its nights in the ribbon.
   ------------------------------------------------------------------- */
.hub-nights.art-nights { width: 100%; min-width: 0; margin: 1.75rem 0 0.6rem; }
/* A one-night stop is never narrower than its own name */
.hub-nights.art-nights li { min-width: max-content; padding-right: 0.6rem; }
.hub-hero .art-nights li { border-top-color: rgba(244, 240, 232, 0.55); color: rgba(244, 240, 232, 0.72); font-size: 0.64rem; letter-spacing: 0.1em; padding-top: 0.6rem; }
.hub-hero .art-nights li.is-river { border-top-color: var(--hb-champagne); color: var(--hb-champagne); }
.hub-hero .art-nights b { color: #fff; font-size: 1.6rem; margin-top: 0.3rem; }
.art-nights-note { margin: 0; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(244, 240, 232, 0.55); }

.art-days { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-text); }
.art-day { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--hb-line); }
.art-day__when { display: flex; flex-direction: column; gap: 0.45rem; }
.art-day .art-day__num { margin: 0; max-width: none; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 0.9; color: var(--hb-ink); font-variant-numeric: lining-nums; }
.art-day .art-day__num span { display: block; margin-bottom: 0.4rem; font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-text-dim); }
.art-day__stay { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-text-dim); }
.art-day.art-day--river .art-day__num, .art-day--river .art-day__stay { color: var(--hb-gold); }
.art-day h3 { margin: 0 0 0.6rem; font-family: var(--hb-serif); font-weight: 500; font-size: var(--hb-h3); line-height: 1.2; color: var(--hb-ink); }
.art-day p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--hb-text-dim); max-width: 58ch; }
.art-day .hub-named { margin-top: 0.85rem; }
.art-day__img { margin: 0; }
.art-day__img img { display: block; width: 100%; max-width: 170px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; margin-left: auto; background: var(--hb-ink-soft); }
.art-days-note { margin-top: 1.25rem; font-size: 0.86rem; line-height: 1.7; color: var(--hb-text-dim); max-width: 62ch; }

/* Included / not included — two ruled lists, no icons */
.art-incl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(2rem, 6vw, 6rem); }
.art-incl h3 { margin: 0 0 0.9rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
.art-incl ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-incl li { padding: 0.8rem 0; border-bottom: 1px solid var(--hb-line-on-dark); font-size: 1rem; line-height: 1.6; color: rgba(244, 240, 232, 0.86); }
.art-incl__not li { color: rgba(244, 240, 232, 0.6); }
@media (max-width: 1023.98px) {
  .art-day { grid-template-columns: minmax(0, 1fr) minmax(0, 120px); }
  .art-day__when { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 1rem; }
  .art-day .art-day__num span { display: inline; margin: 0 0.5rem 0 0; }
  .art-day__img img { max-width: 120px; }
  .art-incl { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 519.98px) {
  .art-day { grid-template-columns: minmax(0, 1fr); }
  .art-day__img { display: none; }
  .art-day__when { flex-direction: column; gap: 0.35rem; }
}

/* ---------------------------------------------------------------------
   4k. DESTINATION PAGES — the "where it sits" locator: the hub's schematic map (egypt-map partial) drawn
   quietly on ink, every place a faint dot and only this one lit and named. data-here names the place.
   And the briefing notes: what an advisor needs before briefing a client, as a ruled definition list.
   ------------------------------------------------------------------- */
.art-locator { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; max-width: 300px; }
.art-locator .hub-map__land { fill: rgba(244, 240, 232, 0.045); stroke: rgba(244, 240, 232, 0.32); }
.art-locator .hub-map__nile { stroke: rgba(200, 183, 156, 0.7); }
.art-locator .hub-map__regions, .art-locator .hub-map__leader, .art-locator .hub-map__pin text { display: none; }
.art-locator .hub-map__pin { pointer-events: none; cursor: default; }
.art-locator .hub-map__dot { fill: rgba(244, 240, 232, 0.3); r: 4; }
.art-locator figcaption { margin-top: 0.75rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 232, 0.55); }
.art-locator figcaption b { color: var(--hb-champagne); font-weight: 600; }

.art-locator[data-here="cairo"] [data-pin="cairo"] .hub-map__dot, .art-locator[data-here="luxor"] [data-pin="luxor"] .hub-map__dot,
.art-locator[data-here="aswan"] [data-pin="aswan"] .hub-map__dot, .art-locator[data-here="abu-simbel"] [data-pin="abu-simbel"] .hub-map__dot,
.art-locator[data-here="siwa"] [data-pin="siwa"] .hub-map__dot, .art-locator[data-here="white-desert"] [data-pin="white-desert"] .hub-map__dot,
.art-locator[data-here="alexandria"] [data-pin="alexandria"] .hub-map__dot, .art-locator[data-here="el-alamein"] [data-pin="el-alamein"] .hub-map__dot,
.art-locator[data-here="marsa-matrouh"] [data-pin="marsa-matrouh"] .hub-map__dot, .art-locator[data-here="hurghada"] [data-pin="hurghada"] .hub-map__dot,
.art-locator[data-here="sharm-el-sheikh"] [data-pin="sharm-el-sheikh"] .hub-map__dot, .art-locator[data-here="marsa-alam"] [data-pin="marsa-alam"] .hub-map__dot,
.art-locator[data-here="safaga"] [data-pin="safaga"] .hub-map__dot, .art-locator[data-here="dahab"] [data-pin="dahab"] .hub-map__dot,
.art-locator[data-here="taba"] [data-pin="taba"] .hub-map__dot { fill: var(--hb-champagne); r: 13; stroke: rgba(200, 183, 156, 0.28); stroke-width: 22; paint-order: stroke; }
.art-locator[data-here="cairo"] [data-pin="cairo"] text, .art-locator[data-here="luxor"] [data-pin="luxor"] text, .art-locator[data-here="aswan"] [data-pin="aswan"] text, .art-locator[data-here="abu-simbel"] [data-pin="abu-simbel"] text, .art-locator[data-here="siwa"] [data-pin="siwa"] text, .art-locator[data-here="white-desert"] [data-pin="white-desert"] text, .art-locator[data-here="alexandria"] [data-pin="alexandria"] text, .art-locator[data-here="el-alamein"] [data-pin="el-alamein"] text, .art-locator[data-here="marsa-matrouh"] [data-pin="marsa-matrouh"] text, .art-locator[data-here="hurghada"] [data-pin="hurghada"] text, .art-locator[data-here="sharm-el-sheikh"] [data-pin="sharm-el-sheikh"] text, .art-locator[data-here="marsa-alam"] [data-pin="marsa-alam"] text, .art-locator[data-here="safaga"] [data-pin="safaga"] text, .art-locator[data-here="dahab"] [data-pin="dahab"] text, .art-locator[data-here="taba"] [data-pin="taba"] text { display: block; font-size: 40px; letter-spacing: 0.08em; fill: #fff; }

.art-notes { margin: 0; padding: 0; border-top: 1px solid rgba(244, 240, 232, 0.5); }
.art-notes > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0.4rem clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.art-notes dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); padding-top: 0.3rem; }
.art-notes dd { margin: 0; font-size: 1.02rem; line-height: 1.75; color: rgba(244, 240, 232, 0.8); max-width: 62ch; }
.art-notes dd a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.art-notes dd a:hover, .art-notes dd a:focus-visible { color: #fff; border-color: #fff; }
.hb-section--ivory .art-notes, .hb-section--white .art-notes { border-top-color: var(--hb-ink); }
.hb-section--ivory .art-notes > div, .hb-section--white .art-notes > div { border-bottom-color: var(--hb-line); }
.hb-section--ivory .art-notes dt, .hb-section--white .art-notes dt { color: var(--hb-gold); }
.hb-section--ivory .art-notes dd, .hb-section--white .art-notes dd { color: var(--hb-text-dim); }
.hb-section--ivory .art-notes dd a, .hb-section--white .art-notes dd a { color: var(--hb-ink); border-bottom-color: var(--hb-gold); }
.hb-section--ivory .art-notes dd a:hover, .hb-section--ivory .art-notes dd a:focus-visible,
.hb-section--white .art-notes dd a:hover, .hb-section--white .art-notes dd a:focus-visible { color: var(--hb-gold); border-bottom-color: var(--hb-gold); }
.art-checklist__foot { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; max-width: 62ch; font-size: 1rem; line-height: 1.8; color: var(--hb-text-dim); }
.art-checklist__foot a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); }
.art-checklist__foot a:hover, .art-checklist__foot a:focus-visible { color: var(--hb-gold); }
@media (max-width: 767.98px) { .art-notes > div { grid-template-columns: minmax(0, 1fr); } .art-locator { max-width: 240px; } }

/* Two ways down the river, side by side, each led by its photograph */
.art-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
.art-way figure { margin: 0 0 1.4rem; }
.art-way img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--hb-ink-soft); }
.art-way h3 { margin: 0 0 0.35rem; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.1; color: #fff; }
.art-way__role { margin: 0 0 1rem; font-family: var(--hb-serif); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--hb-champagne); }
.art-way p { font-size: 1rem; line-height: 1.8; color: rgba(244, 240, 232, 0.76); }
.art-way .art-facts { margin-top: 1.25rem; }
@media (max-width: 1023.98px) { .art-ways { grid-template-columns: minmax(0, 1fr); } }
.hb-section--ivory .art-way h3, .hb-section--white .art-way h3 { color: var(--hb-ink); }
.hb-section--ivory .art-way__role, .hb-section--white .art-way__role { color: var(--hb-gold); }
.hb-section--ivory .art-way p, .hb-section--white .art-way p { color: var(--hb-text-dim); }
.art-way .hub-named { margin-top: 1rem; }
.art-way .art-entry h3 { font-size: var(--hb-h3); }
.art-way p + p { margin-top: 0.9rem; }
.art-way a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.art-way a:hover, .art-way a:focus-visible { color: #fff; border-color: #fff; }
.hb-section--ivory .art-way a, .hb-section--white .art-way a { color: var(--hb-ink); border-bottom-color: var(--hb-gold); }
.hb-section--ivory .art-way a:hover, .hb-section--ivory .art-way a:focus-visible,
.hb-section--white .art-way a:hover, .hb-section--white .art-way a:focus-visible { color: var(--hb-gold); }

/* ---------------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .art-plates { justify-content: start; order: 2; }
  .hb-section--dark .hub-steps { border-left-color: rgba(244, 240, 232, 0.5); }
}
@media (max-width: 1099.98px) {
  .art-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .art-split, .art-duo, .art-duo--text-first { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .art-split__head { position: static; }
  .art-duo .art-plate { order: -1; }
  .art-duo--text-first .art-plate { order: 2; }
  .hb-section--ivory .art-plate { max-width: 300px; }
}
@media (max-width: 1023.98px) {
  .art-register__row, .art-cases__row { grid-template-columns: minmax(0, 1fr); }
  .art-cases__moment { max-width: 20ch; }
  .art-req__row--text .art-req__body { grid-column: 1 / -1; }
  .art-req__row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .art-req__go { grid-column: 2; }
}
@media (max-width: 639.98px) {
  .art-req__row { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-items: start; }
  .art-req__media { max-width: 420px; }
  .art-req__go, .art-req__row--text .art-req__body { grid-column: auto; }
}
@media (max-width: 1023.98px) {
  .art-enquiry { grid-template-columns: minmax(0, 1fr); }
  .art-coverage { grid-template-columns: minmax(0, 1fr); }
  .art-teasers a { grid-template-columns: minmax(0, 1fr) auto; }
  .art-teasers__line { grid-column: 1; }
  .art-teasers__go { grid-column: 2; grid-row: 1; }
}
@media (max-width: 639.98px) {
  .art-form { grid-template-columns: minmax(0, 1fr); }
  .art-standing { grid-template-columns: minmax(0, 1fr); }
  .art-standing > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; }
  .art-standing dt { margin: 0; }
}
@media (max-width: 1023.98px) {
  .art-samples--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-geo .art-coverage__region { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  /* Sample journeys swipe sideways, as the homepage strip does */
  .art-samples, .art-samples--2, .art-samples--3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); padding-right: clamp(1.25rem, 4vw, 2.5rem); }
  .art-samples::-webkit-scrollbar { display: none; }
  .art-samples > li { flex: 0 0 82%; scroll-snap-align: start; }
  .art-moments { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .art-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-brands li:not(:nth-child(5n)) { border-right: 0; }
  .art-brands li:nth-child(odd) { border-right: 1px solid var(--hb-line-on-dark); }
  .art-brands img { width: 120px; }
  .art-contrast { grid-template-columns: minmax(0, 1fr); }
  .art-facts { grid-template-columns: minmax(0, 1fr); }
  .art-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.85rem 0; }
  .art-facts dt { margin: 0; }
  .art-facts dd { font-size: 1.2rem; }
  .art-fleet { grid-template-columns: minmax(0, 1fr); }
  .art-fleet figcaption { font-size: 1.2rem; }
  /* The matrix becomes a stack: client, then the way, then the reason */
  .art-matrix, .art-matrix tbody, .art-matrix tr, .art-matrix th, .art-matrix td { display: block; }
  .art-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .art-matrix tbody tr { padding: 1.5rem 0; border-bottom: 1px solid var(--hb-line-on-dark); }
  .art-matrix tbody tr:first-child { border-top: 1px solid rgba(244, 240, 232, 0.5); }
  .art-matrix tbody th, .art-matrix tbody td { width: auto; padding: 0; border: 0; }
  .art-matrix__way { margin: 0.3rem 0 0.75rem; }
}