/**
 * The Good Knight - hero, sticky section menu, the menu card, the history rows,
 * gallery and details.
 *
 * Measured off XD artboard 17 "Food & Dinning - The Good Knight" (1920 canvas,
 * 1300 content column). It comes from the same set as Private Dining and Le Carb
 * Café and lands the hero, strip, gallery band and details block on the same
 * offsets, so those parts are Le Carb Café's rules renamed. The menu card and
 * the history rows are this artboard's own; the item popup is Sunday Roast's,
 * which artboard 18 draws the same.
 *
 * The strip sticks 57px down because the site's nav bar is itself sticky and
 * 59px tall.
 */

.lc-gk {
	--lc-gk-cream: #f8f5ed;
	--lc-gk-ink: #2f3528;
	--lc-gk-deep: #0d1a13;
	--lc-gk-sage: #74825f;
	--lc-gk-gold: #cfaf58;
	--lc-gk-placeholder: #e2e2e2;
	--lc-gk-divider: rgba(255, 255, 255, 0.46);
	--lc-gk-btn-label: #f5f4f2;

	--lc-gk-serif: "ivypresto-display", "IvyPresto Display", Georgia, "Times New Roman", serif;
	--lc-gk-sans: "Work Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

	--lc-gk-max: 1300px;
	--lc-gk-gutter: 20px;
	/* The sticky nav above us. Anchor targets are pushed clear of both bars. */
	--lc-gk-nav: 57px;
	--lc-gk-strip: 65px;

	color: var(--lc-gk-ink);
	font-family: var(--lc-gk-sans);

	/* <main> contributes no box of its own, so the sticky strip's containing
	   block is the page and the strip stays pinned over the footer, as the
	   approved (Elementor-sticky) strip does - Sunday Roast's fix. Every section
	   paints its own background, and custom properties still inherit. */
	display: contents;
}

/* Logged in, the admin bar pushes the site's sticky nav 32px down; the strip
   follows it rather than sliding under it. */
@media (min-width: 783px) {
	body.admin-bar .lc-gk {
		--lc-gk-nav: 89px;
	}
}

.lc-gk *,
.lc-gk *::before,
.lc-gk *::after {
	box-sizing: border-box;
}

/* Anchored sections have to clear the nav and the strip, or a jump lands with
   the heading hidden behind both. */
.lc-gk [id] {
	scroll-margin-top: calc(var(--lc-gk-nav) + var(--lc-gk-strip));
}

.lc-gk-eyebrow {
	margin: 0;
	font-family: var(--lc-gk-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.385em;
	text-indent: 0.385em;
	text-transform: uppercase;
	color: var(--lc-gk-gold);
	text-align: center;
}

/* --------------------------------------------------------------- buttons */

/* 60px ink block with the gold hairline held 2px inside it. Unlike Private
   Dining's fixed 272px, this artboard sizes each button to its label with
   35px either side (169px for VIEW MENU, 301px for the enquiry button); the
   right side gives back the 2.1px the last letter's tracking adds. */
.lc-gk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 32.9px 0 35px;
	white-space: nowrap;
	background: var(--lc-gk-ink);
	color: var(--lc-gk-btn-label);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lc-gk-btn::after {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px solid var(--lc-gk-gold);
	pointer-events: none;
}

/* The parent theme paints a magenta background on any focused button, so every
   state is claimed back explicitly. */
.lc-gk-btn:hover,
.lc-gk-btn:focus,
.lc-gk-btn:focus-visible {
	background: var(--lc-gk-gold);
	color: var(--lc-gk-deep);
	text-decoration: none;
}

.lc-gk-btn:focus-visible {
	outline: 2px solid var(--lc-gk-gold);
	outline-offset: 3px;
}

.lc-gk-link__text {
	position: relative;
	display: inline-block;
}

/* The site's own underline: scaled to nothing at rest, drawn out from the
   centre on hover. Same 1.5px, same gold, same easing as style.css uses. */
.lc-gk-link__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--lc-gk-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-gk-details__text--link:hover .lc-gk-link__text::after,
.lc-gk-details__text--link:focus-visible .lc-gk-link__text::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------ hero */

.lc-gk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 650px;
	padding: 0 var(--lc-gk-gutter);
	background: var(--lc-gk-deep);
	overflow: hidden;
}

.lc-gk-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No scrim or opacity here: the design's own export of the banner already
   carries the dark ground, the photo at 40% and the lower gradient. */

.lc-gk-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--lc-gk-max);
	margin: 0 auto;
	padding: 140px 0 140px;
}

.lc-gk-hero__eyebrow {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.385em;
	text-transform: uppercase;
	color: var(--lc-gk-gold);
}

.lc-gk-hero__title {
	margin: 4px 0 0;
	font-family: var(--lc-gk-serif);
	font-size: 60px;
	font-weight: 500;
	line-height: 89px;
	letter-spacing: 1.56px;
	color: #fff;
	/* The site's own hero glow - a wide, soft shadow that keeps white type
	   readable wherever the photograph happens to be light. */
	text-shadow: 0 0 100px rgba(0, 0, 0, 0.61);
}

.lc-gk-hero__text {
	max-width: 680px;
	margin: 8px 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.047px;
	color: #fff;
}

.lc-gk-hero .lc-gk-btn {
	margin-top: 40px;
}

/* ----------------------------------------------------- section menu strip */

/* 65px ink strip flush under the hero, pinned below the sticky nav. */
.lc-gk-menu {
	position: sticky;
	top: var(--lc-gk-nav);
	z-index: 99;
	background: var(--lc-gk-ink);
}

/* The accordion only exists below desktop; up here the wrapper is inert and
   the toggle is not rendered at all. */
