/* =========================================================
   Rachel's North — component styles
   Tokens come from theme.json. This file handles behaviour
   theme.json cannot express: hover states, sticky header,
   the mobile overlay, and media placeholders.
   ========================================================= */

/* ---------- Header shell ---------- */

.rn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 0.9rem;
	background: rgba(11, 10, 13, 0.72);
	/* backdrop-filter removed: caused whole-page repaints */
	/* backdrop-filter removed: caused whole-page repaints */
	border-bottom: 1px solid transparent;
	transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

/* Class toggled by assets/js/header.js once the page scrolls. */
.rn-header.is-scrolled {
	background: rgba(11, 10, 13, 0.95);
	border-bottom-color: var(--wp--preset--color--ink-line);
	padding-block: 0.55rem;
}

.rn-header__inner {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.75rem);
	gap: clamp(1rem, 3vw, 2.5rem);
}

.rn-header__right {
	gap: clamp(1rem, 2.5vw, 2rem);
}

.rn-header__logo img {
	display: block;
	height: auto;
	transition: opacity 0.25s ease;
}

.rn-header__logo a:hover img {
	opacity: 0.82;
}

/* ---------- Desktop nav: underline sweep on hover ---------- */

.rn-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: color 0.28s ease;
}

.rn-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rn-nav .wp-block-navigation-item__content:hover,
.rn-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
}

.rn-nav .wp-block-navigation-item__content:hover::after,
.rn-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Current page keeps a permanent, dimmer rule. */
.rn-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	background: var(--wp--preset--color--purple-lt);
}

/* Submenu ("The Steakhouse" dropdown) */
.rn-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 6px;
	padding-block: 0.5rem;
	box-shadow: var(--wp--preset--shadow--card);
	min-width: 220px;
}

.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
	width: 100%;
}

/* Sweep would look wrong stacked vertically — use a fill instead. */
.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: rgba(123, 47, 190, 0.16);
}

/* ---------- Mobile: hamburger + overlay ---------- */

.rn-nav .wp-block-navigation__responsive-container-open,
.rn-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--gold);
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink) !important;
	padding: clamp(2.5rem, 8vw, 4rem);
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	padding-block: 0.75rem;
}

/* No sweep in the overlay — it reads as a glitch at that size. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Hide the desktop CTA button once the hamburger takes over. */
@media (max-width: 781px) {
	.rn-header__cta {
		display: none;
	}
}

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

.rn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	padding: 0.85rem 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 6px 0;
}

.rn-skip-link:focus {
	left: 0;
}

/* ---------- Shared section furniture ---------- */

.rn-eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.9rem;
}

.rn-accent {
	color: var(--wp--preset--color--gold);
}

.rn-hours-strip {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ---------- Media placeholders (until real assets arrive) ---------- */

.rn-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	border: 1px dashed var(--wp--preset--color--purple);
	border-radius: 10px;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(123, 47, 190, 0.06) 0 12px,
			transparent 12px 24px
		),
		var(--wp--preset--color--ink-raised);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	padding: 2rem;
}

.rn-media-placeholder--hero {
	min-height: min(78vh, 640px);
	border-radius: 0;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================
   Footer
   ========================================================= */

.rn-footer {
	border-top: 1px solid var(--wp--preset--color--ink-line);
	font-size: 0.9375rem;
}

.rn-footer__grid {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.rn-footer__heading {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 1.1rem;
}

.rn-footer__brand .wp-block-site-logo {
	margin-bottom: 1.25rem;
}

.rn-footer__tagline {
	max-width: 34ch;
}

/* Footer link lists */
.rn-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rn-footer__links li {
	margin-bottom: 0.6rem;
}

.rn-footer__links a {
	color: var(--wp--preset--color--body);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.24s ease, padding-left 0.24s ease;
}

.rn-footer__links a:hover {
	color: var(--wp--preset--color--gold);
	padding-left: 4px;
	text-decoration: none;
}

/* Address + phone */
.rn-footer__addr a,
.rn-footer__phone a {
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	transition: color 0.24s ease;
}

.rn-footer__addr a:hover,
.rn-footer__phone a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.rn-footer__phone a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Google Map embed */
.rn-footer__map {
	margin-top: 1.25rem;
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
	filter: grayscale(0.45) brightness(0.85) contrast(1.05);
	transition: filter 0.4s ease;
}

.rn-footer__map:hover {
	filter: none;
}

.rn-footer__map iframe {
	width: 100%;
	height: 190px;
	border: 0;
	display: block;
}

/* SEO / about band */
.rn-footer__about {
	border-top: 1px solid var(--wp--preset--color--ink-line);
	text-align: center;
}

.rn-footer__about h2 {
	color: var(--wp--preset--color--ivory);
	margin-bottom: 0.9rem;
}

/* Legal bar */
.rn-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--ink-line);
	gap: 1rem;
}

.rn-footer__bottom p {
	margin: 0;
}

.rn-footer__bottom a {
	color: inherit;
	text-decoration: none;
}

.rn-footer__bottom a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

/* Social row */
.rn-footer__social .wp-social-link {
	transition: transform 0.24s ease, opacity 0.24s ease;
}

.rn-footer__social .wp-social-link:hover {
	transform: translateY(-2px);
	opacity: 0.82;
}

@media (max-width: 781px) {
	.rn-footer__grid {
		text-align: left;
	}

	.rn-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}
/* Exterior shot in the footer's Reservations column */
.rn-footer__sign {
	margin: 1.75rem 0 0;
}

.rn-footer__sign img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--ink-line);
	filter: brightness(0.92) saturate(0.95);
	transition: filter 0.4s ease, transform 0.4s ease;
}

.rn-footer__sign:hover img {
	filter: none;
	transform: translateY(-2px);
}

.rn-footer__sign figcaption {
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--gold);
	text-align: center;
}

/* =========================================================
   Header fixes — nav fit + hamburger breakpoint
   ========================================================= */

/* Logo must never be squeezed by a wide nav. */
.rn-header__logo,
.rn-header .wp-block-site-logo {
	flex: 0 0 auto;
}

.rn-header__right {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

/* Nav labels stay on one line, always. */
.rn-nav .wp-block-navigation-item__content,
.rn-nav .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Tighter type so the full row of items + a CTA fits from 1240px. */
.rn-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(1rem, 1.6vw, 1.4rem);
}

.rn-nav .wp-block-navigation-item__content {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

/* Header CTA: compact, and never break the word. */
.rn-header__cta .wp-block-button__link {
	white-space: nowrap;
	padding: 0.8rem 1.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
}

/*
 * Hamburger breakpoint.
 * Core flips to the desktop nav at 600px, which is far too narrow for this
 * many items — they wrap and shove the logo out. Hold the overlay until
 * there is genuinely room for the full row.
 */
@media (max-width: 1239.98px) {
	.rn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.rn-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* CTA rides alongside the burger until small mobile. */
	.rn-header__cta {
		display: block;
	}
}

@media (max-width: 600px) {
	.rn-header__cta {
		display: none;
	}
}

/* Burger + close glyph sizing */
.rn-nav .wp-block-navigation__responsive-container-open svg,
.rn-nav .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* Overlay: give the menu room to breathe and add the CTA back inside it. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: clamp(4rem, 12vw, 6rem);
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-wrap: wrap;
	gap: 0;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	letter-spacing: 0.05em;
}

/* Submenu inside the overlay should read as nested, not as top-level. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 1rem;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

/* =========================================================
   Header CTA — outlined, Dancers-style
   ========================================================= */

.rn-header__cta .wp-block-button__link,
.rn-header__cta .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
	padding: 0.85rem 1.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	border-radius: 2px;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.rn-header__cta .wp-block-button__link:hover,
.rn-header__cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}

/* Nav links read cream, gold on hover — closer to the reference. */
.rn-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ivory);
	opacity: 0.88;
}

.rn-nav .wp-block-navigation-item__content:hover,
.rn-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold);
	opacity: 1;
}

/* Submenu caret */
.rn-nav .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	opacity: 0.7;
}

/* Six top-level items now — a little more air between them. */
.rn-nav .wp-block-navigation__container {
	gap: clamp(1.1rem, 1.9vw, 1.75rem);
}

/* =========================================================
   ROUND 2 — mobile logo, overlay menu, footer polish
   Reference: Dancers Royale
   ========================================================= */

/* ---------- Mobile logo sizing ---------- */

@media (max-width: 1239.98px) {
	.rn-header__logo img,
	.rn-header .custom-logo {
		width: 150px !important;
		height: auto !important;
	}

	/* Dancers order on mobile: logo … CTA … burger */
	.rn-header__right {
		gap: 0.85rem;
	}

	.rn-header__right .rn-nav {
		order: 2;
	}

	.rn-header__cta {
		order: 1;
	}
}

@media (max-width: 600px) {
	.rn-header__logo img,
	.rn-header .custom-logo {
		width: 120px !important;
	}

	.rn-header__cta .wp-block-button__link {
		padding: 0.7rem 1rem;
		font-size: 0.65rem;
		letter-spacing: 0.1em;
	}
}

@media (max-width: 400px) {
	.rn-header__cta {
		display: none;
	}
}

/* ---------- Overlay menu — big centred serif, Dancers-style ---------- */

/* These two only exist for the overlay. */
.rn-only-overlay,
.rn-overlay-cta {
	display: none;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(3rem, 9vw, 5rem) 1.5rem;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-only-overlay,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta {
	display: block;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 6vw, 2.35rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--wp--preset--color--ivory);
	opacity: 1;
	padding-block: 0.45rem;
	justify-content: center;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* Submenu items sit smaller and dimmer beneath their parent. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	align-items: center;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp(1rem, 3.6vw, 1.15rem);
	color: var(--wp--preset--color--muted);
	padding-block: 0.25rem;
}

/* The CTA inside the overlay, rendered as an outlined button. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta {
	margin-top: 2rem;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta .wp-block-navigation-item__content {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 2px;
	padding: 1rem 2.2rem;
	transition: background 0.3s ease, color 0.3s ease;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* Close button in a bordered circle, top right. */
.rn-nav .wp-block-navigation__responsive-container-close {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(243, 217, 138, 0.45);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--gold);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.rn-nav .wp-block-navigation__responsive-container-close:hover {
	transform: rotate(90deg);
	border-color: var(--wp--preset--color--gold);
}

/* ---------- Footer — match the reference ---------- */

/* Tagline: italic serif, quieter than body copy. */
.rn-footer__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 32ch;
}

/* Socials in bordered circles. */
.rn-footer__social .wp-social-link {
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: border-color 0.28s ease, transform 0.28s ease;
}

.rn-footer__social .wp-social-link a {
	padding: 0;
}

.rn-footer__social .wp-social-link svg {
	width: 19px;
	height: 19px;
}

.rn-footer__social .wp-social-link:hover {
	border-color: var(--wp--preset--color--gold);
	transform: translateY(-2px);
	opacity: 1;
}

/* Phone: restrained, not a display headline. */
.rn-footer__phone a {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ivory);
}

/* Footer CTA outlined to match header. */
.rn-footer .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	padding: 0.95rem 1.8rem;
	border-radius: 2px;
	white-space: nowrap;
}

.rn-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* SEO band: gold serif heading, centred body. */
.rn-footer__about h2 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}

/* Exterior photo caption centred, like the neon-sign reference. */
.rn-footer__sign figcaption {
	text-align: center;
}

/* ---------- Footer on mobile ---------- */

@media (max-width: 781px) {
	.rn-footer__grid {
		gap: 2.75rem;
	}

	.rn-footer__grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.rn-footer__tagline {
		max-width: none;
	}

	.rn-footer__map iframe {
		height: 220px;
	}

	.rn-footer__sign img {
		max-width: 420px;
		margin-inline: auto;
	}

	.rn-footer__about {
		text-align: left;
	}
}

/* =========================================================
   ROUND 3 — specificity fixes + layout
   ========================================================= */

/*
 * Overlay-only items must be hidden on desktop. Core ships compound
 * selectors for navigation items, so a bare class loses the cascade —
 * scope it and force it.
 */
.rn-nav .wp-block-navigation__container > .rn-only-overlay,
.rn-nav .wp-block-navigation__container > .rn-overlay-cta,
.rn-nav li.rn-only-overlay,
.rn-nav li.rn-overlay-cta {
	display: none !important;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .rn-only-overlay,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .rn-overlay-cta,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open li.rn-only-overlay,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open li.rn-overlay-cta {
	display: block !important;
}

/* Nav must never overlap the logo. */
.rn-header__inner {
	flex-wrap: nowrap;
}

.rn-header__logo {
	flex: 0 0 auto;
	margin-right: auto;
}

.rn-nav {
	min-width: 0;
}

.rn-nav .wp-block-navigation__container {
	overflow: visible;
}

/* ---------- Footer: map + photo in their own row ---------- */

.rn-footer__media {
	margin-top: var(--wp--preset--spacing--40);
}

.rn-footer__media .wp-block-column {
	min-width: 0;
}

.rn-footer__map {
	margin-top: 0;
	max-width: 460px;
}

.rn-footer__map iframe {
	height: 220px;
}

.rn-footer__sign {
	margin: 0;
	max-width: 460px;
}

.rn-footer__sign img {
	max-height: 240px;
	object-fit: cover;
}

@media (max-width: 781px) {
	.rn-footer__media {
		gap: 2rem;
	}

	.rn-footer__map,
	.rn-footer__sign {
		max-width: 100%;
	}

	.rn-footer__map iframe {
		height: 190px;
	}

	.rn-footer__sign img {
		max-height: 200px;
		max-width: 100%;
	}
}

/* =========================================================
   ROUND 4 — overlay containing-block fix
   ========================================================= */

/*
 * backdrop-filter on the header creates a containing block for
 * position:fixed descendants, which traps the full-screen nav overlay
 * inside the 96px header box. Drop the filter while the menu is open so
 * the overlay can escape to the viewport.
 */
.rn-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	/* backdrop-filter removed: caused whole-page repaints */
	/* backdrop-filter removed: caused whole-page repaints */
	background: transparent;
	border-bottom-color: transparent;
}

/* Explicitly pin the overlay to the viewport and let it scroll if tall. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--ink) !important;
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-block: auto;
	padding-block: 2rem;
}

.rn-nav .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 510;
}

/* Tighter type so the whole menu fits a short phone screen. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.45rem, 5.5vw, 1.9rem);
	padding-block: 0.3rem;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	padding-block: 0.15rem;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta {
	margin-top: 1.5rem;
}

/* Submenus in the overlay are always expanded — no tap-to-reveal. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100%;
	min-width: 0;
	transform: none !important;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* =========================================================
   ROUND 5 — overlay centring
   ========================================================= */

/* inset:0 already sizes it; 100vw overflows when a scrollbar exists. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
	width: auto;
	left: 0;
	right: 0;
	padding: 0;
}

/*
 * The nav block carries justify-content:flex-end from its layout class,
 * which survives into the overlay and shoves items off the right edge.
 * Override on the container itself.
 */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100%;
	padding: 0 1.25rem;
	margin: 0;
	gap: 0 !important;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	max-width: 100%;
	justify-content: center !important;
	align-items: center !important;
	text-align: center;
	flex-direction: column;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: auto;
	text-align: center;
	justify-content: center;
}

/* Clear the close button so it never sits on top of the first item. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	padding-bottom: 2rem;
	align-items: center !important;
	justify-content: center;
}

/* Submenu lists centre too. */
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: center !important;
	justify-content: center !important;
	padding-left: 0;
	margin-top: 0.15rem;
	margin-bottom: 0.35rem;
}

/* =========================================================
   ROUND 6 — header spacing, footer media sizing
   ========================================================= */

/* Wider header rail so the logo sits further left and the nav can breathe. */
.rn-header__inner {
	max-width: 1560px;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.rn-header {
	padding-block: 1.15rem;
}

.rn-header.is-scrolled {
	padding-block: 0.7rem;
}

.rn-nav .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.1vw, 2.1rem);
}

.rn-nav .wp-block-navigation-item__content {
	font-size: 0.78125rem;
	letter-spacing: 0.1em;
}

.rn-header__cta .wp-block-button__link {
	padding: 0.9rem 1.75rem;
	font-size: 0.75rem;
}

/* ---------- Footer media: smaller, matched heights ---------- */

.rn-footer__media {
	max-width: 980px;
	margin-inline: auto;
}

.rn-footer__map {
	max-width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
}

.rn-footer__map iframe {
	height: 100%;
	min-height: 0;
	aspect-ratio: 16 / 10;
}

.rn-footer__sign img {
	aspect-ratio: 16 / 10;
	max-height: none;
	width: 100%;
	object-fit: cover;
}

.rn-footer__sign {
	max-width: 100%;
}

@media (min-width: 782px) {
	.rn-footer__media {
		max-width: 860px;
	}
}

/* SEO heading shouldn't wrap awkwardly on narrow screens. */
.rn-footer__about h2 {
	font-size: clamp(1.125rem, 3.6vw, 1.375rem);
	text-wrap: balance;
}

/* =========================================================
   PAGE SECTIONS
   ========================================================= */

.rn-section {
	padding-block: var(--wp--preset--spacing--70);
}

.rn-section--tight { padding-block: var(--wp--preset--spacing--60); }
.rn-section--flush-top { padding-top: 0; }

.rn-section__head {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.rn-section__head .rn-eyebrow { margin-bottom: 0.85rem; }

.rn-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.75;
	color: var(--wp--preset--color--body);
}

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

.rn-hero {
	position: relative;
	min-height: min(86vh, 760px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 20%, rgba(123,47,190,0.22), transparent 58%),
	            radial-gradient(120% 120% at 50% 108%, rgba(243,217,138,0.10), transparent 58%),
	            linear-gradient(180deg, #17121C 0%, var(--wp--preset--color--ink) 76%);
	padding: clamp(6rem, 14vh, 9rem) clamp(1.25rem, 5vw, 3.75rem) clamp(4rem, 10vh, 7rem);
}

.rn-hero--page { min-height: min(58vh, 520px); }

.rn-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin-inline: auto;
}

.rn-hero h1 {
	margin: 0.4rem 0 1.1rem;
	text-wrap: balance;
}

.rn-hero__sub {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.7;
	color: var(--wp--preset--color--body);
	max-width: 62ch;
	margin: 0 auto 2rem;
}

/* Eyebrow with flanking rules, like the reference. */
.rn-eyebrow--ruled {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
}

.rn-eyebrow--ruled::before,
.rn-eyebrow--ruled::after {
	content: "";
	width: clamp(24px, 6vw, 54px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
}

.rn-eyebrow--ruled::after { background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent); }

.rn-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
}

.rn-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.78125rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.05rem 2.1rem;
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.rn-btn--gold {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.rn-btn--gold:hover { background: var(--wp--preset--color--gold-lt); border-color: var(--wp--preset--color--gold-lt); color: var(--wp--preset--color--ink); text-decoration: none; }

.rn-btn--ghost {
	background: transparent;
	border-color: rgba(243,217,138,0.5);
	color: var(--wp--preset--color--gold);
}

.rn-btn--ghost:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--gold); text-decoration: none; }

.rn-btn--purple {
	background: var(--wp--preset--color--purple);
	border-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--ivory);
}

.rn-btn--purple:hover { background: var(--wp--preset--color--purple-lt); border-color: var(--wp--preset--color--purple-lt); color: var(--wp--preset--color--ivory); text-decoration: none; }

/* ---------- Cards / tiles ---------- */

.rn-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	max-width: 1180px;
	margin-inline: auto;
}

.rn-tile {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 10px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-tile:hover { border-color: rgba(243,217,138,0.35); transform: translateY(-3px); }

.rn-tile h3 { margin: 0 0 0.7rem; }
.rn-tile p { margin: 0 0 1.2rem; color: var(--wp--preset--color--body); font-size: 0.9375rem; line-height: 1.7; }

.rn-tile__link {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.rn-tile__link:hover { color: var(--wp--preset--color--gold-lt); text-decoration: none; }

/* ---------- Numbered steps ---------- */

.rn-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-width: 1080px;
	margin-inline: auto;
}

.rn-step__n {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	color: var(--wp--preset--color--gold);
	line-height: 1;
	margin-bottom: 0.6rem;
	opacity: 0.8;
}

.rn-step h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.rn-step p { margin: 0; color: var(--wp--preset--color--body); font-size: 0.9375rem; line-height: 1.7; }

/* ---------- Pricing / package tiers ---------- */

.rn-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
	max-width: 1240px;
	margin-inline: auto;
	align-items: stretch;
}

.rn-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 10px;
	padding: 2.25rem 1.75rem 1.75rem;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-tier:hover { border-color: rgba(243,217,138,0.35); transform: translateY(-3px); }

.rn-tier--feature {
	border-color: rgba(243,217,138,0.5);
	box-shadow: var(--wp--preset--shadow--glow);
}

.rn-tier__badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
}

.rn-tier h3 { margin: 0 0 0.35rem; font-size: 1.3rem; }

.rn-tier__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	color: var(--wp--preset--color--gold);
	line-height: 1;
	margin-bottom: 1.25rem;
}

.rn-tier ul {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	flex: 1 1 auto;
}

.rn-tier li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.65rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

.rn-tier li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--purple-lt);
}

/* ---------- Stat bar ---------- */

.rn-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem;
	max-width: 980px;
	margin-inline: auto;
	text-align: center;
}

.rn-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--gold);
	line-height: 1;
}

.rn-stat__lbl {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

/* ---------- Menu (food) listings ---------- */

.rn-menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	max-width: 1120px;
	margin-inline: auto;
}

.rn-menu-group h3 {
	font-size: 1.35rem;
	color: var(--wp--preset--color--gold);
	padding-bottom: 0.7rem;
	margin: 0 0 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
}

.rn-menu-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.rn-menu-item__name {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ivory);
}

.rn-menu-item__desc {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem;
	line-height: 1.5;
}

.rn-menu-item__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.rn-menu-note {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.75rem;
	line-height: 1.6;
}

/* ---------- Closing CTA band ---------- */

.rn-cta-band {
	text-align: center;
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--ink-line);
}

.rn-cta-band h2 { margin-bottom: 0.8rem; }
.rn-cta-band .rn-lead { max-width: 620px; margin: 0 auto 2rem; }

/* =========================================================
   FORMS
   Markup mirrors the proven dr-hero structure so the companion
   plugin can be wired to it without re-templating.
   ========================================================= */

.rn-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 3.5vw, 3rem);
	max-width: 1120px;
	margin-inline: auto;
	align-items: start;
}

@media (max-width: 900px) {
	.rn-form-layout { grid-template-columns: 1fr; }
}

.rn-form-card {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 12px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.rn-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}

@media (max-width: 600px) {
	.rn-form-grid { grid-template-columns: 1fr; }
}

.rn-field { display: flex; flex-direction: column; }
.rn-field--full { grid-column: 1 / -1; }

.rn-field label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}

.rn-field .rn-req { color: var(--wp--preset--color--gold); }

.rn-field input,
.rn-field select,
.rn-field textarea {
	width: 100%;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 6px;
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.95rem;
	padding: 0.85rem 0.95rem;
	transition: border-color 0.25s ease, background 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rn-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8395' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 16px;
	padding-right: 2.5rem;
}

.rn-field textarea { min-height: 130px; resize: vertical; }

.rn-field input::placeholder,
.rn-field textarea::placeholder { color: rgba(139,131,149,0.7); }

.rn-field input:focus,
.rn-field select:focus,
.rn-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--purple-lt);
	background: rgba(255,255,255,0.05);
}

.rn-field option { background: var(--wp--preset--color--ink-raised); color: var(--wp--preset--color--ivory); }

