/*
 * Shasti Sunrise — front-end design system.
 *
 * Layout order matches the page: tokens, base, utilities, header, hero,
 * featured video, bands, forms, editorial pages, footer, then the responsive
 * rules that apply across all of them.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--sunrise: #f14917;
	--sunrise-deep: #d63a0c;
	--cobalt: #245ee9;
	--cobalt-deep: #1b3fa8;
	--ink: #15171e;
	--dawn: #fbf6ee;
	--dawn-2: #f5ecdd;
	--sky: #ecf1ff;
	--deep: #0c1a3c;
	--deep-2: #142450;
	--line: #e4dacb;
	--line-dark: #2a3563;
	--muted: #5c5648;
	--on-deep: #eaf0ff;
	--on-deep-muted: #c1cdec;

	--radius: 18px;
	--radius-sm: 10px;
	--radius-lg: 26px;
	--maxw: 1180px;
	--gutter: 26px;

	--shadow-card: 0 24px 50px -34px rgba(20, 30, 60, 0.35);
	--shadow-lift: 0 30px 60px -30px rgba(20, 30, 60, 0.5);
	--shadow-sun: 0 8px 20px -8px rgba(241, 73, 23, 0.6);

	/* --header-logo-set comes from the Customizer (see shasti_inline_vars).
	   --header-logo-h applies the responsive ceiling on top of it. */
	--header-logo-set: 130px;
	--header-logo-h: var(--header-logo-set);

	/* Both faces are chosen in Customize -> Site Options -> Typography and
	   arrive from shasti_inline_vars(). These defaults mirror the schema so the
	   page is still set correctly if that inline block ever goes missing. */
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------- base */

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

html {
	scroll-behavior: smooth;
	/* Clear the sticky header so anchors do not land underneath it. */
	scroll-padding-top: calc(var(--header-logo-h) + 40px);
}

body {
	margin: 0;
	background: var(--dawn);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.005em;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

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

button {
	font: inherit;
	color: inherit;
}

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

.tag-band :focus-visible {
	outline-color: #ffd7a6;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------- utilities */

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

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

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 12px 18px;
	background: var(--ink);
	color: #fff;
	border-radius: 10px;
	font-weight: 700;
}

.eyebrow {
	display: block;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cobalt);
}

.tag-band .eyebrow {
	color: #9fc0ff;
}

/* ----------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.2;
	padding: 13px 22px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
		color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-sm {
	font-size: 14.5px;
	padding: 10px 17px;
}

.btn-sun {
	background: var(--sunrise);
	color: #fff;
	box-shadow: var(--shadow-sun);
}

.btn-sun:hover {
	background: var(--sunrise-deep);
	box-shadow: 0 12px 26px -8px rgba(241, 73, 23, 0.7);
}

.btn-blue {
	background: var(--cobalt);
	color: #fff;
}

.btn-blue:hover {
	background: var(--cobalt-deep);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: currentColor;
}

.btn-ghost:hover {
	background: var(--ink);
	color: var(--dawn);
}

.btn-ghost-light {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.btn-ghost-light:hover {
	background: #fff;
	color: var(--deep);
}

/* ------------------------------------------------------------------ ribbon */

.ribbon {
	background: var(--deep);
	color: #dfe6f7;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	padding: 8px 0;
}

.ribbon a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(251, 246, 238, 0.9);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}

.admin-bar .site-header {
	top: 32px;
}

/* The two roles: same markup, same styling, so neither outranks the other. */
.nav-affils {
	display: flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	padding-left: 4px;
	border-left: 1px solid var(--line);
}

.nav-affils > li + li {
	border-left: 1px solid var(--line);
}

.affil-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	height: 100%;
	max-width: 152px;
	padding: 5px 12px;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

a.affil-link:hover {
	background: rgba(36, 94, 233, 0.09);
	color: var(--cobalt-deep);
}

.affil-role {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sunrise-deep);
}

.affil-org {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.affil-logo-img {
	height: 30px;
	width: auto;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: calc(var(--header-logo-h) + 22px);
	padding-top: 8px;
	padding-bottom: 8px;
}

.brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	height: var(--header-logo-h);
	width: auto;
	max-width: none;
}

.menu {
	display: flex;
	align-items: center;
	gap: 18px;
	align-self: stretch;
}

.menu-list {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
}

.menu-list a {
	position: relative;
	display: inline-block;
	padding: 4px 0;
	font-weight: 600;
	font-size: 15.5px;
	white-space: nowrap;
}

.menu-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background: var(--sunrise);
	transition: right 0.22s ease;
}

/* Hover only. Anchor links to sections of the page the visitor is already on
   would otherwise all read as "current" and sit there permanently underlined. */
.menu-list a:hover::after,
.menu-list a:focus-visible::after {
	right: 0;
}

