/* ==========================================================================
   Poppadum — Brand System (Punch / Dark Punch / Citrus Gold / Cream)
   Typography: Poppins (UI + body), Cormorant Garamond Italic (accent serif —
   stand-in for the brand book's "Minion Variable Concept Italic", which is a
   licensed Adobe font not available for web embedding)
   ========================================================================== */

:root{
  --punch:#cd483b;
  --dark-punch:#a3140e;
  --citrus:#f4c678;
  --cream:#efe8d8;
  --cream-2:#f8f4ea;
  --ink:#241a17;

  --font-ui: 'Poppins', sans-serif;
  --font-accent: 'Cormorant Garamond', serif;

  --container: 1240px;
  --pad: 6vw;

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

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--font-ui);font-weight:500;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad);}
.italic-accent{font-family:var(--font-accent);font-style:italic;font-weight:600;}

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

/* Skip link for a11y */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:10px;top:10px;}

@keyframes spin{ to{transform:rotate(360deg);} }

/* ---- Marquee ---- */
.marquee-bar{
  background:var(--ink); overflow:hidden; padding:14px 0;
  border-bottom:3px solid var(--punch);
}
.marquee-track{display:flex; width:max-content; animation:marquee 32s linear infinite;}
.marquee-track span{
  display:inline-flex; align-items:center; gap:14px;
  font-size:15px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--cream); padding:0 28px; white-space:nowrap;
}
.marquee-track img{width:18px;height:18px;opacity:.85;}
.marquee-track .dot{
  width:5px !important; height:5px !important; min-width:5px;
  padding:0 !important; margin:0 8px; border-radius:50%; background:var(--citrus);
  display:inline-block; flex:none;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---- Header ---- */
header{
  position:sticky; top:0; z-index:200;
  background:rgba(239,232,216,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(36,26,23,.08);
  transition:padding .35s var(--ease), box-shadow .35s ease;
  padding:18px 0;
}
header.scrolled{padding:10px 0; box-shadow:0 8px 24px rgba(36,26,23,.08);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand-lockup{display:flex; align-items:center; gap:12px;}
.brand-lockup img{height:92px; width:auto; transition:height .35s var(--ease);}
header.scrolled .brand-lockup img{height:64px;}
nav.primary-nav{display:flex; gap:34px;}
nav.primary-nav a{
  position:relative; font-size:14px; font-weight:500; letter-spacing:.03em;
  padding:6px 0; color:var(--ink);
}
nav.primary-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--punch);
  transition:width .35s var(--ease);
}
nav.primary-nav a:hover::after, nav.primary-nav a.active::after{width:100%;}

/* Button system — deliberately just two variants (primary/secondary) so the
   page never has more than one color of button competing for attention in
   the same view. Punch red = the one action we want taken (reserve). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:500; font-size:14px; letter-spacing:.04em;
  padding:13px 26px; border-radius:999px; border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  will-change:transform;
}
.btn-solid{background:var(--punch); color:var(--cream-2);}
.btn-solid:hover{background:var(--dark-punch);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-outline.on-dark{border-color:rgba(239,232,216,.6); color:var(--cream-2);}
.btn-outline.on-dark:hover{background:var(--cream-2); color:var(--ink); border-color:var(--cream-2);}
.magnetic{position:relative;}

/* Quiet text link — for secondary actions that don't deserve a full button
   (menu PDF download, etc.) so the button hierarchy stays uncluttered. */
.text-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px;
  color:var(--dark-punch); border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:gap .3s var(--ease), color .3s ease;
}
.text-link:hover{gap:13px; color:var(--punch);}
.text-link svg{width:15px; height:15px;}
.text-link.on-dark{color:var(--citrus);}
.text-link.on-dark:hover{color:var(--cream-2);}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; z-index:210;}
.nav-toggle span{width:26px; height:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease;}
.mobile-nav{
  position:fixed; inset:0; background:var(--cream); z-index:205;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transform:translateY(-100%); transition:transform .5s var(--ease); visibility:hidden;
}
.mobile-nav.open{transform:translateY(0); visibility:visible;}
.mobile-nav a{font-size:32px; font-weight:500;}