/* File upload */
.rn-filebox {
	display: block;
	border: 1px dashed rgba(243,217,138,0.4);
	border-radius: 6px;
	padding: 1.4rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.rn-filebox:hover { border-color: var(--wp--preset--color--gold); background: rgba(243,217,138,0.04); }
.rn-filebox b { color: var(--wp--preset--color--gold); font-weight: 500; }

.rn-form-submit { margin-top: 1.5rem; }
.rn-form-submit .rn-btn { width: 100%; text-align: center; border: 0; }

.rn-form-note {
	font-size: 0.78125rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin-top: 1.1rem;
	text-align: center;
}

.rn-form-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Success state (revealed by the companion plugin's JS) */
.rn-form-success { display: none; text-align: center; padding: 2rem 1rem; }
.rn-form-success.is-visible { display: block; }
.rn-form-success .rn-check {
	width: 56px; height: 56px; margin: 0 auto 1.1rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--gold); font-size: 1.5rem;
}
.rn-form-success h3 { margin: 0 0 0.6rem; }
.rn-form-success p { margin: 0; color: var(--wp--preset--color--body); }

/* Sidebar cards next to a form */
.rn-aside { display: grid; gap: 1rem; }

.rn-aside-card {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 10px;
	padding: 1.5rem;
}

.rn-aside-card h4 {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.75rem;
}

.rn-aside-card p { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.rn-aside-card p:last-child { margin-bottom: 0; }

.rn-aside-phone {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
}

.rn-aside-phone:hover { color: var(--wp--preset--color--gold); text-decoration: none; }

.rn-aside-map { margin-top: 0.9rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--wp--preset--color--ink-line); line-height: 0; }
.rn-aside-map iframe { width: 100%; height: 180px; border: 0; display: block; }

/* Notice shown while forms are not yet wired to the backend */
.rn-form-pending {
	border: 1px dashed rgba(243,217,138,0.35);
	border-radius: 6px;
	padding: 0.8rem 1rem;
	font-size: 0.78125rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-bottom: 1.25rem;
}

/* =========================================================
   Heading sizes — explicit, not dependent on preset vars
   ========================================================= */

.rn-hero h1,
.rn-section h1,
main h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: 0;
	color: var(--wp--preset--color--ivory);
}

.rn-section h2,
.rn-cta-band h2,
main h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.4rem + 2.7vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--ivory);
	margin: 0 0 1rem;
}

.rn-tile h3,
.rn-tier h3,
.rn-step h3,
.rn-menu-group h3,
.rn-form-success h3,
main h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 1.1rem + 0.95vw, 1.75rem);
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--ivory);
}

.rn-menu-group h3 { color: var(--wp--preset--color--gold); }
.rn-footer__about h2 { font-size: clamp(1.125rem, 3.6vw, 1.375rem); }
.rn-aside-card h4,
.rn-footer__heading { font-family: var(--wp--preset--font-family--ui); }

/* =========================================================
   Form field contrast
   The ink-line border is near-invisible on the card, which
   made side-by-side inputs read as a single merged field.
   ========================================================= */

.rn-field input,
.rn-field select,
.rn-field textarea {
	background: rgba(255, 255, 255, 0.055);
	border-color: rgba(255, 255, 255, 0.14);
}

.rn-field input:hover,
.rn-field select:hover,
.rn-field textarea:hover {
	border-color: rgba(255, 255, 255, 0.24);
}

.rn-field input:focus,
.rn-field select:focus,
.rn-field textarea:focus {
	border-color: var(--wp--preset--color--purple-lt);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.18);
}

/* Native date/time pickers render dark-on-dark in Chrome without this. */
.rn-field input[type="date"],
.rn-field input[type="time"] {
	color-scheme: dark;
}

.rn-form-grid { gap: 1.25rem; }

/* =========================================================
   Gilda Display tuning
   Single weight (400), no italic. Elegant display serif,
   slightly narrow, moderate contrast. Takes tighter leading
   than a sans and holds up better at larger display sizes.
   ========================================================= */

.rn-hero h1,
.rn-section h2,
.rn-cta-band h2,
main h1,
main h2,
main h3,
.rn-tile h3,
.rn-tier h3,
.rn-step h3,
.rn-menu-group h3 {
	font-weight: 400;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Narrow face, so it can carry a slightly larger display size. */
.rn-hero h1,
main h1 {
	font-size: clamp(2.4rem, 1.5rem + 3.7vw, 4rem);
	line-height: 1.1;
	letter-spacing: 0;
}

.rn-section h2,
.rn-cta-band h2,
main h2 {
	font-size: clamp(1.95rem, 1.35rem + 2.6vw, 2.9rem);
	line-height: 1.14;
}

main h3,
.rn-tile h3,
.rn-tier h3,
.rn-step h3,
.rn-menu-group h3 {
	font-size: clamp(1.3rem, 1.08rem + 0.9vw, 1.6rem);
	line-height: 1.28;
}

/* Numerals */
.rn-tier__price      { font-size: 2.5rem;   font-weight: 400; letter-spacing: 0; }
.rn-step__n          { font-size: 2.75rem;  font-weight: 400; opacity: 0.85; }
.rn-stat__num        { font-weight: 400; }
.rn-menu-item__price { font-size: 1.1rem;   font-weight: 400; }
.rn-footer__phone a  { font-weight: 400; font-size: 1.6rem; }
.rn-aside-phone      { font-weight: 400; font-size: 1.55rem; }

/*
 * Gilda has no italic. Keep the tagline and caption out of a
 * synthesised slant.
 */
.rn-footer__tagline {
	font-family: var(--wp--preset--font-family--ui);
	font-style: normal;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0.01em;
}

.rn-footer__sign figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rn-accent { font-weight: inherit; }
.rn-section__head h2 { margin-bottom: 1.05rem; }

/* =========================================================
   Video hero
   Poster is the LCP element and paints immediately. The
   video is preload="none" and only fetched after first
   paint, so motion costs nothing on Core Web Vitals.
   ========================================================= */

.rn-hero--video {
	position: relative;
	isolation: isolate;
	background: var(--wp--preset--color--ink);
	min-height: min(88vh, 800px);
	overflow: hidden;
}

.rn-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rn-hero__poster,
.rn-hero__poster img,
.rn-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}

/* Video sits above the poster and fades in once it can play. */
.rn-hero__video {
	opacity: 0;
	transition: opacity 700ms ease;
	z-index: 1;
}

.rn-hero__video.is-ready {
	opacity: 1;
}

/*
 * Scrim. The clip opens wide and ends tight on the steak, so the
 * natural dark areas move during playback. A fixed gradient keeps
 * the headline legible at both ends of the zoom.
 */
.rn-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg,
			rgba(11,10,13,0.80) 0%,
			rgba(11,10,13,0.45) 32%,
			rgba(11,10,13,0.55) 62%,
			rgba(11,10,13,0.92) 100%),
		radial-gradient(80% 60% at 50% 45%, transparent 0%, rgba(11,10,13,0.35) 100%);
}

.rn-hero--video .rn-hero__inner {
	position: relative;
	z-index: 3;
}

.rn-hero--video h1,
.rn-hero--video .rn-hero__sub {
	text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}

/* Reduced motion: never fetch the video, show the tight end frame
   since that is the composition everyone else settles on. */
/* reduced-motion endframe swap removed: hero is a still, nothing to reduce */

@media (max-width: 781px) {
	.rn-hero--video {
		min-height: min(72vh, 620px);
	}

	.rn-hero__poster img,
	.rn-hero__video {
		object-position: center 50%;
	}
}

/* =========================================================
   OVERLAY HEADER
   Transparent over the hero at rest; solid once scrolled.
   Overrides the earlier sticky rules.
   ========================================================= */

:root {
	--rn-header-h: 96px;
	--rn-header-h-sm: 74px;
}

.rn-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.rn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	/* backdrop-filter removed: caused whole-page repaints */
	/* backdrop-filter removed: caused whole-page repaints */
	border-bottom: 1px solid transparent;
	padding-block: 1.1rem;
	transition: background 0.4s ease, padding 0.4s ease,
	            border-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* WordPress admin bar offset */
.admin-bar .rn-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rn-header { top: 46px; } }

/* Scrolled state */
.rn-header.is-scrolled {
	background: rgba(11, 10, 13, 0.94);
	/* backdrop-filter removed: caused whole-page repaints */
	/* backdrop-filter removed: caused whole-page repaints */
	border-bottom-color: var(--wp--preset--color--ink-line);
	padding-block: 0.65rem;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}

/* Slightly smaller logo once compacted */
.rn-header.is-scrolled .rn-header__logo img,
.rn-header.is-scrolled .custom-logo {
	width: 165px !important;
	transition: width 0.4s ease;
}

/* ---------- Tighter nav rail ---------- */

.rn-header__inner {
	max-width: 1400px;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	gap: clamp(1rem, 2.5vw, 2rem);
}

.rn-nav .wp-block-navigation__container {
	gap: clamp(0.9rem, 1.5vw, 1.45rem);
}

.rn-nav .wp-block-navigation-item__content {
	font-size: 0.75rem;
	letter-spacing: 0.09em;
}

.rn-header__right {
	gap: clamp(0.9rem, 1.8vw, 1.6rem);
}

.rn-header__cta .wp-block-button__link {
	padding: 0.85rem 1.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.13em;
}

/* ---------- Hero sits under the header ---------- */

.rn-hero--video {
	margin-top: 0;
	padding-top: calc(var(--rn-header-h) + clamp(2rem, 6vh, 4rem));
}

/* Page heroes without video also run full-bleed under the header. */
.rn-hero {
	padding-top: calc(var(--rn-header-h) + clamp(2rem, 6vh, 4rem));
}

/*
 * Pages with no hero (legal pages on the default template) still need to
 * clear the fixed header, or the title hides behind it.
 */
main:not(:has(.rn-hero)) {
	padding-top: calc(var(--rn-header-h) + 2rem);
}

@supports not selector(:has(*)) {
	main { padding-top: var(--rn-header-h); }
	main:first-child { padding-top: 0; }
}

@media (max-width: 781px) {
	:root { --rn-header-h: var(--rn-header-h-sm); }

	.rn-header { padding-block: 0.8rem; }
	.rn-header.is-scrolled { padding-block: 0.55rem; }
}

/* Hero video fade: slower and eased. Paired with requestVideoFrameCallback
   in hero-video.js so the fade only starts once a real frame is painted. */
.rn-hero__video {
	transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   Hero on small screens
   The desktop type scale and padding leave the CTAs jammed
   against the bottom edge on a phone. Tighten everything.
   ========================================================= */

@media (max-width: 781px) {
	.rn-hero,
	.rn-hero--video {
		min-height: auto;
		padding-top: calc(var(--rn-header-h) + 1.5rem);
		padding-bottom: 3rem;
		padding-inline: 1.25rem;
	}

	.rn-hero--video {
		min-height: min(78svh, 640px);
	}

	.rn-hero__inner {
		max-width: 34rem;
	}

	.rn-hero h1,
	main h1 {
		font-size: clamp(1.9rem, 8.5vw, 2.6rem);
		line-height: 1.12;
		margin-bottom: 0.85rem;
	}

	.rn-hero__sub {
		font-size: 0.9375rem;
		line-height: 1.6;
		max-width: 30rem;
		margin-bottom: 1.6rem;
	}

	.rn-eyebrow--ruled {
		font-size: 0.65rem;
		letter-spacing: 0.16em;
		gap: 0.6rem;
	}

	.rn-eyebrow--ruled::before,
	.rn-eyebrow--ruled::after {
		width: 18px;
	}

	/* Stack the CTAs full-width — side by side they squeeze on a phone. */
	.rn-cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.7rem;
	}

	.rn-cta-row .rn-btn {
		width: 100%;
		text-align: center;
		padding: 1rem 1.25rem;
		font-size: 0.72rem;
	}

	/* Section rhythm tightens too, or the page runs very long. */
	.rn-section { padding-block: 3.5rem; }
	.rn-section__head { margin-bottom: 2rem; }
	.rn-section h2, main h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
	.rn-lead { font-size: 0.9375rem; }
}

@media (max-width: 480px) {
	.rn-hero--video { min-height: min(72svh, 560px); }
	.rn-hero h1, main h1 { font-size: clamp(1.75rem, 9vw, 2.25rem); }
}

/* =========================================================
   Compositing fix — remove backdrop-filter
   =========================================================
   backdrop-filter creates a backdrop root: Chrome must snapshot and
   re-composite everything behind the element. Any repaint inside it
   (the nav underline transform on hover, the video advancing a frame)
   forces the whole backdrop root through a different colour path, and
   the entire page visibly shifts brightness.

   The scrolled header sits at 94% opacity, so the blur behind it was
   barely visible. Trading it for a solid background costs almost
   nothing and makes the page render consistently.
   ========================================================= */

.rn-header,
.rn-header.is-scrolled,
.rn-nav .wp-block-navigation__responsive-container,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open,
.rn-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	/* backdrop-filter removed: caused whole-page repaints */
	/* backdrop-filter removed: caused whole-page repaints */
}

.rn-header {
	background: transparent;
	transition: background-color 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
}

.rn-header.is-scrolled {
	background: #0E0C11;
	border-bottom-color: var(--wp--preset--color--ink-line);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

/*
 * Keep the page on one compositing path from first paint so nothing
 * flips it later. Cheap, and it stops hover promoting a new layer.
 */
/* translateZ promotion removed: extra GPU layers caused scroll flicker */

/* The nav underline animates a pre-promoted layer rather than
   triggering promotion on hover. */
.rn-nav .wp-block-navigation-item__content::after {
	will-change: transform;
}

/* =========================================================
   Header state: stop the flicker
   =========================================================
   Two problems with the previous version:

   1. The sentinel was 1px tall, so a 2px scroll wobble near the top
      toggled the class repeatedly.
   2. The state change altered padding, logo width and box-shadow —
      layout changes that force a full repaint every single toggle.

   Now: the header keeps a constant height, only the background and
   border animate, and the trigger has real hysteresis.
   ========================================================= */

.rn-header-sentinel {
	height: 140px !important;
}

/* Constant height in both states — no layout change on toggle. */
.rn-header,
.rn-header.is-scrolled {
	padding-block: 1rem;
	box-shadow: none;
	will-change: auto;
}

.rn-header {
	background-color: transparent;
	transition: background-color 0.3s linear, border-color 0.3s linear;
}

.rn-header.is-scrolled {
	background-color: #0E0C11;
	border-bottom-color: var(--wp--preset--color--ink-line);
}

/* Logo stays one size. Resizing it was a layout change inside a fixed
   element, repainting on every toggle. */
.rn-header__logo img,
.rn-header .custom-logo,
.rn-header.is-scrolled .rn-header__logo img,
.rn-header.is-scrolled .custom-logo {
	width: 180px !important;
	transition: none !important;
}

@media (max-width: 1239.98px) {
	.rn-header__logo img,
	.rn-header .custom-logo,
	.rn-header.is-scrolled .rn-header__logo img,
	.rn-header.is-scrolled .custom-logo {
		width: 145px !important;
	}
}

@media (max-width: 600px) {
	.rn-header__logo img,
	.rn-header .custom-logo,
	.rn-header.is-scrolled .rn-header__logo img,
	.rn-header.is-scrolled .custom-logo {
		width: 118px !important;
	}
}

/* Underline no longer pre-promoted — that was my addition and it
   created a layer per nav item. */
.rn-nav .wp-block-navigation-item__content::after {
	will-change: auto;
}

/* =========================================================
   Video compositing — reduce the layer stack
   =========================================================
   Confirmed by elimination: no flicker without the video loaded,
   flicker with it. A playing video blended between a poster below
   and a gradient scrim above forces Chrome to re-blend the whole
   stack every frame, and any repaint flips the compositing path.

   Fixes: drop the isolation stacking context, retire the poster
   once the video is up, and collapse the opacity layer after the
   fade instead of leaving a transition on it forever.
   ========================================================= */

.rn-hero--video {
	isolation: auto;
}

/* Poster is removed from the layer stack once the video is showing. */
.rn-hero--video.video-active .rn-hero__poster {
	display: none;
}

/* Once faded in, drop opacity entirely so the layer can collapse. */
.rn-hero__video.is-settled {
	opacity: 1;
	transition: none;
}

/* Scrim no longer needs its own compositing context. */
.rn-hero__scrim {
	will-change: auto;
	transform: none;
}

/* Still hero — same framing as the video version, no media layer. */
.rn-hero--still {
	position: relative;
	isolation: auto;
	background: var(--wp--preset--color--ink);
	min-height: min(88vh, 800px);
	overflow: hidden;
	padding-top: calc(var(--rn-header-h) + clamp(2rem, 6vh, 4rem));
}

.rn-hero--still .rn-hero__inner { position: relative; z-index: 3; }
.rn-hero--still h1,
.rn-hero--still .rn-hero__sub { text-shadow: 0 2px 24px rgba(0,0,0,0.55); }

@media (max-width: 781px) {
	.rn-hero--still { min-height: min(78svh, 640px); }
}

@media (max-width: 480px) {
	.rn-hero--still { min-height: min(72svh, 560px); }
}

/* =========================================================
   Header transition: composite, don't paint
   =========================================================
   Animating background-color forces a paint on every frame of the
   transition. With a video layer active, each paint gives the browser
   a chance to re-evaluate the compositing path, which is what showed
   up as the page flicking between darker and brighter.

   opacity is a compositor-only property. Moving the solid background
   onto a pseudo-element and fading THAT means the transition never
   repaints the header at all.
   ========================================================= */

.rn-header {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	transition: padding 0.3s ease;
}

.rn-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #0E0C11;
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
	opacity: 0;
	transition: opacity 0.3s linear;
	pointer-events: none;
}

.rn-header.is-scrolled::before {
	opacity: 1;
}

/* Header content must sit above the fading background layer. */
.rn-header__inner {
	position: relative;
	z-index: 1;
}

/* =========================================================
   Mobile CTA sizing
   Full-width stacked buttons were far too heavy. Keep them
   side by side, auto width, smaller.
   ========================================================= */

@media (max-width: 781px) {
	.rn-cta-row {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.65rem;
	}

	.rn-cta-row .rn-btn {
		width: auto;
		flex: 0 1 auto;
		padding: 0.8rem 1.25rem;
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}
}

@media (max-width: 420px) {
	.rn-cta-row .rn-btn {
		padding: 0.75rem 1rem;
		font-size: 0.63rem;
		letter-spacing: 0.08em;
	}
}

/* Header CTA on mobile was oversized too. */
@media (max-width: 1239.98px) {
	.rn-header__cta .wp-block-button__link {
		padding: 0.65rem 1rem;
		font-size: 0.65rem;
		letter-spacing: 0.1em;
	}
}

/* =========================================================
   FLYER CAROUSEL + GRID
   ========================================================= */

.rn-carousel {
	position: relative;
	max-width: 1240px;
	margin-inline: auto;
}

.rn-carousel__track {
	display: flex;
	gap: clamp(0.9rem, 2vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 0.5rem 0.25rem 1.25rem;
	-webkit-overflow-scrolling: touch;
}

.rn-carousel__track::-webkit-scrollbar { display: none; }
.rn-carousel__track:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; border-radius: 10px; }

.rn-carousel .rn-flyer {
	flex: 0 0 clamp(230px, 30vw, 320px);
	scroll-snap-align: center;
	margin: 0;
}

.rn-carousel__nav {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(243, 217, 138, 0.45);
	background: rgba(11, 10, 13, 0.82);
	color: var(--wp--preset--color--gold);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}

.rn-carousel__nav:hover:not(:disabled) {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}

.rn-carousel__nav:disabled { opacity: 0.25; cursor: default; }
.rn-carousel__nav--prev { left: -8px; }
.rn-carousel__nav--next { right: -8px; }
.rn-carousel.is-static .rn-carousel__nav { display: none; }
.rn-carousel.is-static .rn-carousel__track { justify-content: center; flex-wrap: wrap; }

@media (max-width: 781px) {
	.rn-carousel__nav { width: 38px; height: 38px; font-size: 1.2rem; }
	.rn-carousel__nav--prev { left: -4px; }
	.rn-carousel__nav--next { right: -4px; }
}

/* ---------- Flyer card ---------- */

.rn-flyer {
	position: relative;
	margin: 0;
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-flyer:hover { border-color: rgba(243, 217, 138, 0.4); transform: translateY(-3px); }

.rn-flyer__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
	line-height: 0;
}

.rn-flyer__btn img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.rn-flyer__zoom {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.2rem 0.75rem 0.6rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	background: linear-gradient(180deg, transparent, rgba(11,10,13,0.85));
	opacity: 0;
	transition: opacity 0.25s ease;
	line-height: 1.2;
}

.rn-flyer__btn:hover .rn-flyer__zoom,
.rn-flyer__btn:focus-visible .rn-flyer__zoom { opacity: 1; }

.rn-flyer__badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
}

.rn-flyer__cap {
	padding: 0.9rem 1rem 1.1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rn-flyer__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--ivory);
	line-height: 1.25;
}

.rn-flyer__sub {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gold);
}

/* ---------- Static grid (events page) ---------- */

.rn-flyer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
	max-width: 1180px;
	margin-inline: auto;
}

/* ---------- Lightbox ---------- */

.rn-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(92vw, 900px);
	max-height: 92vh;
	overflow: visible;
	color: var(--wp--preset--color--ivory);
}

.rn-lightbox::backdrop {
	background: rgba(5, 4, 7, 0.92);
}

.rn-lightbox__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--ink-line);
}

.rn-lightbox__cap {
	margin: 0.9rem 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.rn-lightbox__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(243, 217, 138, 0.5);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--gold);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.rn-lightbox__close:hover { transform: rotate(90deg); }

@media (max-width: 600px) {
	.rn-lightbox__close { top: -14px; right: -6px; width: 38px; height: 38px; font-size: 1.2rem; }
}

/* =========================================================
   Hero video — single element, no crossfade
   =========================================================
   Previously a <picture> poster sat under the video and we
   crossfaded between them. Two elements, two rendering paths:
   images are colour-managed as sRGB, video frames through the
   video pipeline. Identical pixel values can still land at
   different brightness on screen, which is what kept showing
   up as "the still is darker than the video".

   Now the poster is an attribute on the video element itself.
   The browser swaps poster to first frame internally, and
   there is nothing to compare against.
   ========================================================= */

.rn-hero__video {
	opacity: 1 !important;
	transition: none !important;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
	background-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.rn-hero__video { object-position: center 50%; }
}

/* =========================================================
   Flyer card refinements
   Badge moved into the caption (it was covering the flyer's
   own headline). Cards get an even height so a wrapping
   title doesn't make one taller than its neighbours.
   ========================================================= */

.rn-flyer {
	display: flex;
	flex-direction: column;
}

.rn-flyer__badge {
	position: static;
	align-self: center;
	margin-bottom: 0.45rem;
}

.rn-flyer__cap {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-height: 5.75rem;
	padding: 0.85rem 0.9rem 1rem;
}

.rn-flyer__title {
	font-size: 0.98rem;
	line-height: 1.3;
	text-wrap: balance;
}

/* Tonight's special gets a gold edge instead of an overlay badge. */
.rn-flyer--today {
	border-color: rgba(243, 217, 138, 0.55);
	box-shadow: 0 0 26px rgba(243, 217, 138, 0.14);
}

/* Anchor links must clear the fixed header. */
:target,
[id] {
	scroll-margin-top: calc(var(--rn-header-h) + 1.5rem);
}

@media (max-width: 781px) {
	.rn-flyer__cap { min-height: 5.25rem; }
	.rn-flyer__title { font-size: 0.9rem; }
}

