/* ==== inlined webfonts (see assets/css/fonts.css / scripts/selfhost_fonts.py).
   Inlined here so the page has exactly ONE render-blocking stylesheet. ==== */

@font-face {
	font-family: 'DM Serif Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-italic-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'DM Serif Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-normal-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-normal-400-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Julia's Mexican Restaurant
   Hand-written stylesheet. No framework, no reset library.
   Order: tokens, base, utilities, header, sections, footer, responsive.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
	--cream:        #F7F1E8;
	--ivory:        #FFFDF8;
	--charcoal:     #25211E;
	--charcoal-900: #1A1715;
	--chile:        #A9362B;
	--chile-deep:   #8F1F18;
	--terracotta:   #C9623B;
	--avocado:      #596B45;
	--gold:         #C99A4B;

	--ink:          var(--charcoal);
	--ink-soft:     #5C544D;
	--ink-faint:    rgba(37, 33, 30, .12);

	--serif: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--maxw: 1280px;
	--pad: 40px;
	--section: 120px;

	--r-btn: 4px;
	--r-img: 6px;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--t: 240ms var(--ease);

	--header-h: 84px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -.005em;
}

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

a { color: inherit; text-decoration: none; }

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

ul { margin: 0; padding: 0; list-style: none; }

address { font-style: normal; }

button { font: inherit; color: inherit; }

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

::selection { background: var(--gold); color: var(--charcoal); }

/* ------------------------------------------------------------ utilities */
.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

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

.skip-link {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 200;
	background: var(--chile);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--r-btn);
	font-size: 14px;
	font-weight: 600;
	transition: top 180ms var(--ease);
}
.skip-link:focus { top: 14px; }

/* Inline flow, not flex: the phrase must wrap as one unit on narrow screens. */
.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .26em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 20px;
}
.eyebrow::after {
	content: "";
	display: inline-block;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: .6;
	vertical-align: middle;
	margin-left: 14px;
}
.eyebrow .dot { opacity: .7; margin-inline: 2px; }
.eyebrow-light { color: var(--gold); }
.eyebrow-gold  { color: var(--gold); }

.section-title {
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.08;
	margin: 0 0 22px;
	color: var(--charcoal);
}
.section-title em {
	font-style: italic;
	color: var(--chile);
}
.section-title-light { color: var(--ivory); }
.section-title-light em { color: var(--gold); }

.lede {
	font-size: 18px;
	line-height: 1.62;
	color: var(--ink-soft);
	max-width: 46ch;
	margin: 0 0 20px;
}
.lede-light { color: rgba(247, 241, 232, .78); }

/* ---------------------------------------------------------------- shots */
.shot {
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--cream);
}
.shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--ease);
}
figure { margin: 0; }
figure:hover .shot img,
figure:focus-within .shot img { transform: scale(1.02); }

figcaption {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* -------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t),
	            color var(--t), transform var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--chile); color: #fff; }
.btn-primary:hover { background: var(--chile-deep); }

.btn-ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(247, 241, 232, .55);
}
.btn-ghost:hover {
	background: rgba(247, 241, 232, .12);
	border-color: var(--gold);
}

.btn-ghost-dark {
	background: transparent;
	color: var(--charcoal);
	border-color: var(--ink-faint);
}
.btn-ghost-dark:hover { background: var(--cream); border-color: var(--gold); }

.btn-cream { background: var(--cream); color: var(--charcoal); }
.btn-cream:hover { background: #fff; }

.btn-sm { min-height: 44px; padding: 0 20px; font-size: 12px; }
.btn-block { width: 100%; }

.link-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--chile);
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	transition: color var(--t), gap var(--t);
}
.link-cta:hover { color: var(--chile-deep); gap: 16px; }
.link-cta-light { color: var(--gold); }
.link-cta-light:hover { color: var(--ivory); }

/* --------------------------------------------------------------- header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ivory);
	border-bottom: 1px solid var(--ink-faint);
}

.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
	min-height: var(--header-h);
}

/* Logo lockup: chile monogram + wordmark. The monogram doubles as the
   favicon and social avatar, and stands alone when space runs out. */
.brand { display: inline-flex; align-items: center; gap: 13px; }

.brand-mark {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 5px;
	background: var(--chile);
	color: var(--cream);
	font-family: var(--serif);
	font-size: 25px;
	line-height: 42px;
	text-align: center;
	transition: background-color var(--t);
}
.brand:hover .brand-mark { background: var(--chile-deep); }

.brand-words { display: inline-flex; flex-direction: column; gap: 4px; }
.brand-name {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1;
	letter-spacing: -.012em;
	color: var(--charcoal);
}
.brand-sub {
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .30em;
	text-transform: uppercase;
	color: var(--gold);
}

.primary-nav { justify-self: center; }
.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-item a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--charcoal);
	transition: color var(--t);
}
.nav-item a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1.5px;
	background: var(--chile);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t);
}
.nav-item a:hover { color: var(--chile); }
.nav-item a:hover::after,
.nav-item.is-current a::after { transform: scaleX(1); }
.nav-item.is-current a { color: var(--chile); }

.header-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 18px;
}
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--charcoal);
	transition: color var(--t);
}
.header-phone:hover { color: var(--chile); }
.header-phone .ico { width: 16px; height: 16px; fill: var(--gold); flex: none; }

.header-cta-mobile { display: none; }

.nav-toggle {
	display: none;
	width: 48px; height: 48px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--ink-faint);
	border-radius: var(--r-btn);
	cursor: pointer;
}
.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--charcoal);
	transition: transform 220ms var(--ease), opacity 160ms linear;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Overlays the page rather than pushing it, so opening causes no shift. */
.mobile-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-top: 1px solid var(--ink-faint);
	background: var(--ivory);
	box-shadow: 0 18px 34px rgba(37, 33, 30, .10);
	padding: 8px var(--pad) 24px;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.nav-list-mobile { display: block; }
.nav-list-mobile .nav-item a {
	padding: 15px 0;
	font-size: 17px;
	border-bottom: 1px solid var(--ink-faint);
	min-height: 48px;
}
.nav-list-mobile .nav-item a::after { display: none; }
.mobile-nav-actions {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}

