/* ==========================================================================
   sts-2026 — site tools: accessibility preferences panel, cookie consent,
   consent-gated embeds, STSPC credit. Loaded after app.css. Every colour is
   a theme token so both appearances are covered; the applied accessibility
   modes at the end override the tokens themselves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility launcher and panel
   -------------------------------------------------------------------------- */

/* --st-a11y-lift is set by the script to ride above the cookie banner. */
.a11y-launcher {
	position: fixed;
	left: max(1.25rem, env(safe-area-inset-left, 0px));
	bottom: calc(max(1.25rem, env(safe-area-inset-bottom, 0px)) + var(--st-a11y-lift, 0px));
	z-index: 1001;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	background: var(--st-navy);
	color: #ffffff;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	padding: 0;
	transition: transform 160ms ease, bottom 200ms ease, opacity 200ms ease, visibility 200ms ease;
}

.a11y-launcher svg {
	inline-size: 26px;
	block-size: 26px;
}

.a11y-launcher:hover {
	transform: scale(1.06);
	background: var(--st-navy-deep);
}

.a11y-launcher:focus-visible {
	outline: 3px solid var(--st-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--st-focus-offset);
}

.a11y-launcher.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.9);
	pointer-events: none;
}

html.a11y-dismissed .a11y-launcher {
	display: none !important;
}

@media (min-width: 48rem) {
	.a11y-launcher {
		left: 1.75rem;
		bottom: calc(1.75rem + var(--st-a11y-lift, 0px));
		inline-size: 58px;
		block-size: 58px;
	}

	.a11y-launcher svg {
		inline-size: 30px;
		block-size: 30px;
	}
}

.a11y-panel:not([hidden]) {
	position: fixed;
	left: max(1.25rem, env(safe-area-inset-left, 0px));
	bottom: calc(max(1.25rem, env(safe-area-inset-bottom, 0px)) + 52px + 0.75rem + var(--st-a11y-lift, 0px));
	z-index: 1050;
	inline-size: min(320px, calc(100vw - 2.5rem));
	max-block-size: min(72vh, 560px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--st-surface);
	color: var(--st-ink);
	border: 1px solid var(--st-line);
	border-radius: 6px;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.a11y-panel.is-open {
	opacity: 1;
	transform: none;
}

@media (min-width: 48rem) {
	.a11y-panel:not([hidden]) {
		left: 1.75rem;
		bottom: calc(1.75rem + 58px + 0.75rem + var(--st-a11y-lift, 0px));
	}
}

.a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 0.25rem;
}

.a11y-panel__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	color: var(--st-heading);
}

.a11y-panel__title svg {
	color: var(--st-cyan);
}

.a11y-panel__close {
	display: inline-flex;
	padding: 0.5rem;
	min-inline-size: 44px;
	min-block-size: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: var(--st-radius);
	color: var(--st-muted);
	cursor: pointer;
}

.a11y-panel__close:hover {
	background: var(--st-surface-raised);
	color: var(--st-heading);
}

.a11y-panel__intro,
.a11y-panel__hint {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-muted);
	line-height: 1.45;
}

.a11y-panel__hint {
	margin: 0.125rem 0 0;
	text-align: center;
}

.a11y-panel__hint strong {
	color: var(--st-ink);
}

.a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.a11y-row__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.a11y-textsize {
	display: flex;
	gap: 0.25rem;
}

