/* =========================================================
   SKYBOUND · SĀKIN edition of the platform
   Najd palette: sand, clay, date-brown and gold — no white anywhere. Cormorant headings, Jost text.
   Carved Najdi doors close and open between pages; photographs are unveiled like curtains.
   ========================================================= */
:root {
  --sand: #efe3cf; --night: #2e2119; --gold: #b98a3e;
  --clay: #b0623f; --date: #3b2a20; --brown: #6e4a32; --sun: #e3c27f; --card: #f6ecdb;
  --night-80: rgb(46 33 25 / .82); --night-60: rgb(59 42 32 / .68); --night-40: rgb(59 42 32 / .42);
  --night-12: rgb(59 42 32 / .14); --night-06: rgb(59 42 32 / .07);
  --sand-80: rgb(239 227 207 / .84); --sand-60: rgb(239 227 207 / .66); --sand-40: rgb(239 227 207 / .42);
  --sand-14: rgb(239 227 207 / .15); --sand-08: rgb(239 227 207 / .08);
  --gold-20: rgb(185 138 62 / .22); --gold-10: rgb(185 138 62 / .11);
  --white: #f6ecdb;
  --k-shade-rgb: 46 33 25; --k-glass-rgb: 239 227 207;
  --k-sh-06: rgb(59 42 32 / .08); --k-sh-12: rgb(59 42 32 / .14); --k-sh-40: rgb(46 33 25 / .35);
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", ui-sans-serif, system-ui, sans-serif;
}
body { background: var(--sand); color: var(--date); }
.h1, .h2, .h3 { font-weight: 500; letter-spacing: -.02em; }
em { color: var(--clay); }
.dark em, .phead em, .hero em, .own em, .cta__card em, .wiz em { color: var(--sun); }
.eyebrow { color: var(--brown); letter-spacing: .22em; font-weight: 500; }
.dark .eyebrow { color: var(--sun); }
.eyebrow::before { background: var(--clay); }
.logo__t b, .logo__t small, .intro__word span { font-family: var(--sans); }

/* header: warm sand, solid (no blur over moving content) */
.hdr.is-solid { background: rgb(240 228 208 / .97); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgb(59 42 32 / .12), 0 10px 30px -24px rgb(59 42 32 / .4); }
.nav a::after { height: 2px; background: linear-gradient(90deg, var(--clay), var(--sun)); }

