:root{--green:#12372f;--deep:#071d18;--cream:#f1eadc;--paper:#fffdf8;--gold:#c89b50;--ink:#20251f;--muted:#687069;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",Arial,sans}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}
.site-header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:13px clamp(18px,5vw,72px);color:#fff;background:linear-gradient(rgba(4,17,13,.88),transparent);transition:.3s}.site-header.scrolled{background:rgba(7,29,24,.97);box-shadow:0 12px 35px #0004}.brand img{width:82px;height:82px;object-fit:contain;filter:invert(1)}.main-nav{display:flex;align-items:center;gap:23px;font-size:13px;font-weight:700}.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:26px;height:2px;margin:5px;background:#fff}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:51px;padding:0 25px;border:1px solid var(--green);background:var(--green);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:.25s}.button:hover{transform:translateY(-2px);background:var(--deep)}.nav-button{min-height:42px}.button-outline{background:rgba(0,0,0,.12);border-color:rgba(255,255,255,.58)}.button-light{background:var(--cream);border-color:var(--cream);color:var(--green)}
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;color:#fff;background:url('assets/front.jpeg') center/cover}.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,11,.68) 0%,rgba(3,15,11,.34) 55%,rgba(3,15,11,.42) 100%),linear-gradient(rgba(3,15,11,.12),rgba(3,15,11,.72)),radial-gradient(circle at center,transparent 15%,#0006)}.hero-content{position:relative;z-index:2;max-width:1000px;padding:125px 24px 70px;text-align:center}.hero-logo{width:155px;margin:0 auto 18px;filter:invert(1)}.eyebrow{margin:0 0 16px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.23em;text-transform:uppercase}.hero h1,h2,h3{font-family:var(--serif)}.hero h1{margin:0;font-size:clamp(57px,8vw,108px);line-height:.9;letter-spacing:-.04em}.hero-intro{max-width:760px;margin:27px auto 0;font-size:19px;color:#fffffff0}.actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:34px}.actions.left{justify-content:flex-start}
.section{padding:clamp(82px,9vw,140px) clamp(24px,7vw,110px)}.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,120px);background:var(--cream);align-items:center}.story h2,.section-heading h2,.food h2,.events h2,.contact h2{margin:0;color:var(--green);font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.03em}.story .lead{font:600 clamp(28px,3vw,42px)/1.16 var(--serif);color:var(--green)}.story-text p:last-child{color:var(--muted);font-size:17px}
.experience-grid{display:grid;grid-template-columns:repeat(3,1fr)}.experience-grid article{position:relative;min-height:650px;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden}.experience-grid article:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,21,17,.96),rgba(5,21,17,.06) 68%)}.experience-grid article>div{position:relative;padding:42px;color:#fff}.experience-grid h3{margin:0;font-size:47px;line-height:.96}.experience-grid p:not(.eyebrow){color:#ffffffc9}.experience-grid a{color:var(--gold);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.transformation{background:#0b1713;color:#fff}.transformation .section-heading{max-width:820px;margin-bottom:65px}.transformation h2{color:#fff}.transformation .section-heading>p:last-child{color:#ffffffa8}.comparison-list{display:grid;gap:90px}.comparison{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.6fr);gap:48px;align-items:center}.comparison.reverse .compare-images{order:2}.compare-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-images figure{position:relative;margin:0;height:560px;overflow:hidden;background:#071d18}.compare-images img{width:100%;height:100%;object-fit:contain}.compare-images span{position:absolute;z-index:2;top:17px;left:17px;padding:7px 11px;background:#071d18dd;color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.compare-copy h3{margin:0;color:#fff;font-size:45px;line-height:1}.compare-copy p:last-child{color:#ffffffa8}
.food,.events{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,110px);align-items:center}.food-image img,.events-image img{width:100%;box-shadow:0 28px 70px #12372f33}.food-copy p:not(.eyebrow),.events-copy p:not(.eyebrow){color:var(--muted);font-size:18px}.text-link{font-weight:700;color:var(--green)}
.sundays{position:relative;min-height:760px;display:grid;place-items:center;padding:80px 24px;background-position:center;background-size:cover;color:#fff;text-align:center}.section-overlay{position:absolute;inset:0;background:linear-gradient(#071d1875,#071d18c9)}.banner-content{position:relative;max-width:820px}.banner-content h2{margin:0;font-size:clamp(58px,8vw,104px);line-height:.94}.banner-content p:not(.eyebrow){font-size:20px;color:#ffffffd7}.events{background:var(--cream)}
.gallery{background:#f8f4eb}.centered{text-align:center;margin:0 auto 50px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:330px;gap:13px}.gallery-grid img{width:100%;height:100%;object-fit:cover}.gallery-grid .wide{grid-column:span 2}
.contact{display:grid;grid-template-columns:1.05fr .95fr;min-height:800px}.contact-photo{background:url('assets/bear-glass.jpeg') center/cover}.contact-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(65px,8vw,120px);background:var(--green);color:#fff}.contact-panel>img{width:135px;filter:invert(1);margin-bottom:20px}.contact h2{color:#fff}.contact-details{margin:30px 0}.contact-details a,.contact-details div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #ffffff2e}.contact-details span{color:#ffffff8f}.contact-details strong{text-align:right}
footer{padding:55px 25px 35px;background:var(--deep);color:#fff;text-align:center}footer img{width:105px;margin:0 auto 18px;filter:invert(1)}footer p,footer small{color:#ffffff80}#toast{position:fixed;right:20px;bottom:20px;z-index:80;padding:15px 18px;background:var(--deep);color:#fff;opacity:0;transform:translateY(10px);transition:.25s}#toast.show{opacity:1;transform:none}
@media(max-width:1020px){.menu-toggle{display:block}.main-nav{display:none;position:fixed;top:88px;left:14px;right:14px;padding:24px;background:var(--deep);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.story,.comparison,.food,.events,.contact{grid-template-columns:1fr}.comparison.reverse .compare-images{order:0}.experience-grid{grid-template-columns:1fr}.experience-grid article{min-height:560px}.compare-images figure{height:500px}.contact-photo{min-height:650px}}
@media(max-width:650px){.brand img{width:66px;height:66px}.hero-logo{width:125px}.hero h1{font-size:58px}.hero-intro{font-size:17px}.actions{flex-direction:column}.button{width:100%}.compare-images{grid-template-columns:1fr}.compare-images figure{height:430px}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:350px}.gallery-grid .wide{grid-column:auto}.contact-details a,.contact-details div{flex-direction:column;gap:3px}.contact-details strong{text-align:left}}
@media(prefers-reduced-motion:reduce){.hero video{display:none}}

.food-details{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--deep);color:#fff;border-top:1px solid #c89b5040;border-bottom:1px solid #c89b5040}
.food-details>div{padding:52px clamp(28px,5vw,72px);border-right:1px solid #ffffff1f}
.food-details>div:last-child{border-right:0}
.food-details h3{margin:0 0 12px;font-size:38px;line-height:1;color:#fff}
.food-details p:not(.eyebrow){margin:0;color:#ffffffb5}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.contact-actions .button{flex:1 1 150px}
@media(max-width:800px){.food-details{grid-template-columns:1fr}.food-details>div{border-right:0;border-bottom:1px solid #ffffff1f}.food-details>div:last-child{border-bottom:0}}

.coffee-shop{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(45px,7vw,100px);align-items:center;background:var(--cream)}
.coffee-shop h2{margin:0;color:var(--green);font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.03em}
.coffee-shop .coffee-lead{font:600 clamp(26px,3vw,39px)/1.14 var(--serif);color:var(--green);margin:28px 0 16px}
.coffee-shop .coffee-copy>p:not(.eyebrow):not(.coffee-lead):not(.coffee-opening){color:var(--muted);font-size:17px}
.coffee-opening{margin-top:24px;color:var(--green);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.coffee-visuals{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:340px 250px;gap:12px}
.coffee-visuals figure{position:relative;margin:0;overflow:hidden;background:#ddd3c1}
.coffee-visuals img{width:100%;height:100%;object-fit:cover}
.coffee-before{grid-row:span 2}.coffee-after{grid-column:2}.coffee-detail{grid-column:2}
.coffee-visuals span{position:absolute;z-index:2;top:16px;left:16px;padding:7px 11px;background:#071d18dd;color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:1020px){.coffee-shop{grid-template-columns:1fr}.coffee-visuals{grid-template-rows:420px 280px}}
@media(max-width:650px){.coffee-visuals{grid-template-columns:1fr;grid-template-rows:380px 300px 230px}.coffee-before,.coffee-after,.coffee-detail{grid-column:auto;grid-row:auto}}


/* Final September refinements */
.comparison .compare-images {
  align-items: stretch;
}
.comparison .compare-images figure {
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.comparison .compare-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Homepage menu cover: deliberately compact, enlarges on hover/tap */
.menu-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}
.menu-preview .zoomable-menu {
  width: min(48%, 360px) !important;
  max-height: 520px;
  object-fit: contain !important;
  cursor: zoom-in;
  transition: transform .28s ease, box-shadow .28s ease;
  transform-origin: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  position: relative;
  z-index: 2;
}
@media (hover:hover) and (pointer:fine) {
  .menu-preview .zoomable-menu:hover,
  .menu-preview .zoomable-menu:focus {
    transform: scale(1.8);
    z-index: 20;
    box-shadow: 0 26px 60px rgba(0,0,0,.28);
    outline: none;
  }
}
.zoom-hint {
  position:absolute;
  bottom: 1rem;
  left:50%;
  transform:translateX(-50%);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.7;
  white-space:nowrap;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(5,20,16,.92);
  z-index: 9999;
  padding: 3rem 1rem 1rem;
}
.image-lightbox.open { display:grid; }
.image-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
}
.lightbox-close {
  position:absolute;
  top:14px;
  right:20px;
  border:0;
  background:transparent;
  color:white;
  font-size:2.3rem;
  cursor:pointer;
}

/* Layered event cards */
.event-fan {
  position: relative;
  min-height: 540px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible !important;
}
.event-fan .event-card {
  position:absolute;
  width:min(68%, 430px);
  max-height:520px;
  object-fit:cover;
  box-shadow:0 22px 44px rgba(0,0,0,.2);
  transition:transform .25s ease;
}
.event-card-front { z-index:3; transform:rotate(0deg); }
.event-card-left { z-index:1; transform:translateX(-22%) rotate(-8deg) scale(.9); }
.event-card-right { z-index:2; transform:translateX(22%) rotate(8deg) scale(.9); }
@media (hover:hover) {
  .event-fan:hover .event-card-left { transform:translateX(-30%) rotate(-10deg) scale(.92); }
  .event-fan:hover .event-card-right { transform:translateX(30%) rotate(10deg) scale(.92); }
}

/* Gallery: fill the full width cleanly with no dead space */
.gallery-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:260px !important;
  gap:12px !important;
}
.gallery-grid img,
.gallery-grid img.wide {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  grid-column:auto !important;
  grid-row:auto !important;
}
.gallery-grid img:nth-child(1),
.gallery-grid img:nth-child(6) {
  grid-column:span 2 !important;
}

@media (max-width: 800px) {
  .comparison .compare-images figure { aspect-ratio: 3 / 4; }
  .menu-preview .zoomable-menu { width:min(62%,300px) !important; }
  .event-fan { min-height:430px; }
  .event-fan .event-card { width:min(68%,330px); max-height:400px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:190px !important; }
  .gallery-grid img:nth-child(1), .gallery-grid img:nth-child(6) { grid-column:span 2 !important; }
}
@media (max-width: 520px) {
  .menu-preview .zoomable-menu { width:min(78%,280px) !important; }
  .gallery-grid { grid-template-columns:1fr !important; grid-auto-rows:240px !important; }
  .gallery-grid img:nth-child(1), .gallery-grid img:nth-child(6) { grid-column:auto !important; }
}

/* Correction pass — September */
/* Keep every transformation pair exactly the same size */
.compare-images { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
.compare-images figure { width:100%; aspect-ratio:3/4; height:auto !important; min-height:0 !important; overflow:hidden; }
.compare-images figure img { width:100%; height:100%; object-fit:cover; display:block; }

/* Main and children's menus: compact until hover/tap */
.menus { background:#f8f4eb; }
.menu-gallery { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:start; }
.menu-card { margin:0; text-align:center; position:relative; }
.menu-card figcaption { font:600 clamp(28px,3vw,42px)/1 var(--serif); color:var(--green); margin-bottom:20px; }
.menu-card .zoomable-menu { width:min(52%,360px); max-height:500px; object-fit:contain; cursor:zoom-in; box-shadow:0 15px 36px rgba(0,0,0,.14); transition:transform .28s ease, box-shadow .28s ease; transform-origin:center; position:relative; z-index:2; }
@media (hover:hover) and (pointer:fine) {
  .menu-card .zoomable-menu:hover,.menu-card .zoomable-menu:focus { transform:scale(1.7); z-index:30; box-shadow:0 28px 70px rgba(0,0,0,.3); outline:none; }
}

/* Real event cards behind Quiz Night */
.event-poster { aspect-ratio:4/5; background:linear-gradient(155deg,#0a2b24,#071b17); color:#f4e9d2; border:1px solid #c99a50; padding:38px 28px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.event-poster span { color:#d7a64d; font-size:11px; font-weight:800; letter-spacing:.18em; }
.event-poster strong { font:700 clamp(42px,5vw,68px)/.83 var(--serif); margin:18px 0 25px; }
.event-poster small { border-top:1px solid #c99a5066; padding-top:18px; width:100%; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }

/* Coffee shop: show the whole real building, not a crop of the doors */
.coffee-visuals { grid-template-columns:1.15fr .85fr; grid-template-rows:310px 310px; }
.coffee-before { grid-row:span 2; }
.coffee-visuals .coffee-before img { object-fit:contain; background:#eee8dc; }
.coffee-visuals .coffee-after img,.coffee-visuals .coffee-detail img { object-fit:cover; }

@media(max-width:800px){
  .menu-gallery{grid-template-columns:1fr;}
  .menu-card .zoomable-menu{width:min(68%,320px);}
  .compare-images{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .compare-images{grid-template-columns:1fr 1fr; gap:7px;}
  .menu-card .zoomable-menu{width:min(82%,300px);}
}

/* Final verified correction pass */
/* Large matching Before / After pairs */
.comparison{grid-template-columns:minmax(0,1.9fr) minmax(260px,.55fr);gap:56px}
.compare-images{gap:16px}
.compare-images figure{aspect-ratio:3/4 !important;width:100%;min-height:620px !important;height:620px !important}
.compare-images figure img{width:100%;height:100%;object-fit:cover !important}
@media(max-width:1180px){.compare-images figure{min-height:560px !important;height:560px !important}}
@media(max-width:1020px){.compare-images figure{min-height:540px !important;height:540px !important}}
@media(max-width:650px){.compare-images{grid-template-columns:1fr 1fr !important}.compare-images figure{min-height:360px !important;height:360px !important}}

/* Exact 8 menu pages supplied by the user */
.menu-gallery{max-width:1240px !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:34px 28px !important;align-items:start}
.menu-card{margin:0 !important;text-align:center;overflow:visible}
.menu-card .zoomable-menu{width:100% !important;max-width:245px !important;max-height:none !important;height:auto !important;object-fit:contain !important;cursor:zoom-in;box-shadow:0 14px 34px rgba(0,0,0,.13);transition:transform .25s ease,box-shadow .25s ease;position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){.menu-card .zoomable-menu:hover,.menu-card .zoomable-menu:focus{transform:scale(1.7) !important;z-index:50;box-shadow:0 30px 80px rgba(0,0,0,.32);outline:none}}
@media(max-width:1000px){.menu-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.menu-card .zoomable-menu{max-width:270px !important}}
@media(max-width:560px){.menu-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px 12px !important}.menu-card .zoomable-menu{max-width:100% !important}}

/* Coffee shop is not finished: show real progression only */
.coffee-visuals{grid-template-columns:1.15fr .85fr;grid-template-rows:310px 310px}
.coffee-before{grid-row:span 2}
.coffee-visuals .coffee-before img{object-fit:contain !important;background:#eee8dc}
.coffee-visuals .coffee-after img,.coffee-visuals .coffee-detail img{object-fit:cover !important}

/* Make the real menu cover the homepage food image without over-cropping */
.food-image{display:flex;align-items:center;justify-content:center}
.food-image img{width:min(82%,620px) !important;max-height:760px;object-fit:contain !important;box-shadow:0 28px 70px #12372f33}