/* ==========================================================================
   barthartogsveld.nl — site.css, version 2 (5 November 2026)

   Rebuilt from the signed-off SHIPS boards (October), which supersede the
   September patterns this file used to hold. Version 1 is kept in the
   project at build/barthartogsveld-child/assets/css/site.v1.css.

   ONE BOUNDARY, AT 1024px (168): the phone layout is the base and the web
   layout starts at 1024. Hover effects live inside (hover: hover); a touch
   screen gets the same feedback on the press (284, 284a).

   Every component class starts with bh-, or is one of the header and footer
   classes the boards used (bhh, bhbar, ftr ...), so nothing here reaches an
   Elementor page or a plugin's markup by accident.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--ground: #F3EEE4; --raised: #F6F2EA; --sunken: #E9E4DA;
	--feature: #A3AC9F; --accent: #2A322C; --accent-text: #F6F2EA; --tint: #E7EAE4;
	--ink: #1F1A15; --muted: #6B6559;
	--rule: #DFDCD3; --frame: #C9C2B2; --field: #8F8878;
	--display: 'Hedvig Letters Serif', Georgia, 'Times New Roman', serif;
	--body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--s-2xs: 8px; --s-xs: 12px; --s-s: 16px; --s-m: 24px; --s-l: 32px; --s-xl: 48px; --s-2xl: 64px; --s-3xl: 96px;
	--ease: cubic-bezier(.2,.7,.2,1); --sweep: 260ms; --quick: 140ms; --slow: 420ms;
	/* where a fixed bar sits, and where something absolute at the top of the page sits:
	   0 for visitors, below the admin bar for a logged-in preview */
	--bh-top: 0px; --bh-abs: 0px;
	--bh-bar: 56px;
	--bh-gut: 24px;
}
@media (min-width: 1024px) { :root { --bh-gut: max(40px, calc((100vw - 1200px) / 2 + 40px)); } }
@media (min-width: 783px) { body.admin-bar { --bh-top: 32px; --bh-abs: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar { --bh-top: 46px; --bh-abs: 46px; } }
@media (max-width: 600px) { body.admin-bar { --bh-abs: 46px; } }

/* 2. Guards and the page ---------------------------------------------------- */
/* 17e, 17f: one display weight and no italic, so the browser must never fake them */
html { font-synthesis: none; -webkit-font-synthesis: none; scroll-padding-top: calc(var(--bh-bar) + var(--bh-top) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.bh-menu-open { overflow: hidden; }
body, body.ast-separate-container, body.ast-page-builder-template, body.ast-plain-container, body.ast-narrow-container {
	background-color: var(--ground); color: var(--ink);
	font-family: var(--body); font-size: 17px; line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 400; color: inherit; }
/* Astra's own header and footer are removed in functions.php; this is the belt to that brace */
#masthead, .site-header:not(.bhh):not(.bhbar), .site-footer:not(.ftr), .ast-mobile-header-wrap, #ast-scroll-top { display: none !important; }

/* The full-width, untitled page every R1 page uses (157c): Astra's wrappers stand aside */
.ast-page-builder-template .site-content > .ast-container { max-width: 100%; padding: 0; }
.ast-page-builder-template .site-content #primary { margin: 0; padding: 0; width: 100%; }
.ast-page-builder-template .ast-article-single, .ast-page-builder-template .ast-article-post { margin: 0; padding: 0; }
.ast-page-builder-template .entry-header { display: none; }
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .bh-sec { max-width: none; }
.entry-content > .bh-sec { max-width: none; width: 100%; margin: 0; }
/* Astra pads every top-level group with `.entry-content > .wp-block-group` (0,1,1); the sections set their own */
.entry-content > .wp-block-group.bh-sec { margin: 0; padding: 0; }
.bh-sec { box-sizing: border-box; }
.bh-sec :where(p, h1, h2, h3, figure, blockquote) { margin-top: 0; }

/* the text column, centred at 1200 on web */
.bh-wrap { box-sizing: border-box; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1024px) { .bh-wrap { padding-left: 40px; padding-right: 40px; } }

/* 3. Type ------------------------------------------------------------------- */
/* Astra's Customizer heading font is (0,1,1); this is the same weight and comes later */
.bh-sec h1, .bh-sec h2, .bh-sec h3, .bh-sec h4 { font-family: var(--display); font-weight: 400; text-transform: none; }
/* the headings take the page's ink, not Astra's #3A3A3A (it showed once the page went dark, 6 Nov) */
.entry-content .bh-sec h1, .entry-content .bh-sec h2, .entry-content .bh-sec h3, .entry-content .bh-sec h4, .entry-content .bh-sec h5, .entry-content .bh-sec h6 { color: inherit; }
.bh-sec h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--s-s); }
.bh-sec h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.bh-sec p { margin: 0 0 var(--s-s); }
.bh-sec p:last-child { margin-bottom: 0; }
.bh-eyebrow, .bh-sec .bh-eyebrow { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; margin: 0; color: var(--muted); }
@media (min-width: 1024px) {
	.bh-sec h2 { font-size: 36px; line-height: 1.18; }
	.bh-sec h3 { font-size: 24px; }
	.bh-eyebrow, .bh-sec .bh-eyebrow { font-size: 13px; }
}

/* 4. Links, focus ----------------------------------------------------------- */
/* option B, "the line": a text link rests on 1px and the line thickens to 2px, drawn left to right */
.bh-sec a:not([class]), .bhm-c a {
	color: inherit; text-decoration: none; padding-bottom: 1px;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0 2px, 100% 1px;
	transition: background-size var(--sweep) var(--ease);
}
.bh-sec a:not([class]):active, .bh-sec a:not([class]):focus-visible, .bhm-c a:active, .bhm-c a:focus-visible { background-size: 100% 2px, 100% 1px; }
@media (hover: hover) { .bh-sec a:not([class]):hover, .bhm-c a:hover { background-size: 100% 2px, 100% 1px; } }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
html, body, a, button, label, input { -webkit-tap-highlight-color: transparent; }

/* 5. Buttons ---------------------------------------------------------------- */
/* Astra's button rule is (0,2,0) and Title-Cases the label (171); this is (0,4,0) */
.bh-sec .wp-block-buttons { display: flex; flex-direction: column; gap: var(--s-xs); margin: 0; }
.bh-sec .wp-block-button { margin: 0; width: 100%; }
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button {
	position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
	display: block; width: 100%; text-align: center;
	font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none;
	padding: 16px 20px; border-radius: 2px; border: 1px solid var(--accent);
	background: var(--accent); color: var(--accent-text); text-decoration: none; box-shadow: none;
	transition: border-color var(--quick) var(--ease);
}
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: #151A16;
	transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease);
}
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:active::before,
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:focus-visible::before { transform: scaleX(1); transition-duration: 160ms; }
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button,
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:hover,
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:focus,
.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:active { color: var(--accent-text); }
@media (hover: hover) { .bh-sec .wp-block-button > .wp-block-button__link.wp-element-button:hover::before { transform: scaleX(1); } }
@media (min-width: 1024px) {
	.bh-sec .wp-block-buttons { flex-direction: row; gap: var(--s-s); }
	.bh-sec .wp-block-button { width: auto; }
	.bh-sec .wp-block-button > .wp-block-button__link.wp-element-button { display: inline-block; width: auto; padding: 15px 22px; }
}

/* 6. The hero (bh-hero) ------------------------------------------------------- */
.bh-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	height: 100vh; height: 100svh; min-height: 560px; background: #3B4238; color: var(--raised); }
.bh-hero .bh-hero__img { position: absolute; inset: 0; z-index: 0; margin: 0; }
.bh-hero .bh-hero__img picture, .bh-hero .bh-hero__img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 28%; }
/* the phone's scrim runs bottom to top */
.bh-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
	linear-gradient(to top, rgba(31,26,21,.96) 0%, rgba(31,26,21,.72) 44%, rgba(31,26,21,0) 74%),
	linear-gradient(to bottom, rgba(31,26,21,.45) 0%, rgba(31,26,21,0) 18%); }