.lc-gk-menu__toggle,
.lc-gk-menu__toggle-label,
.lc-gk-menu__toggle-close {
	display: none;
}

.lc-gk-menu__wrap > summary::-webkit-details-marker,
.lc-gk-menu__wrap > summary::marker {
	display: none;
	content: "";
}

.lc-gk-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: var(--lc-gk-max);
	min-height: var(--lc-gk-strip);
	margin: 0 auto;
	padding: 0 var(--lc-gk-gutter);
	list-style: none;
}

.lc-gk-menu__item {
	display: flex;
	align-items: center;
	/* 44px each side, so 88px between neighbours. */
	margin: 0 44px;
}

/* The hairline between items - only between, never leading or trailing. It
   sits in the 88px channel, so the margin is halved either side of it. */
.lc-gk-menu__item + .lc-gk-menu__item::before {
	content: "";
	width: 1px;
	height: 19px;
	margin: 0 44px 0 -45px;
	background: var(--lc-gk-divider);
	flex: 0 0 1px;
}

.lc-gk-menu__link {
	display: block;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: 0.68px;
	text-transform: uppercase;
	color: var(--lc-gk-gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* The approved strip keeps its colour; its hover is the site's gold underline,
   drawn out from the centre. The section in view carries the same underline. */
.lc-gk-menu__link:hover,
.lc-gk-menu__link:focus,
.lc-gk-menu__link:focus-visible,
.lc-gk-menu__link:active,
.lc-gk-menu__link[aria-current="true"] {
	color: var(--lc-gk-gold);
	text-decoration: none;
}

.lc-gk-menu__text {
	position: relative;
	display: block;
}

.lc-gk-menu__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--lc-gk-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-gk-menu__link:hover .lc-gk-menu__text::after,
.lc-gk-menu__link[aria-current="true"] .lc-gk-menu__text::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------- cream body block */

/* One cream band runs under the menu and the history. Its padding puts the menu
   eyebrow's baseline 114px under the strip and ends the band 131px below the
   last line of the history copy. */
.lc-gk-body {
	background: var(--lc-gk-cream);
	padding: 99.85px var(--lc-gk-gutter) 124.5px;
}

.lc-gk-carte,
.lc-gk-story {
	max-width: var(--lc-gk-max);
	margin: 0 auto;
}

.lc-gk-head {
	text-align: center;
}

/* Eyebrow baseline to heading baseline is 78px in both heads. */
.lc-gk-head__heading {
	max-width: 1000px;
	margin: 11.15px auto 0;
	font-family: var(--lc-gk-serif);
	font-size: 54px;
	font-weight: 500;
	line-height: 80px;
	letter-spacing: 0.54px;
	color: #000;
}

/* ------------------------------------------------------------- menu card */

/* White card under a 1300x401 banner. The banner is the design's own export,
   with the dark flag, crown and wordmark already laid over the photo. */
.lc-gk-card {
	margin: 59px 0 0;
	background: #fff;
}

.lc-gk-card__banner {
	position: relative;
	aspect-ratio: 1300 / 401;
	background: var(--lc-gk-placeholder);
	overflow: hidden;
}

.lc-gk-card__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The rail, then two 400px columns: 82 + 130 + 78 + 400 + 80 + 400 + 130 =
   1300. The top padding puts the section titles' line boxes 80px under the
   banner, level with the end of the rail word; the bottom leaves 115px under
   the rail's photos, which run lower than the note. The second row takes the
   rail's extra height, so the note sits straight under the columns. */
.lc-gk-card__body {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 130px minmax(0, 880px);
	grid-template-rows: auto 1fr;
	column-gap: 78px;
	padding: 80px 130px 115px 82px;
	overflow: hidden;
}

/* The faint castle drawing in the bottom-right corner, behind everything. */
.lc-gk-card__backdrop {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.lc-gk-card__backdrop picture,
.lc-gk-rail picture {
	display: block;
}

.lc-gk-card__backdrop-img {
	display: block;
	width: 644px;
	max-width: none;
	height: auto;
}

.lc-gk-rail {
	position: relative;
	grid-row: 1 / -1;
	min-width: 0;
}

/* The word reads bottom to top. Its baseline is the vertical line 109px in from
   the rail's left edge; the run starts 365px down and ends level with the
   section titles' tops. The span is turned about its baseline's start. */
.lc-gk-rail__word {
	position: absolute;
	top: 365.02px;
	left: 109px;
	width: 0;
	height: 0;
	margin: 0;
}

.lc-gk-rail__turn {
	position: absolute;
	top: -125px;
	left: 0;
	font-family: var(--lc-gk-sans);
	font-size: 134px;
	font-weight: 700;
	line-height: 158px;
	letter-spacing: -3.35px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lc-gk-deep);
	transform: rotate(-90deg);
	transform-origin: 0 125px;
}

/* The four round photos, one image 130px wide, 35px under the word. */
.lc-gk-rail__photos {
	display: block;
	width: 130px;
	max-width: 100%;
	height: auto;
	margin-top: 400px;
}

.lc-gk-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 400px));
	column-gap: 80px;
	align-items: start;
}

.lc-gk-col {
	min-width: 0;
}

/* Last item's baseline to the next title's is 131px. */
.lc-gk-section + .lc-gk-section {
	margin-top: 92.1px;
}

.lc-gk-section__title {
	margin: 0;
	font-family: var(--lc-gk-sans);
	font-size: 38px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: 1.9px;
	text-transform: uppercase;
	color: var(--lc-gk-deep);
}

/* Title baseline to the first item's is 53px, then one item every 38px. */
.lc-gk-dishes {
	margin: 29.85px 0 0;
	padding: 0;
	list-style: none;
}

.lc-gk-dish {
	min-width: 0;
	margin: 0;
}