.a11y-chip {
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--st-line-strong);
	border-radius: var(--st-radius);
	background: var(--st-surface-raised);
	color: var(--st-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.a11y-chip:hover {
	border-color: var(--st-heading);
	color: var(--st-heading);
}

.a11y-opt,
.a11y-reset {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	inline-size: 100%;
	min-block-size: 46px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: var(--st-surface);
	color: var(--st-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.a11y-opt svg {
	flex: none;
	color: var(--st-cyan);
}

.a11y-opt:hover,
.a11y-reset:hover {
	border-color: var(--st-heading);
}

.a11y-opt[aria-pressed='true'] {
	background: var(--st-navy);
	border-color: var(--st-navy);
	color: #ffffff;
}

.a11y-opt[aria-pressed='true'] svg {
	color: #ffffff;
}

.a11y-reset {
	justify-content: center;
	margin-block-start: 0.5rem;
	background: var(--st-surface-raised);
}

.a11y-hide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: 0.25rem;
	border: 0;
	background: none;
	color: var(--st-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	border-radius: var(--st-radius);
	cursor: pointer;
}

.a11y-hide:hover {
	color: var(--st-heading);
	background: var(--st-surface-raised);
}

/* --------------------------------------------------------------------------
   Applied accessibility modes (set on <html>)
   -------------------------------------------------------------------------- */

html[data-a11y-text='s'] {
	font-size: 90%;
}

html[data-a11y-text='l'] {
	font-size: 112.5%;
}

html[data-a11y-text='xl'] {
	font-size: 125%;
}

/* High contrast: light surfaces to white, text to black, rules to black, in
   BOTH appearances. The dark palette is set under :root[data-st-theme='dark']
   (0,1,1) and :root:not([data-st-theme='light']) inside a media query
   (0,2,0), so these selectors are written to outrank both. Navy bands (hero,
   footer) keep their white-on-navy text, which already passes; links are
   told apart by underline and weight, never colour alone. */
html.a11y-contrast,
html.a11y-contrast:not([data-st-theme='light']),
html.a11y-contrast[data-st-theme='dark'],
html.a11y-contrast[data-st-theme='light'] {
	color-scheme: light;
	--st-surface: #ffffff;
	--st-surface-raised: #ffffff;
	--st-surface-sunk: #ffffff;
	--st-ink: #000000;
	--st-muted: #1a1a1a;
	--st-line: #000000;
	--st-line-strong: #000000;
	--st-heading: #000000;
	--st-link: #00278a;
	--st-link-hover: #000000;
	--st-navy: #0d0a33;
	--st-navy-deep: #000000;
	--st-on-navy-muted: #ffffff;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--surface-raised: #ffffff;
	--wp--preset--color--ink: #000000;
	--wp--preset--color--muted: #1a1a1a;
	--wp--preset--color--link: #00278a;
	--wp--preset--color--line: #000000;
	--wp--preset--color--navy: #0d0a33;
	--wp--preset--color--navy-deep: #000000;
}

html.a11y-contrast body {
	background: #ffffff;
}

html.a11y-contrast a:not(.wp-block-button__link):not(.st-album__link):not(.st-credit__stspc):not(.st-ofsted a) {
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

html.a11y-contrast .st-on-navy,
html.a11y-contrast .st-on-navy p,
html.a11y-contrast .st-on-navy a,
html.a11y-contrast .st-on-navy li {
	color: #ffffff;
	opacity: 1;
}

/* Highlight links: persistent underline on body links; buttons and card links excluded. */
html.a11y-links a:not(.wp-block-button__link):not(.st-album__link):not(.st-credit__stspc):not(.st-apply a):not(.st-ofsted a) {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

html.a11y-links a:hover,
html.a11y-links a:focus-visible {
	outline: 2px solid var(--st-cyan);
	outline-offset: 2px;
}

/* Readable font: swap both faces for a plain, wide sans. Icons are SVG, unaffected. */
html.a11y-readable {
	--wp--preset--font-family--display: Verdana, Tahoma, Arial, sans-serif;
	--wp--preset--font-family--body: Verdana, Tahoma, Arial, sans-serif;
}

html.a11y-readable body {
	font-family: Verdana, Tahoma, Arial, sans-serif;
	letter-spacing: 0.01em;
	line-height: 1.75;
}

html.a11y-readable h1,
html.a11y-readable h2,
html.a11y-readable h3,
html.a11y-readable h4 {
	font-family: Verdana, Tahoma, Arial, sans-serif;
}

html.a11y-readable em,
html.a11y-readable i {
	font-style: normal;
}

/* Big cursor: navy arrow with a white outline, everywhere. */
html.a11y-bigcursor,
html.a11y-bigcursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 4 7-3 1.5-4-7-5 4z' fill='%2325408e' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Pause animations: neutralise transitions, animations and smooth scroll. */
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Cookie consent: banner and preferences dialog
   -------------------------------------------------------------------------- */

.st-cookie {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--st-surface);
	color: var(--st-ink);
	border-top: 1px solid var(--st-line);
	box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, 0.4);
	transform: translateY(110%);
	transition: transform 300ms ease;
}

.st-cookie.is-in {
	transform: translateY(0);
}

.st-cookie[hidden] {
	display: none;
}

.st-cookie__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	max-inline-size: var(--wp--style--global--wide-size, 76rem);
	margin-inline: auto;
	padding: 1rem var(--st-gutter) max(1rem, env(safe-area-inset-bottom, 0px));
}

.st-cookie__text {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	flex: 1 1 28rem;
	min-inline-size: 0;
}

.st-cookie__icon {
	color: var(--st-cyan);
	flex: none;
	line-height: 1;
}

.st-cookie__title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	color: var(--st-heading);
}

.st-cookie__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.st-cookie__actions {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	align-items: center;
	flex: none;
}

.st-cookie__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 44px;
	padding: 0.625rem 1.125rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	border-radius: var(--st-radius);
	border: 1px solid transparent;
	cursor: pointer;
}

.st-cookie__btn--primary {
	background: var(--st-navy);
	color: #ffffff;
	border-color: var(--st-navy);
}