.menu-list .sub-menu {
	display: none;
}

.menu-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Flat in the header: the sunrise glow belongs on the big in-page buttons,
   not on a small one sitting against the header's own border. */
.menu-actions .btn-sun,
.menu-actions .btn-sun:hover {
	box-shadow: none;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.burger span {
	display: block;
	width: 24px;
	height: 2.4px;
	margin: 5px 0;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7.4px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7.4px) rotate(-45deg);
}

/* -------------------------------------------------------------------- hero */

.hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 0;
	background: var(--sky);
}

.sun {
	position: absolute;
	right: -160px;
	top: -180px;
	width: 720px;
	height: 720px;
	pointer-events: none;
	z-index: 0;
}

.sun .glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 55%,
		rgba(241, 73, 23, 0.24),
		rgba(241, 73, 23, 0.06) 42%,
		transparent 62%
	);
}

.rays {
	position: absolute;
	inset: 0;
	animation: shasti-spin 140s linear infinite;
}

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

.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
	padding-bottom: 20px;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 9px;
	margin: 0 0 20px;
	padding: 7px 15px;
	background: var(--sky);
	border: 1px solid #d6e0ff;
	border-radius: 999px;
	color: var(--cobalt-deep);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.hero-eyebrow b {
	color: var(--cobalt);
}

.dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sunrise);
	display: inline-block;
}

.hero h1 {
	font-size: clamp(40px, 5.6vw, 66px);
	letter-spacing: -0.01em;
}

.hero h1 em,
.tag-band h2 em,
.band h2 em,
.video-band h2 em {
	font-style: italic;
}

.hero h1 em {
	color: var(--sunrise);
}

.hero .lede {
	max-width: 520px;
	margin: 18px 0 0;
	font-size: clamp(16.5px, 1.8vw, 19.5px);
	color: var(--muted);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 26px;
}

.hero-photo {
	position: relative;
}

.hero-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 22%;
	border: 5px solid #fff;
	border-radius: 22px;
	box-shadow: var(--shadow-lift);
}

.hero-photo .chip {
	position: absolute;
	left: -14px;
	bottom: 22px;
	margin: 0;
	padding: 11px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 16px 30px -18px rgba(20, 30, 60, 0.5);
	font-size: 13.5px;
	font-weight: 600;
	max-width: 220px;
}

.hero-photo .chip strong {
	display: block;
	color: var(--cobalt);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero-signup {
	position: relative;
	z-index: 2;
	margin-top: 26px;
	scroll-margin-top: 130px;
}

.water {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 30px;
}

/* ----------------------------------------------------------- featured video */

/*
 * The band's ground is an editor's choice (Customize -> Featured Video -> Band
 * colour), and one of the options is light. So everything inside the band reads
 * its colours from these properties rather than naming a colour of its own, and
 * a variant only has to restate the handful it changes.
 */
.video-band {
	--band-bg: linear-gradient(170deg, var(--cobalt-deep) 0%, #2a5fd6 100%);
	--band-fg: var(--on-deep);
	--band-fg-strong: #fff;
	--band-muted: var(--on-deep-muted);
	--band-eyebrow: #9fc0ff;
	--band-accent: #ffd7a6;
	--band-line: rgba(255, 255, 255, 0.09);
	--band-chip: rgba(255, 255, 255, 0.05);
	--band-chip-hover: rgba(255, 255, 255, 0.1);
	--band-control-line: rgba(255, 255, 255, 0.28);
	--band-frame-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
	--band-focus: #ffd7a6;

	background: var(--band-bg);
	color: var(--band-fg);
}

/* The original ground: near-black, which is what left the player's own black
   edge with nothing to read against. */
.video-bg-midnight {
	--band-bg: var(--deep);
}

.video-bg-indigo {
	--band-bg: linear-gradient(170deg, #16255a 0%, #26376f 100%);
}

.video-bg-cobalt {
	--band-bg: linear-gradient(170deg, var(--cobalt-deep) 0%, #2a5fd6 100%);
	--band-eyebrow: #d7e2ff;
	--band-muted: #dfe9ff;
}

/* The band above the cobalt tagline strip, so the two do not run together as
   one undifferentiated slab of blue: a hairline seam at the foot of this one
   is enough to read them as separate bands. */
.video-bg-cobalt {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* The two light grounds flip every colour in the band; the player's black frame
   reads hardest against these. */
.video-bg-sky,
.video-bg-cream {
	--band-fg: var(--ink);
	--band-fg-strong: var(--ink);
	--band-muted: var(--muted);
	--band-eyebrow: var(--cobalt);
	--band-accent: var(--sunrise);
	--band-line: rgba(12, 26, 60, 0.13);
	--band-chip: rgba(12, 26, 60, 0.035);
	--band-chip-hover: rgba(12, 26, 60, 0.08);
	--band-control-line: rgba(12, 26, 60, 0.22);
	--band-frame-shadow: var(--shadow-lift);
	--band-focus: var(--cobalt);
}

.video-bg-sky {
	--band-bg: var(--sky);
}

.video-bg-cream {
	--band-bg: var(--dawn-2);
}

.video-band :focus-visible {
	outline-color: var(--band-focus);
}

.video-band .eyebrow {
	color: var(--band-eyebrow);
}

.video-band .sec-head p {
	color: var(--band-muted);
}

.video-band h2 {
	color: var(--band-fg-strong);
}

.video-band h2 em {
	color: var(--band-accent);
}

.yt {
	max-width: 1060px;
	margin: 0 auto;
}

.yt-stage-wrap {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
	box-shadow: var(--band-frame-shadow);
	border: 1px solid var(--band-line);
}

.yt-stage {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}

.yt-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease, opacity 0.3s ease;
}

.yt-stage:hover .yt-poster {
	transform: scale(1.03);
}

.yt-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(12, 26, 60, 0.15) 0%,
		rgba(12, 26, 60, 0) 38%,
		rgba(12, 26, 60, 0.82) 100%
	);
}

.yt-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sunrise);
	color: #fff;
	box-shadow: 0 18px 40px -12px rgba(241, 73, 23, 0.75);
	transition: transform 0.2s ease, background 0.2s ease;
}

