/* ==========================================================================
   Koh Tomyums v3 — "Ember & Tide"
   GENERATED from assets/v3/css/parts/*.css by bin/build-v3.sh — do not edit.
   ========================================================================== */

/* --- 00-tokens.css ------------------------------------------------ */
/* ==========================================================================
   Koh Tomyums v3 — "Ember & Tide"
   Tokens.

   Two grounds, one story. Ember is the kitchen: a warm black with the brand
   gold and a chilli-orange. Tide is the terrace: a night-sea blue-black with a
   sea-glass accent. The page ground is ember; the tide arrives as a fixed
   veil (.k-tide-veil, 01-base.css) that fades in over it — an opacity change
   the compositor does alone, where 3.0 transitioned the page's background
   colour and repainted everything under it for 1.4s.

   Contrast, measured (WCAG 2) on --k-ink / on --k-tide: cream 16.7 / 15.8,
   cream-2 11.3 / 10.7, cream-3 6.6 / 6.2 (the floor for any text), gold
   9.8 / 9.2, sea 10.4 / 9.9, ember 6.5 / 6.2, herb 9.9 / 9.3. Gold-ink on
   gold 9.0, sea-ink on sea 9.7. line-3, the edge of every control, 3.6:1.
   ========================================================================== */

:root {
	/* Grounds */
	--k-ink: #0b0907;
	--k-ink-2: #12100c;
	--k-ink-3: #1a1612;
	--k-ink-4: #241f19;
	--k-tide: #071318;
	--k-tide-2: #0c1d24;
	--k-tide-3: #122832;
	--k-bg: var(--k-ink);

	/* Lines — neutral cream at three strengths, never gold, so gold can mean
	   "act here" and nothing else. line-3 is the 3:1 floor for control edges. */
	--k-line: rgb(243 234 219 / 0.1);
	--k-line-2: rgb(243 234 219 / 0.18);
	--k-line-3: rgb(243 234 219 / 0.42);

	/* Text */
	--k-cream: #f3eadb;
	--k-cream-2: #cdc2b0;
	--k-cream-3: #9d9383;

	/* Accents */
	--k-gold: #ddae62;
	--k-gold-2: #f1c983;
	--k-gold-ink: #1b1307;
	--k-gold-glow: rgb(221 174 98 / 0.28);
	--k-ember: #f26a3d;
	--k-chili: #e3482f;
	--k-amber: #f0a64a;
	--k-herb: #9cc27a;
	--k-sea: #8cc5d2;
	--k-sea-2: #b5dde6;
	--k-sea-ink: #05161c;
	--k-danger: #ff7a6b;

	/* Surfaces */
	--k-surface: rgb(243 234 219 / 0.035);
	--k-surface-2: rgb(243 234 219 / 0.06);
	--k-surface-3: rgb(243 234 219 / 0.09);
	--k-glass: rgb(14 12 9 / 0.72);
	--k-glass-tide: rgb(7 19 24 / 0.72);

	/* Type */
	--k-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--k-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--k-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--k-font-thai: "Noto Serif Thai", Thonburi, "Leelawadee UI", serif;

	--k-fs-hero: clamp(4.5rem, 13.2vw, 13.75rem);
	--k-fs-xxl: clamp(3.5rem, 8.4vw, 8.75rem);
	--k-fs-xl: clamp(3rem, 6.2vw, 6.25rem);
	--k-fs-l: clamp(2.5rem, 4.6vw, 4.75rem);
	--k-fs-m: clamp(1.875rem, 2.8vw, 2.75rem);
	--k-fs-s: clamp(1.4rem, 1.8vw, 1.75rem);
	--k-fs-lede: clamp(1.125rem, 1.35vw, 1.3125rem);
	--k-fs-body: 1.0625rem;
	--k-fs-small: 0.9375rem;
	--k-fs-xs: 0.8125rem;
	--k-fs-micro: 0.75rem;

	/* Space */
	--k-gutter: clamp(20px, 4.2vw, 64px);
	--k-max: 1480px;
	--k-narrow: 760px;
	--k-section: clamp(104px, 12vw, 200px);
	--k-header-h: 76px;

	/* Shape */
	--k-r-s: 10px;
	--k-r-m: 18px;
	--k-r-l: 28px;
	--k-r-xl: 40px;
	--k-r-pill: 999px;

	/* Motion. One out-curve for arrivals, one in-out for state changes, and a
	   spring for anything that is pressed. */
	--k-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--k-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--k-ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
	--k-d-1: 160ms;
	--k-d-2: 280ms;
	--k-d-3: 480ms;
	--k-d-4: 900ms;

	--k-shadow-lg: 0 40px 80px -24px rgb(0 0 0 / 0.65), 0 12px 32px -12px rgb(0 0 0 / 0.5);
	--k-shadow-md: 0 18px 40px -18px rgb(0 0 0 / 0.6);

	color-scheme: dark;
}

@media (max-width: 720px) {
	:root {
		--k-header-h: 64px;
	}
}

/* --- 01-base.css ------------------------------------------------ */
/* ==========================================================================
   Base.

   Element rules are split in two. Everything that must hold on every page —
   the ground, the text colour, the faces, focus — applies to all of body.k-v3.
   The resets that assume v3 markup (margins, list styles) are fenced behind
   .k-native, so the 2.x commerce pages keep the element defaults their own
   stylesheets were written against.
   ========================================================================== */

html {
	background: var(--k-bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--k-header-h) + 24px);
}

body.k-v3 {
	margin: 0;
	/* Transparent on purpose: <html> paints the ground. A painted <body>
	   would sit ABOVE the tide veil (a z-index:-1 layer paints after the root
	   background but before in-flow block backgrounds) and hide it. */
	background: transparent;
	color: var(--k-cream);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-body);
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/*
 * A breath of film grain in the ground. 3.0 laid it over the whole viewport
 * as a fixed layer at the top of the stack, which the compositor had to blend
 * over every pixel of every scroll frame. It is now simply the page's own
 * background — rasterised once with the content, and free while scrolling.
 * The alpha lives in the SVG (0.05), not in an opacity.
 */
.k-site {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
 * The tide: a fixed, full-screen veil of night-sea behind the content, faded
 * in by opacity when the front page reaches the terrace (v3.js initTide), and
 * on from the start on the booking page. One composited layer.
 */
.k-tide-veil {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--k-tide);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1200ms var(--k-ease-in-out);
}

.k-tide-veil.is-on {
	opacity: 1;
}

.k-v3 ::selection {
	background: var(--k-gold);
	color: var(--k-gold-ink);
}

.k-v3 :focus-visible {
	outline: 2px solid var(--k-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

:where(.k-v3) a {
	color: inherit;
	text-decoration: none;
}

:where(.k-v3) img,
:where(.k-v3) svg,
:where(.k-v3) video {
	max-width: 100%;
}

:where(.k-v3) img {
	height: auto;
}

.k-v3 .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- v3 pages only ----------------------------------------------------------

   Every selector here is wrapped in :where(), which gives it zero
   specificity: a reset must never outrank a component. (Without it,
   `.k-native p { margin: 0 }` beat `.k-statement__text { margin: 0 auto }`
   and un-centred the front page's statement.)
   -------------------------------------------------------------------------- */

:where(.k-native) *,
:where(.k-native) *::before,
:where(.k-native) *::after {
	box-sizing: border-box;
}

:where(.k-native) h1,
:where(.k-native) h2,
:where(.k-native) h3,
:where(.k-native) h4,
:where(.k-native) p,
:where(.k-native) figure,
:where(.k-native) blockquote,
:where(.k-native) dl,
:where(.k-native) dd,
:where(.k-native) ol,
:where(.k-native) ul {
	margin: 0;
}

:where(.k-native) ol,
:where(.k-native) ul {
	padding: 0;
	list-style: none;
}

:where(.k-native) h1,
:where(.k-native) h2,
:where(.k-native) h3,
:where(.k-native) h4 {
	font-family: var(--k-font-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

:where(.k-native) p {
	text-wrap: pretty;
}

:where(.k-native) button {
	font: inherit;
	color: inherit;
}

:where(.k-native) img {
	display: block;
}

/* --- Skip link ------------------------------------------------------------ */

.k-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink) !important;
	font-weight: 600;
	transform: translateY(-160%);
	transition: transform var(--k-d-2) var(--k-ease-out);
}

.k-skip:focus {
	transform: none;
}

/* --- Layout primitives ---------------------------------------------------- */

.k-site {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.k-main {
	flex: 1 0 auto;
	display: block;
	padding-top: var(--k-header-h);
}

.k-over-hero .k-main {
	padding-top: 0;
}

.k-section {
	position: relative;
	padding: var(--k-section) var(--k-gutter);
	max-width: calc(var(--k-max) + 2 * var(--k-gutter));
	margin-inline: auto;
	width: 100%;
}

.k-wrap {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-gutter);
}

/* Lenis — the smooth-scroll library's own required rules, inlined. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: clip;
}

html.k-locked,
html.k-locked body {
	overflow: hidden;
}

/* --- 02-type.css ------------------------------------------------ */
/* ==========================================================================
   Type.

   Three voices, each with one job. Instrument Serif speaks — every heading,
   every dish name, every figure worth reading from across a room. Geist
   explains — body copy and controls. Geist Mono labels — eyebrows, prices,
   times, counts: the things that are read, not spoken. Hierarchy comes from
   size and voice, never from weight, so the serif is only ever regular and
   italic.
   ========================================================================== */

.k-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-cream-2);
}

.k-eyebrow .k-icon {
	color: var(--k-gold);
	flex: none;
}

.k-eyebrow--sea,
.k-eyebrow--sea .k-icon {
	color: var(--k-sea);
}

.k-eyebrow__sep {
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.k-lang-zh .k-eyebrow {
	letter-spacing: 0.08em;
}

.k-head {
	margin-bottom: clamp(48px, 6vw, 88px);
}

.k-head__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--k-cream);
	max-width: 16ch;
}

.k-head__title em,
.k-display em {
	font-style: italic;
	color: var(--k-gold);
}

.k-head--center {
	text-align: center;
}

.k-head--center .k-head__title {
	margin-inline: auto;
}

.k-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px 48px;
}

.k-lede {
	font-size: var(--k-fs-lede);
	line-height: 1.55;
	color: var(--k-cream-2);
	max-width: 36em;
}

.k-meta {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	letter-spacing: 0.04em;
	color: var(--k-cream-3);
}

.k-display {
	font-family: var(--k-font-display);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/* Chinese headings: Noto Serif carries them (per-character fall-through from
   Instrument Serif), and a CJK face at display sizes wants air, not the Latin
   face's tight leading and negative tracking. */
.k-lang-zh .k-head__title,
.k-lang-zh .k-display,
.k-lang-zh h1,
.k-lang-zh h2 {
	line-height: 1.18;
	letter-spacing: 0.02em;
}

/*
 * Chinese has no italic. Without this the browser fakes one by slanting the
 * Noto glyphs — every <em> and every italic display line (the hero's place
 * name, the dish subtitles, the quotes) came out as a crude oblique. With
 * synthesis off, CJK glyphs stay upright while Latin inside the same line
 * still uses Instrument Serif's real italic.
 */
.k-lang-zh {
	font-synthesis: none;
}

/*
 * Measures in `ch` are sized for Latin, where 1ch is a narrow digit. A CJK
 * glyph is a full em wide, so a 13ch heading held six characters and broke
 * 分鐘 across two lines. Chinese headings are measured in em instead.
 */
.k-lang-zh .k-head__title,
.k-lang-zh .k-footer__cta-title,
.k-lang-zh .k-statement__text,
.k-lang-zh .k-pagehead__title,
.k-lang-zh .k-404__title,
.k-lang-zh .k-menu__band-title,
.k-lang-zh .k-search__none-title {
	max-width: 13em;
}

.k-lang-zh .k-takeaway .k-head__title,
.k-lang-zh .k-terrace__title {
	max-width: 9em;
}

/* --- 03-components.css ------------------------------------------------ */
/* ==========================================================================
   Components.
   ========================================================================== */

/* --- Icons ---------------------------------------------------------------- */

.k-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

/* --- Buttons ---------------------------------------------------------------

   Gold is the only filled button on the site, so wherever it appears it is
   the thing to do next. Ghost is the alternative. Sea is gold's twin for the
   terrace, where the page has turned to water.
   -------------------------------------------------------------------------- */

.k-btn {
	--k-btn-h: 50px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: var(--k-btn-h);
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--k-r-pill);
	font-family: var(--k-font-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition:
		background-color var(--k-d-2) var(--k-ease-out),
		border-color var(--k-d-2) var(--k-ease-out),
		color var(--k-d-2) var(--k-ease-out),
		box-shadow var(--k-d-3) var(--k-ease-out),
		transform var(--k-d-3) var(--k-ease-spring),
		translate 700ms var(--k-ease-spring);
	-webkit-tap-highlight-color: transparent;
}

/* Magnetic (v3.js): while the pointer is on it the button follows quickly;
   when it leaves, the spring above carries it home. */
.k-btn.is-magnet {
	transition-property: background-color, border-color, color, box-shadow, transform, translate;
	transition-duration: var(--k-d-2), var(--k-d-2), var(--k-d-2), var(--k-d-3), var(--k-d-3), 260ms;
	transition-timing-function: var(--k-ease-out);
}

.k-btn--lg {
	--k-btn-h: 60px;
	padding: 0 32px;
	font-size: 1rem;
}

.k-btn--block {
	width: 100%;
}

.k-btn .k-icon {
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-btn:hover .k-icon--arrow {
	transform: translateX(4px);
}

.k-btn:active {
	transform: scale(0.97);
}

/* The sheen — one soft band of light that crosses a filled button on hover. */
.k-btn--primary::after,
.k-btn--sea::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.38) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.9s var(--k-ease-out);
}

.k-btn--primary:hover::after,
.k-btn--sea:hover::after {
	transform: translateX(120%);
}

.k-btn--primary {
	background: var(--k-gold);
	color: var(--k-gold-ink) !important;
	box-shadow: 0 10px 30px -12px var(--k-gold-glow);
}

.k-btn--primary:hover {
	background: var(--k-gold-2);
	box-shadow: 0 18px 44px -14px rgb(221 174 98 / 0.5);
}

.k-btn--ghost {
	border-color: var(--k-line-3);
	color: var(--k-cream) !important;
	background: rgb(243 234 219 / 0.02);
}

.k-btn--ghost:hover {
	border-color: var(--k-cream);
	background: rgb(243 234 219 / 0.08);
}

.k-btn--sea {
	background: var(--k-sea);
	color: var(--k-sea-ink) !important;
	box-shadow: 0 10px 30px -12px rgb(140 197 210 / 0.35);
}

.k-btn--sea:hover {
	background: var(--k-sea-2);
}

/* --- Links ---------------------------------------------------------------- */

.k-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--k-cream);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	transition: background-size var(--k-d-3) var(--k-ease-out), color var(--k-d-2);
}

.k-link:hover {
	color: var(--k-gold-2);
	background-size: 100% 1px;
}

.k-link .k-icon {
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-link:hover .k-icon--arrow {
	transform: translateX(4px);
}

.k-link:hover .k-icon--arrow-up {
	transform: translate(2px, -2px);
}

.k-link--lg {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	font-style: italic;
}

/* --- Live status pill ------------------------------------------------------ */

.k-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--k-fs-xs);
	line-height: 1.3;
	color: var(--k-cream-2);
	white-space: nowrap;
}

.k-status__dot {
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--k-cream-3);
}

.k-status[data-state="open"] .k-status__dot {
	background: var(--k-herb);
}

.k-status[data-state="closing"] .k-status__dot,
.k-status[data-state="kitchen"] .k-status__dot {
	background: var(--k-amber);
}

.k-status[data-state="open"] .k-status__dot::after,
.k-status[data-state="closing"] .k-status__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid currentColor;
	color: inherit;
	opacity: 0;
}

.k-motion .k-status[data-state="open"] .k-status__dot::after {
	border-color: var(--k-herb);
	animation: k-ping 2.4s var(--k-ease-out) infinite;
}

.k-motion .k-status[data-state="closing"] .k-status__dot::after {
	border-color: var(--k-amber);
	animation: k-ping 1.6s var(--k-ease-out) infinite;
}

@keyframes k-ping {
	0% {
		transform: scale(0.6);
		opacity: 0.9;
	}
	80%,
	100% {
		transform: scale(2.1);
		opacity: 0;
	}
}

.k-status__label {
	color: var(--k-cream);
	font-weight: 500;
}

.k-status__detail::before {
	content: "·";
	margin-right: 8px;
	color: var(--k-cream-3);
}

.k-status__detail:empty {
	display: none;
}

/* --- Heat ----------------------------------------------------------------- */

.k-heat {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
	vertical-align: middle;
}

