/* ==========================================================================
   El Palenque
   Layout: a turquoise woven field carrying torn parchment panels, the way the
   printed To-Go & Bulk Order menu is laid out. Serape stripes divide sections,
   magenta outlined display type carries the headings, orange marks the offers.
   Colours and proportions are sampled from that menu.
   ========================================================================== */

:root {
	/* Colour — sampled from the printed menu */
	--teal-ink:   #06312e;
	--teal-deep:  #0a443f;
	--teal:       #17a396;   /* brand hue — ornament, serape stripes, chips */
	--teal-lit:   #56c6ba;
	--field:      #0d6f66;   /* page field — dark enough for cream body copy */
	--field-lit:  #0f7b71;
	--parch:      #f6f0e2;
	--parch-2:    #ede2cc;
	--parch-3:    #e0cfa9;
	--parch-edge: #d8c5a4;
	--cream:      #fffaf0;
	--cocoa:      #33200f;
	--cocoa-soft: #6d5541;
	--pink:       #d9156f;
	--pink-lit:   #ff4aa6;
	--orange:     #cd4c20;   /* darkened from the print orange so white text clears AA */
	--orange-lit: #f15926;   /* the original, for fills that carry no text */
	--yellow:     #ffc721;
	--leaf:       #3f9d4f;

	/* Type */
	--display: "Archivo Black", "Arial Black", Impact, sans-serif;
	--body:    "Figtree", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
	--label:   "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;

	/* Rhythm */
	/* Logo width x its aspect ratio, plus the bar's own padding and border.
	   theme.js overwrites both with measured pixel values once it runs. */
	--masthead-h: calc(clamp(118px, 15vw, 186px) * 0.547 + 1.2rem + 3px);
	--menunav-h:  3.4rem;

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--shell:  1280px;
	--narrow: 68ch;
	--rad:    4px;

	--serape: repeating-linear-gradient(90deg,
		var(--pink)   0 10px, var(--orange) 10px 20px, var(--yellow) 20px 30px,
		var(--leaf)   30px 40px, var(--teal) 40px 50px, #2f7fc4 50px 60px,
		#8e4fb0 60px 70px, var(--cream) 70px 80px);

	color-scheme: light;
}

/* --------------------------------------------------------------- base --- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cocoa);
	/* Woven turquoise field, drawn rather than tiled so it never seams. */
	background-color: var(--field);
	background-image:
		radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255,255,255,.10), transparent 70%),
		radial-gradient(ellipse 70% 70% at 88% 55%, rgba(6,49,46,.30), transparent 72%),
		repeating-linear-gradient(45deg,  rgba(255,255,255,.05)  0 2px, transparent 2px 5px),
		repeating-linear-gradient(-45deg, rgba(6,49,46,.10)      0 2px, transparent 2px 5px),
		repeating-linear-gradient(90deg,  rgba(6,49,46,.06)      0 1px, transparent 1px 4px),
		linear-gradient(170deg, var(--field-lit), var(--field) 40%, var(--teal-deep));
	background-attachment: fixed;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; line-height: 1.04; }

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

:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 3px;
	border-radius: 2px;
}

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.shell--narrow { max-width: 900px; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--pink);
	color: #fff;
	padding: .75rem 1.25rem;
	font-family: var(--label);
	text-transform: uppercase;
	letter-spacing: .08em;
}
.skip-link:focus { left: 0; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- type helpers --- */

.display {
	font-family: var(--display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -.012em;
}

/* The menu's heading treatment. Two versions, because the stroke colour has to
   contrast with the surface behind it: a cream outline on a cream band is
   invisible and the glyphs ghost out. On light surfaces the outline goes dark;
   on dark surfaces it stays cream. */
.display--outlined {
	color: var(--pink);
	-webkit-text-stroke: .045em var(--cocoa);
	paint-order: stroke fill;
	filter: drop-shadow(0 .04em 0 rgba(51,32,15,.45));
}
.display--onDark {
	color: var(--pink-lit);
	-webkit-text-stroke: .05em var(--cream);
	paint-order: stroke fill;
	filter: drop-shadow(0 .04em 0 rgba(0,0,0,.45));
}

.eyebrow {
	font-family: var(--label);
	font-weight: 600;
	font-size: clamp(.82rem, 1.6vw, .95rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cocoa-soft);
	margin: 0 0 .75rem;
}
.eyebrow--light { color: rgba(255,250,240,.93); }

.lede {
	font-size: clamp(1.06rem, 1.9vw, 1.22rem);
	line-height: 1.6;
	max-width: var(--narrow);
	color: var(--cocoa-soft);
}
.lede--light { color: rgba(255,250,240,.96); }

.tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- ornaments --- */

.serape {
	height: 12px;
	background: var(--serape);
	background-size: 80px 100%;
}
.serape--thin { height: 7px; }

.dotrule {
	height: 0;
	border: 0;
	border-top: 3px dotted var(--parch-edge);
	margin: .85rem 0 1.25rem;
}
.dotrule--light { border-top-color: rgba(255,250,240,.38); }

/* Torn-paper deckle on the parchment panels. */
.panel {
	position: relative;
	background-color: var(--parch);
	background-image:
		radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.75), transparent 60%),
		radial-gradient(ellipse at 85% 100%, rgba(216,197,164,.5), transparent 55%);
	color: var(--cocoa);
	padding: clamp(1.4rem, 3.4vw, 2.6rem);
	box-shadow: 0 18px 40px -22px rgba(6,49,46,.85), 0 2px 0 rgba(255,255,255,.5) inset;
}
.panel::before,
.panel::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 9px;
	background: radial-gradient(circle at 5px -3px, rgba(0,0,0,0) 6.2px, var(--parch) 6.6px) repeat-x;
	background-size: 11px 9px;
	pointer-events: none;
}
.panel::before { top: -8px; transform: scaleY(-1); }
.panel::after  { bottom: -8px; }