/* =========================================================
   PARALLAX BAND
   =========================================================
   background-attachment: fixed is the classic way to do this
   and it is broken on iOS Safari — ignored or badly janky.
   Instead the image is a real element translated by a
   scroll-driven animation, which runs on the compositor and
   works on iOS.

   Falls back to a plain static background where scroll-driven
   animations are unsupported, and for reduced-motion.
   ========================================================= */

.rn-parallax {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: min(78vh, 620px);
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--ink);
}

.rn-parallax__media {
	position: absolute;
	inset: -18% 0 -18% 0;   /* overscan so travel never exposes an edge */
	z-index: 0;
	pointer-events: none;
}

.rn-parallax__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Scroll-driven translate. Supported browsers only. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rn-parallax__media {
			animation: rn-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
			will-change: transform;
		}
	}
}

@keyframes rn-drift {
	from { transform: translate3d(0, -8%, 0); }
	to   { transform: translate3d(0, 8%, 0); }
}

/* Copy sits in the dark left side; only a light scrim needed. */
.rn-parallax__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(11,10,13,0.94) 0%,
		rgba(11,10,13,0.80) 34%,
		rgba(11,10,13,0.28) 58%,
		rgba(11,10,13,0.12) 100%);
}

.rn-parallax__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 3.75rem);
}

.rn-parallax__copy {
	max-width: 34rem;
	text-align: left;
}

.rn-parallax__copy .rn-eyebrow {
	justify-content: flex-start;
	margin-bottom: 1rem;
}

/* Left-aligned eyebrow: rule on one side only. */
.rn-parallax__copy .rn-eyebrow--ruled::before { display: none; }
.rn-parallax__copy .rn-eyebrow--ruled::after {
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
}

.rn-parallax__copy h2 {
	margin: 0 0 1rem;
	text-wrap: balance;
}

.rn-parallax__copy p {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.75;
	margin: 0 0 2rem;
	max-width: 30rem;
}

.rn-parallax__copy .rn-cta-row { justify-content: flex-start; }

/* Mobile: figure sits right, so darken further and centre the copy. */
@media (max-width: 781px) {
	.rn-parallax { min-height: min(70svh, 520px); }

	.rn-parallax__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.86) 0%,
			rgba(11,10,13,0.72) 45%,
			rgba(11,10,13,0.90) 100%);
	}

	.rn-parallax__media img { object-position: 72% center; }

	.rn-parallax__copy { max-width: none; text-align: center; }
	.rn-parallax__copy .rn-eyebrow { justify-content: center; }
	.rn-parallax__copy .rn-eyebrow--ruled::before { display: block; }
	.rn-parallax__copy p { margin-inline: auto; }
	.rn-parallax__copy .rn-cta-row { justify-content: center; }
}

/* =========================================================
   Parallax scrim — lighter over the figure
   The original ramp darkened the right side by up to 28%,
   on top of an image already averaging 18 luma there. Net
   result was invisible. The image's own left side is near
   pure black, so the scrim only needs to work in the middle.
   ========================================================= */

.rn-parallax__scrim {
	background: linear-gradient(90deg,
		rgba(11,10,13,0.92) 0%,
		rgba(11,10,13,0.72) 30%,
		rgba(11,10,13,0.30) 48%,
		rgba(11,10,13,0.06) 66%,
		rgba(11,10,13,0.00) 100%);
}

/* A touch of warmth at the base ties it to the section below. */
.rn-parallax::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 22%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--ink));
}

@media (max-width: 781px) {
	.rn-parallax__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.78) 0%,
			rgba(11,10,13,0.62) 45%,
			rgba(11,10,13,0.88) 100%);
	}
}

/* =========================================================
   PRINTED MENU CARDS
   Reuses the flyer lightbox button, but portrait pages need
   contain rather than cover or the top of the menu is cropped.
   ========================================================= */

.rn-printed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	max-width: 900px;
	margin-inline: auto;
}

.rn-printed__card {
	margin: 0;
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-printed__card:hover {
	border-color: rgba(243, 217, 138, 0.45);
	transform: translateY(-3px);
}

/* Menus are documents: show the whole page, never crop it. */
.rn-printed__card .rn-flyer__btn img {
	aspect-ratio: 1545 / 2000;
	object-fit: contain;
	background: #f4f1ea;
}

.rn-printed__cap {
	padding: 0.9rem 1rem 1.1rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--ivory);
	line-height: 1.3;
}

.rn-printed__cap span {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* Portrait documents need a taller lightbox than a square flyer. */
.rn-lightbox__img {
	max-height: 86vh;
}

/* =========================================================
   MENU PAGE — dish features
   A photo beside a price list, alternating sides down the
   page so it does not read as a repeating template.
   ========================================================= */

.rn-dish {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	max-width: 1120px;
	margin-inline: auto;
}

.rn-dish--flip .rn-dish__media { order: 2; }

.rn-dish__media {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--ink-line);
	line-height: 0;
	box-shadow: var(--wp--preset--shadow--card);
}

.rn-dish__media img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rn-dish__media:hover img { transform: scale(1.03); }

.rn-dish__body h3 {
	color: var(--wp--preset--color--gold);
	padding-bottom: 0.7rem;
	margin: 0 0 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
}

.rn-dish__note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.rn-dish { grid-template-columns: 1fr; gap: 1.5rem; }
	.rn-dish--flip .rn-dish__media { order: 0; }
}

/* ---------- Weeknight specials band ---------- */

.rn-band {
	background: linear-gradient(180deg, rgba(123,47,190,0.10), transparent 70%),
	            var(--wp--preset--color--ink-raised);
	border-top: 1px solid var(--wp--preset--color--ink-line);
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
	padding-block: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--60);
}

/* ---------- Weekday special rows ---------- */

.rn-week {
	max-width: 720px;
	margin-inline: auto;
	display: grid;
	gap: 0.15rem;
}

.rn-week__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	gap: 1rem;
	align-items: baseline;
	padding: 0.85rem 0.5rem;
	border-bottom: 1px dotted var(--wp--preset--color--ink-line);
}

.rn-week__row:last-child { border-bottom: 0; }

.rn-week__row.is-today {
	background: rgba(243, 217, 138, 0.06);
	border-radius: 6px;
}

.rn-week__day {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.rn-week__item {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	color: var(--wp--preset--color--ivory);
}

.rn-week__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.rn-week__row { grid-template-columns: 4rem 1fr auto; gap: 0.6rem; padding: 0.7rem 0.35rem; }
	.rn-week__day { font-size: 0.62rem; letter-spacing: 0.1em; }
	.rn-week__item { font-size: 0.95rem; }
	.rn-week__price { font-size: 1rem; }
}

/* =========================================================
   Dish rows — consistent image width on both sides
   Reversing visual order with `order` left the media in the
   wider column on flipped rows, so images alternated 477px
   and 584px down the page. Swap the template instead.
   ========================================================= */

.rn-dish {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: start;
}

.rn-dish--flip {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

/* Keep a tall portrait from towering over its price list. */
.rn-dish__media img {
	max-height: 620px;
	object-fit: cover;
	object-position: center 38%;
}

/* The body column reads better with a little breathing room
   when the image is short (the wide dessert shot). */
.rn-dish__body { padding-top: 0.25rem; }

@media (max-width: 781px) {
	.rn-dish,
	.rn-dish--flip {
		grid-template-columns: 1fr;
	}

	.rn-dish__media img {
		max-height: 420px;
		object-position: center 42%;
	}
}

/* =========================================================
   Dish rows — equal height columns
   Tops aligned but bottoms ran ragged, by as much as 275px
   on the shortest text block. Stretch the media to the row
   height and centre short copy inside its cell so both
   columns always finish flush.
   ========================================================= */

.rn-dish {
	align-items: stretch;
}

.rn-dish__media {
	min-height: 420px;
	height: 100%;
}

.rn-dish__media img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center 42%;
}

.rn-dish__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
}

/* Price lists should sit top-aligned; only short copy centres. */
.rn-dish__body:has(.rn-menu-item) {
	justify-content: flex-start;
}

@media (max-width: 781px) {
	.rn-dish__media {
		min-height: 0;
		height: auto;
	}

	.rn-dish__media img {
		height: auto;
		max-height: 420px;
	}

	.rn-dish__body {
		display: block;
	}
}

/* =========================================================
   Section gutters
   Sections only had block padding. On desktop the inner
   max-widths left natural margins so it looked fine, but on
   a phone the content ran flush to both edges and prices
   were clipped off the right.
   ========================================================= */

.rn-section,
.rn-band,
.rn-cta-band,
.rn-parallax__inner {
	padding-inline: clamp(1.25rem, 5vw, 3.75rem);
	box-sizing: border-box;
}

/* Nothing inside a section may exceed the gutter. */
.rn-section > *,
.rn-band > * {
	max-width: 100%;
}

.rn-dish,
.rn-menu-grid,
.rn-tiers,
.rn-week,
.rn-printed,
.rn-section__head {
	box-sizing: border-box;
}

/* Long dish names must wrap rather than push the price out of view. */
.rn-menu-item {
	gap: 0.75rem;
}

.rn-menu-item__name {
	min-width: 0;
	overflow-wrap: break-word;
}

.rn-menu-item__price {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.rn-section,
	.rn-band,
	.rn-cta-band {
		padding-inline: 1.15rem;
	}

	.rn-menu-item__name { font-size: 0.9rem; }
	.rn-menu-item__price { font-size: 1rem; }
}

/* =========================================================
   Top-level block gap
   =========================================================
   The header lives in a template part whose wrapper collapses
   to zero height, because the header itself is position:fixed.
   WordPress still applies its 24px blockGap to the next
   sibling, so 24px of bare page background showed as a black
   strip above the hero. Same gap sat above the footer.

   Sections manage their own vertical rhythm, so the gap
   between the three top-level blocks is not wanted.
   ========================================================= */

.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Hero and footer must be able to run flush to the viewport edges. */
.wp-site-blocks > main {
	margin: 0 !important;
	padding-block: 0;
}

/* =========================================================
   HOME FEATURE BLOCK
   Split layout directly under the hero. Reuses the dish grid
   for equal-height columns, with a heavier treatment since
   this is the highest value conversion on the page.
   ========================================================= */

.rn-feature {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
}

/* A faint purple wash separates it from the hero above. */
.rn-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(123, 47, 190, 0.09), transparent 65%);
}

.rn-dish--feature {
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
	max-width: 1180px;
}

.rn-dish--feature .rn-dish__media {
	min-height: 0;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lift);
}

.rn-dish--feature .rn-dish__body {
	justify-content: center;
}

.rn-dish--feature .rn-eyebrow {
	justify-content: flex-start;
	margin-bottom: 0.9rem;
}

.rn-dish--feature .rn-eyebrow--ruled::before { display: none; }

.rn-dish--feature h2 {
	margin: 0 0 1rem;
	text-wrap: balance;
}

.rn-dish--feature .rn-lead {
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

.rn-dish--feature .rn-cta-row {
	justify-content: flex-start;
	margin-top: 1.75rem;
}

/* Spec list */
.rn-feature__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.rn-feature__list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

.rn-feature__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

@media (max-width: 781px) {
	.rn-feature { padding-block: 3rem; }

	.rn-dish--feature { gap: 1.5rem; }

	.rn-dish--feature .rn-dish__body {
		text-align: center;
		display: block;
	}

	.rn-dish--feature .rn-eyebrow { justify-content: center; }
	.rn-dish--feature .rn-eyebrow--ruled::before { display: block; }
	.rn-dish--feature .rn-lead { margin-inline: auto; }
	.rn-dish--feature .rn-cta-row { justify-content: center; }

	.rn-feature__list {
		display: inline-grid;
		text-align: left;
		margin-inline: auto;
	}

	.rn-dish--feature .rn-dish__media { min-height: 0; }
	.rn-dish--feature .rn-media-placeholder { min-height: 260px !important; }
}

/* =========================================================
   Feature pills + alternating feature blocks
   ========================================================= */

.rn-pills {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.rn-pills li {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	border: 1px solid rgba(243, 217, 138, 0.35);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.rn-pills li:hover {
	border-color: var(--wp--preset--color--gold);
	background: rgba(243, 217, 138, 0.06);
}

.rn-feature__note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.25rem;
}

/* Second feature block leans the wash the other way so the two
   splits read as a rhythm rather than a repeated template. */
.rn-feature--alt::before {
	background: linear-gradient(180deg, transparent, rgba(123, 47, 190, 0.08) 70%);
}

@media (max-width: 781px) {
	.rn-pills { justify-content: center; }
	.rn-feature__note { text-align: center; }
}

/* =========================================================
   Silhouette in a split column
   The source is 16:9 with the figure sitting right of centre
   and a near-black left two thirds. Cropping it to a portrait
   column from the centre would cut her out entirely, so pull
   the framing across to keep her in shot.
   ========================================================= */

.rn-dish__media--silhouette img {
	object-position: 74% center;
}

/* A gold hairline picks up the rim light in the image. */
.rn-dish__media--silhouette {
	border-color: rgba(243, 217, 138, 0.22);
}

@media (max-width: 781px) {
	/* Stacked, the column is wide and short, so ease the crop back. */
	.rn-dish__media--silhouette img {
		object-position: 68% center;
		max-height: 300px;
	}
}

/* =========================================================
   GALLERY
   Masonry-ish grid that takes portrait and landscape items
   side by side without cropping either badly.
   ========================================================= */

.rn-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-rows: 220px;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	max-width: 1180px;
	margin-inline: auto;
}

.rn-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--ink-line);
	background: var(--wp--preset--color--ink-raised);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-gallery__item:hover {
	border-color: rgba(243, 217, 138, 0.4);
	transform: translateY(-3px);
}

/* Portrait items take two rows so they are not squashed. */
.rn-gallery__item--tall { grid-row: span 2; }
.rn-gallery__item--wide { grid-column: span 2; }

.rn-gallery__item img,
.rn-gallery__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rn-gallery__item figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 2.5rem 0.9rem 0.8rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	background: linear-gradient(180deg, transparent, rgba(11,10,13,0.85));
	pointer-events: none;
}

/* Play control. The file is only fetched when this is pressed,
   so a gallery of clips costs nothing until someone wants one. */
.rn-gallery__play {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: rgba(11, 10, 13, 0.25);
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.3s ease, opacity 0.3s ease;
}

.rn-gallery__play span {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1px solid rgba(243, 217, 138, 0.6);
	background: rgba(11, 10, 13, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	padding-left: 4px;
	transition: transform 0.3s ease, background 0.3s ease;
}

.rn-gallery__play:hover span {
	transform: scale(1.08);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.rn-gallery__item.is-playing .rn-gallery__play { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
	.rn-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
	}
	.rn-gallery__play span { width: 48px; height: 48px; font-size: 1rem; }
	.rn-gallery__item figcaption { font-size: 0.62rem; padding: 2rem 0.6rem 0.6rem; }
}

/* =========================================================
   BACKGROUND VIDEO BAND
   The source is portrait phone footage, so at full width only
   a horizontal slice of the frame shows. That is fine for
   atmosphere behind copy, but the crop position matters: bias
   slightly high so the pole and figure land in the strip
   rather than just the floor.
   ========================================================= */

.rn-vband {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: min(56vh, 480px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--wp--preset--color--ink);
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3.75rem);
}

.rn-vband__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rn-vband__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
	opacity: 0;
	transition: opacity 900ms ease;
}

.rn-vband__video.is-ready { opacity: 1; }

/* Poster shows until the video is up, through the same element. */
.rn-vband__media::after { content: none; }

/*
 * Heavy scrim. The footage swings about 34 luma as the club
 * lights move, so the copy needs a guaranteed floor of contrast
 * rather than relying on whatever frame happens to be showing.
 */
.rn-vband__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(70% 70% at 50% 50%, rgba(11,10,13,0.55) 0%, rgba(11,10,13,0.82) 100%),
		linear-gradient(180deg, rgba(11,10,13,0.85) 0%, rgba(11,10,13,0.45) 40%, rgba(11,10,13,0.88) 100%);
}

.rn-vband__inner {
	position: relative;
	z-index: 2;
	max-width: 42rem;
}

.rn-vband__inner h2 {
	margin: 0 0 0.9rem;
	text-shadow: 0 2px 22px rgba(0,0,0,0.6);
}

.rn-vband__inner .rn-lead {
	margin: 0 0 1.75rem;
	text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

.rn-vband__inner .rn-cta-row { justify-content: center; }

/* Reduced motion: poster only, video never fetched. */
@media (prefers-reduced-motion: reduce) {
	.rn-vband__video { display: none !important; }
	.rn-vband__media {
		background-image: url("/wp-content/uploads/2026/08/rn-room-bg-poster_2.webp");
		background-size: cover;
		background-position: center 42%;
	}
}

@media (max-width: 781px) {
	.rn-vband { min-height: min(48vh, 380px); }
	.rn-vband__video { object-position: center 38%; }
}

/* =========================================================
   FEATURE SECTION WITH VIDEO BEHIND
   Portrait phone footage sitting behind a whole section. On a
   phone that shows about 55% of the frame and reads well; on a
   wide desktop it is a narrow strip, so the scrim carries most
   of the weight there and the video is pure texture.
   ========================================================= */

.rn-feature--video {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* The plain purple wash is replaced by the footage. */
.rn-feature--video::before { content: none; }

.rn-feature__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--ink);
}

.rn-feature__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	opacity: 0;
	transition: opacity 900ms ease;
}

.rn-feature__video.is-ready { opacity: 1; }

/*
 * Two-layer scrim. Vertical for overall readability, plus a soft
 * horizontal pass that sits heavier under the copy column so the
 * text always has contrast no matter which frame is showing.
 */
.rn-feature__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11,10,13,0.55) 0%, rgba(11,10,13,0.72) 45%, rgba(11,10,13,0.88) 100%),
		linear-gradient(180deg, rgba(11,10,13,0.80) 0%, rgba(11,10,13,0.50) 35%, rgba(11,10,13,0.85) 100%);
}

.rn-feature--video .rn-dish {
	position: relative;
	z-index: 2;
}

.rn-feature--video h2,
.rn-feature--video .rn-lead,
.rn-feature--video .rn-feature__list li {
	text-shadow: 0 2px 20px rgba(0,0,0,0.65);
}

/* The room image sits over the video, so give it a solid backing
   and a lift or it reads as floating. */
.rn-feature--video .rn-dish__media {
	background: var(--wp--preset--color--ink);
	box-shadow: 0 26px 70px rgba(0,0,0,0.7);
}

/* Reduced motion: poster only, video never fetched. */
@media (prefers-reduced-motion: reduce) {
	.rn-feature__video { display: none !important; }
	.rn-feature__bg {
		background-image: url("/wp-content/uploads/2026/08/rn-room-bg-poster_2.webp");
		background-size: cover;
		background-position: center 40%;
	}
}

@media (max-width: 781px) {
	/* Phone shows over half the frame, so ease the scrim back and
	   let more of the footage through. */
	.rn-feature__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.72) 0%,
			rgba(11,10,13,0.55) 40%,
			rgba(11,10,13,0.86) 100%);
	}

	.rn-feature__video { object-position: center 36%; }
}

/* =========================================================
   VIDEO FEATURE SECTION
   =========================================================
   The previous version put a room image on top of video of the
   same room, and the image landed exactly over the figure on
   the pole. The footage is the visual now; copy sits over it.

   Aspect-ratio rather than min-height matters here: the source
   is 576x1024, and if the section is taller than that aspect
   allows, cover crops the sides instead of the top and bottom
   and the framing controls stop working.
   ========================================================= */

.rn-vfeature {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--wp--preset--color--ink);
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3.75rem);
	min-height: min(78vh, 700px);
}

.rn-vfeature__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--ink);
}

.rn-vfeature__bg .rn-feature__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figure and pole sit in the upper half of the frame. */
	object-position: center 30%;
	display: block;
	opacity: 0;
	transition: opacity 900ms ease;
}

.rn-vfeature__bg .rn-feature__video.is-ready { opacity: 1; }

.rn-vfeature__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(11,10,13,0.86) 0%,
		rgba(11,10,13,0.55) 30%,
		rgba(11,10,13,0.72) 62%,
		rgba(11,10,13,0.92) 100%);
}

.rn-vfeature__inner {
	position: relative;
	z-index: 2;
	max-width: 40rem;
}

.rn-vfeature__inner h2 {
	margin: 0 0 1rem;
	text-shadow: 0 2px 24px rgba(0,0,0,0.75);
}

.rn-vfeature__inner .rn-lead {
	margin: 0 auto 1.5rem;
	max-width: 34rem;
	text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}

.rn-vfeature__inner .rn-eyebrow { justify-content: center; margin-bottom: 1rem; }

.rn-vfeature__inner .rn-feature__list {
	display: inline-grid;
	text-align: left;
	margin: 0 auto 1.75rem;
}

.rn-vfeature__inner .rn-feature__list li {
	text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}

.rn-vfeature__inner .rn-cta-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.rn-vfeature__bg .rn-feature__video { display: none !important; }
	.rn-vfeature__bg {
		background-image: url("/wp-content/uploads/2026/08/rn-room-bg-poster_2.webp");
		background-size: cover;
		background-position: center 30%;
	}
}

@media (max-width: 781px) {
	.rn-vfeature {
		min-height: min(88vh, 720px);
		padding-block: 3.5rem;
	}

	/* Phone shows most of the frame, so ease the scrim and let
	   the footage carry more of the section. */
	.rn-vfeature__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.80) 0%,
			rgba(11,10,13,0.42) 26%,
			rgba(11,10,13,0.62) 58%,
			rgba(11,10,13,0.90) 100%);
	}

	.rn-vfeature__bg .rn-feature__video { object-position: center 26%; }
}

/* =========================================================
   Video feature — framing fix
   =========================================================
   At 720px tall on a 390px viewport the section aspect (0.54)
   was almost identical to the source (0.5625), so cover had no
   vertical overflow to work with and object-position did
   nothing at all. Shortening the section restores the crop,
   and biasing it high puts the figure and pole in frame.
   ========================================================= */

.rn-vfeature {
	min-height: 0;
	aspect-ratio: auto;
}

.rn-vfeature__bg .rn-feature__video {
	object-position: center 22%;
}

@media (max-width: 781px) {
	/* Deliberately wider than the source aspect so there is
	   vertical overflow left to position. */
	.rn-vfeature {
		min-height: 0;
		padding-block: 3rem;
	}

	.rn-vfeature__bg .rn-feature__video {
		object-position: center 14%;
	}

	/* Lighten the top of the scrim: that is where the figure is. */
	.rn-vfeature__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.55) 0%,
			rgba(11,10,13,0.35) 22%,
			rgba(11,10,13,0.68) 52%,
			rgba(11,10,13,0.92) 100%);
	}
}

@media (max-width: 600px) {
	.rn-vfeature__bg .rn-feature__video { object-position: center 10%; }
}

/* =========================================================
   Video feature — final framing
   The clip is now trimmed to the segment where the figure is
   present throughout, and she sits in the upper third of the
   frame. Bias the crop high enough to hold her without
   showing the ceiling above.
   ========================================================= */

.rn-vfeature__bg .rn-feature__video {
	object-position: center 20%;
}

@media (max-width: 781px) {
	.rn-vfeature__bg .rn-feature__video { object-position: center 18%; }
}

@media (max-width: 600px) {
	.rn-vfeature__bg .rn-feature__video { object-position: center 16%; }
}

/* Reduced-motion fallback uses the same framing. */
@media (prefers-reduced-motion: reduce) {
	.rn-vfeature__bg { background-position: center 20%; }
}

/* =========================================================
   FRAMED VIDEO
   Sits in a dish media slot in place of a photo. Aspect is
   fixed by the frame rather than the source, so a landscape
   or portrait file both fill it cleanly, and swapping the
   video for a still later needs no layout change.
   ========================================================= */

