/* ============================================
   EILLY ROOFTOP REVELRY — design tokens
   Palette pulled from the venue's own photography
   (midnight sky, string lights) and its wine-glass
   mark, not a generic template accent.
   ============================================ */
:root{
  --ink:        #0B0E14;   /* midnight — hero / dark surfaces */
  --charcoal:   #171B24;   /* secondary dark surface */
  --wine:       #A31E34;   /* the logo's wine fill */
  --wine-light: #C7324B;
  --gold:       #C9A65A;   /* string-light amber */
  --cream:      #F3EFE6;   /* warm off-white, light section */
  --muted:      #9A9484;
  --hairline:   rgba(243,239,230,0.14);
  --hairline-dark: rgba(11,14,20,0.10);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--wine);
  margin-bottom:18px;
}
.eyebrow--light{color:var(--gold);}

/* ============ LOADER ============ */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.loader__mark{
  font-family:var(--font-body);
  color:var(--cream);
  font-size:13px;
  font-weight:600;
  letter-spacing:.5em;
  padding-left:.5em; /* optically re-center after letter-spacing */
}
.loader__bar{
  width:160px; height:1px;
  background:var(--hairline);
}
.loader__fill{
  height:100%; width:0%;
  background:var(--wine-light);
  transition:width .25s ease;
}
.loader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}

/* ============ HERO ============ */
.hero{
  position:relative;
  height:400vh; /* scroll distance available for scrubbing */
  background:var(--ink);
}
.hero__pin{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--ink);
}
.hero__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,14,20,.75) 0%, rgba(11,14,20,.15) 32%, rgba(11,14,20,.1) 55%, rgba(11,14,20,.55) 100%);
  pointer-events:none;
}

.hero__nav{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px clamp(20px,5vw,56px);
  z-index:3;
}
.hero__navmark{
  height:40px; width:auto;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.hero__navmark.is-visible{opacity:1;}
.hero__navcta{
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream);
  border:1px solid var(--hairline);
  padding:10px 20px;
  border-radius:999px;
  opacity:0;
  transition:opacity .6s var(--ease), border-color .3s ease, background .3s ease;
}
.hero__navcta.is-visible{opacity:1;}
.hero__navcta:hover{border-color:var(--wine-light); background:rgba(163,30,52,.15);}

.hero__copy{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 24px;
  z-index:2;
}
.hero__line{
  position:absolute;
  opacity:0;
  color:var(--cream);
  will-change:opacity, transform;
}
.hero__line--a, .hero__line--b{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px, 5vw, 56px);
  max-width:14ch;
  line-height:1.15;
}
.hero__line--c{
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.hero__wordmark{width:min(320px, 60vw); height:auto;}
.hero__tagline{
  font-family:var(--font-body);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0;
}
.hero__cta{
  margin-top:6px;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:var(--wine);
  color:var(--cream);
  padding:14px 30px;
  border-radius:999px;
  transition:background .3s ease, transform .3s ease;
}
.hero__cta:hover{background:var(--wine-light); transform:translateY(-2px);}

.hero__scrollcue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  z-index:3;
  transition:opacity .4s ease;
}
.hero__scrollcue-line{
  width:1px; height:32px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%,100%{transform:scaleY(1); opacity:.5;}
  50%{transform:scaleY(1.3); opacity:1;}
}

/* static fallback for reduced motion / no-js */
.hero--static{height:100vh;}
.hero--static .hero__pin{position:relative; background-size:cover; background-position:center;}
.hero--static .hero__canvas{display:none;}
.hero--static .hero__line{position:relative; opacity:1; margin:0 0 20px;}
.hero--static .hero__copy{position:relative; gap:14px; height:100%;}
.hero--static .hero__scrollcue{display:none;}

/* ============ EXPERIENCE (ambience + food) ============ */
.experience{
  background:var(--cream);
  padding:min(18vh,150px) clamp(20px,6vw,80px) 40px;
}
.experience__intro{
  max-width:640px;
  margin:0 auto 90px;
  text-align:center;
}
.experience__heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,4.5vw,52px);
  margin:0;
  color:var(--ink);
}

