/*
 * The Dancing Mermaid · public site · Direction C, "Underwater depth"
 *
 * The system is specified in docs/DESIGN.md. Order:
 *   1 Tokens   2 Base   3 Layout   4 Components   5 Pages   6 Utilities
 *
 * Phone first. Wider screens add to the base with min-width queries at
 * 600px, 900px and 1200px only. Type and spacing scale with clamp().
 *
 * Pages that have not moved to this system yet still load legacy.css.
 */


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

:root {
	--ink-950: #07061a;
	--ink-900: #0b0a24;
	--ink-850: #110e30;
	--ink-800: #15123a;
	--line: #262257;
	--line-strong: #3a3474;

	--text: #f3f0ff;
	--text-soft: #d7d1ee;
	--text-muted: #b9b3d6;
	--text-faint: #8f88b0;
	--white: #ffffff;

	--accent: #f16aff;
	--accent-hover: #f9b8ff;
	--on-accent: #1a0b24;
	--magenta: #aa2d98;

	--font-head: Montserrat, system-ui, sans-serif;
	--font-body: Poppins, system-ui, sans-serif;

	--step-display: clamp(48px, 7.4vw, 112px);
	--step-1: clamp(42px, 6vw, 88px);
	--step-2: clamp(32px, 4.2vw, 56px);
	--step-3: clamp(24px, 2.4vw, 34px);
	--step-4: 20px;

	--wrap: 1280px;
	--gutter: clamp(16px, 4vw, 32px);
	--section: clamp(72px, 10vw, 120px);

	--radius-field: 10px;
	--radius-thumb: 16px;
	--radius-card: 20px;
	--radius-pill: 999px;

	--shade-photo: linear-gradient(180deg, rgba(11,10,36,0.6) 0%, rgba(11,10,36,0.12) 38%, rgba(11,10,36,0.94) 100%);
	--shade-card: linear-gradient(180deg, rgba(11,10,36,0) 18%, rgba(11,10,36,0.78) 52%, rgba(11,10,36,0.97) 100%);

	--header-h: 92px;
}


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

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

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

body.site {
	margin: 0;
	min-height: 100vh;
	background: var(--ink-900);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.site h1,
.site h2,
.site h3,
.site h4 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 300;
	line-height: 1.08;
	color: var(--white);
}

.site p {
	margin: 0;
}

.site img,
.site video {
	display: block;
	max-width: 100%;
}

.site a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

.site a:hover {
	color: var(--accent-hover);
}

.site :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.site ul,
.site ol {
	margin: 0;
}

.site strong {
	font-weight: 600;
	color: var(--white);
}

/* The hidden attribute wins over a component's display */
.site [hidden] {
	display: none;
}


/* ==========================================================================
   3 Layout
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.wrapNarrow {
	max-width: calc(1080px + 2 * var(--gutter));
}

.section {
	padding: var(--section) 0;
}

.sectionTight {
	padding: calc(var(--section) * 0.6) 0;
}

.band {
	background: var(--ink-850);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.split {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
}

.cols2,
.cols3,
.cols4 {
	display: grid;
	gap: 24px;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.stack > .eyebrow {
	margin-bottom: -4px;
}

.stack p:not(.lead):not(.quote) {
	color: var(--text-soft);
}

@media (min-width: 600px) {
	.cols2,
	.cols3,
	.cols4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cols3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.cols4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ==========================================================================
   4 Components
   ========================================================================== */

/* Eyebrow and headings ---------------------------------------------------- */

.eyebrow {
	display: block;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
}

.site .titleDisplay {
	font-size: var(--step-display);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.site .title1 {
	font-size: var(--step-1);
	line-height: 1;
	letter-spacing: -0.02em;
}

.site .title2 {
	font-size: var(--step-2);
	line-height: 1.05;
}

.site .title3 {
	font-size: var(--step-3);
	font-weight: 400;
	line-height: 1.15;
}

.lead {
	font-size: clamp(17px, 1.6vw, 19px);
	color: var(--text-soft);
}

.sectionHead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px 32px;
	margin-bottom: clamp(32px, 4vw, 52px);
}

.sectionHead > div {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
}

.sectionHead .lead {
	max-width: 560px;
}

.linkMore {
	font-weight: 500;
	white-space: nowrap;
}

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

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.site .button {
	display: inline-flex;
	background: transparent;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}

/* A press shows, on a phone as much as with a mouse */
.site .button:active:not(:disabled) {
	transform: scale(0.97);
}

/* Disabled looks the same on every button, and does not light up on hover */
.site .button:disabled,
.site .button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.site .buttonPrimary {
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.site .buttonPrimary:hover:not(:disabled) {
	background: var(--accent-hover);
	color: var(--on-accent);
}

.site .buttonOutline {
	border-color: var(--accent);
	color: var(--accent);
}

.site .buttonOutline:hover:not(:disabled) {
	background: rgba(241,106,255,0.12);
	color: var(--accent-hover);
}

.site .buttonLight {
	border-color: rgba(255,255,255,0.7);
	color: var(--white);
}

.site .buttonLight:hover:not(:disabled) {
	background: rgba(255,255,255,0.12);
	color: var(--white);
}

.site .buttonSmall {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14px;
}

/* Pills -------------------------------------------------------------------- */

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: var(--radius-pill);
	font-size: 14px;
	color: var(--white);
}

.site a.pill {
	min-height: 44px;
	border-color: var(--line-strong);
	color: var(--white);
}

.site a.pill:hover {
	border-color: var(--accent);
	color: var(--white);
}

.site a.pill[aria-current="true"],
.site a.pill[aria-current="page"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

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

.siteHeader {
	position: relative;
	z-index: 50;
	background: var(--ink-900);
	border-bottom: 1px solid var(--line);
}

.hasHero .siteHeader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
}

.siteHeaderInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-h);
}

.site .siteBrand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--white);
}

.siteBrand img {
	width: 60px;
	height: 48px;
	object-fit: contain;
}

.siteMenuButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
}

.siteMenuButton .iconClose {
	display: none;
}

.menuOpen .siteMenuButton .iconOpen {
	display: none;
}

.menuOpen .siteMenuButton .iconClose {
	display: block;
}

/* Below 900px the menu is a full-screen panel */
.siteNav {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: calc(var(--header-h) + 16px) var(--gutter) 40px;
	background: var(--ink-950);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}

.menuOpen .siteNav {
	opacity: 1;
	visibility: visible;
}

.menuOpen {
	overflow: hidden;
}

.siteNav ul {
	list-style: none;
	padding: 0;
}

.site .siteNav a {
	display: flex;
	align-items: center;
	min-height: 52px;
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 300;
	color: var(--white);
}