.lc-gk-dish + .lc-gk-dish {
	margin-top: 20px;
}

/* The whole item opens the popup, as a Sunday Roast dish row does: the name on
   the left, the price set flush to the column's right edge on its baseline. */
.lc-gk-dish__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	/* Buttons inherit nowrap from the theme; a long name has to wrap. */
	white-space: normal;
	cursor: pointer;
	appearance: none;
	transition: none;
}

/* The parent theme fills a hovered or focused button magenta (#c36); the
   item's only hover is the gold underline under its name. */
.lc-gk-dish__row:hover,
.lc-gk-dish__row:focus,
.lc-gk-dish__row:focus-visible,
.lc-gk-dish__row:active {
	background: none;
	color: inherit;
	text-decoration: none;
}

.lc-gk-dish__name {
	position: relative;
	min-width: 0;
	font-family: var(--lc-gk-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: #000;
}

/* Sunday Roast's name underline: the site's gold rule, wiped in from the
   centre while the item is under the pointer. */
.lc-gk-dish__name::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--lc-gk-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-gk-dish__row:hover .lc-gk-dish__name::after,
.lc-gk-dish__row:focus-visible .lc-gk-dish__name::after {
	transform: scaleX(1);
}

.lc-gk-dish__price {
	flex: none;
	font-family: var(--lc-gk-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	white-space: nowrap;
	color: var(--lc-gk-ink);
}

/* Under the columns, in their track: the label's baseline 110px under the last
   item's, the sentence 27px under the label's. */
.lc-gk-note {
	grid-column: 2;
	align-self: start;
	margin-top: 92px;
}

.lc-gk-note__label {
	margin: 0;
	font-family: var(--lc-gk-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	text-transform: uppercase;
	color: #980000;
}

.lc-gk-note__text {
	margin: 6px 0 0;
	font-family: var(--lc-gk-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.015px;
	color: var(--lc-gk-ink);
}

/* ---------------------------------------------------------------- history */

.lc-gk-story {
	margin-top: 99.85px;
}

/* Photo and copy, 610px each on an 80px gutter, 80px between rows; every other
   row puts its photo on the right. */
.lc-gk-story__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 80px;
	align-items: start;
	margin-top: 59px;
}

.lc-gk-story__row + .lc-gk-story__row {
	margin-top: 80px;
}

.lc-gk-story__row--flip .lc-gk-story__media {
	order: 2;
}

.lc-gk-story__media {
	min-width: 0;
}

/* The design's own exports: the first photo carries its gold hairline 15px in,
   the second is a cut-out that sits straight on the cream. */
.lc-gk-story__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The copy's first baseline sits 13px under the row's top, as the artboard's
   text frames set it, and the paragraphs are parted by one empty line.
   XD sets Work Sans about 0.35% wider than browsers do, enough to move line
   breaks, so the running text carries 0.036px more tracking than the
   artboard's 0.232px to wrap where it does (0.265-0.272px all reproduce the
   artboard's seven paragraphs). */
.lc-gk-story__text {
	min-width: 0;
	margin-top: -3.49px;
	font-family: var(--lc-gk-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.268px;
	color: var(--lc-gk-ink);
}

.lc-gk-story__text p {
	margin: 0 0 23px;
}

.lc-gk-story__text > :last-child {
	margin-bottom: 0;
}

.lc-gk-story__text strong,
.lc-gk-story__text b {
	font-weight: 700;
}

/* ---------------------------------------------------------------- gallery */

/* Sage ground running down to ink, with the carpet pattern over it - the same
   three-layer build the event page's enquiry band uses. */
.lc-gk-gallery {
	position: relative;
	padding: 115px var(--lc-gk-gutter) 180px;
	background-color: var(--lc-gk-ink);
	background-image: linear-gradient(180deg, var(--lc-gk-sage) 0%, var(--lc-gk-ink) 100%);
	overflow: hidden;
}

.lc-gk-gallery::before,
.lc-gk-gallery::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The pattern at 10%, then a second gradient fading it out down the band. */
.lc-gk-gallery::before {
	background-image: url("carpet.webp");
	background-repeat: repeat;
	background-size: 1491px 1055px;
	background-position: center top;
	opacity: 0.1;
}

.lc-gk-gallery::after {
	background-image: linear-gradient(180deg, rgba(116, 130, 95, 0) 0%, rgba(47, 53, 40, 1) 100%);
}

/* Its own element, because both pseudo-elements are spoken for above. */
.lc-gk-gallery__frame {
	position: absolute;
	z-index: 2;
	inset: 15px;
	border: 1px solid var(--lc-gk-gold);
	pointer-events: none;
}

.lc-gk-gallery__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lc-gk-max);
	margin: 0 auto;
}

.lc-gk-gallery__heading {
	margin: 5px 0 0;
	font-family: var(--lc-gk-serif);
	font-size: 54px;
	font-weight: 500;
	line-height: 64.8px;
	letter-spacing: 0.32px;
	color: #fff;
	text-align: center;
}

/* Three 420x280 cells to a row on a 20px gutter: 3 x 420 + 2 x 20 = 1300. */
.lc-gk-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 87px 0 0;
	padding: 0;
	list-style: none;
}

.lc-gk-gallery__cell {
	position: relative;
	aspect-ratio: 420 / 280;
	overflow: hidden;
}

/* The whole cell is the trigger, so the hit area matches what is drawn. */
.lc-gk-gallery__btn {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	/* The parent theme rounds buttons 3px, which clipped the photo's corners. */
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: zoom-in;
	overflow: hidden;
	transition: none;
}

/* ...and fills a hovered one magenta behind the photo. */
.lc-gk-gallery__btn:hover,
.lc-gk-gallery__btn:active {
	background: none;
	color: inherit;
}

.lc-gk-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The built gallery fades a black scrim in on hover - measured off the live
   widget, whose hover rule is rgba(0,0,0,.5). Its animation is "fade-in", so
   the picture itself does not move. */
.lc-gk-gallery__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.lc-gk-gallery__btn:hover::after,
.lc-gk-gallery__btn:focus-visible::after {
	opacity: 1;
}

.lc-gk-gallery__btn:focus,
.lc-gk-gallery__btn:focus-visible {
	background: none;
	outline: 2px solid var(--lc-gk-gold);
	outline-offset: -2px;
}

/* The gold hairline: a 400x260 frame 10px in from the sides, 9px from the top
   and 11px from the bottom, as the artboard draws it. */
.lc-gk-gallery__cell::after {
	content: "";
	position: absolute;
	inset: 9px 10px 11px;
	border: 1px solid var(--lc-gk-gold);
	pointer-events: none;
	z-index: 1;
}

/* ---------------------------------------------------------------- details */

.lc-gk-details {
	background: #fff;
	padding: 100px var(--lc-gk-gutter) 122px;
}

/* 850 wide, not the page's 1300 - three 270px columns on a 20px gutter. */
.lc-gk-details__inner {
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
}

.lc-gk-details__heading {
	margin: 0;
	font-family: var(--lc-gk-serif);
	font-size: 54px;
	font-weight: 500;
	line-height: 65px;
	letter-spacing: 0.54px;
	/* #2F3528 in the artboard, unlike the section headings. */
	color: var(--lc-gk-ink);
}

/* The second line is IvyPresto Display Thin Italic in the artboard. Pinned,
   rather than left to font matching picking the kit's only italic face. */
.lc-gk-details__heading i {
	font-style: italic;
	font-weight: 100;
}

.lc-gk-details__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 835 on a 12px gutter puts the three column centres on the artboard's
	   674 / 961 / 1239, which equal thirds of 850 missed by up to 11px. */
	gap: 12px;
	max-width: 835px;
	margin: 95px auto 0;
	padding: 0;
	list-style: none;
}

