/* =========================================================
   CAIRO — Restaurant & Cafe
   Design tokens derived from the brand's own printed menus:
   deep watercolor forest green, aged cream, warm antique gold.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;1,6..96,500;1,6..96,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@400;500;600&family=Cairo:wght@300;400;500;600;700&family=Amiri:ital@0;1&display=swap');

:root{
  /* --- colors, lifted from the menu pages --- */
  --forest-deepest: #0a2018;
  --forest-deep:    #0e2b1f;
  --forest:         #163a2a;
  --forest-mid:     #1d4634;
  --forest-line:    rgba(237, 231, 211, 0.14);
  --cream:          #efe9d8;
  --cream-dim:      #cfc9b4;
  --gold:           #c9a24c;
  --gold-soft:      #e6cb8a;
  --gold-dim:       rgba(201, 162, 76, 0.35);
  --ink:            #12241a;

  /* --- type --- */
  --f-display: 'Bodoni Moda', 'Playfair Display', 'Amiri', serif;
  --f-script:  'Cormorant Garamond', serif;
  --f-label:   'Jost', 'Cairo', sans-serif;
  --f-arabic:  'Cairo', sans-serif;
  --f-arabic-serif: 'Amiri', serif;

  --container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--forest-deep);
  color:var(--cream);
  font-family:var(--f-arabic);
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.lang-en{ direction:ltr; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--gold-dim); color:var(--cream); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* watercolor paper texture, reused on every dark section (matches the PDF backgrounds) */
.texture{
  position:relative;
  background-color:var(--forest);
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 8%,  rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 15%, rgba(0,0,0,0.35), transparent 60%),
    radial-gradient(ellipse 70% 55% at 80% 85%, rgba(0,0,0,0.30), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 90%,  rgba(255,255,255,0.04), transparent 60%);
}
.texture--deep{ background-color:var(--forest-deep); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:clamp(20px, 5vw, 64px);
}

/* =================== small-caps corner labels (menu header device) =================== */
.page-band{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-block:clamp(18px, 3vw, 28px);
}
.page-band__label{
  font-family:var(--f-label);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cream-dim);
  line-height:1.5;
  white-space:nowrap;
}
.page-band__title{
  text-align:center;
  flex:1;
}
.page-band__title .ar{
  display:block;
  font-family:var(--f-arabic);
  font-size:clamp(20px, 2.6vw, 30px);
  color:var(--cream);
  font-weight:600;
}
.page-band__title .en{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(14px, 1.4vw, 18px);
  letter-spacing:0.28em;
  color:var(--gold-soft);
  margin-top:2px;
}

/* =================== gold hairline divider =================== */
.hr-gold{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold) 50%, var(--gold-dim) 80%, transparent);
  margin:0;
}

/* =================== nav =================== */
.nav{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  background:transparent;
}
.nav.is-scrolled{
  background:rgba(10,32,24,0.92);
  backdrop-filter:blur(10px);
  padding-block:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  border-bottom:1px solid var(--forest-line);
}
.nav__mark{
  font-family:var(--f-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:0.06em;
  color:var(--cream);
  display:flex;
  align-items:center;
  gap:8px;
  direction:ltr;
  unicode-bidi:isolate;
}
.nav__mark span.dot{ color:var(--gold); }
.nav__logo{
  height:32px;
  width:auto;
  display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));
  transition:height .4s ease;
}
.nav.is-scrolled .nav__logo{ height:26px; }
.footer__brand .nav__logo{ height:42px; margin-bottom:14px; }
.nav__links{
  display:flex;
  gap:clamp(14px,2vw,34px);
  list-style:none;
  margin:0; padding:0;
  font-family:var(--f-label);
  font-size:13px;
  letter-spacing:0.06em;
}
.nav__links a{
  position:relative;
  padding-bottom:4px;
  color:var(--cream-dim);
  transition:color .25s ease;
}
.nav__links a::after{
  content:'';
  position:absolute; right:0; left:auto; bottom:0;
  width:0; height:1px; background:var(--gold);
  transition:width .3s ease;
}
body.lang-en .nav__links a::after{ right:auto; left:0; }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  border:1px solid var(--forest-line);
  color:var(--cream-dim);
  background:transparent;
  font-family:var(--f-label);
  font-size:12px;
  letter-spacing:.08em;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:.25s ease;
}
.lang-toggle:hover{ border-color:var(--gold); color:var(--gold-soft); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-label);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 26px;
  border-radius:2px;
  cursor:pointer;
  border:1px solid var(--gold);
  transition:all .3s ease;
}
.btn--gold{ background:var(--gold); color:var(--forest-deepest); }
.btn--gold:hover{ background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--forest-line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-soft); }

