/* =========================================================================
   The Stag & Hounds — site stylesheet
   Shared by every page: tokens, header and menu, tiles, hero, footer and the
   responsive steps. Page-specific layouts live in pages.css.
   ========================================================================= */

@font-face {
	font-family: "Cinzel";
	src: url("../fonts/Cinzel-Variable.woff2") format("woff2");
	font-weight: 400 700; font-display: swap;
}
@font-face {
	font-family: "Work Sans";
	src: url("../fonts/work-sans-latin-normal.woff2") format("woff2");
	font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Work Sans";
	src: url("../fonts/work-sans-latin-italic.woff2") format("woff2");
	font-weight: 300 600; font-style: italic; font-display: swap;
}

:root {
	--paper:   #fbf9f4;
	--sand:    #f2ebdf;
	--ink:     #1c2118;
	--ink-2:   #5e6757;
	--ink-3:   #666b61;   /* darkened from #959c8d: small labels need 4.5:1 on sand */
	--claret:  #8e2230;
	--gold:    #c98f3c;   /* large type, stars and the ribbon only */
	--gold-text: #886128; /* gold for small text: passes 4.5:1 on paper and sand */
	--line:    #e4ddcd;

	--display: "Cinzel", Georgia, serif;
	--sans:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pad:  clamp(16px, 2.2vw, 34px);   /* tighter: the tiles do the framing */
	--gap:  clamp(12px, 1.1vw, 18px);
	--sec:  clamp(60px, 6vw, 110px);
	--r:    20px;

	/* Boxed layout: content is at most --content wide with --gutter padding
	   on each side, centred — a 1280px box that exactly fills a 1280px screen.
	   Only the hero photograph and the gold ribbon run edge to edge. */
	--content: 1240px;
	--gutter:  20px;
	--box:     calc(var(--content) + 2 * var(--gutter));
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--sans); font-size: 17px; line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; margin: 0 0 .5em; }
h1 { font-size: clamp(30px, 2.9vw, 46px); line-height: 1.14; }
h2 { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.16; }
p { margin: 0 0 1.1em; }

