/* Manava Café :: paper base, terra-cotta accent, Cormorant + Jakarta */

:root{
  --ink:#1a1612;
  --ink-2:#4a3f33;
  --bg:#f5ede0;
  --bg-alt:#ebdfca;
  --accent:#b85c3a;
  --accent-deep:#8a3a20;
  --gold:#c89a48;
  --line:rgba(26,22,18,.14);

  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --motion-fast:150ms;
  --motion-base:280ms;
  --motion-slow:520ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* paper grain overlay (subtle) */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.45'/></svg>");
  opacity:.07;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:1;
}

.skip{ position:absolute; left:-9999px; top:auto; }
.skip:focus{ left:1rem; top:1rem; background:var(--ink); color:var(--bg); padding:.5rem 1rem; z-index:9999; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:.75rem;
  padding:.85rem 1.15rem;
  background:rgba(245,237,224,.92);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  border-bottom:1px solid var(--line);
}
.nav__mark{ text-decoration:none; color:var(--ink); }
.nav__mark-text{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.005em;
}
.nav__mark-text em{ font-style:italic; color:var(--accent); font-weight:600; }
.nav__links{ display:none; }
.nav__phone{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .95rem;
  background:var(--ink);
  color:var(--bg);
  text-decoration:none;
  border-radius:999px;
  font-size:.82rem; font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  justify-self:end;
  transition:background var(--motion-base) var(--ease-out);
}
.nav__phone:hover{ background:var(--accent-deep); }

@media (min-width:820px){
  .nav{ grid-template-columns:auto 1fr auto; padding:1.05rem 2.5rem; }
  .nav__mark-text{ font-size:1.6rem; }
  .nav__links{ display:flex; gap:1.8rem; justify-content:center; }
  .nav__links a{
    text-decoration:none; color:var(--ink);
    font-size:.86rem; font-weight:500;
    letter-spacing:.04em; text-transform:uppercase;
    transition:color var(--motion-base);
  }
  .nav__links a:hover{ color:var(--accent); }
}

/* HERO :: full-bleed storefront */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:5rem 1.25rem 3rem;
  z-index:2;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  z-index:-2;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.74) saturate(1.05);
}
.hero__scrim{
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(26,22,18,0) 0%, rgba(26,22,18,.25) 55%, rgba(26,22,18,.7) 100%),
    linear-gradient(180deg, rgba(26,22,18,.35) 0%, rgba(26,22,18,.15) 30%, rgba(26,22,18,.55) 100%);
}
.hero__inner{
  width:100%;
  max-width:46rem;
  display:flex; flex-direction:column;
  gap:1rem;
  align-items:center;
  text-align:center;
  color:var(--bg);
}
.hero__kicker{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(245,237,224,.85);
  margin:0;
}
.hero__est{
  display:flex; align-items:center; justify-content:center;
  gap:.7rem;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  margin:0;
  font-weight:600;
}
.hero__est-rule{ display:inline-block; width:30px; height:1px; background:var(--gold); opacity:.7; }
.hero__title{
  font-family:var(--display);
  font-size:clamp(3.5rem, 13vw, 7.5rem);
  line-height:.95;
  font-weight:600;
  margin:.2rem 0;
  letter-spacing:-.005em;
  color:var(--bg);
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title em{
  font-style:italic;
  color:var(--gold);
  font-weight:600;
}
.hero__tagline{
  font-size:clamp(.92rem, 3.2vw, 1.08rem);
  color:rgba(245,237,224,.92);
  margin:0;
  max-width:38rem;
}
.hero__cta{
  display:flex; flex-direction:column; justify-content:center;
  gap:.55rem;
  margin-top:1rem;
  max-width:22rem;
  width:100%;
}

@media (min-width:820px){
  .hero{ padding:6rem 2.5rem 5rem; }
  .hero__inner{ gap:1.25rem; }
  .hero__cta{ flex-direction:row; flex-wrap:wrap; max-width:none; width:auto; gap:.7rem; }
  .hero__cta .btn{ width:auto; }
  .hero__title{ font-size:clamp(4.5rem, 9vw, 9rem); }
}

/* BUTTONS :: BNT pill pattern */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.3rem;
  border-radius:999px;
  font-family:var(--body);
  font-size:.83rem; font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:1.5px solid transparent;
  min-height:44px;
  cursor:pointer;
  width:100%;
  transition:transform var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out), border-color var(--motion-base);
}
.btn--primary{
  background:var(--ink); color:var(--bg);
  box-shadow:0 10px 24px -10px rgba(26,22,18,.55);
}
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--accent{
  background:var(--accent); color:var(--bg);
  box-shadow:0 10px 24px -10px rgba(184,92,58,.65);
}
.btn--accent:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(184,92,58,.6);
}
.btn--ghost:hover{ border-color:var(--accent); background:rgba(184,92,58,.08); }
.btn--full{ width:100%; }

