/* ============================================================
   OULA LOUNGE — "The Lunar Table"
   Editorial · Arabic-first (RTL) · English toggle · mobile-first
   ============================================================ */
:root{
  --obsidian:#0B0B0D;
  --ink:#141518;
  --ink-2:#1b1c20;
  --silver:#C4C6CD;
  --bone:#ECE9E2;
  --brass:#C6A876;
  --brass-dim:#93794c;
  --muted:#7A7C85;
  --line:rgba(236,233,226,.13);
  --line-soft:rgba(236,233,226,.07);

  --d-lat:"Bodoni Moda",serif;
  --b-lat:"Jost",system-ui,sans-serif;
  --d-ar:"Aref Ruqaa",serif;
  --b-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{max-width:100%}
body{
  background:var(--obsidian);
  color:var(--silver);
  font-family:var(--b-ar);
  font-weight:300;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[dir="ltr"] body{font-family:var(--b-lat);line-height:1.7}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:#111}

/* Type roles -------------------------------------------------- */
.display{font-family:var(--d-ar);font-weight:400}
html[dir="ltr"] .display{font-family:var(--d-lat)}
.eyebrow{
  font-family:var(--b-lat);font-weight:400;font-size:.72rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--brass);
}
html[dir="rtl"] .eyebrow{font-family:var(--b-ar);letter-spacing:.24em;font-weight:500;font-size:.82rem}
.label{font-family:var(--b-lat);font-weight:400;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}

/* Grain + progress ------------------------------------------- */
.grain{
  position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:1200;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-dim),var(--brass));transition:width .1s linear}

/* Intro ------------------------------------------------------- */
#intro{position:fixed;inset:0;z-index:3000;background:var(--obsidian);display:grid;place-items:center;transition:opacity 1s var(--ease),visibility 1s}
#intro.done{opacity:0;visibility:hidden}
.intro-mark{width:clamp(120px,30vw,190px);opacity:0;animation:introIn 2.2s var(--ease) forwards}
@keyframes introIn{0%{opacity:0;transform:translateY(14px) scale(.98);filter:blur(6px)}40%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* Top bar ----------------------------------------------------- */
#bar{position:fixed;top:0;inset-inline:0;z-index:1000;transition:background .5s var(--ease),border-color .5s,padding .5s;border-bottom:1px solid transparent}
#bar.solid{background:rgba(11,11,13,.7);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line-soft)}
.bar-inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
#bar.solid .bar-inner{padding-top:13px;padding-bottom:13px}
.bar-mark img{height:30px;width:auto;opacity:.95}
.bar-nav{display:flex;gap:34px}
.bar-nav a{font-family:var(--b-lat);font-size:.9rem;letter-spacing:.04em;color:var(--silver);opacity:.8;position:relative;padding:6px 0;transition:opacity .35s,color .35s}
html[dir="rtl"] .bar-nav a{font-family:var(--b-ar);font-weight:400;font-size:1rem}
.bar-nav a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--brass);transition:width .4s var(--ease)}
.bar-nav a:hover{opacity:1;color:var(--bone)}
.bar-nav a:hover::after{width:100%}
.bar-right{display:flex;align-items:center;gap:16px}
.lang{background:none;border:1px solid var(--line);color:var(--bone);font-family:var(--b-lat);font-size:.72rem;letter-spacing:.2em;padding:8px 14px;border-radius:0;cursor:pointer;transition:all .35s var(--ease)}
.lang:hover{border-color:var(--brass);color:var(--brass)}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:26px;height:1px;background:var(--bone);transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* Hero -------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 90px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02) brightness(.82)}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(130% 100% at 50% 30%,transparent 34%,rgba(11,11,13,.5) 74%,rgba(11,11,13,.96) 100%),
  linear-gradient(180deg,rgba(11,11,13,.55),rgba(11,11,13,.15) 42%,rgba(11,11,13,.9))}
