/**
 * Cream Tea — front-end styles.
 *
 * Order: fonts, tokens, base, layout frame, header, footer, components,
 * then one block per template, then responsive rules, then motion opt-outs.
 * Everything is driven by the tokens in :root; there are no hard-coded hexes
 * below the token block except inside gradients that need three stops.
 */

/* --------------------------------------------------------------------------
 * 1. Fonts
 *
 * Self-hosted (both OFL). Mulish ships as a variable font, so the 400/600/700
 * faces are one file per subset declared over a weight range — Google serves
 * byte-identical files for each weight and there is no reason to ship three.
 * ----------------------------------------------------------------------- */

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

@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/libre-caslon-display-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/mulish-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
	font-family: 'Mulish';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/mulish-italic-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * 2. Tokens
 * ----------------------------------------------------------------------- */

:root {
	/* Colour. */
	--cbb-cream: #fcf3df;
	--cbb-cream-deep: #f3e2c7;
	--cbb-rule: #e6d5bb;
	--cbb-jam: #912061;
	--cbb-jam-deep: #770a4d;
	--cbb-scone: #936b4a;

	/*
	 * The comp's scone is 4.28:1 on cream and 3.72:1 on the cream panels — it
	 * fails AA wherever it is used as text, which in this design is most of the
	 * places it appears. So the token is split: --cbb-scone stays exactly as
	 * drawn and is used only for marks (the logo bar, the season rules, the
	 * dots), and every scone-coloured *word* uses this one, which is the same
	 * hue and saturation taken down to 5.19:1 on cream and 4.51:1 on the panels.
	 * The difference is invisible next to the mark; the failure was not.
	 */
	--cbb-scone-text: #825f42;
	--cbb-tea: #33211b;
	--cbb-text-soft: #694e45;
	--cbb-caption: #7b5b4a;

	/* Cream on tea, three levels of hierarchy. */
	--cbb-on-tea: #fcf3df;
	--cbb-on-tea-80: rgba( 243, 226, 199, 0.85 );
	--cbb-on-tea-70: rgba( 243, 226, 199, 0.75 );

	/* Typefaces. */
	--cbb-display: 'Libre Caslon Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--cbb-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Measure. */
	--cbb-container: 1180px;
	--cbb-gutter: 44px;
	--cbb-measure: 680px;

	/* Radius. */
	--cbb-r-thumb: 12px;
	--cbb-r-card: 18px;
	--cbb-r-feature: 22px;
	--cbb-r-hero: 28px;
	--cbb-r-pill: 999px;

	/* Motion. */
	--cbb-m-lift: 350ms ease;
	--cbb-m-underline: 350ms ease;
	--cbb-m-button: 300ms ease;
	--cbb-m-nav: 200ms ease;

	/* The only shadow in the theme. */
	--cbb-shadow-button: 0 10px 24px rgba( 145, 32, 97, 0.25 );

	/* Image slot fallback. */
	--cbb-fallback: repeating-linear-gradient( -45deg, #ecdcc1 0 8px, #f5e8d0 8px 16px );
	--cbb-fallback-tight: repeating-linear-gradient( -45deg, #ecdcc1 0 6px, #f5e8d0 6px 12px );

	/* Frame. */
	--cbb-header-h: 74px;
	--cbb-sticky-bg: rgba( 252, 243, 223, 0.92 );

	/* Section rhythm. */
	--cbb-section: 72px;
}

/* --------------------------------------------------------------------------
 * 3. Base
 * ----------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var( --cbb-cream );
	color: var( --cbb-tea );
	font: 400 17px/1.7 var( --cbb-body );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: var( --cbb-jam );
	text-decoration: none;
}

a:hover {
	color: var( --cbb-jam-deep );
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --cbb-display );
	font-weight: 400;
	color: var( --cbb-tea );
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.05;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
}

table {
	border-collapse: collapse;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input::placeholder {
	color: inherit;
	opacity: 0.55;
}

hr {
	border: 0;
	border-top: 1px solid var( --cbb-rule );
	margin: 36px 0;
}

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

::selection {
	background: var( --cbb-cream-deep );
	color: var( --cbb-tea );
}

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

.cbb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var( --cbb-tea );
	color: var( --cbb-cream );
	padding: 12px 20px;
	border-radius: 0 0 var( --cbb-r-thumb ) 0;
	font: 700 14px/1 var( --cbb-body );
}

.cbb-skip-link:focus {
	left: 0;
	color: var( --cbb-cream );
}

/* --------------------------------------------------------------------------
 * 4. Layout frame
 * ----------------------------------------------------------------------- */

.cbb-wrap {
	width: 100%;
	max-width: var( --cbb-container );
	margin-inline: auto;
	padding-inline: var( --cbb-gutter );
}

/* A full-bleed band that still aligns its contents to the container. */
.cbb-band {
	background: var( --cbb-cream-deep );
}

.cbb-band > .cbb-wrap {
	padding-block: 56px;
}

.cbb-band--spaced {
	margin-top: var( --cbb-section );
}

.cbb-section {
	padding-top: var( --cbb-section );
}

.cbb-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 26px;
}

.cbb-section-head h2 {
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.015em;
}

.cbb-section-head .cbb-more,
.cbb-more {
	font: 700 14px/1.4 var( --cbb-body );
	color: var( --cbb-jam );
	letter-spacing: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}

.cbb-h2-sm {
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.01em;
	margin-bottom: 22px;
}

.cbb-section-head .cbb-h2-sm {
	margin-bottom: 0;
}

.cbb-eyebrow {
	display: block;
	font: 700 12px/1.3 var( --cbb-body );
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cbb-jam );
}

.cbb-eyebrow--card {
	letter-spacing: 0.14em;
}

.cbb-label {
	display: block;
	font: 700 11px/1.3 var( --cbb-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --cbb-scone-text );
}

.cbb-meta {
	display: block;
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-scone-text );
}

.cbb-standfirst {
	font: 400 19px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
}

.cbb-caption {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-caption );
}

/* Image slots. Every figure gets the striped fallback behind it, so a missing
   or still-loading image reads as an intentional slot rather than a hole. */
.cbb-shot {
	/*
	 * Rendered as a <span> whenever the slot sits inside a link, because an <a>
	 * may not contain a <figure>. An inline box ignores aspect-ratio and
	 * height, so every slot is explicitly blockified.
	 */
	display: block;
	position: relative;
	overflow: hidden;
	background: var( --cbb-fallback );
	border-radius: var( --cbb-r-card );
}

.cbb-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cbb-shot--thumb {
	border-radius: var( --cbb-r-thumb );
	background: var( --cbb-fallback-tight );
}

.cbb-shot--feature {
	border-radius: var( --cbb-r-feature );
}

.cbb-shot--hero {
	border-radius: var( --cbb-r-hero );
}