.k-heat__pip {
	display: inline-flex;
	color: rgb(243 234 219 / 0.2);
}

.k-heat__pip.is-lit {
	color: var(--k-ember);
}

.k-heat[data-level="3"] .k-heat__pip.is-lit {
	color: var(--k-chili);
	filter: drop-shadow(0 0 4px rgb(227 72 47 / 0.55));
}

.k-heat svg {
	display: block;
}

.k-veg {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-herb);
}

.k-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border: 1px solid rgb(221 174 98 / 0.45);
	border-radius: var(--k-r-pill);
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-gold);
}

/* --- Add-to-order button ----------------------------------------------------

   A round "+" that WooCommerce's own add-to-cart script drives: it gets
   .loading while the request runs and .added when it lands. The check replaces
   the plus for a moment (v3.js takes .added back off so the next tap is a
   plus again), and the "View cart" link WooCommerce appends after it is
   hidden — the order bar and the drawer do that job.
   -------------------------------------------------------------------------- */

.k-add {
	position: relative;
	display: inline-grid;
	place-items: center;
	grid-template-areas: "stack";
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--k-line-3);
	border-radius: 50%;
	color: var(--k-cream);
	cursor: pointer;
	transition:
		background-color var(--k-d-2) var(--k-ease-out),
		border-color var(--k-d-2) var(--k-ease-out),
		color var(--k-d-2) var(--k-ease-out),
		transform var(--k-d-3) var(--k-ease-spring);
	-webkit-tap-highlight-color: transparent;
}

.k-add > * {
	grid-area: stack;
}

.k-add:hover {
	background: var(--k-gold);
	border-color: var(--k-gold);
	color: var(--k-gold-ink);
	transform: scale(1.06);
}

.k-add:active {
	transform: scale(0.92);
}

.k-add__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.k-add__icon,
.k-add__done {
	display: inline-flex;
	transition: transform var(--k-d-3) var(--k-ease-spring), opacity var(--k-d-2);
}

.k-add__done {
	opacity: 0;
	transform: scale(0.4) rotate(-40deg);
}

.k-add.loading .k-add__icon {
	opacity: 0;
}

.k-add.loading::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	animation: k-spin 0.7s linear infinite;
}

.k-add.added {
	background: var(--k-herb);
	border-color: var(--k-herb);
	color: #10200a;
}

.k-add.added .k-add__icon {
	opacity: 0;
	transform: scale(0.4) rotate(40deg);
}

.k-add.added .k-add__done {
	opacity: 1;
	transform: none;
}

.k-add + .added_to_cart,
.k-add ~ .added_to_cart {
	display: none !important;
}

.k-add--choose {
	width: auto;
	grid-template-areas: none;
	display: inline-flex;
	gap: 8px;
	padding: 0 16px 0 18px;
	border-radius: var(--k-r-pill);
	font-size: var(--k-fs-xs);
	font-weight: 500;
}

.k-add--choose .k-add__label {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

.k-add.is-off {
	width: auto;
	padding: 0 14px;
	border-radius: var(--k-r-pill);
	border-style: dashed;
	color: var(--k-cream-3);
	font-size: var(--k-fs-xs);
	cursor: default;
}

.k-add.is-off:hover {
	background: none;
	border-color: var(--k-line-3);
	color: var(--k-cream-3);
	transform: none;
}

@keyframes k-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Framed images ---------------------------------------------------------- */

.k-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--k-r-l);
	background: var(--k-ink-3);
	isolation: isolate;
}

.k-frame__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
}

.k-frame--tall {
	aspect-ratio: 4 / 5;
}

.k-frame--arch {
	border-radius: 999px 999px var(--k-r-l) var(--k-r-l);
	aspect-ratio: 4 / 5;
}

.k-frame__caption {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	padding: 8px 14px;
	border-radius: var(--k-r-pill);
	z-index: 3;
	background: rgb(7 19 24 / 0.82);
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream);
	white-space: nowrap;
}

/* --- Spotlight — a soft light that follows the pointer across a surface ---- */

[data-k-spotlight] {
	--mx: 50%;
	--my: 50%;
	--k-spot: 0;
}

[data-k-spotlight]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgb(221 174 98 / 0.09), transparent 60%);
	opacity: var(--k-spot);
	transition: opacity var(--k-d-3) var(--k-ease-out);
}

[data-k-spotlight]:hover {
	--k-spot: 1;
}

/* --- Accordion ------------------------------------------------------------- */

.k-acc {
	border-top: 1px solid var(--k-line-2);
}

.k-acc:last-child {
	border-bottom: 1px solid var(--k-line-2);
}

.k-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	line-height: 1.2;
	color: var(--k-cream);
	cursor: pointer;
	list-style: none;
	transition: color var(--k-d-2);
}

.k-acc__q::-webkit-details-marker {
	display: none;
}

.k-acc__q:hover {
	color: var(--k-gold-2);
}

.k-acc__icon {
	position: relative;
	width: 36px;
	height: 36px;
	flex: none;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	transition: transform var(--k-d-3) var(--k-ease-out), border-color var(--k-d-2), background-color var(--k-d-2);
}

.k-acc__icon::before,
.k-acc__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.5px;
	margin: -0.75px 0 0 -6px;
	background: currentColor;
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-acc__icon::after {
	transform: rotate(90deg);
}

.k-acc[open] .k-acc__icon {
	border-color: var(--k-gold);
	background: var(--k-gold);
	color: var(--k-gold-ink);
}

.k-acc[open] .k-acc__icon::after {
	transform: rotate(0deg);
}

.k-acc__a {
	overflow: hidden;
}

.k-acc__a p {
	padding: 0 64px 28px 0;
	color: var(--k-cream-2);
	font-size: var(--k-fs-body);
	line-height: 1.65;
	max-width: 44em;
}

/* --- Form fields (v3 pages; the booking form restyles the plugin's) ------- */

.k-field,
:where(.k-native) input[type="text"],
:where(.k-native) input[type="email"],
:where(.k-native) input[type="tel"],
:where(.k-native) input[type="search"],
:where(.k-native) input[type="number"],
:where(.k-native) input[type="date"],
:where(.k-native) input[type="url"],
:where(.k-native) input[type="password"],
:where(.k-native) select,
:where(.k-native) textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 18px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-s);
	background: rgb(243 234 219 / 0.03);
	color: var(--k-cream);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--k-d-2), background-color var(--k-d-2), box-shadow var(--k-d-2);
	-webkit-appearance: none;
	appearance: none;
}

:where(.k-native) textarea {
	min-height: 120px;
	resize: vertical;
}

:where(.k-native) select {
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cdc2b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

:where(.k-native) select option {
	background: var(--k-ink-2);
	color: var(--k-cream);
}

:where(.k-native) input::placeholder,
:where(.k-native) textarea::placeholder {
	color: var(--k-cream-3);
	opacity: 1;
}

:where(.k-native) input:hover,
:where(.k-native) select:hover,
:where(.k-native) textarea:hover {
	border-color: var(--k-cream-2);
}

:where(.k-native) input:focus,
:where(.k-native) select:focus,
:where(.k-native) textarea:focus {
	outline: none;
	border-color: var(--k-gold);
	background-color: rgb(243 234 219 / 0.05);
	box-shadow: 0 0 0 4px rgb(221 174 98 / 0.16);
}

:where(.k-native) input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.85) sepia(0.2);
	cursor: pointer;
}

:where(.k-native) label {
	font-size: var(--k-fs-small);
}

/* --- Notices (WooCommerce's, wherever they print on a v3 page) ------------ */

.k-native .woocommerce-notices-wrapper:empty {
	display: none;
}

.k-native .woocommerce-message,
.k-native .woocommerce-info,
.k-native .woocommerce-error,
.k-native .woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--k-line-2);
	border-left: 3px solid var(--k-herb);
	border-radius: var(--k-r-s);
	background: var(--k-surface-2);
	color: var(--k-cream);
	font-size: var(--k-fs-small);
	list-style: none;
}

.k-native .woocommerce-info {
	border-left-color: var(--k-sea);
}

.k-native .woocommerce-error {
	border-left-color: var(--k-danger);
}

.k-native .woocommerce-message::before,
.k-native .woocommerce-info::before,
.k-native .woocommerce-error::before {
	display: none;
}

.k-native .woocommerce-message .button,
.k-native .woocommerce-info .button {
	order: 2;
	margin-left: auto;
	padding: 8px 16px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-pill);
	background: none;
	color: var(--k-cream);
	font-size: var(--k-fs-xs);
	font-weight: 500;
}

/* --- Chips (filters) -------------------------------------------------------- */

.k-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	background: transparent;
	color: var(--k-cream-2);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-xs);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--k-d-2), border-color var(--k-d-2), color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
}

.k-chip:hover {
	border-color: var(--k-cream-2);
	color: var(--k-cream);
}

.k-chip:active {
	transform: scale(0.96);
}

.k-chip[aria-pressed="true"] {
	border-color: var(--k-gold);
	background: rgb(221 174 98 / 0.14);
	color: var(--k-gold-2);
}

.k-chip .k-icon {
	opacity: 0.8;
}

/* --- Rotating ring badge -------------------------------------------------- */

.k-ring {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.k-ring text {
	fill: var(--k-cream);
	font-family: var(--k-font-mono);
	font-size: 12.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* --- Quantity stepper (the dish page form, the drawer) --------------------- */

.k-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-pill);
}

/* --- 04-header.css ------------------------------------------------ */
/* ==========================================================================
   Header.

   Three states, set by v3.js on .k-header:
     (none)        at the top of the page — the bar floats over the hero
     .is-scrolled  a glass pill fades in behind it
     .is-hidden    reading downward — out of the way until the next scroll up
   On a page without a hero the pill is there from the start, so text never
   runs under a transparent bar.

   3.1: the bar's geometry never changes. 3.0 animated its max-width, height,
   padding and radius — layout, on every frame of a 900ms transition, at the
   exact moment a visitor starts to scroll. Now the pill is its own layer
   (::before) that fades and settles into place, and the logo shrinks with
   `scale`: transform and opacity only.
   ========================================================================== */

.k-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	padding: 10px var(--k-gutter) 0;
	pointer-events: none;
	transition: transform var(--k-d-4) var(--k-ease-out);
}

.k-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	height: calc(var(--k-header-h) - 14px);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 14px 0 22px;
	pointer-events: auto;
}

.k-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid var(--k-line);
	border-radius: 22px;
	background: rgb(16 14 11 / 0.84);
	box-shadow: var(--k-shadow-md);
	opacity: 0;
	transform: scale(1.02, 1.12);
	transition: opacity var(--k-d-3) var(--k-ease-out), transform var(--k-d-4) var(--k-ease-out);
}

.k-header.is-scrolled .k-header__bar::before,
body:not(.k-over-hero) .k-header .k-header__bar::before {
	opacity: 1;
	transform: none;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.k-header.is-tide .k-header__bar::before {
	background: rgb(8 21 27 / 0.84);
}

.k-header::before {
	/* A soft dark fade behind the floating bar, so a bright photograph can
	   never swallow the logo or the links. */
	content: "";
	position: absolute;
	inset: 0 0 -40px;
	background: linear-gradient(to bottom, rgb(11 9 7 / 0.55), transparent);
	pointer-events: none;
	transition: opacity var(--k-d-3);
}

.k-header.is-scrolled::before,
body:not(.k-over-hero) .k-header::before {
	opacity: 0;
}

.k-header.is-hidden {
	transform: translate3d(0, calc(-100% - 12px), 0);
}

/* The header must never hide while something in it has focus. */
.k-header:focus-within {
	transform: none;
}

.k-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-right: auto;
}

.k-brand img {
	display: block;
	height: 40px;
	width: auto;
	transform-origin: 0 50%;
	transition: scale var(--k-d-3) var(--k-ease-out);
}

.k-header.is-scrolled .k-brand img,
body:not(.k-over-hero) .k-header .k-brand img {
	scale: 0.9;
}

.k-brand .kt-brand__text {
	font-family: var(--k-font-display);
	font-size: 1.6rem;
	color: var(--k-gold);
}

/* --- Primary navigation ---------------------------------------------------- */

.k-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.k-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-nav__list > li {
	position: static;
}

.k-nav__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--k-r-pill);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--k-cream);
	transition: background-color var(--k-d-2), color var(--k-d-2);
}

.k-nav__list > li > a:hover,
.k-nav__list > li:focus-within > a {
	background: rgb(243 234 219 / 0.08);
}

.k-nav__list > .current-menu-item > a::after,
.k-nav__list > .current-menu-ancestor > a::after,
.k-nav__list > .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--k-gold);
}

.k-nav__list > .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-nav__list > .menu-item-has-children:hover > a::before,
.k-nav__list > .menu-item-has-children:focus-within > a::before {
	transform: translateY(3px) rotate(225deg);
}

/* The Menu dropdown: every category, in columns, on a sheet of glass. */
.k-nav .sub-menu {
	position: absolute;
	left: 50%;
	top: calc(100% + 10px);
	width: min(820px, calc(100vw - 2 * var(--k-gutter)));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px 18px;
	margin: 0;
	padding: 22px;
	list-style: none;
	border: 1px solid var(--k-line);
	border-radius: 22px;
	background: rgb(18 16 12 / 0.92);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	backdrop-filter: blur(24px) saturate(150%);
	box-shadow: var(--k-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity var(--k-d-2) var(--k-ease-out), transform var(--k-d-3) var(--k-ease-out), visibility 0s linear var(--k-d-2);
}

.k-nav__list > li:hover > .sub-menu,
.k-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

/* The hover bridge across the gap between the link and the sheet. */
.k-nav__list > .menu-item-has-children:hover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
}

.k-nav .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 0.9375rem;
	color: var(--k-cream-2);
	transition: background-color var(--k-d-1), color var(--k-d-1), padding var(--k-d-3) var(--k-ease-out);
}

.k-nav .sub-menu a::after {
	content: "→";
	opacity: 0;
	transform: translateX(-6px);
	color: var(--k-gold);
	transition: opacity var(--k-d-2), transform var(--k-d-3) var(--k-ease-out);
}

.k-nav .sub-menu a:hover,
.k-nav .sub-menu a:focus-visible {
	background: rgb(243 234 219 / 0.06);
	color: var(--k-cream);
}

.k-nav .sub-menu a:hover::after,
.k-nav .sub-menu a:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* --- Actions ---------------------------------------------------------------- */

.k-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.k-header .k-status {
	margin-right: 10px;
}

.k-iconbtn,
.k-cartbtn,
.k-burger {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream);
	cursor: pointer;
	transition: background-color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
	-webkit-tap-highlight-color: transparent;
}

.k-iconbtn:hover,
.k-cartbtn:hover,
.k-burger:hover {
	background: rgb(243 234 219 / 0.08);
}

.k-iconbtn:active,
.k-cartbtn:active,
.k-burger:active {
	transform: scale(0.92);
}

.k-cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
	transition: transform var(--k-d-3) var(--k-ease-spring);
}

.k-cart-count[data-count="0"] {
	transform: scale(0);
}

.k-cart-count.is-bump {
	animation: k-bump 0.6s var(--k-ease-spring);
}

@keyframes k-bump {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}

.k-burger {
	display: none;
	gap: 6px;
	align-content: center;
}

.k-burger__line {
	display: block;
	width: 20px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-burger:hover .k-burger__line:last-child {
	transform: translateX(-4px);
}

.k-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-herb);
}

/* --- Language switcher (2.x markup, theme.js behaviour) --------------------- */

.k-header .kt-lang {
	position: relative;
}

.k-header .kt-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--k-r-pill);
	background: transparent;
	color: var(--k-cream);
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background-color var(--k-d-2);
}

.k-header .kt-lang__toggle:hover {
	background: rgb(243 234 219 / 0.08);
}

.k-header .kt-lang__caret {
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.k-header .kt-lang__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--k-line);
	border-radius: 16px;
	background: rgb(18 16 12 / 0.95);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: var(--k-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--k-d-2), transform var(--k-d-3) var(--k-ease-out), visibility 0s linear var(--k-d-2);
}

/* Without JavaScript the switcher is a plain list that opens on hover/focus. */
.k-header .kt-lang.is-open .kt-lang__menu,
.k-header .kt-lang:focus-within .kt-lang__menu,
.no-js .k-header .kt-lang:hover .kt-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.k-header .kt-lang__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--k-cream-2);
	font-size: var(--k-fs-small);
	transition: background-color var(--k-d-1), color var(--k-d-1);
}

.k-header .kt-lang__opt:hover {
	background: rgb(243 234 219 / 0.06);
	color: var(--k-cream);
}

.k-header .kt-lang__opt.is-active {
	color: var(--k-gold-2);
}

.k-header .kt-lang__short {
	width: 26px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	color: var(--k-cream-3);
}

