/*
  TV Café — Onyx & Platinum with delicate gold threads.
  Standalone, dependency-free, responsive website.
*/
:root {
  color-scheme: dark;
  --onyx: #0c0e0f;
  --black: #08090a;
  --charcoal: #16191b;
  --graphite: #222527;
  --graphite-light: #292b2d;
  --platinum: #f3eee6;
  --silver: #cfc6b9;
  --muted: #aea79f;
  --gold: #e4b867;
  --gold-muted: #b59153;
  --gold-deep: #805629;
  --line: rgba(201, 158, 91, .38);
  --hairline: rgba(255, 232, 185, .13);
  --serif: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --sans: 'Segoe UI', 'DejaVu Sans', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--platinum); background: var(--black); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #ffe1a2; outline-offset: 5px; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.content-width { width: min(100% - 104px, 1390px); margin-inline: auto; }
.site-shell { min-height: 100vh; overflow: clip; background: radial-gradient(ellipse at 76% 3%, rgba(91,57,18,.07), transparent 33%), var(--onyx); }
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 101; background: var(--platinum); color: var(--black); padding: 12px 20px; }
.skip-link:focus { top: 12px; }

/* Header */
.site-header { position: relative; z-index: 70; height: 106px; background: linear-gradient(90deg, #090b0c 0%, #0c0d0e 46%, #070809 100%); border-bottom: 1px solid rgba(224,176,94,.56); box-shadow: 0 4px 25px #0009; }
.header-inner { width: min(100% - 92px, 1430px); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; min-width: 322px; flex: 0 0 auto; gap: 13px; }
.brand-mark { width: 77px; height: 83px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(231,174,80,.2)); }
.brand-separator { align-self: center; height: 50px; width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.brand-type { display: flex; flex-direction: column; line-height: .9; white-space: nowrap; font-size: 22px; font-weight: 400; letter-spacing: .015em; text-shadow: 0 2px 10px #000; }
.brand-type strong { font-weight: 400; font-size: 25px; margin-top: 8px; }
.brand-first { display: flex; align-items: center; gap: 10px; }
.brand-coffee { width: 23px; height: 23px; color: var(--gold); margin-top: -4px; }
.desktop-nav { display: flex; align-items: stretch; justify-content: center; align-self: stretch; }
.nav-link { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 100px; gap: 7px; font-size: 17px; transition: color .25s ease; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 17%; right: 17%; height: 2px; background: linear-gradient(90deg, transparent, #f1bd60, transparent); opacity: 0; transform: scaleX(.3); transition: transform .3s, opacity .3s; box-shadow: 0 0 12px 3px rgba(239,179,78,.5); }
.nav-link .icon { width: 27px; height: 27px; color: var(--gold); transition: transform .3s ease; }
.nav-link:hover, .nav-link.active { color: #fff4de; }
.nav-link:hover .icon { transform: translateY(-3px); }
.nav-link.active::after, .nav-link:hover::after { opacity: 1; transform: scaleX(1); }
.desktop-secondary { align-items: center; gap: 17px; }
.small-nav-link { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 15px; transition: color .2s; }
.small-nav-link .icon { width: 19px; height: 19px; color: var(--gold); }
.small-nav-link:hover, .small-nav-link.active { color: var(--gold); }
.nav-divider { width: 1px; height: 22px; background: var(--line); }
.menu-toggle { display: none; align-items: center; justify-content: center; color: var(--gold); background: transparent; border: 0; padding: 10px; }
.menu-toggle .icon { width: 33px; height: 33px; stroke-width: 2; }

/* Mobile drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.69); z-index: 79; backdrop-filter: blur(5px); }
.mobile-drawer { position: fixed; top: 90px; right: max(16px, env(safe-area-inset-right)); z-index: 80; width: min(410px, calc(100vw - 32px)); padding: 18px 18px 0; border: 1px solid rgba(220,166,77,.53); border-radius: 14px; background: radial-gradient(ellipse at 10% 88%, rgba(153,97,24,.17), transparent 45%), linear-gradient(135deg,#151514,#090b0c 78%); box-shadow: 0 20px 80px #000, inset 0 1px 1px #e7b96227; transform: translateY(-20px) scale(.985); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, transform .25s, visibility .25s; overflow: hidden; }
.mobile-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.drawer-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dbad6040; padding: 1px 0 14px; margin-bottom: 8px; }
.drawer-label { color: var(--gold); font: 12px var(--sans); letter-spacing: .26em; }
.drawer-close { background: transparent; border: 0; color: var(--gold); width: 40px; height: 40px; display: grid; place-items: center; }
.drawer-close .icon { width: 29px; height: 29px; }
.drawer-link { display: flex; gap: 24px; align-items: center; min-height: 61px; padding: 7px 15px; border-bottom: 1px solid rgba(255,255,255,.075); font-size: 21px; transition: background .2s, color .2s; }
.drawer-link > .icon:first-child { color: var(--gold); width: 28px; height: 28px; }
.drawer-link .drawer-chevron { color: var(--gold); opacity: 0; width: 16px; height: 16px; margin-left: auto; }
.drawer-link:hover, .drawer-link.active { color: #ffedc7; background: linear-gradient(90deg, rgba(152,94,25,.42), rgba(211,155,66,.10)); border-radius: 7px; box-shadow: inset 0 0 20px rgba(229,157,61,.12); }
.drawer-link.active .drawer-chevron { opacity: 1; }
.drawer-waves { height: 70px; margin: 2px -18px 0; opacity: .95; pointer-events: none; }
.drawer-waves svg { width: 100%; height: 100%; fill: none; }
.drawer-waves path { stroke: #ad762d; stroke-width: 1; filter: drop-shadow(0 0 6px #dba24c); }
.drawer-waves path:nth-child(2) { stroke: #f4c36a; stroke-width: 2; }
.drawer-waves path:nth-child(3) { stroke: #67421e; }

/* Hero */
.hero { height: 466px; min-height: 466px; isolation: isolate; position: relative; overflow: hidden; border-bottom: 0; background: radial-gradient(ellipse at 20% 65%, rgba(58,41,28,.18), transparent 49%), #090b0d; }
.hero-photo { position: absolute; inset: 0 0 0 auto; width: 58%; background-image: url('../assets/hero-coffee.webp'); background-size: cover; background-position: center center; z-index: -2; }
.hero-photo-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #080a0b 0%, #080a0bee 32%, rgba(8,10,11,.54) 48%, transparent 68%), linear-gradient(0deg, #080a0b 0%, transparent 24%); }
.hero-inner { width: min(100% - 104px, 1390px); margin: auto; height: 100%; display: flex; align-items: center; }
.hero-copy { width: min(630px, 49%); text-align: center; margin-top: -9px; position: relative; z-index: 2; animation: fade-up .85s ease both; }
.eyebrow-lines { display: flex; align-items: center; gap: 20px; justify-content: center; font-size: 20px; letter-spacing: .19em; white-space: nowrap; }
.eyebrow-lines > span:not(.eyebrow-text) { height: 1px; width: clamp(40px, 7vw, 113px); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero h1 { font-weight: 400; font-size: clamp(43px, 4.3vw, 74px); line-height: 1.12; letter-spacing: .003em; margin: 8px 0 2px; text-shadow: 0 4px 10px #000b; white-space: nowrap; }
.small-gold-flourish { max-width: 380px; height: 30px; margin: 0 auto; }
.small-gold-flourish svg { width: 100%; height: 100%; fill: none; }
.small-gold-flourish path { stroke: var(--gold); stroke-width: 1.35; filter: drop-shadow(0 0 5px rgba(255,195,94,.22)); }
.hero-subtitle { margin: 20px 0 28px; font-size: clamp(19px, 1.85vw, 26px); line-height: 1.42; font-style: italic; color: #f5eee5; }
.gold-button { display: inline-flex; justify-content: center; align-items: center; gap: 15px; min-height: 62px; padding: 12px 29px; border-radius: 999px; border: 1px solid #f8c66c; background: linear-gradient(145deg, rgba(23,19,14,.92), rgba(11,11,11,.88)); box-shadow: 0 0 0 1px #7e522688, 0 0 24px rgba(228,157,55,.23), inset 0 0 20px #f5ba4510; font-size: 23px; text-shadow: 0 1px 3px #000; transition: box-shadow .32s, transform .32s, background .32s; }
.gold-button .icon { color: #f0bd61; width: 27px; height: 27px; }
.gold-button .icon-arrow { width: 20px; height: 20px; margin-left: 3px; }
.gold-button:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #d9ab6a, 0 0 29px 7px rgba(232,153,48,.32), inset 0 0 20px #f5ba4520; }
.hero-thread { position: absolute; width: 108%; height: 170px; left: -4%; bottom: -61px; pointer-events: none; fill: none; opacity: .72; animation: thread-drift 10s ease-in-out infinite alternate; }
.thread-outer { stroke: #8c5a2c; stroke-width: 3; filter: drop-shadow(0 0 8px #ffb64e); }
.thread-core { stroke: #f7bf69; stroke-width: 1.5; filter: drop-shadow(0 0 4px #ffc969); }

/* Home category tiles */
.category-section { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 10px; z-index: 3; }
.category-card { position: relative; height: 177px; min-width: 0; overflow: hidden; display: block; border: 1px solid #c08c3b; border-radius: 16px; background: #151719; box-shadow: inset 0 1px 2px #e6bb6e42, 0 8px 35px #0008; transition: transform .3s, border-color .3s, box-shadow .3s; }
.category-card:hover { transform: translateY(-4px); border-color: #f0c16c; box-shadow: 0 0 22px rgba(195,138,52,.19), 0 13px 35px #0008; }
.category-image { position: absolute; inset: 0; background-size: cover; background-position: center 36%; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.category-card:hover .category-image { transform: scale(1.08); }
.category-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.33) 46%, rgba(0,0,0,.04) 100%); }
.category-label { position: absolute; left: 30px; bottom: 18px; display: flex; align-items: center; gap: 20px; font-size: 30px; text-shadow: 0 2px 6px #000; }
.category-label .icon { color: #f3c46f; width: 35px; height: 35px; }
.category-arrow { color: #e4b867; position: absolute; right: 22px; bottom: 23px; }
.highlights { min-height: 112px; display: flex; justify-content: center; align-items: center; margin-top: 17px; gap: 0; border-top: 1px solid var(--hairline); }
.highlight { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 clamp(22px, 4vw, 62px); border-right: 1px solid rgba(222,176,103,.37); font-size: 18px; }
.highlight:last-child { border-right: 0; }
.highlight .icon { color: #e8b65c; width: 30px; height: 30px; }

/* Decorative gold wave above footer */
.footer-thread { position: relative; width: 100%; height: 75px; margin-top: -4px; overflow: hidden; pointer-events: none; }
.footer-thread svg { width: 103%; height: 100%; transform: translateX(-1%); fill: none; }
.footer-thread .thread-outer { stroke-width: 2; }
.footer-thread .thread-core { stroke-width: 1.5; }
.site-footer { background: linear-gradient(180deg, rgba(10,11,12,.88), #060708 90%); }
.footer-inner { min-height: 146px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 13px; padding-right: 20px; border-right: 1px solid var(--line); font-size: 21px; line-height: 1.06; }
.footer-brand img { width: 70px; height: 77px; }
.footer-brand strong { font-size: 22px; font-weight: normal; }
.footer-block { display: flex; align-items: flex-start; gap: 13px; padding-right: 16px; border-right: 1px solid var(--line); font-size: 16px; }
.footer-block .icon { color: var(--gold); width: 24px; height: 24px; margin-top: 2px; }
.footer-block div { display: flex; flex-direction: column; gap: 7px; }
.footer-block strong { font-weight: 400; color: #f6ece1; }
.footer-block span { color: var(--muted); font-size: 15px; }
.footer-last { border-right: 0; }
.footer-bottom { min-height: 48px; border-top: 1px solid #ffffff15; display: flex; justify-content: space-between; align-items: center; color: #817e7b; font: 12px var(--sans); gap: 12px; }

/* Menus */
.view-menu, .view-editorial, .view-contact { min-height: min(780px, calc(100vh - 310px)); background: radial-gradient(ellipse 600px 310px at 49% 1%, #67452419, transparent 80%), linear-gradient(180deg, #0e1011, #0a0c0d); padding-bottom: 70px; }
.page-heading { padding-top: 54px; text-align: center; }
.kicker { margin: 0 0 18px; font: 11px var(--sans); letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
.menu-title { margin: 0; font-size: clamp(48px, 5vw, 69px); line-height: 1.1; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 20px; }
.menu-title .icon { width: 47px; height: 47px; color: var(--gold); stroke-width: 1.25; }
.title-flourish { width: min(300px,70%); height: 27px; margin: 11px auto 15px; }
.title-flourish svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.7; }
.page-intro { color: #c4bab0; font-size: 18px; margin: 6px 0 12px; }
.demo-note { display: inline-flex; align-items: center; gap: 8px; margin: 5px 0 0; color: #b1a18e; background: #b591530e; border: 1px solid #b5915333; border-radius: 10px; padding: 8px 12px; font: 12px/1.5 var(--sans); }
.demo-note .icon { width: 16px; height: 16px; }
.menu-layout { max-width: 1120px; }
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 29px; }
.menu-tab { position: relative; min-height: 42px; padding: 9px 22px; background: #111315; border: 1px solid #8b8074; color: #f4ede3; border-radius: 999px; font-size: 17px; white-space: nowrap; transition: background .22s, box-shadow .22s, border-color .22s; }
.menu-tab:hover { border-color: var(--gold); }
.menu-tab.active, .menu-tab[aria-selected="true"] { border-color: #ffc775; background: linear-gradient(135deg, #533314, #ba7d29 50%, #583619); color: #fff5e6; box-shadow: 0 0 0 1px #f7ca75, 0 0 15px 3px rgba(232,157,54,.44), inset 0 0 9px #ffc36d30; }
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-content: start; }
.menu-item { position: relative; display: flex; gap: 21px; min-height: 156px; align-items: center; padding: 10px; background: linear-gradient(130deg, #131618, #101213); border: 1px solid rgba(227,190,130,.27); border-radius: 18px; overflow: hidden; box-shadow: inset 0 1px #ffffff09; animation: fade-up .42s both; }
.menu-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 48%, #cda1590d); }
.menu-item-image { width: 145px; height: 134px; flex: 0 0 auto; object-fit: cover; border-radius: 13px; background: #202020; }
.menu-item-info { display: flex; flex: 1; min-width: 0; min-height: 124px; flex-direction: column; justify-content: center; position: relative; }
.menu-item h3 { font-size: clamp(18px, 1.5vw, 23px); font-weight: 400; margin: 0 0 10px; }
.menu-description { margin: 0 0 22px; font: 13px/1.35 var(--sans); color: #a9a39b; }
.menu-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: #d2c6b4; }
.price-pill { padding: 6px 13px; min-width: 63px; border: 1px solid var(--gold); border-radius: 50px; text-align: center; color: #f8d69a; background: #b8904612; box-shadow: inset 0 0 10px #e6a94b11; font-size: 17px; }
.menu-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; min-height: 220px; background: linear-gradient(140deg,#1b1c1e,#111315); border: 1px dashed #b591534d; border-radius: 20px; text-align: center; padding: 32px; }
.menu-empty .icon { color: var(--gold); width: 39px; height: 39px; }
.menu-empty h2 { font-weight: 400; font-size: 25px; margin: 0; }
.menu-empty p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 540px; }

/* About / contacts: intentionally no fabricated venue details. */
.editorial-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 66px; padding-top: 95px; }
.editorial-photo { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 70px #000a; }
.editorial-photo img { display: block; width: 100%; height: 420px; object-fit: cover; }
.editorial-copy h1, .contact-wrap h1 { font-size: clamp(40px, 5vw, 70px); font-weight: 400; margin: 0; }
.editorial-copy .title-flourish { margin: 8px 0 20px; }
.editorial-copy > p:not(.kicker) { font-size: 22px; line-height: 1.6; }
.editorial-copy > p.editorial-muted { color: var(--muted); font-size: 17px; }
.gold-button-compact { margin-top: 14px; font-size: 18px; min-height: 54px; }
.contact-wrap { text-align: center; padding-top: 72px; }
.contact-intro { color: var(--muted); font-size: 19px; }
.contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px; margin-top: 46px; }
.contact-card { min-height: 220px; padding: 35px 15px; border: 1px solid var(--line); border-radius: 15px; background: #1a1b1c; }
.contact-card .icon { width: 38px; height: 38px; color: var(--gold); }
.contact-card h2 { font-size: 23px; font-weight: 400; margin: 20px 0 12px; }
.contact-card p { font: 15px var(--sans); color: var(--muted); }

/* Animation: restrained, with reduced-motion fallback. */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes thread-drift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
.view.is-current { animation: fade-up .42s ease both; }

@media (max-width: 1330px) {
  .header-inner { width: min(100% - 50px, 1430px); }
  .brand { min-width: 280px; gap: 9px; }
  .brand-mark { width: 65px; }
  .brand-type { font-size: 19px; }
  .brand-type strong { font-size: 21px; }
  .nav-link { min-width: 83px; font-size: 16px; }
  .desktop-secondary { gap: 11px; }
  .small-nav-link { gap: 5px; font-size: 14px; }
  .content-width, .hero-inner { width: min(100% - 60px, 1390px); }
}
@media (max-width: 1080px) {
  .site-header { height: 88px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-drawer { top: 78px; }
  .hero-photo { width: 64%; }
  .hero-copy { width: min(540px, 54%); }
  .hero h1 { font-size: 50px; }
  .eyebrow-lines { font-size: 15px; }
  .hero-subtitle { font-size: 20px; }
  .category-card { height: 155px; }
  .category-label { font-size: 25px; left: 16px; gap: 9px; }
  .category-label .icon { width: 29px; height: 29px; }
  .footer-inner { gap: 14px; }
  .footer-brand { font-size: 17px; }
  .footer-brand strong { font-size: 18px; }
  .footer-block { font-size: 14px; }
}
@media (max-width: 760px) {
  .content-width, .hero-inner { width: min(100% - 34px, 540px); }
  .site-header { height: 80px; }
  .header-inner { width: calc(100% - 28px); }
  .brand { min-width: 0; gap: 8px; }
  .brand-mark { width: 55px; height: 66px; }
  .brand-separator { height: 39px; }
  .brand-type { font-size: 16px; letter-spacing: 0; }
  .brand-type strong { font-size: 18px; margin-top: 6px; }
  .brand-coffee { width: 18px; height: 18px; }
  .menu-toggle { padding: 6px; }
  .menu-toggle .icon { width: 30px; height: 30px; }
  .mobile-drawer { top: 70px; }
  .hero { height: auto; min-height: 0; padding-top: 258px; }
  .hero-photo { inset: 0 0 auto 0; width: 100%; height: 260px; background-size: cover; background-position: 50% 52%; }
  .hero-photo-shade { background: linear-gradient(to bottom, transparent 6%, transparent 60%, #090b0c 100%); height: 303px; bottom: auto; }
  .hero-inner { position: relative; height: auto; display: block; padding: 12px 0 33px; }
  .hero-copy { width: 100%; margin: 0; }
  .eyebrow-lines { font-size: 13px; gap: 9px; letter-spacing: .17em; }
  .eyebrow-lines > span:not(.eyebrow-text) { width: 55px; }
  .hero h1 { font-size: clamp(33px, 9vw, 54px); margin-top: 14px; white-space: normal; }
  .small-gold-flourish { max-width: 285px; height: 22px; }
  .hero-subtitle { font-size: clamp(17px,4.7vw,22px); margin: 18px 0 23px; }
  .desktop-only { display: none; }
  .gold-button { min-height: 55px; font-size: 19px; padding: 10px 21px; }
  .gold-button .icon { width: 24px; height: 24px; }
  .hero-thread { width: 155%; height: 135px; left: -25%; bottom: -63px; opacity: .58; }
  .category-section { margin-top: 0; grid-template-columns: 1fr; gap: 12px; }
  .category-card { height: 123px; border-radius: 14px; }
  .category-image { background-position: center 38%; }
  .category-label { font-size: 27px; left: 23px; bottom: 18px; gap: 16px; }
  .category-label .icon { width: 30px; height: 30px; }
  .category-arrow { bottom: 21px; right: 16px; }
  .highlights { min-height: 107px; margin-top: 22px; }
  .highlight { flex: 1; min-height: 65px; flex-direction: column; gap: 8px; text-align: center; padding: 0 7px; font-size: 12px; line-height: 1.23; }
  .highlight .icon { width: 27px; height: 27px; }
  .footer-thread { height: 50px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 23px; padding-top: 20px; padding-bottom: 25px; }
  .footer-brand { border-right: 0; padding-right: 0; }
  .footer-brand img { width: 47px; height: 52px; }
  .footer-brand, .footer-brand strong { font-size: 15px; }
  .footer-block { border-right: 0; padding: 0; gap: 10px; }
  .footer-block .icon { width: 19px; height: 19px; }
  .footer-block strong { font-size: 13px; }
  .footer-block span { font-size: 12px; line-height: 1.35; }
  .footer-bottom { align-items: flex-start; padding: 14px 0 18px; flex-direction: column; gap: 5px; }
  .view-menu, .view-editorial, .view-contact { min-height: calc(100vh - 260px); padding-bottom: 40px; }
  .page-heading { padding-top: 42px; }
  .kicker { font-size: 10px; letter-spacing: .23em; }
  .menu-title { font-size: 49px; gap: 15px; }
  .menu-title .icon { width: 39px; height: 39px; }
  .page-intro { font-size: 16px; }
  .demo-note { font-size: 11px; text-align: left; }
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; overscroll-behavior-x: contain; scrollbar-width: none; margin: 29px 0 27px; padding: 4px 7px 8px; width: calc(100% + 14px); margin-left: -7px; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { min-height: 40px; padding: 8px 17px; font-size: 16px; }
  .menu-list { grid-template-columns: 1fr; gap: 14px; }
  .menu-item { min-height: 135px; padding: 8px; gap: 16px; border-radius: 15px; }
  .menu-item-image { width: 122px; height: 117px; border-radius: 10px; }
  .menu-item-info { min-height: 105px; }
  .menu-item h3 { font-size: 20px; margin-bottom: 8px; }
  .menu-description { font-size: 12px; margin-bottom: 15px; }
  .price-pill { font-size: 15px; }
  .editorial-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .editorial-photo img { height: 260px; }
  .editorial-copy { text-align: center; }
  .editorial-copy .title-flourish { margin: 8px auto 15px; }
  .editorial-copy h1 { font-size: 46px; }
  .editorial-copy > p:not(.kicker) { font-size: 19px; }
  .editorial-copy > p.editorial-muted { font-size: 16px; }
  .contact-wrap { padding-top: 48px; }
  .contact-wrap h1 { font-size: 52px; }
  .contact-intro { font-size: 16px; line-height: 1.5; }
  .contact-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 29px; }
  .contact-card { min-height: 150px; padding: 19px; }
  .contact-card .icon { width: 29px; height: 29px; }
  .contact-card h2 { font-size: 21px; margin: 11px 0; }
}
@media (max-width: 360px) {
  .brand-type { font-size: 14px; }
  .brand-type strong { font-size: 16px; }
  .brand-mark { width: 49px; }
  .menu-item { gap: 11px; }
  .menu-item-image { width: 101px; height: 110px; }
  .menu-item h3 { font-size: 18px; }
  .price-pill { padding: 5px 10px; }
  .category-label { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* ====================================================================
   V2 — Artwork-faithful gold light system.
   These are ACTUAL high-resolution luminous threads sampled from the
   approved design, with their original halos and specular highlights.
   Kept separate from text, cards and links so the website remains real.
   ==================================================================== */
:root {
  --gold-bright: #ffd78e;
  --gold-light: #f8b445;
}
.site-shell { background: radial-gradient(ellipse 46% 36% at 78% 6%, rgba(116,67,24,.19), transparent 80%), #08090a; }
.site-header {
  background: linear-gradient(92deg,#08090a 0%, #0a0b0b 55%, #050606 100%);
  border-bottom: 1px solid #ad7a3980;
  box-shadow: 0 1px 13px rgba(247,174,67,.10),0 10px 22px #0007;
}
.site-header::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg,transparent 3%, rgba(255,183,79,.5) 5%,transparent 15%,transparent 78%,rgba(255,185,67,.26) 85%, transparent 92%);
  filter: blur(2px); pointer-events: none;
}
.brand-mark {filter: drop-shadow(0 0 4px #d99b4a88) drop-shadow(0 0 13px #ffac3e35);}
.brand:hover .brand-mark {filter: drop-shadow(0 0 9px #e6b064aa) drop-shadow(0 0 25px #ed9c4540);}
.nav-link.active::after {height: 3px;box-shadow: 0 -1px 11px 3px #ebad589e,0 0 18px 3px #ffae4770;}

.hero { background: #07090a; }
.hero-photo { background-position: center center; filter: contrast(1.08) saturate(1.12); }
.hero-photo-shade {
  background:
    linear-gradient(90deg, #08090a 0%, rgba(8,9,10,.94) 27%, rgba(8,9,10,.78) 43%, rgba(8,9,10,.20) 60%,transparent 76%),
    linear-gradient(0deg,#08090a 0%,transparent 17%);
}
.hero-light-ribbon {
  position:absolute; pointer-events:none; z-index:0;
  left:0; bottom:0; width:min(44%,665px); height:298px;
  background: url('../assets/gold-wave-hero-left.png') left bottom / 100% 100% no-repeat;
  filter: drop-shadow(0 0 5px #ffaa4229);
  opacity:1;
}
.hero-gold-glow {
  position:absolute;pointer-events:none;z-index:0;right:-6%;bottom:10px;width:40%;height:135px;
  background:radial-gradient(ellipse at 78% 66%,rgba(250,163,39,.18),transparent 45%);
  filter:blur(26px);
}
.hero-copy { z-index:2; }
.hero h1 {text-shadow:0 4px 20px #000, 0 0 27px #c9a3651b;}
.small-gold-flourish {
  max-width:425px;width:85%;height:32px;margin:3px auto 0;
  background:url('../assets/gold-title-flourish.png') center / 100% 100% no-repeat;
  filter:drop-shadow(0 0 8px rgba(243,176,64,.25));
}
.hero-thread {
  width:100%; left:0; bottom:-4px;height:87px;
  background:url('../assets/gold-wave-footer.png') center center / 100% 100% no-repeat;
  opacity:.38;
  animation:none;
  mask-image: linear-gradient(180deg,transparent,#000 29%,#000 75%,transparent);
}
.eyebrow-lines > span:not(.eyebrow-text) {height:1px;background:linear-gradient(90deg,transparent,#ffe1a0 25%,#b8813a 78%,transparent);box-shadow:0 0 6px #c08c3f4a;}
.gold-button {
  position: relative; isolation:isolate; overflow:visible;
  border:1px solid #f6bd62;
  background:linear-gradient(180deg, #1a140f 0%,#060808 70%);
  box-shadow:0 0 0 1px #81521e7d,0 0 8px 1px rgba(247,182,69,.30),0 0 22px 5px rgba(220,134,34,.16),inset 0 0 12px 2px #dd982b30;
  text-shadow: 0 2px 4px #000;
}
.gold-button::before {
  content:''; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;z-index:-1;
  background: linear-gradient(105deg, transparent 4%, #e9a74800 19%, #ffdf958c 30%, transparent 38%,transparent 65%,#ffc06777 82%,transparent 90%);
  filter: blur(3px); opacity:.85;
}
.gold-button::after {
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(113deg,transparent 43%, #fff1ba21 49%,#fff2c340 50%,transparent 57%);
  background-size:300% 100%;background-position:100% 0;
  animation:cta-gleam 7s ease-in-out infinite;
}
.gold-button:hover {
  box-shadow:0 0 0 1px #f5c16c,0 0 16px 3px #ffd27877,0 0 44px 11px #d68a3950,inset 0 0 22px #faba5033;
}
@keyframes cta-gleam { 0%,68%,100%{background-position:100% 0;} 84%{background-position:0 0;} }

.category-card { border:1px solid #be8b46;box-shadow:inset 0 0 1px #ffdf9d70,0 0 14px #d4922e14,0 13px 32px #0009; }
.category-card::after {
  content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  background:
     radial-gradient(ellipse 42% 8px at 35% 0,#ffe5af95,transparent 95%),
     radial-gradient(ellipse 35% 6px at 56% 100%,#ffb34b56,transparent 95%);
  box-shadow:inset 0 0 1px #ffd99525;
}
.category-card::before {
  content:'';position:absolute;z-index:2;left:-70%;top:0;height:100%;width:34%;transform:skew(-19deg);
  background:linear-gradient(90deg,transparent,#fff0c51e,transparent);transition:left .75s ease;pointer-events:none;
}
.category-card:hover::before {left:130%;}
.category-label .icon, .category-arrow {filter:drop-shadow(0 0 4px #f9a74140);}
.category-card:hover { box-shadow:0 0 25px #e4a04245,0 13px 35px #000a; }

.footer-thread {
  position:relative;isolation:isolate;height:98px;margin-top:-15px;
  background:url('../assets/gold-wave-footer.png') center center / 100% 100% no-repeat;
  overflow:hidden;
  filter:drop-shadow(0 0 6px #e9a44457);
}
.footer-thread::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,#fff1b92b 50%,transparent 62%);
  background-size:280% 100%;animation:footer-gleam 10s linear infinite;
  mix-blend-mode:screen;
  mask-image:url('../assets/gold-wave-footer.png');mask-position:center;mask-size:100% 100%;mask-repeat:no-repeat;
}
@keyframes footer-gleam {from{background-position:130% 0;}to{background-position:-120% 0;}}
.site-footer {background:radial-gradient(ellipse at 68% 0,#4c2b1014,transparent 52%),linear-gradient(180deg,#090a0a,#040506);}
.drawer-waves {
  height:75px;margin:0 -18px -1px;
  background:url('../assets/gold-wave-drawer.png') center bottom / 100% 100% no-repeat;
  filter: drop-shadow(0 0 7px #e6a14072);
}
.mobile-drawer {background: radial-gradient(ellipse at 10% 88%, rgba(153,97,24,.15), transparent 45%), linear-gradient(135deg,#101010,#070809 78%);}
.drawer-link.active { background:radial-gradient(ellipse at 37% 110%,#f4ae5936,transparent 58%),linear-gradient(90deg,#4a2a10a8,#1d160d55);box-shadow:inset 0 -2px 5px #ffbe6961,0 4px 18px #eaa44823; }
.title-flourish {height:32px;width:min(320px,70%);margin:10px auto 15px;background:url('../assets/gold-title-flourish.png') center / 100% 100% no-repeat;filter:drop-shadow(0 0 7px #eba64c4b);}
.menu-tab.active, .menu-tab[aria-selected="true"] {
  background:linear-gradient(90deg,#4c270e,#ba7628 45%,#4e2d14);
  box-shadow:0 0 0 1px #ebba66,0 0 11px 2px #f7b45791,0 0 27px #d48b334f,inset 0 0 11px #ffe5a84f;
}
.price-pill {border-color:#f3bc67;box-shadow:0 0 10px #e6a94b3d,inset 0 0 8px #e6a94b20;}
.menu-item:hover {border-color:#eac0867a;box-shadow:0 5px 35px #0008,0 0 14px #f6b55217;}
@media (min-width:1081px) {
  .hero {height:460px;min-height:460px;}
  .category-section {margin-top:0;}
  .highlights {min-height:94px;margin-top:18px;}
  .footer-inner {min-height:118px;}
}
@media (max-width:760px) {
  .hero-photo {background-image:url('../assets/hero-coffee-mobile.webp');background-position:center;background-size:cover;height:258px;}
  .hero-photo-shade {height:303px;}
  .hero-light-ribbon {display:none;}
  .hero-thread {height:81px;bottom:-42px;opacity:.65;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent);}
  .small-gold-flourish {height:21px;width:76%;max-width:315px;}
  .footer-thread {height:64px;margin-top:-13px;background-size:140% 100%;filter:drop-shadow(0 0 7px #f6a5376b);}
  .footer-thread::after {mask-size:140% 100%;}
  .category-card::after {background:radial-gradient(ellipse 54% 9px at 62% 0,#ffe7b478,transparent 95%),radial-gradient(ellipse 34% 9px at 45% 100%,#febc5660,transparent 95%);}
  .hero-subtitle {text-shadow:0 2px 8px #000;}
  .drawer-waves {height:68px;}
}
@media (prefers-reduced-motion:reduce) {
  .gold-button::after,.footer-thread::after {animation:none;}
}

/* Final visual tuning after browser comparison with both approved references. */
.drawer-heading {padding:0 0 14px;min-height:67px;}
.drawer-brand {display:flex;align-items:center;gap:10px;font-size:18px;line-height:1.05;letter-spacing:.025em;}
.drawer-brand strong {font-weight:400;font-size:19px;}
.drawer-brand img {filter:drop-shadow(0 0 6px #f6ac5080);}
.gold-button::before {
 background:none; box-shadow:0 0 8px rgba(251,192,98,.51);
 filter:blur(3px);opacity:.8;
}
.gold-button::after {opacity:.38;}
@media (max-width:760px) {
 .hero-photo-shade {
   background:linear-gradient(to bottom,transparent 0%,transparent 58%,rgba(8,9,10,.32) 83%,#090b0c 100%);
   height:303px;
 }
 .drawer-brand {font-size:17px;}
 .drawer-brand strong {font-size:18px;}
}
@media (min-width:1331px) {
  .header-inner { width:min(100% - 136px,1390px); }
  .brand { min-width:355px; gap:17px; }
  .brand-mark { width:89px; height:95px; }
  .brand-type { font-size:23px; }
  .brand-type strong { font-size:27px; }
  .content-width, .hero-inner { width:min(100% - 160px,1374px); }
  .hero-copy { width:min(660px,50%); margin-top:12px; }
  .hero h1 {font-size:clamp(62px,4.7vw,74px);}
  .hero-photo { width:53%; }
}


/* ======================================================================
   V3 — Reference-matched luminous gold + volumetric crystal-glass tiles.
   Important: no static top strips on category photographs.
   A dedicated transparent photographic asset contains the LIGHT beneath
   every category card, rather than drawing a flat yellow underline.
   ====================================================================== */
:root { --glass-ivory: rgba(252,242,223,.23); --gold-hot:#ffe6a8; }
.site-header { box-shadow: 0 2px 0 #ce8b3844, 0 5px 27px #0009, 0 6px 27px rgba(255,173,55,.11); }
.site-header::before {
  content:'';position:absolute;inset:auto 0 -14px; height:18px;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,#f4aa4700 13%,#ffdc9077 27%,#fff7d4c4 30%,#f5b04c00 37%,transparent 65%,#ffc26f89 81%,transparent 94%);
  filter:blur(7px);opacity:.55;
}
.nav-link { min-width:90px; }
.nav-link.active::after { background:linear-gradient(90deg,transparent 0%,#ffcb71 23%,#fff4d3 49%,#e99d2f 75%,transparent 100%); box-shadow:0 -1px 13px 2px #ffdb92ab,0 0 24px #f2a44c89; }
/* Real specular highlights underneath the curved gold flourish. */
.small-gold-flourish { filter:drop-shadow(0 7px 7px #eca14860) drop-shadow(0 15px 12px #ea8d2f39); }
.small-gold-flourish::after {
  content:''; display:block; height:12px; width:76%; margin:-10px auto 0;
  background:radial-gradient(ellipse,#efb55b81 1%,rgba(255,174,65,.20) 44%,transparent 76%);
  filter:blur(9px);
}
.hero-light-ribbon {filter:drop-shadow(0 9px 13px #ffb75c7a) drop-shadow(0 17px 22px #ffab3860);}
.hero-thread {opacity:.55;filter:drop-shadow(0 12px 12px #ffb25588) drop-shadow(0 25px 18px #cc762e4a);}
.footer-thread {filter:drop-shadow(0 9px 11px #fbb1549e) drop-shadow(0 21px 19px #d8802d8f);}
.footer-thread::before {
  content:'';position:absolute;inset:30% 0 -16%;pointer-events:none;
  background:url('../assets/gold-wave-halo.png') center / 100% 100% no-repeat;
  filter:blur(12px);opacity:.9;
}
/* Individual category image-card is an actual raised glass surface. */
.category-section {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:19px;
  margin-top:4px;
  margin-bottom:31px;
}
.category-card {
  isolation:isolate;overflow:visible;height:173px;
  border-radius:18px;
  border:1px solid rgba(249,212,145,.75);
  background:#11100e;
  box-shadow:
    0 0 0 1px rgba(53,32,12,.9),
    inset 0 2px 0 rgba(255,244,213,.30),
    inset 0 -3px 8px rgba(227,142,35,.30),
    0 2px 6px rgba(245,171,65,.24),
    0 11px 19px #000b;
  transform:translateZ(0);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.category-card:hover, .category-card:focus-visible {
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(255,241,203,.93);
  box-shadow: 0 0 0 1px rgba(255,206,111,.40),
    inset 0 2px 0 rgba(255,244,215,.43),
    inset 0 -4px 12px rgba(242,154,42,.5),
    0 4px 24px rgba(255,173,67,.4),0 14px 33px #000b;
}
/* Photographs are clipped individually; outer card is not clipped, so the
   photographic underlight can radiate beyond its lower edge. */
.category-image {
  inset:0;z-index:0;border-radius:17px;
  background-size:cover;background-position:50% 47%;
  filter:brightness(1.075) contrast(1.045) saturate(1.08);
  transition:transform .7s ease,filter .4s ease;
}
.category-card:hover .category-image { transform:scale(1.005); filter:brightness(1.18) contrast(1.07) saturate(1.15); }
.category-shade {
  z-index:1;border-radius:17px;
  background:linear-gradient(0deg,rgba(1,2,3,.93) 0%,rgba(0,0,0,.38) 29%,rgba(0,0,0,.04) 75%),
    linear-gradient(100deg,rgba(0,0,0,.22),transparent 50%);
}
.category-card::before {
  content:'';pointer-events:none;position:absolute;z-index:2;inset:0;
  border-radius:17px;
  /* Wide, transparent glancing light makes a curved GLASS face, not a band. */
  background:
    radial-gradient(ellipse 73% 59% at 48% -26%,rgba(255,255,255,.27),transparent 80%),
    linear-gradient(138deg,rgba(255,248,232,.33) 0%,rgba(255,248,232,.07) 11%,transparent 38%),
    radial-gradient(ellipse 64% 46% at 78% 112%,rgba(255,173,62,.27),transparent 80%);
  box-shadow:inset 0 2px 3px rgba(255,252,239,.15),inset 0 0 10px rgba(240,170,63,.12);
}
/* GOLD PHOTOGRAPHIC REFLECTION, under all four tiles: deliberately no top
   highlight strip. Source is real light and falloff from the approved style. */
.category-card::after {
  content:'';position:absolute;z-index:4;pointer-events:none;
  left:-4%;width:108%;bottom:-60px;height:72px;
  background:url('../assets/gold-light-reflection.png') center center / 100% 100% no-repeat;
  filter:drop-shadow(0 5px 5px #ffbf5875) drop-shadow(0 12px 13px #ed8e3370);
  opacity:.95;transform-origin:center top;
  transition:opacity .3s,filter .3s;
}
.category-card:hover::after {
  opacity:1;filter:drop-shadow(0 5px 8px #ffecbba8) drop-shadow(0 15px 19px #f49a4e9e);
}
.category-label {z-index:3;left:18px;bottom:18px;gap:12px;font-size:26px;text-shadow:0 2px 6px #000,0 0 12px #000;}
.category-label .icon {width:31px;height:31px;filter:drop-shadow(0 0 5px #ffca767a);}
.category-arrow {z-index:3;right:12px;bottom:22px;width:22px;height:22px;}
/* Remove old overlay which produced a hard upper ribbon. */
.category-section + .highlights {margin-top:0;}
.highlights {min-height:100px;border-top:1px solid rgba(255,216,151,.15);}
/* Individual menu items receive the same downward lighting, not upper bars. */
.menu-list {row-gap:26px;}
.menu-item {overflow:visible;isolation:isolate;box-shadow:0 15px 27px #0008,inset 0 1px rgba(244,200,145,.10);}
.menu-item::before {border-radius:inherit;z-index:-1;}
.menu-item::after {
  content:'';position:absolute;z-index:1;pointer-events:none;left:9%;right:9%;bottom:-16px;height:25px;
  border-radius:50%;background:radial-gradient(ellipse at 50% 5%,rgba(255,231,160,.58) 0%,rgba(255,173,54,.29) 30%,transparent 73%);
  filter:blur(7px);
}
.menu-item-image {border:1px solid rgba(237,185,99,.2);}
/* More room for the fifth nav item without compressing branding. */
@media(min-width:1081px) and (max-width:1330px) {
  .nav-link {min-width:78px;font-size:15px;}
  .brand {min-width:270px;}
  .desktop-secondary {gap:9px;}
  .small-nav-link {font-size:13px;}
}
@media(min-width:1081px) and (max-width:1180px) {
  .brand-type{font-size:18px}.brand-type strong{font-size:19px}
  .brand-mark{width:56px;height:72px}
  .nav-link{min-width:73px}
}
@media(min-width:1081px) { .hero {height:462px;min-height:462px;} }
@media(max-width:1080px) and (min-width:761px) {
  .category-section {grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;margin-bottom:25px;}
  .category-card {height:180px;}
}
@media(max-width:760px) {
  .category-section {grid-template-columns:1fr;gap:17px;margin-top:4px;margin-bottom:34px;}
  .category-card {height:126px;border-radius:17px;}
  .category-image,.category-shade,.category-card::before {border-radius:16px;}
  .category-card::after {left:1%;width:98%;bottom:-42px;height:53px;}
  .category-label {font-size:26px;left:21px;bottom:15px;gap:13px;}
  .category-label .icon {width:31px;height:31px;}
  .category-arrow {bottom:19px;right:17px;}
  .highlights {margin-top:0;min-height:100px;}
  .hero-thread {filter:drop-shadow(0 8px 10px #ffb1548f) drop-shadow(0 16px 12px #ce7d2e60);}
  .footer-thread {filter:drop-shadow(0 6px 8px #e7a44b80) drop-shadow(0 15px 12px #e6923e61);}
  .menu-list {row-gap:20px;}
  .mobile-drawer {max-height:calc(100dvh - 92px);overflow-y:auto;}
}
@media(max-width:360px) {
  .category-card{height:119px;}
  .category-label{font-size:23px;}
}
@media(prefers-reduced-motion:reduce) { .category-card:hover{transform:none;} }
/* Precise absolute-position reset (older pseudo-elements used inset:0). */
.category-card::before { transform:none; left:0; top:0; right:0; bottom:0; width:auto; height:auto; transition:none; }
.category-card::after { top:auto; right:auto; }
@media(max-width:760px) { .category-section { gap:26px; } }
/* Photographic food thumbnails: same gold light from BELOW the photo. */
.menu-item-thumb {position:relative;flex:0 0 145px;width:145px;height:134px;isolation:isolate;}
.menu-item-thumb::before {
 content:'';position:absolute;z-index:2;inset:0;pointer-events:none;border-radius:13px;
 background:linear-gradient(128deg,rgba(255,245,218,.16),transparent 22%),radial-gradient(ellipse at 15% -10%,rgba(255,252,240,.18),transparent 48%);
 box-shadow:inset 1px 1px 2px rgba(255,255,255,.2),inset -2px -2px 5px rgba(210,139,39,.15);
}
.menu-item-thumb::after {
 content:'';position:absolute;z-index:0;left:-6%;right:-6%;height:28px;bottom:-17px;pointer-events:none;
 background:url('../assets/gold-light-reflection.png') center/100% 100% no-repeat;
 filter:drop-shadow(0 5px 7px rgba(254,173,60,.54));opacity:.85;
}
.menu-item-image {position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;border-radius:13px;}
/* Curved and translucent corner glints on the large glass-tile faces. */
.category-card::before {
 background:
 radial-gradient(ellipse 88px 65px at 1% 0%,rgba(255,249,227,.43) 0%,rgba(255,250,225,.11) 32%,transparent 90%),
 radial-gradient(ellipse 76px 42px at 105% 98%,rgba(255,208,115,.25),transparent 90%),
 linear-gradient(133deg,rgba(255,252,242,.17),transparent 29%),
 radial-gradient(ellipse 74% 55% at 45% -36%,rgba(255,255,255,.15),transparent 80%),
 radial-gradient(ellipse 70% 44% at 81% 118%,rgba(255,173,62,.23),transparent 80%);
}
@media(max-width:760px) {
 .menu-item-thumb{width:122px;height:117px;flex-basis:122px;}
 .menu-item-image{width:100%;height:100%;}
}
@media(max-width:360px) {
 .menu-item-thumb{width:101px;height:110px;flex-basis:101px;}
}


/* ==========================================================================
   V4 — CLEAN OPTICAL FINISH. Deterministic, alpha-transparent luminous
   reflections; no photographic underlighting strips or blurry golden blocks.
   ========================================================================== */
.brand-mark {filter:drop-shadow(0 0 6px rgba(255,190,91,.32));}
.brand:hover .brand-mark {filter:drop-shadow(0 0 8px rgba(255,205,113,.50));}
.footer-brand img {filter:drop-shadow(0 0 7px rgba(246,181,77,.29));}

/* Laser-sharp nav underline with one small specular flare. */
.nav-link::after, .nav-link.active::after, .nav-link:hover::after {
 content:'';position:absolute;left:50%;right:auto;bottom:-11px;
 width:112px;height:28px; transform:translateX(-50%);
 background:url('../assets/gold-nav-focus.svg') center center/100% 100% no-repeat;
 border:0;box-shadow:none;filter:none;opacity:0;pointer-events:none;
 transition:opacity .22s ease;
}
.nav-link.active::after,.nav-link:hover::after {opacity:1;transform:translateX(-50%);}
.site-header::before {height:5px;inset:auto 0 -6px;filter:blur(4px);opacity:.38;}
.site-header {box-shadow:0 1px 0 rgba(255,183,72,.4),0 5px 25px #000b;}
/* A thin uninterrupted luminous thread below the header. */
.site-header::after {
 content:'';position:absolute;inset:auto 0 -9px;z-index:0;height:15px;pointer-events:none;
 background:linear-gradient(to bottom,rgba(255,193,93,.7) 0 1px,transparent 1px),
 radial-gradient(ellipse 14% 5px at 21% 12%,rgba(255,213,130,.42),transparent),
 radial-gradient(ellipse 10% 4px at 76% 10%,rgba(255,217,142,.42),transparent);
 opacity:.65;
}

/* The gold reflection below categories is NEW transparent optical art, not
   a magnified PNG crop with a hard-edged amber rectangle. */
.category-section {gap:18px;margin-bottom:45px;}
.category-card {
 height:173px;overflow:visible;isolation:isolate;border-radius:20px;
 border:1px solid rgba(228,175,93,.70);
 box-shadow:inset 0 1px 1px rgba(255,236,195,.18),inset 0 -2px 3px rgba(247,178,71,.21),
            0 2px 13px rgba(0,0,0,.64),0 2px 14px rgba(230,141,36,.07);
 background:#101010;
}
.category-card .category-image {inset:0;border-radius:19px;transform:none;background-size:cover;background-position:center 46%;filter:brightness(1.01) saturate(1.09) contrast(1.03);}
.category-card:hover .category-image {transform:scale(1.018);filter:brightness(1.11) saturate(1.12);}
.category-card .category-shade {border-radius:19px;background:linear-gradient(0deg,rgba(1,1,1,.86),rgba(1,1,1,.18) 44%,rgba(1,1,1,.03));}
.category-card::before {z-index:2;inset:0;border-radius:19px;pointer-events:none;
 background:radial-gradient(ellipse 49% 63% at -7% -28%,rgba(255,246,221,.32),transparent 94%),
 linear-gradient(135deg,rgba(255,248,225,.18),transparent 22%),
 radial-gradient(ellipse 69% 45% at 45% -45%,rgba(255,254,245,.20),transparent 79%);
 box-shadow:inset 0 1px 0 rgba(255,244,219,.36),inset 0 1px 4px rgba(255,255,255,.09),inset 0 -1px 6px rgba(231,162,61,.08);
}
.category-card::after {left:-4%;right:auto;bottom:-48px;width:108%;height:51px;top:auto;
 background:url('../assets/gold-light-reflection.png') 50% 0/100% 100% no-repeat;
 filter:none;opacity:1;transform:none;
}
.category-card:hover::after {opacity:1;filter:brightness(1.18);}
.category-card:hover {box-shadow:inset 0 1px 2px rgba(255,229,187,.25), 0 0 0 1px #e9ab5377,0 0 15px #f0b15430,0 14px 30px #000b;}
.category-label {bottom:19px;z-index:3;}
.category-arrow {z-index:3;}
/* Below the reflection no yellow shelf, metal texture or artificial ground line. */
.category-section + .highlights {margin-top:0;border-top:1px solid rgba(222,178,111,.13);}

/* Menu thumbnails retain a narrow photographic frame and a subtle optical halo. */
.menu-item-thumb::after {z-index:0;left:-8%;right:-8%;bottom:-26px;height:43px;
 background:url('../assets/gold-light-reflection.png') 50% 0 / 100% 100% no-repeat;filter:none;opacity:.72;}
.menu-item-thumb::before {background:linear-gradient(130deg,rgba(255,252,226,.10),transparent 20%);}
.menu-item-image {box-shadow:0 8px 16px #0009;}
.menu-item::after {background:radial-gradient(ellipse 52% 9px at 50% 70%,rgba(246,168,65,.16),transparent 90%);filter:blur(8px);bottom:-17px;}

/* The title flourish has a restrained glow underneath, not a thick bar. */
.small-gold-flourish {filter:drop-shadow(0 3px 4px rgba(238,168,66,.25));}
.small-gold-flourish::after {content:none;}

/* Footer ribbon keeps its smooth wavy original light, reducing heavy haze. */
.footer-thread {filter:drop-shadow(0 5px 11px #ffb45250);}
.footer-thread::before {opacity:.37;filter:blur(18px);}
.hero-thread {filter:drop-shadow(0 4px 8px rgba(250,179,83,.34));}

@media (max-width: 1080px) and (min-width:761px) {
  .category-card {height:178px;}
}
@media (max-width:760px) {
  .category-section {gap:25px;margin-bottom:25px;}
  .category-card {height:126px;border-radius:17px;}
  .category-card .category-image,.category-card .category-shade,.category-card::before {border-radius:16px;}
  .category-card::after {left:-3%;width:106%;bottom:-40px;height:43px;}
  .nav-link::after {display:none;}
  .footer-thread {filter:drop-shadow(0 4px 8px rgba(255,178,72,.27));}
}
@media (max-width:360px) {
 .category-card {height:119px;}
}
@media (prefers-reduced-motion: reduce) {
 .category-card:hover {transform:none;}
}

/* V4 final optical sparkle: no sampled photo texture under cards. */
.category-card::after,
.menu-item-thumb::after {
 background-image:url('../assets/gold-optical-reflection.svg');
 background-position:50% 0;
 background-repeat:no-repeat;
 background-size:100% 100%;
}
.category-card::after {bottom:-57px;height:62px;opacity:1;}
.menu-item-thumb::after {bottom:-25px;height:38px;}
.site-header {border-bottom:0;}
.site-header::after {
 inset:auto 0 -25px;height:53px;background:url('../assets/gold-header-wave.svg') center/100% 100% no-repeat;
 opacity:.86;pointer-events:none;z-index:0;
}
.site-header::before {opacity:.17;}
.nav-link::after,.nav-link.active::after,.nav-link:hover::after {bottom:-7px;z-index:3;height:28px;}
@media(max-width:760px) {
 .category-card::after {bottom:-44px;height:49px;}
 .site-header::after {bottom:-20px;height:40px;}
}

/* Saturated, softly fading gold beams (reference brightness). */
.category-card::after {filter:drop-shadow(0 4px 7px rgba(240,147,35,.24));}
.category-card:hover::after {filter:brightness(1.19) drop-shadow(0 5px 9px rgba(250,170,57,.30));}
.category-section + .highlights {border-top:0;}
@media(max-width:760px) { .category-card::after {filter:drop-shadow(0 3px 4px rgba(246,165,59,.20));} }


/* ==========================================================================
   V5 — closer match to approved mockup: softer header wave and subtler card
   reflections with a small optical flare, not a wide gold shelf.
   ========================================================================== */
.site-header { overflow: visible; }
.site-header::before { display:none; }
.site-header::after {
  content:''; position:absolute; left:0; right:0; bottom:-21px; height:58px;
  background:url('../assets/gold-header-wave-v5.svg') center/100% 100% no-repeat;
  opacity:1; pointer-events:none; z-index:0; filter:none;
}
@media (max-width:760px){
  .site-header::after { bottom:-18px; height:46px; }
}

.hero-thread { opacity:.36; filter:drop-shadow(0 2px 5px rgba(252,179,77,.22)); }

.category-section { gap:20px; margin-top:8px; margin-bottom:36px; }
.category-card {
  height:176px; border-radius:20px; overflow:visible; isolation:isolate; background:#101010;
  border:1px solid rgba(229,182,105,.64);
  box-shadow:
    0 0 0 1px rgba(74,48,20,.66),
    inset 0 1px 0 rgba(255,244,221,.20),
    inset 0 -1px 0 rgba(240,180,87,.12),
    0 12px 26px rgba(0,0,0,.58),
    0 2px 8px rgba(231,151,51,.08);
}
.category-card:hover, .category-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(247,215,154,.88);
  box-shadow:
    0 0 0 1px rgba(247,197,107,.36),
    inset 0 1px 0 rgba(255,247,228,.28),
    inset 0 -1px 0 rgba(246,191,98,.18),
    0 16px 33px rgba(0,0,0,.65),
    0 0 18px rgba(240,168,69,.16);
}
.category-card .category-image,
.category-card .category-shade,
.category-card::before { border-radius:19px; }
.category-card .category-image {
  background-position:center 44%;
  filter:brightness(1.03) saturate(1.06) contrast(1.02);
}
.category-card:hover .category-image {
  transform:scale(1.02);
  filter:brightness(1.10) saturate(1.10) contrast(1.04);
}
.category-card .category-shade {
  background:
    linear-gradient(0deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 75%),
    linear-gradient(90deg, rgba(0,0,0,.09), transparent 46%);
}
.category-card::before {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 88px 62px at 8% 6%, rgba(255,249,234,.36) 0%, rgba(255,249,234,.09) 28%, transparent 72%),
    linear-gradient(132deg, rgba(255,250,240,.16) 0%, rgba(255,250,240,.03) 18%, transparent 29%),
    radial-gradient(ellipse 58% 42% at 50% -34%, rgba(255,255,255,.15), transparent 80%),
    radial-gradient(ellipse 60px 30px at 87% 96%, rgba(255,185,81,.14), transparent 88%);
  box-shadow: inset 0 1px 0 rgba(255,247,226,.30), inset 0 -1px 5px rgba(233,161,60,.10);
}
.category-card::after {
  content:''; position:absolute; z-index:4; pointer-events:none;
  left:6%; width:88%; bottom:-34px; height:44px; right:auto; top:auto;
  background:url('../assets/gold-card-reflection-v5.svg') center top/100% 100% no-repeat;
  opacity:.98; filter:none; transform:none;
}
.category-card:hover::after { opacity:1; filter:brightness(1.06); }
.category-label { left:18px; bottom:18px; gap:11px; font-size:25px; z-index:3; }
.category-label .icon { width:30px; height:30px; filter:drop-shadow(0 0 4px rgba(255,201,112,.25)); }
.category-arrow { right:14px; bottom:22px; z-index:3; }

.menu-item-thumb::after {
  left:8%; right:8%; bottom:-16px; height:28px;
  background:url('../assets/gold-card-reflection-v5.svg') center top/100% 100% no-repeat;
  opacity:.74; filter:none;
}
.menu-item::after {
  background: radial-gradient(ellipse 44% 8px at 50% 66%, rgba(247,170,67,.12), transparent 88%);
  bottom:-15px; filter:blur(7px);
}

@media (max-width:1080px) and (min-width:761px) {
  .category-section { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; }
  .category-card { height:180px; }
}
@media (max-width:760px) {
  .category-section { grid-template-columns:1fr; gap:22px; margin-bottom:26px; }
  .category-card { height:126px; border-radius:17px; }
  .category-card .category-image, .category-card .category-shade, .category-card::before { border-radius:16px; }
  .category-card::after { left:7%; width:86%; bottom:-26px; height:35px; }
  .category-label { font-size:26px; left:21px; bottom:14px; gap:13px; }
  .category-arrow { right:18px; bottom:18px; }
}
@media (max-width:360px) {
  .category-card { height:119px; }
  .category-label { font-size:23px; }
}

/* V6 | Art-directed assets faithfully extracted from the approved mockup.
   The clickable card is still a normal link; only its ornament/photo is artwork.
   No pseudo-reflection, harsh CSS glare, cross-shaped flare, or uneven card effects. */
.visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.site-header::before {display:none!important;}
.site-header::after {
 content:"";position:absolute;left:0;right:0;top:calc(100% - 32px);bottom:auto;
 height:96px;pointer-events:none;z-index:1;
 background:url('../assets/approved-gold-header-wave.png') center / 100% 100% no-repeat;
 opacity:.97;filter:none;mix-blend-mode:screen;
}
.category-section {
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:6px;margin-top:0;margin-bottom:0;
 align-items:start;
}
.category-card,.category-card:hover,.category-card:focus-visible {
 display:block;position:relative;overflow:visible;isolation:auto;
 height:auto!important;aspect-ratio:384 / 260;min-width:0;
 background:transparent;border:0!important;border-radius:0;
 box-shadow:none!important;filter:none;
}
.category-card {transition:transform .24s ease,filter .24s ease;}
.category-card:hover,.category-card:focus-visible {transform:translateY(-4px);filter:brightness(1.08) drop-shadow(0 0 5px rgba(248,185,78,.13));}
.category-card::before,.category-card::after,.category-card:hover::before,.category-card:hover::after {content:none!important;display:none!important;}
.category-card > :not(.approved-card-art):not(.visually-hidden) {display:none!important;}
.approved-card-art {display:block;width:100%;height:auto;aspect-ratio:384 / 260;object-fit:fill;user-select:none;pointer-events:none;}
.highlights {margin-top:0!important;}
@media(max-width:1080px) and (min-width:761px){
 .category-section {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:0;margin-bottom:0;}
}
@media(max-width:760px){
 .site-header::after{top:calc(100% - 24px);height:76px;}
 .category-section {grid-template-columns:1fr;gap:0;margin-top:0;margin-bottom:0;}
 .category-card {height:auto!important;aspect-ratio:384 / 260;}
}
@media(max-width:360px){.category-card {height:auto!important;}}
@media(prefers-reduced-motion:reduce){.category-card:hover {transform:none;}}
/* V6 polish — soft horizontal active-navigation shimmer, never a + shape. */
.nav-link::after,.nav-link.active::after,.nav-link:hover::after {
  background-image:url('../assets/gold-nav-focus-v6.svg');
  background-size:100% 100%;
}


/* ==========================================================================
   V7 — real text/icons over high-resolution photorealistic category images.
   Clean gold optical glows without gray artifacts.
   ========================================================================== */
.site-header::after {
  background:url('../assets/gold-header-wave-v7.svg') center/100% 100% no-repeat !important;
  top:calc(100% - 30px) !important; height:88px !important; opacity:.96 !important;
}
@media(max-width:760px){ .site-header::after { top:calc(100% - 22px) !important; height:68px !important; } }

.nav-link::after,.nav-link.active::after,.nav-link:hover::after {
  background-image:url('../assets/gold-nav-focus-v7.svg') !important;
  height:24px !important; bottom:-6px !important;
}

/* Undo v6 art-only card behavior */
.category-card > :not(.approved-card-art):not(.visually-hidden) { display:block !important; }
.approved-card-art { display:none !important; }
.category-card::before,.category-card::after { display:block !important; }

.category-section {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important; margin-top:8px !important; margin-bottom:34px !important;
  align-items:start !important;
}
.category-card,.category-card:hover,.category-card:focus-visible {
  position:relative !important; display:block !important; aspect-ratio:auto !important;
  height:176px !important; border-radius:20px !important; overflow:visible !important;
  background:#101010 !important; border:1px solid rgba(229,182,105,.66) !important;
  box-shadow:0 0 0 1px rgba(74,48,20,.66), inset 0 1px 0 rgba(255,244,221,.20), inset 0 -1px 0 rgba(240,180,87,.12), 0 12px 26px rgba(0,0,0,.58), 0 2px 8px rgba(231,151,51,.08) !important;
  filter:none !important; transform:none;
}
.category-card:hover,.category-card:focus-visible {
  transform:translateY(-4px) !important;
  border-color:rgba(247,215,154,.88) !important;
  box-shadow:0 0 0 1px rgba(247,197,107,.36), inset 0 1px 0 rgba(255,247,228,.28), inset 0 -1px 0 rgba(246,191,98,.18), 0 16px 33px rgba(0,0,0,.65), 0 0 18px rgba(240,168,69,.16) !important;
}
.category-image,.category-shade,.category-card::before { border-radius:19px !important; }
.category-image {
  position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center 44% !important;
  filter:brightness(1.02) saturate(1.04) contrast(1.02) !important; transition:transform .55s ease, filter .25s ease; z-index:0 !important;
}
.category-card:hover .category-image { transform:scale(1.02) !important; filter:brightness(1.08) saturate(1.08) contrast(1.03) !important; }
.category-shade {
  position:absolute !important; inset:0 !important; z-index:1 !important;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,0) 72%), linear-gradient(90deg, rgba(0,0,0,.08), transparent 46%) !important;
}
.category-card::before {
  content:'' !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important;
  background:radial-gradient(ellipse 92px 68px at 10% 7%, rgba(255,249,234,.42) 0%, rgba(255,249,234,.09) 28%, transparent 74%), linear-gradient(132deg, rgba(255,251,241,.18) 0%, rgba(255,251,241,.03) 18%, transparent 29%), radial-gradient(ellipse 60% 43% at 50% -34%, rgba(255,255,255,.16), transparent 78%), radial-gradient(ellipse 78px 34px at 84% 97%, rgba(255,185,81,.12), transparent 86%) !important;
  box-shadow: inset 0 1px 0 rgba(255,247,226,.30), inset 0 -1px 5px rgba(233,161,60,.10) !important;
}
.category-card::after {
  content:'' !important; position:absolute !important; left:7% !important; width:86% !important; bottom:-32px !important; height:42px !important;
  background:url('../assets/gold-card-reflection-v7.svg') center top/100% 100% no-repeat !important; opacity:1 !important; z-index:4 !important;
}
.category-label {
  position:absolute !important; left:18px !important; bottom:17px !important; z-index:3 !important; display:flex !important; align-items:center !important; gap:11px !important;
  font-size:25px !important; text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6) !important;
}
.category-label .icon { width:30px !important; height:30px !important; filter:drop-shadow(0 0 4px rgba(255,201,112,.18)) !important; }
.category-arrow { position:absolute !important; right:14px !important; bottom:22px !important; width:22px !important; height:22px !important; z-index:3 !important; }

.menu-item-thumb::after { background:url('../assets/gold-card-reflection-v7.svg') center top/100% 100% no-repeat !important; left:10% !important; right:10% !important; bottom:-16px !important; height:26px !important; opacity:.66 !important; }

@media(max-width:1080px) and (min-width:761px){
  .category-section { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 18px !important; }
  .category-card,.category-card:hover,.category-card:focus-visible { height:182px !important; }
}
@media(max-width:760px){
  .category-section { grid-template-columns:1fr !important; gap:22px !important; margin-bottom:24px !important; }
  .category-card,.category-card:hover,.category-card:focus-visible { height:126px !important; border-radius:17px !important; }
  .category-image,.category-shade,.category-card::before { border-radius:16px !important; }
  .category-card::after { left:8% !important; width:84% !important; bottom:-25px !important; height:32px !important; }
  .category-label { left:20px !important; bottom:14px !important; font-size:26px !important; gap:12px !important; }
  .category-arrow { right:18px !important; bottom:18px !important; }
}
@media(max-width:360px){
  .category-card,.category-card:hover,.category-card:focus-visible { height:119px !important; }
  .category-label { font-size:23px !important; }
}


/* V11 — food categories as sections with real products, no category tabs. */
.menu-tabs[hidden] { display: none !important; }
.food-group-list {
  display: block;
  max-width: 1120px;
  margin: 22px auto 0;
}
.food-group { margin: 0 0 38px; scroll-margin-top: 35px; }
.food-group-heading {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 20px;
  padding: 0 4px 11px;
}
.food-group-heading::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(234,178,92,.62), rgba(234,178,92,.22) 42%, transparent);
  box-shadow: 0 0 6px rgba(228,157,60,.12);
}
.food-group-heading h2 {
  margin: 0;
  font: 400 clamp(25px, 2.5vw, 36px)/1.15 var(--serif);
  color: #f5ece0;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.food-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 17px;
  row-gap: 22px;
}
.food-menu-item {
  min-width: 0;
  animation: none;
}
.food-menu-item .menu-item-info h3 { margin: 0; line-height: 1.3; }
.food-menu-item .menu-item-info { min-height: 0; }
@media(max-width:760px) {
  .food-group-list { margin-top: 18px; }
  .food-group { margin-bottom: 32px; }
  .food-group-heading { gap: 13px; margin-bottom: 16px; }
  .food-group-heading h2 { font-size: 27px; }
  .food-group-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .food-menu-item .menu-item-info h3 { font-size: 20px; }
}
@media(max-width:360px) {
  .food-group-heading h2 { font-size: 24px; }
  .food-menu-item .menu-item-info h3 { font-size: 18px; }
}


/* V11.1 — expandable food photo modal: native, accessible and responsive. */
.food-menu-item {
  position: relative;
  cursor: zoom-in;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.food-menu-item:hover, .food-menu-item:focus-within {
  border-color: rgba(246,198,114,.7);
  box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 14px rgba(219,151,57,.2), inset 0 1px rgba(252,219,157,.17);
  transform: translateY(-2px);
}
.food-card-open {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:6;
  padding:0; margin:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:zoom-in;
}
.food-card-open:focus-visible {
  outline:2px solid #ffe4a9;
  outline-offset:3px;
}
body.food-lightbox-open { overflow:hidden; }
.food-lightbox {
  position:fixed;
  inset:0;
  margin:auto;
  padding:0;
  width:min(92vw, 880px);
  max-width:880px;
  max-height:calc(100dvh - 28px);
  overflow:auto;
  overscroll-behavior:contain;
  color:var(--platinum);
  background:linear-gradient(160deg,#202021,#0a0b0c 70%);
  border:1px solid rgba(245,196,111,.72);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(108,66,20,.4), 0 18px 80px #000d, 0 0 32px rgba(232,150,50,.18);
}
.food-lightbox:not([open]) { display:none; }
.food-lightbox[open] { display:block; animation:food-modal-enter .2s ease-out both; }
.food-lightbox::backdrop {
  background:rgba(1,2,3,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.food-lightbox-panel { display:flex; flex-direction:column; padding:23px 25px 22px; gap:18px; }
.food-lightbox-header { text-align:center; }
.food-lightbox-kicker {
  display:block;
  font:11px/1.4 var(--sans);
  color:#c7a36d;
  letter-spacing:.22em;
  margin:0 0 10px;
}
.food-lightbox-header h2 {
  margin:0;
  color:#fff4e3;
  font:400 clamp(25px,3.5vw,39px)/1.2 var(--serif);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.food-lightbox-photo-frame {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(213,166,94,.42);
  border-radius:13px;
  background:#090909;
  box-shadow:inset 0 0 12px rgba(223,165,75,.07);
}
.food-lightbox-photo-frame img {
  display:block;
  max-width:100%;
  width:auto;
  max-height:min(67dvh, 740px);
  height:auto;
  object-fit:contain;
  image-rendering:auto;
}
.food-lightbox-footer { display:flex; justify-content:center; }
.food-lightbox-close {
  min-width:160px;
  min-height:46px;
  padding:9px 28px;
  font:400 20px/1.2 var(--serif);
  color:#fff1d7;
  background:linear-gradient(180deg,rgba(56,39,19,.85),rgba(14,14,14,.96));
  border:1px solid #d6a252;
  border-radius:999px;
  box-shadow:0 0 16px rgba(225,150,48,.15),inset 0 1px rgba(255,243,216,.14);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.food-lightbox-close:hover, .food-lightbox-close:focus-visible {
  border-color:#ffe0a1;
  background:linear-gradient(180deg,#6a471e,#1d160f);
  box-shadow:0 0 20px rgba(239,177,78,.36);
}
@keyframes food-modal-enter {
  from { opacity:0; transform:translateY(8px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media(max-width:760px) {
  .food-lightbox { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:16px; }
  .food-lightbox-panel { padding:18px 14px 16px; gap:14px; }
  .food-lightbox-kicker { font-size:10px; letter-spacing:.13em; margin-bottom:7px; }
  .food-lightbox-header h2 { font-size:clamp(23px,6vw,32px); }
  .food-lightbox-photo-frame img { max-height:61dvh; }
  .food-lightbox-close { min-height:46px; }
}
@media(prefers-reduced-motion:reduce) {
  .food-lightbox[open] { animation:none; }
  .food-menu-item { transition:none; }
}


/* V11.2 — premium mobile photo grid and comfortable touch-first food viewer. */
.food-menu-item .menu-item-thumb { overflow:visible; }
.food-menu-item .menu-item-image { image-rendering:auto; }
.food-card-open { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.food-menu-item:focus-within { outline:1px solid rgba(246,205,133,.55); outline-offset:2px; }
.food-lightbox:focus { outline:none; }

@media (max-width:760px) {
  /* Two-column food gallery: visual browsing first, large detailed photo on tap. */
  .menu-layout.content-width { width:calc(100% - 28px); max-width:600px; }
  .food-group-list { margin:15px auto 0; }
  .food-group { margin-bottom:31px; }
  .food-group-heading {
    margin:0 0 13px;
    padding:3px 2px 9px;
    align-items:center;
    gap:11px;
  }
  .food-group-heading h2 {
    font-size:clamp(25px,6.5vw,32px);
    line-height:1.15;
    color:#f6f0e9;
    text-shadow:0 2px 9px #000a;
  }
  .food-group-heading::after {
    height:1px;
    background:linear-gradient(90deg,rgba(246,193,105,.7),rgba(214,151,56,.2) 60%,transparent);
  }
  .food-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 11px; }
  .food-menu-item {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-width:0;
    min-height:0;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(224,176,101,.45);
    border-radius:15px;
    background:linear-gradient(158deg,#23211e 0%,#151617 56%,#101213 100%);
    box-shadow:0 8px 19px #0008,inset 0 1px rgba(255,239,204,.12);
    transform:none;
    transition:border-color .2s,box-shadow .2s;
  }
  .food-menu-item:hover,.food-menu-item:focus-within {
    transform:none;
    border-color:rgba(251,205,126,.8);
    box-shadow:0 10px 21px #000a,0 0 13px #d39b4e33,inset 0 1px #fff1d42c;
  }
  .food-menu-item .menu-item-thumb {
    flex:0 0 auto;
    width:100%;
    height:auto;
    aspect-ratio:1.25/1;
    min-height:0;
    position:relative;
    overflow:hidden;
    border-radius:14px 14px 0 0;
    background:#191715;
  }
  .food-menu-item .menu-item-image {
    display:block;
    width:100%;
    height:100%;
    border:0;
    border-radius:14px 14px 0 0;
    object-fit:cover;
    object-position:50% 50%;
    box-shadow:none;
  }
  .food-menu-item .menu-item-thumb::after { display:none; }
  .food-menu-item .menu-item-thumb::before {
    z-index:3;
    border-radius:14px 14px 0 0;
    background:linear-gradient(138deg,rgba(255,245,222,.20),transparent 24%),linear-gradient(0deg,rgba(0,0,0,.16),transparent 44%);
    box-shadow:inset 0 1px 1px rgba(255,242,220,.26);
  }
  .food-menu-item .menu-item-info {
    min-height:71px;
    display:flex;
    flex:1;
    justify-content:center;
    padding:12px 12px 13px;
    background:radial-gradient(ellipse at 50% 0,rgba(217,160,75,.09),transparent 66%);
  }
  .food-menu-item .menu-item-info h3 {
    font-size:clamp(15px,3.9vw,19px);
    line-height:1.28;
    margin:0;
    overflow-wrap:anywhere;
    text-align:center;
    color:#f8f0e6;
    font-weight:400;
  }
  .food-menu-item::after {
    z-index:2;
    left:10%; right:10%;
    bottom:-9px; height:19px;
    opacity:.5;
    filter:blur(7px);
  }
  .food-card-open { border-radius:15px; }

  .food-lightbox {
    width:calc(100vw - 16px);
    max-width:620px;
    max-height:calc(100dvh - 18px);
    border-radius:18px;
    border:1px solid rgba(249,208,132,.76);
  }
  .food-lightbox-panel {
    padding:19px 13px 17px;
    gap:15px;
  }
  .food-lightbox-kicker { font-size:10px; letter-spacing:.13em; margin-bottom:8px; }
  .food-lightbox-header h2 { font-size:clamp(23px,6.5vw,34px); line-height:1.18; }
  .food-lightbox-photo-frame { border-radius:12px; }
  .food-lightbox-photo-frame img {
    max-width:100%;
    width:100%;
    height:auto;
    max-height:57dvh;
    object-fit:contain;
  }
  .food-lightbox-close {
    width:min(100%,260px);
    min-height:50px;
    font-size:19px;
    touch-action:manipulation;
  }
}
@media (max-width:350px) {
  .menu-layout.content-width { width:calc(100% - 26px); }
  .food-group-grid { grid-template-columns:1fr; gap:12px; }
  .food-menu-item { flex-direction:row; gap:0; min-height:120px; }
  .food-menu-item .menu-item-thumb { width:44%; flex:0 0 44%; height:auto; aspect-ratio:auto; border-radius:14px 0 0 14px; }
  .food-menu-item .menu-item-image { border-radius:14px 0 0 14px; }
  .food-menu-item .menu-item-thumb::before { border-radius:14px 0 0 14px; }
  .food-menu-item .menu-item-info { padding:10px; min-height:118px; }
  .food-menu-item .menu-item-info h3 { font-size:16px; }
}
@media (max-width:760px) and (orientation:landscape) {
  .food-lightbox-photo-frame img { max-height:46dvh; width:auto; }
  .food-lightbox-panel { gap:9px; padding:10px 12px; }
  .food-lightbox-header h2 { font-size:23px; }
  .food-lightbox-kicker { margin-bottom:3px; }
  .food-lightbox-close { min-height:40px; }
}


/* v12 — grouped, editable options with distinct price tiers. */
.food-menu-item--variants { min-height:215px; }
.food-menu-item--variants .menu-item-thumb { height:190px; }
.food-menu-item--variants .menu-item-info { min-height:170px; }
.food-menu-item--variants .menu-item-info h3 { margin:0 0 13px; }
.food-variant-list { display:flex; flex-direction:column; gap:0; width:100%; min-width:0; }
.food-variant-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; padding:8px 0; border-top:1px solid rgba(231,174,85,.19);
  font:14px/1.45 var(--sans); color:#f1e5d5;
}
.food-variant-row:last-child { padding-bottom:2px; }
.food-variant-name { min-width:0; overflow-wrap:break-word; }
.food-variant-price { white-space:nowrap; color:#f5cf87; font-weight:600; font-variant-numeric:tabular-nums; }
.food-menu-item .price-pill { white-space:nowrap; font-variant-numeric:tabular-nums; }
.food-lightbox-details { display:flex; align-items:center; justify-content:center; min-height:0; }
.food-lightbox-price {
  display:inline-block; padding:8px 22px; border:1px solid rgba(233,182,98,.7);
  color:#ffdd9f; border-radius:999px; font:600 19px/1.3 var(--sans); font-variant-numeric:tabular-nums;
  background:rgba(180,121,45,.11);
}
.food-variant-list--modal { width:min(100%,610px); }
.food-variant-list--modal .food-variant-row { font-size:16px; padding:11px 0; }
.food-variant-list--modal .food-variant-price { font-size:17px; }
@media(max-width:760px) {
  .food-menu-item .menu-item-info { padding-bottom:14px; }
  .food-menu-item .menu-meta { justify-content:center; padding-top:9px; }
  /* Variant entries are full-width cards for readable options and price tiers. */
  .food-group-grid .food-menu-item--variants {
    grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 42%) minmax(0, 1fr);
    align-items:stretch; min-height:205px; gap:0;
  }
  .food-menu-item--variants .menu-item-thumb { width:100%; height:100%; min-height:205px; aspect-ratio:auto; border-radius:14px 0 0 14px; }
  .food-menu-item--variants .menu-item-image { border-radius:14px 0 0 14px; }
  .food-menu-item--variants .menu-item-thumb::before { border-radius:14px 0 0 14px; }
  .food-menu-item--variants .menu-item-info { min-height:205px; padding:12px 13px; }
  .food-menu-item--variants .menu-item-info h3 { text-align:left; font-size:21px; margin-bottom:9px; }
  .food-menu-item--variants .food-variant-row { font-size:12px; gap:6px; padding:7px 0; }
  .food-menu-item--variants .food-variant-price { font-size:12px; }
  .food-variant-list--modal .food-variant-row { font-size:13px; gap:14px; }
  .food-variant-list--modal .food-variant-price { font-size:14px; }
}
@media(max-width:350px) {
  .food-menu-item--variants .menu-item-thumb, .food-menu-item--variants .menu-item-info { min-height:222px; }
  .food-menu-item--variants .menu-item-info { padding:9px; }
  .food-menu-item--variants .menu-item-info h3 { font-size:18px; }
  .food-menu-item--variants .food-variant-row { flex-wrap:wrap; }
}


/* v13 — identical outlined gold price pills across single dishes, variant tiers,
   and the full-size photo modal. No naked numeric price labels. */
.food-menu-item .price-pill,
.food-lightbox-details .price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  min-width: 82px;
  padding: 6px 13px;
  border: 1px solid #f3bc67;
  border-radius: 999px;
  background: #b8904612;
  color: #f8d69a;
  box-shadow: 0 0 10px #e6a94b3d, inset 0 0 8px #e6a94b20;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
}
.food-variant-row { align-items: center; }
.food-variant-price.price-pill,
.food-lightbox-price.price-pill { margin-left: auto; }
.food-lightbox-price.price-pill { margin-left: 0; }
@media (max-width: 760px) {
  .food-menu-item .price-pill,
  .food-lightbox-details .price-pill {
    min-width: 74px;
    padding: 5px 10px;
    font-size: 15px;
  }
  .food-menu-item--variants .food-variant-row { flex-wrap: wrap; }
}
@media (max-width: 350px) {
  .food-menu-item .price-pill,
  .food-lightbox-details .price-pill {
    min-width: 69px;
    font-size: 14px;
  }
}

/* v14 — factual footer and hours (no placeholder contact details). */
@media (min-width:761px) {
  .footer-inner { grid-template-columns: 1.3fr 1fr 1.35fr; }
}
.contact-grid { max-width:900px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
.contact-card p { line-height:1.55; margin-bottom:6px; }
@media (max-width:760px) {
  .contact-grid { grid-template-columns:1fr; }
}

/* v15 — dessert gallery follows the same polished, mobile-first photo cards as Foods. */
.food-lightbox-details {gap:14px; flex-wrap:wrap;}
.food-lightbox-size {font:15px/1.35 var(--sans); color:#c8b9a5;}
.food-group[aria-label="Десерти"] .food-group-grid {padding-top:10px;}
.food-group[aria-label="Десерти"] {margin-bottom:0;}
@media(max-width:760px) {
 .food-group[aria-label="Десерти"] .food-group-grid {padding-top:4px;}
}

/* v16 — verified portion weights in food cards and enlarged photo viewer. */
.food-variant-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.food-variant-size {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: #c5ae90;
  letter-spacing: .02em;
  white-space: nowrap;
}
.food-variant-row { align-items: center; }
.food-menu-item .menu-meta > span:not(.price-pill) {
  color: #c5ae90;
  font-family: var(--sans);
  font-size: 13px;
}
.food-lightbox-details .food-variant-size { font-size: 13px; }
@media (max-width: 760px) {
  .food-variant-size { font-size: 11px; }
  .food-menu-item--variants .menu-item-info { min-height: 218px; }
  .food-menu-item--variants .menu-item-thumb { min-height: 218px; }
  .food-variant-list--modal .food-variant-size { font-size: 12px; }
}
@media (max-width: 350px) {
  .food-menu-item--variants .menu-item-info { min-height: 235px; }
  .food-menu-item--variants .menu-item-thumb { min-height: 235px; }
}

/* v17 – Sauces use the same mobile-first photo cards as desserts. */
.food-group[aria-label="Сосове"] .food-group-grid { padding-top: 10px; }
@media(max-width:760px) {.food-group[aria-label="Сосове"] .food-group-grid {padding-top:4px;}}

/* Center the last sauce tile when there is an odd number in a two-column grid. */
@media (min-width: 351px) {
  .food-group[aria-label="Сосове"] .food-group-grid > .food-menu-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 7px);
    justify-self: center;
  }
}

/* v18 — Mobile-only variant cards: keep the original, full product image
   inside a centered square photo area. Empty space above/below the image
   uses the SAME dark background as the card, rather than stretched/cropped
   photography. The surrounding layout and desktop cards are unchanged. */
@media (max-width: 760px) {
  .food-group-grid .food-menu-item--variants {
    /* Retain a single horizontal card with a photo column and text column. */
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: stretch;
  }

  .food-menu-item--variants .menu-item-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 14px 0 0 14px;
    background: transparent;
  }

  .food-menu-item--variants .menu-item-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    min-width: 0;
    object-fit: contain;
    object-position: center center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .food-menu-item--variants .menu-item-thumb::before,
  .food-menu-item--variants .menu-item-thumb::after {
    content: none;
    display: none;
  }
}

/* Very narrow screens still keep the centered square image for products
   with multiple variants; ordinary single-product cards are unchanged. */
@media (max-width: 350px) {
  .food-menu-item--variants .menu-item-thumb {
    min-height: 0;
    height: 100%;
  }
}