/* =========================================================
   ELVN — Nad Al Sheba, Dubai
   Quiet luxury coffee house. Palette from brand logo.
   ========================================================= */

:root{
  --espresso:#530B1F;
  --espresso-deep:#3A0713;
  --cream:#D4CABE;
  --paper:#F4EFE8;
  --ink:#231F20;
  --bronze:#A8875F;

  --hairline-dark: rgba(35,31,32,0.14);
  --hairline-light: rgba(212,202,190,0.22);

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --maxw: 1240px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  z-index:9999; opacity:0.05; mix-blend-mode:soft-light;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:var(--espresso); color:var(--cream); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }

.eyebrow{
  font-family:var(--sans); font-size:0.7rem; font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad-x);
  transition:background 0.45s ease, padding 0.45s ease, border-color 0.45s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(58,7,19,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding-top:0.85rem; padding-bottom:0.85rem;
  border-bottom:1px solid var(--hairline-light);
}
.nav-mark{
  font-family:var(--serif); font-weight:400; font-size:1.35rem;
  letter-spacing:0.34em; color:var(--cream); padding-left:0.34em;
}
.nav-right{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.4rem); }
.nav-links{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
.nav-links a{ font-size:0.78rem; font-weight:500; letter-spacing:0.06em; color:var(--cream); opacity:0.82; transition:opacity 0.25s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ opacity:1; }
.nav-locale{
  font-size:0.66rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--bronze);
  border-left:1px solid var(--hairline-light); padding-left:clamp(1rem,2.4vw,2.2rem);
}
@media(max-width:720px){ .nav-links{ display:none; } .nav-locale{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  background:radial-gradient(120% 90% at 50% -10%, #611024 0%, var(--espresso) 42%, var(--espresso-deep) 100%);
  color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--pad-x) 3.5rem; overflow:hidden;
}
.hero-inner{ max-width:var(--maxw); margin:0 auto; width:100%; position:relative; z-index:2; }
.hero-eyebrow{ color:var(--bronze); margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.hero-mark{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(4.5rem, 19vw, 15rem); line-height:0.9;
  letter-spacing:0.06em; padding-left:0.06em; color:var(--cream); font-optical-sizing:auto;
}
.hero-sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem, 3.2vw, 2.15rem); color:var(--cream); opacity:0.9;
  margin-top:clamp(1.5rem,3.5vw,2.5rem); max-width:22ch;
}
.hero-rotator{ margin-top:clamp(2rem,4.5vw,3rem); display:flex; align-items:center; gap:0.9rem; min-height:1.4em; }
.hero-rotator .rule{ width:34px; height:1px; background:var(--bronze); flex:none; }
.rotator-word{
  font-size:0.82rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--cream); transition:opacity 0.5s ease;
}
.hero-cta-row{ margin-top:clamp(2.75rem,5vw,3.75rem); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero-note{ font-size:0.78rem; letter-spacing:0.04em; color:var(--cream); opacity:0.6; }

/* rotating seal */
.seal{
  position:absolute; z-index:1;
  right:clamp(1.5rem,6vw,7rem); bottom:clamp(6rem,14vw,9rem);
  width:clamp(120px,15vw,190px); height:clamp(120px,15vw,190px);
  opacity:0.9;
}
.seal-rotate{ transform-origin:100px 100px; animation:spin 44s linear infinite; }
@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@media(max-width:640px){ .seal{ right:auto; left:var(--pad-x); bottom:1.5rem; opacity:0.55; } }

.scroll-cue{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  font-size:0.62rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--cream); opacity:0.5;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem; z-index:2;
}
.scroll-cue span{ width:1px; height:34px; background:var(--bronze); display:block; animation:cue 2.4s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(0.3); opacity:0.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media(max-width:640px){ .scroll-cue{ display:none; } }

/* ---------- SECTIONS ---------- */
.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.section-paper{ background:var(--paper); color:var(--ink); }
.section-cream{ background:var(--cream); color:var(--ink); }
.section-espresso{ background:var(--espresso); color:var(--cream); }

.kicker{ color:var(--espresso); margin-bottom:1.5rem; }
.section-espresso .kicker{ color:var(--bronze); }

.display{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem, 5.2vw, 3.9rem); line-height:1.06; letter-spacing:-0.01em; }
.lede{ font-size:clamp(1rem,1.6vw,1.15rem); max-width:48ch; color:color-mix(in srgb, var(--ink) 66%, transparent); margin-top:1.6rem; }
.section-espresso .lede{ color:color-mix(in srgb, var(--cream) 74%, transparent); }

.promise .display{ max-width:20ch; }

/* ---------- PILLARS ---------- */
.pillars-grid{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline-dark); }
.pillar{ padding:clamp(2rem,3.5vw,3rem) clamp(1.25rem,2.5vw,2.25rem) clamp(1.5rem,3vw,2.25rem) 0; border-right:1px solid var(--hairline-dark); }
.pillar:last-child{ border-right:none; padding-right:0; }
.pillar-art{ display:block; width:clamp(64px,7vw,88px); height:auto; margin-bottom:1.75rem; }
.pillar-index{ font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:1rem; }
.pillar-name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.1; margin-bottom:0.9rem; }
.pillar-copy{ font-size:0.96rem; color:color-mix(in srgb, var(--ink) 62%, transparent); max-width:34ch; }
@media(max-width:760px){
  .pillars-grid{ grid-template-columns:1fr; }
  .pillar{ border-right:none; border-bottom:1px solid var(--hairline-dark); padding:2.25rem 0; }
  .pillar:last-child{ border-bottom:none; }
}