/* Flat language links — the sheet and the footer. */
.k-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.k-langs__opt {
	padding: 7px 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-2);
	transition: border-color var(--k-d-2), color var(--k-d-2);
}

.k-langs__opt:hover {
	border-color: var(--k-cream-2);
	color: var(--k-cream);
}

.k-langs__opt.is-current {
	border-color: var(--k-gold);
	color: var(--k-gold-2);
}

/* --- Search palette (2.x instant search, restyled) -------------------------- */

.k-palette {
	position: fixed;
	inset: 0;
	z-index: 95;
	/* It is a <dialog>: undo the user-agent box. */
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	color: var(--k-cream);
	display: grid;
	justify-items: center;
	align-items: start;
	padding: clamp(72px, 14vh, 160px) 16px 24px;
	background: rgb(6 5 4 / 0.62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 200ms var(--k-ease-out);
}

.k-palette[hidden] {
	display: none;
}

.k-palette::backdrop {
	background: transparent;
}

.k-palette.is-open {
	opacity: 1;
}

.k-palette__inner {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - 140px);
	overflow: auto;
	padding: 26px 26px 18px;
	border: 1px solid var(--k-line-2);
	border-radius: 26px;
	background: var(--k-ink-2);
	box-shadow: var(--k-shadow-lg);
	transform: translateY(-12px) scale(0.98);
	transition: transform 320ms var(--k-ease-out);
}

.k-palette.is-open .k-palette__inner {
	transform: none;
}

.k-palette__eyebrow {
	margin: 0 0 10px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-palette .kt-searchform {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--k-line-2);
}

.k-palette .kt-searchform__input {
	flex: 1;
	min-width: 0;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--k-cream);
	font-family: var(--k-font-display);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.k-palette .kt-searchform__input::placeholder {
	color: var(--k-cream-3);
	opacity: 0.8;
}

.k-palette .kt-searchform__input::-webkit-search-cancel-button,
.k-palette .kt-searchform__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.k-palette .kt-searchform button[type="submit"] {
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-small);
	font-weight: 500;
	cursor: pointer;
}

.k-palette__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream-2);
	cursor: pointer;
}

.k-palette__close:hover {
	background: var(--k-surface-3);
	color: var(--k-cream);
}

.k-palette__results {
	display: grid;
	gap: 2px;
	padding: 12px 0 4px;
}

.k-palette__results[hidden] {
	display: none;
}

.k-palette .kt-search-hit {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name price" "cat price";
	align-items: center;
	gap: 2px 20px;
	padding: 12px 14px;
	border-radius: 14px;
	color: var(--k-cream);
	transition: background-color var(--k-d-1);
}

.k-palette .kt-search-hit:hover,
.k-palette .kt-search-hit.is-active {
	background: var(--k-surface-3);
}

.k-palette .kt-search-hit__name {
	grid-area: name;
	font-family: var(--k-font-display);
	font-size: 1.375rem;
	line-height: 1.2;
}

.k-palette .kt-search-hit__cat {
	grid-area: cat;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-palette .kt-search-hit__price {
	grid-area: price;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
	color: var(--k-gold);
}

.k-palette .kt-search-panel__empty {
	padding: 18px 14px;
	color: var(--k-cream-2);
}

.k-palette__hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--k-line);
	font-size: var(--k-fs-micro);
	color: var(--k-cream-3);
}

.k-palette__hint kbd {
	min-width: 22px;
	padding: 2px 6px;
	border: 1px solid var(--k-line-2);
	border-radius: 6px;
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	text-align: center;
	color: var(--k-cream-2);
}

.k-palette__sep {
	width: 12px;
}

/* --- The mobile navigation sheet -------------------------------------------- */

.k-navsheet {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background:
		radial-gradient(120% 60% at 0% 100%, rgb(242 106 61 / 0.16), transparent 60%),
		var(--k-ink);
	color: var(--k-cream);
	overflow: auto;
	opacity: 0;
	transition: opacity var(--k-d-3) var(--k-ease-out);
}

.k-navsheet::backdrop {
	background: transparent;
}

.k-navsheet[open] {
	display: flex;
	flex-direction: column;
}

.k-navsheet.is-open {
	opacity: 1;
}

.k-navsheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--k-header-h);
	padding: 0 var(--k-gutter);
}

.k-navsheet__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream);
	cursor: pointer;
}

.k-navsheet__nav {
	flex: 1;
	padding: 4vh var(--k-gutter) 24px;
}

.k-navsheet__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: k-sheet;
}

.k-navsheet__list > li {
	counter-increment: k-sheet;
	border-bottom: 1px solid var(--k-line);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--k-d-3) var(--k-ease-out), transform var(--k-d-4) var(--k-ease-out);
}

.k-navsheet.is-open .k-navsheet__list > li {
	opacity: 1;
	transform: none;
}

.k-navsheet.is-open .k-navsheet__list > li:nth-child(1) { transition-delay: 60ms; }
.k-navsheet.is-open .k-navsheet__list > li:nth-child(2) { transition-delay: 110ms; }
.k-navsheet.is-open .k-navsheet__list > li:nth-child(3) { transition-delay: 160ms; }
.k-navsheet.is-open .k-navsheet__list > li:nth-child(4) { transition-delay: 210ms; }
.k-navsheet.is-open .k-navsheet__list > li:nth-child(5) { transition-delay: 260ms; }
.k-navsheet.is-open .k-navsheet__list > li:nth-child(6) { transition-delay: 310ms; }

.k-navsheet__list > li > a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	font-family: var(--k-font-display);
	font-size: clamp(2.5rem, 11vw, 3.5rem);
	line-height: 1.05;
	color: var(--k-cream);
}

.k-navsheet__list > li > a::before {
	content: counter(k-sheet, decimal-leading-zero);
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.1em;
	color: var(--k-gold);
	transform: translateY(-1.6em);
}

.k-navsheet__list > .current-menu-item > a {
	font-style: italic;
	color: var(--k-gold-2);
}

.k-navsheet__foot {
	display: grid;
	gap: 18px;
	padding: 24px var(--k-gutter) max(28px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--k-line);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--k-d-3) var(--k-ease-out) 300ms, transform var(--k-d-4) var(--k-ease-out) 300ms;
}

.k-navsheet.is-open .k-navsheet__foot {
	opacity: 1;
	transform: none;
}

.k-navsheet__meta {
	margin: 0;
	font-size: var(--k-fs-small);
	line-height: 1.6;
	color: var(--k-cream-2);
}

.k-navsheet__meta a {
	color: var(--k-cream);
}

.k-status--sheet {
	white-space: normal;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
	.k-header .k-status {
		display: none;
	}
}

@media (max-width: 960px) {
	.k-nav,
	.k-header .kt-lang,
	.k-iconbtn--account {
		display: none;
	}

	.k-burger {
		display: inline-grid;
	}

	.k-header__bar {
		gap: 8px;
	}
}

@media (max-width: 720px) {
	.k-header {
		padding: 8px 10px 0;
	}

	.k-header__bar {
		height: 54px;
		padding: 0 6px 0 16px;
	}

	.k-header__bar::before {
		border-radius: 18px;
	}

	.k-brand img {
		height: 32px;
	}
}

/* --- 05-footer.css ------------------------------------------------ */
/* ==========================================================================
   Footer, the order bar, the order drawer.
   ========================================================================== */

.k-footer {
	position: relative;
	margin-top: auto;
	padding: 0 var(--k-gutter);
	overflow: hidden;
	border-top: 1px solid var(--k-line);
}

.k-footer__cta {
	max-width: var(--k-max);
	margin: 0 auto;
	padding: clamp(96px, 12vw, 180px) 0 clamp(72px, 9vw, 128px);
	text-align: center;
}

.k-footer__cta .k-eyebrow {
	justify-content: center;
}

.k-footer__cta-title {
	max-width: 14ch;
	margin: 0 auto;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xl);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--k-cream);
}

.k-footer__cta-title em {
	font-style: italic;
	color: var(--k-gold);
}

.k-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: clamp(36px, 4vw, 56px);
}

.k-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 48px 40px;
	max-width: var(--k-max);
	margin: 0 auto;
	padding: 64px 0 40px;
	border-top: 1px solid var(--k-line);
}

.k-footer__col {
	display: grid;
	align-content: start;
	gap: 16px;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-footer__title {
	margin: 0 0 4px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-brand--footer img {
	height: 52px;
}

.k-footer__about {
	max-width: 30ch;
	line-height: 1.6;
}

.k-footer__lines {
	display: grid;
	gap: 6px;
	margin: 0;
	font-style: normal;
	line-height: 1.55;
}

.k-footer__lines .k-link {
	justify-self: start;
}

.k-footer__quiet {
	color: var(--k-cream-3);
}

.k-footer__note {
	display: flex;
	gap: 10px;
	margin: 4px 0 0;
	font-size: var(--k-fs-xs);
	line-height: 1.55;
	color: var(--k-cream-3);
}

.k-footer__note .k-icon {
	margin-top: 2px;
	color: var(--k-sea);
}

.k-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.k-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-2);
	transition: border-color var(--k-d-2), color var(--k-d-2);
}

.k-footer__social a:hover {
	border-color: var(--k-gold);
	color: var(--k-gold-2);
}

.k-footer__links {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-footer__links a {
	color: var(--k-cream-2);
	transition: color var(--k-d-2), padding var(--k-d-3) var(--k-ease-out);
}

.k-footer__links a:hover {
	color: var(--k-gold-2);
	padding-left: 6px;
}

.k-footer .k-status {
	flex-wrap: wrap;
	white-space: normal;
}

/* In a narrow column the detail reads better on its own line. */
.k-status--footer .k-status__detail {
	flex-basis: 100%;
	padding-left: 16px;
}

.k-status--footer .k-status__detail::before {
	display: none;
}

/* The name, set the width of the page — it rises into view as the page ends. */
.k-footer__word {
	margin: 0 auto;
	max-width: var(--k-max);
	font-family: var(--k-font-display);
	font-size: clamp(4rem, 17.2vw, 17rem);
	font-style: italic;
	line-height: 0.8;
	letter-spacing: -0.035em;
	white-space: nowrap;
	text-align: center;
	color: transparent;
	background: linear-gradient(180deg, rgb(221 174 98 / 0.75), rgb(221 174 98 / 0.08) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
	transform-origin: 50% 100%;
	padding-bottom: 0.08em;
}

.k-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	max-width: var(--k-max);
	margin: 0 auto;
	padding: 26px 0 max(26px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--k-line);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-footer__legal {
	margin: 0 auto 0 0;
}

.k-footer__legal a {
	color: var(--k-cream-2);
}

.k-footer__legal a:hover {
	color: var(--k-gold-2);
}

.k-footer__dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 10px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.k-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--k-cream-2);
}

.k-footer__top:hover {
	color: var(--k-gold-2);
}

@media (max-width: 1100px) {
	.k-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.k-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.k-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.k-footer__legal {
		width: 100%;
	}
}

/* --- The order bar ----------------------------------------------------------

   Appears the moment there is something in the order, on every v3 page:
   count, subtotal, and a way into the drawer. It slides up from the bottom
   edge, and bumps when a dish lands in it.
   -------------------------------------------------------------------------- */

.k-orderbar {
	position: fixed;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 70;
	transform: translate(-50%, calc(100% + 40px));
	/* visibility hides it from keyboards and screen readers once it is gone;
	   the delay lets the slide-out finish first. */
	visibility: hidden;
	transition: transform var(--k-d-4) var(--k-ease-out), visibility 0s linear var(--k-d-4);
	pointer-events: none;
}

.k-orderbar.is-visible {
	transform: translate(-50%, 0);
	visibility: visible;
	transition: transform var(--k-d-4) var(--k-ease-out), visibility 0s;
	pointer-events: auto;
}

/* While the bar is up, the page ends above it rather than behind it. */
.k-has-order .k-footer__bar {
	padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.k-orderbar__btn {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 60px;
	padding: 0 10px 0 10px;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink) !important;
	box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.7), 0 10px 30px -14px var(--k-gold-glow);
	transition: transform var(--k-d-3) var(--k-ease-spring), background-color var(--k-d-2);
}

.k-orderbar__btn:hover {
	background: var(--k-gold-2);
}

.k-orderbar__btn:active {
	transform: scale(0.97);
}

.k-orderbar.is-bump .k-orderbar__btn {
	animation: k-orderbar-bump 0.7s var(--k-ease-spring);
}

@keyframes k-orderbar-bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

.k-orderbar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
}

.k-orderbar__count {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: var(--k-r-pill);
	background: var(--k-gold-ink);
	color: var(--k-gold);
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
	font-weight: 500;
}

.k-orderbar__label {
	font-weight: 600;
	font-size: var(--k-fs-small);
	white-space: nowrap;
}

.k-orderbar__total {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
	white-space: nowrap;
}

.k-orderbar__total .woocommerce-Price-currencySymbol {
	margin-right: 2px;
}

.k-orderbar__go {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgb(27 19 7 / 0.1);
}

@media (max-width: 420px) {
	.k-orderbar {
		left: 12px;
		right: 12px;
		transform: translateY(calc(100% + 40px));
	}

	.k-orderbar.is-visible {
		transform: none;
	}

	.k-orderbar__btn {
		justify-content: space-between;
	}
}

/* --- The order drawer (a modal <dialog>) ------------------------------------ */

.k-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(460px, 100vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--k-cream);
	overflow: visible;
}

.k-drawer::backdrop {
	background: rgb(6 5 4 / 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--k-d-3) var(--k-ease-out);
}

.k-drawer.is-open::backdrop {
	opacity: 1;
}

.k-drawer__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-left: 1px solid var(--k-line-2);
	background: var(--k-ink-2);
	box-shadow: -40px 0 80px -20px rgb(0 0 0 / 0.6);
	transform: translateX(100%);
	transition: transform 560ms var(--k-ease-out);
}

.k-drawer.is-open .k-drawer__panel {
	transform: none;
}

.k-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 22px 14px 28px;
}

.k-drawer__title {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1;
}

.k-drawer__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream);
	cursor: pointer;
	transition: background-color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
}

.k-drawer__close:hover {
	background: var(--k-surface-3);
	transform: rotate(90deg);
}

.k-status--drawer {
	margin: 0 28px 10px;
	white-space: normal;
}

.k-drawer__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.k-drawer .widget_shopping_cart_content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.k-drawer__note {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 14px 28px max(18px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--k-line);
	font-size: var(--k-fs-xs);
	line-height: 1.5;
	color: var(--k-cream-3);
}

.k-drawer__note .k-icon {
	flex: none;
	margin-top: 1px;
	color: var(--k-gold);
}

/* The list (v3/woocommerce/cart/mini-cart.php). */
.k-mini {
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin: 0;
	padding: 6px 28px;
	list-style: none;
	overscroll-behavior: contain;
}

.k-mini__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas: "main main remove" "qty price price";
	align-items: center;
	gap: 12px 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--k-line);
	animation: k-fade-up 420ms var(--k-ease-out) both;
}

.k-mini__item.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.k-mini__main {
	grid-area: main;
	min-width: 0;
}

.k-mini__name {
	font-family: var(--k-font-display);
	font-size: 1.375rem;
	line-height: 1.15;
	color: var(--k-cream);
}

a.k-mini__name:hover {
	color: var(--k-gold-2);
}

.k-mini__main .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 6px 0 0;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-mini__main .variation dt,
.k-mini__main .variation dd,
.k-mini__main .variation p {
	margin: 0;
}

.k-mini__qty {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
}

.k-mini__step {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream);
	cursor: pointer;
	transition: background-color var(--k-d-1), transform var(--k-d-3) var(--k-ease-spring);
}

.k-mini__step:hover {
	background: var(--k-surface-3);
}

.k-mini__step:active {
	transform: scale(0.88);
}

.k-mini__n {
	min-width: 26px;
	text-align: center;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
}

.k-mini__price {
	grid-area: price;
	justify-self: end;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
	color: var(--k-cream);
}

.k-mini__remove {
	grid-area: remove;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--k-cream-3) !important;
	transition: background-color var(--k-d-1), color var(--k-d-1);
}

.k-mini__remove:hover {
	background: rgb(255 122 107 / 0.14);
	color: var(--k-danger) !important;
}

.k-mini__foot {
	padding: 18px 28px 20px;
	border-top: 1px solid var(--k-line-2);
	background: var(--k-ink-2);
}

.k-mini__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 16px;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-mini__total strong {
	font-weight: 500;
}

.k-mini__total .amount {
	font-family: var(--k-font-display);
	font-size: 2rem;
	color: var(--k-cream);
}

.k-mini__actions {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 10px;
}

.k-mini__extra {
	margin-top: 12px;
}

.k-mini__empty {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 14px;
	flex: 1;
	padding: 40px 36px;
	text-align: center;
}

