/*
 * Devon Sound Therapy - main stylesheet
 *
 * Every colour, size and breakpoint below was read out of the site's own Oxygen
 * stylesheets on 7 August 2026 and is recorded in section 3 of the rebuild plan.
 * Nothing here was invented. Where a number looks arbitrary it is because the
 * original was arbitrary, and matching it is the point.
 */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

/* THE COLOURS THAT CHANGE BETWEEN DARK AND LIGHT ARE NOT IN THIS FILE.
   All thirteen of them live in inc/scheme.php, written once with both values,
   and are emitted from there into :root, into :root[data-theme="light"] and
   into the prefers-color-scheme media query. They used to be typed out three
   times, twice here and once in display.php, which is three chances to change
   two of them. Everything below is the same in both schemes. */

:root {
	--dst-white:         var(--dst-heading);   /* deprecated name, kept so old rules resolve */

	/* The tile caption's scrim and its ink. Deliberately NOT part of either
	   scheme: the scrim is a legibility layer over an arbitrary photograph, so
	   it stays dark and its text stays light whatever the page is doing. When
	   the caption inherited --dst-heading it turned near-black on this scrim in
	   light mode (audit H2). */
	--dst-scrim:         rgba(30, 44, 40, 0.58);
	--dst-on-scrim:      #ffffff;

	/* Deprecated name, kept so any rule not yet migrated still resolves.
	   Nothing should use it - pick --dst-on-accent or --dst-accent-ink. */
	--dst-sub-hover-ink: var(--dst-on-accent);

	/* Backing for third-party logos supplied as transparent PNGs with dark
	   artwork - the CoSH logo is one. Named for its role rather than its
	   colour, because a light theme may want a different backing. */
	--dst-logo-backing:  #ffffff;

	/* Type */
	--dst-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--dst-sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--dst-size-display: 48px;
	--dst-size-tile:    24px;
	--dst-size-body:    18px;
	--dst-size-button:  16px;
	--dst-size-small:   14px;
	--dst-size-nav:     12px;

	--dst-track-nav:   1px;
	--dst-track-hero:  5px;

	/* Corner rounding.
	   Four variables cover every rounded corner on the site, and all four are
	   editable at Sound Therapy > Corners. The values here are the defaults
	   and match the original build; the settings screen overrides them from
	   the head when they differ. Do not add a fifth radius - put whatever
	   needs rounding into one of these four groups. */
	--dst-radius-image:    6px;   /* content and block images, optionally the logo */
	--dst-radius-panel:    6px;   /* dropdown panels, mobile sub-menu, bands */
	--dst-radius-control:  6px;   /* buttons, menu button, skip link */
	--dst-radius-portrait: 50%;   /* circular profile photographs */

	/* Kept so any rule not yet migrated still resolves. Nothing should use it. */
	--dst-radius: var(--dst-radius-panel);
	--dst-gutter: 20px;
	--dst-measure: 68ch;
	--dst-max: 1200px;
	--dst-tap: 44px;   /* minimum touch target. The old hamburger was 18px. */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--dst-bg);
	color: var(--dst-ink);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-body);
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img { display: block; }

a { color: var(--dst-ink); }
a:hover,
a:focus { color: var(--dst-heading); }

:focus-visible {
	outline: 2px solid var(--dst-accent-ink);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dst-serif);
	color: var(--dst-heading);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.4em;
}

h1 { font-size: clamp(34px, 6vw, var(--dst-size-display)); }
h2 { font-size: clamp(28px, 4.5vw, 38px); }
h3 { font-size: clamp(22px, 3.4vw, 28px); }
h4 { font-size: var(--dst-size-tile); }
h5, h6 { font-size: 20px; }

p { margin: 0 0 1.2em; max-width: var(--dst-measure); }

.eyebrow,
.site-footer__legal,
.menu-link,
.footer-menu a {
	font-family: var(--dst-sans);
	text-transform: uppercase;
	letter-spacing: var(--dst-track-nav);
}

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

.skip-link:focus {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	margin: 0; padding: 12px 20px;
	clip: auto; clip-path: none;
	background: var(--dst-submenu-bg);
	color: var(--dst-heading);
	border-radius: var(--dst-radius-control);
	font-size: var(--dst-size-small);
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.135em;
	flex: none;
	color: inherit;   /* both filled and stroked symbols take currentColor */
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.site-main { display: block; }

.site-header__inner,
.site-footer__inner {
	width: 100%;
	max-width: var(--dst-max);
	margin-inline: auto;
	padding-inline: var(--dst-gutter);
}

/* The content column lives on the container, not on each child.

   It used to be the other way round: every direct child got its own centred
   1200px box. That works while everything is full width and silently fails the
   moment something is not, because there is no shared column for a narrower
   thing to align to - it centres itself in the page instead. A floated image
   landed a quarter of the way outside the text, and the accreditation mark
   missed the right-hand edge, both for that reason.

   One column on the container, children at their natural width inside it, and
   anything floated or right-aligned lines up with the text by construction. */
.entry-content {
	width: 100%;
	max-width: var(--dst-max);
	margin-inline: auto;
	padding-inline: var(--dst-gutter);
	box-sizing: border-box;
}

.entry-content > * {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

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

.site-header {
	background: var(--dst-bg);
	position: relative;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dst-gutter);
	padding-block: 18px;
}

.site-header__brand .custom-logo-link { display: block; }
.site-header__brand img { width: auto; max-height: 90px; }

.site-title {
	font-family: var(--dst-serif);
	font-size: 28px;
	color: var(--dst-heading);
	text-decoration: none;
}

/* The menu button. 44x44 minimum, against the original 18x18. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-width: var(--dst-tap);
	min-height: var(--dst-tap);
	padding: 10px 12px;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--dst-radius-control);
	color: var(--dst-nav-link);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-nav);
	text-transform: uppercase;
	letter-spacing: var(--dst-track-nav);
	cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	color: var(--dst-heading);
	background: var(--dst-hover-bg);
}

.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__icon--close { display: none; }

/* The colour-scheme control: one button, clicking cycles light, dark,
   follow-device, showing the current state's icon. Without JavaScript it
   hides and the device preference rules. */
.theme-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--dst-veil);
	border-radius: var(--dst-radius-control);
	color: var(--dst-nav-link);
	cursor: pointer;
}

.theme-toggle .icon { width: 18px; height: 18px; }