.rn-vframe {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(243, 217, 138, 0.28);
	background: #000;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(123, 47, 190, 0.12);
	aspect-ratio: 4 / 5;
	min-height: 0 !important;
	height: auto !important;
}

.rn-vframe__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	opacity: 0;
	transition: opacity 700ms ease;
}

.rn-vframe__video.is-ready { opacity: 1; }

/* Inner hairline so the gold edge reads as a frame, not a border. */
.rn-vframe::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(243, 217, 138, 0.16);
	border-radius: 6px;
	pointer-events: none;
	z-index: 2;
}

.rn-vframe__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 3rem 1.1rem 1rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	background: linear-gradient(180deg, transparent, rgba(11, 10, 13, 0.9));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.rn-vframe__video { opacity: 1; }
}

@media (max-width: 781px) {
	.rn-vframe {
		aspect-ratio: 16 / 10;
	}
	.rn-vframe::after { inset: 6px; }
	.rn-vframe__label { font-size: 0.62rem; padding: 2.2rem 0.85rem 0.8rem; }
}

/* =========================================================
   Framed video — show the whole frame
   =========================================================
   Forcing 4/5 on desktop and 16/10 on mobile cropped the
   source, which cut heads off. The frame now takes its shape
   from the video, so nothing is ever cropped at any width.
   ========================================================= */

.rn-vframe {
	aspect-ratio: auto !important;
	height: auto !important;
	min-height: 0 !important;
	display: block;
	line-height: 0;
}

.rn-vframe__video {
	width: 100%;
	height: auto !important;
	object-fit: contain;
	display: block;
	background: #000;
}

/* The dish grid stretches its columns to equal height, which would
   pull the frame out of shape again. Opt this one out. */
.rn-dish:has(.rn-vframe) {
	align-items: start;
}

@media (max-width: 781px) {
	.rn-vframe {
		aspect-ratio: auto !important;
		max-width: 100%;
		margin-inline: auto;
	}
}

/* =========================================================
   Framed video — correct aspect
   =========================================================
   WordPress reports 1024x576 because that is how the file is
   stored, but it carries rotation metadata and displays as
   576x1024 portrait. Forcing a landscape frame on it cropped
   the sides and cut heads off.

   The frame is now 9/16 to match the display shape, with
   object-fit: contain as insurance: if a replacement file ever
   has a different aspect it letterboxes rather than crops.
   ========================================================= */

.rn-vframe {
	aspect-ratio: 9 / 16 !important;
	height: auto !important;
	max-width: 420px;
	margin-inline: auto;
	line-height: 0;
}

.rn-vframe__video {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	background: #000;
	display: block;
}

/* Desktop: cap the height so a tall portrait does not tower
   over the copy column beside it. */
@media (min-width: 782px) {
	.rn-vframe {
		max-height: 620px;
		max-width: 350px;
	}
}

@media (max-width: 781px) {
	.rn-vframe {
		max-width: 320px;
		max-height: 60vh;
	}
}

/* =========================================================
   Private Rooms — mobile rhythm
   The room sections stacked as a left-aligned wall of text
   under a centred video. Give them a consistent centre-aligned
   treatment on phones and tighten the vertical spacing.
   ========================================================= */

@media (max-width: 781px) {
	.rn-dish:has(.rn-vframe) {
		gap: 1.75rem;
	}

	.rn-dish:has(.rn-vframe) .rn-dish__body {
		text-align: center;
	}

	.rn-dish:has(.rn-vframe) .rn-dish__body h3 {
		border-bottom-color: rgba(243, 217, 138, 0.25);
		padding-bottom: 0.65rem;
		margin-bottom: 1rem;
	}

	.rn-dish:has(.rn-vframe) .rn-lead {
		margin-inline: auto;
		font-size: 0.95rem;
	}

	/* Bulleted list centres as a block but stays left-aligned
	   inside, so the dots line up. */
	.rn-dish:has(.rn-vframe) .rn-feature__list {
		display: inline-grid;
		text-align: left;
		margin-inline: auto;
		gap: 0.5rem;
	}

	.rn-dish:has(.rn-vframe) .rn-dish__note {
		text-align: center;
		margin-inline: auto;
		max-width: 30rem;
	}

	.rn-dish:has(.rn-vframe) .rn-cta-row {
		justify-content: center !important;
	}
}

/* Slightly tighter list spacing everywhere: six items at the
   previous gap ran long on a phone. */
.rn-feature__list { gap: 0.5rem; }
.rn-feature__list li { font-size: 0.92rem; }

/* =========================================================
   Split sections with a feature list — consistent mobile
   =========================================================
   The previous rule keyed off :has(.rn-vframe), which only the
   Whale Room section has, so the VIP Rooms section stayed
   left-aligned while everything around it centred.

   Keying off the feature list catches every room-style split
   and leaves the menu page alone, since those use price rows.
   ========================================================= */

@media (max-width: 781px) {
	.rn-dish:has(.rn-feature__list) {
		gap: 1.75rem;
	}

	.rn-dish:has(.rn-feature__list) .rn-dish__body {
		text-align: center;
	}

	.rn-dish:has(.rn-feature__list) .rn-dish__body h3 {
		border-bottom-color: rgba(243, 217, 138, 0.25);
		padding-bottom: 0.65rem;
		margin-bottom: 1rem;
	}

	.rn-dish:has(.rn-feature__list) .rn-lead {
		margin-inline: auto;
		font-size: 0.95rem;
	}

	.rn-dish:has(.rn-feature__list) .rn-feature__list {
		display: inline-grid;
		text-align: left;
		margin-inline: auto;
		gap: 0.5rem;
	}

	.rn-dish:has(.rn-feature__list) .rn-dish__note {
		text-align: center;
		margin-inline: auto;
		max-width: 30rem;
	}

	.rn-dish:has(.rn-feature__list) .rn-cta-row {
		justify-content: center !important;
	}

	/* The placeholder in the VIP section should not tower on a
	   phone the way a full-height media column would. */
	.rn-dish:has(.rn-feature__list) .rn-media-placeholder {
		min-height: 240px !important;
	}
}

/* =========================================================
   Numbered steps on mobile
   The steps have no card around them, so left-aligned text
   left a ragged column with dead space beside it while every
   neighbouring section centred. Cards and form fields stay
   left-aligned: that is correct inside a bordered box and
   required for labelled inputs.
   ========================================================= */

@media (max-width: 781px) {
	.rn-steps {
		gap: 2rem;
		max-width: 32rem;
		margin-inline: auto;
	}

	.rn-step {
		text-align: center;
	}

	.rn-step__n {
		font-size: 2.25rem;
		margin-bottom: 0.4rem;
	}

	.rn-step h3 {
		font-size: 1.2rem;
		margin-bottom: 0.4rem;
	}

	.rn-step p {
		font-size: 0.92rem;
		max-width: 26rem;
		margin-inline: auto;
	}
}

/* =========================================================
   BOX SIZING
   =========================================================
   The theme never set a global border-box. Browsers default
   inputs and textareas to content-box, so width:100% plus
   padding pushed them ~32px past their grid cell on every
   form on the site. Selects looked fine only because the UA
   stylesheet gives them border-box.
   ========================================================= */

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

.rn-field input,
.rn-field select,
.rn-field textarea,
.rn-form-grid,
.rn-form-card,
.rn-aside-card {
	box-sizing: border-box;
	max-width: 100%;
}

/* Textareas must not be draggable wider than their column. */
.rn-field textarea {
	resize: vertical;
	min-width: 0;
	width: 100%;
}

/* Short hero: pages where the content below is the point. */
.rn-hero--short {
	min-height: 0;
	padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.rn-hero--short .rn-hero__sub { margin-bottom: 0; }

/* =========================================================
   LARGE CAROUSEL
   For pages where the flyers are the content rather than a
   supporting strip. Bigger cards on desktop; on a phone, one
   card at a time with a sliver of the next showing, which is
   what tells people it scrolls.
   ========================================================= */

.rn-carousel--lg {
	max-width: 1320px;
}

.rn-carousel--lg .rn-carousel__track {
	gap: clamp(1rem, 2.2vw, 1.75rem);
	padding-inline: 0.5rem;
	scroll-padding-inline: 0.5rem;
}

.rn-carousel--lg .rn-flyer {
	flex: 0 0 clamp(300px, 27vw, 400px);
	scroll-snap-align: start;
}

.rn-carousel--lg .rn-flyer__title { font-size: 1.1rem; }
.rn-carousel--lg .rn-flyer__cap { padding: 1.1rem 1.1rem 1.3rem; min-height: 0; }

.rn-carousel--lg .rn-carousel__nav {
	width: 54px;
	height: 54px;
	font-size: 1.7rem;
}

.rn-carousel--lg .rn-carousel__nav--prev { left: -14px; }
.rn-carousel--lg .rn-carousel__nav--next { right: -14px; }

/* ---------- One card at a time on a phone ---------- */

@media (max-width: 781px) {
	.rn-carousel--lg .rn-carousel__track {
		gap: 0.85rem;
		scroll-snap-type: x mandatory;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	/* 86% leaves an edge of the next card visible as an
	   affordance. A full 100% card looks static. */
	.rn-carousel--lg .rn-flyer {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}

	.rn-carousel--lg .rn-carousel__nav {
		width: 42px;
		height: 42px;
		font-size: 1.3rem;
		top: 38%;
	}

	.rn-carousel--lg .rn-carousel__nav--prev { left: 2px; }
	.rn-carousel--lg .rn-carousel__nav--next { right: 2px; }

	.rn-carousel--lg .rn-flyer__title { font-size: 1.05rem; }
}

/* Flyers are square artwork: show them whole, never cropped. */
.rn-carousel--lg .rn-flyer__btn img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* =========================================================
   Large carousel — break out of the section gutter on mobile
   The section pads 1.15rem each side, so an 86% card was only
   74% of the screen. Pulling the carousel out to full width
   and moving the inset onto the track lets cards get properly
   large while the first one still starts flush with the copy.
   ========================================================= */

@media (max-width: 781px) {
	.rn-carousel--lg {
		margin-inline: -1.15rem;
		width: calc(100% + 2.3rem);
		max-width: none;
	}

	.rn-carousel--lg .rn-carousel__track {
		padding-inline: 1.15rem;
		scroll-padding-inline: 1.15rem;
		gap: 0.8rem;
	}

	.rn-carousel--lg .rn-flyer {
		flex: 0 0 84vw;
		scroll-snap-align: center;
	}

	/* Arrows sit inside the card edge now that it runs wider. */
	.rn-carousel--lg .rn-carousel__nav--prev { left: 6px; }
	.rn-carousel--lg .rn-carousel__nav--next { right: 6px; }
}

@media (max-width: 480px) {
	.rn-carousel--lg .rn-flyer { flex: 0 0 87vw; }
}

/* =========================================================
   Large carousel — mobile card size
   87vw was near full-bleed and towered over everything else
   on the page. Around two thirds shows the current flyer
   clearly with a slice of the neighbour on each side, which
   reads as a carousel rather than a stack of full-width
   images.
   ========================================================= */

@media (max-width: 781px) {
	.rn-carousel--lg .rn-flyer {
		flex: 0 0 66vw;
		max-width: 300px;
	}

	.rn-carousel--lg .rn-carousel__track {
		gap: 0.7rem;
		padding-inline: 1.15rem;
		scroll-padding-inline: 1.15rem;
	}

	.rn-carousel--lg .rn-flyer__title { font-size: 0.95rem; }
	.rn-carousel--lg .rn-flyer__cap { padding: 0.8rem 0.75rem 0.95rem; }

	.rn-carousel--lg .rn-carousel__nav {
		width: 38px;
		height: 38px;
		font-size: 1.2rem;
		top: 40%;
	}
}

@media (max-width: 480px) {
	.rn-carousel--lg .rn-flyer {
		flex: 0 0 70vw;
		max-width: 270px;
	}
}

/* =========================================================
   CENTRE-STAGE CAROUSEL
   One card holds the middle at full brightness; neighbours
   bleed off both edges dimmed and slightly scaled back, so
   the eye goes straight to the active flyer. Tapping a side
   card brings it to centre instead of opening it.
   ========================================================= */

.rn-carousel--stage {
	max-width: 1400px;
	position: relative;
}

.rn-carousel--stage .rn-carousel__track {
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	/* Padding equal to half the leftover space lets the first
	   and last card reach the centre. */
	padding-inline: calc((100% - 420px) / 2);
	scroll-padding-inline: calc((100% - 420px) / 2);
	scroll-snap-type: x mandatory;
	padding-block: 1.5rem 2.25rem;
	overflow-y: hidden;
}

.rn-carousel--stage .rn-flyer {
	flex: 0 0 420px;
	max-width: 420px;
	scroll-snap-align: center;
	opacity: 0.38;
	transform: scale(0.88);
	transform-origin: center center;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
	            border-color 0.45s ease, box-shadow 0.45s ease;
	border-color: var(--wp--preset--color--ink-line);
	cursor: pointer;
}

.rn-carousel--stage .rn-flyer.is-active {
	opacity: 1;
	transform: scale(1);
	border-color: rgba(243, 217, 138, 0.45);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 60px rgba(123, 47, 190, 0.16);
	cursor: default;
}

/* Side cards should not lift on hover, they are not the subject. */
.rn-carousel--stage .rn-flyer:hover { transform: scale(0.88); }
.rn-carousel--stage .rn-flyer.is-active:hover { transform: scale(1); }

/* Only the active card gets its caption at full strength. */
.rn-carousel--stage .rn-flyer__cap {
	transition: opacity 0.45s ease;
	opacity: 0.7;
}
.rn-carousel--stage .rn-flyer.is-active .rn-flyer__cap { opacity: 1; }

/* Arrows sit over the dimmed neighbours. */
.rn-carousel--stage .rn-carousel__nav {
	width: 56px;
	height: 56px;
	font-size: 1.8rem;
	background: rgba(11, 10, 13, 0.7);
	border-color: rgba(243, 217, 138, 0.4);
	top: 45%;
	z-index: 5;
}

.rn-carousel--stage .rn-carousel__nav--prev { left: clamp(0.5rem, 4vw, 3rem); }
.rn-carousel--stage .rn-carousel__nav--next { right: clamp(0.5rem, 4vw, 3rem); }

@media (max-width: 1024px) {
	.rn-carousel--stage .rn-carousel__track {
		padding-inline: calc((100% - 340px) / 2);
		scroll-padding-inline: calc((100% - 340px) / 2);
	}
	.rn-carousel--stage .rn-flyer { flex: 0 0 340px; max-width: 340px; }
}

@media (max-width: 781px) {
	.rn-carousel--stage {
		margin-inline: -1.15rem;
		width: calc(100% + 2.3rem);
		max-width: none;
	}

	.rn-carousel--stage .rn-carousel__track {
		padding-inline: calc((100% - 68vw) / 2);
		scroll-padding-inline: calc((100% - 68vw) / 2);
		padding-block: 1rem 1.5rem;
		gap: 0.6rem;
	}

	.rn-carousel--stage .rn-flyer {
		flex: 0 0 68vw;
		max-width: 68vw;
		opacity: 0.32;
		transform: scale(0.9);
	}

	.rn-carousel--stage .rn-flyer.is-active { transform: scale(1); }
	.rn-carousel--stage .rn-flyer:hover { transform: scale(0.9); }
	.rn-carousel--stage .rn-flyer.is-active:hover { transform: scale(1); }

	.rn-carousel--stage .rn-carousel__nav {
		width: 40px;
		height: 40px;
		font-size: 1.25rem;
		top: 42%;
	}
	.rn-carousel--stage .rn-carousel__nav--prev { left: 4px; }
	.rn-carousel--stage .rn-carousel__nav--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.rn-carousel--stage .rn-flyer,
	.rn-carousel--stage .rn-carousel__track { transition: none; scroll-behavior: auto; }
}

/* =========================================================
   Caption-free flyer cards
   Event flyers carry their own title, date and details in the
   artwork, so the card is just the image. Without a caption
   the card must not keep the reserved caption height.
   ========================================================= */

.rn-flyer:not(:has(.rn-flyer__cap)) {
	display: block;
	line-height: 0;
}

.rn-flyer:not(:has(.rn-flyer__cap)) .rn-flyer__btn {
	border-radius: inherit;
}

.rn-flyer:not(:has(.rn-flyer__cap)) .rn-flyer__btn img {
	border-radius: inherit;
}

/* The stage carousel gets a little less vertical padding now
   that the cards are shorter. */
.rn-carousel--stage .rn-carousel__track {
	padding-block: 1.25rem 1.75rem;
}

@media (max-width: 781px) {
	.rn-carousel--stage .rn-carousel__track {
		padding-block: 0.9rem 1.25rem;
	}
}

/* =========================================================
   Video feature — clear the figure
   =========================================================
   Measured against a percentage grid on the source: the figure
   occupies roughly 0-40% of the frame, head around 28-38%. The
   crop was never wrong; the copy was landing on top of her.

   On a phone the video renders about 693px tall at 390px wide,
   so her head sits around 210-260px down. Content now starts
   below that, and the crop is pinned to the top of the frame.
   ========================================================= */

.rn-capline {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 1.1rem;
	text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}

@media (max-width: 781px) {
	.rn-vfeature {
		/* Room for the figure above the copy. */
		padding-top: clamp(255px, 72vw, 330px);
		padding-bottom: 3rem;
	}

	.rn-vfeature__bg .rn-feature__video {
		object-position: center top;
	}

	/* Scrim stays light where she is, then builds behind the text. */
	.rn-vfeature__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.30) 0%,
			rgba(11,10,13,0.22) 26%,
			rgba(11,10,13,0.72) 42%,
			rgba(11,10,13,0.90) 70%,
			rgba(11,10,13,0.95) 100%);
	}

	.rn-vfeature__bg {
		background-position: center top;
	}
}

@media (max-width: 480px) {
	.rn-vfeature { padding-top: clamp(230px, 76vw, 300px); }
}

/* Desktop only ever shows a narrow strip of a portrait frame,
   so it is texture. Bias it to catch the pole and lower body. */
@media (min-width: 782px) {
	.rn-vfeature__bg .rn-feature__video { object-position: center 14%; }
}

/* The framed video showed a black box before load because it had no
   poster. The poster now fills the frame and the video fades over it. */
.rn-vframe__video {
	background-color: #000;
	background-size: cover;
	background-position: center center;
}

.rn-vframe__video:not(.is-ready) { opacity: 1; }

/* =========================================================
   Feature shot
   A single wide image introducing a section, above the cards
   it belongs to. Used for the 24KT platter on the menu page.
   ========================================================= */

.rn-feature-shot {
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	max-width: 1000px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.25);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	position: relative;
	line-height: 0;
}

.rn-feature-shot img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rn-feature-shot:hover img { transform: scale(1.02); }

.rn-feature-shot figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 3rem 1.25rem 1.1rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	background: linear-gradient(180deg, transparent, rgba(11, 10, 13, 0.9));
	text-align: center;
	line-height: 1.3;
	pointer-events: none;
}

@media (max-width: 781px) {
	.rn-feature-shot figcaption {
		font-size: 0.62rem;
		padding: 2.2rem 0.9rem 0.85rem;
	}
}

/* =========================================================
   Gallery with real photography
   Twelve landscape shots and one portrait video. Mixing span
   widths gives the grid rhythm instead of a wall of identical
   rectangles, and lets the wide room shots breathe.
   ========================================================= */

.rn-gallery {
	grid-auto-rows: 200px;
	grid-auto-flow: dense; /* fills gaps left by the spanning items */
}

.rn-gallery__item--photo {
	grid-row: span 1;
}

/* Wide items span two columns and two rows: a proper feature. */
.rn-gallery__item--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.rn-gallery__item--photo img {
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rn-gallery__item--photo:hover img {
	transform: scale(1.05);
}

.rn-gallery__item--photo .rn-flyer__btn {
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.rn-gallery__item--photo .rn-flyer__btn img {
	aspect-ratio: auto;
	height: 100%;
	object-fit: cover;
}

/* Captions only on hover for photos: the grid is the subject,
   not the labels. They stay visible on touch devices. */
@media (hover: hover) {
	.rn-gallery__item--photo figcaption {
		opacity: 0;
		transition: opacity 0.35s ease;
	}
	.rn-gallery__item--photo:hover figcaption,
	.rn-gallery__item--photo:focus-within figcaption {
		opacity: 1;
	}
}

@media (max-width: 900px) {
	.rn-gallery { grid-auto-rows: 170px; }
}

@media (max-width: 600px) {
	.rn-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 130px;
		gap: 0.5rem;
	}

	/* On two columns a "wide" item is the full width. */
	.rn-gallery__item--wide {
		grid-column: span 2;
		grid-row: span 2;
	}

	.rn-gallery__item--tall {
		grid-row: span 3;
	}

	.rn-gallery__item figcaption {
		font-size: 0.58rem;
		padding: 1.6rem 0.5rem 0.5rem;
		letter-spacing: 0.1em;
	}
}

/* =========================================================
   MENU HERO — chef at the grill
   =========================================================
   The composition is asymmetric: grill and steaks on the left,
   chef on the right, coals along the bottom. On a wide screen
   the whole frame fits. On a phone a 16:9 frame cropped to a
   tall box would cut one side off entirely, so the crop shifts
   left to hold the grill and steaks, which is the subject.
   ========================================================= */

.rn-hero--menu {
	min-height: min(72vh, 620px);
}

.rn-hero--menu .rn-hero__video,
.rn-hero--menu .rn-hero__poster img {
	object-position: center 42%;
}

/*
 * Scrim reads left to right as well as top to bottom: the chef
 * on the right is the darkest part of the frame already, and
 * the coals bottom-left are the brightest, so the copy needs
 * cover in the middle and lower band.
 */
.rn-hero--menu .rn-hero__scrim {
	background:
		linear-gradient(180deg,
			rgba(11,10,13,0.72) 0%,
			rgba(11,10,13,0.42) 30%,
			rgba(11,10,13,0.68) 62%,
			rgba(11,10,13,0.92) 100%),
		radial-gradient(75% 60% at 50% 62%, rgba(11,10,13,0.45) 0%, transparent 100%);
}

@media (max-width: 781px) {
	.rn-hero--menu {
		min-height: min(66svh, 540px);
	}

	/* Hold the grill and steaks rather than centring on empty
	   counter. 34% horizontal keeps the meat in frame. */
	.rn-hero--menu .rn-hero__video,
	.rn-hero--menu .rn-hero__poster img {
		object-position: 34% 46%;
	}

	.rn-hero--menu .rn-hero__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.62) 0%,
			rgba(11,10,13,0.45) 26%,
			rgba(11,10,13,0.78) 58%,
			rgba(11,10,13,0.94) 100%);
	}
}

