/* Rustic Char: one stylesheet for every page.
   Palette from the owner: olive green, burnt orange, and the black-and-white
   triangle tiles from the shop floor. No black: olive is the frame, orange means
   "order / call", the tiles are the one playful detail. One typeface: Outfit. */

:root{
  --olive:#5F6F5A;        /* owner's olive: header, band, reviews, footer */
  --olive-deep:#4B5946;   /* hover / pressed olive */
  --olive-ink:#3E4A3A;    /* olive text on light backgrounds */
  --black:#1C140E;        /* warm black: Call to Order buttons */
  --black-soft:#3A2D23;
  --orange:#CC5500;       /* owner's burnt orange: big type, rules, stars */
  --orange-btn:#C24F00;   /* button fill (white text passes contrast) */
  --orange-ink:#A84500;   /* small orange text on light backgrounds */
  --paper:#F3EBD8;
  --paper-2:#F3EBD8;   /* one cream everywhere (user: the lighter one) */
  --card:#FBF8F0;
  --ink:#2A3127;          /* text: a very deep olive, not black */
  --ink-soft:#535D4C;
  --line:rgba(42,49,39,0.14);
  --line-light:rgba(243,235,216,0.2);
  --tile-dark:#262A24;
  --tile-light:#FAFAF6;

  --font:'Outfit', system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --radius:8px;
  --wrap:1240px;
  --bar:76px;

  /* one floor tile: white square, dark triangle, thin grout */
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23CFCBC2'/%3E%3Crect x='1' y='1' width='30' height='30' fill='%23FAFAF6'/%3E%3Cpath d='M1 31 31 1v30z' fill='%23262A24'/%3E%3C/svg%3E");
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 8px); -webkit-text-size-adjust:100%;}
body{background:var(--paper); color:var(--ink); font-family:var(--font); font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
button{font:inherit;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.wrap, header, section, footer{position:relative;}
/* titles: Outfit Black, capitals, tight */
.sign{font-family:var(--font); font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.9;}
.label{font-family:var(--font); font-weight:600; font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;}
::selection{background:var(--orange); color:#fff;}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:2px;}
header :focus-visible, .band :focus-visible, .reviews :focus-visible, footer :focus-visible, .hero :focus-visible{outline-color:var(--paper);}

/* ---- the floor tiles ---- */
.tiles{height:32px; background:var(--tile) repeat-x left center / 32px 32px;}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 26px; border:1px solid transparent; border-radius:var(--radius); font-family:var(--font); font-weight:600; font-size:0.84rem; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);}
.btn:active{transform:scale(0.98);}
.btn-fill{background:var(--black); color:#fff;}
.btn-fill:hover{background:var(--orange-btn); border-color:var(--orange-btn);}
.hero .btn-fill{border-color:rgba(243,235,216,0.28);}
.btn-out{border-color:rgba(243,235,216,0.7); color:var(--paper);}
.btn-out:hover{background:var(--olive); border-color:var(--olive); color:#fff;}
.btn-olive{background:var(--olive); color:#fff;}
.btn-olive:hover{background:var(--olive-deep);}
.btn-line{border-color:var(--olive); color:var(--olive-ink);}
.btn-line:hover{background:var(--olive); color:#fff;}
.btn-paper{background:var(--paper); color:var(--olive-ink);}
.btn-paper:hover{background:#fff;}

/* ---- header ---- */
header{position:sticky; top:0; z-index:50; color:var(--paper);}
header::before{content:''; position:absolute; inset:0; background:var(--olive); box-shadow:0 1px 0 rgba(42,49,39,0.12); transition:opacity .5s var(--ease);}
body.has-hero header{position:fixed; left:0; right:0;}
/* over the hero: no bar, just a soft shade so the links stay readable on the photo */
header.at-hero::before{opacity:0;}
header::after{content:''; position:absolute; left:0; right:0; top:0; height:150%; z-index:-1; pointer-events:none; background:linear-gradient(rgba(28,20,14,0.5), rgba(28,20,14,0)); opacity:0; transition:opacity .5s var(--ease);}
header.at-hero::after{opacity:1;}
header.at-hero .nav-call{max-width:0; padding-left:0; padding-right:0; margin-right:-10px; border-width:0; opacity:0; pointer-events:none;}
nav{position:relative; max-width:var(--wrap); min-height:var(--bar); margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.nav-links{flex:1; display:flex; justify-content:flex-start; gap:2px; margin-left:-11px;}
.nav-links > a{position:relative; padding:10px 11px; white-space:nowrap; font-weight:500; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(243,235,216,0.82); transition:color .3s var(--ease);}
.nav-links > a::after{content:''; position:absolute; left:11px; right:11px; bottom:5px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);}
.nav-links > a:hover, .nav-links > a[aria-current="page"]{color:var(--paper);}
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after{transform:scaleX(1);}
.nav-extra{display:none;}
.nav-actions{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}
.nav-call, .nav-uber{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:var(--radius); font-weight:600; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap;}
.nav-call:active, .nav-uber:active{transform:scale(0.97);}
.nav-call{background:var(--orange-btn); color:#fff; max-width:220px; overflow:hidden; transition:max-width .55s var(--ease), padding .55s var(--ease), margin .55s var(--ease), opacity .35s ease, background-color .3s var(--ease);}
.nav-call:hover{background:var(--black);}
.nav-uber{border-color:rgba(243,235,216,0.42); color:var(--paper);}
.nav-uber:hover{background:rgba(243,235,216,0.1); border-color:var(--paper);}
.nav-uber svg{width:18px; height:18px; flex-shrink:0;}
.nav-toggle{display:none; position:relative; width:44px; height:44px; border:1px solid rgba(243,235,216,0.4); border-radius:var(--radius); background:transparent; color:var(--paper); cursor:pointer; flex-shrink:0; transition:background-color .3s var(--ease), border-color .3s var(--ease);}
.nav-toggle:hover{background:rgba(243,235,216,0.1);}
.nav-toggle span{position:absolute; left:50%; top:50%; width:18px; height:2px; margin:-1px 0 0 -9px; border-radius:2px; background:currentColor; transition:transform .5s var(--ease);}
.nav-toggle span:first-child{transform:translateY(-4px);}
.nav-toggle span:last-child{transform:translateY(4px);}
.nav-toggle[aria-expanded="true"]{background:rgba(243,235,216,0.12);}
.nav-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg);}
.nav-scrim{display:none;}
/* the round logo, top right, in both the see-through and olive header */
.nav-logo{display:block; flex-shrink:0; width:48px; height:48px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(243,235,216,0.5); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.nav-logo:hover{transform:scale(1.05); box-shadow:0 0 0 2px var(--paper);}
.nav-logo img{width:100%; height:100%; border-radius:50%; display:block;}
@media(max-width:560px){ .nav-logo{width:42px; height:42px;} }

/* menu mode (phones and small screens): links live in a frosted olive sheet */
header.menu-mode .nav-toggle{display:inline-flex;}
header.menu-mode .nav-links{position:absolute; top:100%; right:0; left:0; flex-direction:column; justify-content:flex-start; gap:0; padding:4px 22px 26px; background:rgba(75,89,70,0.95); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); border-top:1px solid var(--line-light); box-shadow:0 30px 60px rgba(30,36,28,0.3); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;}
header.menu-mode .nav-links.is-open{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .6s var(--ease), visibility 0s;}
header.menu-mode .nav-links > a{display:flex; align-items:center; justify-content:space-between; padding:17px 2px; font-weight:900; font-size:1.7rem; line-height:1; letter-spacing:-0.02em; color:var(--paper); border-bottom:1px solid var(--line-light); opacity:0; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease;}
header.menu-mode .nav-links > a::after{position:static; content:'\2192'; height:auto; background:none; font-weight:400; font-size:1.1rem; opacity:0.45; transform:none; transition:transform .45s var(--ease), opacity .3s;}
header.menu-mode .nav-links > a:hover::after{opacity:1; transform:translateX(4px);}
header.menu-mode .nav-links.is-open > a{opacity:1; transform:none; transition:opacity .45s ease, transform .6s var(--ease);}
header.menu-mode .nav-links.is-open > a:nth-child(2){transition-delay:.04s;}
header.menu-mode .nav-links.is-open > a:nth-child(3){transition-delay:.08s;}
header.menu-mode .nav-links.is-open > a:nth-child(4){transition-delay:.12s;}
header.menu-mode .nav-links.is-open > a:nth-child(5){transition-delay:.16s;}
header.menu-mode .nav-links.is-open > a:nth-child(6){transition-delay:.2s;}
header.menu-mode .nav-extra{display:block; padding-top:22px; opacity:0; transition:opacity .15s ease;}
header.menu-mode .nav-links.is-open .nav-extra{opacity:1; transition:opacity .5s ease .22s;}
.nav-extra-uber{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(243,235,216,0.35); border-radius:var(--radius); color:var(--paper); transition:background-color .3s var(--ease);}
.nav-extra-uber:hover{background:rgba(243,235,216,0.08);}
.nav-extra-uber svg{width:34px; height:34px; flex-shrink:0;}
.nav-extra-uber b{display:block; font-weight:600; font-size:0.98rem;}
.nav-extra-uber small{display:block; font-size:0.82rem; opacity:0.78;}
.nav-extra-uber .go{margin-left:auto; opacity:0.6;}
header.menu-mode ~ .nav-scrim{display:block; position:fixed; inset:0; z-index:40; background:rgba(30,36,28,0.42); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;}
header.menu-mode ~ .nav-scrim.is-open{opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s;}
@media(min-width:1181px){
  /* on a computer the sheet is a neat panel under the button, not full width */
  header.menu-mode .nav-links{left:auto; width:400px; margin-right:24px; border:1px solid var(--line-light); border-radius:0 0 12px 12px;}
}
@media(max-width:1180px){ nav{padding:0 18px; gap:10px;} }
/* phones: the links only ever show inside the sheet */
@media(max-width:1180px){ header:not(.menu-mode) .nav-links{display:none;} }
/* small phones: the Uber Eats button shrinks to its app icon */
@media(max-width:600px){
  .nav-uber{width:40px; padding:0; border:none;}
  .nav-uber svg{width:34px; height:34px;}
  .nav-uber .txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .nav-call{padding:0 13px;}
}
@media(max-width:560px){ nav{padding:0 16px;} .nav-actions{gap:8px;} }
@media(prefers-reduced-transparency:reduce){ header.menu-mode .nav-links{background:var(--olive-deep); -webkit-backdrop-filter:none; backdrop-filter:none;} }

/* ---- hero: the shop photo stays put while the page scrolls up over it.
   The name sits just under the lamps, the line + description + buttons follow it in the
   top half, and the rating and open status sit along the bottom. Only cream + orange on the photo. ---- */
.hero{position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex;}
.hero-img{position:fixed; top:0; left:0; width:100%; height:100vh; object-fit:cover; z-index:-2;}
.hero-shade{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;
  background:linear-gradient(90deg, rgba(24,20,16,0.5) 0%, rgba(24,20,16,0.12) 75%),
             linear-gradient(180deg, rgba(24,20,16,0.12) 0%, rgba(24,20,16,0.38) 26%, rgba(24,20,16,0.55) 65%, rgba(24,20,16,0.88) 100%);}
.hero-inner{position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto; padding:calc(var(--bar) + clamp(56px, 11vh, 120px)) 24px 36px; display:flex; flex-direction:column; justify-content:flex-start; color:var(--paper);}
.below{position:relative; z-index:3; background:var(--paper);}
/* the name, big: it runs from the page's left edge to just short of the screen's right edge */
.wordmark{font-weight:900; text-transform:uppercase; font-size:calc((100vw - max(24px, (100vw - var(--wrap)) / 2 + 24px) - 28px) / 7.35); line-height:0.84; letter-spacing:-0.045em; color:var(--paper); white-space:nowrap;}
.wordmark span{display:inline-block;}
.wm-palms{display:inline-block; height:1.15em; aspect-ratio:138/163; margin-left:0.05em; vertical-align:-0.02em; background:var(--paper); -webkit-mask:url(palms.svg) center bottom / contain no-repeat; mask:url(palms.svg) center bottom / contain no-repeat;}
.hero-row{margin-top:clamp(26px, 3.2vw, 44px);}
.hero h1{font-weight:600; font-size:clamp(1.3rem, 2.1vw, 1.9rem); letter-spacing:0.1em; text-transform:uppercase; line-height:1.25; color:var(--paper);}
.hero h1 em{font-style:normal; color:#F08A3C;}
.hero .lead{margin-top:12px; font-size:clamp(1.12rem, 1.45vw, 1.35rem); line-height:1.5; max-width:44ch; color:rgba(243,235,216,0.88);}
.hero-cta{margin-top:clamp(26px, 3vw, 36px); display:flex; gap:12px; flex-wrap:wrap;}
/* on the photo the main button starts orange (black would vanish into the shade) and goes black on hover */
.hero .btn-fill{background:var(--orange-btn); border-color:var(--orange-btn);}
.hero .btn-fill:hover{background:var(--black); border-color:var(--black);}
.hero-meta{margin-top:auto; padding-top:16px; border-top:1px solid rgba(243,235,216,0.2); display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; font-size:0.9rem; color:rgba(243,235,216,0.88);}
.hero-rating{display:inline-flex; align-items:center; gap:10px;}
.hero-rating .stars{color:var(--paper); letter-spacing:2px;}
.hero .open-status{margin:0; color:rgba(243,235,216,0.92);}
.hero .open-status.is-open::before{background:#7BC26A; box-shadow:0 0 0 4px rgba(123,194,106,0.25);}
@media(max-width:700px){
  .hero-img{object-position:38% center;}
  .hero-shade{background:linear-gradient(180deg, rgba(24,20,16,0.15) 0%, rgba(24,20,16,0.5) 24%, rgba(24,20,16,0.62) 62%, rgba(24,20,16,0.9) 100%);}
  .hero-inner{padding-top:calc(var(--bar) + clamp(110px, 26vh, 240px)); padding-bottom:28px;}
  /* as big as the screen allows: the CHAR + palms line runs to 8px from the right edge */
  .wordmark{font-size:min(calc((100vw - 32px) / 3.52), 8rem); line-height:0.78;}
  .wordmark span{display:block;}
  .wm-palms{height:0.92em;}
  .hero-row{margin-top:24px;}
  .hero h1{font-size:1.12rem; letter-spacing:0.1em;}
  .hero .lead{margin-top:10px; font-size:1.06rem;}
  .hero-cta{margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .hero-cta .btn{padding:0 12px; min-height:50px;}
  .hero-meta{padding-top:14px; gap:8px 18px; font-size:0.82rem;}
  .hero-cta{margin-bottom:32px;} /* always a clear gap above the rating line */
}
/* short phones (iPhone SE size): start a little higher so the rating still fits on screen */
@media(max-width:700px) and (max-height:720px){
  .hero-inner{padding-top:calc(var(--bar) + 84px);}
}

/* underline that draws in on hover */
.u-link{position:relative; display:inline-block;}
.u-link::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);}
.u-link:hover::after, a:hover > .u-link::after{transform:scaleX(1); transform-origin:left;}

/* ---- value band under the tiles ---- */
.band{background:var(--olive); color:var(--paper); padding:16px 24px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 34px;}
.band span{position:relative;}
.band span + span::before{content:''; position:absolute; left:-20px; top:50%; width:5px; height:5px; margin-top:-3px; background:var(--paper); opacity:0.6; transform:rotate(45deg);}
@media(max-width:600px){ .band{gap:6px 22px;} .band span + span::before{display:none;} }

/* ---- photo reel: sits still; swipe, scroll sideways or use the arrows ---- */
.reel{margin:56px 0 64px;}
.reel-track{display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); padding:6px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)) 18px; scrollbar-width:none; cursor:grab;}
.reel-track::-webkit-scrollbar{display:none;}
.reel-track.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.reel-track a{flex:0 0 auto; height:clamp(220px, 26vw, 330px); border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; box-shadow:0 10px 24px rgba(42,49,39,0.14);}
.reel-track img{height:100%; width:auto; display:block; object-fit:cover; pointer-events:none; transition:transform .8s var(--ease);}
.reel-track a:hover img{transform:scale(1.03);}
.reel-foot{display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:6px;}
.reel-arrows{display:flex; gap:10px;}
.round-btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--olive); background:transparent; color:var(--olive-ink); font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);}
.round-btn:hover{background:var(--olive); color:#fff;}
.round-btn:active{transform:scale(0.95);}
.reel-link{color:var(--olive-ink);}

/* ---- section titles share one size ---- */
.menu-head h2, .catering h2, .reviews h2, .igfeed-head h2, .about-head h1{font-size:clamp(2.6rem, 6vw, 4.4rem);}

/* ---- menu (layout unchanged, new colours) ---- */
.menu{background:var(--paper-2); padding:96px 0;}
.menu-head{text-align:center; margin-bottom:14px;}
.menu-head h2{color:var(--ink);}
.menu-head p{color:var(--ink-soft); margin-top:14px; font-size:1.05rem;}
.menu-key{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; margin:26px 0 10px; font-size:0.84rem; color:var(--ink-soft);}
.menu-key span{display:inline-flex; align-items:center; gap:8px;}
.menu-note{text-align:center; max-width:520px; margin:0 auto 54px; font-size:0.8rem; color:var(--ink-soft); font-style:italic;}
.badge{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; padding-top:0.06em; border-radius:50%; background:var(--olive-ink); color:#fff; font-family:var(--font); font-style:normal; font-size:0.54rem; font-weight:700; line-height:1; letter-spacing:0;}
.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px 64px;}
.cat h3{font-weight:900; font-size:1.3rem; line-height:1; letter-spacing:-0.01em; text-transform:uppercase; color:var(--orange); padding-bottom:11px; margin-bottom:8px; border-bottom:1px solid var(--olive); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cat h3 .all{display:inline-flex; align-items:center; gap:4px;}
.item{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line);}
.item:last-child{border-bottom:none;}
.item-name{font-weight:600; font-size:0.94rem; color:var(--ink);}
.item-name{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
.item-tags{display:inline-flex; align-items:center; gap:4px;}
.item-desc{font-size:0.8rem; color:var(--ink-soft); margin-top:2px;}
.item-price{font-weight:700; font-size:0.94rem; color:var(--orange-ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
.item-price .sub{font-weight:400; font-size:0.8rem; color:var(--ink-soft);}
@media(max-width:720px){ .menu{padding:76px 0;} .menu-grid{grid-template-columns:1fr; gap:40px;} }

/* ---- catering: the photos sit on a patch of the shop's floor tiles ---- */
.catering{background:var(--paper); padding:120px 0;}
.catering .catering-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(40px, 6vw, 96px); align-items:center;}
.catering .label{color:var(--orange-ink);}
.catering h2{color:var(--ink); margin:16px 0 26px;}
.catering h2 em{display:block; font-style:normal; color:var(--orange);}
.catering p{color:var(--ink-soft); font-size:1.18rem; line-height:1.6; max-width:42ch;}
.catering-list{list-style:none; margin:30px 0 38px; display:flex; flex-direction:column; gap:14px;}
.catering-list li{display:flex; align-items:baseline; gap:14px; font-weight:500; font-size:1.1rem;}
.catering-list li::before{content:''; flex:0 0 7px; height:7px; background:var(--orange); transform:translateY(-2px) rotate(45deg);}
.catering-cta{display:flex; gap:12px; flex-wrap:wrap;}
.catering-art{position:relative; padding:0 0 48px 48px;}
.catering-art::before{content:''; position:absolute; left:0; bottom:0; width:72%; height:78%; background:var(--tile) 0 0 / 32px 32px; border-radius:4px;}
.catering-photos{position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; grid-template-rows:repeat(2, minmax(0, 1fr)); gap:12px; aspect-ratio:1.18/1; padding:10px; background:var(--card); border-radius:12px; box-shadow:0 22px 44px rgba(42,49,39,0.18);}
.catering-photos img{width:100%; height:100%; min-height:0; object-fit:cover; display:block; border-radius:6px;}
.catering-photos .tall{grid-row:span 2;}
@media(max-width:860px){
  .catering{padding:80px 0;}
  .catering .catering-grid{grid-template-columns:1fr;}
  .catering-art{max-width:none; padding:0 0 28px 28px;}
  .catering-photos{aspect-ratio:1/1.05;}
}

/* ---- hours + contact ---- */
.visit{background:var(--paper-2); padding:96px 0; border-top:1px solid var(--line);}
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:34px;}
.card h3{font-size:2.1rem; color:var(--ink); margin-bottom:12px;}
.card .note{color:var(--orange-ink); margin-bottom:16px;}
.open-status{display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--ink);}
.open-status::before{content:''; flex:0 0 9px; height:9px; border-radius:50%; background:var(--ink-soft);}
.open-status.is-open::before{background:#4E8A3E; box-shadow:0 0 0 4px rgba(78,138,62,0.22);}
.open-status.is-closed::before{background:var(--orange);}
.hrow{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:0.98rem;}
.hrow:last-child{border-bottom:none;}
.hrow .day{font-weight:600;}
.hrow .time{font-variant-numeric:tabular-nums;}
.hrow.shut{color:var(--ink-soft);}
.hrow.shut .time{color:var(--orange-ink); font-weight:600; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;}
.crow{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:1rem;}
.crow:last-of-type{border-bottom:none;}
.crow .ic{width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--olive); color:var(--paper); display:flex; align-items:center; justify-content:center;}
.crow .ic svg{width:17px; height:17px;}
.crow a{transition:color .3s var(--ease);}
.crow a:hover{color:var(--orange-ink);}
#contact{display:flex; flex-direction:column;}
.contact-cta{margin-top:auto; padding-top:22px;}
.contact-cta .btn{width:100%;}
@media(max-width:760px){ .visit{padding:72px 0;} .visit-grid{grid-template-columns:1fr;} .card{padding:26px 22px;} }

/* ---- reviews: one row, one card at a time, neighbours just peeking in ---- */
.reviews{background:var(--olive); color:var(--paper); padding:96px 0; overflow:hidden;}
.reviews h2{text-align:center; margin-bottom:14px;}
.reviews .sub{display:table; margin:0 auto 44px; color:rgba(243,235,216,0.85);}
.rev-stage{--card-w:min(620px, calc(100vw - 112px)); --gap:18px; position:relative; width:calc(var(--card-w) + 2 * var(--gap) + 2 * 46px); max-width:100%; margin:0 auto; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  -webkit-mask:linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask:linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);}
.rev-stage::-webkit-scrollbar{display:none;}
.rev-stage.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none; -webkit-user-select:none;}
.rev-stage.is-gliding{scroll-snap-type:none;}
.rev-track{display:flex; gap:var(--gap); width:max-content; padding:0 calc((min(100vw, var(--card-w) + 2 * var(--gap) + 92px) - var(--card-w)) / 2);}
.rev-stage.is-dragging .rev{pointer-events:none;}
.rev{scroll-snap-align:center; -webkit-user-drag:none; flex:0 0 var(--card-w); display:flex; flex-direction:column; height:212px; background:rgba(255,255,255,0.07); border:1px solid var(--line-light); border-radius:12px; padding:26px 30px; transition:background-color .3s var(--ease), border-color .3s var(--ease);}
.rev:hover{background:rgba(255,255,255,0.11); border-color:rgba(243,235,216,0.38);}
.rev .stars{color:var(--paper); letter-spacing:3px; font-size:0.95rem;}
.rev p{margin-top:12px; color:rgba(243,235,216,0.95); font-size:1rem; line-height:1.55; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.rev-foot{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.rev .who{font-weight:600;}
.rev .meta{color:rgba(243,235,216,0.75); font-size:0.66rem;}
.write-review{margin-top:64px; padding-top:54px; border-top:1px solid var(--line-light); text-align:center;}
.write-review h3{font-size:clamp(1.8rem, 4vw, 2.4rem); margin-bottom:12px;}
.write-review p{color:rgba(243,235,216,0.88); margin-bottom:24px;}
@media(max-width:600px){
  .reviews{padding:76px 0;}
  .rev-stage{--card-w:calc(100vw - 88px); --gap:12px; width:100%;}
  .rev-track{padding:0 44px;}
  .rev{height:228px; padding:22px;}
  .rev p{-webkit-line-clamp:4;}
}

/* ---- instagram ---- */
.igfeed{background:var(--paper); padding:96px 0; text-align:center; border-top:1px solid var(--line);}
.igfeed-head h2{color:var(--ink);}
.igfeed-head p{color:var(--orange-ink); margin:14px 0 36px;}
.igfeed-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; max-width:820px; margin:0 auto;}
.igfeed-grid a{display:block; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);}
.igfeed-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease);}
.igfeed-grid a:hover img{transform:scale(1.04);}
.igfeed-btn{margin-top:36px;}
@media(max-width:560px){ .igfeed{padding:76px 0;} .igfeed-grid{grid-template-columns:repeat(2, 1fr); max-width:380px;} }