.panel--flat::before,
.panel--flat::after { display: none; }

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--label);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.1rem);
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .78rem 1.4rem;
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	background: var(--yellow);
	color: var(--cocoa);
	box-shadow: 0 4px 0 var(--cocoa);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--cocoa); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--cocoa); }

.btn--primary { background: var(--pink); color: #fff; border-color: #6d0033; box-shadow: 0 4px 0 #6d0033; }
.btn--primary:hover { box-shadow: 0 2px 0 #6d0033; }

.btn--hot { background: var(--orange); color: #fff; border-color: #7d2608; box-shadow: 0 4px 0 #7d2608; }
.btn--hot:hover { box-shadow: 0 2px 0 #7d2608; }

.btn--ghost {
	background: transparent;
	color: var(--cream);
	border-color: var(--cream);
	box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.btn--ghost:hover { background: rgba(255,250,240,.12); box-shadow: 0 2px 0 rgba(0,0,0,.3); }

.btn--sm { padding: .5rem .95rem; font-size: .92rem; border-width: 2px; box-shadow: 0 3px 0 var(--cocoa); }

.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* ------------------------------------------------------------- header --- */

.topbar {
	background: var(--teal-ink);
	color: var(--cream);
	font-family: var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .88rem;
}
.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: .55rem;
	min-height: 2.6rem;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__links { display: flex; gap: 1.1rem; align-items: center; }
.topbar__links .icon { width: 1.15rem; height: 1.15rem; }

.masthead {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 60;
	background: var(--cream);
	border-bottom: 3px solid var(--cocoa);
	box-shadow: 0 10px 30px -18px rgba(6,49,46,.9);
}
.masthead__inner {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.75rem);
	padding-block: .6rem;
}
.brand { flex: none; line-height: 0; }
.brand img { width: clamp(118px, 15vw, 186px); height: auto; }

.nav { margin-left: auto; }
.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 2vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav__list a {
	font-family: var(--label);
	font-weight: 600;
	font-size: 1.06rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cocoa);
	padding-block: .35rem;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { border-bottom-color: var(--pink); color: var(--pink); }

.masthead__cta { display: flex; align-items: center; gap: .6rem; flex: none; }

.navtoggle {
	display: none;
	margin-left: auto;
	background: var(--pink);
	color: #fff;
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: .4rem .6rem;
	cursor: pointer;
}
.navtoggle .icon { width: 1.5rem; height: 1.5rem; }

@media (max-width: 1080px) {
	.navtoggle { display: inline-flex; }
	.nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(21rem, 86vw);
		background: var(--cream);
		border-left: 4px solid var(--cocoa);
		padding: 5.5rem 1.75rem 2rem;
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
		z-index: 70;
	}
	.nav[data-open="true"] { transform: none; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list li { border-bottom: 2px dotted var(--parch-edge); }
	.nav__list a { display: block; padding: .9rem 0; font-size: 1.22rem; border-bottom: 0; }
	.masthead__cta .btn span { display: none; }
	.navclose {
		position: absolute; top: 1.1rem; right: 1.1rem;
		background: var(--cocoa); color: var(--cream);
		border: 0; border-radius: 50%; width: 2.4rem; height: 2.4rem;
		display: grid; place-items: center; cursor: pointer;
	}
	.navscrim {
		position: fixed; inset: 0; background: rgba(6,49,46,.6);
		z-index: 65; border: 0; cursor: pointer;
	}
}
@media (min-width: 1081px) {
	.navclose, .navscrim { display: none; }
}

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

.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem); }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
}

.hero__title {
	font-family: var(--display);
	font-size: clamp(2.6rem, 7.4vw, 5.1rem);
	text-transform: uppercase;
	line-height: .94;
	margin-bottom: .5rem;
}
.hero__sub {
	font-family: var(--display);
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	text-transform: uppercase;
	color: var(--yellow);
	-webkit-text-stroke: .05em rgba(6,49,46,.9);
	paint-order: stroke fill;
	margin-bottom: 1rem;
}

.hero__copy { color: var(--cream); }
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.6rem;
}