.st-cookie__btn--primary:hover {
	background: var(--st-navy-deep);
}

.st-cookie__btn--secondary {
	background: var(--st-surface);
	color: var(--st-heading);
	border-color: var(--st-heading);
}

.st-cookie__btn--secondary:hover {
	background: var(--st-surface-raised);
}

.st-cookie__btn--ghost {
	background: none;
	color: var(--st-link);
}

.st-cookie__btn--ghost:hover {
	text-decoration: underline;
}

@media (max-width: 40rem) {
	.st-cookie__actions {
		inline-size: 100%;
	}

	.st-cookie__btn {
		flex: 1 1 auto;
	}
}

.st-ccmodal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.st-ccmodal[hidden] {
	display: none;
}

.st-ccmodal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(18, 13, 69, 0.55);
	opacity: 0;
	transition: opacity 200ms ease;
}

.st-ccmodal.is-in .st-ccmodal__overlay {
	opacity: 1;
}

.st-ccmodal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: min(580px, 100%);
	max-block-size: calc(100dvh - 2rem);
	background: var(--st-surface);
	color: var(--st-ink);
	border-radius: 6px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 200ms ease, transform 200ms ease;
}

.st-ccmodal.is-in .st-ccmodal__panel {
	opacity: 1;
	transform: none;
}

.st-ccmodal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.25rem 1.25rem 0.75rem;
}

.st-ccmodal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	color: var(--st-heading);
}

.st-ccmodal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0.5rem;
	border: 0;
	background: transparent;
	color: var(--st-muted);
	border-radius: var(--st-radius);
	cursor: pointer;
}

.st-ccmodal__close:hover {
	background: var(--st-surface-raised);
	color: var(--st-heading);
}

.st-ccmodal__body {
	padding: 0 1.25rem;
	overflow-y: auto;
}

.st-ccmodal__intro {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.st-ccrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1rem 0;
	border-top: 1px solid var(--st-line);
}

.st-ccrow__text h3 {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--st-heading);
}

.st-ccrow__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-muted);
	line-height: 1.45;
}

.st-ccmodal__foot {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	padding: 1rem 1.25rem 1.25rem;
	margin-block-start: 0.75rem;
	border-top: 1px solid var(--st-line);
}

@media (max-width: 40rem) {
	.st-ccmodal__foot .st-cookie__btn {
		flex: 1 1 auto;
	}
}

/* Toggle switch */
.st-switch {
	position: relative;
	flex: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
}

.st-switch--locked {
	cursor: default;
}

.st-switch input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	margin: 0;
}

.st-switch__track {
	position: relative;
	inline-size: 46px;
	block-size: 26px;
	border-radius: 999px;
	background: var(--st-line-strong);
	transition: background 200ms ease;
}

.st-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: transform 200ms ease;
}

.st-switch input:checked + .st-switch__track {
	background: var(--st-navy);
}

.st-switch input:checked + .st-switch__track .st-switch__thumb {
	transform: translateX(20px);
}

.st-switch input:focus-visible + .st-switch__track {
	outline: 3px solid var(--st-focus);
	outline-offset: 2px;
}

.st-switch--locked .st-switch__track {
	opacity: 0.6;
}

.st-switch__state {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-muted);
}

.st-switch__state:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Footer controls and the STSPC credit
   -------------------------------------------------------------------------- */

.st-footer__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: center;
}

.st-footer__toolbtn {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	min-block-size: 44px;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-on-navy-muted);
	cursor: pointer;
	text-decoration: none;
}

.st-footer__toolbtn:hover,
.st-footer__toolbtn:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: var(--st-cyan);
	text-underline-offset: 0.2em;
}

.st-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-on-navy-muted);
}

/* The wordmark's two colours are custom properties: "STS" and "PC". On the
   navy footer they take the theme's own two voices, white and cyan, in both
   appearances (cyan is 6.3:1 on navy). Hover is opacity only. */