/* ----------------------------------------------------------------- hero */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 620px;
	height: 78vh;
	max-height: 900px;
	background: var(--charcoal-900);
	overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 50%;
}
/* Two axes: the horizontal ramp carries the type, the vertical one settles
   the busy top of the frame and fades the base into the trust strip. */
.hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(10, 8, 6, .58) 0%,
			rgba(10, 8, 6, .03) 36%,
			rgba(10, 8, 6, .02) 80%,
			rgba(10, 8, 6, .30) 100%
		),
		linear-gradient(
			90deg,
			rgba(10, 8, 6, .90) 0%,
			rgba(10, 8, 6, .76) 48%,
			rgba(10, 8, 6, .30) 78%,
			rgba(10, 8, 6, .08) 100%
		);
}
.hero-inner { position: relative; z-index: 2; }

.hero-title {
	font-size: clamp(42px, 5.6vw, 72px);
	line-height: 1.03;
	color: #fff;
	margin: 0 0 24px;
	max-width: 21ch;
}
.hero-title em { font-style: italic; color: var(--gold); }

.hero-copy {
	font-size: 18px;
	line-height: 1.62;
	color: rgba(255, 255, 255, .84);
	max-width: 44ch;
	margin: 0 0 34px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	font-size: 15px;
	color: rgba(255, 255, 255, .82);
}
.hero-facts li { display: flex; align-items: center; gap: 10px; }
.hero-facts svg { width: 17px; height: 17px; fill: var(--gold); flex: none; }
.hero-facts a { border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t); }
.hero-facts a:hover { color: #fff; border-bottom-color: var(--gold); }

/* ---------------------------------------------------------- trust strip */
.trust { background: var(--cream); }
.trust-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: 62px;
}
.trust-item { padding-inline: 34px; }
.trust-item + .trust-item { border-left: 1px solid rgba(37, 33, 30, .13); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { padding-right: 0; }
.trust-ico {
	width: 38px; height: 38px;
	color: var(--gold);
	margin-bottom: 20px;
}
.trust-title {
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--charcoal);
	margin: 0 0 8px;
}
.trust-item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-soft);
}

/* Reserve two lines on desktop so the four columns share a baseline even
   though the copy lengths differ. */
@media (min-width: 1024px) {
	.trust-item p { min-height: calc(15px * 1.55 * 2); }
}

/* --------------------------------------------------------- decor motifs */
.motif {
	position: absolute;
	color: var(--terracotta);
	opacity: .06;
	pointer-events: none;
	z-index: 0;
}
.motif svg { width: 100%; height: 100%; display: block; }
.motif-sun {
	width: 340px; height: 340px;
	top: -90px; right: -80px;
}

/* -------------------------------------------------------------- kitchen */
.kitchen {
	position: relative;
	padding-block: var(--section);
	background: var(--ivory);
	overflow: hidden;
}
.kitchen-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(260px, .84fr) 1fr 1fr;
	grid-template-areas:
		"text big big"
		"text a   b";
	gap: 24px 52px;
}
.kitchen-text { grid-area: text; align-self: center; padding-right: 8px; }
.kitchen-note {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-bottom: 28px;
}
.kitchen-hero-shot { grid-area: big; }
.kitchen-hero-shot .shot { aspect-ratio: 3 / 2; }
.kitchen-shot-a { grid-area: a; }
.kitchen-shot-b { grid-area: b; }
.kitchen-shot-a .shot,
.kitchen-shot-b .shot { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------- story */
.story {
	position: relative;
	padding-block: var(--section);
	background: var(--cream);
	overflow: hidden;
}
.story-grid {
	display: grid;
	grid-template-columns: .9fr 1fr;
	gap: 76px;
	align-items: center;
}
.story-media .shot { aspect-ratio: 4 / 5; }
.story-text p { color: var(--ink-soft); font-size: 17px; }
.story-text .signature {
	font-family: var(--serif);
	font-style: italic;
	font-size: 27px;
	line-height: 1.2;
	color: var(--terracotta);
	margin: 26px 0 28px;
}

/* --------------------------------------------------------------- drinks */
.drinks {
	position: relative;
	background: var(--charcoal-900);
	color: var(--cream);
	padding-block: var(--section);
	overflow: hidden;
}
.drinks::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 78% 50%, rgba(201, 154, 75, .10), transparent 70%);
	pointer-events: none;
}
.drinks-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr .74fr;
	gap: 70px;
	align-items: center;
}
.drinks-note {
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(247, 241, 232, .62);
	max-width: 44ch;
	margin-bottom: 30px;
}
.drinks-media {
	position: relative;
	/* The glass breaks out of its column for an editorial overhang. */
	margin-block: calc(var(--section) / -2.4);
}
.drinks-media img {
	width: 100%;
	border-radius: var(--r-img);
}

/* --------------------------------------------------------------- gather */
.gather {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--chile);
}
.gather-panel {
	background: var(--chile);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 96px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
	padding-right: 56px;
}
.gather-panel-inner { max-width: 480px; }
.gather-panel .eyebrow { color: rgba(255, 255, 255, .78); }
.gather-panel .section-title em { color: #F6D9A0; }
.gather-panel .lede-light { color: rgba(255, 255, 255, .84); }
.gather-note {
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 30px;
}
.gather-media { position: relative; min-height: 480px; }
.gather-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- visit */
.visit {
	padding-block: var(--section);
	background: var(--ivory);
}
.visit-grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: 68px;
	align-items: center;
}
.visit-map {
	border-radius: var(--r-img);
	overflow: hidden;
	border: 1px solid var(--ink-faint);
	background: var(--cream);
}