@media (max-width:920px){
  nav.primary-nav, header .btn-solid{display:none;}
  .nav-toggle{display:flex; padding:10px;}
}
@media (max-width:480px){
  .brand-lockup img{height:56px;}
  header.scrolled .brand-lockup img{height:46px;}
  header{padding:14px 0;}
}

/* ---- Hero (back to the centered v1 layout — text only, no squeezed
   side image; the food visual now lives in its own section right after
   the scroll, see .showcase below) ---- */
.hero{
  position:relative; padding:min(14vh,140px) var(--pad) 90px; overflow:hidden;
  display:grid; place-items:center; text-align:center; min-height:86vh;
}
.hero-motif-field{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.hero-motif-field img{position:absolute; opacity:.4; mix-blend-mode:multiply;}
/* The larger motifs sit pinned tight to the true corners (within the
   section's own side padding), clear of the centered text column, so they
   stay visible on anything wider than a phone rather than being hidden
   behind a high min-width gate. */
.hero-motif-field img.wide-only{display:none;}
@media(min-width:640px){ .hero-motif-field img.wide-only{display:block;} }
.hero-inner{position:relative; z-index:2; max-width:900px;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--dark-punch); margin-bottom:22px;
}
.hero-eyebrow img{width:18px;height:18px;}
.hero h1{
  font-size:clamp(40px, 7vw, 88px); line-height:1.03; letter-spacing:-.01em;
  color:var(--ink);
}
.hero h1 .accent{
  font-family:var(--font-accent); font-style:italic; font-weight:600; color:var(--punch);
  display:block;
}
.hero-sub{
  margin:26px auto 0; max-width:560px; font-size:18px; line-height:1.7; color:#4a3934;
}
.hero-cta{display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap;}

/* ---- Food showcase (single wide hero image, given room to breathe after
   a scroll) ---- */
.showcase{background:var(--cream-2); padding-top:90px;}
.showcase-motifs{max-width:1000px; margin:0 auto; position:relative; height:0;}
.showcase-motifs img{position:absolute; opacity:.9;}

/* Single wide banner image — "slightly wider" than a standard 16:9 for a
   more panoramic feel. */
.showcase-frame{
  position:relative; max-width:1080px; margin:0 auto; border-radius:28px; overflow:hidden;
  aspect-ratio:2/1; box-shadow:0 40px 70px -30px rgba(36,26,23,.35);
}
.showcase-frame img{width:100%; height:100%; object-fit:cover; display:block;}
@media(max-width:700px){ .showcase-frame{aspect-ratio:4/3; border-radius:20px;} }

.split-text span{display:inline-block; opacity:0; transform:translateY(110%) rotate(2deg); }
.split-text.in span{
  animation:riseIn .8s var(--ease) forwards;
}

@keyframes riseIn{
  to{opacity:1; transform:translateY(0) rotate(0);}
}

.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); opacity:.55;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll .line{width:1px;height:34px;background:var(--ink); position:relative; overflow:hidden;}
.hero-scroll .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--punch);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ 50%{top:100%;} 100%{top:100%;} }

/* ---- Scalloped section divider (motif-based, organic, not a straight cut) ---- */
.scallop{
  height:34px; width:100%;
  background-image:url('../motifs/motif-04.png');
  background-repeat:repeat-x; background-size:34px 34px; background-position:center;
  opacity:.9;
}
.scallop.flip{transform:scaleY(-1);}

/* ---- Reveal ---- */
.reveal{opacity:0; transform:translateY(46px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:transform;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.88); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---- Section shell ---- */
section{padding:120px var(--pad);}
@media(max-width:700px){ section{padding:72px var(--pad);} }
.section-flag{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dark-punch); margin-bottom:16px;
}
.section-flag img{width:18px;height:18px;}
.section-title{font-size:clamp(32px,5vw,58px); line-height:1.05; max-width:760px;}
.section-head{margin-bottom:60px;}

