/* Sahara sunset (Ali 2026-10-13, option 2 of 3): ONE colour world for the whole site, like the festival site.
   The stage = deep terracotta with slow drifting sunset light; never a white page.
   Content that must be read in detail sits on warm sand panels (ink text). Text on the stage is cream/white.
   Loaded LAST, after styles.css. Contrast: --on (#FFF1E2) on --dune-1 (#6E2410) = 10.6:1; ink on --panel = 15:1. */
:root {
  --dune-0: #3A1309; --dune-1: #6E2410; --dune-2: #9C3415; --dune-3: #C9562A; --sun: #F4A93A; --sun-hi: #FFD08A;
  --on: #FFF1E2; --on-dim: rgba(255, 236, 214, .8); --panel: #FFF6EC; --panel-2: #FBE9D6;
  --terra: #C2410C; --terra-d: #9A3412; --terra-l: #FDE6D3;
  --cream: var(--panel); --paper: var(--panel-2); --white: var(--panel);
  --line: #F0D9BF;
  color-scheme: light;
}
body { background: var(--dune-1); color: var(--on); }
/* the Sahara behind everything: slow drifting sunset light */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 78% 18%, rgba(244, 169, 58, .55), transparent 70%),
    radial-gradient(45% 40% at 15% 70%, rgba(201, 86, 42, .55), transparent 70%),
    radial-gradient(35% 30% at 60% 95%, rgba(255, 208, 138, .22), transparent 70%),
    linear-gradient(165deg, var(--dune-0) 0%, var(--dune-1) 45%, var(--dune-2) 100%);
  animation: dunes 40s ease-in-out infinite alternate;
}
@keyframes dunes { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* headings with more character: heavier Fraunces, sun-coloured italics */
h1, h2 { font-weight: 700; font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.025em; }
h1 em, h2 em { font-style: italic; color: var(--sun); }

/* every section sits on the stage */
.sec, .sec.alt, .sec.red, .sec.green, .sec.night, .facts-sec, .map-sec, .chap, .chap:nth-of-type(odd):not(.chap-dark), .chap:nth-of-type(even):not(.chap-dark),
.home-hero, .detail-head, .slides-sec, .plan, main { background: transparent; }
.sec.alt, .chap:nth-of-type(even):not(.chap-dark), .map-sec { background: rgba(58, 19, 9, .28); }
.sec.red, .sec.green { background: linear-gradient(135deg, rgba(201, 86, 42, .55), rgba(58, 19, 9, .35)); }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, .detail-head, .hero, .qf-band, .team-sec, main) { color: var(--on); }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) :is(h1, h2, h3) { color: #fff; }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) .lead,
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) .chap-lead { color: var(--on-dim); }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) :is(.small, .muted, .tiny, .sources, .stats-note) { color: var(--on-dim); }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) a:not(.btn) { color: var(--sun-hi); }
:where(.sec, .chap, .home-hero, .map-sec, .facts-sec, main) .sec-head > a { color: var(--sun); }
.kicker, .sec.red .kicker, .sec.green .kicker, .sec.night .kicker { color: var(--sun); }
.kicker::before, .sec.red .kicker::before, .sec.green .kicker::before, .sec.night .kicker::before { background: var(--sun); box-shadow: 12px 0 0 var(--on); }
.chap-n span { color: var(--sun); }
:where(.sec, .chap, main) .btn-ghost { background: rgba(255, 241, 226, .12); color: var(--on); }
:where(.sec, .chap, main) .btn-ghost:hover { background: rgba(255, 241, 226, .2); color: #fff; }
.btn-primary { background: var(--terra); box-shadow: 0 8px 22px -8px rgba(194, 65, 12, .7); }
.btn-primary:hover { background: #DC4F12; }
.btn-gold { background: var(--sun); color: var(--dune-0); }
.btn-gold:hover { background: var(--sun-hi); color: var(--dune-0); }
.check li::before { background-color: var(--sun) !important; }

/* warm sand panels: detailed reading happens here (ink text) */
:is(.card, .fact, .side-card, .pcard, .route, .stepcard, .vtile, .wk, .intake, .t-card, .empty, details, .lead-form, .arrive, .goodtk li, .pt,
    .lc-pill, .mc-row, .map-box, .promo-kit, .filters, .builder, .contact, .riad, .plate, .table-wrap, .who-opt span, .arrive-card, .stepcard li) {
  background: var(--panel); color: var(--ink);
}
:is(.card, .fact, .side-card, .pcard, .route, .stepcard, .vtile, .wk, .intake, .t-card, .empty, details, .lead-form, .arrive, .goodtk li, .pt,
    .lc-pill, .mc-row, .map-box, .promo-kit, .filters, .builder, .contact, .riad, .plate, .table-wrap, .arrive-card) :is(h1, h2, h3, b, summary) { color: var(--ink); }
:is(.card, .fact, .side-card, .pcard, .route, .stepcard, .vtile, .wk, .intake, .t-card, .empty, details, .lead-form, .arrive, .goodtk li, .pt,
    .lc-pill, .mc-row, .map-box, .promo-kit, .filters, .builder, .contact, .riad, .plate, .table-wrap, .arrive-card) :is(.small, .muted, .tiny, .sources, small, .lead) { color: var(--muted); }
:is(.card, .fact, .side-card, .pcard, .route, .stepcard, .vtile, .wk, .intake, .t-card, .empty, details, .lead-form, .arrive, .goodtk li, .pt,
    .lc-pill, .mc-row, .map-box, .promo-kit, .filters, .builder, .contact, .riad, .plate, .table-wrap, .arrive-card) a:not(.btn) { color: var(--terra-d); }
:is(.card, .side-card, .stepcard, .empty, details, .lead-form, .arrive, .filters, .builder, .plate, .promo-kit, .arrive-card) .btn-ghost { background: rgba(58, 19, 9, .07); color: var(--ink); }
.kicker:where(.card *, .plate *, .riad *, .lead-form *, .arrive *) { color: var(--terra-d); }
/* the opportunity eyebrow / SDG greens on sand stay readable */
.card .eyebrow { color: var(--terra-d); }

/* page heroes = sunset fields */
.hero, .hero-green, .hero-night, .hero-partner { background: linear-gradient(140deg, rgba(201, 86, 42, .9) 0%, rgba(110, 36, 16, .92) 60%, rgba(58, 19, 9, .95) 100%); }
.hero::before { background: radial-gradient(circle, rgba(244, 169, 58, .5), transparent 65%); }

/* dark bands with real zellige: sunset veil instead of indigo/green */
.qf { background: rgba(42, 14, 6, .93); }
.qf-band .tiny, .qf-band .kicker { background: rgba(42, 14, 6, .9); }
.chap-dark .goodtk li, .chap-dark .phrase { background: rgba(42, 14, 6, .9); color: var(--on); }
.chap-dark .goodtk li span { color: var(--on); }
.chap-dark .readmore.is-clamped::after { background: linear-gradient(rgba(58, 19, 9, 0), #4A1A0C); }
.team-cta { background: linear-gradient(135deg, var(--dune-3), var(--dune-1)); }
.readmore.is-clamped::after { background: linear-gradient(rgba(110, 36, 16, 0), rgba(110, 36, 16, .95)); }
.chap-nav { background: rgba(42, 14, 6, .92); }
.chap-nav a:hover, .chap-nav a.on { background: var(--sun); color: var(--dune-0); }

/* home pieces on the stage */
.slide, .slide-text { background: linear-gradient(160deg, #4A1A0C 0%, #2A0E06 100%); }
.slide-k { color: var(--sun); }
.dot[aria-current="true"]::after { background: var(--sun); }
.lc-card { background: rgba(255, 241, 226, .1); }
.lc-card small, .lc-card i { color: var(--sun); }
.city-tile figcaption, .city-tile figcaption a, .arches2 figcaption, .arches2 figcaption a, .city-split-img figcaption, .city-split-img figcaption a,
.mfig figcaption, .mfig figcaption a { color: var(--on-dim) !important; }
.rail-btn { background: var(--panel); color: var(--ink); }
.proj-pills a { background: rgba(255, 241, 226, .12); color: var(--on); box-shadow: none; }
.proj-pills a:hover { background: var(--sun); color: var(--dune-0); }
.chips2 .chip2:not(.pref) { background: var(--terra); }
.site-foot { background: rgba(42, 14, 6, .96); }
.site-head { background: rgba(42, 14, 6, .9); }

/* ---- full-screen hero: crossfading city photos (CSS only), welcome, search, countdown ---- */
.sun-hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; isolation: isolate; }
.sh-slides { position: absolute; inset: 0; z-index: -2; background: var(--dune-0); }
.sh-slide { position: absolute; inset: 0; margin: 0; opacity: 0; animation: sh-fade 35s infinite; animation-delay: calc(var(--i) * 7s); }
.sh-slide img { width: 100%; height: 100%; object-fit: cover; animation: sh-zoom 35s infinite; animation-delay: calc(var(--i) * 7s); }
.sh-slide figcaption { position: absolute; right: 14px; bottom: 10px; font-size: .68rem; color: rgba(255,255,255,.7); }
.sh-slide figcaption a { color: inherit; }
@keyframes sh-fade { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sh-zoom { 0% { transform: scale(1.12); } 24% { transform: scale(1); } 100% { transform: scale(1); } }
.sh-slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sh-slide, .sh-slide img { animation: none; } .sh-slide:not(:first-child) { display: none; } }
.sh-veil { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(42,14,6,.15) 0%, rgba(42,14,6,.25) 35%, rgba(58,19,9,.82) 72%, var(--dune-1) 100%),
  radial-gradient(60% 50% at 85% 10%, rgba(244,169,58,.35), transparent 70%); }
.sh-in { position: relative; padding-top: 120px; padding-bottom: 44px; width: 100%; }
.sun-hero h1 { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1; max-width: 14ch; text-shadow: 0 4px 30px rgba(0,0,0,.35); margin-bottom: .3em; }
.sun-hero h1 em { color: var(--sun); }
.sun-hero .lead { color: var(--on); font-size: 1.2rem; max-width: 52ch; }
.sun-hero .greet { margin-bottom: 14px; }
.sh-search { max-width: 980px; margin-top: 22px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.sh-chips > span, .sh-count { background: rgba(42,14,6,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: .5em 1em; font: 500 .92rem var(--sans); color: var(--on); text-decoration: none; }
.sh-chips b { font-weight: 700; color: var(--sun); margin-right: 3px; }
.sh-count { background: var(--sun); color: var(--dune-0) !important; font-weight: 600; display: inline-flex; gap: .5em; align-items: center; }
.sh-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
.sun-hero .stats-note { color: rgba(255,241,226,.7); text-align: left; margin-top: 10px; }

/* ticker band under the hero */
.ticker { overflow: hidden; background: var(--sun); color: var(--dune-0); padding: 12px 0; }
.ticker-track { display: flex; width: max-content; gap: 22px; animation: tick 60s linear infinite; font: 700 1rem var(--sans); letter-spacing: .02em; white-space: nowrap; }
.ticker-track i { font-style: normal; opacity: .55; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* fixes from the first Sahara screenshots */
.hh-text h1 em { color: var(--sun); }
.quick a { background: rgba(255,241,226,.14); color: var(--on); }
.quick a:hover { background: var(--sun); color: var(--dune-0); }
.mtile { background: var(--panel); color: var(--ink); }
.mtile b, .mtile span { color: var(--ink); } .mtile span { color: var(--muted); }
/* reduced motion: photo strip scrolls sideways instead of wrapping into a wall of photos */
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { flex-wrap: nowrap; width: max-content; } }

/* more sand panels found in the page sweep (plan articles, key facts, city cards, plan nav) */
:is(.plan article, .keyfacts > div, .city-card, .plan-nav a, .mtile, .who-opt span) { background: var(--panel); color: var(--ink); }
:is(.plan article, .keyfacts > div, .city-card) :is(h1, h2, h3, b, dd, li, p) { color: var(--ink); }
:is(.plan article, .keyfacts > div, .city-card) :is(.small, .muted, small, dt) { color: var(--muted); }
:is(.plan article, .keyfacts > div, .city-card) a:not(.btn) { color: var(--terra-d); }
.city-card .n { color: var(--terra-d); }
.keyfacts div:first-child dd { color: var(--terra); }
.plan-nav { background: transparent; }
.plan-nav a:hover { background: var(--sun); color: var(--dune-0); }
.plan .notice, .sec .notice { background: var(--sun-hi); color: var(--dune-0); }
/* contrast sweep fixes (2026-10-13) */
:is(.post, .feed-side, .qr-fig, .empty) { background: var(--panel); color: var(--ink); }
:is(.post, .feed-side, .qr-fig) :is(b, p, span, h3, figcaption, small) { color: var(--ink); }
:is(.post, .feed-side, .qr-fig) :is(.small, .post-tag, time) { color: var(--muted); }
.empty .empty-line { color: var(--muted); }
.story-name { color: var(--on); }
code { background: var(--panel-2); color: var(--ink); }
.feed-filter button { color: var(--ink); }

/* ---- cream breathing spaces (Ali 2026-10-14: "too orange, we need white/creamy spaces"; stories page stays white) ----
   Rhythm: terracotta stage, then a cream section, then stage again. Cards on cream are pure white. */
:root { --cream-bg: #FBF5EC; }
.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero) { background: var(--cream-bg); color: var(--ink); }
body.light-page { background: var(--cream-bg); }
body.light-page::before { display: none; }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) {
  --panel: #FFFFFF;
}
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) :is(h1, h2, h3) { color: var(--ink); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) :is(.lead, .chap-lead, p) { color: #3F362F; }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) :is(.small, .muted, .tiny, .sources, .stats-note, figcaption, small) { color: var(--muted) !important; }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) a:not(.btn) { color: var(--terra-d); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) figcaption a { color: var(--muted) !important; }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) .sec-head > a { color: var(--terra-d); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) .kicker { color: var(--terra-d); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) .kicker::before { background: var(--terra); box-shadow: 12px 0 0 var(--sun); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) .btn-ghost { background: rgba(58, 19, 9, .07); color: var(--ink); }
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark), body.light-page main > section:not(.hero)) :is(.card, .fact, .side-card, .pcard, .route, .stepcard, .vtile, .wk, .intake, .t-card, .empty, details, .pt, .lc-pill, .mc-row, .map-box, .mtile, .post, .feed-side, .city-card, .keyfacts > div, .contact) {
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(58,19,9,.05), 0 10px 28px -12px rgba(58,19,9,.2);
}
:is(.cream, .sec.alt, .map-sec, .chap:nth-of-type(even):not(.chap-dark)) .readmore.is-clamped::after { background: linear-gradient(rgba(251,245,236,0), var(--cream-bg)); }
:is(.cream, .sec.alt) .proj-pills a, :is(.cream, .sec.alt) .quick a { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow); }
:is(.cream, .sec.alt) .rail-btn { background: var(--ink); color: #fff; }
body.light-page .story-name { color: var(--ink); }
body.light-page .feed-filter button { background: #fff; }

/* ---- no zellige photo backgrounds (Ali 2026-10-14: "looks so old, we need modern") ----
   Dark bands = clean deep gradient + soft sun glow, nothing textured. */
.qf-band, .chap-dark, .team-sec {
  background:
    radial-gradient(55% 70% at 85% 0%, rgba(244, 169, 58, .28), transparent 65%),
    radial-gradient(45% 60% at 0% 100%, rgba(201, 86, 42, .35), transparent 70%),
    linear-gradient(160deg, #2A0E06 0%, #4A1A0C 55%, #3A1309 100%);
}
.qf { background: rgba(255, 241, 226, .06); box-shadow: none; border: 1px solid rgba(255, 241, 226, .08); }
.qf-band .tiny, .qf-band .kicker { background: none; padding: 0; }
.chap-dark .goodtk li, .chap-dark .phrase { background: rgba(255, 241, 226, .07); }
.feed-filter button[aria-pressed="true"], body.light-page .feed-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }