/* Ken'z Cuisine prototype: overrides on the mirrored Webflow CSS.
   Replaces Webflow IX2/IX3 + GSAP with plain CSS (driven by tf.js) and removes every blur (Gene dislikes blur). */

/* No blur anywhere: solid or semi-transparent fills instead */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.card.on-inverse { background-color: var(--_colors---core-color-tint--neutral-inverse-a60); }
.overlay.backdrop-filter_blur_medium { background-color: var(--_colors---core-color-tint--neutral-inverse-a70); }
.card.card-contact { background-color: var(--_colors---core-color-tint--neutral-inverse-a80); }
.section-fixed-menu-categories { background-color: var(--_colors---core-color-tint--neutral-inverse-a80) !important; }

/* Hovers that snapped on the live site get a short transition */
.button, .uui-navbar07_link, .uui-navbar07_dropdown-toggle, .uui-navbar07_dropdown-link, .link-contact-info {
	transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}

/* Hamburger -> X (IX2 a-3/a-4: inOutQuint, middle line returns after 400 ms) */
.menu-icon_line-top, .menu-icon_line-bottom { transition: transform .5s cubic-bezier(.83, 0, .17, 1); }
.menu-icon_line-middle { transition: width .2s cubic-bezier(.83, 0, .17, 1) .4s; }
.w-nav-button.w--open .menu-icon_line-top { transform: translateY(8px) rotate(-45deg); }
.w-nav-button.w--open .menu-icon_line-bottom { transform: translateY(-8px) rotate(45deg); }
.w-nav-button.w--open .menu-icon_line-middle { width: 0; transition-delay: 0s; }

/* Mobile/tablet nav menu slides down (w-nav data-animation=default, 400 ms ease) */
@media screen and (max-width: 991px) {
	.w-nav[data-collapse=medium] .w-nav-menu {
		display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - 4.5rem); overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .4s ease, transform .4s ease, visibility 0s .4s;
	}
	.w-nav[data-collapse=medium] .w-nav-menu[data-tf-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* "Menu" dropdown: chevron turns, list fades/slides on desktop and grows its height on tablet/phone */
/* Menu caret (Gene): points up while closed, turns to point down when the dropdown opens (hover or tap) */
.uui-dropdown-icon { transform: rotate(180deg); transition: transform .3s ease; }
.w-dropdown-toggle.w--open .uui-dropdown-icon { transform: rotate(0deg); }
@media screen and (min-width: 992px) {
	.uui-navbar07_dropdown-list {
		display: block; border: 1px solid var(--untitled-ui--gray200); background-color: var(--_colors---core-neutral-color--neutral-primary);
		border-radius: .75rem; width: 350px; padding: .75rem; right: -100%;
		box-shadow: 0 0 20px 5px #0003, 0 12px 16px -4px #00000014, 0 4px 6px -2px #10182808;
		opacity: 0; visibility: hidden; transform: translateY(-2rem); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
		/* While it slides up it passes over Home / Our Story: closing (and closed) must not take the pointer, or it
		   re-hovers the dropdown, re-opens and bounces. Only the open panel is hit-testable. */
		pointer-events: none;
	}
	.uui-navbar07_dropdown-list.w--open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; }
}
@media screen and (max-width: 991px) {
	.uui-navbar07_dropdown-list {
		display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
		transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s .3s;
	}
	.uui-navbar07_dropdown-list > * { min-height: 0; overflow: hidden; }
	.uui-navbar07_dropdown-list.w--open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* Phone bar: "Menu" is a real button; the category overlay fades in while tf.js deals its tiles out from the
   Menu icon (Web Animations; reduced motion keeps only the fade) */
button.link-block-fixed-menu-button-wrapper {
	appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; width: 100%;
}
@media screen and (max-width: 479px) {
	.section-fixed-menu-categories {
		display: flex; opacity: 0; visibility: hidden; transition: opacity .25s cubic-bezier(.37, 0, .63, 1), visibility 0s .25s;
	}
	.section-fixed-menu-categories[data-open] { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.61, 1, .88, 1); }
	.collection-item-fixed-menu-categories { will-change: transform, opacity; }
}
@media screen and (max-width: 479px) and (prefers-reduced-motion: reduce) {
	.section-fixed-menu-categories, .section-fixed-menu-categories[data-open] { transition-duration: .2s, 0s; }
}
html.tf-scroll-lock, html.tf-scroll-lock body { overflow: hidden; }

/* Reveals on Home and Contact (tf.js watches each element): hero card, testimonial/gallery cards and contact card
   fade in and slide up to a stop; the Explore Our Menu tiles also scale up, as in the original IX3. 1 s,
   cubic-bezier(.22,1,.36,1), 80 ms apart when several enter together. Static without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html.tf-reveal .section .card {
		opacity: 0; transform: translateY(100%);
		transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
		transition-delay: var(--tf-delay, 0s);
	}
	html.tf-reveal .section .div-menu-category {
		opacity: 0; transform: translateY(100%) scale(0);
		transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
		transition-delay: var(--tf-delay, 0s);
	}
	html.tf-reveal .section .card.tf-in, html.tf-reveal .section .div-menu-category.tf-in { opacity: 1; transform: none; }
	html.tf-reveal .section .card.tf-done, html.tf-reveal .section .div-menu-category.tf-done { transition-delay: 0s; }
}
/* Scrolled past before it could play: show at once */
html .tf-instant, html .tf-instant > * { transition: none !important; }

/* Lightbox (replaces w-lightbox): plain dialog, fade, Esc / backdrop / button to close */
.tf-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; opacity: 0; transition: opacity .25s ease; }
.tf-lightbox[open] { opacity: 1; }
.tf-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.tf-lightbox img { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 6px; }
.tf-lightbox-close {
	position: absolute; top: -2.5rem; right: 0; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.4rem; line-height: 2rem; cursor: pointer;
}
.tf-lightbox-close:hover { background: rgba(255, 255, 255, .3); }
@starting-style { .tf-lightbox[open] { opacity: 0; } }

/* Map embed fills the widget box */
.tf-map { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; }

/* Dish viewer (tf-viewer.js): full-screen, image left + details right on desktop, details below on phones.
   Solid fills only, no blur. */