.yt-play svg {
	margin-left: 5px;
}

.yt-stage:hover .yt-play {
	transform: translate(-50%, -50%) scale(1.07);
	background: var(--sunrise-deep);
}

.yt-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 30px;
	text-align: left;
	color: #fff;
}

.yt-caption-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(19px, 2.3vw, 27px);
	line-height: 1.15;
	text-wrap: balance;
}

.yt-caption-meta {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffd7a6;
}

.yt-frame {
	position: absolute;
	inset: 0;
	border: 0;
}

.yt-frame iframe,
.yt-noscript {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	aspect-ratio: 16 / 9;
}

.yt-rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 34px 0 14px;
}

.yt-rail-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--band-eyebrow);
}

/* The arrows only exist once the rail is wider than its container; theme.js
   sets .has-overflow after measuring. */
.yt-rail-nav {
	display: none;
	gap: 8px;
}

.yt-carousel.has-overflow .yt-rail-nav {
	display: flex;
}

.yt-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--band-control-line);
	background: transparent;
	color: var(--band-fg-strong);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.yt-nav:hover:not(:disabled) {
	background: var(--band-chip-hover);
	border-color: var(--band-fg-strong);
}

.yt-nav:disabled {
	opacity: 0.32;
	cursor: default;
}

.yt-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(232px, 1fr);
	gap: 14px;
	list-style: none;
	overflow-x: auto;
	padding-bottom: 10px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--band-control-line) transparent;
}

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

.yt-rail::-webkit-scrollbar {
	height: 8px;
}

.yt-rail::-webkit-scrollbar-thumb {
	background: var(--band-control-line);
	border-radius: 999px;
}

.yt-rail > li {
	scroll-snap-align: start;
}

.yt-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 8px;
	text-align: left;
	background: var(--band-chip);
	border: 1px solid var(--band-line);
	border-radius: 14px;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.yt-item:hover {
	background: var(--band-chip-hover);
	transform: translateY(-2px);
}

.yt-item.is-active {
	border-color: var(--sunrise);
	background: rgba(241, 73, 23, 0.14);
}

.yt-item-thumb {
	position: relative;
	display: block;
	border-radius: 9px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
}

.yt-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yt-item-play {
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(12, 26, 60, 0.78);
	color: #fff;
}

.yt-item-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 0 4px 4px;
}

.yt-item-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--band-fg-strong);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yt-item-meta {
	font-size: 12px;
	color: var(--band-muted);
}

.yt-foot {
	margin: 22px 0 0;
	text-align: center;
}

.yt-foot a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15px;
	color: var(--band-fg-strong);
	padding: 11px 20px;
	border: 1.5px solid var(--band-control-line);
	border-radius: 999px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.yt-foot a:hover {
	background: var(--band-chip-hover);
	border-color: var(--band-fg-strong);
}

/* ------------------------------------------------------------------- bands */

.block {
	padding: 72px 0;
}

.tint {
	background: var(--sky);
}

.sec-head {
	max-width: 680px;
	margin-bottom: 34px;
}

.sec-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sec-head h2 {
	margin-top: 10px;
	font-size: clamp(28px, 3.8vw, 44px);
	text-wrap: balance;
}

.sec-head p {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 18px;
}