.lc-gk-details__col {
	text-align: center;
}

.lc-gk-details__icon {
	display: block;
	width: 102px;
	height: 102px;
	margin: 0 auto;
	object-fit: contain;
}

.lc-gk-details__title {
	margin: 10px 0 0;
	font-family: var(--lc-gk-serif);
	font-size: 28px;
	font-weight: 500;
	line-height: 41px;
	letter-spacing: 0.17px;
	color: #000;
}

.lc-gk-details__text {
	display: block;
	margin: 9px 0 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.06px;
	color: #000;
}

/* A linked sub-line. The artboard shows no rule under it at rest - the only
   line it draws there is a white one on white - so it carries the site's
   hover underline instead, and inline-block keeps that underline the width of
   the words rather than the whole column. */
.lc-gk-details__text--link {
	display: inline-block;
	color: var(--lc-gk-ink);
	text-decoration: none;
	border: 0;
}

.lc-gk-details__text--link:hover,
.lc-gk-details__text--link:focus-visible {
	color: var(--lc-gk-gold);
}

.lc-gk-details .lc-gk-btn {
	margin-top: 78px;
}

/* --------------------------------------------------------------- lightbox */

.lc-gk-lb {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: rgba(13, 26, 19, 0.96);
	color: #fff;
	overflow: hidden;
}

.lc-gk-lb::backdrop {
	background: rgba(13, 26, 19, 0.9);
}

.lc-gk-lb__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 72px 96px;
}

