/* =========================================================
   Hen & Ribs — front-end styles
   Dark charcoal ground, amber accents, condensed display type.
   No framework, no resets beyond what the theme needs.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	--hr-black: #08080a;
	--hr-charcoal: #101012;
	--hr-surface: #17171a;
	--hr-surface-2: #1f1f23;
	--hr-surface-3: #27272c;

	--hr-amber: #e2952c;
	--hr-amber-bright: #f6b451;
	--hr-amber-deep: #b9721a;
	--hr-red: #d1402f;

	--hr-cream: #f5efe6;
	--hr-text: #e8e2d8;
	--hr-muted: #a49d93;
	--hr-faint: #6f6a63;

	--hr-line: rgba(226, 149, 44, 0.22);
	--hr-line-soft: rgba(245, 239, 230, 0.09);

	--hr-shell: 1180px;
	--hr-gap: clamp(1rem, 2.4vw, 1.75rem);
	--hr-radius: 14px;
	--hr-radius-sm: 9px;

	--hr-display: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	--hr-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--hr-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	--hr-ring: 0 0 0 3px rgba(226, 149, 44, 0.35);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; }

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

body {
	margin: 0;
	background: var(--hr-black);
	color: var(--hr-text);
	font-family: var(--hr-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--hr-amber-bright); text-decoration: none; }
a:hover { color: var(--hr-amber); }
:focus-visible { outline: none; box-shadow: var(--hr-ring); border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--hr-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
	color: var(--hr-cream);
	text-transform: uppercase;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.hr-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--hr-amber); color: #1a1206; padding: 12px 18px; font-weight: 700;
}
.hr-skip:focus { left: 12px; top: 12px; }

.hr-shell { width: min(100% - 2.4rem, var(--hr-shell)); margin-inline: auto; }

/* ---------- 3. Shared pieces ---------- */
.hr-eyebrow {
	font-family: var(--hr-display);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.76rem;
	color: var(--hr-amber);
	margin: 0 0 0.9rem;
	display: flex; align-items: center; gap: 0.6rem;
}
.hr-eyebrow__star { color: var(--hr-amber-deep); font-size: 0.7em; }