/* ---- gallery page ---- */
.g-head{padding:64px 0 40px; text-align:center;}
.g-title{container-type:inline-size; padding:0 24px; max-width:1600px; margin:0 auto;}
.g-title h1{font-size:calc(100cqi / 4.4); line-height:0.82; letter-spacing:-0.045em; color:var(--ink); margin:0; white-space:nowrap;}
.g-head .label{color:var(--orange-ink);}
.g-head p{max-width:46ch; margin:28px auto 0; color:var(--ink-soft); font-size:1.05rem;}
/* Pinterest-style: each photo keeps its own shape; more, narrower columns on big screens so no photo is shown bigger than it is */
.g-grid{columns:5 180px; column-gap:14px; padding-bottom:96px;}
.g-item{margin:0 0 14px; break-inside:avoid;}
.g-open{display:block; width:100%; padding:0; border:none; background:var(--paper-2); border-radius:var(--radius); overflow:hidden; cursor:zoom-in;}
.g-open img{display:block; width:100%; height:auto; transition:transform .8s var(--ease);}
.g-open:hover img{transform:scale(1.03);}
.g-cta{background:var(--paper-2); text-align:center; padding:96px 0;}
.g-cta h2{font-size:clamp(2.6rem, 6vw, 4.4rem); color:var(--ink);}
.g-cta p{margin-top:16px; color:var(--ink-soft); font-size:1.05rem;}
.g-cta .hero-cta{justify-content:center;}
.g-lightbox{position:fixed; inset:0; z-index:100; background:rgba(28,20,14,0.92); display:flex; align-items:center; justify-content:center; padding:64px 80px; opacity:1; transition:opacity .3s ease;}
.g-lightbox[hidden]{display:none;}
.g-lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center;}
.g-lightbox img{max-width:min(90vw, 640px); max-height:76vh; width:auto; height:auto; border-radius:var(--radius); display:block;}
.g-lightbox figcaption{margin-top:16px; color:var(--paper); text-align:center;}
.g-lightbox .round-btn{position:absolute; border-color:rgba(243,235,216,0.5); color:var(--paper);}
.g-lightbox .round-btn:hover{background:var(--paper); color:var(--ink);}
.g-close{top:18px; right:18px; font-size:1.5rem;}
.g-prev{left:18px; top:50%; margin-top:-23px;}
.g-next{right:18px; top:50%; margin-top:-23px;}
@media(max-width:620px){ .g-grid{columns:2; column-gap:10px;} .g-item{margin-bottom:10px;} .g-lightbox{padding:72px 12px;} .g-prev, .g-next{top:auto; bottom:18px; margin-top:0;} }