.cbb-shot--4x5 {
	aspect-ratio: 4 / 5;
}

.cbb-shot--4x3 {
	aspect-ratio: 4 / 3;
}

.cbb-shot--3x2 {
	aspect-ratio: 3 / 2;
}

.cbb-shot--1x1 {
	aspect-ratio: 1 / 1;
}

.cbb-shot figcaption,
.cbb-shot .cbb-shot-cap {
	position: absolute;
	left: 20px;
	bottom: 16px;
	margin: 0;
	font: 400 12px/1.4 var( --cbb-body );
	color: var( --cbb-caption );
}

/* --------------------------------------------------------------------------
 * 5. Buttons, pills, chips
 * ----------------------------------------------------------------------- */

.cbb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var( --cbb-jam );
	color: var( --cbb-cream );
	padding: 15px 26px;
	border: 0;
	border-radius: var( --cbb-r-pill );
	font: 700 15px/1 var( --cbb-body );
	cursor: pointer;
	transition: transform var( --cbb-m-button ), box-shadow var( --cbb-m-button ), background var( --cbb-m-button );
}

.cbb-btn:hover {
	color: var( --cbb-cream );
	transform: translateY( -2px );
	box-shadow: var( --cbb-shadow-button );
}

.cbb-btn:active {
	background: var( --cbb-jam-deep );
	transform: none;
	box-shadow: none;
}

.cbb-btn--secondary {
	background: transparent;
	color: var( --cbb-tea );
	border: 1.5px solid var( --cbb-tea );
	padding: 13.5px 24.5px;
}

.cbb-btn--secondary:hover {
	background: var( --cbb-cream-deep );
	color: var( --cbb-tea );
	transform: none;
	box-shadow: none;
}

.cbb-btn--block {
	width: 100%;
}

.cbb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 13px/1 var( --cbb-body );
	color: var( --cbb-tea );
	padding: 8px 14px;
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-pill );
	background: transparent;
	cursor: pointer;
	transition: background var( --cbb-m-button ), color var( --cbb-m-button ), border-color var( --cbb-m-button );
}

.cbb-chip:hover {
	background: var( --cbb-cream-deep );
	color: var( --cbb-tea );
}

.cbb-chip[aria-current],
.cbb-chip.is-active {
	background: var( --cbb-tea );
	border-color: var( --cbb-tea );
	color: var( --cbb-cream );
}

.cbb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cbb-chips--spaced {
	margin-top: 26px;
}

/* Small overlay pill used on photos. */
.cbb-shot-pill {
	position: absolute;
	font: 600 12px/1 var( --cbb-body );
	background: var( --cbb-cream );
	color: var( --cbb-tea );
	padding: 7px 12px;
	border-radius: var( --cbb-r-pill );
}

.cbb-shot-pill--tl {
	left: 12px;
	top: 12px;
}

.cbb-shot-pill--br {
	right: 12px;
	bottom: 12px;
}

/* --------------------------------------------------------------------------
 * 6. Hover behaviour
 * ----------------------------------------------------------------------- */

.cbb-lift {
	display: block;
	color: inherit;
	transition: transform var( --cbb-m-lift );
}

.cbb-lift:hover {
	color: inherit;
	transform: translateY( -6px );
}

.cbb-draw {
	display: inline;
	color: inherit;
	background-image: linear-gradient( var( --cbb-jam ), var( --cbb-jam ) );
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var( --cbb-m-underline );
}

.cbb-draw:hover {
	color: inherit;
	background-size: 100% 2px;
}

.cbb-tint {
	transition: background var( --cbb-m-button );
}

.cbb-tint:hover {
	background: var( --cbb-cream-deep );
}

/* --------------------------------------------------------------------------
 * 7. Header
 * ----------------------------------------------------------------------- */

.cbb-header {
	position: relative;
	z-index: 40;
	background: var( --cbb-cream );
}

.cbb-header.is-stuck {
	position: sticky;
	top: 0;
	background: var( --cbb-sticky-bg );
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
	border-bottom: 1px solid var( --cbb-rule );
}

.cbb-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	min-height: var( --cbb-header-h );
	padding-block: 22px;
}

.cbb-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --cbb-tea );
	flex: 0 0 auto;
}

.cbb-brand:hover {
	color: var( --cbb-tea );
}

.cbb-brand img {
	max-height: 44px;
	width: auto;
}

/* The mark is drawn, not an image file: a morning sun on the horizon. */
.cbb-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
}

.cbb-mark i {
	display: block;
	width: 26px;
	height: 13px;
	border-radius: 13px 13px 0 0;
	background: var( --cbb-jam );
}

.cbb-mark b {
	display: block;
	width: 34px;
	height: 3px;
	background: var( --cbb-scone );
}

.cbb-mark--reversed b {
	background: var( --cbb-cream );
}

.cbb-wordmark {
	font: 400 26px/1 var( --cbb-display );
	letter-spacing: -0.01em;
	color: var( --cbb-tea );
	white-space: nowrap;
}

.cbb-tagline {
	display: block;
	font: 700 10px/1 var( --cbb-body );
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --cbb-jam );
	margin-top: 6px;
}

.cbb-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	font: 600 14px/1 var( --cbb-body );
	justify-content: center;
}

.cbb-nav a {
	color: var( --cbb-tea );
	transition: color var( --cbb-m-nav );
}

.cbb-nav a:hover,
.cbb-nav .current-menu-item > a,
.cbb-nav .current-menu-parent > a,
.cbb-nav .current-menu-ancestor > a,
.cbb-nav .current_page_item > a,
.cbb-nav .cbb-nav-current > a,
.cbb-nav a.cbb-nav-current {
	color: var( --cbb-jam );
}

.cbb-nav ul {
	display: contents;
	list-style: none;
}

.cbb-nav li {
	list-style: none;
	position: relative;
}

/* One level of submenu, opened on hover and on focus-within. */
.cbb-nav .sub-menu {
	display: none;
	position: absolute;
	left: -14px;
	top: calc( 100% + 12px );
	min-width: 210px;
	background: var( --cbb-cream );
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-card );
	padding: 10px 0;
	z-index: 50;
	flex-direction: column;
	gap: 0;
}

.cbb-nav li:hover > .sub-menu,
.cbb-nav li:focus-within > .sub-menu {
	display: block;
}

.cbb-nav .sub-menu li {
	display: block;
}

.cbb-nav .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-weight: 600;
}

.cbb-search-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-pill );
	padding: 10px 18px;
	width: 230px;
	flex: 0 0 auto;
	margin: 0;
}

.cbb-search-pill input[type='search'] {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: 0;
	font: 400 14px/1.4 var( --cbb-body );
	color: var( --cbb-tea );
	-webkit-appearance: none;
	appearance: none;
}