.bh-hero .bh-hero__copy { position: relative; z-index: 2; box-sizing: border-box; width: 100%; padding: 0 24px 40px; text-align: center; }
.bh-hero .bh-hero__copy .bh-eyebrow { display: none; }
.bh-hero .bh-hero__copy h1 { font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; color: var(--raised); margin: 0 0 18px; }
.bh-hero .bh-hero__copy h1 br { display: none; }
.bh-hero .bh-hero__copy .bh-lede { font-size: 17px; line-height: 1.55; color: #DFDCD3; margin: 0 0 var(--s-m); }
/* the outlined button on the photograph: a translucent dark fill behind a cream border (45z1) */
.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { background: rgba(31,26,21,.28); border: 1px solid rgba(246,242,234,.85); color: #F6F2EA; }
.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(246,242,234,.20); }
/* the one scroll cue (138a): top left on the phone, "Scroll down" */
.bh-hero .bh-hero__cue { position: absolute; z-index: 3; left: 24px; top: var(--bh-abs); height: 56px; display: flex; align-items: center; margin: 0; }
/* phone: "Scroll down" on one line with the appearance icon and the menu button, the middle of the 56px bar (11 Nov, Bart) */
.bh-hero .bh-hero__cue a { display: inline-flex; align-items: center; gap: 8px; color: #F0ECE3; text-decoration: none; background: none; padding: 0;
	font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.bh-hero .bh-hero__cue .bh-cue-web { display: none; }
@media (min-width: 1024px) {
	.bh-hero { height: auto; min-height: 780px; min-height: max(620px, 100svh); }
	.bh-hero .bh-hero__img img { object-position: 50% 50%; }
	/* on web the gradient runs left to right, so only the text side darkens */
	.bh-hero::before { background: linear-gradient(to right, rgba(31,26,21,.82) 0%, rgba(31,26,21,.45) 38%, rgba(31,26,21,0) 68%); }
	/* 5 Nov (Bart, 285e): the hero copy keeps a 40px gutter from the screen edge at every width, as on the boards */
	/* 5 Nov (Bart, 285f): halfway between the 40px edge and the centred column, so on a 1920px screen the copy
	   starts about 220px in rather than 40 or 400; at 1200 and below it is 40px, as on the boards */
	.bh-hero { --bh-hero-gut: max(40px, calc((100vw - 1200px) / 4 + 40px)); }
	.bh-hero .bh-hero__copy { max-width: none; margin: 0; padding: 0 40px 92px var(--bh-hero-gut); text-align: left; }
	.bh-hero .bh-hero__copy > * { max-width: 480px; }
	.bh-hero .bh-hero__copy .bh-eyebrow { display: block; color: #D8DCD4; margin-bottom: 18px; }
	.bh-hero .bh-hero__copy h1 { font-size: 46px; line-height: 1.1; letter-spacing: -0.01em; color: #FBF8F2; margin: 0; }
	.bh-hero .bh-hero__copy h1 br { display: inline; }
	.bh-hero .bh-hero__copy .bh-lede { font-size: 19px; line-height: 1.6; color: #EDE8DE; margin: 20px 0 32px; }
	.bh-hero .bh-hero__cue { top: auto; bottom: 34px; left: var(--bh-hero-gut); height: auto; display: block; }
	.bh-hero .bh-hero__cue a { gap: 9px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
	.bh-hero .bh-hero__cue .bh-cue-web { display: inline; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--sweep) var(--ease); }
	.bh-hero .bh-hero__cue .bh-cue-phone { display: none; }
	.bh-hero .bh-hero__cue a:hover .bh-cue-web, .bh-hero .bh-hero__cue a:focus-visible .bh-cue-web { background-size: 100% 1px; }
}

/* 7. The path: stacking pages (bh-path, bh-step) ----------------------------- */
/* Every step is a page of its own, sticky under the bar with an opaque ground,
   so the next one slides up over the one being read. The height is a definite
   length - an auto height lets two pages share the screen. */
.bh-path { background: var(--ground); }
.bh-path__title, .bh-step {
	position: sticky; top: calc(var(--bh-top) + var(--bh-bar));
	height: calc(100vh - var(--bh-bar) - var(--bh-top)); height: calc(100svh - var(--bh-bar) - var(--bh-top));
	/* svh, not dvh (11 Nov, Bart): dvh changes while the phone's address bar slides in and out, so the five
	   pages changed height under the finger and everything below them jumped */
	box-sizing: border-box; background: var(--ground); margin: 0;
}
.bh-path__title { display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.bh-sec .bh-path__title h2 { font-size: 34px; line-height: 1.16; text-align: center; max-width: 16ch; margin: 0; }
.bh-step { border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas: "num title" "fig fig" "body body"; padding: 22px 24px 26px; }
.bh-sec .bh-step .bh-step__num { grid-area: num; align-self: stretch; display: flex; align-items: flex-end; margin: 0; padding-bottom: var(--s-xs); border-bottom: 1px solid var(--rule);
	font-family: var(--display); font-size: 44px; line-height: 0.84; letter-spacing: -0.04em; color: #B9B0A0; }
.bh-sec .bh-step h3 { grid-area: title; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; margin: 0; padding: 0 0 var(--s-xs) 14px; border-bottom: 1px solid var(--rule);
	font-size: 24px; line-height: 1.18; }
.bh-step .bh-step__img { grid-area: fig; display: flex; min-height: 0; margin: 18px -24px var(--s-s); box-sizing: border-box;
	border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); background: var(--raised); padding: 8px; }
.bh-step .bh-step__img img { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; max-width: none; box-sizing: border-box;
	object-fit: cover; object-position: 50% 50%; border: 1px solid var(--frame); background: var(--sunken); }
.bh-step--1 .bh-step__img img { object-position: 50% 56%; }
/* Phone (11 Nov, Bart: "not centred and cut off" on an iPhone): Safari sizes an image with height:100%
   inside a flex box by its own height, so the crop slid off-centre. As on the SHIPS board, the photo is
   laid absolutely inside its plate instead, so the plate alone decides its size */
@media (max-width: 1023px) {
	.bh-step .bh-step__img { position: relative; }
	.bh-step .bh-step__img img { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
	/* the phone frame is wider than these upright photos, so it shows a band of each: keep the heads in it
	   (photo 1 the horse's head, photo 4 the rider's) rather than the middle of the picture */
	.bh-step--1 .bh-step__img img { object-position: 50% 30%; }
	.bh-step--4 .bh-step__img img { object-position: 50% 14%; }
	/* more room for the photos (12 Nov, Bart): the card is 20px taller than the screen (the extra lies in its
	   own bottom padding, so no words go under the browser bar) and the white space around the photo is tighter */
	.bh-step { height: calc(100vh - var(--bh-bar) - var(--bh-top) + 20px); height: calc(100svh - var(--bh-bar) - var(--bh-top) + 20px); padding-top: 16px; }
	.bh-step .bh-step__img { margin: 12px -24px 12px; padding: 6px; }
	.bh-step .bh-step__img img { top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
}
.bh-sec .bh-step .bh-step__body { grid-area: body; margin: 0; font-size: 15px; line-height: 1.55; }
@keyframes bh-arrive { from { transform: translateY(26px); } to { transform: translateY(0); } }
@supports (animation-timeline: view()) {
	.bh-step { animation: bh-arrive linear both; animation-timeline: view(block); animation-range: cover 0% cover 30%; }
}
@media (min-width: 1024px) {
	.bh-path__title { position: static; height: auto; display: block; padding: var(--s-3xl) 40px var(--s-2xl); text-align: center; }
	.bh-sec .bh-path__title h2 { font-size: 36px; line-height: 1.18; max-width: none; margin: 0 auto; }
	.bh-step { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
		grid-template-areas: "fig ." "fig num" "fig title" "fig body" "fig ."; column-gap: var(--s-3xl);
		padding: 52px var(--bh-gut); box-shadow: 0 -18px 30px -24px rgba(31,26,21,.35); }
	.bh-step--r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: ". fig" "num fig" "title fig" "body fig" ". fig"; }
	.bh-step .bh-step__img { align-self: center; justify-self: start; margin: 0; padding: 12px; border: 1px solid var(--frame);
		height: calc(100vh - var(--bh-bar) - var(--bh-top) - 104px); height: calc(100dvh - var(--bh-bar) - var(--bh-top) - 104px);
		max-height: 708px; aspect-ratio: 1154 / 1589; }
	.bh-sec .bh-step .bh-step__num, .bh-sec .bh-step h3, .bh-sec .bh-step .bh-step__body { max-width: 520px; width: 100%; justify-self: start; border: 0; padding: 0; display: block; text-align: left; }
	.bh-sec .bh-step--r .bh-step__num, .bh-sec .bh-step--r h3, .bh-sec .bh-step--r .bh-step__body { justify-self: end; }
	.bh-sec .bh-step .bh-step__num { font-size: 72px; line-height: 1; letter-spacing: -0.03em; color: #666F66; margin-bottom: var(--s-m); }
	.bh-sec .bh-step h3 { font-size: 30px; line-height: 1.2; margin: 0 0 var(--s-m); }
	.bh-sec .bh-step .bh-step__body { font-size: 18px; line-height: 1.7; }
	@supports (animation-timeline: view()) { .bh-step { animation-name: bh-arrive-web; } }
}
@keyframes bh-arrive-web { from { transform: translateY(40px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bh-step { animation: none !important; transform: none !important; } }

/* 8. What riders say (bh-revs) ----------------------------------------------- */
.entry-content > .wp-block-group.bh-revs, .bh-revs { background: var(--sunken); padding: var(--s-2xl) 0; }
.bh-sec.bh-revs .bh-eyebrow { text-align: center; }
.bh-sec.bh-revs h2 { text-align: center; margin: var(--s-2xs) 0 var(--s-xl); }
.bh-revs .bh-revs__grid { display: flex; flex-direction: column; gap: var(--s-2xl); }
/* the quote block, without Astra's or core's quote styling */
.bh-sec .bh-rev.wp-block-quote { margin: 0; padding: 0; border: 0; background: none; font-style: normal; quotes: none;
	display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "q q" "ava cite"; column-gap: var(--s-xs); align-items: center; }
.bh-sec .bh-rev.wp-block-quote::before, .bh-sec .bh-rev.wp-block-quote::after { content: none; }
.bh-sec .bh-rev.wp-block-quote, .bh-sec .bh-rev p { color: var(--ink); }
.bh-sec .bh-rev p { grid-area: q; margin: 0 0 var(--s-s); font-size: 17px; line-height: 1.55; font-style: normal; }
.bh-sec .bh-rev .bh-ava { grid-area: ava; width: 52px; height: 52px; margin: 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--frame); background: #E2DCD0; box-sizing: border-box; }
.bh-sec .bh-rev .bh-ava img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bh-sec .bh-rev cite { grid-area: cite; display: block; font-size: 14px; font-style: normal; color: var(--muted); }
/* the phone carries two of the four, Martina and Rebecca */
.bh-revs .bh-revs__grid > .bh-rev:nth-child(n+3) { display: none; }
@media (min-width: 1024px) {
	.bh-revs .bh-revs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-l); }
	.bh-revs .bh-revs__grid > .bh-rev:nth-child(n+3) { display: flex; }
	.bh-sec .bh-rev.wp-block-quote { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.bh-sec .bh-rev .bh-ava { order: 1; width: 72px; height: 72px; margin-bottom: var(--s-s); }
	.bh-sec .bh-rev p { order: 2; margin: 0; font-size: 16px; }
	.bh-sec .bh-rev cite { order: 3; margin-top: var(--s-s); font-size: 15px; }
}

/* 9. The ebook band (bh-band), the one sage ground on the site (77) ------------- */
.entry-content > .wp-block-group.bh-band, .bh-band { background: var(--feature); padding: var(--s-2xl) 0; color: var(--ink); }
.bh-band .bh-band__cover { margin: 0 0 var(--s-m); }
.bh-band .bh-band__cover img { display: block; width: 100%; height: auto; aspect-ratio: 2560 / 4096; object-fit: cover; border: 1px solid rgba(31,26,21,.45); box-sizing: border-box; }
.bh-sec.bh-band .bh-eyebrow, .bh-sec.bh-band h2, .bh-sec.bh-band p { color: var(--ink); }
.bh-sec.bh-band h2 { font-size: 24px; margin: var(--s-2xs) 0 var(--s-s); }
.bh-sec.bh-band .bh-band__text > p:not(.bh-eyebrow):not(.bh-qual) { margin: 0 0 var(--s-m); }
.bh-sec.bh-band .bh-qual { margin: var(--s-s) 0 0; font-size: 15px; }
@media (min-width: 1024px) {
	.bh-band .bh-band__cols { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-xl); align-items: center; }
	.bh-band .bh-band__cover { margin: 0; }
	.bh-sec.bh-band h2 { font-size: 36px; margin: var(--s-xs) 0 var(--s-s); }
	.bh-sec.bh-band .bh-band__text > p:not(.bh-eyebrow):not(.bh-qual) { max-width: 60ch; }
	.bh-sec.bh-band .bh-qual { white-space: nowrap; }
}

/* 10. Take the first step (bh-offer) ----------------------------------------- */
.entry-content > .wp-block-group.bh-offer, .bh-offer { padding: var(--s-2xl) 0; }
.bh-sec.bh-offer h2 { margin-bottom: var(--s-m); }
.bh-sec.bh-offer .bh-offer__main .wp-block-buttons { margin-top: var(--s-m); }
.bh-sec.bh-offer .bh-travel { margin: var(--s-xs) 0 0; font-size: 15px; color: var(--muted); }
.bh-plist { margin-top: var(--s-xl); border-top: 1px solid var(--rule); padding-top: var(--s-xl); }
/* phone: a layout rule zeroed the space above, so the rule sat right under "Plus €10 or €20 travel…" and read as
   an underline running past the words (12 Nov, Bart). 48px above it again, as on the SHIPS board */
@media (max-width: 1023px) { .bh-offer__cols > .bh-plist { margin-top: var(--s-xl) !important; } }
.bh-sec .bh-plist h3 { margin-bottom: var(--s-s); }
.bh-sec .bh-plist .bh-foot { margin: var(--s-s) 0 0; font-size: 14px; color: var(--muted); }
/* "Also possible" rows act as buttons (279, 280): the whole row is the link, a soft fill sweeps in */
.bh-prows { margin: 0; }
.bh-prow { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 11px 10px; margin: 0 -10px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16px; }
.bh-prow:hover, .bh-prow:focus, .bh-prow:active { color: var(--ink); }
.bh-prow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunken); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease); }
.bh-prow .bh-pr { white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
/* on the phone there is no hover, so the arrow stays to show the rows can be tapped */
.bh-prow .bh-arr { display: inline-block; width: 1.1em; margin-left: 8px; transition: opacity var(--quick) var(--ease), transform var(--sweep) var(--ease); }
.bh-prow:active::before, .bh-prow:focus-visible::before { transform: scaleX(1); }
@media (min-width: 1024px) {
	.bh-sec.bh-offer h2 { margin-bottom: var(--s-l); }
	.bh-offer .bh-offer__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-xl); align-items: start; }
	.bh-sec.bh-offer .bh-offer__main > p:first-child { max-width: 54ch; margin: 0 0 var(--s-m); }
	.bh-sec.bh-offer .bh-offer__main .wp-block-buttons { margin-top: 0; }
	.bh-plist { margin-top: 0; border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: var(--s-xl); }
	.bh-prow::before { transition-duration: var(--sweep); }
}
@media (min-width: 1024px) and (hover: hover) {
	.bh-prow .bh-arr { opacity: 0; transform: translateX(-6px); }
	.bh-prow:hover::before { transform: scaleX(1); }
	.bh-prow:hover .bh-arr, .bh-prow:focus-visible .bh-arr { opacity: 1; transform: none; }
}

/* 11. The header, web (bhh) ---------------------------------------------------- */
.bhh, .bhbar { --bh-ease: var(--ease); }
.bhh { display: none; }
@media (min-width: 1024px) {
	.bhh { display: flex; position: fixed; left: 0; right: 0; top: var(--bh-top); z-index: 40; height: 56px; align-items: center; justify-content: center;
		padding: 0 40px; box-sizing: border-box; background: var(--accent); font-family: var(--body); }
	/* on the photograph: no ground, more air, and it scrolls away with the hero */
	.bhh.over { position: absolute; top: var(--bh-abs); height: auto; padding: 26px 40px; background: none; }
	/* the green bar that arrives when the cream section reaches the top */
	.bhh.fade { opacity: 0; transform: translateY(-100%); visibility: hidden;
		transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), visibility 0s linear var(--slow); }
	.bhh.fade.show, .bh-no-io .bhh.fade { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
	/* inner pages: 76px at the top, the 56px bar once the page moves (284h) */
	.bhh.tall { height: 76px; transition: height var(--sweep) var(--ease); }
	.bhh.tall.slim { height: 56px; }
}
.bhn { display: flex; align-items: center; gap: 34px; font-size: 15px; line-height: 1.4; margin: 0; padding: 0; list-style: none; }
.bhn > li { position: relative; margin: 0; }
.bhn a, .bhn .bht { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #F0ECE3; text-decoration: none;
	font: inherit; font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
.bhn a:hover, .bhn a:focus, .bhn .bht:hover, .bhn .bht:focus { color: #F0ECE3; background: none; }
.bhn a::after, .bhn .bht::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: #F0ECE3; transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease); }
.bhn .bht::after { right: 16px; }
.bhn a:hover::after, .bhn .bht:hover::after, .bhn a:focus-visible::after, .bhn a[aria-current="page"]::after, .bhn .bht.cur::after { transform: scaleX(1); }
.bhn .bhc { width: 10px; height: 10px; transition: transform var(--sweep) var(--ease); }
.bhs.is-open .bhc { transform: rotate(180deg); }
/* the Lessons submenu: green, left-aligned, opens on hover and closes on leaving (120ms grace) */
.bhd { position: absolute; top: 100%; left: 50%; padding-top: 6px; margin: 0; opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
	transition: opacity var(--quick) var(--ease) 120ms, transform var(--sweep) var(--ease) 120ms, visibility 0s linear 380ms; }
.bhh.over .bhd { padding-top: 14px; }
.bhh.tall .bhd { padding-top: 16px; transition: opacity var(--quick) var(--ease) 120ms, transform var(--sweep) var(--ease) 120ms, visibility 0s linear 380ms, padding-top var(--sweep) var(--ease); }
.bhh.tall.slim .bhd { padding-top: 6px; }
.bhs.is-open .bhd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.bhk { min-width: 168px; background: var(--accent); padding: 6px 0; }
.bhk ul { list-style: none; margin: 0; padding: 0; }
.bhk li { display: flex; justify-content: flex-start; margin: 0 18px; }
.bhk li + li { border-top: 1px solid rgba(231,234,228,.16); }
.bhk a::after { bottom: 10px; }

/* 12. The phone bar and menu A (bhbar) ------------------------------------------ */
.bhbar { position: fixed; top: var(--bh-top); left: 0; right: 0; z-index: 40; height: 56px; display: flex; align-items: center; justify-content: flex-end;
	padding: 0 4px; box-sizing: border-box; background: var(--accent); transition: background-color var(--quick) var(--ease); }
@media (min-width: 1024px) { .bhbar { display: none; } }
.bhbar.float { position: absolute; top: var(--bh-abs); background-color: rgba(42,50,44,0); pointer-events: none; }
.bhbar.float .bhctl, .bhbar.float.is-open { pointer-events: auto; }
.bhbar.float.is-open { background-color: var(--accent); }
.bhbar.fade { opacity: 0; transform: translateY(-100%); visibility: hidden;
	transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), visibility 0s linear var(--slow), background-color var(--quick) var(--ease); }
.bhbar.fade.show, .bhbar.fade.is-open, .bh-no-io .bhbar.fade { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.bhctl { width: 48px; height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; box-shadow: none; }
.bhctl:hover, .bhctl:focus, .bhctl:active { background: none; }
.bhctl i { display: block; width: 30px; height: 2px; background: #F6F2EA; border-radius: 1px; transition: transform var(--sweep) var(--ease), opacity var(--quick) var(--ease); }
.bhbar.is-open .bhctl i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bhbar.is-open .bhctl i:nth-child(2) { opacity: 0; }
.bhbar.is-open .bhctl i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.bhmenu { position: absolute; left: 0; right: 0; top: 56px; height: calc(100vh - 56px - var(--bh-top)); height: calc(100dvh - 56px - var(--bh-top)); overflow-y: auto;
	box-sizing: border-box; background: var(--accent); color: #F6F2EA; padding: 16px 24px 32px; display: flex; flex-direction: column; justify-content: space-between; text-align: left;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity var(--quick) var(--ease), transform var(--sweep) var(--ease), visibility 0s linear var(--sweep); }
.bhbar.is-open .bhmenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bhml { list-style: none; margin: 0; padding: 0; }
.bhml > li { border-bottom: 1px solid rgba(231,234,228,.16); margin: 0; }
.bhml .bhr { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; box-sizing: border-box; text-decoration: none; border: 0; background: none;
	padding: 0; margin: 0; cursor: pointer; text-align: left; font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1.2; color: #F6F2EA;
	letter-spacing: 0; text-transform: none; box-shadow: none; transition: opacity var(--quick) var(--ease); }
.bhml .bhr:hover, .bhml .bhr:focus { color: #F6F2EA; background: none; }
.bhml .bhr:active, .bhsubs a:active { opacity: .62; }
.bhml [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.bhpm { position: relative; width: 16px; height: 16px; flex: none; margin-right: 4px; }
.bhpm::before, .bhpm::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: #F6F2EA; border-radius: 1px; transition: transform var(--slow) var(--ease); }
.bhpm::after { transform: rotate(90deg); }
.is-open > .bhr .bhpm::after { transform: rotate(0deg); }
.is-open > .bhr .bhpm::before { transform: rotate(180deg); }
.bhsw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--slow) var(--ease); }
.is-open > .bhsw { grid-template-rows: 1fr; }
.bhsubs { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 20px; opacity: 0; transition: opacity var(--slow) var(--ease); }
.is-open > .bhsw .bhsubs { opacity: 1; }
.bhsubs li { margin: 0; }
.bhsubs a { display: flex; align-items: center; min-height: 44px; font-family: var(--body); font-size: 18px; color: #DCE0D8; text-decoration: none; transition: opacity var(--quick) var(--ease); }
.bhsubs li:last-child a { margin-bottom: 8px; }
.bhsoc { display: flex; gap: 8px; margin: 0 0 0 -12px; }
.bhsoc a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #E7EAE4; }
.bhsoc svg { width: 20px; height: 20px; fill: currentColor; display: block; }
/* the space the fixed bar would otherwise cover, on pages without the hero */
.bhtop { height: 56px; }
@media (min-width: 1024px) { .bhtop { height: 76px; } }
.bh-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 4px; pointer-events: none; }

/* 13. The footer, with the newsletter (ftr) ----------------------------------- */
.ftr { background: var(--accent); color: var(--tint); padding: var(--s-2xl) 0 var(--s-l); font-family: var(--body); font-size: 17px; line-height: 1.6; }
.ftr .wrap { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ftr .ftr-h { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: #F6F2EA; margin: 0; }
.ftr .n { margin: var(--s-xs) 0 var(--s-m); color: #DCE0D8; max-width: 56ch; }
.ftr a { color: #F6F2EA; }
/* 79c: the field stacks on the phone, so the arrow is a full-width button, never a 30px one */
.ftr .signup { display: block; position: relative; margin: 0; max-width: none; }
.ftr .signup .fld { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: 13px 12px; font: inherit; font-size: 16px;
	background: none; color: #F6F2EA; border: 1px solid var(--field); border-radius: 2px; box-shadow: none; -webkit-appearance: none; appearance: none;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.ftr .signup .fld::placeholder { color: #AFB6AC; opacity: 1; }
.ftr .signup .fld:focus { outline: none; border-color: #F6F2EA; box-shadow: 0 0 0 1px #F6F2EA; }
.ftr .signup .go { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: var(--s-2xs);
	box-sizing: border-box; padding: 0; border: 0; border-radius: 2px; background: var(--raised); color: var(--accent); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none; }
.ftr .signup .go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(42,50,44,.12); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease); }
.ftr .signup .go:active::before { transform: scaleX(1); }
.ftr .signup .go span { display: inline-block; transition: transform var(--sweep) var(--ease); }
.ftr .signup .go:active span, .ftr .signup:focus-within .go span { transform: translateX(4px); }
.bhm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the consent box: a real checkbox; the border lights and the tick draws itself. Only the box and the
   words before the link are its labels, so the privacy policy link never ticks it */
.ftr .consent { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-s) 0 0; font-size: 14px; color: #DCE0D8; }
.bhm-c input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bhm-c label { cursor: pointer; }
.bhm-c .box { position: relative; display: block; box-sizing: border-box; width: 18px; height: 18px; flex: none; margin-top: 2px; border: 1px solid var(--field); border-radius: 2px; transition: border-color var(--quick) var(--ease); }
.bhm-c .box svg { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.bhm-c .box path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset var(--sweep) var(--ease); }
.ftr .bhm-c .box path { stroke: #F6F2EA; }
.bhm-c input:checked + .box, .bhm-c input:focus-visible + .box { border-color: var(--accent); }
.ftr .bhm-c input:checked + .box, .ftr .bhm-c input:focus-visible + .box { border-color: #F6F2EA; }
.bhm-c input:checked + .box path { stroke-dashoffset: 0; }
.bhm-c input:focus-visible + .box { outline: 2px solid currentColor; outline-offset: 2px; }
.ftr .frule { height: 1px; background: rgba(231,234,228,.22); margin: var(--s-m) 0; }
.ftr .futil { display: flex; flex-direction: column; font-size: 13px; color: #AEB3AD; }
.ftr .flinks { display: none; }
.ftr .fsocial { display: flex; justify-content: center; gap: var(--s-2xs); margin: var(--s-2xs) 0 0; }
.ftr .fsocial a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #E7EAE4; text-decoration: none; transition: color 200ms var(--ease); }
.ftr .fsocial svg { width: 20px; height: 20px; display: block; fill: currentColor; transition: transform 200ms var(--ease); }
.ftr .fsocial a:active, .ftr .fsocial a:focus-visible { color: #FFFFFF; }
.ftr .fsocial a:active svg, .ftr .fsocial a:focus-visible svg { transform: scale(1.18); }
.ftr .fcopy { margin-top: var(--s-m); }
/* footer links, Terms and Privacy policy: exactly the header - the line in the link's colour, the light to cream */
.ftr .flinks a, .ftr a.flg { position: relative; color: #AEB3AD; text-decoration: none; transition: color var(--quick) var(--ease); }
.ftr .flinks a::after, .ftr a.flg::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease); }
.ftr .flinks a:active, .ftr a.flg:active, .ftr .flinks a:focus-visible, .ftr a.flg:focus-visible { color: #F6F2EA; }
.ftr .flinks a:active::after, .ftr a.flg:active::after, .ftr .flinks a:focus-visible::after, .ftr a.flg:focus-visible::after { transform: scaleX(1); }
@media (min-width: 1024px) {
	.ftr { padding: var(--s-3xl) 0 var(--s-xl); }
	/* 5 Nov (Bart, 285e): the footer spreads to the screen edges with a 40px gutter */
	.ftr .wrap { max-width: none; padding: 0 40px; }
	.ftr .ftr-h { font-size: 24px; }
	/* 47c: on web the field is a line with the arrow inside it; a line draws over the resting one as you type */
	.ftr .signup { display: flex; flex-direction: row; max-width: 440px; border-bottom: 1px solid var(--field); }
	.ftr .signup::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #F6F2EA; transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease); }
	.ftr .signup:focus-within::after { transform: scaleX(1); }
	.ftr .signup .fld { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 12px 2px; border: 0; border-radius: 0; }
	.ftr .signup .fld:focus { box-shadow: none; }
	.ftr .signup .go { width: 44px; height: 44px; margin: 0; align-self: center; background: none; color: #F6F2EA; }
	.ftr .signup .go::before { content: none; }
	.ftr .consent { font-size: 15px; }
	.ftr .frule { margin: var(--s-2xl) 0 var(--s-m); }
	.ftr .futil { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-m); flex-wrap: wrap; }
	.ftr .flinks { display: flex; gap: var(--s-m); }
	.ftr .flinks a, .ftr .flinks .fgrp { min-height: 44px; display: inline-flex; align-items: center; }
	.ftr .flinks a::after, .ftr a.flg::after { bottom: 12px; }
	.ftr .flinks .fgrp { gap: 8px; color: #AEB3AD; }
	.ftr .flinks .fgrp .fsep { color: rgba(231,234,228,.35); }
	.ftr a.flg { display: inline-flex; align-items: center; min-height: 44px; }
	.ftr .fsocial { margin: 0; }
	.ftr .fcopy { margin: 0; }
}
@media (hover: hover) {
	.ftr .signup .go:hover span { transform: translateX(4px); }
	.bhm-c:has(label:hover) .box { border-color: var(--accent); }
	.ftr .bhm-c:has(label:hover) .box { border-color: #F6F2EA; }
	.ftr .flinks a:hover, .ftr a.flg:hover { color: #F6F2EA; }
	.ftr .flinks a:hover::after, .ftr a.flg:hover::after { transform: scaleX(1); }
	.ftr .fsocial a:hover { color: #FFFFFF; }
	.ftr .fsocial a:hover svg { transform: scale(1.18); }
}

/* 14. Reduced motion: everything reaches its end state without travelling ---- */
@media (prefers-reduced-motion: reduce) {
	.bh-sec *, .bh-sec *::before, .bh-sec *::after, .bhh, .bhh *, .bhh *::after, .bhbar, .bhbar *, .bhbar *::before, .bhbar *::after, .ftr *, .ftr *::before, .ftr *::after {
		transition-duration: 0ms !important; animation: none !important;
	}
}

/* 15. Kept from version 1: the FAQ accordion (163d), for the pages that have one */
.wp-block-details summary { align-items: center; cursor: pointer; display: flex; min-height: 44px; padding: var(--s-2xs) 0; }
.wp-block-details > *:not(summary) { margin-left: var(--s-m); }

/* ==========================================================================
   16. THE LESSON PAGES, /lessons/in-person/ and /lessons/online/ (S6, 5 Nov)
   From SHIPS InPerson and Online, web and phone. Section grounds differ by
   breakpoint on these boards, so each section names both.
   ========================================================================== */
/* the lesson pages run a step smaller than the home page: h2 24 / 30, body 16 / 17 */
.bh-lp { font-size: 16px; line-height: 1.6; }
.bh-sec.bh-lp h2 { font-size: 24px; line-height: 1.2; margin: 0 0 var(--s-s); }
.bh-sec.bh-lp h3 { font-size: 20px; line-height: 1.25; }
.bh-sec.bh-lp p { margin: 0 0 var(--s-s); }
.bh-sec.bh-lp p:last-child { margin-bottom: 0; }
.entry-content > .wp-block-group.bh-lp { padding: var(--s-xl) 0; }
/* phone (12 Nov, Bart): every page opens at the same height as the ebook page, its first words 16px under
   the bar (lessons, clinics, about, publications, terms and privacy had 48px); the checkout's title too */
@media (max-width: 1023px) {
	.entry-content > .wp-block-group.bh-lp:first-child { padding-top: var(--s-s) !important; }
	body.woocommerce-checkout .entry-header { padding-top: var(--s-s) !important; }
}
@media (min-width: 1024px) {
	.bh-lp { font-size: 17px; line-height: 1.65; }
	.bh-sec.bh-lp h2 { font-size: 30px; margin-bottom: var(--s-m); }
	.bh-sec.bh-lp p { margin-bottom: var(--s-m); }
	.entry-content > .wp-block-group.bh-lp { padding: var(--s-3xl) 0; }
}
.bh-g-cream { background: var(--ground); } .bh-g-sunk { background: var(--sunken); } .bh-g-raise { background: var(--raised); }
@media (max-width: 1023px) {
	.bh-gp-cream { background: var(--ground); } .bh-gp-sunk { background: var(--sunken); } .bh-gp-raise { background: var(--raised); }
}
.bh-sec.bh-lp .bh-center { text-align: center; }

/* the framed photograph, the step plates' frame: 1px, the raised ground, 12px (8 on the phone) */
.bh-sec .bh-plate { margin: 0; border: 1px solid var(--frame); background: var(--raised); padding: 8px; box-sizing: border-box; }
.bh-sec .bh-plate img { display: block; width: 100%; height: auto; box-sizing: border-box; border: 1px solid var(--frame); background: var(--sunken); object-fit: cover; }
.bh-sec .bh-r43 img { aspect-ratio: 4 / 3; } .bh-sec .bh-r34 img { aspect-ratio: 3 / 4; } .bh-sec .bh-r169 img { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) { .bh-sec .bh-plate { padding: 12px; } }
/* where each photograph is held (object-position, from the boards) */
.wp-image-7782 { object-position: 50% 58%; } .wp-image-7783 { object-position: 50% 56%; } .wp-image-7784 { object-position: 50% 60%; }
.wp-image-7785 { object-position: 50% 38%; } .wp-image-7786 { object-position: 50% 55%; } .wp-image-7787 { object-position: 50% 48%; }
.wp-image-7788 { object-position: 50% 40%; } .wp-image-7789 { object-position: 50% 45%; }

/* 16a. The opening: on the phone words then a full-bleed photograph; on web a card, words left, photograph right */
.entry-content > .wp-block-group.bh-open { padding: var(--s-xl) 0 0; }
.bh-open .bh-open__words { padding: 0 24px var(--s-m); }
.bh-sec.bh-open h1 { font-size: 28px; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 var(--s-s); }
.bh-sec.bh-open .bh-lede { font-size: 16px; line-height: 1.55; margin: 0 0 var(--s-m); }
.bh-open .bh-open__pic { margin: 0; aspect-ratio: 4 / 5; }
.bh-open--online .bh-open__pic { aspect-ratio: 1 / 1; }
.bh-sec.bh-open--online h1 { font-size: 26px; line-height: 1.16; }
.bh-open .bh-open__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1024px) {
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-group.bh-open, .entry-content > .wp-block-group.bh-open { padding: 0; width: calc(100% - 80px); max-width: 1120px; margin: var(--s-2xl) auto var(--s-l); border: 1px solid var(--frame); background: var(--raised); overflow: hidden;
		display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 380px; }
	.bh-open .bh-open__words { padding: var(--s-xl); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
	.bh-sec.bh-open h1 { font-size: 40px; line-height: 1.1; margin: 0 0 var(--s-m); max-width: 18ch; }
	.bh-sec.bh-open--online h1 { max-width: 20ch; }
	.bh-sec.bh-open .bh-lede { font-size: 18px; line-height: 1.6; max-width: 46ch; }
	.bh-open .bh-open__pic, .bh-open--online .bh-open__pic { position: relative; aspect-ratio: auto; }
	.bh-open .bh-open__pic img { position: absolute; inset: 0; }
	.bh-open .bh-open__pic .wp-image-7782 { object-position: 50% 58%; } .bh-open .bh-open__pic .wp-image-7786 { object-position: 50% 55%; }
}
@media (max-width: 1023px) { .bh-open .bh-open__pic img { object-position: 50% 50% !important; } }

/* 16b. What a first lesson is like / What we do in the hour: centred prose, photographs between */
.bh-sec.bh-first, .bh-sec.bh-hour, .bh-sec.bh-kit { text-align: center; }
.bh-first .bh-duo { display: grid; gap: var(--s-s); margin: var(--s-m) 0; }
.bh-first .bh-duo > .bh-plate:nth-child(2) { display: none; }
.bh-hour .bh-plate { margin: var(--s-xl) 0 0; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-first, .entry-content > .wp-block-group.bh-hour { padding-top: var(--s-l); }
	.bh-first .bh-prose, .bh-hour .bh-prose, .bh-kit .bh-prose { max-width: 820px; margin: 0 auto; }
	.bh-sec.bh-first .bh-prose p, .bh-sec.bh-hour .bh-prose p, .bh-sec.bh-kit .bh-prose p { font-size: 18px; line-height: 1.8; }
	.bh-first .bh-duo { grid-template-columns: 1fr 1fr; gap: var(--s-m); max-width: 820px; margin: var(--s-xl) auto; }
	.bh-first .bh-duo > .bh-plate:nth-child(2) { display: block; }
	.bh-hour .bh-plate { max-width: 820px; margin: var(--s-xl) auto 0; }
	.bh-hour .bh-plate img { aspect-ratio: 16 / 9; }
}

/* 16c. Ready to take the first step? (online) */
.entry-content > .wp-block-group.bh-cta { padding: var(--s-xl) 0; }
.bh-sec.bh-cta { text-align: center; }
.bh-sec.bh-cta h3 { font-size: 22px; line-height: 1.3; margin: 0 0 var(--s-m); }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-cta { padding: var(--s-2xl) 0; }
	.bh-sec.bh-cta h3 { font-size: 26px; }
	.bh-sec.bh-cta .wp-block-buttons { justify-content: center; }
}

/* 16d. What you need at your end (online): two framed photographs on web, the second edge to edge on the phone */
.entry-content > .wp-block-group.bh-kit { padding-bottom: 0; }
.bh-kit .bh-pair { margin: var(--s-xl) 0 0; }
.bh-kit .bh-pair > .bh-plate:first-child { display: none; }
.bh-kit .bh-pair > .bh-plate:last-child { border: 0; padding: 0; background: none; margin: 0 -24px; }
.bh-kit .bh-pair > .bh-plate:last-child img { border: 0; aspect-ratio: 3 / 4; }
@media (min-width: 1024px) {
	.bh-kit .bh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-m); max-width: 820px; margin: var(--s-xl) auto 0; }
	.bh-kit .bh-pair > .bh-plate:first-child { display: block; }
	.bh-kit .bh-pair > .bh-plate:last-child { border: 1px solid var(--frame); padding: 12px; background: var(--raised); margin: 0; }
	.bh-kit .bh-pair > .bh-plate:last-child img { border: 1px solid var(--frame); }
}

/* 16e. Book a lesson: the intro and the form, side by side on web */
.bh-book .bh-book__cols { display: flex; flex-direction: column; }
.bh-book--mail-last .bh-mail { order: 3; margin: var(--s-m) 0 0; font-size: 15px; }
/* a layout rule set it to 0 and the line sat on the button (11 Nov, Bart) */
@media (max-width: 1023px) { .bh-book--mail-last .bh-mail { margin-top: var(--s-m) !important; } }
.bh-book--mail-last .bh-book__intro { display: contents; }
.bh-book--mail-last .bh-book__intro > :not(.bh-mail) { order: 1; }
.bh-book--mail-last .bh-book__form { order: 2; }
.bh-book .bh-book__form { margin-top: var(--s-m); }
@media (min-width: 1024px) {
	.bh-book .bh-book__cols { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-2xl); align-items: start; }
	.bh-book--mail-last .bh-book__intro { display: block; }
	.bh-book--mail-last .bh-mail { margin: 0; font-size: inherit; }
	.bh-book .bh-book__form { margin-top: 0; }
}
/* the form itself */
.bh-form { display: flex; flex-direction: column; gap: var(--s-s); margin: 0; text-align: left; }
.bh-form .bh-f { display: flex; flex-direction: column; gap: 6px; }
.bh-form .bh-f2 { display: grid; gap: var(--s-s); }
@media (min-width: 1024px) { .bh-form .bh-f2 { grid-template-columns: 1fr 1fr; } }
.bh-form label { font-size: 14px; font-weight: 600; color: var(--ink); }
.bh-form .bh-opt { font-weight: 400; color: var(--muted); }
.bh-form input[type="text"], .bh-form input[type="email"], .bh-form select, .bh-form textarea {
	display: block; width: 100%; box-sizing: border-box; margin: 0; min-height: 46px;
	font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--raised);
	border: 1px solid var(--field); border-radius: 2px; padding: 13px 12px; box-shadow: none;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.bh-form textarea { min-height: 88px; resize: vertical; }
.bh-form input:focus, .bh-form select:focus, .bh-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (min-width: 1024px) { .bh-form input[type="text"], .bh-form input[type="email"], .bh-form select, .bh-form textarea { padding: 11px 12px; } .bh-form textarea { min-height: 84px; } }
.bh-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.bh-form .consent label { font-weight: 400; color: var(--muted); font-size: 14px; }
.bh-form .bhm-c .box { background: var(--raised); }
.bh-form .wp-block-button { margin-top: var(--s-2xs); }
.bh-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the booking form's trap field (289b): off the page, never display:none, so it looks like a real field to a script */
.signup .bh-f.bh-f--yard, .bh-form .bh-f.bh-f--yard { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; }
/* what the visitor sees after sending: a word carries the state, the colour agrees (76e) */
.bh-form__msg { margin: 0 0 var(--s-m); padding: var(--s-s); border-radius: 2px; font-size: 16px; line-height: 1.55; text-align: left; }
.bh-form__msg--ok { background: #E3EBE2; color: #2F5D3C; border: 1px solid #2F5D3C; }
.bh-form__msg--err { background: #F4E3E0; color: #93211F; border: 1px solid #93211F; }
.bh-form__msg a { color: inherit; }

/* 16f. Where I travel (in-person): framed 4:3 beside the prose on web, edge to edge after it on the phone */
.entry-content > .wp-block-group.bh-where { padding-bottom: 0; }
.bh-where .bh-framed { margin: var(--s-xl) -24px 0; }
.bh-where .bh-framed img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-where { padding-bottom: var(--s-3xl); }
	.bh-where .bh-where__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: center; }
	.bh-where .bh-prose { max-width: 52ch; }
	.bh-where .bh-framed { margin: 0; border: 1px solid var(--frame); background: var(--raised); padding: var(--s-s); }
}

/* 16g. What it costs and what you need (in-person): a card of three rows, the figure leading each */
.bh-costs .bh-costs__card { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); }
.bh-costs .bh-row { display: grid; grid-template-columns: 70px 1fr; gap: var(--s-s); align-items: center; padding: var(--s-m) 0; border-top: 1px solid var(--frame); }
.bh-costs .bh-row:first-child { border-top: 0; padding-top: 0; }
.bh-costs .bh-row:last-child { padding-bottom: 0; }
.bh-sec.bh-costs .bh-row .bh-k { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1; text-align: right; }
.bh-sec.bh-costs .bh-row p:not(.bh-k) { margin: 0; font-size: 15px; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-costs { padding: var(--s-xl) 0; }
	.bh-costs .bh-costs__card { padding: var(--s-xl); }
	.bh-sec.bh-costs h2 { text-align: center; }
	.bh-costs .bh-costs__list { width: 560px; max-width: 100%; margin: 0 auto; }
	.bh-costs .bh-row { position: relative; display: flex; min-height: 72px; box-sizing: border-box; }
	.bh-costs .bh-row:first-child { border-top: 1px solid var(--frame); padding-top: var(--s-m); }
	.bh-costs .bh-row:last-child { border-bottom: 1px solid var(--frame); padding-bottom: var(--s-m); }
	.bh-sec.bh-costs .bh-row .bh-k { position: absolute; right: calc(100% + var(--s-m)); font-size: 36px; white-space: nowrap; }
	.bh-sec.bh-costs .bh-row p:not(.bh-k) { font-size: 16px; }
}

/* 16h. What it costs (online): the figure and the refund beside one review, behind a hairline */
.bh-money .bh-money__card { border: 1px solid var(--frame); background: var(--ground); padding: var(--s-m); }
.bh-money .bh-fig { display: grid; grid-template-columns: auto 1fr; gap: var(--s-s); align-items: center; }
.bh-sec.bh-money .bh-fig .bh-k { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1; }
.bh-sec.bh-money .bh-fig p:not(.bh-k) { margin: 0; font-size: 16px; line-height: 1.5; }
.bh-sec.bh-money .bh-refund { margin: var(--s-m) 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bh-money .bh-money__left { padding-bottom: var(--s-m); margin-bottom: var(--s-m); border-bottom: 1px solid var(--frame); }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-money { padding: var(--s-2xl) 0; }
	.bh-money .bh-money__card { background: var(--raised); padding: var(--s-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: center; position: relative; }
	.bh-money .bh-money__card::before { content: ""; position: absolute; left: 50%; top: var(--s-xl); bottom: var(--s-xl); width: 1px; background: var(--frame); }
	.bh-money .bh-money__left { padding: 0; margin: 0; border: 0; }
	.bh-money .bh-fig { display: flex; gap: var(--s-m); }
	.bh-sec.bh-money .bh-fig .bh-k { font-size: 48px; }
	.bh-sec.bh-money .bh-fig p:not(.bh-k) { font-size: 17px; max-width: 30ch; }
	.bh-sec.bh-money .bh-refund { max-width: 46ch; }
}

/* 16i. Reviews on the lesson pages: centred, portrait first */
.bh-sec .bh-lrev.wp-block-quote { margin: 0; padding: 0; border: 0; background: none; quotes: none; font-style: normal; color: var(--ink);
	display: flex; flex-direction: column; align-items: center; text-align: center; }
.bh-sec .bh-lrev.wp-block-quote::before, .bh-sec .bh-lrev.wp-block-quote::after { content: none; }
.bh-sec .bh-lrev .bh-ava { width: 64px; height: 64px; margin: 0 0 var(--s-s); border-radius: 50%; overflow: hidden; border: 1px solid var(--frame); background: #E2DCD0; box-sizing: border-box; }
.bh-sec .bh-lrev .bh-ava img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bh-sec.bh-lp .bh-lrev p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); font-style: normal; }
.bh-sec .bh-lrev cite { display: block; margin-top: var(--s-s); font-size: 14px; font-style: normal; color: var(--muted); }
.bh-revs2 .bh-rlist { display: flex; flex-direction: column; gap: var(--s-2xl); }
.bh-money .bh-lrev .bh-ava { margin-bottom: var(--s-m); }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-revs2 { padding: var(--s-xl) 0; }
	.bh-revs2 .bh-rlist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); max-width: 900px; margin: 0 auto; }
	.bh-sec .bh-lrev .bh-ava { width: 72px; height: 72px; }
	.bh-sec.bh-lp .bh-lrev p { font-size: 17px; }
	.bh-sec.bh-money .bh-lrev p { font-size: 19px; }
	.bh-sec .bh-lrev cite { font-size: 15px; }
	.bh-money .bh-lrev cite { margin-top: var(--s-m); }
}

/* 16j. Also possible: on the phone one offer after another behind a rule, the link on its own line */
.entry-content > .wp-block-group.bh-also { padding: var(--s-xl) 0; }
.bh-also .bh-also__cols > p { margin: 0; }
.bh-also .bh-also__cols > p + p { margin-top: var(--s-xl); border-top: 1px solid var(--rule); padding-top: var(--s-xl); }
.bh-sec.bh-also .bh-also__cols a { display: table; margin-top: var(--s-2xs); font-weight: 600; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-also { padding: var(--s-xl) 0 var(--s-2xl); }
	.bh-also .bh-also__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); }
	.bh-also--3 .bh-also__cols { grid-template-columns: repeat(3, 1fr); }
	.bh-also .bh-also__cols > p + p { margin-top: 0; border-top: 0; padding-top: 0; }
	.bh-sec.bh-also .bh-also__cols > p { font-size: 16px; }
	/* in person, the links run on inside the sentence (as drawn); online they sit on their own line */
	.bh-sec.bh-also--inline .bh-also__cols a { display: inline; margin-top: 0; font-weight: 400; }
}
/* the online page draws a hairline where two cream sections meet */
.bh-sec.bh-g-cream.bh-rule-top { border-top: 1px solid var(--rule); }

/* ==========================================================================
   17. /clinics/ (S6, 5 Nov), from SHIPS ClinicsWeb and ClinicsPhone.
   One page opening to organisers (56), riders' newsletter near the top,
   no form, an email address only (57r), the footer without its newsletter (57v2).
   ========================================================================== */
.bh-web-only { display: none !important; }
@media (min-width: 1024px) { .bh-web-only { display: block !important; } .bh-ph-only { display: none !important; } }
/* a photograph edge to edge on the phone */
.bh-sec .bh-bleed { margin: var(--s-xl) 0 0; }
.bh-sec .bh-bleed img { display: block; width: 100%; height: auto; object-fit: cover; }
.bh-sec .bh-bleed.bh-r43 img { aspect-ratio: 4 / 3; } .bh-sec .bh-bleed.bh-r1610 img { aspect-ratio: 16 / 10; }

/* the opening: as the lesson pages, two buttons (hosting filled, riding outlined), no bottom margin on web */
.bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { background: transparent; color: var(--accent); border: 1px solid var(--frame); }
.bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(42,50,44,.10); }
.bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:active { color: var(--accent); border-color: var(--accent); }
.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:active { color: #F6F2EA; border-color: #F6F2EA; }
/* the hero's outline button keeps its cream on the photograph: the outline rule above is as specific and comes later, so it is restated here (6 Nov) */
.bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { background: rgba(31,26,21,.28); border: 1px solid rgba(246,242,234,.85); color: #F6F2EA; }
.bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(246,242,234,.20); }
.bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:active { color: #F6F2EA; border-color: #F6F2EA; }
@media (hover: hover) { .bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover { color: #F6F2EA; border-color: #F6F2EA; } }
.bh-open--clinics .bh-open__pic { aspect-ratio: 1206 / 1630; }
@media (min-width: 1024px) {
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-group.bh-open--clinics, .entry-content > .wp-block-group.bh-open--clinics { margin-bottom: 0; }
	.bh-open--clinics .bh-open__pic { aspect-ratio: auto; }
	.bh-open .wp-block-buttons { flex-wrap: wrap; }
}

/* what a day looks like */
.bh-day .bh-plate { margin-top: var(--s-m); }
.bh-day .bh-plate img { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
	.bh-day .bh-day__cols { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--s-2xl); align-items: start; }
	.bh-sec.bh-day .bh-prose p { font-size: 17px; line-height: 1.75; }
	.bh-day .bh-plate { margin-top: 0; }
}

/* want to ride in one: the newsletter, centred, on the sunken ground */
.bh-sec.bh-ride { text-align: center; }
.bh-ride .bh-ride__one { max-width: 520px; margin: 0 auto; }
.bh-ride .signup { display: block; position: relative; margin: var(--s-s) 0 0; text-align: left; }
.bh-ride .signup .fld { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: 13px 12px; font: inherit; font-size: 16px;
	background: var(--raised); color: var(--ink); border: 1px solid var(--field); border-radius: 2px; box-shadow: none; -webkit-appearance: none; appearance: none;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.bh-ride .signup .fld::placeholder { color: var(--muted); opacity: 1; }
.bh-ride .signup .fld:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bh-ride .signup .go { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: var(--s-2xs);
	box-sizing: border-box; padding: 0; border: 0; border-radius: 2px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.bh-ride .signup .go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #151A16; transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease); }
.bh-ride .signup .go:active::before { transform: scaleX(1); }
.bh-ride .signup .go span { display: inline-block; transition: transform var(--sweep) var(--ease); }
.bh-ride .signup:focus-within .go span, .bh-ride .signup .go:active span { transform: translateX(4px); }
.bh-ride .rconsent { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-s) 0 0; font-size: 14px; color: var(--muted); text-align: left; }
@media (min-width: 1024px) {
	.bh-ride .signup { display: flex; max-width: 440px; margin: var(--s-s) auto 0; border-bottom: 1px solid var(--field); }
	.bh-ride .signup::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease); }
	.bh-ride .signup:focus-within::after { transform: scaleX(1); }
	.bh-ride .signup .fld { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 12px 2px; background: none; border: 0; border-radius: 0; }
	.bh-ride .signup .fld:focus { box-shadow: none; }
	.bh-ride .signup .go { width: 44px; height: 44px; margin: 0; align-self: center; background: none; color: var(--accent); }
	.bh-ride .signup .go::before { content: none; }
	.bh-ride .rconsent { justify-content: center; font-size: 15px; }
}
@media (hover: hover) { .bh-ride .signup .go:hover span { transform: translateX(4px); } }

/* clinics happen because somebody organises one */
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-asks { padding: var(--s-2xl) 0 0; }
	.bh-sec.bh-asks .bh-prose { max-width: 680px; margin: 0 auto; text-align: center; }
	.bh-sec.bh-asks p { font-size: 17px; line-height: 1.7; }
}

/* the carousel (web): one photograph at a time in the step plates' frame */
.entry-content > .wp-block-group.bh-carsec { padding: var(--s-2xl) 0 var(--s-l); }
.bh-carousel { max-width: 880px; margin: 0 auto; border: 1px solid var(--frame); background: var(--raised); padding: var(--s-s); box-sizing: border-box; }
.bh-carousel > figure:not(:first-child) { display: none; }
.bh-carousel figure { margin: 0; }
.bh-carousel figure img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.bh-car__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunken); }
.bh-car__stage > figure { position: absolute; inset: 0; display: block !important; opacity: 0; transition: opacity var(--slow) var(--ease); }
.bh-car__stage > figure.is-on { opacity: 1; }
.bh-car__stage > figure img { width: 100%; height: 100%; aspect-ratio: auto; }
.bh-car__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(to top, rgba(31,26,21,.5) 0%, rgba(31,26,21,0) 100%); }
.bh-car__count { position: absolute; top: var(--s-m); right: var(--s-m); margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: .06em; color: #F0ECE3; text-shadow: 0 1px 6px rgba(31,26,21,.45); }
.bh-car__count em { font-style: normal; opacity: .62; padding: 0 6px; }
.bh-car__count b { font-weight: 400; }
/* the arrows sit there on their own; the ring and its dark fill appear on hover (28 Oct) */
.bh-car__arr { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; padding: 0; margin: 0;
	border: 1px solid rgba(246,242,234,0); background: rgba(31,26,21,0); color: #F6F2EA; font-family: var(--body); font-size: 26px; line-height: 1; text-shadow: 0 1px 6px rgba(31,26,21,.55);
	display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
	transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease); }
.bh-car__arr:hover, .bh-car__arr:focus-visible { border-color: rgba(246,242,234,.6); background: rgba(31,26,21,.34); color: #F6F2EA; }
.bh-car__prev { left: var(--s-m); } .bh-car__next { right: var(--s-m); }
.bh-car__dots { position: absolute; left: 0; right: 0; bottom: var(--s-m); display: flex; justify-content: center; align-items: center; gap: var(--s-2xs); }
.bh-car__dots button { width: 8px; height: 8px; padding: 0; margin: 0; border: 0; border-radius: 4px; background: rgba(246,242,234,.55); cursor: pointer; display: block; box-shadow: none;
	transition: width var(--slow) var(--ease), background-color var(--slow) var(--ease); }
.bh-car__dots button.on { width: 30px; background: #F6F2EA; }

/* how organising works: six steps, a list on the phone, a 3 x 2 grid on web */
.bh-org .bh-cell { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-s); padding: var(--s-m) 0; border-top: 1px solid var(--frame); }
.bh-org .bh-cell:last-child { border-bottom: 1px solid var(--frame); }
.bh-sec.bh-org .bh-cell .bh-k { grid-row: 1 / span 2; margin: 0; font-family: var(--display); font-size: 30px; line-height: 1; color: #666F66; }
.bh-sec.bh-org .bh-cell h3 { font-size: 19px; margin: 0 0 var(--s-2xs); }
.bh-sec.bh-org .bh-cell p:not(.bh-k) { margin: 0; font-size: 15px; }
@media (min-width: 1024px) {
	.bh-org .bh-org__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl) var(--s-l); }
	.bh-org .bh-cell { display: block; padding: var(--s-m) 0 0; }
	.bh-org .bh-cell:last-child { border-bottom: 0; }
	.bh-sec.bh-org .bh-cell .bh-k { display: block; font-size: 40px; margin-bottom: var(--s-2xs); }
	.bh-sec.bh-org .bh-cell h3 { font-size: 20px; }
	.bh-sec.bh-org .bh-cell p:not(.bh-k) { font-size: 16px; }
}
.entry-content > .wp-block-group.bh-cta2 { padding: var(--s-m) 0 var(--s-xl); }
@media (min-width: 1024px) { .entry-content > .wp-block-group.bh-cta2 { padding: 0 0 var(--s-3xl); } .bh-cta2 .wp-block-buttons { justify-content: center; } }

/* what I need from you */
@media (max-width: 1023px) { .bh-need .bh-need__pic { margin: var(--s-xl) -24px 0; } }
.entry-content > .wp-block-group.bh-need { padding-bottom: 0; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-need { padding: var(--s-3xl) 0 var(--s-l); }
	.bh-need .bh-need__cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-2xl); align-items: center; }
	.bh-need .bh-need__pic { margin: 0; border: 1px solid var(--frame); background: var(--raised); padding: 12px; }
	.bh-need .bh-need__pic img { border: 1px solid var(--frame); aspect-ratio: 4 / 3; }
}

/* what it costs (clinics): two figures, VAT note, and the terms beside them on web */
.bh-cmoney .bh-cmoney__card { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); }
.bh-cmoney .bh-cfig { display: flex; align-items: baseline; gap: var(--s-2xs); }
.bh-cmoney .bh-cfig + .bh-cfig { margin-top: var(--s-2xs); }
.bh-sec.bh-cmoney .bh-cfig p { margin: 0; font-size: 15px; }
.bh-sec.bh-cmoney .bh-cfig .bh-k { font-family: var(--display); font-size: 34px; line-height: 1; }
.bh-sec.bh-cmoney .bh-sub { margin: var(--s-s) 0 0; font-size: 14px; color: var(--muted); }
.bh-sec.bh-cmoney .bh-terms p { margin: var(--s-s) 0 0; font-size: 15px; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-cmoney { padding: var(--s-l) 0 var(--s-3xl); }
	.bh-cmoney .bh-cmoney__card { padding: var(--s-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: start; }
	.bh-cmoney .bh-cfig { gap: var(--s-s); }
	.bh-cmoney .bh-cfig + .bh-cfig { margin-top: var(--s-s); }
	.bh-sec.bh-cmoney .bh-cfig .bh-k { font-size: 48px; }
	.bh-sec.bh-cmoney .bh-cfig p:not(.bh-k) { font-size: 17px; }
	.bh-sec.bh-cmoney .bh-sub { margin-top: var(--s-m); font-size: 15px; line-height: 1.6; }
	.bh-sec.bh-cmoney .bh-terms p { margin: 0 0 var(--s-s); font-size: 16px; }
	.bh-sec.bh-cmoney .bh-terms p:last-child { margin: 0; font-size: 15px; color: var(--muted); }
}

/* the one review: the quote first, then the portrait and the name in a row */
.entry-content > .wp-block-group.bh-crev { padding-bottom: 0; }
.bh-sec .bh-crev__q.wp-block-quote { margin: 0; padding: 0; border: 0; background: none; quotes: none; font-style: normal; color: var(--ink);
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--s-xs); text-align: center; }
.bh-sec .bh-crev__q.wp-block-quote::before, .bh-sec .bh-crev__q.wp-block-quote::after { content: none; }
.bh-sec .bh-crev__q p { flex: 0 0 100%; margin: 0 0 var(--s-s); font-size: 18px; line-height: 1.5; color: var(--ink); }
.bh-sec .bh-crev__q .bh-ava { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--frame); box-sizing: border-box; }
.bh-sec .bh-crev__q .bh-ava img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bh-sec .bh-crev__q cite { font-size: 14px; font-style: normal; color: var(--muted); text-align: left; }
.bh-sec .bh-crev__q cite b { font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-crev { padding: var(--s-2xl) 0; }
	.bh-sec .bh-crev__q.wp-block-quote { max-width: 820px; margin: 0 auto; gap: 0 var(--s-s); }
	.bh-sec .bh-crev__q p { font-size: 21px; margin-bottom: var(--s-m); }
	.bh-sec .bh-crev__q .bh-ava { width: 72px; height: 72px; }
	.bh-sec .bh-crev__q cite { font-size: 15px; }
}

/* thinking about organising a clinic, and what if you encounter problems */
.entry-content > .wp-block-group.bh-enq { padding-bottom: var(--s-m); }
.bh-enq .bh-bleed { margin: var(--s-xl) 0 var(--s-m); }
.entry-content > .wp-block-group.bh-prob { padding-top: 0; }
.bh-prob .bh-prob__card { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); text-align: center; }
.bh-sec.bh-prob h2 { font-size: 21px; }
.bh-sec.bh-prob .bh-prob__card p { margin: 0; font-size: 15px; line-height: 1.65; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-enq { padding: var(--s-3xl) 0 var(--s-xl); }
	.bh-enq .bh-prose { max-width: 740px; }
	.entry-content > .wp-block-group.bh-prob { padding: 0 0 var(--s-3xl); }
	.bh-prob .bh-prob__card { max-width: 820px; margin: 0 auto; padding: var(--s-xl); box-sizing: border-box; }
	.bh-sec.bh-prob h2 { font-size: 26px; margin-bottom: var(--s-s); }
	.bh-sec.bh-prob .bh-prob__card p { margin: 0 auto; font-size: 16px; line-height: 1.7; max-width: 64ch; }
}
/* the footer without its newsletter (57v2) */
.ftr.ftr-short { padding: var(--s-l) 0; }
@media (min-width: 1024px) { .ftr.ftr-short { padding: var(--s-xl) 0; } }
.ftr.ftr-short .fsocial { margin-top: 0; }

/* layout groups: their children never take WordPress's block gap as a top margin (the grids misaligned) */
.bh-org__grid > *, .bh-also__cols > *, .bh-rlist > *, .bh-duo > *, .bh-pair > *, .bh-revs__grid > *, .bh-costs__list > *,
.bh-money__card > *, .bh-cmoney__card > *, .bh-day__cols > *, .bh-need__cols > *, .bh-where__cols > *, .bh-book__cols > *,
.bh-band__cols > *, .bh-offer__cols > *, .bh-open > *, .bh-cfig > *, .bh-fig > * { margin-block-start: 0; }

/* ==========================================================================
   18. /about/ (E2, two halves) and the two legal pages (S6/S7, 5 Nov)
   ========================================================================== */
.bh-sec.bh-ab p, .bh-sec.bh-aboffer p { font-size: 16px; line-height: 1.65; }
.bh-ab .bh-ab__grid { display: flex; flex-direction: column; }
.bh-ab--1 .bh-ab__t { display: contents; }
.bh-ab--1 .bh-ab__t > * { order: 2; }
.bh-ab--1 .bh-ab__t > h1 { order: 0; }
.bh-ab--1 .bh-ab__pic { order: 1; }
.bh-ab--2 .bh-ab__pic { order: -1; }
.entry-content > .wp-block-group.bh-ab--1 { padding: var(--s-xl) 0; }
.entry-content > .wp-block-group.bh-ab--2 { padding: 0 0 var(--s-xl); }
.bh-sec.bh-ab h1 { font-size: 26px; line-height: 1.16; margin: 0 0 var(--s-l); }
/* phone: under "Why I train this way" the same 48px as between the other photos and text on the page (12 Nov, Bart) */
@media (max-width: 1023px) { .bh-sec.bh-ab--1 h1 { margin-bottom: var(--s-xl); } }
.bh-sec.bh-ab h2 { margin: var(--s-xl) 0 var(--s-s); }
.bh-sec.bh-ab .bh-ab__t > h2:first-child { margin-top: 0; }
/* the photographs: edge to edge on the phone, framed and tall beside the text on web */
.bh-sec .bh-ab__pic { margin: 0 -24px var(--s-xl); overflow: hidden; }
.bh-sec .bh-ab__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh-ab__pic--1 { aspect-ratio: 3 / 5; } .bh-ab__pic--2 { aspect-ratio: 4 / 5; } .bh-ab__pic--3 { aspect-ratio: 3 / 5; margin: 0 !important; }
.bh-ab__pic--1 img { object-position: 100% 53%; transform-origin: 100% 53%; transform: scale(1.23); }
.bh-ab__pic--2 img { object-position: 50% 47%; transform-origin: 50% 47%; transform: scale(1.05); }
.bh-ab__pic--3 img { object-position: 0% 35%; transform-origin: 0% 35%; transform: scale(1.15); }
/* what it means for your horse */
.entry-content > .wp-block-group.bh-aboffer { padding: var(--s-xl) 0; }
.bh-aboffer .bh-aboffer__card { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); }
.bh-aboffer .bh-aboffer__go { margin-top: var(--s-m); padding-top: var(--s-m); border-top: 1px solid var(--frame); }
@media (min-width: 1024px) {
	.bh-sec.bh-ab p, .bh-sec.bh-aboffer p { font-size: 18px; line-height: 1.8; margin-bottom: var(--s-m); }
	.entry-content > .wp-block-group.bh-ab--1 { padding: var(--s-3xl) 0 0; }
	.entry-content > .wp-block-group.bh-ab--2 { padding: var(--s-3xl) 0 var(--s-2xl); }
	.bh-ab .bh-ab__grid { display: grid; grid-template-columns: 400px minmax(0, 600px); gap: var(--s-2xl); align-items: start; }
	.bh-ab--2 .bh-ab__grid { grid-template-columns: minmax(0, 600px) 400px; justify-content: space-between; }
	.bh-ab--1 .bh-ab__t { display: block; }
	.bh-ab--2 .bh-ab__pic { order: 0; }
	.bh-sec.bh-ab h1 { font-size: 40px; line-height: 1.1; margin: 0 0 var(--s-xl); }
	.bh-sec.bh-ab h2 { margin: var(--s-2xl) 0 var(--s-m); }
	.bh-sec.bh-ab h1 + h2 { margin-top: 0; }
	/* the frame drawn over the photograph, so the zoomed crop is clipped inside it: 1px line, 12px raised, 1px line */
	.bh-ab .bh-ab__pic { order: 0; position: relative; margin: 0; border: 1px solid var(--frame); background: var(--raised); padding: 0; aspect-ratio: 9 / 16; overflow: hidden; }
	.bh-ab .bh-ab__pic img { width: 100%; height: 100%; }
	.bh-ab .bh-ab__pic::after { content: ""; position: absolute; inset: 0; border: 12px solid var(--raised); box-shadow: inset 0 0 0 1px var(--frame); pointer-events: none; box-sizing: border-box; }
	.bh-ab__pic--1 img { object-position: 85% 40%; transform-origin: 85% 40%; transform: scale(1.28); }
	.bh-ab__pic--2 img { object-position: 18% 50%; transform-origin: 18% 50%; transform: scale(1.33); }
	.entry-content > .wp-block-group.bh-aboffer { padding: 0 0 var(--s-3xl); }
	.bh-aboffer .bh-aboffer__card { padding: var(--s-xl); display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-2xl); align-items: center; position: relative; }
	.bh-aboffer .bh-aboffer__card::before { content: ""; position: absolute; top: var(--s-xl); bottom: var(--s-xl); right: calc(var(--s-xl) + 240px + var(--s-2xl) / 2); width: 1px; background: var(--frame); }
	.bh-aboffer .bh-aboffer__t { max-width: 640px; }
	.bh-aboffer .bh-aboffer__go { margin: 0; padding: 0; border: 0; }
	.bh-aboffer .bh-aboffer__go .wp-block-buttons { justify-content: center; }
}
.bh-ab__grid > *, .bh-aboffer__card > * { margin-block-start: 0; }