.site .siteNav a[aria-current="page"],
.site .siteNav .isCurrent > a {
	color: var(--accent);
}

.siteNav .subMenu {
	padding-left: 18px;
	border-left: 1px solid var(--line-strong);
	margin: 0 0 10px;
}

.site .siteNav .subMenu a {
	min-height: 44px;
	font-size: 19px;
	color: var(--text-soft);
}

.subMenuChevron {
	display: none;
}

.site .siteNav .navEnquire {
	margin-top: 20px;
	align-self: flex-start;
}

.site .siteNav .navEnquire a {
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
}

@media (min-width: 900px) {
	.siteMenuButton {
		display: none;
	}

	.siteNav {
		position: static;
		z-index: auto;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		padding: 0;
		background: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}

	.siteNav > ul {
		display: flex;
		align-items: center;
		gap: clamp(18px, 2vw, 28px);
	}

	.site .siteNav a {
		min-height: 44px;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.site .siteNav > ul > li > a:hover {
		color: var(--accent);
	}

	.siteNav .hasSubMenu {
		position: relative;
	}

	.subMenuChevron {
		display: inline-block;
		margin-left: 4px;
		transition: transform 0.2s;
	}

	.siteNav .subMenu {
		position: absolute;
		top: 100%;
		left: -18px;
		min-width: 230px;
		margin: 0;
		padding: 10px 0;
		border: 1px solid var(--line-strong);
		border-radius: 14px;
		background: var(--ink-850);
		box-shadow: 0 18px 40px rgba(0,0,0,0.45);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	}

	.siteNav .hasSubMenu:hover .subMenu,
	.siteNav .hasSubMenu:focus-within .subMenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.siteNav .hasSubMenu:hover .subMenuChevron,
	.siteNav .hasSubMenu:focus-within .subMenuChevron {
		transform: rotate(180deg);
	}

	.site .siteNav .subMenu a {
		min-height: 44px;
		padding: 0 20px;
		font-family: var(--font-body);
		font-size: 15px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--text);
	}

	.site .siteNav .subMenu a:hover,
	.site .siteNav .subMenu a[aria-current="page"] {
		background: var(--ink-800);
		color: var(--accent);
	}

	.site .siteNav .navEnquire {
		margin: 0;
	}

	.site .siteNav .navEnquire a {
		min-height: 44px;
		padding: 10px 22px;
		font-size: 13px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
}


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

.siteFooter {
	background: var(--ink-950);
	color: var(--text-muted);
	font-size: 14px;
}

.siteFooterMain {
	display: grid;
	gap: 36px 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-top: 72px;
	padding-bottom: 40px;
}

.siteFooterBrand {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 320px;
}

.siteFooterBrand .wordmark,
.siteFooter h2 {
	font-family: var(--font-head);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--white);
}

.siteFooterBrand .wordmark {
	font-size: 15px;
	letter-spacing: 0.28em;
}

.site .siteFooter h2 {
	margin-bottom: 12px;
	font-size: 12px;
	letter-spacing: 0.24em;
}

.siteFooter ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site .siteFooter ul a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--text-muted);
}

.site .siteFooter ul a:hover {
	color: var(--accent);
}

.siteFooterSmall {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 24px;
	padding-bottom: 36px;
	border-top: 1px solid #1d1a45;
	font-size: 12px;
	color: var(--text-faint);
}

@media (min-width: 900px) {
	.siteFooterMain {
		grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
		gap: 48px;
		padding-top: 80px;
	}

	.siteFooterBrand {
		grid-column: auto;
	}
}

/* Hero --------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: min(100svh, 860px);
	overflow: hidden;
}

.heroMedia,
.heroShade {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.heroMedia img,
.heroMedia video,
.heroMedia iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.heroShade {
	background: linear-gradient(180deg, rgba(11,10,36,0.6) 0%, rgba(11,10,36,0.5) 35%, rgba(11,10,36,0.96) 100%);
}

@media (min-width: 900px) {
	.heroShade {
		background: var(--shade-photo);
	}
}

.heroBody {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 22px;
	padding-top: calc(var(--header-h) + 40px);
	padding-bottom: clamp(56px, 8vw, 104px);
}

.heroBody .lead {
	max-width: 640px;
	color: #e2dcf5;
}

.heroShort {
	min-height: 0;
}

.heroShort .heroBody {
	padding-bottom: clamp(48px, 6vw, 72px);
}

/* A Vimeo background fills the hero like object-fit: cover */
.heroMedia:has(.heroVimeo) {
	overflow: hidden;
	container-type: size;
}

/* .heroMedia's prefix beats .heroMedia iframe, which sizes it to the box and letterboxes the video */
.heroMedia .heroVimeo {
	opacity: 0;
	transition: opacity 0.8s;
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.heroMedia .heroVimeo.isPlaying {
	opacity: 1;
}

.crumbs {
	font-size: 13px;
	color: var(--text-muted);
}

.site .crumbs a {
	color: var(--text-muted);
}

.site .crumbs a:hover {
	color: var(--accent);
}

/* Strips ------------------------------------------------------------------- */

.strip {
	border-bottom: 1px solid var(--line);
}

.stripInner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	padding-top: 26px;
	padding-bottom: 26px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.stripInner > span {
	text-align: center;
}

.stripInner b {
	font-weight: 500;
	color: var(--accent);
}

.logoStrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 56px;
	padding-top: 28px;
	padding-bottom: 28px;
}

.logoStrip .stripLabel {
	font-family: var(--font-head);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* A centred group with even gaps, however many logos (Randy, 25 October 2026) */
.logoStrip ul {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 56px;
	list-style: none;
	padding: 0;
}

/* Their own colours: each is uploaded in its version for a dark background */
.logoStrip img {
	display: block;
	opacity: 0.85;
	transition: opacity 0.25s;
}

/* Sized by area in the view (LogoStrip::size); never wider than the screen */
.logoStrip img[width] {
	max-width: 100%;
	height: auto;
}

/* A logo whose size could not be read (an SVG) keeps the old box */
.logoStrip img:not([width]) {
	width: auto;
	max-height: 40px;
	max-width: 130px;
}

.logoStrip a:hover img,
.logoStrip li:hover img {
	opacity: 1;
}

/* Cards -------------------------------------------------------------------- */

.card {
	padding: 28px;
	border: 1px solid var(--line-strong);
	border-radius: 18px;
	background: rgba(21,18,58,0.75);
}

.card h3 {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 500;
}

.card p {
	color: var(--text-soft);
}

/* A photo filling the card, its words over a gradient */
.site .photoCard {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 480px;
	border-radius: var(--radius-card);
	overflow: hidden;
	color: var(--white);
}

/* A <picture> adds no box, so its image fills the card like a bare one */
.photoCard > picture {
	display: contents;
}

.photoCard > img,
.photoCard > picture > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.photoCard::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--shade-card);
}