/* Placeholder the guest taps to pull in the Google embed. */
.map-load {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 24px;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--t);
}
.map-load:hover { background: rgba(201, 154, 75, .09); }
.map-load svg { width: 42px; height: 42px; color: var(--gold); margin-bottom: 6px; }
.map-load-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--chile);
}
.map-load-note { font-size: 15px; color: var(--ink-soft); }
.visit-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	filter: grayscale(.15) contrast(1.02);
}
.visit-address {
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-soft);
	display: grid;
	gap: 2px;
	margin-bottom: 30px;
}
.visit-street { color: var(--charcoal); font-weight: 500; }
.visit-phone {
	margin-top: 12px;
	font-size: 22px;
	font-family: var(--serif);
	color: var(--chile);
	transition: color var(--t);
	justify-self: start;
}
.visit-phone:hover { color: var(--chile-deep); }

.visit-hours { margin-top: 44px; }
.hours-head {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 16px;
}
.visit-hours ul { display: grid; gap: 12px; max-width: 440px; }
.visit-hours li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 16px;
	color: var(--ink-soft);
}
.hours-days { color: var(--charcoal); flex: none; }
.hours-dash {
	flex: 1 1 auto;
	border-bottom: 1px dotted rgba(37, 33, 30, .28);
	transform: translateY(-4px);
}
.hours-time { flex: none; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- final closer */
.closer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	padding-block: 110px;
	background: var(--charcoal-900);
	overflow: hidden;
	text-align: center;
}
.closer-media { position: absolute; inset: 0; }
.closer-media img { width: 100%; height: 100%; object-fit: cover; }
.closer-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 8, 6, .74), rgba(10, 8, 6, .84));
}
.closer-inner { position: relative; z-index: 2; }
.closer-title {
	font-size: clamp(38px, 5vw, 66px);
	color: #fff;
	margin: 0 0 14px;
}
.closer-copy {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	margin: 0 0 32px;
}
.closer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* --------------------------------------------------------------- footer */
.site-footer {
	position: relative;
	background: var(--charcoal);
	color: rgba(247, 241, 232, .66);
	font-size: 15.5px;
	overflow: hidden;
}
/* Hairline gold rule along the top edge, faded at both ends. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, rgba(201, 154, 75, .45) 20%,
		rgba(201, 154, 75, .45) 80%, transparent);
}
.motif-footer {
	width: 400px; height: 400px;
	top: -118px; right: -104px;
	color: var(--gold);
	opacity: .05;
}
.footer-inner { position: relative; z-index: 1; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.25fr .95fr .8fr;
	gap: 72px;
	padding-block: 88px 64px;
}

.brand-footer .brand-name { color: var(--ivory); }

.footer-blurb {
	margin: 22px 0 30px;
	max-width: 34ch;
	line-height: 1.62;
}

/* The number is the footer's one real action, so it is set as display type. */
.footer-phone {
	display: inline-block;
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1;
	color: var(--ivory);
	border-bottom: 1px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.footer-phone:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-phone-note {
	margin: 11px 0 26px;
	font-size: 14px;
	color: rgba(247, 241, 232, .5);
}

.footer-head {
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 22px;
}

.footer-hours { display: grid; gap: 13px; }
.footer-hours li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 15px;
}
.footer-hours .hours-days { flex: none; color: var(--ivory); font-size: 15px; }
.footer-hours .hours-dash {
	flex: 1 1 auto;
	border-bottom: 1px dotted rgba(247, 241, 232, .22);
	transform: translateY(-4px);
}
.footer-hours .hours-time {
	flex: none;
	font-size: 15px;
	color: rgba(247, 241, 232, .62);
	font-variant-numeric: tabular-nums;
}
.footer-extra {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(247, 241, 232, .12);
	font-size: 14px;
	line-height: 1.75;
	color: rgba(247, 241, 232, .55);
}

.footer-address {
	display: grid;
	gap: 2px;
	margin-bottom: 26px;
	line-height: 1.6;
}
.footer-street { color: var(--ivory); }

/* Icon plus label: a single bare icon read as a placeholder. */
.social-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.social-list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(247, 241, 232, .18);
	border-radius: var(--r-btn);
	font-size: 13.5px;
	color: rgba(247, 241, 232, .82);
	transition: background-color var(--t), border-color var(--t), color var(--t);
}
.social-list svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.social-list a:hover {
	background: var(--chile);
	border-color: var(--chile);
	color: #fff;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 36px;
	border-top: 1px solid rgba(247, 241, 232, .13);
	padding-block: 26px 32px;
	font-size: 14px;
}
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.footer-nav a {
	color: rgba(247, 241, 232, .72);
	border-bottom: 1px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.footer-nav a:hover { color: var(--ivory); border-bottom-color: var(--gold); }

.footer-legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	color: rgba(247, 241, 232, .5);
}
.footer-legal-row p { margin: 0; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { transition: color var(--t); }
.footer-legal a:hover { color: var(--ivory); }

/* --------------------------------------------- mobile sticky action bar */
.action-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	background: var(--ivory);
	border-top: 1px solid var(--ink-faint);
	box-shadow: 0 -6px 24px rgba(37, 33, 30, .08);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transition: transform 260ms var(--ease);
}
.action-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 58px;
	padding: 8px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--charcoal);
}
.action-bar a + a { border-left: 1px solid var(--ink-faint); }
.action-bar svg { width: 19px; height: 19px; fill: none; stroke: var(--chile); }
.action-bar a:first-child svg { fill: var(--chile); stroke: none; }
.action-bar.is-tucked { transform: translateY(110%); }

/* ------------------------------------------------------- interior pages */
.page-hero {
	background: var(--cream);
	padding-block: 80px 64px;
	border-bottom: 1px solid var(--ink-faint);
	text-align: center;
}
.page-hero .section-title { margin-bottom: 0; }
.page-hero .eyebrow::before {
	content: "";
	display: inline-block;
	width: 34px; height: 1px;
	background: currentColor;
	opacity: .6;
	vertical-align: middle;
	margin-right: 14px;
}

.page-body { padding-block: 76px var(--section); }
.page-body .entry {
	max-width: 74ch;
	margin-inline: auto;
}
.entry h2 {
	font-size: clamp(26px, 3vw, 34px);
	margin: 52px 0 8px;
	color: var(--charcoal);
}
.entry h2:first-child { margin-top: 0; }
.entry h3 {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	margin: 26px 0 4px;
	color: var(--charcoal);
}
.entry p { color: var(--ink-soft); }
.entry hr {
	border: 0;
	border-top: 1px solid var(--ink-faint);
	margin: 44px 0;
}
/* Some dishes carry six price variants; cap the column so the dish name
   keeps its own line instead of being squeezed to nothing. */