@media (min-width:820px){
  .btn{ width:auto; padding:.9rem 1.5rem; font-size:.85rem; }
  .btn--full{ width:100%; }
}

/* MARQUEE */
.strip{
  position:relative;
  background:var(--ink);
  color:var(--bg);
  overflow:hidden;
  padding:1.1rem 0;
  z-index:2;
  border-top:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
}
.strip__track{
  display:flex;
  width:max-content;
  gap:1.8rem;
  white-space:nowrap;
  animation:marquee 42s linear infinite;
  will-change:transform;
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.strip__track .sep{ color:var(--accent); }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .strip__track{ animation:none; } }

/* SECTION HEADS */
.section__head{
  max-width:780px;
  margin:0 auto 2.5rem;
  text-align:center;
  padding:0 1.25rem;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.section__head.is-in{ opacity:1; transform:none; }
.section__kicker{
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin:0 0 .75rem;
}
.section__title{
  font-family:var(--display);
  font-size:clamp(2rem, 6vw, 3.4rem);
  line-height:1.05;
  font-weight:600;
  margin:0;
  letter-spacing:-.005em;
}
.section__title em{ font-style:italic; color:var(--accent); }
.section__lede{
  margin-top:1rem;
  font-size:1rem;
  color:var(--ink-2);
  line-height:1.6;
}

/* SPECIALITES (meals grid) */
.specials{ padding:4rem 1.25rem 5rem; position:relative; z-index:2; }
.menu__grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.menu__grid.is-in{ opacity:1; transform:none; }

.card{
  font:inherit; color:inherit; text-align:left;
  padding:0; margin:0;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  cursor:zoom-in;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform var(--motion-base) var(--ease-out), border-color var(--motion-base), box-shadow var(--motion-base);
}
.card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 40px -22px rgba(26,22,18,.4); }
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.card--featured{ grid-column:1/-1; }
@media (min-width:760px){
  .menu__grid{ grid-template-columns:repeat(3, 1fr); }
  .card--featured{ grid-column:span 2; grid-row:span 1; }
  .card--featured .card__media{ aspect-ratio:16/10; }
}
.card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-alt);
}
.card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--motion-slow) var(--ease-out);
}
.card:hover .card__media img{ transform:scale(1.04); }
.card__num{
  position:absolute; top:.7rem; right:.9rem;
  font-family:var(--display);
  font-size:1.6rem; font-weight:700;
  color:var(--bg);
  text-shadow:0 2px 8px rgba(26,22,18,.5);
  letter-spacing:.02em;
  z-index:2;
}
.card__tag{
  position:absolute; top:.85rem; left:.85rem;
  padding:.32rem .65rem;
  background:var(--bg);
  color:var(--ink);
  font-size:.65rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  z-index:2;
}
.card__body{ padding:1.1rem 1.15rem 1.3rem; display:block; }
.card__name{
  font-family:var(--display);
  font-size:1.55rem; font-weight:600;
  margin:0 0 .35rem;
  line-height:1.1;
  letter-spacing:-.005em;
}
.card__name em{ font-style:italic; color:var(--accent); }
.card__day{
  font-size:.78rem;
  font-style:italic;
  color:var(--accent);
  margin:0 0 .5rem;
  letter-spacing:.02em;
}
.card__desc{
  margin:0;
  color:var(--ink-2);
  font-size:.9rem;
  line-height:1.55;
}

/* MENU PHOTO (M4 vitrine-photo fallback) */
.menu-photo{
  background:var(--ink);
  color:var(--bg);
  padding:4.5rem 1.25rem 5rem;
  position:relative;
  z-index:2;
}
.menu-photo .section__title{ color:var(--bg); }
.menu-photo .section__kicker{ color:var(--gold); }
.menu-photo .section__lede{ color:rgba(245,237,224,.75); }
.menu-photo .section__title em{ color:var(--gold); }

