/*
Theme Name: The George
Theme URI: https://www.thegeorge.london/
Version: 1.0.1
Description: WordPress theme for The George, Great Portland Street, Fitzrovia.
Author: INSPIRE
Author URI: https://www.inspiredm.co.uk
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thegeorge
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--green: #21381a;
	--cream: #fef8ec;
	--bright: #38be65;
	--sage: #699e89;
	--stone: #f1ecd5;
	--stone-dark: #e6e0cf;
	--gold: #9a7733;
	--olive: #a0ab6d;
	--ink: #1e1e1e;
	--rule: #d8d2c0;

	--font-display: "ITC Benguiat", "Baskervville", Georgia, serif;
	--font-body: "Baskervville", Baskerville, Georgia, serif;
	--font-label: "wedding-gothic-atf", "Helvetica Neue", Arial, sans-serif;

	--content: 1050px;
	--wide: 1320px;
	--gutter: clamp(24px, 4.2vw, 60px); /* 24px mobile, 60px desktop */
	--header-h: 161px;
	--cta-bar-h: 0px;
	/* Kadence Blocks reads these when no Kadence theme is active. */
	--global-content-width: var(--wide);
	--global-content-edge-padding: var(--gutter);
	--global-kb-font-size-md: 18px;
}
@media (max-width: 900px) {
	:root {
		--header-h: 89px; /* 88px + 1px rule */
		--cta-bar-h: 56px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--green);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip; /* clip, not hidden, so the sticky header keeps working */
	padding-bottom: var(--cta-bar-h);
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: inherit;
	margin: 0 0 0.6em;
}
h1, h2 { font-size: clamp(28px, 2.8vw, 40px); }
h3 { font-size: clamp(22px, 2.1vw, 30px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; }
::selection { background: var(--bright); color: var(--green); }
address { font-style: normal; }
.screen-reader-text,
.visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	top: 10px;
	left: 10px;
	z-index: 200000;
	background: var(--cream);
	color: var(--green);
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; scroll-behavior: auto; }
}

/* Figures: Baskervville defaults to old-style, so switch them on everywhere. */
body { font-variant-numeric: lining-nums; }
@media (max-width: 900px) {
	/* Mobile footer and booking bar: 11/140% with no gaps, and the footer runs to the bottom (no cream strip under it), so the bar's space is added inside the footer instead. */
	body { padding-bottom: 0; }
}

/* ==========================================================================
   Labels and buttons
   ========================================================================== */

.section-label,
.is-style-label {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0;
}
.btn,
.wp-block-button__link,
.wp-element-button,
.wp-block-kadence-advancedbtn .kb-button,
.kb-button,
.spaces-card-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 11px 24px;
	border: 1px solid var(--green);
	border-radius: 0;
	background: var(--green);
	color: var(--cream);
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.spaces-card-button__link:hover {
	background: var(--bright);
	color: var(--green);
	text-decoration: none;
}
.btn--bright,
.is-style-bright .wp-block-button__link,
.btn-bright .kb-button, .kb-button.btn-bright {
	background: var(--bright);
	color: var(--green);
}
.btn--bright:hover,
.is-style-bright .wp-block-button__link:hover,
.btn-bright .kb-button:hover, .kb-button.btn-bright:hover {
	background: var(--green);
	color: var(--cream);
}
.btn--light,
.is-style-light .wp-block-button__link,
.is-style-outline .wp-block-button__link,
.btn-light .kb-button, .kb-button.btn-light {
	background: var(--cream);
	color: var(--green);
}
.btn--light:hover,
.is-style-light .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:hover,
.btn-light .kb-button:hover, .kb-button.btn-light:hover {
	background: var(--green);
	color: var(--cream);
	border-color: var(--green);
}
/* Underlined label-style link, e.g. "VIEW DETAILS", "EVENT MENU". */
.text-link,
.is-style-text-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.text-link:hover,
.is-style-text-link .wp-block-button__link:hover {
	background: none;
	color: inherit;
	text-decoration-thickness: 2px;
}
/* Serif underlined link, e.g. "More Details", "See more". */
.text-link-serif {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--cream);
	border-bottom: 1px solid var(--green);
	color: var(--green);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	height: calc(var(--header-h) - 1px);
	padding: 50px var(--gutter) 0;
}
.site-header__menu { justify-self: start; padding-top: 5px; }
.site-header__logo { grid-column: 2; display: block; width: 183px; transition: opacity 0.3s ease; }
.site-header__logo img { width: 100%; height: auto; }
.site-header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; padding-top: 5px; }
.header-instagram { display: inline-flex; width: 32px; height: 32px; color: var(--green); }
.header-instagram svg { width: 32px; height: 32px; }
/* Hero quick links (homepage only, transparent state) */
.site-header__hero-nav { position: absolute; top: 53px; left: 50%; transform: translateX(-50%); display: none; }
.hero-nav { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hero-nav a {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cream);
	white-space: nowrap;
}
.hero-nav a:hover,
.hero-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Transparent header over the homepage hero */
.has-hero .site-header { position: fixed; left: 0; right: 0; }
.has-hero:not(.header-solid) .site-header { background: transparent; border-bottom-color: transparent; color: var(--cream); height: auto; }
.has-hero:not(.header-solid) .site-header__inner { padding-top: 42px; height: auto; }
.has-hero:not(.header-solid) .site-header__menu { padding-top: 13px; }
.has-hero:not(.header-solid) .site-header__actions { padding-top: 0; }
.has-hero:not(.header-solid) .site-header__logo { opacity: 0; pointer-events: none; visibility: hidden; }
.has-hero:not(.header-solid) .site-header__hero-nav { display: block; }
.has-hero:not(.header-solid) .header-instagram { color: var(--cream); }
/* Hamburger colours (INSPIRE Mobile Nav sets these inline, so !important). */
.site-header .imn { --imn-bar: var(--green); --imn-bar-open: var(--cream); }
.has-hero:not(.header-solid) .site-header .imn { --imn-bar: var(--cream) !important; } /* !important: INSPIRE Mobile Nav sets these inline */
.site-header .imn-hamburger { padding: 4px 0; }

/* Header buttons */
.site-header__actions .btn { padding-left: 0; padding-right: 0; }
.site-header__actions .btn--book { width: 150px; }
.site-header__actions .btn--events { width: 152px; min-width: 0; }
@media (min-width: 901px) {
	/* Header (desktop): one layout on every page and in both homepage states, so nothing moves when the homepage header turns cream on scroll. Over the hero the header is transparent and the logo hidden, but the controls sit in the same place. */
	.site-header__inner,
	.has-hero:not(.header-solid) .site-header__inner {
		padding: 50px clamp(24px, 2.64vw, 38px) 0;
		height: calc(var(--header-h) - 1px);
	}
	.site-header__menu,
	.has-hero:not(.header-solid) .site-header__menu {
		padding-top: 0;
		margin-top: -20px;
	}
	.site-header__actions,
	.has-hero:not(.header-solid) .site-header__actions {
		padding-top: 5px;
	}
	.site-header__hero-nav { top: 59px; } /* link text centred on the buttons (55 + 38/2) */
}
@media (min-width: 901px) and (max-width: 1199px) {
	/* Hero links collide with the buttons below ~1200px; they are in the hamburger menu too. */
	.has-hero:not(.header-solid) .site-header__hero-nav { display: none; }
}

/* ==========================================================================
   Overlay menu
   ========================================================================== */

.imn .imn-overlay { padding: 100px 24px 60px; }
.imn .imn-menu-list { margin: 0; padding: 0; list-style: none; text-align: center; }
.imn .imn-menu-list > li > a {
	font-family: var(--font-display);
	font-size: clamp(30px, 2.8vw, 40px);
	letter-spacing: 0.03em;
	line-height: 1.32;
	text-transform: uppercase;
	text-decoration: none;
}
/* Menu item with CSS class "menu-button": Book a Table button in the overlay */
.imn .imn-menu-list > li.menu-button { margin-top: 48px; }
.imn .imn-menu-list > li.menu-button > a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 11px 24px;
	background: var(--bright);
	color: var(--green);
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
.imn .imn-menu-list > li.menu-button > a:hover { background: var(--cream); color: var(--green); }
/* Menu item with CSS class "menu-instagram": icon only */
.imn .imn-menu-list > li.menu-instagram { margin-top: 32px; }
.imn .imn-menu-list > li.menu-instagram > a {
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: var(--cream);
	-webkit-mask: url("images/icons/instagram-large.svg") center / contain no-repeat;
	mask: url("images/icons/instagram-large.svg") center / contain no-repeat;
}
.imn .imn-menu-list > li.menu-instagram > a:hover { background: var(--bright); }
/* Mobile overlay: menu from the top (not centred) on a 36px line pitch, then
   Book a table and Instagram, then the crest below them in the flow, so it is
   never covered. Gaps and crest scale with the screen height: on a full-height
   phone (896px) they match the design (menu at 120px, 200px crest); on shorter
   screens they shrink so the crest stays in view. The crest image still comes
   from the plugin setting. */
@media (max-width: 900px) {
	.imn.imn-has-bg-image .imn-overlay {
		flex-direction: column;
		justify-content: flex-start;
		padding: clamp(72px, 13.4vh, 120px) 24px 16px;
		background-image: var(--imn-overlay-tint);
	}
	.imn.imn-has-bg-image .imn-overlay::after {
		content: "";
		display: block;
		flex: none;
		width: clamp(110px, calc(37vh - 131px), 200px); /* 200px on an 896px-tall screen, 146px at 750px */
		aspect-ratio: 200 / 207;
		margin-top: clamp(24px, 6.9vh, 62px);
		background: var(--imn-bg-image) center / contain no-repeat;
	}
	.imn .imn-menu-list > li { display: flex; justify-content: center; } /* no extra line-box space around each link */
	.imn .imn-menu-list > li > a { line-height: 1.2; padding-top: 0; padding-bottom: 0; }
	.imn .imn-menu-list > li.menu-button { margin-top: clamp(24px, 4.5vh, 40px); }
	.imn .imn-menu-list > li.menu-instagram { margin-top: clamp(20px, 4.1vh, 37px); }
}

/* Short phones (e.g. 375x667): tighter gaps and a smaller crest so it fits */
@media (max-width: 900px) and (max-height: 700px) {
	.imn.imn-has-bg-image .imn-overlay { padding-top: 64px; }
	.imn.imn-has-bg-image .imn-overlay::after { width: 110px; margin-top: 20px; }
	.imn .imn-menu-list > li.menu-button { margin-top: 20px; }
	.imn .imn-menu-list > li.menu-instagram { margin-top: 16px; }
}

/* The crest behind the overlay menu is set in the INSPIRE Mobile Nav plugin
   (Settings > Mobile Nav > background image), not in the theme. */
/* Fallback overlay when the plugin is not active */
.imn-fallback { --imn-bar-w: 46px; --imn-bar-thickness: 1px; --imn-bar-gap: 6px; --imn-overlay-bg: var(--green); --imn-text: var(--cream); }
.imn-fallback .imn-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.imn-fallback .imn-hamburger {
	display: inline-flex;
	flex-direction: column;
	gap: var(--imn-bar-gap);
	width: var(--imn-bar-w);
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.imn-fallback .imn-bar { display: block; height: 1px; background: var(--imn-bar); }
.imn-fallback .imn-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--green);
	color: var(--cream);
}
.imn-fallback .imn-toggle:checked ~ .imn-overlay { display: flex; }
.imn-fallback .imn-toggle:checked + .imn-hamburger .imn-bar { background: var(--cream); }
.imn-fallback .imn-menu-list a { color: var(--cream); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.home-hero { position: relative; height: clamp(480px, 58.2vw, 100vh); overflow: hidden; background: var(--green); }
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.3); /* 30% desktop, 40% mobile */
	pointer-events: none;
}
.home-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__logo { position: absolute; z-index: 2; left: 50%; top: 41%; transform: translate(-50%, 0); width: min(325px, 72vw); margin: 0; }
.home-hero__logo img { width: 100%; height: auto; }