.entry .price {
	float: right;
	max-width: 56%;
	margin-left: 22px;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	text-align: right;
	color: var(--chile);
}
.entry ul { display: grid; gap: 10px; margin: 0 0 20px; }
.entry ul li { padding-left: 20px; position: relative; color: var(--ink-soft); }
.entry ul li::before {
	content: "";
	position: absolute;
	left: 2px; top: .68em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold);
}
.entry a:not(.btn) { color: var(--chile); border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------ animation */
.reveal {
	opacity: 0;
	transform: translateY(18px);
}
.reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

/* ===================================================== responsive rules */

@media (max-width: 1180px) {
	:root { --section: 100px; }
	.nav-list { gap: 22px; }
	.header-phone { display: none; }
	.story-grid { gap: 52px; }
	.drinks-grid { gap: 48px; }
	.visit-grid { gap: 48px; }
}

@media (max-width: 1023px) {
	:root { --pad: 32px; --section: 88px; }

	.primary-nav { display: none; }
	.header-inner { grid-template-columns: 1fr auto; }
	.header-cta { display: none; }
	.header-cta-mobile { display: inline-flex; }
	.nav-toggle { display: inline-flex; }
	.mobile-nav:not([hidden]) { display: block; }

	.hero { height: auto; min-height: 0; padding-block: 96px 84px; }
	.hero-scrim {
		background: linear-gradient(
			180deg,
			rgba(10, 8, 6, .62) 0%,
			rgba(10, 8, 6, .78) 55%,
			rgba(10, 8, 6, .9) 100%
		);
	}
	.hero-title { max-width: 20ch; }

	.trust-list { grid-template-columns: repeat(2, 1fr); gap: 36px 0; padding-block: 46px; }
	.trust-item { padding-inline: 28px; }
	.trust-item:nth-child(odd) { padding-left: 0; }
	.trust-item:nth-child(even) { padding-right: 0; }
	.trust-item:nth-child(3) { border-left: 0; }

	.kitchen-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"text text"
			"big  big"
			"a    b";
		gap: 22px 24px;
	}
	.kitchen-text { padding-right: 0; }
	.kitchen-text .lede { max-width: 54ch; }

	.story-grid { grid-template-columns: 1fr; gap: 44px; }
	.story-media .shot { aspect-ratio: 16 / 11; }

	.drinks-grid { grid-template-columns: 1fr; gap: 44px; }
	.drinks-media { margin-block: 0; max-width: 420px; }

	.gather { grid-template-columns: 1fr; }
	.gather-panel { padding: 72px var(--pad); }
	.gather-panel-inner { max-width: none; }
	.gather-media { min-height: 340px; }

	.visit-grid { grid-template-columns: 1fr; gap: 44px; }

	.footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 70px 48px; }
	.footer-brand-col { grid-column: 1 / -1; }
	.motif-footer { width: 300px; height: 300px; top: -88px; right: -80px; }
}

@media (max-width: 767px) {
	:root { --pad: 22px; --section: 68px; --header-h: 72px; }

	body { font-size: 16.5px; padding-bottom: 66px; }

	.brand { gap: 10px; }
	.brand-mark { width: 36px; height: 36px; font-size: 21px; line-height: 36px; }
	.brand-name { font-size: 22px; }
	.brand-sub { font-size: 7.5px; letter-spacing: .22em; }
	.header-actions { gap: 10px; }

	.hero { padding-block: 72px 68px; }
	.hero-title { font-size: clamp(38px, 11vw, 48px); max-width: 16ch; }
	.hero-copy { font-size: 16.5px; margin-bottom: 28px; }
	.hero-actions { gap: 10px; margin-bottom: 32px; }
	.hero-actions .btn { width: 100%; }
	.hero-facts { gap: 12px; font-size: 14.5px; }
	.hero-facts li { align-items: flex-start; }
	.hero-facts svg { margin-top: 3px; }

	.trust-list { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
	.trust-item {
		padding: 26px 0;
		border-left: 0 !important;
	}
	.trust-item + .trust-item { border-top: 1px solid rgba(37, 33, 30, .13); }
	.trust-ico { margin-bottom: 12px; }

	.motif-sun { width: 220px; height: 220px; top: -60px; right: -70px; }

	.kitchen-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "text" "big" "a" "b";
		gap: 20px;
	}
	.kitchen-hero-shot .shot { aspect-ratio: 4 / 3; }

	.section-title { font-size: clamp(29px, 8vw, 36px); }
	.lede { font-size: 17px; }

	.story-text .signature { font-size: 24px; }

	.drinks-media { max-width: 100%; }

	.gather-panel { padding: 56px var(--pad); }
	.gather-media { min-height: 260px; }
	.gather-panel .btn { width: 100%; }

	.visit-phone { font-size: 20px; }
	.visit-hours li { flex-wrap: wrap; gap: 2px 10px; }
	.hours-dash { display: none; }
	.hours-days { flex: 1 0 100%; font-size: 14.5px; }
	.hours-time { font-size: 16px; }

	.closer { min-height: 0; padding-block: 76px; }
	.closer-actions .btn { width: 100%; }

	.footer-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 36px; }
	.footer-phone { font-size: 27px; }
	.footer-directions { width: 100%; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }

	.action-bar { display: grid; }

	.page-hero { padding-block: 52px 44px; }
	.page-body { padding-block: 52px 72px; }
}

@media (max-width: 380px) {
	:root { --pad: 18px; }
	/* Below 380px the wordmark is dropped and the monogram carries the brand. */
	.brand-words { display: none; }
	.btn { font-size: 12px; padding: 0 20px; }
}

/* ----------------------------------------------------------- motion a11y */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
	.btn:hover { transform: none; }
}