/* the legal pages: one 680px column, the sections one after another */
.entry-content > .wp-block-group.bh-legal { padding: var(--s-xl) 0 var(--s-2xl); }
.bh-legal .bh-doc { max-width: 680px; margin: 0 auto; }
.bh-sec.bh-legal h1 { font-size: 28px; line-height: 1.14; margin: 0 0 var(--s-m); }
.bh-sec.bh-legal .bh-lede { font-size: 17px; line-height: 1.55; color: var(--ink); }
.bh-legal .bh-part { padding-top: var(--s-l); margin: 0; }
.bh-sec.bh-legal .bh-part h2 { font-size: 21px; margin: 0 0 var(--s-s); }
.bh-sec.bh-legal p { font-size: 16px; line-height: 1.65; margin: 0 0 var(--s-s); }
.bh-sec.bh-legal .bh-part p:last-child { margin-bottom: 0; }
.bh-sec.bh-legal .bh-upd { margin: var(--s-xl) 0 0; padding-top: var(--s-m); border-top: 1px solid var(--frame); font-size: 15px; color: var(--muted); }
.bh-ph { border: 1px dashed rgba(31,26,21,.5); padding: 0 4px; border-radius: 2px; }
.bh-doc > * { margin-block-start: 0; }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-legal { padding: var(--s-3xl) 0; }
	.bh-sec.bh-legal h1 { font-size: 40px; line-height: 1.1; margin-bottom: var(--s-l); }
	.bh-sec.bh-legal .bh-lede { font-size: 19px; line-height: 1.6; }
	.bh-legal .bh-part { padding-top: var(--s-xl); }
	.bh-sec.bh-legal .bh-part h2 { font-size: 24px; }
	.bh-sec.bh-legal p { font-size: 17px; line-height: 1.7; }
}