.hero__figure { position: relative; }
.hero__figure img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border: 5px solid var(--cream);
	border-radius: var(--rad);
	box-shadow: 0 26px 60px -28px rgba(6,49,46,1);
}
/* A landscape photograph needs a wider frame than the 5:4 portrait default,
   so the building is not cropped at the edges. */
.hero__figure--wide img { aspect-ratio: 3 / 2; }

.hero__stamp {
	position: absolute;
	right: -.6rem;
	bottom: -1.4rem;
	background: var(--pink);
	color: #fff;
	border: 4px solid var(--cream);
	border-radius: var(--rad);
	padding: .6rem 1rem;
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(.9rem, 1.7vw, 1.15rem);
	line-height: 1.1;
	text-align: center;
	transform: rotate(-3deg);
	box-shadow: 0 10px 24px -12px rgba(0,0,0,.8);
}
.hero__stamp small {
	display: block;
	font-family: var(--label);
	font-size: .72em;
	letter-spacing: .1em;
	font-weight: 600;
}

@media (max-width: 860px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__figure { order: -1; }
	.hero__stamp { right: .5rem; }
}

/* Open / closed indicator */
.status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: rgba(6,49,46,.55);
	border: 2px solid rgba(255,250,240,.45);
	border-radius: 999px;
	padding: .35rem .95rem .35rem .7rem;
	font-family: var(--label);
	font-size: .98rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream);
	margin-bottom: 1rem;
}
.status__dot {
	width: .72rem; height: .72rem; border-radius: 50%;
	background: #9aa3a1; flex: none;
	box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.status[data-open="true"] .status__dot { background: #41d17f; }
.status__detail { opacity: .78; font-weight: 500; }
.status--onLight { background: var(--parch-2); border-color: var(--parch-edge); color: var(--cocoa); }

/* -------------------------------------------------------------- facts --- */

.facts { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0;
	border: 4px solid var(--cocoa);
	border-radius: var(--rad);
	overflow: hidden;
	background: var(--parch);
	box-shadow: 0 18px 44px -26px rgba(6,49,46,1);
}
.fact {
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	border-right: 3px dotted var(--parch-edge);
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}
.fact:last-child { border-right: 0; }
.fact__label {
	font-family: var(--label);
	font-size: .88rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pink);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.fact__label .icon { width: 1.05rem; height: 1.05rem; }
.fact__value { font-weight: 600; font-size: 1.06rem; line-height: 1.4; }
.fact__value a { text-decoration: none; border-bottom: 2px solid var(--pink); }
.fact__value a:hover { color: var(--pink); }
.fact__meta { font-size: .95rem; color: var(--cocoa-soft); }

@media (max-width: 720px) {
	.fact { border-right: 0; border-bottom: 3px dotted var(--parch-edge); }
	.fact:last-child { border-bottom: 0; }
}

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

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }

.section__head { margin-bottom: clamp(1.4rem, 3vw, 2.25rem); max-width: 54rem; }
.section__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.85rem, 4.6vw, 3.1rem);
	line-height: 1;
}
.section__head .lede { margin-top: .9rem; }

.band {
	background: var(--teal-ink);
	color: var(--cream);
	border-block: 4px solid var(--cocoa);
}
/* Only the dark band forces a cream heading. On the pale band this used to
   override .display--outlined's pink fill, which is what made those headings
   disappear — cream text on a cream surface. */
.band:not(.band--parch) .section__title { color: var(--cream); }
.band--parch {
	background: var(--parch-3);
	color: var(--cocoa);
	background-image: radial-gradient(ellipse at 30% 0%, rgba(255,253,246,.5), transparent 70%);
}

/* --------------------------------------------------------------- grid --- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	gap: clamp(1.1rem, 2.6vw, 1.9rem);
	align-items: start;
}

.card { height: 100%; display: flex; flex-direction: column; gap: .55rem; }
.card__kicker {
	font-family: var(--label);
	font-size: .85rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pink);
}
.card__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.2rem, 2.3vw, 1.5rem);
}
.card__copy { color: var(--cocoa-soft); font-size: .99rem; }

.card--solid {
	background: var(--cream);
	border: 4px solid var(--cocoa);
	border-radius: var(--rad);
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
	box-shadow: 0 16px 38px -22px rgba(6,49,46,1);
}
.card--solid .card__copy { color: var(--cocoa-soft); }
.card--solid > img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	margin-bottom: .2rem;
}

/* ----------------------------------------------------------- the menu --- */