/* --------------------------------------------------------------- print */
@media print {
	.site-header, .action-bar, .closer, .visit-map { display: none !important; }
	body { color: #000; background: #fff; }
}

/* ==========================================================================
   MENU & DRINKS PAGES
   An editorial menu: dark masthead, sticky course nav, two-column dish
   columns, and full-bleed bands to break the reading. No cards, no boxes.
   ========================================================================== */

:root { --coursenav-h: 56px; }

/* Anchor jumps must clear both the site header and the sticky course nav. */
html:has(.course-nav) {
	scroll-padding-top: calc(var(--header-h) + var(--coursenav-h) + 20px);
}

/* ------------------------------------------------------------- masthead */
.menu-mast {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 540px;
	padding-block: 160px 80px;
	background: var(--charcoal-900);
	overflow: hidden;
}
.menu-mast-media { position: absolute; inset: 0; }
.menu-mast-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.menu-mast-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 8, 6, .38) 0%,
		rgba(10, 8, 6, .62) 46%,
		rgba(10, 8, 6, .90) 100%
	);
}
.menu-mast-inner { position: relative; z-index: 2; }

.menu-mast-title {
	font-size: clamp(46px, 7.2vw, 92px);
	line-height: .98;
	color: #fff;
	margin: 0 0 22px;
}
.menu-mast-title em { font-style: italic; color: var(--gold); }

.menu-mast-intro {
	font-size: 18px;
	line-height: 1.62;
	color: rgba(255, 255, 255, .8);
	max-width: 60ch;
	margin: 0 0 30px;
}

.menu-mast-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}
.menu-mast-meta li { display: flex; align-items: center; gap: 26px; }
.menu-mast-meta li + li::before {
	content: "";
	width: 1px;
	height: 14px;
	background: rgba(201, 154, 75, .55);
}
.menu-mast-meta a { border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t); }
.menu-mast-meta a:hover { color: #fff; border-bottom-color: var(--gold); }

/* ---------------------------------------------------------- course nav */
.course-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 80;
	background: var(--ivory);
	border-bottom: 1px solid var(--ink-faint);
}
.course-nav-inner { padding-block: 0; }
.course-nav ul {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	min-height: var(--coursenav-h);
	align-items: center;
}
.course-nav ul::-webkit-scrollbar { display: none; }
.course-nav a {
	display: block;
	padding-block: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-soft);
	border-bottom: 1.5px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.course-nav a:hover { color: var(--chile); }
.course-nav a.is-active { color: var(--chile); border-bottom-color: var(--chile); }

/* -------------------------------------------------------------- courses */
.course { padding-block: 68px; background: var(--ivory); }
.course:first-of-type { padding-top: 88px; }

.course-head {
	margin-bottom: 44px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(37, 33, 30, .14);
}
.course-num {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .32em;
	color: var(--gold);
	margin-bottom: 14px;
}
.course-name {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.06;
	color: var(--charcoal);
	margin: 0;
}
.course-note {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--ink-soft);
	max-width: 58ch;
}

/* Newspaper columns keep long courses compact without coupling row heights. */
.course-two .course-items {
	column-count: 2;
	column-gap: 76px;
}
.dish {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 34px;
}
.dish:last-child { margin-bottom: 0; }

.dish-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 22px;
}
.dish-name {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--charcoal);
	margin: 0;
	flex: 0 1 auto;
}
.dish-price {
	flex: none;
	font-family: var(--serif);
	font-size: 18px;
	color: var(--charcoal);
	font-variant-numeric: tabular-nums;
}

.dish-desc {
	margin: 7px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 54ch;
}

.dish-variants {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 11px;
}
.dish-variants li { display: flex; align-items: baseline; gap: 8px; }
.v-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.v-price {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--charcoal);
	font-variant-numeric: tabular-nums;
}

.dish-groups { display: grid; gap: 14px; margin-top: 13px; }
.v-group-label {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 5px;
}
.v-group .dish-variants { margin-top: 0; }

/* ---------------------------------------------------------------- bands */
.menu-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 330px;
	padding-block: 76px;
	background: var(--charcoal-900);
	overflow: hidden;
}
.menu-band-media { position: absolute; inset: 0; }
.menu-band-media img { width: 100%; height: 100%; object-fit: cover; }
.menu-band-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(10, 8, 6, .88) 0%,
		rgba(10, 8, 6, .62) 52%,
		rgba(10, 8, 6, .26) 100%
	);
}
.menu-band-inner { position: relative; z-index: 2; }
.menu-band-line {
	font-family: var(--serif);
	font-size: clamp(24px, 2.9vw, 36px);
	line-height: 1.24;
	color: #fff;
	max-width: 24ch;
	margin: 0;
}

/* ---------------------------------------------------------- closing note */
.menu-close { background: var(--cream); padding-block: 76px 96px; }
.menu-close-inner { text-align: center; }
.menu-close-note {
	max-width: 62ch;
	margin: 0 auto 10px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.menu-close-warn {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 13px;
	color: rgba(92, 84, 77, .8);
}
.menu-close-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1023px) {
	.menu-mast { min-height: 400px; padding-block: 118px 60px; }
	.course { padding-block: 62px; }
	.course-two .course-items { column-gap: 52px; }
	.menu-band { min-height: 280px; padding-block: 62px; }
}

@media (max-width: 767px) {
	:root { --coursenav-h: 50px; }

	.menu-mast { min-height: 0; padding-block: 84px 52px; }
	.menu-mast-title { font-size: clamp(40px, 13vw, 56px); }
	.menu-mast-intro { font-size: 16.5px; margin-bottom: 24px; }
	.menu-mast-meta { flex-direction: column; gap: 8px; }
	.menu-mast-meta li + li::before { display: none; }

	.course-nav ul { gap: 22px; }
	.course-nav-inner { padding-inline: var(--pad); }

	.course { padding-block: 48px; }
	.course-head { margin-bottom: 32px; }
	.course-two .course-items { column-count: 1; }
	.dish { margin-bottom: 28px; }
	.dish-desc { font-size: 14.5px; }

	.menu-band { min-height: 220px; padding-block: 52px; }
	.menu-band-scrim {
		background: linear-gradient(180deg, rgba(10, 8, 6, .6), rgba(10, 8, 6, .86));
	}

	.menu-close { padding-block: 52px 68px; }
	.menu-close-actions .btn { width: 100%; }
}