.cbb-search-pill input[type='search']:focus {
	outline: 1.5px solid var( --cbb-tea );
	outline-offset: 4px;
	border-radius: 2px;
}

.cbb-search-pill button {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: var( --cbb-scone-text );
	line-height: 0;
}

.cbb-search-pill button:hover {
	color: var( --cbb-jam );
}

/* Round buttons that replace the nav and the search pill on small screens. */
.cbb-round {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --cbb-cream-deep );
	border: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	color: var( --cbb-tea );
	flex: 0 0 auto;
	transition: background var( --cbb-m-button );
}

.cbb-round:hover {
	background: var( --cbb-rule );
}

.cbb-round span {
	display: block;
	width: 18px;
	height: 2px;
	background: var( --cbb-tea );
}

.cbb-header-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Full-height cream panel. */
.cbb-menu-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var( --cbb-cream );
	padding: 22px var( --cbb-gutter ) 56px;
	overflow-y: auto;
	display: none;
	flex-direction: column;
}

.cbb-menu-panel.is-open {
	display: flex;
}

body.cbb-menu-open {
	overflow: hidden;
}

.cbb-menu-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.cbb-menu-close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --cbb-cream-deep );
	border: 0;
	cursor: pointer;
	font: 400 22px/1 var( --cbb-body );
	color: var( --cbb-tea );
}

.cbb-menu-panel nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cbb-menu-panel nav a {
	display: block;
	font: 400 30px/1.3 var( --cbb-display );
	color: var( --cbb-tea );
	padding: 8px 0;
}

.cbb-menu-panel nav a:hover {
	color: var( --cbb-jam );
}

.cbb-menu-panel .sub-menu a {
	font-size: 20px;
	padding-left: 18px;
	color: var( --cbb-text-soft );
}

.cbb-menu-panel .cbb-search-pill {
	width: 100%;
	margin-top: 32px;
	padding: 14px 20px;
}

/* --------------------------------------------------------------------------
 * 8. Breadcrumb
 * ----------------------------------------------------------------------- */

.cbb-breadcrumb {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-scone-text );
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

.cbb-breadcrumb a {
	color: var( --cbb-scone-text );
}

.cbb-breadcrumb a:hover {
	color: var( --cbb-jam );
}

.cbb-breadcrumb .separator,
.cbb-breadcrumb-sep {
	color: var( --cbb-scone-text );
}

.cbb-breadcrumb .last,
.cbb-breadcrumb [aria-current] {
	color: var( --cbb-tea );
}

/* Rank Math prints its own markup inside our container; normalise its spacing. */
.cbb-breadcrumb .rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

/* --------------------------------------------------------------------------
 * 9. Footer
 * ----------------------------------------------------------------------- */

.cbb-footer {
	background: var( --cbb-tea );
	color: var( --cbb-on-tea );
	margin-top: var( --cbb-section );
}

.cbb-footer a {
	color: var( --cbb-on-tea-80 );
	transition: color var( --cbb-m-nav );
}

.cbb-footer a:hover {
	color: var( --cbb-on-tea );
}

.cbb-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba( 252, 243, 223, 0.15 );
}

.cbb-footer .cbb-wordmark {
	color: var( --cbb-on-tea );
	font-size: 24px;
}

.cbb-footer-blurb {
	font: 400 14px/1.6 var( --cbb-body );
	color: var( --cbb-on-tea-80 );
	margin-top: 16px;
	max-width: 320px;
}

.cbb-footer h2,
.cbb-footer-head {
	font: 700 12px/1 var( --cbb-body );
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cbb-on-tea-70 );
	margin: 0 0 14px;
}

.cbb-footer-col ul {
	list-style: none;
	font: 400 15px/1.9 var( --cbb-body );
}

.cbb-footer-col li {
	list-style: none;
}

.cbb-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 26px;
	padding-block: 20px 28px;
	font: 400 13px/1.6 var( --cbb-body );
	color: var( --cbb-on-tea-70 );
}

.cbb-footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
}

.cbb-footer--compact .cbb-footer-bottom {
	padding-block: 26px;
}

/* --------------------------------------------------------------------------
 * 10. Home
 * ----------------------------------------------------------------------- */

.cbb-hero {
	text-align: center;
	padding-top: var( --cbb-section );
}

.cbb-hero h1 {
	font: 400 84px/1.02 var( --cbb-display );
	letter-spacing: -0.015em;
	max-width: 900px;
	margin: 22px auto 0;
}

.cbb-hero p {
	max-width: 600px;
	margin: 24px auto 0;
}

.cbb-hero-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.cbb-hero-shot {
	height: 460px;
	margin-top: 48px;
}

.cbb-area-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 18px;
}

.cbb-card-title {
	display: block;
}

/*
 * Area names are one line or two, so the meta under them would otherwise sit
 * at a different height in every column. Bottom-align it instead.
 */
.cbb-area-card {
	display: flex;
	flex-direction: column;
}

.cbb-area-card .cbb-card-title {
	font: 400 22px/1.15 var( --cbb-display );
	letter-spacing: 0;
	margin: 14px 0 4px;
}

.cbb-area-card .cbb-meta {
	margin-top: auto;
}

.cbb-stay-split {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 32px;
	align-items: start;
}

.cbb-stay-feature {
	display: block;
	color: inherit;
}

.cbb-stay-feature:hover {
	color: inherit;
}

.cbb-stay-feature .cbb-eyebrow {
	display: block;
	margin: 20px 0 8px;
}

.cbb-stay-feature h3,
.cbb-stay-feature .cbb-card-title {
	font: 400 30px/1.15 var( --cbb-display );
	letter-spacing: -0.01em;
}

.cbb-stay-feature p {
	font: 400 16px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
	margin-top: 12px;
	max-width: 560px;
}

.cbb-row-list {
	list-style: none;
}

.cbb-row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var( --cbb-rule );
	color: inherit;
}

.cbb-row:first-child {
	padding-top: 0;
}

.cbb-row:hover {
	color: inherit;
}

.cbb-row .cbb-card-title {
	font: 400 20px/1.2 var( --cbb-display );
	letter-spacing: 0;
}

.cbb-row .cbb-meta {
	margin-top: 6px;
}

.cbb-after-list {
	display: inline-block;
	margin-top: 22px;
}

/* The eat / season band. */
.cbb-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.cbb-two-col h2,
.cbb-two-col h3 {
	font: 400 32px/1 var( --cbb-display );
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.cbb-dot-list {
	list-style: none;
	font: 400 17px/1.6 var( --cbb-body );
}

.cbb-dot-list li {
	position: relative;
	padding: 8px 0 8px 22px;
	list-style: none;
}

.cbb-dot-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 17px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --cbb-jam );
}