.menunav {
	position: sticky;
	top: calc(var(--masthead-h) + env(safe-area-inset-top, 0px));
	z-index: 40;
	background: var(--teal-ink);
	border-block: 3px solid var(--cocoa);
}
.menunav__scroll {
	display: flex;
	gap: .4rem;
	overflow-x: auto;
	padding-block: .6rem;
	scrollbar-width: thin;
}
.menunav a {
	flex: none;
	font-family: var(--label);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255,250,240,.82);
	padding: .35rem .8rem;
	border: 2px solid transparent;
	border-radius: 999px;
	white-space: nowrap;
}
.menunav a:hover { color: #fff; border-color: rgba(255,250,240,.4); }
.menunav a[aria-current="true"] { background: var(--pink); color: #fff; border-color: var(--cream); }

/* Clear both sticky bars, plus a little breathing room, when a jump link lands. */
.menusection,
.section[id] {
	scroll-margin-top: calc(var(--masthead-h) + var(--menunav-h) + 1.25rem);
}
.menusection { margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }

.menusection__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
}
.menusection__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
}
.menusection__flat {
	font-family: var(--display);
	font-size: clamp(1.2rem, 2.6vw, 1.7rem);
	color: var(--orange);
	-webkit-text-stroke: .05em var(--cocoa);
	paint-order: stroke fill;
}
.menusection__note { color: var(--cocoa-soft); font-size: .97rem; font-style: italic; margin: .35rem 0 0; }
.menusection__flag {
	display: inline-block;
	margin-top: .85rem;
	background: var(--pink);
	color: #fff;
	border: 3px solid var(--teal-lit);
	border-radius: var(--rad);
	padding: .35rem .8rem;
	font-family: var(--label);
	font-weight: 600;
	letter-spacing: .05em;
	transform: rotate(-1.2deg);
}

.menusection--orange {
	background: var(--orange);
	color: #fff;
	border: 4px solid var(--yellow);
	border-radius: var(--rad);
	padding: clamp(1.3rem, 3vw, 2.2rem);
}
.menusection--orange .menusection__title { color: #fff; -webkit-text-stroke: .04em rgba(0,0,0,.4); paint-order: stroke fill; }
.menusection--orange .menusection__note,
.menusection--orange .menuitem__desc { color: rgba(255,255,255,.9); }
.menusection--orange .menuitem { border-bottom-color: rgba(255,255,255,.35); }
.menusection--orange .menuitem__name { color: #fff; }
.menusection--orange .menusection__flat { color: var(--yellow); -webkit-text-stroke: .05em #7d2608; }

.menubody {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.2rem);
	margin-top: 1.1rem;
}
.menubody--withfig { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) {
	.menubody--withfig { grid-template-columns: minmax(0, 1fr); }
}

.menulist { list-style: none; margin: 0; padding: 0; }

.menuitem {
	padding-block: .7rem;
	border-bottom: 2px dotted var(--parch-edge);
	min-width: 0;
}
.menuitem:last-child { border-bottom: 0; }
.menuitem__row {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	min-width: 0;
}
.menuitem__name {
	font-family: var(--body);
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: .005em;
	color: var(--cocoa);
	text-transform: uppercase;
	flex: 0 1 auto;
	min-width: 0;
}
.menuitem__leader {
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	border-bottom: 2px dotted var(--parch-edge);
	transform: translateY(-.25em);
}
.menuitem__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex: none;
	color: var(--cocoa);
}
.menuitem__desc { margin: .25rem 0 0; color: var(--cocoa-soft); font-size: .96rem; line-height: 1.5; }
.menuitem__add {
	display: inline-block;
	margin-top: .3rem;
	font-family: var(--label);
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--orange);
}
.menuitem__mark { color: var(--pink); font-weight: 700; }

/* Multi-column price table (For 1 / For 2 / Family) */
.pricegrid { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.pricegrid caption { text-align: left; }
.pricegrid th, .pricegrid td { padding: .55rem .4rem; border-bottom: 2px dotted var(--parch-edge); }
.pricegrid thead th {
	font-family: var(--label);
	font-size: .88rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--pink);
	text-align: right;
	border-bottom-width: 3px;
}
.pricegrid thead th:first-child { text-align: left; }
.pricegrid tbody th {
	text-align: left;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.02rem;
	min-width: 0;
}
.pricegrid tbody th span { display: block; font-family: var(--body); font-weight: 500; font-size: .9rem; text-transform: none; color: var(--cocoa-soft); }
.pricegrid td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricegrid tr:last-child th, .pricegrid tr:last-child td { border-bottom: 0; }

.menufig { margin: 0; }
.menufig img {
	width: 100%;
	border: 5px solid var(--cream);
	border-radius: var(--rad);
	box-shadow: 0 18px 40px -24px rgba(6,49,46,1);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.menufig figcaption {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: 1rem;
	color: var(--pink);
	-webkit-text-stroke: .06em var(--cream);
	paint-order: stroke fill;
	transform: rotate(-2deg);
	margin-top: .6rem;
	text-align: center;
}

.menunotes {
	margin-top: 1.5rem;
	font-size: .9rem;
	color: var(--cocoa-soft);
	line-height: 1.55;
}
.menunotes ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.menunotes li { margin-bottom: .3rem; }

/* ------------------------------------------------------------ catering --- */

.catering__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: center;
}
@media (max-width: 860px) { .catering__grid { grid-template-columns: 1fr; } }