.k-mini__empty-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	color: var(--k-gold);
}

.k-mini__empty-title {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 1.875rem;
	color: var(--k-cream);
}

.k-mini__empty-text {
	max-width: 30ch;
	margin: 0 0 8px;
	color: var(--k-cream-2);
	font-size: var(--k-fs-small);
}

@keyframes k-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* --- The language suggestion bar (2.x markup) ------------------------------- */

.k-v3 .kt-langbar {
	position: fixed;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 75;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	width: max-content;
	max-width: calc(100vw - 24px);
	padding: 10px 10px 10px 20px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	background: rgb(18 16 12 / 0.92);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: var(--k-shadow-lg);
	transform: translateX(-50%);
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-v3 .kt-langbar[hidden] {
	display: none;
}

.k-v3 .kt-langbar__text {
	margin: 0;
}

.k-v3 .kt-langbar__accept {
	padding: 9px 16px;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-weight: 500;
}

.k-v3 .kt-langbar__dismiss {
	padding: 9px 12px;
	border: 0;
	background: none;
	color: var(--k-cream-3);
	font: inherit;
	cursor: pointer;
}

/* The ember that flies from an add button to the order (v3.js flyToCart). */
.k-flyer {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff3dd 0%, var(--k-gold) 45%, rgb(242 106 61 / 0) 72%);
	box-shadow: 0 0 18px 6px rgb(242 106 61 / 0.45);
	pointer-events: none;
}

/* WooCommerce blocks a refreshing fragment with a jQuery BlockUI overlay —
   white or black at 60% by default, a flash over the header badge and the
   order bar on every add. v3 shows its own busy states instead. */
.k-v3 .blockUI.blockOverlay {
	background: transparent !important;
}

/* --- 10-front.css ------------------------------------------------ */
/* ==========================================================================
   Front page.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------- */

.k-hero {
	/* The timeline its layers leave on (90-motion.css). */
	view-timeline: --k-hero block;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--k-header-h) + 32px) var(--k-gutter) 0;
	overflow: hidden;
	isolation: isolate;
}

.k-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}

/* The pointer-lean layer (v3.js sets `translate`), a touch larger than the
   hero so a lean can never show an edge. */
.k-hero__lean {
	position: absolute;
	inset: -3%;
}

.k-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	transform-origin: 62% 45%;
}

/* Deepens as the hero leaves (a scroll-driven opacity, 90-motion.css). */
.k-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--k-ink);
	opacity: 0;
	pointer-events: none;
}

.k-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgb(11 9 7 / 0.94) 0%, rgb(11 9 7 / 0.72) 34%, rgb(11 9 7 / 0.22) 68%, rgb(11 9 7 / 0.4) 100%),
		linear-gradient(0deg, var(--k-ink) 0%, rgb(11 9 7 / 0.55) 24%, transparent 52%),
		linear-gradient(180deg, rgb(11 9 7 / 0.55) 0%, transparent 26%);
}

.k-hero .kt-embers {
	z-index: -1;
}

.k-hero__inner {
	width: 100%;
	max-width: var(--k-max);
	margin: 0 auto;
	padding-bottom: clamp(36px, 6vh, 72px);
}

.k-hero__eyebrow {
	flex-wrap: wrap;
	row-gap: 6px;
	margin-bottom: clamp(20px, 3vh, 36px);
}

.k-hero__eyebrow > span:not(.k-eyebrow__sep) {
	white-space: nowrap;
}

.k-hero__title {
	display: flex;
	flex-direction: column;
	margin: 0 0 clamp(28px, 4vh, 48px);
	font-family: var(--k-font-display);
	font-weight: 400;
	line-height: 0.84;
	letter-spacing: -0.035em;
}

[data-k-hero-line] {
	display: block;
	overflow: hidden;
	padding: 0.02em 0.08em 0.08em 0;
	margin-bottom: -0.08em;
}

[data-k-hero-line] > span {
	display: inline-block;
	transform-origin: 0 100%;
}

.k-hero__over {
	font-size: calc(var(--k-fs-hero) * 0.42);
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--k-gold);
}

.k-hero__main {
	font-size: var(--k-fs-hero);
	color: var(--k-cream);
}

.k-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px 56px;
}

.k-hero__lede {
	max-width: 31em;
	margin: 0;
	font-size: var(--k-fs-lede);
	line-height: 1.55;
	color: var(--k-cream-2);
}

.k-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.k-hero__strip {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: var(--k-max);
	margin: 0 auto;
	padding: 18px 0 22px;
	border-top: 1px solid var(--k-line-2);
	font-size: var(--k-fs-xs);
}

.k-status--hero {
	white-space: normal;
}

.k-hero__scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 38px;
	overflow: hidden;
	background: var(--k-line-2);
}

.k-hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 40%;
	background: var(--k-gold);
	transform: translate3d(0, -100%, 0);
}

/* A transform, not `top`: 3.0 animated `top`, which re-ran layout on every
   frame for as long as the hero was on screen. */
.k-motion .k-hero__scroll-line::after {
	animation: k-scroll-line 2.2s var(--k-ease-in-out) infinite;
}

@keyframes k-scroll-line {
	0% {
		transform: translate3d(0, -100%, 0);
	}
	60%,
	100% {
		transform: translate3d(0, 250%, 0);
	}
}

.k-hero__where {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--k-cream-2);
	text-align: right;
	transition: color var(--k-d-2);
}

.k-hero__where:hover {
	color: var(--k-cream);
}

.k-hero__where .k-icon {
	color: var(--k-gold);
}

@media (max-width: 860px) {
	.k-hero__strip {
		grid-template-columns: 1fr auto;
	}

	.k-hero__where {
		display: none;
	}

	.k-hero__veil {
		background:
			linear-gradient(0deg, var(--k-ink) 0%, rgb(11 9 7 / 0.82) 36%, rgb(11 9 7 / 0.35) 70%, rgb(11 9 7 / 0.55) 100%);
	}
}

@media (max-width: 560px) {
	.k-hero {
		--k-fs-hero: clamp(4.25rem, 22vw, 7rem);
	}

	.k-hero__eyebrow .k-eyebrow__sep {
		width: 14px;
	}

	.k-hero__over {
		font-size: calc(var(--k-fs-hero) * 0.46);
	}

	.k-hero__actions {
		width: 100%;
	}

	.k-hero__actions .k-btn {
		flex: 1 1 auto;
	}

	.k-hero__strip {
		grid-template-columns: 1fr;
	}

	.k-hero__scroll {
		display: none;
	}
}

/* --- The ember field (2.x markup and flight plan, redrawn) ----------------- */

.kt-embers {
	display: none;
}

.k-motion .kt-embers {
	--kt-ember-rise: 70vh;
	--kt-ember-mid: 36vh;
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.k-motion .kt-embers::before {
	content: "";
	position: absolute;
	left: -12%;
	bottom: -20%;
	width: 74%;
	height: 64%;
	background: radial-gradient(ellipse at 35% 85%, rgb(242 106 61 / 0.16), transparent 64%);
	animation: k-glow 11s var(--k-ease-in-out) infinite alternate;
}

.k-motion .kt-embers::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -22%;
	width: 55%;
	height: 52%;
	background: radial-gradient(ellipse at 60% 90%, rgb(221 174 98 / 0.08), transparent 60%);
	animation: k-glow 13s var(--k-ease-in-out) -5s infinite alternate;
}

.k-motion .kt-embers span {
	position: absolute;
	left: var(--e-x, 50%);
	bottom: 3%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 238 208 / 0.95) 0%, #ffb35c 38%, transparent 70%);
	box-shadow: 0 0 10px 2px rgb(242 106 61 / 0.22);
	opacity: 0;
	/* Animated by v3.js (initEmbers) as Web Animations with literal values.
	   The keyframes below read each ember's custom properties — and Chrome
	   cannot hand an animation whose keyframes contain var() to the
	   compositor, so all sixteen were restyled on the main thread every frame
	   (4,080 style invalidations in a 4-second scroll of the menu). They stay
	   as the no-script fallback only. */
}

html:not(.k-anim) .k-motion .kt-embers span,
.k-motion:not(.k-anim) .kt-embers span {
	animation: k-ember var(--e-d, 22s) linear var(--e-t, 0s) infinite;
}

@keyframes k-glow {
	from {
		opacity: 0.55;
		transform: scale(1);
	}
	to {
		opacity: 1;
		transform: scale(1.08);
	}
}

@keyframes k-ember {
	0% {
		transform: translate3d(0, 0, 0) scale(var(--e-s, 1));
		opacity: 0;
	}
	8% {
		opacity: var(--e-o, 0.4);
	}
	45% {
		transform: translate3d(var(--e-sway, 16px), calc(var(--kt-ember-mid, 36vh) * -1), 0) scale(calc(var(--e-s, 1) * 0.92));
	}
	78% {
		opacity: calc(var(--e-o, 0.4) * 0.5);
	}
	100% {
		transform: translate3d(calc(var(--e-sway, 16px) * -0.6), calc(var(--kt-ember-rise, 70vh) * -1), 0) scale(calc(var(--e-s, 1) * 0.78));
		opacity: 0;
	}
}

@media (max-width: 600px) {
	.k-motion .kt-embers span:nth-child(2n) {
		display: none;
	}
}

/* --- Marquee ---------------------------------------------------------------- */

.k-marquee {
	position: relative;
	padding: clamp(22px, 3vw, 36px) 0;
	border-top: 1px solid var(--k-line);
	border-bottom: 1px solid var(--k-line);
	overflow: hidden;
}

/* Soft edges: two static gradient layers over the ends. 3.0 used a CSS mask,
   which makes the browser re-apply the mask to the moving track every frame. */
.k-marquee::before,
.k-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 9%;
	pointer-events: none;
}

.k-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--k-ink), transparent);
}

.k-marquee::after {
	right: 0;
	background: linear-gradient(270deg, var(--k-ink), transparent);
}

.k-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.k-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
}

.k-marquee__item {
	display: inline-flex;
	align-items: baseline;
	gap: 16px;
	padding: 0 clamp(20px, 2.4vw, 36px);
	white-space: nowrap;
}

.k-marquee__th {
	font-family: var(--k-font-thai);
	font-size: clamp(2rem, 4.2vw, 3.75rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--k-cream);
}

.k-marquee__en {
	font-family: var(--k-font-display);
	font-size: clamp(1.1rem, 1.6vw, 1.5rem);
	font-style: italic;
	color: var(--k-gold);
}

.k-marquee__star {
	display: inline-flex;
	color: var(--k-ember);
	opacity: 0.8;
}

/* Without motion the band is a static strip; let it scroll by hand. */
html:not(.k-motion) .k-marquee {
	overflow-x: auto;
	scrollbar-width: none;
}

/* --- Statement --------------------------------------------------------------- */

.k-statement {
	text-align: center;
	padding-block: clamp(120px, 16vw, 240px);
}

/*
 * Where scroll-driven animations run, the statement is PINNED: the section is
 * taller than the screen, the sentence holds still in the middle of it, and
 * the scroll through the section lights it word by word (90-motion.css). It
 * is native position: sticky — the compositor's own — so the pin costs
 * nothing. Elsewhere it is an ordinary section that lights in one sweep.
 */
@supports (animation-timeline: view()) {
	.k-motion .k-statement {
		height: 190vh;
		height: 190svh;
		padding-block: 0;
	}

	.k-motion .k-statement__pin {
		position: sticky;
		top: 0;
		display: grid;
		align-content: center;
		justify-items: center;
		min-height: 100vh;
		min-height: 100svh;
		padding: var(--k-header-h) 0 24px;
	}
}

.k-statement__eyebrow {
	justify-content: center;
}

.k-statement__text {
	max-width: 19ch;
	margin: 0 auto;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xl);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--k-cream);
	text-wrap: balance;
}

.k-statement__text em {
	font-style: italic;
	color: var(--k-gold);
}

/* --- Promises --------------------------------------------------------------- */

.k-promises {
	padding-top: 0;
}

.k-promises__title {
	max-width: none;
}

.k-promises__dot {
	color: var(--k-ember);
}

.k-promises__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--k-line-2);
	counter-reset: k-promise;
}

.k-promise {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(260px, 26vw, 360px);
	padding: 28px clamp(18px, 2vw, 32px) 32px;
	border-right: 1px solid var(--k-line);
	overflow: hidden;
}

.k-promise:first-child {
	padding-left: 0;
}

.k-promise:last-child {
	border-right: 0;
}

.k-promise::after {
	/* The line that draws across the top on hover. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--k-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 700ms var(--k-ease-out);
}

.k-promise:hover::after {
	transform: scaleX(1);
}

.k-promise__num {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	letter-spacing: 0.1em;
	color: var(--k-cream-3);
	transition: color var(--k-d-2);
}

.k-promise:hover .k-promise__num {
	color: var(--k-ember);
}

.k-promise__title {
	margin-top: auto;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-m);
	line-height: 1.02;
	color: var(--k-cream);
	transition: transform var(--k-d-4) var(--k-ease-out);
}

.k-promise:hover .k-promise__title {
	transform: translateY(-6px);
}

.k-promise__text {
	margin-top: 14px;
	max-width: 24ch;
	font-size: var(--k-fs-small);
	line-height: 1.55;
	color: var(--k-cream-2);
}

@media (max-width: 1000px) {
	.k-promises__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.k-promise:nth-child(2) {
		border-right: 0;
	}

	.k-promise:nth-child(3) {
		padding-left: 0;
	}

	.k-promise:nth-child(n + 3) {
		border-top: 1px solid var(--k-line);
	}
}

@media (max-width: 560px) {
	.k-promises__list {
		grid-template-columns: 1fr;
	}

	.k-promise {
		min-height: 0;
		padding: 26px 0 30px;
		border-right: 0;
		border-top: 1px solid var(--k-line);
	}

	.k-promise:first-child {
		border-top: 0;
	}

	.k-promise__title {
		margin-top: 40px;
	}
}

/* --- Signatures (menu highlights) --------------------------------------------- */

.k-sig-list {
	border-top: 1px solid var(--k-line-2);
}

.k-sig {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	padding-right: 4px;
	border-bottom: 1px solid var(--k-line-2);
	transition: background-color var(--k-d-3);
}

.k-sig::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--k-gold), var(--k-ember));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 800ms var(--k-ease-out);
}

.k-sig:hover::after,
.k-sig:focus-within::after {
	transform: scaleX(1);
}

.k-sig__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 24px;
	padding: clamp(22px, 2.6vw, 34px) 0;
	color: var(--k-cream);
}

.k-sig__idx {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
	transition: color var(--k-d-2);
}

.k-sig__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.k-sig__name {
	font-family: var(--k-font-display);
	font-size: clamp(2rem, 4vw, 3.75rem);
	line-height: 1;
	letter-spacing: -0.015em;
	transition: transform var(--k-d-4) var(--k-ease-out), color var(--k-d-2);
}

.k-sig__desc {
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
	transition: transform var(--k-d-4) var(--k-ease-out) 40ms;
}

.k-sig__meta {
	display: grid;
	justify-items: end;
	gap: 8px;
}

.k-sig__cat {
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-sig__price {
	min-width: 104px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-body);
	text-align: right;
	color: var(--k-gold);
}

.k-sig__link:hover .k-sig__name,
.k-sig__link:focus-visible .k-sig__name {
	transform: translateX(14px);
	color: var(--k-gold-2);
}

.k-sig__link:hover .k-sig__desc,
.k-sig__link:focus-visible .k-sig__desc {
	transform: translateX(14px);
}

.k-sig__link:hover .k-sig__idx {
	color: var(--k-ember);
}

.k-sig__add .k-add:not(.k-add--choose) {
	width: 52px;
	height: 52px;
}

.k-sig__add .k-add--choose {
	height: 52px;
}

@media (max-width: 760px) {
	.k-sig__link {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "body price" "meta meta";
		gap: 10px 16px;
	}

	.k-sig__idx {
		display: none;
	}

	.k-sig__body {
		grid-area: body;
	}

	.k-sig__price {
		grid-area: price;
		min-width: 0;
		align-self: start;
		padding-top: 6px;
	}

	.k-sig__meta {
		grid-area: meta;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	.k-sig__add .k-add:not(.k-add--choose) {
		width: 46px;
		height: 46px;
	}
}

/* --- Takeaway ---------------------------------------------------------------- */

.k-takeaway {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(48px, 7vw, 120px);
}

.k-takeaway__media {
	position: relative;
}

.k-takeaway__media .k-ring {
	position: absolute;
	right: -48px;
	bottom: -48px;
	width: clamp(150px, 14vw, 200px);
	height: clamp(150px, 14vw, 200px);
	border-radius: 50%;
	background: var(--k-ink);
	box-shadow: 0 0 0 1px var(--k-line-2);
}

/* Where scroll-driven animations run, the ring turns with the scroll
   (90-motion.css); elsewhere it turns on its own. */
@supports not (animation-timeline: view()) {
	.k-motion .k-takeaway__media .k-ring {
		animation: k-rotate 26s linear infinite;
	}
}

@keyframes k-rotate {
	to {
		transform: rotate(360deg);
	}
}

.k-ring__core {
	position: absolute;
	right: -48px;
	bottom: -48px;
	display: grid;
	place-items: center;
	align-content: center;
	width: clamp(150px, 14vw, 200px);
	height: clamp(150px, 14vw, 200px);
	font-family: var(--k-font-display);
	font-size: clamp(2.75rem, 4.4vw, 3.75rem);
	line-height: 0.9;
	color: var(--k-gold);
	pointer-events: none;
}

.k-ring__core small {
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--k-cream-2);
}