.site a.photoCard:hover {
	color: var(--white);
}

.site a.photoCard:hover > img,
.site a.photoCard:hover > picture > img {
	transform: scale(1.04);
}

.photoCardBody {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(24px, 3vw, 34px);
}

/* Small capitals over a photo: a soft shade behind each letter keeps them readable */
.hero .eyebrow,
.photoCard .eyebrow {
	text-shadow: 0 1px 3px rgba(7,6,26,0.9), 0 0 18px rgba(7,6,26,0.95);
}

.photoCardBody p {
	color: var(--text-soft);
}

.photoCardFoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,0.18);
	font-weight: 500;
}

.photoCardFoot span:last-child {
	color: var(--accent);
}

.photo {
	width: 100%;
	height: clamp(320px, 45vw, 580px);
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* Event and guide rows ----------------------------------------------------- */

.site .eventCard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--white);
}

.eventCard img,
.eventCard .placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-thumb);
}

.eventCard .meta {
	font-family: var(--font-head);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.eventCard .name {
	font-family: var(--font-head);
	font-size: 22px;
	line-height: 1.25;
}

.site .eventCard:hover {
	color: var(--accent);
}

.guideList {
	display: flex;
	flex-direction: column;
}

.site .guideRow {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
	color: var(--white);
}

.guideRow > span {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.guideRow .meta {
	font-family: var(--font-head);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.guideRow .name {
	font-family: var(--font-head);
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.3;
}

.guideRow .summary {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
}

.guideRow svg {
	flex-shrink: 0;
	margin-top: 4px;
	color: var(--accent);
	transition: transform 0.2s;
}

.site .guideRow:hover {
	color: var(--accent);
}

.guideRow:hover svg {
	transform: translateX(4px);
}

/* Quote -------------------------------------------------------------------- */

.quote {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.3;
	color: var(--white);
}

.quoteSource {
	margin-top: 18px;
	font-size: 14px;
	color: var(--text-muted);
}

/* Call-to-action band ------------------------------------------------------ */

.ctaBand {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
}

.ctaBand > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctaBand::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11,10,36,0.72);
}

.ctaBand .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.ctaBand .lead {
	max-width: 560px;
	color: #e6e1f6;
}

.ctaBand .buttons {
	justify-content: center;
}

/* Form fields -------------------------------------------------------------- */

.formGrid {
	display: grid;
	gap: 16px;
	padding: clamp(24px, 3.5vw, 36px);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: rgba(21,18,58,0.9);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-field);
	background: var(--ink-900);
	color: var(--white);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
	border-color: var(--text-faint);
}

.field textarea {
	min-height: 110px;
	resize: vertical;
}

.field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f16aff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(241,106,255,0.25);
}

.field.formWarning input,
.field input.formWarning {
	border-color: #ff8fa3;
}

.check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--text-muted);
}

.check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--accent);
}

@media (min-width: 600px) {
	.formGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.formGrid .fieldWide,
	.formGrid .check,
	.formGrid .button,
	.formGrid .formTitle {
		grid-column: 1 / -1;
	}
}

/* FAQ accordion (markup: home.guides.faq-list) ---------------------------- */

.site .guidesFaq {
	border-top: 1px solid var(--line);
}

.site .faqItem {
	border-bottom: 1px solid var(--line);
}

.site .faqQuestion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 64px;
	padding: 18px 0;
	border: 0;
	background: none;
	color: var(--white);
	font-family: var(--font-head);
	font-size: clamp(17px, 1.6vw, 20px);
	text-align: left;
	cursor: pointer;
}

.site .faqQuestion:hover {
	color: var(--accent);
}

.site .faqIcon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.site .faqIcon span {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: var(--accent);
	transition: transform 0.25s;
}

.site .faqIcon span:last-child {
	transform: rotate(90deg);
}

.site .faqItem.faqOpen .faqIcon span:last-child {
	transform: rotate(0deg);
}

.site .faqAnswer {
	padding: 0 0 22px;
	max-width: 820px;
	color: var(--text-soft);
}

.site .faqAnswer p + p {
	margin-top: 12px;
}

.site .guidesMore {
	margin-top: 26px;
}

/* Cookie notice ------------------------------------------------------------ */

.site .gdpr {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	max-width: 620px;
	margin: 0 auto;
	padding: 16px 20px;
	border: 1px solid var(--line-strong);
	border-radius: 16px;
	background: var(--ink-850);
	box-shadow: 0 18px 40px rgba(0,0,0,0.5);
	font-size: 13px;
	color: var(--text-soft);
}

.site .gdpr p {
	flex: 1 1 280px;
}

.site .gdpr .gdprButtons {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.site .gdpr .button {
	min-height: 44px;
	padding: 10px 22px;
	font-size: 14px;
}

/* On a phone the notice is a slim bar along the bottom, so the hero's buttons stay in view */
@media (max-width: 640px) {
	.site .gdpr {
		left: 0;
		right: 0;
		bottom: 0;
		gap: 10px 14px;
		max-width: none;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 16px 16px 0 0;
		font-size: 12px;
		line-height: 1.45;
	}

	.site .gdpr p {
		flex: 1 1 100%;
	}

	.site .gdpr .button {
		flex: none;
		min-height: 40px;
		padding: 8px 18px;
	}

	/* Until it is answered, a full-height hero lifts its buttons clear of the bar */
	.site:has(.gdpr) .hero:not(.heroShort) .heroBody {
		padding-bottom: 150px;
	}
}

/* A section over a darkened full-bleed photo ------------------------------ */

.photoBand,
.enquiry {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.photoBand > img,
.enquiry > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photoBand::before,
.enquiry::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11,10,36,0.82);
}

/* Enquiry: contact lines beside the form ---------------------------------- */

.enquiryGrid {
	display: grid;
	gap: 48px;
}

.enquiryText {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.enquiryText .lead {
	color: #e6e1f6;
}

.site .contactLines {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin-top: 8px;
}

.contactLines li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--accent);
}

.site .contactLines a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--white);
	overflow-wrap: anywhere;
}

.site .contactLines a:hover {
	color: var(--accent);
}

.formTitle {
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.1;
	color: var(--white);
}

.formStatus:empty {
	display: none;
}

.formStatus {
	padding: 12px 16px;
	border-radius: var(--radius-field);
	background: var(--ink-800);
	color: var(--white);
	font-size: 15px;
}

.formStatus[data-kind="error"] {
	border: 1px solid #ff8fa3;
}