.ticklist { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ticklist li { display: flex; gap: .65rem; align-items: flex-start; }
.ticklist .icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--yellow); margin-top: .18rem; }

/* ---------------------------------------------------------------- faq --- */

.faq { display: grid; gap: .7rem; }
.faq details {
	background: var(--parch);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: 0 clamp(.9rem, 2.2vw, 1.4rem);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--pink); transition: transform .2s ease; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 2px dotted var(--parch-edge); }
.faq__answer { padding-block: .9rem 1.1rem; color: var(--cocoa-soft); }

/* ------------------------------------------------------------- visit --- */

.visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.4rem, 3vw, 2.4rem);
	align-items: start;
}
@media (max-width: 860px) { .visit__grid { grid-template-columns: 1fr; } }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .62rem;
	border-bottom: 2px dotted var(--parch-edge);
	font-variant-numeric: tabular-nums;
}
.hours li:last-child { border-bottom: 0; }
.hours__day { font-family: var(--label); font-size: 1.1rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.hours li[data-today="true"] { color: var(--pink); font-weight: 700; }
.hours li[data-today="true"] .hours__day::after {
	content: "Today";
	margin-left: .6rem;
	background: var(--pink);
	color: #fff;
	font-size: .68rem;
	letter-spacing: .12em;
	padding: .1rem .45rem;
	border-radius: 999px;
	vertical-align: middle;
}

.addressblock { font-style: normal; font-size: 1.1rem; line-height: 1.55; }
.addressblock a { text-decoration: none; border-bottom: 2px solid var(--pink); }

/* --------------------------------------------------------------- form --- */

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

.field { display: grid; gap: .35rem; min-width: 0; }
.field > label {
	font-family: var(--label);
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cocoa-soft);
}
.field input, .field textarea, .field select {
	font: inherit;
	font-size: 1rem;
	color: var(--cocoa);
	background: var(--cream);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: .68rem .8rem;
	width: 100%;
	min-width: 0;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--pink); outline-offset: 2px; }

.form__note { font-size: .9rem; color: var(--cocoa-soft); }

.notice {
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: .9rem 1.1rem;
	font-weight: 600;
}
.notice--ok  { background: #d8f3e2; border-color: #1b7a47; color: #12522f; }
.notice--bad { background: #ffe1e8; border-color: #9c1136; color: #7d0e2c; }

.hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------------- vip --- */

.vip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	background: var(--pink);
	color: #fff;
	border: 5px solid var(--yellow);
	border-radius: var(--rad);
	padding: clamp(1.3rem, 3.2vw, 2.4rem);
	box-shadow: 0 20px 50px -26px rgba(0,0,0,.9);
}
.vip__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.6vw, 2.4rem);
	color: var(--yellow);
	-webkit-text-stroke: .05em #7a0d41;
	paint-order: stroke fill;
}
.vip p { margin-top: .5rem; max-width: 46ch; color: rgba(255,255,255,.92); }
@media (max-width: 720px) { .vip { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- footer --- */

.footer { background: var(--teal-ink); color: var(--cream); border-top: 5px solid var(--cocoa); }
.footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3rem);
	padding-block: clamp(2.2rem, 5vw, 3.5rem);
}
.footer__logo { width: clamp(150px, 20vw, 220px); margin-bottom: 1rem; }
.footer h3 {
	font-family: var(--label);
	font-size: 1.02rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--yellow);
	margin-bottom: .85rem;
	font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: rgba(255,250,240,.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__loc { font-style: normal; line-height: 1.55; color: rgba(255,250,240,.84); }
.footer__loc strong { display: block; color: var(--cream); font-family: var(--label); letter-spacing: .1em; text-transform: uppercase; font-size: 1.05rem; }

.footer .social { display: flex; gap: .7rem; margin-top: 1rem; }
.footer .social a {
	width: 2.5rem; height: 2.5rem;
	display: grid; place-items: center;
	border: 2px solid rgba(255,250,240,.5);
	border-radius: 50%;
}
.footer .social a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.footer .social .icon { width: 1.25rem; height: 1.25rem; }

.colophon {
	border-top: 2px dotted rgba(255,250,240,.3);
	padding-block: 1.1rem;
	font-size: .9rem;
	color: rgba(255,250,240,.7);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	justify-content: space-between;
}

/* ------------------------------------------------- mobile action rail --- */

.actionbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 55;
	display: none;
	background: var(--cream);
	border-top: 4px solid var(--cocoa);
	padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom, 0px));
	gap: .5rem;
	box-shadow: 0 -10px 30px -18px rgba(6,49,46,.9);
}
.actionbar .btn { flex: 1 1 0; justify-content: center; padding-inline: .5rem; }
@media (max-width: 760px) {
	.actionbar { display: flex; }
	body { padding-bottom: 4.6rem; }
	/* offset is measured, not guessed — see :root */
}