.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,72px);
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:56px 0;
  border-top:1px solid var(--hairline-dark);
}
.feature--imgleft .feature__media{order:0;}
.feature--imgleft .feature__text{order:1;}

.feature__tag{
  display:block;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wine);
  margin-bottom:14px;
}
.feature__text h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,3vw,36px);
  margin:0 0 16px;
}
.feature__text p{
  font-size:16px;
  line-height:1.7;
  color:#4A473F;
  margin:0;
  max-width:44ch;
}

.feature__media.placeholder{
  aspect-ratio:4/5;
  border:1px dashed rgba(11,14,20,.25);
  border-radius:6px;
  background:
    repeating-linear-gradient(135deg, rgba(11,14,20,.03) 0px, rgba(11,14,20,.03) 2px, transparent 2px, transparent 14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--muted);
}
.placeholder__icon{font-size:28px; opacity:.5;}
.placeholder__label{font-size:13px; letter-spacing:.03em; text-align:center; padding:0 20px;}

/* photo duo: a main frame with a smaller overlapping accent frame */
.feature__media.stack{
  position:relative;
  aspect-ratio:4/5;
}
.stack__main{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:6px;
  display:block;
}
.stack__accent{
  position:absolute;
  width:44%;
  aspect-ratio:1/1.05;
  object-fit:cover;
  border-radius:6px;
  border:5px solid var(--cream);
  box-shadow:0 24px 44px rgba(11,14,20,.28);
  bottom:-28px;
}
.feature--imgright .stack__accent{left:-28px;}
.feature--imgleft .stack__accent{right:-28px;}