.theme-toggle:hover,
.theme-toggle:focus-visible {
	color: var(--dst-heading);
	background: var(--dst-hover-bg);
}

/* The button shows where a click takes you, not where you are: light shows
   the moon (next stop dark), dark shows the half-circle (next stop follow
   device), follow-device shows the sun. */
.theme-toggle__icon { display: none; line-height: 0; }
.theme-toggle[data-mode="light"] .theme-toggle__icon--dark { display: block; }
.theme-toggle[data-mode="dark"] .theme-toggle__icon--auto { display: block; }
.theme-toggle[data-mode="auto"] .theme-toggle__icon--light { display: block; }

html:not(.js) .theme-toggle { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: inline-block; }

/* --------------------------------------------------------------------------
   Primary menu - shared
   -------------------------------------------------------------------------- */

.primary-menu,
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li { position: relative; }

/* Menu items round on the Panels setting, not Buttons - they belong to the
   panel they sit in, so the item and the panel around it should agree. */
.menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 16px 20px;
	color: var(--dst-nav-link);
	font-size: var(--dst-size-nav);
	font-weight: 400;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: var(--dst-radius-panel);
	font-family: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* The three section labels - Our Work, Sound Therapy, About Us - are buttons
   that open a sub-menu, not links to anywhere. The pointing hand says "this
   goes somewhere", so they keep the ordinary arrow and stop promising a
   destination they do not have. They are still buttons: focusable, operable
   from the keyboard, and announced as buttons. Only the cursor changes. */
.menu-link--toggle { cursor: default; }

.menu-link:hover,
.menu-link:focus-visible {
	color: var(--dst-accent);
	background: var(--dst-hover-bg);
}

.primary-menu .current-menu-item > .menu-link,
.primary-menu .current-menu-ancestor > .menu-link {
	color: var(--dst-muted);
}

/* The toggle that sits beside a real link. A separate target, never competing
   with the link for the same tap. */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--dst-tap);
	min-height: var(--dst-tap);
	padding: 0 10px;
	background: none;
	border: 0;
	border-radius: var(--dst-radius-panel);
	color: var(--dst-nav-link);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
	color: var(--dst-heading);
	background: var(--dst-hover-bg);
}

/* Every chevron in every menu animates, and they all use the same curve so a
   top-level caret and a nested one feel like the same control. */
.submenu-toggle .icon,
.menu-link__caret .icon {
	width: 16px;
	height: 16px;
	transform: rotate(0deg);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Scoped to the menu on purpose. Unscoped, this reached every icon inside
   anything expanded on the page, the hamburger among them, and only looked
   harmless because that icon is a symmetrical X. */
.primary-menu [aria-expanded="true"] .icon,
.primary-menu [aria-expanded="true"] .menu-link__caret .icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.submenu-toggle .icon,
	.menu-link__caret .icon { transition: none; }
}

/* --------------------------------------------------------------------------
   Primary menu - desktop
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	.primary-menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.primary-menu > li > .menu-link { padding: 16px 12px; }

	/* The menu sits against the scheme button, not centred in the leftover
	   space - the gap between them is the header's own gap and nothing more. */
	.primary-navigation { margin-left: auto; }

	/* Sub-menus. Hover is a convenience; focus-within and aria-expanded are
	   what actually make them reachable. The old site had hover alone, which
	   is why they were unusable on a touchscreen. */
	.primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		background: var(--dst-submenu-bg);
		border-radius: var(--dst-radius-panel);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
		/* Side padding as well as vertical, so a rounded item sits inset from
		   the panel's own rounded corner instead of butting against it. */
		padding: 6px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	.primary-menu [aria-expanded="true"] + .sub-menu,
	.primary-menu [aria-expanded="true"] ~ .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Hover is a convenience for mice only. Scoped away from touch, where a
	   "hover" is really a tap and would open a panel the user cannot shut. */
	@media (hover: hover) and (pointer: fine) {
		.primary-menu li:hover > .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	/* Keyboard fallback for when the script has not run. Scoped to
	   html:not(.js) so it cannot hold a sub-menu open against its toggle. */
	html:not(.js) .primary-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		transform: translateX(-6px);
	}

	.primary-menu .sub-menu [aria-expanded="true"] ~ .sub-menu { transform: translateX(0); }

	@media (hover: hover) and (pointer: fine) {
		.primary-menu .sub-menu li:hover > .sub-menu { transform: translateX(0); }
	}

	html:not(.js) .primary-menu .sub-menu li:focus-within > .sub-menu { transform: translateX(0); }

	.primary-menu .sub-menu .menu-link {
		display: flex;
		width: 100%;
		padding: 16px 20px;
		text-transform: none;
		letter-spacing: 0;
		font-size: var(--dst-size-small);
	}

	.primary-menu .sub-menu .menu-link:hover,
	.primary-menu .sub-menu .menu-link:focus-visible {
		background: var(--dst-sub-hover-bg);
		color: var(--dst-on-accent);
	}

	/* On a pointer device the caret beside a top-level link is decoration -
	   hover already opens the panel - so it shrinks out of the way. */
	.primary-menu > li > .submenu-toggle {
		min-width: 0;
		min-height: 0;
		padding: 0 6px;
		margin-left: -12px;
	}

	/* A nested parent inside a dropdown panel.
	   Two things were wrong here. The link is width:100%, so its toggle was
	   wrapping onto a line of its own below the item. And the caret pointed
	   down while the panel it opens actually flies out to the right. */
	.primary-menu .sub-menu li.has-children {
		display: flex;
		align-items: stretch;
	}

	.primary-menu .sub-menu li.has-children > .menu-link {
		flex: 1 1 auto;
		width: auto;
	}

	.primary-menu .sub-menu .submenu-toggle {
		flex: none;
		min-width: 0;
		min-height: 0;
		padding: 0 14px;
	}

	/* On a mouse, hovering opens the panel without ever setting aria-expanded,
	   so the caret has to answer the hover too or it sits still while the menu
	   drops open beneath it. */
	.primary-menu > li:hover > .submenu-toggle .icon {
		transform: rotate(180deg);
	}

	/* Point at where the panel opens. A nested panel flies out to the right,
	   so its caret points right rather than down, and it nudges further that
	   way when the panel is actually open. */
	.primary-menu .sub-menu .submenu-toggle .icon,
	.primary-menu .sub-menu [aria-expanded="true"] .icon {
		transform: rotate(-90deg);
	}

	.primary-menu .sub-menu li.has-children:hover > .submenu-toggle .icon,
	.primary-menu .sub-menu li.has-children:focus-within > .submenu-toggle .icon,
	.primary-menu .sub-menu [aria-expanded="true"].submenu-toggle .icon {
		transform: rotate(-90deg) translateY(-3px);
	}

	.primary-menu .sub-menu li.has-children:hover > .menu-link,
	.primary-menu .sub-menu li.has-children:focus-within > .menu-link,
	.primary-menu .sub-menu li.has-children:hover > .submenu-toggle {
		background: var(--dst-sub-hover-bg);
		color: var(--dst-on-accent);
	}
}

