/**
 * Sunday Roast - hero, sticky section menu, the roast menu, the story, gallery,
 * the closing details block and the dish popup.
 *
 * This page was signed off before it was rebuilt, so every number here was read
 * back out of the Elementor build it replaces rather than off the artboard. The
 * shared pieces - the gold underline that wipes in under a link, the inset gold
 * frame on images, the two-ring button - are the site's existing conventions,
 * restated locally so this page no longer depends on the Customizer CSS that
 * does not travel with the theme.
 *
 * Breakpoints match Elementor's: 1024 for tablet, 767 for phone.
 */

.lc-sr {
	--lc-sr-ink: #2f3528;
	--lc-sr-text: #0d1a13;
	--lc-sr-cream: #f8f5ed;
	--lc-sr-gold: #cfaf58;
	--lc-sr-sage: #74825f;
	--lc-sr-note: #980000;
	--lc-sr-accent: #cc5500;
	--lc-sr-body: #333;

	/* The site's own nav bar is sticky and 57px tall; our strip hangs below it. */
	--lc-sr-nav: 57px;
	--lc-sr-strip: 65px;

	--lc-sr-serif: "ivypresto-display", sans-serif;
	--lc-sr-sans: "Work Sans", sans-serif;

	/* <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. Every section paints its own
	   background, and custom properties still inherit through it. */
	display: contents;
}

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

/* Anchor targets clear both bars. */
.lc-sr [id] {
	scroll-margin-top: calc(var(--lc-sr-nav) + var(--lc-sr-strip));
}

/* No blanket paragraph reset here: it would outrank the single-class rules
   below that set the few margins this page actually wants. */

/* The gold rule that wipes in under a link on hover. Site-wide convention. */
.lc-sr-menu__text,
.lc-sr-dish__name,
.lc-sr-details__link .lc-sr-details__text {
	position: relative;
}

.lc-sr-menu__text {
	display: block;
}

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

/* Hover only, as approved (keyboard focus shows the browser ring instead), and
   on a dish only while the name itself is under the pointer - the approved
   row's link wrapped just the title. */
.lc-sr-menu__link:hover .lc-sr-menu__text::after,
.lc-sr-dish__name:hover::after,
.lc-sr-details__slot:hover .lc-sr-details__text::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.lc-sr-btn,
	.lc-sr-menu__link,
	.lc-sr-gallery__button::after,
	.lc-sr-menu__text::after,
	.lc-sr-dish__name::after,
	.lc-sr-details__link .lc-sr-details__text::after {
		transition: none;
	}
}

/* Entrance animations, as the approved build's Elementor motion effects: 1.25s,
   fadeInUp on the eyebrows and fadeIn on headings, copy and buttons, started
   when each element scrolls into view. */
html.lc-sr-js .lc-sr-anim {
	visibility: hidden;
}

html.lc-sr-js .lc-sr-anim.is-in {
	visibility: visible;
	animation-duration: 1.25s;
	animation-timing-function: ease;
}

html.lc-sr-js .lc-sr-anim.is-in[data-lc-sr-anim="fadeIn"] {
	animation-name: lc-sr-fade-in;
}

html.lc-sr-js .lc-sr-anim.is-in[data-lc-sr-anim="fadeInUp"] {
	animation-name: lc-sr-fade-in-up;
}

@keyframes lc-sr-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes lc-sr-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.lc-sr-js .lc-sr-anim {
		visibility: visible;
	}

	html.lc-sr-js .lc-sr-anim.is-in {
		animation: none;
	}
}

/* Shared eyebrow / section heading. */
.lc-sr-eyebrow {
	margin: 0;
	font-family: var(--lc-sr-sans);
	font-size: 15px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: 5.78px;
	text-transform: uppercase;
	color: var(--lc-sr-gold);
	text-align: center;
}