/* Tagline band */
.tag-band {
	background: linear-gradient(120deg, var(--cobalt-deep), var(--cobalt));
	color: #fff;
	text-align: center;
	padding: 52px 0;
}

.tag-band h2 {
	/* theme.json paints every heading ink, and that lands on the element itself,
	   so the band's own white cannot reach it by inheritance. .band h2 already
	   restates it for the closing call to action; this band needs the same. */
	color: #fff;
	font-size: clamp(26px, 4vw, 46px);
	text-wrap: balance;
}

.tag-band h2 em {
	color: #ffd7a6;
}

.tag-band p {
	max-width: 620px;
	margin: 14px auto 0;
	color: #dbe6ff;
}

/* Record */
.stats {
	/* Flex rather than a fixed four-column grid: the section can carry anywhere
	   from one to four figures, and the cards should divide the row they are on
	   instead of leaving empty tracks at the right. */
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
}

.stat {
	position: relative;
	flex: 1 1 230px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.stat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--sunrise);
}

.stat-n {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 40px;
	line-height: 1;
	color: var(--cobalt-deep);
}

.stat-l {
	display: block;
	margin-top: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--muted);
}

.record-note {
	margin: 18px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--muted);
}

/* About */
.about {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.about-photo {
	position: relative;
}

.about-photo img {
	width: 100%;
	border: 5px solid #fff;
	border-radius: 20px;
	box-shadow: 0 26px 50px -28px rgba(20, 30, 60, 0.5);
}

.about-badge {
	position: absolute;
	right: -12px;
	top: -12px;
	width: 104px;
	height: 104px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: var(--sunrise);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 14px 26px -12px rgba(241, 73, 23, 0.7);
	transform: rotate(-8deg);
}

.about h2 {
	margin-top: 10px;
	font-size: clamp(28px, 3.6vw, 42px);
}

.about-body {
	margin-top: 14px;
	color: #3c3830;
	font-size: 16.5px;
}

.creds {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 6px;
	list-style: none;
}

.creds li {
	padding: 6px 13px;
	background: var(--dawn-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4436;
}

.role-note {
	margin-top: 18px;
	padding: 6px 0 6px 14px;
	border-left: 3px solid var(--cobalt);
	background: linear-gradient(90deg, rgba(36, 94, 233, 0.06), transparent);
	font-size: 14px;
	color: var(--muted);
}

.about-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* Bluesky */
.bsky-card {
	max-width: 1000px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 60px -40px rgba(20, 30, 60, 0.4);
}

.bsky-top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(120deg, rgba(36, 94, 233, 0.08), rgba(241, 73, 23, 0.05));
}

.bsky-avatar {
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 3px solid #fff;
	object-fit: cover;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.3);
}

.bsky-id {
	flex: 1;
	min-width: 0;
}

.bsky-name {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
}

.bsky-handle,
.bsky-stats {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var(--muted);
}

.bsky-stats b {
	color: var(--ink);
}

.bsky-follow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	background: #1185fe;
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.bsky-follow:hover {
	background: #0a6ede;
}

