/* Taverna Tradicionale KARDHASHI · concept by KERA Tech Solutions
   Rebuilt on the Kirkstall Bridge Inn system: same spacing scale, type scale, grid and components;
   palette shifted from charcoal + brass to warm espresso + terracotta. */

:root {
  --vh: 1vh;
  --wrapperWidth: 92%;
  --mobileHeader: 5.1875rem;
  --space8: .5rem; --space12: .75rem; --space15: .9375rem; --space16: 1rem; --space18: 1.125rem; --space20: 1.25rem;
  --space25: 1.5625rem; --space30: 1.125rem; --space36: 2.25rem; --space40: 2.5rem; --space50: 2.5rem; --space54: 1.25rem;
  --space78: 3.25rem; --space90: 5rem; --space140: 8.75rem; --space170: 6.875rem;
  --fs10: .625rem; --fs12: .75rem; --fs14: .875rem; --fs16: .875rem; --fs18: .875rem; --fsm18: 1.125rem; --fs21: 1.3125rem;
  --fs28: 1.75rem; --fs40: 2.375rem; --fs50: 2.375rem; --fs60: 3.25rem; --fs140: 3.25rem;

  --dark: #261C18;          /* espresso: panels, footer (was #1F1F1F) */
  --dark-2: #3A2B25;
  --light: #FFFFFF;
  --bg: #FFFFFF;
  --section: #F3EDE7;       /* warm light band (was #F0F0F0) */
  --loading: #F3EDE7;
  --text: #261C18;
  --muted: #5E504A;
  --accent: #B0623A;        /* terracotta (was brass #AD986E) */
  --accent-light: #D9946A;  /* accent on dark panels */
  --hero-overlay: rgba(24, 14, 9, .5);
  --input-border: rgba(38, 28, 24, .5);
  --ease-carousel: cubic-bezier(.32, .94, .6, 1);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 60em) {
  :root {
    --space30: 1.875rem; --space50: 3.125rem; --space54: 3.375rem; --space78: 4.875rem; --space90: 5.625rem; --space170: 10.625rem;
    --fs16: 1rem; --fs18: 1.125rem; --fs40: 2.5rem; --fs50: 3.125rem; --fs60: 3.75rem; --fs140: 4.5rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sans); font-size: 1em; line-height: 1; background: var(--bg); color: var(--text); font-weight: 400; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; line-height: 1.5; background: var(--bg); overflow-x: hidden; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--dark); color: #fff; padding: 12px 18px; font-size: var(--fs14); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

.wrap { max-width: 1012px; width: var(--wrapperWidth); margin: 0 auto; position: relative; }
.wrap--wide { max-width: 1084px; }

/* Type */
.eyebrow { font-size: var(--fs14); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space15); font-weight: 400; }
.title { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin-bottom: var(--space36); color: var(--text); }
.title--40 { font-size: var(--fs40); }
.title--50 { font-size: var(--fs50); }
.body { font-size: var(--fs16); line-height: 1.6; }
.body p + p { margin-top: 1em; }
.body strong { font-weight: 500; }
.split-line { overflow: visible; }

/* Monogram (typeset, no logo file) */
.mono { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; color: #fff; }
.mono::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid currentColor; transform: rotate(45deg); border-radius: 2px; }
.mono::after { content: ""; position: absolute; inset: 14px; border: .75px solid currentColor; transform: rotate(45deg); opacity: .55; }
.mono__k { position: relative; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; transform: translateY(-1px); }
@media (min-width: 60em) { .mono { width: 80px; height: 80px; } .mono::before { inset: 13px; } .mono::after { inset: 20px; } .mono__k { font-size: 36px; } }