.lc-gk-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lc-gk-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--lc-gk-gold);
	background: rgba(47, 53, 40, 0.85);
	color: var(--lc-gk-gold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lc-gk-lb__btn:hover,
.lc-gk-lb__btn:focus,
.lc-gk-lb__btn:focus-visible {
	background: var(--lc-gk-gold);
	color: var(--lc-gk-deep);
}

.lc-gk-lb__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.lc-gk-lb__close {
	top: 20px;
	right: 20px;
}

.lc-gk-lb__prev {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.lc-gk-lb__next {
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.lc-gk-lb__count {
	position: absolute;
	bottom: 22px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--lc-gk-gold);
}

html.lc-gk-lb-open,
html.lc-gk-lb-open body {
	overflow: hidden;
}

/* -------------------------------------------------------------- popup ---- */

/* The menu item popup - Sunday Roast's, drawn to XD artboard 20: a cream
   890x395 card with 5px corners over a 70.8% black blanket. Photo left in a
   420x280 cell carrying a gold hairline; title and description stacked in a
   334px column 45px to its right, or the text alone when an item has no
   photo. The dialog is appended to <body>, outside .lc-gk, so it carries its
   own tokens. */
.lc-gk-popup {
	--lc-gk-ink: #2f3528;
	--lc-gk-gold: #cfaf58;
	--lc-gk-serif: "ivypresto-display", serif;
	--lc-gk-sans: "Work Sans", sans-serif;

	box-sizing: border-box;
	width: 890px;
	max-width: calc(100vw - 40px);
	max-height: none;
	margin: auto;
	padding: 50px 47px 65px 44px;
	border: 0;
	border-radius: 5px;
	background: #f8f5ed;
	box-shadow: 0 8px 4px rgba(0, 0, 0, 0.5);
	color: var(--lc-gk-ink);
	/* The close disc overhangs the top-right corner. */
	overflow: visible;
}

.lc-gk-popup *,
.lc-gk-popup *::before,
.lc-gk-popup *::after {
	box-sizing: border-box;
}

.lc-gk-popup::backdrop {
	background: rgba(0, 0, 0, 0.708);
}

/* Artboard 18's overlay transition: a 0.8s ease-in-out dissolve. */
.lc-gk-popup[open],
.lc-gk-popup[open]::backdrop {
	animation: lc-gk-dissolve 0.8s ease-in-out;
}

@keyframes lc-gk-dissolve {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* A click inside the card focuses the dialog itself; it is not a control, so it
   draws no ring (the close disc keeps its own). */
.lc-gk-popup:focus,
.lc-gk-popup:focus-visible {
	outline: none;
}

/* Without a photo the card is just the text column. */
.lc-gk-popup--text-only {
	width: fit-content;
}

.lc-gk-popup--text-only .lc-gk-popup__content {
	padding-top: 0;
}

/* A 30px white disc with a gold X, centred 5px below the card's top edge and
   3px in from its right edge. The artboard draws no hover state for it. */
.lc-gk-popup__close {
	position: absolute;
	top: -10px;
	right: -12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.204);
	color: #cfaf58;
	line-height: 1;
	cursor: pointer;
	transition: none;
}

/* The parent theme fills a hovered or focused button magenta; claim it back. */
.lc-gk-popup__close:hover,
.lc-gk-popup__close:focus,
.lc-gk-popup__close:focus-visible,
.lc-gk-popup__close:active {
	background: #fff;
	color: #cfaf58;
	text-decoration: none;
}

.lc-gk-popup__close:focus:not(:focus-visible) {
	outline: none;
}

.lc-gk-popup__close:focus-visible {
	outline: 2px solid #cfaf58;
	outline-offset: 2px;
}

.lc-gk-popup__close svg {
	display: block;
	width: 11.04px;
	height: 11.04px;
	fill: currentColor;
}

.lc-gk-popup__body {
	display: grid;
	grid-template-columns: 420px 334px;
	column-gap: 45px;
	align-items: center;
}

/* Without a photo the card shrinks to its text, up to the 334px column. */
.lc-gk-popup--text-only .lc-gk-popup__body {
	grid-template-columns: fit-content(334px);
}

.lc-gk-popup__media {
	position: relative;
	width: 420px;
	height: 280px;
	overflow: hidden;
	background: #e2e2e2;
}

.lc-gk-popup__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1px #C6AA57 drawn inside a 400x260 box: 10px in from the sides, 9px from the
   top and 11px from the bottom. */
.lc-gk-popup__frame {
	position: absolute;
	inset: 9px 10px 11px;
	border: 1px solid #c6aa57;
	pointer-events: none;
}

/* Centred against the photo, then nudged down: artboard 18 sets the title's
   baseline 91px under the photo's top, the description 39px under that and
   the price 56px under the description's last line. */
.lc-gk-popup__content {
	min-width: 0;
	padding-top: 7.33px;
	text-align: left;
}

.lc-gk-popup__title {
	margin: 0;
	font-family: var(--lc-gk-serif);
	font-size: 31px;
	line-height: 38px;
	font-weight: 300;
	letter-spacing: 0.186px;
	text-transform: none;
	color: var(--lc-gk-ink);
}

.lc-gk-popup__desc {
	margin: 29.2px 0 0;
	font-family: var(--lc-gk-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 400;
	letter-spacing: 0.232px;
	color: var(--lc-gk-ink);
	overflow-wrap: break-word;
}

.lc-gk-popup__price {
	margin: 33px 0 0;
	font-family: var(--lc-gk-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 700;
	letter-spacing: 0.232px;
	color: var(--lc-gk-ink);
	white-space: nowrap;
}

/* Only the root is locked - locking <body> too would make it the scroller and
   unpin the strip. The scrollbar's width is padded back (the script measures
   it) so nothing shifts, and the blanket still reaches the right edge. */
html.lc-gk-popup-open {
	overflow: hidden;
	padding-right: var(--lc-gk-sbw, 0px);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1359px) {
	.lc-gk-menu__item {
		margin: 0 26px;
	}

	.lc-gk-menu__item + .lc-gk-menu__item::before {
		margin: 0 26px 0 -27px;
	}
}

@media (max-width: 1024px) {
	.lc-gk {
		--lc-gk-nav: 0px;
		--lc-gk-strip: 0px;
	}

	/* The site's nav is not sticky here, but WordPress's admin bar is: 32px tall
	   above 782px, 46px from 601px, and it scrolls away at 600px and under. */
	body.admin-bar .lc-gk {
		--lc-gk-nav: 32px;
	}

	#menu {
		scroll-margin-top: 72px;
	}

	/* Below desktop the strip becomes the approved accordion (Sunday Roast has
	   the same): an ink bar reading NAVIGATION, pinned to the top of the screen,
	   that opens a cream panel of links. */
	.lc-gk-menu {
		background: none;
	}

	/* Opened, the bar drops below the panel and its label is replaced by a
	   close mark - a light disc with a gold cross. Elementor swaps that icon in
	   script, so it is only visible on the rendered page, never in the markup. */
	.lc-gk-menu__wrap[open] {
		display: flex;
		flex-direction: column;
	}

	.lc-gk-menu__wrap[open] .lc-gk-menu__toggle {
		order: 2;
	}

	.lc-gk-menu__toggle-label {
		display: block;
	}

	.lc-gk-menu__wrap[open] .lc-gk-menu__toggle-label {
		display: none;
	}

	/* The close mark is the site's own close-icon.svg at 30px - a white disc
	   with a round-capped gold cross - as the approved accordion draws it. */
	.lc-gk-menu__wrap[open] .lc-gk-menu__toggle-close {
		display: block;
		width: 30px;
		height: 30px;
		background: url("/wp-content/uploads/2026/09/close-icon.svg") center / contain no-repeat;
	}

	.lc-gk-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		padding: 0 10px;
		background: var(--lc-gk-ink);
		color: var(--lc-gk-gold);
		font-family: var(--lc-gk-sans);
		font-size: 16px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: uppercase;
		text-align: center;
		cursor: pointer;
		list-style: none;
	}

	/* The cream panel: the links stacked and centred, nothing else. */
	.lc-gk-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		gap: 16px;
		min-height: 0;
		padding: 20px;
		background: var(--lc-gk-cream);
	}

	.lc-gk-menu__item {
		margin: 0;
		width: 100%;
		justify-content: center;
		order: var(--lc-gk-morder, 0);
	}

	.lc-gk-menu__item.is-desktop-only {
		display: none;
	}

	/* The approved panel links have no hover underline. */
	.lc-gk-menu__text::after {
		content: none;
	}

	/* No hairlines inside the panel - the original does not draw them. */
	.lc-gk-menu__item + .lc-gk-menu__item::before {
		content: none;
	}

	.lc-gk-menu__link {
		padding: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 19px;
		letter-spacing: 0.52px;
		color: var(--lc-gk-ink);
		text-align: center;
		white-space: normal;
	}

	.lc-gk-menu__link:hover,
	.lc-gk-menu__link:focus,
	.lc-gk-menu__link:focus-visible,
	.lc-gk-menu__link:active,
	.lc-gk-menu__link[aria-current="true"] {
		color: var(--lc-gk-ink);
	}

	/* The approved tablet hero: 100px above and below the content, the title at
	   50px, the copy at 16px wrapping in a 380px box, a 177x52 button 20px down. */
	.lc-gk-hero {
		min-height: 0;
		padding: 100px var(--lc-gk-gutter);
	}

	.lc-gk-hero__inner {
		padding: 0;
	}

	.lc-gk-hero__eyebrow {
		font-size: 14px;
	}

	.lc-gk-hero__title {
		margin: 0;
		font-size: 50px;
		line-height: 1.2;
	}

	.lc-gk-hero__text {
		max-width: 380px;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
	}

	.lc-gk-hero__text br {
		display: none;
	}

	.lc-gk-hero .lc-gk-btn {
		margin-top: 20px;
	}

	.lc-gk-btn {
		height: 52px;
		min-width: 177px;
		padding: 0 20px;
	}

	.lc-gk-body {
		padding: 80px var(--lc-gk-gutter) 80px;
	}

	/* The approved headings: "Explore Our Menu" keeps its 54px, the history
	   title drops to 46px. */
	.lc-gk-head__heading {
		margin-top: 10px;
		font-size: 54px;
		line-height: 80px;
	}

	#history .lc-gk-head__heading {
		font-size: 46px;
		line-height: 1;
	}

	/* The approved card sits 30px under the heading on tablet (20px on a phone). */
	.lc-gk-card {
		margin-top: 30px;
	}

	/* The approved build's tablet card: 30px in, the rail at 12%, the word at
	   70px and the columns 30px apart. */
	.lc-gk-card__body {
		grid-template-columns: 12% minmax(0, 1fr);
		column-gap: 30px;
		padding: 30px 30px 40px;
	}

	.lc-gk-rail__word {
		top: 208px;
		left: calc(50% + 24.05px);
	}

	.lc-gk-rail__turn {
		top: -65.3px;
		font-size: 70px;
		line-height: 82.5px;
		letter-spacing: -1.75px;
		transform-origin: 0 65.3px;
	}

	.lc-gk-rail__photos {
		margin: 212px auto 0;
	}

	.lc-gk-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
	}

	.lc-gk-section + .lc-gk-section {
		margin-top: 40px;
	}

	.lc-gk-section__title {
		font-size: 24px;
		line-height: 1;
		letter-spacing: 1px;
	}

	.lc-gk-dishes {
		margin-top: 33.5px;
	}

	.lc-gk-dish + .lc-gk-dish {
		margin-top: 22px;
	}

	.lc-gk-note {
		margin-top: 40px;
	}

	.lc-gk-story {
		margin-top: 80px;
	}

	.lc-gk-story__row {
		column-gap: 30px;
		margin-top: 50px;
	}

	.lc-gk-story__row + .lc-gk-story__row {
		margin-top: 80px;
	}

	/* The approved build centres the second row's cut-out against its copy. */
	.lc-gk-story__row--flip .lc-gk-story__media {
		align-self: center;
	}

	.lc-gk-story__text {
		margin-top: 0;
	}

	/* The approved tablet gallery: three across on a 20px gutter, 40px in from
	   the sides so the photos clear the gold frame. */
	.lc-gk-gallery {
		padding: 60px 40px;
	}

	.lc-gk-gallery__heading {
		margin-top: 20px;
		font-size: 42px;
		line-height: 1.2;
	}

	/* The approved gallery's tablet setting: two across on a 10px gutter. */
	.lc-gk-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-top: 30px;
	}

	/* The approved tablet details: heading 46px, 80px icons, 20px titles, 40px
	   between the parts. */
	.lc-gk-details {
		padding: 80px var(--lc-gk-gutter);
	}

	.lc-gk-details__heading {
		font-size: 46px;
		line-height: 1.3;
	}

	.lc-gk-details__cols {
		margin-top: 40px;
	}

	.lc-gk-details__icon {
		width: 80px;
		height: 80px;
	}

	.lc-gk-details__title {
		font-size: 20px;
		line-height: 1.3;
	}

	.lc-gk-details .lc-gk-btn {
		margin-top: 60px;
	}

	.lc-gk-lb__frame {
		padding: 64px 20px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .lc-gk {
		--lc-gk-nav: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .lc-gk {
		--lc-gk-nav: 0px;
	}
}

@media (max-width: 767px) {
	/* The banner matches Sunday Roast on a phone: it fills the viewport under
	   the header, holds its content to the top rather than the middle, and
	   centres everything. Its own artboard only draws the desktop state. */
	.lc-gk-hero {
		align-items: flex-start;
		min-height: calc(100vh - 130px);
		padding: 60px var(--lc-gk-gutter);
	}

	/* Anchored to the top so the subject survives the taller, narrower crop. */
	.lc-gk-hero__img {
		object-position: center top;
	}

	.lc-gk-hero__inner {
		padding: 0;
		text-align: center;
	}

	.lc-gk-hero__eyebrow {
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 3.4px;
	}

	.lc-gk-hero__title {
		margin-top: 10px;
	}

	.lc-gk-hero .lc-gk-btn {
		margin-top: 30px;
	}

	.lc-gk-hero__title {
		font-size: 42.67px;
		line-height: 1.2em;
	}

	.lc-gk-hero__text {
		margin-left: auto;
		margin-right: auto;
		font-size: 14px;
		line-height: 24px;
	}

	.lc-gk-menu__toggle {
		font-size: 16px;
		padding: 0 10px;
	}

	.lc-gk-menu__link {
		font-size: 13px;
	}

	/* The approved phone heads: 16px eyebrows, 42.67px titles. */
	.lc-gk-eyebrow {
		font-size: 16px;
		letter-spacing: 3.4px;
		text-indent: 3.4px;
	}

	.lc-gk-head__heading,
	#history .lc-gk-head__heading {
		margin-top: 0;
		font-size: 42.67px;
		line-height: 48px;
	}

	/* The approved phone gutters are 15px. */
	.lc-gk-body {
		padding-left: 15px;
		padding-right: 15px;
	}

	.lc-gk-card {
		margin-top: 20px;
	}

	/* The phone banner is its own export (690x280). */
	.lc-gk-card__banner {
		aspect-ratio: 690 / 280;
	}

	/* The approved build's phone card: a narrow rail - the word at 52px over a
	   38px strip of round photos - beside a single column of sections in the
	   order they were entered. */
	.lc-gk-card__body {
		grid-template-columns: 50.67px minmax(0, 1fr);
		column-gap: 15px;
		padding: 15px 10px 50px;
	}

	/* The phone drawing is its own tall export, contained in the card body and
	   held 83% of the way down, as the approved build sets it. */
	.lc-gk-card__backdrop,
	.lc-gk-card__backdrop picture {
		inset: 0;
		height: 100%;
	}

	.lc-gk-card__backdrop-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: 100% 83%;
	}

	.lc-gk-rail {
		padding-bottom: 30px;
	}

	/* Centred over the photo strip: the 52px word's rotated box sits 17.85px
	   left of its baseline on average. */
	.lc-gk-rail__word {
		top: 150px;
		left: calc(50% + 17.85px);
	}

	.lc-gk-rail__turn {
		top: -48.5px;
		font-size: 52px;
		line-height: 61.3px;
		letter-spacing: -0.97px;
		transform-origin: 0 48.5px;
	}

	.lc-gk-rail__photos {
		width: 38px;
		margin: 175px auto 0;
	}

	/* One column: the column wrappers step aside and the sections take the
	   order they were entered in. */
	.lc-gk-cols {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: 30px;
	}

	.lc-gk-col {
		display: contents;
	}

	.lc-gk-section {
		order: var(--lc-gk-order, 0);
	}

	.lc-gk-section + .lc-gk-section {
		margin-top: 0;
	}

	.lc-gk-section__title {
		font-size: 26.67px;
		letter-spacing: 1px;
	}

	.lc-gk-dishes {
		margin-top: 12px;
	}

	.lc-gk-dish + .lc-gk-dish {
		margin-top: 10.4px;
	}

	.lc-gk-dish__name {
		font-size: 13.33px;
		line-height: 1.3;
	}

	.lc-gk-dish__price {
		font-size: 15px;
		line-height: 1.3;
	}

	.lc-gk-dish__name {
		letter-spacing: 0.5px;
	}

	/* Kept in the menu column, label and sentence side by side. */
	.lc-gk-note {
		grid-column: 2;
		display: flex;
		column-gap: 15px;
		margin-top: 30px;
	}

	.lc-gk-note__label {
		flex: none;
		font-size: 13.33px;
	}

	.lc-gk-note__text {
		margin: 0;
		font-size: 13.33px;
		line-height: 1.3;
	}

	/* Photo over copy on a phone, whichever side it takes on desktop. */
	.lc-gk-story__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
		margin-top: 30px;
	}

	.lc-gk-story__row--flip .lc-gk-story__media {
		order: 0;
	}

	.lc-gk-story__row + .lc-gk-story__row {
		margin-top: 41px;
	}

	.lc-gk-story__text {
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0.23px;
	}

	.lc-gk-gallery {
		padding: 50px 30px 33px;
	}

	.lc-gk-gallery__heading {
		margin-top: 10px;
		font-size: 42.67px;
	}

	.lc-gk-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 20px;
	}

	.lc-gk-details {
		padding: 42px 15px;
	}

	.lc-gk-details__cols {
		margin-top: 15px;
		gap: 20px;
	}

	.lc-gk-details .lc-gk-btn {
		margin-top: 35px;
	}

	/* Sunday Roast's phone sizes: the section heading drops to the same
	   42.67/1.2 as the hero title, the column headings to 22.67, and the icons
	   to a third of their desktop size. */
	.lc-gk-details__heading {
		font-size: 42.67px;
		line-height: 1.2em;
	}

	.lc-gk-details__icon {
		width: 33px;
		height: 33px;
	}

	.lc-gk-details__title {
		font-size: 22.67px;
		line-height: 1.2em;
	}

	.lc-gk-details__cols {
		grid-template-columns: 1fr;
	}

	/* Sunday Roast's phone button is 142x42, which fits its short "Book a
	   Table". This page's label is longer, so the width grows to whatever keeps
	   it on one line and 142px is the floor rather than the size - a label
	   changed later still cannot wrap. */
	.lc-gk-btn {
		width: auto;
		min-width: 142px;
		max-width: 100%;
		height: 42px;
		padding: 14px 20px;
		font-size: 12px;
		white-space: nowrap;
	}

	.lc-gk-lb__prev {
		left: 8px;
	}

	.lc-gk-lb__next {
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-gk-btn,
	.lc-gk-menu__link,
	.lc-gk-menu__text::after,
	.lc-gk-gallery__btn::after,
	.lc-gk-lb__btn,
	.lc-gk-dish__name::after,
	.lc-gk-link__text::after {
		transition: none;
	}
}