.hr-btn {
	display: inline-flex; align-items: center; gap: 0.55rem;
	font-family: var(--hr-display);
	text-transform: uppercase; letter-spacing: 0.09em;
	font-size: 0.92rem; font-weight: 600;
	padding: 0.72rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.hr-btn:active { transform: translateY(1px); }
.hr-btn--amber { background: var(--hr-amber); color: #1a1206; }
.hr-btn--amber:hover { background: var(--hr-amber-bright); color: #1a1206; }
.hr-btn--ghost { background: transparent; color: var(--hr-cream); border-color: var(--hr-line); }
.hr-btn--ghost:hover { border-color: var(--hr-amber); color: var(--hr-amber-bright); }
.hr-btn--lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.hr-btn .hr-icon { flex: none; }

.hr-price {
	font-family: var(--hr-display);
	font-size: 1.08rem; font-weight: 600;
	color: var(--hr-amber-bright);
	letter-spacing: 0.02em;
}
.hr-price--lg { font-size: 1.9rem; display: block; margin: 0.4rem 0 1.2rem; }

.hr-tag {
	display: inline-grid; place-items: center;
	width: 1.35em; height: 1.35em;
	border-radius: 50%;
	font-size: 0.62em; font-weight: 700;
	vertical-align: middle; margin-left: 0.45em;
}
.hr-tag--veg { background: rgba(112, 168, 90, 0.18); color: #8fce70; border: 1px solid rgba(143, 206, 112, 0.45); }

.hr-section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.hr-section--dark { background: var(--hr-charcoal); }
.hr-section__head { max-width: 58ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.hr-section__title { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.hr-section__lede { color: var(--hr-muted); font-size: 1.05rem; }

/* ---------- 4. Top bar + header ---------- */
.hr-topbar {
	background: var(--hr-charcoal);
	border-bottom: 1px solid var(--hr-line-soft);
	font-size: 0.82rem;
}
.hr-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.hr-topbar__text { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--hr-muted); }
.hr-topbar__text .hr-icon { color: var(--hr-amber); }
.hr-topbar__phone { display: flex; align-items: center; gap: 0.4rem; color: var(--hr-cream); font-weight: 600; }

.hr-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(8, 8, 10, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hr-line-soft);
	transition: box-shadow 0.2s ease;
}
.hr-header.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.hr-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 72px; }
.hr-header__brand { margin-right: auto; }
.hr-header__actions { display: flex; align-items: center; gap: 0.7rem; }

.hr-wordmark { display: block; line-height: 1; }
.hr-wordmark__name {
	display: block;
	font-family: var(--hr-display);
	font-size: 1.55rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--hr-cream);
}
.hr-wordmark__name em { color: var(--hr-red); font-style: normal; }
.hr-wordmark__tag {
	display: block;
	font-family: var(--hr-display);
	font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--hr-amber); margin-top: 0.32rem;
}
.custom-logo { max-height: 56px; width: auto; }

.hr-nav__list { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.hr-nav__list a {
	font-family: var(--hr-display);
	text-transform: uppercase; letter-spacing: 0.11em;
	font-size: 0.88rem; color: var(--hr-text);
	padding: 0.4rem 0; display: inline-block; position: relative;
}
.hr-nav__list a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
	background: var(--hr-amber); transition: right 0.22s ease;
}
.hr-nav__list a:hover { color: var(--hr-amber-bright); }
.hr-nav__list a:hover::after,
.hr-nav__list .current-menu-item > a::after { right: 0; }
.hr-nav__list .sub-menu { display: none; }

.hr-cart {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--hr-line); border-radius: 999px;
	color: var(--hr-cream);
	font-family: var(--hr-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
}
.hr-cart:hover { border-color: var(--hr-amber); color: var(--hr-amber-bright); }
.hr-cart__count {
	min-width: 1.5em; height: 1.5em; padding: 0 0.35em;
	display: grid; place-items: center;
	background: var(--hr-amber); color: #1a1206;
	border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.hr-cart__count.is-empty { background: var(--hr-surface-3); color: var(--hr-faint); }

.hr-burger { display: none; background: none; border: 1px solid var(--hr-line); border-radius: 10px; width: 42px; height: 42px; padding: 0; cursor: pointer; }
.hr-burger__bars, .hr-burger__bars::before, .hr-burger__bars::after {
	display: block; width: 18px; height: 2px; background: var(--hr-cream); margin-inline: auto; position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
}
.hr-burger__bars::before, .hr-burger__bars::after { content: ""; position: absolute; left: 0; }
.hr-burger__bars::before { top: -6px; }
.hr-burger__bars::after { top: 6px; }
.hr-burger[aria-expanded="true"] .hr-burger__bars { background: transparent; }
.hr-burger[aria-expanded="true"] .hr-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.hr-burger[aria-expanded="true"] .hr-burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hr-hero {
	position: relative;
	padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(226, 149, 44, 0.16), transparent 60%),
		radial-gradient(90% 80% at 10% 100%, rgba(209, 64, 47, 0.10), transparent 65%),
		var(--hr-black);
	overflow: hidden;
}
.hr-hero__media { position: absolute; inset: 0; z-index: 0; }
.hr-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.hr-hero.has-image::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to right, var(--hr-black) 12%, rgba(8, 8, 10, 0.55) 70%, rgba(8, 8, 10, 0.2));
}
.hr-hero__inner { position: relative; z-index: 2; max-width: 44rem; }
.hr-hero__title { font-size: clamp(2.4rem, 7vw, 4.4rem); margin-bottom: 0.5em; }
.hr-hero__text { color: var(--hr-muted); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 40ch; }
.hr-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 2.2rem; }
.hr-hero__facts { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.hr-hero__facts li { display: flex; align-items: center; gap: 0.5rem; color: var(--hr-muted); font-size: 0.9rem; }
.hr-hero__facts .hr-icon { color: var(--hr-amber); }

/* ---------- 6. Promise strip ---------- */
.hr-strip { background: var(--hr-charcoal); border-block: 1px solid var(--hr-line-soft); padding: 1.6rem 0; }
.hr-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hr-gap); }
.hr-strip__item { display: flex; align-items: center; gap: 0.9rem; }
.hr-strip__item .hr-icon { color: var(--hr-amber); flex: none; }
.hr-strip__item strong {
	display: block; font-family: var(--hr-display); text-transform: uppercase;
	letter-spacing: 0.09em; font-size: 0.95rem; color: var(--hr-cream);
}
.hr-strip__item span { color: var(--hr-muted); font-size: 0.86rem; }