.lc-sr-heading {
	margin: 0;
	font-family: var(--lc-sr-serif);
	font-size: 54px;
	line-height: 80px;
	font-weight: 500;
	letter-spacing: 0.54px;
	text-transform: capitalize;
	color: var(--lc-sr-text);
	text-align: center;
}

/* The two-ring button: gold hairline inside, an ink ring outside. On hover the
   fill and the ring both go orange - the approved build's Elementor button
   hover (background #CC5500, ring #CC5500, border stays gold). */
.lc-sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 177px;
	padding: 18px 20px;
	border: 1px solid var(--lc-sr-gold);
	border-radius: 0;
	background: var(--lc-sr-ink);
	box-shadow: 0 0 0 2px var(--lc-sr-ink);
	color: #fff;
	font-family: var(--lc-sr-sans);
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.lc-sr-btn:hover,
.lc-sr-btn:focus,
.lc-sr-btn:focus-visible,
.lc-sr-btn:active {
	background: var(--lc-sr-accent);
	border-color: var(--lc-sr-gold);
	box-shadow: 0 0 0 2px var(--lc-sr-accent);
	color: #fff;
	text-decoration: none;
}

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

.lc-sr-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 188px 20px 191px 50px;
	background: #74825f;
	overflow: hidden;
}

.lc-sr-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.lc-sr-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1319px;
}

.lc-sr-hero__eyebrow {
	font-weight: 600;
	text-align: left;
	text-shadow: 0 0 58px rgba(0, 0, 0, 0.89);
}

.lc-sr-hero__title {
	margin: 0;
	font-family: var(--lc-sr-serif);
	font-size: 60px;
	line-height: 89px;
	font-weight: 500;
	letter-spacing: 1.56px;
	text-transform: capitalize;
	color: #fff;
	text-align: left;
	text-shadow: 0 0 100px rgba(0, 0, 0, 0.61);
}

.lc-sr-hero__text {
	max-width: 533px;
	margin: 20px 0 0;
	font-family: var(--lc-sr-sans);
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.02px;
	color: #fff;
}

.lc-sr-hero__cta {
	margin-top: 42px;
}

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

.lc-sr-menu {
	position: sticky;
	top: var(--lc-sr-nav);
	z-index: 99;
	background: var(--lc-sr-ink);
}

.lc-sr-menu__wrap {
	display: block;
}

/* The toggle only exists below 1025px. */
.lc-sr-menu__toggle {
	display: none;
}

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

.lc-sr-menu__item {
	position: relative;
	display: flex;
	margin: 0 44px;
}

/* The approved divider is in flow and 1px wide, so the gap is 89px: 44px, the
   hairline, 45px. */
.lc-sr-menu__item:not(:last-child) {
	margin-right: 45px;
}

.lc-sr-menu__item + .lc-sr-menu__item::before {
	content: "";
	position: absolute;
	left: -45px;
	top: 50%;
	width: 1px;
	height: 19px;
	background: rgba(255, 255, 255, 0.46);
	transform: translateY(-50%);
}

.lc-sr-menu__link {
	display: flex;
	font-family: var(--lc-sr-sans);
	font-size: 15px;
	line-height: 19px;
	font-weight: 600;
	letter-spacing: 0.68px;
	text-transform: uppercase;
	color: var(--lc-sr-gold);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s;
}

/* The parent theme turns any hovered link #336 at (0,1,1), which beats a single
   class - so every state is claimed back. The approved strip keeps its colour;
   its only hover is the underline. */
.lc-sr-menu__link:hover,
.lc-sr-menu__link:focus,
.lc-sr-menu__link:focus-visible,
.lc-sr-menu__link:active {
	color: var(--lc-sr-gold);
	text-decoration: none;
}

/* --------------------------------------------------------- roast menu ---- */

.lc-sr-roast {
	padding: 100px 20px;
	background: var(--lc-sr-cream);
}

.lc-sr-roast__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 1300px;
	margin: 0 auto;
	padding-bottom: 60px;
}