.cbb-dot-list--scone li::before {
	background: var( --cbb-scone );
}

.cbb-related {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 40px;
}

.cbb-related a {
	justify-self: start;
	font: 400 22px/1.4 var( --cbb-display );
	color: var( --cbb-tea );
	letter-spacing: 0;
}

.cbb-related-block {
	padding-top: 64px;
	padding-bottom: var( --cbb-section );
}

/* --------------------------------------------------------------------------
 * 11. Area hub / archive headers
 * ----------------------------------------------------------------------- */

.cbb-hub-head {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 56px;
	align-items: end;
	padding-top: 36px;
}

/* An archive header with nothing in the right-hand column. */
.cbb-hub-head--simple {
	grid-template-columns: 1fr;
	max-width: 900px;
}

.cbb-avatar--lg {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: 18px;
}

.cbb-hub-head h1,
.cbb-page-title {
	font: 400 56px/1.05 var( --cbb-display );
	letter-spacing: -0.015em;
	margin-top: 14px;
}

.cbb-hub-head .cbb-standfirst {
	margin-top: 20px;
	max-width: 560px;
}

.cbb-facts-card {
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-feature );
	padding: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 20px;
}

.cbb-facts-card dt {
	margin-bottom: 5px;
}

.cbb-facts-card dd {
	margin: 0;
	font: 400 14px/1.5 var( --cbb-body );
	color: var( --cbb-tea );
}

.cbb-hub-hero {
	height: 420px;
	margin-top: 40px;
}

.cbb-card-grid {
	display: grid;
	gap: 18px;
}

.cbb-card-grid--3 {
	grid-template-columns: repeat( 3, 1fr );
}

.cbb-card-grid--4 {
	grid-template-columns: repeat( 4, 1fr );
}

.cbb-card .cbb-eyebrow {
	display: block;
	margin: 16px 0 6px;
}

.cbb-card .cbb-card-title {
	font: 400 22px/1.15 var( --cbb-display );
	letter-spacing: 0;
}

.cbb-card--sm .cbb-card-title {
	font-size: 20px;
	line-height: 1.2;
}

.cbb-card p {
	font: 400 14px/1.5 var( --cbb-body );
	color: var( --cbb-text-soft );
	margin-top: 6px;
}

/* Two-column guide list with thumbnails. */
.cbb-guide-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	list-style: none;
}

.cbb-guide-list li {
	list-style: none;
}

.cbb-guide-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var( --cbb-rule );
	color: inherit;
}

.cbb-guide-row:hover {
	color: inherit;
}

.cbb-guide-row .cbb-eyebrow {
	font-size: 11px;
	letter-spacing: 0.16em;
	display: block;
	margin-bottom: 6px;
}

.cbb-guide-row .cbb-card-title {
	font: 400 20px/1.2 var( --cbb-display );
	letter-spacing: 0;
}

.cbb-list-more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* Season columns. */
.cbb-season-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 32px;
}

.cbb-season-grid > * {
	border-top: 2px solid var( --cbb-jam );
	padding-top: 14px;
}

.cbb-season-grid > :nth-child( even ) {
	border-top-color: var( --cbb-scone );
}

.cbb-season-grid h3 {
	font: 400 22px/1.2 var( --cbb-display );
	letter-spacing: 0;
	margin-bottom: 8px;
}

.cbb-season-grid p {
	font: 400 15px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
}

/* Nearby areas. */
.cbb-nearby-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 18px;
}

.cbb-nearby {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-card );
	color: inherit;
}

.cbb-nearby:hover {
	color: inherit;
}

.cbb-nearby .cbb-card-title {
	font: 400 20px/1.2 var( --cbb-display );
	letter-spacing: 0;
}

.cbb-nearby .cbb-meta {
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
 * 12. Article
 * ----------------------------------------------------------------------- */

.cbb-article-head {
	max-width: 900px;
}

.cbb-article-head .cbb-eyebrow {
	display: block;
	margin-top: 36px;
}

.cbb-article-head h1 {
	font: 400 56px/1.05 var( --cbb-display );
	letter-spacing: -0.015em;
	margin-top: 14px;
}

.cbb-article-head .cbb-standfirst {
	max-width: 720px;
	margin-top: 20px;
}

.cbb-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.cbb-byline img,
.cbb-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var( --cbb-cream-deep );
}

.cbb-byline-text {
	font: 400 14px/1.5 var( --cbb-body );
	color: var( --cbb-tea );
}

.cbb-byline-text strong {
	font-weight: 700;
}

.cbb-byline-sub {
	font: 400 14px/1.4 var( --cbb-body );
	color: var( --cbb-scone-text );
	margin-top: 2px;
}

.cbb-article-hero {
	height: 520px;
	margin-top: 40px;
}

.cbb-article-body {
	display: grid;
	grid-template-columns: var( --cbb-measure ) 1fr;
	gap: 64px;
	padding-top: 56px;
	align-items: start;
}

.cbb-article-body > * {
	min-width: 0;
}

.cbb-page-body {
	padding-top: 56px;
}

.cbb-prose {
	font: 400 17px/1.7 var( --cbb-body );
	color: var( --cbb-tea );
	max-width: var( --cbb-measure );
}

.cbb-prose p {
	margin: 0 0 20px;
}

.cbb-prose > :last-child {
	margin-bottom: 0;
}

.cbb-prose h2 {
	font: 400 32px/1.15 var( --cbb-display );
	letter-spacing: -0.01em;
	margin: 44px 0 16px;
	scroll-margin-top: 100px;
}

.cbb-prose h3 {
	font: 400 24px/1.25 var( --cbb-display );
	letter-spacing: -0.01em;
	margin: 32px 0 12px;
	scroll-margin-top: 100px;
}

.cbb-prose h4 {
	font: 400 20px/1.3 var( --cbb-display );
	letter-spacing: 0;
	margin: 26px 0 10px;
}

.cbb-prose a {
	color: var( --cbb-jam );
	font-weight: 700;
	background-image: linear-gradient( currentColor, currentColor );
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
}

.cbb-prose a:hover {
	color: var( --cbb-jam-deep );
}

.cbb-prose strong {
	font-weight: 700;
}

.cbb-prose em {
	font-style: italic;
}

.cbb-prose ul,
.cbb-prose ol {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.cbb-prose li {
	position: relative;
	padding: 6px 0 6px 22px;
	list-style: none;
}

.cbb-prose ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --cbb-jam );
}

.cbb-prose ol {
	counter-reset: cbb-ol;
}

.cbb-prose ol > li {
	counter-increment: cbb-ol;
	padding-left: 30px;
}

.cbb-prose ol > li::before {
	content: counter( cbb-ol ) '.';
	position: absolute;
	left: 0;
	top: 6px;
	font: 700 14px/1.7 var( --cbb-body );
	color: var( --cbb-jam );
}