/* ============ MENU ============ */
.menu{
  background:var(--cream);
  padding:min(14vh,120px) clamp(20px,6vw,80px) min(14vh,110px);
}
.menu__intro{max-width:640px; margin:0 auto 50px; text-align:center;}
.menu__heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,4.2vw,48px);
  margin:0;
  color:var(--ink);
}
.menu__tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0 auto 50px;
}
.menu__tab{
  font-family:var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:transparent;
  border:1px solid var(--hairline-dark);
  color:var(--ink);
  padding:11px 22px;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.menu__tab.is-active{background:var(--wine); border-color:var(--wine); color:var(--cream);}
.menu__tab:not(.is-active):hover{border-color:var(--wine);}

.menu__body{max-width:760px; margin:0 auto;}
.menu__list{list-style:none; margin:0; padding:0;}
.menu__panel{display:none;}
.menu__panel.is-active{display:block;}
.menu__item{padding:18px 0; border-bottom:1px solid var(--hairline-dark);}
.menu__item:last-child{border-bottom:none;}
.menu__item-row{display:flex; align-items:baseline; gap:8px;}
.menu__item-row h4{
  font-family:var(--font-display);
  font-weight:400;
  font-size:19px;
  margin:0;
  color:var(--ink);
  white-space:nowrap;
}
.menu__leader{
  flex:1;
  border-bottom:1px dotted rgba(11,14,20,.28);
  transform:translateY(-5px);
  margin:0 4px;
}
.menu__price{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  color:var(--wine);
  white-space:nowrap;
}
.menu__price.placeholder-text{color:var(--muted); font-size:13px;}
.menu__desc{
  margin:6px 0 0 17px;
  font-size:14px;
  line-height:1.55;
  color:#6b6659;
  max-width:56ch;
}
.menu__dot{
  width:8px; height:8px; border-radius:50%;
  flex:none;
  margin-bottom:2px;
}
.menu__dot--veg{background:#3E8E4F;}
.menu__dot--nonveg{background:var(--wine);}
.menu__legend{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:50px auto 0;
  font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.menu__legend .menu__dot{margin:0;}
.menu__legend .menu__dot--nonveg{margin-left:14px;}

/* ============ RESERVE + ORDER ============ */
.reserve{
  background:var(--ink);
  color:var(--cream);
  padding:min(15vh,130px) clamp(20px,6vw,80px) min(12vh,90px);
}
.reserve__inner{max-width:980px; margin:0 auto; text-align:center;}
.reserve__heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,4.2vw,48px);
  margin:0 0 60px;
}
.reserve__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  text-align:left;
}
.reserve__form label{
  display:flex; flex-direction:column; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  flex:1;
}
.reserve__row{display:flex; gap:18px; margin-bottom:18px;}
.reserve__full{display:flex; flex-direction:column; gap:7px; margin-bottom:24px;}
.reserve__form input,
.reserve__form select,
.reserve__form textarea{
  background:var(--charcoal);
  border:1px solid var(--hairline);
  color:var(--cream);
  border-radius:5px;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  width:100%;
}
.reserve__form input:focus,
.reserve__form select:focus,
.reserve__form textarea:focus{outline:none; border-color:var(--wine-light);}
.reserve__form textarea{resize:vertical;}
.reserve__submit{
  background:var(--wine);
  color:var(--cream);
  border:none;
  padding:16px 38px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.reserve__submit:hover{background:var(--wine-light); transform:translateY(-2px);}
.reserve__note{font-size:12px; color:var(--muted); margin:14px 0 0;}

.reserve__aside{
  padding-left:10px;
  border-left:1px solid var(--hairline);
}
.reserve__aside h3{
  font-family:var(--font-display); font-weight:400; font-size:22px;
  margin:0 0 8px;
}
.reserve__aside > p{font-size:14px; color:var(--muted); margin:0 0 22px;}
.reserve__delivery{margin-bottom:40px;}
.delivery-btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  margin:0 12px 12px 0;
  transition:background .25s ease, color .25s ease;
}
.delivery-btn--swiggy{color:#FC8019; border-color:#FC8019;}
.delivery-btn--swiggy:hover{background:#FC8019; color:var(--ink);}
.delivery-btn--zomato{color:#E23744; border-color:#E23744;}
.delivery-btn--zomato:hover{background:#E23744; color:var(--cream);}
.reserve__call h3{font-size:16px; margin-bottom:8px;}

/* ============ DETAILS ============ */
.details{
  background:var(--ink);
  color:var(--cream);
  padding:min(16vh,140px) clamp(20px,6vw,80px) 60px;
}
.details__inner{max-width:900px; margin:0 auto; text-align:center;}
.details__heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,4.5vw,52px);
  margin:0 0 70px;
}
.details__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  text-align:left;
  padding-bottom:60px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:50px;
}
.details__block h4{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px;
}
.placeholder-text{
  font-size:15px; line-height:1.6;
  color:var(--muted);
  font-style:italic;
  margin:0;
}
.details__cta{
  display:inline-block;
  background:var(--wine);
  color:var(--cream);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 40px;
  border-radius:999px;
  transition:background .3s ease, transform .3s ease;
}
.details__cta:hover{background:var(--wine-light); transform:translateY(-2px);}

.details__foot{
  margin-top:80px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.05em; color:var(--muted);
}
.details__logo{width:80px; height:auto; opacity:.85;}

/* ============ scroll reveal ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .hero__scrollcue-line{animation:none;}
}

/* ============ responsive ============ */
@media (max-width:820px){
  .feature, .feature--imgleft .feature__media, .feature--imgleft .feature__text{
    grid-template-columns:1fr;
    order:initial;
  }
  .feature{grid-template-columns:1fr; padding:44px 0 76px;}
  .feature__media{order:-1 !important; max-width:420px; margin:0 auto;}
  .stack__accent{width:42%; bottom:-20px;}
  .feature--imgright .stack__accent{left:-16px;}
  .feature--imgleft .stack__accent{right:-16px;}
  .details__grid{grid-template-columns:1fr 1fr;}
  .menu__item-row h4{white-space:normal;}
  .reserve__grid{grid-template-columns:1fr; gap:50px;}
  .reserve__aside{border-left:none; border-top:1px solid var(--hairline); padding-left:0; padding-top:34px;}
  .reserve__row{flex-direction:column; gap:18px;}
}
@media (max-width:520px){
  .details__grid{grid-template-columns:1fr;}
  .hero__navcta{padding:8px 16px; font-size:11px;}
}