/* ---------- 7. Category grid ---------- */
.hr-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hr-cat__link {
	display: flex; align-items: center; gap: 0.8rem;
	padding: 1.05rem 1.2rem;
	background: var(--hr-surface);
	border: 1px solid var(--hr-line-soft);
	border-radius: var(--hr-radius);
	color: var(--hr-cream);
	transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.hr-cat__link:hover { border-color: var(--hr-amber); background: var(--hr-surface-2); transform: translateY(-2px); color: var(--hr-cream); }
.hr-cat__name { font-family: var(--hr-display); text-transform: uppercase; letter-spacing: 0.07em; font-size: 1.02rem; }
.hr-cat__count { margin-left: auto; color: var(--hr-faint); font-size: 0.8rem; }
.hr-cat__link .hr-icon { color: var(--hr-amber); flex: none; }

/* ---------- 8. Platters ---------- */
.hr-platters { display: grid; gap: var(--hr-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hr-platter {
	display: flex; flex-direction: column;
	background: var(--hr-surface); border: 1px solid var(--hr-line-soft);
	border-radius: var(--hr-radius); overflow: hidden;
	transition: border-color 0.16s ease, transform 0.16s ease;
}
.hr-platter:hover { border-color: var(--hr-line); transform: translateY(-3px); }
.hr-platter__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hr-platter__body { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.hr-platter__title { font-size: 1.28rem; margin: 0; }
.hr-platter__text { color: var(--hr-muted); font-size: 0.92rem; margin: 0; }
.hr-platter__foot { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }

/* ---------- 9. Visit + CTA ---------- */
.hr-visit__grid { display: grid; gap: clamp(1.8rem, 5vw, 3.5rem); grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.hr-visit__hours { background: var(--hr-surface); border: 1px solid var(--hr-line-soft); border-radius: var(--hr-radius); padding: 1.5rem; }
.hr-hours { list-style: none; margin: 0; padding: 0; }
.hr-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--hr-line-soft); font-size: 0.93rem; }
.hr-hours li:last-child { border-bottom: 0; }
.hr-hours span { color: var(--hr-muted); }
.hr-hours em { font-style: normal; color: var(--hr-cream); font-weight: 600; }

.hr-contact { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.7rem; }
.hr-contact li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--hr-muted); font-size: 0.93rem; }
.hr-contact .hr-icon { color: var(--hr-amber); flex: none; margin-top: 0.15rem; }
.hr-contact a { color: var(--hr-cream); }
.hr-contact a:hover { color: var(--hr-amber-bright); }
.hr-contact--lg li { font-size: 1rem; }

.hr-cta {
	background: linear-gradient(120deg, var(--hr-amber-deep), var(--hr-amber));
	color: #1a1206;
	padding: clamp(2.6rem, 6vw, 4rem) 0;
	text-align: center;
}
.hr-cta__title { color: #1a1206; font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: 0.35em; }
.hr-cta__text { color: rgba(26, 18, 6, 0.78); margin-bottom: 1.6rem; }
.hr-cta .hr-btn--amber { background: #14100a; color: var(--hr-amber-bright); }
.hr-cta .hr-btn--amber:hover { background: #000; color: var(--hr-amber-bright); }

/* ---------- 10. Page heads ---------- */
.hr-pagehead {
	padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.6rem, 3vw, 2.4rem);
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(226, 149, 44, 0.14), transparent 62%),
		var(--hr-charcoal);
	border-bottom: 1px solid var(--hr-line-soft);
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.hr-pagehead--inline { background: none; border-bottom: 0; padding-top: 2.4rem; }
.hr-pagehead__title { font-size: clamp(2rem, 5.2vw, 3.4rem); margin-bottom: 0.3em; }
.hr-pagehead__lede { color: var(--hr-muted); margin: 0; }

/* ---------- 11. Menu board ---------- */
.hr-board { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.hr-board__notice {
	display: flex; align-items: center; gap: 0.6rem;
	background: rgba(226, 149, 44, 0.10);
	border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius-sm);
	padding: 0.85rem 1.1rem;
	color: var(--hr-cream); font-size: 0.92rem;
	margin-bottom: 1.4rem;
}
.hr-board__notice .hr-icon { color: var(--hr-amber); flex: none; }

.hr-board__bar {
	position: sticky; top: 72px; z-index: 40;
	display: flex; align-items: center; gap: 1rem;
	padding: 0.7rem 0;
	background: rgba(8, 8, 10, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hr-line-soft);
	margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.hr-rail { flex: 1; min-width: 0; }
.hr-rail__list {
	display: flex; gap: 0.45rem; list-style: none; margin: 0; padding: 0 0 0.2rem;
	overflow-x: auto; scrollbar-width: thin;
	scrollbar-color: var(--hr-surface-3) transparent;
}
.hr-rail__list::-webkit-scrollbar { height: 4px; }
.hr-rail__list::-webkit-scrollbar-thumb { background: var(--hr-surface-3); border-radius: 4px; }
.hr-rail__link {
	display: block; white-space: nowrap;
	padding: 0.48rem 0.95rem;
	border: 1px solid var(--hr-line-soft); border-radius: 999px;
	font-family: var(--hr-display); text-transform: uppercase; letter-spacing: 0.08em;
	font-size: 0.8rem; color: var(--hr-muted);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.hr-rail__link:hover { color: var(--hr-cream); border-color: var(--hr-line); }
.hr-rail__link.is-active { background: var(--hr-amber); border-color: var(--hr-amber); color: #1a1206; }

.hr-board__search { position: relative; flex: none; width: 230px; }
.hr-board__search .hr-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--hr-faint); pointer-events: none; }
.hr-board__search input {
	width: 100%;
	padding: 0.55rem 0.9rem 0.55rem 2.4rem;
	background: var(--hr-surface); color: var(--hr-cream);
	border: 1px solid var(--hr-line-soft); border-radius: 999px;
	font: inherit; font-size: 0.9rem;
}
.hr-board__search input::placeholder { color: var(--hr-faint); }
.hr-board__search input:focus { border-color: var(--hr-amber); outline: none; }

.hr-board__empty { text-align: center; color: var(--hr-muted); padding: 2.5rem 0; }

.hr-course { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); scroll-margin-top: 132px; }
.hr-course__head { margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--hr-line); }
.hr-course__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0; }
.hr-course__lede { color: var(--hr-muted); font-size: 0.92rem; margin: 0.35rem 0 0; }

.hr-dishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.hr-dish {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem 1rem;
	align-items: start;
	padding: 1.05rem 1.15rem;
	background: var(--hr-surface);
	border: 1px solid var(--hr-line-soft);
	border-radius: var(--hr-radius);
	transition: border-color 0.16s ease, background-color 0.16s ease;
}
.hr-dish:hover { border-color: var(--hr-line); background: var(--hr-surface-2); }
.hr-dish.has-media { grid-template-columns: 76px 1fr auto; }
.hr-dish__media { grid-row: span 2; }
.hr-dish__media img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--hr-radius-sm); }
.hr-dish__body { min-width: 0; }
.hr-dish__title { font-size: 1.05rem; margin: 0 0 0.25rem; letter-spacing: 0.03em; }
.hr-dish__title a { color: var(--hr-cream); }
.hr-dish__title a:hover { color: var(--hr-amber-bright); }
.hr-dish__text { color: var(--hr-muted); font-size: 0.87rem; margin: 0; }
.hr-dish__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.hr-dish[hidden] { display: none; }