/* ==========================================================================
   ABOUT PAGE
   Editorial: oversized opening statement, two alternating splits, three
   numbered principles on hairlines, one full-bleed band. No cards.
   ========================================================================== */

/* ------------------------------------------------------ opening statement */
.about-lede { padding-block: 104px; background: var(--ivory); }
.about-lede-grid {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 84px;
	align-items: start;
}
.about-statement {
	font-family: var(--serif);
	font-size: clamp(27px, 3.3vw, 43px);
	line-height: 1.22;
	color: var(--charcoal);
	margin: 0;
}
.about-statement em { font-style: italic; color: var(--chile); }

.about-lede-support { padding-top: 8px; }
.about-lede-support p {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-soft);
}

/* ------------------------------------------------------------- the splits */
.about-split { padding-block: 104px; background: var(--cream); }
.about-split-flip { background: var(--ivory); }

.about-split-grid {
	display: grid;
	grid-template-columns: .82fr 1fr;
	gap: 78px;
	align-items: center;
}
.about-split-flip .about-split-grid { grid-template-columns: 1fr .92fr; }

.about-split-media .shot { aspect-ratio: 4 / 5; }
.about-split-flip .about-split-media .shot { aspect-ratio: 4 / 3; }

.about-split-text p {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 54ch;
}
.about-split-text .link-cta { margin-top: 10px; }

/* --------------------------------------------------------- the principles */
.about-principles { padding-block: 104px; background: var(--ivory); }
.principles-head { max-width: 42ch; margin-bottom: 58px; }
.principles-head .section-title { margin-bottom: 0; }

.principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 58px;
	/* The base reset only clears ul; this is an ol and would otherwise show
	   browser decimal markers next to our own 01/02/03 labels. */
	list-style: none;
	margin: 0;
	padding: 0;
}
.principles li {
	padding-top: 24px;
	border-top: 1px solid rgba(37, 33, 30, .18);
}
.principle-num {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .32em;
	color: var(--gold);
	margin-bottom: 18px;
}
.principles h3 {
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--charcoal);
	margin: 0 0 10px;
}
.principles p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--ink-soft);
}

/* -------------------------------------------------------------- the close */
.about-close {
	padding-block: 92px 110px;
	background: var(--cream);
	text-align: center;
}
.about-close .signature {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.2;
	color: var(--terracotta);
	margin: 0 0 18px;
}
.about-close-line {
	max-width: 56ch;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ink-soft);
}
.about-close-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 34px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
	.about-lede { padding-block: 76px; }
	.about-lede-grid { grid-template-columns: 1fr; gap: 34px; }

	.about-split { padding-block: 76px; }
	.about-split-grid,
	.about-split-flip .about-split-grid { grid-template-columns: 1fr; gap: 44px; }
	.about-split-media .shot,
	.about-split-flip .about-split-media .shot { aspect-ratio: 16 / 11; }
	/* Image first on narrow screens, whichever order the markup uses. */
	.about-split-flip .about-split-media { order: -1; }

	.about-principles { padding-block: 76px; }
	.principles { grid-template-columns: 1fr; gap: 0; }
	.principles li { padding-block: 30px; }
	.principle-num { margin-bottom: 12px; }
}

@media (max-width: 767px) {
	.about-lede { padding-block: 56px; }
	.about-statement { font-size: clamp(24px, 6.6vw, 30px); }
	.about-split { padding-block: 56px; }
	.about-principles { padding-block: 56px; }
	.principles-head { margin-bottom: 34px; }
	.about-close { padding-block: 62px 76px; }
	.about-close-actions .btn { width: 100%; }
}

/* ==========================================================================
   EVENTS PAGE
   Reuses the shared editorial split (.about-split) and the menu's dish rows
   so happy hour and family packs read exactly like the rest of the site.
   ========================================================================== */

/* Section names on menu-style courses can carry an italic accent. */
.course-name em { font-style: italic; color: var(--chile); }

/* ------------------------------------------------------------ happy hour */
.ev-happy { background: var(--cream); }
.ev-happy .about-split-grid { grid-template-columns: 1fr .78fr; }
.ev-happy .about-split-media .shot { aspect-ratio: 5 / 6; }

.ev-prices {
	max-width: 430px;
	margin: 30px 0 32px;
	padding-top: 26px;
	border-top: 1px solid rgba(37, 33, 30, .16);
}
.ev-prices .dish { margin-bottom: 20px; }
.ev-prices .dish:last-child { margin-bottom: 0; }
/* .about-split-text p would otherwise win on specificity and inflate these. */
.ev-prices .dish-desc { font-size: 14.5px; max-width: 40ch; margin-top: 4px; }
.ev-prices .dish-variants { margin-top: 8px; }

/* ---------------------------------------------------------- family packs */
.ev-packs { background: var(--ivory); padding-block: 96px; }
.ev-packs .course-num { text-transform: uppercase; }

/* ------------------------------------------------------- private events */
.ev-private { background: var(--cream); }
.ev-private .about-split-grid { grid-template-columns: .9fr 1fr; }
.ev-private .about-split-media .shot { aspect-ratio: 4 / 3; }

/* A bullet per item rather than separators between them: a wrapped line
   never strands a dangling divider at the end of the row. */
.occasions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px 28px;
	margin: 24px 0 32px;
	max-width: 48ch;
}
.occasions li {
	display: flex;
	align-items: baseline;
	gap: 11px;
	font-size: 15px;
	color: var(--ink-soft);
}
.occasions li::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	transform: translateY(-3px);
}