.lc-sr-roast__card {
	display: flex;
	max-width: 1300px;
	margin: 0 auto;
	background: #fff;
}

.lc-sr-roast__media {
	position: relative;
	/* Elementor's own sizing: both columns ask for 100% and shrink in
	   proportion, which with the body's 120px of padding gives 619/681 on the
	   1300 card and the approved split at every narrower width. */
	flex: 0 1 100%;
	min-width: 0;
	min-height: 780px;
	overflow: hidden;
}

.lc-sr-roast__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

/* min-width:0 or a long dish description would set the column's floor and push
   the photo out of its share of the card. */
.lc-sr-roast__body {
	display: flex;
	flex: 0 1 100%;
	flex-direction: column;
	gap: 35px;
	min-width: 0;
	padding: 68px 45px 45px 75px;
}

.lc-sr-dishes {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-sr-dish__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	border-radius: 0;
	color: inherit;
	/* Buttons inherit nowrap from the theme; the description has to wrap. */
	white-space: normal;
	cursor: pointer;
	appearance: none;
	transition: none;
}

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


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

.lc-sr-dish__price {
	flex: 0 0 auto;
	font-family: var(--lc-sr-sans);
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	color: var(--lc-sr-ink);
	white-space: nowrap;
}

.lc-sr-dish__text {
	width: 100%;
	margin: 8.7px 0 0;
	font-family: var(--lc-sr-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 400;
	letter-spacing: 0.23px;
	color: var(--lc-sr-body);
}

.lc-sr-note {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

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

.lc-sr-note__text {
	max-width: 478px;
	margin: 0;
	font-family: var(--lc-sr-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 400;
	letter-spacing: 0.23px;
	color: var(--lc-sr-ink);
}

/* The Book a Table button between the menu card and the story, on the
   section's own 60px rhythm (the gap under the heading block). */
.lc-sr-roast__cta {
	display: flex;
	justify-content: center;
	max-width: 1300px;
	margin: 60px auto 0;
}

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

/* 20px between the heading block and the row - the only section that keeps the
   default container gap. */
.lc-sr-story {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 20px 100px;
	background: var(--lc-sr-cream);
}

.lc-sr-story__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding-bottom: 60px;
}

.lc-sr-story__row {
	display: flex;
	gap: 73px;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

.lc-sr-story__media {
	flex: 1 1 0;
	min-width: 0;
}

.lc-sr-story__image {
	display: block;
	width: 100%;
	height: auto;
	/* The gold hairline sits inside the photo rather than around it. */
	outline: 1px solid #a2975d;
	outline-offset: -10px;
}

/* The column is half the row; the copy inside it stops 4px short of that. */
.lc-sr-story__text {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--lc-sr-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 400;
	letter-spacing: 0.23px;
	color: var(--lc-sr-ink);
}

.lc-sr-story__text p {
	max-width: 610px;
	margin: 0 0 14.4px;
}

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

.lc-sr-gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 114px 20px 141px;
	background-color: var(--lc-sr-ink);
	background-image: url("carpet.webp");
	background-repeat: repeat;
	background-attachment: fixed;
	background-size: auto;
}

/* The carpet reads through the top of a sage-to-ink wash. */
.lc-sr-gallery::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(116, 130, 95, 0.88) 0%, var(--lc-sr-ink) 100%);
	background-attachment: fixed;
	background-position: center center;
	pointer-events: none;
}

/* The section's own gold frame, held off the edge. */
.lc-sr-gallery::after {
	content: "";
	position: absolute;
	inset: 14px;
	z-index: 2;
	border: 1px solid rgba(194, 167, 94, 0.6);
	box-shadow: 0 0 8px rgba(194, 167, 94, 0.15);
	pointer-events: none;
}

.lc-sr-gallery__head,
.lc-sr-gallery__grid {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1300px;
}

.lc-sr-gallery__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lc-sr-gallery__eyebrow {
	margin: 0 0 20px 14px;
	font-weight: 600;
}