/* ==========================================================================
   19. /NEWSLETTER/ (DECISIONS 264-269): one message per plugin state.
   The phone is the centred notice on the cream; web is the card on the
   sunken ground, read left to right. The page fills the screen: header,
   the message centred in the space, the footer's utility row at the foot.
   ======================================================================= */
body.bh-nl-page #page { min-height: calc(100vh - var(--bh-top)); min-height: calc(100svh - var(--bh-top)); display: flex; flex-direction: column; }
body.bh-nl-page .site-content,
body.bh-nl-page .site-content > .ast-container,
body.bh-nl-page #primary,
body.bh-nl-page .site-main,
body.bh-nl-page .ast-article-single,
body.bh-nl-page .entry-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; margin: 0; padding: 0; }
body.bh-nl-page .site-content > .ast-container { max-width: 100%; }
body.bh-nl-page .entry-content > .bh-sec.bh-nl { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--s-l) var(--bh-gut); max-width: none; background: var(--ground); }
.bh-nl .bh-nl__msg { width: 100%; max-width: 600px; margin: 0 auto; text-align: center; box-sizing: border-box; }
.bh-nl .bh-nl__msg > * { margin-block-start: 0; }
.bh-nl fieldset { display: none; } /* the plugin's "shown only to administrators" note */
.bh-nl p:empty { display: none; }
.bh-sec.bh-nl .bh-eyebrow { margin: 0 0 var(--s-s); }
.bh-sec.bh-nl h1 { font-size: 30px; line-height: 1.15; margin: 0 0 var(--s-m); color: var(--ink); }
.bh-sec.bh-nl p { font-size: 17px; line-height: 1.6; margin: 0 0 var(--s-m); }
.bh-sec.bh-nl .bh-nl__msg > p:last-child { margin-bottom: 0; }