.formStatus[data-kind="success"] {
	border: 1px solid var(--accent);
}

.site #not_human {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.site .formGrid .button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

@media (min-width: 900px) {
	.enquiryGrid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
		gap: 56px;
	}
}

/* Numbered steps ------------------------------------------------------------ */

.steps {
	list-style: none;
	padding: 0;
}

.steps li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 22px;
	border-top: 2px solid var(--line-strong);
}

.steps li:first-child {
	border-top-color: var(--accent);
}

.stepNumber {
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 300;
	line-height: 1;
	color: var(--accent);
}

.site .steps h2,
.site .steps h3 {
	font-size: 22px;
	font-weight: 400;
}

.steps p {
	color: var(--text-soft);
}

/* Prose: written content from the admin (guides, events, blog) ------------ */

.prose {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.8;
	color: #e2dcf5;
}

.site .prose > * + * {
	margin-top: 18px;
}

.site .prose h2 {
	margin-top: 44px;
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 400;
	line-height: 1.2;
}

.site .prose h3 {
	margin-top: 30px;
	font-size: clamp(19px, 1.8vw, 22px);
	font-weight: 500;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.prose ul,
.prose ol {
	padding-left: 22px;
}

.prose li + li {
	margin-top: 8px;
}

.site .prose blockquote {
	margin: 26px 0;
	padding: 24px 28px;
	border: 1px solid var(--line-strong);
	border-radius: 18px;
	background: var(--ink-850);
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.45;
	color: var(--white);
}

.prose img {
	height: auto;
	border-radius: var(--radius-thumb);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.prose th,
.prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	font-weight: 500;
	color: var(--white);
}

.tableScroll {
	overflow-x: auto;
}

/* Pagination ---------------------------------------------------------------- */

.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 56px;
}

.pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
}

.site .pagerLink,
.site .pagerPage,
.pagerGap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	color: var(--white);
}

.site .pagerPage[aria-current="page"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.pagerLink.isDisabled,
.pagerGap {
	color: var(--text-faint);
	border-color: var(--line);
}

.emptyNote {
	padding: 40px 0;
	color: var(--text-muted);
}

/* Page head, for pages without a photo hero -------------------------------- */

.pageHead {
	padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px);
}

.pageHead .lead {
	max-width: 760px;
}

/* A side column (contents, topics) beside the main column ----------------- */

.sideLayout,
.guideLayout {
	display: grid;
	gap: 40px;
}

.toc {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
}

.tocTitle {
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.site .toc a {
	display: flex;
	align-items: center;
	min-height: 36px;
	color: var(--text-soft);
	line-height: 1.4;
}

.site .toc a:hover {
	color: var(--accent);
}

@media (min-width: 900px) {
	.sideLayout,
	.guideLayout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 64px;
	}

	.toc {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}

/* Author band --------------------------------------------------------------- */

.authorBand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(24px, 4vw, 44px);
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: var(--ink-850);
}

.authorBandWho {
	display: flex;
	align-items: center;
	gap: 20px;
}

.authorBandWho img {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.authorBandTitle {
	font-family: var(--font-head);
	font-size: clamp(18px, 1.8vw, 22px);
	color: var(--white);
}

.authorBandMeta {
	color: var(--text-muted);
	font-size: 14px;
}

.authorBandSmall {
	margin-top: 48px;
	padding: 28px;
}

/* Placeholders for content not yet supplied ------------------------------ */

.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--line-strong);
	background: var(--ink-850) url('../img/site/logo-mark.png') no-repeat center / 64px auto;
	color: var(--text-faint);
	font-size: 14px;
}


/* Notices: a message above a form or a page ------------------------------- */

.notice {
	padding: 12px 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-field);
	background: var(--ink-800);
	color: var(--white);
	font-size: 15px;
}

.notice[data-kind="error"] {
	border-color: #ff8fa3;
}

.notice[data-kind="success"] {
	border-color: var(--accent);
}

.notice ul {
	padding-left: 18px;
}

/* Choices: radio buttons as tappable rows or chips ------------------------ */

.choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.choices legend {
	margin-bottom: 10px;
	padding: 0;
	font-size: 13px;
	color: var(--text-muted);
}

.choice {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-field);
	background: var(--ink-900);
	font-size: 15px;
	color: var(--text);
	cursor: pointer;
}

.choice input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.choice {
	transition: border-color 0.2s, background-color 0.2s;
}

.choice:hover {
	border-color: var(--text-faint);
}

.choice:has(input:checked) {
	border-color: var(--accent);
}

.choice:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.choicesStacked {
	flex-direction: column;
	flex-wrap: nowrap;
}

/* Dialog: a card over a dimmed page --------------------------------------- */

.dialog {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(7,6,26,0.82);
}

.dialog.isOpen {
	display: flex;
}

.dialogCard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: clamp(24px, 5vw, 36px);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: var(--ink-850);
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.dialogCentre {
	align-items: center;
	text-align: center;
}

.dialogCard img {
	border-radius: var(--radius-thumb);
}

.site .dialogClose {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted);
	font-size: 24px;
	cursor: pointer;
}

.spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--line-strong);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Google sign-in button ---------------------------------------------------- */

.site .buttonGoogle {
	width: 100%;
	background: var(--white);
	color: #1f1f1f;
	font-weight: 500;
}

.site .buttonGoogle:hover {
	background: #ece9f7;
	color: #1f1f1f;
}

.divider {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--text-faint);
}

.divider::before,
.divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line-strong);
}


/* ==========================================================================
   5 Pages
   ========================================================================== */


/* Homepage ----------------------------------------------------------------- */

.homeHero {
	min-height: min(100svh, 900px);
}

/* Centred like the film, whose first frame the still is, so nothing moves when it fades in */
.homeHero .heroMedia img {
	object-position: 50% 50%;
}

.pathCard {
	min-height: clamp(420px, 52vw, 580px);
}

/* The three paths stay one per row until there is room for all three.
   One per row, the card is wide and short, so its tall photo keeps its top: her face is there. */
@media (min-width: 600px) {
	.cols3.pathCards {
		grid-template-columns: minmax(0, 1fr);
	}

	.pathCard > picture > img {
		object-position: 50% 0;
	}
}

@media (min-width: 900px) {
	.cols3.pathCards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pathCard > picture > img {
		object-position: 50% 50%;
	}
}

.pathBlurb {
	color: var(--text-soft);
}

.teachGrid {
	display: grid;
	gap: 40px;
}