.lc-sr-gallery__heading {
	max-width: 760px;
	font-size: 54px;
	line-height: 1.2;
	letter-spacing: 0.32px;
	color: #fff;
}

.lc-sr-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 80px 0 0;
	padding: 0;
	list-style: none;
}

.lc-sr-gallery__item {
	position: relative;
}

.lc-sr-gallery__button {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	/* The theme's button colour is magenta; it would show as a broken image's
	   alt text. */
	color: inherit;
	cursor: pointer;
	appearance: none;
	overflow: hidden;
	transition: none;
}

.lc-sr-gallery__button:hover,
.lc-sr-gallery__button:focus,
.lc-sr-gallery__button:focus-visible,
.lc-sr-gallery__button:active {
	background: none;
	color: inherit;
}

.lc-sr-gallery__button:focus:not(:focus-visible) {
	outline: none;
}

.lc-sr-gallery__button:focus-visible {
	outline: 2px solid var(--lc-sr-gold);
	outline-offset: -2px;
}

/* The approved gallery fades a black scrim in on hover (the widget's overlay,
   rgba(0,0,0,.5) over 800ms). The picture itself does not move, and the gold
   frame stays on top of it. */
.lc-sr-gallery__button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.lc-sr-gallery__button:hover::after,
.lc-sr-gallery__button:focus-visible::after {
	opacity: 1;
}

/* The gold hairline inside each frame. */
.lc-sr-gallery__frame {
	position: absolute;
	inset: 10px;
	z-index: 6;
	border: 1px solid rgba(194, 167, 94, 0.88);
	pointer-events: none;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms ease;
}

.lc-sr-gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

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

.lc-sr-details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	padding: 100px 20px 122px;
	background: #fff;
}

.lc-sr-details__heading {
	width: 100%;
	max-width: 850px;
	margin: 0;
	font-family: var(--lc-sr-serif);
	font-size: 54px;
	line-height: 65px;
	font-weight: 500;
	letter-spacing: 0.54px;
	text-transform: capitalize;
	color: var(--lc-sr-text);
	text-align: center;
}

.lc-sr-details__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
	max-width: 850px;
}

.lc-sr-details__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.lc-sr-details__icon {
	width: 100%;
	max-width: 102px;
	height: auto;
}

.lc-sr-details__title {
	margin: 0;
	font-family: var(--lc-sr-serif);
	font-size: 28px;
	line-height: 41px;
	font-weight: 500;
	letter-spacing: 0.17px;
	text-transform: capitalize;
	color: #000;
	text-align: center;
}

.lc-sr-details__text {
	margin: 0;
	font-family: var(--lc-sr-sans);
	font-size: 14.5px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: 0.06px;
	color: #000;
	text-align: center;
}

/* The approved button widget: a full-width 24px box pulled up 6px, with the
   17px text 4.8px down inside it. */
.lc-sr-details__slot {
	align-self: stretch;
	height: 24px;
	margin-top: -6px;
	padding-top: 4.8px;
	text-align: center;
}

.lc-sr-details__link {
	display: inline-block;
	vertical-align: top;
	line-height: 17px;
	color: inherit;
	text-decoration: none;
}

.lc-sr-details__link:hover,
.lc-sr-details__link:focus,
.lc-sr-details__link:focus-visible,
.lc-sr-details__link:active {
	color: inherit;
	text-decoration: none;
}

.lc-sr-details__link .lc-sr-details__text {
	display: block;
}

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

/* The dish popup, drawn to XD artboard 20 "Sunday Roast (popup food)": a cream
   890x395 card with 5px corners over a 70.8% black blanket. Photo left in a
   420x280 cell carrying a gold hairline; title, description and price stacked
   in a 334px column 45px to its right. The dialog is appended to <body>,
   outside .lc-sr, so it carries its own tokens. */