/* --------------------------------------------------------------------------
   Primary menu - mobile
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

	.nav-toggle { display: inline-flex; }

	/* Without this the open menu cannot drop below the logo. It is given
	   width:100% and order:3 to put it on its own line, but a flex row that
	   cannot wrap simply squeezes it in beside the logo instead - a narrow
	   strip pinned right, with every menu label wrapping onto two lines. */
	.site-header__inner { flex-wrap: wrap; }

	.primary-navigation {
		display: none;
		width: 100%;
		order: 3;
		margin-top: 4px;
		border-top: 1px solid var(--dst-hover-bg);
	}

	.nav-is-open .primary-navigation { display: block; }

	.primary-menu { display: block; padding-block: 8px; }

	.primary-menu li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--dst-hover-bg);
	}

	.primary-menu li:last-child { border-bottom: 0; }

	.menu-link {
		flex: 1 1 auto;
		min-height: var(--dst-tap);
		padding: 14px 20px;
	}

	.menu-link--toggle {
		justify-content: space-between;
		width: 100%;
		text-align: left;
	}

	.submenu-toggle { flex: none; }

	/* Closed by default, opened by the toggle. focus-within is the fallback
	   that keeps the menu usable with JavaScript unavailable. */
	.primary-menu .sub-menu {
		display: none;
		flex-basis: 100%;
		background: var(--dst-submenu-bg);
		border-radius: var(--dst-radius-panel);
		margin: 0 12px 10px;
		padding: 4px;
	}

	.primary-menu [aria-expanded="true"] + .sub-menu,
	.primary-menu [aria-expanded="true"] ~ .sub-menu { display: block; }

	/* Same fallback, same scoping, same reason as the desktop rules above. */
	html:not(.js) .primary-menu li:focus-within > .sub-menu { display: block; }

	.primary-menu .sub-menu .menu-link {
		text-transform: none;
		letter-spacing: 0;
		font-size: var(--dst-size-small);
		padding-left: 24px;
	}

	.primary-menu .sub-menu .menu-link:hover,
	.primary-menu .sub-menu .menu-link:focus-visible {
		background: var(--dst-sub-hover-bg);
		color: var(--dst-on-accent);
	}
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.entry-header,
.entry-content { padding-block: 8px; }

/* Asymmetric on purpose. The space above the title separates it from the
   header; the space below only has to separate it from its own text, and
   James found the two being equal left too big a hole. Roughly half. */
.page-hero {
	padding-block: clamp(32px, 6vw, 64px) clamp(16px, 3vw, 30px);
}

/* Stacked, not spread.

   .page-hero borrows .site-header__inner for its width, and that class also
   carries display: flex with space-between - a rule written for the site header,
   where the logo goes left and the menu right. Every hero had a single child, so
   it never showed: one flex item with space-between sits at the start and looks
   exactly like a block. Give a page a standfirst, or a 404 a mark, and the
   children fly to opposite ends of the row instead.

   The padding-block goes for the same reason. That 18px is spacing for the
   header bar, where the logo needs room around it, and every hero was carrying
   it on top of .page-hero's own considered padding clamp - 36px per page that
   nobody asked for, invisible because it just read as generous.

   Used by page.php and 404.php. course.php has no .site-header__inner inside its
   hero at all, and the front page has its own .dst-hero, so neither is affected. */

.page-hero .site-header__inner {
	display: block;
	padding-block: 0;
}

.page-hero__title { margin-bottom: 0.2em; }

.page-hero__title .icon {
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.28em;
	vertical-align: -0.06em;
}

.page-hero__standfirst {
	font-family: var(--dst-serif);
	font-size: clamp(20px, 3vw, 28px);
	color: var(--dst-ink);
	max-width: var(--dst-measure);
}

.entry-content > * { margin-block: 0 1.2em; }
.entry-content > :last-child { margin-bottom: 0; }

/* A heading belongs to what follows it, not to what came before. So the space
   goes above the heading and only a little sits between it and its own first
   paragraph. The default here was the wrong way round: no space above and a
   full paragraph gap below, which left each heading floating between two
   sections rather than opening one. */
.entry-content > h2,
.entry-content > .wp-block-heading {
	margin-top: 1.3em;
	margin-bottom: 0.35em;
}

.entry-content > h3 { margin-top: 1.5em; margin-bottom: 0.35em; }
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 { margin-top: 1.6em; margin-bottom: 0.4em; }

/* Nothing to separate from at the top of the page, and two headings in a row
   should not compound. */
.entry-content > :first-child,
.entry-content > h2 + h3,
.entry-content > h3 + h4 { margin-top: 0; }

/* Prose lists take the same column as paragraphs, with the bullets sitting on
   the body text's left edge and the list text indented past them.

   No measure cap: a list capped narrower than the column would centre itself
   in it rather than sitting under its heading. The indent is a plain 1.3em now
   that the gutter belongs to .entry-content rather than to each child - when
   the gutter was on the children this had to be added to it, or the markers
   fell 19px outside the text.

   Theme components that happen to be lists - the instrument row, the course
   listing, the social links - keep their own layout and no indent. */
/* Writing gets a hanging indent; a component's own list does not. The
   exclusions name both prefixes in use on this site: dst- for the theme and
   cl- for the course listings. Without the second one this rule beat the
   plugin's own padding: 0 on specificity, and every course sat 23.4px to the
   right of its own heading. Centring hid it on the cards and it was plainly
   visible on the list. */
.entry-content ul:not([class*="dst-"]):not([class*="cl-"]),
.entry-content ol:not([class*="dst-"]):not([class*="cl-"]) { padding-left: 1.3em; }

.entry-content ul[class*="dst-"] { max-width: none; padding-left: 0; }
.entry-content li { margin-bottom: 0.4em; }