/* the profile state: the plugin's own form, dressed as the site's (Email address, Save, Unsubscribe) */
/* the plugin adds a "Read our privacy policy" line that the boards do not have; the footer carries the link */
.bh-nl .tnp-profile .tnp-field.tnp-field-privacy { display: none; }
.bh-nl .tnp.tnp-profile { margin: var(--s-l) 0 0; padding: 0; text-align: left; max-width: none; }
.bh-nl .tnp-profile form { display: flex; flex-direction: column; gap: var(--s-s); margin: 0; padding: 0; }
.bh-nl .tnp-profile .tnp-field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; width: 100%; }
.bh-nl .tnp-profile .tnp-field label { display: block; margin: 0; font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bh-nl .tnp-profile .tnp-field input.tnp-email { display: block; width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 13px 12px; font-family: var(--body); font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--raised); border: 1px solid var(--field); border-radius: 2px; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.bh-nl .tnp-profile .tnp-field input.tnp-email:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Save: an input cannot carry the ::before sweep, so the darker fill sweeps in as a background instead */
.bh-nl .tnp-profile .tnp-field-button { margin-top: 0; }
.bh-nl .tnp-profile input.tnp-submit { display: block; width: 100%; height: auto; margin: 0; padding: 15px 22px; border: 0; border-radius: 2px; cursor: pointer;
	font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1; color: var(--accent-text);
	background: linear-gradient(#151A16, #151A16) no-repeat 0 0 / 0 100%, var(--accent); -webkit-appearance: none; appearance: none;
	transition: background-size var(--sweep) var(--ease); -webkit-tap-highlight-color: transparent; }
.bh-nl .tnp-profile input.tnp-submit:active, .bh-nl .tnp-profile input.tnp-submit:focus-visible { background-size: 100% 100%, auto; transition-duration: 160ms; }
.bh-nl .tnp-profile input.tnp-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bh-sec.bh-nl p.bh-nl-unsub { margin: var(--s-m) 0 0; font-size: 15px; text-align: center; }
.bh-sec.bh-nl p.bh-nl-unsub a { color: var(--muted); }

@media (hover: hover) {
	.bh-nl .tnp-profile input.tnp-submit:hover { background-size: 100% 100%, auto; }
}
@media (min-width: 1024px) {
	body.bh-nl-page .entry-content > .bh-sec.bh-nl { padding: var(--s-xl) 40px; background: var(--sunken); }
	.bh-nl .bh-nl__msg { max-width: 640px; text-align: left; border: 1px solid var(--frame); background: var(--raised); padding: var(--s-xl) var(--s-2xl); }
	.bh-sec.bh-nl h1 { font-size: 40px; line-height: 1.1; padding-bottom: var(--s-m); border-bottom: 1px solid var(--rule); }
	.bh-sec.bh-nl p { font-size: 19px; line-height: 1.65; }
	/* 27 Oct, Bart: on web the field, its label, the button and the unsubscribe link are centred under the message */
	.bh-nl .tnp.tnp-profile { max-width: 420px; margin: var(--s-l) auto 0; text-align: center; }
	.bh-nl .tnp-profile form { align-items: center; }
	.bh-nl .tnp-profile .tnp-field { align-items: stretch; }
	.bh-nl .tnp-profile .tnp-field label { font-size: 15px; }
	.bh-nl .tnp-profile .tnp-field input.tnp-email { font-size: 17px; }
	.bh-nl .tnp-profile .tnp-field-button { width: auto; align-self: center; }
	.bh-nl .tnp-profile input.tnp-submit { width: auto; }
	.bh-sec.bh-nl p.bh-nl-unsub { margin-top: var(--s-s); }
}
@media (prefers-reduced-motion: reduce) { .bh-nl .tnp-profile input { transition-duration: 0ms !important; } }

/* ==========================================================================
   20. /EBOOK/, the pre-order version (SHIPS EbookPreorderWeb / Phone)
   ======================================================================= */
.bh-eb .bh-wrap > *, .bh-eb-hero__g > *, .bh-eb-hero__head > *, .bh-eb-hero__rest > *, .bh-eb-pair__g > *, .bh-eb-pair__body > *,
.bh-eb-toc__card > *, .bh-eb-toc > *, .bh-eb-toc__grp > *, .bh-eb-faq__col > *, .bh-eb-after > *, .bh-eb-buy > *, .bh-pv > *, .bh-pv__spread > * { margin-block-start: 0; }

/* I. the opening: sunken band; on the phone the cover sits under the subtitle, on web it is the left column */
.entry-content > .wp-block-group.bh-lp.bh-eb-hero { padding: var(--s-s) 0 var(--s-xl); }
.bh-sec.bh-eb-hero .bh-eyebrow { margin: 0 0 var(--s-s); }
.bh-sec.bh-eb-hero h1 { font-size: 30px; line-height: 1.1; margin: 0 0 var(--s-xs); }
.bh-sec.bh-eb-hero .bh-eb-sub { font-size: 17px; line-height: 1.45; margin: 0; }
.bh-eb-hero .wp-block-image.bh-eb-cover { width: 44%; margin: var(--s-s) auto; aspect-ratio: 2560 / 4096; overflow: hidden; border: 1px solid rgba(31,26,21,.45); box-shadow: 0 1px 0 rgba(31,26,21,.08), 0 18px 40px -18px rgba(31,26,21,.45); }
.bh-eb-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh-sec.bh-eb-hero .bh-eb-spec { font-size: 15px; color: var(--muted); margin: 0 0 var(--s-s); }
.bh-sec.bh-eb-hero .bh-eb-when { font-size: 17px; color: var(--ink); margin: 0 0 var(--s-m); }
.bh-sec.bh-eb-hero .bh-eb-price { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--s-2xs); }
.bh-eb-price .bh-eb-vat { font-family: var(--body); font-size: 15px; letter-spacing: 0; color: var(--muted); margin-left: 12px; vertical-align: 6px; }
.bh-sec.bh-eb-hero .bh-eb-prenote { font-size: 15px; color: var(--muted); margin: 0 0 var(--s-m); }
.bh-eb-buy { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-s); }
.bh-eb-buy .wp-block-buttons, .bh-eb-buy .wp-block-button { display: block; width: 100%; margin: 0; }
.bh-eb-buy .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; text-align: center; }
.bh-sec.bh-eb-hero .bh-eb-go { margin: 0; padding: var(--s-2xs) 0; text-align: center; font-weight: 600; }

