/* ============================================================
   VISIT SUDAN — the two original national display faces.
   Sudan (Latin) and Sudan Arabic. See fonts/FONT-LICENSE.txt.
   ============================================================ */
/* ============================================================
   Brand fonts. KOOkies is the brand display face (uploaded, 7 weights).
   "Sudan" / "Sudan Arabic" WOFFs are kept as fallbacks only.
   Sudan Arabic is declared ONCE here — a second declaration lower in
   the file used to point the same family name at Palestine-Regular,
   so which file won depended on source order.
   ============================================================ */
@font-face { font-family:"Sudan"; src:url("../fonts/Sudan-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sudan"; src:url("../fonts/Sudan-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Sudan Arabic"; src:url("../fonts/Sudan-Arabic-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sudan Arabic"; src:url("../fonts/Sudan-Arabic-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Palestine Display"; font-weight:400; font-display:swap; src:url("../fonts/Palestine-Regular.otf") format("opentype"); }

/* Web-font fallbacks — guarantee glyph coverage (esp. Arabic) on any machine */
/* The Google fallback faces load via <link> in each page head, not @import:
   an @import inside this file is discovered only after app.css has been fetched
   AND parsed, so the font request queues behind it instead of running alongside. */

/* ============================================================
   VISIT SUDAN — THE LIVING ARCHIVE
   Shared design system · Apple-grade, high-end editorial
   Sudani archival palette · bilingual (LTR + RTL)
   Loaded by every page; chrome is injected by app.js
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"KOOkies"; font-weight:300; font-display:swap; src:url("../fonts/KOOkies-Light.otf") format("opentype"); }
@font-face { font-family:"KOOkies"; font-weight:400; font-display:swap; src:url("../fonts/KOOkies-Regular.otf") format("opentype"); }
@font-face { font-family:"KOOkies"; font-weight:500; font-display:swap; src:url("../fonts/KOOkies-Medium.otf") format("opentype"); }
@font-face { font-family:"KOOkies"; font-weight:600; font-display:swap; src:url("../fonts/KOOkies-SemiBold.otf") format("opentype"); }
@font-face { font-family:"KOOkies"; font-weight:700; font-display:swap; src:url("../fonts/KOOkies-Bold.otf") format("opentype"); }
@font-face { font-family:"KOOkies"; font-weight:800; font-display:swap; src:url("../fonts/KOOkies-ExtraBold.otf") format("opentype"); }

:root{
  --cream-2: #EBE2D9;
  --bone: #FCFAF7;
  --ink: #1A1A1A;
  --ink-2: #2A2521;
  --ink-soft: rgba(26,26,26,0.70);
  --ink-mute: rgba(26,26,26,0.52);
  --line: rgba(26,26,26,0.10);
  --line-2: rgba(26,26,26,0.18);
  --gold: #D4AF37;
  --gold-lit: #E6C463;
  --gold-deep: #A8862A;
  --terracotta: #9E4733;
  --nile: #1F2447;
  --cobalt-lit: #2E6FBF;
  --ochre: #C67A2E;
  --ochre-lit: #DE9B4A;
  --lg-tint-2: rgba(252,240,214,.07);
  --lg-spec: rgba(255,255,255,.92);
  --lg-spec-soft: rgba(230,196,99,.42);
  --lg-rim: rgba(212,175,55,.40);
  --lg-blur: blur(30px) saturate(210%) brightness(1.07);
  --lg-blur-lite: blur(15px) saturate(280%) contrast(1.06) brightness(1.03);
  --lg-drop: 0 12px 38px -12px rgba(58,36,10,.34), 0 1px 2px rgba(58,36,10,.09);
  --lg-tint-dark: rgba(20,14,4,.34);
  --lg-tint-dark-2: rgba(11,10,9,.58);
  --lg-spec-dark: rgba(242,210,122,.58);
  --lg-rim-dark: rgba(230,196,99,.26);
  --west: #6B8E23;
  --east: #1A7A9B;
  --night-2: #131110;
  --on-dark: #F5EFEB;
  --on-dark-dim: rgba(245,239,235,0.82);
  --on-dark-mute: rgba(245,239,235,0.60);
  --on-dark-line: rgba(245,239,235,0.14);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Grotesk", "Inter", ui-monospace, monospace;
  --font-display-ar: "Sudan Arabic", "Palestine Display", "Amiri", "Noto Naskh Arabic", serif;
  --font-sans-ar: "Noto Naskh Arabic", "Amiri", system-ui, sans-serif;
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --maxw: 1240px;
  --nav-h: 58px;
  --nub-blue: #1F6FA8;
  --nub-ochre: #D9A22B;
  --nub-red: #B5382A;
  --nub-plaster: #FCFAF7;
}
/* :root consolidated — see the single token block at the top of this file */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }

/* ============================================================
   HD PASS — crisp, fresh photography and edges
   High-DPI rendering hints plus a restrained editorial grade:
   a touch more contrast and warmth so photographs read rich
   rather than washed, and hairlines stay sharp on retina.
   ============================================================ */
img{
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}
/* the editorial grade — applied to photographic content only,
   never to logos, emblems, mascots or SVG marks */
.hero img, .hero-media img, .page-hero img, .ch-hero img,
.tile img, .dest-media img, .hcard .art img, .m-card img, .v-tile img,
.k-card .art img, .exp img, .j-img img, .story-img img, .gitem img,
.mu-card img, .feature-media img, .quote-strip-img, .capcard .img img{
  filter: saturate(1.06) contrast(1.045) brightness(1.012);
  transform: translateZ(0);
}
/* sharper, deeper elevation for cards on the light ground */
.dest, .hcard, .k-card, .capcard, .mu-card, .gitem, .state, .of-card, .ap, .al{
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 28px -22px rgba(26,26,26,.28);
}
.dest:hover, .hcard:hover, .k-card:hover, .capcard:hover, .mu-card:hover, .gitem:hover{
  box-shadow: 0 2px 4px rgba(26,26,26,.05), 0 34px 64px -34px rgba(26,26,26,.42);
}
/* crisp type on high-DPI screens */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img{ image-rendering: auto; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--gold); color: var(--night); }

/* ---------- RTL ---------- */
html[dir="rtl"] body { font-family: var(--font-sans-ar); }
html[dir="rtl"] .display,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-family: var(--font-display-ar); letter-spacing: 0; line-height: 1.4; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; }

/* ---------- Type primitives ---------- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; line-height: 1.04; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
.lede { font-size: 21px; line-height: 1.55; color: var(--ink-soft); font-weight: 300; text-wrap: pretty; }
em { font-style: italic; color: var(--accent); }
h1, h2, h3 { text-wrap: balance; }
/* will-change is applied ONLY while an element is mid-reveal, via .willing added
   by the IntersectionObserver and removed on transitionend. A blanket rule here
   permanently promotes every card on the page to its own compositor layer, which
   makes paint slower, not faster. */
.reveal.willing { will-change: opacity, transform; }

/* language blocks */
[data-lang-block] { display: none; }
html[lang="en"] [data-lang-block="en"],
html[lang="ar"] [data-lang-block="ar"],
html[lang="fr"] [data-lang-block="fr"],
html[lang="es"] [data-lang-block="es"],
html[lang="de"] [data-lang-block="de"] { display: revert; }
/* fallback to EN when a lang block is missing for current language handled by app.js */

/* ---------- Layout ---------- */
.wrap { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(80px, 11vw, 168px) 0; }
.section-sm { padding: clamp(56px, 7vw, 96px) 0; }
@media (max-width: 640px){ .wrap { width: calc(100% - 32px); } }

/* ---------- Atmosphere — the country breathing (GPU-cheap, transform/opacity only) ---------- */
.vs-airlight {
  position: fixed; inset: -22%; z-index: 58; pointer-events: none;
  background:
    radial-gradient(38% 30% at 24% 22%, rgba(230,196,99,.10), transparent 70%),
    radial-gradient(30% 26% at 78% 74%, rgba(158,71,51,.08), transparent 70%);
  mix-blend-mode: soft-light;
  animation: vsAir 46s ease-in-out infinite alternate;
}
@keyframes vsAir {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2.4%, -1.8%, 0) scale(1.05); }
}
.vs-dust { position: fixed; inset: 0; z-index: 57; pointer-events: none; overflow: hidden; }
.vs-dust i {
  position: absolute; top: -3vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F2D27A, #D4AF37 70%);
  opacity: 0;
  animation: vsDust linear infinite;
}
@keyframes vsDust {
  0%   { transform: translate3d(0, -4vh, 0); opacity: 0; }
  8%   { opacity: var(--o, .3); }
  88%  { opacity: var(--o, .3); }
  100% { transform: translate3d(var(--sway, 4vw), 106vh, 0); opacity: 0; }
}
@media (max-width: 760px) { .vs-dust, .vs-airlight { display: none; } }
@media (prefers-reduced-motion: reduce) { .vs-dust, .vs-airlight { display: none; } }