.k-takeaway .k-head__title {
	max-width: 13ch;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.k-eta {
	display: grid;
	gap: 4px;
	margin-bottom: clamp(36px, 4vw, 52px);
	padding: 22px 26px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-m);
	background: var(--k-surface);
}

.k-eta__label {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-eta__time {
	font-family: var(--k-font-display);
	font-size: clamp(3.25rem, 6vw, 5.5rem);
	line-height: 1;
	color: var(--k-cream);
	font-variant-numeric: tabular-nums;
}

.k-eta[data-state="open"] .k-eta__time,
.k-eta[data-state="closing"] .k-eta__time {
	color: var(--k-gold);
}

.k-eta__time.is-tick {
	animation: k-tick 600ms var(--k-ease-out);
}

@keyframes k-tick {
	from {
		opacity: 0;
		transform: translateY(12px);
		filter: blur(4px);
	}
}

.k-steps {
	display: grid;
	gap: 0;
	margin-bottom: clamp(36px, 4vw, 48px);
	border-top: 1px solid var(--k-line);
}

.k-step {
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-template-areas: "num title" ". text";
	gap: 4px 12px;
	padding: 18px 0;
	border-bottom: 1px solid var(--k-line);
}

.k-step__num {
	grid-area: num;
	padding-top: 4px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	color: var(--k-ember);
}

.k-step__title {
	grid-area: title;
	font-family: var(--k-font-display);
	font-size: 1.625rem;
	line-height: 1.15;
	color: var(--k-cream);
}

.k-step__text {
	grid-area: text;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-takeaway__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.k-takeaway__actions .k-meta {
	margin: 0;
	max-width: 28ch;
}

@media (max-width: 960px) {
	.k-takeaway {
		grid-template-columns: 1fr;
	}

	.k-takeaway__media {
		max-width: 520px;
		margin-right: 56px;
	}
}

@media (max-width: 560px) {
	.k-takeaway__media .k-ring,
	.k-ring__core {
		right: -28px;
		bottom: -36px;
		width: 132px;
		height: 132px;
	}

	.k-ring__core {
		font-size: 2.5rem;
	}
}

/* --- Numbers ------------------------------------------------------------------ */

.k-numbers {
	padding-top: clamp(40px, 6vw, 80px);
}

.k-numbers .k-head {
	margin-bottom: clamp(36px, 4vw, 56px);
}

.k-numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--k-line-2);
	border-bottom: 1px solid var(--k-line-2);
}

.k-number {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 14px;
	padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 32px);
	border-right: 1px solid var(--k-line);
	text-align: center;
}

.k-number:last-child {
	border-right: 0;
}

.k-number__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 0.2em;
	margin: 0;
	font-family: var(--k-font-display);
	font-size: clamp(3.5rem, 7vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--k-cream);
	font-variant-numeric: tabular-nums;
}

.k-number__unit {
	font-size: 0.42em;
	font-style: italic;
	color: var(--k-gold);
	letter-spacing: 0;
}

.k-number__label {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

@media (max-width: 860px) {
	.k-numbers__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.k-number:nth-child(2) {
		border-right: 0;
	}

	.k-number:nth-child(n + 3) {
		border-top: 1px solid var(--k-line);
	}
}

/* --- Terrace (tide) ---------------------------------------------------------------- */

.k-terrace__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(48px, 7vw, 120px);
}

.k-terrace__media {
	max-width: 560px;
}

.k-terrace__title {
	max-width: 11ch;
	margin-bottom: 28px;
	font-size: var(--k-fs-xl);
}

.k-terrace .k-lede {
	margin-bottom: 28px;
}

.k-sunset {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 40px;
	padding: 16px 20px;
	border: 1px solid rgb(140 197 210 / 0.28);
	border-radius: var(--k-r-m);
	background: linear-gradient(90deg, rgb(242 106 61 / 0.12), rgb(140 197 210 / 0.06));
	color: var(--k-cream-2);
	font-size: var(--k-fs-small);
	max-width: 34em;
}

.k-sunset strong {
	font-family: var(--k-font-mono);
	font-weight: 500;
	color: var(--k-cream);
}

.k-sunset__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: rgb(242 106 61 / 0.16);
	color: var(--k-amber);
}

.k-terrace {
	padding-bottom: clamp(72px, 8vw, 120px);
}

.k-quotes {
	position: relative;
	max-width: 1080px;
	margin: clamp(96px, 12vw, 180px) auto 0;
	text-align: center;
}

.k-quotes__mark {
	display: block;
	height: 0.5em;
	font-family: var(--k-font-display);
	font-size: clamp(7rem, 12vw, 11rem);
	line-height: 1;
	color: var(--k-sea);
	opacity: 0.6;
}

.k-quotes__stage {
	display: grid;
}

.k-quote {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 700ms var(--k-ease-out), transform 900ms var(--k-ease-out), visibility 0s linear 700ms;
}

.k-quote.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.k-quote__text p {
	font-family: var(--k-font-display);
	font-size: clamp(1.75rem, 3.4vw, 3.25rem);
	font-style: italic;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--k-cream);
	text-wrap: balance;
}

.k-quote__cite {
	margin-top: 28px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-sea);
}

.k-quotes__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
}

.k-quotes__nav {
	align-items: center;
}

.k-quotes__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-right: 6px;
	padding: 0;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	background: none;
	color: var(--k-sea);
	cursor: pointer;
}

.k-quotes__toggle[hidden] {
	display: none;
}

/* Two bars while playing; a triangle once paused. */
.k-quotes__pause {
	width: 8px;
	height: 10px;
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.k-quotes__toggle[aria-pressed="true"] .k-quotes__pause {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid currentColor;
	border-right: 0;
}

.k-quotes__dot {
	width: 56px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.k-quotes__bar {
	position: relative;
	display: block;
	height: 2px;
	overflow: hidden;
	border-radius: 1px;
	background: var(--k-line-2);
}

.k-quotes__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--k-sea);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.k-quotes__dot.is-done .k-quotes__bar::after {
	transform: scaleX(1);
}

/* The clock: a keyframe animation on the active bar; when it ends, v3.js
   brings up the next quote. Paused unless .is-running (on screen, not
   hovered or focused, not paused by the visitor). Without motion the bar is
   simply full and nothing rotates. */
.k-quotes__dot.is-active .k-quotes__bar::after {
	transform: scaleX(1);
}

.k-motion .k-quotes__dot.is-active .k-quotes__bar::after {
	transform: scaleX(0);
	animation: k-quote-clock 7500ms linear forwards;
	animation-play-state: paused;
}

.k-motion .k-quotes.is-running .k-quotes__dot.is-active .k-quotes__bar::after {
	animation-play-state: running;
}

@keyframes k-quote-clock {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@media (max-width: 960px) {
	.k-terrace__grid {
		grid-template-columns: 1fr;
	}

	.k-terrace__media {
		max-width: 440px;
	}
}

/* --- FAQ ------------------------------------------------------------------------ */

.k-faq {
	padding-top: clamp(72px, 8vw, 120px);
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.k-faq__aside {
	position: sticky;
	top: calc(var(--k-header-h) + 40px);
}

.k-faq__ask {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 28px;
	color: var(--k-cream-2);
}

@media (max-width: 900px) {
	.k-faq {
		grid-template-columns: 1fr;
	}

	.k-faq__aside {
		position: static;
	}
}

/* --- 20-menu.css ------------------------------------------------ */
/* ==========================================================================
   The menu — hero, the rail (search, filters, categories), sections, dishes.
   ========================================================================== */

.k-menu__hero {
	position: relative;
	padding: clamp(72px, 9vw, 128px) var(--k-gutter) clamp(48px, 5vw, 72px);
	overflow: hidden;
	isolation: isolate;
}

.k-menu__hero .kt-embers {
	z-index: -1;
	--kt-ember-rise: 380px;
	--kt-ember-mid: 190px;
}

.k-menu__hero-inner {
	max-width: var(--k-max);
	margin: 0 auto;
}

.k-menu__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xxl);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--k-cream);
}

.k-menu__intro {
	max-width: 38em;
	margin-top: clamp(20px, 2.4vw, 32px);
	font-size: var(--k-fs-lede);
	line-height: 1.55;
	color: var(--k-cream-2);
}

.k-menu__intro strong {
	font-weight: 500;
	color: var(--k-cream);
}

.k-menu__live {
	margin-top: 26px;
}

.k-status--menu {
	padding: 10px 16px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	background: var(--k-surface);
	white-space: normal;
}

/* --- Layout ------------------------------------------------------------------ */

.k-menu__layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	max-width: calc(var(--k-max) + 2 * var(--k-gutter));
	margin: 0 auto;
	padding: 0 var(--k-gutter) clamp(80px, 9vw, 140px);
}

.k-menu__rail {
	position: sticky;
	top: calc(var(--k-header-h) + 20px);
	align-self: start;
	display: grid;
	gap: 28px;
	max-height: calc(100vh - var(--k-header-h) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 2px 6px 24px 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--k-line-2) transparent;
}

/* --- Tools ------------------------------------------------------------------- */

.k-menu__tools {
	display: grid;
	gap: 14px;
}

.k-menu__search {
	position: relative;
	display: flex;
	align-items: center;
}

.k-menu__search > .k-icon {
	position: absolute;
	left: 16px;
	color: var(--k-cream-3);
	pointer-events: none;
}

.k-menu__input.k-menu__input {
	height: 52px;
	min-height: 52px;
	padding: 0 76px 0 46px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	background: var(--k-surface);
	font-size: 1rem;
}

.k-menu__input::-webkit-search-cancel-button,
.k-menu__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.k-menu__clear {
	position: absolute;
	right: 44px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--k-surface-3);
	color: var(--k-cream);
	cursor: pointer;
}

.k-menu__clear[hidden] {
	display: none;
}

.k-menu__kbd {
	position: absolute;
	right: 14px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--k-line-2);
	border-radius: 6px;
	font-family: var(--k-font-mono);
	font-size: 0.75rem;
	color: var(--k-cream-3);
	pointer-events: none;
}

.k-menu__clear:not([hidden]) ~ .k-menu__kbd {
	display: none;
}

.k-menu__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.k-menu__count {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

/* --- The heat dial -------------------------------------------------------------- */

.k-heat-dial {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.k-heat-dial__legend {
	margin-bottom: 10px;
	padding: 0;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-heat-dial__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.k-heat-dial__opt {
	position: relative;
	cursor: pointer;
}

/* The real radio sits over its face, invisible but hit-testable and focusable. */
.k-heat-dial__opt input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.k-heat-dial__face {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	font-size: var(--k-fs-xs);
	font-weight: 500;
	color: var(--k-cream-2);
	transition: border-color var(--k-d-2), background-color var(--k-d-2), color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
}

.k-heat-dial__opt:hover .k-heat-dial__face {
	border-color: var(--k-cream-2);
	color: var(--k-cream);
}

.k-heat-dial__opt:active .k-heat-dial__face {
	transform: scale(0.95);
}

.k-heat-dial__opt input:checked + .k-heat-dial__face {
	border-color: var(--k-gold);
	background: rgb(221 174 98 / 0.14);
	color: var(--k-gold-2);
}

.k-heat-dial__opt input:checked + .k-heat-dial__face[data-level="2"] {
	border-color: var(--k-ember);
	background: rgb(242 106 61 / 0.14);
	color: #ff9f7c;
}

.k-heat-dial__opt input:checked + .k-heat-dial__face[data-level="3"] {
	border-color: var(--k-chili);
	background: rgb(227 72 47 / 0.18);
	color: #ff8f7a;
}

.k-heat-dial__opt input:focus-visible + .k-heat-dial__face {
	outline: 2px solid var(--k-gold);
	outline-offset: 3px;
}

.k-heat-dial__pips {
	display: inline-flex;
	gap: 1px;
	color: var(--k-ember);
}

/* --- The heat light --------------------------------------------------------------- */

.k-menu__glow {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: 70vh;
	pointer-events: none;
}

.k-menu__glow i {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1100ms var(--k-ease-in-out);
}

.k-menu__glow i[data-g="all"] {
	background: radial-gradient(70% 60% at 30% 110%, rgb(221 174 98 / 0.1), transparent 70%);
}

.k-menu__glow i[data-g="0"] {
	background: radial-gradient(70% 60% at 30% 110%, rgb(156 194 122 / 0.12), transparent 70%);
}

.k-menu__glow i[data-g="1"] {
	background: radial-gradient(75% 65% at 30% 110%, rgb(240 166 74 / 0.18), transparent 70%);
}

.k-menu__glow i[data-g="2"] {
	background: radial-gradient(80% 70% at 30% 110%, rgb(242 106 61 / 0.24), transparent 70%);
}

.k-menu__glow i[data-g="3"] {
	background: radial-gradient(90% 80% at 30% 110%, rgb(227 72 47 / 0.34), transparent 72%);
}

.k-menu[data-heat="all"] .k-menu__glow i[data-g="all"],
.k-menu[data-heat="0"] .k-menu__glow i[data-g="0"],
.k-menu[data-heat="1"] .k-menu__glow i[data-g="1"],
.k-menu[data-heat="2"] .k-menu__glow i[data-g="2"],
.k-menu[data-heat="3"] .k-menu__glow i[data-g="3"] {
	opacity: 1;
}

/* --- The category rail -------------------------------------------------------- */

.k-cats {
	display: grid;
	gap: 2px;
	padding-top: 20px;
	border-top: 1px solid var(--k-line);
}

.k-cat {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px 8px 16px;
	border-radius: 10px;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
	transition: color var(--k-d-2), background-color var(--k-d-2), opacity var(--k-d-2);
}

.k-cat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 2px;
	border-radius: 1px;
	background: var(--k-gold);
	transform: scaleY(0);
	transition: transform var(--k-d-3) var(--k-ease-out);
}

.k-cat:hover {
	color: var(--k-cream);
	background: var(--k-surface);
}

.k-cat.is-active {
	color: var(--k-gold-2);
}

.k-cat.is-active::before {
	transform: scaleY(1);
}

.k-cat.is-empty {
	opacity: 0.35;
}

.k-cat__n {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	color: var(--k-cream-3);
}

.k-cat--all {
	justify-content: flex-start;
	gap: 8px;
	color: var(--k-cream);
}

/* --- Sections ------------------------------------------------------------------- */

.k-menu-sec {
	padding-top: 12px;
	scroll-margin-top: calc(var(--k-header-h) + 24px);
}

.k-menu-sec + .k-menu-sec {
	margin-top: clamp(56px, 6vw, 96px);
}

.k-menu-sec[hidden] {
	display: none;
}

.k-menu-sec__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 10px 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--k-line-2);
}

.k-menu-sec__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.015em;
}

.k-menu-sec__title a:hover {
	color: var(--k-gold-2);
}

.k-menu-sec__count {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-menu-sec__intro {
	grid-column: 1 / -1;
	max-width: 46em;
	font-size: var(--k-fs-small);
	line-height: 1.6;
	color: var(--k-cream-2);
}

/* --- Dishes --------------------------------------------------------------------- */

.k-dishes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	column-gap: clamp(28px, 3.5vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-dish {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	padding: 22px 0 24px;
	border-bottom: 1px solid var(--k-line);
}

.k-dish[hidden] {
	display: none;
}

.k-dish::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--k-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 700ms var(--k-ease-out);
}

.k-dish:hover::after,
.k-dish:focus-within::after {
	transform: scaleX(1);
}

.k-dish__name {
	font-family: var(--k-font-display);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.005em;
}

.k-dish__name a {
	color: var(--k-cream);
	transition: color var(--k-d-2);
}

.k-dish__name a:hover {
	color: var(--k-gold-2);
}

/* The whole row is the link's hit area; the add button sits above it. */
.k-dish__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.k-dish__desc {
	margin-top: 6px;
	font-size: var(--k-fs-small);
	line-height: 1.5;
	color: var(--k-cream-2);
}

.k-dish__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 12px;
}

.k-dish__heat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.k-dish__heat-label {
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-ember);
}