.hero-inner{position:relative;z-index:1;max-width:900px;display:flex;flex-direction:column;align-items:center}
.hero-eyebrow{margin-bottom:26px;opacity:0;animation:rise 1.2s var(--ease) 2.2s forwards}
.hero-mark{width:clamp(190px,44vw,360px);opacity:0;animation:rise 1.4s var(--ease) 2.35s forwards}
.hero-rule{display:flex;align-items:center;gap:16px;margin:22px 0 8px;opacity:0;animation:rise 1.2s var(--ease) 2.55s forwards}
.hero-rule::before,.hero-rule::after{content:"";width:clamp(28px,10vw,70px);height:1px;background:var(--line)}
.hero-line{font-size:clamp(2.1rem,6.4vw,4.1rem);color:var(--bone);font-weight:400;line-height:1.12;letter-spacing:.01em;margin-top:6px;opacity:0;animation:rise 1.3s var(--ease) 2.7s forwards}
html[dir="ltr"] .hero-line{font-style:italic;font-weight:500}
.hero-sub{color:var(--silver);opacity:0;font-size:clamp(.95rem,2.6vw,1.12rem);margin-top:20px;max-width:34ch;animation:rise 1.2s var(--ease) 2.9s forwards;font-weight:300}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.down{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:rise 1s var(--ease) 3.2s forwards}
.down i{width:1px;height:46px;background:linear-gradient(var(--brass),transparent);position:relative;overflow:hidden}
.down i::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:var(--bone);animation:trickle 2.4s var(--ease) infinite}
@keyframes trickle{to{top:46px}}

/* Section rhythm --------------------------------------------- */
section{position:relative}
.manifesto,.menu,.atmosphere,.story,.visit{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,14vw,190px) var(--pad)}
.eyebrow{display:inline-block;margin-bottom:22px}

/* Manifesto --------------------------------------------------- */
.manifesto{text-align:center;max-width:1080px}
.statement{font-size:clamp(1.8rem,5.2vw,3.4rem);color:var(--bone);line-height:1.3;font-weight:400;text-wrap:balance;margin:0 auto}
html[dir="ltr"] .statement{font-style:italic;line-height:1.22}
.manifesto-body{max-width:60ch;margin:38px auto 0;color:var(--muted);font-size:1.02rem}

/* Plates overture -------------------------------------------- */
.plates{display:grid;grid-template-columns:1fr;gap:2px;background:var(--obsidian)}
@media(min-width:760px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--ink)}
@media(min-width:760px){.plate{aspect-ratio:3/4}}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.92);transition:transform 1.6s var(--ease),filter 1.2s var(--ease)}
.plate:hover img,.plate:hover video{transform:scale(1.06);filter:brightness(1) saturate(1)}
.plate figcaption{position:absolute;inset-inline:0;bottom:0;padding:30px 24px 22px;background:linear-gradient(0deg,rgba(11,11,13,.78),transparent)}
.plate figcaption .label{color:var(--bone);font-size:.74rem}
html[dir="rtl"] .plate figcaption .label{font-family:var(--b-ar);letter-spacing:.18em;font-size:.94rem}

/* Menu -------------------------------------------------------- */
.menu-head{margin-bottom:clamp(40px,6vw,70px)}
.menu-title{font-size:clamp(2.4rem,7vw,4.4rem);color:var(--bone);line-height:1;letter-spacing:.01em}
html[dir="ltr"] .menu-title{font-style:italic}
.menu-layout{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:960px){.menu-layout{grid-template-columns:220px 1fr;gap:clamp(40px,6vw,90px)}}