/* ---------- 12. Single dish ---------- */
.hr-dishpage { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.hr-dishpage__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.hr-dishpage__media img { width: 100%; border-radius: var(--hr-radius); }
.hr-dishpage__placeholder {
	aspect-ratio: 1; display: grid; place-items: center;
	background: var(--hr-surface); border: 1px solid var(--hr-line-soft);
	border-radius: var(--hr-radius); color: var(--hr-amber-deep);
}
.hr-dishpage__title { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.hr-dishpage__back { margin-top: 1.6rem; font-size: 0.9rem; }

/* ---------- 13. Prose, posts, misc ---------- */
.hr-prose { max-width: 72ch; margin-inline: auto; color: var(--hr-text); }
.hr-prose h2 { font-size: 1.7rem; margin-top: 1.8em; }
.hr-prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.hr-prose ul, .hr-prose ol { padding-left: 1.3em; }
.hr-prose li { margin-bottom: 0.4em; }
.hr-prose blockquote {
	margin: 1.6em 0; padding: 0.4em 0 0.4em 1.2em;
	border-left: 3px solid var(--hr-amber); color: var(--hr-cream); font-size: 1.08rem;
}
.hr-prose img { border-radius: var(--hr-radius); }
.hr-prose code { background: var(--hr-surface-2); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }

.hr-page__media { margin-bottom: 2rem; }
.hr-page__media img { width: 100%; border-radius: var(--hr-radius); }

.hr-archive { padding-bottom: 4rem; }
.hr-posts { display: grid; gap: var(--hr-gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hr-post { background: var(--hr-surface); border: 1px solid var(--hr-line-soft); border-radius: var(--hr-radius); overflow: hidden; }
.hr-post__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hr-post__body { padding: 1.2rem; }
.hr-post__title { font-size: 1.2rem; margin: 0.3rem 0 0.5rem; }
.hr-post__title a { color: var(--hr-cream); }
.hr-post__excerpt { color: var(--hr-muted); font-size: 0.9rem; margin: 0; }
.hr-meta { color: var(--hr-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }

.hr-postnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hr-line-soft); font-size: 0.9rem; }

.hr-empty { text-align: center; max-width: 46ch; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) 0; }

.hr-searchform { display: flex; gap: 0.5rem; }
.hr-searchform input {
	flex: 1; padding: 0.6rem 1rem; font: inherit;
	background: var(--hr-surface); color: var(--hr-cream);
	border: 1px solid var(--hr-line-soft); border-radius: 999px;
}

.pagination, .nav-links { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.nav-links .page-numbers {
	display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
	border: 1px solid var(--hr-line-soft); border-radius: 8px; color: var(--hr-muted);
}
.nav-links .page-numbers.current { background: var(--hr-amber); border-color: var(--hr-amber); color: #1a1206; }

/* ---------- 14. Footer ---------- */
.hr-footer { background: var(--hr-charcoal); border-top: 1px solid var(--hr-line-soft); padding-top: clamp(2.6rem, 6vw, 4rem); }
.hr-footer__widgets { display: grid; gap: var(--hr-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-bottom: 2.4rem; border-bottom: 1px solid var(--hr-line-soft); margin-bottom: 2.4rem; }
.hr-footer__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: 1.4fr 1fr 1fr; }
.hr-footer__blurb { color: var(--hr-muted); font-size: 0.92rem; max-width: 36ch; margin-top: 1.1rem; }
.hr-footer__title, .hr-widget__title {
	font-family: var(--hr-display); text-transform: uppercase; letter-spacing: 0.14em;
	font-size: 0.88rem; color: var(--hr-amber); margin: 0 0 1rem;
	display: flex; align-items: center; gap: 0.5rem;
}
.hr-social { list-style: none; display: flex; gap: 1rem; margin: 1.2rem 0 0; padding: 0; font-size: 0.85rem; }
.hr-footer__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
	margin-top: clamp(2rem, 5vw, 3rem); padding: 1.3rem 0;
	border-top: 1px solid var(--hr-line-soft);
	color: var(--hr-faint); font-size: 0.83rem;
}
.hr-footer__bar p { margin: 0; }
.hr-footer__nav { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.hr-footer__nav a { color: var(--hr-muted); }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1024px) {
	.hr-visit__grid, .hr-dishpage__grid { grid-template-columns: 1fr; }
	.hr-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.hr-burger { display: grid; place-items: center; }
	.hr-header__order { display: none; }
	/* The drawer is display:none when closed, NOT parked off-screen with
	   transform: translateX(100%). A fixed element sitting to the right of the
	   viewport is the classic cause of a phantom horizontal scrollbar on
	   phones, and ancestor overflow cannot clip it (fixed elements are not
	   clipped by an ancestor's overflow). Removing it from rendering entirely
	   is the only reliable fix. The slide-in is kept as an animation. */
	.hr-nav {
		display: none;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: auto;
		width: min(84vw, 340px);
		background: var(--hr-charcoal);
		border-left: 1px solid var(--hr-line-soft);
		padding: 6rem 1.8rem 2rem;
		z-index: 70;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.hr-nav.is-open {
		display: block;
		animation: hr-nav-in 0.22s ease both;
	}

	@keyframes hr-nav-in {
		from { transform: translateX(100%); }
		to   { transform: none; }
	}

	@media (prefers-reduced-motion: reduce) {
		.hr-nav.is-open { animation: none; }
	}
	.hr-nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
	.hr-nav__list a { font-size: 1.1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hr-line-soft); }
	.hr-nav__list a::after { display: none; }
	body.hr-nav-open { overflow: hidden; }

	/* Two separate problems, both caused by the drawer being a CHILD of
	   .hr-header:

	   1. CONTAINING BLOCK. .hr-header has backdrop-filter, and backdrop-filter
	      (like transform and filter) makes an element the containing block for
	      its position:fixed descendants. So `position: fixed; top:0; bottom:0`
	      resolved against the 64px-tall HEADER instead of the viewport — the
	      drawer rendered as a small strip in the top-right corner showing only
	      the first link. Dropping the filter while the menu is open restores
	      the viewport as the containing block.

	   2. STACKING CONTEXT. The same filter (plus z-index:60) means the
	      drawer's z-index:70 is scoped inside the header, effectively "60"
	      against the page, while the scrim is a body child at 65 — so the
	      overlay painted over the drawer. Lifting the header above the scrim
	      fixes that.

	   A child can never escape its parent's containing block or stacking
	   context by raising its own z-index; the parent has to change. */
	body.hr-nav-open .hr-header {
		z-index: 90;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.hr-navscrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 65; }
	.hr-strip__grid { grid-template-columns: 1fr; gap: 0.9rem; }
	.hr-board__bar { flex-direction: column; align-items: stretch; gap: 0.6rem; top: 64px; }
	.hr-board__search { width: 100%; }
	.hr-course { scroll-margin-top: 178px; }
	html { scroll-padding-top: 178px; }
}

@media (max-width: 600px) {
	.hr-shell { width: min(100% - 1.6rem, var(--hr-shell)); }
	.hr-header__inner { min-height: 64px; }
	.hr-cart__label { display: none; }
	.hr-footer__grid { grid-template-columns: 1fr; }
	.hr-dishes { grid-template-columns: 1fr; }
	.hr-dish { grid-template-columns: 1fr auto; }
	.hr-dish.has-media { grid-template-columns: 64px 1fr auto; }
	.hr-dish__media img { width: 64px; height: 64px; }
	.hr-hero__actions .hr-btn { flex: 1; justify-content: center; }
	.hr-topbar__text span { display: none; }
}

@media (prefers-contrast: more) {
	.hr-dish, .hr-cat__link, .hr-platter { border-color: var(--hr-line); }
	.hr-muted, .hr-section__lede, .hr-dish__text { color: #cfc8bd; }
}

/* ---------- 16. Sold out ---------- */
.hr-dish.is-soldout { opacity: 0.62; }
.hr-dish.is-soldout .hr-dish__media img { filter: grayscale(1); }
.hr-tag--soldout {
	width: auto; height: auto; border-radius: 999px;
	padding: 0.15em 0.6em;
	background: rgba(209, 64, 47, 0.16);
	border: 1px solid rgba(209, 64, 47, 0.5);
	color: #e8796a;
	font-size: 0.6em; letter-spacing: 0.08em; text-transform: uppercase;
}
.hr-soldout {
	font-family: var(--hr-display);
	text-transform: uppercase; letter-spacing: 0.09em;
	font-size: 0.82rem; color: var(--hr-faint);
	border: 1px dashed var(--hr-line-soft); border-radius: 999px;
	padding: 0.5rem 1rem;
}

/* =========================================================
   17. Block-built homepage
   -----------------------------------------------------------
   When the homepage is built from blocks, the patterns reuse the
   same section classes as the coded templates, so most styling is
   already covered. These rules bridge the few places where core
   block markup differs from the hand-written markup.
   ========================================================= */
.hr-home-blocks > .alignfull { width: 100%; margin-inline: 0; }

/* Core wraps buttons in .wp-block-button; the theme's button styling lives on
   the inner <a>, so pass the look through. */
.hr-home-blocks .wp-block-button.hr-btn { padding: 0; border: 0; background: none; }

.hr-home-blocks .wp-block-button.hr-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--hr-display);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.92rem;
	font-weight: 600;
	padding: 0.72rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
}

.hr-home-blocks .wp-block-button.hr-btn--lg .wp-block-button__link { padding: 0.95rem 1.9rem; font-size: 1rem; }
.hr-home-blocks .wp-block-button.hr-btn--amber .wp-block-button__link { background: var(--hr-amber); color: #1a1206; }
.hr-home-blocks .wp-block-button.hr-btn--amber .wp-block-button__link:hover { background: var(--hr-amber-bright); }
.hr-home-blocks .wp-block-button.hr-btn--ghost .wp-block-button__link { background: transparent; color: var(--hr-cream); border-color: var(--hr-line); }
.hr-home-blocks .wp-block-button.hr-btn--ghost .wp-block-button__link:hover { border-color: var(--hr-amber); color: var(--hr-amber-bright); }

/* The promises strip is a columns block rather than a flex row of icons. */
.hr-home-blocks .hr-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hr-gap); }
.hr-home-blocks .hr-strip__grid .wp-block-column { flex-basis: auto !important; }
.hr-home-blocks .hr-strip__title { margin: 0; }
.hr-home-blocks .hr-strip__title strong {
	font-family: var(--hr-display);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.95rem;
	color: var(--hr-cream);
}
.hr-home-blocks .hr-strip__sub { margin: 0; color: var(--hr-muted); font-size: 0.86rem; }

/* Columns blocks used for the visit band. */
.hr-home-blocks .hr-visit__grid { align-items: flex-start; }

.hr-home-blocks .hr-hero__inner > * { max-width: 44rem; }
.hr-home-blocks .hr-cta__inner { text-align: center; }
.hr-home-blocks .hr-cta__inner .wp-block-buttons { justify-content: center; }

@media (max-width: 860px) {
	.hr-home-blocks .hr-strip__grid { grid-template-columns: 1fr; }
}