/* ---------- FUNCTIONAL MARQUEE ---------- */
.func-lead{ max-width:40ch; }
.marquee{ margin-top:clamp(2.5rem,5vw,3.75rem); border-top:1px solid var(--hairline-light); border-bottom:1px solid var(--hairline-light); overflow:hidden; white-space:nowrap; padding:1.4rem 0; }
.marquee-track{ display:inline-block; white-space:nowrap; will-change:transform; animation:marq 26s linear infinite; }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--cream); padding:0 1.6rem; }
.marquee-track .dot{ color:var(--bronze); font-style:normal; padding:0 0.4rem; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- MENU ---------- */
.menu-grid{ margin-top:clamp(2.5rem,5vw,3.75rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); }
@media(max-width:760px){ .menu-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.menu-col h3{ font-family:var(--sans); font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--espresso); padding-bottom:1.1rem; border-bottom:1px solid var(--hairline-dark); margin-bottom:0.4rem; }
.menu-row{ display:flex; align-items:baseline; gap:0.75rem; padding:0.85rem 0; border-bottom:1px solid var(--hairline-dark); }
.menu-item{ font-family:var(--serif); font-size:1.12rem; font-weight:400; white-space:nowrap; }
.menu-lead{ flex:1; border-bottom:1px dotted var(--hairline-dark); transform:translateY(-3px); }
.menu-price{ font-family:var(--serif); font-size:1.05rem; color:var(--espresso); }
.menu-foot{ margin-top:1.5rem; font-size:0.8rem; letter-spacing:0.04em; color:color-mix(in srgb,var(--ink) 55%, transparent); }

/* ---------- GALLERY (photo slots) ---------- */
.gallery{ margin-top:clamp(2.5rem,5vw,3.75rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.75rem,1.5vw,1.25rem); }
@media(max-width:760px){ .gallery{ grid-template-columns:1fr; gap:1rem; } }
.tile{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #611024 0%, var(--espresso) 50%, var(--espresso-deep) 100%);
}
.tile-bar{ background:radial-gradient(90% 90% at 60% 35%, #7a1730 0%, var(--espresso) 55%, var(--espresso-deep) 100%); }
.tile-terrace{ background:radial-gradient(130% 110% at 40% 10%, #6b132a 0%, var(--espresso) 60%, var(--espresso-deep) 100%); }
.tile-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; transition:transform 0.9s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile-photo{ transform:scale(1.04); }
.tile-orn{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:0.12em; color:var(--cream); opacity:0.13; padding-left:0.12em; }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.5rem 1.25rem 1.25rem;
  display:flex; flex-direction:column; gap:0.15rem;
  background:linear-gradient(to top, rgba(58,7,19,0.85) 0%, rgba(58,7,19,0.25) 55%, transparent 100%);
}
.tile-lab{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); }
.tile-sub{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze); }

/* ---------- VISIT ---------- */
.visit-grid{ margin-top:clamp(2.5rem,5vw,3.75rem); display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2rem,5vw,4rem); align-items:end; }
@media(max-width:820px){ .visit-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.visit-block{ display:flex; flex-direction:column; gap:1.5rem; }
.visit-item .lab{ font-size:0.66rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:0.5rem; }
.visit-item .val{ font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.35; color:var(--cream); }
.visit-item .val a{ border-bottom:1px solid var(--hairline-light); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.95rem 1.6rem; border:1px solid var(--cream); color:var(--cream);
  transition:background 0.3s ease, color 0.3s ease; cursor:pointer;
}
.btn:hover, .btn:focus-visible{ background:var(--cream); color:var(--espresso-deep); }
.section-paper .btn{ border-color:var(--ink); color:var(--ink); }
.section-paper .btn:hover, .section-paper .btn:focus-visible{ background:var(--ink); color:var(--paper); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--espresso-deep); color:var(--cream); padding:clamp(3.5rem,7vw,6rem) var(--pad-x) 2.5rem; }
.footer-mark{ font-family:var(--serif); font-weight:300; font-size:clamp(3.5rem,14vw,10rem); line-height:0.9; letter-spacing:0.08em; color:var(--cream); opacity:0.14; padding-left:0.08em; margin-bottom:clamp(2rem,4vw,3rem); }
.footer-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:flex-end; border-top:1px solid var(--hairline-light); padding-top:2rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.footer-links a{ font-size:0.78rem; letter-spacing:0.06em; opacity:0.75; transition:opacity 0.25s ease; }
.footer-links a:hover, .footer-links a:focus-visible{ opacity:1; }
.footer-fine{ font-size:0.72rem; letter-spacing:0.06em; opacity:0.5; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track, .seal-rotate, .scroll-cue span{ animation:none; }
  *{ transition:none !important; }
}