/* -------------------------------------------------------- page basics --- */

.entry { padding-block: clamp(2rem, 5vw, 3.5rem); }
.entry__body { max-width: var(--narrow); }
.entry__body h2 { font-family: var(--display); text-transform: uppercase; font-size: 1.8rem; margin-block: 1.6rem .6rem; }
.entry__body h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; margin-block: 1.3rem .5rem; }
.entry__body ul, .entry__body ol { padding-left: 1.3rem; }
.entry__body a { color: var(--pink); }
.entry__body img { border: 4px solid var(--cream); border-radius: var(--rad); }

.pagehead { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); color: var(--cream); }
.pagehead__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 4rem); }

/* ---------------------------------------------- employment application --- */

.rolegrid { display: flex; flex-wrap: wrap; gap: .6rem; }
.rolechip {
	display: inline-block;
	background: var(--parch);
	color: var(--cocoa);
	border: 3px solid var(--cocoa);
	border-radius: 999px;
	padding: .4rem 1rem;
	font-family: var(--label);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	box-shadow: 0 3px 0 rgba(6,49,46,.45);
}

.fieldset {
	border: 0;
	border-top: 3px dotted var(--parch-edge);
	margin: 0;
	padding: 1.6rem 0 0;
	min-width: 0;
}
.form--application .fieldset:first-of-type { border-top: 0; padding-top: 0; }

.fieldset__legend {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	color: var(--pink);
	padding: 0;
	margin-bottom: 1rem;
}

.field__label-standalone {
	font-family: var(--label);
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cocoa-soft);
	margin: 0 0 .6rem;
}

.req { color: var(--pink); font-weight: 700; }

/* Checkbox and radio groups */
.choicegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .5rem;
}
.choicegrid--inline { grid-template-columns: repeat(auto-fit, minmax(9rem, max-content)); }
.choicegrid--locations { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.choice {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	background: var(--cream);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: .62rem .8rem;
	cursor: pointer;
	font-size: .99rem;
	line-height: 1.4;
	min-width: 0;
	transition: background-color .12s ease, box-shadow .12s ease;
}
.choice:hover { background: #fff; }
.choice input { flex: none; width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; accent-color: var(--pink); }
.choice span { min-width: 0; }
.choice:has(input:checked) {
	background: var(--pink);
	color: #fff;
	border-color: #6d0033;
	box-shadow: 0 3px 0 #6d0033;
}
.choice:has(input:checked) small { color: rgba(255,255,255,.85); }
.choice:has(input:focus-visible) { outline: 3px solid var(--pink); outline-offset: 3px; }

.choice--block { align-items: flex-start; }
.choice--card span { display: grid; gap: .15rem; }
.choice--card strong {
	font-family: var(--label);
	font-size: 1.15rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.choice--card small { font-size: .88rem; color: var(--cocoa-soft); }

.yesno { margin-bottom: 1.2rem; }
.yesno:last-of-type { margin-bottom: 0; }
.yesno__q { font-weight: 600; margin: 0 0 .5rem; }

.availability { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.availability__day label {
	font-family: var(--label);
	font-size: 1.02rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cocoa);
}

.jobblock {
	border-left: 4px solid var(--parch-edge);
	padding-left: 1rem;
	margin-bottom: 1.4rem;
}
.jobblock__title {
	font-family: var(--label);
	font-size: .92rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pink);
	margin: 0 0 .6rem;
}

.field input[type="file"] {
	background: var(--parch-2);
	padding: .55rem;
	font-size: .95rem;
	cursor: pointer;
}
.field input[type="file"]::file-selector-button {
	font: inherit;
	font-family: var(--label);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--yellow);
	color: var(--cocoa);
	border: 2px solid var(--cocoa);
	border-radius: var(--rad);
	padding: .4rem .8rem;
	margin-right: .8rem;
	cursor: pointer;
}

@media (max-width: 600px) {
	.choicegrid, .choicegrid--inline, .choicegrid--locations { grid-template-columns: 1fr; }
	.availability { grid-template-columns: 1fr; }
}

/* The catering card keeps the menu's orange panel rather than the cream surface. */
.card--hot {
	background: var(--orange);
	color: #fff;
	border-color: var(--yellow);
}
.card--hot .card__copy,
.card--hot p { color: rgba(255,255,255,.93); }
.card--hot .card__kicker { color: var(--yellow); }

/* -------------------------------------------------------- social wall --- */

.socialwall__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

/* The source photographs are 9:16 story graphics with headline text across the
   top, so the tiles keep that ratio — a square crop would cut the words off.
   Six cells in total (the clip plus five photos) because 6 divides evenly by
   6, 3 and 2 — the three column counts below — so no row is ever left ragged. */
.socialwall__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(.5rem, 1.4vw, .9rem);
}