.nav .btn{ padding:10px 20px; font-size:12px; }
.burger{
  display:none;
  width:38px; height:38px;
  border:1px solid var(--forest-line);
  border-radius:2px;
  background:transparent;
  color:var(--cream);
  cursor:pointer;
  align-items:center; justify-content:center;
}

/* =================== hero =================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#081a13;
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media video, .hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  animation:kenburns 26s ease-in-out infinite alternate;
}
.hero__media video{ animation:none; }
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1.5%, -1%); }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,20,15,.55) 0%, rgba(8,20,15,.35) 35%, rgba(8,20,15,.75) 78%, rgba(8,20,15,.96) 100%),
    linear-gradient(90deg, rgba(8,20,15,.55), rgba(8,20,15,.15) 40%, rgba(8,20,15,.15) 60%, rgba(8,20,15,.55));
  z-index:1;
}
.hero__grain{
  position:absolute; inset:0; z-index:2; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content{
  position:relative; z-index:3;
  text-align:center;
  padding:120px 20px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero__eyebrow{
  font-family:var(--f-label);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
}
.hero__eyebrow::before, .hero__eyebrow::after{
  content:''; width:34px; height:1px; background:var(--gold-dim);
}
.hero__wordmark{
  font-family:var(--f-display);
  font-weight:900;
  line-height:0.82;
  color:var(--cream);
  text-transform:uppercase;
  font-size:clamp(64px, 15vw, 190px);
  letter-spacing:0.01em;
  text-shadow:0 30px 60px rgba(0,0,0,.45);
  direction:ltr;
  unicode-bidi:isolate;
}
.hero__wordmark small{
  display:block;
  font-family:var(--f-script);
  font-style:italic;
  font-weight:500;
  text-transform:none;
  font-size:clamp(20px, 3vw, 34px);
  color:var(--gold-soft);
  letter-spacing:0.02em;
  margin-bottom:6px;
}
.hero__tagline{
  margin-top:26px;
  font-family:var(--f-arabic);
  font-size:clamp(16px, 2vw, 20px);
  color:var(--cream-dim);
  max-width:620px;
}
.hero__tagline .en-quote{
  display:block;
  font-family:var(--f-display);
  font-style:italic;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--gold-dim);
  margin-top:10px;
  text-transform:uppercase;
}
.hero__cta{
  margin-top:40px;
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
.hero__features{
  margin-top:26px;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-label); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-dim);
}
.hero__features .dot-sep{ color:var(--gold-dim); }
.hero__rating{
  margin-top:18px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-label); font-size:12px; letter-spacing:.04em;
  color:var(--gold-soft);
  border:1px solid var(--gold-dim);
  padding:8px 16px;
  border-radius:999px;
  transition:.25s ease;
}
.hero__rating:hover{ border-color:var(--gold); background:rgba(201,162,76,.08); }
.hero__rating-stars{ color:var(--gold); font-weight:600; }
.hero__scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--cream-dim);
  font-family:var(--f-label);
  font-size:10px; letter-spacing:.25em; text-transform:uppercase;
}
.hero__scroll .line{
  width:1px; height:38px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* =================== reveal on scroll =================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }

/* =================== section heading (shared) =================== */
.section{ padding-block:clamp(70px, 10vw, 130px); position:relative; }
.section-head{ text-align:center; margin-bottom:clamp(40px,6vw,72px); }
.section-head .eyebrow{
  font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.section-head h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(30px, 5vw, 54px);
  color:var(--cream); margin:0 0 10px;
}
.section-head h2 em{
  font-style:italic; color:var(--gold-soft); font-family:var(--f-script); font-weight:500;
}
.section-head p{
  font-family:var(--f-arabic); color:var(--cream-dim); max-width:560px; margin:0 auto;
  font-size:clamp(14px,1.6vw,17px); line-height:1.9;
}

