/* Damasca · ثلاث رؤى — foundations: tokens, type, header, buttons, menu, lightbox.
   Palette: official Figma ramps (navy, blue, gold, terracotta, slate, mist), roles as in the
   21 Oct brochure (pale wall, navy, light blue, terracotta numbering). */

:root {
  --navy-950: #000C19;
  --navy: #00253E;
  --navy-700: #335165;
  --navy-500: #667C8B;
  --navy-300: #99A8B2;
  --navy-200: #CCD3D8;
  --navy-100: #E6EAEC;
  --blue: #A2C6E0;
  --blue-100: #E3EDF4;
  --gold: #F5E0A4;
  --gold-50: #FEFCF6;
  --terra: #C46D61;
  --terra-ink: #A9564B;
  --slate: #5B656E;
  --wall: #E9EDEF;
  --wall-2: #DCE3E6;
  --paper: #F6F8F8;
  --dawn: #E1E9EF;
  --deep: #001629;
  --night: #070C12;
  --ivory: #F1ECE2;
  --bronze: #C08F5C;

  /* DEMO 03 identity: ground, ink and accent of its hall (now the work-in-progress «تدرُّج»). Replace with the
     final direction's own values when it is approved; nothing else in the CSS needs to change. */
  --d3-ground: var(--night);
  --d3-ink: var(--ivory);
  --d3-accent: var(--bronze);

  --ground: var(--wall);
  --ink: var(--navy);
  --ink-2: #4E5A64;
  --rule: rgba(0, 37, 62, .16);
  --accent: var(--terra-ink);

  --edge: clamp(16px, 5vw, 100px);
  --tri-edge: clamp(10px, 2.2vw, 40px);
  --hdr: 76px;
  --max: 1680px;

  --f-display: 'DS Display', 'Noto Naskh Arabic', 'Geeza Pro', 'Arial', serif;
  --f-text: 'DS Text', 'Noto Sans Arabic', 'Geeza Pro', 'Arial', sans-serif;
  --f-v1: 'DS Voice 1', 'Amiri', var(--f-display);
  --f-v2: 'DS Voice 2', 'Alexandria', var(--f-display);
  --f-v3: 'DS Voice 3', 'Markazi Text', var(--f-display);

  --fs-mega: clamp(46px, 6.9vw, 132px);
  --fs-h2: clamp(38px, 5vw, 92px);
  --fs-h3: clamp(26px, 2.4vw, 40px);
  --fs-lead: clamp(18px, 1.45vw, 25px);
  --fs-body: clamp(16px, 1.08vw, 18px);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
}

[data-tone="dark"] {
  --ink: #F1EEE6;
  --ink-2: rgba(241, 238, 230, .7);
  --rule: rgba(241, 238, 230, .18);
  --accent: var(--gold);
}

@media (max-width: 899px) {
  :root { --hdr: 62px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.85;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .9s var(--ease);
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
[data-tone="dark"] :focus-visible { outline-color: var(--gold); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; top: 10px; right: 10px; z-index: 100; padding: 10px 18px; border-radius: 999px;
  background: var(--navy); color: #fff; transform: translateY(-160%); transition: transform .3s;
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--edge)); margin-inline: auto; padding-inline: var(--edge); }

/* ---------- type ---------- */
.h2, .h3, .unveil__title, .hall__thesis, .choose__title {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.24;
  text-wrap: balance;
}
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h2 b, .h3 b, .unveil__title b { font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--ink-2); }
p { text-wrap: pretty; }

.num {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: 'tnum' 1;
}
.eyebrow, .hall__kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ink-2);
}
.eyebrow .num, .hall__kicker .num { font-size: 15px; }
.eyebrow .num::after, .hall__kicker .num::after {
  content: ''; display: inline-block; width: 34px; height: 1px; background: currentColor;
  margin-inline-start: 12px; vertical-align: middle; opacity: .55;
}
.eyebrow .sep { display: inline-block; width: 28px; height: 1px; background: var(--rule); }