/* II, III. what you will learn, who is this for */
.bh-sec.bh-eb-pair h2 { margin: 0 0 var(--s-s); }
.bh-eb-learn { list-style: none; margin: 0; padding: 0; counter-reset: bh-learn; }
.bh-eb-learn li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-xs); margin: 0; padding: var(--s-s) 0; border-top: 1px solid var(--rule); counter-increment: bh-learn; }
.bh-eb-learn li:last-child { border-bottom: 1px solid var(--rule); }
.bh-eb-learn li::before { content: counter(bh-learn); font-family: var(--display); font-size: 20px; line-height: 1.35; color: #666F66; }

/* the wide photograph, the home page hero at 50% 50%: 4:3 on the phone, a 528px band on web */
.entry-content > .wp-block-group.bh-eb-wide { margin: 0; padding: 0; }
.bh-eb-wide { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #3B4238; }
.bh-eb-wide .wp-block-image { position: absolute; inset: 0; margin: 0; }
.bh-eb-wide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* IV. the chapters: a framed card; numbers from a counter, so the preface and the terms stay unnumbered */
.entry-content > .wp-block-group.bh-lp.bh-eb-contents { padding-top: 0; }
.bh-eb-toc__card { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); }
.bh-sec.bh-eb-contents h2 { margin: 0 0 var(--s-s); }
.bh-eb-toc { counter-reset: bh-ch; }
.bh-sec.bh-eb-contents .bh-ch-part { margin: var(--s-m) 0 var(--s-2xs); font-size: 15px; letter-spacing: .02em; }
.bh-eb-toc .wp-block-details.bh-ch, .bh-sec.bh-eb-contents .bh-ch-leaf { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bh-eb-toc__grp > .bh-ch:has(+ .bh-ch-part), .bh-eb-toc__grp > .bh-ch-leaf:has(+ .bh-ch-part), .bh-eb-toc__grp > :last-child { border-bottom: 1px solid var(--rule); }
.bh-eb-toc .bh-ch > summary { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-xs); align-items: baseline; min-height: 44px; padding: 9px 0; box-sizing: border-box; list-style: none; cursor: default; }
.bh-eb-toc .bh-ch > summary::-webkit-details-marker { display: none; }
.bh-eb-toc .bh-ch > summary::before, .bh-sec.bh-eb-contents .bh-ch-leaf::before { counter-increment: bh-ch; content: counter(bh-ch); font-family: var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bh-eb-toc .bh-ch.bh-nonum > summary, .bh-sec.bh-eb-contents .bh-ch-leaf.bh-nonum { grid-template-columns: 1fr; }
.bh-eb-toc .bh-ch.bh-nonum > summary::before, .bh-sec.bh-eb-contents .bh-ch-leaf.bh-nonum::before { content: none; counter-increment: none; }
.bh-sec.bh-eb-contents .bh-ch-leaf { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-xs); align-items: baseline; min-height: 44px; padding: 9px 0; box-sizing: border-box; }
/* on the phone the list is the chapters only (the board): the sections stay closed */
.bh-eb-toc .bh-ch > :not(summary) { display: none; }
.bh-eb-toc .bh-ch .bh-ch__subs { list-style: none; margin: 15px 0 var(--s-m) 48px; padding: 0; }
.bh-eb-toc .bh-ch.bh-nonum .bh-ch__subs { margin-left: 0; }
.bh-eb-toc .bh-ch__subs li { margin: 0; padding: 5px 0; font-size: 15px; line-height: 1.45; color: #3F3A33; }
.bh-eb-toc .bh-ch__subs strong { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }

/* the chapter list's sign shows on web only (the phone list does not open) */
.bh-eb-toc .bh-ch > summary .bh-sg { display: none; }

/* V. the free preview: the carousel on the cover's dark ground, five spreads */
.bh-sec.bh-eb-pv h2 { text-align: center; margin: 0 0 var(--s-m); }
.bh-pv { position: relative; margin: 0 -24px; border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); background: var(--raised); }
.bh-pv__stage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #3B4238; display: flex; align-items: center; justify-content: center; }
.bh-pv__spread { display: none; width: 86%; box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); }
.bh-pv:not(.is-ready) .bh-pv__spread:first-child, .bh-pv__spread.is-on { display: flex; }
.bh-pv__pg { flex: 1 1 0; aspect-ratio: 1 / 1.414; background: #FBF9F4; }
.bh-pv__pg + .bh-pv__pg { border-left: 1px solid #DDD7CB; }
.bh-pv__count { position: absolute; top: var(--s-xs); right: var(--s-s); margin: 0; font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: #F0ECE3; }
.bh-pv__count em { font-style: normal; opacity: .62; padding: 0 6px; }
.bh-pv__arr { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(246,242,234,.6); background: rgba(31,26,21,.34); color: #F6F2EA; font-family: var(--body); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease); -webkit-tap-highlight-color: transparent; }
.bh-pv__prev { left: var(--s-xs); } .bh-pv__next { right: var(--s-xs); }
.bh-pv__arr:active, .bh-pv__arr:focus-visible { border-color: #F6F2EA; background: rgba(31,26,21,.6); }
.bh-pv__dots { position: absolute; left: 0; right: 0; bottom: var(--s-s); display: flex; justify-content: center; align-items: center; gap: var(--s-2xs); }
.bh-pv__dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(246,242,234,.55); cursor: pointer; transition: width var(--slow) var(--ease), background-color var(--slow) var(--ease); }
.bh-pv__dots button.on { width: 30px; background: #F6F2EA; }
.bh-eb-after { text-align: center; margin-top: var(--s-m); }
.bh-eb-after .wp-block-buttons { justify-content: center; }
.bh-sec.bh-eb-pv .bh-eb-terms { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

/* VI. questions: the S4 accordion */
.bh-eb-faq__col { max-width: 760px; margin: 0 auto; }
.bh-sec.bh-eb-faq h2 { margin: 0 0 var(--s-m); }
.bh-eb-faq .wp-block-details.bh-qa { margin: 0; padding: 0; border-bottom: 1px solid var(--frame); }
.bh-eb-faq__col > h2 + .bh-qa { border-top: 1px solid var(--frame); }
.bh-eb-faq .bh-qa > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); min-height: 56px; padding: var(--s-2xs) 0; box-sizing: border-box; font-weight: 600; list-style: none; cursor: pointer; }
.bh-eb-faq .bh-qa > summary::-webkit-details-marker { display: none; }
.bh-eb-faq .bh-qa > summary .bh-sg { margin: 0 4px; }
.bh-eb-faq .bh-qa > :not(summary) { margin-left: 0; }
.bh-sec.bh-eb-faq .bh-qa p { margin: 0; max-width: none; }
.bh-sec.bh-eb-faq .bh-qa p:last-child { padding-bottom: var(--s-l); }

@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-lp.bh-eb-hero { padding: var(--s-3xl) 0; }
	.bh-eb-hero__g { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--s-3xl); }
	.bh-eb-hero .wp-block-image.bh-eb-cover { grid-column: 1; grid-row: 1 / 5; align-self: center; width: 100%; margin: 0; }
	.bh-eb-hero__head { grid-column: 2; grid-row: 2; margin-bottom: var(--s-m); }
	.bh-eb-hero__rest { grid-column: 2; grid-row: 3; }
	.bh-sec.bh-eb-hero h1 { font-size: 46px; line-height: 1.06; margin: 0 0 var(--s-s); }
	.bh-sec.bh-eb-hero .bh-eb-sub { font-size: 20px; line-height: 1.45; margin: 0 0 var(--s-m); max-width: 36ch; }
	.bh-sec.bh-eb-hero .bh-eb-spec { font-size: 16px; margin: 0 0 var(--s-l); max-width: 52ch; }
	.bh-sec.bh-eb-hero .bh-eb-price { font-size: 56px; }
	.bh-eb-buy { flex-direction: row; align-items: center; gap: var(--s-l); flex-wrap: wrap; }
	.bh-eb-buy .wp-block-buttons, .bh-eb-buy .wp-block-button { display: inline-block; width: auto; }
	.bh-eb-buy .wp-block-button__link { display: inline-block; width: auto; }
	.bh-sec.bh-eb-hero .bh-eb-go { padding: 0; text-align: left; }

	.bh-eb-pair__g { display: grid; grid-template-columns: 320px minmax(0, 680px); gap: var(--s-3xl); align-items: start; }
	.bh-sec.bh-eb-pair h2 { margin: 0; }
	.bh-sec.bh-eb-pair .bh-eb-pair__body p { font-size: 17px; line-height: 1.7; }

	/* web: the SHIPS band is 1200 x 528 at the board's width, which is the photograph's own 2000 x 879 crop; it keeps that shape at every width (6 Nov) */
	.bh-eb-wide { height: auto; aspect-ratio: 2000 / 879; }

	.bh-eb-toc__card { padding: var(--s-xl); }
	.bh-sec.bh-eb-contents h2 { margin: 0 0 var(--s-l); }
	.bh-eb-toc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: start; }
	/* web: every chapter opens to show its sections */
	.bh-eb-toc .bh-ch > summary { grid-template-columns: 36px 1fr 24px; cursor: pointer; }
	.bh-eb-toc .bh-ch.bh-nonum > summary { grid-template-columns: 1fr 24px; }
	.bh-eb-toc .bh-ch > summary .bh-sg { display: block; }
	.bh-eb-toc .bh-ch[open] > :not(summary) { display: block; }

	.bh-sec.bh-eb-pv h2 { margin-bottom: var(--s-xl); }
	.bh-pv { max-width: 900px; margin: 0 auto; padding: var(--s-s); border: 1px solid var(--frame); box-sizing: border-box; }
	.bh-pv__stage { aspect-ratio: 16 / 10; }
	.bh-pv__spread { width: auto; height: 74%; }
	.bh-pv__pg { flex: none; height: 100%; }
	.bh-pv__count { top: var(--s-s); right: var(--s-m); font-size: 17px; }
	.bh-pv__arr { width: 48px; height: 48px; font-size: 26px; border-color: rgba(246,242,234,0); background: rgba(31,26,21,0); text-shadow: 0 1px 6px rgba(31,26,21,.55); }
	.bh-pv__prev { left: var(--s-m); } .bh-pv__next { right: var(--s-m); }
	.bh-eb-after { margin-top: var(--s-xl); }
}
@media (min-width: 1024px) and (hover: hover) {
	.bh-pv__arr:hover { border-color: rgba(246,242,234,.6); background: rgba(31,26,21,.34); }
}
@media (min-width: 1024px) {
	.bh-pv__arr:focus-visible { border-color: rgba(246,242,234,.6); background: rgba(31,26,21,.34); }
}
@media (prefers-reduced-motion: reduce) { .bh-pv__arr, .bh-pv__dots button { transition: none !important; } }

/* ==========================================================================
   21. /PUBLICATIONS/ (SHIPS PublicationsWeb / Phone): the figures, the two
   plates, and the frozen database of 353 works (13h, DATABASE-PAGE.md) as
   real tables grouped by century, with a search field over them.
   ======================================================================= */
.bh-pb-cols > *, .bh-pb-words > *, .bh-pb-figs > *, .bh-pb-fig > * { margin-block-start: 0; }
.entry-content > .wp-block-group.bh-lp.bh-pb-top { padding: var(--s-xl) 0 0; }
.bh-sec.bh-pb-top h1 { font-size: 30px; line-height: 1.1; margin: 0 0 var(--s-s); }
.bh-sec.bh-pb-top .bh-pb-intro { margin: 0; }
.bh-pb-plate.wp-block-image { margin: var(--s-m) 0 0; padding: 12px; border: 1px solid var(--frame); background: var(--raised); box-sizing: border-box; }
.bh-pb-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--frame); box-sizing: border-box; }
.bh-pb-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-m) var(--s-s); margin-top: 56px; }
.bh-pb-fig { display: flex; flex-direction: column; border-bottom: 1px solid var(--frame); padding: 0 0 var(--s-xs); }
.bh-sec.bh-pb-top .bh-pb-fig__n { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.03em; color: #666F66; white-space: nowrap; }
.bh-sec.bh-pb-top .bh-pb-fig__l { order: -1; margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }

.entry-content > .wp-block-group.bh-lp.bh-pb-other { padding: 56px 0 var(--s-2xl); }
.bh-pb-other .bh-pb-plate.wp-block-image { margin: 0 0 var(--s-m); }
.bh-sec.bh-pb-other h2 { margin: 0 0 var(--s-m); }
.bh-sec.bh-pb-other p { margin: 0 0 var(--s-m); max-width: 74ch; }
.bh-sec.bh-pb-other p strong { font-weight: 600; }
.bh-sec.bh-pb-other .bh-pb-close { margin: var(--s-l) 0 0; }

.entry-content > .wp-block-group.bh-lp.bh-pb-db { padding: var(--s-xl) 0 var(--s-2xl); }
.bh-db__bar { position: sticky; top: calc(var(--bh-top) + var(--bh-bar)); z-index: 5; background: var(--sunken); margin: 0 -24px; padding: var(--s-xs) 24px; }
.bh-dbsearch { display: flex; align-items: center; gap: var(--s-2xs); min-height: 48px; box-sizing: border-box; margin: 0; padding: 0 10px 0 12px; border: 1px solid var(--field); border-radius: 2px; background: var(--raised); color: var(--muted); font-size: 16px;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.bh-dbsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bh-dbsearch input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: none; background: none; box-shadow: none; font: inherit; font-size: 16px; color: var(--ink); caret-color: var(--accent); -webkit-appearance: none; appearance: none; }
.bh-dbsearch input::placeholder { color: var(--muted); }
/* the smallest phones (360px Android): the placeholder steps down a size so all of it shows; the typed text stays 16px */
@media (max-width: 379px) { .bh-dbsearch input::placeholder { font-size: 14px; } }
.bh-dbsearch input:focus::placeholder { color: transparent; }
.bh-dbsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bh-dbsearch .bh-dbsearch__go { width: 36px; height: 36px; margin: 0 -8px 0 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; font-size: 18px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.bh-dbsearch__go span { display: inline-block; transition: transform var(--sweep) var(--ease); }
.bh-dbsearch:focus-within .bh-dbsearch__go span, .bh-dbsearch__go:active span { transform: translateX(4px); }

.bh-cens { margin-top: var(--s-xs); border-top: 1px solid var(--frame); }
.bh-cen { border-bottom: 1px solid var(--frame); }
.bh-cen > summary { display: flex; align-items: center; gap: var(--s-s); min-height: 56px; list-style: none; cursor: pointer; }
.bh-cen > summary::-webkit-details-marker { display: none; }
.bh-cen__nm { flex: 1 1 auto; font-family: var(--display); font-size: 20px; line-height: 1.2; }
.bh-cen__ct { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bh-cen > summary .bh-sg { margin: 0 4px; }
.bh-dbwrap { margin-top: var(--s-xs); }
.bh-dbt tr[hidden], .bh-cen[hidden], .bh-db__none[hidden] { display: none !important; }
/* the phone: each row becomes a block, the year, the author, the title, then language and scan side by side (DATABASE-PAGE.md) */
.bh-sec table.bh-dbt, .bh-dbt tbody { display: block; width: 100%; margin: 0; border: 0; }
.bh-dbt caption { caption-side: top; }
.bh-dbt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bh-dbt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-s); padding: var(--s-s) 0 var(--s-2xs); border-bottom: 1px solid var(--frame); }
.bh-dbt tr:first-child { border-top: 1px solid var(--frame); }
.bh-dbt tr:last-child { border-bottom: 0; }
.bh-sec .bh-dbt td { display: block; padding: 0; border: 0; font-size: 16px; line-height: 1.5; background: none; }
.bh-sec .bh-dbt .yr { grid-column: 1 / -1; font-family: var(--display); font-size: 20px; line-height: 1.2; color: #666F66; font-variant-numeric: tabular-nums; }
.bh-sec .bh-dbt .au { grid-column: 1 / -1; margin-top: 4px; font-weight: 600; line-height: 1.4; }
.bh-sec .bh-dbt .ti { grid-column: 1 / -1; font-style: italic; line-height: 1.45; }
.bh-sec .bh-dbt .la { grid-column: 1; align-self: center; font-size: 14px; color: var(--muted); }
.bh-sec .bh-dbt .sc { grid-column: 2; align-self: center; text-align: right; }
.bh-sec .bh-dbt .sc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
/* a long scan label ("1599 (Cod. Guelf. 5 Aug. 2°)") wraps inside its column rather than running out of it */
.bh-sec .bh-dbt .sc { max-width: 55vw; overflow-wrap: anywhere; }
.bh-sec .bh-dbt .sc a { white-space: normal; }
.bh-sec.bh-pb-db .bh-db__none { margin: var(--s-m) 0 0; text-align: center; font-size: 15px; color: var(--muted); }

@media (hover: hover) { .bh-dbsearch__go:hover span { transform: translateX(4px); } }
@media (min-width: 1024px) {
	.entry-content > .wp-block-group.bh-lp.bh-pb-top { padding: var(--s-3xl) 0 0; }
	.bh-pb-top .bh-pb-cols, .bh-pb-other .bh-pb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl); align-items: start; }
	.bh-sec.bh-pb-top h1 { font-size: 40px; max-width: 20ch; margin-bottom: var(--s-m); }
	.bh-sec.bh-pb-top .bh-pb-intro { font-size: 18px; line-height: 1.75; max-width: 70ch; }
	.bh-pb-plate.wp-block-image, .bh-pb-other .bh-pb-plate.wp-block-image { margin: 0; }
	.bh-pb-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-m); margin-top: 80px; }
	.bh-pb-fig { padding-bottom: var(--s-s); }
	.bh-sec.bh-pb-top .bh-pb-fig__n { font-size: 52px; }
	.bh-sec.bh-pb-top .bh-pb-fig__l { font-size: 15px; margin-bottom: var(--s-2xs); }
	.entry-content > .wp-block-group.bh-lp.bh-pb-other { padding: 80px 0 var(--s-2xl); }

	.entry-content > .wp-block-group.bh-lp.bh-pb-db { padding: var(--s-2xl) 0 var(--s-3xl); }
	.bh-db__bar { position: static; margin: 0 0 var(--s-m); padding: 0; background: none; }
	.bh-dbsearch { display: inline-flex; min-width: 440px; min-height: 0; gap: var(--s-s); padding: 11px 14px; }
	.bh-cens { margin-top: 0; }
	.bh-cen > summary { gap: var(--s-m); min-height: 64px; }
	.bh-cen__nm { font-size: 24px; }
	.bh-dbwrap { margin: 0 0 var(--s-m); border: 1px solid var(--frame); background: var(--raised); }
	.bh-sec table.bh-dbt { display: table; table-layout: fixed; border-collapse: collapse; }
	.bh-dbt tbody { display: table-row-group; }
	.bh-dbt thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
	.bh-dbt tr { display: table-row; padding: 0; border: 0; }
	.bh-sec .bh-dbt th { position: sticky; top: calc(var(--bh-top) + 56px); z-index: 1; background: var(--sunken); text-align: left; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: var(--s-s) var(--s-m); border: 0; border-bottom: 1px solid var(--frame); white-space: nowrap; }
	.bh-sec .bh-dbt td, .bh-sec .bh-dbt .yr, .bh-sec .bh-dbt .au, .bh-sec .bh-dbt .ti, .bh-sec .bh-dbt .la, .bh-sec .bh-dbt .sc { display: table-cell; padding: 13px var(--s-m); margin: 0; border-bottom: 1px solid var(--rule); font-family: var(--body); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--ink); vertical-align: top; text-align: left; }
	.bh-dbt tr:last-child td { border-bottom: 0; }
	.bh-sec .bh-dbt .yr { white-space: nowrap; color: var(--muted); }
	.bh-sec .bh-dbt .ti { font-style: italic; }
	.bh-sec .bh-dbt .sc { max-width: none; }
	.bh-sec .bh-dbt .sc a { display: inline; min-height: 0; }
	.bh-sec .bh-dbt th, .bh-sec .bh-dbt td { box-sizing: border-box; }
	.bh-dbt .c-yr { width: 170px; } .bh-dbt .c-au { width: 24%; } .bh-dbt .c-la { width: 150px; } .bh-dbt .c-sc { width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .bh-dbsearch, .bh-dbsearch__go span { transition: none !important; } }