/* =================== about =================== */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.about__media{ position:relative; }
.about__frame{
  position:relative;
  border:1px solid var(--gold-dim);
  padding:16px;
  border-radius:2px;
}
.about__frame img{ border-radius:1px; width:100%; height:460px; object-fit:cover; }
.about__badge{
  position:absolute;
  bottom:-26px; inset-inline-start:-26px;
  background:var(--gold);
  color:var(--forest-deepest);
  width:112px; height:112px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-display);
  font-size:12px; font-weight:700; letter-spacing:.05em;
  line-height:1.35;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform:rotate(-8deg);
}
.about__text .eyebrow{
  font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;
}
.about__text h2{ font-family:var(--f-display); font-size:clamp(28px,4vw,46px); color:var(--cream); margin:0 0 22px; line-height:1.2; }
.about__text h2 em{ font-style:italic; color:var(--gold-soft); font-family:var(--f-script); font-weight:500; }
.about__text p{ font-family:var(--f-arabic); color:var(--cream-dim); line-height:2; margin-bottom:20px; font-size:15.5px; }
.about__stats{ display:flex; gap:clamp(20px,4vw,48px); margin-top:32px; flex-wrap:wrap; }
.about__stat b{ display:block; font-family:var(--f-display); font-size:clamp(26px,3vw,36px); color:var(--gold-soft); }
.about__stat span{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); }

/* =================== menu section =================== */
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:48px;
}
.menu-tab{
  font-family:var(--f-label);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--forest-line);
  background:transparent;
  color:var(--cream-dim);
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
  display:flex; align-items:center; gap:8px;
}
.menu-tab .ar{ font-family:var(--f-arabic); font-size:13px; }
.menu-tab:hover{ border-color:var(--gold-dim); color:var(--cream); }
.menu-tab.is-active{ background:var(--gold); border-color:var(--gold); color:var(--forest-deepest); font-weight:600; }

.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; animation:fadein .5s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.menu-panel__head{ text-align:center; margin-bottom:34px; }
.menu-panel__head .ar{ font-family:var(--f-arabic); font-size:clamp(22px,3vw,30px); color:var(--cream); font-weight:700; display:block; }
.menu-panel__head .en{ font-family:var(--f-display); letter-spacing:.3em; font-size:13px; color:var(--gold-soft); text-transform:uppercase; }

.menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 60px;
}
.menu-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--forest-line);
}
.menu-row__name{
  display:flex; flex-direction:column; gap:2px;
}
.menu-row__name .en{
  font-family:var(--f-label);
  font-size:14.5px;
  letter-spacing:.03em;
  color:var(--cream);
  font-weight:500;
}
.menu-row__name .ar{
  font-family:var(--f-arabic);
  font-size:14px;
  color:var(--cream-dim);
}
.menu-row__price{
  font-family:var(--f-display);
  font-size:17px;
  color:var(--gold-soft);
  white-space:nowrap;
}
.menu-note{
  text-align:center; margin-top:36px;
  font-family:var(--f-label); font-size:11.5px; letter-spacing:.05em; color:var(--cream-dim); opacity:.8;
}

/* =================== gallery =================== */
.gallery{
  columns:4 220px;
  column-gap:16px;
}
.gallery figure{
  margin:0 0 16px; break-inside:avoid;
  position:relative;
  overflow:hidden;
  border-radius:2px;
  border:1px solid var(--forest-line);
}
.gallery img{
  width:100%; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(0.94);
}
.gallery figure:hover img{ transform:scale(1.07); filter:saturate(1.05); }
.gallery figcaption{
  position:absolute; inset-inline:0; bottom:0;
  padding:22px 16px 14px;
  background:linear-gradient(0deg, rgba(8,20,15,.92), transparent);
  transform:translateY(8px);
  opacity:0; transition:opacity .35s ease, transform .35s ease;
}
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0); }
.gallery figcaption .ar{ font-family:var(--f-arabic); font-weight:600; color:var(--cream); font-size:14.5px; display:block; }
.gallery figcaption .en{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }

/* =================== venue / ambiance =================== */
.venue-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:220px;
  gap:16px;
}
.venue-tile{
  position:relative;
  margin:0;
  border:1px solid var(--forest-line);
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 25% 15%, rgba(255,255,255,.05), transparent 60%),
    var(--forest-mid);
}
.venue-tile--wide{ grid-column:span 2; }
.venue-tile img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.venue-tile:hover img{ transform:scale(1.06); }
.venue-tile__placeholder{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  font-family:var(--f-label); font-size:12px; letter-spacing:.04em; color:var(--cream-dim);
  padding:20px;
}
.venue-tile__placeholder svg{ width:26px; height:26px; color:var(--gold-dim); }
.venue-tile__placeholder small{ font-family:monospace; direction:ltr; unicode-bidi:isolate; color:var(--gold-dim); font-size:10.5px; }
.venue-note{
  text-align:center; margin-top:26px;
  font-family:var(--f-arabic); font-size:13px; color:var(--cream-dim); opacity:.85;
}