.cbb-prose blockquote {
	margin: 36px 0;
	padding: 24px 0;
	border-top: 1px solid var( --cbb-rule );
	border-bottom: 1px solid var( --cbb-rule );
	font: 400 28px/1.3 var( --cbb-display );
	letter-spacing: -0.01em;
	color: var( --cbb-jam );
}

.cbb-prose blockquote p {
	margin: 0;
}

.cbb-prose blockquote cite {
	display: block;
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-scone-text );
	font-style: normal;
	margin-top: 12px;
}

.cbb-prose figure {
	margin: 32px 0;
}

.cbb-prose figure img {
	width: 100%;
	border-radius: var( --cbb-r-card );
	background: var( --cbb-fallback );
}

.cbb-prose figcaption {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-caption );
	margin-top: 10px;
}

.cbb-prose img {
	border-radius: var( --cbb-r-card );
}

.cbb-prose table {
	width: 100%;
	margin: 0 0 24px;
	font: 400 16px/1.5 var( --cbb-body );
}

.cbb-prose th {
	text-align: left;
	font: 700 11px/1.3 var( --cbb-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --cbb-scone-text );
	padding: 0 12px 10px 0;
	border-bottom: 1px solid var( --cbb-tea );
}

.cbb-prose td {
	padding: 12px 12px 12px 0;
	border-bottom: 1px solid var( --cbb-rule );
	vertical-align: top;
}

.cbb-prose td:last-child,
.cbb-prose th:last-child {
	padding-right: 0;
}

.cbb-prose tr > :nth-child( n + 3 ) {
	color: var( --cbb-text-soft );
}

/* Tables can be wider than the measure on a phone; let them scroll rather
   than pushing the whole page sideways. */
.cbb-table-scroll {
	overflow-x: auto;
	margin: 0 0 24px;
	-webkit-overflow-scrolling: touch;
}

.cbb-table-scroll table {
	margin: 0;
	min-width: 480px;
}

.cbb-table-note {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-caption );
	margin: -14px 0 24px;
}

/* Good to know aside, derived from the article or dropped in as a block. */
.cbb-aside {
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-feature );
	padding: 28px;
	margin: 36px 0;
}

.cbb-aside > h2,
.cbb-aside > h3,
.cbb-aside > h4,
.cbb-aside-title {
	font: 400 22px/1.2 var( --cbb-display );
	letter-spacing: 0;
	margin: 0 0 12px;
}

.cbb-aside ul {
	list-style: none;
	margin: 0;
}

.cbb-aside li {
	list-style: none;
	font: 400 15px/1.6 var( --cbb-body );
	padding: 12px 0;
	border-bottom: 1px solid var( --cbb-rule );
}

.cbb-aside li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cbb-aside li::before {
	display: none;
}

.cbb-aside p {
	font: 400 15px/1.6 var( --cbb-body );
	margin: 0 0 12px;
}

.cbb-aside > :last-child {
	margin-bottom: 0;
}

/* Derived FAQ. */
.cbb-faq {
	margin: 44px 0;
}

.cbb-faq > h2 {
	margin-top: 0;
}

.cbb-faq details {
	border-bottom: 1px solid var( --cbb-rule );
}

.cbb-faq details:first-of-type {
	border-top: 1px solid var( --cbb-rule );
}

.cbb-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 18px 0;
	font: 400 20px/1.3 var( --cbb-display );
	color: var( --cbb-tea );
}

.cbb-faq summary::-webkit-details-marker {
	display: none;
}

.cbb-faq summary::after {
	content: '+';
	font: 400 22px/1 var( --cbb-body );
	color: var( --cbb-jam );
	flex: 0 0 auto;
}

.cbb-faq details[open] summary::after {
	content: '−';
}

.cbb-faq summary:hover {
	color: var( --cbb-jam );
}

.cbb-faq-answer {
	padding: 0 0 20px;
}

.cbb-faq-answer p:last-child {
	margin-bottom: 0;
}

/* Sidebar. */
.cbb-sidebar {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	font: 400 15px/1.5 var( --cbb-body );
}

.cbb-toc-label {
	font: 700 12px/1 var( --cbb-body );
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cbb-scone-text );
	margin-bottom: 12px;
}

.cbb-toc ul {
	list-style: none;
}

.cbb-toc li {
	list-style: none;
}

.cbb-toc a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid var( --cbb-rule );
	color: var( --cbb-tea );
	font: 400 15px/1.5 var( --cbb-body );
	transition: color var( --cbb-m-nav ), border-color var( --cbb-m-nav );
}

.cbb-toc a:hover {
	color: var( --cbb-jam );
}

.cbb-toc a.is-current {
	border-left-color: var( --cbb-jam );
	color: var( --cbb-jam );
	font-weight: 700;
}

.cbb-side-card {
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-card );
	padding: 18px;
	display: block;
	color: inherit;
	transition: background var( --cbb-m-button );
}

.cbb-side-card:hover {
	background: var( --cbb-cream-deep );
	color: inherit;
}

.cbb-side-card .cbb-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	margin-bottom: 12px;
}

.cbb-side-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 14px;
	align-items: center;
}

.cbb-side-row .cbb-card-title {
	font: 400 19px/1.2 var( --cbb-display );
	letter-spacing: 0;
}

.cbb-side-dark {
	background: var( --cbb-tea );
	border-radius: var( --cbb-r-card );
	padding: 20px;
	display: block;
	color: var( --cbb-on-tea );
}

.cbb-side-dark:hover {
	color: var( --cbb-on-tea );
}

.cbb-side-dark .cbb-label {
	color: var( --cbb-on-tea-70 );
	margin-bottom: 10px;
	display: block;
}

.cbb-side-dark strong {
	font: 400 19px/1.3 var( --cbb-display );
	color: var( --cbb-on-tea );
	display: block;
}

.cbb-side-list {
	list-style: none;
}

.cbb-side-list li {
	list-style: none;
	border-bottom: 1px solid var( --cbb-rule );
}

.cbb-side-list li:last-child {
	border-bottom: 0;
}

.cbb-side-list a {
	display: block;
	padding: 12px 0;
	font: 400 16px/1.4 var( --cbb-display );
	color: var( --cbb-tea );
}

.cbb-side-list a:hover {
	color: var( --cbb-jam );
}

/* Author box. */
.cbb-authorbox {
	max-width: var( --cbb-measure );
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var( --cbb-rule );
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 20px;
	align-items: start;
}

.cbb-authorbox img,
.cbb-authorbox .cbb-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

.cbb-authorbox h2 {
	font: 400 22px/1.2 var( --cbb-display );
	letter-spacing: 0;
	margin-bottom: 8px;
}