.tf-viewer {
	position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgb(42, 30, 24); color: var(--_colors---core-neutral-color--neutral-primary, #fefefe);
	display: none; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); overflow: hidden;
	font-family: var(--_typography---font--body-font, sans-serif);
}
.tf-viewer[open] { display: grid; }
.tf-viewer::backdrop { background: transparent; }
.tf-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 4.5rem 5.5rem; touch-action: pinch-zoom; }
.tf-viewer-frame { position: relative; display: grid; width: 100%; height: 100%; place-items: center; }
.tf-viewer-figure { grid-area: 1 / 1; margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.tf-viewer-shot { position: relative; flex: none; overflow: hidden; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); background: rgba(254, 254, 254, .06); transform-origin: center; }
.tf-viewer-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-viewer-placeholder {
	display: flex; align-items: center; justify-content: center; width: min(70%, 520px); aspect-ratio: 1; border-radius: 12px;
	background: rgba(254, 254, 254, .08); border: 1px dashed rgba(254, 254, 254, .35); text-align: center;
	font-family: var(--_typography---font--heading-font, sans-serif); font-size: 1.4rem; line-height: 1.3; color: rgba(254, 254, 254, .8);
}
.tf-viewer-panel {
	display: flex; flex-direction: column; gap: 1.25rem; padding: 4.5rem 2.5rem 2.5rem; background: rgba(254, 254, 254, .06);
	border-left: 1px solid rgba(254, 254, 254, .12); overflow-y: auto;
}
.tf-viewer-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(254, 254, 254, .7); }
.tf-viewer-details { display: grid; }
.tf-viewer-text { grid-area: 1 / 1; }
.tf-viewer-name { margin: 0 0 .5rem; font-family: var(--_typography---font--heading-font, sans-serif); font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1.15; color: inherit; }
/* Warm gold: 6.96:1 on the panel (rgb(55, 43, 38)), AA for any text size */
.tf-viewer-price { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 700; color: #e0b25c; letter-spacing: .01em; }
.tf-viewer-description { margin: 0; font-size: 1.05rem; line-height: 1.6; color: rgba(254, 254, 254, .88); }
.tf-viewer button { cursor: pointer; font: inherit; }
.tf-viewer-nav, .tf-viewer-close {
	position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(254, 254, 254, .3);
	background: rgba(254, 254, 254, .1); color: #fefefe; border-radius: 50%; padding: 0;
	transition: background-color .2s, border-color .2s, transform .2s;
}
.tf-viewer-nav { top: 50%; width: 3.25rem; height: 3.25rem; margin-top: -1.625rem; font-size: 2.2rem; line-height: 1; }
.tf-viewer-nav span, .tf-viewer-close span { display: block; margin-top: -.15em; }
.tf-viewer-prev { left: 1.25rem; }
.tf-viewer-next { right: 1.25rem; }
.tf-viewer-close { top: 1.1rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; font-size: 1.8rem; z-index: 2; }
.tf-viewer-nav:hover, .tf-viewer-close:hover { background: rgba(254, 254, 254, .24); border-color: rgba(254, 254, 254, .6); }
.tf-viewer-nav:hover { transform: scale(1.06); }
.tf-viewer-nav:active { transform: scale(.96); }
.tf-viewer-nav:focus-visible, .tf-viewer-close:focus-visible { outline: 2px solid var(--_colors---core-accent-color--accent-primary, #e33529); outline-offset: 2px; }
.section-menu-items a.w-lightbox { cursor: zoom-in; }
.section-menu-items a.w-lightbox img { transition: transform .3s ease, filter .3s ease; }
.section-menu-items a.w-lightbox:hover img { transform: scale(1.03); }

@media screen and (max-width: 767px) {
	.tf-viewer { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58dvh) minmax(0, 1fr); overflow-y: auto; }
	.tf-viewer-stage { padding: 3.75rem 1rem 1rem; }
	.tf-viewer-panel { padding: 1.25rem 1.5rem 2rem; border-left: 0; border-top: 1px solid rgba(254, 254, 254, .12); gap: .75rem; }
	.tf-viewer-nav { top: auto; bottom: 1.5rem; margin-top: 0; width: 2.75rem; height: 2.75rem; font-size: 1.9rem; background: rgba(49, 35, 28, .75); }
	.tf-viewer-prev { left: 1.5rem; }
	.tf-viewer-next { right: 1.5rem; }
	.tf-viewer-close { top: .75rem; right: .75rem; }
	.tf-viewer-name { font-size: 1.5rem; }
}

/* Allergy warnings: small muted outline badges in the surrounding text colour (no fill, so they sit quietly
   next to the red page prices and the viewer's gold price) */
.tf-allergies { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .25rem; padding: 0; list-style: none; }
.tf-allergies li {
	display: inline-flex; align-items: center; gap: .3em; padding: .1rem .55rem; border-radius: 999px;
	background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
	font-size: .75rem; font-weight: 500; line-height: 1.4; letter-spacing: .02em;
}
.tf-allergies li::before { content: "\26A0\FE0E"; font-size: .85em; opacity: .7; }
.tf-viewer-allergies { margin-top: 1.25rem; }
.tf-viewer-allergies li { color: rgba(254, 254, 254, .82); font-size: .85rem; }

/* Menu category pages: eyebrow, heading, description, Reserve button, then each item fade in and slide to a stop
   (same 100% rise, 1 s and power4.out as the home reveals), each starting ~80 ms after the previous (about a third
   of the way into its ease-out travel). Left column on load; items as they scroll in. */
@media (prefers-reduced-motion: no-preference) {
	html.tf-reveal-menu [data-tf-stagger] {
		opacity: 0; transform: translateY(100%);
		transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
		transition-delay: var(--tf-delay, 0s);
	}
	html.tf-reveal-menu [data-tf-stagger].tf-in { opacity: 1; transform: none; }
	html.tf-reveal-menu [data-tf-stagger].tf-done { transition-delay: 0s; }
	/* Items: the list item stays in place (it's what the observer watches, so the last card can always trigger)
	   and its card does the slide */
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger] { transform: none; transition-property: opacity; }
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger] > * {
		transform: translateY(100%); transition: transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--tf-delay, 0s);
	}
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger].tf-in > * { transform: none; }
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger].tf-done > * { transition-delay: 0s; }
}

/* Phones: stable heights and a steady bottom bar (Gene, 2026-10-20).
   Webflow sized the home hero with 100dvh, which re-flows the whole page every time the mobile URL bar shows or
   hides; svh never changes while scrolling. --tf-bar-h is the phone bar's fixed height (10 + 10 + 60 icon + 26 label
   + 10, plus the home-indicator inset), so the hero is exactly the first screen minus the nav and the bar. */
