/* Scaled desktop canvas (html.pk-scaled, 1025–1919px): the page lays out at canvas width,
   so fluid sizes resolve against canvas units and keep their 1920px design values. */
html.pk-scaled {
	--pk-gutter: 160px;
	--pk-section-space: clamp(56px, calc(5 * var(--pk-vw)), 96px);
	--pk-content-gap: clamp(28px, calc(3.4 * var(--pk-vw)), 64px);
}

html.pk-scaled .pkh-about__lead { font-size: 22px; line-height: 1.6; }
html.pk-scaled .pkh-awards .pkh-cert,
html.pk-scaled .pkh-awards .pkh-cert img { width: clamp(48px, calc(8 * var(--pk-vw)), 156px); }
html.pk-scaled .pk-footer__brand { font-size: clamp(26px, calc(2.1 * var(--pk-vw)), 40px); }
html.pk-scaled .pk-footer__social-row { margin-top: clamp(96px, calc(8 * var(--pk-vw)), 160px); }

/* The canvas is never narrower than ~1420px, so the 1025–1400px branch layout does not apply. */
html.pk-scaled .pkh-branches { grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: 32px; min-height: 0; }
html.pk-scaled .pkh-branch { height: 72px; font-size: 26px; padding: 10px 56px; }
html.pk-scaled .pkh-branch__badge { width: 60px; height: 60px; left: 12px; }

/* The pinned history stage fills the visible screen, measured in canvas pixels. */
html.pk-scaled .pkh-history.has-scroll-effect .pkh-history__stage { height: calc(100 * var(--pk-vh)); }
@media (max-height: 800px) {
	html.pk-scaled .pkh-history.has-scroll-effect .pkh-history__stage { padding-block: 48px 24px; }
	html.pk-scaled .pkh-history.has-scroll-effect .pkh-history__row { margin-top: 32px; padding-top: 32px; }
	html.pk-scaled .pkh-history.has-scroll-effect .pkh-year__photo { width: 172.94px; height: 228.35px; margin-top: 25.04px; }
	html.pk-scaled .pkh-history.has-scroll-effect .pkh-year__desc { font-size: 14px; line-height: 25px; }
}

/* Shared desktop structure. Size reductions for the 13-inch canvas stop at 1919px. */
@media (min-width: 1025px) {
	.pkh-menu .pk-heading,
	.pkh-menu__category { position: relative; z-index: 4; }
	.pkh-menu .pkh-menu__bird { z-index: 5; }
	.pkh-branches__heading { grid-column: 1 / -1; }
	.pkh-branches__side { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
	.pkh-branches__pick { margin: 0; color: var(--pk-gold); font-size: 15px; font-weight: 500; text-align: center; }
	.pk-footer__cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr); }
	.pkh-gallery__stairs { opacity: .35; }
	.pkh-branch-stack { height: 760px; }
	.pkh-stack-food { width: 320px; height: 320px; }
	.pkh-stack-photo,
	.pkh-map-art { height: 380px; }
	.pkh-branch { height: 72px; font-size: 26px; }
}

/* Desktop homepage below the hero, on the scaled 13-inch canvas only.
   Later rules had stretched the menu to full content width. */
@media (min-width: 1025px) and (max-width: 1919px) {

	.pkh-about .pk-heading__title,
	.pkh-history .pk-heading__title,
	.pkh-gallery .pk-heading__title,
	.pkh-branches .pk-heading__title { font-size: 42px; line-height: 1.3; }
	.pkh-about .pk-heading__script,
	.pkh-history .pk-heading__script,
	.pkh-gallery .pk-heading__script,
	.pkh-branches .pk-heading__script { font-size: 26px; line-height: 1.4; }
	.pkh-feature__title { font-size: 20px; line-height: 1.5; }
	.pkh-feature__desc { font-size: 16px; line-height: 1.7; }
	.pkh-about__photo { width: min(654px, 42%); max-width: 654px; height: auto; }
	.pkh-year__num { font-size: 56px; }
	.pkh-history:not(.has-scroll-effect) .pkh-year__photo { width: 140px; height: auto; }
	.pkh-gallery__row { gap: 24px; justify-content: center; }
	.pkh-gallery__row li { flex: 0 1 240px; }
}