.cbb-authorbox p {
	font: 400 15px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
 * 13. Stay
 * ----------------------------------------------------------------------- */

.cbb-stay-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-top: 36px;
}

.cbb-stay-head h1 {
	font: 400 56px/1.05 var( --cbb-display );
	letter-spacing: -0.015em;
	margin-top: 14px;
}

.cbb-stay-head .cbb-standfirst {
	max-width: 640px;
	margin-top: 20px;
}

.cbb-price-block {
	flex: 0 0 auto;
	text-align: right;
}

.cbb-price {
	font: 400 40px/1 var( --cbb-display );
	letter-spacing: 0;
	color: var( --cbb-tea );
	margin: 6px 0 8px;
	display: block;
}

.cbb-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 250px 250px;
	gap: 14px;
	margin-top: 40px;
}

.cbb-gallery > * {
	overflow: hidden;
	background: var( --cbb-fallback );
	position: relative;
	border: 0;
	padding: 0;
	cursor: zoom-in;
}

.cbb-gallery > :first-child {
	grid-row: span 2;
	border-radius: 28px 12px 12px 28px;
}

.cbb-gallery > :nth-child( 2 ) {
	border-radius: 12px 28px 12px 12px;
}

.cbb-gallery > :nth-child( 3 ) {
	border-radius: 12px 12px 28px 12px;
}

.cbb-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbb-gallery--single > :first-child {
	grid-row: span 2;
	grid-column: span 2;
	border-radius: var( --cbb-r-hero );
}

.cbb-facts-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
}

.cbb-fact {
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-card );
	padding: 18px;
}

.cbb-fact dt {
	margin-bottom: 8px;
}

.cbb-fact dd {
	margin: 0;
}

.cbb-fact-value {
	font: 400 22px/1.15 var( --cbb-display );
	letter-spacing: 0;
	display: block;
}

.cbb-fact-note {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-text-soft );
	display: block;
	margin-top: 4px;
}

.cbb-book {
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-feature );
	padding: 28px;
}

.cbb-book .cbb-price {
	margin: 6px 0 20px;
}

.cbb-book-contact {
	font: 400 14px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
	text-align: center;
	margin-top: 16px;
}

.cbb-book-contact a {
	color: var( --cbb-text-soft );
	font-weight: 600;
}

.cbb-book-contact a:hover {
	color: var( --cbb-jam );
}

.cbb-disclosure {
	font: 400 13px/1.6 var( --cbb-body );
	color: var( --cbb-caption );
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var( --cbb-rule );
}

/* Fixed bottom bar replaces the book box on small screens. */
.cbb-book-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	height: 64px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 20px;
	background: rgba( 252, 243, 223, 0.96 );
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
	border-top: 1px solid var( --cbb-rule );
}

.cbb-book-bar .cbb-price {
	font-size: 26px;
	margin: 0;
}

.cbb-book-bar .cbb-btn {
	padding: 12px 20px;
	font-size: 14px;
}

/* Lightbox. */
.cbb-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.cbb-lightbox::backdrop {
	background: rgba( 252, 243, 223, 0.96 );
}

.cbb-lightbox-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 56px;
	position: relative;
}

.cbb-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var( --cbb-r-card );
}

.cbb-lightbox button {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var( --cbb-rule );
	background: var( --cbb-cream );
	color: var( --cbb-tea );
	cursor: pointer;
	font: 400 20px/1 var( --cbb-body );
	display: flex;
	align-items: center;
	justify-content: center;
}

.cbb-lb-prev {
	left: 16px;
	top: 50%;
	transform: translateY( -50% );
}

.cbb-lb-next {
	right: 16px;
	top: 50%;
	transform: translateY( -50% );
}

.cbb-lb-close {
	right: 16px;
	top: 16px;
}

/* --------------------------------------------------------------------------
 * 14. Directory
 * ----------------------------------------------------------------------- */

.cbb-intro-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: end;
	padding-top: 48px;
}

.cbb-intro-split .cbb-standfirst {
	max-width: 520px;
}

.cbb-filters {
	position: sticky;
	top: var( --cbb-header-h );
	z-index: 30;
	background: var( --cbb-cream );
	margin-top: 40px;
	padding-block: 14px;
	border-top: 1px solid var( --cbb-rule );
	border-bottom: 1px solid var( --cbb-rule );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.cbb-filters-left,
.cbb-filters-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cbb-select-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.cbb-select-chip select {
	font: 600 13px/1 var( --cbb-body );
	color: var( --cbb-tea );
	padding: 9px 32px 9px 14px;
	border: 1px solid var( --cbb-rule );
	border-radius: var( --cbb-r-pill );
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/*
 * Drawn rather than typed: Mulish has no U+25BE, and the fallback glyph the
 * browser substitutes reads as a stray hyphen.
 */
.cbb-select-chip::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -2px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var( --cbb-scone );
}

.cbb-clear {
	font: 600 13px/1 var( --cbb-body );
	color: var( --cbb-jam );
	padding: 9px 4px;
}

.cbb-count {
	font: 400 13px/1 var( --cbb-body );
	color: var( --cbb-scone-text );
}

.cbb-dir-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px 18px;
	padding-top: 40px;
	transition: opacity 200ms ease;
}

.cbb-dir-grid.is-loading {
	opacity: 0.6;
}

.cbb-empty {
	padding: 72px 0;
	text-align: center;
}

.cbb-empty h2 {
	font: 400 30px/1.2 var( --cbb-display );
	margin-bottom: 12px;
}

.cbb-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 48px 0 var( --cbb-section );
}

.cbb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var( --cbb-rule );
	font: 600 14px/1 var( --cbb-body );
	color: var( --cbb-tea );
	transition: background var( --cbb-m-button );
}

.cbb-pagination .page-numbers:hover {
	background: var( --cbb-cream-deep );
	color: var( --cbb-tea );
}

.cbb-pagination .page-numbers.current {
	background: var( --cbb-tea );
	border-color: var( --cbb-tea );
	color: var( --cbb-cream );
}

.cbb-pagination .page-numbers.dots {
	border-color: transparent;
}

.cbb-pagination .next,
.cbb-pagination .prev {
	width: auto;
	height: auto;
	border: 0;
	padding: 0 8px;
	color: var( --cbb-jam );
	font-weight: 700;
}

.cbb-pagination .next:hover,
.cbb-pagination .prev:hover {
	background: transparent;
	color: var( --cbb-jam-deep );
}

/* --------------------------------------------------------------------------
 * 15. Search + 404
 * ----------------------------------------------------------------------- */

.cbb-search-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	padding-top: 48px;
	padding-bottom: var( --cbb-section );
	align-items: start;
}

.cbb-search-layout > * {
	min-width: 0;
}

.cbb-search-big {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-pill );
	padding: 16px 26px;
	margin: 0 0 32px;
}