.k-dish__note {
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-dish__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	text-align: right;
}

.k-dish__price {
	padding-top: 6px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-small);
	white-space: nowrap;
	color: var(--k-gold);
}

.k-dish__price del {
	opacity: 0.5;
}

.k-dish__price ins {
	text-decoration: none;
}

.k-dish__act {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

.k-dish__qty {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	color: var(--k-herb);
}

.k-dish.is-ordered .k-add:not(:hover) {
	border-color: var(--k-herb);
	color: var(--k-herb);
}

.k-dish.is-off .k-dish__name a {
	color: var(--k-cream-3);
}

/* --- Empty states ------------------------------------------------------------- */

.k-menu__empty,
.k-menu__none {
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: clamp(56px, 8vw, 120px) 24px;
	border: 1px dashed var(--k-line-2);
	border-radius: var(--k-r-l);
	text-align: center;
}

.k-menu__empty[hidden] {
	display: none;
}

.k-menu__empty-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--k-line-2);
	border-radius: 50%;
	color: var(--k-gold);
}

.k-menu__empty-text {
	max-width: 30ch;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	line-height: 1.25;
	color: var(--k-cream);
}

/* --- The closing band -------------------------------------------------------------- */

.k-menu__band {
	padding: 0 var(--k-gutter) clamp(80px, 9vw, 140px);
}

.k-menu__band-inner {
	max-width: var(--k-max);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-xl);
	background:
		radial-gradient(90% 120% at 100% 0%, rgb(242 106 61 / 0.12), transparent 60%),
		var(--k-surface);
	text-align: center;
}

.k-menu__band .k-eyebrow {
	justify-content: center;
}

.k-menu__band-title {
	max-width: 16ch;
	margin: 0 auto;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	font-weight: 400;
	line-height: 1;
}

.k-menu__band-meta {
	margin: 18px 0 32px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

/* --- Responsive ----------------------------------------------------------------------

   Under 1000px the rail dissolves (display: contents) so its two halves can
   behave differently: the search and filters scroll away with the page, and
   the categories become a chip bar pinned under the header. The bar follows
   the header — when it hides on a downward scroll, the chips slide up into
   its place (.k-cats.is-shifted, set by v3.js on the bar itself — a class on
   <body> would restyle the whole document on every change of direction).
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.k-menu__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.k-menu__rail {
		display: contents;
	}

	.k-menu__tools {
		margin-bottom: 18px;
	}

	.k-cats {
		position: sticky;
		top: var(--k-header-h);
		z-index: 20;
		display: flex;
		gap: 6px;
		margin: 0 calc(var(--k-gutter) * -1) 12px;
		padding: 10px var(--k-gutter);
		border-top: 0;
		border-bottom: 1px solid var(--k-line);
		overflow-x: auto;
		scrollbar-width: none;
		/* Solid, not frosted: a sticky bar re-blurs whatever scrolls under it on
		   every frame, the most expensive thing a phone can be asked to draw. */
		background: rgb(11 9 7 / 0.96);
		transition: transform var(--k-d-4) var(--k-ease-out);
	}

	.k-cats::-webkit-scrollbar {
		display: none;
	}

	.k-cats.is-shifted {
		transform: translateY(calc(var(--k-header-h) * -1));
	}

	.k-cat {
		flex: none;
		align-items: center;
		padding: 8px 14px;
		border: 1px solid var(--k-line-2);
		border-radius: var(--k-r-pill);
		font-size: var(--k-fs-xs);
		white-space: nowrap;
	}

	.k-cat::before {
		display: none;
	}

	.k-cat.is-active {
		border-color: var(--k-gold);
		background: rgb(221 174 98 / 0.14);
	}

	.k-cat__n {
		display: none;
	}

	.k-menu-sec {
		scroll-margin-top: calc(var(--k-header-h) + 72px);
	}
}

@media (max-width: 560px) {
	.k-menu__hero {
		padding-top: 40px;
	}

	.k-menu-sec__head {
		grid-template-columns: 1fr;
	}

	.k-dish__name {
		font-size: 1.4375rem;
	}
}

/* --- 30-dish.css ------------------------------------------------ */
/* ==========================================================================
   Dish page.

   data-heat sets the room: --k-glow is the colour of the light behind the
   dish, --k-ember-o how bright the embers burn. Gold for a dish with no
   chilli, amber, then ember, then a real chilli red for Thai hot.
   ========================================================================== */

.k-dishpage {
	--k-glow: rgb(221 174 98 / 0.16);
	--k-ember-o: 0.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.k-dishpage[data-heat="1"] {
	--k-glow: rgb(240 166 74 / 0.2);
	--k-ember-o: 0.7;
}

.k-dishpage[data-heat="2"] {
	--k-glow: rgb(242 106 61 / 0.24);
	--k-ember-o: 0.85;
}

.k-dishpage[data-heat="3"] {
	--k-glow: rgb(227 72 47 / 0.32);
	--k-ember-o: 1;
}

.k-dishpage__atmos {
	position: absolute;
	left: 50%;
	top: -30vh;
	z-index: -2;
	width: min(1400px, 140vw);
	height: 110vh;
	transform: translateX(-50%);
	background: radial-gradient(ellipse 50% 45% at 30% 50%, var(--k-glow), transparent 70%);
	pointer-events: none;
}

.k-motion .k-dishpage__atmos {
	animation: k-breathe 9s var(--k-ease-in-out) infinite alternate;
}

@keyframes k-breathe {
	to {
		transform: translateX(-50%) scale(1.08);
		opacity: 0.8;
	}
}

.k-dishpage > .kt-embers {
	z-index: -1;
	height: 100vh;
	opacity: var(--k-ember-o);
	--kt-ember-rise: 90vh;
	--kt-ember-mid: 45vh;
}

/* The atmosphere already lights the room; the field's own floor glows would
   only be clipped by its box. */
.k-dishpage > .kt-embers::before,
.k-dishpage > .kt-embers::after {
	display: none;
}

.k-dishpage[data-heat="3"] > .kt-embers span {
	background: radial-gradient(circle, rgb(255 230 200 / 0.95) 0%, #ff6a3d 40%, transparent 70%);
	box-shadow: 0 0 12px 3px rgb(227 72 47 / 0.35);
}

.k-dishpage__inner {
	max-width: calc(var(--k-max) + 2 * var(--k-gutter));
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) var(--k-gutter) clamp(80px, 9vw, 140px);
}

/* --- Breadcrumb --------------------------------------------------------------- */

.k-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: clamp(36px, 5vw, 64px);
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-crumbs a {
	color: var(--k-cream-2);
	transition: color var(--k-d-2);
}

.k-crumbs a:hover {
	color: var(--k-gold-2);
}

.k-crumbs__sep {
	opacity: 0.5;
}

/* --- The two columns -------------------------------------------------------------- */

.k-dishpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

.k-dishpage__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.k-dishpage__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xxl);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--k-cream);
	overflow-wrap: anywhere;
}

.k-dishpage__sub {
	margin-top: clamp(14px, 2vw, 24px);
	font-family: var(--k-font-display);
	font-size: var(--k-fs-m);
	font-style: italic;
	line-height: 1.1;
	color: var(--k-gold);
}

.k-dishpage__lede {
	max-width: 34em;
	margin-top: 22px;
	font-size: var(--k-fs-lede);
	line-height: 1.6;
	color: var(--k-cream-2);
}

/* --- The heat meter: four stops, lit to the dish's level -------------------------- */

.k-heatmeter {
	display: grid;
	gap: 14px;
	max-width: 520px;
	margin-top: clamp(36px, 4vw, 52px);
}

.k-heatmeter__label {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-heatmeter__scale {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.k-heatmeter__step {
	display: grid;
	gap: 10px;
}

.k-heatmeter__tick {
	height: 6px;
	border-radius: 3px;
	background: rgb(243 234 219 / 0.1);
	transition: background-color var(--k-d-4) var(--k-ease-out);
}

.k-heatmeter__step:nth-child(1).is-lit .k-heatmeter__tick { background: var(--k-gold); }
.k-heatmeter__step:nth-child(2).is-lit .k-heatmeter__tick { background: var(--k-amber); }
.k-heatmeter__step:nth-child(3).is-lit .k-heatmeter__tick { background: var(--k-ember); }
.k-heatmeter__step:nth-child(4).is-lit .k-heatmeter__tick {
	background: var(--k-chili);
	box-shadow: 0 0 16px rgb(227 72 47 / 0.6);
}

.k-heatmeter__name {
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-heatmeter__step.is-here .k-heatmeter__name {
	color: var(--k-cream);
	font-weight: 500;
}

/* --- Facts -------------------------------------------------------------------------- */

.k-facts {
	display: grid;
	margin-top: clamp(36px, 4vw, 52px);
	border-top: 1px solid var(--k-line-2);
}

.k-facts__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--k-line);
}

.k-facts dt {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
	padding-top: 3px;
}

.k-facts dd {
	margin: 0;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-dishpage__story-text {
	display: flex;
	gap: 14px;
	max-width: 36em;
	margin-top: 36px;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	font-style: italic;
	line-height: 1.3;
	color: var(--k-cream-2);
}

.k-dishpage__story-text .k-icon {
	flex: none;
	margin-top: 6px;
	color: var(--k-ember);
}

.k-dishpage__content {
	margin-top: 36px;
}

/* --- The order card ----------------------------------------------------------------- */

.k-buy {
	position: sticky;
	top: calc(var(--k-header-h) + 24px);
}

.k-buy__card {
	padding: clamp(24px, 2.4vw, 34px);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-l);
	/* Solid: a sticky card over moving embers would re-blur every frame. */
	background: rgb(20 17 13 / 0.94);
	box-shadow: var(--k-shadow-lg);
}

.k-buy__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--k-line);
}

.k-buy__price .price {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: clamp(2.25rem, 3.4vw, 3rem);
	line-height: 1;
	color: var(--k-cream);
}

.k-buy__price .price del {
	font-size: 0.6em;
	opacity: 0.5;
}

.k-buy__price .price ins {
	text-decoration: none;
}

.k-buy__error {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid rgb(255 122 107 / 0.4);
	border-radius: var(--k-r-s);
	background: rgb(255 122 107 / 0.1);
	color: var(--k-danger);
	font-size: var(--k-fs-small);
}

.k-buy__live {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--k-line);
}

.k-status--buy {
	white-space: normal;
}

.k-buy__hooks:empty {
	display: none;
}

/* The 2.x add-to-cart form (woocommerce/single-product/add-to-cart/*.php). */
.k-buy .kt-product__form {
	display: grid;
	gap: 18px;
	margin: 0;
}

.k-buy .kt-product__reassure {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-2);
}

.k-buy .kt-product__reassure svg {
	width: 16px;
	height: 16px;
	color: var(--k-gold);
}

.k-buy .kt-product__buy {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}

.k-buy .kt-qty {
	display: inline-flex;
	align-items: center;
	height: 58px;
	padding: 4px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-pill);
}

.k-buy .kt-qty__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--k-cream);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--k-d-1), transform var(--k-d-3) var(--k-ease-spring);
}

.k-buy .kt-qty__btn:hover {
	background: var(--k-surface-3);
}

.k-buy .kt-qty__btn:active {
	transform: scale(0.88);
}

.k-buy .kt-qty .quantity {
	margin: 0;
}

.k-buy .kt-qty input.qty {
	width: 40px;
	min-height: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--k-font-mono);
	font-size: 1rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.k-buy .kt-qty input.qty::-webkit-outer-spin-button,
.k-buy .kt-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.k-buy .single_add_to_cart_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-family: var(--k-font-sans);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 14px 34px -14px var(--k-gold-glow);
	transition: background-color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring), box-shadow var(--k-d-3);
}

.k-buy .single_add_to_cart_button:hover {
	background: var(--k-gold-2);
	box-shadow: 0 18px 44px -14px rgb(221 174 98 / 0.55);
}

.k-buy .single_add_to_cart_button:active {
	transform: scale(0.97);
}

.k-buy .single_add_to_cart_button.loading {
	color: transparent;
	pointer-events: none;
}

.k-buy .single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--k-gold-ink);
	border-right-color: transparent;
	animation: k-spin 0.7s linear infinite;
}

.k-buy .single_add_to_cart_button.added {
	background: var(--k-herb);
	color: #10200a;
}

.k-buy .single_add_to_cart_button.disabled,
.k-buy .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Variations — radio chips. */
.k-buy .kt-variations {
	display: grid;
	gap: 16px;
}

.k-buy .kt-variation {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.k-buy .kt-variation__label {
	margin-bottom: 10px;
	padding: 0;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-buy .kt-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.k-buy .kt-opt {
	position: relative;
	cursor: pointer;
}

.k-buy .kt-opt__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.k-buy .kt-opt__face {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
	transition: border-color var(--k-d-2), background-color var(--k-d-2), color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
}

.k-buy .kt-opt:hover .kt-opt__face {
	border-color: var(--k-cream-2);
	color: var(--k-cream);
}

.k-buy .kt-opt__input:checked + .kt-opt__face {
	border-color: var(--k-gold);
	background: rgb(221 174 98 / 0.14);
	color: var(--k-gold-2);
}

.k-buy .kt-opt__input:focus-visible + .kt-opt__face {
	outline: 2px solid var(--k-gold);
	outline-offset: 3px;
}

.k-buy .kt-opt:active .kt-opt__face {
	transform: scale(0.96);
}

.k-buy .kt-opt__delta {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	color: var(--k-cream-3);
}

.k-buy .single_variation_wrap {
	display: grid;
	gap: 16px;
}

.k-buy .woocommerce-variation-price,
.k-buy .woocommerce-variation-description:empty,
.k-buy .woocommerce-variation-availability:empty {
	display: none;
}

.k-buy .woocommerce-variation-add-to-cart {
	display: grid;
	gap: 18px;
}

.k-buy .stock,
.k-buy .kt-product__oos {
	margin: 0;
	font-size: var(--k-fs-small);
	color: var(--k-amber);
}

.k-buy .reset_variations {
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

/* --- Goes well with -------------------------------------------------------------- */

.k-pair {
	margin-top: clamp(96px, 11vw, 168px);
}

.k-pair__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--k-line-2);
}

.k-pair__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	font-weight: 400;
	line-height: 1;
}

/* --- Reviews (WooCommerce's review template) -------------------------------------- */

.k-reviews {
	margin-top: clamp(80px, 9vw, 140px);
}

.k-reviews .k-pair__title {
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--k-line-2);
}

.k-reviews #reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.k-reviews .woocommerce-Reviews-title {
	display: none;
}

.k-reviews .woocommerce-noreviews {
	margin: 0;
	color: var(--k-cream-3);
}

.k-reviews .commentlist {
	display: grid;
	gap: 20px;
}

.k-reviews .comment_container {
	padding: 20px 22px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-r-m);
	background: var(--k-surface);
}

.k-reviews .comment_container img.avatar {
	display: none;
}

.k-reviews .meta {
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-reviews .woocommerce-review__author {
	color: var(--k-cream);
	font-weight: 500;
}

.k-reviews .description p {
	margin-top: 10px;
	color: var(--k-cream-2);
}

.k-reviews #review_form_wrapper {
	padding: clamp(22px, 2.4vw, 32px);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-l);
	background: var(--k-surface);
}

.k-reviews .comment-reply-title {
	display: block;
	margin-bottom: 8px;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	line-height: 1.2;
	color: var(--k-cream);
}

.k-reviews .comment-notes {
	margin: 0 0 18px;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-reviews #commentform {
	display: grid;
	gap: 16px;
}

.k-reviews #commentform > p {
	margin: 0;
}

.k-reviews #commentform label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-2);
}

.k-reviews .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-reviews .comment-form-cookies-consent label {
	margin: 0 !important;
}

.k-reviews .form-submit input[type="submit"] {
	height: 50px;
	padding: 0 26px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-pill);
	background: transparent;
	color: var(--k-cream);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--k-d-2), background-color var(--k-d-2);
}

.k-reviews .form-submit input[type="submit"]:hover {
	border-color: var(--k-cream);
	background: var(--k-surface-3);
}

/* Stars, drawn with a glyph now that WooCommerce's icon font is not loaded. */
.k-v3 .star-rating {
	position: relative;
	display: inline-block;
	width: 5.6em;
	height: 1.1em;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.1;
	letter-spacing: 0.12em;
}

.k-v3 .star-rating::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--k-line-3);
}

.k-v3 .star-rating span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.k-v3 .star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--k-gold);
}

.k-v3 p.stars {
	margin: 0;
}

.k-v3 p.stars span {
	display: inline-flex;
	gap: 2px;
}

.k-v3 p.stars a {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	overflow: hidden;
	font-size: 0;
	color: transparent;
}