/* ---- about page ---- */
.about{padding:96px 0;}
.about-head{text-align:center; max-width:640px; margin:0 auto 44px;}
.about-head .label{color:var(--orange-ink);}
.about-head h1{color:var(--ink); margin-top:14px;}
.about-photo{max-width:560px; margin:0 auto 44px; border-radius:12px; overflow:hidden; box-shadow:0 18px 40px rgba(42,49,39,0.18);}
.about-photo img{width:100%; display:block;}
.about-copy{max-width:640px; margin:0 auto; text-align:center;}
.about-copy p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:18px;}
.about-copy .label{color:var(--orange-ink);}

/* ---- footer ---- */
footer{background:var(--olive); color:var(--paper); text-align:center;}
footer .inner{padding-top:56px; padding-bottom:30px;}
.flogo{width:64px; height:64px; border-radius:50%; background:#fff; margin:0 auto 16px; display:block;}
.ftag{font-size:1.7rem; margin-bottom:8px;}
.faddr{font-size:0.96rem; color:rgba(243,235,216,0.88); margin-bottom:22px;}
.fsoc{display:flex; justify-content:center; gap:12px; margin-bottom:24px;}
.fsoc a{width:42px; height:42px; border-radius:50%; border:1px solid rgba(243,235,216,0.4); display:flex; align-items:center; justify-content:center; transition:background-color .3s var(--ease), border-color .3s var(--ease);}
.fsoc a:hover{background:rgba(243,235,216,0.12); border-color:var(--paper);}
.fsoc svg{width:17px; height:17px;}
.fine{color:rgba(243,235,216,0.8); font-size:0.66rem;}
.foot-fine{margin-top:34px; padding-top:22px; border-top:1px solid var(--line-light);}
.credit{display:inline-flex; align-items:center; gap:10px; color:rgba(243,235,216,0.85); font-size:0.66rem; transition:color .3s var(--ease);}
.credit:hover{color:var(--paper);}
.credit img{height:20px; width:auto; display:block;}

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