.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 1.1em; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 20px; }
.skip-link:focus { left: 8px; top: 8px; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--claret); outline-offset: 3px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
	transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid   { background: var(--claret); color: #fff; border-color: var(--claret); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); }
.btn--line    { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--ink); }
.btn--sand    { background: var(--sand); color: var(--claret); border-color: var(--sand); }
.btn--sand:hover { background: #fff; border-color: #fff; }
.btn--outline { background: transparent; color: #f6ece4; border-color: rgba(246,236,228,.45); }
.btn--outline:hover { background: rgba(246,236,228,.14); }

.arrow {
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor;
	align-self: flex-start;
}
.arrow::after { content: " \2192"; }
.arrow:hover { color: var(--claret); }

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

.hdr { position: sticky; top: 0; z-index: 80; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr__inner { display: flex; align-items: center; gap: 24px; max-width: var(--box); margin-inline: auto; padding: 14px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { border-radius: 50%; }
.brand span { font-family: var(--display); font-size: 16px; white-space: nowrap; }
.hdr__nav { display: flex; gap: 20px; margin-left: auto; flex-shrink: 0; }
.hdr__nav a { white-space: nowrap; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.hdr__nav a:hover { color: var(--ink); border-bottom-color: var(--claret); }
.hdr__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hdr__right .btn, .brand { white-space: nowrap; flex-shrink: 0; }
/* The badge reads "Open · kitchen until 9pm". Below 1360px there isn't room
   for the detail beside seven links, so only "Open"/"Closed" shows; the
   detail is still in the hero and the footer hours on every page. */
.state__word { font-weight: 500; }
@media (max-width: 1359px) { .hdr .state__more { display: none; } }
.hdr__nav a[aria-current="page"],
.nav-drop.is-current > .nav-drop__top { color: var(--ink); border-bottom-color: var(--claret); }

/* "Our story" dropdown. Opens on hover, and on keyboard focus (focus-within),
   so it works without JavaScript. The parent stays a real link, so a tap on
   a touch screen still lands on Our Story, which links on to the rest. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__top { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop__top::after {
	content: ""; width: 6px; height: 6px; margin-top: -3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .25s var(--ease);
}
.nav-drop__menu {
	position: absolute; top: 100%; left: -16px; z-index: 90;
	min-width: 230px; margin: 0; padding: 8px; list-style: none;
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(28,33,24,.28);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
/* An invisible bridge across the gap, so the menu doesn't close while the
   pointer travels from the link down to it. */
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
	opacity: 1; visibility: visible; transform: translateY(12px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.nav-drop:hover .nav-drop__top::after,
.nav-drop:focus-within .nav-drop__top::after { transform: rotate(225deg); margin-top: 3px; }
.hdr__nav .nav-drop__menu a {
	display: block; padding: 10px 14px; border: 0; border-radius: 9px;
	font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.hdr__nav .nav-drop__menu a:hover,
.hdr__nav .nav-drop__menu a:focus-visible { background: var(--sand); color: var(--claret); }
.hdr__nav .nav-drop__menu a[aria-current="page"] { color: var(--claret); }
.nav-drop__menu small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
[data-open-state].is-open .dot { background: #5f9c48; }
[data-open-state].is-closed .dot { background: #b4675f; }

/* --- Tile system -------------------------------------------------------- */

.bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
	max-width: var(--box); margin-inline: auto;
	padding: 0 var(--gutter) var(--sec);
	grid-auto-rows: clamp(190px, 19vw, 260px);
}

.tile {
	position: relative; margin: 0; overflow: hidden;
	border-radius: var(--r);
	background: var(--sand);
}
.tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile:hover > img { transform: scale(1.04); }

/* Caption sits on the photograph, with just enough scrim to stay legible. */
.tile > figcaption {
	position: absolute; left: 20px; bottom: 16px; z-index: 2;
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
	text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
figure.tile::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1;
	background: linear-gradient(transparent, rgba(0,0,0,.42)); pointer-events: none;
}

.tile--pad { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 2.4vw, 44px); background: var(--paper); border: 1px solid var(--line); }
.tile--sand { background: var(--sand); border-color: transparent; }
.tile--claret { background: var(--claret); border-color: transparent; color: #f7ece4; }
.tile--claret h2 { color: #fff; }
.tile--claret p { color: #f0cfc4; }
.tile--claret .eyebrow { color: #f0c3a8; }

.tile__label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.tile--claret .tile__label { color: #f0c3a8; }

/* --- Hero -------------------------------------------------------------
   Full-bleed photograph with centred type and the practical details along
   the foot. The hero keeps its own, roomier spacing tokens, set locally, while
   the tiles below use the page's tighter ones.

   The scrim is dark, not light. A light wash had to be so heavy to make dark
   type readable that it bleached the photograph. A deep forest-green scrim
   (the brand ink) keeps the photo's colour, and cream type reads cleanly on
   it. It is weakest at the top, so the sky and roofline stay bright, and
   strongest behind the text and the foot. */

.hero {
	--pad: clamp(28px, 4.5vw, 80px);
	--sec: clamp(80px, 9vw, 150px);
	position: relative; isolation: isolate;
	min-height: calc(100vh - 72px);
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	text-align: center; padding: var(--sec) var(--pad) 0;
	color: #fbf6ec;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 58% 46% at 50% 44%, rgba(20,27,16,.62), rgba(20,27,16,0) 100%),
		linear-gradient(180deg, rgba(20,27,16,.28) 0%, rgba(20,27,16,.5) 45%, rgba(20,27,16,.86) 100%);
}
.hero__inner { max-width: 760px; text-shadow: 0 1px 18px rgba(10,14,8,.35); }
.hero h1 { font-size: clamp(34px, 4vw, 62px); line-height: 1.12; color: #fff; }
.hero h1 em { font-style: normal; color: #e9bf83; }   /* light gold: claret disappears on the dark scrim */
.hero .eyebrow { color: #f4dcb4; font-weight: 500; }
.hero__lead { font-size: 19px; color: rgba(251,246,236,.9); max-width: 34rem; margin-inline: auto; }
.row--centre { justify-content: center; }
.hero .btn--line { color: #fff; border-color: rgba(255,255,255,.6); text-shadow: none; }
.hero .btn--line:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.hero .btn--solid { text-shadow: none; }

.hero__foot {
	margin-top: auto; width: 100%; max-width: var(--content);
	display: flex; flex-wrap: wrap; gap: 14px 46px; justify-content: center;
	padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.22);
	font-size: 13px; color: rgba(251,246,236,.92);
}
.hero__foot b { font-weight: 500; color: #e9bf83; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; margin-right: 7px; }
.hero__foot i { font-style: normal; }
.hero__foot a { text-decoration: none; }

/* --- Ribbon -------------------------------------------------------------
   The ticker line from the live site, set still: a moving marquee would be
   the only thing on the page in motion. */

.ribbon {
	list-style: none; margin: 0 0 var(--sec); padding: 16px var(--gutter);
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px;
	background: var(--gold); color: var(--ink);
	font-family: var(--display); font-size: 16px;
}
.ribbon li + li::before { content: "·"; margin-right: 34px; opacity: .55; }

/* --- Shared bits for the content tiles --------------------------------- */

/* Sections whose tiles hold running text size their rows to the text
   instead of the fixed photo-row height, so nothing is clipped. Photos in
   those sections are taken out of flow and simply fill whatever height the
   text gives them. */
.bento--auto { grid-auto-rows: auto; }
.bento--auto figure.tile { min-height: 240px; }
.bento--auto figure.tile > img { position: absolute; inset: 0; }

.muted { color: var(--ink-2); }
.tile--claret .muted { color: #f0cfc4; }
h2 em { font-style: normal; color: var(--claret); }
h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.25; margin: 0 0 .5em; }
.fine { font-size: 12.5px; color: var(--ink-3); margin: 18px 0 0; }
.fine a { color: var(--claret); }
.closer { font-family: var(--display); font-size: 19px; line-height: 1.4; color: var(--claret); margin: .4em 0 0; }

.stat { justify-content: flex-end; }
.stat__fig { font-family: var(--display); font-size: clamp(30px, 3.2vw, 50px); line-height: 1; color: var(--claret); margin: 0 0 12px; }
.stat__label { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.tile--claret .stat__fig { color: #fff; }
.tile--claret .stat__label { color: #f0cfc4; }

/* --- Welcome ------------------------------------------------------------ */

.t-w-copy  { grid-column: 1 / 7;  grid-row: 1 / 3; }
.t-w-a     { grid-column: 7 / 10; grid-row: 1 / 2; }
.t-w-b     { grid-column: 10 / 13; grid-row: 1 / 2; }
.t-w-quote { grid-column: 7 / 13; grid-row: 2 / 3; }
#welcome figure.tile { min-height: 300px; }
.t-w-quote p { font-family: var(--display); font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4; color: #fff; margin: 0; }

/* --- Food tiles --------------------------------------------------------- */

.t-f-copy { grid-column: 1 / 5;  grid-row: 1 / 3; }
.t-f-big  { grid-column: 5 / 13; grid-row: 1 / 3; }
.t-f-a    { grid-column: 1 / 4;  grid-row: 3 / 4; }
.t-f-b    { grid-column: 4 / 7;  grid-row: 3 / 4; }
.t-f-c    { grid-column: 7 / 10; grid-row: 3 / 4; }
.t-f-d    { grid-column: 10 / 13; grid-row: 3 / 4; }

/* --- Menu tiles --------------------------------------------------------- */

.t-menu     { grid-column: 1 / 9;  grid-row: 1 / 2; }
.t-menu-img { grid-column: 9 / 13; grid-row: 1 / 2; }
.t-offer-a  { grid-column: 1 / 7;  grid-row: 2 / 3; }
.t-offer-b  { grid-column: 7 / 13; grid-row: 2 / 3; }

.menus { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 3vw, 50px); }
.menus__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.menus__head h3 { color: var(--claret); margin: 0; font-size: 23px; }
.menus__head span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.menus__note { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.menus .arrow { display: inline-block; margin-top: 18px; }

.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 500; }
.dishes span { flex: 1; }
.dishes small { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.dishes b { font-weight: 500; color: var(--claret); }
.dishes b::before { content: "£"; font-size: .72em; vertical-align: .1em; margin-right: 1px; }

.offer { font-family: var(--display); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; margin: 0 0 .6em; }
.tile--claret .offer { color: #fff; }
.offer__times { list-style: none; margin: 0; padding: 0; color: var(--ink-2); font-size: 16px; }
.offer__times li { padding: 8px 0; border-top: 1px solid var(--line); }
.offer__times li:last-child { border-bottom: 1px solid var(--line); }

/* --- Made here tiles ---------------------------------------------------- */

.t-m-copy { grid-column: 1 / 5;  grid-row: 1 / 2; }
.t-m-wide { grid-column: 5 / 13; grid-row: 1 / 3; }
.t-m-a    { grid-column: 1 / 3;  grid-row: 2 / 3; }
.t-m-b    { grid-column: 3 / 5;  grid-row: 2 / 3; }

/* --- Rooms tiles -------------------------------------------------------- */

.t-r-copy { grid-column: 1 / 5;  grid-row: 1 / 3; }
.t-r-a    { grid-column: 5 / 9;  grid-row: 1 / 2; }
.t-r-b    { grid-column: 9 / 13; grid-row: 1 / 2; }
.t-r-c    { grid-column: 5 / 9;  grid-row: 2 / 3; }
.t-r-d    { grid-column: 9 / 13; grid-row: 2 / 3; }

/* --- Parish Brewery tiles ----------------------------------------------- */

.t-br-copy { grid-column: 1 / 7;   grid-row: 1 / 3; }
.t-st-a    { grid-column: 7 / 10;  grid-row: 1 / 2; }
.t-st-b    { grid-column: 10 / 13; grid-row: 1 / 2; }
.t-st-c    { grid-column: 7 / 10;  grid-row: 2 / 3; }
.t-st-d    { grid-column: 10 / 13; grid-row: 2 / 3; }
.t-br-img  { grid-column: 1 / 13;  grid-row: 3 / 4; min-height: 380px !important; }
.t-br-img > img { object-position: center 60%; }

/* --- History tiles ------------------------------------------------------ */

.t-h-head  { grid-column: 1 / 4;   grid-row: 1 / 2; justify-content: flex-start; }
.t-h-a     { grid-column: 4 / 7;   grid-row: 1 / 2; }
.t-h-b     { grid-column: 7 / 10;  grid-row: 1 / 2; }
.t-h-c     { grid-column: 10 / 13; grid-row: 1 / 2; }
.t-h-story { grid-column: 1 / 7;   grid-row: 2 / 3; }
.t-h-img   { grid-column: 7 / 13;  grid-row: 2 / 3; }

.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.card > img { width: 100%; height: auto; flex: none; aspect-ratio: 4 / 3; object-fit: cover; }   /* height:auto beats the generic .tile > img { height: 100% }, which stretched each card's photo to a different height */
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body p:not(.tile__label) { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.card__body .arrow { margin-top: auto; }
.card .tile__label { margin-bottom: 12px; }

/* --- Burrough Hill tiles ------------------------------------------------ */

.t-hill-copy { grid-column: 1 / 7;   grid-row: 1 / 3; }
.t-hill-img  { grid-column: 7 / 13;  grid-row: 1 / 2; }
.t-hs-a      { grid-column: 7 / 9;   grid-row: 2 / 3; }
.t-hs-b      { grid-column: 9 / 11;  grid-row: 2 / 3; }
.t-hs-c      { grid-column: 11 / 13; grid-row: 2 / 3; }
#hill figure.tile { min-height: 340px; }

/* --- Loyalty tiles ------------------------------------------------------ */

.t-l-copy { grid-column: 1 / 7;   grid-row: 1 / 3; }
.t-l-a    { grid-column: 7 / 10;  grid-row: 1 / 2; }
.t-l-b    { grid-column: 10 / 13; grid-row: 1 / 2; }
.t-l-c    { grid-column: 7 / 10;  grid-row: 2 / 3; }
.t-l-d    { grid-column: 10 / 13; grid-row: 2 / 3; }

/* --- Review tiles ------------------------------------------------------- */

/* Heading, rating and buttons share one full-width strip; the three reviews
   sit side by side beneath it. In the old layout the heading had a narrow
   column of its own and, wrapping to four lines with its buttons stacked, set
   a row far taller than any review — the review cards were mostly empty. */
.t-rv-head { grid-column: 1 / 13;  grid-row: 1 / 2; }
.t-rv-a    { grid-column: 1 / 5;   grid-row: 2 / 3; }
.t-rv-b    { grid-column: 5 / 9;   grid-row: 2 / 3; }
.t-rv-c    { grid-column: 9 / 13;  grid-row: 2 / 3; }

.t-rv-head {
	display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: end;
	padding-block: clamp(26px, 2.6vw, 38px);
}
.t-rv-head .eyebrow { grid-column: 1; grid-row: 1; }
.t-rv-head h2       { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; }
.t-rv-head .muted   { grid-column: 2; grid-row: 1; margin: 0 0 12px; text-align: right; }
.t-rv-head .row     { grid-column: 2; grid-row: 2; padding: 0; justify-content: flex-end; }

.review { justify-content: flex-start; }
/* Italic sans rather than Cinzel: Cinzel is all capitals, which is fine for
   a headline but tiring across a sentence-long quote. */
.review blockquote { margin: 0 0 18px; font-size: 17px; font-style: italic; line-height: 1.6; }
.review figcaption { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.stars { display: block; color: #ae7c34; /* gold, deepened to 3:1 as a graphic */ font-size: 15px; letter-spacing: 3px; margin-bottom: 8px; }
/* The shared caption-on-photo styling doesn't apply to text-only figures. */
figure.review::after { content: none; }
.review > figcaption { position: static; text-shadow: none; }

/* --- Booking tiles ------------------------------------------------------ */

.t-b-copy { grid-column: 1 / 8;  grid-row: 1 / 2; min-height: 460px; }
.t-b-img  { grid-column: 8 / 13; grid-row: 1 / 2; }
.t-b-img > img { object-position: center 40%; }
.t-b-copy .eyebrow { color: #f0c3a8; }

/* --- Footer ------------------------------------------------------------- */

.ftr { background: var(--sand); padding: var(--sec) var(--gutter) 0; }
.ftr > * { max-width: var(--content); margin-inline: auto; }
/* The hours column is sized to its table (auto) so every day's times stay on
   one line; the other two columns share what's left. */
.ftr__grid { display: grid; grid-template-columns: 1fr auto .8fr; gap: clamp(32px, 4vw, 70px); padding-bottom: clamp(40px, 5vw, 70px); }
.ftr h3 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 14px; }
.ftr__name { font-family: var(--display); font-size: 19px; margin: 14px 0 10px; }
.ftr__meta { color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.ftr__meta a { text-decoration: none; }
.ftr__meta a:hover { color: var(--claret); }
.ftr__links { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.ftr__links li { margin-bottom: 8px; }
.ftr__links a { text-decoration: none; color: var(--ink-2); font-size: 14px; }
.ftr__links a:hover { color: var(--claret); }
.ftr__social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.ftr__social a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.ftr__social a:hover { color: var(--claret); border-bottom-color: currentColor; }

.hours { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hours th, .hours td { text-align: left; padding: 8px 22px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hours th { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hours td { color: var(--ink-2); }
.hours tr[data-today] td { color: var(--claret); }
.ftr__fine { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }

.ftr__bar { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 20px 0; font-size: 12.5px; color: var(--ink-3); }
.ftr__bar p { margin: 0; }

/* Christmas banner on the home and Menus pages */
.t-xmas-banner { grid-column: 1 / 13; grid-row: 1 / 2; }
.xmas-banner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px 40px; }
.xmas-banner > div:first-child { max-width: 46em; }
.xmas-banner h2 { margin: 0 0 .3em; font-size: clamp(24px, 2.2vw, 32px); }
.xmas-banner p:not(.eyebrow) { margin: 0; }
.xmas-banner .row { flex-shrink: 0; padding: 0; }
.xmas-dates { list-style: none; margin: 1em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.xmas-dates b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #f0c3a8; margin-bottom: 3px; }
.xmas-dates span { font-size: 17px; color: #fff; }

/* =========================================================================
   Responsive
   Three steps down from the desktop layout:
     ≤1180px  the header folds into a Menu button (the links no longer fit)
     ≤1024px  tablet: tiles reflow into two columns
     ≤640px   phone: one column, a bottom Call / Book bar
   ========================================================================= */

/* --- Header toggle and menu panel (hidden on desktop) -------------------- */

.hdr__toggle, .mnav, .mbar { display: none; }

@media (max-width: 1180px) {
	.hdr__nav { display: none; }
	.hdr__toggle {
		display: inline-flex; align-items: center; gap: 10px;
		height: 44px; padding: 0 16px; border-radius: 999px;
		border: 1px solid var(--line); background: var(--paper); color: var(--ink);
		font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
		cursor: pointer;
	}
	.hdr__toggle:hover { border-color: var(--ink); }
	.hdr__toggle-bars, .hdr__toggle-bars::before, .hdr__toggle-bars::after {
		display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px;
		transition: transform .25s var(--ease), opacity .2s;
	}
	.hdr__toggle-bars { position: relative; }
	.hdr__toggle-bars::before, .hdr__toggle-bars::after { content: ""; position: absolute; left: 0; }
	.hdr__toggle-bars::before { top: -5px; }
	.hdr__toggle-bars::after { top: 5px; }
	.hdr__toggle[aria-expanded="true"] .hdr__toggle-bars { background: transparent; }
	.hdr__toggle[aria-expanded="true"] .hdr__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
	.hdr__toggle[aria-expanded="true"] .hdr__toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
	.hdr__right { margin-left: auto; }

	/* The panel drops from under the sticky header and scrolls on its own. */
	.mnav:not([hidden]) {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto;
		background: var(--paper); border-top: 1px solid var(--line);
		box-shadow: 0 24px 40px -24px rgba(28,33,24,.3);
		padding: 8px var(--gutter) 28px;
	}
	.hdr { border-bottom-color: var(--line); }
	.mnav__list, .mnav__list ul { list-style: none; margin: 0; padding: 0; }
	.mnav__list { max-width: var(--content); margin-inline: auto; }
	.mnav__list > li > a {
		display: block; padding: 15px 0; border-bottom: 1px solid var(--line);
		font-family: var(--display); font-size: 22px; text-decoration: none; color: var(--ink);
	}
	.mnav__sub a {
		display: block; padding: 11px 0 11px 18px; border-bottom: 1px solid var(--line);
		font-size: 15px; text-decoration: none; color: var(--ink-2);
	}
	.mnav a[aria-current="page"] { color: var(--claret); }
	.mnav__foot { max-width: var(--content); margin: 22px auto 0; }
	.mnav__foot .state { margin: 0 0 14px; font-size: 13px; }
	.hdr .mnav .state__more { display: inline; }   /* room for the detail here */
	html.menu-open { overflow: hidden; }
}

/* --- Tablet: two-column tiles -------------------------------------------- */

@media (max-width: 1024px) {
	/* Every desktop placement is cleared and the tiles flow two to a row.
	   Text tiles take the full width so their lines stay readable; photos,
	   figures and cards pair up. "dense" back-fills any gap a full-width
	   tile leaves behind. */
	.bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; grid-auto-flow: row dense; }
	.bento > * { grid-column: auto !important; grid-row: auto !important; }
	.bento > .tile--pad:not(.stat):not(.step):not(.event):not(.contact):not(.review):not(.t-offer-a):not(.t-offer-b) { grid-column: 1 / -1 !important; }
	/* An odd photo or card at the end of a run would sit alone, so it spans. */
	.bento > figure.tile:last-of-type:nth-of-type(odd),
	.bento > article.tile:last-of-type:nth-of-type(odd) { grid-column: 1 / -1 !important; }
	figure.tile { min-height: 280px; }
	.bento > figure.tile > img { position: absolute; inset: 0; }
	.tile--pad { padding: clamp(24px, 4vw, 36px); }

	.hero { min-height: min(88vh, 760px); }
	.hero__foot { gap: 10px 30px; }

	.t-hs-c { grid-column: 1 / -1 !important; }   /* third of three hill figures */
	.xmas-banner { flex-direction: column; align-items: flex-start; }
	.menus { grid-template-columns: 1fr; gap: 34px; }
	.ftr__grid { grid-template-columns: 1fr 1fr; }
	.ftr__grid > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}

/* --- Phone: one column ----------------------------------------------------- */

@media (max-width: 640px) {
	:root { --sec: 56px; }
	body { font-size: 16px; padding-bottom: 64px; } /* room for the bottom bar */

	.hdr__inner { gap: 12px; padding-block: 10px; }
	.brand img { width: 36px; height: 36px; }
	.brand span { font-size: 14.5px; }
	/* The bottom bar carries Call and Book, so the header keeps only the
	   name and the menu button. */
	.hdr__right .state, .hdr__right .btn { display: none; }
	.hdr__toggle-label { display: none; }
	.hdr__toggle { width: 44px; padding: 0; justify-content: center; }

	.bento { grid-template-columns: 1fr; gap: 12px; }
	.bento > * { grid-column: 1 / -1 !important; }
	figure.tile { min-height: 240px; }
	.tile--pad { padding: 26px 22px; }
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }

	.hero { min-height: 0; padding: 72px 20px 0; }
	.hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
	.hero__lead { font-size: 17px; }
	.hero .row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
	.hero__foot { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 48px; padding: 18px 0 22px; text-align: left; }

	.ribbon { gap: 6px 18px; font-size: 14px; padding-block: 14px; }
	.ribbon li + li::before { margin-right: 18px; }

	.dishes li, .mlist li { gap: 12px; }
	.t-rv-head { display: flex; flex-direction: column; align-items: flex-start; }
	.t-rv-head .muted { text-align: left; margin: 10px 0 14px; }
	.t-rv-head .row { justify-content: flex-start; }

	.ftr { padding-top: 56px; }
	.ftr__grid { grid-template-columns: 1fr; gap: 36px; }
	.ftr__grid > div:nth-child(2) { grid-row: auto; }
	/* Long time ranges wrap on a phone rather than pushing the table wider
	   than the screen. */
	.hours th, .hours td { white-space: normal; padding-right: 12px; font-size: 13px; }
	.ftr__bar { flex-direction: column; gap: 6px; }

	/* Bottom bar: the two things people want from a pub site on a phone. */
	.mbar {
		display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: rgba(251,249,244,.96); border-top: 1px solid var(--line);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	}
	.mbar a {
		display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px;
		font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
	}
	.mbar__call { border: 1px solid var(--line); color: var(--ink); background: var(--paper); }
	.mbar__book { background: var(--claret); color: #fff; }
	html.menu-open .mbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}