.entry-content img,
.wp-block-image img { border-radius: var(--dst-radius-image); }

/* An image set to Align left or Align right in the editor, so text flows past
   it instead of waiting below it.

   The override matters: .entry-content > * gives every child width:100% and a
   20px gutter, which silently cancels the float and leaves a full-bleed image
   with the whole page pushed beneath it. Width has to go back to auto and the
   gutter has to come off, or the alignment does nothing at all.

   Below the point where a two-column layout stops making sense the float is
   dropped, because a 42% image beside four words is worse than no float. */
.entry-content > .wp-block-image.alignright,
.entry-content > .wp-block-image.alignleft {
	max-width: 42%;
	margin-block: 0 1.2em;
}

.entry-content > .wp-block-image.alignright {
	float: right;
	margin-left: 2em;
	margin-right: 0;
}

.entry-content > .wp-block-image.alignleft {
	float: left;
	margin-right: 2em;
	margin-left: 0;
}

@media (max-width: 781px) {
	.entry-content > .wp-block-image.alignright,
	.entry-content > .wp-block-image.alignleft {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

.entry-content blockquote {
	font-family: var(--dst-serif);
	font-style: italic;
	font-size: 22px;
	color: var(--dst-heading);
	border-left: 2px solid var(--dst-sub-hover-bg);
	margin-inline: 0;
	padding-left: 24px;
	max-width: var(--dst-measure);
}

/* --------------------------------------------------------------------------
   Blocks
   -------------------------------------------------------------------------- */

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
	align-items: flex-start;
	margin-bottom: 1.6em;
}

.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

/* One column on a phone, always. The old site's two-column rows were the
   thing that made sub-pages awkward to read on a narrow screen. */
@media (max-width: 767px) {
	.wp-block-columns { flex-direction: column; gap: 24px; }
	.wp-block-column { flex-basis: auto !important; width: 100%; }
}

.wp-block-image { margin: 0 0 1.2em; }
.wp-block-image img { border-radius: var(--dst-radius-image); width: 100%; }

/* The circular profile photographs, as a block style so it is a choice in the
   editor rather than a class to remember. */
.wp-block-image.is-style-dst-portrait img,
.is-portrait img,
img.is-portrait {
	border-radius: var(--dst-radius-portrait);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wp-block-image figcaption {
	font-size: var(--dst-size-small);
	color: var(--dst-muted);
	margin-top: 8px;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--dst-hover-bg);
	max-width: var(--dst-max);
	margin-block: clamp(28px, 5vw, 52px);
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* A band of colour across the full width, for the sections that need
   separating on a page that is otherwise one continuous dark field. */
.is-band {
	background: var(--dst-hover-bg);
	border-radius: var(--dst-radius-panel);
	padding: clamp(24px, 4vw, 40px);
	margin-bottom: 1.6em;
}

/* --------------------------------------------------------------------------
   Home page: tiles
   --------------------------------------------------------------------------
   The old site had eight of these in a fixed 4 x 2, with the label at
   opacity 0 until you hovered. On a touchscreen that meant eight unlabelled
   photographs, and a ninth tile broke the grid into 4 + 4 + 1.

   These use the block editor's own grid layout, so the columns are worked out
   from the available width rather than fixed. Add a ninth tile and it simply
   joins the row. Labels are always visible.
   -------------------------------------------------------------------------- */

.dst-tile {
	position: relative;
	margin: 0;
	overflow: hidden;                       /* clips the image as it scales */
	border-radius: var(--dst-radius-image);
}

.dst-tile .wp-block-image { margin: 0; }

.dst-tile img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: 0;                       /* the tile does the clipping */
	transition: transform 0.5s ease;
}

/* The label sits over the photograph rather than under it, and it is visible
   by default. That is the whole point: the old site hid the label until you
   hovered, which on a touchscreen meant it was never visible at all. Here the
   label is the resting state and the hover reveals the photograph. */
.dst-tile h3,
.dst-tile .wp-block-heading {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: clamp(18px, 2.2vw, var(--dst-size-tile));
	line-height: 1.2;
	/* The scrim and its ink do not follow the colour scheme - see the token
	   block at the top. The caption used to inherit --dst-heading, which is
	   near-black in the light scheme and left these four labels unreadable
	   over their own scrim (audit H2). */
	background: var(--dst-scrim);
	color: var(--dst-on-scrim);
	transition: opacity 0.35s ease;
}

.dst-tile a { color: var(--dst-on-scrim); text-decoration: none; }

/* One stretched link covers the whole tile, so the photograph is clickable
   without a second link duplicating it for anyone using a screen reader. It
   still works while the label is faded out - opacity does not stop a click. */
.dst-tile h3 a::after,
.dst-tile .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Mouse only. On a touchscreen a tap would fire :hover and leave the label
   hidden with no way to bring it back. */
@media (hover: hover) and (pointer: fine) {
	.dst-tile:hover h3,
	.dst-tile:hover .wp-block-heading { opacity: 0; }

	.dst-tile:hover img { transform: scale(1.06); }
}

/* A keyboard user needs to know what they have landed on, so focus keeps the
   label rather than hiding it. */
.dst-tile:focus-within h3,
.dst-tile:focus-within .wp-block-heading { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.dst-tile:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Home page: the instrument row
   --------------------------------------------------------------------------
   The four instruments are supporting detail, not services, so they get a
   compact row rather than four more photo tiles competing with the things
   people actually book. This is what the drum, gong, rattle and singing bowl
   icons were drawn for.
   -------------------------------------------------------------------------- */

.dst-instruments {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dst-instruments li { flex: 1 1 170px; margin: 0; }

.dst-instruments a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	min-height: var(--dst-tap);
	padding: 16px 20px;
	background: var(--dst-hover-bg);
	border-radius: var(--dst-radius-panel);
	color: var(--dst-ink);
	text-decoration: none;
	font-size: var(--dst-size-small);
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dst-instruments a:hover,
.dst-instruments a:focus-visible {
	background: var(--dst-sub-hover-bg);
	color: var(--dst-on-accent);
}

.dst-instruments .icon {
	width: 30px;
	height: 30px;
	color: var(--dst-muted);
	transition: color 0.2s ease;
}

.dst-instruments a:hover .icon,
.dst-instruments a:focus-visible .icon { color: var(--dst-on-accent); }

/* [dst_address show="full"] - the practice details inside page content. The
   same shape as the footer block, sized for a page rather than a footer. The
   hours line has no icon, so it is indented to line up with the text above it. */
.dst-practice { margin-block: 20px; }

.dst-practice p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.dst-practice p:last-child { margin-bottom: 0; }

.dst-practice .icon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--dst-muted);
}

.dst-practice__hours { padding-left: 30px; color: var(--dst-muted); }

/* The band each group of tiles sits in. */
.dst-band { margin-block: clamp(36px, 6vw, 68px); }

/* Column count is set explicitly rather than left to auto-fill.
   Auto-fill works out how many columns fit from a minimum width, which sounds
   right but means a band of four becomes three-plus-one at any width where the
   fourth does not quite fit - which is the same stranded-tile ugliness the 4x2
   grid had, just at a different number. Fixed counts per breakpoint mean a band
   of four always reads as one row of four or two rows of two. */
.dst-band .wp-block-group.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

@media (min-width: 900px) {
	.dst-band .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 519px) {
	.dst-band .wp-block-group.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dst-band__title {
	font-size: clamp(24px, 3.2vw, 32px);
	margin-bottom: 0.7em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--dst-hover-bg);
}

/* --------------------------------------------------------------------------
   Home page: the two profiles
   -------------------------------------------------------------------------- */

/* Equal height, whatever the bios weigh.
   The columns rule below sets align-items:flex-start, which is right for a
   text-beside-image row but wrong here: it let James's card and Jane's card
   end at different depths purely because one bio is longer. These stretch to
   match, and the button is pushed to the bottom of each so the two line up
   however the text falls. */
.wp-block-columns:has(.dst-profile) { align-items: stretch; }
.wp-block-column:has(.dst-profile) { display: flex; }

.dst-profile {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: var(--dst-hover-bg);
	border-radius: var(--dst-radius-panel);
	padding: clamp(24px, 3vw, 36px);
	text-align: center;
	margin: 0;
}

/* Pinned to the bottom, so the two buttons align across the pair. */
.dst-profile .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.2em;
	justify-content: center;
}