.st-credit__stspc {
	display: inline-flex;
	align-items: center;
	--logo-sts: #ffffff;
	--logo-pc: var(--st-accent-on-navy, #ffb8bb);
	opacity: 0.9;
	transition: opacity 160ms ease;
	text-decoration: none;
	border: 0;
}

.st-credit__stspc:hover,
.st-credit__stspc:focus-visible {
	opacity: 1;
}

.st-credit__stspc .stspc-wordmark {
	block-size: 1.3em;
	inline-size: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Consent-gated map
   -------------------------------------------------------------------------- */

.st-map--gated {
	inline-size: 100%;
	box-sizing: border-box; /* the 1px border must not push it 2px past its column */
	min-block-size: min(60vw, 26rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--st-surface-sunk);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	overflow: hidden;
}

.st-map--gated.is-loaded {
	display: block;
	border: 0;
}

.st-map--gated iframe {
	inline-size: 100%;
	block-size: min(60vw, 26rem);
	border: 0;
	display: block;
}

.st-map__placeholder {
	max-inline-size: 26rem;
	padding: 1.5rem;
	text-align: center;
	color: var(--st-ink);
}

.st-map__placeholder svg {
	inline-size: 32px;
	block-size: 32px;
	color: var(--st-cyan);
}

.st-map__placeholder p {
	margin: 0.5rem 0 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.st-map__load {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding: 0.625rem 1.25rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #ffffff;
	background: var(--st-navy);
	border: 0;
	border-radius: var(--st-radius);
	cursor: pointer;
}

.st-map__load:hover {
	background: var(--st-navy-deep);
}

@media print {
	.a11y-launcher,
	.a11y-panel,
	.st-cookie,
	.st-ccmodal {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a11y-launcher,
	.a11y-panel:not([hidden]),
	.st-cookie,
	.st-ccmodal__overlay,
	.st-ccmodal__panel,
	.st-switch__track,
	.st-switch__thumb {
		transition: none;
	}
}

/* ==================================================================
   The tour film (no longer used on this site)

   A click-to-load facade. The poster and the play control are ours and
   are served from this host; nothing reaches YouTube until the button
   is pressed. The frame holds a 16/9 box from first paint, so swapping
   the iframe in shifts nothing on the page.

   The circle-and-triangle is a player control, not a second brand mark
   — the swoosh rule in CLAUDE.md governs decoration, and a play button
   has to look like a play button.
   ================================================================== */
.st-video {
	margin: 0;
}

.st-video__frame {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	background: var(--st-surface-sunk);
	border-radius: var(--st-radius);
	overflow: hidden;
}

.st-video__frame iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

.st-video__play {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	cursor: pointer;
}

.st-video__play:focus-visible {
	outline: 3px solid var(--st-focus);
	outline-offset: -3px;
}

.st-video__poster {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* A wash under the control so white text and the circle hold their
   contrast whatever the still behind them happens to be. */
.st-video__play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgb( 8 6 32 / 0.18 ) 0%, rgb( 8 6 32 / 0.30 ) 55%, rgb( 8 6 32 / 0.62 ) 100% );
	transition: background 0.2s ease;
}

.st-video__play:hover::after,
.st-video__play:focus-visible::after {
	background: linear-gradient( to bottom, rgb( 8 6 32 / 0.30 ) 0%, rgb( 8 6 32 / 0.42 ) 55%, rgb( 8 6 32 / 0.70 ) 100% );
}

.st-video__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 1;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	margin: -2.25rem 0 0 -2.25rem;
	border-radius: 50%;
	background: var(--st-navy);
	box-shadow: 0 2px 18px rgb( 0 0 0 / 0.38 );
	transition: transform 0.2s ease, background 0.2s ease;
}

/* The triangle, drawn with borders so the pattern carries no inline SVG. */
.st-video__icon::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	border-style: solid;
	border-width: 0.68rem 0 0.68rem 1.12rem;
	border-color: transparent transparent transparent #ffffff;
	transform: translate( -40%, -50% );
}

.st-video__play:hover .st-video__icon,
.st-video__play:focus-visible .st-video__icon {
	background: var(--st-cyan);
	transform: scale( 1.06 );
}

/* Cyan is 6.30:1 on navy but only 2.53:1 on white, so the triangle on a
   cyan circle goes navy rather than staying white. */
.st-video__play:hover .st-video__icon::before,
.st-video__play:focus-visible .st-video__icon::before {
	border-left-color: var(--st-navy);
}

.st-video__label {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 1;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: start;
	text-shadow: 0 1px 3px rgb( 0 0 0 / 0.5 );
}

.st-video__length {
	font-weight: 400;
	opacity: 0.85;
}

.st-video__note {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--st-muted);
}

.st-video figcaption {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--st-muted);
}

/* On navy the note has to come off the navy palette, not the page one. */
.st-on-navy .st-video__note,
.st-on-navy .st-video figcaption {
	color: var( --st-on-navy-muted );
}

.st-on-navy .st-video__note a {
	color: var(--st-accent-on-navy, #ffb8bb);
}

@media ( max-width: 36rem ) {
	.st-video__icon {
		inline-size: 3.5rem;
		block-size: 3.5rem;
		margin: -1.75rem 0 0 -1.75rem;
	}

	.st-video__icon::before {
		border-width: 0.53rem 0 0.53rem 0.87rem;
	}

	.st-video__label {
		padding: 0.75rem 0.9rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.st-video__play::after,
	.st-video__icon {
		transition: none;
	}

	.st-video__play:hover .st-video__icon,
	.st-video__play:focus-visible .st-video__icon {
		transform: none;
	}
}