/* ==========================================================================
   Mobile header and fixed CTA bar
   ========================================================================== */

.mobile-cta-bar { display: none; }
@media (max-width: 900px) {
	.site-header__inner { grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); }
	.site-header__menu { padding-top: 0; }
	.site-header__logo { width: 132px; }
	/* 30px wide, thin bars ~3px apart */
	.site-header .imn { --imn-bar-w: 30px !important; --imn-bar-gap: 3px !important; } /* !important: INSPIRE Mobile Nav sets these inline */
	.home-hero::before { background: rgba(0, 0, 0, 0.4); }
	.site-header__actions,
	.site-header__hero-nav,
	.has-hero:not(.header-solid) .site-header__hero-nav {
		display: none;
	}
	.has-hero:not(.header-solid) .site-header__inner { padding-top: 0; height: calc(var(--header-h) - 1px); }
	.has-hero:not(.header-solid) .site-header__menu { padding-top: 0; }
	.home-hero { height: calc(100svh - var(--cta-bar-h)); min-height: 460px; }
	.home-hero__logo { top: 50%; transform: translate(-50%, -50%); }
	.mobile-cta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		grid-template-columns: 1fr 1fr;
		height: var(--cta-bar-h);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--green);
	}
	.mobile-cta-bar .btn { height: 100%; border: 0; }
	.mobile-cta-bar .btn--book { background: var(--bright); color: var(--green); }
	.mobile-cta-bar .btn--events { background: var(--green); color: var(--cream); }
	.mobile-cta-bar .btn:hover { background: var(--cream); color: var(--green); }
}

/* ==========================================================================
   Page layout
   ========================================================================== */

.site-main { display: block; }
.page-header { padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(20px, 3vw, 36px); text-align: center; }
.page-header__label {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.page-title { margin: 0; }
.page-title--left { text-align: left; }
/* Block content: constrained by default, wide/full on request. Kadence rows
   manage their own inner width, so they are left full width. */
.entry-content > * {
	max-width: calc(var(--content) + 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
.entry-content > .alignwide { max-width: calc(var(--wide) + 2 * var(--gutter)); }
/* Full-width groups keep the side gutter so their inner content never
   touches the screen edge; Kadence rows and covers manage their own. */
.entry-content > .alignfull,
.entry-content > .wp-block-group.has-background,
.entry-content > .wp-block-group.tg-section.is-layout-constrained {
	max-width: none;
} /* section groups set their own inner width */
.entry-content > .wp-block-kadence-rowlayout,
.entry-content > .kb-row-layout-wrap,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .tg-image-strip {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content > p:last-child { padding-bottom: clamp(40px, 6vw, 80px); }
.has-text-align-center { text-align: center; }
/* Gutenberg colour classes for the palette */
.has-green-background-color { background-color: var(--green); }
.has-cream-background-color { background-color: var(--cream); }
.has-bright-green-background-color { background-color: var(--bright); }
.has-sage-background-color { background-color: var(--sage); }
.has-stone-background-color { background-color: var(--stone); }
.has-stone-dark-background-color { background-color: var(--stone-dark); }
.has-green-color { color: var(--green); }
.has-cream-color { color: var(--cream); }
.has-ink-color { color: var(--ink); }
.has-gold-color { color: var(--gold); }

.page-header { padding-top: clamp(32px, 3.4vw, 49px); }
.tg-page-title { padding-top: clamp(32px, 3.4vw, 49px); }
.tg-page-title + .tg-section { padding-top: clamp(24px, 3vw, 43px); } /* Private Events: 67px from title to gallery */
@media (min-width: 1101px) {
	/* 194px (home) / 125px (Private Events) from the left, 38px from the right. Keep that position within a centred 1440px frame on wider screens, and scale it in proportion below 1440 (widths are % of the section's content box, which is the screen minus 2 x 2.64vw padding). */
	.entry-content .tg-section:not(.tg-dark):not(.tg-stone) > .tg-split:has(> .wp-block-column:last-child .wp-block-image) {
		max-width: min(1208px, 88.57%); /* 1208 / 1440 of the screen */
		margin-left: auto;
		margin-right: max(0px, calc((100% - 1364px) / 2)) !important; /* !important: core constrained layout forces auto margins with !important */
	}
}
@media (max-width: 781px) {
	/* Mobile body copy */
	.entry-content p { font-size: 16px; line-height: 1.3; }
}

/* ==========================================================================
   Section patterns
   ========================================================================== */

.tg-section { padding-top: clamp(40px, 5.2vw, 75px); padding-bottom: clamp(40px, 5.2vw, 75px); } /* mostly 45-75px */
/* Intro: big centred heading + narrow body copy */
.tg-intro { text-align: center; }
.tg-intro h1, .tg-intro h2 { max-width: 1130px; margin: 0 auto 32px; font-size: clamp(30px, 3.75vw, 54px); letter-spacing: 0; } /* 54px desktop, 30px mobile */
.tg-intro p { max-width: 729px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.3; }
/* Image strip: four portrait images bleeding off both edges */
.tg-image-strip { overflow: hidden; }
.tg-image-strip .wp-block-gallery,
.tg-image-strip.wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px; /* four 458x610 photos with 8px gaps (1856px) starting 244px left of a 1440 frame */
	width: 128.9%;
	margin-left: -16.95%;
}
.tg-image-strip figure.wp-block-image { flex: 1 1 0; margin: 0; aspect-ratio: 458 / 610; }
.tg-image-strip figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
	.tg-image-strip .wp-block-gallery,
	.tg-image-strip.wp-block-gallery {
		width: calc(4 * 62.8vw + 36px);
		margin-left: 5.8vw;
		gap: 12px;
	} /* 260x346 photos, 12px apart, starting 24px in */
}
/* Auto-scrolling strip (class "tg-image-strip--marquee" on the strip group). js/site.js repeats the photos, sets --marquee-shift (one full set + gap) and --marquee-duration, then adds .is-marquee. Pauses on hover; no motion for reduced-motion users or if the script does not run. */
.tg-image-strip--marquee.is-marquee .wp-block-gallery {
	width: max-content;
	animation: tg-marquee var(--marquee-duration, 60s) linear infinite;
	will-change: transform;
}
.tg-image-strip--marquee.is-marquee figure.wp-block-image { flex: 0 0 31.806vw; width: 31.806vw; }
.tg-image-strip--marquee.is-marquee:hover .wp-block-gallery { animation-play-state: paused; }
@keyframes tg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
@media (max-width: 700px) {
	.tg-image-strip--marquee.is-marquee figure.wp-block-image { flex-basis: 62.8vw; width: 62.8vw; }
}
@media (prefers-reduced-motion: reduce) {
	.tg-image-strip--marquee.is-marquee .wp-block-gallery { animation: none; }
}
/* Split: text one side, image the other */
.tg-split.wp-block-columns { gap: clamp(32px, 7vw, 90px); align-items: center; }
.tg-split h2 { margin-bottom: 18px; }
/* Homepage Live Music (dark): 149px between image and text at 1440 */
.tg-dark .tg-split.wp-block-columns { gap: clamp(32px, 10.35vw, 149px); }
/* Private Events Gluepot: small heading */
.tg-split--landscape h2 { font-size: 20px; letter-spacing: 0.03em; }
.tg-split p { max-width: 400px; font-size: 18px; line-height: 1.3; }
/* 674x654. Splits on dark/stone backgrounds (live music poster, 424x539) keep the image's own proportions. */
/* Note: don't reset these with aspect-ratio:auto — that drops the ratio from
   the width/height attributes and WordPress's lazy-image rule
   (contain-intrinsic-size: 3000px 1500px) then stretches the image to 1500px. */
.tg-split .wp-block-image img { width: 100%; }
.tg-split:not(.tg-dark .tg-split, .tg-stone .tg-split) .wp-block-image img { aspect-ratio: 674 / 654; object-fit: cover; }
/* Private Events Glue Pot photo: landscape */
.tg-section .tg-split.tg-split--landscape .wp-block-image img { aspect-ratio: 1.23; } /* outranks the :not() rule above */
/* Dark green section */
.tg-dark { background: var(--green); color: var(--cream); }
.tg-dark h1, .tg-dark h2, .tg-dark h3, .tg-dark h4 { color: var(--cream); }
.tg-dark .btn--light,
.tg-dark .is-style-light .wp-block-button__link {
	border-color: var(--cream);
}
/* Stone panel (e.g. "Explore our pubs") */
.tg-stone { background: var(--stone); }
/* Sub-navigation tabs (What's On / Live Sport): printed by the theme, centred at the top of both pages. */
.page-tabs-nav { padding: clamp(32px, 3.4vw, 49px) var(--gutter) 0; text-align: center; }
.page-tabs-nav + .page-header,
.page-tabs-nav + .page-entry .page-header,
.page-tabs-nav + .whats-on__intro .page-title {
	padding-top: clamp(32px, 4.6vw, 66px);
}
/* Tabs now come from the theme; hide any copy of the old tabs block left in page content */
.entry-content > .page-tabs { display: none; }
.page-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(25px, 2.8vw, 40px);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-size: clamp(14px, 1.4vw, 20px); /* 20px desktop, 14px mobile */
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
}
.page-tabs a { text-decoration: none; }
.page-tabs a[aria-current="page"],
.page-tabs .is-current a,
.page-tabs a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Menu buttons grid on the Menus page */
.tg-menu-buttons.wp-block-buttons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 27px; /* 225x42 buttons in a 730px grid */
	max-width: 730px;
}
.tg-menu-buttons .wp-block-button { width: 100%; }
.tg-menu-buttons .wp-block-button__link { width: 100%; min-height: 42px; background: var(--cream); color: var(--green); }
.tg-menu-buttons .wp-block-button__link:hover,
.tg-menu-buttons .is-active .wp-block-button__link {
	background: var(--green);
	color: var(--cream);
}
@media (max-width: 600px) {
	.tg-menu-buttons.wp-block-buttons { grid-template-columns: 1fr 1fr; gap: 12px; }
	.tg-menu-buttons .wp-block-button__link { min-height: 38px; }
}
/* Instagram tiles ("Stay up to date") */
.tg-insta-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin-bottom: 39px;
}
.tg-insta-header h2 { margin: 0; }
.tg-insta-header a {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-underline-offset: 3px;
}
.tg-insta-grid.wp-block-gallery { gap: 22px; }
.tg-insta-grid figure.wp-block-image img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 781px) {
	/* centred heading, link below, 2x2 tiles 12px apart */
	.tg-insta-header { flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 30px; }
	.tg-insta-header a { font-size: 11px; }
	.tg-insta-grid.wp-block-gallery { gap: 12px; }
	.wp-block-gallery.has-nested-images.is-layout-flex.tg-insta-grid figure.wp-block-image:not(#individual-image) {
		width: calc(50% - 6px);
		flex-grow: 0;
	}
}