.dst-profile img {
	width: 160px;
	max-width: 60%;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--dst-radius-portrait);
}

.dst-profile h3,
.dst-profile .wp-block-heading {
	font-size: 24px;
	margin: 18px 0 2px;
	letter-spacing: 1px;
}

.dst-profile__role {
	font-size: var(--dst-size-small);
	color: var(--dst-muted);
	margin-bottom: 1em;
	max-width: none;
}

.dst-profile p { max-width: none; }

.dst-profile__bio {
	font-family: var(--dst-serif);
	font-style: italic;
	font-size: 20px;
	color: var(--dst-ink);
}

/* --------------------------------------------------------------------------
   Home page: hero
   -------------------------------------------------------------------------- */

/* front-page.php prints no page title, so the hero carries page-hero's own
   top clamp - the home title tops out level with every other page's. */
.is-front-page .entry-content { padding-top: 0; }

/* The closing call to action. Centred as a pair - the invitation and the
   button together - because a centred button under a left-aligned line reads
   as a mistake rather than a decision. */
.is-front-page .entry-content > .wp-block-buttons:last-child,
.is-front-page .entry-content > .wp-block-buttons:last-child + * { justify-content: center; }

.is-front-page .entry-content > .wp-block-buttons:last-child {
	justify-content: center;
	margin-top: 0.4em;
}

.is-front-page .entry-content > p:has(+ .wp-block-buttons:last-child) {
	text-align: center;
	max-width: none;
}

.dst-hero { padding-block: clamp(32px, 6vw, 64px) clamp(20px, 3vw, 34px); }

/* The hero with something beside it - a gallery, or a single picture.
   The heading block keeps its own rhythm but drops the vertical padding it
   needed when it stood alone, because the row now supplies that. */
.dst-hero-row { margin-block: clamp(20px, 3vw, 40px) clamp(28px, 5vw, 56px); }

.dst-hero-row .dst-hero { padding-block: 0; }

/* Smaller than the standalone hero's tagline, so it fits on one line in a
   column of this width. At the full 32px it wrapped, which James did not
   like - and a two-line subtitle under a one-line heading reads as an
   accident rather than a decision. */
.dst-hero-row .dst-hero__tagline {
	font-size: clamp(20px, 2vw, 25px);
	margin-bottom: 0.4em;
}

/* The photograph beside the hero.
   Left to itself a square image fills the column and stands 534px tall
   against about 209px of text, which makes the picture the subject and the
   words an afterthought. A landscape crop of a controlled height sits with
   the text rather than shouting over it. */
.dst-hero-image { margin: 0; }

.dst-hero-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 380px;
	object-fit: cover;
	border-radius: var(--dst-radius-image);
}

@media (max-width: 781px) {
	.dst-hero-image img { max-height: 260px; }
}

@media (max-width: 781px) {
	/* Words first, picture second, whatever order the columns are written in. */
	.dst-hero-row { gap: 24px; }
	.dst-hero-row .dst-hero { padding-block: 0 4px; }
}

.dst-hero h1 { margin-bottom: 0.15em; }

/* No max-width, on purpose. It used to be capped at 34ch, which wrapped the
   tagline onto two lines and - because WordPress's constrained layout sets
   margin-inline:auto !important on anything narrower than its container - then
   centred the wrapped block 320px right of the heading. Letting it run to the
   container's own width fixes both at once: one line on a desktop, and it
   wraps naturally on a phone where it should. */
.dst-hero .dst-hero__tagline {
	font-family: var(--dst-serif);
	font-size: clamp(22px, 3.4vw, 32px);
	color: var(--dst-ink);
	margin: 0 0 0.5em;
	max-width: none;
	text-wrap: balance;
}

.dst-hero__meta {
	color: var(--dst-muted);
	font-size: var(--dst-size-body);
}

.dst-social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.dst-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dst-tap);
	height: var(--dst-tap);
	border-radius: var(--dst-radius-control);
	color: var(--dst-muted);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.dst-social a:hover,
.dst-social a:focus-visible {
	color: var(--dst-accent-ink);
	background: var(--dst-hover-bg);
}

.dst-social .icon { width: 22px; height: 22px; }

/* A single course page */
.course-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 44px;
	margin: 22px 0 0;
	align-items: start;
}

.course-facts__item { margin: 0; }

.course-facts dt {
	font-size: var(--dst-size-nav);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--dst-muted);
	margin-bottom: 4px;
}