@media (max-width: 480px) {
	.rn-hero--menu .rn-hero__video,
	.rn-hero--menu .rn-hero__poster img {
		object-position: 30% 48%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rn-hero--menu .rn-hero__video { display: none !important; }
	.rn-hero--menu .rn-hero__media {
		background-image: url("/wp-content/uploads/2026/08/rn-chef-grill-poster.webp");
		background-size: cover;
		background-position: center 42%;
	}
}

/* =========================================================
   VERTICAL RHYTHM
   =========================================================
   Measured on a 390px phone: every section boundary was
   56px bottom padding + 24px block gap + 56px top padding
   = 136px of empty black, repeated ten times down the menu
   page. Two faults:

   1. rn-section--flush-top was not actually zeroing the top
      padding, so "flush" sections were padded on both sides.
   2. A 24px blockGap sat between every section on top of that.

   Sections own their own spacing; the gap between them is not
   wanted, and a flush-top section should sit directly under
   the one above it.
   ========================================================= */

main > section + section,
main .wp-block-html + .wp-block-html,
main > * + * {
	margin-block-start: 0 !important;
}

.rn-section--flush-top {
	padding-top: 0 !important;
}

/* Consecutive dish rows read as one continuous menu, so the
   space between them should be a single comfortable gap
   rather than two stacked paddings. */
.rn-section--flush-top + .rn-section--flush-top {
	padding-top: 0;
}

@media (max-width: 781px) {
	.rn-section {
		padding-block: 2.75rem;
	}

	.rn-section--flush-top {
		padding-top: 0 !important;
		padding-bottom: 2.75rem;
	}

	.rn-band,
	.rn-cta-band {
		padding-block: 3rem;
	}

	/* Stacked dish rows: tighten the space between the photo
	   and its price list. */
	.rn-dish {
		gap: 1.25rem;
	}

	.rn-section__head {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.rn-section { padding-block: 2.25rem; }
	.rn-section--flush-top { padding-bottom: 2.25rem; }
}

/* =========================================================
   Menu hero — lighter scrim
   The source video is a dark kitchen and the scrim was
   darkening it further, so on a phone it read as near-black.
   The file itself is now lifted, so the scrim only needs to
   protect the copy rather than set the mood.
   ========================================================= */

.rn-hero--menu .rn-hero__scrim {
	background:
		linear-gradient(180deg,
			rgba(11,10,13,0.55) 0%,
			rgba(11,10,13,0.22) 30%,
			rgba(11,10,13,0.42) 62%,
			rgba(11,10,13,0.80) 100%),
		radial-gradient(70% 55% at 50% 60%, rgba(11,10,13,0.32) 0%, transparent 100%);
}

@media (max-width: 781px) {
	.rn-hero--menu .rn-hero__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.48) 0%,
			rgba(11,10,13,0.26) 26%,
			rgba(11,10,13,0.55) 58%,
			rgba(11,10,13,0.85) 100%);
	}
}


/* =========================================================
   Stage carousel on mobile — arrows and card size
   =========================================================
   The carousel breaks out of the section gutter with a
   negative margin, so arrows positioned from its own edge
   sat off-screen. They now clear the viewport edge, and the
   cards are larger with the dead space above them removed.
   ========================================================= */

@media (max-width: 781px) {
	/* Arrows measured from the viewport, not the carousel's
	   overhanging edge. 1.15rem gutter + 6px clearance. */
	.rn-carousel--stage .rn-carousel__nav--prev {
		left: calc(1.15rem + 6px);
	}

	.rn-carousel--stage .rn-carousel__nav--next {
		right: calc(1.15rem + 6px);
	}

	.rn-carousel--stage .rn-carousel__nav {
		width: 44px;
		height: 44px;
		font-size: 1.4rem;
	}

	/* Bigger cards. 82vw with a peek of the neighbour each side. */
	.rn-carousel--stage .rn-flyer {
		flex: 0 0 82vw;
		max-width: 82vw;
	}

	.rn-carousel--stage .rn-carousel__track {
		padding-inline: calc((100% - 82vw) / 2);
		scroll-padding-inline: calc((100% - 82vw) / 2);
		padding-block: 0.25rem 0.75rem;
		gap: 0.55rem;
	}

	/* The heading section above the carousel was contributing a
	   full section's bottom padding on top of the track's own,
	   which left a large empty band. */
	#weeknight-specials {
		padding-bottom: 1.25rem !important;
	}
}

@media (max-width: 480px) {
	.rn-carousel--stage .rn-flyer {
		flex: 0 0 84vw;
		max-width: 84vw;
	}

	.rn-carousel--stage .rn-carousel__track {
		padding-inline: calc((100% - 84vw) / 2);
		scroll-padding-inline: calc((100% - 84vw) / 2);
	}
}

/* =========================================================
   Dish rows — the text sets the height, not the image
   =========================================================
   Portrait photos were rendering at their natural aspect
   (738px in a 532px column) and stretching the row, so the
   price list beside them padded out with up to 268px of dead
   space underneath.

   Taking the image out of the flow with absolute positioning
   means the row height comes from the copy, and the photo
   fills whatever that is.
   ========================================================= */

@media (min-width: 782px) {
	.rn-dish__media {
		position: relative;
		overflow: hidden;
		min-height: 420px;
		height: auto;
		align-self: stretch;
	}

	.rn-dish__media > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center 45%;
	}

	/* A very short block still needs a decent photo, and a very
	   long one should not make the image tower. */
	.rn-dish {
		align-items: stretch;
	}

	.rn-dish__body {
		min-height: 420px;
		max-height: 640px;
	}
}

/* Three printed pages side by side rather than two. */
.rn-printed--three {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	max-width: 1000px;
}

@media (max-width: 700px) {
	.rn-printed--three {
		grid-template-columns: repeat(2, 1fr);
	}
	.rn-printed--three .rn-printed__card:last-child {
		grid-column: 1 / -1;
		max-width: 60%;
		margin-inline: auto;
	}
}

/* =========================================================
   IMAGE BANDS
   =========================================================
   Wide strips carrying a section heading, with the price list
   on clean black underneath. Text over a two-column list is a
   readability problem; text over a dedicated band is not.

   Each band was generated with one side deliberately empty.
   Measured clear-side luma: champagne 8.6 (left), tequila 2.1
   (right), wine 6.4 (left). The heading sits on that side.
   ========================================================= */

.rn-bandimg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(220px, 26vw, 340px);
	background-color: var(--wp--preset--color--ink);
	margin-block: 0;
}

.rn-bandimg > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}

.rn-bandimg__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.rn-bandimg__copy {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.75rem);
}

.rn-bandimg__copy .rn-eyebrow {
	margin-bottom: 0.75rem;
}

.rn-bandimg__copy h2 {
	margin: 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

/* ---- Heading on the left, image subject on the right ---- */

.rn-bandimg--left .rn-bandimg__copy {
	text-align: left;
}

.rn-bandimg--left .rn-eyebrow { justify-content: flex-start; }
.rn-bandimg--left .rn-eyebrow--ruled::before { display: none; }

.rn-bandimg--left .rn-bandimg__scrim {
	background: linear-gradient(90deg,
		rgba(11,10,13,0.80) 0%,
		rgba(11,10,13,0.55) 38%,
		rgba(11,10,13,0.12) 62%,
		rgba(11,10,13,0.00) 100%);
}

/* ---- Heading on the right, image subject on the left ---- */

.rn-bandimg--right .rn-bandimg__copy {
	text-align: right;
}

.rn-bandimg--right .rn-eyebrow { justify-content: flex-end; }
.rn-bandimg--right .rn-eyebrow--ruled::after { display: none; }

.rn-bandimg--right .rn-bandimg__scrim {
	background: linear-gradient(270deg,
		rgba(11,10,13,0.80) 0%,
		rgba(11,10,13,0.55) 38%,
		rgba(11,10,13,0.12) 62%,
		rgba(11,10,13,0.00) 100%);
}

/* Hairlines top and bottom so the band reads as a divider. */
.rn-bandimg::before,
.rn-bandimg::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 1px;
	background: var(--wp--preset--color--ink-line);
	z-index: 3;
}
.rn-bandimg::before { top: 0; }
.rn-bandimg::after  { bottom: 0; }

/* ---------- Mobile ---------- */

@media (max-width: 781px) {
	/*
	 * A 2.36:1 strip in a 390px viewport shows less than half the
	 * frame, so side-by-side does not work. The heading centres
	 * over a vertical scrim and the crop shifts toward the
	 * bottles rather than the empty side.
	 */
	.rn-bandimg {
		min-height: 190px;
		text-align: center;
	}

	.rn-bandimg--left > img  { object-position: 72% center; }
	.rn-bandimg--right > img { object-position: 28% center; }

	.rn-bandimg--left .rn-bandimg__copy,
	.rn-bandimg--right .rn-bandimg__copy {
		text-align: center;
	}

	.rn-bandimg--left .rn-eyebrow,
	.rn-bandimg--right .rn-eyebrow {
		justify-content: center;
	}

	.rn-bandimg--left .rn-eyebrow--ruled::before,
	.rn-bandimg--right .rn-eyebrow--ruled::after {
		display: block;
	}

	.rn-bandimg--left .rn-bandimg__scrim,
	.rn-bandimg--right .rn-bandimg__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.55) 0%,
			rgba(11,10,13,0.72) 45%,
			rgba(11,10,13,0.85) 100%);
	}

	.rn-bandimg__copy h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}


/* Bottle page hero */
.rn-hero--bottle .rn-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rn-hero--bottle .rn-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
}

.rn-hero--bottle .rn-hero__inner { position: relative; z-index: 2; }

.rn-hero--bottle .rn-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg,
			rgba(11,10,13,0.78) 0%,
			rgba(11,10,13,0.48) 32%,
			rgba(11,10,13,0.66) 64%,
			rgba(11,10,13,0.92) 100%),
		radial-gradient(72% 58% at 50% 55%, rgba(11,10,13,0.42) 0%, transparent 100%);
}

.rn-hero--bottle h1,
.rn-hero--bottle .rn-hero__sub {
	text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}

@media (max-width: 781px) {
	.rn-hero--bottle .rn-hero__media img { object-position: 62% 45%; }
	.rn-hero--bottle .rn-hero__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.72) 0%,
			rgba(11,10,13,0.52) 30%,
			rgba(11,10,13,0.78) 62%,
			rgba(11,10,13,0.94) 100%);
	}
}

/* =========================================================
   Image bands — soften the joins, hold the bottle tops
   =========================================================
   Two problems on a phone:

   1. A 1px hairline between the hero and the first band made
      a hard seam. Replaced with a gradient fade so the band
      dissolves into the page rather than butting against it.

   2. A 2.36:1 strip in a 390px viewport crops hard, and the
      crop was centred, which cut the tops off the bottles.
      Taller bands plus a crop biased upward keeps them.
   ========================================================= */

/* Hairlines out, gradient fades in. */
.rn-bandimg::before,
.rn-bandimg::after {
	height: 56px;
	background: linear-gradient(180deg, var(--wp--preset--color--ink) 0%, transparent 100%);
	z-index: 2;
}

.rn-bandimg::after {
	background: linear-gradient(0deg, var(--wp--preset--color--ink) 0%, transparent 100%);
}

@media (max-width: 781px) {
	.rn-bandimg {
		min-height: 250px;
	}

	/* Bias the crop upward: the bottle necks and foils live in
	   the top third of every one of these frames. */
	.rn-bandimg--left > img  { object-position: 72% 22%; }
	.rn-bandimg--right > img { object-position: 28% 22%; }

	.rn-bandimg::before,
	.rn-bandimg::after {
		height: 40px;
	}

	/* The copy sits low in the band so it does not cover the
	   bottles the crop is now protecting. */
	.rn-bandimg {
		align-items: flex-end;
		padding-bottom: 1.5rem;
	}
}

/* The hero should also melt into the first band rather than
   ending on a hard edge. */
.rn-hero--bottle::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 90px;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(0deg, var(--wp--preset--color--ink) 0%, transparent 100%);
}

/* A section whose only job is to introduce the carousel below it
   should not carry a full section's bottom padding on top of the
   carousel's own top padding. */
.rn-section--tight-bottom {
	padding-bottom: 0.5rem !important;
}

.rn-section--tight-bottom .rn-section__head {
	margin-bottom: 0;
}

.rn-carousel--stage .rn-carousel__track {
	padding-block: 1rem 1.5rem;
}

@media (max-width: 781px) {
	.rn-section--tight-bottom { padding-bottom: 0.25rem !important; }
	.rn-carousel--stage .rn-carousel__track { padding-block: 0.5rem 1rem; }
}

/* =========================================================
   NAV SUBMENUS
   =========================================================
   These were removed early on because the alignment broke.
   The cause then was that WordPress positions the submenu
   from the list item while the theme had the item as an
   inline element with no positioning context, so the panel
   landed relative to the whole bar.

   Fixed by making each top-level item the positioning
   context and overriding WordPress's default panel styles
   rather than fighting them.
   ========================================================= */

.rn-nav .wp-block-navigation-item.has-child {
	position: relative;
}

/* The caret WordPress adds */
.rn-nav .wp-block-navigation__submenu-icon {
	margin-left: 0.3rem;
	padding: 0;
	opacity: 0.7;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.rn-nav .has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.rn-nav .has-child:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
	opacity: 1;
}

.rn-nav .wp-block-navigation__submenu-container {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 200px;
	padding: 0.5rem 0;
	margin: 0;
	background: #0E0C11;
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 10px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 120;
}

/* A hover bridge: without it the panel closes as the cursor
   crosses the gap between the item and the panel. */
.rn-nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.rn-nav .has-child:hover > .wp-block-navigation__submenu-container,
.rn-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.65rem 1.1rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--wp--preset--color--body);
	transition: color 0.2s ease, background 0.2s ease;
}

.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
	background: rgba(243, 217, 138, 0.06);
}

/* The underline sweep belongs to top-level items only. */
.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* ---------- Mobile overlay ---------- */

@media (max-width: 1239.98px) {
	/* In the overlay the submenu is always open and indented,
	   rather than needing a tap to reveal. Fewer taps to reach
	   a menu on a phone. */
	.rn-nav .wp-block-navigation__submenu-container {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0.25rem 0 0.5rem;
		min-width: 0;
	}

	.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		text-align: center;
		font-size: 0.8rem;
		padding: 0.5rem 0;
		color: var(--wp--preset--color--muted);
	}

	.rn-nav .wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* =========================================================
   Mobile overlay — no repeated parent
   =========================================================
   The parent is duplicated inside each dropdown because on
   desktop a caret reads as "opens a menu" and the top item
   gets skipped. In the overlay there is no caret and the
   parent is already a plain tappable row, so the duplicate
   just says the same thing twice.
   ========================================================= */

@media (max-width: 1239.98px) {
	/* Hide the first child of each submenu: that is the repeat. */
	.rn-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
		display: none;
	}

	/* The remaining children sit as a tighter indented group
	   under their parent. */
	.rn-nav .wp-block-navigation__submenu-container {
		padding-top: 0;
		padding-bottom: 0.35rem;
	}

	.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.78rem;
		letter-spacing: 0.12em;
		padding: 0.4rem 0;
		opacity: 0.75;
	}

	.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.rn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		opacity: 1;
		color: var(--wp--preset--color--gold);
	}
}

/* =========================================================
   BOTTLE MENU — Ace of Spades spotlight
   =========================================================
   A portrait photo beside short copy, sitting between the
   champagne list and the tequila band. Its own component
   rather than a reuse of .rn-dish, whose media column is
   tuned to stretch and crop beside price lists.
   ========================================================= */

.rn-spot {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: 1120px;
	margin-inline: auto;
	box-sizing: border-box;
}

.rn-spot__media {
	margin: 0;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.22);
	background: var(--wp--preset--color--ink-raised);
	box-shadow: var(--wp--preset--shadow--lift);
}

.rn-spot__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.rn-spot__body .rn-eyebrow {
	justify-content: flex-start;
	margin-bottom: 0.9rem;
}
.rn-spot__body .rn-eyebrow--ruled::before { display: none; }
.rn-spot__body h2 {
	margin: 0 0 1rem;
	text-wrap: balance;
}
.rn-spot__body .rn-lead {
	margin: 0 0 1rem;
	max-width: 34rem;
}
.rn-spot__note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0;
}
.rn-spot__body .rn-cta-row {
	justify-content: flex-start;
	margin-top: 1.75rem;
}

@media (max-width: 781px) {
	.rn-spot {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.rn-spot__media {
		aspect-ratio: 4 / 5;
		width: 100%;
		max-width: 420px;
		margin-inline: auto;
	}
	.rn-spot__body { text-align: center; }
	.rn-spot__body .rn-eyebrow { justify-content: center; }
	.rn-spot__body .rn-eyebrow--ruled::before { display: block; }
	.rn-spot__body .rn-lead { margin-inline: auto; }
	.rn-spot__body .rn-cta-row { justify-content: center; }
}


/* =========================================================
   GALLERY — portrait photos
   =========================================================
   The photo rule (span 1) landed after the tall rule (span 2)
   and beat it, so a portrait photo was squashed into one row.
   Give the combination its own rule so portraits stand two
   rows tall beside the wide features.
   ========================================================= */

.rn-gallery__item--photo.rn-gallery__item--tall {
	grid-row: span 2;
}

/* Upstairs gallery on the VIP Rooms page: a short row of
   portraits at their natural shape, not the masonry grid. */
.rn-gallery--upstairs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: auto;
	max-width: 960px;
}
.rn-gallery--upstairs .rn-gallery__item {
	grid-row: auto;
	grid-column: auto;
	aspect-ratio: 2 / 3;
}
@media (max-width: 781px) {
	.rn-gallery--upstairs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 0.5rem;
	}
}

/* =========================================================
   Tiles — six up
   =========================================================
   auto-fit puts six cards in a 4 + 2 row at laptop width, with
   two orphans. Cap the six-card grids at three across so they
   sit as two even rows; on a phone two across instead of a
   single tall stack.
   ========================================================= */

.rn-tiles--six {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 781px) {
	.rn-tiles--six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.rn-tiles--six .rn-tile {
		padding: 1rem;
	}
	.rn-tiles--six .rn-tile h3 {
		font-size: 1.05rem;
	}
	.rn-tiles--six .rn-tile p {
		font-size: 0.85rem;
	}
}


/* =========================================================
   Footer socials — centre the icon in its circle
   =========================================================
   Core's social-links stylesheet sets the list item to
   display:block at the same specificity as our flex rule and
   loads after it, so the icon sat in the top left corner of
   the 44px circle. Out-specify it and let the anchor fill the
   circle so the whole ring is the tap target.
   ========================================================= */

ul.rn-footer__social li.wp-social-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
}
ul.rn-footer__social li.wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	line-height: 0;
}
ul.rn-footer__social li.wp-social-link svg {
	width: 19px;
	height: 19px;
	display: block;
}


/* =========================================================
   Desktop dropdowns — centre under the parent
   =========================================================
   Core's navigation stylesheet sets the submenu's left offset
   at higher specificity than our left:50%, but our
   translateX(-50%) still applied, so the panel slid a full half
   width to the left and opened under the neighbouring item.
   Pin the left edge at 50% of the parent at core's specificity
   so the transform centres it as intended.
   ========================================================= */

@media (min-width: 1240px) {
	.rn-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
	.rn-nav .has-child > .wp-block-navigation__submenu-container {
		left: 50% !important;
		right: auto !important;
		top: 100% !important;
		transform: translateX(-50%) translateY(6px);
	}
	.rn-nav .has-child:hover > .wp-block-navigation__submenu-container,
	.rn-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
		transform: translateX(-50%) translateY(0);
	}
}


/* =========================================================
   Menu page — sub labels and platter descriptions
   =========================================================
   The Sept 2026 printed menu groups wings, handhelds and pizzas
   under one photo, and describes the tomahawk platters in prose
   rather than bullets.
   ========================================================= */

.rn-menu-sub {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 1.4rem 0 0.35rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
}
.rn-menu-sub span {
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	margin-left: 0.5rem;
}
.rn-tier__desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
	margin: 0 0 1.25rem;
}


/* Header background: fade in faster so a quick flick on a phone does
   not show hero text through the bar while the 300ms fade catches up. */
.rn-header::before {
	transition: opacity 0.16s linear;
}


/* =========================================================
   Header — faster solid, dark fade at rest
   =========================================================
   On a phone the hero headline slid under a still-transparent
   header for a beat. Two fixes: the solid background now fades in
   over 120ms instead of 300, and the header carries a dark top
   gradient even at rest so anything passing beneath it is already
   dimmed before the switch lands.
   ========================================================= */

.rn-header::before {
	transition: opacity 0.12s linear;
}
.rn-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(11,10,13,0.88) 0%, rgba(11,10,13,0.62) 60%, rgba(11,10,13,0) 100%);
}
.rn-header.is-scrolled::after {
	opacity: 0;
}


/* =========================================================
   Real venue photography, Sept 28 2026
   =========================================================
   Wide standalone photos (home dining, VIP Packages party
   shot) and the photo version of the home hero.
   ========================================================= */

.rn-wideshot {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.18);
	box-shadow: var(--wp--preset--shadow--lift);
	background: var(--wp--preset--color--ink-raised);
}
.rn-wideshot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rn-dish__media > img[src*='rn-photo-'] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rn-hero--photo .rn-hero__poster img {
	object-position: center 45%;
}


/* Photo hero: the venue photos are already dark, so the video
   hero's heavy scrim turned the room black. Lighter overall,
   darker only behind the headline and at the bottom edge. */
.rn-hero--photo .rn-hero__scrim {
	background:
		radial-gradient(60% 55% at 50% 48%, rgba(11,10,13,0.62) 0%, rgba(11,10,13,0.30) 65%, rgba(11,10,13,0.15) 100%),
		linear-gradient(180deg, rgba(11,10,13,0.70) 0%, rgba(11,10,13,0.20) 22%, rgba(11,10,13,0.20) 70%, rgba(11,10,13,0.95) 100%);
}


/* VIP Rooms hero: the couches and dance stage sit in the lower
   half of the private dance area photo, so frame lower. */
.rn-hero--photo .rn-hero__poster img[src*='rn-photo-private-dance'] {
	object-position: center 72%;
}


/* =========================================================
   VIP Rooms bar block: bar photo with the bartender inset
   ========================================================= */