/* ---------- Photo placeholder — honest "coming soon" ---------- */
.photo-soon {
  width: 100%; height: 100%; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.06) 0 2px, transparent 2px 24px),
    var(--cream-2, #EBE2D9);
  color: var(--ink-mute, rgba(26,26,26,.52));
}
.photo-soon .d { width: 11px; height: 11px; rotate: 45deg; background: var(--gold, #D4AF37); }
.photo-soon .t {
  font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink-soft, rgba(26,26,26,.7)); margin: 2px 0 0;
}
html[dir="rtl"] .photo-soon .t { font-family: var(--font-display-ar); }
.photo-soon .s {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; margin: 0;
}
.photo-soon .s .ar { display: block; margin-top: 4px; letter-spacing: 0; text-transform: none; font-family: var(--font-sans-ar); font-size: 12px; font-weight: 400; }
.hall-img .photo-soon, .media .photo-soon, .nimg .photo-soon, .plate .photo-soon { position: absolute; inset: 0; height: auto; min-height: 0; }
.media, .nimg, .plate { position: relative; }
.media:has(.photo-soon), .nimg:has(.photo-soon), .plate:has(.photo-soon) { min-height: 260px; }

/* ---------- Buttons (Apple pill) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 980px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  letter-spacing: 0.01em; line-height: 1;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
.btn-fill { background: var(--ink); color: var(--bone); box-shadow: 0 2px 10px -4px rgba(26,26,26,.4); }
.btn-fill:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(26,26,26,.62); }
.btn-accent { background: var(--accent); color: var(--night); box-shadow: 0 4px 18px -8px var(--accent); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -14px var(--accent); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.btn-light { background: rgba(252,250,247,.92); color: var(--ink); backdrop-filter: blur(8px); }
.btn-light:hover { transform: translateY(-2px); background: #fff; }
.btn-outline-light { border: 1px solid rgba(245,239,235,.4); color: var(--on-dark); }
.btn-outline-light:hover { border-color: var(--on-dark); background: rgba(245,239,235,.08); }

/* ---------- Shared NAV (injected by app.js) ---------- */
.snav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  /* No backdrop-filter here, and none in the transition list: a transitioned
     backdrop-filter wedges at its start value, and any non-none value would
     make .snav a containing block for its fixed descendants (.snav-links).
     .scrolled applies the frosting instantly; the tint still fades over .4s. */
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.snav.scrolled {
  background: rgba(245,239,235,0.72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom-color: var(--line);
}
.snav.on-dark:not(.scrolled) { color: var(--on-dark); }
.snav-inner { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.snav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.snav-brand svg, .snav-brand img.vs-emblem { width: 34px; height: 34px; flex: none; }
.snav-brand .wm { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.snav-brand .wm-ar { font-family: var(--font-display-ar); font-size: 15px; color: inherit; }
.snav-brand .wm-en { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-deep, #A8862A); }
.snav.on-dark:not(.scrolled) .wm-en { color: var(--gold-lit, #E6C463); }
.snav-brand b { color: var(--gold); font-weight: 600; }
.snav-links { display: flex; gap: 30px; margin-inline: auto; }
@media (min-width: 1131px){ .snav-links a { white-space: nowrap; } }
@media (min-width: 1131px) and (max-width: 1320px){ .snav-links { gap: 18px; } .snav-links a { font-size: 13px; } }
.snav-links a {
  position: relative; font-size: 14px; font-weight: 450; letter-spacing: 0.01em;
  color: inherit; opacity: .82; transition: opacity .25s var(--ease);
  padding: 4px 0;
}
.snav-links a:hover { opacity: 1; }
.snav-links a::after {
  content:""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold-lit)); transition: right .34s var(--ease);
}
.snav-links a:hover::after, .snav-links a.active::after { right: 0; }
.snav-links a.active { opacity: 1; }
html[dir="rtl"] .snav-links a::after { right: auto; left: 0; }
.snav-tools { display: flex; align-items: center; gap: 8px; }
.snav-lang { position: relative; }
.snav-lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 980px; border: 1px solid currentColor; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; opacity: .85;
  transition: opacity .2s var(--ease);
}
.snav-lang-btn:hover { opacity: 1; }
.snav-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 150px;
  background: rgba(252,250,247,.86); backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--line); border-radius: 14px; padding: 7px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
html[dir="rtl"] .snav-lang-menu { right: auto; left: 0; }
.snav-lang-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.snav-lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 9px 12px; border-radius: 9px; color: var(--ink);
  font-size: 14px; transition: background .15s var(--ease);
}
.snav-lang-menu button:hover, .snav-lang-menu button.active { background: var(--cream-2); }
.snav-lang-menu button .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-mute); }
.snav-burger { display: none; width: 28px; height: 28px; flex-direction: column; justify-content: center; gap: 5px; }
.snav-burger span { height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width: 1130px){
  .snav-links {
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto; flex-direction: column; gap: 0;
    background: rgba(245,239,235,0.96); backdrop-filter: blur(24px);
    margin: 0; padding: 8px 24px 22px; border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .snav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .snav-links a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .snav-burger { display: flex; }
  .snav-tools { margin-inline-start: auto; }
  .snav.on-dark:not(.scrolled) .snav-burger span { background: var(--on-dark); }
}

/* Narrow phones: keep brand + tools inside the content box */
@media (max-width: 560px){
  .snav-inner { gap: 12px; }
  .snav-tools { gap: 6px; }
  [data-navcta] { display: none; }
}
@media (max-width: 400px){
  .snav-brand .wm-ar { display: none; }
}

/* ---------- Shared FOOTER (injected) ---------- */
.sfoot { background: var(--night); color: var(--on-dark); padding: 80px 0 40px; }
.sfoot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--on-dark-line); }
@media (max-width: 820px){ .sfoot-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
.sfoot-brand { display: flex; align-items: center; gap: 14px; }
.sfoot-brand svg { width: 44px; height: 44px; }
.sfoot-brand .wm { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.sfoot-brand .wm-ar { font-family: var(--font-display-ar); font-size: 24px; color: #FCFAF7; }
.sfoot-brand .wm-en { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-lit, #E6C463); }
.sfoot-brand b { color: var(--gold); }
.sfoot-tag { margin-top: 14px; color: var(--on-dark-dim); font-size: 14px; font-weight: 300; max-width: 32ch; line-height: 1.6; }
.sfoot h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 16px; font-weight: 600; }
html[dir="rtl"] .sfoot h4 { letter-spacing: 0; text-transform: none; }
.sfoot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.sfoot li a { color: var(--on-dark-dim); font-size: 14px; transition: color .2s var(--ease); }
.sfoot li a:hover { color: var(--on-dark); }
.sfoot-base { padding-top: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--on-dark-mute); }
html[dir="rtl"] .sfoot-base { letter-spacing: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
.reveal[data-d="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Cards (Apple product tile) ---------- */
.tile {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--ink);
  color: var(--on-dark); aspect-ratio: 3/4; display: flex;
  box-shadow: 0 1px 2px rgba(26,26,26,.06);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.tile::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(245,239,235,0); transition: box-shadow .5s var(--ease); pointer-events:none; }
.tile:hover { transform: translateY(-7px); box-shadow: 0 46px 90px -44px rgba(26,26,26,.55); }
.tile:hover::after { box-shadow: inset 0 0 0 1px rgba(230,196,99,.5); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,0) 30%, rgba(11,10,9,.86) 100%); }
.tile-body { position: relative; z-index: 2; margin-top: auto; padding: 30px; }
.tile-body .eyebrow { color: var(--gold-lit); }
.tile-body h3 { font-size: clamp(26px, 3vw, 34px); margin-top: 10px; line-height: 1.04; }
.tile-body p { margin-top: 10px; color: var(--on-dark-dim); font-size: 15px; font-weight: 300; max-width: 30ch; }
.tile-body .eyebrow, .tile-body h3, .tile-body p { transform: translateY(0); transition: transform .55s var(--ease); }
.tile:hover .tile-body .eyebrow, .tile:hover .tile-body h3, .tile:hover .tile-body p { transform: translateY(-4px); }

/* big section heads */
.shead { max-width: 22ch; }
.shead h2 { font-size: clamp(38px, 5.6vw, 80px); }
.shead .lede { margin-top: 22px; max-width: 52ch; }

/* utility */
.center { text-align: center; margin-inline: auto; }
.grid { display: grid; gap: 22px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .g3, .g2 { grid-template-columns: 1fr; } }

.scrolltop-pad { height: var(--nav-h); }

/* ---------- The national emblem ---------- */
.snav-brand img.vs-emblem { transition: transform .5s var(--ease); }
.snav-brand:hover img.vs-emblem { transform: rotate(-4deg) scale(1.05); }

/* ---------- Emblem: bigger, alive, and happy ---------- */
.snav-brand svg, .snav-brand img.vs-emblem{
  width: 52px !important; height: 52px !important;
  filter: drop-shadow(0 2px 6px rgba(11,10,9,.22));
  animation: emblemBreathe 4.2s ease-in-out infinite;
  transform-origin: 50% 62%;
}
.snav.scrolled .snav-brand svg,
.snav.scrolled .snav-brand img.vs-emblem{ width: 44px !important; height: 44px !important; }
@keyframes emblemBreathe{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1) }
  22%    { transform: translateY(-4px) rotate(-5deg) scale(1.05) }
  40%    { transform: translateY(0) rotate(3deg) scale(1) }
  54%    { transform: translateY(-2px) rotate(-2deg) scale(1.02) }
  70%    { transform: translateY(0) rotate(0deg) scale(1) }
}
/* click / tap: a full happy spin */
.snav-brand:hover svg, .snav-brand:hover img.vs-emblem{
  animation: emblemHop .9s cubic-bezier(.34,1.4,.5,1) infinite;
}
@keyframes emblemHop{
  0%,100%{ transform: translateY(0) scale(1) rotate(0deg) }
  30%    { transform: translateY(-8px) scale(1.12) rotate(-8deg) }
  55%    { transform: translateY(0) scale(.97) rotate(4deg) }
  75%    { transform: translateY(-3px) scale(1.04) rotate(-2deg) }
}
.snav-brand.spin svg, .snav-brand.spin img.vs-emblem{
  animation: emblemSpin 1s cubic-bezier(.3,1.1,.4,1) 1;
}
@keyframes emblemSpin{
  0%  { transform: rotate(0deg) scale(1) }
  45% { transform: rotate(200deg) scale(1.18) }
  70% { transform: rotate(340deg) scale(.96) }
  100%{ transform: rotate(360deg) scale(1) }
}
.snav-brand .wm-ar{ font-size: 19px; }
.snav.scrolled .snav-brand .wm-ar{ font-size: 17px; }
@media (max-width: 560px){
  .snav-brand svg, .snav-brand img.vs-emblem{ width: 44px !important; height: 44px !important; }
}
@media (prefers-reduced-motion: reduce){
  .snav-brand svg, .snav-brand img.vs-emblem,
  .snav-brand:hover svg, .snav-brand:hover img.vs-emblem,
  .snav-brand.spin svg, .snav-brand.spin img.vs-emblem{ animation: none !important; }
}