/* =================== quote / signature banner =================== */
.signature{
  position:relative;
  padding-block:clamp(70px,10vw,120px);
  text-align:center;
  overflow:hidden;
}
.signature__word{
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px var(--gold-dim);
  font-size:clamp(70px,14vw,200px);
  line-height:.85;
  white-space:nowrap;
  opacity:.5;
}
.signature blockquote{
  position:relative; z-index:2;
  font-family:var(--f-script);
  font-style:italic;
  font-size:clamp(22px,3.4vw,38px);
  color:var(--cream);
  max-width:780px;
  margin:-3.4em auto 0;
  line-height:1.5;
}
.signature cite{
  display:block; margin-top:18px;
  font-style:normal;
  font-family:var(--f-label);
  font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
  direction:ltr;
  unicode-bidi:isolate;
}

/* =================== reservation =================== */
.reserve{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--forest-line);
  border-radius:4px;
  overflow:hidden;
}
.reserve__info{
  padding:clamp(30px,4vw,56px);
  background:var(--forest-mid);
  display:flex; flex-direction:column; justify-content:center;
}
.reserve__info .eyebrow{ font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.reserve__info h2{ font-family:var(--f-display); font-size:clamp(26px,3.4vw,38px); color:var(--cream); margin:0 0 18px; }
.reserve__info h2 em{ font-style:italic; color:var(--gold-soft); font-family:var(--f-script); font-weight:500; }
.reserve__info p{ font-family:var(--f-arabic); color:var(--cream-dim); line-height:1.9; margin-bottom:26px; }
.reserve__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.reserve__list li{ display:flex; gap:14px; align-items:flex-start; font-family:var(--f-arabic); color:var(--cream); font-size:14.5px; }
.reserve__list b{ display:block; font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:2px; }
.reserve__icon{ width:20px; height:20px; flex:none; color:var(--gold); margin-top:2px; }

.reserve__form{ padding:clamp(30px,4vw,56px); background:var(--forest); }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--forest-deep);
  border:1px solid var(--forest-line);
  color:var(--cream);
  padding:12px 14px;
  border-radius:2px;
  font-family:var(--f-arabic);
  font-size:14px;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(239,233,216,.35); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ margin-top:14px; font-size:12px; color:var(--cream-dim); font-family:var(--f-arabic); }
.form-success{
  display:none; align-items:center; gap:10px;
  margin-top:16px; padding:12px 14px; border:1px solid var(--gold-dim); border-radius:2px;
  font-family:var(--f-arabic); font-size:13.5px; color:var(--gold-soft);
}
.form-success.is-visible{ display:flex; }
.form-error{
  display:none; align-items:center; gap:10px;
  margin-top:16px; padding:12px 14px; border:1px solid rgba(200,90,90,.5); border-radius:2px;
  font-family:var(--f-arabic); font-size:13.5px; color:#e3a7a7; background:rgba(140,40,40,.12);
}
.form-error.is-visible{ display:flex; }

/* =================== footer =================== */
.footer{ padding-block:60px 30px; border-top:1px solid var(--forest-line); }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px;
}
.footer__brand .nav__mark{ margin-bottom:14px; }
.footer__brand p{ font-family:var(--f-arabic); color:var(--cream-dim); font-size:14px; line-height:1.9; max-width:280px; }
.footer h4{ font-family:var(--f-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ font-family:var(--f-arabic); font-size:14px; color:var(--cream-dim); transition:color .2s; }
.footer ul a:hover{ color:var(--gold-soft); }
.footer__social{ display:flex; gap:12px; margin-top:6px; }
.footer__social a{
  width:36px; height:36px; border:1px solid var(--forest-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--cream-dim);
  transition:all .25s ease;
}
.footer__social a:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--f-label); font-size:11.5px; letter-spacing:.04em; color:var(--cream-dim); opacity:.75;
}