.testimonials {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* Every slide in one grid cell: the band is as tall as the longest quote and never jumps, and a shorter quote sits in the middle of it */
.testimonialSlides {
	display: grid;
	width: 100%;
	touch-action: pan-y;
}

.testimonial {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s, visibility 0.6s;
}

.testimonial.isActive {
	opacity: 1;
	visibility: visible;
}

.testimonialDots {
	display: flex;
	gap: 2px;
}

.site .testimonialDot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.testimonialDot span {
	display: block;
	width: 12px;
	height: 4px;
	border-radius: 4px;
	background: var(--line-strong);
	transition: width 0.3s, background-color 0.3s;
}

.testimonialDot:hover span {
	background: var(--text-faint);
}

.testimonialDot[aria-current] span {
	width: 28px;
	background: var(--accent);
}

.guidesTeaser {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {
	.teachGrid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 56px;
	}

	.guidesTeaser {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 48px;
	}
}


/* Course path pages --------------------------------------------------------- */

.coursesHero {
	min-height: min(88svh, 720px);
}

.pathEyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.pathEyebrow img {
	height: 32px;
	width: auto;
}

.pathIntro {
	max-width: 720px;
	color: #e2dcf5;
}

.ladderNote {
	max-width: 420px;
}

.levelCards {
	display: grid;
	gap: 20px;
}

.levelCard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: var(--ink-850);
	overflow: hidden;
}

.levelCard.isFeatured {
	border-color: var(--accent);
	background: var(--ink-800);
}

.levelCardHead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 24px 20px;
	border-bottom: 1px solid var(--line);
}

.levelCode {
	align-self: flex-start;
	padding: 2px 12px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 13px;
	font-weight: 600;
}

.site .levelName {
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.2;
}

.levelLine {
	font-size: 15px;
	color: var(--text-muted);
}

.levelSpecs {
	flex: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 16px;
	margin: 0;
	padding: 20px 24px;
	font-size: 14px;
	line-height: 1.55;
}

.levelSpecs dt {
	color: var(--text-muted);
}

.levelSpecs dd {
	margin: 0;
	color: var(--text);
}

.levelSpecs sup {
	color: var(--accent);
}

.levelCardFoot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--line);
}

.levelFee {
	font-family: var(--font-head);
	font-size: 26px;
	color: var(--white);
}

.site .pathNotes {
	margin-top: 22px;
	font-size: 13px;
	color: var(--text-muted);
}

.pathNotes sup {
	color: var(--accent);
}

.pathWhy {
	gap: clamp(40px, 5vw, 56px);
}

.levelRows {
	border-top: 1px solid var(--line);
}

.levelRow {
	display: grid;
	gap: 12px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.levelRowName {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.levelRowCode {
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 300;
	line-height: 1;
	color: var(--accent);
}

.levelRowCode.isNext {
	color: var(--text-faint);
}

.site .levelRowName h3 {
	font-size: 19px;
	font-weight: 400;
}

.levelRowText {
	color: var(--text-soft);
}

.site .levelRowText p + p {
	margin-top: 12px;
}

@media (min-width: 600px) {
	.levelCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.levelRow {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 32px;
	}
}

@media (min-width: 900px) {
	.levelCards[data-count="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.levelCards[data-count="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* Courses overview, /courses ----------------------------------------------- */

.coursesPage .hero {
	min-height: min(88svh, 720px);
}

.pathCompare {
	gap: 20px;
}

.pathCompareCard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: var(--ink-850);
	overflow: hidden;
}

.pathCompareImage {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.pathCompareHead {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px 4px;
}

.pathCompareHead .pathEyebrow {
	min-height: 24px;
	gap: 12px;
}

.pathCompareHead .pathEyebrow img {
	height: 24px;
}

.pathCompareHead p {
	color: var(--text-soft);
}

.pathFrom {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-head);
	font-size: 15px;
	color: var(--text-muted);
}

.chooseGrid {
	gap: 40px;
}

.chooseGrid .sectionHead {
	margin-bottom: 0;
}

.goalCard {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.goalCard p {
	flex: 1;
}

.goalLabel {
	font-family: var(--font-head);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.site .goalCard h3 {
	margin-bottom: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
}

.startTableBox {
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: var(--ink-850);
}

/* Phone first: each course is a small card of labelled lines; a real table from 900px */
.startTable,
.startTable tbody,
.startTable tr,
.startTable th,
.startTable td {
	display: block;
}

.startTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.startTable thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.startTable tr {
	padding: 20px 22px;
	border-bottom: 1px solid var(--line);
}

.startTable tbody tr:last-child {
	border-bottom: 0;
}

.startTable tbody th {
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 17px;
	text-align: left;
}

.startTable td {
	display: grid;
	grid-template-columns: 9.5em minmax(0, 1fr);
	gap: 12px;
	padding: 3px 0;
	color: var(--text-soft);
}

.startTable td::before {
	content: attr(data-label);
	color: var(--text-muted);
}

.site .startTable tbody th a {
	color: var(--white);
	text-decoration: none;
}

.site .startTable tbody th a:hover {
	color: var(--accent);
}

.startTable td.startFee {
	font-family: var(--font-head);
	color: var(--white);
}

@media (min-width: 900px) {
	.startTable {
		display: table;
	}

	.startTable thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.startTable tbody {
		display: table-row-group;
	}

	.startTable tr {
		display: table-row;
		padding: 0;
		border-bottom: 0;
	}

	.startTable th,
	.startTable td {
		display: table-cell;
		padding: 18px 22px;
		border-bottom: 1px solid var(--line);
		text-align: left;
		vertical-align: top;
	}

	.startTable td::before {
		content: none;
	}

	.startTable tbody tr:last-child > * {
		border-bottom: 0;
	}

	.startTable thead th {
		font-family: var(--font-head);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.startTable tbody th {
		margin: 0;
		min-width: 170px;
		font-size: 15px;
	}

	.startTable td:nth-child(3) {
		white-space: nowrap;
	}

	.startTable td:nth-child(4) {
		min-width: 220px;
	}

	.site .startTable .startFee {
		text-align: right;
		white-space: nowrap;
	}
}

.startBadge {
	display: inline-block;
	justify-self: start;
	padding: 2px 12px;
	border-radius: var(--radius-pill);
	background: rgba(241,106,255,0.16);
	color: var(--accent-hover);
	font-size: 13px;
	white-space: nowrap;
}


/* About ------------------------------------------------------------------- */

.aboutHero .heroMedia img {
	object-position: 30% 40%;
}

.aboutHeroText {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 760px;
}

.aboutSchool {
	display: grid;
	gap: 32px;
}

.photoTall {
	height: clamp(380px, 55vw, 640px);
}

.aboutQuoteBand {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(110px, 16vw, 180px) 0;
}

.aboutQuoteBand > picture {
	display: contents;
}

.aboutQuoteBand > img,
.aboutQuoteBand > picture > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%;
}

.aboutQuoteBand::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11,10,36,0.92) 0%, rgba(11,10,36,0.6) 60%, rgba(11,10,36,0.25) 100%);
}

.aboutQuote {
	margin: 0;
	max-width: 640px;
}

.aboutQuote .quote {
	font-size: clamp(30px, 3.8vw, 52px);
	line-height: 1.2;
}

.aboutQuote figcaption {
	margin-top: 22px;
}

.aboutCard {
	min-height: clamp(520px, 60vw, 660px);
}

.aboutCardQuote {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 300;
	color: var(--white);
}

.teamGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 20px;
	list-style: none;
	padding: 0;
}

.person {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.person img,
.personInitial {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-thumb);
	margin-bottom: 6px;
}

.personInitial {
	background-image: none;
	font-family: var(--font-head);
	font-size: 56px;
	font-weight: 300;
	color: var(--accent);
}

.site .person h3 {
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 400;
}

.personRoles {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.personCredentials {
	font-size: 14px;
	font-weight: 500;
}

.personBio {
	font-size: 14px;
	color: var(--text-soft);
}

.personInstagram {
	font-size: 14px;
}

.site .aboutReadMore {
	margin-top: 32px;
	color: var(--text-muted);
}

.site .aboutReadMore a {
	font-weight: 500;
}

@media (min-width: 900px) {
	.aboutHero .heroBody {
		align-items: flex-end;
		justify-content: center;
	}

	.aboutSchool {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 64px;
	}

	.teamGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}


/* Events ------------------------------------------------------------------- */

.heroShadeDeep {
	background: linear-gradient(180deg, rgba(11,10,36,0.78) 0%, rgba(11,10,36,0.97) 100%);
}

.eventFilter {
	margin-bottom: 40px;
}

.site .eventShowcase {
	display: grid;
	margin-bottom: 40px;
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: var(--ink-850);
	overflow: hidden;
	color: var(--white);
}

.eventShowcase img,
.eventShowcase .placeholder {
	width: 100%;
	height: clamp(240px, 40vw, 460px);
	object-fit: cover;
}

.eventShowcaseBody {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	padding: clamp(24px, 4vw, 44px);
}

.eventShowcaseText {
	color: var(--text-soft);
}

.site .eventShowcase:hover {
	color: var(--white);
	border-color: var(--accent);
}

.eventGrid {
	row-gap: 36px;
}

.eventPlace {
	font-size: 14px;
	color: var(--text-muted);
}

.eventsOrganisers {
	display: grid;
	gap: 28px;
	align-items: center;
}

.eventHero {
	min-height: min(80svh, 680px);
}

.eventBodyGrid {
	display: grid;
	gap: 48px;
}

.site .eventStoryLead {
	margin-bottom: 22px;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.35;
	color: var(--white);
}

.eventAside {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-self: start;
}

.cardPlain {
	background: transparent;
}

.site .eventAsideTitle {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 400;
}

.cardPlain .buttons {
	margin-top: 16px;
}

.site .lineup {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
	list-style: none;
	padding: 0;
}

.lineup li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lineup img,
.lineupInitial {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.lineupInitial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink-800);
	border: 1px solid var(--line-strong);
	font-family: var(--font-head);
	color: var(--accent);
}

.lineup li > span {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	font-size: 14px;
}

.lineupName {
	font-family: var(--font-head);
	font-size: 16px;
	color: var(--white);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-thumb);
	transition: opacity 0.2s;
}