/* buttons: clay, with a date-brown fill sweeping in */
.btn--gold { background: var(--clay); color: #f6ecdb; }
.btn--gold::after { background: var(--date); }
.btn--night { background: var(--date); color: var(--sand); }
.btn--night::after { background: var(--clay); }
.btn--night:hover { color: #f6ecdb; }
.btn::after { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.76,0,.24,1); }
.btn:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
html[dir="rtl"] .btn::after { transform-origin: 0 50%; }
html[dir="rtl"] .btn:hover::after { transform-origin: 100% 50%; }
.icon-btn.is-on { background: var(--clay); border-color: var(--clay); color: #f6ecdb; }
.icon-btn.is-on svg { fill: #f6ecdb; }
.pill.is-on, .seg button.is-on { background: var(--date); }
.toggle input:checked { background: var(--clay); }
.chip--gold, .tag { color: var(--date); }
.fab { background: #5b6b3a; }

/* cards: gold corner frames draw in on hover */
.pcard { border: 1px solid rgb(59 42 32 / .08); }
.pcard__media { position: relative; }
.pcard__media::before { content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none; border: 1.5px solid var(--sun);
  clip-path: polygon(0 0, 46px 0, 46px 1.5px, 1.5px 1.5px, 1.5px 46px, 0 46px, 0 100%, 46px 100%, 46px calc(100% - 1.5px), 1.5px calc(100% - 1.5px), 1.5px calc(100% - 46px), 0 calc(100% - 46px));
  opacity: 0; transform: scale(1.06); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard__media::before { opacity: 1; transform: scale(1); }
.serp { background: #fff; color: #202124; }

/* admin: sand console, date-brown sidebar */
.adm { background: var(--sand); font-family: var(--sans); }
.adm__side { background: var(--date); }
.adm-card { background: var(--card); }

/* ---------- Najdi doors: the page cut ---------- */
.transition { display: none !important; }
.intro { display: none !important; }
.skd { position: fixed; inset: 0; z-index: 1500; perspective: 2000px; pointer-events: none; visibility: hidden; }
.skd.on { visibility: visible; pointer-events: all; }
.skd__leaf { position: absolute; top: 0; bottom: 0; width: 50.3%; backface-visibility: hidden; will-change: transform;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 36L18 6l18 30zM36 36l18-30 18 30z' fill='%23b0623f' fill-opacity='.55'/%3E%3Cpath d='M0 72l18-30 18 30zM36 72l18-30 18 30z' fill='%23c39a52' fill-opacity='.45'/%3E%3Cpath d='M18 36l18 0M54 36l18 0' stroke='%232e2119' stroke-opacity='.4'/%3E%3C/svg%3E") center/72px 72px,
    linear-gradient(90deg, #5a3b26, #6e4a32 45%, #5a3b26);
  box-shadow: inset 0 0 0 14px #4a2f1e, inset 0 0 0 16px rgb(195 154 82 / .45), inset 0 0 120px rgb(46 33 25 / .8); }
.skd__l { left: 0; transform-origin: 0 50%; }
.skd__r { right: 0; transform-origin: 100% 50%; }
.skd__leaf::after { content: ""; position: absolute; top: 50%; width: 10px; height: 120px; margin-top: -60px; border-radius: 6px; background: linear-gradient(#e3c27f, #9c7533); box-shadow: 0 4px 12px #0006; }
.skd__l::after { right: 26px; } .skd__r::after { left: 26px; }
/* a band of light travels across the carving as the doors close — the "smart door" moment */
.skd__leaf::before { content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent 0 calc(var(--scan, 0%) - 6%), rgb(255 214 140 / .55) var(--scan, 0%), transparent calc(var(--scan, 0%) + 6%)); }
.skd.scan .skd__leaf::before { opacity: 1; }
.skd__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; transform: scaleY(0);
  background: linear-gradient(180deg, transparent, #ffd98a 20%, #fff2cf 50%, #ffd98a 80%, transparent); box-shadow: 0 0 24px 4px rgb(255 205 120 / .65); }
.skd__mid { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.skd__medal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 38px 20px; min-width: 260px; text-align: center;
  background: rgb(46 33 25 / .9); border: 1px solid rgb(195 154 82 / .5); border-radius: 3px; box-shadow: 0 20px 60px -20px #000a; }
.skd__medal small { font: 500 10px/1 var(--sans); letter-spacing: .34em; color: var(--sun); text-transform: uppercase; }
.skd__medal b { font: 500 clamp(26px, 3vw, 40px)/1.05 var(--display); color: #f2e7d4; letter-spacing: -.01em; }
.skd__medal span { font: 500 20px/1.4 "Noto Kufi Arabic", sans-serif; color: var(--sun); }
.skd__medal i { display: block; width: 100%; height: 2px; margin-top: 6px; background: rgb(195 154 82 / .25); overflow: hidden; }
.skd__medal i::after { content: ""; display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--clay), var(--sun)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* scroll progress: a clay-to-gold thread along the top */
.sk-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 950; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--clay), var(--sun)); pointer-events: none; }
html[dir="rtl"] .sk-prog { transform-origin: 100% 50%; }
body.in-admin .sk-prog { display: none; }

/* photographs unveiled like curtains */
.sk-veil { clip-path: inset(0 0 100% 0); }

@media (max-width: 760px) {
  .skd__medal { min-width: 0; padding: 18px 24px; }
  .skd__leaf::after { height: 80px; margin-top: -40px; }
}
.phead .eyebrow, .hero .eyebrow, .own .eyebrow, .wiz .eyebrow, .cta__card .eyebrow, .ftr .eyebrow { color: var(--sun); }
.phead .eyebrow::before, .wiz .eyebrow::before { background: var(--sun); }