/* Large monitors keep the 1920 composition and grow with the viewport. */
@media (min-width: 1920px) {
	:root { --pk-wide: min(1.6, (100 * var(--pk-vw, 1vw)) / 1920px); }

	.pkh-hero__script { font-size: calc(40px * var(--pk-wide)); line-height: calc(77px * var(--pk-wide)); }
	.pkh-hero__title { font-size: calc(80px * var(--pk-wide)); line-height: calc(64px * var(--pk-wide)); }
	.pkh-hero__lead { font-size: calc(32px * var(--pk-wide)); line-height: calc(67px * var(--pk-wide)); }
	.pkh-hero__desc { font-size: calc(18px * var(--pk-wide)); line-height: calc(38px * var(--pk-wide)); }
	.pk-logo { width: calc(124px * var(--pk-wide)); height: calc(120px * var(--pk-wide)); }
	.pk-nav ul { gap: calc(32px * var(--pk-wide)); font-size: calc(16px * var(--pk-wide)); }
	.pk-header__cta {
		height: calc(60px * var(--pk-wide));
		padding: calc(12px * var(--pk-wide)) calc(30px * var(--pk-wide));
		border-radius: calc(20px * var(--pk-wide));
		font-size: calc(18px * var(--pk-wide));
	}

	.pkh-menu .pkh-menu__bird { top: var(--desktop-bird-top, calc(206.6 * var(--menu-unit, var(--pk-wide)))); }

	.pkh-feature img { width: calc(80px * var(--pk-wide)); height: calc(80px * var(--pk-wide)); }
	.pkh-feature__title { font-size: calc(20px * var(--pk-wide)); line-height: 1.5; }
	.pkh-feature__desc { font-size: calc(16px * var(--pk-wide)); line-height: 1.7; }

	.pkh-dish {
		width: min(100%, calc(1027px * var(--pk-wide)));
		--dish-plate: calc(238px * var(--pk-wide));
		column-gap: calc(48px * var(--pk-wide));
		padding: calc(24px * var(--pk-wide)) calc(40px * var(--pk-wide));
		border-width: calc(6px * var(--pk-wide));
	}
	.pkh-dish__title { font-size: calc(40px * var(--pk-wide)); }
	.pkh-dish__desc { font-size: calc(16px * var(--pk-wide)); line-height: 1.8; }

	.pkh-about .pk-heading__title,
	.pkh-history .pk-heading__title,
	.pkh-gallery .pk-heading__title { font-size: calc(60px * var(--pk-wide)); line-height: 1.2; }
	.pkh-about .pk-heading__script,
	.pkh-history .pk-heading__script,
	.pkh-gallery .pk-heading__script { font-size: calc(40px * var(--pk-wide)); line-height: 1.4; }
	.pkh-about__photo { width: calc(654px * var(--pk-wide)); max-width: 48%; height: auto; }
	.pkh-about__lead { font-size: calc(32px * var(--pk-wide)); }
	.pkh-about__body { font-size: calc(16px * var(--pk-wide)); line-height: 1.8; }

	.pkh-history.has-scroll-effect .pkh-history__stage { height: min(100svh, calc(828px * var(--pk-wide))); }
	.pkh-history__row { gap: calc(64px * var(--pk-wide)); }
	.pkh-year { flex-basis: calc(218px * var(--pk-wide)); }
	.pkh-year__num { font-size: calc(80px * var(--pk-wide)); }
	.pkh-year__photo { width: calc(172.94px * var(--pk-wide)); height: auto; }
	.pkh-year__title { font-size: calc(17px * var(--pk-wide)); }
	.pkh-year__desc { font-size: calc(14px * var(--pk-wide)); line-height: calc(25px * var(--pk-wide)); }

	.pkh-gallery__row { gap: calc(73px * var(--pk-wide)); }
	.pkh-gallery__row li { flex: 1 1 0; }
	.pkh-awards { width: min(100%, calc(1665px * var(--pk-wide))); }

	.pk-footer__logo {
		top: calc(80px * var(--pk-wide));
		width: calc(124px * var(--pk-wide));
		height: calc(120px * var(--pk-wide));
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.pk-footer__cols { padding-top: calc(250px * var(--pk-wide)); }
	.pk-footer__col h3 { font-size: calc(20px * var(--pk-wide)); }
	.pk-footer__brand { font-size: calc(40px * var(--pk-wide)); }
	.pk-footer__about { font-size: calc(14px * var(--pk-wide)); line-height: calc(25px * var(--pk-wide)); }
	.pk-footer__links,
	.pk-footer__contact { font-size: calc(18px * var(--pk-wide)); }
}

/* Hero wordmark: the cream calligraphy lockup, in place of the text title. */
.pkh-hero__kicker {
	margin: 0 0 8px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}
.pkh-hero__title { margin: 0; padding: 0; font-size: 0; line-height: 0; }
.pkh-hero__titles { max-width: 100%; }
.pkh-hero__mark { display: block; width: clamp(105px, 32vw, 150px); max-width: 100%; height: auto; }
@media (min-width: 1025px) {
	.pkh-hero__content { top: 22px; gap: 24px; }
	.pkh-hero__kicker { font-size: calc(42px * var(--pk-wide, 1)); }
	.pkh-hero__mark { width: calc(240px * var(--pk-wide, 1)); max-width: none; }
}
@media (max-width: 767px) {
	.pk-mobile-preview .pkh-hero { height: calc(200px + 78.4091vw) !important; }
}

/* Awards: bull columns, washed Persepolis, ISO captions. */
.pkh-awards__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.pkh-awards__ruin,
.pkh-awards__bull {
	position: absolute;
	display: block;
	max-width: none;
	pointer-events: none;
}
.pkh-awards__ruin {
	left: 17%;
	width: 66%;
	bottom: 0;
	height: 64%;
	object-fit: contain;
	object-position: center bottom;
}
.pkh-awards__bull {
	/* Taller, slimmer column (bull-tall.png extends the shaft): it fills the art box height
	   at every width, so more of the column shows and the bull takes less width. */
	bottom: 0;
	height: 100%;
	width: auto;
}
.pkh-awards__bull--l { left: 0; }
.pkh-awards__bull--r { right: 0; transform: scaleX(-1); }

/* Homepage chain: full layout width (100vw is the visual viewport and
   falls short while the page is zoomed). Footer scallop sits on the
   columns and Persepolis; badges and photos stay put. */
@media (min-width: 1025px) {
	.home .pkh-gallery {
		position: relative;
		z-index: 1;
		background-origin: border-box;
		background-clip: border-box;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.home .pkh-gallery::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: 50%;
		width: calc(100vw / var(--pk-zoom, 1));
		transform: translateX(-50%);
		background: url("../img/home/gallery-bg.png") center top / cover no-repeat;
		pointer-events: none;
	}

	.home .pkh-gallery > * {
		position: relative;
		z-index: 1;
	}

	.pk-site .pk-footer {
		position: relative;
		z-index: 5;
		margin-top: 0;
	}
}
.pkh-awards .pkh-cert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: clamp(88px, 7.2vw, 124px);
	height: auto;
	aspect-ratio: auto;
}
.pkh-awards .pkh-cert img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}
.pkh-awards .pkh-cert__cap {
	display: block;
	margin: 0;
	color: #3a2416;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}
html.pk-scaled .pkh-awards .pkh-cert {
	width: clamp(88px, calc(6.4 * var(--pk-vw)), 124px);
	height: auto;
	aspect-ratio: auto;
}
html.pk-scaled .pkh-awards .pkh-cert img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}
@media (min-width: 1025px) {
	.pkh-awards .pkh-certs {
		inset: 3% auto auto 50%;
		width: max-content;
		transform: translateX(-50%);
		justify-content: center;
		gap: calc(36px * var(--pk-wide, 1));
	}
	.pkh-awards .pkh-cert__cap { font-size: calc(14px * var(--pk-wide, 1)); }
}
@media (max-width: 1024px) {
	.pkh-awards__scene {
		position: relative;
		inset: auto;
		width: 100%;
		/* Same proportion as the desktop scene, so the columns keep one size relative to the width. */
		aspect-ratio: 1665 / 570;
		margin-top: 12px;
	}
	.pkh-awards .pkh-cert { width: 100%; max-width: 96px; }
	.pkh-awards .pkh-cert__cap { font-size: 12px; }
}
@media (max-width: 560px) {
	.pkh-awards .pkh-cert { max-width: 76px; }
	.pkh-awards .pkh-cert__cap { font-size: 12px; line-height: 1.3; }
}