.gallery a:hover img {
	opacity: 0.85;
}

@media (min-width: 900px) {
	.site .eventShowcase {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.eventShowcase img,
	.eventShowcase .placeholder {
		height: 100%;
		min-height: 420px;
	}

	.eventsOrganisers {
		grid-template-columns: minmax(0, 1.4fr) auto;
	}

	.eventBodyGrid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 64px;
	}

	.gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* Guides, questions and glossary ------------------------------------------ */

.guidesSection {
	padding-top: clamp(48px, 6vw, 72px);
}

.guidesSectionHead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.guidesSectionHead p {
	margin-top: 8px;
	color: var(--text-muted);
}

.guideColumns {
	display: grid;
}

.guidesOther {
	margin-top: 40px;
}

.site .guideTitle {
	max-width: 980px;
	font-size: clamp(38px, 5.2vw, 76px);
	line-height: 1.04;
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	padding-top: 6px;
}

.bylineWho {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bylineWho img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.bylineWho > span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.bylineName {
	font-family: var(--font-head);
	color: var(--white);
}

.bylineMeta {
	font-size: 13px;
	color: var(--text-muted);
}

.guideCover {
	width: 100%;
	height: clamp(260px, 40vw, 520px);
	object-fit: cover;
	border-radius: 22px;
}

.guideSection {
	padding-top: clamp(40px, 5vw, 64px);
}

.guideArticle {
	min-width: 0;
	max-width: 760px;
}

.guideSources {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.site .guideSources h2 {
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 400;
}

.guideSources .prose {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-muted);
	overflow-wrap: anywhere;
}

.site .guideNote {
	margin-top: 32px;
	padding: 18px 22px;
	border: 1px solid var(--line-strong);
	border-radius: 14px;
	font-size: 14px;
	color: var(--text-muted);
}

.faqGroups {
	display: flex;
	flex-direction: column;
	gap: 56px;
	min-width: 0;
}

.site .faqGroupTitle {
	margin-bottom: 12px;
}

.letters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.site .letters a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	font-family: var(--font-head);
	color: var(--white);
}

.site .letters a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.glossary {
	display: grid;
	margin: 0;
	column-gap: 56px;
}

.glossaryTerm {
	padding: 24px 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: 20px;
}

.glossaryTerm dt {
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 22px;
	color: var(--white);
}

.glossaryTerm dd {
	margin: 0;
	font-size: 16px;
	color: var(--text-soft);
}

@media (min-width: 900px) {
	.guideColumns,
	.glossary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
	}
}


/* Legal pages --------------------------------------------------------------- */

.legal {
	min-width: 0;
	max-width: 780px;
	font-size: 16px;
}

.site .legal h2 {
	scroll-margin-top: 20px;
}

.site .legal ul {
	list-style: none;
	padding: 0;
}

.legal li > strong:first-child {
	display: inline-block;
	min-width: 44px;
	color: var(--accent);
	font-weight: 500;
}

/* The plain-words summary under each part */
.site .legal h3 {
	margin-top: 22px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--accent);
}

.site .legal h3 + p {
	margin-top: 8px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--ink-850);
	color: var(--text);
}

.legalSwitch {
	margin-bottom: 6px;
}