.rn-duo {
	position: relative;
	overflow: visible !important;
}
.rn-duo .rn-duo__main {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
.rn-duo__inset {
	position: absolute;
	left: -1.25rem;
	bottom: -1.75rem;
	width: 38%;
	max-width: 220px;
	aspect-ratio: 2 / 3;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 3px solid var(--wp--preset--color--ink);
	box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(243,217,138,0.28);
	z-index: 2;
}
.rn-duo__inset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
@media (max-width: 781px) {
	.rn-duo .rn-duo__main { min-height: 0; aspect-ratio: 16 / 10; }
	.rn-duo__inset { left: 0.75rem; bottom: -1.5rem; width: 34%; }
	.rn-duo { margin-bottom: 1.75rem; }
}
/* Reservations hero: bar front sits low in the frame */
.rn-hero--photo .rn-hero__poster img[src*='rn-photo-main-bar'] { object-position: center 60%; }


/* Bottle Service hero: the backbar photo is busy and bright behind
   the copy, so darken the centre more than the other photo heroes. */
.rn-hero--photo:has(img[src*='rn-photo-backbar']) .rn-hero__scrim {
	background:
		radial-gradient(58% 60% at 50% 50%, rgba(11,10,13,0.78) 0%, rgba(11,10,13,0.48) 65%, rgba(11,10,13,0.28) 100%),
		linear-gradient(180deg, rgba(11,10,13,0.70) 0%, rgba(11,10,13,0.25) 22%, rgba(11,10,13,0.25) 70%, rgba(11,10,13,0.95) 100%);
}


/* =========================================================
   Home page refinement, Sept 29 2026
   =========================================================
   1. Sections butt together. The 24px block gap showed as a
      thin seam wherever a section carries its own tint.
   2. One vertical rhythm on phones instead of 36px sections
      next to 98px and 285px ones.
   3. The Private Entertainment band now uses a real photo, so
      the scrim is lighter and, on phones, the copy sits low
      with the entertainer visible above it.
   ========================================================= */

body.home .wp-block-post-content > section,
body.home .entry-content > section {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

body.home .rn-section {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.rn-parallax--photo { min-height: min(84vh, 680px); }
.rn-parallax--photo .rn-parallax__media img { object-position: center 42%; }
.rn-parallax--photo .rn-parallax__scrim {
	background: linear-gradient(90deg,
		rgba(11,10,13,0.90) 0%,
		rgba(11,10,13,0.70) 28%,
		rgba(11,10,13,0.22) 50%,
		rgba(11,10,13,0.05) 70%,
		rgba(11,10,13,0.00) 100%);
}

@media (max-width: 781px) {
	body.home .rn-section { padding-block: 3.5rem; }
	.rn-parallax--photo {
		min-height: 620px;
		align-items: flex-end;
	}
	.rn-parallax--photo .rn-parallax__media img { object-position: 40% 38%; }
	.rn-parallax--photo .rn-parallax__scrim {
		background: linear-gradient(180deg,
			rgba(11,10,13,0.35) 0%,
			rgba(11,10,13,0.05) 28%,
			rgba(11,10,13,0.35) 52%,
			rgba(11,10,13,0.92) 78%,
			rgba(11,10,13,1) 100%);
	}
	.rn-parallax--photo .rn-parallax__inner { padding-bottom: 3rem; }
}


/* Entertainer band, desktop: the photos are portrait, so a full
   width cover crop zoomed in on the torso. Give the photo the
   right side of the band instead, fading into the dark copy side,
   so the whole figure and the pole read. */
@media (min-width: 782px) {
	.rn-parallax--photo .rn-parallax__media {
		left: 40%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
	}
	.rn-parallax--photo .rn-parallax__media img { object-position: center 45%; }
	.rn-parallax--photo .rn-parallax__scrim {
		background: linear-gradient(90deg, rgba(11,10,13,0.55) 0%, rgba(11,10,13,0.15) 45%, rgba(11,10,13,0) 70%);
	}
}


/* Band photo: blond entertainer, kneeling. Frame from head to knees. */
.rn-parallax--photo .rn-parallax__media img[src*='rn-band-blond'] { object-position: 55% 48%; }
@media (max-width: 781px) {
	.rn-parallax--photo .rn-parallax__media img[src*='rn-band-blond'] { object-position: 55% 30%; }
}


/* Band photo, desktop: the blond portrait was being cropped by the
   parallax overscan and drift. Hold it still, give it the right half
   at full band height, and frame from the top so her head is never
   cut. */
@media (min-width: 782px) {
	.rn-parallax--photo:has(img[src*='rn-band-blond']) { min-height: min(86vh, 720px); }
	.rn-parallax--photo:has(img[src*='rn-band-blond']) .rn-parallax__media {
		inset: 0 0 0 48%;
		animation: none;
		transform: none;
	}
	.rn-parallax--photo .rn-parallax__media img[src*='rn-band-blond'] { object-position: 50% 18%; }
}

/* Logged in only: below 600px WordPress lets its admin bar scroll
   away, so the 46px header offset left a see through gap above the
   header. Visitors never see the admin bar. */
@media (max-width: 600px) {
	.admin-bar .rn-header { top: 0; }
}


/* =========================================================
   Home: more entertainers, Sept 29 2026
   ========================================================= */

/* Featured Daily strip: tall portrait cards on the flyer carousel. */
.rn-carousel--girls .rn-carousel__track {
	gap: 1rem;
	scroll-padding-inline: clamp(1.25rem, 5vw, 3.75rem);
}
.rn-carousel--girls .rn-flyer.rn-girl {
	flex: 0 0 clamp(220px, 64vw, 270px);
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.22);
	background: var(--wp--preset--color--ink-raised);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	position: relative;
}
.rn-carousel--girls .rn-girl .rn-flyer__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.rn-carousel--girls .rn-girl img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	height: auto;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.rn-carousel--girls .rn-girl:hover img { transform: scale(1.04); }
.rn-carousel--girls .rn-girl::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 28%;
	background: linear-gradient(180deg, transparent, rgba(11, 10, 13, 0.55));
	pointer-events: none;
}
.rn-carousel--girls .rn-flyer__zoom { display: none; }

/* Own the Room: portrait photo of the two girls with the bottle. */
body.home #vip .rn-dish__media > img.rn-home-girls-img {
	width: 100%;
	height: 100%;
	min-height: 520px;
	object-fit: cover;
	object-position: 50% 32%;
	display: block;
}
@media (max-width: 781px) {
	body.home #vip .rn-dish__media > img.rn-home-girls-img {
		min-height: 0;
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

/* Closing band with a photo: Shay on the right, copy on the left. */
.rn-cta-band--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: min(80vh, 640px);
	text-align: left;
}
.rn-cta-band__media {
	position: absolute;
	inset: 0 0 0 46%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.rn-cta-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% 30%;
	display: block;
}
.rn-cta-band__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(11,10,13,0.35) 0%, rgba(11,10,13,0.1) 50%, rgba(11,10,13,0) 100%),
		linear-gradient(180deg, rgba(11,10,13,0.4) 0%, transparent 18%, transparent 82%, rgba(11,10,13,0.6) 100%);
}
.rn-cta-band__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}
.rn-cta-band--photo .rn-cta-band__inner > * { max-width: 34rem; }
.rn-cta-band--photo .rn-eyebrow { justify-content: flex-start; }
.rn-cta-band--photo .rn-eyebrow--ruled::before { display: none; }
.rn-cta-band--photo .rn-cta-row { justify-content: flex-start; }
.rn-cta-band--photo .rn-lead { margin-inline: 0; }
.rn-cta-band--photo .rn-hours-strip { text-align: left; }

@media (max-width: 781px) {
	.rn-cta-band--photo {
		display: block;
		min-height: 0;
		text-align: center;
		padding-top: 0 !important;
	}
	.rn-cta-band__media {
		position: relative;
		inset: auto;
		height: 440px;
		margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3.75rem));
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	}
	.rn-cta-band__media img { object-position: 45% 25%; }
	.rn-cta-band__scrim { display: none; }
	.rn-cta-band__inner { margin-top: -5rem; }
	.rn-cta-band--photo .rn-cta-band__inner > * { max-width: none; }
	.rn-cta-band--photo .rn-eyebrow { justify-content: center; }
	.rn-cta-band--photo .rn-eyebrow--ruled::before { display: block; }
	.rn-cta-band--photo .rn-cta-row { justify-content: center; }
	.rn-cta-band--photo .rn-lead { margin-inline: auto; }
	.rn-cta-band--photo .rn-hours-strip { text-align: center; }
}

/* =========================================================
   Section rhythm (Sept 30, 2026 review)
   The section token in theme.json came down to
   clamp(3.5rem, 7vw, 6rem), the value the home page already
   used. A section that ends with its heading block (an intro
   with a button, like the Steakhouse lunch teaser) also had the
   heading's bottom margin stacked on its padding, which left
   about 370px above the closing band. Sections that zero their
   own bottom padding use that margin as the gap to the next
   section, so they keep it.
   ========================================================= */

.rn-section:not([style*="padding-bottom:0"]) > .rn-section__head:last-child {
	margin-bottom: 0;
}

/* Pages without a hero clear the fixed header (legal pages, 404, blog
   index). The earlier main:not(:has(.rn-hero)) rule never won: the
   later .wp-site-blocks > main { padding-block: 0 } has the same
   specificity, so only the templates' inline padding kept titles
   down, and on phones that was less than the header's height. */

.wp-site-blocks > main:not(:has(.rn-hero)) {
	padding-top: calc(var(--rn-header-h) + 2rem);
}

/* =========================================================
   Tonight strip, Birthday Spotlight and the Tonight tag
   (Sept 30, 2026, after the Dancers Royale pattern)
   ========================================================= */

/* Today's flyer: a small gold tag on its top edge. The card stops
   clipping so the tag can sit half outside it, and the image keeps
   its own rounded corners. Nothing else is printed on the flyers. */
.rn-flyer--today { overflow: visible; }
.rn-flyer--today .rn-flyer__btn { border-radius: inherit; overflow: hidden; }

.rn-flyer__tonight {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: 0.38rem 0.95rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px rgba(243, 217, 138, 0.35);
	pointer-events: none;
}

/* ---------- Tonight at Rachel's strip, under the home hero ---------- */

.rn-tonight {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--ink-raised);
	border-top: 1px solid rgba(243, 217, 138, 0.22);
	border-bottom: 1px solid var(--wp--preset--color--ink-line);
}

.rn-tonight__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 1.05rem clamp(1.25rem, 5vw, 3.75rem);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem clamp(1.25rem, 3vw, 2.5rem);
	box-sizing: border-box;
}

.rn-tonight__status {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	white-space: nowrap;
}

.rn-tonight__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.rn-tonight__status.is-open .rn-tonight__dot {
	background: var(--wp--preset--color--gold);
	animation: rn-tonight-pulse 2.4s ease-out infinite;
}

@keyframes rn-tonight-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(243, 217, 138, 0.55); }
	70%  { box-shadow: 0 0 0 9px rgba(243, 217, 138, 0); }
	100% { box-shadow: 0 0 0 0 rgba(243, 217, 138, 0); }
}

.rn-tonight__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.rn-tonight__list li { margin: 0; }

.rn-tonight__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--ivory);
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
}

.rn-tonight__list a:hover,
.rn-tonight__list a:focus-visible { border-bottom-color: rgba(243, 217, 138, 0.6); }

.rn-tonight__k {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

@media (min-width: 782px) {
	.rn-tonight__list li { padding-inline: clamp(0.9rem, 2vw, 1.75rem); }
	.rn-tonight__list li + li { border-left: 1px solid var(--wp--preset--color--ink-line); }
}

@media (max-width: 781px) {
	.rn-tonight__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.4rem;
		padding-block: 1rem 0.5rem;
	}
	.rn-tonight__status { justify-content: center; }
	.rn-tonight__list { flex-direction: column; }
	.rn-tonight__list li + li { border-top: 1px solid var(--wp--preset--color--ink-line); }
	.rn-tonight__list a {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 0.75rem 0;
	}
	.rn-tonight__v { text-align: right; }
}

/* ---------- Birthday Spotlight ---------- */

.rn-bday {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(55% 45% at 50% 68%, rgba(123, 47, 190, 0.22) 0%, rgba(11, 10, 13, 0) 72%),
		var(--wp--preset--color--ink);
}

/* Two soft stage lights angled in on the frame. */
.rn-bday__beams {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.rn-bday__beams::before,
.rn-bday__beams::after {
	content: "";
	position: absolute;
	top: -6%;
	width: 34%;
	height: 118%;
	background: linear-gradient(180deg, rgba(243, 217, 138, 0.09) 0%, rgba(243, 217, 138, 0.035) 50%, rgba(243, 217, 138, 0) 88%);
	clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
	filter: blur(22px);
	transform-origin: 50% 0;
}

.rn-bday__beams::before { left: 18%; transform: rotate(13deg); }
.rn-bday__beams::after  { right: 18%; transform: rotate(-13deg); }

.rn-bday__stage {
	position: relative;
	max-width: 500px;
	margin-inline: auto;
}

.rn-bday__frame {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.5);
	background: var(--wp--preset--color--ink-raised);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 70px rgba(243, 217, 138, 0.12), 0 0 140px rgba(123, 47, 190, 0.22);
}

.rn-bday__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.rn-bday__slide.is-on {
	opacity: 1;
	z-index: 1;
}

.rn-bday__slide .rn-flyer__btn { height: 100%; }

/* Birthday flyers carry names and dates to the edges: never crop. */
.rn-bday__slide .rn-flyer__btn img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
}

.rn-bday__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(243, 217, 138, 0.45);
	background: rgba(11, 10, 13, 0.82);
	color: var(--wp--preset--color--gold);
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.rn-bday__nav:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.rn-bday__nav--prev { left: -66px; }
.rn-bday__nav--next { right: -66px; }

.rn-bday__dots {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-top: 1.1rem;
}

.rn-bday__dot {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.rn-bday__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(243, 217, 138, 0.3);
	transition: background 0.25s ease, transform 0.25s ease;
}

.rn-bday__dot.is-on::before {
	background: var(--wp--preset--color--gold);
	transform: scale(1.3);
}

@media (max-width: 781px) {
	.rn-bday__stage { max-width: 84vw; }
	.rn-bday__nav { width: 40px; height: 40px; font-size: 1.25rem; }
	.rn-bday__nav--prev { left: -14px; }
	.rn-bday__nav--next { right: -14px; }
	.rn-bday__beams::before,
	.rn-bday__beams::after { width: 56%; }
	.rn-bday__beams::before { left: 2%; }
	.rn-bday__beams::after  { right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
	.rn-tonight__status.is-open .rn-tonight__dot { animation: none; }
	.rn-bday__slide { transition: none; }
}

/* A small label inside a section, like "Weeknight Steak Specials" above
   the home steak carousel. */
.rn-section__head--sub {
	margin: clamp(2.75rem, 5vw, 4rem) auto 0;
}

/* =========================================================
   Overnight polish, Oct 1, 2026
   ========================================================= */

/* ---------- Header phone ----------
   An icon in a circle on tablets and smaller desktops, the number
   itself once there is room. Phones get the call bar instead. */
.rn-header__phone {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.rn-header__phone svg { flex: 0 0 auto; color: var(--wp--preset--color--gold); }
.rn-header__phone:hover,
.rn-header__phone:focus-visible { color: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); }
.rn-header__phone-num { display: none; }

@media (min-width: 782px) {
	.rn-header__phone {
		display: inline-flex;
		width: 40px;
		height: 40px;
		border: 1px solid rgba(243, 217, 138, 0.35);
		border-radius: 50%;
	}
}

/* Below 1300px the full nav needs every pixel beside the logo. */
@media (min-width: 1240px) and (max-width: 1299.98px) {
	.rn-header__phone { display: none; }
}

@media (min-width: 1500px) {
	.rn-header__phone {
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
	}
	.rn-header__phone-num { display: inline; }
}

/* ---------- Current page in the nav ---------- */
.rn-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	background: var(--wp--preset--color--purple-lt);
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

/* ---------- Desktop dropdowns: a panel that reads over the hero ---------- */
@media (min-width: 1240px) {
	.rn-nav .has-child > .wp-block-navigation__submenu-container {
		background: rgba(24, 20, 30, 0.98);
		border: 1px solid rgba(243, 217, 138, 0.18);
		border-top: 2px solid var(--wp--preset--color--gold);
		border-radius: 0 0 6px 6px;
		box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65);
		padding-block: 0.45rem;
	}
}

/* ---------- Phone menu: call, hours, directions ---------- */
.rn-overlay-info { display: none; }

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-info {
	display: block;
	order: 99;
	width: 100%;
	max-width: 22rem;
	margin: 1.75rem auto 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--ink-line);
	text-align: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.rn-overlay-info p { margin: 0.35rem 0 0; }
.rn-overlay-info a { color: var(--wp--preset--color--body); text-decoration: none; }

.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-info .rn-overlay-info__call {
	display: inline-block;
	margin-bottom: 0.3rem;
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gold);
}

/* ---------- Phone call bar ---------- */
.rn-callbar { display: none; }

@media (max-width: 781px) {
	.rn-callbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: 1fr 1.35fr 1fr;
		gap: 0.5rem;
		padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--ink);
		border-top: 1px solid rgba(243, 217, 138, 0.25);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
		transition: transform 0.35s ease;
	}

	.rn-js .rn-callbar:not(.is-visible) { transform: translateY(110%); }

	.rn-callbar__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		min-height: 50px;
		border: 1px solid rgba(243, 217, 138, 0.35);
		border-radius: 4px;
		color: var(--wp--preset--color--ivory);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.rn-callbar__btn svg { color: var(--wp--preset--color--gold); }

	.rn-callbar__btn--gold {
		background: var(--wp--preset--color--gold);
		border-color: var(--wp--preset--color--gold);
		color: var(--wp--preset--color--ink);
	}

	.rn-callbar__btn--gold svg { color: var(--wp--preset--color--ink); }

	/* Room for the bar under the last line of the footer. */
	.rn-footer { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Quiet scroll reveals (site.js adds the classes) ---------- */
.rn-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.rn-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- 404 ---------- */
.rn-404 {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.rn-404 h1 { margin: 0 0 1rem; text-wrap: balance; }
.rn-404 .rn-lead { margin: 0 auto 2rem; }
.rn-404 .rn-cta-row { justify-content: center; }

.rn-404__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	margin: 2.75rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--wp--preset--color--ink-line);
}

.rn-404__links a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rn-404__links a:hover { color: var(--wp--preset--color--gold-lt); }

/* ---------- Own the Room: these are perks, not buttons ---------- */
.rn-pills { gap: 0.5rem 0; }

.rn-pills li {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 0.72rem;
}

.rn-pills li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	margin: 0 0.9rem;
	border-radius: 50%;
	background: rgba(243, 217, 138, 0.6);
}

.rn-pills li:hover {
	border-color: transparent;
	background: none;
}

/* ---------- Cards: buttons line up along the bottom ---------- */
.rn-tier > .rn-btn:last-child { margin-top: auto; }

/* ---------- Phones: nothing smaller than about 11px ---------- */
@media (max-width: 1239.98px) {
	.rn-header__cta .wp-block-button__link { font-size: 0.7rem; }
}

@media (max-width: 781px) {
	.rn-eyebrow,
	.rn-eyebrow--ruled { font-size: 0.7rem; }
	.rn-cta-row .rn-btn { font-size: 0.72rem; }
	.rn-gallery__item figcaption { font-size: 0.7rem; }
}

@media (max-width: 420px) {
	.rn-cta-row .rn-btn {
		font-size: 0.7rem;
		letter-spacing: 0.06em;
	}
}

/* Last of the small text: card badges, menu sub labels, photo captions. */
.rn-tier__badge { font-size: 0.7rem; }
.rn-menu-sub { font-size: 0.72rem; }

@media (max-width: 781px) {
	.rn-feature-shot figcaption { font-size: 0.7rem; }
}

/* ---------- Menu jump bar ----------
   Sticks under the header (site.js keeps --rn-header-live current)
   and scrolls sideways on phones. */
.rn-jumpbar {
	position: sticky;
	/* Tucked 2px under the header: its bottom border is transparent and
	   its height lands on a half pixel, which showed a sliver of page. */
	top: calc(var(--rn-header-live, var(--rn-header-h)) - 2px);
	z-index: 50;
	background: var(--wp--preset--color--ink);
	border-block: 1px solid var(--wp--preset--color--ink-line);
}

.rn-jumpbar__track {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	max-width: 1180px;
	margin-inline: auto;
	padding: 0.7rem clamp(1.25rem, 5vw, 3.75rem);
	overflow-x: auto;
	scrollbar-width: none;
	box-sizing: border-box;
}

.rn-jumpbar__track::-webkit-scrollbar { display: none; }