/* ---- Story ---- */
.story{background:var(--ink); color:var(--cream); position:relative; overflow:hidden;}
.story .section-flag{color:var(--citrus);}
.story-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; position:relative; z-index:2;}
.story-quote{font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:clamp(24px,3vw,34px); line-height:1.5; color:var(--cream-2);}
.story-copy{margin-top:26px; font-size:17px; line-height:1.8; color:#d9cfc2; max-width:520px;}
.values-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.value-chip{
  border:1px solid rgba(239,232,216,.3); border-radius:999px; padding:9px 18px;
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background .3s ease, border-color .3s ease;
}
.value-chip:hover{background:var(--punch); border-color:var(--punch);}
/* One clean centered motif, one small one offset to a corner — deliberately
   NOT concentric-stacked (that read as a messy blob at smaller sizes). */
.story-motif-orbit{position:relative; height:380px; display:flex; align-items:center; justify-content:center;}
.orbit-a{width:230px; animation:spin 30s linear infinite;}
.orbit-c{position:absolute; width:64px; top:12%; right:14%; animation:spin 16s linear infinite reverse;}
@media(max-width:900px){ .story-grid{grid-template-columns:1fr;} .story-motif-orbit{height:260px;} .orbit-a{width:170px;} }

/* ---- Menu ---- */
.menu-section{background:var(--cream-2); position:relative;}
.menu-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:50px;}
.menu-tab{
  position:relative; padding:12px 22px; border-radius:999px; border:1.5px solid var(--ink);
  background:transparent; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); transition:background .3s var(--ease), color .3s ease, transform .3s var(--ease);
  display:flex; align-items:center; gap:8px;
}
.menu-tab img{width:16px;height:16px; transition:transform .5s var(--ease);}
.menu-tab.active{background:var(--ink); color:var(--cream);}
.menu-tab.active img{transform:rotate(180deg);}
.menu-tab:hover{transform:translateY(-2px);}

.menu-panels{position:relative;}
.menu-grid{
  display:none; grid-template-columns:1fr 1fr; gap:0 56px;
}
.menu-grid.active{display:grid; animation:fadeUp .5s var(--ease);}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.menu-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:20px 0; border-bottom:1px dashed rgba(36,26,23,.2);
  transition:padding-left .3s var(--ease);
}
.menu-item:hover{padding-left:8px;}
.menu-item .name{font-size:18px; font-weight:500;}
.menu-item .tag{display:block; font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:14px; color:var(--dark-punch); margin-top:3px;}
.menu-item .price{font-weight:500; font-size:16px; color:var(--punch); white-space:nowrap;}
.menu-note{margin-top:36px; font-size:13px; color:#6b5a52;}
.menu-cta{margin-top:36px;}
@media(max-width:800px){ .menu-grid{grid-template-columns:1fr;} }

/* ---- Homepage menu preview (full menu now lives on its own /menu page —
   keeping the whole tabbed menu duplicated on both pages is bad for SEO,
   two pages competing for the same content) ---- */
.menu-preview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px;}
.menu-preview-item{
  background:var(--cream); border-radius:16px; padding:22px;
  border:1px solid rgba(36,26,23,.08); transition:transform .3s var(--ease);
}
.menu-preview-item:hover{transform:translateY(-4px);}
.menu-preview-item .name{display:block; font-weight:500; font-size:16px;}
.menu-preview-item .tag{display:block; font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:13px; color:var(--dark-punch); margin-top:4px;}
.menu-preview-item .price{display:block; margin-top:12px; font-weight:500; color:var(--punch);}
@media(max-width:800px){ .menu-preview-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .menu-preview-grid{grid-template-columns:1fr;} }

/* ---- Gallery ---- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-item{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/4; cursor:pointer;
}
.gallery-grid .gallery-item:first-child{grid-row:span 2; aspect-ratio:auto;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.gallery-item:hover img{transform:scale(1.1);}
.gallery-bloom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(163,20,14,.55); opacity:0; transition:opacity .4s ease;
}
.gallery-item:hover .gallery-bloom{opacity:1;}
.gallery-bloom img{
  width:70px; height:70px; object-fit:contain; transform:scale(0) rotate(-90deg);
  transition:transform .5s var(--ease); filter:brightness(0) invert(1);
}
.gallery-item:hover .gallery-bloom img{transform:scale(1) rotate(0);}
.gallery-cap{
  position:absolute; left:16px; bottom:14px; color:#fff; font-weight:500; font-size:14px;
  opacity:0; transform:translateY(10px); transition:all .4s ease .05s;
}
.gallery-item:hover .gallery-cap{opacity:1; transform:translateY(0);}
@media(max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} .gallery-grid .gallery-item:first-child{grid-row:span 1;} }
@media(max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }

/* ---- Interiors ---- */
.interior-section{background:var(--cream-2);}
.interior-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.interior-grid .gallery-item{aspect-ratio:4/5;}
@media(max-width:900px){ .interior-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .interior-grid{grid-template-columns:1fr;} }