/* --------------------------------------------------------- plan your visit */
.ev-plan { background: var(--ivory); padding-block: 96px 110px; }
.ev-plan-grid {
	display: grid;
	grid-template-columns: 1fr .88fr;
	gap: 76px;
	align-items: start;
}
.ev-plan-intro p {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 46ch;
}
.ev-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.ev-plan-hours { padding-top: 6px; }
.ev-plan-hours ul { display: grid; gap: 13px; }
.ev-plan-hours li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 16px;
	color: var(--ink-soft);
}
.ev-plan-address {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(37, 33, 30, .14);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
	.ev-happy .about-split-grid,
	.ev-private .about-split-grid { grid-template-columns: 1fr; }
	.ev-happy .about-split-media .shot,
	.ev-private .about-split-media .shot { aspect-ratio: 16 / 11; }
	.ev-happy .about-split-media { order: -1; }

	.ev-packs { padding-block: 72px; }
	.ev-plan { padding-block: 72px 84px; }
	.ev-plan-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 767px) {
	.ev-prices { max-width: none; }
	.ev-packs { padding-block: 56px; }
	.ev-plan { padding-block: 56px 68px; }
	.ev-plan-actions .btn,
	.ev-private .btn { width: 100%; }
	.ev-plan-hours li { flex-wrap: wrap; gap: 2px 10px; }
	.ev-plan-hours .hours-dash { display: none; }
	.ev-plan-hours .hours-days { flex: 1 0 100%; font-size: 14.5px; }
}

/* ==========================================================================
   CONTACT PAGE
   Phone-led: the number is the primary action, hours sit beside it, and the
   map gets real width instead of being an afterthought.
   ========================================================================== */

.ct-lead { background: var(--ivory); padding-block: 100px; }
.ct-lead-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 84px;
	align-items: start;
}

.ct-phone {
	display: inline-block;
	font-family: var(--serif);
	font-size: clamp(34px, 4.3vw, 54px);
	line-height: 1.05;
	color: var(--chile);
	margin-bottom: 20px;
	border-bottom: 1px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.ct-phone:hover { color: var(--chile-deep); border-bottom-color: currentColor; }

.ct-call-note {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 46ch;
	margin: 0 0 28px;
}

.ct-address {
	display: grid;
	gap: 2px;
	padding-top: 24px;
	border-top: 1px solid rgba(37, 33, 30, .14);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 28px;
}
.ct-address-street { color: var(--charcoal); font-weight: 500; }

.ct-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.ct-social {
	margin: 26px 0 0;
	font-size: 15.5px;
	color: var(--ink-soft);
}
.ct-social a {
	color: var(--chile);
	border-bottom: 1px solid currentColor;
	transition: color var(--t);
}
.ct-social a:hover { color: var(--chile-deep); }

/* ------------------------------------------------------------------ hours */
.ct-hours { padding-top: 6px; }
.ct-hours-second { margin-top: 38px; }
.ct-hours-list { display: grid; gap: 13px; }
.ct-hours-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 16px;
	color: var(--ink-soft);
}

/* -------------------------------------------------------------------- map */
.ct-map-section { background: var(--cream); padding-block: 96px; }
.ct-map-head { margin-bottom: 44px; max-width: 40ch; }
.ct-map-head .section-title { margin-bottom: 0; }
.ct-map { background: var(--ivory); }
/* The placeholder fills a much larger area here than on the homepage, so the
   pin and address scale up with it instead of floating in empty space. */
.ct-map .map-load { aspect-ratio: 21 / 9; gap: 10px; }
.ct-map .map-load svg { width: 54px; height: 54px; margin-bottom: 10px; }
.ct-map .map-load-label { font-size: 13px; }
.ct-map .map-load-note { font-size: 17px; color: var(--charcoal); }
.ct-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	border: 0;
	filter: grayscale(.15) contrast(1.02);
}

/* --------------------------------------------------------- good to know */
.ct-know { background: var(--ivory); }
.ct-close { background: var(--cream); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
	.ct-lead { padding-block: 72px; }
	.ct-lead-grid { grid-template-columns: 1fr; gap: 48px; }
	.ct-map-section { padding-block: 72px; }
	.ct-map .map-load,
	.ct-map iframe { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
	.ct-lead { padding-block: 56px; }
	.ct-actions .btn { width: 100%; }
	.ct-map-section { padding-block: 56px; }
	.ct-map-head { margin-bottom: 30px; }
	.ct-map .map-load,
	.ct-map iframe { aspect-ratio: 4 / 3; }
	.ct-hours-list li { flex-wrap: wrap; gap: 2px 10px; }
	.ct-hours-list .hours-dash { display: none; }
	.ct-hours-list .hours-days { flex: 1 0 100%; font-size: 14.5px; }
}

/* ---------------------------------------------- about: the portrait ---- */
.about-portrait { background: var(--cream); padding-block: 96px; }
.about-portrait-grid {
	display: grid;
	grid-template-columns: .62fr 1fr;
	gap: 76px;
	align-items: center;
}
.about-portrait-media .shot {
	aspect-ratio: 1 / 1;
	max-width: 400px;
	box-shadow: 0 18px 40px rgba(37, 33, 30, .10);
}
.about-portrait-media figcaption {
	max-width: 400px;
	font-style: italic;
	font-family: var(--serif);
	font-size: 15.5px;
	color: var(--ink-soft);
}
.about-portrait-text p {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 52ch;
}

@media (max-width: 1023px) {
	.about-portrait { padding-block: 72px; }
	.about-portrait-grid { grid-template-columns: 1fr; gap: 40px; }
	.about-portrait-media .shot,
	.about-portrait-media figcaption { max-width: 340px; }
}

@media (max-width: 767px) {
	.about-portrait { padding-block: 56px; }
	.about-portrait-media .shot,
	.about-portrait-media figcaption { max-width: none; }
}

/* ==========================================================================
   BLOG ARTICLES
   Additive only. Every selector is namespaced .post-* / .prose so nothing
   here can reach the existing page templates.
   ========================================================================== */

.post-head { background: var(--cream); padding-block: 76px 52px; }
.post-head-inner { max-width: 800px; }
.post-title {
	font-size: clamp(31px, 4.2vw, 46px);
	line-height: 1.1;
	color: var(--charcoal);
	margin: 0 0 20px;
	text-wrap: balance;
}
.post-standfirst {
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 60ch;
	margin: 0 0 24px;
}
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	color: var(--ink-soft);
}
.post-meta .sep { color: var(--gold); }