/* Buttons (u-button) */
.btn { display: inline-block; position: relative; padding: var(--space15) var(--space30); border: 0; border-radius: 26px; background: var(--accent); color: #fff; font-size: var(--fs12); letter-spacing: .2em; line-height: 1; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .3s ease, background .3s ease; font-weight: 400; }
.btn:hover { background: var(--dark); color: #fff; }
.btn__inner { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; }
.btn .arrow { display: block; margin-left: var(--space15); transition: transform 1s ease; flex-shrink: 0; }
.btn:hover .arrow { transform: translateX(5px); }
.btn--light { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.btn--light:hover { background: #fff; color: var(--dark); }

/* ---------- Fixed brand tab (desktop) ---------- */
.brandtab { display: none; }
@media (min-width: 60em) {
  .brandtab { display: block; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 200; transition: opacity .5s ease-in-out, box-shadow .4s ease, transform .8s ease, top .8s ease; }
  .brandtab.is-active { top: 0; transform: translateY(0); box-shadow: 0 0 10px -5px rgba(0,0,0,.47); }
  .brandtab__link { display: flex; align-items: stretch; width: 360px; text-decoration: none; color: var(--text); background: #fff; }
  .brandtab .mono { background: var(--dark); width: 104px; height: 104px; flex-shrink: 0; }
  .brandtab .mono::before { inset: 22px; } .brandtab .mono::after { inset: 29px; }
  .brandtab__title { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; text-transform: uppercase; letter-spacing: .23em; line-height: 1.1; font-size: var(--fs18); padding: 0 var(--space20) 0 calc(var(--space20) + .23em); font-weight: 400; }
  .brandtab__title small { display: block; font-size: 9px; letter-spacing: .32em; margin-bottom: 7px; color: var(--accent); }
}

/* ---------- Book / Reserve tab ---------- */
.book { position: relative; z-index: 200; transition: opacity .5s ease-in-out; }
.book__link { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 83px; min-width: 83px; padding: var(--space15); background: var(--accent); color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .26em; font-size: 7px; transition: background .5s ease, transform .8s ease, top .8s ease; }
.book__link:hover { background: var(--dark); }
.book__link svg { display: block; max-width: 28px; height: auto; margin-bottom: var(--space8); }
@media (max-width: 59.99em) { .book { position: fixed; top: 0; right: 83px; } }
@media (min-width: 60em) {
  .book__link { position: fixed; right: 0; top: 50%; transform: translateY(-50%); padding: var(--space18) var(--space18) var(--space18) calc(var(--space18) + .26em); font-size: var(--fs10); min-width: 118px; }
  .book__link svg { max-width: none; margin-bottom: var(--space18); }
  .book.is-active .book__link { top: 0; transform: translateY(0); }
}

/* ---------- Header / nav ---------- */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 190; }
.header__inner { display: flex; justify-content: space-between; align-items: center; position: relative; }
.header__brand { display: flex; align-items: stretch; text-decoration: none; color: var(--text); background: #fff; position: relative; z-index: 200; height: 83px; flex: 1; max-width: calc(100% - 166px); box-shadow: 0 0 10px -5px rgba(0,0,0,.4); }
.header__brand .mono { background: var(--dark); width: 83px; height: 83px; flex-shrink: 0; }
.header__brand .mono::before { inset: 19px; } .header__brand .mono::after { inset: 25px; }
.header__title { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space12) 0 var(--space15); text-transform: uppercase; letter-spacing: .2em; font-size: var(--fs14); line-height: 1.1; min-width: 0; }
.header__title small { font-size: 8px; letter-spacing: .26em; color: var(--accent); margin-bottom: 5px; line-height: 1.35; }
.burger { position: relative; z-index: 200; width: 83px; height: 83px; border: 0; padding: 0; margin: 0; background: #fff; cursor: pointer; flex-shrink: 0; margin-left: 83px; }
.burger__icon, .burger__icon::before, .burger__icon::after { display: block; width: 29px; height: 1px; background: var(--dark); transition: background-color .3s, transform .3s; }
.burger__icon { position: relative; margin: auto; }
.burger__icon::before, .burger__icon::after { content: ""; position: absolute; left: 0; }
.burger__icon::before { top: -10px; } .burger__icon::after { top: 10px; }
.burger[aria-expanded="true"] .burger__icon { background: transparent; }
.burger[aria-expanded="true"] .burger__icon::before { transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__icon::after { transform: translateY(-10px) rotate(-45deg); }

.nav { display: flex; align-items: center; }
.nav__inner { display: flex; align-items: center; }
.nav__list { display: flex; flex-direction: column; margin: 0 0 var(--space78); }
.nav__link { display: inline-block; padding: var(--space8) 0; color: #fff; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: var(--fs28); }
.nav__link span { display: block; position: relative; }
.nav__link span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 100% 0; transition: transform .3s ease; }
.nav__link:hover span::before, .nav__link:focus-visible span::before { transform: scaleX(1); transform-origin: 0 0; }
.nav__social { display: flex; flex-direction: column; }
.nav__social-link { display: flex; align-items: center; gap: var(--space12); color: #fff; text-decoration: none; padding: var(--space12) 0; font-size: var(--fs16); }
.nav__social-link svg { width: 26px; height: 26px; }
.nav__flourish { position: absolute; right: -40px; bottom: var(--space16); color: var(--accent-light); opacity: .22; pointer-events: none; }
.lang { display: flex; align-items: center; gap: 6px; color: #fff; margin-bottom: var(--space30); }
.lang__btn { background: none; border: 0; padding: 6px 4px; cursor: pointer; font-size: var(--fs14); letter-spacing: .2em; color: rgba(255,255,255,.6); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.lang__btn[aria-pressed="true"] { color: #fff; border-bottom-color: currentColor; }
.lang__btn:hover { color: #fff; }
.lang__sep { opacity: .4; font-size: var(--fs12); }

@media (min-width: 30em) { .nav__link { font-size: var(--fs50); } }
@media (max-width: 59.99em) {
  .nav { position: fixed; inset: 0; background: var(--dark); align-items: flex-start; justify-content: flex-end; flex-direction: column; transform: translateX(-100%); transition: transform .3s ease; overflow: auto; visibility: hidden; }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__inner { display: block; width: 100%; padding: calc(var(--mobileHeader) + 40px) var(--space40) var(--space40); position: relative; overflow: hidden; }
}
@media (min-width: 60em) {
  .header { position: absolute; top: var(--space50); padding: 0 var(--space30); }
  .header__inner { justify-content: flex-end; }
  .header__brand, .burger { display: none; }
  .nav__list { flex-direction: row; margin: 0 var(--space30); }
  .nav__link { display: block; padding: var(--space8); margin-left: var(--space50); font-family: var(--sans); font-weight: 400; font-size: var(--fs14); }
  .nav__link span::before { height: 1px; bottom: -3px; }
  .nav__flourish { display: none; }
  .lang { margin: 0 var(--space20) 0 var(--space20); }
  .lang__btn { font-size: var(--fs12); }
  .nav__social { flex-direction: row; }
  .nav__social-link { padding: var(--space8); }
  .nav__social-link svg { width: 16px; height: 16px; }
  .nav__social-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Main fade (loader hands over to it) ---------- */
.js .main, .js .footer, .js .header, .js .brandtab, .js .book { opacity: 0; }
.js .main, .js .footer, .js .header { transition: opacity .5s ease-in-out; }
.js.is-ready .main, .js.is-ready .footer, .js.is-ready .header, .js.is-ready .brandtab, .js.is-ready .book { opacity: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(var(--vh) * 100); min-height: 560px; overflow: hidden; background: var(--dark); color: #fff; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); z-index: 10; pointer-events: none; }
.hero__slide { position: absolute; inset: 0; opacity: 0; }
.hero__slide.is-on { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hero__title { position: absolute; left: 4%; bottom: var(--space30); width: var(--wrapperWidth); max-width: 520px; line-height: 1; }
.hero__h { font-family: var(--serif); font-weight: 700; font-size: var(--fs60); line-height: 1; color: #fff; text-wrap: balance; }
@media (min-width: 60em) {
  .hero { height: 100vh; }
  .hero__title { bottom: auto; top: 50%; left: 360px; transform: translateY(-50%); width: auto; max-width: 800px; margin: 0 var(--space140) 0 clamp(var(--space20), 5vw, var(--space90)); }
}
@media (max-width: 59.99em) { .hero__title { bottom: 12vh; } }

/* ---------- Text + image (about / follow) ---------- */
.tai { overflow: hidden; padding-bottom: var(--space170); }
.tai__grid { display: grid; grid-template-columns: 1fr; gap: 1em; }
.tai__col { position: relative; }
.tai__intro { margin: 0 var(--space90) var(--space50) var(--space50); }
.tai__actions { margin: 0 0 var(--space50) 0; }
.tai__col--media { display: grid; grid-template-columns: 4fr 2fr; gap: var(--space12); margin: 0 var(--space12); }
.tai__img--large { position: relative; z-index: 10; }
.tai__img--large img { width: 100%; height: auto; }
.tai__img--small { position: absolute; right: 0; bottom: var(--space25); width: 168px; z-index: 15; }
.tai__img--small img { width: 100%; height: auto; }
.tai__flourish { position: absolute; top: var(--space25); right: var(--space25); width: 134px; height: auto; z-index: 1; color: var(--accent); opacity: .16; }
.tai--left .tai__col--text { order: 2; }
.tai--left .tai__col--media { order: 1; margin-bottom: 170px; grid-template-columns: 1fr 7fr; grid-template-areas: "blank image"; }
.tai--left .tai__img--large { grid-area: image; }
.tai--left .tai__img--small { right: auto; left: 0; bottom: 0; transform: translate(-5%, 60%); }
.tai--left .tai__flourish { top: auto; bottom: -100px; left: 120px; right: auto; transform: rotate(96deg); }
@media (min-width: 48em) { .tai__img--small { width: 35vw; } }
@media (min-width: 60em) {
  .tai__grid { grid-template-columns: repeat(2, 1fr); }
  .tai--right .tai__col--text { order: 1; } .tai--right .tai__col--media { order: 2; }
  .tai__col--text { margin-top: var(--space78); margin-right: var(--space25); }
  .tai__col--media { grid-template-columns: 5fr 1fr; margin: 0; }
  .tai__img--large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
  .tai__img--small { width: clamp(168px, 25vw, 260px); transform: translateX(25%); }
  .tai__flourish { width: 200px; }
  .tai--left .tai__col--text { order: 2; }
  .tai--left .tai__col--media { order: 1; margin-bottom: 0; grid-template-columns: 7fr 1fr; grid-template-areas: "image blank"; min-height: 386px; }
  .tai--left .tai__img--small { transform: translate(-25%, 50%); }
  .tai--left .tai__flourish { bottom: -140px; }
  #story .tai__col--media { min-height: 560px; }
}

/* ---------- Menus ---------- */
.menus { margin-bottom: var(--space90); }
.menus__inner { max-width: 700px; }
@media (min-width: 60em) { .menus__inner { margin: 0 var(--space90) var(--space50) var(--space50); } }
.menus__actions { display: flex; flex-wrap: wrap; }
.menus__actions .btn { display: flex; margin: 0 var(--space12) var(--space12) 0; }

/* Menu sheet (opens from the pills) */
.sheet { position: fixed; inset: 0; z-index: 290; display: flex; justify-content: flex-end; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(24, 14, 9, .55); opacity: 0; transition: opacity .45s ease; }
.sheet__panel { position: relative; width: min(620px, 100%); height: 100%; background: #fff; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .6s var(--ease-carousel); }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translateX(0); }
.sheet__head { position: sticky; top: 0; z-index: 2; background: #fff; padding: var(--space40) var(--space40) var(--space20); border-bottom: 1px solid #eee5de; }
.sheet__head .eyebrow, .sheet__head .title { padding-right: 60px; }
.sheet__head .title { margin: 0 0 var(--space20); }
.sheet__close { position: absolute; top: var(--space30); right: var(--space30); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--text); background: #fff; cursor: pointer; transition: background .3s, color .3s; }
.sheet__close span, .sheet__close span::before { position: absolute; left: 50%; top: 50%; width: 20px; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.sheet__close span::before { content: ""; transform: translate(-50%, -50%) rotate(90deg); }
.sheet__close:hover { background: var(--dark); color: #fff; }
.sheet__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__tab { border: 1px solid #dccfc6; background: #fff; border-radius: 20px; padding: 8px 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.sheet__tab:hover { border-color: var(--accent); color: var(--accent); }
.sheet__tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.sheet__body { padding: var(--space30) var(--space40) var(--space50); }
.mcat { scroll-margin-top: 220px; }
.mcat + .mcat { margin-top: var(--space50); }
.mcat__h { font-family: var(--serif); font-weight: 700; font-size: var(--fs28); line-height: 1.2; margin: var(--space30) 0 var(--space15); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mcat__h:first-child { margin-top: 0; }
.mcat__h [lang] { order: 2; font-family: var(--sans); font-weight: 400; font-size: var(--fs12); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
html[lang="en"] .mcat__h [lang="en"], html[lang="sq"] .mcat__h [lang="sq"] { order: 1; font-family: var(--serif); font-weight: 700; font-size: var(--fs28); letter-spacing: 0; text-transform: none; color: var(--text); }
.mlist li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px dotted #d8c9be; }
.mi { display: flex; flex-direction: column; gap: 3px; }
.mi [lang] { order: 2; font-size: 12px; color: var(--muted); font-weight: 300; }
html[lang="en"] .mi [lang="en"], html[lang="sq"] .mi [lang="sq"] { order: 1; font-size: var(--fs16); color: var(--text); font-weight: 400; }
.mp { white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.mp::after, .cur-after::after { content: " ALL"; font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
html[lang="sq"] .mp::after { content: " Lekë"; }
.sheet__note { margin: var(--space40) 0 var(--space25); font-size: var(--fs14); line-height: 1.6; color: var(--muted); }
/* no-JS: the menu simply sits in the page */
html:not(.js) .sheet { position: static; display: block; }
html:not(.js) .sheet[hidden] { display: block !important; }
html:not(.js) .sheet__scrim, html:not(.js) .sheet__close, html:not(.js) .sheet__tabs { display: none; }
html:not(.js) .sheet__panel { transform: none; width: auto; max-width: 1012px; margin: var(--space50) auto 0; height: auto; }
@media (max-width: 47.99em) { .sheet__head { padding: var(--space30) var(--space20) var(--space15); } .sheet__body { padding: var(--space25) var(--space20) var(--space40); } .sheet__close { top: var(--space20); right: var(--space20); width: 44px; height: 44px; } }

/* ---------- Gallery (free drag) ---------- */
.gallery { position: relative; overflow: hidden; margin-bottom: var(--space40); user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (min-width: 60em) { .gallery__viewport { cursor: none; } }
.gallery__cursor { position: fixed; top: 0; left: 0; z-index: 210; pointer-events: none; opacity: 0; transition: opacity .3s ease-in-out; display: none; color: var(--dark); }
.gallery__cursor .tri { fill: var(--accent-light); }
@media (hover: hover) and (min-width: 60em) { .gallery__cursor { display: block; } .gallery.is-hover .gallery__cursor { opacity: 1; } }
.gallery__title { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; pointer-events: none; font-size: var(--fs140); color: rgba(38, 28, 24, .5); font-family: var(--serif); font-weight: 700; z-index: 150; transform: translateY(-50%); opacity: 0; transition: opacity .5s ease-in-out; }
.gallery.is-active .gallery__title { opacity: 1; }
.gallery__viewport { overflow: visible; touch-action: pan-y; }
.gallery__viewport:focus-visible { outline-offset: 8px; }
.gallery__track { display: flex; align-items: center; gap: 10px; width: max-content; will-change: transform; }
.gallery__item img { width: auto; max-width: 85vw; height: auto; max-height: 62vw; transition: transform .5s ease, opacity .4s ease; pointer-events: none; }
.gallery.is-active .gallery__item img { transform: scale(.8); opacity: .8; }
@media (min-width: 60em) {
  .gallery__track { gap: 40px; }
  .gallery__item img { max-width: none; max-height: 400px; height: 400px; }
  .gallery__item--condensed img { max-height: 320px; height: 320px; }
}

/* ---------- Booking ---------- */
.booking { position: relative; padding: var(--space90) 0; overflow: hidden; }
.booking__bg { position: absolute; inset: -20px; background: var(--dark) url("../img/bookbg-1600.webp") center / cover no-repeat; transform: scale(1.04); }
@media (max-width: 47.99em) { .booking__bg { background-image: url("../img/bookbg-800.webp"); } }
.booking__grid { position: relative; display: grid; grid-template-columns: 1fr; background: #fff; padding: var(--space12); }
.booking__img img { width: 100%; height: 260px; object-fit: cover; object-position: 40% 50%; }
.booking__form { padding: var(--space54); }
.booking__form .eyebrow { margin-bottom: 0; }
@media (min-width: 60em) {
  .booking__grid { grid-template-columns: repeat(2, 1fr); }
  .booking__img { position: relative; }
  .booking__img img { position: absolute; inset: 0; height: 100%; }
}
/* booking widget, styled like the reference's embedded calendar */
.bw { width: 100%; max-width: 300px; border: 1px solid #d9d2cd; background: #fff; font-size: 13px; color: #222; }
.bw__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e7e1dc; text-transform: uppercase; font-size: 10px; letter-spacing: .02em; color: #6b625d; line-height: 1.3; }
.bw__head svg { flex-shrink: 0; color: #6b625d; }
.bw__select { display: block; margin: 0 12px; position: relative; }
.bw__select select { width: 100%; appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid #666; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat; padding: 14px 24px 8px 12px; font-size: 17px; font-family: var(--sans); color: #222; cursor: pointer; border-radius: 0; }
.bw__select select:focus-visible { outline: 2px solid var(--accent); }
.bw__select--time { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.bw__select--time select { flex: 1; font-size: 15px; padding-top: 10px; }
.bw__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6b625d; }
.bw__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px; padding-top: 14px; border-top: 1px dashed #bbb; }
.bw__qbtn { border: 1px solid #ddd; background: #fff; padding: 9px 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; color: #aaa; cursor: pointer; transition: border-color .3s, color .3s; }
.bw__qbtn:hover, .bw__qbtn.is-on { border-color: #222; color: #222; }
.bw__cal { margin: 0 12px; }
.bw__month { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 10px; font-size: 12px; }
.bw__nav { border: 0; background: none; cursor: pointer; font-size: 12px; padding: 4px 8px; color: #222; }
.bw__nav:disabled { color: #ccc; cursor: default; }
.bw__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; row-gap: 4px; }
.bw__dow { font-size: 9px; color: #777; padding-bottom: 6px; text-transform: uppercase; }
.bw__day { border: 0; background: none; height: 30px; font-size: 14px; color: #222; cursor: pointer; border-radius: 50%; width: 30px; margin: 0 auto; padding: 0; transition: background .2s, color .2s; }
.bw__day:hover { background: #f1e4dc; }
.bw__day:disabled { color: #c5c5c5; cursor: default; background: none; }
.bw__day.is-on { background: var(--accent); color: #fff; }
.bw__submit { margin: 16px 12px 6px; width: calc(100% - 24px); }
.bw__note { margin: 6px 12px 14px; font-size: 11px; line-height: 1.5; color: #6b625d; }

/* ---------- Events → What guests say ---------- */
.events { padding: var(--space90) 0; overflow: hidden; isolation: isolate; background: var(--dark); color: #fff; }
.events .eyebrow { color: var(--accent-light); margin-bottom: var(--space30); }
.events__carousel { position: relative; touch-action: pan-y; }
.events__track { display: flex; will-change: transform; }
.ev { position: relative; flex-shrink: 0; width: 100%; margin-right: 40px; background: #fff; color: var(--text); }
.ev__thumb { position: relative; z-index: 2; width: 100%; padding-top: 70%; pointer-events: none; overflow: hidden; }
.ev__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev__content { position: relative; z-index: 0; padding: var(--space54); background: #fff; user-select: none; }
.ev__title { font-family: var(--sans); font-weight: 400; font-size: var(--fs28); line-height: 1.2; margin-bottom: var(--space12); }
.ev__kicker { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.ev__excerpt { font-size: var(--fs14); line-height: 2; margin-bottom: var(--space15); }
.ev__quote { font-style: normal; }
.ev__by { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ev__link { display: inline-flex; align-items: center; gap: var(--space12); font-size: var(--fs14); color: var(--accent); text-decoration: none; }
.ev__link svg { transition: transform .6s ease; }
.ev__link:hover svg { transform: translateX(5px); }
.ev__next { display: none; }
.events__pagination { display: flex; justify-content: center; align-items: center; margin: var(--space78) 0 0; }
.events__dot { position: relative; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; transition: all .8s ease-in-out; }
.events__dot .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.39); transition: transform .3s ease-in-out; }
.events__dot .number { position: absolute; top: 50%; left: 50%; transform: scale(0) translate(-50%, -50%); transform-origin: center; transition: transform .3s ease-in-out; font-size: var(--fs16); color: #fff; line-height: 1; }
.events__dot.is-active { width: 40px; height: 40px; margin: 0 var(--space8); border-color: var(--accent-light); }
.events__dot.is-active .dot { transform: scale(0); }
.events__dot.is-active .number { transform: scale(1) translate(-50%, -50%); }
@media (min-width: 60em) {
  .events__carousel { width: 800px; }
  .ev { width: 446px; height: 330px; margin-right: 80px; }
  .ev__thumb { width: 446px; height: 330px; padding-top: 0; }
  .ev__content { position: absolute; top: 0; left: 0; width: 446px; height: 330px; display: flex; flex-direction: column; justify-content: center; }
  .ev__next { display: block; position: absolute; left: -40px; top: 0; height: 100%; z-index: 150; border: 0; background: none; padding: 0; cursor: pointer; opacity: 0; transition: opacity .8s ease; color: var(--accent); }
  .ev.is-next .ev__next { opacity: 1; }
  .ev__next svg { transition: transform .5s ease; }
  .ev__next:hover svg { transform: scale(1.06); }
  .events__pagination { margin: var(--space30) 0 0; justify-content: flex-end; }
}

/* ---------- Kitchen carousel (brewery carousel) ---------- */
.kitchen { --gutter: calc((100vw - min(92vw, 1012px)) / 2); --kh: 60vw; --legend-h: 0px; overflow: hidden; padding: var(--space90) 0 var(--space170); }
@media (min-width: 60em) { .kitchen { --kh: calc((min(92vw, 1012px) - var(--space90)) * .58 * (570 / 740)); } }
.kitchen__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space25); }
@media (min-width: 60em) { .kitchen__grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: var(--space90); align-items: center; } .kitchen__content { margin-left: var(--space54); } }
.kitchen__col { position: relative; }
.kitchen__col--carousel { margin-right: calc(var(--gutter) * -1); }
.kc { overflow: hidden; touch-action: pan-y; }
.kc__track { display: flex; gap: 10px; transition: transform .6s var(--ease-carousel); will-change: transform; }
@media (min-width: 60em) { .kc__track { gap: 40px; } }
.kc__item { flex-shrink: 0; max-width: 82vw; opacity: .13; transition: opacity .6s var(--ease-carousel); }
.kc__item.is-active { opacity: 1; }
.kc__media { position: relative; overflow: hidden; }
.kc__media img { display: block; height: var(--kh); width: 82vw; max-width: none; object-fit: cover; transform: scale(1.2); transform-origin: left center; transition: transform .6s var(--ease-carousel); }
.kc__item.is-active .kc__media img { transform: scale(1); }
.kc__overlay { position: absolute; inset: 0; background: var(--bg); transform-origin: top; pointer-events: none; z-index: 15; }
.kc__legend { background: var(--bg); }
.kc__legend-inner { width: 90%; padding: var(--space20) 0 var(--space8); }
.kc__legend-inner p { opacity: 0; transition: opacity .8s var(--ease-carousel) .5s; }
.kc__item.is-active .kc__legend-inner p { opacity: 1; }
.kc__title { font-size: var(--fs21); margin-bottom: var(--space8); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kc__price { font-size: var(--fs14); letter-spacing: .12em; color: var(--accent); }
.kc__desc { font-size: var(--fs16); color: var(--muted); line-height: 1.6; }
.kc__nav { display: flex; gap: var(--space12); margin-top: var(--space20); }
.kc__btn { display: block; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.75); color: var(--dark); cursor: pointer; transition: opacity .3s ease-in-out, color .3s ease-in-out; }
.kc__btn svg { display: block; width: 42px; height: 42px; }
.kc__btn--prev svg { transform: scaleX(-1); }
.kc__btn:hover { color: var(--accent); }
.kc__btn:disabled { opacity: .3; pointer-events: none; }
@media (max-width: 59.99em) { .kc__btn:nth-child(1) { order: 2; } .kc__btn:nth-child(2) { order: 1; } }
@media (min-width: 60em) {
  .kc__item { max-width: none; }
  .kc__media { height: calc(var(--kh) + var(--legend-h)); }
  .kc__media img { width: auto; aspect-ratio: 5 / 4; }
  .kc__legend { position: absolute; top: var(--kh); left: 0; width: 100%; transform: translateY(100%); transition: transform .6s var(--ease-carousel) .4s; z-index: 10; }
  .kc__item.is-active .kc__legend { transform: translateY(0); }
  .kc__nav { position: absolute; top: calc(var(--kh) / 2); right: var(--space90); transform: translateY(-50%); flex-direction: column; margin-top: 0; z-index: 20; }
  .kc__btn svg { width: 52px; height: 52px; }
}

/* ---------- Location ---------- */
.map { background: var(--section); padding: var(--space90) 0; }
.map__grid { position: relative; }
.map__panel { background: var(--dark); color: #fff; padding: var(--space78) var(--space40) var(--space78) var(--space40); position: relative; z-index: 2; }
.map__panel .eyebrow { color: var(--accent-light); }
.map__panel .title { color: #fff; }
.map__intro, .map__loc, .map__actions { margin: 0 var(--space20); }
.map__intro { line-height: 1.6; margin-bottom: var(--space30); }
.map__loc { line-height: 2.1; font-size: var(--fs16); margin-bottom: var(--space30); }
.map__loc li { position: relative; padding-left: var(--space30); }
.map__loc .icon { position: absolute; left: 0; top: 9px; width: 14px; height: 16px; display: flex; justify-content: center; color: var(--accent-light); }
.map__loc svg { width: 12px; height: 14px; }
.map__loc a { color: #fff; text-decoration: none; word-break: break-word; }
.map__loc a:hover { text-decoration: underline; }
.map__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space12); }
.map__actions .btn { white-space: nowrap; }
.map__media { position: relative; background: #fff; width: 100%; height: 70vh; max-height: 560px; overflow: hidden; }
.map__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.mono--pin { background: var(--dark); width: 64px; height: 64px; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .4s ease; }
.mono--pin::before { inset: 14px; } .mono--pin::after { inset: 19px; }
.mono--pin .mono__k { font-size: 24px; }
.map__pin:hover .mono--pin { transform: translateY(-6px); }
.map__pin-text { background: #fff; color: var(--text); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
@media (min-width: 60em) {
  .map__panel { width: 45%; padding: var(--space78) var(--space78) var(--space78) var(--space40); }
  .map__intro, .map__loc, .map__actions { margin-left: var(--space50); margin-right: var(--space50); }
  .map__actions { margin-right: 0; }
  .map__media { position: absolute; right: 0; top: 50%; width: 58%; height: 90%; max-height: none; transform: translateY(-50%); }
}

/* ---------- Get in touch ---------- */
.touch { background: var(--section); padding: var(--space90) 0; margin-bottom: var(--space90); }
.touch__intro { margin: 0 var(--space20) var(--space50); }
@media (min-width: 60em) {
  .touch__grid { display: flex; justify-content: space-between; margin-left: -1em; }
  .touch__col { padding-left: 1em; max-width: 450px; flex: 1; }
  .touch__col + .touch__col { margin-left: var(--space50); }
  .touch__intro { margin: 0 var(--space50); }
}
.tf__legend { font-size: var(--fs16); margin-bottom: var(--space25); }
.req { color: var(--accent); }
.tf__row { display: flex; align-items: baseline; gap: var(--space20); margin-bottom: var(--space20); }
.tf__label { flex: 0 0 120px; color: var(--accent); font-size: var(--fs16); letter-spacing: .2em; text-transform: uppercase; }
.tf__input, .tf__area { flex: 1; min-width: 0; width: 100%; border: 0; border-bottom: 1px solid var(--input-border); background: transparent; font-family: var(--sans); font-size: var(--fs16); color: var(--text); padding: 8px 0; border-radius: 0; }
.tf__area { display: block; font-size: var(--fs21); margin: var(--space20) 0 var(--space25); resize: vertical; min-height: 92px; font-weight: 300; }
.tf__input::placeholder, .tf__area::placeholder { color: #6e625c; opacity: 1; }
.tf__input:focus, .tf__area:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.tf__error { color: #A1301E; font-size: var(--fs14); margin-bottom: var(--space15); }
@media (max-width: 29.99em) { .tf__row { flex-direction: column; gap: 4px; } .tf__label { flex: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: #fff; padding-bottom: var(--space40); font-size: var(--fsm18); }
.footer a { color: #fff; text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--accent-light); }
.footer__inner { display: flex; flex-direction: column; }
.footer__logo { display: flex; }
.footer__logo-link { display: flex; justify-content: center; align-items: center; padding: var(--space20); background: #fff; }
.mono--big { color: var(--dark); width: 107px; height: 107px; }
.mono--big::before { inset: 18px; border-width: 2px; } .mono--big::after { inset: 26px; }
.mono--big .mono__k { font-size: 44px; }
.footer__logo-sub { flex: 1; display: flex; justify-content: center; align-items: center; padding: var(--space30); font-size: var(--fs21); text-transform: uppercase; letter-spacing: .23em; color: var(--accent-light); }
.footer__grid { display: flex; flex-direction: column; margin: var(--space50) auto 0; width: var(--wrapperWidth); }
.footer__title { font-family: var(--sans); font-weight: 400; font-size: var(--fs14); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-light); margin-bottom: var(--space8); }
.footer__intro { max-width: 300px; line-height: 1.6; margin-bottom: var(--space20); }
.footer__copy { font-size: 12px; line-height: 1.8; opacity: .9; }
.footer__copy a { text-decoration: underline; text-underline-offset: 3px; }
.footer__col { flex: 1; margin-bottom: var(--space40); }
.footer__text { margin-bottom: var(--space30); }
.footer__icon, .footer__social-link { display: flex; align-items: flex-start; margin-bottom: 1em; line-height: 1.5; }
.footer__icon svg, .footer__social-link svg { flex-shrink: 0; width: var(--space16); height: var(--space16); margin: 3px var(--space12) 0 0; color: var(--accent-light); }
.footer__icon--address { margin-bottom: 2em; }
@media (min-width: 48em) {
  .footer { padding-bottom: 0; font-size: var(--fs12); }
  .footer__inner { flex-direction: row; }
  .footer__logo-link { padding: var(--space40); }
  .mono--big { width: 152px; height: 152px; }
  .mono--big::before { inset: 26px; } .mono--big::after { inset: 36px; }
  .mono--big .mono__k { font-size: 60px; }
  .footer__logo-sub { display: none; }
  .footer__grid { flex-direction: row; padding: var(--space40) var(--space50); margin: 0; flex: 1; width: auto; }
  .footer__col { margin-bottom: 0; }
  .footer__text { margin: var(--space12) var(--space30) 0 0; }
  .footer__social { margin-top: var(--space12); }
  .footer__copy { font-size: 10px; }
  .footer__icon svg, .footer__social-link svg { margin-top: 1px; }
}

/* ---------- Concept toast ---------- */
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 280; max-width: min(380px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 12px; background: #fff; color: var(--text); padding: 14px 14px 14px 18px; font-size: 12px; line-height: 1.55; box-shadow: 0 10px 30px rgba(24,14,9,.25); border-left: 3px solid var(--accent); transform: translateY(20px); opacity: 0; transition: transform .5s ease, opacity .5s ease; }
.toast.is-in { transform: none; opacity: 1; }
.nav-open .toast { opacity: 0; pointer-events: none; }
.toast__x { flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--section); cursor: pointer; font-size: 18px; line-height: 1; }
.toast__x:hover { background: var(--dark); color: #fff; }

/* ---------- Loader ---------- */
.loading { display: none; }
.js .loading { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: center; background: var(--loading); }
.loading.is-complete { display: none !important; }
.loading__logo { position: relative; width: 240px; height: 240px; overflow: hidden; }
.loading__g { position: absolute; top: 0; left: 0; width: 240px; height: 240px; overflow: hidden; }
.loading__g--dark { z-index: 9; }
.loading__g--light { z-index: 10; background: var(--loading); }
.mono--loader { width: 240px; height: 240px; color: var(--dark); }
.mono--loader::before { inset: 42px; border-width: 3px; } .mono--loader::after { inset: 60px; border-width: 1.5px; }
.mono--loader .mono__k { font-size: 96px; }
.mono--ghost { color: #E2D6CC; }
.loading__text { position: fixed; bottom: 5%; width: 100%; text-align: center; text-transform: uppercase; font-size: var(--fs14); letter-spacing: .2em; color: var(--text); }
@media (max-width: 59.99em) and (orientation: landscape) { .loading__logo, .loading__g, .mono--loader { width: 200px; height: 200px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .loading { display: none; }
  .js .main, .js .footer, .js .header, .js .brandtab, .js .book { opacity: 1; }
  .kc__overlay { display: none; }
}