/* Placeholder tile (kept for any future space we don't have a photo of yet) */
.placeholder-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:820px; margin:0 auto;}
.placeholder-tile{
  position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  background:
    linear-gradient(rgba(36,26,23,.04),rgba(36,26,23,.04)),
    repeating-linear-gradient(135deg, rgba(205,72,59,.06) 0 2px, transparent 2px 14px);
  border:2px dashed rgba(163,20,14,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;
  padding:24px;
}
.placeholder-tile .motif-watermark{
  position:absolute; width:170px; opacity:.08; top:50%; left:50%; transform:translate(-50%,-50%); animation:spin 50s linear infinite;
}
.placeholder-tile .cam-icon{
  width:42px; height:42px; color:var(--dark-punch); opacity:.7; position:relative; z-index:2;
}
.placeholder-tile .ph-label{position:relative; z-index:2; font-weight:500; font-size:16px; color:var(--ink);}
.placeholder-tile .ph-note{
  position:relative; z-index:2; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dark-punch); font-weight:500; background:rgba(239,232,216,.85); padding:6px 12px; border-radius:999px;
}
@media(max-width:560px){ .placeholder-grid{grid-template-columns:1fr; max-width:380px;} }

/* ---- Private Bookings ---- */
.private{
  position:relative; background:var(--punch); color:var(--cream-2); overflow:hidden;
}
.private .section-flag{color:var(--citrus);}
.private-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2;}
.private-copy p{font-size:18px; line-height:1.8; margin:24px 0 32px; max-width:480px; color:#fbe9e1;}
.private-pattern{
  position:absolute; inset:0; z-index:0; opacity:.12;
  background-image:url('../motifs/motif-09.png'); background-size:140px 140px; background-repeat:repeat;
  animation:driftPattern 60s linear infinite;
}
@keyframes driftPattern{ from{background-position:0 0;} to{background-position:1000px 600px;} }
.private-frame{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5;}
.private-frame img{width:100%;height:100%;object-fit:cover;}
@media(max-width:900px){ .private-grid{grid-template-columns:1fr;} }

/* ---- Contact ---- */
.contact-section{background:var(--cream);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact-card{
  background:var(--cream-2); border-radius:20px; padding:28px; margin-bottom:18px;
  border:1px solid rgba(36,26,23,.08); transition:transform .3s var(--ease), box-shadow .3s ease;
}
.contact-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(36,26,23,.1);}
.contact-card h3{
  font-family:var(--font-accent); font-style:italic; font-weight:600; color:var(--dark-punch);
  font-size:20px; margin-bottom:8px;
}
.contact-card p, .contact-card a{font-size:17px; line-height:1.7;}
.map-frame{border-radius:20px; overflow:hidden; min-height:420px; border:1px solid rgba(36,26,23,.08);}
.map-frame iframe{width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.2) contrast(1.05);}
.socials-row{display:flex; gap:14px; margin-top:6px;}
.social-btn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.social-btn svg{width:18px; height:18px; fill:var(--ink); transition:fill .3s ease;}
.social-btn:hover{background:var(--ink); transform:translateY(-3px);}
.social-btn:hover svg{fill:var(--cream);}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

/* ---- Footer ---- */
footer{background:var(--ink); color:var(--cream); padding:90px var(--pad) 34px; position:relative; overflow:hidden;}
.footer-cta{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; margin-bottom:60px;}
.footer-cta h2{font-size:clamp(38px,7vw,84px); line-height:.95;}
.footer-cta h2 .italic-accent{color:var(--citrus);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:#b8a99d; border-top:1px solid rgba(239,232,216,.15); padding-top:24px;
}
.footer-motif{position:absolute; right:-60px; bottom:-60px; width:260px; opacity:.08; animation:spin 40s linear infinite;}

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