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

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

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

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

	background: #fff;
	color: var(--lc-cc-ink);
	font-family: var(--lc-cc-sans);
}

.lc-cc *,
.lc-cc *::before,
.lc-cc *::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-cc [id] {
	scroll-margin-top: calc(var(--lc-cc-nav) + var(--lc-cc-strip));
}

.lc-cc-eyebrow {
	margin: 0;
	font-family: var(--lc-cc-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-cc-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-cc-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-cc-ink);
	color: var(--lc-cc-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-cc-btn::after {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px solid var(--lc-cc-gold);
	pointer-events: none;
}

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

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

.lc-cc-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-cc-link__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--lc-cc-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

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

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

/* The scrim that lifts the lower third so the button and body copy hold up. */
.lc-cc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(47, 53, 40, 0) 57.35%, rgba(47, 53, 40, 1) 100%);
	opacity: 0.497;
	pointer-events: none;
}

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

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

.lc-cc-hero__title {
	margin: 4px 0 0;
	font-family: var(--lc-cc-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-cc-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-cc-hero .lc-cc-btn {
	margin-top: 40px;
}

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

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

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

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

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

.lc-cc-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-cc-menu__item + .lc-cc-menu__item::before {
	content: "";
	width: 1px;
	height: 19px;
	margin: 0 44px 0 -45px;
	background: var(--lc-cc-divider);
	flex: 0 0 1px;
}

.lc-cc-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-cc-gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lc-cc-menu__link:hover,
.lc-cc-menu__link:focus-visible,
.lc-cc-menu__link[aria-current="true"] {
	color: #fff;
}

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

/* One cream band runs under the menu and the story. Its padding puts the menu
   eyebrow's baseline 114px under the strip and ends the band 120px below the
   story photo. */
.lc-cc-body {
	background: var(--lc-cc-cream);
	padding: 99.85px var(--lc-cc-gutter) 120px;
}

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

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

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

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

/* White card under a 1300x400 banner, with the gold hairline held inside its
   edge. The hairline is an inset shadow so the banner covers it, as the
   artboard's photo covers its frame rect. */
.lc-cc-card {
	margin: 59px 0 0;
	background: #fff;
	box-shadow: inset 0 0 0 1px #c6aa57;
}

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

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

/* 80px in from both sides, so two 530px columns on an 80px gutter. The top
   padding lands the first section title's baseline 115px under the banner;
   the bottom leaves 110.5px under the note. */
.lc-cc-card__body {
	padding: 79.45px 80px 110.5px;
}

.lc-cc-section + .lc-cc-section {
	margin-top: 51.9px;
}

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

/* Items run left to right, row by row, so both columns share each row's
   baseline as the artboard sets them: 119px from one name to the next. */
.lc-cc-dishes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 80px;
	row-gap: 32.6px;
	margin: 39.7px 0 0;
	padding: 0;
	list-style: none;
}

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

/* A menu item: name over description. Plain text - the client confirmed the
   café menu has no pop-up, so nothing here is clickable. */
.lc-cc-dish__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.lc-cc-dish__name {
	font-family: var(--lc-cc-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
}

/* First line's baseline 38px under the name's.
   XD sets Work Sans about 0.35% wider than browsers do (2px over a 600px
   line), enough to move line breaks, so this page's running text carries
   0.027px more tracking than the artboard's 0.232px to wrap where it does. */
.lc-cc-dish__text {
	display: block;
	width: 100%;
	margin: 16.4px 0 0;
	font-family: var(--lc-cc-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.259px;
	color: var(--lc-cc-ink);
}

/* With a photo, the last section keeps to the left column and the photo takes
   the right. It reaches up past the section's top into the row above, whose
   right-hand cell is empty in the artboard, so it is positioned rather than
   left to size the row. */
.lc-cc-sections--photo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 80px;
}

.lc-cc-sections--photo .lc-cc-section {
	grid-column: 1 / -1;
	min-width: 0;
}

.lc-cc-sections--photo .lc-cc-section--last {
	grid-column: 1;
}

.lc-cc-sections--photo .lc-cc-section--last .lc-cc-dishes {
	grid-template-columns: minmax(0, 1fr);
}

.lc-cc-sections__photo {
	position: relative;
	grid-column: 2;
	min-width: 0;
}

/* The artboard's own transform: a 486px square whose top-left corner sits at
   (1042.36, 2686.25) - 1.6px in from the column's right edge, its unturned
   foot 19.7px below the section's last line - turned 5deg clockwise about that
   corner. The tilt carries its left edge back to the column's start and drops
   its lowest corner 60px below the last line. */
.lc-cc-sections__photo-img {
	position: absolute;
	right: 1.6px;
	bottom: -19.7px;
	width: min(486px, 100%);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transform: rotate(5deg);
	transform-origin: 0 0;
}

.lc-cc-note {
	margin-top: 62.3px;
}

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

.lc-cc-note__text {
	margin: 5.67px 0 0;
	font-family: var(--lc-cc-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.259px;
	color: var(--lc-cc-ink);
}

/* ------------------------------------------------------------------ story */

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

/* Photo left, copy right, 610px each on an 80px gutter. */
.lc-cc-story__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 80px;
	align-items: start;
	margin-top: 59px;
}

.lc-cc-story__media {
	position: relative;
	aspect-ratio: 610 / 550;
	background: var(--lc-cc-placeholder);
	overflow: hidden;
}

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

/* The gold hairline, 15px inside the photo. */
.lc-cc-story__media::after {
	content: "";
	position: absolute;
	inset: 15px;
	border: 1px solid #c6aa57;
	pointer-events: none;
}

/* The copy's first baseline sits 23px below the photo's top, and the artboard
   parts its paragraphs with one empty line. */
.lc-cc-story__text {
	min-width: 0;
	padding-top: 6.52px;
	font-family: var(--lc-cc-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.259px;
	color: var(--lc-cc-ink);
}

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

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

/* ---------------------------------------------------------------- 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-cc-gallery {
	position: relative;
	padding: 115px var(--lc-cc-gutter) 180px;
	background-color: var(--lc-cc-ink);
	background-image: linear-gradient(180deg, var(--lc-cc-sage) 0%, var(--lc-cc-ink) 100%);
	overflow: hidden;
}

.lc-cc-gallery::before,
.lc-cc-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-cc-gallery::before {
	background-image: url("carpet.webp");
	background-repeat: repeat;
	background-size: 1491px 1055px;
	background-position: center top;
	opacity: 0.1;
}

.lc-cc-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-cc-gallery__frame {
	position: absolute;
	z-index: 2;
	inset: 15px;
	border: 1px solid var(--lc-cc-gold);
	pointer-events: none;
}

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

.lc-cc-gallery__heading {
	margin: 5px 0 0;
	font-family: var(--lc-cc-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-cc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 87px 0 0;
	padding: 0;
	list-style: none;
}

.lc-cc-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-cc-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-cc-gallery__btn:hover,
.lc-cc-gallery__btn:active {
	background: none;
	color: inherit;
}

.lc-cc-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-cc-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-cc-gallery__btn:hover::after,
.lc-cc-gallery__btn:focus-visible::after {
	opacity: 1;
}

.lc-cc-gallery__btn:focus,
.lc-cc-gallery__btn:focus-visible {
	background: none;
	outline: 2px solid var(--lc-cc-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-cc-gallery__cell::after {
	content: "";
	position: absolute;
	inset: 9px 10px 11px;
	border: 1px solid var(--lc-cc-gold);
	pointer-events: none;
	z-index: 1;
}

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

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

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

.lc-cc-details__heading {
	margin: 0;
	font-family: var(--lc-cc-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-cc-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-cc-details__heading i {
	font-style: italic;
	font-weight: 100;
}

.lc-cc-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-cc-details__col {
	text-align: center;
}

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

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

.lc-cc-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-cc-details__text--link {
	display: inline-block;
	color: var(--lc-cc-ink);
	text-decoration: none;
	border: 0;
}

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

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

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

.lc-cc-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-cc-lb::backdrop {
	background: rgba(13, 26, 19, 0.9);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	/* Below desktop the strip becomes the accordion Sunday Roast uses: an ink
	   bar reading NAVIGATION that opens a cream panel of links. The band's own
	   65px floor and sticky behaviour go with it. */
	.lc-cc-menu {
		position: static;
		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-cc-menu__wrap[open] {
		display: flex;
		flex-direction: column;
	}

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

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

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

	.lc-cc-menu__wrap[open] .lc-cc-menu__toggle-close {
		position: relative;
		display: block;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #fff;
	}

	.lc-cc-menu__wrap[open] .lc-cc-menu__toggle-close::before,
	.lc-cc-menu__wrap[open] .lc-cc-menu__toggle-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 11px;
		height: 1.5px;
		margin: -0.75px 0 0 -5.5px;
		background: var(--lc-cc-gold);
	}

	.lc-cc-menu__wrap[open] .lc-cc-menu__toggle-close::before {
		transform: rotate(45deg);
	}

	.lc-cc-menu__wrap[open] .lc-cc-menu__toggle-close::after {
		transform: rotate(-45deg);
	}

	.lc-cc-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px;
		background: var(--lc-cc-ink);
		color: #fff;
		font-family: var(--lc-cc-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-cc-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-cc-cream);
	}

	.lc-cc-menu__item {
		margin: 0;
		width: 100%;
		justify-content: center;
	}

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

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

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

	.lc-cc-hero {
		min-height: 520px;
	}

	.lc-cc-hero__inner {
		padding: 120px 0 110px;
	}

	.lc-cc-hero__title {
		font-size: 46px;
		line-height: 1.2;
	}

	.lc-cc-hero__text {
		font-size: 16px;
		line-height: 22px;
		margin-top: 14px;
	}

	.lc-cc-body {
		padding: 72px var(--lc-cc-gutter) 90px;
	}

	.lc-cc-head__heading {
		font-size: 40px;
		line-height: 1.25;
		margin-top: 20px;
	}

	.lc-cc-card {
		margin-top: 54px;
	}

	.lc-cc-card__body {
		padding: 50px 40px 60px;
	}

	.lc-cc-section__title {
		font-size: 32px;
		line-height: 1.2;
	}

	.lc-cc-dishes {
		column-gap: 40px;
		row-gap: 28px;
		margin-top: 30px;
	}

	.lc-cc-section + .lc-cc-section {
		margin-top: 44px;
	}

	.lc-cc-sections--photo {
		column-gap: 40px;
	}

	/* Clear of the tilted photo's lowest corner, which drops 19.7px plus 8.3%
	   of its width below the last line. */
	.lc-cc-note {
		margin-top: 64px;
	}

	.lc-cc-story {
		margin-top: 72px;
	}

	.lc-cc-story__row {
		column-gap: 40px;
		margin-top: 54px;
	}

	.lc-cc-story__text {
		padding-top: 0;
	}

	.lc-cc-gallery {
		padding: 72px var(--lc-cc-gutter) 96px;
	}

	.lc-cc-gallery__heading {
		font-size: 40px;
		line-height: 1.25;
	}

	/* Two across on tablet and phone, as the built gallery does - not one. */
	.lc-cc-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-top: 56px;
	}

	.lc-cc-details {
		padding: 72px var(--lc-cc-gutter) 90px;
	}

	.lc-cc-details__heading {
		font-size: 40px;
		line-height: 1.25;
	}

	.lc-cc-details__cols {
		margin-top: 56px;
	}

	.lc-cc-details .lc-cc-btn {
		margin-top: 56px;
	}

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

@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-cc-hero {
		align-items: flex-start;
		min-height: calc(100vh - 130px);
		padding: 60px var(--lc-cc-gutter);
	}

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

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

	.lc-cc-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 3.4px;
	}

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

	.lc-cc-hero__text {
		margin-left: auto;
		margin-right: auto;
	}

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

	.lc-cc-eyebrow {
		font-size: 12px;
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}

	.lc-cc-head__heading {
		font-size: 30px;
	}

	/* A 1300x400 strip would be a sliver on a phone. */
	.lc-cc-card__banner {
		aspect-ratio: 16 / 9;
	}

	.lc-cc-card__body {
		padding: 40px 20px;
	}

	.lc-cc-section__title {
		font-size: 26px;
		letter-spacing: 1.3px;
		text-align: center;
	}

	/* One column, each item centred and stacked as Sunday Roast's are on a
	   phone. */
	.lc-cc-dishes,
	.lc-cc-sections--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-cc-dishes {
		row-gap: 25px;
		margin-top: 25px;
	}

	.lc-cc-dish__row {
		align-items: center;
		text-align: center;
	}

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

	.lc-cc-dish__text {
		max-width: 340px;
		margin: 14px auto 0;
	}

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

	/* The photo drops under the last section instead of beside it. */
	.lc-cc-sections__photo {
		grid-column: 1;
		margin-top: 30px;
	}

	/* Same 5deg tilt, turned about its centre so it stays centred. */
	.lc-cc-sections__photo-img {
		position: static;
		display: block;
		width: min(320px, 100%);
		margin: 0 auto;
		transform-origin: 50% 50%;
	}

	.lc-cc-note {
		margin-top: 40px;
		text-align: center;
	}

	.lc-cc-note__label {
		font-size: 13.33px;
	}

	.lc-cc-story__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
		margin-top: 40px;
	}

	.lc-cc-gallery__heading {
		font-size: 30px;
	}

	/* 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-cc-details__heading {
		font-size: 42.67px;
		line-height: 1.2em;
	}

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

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

	.lc-cc-details__cols {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* 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-cc-btn {
		width: auto;
		min-width: 142px;
		max-width: 100%;
		height: 42px;
		padding: 14px 20px;
		font-size: 12px;
		white-space: nowrap;
	}

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

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

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

/* Desktop offsets off artboard 21, 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-cc-nav) + var(--lc-cc-strip) + 99.85px);
	}

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

	/* The artboard sets every item in a two-line slot, so a one-line item
	   (Affogato) still keeps the 119px step to the next. */
	.lc-cc-dish__row {
		min-height: 86.4px;
	}

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

	.lc-cc-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-cc-menu__link {
		color: #c6aa57;
	}

	.lc-cc-menu__link:hover,
	.lc-cc-menu__link:focus-visible,
	.lc-cc-menu__link[aria-current="true"] {
		color: #fff;
	}

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

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

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

	.lc-cc-details {
		padding-bottom: 120px;
	}

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

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

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

	.lc-cc-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-cc-menu__item {
		margin: 0 18px;
	}

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