/* The body sans rather than the heading serif. These are facts to be read off
   quickly - a date, a price, a place - not headings, and the serif at 26px gave
   them the weight of a title they do not deserve. Sized just above body text so
   they still stand out from the writing below. */
.course-facts dd {
	margin: 0;
	font-family: var(--dst-sans);
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.6;
	color: var(--dst-ink);
}

.course-facts dd span { display: block; }

/* The price arrives from Course Listings as one line per figure, each with
   its own icon: an early price, the ordinary one, a concession. That
   plugin's own stylesheet is deliberately not loaded on this page, because
   this theme dresses the course page itself, so the handful of rules those
   lines need live here instead.

   The inner span goes back to inline: the rule above turns every span in a
   dd into a block, which would put each icon on a line of its own above its
   own words. */
.course-facts dd .cl-price {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.course-facts dd .cl-price > span { display: inline; }

/* No icon on the line here. Every fact on this page is already introduced by
   an icon on its heading, so a tag on the Price heading with a second tag
   directly beneath it reads as a mistake rather than as a label. The cards
   keep theirs: they have no headings, and their dates line has carried a
   calendar since long before the price had three lines. */
.course-facts dd .cl-price .icon { display: none; }

/* No colour of its own on the early line. It was briefly given the accent, to
   tie it to the dates, and read as an inconsistency rather than as emphasis.
   The words already say which line is which. */

/* An early price whose date has gone, kept on the page rather than removed.
   The whole line is struck, words and figure: striking the number on its own
   reads as a correction to a typing mistake instead of as a deadline that
   has passed. The strike sits on the text span because a decoration set on
   the flex row above is not reliably carried into its children. */
.course-facts dd .cl-price--over { color: var(--dst-muted); opacity: 0.75; }
.course-facts dd .cl-price--over > span { text-decoration: line-through; }

.course-past {
	margin: 18px 0 0;
	padding: 12px 16px;
	background: var(--dst-hover-bg);
	border-radius: var(--dst-radius-panel);
	color: var(--dst-muted);
	font-size: var(--dst-size-small);
	max-width: var(--dst-measure);
}

/* A course page carries the content column on the article itself, because the
   picture, the title and the dates all have to sit inside one container for the
   float to reach them. Everywhere else the column is on .entry-content; here
   that would be a second column nested inside this one, so it is switched off.

   The picture sits before the title in the markup and floats right, so the page
   opens like every other page on the site: image top right, title and dates
   beginning beside it, the writing carrying on past. A float cannot rise above
   what precedes it, which is why being first matters. */
.is-course {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--dst-max);
	margin-inline: auto;
	padding-inline: var(--dst-gutter);
}

.is-course .entry-content {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.course-figure {
	float: right;
	width: min(42%, 420px);
	margin: 0 0 1.4em 2em;
}

.course-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--dst-radius-image);
	display: block;
}

@media (max-width: 781px) {
	.course-figure {
		float: none;
		width: 100%;
		margin: 0 0 1.4em;
	}
}

/* Two buttons now: the enquiry, and the accrediting body on an accredited
   course. A row with a gap rather than two inline items separated by a space,
   so the second wraps under the first on a phone instead of running off the
   side. Same gap as a block of buttons written in a page. */
.course-booking {
	margin-top: 1.5em;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Contact page and forms
   --------------------------------------------------------------------------
   Contact Form 7 ships almost no styling of its own, which on a dark site
   means stark white boxes. These are styled to belong.
   -------------------------------------------------------------------------- */

.dst-contact__details {
	background: var(--dst-hover-bg);
	border-radius: var(--dst-radius-panel);
	padding: clamp(20px, 3vw, 28px);
}

/* The same treatment as the course page's facts, and for the same reason: a
   telephone number and an address are things to be read off quickly, not
   headings. In the heading serif at 26px they carried the weight of a title
   they do not deserve, and the number and the address disagreed with each
   other. Both are now the body sans at the size the course facts use. */
.dst-contact__details h3 {
	margin: 0 0 0.35em;
	font-family: var(--dst-sans);
	font-size: clamp(16px, 1.8vw, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--dst-ink);
}

.dst-contact__details h3 a { text-decoration: none; color: var(--dst-ink); }
.dst-contact__details h3 a:hover,
.dst-contact__details h3 a:focus-visible { color: var(--dst-accent-ink); }

.dst-contact__address {
	margin: 0;
	font-family: var(--dst-sans);
	font-size: clamp(16px, 1.8vw, 18px);
	color: var(--dst-ink);
	line-height: 1.6;
	max-width: none;
}

/* The card and the form's inputs are both filled panels, so the eye reads them
   as aligned only when their top edges agree, and the card's top sat 45px
   proud of the first box. That 45px is not one thing but two: the form sits
   one block gap below the top of its column, and its first input sits one
   label line below the top of the form. Both are expressed here as the
   quantities themselves rather than as a measured number, so the alignment
   survives a change to either. The 1.5 is the body line-height the label
   inherits, set on body near the top of this file.

   Only while the columns are side by side. Below 782px the columns block
   stacks, and an offset that reads as alignment in two columns reads as a
   stray gap in one. */
@media (min-width: 782px) {
	.dst-contact .dst-contact__details {
		margin-top: calc(var(--wp--style--block-gap, 24px) + (var(--dst-size-small) * 1.5));
	}
}

.wpcf7 { max-width: none; }
.wpcf7 form > p { max-width: none; margin-bottom: 1.1em; }

.wpcf7 label {
	display: block;
	font-size: var(--dst-size-small);
	color: var(--dst-muted);
	margin-bottom: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	min-height: var(--dst-tap);
	padding: 12px 14px;
	background: var(--dst-hover-bg);
	color: var(--dst-ink);
	border: 1px solid var(--dst-submenu-bg);
	border-radius: var(--dst-radius-control);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-body);
	line-height: 1.4;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wpcf7 textarea { min-height: 150px; resize: vertical; }

/*
 * No outline reset here. The site-wide :focus-visible ring near the top of this
 * file is the focus indicator for these fields too; removing it left the border
 * colour alone to do the job, at 2.30:1 against the focused field in the dark
 * scheme where 3:1 is the floor. The border change stays as a supporting cue.
 */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--dst-sub-hover-bg);
	background: var(--dst-bg);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--dst-muted); opacity: 0.7; }