.bsky-feed {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.bpost {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
}

.bpost:nth-child(even) {
	border-right: none;
}

.bp-txt {
	font-size: 15px;
	line-height: 1.5;
	color: #26241d;
	overflow-wrap: anywhere;
}

.bp-txt a {
	color: var(--cobalt);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-tag {
	color: var(--cobalt-deep);
	font-weight: 600;
}

.bp-img {
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.bp-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 12.5px;
	color: var(--muted);
}

.bp-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.bp-time {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.bp-time:hover {
	color: var(--cobalt);
}

.bsky-empty {
	grid-column: 1 / -1;
	padding: 40px;
	text-align: center;
	color: var(--muted);
}

.bsky-foot {
	margin: 0;
	padding: 16px 24px;
	text-align: center;
	font-size: 13.5px;
	color: var(--muted);
}

.bsky-foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cobalt);
	font-weight: 600;
}

/* Gallery */
.gallery {
	columns: 4;
	column-gap: 14px;
}

.gallery figure {
	position: relative;
	margin: 0 0 14px;
	break-inside: avoid;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.gallery img {
	width: 100%;
	transition: transform 0.4s ease;
}

.gallery figure:hover img {
	transform: scale(1.05);
}

/* Get involved */
.paths {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.path {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.path h3 {
	font-size: 22px;
}

.path p {
	flex: 1;
	margin: 0;
	color: var(--muted);
	font-size: 15.5px;
}

.path .btn {
	align-self: flex-start;
}

/* Whose programme this is. Small, but it is the whole point of the line: a
   visitor should never have to guess whether a shift or a dollar is going to
   Shasti, to the state party, or to the DNC. */
.path-note {
	margin: 0;
	padding-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

.path-donate .path-note {
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 4px;
}

.amt {
	flex: 1 1 28%;
	padding: 10px 0;
	background: var(--dawn);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.amt:hover {
	border-color: var(--sunrise);
}

.amt.is-active {
	background: var(--sunrise);
	border-color: var(--sunrise);
	color: #fff;
}

/* Closing band */
.band {
	padding: 50px;
	background: var(--sky);
	color: var(--ink);
	border: 1px solid #d6e0ff;
	border-radius: var(--radius-lg);
	text-align: center;
	overflow: hidden;
}

.band-logo {
	margin-bottom: 26px;
}

.band-logo img {
	height: var(--band-logo-h, 190px);
	width: auto;
	margin: 0 auto;
}

.band h2 {
	color: var(--ink);
	font-size: clamp(28px, 4vw, 44px);
	text-wrap: balance;
}

.band h2 em {
	color: var(--sunrise);
}

.band p {
	max-width: 540px;
	margin: 14px auto 26px;
	color: var(--muted);
}

.band-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	justify-content: center;
}

/* ------------------------------------------------------------------- forms */

.signup {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.signup .field {
	flex: 1 1 150px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.signup .field-zip {
	flex: 0 1 120px;
}

.signup label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.signup .optional {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.signup input,
.signup textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	background: var(--dawn);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
}

.signup textarea {
	resize: vertical;
}

.signup input:focus,
.signup textarea:focus {
	background: #fff;
	border-color: var(--cobalt);
	outline: none;
	box-shadow: 0 0 0 3px rgba(36, 94, 233, 0.16);
}

.signup .is-invalid input,
.signup .is-invalid textarea {
	border-color: var(--sunrise);
	background: #fff5f1;
}

.signup .signup-submit {
	flex: 0 0 auto;
}

/* Honeypot: present for bots, gone for everyone else. */
.hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consent {
	margin: 12px 2px 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted);
}

.signup-thanks {
	padding: 10px 6px;
	text-align: center;
}

.signup-thanks h3 {
	font-size: 23px;
	color: var(--cobalt-deep);
}

.signup-thanks p {
	margin: 8px 0 0;
	color: var(--muted);
}

.signup-error {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #fff5f1;
	border: 1px solid var(--sunrise);
	border-radius: var(--radius-sm);
	color: var(--sunrise-deep);
	font-size: 14px;
	font-weight: 600;
}

.signup.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

/* Stacked variant, used on the speaking request page. */
.signup-stacked .signup-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}

.signup-stacked .field-email,
.signup-stacked .field-organization,
.signup-stacked .field-event_name,
.signup-stacked .field-message,
.signup-stacked .signup-submit {
	grid-column: 1 / -1;
}

.signup-stacked .field-zip {
	flex: initial;
}

.signup-stacked .signup-submit {
	justify-self: start;
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

.search-form input {
	flex: 1;
	padding: 12px 14px;
	font: inherit;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
}

/* ------------------------------------------------------- editorial pages */

.page-head {
	position: relative;
	overflow: hidden;
	padding: 54px 0 10px;
	background: linear-gradient(180deg, var(--dawn-2), var(--dawn));
}

/*
 * The rule under the title stops at the content column instead of running
 * edge to edge, so it reads as part of the page rather than as a band border.
 * It lives on the wrap, which also lifts the title clear of the sunburst.
 */
.page-head .wrap {
	position: relative;
	z-index: 1;
}

.page-head .wrap::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 16px;
	background: var(--line);
}

.page-head h1 {
	margin-top: 10px;
	font-size: clamp(32px, 5vw, 54px);
	max-width: 22ch;
	text-wrap: balance;
}

.page-head-lede {
	max-width: 62ch;
	margin: 16px 0 0;
	font-size: 19px;
	color: var(--muted);
}

.page-head-search {
	margin-top: 20px;
}

/* Posts and pages: the head shares the article column's left edge. */
.page-head-narrow .wrap {
	max-width: 760px;
}

/*
 * Meet Shasti repeats the front page's Meet Shasti band: sky behind the title
 * and the same sunburst that sits behind the hero, top right. The title and
 * the copy are one section, so the tint runs the length of the article with no
 * rule and no band edge between them.
 */
body.sky-head .single {
	position: relative;
	overflow: hidden;
	background: var(--sky);
}

body.sky-head .page-head {
	background: transparent;
}

body.sky-head .page-head .wrap::after {
	display: none;
}

/* Keep the copy above the rays; the head's own wrap is already lifted. */
body.sky-head .single > .block {
	position: relative;
	z-index: 1;
}

/*
 * Long-form posts read as a document: white paper, a ruled letterhead, and
 * numbered sections, closer to the memo PDF this content came from without
 * pretending to be a PDF viewer.
 */
body.single-post {
	background: #fff;
}

body.single-post .site-header {
	background: rgba(255, 255, 255, 0.92);
}

/* The memo letterhead keeps its own full-bleed rule; no inset hairline too. */
body.single-post .page-head {
	padding-bottom: 24px;
	background: #fff;
	border-bottom: 2px solid var(--ink);
}

body.single-post .page-head .wrap::after {
	display: none;
}

body.single-post .page-head .eyebrow {
	color: var(--sunrise-deep);
}

body.single-post .page-head h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	max-width: 20ch;
}

body.single-post .page-head-lede {
	font-size: 17.5px;
	color: #40453f;
}

body.single-post .prose {
	font-size: 17.5px;
	line-height: 1.72;
	color: #1d2027;
}

body.single-post .prose h2 {
	margin-top: 2em;
	padding-top: 0.7em;
	border-top: 1px solid var(--line);
	font-size: clamp(23px, 2.6vw, 29px);
}

body.single-post .prose h2:first-child {
	border-top: 0;
	padding-top: 0;
}

/* The memo header block: a letterhead rather than a tinted card. */
body.single-post .prose .wp-block-group.has-sky-background-color {
	background: #fff !important;
	border: 0;
	border-left: 4px solid var(--sunrise);
	border-radius: 0 !important;
	padding: 4px 0 4px 18px !important;
}

body.single-post .prose .wp-block-group.has-sky-background-color p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--muted);
}

body.single-post .prose .wp-block-group.has-sky-background-color strong {
	display: inline-block;
	min-width: 52px;
	color: var(--ink);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 12px;
}

body.single-post .prose blockquote {
	margin: 2em 0;
	padding: 18px 0 18px 24px;
	border-left-width: 4px;
	font-size: 24px;
}

body.single-post .prose ol,
body.single-post .prose ul {
	padding-left: 1.5em;
}

body.single-post .single-foot,
body.single-post .post-nav a {
	background: transparent;
}

body.single-post .post-nav a {
	background: #fff;
}

.page-head + .block,
.page-head + .single-media + .block {
	padding-top: 46px;
}

.single-media {
	margin-top: 34px;
}

.single-media img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.prose {
	max-width: 760px;
}

.prose > * {
	margin-bottom: 1.15em;
}

.prose h2 {
	margin: 1.8em 0 0.5em;
	font-size: clamp(25px, 3vw, 33px);
}

.prose h3 {
	margin: 1.6em 0 0.4em;
	font-size: 22px;
}

.prose h2:first-child,
.prose h3:first-child {
	margin-top: 0;
}

.prose a {
	color: var(--cobalt-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.prose a:hover {
	color: var(--sunrise);
}

.prose ul,
.prose ol {
	padding-left: 1.35em;
}

.prose li {
	margin-bottom: 0.4em;
}

.prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--cobalt);
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.35;
	color: var(--cobalt-deep);
}

.prose blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	color: var(--muted);
}

.prose img,
.prose figure img {
	border-radius: var(--radius);
}

.prose figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}

