:root{
  --cream:#FBF4E6;
  --cream-dark:#F3E6CF;
  --maroon:#8C3A3A;
  --maroon-dark:#5E2727;
  --terracotta:#B5573F;
  --amber:#D9A45E;
  --olive:#7C8A5A;
  --olive-dark:#5A6842;
  --gold:#C9A25F;
  --ink:#3F2E22;
  --radius:18px;
  --shadow:0 10px 30px rgba(94,39,39,.10);
  --shadow-lg:0 20px 44px rgba(94,39,39,.22);
  --radius-sm:10px;
  --header-h:64px;
  --warm-band:linear-gradient(135deg,#8C3A3A 0%,#B5573F 60%,#C9764C 100%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 1100px 600px at 10% -5%, rgba(217,164,94,.22), transparent 60%),
    radial-gradient(ellipse 900px 700px at 95% 25%, rgba(181,87,63,.10), transparent 55%),
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(201,162,95,.14), transparent 60%),
    var(--cream);
  color:var(--ink);
  font-family:'Lora',serif;
  line-height:1.7;
}
html[lang="ar"] body{font-family:'Cairo',sans-serif;}

h1,h2,h3,h4{margin:0 0 .5em;font-family:'Playfair Display',serif;color:var(--maroon-dark);line-height:1.25;}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:'Amiri',serif;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}

/* language: content text is swapped by js/main.js; these only set text direction */
html[lang="ar"]{direction:rtl;}
html[lang="en"]{direction:ltr;}

.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.pattern-strip{height:16px;background-image:url('../images/pattern-strip.svg');background-repeat:repeat-x;background-size:40px 16px;}

/* keyboard focus — the custom button backgrounds hide the UA default outline */
:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:4px;}
.top-bar a:focus-visible,.hero.hero-photo a:focus-visible,.cat-banner:focus-visible{outline-color:var(--amber);}

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