.menu-photo__wrap{
  max-width:920px; margin:0 auto;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.menu-photo__wrap.is-in{ opacity:1; transform:none; }

.menu-photo__card{
  font:inherit; color:inherit; text-align:left;
  padding:0; margin:0;
  background:transparent;
  border:1px solid rgba(245,237,224,.18);
  border-radius:6px;
  overflow:hidden;
  cursor:zoom-in;
  display:block;
  position:relative;
  width:100%;
  transition:transform var(--motion-base) var(--ease-out), border-color var(--motion-base), box-shadow var(--motion-base);
}
.menu-photo__card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 24px 60px -28px rgba(0,0,0,.7); }
.menu-photo__card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.menu-photo__card img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
  transition:transform var(--motion-slow) var(--ease-out);
}
.menu-photo__card:hover img{ transform:scale(1.03); }
.menu-photo__caption{
  position:absolute;
  bottom:1.25rem; left:1.25rem;
  padding:.6rem 1.1rem;
  background:var(--bg);
  color:var(--ink);
  font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.menu__note{
  max-width:920px; margin:2rem auto 0;
  text-align:center;
  font-size:.82rem; opacity:.55; font-style:italic;
  color:var(--bg);
}

/* HORAIRES :: L4 two-column dashed list */
.hours{ padding:4.5rem 1.25rem 5rem; position:relative; z-index:2; background:var(--bg-alt); }
.hours__inner{
  max-width:920px; margin:0 auto;
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hours__inner.is-in{ opacity:1; transform:none; }

.hours__list{
  display:grid; gap:0;
  margin:0;
}
.hours__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px dashed var(--line);
  gap:1rem;
}
.hours__row dt{
  font-family:var(--display);
  font-size:1.25rem; font-weight:600;
  letter-spacing:.005em;
  margin:0;
}
.hours__row dd{
  margin:0;
  font-size:.92rem;
  color:var(--ink-2);
  font-feature-settings:'tnum' 1;
  letter-spacing:.01em;
}
.hours__row--closed dt, .hours__row--closed dd{ opacity:.45; }
.hours__row--closed dd{ font-style:italic; }

.hours__side{ display:flex; flex-direction:column; gap:1.1rem; justify-content:center; }
.hours__note{ margin:0; color:var(--ink-2); font-style:italic; font-size:.92rem; line-height:1.55; }

@media (min-width:760px){
  .hours__inner{ grid-template-columns:1.4fr 1fr; }
}

/* FIND */
.find{ padding:4.5rem 1.25rem 5rem; position:relative; z-index:2; }
.find__inner{
  max-width:1100px; margin:0 auto;
  display:grid; gap:2rem;
  grid-template-columns:1fr;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.find__inner.is-in{ opacity:1; transform:none; }
.find__map{
  border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/3;
  background:var(--bg-alt);
}
.find__map iframe{ width:100%; height:100%; display:block; border:0; }
.find__addr{ font-style:normal; display:flex; flex-direction:column; gap:1.2rem; }
.find__line{ margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.6; }
.find__line strong{ display:block; font-family:var(--display); font-style:italic; font-size:1rem; color:var(--accent); font-weight:600; letter-spacing:.04em; margin-bottom:.2rem; text-transform:lowercase; }
.find__line a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color var(--motion-base); }
.find__line a:hover{ border-color:var(--accent); }
.find__social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--ink);
  transition:background var(--motion-base), color var(--motion-base), border-color var(--motion-base);
}
.find__social:hover{ background:var(--accent); color:var(--bg); border-color:var(--accent); }

@media (min-width:760px){
  .find__inner{ grid-template-columns:1.2fr 1fr; align-items:start; }
}

/* FOOTER */
.foot{
  background:var(--ink); color:var(--bg);
  padding:3rem 1.5rem;
  position:relative; z-index:2;
}
.foot__inner{ max-width:1100px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:.6rem; }
.foot__mark{
  font-family:var(--display);
  font-size:2rem; font-weight:600;
  margin:0; letter-spacing:.005em;
}
.foot__mark em{ font-style:italic; color:var(--accent); }
.foot__copy{ margin:0; font-size:.86rem; opacity:.7; letter-spacing:.04em; }
.foot__credit{ margin:1rem 0 0; font-size:.75rem; opacity:.5; }
.foot__credit a{ color:var(--bg); text-decoration:underline; text-underline-offset:3px; }

/* LIGHTBOX */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,12,10,.94);
  display:none;
  align-items:center; justify-content:center;
  padding:1rem;
}
.lightbox.is-open{ display:flex; }
.lightbox__stage{ max-width:1100px; max-height:85vh; display:flex; align-items:center; justify-content:center; }
.lightbox__stage img{ max-width:100%; max-height:85vh; display:block; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox__close, .lightbox__prev, .lightbox__next{
  position:absolute;
  background:transparent;
  color:var(--bg);
  border:1px solid rgba(245,237,224,.3);
  border-radius:999px;
  width:48px; height:48px;
  font-size:1.6rem; line-height:1; font-family:var(--body);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--motion-base), color var(--motion-base), border-color var(--motion-base);
}
.lightbox__close{ top:1.25rem; right:1.25rem; }
.lightbox__prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:1.25rem; top:50%; transform:translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover{
  background:var(--accent); color:var(--bg); border-color:var(--accent);
}
.lightbox__info{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  display:flex; gap:1rem; align-items:center;
  color:var(--bg); font-size:.85rem; letter-spacing:.1em;
}
.lightbox__counter{ opacity:.65; }
body.lightbox-open{ overflow:hidden; }

@media (max-width:600px){
  .lightbox__close, .lightbox__prev, .lightbox__next{ width:40px; height:40px; font-size:1.3rem; }
  .lightbox__close{ top:.8rem; right:.8rem; }
  .lightbox__prev{ left:.6rem; }
  .lightbox__next{ right:.6rem; }
}

/* Reveal */
[data-reveal]{ /* base state set per element */ }