/* Weddings image row breaks out of the dark section's side padding */
.tg-dark > .tg-image-strip { max-width: none; width: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
@media (min-width: 782px) {

	/* Gluepot: 154px from the photo strip to the photo */
	.entry-content > .tg-image-strip + .tg-section:has(> .tg-split) { padding-top: clamp(48px, 10.7vw, 154px); }
}
.tg-image-strip--marquee.is-marquee:focus-within .wp-block-gallery { animation-play-state: paused; }
@media (max-width: 781px) {
	/* Copy blocks: 16px from a heading to its text */
	.tg-split h2, .tg-split h3 { margin-bottom: 0; }
	.tg-split h2 + p, .tg-split h3 + p { margin-top: 16px; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Homepage intro: the 54px heading runs 1129px wide so it sits on two lines */
.entry-content > .tg-intro { max-width: calc(1130px + 2 * var(--gutter)); }
@media (max-width: 781px) {
	/* Homepage "Stay up to date" header as built (columns + text link): centred on mobile */
	.wp-block-columns:has(+ .tg-insta-grid) { gap: 12px; margin-bottom: 30px; text-align: center; }
	.wp-block-columns:has(+ .tg-insta-grid) h2 { margin: 0; }
	.wp-block-columns:has(+ .tg-insta-grid) .wp-block-buttons { justify-content: center; }
}
@media (min-width: 782px) {
	/* Stay up to date: 1273px wide (82px margins at 1440), 54px above the newsletter */
	.entry-content > .alignwide:has(> .tg-insta-grid) {
		max-width: calc(1276px + 2 * var(--gutter));
		padding-bottom: clamp(40px, 3.75vw, 54px);
	}
	/* Live music: 424x539 poster, 50px from the top of the green band */
	.home .tg-dark.tg-section { padding-top: 50px; }
	.home .tg-dark > .tg-split > .wp-block-column:first-child {
		flex: 0 0 424px !important; /* !important: beats the column width set inline by the block editor */
		margin-left: 4px;
	}
	.home .tg-dark > .tg-split .wp-block-image img { width: 424px; aspect-ratio: 424 / 539; object-fit: cover; }
	/* Stay up to date: 57px above the heading */
	.home .tg-section:has(> .wp-block-gallery) { padding-top: 57px; }
}
@media (max-width: 781px) {
	/* Home intro: copy 20px under the heading on a 330px measure */
	.home .tg-intro :is(h1, h2) { margin-bottom: 0; }
	.home .tg-intro :is(h1, h2) + p { margin-top: 20px; }
	.home .tg-intro p { max-width: 330px; margin-left: auto; margin-right: auto; }
	.home .tg-intro p + p { margin-top: 21px; }
	/* The Gluepot: photo 22px under the button */
	.home .tg-section:not(.tg-dark) > .tg-split { gap: 22px; }
	/* Live music: 38px / 64px band padding, 366x466 poster, 50px to the heading */
	.home .tg-dark.tg-section { padding-top: 38px; padding-bottom: 64px; }
	.home .tg-dark > .tg-split { gap: 50px; }
	.home .tg-dark > .tg-split .wp-block-image img { aspect-ratio: 366 / 466; object-fit: cover; }
	/* Stay up to date: link 12px under the heading, photos 29px below, 25px to the newsletter */
	.home .tg-section:has(> .wp-block-gallery) { padding-bottom: 25px; }
	.home .tg-section:has(> .wp-block-gallery) > .wp-block-columns { gap: 0; margin-bottom: 16px; }
	.home .tg-section:has(> .wp-block-gallery) > .wp-block-gallery { margin-top: 16px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.wp-block-details.is-style-faq { border-bottom: 1px solid var(--rule); padding: 0; font-size: 15px; }
.wp-block-details.is-style-faq summary {
	position: relative;
	list-style: none;
	padding: 28px 40px 28px 0;
	font-family: var(--font-display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}
.wp-block-details.is-style-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-faq summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background: currentColor;
	-webkit-mask: url("images/icons/faq-plus.svg") center / contain no-repeat;
	mask: url("images/icons/faq-plus.svg") center / contain no-repeat;
}
.wp-block-details.is-style-faq[open] summary::after {
	-webkit-mask-image: url("images/icons/faq-minus.svg");
	mask-image: url("images/icons/faq-minus.svg");
}
.wp-block-details.is-style-faq > :not(summary) { margin: -12px 0 28px; max-width: 760px; font-size: 16px; line-height: 1.4; }
/* 920px column */
.entry-content > .tg-faq-group,
.entry-content > .tg-faq-intro {
	max-width: calc(920px + 2 * var(--gutter));
}
.tg-faq-group { margin-top: 72px; }
.tg-faq-group > .is-style-label { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.tg-faq-intro { margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.3; }
.tg-faq-intro p { max-width: 766px; margin-left: auto; margin-right: auto; }

/* question Benguiat 20/130%, 83px per closed row (16px, 65px on mobile) */
.wp-block-details.is-style-faq summary { font-size: 20px; line-height: 1.3; padding-top: 28px; padding-bottom: 28px; }
.tg-faq-group:last-child { padding-bottom: clamp(48px, 12.2vw, 176px); }
@media (max-width: 781px) {
	/* 338px text box beside the +, 3% tracking, so short questions stay on one line */
	.wp-block-details.is-style-faq summary {
		font-size: 16px;
		letter-spacing: 0.03em;
		padding-top: 21px;
		padding-bottom: 21px;
		padding-right: 26px;
	}
	.wp-block-details.is-style-faq summary::after { right: 0; }
	.wp-block-details.is-style-faq > :not(summary) { font-size: 15px; max-width: 310px; }
	.tg-faq-group:last-child { padding-bottom: 24px; }
}
@media (min-width: 782px) {

	.page-id-26 .page-header { padding-top: 39px; padding-bottom: 24px; } /* FAQs: title 39px under the header, intro 24px below */
}
/* FAQ rows sit directly on each other */
.tg-faq-group > .wp-block-details { margin-top: 0; margin-block-start: 0; }
@media (max-width: 781px) {
	.page-id-26 .page-header { padding-bottom: 33px; }
	.tg-faq-intro { margin-bottom: 0; }
	.tg-faq-group { margin-top: 48px; }
	.tg-faq-intro + .tg-faq-group { margin-top: 48px; }
	.tg-faq-group > .is-style-label { padding-bottom: 17px; }
}

/* ==========================================================================
   What's On
   ========================================================================== */

/* What's On runs on a 1139px column */
.whats-on__intro > * { max-width: calc(1139px + 2 * var(--gutter)); }
.whats-on__intro .page-title { padding-top: 40px; margin-bottom: 40px; }
.featured-event {
	display: grid;
	grid-template-columns: 560fr 579fr;
	max-width: calc(1139px + 2 * var(--gutter));
	margin: 0 auto 40px;
	padding: 0 var(--gutter);
}
.featured-event__image img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.featured-event__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 4.4vw, 64px);
	background: var(--green);
	color: var(--cream);
}
.featured-event__label {
	align-self: flex-start;
	margin: 0 0 22px;
	padding: 6px 12px;
	background: var(--bright);
	color: var(--green);
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.featured-event__title { color: var(--cream); font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 18px; }
.featured-event__text { font-size: 18px; line-height: 1.4; }
.featured-event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; }
.featured-event__actions .text-link { color: var(--cream); font-size: 10px; letter-spacing: 0.04em; }
.coming-up { max-width: calc(1139px + 2 * var(--gutter)); margin: 0 auto clamp(40px, 5.2vw, 75px); padding: 0 var(--gutter); }
/* 1px divider 40px below the cards */
.coming-up::after { content: ""; display: block; height: 1px; margin-top: 40px; background: var(--rule); }
.coming-up__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--green);
	background: transparent;
	color: var(--green);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.carousel-arrow:not(:disabled):hover { background: var(--green); color: var(--cream); }
.coming-up__track {
	position: relative; /* contains the cards' absolutely-positioned screen-reader text */
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.coming-up__track::-webkit-scrollbar { display: none; }
.coming-up__track > .event-card {
	flex: 0 0 calc((100% - 2 * 24px) / 3); /* three cards per view */
	scroll-snap-align: start;
}
/* Event card */
.event-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.event-card__image { display: block; width: 100%; margin-bottom: 18px; background: var(--stone); }
.event-card__image img { width: 100%; aspect-ratio: 1.21; object-fit: cover; }
.event-card__date {
	margin: 0 0 10px;
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(33, 56, 26, 0.75);
}
.event-card__title { font-size: clamp(22px, 1.95vw, 28px); margin: 0 0 12px; }
.event-card__title a { text-decoration: none; }
.event-card__title a:hover { text-decoration: underline; }
.event-card__excerpt { font-size: 16px; line-height: 1.4; }
.event-card__excerpt p { margin: 0 0 14px; }
/* Book now and View details side by side */
.event-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin-top: auto; }
.event-card__actions .text-link { letter-spacing: 0.04em; }
.event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 48px 24px;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto clamp(48px, 7vw, 96px);
	padding: 0 var(--gutter);
}
/* Live music section from page content (after the More block) */
.whats-on__live { padding-top: 0; }
/* Live Music links (#live-music-listings) land on the stone section flush under
   the header, without the 16px gap the page adds for other jump links. */
#live-music-listings { scroll-margin-top: -16px; }
/* Live music listing */
.gig-list { max-width: calc(1139px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 5.2vw, 75px) var(--gutter); }
.gig-list__month { margin: 0 0 20px; font-size: clamp(24px, 2.1vw, 30px); }
/* Desktop: no rules between rows, one closing rule */
.gig-list__items { margin: 0; padding: 0 0 22px; list-style: none; border-bottom: 1px solid var(--rule); }
.gig {
	display: grid;
	grid-template-columns: 328fr 332fr 215fr 215fr;
	gap: 4px 15px;
	align-items: baseline;
	padding: 7px 0;
	font-size: 20px;
	line-height: 1.5;
}
.gig[hidden] { display: none; }
.gig__title { grid-column: 1; }
.gig__when { display: contents; }
.gig__date { grid-column: 2; }
.gig__time { grid-column: 3; }
.gig__sep { display: none; }
.gig__genre { grid-column: 4; text-align: right; }
.gig:focus { outline: none; }
.gig-list__more { margin-top: 18px; }
.gig-list__empty { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.gig-list__months {
	display: flex;
	justify-content: space-between;
	margin-top: 46px;
	font-family: var(--font-display);
	font-size: clamp(18px, 2.1vw, 30px);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.gig-list__months a { text-decoration: none; }
.gig-list__months a:hover { text-decoration: underline; }
.gig-list__note { margin: 32px 0 0; font-size: 15px; font-style: italic; line-height: 1.45; }
@media (max-width: 760px) {
	.featured-event { grid-template-columns: 1fr; }
	.featured-event__image img { min-height: 0; aspect-ratio: 1.42; }
	/* Mobile: rules between every row */
	.gig-list__items { padding-bottom: 0; border-top: 1px solid var(--rule); border-bottom: 0; }
	.gig { grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--rule); line-height: 1.3; }
	.gig__title { grid-column: 1; grid-row: 1; }
	.gig__genre { grid-column: 2; grid-row: 1; }
	.gig__when { display: block; grid-column: 1 / -1; grid-row: 2; }
	.gig__sep { display: inline; margin: 0 4px; }
}

/* What's On live music on stone */
.whats-on__live .tg-stone { padding-top: clamp(40px, 3.1vw, 45px); padding-bottom: clamp(40px, 3.1vw, 45px); }
@media (min-width: 782px) {
	.whats-on__live .tg-stone > .tg-split.wp-block-columns { max-width: 1310px; gap: clamp(32px, 8.5vw, 122px); }
	.whats-on__live .tg-stone > .tg-split > .wp-block-column:first-child {
		flex-basis: 38.4% !important; /* !important: beats the column width set inline by the block editor */
	}
	.whats-on__live .tg-split p { max-width: 435px; }
}
@media (min-width: 761px) {

	.coming-up__track { margin-right: calc((100% - 100vw) / 2); padding-right: calc((100vw - 100%) / 2); }
}
@media (max-width: 760px) {
	/* Mobile cards: underlined serif "More details" link above a full Book now button */
	.event-card__actions { flex-direction: column-reverse; align-items: flex-start; }
	.event-card__actions .text-link {
		min-height: 0;
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}
	/* Gig list: names in capitals, genre in italic set in from the edge */
	.gig__title { text-transform: uppercase; letter-spacing: 0.02em; }
	.gig__genre { font-style: italic; padding-right: 11px; }
}
/* Cream "Book a table" on the dark featured card goes bright green on hover */
.featured-event__actions .btn--light:hover,
.featured-event__actions .btn--light:focus-visible {
	background: var(--bright);
	border-color: var(--bright);
	color: var(--green);
}
@media (min-width: 1101px) {
	/* Coming up: always show part of the next card. Visible width = track width (100%) plus the bleed to the right edge ((100vw - 100%) / 2); 3.35 cards fit on desktop, 2.35 on tablet. */
	.coming-up__track > .event-card { flex-basis: min(364px, calc((100% + (100vw - 100%) / 2 - 3 * 24px) / 3.35)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
	.coming-up__track > .event-card { flex-basis: calc((100% + (100vw - 100%) / 2 - 2 * 24px) / 2.35); }
}
.carousel-arrow { padding: 0 0 2px; } /* the ‹ › glyphs sit low in the font */
@media (min-width: 761px) {
	/* What's On featured event: The image fills the row the panel sets (min 440px) rather than making the row as tall as itself. */
	.featured-event__image { position: relative; min-height: 440px; }
	.featured-event__image img { position: absolute; inset: 0; height: 100%; min-height: 0; }
	.featured-event { margin-bottom: 28px; }
	.featured-event__text { max-width: 420px; }
	.featured-event__actions { margin-top: 20px; }
	.coming-up__header { margin-bottom: 26px; }
	.event-card__image { margin-bottom: 14px; }
	.event-card__date { margin-bottom: 13px; }
	.event-card__title { margin-bottom: 14px; }
	.event-card__excerpt p { margin-bottom: 20px; }
	/* Live music block: poster at x81; copy 163px below the poster top, two
	   paragraphs and two italic notes 6px apart, button 61px below */
	.page-template-tpl_pagewhatson .tg-stone > .tg-split > .wp-block-column:first-child { margin-left: 16px; }
	.page-template-tpl_pagewhatson .tg-stone > .tg-split > .wp-block-column:last-child { margin-top: 44px; }
	.page-template-tpl_pagewhatson .tg-stone h2 + p { margin-top: 18px; }
	.page-template-tpl_pagewhatson .tg-stone p.tg-tight + p.tg-tight { margin-top: 6px; }
	.page-template-tpl_pagewhatson .tg-stone p.tg-tight { max-width: 435px; }
	.page-template-tpl_pagewhatson .tg-stone .wp-block-buttons { margin-top: 61px; }
	/* Listing: 42px under the band, dark closing rule, 60px to the newsletter;
	   the notes live in the block above on desktop */
	.gig-list { padding-top: 42px; padding-bottom: 60px; }
	.gig-list__items { border-bottom-color: var(--green); }
	.gig-list__note { display: none; }
}
@media (max-width: 760px) {
	.page-template-tpl_pagewhatson .tg-stone p.tg-tight:has(> em:only-child) { display: none; }
	.gig-list__note { font-size: 16px; line-height: 1.3; }
	.page-tabs-nav + .whats-on__intro .page-title {
		padding-top: 24px;
		padding-right: calc(100% - 249px - var(--gutter));
		margin-bottom: 11px;
	}
	/* Featured event panel */
	.featured-event__panel { padding: 32px 24px 33px; }
	.featured-event__label { padding-top: 4px; padding-bottom: 4px; margin-bottom: 20px; }
	.featured-event__title { margin-bottom: 15px; }
	.featured-event__actions { margin-top: 24px; }
	/* Coming up cards: 300x247 photos 16px apart */
	.coming-up__header { margin-bottom: 31px; }
	.coming-up__track { gap: 16px; }
	.coming-up__track > .event-card { flex-basis: 300px; }
	.event-card__image img { aspect-ratio: 300 / 247; }
	.event-card__image { margin-bottom: 30px; }
	.event-card__date { margin-bottom: 20px; }
	.event-card__excerpt, .event-card__excerpt p { font-size: 15px; line-height: 1.4; }
	.event-card__excerpt p { margin-bottom: 0; }
	.event-card__actions { margin-top: 23px; gap: 17px; }
	/* Live music: 335x419 poster 26px into the band, 26px one-line heading */
	.page-template-tpl_pagewhatson .tg-stone { padding-top: 26px; padding-bottom: 28px; }
	.page-template-tpl_pagewhatson .tg-stone > .tg-split { gap: 33px; }
	.page-template-tpl_pagewhatson .tg-stone .wp-block-image img {
		width: 335px;
		height: 419px;
		object-fit: cover;
		margin: 0 auto;
		display: block;
	}
	.page-template-tpl_pagewhatson .tg-stone h2 { font-size: 26px; }
	.page-template-tpl_pagewhatson .tg-stone h2 + p { margin-top: 11px; }
	.page-template-tpl_pagewhatson .tg-stone p.tg-tight { font-size: 15px; line-height: 1.3; }
	.page-template-tpl_pagewhatson .tg-stone p.tg-tight + p.tg-tight { margin-top: 0; }
	.page-template-tpl_pagewhatson .tg-stone .wp-block-buttons { margin-top: 20px; }
	/* Listing: 16px rows, See more / months / notes spacing */
	.gig-list { padding-top: 32px; padding-bottom: 30px; }
	.gig { font-size: 16px; }
	.gig-list__more { margin-top: 22px; }
	.gig-list__months { margin-top: 25px; }
	.gig-list__note { margin-top: 26px; }
	/* Mobile: space below the first section (What's On, Live Sport, Private Events) */
	.featured-event { margin-bottom: 78px; }
}

/* ==========================================================================
   Live Sport
   ========================================================================== */

.fanzo-feed { font-family: var(--font-body); }
/* Divider colour (no plugin setting; extra class so it outranks the plugin's default) */
.tg-section .fanzo-feed { --fanzo-border: var(--rule); }
/* Desktop: one 60px row: date | competition | teams | More info */
.fanzo-feed .fanzo-feed__item {
	display: grid;
	grid-template-columns: 184px 30px 220px 1fr auto; /* icon at 184px, name at 214px, teams at 434px */
	grid-template-areas: "time logo comp teams book";
	gap: 2px 0;
	align-items: center;
	min-height: 60px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
}
.fanzo-feed__teams { grid-area: teams; display: flex; align-items: center; gap: 10px; }
.fanzo-feed .fanzo-feed__time { grid-area: time; flex: none; font-size: 14px; color: rgba(33, 56, 26, 0.7); }
.fanzo-feed .fanzo-feed__competition {
	grid-area: comp;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	font-size: 13px;
	color: rgba(33, 56, 26, 0.7);
}
a.fanzo-feed__book { grid-area: book; }
.fanzo-feed p.fanzo-feed__title,
.fanzo-feed .fanzo-feed__title {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: normal;
}
.fanzo-feed__comp-logo {
	grid-area: logo;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	object-fit: contain;
	background: var(--stone-dark);
}
.fanzo-feed .fanzo-feed__badge { display: block; width: 24px; height: 24px; object-fit: contain; }
.fanzo-feed__channel-logo,
.fanzo-feed__flag {
	display: none;
}
/* "More info" and month buttons: only what the plugin settings don't cover */
.fanzo-feed a.fanzo-feed__book { padding-left: 18px; padding-right: 18px; line-height: 1.15; }
.fanzo-feed__month-button { letter-spacing: 0.06em; font-weight: 500; } /* Wedding Gothic "Regular" is weight 500 in the Adobe kit; buttons don't inherit weight */
@media (max-width: 600px) {
	/* Mobile: teams, then "date · competition" on one line, small button right */
	.fanzo-feed .fanzo-feed__item {
		grid-template-columns: max-content minmax(0, 1fr) auto;
		grid-template-areas:
			"teams teams book"
			"time  comp  book";
		gap: 4px 6px;
	}
	.fanzo-feed .fanzo-feed__teams,
	.fanzo-feed .fanzo-feed__competition {
		min-width: 0;
	}
	.fanzo-feed .fanzo-feed__competition { gap: 6px; white-space: normal; }
	.fanzo-feed .fanzo-feed__title { white-space: normal; }
	.fanzo-feed .fanzo-feed__badge,
	.fanzo-feed .fanzo-feed__comp-logo {
		display: none;
	}
	.fanzo-feed__competition::before { content: "\00B7"; margin-right: 0; }
	.fanzo-feed a.fanzo-feed__book { min-height: 38px; align-items: center; }
	/* Undo the plugin's own mobile rules, which centre the teams and hide the competition and button */
	.fanzo-feed .fanzo-feed__time { flex: none; text-align: left; font-size: 14px; }
	.fanzo-feed .fanzo-feed__teams { order: 0; flex: none; justify-content: flex-start; }
	.fanzo-feed .fanzo-feed__teams .fanzo-feed__title { font-size: 14px; }
	.fanzo-feed .fanzo-feed__competition { display: flex; font-size: 14px; }
	.fanzo-feed a.fanzo-feed__book { display: inline-flex; margin-left: 0; }
}

/* Dark CTA (Live Sport): button sits right of the intro text on desktop */
.tg-cta-row.wp-block-columns { align-items: center; gap: 24px; margin-bottom: 36px; }
.tg-cta-row p { max-width: 554px; margin: 0; font-size: 18px; line-height: 1.3; }
.tg-cta-row .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) {
	.tg-cta-row .wp-block-buttons { justify-content: flex-start; }
}
/* Live Sport: heading, intro and fixtures on the 1139px What's On column */
.entry-content .tg-section:has(> .fanzo-feed) > * { max-width: 1139px; }
/* Live Sport "Book a private space": full-width photo */
.tg-dark:has(> .tg-cta-row) > .wp-block-image { width: 100%; }
.tg-dark:has(> .tg-cta-row) > .wp-block-image img { width: 100%; height: auto; aspect-ratio: 1196 / 471; object-fit: cover; }
@media (max-width: 781px) {
	.tg-dark:has(> .tg-cta-row) > .wp-block-image img { aspect-ratio: 366 / 287; }
}

/* Fixture button: Wedding Gothic 10px capitals (the plugin sets the serif) */
.fanzo-feed a.fanzo-feed__book {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.fanzo-feed .fanzo-feed__meta { font-size: 14px; } /* "Last updated" */
@media (max-width: 781px) {
	.fanzo-feed .fanzo-feed__meta { font-size: 12px; } /* 12px mobile */
}
/* Fanzo month tabs: the plugin's own padding loads after the theme and its
   "normal" line-height sits the capitals lower, so lift them 1px (height unchanged). */
.fanzo-feed .fanzo-feed__month-button { padding-top: 11px; padding-bottom: 13px; }
/* Live Sport: a rule under every fixture, including the month's last day
   (the plugin removes it), and 25px from the month tabs to the first row. */
.fanzo-feed .fanzo-feed__day:last-child .fanzo-feed__item { border-bottom: 1px solid var(--fanzo-border); }
.fanzo-feed .fanzo-feed__month-panel.is-active { padding-top: 25px; }
@media (min-width: 782px) {
	/* Title and intro 46px under the tabs; intro column from x653, 575px wide */
	.entry-content > .tg-section:has(.fanzo-feed) {
		padding-top: 46px;
		padding-bottom: 177px;
	}
	.page-id-21 .tg-heading-intro > .wp-block-column:last-child { flex: 0 0 calc(100% - 502px); }
	.page-id-21 .tg-heading-intro > .wp-block-column:last-child p { max-width: 575px; }
	/* "Why not book a private space?" band: 68px / 52px padding, 14px under the heading */
	.page-id-21 .entry-content > .tg-dark { padding-top: 68px; padding-bottom: 52px; }
	.page-id-21 .tg-dark .tg-cta-row { margin-top: 14px; }
	.page-id-21 .tg-dark .tg-cta-row .wp-block-buttons { margin-right: 16px; }
}
/* Intro: one paragraph on desktop, two on mobile */
.tg-para-break { display: inline; }
@media (max-width: 760px) {
	.tg-para-break { display: block; height: 20.8px; }
	.page-id-21 .tg-heading-intro { gap: 13px; }
	/* Fixtures: match title 14px, then date/time and competition at 16px, full colour */
	.fanzo-feed .fanzo-feed__teams .fanzo-feed__title { font-size: 14px; }
	.fanzo-feed .fanzo-feed__time,
	.fanzo-feed .fanzo-feed__competition {
		font-size: 16px;
		color: var(--green);
	}
	.fanzo-feed .fanzo-feed__item[hidden], .fanzo-feed .fanzo-feed__day[hidden] { display: none; }
	.fanzo-feed__more { display: block; margin-top: 22px; }
	/* "Last updated" sits on the See more line, right-aligned */
	.fanzo-feed .fanzo-feed__meta { text-align: right; }
	.fanzo-feed:has(.fanzo-feed__month-panel.is-active.has-more) .fanzo-feed__meta { width: fit-content; margin-top: -19px; margin-left: auto; } /* only as wide as its text, so it does not cover "See more" */
	/* "Why not book a private space?" band */
	.page-id-21 .entry-content > .tg-dark { padding-top: 48px; padding-bottom: 38px; }
	.page-id-21 .tg-dark .tg-cta-row { margin-top: 5px; margin-bottom: 0; gap: 23px; }
	.page-id-21 .tg-dark .wp-block-image { margin-top: 23px; }
	.entry-content > .tg-section:has(.fanzo-feed) { padding-bottom: 17px; }
}
@media (max-width: 781px) {
	/* Live Sport: title and intro 24px under the tabs on mobile */
	.entry-content > .tg-section:has(.fanzo-feed) { padding-top: 24px; }
}
@media (max-width: 600px) {
	/* Live Sport rows on mobile. The visible label is drawn by ::after; the original "More info" text stays for screen readers. */
	.fanzo-feed .fanzo-feed__time,
	.fanzo-feed .fanzo-feed__competition {
		line-height: 1.3;
	}
	.fanzo-feed .fanzo-feed__teams { line-height: 1.2; }
	.fanzo-feed a.fanzo-feed__book {
		width: 62px;
		padding-left: 0;
		padding-right: 0;
		justify-content: center;
		font-size: 0;
		letter-spacing: 0;
	}
	.fanzo-feed a.fanzo-feed__book::after { content: "Info"; font-size: 10px; letter-spacing: 0.04em; }
}

/* ==========================================================================
   Kadence post carousel cards
   ========================================================================== */

.grid-subheading { margin: 4px 0 8px; font-size: 15px; }
.spaces-card-button { margin-top: 12px; }
.kb-posts .entry-title,
.kt-blocks-post-grid-item .entry-title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Single event / room
   ========================================================================== */

.event-single {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
}
.event-single__image img { width: 100%; height: auto; }
.event-single__date {
	margin: 0 0 14px;
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.event-single__title { margin-bottom: 14px; }
.event-single__genre { font-style: italic; }
.event-single__content > * { max-width: none; padding: 0; margin-left: 0; }
.event-single__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
@media (max-width: 760px) {
	.event-single { grid-template-columns: 1fr; }
}
.adjacent-nav {
	display: flex;
	justify-content: space-between;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(48px, 7vw, 96px);
	font-family: var(--font-display);
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.adjacent-nav a { text-decoration: none; }
.adjacent-nav a:hover { text-decoration: underline; }
.adjacent-nav__next { margin-left: auto; }
/* Blog list */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 48px 24px;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(48px, 7vw, 96px);
}
.post-list__image img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; margin-bottom: 16px; }
.post-list__date {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.post-list__title { font-size: 20px; }
.post-list__title a { text-decoration: none; }
.pagination { text-align: center; padding-bottom: 64px; }

/* ==========================================================================
   Newsletter band and footer
   ========================================================================== */

.newsletter-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 64px var(--gutter);
	background: var(--sage);
	color: var(--green);
	text-align: center;
}
.newsletter-bar__heading { margin: 0; font-size: clamp(24px, 2.8vw, 40px); }
.site-footer {
	background: var(--stone);
	color: var(--ink);
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	min-height: 224px;
	padding: 48px clamp(20px, 2.9vw, 42px) 48px clamp(20px, 4.9vw, 70px); /* 70px left, 42px right */
}
.site-footer__left { display: flex; gap: 32px; align-items: flex-start; }
.site-footer__bcorp { width: 68px; height: auto; }
.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu li + li { margin-top: 6px; }
.site-footer__group { align-self: center; justify-self: center; display: block; }
.site-footer__ardent { width: 240px; height: auto; }
.site-footer__agp { display: none; width: 45px; height: auto; }
.site-footer__right { justify-self: end; text-align: right; padding-top: 13px; }
.site-footer__address { line-height: 1.95; }
.social-links { display: flex; justify-content: flex-end; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.social-links a { display: inline-flex; width: 16px; height: 16px; color: var(--ink); }
.social-links a:hover { color: var(--sage); }
.social-links svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding: 56px 20px 48px; text-align: center; }
	.site-footer__left { display: contents; }
	.site-footer__group { order: 1; }
	.site-footer__right { order: 2; justify-self: center; text-align: center; padding-top: 0; }
	.site-footer__nav { order: 3; }
	.site-footer__bcorp { order: 4; width: 48px; }
	.site-footer__ardent { display: none; }
	.site-footer__agp { display: block; }
	.social-links { justify-content: center; }
}

@media (max-width: 900px) {
	.site-footer { padding-bottom: var(--cta-bar-h); }
	.site-footer__address { line-height: 1.4; }
}
@media (min-width: 901px) {
	/* Footer: equal side padding so the Ardent logo sits on the page centre */
	.site-footer__inner { padding-left: clamp(20px, 2.9vw, 42px); }
	.site-footer__left { margin-left: calc(clamp(20px, 4.9vw, 70px) - clamp(20px, 2.9vw, 42px)); }
}
@media (max-width: 781px) {
	.site-footer { font-size: 11px; letter-spacing: 0.04em; }
	.newsletter-bar__heading { font-size: 26px; }
}
@media (min-width: 901px) {
	/* Newsletter bar */
	.newsletter-bar { padding-bottom: 63px; }
	.newsletter-bar { gap: 10px; }
}
@media (max-width: 900px) {
	/* Newsletter bar: 152px, heading 45px from the top, button 6px under it */
	.newsletter-bar { padding: 45px var(--gutter) 32px; gap: 6px; }
	/* Footer: Ardent mark 65px from the top, icons 21px under the address,
	   B Corp 30px under the links, 63px clear above the booking bar */
	.site-footer__inner { padding-top: 65px; padding-bottom: 63px; }
	.site-footer .social-links { margin-top: 21px; }
	.site-footer__bcorp { margin-top: 4px; }
}

/* ==========================================================================
   Header logo variants and the dark header page option
   ========================================================================== */

.site-logo--cream { display: none; }
@media (min-width: 901px) {
	.header-dark .site-header { background: var(--green); border-bottom-color: var(--cream); color: var(--cream); } /* 1px cream rule under the dark header */
	.header-dark .site-logo--green { display: none; }
	.header-dark .site-logo--cream { display: block; }
	.header-dark .site-header .imn { --imn-bar: var(--cream) !important; } /* !important: INSPIRE Mobile Nav sets these inline */
	.header-dark .header-instagram { color: var(--cream); }
	.header-dark .site-header__actions .btn--book { background: transparent; border-color: var(--cream); color: var(--cream); }
	.header-dark .site-header__actions .btn--book:hover { background: var(--cream); color: var(--green); }
}

/* ==========================================================================
   Shared page-building helpers
   ========================================================================== */

/* Page title used inside page content (No Heading template) */
/* Row of underlined label links, e.g. EVENT MENU / TAKE A 360 TOUR */
.tg-link-list { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 22px 0; padding: 0; list-style: none; }
.tg-link-list a {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 3px;
}
.tg-link-list--stacked { flex-direction: column; }
.wp-block-buttons { gap: 12px; }
/* Three-image rows (Menus, Weddings): wide, narrow, wide, 12px apart */
.tg-image-strip--three .wp-block-gallery,
.tg-image-strip--three.wp-block-gallery,
.tg-image-strip--landscape .wp-block-gallery,
.tg-image-strip--landscape.wp-block-gallery {
	gap: 12px;
}
.tg-image-strip--three figure.wp-block-image:nth-child(odd),
.tg-image-strip--landscape figure.wp-block-image:nth-child(odd) {
	flex: 1.56 1 0;
}
.tg-image-strip--three figure.wp-block-image:nth-child(2),
.tg-image-strip--landscape figure.wp-block-image:nth-child(2) {
	flex: 1 1 0;
}
/* Menus: 1463 x 457, from 10px left of the page */
.tg-image-strip--three .wp-block-gallery,
.tg-image-strip--three.wp-block-gallery {
	width: 101.6%;
	margin-left: -0.7%;
}
.tg-image-strip--three figure.wp-block-image:nth-child(odd) { aspect-ratio: 545 / 457; }
.tg-image-strip--three figure.wp-block-image:nth-child(2) { aspect-ratio: 349 / 457; }
/* Weddings: 1539 x 429, from 64px left of the page */
.tg-image-strip--landscape .wp-block-gallery,
.tg-image-strip--landscape.wp-block-gallery {
	width: 106.9%;
	margin-left: -4.45%;
}
.tg-image-strip--landscape figure.wp-block-image:nth-child(odd) { aspect-ratio: 574 / 429; }
.tg-image-strip--landscape figure.wp-block-image:nth-child(2) { aspect-ratio: 367 / 429; }
@media (max-width: 700px) {
	.tg-image-strip--three .wp-block-gallery,
	.tg-image-strip--three.wp-block-gallery,
	.tg-image-strip--landscape .wp-block-gallery,
	.tg-image-strip--landscape.wp-block-gallery {
		gap: 8px;
	}
	/* Menus row 854px wide from the left edge, Weddings 1004px from 37px off-screen */
	.tg-image-strip--three .wp-block-gallery,
	.tg-image-strip--three.wp-block-gallery {
		width: 206.3vw;
		margin-left: 0;
	}
	.tg-image-strip--landscape .wp-block-gallery,
	.tg-image-strip--landscape.wp-block-gallery {
		width: 242.5vw;
		margin-left: -8.9vw;
	}
}
.tg-dark .tg-image-strip { margin-top: clamp(40px, 5vw, 64px); }
/* Sage section (Careers) */
.tg-sage { background: var(--sage); color: var(--green); }

@media (max-width: 900px) {
	.footer-menu li + li { margin-top: 0; }
	.footer-menu { line-height: 1.4; }
}
@media (max-width: 781px) {
	/* Mobile labels: buttons, link labels, dates and the footer use Wedding Gothic ATF Wide at 11px. Wide is listed first so it takes over once it is added to the Adobe Fonts kit; until then the standard cut is used. */
	:root { --font-label: "wedding-gothic-atf-wide", "wedding-gothic-atf", "Helvetica Neue", Arial, sans-serif; }
}

/* ==========================================================================
   Private Events
   ========================================================================== */

.tg-pe-hero.wp-block-columns { gap: clamp(32px, 6vw, 87px); align-items: flex-end; }
/* text sits level with the bottom of the thumbnails */
.tg-pe-hero > .wp-block-column { align-self: flex-end; }
.tg-pe-hero .tg-pe-hero__main img { width: 100%; aspect-ratio: 1.54; object-fit: cover; }
.tg-pe-hero .wp-block-image { margin: 0; }
.tg-thumbs.wp-block-gallery { display: grid; grid-template-columns: 158fr 287fr 158fr 158fr; gap: 7px; margin-top: 7px; } /* second thumbnail is wide */
.wp-block-gallery.has-nested-images.is-layout-flex.tg-thumbs figure.wp-block-image:not(#individual-image) { width: 100%; margin: 0; }
.tg-thumbs figure.wp-block-image img { aspect-ratio: 158 / 141; object-fit: cover; }
.wp-block-gallery.has-nested-images.is-layout-flex.tg-thumbs figure.wp-block-image:not(#individual-image) img { height: auto; }
.tg-thumbs figure.wp-block-image:nth-child(2) img { aspect-ratio: 287 / 141; }
.tg-pe-hero h2 { font-size: clamp(28px, 2.8vw, 40px); }
.tg-pe-hero p { font-size: 18px; line-height: 1.3; }
.tg-pe-hero .is-style-light .wp-block-button__link { background: var(--stone); }
.tg-pe-hero .is-style-light .wp-block-button__link:hover { background: var(--green); }
@media (max-width: 781px) {
	/* Thumbnails: one row of all four, lined up with the big photo above.
	   js/site.js wraps the row in .tg-thumbs-viewport and makes it drift
	   continuously (like the homepage photo strip). Without the script, or for
	   reduced-motion users, it is a still row visitors can swipe. */
	.tg-thumbs.wp-block-gallery {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.tg-thumbs.wp-block-gallery::-webkit-scrollbar { display: none; }
	.wp-block-gallery.has-nested-images.is-layout-flex.tg-thumbs figure.wp-block-image:not(#individual-image) { flex: 0 0 177px; width: 177px; scroll-snap-align: start; }
	.tg-pe-hero .tg-thumbs-viewport { overflow: hidden; margin-top: 10px; }
	.tg-pe-hero .tg-thumbs-viewport > .tg-thumbs.wp-block-gallery {
		width: max-content;
		margin: 0;
		overflow: visible;
		animation: tg-marquee var(--marquee-duration, 30s) linear infinite;
		will-change: transform;
	}
	.tg-pe-hero .tg-thumbs-viewport:hover > .tg-thumbs,
	.tg-pe-hero .tg-thumbs-viewport:focus-within > .tg-thumbs,
	.tg-pe-hero .tg-thumbs-viewport.is-touched > .tg-thumbs { animation-play-state: paused; }
	.tg-pe-hero .tg-pe-hero__main img { aspect-ratio: 1.69; }
	.tg-thumbs figure.wp-block-image img,
	.tg-thumbs figure.wp-block-image:nth-child(2) img {
		aspect-ratio: 1.43;
	}
}
/* Our Spaces */
.tg-spaces-intro.wp-block-columns,
.tg-heading-intro.wp-block-columns {
	align-items: start;
	margin-bottom: 36px;
}
.tg-spaces-intro p,
.tg-heading-intro p {
	font-size: 18px;
	line-height: 1.3;
	max-width: 622px;
}
.tg-heading-intro h1, .tg-heading-intro h2 { margin: 0; }
.spaces { position: relative; }
.spaces__arrows { justify-content: flex-end; margin-bottom: 16px; }
.spaces__track {
	position: relative;
	display: flex;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-right: calc(-1 * var(--gutter));
	padding-right: var(--gutter);
}
.spaces__track::-webkit-scrollbar { display: none; }
.space-card {
	position: relative; /* 330x444 cards, 15px apart, at 1440 */
	flex: 0 0 clamp(220px, 22.9vw, 330px);
	scroll-snap-align: start;
}
.space-card__image { display: block; margin-bottom: 18px; background: var(--stone-dark); }
.space-card__image img { width: 100%; aspect-ratio: 0.75; object-fit: cover; }
.space-card__title { font-size: clamp(18px, 1.4vw, 20px); margin: 0 0 6px; }
.space-card__title a { text-decoration: none; }
.space-card__title a:hover { text-decoration: underline; }
.space-card__sub { margin: 0 0 8px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; }
.space-card .text-link { min-height: 0; }
@media (max-width: 600px) {
	.space-card { flex-basis: 64.7vw; }
}
/* Weddings */
.tg-centred { text-align: center; }
.tg-centred p { max-width: 675px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.3; }
.tg-centred .wp-block-buttons { justify-content: center; }
/* Explore our pubs */
.tg-panel { background: var(--stone); padding: clamp(28px, 4.65vw, 67px) clamp(24px, 7.4vw, 107px); } /* ~107px side padding at 1440 */
.tg-panel p { font-size: 16px; line-height: 1.375; max-width: 470px; }
.tg-crests.wp-block-gallery { display: flex; flex-wrap: nowrap; gap: 24px; align-items: center; }
.tg-crests figure.wp-block-image { flex: 1 1 0; margin: 0; }
.wp-block-gallery.has-nested-images.is-layout-flex.tg-crests figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
@media (max-width: 781px) {
	.tg-crests figure.wp-block-image:not(:last-child) { display: none; } /* the Hound crest only */
}

@media (min-width: 1101px) {
	/* Private Events content and both Gluepot blocks run to 38px from the right edge at 1440 (Gluepot text starts 194px in on the homepage, 125px in on Private Events). */
	.entry-content > .tg-section:not(.tg-dark):not(.tg-stone):has(> .tg-pe-hero, > .tg-split, > .tg-panel),
	.entry-content > .tg-stone:has(> .tg-spaces-intro) {
		padding-left: clamp(24px, 2.64vw, 38px);
		padding-right: clamp(24px, 2.64vw, 38px);
	}
	.entry-content .tg-section > .tg-pe-hero.wp-block-columns,
	.entry-content .tg-stone > .tg-spaces-intro,
	.entry-content .tg-stone > .spaces,
	.entry-content .tg-section > .tg-panel {
		max-width: 1365px;
	}
	.entry-content .tg-section:not(.tg-dark):not(.tg-stone) > .tg-split.tg-split--landscape:has(> .wp-block-column:last-child .wp-block-image) {
		max-width: min(1279px, 93.77%);
	}
	.tg-split--landscape > .wp-block-column:last-child { flex-basis: 52.2% !important; } /* 667px image. !important: beats the column width set inline by the block editor */
	.tg-panel { padding-right: clamp(24px, 3.4vw, 49px); } /* 107px left, 49px right */
}
@media (max-width: 781px) {

	.tg-pe-hero .tg-link-list,
	.tg-pe-hero .wp-block-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 20px;
		margin: 0 0 14px;
	}
	.tg-pe-hero .wp-block-button:last-child { order: -1; } /* Make an enquiry, then Event brochure */
	.tg-pe-hero .wp-block-button .wp-block-button__link {
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--green);
		justify-content: flex-start;
		font-size: 10px;
		letter-spacing: 0.08em;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	/* Glue Pot: photo above the heading */
	.tg-split--landscape > .wp-block-column:last-child { order: -1; }
}
/* Private Events hero: the big photo cycles through the thumbnails */
.tg-pe-hero__main.is-cycling { position: relative; overflow: hidden; }
.tg-pe-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
	pointer-events: none;
}
.tg-pe-hero__slide.is-active { opacity: 1; }
.tg-thumbs figure[role="button"] { cursor: pointer; }
.tg-thumbs figure[role="button"] img { transition: opacity 0.3s ease; }
.tg-thumbs figure[role="button"]:hover img { opacity: 0.85; }
.tg-thumbs figure.is-current { outline: 2px solid var(--green); outline-offset: -2px; }
.tg-thumbs figure[role="button"]:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.tg-pe-hero__slide { transition: none; }
}
/* Our Spaces: auto-scrolling cards (js/site.js adds .is-marquee) */
.tg-stone:has(> .spaces--marquee) { overflow: hidden; }
.spaces--marquee.is-marquee .spaces__track {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
	margin-right: 0;
	padding-right: 0;
	animation: tg-marquee var(--marquee-duration, 60s) linear infinite;
	will-change: transform;
}
.spaces--marquee.is-marquee:hover .spaces__track,
.spaces--marquee.is-marquee:focus-within .spaces__track {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.spaces--marquee.is-marquee .spaces__track { animation: none; }
}
/* Weddings photos: auto-scrolling, keeping the wide / narrow / wide rhythm */
.tg-image-strip--landscape.tg-image-strip--marquee.is-marquee figure.wp-block-image {
	flex: 0 0 39.86vw;
	width: 39.86vw;
	aspect-ratio: 574 / 429;
}
.tg-image-strip--landscape.tg-image-strip--marquee.is-marquee figure.wp-block-image:nth-child(3n+2) {
	flex-basis: 25.49vw;
	width: 25.49vw;
	aspect-ratio: 367 / 429;
}
@media (max-width: 700px) {
	.tg-image-strip--landscape.tg-image-strip--marquee.is-marquee figure.wp-block-image,
	.tg-image-strip--landscape.tg-image-strip--marquee.is-marquee figure.wp-block-image:nth-child(3n+2) {
		flex-basis: 82vw;
		width: 82vw;
		aspect-ratio: 307 / 253;
	}
}
@media (min-width: 782px) {
	/* Explore our pubs: give each crest a slot in proportion to its shape so the
   gold drawings sit at the same height (Cadogan 359x388, Hound 418x359:
   width ratios 0.925 and 1.164). Mobile shows the Hound crest only. */
	.wp-block-gallery.has-nested-images.tg-crests figure.wp-block-image:first-child { flex: 0.925 1 0; }
	.wp-block-gallery.has-nested-images.tg-crests figure.wp-block-image:last-child { flex: 1.164 1 0; }
}
@media (max-width: 781px) {
	.tg-pe-hero .wp-block-button__link,
	.tg-link-list a {
		font-size: 10px;
	}
}
@media (min-width: 782px) {
	/* The Gluepot: text sits 149px below the photo's top, not centred on it */
	.home .tg-section:not(.tg-dark):not(.tg-stone) > .tg-split:not(.tg-split--landscape) > .wp-block-column:first-child {
		margin-bottom: 84px;
	}
	.home .tg-section:not(.tg-dark):not(.tg-stone) > .tg-split:not(.tg-split--landscape) h2 + p { margin-top: 18px; }

	/* Hero: 782px gallery (510px photo, thumbnails 17px below), text from x907
	   ending 46px above the gallery's foot */
	.tg-pe-hero { justify-content: space-between; }
	.tg-pe-hero > .wp-block-column:first-child {
		flex: 0 0 min(782px, 57.3%) !important; /* !important: beats the column width set inline by the block editor */
	}
	.tg-pe-hero > .wp-block-column:last-child { flex: 0 0 min(495px, 36.3%); align-self: flex-end; margin-bottom: 46px; }
	.tg-pe-hero .tg-thumbs, .tg-pe-hero .tg-pe-hero__images + .wp-block-gallery { margin-top: 17px; }
	.tg-pe-hero h2 + p { margin-top: 18px; max-width: 472px; }
	.tg-pe-hero .tg-link-list { margin-top: 24px; margin-bottom: 0; }
	.tg-pe-hero .tg-link-list li + li { margin-top: 1px; }
	.tg-pe-hero .wp-block-buttons { margin-top: 30px; gap: 22px; }
	.page-id-23 .entry-content > .tg-section:has(> .tg-pe-hero) { padding-bottom: 35px; }
	/* Our spaces: 44px into the band, cards 105px under the heading,
	   444px photos, 28px to the name, 19px to Enquire */
	.page-id-23 .entry-content > .tg-stone { padding-top: 44px; }
	.tg-spaces-intro.wp-block-columns { margin-bottom: 57px; }
	.space-card__image { margin-bottom: 28px; }
	.space-card__image img { aspect-ratio: 330 / 444; }
	.space-card__sub { margin-bottom: 12px; }
	/* The Glue Pot: 20px heading, copy 19px below the photo's centre */
	.page-id-23 .entry-content > .tg-stone + .tg-section { padding-top: 65px; }
	.page-id-23 .tg-split--landscape h3 { font-size: 20px; line-height: 1.2; }
	.page-id-23 .tg-split--landscape > .wp-block-column:first-child { margin-top: 38px; }
	.page-id-23 .tg-split--landscape h3 + p { margin-top: 8px; max-width: 383px; }
	.page-id-23 .tg-split--landscape .tg-link-list { margin-top: 23px; margin-bottom: 0; }
	.page-id-23 .tg-split--landscape .wp-block-buttons { margin-top: 26px; }
	/* Weddings: 68px into the band, 20px heading to copy, photos 50px below the button */
	.page-id-23 .entry-content > .tg-dark { padding-top: 68px; }
	.page-id-23 .tg-dark .tg-centred h2 + p { margin-top: 20px; }
	.page-id-23 .tg-dark .tg-image-strip { margin-top: 50px; }
	/* Explore our pubs: 452px panel, 59px above and 57px below */
	.page-id-23 .entry-content > .tg-section:has(> .tg-panel) { padding-top: 59px; padding-bottom: 57px; }
	.page-id-23 .tg-panel { min-height: 452px; display: flex; flex-direction: column; justify-content: center; }
	.page-id-23 .tg-explore > .wp-block-column:first-child { margin-bottom: 22px; }
	.page-id-23 .tg-explore .wp-block-buttons { margin-top: 39px; }
}
@media (max-width: 781px) {

	.page-id-23 .tg-page-title { margin-bottom: 0; }
	.page-id-23 .tg-page-title + .tg-section { padding-top: 14px; }
	.tg-pe-hero .tg-thumbs, .tg-pe-hero .tg-pe-hero__images + .wp-block-gallery { margin-top: 10px; gap: 12px; }
	.tg-pe-hero h2 { max-width: 300px; }
	.tg-pe-hero h2 + p { margin-top: 6px; }
	.tg-pe-hero .tg-link-list { margin-top: 32px; margin-bottom: 0; }
	.tg-pe-hero .wp-block-buttons { margin-top: 2px; }
	/* Our spaces */
	.page-id-23 .entry-content > .tg-stone { padding-top: 47px; padding-bottom: 57px; }
	.tg-spaces-intro.wp-block-columns { gap: 16px; margin-bottom: 41px; }
	.tg-spaces-intro p { max-width: 331px; }
	.page-id-23 .spaces { margin-top: 0; }
	.page-id-23 .spaces__track { gap: 16px; }
	.page-id-23 .space-card { flex-basis: 260px; width: 260px; }
	.page-id-23 .space-card__image { margin-bottom: 16px; }
	.page-id-23 .space-card__image img { aspect-ratio: 260 / 350; }
	.page-id-23 .space-card__sub { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
	/* The Glue Pot */
	.page-id-23 .entry-content > .tg-stone + .tg-section { padding-top: 33px; padding-bottom: 59px; }
	.page-id-23 .tg-split--landscape .tg-link-list { margin-top: 22px; margin-bottom: 0; }
	.page-id-23 .tg-split--landscape .wp-block-buttons { margin-top: 17px; }
	/* Weddings */
	.page-id-23 .entry-content > .tg-dark { padding-top: 44px; padding-bottom: 56px; }
	.page-id-23 .tg-dark .tg-centred h2 { max-width: 256px; margin-left: auto; margin-right: auto; }
	.page-id-23 .tg-dark .tg-centred h2 + p { margin-top: 16px; max-width: 330px; margin-left: auto; margin-right: auto; }
	.page-id-23 .tg-dark .tg-centred .wp-block-buttons { margin-top: 36px; }
	/* Explore our pubs */
	.page-id-23 .tg-panel { padding-left: 24px; padding-right: 24px; }
	.page-id-23 .tg-explore h2 { font-size: 26px; line-height: 33px; }
	.page-id-23 .tg-explore p { font-size: 15px; line-height: 21px; max-width: 318px; }
}
@media (max-width: 760px) {
	.page-id-23 .entry-content > .tg-section:has(> .tg-pe-hero) {
		padding-bottom: 83px;
	}
}

/* ==========================================================================
   Menus
   ========================================================================== */

.tg-menus-intro { text-align: center; }
.tg-menus-intro p { max-width: 675px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.3; }
.tg-menu-buttons { margin-top: 36px; margin-bottom: clamp(48px, 6vw, 72px); }
.tg-menu-buttons .wp-block-button:first-child .wp-block-button__link { background: var(--green); color: var(--cream); }

/* Menus: 730px grid plus the side padding, so each button is 225px */
.entry-content > .tg-menu-buttons.wp-block-buttons { max-width: calc(730px + 2 * var(--gutter)); }
@media (min-width: 782px) {

	.entry-content > .tg-image-strip--three:last-child { margin-bottom: 60px; } /* 60px above the newsletter */
	.page-id-22 .page-header { padding-top: 29px; } /* Menus: title 29px under the header */

	/* Menus: tabs 36px under the intro, photo strip 80px below them */
	.tg-menu-buttons { margin-top: 34px; margin-bottom: 82px; }
}
@media (max-width: 781px) {

	.page-id-22 .page-header { padding-bottom: 22px; }
	.tg-menus-intro p + p { margin-top: 28px; }
	.tg-menu-buttons { margin-top: 53px; margin-bottom: 12px; row-gap: 12px; }
	.page-id-22 .tg-image-strip { margin-bottom: 0; }
	.page-id-22 .tg-image-strip img { height: 285px; }
}
/* Menus photos: auto-scrolling, keeping the wide / narrow / wide rhythm */
.tg-image-strip--three.tg-image-strip--marquee.is-marquee .wp-block-gallery { gap: 12px; margin-left: 0; }
.tg-image-strip--three.tg-image-strip--marquee.is-marquee figure.wp-block-image {
	flex: 0 0 37.85vw;
	width: 37.85vw;
	aspect-ratio: 545 / 457;
}
.tg-image-strip--three.tg-image-strip--marquee.is-marquee figure.wp-block-image:nth-child(3n+2) {
	flex-basis: 24.24vw;
	width: 24.24vw;
	aspect-ratio: 349 / 457;
}
@media (max-width: 781px) {
	.tg-image-strip--three.tg-image-strip--marquee.is-marquee .wp-block-gallery { gap: 7px; }
	.tg-image-strip--three.tg-image-strip--marquee.is-marquee figure.wp-block-image {
		flex-basis: 76.8vw;
		width: 76.8vw;
		aspect-ratio: 318 / 285;
	}
	.tg-image-strip--three.tg-image-strip--marquee.is-marquee figure.wp-block-image:nth-child(3n+2) {
		flex-basis: 49.3vw;
		width: 49.3vw;
		aspect-ratio: 204 / 285;
	}
}

/* ==========================================================================
   Careers
   ========================================================================== */

.tg-careers-hero .wp-block-image img { width: 100%; aspect-ratio: 0.75; object-fit: cover; }
@media (max-width: 781px) {
	/* inset photo, 319x367 at 414 */
	.tg-careers-hero .wp-block-image { max-width: 77vw; margin-left: auto; margin-right: auto; }
	.tg-careers-hero .wp-block-image img { aspect-ratio: 0.87; }
}
.tg-careers-hero p { font-size: 18px; line-height: 1.3; max-width: 422px; }
.tg-awards { text-align: center; }
.tg-awards > p { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.3; }
.tg-awards .tg-team.wp-block-gallery { gap: 20px; margin: 36px 0; }
.tg-team figure.wp-block-image img { aspect-ratio: 0.72; object-fit: cover; }
.tg-award-logos.wp-block-gallery { justify-content: center; gap: 56px; }
.wp-block-gallery.has-nested-images.tg-award-logos figure.wp-block-image { flex: 0 0 205px; width: 205px; }
.wp-block-gallery.has-nested-images.is-layout-flex.tg-award-logos figure.wp-block-image:not(#individual-image) img {
	object-fit: contain;
	height: auto;
}
@media (max-width: 781px) {
	.tg-team.wp-block-gallery { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.wp-block-gallery.has-nested-images.tg-team figure.wp-block-image { flex: 0 0 46%; }
}
/* Team photos: auto-scrolling like the other photo strips. js/site.js wraps
   the gallery in .tg-team-marquee (the full width of the screen), repeats the
   photos and adds .is-marquee. Pauses on hover; without the script, or for
   reduced-motion users, the photos stay as laid out above. */
.entry-content .tg-team-marquee {
	position: relative;
	left: calc((100% - 100vw) / 2);
	width: 100vw;
	max-width: none;
	overflow: hidden;
}
.entry-content .tg-team-marquee.is-marquee .tg-team.wp-block-gallery {
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	overflow: visible;
	animation: tg-marquee var(--marquee-duration, 40s) linear infinite;
	will-change: transform;
}
.entry-content .tg-team-marquee.is-marquee:hover .tg-team.wp-block-gallery,
.entry-content .tg-team-marquee.is-marquee:focus-within .tg-team.wp-block-gallery { animation-play-state: paused; }
.tg-team-marquee.is-marquee .wp-block-gallery.has-nested-images.is-layout-flex.tg-team figure.wp-block-image:not(#individual-image) { flex: 0 0 254px; width: 254px; }
@media (max-width: 781px) {
	.tg-team-marquee.is-marquee .wp-block-gallery.has-nested-images.is-layout-flex.tg-team figure.wp-block-image:not(#individual-image) { flex-basis: 42.75vw; width: 42.75vw; }
}
@media (prefers-reduced-motion: reduce) {
	.entry-content .tg-team-marquee.is-marquee .tg-team.wp-block-gallery { animation: none; }
}

@media (max-width: 781px) {

	.tg-careers-hero > .wp-block-column:last-child { order: -1; } /* photo first */
	.wp-block-gallery.has-nested-images.tg-team figure.wp-block-image { flex-basis: 42.75vw; }

	.tg-awards .tg-team.wp-block-gallery { gap: 13px; }
}
@media (min-width: 782px) {
	/* Careers hero: 427x569 photo, 61px to the foot of the band, copy on 5 lines */
	.entry-content > .tg-sage:has(> .tg-careers-hero) { padding-bottom: 61px; }
	.tg-careers-hero .wp-block-image img { width: 427px; height: auto; }
	.tg-careers-hero p { max-width: 440px; margin-top: 22px; }
	.tg-careers-hero .wp-block-buttons { margin-top: 12px; }
	/* Awards band: 140% copy, 254x356 team photos 21px apart, logos in 205x119 boxes */
	.entry-content > .tg-stone:has(.tg-team) { padding-top: 80px; padding-bottom: 61px; }
	.tg-awards > p, .entry-content > .tg-stone:has(.tg-team) > p { line-height: 1.4; }
	.tg-awards .tg-team.wp-block-gallery,
	.entry-content > .tg-stone .tg-team.wp-block-gallery {
		max-width: 1080px;
		margin: 45px auto 48px;
		gap: 21px;
	}
	.tg-team figure.wp-block-image img { aspect-ratio: 254 / 356; }
	.wp-block-gallery.has-nested-images.is-layout-flex.tg-award-logos figure.wp-block-image:not(#individual-image) img {
		height: 119px;
		width: 205px;
		object-fit: contain;
		flex: none;
	}
	.tg-award-logos figure.wp-block-image { height: 119px; }
}
@media (max-width: 781px) {

	.entry-content > .tg-sage:has(> .tg-careers-hero) { padding-top: 33px; padding-bottom: 47px; }
	.tg-careers-hero { gap: 35px; }
	.tg-careers-hero h1 { max-width: 222px; }
	.tg-careers-hero h1 + p { margin-top: 11px; max-width: 318px; }
	.entry-content > .tg-stone:has(.tg-team) { padding-top: 44px; padding-bottom: 44px; }
	.entry-content > .tg-stone:has(.tg-team) > p { line-height: 1.4; }
	.tg-award-logos.wp-block-gallery { margin-top: 26px; gap: 33px; }
	.wp-block-gallery.has-nested-images.tg-award-logos figure.wp-block-image { flex-basis: 149px; width: 149px; height: 87px; }
	.wp-block-gallery.has-nested-images.is-layout-flex.tg-award-logos figure.wp-block-image:not(#individual-image) img {
		height: 87px;
		width: 149px;
		object-fit: contain;
		flex: none;
	}
	.entry-content > .tg-stone .tg-team.wp-block-gallery { margin-bottom: 26px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

/* Desktop: text and hours stacked on the left, image on the right.
   Mobile: text, image, then hours in two columns. */
.tg-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "text image" "hours image";
	gap: 0 clamp(32px, 6vw, 80px);
	align-items: center;
}
.tg-contact > * { margin: 0; max-width: none; }
.tg-contact__text { grid-area: text; align-self: end; text-align: center; }
.tg-contact > .wp-block-image { grid-area: image; }
.tg-contact > .tg-hours { grid-area: hours; align-self: start; text-align: center; }
.tg-contact h1 { font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 18px; }
.tg-contact .tg-address { text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; line-height: 1.4; }
.tg-contact p { font-size: 18px; line-height: 1.5; }
.tg-contact .wp-block-image img { width: 100%; aspect-ratio: 0.9; object-fit: cover; }
.tg-hours { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
.tg-hours p { margin: 0; font-size: 20px; line-height: 1.5; }
.tg-hours em { font-style: normal; font-size: inherit; } /* no italics (mobile below) */
@media (max-width: 781px) {
	.tg-contact { grid-template-columns: 1fr; grid-template-areas: "text" "image" "hours"; gap: 28px; }
	.tg-contact .wp-block-image img { aspect-ratio: 1.23; }
	.tg-contact__text, .tg-contact > .tg-hours { text-align: left; }
	.tg-hours { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 0; }
	.tg-hours p { font-size: 16px; }
	.tg-hours em { font-style: italic; } /* food lines in italic */
}
.tg-find-us h2 { text-align: center; }
.tg-find-us .tg-map { max-width: 905px; margin: 28px auto; }
.tg-find-us .tg-map img { width: 100%; height: auto; aspect-ratio: 1.74; object-fit: cover; }
.tg-find-us p { text-align: center; font-size: 15px; }
.tg-find-us p em { font-style: normal; } /* one roman line; italic on mobile */
@media (max-width: 781px) {
	.tg-find-us h2, .tg-find-us p { text-align: left; }
	.tg-find-us p { font-size: 16px; }
	.tg-find-us p em { font-style: italic; }
}

@media (max-width: 781px) {
	.tg-contact p { font-size: 16px; }
	.tg-contact .tg-address { font-size: 15px; }
}

.tg-contact a { text-decoration: none; }
.tg-contact a:hover { text-decoration: underline; }
@media (min-width: 782px) {
	/* 544px text column, 57px gap, 514x570 photo */
	.tg-dark > .tg-contact { max-width: 1115px; grid-template-columns: 544fr 514fr; column-gap: 57px; }
	.tg-contact .tg-address br { display: none; } /* one line on desktop */
	.tg-find-us .tg-map { margin-bottom: 34px; }
}
@media (max-width: 781px) {
	/* How to find us: address and stations above the map */
	.tg-find-us { display: flex; flex-direction: column; }
	.tg-find-us > h2 { order: 0; }
	.tg-find-us > p { order: 1; }
	.tg-find-us > .tg-map { order: 2; }
}
@media (min-width: 782px) {

	.tg-dark > .tg-contact { position: relative; left: min(34px, 2.36vw); }
}
@media (max-width: 781px) {
	/* Contact mobile: "How to find us" left-aligned on the full column, and the stations sentence on its own italic line. */
	.entry-content .tg-find-us > h2 {
		width: 100%;
		max-width: none;
		text-align: left;
	}
	.tg-find-us p em { display: block; }
}
@media (min-width: 782px) {
	/* Contact: band 78px / 86px, copy groups 20px apart, opening hours on a
	   36px pitch with a blank line between days, photo 7px below the title */
	.entry-content > .tg-dark:has(> .tg-contact) { padding-top: 78px; padding-bottom: 86px; }
	.tg-contact { align-items: start; }
	.tg-contact__text, .tg-contact > .tg-hours { align-self: start; }
	.tg-contact > .wp-block-image { margin-top: 7px; }
	.tg-contact h1 { margin-bottom: 20px; }
	.tg-contact__text h1 + p, .tg-contact__text p + p { margin-top: 20px; }
	.tg-contact > .tg-hours { margin-top: 20px; }
	.tg-hours p { line-height: 36px; }
	.tg-contact > .tg-hours { row-gap: 36px; }
	.tg-hours p + p { margin-top: 0; }
	/* How to find us: 64px into the band, map 22px under the heading,
	   18px caption 56px below the map */
	.entry-content > .tg-stone:has(> .tg-map), .tg-find-us { padding-top: 64px; }
	.tg-find-us .tg-map, .entry-content > .tg-stone > .tg-map { margin-top: 22px; margin-bottom: 56px; }
	.tg-find-us p, .entry-content > .tg-stone:has(> .tg-map) > p { font-size: 18px; line-height: 1.5; }
}
@media (max-width: 781px) {

	.entry-content > .tg-dark:has(> .tg-contact) { padding-top: 32px; }
	.tg-contact h1 { margin-bottom: 0; }
	.tg-contact .tg-address { margin-top: 16px; }
	.tg-contact__text p:not(.tg-address) { margin-top: 17px; line-height: 1.5; }
	.tg-contact { row-gap: 20px; }
	.tg-contact > .tg-hours { margin-top: 20px; row-gap: 24px; }
	.tg-hours p { line-height: 1.5; }
	.entry-content > .tg-stone:has(> .tg-map) { padding-top: 57px; padding-bottom: 24px; }
	.tg-find-us > h2 + p, .entry-content > .tg-stone:has(> .tg-map) > p { margin-top: 4px; line-height: 1.5; }
	.tg-find-us .tg-map, .entry-content > .tg-stone > .tg-map { margin-top: 24px; margin-bottom: 0; }
	.tg-find-us .tg-map img { aspect-ratio: 366 / 240; }
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.tg-legal { padding-bottom: clamp(48px, 7vw, 96px); font-size: 16px; line-height: 1.6; }
.tg-legal h2 { font-size: 20px; margin: 2.2em 0 0.7em; }
.tg-legal ol, .tg-legal ul { padding-left: 1.4em; margin: 0 0 1.2em; }
.tg-legal li { margin-bottom: 0.6em; }
.tg-legal li::marker { font-family: var(--font-display); }
.tg-legal__updated {
	font-family: var(--font-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) 64px; }

/* ==========================================================================
   Mobile type and button text
   ========================================================================== */

@media (max-width: 781px) {
	/* Mobile body copy */
	.tg-intro p,
	.tg-split p,
	.tg-pe-hero p,
	.tg-spaces-intro p,
	.tg-heading-intro p,
	.tg-centred p,
	.tg-menus-intro p,
	.tg-faq-intro,
	.tg-careers-hero p,
	.tg-awards > p,
	.tg-cta-row p,
	.featured-event__text {
		font-size: 16px;
		line-height: 1.3;
	}
}
/* Button style "Bright green, cream hover" (e.g. homepage live music) */
.is-style-bright-cream .wp-block-button__link { background: var(--bright); border-color: var(--bright); color: var(--green); }
.is-style-bright-cream .wp-block-button__link:hover,
.is-style-bright-cream .wp-block-button__link:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--green);
}
/* Button text centring: Wedding Gothic's capitals sit about 0.3px below the middle of the line box, and pixel rounding makes that 0.5-1.5px on screen. Nudge the label up half a pixel; heights stay 38px. (CSS text-box trimming would be exact but does not apply to flex buttons.) */
.btn,
.wp-block-button__link,
.wp-element-button,
.spaces-card-button__link,
.fanzo-feed__month-button {
	padding-top: 10.5px;
	padding-bottom: 11.5px;
}
.is-style-text-link .wp-block-button__link { padding-top: 0; padding-bottom: 0; }
.mobile-cta-bar .btn { padding-top: 0; padding-bottom: 1px; } /* full-height bar buttons */
@media (max-width: 781px) {
	.btn,
	.wp-block-button__link,
	.spaces-card-button__link,
	.space-card .text-link,
	.tg-insta-header a,
	.event-card__date,
	.featured-event__label,
	.featured-event__actions .text-link {
		font-size: 11px;
		letter-spacing: 0.02em;
	}
	.is-style-text-link .wp-block-button__link { font-size: 11px; }
}
@media (max-width: 900px) {
	.mobile-cta-bar .btn {
		font-family: "wedding-gothic-atf-wide", "wedding-gothic-atf", "Helvetica Neue", Arial, sans-serif;
		font-size: 11px;
		letter-spacing: 0.02em;
	}
}
@media (max-width: 781px) {
	/* Buttons: 38px tall at 11px */
	.btn, .wp-block-button__link { line-height: 14px; }
	.is-style-text-link .wp-block-button__link { line-height: 1.4; }
}
@media (max-width: 760px) {
	.featured-event__text, .featured-event__text p { font-size: 15px; line-height: 1.4; }
	.featured-event__text p:last-child { margin-bottom: 0; }
}
