/* 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; }
	/* 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; }
}