/* =================== back to top =================== */
.to-top{
  position:fixed; bottom:26px; inset-inline-end:26px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background:var(--gold); color:var(--forest-deepest);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .3s ease;
  border:none; cursor:pointer;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* =================== mobile menu =================== */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--forest-deepest);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .45s ease;
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--f-display); font-size:26px; color:var(--cream); }
.mobile-menu .btn{ margin-top:10px; }
.mobile-close{
  position:absolute; top:20px; inset-inline-end:20px;
  width:40px; height:40px; border:1px solid var(--forest-line); border-radius:2px;
  background:transparent; color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* =================== responsive =================== */
@media (max-width: 980px){
  .nav__links, .nav__actions .btn{ display:none; }
  .burger{ display:flex; }
  .about, .reserve{ grid-template-columns:1fr; }
  .about__media{ order:2; }
  .about__frame img{ height:340px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .gallery{ columns:2 160px; }
  .venue-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns:1fr; }
  .page-band{ flex-direction:column; align-items:center; text-align:center; gap:6px; }
  .about__badge{ width:88px; height:88px; font-size:10.5px; }
  .venue-grid{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .venue-tile--wide{ grid-column:span 1; }
}

/* =========================================================
   RESERVE PAGE (reserve.html) — hero banner
   ========================================================= */
.page-hero{
  position:relative;
  padding:150px 20px 70px;
  text-align:center;
  background:var(--forest-deepest);
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(201,162,76,0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(255,255,255,0.04), transparent 60%);
}
.page-hero__content{ position:relative; z-index:1; }
.page-hero .eyebrow{
  font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.page-hero h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px, 5vw, 56px);
  color:var(--cream); margin:0 0 14px;
}
.page-hero h1 em{ font-style:italic; color:var(--gold-soft); font-family:var(--f-script); font-weight:500; }
.page-hero p{
  font-family:var(--f-arabic); color:var(--cream-dim); max-width:560px; margin:0 auto;
  font-size:15px; line-height:1.9;
}
.page-hero__crumb{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-label); font-size:11.5px; letter-spacing:.08em; color:var(--cream-dim);
}
.page-hero__crumb a{ color:var(--gold-soft); }
.page-hero__crumb a:hover{ text-decoration:underline; }

/* =========================================================
   ADMIN PAGE (admin.html)
   ========================================================= */
.admin-shell{ min-height:100svh; padding:120px 20px 80px; }
.admin-header{
  max-width:1100px; margin:0 auto 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.admin-header h1{ font-family:var(--f-display); font-size:clamp(24px,3vw,34px); color:var(--cream); margin:0; }
.admin-header h1 em{ font-style:italic; color:var(--gold-soft); font-family:var(--f-script); font-weight:500; }
.admin-header a{
  font-family:var(--f-label); font-size:12px; letter-spacing:.06em; color:var(--cream-dim);
  border:1px solid var(--forest-line); padding:9px 16px; border-radius:999px; transition:.25s ease;
}
.admin-header a:hover{ border-color:var(--gold); color:var(--gold-soft); }

.admin-gate{
  max-width:420px; margin:60px auto; padding:40px clamp(24px,4vw,44px);
  background:var(--forest-mid); border:1px solid var(--forest-line); border-radius:4px; text-align:center;
}
.admin-gate p{ font-family:var(--f-arabic); color:var(--cream-dim); font-size:14px; margin-bottom:22px; line-height:1.8; }
.admin-gate input{
  width:100%; background:var(--forest-deep); border:1px solid var(--forest-line); color:var(--cream);
  padding:13px 14px; border-radius:2px; font-family:var(--f-arabic); font-size:14px; margin-bottom:14px; text-align:center;
  letter-spacing:.1em;
}
.admin-gate .btn{ width:100%; justify-content:center; }
.admin-gate.is-hidden{ display:none; }

.admin-panel{ max-width:1100px; margin:0 auto; display:none; }
.admin-panel.is-open{ display:block; }
.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.admin-toolbar__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.admin-count{ font-family:var(--f-label); font-size:12px; letter-spacing:.06em; color:var(--gold-soft); }
.admin-status{ font-family:var(--f-label); font-size:11px; letter-spacing:.04em; color:var(--cream-dim); opacity:.75; }
.admin-btn{
  font-family:var(--f-label); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 18px; border-radius:2px; border:1px solid var(--gold-dim); background:transparent; color:var(--gold-soft);
  cursor:pointer; transition:.25s ease;
}
.admin-btn:hover{ background:var(--gold); color:var(--forest-deepest); border-color:var(--gold); }

.admin-table-wrap{
  border:1px solid var(--forest-line); border-radius:4px; overflow:auto; background:var(--forest);
}
.admin-table{ width:100%; border-collapse:collapse; min-width:760px; }
.admin-table th{
  font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-soft); text-align:right; padding:14px 16px; border-bottom:1px solid var(--forest-line);
  background:var(--forest-deep); position:sticky; top:0;
}
.admin-table td{
  font-family:var(--f-arabic); font-size:13.5px; color:var(--cream); padding:13px 16px;
  border-bottom:1px solid var(--forest-line); white-space:nowrap;
}
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:rgba(255,255,255,0.02); }
.admin-empty{ text-align:center !important; color:var(--cream-dim) !important; padding:40px !important; }

@media (max-width: 600px){
  .admin-shell{ padding:110px 14px 60px; }
}