.cbb-search-big input[type='search'] {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: 0;
	font: 400 28px/1.2 var( --cbb-display );
	color: var( --cbb-tea );
	-webkit-appearance: none;
	appearance: none;
}

.cbb-search-big button {
	border: 0;
	background: transparent;
	font: 700 14px/1 var( --cbb-body );
	color: var( --cbb-jam );
	cursor: pointer;
	flex: 0 0 auto;
}

.cbb-results {
	list-style: none;
}

.cbb-result {
	display: grid;
	grid-template-columns: 1fr 140px;
	gap: 24px;
	align-items: start;
	padding: 24px 0;
	border-bottom: 1px solid var( --cbb-rule );
	list-style: none;
}

.cbb-result:first-child {
	border-top: 1px solid var( --cbb-rule );
}

.cbb-result-title {
	font: 400 24px/1.2 var( --cbb-display );
	letter-spacing: 0;
	margin: 6px 0 8px;
}

.cbb-result-title a {
	color: var( --cbb-tea );
}

.cbb-result-title a:hover {
	color: var( --cbb-jam );
}

.cbb-result p {
	font: 400 15px/1.6 var( --cbb-body );
	color: var( --cbb-text-soft );
}

.cbb-result mark {
	background: var( --cbb-cream-deep );
	color: inherit;
	padding: 0 2px;
}

.cbb-result .cbb-eyebrow--stay {
	color: var( --cbb-scone-text );
}

.cbb-sidebar-block + .cbb-sidebar-block {
	margin-top: 32px;
}

.cbb-404 {
	text-align: center;
	padding: 96px 0 120px;
}

.cbb-sun {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 auto 36px;
}

.cbb-sun i {
	display: block;
	width: 80px;
	height: 40px;
	border-radius: 40px 40px 0 0;
	background: var( --cbb-cream-deep );
}

.cbb-sun b {
	display: block;
	width: 104px;
	height: 6px;
	background: var( --cbb-scone );
}

.cbb-404 h1 {
	font: 400 72px/1.02 var( --cbb-display );
	letter-spacing: -0.015em;
	max-width: 760px;
	margin: 14px auto 0;
}

.cbb-404 p {
	max-width: 520px;
	margin: 20px auto 0;
}

.cbb-404 .cbb-search-big {
	max-width: 560px;
	margin: 32px auto;
}

.cbb-404 .cbb-search-big input[type='search'] {
	font-size: 20px;
}

.cbb-404 .cbb-chips {
	justify-content: center;
}

/* --------------------------------------------------------------------------
 * 16. Comments and forms
 * ----------------------------------------------------------------------- */

.cbb-comments {
	max-width: var( --cbb-measure );
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var( --cbb-rule );
}

.cbb-comments h2 {
	font: 400 32px/1.15 var( --cbb-display );
	letter-spacing: -0.01em;
	margin-bottom: 24px;
}

.cbb-comments ol {
	list-style: none;
}

.cbb-comments li {
	list-style: none;
}

.cbb-comments .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var( --cbb-rule );
}

.cbb-comments .children {
	padding-left: 26px;
}

.cbb-comments .comment-meta {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-scone-text );
	margin-bottom: 8px;
}

.cbb-comments .comment-author .fn {
	font-style: normal;
	font-weight: 700;
	color: var( --cbb-tea );
}

.cbb-comments .comment-content {
	font: 400 16px/1.7 var( --cbb-body );
}

.cbb-comments .reply {
	font: 700 13px/1 var( --cbb-body );
	margin-top: 10px;
}

.comment-respond {
	margin-top: 32px;
}

.comment-reply-title {
	font: 400 24px/1.2 var( --cbb-display );
	margin-bottom: 8px;
}

.comment-form p {
	margin-bottom: 16px;
}

.comment-form label {
	display: block;
	font: 700 11px/1.3 var( --cbb-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --cbb-scone-text );
	margin-bottom: 6px;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='password'],
textarea,
select {
	width: 100%;
	max-width: 100%;
	background: var( --cbb-cream-deep );
	border: 1px solid transparent;
	border-radius: var( --cbb-r-thumb );
	padding: 12px 16px;
	font: 400 16px/1.5 var( --cbb-body );
	color: var( --cbb-tea );
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
	outline: 2px solid var( --cbb-jam );
	outline-offset: 2px;
}

input[type='submit'],
button[type='submit'].cbb-btn {
	background: var( --cbb-jam );
	color: var( --cbb-cream );
	border: 0;
	border-radius: var( --cbb-r-pill );
	padding: 15px 26px;
	font: 700 15px/1 var( --cbb-body );
	cursor: pointer;
	width: auto;
	transition: transform var( --cbb-m-button ), box-shadow var( --cbb-m-button );
}

input[type='submit']:hover {
	transform: translateY( -2px );
	box-shadow: var( --cbb-shadow-button );
}

.cbb-form-error {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-jam );
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
 * 17. Editor-facing block styles
 *
 * These are registered as core block styles so an editor can reach the theme's
 * furniture without writing HTML, and they are also what the derived markup in
 * inc/content-filters.php emits.
 * ----------------------------------------------------------------------- */

.wp-block-group.is-style-cbb-aside {
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-feature );
	padding: 28px;
}

.wp-block-table.is-style-cbb-panel table {
	background: var( --cbb-cream-deep );
	border-radius: var( --cbb-r-thumb );
	overflow: hidden;
}

.wp-block-table.is-style-cbb-panel td,
.wp-block-table.is-style-cbb-panel th {
	padding-left: 16px;
}

.alignwide {
	width: min( 1092px, 100% );
	margin-inline: auto;
}

.alignfull {
	width: 100%;
}

.aligncenter {
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 6px 26px 20px 0;
}

.alignright {
	float: right;
	margin: 6px 0 20px 26px;
}

.wp-caption-text,
.wp-element-caption {
	font: 400 13px/1.5 var( --cbb-body );
	color: var( --cbb-caption );
	margin-top: 10px;
}

.sticky,
.bypostauthor {
	/* Required by the theme review guidelines; nothing visual is attached. */
}

/* --------------------------------------------------------------------------
 * 17b. Tap targets
 *
 * WCAG 2.2 wants 24x24 CSS pixels for anything you click. Several of the
 * design's links are 13-15px text on a tight line, which measures 14-20px tall,
 * so the ones that are not already inside a large card get their box grown
 * without moving anything: the padding is vertical only and the line box was
 * already leaving that much room.
 * ----------------------------------------------------------------------- */

.cbb-more,
.cbb-clear,
.cbb-breadcrumb a,
.cbb-footer-col a,
.cbb-footer-bottom a,
.cbb-side-list a,
.cbb-toc a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.cbb-toc a,
.cbb-side-list a {
	display: flex;
}