.wpcf7 input[type="submit"] {
	width: auto;
	min-height: var(--dst-tap);
	padding: 16px 28px;
	background: var(--dst-veil);
	color: var(--dst-heading);
	border: 0;
	border-radius: var(--dst-radius-control);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-button);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--dst-sub-hover-bg);
	color: var(--dst-on-accent);
}

/* CF7's own messages, which are otherwise unstyled black text. */
.wpcf7 .wpcf7-response-output {
	margin: 1.4em 0 0;
	padding: 14px 18px;
	border-radius: var(--dst-radius-panel);
	border: 1px solid var(--dst-submenu-bg);
	color: var(--dst-ink);
	font-size: var(--dst-size-small);
}

.wpcf7 form.sent .wpcf7-response-output { border-color: var(--dst-sub-hover-bg); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #c9736a; }

.wpcf7-not-valid-tip {
	color: #e8a49c;
	font-size: var(--dst-size-small);
	margin-top: 4px;
}

.wpcf7 .wpcf7-spinner { background-color: var(--dst-muted); }

/* The accreditation mark on a person's page. Sits at the right-hand edge of the
   content column: it is a mark rather than a piece of content, and on the left
   it reads as the start of something that never arrives. */
.dst-cosh {
	margin-top: 2em;
	display: flex;
	justify-content: flex-end;
}

/* The Contact me button on a practitioner's page sits left, with the text.

   It was briefly right-aligned, hooked to the accreditation mark that used to
   sit above it. The marks have since moved up beside the portrait, leaving the
   button alone at the bottom with nothing to align to, so it belongs back on
   the text's left edge like every other block. */

/* The portrait and the accreditation marks as one floated block, so the marks
   sit under the photograph and the page text flows past the pair. Built by a
   content filter - see inc/marks.php - rather than by asking anyone to assemble
   a container in the block editor. */
.entry-content > .dst-aside {
	float: right;
	width: 42%;
	margin: 0 0 1.2em 2em;
}

.entry-content > .dst-aside > figure { margin: 0; }

.dst-marks {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-top: 14px;
}

/* Marks keep their own proportions at a shared height, so a wide logo gets a
   wide box and a square one a narrow box. The logos are prepared as a matched
   set - the originals here are 761x188 and 441x188, the same height by
   intention - so a common display height reproduces exactly the relationship
   they were made with. Sizing by width instead would make a 4:1 mark half the
   height of a 2.3:1 one.

   Each mark's flex basis is its own shape at that height, written inline by
   inc/marks.php because CSS cannot read an image's proportions. No growing, so
   one or two marks stay their natural size rather than stretching across. They
   shrink proportionally, which means every box loses the same fraction of its
   width and they therefore stay at equal heights as they go down. Adding a
   fifth logo makes them all slightly smaller rather than any of them wrapping
   or being cropped.

   The white is a backing for transparent artwork, not a card. So it takes the
   exact bounds of the logo, with no padding - the only border you can see
   belongs to the logo itself. The corner is rounded just enough to sit with
   everything else on the page, and follows the Images setting like the rest. */
.dst-marks {
	--dst-mark-height: 40px;
	flex-wrap: nowrap;
}

.dst-mark {
	display: block;
	min-width: 0;
	background: var(--dst-logo-backing);
	border-radius: var(--dst-radius-image);
	overflow: hidden;
	line-height: 0;
}

.dst-mark img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--dst-mark-height);
}

@media (max-width: 781px) {
	.entry-content > .dst-aside {
		float: none;
		width: auto;
		margin-inline: 0;
	}
}

.dst-cosh img {
	background: var(--dst-logo-backing);
	padding: 10px 14px;
	border-radius: var(--dst-radius-image);
	max-width: 148px;
	width: auto;
	height: auto;
}

/* --------------------------------------------------------------------------
   Outbound links, social, and icons in buttons
   -------------------------------------------------------------------------- */

/* A small arrow saying "this leaves the site". Sized in em so it follows the
   text it belongs to, and nudged up to sit on the cap height rather than the
   baseline. It is inside the link, so it never wraps away from the last word. */
.dst-outbound__icon {
	display: inline-flex;
	margin-left: 0.24em;
}

.dst-outbound__icon .icon {
	width: 0.72em;
	height: 0.72em;
	vertical-align: -0.02em;
	opacity: 0.75;
}

.dst-outbound:hover .dst-outbound__icon .icon,
.dst-outbound:focus-visible .dst-outbound__icon .icon { opacity: 1; }

/* The social marks in the footer. Only appear when an address has been filled
   in on the Practice screen, so there is never a link to an account that does
   not exist. */
.site-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__social li { margin: 0; }

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--dst-radius-control);
	color: var(--dst-muted);
}

.site-footer__social .icon { width: 20px; height: 20px; }

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--dst-heading);
	background: var(--dst-hover-bg);
}

/* A button carrying an icon before its words. */
.button--with-icon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.button--with-icon .icon { width: 18px; height: 18px; }

/* The map pin beside the Where label, matching the footer's address. */
.course-facts dt .icon {
	width: 13px;
	height: 13px;
	margin-right: 5px;
	vertical-align: -0.12em;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

/* Hidden until the visitor is far enough down to want it - see to-top.js - and
   hidden altogether without JavaScript, since without the script it could never
   hide and would sit there on every short page. The link itself still works.

   The icon is the caret used everywhere else, turned over, rather than a new
   asset in the sprite for one arrow. */
.dst-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dst-tap);
	height: var(--dst-tap);

	color: var(--dst-on-accent);
	background: var(--dst-sub-hover-bg);
	border-radius: var(--dst-radius-control);
	text-decoration: none;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dst-to-top .icon {
	width: 22px;
	height: 22px;
	transform: rotate(180deg);
}

.dst-to-top--shown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dst-to-top:hover,
.dst-to-top:focus-visible {
	background: var(--dst-heading);
	color: var(--dst-on-accent);
}

html:not(.js) .dst-to-top { display: none; }

@media (prefers-reduced-motion: reduce) {
	.dst-to-top { transition: none; transform: none; }
	.dst-to-top--shown { transform: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--dst-tap);
	padding: 16px 28px;
	background: var(--dst-veil);
	color: var(--dst-heading);
	border: 0;
	border-radius: var(--dst-radius-control);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-button);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
.button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--dst-sub-hover-bg);
	color: var(--dst-on-accent);
}