/* Menu index (section nav) */
.menu-index{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:64px;z-index:30;padding:14px 0;margin-bottom:20px;
  background:linear-gradient(180deg,var(--obsidian) 60%,transparent);
  -webkit-overflow-scrolling:touch;
}
.menu-index::-webkit-scrollbar{display:none}
@media(min-width:960px){
  .menu-index{position:sticky;top:120px;flex-direction:column;gap:2px;overflow:visible;height:max-content;padding:0;margin:0;background:none}
}
.mi-link{
  flex:0 0 auto;display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  font-size:.96rem;color:var(--muted);padding:9px 14px;border:1px solid var(--line-soft);
  transition:color .35s,border-color .35s,background .35s;cursor:pointer;background:none;font-family:inherit;
}
@media(min-width:960px){.mi-link{border:none;border-inline-start:1px solid var(--line);padding:8px 0 8px 16px}
  html[dir="rtl"] .mi-link{padding:8px 16px 8px 0}}
.mi-link .n{font-family:var(--b-lat);font-size:.66rem;letter-spacing:.16em;color:var(--brass-dim);font-variant-numeric:tabular-nums}
.mi-link:hover{color:var(--bone)}
.mi-link.active{color:var(--bone)}
@media(min-width:960px){.mi-link.active{border-inline-start-color:var(--brass)}.mi-link.active .n{color:var(--brass)}}
@media(max-width:959px){.mi-link.active{border-color:var(--brass);color:var(--bone)}}

/* Menu body */
.menu-cat{padding:clamp(30px,5vw,54px) 0;border-top:1px solid var(--line);scroll-margin-top:150px}
.menu-cat:first-child{border-top:none;padding-top:0}
.mc-head{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.mc-head .mc-n{font-family:var(--b-lat);font-size:.74rem;letter-spacing:.24em;color:var(--brass);font-variant-numeric:tabular-nums}
.mc-head h3{font-family:var(--d-ar);font-weight:400;font-size:clamp(1.9rem,5.2vw,2.9rem);color:var(--bone);line-height:1}
html[dir="ltr"] .mc-head h3{font-family:var(--d-lat);font-style:italic}
.mc-head .mc-sub{font-family:var(--b-lat);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.mc-items{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:680px){.mc-items{grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,64px)}}
.mi{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.mi-txt{min-width:0}
.mi-name{color:var(--bone);font-size:1.06rem;font-weight:400;letter-spacing:.01em}
html[dir="ltr"] .mi-name{font-weight:400}
.mi-alt{display:block;font-family:var(--b-lat);font-size:.74rem;letter-spacing:.06em;color:var(--muted);margin-top:3px;text-transform:uppercase;opacity:.9}
html[dir="rtl"] .mi-alt{font-family:var(--b-lat)}
.mi-note{display:block;font-size:.76rem;color:var(--brass-dim);margin-top:4px;letter-spacing:.02em}
.mi-lead{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:12px}
.mi-price{flex:0 0 auto;font-family:var(--b-lat);color:var(--silver);font-size:1rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mi-price .c{font-size:.66rem;color:var(--brass);margin-inline-start:3px;letter-spacing:.1em}

/* Interlude --------------------------------------------------- */
.interlude{position:relative;height:min(78vh,640px);display:grid;place-items:center;overflow:hidden;margin:clamp(20px,4vw,40px) 0}
.interlude-media{position:absolute;inset:0}
.interlude-media img,.interlude-media video{width:100%;height:120%;object-fit:cover;filter:brightness(.6) saturate(.85)}
.interlude-veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(11,11,13,.3),rgba(11,11,13,.86))}
.interlude-quote{position:relative;z-index:1;max-width:20ch;text-align:center;color:var(--bone);font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.3;padding:0 var(--pad);font-weight:400}
html[dir="ltr"] .interlude-quote{font-style:italic}

/* Atmosphere -------------------------------------------------- */
.atmo-head{margin-bottom:clamp(34px,5vw,60px)}
.atmo-title{font-size:clamp(2rem,6vw,3.6rem);color:var(--bone);line-height:1.02}
html[dir="ltr"] .atmo-title{font-style:italic}
.atmo-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.atmo-grid{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto}
  .atmo-a{grid-row:span 2}}