.k-v3 p.stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	font-size: 26px;
	line-height: 30px;
	text-align: center;
	color: var(--k-line-3);
	transition: color var(--k-d-1);
}

.k-v3 p.stars:hover a::before,
.k-v3 p.stars.selected a::before {
	color: var(--k-gold);
}

.k-v3 p.stars:hover a:hover ~ a::before,
.k-v3 p.stars.selected a.active ~ a::before,
.k-v3 p.stars.selected:hover a:hover ~ a::before {
	color: var(--k-line-3);
}

.k-v3 p.stars.selected:hover a::before {
	color: var(--k-gold);
}

/* --- Previous / next ---------------------------------------------------------------- */

.k-dishnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: clamp(80px, 9vw, 140px);
	border-top: 1px solid var(--k-line-2);
}

.k-dishnav__link {
	display: grid;
	gap: 10px;
	padding: 28px 0;
}

.k-dishnav__link--next {
	text-align: right;
	justify-items: end;
}

.k-dishnav__dir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-dishnav__name {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-m);
	line-height: 1.05;
	color: var(--k-cream);
	transition: color var(--k-d-2), transform var(--k-d-4) var(--k-ease-out);
}

.k-dishnav__link--prev:hover .k-dishnav__name {
	color: var(--k-gold-2);
	transform: translateX(-8px);
}

.k-dishnav__link--next:hover .k-dishnav__name {
	color: var(--k-gold-2);
	transform: translateX(8px);
}

/* --- Responsive --------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.k-dishpage__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.k-buy {
		position: static;
		order: -1;
	}

	.k-dishpage__grid {
		display: flex;
		flex-direction: column;
	}

	.k-dishpage__story {
		display: contents;
	}

	/* Phone order: name, what it is, then the order card — before the details. */
	.k-dishpage__tags { order: 1; }
	.k-dishpage__title { order: 2; }
	.k-dishpage__sub { order: 3; }
	.k-dishpage__lede { order: 4; }
	.k-buy { order: 5; margin-top: 28px; }
	.k-heatmeter { order: 6; }
	.k-facts { order: 7; }
	.k-dishpage__story-text { order: 8; }
	.k-dishpage__content { order: 9; }

	.k-reviews #reviews {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.k-dishpage__title {
		font-size: clamp(3rem, 15vw, 4.5rem);
	}

	.k-facts__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.k-dishnav {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.k-dishnav__link--next {
		border-top: 1px solid var(--k-line);
	}
}

/* --- 40-book.css ------------------------------------------------ */
/* ==========================================================================
   Book a table — the tide page.
   ========================================================================== */

.k-book__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 820px);
	padding: calc(var(--k-header-h) + 48px) var(--k-gutter) clamp(120px, 14vw, 200px);
	overflow: hidden;
	isolation: isolate;
}

.k-book__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.k-book__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.k-book__veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(0deg, var(--k-tide) 0%, rgb(7 19 24 / 0.7) 38%, rgb(7 19 24 / 0.25) 70%, rgb(7 19 24 / 0.55) 100%),
		linear-gradient(90deg, rgb(7 19 24 / 0.75), transparent 70%);
}

/* The embers, turned to lantern light drifting up over the water. */
.k-book__hero .kt-embers {
	z-index: -1;
}

.k-book__hero .kt-embers span {
	background: radial-gradient(circle, rgb(240 250 255 / 0.95) 0%, var(--k-sea) 40%, transparent 70%);
	box-shadow: 0 0 12px 3px rgb(140 197 210 / 0.25);
}

.k-book__hero .kt-embers::before {
	background: radial-gradient(ellipse at 35% 85%, rgb(242 106 61 / 0.14), transparent 64%);
}

.k-book__hero .kt-embers::after {
	background: radial-gradient(ellipse at 60% 90%, rgb(140 197 210 / 0.1), transparent 60%);
}

.k-book__hero-inner {
	width: 100%;
	max-width: var(--k-max);
	margin: 0 auto;
}

.k-book__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xxl);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--k-cream);
}

.k-book__sunset {
	margin: clamp(24px, 3vw, 36px) 0 22px;
	width: fit-content;
	max-width: 100%;
	background: rgb(7 19 24 / 0.7);
}

.k-book__lede {
	max-width: 34em;
}

/* --- The grid under the hero -------------------------------------------------- */

.k-book__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: calc(var(--k-max) + 2 * var(--k-gutter));
	margin: clamp(-96px, -8vw, -56px) auto 0;
	padding: 0 var(--k-gutter) clamp(80px, 9vw, 140px);
}

.k-book__panel {
	padding: clamp(24px, 3.2vw, 48px);
	border: 1px solid rgb(140 197 210 / 0.2);
	border-radius: var(--k-r-xl);
	background: rgb(10 26 32 / 0.96);
	box-shadow: var(--k-shadow-lg);
}

.k-book__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.k-book__panel-title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	font-weight: 400;
	line-height: 1;
}

.k-status--book {
	padding: 8px 14px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	white-space: normal;
}

.k-book__fine {
	display: flex;
	gap: 10px;
	margin-top: 22px;
	font-size: var(--k-fs-xs);
	line-height: 1.55;
	color: var(--k-cream-3);
}

.k-book__fine .k-icon {
	flex: none;
	margin-top: 1px;
	color: var(--k-sea);
}

/* --- The plugin's form (Restaurant Manager), in v3's clothes --------------------
   The plugin's own sheet is not loaded on v3 pages (kty_v3_enqueue); these
   rules are its whole look here. Two columns where two fields pair naturally
   (date + time, email + phone). */

.k-book .kty-reservation-form-wrapper {
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--k-font-sans);
	color: var(--k-cream);
}

.k-book .kty-reservation-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.k-book .kty-form-row {
	grid-column: 1 / -1;
	margin: 0;
}

.k-book .kty-form-row:has(#kty-res-date),
.k-book .kty-form-row:has(#kty-res-time),
.k-book .kty-form-row:has(#kty-res-email),
.k-book .kty-form-row:has(#kty-res-phone) {
	grid-column: span 1;
}

.k-book .kty-reservation-form label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-2);
}

.k-book .kty-reservation-form label .required {
	margin-left: 2px;
	color: var(--k-sea);
}

.k-book .kty-reservation-form input[type="date"],
.k-book .kty-reservation-form input[type="email"],
.k-book .kty-reservation-form input[type="tel"],
.k-book .kty-reservation-form input[type="text"],
.k-book .kty-reservation-form select,
.k-book .kty-reservation-form textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-s);
	background-color: rgb(243 234 219 / 0.04);
	color: var(--k-cream);
	font-family: var(--k-font-sans);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--k-d-2), box-shadow var(--k-d-2), background-color var(--k-d-2);
}

.k-book .kty-reservation-form select {
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b5dde6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

.k-book .kty-reservation-form select option {
	background: var(--k-tide-2);
	color: var(--k-cream);
}

.k-book .kty-reservation-form input[type="date"] {
	color-scheme: dark;
}

.k-book .kty-reservation-form input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.8) sepia(0.3) hue-rotate(150deg);
	cursor: pointer;
}

.k-book .kty-reservation-form textarea {
	min-height: 110px;
	resize: vertical;
	line-height: 1.5;
}

.k-book .kty-reservation-form input:hover,
.k-book .kty-reservation-form select:hover:not(:disabled),
.k-book .kty-reservation-form textarea:hover {
	border-color: var(--k-cream-2);
}

.k-book .kty-reservation-form input:focus,
.k-book .kty-reservation-form select:focus,
.k-book .kty-reservation-form textarea:focus {
	outline: none;
	border-color: var(--k-sea);
	background-color: rgb(140 197 210 / 0.06);
	box-shadow: 0 0 0 4px rgb(140 197 210 / 0.16);
}

.k-book .kty-reservation-form select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.k-book .kty-submit-row {
	margin-top: 10px;
}

.k-book .kty-submit-btn {
	position: relative;
	width: 100%;
	min-height: 62px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--k-r-pill);
	background: var(--k-sea);
	color: var(--k-sea-ink);
	font-family: var(--k-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 16px 40px -16px rgb(140 197 210 / 0.45);
	transition: background-color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring), box-shadow var(--k-d-3);
}

.k-book .kty-submit-btn:hover {
	background: var(--k-sea-2);
	box-shadow: 0 20px 48px -16px rgb(140 197 210 / 0.6);
}

.k-book .kty-submit-btn:active {
	transform: scale(0.98);
}

.k-book .kty-submit-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.k-book .kty-form-message {
	grid-column: 1 / -1;
	margin: 0;
	padding: 16px 20px;
	border-radius: var(--k-r-s);
	font-size: var(--k-fs-small);
	font-weight: 500;
	text-align: left;
}

.k-book .kty-form-message.success {
	border: 1px solid rgb(156 194 122 / 0.4);
	background: rgb(156 194 122 / 0.12);
	color: var(--k-herb);
}

.k-book .kty-form-message.error {
	border: 1px solid rgb(255 122 107 / 0.4);
	background: rgb(255 122 107 / 0.1);
	color: var(--k-danger);
}

/* --- Quick picks (v3.js initBooking) ---------------------------------------------- */

.k-quick {
	grid-column: 1 / -1;
	display: grid;
	gap: 10px;
}

.k-quick__label {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-cream-2);
}

.k-quick__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	margin: -2px -2px 0;
	scrollbar-width: none;
}

.k-quick__row::-webkit-scrollbar {
	display: none;
}

.k-quick__chip {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 2px;
	flex: none;
	min-width: 76px;
	min-height: 78px;
	padding: 10px 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-m);
	background: rgb(243 234 219 / 0.02);
	color: var(--k-cream-2);
	font-family: var(--k-font-sans);
	cursor: pointer;
	transition: border-color var(--k-d-2), background-color var(--k-d-2), color var(--k-d-2), transform var(--k-d-3) var(--k-ease-spring);
}

.k-quick__chip:hover {
	border-color: var(--k-cream-2);
	color: var(--k-cream);
}

.k-quick__chip:active {
	transform: scale(0.95);
}

.k-quick__chip[aria-pressed="true"] {
	border-color: var(--k-sea);
	background: rgb(140 197 210 / 0.14);
	color: var(--k-cream);
}

.k-quick__top {
	font-family: var(--k-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-quick__chip[aria-pressed="true"] .k-quick__top {
	color: var(--k-sea-2);
}

.k-quick__big {
	font-family: var(--k-font-display);
	font-size: 1.75rem;
	line-height: 1;
}

.k-quick__sun {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--k-font-mono);
	font-size: 0.625rem;
	color: var(--k-amber);
	opacity: 0.85;
}

.k-quick--guests .k-quick__chip {
	min-width: 54px;
	min-height: 54px;
	border-radius: 50%;
	padding: 0;
}

.k-quick--guests .k-quick__big {
	font-size: 1.5rem;
}

/* The native field stays — for any date beyond the week, any party of nine. */
.k-quick + .kty-form-row label,
.k-book .kty-form-row.has-quick label {
	color: var(--k-cream-3);
}

/* --- The aside ------------------------------------------------------------------------ */

.k-book__aside {
	display: grid;
	gap: 20px;
}

.k-book__terrace {
	aspect-ratio: 5 / 4;
	border-radius: var(--k-r-xl);
}

.k-book__terrace::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(7 19 24 / 0.92) 0%, rgb(7 19 24 / 0.3) 45%, transparent 70%);
	pointer-events: none;
}

.k-book__terrace-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: grid;
	gap: 6px;
	padding: 24px 28px;
}

.k-book__terrace-title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-m);
	line-height: 1;
	color: var(--k-cream);
}

.k-book__terrace-text {
	max-width: 34ch;
	font-size: var(--k-fs-small);
	line-height: 1.5;
	color: var(--k-cream-2);
}

.k-book__info,
.k-book__cross {
	padding: clamp(22px, 2.4vw, 32px);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-l);
	background: rgb(243 234 219 / 0.025);
}

.k-book__info-title,
.k-book__cross-title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-s);
	font-weight: 400;
	line-height: 1.1;
}

.k-book__facts {
	margin-top: 16px;
	border-top: 0;
}

.k-book__facts .k-facts__row {
	grid-template-columns: 110px 1fr;
}

.k-book__facts .k-facts__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.k-book__cross {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	background:
		radial-gradient(100% 140% at 100% 0%, rgb(242 106 61 / 0.14), transparent 60%),
		rgb(243 234 219 / 0.025);
}

.k-book__cross-text {
	margin-top: 6px;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-book__offline {
	display: grid;
	gap: 22px;
}

.k-book__offline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 1100px) {
	.k-book__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.k-book .kty-form-row:has(#kty-res-date),
	.k-book .kty-form-row:has(#kty-res-time),
	.k-book .kty-form-row:has(#kty-res-email),
	.k-book .kty-form-row:has(#kty-res-phone) {
		grid-column: 1 / -1;
	}

	.k-book__panel {
		border-radius: var(--k-r-l);
	}

	.k-book__facts .k-facts__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* --- 50-pages.css ------------------------------------------------ */
/* ==========================================================================
   Content pages, prose, search, archives, 404.
   ========================================================================== */

/* --- The page head ------------------------------------------------------------ */

.k-pagehead {
	position: relative;
	padding: clamp(72px, 10vw, 150px) var(--k-gutter) clamp(48px, 6vw, 88px);
	overflow: hidden;
	isolation: isolate;
}

.k-pagehead .kt-embers {
	z-index: -1;
	--kt-ember-rise: 360px;
	--kt-ember-mid: 180px;
}

.k-pagehead__inner {
	max-width: var(--k-max);
	margin: 0 auto;
}

.k-pagehead__title {
	max-width: 14ch;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xxl);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--k-cream);
}

.k-pagehead--search .k-pagehead__title {
	max-width: 18ch;
	font-size: var(--k-fs-xl);
}

.k-pagehead__lede {
	max-width: 36em;
	margin-top: 26px;
	font-size: var(--k-fs-lede);
	line-height: 1.55;
	color: var(--k-cream-2);
}

/* --- Page body ----------------------------------------------------------------- */

.k-page__media {
	max-width: var(--k-max);
	aspect-ratio: 16 / 7;
	margin: 0 var(--k-gutter) clamp(48px, 6vw, 88px);
	border-radius: var(--k-r-xl);
}

@media (min-width: 1560px) {
	.k-page__media {
		margin-inline: auto;
	}
}

.k-page__body {
	padding: 0 var(--k-gutter) clamp(96px, 10vw, 160px);
}

.k-page__edit {
	max-width: var(--k-narrow);
	margin: 48px auto 0;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
}

.k-page__comments {
	padding: 0 var(--k-gutter) 96px;
}

/* --- Prose — editor content ------------------------------------------------------ */

.k-prose {
	max-width: var(--k-narrow);
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--k-cream-2);
}

.k-prose > * + * {
	margin-top: 1.25em;
}

.k-prose h2,
.k-prose h3,
.k-prose h4 {
	font-family: var(--k-font-display);
	font-weight: 400;
	color: var(--k-cream);
	text-wrap: balance;
}

.k-prose h2 {
	margin-top: 2.2em;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.k-prose h3 {
	margin-top: 1.9em;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.15;
}

.k-prose h4 {
	margin-top: 1.6em;
	font-size: 1.375rem;
	line-height: 1.2;
}

.k-prose h2 + *,
.k-prose h3 + *,
.k-prose h4 + * {
	margin-top: 0.6em;
}

.k-prose > :first-child {
	margin-top: 0;
}

.k-prose strong {
	color: var(--k-cream);
	font-weight: 600;
}

.k-prose a {
	color: var(--k-gold-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgb(221 174 98 / 0.5);
	transition: text-decoration-color var(--k-d-2), color var(--k-d-2);
}

.k-prose a:hover {
	color: var(--k-cream);
	text-decoration-color: currentColor;
}

.k-prose ul,
.k-prose ol {
	padding-left: 1.4em;
}

.k-prose ul {
	list-style: none;
	padding-left: 0;
}

.k-prose ul > li {
	position: relative;
	padding-left: 1.4em;
}

.k-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--k-ember);
}

.k-prose ol {
	list-style: decimal;
}

.k-prose ol > li::marker {
	font-family: var(--k-font-mono);
	font-size: 0.85em;
	color: var(--k-gold);
}

.k-prose li + li {
	margin-top: 0.5em;
}

.k-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 2px solid var(--k-gold);
	font-family: var(--k-font-display);
	font-size: 1.625rem;
	font-style: italic;
	line-height: 1.35;
	color: var(--k-cream);
}

.k-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-prose hr {
	width: 48px;
	height: 1px;
	margin: 3em auto;
	border: 0;
	background: var(--k-gold);
}

.k-prose img {
	border-radius: var(--k-r-m);
}

.k-prose figure {
	margin-left: 0;
	margin-right: 0;
}

