/* ===== Luxe layer: champagne-gold on midnight ===== */
:root{--gold:#e9cf93;--gold-2:#c99a4b;--gold-soft:#f7e8c4;--gold-line:#e9cf9340;color-scheme:dark}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
::selection{background:#e9cf9340;color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 38%,#02081a8c 100%),
  radial-gradient(60% 40% at 18% 8%,#e9cf9317,transparent 70%),
  radial-gradient(50% 40% at 88% 92%,#7fb6ff14,transparent 70%)}
body::after{content:"";position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#luxe-dust{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
#luxe-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:60;transform-origin:right;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-2),var(--gold-soft),var(--gold-2));box-shadow:0 0 12px #e9cf93aa;pointer-events:none}
html{scrollbar-color:var(--gold-2) #07162c;scrollbar-width:thin}

/* header */
.top{background:#07152b8c!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--gold-line)!important}
.brand-mark{border-color:var(--gold-line);color:var(--gold);text-shadow:0 0 14px #e9cf93}
.brand small{color:var(--gold)}
nav a{transition:color .3s}nav a:hover{color:var(--gold)}

/* buttons */
.primary{background:linear-gradient(135deg,#f9ebc2 0%,#dcb468 52%,#f4dc9b 100%)!important;color:#2b1b05!important;
  border:1px solid #fff3cf!important;font-weight:700;position:relative;overflow:hidden;
  box-shadow:0 8px 34px #d4a85a40,inset 0 1px 0 #fff9;transition:transform .35s,box-shadow .35s}
.primary::after{content:"";position:absolute;inset:0;transform:translateX(120%) skewX(-20deg);width:40%;
  background:linear-gradient(90deg,transparent,#ffffffb0,transparent);transition:transform .8s}
.primary:hover{transform:translateY(-3px);box-shadow:0 14px 44px #d4a85a66,inset 0 1px 0 #fff9}
.primary:hover::after{transform:translateX(-380%) skewX(-20deg)}
.pill{background:#0b1f3a99!important;border-color:var(--gold-line)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill:hover:not(:disabled){border-color:var(--gold)!important;background:#14305599!important}
.audio[aria-pressed=true]{border-color:var(--gold)!important;box-shadow:0 0 20px #e9cf9340}
.eyebrow{color:var(--gold)}.eyebrow i{background:var(--gold);box-shadow:0 0 14px var(--gold)}

/* gold headings */
h1,.chapter-text h2,.section-heading h2{background:linear-gradient(180deg,#fff 10%,var(--gold-soft) 60%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 4px 26px #0006)}
.hero-date bdi{color:var(--gold)}

/* gallery */
.photo-card{border:1px solid var(--gold-line)!important;border-radius:14px;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .4s;box-shadow:0 14px 40px #0006}
.photo-card:hover{transform:translateY(-6px) scale(1.015);border-color:var(--gold)!important;box-shadow:0 26px 60px #000a,0 0 30px #e9cf9322}
.photo-card img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}.photo-card:hover img{transform:scale(1.07)}

/* dialogs */
dialog.modal{border:1px solid var(--gold-line)!important;box-shadow:0 40px 120px #000c,0 0 0 1px #ffffff08,0 0 60px #e9cf931a!important}
dialog::backdrop{background:radial-gradient(circle at 50% 40%,#0a1d3acc,#010612ee)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog[open]{animation:luxe-pop .55s cubic-bezier(.2,.8,.2,1)}
@keyframes luxe-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.close{border-color:var(--gold-line)!important;transition:transform .4s,border-color .3s}.close:hover{transform:rotate(90deg);border-color:var(--gold)!important}
.final-letter-panel{border:1px solid var(--gold-line);box-shadow:0 30px 90px #0008,0 0 60px #e9cf9318}

/* reveal on scroll (only when JS is running) */
.js-reveal .rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s}
.js-reveal .rv.in{opacity:1;transform:none;filter:none}

/* entry gate */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 38%,#12305a 0%,#071a33 48%,#02091a 100%);transition:opacity 1.2s,visibility 1.2s,transform 1.2s}
#gate.gone{opacity:0;visibility:hidden;transform:scale(1.06);pointer-events:none}
#gate .g-in{display:grid;gap:18px;justify-items:center;animation:luxe-pop 1.4s both}
#gate .g-time{font:700 13px Arial;letter-spacing:.5em;color:var(--gold);opacity:.85;padding-inline-start:.5em}
#gate .g-name{font:700 clamp(64px,18vw,120px)/1.1 Display,Arabic,serif;background:linear-gradient(180deg,#fff,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 40px #e9cf9355)}
#gate .g-sub{color:#cfe0f2;font-size:16px;max-width:300px}
#gate .g-ring{position:absolute;width:min(78vw,520px);aspect-ratio:1;border-radius:50%;border:1px solid var(--gold-line);animation:g-spin 40s linear infinite;
  background:conic-gradient(from 0deg,transparent,#e9cf9322,transparent 30%);pointer-events:none}
@keyframes g-spin{to{transform:rotate(360deg)}}
body.gated{overflow:hidden}
@media (max-width:720px){.wrap{width:min(1120px,calc(100% - 40px))}.photo-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){#gate .g-ring{animation:none}.js-reveal .rv{transition:none;opacity:1;transform:none;filter:none}.primary::after{display:none}}

/* masonry gallery */
.photo-grid{display:block!important;column-count:3;column-gap:16px;perspective:none}
.photo-card{break-inside:avoid;margin-bottom:16px;display:block!important;padding:6px!important;background:linear-gradient(145deg,#12304d,#0a1c33)!important}
.photo-card img{height:auto!important;object-fit:cover!important;aspect-ratio:auto;background:#07182a}
@media (max-width:900px){.photo-grid{column-count:2;column-gap:10px}.photo-card{margin-bottom:10px}}
/* paper & wax depth */
.ink-paper,.page{background-image:url(../assets/aged-paper.svg),linear-gradient(160deg,#f7efd9,#ecdfc0)!important;background-blend-mode:multiply;
  box-shadow:inset 0 0 60px #b8924a33,0 20px 60px #0008!important;color:#3a2a14}
.wax{filter:drop-shadow(0 6px 8px #0007) drop-shadow(0 0 10px #8e1f2a66);text-shadow:0 1px 0 #ffffff50,0 -1px 0 #0006}
.envelope{box-shadow:0 30px 70px #000a,0 0 40px #e9cf9322!important}
.book-object{box-shadow:0 34px 80px #000b,0 0 0 1px #e9cf9355,0 0 50px #e9cf931f!important}
.book-title b,.book-title i{color:var(--gold-soft)!important;text-shadow:0 0 18px #e9cf9355}
#gate .g-count{color:var(--gold);font:700 15px Display,Arabic,serif;min-height:1.6em;opacity:.9}
#gate .g-name{animation:g-rise 1.8s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes g-rise{from{opacity:0;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}

/* ===== typography: Kufi headings, Tajawal body, Amiri letters ===== */
body{font-family:Tajawal,Arabic,Arial,sans-serif;line-height:1.9;font-weight:400}
h1,h2,h3,#gate .g-name,.book-title b{font-family:"Reem Kufi",Display,Arabic,serif!important;font-weight:700;letter-spacing:0}
#letter .letter-intro,.hero-quote{font-family:Amiri,Display,Arabic,serif!important;font-weight:400}
.brand small,.hero-date bdi,#gate .g-time,.page-no{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700}
.primary,.pill,nav a{font-family:Tajawal,Arabic,sans-serif;font-weight:500}
/* ===== PIN keypad ===== */
.g-pin{display:grid;gap:18px;justify-items:center;animation:luxe-pop .8s both}.g-pin[hidden]{display:none}
.g-dots{display:flex;gap:16px;direction:ltr;transition:transform .1s}
.g-dots i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--gold);transition:.25s}
.g-dots i.on{background:var(--gold);box-shadow:0 0 16px var(--gold)}
.g-dots.ok i{background:#fff3cf;box-shadow:0 0 26px #ffe9a8;border-color:#fff}
.g-dots.bad{animation:g-shake .5s}.g-dots.bad i{border-color:#ff8a8a;background:#ff8a8a55}
@keyframes g-shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.g-pad{display:grid;grid-template-columns:repeat(3,68px);gap:14px;direction:ltr}
.g-key{width:68px;height:68px;border-radius:50%;border:1px solid var(--gold-line);background:#0b1f3a99;color:var(--gold-soft);
  font:700 26px "Cormorant Garamond",Georgia,serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.25s}
.g-key:hover,.g-key:active{border-color:var(--gold);background:#e9cf9326;box-shadow:0 0 22px #e9cf9340;transform:scale(1.06)}
.g-hint{color:#a9bfd6;font-size:13px;min-height:1.5em}