/* Hero mark on phones: about 2x the kicker line, keeps CTAs above the fold. */
@media (max-width: 767px) {
	.pkh-hero .pkh-hero__mark { width: clamp(80px, 24vw, 108px); }
}
@media (max-width: 767px) and (max-height: 700px) {
	.pkh-hero .pkh-hero__mark { width: clamp(72px, 21vw, 92px); }
}

/* Mobile hero size system (<=767px): taller video window, content flows under it,
   one type ladder (kicker 18 / lead 16), 8px spacing rhythm, no dead space. */
@media (max-width: 767px) {
	body.pk-mobile-preview .pkh-hero { --hero-media: clamp(200px, 58vw, 260px); height: auto !important; min-height: 0; padding: 0 var(--pk-gutter) 22px; }
	body.pk-mobile-preview .pkh-hero__media { position: absolute; inset: 0 0 auto; height: calc(var(--hero-media) + 130px) !important; -webkit-mask-image: none !important; mask-image: none !important; }
	body.pk-mobile-preview .pkh-hero__shade { inset: auto 0 0 !important; height: 55% !important; background: none !important; }
	body.pk-mobile-preview .pkh-hero__content { position: relative !important; inset: auto !important; display: flex; flex-direction: column; align-items: flex-start !important; gap: 0; padding-top: calc(var(--hero-media) - 64px); }
	body.pk-mobile-preview .pkh-hero__kicker { margin: 0; font-size: clamp(16px, 4.8vw, 20px); line-height: 1.4; text-align: right; }
	body.pk-mobile-preview .pkh-hero__titles { text-align: right; }
	body.pk-mobile-preview .pkh-hero__title { margin: 8px 0 0; line-height: 0; }
	body.pk-mobile-preview .pkh-hero__text { margin: 12px 0 0; }
	body.pk-mobile-preview .pkh-hero__lead { margin: 0; font-size: clamp(15px, 4.3vw, 18px); line-height: 1.6; font-weight: 500; }
	body.pk-mobile-preview .pkh-hero__actions { margin-top: 20px; gap: 12px; }
	body.pk-mobile-preview .pkh-hero__actions .pk-btn { min-height: 52px; height: 52px; font-size: clamp(14px, 4vw, 16px); }
}
@media (max-width: 767px) and (max-height: 700px) {
	body.pk-mobile-preview .pkh-hero { --hero-media: clamp(185px, 54vw, 230px); padding-bottom: 18px; }
	body.pk-mobile-preview .pkh-hero__actions { margin-top: 16px; }
	body.pk-mobile-preview .pkh-hero__actions .pk-btn { min-height: 48px; height: 48px; }
}