.prose hr,
.prose .wp-block-separator {
	height: 1px;
	margin: 2.4em 0;
	background: var(--line);
	border: 0;
}

.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;
}

.prose code,
.prose pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
}

.prose pre {
	padding: 18px;
	background: var(--dawn-2);
	border-radius: var(--radius-sm);
	overflow-x: auto;
}

/* Block editor alignment support inside prose columns. */
.prose .alignwide {
	width: min(var(--maxw), calc(100vw - var(--gutter) * 2));
	max-width: none;
	margin-left: calc(50% - min(var(--maxw), 100vw - var(--gutter) * 2) / 2);
}

.prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.prose .alignleft {
	float: left;
	margin: 0.4em 1.6em 1em 0;
	max-width: 46%;
}

.prose .alignright {
	float: right;
	margin: 0.4em 0 1em 1.6em;
	max-width: 46%;
}

.entry-content-wide > * {
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.entry-content-wide > .alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Post grid */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
}

.post-card-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.post-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.post-meta {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
}

.post-meta .sep {
	margin: 0 8px;
}

.post-card-title {
	font-size: 23px;
	line-height: 1.2;
}

.post-card-excerpt {
	flex: 1;
	margin: 0;
	color: var(--muted);
	font-size: 15.5px;
}

.post-card-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--cobalt-deep);
}

.post-card-more:hover {
	color: var(--sunrise);
}

.pagination {
	margin-top: 40px;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 3px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 600;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--cobalt);
	border-color: var(--cobalt);
	color: #fff;
}

.single-foot {
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--muted);
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 30px 0 50px;
}

.post-nav a {
	display: block;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 18px;
}

.post-nav .nav-label {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 5px;
}

.post-nav .nav-next {
	text-align: right;
}

/* Speaking page */
.speaking-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 46px;
	align-items: start;
}