:root { --tf-nav-h: 72px; --tf-bar-h: 0px; }
.section.is-full-screen { min-height: 100vh; min-height: 100svh; }
html { overflow-anchor: auto; }
.tf-nav-icon, .tf-nav-mobile-only { display: none; }
@media screen and (max-width: 479px) {
	:root { --tf-bar-h: calc(116px + env(safe-area-inset-bottom, 0px)); }
	.section.section-fixed-menu {
		left: 0; right: 0; bottom: 0; transform: translateZ(0); backface-visibility: hidden;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.image-fixed-menu-icon { width: 60px; height: 60px; object-fit: contain; }
	.text-block-fixed-menu { height: 26px; line-height: 26px; white-space: nowrap; }
	/* The page ends at the top of the bar: the last footer line used to sit behind it (--tf-bar-h is the bar's
	   content height plus the home-indicator inset, the same value the hero and Menu overlay already use) */
	body { padding-bottom: var(--tf-bar-h); }
	/* Webflow's phone footer kept padding-bottom: 180px to clear the bar; the body padding above now does that,
	   so the two together left ~180px of empty footer above the bar. Normal footer padding only (the body's
	   --tf-bar-h already includes the safe-area inset). */
	.footer.is-inverse { padding-bottom: 24px; }
	/* Reveals and the deal only move with transform/opacity; the bar's own layer never repaints the page */
	.section-fixed-menu-categories { padding-bottom: var(--tf-bar-h); }

	/* Home hero: fits the first viewport from 360x640 to 430x932, nothing cut off */
	header.section.is-full-screen { min-height: 0; height: calc(100svh - var(--tf-bar-h)); overflow: hidden; }
	header.section.is-full-screen .hero-overlay, header.section.is-full-screen .hero_front { height: 100%; min-height: 0; }
	.container-home-hero {
		height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
		padding-top: calc(var(--tf-nav-h) + clamp(.5rem, 2svh, 1.25rem)); padding-bottom: clamp(.5rem, 2svh, 1.25rem);
	}
	.card-home-hero .card_body { padding: clamp(.75rem, 2.2svh, 1.25rem); }
	.card-home-hero .eyebrow { font-size: clamp(.72rem, 1.9svh, .85rem); margin-bottom: clamp(.4rem, 1.8svh, 1.1rem); }
	.card-home-hero .heading-home-hero { font-size: clamp(2.1rem, 6.8svh, 3.25rem); line-height: 1.1; margin-bottom: clamp(.5rem, 2.2svh, 1.5rem); }
	.card-home-hero .subheading { margin-bottom: 0; }
	.card-home-hero .subheading p { font-size: clamp(.92rem, 2.45svh, 1.15rem); line-height: 1.45; }
	.card-home-hero .button-group { margin-top: clamp(.75rem, 2.6svh, 1.75rem); }
}

/* Hamburger menu on tablets and phones: even rows, larger type, 48px tap targets, a line icon per item */
@media screen and (max-width: 991px) {
	.tf-nav-icon { display: block; flex: none; width: 22px; height: 22px; opacity: .9; }
	.tf-nav-mobile-only { display: flex; }
	.uui-navbar07_menu-right { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; padding: .75rem 1rem 1.25rem; }
	.uui-navbar07_menu-right > .uui-navbar07_link, .uui-navbar07_menu-right .uui-navbar07_dropdown-toggle {
		display: flex; align-items: center; gap: .875rem; min-height: 48px; box-sizing: border-box;
		padding: .625rem .75rem; margin: 0; font-size: 1.1875rem; line-height: 1.3; width: 100%;
	}
	.uui-navbar07_menu-dropdown { width: 100%; margin: 0; }
	.uui-navbar07_dropdown-toggle .uui-dropdown-icon { order: 3; position: static; margin: 0 0 0 auto; inset: auto; }
	.uui-navbar07_dropdown-list { position: static; padding: 0; }
	.uui-navbar07_dropdown-link-list { padding: 0 0 .25rem; gap: .125rem; }
	.uui-navbar07_dropdown-link {
		display: flex; align-items: center; gap: .875rem; min-height: 48px; box-sizing: border-box;
		padding: .375rem .75rem .375rem 2.75rem; margin: 0;
	}
	.uui-navbar07_dropdown-link .image-menu-category-icon { width: 28px; height: 28px; flex: none; object-fit: contain; }
	.uui-navbar07_menu-right > .uui-button {
		display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 48px; box-sizing: border-box;
		margin: .75rem 0 0; font-size: 1.125rem;
	}
}

/* Menu items: a gold, rounded focus ring for keyboard users (instead of the default black square); after a
   pointer-opened viewer closes, tf-viewer.js restores focus without it (.tf-no-ring) */
.collection-item-menu-item a, .collection-item-menu-item[tabindex] { border-radius: 12px; }
.collection-item-menu-item a:focus { outline: none; }
.collection-item-menu-item a:focus-visible, .collection-item-menu-item[tabindex]:focus-visible {
	outline: 3px solid #e0b25c; outline-offset: 3px;
}
.collection-item-menu-item[tabindex]:focus:not(:focus-visible) { outline: none; }
.tf-no-ring:focus, .tf-no-ring:focus-visible { outline: none !important; box-shadow: none !important; }

/* Menu list as soft cards (Gene, 2026-10-20). Phones: a lighter panel per dish, photo full-width on top, then name,
   price and description; the whole card opens the viewer. Desktop: the same card at lower intensity per row.
   List prices are a darker gold for AA on the light cards (#8a6416: 5.3:1 on the card, 4.8:1 on the page);
   #e0b25c stays in the dark viewer. */
:root { --tf-card-bg: #fffdf8; --tf-gold-ink: #8a6416; }
.collection-item-menu-item .item-price { color: var(--tf-gold-ink); font-weight: 700; }
.collection-list-menu-items { row-gap: 12px; }
.collection-item-menu-item {
	box-sizing: border-box; padding: 12px; border-radius: 14px;
	background-color: rgba(255, 253, 248, .6); box-shadow: 0 1px 2px rgba(49, 35, 28, .04), 0 4px 14px rgba(49, 35, 28, .03);
}
.collection-item-menu-item .image-ratio_1x1, .collection-item-menu-item .image-menu-item-generic { border-radius: 10px; overflow: hidden; }
.collection-item-menu-item a { border-radius: 10px; }

/* "Photo coming soon": a quiet panel with a muted-gold utensils mark */
.image-menu-item-generic.tf-photo-soon {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
	background: linear-gradient(160deg, #f7f1e3, #efe6d2); border: 1px solid rgba(138, 100, 22, .14);
}
.tf-photo-soon-icon { width: 40px; height: 40px; color: rgba(138, 100, 22, .55); }
.tf-photo-soon .text-block { font-size: .8125rem; letter-spacing: .02em; color: rgba(49, 35, 28, .6); text-align: center; }

@media screen and (max-width: 767px) {
	.collection-list-menu-items { row-gap: 12px; }
	.collection-item-menu-item {
		padding: 0; overflow: hidden; background-color: var(--tf-card-bg); cursor: pointer;
		box-shadow: 0 1px 2px rgba(49, 35, 28, .06), 0 6px 18px rgba(49, 35, 28, .07);
	}
	.collection-item-menu-item .div-flex-horizontal-menu-item { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; }
	.collection-item-menu-item .lightbox-link-menu-category-image { display: block; width: 100%; border-radius: 0; }
	.collection-item-menu-item .image-ratio_1x1 { width: 100%; height: auto; aspect-ratio: auto; padding: 0; border-radius: 0; }
	.collection-item-menu-item .image-ratio_1x1 img.image-menu-item {
		position: static; display: block; width: 100%; height: auto; max-height: none; object-fit: cover; border-radius: 0;
	}
	.collection-item-menu-item .image-menu-item-generic { display: flex; width: 100%; height: 132px; border-radius: 0; border-width: 0 0 1px; }
	.collection-item-menu-item .div-flex-vertical-menu-item { display: flex; flex-direction: column; gap: .375rem; padding: 14px 16px 16px; }
	.collection-item-menu-item .heading-menu-item { order: 1; margin: 0; }
	.collection-item-menu-item .div-menu-item-price { order: 2; margin: 0; }
	.collection-item-menu-item .paragraph { order: 3; margin: 0; }
	.collection-item-menu-item .tf-allergies { order: 4; margin: .25rem 0 0; }
	.collection-item-menu-item .div-flex-vertical-menu-item > br { display: none; }
}
.collection-item-menu-item .div-flex-vertical-menu-item > br { display: none; }
.collection-item-menu-item .div-flex-horizontal-menu-item { margin: 0; }
@media screen and (max-width: 767px) {
	.collection-item-menu-item .div-flex-vertical-menu-item, .collection-item-menu-item .lightbox-link-menu-category-image { margin: 0; }
}

/* Our Story (/about) and its home teaser */
.tf-wrap-end { display: none !important; }
.tf-about { padding-top: calc(var(--tf-nav-h) + clamp(2rem, 6vw, 5rem)); }
.tf-about-hero {
	display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
	max-width: 1120px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
}
.tf-about-photo, .tf-story-teaser-photo { display: block; }
.tf-about-photo img {
	display: block; width: 100%; height: auto; border-radius: 16px;
	box-shadow: 0 2px 4px rgba(49, 35, 28, .06), 0 18px 40px rgba(49, 35, 28, .14);
}
.tf-about-heading { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.08; }
.tf-about-intro .eyebrow { color: var(--tf-gold-ink); margin-bottom: .75rem; }
.tf-about-body { max-width: 65ch; margin: 0 auto; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.7; }
.tf-about-body p { margin: 0 0 1.25em; }
.tf-pull-quote {
	margin: 2.25rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid #c99a3d;
	font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.45; color: var(--tf-gold-ink); font-style: normal;
}
.tf-pull-quote-lead { font-weight: 700; font-size: 1.12em; }
.tf-sign-off { margin: 3rem 0 2rem; text-align: center; color: #31231c; }
.tf-about-mark { display: block; margin: 0 auto .75rem; color: #c99a3d; }
.tf-sign-off-greeting { margin: 0 0 .5rem !important; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: var(--tf-gold-ink); letter-spacing: .01em; }
.tf-sign-off-line { margin: 0 !important; font-size: 1.125rem; font-style: italic; color: rgba(49, 35, 28, .8); }
.tf-about-actions { justify-content: center; display: flex; margin: 1rem 0 0; }

.tf-story-teaser-inner {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: 900px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 16px; background: var(--tf-card-bg);
	box-shadow: 0 1px 2px rgba(49, 35, 28, .05), 0 10px 30px rgba(49, 35, 28, .07);
}
.tf-story-teaser-photo img { display: block; width: 200px; height: 200px; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.tf-story-teaser .tf-pull-quote { margin: .5rem 0 1.5rem; }
.tf-story-teaser .eyebrow { color: var(--tf-gold-ink); margin: 0; }

@media screen and (max-width: 767px) {
	.tf-about { padding-top: calc(var(--tf-nav-h) + 1.25rem); }
	.tf-about-hero { grid-template-columns: 1fr; gap: 1.5rem; }
	.tf-about-body { font-size: 1.0625rem; }
	.tf-pull-quote { padding-left: 1.125rem; margin: 1.75rem 0; }
	.tf-story-teaser-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.tf-story-teaser-photo img { width: 140px; height: 140px; }
	.tf-story-teaser .tf-pull-quote { border-left: 0; padding: 0; }
	.tf-story-teaser .button-group { justify-content: center; }
}

/* Reveals for plain elements (Our Story page, home teaser): same fade + slide as the home cards */
@media (prefers-reduced-motion: no-preference) {
	html.tf-reveal [data-tf-reveal] {
		opacity: 0; transform: translateY(100%);
		transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
		transition-delay: var(--tf-delay, 0s);
	}
	html.tf-reveal [data-tf-reveal].tf-in { opacity: 1; transform: none; }
	html.tf-reveal [data-tf-reveal].tf-done { transition-delay: 0s; }
	html.tf-reveal picture[data-tf-reveal] { transform: translateY(3rem); }
	html.tf-reveal picture[data-tf-reveal].tf-in { transform: none; }
}
.tf-about-heading { text-transform: none; }
.tf-about-body p, .tf-about-body .tf-pull-quote { font-family: inherit; }
.tf-about-body > .tf-r > p { font-size: inherit; line-height: inherit; }

/* Home hero (2026-10-20 redo): a random hero-eligible dish photo picked server-side, a solid dark card with a thin
   gold rule (no blur), a soft shade on the card's side, and a gold scroll cue. Phones: card anchored at the bottom. */
.tf-hero { position: relative; overflow: hidden; align-items: stretch; background: #0f0c0a; }
.tf-hero-back, .tf-hero-shade { position: absolute; inset: 0; }
.tf-hero-back picture, .tf-hero-image { display: block; width: 100%; height: 100%; }
.tf-hero-image { object-fit: cover; object-position: 50% 50%; }
/* One eased (sine in-out) side shade across the full hero width: .78 at the left edge to clear at the right, many stops
   so there's no band or midline */
.tf-hero-shade { background: linear-gradient(90deg, rgba(15, 12, 10, .780) 0%, rgba(15, 12, 10, .761) 10%, rgba(15, 12, 10, .706) 20%, rgba(15, 12, 10, .619) 30%, rgba(15, 12, 10, .511) 40%, rgba(15, 12, 10, .390) 50%, rgba(15, 12, 10, .269) 60%, rgba(15, 12, 10, .161) 70%, rgba(15, 12, 10, .074) 80%, rgba(15, 12, 10, .019) 90%, rgba(15, 12, 10, .000) 100%); }
.tf-hero-front {
	position: relative; z-index: 1; display: flex; align-items: center; width: 100%; box-sizing: border-box;
	min-height: 100%; padding-top: calc(var(--tf-nav-h) + 2rem); padding-bottom: 5rem;
}
.tf-hero-card {
	max-width: 32rem; box-sizing: border-box; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
	background: rgba(15, 12, 10, .85); border-radius: 14px; color: #fefefe;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.tf-hero-name { margin: 0; color: #fefefe; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.05; }
.tf-hero-tagline {
	margin: .75rem 0 0; padding-bottom: 1.25rem; color: #efe6d6; text-transform: uppercase; letter-spacing: .14em;
	font-size: clamp(.8rem, 1.1vw, .95rem); position: relative;
}
.tf-hero-tagline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 1px; background: #e0b25c; }
.tf-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tf-hero-actions .button { margin: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tf-button-ghost { background: transparent !important; color: #e0b25c !important; border: 1px solid #e0b25c !important; }
.tf-button-ghost:hover { background: rgba(224, 178, 92, .12) !important; }
.tf-hero-caption {
	display: inline-flex; align-items: center; gap: .4em; margin-top: 1.25rem; min-height: 32px;
	color: #e0b25c; font-size: .8125rem; letter-spacing: .03em; text-decoration: none;
}
.tf-hero-caption::before { content: "Pictured:"; color: rgba(239, 230, 214, .7); }
.tf-hero-caption::after { content: "\203A"; font-size: 1.2em; transition: transform .2s; }
.tf-hero-caption:hover::after { transform: translateX(3px); }
.tf-hero-caption:focus-visible { outline: 2px solid #e0b25c; outline-offset: 3px; border-radius: 6px; }

/* Scroll cue (round 3): a round button with a thin gold ring on a soft dark fill and a large caret. Bounces every
   2.5 s with a slight squash at the bottom; fades out on the first scroll; static under reduced motion. */
.tf-scroll-cue {
	--tf-cue: 54px;
	position: absolute; z-index: 2; left: 50%; bottom: 1.25rem; width: var(--tf-cue); height: var(--tf-cue); margin-left: calc(var(--tf-cue) / -2); padding: 0;
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	border: 1.5px solid rgba(224, 178, 92, .85); border-radius: 50%; background: rgba(20, 15, 12, .38); color: #e0b25c; cursor: pointer;
	transform-origin: 50% 100%;
	transition: opacity .4s ease, visibility 0s 0s, background-color .2s ease, border-color .2s ease;
	animation: tf-cue-bounce 2.5s ease-in-out .9s infinite;
}
.tf-scroll-cue svg { width: 30px; height: 30px; margin-top: 3px; }
.tf-scroll-cue:hover { background-color: rgba(20, 15, 12, .55); border-color: #e0b25c; }
.tf-scroll-cue:focus-visible { outline: 2px solid #e0b25c; outline-offset: 4px; border-radius: 50%; }
.tf-scroll-cue.tf-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s .4s; animation-play-state: paused; }
@keyframes tf-cue-bounce {
	0%, 44%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.45, 0, .7, .4); }
	18% { transform: translateY(12px) scale(1.05, .93); animation-timing-function: cubic-bezier(.3, .6, .55, 1); }
	30% { transform: translateY(-3px) scale(.98, 1.02); animation-timing-function: ease-in-out; }
}
@media (prefers-reduced-motion: reduce) { .tf-scroll-cue { animation: none; transition: opacity .01s, visibility 0s; } }

@media screen and (max-width: 767px) {
	.tf-hero-shade { background: linear-gradient(0deg, rgba(15, 12, 10, .82) 0%, rgba(15, 12, 10, .45) 42%, rgba(15, 12, 10, 0) 72%); }
	.tf-hero-front { align-items: flex-end; padding-top: calc(var(--tf-nav-h) + 1rem); padding-bottom: 4.5rem; }
	.tf-hero-card { max-width: none; width: 100%; padding: 1.25rem 1.25rem 1rem; }
	.tf-hero-name { font-size: clamp(2.1rem, 9.5vw, 2.75rem); }
	.tf-hero-tagline { padding-bottom: 1rem; }
	.tf-hero-actions { margin-top: 1.125rem; }
	.tf-hero-actions .button { flex: 1 1 0; }
	.tf-hero-caption { margin-top: .75rem; }
	/* Phones: smaller but still a full tap target, inside the hero (which already ends above the bottom bar) */
	.tf-scroll-cue { --tf-cue: 46px; bottom: 1rem; }
	.tf-scroll-cue svg { width: 26px; height: 26px; }
}
#explore-menu { scroll-margin-top: var(--tf-nav-h); }
.tf-hero-front { align-self: stretch; }
@media screen and (max-width: 767px) { .tf-hero-front { height: 100%; } }
.tf-hero-front { flex-direction: column; justify-content: center; align-items: flex-start; }
@media screen and (max-width: 767px) { .tf-hero-front { justify-content: flex-end; align-items: stretch; } }
.tf-hero-caption { display: inline-block; line-height: 1.5; padding: .25rem 0; }
.tf-hero-caption::before { content: "Pictured:\00a0"; }
.tf-hero-caption::after { content: "\00a0\203A"; display: inline-block; }
@media screen and (min-width: 768px) { .tf-hero-name { white-space: nowrap; } .tf-hero-card { max-width: 36rem; } }

/* Round 2 (Gene, 2026-10-20 evening) */
/* Icons keep their intrinsic ratio: the width/height attributes (added for CLS) set the ratio, CSS sets the size.
   Webflow sizes these by width only, so the height attribute alone stretched them to 2:1. */
.image-menu-category-icon, .image-icon-contact, .image-icon-menu-category, .uui-logo_logotype { height: auto; object-fit: contain; }
.div-icon-menu-categories .image-menu-category-icon { width: 100%; }
.link-block-menu-category:focus { outline: none; }
.link-block-menu-category:focus-visible .div-menu-category-highlight { border-color: #e0b25c; }

/* Home: Our Story teaser right under the hero, plain on the page background */
.tf-story-plain .tf-story-teaser-inner { background: none; box-shadow: none; padding: 0; border-radius: 0; max-width: 820px; }
.tf-story-plain .tf-story-teaser-photo img { width: 120px; height: 120px; }
.tf-story-plain .tf-pull-quote { border-left: 0; padding-left: 0; }
.tf-story-plain .tf-story-teaser-inner { grid-template-columns: 120px minmax(0, 1fr); }
.tf-story-plain .tf-story-teaser-link { color: var(--tf-gold-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.tf-story-plain .tf-story-teaser-link::after { content: "\00a0\203A"; }
@media screen and (max-width: 767px) {
	.tf-story-plain .tf-story-teaser-inner { grid-template-columns: 1fr; }
	.tf-story-plain .tf-story-teaser-photo img { width: 96px; height: 96px; }
}

/* Our Story, desktop: sticky photo on the left, header and all content in the right column */
.tf-about-layout { max-width: 1160px; margin: 0 auto; }
@media screen and (min-width: 768px) {
	.tf-about-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
	.tf-about-aside { position: sticky; top: calc(var(--tf-nav-h) + 1.5rem); }
	.tf-about-main .tf-about-intro { margin-bottom: 2rem; }
	.tf-about-main .tf-about-body { margin: 0; }
	.tf-about-main .tf-sign-off, .tf-about-main .tf-about-actions { text-align: left; justify-content: flex-start; }
	.tf-about-main .tf-about-mark { margin-left: 0; }
}
@media screen and (max-width: 767px) {
	.tf-about-aside { margin-bottom: 1.5rem; }
	.tf-about-intro { margin-bottom: 1.5rem; }
}

/* Category pages, desktop: no card chrome, hairline separators between rows */
@media screen and (min-width: 768px) {
	.collection-item-menu-item { background: none; box-shadow: none; border-radius: 0; padding: 0 0 12px; border-bottom: 1px solid rgba(49, 35, 28, .1); }
	.collection-list-menu-items { row-gap: 12px; }
}
/* Phones: the whole card (with its content) is the reveal unit */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger] {
		transform: translateY(min(100%, 5rem)); transition-property: opacity, transform;
	}
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger].tf-in { transform: none; }
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger] > *,
	html.tf-reveal-menu .collection-item-menu-item[data-tf-stagger].tf-in > * { transform: none; transition: none; }
}

/* Hamburger "Menu" dropdown: slides open/closed (Webflow's .w--open display:block was overriding the grid,
   so it popped in); sub-items fade and rise slightly in sequence; caret turns with it */
@media screen and (max-width: 991px) {
	.uui-navbar07_dropdown-list, .uui-navbar07_dropdown-list.w--open { display: grid; }
	/* Round 4 (Gene: .32s felt snappy): open .65s / close .48s, ease-in-out; rows 0fr -> 1fr can't overshoot or snap.
	   Sub-items fade and drift in 50 ms apart, starting just behind the height reveal; the caret turns with the list. */
	.uui-navbar07_dropdown-list { transition: grid-template-rows .48s cubic-bezier(.65, 0, .35, 1), opacity .3s ease .18s, visibility 0s .48s; }
	.uui-navbar07_dropdown-list.w--open { transition: grid-template-rows .65s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, visibility 0s 0s; }
	/* Closed state: Webflow's .w-dropdown-list (#ddd) and the panel shadow came back the moment .w--open went,
	   showing a grey box while the height collapsed. Both states share the menu's own background now. */
	.uui-navbar07_dropdown-list, .uui-navbar07_dropdown-list.w--open { background: transparent; box-shadow: none; border: 0; padding: 0; width: auto; }
	/* Closing mirrors opening: the bottom item fades first, the one nearest the toggle last (30 ms apart) */
	.uui-navbar07_dropdown-list .w-dyn-item {
		opacity: 0; transform: translateY(-8px);
		transition: opacity .2s ease, transform .3s cubic-bezier(.65, 0, .35, 1);
		transition-delay: calc((var(--tf-sub-n, 9) - 1 - var(--tf-sub, 0)) * 30ms);
	}
	.uui-navbar07_dropdown-list.w--open .w-dyn-item {
		opacity: 1; transform: none;
		transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(120ms + var(--tf-sub, 0) * 50ms);
	}
	.uui-navbar07_dropdown-toggle .uui-dropdown-icon { transition: transform .48s cubic-bezier(.65, 0, .35, 1); }
	.uui-navbar07_dropdown-toggle.w--open .uui-dropdown-icon { transition: transform .65s cubic-bezier(.65, 0, .35, 1); }
}
@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.uui-navbar07_dropdown-list, .uui-navbar07_dropdown-list .w-dyn-item, .uui-navbar07_dropdown-toggle .uui-dropdown-icon { transition: none; }
	.uui-navbar07_dropdown-list .w-dyn-item { transform: none; }
}

/* Hero card, round 2: the lockup (heading, tagline, rule, buttons) is as wide as the heading; tf.js fits the
   tagline's letter-spacing to it; the gold rule and the button pair span the same width */
.tf-hero-lockup { width: max-content; max-width: 100%; }
.tf-hero-name { white-space: nowrap; }
.tf-fit-ref, .tf-fit { display: inline-block; white-space: nowrap; }
.tf-hero-tagline { letter-spacing: 0; }
.tf-hero-tagline::after { width: 100%; }
.tf-hero-actions { display: flex; flex-wrap: nowrap; gap: .75rem; }
.tf-hero-actions .button { flex: 1 1 0; min-width: 0; padding-left: .75rem; padding-right: .75rem; white-space: nowrap; }
@media screen and (min-width: 768px) { .tf-hero-card { max-width: none; width: max-content; } }
@media screen and (max-width: 767px) {
	.tf-hero-lockup { width: 100%; }
	.tf-hero-name, .tf-hero-tagline { width: max-content; max-width: 100%; }
	.tf-hero-tagline::after { width: 100%; }
}
@media screen and (max-width: 359px) {
	.tf-hero-actions { flex-direction: column; }
	.tf-hero-actions .button { flex: none; width: 100%; }
}
.tf-hero-actions { width: 0; min-width: 100%; }
/* The caption wraps inside the lockup width instead of widening the card */
.tf-hero-card > .tf-r { width: 0; min-width: 100%; }
@media screen and (min-width: 768px) { .tf-hero-card { display: flex; flex-direction: column; } .tf-hero-name { font-size: clamp(3rem, 5vw, 4.25rem); } }
.tf-fit { letter-spacing: .2em; margin-right: -.2em; }
.tf-hero-caption::after { display: inline; }

/* Round 3 (Gene, 2026-10-20 night) */
/* Dish viewer lift-off: the open dish's on-page photo slot shows only a faint tint */
.tf-lifted { background-color: rgba(49, 35, 28, .07); }
.tf-lifted > *, img.tf-lifted { opacity: 0 !important; transition: none !important; }
.tf-unlifting > *, img.tf-unlifting { transition: opacity .3s ease !important; }

/* Category pages, desktop: no card, no separators */
@media screen and (min-width: 768px) {
	.collection-item-menu-item { border-bottom: 0; padding-bottom: 0; }
	.collection-list-menu-items { row-gap: 24px; }
}

/* Home teaser: the round photo is as tall as the text beside it (tf.js sets --tf-teaser-h) */
.tf-story-plain .tf-story-teaser-inner { grid-template-columns: var(--tf-teaser-h, 160px) minmax(0, 1fr); }
.tf-story-plain .tf-story-teaser-photo img { width: var(--tf-teaser-h, 160px); height: var(--tf-teaser-h, 160px); }
.tf-story-plain .tf-story-teaser-text > .tf-r:last-child p { margin-bottom: 0; }
@media screen and (max-width: 767px) {
	.tf-story-plain .tf-story-teaser-inner { grid-template-columns: 1fr; }
	.tf-story-plain .tf-story-teaser-photo img { width: 140px; height: 140px; }
}

/* Our Story: the sticky photo's offset equals where it rests at load, so it never moves when scrolling starts;
   it comes to rest with the end of the right column. */
.tf-about { --tf-about-gap: clamp(2rem, 6vw, 5rem); padding-top: calc(var(--tf-nav-h) + var(--tf-about-gap)); }
/* Round 4: the closing (quote, greeting, line, Reserve) is back in the right column, after the body
   (.tf-about-closing wraps it); the sticky photo travels down to the end of that column */
.tf-about-closing { margin-top: 2rem; }
.tf-about-closing > .tf-r:last-child .tf-about-actions { margin-bottom: 0; }
@media screen and (min-width: 768px) {
	.tf-about-aside { top: calc(var(--tf-nav-h) + var(--tf-about-gap)); }
}
@media screen and (max-width: 767px) {
	.tf-about { padding-top: calc(var(--tf-nav-h) + 1.25rem); }
}

/* Round 4: home Atmosphere gallery captions. Hidden until hover / keyboard focus, then slide up from the bottom
   over a soft dark gradient (no blur). Touch (no hover): the title only, small, at the bottom. */
.tf-gallery-caption { align-self: end; width: 100%; pointer-events: none; }
.tf-gallery-caption .card_body_small {
	padding: 3.5rem 1.25rem 1.125rem;
	background: linear-gradient(0deg, rgba(15, 12, 10, .8) 0%, rgba(15, 12, 10, .55) 45%, rgba(15, 12, 10, 0) 100%);
	transform: translateY(100%); opacity: 0;
	transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.tf-gallery-caption h3 { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.25; }
.tf-gallery-caption p { margin: .375rem 0 0; font-size: .9375rem; line-height: 1.45; }
a.lightbox-link-image-gallery:focus-visible .tf-gallery-caption .card_body_small { transform: none; opacity: 1; }
@media (hover: hover) {
	a.lightbox-link-image-gallery:hover .tf-gallery-caption .card_body_small { transform: none; opacity: 1; }
}
@media (hover: none) {
	.tf-gallery-caption .card_body_small { transform: none; opacity: 1; padding: 2.25rem .875rem .75rem; background: linear-gradient(0deg, rgba(15, 12, 10, .7) 0%, rgba(15, 12, 10, 0) 100%); }
	.tf-gallery-caption h3 { font-size: 1rem; }
	.tf-gallery-caption p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tf-gallery-caption .card_body_small { transform: none; transition: opacity .2s ease; }
}

/* Round 4: phone menu-category pages. Webflow gives the dish list width:100svw (+20px padding), which made the
   centred column wider than the container and pushed the category chips flush to the screen edge. The list now
   fits the container; the gutter respects safe-area insets. */
@media screen and (max-width: 767px) {
	.container.container-menu-category { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
	.collection-list-menu-items { width: auto; padding-left: 0; padding-right: 0; }
	.grid-menu-category { width: 100%; }
}

/* Round 4: phone Menu overlay. The tile grid is centred in the space between the nav (which stays above the
   overlay) and the top of the bottom bar, safe-area insets included; the overlay is 100svh, so the URL bar
   never moves it. Scrolls only if a very short screen can't fit the tiles. */
@media screen and (max-width: 479px) {
	.section-fixed-menu-categories {
		justify-content: center; box-sizing: border-box; height: 100svh; overflow-y: auto; overscroll-behavior: contain;
		padding-top: calc(var(--tf-nav-h) + env(safe-area-inset-top, 0px)); padding-bottom: var(--tf-bar-h);
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
}

/* Round 4: testimonial without a photo: initials avatar in the brand gold */
.tf-avatar-initials { display: flex; align-items: center; justify-content: center; background: #f3e6c8; color: var(--tf-gold-ink); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; }
.avatar picture { display: contents; }

/* Branded 404 (mirror/templates/404.html): dish photo at its natural aspect ratio beside the message (stacked,
   message first, on phones); gold ink on the light page; reveals reuse [data-tf-reveal] (80 ms stagger) */
.tf-404 { padding-top: calc(var(--tf-nav-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.tf-404-layout {
	display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
	max-width: 1080px; margin: 0 auto;
}
.tf-404-layout.tf-404-no-photo { grid-template-columns: minmax(0, 640px); justify-content: center; text-align: center; }
.tf-404-figure { margin: 0; }
.tf-404-photo { display: block; }
.tf-404-photo img {
	display: block; width: 100%; height: auto; border-radius: 16px;
	box-shadow: 0 2px 4px rgba(49, 35, 28, .06), 0 18px 40px rgba(49, 35, 28, .14);
}
.tf-404-caption { margin-top: .75rem; font-size: .875rem; color: rgba(49, 35, 28, .7); }
.tf-404-caption a { color: var(--tf-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.tf-404 .eyebrow { color: var(--tf-gold-ink); margin-bottom: .75rem; letter-spacing: .08em; }
.tf-404-heading { margin: 0 0 1rem; font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.1; text-transform: none; }
.tf-404-lead { margin: 0 0 1.75rem; max-width: 34rem; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.65; color: #31231c; }
.tf-404-no-photo .tf-404-lead { margin-left: auto; margin-right: auto; }
.tf-404-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.tf-404-no-photo .tf-404-actions, .tf-404-no-photo .tf-404-links { justify-content: center; }
.tf-404-actions .button { margin: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tf-button-ink { background: transparent !important; color: var(--tf-gold-ink) !important; border: 1px solid var(--tf-gold-ink) !important; }
.tf-button-ink:hover { background: rgba(138, 100, 22, .08) !important; }
.tf-404-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.tf-404-links a { color: var(--tf-gold-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(138, 100, 22, .35); padding: .35rem 0; }
.tf-404-links a:hover { border-bottom-color: var(--tf-gold-ink); }
@media screen and (max-width: 767px) {
	.tf-404 { padding-top: calc(var(--tf-nav-h) + 1.25rem); }
	.tf-404-layout { grid-template-columns: 1fr; gap: 1.75rem; }
	.tf-404-text { order: -1; }
	.tf-404-actions .button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: .75rem; padding-right: .75rem; }
}

/* Menu-category pages: frozen category tabs (Gene). Plain position:sticky inside the page scroll (no inner
   scroller, so the wheel never gets trapped and the page carries on into the footer). --tf-nav-live is the fixed
   nav's measured height and --tf-tabs-h the tab block's (both set by tf.js). Dish anchors and the viewer's
   scroll-into-view clear the whole sticky stack.
   --tf-tab-gap is the space above the tabs (nav bottom to tab top) and also a fully clear band below them, in
   which scrolled content is completely masked; the fade (--tf-tab-fade) runs below that band. The content starts
   at band + fade below the tabs, so the first dish/header is unmasked at load. The tabs start exactly at their
   sticky offset (section top padding = sticky top), so they never move; no strip behind them. The mask lives on
   [data-tf-fade] blocks; tf.js keeps --tf-fade-y = tab bottom relative to each block, so no colour has to match
   the page. Desktop also pins the left column (natural position = its sticky top = the first dish's top);
   below 992px the header scrolls and fades like the dishes. */
.section-menu-items {
	--tf-tab-gap: 28px; --tf-tab-fade: 26px; --tf-tab-clear: calc(var(--tf-tab-gap) + var(--tf-tab-fade));
	--tf-stick-top: calc(var(--tf-nav-live, var(--tf-nav-h)) + var(--tf-tab-gap)); padding-top: var(--tf-stick-top) !important;
}
.section-menu-items .container-menu-category, .section-menu-items .grid-menu-category { padding-top: 0; margin-top: 0; }
.section-menu-items .div-menu-categories { position: sticky; top: var(--tf-stick-top); z-index: 5; margin-bottom: 0; padding: 0; }
.section-menu-items .collection-item-menu-item, .section-menu-items .div-menu-category-header { scroll-margin-top: calc(var(--tf-stick-top) + var(--tf-tabs-h, 60px) + var(--tf-tab-clear)); }
.section-menu-items .header-menu-category { margin-top: var(--tf-tab-clear); }
.section-menu-items .collection-list-wrapper-2 { margin-top: var(--tf-tab-clear); }
.section-menu-items [data-tf-fade] {
	--tf-band-end: calc(var(--tf-fade-y, -100px) + var(--tf-tab-gap));
	--tf-fade: linear-gradient(to bottom, transparent var(--tf-band-end), rgba(0, 0, 0, .55) calc(var(--tf-band-end) + var(--tf-tab-fade) * .45), #000 calc(var(--tf-band-end) + var(--tf-tab-fade)));
	-webkit-mask-image: var(--tf-fade); mask-image: var(--tf-fade);
}
/* A mask clips to the border box: room for the last dish card's overhang without moving the layout */
.section-menu-items .collection-list-wrapper-2[data-tf-fade] { padding-bottom: 24px; margin-bottom: -24px; }
@media screen and (min-width: 992px) {
	.section-menu-items .header-menu-category { align-items: flex-start; align-self: stretch; }
	.section-menu-items .div-menu-category-header { position: sticky; top: calc(var(--tf-stick-top) + var(--tf-tabs-h, 40px) + var(--tf-tab-clear)); align-self: flex-start; }
}
@media screen and (max-width: 767px) {
	.section-menu-items { --tf-tab-gap: 22px; --tf-tab-fade: 22px; }
}
/* Tabs as an even grid of tiles at every width (Gene, 2026-10-21: the phone style on desktop too): full width,
   equal columns, wrapping as needed; gold ink #8a6416 on white, current tile solid #8a6416 with white text (5.4:1, AA). Desktop/tablet tiles
   are 40px; phones keep the compact 34px tiles (4px row gap) so the frozen block doesn't eat the screen. */
.section-menu-items .div-menu-categories { width: 100%; justify-self: stretch; }
.section-menu-items .collection-list-menu-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.section-menu-items .div-menu-category-wrapper { margin: 0; display: flex; }
.section-menu-items .text-link-menu-category {
	display: flex; flex: 1; align-items: center; justify-content: center; text-align: center; min-height: 40px; margin: 0;
	padding: 4px 8px; box-sizing: border-box; border: 1px solid rgba(138, 100, 22, .4); border-radius: 6px;
	background: #fff; color: #8a6416; font-size: 12px; line-height: 1.15; letter-spacing: .05em;
}
.section-menu-items .text-link-menu-category:hover { background: #f3e6c8; color: #8a6416; }
.section-menu-items .text-link-menu-category.w--current,
.section-menu-items .text-link-menu-category.w--current:hover { background: #8a6416; border-color: #8a6416; color: #fff; }
.section-menu-items .text-link-menu-category:focus { outline: none; }
.section-menu-items .text-link-menu-category:focus-visible { outline: 2px solid #8a6416; outline-offset: 2px; }
@media screen and (max-width: 767px) {
	.section-menu-items .collection-list-menu-categories { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 4px 6px; }
	.section-menu-items .text-link-menu-category { min-height: 34px; padding: 2px 6px; font-size: 11px; letter-spacing: .04em; }
	.section-menu-items .collection-list-wrapper-2 { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.section-menu-items .text-link-menu-category { transition: none; }
}

/* Contact page (Gene, 2026-10-21): eyebrow + big title like the menu/Our Story pages, the mural as a short banner,
   cream info cards with gold labels and the tab tiles' thin gold border, the map in a matching card, then a
   compact "Good to know" list. Desktop: Visit / Call-Email / Hours on the left, map on the right. Phones (DOM
   order): header, buttons, Hours, Visit, map, Call/Email. Reveals use [data-tf-reveal] (80 ms stagger). */
.tf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tf-contact > .container, .tf-good-to-know > .container { align-items: stretch; }
/* Contact hero (Gene, 6:53 PM): the home hero's markup and classes (dark card, gold rule, ghost button) over the
   mural. Shorter than home: 80vh (min 560, max 860) on desktop, card centred below the touching fingers so both
   owners and the fingers stay clear; phones reuse the home hero's bottom-anchored card at ~68svh (overlaying the
   lower part of the photo keeps the faces clear). Fixed heights + width/height on the img = no layout shift. */
.tf-hero-contact { min-height: 560px; height: 100vh; height: 100svh; padding: 0; } /* full screen like the home hero (it sits under the fixed nav, same as home) */
.tf-hero-contact .tf-hero-front { padding-top: var(--tf-nav-h); }
.tf-hero-contact .tf-hero-image { object-position: 50% 26%; }
.tf-hero-contact .tf-hero-shade { background: linear-gradient(0deg, rgba(15, 12, 10, .7) 0%, rgba(15, 12, 10, .3) 35%, rgba(15, 12, 10, 0) 60%); }
.tf-hero-contact .tf-hero-front { justify-content: flex-end; align-items: center; padding-bottom: calc(54px + 1.25rem + 1.25rem); } /* room for the home scroll cue below the card */
.tf-hero-contact .tf-hero-card { text-align: center; max-width: 54rem; padding: 1.25rem 2rem 1.5rem; }
.tf-hero-contact .tf-hero-name { white-space: normal; font-size: clamp(2rem, 3vw, 2.75rem); }
.tf-hero-eyebrow { margin: 0 0 .5rem; color: #e0b25c; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; }
.tf-hero-contact .tf-hero-tagline { margin-top: .5rem; padding-bottom: 1rem; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; line-height: 1.5; }
.tf-hero-contact .tf-hero-tagline::after { left: 50%; transform: translateX(-50%); }
.tf-hero-contact .tf-hero-actions { justify-content: center; margin-top: 1rem; }
/* Phones: overlaying the card hid both faces, so the photo sits on top (home crop feel, ~48svh under the nav) and
   the home hero's dark card stacks below it on the hero's dark ground */
@media screen and (max-width: 767px) {
	.tf-hero-contact { height: auto; display: block; padding: var(--tf-nav-h) 0 0; }
	.tf-hero-contact .tf-hero-back { position: relative; height: 48vh; height: 48svh; min-height: 280px; }
	.tf-hero-contact .tf-hero-image { object-position: 50% 30%; }
	.tf-hero-contact .tf-hero-shade { background: linear-gradient(0deg, #0f0c0a 0%, rgba(15, 12, 10, 0) 30%); }
	.tf-hero-contact .tf-hero-front { height: auto; padding: 0 1rem 1.5rem; }
	.tf-hero-contact .tf-hero-card { text-align: left; padding: .25rem 0 0; background: none; box-shadow: none; }
	.tf-hero-contact .tf-hero-tagline::after { left: 0; transform: none; }
	.tf-hero-contact .tf-hero-name { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
	/* Stacked phone layout: the info starts right under the card, so no scroll cue */
	.tf-hero-contact .tf-scroll-cue { display: none; }
}
.section.tf-contact { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.tf-good-to-know .eyebrow { color: var(--tf-gold-ink); margin-bottom: .75rem; }
.tf-contact-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.tf-contact-card { box-sizing: border-box; min-width: 0; }
/* Visit / Call-Email / Hours sit directly on the page gradient (Gene, 6:42 PM): no fill or border, separated by
   thin gold hairlines; only the map keeps a framed card so it doesn't float */
.tf-contact-visit, .tf-contact-reach, .tf-contact-hours { padding: 0 0 1.25rem; border-bottom: 1px solid rgba(138, 100, 22, .35); }
.tf-contact-map { background: var(--tf-card-bg); border: 1px solid rgba(138, 100, 22, .4); border-radius: 12px; }
@media screen and (min-width: 768px) {
	.tf-contact-hours { border-bottom: 0; padding-bottom: 0; }
}
@media screen and (max-width: 767px) {
	.tf-contact-reach { border-bottom: 0; padding-bottom: 0; }
	.tf-contact-map { margin-bottom: .25rem; }
}
.tf-contact-label { margin: 0 0 .5rem; color: var(--tf-gold-ink); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tf-contact-value { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; font-size: 1.125rem; line-height: 1.45; color: inherit; }
.tf-contact-link { color: var(--tf-gold-ink); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* No resting underline (clashed with the gold hairlines, Gene 6:51 PM); underline on hover, outline on keyboard focus */
.tf-contact-link:hover { text-decoration: underline; }
.tf-contact-visit .tf-contact-link:not(.tf-contact-value) { display: inline-block; margin-top: .5rem; font-weight: 600; }
.tf-contact-email { overflow-wrap: anywhere; font-size: 1rem; }
.tf-contact-link:focus-visible, .tf-faq a:focus-visible { outline: 2px solid var(--tf-gold-ink); outline-offset: 2px; border-radius: 2px; }
.tf-hours { width: 100%; border-collapse: collapse; font-family: "Plus Jakarta Sans", sans-serif; }
.tf-hours th, .tf-hours td { padding: .375rem 0; font-size: 1rem; border-bottom: 1px solid rgba(138, 100, 22, .18); }
.tf-hours tr:last-child th, .tf-hours tr:last-child td { border-bottom: 0; }
.tf-hours th { text-align: left; font-weight: 600; }
.tf-hours th abbr { text-decoration: none; border-bottom: 0; cursor: default; }
.tf-hours td { text-align: right; }
.tf-hours .tf-closed th, .tf-hours .tf-closed td { color: #6f655c; font-weight: 400; }
.tf-hours .tf-closed td { color: #b0362c; } /* brick red, harmonizes with the Reserve red; AA 5.5:1 on #f3f3e9, 6.2:1 on #fff */
/* Map card: fixed size (4:3 on phones, column height on desktop) so nothing shifts; a cream placeholder with a
   faint street grid and a bobbing gold pin shows at once, and the iframe fades in over it on load (tf.js adds
   .tf-map-ready). Without JS (no .w-mod-js) the iframe is simply visible over the placeholder. */
.tf-contact-map { position: relative; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; min-height: 260px; }
.tf-contact-map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; transition: opacity .6s ease; }
html.w-mod-js .tf-contact-map:not(.tf-map-ready) iframe { opacity: 0; }
.tf-map-placeholder {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
	color: var(--tf-gold-ink); background-color: #f6f1e4;
	background-image:
		repeating-linear-gradient(28deg, transparent 0 150px, rgba(138, 100, 22, .09) 150px 162px),
		repeating-linear-gradient(-62deg, transparent 0 230px, rgba(138, 100, 22, .07) 230px 238px),
		linear-gradient(rgba(138, 100, 22, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(138, 100, 22, .06) 1px, transparent 1px);
	background-size: auto, auto, 44px 44px, 44px 44px;
}
.tf-map-status { margin: 0; font-size: .875rem; letter-spacing: .04em; }
.tf-map-pin { filter: drop-shadow(0 3px 2px rgba(138, 100, 22, .25)); }
@media (prefers-reduced-motion: no-preference) {
	.tf-map-pin { animation: tf-pin-bob 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes tf-pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tf-contact-map.tf-map-ready .tf-map-pin { animation: none; }
.tf-map-fallback { position: absolute; left: 0; right: 0; bottom: 38%; margin: 0; text-align: center; font-size: .9375rem; }
.tf-contact-map.tf-map-failed .tf-map-status { display: none; }
.tf-contact-map.tf-map-failed .tf-map-pin { animation: none; }
@media screen and (min-width: 768px) {
	.tf-contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "visit map" "reach map" "hours map"; align-items: start; }
	.tf-contact-visit { grid-area: visit; }
	.tf-contact-reach { grid-area: reach; }
	.tf-contact-hours { grid-area: hours; }
	.tf-contact-map { grid-area: map; align-self: stretch; aspect-ratio: auto; min-height: 420px; }
}
.section.tf-good-to-know { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); background: #f3f3e9; }
.tf-faq { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
.tf-faq-item { padding: 1rem 0; border-bottom: 1px solid rgba(138, 100, 22, .2); }
.tf-faq dt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 1.0625rem; margin-bottom: .25rem; }
.tf-faq dd { margin: 0; line-height: 1.55; }
.tf-faq a { color: var(--tf-gold-ink); text-underline-offset: 3px; }
@media screen and (min-width: 768px) {
	.tf-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Cards slide a short distance (the plain [data-tf-reveal] rule drops by 100% of the element's height) */
@media (prefers-reduced-motion: no-preference) {
	html.tf-reveal .tf-contact-card[data-tf-reveal], html.tf-reveal .tf-faq-item[data-tf-reveal] { transform: translateY(2rem); }
	html.tf-reveal .tf-contact-card[data-tf-reveal].tf-in, html.tf-reveal .tf-faq-item[data-tf-reveal].tf-in { transform: none; }
}