/* Privacy Policy: the visitor's cookie choice, which can be changed in place */
.legal .legalChoice {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0;
	transition: border-color 0.3s;
}

.legal .legalChoice.isSaved {
	border-color: var(--accent);
}

@media (max-width: 640px) {
	.legal table {
		font-size: 14px;
	}

	.legal th,
	.legal td {
		padding: 8px 6px;
	}
}


/* Sign-in card pages (layouts.auth) --------------------------------------- */

.authShell {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 32px 16px 48px;
}

.authBg {
	position: fixed;
	inset: 0;
	z-index: -1;
}

.authBg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 40%;
}

.authBg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,10,36,0.84) 0%, rgba(11,10,36,0.94) 100%);
}

.site .authBrand {
	display: flex;
	align-items: center;
	margin-bottom: 28px;
	color: var(--white);
}

.authBrand img {
	width: 52px;
	height: 42px;
	object-fit: contain;
}

.authCard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 460px;
	padding: clamp(24px, 6vw, 36px);
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: rgba(17,14,48,0.92);
	box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

.authCard form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site .authCard h1 {
	font-size: clamp(30px, 7vw, 36px);
	line-height: 1.1;
}

.authLead {
	color: var(--text-soft);
	font-size: 15px;
}

.authRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.authRow .check {
	min-height: 44px;
	align-items: center;
}

.authRow .check input {
	margin-top: 0;
}

.authRow a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
}

.authFoot {
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
}

.authFoot a {
	display: inline-block;
	padding: 10px 2px;
	font-weight: 500;
}

.site .authBack {
	margin-top: 22px;
	font-size: 14px;
}

.authBack a {
	display: inline-block;
	padding: 10px 4px;
}

.authCard .button {
	width: 100%;
}

.authIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: var(--ink-800);
	color: var(--accent);
}

.authWho {
	display: flex;
	align-items: center;
	gap: 14px;
	line-height: 1.4;
}

.authWho span span {
	display: block;
	font-size: 13px;
	color: var(--text-muted);
}

.googleMark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--white);
	flex-shrink: 0;
}

/* Registration and checkout ------------------------------------------------ */

.checkoutLayout {
	display: grid;
	gap: 32px;
	align-items: start;
}

.checkoutForm {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.formSection {
	display: grid;
	gap: 16px;
	padding: clamp(22px, 4vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--ink-850);
}

.site .formSection h2 {
	font-size: var(--step-4);
	font-weight: 400;
	line-height: 1.25;
}

.formSectionHead {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.formNote {
	font-size: 13px;
	color: var(--text-faint);
}

.consentList {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.consentList .check {
	font-size: 14px;
	color: var(--text-soft);
}

.guardianBlock {
	display: grid;
	gap: 16px;
	margin-top: 6px;
	padding: 18px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-thumb);
	background: var(--ink-900);
}

.checkoutSubmit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.checkoutSubmit p {
	font-size: 13px;
	color: var(--text-faint);
}

.courseSummary {
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	background: var(--ink-850);
}

.courseSummary > img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.courseSummaryBody {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
}

.site .courseSummary h2 {
	font-size: var(--step-4);
	font-weight: 400;
	line-height: 1.25;
}

.site .courseSummary h3 {
	margin-top: 6px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}

.courseSummary p,
.courseSummary li {
	font-size: 14px;
	color: var(--text-soft);
}

.specList {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
}

.specList dt {
	color: var(--text-faint);
}

.specList dd {
	margin: 0;
	color: var(--text);
}

.feeTotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--text-soft);
}

.feeTotal strong {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 300;
}

.courseTerms {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.receiptTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.receiptTable th,
.receiptTable td {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.receiptTable th {
	font-weight: 400;
	color: var(--text-faint);
}

.receiptTable .amount {
	text-align: right;
	white-space: nowrap;
	padding-left: 16px;
}

.receiptTable tfoot td {
	border-bottom: 0;
	font-weight: 600;
	color: var(--white);
}

.summaryPage .sectionTight .wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: calc(880px + 2 * var(--gutter));
}

.summaryPage .specList {
	font-size: 15px;
}

@media (min-width: 900px) {
	.checkoutLayout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 40px;
	}

	.courseSummary {
		position: sticky;
		top: 24px;
	}

	.specList {
		grid-template-columns: 180px 1fr;
	}

	.courseSummary .specList {
		grid-template-columns: auto 1fr;
	}
}

/* The student account (layouts.account) ------------------------------------ */

.accountHead {
	padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
	border-bottom: 1px solid var(--line);
	background: radial-gradient(ellipse at 20% 0%, #2a1d63, var(--ink-900) 70%);
}

.accountHead .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.accountHead form {
	display: inline;
}

.site .accountSignOut {
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.site .accountSignOut:hover {
	color: var(--white);
}

.accountBody {
	padding: clamp(32px, 5vw, 48px) 0 var(--section);
}

.accountBody .notice {
	margin-bottom: 24px;
}

.accountGrid {
	display: grid;
	gap: 24px;
	align-items: start;
}

.accountMain {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.accountNarrow {
	max-width: 760px;
}

.accountNarrower {
	max-width: 520px;
}

.site a.linkCard {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-thumb);
	background: var(--ink-850);
	color: var(--text);
}

.site a.linkCard:hover {
	border-color: var(--accent);
	color: var(--text);
}

.linkCard strong {
	font-weight: 500;
}

.linkCard span {
	font-size: 14px;
	color: var(--text-muted);
}

.linkCards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.newsList {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.newsList li {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-field);
	background: var(--ink-900);
}

.newsList h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.newsList p {
	font-size: 14px;
	color: var(--text-soft);
}

.linkedService {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-field);
	background: var(--ink-900);
}

.linkedService > span {
	display: flex;
	align-items: center;
	gap: 14px;
	line-height: 1.4;
}

.linkedService small {
	display: block;
	font-size: 13px;
	color: var(--text-faint);
}

.fieldHint {
	font-size: 13px;
	color: var(--text-faint);
}

.fieldHint[data-kind="error"] {
	color: #ff8fa3;
}

@media (min-width: 900px) {
	.accountGrid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 32px;
	}
}

/* Error pages --------------------------------------------------------------- */

.errorHero {
	min-height: min(100svh, 720px);
}

.errorHero .heroShade {
	background: linear-gradient(180deg, rgba(11,10,36,0.7) 0%, rgba(11,10,36,0.95) 100%);
}

.errorHero .heroBody {
	justify-content: center;
}

.errorHero .heroBody .lead {
	max-width: 540px;
}