/* A quieter button, for the one beside a real action rather than the action
   itself. The accrediting body on a course page is a reference, not a thing
   somebody came to do, and in the ordinary button it shouted louder than the
   enquiry next to it while being three times the width - upper case with two
   pixels of letter spacing roughly doubles a long name.

   So: sentence case, no tracking, ordinary weight, an outline instead of a
   fill, and enough padding to still be a comfortable target. It keeps the
   same minimum height as its neighbour so the two sit level. */
.button--quiet {
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--dst-hover-bg);
	color: var(--dst-ink);
	font-weight: 400;
	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
}

.button--quiet:hover,
.button--quiet:focus-visible {
	background: var(--dst-hover-bg);
	color: var(--dst-heading);
}

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

.site-footer {
	background: var(--dst-bg);
	border-top: 1px solid var(--dst-hover-bg);
	margin-top: clamp(40px, 8vw, 88px);
	padding-block: 32px;
	font-size: var(--dst-size-nav);
	color: var(--dst-muted);
}

/* Fourteen links do not fit on one line beside an address and a copyright
   notice, which is what this footer used to try. Two bands instead: everything
   useful above, a thin rule, and the copyright alone below. */
.site-footer__inner { display: block; }

/* Links first, address second. The links are what somebody is looking for when
   they reach the bottom of a page; the address is reference. */
.site-footer__top {
	display: grid;
	grid-template-columns: 3fr minmax(220px, 1fr);
	gap: 32px 56px;
	align-items: start;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 32px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--dst-hover-bg);
}

.legal-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.legal-menu li { margin: 0; }

.legal-menu a {
	display: inline-block;
	padding: 4px 0;
	font-family: var(--dst-sans);
	font-size: var(--dst-size-small);
}

@media (max-width: 899px) {
	.site-footer__top { grid-template-columns: 1fr; gap: 28px; }
	.site-footer__bottom { justify-content: flex-start; }
}

.site-footer p { margin: 0; max-width: none; }

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.site-footer__address,
.site-footer__phone {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-footer .icon { width: 18px; height: 18px; color: var(--dst-muted); }

.site-footer a { color: var(--dst-muted); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--dst-accent-ink); }

/* Columns, one per section heading in the menu. auto-fit rather than a fixed
   number, so adding a fourth section needs no CSS change. */
.footer-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu__column { margin: 0; }

.footer-menu__heading {
	display: block;
	margin-bottom: 10px;
	color: var(--dst-heading);
	font-family: var(--dst-sans);
	font-size: var(--dst-size-small);
	text-transform: uppercase;
	letter-spacing: var(--dst-track-nav);
}

.footer-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The links themselves stop shouting: sentence case, no tracking, and the tap
   target comes from line spacing rather than from 14px of padding on every one
   of fourteen items. */
.footer-menu__list a,
.footer-menu > .footer-menu__item > a {
	display: block;
	padding: 7px 0;
	font-family: var(--dst-sans);
	font-size: var(--dst-size-small);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.35;
}

.footer-menu a[aria-current="page"] { color: var(--dst-heading); }

@media (max-width: 767px) {
	.site-footer__contact { flex-direction: column; gap: 10px; }
	.footer-menu { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px 24px; }
}

/* --------------------------------------------------------------------------
   Editor notices
   -------------------------------------------------------------------------- */

.menu-missing {
	margin: 0;
	padding: 12px 16px;
	font-size: var(--dst-size-small);
	color: var(--dst-muted);
}

/* --------------------------------------------------------------------------
   Enquiry anchor
   -------------------------------------------------------------------------- */

/* An empty marker sat immediately before the contact form by inc/enquiry.php,
   so an enquiry button can land on the form rather than at the top of the page.

   The offset is what keeps context above it. Measured on 14 August 2026: the
   "Where to find us" heading sits 155px above the form once the address and the
   form are side by side, so 180px keeps that heading on screen with room above
   it.

   Below 782px, which is where WordPress's own columns block stops sitting side
   by side, the address stacks ABOVE the form and the same measurement becomes
   391px. That is 59% of a phone screen, and it would put the form back under
   the fold and undo the point of the exercise. Narrow screens get a small
   offset instead: enough that the form is not flush against the top edge, and
   nothing more.

   html already carries scroll-behavior: smooth with a prefers-reduced-motion
   override beside it, so the scroll animates and reduced motion is handled. */

.dst-enquiry-anchor {
	display: block;
	scroll-margin-top: var(--dst-enquiry-offset, 2rem);
}

@media (min-width: 782px) {
	.dst-enquiry-anchor { --dst-enquiry-offset: 180px; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

/* Centred, the whole page. Several things here carry a max-width from elsewhere,
   so text-align on its own would centre the words inside a box that is still
   sitting hard left - hence the margin-inline on the constrained ones.

   Scoped to body.error404, which WordPress adds itself, so the template needs no
   class of its own to be found by. */

.error404 .page-hero,
.error404 .entry-content {
	text-align: center;
}

.error404 .page-hero__standfirst,
.error404 .entry-content > p {
	margin-inline: auto;
}

/* The hero's own padding already separates this from what follows, so the
   global p margin of 1.2em was a fourth helping of space on top of three
   others. Measured on 14 August 2026: the gap between the standfirst and the
   signposts was 89px, made of 33.6 here, 18 from .site-header__inner, 30 from
   .page-hero and 8 from .entry-content. */
.error404 .page-hero__standfirst {
	margin-bottom: 0;
}

/* The instrument sits inside the h1 and is sized by .page-hero__title .icon, the
   same rule the four instrument pages use, so it needs nothing of its own here.
   Until 0.0.108 it was a large faded mark above the heading with its own sizing,
   which made the 404 the only page treating an icon as a special case. */

.dst-404__heading {
	font-size: var(--dst-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.dst-404__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}

.dst-404__list li {
	margin: 0;
}

/* The joke at the foot, for the few who read a 404 all the way down. Quiet on
   purpose: it should reward being noticed rather than ask to be. */
.dst-404__aside {
	margin-top: 36px;
	font-size: var(--dst-size-small);
	font-style: italic;
	color: var(--dst-muted);
}

/* ------------------------------------------------------------------
   Contact form honeypot (inc/spam.php)

   Moved off the screen rather than display:none, because some bots
   skip a field that is display:none and fill in one that is merely
   positioned away. Kept out of the tab order and hidden from assistive
   technology on the element itself, so nobody using the site can reach
   it by any route.
   ------------------------------------------------------------------ */
.dst-trap {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}