.voice-1 { font-family: var(--f-v1); font-weight: 400; }
.voice-2 { font-family: var(--f-v2); font-weight: 200; }
.voice-3 { font-family: var(--f-v3); font-weight: 500; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--navy); --b-fg: #F6F8F8; --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font-family: var(--f-text); font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  transition: background-color .35s, color .35s, border-color .35s, transform .35s var(--ease), opacity .35s;
}
.btn:hover { --b-bg: var(--navy-700); }
.btn:active { transform: scale(.98); }
.btn i {
  position: relative; width: 22px; height: 1.5px; background: currentColor; flex: none;
  transition: transform .4s var(--ease);
}
/* RTL: forward points left */
.btn i::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translate(0, -50%) rotate(45deg); transform-origin: center;
}
.btn:hover i { transform: translateX(-5px); }
.btn i.up { width: 1.5px; height: 18px; }
.btn i.up::before { left: 50%; top: 0; transform: translate(-50%, 0) rotate(135deg); }
.btn:hover i.up { transform: translateY(-4px); }
.btn--line { --b-bg: transparent; --b-fg: var(--ink); --b-bd: currentColor; }
.btn--line:hover { --b-bg: var(--ink); --b-fg: var(--ground); --b-bd: var(--ink); }
[data-tone="dark"] .btn--line:hover { --b-fg: var(--navy); }
.btn--gold { --b-bg: var(--gold); --b-fg: var(--navy); }
.btn--gold:hover { --b-bg: #FBEBC0; }
.btn--d3 { --b-bg: var(--d3-accent); --b-fg: #120C06; }
.btn--d3:hover { --b-bg: color-mix(in srgb, var(--d3-accent) 80%, #fff); }
.btn--big { min-height: 58px; padding: 0 32px; font-size: 17px; }
.btn--pill { min-height: 40px; padding: 0 20px; font-size: 14px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .38; pointer-events: none; }

/* ---------- arrows (lightbox, day track) ---------- */
.arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule);
  display: inline-grid; place-items: center; color: var(--ink);
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}
.arrow:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.arrow:disabled { opacity: .3; pointer-events: none; }
.arrow i { position: relative; width: 18px; height: 1.5px; background: currentColor; }
.arrow i::before {
  content: ''; position: absolute; top: 50%; width: 8px; height: 8px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
/* RTL: "next" moves left, "previous" moves right */
.arrow--next i::before { left: 0; transform: translateY(-50%) rotate(45deg); }
.arrow--prev i::before { right: 0; transform: translateY(-50%) rotate(-135deg); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--edge);
  color: var(--navy);
  transition: color .3s var(--ease), background-color .45s var(--ease), box-shadow .5s, opacity .6s, transform .6s var(--ease);
}
.hdr.is-solid {
  background: color-mix(in srgb, var(--hdr-ground, var(--wall)) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(0, 37, 62, .08);
}
.hdr[data-ink="light"] { color: #F1EEE6; }
.hdr.no-trans, .hdr.no-trans * { transition: none !important; }
.hdr[data-ink="light"].is-solid { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.hdr__logo { display: block; flex: none; }
.hdr__logo .logo { width: clamp(118px, 9.6vw, 150px); height: auto; aspect-ratio: 170 / 52; }
.hdr__nav { display: flex; gap: clamp(18px, 2.4vw, 40px); margin-inline-start: auto; }
.hdr__nav a { position: relative; font-size: 15px; font-weight: 500; padding: 6px 0; }
.hdr__nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a.is-current::after { transform: scaleX(1); }
.hdr__cta { --b-bg: var(--navy); --b-fg: #F6F8F8; }
.hdr[data-ink="light"] .hdr__cta { --b-bg: var(--gold); --b-fg: var(--navy); }
.hdr__menu { display: none; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin-inline-start: auto; min-height: 44px; }
.hdr__menu-lines { position: relative; width: 22px; height: 10px; border-block: 1.5px solid currentColor; }
@media (max-width: 899px) {
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__menu { display: inline-flex; }
}

/* ---------- menu (phones, tablets) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--navy); color: #F1EEE6;
  display: grid; overflow-y: auto; opacity: 0; transition: opacity .45s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; padding: 18px var(--edge) 28px; }
.menu__close { justify-self: end; width: 48px; height: 48px; font-size: 34px; line-height: 1; }
.menu__list { align-self: center; display: grid; gap: 4px; }
.menu__list a {
  display: flex; align-items: baseline; gap: 18px; padding: 8px 0;
  font-family: var(--f-display); font-size: clamp(28px, 7.4vw, 44px); font-weight: 300; line-height: 1.4;
  border-bottom: 1px solid rgba(241, 238, 230, .14);
}
.menu__list .num { font-size: 15px; color: var(--gold); min-width: 2em; }
.menu__foot { font-size: 13px; opacity: .6; }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 90; color: #F1EEE6;
  background: rgba(0, 9, 18, .95);
  display: grid; grid-template-rows: 64px minmax(0, 1fr) auto; padding: 0 var(--edge) 18px;
  opacity: 0; transition: opacity .4s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb__top { display: flex; align-items: center; justify-content: space-between; }
.lb__count { font-size: 14px; opacity: .7; font-feature-settings: 'tnum' 1; }
.lb__close { width: 48px; height: 48px; font-size: 34px; line-height: 1; color: inherit; }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.lb__stage picture { max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lb__stage img {
  max-width: min(100%, 1600px); max-height: calc(100svh - 160px); width: auto; height: auto;
  object-fit: contain; border-radius: 6px; box-shadow: 0 40px 120px -40px #000;
  animation: lb-in .55s var(--ease) both;
}
.lb__stage.is-phone img { border-radius: 26px; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } }
.lb__cap { text-align: center; font-size: 15px; line-height: 1.7; padding-top: 12px; opacity: .85; min-height: 2.4em; }
.lb .arrow { position: absolute; top: 50%; transform: translateY(-50%); color: #F1EEE6; border-color: rgba(241, 238, 230, .3); background: rgba(0, 9, 18, .4); }
.lb .arrow:hover { background: #F1EEE6; color: var(--navy); }
.lb__prev { right: max(12px, calc(var(--edge) - 40px)); }
.lb__next { left: max(12px, calc(var(--edge) - 40px)); }
@media (max-width: 699px) {
  .lb { padding-inline: 10px; }
  .lb .arrow { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
  .lb__cap { padding-inline: 60px; }
}