.k-prose figcaption {
	margin-top: 10px;
	font-size: var(--k-fs-xs);
	color: var(--k-cream-3);
	text-align: center;
}

.k-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--k-fs-small);
}

.k-prose th,
.k-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--k-line);
	text-align: left;
}

.k-prose th {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-prose .wp-block-button__link,
.k-prose .wp-element-button {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 0 26px;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-weight: 500;
	text-decoration: none;
}

.k-prose .alignwide {
	max-width: min(1100px, 100vw - 2 * var(--k-gutter));
	margin-left: 50%;
	transform: translateX(-50%);
}

.k-prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.k-prose code {
	padding: 0.1em 0.4em;
	border-radius: 6px;
	background: var(--k-surface-3);
	font-family: var(--k-font-mono);
	font-size: 0.875em;
}

.k-pages {
	display: flex;
	gap: 8px;
	margin-top: 40px;
}

/* --- 404 ---------------------------------------------------------------------------- */

.k-404 {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--k-header-h) + 48px) var(--k-gutter) 80px;
	overflow: hidden;
	isolation: isolate;
}

.k-404 .kt-embers {
	z-index: -1;
}

.k-404__inner {
	position: relative;
	width: 100%;
	max-width: var(--k-max);
	margin: 0 auto;
}

.k-404__code {
	position: absolute;
	right: -2%;
	top: 50%;
	z-index: -1;
	margin: 0;
	transform: translateY(-50%);
	font-family: var(--k-font-display);
	font-size: clamp(12rem, 34vw, 32rem);
	font-style: italic;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgb(221 174 98 / 0.35);
	user-select: none;
}

.k-404__title {
	max-width: 12ch;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-xl);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.k-404__lede {
	margin-top: 24px;
}

.k-404__search {
	max-width: 560px;
	margin-top: 36px;
}

.k-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* A plain search form (404, the search page). */
.k-404 .kt-searchform,
.k-search__form .kt-searchform {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 22px;
	border: 1px solid var(--k-line-3);
	border-radius: var(--k-r-pill);
	background: var(--k-surface);
	transition: border-color var(--k-d-2), box-shadow var(--k-d-2);
}

.k-404 .kt-searchform:focus-within,
.k-search__form .kt-searchform:focus-within {
	border-color: var(--k-gold);
	box-shadow: 0 0 0 4px rgb(221 174 98 / 0.14);
}

.k-404 .kt-searchform__input,
.k-search__form .kt-searchform__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--k-cream);
	font-family: var(--k-font-sans);
	font-size: 1.125rem;
	outline: none;
	box-shadow: none;
}

.k-404 .kt-searchform__input:focus,
.k-search__form .kt-searchform__input:focus {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.k-404 .kt-searchform button[type="submit"],
.k-search__form .kt-searchform button[type="submit"] {
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-gold-ink);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-small);
	font-weight: 500;
	cursor: pointer;
}

/* --- Search results ---------------------------------------------------------------- */

.k-search__body,
.k-archive__body {
	max-width: calc(var(--k-max) + 2 * var(--k-gutter));
	margin: 0 auto;
	padding: 0 var(--k-gutter) clamp(96px, 10vw, 160px);
}

.k-search__form {
	max-width: 680px;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.k-search__group + .k-search__group {
	margin-top: clamp(56px, 6vw, 96px);
}

.k-results {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-result {
	border-bottom: 1px solid var(--k-line);
}

.k-result__link {
	display: grid;
	gap: 8px;
	padding: 24px 0;
	transition: padding var(--k-d-3) var(--k-ease-out);
}

.k-result__link:hover {
	padding-left: 12px;
}

.k-result__meta {
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-cream-3);
}

.k-result__title {
	font-family: var(--k-font-display);
	font-size: var(--k-fs-m);
	line-height: 1.1;
	color: var(--k-cream);
	transition: color var(--k-d-2);
}

.k-result__link:hover .k-result__title {
	color: var(--k-gold-2);
}

.k-result__text {
	max-width: 60em;
	font-size: var(--k-fs-small);
	color: var(--k-cream-2);
}

.k-v3 mark {
	padding: 0 0.1em;
	border-radius: 3px;
	background: rgb(221 174 98 / 0.22);
	color: var(--k-cream);
}

.k-search__none {
	display: grid;
	justify-items: start;
	gap: 16px;
	padding: clamp(40px, 5vw, 72px) 0;
}

.k-search__none-title {
	max-width: 24ch;
	font-family: var(--k-font-display);
	font-size: var(--k-fs-l);
	line-height: 1.05;
	color: var(--k-cream);
}

.k-search__none-text {
	color: var(--k-cream-2);
}

.k-search__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

/* --- Pagination --------------------------------------------------------------------- */

.k-v3 .pagination .nav-links,
.k-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 40px;
}

.k-v3 .pagination .page-numbers,
.k-pages .post-page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-pill);
	font-family: var(--k-font-mono);
	font-size: var(--k-fs-xs);
	color: var(--k-cream-2);
}

.k-v3 .pagination .page-numbers.current,
.k-pages .post-page-numbers.current {
	border-color: var(--k-gold);
	color: var(--k-gold-2);
}

@media (max-width: 720px) {
	.k-404__code {
		top: 22%;
		right: -6%;
		font-size: 12rem;
	}
}

/* --- 90-motion.css ------------------------------------------------ */
/* ==========================================================================
   Motion — compositor-first (3.1).

   Three kinds of movement, and every one runs off the main thread:

   1. ARRIVALS. An element gets .is-in from one IntersectionObserver callback
      (v3.js) and a CSS transition or keyframe does the rest: transform and
      opacity only.
   2. SCROLL-LINKED. Parallax, the hero leaving, the statement lighting word by
      word, the ring turning, the footer's name rising: CSS scroll-driven
      animations (animation-timeline), which the browser runs on the same
      thread that scrolls the page — they cannot lag it or stutter against it.
      Browsers without them get the arrivals only; nothing is ever missing, it
      just holds still.
   3. AMBIENT. Embers, the status ping, the marquee: infinite keyframes and
      Web Animations on transform and opacity.

   THE CONTRACT WITH v3.js

   The <head> script puts .k-motion on <html> before first paint — only with
   JavaScript, and never for a visitor who asked for reduced motion. Under it,
   anything about to arrive starts hidden. v3.js adds .k-anim once it has
   taken charge; if it never does (a script blocked), the failsafe shows
   everything after 2.5s on its own. Nothing can stay invisible.
   ========================================================================== */

/* --- Arrivals ------------------------------------------------------------------- */

.k-motion [data-k-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}

.k-anim [data-k-reveal] {
	transition:
		opacity 900ms var(--k-ease-out),
		transform 1100ms var(--k-ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.k-anim [data-k-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Split headings: hidden until v3.js has wrapped their words, then each word
   rises inside its own mask, one line after another (--l). */
.k-motion [data-k-split]:not(.is-split) {
	opacity: 0;
}

.k-w {
	display: inline-block;
	overflow: clip;
	/* Room for descenders and italic overhang inside the mask. */
	padding: 0.06em 0.08em 0.14em 0.02em;
	margin: -0.06em -0.08em -0.14em -0.02em;
	vertical-align: top;
}

.k-w__i {
	display: inline-block;
}

.k-motion [data-k-split] .k-w__i {
	transform: translate3d(0, 112%, 0) rotate(2deg);
}

.k-motion [data-k-split].is-in .k-w__i {
	animation: k-rise 1150ms var(--k-ease-out) both;
	animation-delay: calc(var(--l, 0) * 110ms);
}

@keyframes k-rise {
	from {
		transform: translate3d(0, 112%, 0) rotate(2deg);
	}
	to {
		transform: none;
	}
}

/* Image frames: a curtain in the ground colour lifts off the photograph —
   a transform, where 3.0 animated clip-path (a repaint every frame in Safari).
   The photograph settles from a slight zoom underneath. */
.k-motion [data-k-media]::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	background: var(--k-ink);
	transform-origin: 50% 0%;
	pointer-events: none;
}

.k-motion .k-terrace [data-k-media]::after,
.k-motion .k-book [data-k-media]::after {
	background: var(--k-tide);
}

.k-anim [data-k-media]::after {
	transition: transform 1300ms var(--k-ease-in-out);
}

.k-anim [data-k-media].is-in::after {
	transform: scaleY(0);
}

.k-motion [data-k-media] img {
	scale: 1.18;
}

.k-anim [data-k-media] img {
	transition: scale 1800ms var(--k-ease-out);
}

.k-anim [data-k-media].is-in img {
	scale: 1;
}

/* --- The hero's entrance (started by v3.js once the display face is in) ------------- */

.k-motion .k-hero__img {
	opacity: 0;
}

.k-motion [data-k-hero-line] > span {
	transform: translate3d(0, 105%, 0) rotate(2.5deg);
}

.k-motion [data-k-hero-item],
.k-motion [data-k-hero-strip] {
	opacity: 0;
}

.k-motion .k-hero.is-ready .k-hero__img {
	animation: k-hero-photo 2800ms var(--k-ease-out) both;
}

.k-motion .k-hero.is-ready [data-k-hero-line] > span {
	animation: k-rise-line 1500ms var(--k-ease-out) both;
	animation-delay: calc(250ms + var(--i, 0) * 120ms);
}

.k-motion .k-hero.is-ready [data-k-hero-item] {
	animation: k-fade-lift 1300ms var(--k-ease-out) both;
	animation-delay: calc(550ms + var(--i, 0) * 100ms);
}

.k-motion .k-hero.is-ready [data-k-hero-strip] {
	animation: k-fade 1200ms var(--k-ease-out) 1000ms both;
}

/* Arriving mid-page: everything simply there. */
.k-motion .k-hero.is-instant .k-hero__img,
.k-motion .k-hero.is-instant [data-k-hero-line] > span,
.k-motion .k-hero.is-instant [data-k-hero-item],
.k-motion .k-hero.is-instant [data-k-hero-strip] {
	animation: none;
	opacity: 1;
	transform: none;
}

@keyframes k-hero-photo {
	from {
		opacity: 0;
		transform: scale(1.16);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes k-rise-line {
	from {
		transform: translate3d(0, 105%, 0) rotate(2.5deg);
	}
	to {
		transform: none;
	}
}

@keyframes k-fade-lift {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes k-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* The pointer lean (v3.js sets `translate`; this eases it). */
[data-k-hero-lean] {
	transition: translate 1400ms var(--k-ease-out);
}

/* --- The statement without scroll-driven animations: one timed sweep ---------- */

.k-motion:not(.k-sda) [data-k-words] .k-word {
	opacity: 0.16;
	transition: opacity 500ms linear;
	transition-delay: calc(var(--i, 0) * 55ms);
}

.k-motion:not(.k-sda) [data-k-words].is-lit .k-word {
	opacity: 1;
}

/* --- Failsafe: if v3.js never takes charge, show everything ---------------------- */

.k-motion:not(.k-anim) [data-k-reveal],
.k-motion:not(.k-anim) [data-k-split],
.k-motion:not(.k-anim) [data-k-hero-item],
.k-motion:not(.k-anim) [data-k-hero-strip],
.k-motion:not(.k-anim) .k-hero__img {
	animation: k-failsafe 0.6s ease 2.5s forwards;
}

.k-motion:not(.k-anim) [data-k-hero-line] > span {
	animation: k-failsafe-move 0.8s var(--k-ease-out) 2.5s forwards;
}

.k-motion:not(.k-anim) [data-k-media]::after {
	animation: k-failsafe-curtain 0.8s ease 2.5s forwards;
}

.k-motion:not(.k-anim) [data-k-media] img {
	scale: 1;
}

@keyframes k-failsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes k-failsafe-move {
	to {
		transform: none;
	}
}

@keyframes k-failsafe-curtain {
	to {
		transform: scaleY(0);
	}
}

/* ==========================================================================
   Scroll-driven — only where the browser runs them. Every keyframe here is
   transform or opacity.
   ========================================================================== */

@supports (animation-timeline: view()) {
	/* The hero leaves: the photograph drifts and deepens, the words lift away.
	   All three run on the hero's own timeline (--k-hero, 10-front.css), so
	   the words start to lift the moment the page moves, not when their own
	   box reaches the top. */
	.k-motion .k-hero__media {
		animation: k-hero-drift linear both;
		animation-timeline: --k-hero;
		animation-range: exit 0% exit 100%;
	}

	.k-motion .k-hero__inner {
		animation: k-hero-lift linear both;
		animation-timeline: --k-hero;
		animation-range: exit 0% exit 75%;
	}

	.k-motion .k-hero__shade {
		animation: k-shade linear both;
		animation-timeline: --k-hero;
		animation-range: exit 0% exit 90%;
	}

	/* Parallax photographs: they move a little slower than the page. */
	.k-motion [data-k-parallax] {
		animation: k-parallax linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* The takeaway ring turns as it passes. */
	.k-motion .k-takeaway__media .k-ring {
		animation: k-ring-turn linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* The name rises out of the footer as the page ends. */
	.k-motion .k-footer__word {
		animation: k-word-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 100%;
	}

	/* The statement: pinned, and lit word by word along the pin. Each word's
	   light is its own slice of the section's scroll (--i of --n). */
	.k-motion .k-statement {
		view-timeline: --k-statement block;
	}

	.k-motion .k-statement [data-k-words] .k-word {
		opacity: 0.16;
		animation: k-light linear both;
		animation-timeline: --k-statement;
		animation-range:
			contain calc(4% + var(--i) / var(--n) * 72%)
			contain calc(10% + var(--i) / var(--n) * 72%);
	}
}

@keyframes k-hero-drift {
	to {
		transform: translate3d(0, 18%, 0) scale(1.08);
	}
}

@keyframes k-shade {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.55;
	}
}

@keyframes k-hero-lift {
	to {
		transform: translate3d(0, -14vh, 0);
		opacity: 0;
	}
}

@keyframes k-parallax {
	from {
		transform: translate3d(0, -7%, 0) scale(1.16);
	}
	to {
		transform: translate3d(0, 7%, 0) scale(1.16);
	}
}

@keyframes k-ring-turn {
	from {
		transform: rotate(-60deg);
	}
	to {
		transform: rotate(200deg);
	}
}

@keyframes k-word-rise {
	from {
		transform: translate3d(0, 46%, 0);
		opacity: 0.1;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes k-light {
	from {
		opacity: 0.16;
	}
	to {
		opacity: 1;
	}
}

/* --- Page to page -------------------------------------------------------------

   A cross-document view transition: the old page fades, the new one rises
   into place, and the header — named, so it is matched across the two
   documents — stays put. Browsers without support keep an ordinary
   navigation. Short on purpose: it is a handover, not a show.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.k-header {
		view-transition-name: k-header;
	}

	::view-transition-old(root) {
		animation: k-vt-out 200ms var(--k-ease-in-out) both;
	}

	::view-transition-new(root) {
		animation: k-vt-in 420ms var(--k-ease-out) both;
	}

	::view-transition-group(k-header) {
		animation-duration: 0s;
	}
}

@keyframes k-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes k-vt-in {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}
}

/* --- Reduced motion: everything still, everything visible -------------------------- */

@media (prefers-reduced-motion: reduce) {
	.k-v3 *,
	.k-v3 *::before,
	.k-v3 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- No focus-zoom on touch devices ------------------------------------------------

   The 2.49.4 rule, carried into v3 (theme.css no longer loads on v3 pages).
   iOS Safari zooms the page when a field under 16px takes focus; the trigger
   is the device, not the width, so the rule is keyed to a coarse pointer.
   The one !important on the site, and earned: a device invariant that must
   beat every component rule. The viewport meta is deliberately untouched —
   maximum-scale would stop the zoom by taking pinch-zoom from everyone.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="color"]):not([type="image"]):not([class*="wc-block"]):not(.k-input-xl),
	select:not([class*="wc-block"]),
	textarea:not([class*="wc-block"]) {
		font-size: 16px !important;
	}
}

/* Fields set deliberately LARGER than 16px (the search palette's serif input)
   are excluded above so the rule cannot shrink them; they never need it. */

/* --- Print ----------------------------------------------------------------------

   Nothing waiting to be revealed by a scroll may print blank, and a dark
   design printed without backgrounds (the browser default) would be cream
   text on white paper. So: everything shown, ink on paper, chrome dropped. */

@media print {
	.k-v3 *,
	.k-v3 *::before,
	.k-v3 *::after {
		color: #000 !important;
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		-webkit-text-stroke: 0 !important;
	}

	.k-header,
	.k-orderbar,
	.k-drawer,
	.k-navsheet,
	.k-palette,
	.kt-embers,
	.k-marquee,
	.k-hero__media,
	.k-hero__strip,
	.k-footer__word,
	.k-footer__cta,
	.k-tide-veil,
	.kt-langbar {
		display: none !important;
	}

	.k-main {
		padding-top: 0 !important;
	}
}