.rn-jumpbar a {
	flex: 0 0 auto;
	padding: 0.5rem 0.95rem;
	border: 1px solid rgba(243, 217, 138, 0.3);
	border-radius: 999px;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rn-jumpbar a:hover,
.rn-jumpbar a:focus-visible,
.rn-jumpbar a.is-active {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1239.98px) {
	.rn-jumpbar__track { justify-content: flex-start; }
}

/* A chip's section lands below both the header and the bar. */
.rn-jumpbar ~ section[id] {
	scroll-margin-top: calc(var(--rn-header-h) + 4.5rem);
}
/* ---------- Gallery filters ---------- */
.rn-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.rn-filter__btn {
	padding: 0.55rem 1.05rem;
	border: 1px solid rgba(243, 217, 138, 0.3);
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rn-filter__btn:hover,
.rn-filter__btn:focus-visible,
.rn-filter__btn.is-active {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.rn-gallery__item.is-filtered-out { display: none; }

/* ---------- Footer on phones: shorter and lighter ----------
   The Google map is about half a megabyte of script. On phones an
   address panel stands in, and the hidden lazy iframe only loads when
   someone taps Show the map. The Explore links run in two columns. */
.rn-footer__map-cover { display: none; }

@media (max-width: 781px) {
	.rn-footer__map:not(.is-open) { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
	.rn-footer__map:not(.is-open) iframe { display: none !important; }

	.rn-footer__map:not(.is-open) .rn-footer__map-cover {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.55rem;
		padding: 1.4rem 1rem 1.5rem;
		text-align: center;
		color: var(--wp--preset--color--gold);
		background: var(--wp--preset--color--ink-raised);
	}

	.rn-footer__map-cover p {
		margin: 0;
		color: var(--wp--preset--color--ivory);
		font-size: 0.95rem;
	}

	.rn-footer__map-actions {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin-top: 0.35rem;
	}

	.rn-footer__map-actions button,
	.rn-footer__map-actions a {
		padding: 0.7rem 1.1rem;
		border: 1px solid rgba(243, 217, 138, 0.45);
		border-radius: 2px;
		background: none;
		color: var(--wp--preset--color--gold);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
	}

	.rn-footer__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}
}

/* ---------- Menu photos on phones ----------
   Square and portrait dish photos ran a full screen width tall,
   about 340px to 410px each. Capped at three quarters of the width,
   centred on the plate. */
@media (max-width: 781px) {
	.rn-dish__media img[src*="/rn-menu-"] {
		max-height: 75vw;
		object-fit: cover;
		object-position: center 55%;
	}
}

/* ---------- Price lists on phones ----------
   One list on a phone: no seam where the desktop columns meet. A new
   heading (Whiskey, Rum, Signature Sides) still gets its space. */
@media (max-width: 781px) {
	.rn-menu-grid { row-gap: 0; }
	.rn-menu-group + .rn-menu-group > h3:first-child { margin-top: 2rem; }
}

/* ---------- Package picker on phones ----------
   Four tall cards stacked ran about two screens. On phones they swipe
   side to side with the neighbours peeking, and open on Most Popular
   (site.js). Top padding keeps the badge from being clipped. */
@media (max-width: 781px) {
	#packages .rn-tiers {
		position: relative;
		display: flex;
		gap: 0.9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: -1.15rem;
		width: calc(100% + 2.3rem);
		max-width: none;
		padding: 1.25rem calc((100% - 78vw) / 2) 1.5rem;
		box-sizing: border-box;
	}

	#packages .rn-tiers::-webkit-scrollbar { display: none; }

	#packages .rn-tier {
		flex: 0 0 78vw;
		scroll-snap-align: center;
	}

	#packages .rn-tier:hover { transform: none; }
}

/* ---------- Own the Room perks: a clean break when they wrap ----------
   The three perks need about 445px on one line. In anything narrower
   (phones, and the half width column from 782 to about 1000px) the last
   one drops to a line of its own without a stray dot in front of it. */
.rn-pills { container-type: inline-size; }

@container (max-width: 460px) {
	.rn-pills li:last-child {
		flex-basis: 100%;
		justify-content: inherit;
	}

	.rn-pills li:last-child::before { display: none; }
}

/* ---------- Section intros: a readable line length ----------
   The section gutter rule (.rn-section > * { max-width: 100% }) also
   lifted the 760px cap on section heads, so on desktop the intro
   paragraphs ran the full width of the page, about 160 characters to
   a line. Cap the paragraph and leave the heading alone, and balance
   the lines so a centered intro never ends on a word or two. */
.rn-section__head .rn-lead {
	max-width: 46rem;
	margin-inline: auto;
	text-wrap: balance;
}

/* ---------- Steakhouse lunch: the printed lunch menu beside the copy ----------
   Jim felt this section was too much empty black (Oct 1) and picked the
   real Quick Eats menu card. It opens full size in the flyer lightbox.
   Flyer buttons crop to a square everywhere else, so this one keeps the
   card's own shape and is never cut off. */
.rn-lunch__row { align-items: center; }

.rn-lunch__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.rn-lunch__card .rn-flyer__btn {
	width: auto;
	max-width: 100%;
}

.rn-lunch__card .rn-flyer__btn img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 640px;
	aspect-ratio: 1545 / 2000;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid rgba(243, 217, 138, 0.25);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.rn-lunch__hint {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(243, 217, 138, 0.75);
}

.rn-lunch .rn-dish__body .rn-eyebrow { justify-content: flex-start; }
.rn-lunch .rn-dish__body .rn-eyebrow--ruled::before { display: none; }
.rn-lunch .rn-dish__body .rn-cta-row { justify-content: flex-start; }

@media (max-width: 781px) {
	.rn-lunch__card .rn-flyer__btn img {
		width: 100%;
		max-height: none;
	}

	.rn-lunch .rn-dish__body { text-align: center; }
	.rn-lunch .rn-dish__body .rn-eyebrow { justify-content: center; }
	.rn-lunch .rn-dish__body .rn-eyebrow--ruled::before { display: block; }
	.rn-lunch .rn-dish__body .rn-cta-row { justify-content: center; }
}

/* ---------- Photo and video heroes: let the picture show ----------
   Jim, Oct 3: on every photo hero the copy sat right on top of the
   picture (the steak, the rooms, the bar). The lead is now one short
   line, the headline holds the top of the hero, the lead and buttons
   sit at the bottom, and the middle of the picture is left clear.
   Heroes without a photo (Events, Gallery, Careers, Contact) keep the
   centered stack. */
.rn-hero:has(.rn-hero__media) { align-items: stretch; }

.rn-hero:has(.rn-hero__media) .rn-hero__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.rn-hero:has(.rn-hero__media) h1 { margin-bottom: 0; }

.rn-hero:has(.rn-hero__media) .rn-hero__sub {
	margin-top: auto;
	margin-bottom: 1.25rem;
	padding-top: 2.5rem;
}

/* Every hero lead wraps into even lines, never a word or two alone. */
.rn-hero__sub { text-wrap: balance; }

/* Shade behind the headline and behind the buttons, nearly clear in
   between, with a soft pool right behind the headline so it still
   reads over bright lights. */
.rn-hero.rn-hero:has(.rn-hero__media) .rn-hero__scrim {
	background:
		radial-gradient(ellipse 60% 26% at 50% 31%, rgba(11, 10, 13, 0.55) 0%, rgba(11, 10, 13, 0) 100%),
		linear-gradient(180deg, rgba(11, 10, 13, 0.84) 0%, rgba(11, 10, 13, 0.55) 26%, rgba(11, 10, 13, 0.12) 44%, rgba(11, 10, 13, 0.08) 58%, rgba(11, 10, 13, 0.6) 72%, rgba(11, 10, 13, 0.9) 86%, rgba(11, 10, 13, 0.96) 100%);
}

/* The two brightest photos (the backbar and the bottle list) get more
   shade up top. */
.rn-hero.rn-hero:has(img[src*="rn-photo-backbar"]) .rn-hero__scrim,
.rn-hero.rn-hero.rn-hero--bottle .rn-hero__scrim {
	background:
		radial-gradient(ellipse 60% 30% at 50% 33%, rgba(11, 10, 13, 0.6) 0%, rgba(11, 10, 13, 0) 100%),
		linear-gradient(180deg, rgba(11, 10, 13, 0.92) 0%, rgba(11, 10, 13, 0.8) 38%, rgba(11, 10, 13, 0.3) 50%, rgba(11, 10, 13, 0.24) 60%, rgba(11, 10, 13, 0.66) 72%, rgba(11, 10, 13, 0.92) 86%, rgba(11, 10, 13, 0.97) 100%);
}

.rn-hero:has(.rn-hero__media) .rn-eyebrow,
.rn-hero:has(.rn-hero__media) h1,
.rn-hero:has(.rn-hero__media) .rn-hero__sub {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}

/* The bottle list had the short page hero; give its photo room too.
   Its bottom fade sat over the buttons on phones, so the copy goes
   above it. */
.rn-hero--bottle { min-height: min(72vh, 620px); }
.rn-hero--bottle .rn-hero__inner { z-index: 4; }

/* Home on desktop: the photo is nearly square, so a wide hero crops
   it. Show more of the dark ceiling behind the headline and put the
   lit bar in the clear middle. */
@media (min-width: 782px) {
	.rn-hero--photo .rn-hero__poster img[src*="rn-photo-main-floor"] { object-position: center 28%; }
}

@media (max-width: 781px) {
	.rn-hero:has(.rn-hero__media) {
		min-height: min(88svh, 720px);
		padding-bottom: 2rem;
	}
}

/* ---------- Menu rows: let a long list set the row height ----------
   Oct 3: the new dish descriptions made From the Grill about 770px tall
   on desktop, past the 640px cap on .rn-dish__body, so the list ran into
   the next section. The photo is absolutely positioned and grows with
   the row, so the cap can go. */
@media (min-width: 782px) {
	.rn-dish__body { max-height: none; }
}

/* ============================================================
   OCT 3 DECISIONS: age gate, package chips, bottle jump bar,
   printed menus in one row
   ============================================================ */

/* ---------- 21+ age gate ----------
   Every page prints the gate (functions.php). It only shows while
   <html> has rn-age-check, set in the head when the rn_age_ok cookie
   is missing; site.js handles the buttons. A solid overlay with no
   backdrop-filter: blur over the hero videos made them flicker. */
.rn-agegate { display: none; }

.rn-age-check,
.rn-age-check body { overflow: hidden; }

.rn-age-check .rn-agegate {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(123, 47, 190, 0.32), transparent 65%),
		rgba(8, 7, 10, 0.95);
	overscroll-behavior: contain;
}

.rn-agegate__card {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	padding: 2.25rem 1.75rem 1.6rem;
	text-align: center;
	background: linear-gradient(180deg, #17121f 0%, var(--wp--preset--color--ink) 100%);
	border: 1px solid rgba(243, 217, 138, 0.45);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.rn-agegate__logo {
	display: block;
	width: 200px;
	max-width: 70%;
	height: auto;
	margin: 0 auto 1.4rem;
}

.rn-agegate h2 {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 6vw, 1.9rem);
	line-height: 1.2;
	color: var(--wp--preset--color--ivory);
}

.rn-agegate p {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: 1rem;
	line-height: 1.55;
}

.rn-agegate__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.6rem;
}

.rn-agegate__actions .rn-btn {
	width: 100%;
	text-align: center;
}

.rn-agegate__no {
	min-height: 44px;
	padding: 0.6rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.rn-agegate__no:hover,
.rn-agegate__no:focus-visible { color: var(--wp--preset--color--gold); }

.rn-agegate .rn-agegate__fine {
	margin-top: 1.1rem;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Package price chips (phones) ----------
   The swipe row opened on the $450 card with slivers of its
   neighbours, so most phone visitors never saw $350 or $950. Four
   chips above the row jump to each card and follow the swipe. */
.rn-pricechips { display: none; }

@media (max-width: 781px) {
	.rn-pricechips {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin: 1.5rem auto 0;
	}

	.rn-pricechip {
		min-width: 4.25rem;
		min-height: 44px;
		padding: 0.5rem 0.85rem;
		border: 1px solid rgba(243, 217, 138, 0.35);
		border-radius: 999px;
		background: transparent;
		color: var(--wp--preset--color--ivory);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.95rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		cursor: pointer;
		transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	}

	.rn-pricechip.is-active {
		background: var(--wp--preset--color--gold);
		border-color: var(--wp--preset--color--gold);
		color: var(--wp--preset--color--ink);
	}
}

/* Laptops and tablets: two by two instead of three cards and a stray. */
@media (min-width: 782px) and (max-width: 1299.98px) {
	#packages .rn-tiers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 880px;
	}
}

/* ---------- Jump bar landing on any section ----------
   The Bottle Menu's chips also land on the photo bands, which are not
   sections, so the offset goes on anything with an id after the bar. */
.rn-jumpbar ~ [id] {
	scroll-margin-top: calc(var(--rn-header-h) + 4.5rem);
}

/* ---------- Printed menus in one row on phones ----------
   The three printed pages sat two and one on phones and took over two
   screens. Side by side with short captions they take one row. */
@media (max-width: 700px) {
	.rn-printed--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.rn-printed--three .rn-printed__card:last-child {
		grid-column: auto;
		max-width: none;
		margin-inline: 0;
	}

	.rn-printed--three .rn-printed__cap {
		padding: 0.55rem 0.3rem 0.65rem;
		font-size: 0.85rem;
	}

	.rn-printed--three .rn-printed__cap span {
		font-size: 0.7rem;
		letter-spacing: 0.08em;
	}
}
/* Keep "Rachel's North." from wrapping alone on phones. */
.rn-agegate p { text-wrap: balance; }

/* ---------- Own the Room: VIP floor photo with the girls inset ----------
   Home #vip (Jim, Oct 3): the VIP tables photo carries the section and
   the Girls Just Want to Have Fun photo overlaps its corner, larger
   than the other duo insets so both girls still read on a phone. The
   main photo is framed on its right side, where the booth and the lit
   bucket are; the inset covers the TV on the left. */
.rn-duo--vip .rn-duo__main {
	min-height: 460px;
	object-position: 100% 60%;
}

.rn-duo--vip .rn-duo__inset {
	width: 42%;
	max-width: 270px;
	left: -2.25rem;
	bottom: -2.25rem;
}

.rn-duo--vip .rn-duo__inset img { object-position: center; }

@media (max-width: 781px) {
	.rn-duo--vip .rn-duo__main { min-height: 0; aspect-ratio: 5 / 4; }
	.rn-duo--vip .rn-duo__inset { width: 46%; left: 0.75rem; bottom: -2rem; }
	.rn-duo--vip { margin-bottom: 2.5rem; }
}
/* The narrow photo column on tablets and small laptops shows less of
   the wide photo; frame further left so the lit bucket clears the inset. */
@media (min-width: 782px) and (max-width: 1199.98px) {
	.rn-duo--vip .rn-duo__main { object-position: 75% 60%; }
}

/* ---------- Header Book a Table on phones (Oct 3) ----------
   Jim: it looked too big next to the logo. The earlier phone sizes
   never applied, because the outlined button rule above uses
   .rn-header__cta .is-style-outline .wp-block-button__link, which
   outranks them. This matches that selector. */
@media (max-width: 781px) {
	.rn-header__cta .is-style-outline .wp-block-button__link,
	.rn-header__cta .wp-block-button__link {
		padding: 0.6rem 0.95rem;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}
}
/* ============================================================
   SOFT ROUNDED BUTTONS (Oct 3, Jim picked option B)
   Every button moves from 2px square corners to a 10px radius:
   hero and section buttons, package cards, forms, the 21+ gate,
   the header, phone menu and footer Book a Table, and the footer
   map buttons. The phone call bar gets 12px for its taller two line
   buttons. Chips (menu jump bar, gallery filters, price chips) stay
   pills. Text is centered so the full width card buttons read evenly.
   ============================================================ */
.rn-btn {
	border-radius: 10px;
	text-align: center;
}

.rn-header__cta .wp-block-button__link,
.rn-header__cta .is-style-outline .wp-block-button__link,
.rn-footer .wp-block-button__link,
.rn-footer .is-style-outline .wp-block-button__link,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta .wp-block-navigation-item__content,
.rn-footer__map-actions button,
.rn-footer__map-actions a {
	border-radius: 10px;
}

.rn-callbar__btn { border-radius: 12px; }
/* ============================================================
   MOTION (Oct 4): Rachel's version of the Dancers Royale scroll
   choreography, built on the site.js observer instead of GSAP.
   site.js arms pieces below the fold with data-rn-m and adds .is-in
   as they arrive (children carry --rn-i for their place in a
   stagger), then takes both off so hover effects work as before.
   Nothing here applies without JavaScript, to anything on screen at
   load, for reduced motion, or with ?motion=0 in the address.
   ============================================================ */
:root { --rn-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Headings and copy: the lines lift one after another... */
[data-rn-m="text"] > * {
	transition: opacity 0.7s var(--rn-ease), transform 0.7s var(--rn-ease);
	transition-delay: calc(var(--rn-i, 0) * 90ms);
}

[data-rn-m="text"]:not(.is-in) > * {
	opacity: 0;
	transform: translateY(22px);
}

/* ...and the gold rules beside an eyebrow draw outward from the words. */
[data-rn-m="text"] .rn-eyebrow--ruled::before,
[data-rn-m="text"] .rn-eyebrow--ruled::after {
	transition: transform 0.8s var(--rn-ease) 0.15s;
}

[data-rn-m="text"] .rn-eyebrow--ruled::before { transform-origin: right center; }
[data-rn-m="text"] .rn-eyebrow--ruled::after { transform-origin: left center; }

[data-rn-m="text"]:not(.is-in) .rn-eyebrow--ruled::before,
[data-rn-m="text"]:not(.is-in) .rn-eyebrow--ruled::after {
	transform: scaleX(0);
}

/* Cards, menu columns and printed menus: one, two, three. */
[data-rn-m="group"] > * {
	transition: opacity 0.65s var(--rn-ease), transform 0.65s var(--rn-ease);
	transition-delay: calc(var(--rn-i, 0) * 80ms);
}

[data-rn-m="group"]:not(.is-in) > * {
	opacity: 0;
	transform: translateY(24px);
}

/* Photos, carousels and forms: one quiet rise. */
[data-rn-m="rise"],
[data-rn-m="duo"] {
	transition: opacity 0.75s var(--rn-ease), transform 0.75s var(--rn-ease);
}

[data-rn-m="rise"]:not(.is-in),
[data-rn-m="duo"]:not(.is-in) {
	opacity: 0;
	transform: translateY(26px);
}

/* Photo collages: the inset lands on the main photo last. */
[data-rn-m="duo"] > .rn-duo__inset {
	transition: opacity 0.6s var(--rn-ease) 0.4s, transform 0.8s var(--rn-ease) 0.4s;
}

[data-rn-m="duo"]:not(.is-in) > .rn-duo__inset {
	opacity: 0;
	transform: translateY(30px) scale(0.94);
}

/* Photo heroes settle in: a slow, slight pull back from 107 percent. */
@media (prefers-reduced-motion: no-preference) {
	.rn-js:not(.rn-still) .rn-hero--photo .rn-hero__poster img,
	.rn-js:not(.rn-still) .rn-hero--bottle .rn-hero__media > img {
		animation: rn-hero-settle 9s var(--rn-ease) both;
		transform-origin: 50% 40%;
	}
}

@keyframes rn-hero-settle {
	from { transform: scale(1.07); }
	to { transform: none; }
}

/* Gold buttons catch the light on hover (mouse and trackpad only). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.rn-btn--gold {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.rn-btn--gold::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
		transform: translateX(-120%);
		transition: transform 0.9s var(--rn-ease);
	}

	.rn-btn--gold:hover::after { transform: translateX(120%); }
}

/* ---------- Three Steps as a timeline (VIP & Bottle Service) ----------
   Jim, Oct 4: the steps read flat. Each number sits in a gold ring and
   a line runs from one ring to the next, across on desktop and down
   the left side on phones. When the section arrives the rings light up
   one after another and the line draws between them. */
.rn-steps { --rn-steps-gap: clamp(1.5rem, 3vw, 2.5rem); gap: var(--rn-steps-gap); }

.rn-step {
	position: relative;
	text-align: center;
}

.rn-step__n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	margin: 0 auto 1.25rem;
	border: 1px solid rgba(243, 217, 138, 0.55);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(123, 47, 190, 0.38), var(--wp--preset--color--ink) 72%);
	box-shadow: 0 0 24px rgba(243, 217, 138, 0.16);
	font-size: 1.6rem;
	line-height: 1;
	opacity: 1;
}

.rn-step:nth-child(2) { --rn-s: 1; }
.rn-step:nth-child(3) { --rn-s: 2; }
.rn-step:nth-child(4) { --rn-s: 3; }

.rn-step:not(:last-child)::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

@media (min-width: 782px) {
	.rn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.rn-step:not(:last-child)::after {
		top: 1.8rem;
		left: calc(50% + 2.55rem);
		width: calc(100% + var(--rn-steps-gap) - 5.1rem);
		height: 1px;
		background: linear-gradient(90deg, rgba(243, 217, 138, 0.75), rgba(243, 217, 138, 0.25));
		transform-origin: left center;
	}
}

@media (max-width: 781px) {
	.rn-steps { --rn-steps-gap: 1.75rem; max-width: 30rem; }

	.rn-step {
		display: grid;
		grid-template-columns: 3rem 1fr;
		grid-template-areas: "n title" "n text";
		column-gap: 1.1rem;
		align-items: start;
		text-align: left;
	}

	.rn-step__n {
		grid-area: n;
		width: 3rem;
		height: 3rem;
		margin: 0;
		font-size: 1.35rem;
	}

	.rn-step h3 { grid-area: title; margin: 0.55rem 0 0.35rem; }
	.rn-step p { grid-area: text; margin: 0; max-width: none; }

	.rn-step:not(:last-child)::after {
		top: 3.5rem;
		left: 1.5rem;
		width: 1px;
		height: calc(100% - 4rem + var(--rn-steps-gap));
		background: linear-gradient(180deg, rgba(243, 217, 138, 0.75), rgba(243, 217, 138, 0.25));
		transform-origin: center top;
	}
}

[data-rn-m="steps"] .rn-step__n {
	transition: opacity 0.45s var(--rn-ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--rn-s, 0) * 0.8s);
}

[data-rn-m="steps"] .rn-step > h3,
[data-rn-m="steps"] .rn-step > p {
	transition: opacity 0.6s var(--rn-ease), transform 0.6s var(--rn-ease);
	transition-delay: calc(var(--rn-s, 0) * 0.8s + 0.2s);
}

[data-rn-m="steps"] .rn-step > p { transition-delay: calc(var(--rn-s, 0) * 0.8s + 0.3s); }

[data-rn-m="steps"] .rn-step::after {
	transition: transform 0.55s ease-in-out;
	transition-delay: calc(var(--rn-s, 0) * 0.8s + 0.35s);
}

[data-rn-m="steps"]:not(.is-in) .rn-step__n {
	opacity: 0;
	transform: scale(0.55);
}

[data-rn-m="steps"]:not(.is-in) .rn-step > h3,
[data-rn-m="steps"]:not(.is-in) .rn-step > p {
	opacity: 0;
	transform: translateY(14px);
}

[data-rn-m="steps"]:not(.is-in) .rn-step::after { transform: scaleX(0); }

@media (max-width: 781px) {
	[data-rn-m="steps"]:not(.is-in) .rn-step::after { transform: scaleY(0); }
}

[data-rn-m="steps"].is-in .rn-step__n {
	animation: rn-ring 1.3s ease-out both;
	animation-delay: calc(var(--rn-s, 0) * 0.8s + 0.25s);
}

@keyframes rn-ring {
	from { box-shadow: 0 0 0 0 rgba(243, 217, 138, 0.55), 0 0 24px rgba(243, 217, 138, 0.16); }
	to { box-shadow: 0 0 0 16px rgba(243, 217, 138, 0), 0 0 24px rgba(243, 217, 138, 0.16); }
}

/* ---------- Join the Team: icons, and one card per row on phones ----------
   Jim, Oct 4: the two column cards looked cramped on a phone. */
.rn-tile__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.1rem;
	border: 1px solid rgba(243, 217, 138, 0.4);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(123, 47, 190, 0.32), transparent 72%);
	color: var(--wp--preset--color--gold);
}

.rn-tile__icon svg {
	width: 1.45rem;
	height: 1.45rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 781px) {
	.rn-tiles--icons {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		max-width: 32rem;
	}

	.rn-tiles--icons .rn-tile {
		display: grid;
		grid-template-columns: 2.75rem 1fr;
		grid-template-areas: "icon title" "icon text";
		column-gap: 1rem;
		align-items: start;
		padding: 1.15rem 1.2rem;
	}

	.rn-tiles--icons .rn-tile__icon {
		grid-area: icon;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
	}

	.rn-tiles--icons .rn-tile__icon svg { width: 1.25rem; height: 1.25rem; }
	.rn-tiles--icons .rn-tile h3 { grid-area: title; margin: 0.15rem 0 0.3rem; font-size: 1.15rem; }
	.rn-tiles--icons .rn-tile p { grid-area: text; margin: 0; font-size: 0.9rem; }
}

/* ---------- Desktop nav without Home ----------
   Jim, Oct 4: the logo goes home, as on most sites. The phone menu
   keeps its Home link. */
@media (min-width: 1240px) {
	.rn-nav .rn-nav-home { display: none; }
}

/* ============================================================
   CLUB TOUR VIDEO (Oct 13, 2026)
   Jim put the 46 second drone tour where Shay's photo was in the
   home closing band (#visit): copy on the left, the square video
   on the right, and under 900px the video first with the copy
   centered below it. Only the cover image loads with the page;
   site.js builds the video when someone presses play, so the file
   costs nothing until then. The play button sits in the night sky
   above the lit sign at every size: its bottom padding (a share of
   the width, so of the square) keeps the label above the top 40%
   line, and the sign starts at 44%. On phones
   the old photo band's rule that pulls .rn-cta-band__inner up 5rem
   over the photo is reset, or the copy lands on the video.
   ============================================================ */
.rn-cta-band--tour { text-align: left; }
.rn-cta-band--tour > .rn-tour-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(560px, 46%);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	max-width: 1240px;
	margin-inline: auto;
}
.rn-cta-band--tour .rn-cta-band__inner { max-width: 34rem; margin-inline: 0; }
.rn-cta-band--tour .rn-eyebrow { justify-content: flex-start; }
.rn-cta-band--tour .rn-eyebrow--ruled::before { display: none; }
.rn-cta-band--tour .rn-cta-row { justify-content: flex-start; }
.rn-cta-band--tour .rn-lead { margin-inline: 0; }
.rn-cta-band--tour .rn-hours-strip { text-align: left; }