/* Shared glass blur for the real surfaces */
.snav.scrolled, .snav-lang-menu, .btn-light, .k-chip.on, .vs-top {
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

/* ---------- Nav becomes a true glass slab ---------- */
.snav.scrolled {
  background: linear-gradient(180deg, rgba(252,250,247,.58), rgba(245,239,235,.42));
  border-bottom-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 1px 0 rgba(26,26,26,.05),
    0 14px 40px -22px rgba(26,26,26,.3);
}
.snav.scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent);
}

/* ---------- Language menu ---------- */
.snav-lang-menu {
  background: linear-gradient(180deg, rgba(252,250,247,.7), rgba(245,239,235,.5));
  border-color: rgba(255,255,255,.5); border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 24px 60px -22px rgba(26,26,26,.42);
}
.snav-lang-menu button { border-radius: 12px; }
.snav-lang-menu button:hover { background: rgba(255,255,255,.6); }
.snav-lang-btn {
  border-color: rgba(255,255,255,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  -webkit-backdrop-filter: var(--lg-blur-lite); backdrop-filter: var(--lg-blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.snav.on-dark:not(.scrolled) .snav-lang-btn {
  border-color: rgba(245,239,235,.34);
  background: linear-gradient(180deg, rgba(245,239,235,.16), rgba(11,10,9,.2));
  box-shadow: inset 0 1px 0 rgba(245,239,235,.34);
}

/* ---------- Buttons: glass + gel press ---------- */
.btn-light {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(252,250,247,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 10px 30px -12px rgba(26,26,26,.4);
}
.btn-light:hover { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78)); }
.btn-outline-light {
  background: linear-gradient(180deg, rgba(245,239,235,.14), rgba(11,10,9,.16));
  -webkit-backdrop-filter: var(--lg-blur-lite); backdrop-filter: var(--lg-blur-lite);
  border-color: rgba(245,239,235,.36);
  box-shadow: inset 0 1px 0 rgba(245,239,235,.3);
}
.btn:active { transform: scale(.965); transition-duration: .09s; }

/* ---------- Mobile nav sheet ---------- */
@media (max-width: 1130px){
  .snav-links {
    background: linear-gradient(180deg, rgba(252,250,247,.82), rgba(245,239,235,.66));
    -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
    border-bottom-color: rgba(255,255,255,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -30px rgba(26,26,26,.45);
  }
}

/* ---------- Filter chips ---------- */
.k-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
  -webkit-backdrop-filter: var(--lg-blur-lite); backdrop-filter: var(--lg-blur-lite);
  border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px -4px rgba(26,26,26,.16);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.k-chip:hover { transform: translateY(-1px); }
.k-chip:active { transform: scale(.96); }
.k-chip.on {
  background: linear-gradient(180deg, rgba(26,26,26,.9), rgba(26,26,26,.78));
  color: var(--bone); border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 22px -10px rgba(26,26,26,.6);
}

/* ---------- Back-to-top pill ---------- */
.vs-top {
  background: linear-gradient(180deg, rgba(11,10,9,.5), rgba(11,10,9,.72)) !important;
  border-color: rgba(245,239,235,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,239,235,.42),
    inset 0 0 0 1px rgba(245,239,235,.14),
    0 16px 40px -14px rgba(0,0,0,.6) !important;
}
.vs-top:active { transform: scale(.92) !important; }

/* Safari/Firefox without backdrop-filter — fall back to solid tints */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .snav.scrolled { background: rgba(245,239,235,.97); }
  .snav-lang-menu { background: rgba(252,250,247,.98); }
}

/* filled plates — real photography in slots that previously held placeholders */
.plate img, .hall-img img, .capcard .img img, .lead-story .media img, .ncard .nimg img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.plate, .lead-story .media, .ncard .nimg { overflow: hidden; }

/* ============================================================
   LIQUID GLASS — specular + lensing bound to real surfaces
   ============================================================ */
/* Only elements that are static by default get position:relative here.
   .snav is fixed and .snav-lang-menu is absolute — both are already
   non-static, so ::before/::after anchor correctly. Overriding their
   position unsticks the nav and throws the dropdown off-screen. */
.btn-light, .btn-outline-light, .hy-facts, .vs-top {
  position: relative; isolation: isolate;
}
.snav.scrolled, .snav-lang-menu { isolation: isolate; }
/* specular sweep: light caught on two opposing edges of the slab */
.snav.scrolled::before,
.snav-lang-menu::before,
.btn-light::before,
.btn-outline-light::before,
.hy-facts::before,
.vs-top::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255,255,255,.6) 0%, rgba(255,255,255,.05) 34%,
    rgba(255,255,255,0) 58%, rgba(255,255,255,.26) 100%);
  mix-blend-mode: screen; opacity: .8;
}
/* rim lensing: the 1.5px edge bends what sits behind it */
.snav-lang-menu::after,
.btn-light::after,
.btn-outline-light::after,
.hy-facts::after,
.vs-top::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none; padding: 1.5px;
  -webkit-backdrop-filter: blur(2px) brightness(1.14) saturate(155%);
  backdrop-filter: blur(2px) brightness(1.14) saturate(155%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* keep content above both glass layers.
   .snav-inner is a flex item, so it honours z-index WITHOUT position:relative —
   giving it position would make it the containing block for the absolute
   .snav-links and tear the mobile menu off the nav's bottom edge. */
.snav.scrolled > * { z-index: 1; }
.snav-lang-menu > *, .hy-facts > * { position: relative; z-index: 1; }
.btn-light > *, .btn-outline-light > *, .vs-top > * { position: relative; z-index: 1; }
/* dark slabs catch far less light */
.vs-top::before, .btn-outline-light::before { opacity: .34; }
.hy-facts::before { opacity: .2; }

/* Back-to-top pill — real class, styles no longer inline-blocked */
.vs-top {
  background: linear-gradient(180deg, rgba(11,10,9,.5), rgba(11,10,9,.74));
  border: 1px solid rgba(245,239,235,.26);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow:
    inset 0 1px 0 rgba(245,239,235,.42),
    inset 0 0 0 1px rgba(245,239,235,.14),
    0 16px 40px -14px rgba(0,0,0,.6);
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease);
}
.vs-top:hover { box-shadow: inset 0 1px 0 rgba(245,239,235,.55), 0 20px 50px -14px rgba(0,0,0,.7); }
.vs-top:active { transform: scale(.92); transition-duration: .09s; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .snav-lang-menu::after, .btn-light::after, .btn-outline-light::after,
  .hy-facts::after, .vs-top::after { display: none; }
  .vs-top { background: rgba(11,10,9,.92); }
}