.socialwall__reel {
	position: relative;
	margin: 0;
	border: 4px solid var(--cream);
	border-radius: var(--rad);
	overflow: hidden;
	background:
		linear-gradient(160deg, var(--teal-deep), var(--teal-ink));
	box-shadow: 0 20px 44px -26px rgba(6,49,46,1);
	min-height: 0;
}
.socialwall__reel video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 9 / 16;
}
.socialwall__reel figcaption {
	position: absolute;
	left: .5rem;
	bottom: .5rem;
	background: var(--pink);
	color: #fff;
	font-family: var(--label);
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	border-radius: 999px;
}

.socialwall__tile {
	position: relative;
	display: block;
	border: 4px solid var(--cream);
	border-radius: var(--rad);
	overflow: hidden;
	background: var(--teal-deep);
	box-shadow: 0 16px 36px -24px rgba(6,49,46,1);
	transition: transform .18s ease, box-shadow .18s ease;
}
.socialwall__tile img {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.socialwall__tile:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(6,49,46,1); }
.socialwall__tile:hover img { transform: scale(1.06); }

.socialwall__badge {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(6,49,46,.6);
	color: #fff;
	opacity: 0;
	transition: opacity .18s ease;
}
.socialwall__tile:hover .socialwall__badge,
.socialwall__tile:focus-visible .socialwall__badge { opacity: 1; }
.socialwall__badge .icon { width: 1.05rem; height: 1.05rem; }

.socialwall__foot {
	margin-top: 1.2rem;
	color: rgba(255,250,240,.96);
	font-size: .99rem;
}
.socialwall__foot a { color: var(--yellow); font-weight: 700; }

@media (max-width: 900px) {
	.socialwall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.socialwall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.socialwall__reel figcaption { font-size: .78rem; }
}

/* ------------------------------------------------------ contact page --- */

.routecard {
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.routecard:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -22px rgba(6,49,46,1);
}
.routecard__icon {
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	margin-bottom: .2rem;
}
.routecard__icon .icon { width: 1.3rem; height: 1.3rem; }
.routecard__cta {
	margin-top: auto;
	font-family: var(--label);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pink);
	border-bottom: 2px solid var(--pink);
	align-self: flex-start;
	padding-top: .4rem;
}

.locationcard__map {
	margin-top: 1.1rem;
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	overflow: hidden;
	background: var(--parch-2);
	line-height: 0;
}
.locationcard__map iframe {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	display: block;
}

.locationcard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.1rem;
}

/* ---------------------------------------------------- coming soon --- */

.comingsoon { text-align: center; }

.comingsoon__flag {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	border: 3px solid var(--yellow);
	border-radius: 999px;
	padding: .3rem 1.1rem;
	font-family: var(--label);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	transform: rotate(-1.5deg);
	margin: 0 0 1rem;
}

.comingsoon__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.8rem, 5vw, 3rem);
	line-height: 1;
}

.comingsoon .lede { margin-inline: auto; }

.comingsoon__calls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: .9rem;
	margin: 1.8rem 0 1.4rem;
}

.comingsoon__call {
	display: grid;
	gap: .25rem;
	padding: 1rem;
	background: var(--cream);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	text-decoration: none;
	color: var(--cocoa);
	box-shadow: 0 4px 0 var(--cocoa);
	transition: transform .12s ease, box-shadow .12s ease;
}
.comingsoon__call:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--cocoa); }

.comingsoon__where {
	font-family: var(--label);
	font-size: .92rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pink);
}
.comingsoon__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	font-weight: 700;
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
}
.comingsoon__number .icon { width: 1.1rem; height: 1.1rem; color: var(--pink); }

.comingsoon__status { font-size: .88rem; color: var(--cocoa-soft); }
.comingsoon__status[data-open="true"] { color: #1b7a47; font-weight: 600; }

.comingsoon__meanwhile {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin: 0;
}

/* ------------------------------------------------------- about page --- */

.story {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	gap: clamp(1.3rem, 3vw, 2.6rem);
	align-items: start;
}
@media (max-width: 820px) {
	.story { grid-template-columns: minmax(0, 1fr); }
}

.story__figure { margin: 0; position: relative; }
.story__figure img {
	width: 100%;
	border: 5px solid var(--cream);
	border-radius: var(--rad);
	box-shadow: 0 24px 54px -28px rgba(6,49,46,1);
}
.story__figure figcaption {
	position: absolute;
	left: 50%;
	bottom: -.9rem;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--pink);
	color: #fff;
	border: 3px solid var(--cream);
	border-radius: var(--rad);
	padding: .3rem .9rem;
	font-family: var(--label);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.story__copy p { font-size: 1.04rem; line-height: 1.68; color: var(--cocoa-soft); }
.story__copy p:first-of-type { color: var(--cocoa); font-size: 1.1rem; }

/* -------------------------------------------------- legal documents --- */

.legal { max-width: 70ch; margin-inline: auto; }
.legal h2 {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	color: var(--pink);
	margin: 2.2rem 0 .5rem;
	scroll-margin-top: calc(var(--masthead-h) + 1.5rem);
}
.legal h2:first-of-type { margin-top: 1rem; }
.legal h3 {
	font-family: var(--body);
	font-weight: 800;
	font-size: 1.04rem;
	margin: 1.4rem 0 .35rem;
	color: var(--cocoa);
}
.legal p, .legal li { color: var(--cocoa-soft); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; margin: .6rem 0 0; }
.legal li { margin-bottom: .45rem; }
.legal a { color: var(--pink); }
.legal strong { color: var(--cocoa); }
.legal address { margin-top: .8rem; font-size: 1rem; }

.legal__toc {
	background: var(--parch-2);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: 1.1rem 1.3rem;
}
.legal__toctitle {
	font-family: var(--label);
	font-size: .92rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pink);
	margin: 0 0 .5rem;
}
.legal__toc ol {
	columns: 2;
	column-gap: 1.6rem;
	margin: 0;
	padding-left: 1.1rem;
	font-size: .97rem;
}
.legal__toc li { margin-bottom: .3rem; break-inside: avoid; }
.legal__toc a { color: var(--cocoa); text-decoration: none; border-bottom: 1px solid var(--parch-edge); }
.legal__toc a:hover { color: var(--pink); border-bottom-color: var(--pink); }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }

/* -------------------------------------------------- menu search bar --- */

.menunav__bar {
	display: flex;
	align-items: center;
	gap: .9rem;
	min-width: 0;
}

.menunav__search {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	display: flex;
	align-items: center;
}
.menunav__search input {
	font: inherit;
	font-family: var(--body);
	font-size: .97rem;
	width: clamp(9rem, 17vw, 14rem);
	padding: .42rem 2rem .42rem .8rem;
	border: 2px solid rgba(255,250,240,.45);
	border-radius: 999px;
	background: rgba(6,49,46,.5);
	color: var(--cream);
}
.menunav__search input::placeholder { color: rgba(255,250,240,.6); }
.menunav__search input:focus {
	outline: 2px solid var(--pink);
	outline-offset: 1px;
	background: rgba(6,49,46,.8);
}
.menunav__search input::-webkit-search-cancel-button { display: none; }

.menunav__clear {
	position: absolute;
	right: .3rem;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	cursor: pointer;
	padding: 0;
}
.menunav__clear .icon { width: .85rem; height: .85rem; }

.menucount {
	background: var(--yellow);
	color: var(--cocoa);
	border-bottom: 3px solid var(--cocoa);
	margin: 0;
	padding: .55rem var(--gutter);
	font-family: var(--label);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: center;
	position: sticky;
	top: calc(var(--masthead-h) + var(--menunav-h));
	z-index: 39;
}

/* While filtering, section furniture that no longer describes what is shown
   would mislead, so it steps back. */
body[data-filtering] .menusection__note,
body[data-filtering] .menusection__flag,
body[data-filtering] .menufig { display: none; }

@media (max-width: 760px) {
	.menunav__bar { flex-direction: column; align-items: stretch; gap: .5rem; }
	.menunav__search input { width: 100%; }
	.menunav__bar { padding-block: .4rem; }
}

/* ------------------------------------------------------------ print --- */

@media print {
	.topbar, .masthead, .menunav, .menucount, .actionbar,
	.footer, .socialwall, .serape, .hero__actions, .skip-link { display: none !important; }

	body {
		background: #fff !important;
		color: #000;
		font-size: 10.5pt;
	}
	.panel, .band, .band--parch, .section {
		background: #fff !important;
		box-shadow: none !important;
		padding-block: 0;
	}
	.panel::before, .panel::after { display: none; }

	.menusection { break-inside: avoid; page-break-inside: avoid; margin-bottom: 1.2rem; }
	.menusection__title, .pagehead__title, .section__title {
		color: #000 !important;
		-webkit-text-stroke: 0 !important;
		filter: none !important;
	}
	.menuitem__name, .menuitem__price, .pricegrid th, .pricegrid td { color: #000; }
	.menuitem__desc { color: #333; }
	.menuitem { break-inside: avoid; }
	a[href^="http"]::after { content: ""; }
}

/* ------------------------------------------------- numbered process --- */

/* Numbered markers earn their place here: applying really is a sequence, and
   the order is what the applicant needs to know. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }

.steps__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	background: var(--cream);
	border: 3px solid var(--cocoa);
	border-radius: var(--rad);
	padding: 1.1rem 1.3rem;
	box-shadow: 0 14px 32px -22px rgba(6,49,46,1);
}
.steps__n {
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-family: var(--display);
	font-size: 1.15rem;
	flex: none;
}
.steps__item p { margin: .3rem 0 0; color: var(--cocoa-soft); }
@media (max-width: 520px) {
	.steps__item { grid-template-columns: minmax(0, 1fr); }
}

/* The "open daily" line under the hero copy. */
.hero__open {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 1rem 0 0;
	font-family: var(--label);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--yellow);
}
.hero__open .icon { width: 1.15rem; height: 1.15rem; }