.lc-sr-popup {
	--lc-sr-ink: #2f3528;
	--lc-sr-gold: #cfaf58;
	--lc-sr-serif: "ivypresto-display", serif;
	--lc-sr-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-sr-ink);
	/* The close disc overhangs the top-right corner. */
	overflow: visible;
}

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

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

/* The artboard's overlay transition: a 1s ease-in-out dissolve. */
.lc-sr-popup[open],
.lc-sr-popup[open]::backdrop {
	animation: lc-sr-dissolve 1s ease-in-out;
}

@keyframes lc-sr-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-sr-popup:focus,
.lc-sr-popup:focus-visible {
	outline: none;
}

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

.lc-sr-popup--text-only .lc-sr-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-sr-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-sr-popup__close:hover,
.lc-sr-popup__close:focus,
.lc-sr-popup__close:focus-visible,
.lc-sr-popup__close:active {
	background: #fff;
	color: #cfaf58;
	text-decoration: none;
}

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

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

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

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

.lc-sr-popup--text-only .lc-sr-popup__body {
	grid-template-columns: 334px;
}

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

.lc-sr-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-sr-popup__frame {
	position: absolute;
	inset: 9px 10px 11px;
	border: 1px solid #c6aa57;
	pointer-events: none;
}

/* Centred against the photo, then nudged 3.9px down: the artboard sets the text
   stack 50.2px below the photo's top rather than on its exact centre. */
.lc-sr-popup__content {
	min-width: 0;
	padding-top: 7.8px;
	text-align: left;
}

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

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