/* ============================================================
   NUBIAN PROTECTIVE EDGE
   Painted facades in Nubia are bordered with geometric bands
   believed to protect the household. Used here as a section rule.
   ============================================================ */
.nub-edge {
  height: 18px; border: 0; margin: 0; padding: 0;
  background-image:
    linear-gradient(135deg, var(--cobalt) 25%, transparent 25% 75%, var(--cobalt) 75%),
    linear-gradient(45deg,  var(--ochre)  25%, transparent 25% 75%, var(--ochre)  75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 0;
  opacity: .5;
}
.nub-edge.on-dark { opacity: .38; }
/* single hairline variant for quieter divisions */
.nub-rule {
  height: 3px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0 10px, transparent 10px 16px,
    var(--terracotta) 16px 22px, transparent 22px 28px);
  opacity: .42;
}

/* Painted-plate accent — the ceramic plates set into Nubian facades */
.plate-dot {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bone);
  box-shadow:
    inset 0 0 0 2px var(--cobalt),
    inset 0 0 0 4px var(--bone),
    inset 0 0 0 6px var(--ochre);
  vertical-align: middle;
}


/* ============================================================
   NUBIAN ORNAMENT — the painted geometry of the Nile facades.
   Pigment set documented from Nubian house decoration: geometric
   patterns painted in bold blue, yellow, red and black over white
   or light clay plaster. Blue and white are favoured for their
   association with the colour of the Nile and the sky.
   Used ONLY for ornament — the page palette is unchanged.
   ============================================================ */
/* :root consolidated — see the single token block at the top of this file */