.atmo-grid figure{position:relative;overflow:hidden;background:var(--ink)}
.atmo-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.4s var(--ease),filter 1.4s;filter:brightness(.86) saturate(.92)}
.atmo-a img{aspect-ratio:4/5}
@media(min-width:820px){.atmo-a img{aspect-ratio:auto;min-height:100%}}
.atmo-grid figure:hover img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.atmo-grid figcaption{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:baseline;gap:12px;padding:26px 22px 18px;background:linear-gradient(0deg,rgba(11,11,13,.82),transparent);color:var(--bone);font-size:1.05rem}
.atmo-grid figcaption .idx{font-family:var(--b-lat);font-size:.68rem;letter-spacing:.2em;color:var(--brass)}

/* Story ------------------------------------------------------- */
.story{display:grid;grid-template-columns:1fr;gap:clamp(34px,6vw,80px);align-items:center}
@media(min-width:900px){.story{grid-template-columns:1fr 1fr}}
.story-media{overflow:hidden}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.9) saturate(.9)}
.story-title{font-size:clamp(3rem,9vw,5.4rem);color:var(--bone);line-height:1;margin-bottom:26px}
html[dir="ltr"] .story-title{font-style:italic}
.story-text p{color:var(--muted);font-size:1.05rem;max-width:52ch}
.story-meta{display:flex;gap:clamp(30px,6vw,64px);margin-top:40px}
.story-meta dt{font-size:2.8rem;color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.story-meta dd{font-family:var(--b-lat);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
html[dir="rtl"] .story-meta dd{font-family:var(--b-ar);letter-spacing:.02em;font-size:.86rem}

/* Visit ------------------------------------------------------- */
.visit-head{margin-bottom:clamp(34px,5vw,60px)}
.visit-title{font-size:clamp(2rem,6vw,3.6rem);color:var(--bone);line-height:1.05}
html[dir="ltr"] .visit-title{font-style:italic}
.vrow{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;align-items:center;gap:20px;padding:26px 0;border-top:1px solid var(--line);transition:padding-inline .5s var(--ease)}
.vrow:last-child{border-bottom:1px solid var(--line)}
.vrow-k{align-self:center}
.vrow-v{color:var(--bone);font-size:clamp(1.05rem,2.6vw,1.4rem);line-height:1.4}
.vrow-x{font-family:var(--b-lat);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
html[dir="rtl"] .vrow-x{transform:translateX(6px)}
a.vrow:hover{padding-inline:14px}
a.vrow:hover .vrow-x{opacity:1;transform:none}
a.vrow:hover .vrow-v{color:var(--brass)}
@media(max-width:560px){.vrow{grid-template-columns:1fr auto;gap:6px 16px}.vrow-k{grid-column:1/-1}}

/* Footer ------------------------------------------------------ */
#footer{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,7vw,80px) var(--pad) 40px;border-top:1px solid var(--line)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.foot-mark{height:44px}
.foot-social{display:flex;gap:28px}
.foot-social a{font-family:var(--b-lat);font-size:.82rem;letter-spacing:.12em;color:var(--silver);position:relative;transition:color .35s}
.foot-social a:hover{color:var(--brass)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.86rem}

/* Reveal ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Mobile nav -------------------------------------------------- */
@media(max-width:820px){
  .burger{display:flex}
  .bar-nav{
    position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;
    flex-direction:column;justify-content:center;gap:30px;padding:0 var(--pad);
    background:rgba(11,11,13,.97);backdrop-filter:blur(20px);
    transform:translateY(-102%);transition:transform .6s var(--ease);text-align:center;
  }
  .bar-nav.open{transform:translateY(0)}
  .bar-nav a{font-size:2rem;opacity:1}
  .bar-nav a::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.2s!important}
  .intro-mark{opacity:1;animation:none}
  .hero-eyebrow,.hero-mark,.hero-rule,.hero-line,.hero-sub,.down{opacity:1;animation:none}
  .down i::after{display:none}
}