.post-hero { margin: 0; background: var(--cream); padding-bottom: 8px; }
.post-hero .wrap { max-width: 940px; }
.post-hero .shot { aspect-ratio: 16 / 9; border-radius: var(--r-img); }
.post-hero .shot img { width: 100%; height: 100%; object-fit: cover; }
.post-hero figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }

.post-body { background: var(--ivory); padding-block: 60px 20px; }
.post-body .wrap { max-width: 940px; }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 68ch; font-size: 17.5px; line-height: 1.72; color: var(--ink-soft); }
.prose > *:first-child { margin-top: 0; }

.prose h2 {
	font-size: clamp(25px, 3vw, 32px);
	line-height: 1.18;
	color: var(--charcoal);
	margin: 52px 0 16px;
}
.prose h3 {
	font-family: var(--sans);
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--charcoal);
	margin: 34px 0 10px;
}
.prose p { margin: 0 0 1.15em; }
.prose strong { color: var(--charcoal); font-weight: 600; }

.prose a:not(.btn) {
	color: var(--chile);
	border-bottom: 1px solid rgba(169, 54, 43, .35);
	transition: border-color var(--t), color var(--t);
}
.prose a:not(.btn):hover { color: var(--chile-deep); border-bottom-color: currentColor; }

.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 0; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 22px; list-style: none; }
.prose ul li::before {
	content: "";
	position: absolute;
	left: 3px; top: .72em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--gold);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 30px; list-style: none; counter-increment: n; }
.prose ol li::before {
	content: counter(n) ".";
	position: absolute;
	left: 0; top: 0;
	font-family: var(--serif);
	color: var(--chile);
}

/* Pull-out answer block for the featured-snippet paragraph. */
.prose .answer {
	margin: 0 0 1.4em;
	padding: 20px 24px;
	background: var(--cream);
	border-left: 3px solid var(--gold);
	font-size: 17px;
	color: var(--charcoal);
}
.prose .answer p:last-child { margin-bottom: 0; }

/* Figures inside articles run slightly wider than the text measure. */
.prose figure { margin: 38px 0; max-width: 100%; }
.prose figure .shot,
.prose figure img { border-radius: var(--r-img); }
.prose figure img { width: 100%; height: auto; display: block; }
.prose figcaption {
	margin-top: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* -------------------------------------------------------- article tables */
.prose .table-wrap {
	margin: 34px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ink-faint);
	border-radius: var(--r-img);
	background: #fff;
}
.prose table { border-collapse: collapse; width: 100%; min-width: 520px; }
.prose th, .prose td {
	text-align: left;
	padding: 13px 18px;
	border-bottom: 1px solid var(--ink-faint);
	font-size: 15.5px;
	line-height: 1.55;
	vertical-align: top;
}
.prose thead th {
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	background: var(--cream);
	white-space: nowrap;
}
.prose tbody th {
	font-family: var(--sans);
	font-weight: 600;
	color: var(--charcoal);
	width: 26%;
}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- post CTA */
.post-cta { background: var(--charcoal); color: rgba(247, 241, 232, .72); padding-block: 62px; }
.post-cta-inner { max-width: 940px; }
.post-cta h2 {
	font-size: clamp(26px, 3.2vw, 34px);
	color: var(--ivory);
	margin: 0 0 14px;
}
.post-cta p { max-width: 54ch; font-size: 16.5px; line-height: 1.68; margin: 0 0 26px; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.post-cta .btn-ghost-dark { color: var(--ivory); border-color: rgba(247, 241, 232, .3); }
.post-cta .btn-ghost-dark:hover { background: rgba(247, 241, 232, .1); border-color: var(--gold); }

/* ----------------------------------------------------------- related list */
.post-related { background: var(--cream); padding-block: 66px 84px; }
.post-related .wrap { max-width: 940px; }
.post-related-head {
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 26px;
}
.post-related ul { display: grid; gap: 1px; background: var(--ink-faint); border-block: 1px solid var(--ink-faint); }
.post-related li { background: var(--cream); }
.post-related a {
	display: grid;
	gap: 6px;
	padding: 22px 4px;
	transition: padding-left var(--t);
}
.post-related a:hover { padding-left: 12px; }
.post-related .r-title {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.25;
	color: var(--charcoal);
}
.post-related a:hover .r-title { color: var(--chile); }
.post-related .r-ex { font-size: 15px; color: var(--ink-soft); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 767px) {
	.post-head { padding-block: 48px 36px; }
	.post-standfirst { font-size: 17.5px; }
	.post-body { padding-block: 40px 12px; }
	.prose { font-size: 17px; }
	.prose h2 { margin-top: 40px; }
	.prose figure { margin: 28px 0; }
	.post-hero .shot { aspect-ratio: 3 / 2; }
	.post-cta { padding-block: 48px; }
	.post-cta-actions .btn { width: 100%; }
	.post-related { padding-block: 48px 60px; }
	.post-related .r-title { font-size: 19px; }
}

/* ------------------------------------------- menu page: related reading */
.menu-reading { background: var(--ivory); padding-block: 0 84px; }
.menu-reading .wrap { max-width: var(--maxw); }
.menu-reading ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--ink-faint);
	border-block: 1px solid var(--ink-faint);
}
.menu-reading li { background: var(--ivory); }
.menu-reading a { display: grid; gap: 6px; padding: 22px 20px 22px 0; transition: padding-left var(--t); }
.menu-reading li + li a { padding-left: 24px; }
.menu-reading a:hover { padding-left: 12px; }
.menu-reading li + li a:hover { padding-left: 34px; }
.menu-reading .mr-title { font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--charcoal); }
.menu-reading a:hover .mr-title { color: var(--chile); }
.menu-reading .mr-ex { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 767px) {
	.menu-reading { padding-bottom: 56px; }
	.menu-reading li + li a { padding-left: 0; }
	.menu-reading li + li a:hover { padding-left: 12px; }
}