/* the continuity zigzag — the running chevron of a painted doorway */
.nub-zigzag{
  height:11px; width:100%;
  background-image:
    linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(45deg,  transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size:11px 11px; background-repeat:repeat-x;
  color:var(--gold-deep,#A8862A); opacity:.5;
}
/* the protective diamond lattice */
.nub-diamond{
  height:14px; width:100%;
  background-image:
    linear-gradient(135deg, currentColor 25%, transparent 25%),
    linear-gradient(225deg, currentColor 25%, transparent 25%),
    linear-gradient(315deg, currentColor 25%, transparent 25%),
    linear-gradient(45deg,  currentColor 25%, transparent 25%);
  background-size:14px 14px; background-position:0 0,0 0,0 0,0 0;
  color:var(--gold-deep,#A8862A); opacity:.28;
}
/* the tabag coil — palm leaf wrapped round a papyrus core, seen from above */
.tabag-rays{
  aspect-ratio:1; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, currentColor 0deg 3deg, transparent 3deg 9deg),
    radial-gradient(circle, transparent 34%, currentColor 34% 36%, transparent 36% 58%, currentColor 58% 60%, transparent 60%);
  color:var(--gold-deep,#A8862A); opacity:.3;
}

/* the divider: hairline, painted band, hairline — a breath between chapters */
.nubian-divider{
  background:var(--cream,#F5EFEB);
  padding-block:26px; display:grid; gap:9px; justify-items:center;
}
.nubian-divider .rule{ width:min(680px,84vw); height:1px; background:var(--line-2,rgba(26,26,26,.16)); }
.nubian-divider .band{ width:min(680px,84vw); }
.nubian-divider.dark{ background:var(--night,#0B0A09); }
.nubian-divider.dark .rule{ background:rgba(245,239,235,.18); }
.nubian-divider.dark .band{ color:var(--gold-lit,#E6C463); opacity:.42; }


/* ============================================================
   SLEEK PASS — must stay LAST in the file: three of these are
   equal-specificity overrides of the ornament block above.
   ============================================================ */
h1, h2 { text-wrap: balance; }
p, .lede, .osub, .rsub { text-wrap: pretty; }
.eyebrow { font-variant-numeric: tabular-nums; }
.nubian-divider { padding-block: 22px; }
.nub-zigzag { opacity: .38; }
.reveal { transition-duration: .72s; }
::selection { background: rgba(212,175,55,.28); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }


/* ============================================================
   ORNAMENT, APPLIED — the painted geometry at every threshold.
   Pure CSS: no HTML edits, no requests. Ornament sits where it
   sits on a Nubian house — at entrances and edges.
   ============================================================ */

/* every hero on the site closes on a painted band, like a lintel.
   Each page names its hero differently (several are defined in per-page
   <style> blocks), so the full list is enumerated here. All of them already
   carry position:relative in their own rule; it is restated for safety. */
.page-hero, .hero, .a-hero, .ch-hero, .cz-hero, .k-hero, .d-hero, .b-hero, .m-hero{ position:relative; }
.page-hero::after, .hero::after, .a-hero::after, .ch-hero::after, .cz-hero::after,
.k-hero::after, .d-hero::after, .b-hero::after, .m-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:9px;
  pointer-events:none; z-index:3;
  background-image:
    linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(45deg,  transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size:9px 9px; background-repeat:repeat-x;
  color:var(--gold-lit,#E6C463); opacity:.5;
}

/* the footer opens with the same band — the archive closes as it opened */
.sfoot{ position:relative; }
.sfoot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:9px;
  pointer-events:none;
  background-image:
    linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(45deg,  transparent 43%, currentColor 43% 57%, transparent 57%);
  background-size:9px 9px; background-repeat:repeat-x;
  color:var(--gold-lit,#E6C463); opacity:.34;
}

/* every eyebrow is preceded by a single protective lozenge */
.eyebrow::before{
  content:""; display:inline-block; vertical-align:middle;
  width:6px; height:6px; margin-inline-end:9px; rotate:45deg;
  background:currentColor; opacity:.55;
}
html[dir="rtl"] .eyebrow::before{ margin-inline-end:9px; }

/* section heads carry a hairline that ends in the diamond */
.shead, .rhead{ position:relative; }

/* dark grounds keep the band but soften it */
.nation .eyebrow::before,
.moments .eyebrow::before,
.halayeb .eyebrow::before,
.postcards .eyebrow::before{ opacity:.7; }


/* ============================================================
   SCROLL CHOREOGRAPHY — every section arrives differently.
   Driven by native scroll-linked animation (animation-timeline:
   view()), so the browser runs it off the main thread: no scroll
   listener, no jank. Browsers without it keep the IO reveals,
   which remain the floor, never a broken state.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* the reveal system hands over to the timeline */
    .reveal{ opacity:1; transform:none; transition:none; }

    /* ---- 1. the common lift: enters, settles, softens on exit ---- */
    .reveal{
      animation: chLift linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 34%;
    }
    @keyframes chLift{
      from{ opacity:0; transform:translateY(30px) scale(.99); }
      to  { opacity:1; transform:none; filter:none; }
    }

    /* ---- 2. images arrive through a wipe, and drift as you pass ---- */
    .dest-media img, .tile img, .m-card img, .v-tile img,
    .capcard .img img, .exp img, .j-img img, .story-img img{
      animation: chWipe linear both, chDrift linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 30%, cover 0% cover 100%;
    }
    @keyframes chWipe{
      from{ clip-path:inset(0 0 100% 0); transform:scale(1.12); }
      to  { clip-path:inset(0 0 0 0);    transform:scale(1.03); }
    }
    @keyframes chDrift{ from{ translate:0 -2.5%; } to{ translate:0 2.5%; } }

    /* ---- 3. section headings clip up from their own baseline ---- */
    .shead h2, .rhead h2, .section > .wrap > h2{
      animation: chClip linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    @keyframes chClip{
      from{ clip-path:inset(0 0 110% 0); transform:translateY(14px); }
      to  { clip-path:inset(-30% -30% -30% -30%); transform:none; }
    }

    /* ---- 4. cards in a row fan in from alternating sides ---- */
    .ch-alt > .reveal:nth-child(odd),
    .rec-grid > .reveal:nth-child(odd),
    .orn-grid > .reveal:nth-child(odd){
      animation-name: chFanL;
    }
    .ch-alt > .reveal:nth-child(even),
    .rec-grid > .reveal:nth-child(even),
    .orn-grid > .reveal:nth-child(even){
      animation-name: chFanR;
    }
    @keyframes chFanL{
      from{ opacity:0; transform:translate3d(-22px,26px,0); }
      to  { opacity:1; transform:none; filter:none; }
    }
    @keyframes chFanR{
      from{ opacity:0; transform:translate3d(22px,26px,0); }
      to  { opacity:1; transform:none; filter:none; }
    }

    /* ---- 5. the painted bands draw themselves across ---- */
    .nubian-divider .band, .sfoot::before,
    .page-hero::after, .hero::after, .a-hero::after, .ch-hero::after, .cz-hero::after,
    .k-hero::after, .d-hero::after, .b-hero::after, .m-hero::after{
      animation: chDraw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 92%;
    }
    @keyframes chDraw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

    .nubian-divider .rule{
      animation: chRule linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 96%;
    }
    @keyframes chRule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

    /* ---- 6. dark sections bloom: the light comes up as you enter ---- */
    .nation, .moments, .halayeb, .postcards, .quote-band{
      animation: chBloom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes chBloom{
      from{ filter:brightness(.62) saturate(.72); }
      to  { filter:none; }
    }

    /* ---- 7. figures count up on a scrubbed scale ---- */
    .fig{
      animation: chFig linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    @keyframes chFig{
      from{ opacity:0; transform:translateY(22px) scale(.92); }
      to  { opacity:1; transform:none; }
    }

    /* ---- 8. the hero settles as you leave it ---- */
    .hero-inner, .page-hero .inner{
      animation: chHeroOut linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes chHeroOut{
      from{ opacity:1; transform:none; }
      to  { opacity:.35; transform:translateY(-22px) scale(.985); }
    }
  }
}


/* ============================================================
   RENDER BUDGET — the browser skips layout, style and paint for
   sections still far offscreen, then does the work just before
   they scroll in. Purely a scheduling hint: nothing is hidden,
   nothing changes visually, and Ctrl+F still finds the text.
   contain-intrinsic-size reserves a plausible height so the
   scrollbar never jumps as real heights resolve.
   ============================================================ */
.section, .region, .record, .waters, .capitals, .halayeb,
.courses, .wedding, .etiquette, .k-body, .d-body{
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
/* never defer anything above the fold, or the hero flashes */
.hero, .page-hero, .a-hero, .ch-hero, .cz-hero, .k-hero,
.d-hero, .b-hero, .m-hero, .of-hero, .db-hero,
.section:first-of-type{ content-visibility: visible; }


/* ============================================================
   LIQUID — the Nile, running through the page.
   Two stacked wave layers drifting at different speeds read as
   water; a third, slower layer gives depth. Pure CSS gradients
   and transforms, GPU-composited, zero requests.
   ============================================================ */
.nile-flow{
  position:relative; height:74px; overflow:hidden;
  background:linear-gradient(180deg, var(--cream,#F5EFEB) 0 42%, #16305A 42% 100%);
}
.nile-flow::before, .nile-flow::after{
  content:""; position:absolute; left:-50%; width:200%; height:56px; top:20px;
  background:
    radial-gradient(farthest-side at 50% 100%, #1F6FA8 0 99%, transparent 100%) 0 0/56px 28px repeat-x,
    radial-gradient(farthest-side at 50% 0, transparent 0 99%, #1F6FA8 100%) 28px 28px/56px 28px repeat-x;
  opacity:.9;
}
.nile-flow::after{
  top:30px; opacity:.5; filter:blur(.4px);
  background:
    radial-gradient(farthest-side at 50% 100%, #2E86C8 0 99%, transparent 100%) 0 0/78px 34px repeat-x,
    radial-gradient(farthest-side at 50% 0, transparent 0 99%, #2E86C8 100%) 39px 34px/78px 34px repeat-x;
}
@media (prefers-reduced-motion: no-preference){
  .nile-flow::before{ animation:nileRun 9s linear infinite; }
  .nile-flow::after { animation:nileRun 14s linear infinite reverse; }
}
@keyframes nileRun{ to{ transform:translateX(56px); } }

/* the surface catches light, like the river at dusk */
.nile-flow .glint{
  position:absolute; inset:42% 0 0 0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(230,196,99,.34) 46%, transparent 72%);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: no-preference){
  .nile-flow .glint{ animation:nileGlint 11s ease-in-out infinite; }
}
@keyframes nileGlint{ 0%,100%{ transform:translateX(-28%); opacity:.5; } 50%{ transform:translateX(28%); opacity:1; } }

/* dark grounds: the river runs into night */
.nile-flow.dark{ background:linear-gradient(180deg, var(--night,#0B0A09) 0 42%, #0E2145 42% 100%); }
.nile-flow.dark::before{ opacity:.7; }
.nile-flow.dark::after{ opacity:.36; }

/* liquid press — buttons and cards yield like a meniscus */
.btn, .k-chip, .dest-more{ transition:transform .42s cubic-bezier(.2,.9,.25,1.4), background .3s var(--ease), box-shadow .3s var(--ease); }
.btn:active, .k-chip:active, .dest-more:active{ transform:scale(.94); }


/* ============================================================
   NAV — polish pass. Keeps the two hard constraints intact:
   no backdrop-filter on .snav itself (it would become the
   containing block for the absolute .snav-links), and no
   position on .snav-inner (same reason).
   ============================================================ */

/* height eases as the slab settles, so the bar feels like it condenses */
.snav{
  height: var(--nav-h);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              height .42s var(--ease), box-shadow .5s var(--ease);
}
.snav.scrolled{ height: calc(var(--nav-h) - 10px); }
.snav-brand svg, .snav-brand img.vs-emblem{
  width: 34px; height: 34px;
  transition: width .42s var(--ease), height .42s var(--ease), transform .5s var(--ease);
}
.snav.scrolled .snav-brand svg,
.snav.scrolled .snav-brand img.vs-emblem{ width: 29px; height: 29px; }
.snav-brand .wm-en{ transition: letter-spacing .42s var(--ease), font-size .42s var(--ease); }
.snav.scrolled .snav-brand .wm-en{ letter-spacing: .3em; font-size: 8.5px; }

/* links: a soft lozenge blooms behind the label, the gold rule draws under it */
.snav-links a{
  padding: 7px 12px; border-radius: 12px;
  transition: opacity .28s var(--ease), color .28s var(--ease);
}
.snav-links a::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background: currentColor; opacity:0;
  transform: scale(.86);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.snav-links a:hover::before{ opacity:.07; transform: scale(1); }
.snav-links a.active::before{ opacity:.05; transform: scale(1); }
.snav-links a::after{
  left: 12px; right: calc(100% - 12px); bottom: 1px; height: 1.5px;
  transition: right .42s var(--ease), left .42s var(--ease), opacity .3s var(--ease);
}
.snav-links a:hover::after, .snav-links a.active::after{ right: 12px; }
html[dir="rtl"] .snav-links a::after{ right: 12px; left: calc(100% - 12px); }
html[dir="rtl"] .snav-links a:hover::after,
html[dir="rtl"] .snav-links a.active::after{ left: 12px; }

/* the language pill: gel press, and the caret settles when open */
.snav-lang-btn{
  transition: opacity .22s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), transform .16s var(--ease);
}
.snav-lang-btn:active{ transform: scale(.955); }

/* the menu unfolds from its top-right corner instead of just fading */
.snav-lang-menu{
  transform-origin: top right;
  transition: opacity .26s var(--ease), transform .3s cubic-bezier(.2,.9,.25,1), visibility .26s;
}
.snav-lang-menu:not(.open){ transform: translateY(-6px) scale(.97); }
html[dir="rtl"] .snav-lang-menu{ transform-origin: top left; }
.snav-lang-menu button{
  transition: background .22s var(--ease), color .22s var(--ease), padding-inline-start .24s var(--ease);
}
.snav-lang-menu button:hover{ padding-inline-start: 18px; }

/* mobile sheet: rows cascade in rather than arriving as a block */
@media (max-width: 1130px){
  .snav-links{ transition: opacity .34s var(--ease), transform .38s cubic-bezier(.2,.9,.25,1); }
  .snav-links a{ border-radius: 0; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .snav-links.open a{ opacity: .9; transform: none; }
  .snav-links.open a:nth-child(1){ transition-delay:.03s } .snav-links.open a:nth-child(2){ transition-delay:.055s }
  .snav-links.open a:nth-child(3){ transition-delay:.08s }  .snav-links.open a:nth-child(4){ transition-delay:.105s }
  .snav-links.open a:nth-child(5){ transition-delay:.13s }  .snav-links.open a:nth-child(6){ transition-delay:.155s }
  .snav-links.open a:nth-child(7){ transition-delay:.18s }  .snav-links.open a:nth-child(8){ transition-delay:.2s }
  .snav-links.open a:nth-child(n+9){ transition-delay:.22s }
  .snav-links a:hover::before{ opacity:0; }
}

/* the hairline of light along the very bottom edge of the settled slab */
.snav.scrolled{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 1px 0 rgba(212,175,55,.14),
    0 16px 44px -24px rgba(26,26,26,.34);
}

@media (prefers-reduced-motion: reduce){
  .snav, .snav.scrolled, .snav-brand svg, .snav-brand img.vs-emblem,
  .snav-links a, .snav-links a::before, .snav-links a::after,
  .snav-lang-menu, .snav-lang-btn{ transition-duration: .01ms !important; }
  .snav.scrolled{ height: var(--nav-h); }
}


/* ============================================================
   LIQUID GLASS — vivid pass.
   The pale look came from a thick white veil doing the work. Real
   glass barely tints; it AMPLIFIES what is behind it. So the white
   is cut back hard, saturation and contrast are pushed up, and the
   colour that comes through is warmed toward gold rather than washed
   toward milk. Specular edges become gold, not white.
   ============================================================ */
/* :root consolidated — see the single token block at the top of this file */

/* the slab: thin gold-warmed film, gold rim, gold-tinted shadow */
.lg{
  background: linear-gradient(168deg, var(--lg-tint), var(--lg-tint-2) 62%, rgba(212,175,55,.06));
  box-shadow:
    inset 0 1px 0 var(--lg-spec),
    inset 0 -1px 0 var(--lg-spec-soft),
    inset 0 0 0 1px var(--lg-rim),
    inset 0 0 32px -14px rgba(212,175,55,.3),
    var(--lg-drop);
}
/* specular sweep: a warm highlight raking across, brighter and tighter */
.snav.scrolled::before,
.snav-lang-menu::before,
.btn-light::before,
.lg::before{
  background: linear-gradient(122deg,
    rgba(255,250,232,.78) 0%,
    rgba(255,238,190,.14) 26%,
    rgba(255,255,255,0) 52%,
    rgba(242,210,122,.30) 82%,
    rgba(255,250,232,.5) 100%);
  opacity: .9;
}
/* chroma bleed: pulls the colour behind the glass up instead of greying it */
.lg::after{
  -webkit-backdrop-filter: blur(2px) saturate(280%) brightness(1.14);
  backdrop-filter: blur(2px) saturate(280%) brightness(1.14);
}
.lg-dark{
  background: linear-gradient(168deg, var(--lg-tint-dark), var(--lg-tint-dark-2));
  box-shadow:
    inset 0 1px 0 var(--lg-spec-dark),
    inset 0 0 0 1px var(--lg-rim-dark),
    inset 0 0 40px -16px rgba(212,175,55,.24),
    0 18px 48px -16px rgba(0,0,0,.64);
}
.lg-dark::before{ opacity:.5; }

/* the nav slab: barely tinted, so the photo underneath reads in full colour */
.snav.scrolled{
  background: linear-gradient(180deg, rgba(255,252,244,.34), rgba(245,235,214,.2));
  box-shadow:
    inset 0 1px 0 rgba(255,248,224,.92),
    inset 0 -1px 0 rgba(230,196,99,.4),
    0 1px 0 rgba(212,175,55,.22),
    0 18px 48px -26px rgba(58,36,10,.4);
}
/* language menu — needs enough body to stay legible over anything */
.snav-lang-menu{
  background: linear-gradient(176deg, rgba(255,252,244,.6), rgba(247,238,220,.44));
  border-color: rgba(212,175,55,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.96),
    inset 0 0 0 1px rgba(212,175,55,.24),
    inset 0 0 44px -18px rgba(212,175,55,.28),
    0 28px 66px -24px rgba(58,36,10,.46);
}
.snav-lang-menu button:hover{ background: rgba(255,246,214,.72); color: var(--gold-deep); }
.snav-lang-btn{
  border-color: rgba(212,175,55,.5);
  background: linear-gradient(180deg, rgba(255,250,232,.3), rgba(212,175,55,.1));
  box-shadow: inset 0 1px 0 rgba(255,250,232,.82), inset 0 0 18px -8px rgba(212,175,55,.4);
}
.snav.on-dark:not(.scrolled) .snav-lang-btn{
  border-color: rgba(242,210,122,.46);
  background: linear-gradient(180deg, rgba(242,210,122,.16), rgba(11,10,9,.22));
  box-shadow: inset 0 1px 0 rgba(242,210,122,.4);
}
/* buttons */
.btn-light{
  background: linear-gradient(180deg, rgba(255,253,247,.86), rgba(250,240,220,.66));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(212,175,55,.3),
    inset 0 0 26px -12px rgba(212,175,55,.34),
    0 12px 34px -12px rgba(58,36,10,.42);
}
.btn-outline-light{
  background: linear-gradient(180deg, rgba(242,210,122,.16), rgba(11,10,9,.18));
  border-color: rgba(242,210,122,.44);
  box-shadow: inset 0 1px 0 rgba(242,210,122,.34);
}
/* chips + back-to-top */
.k-chip{
  background: linear-gradient(180deg, rgba(255,252,244,.44), rgba(212,175,55,.08));
  border-color: rgba(212,175,55,.34);
  box-shadow: inset 0 1px 0 rgba(255,250,232,.8), 0 2px 10px -5px rgba(58,36,10,.2);
}
.vs-top{
  background: linear-gradient(180deg, rgba(24,16,4,.46), rgba(11,10,9,.7)) !important;
  border-color: rgba(242,210,122,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(242,210,122,.5),
    inset 0 0 0 1px rgba(230,196,99,.16),
    0 18px 44px -16px rgba(0,0,0,.66) !important;
}
/* mobile sheet keeps more body — it sits over live content */
@media (max-width: 1130px){
  .snav-links{
    background: linear-gradient(180deg, rgba(255,252,244,.74), rgba(247,238,220,.6));
    box-shadow: inset 0 1px 0 rgba(255,250,232,.94),
                inset 0 0 0 1px rgba(212,175,55,.18),
                0 34px 66px -32px rgba(58,36,10,.5);
  }
}
/* no backdrop-filter support: solid warm tints, still not pale grey */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .snav.scrolled{ background: rgba(250,243,228,.97); }
  .snav-lang-menu{ background: rgba(253,248,236,.99); }
  .lg{ background: rgba(253,248,236,.95); }
  .lg-dark{ background: rgba(14,11,6,.93); }
}


/* ============================================================
   ACCESSIBILITY & LEGIBILITY
   Three fixes: no motion blur on text, a readable main menu, and
   real support for assistive technology and reduced-motion users.
   ============================================================ */

/* ---- The main menu, readable ----
   Was 14px at weight 450 and 82% opacity — thin, small, and washed out
   over photography. Now full opacity, more weight, and a text shadow
   only while it sits over an image. */
.snav-links a{
  font-size: 15.5px; font-weight: 550; letter-spacing: .008em;
  opacity: 1; color: inherit;
}
@media (min-width: 1131px) and (max-width: 1320px){
  .snav-links{ gap: 14px; }
  .snav-links a{ font-size: 14.5px; padding-inline: 9px; }
}
.snav.on-dark:not(.scrolled) .snav-links a{
  color: #FCFAF7;
  text-shadow: 0 1px 14px rgba(11,10,9,.55), 0 1px 3px rgba(11,10,9,.4);
}
.snav.on-dark:not(.scrolled) .snav-brand,
.snav.on-dark:not(.scrolled) [data-navcta]{
  text-shadow: 0 1px 14px rgba(11,10,9,.5);
}
.snav.scrolled .snav-links a{ color: var(--ink); text-shadow: none; }
.snav-links a.active{ font-weight: 650; color: var(--gold-deep); }
.snav.on-dark:not(.scrolled) .snav-links a.active{ color: var(--gold-lit); }
/* the hover lozenge was currentColor at 7% — invisible. Make it explicit. */
.snav-links a::before{ background: var(--ink); opacity: 0; }
.snav-links a:hover::before{ opacity: .08; }
.snav.on-dark:not(.scrolled) .snav-links a::before{ background: #FCFAF7; }
.snav.on-dark:not(.scrolled) .snav-links a:hover::before{ opacity: .17; }
.snav-lang-btn{ font-size: 12px; font-weight: 700; opacity: 1; }
.snav-lang-menu button{ font-size: 14.5px; font-weight: 500; }

/* ---- Skip link: first tab stop on every page ---- */
.vs-skip{
  position: fixed; top: 8px; left: 8px; z-index: 3000;
  padding: 13px 20px; border-radius: 12px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.vs-skip:focus{ transform: none; outline: 3px solid var(--gold-lit); outline-offset: 2px; }
html[dir="rtl"] .vs-skip{ left: auto; right: 8px; }

/* ---- Visible focus everywhere, including inside glass ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, details summary:focus-visible{
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.snav.on-dark:not(.scrolled) a:focus-visible,
.snav.on-dark:not(.scrolled) button:focus-visible,
.lg-dark a:focus-visible, .meroitic a:focus-visible, .halayeb a:focus-visible,
.waters a:focus-visible, .etiquette a:focus-visible{
  outline-color: var(--gold-lit);
}
/* never suppress the outline for keyboard users, whatever a component sets */
:focus-visible{ outline-style: solid !important; }

/* ---- Screen-reader-only text ---- */
.vs-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Reduced motion: the whole choreography stands still ----
   Covers the scroll-timeline animations too, which the older
   prefers-reduced-motion block above could not reach. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1 !important; transform: none !important; }
  .vs-dust, .vs-airlight, .nile-flow{ display: none !important; }
}

/* ---- Users who ask the OS for more contrast get a firmer surface ---- */
@media (prefers-contrast: more){
  .snav.scrolled{ background: rgba(250,246,238,.98); }
  .snav-lang-menu{ background: rgba(253,250,244,1); }
  .snav-links a{ opacity: 1; font-weight: 650; }
  .lg, .lg-dark{ backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lg{ background: rgba(253,250,244,.98); }
  .lg-dark{ background: rgba(11,10,9,.96); }
  /* firmer text only for users who ask the OS for more contrast */
  :root{ --ink-soft: rgba(26,26,26,.9); --ink-mute: rgba(26,26,26,.75); }
}

/* ---- Touch targets: 44px minimum ---- */
@media (max-width: 1130px){
  .snav-links a{ min-height: 48px; display: flex; align-items: center; font-size: 17px; }
  .snav-lang-btn, .snav-burger{ min-height: 44px; min-width: 44px; }
  .snav-lang-menu button{ min-height: 44px; }
}


/* ============================================================
   READABILITY ON DARK GROUNDS
   The footer and the over-image nav were failing: body text at 82%
   and headings at 60% of ivory over near-black is thin, and gold
   at small sizes goes muddy. Everything here is lifted to at least
   WCAG AA at its own size.
   ============================================================ */
.sfoot{ background: #100E0A; }          /* warm charcoal, not flat black */
.sfoot-tag{ color: rgba(248,244,236,.9); font-weight: 400; font-size: 14.5px; }
.sfoot h4{
  color: var(--gold-lit); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; opacity: 1;
}
.sfoot li a{
  color: rgba(250,247,240,.92); font-size: 14.5px; font-weight: 450;
  text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.sfoot li a:hover, .sfoot li a:focus-visible{
  color: #fff; text-decoration: underline; text-decoration-color: var(--gold-lit);
}
.sfoot-base{ color: rgba(248,244,236,.72); font-size: 11.5px; }
.sfoot-brand .wm-en{ color: var(--gold-lit); }

/* the same lift wherever ivory sits on a dark ground */
:root{
  --on-dark-dim:  rgba(248,244,236,.92);
  --on-dark-mute: rgba(248,244,236,.74);
}

/* ============================================================
   VIVID — the darks were muddy near-black, which reads as grey
   haze rather than depth. Warmed and deepened, with the gold
   brought up so it sings against them instead of sinking in.
   ============================================================ */
:root{
  --night:  #0E0C08;
  --gold:      #DDB63F;
  --gold-lit:  #F2CE6E;
  --gold-deep: #B8912C;
  --terracotta: #B2503A;
  --cobalt-lit: #3B82D6;
  --ochre-lit:  #E8A64F;
}
.eyebrow{ color: var(--gold-deep); opacity: 1; }
.on-dark .eyebrow, .sfoot .eyebrow,
.meroitic .eyebrow, .halayeb .eyebrow, .waters .eyebrow{ color: var(--gold-lit); }

/* ============================================================
   ACCESSIBILITY PANEL — a visible control, not a hidden setting.
   Each preference sets an attribute on <html> and persists.
   ============================================================ */
.vs-a11y-btn{
  position: fixed; inset-inline-end: 22px; bottom: 84px; z-index: 1600;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #1C1608, #0E0C08);
  border: 1px solid rgba(242,206,110,.5);
  box-shadow: inset 0 1px 0 rgba(242,206,110,.5), 0 14px 34px -12px rgba(0,0,0,.7);
  color: var(--gold-lit);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.vs-a11y-btn:hover{ transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(242,206,110,.6), 0 18px 40px -12px rgba(0,0,0,.75); }
.vs-a11y-btn:active{ transform: scale(.95); }
.vs-a11y-btn svg{ width: 26px; height: 26px; }

.vs-a11y{
  position: fixed; inset-inline-end: 22px; bottom: 146px; z-index: 1601;
  width: min(330px, calc(100vw - 44px));
  background: #12100B;
  border: 1px solid rgba(242,206,110,.34); border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 34px 76px -22px rgba(0,0,0,.8);
  color: #FAF7F0;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .24s var(--ease), transform .28s var(--ease), visibility .24s;
}
html[dir="rtl"] .vs-a11y{ transform-origin: bottom left; }
.vs-a11y.open{ opacity: 1; visibility: visible; transform: none; }
.vs-a11y h3{
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lit);
  margin-bottom: 4px;
}
html[dir="rtl"] .vs-a11y h3{ letter-spacing: 0; text-transform: none; font-family: var(--font-sans-ar); font-size: 13px; }
.vs-a11y > p{ font-size: 13px; line-height: 1.6; color: rgba(250,247,240,.76); margin-bottom: 16px; }
.vs-a11y-row{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid rgba(250,247,240,.12);
}
.vs-a11y-row:first-of-type{ border-top: 0; }
.vs-a11y-row span{ font-size: 14.5px; line-height: 1.35; }
.vs-a11y-sw{
  flex: none; width: 46px; height: 27px; border-radius: 999px; cursor: pointer;
  background: rgba(250,247,240,.18); border: 1px solid rgba(250,247,240,.24);
  position: relative; transition: background .24s var(--ease), border-color .24s var(--ease);
}
.vs-a11y-sw::after{
  content: ""; position: absolute; top: 2.5px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #FAF7F0;
  transition: transform .24s var(--ease);
}
.vs-a11y-sw[aria-checked="true"]{ background: var(--gold-deep); border-color: var(--gold-lit); }
.vs-a11y-sw[aria-checked="true"]::after{ transform: translateX(19px); }
html[dir="rtl"] .vs-a11y-sw[aria-checked="true"]::after{ transform: translateX(-19px); }
.vs-a11y-reset{
  margin-top: 14px; width: 100%; padding: 11px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid rgba(250,247,240,.24); color: #FAF7F0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}
html[dir="rtl"] .vs-a11y-reset{ letter-spacing: 0; text-transform: none; font-family: var(--font-sans-ar); font-size: 13px; }
.vs-a11y-reset:hover{ border-color: var(--gold-lit); color: var(--gold-lit); }
@media (max-width: 560px){
  .vs-a11y-btn{ bottom: 78px; inset-inline-end: 14px; }
  .vs-a11y{ inset-inline-end: 14px; bottom: 140px; }
}

/* ---- what the preferences actually do ---- */
html[data-a11y-contrast="on"]{
  --ink-soft: rgba(26,26,26,.94); --ink-mute: rgba(26,26,26,.82);
  --on-dark-dim: #FFFDF7; --on-dark-mute: rgba(255,253,247,.9);
  --line: rgba(26,26,26,.3); --line-2: rgba(26,26,26,.46);
}
html[data-a11y-contrast="on"] .lg, html[data-a11y-contrast="on"] .snav.scrolled,
html[data-a11y-contrast="on"] .snav-lang-menu, html[data-a11y-contrast="on"] .snav-links,
html[data-a11y-contrast="on"] .btn-light{
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-a11y-contrast="on"] .snav.scrolled,
html[data-a11y-contrast="on"] .snav-links{ background: #FDFAF3 !important; }
html[data-a11y-contrast="on"] .snav-lang-menu{ background: #FDFAF3 !important; }
html[data-a11y-contrast="on"] .snav .snav-links a,
html[data-a11y-contrast="on"] .snav .snav-brand{ color: #14120C !important; text-shadow: none !important; }
html[data-a11y-contrast="on"] .snav{ background: #FDFAF3 !important; border-bottom: 2px solid #14120C; }
html[data-a11y-contrast="on"] .lg::before, html[data-a11y-contrast="on"] .lg::after,
html[data-a11y-contrast="on"] .snav.scrolled::before, html[data-a11y-contrast="on"] .snav.scrolled::after{ display: none !important; }
html[data-a11y-contrast="on"] .hero-veil, html[data-a11y-contrast="on"] .veil{ background: rgba(11,10,9,.72) !important; }
html[data-a11y-contrast="on"] .sfoot li a, html[data-a11y-contrast="on"] .sfoot-tag{ color: #FFFDF7; }
html[data-a11y-contrast="on"] a:not(.btn):not(.snav-links a){ text-decoration: underline; text-underline-offset: 3px; }

html[data-a11y-text="on"]{ font-size: 118%; }

/* ============================================================
   MOBILE NAV — final state rules.
   These must come LAST: earlier blocks re-declare the base
   .snav-links and .snav-links a, which was overriding both the
   open container and the stagger.
   The open state is deliberately NOT transitioned. A transitioned
   opacity stays pinned at its start value wherever the animation
   clock is throttled (embedded/background frames), which left the
   menu permanently invisible. Closed state uses visibility:hidden
   so the links leave the tab order and the a11y tree.
   ============================================================ */
@media (max-width: 1130px){
  .snav-links{
    opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
    transition: none;
  }
  .snav-links.open{
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .snav-links a{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1130px) and (prefers-reduced-motion: reduce){
  .snav-links.open{ animation: none; }
}
html[data-a11y-text="on"] body{ letter-spacing: .012em; }
html[data-a11y-text="on"] p, html[data-a11y-text="on"] li{ line-height: 1.85; }

html[data-a11y-calm="on"] *, html[data-a11y-calm="on"] *::before, html[data-a11y-calm="on"] *::after{
  animation: none !important; transition: none !important;
}
html[data-a11y-calm="on"] .reveal{ opacity: 1 !important; transform: none !important; }
html[data-a11y-calm="on"] .vs-dust, html[data-a11y-calm="on"] .vs-airlight,
html[data-a11y-calm="on"] .nile-flow, html[data-a11y-calm="on"] .sky-veil{ display: none !important; }
html[data-a11y-calm="on"] .hero img, html[data-a11y-calm="on"] .page-hero img{ transform: none !important; }

html[data-a11y-links="on"] a:not(.btn){
  text-decoration: underline !important; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}


/* ============================================================
   TOKEN RESTORE — these eight were dropped by a bad consolidation
   (a declaration following a /* comment *\/ failed the "--" test and
   was silently discarded). Values recovered from the var() fallbacks
   left in the pages and from colors_and_type.css. This block is last,
   so it also re-asserts the vivid glass values lost the same way.
   ============================================================ */
:root{
  --cream:        #F5EFEB;
  --sand:         #E7C994;
  --surface:      #FCFAF7;
  --cobalt:       #1B4D8F;
  --accent:       #DDB63F;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --font-display: "KOOkies", "Sudan", "Fraunces", Georgia, serif;
  /* vivid glass — restored */
  --lg-tint:      rgba(255,252,244,.20);
  --lg-blur:      blur(26px) saturate(215%) contrast(1.05) brightness(1.04);
  --lg-spec:      rgba(255,246,214,.95);
}
body{ background: var(--cream); }