/* Desktop offsets off artboard 17, which shares Private Dining's hero, strip,
   gallery band and details geometry: hero eyebrow +202, title +277, button top
   +403 from the hero's top; the gallery heading baseline 207px and its grid
   303px below the band's top, the band 1063 tall. */
@media (min-width: 1024.02px) {
	/* The menu lands with the band's padding above its eyebrow, like the other
	   targets land with theirs. */
	#menu {
		scroll-margin-top: calc(var(--lc-gk-nav) + var(--lc-gk-strip) + 99.85px);
	}

	.lc-gk-hero__eyebrow,
	.lc-gk-hero__text {
		margin-left: 5px;
	}

	.lc-gk-hero__title {
		margin-top: 2px;
		margin-left: 1px;
	}

	.lc-gk-hero__text {
		margin-top: 18px;
	}

	/* The artboard strokes the strip labels and the picture frames #c6aa57;
	   #cfaf58 is kept for eyebrows and the buttons. */
	.lc-gk-menu__link,
	.lc-gk-menu__link:hover,
	.lc-gk-menu__link:focus,
	.lc-gk-menu__link:focus-visible,
	.lc-gk-menu__link:active,
	.lc-gk-menu__link[aria-current="true"] {
		color: #c6aa57;
	}

	/* The artboard's castle drawing is hard-light blended at 50%, which washes
	   out the export's grey shading; this brings its tone to the render's. */
	.lc-gk-card__backdrop-img {
		filter: brightness(1.04);
	}

	.lc-gk-gallery__cell::after {
		border-color: #c6aa57;
	}

	.lc-gk-gallery__heading {
		margin-top: 12px;
		line-height: 80px;
	}

	.lc-gk-gallery__grid {
		margin-top: 78px;
	}

	/* This artboard sets the heading's first baseline 167px under the gallery
	   band, 12.6px lower than Le Carb Café's, and the icons 96px under its
	   second line. */
	.lc-gk-details {
		padding-top: 112.59px;
		padding-bottom: 120px;
	}

	.lc-gk-details__cols {
		margin-top: 84.6px;
	}

	.lc-gk-details__title {
		margin-top: 11px;
	}

	.lc-gk-details .lc-gk-btn {
		margin-top: 77px;
	}

	/* The artboard's three detail columns are not evenly spaced: their centres
	   sit at 674 / 961 / 1239. */
	.lc-gk-details__col {
		position: relative;
	}

	.lc-gk-details__col:nth-child(1) {
		left: -3.6px;
	}

	.lc-gk-details__col:nth-child(2) {
		left: 1.1px;
	}

	.lc-gk-details__col:nth-child(3) {
		left: -3.2px;
	}
}