.rn-tour {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.18);
	box-shadow: var(--wp--preset--shadow--lift);
	background: var(--wp--preset--color--ink-raised);
}
.rn-tour__cover,
.rn-tour__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rn-tour__video { background: #000; }
.rn-tour:not(.is-playing) .rn-tour__video { visibility: hidden; }
.rn-tour__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem;
	padding: 0 1rem 60%;
	border: 0;
	border-radius: 0;
	background: linear-gradient(180deg, rgba(11, 10, 13, 0.25) 0%, rgba(11, 10, 13, 0) 55%);
	color: var(--wp--preset--color--gold);
	font: inherit;
	cursor: pointer;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.rn-tour__ring {
	width: 84px;
	height: 84px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(243, 217, 138, 0.7);
	background: rgba(11, 10, 13, 0.55);
	box-shadow: 0 0 0 10px rgba(243, 217, 138, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.rn-tour__play:hover .rn-tour__ring,
.rn-tour__play:focus-visible .rn-tour__ring {
	transform: scale(1.06);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.rn-tour__play:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -8px;
}
.rn-tour__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.rn-tour__time { color: var(--wp--preset--color--gold); margin-left: 0.35em; }
.rn-tour.is-playing .rn-tour__play {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

@media (max-width: 899.98px) {
	.rn-cta-band--tour { text-align: center; }
	.rn-cta-band--tour > .rn-tour-band { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.rn-tour { order: -1; width: 100%; max-width: 560px; margin-inline: auto; }
	.rn-cta-band--tour .rn-cta-band__inner { margin: 0 auto; }
	.rn-cta-band--tour .rn-eyebrow { justify-content: center; }
	.rn-cta-band--tour .rn-eyebrow--ruled::before { display: block; }
	.rn-cta-band--tour .rn-cta-row { justify-content: center; }
	.rn-cta-band--tour .rn-lead { margin-inline: auto; }
	.rn-cta-band--tour .rn-hours-strip { text-align: center; }
	.rn-tour__ring { width: 70px; height: 70px; box-shadow: 0 0 0 8px rgba(243, 217, 138, 0.08); }
}

@media (max-width: 600px) {
	.rn-tour__play { gap: 0.6rem; }
	.rn-tour__ring { width: 62px; height: 62px; box-shadow: 0 0 0 6px rgba(243, 217, 138, 0.08); }
	.rn-tour__ring svg { width: 26px; height: 26px; }
}

/* ============================================================
   WHALE ROOM CLIP (Oct 13, 2026)
   Jim swapped the Whale Room photo in A Stage Behind a Closed Door
   for the drone flight into the room (0:37 to the end of the tour,
   silent) and moved the blonde entertainer inset to the Featured
   Daily carousel. The photo stays as the cover; site.js builds the
   clip as the section comes near and fades it in once it plays.
   The box keeps the collage sizing (.rn-duo) without the room the
   inset needed below it on phones. The VIP Rooms page's Whale Room
   row uses the same clip in a plain photo box (Oct 13).
   ============================================================ */
.rn-clip { position: relative; }
.rn-clip__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.rn-clip.is-playing .rn-clip__video { opacity: 1; }
@media (max-width: 781px) {
	.rn-duo.rn-clip { margin-bottom: 0; }
}

/* ============================================================
   CAROUSEL DOTS (Oct 14, 2026)
   Jim: dots under every row that scrolls sideways, as most sites
   have, so people know there is more. One per card; carousel.js adds
   them after each carousel, fills the dot for the centred card
   (stage carousels) or for every card in view (the entertainer row),
   and a tap brings that card to the middle. Phones lose the arrows
   (Jim: the dots and swiping do the job); desktop keeps both. Same
   look as the Birthday Spotlight dots. They wait for the carousel's
   scroll motion and stay hidden when a row has nothing to scroll.
   ============================================================ */
.rn-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem;
	max-width: 1240px;
	margin: 0.5rem auto 0;
	transition: opacity 0.6s ease;
}
.rn-carousel.is-static + .rn-carousel__dots { display: none; }
[data-rn-m]:not(.is-in) + .rn-carousel__dots { opacity: 0; }
.rn-carousel__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.rn-carousel__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(243, 217, 138, 0.3);
	transition: background 0.25s ease, transform 0.25s ease;
}
.rn-carousel__dot.is-on::before {
	background: var(--wp--preset--color--gold);
	transform: scale(1.3);
}
.rn-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
	border-radius: 50%;
}
@media (max-width: 781.98px) {
	.rn-carousel .rn-carousel__nav { display: none !important; }
}

/* ============================================================
   GET HERE (Oct 14, 2026)
   Jim: the phone header's Book a Table repeated the hero's, so on
   phones it gives way to Get Here: the gold directions sign in a
   ring over a small label, opening Google Maps directions (modeled
   on the Dancers Royale header, worded for Rachel's). Desktop keeps
   Book a Table; the phone menu and the call bar keep theirs.
   ============================================================ */
.rn-gethere { display: none; }
@media (max-width: 781.98px) {
	.rn-header .rn-header__cta { display: none !important; }
	.rn-gethere {
		order: 1;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		min-width: 44px;
		color: var(--wp--preset--color--gold);
		text-decoration: none;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}
	.rn-gethere__ring {
		width: 32px;
		height: 32px;
		box-sizing: border-box;
		border-radius: 50%;
		border: 1px solid rgba(243, 217, 138, 0.55);
		background: rgba(11, 10, 13, 0.45);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s ease, border-color 0.2s ease;
	}
	.rn-gethere__ring svg { display: block; }
	.rn-gethere__label {
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.5625rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.rn-gethere:active .rn-gethere__ring,
	.rn-gethere:focus-visible .rn-gethere__ring {
		background: rgba(243, 217, 138, 0.16);
		border-color: var(--wp--preset--color--gold);
	}
	.rn-gethere:focus-visible { outline: none; }
}

/* ============================================================
   CALL BAR: TEXT US AND BOOK A TABLE (Oct 14, 2026)
   Jim: Get Here in the phone header covers directions, so the bar
   drops Directions, and Call becomes Text Us (an sms: link to the
   main line, (407) 767-2977). Two buttons now: Text Us and the
   wider gold Book a Table.
   ============================================================ */
@media (max-width: 781px) {
	.rn-callbar { grid-template-columns: 1fr 1.35fr; }
}

/* ============================================================
   MEET YOUR HOST (Oct 14, 2026)
   VIP Rooms, after the opening Upstairs section: Kristina, the VIP host
   (Jim), in an arched portrait with old Vegas touches: a thin gold
   border, a gold diamond at the top of the arch, a second gold outline
   offset behind it, a purple glow and a VIP Host badge on the bottom
   edge. The copy and a gold Text Your Host button sit beside her on
   desktop and under her on phones. Approved from a mockup.
   ============================================================ */
.rn-host { position: relative; isolation: isolate; }
.rn-host::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(38% 60% at 28% 52%, rgba(123, 47, 190, 0.22), transparent 72%);
}
.rn-host > .rn-host__wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	max-width: 1060px;
	margin-inline: auto;
}
.rn-host__portrait {
	position: relative;
	isolation: isolate;
	justify-self: center;
	width: 100%;
	max-width: 390px;
	padding: 0 16px 16px 0;
	box-sizing: border-box;
}
.rn-host__portrait::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	right: 0;
	bottom: 0;
	z-index: -1;
	border-radius: 999px 999px 18px 18px;
	border: 1px solid rgba(243, 217, 138, 0.4);
}
.rn-host__portrait::after {
	content: "";
	position: absolute;
	top: -7px;
	left: calc((100% - 16px) / 2 - 7px);
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
	box-shadow: 0 0 18px rgba(243, 217, 138, 0.6);
}
.rn-host__frame {
	position: relative;
	aspect-ratio: 4 / 5.3;
	border-radius: 999px 999px 18px 18px;
	overflow: hidden;
	border: 1px solid rgba(243, 217, 138, 0.7);
	box-shadow: 0 0 0 6px var(--wp--preset--color--ink), 0 0 0 7px rgba(243, 217, 138, 0.28), 0 34px 90px rgba(123, 47, 190, 0.4);
}
.rn-host__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}
.rn-host__badge {
	position: absolute;
	left: calc((100% - 16px) / 2);
	bottom: 16px;
	transform: translate(-50%, 50%);
	z-index: 2;
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(243, 217, 138, 0.75);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.rn-host__copy .rn-eyebrow { justify-content: flex-start; }
.rn-host__copy .rn-eyebrow--ruled::before { display: none; }
.rn-host__copy h2 { margin: 0 0 1rem; }
.rn-host__copy .rn-lead { margin: 0 0 1.9rem; max-width: 31rem; }
.rn-host__text { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.rn-host__text svg { flex: none; }
@media (max-width: 781.98px) {
	.rn-host::before { background: radial-gradient(70% 40% at 50% 28%, rgba(123, 47, 190, 0.24), transparent 72%); }
	.rn-host > .rn-host__wrap { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
	.rn-host__portrait { max-width: 300px; }
	.rn-host__copy .rn-eyebrow { justify-content: center; }
	.rn-host__copy .rn-eyebrow--ruled::before { display: block; }
	.rn-host__copy .rn-lead { margin-inline: auto; }
	.rn-host__text { width: 100%; }
}

/* =========================================================
   INSTAGRAM STRIP (Gallery page, Oct 14)
   =========================================================
   [rn_instagram] from the rachels-north-core plugin prints the
   club's newest Instagram posts from copies saved on this site.
   The row runs edge to edge and drifts slowly left on its own
   (instagram.js in the plugin); a touch, the mouse or keyboard
   focus stops it, and it can always be swiped. Tiles are 4:5,
   the shape of Instagram's own grid. Without JavaScript, or for
   reduced motion, it is a plain row that scrolls sideways.
   ========================================================= */

.rn-ig {
	--rn-ig-gutter: clamp(1.25rem, 5vw, 3.75rem); /* the section's own side padding */
	--rn-ig-gap: 16px;
	--rn-ig-tile: 260px;
}

/* The strip runs edge to edge, so the section drops its side padding
   and the heading and the button take it instead. */
.rn-section.rn-ig { padding-inline: 0; }

.rn-ig > .rn-section__head,
.rn-ig > .rn-ig__cta {
	padding-inline: var(--rn-ig-gutter);
}

.rn-ig__strip {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.rn-ig__track {
	display: flex;
	gap: var(--rn-ig-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: auto;
	scrollbar-width: none;
	padding: 6px var(--rn-ig-gutter) 12px;
}

.rn-ig__track::-webkit-scrollbar { display: none; }

.rn-ig__set {
	display: flex;
	flex: none;
	gap: var(--rn-ig-gap);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.rn-ig__item {
	flex: none;
	width: var(--rn-ig-tile);
	margin: 0;
}

.rn-ig__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--ink-line);
	background: var(--wp--preset--color--ink-raised);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.rn-ig__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
	.rn-ig__link:hover { border-color: rgba(243, 217, 138, 0.4); transform: translateY(-3px); }
	.rn-ig__link:hover img { transform: scale(1.05); }
}

.rn-ig__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.rn-ig__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
	pointer-events: none;
}

.rn-ig__badge svg { display: block; width: 100%; height: 100%; }

.rn-ig__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rn-ig__cta { margin-top: var(--wp--preset--spacing--50); }

@media (max-width: 781.98px) {
	.rn-ig {
		--rn-ig-gap: 10px;
		--rn-ig-tile: clamp(150px, 44vw, 210px);
	}
}

@media (max-width: 600px) {
	.rn-ig { --rn-ig-gutter: 1.15rem; } /* the phone section padding */
}

/* =========================================================
   GOOGLE REVIEWS (Oct 18)
   =========================================================
   [rn_reviews] from rachels-north-core: the heading with the
   Google rating on one line under it, then one row of quote
   cards and a small link to the Google listing. Jim liked the
   first version on the Steakhouse page but not the stacking (the
   rating and a big quote sat above the cards) because it made the
   page longer, so every set is one row now. The row swipes with
   dots on phones (the flyer carousel script). Three cards sit
   three across from 782px; five swipe up to 1099px and sit five
   across from 1100px. Gilda Display has no italic, so the quotes
   stay upright.
   ========================================================= */

.rn-reviews {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
	border-top: 1px solid var(--wp--preset--color--ink-line);
}

.rn-reviews::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 50% at 50% 55%, rgba(123, 47, 190, 0.14), transparent 72%);
	pointer-events: none;
}

.rn-reviews .rn-section__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.rn-reviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2rem 0.45rem;
	margin: 0.75rem 0 0;
}

.rn-reviews__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.rn-reviews__score > svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wp--preset--color--gold);
}

.rn-reviews__count {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.rn-review { margin: 0; }

.rn-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.rn-review blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.4vw, 1.25rem);
	line-height: 1.35;
	color: var(--wp--preset--color--ivory);
	text-wrap: balance;
}

.rn-review__stars {
	display: inline-flex;
	gap: 3px;
	margin-bottom: 0.8rem;
	color: var(--wp--preset--color--gold);
}

.rn-review__stars svg { display: block; width: 14px; height: 14px; }

.rn-review figcaption { margin-top: 0.9rem; }

.rn-review cite {
	font-style: normal;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.rn-carousel--reviews .rn-review {
	flex: 0 0 min(80%, 300px);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 10px;
	background: var(--wp--preset--color--ink-raised);
}

.rn-reviews__more { margin: 1rem 0 0; }

.rn-reviews__more a {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(243, 217, 138, 0.4);
	padding-bottom: 3px;
}

.rn-reviews__more a:hover,
.rn-reviews__more a:focus-visible { border-bottom-color: var(--wp--preset--color--gold); }

@media (min-width: 782px) {
	.rn-reviews--2 .rn-carousel__track,
	.rn-reviews--3 .rn-carousel__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		overflow: visible;
		scroll-snap-type: none;
		max-width: 1000px;
		margin-inline: auto;
	}
}

@media (min-width: 1100px) {
	.rn-reviews--4 .rn-carousel__track,
	.rn-reviews--5 .rn-carousel__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		overflow: visible;
		scroll-snap-type: none;
		max-width: 1180px;
		margin-inline: auto;
	}
}

/* =========================================================
   PHONE MENU: JIM'S ORDER, LEFT ALIGNED AND BOLD (Oct 18)
   =========================================================
   Jim: VIP Rooms at the top, then Gallery, Reservations, Bottle
   Service, Bottle Menu, Steakhouse, Steakhouse Menu, Events, Join
   the Team and Contact, "along the left side in nice bold decent
   size". The navigation block lists the items in that order now
   (Home came out; the logo goes home), so the overlay simply reads
   top to bottom. It used to be centred Gilda Display with the two
   menus as small grey sub items; now every item is the same bold
   Outfit row, left aligned, with a hairline between rows. The
   desktop header keeps its old order through the flex order rules
   at the end of this block.
   ========================================================= */

@media (max-width: 1239.98px) {
	.rn-nav .wp-block-navigation__responsive-container.is-menu-open {
		justify-content: flex-start;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		justify-content: flex-start !important;
		margin-block: 0;
		padding: 4.75rem clamp(1.5rem, 7vw, 3rem) 2.5rem;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
		align-items: stretch !important;
		width: 100% !important;
		max-width: 30rem;
		padding: 0;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
		justify-content: flex-start !important;
		text-align: left;
	}

	/* Core's own overlay rule pads submenus 2em on both sides and loads after
	   this file, so the zero needs !important to put the menus on the same edge. */
	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch !important;
		margin: 0;
		padding: 0 !important;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.rn-overlay-cta) > .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.8rem 0;
		border-bottom: 1px solid var(--wp--preset--color--ink-line);
		font-family: var(--wp--preset--font-family--ui);
		font-size: clamp(1.15rem, 4.8vw, 1.35rem);
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
		text-align: left;
		color: var(--wp--preset--color--ivory);
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item:not(.rn-overlay-cta) > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--gold);
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		display: none;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-cta {
		margin-top: 1.75rem;
		align-items: flex-start !important;
	}

	.rn-nav .wp-block-navigation__responsive-container.is-menu-open .rn-overlay-info {
		max-width: 30rem;
		margin: 1.75rem 0 0;
		text-align: left;
	}
}

/* Desktop header: the old order, Steakhouse first. */
@media (min-width: 1240px) {
	.rn-nav .wp-block-navigation__container > .rn-nav-steak { order: 1; }
	.rn-nav .wp-block-navigation__container > .rn-nav-res { order: 2; }
	.rn-nav .wp-block-navigation__container > .rn-nav-bottle { order: 3; }
	.rn-nav .wp-block-navigation__container > .rn-nav-vip { order: 4; }
	.rn-nav .wp-block-navigation__container > .rn-nav-events { order: 5; }
	.rn-nav .wp-block-navigation__container > .rn-nav-gallery { order: 6; }
	.rn-nav .wp-block-navigation__container > .rn-nav-team { order: 7; }
	.rn-nav .wp-block-navigation__container > .rn-only-overlay,
	.rn-nav .wp-block-navigation__container > .rn-overlay-cta { order: 8; }
}

/* =========================================================
   GOOGLE RATING BADGE IN THE HEROES (Oct 18)
   =========================================================
   [rn_rating_badge] sits under the hero buttons on the five pages
   that have Google reviews (Steakhouse, Menu, VIP & Bottle Service,
   Events and Gallery), so the rating shows on the first screen; a
   tap glides down to that page's reviews (site.js). Jim picked it
   over a bar under the hero from two mockups, then found it too big
   on phones (it overpowered the hero copy), so it is a small, quiet
   pill: a light outline and small type, smaller again up to 781px.
   It is a chip, so it keeps the full pill shape.
   ========================================================= */

.rn-hero__rating {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.rn-ratingtag {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 100%;
	padding: 0.42rem 0.9rem 0.42rem 0.78rem;
	border: 1px solid rgba(243, 217, 138, 0.3);
	border-radius: 999px;
	background: rgba(11, 10, 13, 0.45);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.rn-ratingtag:hover {
	border-color: var(--wp--preset--color--gold);
	background: rgba(11, 10, 13, 0.7);
}

.rn-ratingtag:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.rn-ratingtag__stars,
.rn-ratingtag__arrow {
	display: inline-flex;
	gap: 1px;
	color: var(--wp--preset--color--gold);
}

.rn-ratingtag__stars svg,
.rn-ratingtag__arrow svg {
	display: block;
	width: 12px;
	height: 12px;
}

.rn-ratingtag__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--gold);
}

.rn-ratingtag__sep { opacity: 0.45; }

@media (max-width: 781.98px) {
	.rn-hero__rating { margin-top: 0.85rem; }

	.rn-ratingtag {
		gap: 0.35rem;
		padding: 0.34rem 0.7rem 0.34rem 0.6rem;
		font-size: 0.62rem;
		letter-spacing: 0.08em;
	}

	.rn-ratingtag__stars svg { width: 10px; height: 10px; }
	.rn-ratingtag__arrow svg { width: 9px; height: 9px; }
	.rn-ratingtag__num { font-size: 0.88rem; }
}

/* =========================================================
   UBER EATS ORDER PILL (Oct 18)
   =========================================================
   [rn_uber_eats] (plugin, includes/ordering.php) is a small pill that
   opens Rachel's North on Uber Eats in a new tab: Uber's own app icon,
   "Order on Uber Eats" and an arrow. Jim first saw a large order card
   under the hero and found it too bulky on desktop and phones, so it
   matches the Google rating pill instead. In the Steakhouse and Menu
   heroes the two pills share .rn-hero__chips (side by side on desktop,
   stacked on phones); on Home it sits under the intro of the steakhouse
   section in .rn-ordertag-row. It is a chip, so it keeps the full pill
   shape.
   ========================================================= */

.rn-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 0.7rem;
	margin-top: 1rem;
}

.rn-hero__chips > .rn-hero__rating { margin-top: 0; }

.rn-ordertag-row {
	display: flex;
	justify-content: center;
	margin-top: 1.35rem;
}

.rn-ordertag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	padding: 0.26rem 0.9rem 0.26rem 0.3rem;
	border: 1px solid rgba(243, 217, 138, 0.3);
	border-radius: 999px;
	background: rgba(11, 10, 13, 0.45);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.rn-ordertag:hover {
	border-color: var(--wp--preset--color--gold);
	background: rgba(11, 10, 13, 0.7);
	text-decoration: none;
}

.rn-ordertag:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.rn-ordertag__logo {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.rn-ordertag__arrow {
	display: inline-flex;
	color: var(--wp--preset--color--gold);
}

.rn-ordertag__arrow svg {
	display: block;
	width: 11px;
	height: 11px;
}

@media (max-width: 781.98px) {
	.rn-hero__chips { gap: 0.5rem; margin-top: 0.85rem; }
	.rn-ordertag-row { margin-top: 1.1rem; }

	.rn-ordertag {
		gap: 0.4rem;
		padding: 0.22rem 0.7rem 0.22rem 0.24rem;
		font-size: 0.62rem;
		letter-spacing: 0.08em;
	}

	.rn-ordertag__logo { width: 19px; height: 19px; }
	.rn-ordertag__arrow svg { width: 9px; height: 9px; }
}

/* =========================================================
   MENU COLUMNS ON 320PX PHONES (Oct 18)
   =========================================================
   .rn-menu-grid (the Steakhouse Menu and Bottle Menu lists) sets its
   columns with minmax(320px, 1fr), so on phones 320px wide, where the
   space inside the gutters is about 284px, the column stayed 320px and
   both pages scrolled 18px sideways. min() lets the column shrink to
   the space there is; wider screens are unchanged.
   ========================================================= */

.rn-menu-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* =========================================================
   PHONE CALL BAR WITH UBER EATS (Oct 18)
   =========================================================
   On the Steakhouse and Menu pages, includes/ordering.php (plugin)
   swaps the bar's Text Us for Order on Uber Eats (Uber's app icon over
   the label) and marks the bar .rn-callbar--uber. Jim asked for the
   two buttons to split the bar evenly there so the longer label fits
   on one line. Every other page keeps Text Us and the wider Book a
   Table.
   ========================================================= */

@media (max-width: 781px) {
	.rn-callbar--uber { grid-template-columns: 1fr 1fr; }

	.rn-callbar__btn--uber img {
		display: block;
		width: 20px;
		height: 20px;
	}

	.rn-callbar__btn--uber span { white-space: nowrap; }
}

@media (max-width: 359.98px) {
	.rn-callbar__btn--uber span { letter-spacing: 0.04em; }
}

/* =========================================================
   PHONE MENU SOCIAL ICONS (Oct 19)
   =========================================================
   Jim: the bottom of the phone menu shows the Instagram, Facebook
   and TikTok icons instead of the phone number, hours and address
   (the phone bar and the footer carry those). site.js copies the
   footer's social links into the menu as ul.rn-overlay-social, so
   they match the footer: gold icons in 44px rings, the whole ring
   the tap target, with a soft gold ring so they stand out. Core's
   social links styles outrank short selectors, hence the long ones.
   The old .rn-overlay-info rules are unused since.
   ========================================================= */

ul.rn-overlay-social { display: none; }

.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	order: 99;
	gap: 0.75rem;
	width: 100%;
	max-width: 30rem;
	margin: 1.75rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--wp--preset--color--ink-line);
	list-style: none;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social li.wp-social-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid rgba(243, 217, 138, 0.35);
	border-radius: 50%;
	background: transparent;
	transition: border-color 0.28s ease;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social li.wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	line-height: 0;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social li.wp-social-link svg {
	display: block;
	width: 19px;
	height: 19px;
}

.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social li.wp-social-link:hover,
.rn-nav .wp-block-navigation__responsive-container.is-menu-open ul.rn-overlay-social li.wp-social-link:focus-within {
	border-color: var(--wp--preset--color--gold);
}

/* =========================================================
   TONIGHT STRIP LABELS IN GOLD SCRIPT (Oct 19)
   =========================================================
   Jim found the small uppercase labels in the strip under the Home
   hero plain and asked for gold handwriting. He first picked
   Yellowtail from three mockups, then found it too bold next to the
   rest of the site and chose Dancing Script (weight 500) from four
   lighter options: a casual hand that is easy to read on a phone.
   functions.php adds it to the Google Fonts request, and the plugin
   writes the labels in title case ("Tonight's Steak"). The values on
   the right are unchanged.
   ========================================================= */

.rn-tonight .rn-tonight__k {
	font-family: 'Dancing Script', cursive;
	font-size: 1.42rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
	color: var(--wp--preset--color--gold);
}

@media (max-width: 781.98px) {
	.rn-tonight .rn-tonight__k { font-size: 1.38rem; }
}

/* ============================================================
   FORM SENDING AND ERRORS (Oct 23, 2026)
   The forms post to the lead handler now (includes/leads.php in the
   plugin). The note under the button says what to fix, the button
   dims while a request is sending, and the job application's file
   box lights up when a file is dragged over it.
   ============================================================ */
.rn-form-error {
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: #f3b4a8;
}
.rn-form-submit .rn-btn:disabled { opacity: 0.7; cursor: wait; }
.rn-filebox.is-over { border-color: var(--wp--preset--color--gold); background: rgba(243,217,138,0.08); }

/* ============================================================
   TONIGHT STRIP ON THE SMALLEST PHONES (Oct 23, 2026)
   Friday and Saturday have no steak special, so the strip under the
   Home hero names the next one ("Next Steak Special", Sunday T-Bone).
   Under 360px that longer label left the value a few pixels short and
   it broke at the hyphen. A slightly smaller label and gap keep each
   item on one line there; 360px and wider are unchanged.
   ============================================================ */
@media (max-width: 359.98px) {
	.rn-tonight .rn-tonight__k { font-size: 1.25rem; }
	.rn-tonight__list a { gap: 0.75rem; }
}