.cbb-search-big button,
.cbb-search-pill button {
	min-height: 24px;
	min-width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cbb-pagination .next,
.cbb-pagination .prev {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

/* 24px so the checkbox itself is the target, not only its label. */
.comment-form input[type='checkbox'] {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	accent-color: var( --cbb-jam );
}

.comment-form .comment-form-cookies-consent label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 400;
	color: var( --cbb-text-soft );
}

/* --------------------------------------------------------------------------
 * 18. Responsive
 * ----------------------------------------------------------------------- */

@media ( max-width: 1279px ) {
	.cbb-nav {
		gap: 12px 18px;
		font-size: 13px;
	}

	.cbb-search-pill {
		width: 190px;
	}
}

@media ( max-width: 1099px ) {
	:root {
		--cbb-gutter: 32px;
		--cbb-section: 56px;
	}

	.cbb-hero h1 {
		font-size: 64px;
	}

	.cbb-area-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.cbb-hub-head {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cbb-facts-card {
		max-width: 560px;
	}

	.cbb-article-body {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.cbb-prose {
		max-width: none;
	}

	.cbb-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
		gap: 26px;
	}

	.cbb-search-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cbb-guide-list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.cbb-season-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 26px;
	}

	.cbb-nearby-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cbb-card-grid--4 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cbb-dir-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 899px ) {
	.cbb-nav {
		display: none;
	}

	.cbb-header-inner > .cbb-search-pill {
		display: none;
	}

	.cbb-round {
		display: flex;
	}

	.cbb-hero h1 {
		font-size: 52px;
	}

	.cbb-hero-shot {
		height: 340px;
	}

	.cbb-stay-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cbb-two-col {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cbb-related {
		grid-template-columns: 1fr;
	}

	.cbb-intro-split {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.cbb-stay-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.cbb-price-block {
		text-align: left;
	}

	.cbb-gallery {
		grid-template-rows: 200px 200px;
	}

	.cbb-card-grid--3 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cbb-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.cbb-article-head h1,
	.cbb-hub-head h1,
	.cbb-stay-head h1,
	.cbb-page-title {
		font-size: 44px;
	}

	.cbb-article-hero {
		height: 380px;
	}

	.cbb-hub-hero {
		height: 320px;
	}

	.cbb-404 h1 {
		font-size: 52px;
	}

	/* The book box moves to a fixed bar. */
	body.cbb-has-bookbar .cbb-book {
		display: none;
	}

	body.cbb-has-bookbar {
		padding-bottom: 64px;
	}

	.cbb-book-bar {
		display: flex;
	}

	.cbb-filters {
		position: static;
	}
}

@media ( max-width: 719px ) {
	:root {
		--cbb-gutter: 20px;
		--cbb-section: 44px;
	}

	.cbb-header-inner {
		padding-block: 16px;
	}

	.cbb-wordmark {
		font-size: 20px;
	}

	.cbb-mark i {
		width: 20px;
		height: 10px;
		border-radius: 10px 10px 0 0;
	}

	.cbb-mark b {
		width: 26px;
	}

	.cbb-hero {
		text-align: left;
	}

	.cbb-hero h1 {
		font-size: 46px;
		line-height: 1.02;
		margin-inline: 0;
	}

	.cbb-hero p {
		font-size: 16px;
		margin-inline: 0;
	}

	.cbb-hero-actions {
		flex-direction: column;
		justify-content: flex-start;
		gap: 10px;
	}

	.cbb-hero-actions .cbb-btn {
		width: 100%;
	}

	.cbb-hero-shot {
		height: 260px;
		border-radius: var( --cbb-r-feature );
		margin-top: 32px;
	}

	.cbb-section-head h2 {
		font-size: 30px;
	}

	.cbb-h2-sm,
	.cbb-two-col h2,
	.cbb-two-col h3 {
		font-size: 26px;
	}

	/* Areas become a snap scroller rather than a cramped grid. */
	.cbb-area-scroller {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc( var( --cbb-gutter ) * -1 );
		padding-inline: var( --cbb-gutter );
		/*
		 * Without this the rail loads already scrolled by one gutter: mandatory
		 * snapping aligns the first card to the scrollport edge, which means
		 * scrolling straight past the left padding and clipping the card.
		 */
		scroll-padding-inline: var( --cbb-gutter );
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cbb-area-scroller::-webkit-scrollbar {
		display: none;
	}

	.cbb-area-scroller > * {
		flex: 0 0 150px;
		scroll-snap-align: start;
	}

	.cbb-row {
		grid-template-columns: 72px 1fr;
		gap: 14px;
	}

	.cbb-guide-row {
		grid-template-columns: 84px 1fr;
		gap: 14px;
	}

	.cbb-nearby {
		grid-template-columns: 84px 1fr;
	}

	.cbb-card-grid--3,
	.cbb-card-grid--4,
	.cbb-dir-grid,
	.cbb-nearby-grid,
	.cbb-season-grid {
		grid-template-columns: 1fr;
	}

	.cbb-facts-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cbb-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: 220px;
	}

	.cbb-gallery > * {
		border-radius: var( --cbb-r-feature ) !important;
	}

	.cbb-gallery > :first-child {
		grid-row: span 1;
	}

	.cbb-gallery > :nth-child( n + 3 ) {
		display: none;
	}

	.cbb-result {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.cbb-result .cbb-shot {
		max-width: 200px;
		order: -1;
	}

	.cbb-article-head h1,
	.cbb-hub-head h1,
	.cbb-stay-head h1,
	.cbb-page-title {
		font-size: 38px;
	}

	.cbb-article-hero,
	.cbb-hub-hero {
		height: 240px;
		border-radius: var( --cbb-r-feature );
	}

	.cbb-prose h2 {
		font-size: 26px;
	}

	.cbb-404 {
		padding: 56px 0 80px;
	}

	.cbb-404 h1 {
		font-size: 40px;
	}

	.cbb-footer-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.cbb-footer-links-mobile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px;
	}

	.cbb-authorbox {
		grid-template-columns: 1fr;
	}

	.cbb-search-big {
		padding: 12px 18px;
	}

	.cbb-search-big input[type='search'] {
		font-size: 20px;
	}

	.cbb-lightbox-inner {
		padding: 20px;
	}
}

/* --------------------------------------------------------------------------
 * 19. Motion opt-out and print
 * ----------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cbb-lift:hover,
	.cbb-btn:hover {
		transform: none;
	}

	.cbb-draw:hover {
		background-size: 100% 2px;
	}
}

@media print {
	.cbb-header,
	.cbb-footer,
	.cbb-sidebar,
	.cbb-book,
	.cbb-book-bar,
	.cbb-filters,
	.cbb-related-block {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.cbb-article-body {
		display: block;
	}
}