/* The portrait leads the column. Floating it into the text was tried and the
   remaining channel was too narrow to read at this column width. */
.speaking-portrait {
	margin-bottom: 26px;
}

.speaking-portrait img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 22%;
	border: 5px solid #fff;
	border-radius: 18px;
	box-shadow: var(--shadow-card);
}

.speaking-copy .prose h2 {
	margin-top: 1.6em;
	padding-top: 0.6em;
	border-top: 1px solid var(--line);
	clear: both;
}

.speaking-copy .prose h3 {
	margin-top: 1.5em;
	font-size: 20px;
	color: var(--cobalt-deep);
}

.speaking-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	clear: both;
	margin-top: 38px;
}

.speaking-strip figure {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--line);
}

.speaking-strip img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.speaking-strip figure:hover img {
	transform: scale(1.05);
}

.speaking-strip-caption {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--muted);
}

.speaking-form {
	position: sticky;
	top: 140px;
	padding: 28px;
	background: var(--sky);
	border: 1px solid #d6e0ff;
	border-radius: var(--radius-lg);
}

.speaking-form h2 {
	font-size: 27px;
}

.speaking-form-note {
	margin: 10px 0 18px;
	color: var(--muted);
	font-size: 15px;
}

.speaking-form .signup {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Speaking page: trainings */
.trainings {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.trainings .sec-head {
	margin-bottom: 26px;
}

.trainings .sec-head h2 {
	font-size: clamp(25px, 3vw, 34px);
}

/*
 * One column, not two. Each training now carries a paragraph and a list of what
 * the session covers, and these cards sit in the narrow copy column beside the
 * invitation form, so a two-up grid left them cramped and orphaned the last one.
 */
.training-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	list-style: none;
}

.training {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-left: 4px solid var(--sunrise);
}

.training h3 {
	font-size: 19px;
}

.training p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

/*
 * The session's own title slide, above its heading.
 *
 * The three slides come from the client's deck and do not share an aspect ratio
 * (1.86, 2.43 and 1.99). They are shown at their native shape rather than
 * cropped to a common one, because every one of them is mostly type: a crop
 * tight enough to match them would cut a title or the state map in half.
 */
.training-slide {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.training-slide img {
	display: block;
	width: 100%;
	height: auto;
}

.training-points {
	margin: 2px 0 0;
	padding-left: 20px;
	list-style: disc;
	color: var(--muted);
	font-size: 15px;
}

.training-points li {
	margin-bottom: 5px;
}

.training-points li::marker {
	color: var(--sunrise);
}

.training-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--cobalt);
}

.training-link:hover {
	color: var(--cobalt-deep);
	text-decoration: underline;
}

/*
 * Preview font switcher.
 *
 * A preview-round control, not part of the design; it is switched off in the
 * Customizer before launch. Kept visually quiet and out of the way of the
 * page's own content.
 */
.fontsw {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 120;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: var(--font-body);
}

.fontsw-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 17px;
	background: var(--ink);
	color: var(--dawn);
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	box-shadow: var(--shadow-lift);
	transition: transform 0.15s ease, background 0.15s ease;
}

.fontsw-toggle:hover {
	transform: translateY(-2px);
	background: #000;
}

.fontsw-aa {
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1;
}

.fontsw-panel {
	width: min(310px, calc(100vw - 36px));
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

.fontsw-note {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

.fontsw-group {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.fontsw-group legend {
	padding: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cobalt);
}

.fontsw-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.fontsw-option:hover {
	background: var(--dawn);
}

.fontsw-option input {
	margin: 3px 0 0;
	accent-color: var(--sunrise);
	flex: none;
}

.fontsw-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fontsw-name {
	font-size: 18px;
	line-height: 1.2;
}

.fontsw-desc {
	font-size: 12px;
	line-height: 1.35;
	color: var(--muted);
}

.fontsw-reset {
	width: 100%;
	padding: 9px;
	background: transparent;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	cursor: pointer;
}

.fontsw-reset:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* Comments */
.comments {
	margin: 40px 0 60px;
}

.comment-list {
	list-style: none;
	margin: 20px 0;
}

.comment-list ol {
	list-style: none;
	padding-left: 26px;
}

.comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.error-404-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.no-results {
	padding: 30px 0 60px;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
	padding: 56px 0 30px;
	background: var(--dawn-2);
	color: var(--muted);
	border-top: 1px solid var(--line);
}

.foot {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 36px;
}

/* The full colour logo, not the wordmark: on a cream ground the sun reads,
   and the footer is the one place the mark gets to appear whole again. */
.foot-logo {
	height: 92px;
	width: auto;
	margin-bottom: 16px;
}

.foot-blurb {
	max-width: 340px;
	color: var(--muted);
	font-size: 15px;
}

.foot-title {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cobalt);
}

.foot-list {
	list-style: none;
}

.foot-list a {
	display: block;
	padding: 5px 0;
	color: var(--ink);
	font-size: 15px;
}

.foot-list a:hover {
	color: var(--sunrise);
}

.social {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	list-style: none;
}

.social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	background: #fff;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.social a:hover {
	background: var(--cobalt);
	border-color: var(--cobalt);
	color: #fff;
}

.legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 38px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--faint, #857c6b);
}

.legal p {
	margin: 0;
}

.legal-list {
	display: flex;
	gap: 18px;
	list-style: none;
}

.legal a:hover {
	color: var(--sunrise);
	text-decoration: underline;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.speaking-grid {
		gap: 32px;
	}
}

@media (max-width: 980px) {
	.gallery {
		columns: 3;
	}

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

	.speaking-grid {
		grid-template-columns: 1fr;
	}

	.speaking-form {
		position: static;
	}

	.speaking-portrait img {
		aspect-ratio: 21 / 9;
	}
}

@media (max-width: 620px) {
	.speaking-portrait img {
		aspect-ratio: 4 / 3;
	}

	.speaking-strip {
		grid-template-columns: 1fr 1fr;
	}

	.speaking-strip figure:last-of-type {
		grid-column: 1 / -1;
	}
}

/* The header carries four nav links, two affiliations and two buttons, so it
   folds into the burger earlier than a plain menu would need to. */
@media (max-width: 1180px) {
	:root {
		--header-logo-h: min(var(--header-logo-set), 96px);
	}

	.burger {
		display: block;
	}

	.menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 16px;
		background: var(--dawn);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.3);
		transform: translateY(-140%);
		transition: transform 0.28s ease;
		visibility: hidden;
		z-index: 5;
	}

	.menu.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	.navbar-outer {
		position: relative;
	}

	.menu-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu-list a {
		display: block;
		padding: 14px 26px;
		border-top: 1px solid var(--line);
		text-align: center;
	}

	.menu-list a::after {
		display: none;
	}

	.nav-affils {
		flex-direction: column;
		padding: 6px 26px 0;
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.nav-affils > li + li {
		border-left: 0;
	}

	.affil-link {
		align-items: center;
		max-width: none;
		padding: 9px 0;
		text-align: center;
	}

	.affil-org {
		font-size: 14.5px;
	}

	.menu-actions {
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 12px;
		padding: 0 26px;
	}
}

@media (max-width: 860px) {
	:root {
		--header-logo-h: min(var(--header-logo-set), 78px);
	}

	.hero-grid,
	.about {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hero-photo {
		order: -1;
	}

	.paths,
	.foot,
	.bsky-feed,
	.post-nav,
	.training-list {
		grid-template-columns: 1fr;
	}

	.bpost {
		border-right: none;
	}

	.gallery {
		columns: 2;
	}

	.post-grid {
		grid-template-columns: 1fr;
	}

	.block {
		padding: 54px 0;
	}

	.band {
		padding: 38px 24px;
	}

	.band-logo img {
		height: min(var(--band-logo-h, 190px), 140px);
	}

	.about-photo {
		max-width: 360px;
		margin: 0 auto;
	}

	.signup-stacked .signup-form {
		grid-template-columns: 1fr;
	}

	.post-nav .nav-next {
		text-align: left;
	}

}

@media (max-width: 640px) {
	:root {
		--gutter: 20px;
	}

	.fontsw {
		right: 12px;
		bottom: 12px;
	}

	.fontsw-toggle-text {
		display: none;
	}

	.hero {
		padding-top: 34px;
	}

	.hero-photo .chip {
		left: 8px;
		bottom: 8px;
	}

	.yt-play {
		width: 66px;
		height: 66px;
	}

	.yt-play svg {
		width: 26px;
		height: 26px;
	}

	/* Keep the title clear of the play button at the centre of the poster. */
	.yt-caption {
		padding: 16px 16px 18px;
	}

	.yt-caption-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 17px;
	}

	.yt-caption-meta {
		font-size: 11.5px;
	}

	.yt-rail {
		grid-auto-columns: 76%;
	}

	.stat {
		flex-basis: 100%;
	}

	.gallery {
		columns: 1;
	}

	.signup-form {
		flex-direction: column;
		align-items: stretch;
	}

	/* In a column the 150px flex-basis would become a 150px tall field. */
	.signup .field,
	.signup .field-zip {
		flex: 0 0 auto;
	}

	.signup .signup-submit {
		width: 100%;
	}

	.bsky-top {
		flex-wrap: wrap;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* --------------------------------------------------------------- printing */

@media print {
	.fontsw {
		display: none;
	}

	.site-header,
	.site-footer,
	.hero-signup,
	.video-band,
	.band,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 12pt;
	}
}