/* ==========================================================================
   22. THE + AND − OF EVERY ACCORDION (S8 motion table: "drawn bars; the upright
   one lays flat over 420ms, as the phone menu"), 6 Nov. One sign for all of
   them: the ebook chapters and questions, the publications centuries and any
   Details block. The sign is a span the theme adds to each summary.
   ======================================================================= */
.bh-sg { position: relative; display: block; width: 16px; height: 16px; flex: none; justify-self: center; align-self: center; color: var(--accent); }
.bh-sg::before, .bh-sg::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--slow) var(--ease); }
.bh-sg::after { transform: rotate(90deg); }
details[open] > summary .bh-sg::after { transform: rotate(0deg); }
details[open] > summary .bh-sg::before { transform: rotate(180deg); }
.wp-block-details > summary { list-style: none; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { .bh-sg::before, .bh-sg::after { transition: none !important; } }

/* ==========================================================================
   23. THE SWITCHER (option 4, DECISIONS 294e, 294f) AND DARK MODE (292b)
   ======================================================================= */
/* web: "EN" with a small arrow and the appearance icon, at the right of the header */
.bhh .bhx { position: absolute; right: 40px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; }
.bhx button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #F0ECE3; font: inherit; font-family: var(--body); font-size: 14px; letter-spacing: .06em; line-height: 1; cursor: pointer; }
.bhx button:hover, .bhx button:focus { background: none; color: #F0ECE3; }
.bhx .bhxt { border-radius: 50%; }
.bhxl { position: relative; }
.bhxl .bhc { width: 10px; height: 10px; transition: transform var(--sweep) var(--ease); }
.bhxl.is-open .bhc { transform: rotate(180deg); }
.bhxd { position: absolute; top: 100%; right: 0; padding-top: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); z-index: 2;
	transition: opacity var(--quick) var(--ease) 120ms, transform var(--sweep) var(--ease) 120ms, visibility 0s linear 380ms; }
.bhh.over .bhxd { padding-top: 14px; } .bhh.tall .bhxd { padding-top: 16px; } .bhh.tall.slim .bhxd { padding-top: 6px; }
.bhxl.is-open .bhxd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bhxd a, .bhxd span { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--body); font-size: 15px; color: #F0ECE3; text-decoration: none; }
.bhxd a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; }
.bhxd span[aria-disabled="true"], .bhxlist span[aria-disabled="true"] { color: rgba(240,236,227,.45); cursor: default; }
/* the icon shows the current setting */
.bhxt .bhxi { display: none; width: 18px; height: 18px; }
:root:not([data-theme-mode]) .bhxt .bhxi--auto, :root[data-theme-mode="auto"] .bhxt .bhxi--auto,
:root[data-theme-mode="light"] .bhxt .bhxi--light, :root[data-theme-mode="dark"] .bhxt .bhxi--dark { display: block; }
/* phone: the icon in the bar beside the menu button; "Language" in the open menu */
.bhbar .bhxt { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #F6F2EA; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bhbar .bhxt .bhxi { width: 20px; height: 20px; }
.bhbar.float .bhxt { pointer-events: auto; }
.bhbar .bhxt:active { opacity: .62; }
.bhmenu > .bhxlang { margin: auto 0 18px; }
.bhxlab { margin: 0 0 6px; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #B9C0B5; }
.bhxlist { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
.bhxlist a, .bhxlist span { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--body); font-size: 17px; color: #DCE0D8; text-decoration: none; }
.bhxlist a[aria-current="true"] { color: #F6F2EA; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (min-width: 1024px) { .bhbar .bhxt { display: none; } }
@media (hover: hover) { .bhxd a:not([aria-current]):hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; } }
@media (prefers-reduced-motion: reduce) { .bhxd, .bhxl .bhc { transition: none !important; } }

/* dark: chosen with the icon */
:root[data-theme="dark"] { --ground: #2A322C; --raised: #323B34; --sunken: #222924; --feature: #181E1A;
	--accent: #E6DFD1; --accent-text: #1A201C; --tint: #E7EAE4;
	--ink: #ECE6DA; --muted: #A9A396; --rule: #414B44; --frame: #4D584F; --field: #7D857B; color-scheme: dark; }
:root[data-theme="dark"] ::selection { background: #4D584F; color: #ECE6DA; }
/* the frame is darker than the page: header, submenus, phone bar and menu, footer */
:root[data-theme="dark"] .bhh:not(.over), :root[data-theme="dark"] .bhk, :root[data-theme="dark"] .bhbar:not(.float), :root[data-theme="dark"] .bhbar.float.is-open, :root[data-theme="dark"] .bhmenu { background-color: #181E1A; }
:root[data-theme="dark"] .ftr { background: #181E1A; --accent: #181E1A; --accent-text: #F6F2EA; --field: #8F8878; --raised: #F6F2EA; }
/* the hero is already dark: its headline stays cream */
:root[data-theme="dark"] .bh-hero, :root[data-theme="dark"] .bh-hero .bh-hero__copy h1 { color: #F6F2EA; }
/* buttons invert: cream fill, dark green words; a lighter cream sweeps in */
:root[data-theme="dark"] .bh-sec .wp-block-button > .wp-block-button__link.wp-element-button::before { background: #FBF8F1; }
:root[data-theme="dark"] .bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(236,230,218,.08); }
:root[data-theme="dark"] .bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(246,242,234,.20); }
:root[data-theme="dark"] .bh-nl .tnp-profile input.tnp-submit { background: linear-gradient(#FBF8F1, #FBF8F1) no-repeat 0 0 / 0 100%, var(--accent); }
:root[data-theme="dark"] .bh-ride .signup .go::before { background: #FBF8F1; }
/* the opening box on the lessons and clinics pages takes the footer's colour (292e c) */
:root[data-theme="dark"] .bh-sec.bh-open .bh-open__words, :root[data-theme="dark"] .entry-content > .wp-block-group.bh-open { background: #181E1A; }
/* numerals in the mid sage, written into single pages */
:root[data-theme="dark"] .bh-sec .bh-step .bh-step__num, :root[data-theme="dark"] .bh-sec.bh-org .bh-cell .bh-k, :root[data-theme="dark"] .bh-eb-learn li::before, :root[data-theme="dark"] .bh-sec.bh-pb-top .bh-pb-fig__n { color: #96A092; }
:root[data-theme="dark"] .bh-sec .bh-dbt .yr { color: #B3BBAD; }
:root[data-theme="dark"] .bh-eb-toc .bh-ch__subs li { color: #C9C3B6; }
:root[data-theme="dark"] .bh-sec .bh-rev .bh-ava, :root[data-theme="dark"] .bh-sec .bh-lrev .bh-ava { background: #343E37; }
:root[data-theme="dark"] .bh-ph { border-color: rgba(236,230,218,.5); }
/* focus lines are cream on dark */
:root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] select:focus-visible, :root[data-theme="dark"] textarea:focus-visible { outline-color: #E6DFD1; }

/* dark: Device, when the phone, computer or browser is set to dark */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --ground: #2A322C; --raised: #323B34; --sunken: #222924; --feature: #181E1A;
	--accent: #E6DFD1; --accent-text: #1A201C; --tint: #E7EAE4;
	--ink: #ECE6DA; --muted: #A9A396; --rule: #414B44; --frame: #4D584F; --field: #7D857B; color-scheme: dark; }
:root:not([data-theme="light"]) ::selection { background: #4D584F; color: #ECE6DA; }
/* the frame is darker than the page: header, submenus, phone bar and menu, footer */
:root:not([data-theme="light"]) .bhh:not(.over), :root:not([data-theme="light"]) .bhk, :root:not([data-theme="light"]) .bhbar:not(.float), :root:not([data-theme="light"]) .bhbar.float.is-open, :root:not([data-theme="light"]) .bhmenu { background-color: #181E1A; }
:root:not([data-theme="light"]) .ftr { background: #181E1A; --accent: #181E1A; --accent-text: #F6F2EA; --field: #8F8878; --raised: #F6F2EA; }
/* the hero is already dark: its headline stays cream */
:root:not([data-theme="light"]) .bh-hero, :root:not([data-theme="light"]) .bh-hero .bh-hero__copy h1 { color: #F6F2EA; }
/* buttons invert: cream fill, dark green words; a lighter cream sweeps in */
:root:not([data-theme="light"]) .bh-sec .wp-block-button > .wp-block-button__link.wp-element-button::before { background: #FBF8F1; }
:root:not([data-theme="light"]) .bh-sec .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(236,230,218,.08); }
:root:not([data-theme="light"]) .bh-sec.bh-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button::before { background: rgba(246,242,234,.20); }
:root:not([data-theme="light"]) .bh-nl .tnp-profile input.tnp-submit { background: linear-gradient(#FBF8F1, #FBF8F1) no-repeat 0 0 / 0 100%, var(--accent); }
:root:not([data-theme="light"]) .bh-ride .signup .go::before { background: #FBF8F1; }
/* the opening box on the lessons and clinics pages takes the footer's colour (292e c) */
:root:not([data-theme="light"]) .bh-sec.bh-open .bh-open__words, :root:not([data-theme="light"]) .entry-content > .wp-block-group.bh-open { background: #181E1A; }
/* numerals in the mid sage, written into single pages */
:root:not([data-theme="light"]) .bh-sec .bh-step .bh-step__num, :root:not([data-theme="light"]) .bh-sec.bh-org .bh-cell .bh-k, :root:not([data-theme="light"]) .bh-eb-learn li::before, :root:not([data-theme="light"]) .bh-sec.bh-pb-top .bh-pb-fig__n { color: #96A092; }
:root:not([data-theme="light"]) .bh-sec .bh-dbt .yr { color: #B3BBAD; }
:root:not([data-theme="light"]) .bh-eb-toc .bh-ch__subs li { color: #C9C3B6; }
:root:not([data-theme="light"]) .bh-sec .bh-rev .bh-ava, :root:not([data-theme="light"]) .bh-sec .bh-lrev .bh-ava { background: #343E37; }
:root:not([data-theme="light"]) .bh-ph { border-color: rgba(236,230,218,.5); }
/* focus lines are cream on dark */
:root:not([data-theme="light"]) input:focus-visible, :root:not([data-theme="light"]) select:focus-visible, :root:not([data-theme="light"]) textarea:focus-visible { outline-color: #E6DFD1; }
}

/* ==========================================================================
   24. THE "ALSO POSSIBLE" SWEEP ON THE ACCORDIONS (6 Nov, Bart, DECISIONS 295)
   The home page rows' soft fill, sweeping in from the left: on hover on web,
   under the finger on the phone. On the ebook questions and chapters and the
   publications centuries. The phone chapter list does not open, so no sweep.
   ======================================================================= */
.bh-eb-faq .bh-qa > summary, .bh-cen > summary, .bh-eb-toc .bh-ch > summary { position: relative; isolation: isolate; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
.bh-eb-faq .bh-qa > summary::after, .bh-cen > summary::after, .bh-eb-toc .bh-ch > summary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunken); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease); }
.bh-cen > summary::after { background: var(--raised); }
.bh-eb-faq .bh-qa > summary:active::after, .bh-cen > summary:active::after, .bh-eb-faq .bh-qa > summary:focus-visible::after, .bh-cen > summary:focus-visible::after { transform: scaleX(1); }
.bh-eb-faq .bh-qa > summary, .bh-cen > summary { -webkit-tap-highlight-color: transparent; }
.bh-eb-toc .bh-ch > summary::after { display: none; }
@media (min-width: 1024px) {
	.bh-eb-toc .bh-ch > summary::after { display: block; }
	.bh-eb-faq .bh-qa > summary::after, .bh-cen > summary::after, .bh-eb-toc .bh-ch > summary::after { transition-duration: var(--sweep); }
	.bh-eb-toc .bh-ch > summary:focus-visible::after { transform: scaleX(1); }
}
@media (min-width: 1024px) and (hover: hover) {
	.bh-eb-faq .bh-qa > summary:hover::after, .bh-cen > summary:hover::after, .bh-eb-toc .bh-ch > summary:hover::after { transform: scaleX(1); }
}
/* dark: the fill is the raised ground, as the dark drafts' "Also possible" rows; inside the raised chapters card it is the page ground */
:root[data-theme="dark"] .bh-prow::before, :root[data-theme="dark"] .bh-eb-faq .bh-qa > summary::after, :root[data-theme="dark"] .bh-cen > summary::after { background: var(--raised); }
:root[data-theme="dark"] .bh-eb-toc .bh-ch > summary::after { background: var(--ground); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bh-prow::before, :root:not([data-theme="light"]) .bh-eb-faq .bh-qa > summary::after, :root:not([data-theme="light"]) .bh-cen > summary::after { background: var(--raised); }
	:root:not([data-theme="light"]) .bh-eb-toc .bh-ch > summary::after { background: var(--ground); }
}
@media (prefers-reduced-motion: reduce) { .bh-eb-faq .bh-qa > summary::after, .bh-cen > summary::after, .bh-eb-toc .bh-ch > summary::after { transition: none !important; } }
/* moving straight from one row to the next in the same list: the next is filled at once and the last empties at once (6 Nov, DECISIONS 295a) */
.bh-snap .bh-prow::before, .bh-snap .bh-qa > summary::after, .bh-snap .bh-ch > summary::after, .bh-snap .bh-cen > summary::after { transition: none !important; }
/* the answer sits a little further from its question (6 Nov, Bart, DECISIONS 295b) */
.bh-sec.bh-eb-faq .bh-qa > summary + p, .bh-sec.bh-eb-faq .bh-qa > p:first-of-type { padding-top: var(--s-xs); }

/* 25. DUTCH PAGES (6 Nov, DECISIONS 297e) */
/* the line under the ebook pages line that the ebook is in English (296p): its own line, in ink */
.bh-sec.bh-eb-hero .bh-eb-spec .bh-langnote { display: block; margin-top: 8px; color: var(--ink); }
/* 26. THE SWITCHER ON THE HERO PHOTOGRAPH (7 Nov, Bart, DECISIONS 298c): on the bright, busy leaves
   at the top right, "EN" and the appearance icon sit on a soft dark ground so they can be read.
   Only on the photograph; the green bars are unchanged. */
@media (min-width: 1024px) {
	.bhh.over .bhx { top: 50%; bottom: auto; transform: translateY(-50%); height: 44px; gap: 2px; padding: 0 4px 0 10px; border-radius: 22px;
		background: rgba(24,30,26,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* 27. THE EBOOK PREVIEW, REAL PAGES, AND THE READER (9 Nov, Bart, DECISIONS 300)
   Four spreads (two pages each, 2400 x 1919) replace the five blank ones. Each spread is the image of
   the two pages, linked to the full-size file; the script opens it in a full-screen reader instead,
   where it can be enlarged up to four times, moved around, pinched on a phone, and read. */
.bh-pv__spread { aspect-ratio: 2400 / 1919; background: #FBF9F4; }
.bh-pv__spread > .bh-pv__img, .bh-pv__spread > .bh-pv__img a { display: block; width: 100%; height: 100%; margin: 0; }
.bh-pv__img a { cursor: zoom-in; }
.bh-pv__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bh-pv__zoom { right: auto; top: var(--s-xs); left: var(--s-s); transform: none; width: 44px; height: 44px; }
.bh-pv__zoom svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
	.bh-pv__spread { width: auto; height: 74%; }
	.bh-pv__zoom { top: var(--s-s); left: var(--s-m); border-color: rgba(246,242,234,.6); background: rgba(31,26,21,.34); text-shadow: none; }
	.bh-pv__zoom svg { width: 22px; height: 22px; }
}
/* the reader */
html.bh-lb-open { overflow: hidden; }
.bh-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(20,24,21,.96); color: #F6F2EA; font-family: var(--body); }
.bh-lb[hidden] { display: none; }
.bh-lb__view { position: absolute; inset: 64px 0 76px; overflow: auto; display: flex; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; outline: none; }
.bh-lb__img { flex: none; margin: auto; display: block; max-width: none; height: auto; background: #FBF9F4; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.bh-lb.is-zoomed .bh-lb__img { cursor: grab; }
.bh-lb.is-dragging .bh-lb__img { cursor: grabbing; }
.bh-lb__count { position: absolute; top: 20px; left: 24px; margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: .06em; color: #F0ECE3; }
.bh-lb__count em { font-style: normal; opacity: .62; padding: 0 6px; }
.bh-lb__btn, .bh-lb__lvl { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid rgba(246,242,234,.6); border-radius: 50%; background: rgba(31,26,21,.4); color: #F6F2EA; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
.bh-lb__btn { width: 44px; height: 44px; }
.bh-lb__btn:hover, .bh-lb__btn:focus-visible, .bh-lb__lvl:hover, .bh-lb__lvl:focus-visible { background: rgba(31,26,21,.7); border-color: #F6F2EA; color: #F6F2EA; }
.bh-lb__btn:focus-visible, .bh-lb__lvl:focus-visible { outline: 2px solid #F6F2EA; outline-offset: 2px; }
.bh-lb__close { position: absolute; top: 10px; right: 16px; font-size: 28px; }
.bh-lb__arr { position: absolute; top: 50%; transform: translateY(-50%); font-size: 28px; }
.bh-lb__arr[hidden] { display: none; }
.bh-lb__prev { left: 12px; } .bh-lb__next { right: 12px; }
.bh-lb__bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.bh-lb__lvl { min-width: 72px; height: 44px; padding: 0 12px; border-radius: 22px; font-size: 15px; letter-spacing: .04em; }
.bh-lb.is-zoomed .bh-lb__arr { opacity: .35; }
@media (max-width: 1023px) {
	.bh-lb__view { inset: 56px 0 68px; }
	.bh-lb__arr { top: auto; bottom: 16px; transform: none; }
	.bh-lb__prev { left: 12px; } .bh-lb__next { right: 12px; }
}

/* 28. THE CHECKOUT AND THE THANK-YOU PAGE (11 Nov, Bart, DECISIONS 306) --------
   The signed-off boards CheckoutWeb/Phone and ThankYouWeb/Phone on WooCommerce's
   classic checkout. Fields as the booking form; the order card right and sticky
   on web, first on the phone; Stripe's form takes its look from these fields. */
body.woocommerce-checkout .site-content > .ast-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; display: block; }
body.woocommerce-checkout #primary { float: none; width: 100%; margin: 0; padding: var(--s-l) 0 var(--s-2xl); border: 0; }
body.woocommerce-checkout #secondary { display: none; }
body.woocommerce-checkout .ast-article-single, body.woocommerce-checkout .ast-article-post, body.woocommerce-checkout article.page { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body.woocommerce-checkout .entry-header { margin: 0 0 var(--s-m); padding: 0; text-align: left; }
body.woocommerce-checkout .entry-title { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
body.woocommerce-checkout .entry-content { margin: 0; }
@media (min-width: 1024px) {
	body.woocommerce-checkout .site-content > .ast-container { padding: 0 40px; }
	body.woocommerce-checkout #primary { padding: var(--s-2xl) 0 var(--s-3xl); }
	body.woocommerce-checkout .entry-header { margin-bottom: var(--s-xl); }
	body.woocommerce-checkout .entry-title { font-size: 40px; line-height: 1.1; }
}
/* the layout: one column on the phone with the order first; two on web, the order sticky on the right */
.woocommerce-checkout form.checkout { display: flex; flex-direction: column; margin: 0; }
.woocommerce-checkout form.checkout > .bh-sum { order: -1; margin: 0 0 var(--s-l); }
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { order: -2; }
@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 640px) 400px; justify-content: space-between; column-gap: var(--s-2xl); align-items: start; }
	.woocommerce-checkout form.checkout > * { grid-column: 1; min-width: 0; }
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
	.woocommerce-checkout form.checkout > .bh-sum { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: calc(var(--bh-bar) + var(--bh-top) + 32px); margin: 0; }
}
.woocommerce-checkout #customer_details { margin: 0; }
/* Astra floats the details at 55% and the review at 40% with a frame: both stand aside (one column of our own) */
body.woocommerce-page.woocommerce-checkout form.checkout #customer_details.col2-set, body.woocommerce-page.woocommerce-checkout form.checkout #order_review,
body.woocommerce-page.woocommerce-checkout form.checkout #order_review_heading, body.woocommerce-page.woocommerce-checkout form.checkout #payment { float: none; width: auto; max-width: none; margin-right: 0; margin-left: 0; padding: 0; border: 0; box-shadow: none; background: none; }
body.woocommerce-page.woocommerce-checkout form.checkout #order_review { margin-top: var(--s-l); padding: 0 !important; border: 0 !important; } /* Astra's own rule carries an id inside :not() */
body.woocommerce-page.woocommerce-checkout form.checkout .woocommerce-billing-fields > h3 { border: 0; padding: 0; }
/* the field Stripe once read its look from: no longer needed (the look is set in functions.php), so it takes no room */
.woocommerce-checkout .wc-stripe-hidden-style-input { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; max-width: none; padding: 0; margin: 0; }
.woocommerce-checkout #customer_details .col-2, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout #customer_details::before, .woocommerce-checkout #customer_details::after { display: none; }
.woocommerce-checkout #order_review { margin: var(--s-l) 0 0; padding: 0; float: none; width: auto; }
/* the headings: "Your details", "Payment" */
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .bh-co-h { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s-s); padding: 0; }
@media (min-width: 1024px) { .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .bh-co-h { font-size: 24px; margin-bottom: var(--s-m); } }
/* the fields, as the booking form */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--s-s); }
@media (min-width: 1024px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row { grid-column: 1 / -1; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first { grid-column: 1; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last { grid-column: 2; }
}
.woocommerce-checkout form .form-row { display: flex; flex-direction: column; gap: 6px; float: none; width: auto; margin: 0; padding: 0; }
.woocommerce-checkout form .form-row.hidden, .woocommerce-checkout form .form-row[style*="display: none"] { display: none; }
.woocommerce-checkout form .form-row label { font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }
.woocommerce-checkout form .form-row .required { display: none; }
.woocommerce-checkout form .form-row .optional { font-weight: 400; color: var(--muted); }
.woocommerce-checkout form .form-row .input-text, .woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	box-sizing: border-box; width: 100%; height: auto; min-height: 48px; margin: 0;
	font-family: var(--body); font-size: 16px; line-height: 1.3; color: var(--ink);
	background: var(--raised); border: 1px solid var(--field); border-radius: 2px; padding: 13px 12px; box-shadow: none;
	transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.woocommerce-checkout form .form-row .input-text::placeholder { color: var(--field); opacity: 1; }
.woocommerce-checkout form .form-row .input-text:focus, .woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--open .select2-selection--single { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.woocommerce-checkout form .form-row.woocommerce-invalid .input-text, .woocommerce-checkout form .form-row.woocommerce-invalid .select2-selection { border-color: #A3402F; }
.woocommerce-checkout .select2-container--default .select2-selection--single { display: flex; align-items: center; padding: 0 40px 0 12px; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.3; color: var(--ink); }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 12px; top: 0; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent transparent; }
.select2-container--default .select2-dropdown { border: 1px solid var(--field); border-radius: 2px; background: var(--raised); color: var(--ink); font-family: var(--body); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--field); background: var(--raised); color: var(--ink); padding: 8px 10px; font-size: 16px; }
.select2-container--default .select2-results__option { padding: 10px 12px; font-size: 16px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--accent); color: var(--accent-text); }
.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--sunken); color: var(--ink); }
@media (min-width: 1024px) { .woocommerce-checkout form .form-row .input-text, .woocommerce-checkout form .form-row select { padding: 11px 12px; min-height: 46px; } .woocommerce-checkout .select2-container--default .select2-selection--single { min-height: 46px; } }
/* Apple Pay and Google Pay, when the device has them, and Stripe's "or" */
.woocommerce-checkout #wc-stripe-express-checkout-element { margin: 0; }
.woocommerce-checkout #wc-stripe-express-checkout-button-separator { margin: var(--s-s) 0 var(--s-l); text-align: center; font-size: 14px; color: var(--muted); }
/* the payment: Stripe's own form; the one gateway's radio and label stand aside */
.woocommerce-checkout #payment { background: none; border-radius: 0; padding: 0; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods { margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; padding: 0; line-height: inherit; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe > input.input-radio, .woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe > label { display: none; }
.woocommerce-checkout #payment div.payment_box { margin: 0; padding: 0; background: none !important; color: var(--ink); font-size: 16px; border-radius: 0; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .wc-stripe-payment-method-instruction:empty { display: none; }
.woocommerce-checkout #payment fieldset.wc-upe-form { margin: 0; padding: 0; border: 0; }
.woocommerce-checkout #payment .wc-stripe-upe-element { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.woocommerce-checkout #payment div.form-row.place-order { display: flex; flex-direction: column; gap: var(--s-l); margin: 0; padding: 0; }
.woocommerce-checkout #payment div.form-row.place-order > noscript { display: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { display: none; } /* no terms box: the line under the button links the terms (306) */
.woocommerce-checkout #payment ul.payment_methods { margin-bottom: 0; }
.woocommerce-checkout .bh-co-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.woocommerce-checkout #payment .place-order > .bh-co-note:first-of-type { margin-bottom: calc(var(--s-s) - var(--s-l)); }
.woocommerce-checkout .bh-co-terms { margin-top: calc(var(--s-s) - var(--s-l)); text-align: center; }
.woocommerce-checkout .bh-co-terms a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.woocommerce-checkout .bh-co-terms a:hover, .woocommerce-checkout .bh-co-terms a:focus-visible { text-decoration-thickness: 2px; color: var(--ink); }
@media (min-width: 1024px) { .woocommerce-checkout .bh-co-note { font-size: 15px; } .woocommerce-checkout .bh-co-terms { text-align: left; } }
/* the withdrawal box */
.woocommerce-checkout .bh-waiver { margin: 0; }
/* 11 Nov, Bart: the box and its words sat too close and the words ran under the box - a two-column grid, the words in their own column */
body.woocommerce-checkout form .form-row.bh-waiver label.checkbox { display: grid !important; grid-template-columns: 20px 1fr; column-gap: 14px; align-items: start; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink); cursor: pointer; }
body.woocommerce-checkout form .form-row.bh-waiver label.checkbox .required { display: none; }
body.woocommerce-checkout form .form-row.bh-waiver input.input-checkbox { grid-column: 1; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
@media (min-width: 1024px) { body.woocommerce-checkout form .form-row.bh-waiver label.checkbox { font-size: 16px; } body.woocommerce-checkout form .form-row.bh-waiver input.input-checkbox { margin-top: 3px; } }
/* the button, as the site's: a darker fill sweeps in from the left */
.woocommerce-checkout #payment #place_order, .bh-ty .bh-btn {
	position: relative; overflow: hidden; isolation: isolate; display: block; box-sizing: border-box; width: 100%; float: none; margin: 0;
	font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; text-align: center; text-decoration: none;
	padding: 17px 20px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--accent-text); box-shadow: none; cursor: pointer;
}
.woocommerce-checkout #payment #place_order::before, .bh-ty .bh-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #151A16; transform: scaleX(0); transform-origin: left; transition: transform var(--sweep) var(--ease); }
.woocommerce-checkout #payment #place_order:focus-visible::before, .woocommerce-checkout #payment #place_order:active::before, .bh-ty .bh-btn:focus-visible::before, .bh-ty .bh-btn:active::before { transform: scaleX(1); }
@media (hover: hover) { .woocommerce-checkout #payment #place_order:hover::before, .bh-ty .bh-btn:hover::before { transform: scaleX(1); } }
.woocommerce-checkout #payment #place_order:hover, .bh-ty .bh-btn:hover, .bh-ty .bh-btn:focus { color: var(--accent-text); background: var(--accent); }
@media (min-width: 1024px) { .woocommerce-checkout #payment #place_order, .bh-ty .bh-btn { display: inline-block; width: auto; align-self: flex-start; padding: 17px 28px; font-size: 17px; } }
:root[data-theme="dark"] .woocommerce-checkout #payment #place_order::before, :root[data-theme="dark"] .bh-ty .bh-btn::before { background: #FBF8F1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .woocommerce-checkout #payment #place_order::before, :root:not([data-theme="light"]) .bh-ty .bh-btn::before { background: #FBF8F1; } }
/* the order card */
.bh-sum { border: 1px solid var(--frame); background: var(--raised); padding: var(--s-m); box-sizing: border-box; }
.bh-sum h2 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; margin: 0 0 var(--s-s); color: var(--ink); }
.bh-sum__item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-s); align-items: start; }
.bh-sum__item img.bh-sum__cover { display: block; width: 64px; height: auto; aspect-ratio: 2560 / 4096; object-fit: cover; border: 1px solid rgba(31,26,21,.45); margin: 0; }
.bh-sum h3 { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.25; margin: 2px 0 6px; color: var(--ink); }
.bh-sum__meta { margin: 0; font-size: 14px; color: var(--muted); }
.bh-sum__when { margin: var(--s-s) 0 0; padding-top: var(--s-s); border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.55; }
.bh-sum__tot { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-s) 0 0; padding-top: var(--s-s); border-top: 1px solid var(--rule); font-weight: 600; }
.bh-sum__tot b { font-family: var(--display); font-weight: 400; font-size: 26px; }
@media (min-width: 1024px) {
	.bh-sum { padding: var(--s-l); }
	.bh-sum h2 { font-size: 24px; margin-bottom: var(--s-m); }
	.bh-sum__item { grid-template-columns: 88px 1fr; }
	.bh-sum__item img.bh-sum__cover { width: 88px; box-shadow: 0 10px 24px -14px rgba(31,26,21,.5); }
	.bh-sum h3 { font-size: 20px; margin: 4px 0 var(--s-2xs); }
	.bh-sum__meta { font-size: 15px; }
	.bh-sum__when { margin-top: var(--s-m); padding-top: var(--s-m); font-size: 15px; }
	.bh-sum__tot { margin-top: var(--s-m); padding-top: var(--s-m); }
	.bh-sum__tot b { font-size: 32px; }
}
/* WooCommerce's messages, plainly */
.woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info {
	margin: 0 0 var(--s-m); padding: var(--s-s) var(--s-m); list-style: none; border: 1px solid var(--frame); border-top: 1px solid var(--frame); border-radius: 2px; background: var(--raised); color: var(--ink); font-size: 16px; line-height: 1.55; }
.woocommerce-checkout .woocommerce-error { border-color: #A3402F; }
.woocommerce-checkout .woocommerce-error::before, .woocommerce-checkout .woocommerce-message::before, .woocommerce-checkout .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-error li { margin: 0; }
/* the thank-you page: the newsletter's card on the sunken ground */
body.woocommerce-order-received .site-content { background: var(--sunken); }
body.woocommerce-order-received .entry-header { display: none; }
.woocommerce-order:has(.bh-ty) > :not(.bh-ty) { display: none; }
.bh-ty { max-width: 640px; margin: 0 auto; box-sizing: border-box; border: 1px solid var(--frame); background: var(--raised); padding: var(--s-l) var(--s-m); color: var(--ink); }
.bh-ty__eyebrow { margin: 0 0 var(--s-s); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.bh-ty h1 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s-s); padding-bottom: var(--s-s); border-bottom: 1px solid var(--rule); color: var(--ink); }
.bh-ty p { margin: 0 0 var(--s-s); font-size: 16px; line-height: 1.6; }
.bh-ty h2 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; margin: var(--s-l) 0 var(--s-2xs); color: var(--ink); }
.bh-ty .bh-ty__get { margin: var(--s-l) 0 0; }
.bh-ty .bh-ty__get + .bh-co-note { margin: var(--s-xs) 0 0; font-size: 14px; color: var(--muted); }
.bh-ty a:not(.bh-btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bh-ty a:not(.bh-btn):hover, .bh-ty a:not(.bh-btn):focus-visible { color: var(--ink); text-decoration-thickness: 2px; }
.bh-od { margin: var(--s-m) 0 0; border-top: 1px solid var(--rule); }
.bh-od div { display: flex; justify-content: space-between; gap: var(--s-s); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.bh-od dt { font-size: 14px; color: var(--muted); }
.bh-od dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
	.bh-ty { padding: var(--s-2xl) var(--s-2xl) var(--s-xl); }
	.bh-ty h1 { font-size: 40px; line-height: 1.1; margin-bottom: var(--s-m); padding-bottom: var(--s-m); }
	.bh-ty p { font-size: 18px; line-height: 1.65; margin-bottom: var(--s-m); }
	.bh-ty h2 { font-size: 24px; margin: var(--s-xl) 0 var(--s-s); }
	.bh-od { margin-top: var(--s-l); }
	.bh-od div { display: grid; grid-template-columns: 160px 1fr; }
	.bh-od dt { font-size: 15px; }
	.bh-od dd { font-size: 16px; text-align: left; }
}

/* 29. OLD PAGES IN DARK MODE (launch, 11 Nov): pages still on Astra's own layout (the shoulder-in
   chapter, my account, search, 404) keep Astra's white card, and the dark palette's cream words
   vanish on it. In dark mode the card takes the raised colour instead -------------------------- */
:root[data-theme="dark"] .ast-separate-container .ast-article-single,
:root[data-theme="dark"] .ast-separate-container .ast-article-post,
:root[data-theme="dark"] .ast-separate-container .comment-respond,
:root[data-theme="dark"] .ast-separate-container .ast-comment-list li,
:root[data-theme="dark"] .ast-separate-container .ast-archive-description,
:root[data-theme="dark"] .ast-separate-container.ast-right-sidebar #secondary .widget,
:root[data-theme="dark"] .ast-separate-container .ast-woocommerce-container { background-color: var(--raised); color: var(--ink); }
:root[data-theme="dark"] .ast-separate-container .entry-title,
:root[data-theme="dark"] .ast-separate-container .entry-content :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); }