/* Accessibility pass: one visible keyboard focus style, and 44px touch targets. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #a98355; outline-offset: 3px; }
button.pkh-menu__arrow::before, .pkh-bcard__film > button::before, .pkh-menu__category--side::before { content: ''; position: absolute; inset: -8px; }
.pkh-bcard__film > button { position: relative; }
.pkh-menu__category--side { position: relative; }

/* History carousel controls on phones: prev / dots / next on one row. */
@media (max-width: 767px) {
	/* One row at every width: previous, dots, next. The arrows keep their own direction so the
	   glyphs never mirror. */
	body .pk-history-controls { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 4px; direction: ltr; }
	body .pk-history-controls > button { flex: 0 0 auto; unicode-bidi: isolate; }
	body .pk-history-controls .pk-history-dots { display: flex; flex-wrap: nowrap; justify-content: center; margin: 0; }
	body .pk-history-controls .pk-history-dots button { width: 24px; min-width: 24px; }
}

/* Hero: soft shade rising from the bottom-right corner (where the text sits) so copy stays legible over any video frame. */
.pkh-hero__media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top left, rgb(40 8 7 / 0.5) 0%, rgb(40 8 7 / 0.22) 38%, rgb(40 8 7 / 0) 68%); }
.pkh-hero__media { isolation: isolate; z-index: 0; }
/* Secondary hero button gets a solid fill on every layout, not just an outline. */
@media (min-width: 768px) { .pkh-hero__actions .pk-btn:not(.pk-btn--light) { background-color: #4f0f0e; } }

/* Sub-phone widths (watch-sized and below): keep elements from colliding. */
@media (max-width: 299px) {
	/* The picker card is ~120px wide here; the branch name needs it more than the photo does. */
	html body .pkh-bcard .pkh-bcard__choice .pkh-bcard__avatar { display: none; }
}
@media (max-width: 119px) {
	/* Here the kicker spans the full width, so start the hero copy under the overhanging logo. */
	html body.pk-mobile-preview .pkh-hero .pkh-hero__content { padding-top: max(48px, 111px - 19.4vw); }
	/* Stack the two hero buttons so each keeps a usable width. */
	html body.pk-mobile-preview .pkh-hero .pkh-hero__actions { flex-direction: column; }
	html body.pk-mobile-preview .pkh-hero .pkh-hero__actions .pk-btn { flex: 0 0 auto; width: 100%; min-width: 24px; }
	/* Give the content every pixel there is: 4px edges instead of 16-24px gutters. */
	html body.pk-mobile-preview { --pk-gutter: 4px; }
	html body.pk-site .pk-footer > .pk-mfoot { padding-inline: 4px; }
}
@media (min-width: 1920px) {
	/* The 80px year numerals ran ~4px past their 173px column (Chrome ignores letter-spacing for
	   Persian script), so widen just the numeral box and pull it back with negative margins. */
	html body .pkh-year .pkh-year__num {
		width: calc(172.94px * var(--pk-wide, 1) + 8px);
		min-width: calc(172.94px * var(--pk-wide, 1) + 8px);
		max-width: calc(172.94px * var(--pk-wide, 1) + 8px);
		margin-inline: -4px;
	}
}
@media (max-width: 239px) {
	html body .pkh-awards .pkh-cert__cap { display: none; }
	/* The title keeps a 20px floor, so let its box grow instead of holding the vw-scaled height. */
	html body .pkh-menu .pkh-menu__heading { height: auto; }
	/* Menu tabs, arrows and gallery thumbs scale with the screen; hold a 12px text and 24px target floor. */
	html body .pkh-menu .pkh-menu__cats .pkh-menu__category { min-height: 28px; font-size: 12px; line-height: 1.2; }
	html body .pkh-menu .pkh-menu__cats .pkh-menu__category--side { min-width: 36px; transform: none !important; }
	html body .pkh-menu .pkh-menu__arrow { min-width: 24px; min-height: 24px; }
	html body .pkh-menu .pkh-menu__arrow img { object-fit: contain; }
	html body .pkh-bcard .pkh-bcard__shot { min-width: 48px; min-height: 32px; }
	/* Below phone width, let every label wrap rather than spill out of its box. */
	html body :is(h1, h2, h3, h4, p, a, button, strong, span) { overflow-wrap: anywhere; }
	html body.pk-mobile-preview .pkh-band { height: auto !important; }
	html body.pk-mobile-preview .pkh-band .pkh-band__row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 8px; }
	html body.pk-mobile-preview .pkh-hero .pkh-hero__actions .pk-btn { height: auto !important; min-height: 48px; padding: 8px 6px; white-space: normal; font-size: 12px; line-height: 1.4; text-align: center; }
	html body .pkh-dish .pkh-dish__title { font-size: 14px; line-height: 1.5; }
	/* Phone numbers stay whole; the branch facts stack so each has the full width. */
	html body a[href^="tel:"], html body a[href^="tel:"] * { overflow-wrap: normal; white-space: nowrap; }
	html body .pkh-bcard .pkh-bcard__meta { grid-template-columns: minmax(0, 1fr); }
	html body .pkh-bcard .pkh-bcard__fact + .pkh-bcard__fact { border-right: 0; padding-right: 0; }
}
@media (max-width: 359px) {
	html body .pkh-menu .pkh-menu__arrow { min-width: 32px; min-height: 28px; }
	html body .pkh-menu .pkh-menu__arrow img { object-fit: contain; }
	html body .pkh-bcard .pkh-bcard__shot { min-width: 48px; min-height: 32px; }
	/* Branch picker: drop the inner chevron and shrink the photo so the name has room. */
	html body .pkh-bcard .pkh-bcard__choice .pkh-bcard__chev { display: none; }
	html body .pkh-bcard .pkh-bcard__avatar { width: 52px; height: 52px; flex-basis: 52px; }
	html body .pkh-bcard .pkh-bcard__choice-text strong { font-size: 16px; line-height: 1.4; }
}

/* Desktop menu block (1025px+): the same three-pill picker as tablet and phone, with the birds
   standing on the centre pill's rim. Sizes are 1920-canvas pixels; the page zoom scales them. */
@media (min-width: 1025px) {
	.pkh-menu { padding-top: calc(176 * var(--menu-unit, 1px)); gap: calc(64 * var(--menu-unit, 1px)); }
	.pkh-menu .pkh-menu__cats { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: calc(8 * var(--menu-unit, 1px)); position: relative; z-index: 6; width: 100%; }
	.pkh-menu .pkh-menu__cats .pkh-menu__category { box-sizing: border-box; flex: 0 0 auto; width: calc(423 * var(--menu-unit, 1px)); height: calc(104 * var(--menu-unit, 1px)); margin: 0 !important; border-radius: 999px; background: #4f0f0e; border: calc(5 * var(--menu-unit, 1px)) solid #a98355; box-shadow: 0 0 0 calc(6 * var(--menu-unit, 1px)) #f7e8d6, 0 0 0 calc(8 * var(--menu-unit, 1px)) rgb(169 131 85 / 0.45), 0 12px 28px rgb(79 15 14 / 0.22); color: #fef8f1; font-size: calc(40 * var(--menu-unit, 1px)); line-height: 1; display: flex; align-items: center; justify-content: center; }
	.pkh-menu .pkh-menu__cats .pkh-menu__category--side { display: flex !important; width: calc(300 * var(--menu-unit, 1px)); padding: 0; background: #fef8f1; border: calc(3 * var(--menu-unit, 1px)) solid rgb(169 131 85 / 0.7); box-shadow: none; color: #6b2a26; font-family: inherit; font-weight: 500; cursor: pointer; transform: scale(0.82) !important; transition: background-color 150ms ease, border-color 150ms ease; }
	.pkh-menu .pkh-menu__cats .pkh-menu__category--side:hover,
	.pkh-menu .pkh-menu__cats .pkh-menu__category--side:focus-visible { background: #f3e2cc; border-color: #a98355; }
	.pkh-menu .pkh-menu__cats .pkh-menu__category--side:focus-visible { outline: 2px solid #a98355; outline-offset: 3px; }
	.pkh-menu .pkh-menu__bird { width: calc(190 * var(--menu-unit, 1px)); height: calc(230 * var(--menu-unit, 1px)); top: var(--tablet-bird-top, 0px) !important; opacity: 1; }
	.pkh-menu .pkh-menu__bird--left { left: var(--tablet-bird-left, calc(50% - 250px)) !important; right: auto !important; transform: matrix(.97453, .22427, -.22427, .97453, 0, 0) !important; }
	.pkh-menu .pkh-menu__bird--right { left: var(--tablet-bird-left, calc(50% + 250px)) !important; right: auto !important; transform: matrix(-.97453, .22427, .22427, .97453, 0, 0) !important; }
}
@media (min-width: 1025px) and (max-width: 1919px) {
	/* Dish cards at their 1920-canvas size; the page zoom scales them to the window. */
	.pkh-dish { width: min(100%, 1027px); --dish-plate: 238px; column-gap: 48px; padding: 24px 40px; border-width: 6px; }
	.pkh-dish__title { font-size: 40px; }
	.pkh-dish__desc { font-size: 16px; line-height: 1.8; }
}

/* Gallery foot: the bulls, ruins and certificates sit above the lattice, never under it. */
.pkh-gallery .pkh-awards { position: relative; z-index: 2; }

/* Under 320px seven 24px+ dots and two arrows cannot share a row; the arrows and swipe remain. */
@media (max-width: 319px) {
	body .pk-history-controls .pk-history-dots { display: none; }
}

/* Tablet (768–1024): menu lattice uses the desktop composition, scaled to the width, so it
   reaches in behind the birds instead of sitting in the far corners. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pkh-menu { --tile-unit: calc(100vw / 1600); }
	html body .pkh-menu .pkh-tiles { position: absolute !important; inset: 0 auto auto 0 !important; width: 0; height: 0; overflow: visible; z-index: 0; }
	html body .pkh-menu .pkh-tiles img { opacity: .32; }
	html body .pkh-menu .pkh-tiles__main { top: calc(15.925 * var(--tile-unit)); width: calc(707.561 * var(--tile-unit)); height: calc(673.061 * var(--tile-unit)); right: auto; }
	html body .pkh-menu .pkh-tiles .pkh-tiles__a { top: calc(16.94 * var(--tile-unit)); width: calc(170.121 * var(--tile-unit)); height: calc(170.121 * var(--tile-unit)); right: auto; }
	html body .pkh-menu .pkh-tiles .pkh-tiles__b { top: calc(16.94 * var(--tile-unit)); width: calc(169.061 * var(--tile-unit)); height: calc(170.121 * var(--tile-unit)); right: auto; }
	html body .pkh-menu .pkh-tiles--left .pkh-tiles__main { left: 0; }
	html body .pkh-menu .pkh-tiles--left .pkh-tiles__a { left: 0; }
	html body .pkh-menu .pkh-tiles--left .pkh-tiles__b { left: calc(671.94 * var(--tile-unit)); }
	html body .pkh-menu .pkh-tiles--right .pkh-tiles__main { left: calc(100vw - 707.561 * var(--tile-unit)); }
	html body .pkh-menu .pkh-tiles--right .pkh-tiles__a { left: calc(100vw - 170.121 * var(--tile-unit)); }
	html body .pkh-menu .pkh-tiles--right .pkh-tiles__b { left: calc(100vw - 839.6 * var(--tile-unit)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* Dishes stack in rows, like phone and desktop. */
	.pkh-menu { flex-direction: column !important; flex-wrap: nowrap; align-items: center !important; }
	html body .pkh-menu > .pkh-dish { flex: 0 0 auto; width: min(100%, 720px); max-width: none; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; column-gap: 28px; row-gap: 4px; padding: 16px 28px; }
	html body .pkh-menu > .pkh-dish .pkh-dish__plate { grid-column: 1; grid-row: 1 / span 2; justify-self: center; width: 180px !important; height: 180px !important; aspect-ratio: auto; }
	html body .pkh-menu > .pkh-dish .pkh-dish__title,
	html body .pkh-menu > .pkh-dish .pkh-dish__desc { grid-column: 2; text-align: right; }
	html body .pkh-menu > .pkh-dish .pkh-dish__title { align-self: end; font-size: 32px; line-height: 1.4; }
	html body .pkh-menu > .pkh-dish .pkh-dish__desc { align-self: start; font-size: 16px; line-height: 1.7; }
}

/* Hero copy keeps 48px clear of the feature band at every width.
   On desktop the copy is in flow, so a taller lockup grows the hero
   instead of painting over the band. The photo keeps its dip. */
@media (min-width: 1025px) {
	html body .pkh .pkh-hero {
		height: auto;
		min-height: 656px;
		padding-bottom: 48px;
	}
	html body .pkh .pkh-hero__media {
		height: calc(100% + 162px);
	}
	html body .pkh .pkh-hero__content {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: min(461px, calc(100% - (var(--pk-gutter) * 2)));
		margin-top: 22px;
		margin-bottom: 0;
		margin-inline-start: var(--pk-gutter);
		margin-inline-end: auto;
	}
}
@media (max-width: 1024px) {
	html body .pkh .pkh-hero { padding-bottom: 48px; }
}

/* Phone: the photo was a fixed height, so the lead fell onto the maroon.
   The photo now covers the copy plus 32px, and the buttons stay on the maroon below it. */
@media (max-width: 767px) {
	html body.pk-mobile-preview .pkh-hero {
		display: grid;
		grid-template-columns: var(--pk-gutter) minmax(0, 1fr) var(--pk-gutter);
		grid-template-rows: calc(var(--hero-media) - 64px) auto auto auto;
		height: auto !important;
		padding: 0 0 48px;
	}
	html body.pk-mobile-preview .pkh-hero__media {
		grid-column: 1 / -1;
		grid-row: 1 / 4;
		position: relative !important;
		inset: auto !important;
		width: 100%;
		height: auto !important;
		align-self: stretch;
	}
	html body.pk-mobile-preview .pkh-hero__content { display: contents; }
	html body.pk-mobile-preview .pkh-hero__titles,
	html body.pk-mobile-preview .pkh-hero__text,
	html body.pk-mobile-preview .pkh-hero__actions {
		grid-column: 2;
		position: relative;
		z-index: 2;
		width: 100%;
	}
	html body.pk-mobile-preview .pkh-hero__titles { grid-row: 2; margin: 0; }
	html body.pk-mobile-preview .pkh-hero__text { grid-row: 3; margin: 12px 0 0; padding-bottom: 64px; }
	html body.pk-mobile-preview .pkh-hero__actions { grid-row: 4; margin-top: 16px; }
}