/* top utility bar */
.top-bar{background:var(--maroon);color:#fff;font-size:.85rem;}
.top-bar-inner{max-width:1140px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.top-bar a{color:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:color .2s;}
.top-bar a:hover{color:var(--amber);}
.top-bar svg{width:17px;height:17px;flex-shrink:0;fill:currentColor;}
.top-bar .tb-phone{direction:ltr;unicode-bidi:embed;}
@media(max-width:640px){.top-bar-inner{padding:7px 16px;font-size:.78rem;justify-content:center;gap:18px;}}

/* header */
header.site-header{background:rgba(251,244,230,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(94,39,39,.06);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1140px;margin:0 auto;gap:16px;}
.brand{display:flex;align-items:center;gap:8px;}
.brand::before{content:"❖";color:var(--gold);font-size:1.1rem;}
.brand-name{font-family:'Amiri',serif;font-size:1.5rem;font-weight:700;color:var(--maroon-dark);}
html[lang="en"] .brand-name{font-family:'Playfair Display',serif;}
nav.main-nav{display:flex;gap:24px;flex:1;justify-content:center;}
nav.main-nav a{font-weight:600;font-size:.95rem;color:var(--ink);padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;}
nav.main-nav a:hover,nav.main-nav a.active{color:var(--maroon);border-color:var(--gold);}
.header-actions{display:flex;align-items:center;gap:10px;}
.lang-toggle{background:var(--terracotta);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:.85rem;letter-spacing:.5px;}
.lang-toggle:hover{background:var(--maroon);}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--maroon);}

.btn{display:inline-block;padding:12px 26px;border-radius:30px;font-weight:700;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .15s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--terracotta);color:#fff;}
.btn-primary:hover{background:var(--maroon);}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1DA851;}
.btn-outline{background:transparent;border-color:var(--maroon);color:var(--maroon);}
.btn-outline:hover{background:var(--maroon);color:#fff;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* hero */
.hero{position:relative;padding:90px 0 70px;background:radial-gradient(ellipse 700px 500px at 30% 50%, rgba(217,164,94,.28), transparent 65%),linear-gradient(160deg,#F7E9D2 0%,var(--cream) 60%,#FBF1DF 100%);overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1fr minmax(0,430px);gap:48px;align-items:center;max-width:1140px;margin:0 auto;padding:0 24px;}
.hero-eyebrow{color:var(--olive-dark);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;margin-bottom:10px;}
.hero h1{font-size:2.8rem;margin-bottom:14px;}
.hero p.lead{font-size:1.15rem;color:#5a4f45;max-width:520px;}
.hero.hero-photo{background:url('../images/dining-room.webp') center 35%/cover no-repeat;padding:110px 0 90px;}
.hero.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(64,24,24,.90) 0%,rgba(94,39,39,.74) 45%,rgba(94,39,39,.30) 100%);}
html[lang="ar"] .hero.hero-photo::before{background:linear-gradient(260deg,rgba(64,24,24,.90) 0%,rgba(94,39,39,.74) 45%,rgba(94,39,39,.30) 100%);}
.hero.hero-photo .hero-inner{position:relative;}
.hero.hero-photo h1,.hero.hero-photo .hero-eyebrow{color:#fff;}
.hero.hero-photo .hero-eyebrow{color:var(--amber);}
.hero.hero-photo p.lead{color:#F3E4CE;}
.hero.hero-photo .btn-outline{border-color:#F3E4CE;color:#fff;}
.hero.hero-photo .btn-outline:hover{background:#F3E4CE;color:var(--maroon-dark);}
.hero-visual{display:flex;justify-content:center;}
.photo-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);}
.photo-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;}
/* 4/5 in a half-width column renders ~800px tall — too dominant for a room shot */
.photo-frame-wide img{aspect-ratio:3/2;}
/* full-bleed video hero. The source is a 360x640 portrait clip, so filling a wide
   hero upscales it heavily — the gradient overlay below plus a slight blur keep the
   softness reading as depth of field rather than a broken asset. */
.hero-video-bg{background:#3a1416;min-height:72vh;display:flex;align-items:center;}
.hero-video-bg .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;filter:saturate(1.08) contrast(1.04);}
/* lighter than the still-photo hero so the footage stays visible; the text
   carries its own shadow instead of relying on a heavy scrim */
.hero.hero-video-bg::before{z-index:1;background:linear-gradient(100deg,rgba(58,20,22,.70) 0%,rgba(74,30,30,.48) 45%,rgba(74,30,30,.20) 100%);}
html[lang="ar"] .hero.hero-video-bg::before{background:linear-gradient(260deg,rgba(58,20,22,.70) 0%,rgba(74,30,30,.48) 45%,rgba(74,30,30,.20) 100%);}
.hero-video-bg h1,.hero-video-bg .hero-eyebrow,.hero-video-bg p.lead{text-shadow:0 2px 16px rgba(26,8,10,.78);}
.hero-video-bg .hero-inner{position:relative;z-index:2;grid-template-columns:1fr;}
.hero-video-bg .hero-inner > div{max-width:660px;}
@media(max-width:768px){.hero-video-bg .hero-bg-video{display:none;}}
.hero-logo-frame{max-width:340px;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(58,42,28,.28);transform:rotate(-1.5deg);background:#fff;padding:6px;}
.hero-logo-frame img{width:100%;border-radius:12px;}
.page-hero{padding:60px 0 40px;text-align:center;background:radial-gradient(ellipse 600px 300px at 50% 0%, rgba(217,164,94,.30), transparent 70%),linear-gradient(180deg,#F5E7CF,var(--cream));}
.page-hero h1{font-size:2.2rem;}
.page-hero p{max-width:640px;margin:0 auto;color:#5a4f45;}

/* social strip (replaces old numbers banner) */
.social-strip{background:var(--warm-band);color:#fff;padding:36px 0;text-align:center;}
.social-strip p{margin:0 0 14px;font-size:1.05rem;opacity:.95;}
.social-strip .btn-row{justify-content:center;}
.social-strip .btn-social{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);}
.social-strip .btn-social:hover{background:rgba(255,255,255,.22);}

/* virtual tour */
.tour-frame{width:100%;height:480px;border:none;border-radius:var(--radius);box-shadow:var(--shadow);}

section{padding:64px 0;}
.section-title{text-align:center;margin-bottom:40px;}
.section-title .eyebrow{color:var(--olive-dark);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;}
.section-title h2{font-size:2rem;}

.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;}
.card h3{font-size:1.15rem;margin-bottom:8px;}

.dish-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.dish-thumb{height:210px;background:linear-gradient(135deg,var(--amber),var(--terracotta));overflow:hidden;}
.dish-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.dish-card:hover .dish-thumb img{transform:scale(1.05);}
.dish-body{padding:18px 20px;}
.dish-body .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.dish-body h4{margin:0;font-size:1.05rem;color:var(--ink);font-family:'Lora',serif;font-weight:600;}
html[lang="ar"] .dish-body h4{font-family:'Cairo',sans-serif;}
.price{color:var(--maroon);font-weight:700;white-space:nowrap;}
.dish-body p{color:#7a6f63;font-size:.9rem;margin:6px 0 0;}

.menu-note{background:var(--cream-dark);border:1px dashed var(--gold);border-radius:var(--radius);padding:16px 20px;text-align:center;margin-bottom:36px;color:#5a4f45;font-size:.92rem;}
.menu-category{margin-bottom:48px;scroll-margin-top:calc(var(--header-h) + 70px);}
.menu-category h3{border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:22px;font-size:1.5rem;}

.gallery-tile{aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(135deg,var(--terracotta),var(--amber));display:flex;align-items:flex-end;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.gallery-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.gallery-tile:hover img{transform:scale(1.05);}
.gallery-tile span{position:relative;z-index:1;padding:14px 16px;font-weight:600;background:linear-gradient(to top,rgba(40,15,15,.75),transparent);width:100%;}
.gallery-tile.tall{aspect-ratio:3/4;}
.tile-caption{position:relative;z-index:1;width:100%;padding:22px 18px 18px;background:linear-gradient(to top,rgba(40,15,15,.88) 0%,rgba(40,15,15,.35) 70%,transparent 100%);}
.tile-caption h3{color:#fff;margin:0 0 4px;font-size:1.35rem;}
.tile-caption p{color:#F3E4CE;margin:0;font-size:.9rem;line-height:1.5;}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px;}
.bento-item{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(94,39,39,.08);display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);transition:transform .3s ease,box-shadow .3s ease;}
a.bento-item:hover{transform:scale(1.02);box-shadow:0 14px 34px rgba(94,39,39,.18);}
.bento-item .b-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
a.bento-item:hover .b-cover{transform:scale(1.06);}
.bento-item .b-body{position:relative;z-index:1;padding:22px;}
.bento-item h3{margin:0 0 6px;font-size:1.3rem;}
.bento-item p{margin:0;font-size:.92rem;line-height:1.5;}
.bento-item .b-kicker{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;opacity:.85;margin-bottom:8px;}
.bento-item.photo .b-body{background:linear-gradient(to top,rgba(38,14,14,.90) 0%,rgba(38,14,14,.35) 65%,transparent 100%);color:#fff;padding-top:48px;}
.bento-item.photo h3{color:#fff;}
.bento-item.photo p{color:#F3E4CE;}
.bento-item.center{justify-content:center;text-align:center;align-items:center;}
.bento-item.tint-cream{background:linear-gradient(150deg,#FBF1DF,#F0DFC0);}
.bento-item.tint-amber{background:linear-gradient(140deg,var(--amber),#C9764C);color:#fff;}
.bento-item.tint-terracotta{background:linear-gradient(140deg,var(--terracotta),#8C3A3A);color:#fff;}
.bento-item.tint-maroon{background:linear-gradient(140deg,#8C3A3A,#5E2727);color:#fff;}
.bento-item.tint-olive{background:linear-gradient(140deg,#7C8A5A,#5A6842);color:#fff;}
.bento-item.tint-amber h3,.bento-item.tint-terracotta h3,.bento-item.tint-maroon h3,.bento-item.tint-olive h3{color:#fff;}
.bento-item .b-logo{position:relative;z-index:1;width:132px;border-radius:14px;box-shadow:0 10px 24px rgba(94,39,39,.22);margin-bottom:16px;}
.b-pill{display:inline-block;margin-top:14px;padding:10px 22px;border-radius:30px;background:#25D366;color:#fff;font-weight:700;font-size:.9rem;}
.b-link{display:inline-block;margin-top:10px;font-weight:700;font-size:.88rem;border-bottom:2px solid currentColor;padding-bottom:2px;}
.w2{grid-column:span 2;}
.h2{grid-row:span 2;}

.location-strip{background:var(--warm-band);color:#fff;padding:44px 0;}
.location-strip .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.location-strip h2{color:#fff;margin:0 0 6px;font-size:1.8rem;}
.location-strip p{margin:0;opacity:.92;max-width:560px;}
.location-strip .btn-social{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);}
.location-strip .btn-social:hover{background:rgba(255,255,255,.26);}
.check-list li{padding:8px 0;border-bottom:1px solid #EFE2CB;}
.check-list li::before{content:"✓";color:var(--terracotta);font-weight:700;margin-inline-end:10px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split .visual{background:linear-gradient(135deg,#F5E7CF,#fff);border-radius:var(--radius);padding:40px;color:var(--terracotta);box-shadow:var(--shadow);}

.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.value-item{padding:20px;}
.value-item .icon{width:52px;height:52px;margin:0 auto 12px;color:var(--maroon);}

.package-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;text-align:center;border-top:4px solid var(--amber);}
.package-card.featured{border-top-color:var(--terracotta);transform:scale(1.03);}
.package-card h3{font-size:1.25rem;}
.package-card .price-range{font-size:1.6rem;color:var(--maroon);font-weight:700;margin:10px 0;font-family:'Playfair Display',serif;}
html[lang="ar"] .package-card .price-range{font-family:'Amiri',serif;}
.package-card ul{margin:16px 0;text-align:start;}
.package-card li{padding:6px 0;color:#5a4f45;font-size:.92rem;border-bottom:1px solid #f0e9de;}
.package-card li:last-child{border-bottom:none;}

/* story layout: the key photo is portrait 3:4, so it gets a narrow fixed column
   instead of half the grid — at 1fr 1fr it towered over the two paragraphs */
.wide-figure{margin:0;}
.wide-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:block;}
.wide-figure figcaption{margin-top:12px;text-align:center;color:#7a6f63;font-size:.9rem;max-width:680px;margin-inline:auto;line-height:1.7;}

.story-split{display:grid;grid-template-columns:1fr minmax(0,300px);gap:48px;align-items:center;}
.story-text h2{margin-bottom:16px;}
.story-text p{font-size:1.05rem;line-height:1.9;color:#5a4f45;}
.story-photo{margin:0;}
.story-photo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:block;}
.story-photo figcaption{margin-top:10px;font-size:.85rem;color:#7a6f63;text-align:center;}
@media(max-width:768px){
  .story-split{grid-template-columns:1fr;gap:28px;}
  .story-photo{max-width:260px;margin:0 auto;}
}

.hours-pill{display:inline-flex;align-items:center;gap:9px;margin:14px auto 0;padding:8px 18px;border-radius:999px;background:var(--cream-dark);border:1px solid var(--gold);color:var(--maroon-dark);font-weight:700;font-size:.95rem;}
.hours-pill svg{width:18px;height:18px;fill:var(--terracotta);flex-shrink:0;}

.faq-list{max-width:820px;margin:0 auto;}
.faq-item{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.faq-item summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--maroon-dark);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--terracotta);font-size:1.4rem;line-height:1;flex-shrink:0;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary:hover{background:var(--cream);}
.faq-item p{margin:0;padding:0 20px 18px;color:#5a4f45;font-size:.95rem;line-height:1.7;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info-item{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start;}
.contact-info-item .icon{width:26px;height:26px;color:var(--maroon);flex-shrink:0;margin-top:3px;}
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:none;width:100%;height:320px;}

form.contact-form{display:flex;flex-direction:column;gap:14px;}
form.contact-form input,form.contact-form textarea{padding:12px 14px;border:1px solid #ddd0bb;border-radius:8px;font-family:inherit;font-size:1rem;background:#fff;}
form.contact-form textarea{min-height:120px;resize:vertical;}
form.contact-form label{font-weight:600;font-size:.9rem;color:var(--maroon-dark);}

.hours-table{width:100%;border-collapse:collapse;}
.hours-table td{padding:8px 0;border-bottom:1px solid #eee1cc;}
.hours-table td:last-child{text-align:end;font-weight:600;color:var(--maroon-dark);}

footer.site-footer{background:linear-gradient(160deg,#5E2727 0%,#4A2A22 100%);color:#F4E6D4;padding:50px 0 20px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:30px;}
.footer-grid h4{color:#fff;font-family:'Playfair Display',serif;margin-bottom:14px;}
html[lang="ar"] .footer-grid h4{font-family:'Amiri',serif;}
.footer-grid a{opacity:.85;display:block;margin-bottom:8px;font-size:.92rem;}
.footer-grid a:hover{opacity:1;text-decoration:underline;}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.footer-brand img{width:56px;height:56px;border-radius:8px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;text-align:center;font-size:.85rem;opacity:.75;}

.whatsapp-fab{position:fixed;bottom:22px;inset-inline-end:22px;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:60;}
.whatsapp-fab svg{width:28px;height:28px;fill:#fff;}

@media (max-width: 900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:168px;}
  .bento-item.hero-tile{grid-column:span 2;}
  .hero-inner{grid-template-columns:1fr;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 680px){
  .bento{gap:12px;grid-auto-rows:150px;}
  .bento-item .b-body{padding:16px;}
  .bento-item h3{font-size:1.08rem;}
  .bento-item p{font-size:.84rem;}
  nav.main-nav{position:absolute;top:100%;inset-inline:0;background:var(--cream);flex-direction:column;padding:16px 24px;gap:14px;box-shadow:var(--shadow);display:none;}
  nav.main-nav.open{display:flex;}
  .nav-toggle{display:block;}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2.1rem;}
}


/* ===================== story (about.html#story) ===================== */
.story-section{padding-top:48px;}
.story-chapters{display:flex;flex-direction:column;gap:64px;margin-top:16px;}
.story-chapter{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:48px;align-items:center;scroll-margin-top:calc(var(--header-h) + 16px);}
.story-chapter.is-flipped{grid-template-columns:1fr minmax(0,300px);}
.story-chapter.is-flipped .story-media{order:2;}
.story-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#2a1113;aspect-ratio:9/16;}
.story-media video{width:100%;height:100%;object-fit:cover;display:block;}
.story-body h2{font-size:2rem;}
.story-summary{font-size:1.08rem;color:#5a4f45;}
.story-transcript{margin-top:16px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.story-transcript summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--maroon);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.story-transcript summary::-webkit-details-marker{display:none;}
.story-transcript summary::after{content:"+";color:var(--terracotta);font-size:1.4rem;line-height:1;}
.story-transcript[open] summary::after{content:"\2212";}
.story-transcript p{padding:0 18px;margin:0 0 10px;color:#5a4f45;line-height:1.95;}
.story-transcript p:last-child{padding-bottom:16px;}

/* homepage teaser into the story */
.teaser-poster{position:relative;display:block;width:100%;max-width:300px;margin-inline:auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:9/16;}
.teaser-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.teaser-poster:hover img{transform:scale(1.04);}
.play-badge{position:absolute;top:50%;left:50%;width:68px;height:68px;border-radius:50%;background:rgba(140,58,58,.92);display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(0,0,0,.32);transition:transform .25s ease;}
.play-badge svg{width:30px;height:30px;fill:#fff;transform:translateX(2px);}
.teaser-poster:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);}
.teaser-label{position:absolute;inset-inline:0;bottom:0;padding:32px 14px 14px;color:#fff;font-weight:600;font-size:.88rem;text-align:center;background:linear-gradient(to top,rgba(40,15,15,.86),transparent);}

/* guests, in their own words */
.guests-section{background:var(--cream-dark);}
.guests-media{width:100%;max-width:440px;margin-inline:auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#f6efe2;aspect-ratio:720/728;}
.guests-media video{width:100%;height:100%;object-fit:cover;display:block;}

/* ===================== menu: sticky category bar ===================== */
.menu-cats{position:sticky;top:var(--header-h);z-index:40;background:rgba(251,244,230,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,162,95,.35);box-shadow:0 6px 16px rgba(94,39,39,.05);}
.menu-cats-inner{max-width:1140px;margin:0 auto;padding:10px 24px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;}
.menu-cats-inner::-webkit-scrollbar{display:none;}
.menu-cats a{flex:0 0 auto;padding:7px 15px;border-radius:999px;border:1px solid rgba(201,162,95,.6);background:#fff;color:var(--maroon-dark);font-size:.88rem;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;}
.menu-cats a:hover{border-color:var(--terracotta);}
.menu-cats a.is-active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.set-price small{font-size:.9rem;font-weight:600;opacity:.85;margin-inline-start:4px;}

/* ===================== motion ===================== */
/* only added by main.js, so content stays visible if scripts fail or motion is reduced */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}
.dish-card,.package-card{transition:transform .3s ease,box-shadow .3s ease;}
.dish-card:hover,.package-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

/* ===================== one colour grade for mixed photography ===================== */
/* PDF scans, phone shots and studio shots were graded differently; a light warm pass ties them together */
.gallery-tile img,.dish-thumb img,.photo-frame img,.wide-figure img,.story-photo img,.cat-banner img,.teaser-poster img{filter:saturate(1.06) sepia(.06) contrast(1.02);}

@media(max-width:768px){
  .story-chapter,.story-chapter.is-flipped{grid-template-columns:1fr;gap:22px;}
  .story-chapter.is-flipped .story-media{order:0;}
  .story-media{width:100%;max-width:290px;margin-inline:auto;}
  .story-body h2{font-size:1.6rem;}
  .menu-cats-inner{padding:9px 16px;}
}


/* ===================== background music toggle ===================== */
/* opposite corner from the WhatsApp button so the two never overlap */
.music-toggle{position:fixed;bottom:22px;inset-inline-start:22px;z-index:60;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(201,162,95,.7);background:rgba(251,244,230,.94);color:var(--maroon);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(94,39,39,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease;}
.music-toggle[hidden]{display:none;}
.music-toggle:hover{transform:scale(1.06);}
.music-toggle svg{width:22px;height:22px;fill:currentColor;}
.music-toggle .icon-on,.music-toggle .eq{display:none;}
.music-toggle[aria-pressed="true"]{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.music-toggle[aria-pressed="true"] .icon-off{display:none;}
.music-toggle[aria-pressed="true"] .icon-on{display:block;}
/* small equaliser so it reads as "music is playing", not just a speaker icon */
.music-toggle[aria-pressed="true"].is-playing .icon-on{display:none;}
.music-toggle[aria-pressed="true"].is-playing .eq{display:flex;}
.music-toggle .eq{gap:3px;align-items:flex-end;height:18px;}
.music-toggle .eq i{display:block;width:3px;background:#fff;border-radius:2px;animation:eq 1s ease-in-out infinite;}
.music-toggle .eq i:nth-child(1){height:8px;animation-delay:-.2s;}
.music-toggle .eq i:nth-child(2){height:16px;animation-delay:-.5s;}
.music-toggle .eq i:nth-child(3){height:11px;animation-delay:-.8s;}
@keyframes eq{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}
@media(max-width:768px){.music-toggle{bottom:18px;inset-inline-start:16px;width:44px;height:44px;}}

.music-credit{display:inline-block;margin-top:6px;opacity:.75;font-size:.78rem;}
.music-credit a{color:inherit;text-decoration:underline;}