/* Six strip labels need about 1076px; just above the accordion breakpoint the
   gaps close up so MORE DINING does not wrap onto a second row. */
@media (min-width: 1024.02px) and (max-width: 1100px) {
	.lc-gk-menu__item {
		margin: 0 18px;
	}

	.lc-gk-menu__item + .lc-gk-menu__item::before {
		margin: 0 18px 0 -19px;
	}
}

/* Popup breakpoints, carried over with it from Sunday Roast. */
@media (max-width: 1024px) {
	/* The artboard only draws the desktop popup. Below 1025px the card keeps its
	   two columns but lets the photo cell shrink, as the site's built menu popup
	   does. */
	.lc-gk-popup {
		width: fit-content;
		padding: 40px 30px;
	}

	.lc-gk-popup__body {
		grid-template-columns: minmax(0, 420px) minmax(0, 334px);
		column-gap: 30px;
	}

	.lc-gk-popup__media {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 767px) {
	/* On a phone the photo stacks over the text in a 345px card and the close
	   disc centres over the top edge - the site's built menu popup on a phone. */
	.lc-gk-popup {
		width: 95%;
		max-width: 345px;
		padding: 30px 20px 20px;
	}

	.lc-gk-popup__body,
	.lc-gk-popup--text-only .lc-gk-popup__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 15px;
	}

	.lc-gk-popup__content {
		padding-top: 0;
	}

	.lc-gk-popup__close {
		top: -16px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

/* A phone on its side: the stacked popup would be taller than the screen, so it
   keeps two columns and scrolls inside if it still does not fit. */
@media (max-width: 767px) and (max-height: 500px) {
	.lc-gk-popup {
		width: calc(100vw - 40px);
		max-width: 640px;
		padding: 24px;
	}

	.lc-gk-popup__body,
	.lc-gk-popup--text-only .lc-gk-popup__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 20px;
		max-height: calc(100dvh - 88px);
		overflow-y: auto;
	}

	.lc-gk-popup.lc-gk-popup--text-only {
		width: fit-content;
	}

	.lc-gk-popup--text-only .lc-gk-popup__body {
		grid-template-columns: minmax(0, 334px);
	}

	.lc-gk-popup__close {
		top: -10px;
		right: -12px;
		left: auto;
		margin: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-gk-popup[open],
	.lc-gk-popup[open]::backdrop {
		animation: none;
	}
}