.lc-sr-popup__price {
	margin: 27.5px 0 0;
	font-family: var(--lc-sr-sans);
	font-size: 14.5px;
	line-height: 23px;
	font-weight: 700;
	letter-spacing: 0.232px;
	color: var(--lc-sr-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-sr-popup-open {
	overflow: hidden;
	padding-right: var(--lc-sr-sbw, 0px);
}

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

/* Ported verbatim from Private Dining's .lc-pd-lb so the two galleries open the
   same viewer: full screen, one slideshow across every image, prev/next, a
   counter, arrow keys and Escape. Like PD's, the dialog sits on <body>, outside
   .lc-sr, so the --lc-sr-* references below do not resolve there either - the
   two render identically. */
.lc-sr-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-sr-lb::backdrop {
	background: rgba(13, 26, 19, 0.9);
}

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

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

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

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

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

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

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

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

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

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

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

	.lc-sr-lb__btn {
		transition: none;
	}
}

/* ======================================================= tablet <=1024 ==== */

@media (max-width: 1024px) {

	.lc-sr {
		/* The site nav is not sticky here, so the strip sits at the top. */
		--lc-sr-nav: 0px;
		--lc-sr-strip: 44px;
	}

	.lc-sr-hero {
		padding: 100px 20px;
	}

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

	.lc-sr-hero__title {
		font-size: 50px;
		line-height: 1.2em;
	}

	.lc-sr-hero__text {
		font-size: 16px;
	}

	.lc-sr-hero__cta {
		margin-top: 20px;
	}

	/* The strip becomes an accordion whose handle sits below the panel. */
	.lc-sr-menu__wrap {
		display: flex;
		flex-direction: column-reverse;
	}

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

	/* The approved accordion title: gold at rest, white on hover and open. */
	.lc-sr-menu__toggle:hover,
	.lc-sr-menu__toggle:focus-visible,
	.lc-sr-menu__wrap.is-open .lc-sr-menu__toggle {
		color: #fff;
	}

	.lc-sr-menu__toggle::-webkit-details-marker {
		display: none;
	}

	/* Swapped at the start of a toggle (the script sets .is-open), the way the
	   approved accordion keys it on aria-expanded rather than on [open]. */
	.lc-sr-menu__wrap.is-open .lc-sr-menu__toggle-label {
		display: none;
	}

	.lc-sr-menu__wrap.is-open .lc-sr-menu__toggle-close {
		display: flex;
	}

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

	.lc-sr-menu__list {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 0;
		gap: 15.25px;
		padding: 20px;
		background: var(--lc-sr-cream);
	}

	.lc-sr-menu__item,
	.lc-sr-menu__item:not(:last-child) {
		margin: 0;
		order: var(--lc-sr-order, 0);
	}

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

	.lc-sr-menu__item + .lc-sr-menu__item::before {
		display: none;
	}

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

	.lc-sr-menu__link {
		font-size: 16px;
		line-height: 19px;
		letter-spacing: 0.52px;
		color: var(--lc-sr-ink);
	}

	.lc-sr-menu__link:hover,
	.lc-sr-menu__link:focus,
	.lc-sr-menu__link:focus-visible,
	.lc-sr-menu__link:active {
		color: var(--lc-sr-ink);
	}

	.lc-sr-roast {
		padding: 80px 20px 60px;
	}

	.lc-sr-roast__head {
		padding-bottom: 30px;
	}

	.lc-sr-roast__cta {
		margin-top: 30px;
	}

	.lc-sr-heading {
		line-height: 1.2em;
	}

	.lc-sr-roast__card {
		flex-direction: column;
		border: 1px solid var(--lc-sr-gold);
	}

	.lc-sr-roast__media {
		flex: 0 0 auto;
		min-height: 0;
	}

	.lc-sr-roast__image {
		position: static;
		display: block;
		height: auto;
		object-fit: fill;
	}

	.lc-sr-roast__body {
		flex: 0 0 auto;
		padding: 50px;
	}

	.lc-sr-story {
		padding: 0 20px 80px;
	}

	.lc-sr-story__head {
		padding-bottom: 30px;
	}

	.lc-sr-story__head .lc-sr-heading {
		width: 63%;
		align-self: center;
		font-size: 46px;
		line-height: 1em;
	}

	.lc-sr-story__row {
		flex-direction: column;
		gap: 30px;
	}

	.lc-sr-story__text {
		max-width: none;
	}

	.lc-sr-story__text p {
		max-width: none;
	}

	.lc-sr-story__media {
		text-align: center;
	}

	.lc-sr-story__image {
		display: inline-block;
		vertical-align: top;
		width: auto;
		max-width: 100%;
	}

	.lc-sr-gallery {
		padding: 60px 40px;
	}

	.lc-sr-gallery__heading {
		font-size: 42px;
	}

	.lc-sr-gallery__grid {
		margin-top: 30px;
	}

	.lc-sr-details {
		gap: 40px;
		padding: 80px 20px;
	}

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

	.lc-sr-details__cta {
		margin-top: 20px;
	}

	.lc-sr-details__cols {
		gap: 0;
	}

	.lc-sr-details__icon {
		max-width: 80px;
	}

	.lc-sr-details__title {
		font-size: 20px;
		line-height: 1em;
	}

	/* 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-sr-popup {
		width: fit-content;
		padding: 40px 30px;
	}

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

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

/* ======================================================== phone <=767 ==== */

@media (max-width: 767px) {

	.lc-sr-hero {
		align-items: flex-start;
		justify-content: flex-start;
		min-height: calc(100vh - 130px);
		padding: 60px 20px;
	}

	.lc-sr-hero__image {
		object-position: top center;
	}

	.lc-sr-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
	}

	/* Two classes, so the general phone eyebrow size (16px) cannot win. */
	.lc-sr-eyebrow.lc-sr-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 3.4px;
		text-align: center;
	}

	.lc-sr-hero__title {
		font-size: 42.67px;
		line-height: 1.2em;
		text-align: center;
	}

	/* The approved paragraph box stays flush left (533px max) with its text
	   centred inside it, so it only looks centred once the column is narrower. */
	.lc-sr-hero__text {
		align-self: flex-start;
		font-size: 14px;
		text-align: center;
	}

	.lc-sr-btn {
		width: 142px;
		padding: 14px;
		font-size: 12px;
		line-height: 12px;
	}

	.lc-sr-hero__cta {
		align-self: center;
	}

	.lc-sr-menu__list {
		justify-content: space-around;
	}

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

	.lc-sr-roast {
		padding: 54px 15px 30px;
	}

	.lc-sr-roast__head {
		gap: 0;
		padding-bottom: 20px;
	}

	.lc-sr-roast__cta {
		margin-top: 25px;
	}

	.lc-sr-eyebrow {
		font-size: 16px;
		letter-spacing: 3.4px;
	}

	.lc-sr-heading {
		max-width: 295px;
		margin: 0 auto;
		font-size: 42.67px;
		line-height: 48px;
		letter-spacing: 0.83px;
	}

	.lc-sr-roast__image {
		height: 195px;
		object-fit: cover;
		object-position: center center;
	}

	.lc-sr-roast__body {
		gap: 25px;
		padding: 40px 20px 20px;
	}

	/* Each dish stacks: name, description, price - all centred, 14px apart. The
	   description slot keeps its margins even when empty, so a dish without one
	   still has 28px between name and price, as approved. */

	.lc-sr-dish__row {
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		text-align: center;
	}

	.lc-sr-dish__name {
		order: 1;
		margin-right: 0;
		letter-spacing: 0.5px;
	}

	.lc-sr-dish__price {
		order: 3;
	}

	.lc-sr-dish__text {
		order: 2;
		max-width: 340px;
		margin: 14px auto;
		text-align: center;
	}

	.lc-sr-note__label {
		font-size: 13.33px;
		text-align: center;
	}

	.lc-sr-note__text {
		max-width: 400px;
		margin: 0 auto;
		font-size: 13.33px;
		line-height: 1.3em;
		text-align: center;
	}

	.lc-sr-story {
		padding: 30px 15px 60px;
	}

	.lc-sr-story__head {
		gap: 0;
		padding-bottom: 15px;
	}

	/* Only the roast heading is held to 295px on a phone; this one is full width. */
	.lc-sr-story__head .lc-sr-heading {
		width: 100%;
		max-width: none;
		font-size: 42.67px;
		line-height: 48px;
	}

	.lc-sr-story__text {
		font-size: 16px;
		line-height: 1.5em;
	}

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

	.lc-sr-gallery__eyebrow {
		margin: 0 0 10px;
		font-size: 16px;
		letter-spacing: 3.4px;
	}

	/* Two classes, so the general phone heading metrics cannot win. */
	.lc-sr-heading.lc-sr-gallery__heading {
		max-width: 278px;
		font-size: 42.67px;
		line-height: 1.2;
		letter-spacing: 0.32px;
	}

	.lc-sr-gallery__grid {
		margin-top: 20px;
	}

	.lc-sr-gallery__frame {
		inset: 0;
	}

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

	.lc-sr-details__heading {
		width: auto;
		font-size: 42.67px;
		line-height: 1.2em;
	}

	.lc-sr-details__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.lc-sr-details__icon {
		max-width: 32.52px;
	}

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

	/* 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-sr-popup {
		width: 95%;
		max-width: 345px;
		padding: 30px 20px 20px;
	}

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

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

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

/* Private Dining's lightbox breakpoints, carried over with it. */
@media (max-width: 1024px) {
	.lc-sr-lb__frame {
		padding: 64px 20px;
	}
}

@media (max-width: 767px) {
	.lc-sr-lb__prev {
		left: 8px;
	}

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

/* The approved gallery drops to two columns on a 10px gutter below 1024px:
   Elementor's gallery switches on innerWidth < 1024, so 1024 itself keeps
   three. */
@media (max-width: 1023.98px) {
	.lc-sr-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* 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-sr-popup {
		width: calc(100vw - 40px);
		max-width: 640px;
		padding: 24px;
	}

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

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

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

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