@media (min-width: 900px) {
	.errorHero .heroShade {
		background: linear-gradient(90deg, rgba(11,10,36,0.95) 0%, rgba(11,10,36,0.6) 60%, rgba(11,10,36,0.3) 100%);
	}
}


/* Documents: receipts, credit notes and quotations (docs/DOCUMENTS.md) ---- */
/* The paper is drawn by documents/paper; documents/pdf repeats these rules for dompdf. */

body.docPage {
	background: radial-gradient(ellipse at 20% 0%, #2a1d63, var(--ink-900) 60%) fixed var(--ink-900);
}

.docShell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 24px 16px 48px;
}

.docBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 820px;
	margin-bottom: 18px;
}

.docBar img {
	width: 52px;
	height: 42px;
	object-fit: contain;
}

.docPaper {
	width: 100%;
	max-width: 820px;
	padding: clamp(22px, 6vw, 56px);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 30px 60px rgba(0,0,0,0.35);
	color: #1d1838;
	font-size: 15px;
	line-height: 1.6;
}

.site .docPaper strong {
	color: #1d1838;
	font-weight: 600;
}

.site .docPaper p {
	margin: 0;
}

.docPaper table {
	width: 100%;
	border-collapse: collapse;
}

.docHead {
	border-bottom: 2px solid var(--magenta);
}

.docHead td {
	display: block;
	padding-bottom: 22px;
	vertical-align: top;
}

.docLogo {
	width: 64px;
	height: 52px;
	margin-bottom: 14px;
	object-fit: contain;
	object-position: left;
}

.site .docBiz {
	font-size: 13px;
	color: #5b5578;
}

.docStatus {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	color: #ffffff;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.site .docKind {
	margin: 10px 0 4px;
	font-family: var(--font-head);
	font-size: clamp(32px, 6vw, 40px);
	font-weight: 300;
	line-height: 1.05;
	color: #1d1838;
}

.site .docLines {
	font-size: 14px;
	color: #5b5578;
}

.docTo {
	padding: 24px 0;
}

.site .docTo p {
	font-size: 14px;
	color: #5b5578;
}

.docLabel {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8f88a8;
}

.docItems th {
	padding: 0;
	border-bottom: 1px solid #e6e2f0;
	text-align: left;
	font-weight: 400;
}

.docItems td {
	padding: 14px 0;
	border-bottom: 1px solid #e6e2f0;
	vertical-align: top;
}

.docPaper .docAmount {
	padding-left: 16px;
	text-align: right;
	white-space: nowrap;
}

.docItemName {
	font-weight: 500;
}

.docItemDesc {
	font-size: 13px;
	color: #5b5578;
}

.docPaper .docTotals {
	width: 100%;
	margin: 12px 0 0 auto;
	color: #5b5578;
}

.docTotals td {
	padding: 6px 0;
}

.docTotal-discount td {
	color: var(--magenta);
}

.docTotal-total td {
	padding-top: 12px;
	border-top: 2px solid #1d1838;
	font-size: 18px;
	font-weight: 600;
	color: #1d1838;
}

.docBlock {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e6e2f0;
}

.site .docBlock p {
	font-size: 14px;
	color: #5b5578;
}

.docSmall {
	font-size: 12px;
	color: #8f88a8;
}

.site .docFoot {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid #e6e2f0;
	font-size: 12px;
	color: #8f88a8;
}

.site .docPageFoot {
	margin-top: 22px;
	font-size: 13px;
	color: var(--text-muted);
}

@media (min-width: 600px) {
	.docHead td {
		display: table-cell;
	}

	.docHead .docMeta {
		text-align: right;
	}

	.docPaper .docTotals {
		width: 320px;
	}
}

@media print {
	body.docPage {
		background: #ffffff;
	}

	.docShell {
		padding: 0;
	}

	.docBar,
	.docPageFoot {
		display: none;
	}

	.docPaper {
		max-width: none;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
	}
}


/* Lesson videos: a student's download page (docs/VIDEOS.md), in the documents' shell ---- */

.site .videoPaper h1 {
	margin: 6px 0 14px;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(28px, 6vw, 40px);
	line-height: 1.15;
	color: #1d1838;
}

.site .videoPaper .eyebrow {
	color: var(--magenta);
}

.site .videoPaper .videoLead,
.site .videoPaper .videoNote {
	margin: 0 0 16px;
	color: #3d3759;
}

.site .videoPaper a:not(.button) {
	color: var(--magenta);
}

.site .videoList {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e6e2f0;
}

.site .videoList li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 14px 0;
	border-bottom: 1px solid #e6e2f0;
}

.videoName {
	flex: 1 1 0;
	min-width: 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.videoSize {
	color: #8f88a8;
	font-size: 14px;
}

.videoUntil {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: #8f88a8;
}

.videoAll {
	margin-top: 22px;
}

/* On the white paper the accent pink is too light: the deep magenta instead */
.site .videoPaper .buttonOutline {
	border-color: var(--magenta);
	color: var(--magenta);
}

.site .videoPaper .buttonOutline:hover {
	background: rgba(170,45,152,0.08);
	color: var(--magenta);
}

.site .videoPaper .buttonPrimary {
	background: var(--magenta);
	color: #ffffff;
}

.site .videoPaper .buttonPrimary:hover {
	background: #8f2380;
	color: #ffffff;
}

.site .videoAll p,
.site .videoPaper .videoSmall {
	margin: 10px 0 0;
	font-size: 13px;
	color: #8f88a8;
}

.site .videoPaper .videoSmall {
	margin-top: 26px;
}

.site .videoPhoneTip {
	margin: 20px 0 0;
	font-size: 14px;
	color: #5b5578;
}

.site .videoOneTitle {
	display: none;
}

/* On a computer the zip comes first, as the main button, and single files are quiet links below it */
@media (min-width: 900px) {
	.site .videoFiles {
		display: flex;
		flex-direction: column;
	}

	.site .videoFiles .videoAll {
		order: -1;
		margin-top: 8px;
	}

	.site .videoPhoneTip {
		display: none;
	}

	.site .videoOneTitle {
		display: block;
		margin: 30px 0 0;
		font-family: var(--font-head);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #8f88a8;
	}

	.site .videoOneTitle + .videoList {
		margin-top: 10px;
	}

	.site .videoOneTitle + .videoList .button {
		padding: 0;
		border: 0;
		background: none;
		color: var(--magenta);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.site .videoOneTitle + .videoList .button:hover {
		background: none;
		color: #8f2380;
	}
}


/* ==========================================================================
   6 Utilities
   ========================================================================== */

.visuallyHidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skipLink {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
}

.site .skipLink:focus {
	top: 16px;
	color: var(--on-accent);
}

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

	.site *,
	.site *::before,
	.site *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}