/* ==========================================================================
   Illinois Turners Camp - component styles
   Layer 2 (presentation). Every class is prefixed `.turner-`.
   Buttons, layout primitives, and scroll-reveal utilities map 1:1 to the
   approved React demo (ui/button.tsx, tailwind keyframes).
   ========================================================================== */

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

.turner-container {
	width: 100%;
	max-width: var(--turner-container-max);
	margin-inline: auto;
	padding-inline: var(--turner-container-pad);
}

.turner-section { padding-block: var(--turner-space-section); }
.turner-section--sm { padding-block: var(--turner-space-section-sm); }
.turner-section--muted { background-color: var(--turner-color-muted-bg); }
.turner-section--surface { background-color: var(--turner-color-surface); }

/* Centered eyebrow + heading + intro block (reusable across sections) */
.turner-heading-block {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}
.turner-heading-block > * + * { margin-top: 0.75rem; }

.turner-eyebrow {
	display: inline-block;
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--turner-tracking-eyebrow);
	color: var(--turner-color-secondary-ink);
}

.turner-lead {
	font-size: var(--turner-text-lead);
	line-height: 1.6;
	color: var(--turner-color-muted);
	max-width: 65ch;
}
.turner-heading-block .turner-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons  (variants + sizes 1:1 with ui/button.tsx)
   -------------------------------------------------------------------------- */

.turner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 2px solid transparent;
	border-radius: var(--turner-radius-md);
	font-family: var(--turner-font-body);
	font-size: 0.9375rem;
	font-weight: var(--turner-weight-medium);
	line-height: 1;
	/* nowrap keeps short labels on one line, but it also stops a long one ever
	   shrinking: at a 320px viewport the /camp-rules PDF button ("Download the
	   signed rules (PDF) (2 MB)") stayed 290px wide and pushed the page 11px
	   past the screen — a WCAG 1.4.10 reflow failure, and the kind that is
	   invisible at 390px where mobile testing usually stops. max-width caps it,
	   and below 26em the label is allowed to wrap instead of overflowing. */
	max-width: 100%;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition:
		color var(--turner-duration) var(--turner-ease),
		background-color var(--turner-duration) var(--turner-ease),
		border-color var(--turner-duration) var(--turner-ease),
		box-shadow var(--turner-duration) var(--turner-ease),
		transform var(--turner-duration) var(--turner-ease);
}

/* Tactile press */
.turner-btn:active { transform: translateY(1px); }

/* See the note on white-space above: at the narrow end a long label wrapping
   onto a second line is better than a page that scrolls sideways. */
@media (max-width: 26em) {
	.turner-btn {
		white-space: normal;
		line-height: 1.25;
		text-wrap: balance;
	}
}

.turner-btn:disabled,
.turner-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.turner-btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* Sizes */
.turner-btn--sm { min-height: 2.25rem; padding-inline: 0.75rem; font-size: 0.875rem; }
.turner-btn--lg {
	min-height: 3rem;
	padding-inline: 2rem;
	font-size: 1rem;
	border-radius: var(--turner-radius-md);
}
.turner-btn--xl {
	min-height: 3.5rem;
	padding-inline: 2.5rem;
	font-size: 1.125rem;
	border-radius: var(--turner-radius-lg);
}

/* Variants */
.turner-btn--primary {
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
	box-shadow: var(--turner-shadow-soft);
}
.turner-btn--primary:hover {
	background-color: var(--turner-color-primary-hover);
	color: var(--turner-on-primary);
	box-shadow: var(--turner-shadow-elevated);
}

.turner-btn--outline {
	border-color: var(--turner-color-primary);
	background-color: transparent;
	color: var(--turner-color-primary);
}
.turner-btn--outline:hover {
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

.turner-btn--secondary {
	background-color: var(--turner-color-secondary);
	color: var(--turner-on-secondary);
}
.turner-btn--secondary:hover {
	background-color: color-mix(in srgb, var(--turner-color-secondary) 88%, #000);
	color: var(--turner-on-secondary);
}

.turner-btn--ghost {
	background-color: transparent;
	color: var(--turner-color-primary);
}
.turner-btn--ghost:hover {
	background-color: var(--turner-color-accent);
	color: var(--turner-on-accent);
}

.turner-btn--link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--turner-color-primary);
	text-underline-offset: 0.25em;
}
.turner-btn--link:hover { text-decoration: underline; }

/* Gold call-to-action, used on dark hero backgrounds */
.turner-btn--hero {
	background-color: var(--turner-color-gold);
	color: var(--turner-on-gold);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.02em;
	box-shadow: var(--turner-shadow-elevated);
}
.turner-btn--hero:hover {
	background-color: color-mix(in srgb, var(--turner-color-gold) 90%, #000);
	color: var(--turner-on-gold);
	box-shadow: var(--turner-shadow-glow), var(--turner-shadow-elevated);
}

/* Transparent light-bordered button for dark backgrounds */
.turner-btn--hero-outline {
	border-color: rgba(252, 251, 247, 0.8);
	background-color: rgba(252, 251, 247, 0.04);
	color: var(--turner-on-primary);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.turner-btn--hero-outline:hover {
	background-color: rgba(252, 251, 247, 0.12);
	color: var(--turner-on-primary);
}

@media (prefers-reduced-transparency: reduce) {
	.turner-btn--hero-outline {
		background-color: rgba(252, 251, 247, 0.12);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
   Scroll reveal + float  (motivated motion: entry hierarchy + hero cue)
   Driven by assets/js/turner-reveal.js (IntersectionObserver).
   -------------------------------------------------------------------------- */

/* The hidden starting state is gated on html.turner-js (set inline in <head>,
   see functions.php) so that without JavaScript the content is simply visible
   rather than stranded at opacity 0 forever. */
.turner-js .turner-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s var(--turner-ease),
		transform 0.6s var(--turner-ease);
}
.turner-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger helper for grids/lists */
.turner-reveal--delay-1 { transition-delay: 0.08s; }
.turner-reveal--delay-2 { transition-delay: 0.16s; }
.turner-reveal--delay-3 { transition-delay: 0.24s; }

@keyframes turner-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
.turner-float { animation: turner-float 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	/* Matches the .turner-js gate above, otherwise this loses on specificity
	   and reduced-motion users get the permanently-hidden state instead. */
	.turner-js .turner-reveal { opacity: 1; transform: none; transition: none; }
	.turner-float { animation: none; }
}

/* --------------------------------------------------------------------------
   Header
   Sticky, translucent cream over a hairline. The active item is marked with a
   maroon rule rather than colour alone, so state survives a colour-blind read.
   -------------------------------------------------------------------------- */

.turner-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: color-mix(in srgb, var(--turner-color-bg) 92%, transparent);
	border-bottom: 1px solid var(--turner-color-border);
	transition: box-shadow var(--turner-duration) var(--turner-ease),
	            background-color var(--turner-duration) var(--turner-ease);
}

@supports (backdrop-filter: blur(12px)) {
	.turner-header { backdrop-filter: blur(12px) saturate(1.4); }
}

/* Elevation only once the page has moved beneath it. */
.turner-header.is-scrolled {
	box-shadow: var(--turner-shadow-soft);
	background-color: color-mix(in srgb, var(--turner-color-bg) 97%, transparent);
}

.turner-header__inner {
	min-height: var(--turner-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* --- Brand lockup --- */

.turner-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--turner-color-heading);
	flex-shrink: 0;
}

.turner-header__logo {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
}

.turner-header__logo-img,
.turner-footer__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.turner-header__wordmark {
	display: none;
	font-family: var(--turner-font-heading);
	font-weight: var(--turner-weight-heading);
	font-size: 0.875rem;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.turner-header__wordmark-line { display: block; }

/* --- Desktop navigation --- */

.turner-header__nav { display: none; }

.turner-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-nav__item { position: relative; }

/* A top-level label is a single unit: allowed to wrap, "American Turners" and
   "Turner Camp" split over two lines and pushed the header off its 5rem rule.
   Scoped to the desktop bar — the mobile panel is a column and its long
   society names must still wrap. */
.turner-header__nav .turner-nav__link { white-space: nowrap; }

.turner-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	font-family: var(--turner-font-body);
	font-size: 0.9375rem;
	font-weight: var(--turner-weight-medium);
	line-height: 1.2;
	color: color-mix(in srgb, var(--turner-color-text) 82%, transparent);
	text-decoration: none;
	cursor: pointer;
	transition: color 180ms var(--turner-ease);
}

.turner-nav__link:hover { color: var(--turner-color-primary); }

/* The rule that marks position. Animates from the centre on hover/current. */
.turner-nav__item > .turner-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.15rem;
	height: 2px;
	background-color: var(--turner-color-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 220ms var(--turner-ease);
}

.turner-nav__item > .turner-nav__link:hover::after,
.turner-nav__item.is-current > .turner-nav__link::after {
	transform: scaleX(1);
}

.turner-nav__item.is-current > .turner-nav__link { color: var(--turner-color-primary); }

.turner-nav__chevron {
	display: inline-flex;
	transition: transform 220ms var(--turner-ease);
}

.turner-nav__toggle[aria-expanded="true"] .turner-nav__chevron { transform: rotate(180deg); }

/* --- Dropdown --- */

.turner-nav__submenu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-nav__submenu {
	/* Owned as a variable so the hover bridge below cannot drift out of step
	   with the offset it has to cover. */
	--turner-submenu-gap: 0.65rem;

	position: absolute;
	top: calc(100% + var(--turner-submenu-gap));
	left: 0;
	z-index: 20;
	min-width: 17rem;
	padding: 0.4rem;
	background-color: var(--turner-color-bg);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	box-shadow: var(--turner-shadow-elevated);

	/* Closed state: present for measurement, invisible and inert. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.4rem);
	transition: opacity 160ms var(--turner-ease),
	            transform 160ms var(--turner-ease),
	            visibility 0s linear 160ms;
}

/*
 * Hover bridge across the gap under the trigger.
 *
 * The panel is absolutely positioned, so it adds no height to
 * .turner-nav__item, and the offset above it belongs to neither the link nor
 * the panel. Moving the pointer down to the menu crossed that dead band, which
 * fired mouseleave on the item and closed the menu before it could be reached
 * (turner-header.js). Extending the panel's hit area up over its own offset
 * keeps the pointer inside the item the whole way down.
 *
 * It lives on the panel rather than the item so it exists only while the menu
 * is open — an always-on strip would swallow hovers over whatever sits beneath
 * a closed menu. Scoped to the desktop nav: the mobile panel reuses this class
 * but lays it out statically, where an absolute strip would escape to the
 * nearest positioned ancestor and sit over unrelated taps.
 */
.turner-header__nav .turner-nav__submenu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: calc(var(--turner-submenu-gap) * -1);
	height: var(--turner-submenu-gap);
}

.turner-nav__toggle[aria-expanded="true"] + .turner-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.turner-nav__sublink,
.turner-nav__link--soon {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--turner-radius-md);
	background: none;
	font-family: var(--turner-font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: left;
	color: color-mix(in srgb, var(--turner-color-text) 82%, transparent);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms var(--turner-ease), color 160ms var(--turner-ease);
}

.turner-nav__sublink:hover {
	background-color: var(--turner-color-surface);
	color: var(--turner-color-primary);
}

.turner-nav__link--soon {
	color: var(--turner-color-muted);
	cursor: pointer;
}

.turner-nav__link--soon:hover { background-color: var(--turner-color-surface); }

.turner-nav__badge {
	flex-shrink: 0;
	margin-top: 0.1rem;
	padding: 0.1rem 0.4rem;
	border-radius: var(--turner-radius-sm);
	background-color: var(--turner-color-muted-bg);
	color: var(--turner-color-muted);
	font-size: 0.625rem;
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* --- Member action, CTA + burger --- */

.turner-header__actions {
	display: none;
	align-items: center;
	gap: 0.625rem;
	flex-shrink: 0;
}

.turner-header__actions .turner-btn { white-space: nowrap; }

.turner-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--turner-radius-md);
	background: none;
	color: var(--turner-color-heading);
	cursor: pointer;
}

.turner-header__burger:hover { background-color: var(--turner-color-surface); }

/* Swap the icon from the button's own expanded state — no JS class needed. */
.turner-header__burger-icon { display: none; }
.turner-header__burger[aria-expanded="false"] [data-icon="menu"] { display: inline-flex; }
.turner-header__burger[aria-expanded="true"] [data-icon="close"] { display: inline-flex; }

/* --- Mobile panel --- */

.turner-header__mobile {
	border-top: 1px solid var(--turner-color-border);
	background-color: var(--turner-color-bg);
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.turner-header__mobile[hidden] { display: none; }

.turner-header__mobile .turner-nav--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding-block: 0.75rem;
}

.turner-nav--mobile .turner-nav__link {
	justify-content: space-between;
	width: 100%;
	padding-block: 0.7rem;
	font-size: 1rem;
}

/* The desktop underline would sit oddly on a full-width row. */
.turner-nav--mobile .turner-nav__item > .turner-nav__link::after { content: none; }

.turner-nav--mobile .turner-nav__submenu {
	position: static;
	min-width: 0;
	margin: 0 0 0.4rem 0.6rem;
	padding: 0 0 0 0.75rem;
	border: 0;
	border-left: 1px solid var(--turner-color-border);
	border-radius: 0;
	background: none;
	box-shadow: none;

	/* Collapse by height on mobile: a floating card has nowhere to float to.
	   One grid row holding one <ul> — see Turner_Nav_Walker::start_lvl(). */
	display: grid;
	grid-template-rows: 0fr;
	opacity: 1;
	visibility: visible;
	transform: none;
	overflow: hidden;
	transition: grid-template-rows 240ms var(--turner-ease);
}

.turner-nav--mobile .turner-nav__submenu-list { min-height: 0; }

.turner-nav--mobile .turner-nav__toggle[aria-expanded="true"] + .turner-nav__submenu {
	grid-template-rows: 1fr;
}



.turner-header__mobile-account,
.turner-header__mobile-cta {
	width: 100%;
	margin-top: 0.75rem;
}

.turner-header__mobile-cta { margin-top: 0.5rem; }

@media (min-width: 640px) {
	.turner-header__wordmark { display: block; }
}

/* 64em, not 1024px, and deliberately so.
   At the default 16px root these are the same number, so nothing changes for a
   normal visitor. They differ for someone who has raised their browser's font
   size without zooming the page (Firefox's "zoom text only", and the OS-level
   text-size settings): a px breakpoint keeps the horizontal desktop nav even
   once the text is far too wide for it, and at 200% text the nav ran ~75px past
   the viewport. In em the breakpoint scales with the text, so the nav collapses
   to the mobile menu exactly when it no longer fits. WCAG 1.4.4. */
@media (min-width: 64em) {
	:root { --turner-header-h: 5rem; }
	.turner-header__logo { width: 3rem; height: 3rem; }
	.turner-header__wordmark { font-size: 1rem; }
	.turner-header__nav,
	.turner-header__actions { display: flex; }
	.turner-header__burger { display: none; }
	.turner-header__mobile { display: none !important; }
}

/* Compact desktop bar.
   Brand lockup + eight nav items + both actions measure ~1200px at full design
   scale, so between the breakpoint above and 78em the bar cannot hold all
   three at that scale: before this the nav simply overflowed its share, and
   "American Turners" and "Turner Camp" wrapped onto a second line. Rather than
   squeeze the nav — the part a visitor navigates with — the rhythm tightens one
   step and the labels drop one size. Both measured, not guessed: at the 64em
   floor this leaves ~37px between the last label and the buttons, and nothing
   is clipped or wrapped anywhere in the band. In em like the breakpoint above,
   so it tracks a raised text size the same way. */
@media (min-width: 64em) and (max-width: 77.999em) {
	.turner-header__inner { gap: 1rem; }
	.turner-header__nav .turner-nav { gap: 1rem; }
	.turner-header__nav .turner-nav__link { font-size: 0.875rem; }
}

/* The narrow end of that band cannot hold the wordmark too — with it the bar
   runs out of room at ~1190px — so below 75em the brand is the roundel alone,
   which carries the name itself. It returns the moment there is room for it
   with the ~40px of air the lockup needs to not look wedged in. */
@media (min-width: 64em) and (max-width: 74.999em) {
	.turner-header__wordmark { display: none; }
}

/* --------------------------------------------------------------------------
   Coming-soon dialog
   Native <dialog>: focus trap, Escape, and inertness come from the platform.
   -------------------------------------------------------------------------- */

.turner-soon-dialog {
	width: min(28rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-xl);
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	box-shadow: var(--turner-shadow-elevated);
}

.turner-soon-dialog::backdrop {
	background-color: color-mix(in srgb, var(--turner-color-text) 55%, transparent);
	backdrop-filter: blur(2px);
}

.turner-soon-dialog__body {
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: 2rem 1.75rem 1.75rem;
	text-align: center;
}

.turner-soon-dialog__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--turner-radius-pill);
	background-color: color-mix(in srgb, var(--turner-color-primary) 10%, transparent);
	color: var(--turner-color-primary);
}

.turner-soon-dialog__title {
	margin: 0;
	font-family: var(--turner-font-heading);
	font-size: 1.5rem;
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
}

.turner-soon-dialog__text {
	margin: 0;
	max-width: 34ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
}

/* --------------------------------------------------------------------------
   Footer
   Maroon field. Secondary text is tinted from the cream foreground rather than
   grayed, so it stays in the brand's colour world.
   -------------------------------------------------------------------------- */

.turner-footer {
	padding-block: var(--turner-space-section-sm);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

.turner-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

.turner-footer__lockup {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.turner-footer__logo {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
}

.turner-footer__wordmark {
	font-family: var(--turner-font-heading);
	font-weight: var(--turner-weight-heading);
	font-size: 1rem;
	line-height: 1.18;
}

.turner-footer__wordmark-line { display: block; }

.turner-footer__motto {
	margin: 0 0 1.25rem;
	color: color-mix(in srgb, var(--turner-on-primary) 80%, transparent);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
}

.turner-footer__contact {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.turner-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--turner-text-small);
	color: color-mix(in srgb, var(--turner-on-primary) 80%, transparent);
}

.turner-footer__contact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--turner-on-primary) 30%, transparent);
	transition: color 160ms var(--turner-ease), border-color 160ms var(--turner-ease);
}

.turner-footer__contact a:hover {
	color: var(--turner-on-primary);
	border-bottom-color: var(--turner-color-gold);
}

.turner-footer__contact-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--turner-color-gold);
}

.turner-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: color-mix(in srgb, var(--turner-on-primary) 82%, transparent);
	font-size: var(--turner-text-small);
	text-decoration: none;
	transition: color 160ms var(--turner-ease);
}

.turner-footer__social:hover { color: var(--turner-on-primary); }

/* Gold hairline under each column heading — the one recurring accent. */
.turner-footer__heading {
	position: relative;
	margin: 0 0 1.15rem;
	padding-bottom: 0.6rem;
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h4);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-snug);
	color: var(--turner-on-primary);
}

.turner-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2rem;
	height: 2px;
	background-color: var(--turner-color-gold);
}

.turner-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.turner-footer__links a,
.turner-footer__links .turner-nav__link--soon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: color-mix(in srgb, var(--turner-on-primary) 80%, transparent);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms var(--turner-ease);
}

.turner-footer__links a:hover,
.turner-footer__links .turner-nav__link--soon:hover {
	color: var(--turner-on-primary);
}

.turner-footer__links .turner-nav__badge {
	background-color: color-mix(in srgb, var(--turner-on-primary) 16%, transparent);
	color: color-mix(in srgb, var(--turner-on-primary) 85%, transparent);
}

.turner-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid color-mix(in srgb, var(--turner-on-primary) 20%, transparent);
	text-align: center;
}

.turner-footer__copyright {
	margin: 0;
	color: color-mix(in srgb, var(--turner-on-primary) 72%, transparent);
	font-size: var(--turner-text-small);
}

.turner-footer__legal-links {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-footer__legal-links a {
	color: color-mix(in srgb, var(--turner-on-primary) 72%, transparent);
	font-size: var(--turner-text-small);
	text-decoration: none;
	transition: color 160ms var(--turner-ease);
}

.turner-footer__legal-links a:hover { color: var(--turner-on-primary); }

@media (min-width: 640px) {
	.turner-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.turner-footer { padding-block: var(--turner-space-section); }
	.turner-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 3rem;
		padding-bottom: 3rem;
	}
	.turner-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.turner-header,
	.turner-nav__link,
	.turner-nav__chevron,
	.turner-nav__submenu,
	.turner-nav__item > .turner-nav__link::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero
   Full-height opening frame: photograph, maroon scrim, centred type. The
   entrance is one authored moment — content rises once, staggered, from an
   already-legible default.
   -------------------------------------------------------------------------- */

.turner-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(calc(100svh - var(--turner-header-h)), 54rem);
	padding-block: calc(var(--turner-space-section) + 4rem) var(--turner-space-section);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.turner-hero__media,
.turner-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.turner-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The one piece of ambient motion in the system, and it is deliberately the
   quietest thing on the page: a very slow push on the hero photograph so the
   opening frame breathes rather than sits. 6% over 32s is roughly 0.2% per
   second — below the threshold where the eye reads it as an effect, but enough
   that the page never feels like a screenshot.

   Gated on `no-preference` rather than switched off under `reduce`, so the
   default for anyone who has not expressed a preference to a browser that does
   not report one is stillness. Transform-only, so it composites on the GPU and
   never triggers layout; `overflow: hidden` on .turner-hero clips the overscan.
   Origin sits below centre because the subject of every camp photograph is the
   ground and the buildings, not the sky. */
@media (prefers-reduced-motion: no-preference) {
	.turner-hero__img {
		transform-origin: 50% 62%;
		animation: turner-hero-drift 32s ease-in-out infinite alternate;
	}
}

@keyframes turner-hero-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

/* Deepest at the edges so the header and the scroll cue stay legible. */
.turner-hero__scrim {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--turner-color-primary) 70%, transparent) 0%,
		color-mix(in srgb, var(--turner-color-primary) 62%, transparent) 45%,
		color-mix(in srgb, var(--turner-color-primary) 80%, transparent) 100%
	);
}

.turner-hero__inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	max-width: 56rem;
}

.turner-hero__motto {
	margin: 0;
	color: var(--turner-on-primary);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-medium);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
}

.turner-hero__title {
	margin: 0;
	color: var(--turner-on-primary);
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h1);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-tight);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.turner-hero__title-line { display: block; }
.turner-hero__title-line--accent { color: var(--turner-color-gold); }

.turner-hero__subtext {
	margin: 0;
	max-width: 46ch;
	color: var(--turner-on-primary);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
	text-wrap: pretty;
}

.turner-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.75rem;
}

.turner-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	translate: -50% 0;
	display: inline-flex;
	padding: 0.5rem;
	border-radius: var(--turner-radius-pill);
	color: color-mix(in srgb, var(--turner-on-primary) 85%, transparent);
	transition: color 200ms var(--turner-ease), translate 200ms var(--turner-ease);
	animation: turner-hero-bob 3.2s var(--turner-ease) infinite;
}

.turner-hero__scroll:hover { color: var(--turner-on-primary); }

@keyframes turner-hero-bob {
	0%, 100% { translate: -50% 0; }
	50%      { translate: -50% 0.45rem; }
}

/* The one authored entrance: a single staggered rise on load. */
@keyframes turner-hero-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to   { opacity: 1; transform: none; }
}

.turner-hero__motto,
.turner-hero__title,
.turner-hero__subtext,
.turner-hero__actions {
	animation: turner-hero-rise 900ms var(--turner-ease) backwards;
}

.turner-hero__title    { animation-delay: 90ms; }
.turner-hero__subtext  { animation-delay: 180ms; }
.turner-hero__actions  { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
	.turner-hero__motto,
	.turner-hero__title,
	.turner-hero__subtext,
	.turner-hero__actions,
	.turner-hero__scroll { animation: none; }
	.turner-hero__scroll { translate: -50% 0; }
}

/* Interior page headers.
   Only the home page opens full screen. Every other page uses a header deep
   enough to set the tone and shallow enough that the article starts in view:
   --page keeps the photograph, --plain drops it for type on cream. */
.turner-hero--page,
.turner-hero--plain {
	min-height: 0;
	padding-block: calc(var(--turner-space-section-sm) + var(--turner-header-h)) var(--turner-space-section-sm);
}

.turner-hero--page .turner-hero__title,
.turner-hero--plain .turner-hero__title {
	font-size: var(--turner-text-h2);
}

.turner-hero--plain {
	background-color: var(--turner-color-surface);
	border-bottom: 1px solid var(--turner-color-border);
}

/* The gold second line is a device for type over a photograph. On cream it
   reads as a mistake and barely clears the background, so the plain header
   keeps one ink for the whole title. */
.turner-hero--plain .turner-hero__title,
.turner-hero--plain .turner-hero__title-line--accent { color: var(--turner-color-heading); }
.turner-hero--plain .turner-hero__motto { color: var(--turner-color-secondary-ink); }
.turner-hero--plain .turner-hero__subtext,
.turner-hero--plain .turner-hero__tagline { color: var(--turner-color-muted); }

/* Motto, rule, tagline: the demo's three-part interior header. */
.turner-hero__tagline {
	position: relative;
	margin: 0;
	padding-top: 1.5rem;
	color: var(--turner-on-primary);
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-lead);
	font-style: italic;
}

.turner-hero__tagline::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 50%;
	translate: -50% 0;
	width: 4rem;
	height: 2px;
	background-color: var(--turner-color-gold);
}

.turner-hero--plain .turner-hero__tagline::before { background-color: var(--turner-color-primary); }

/* --------------------------------------------------------------------------
   Prose
   The reading column. One measure, one rhythm, everywhere the site writes at
   length; an optional figure sits beside it from the two-column breakpoint up.
   -------------------------------------------------------------------------- */

.turner-prose__layout {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 60rem) {
	.turner-prose--figure-right .turner-prose__layout,
	.turner-prose--figure-left .turner-prose__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		gap: 3rem;
	}

	/* Order, not source position: the article stays first for screen readers
	   and keyboards no matter which side the photograph paints on. */
	.turner-prose--figure-left .turner-prose__column { order: 2; }
	.turner-prose--figure-left .turner-prose__figure { order: 1; }
}

.turner-prose__column { min-width: 0; }

.turner-prose__heading {
	margin: 0 0 1.5rem;
	color: var(--turner-color-heading);
	font-family: var(--turner-font-heading);
	line-height: var(--turner-leading-snug);
	position: relative;
	padding-bottom: 0.75rem;
}

.turner-prose__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.5rem;
	height: 3px;
	background-color: var(--turner-color-primary);
}

.turner-prose .turner-eyebrow { margin-bottom: 0.75rem; }

.turner-prose__body {
	max-width: 70ch;
	color: var(--turner-color-text);
	font-size: var(--turner-text-body);
	line-height: var(--turner-leading-body);
}

/* Reset and space at the same specificity, so the flow rule actually applies.
   A `p` type selector here would outrank `> * + *` and flatten every gap. */
.turner-prose__body > * { margin-block: 0; }
.turner-prose__body > * + * { margin-top: 1.25rem; }

.turner-prose__body h2,
.turner-prose__body h3,
.turner-prose__body h4 {
	margin-top: 2.5rem;
	margin-bottom: 0;
	color: var(--turner-color-heading);
	font-family: var(--turner-font-heading);
	line-height: var(--turner-leading-snug);
}

.turner-prose__body h2 { font-size: var(--turner-text-h3); }
.turner-prose__body h3 { font-size: var(--turner-text-h4); }

.turner-prose__body strong { font-weight: var(--turner-weight-semibold); }

.turner-prose__body a {
	color: var(--turner-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.turner-prose__body a:hover { color: var(--turner-color-primary-hover); }

.turner-prose__body ul,
.turner-prose__body ol {
	margin-left: 0;
	padding-left: 1.5rem;
	display: grid;
	gap: 0.5rem;
}

.turner-prose__body li::marker { color: var(--turner-color-primary); }

.turner-prose__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--turner-radius);
}

/* Figures inserted in the native editor. WordPress ships .wp-element-caption
   at a contrast that fails wcag2aa on the cream page background, so the caption
   colour is set here rather than inherited. */
.turner-prose__body figure {
	margin: 0;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
}

.turner-prose__body figcaption,
.turner-prose__body .wp-element-caption {
	margin: 0;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
	text-align: center;
	text-wrap: pretty;
}

.turner-prose__body blockquote {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--turner-color-gold);
	color: var(--turner-color-muted);
	font-style: italic;
}

/* Centred: short closing sections that exist to introduce their buttons. */
.turner-prose--center .turner-prose__column { text-align: center; }

.turner-prose--center .turner-prose__body {
	max-width: 52ch;
	margin-inline: auto;
	font-size: var(--turner-text-lead);
	color: var(--turner-color-muted);
}

.turner-prose--center .turner-prose__heading::after {
	left: 50%;
	translate: -50% 0;
}

/* Boxed: the "About this video" panel. */
.turner-prose--boxed .turner-prose__layout {
	max-width: 60rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background-color: var(--turner-color-surface);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
}

.turner-section--surface .turner-prose--boxed .turner-prose__layout,
.turner-prose--boxed.turner-section--surface .turner-prose__layout {
	background-color: var(--turner-color-bg);
}

.turner-prose__figure {
	margin: 0;
	display: grid;
	gap: 0.75rem;
}

.turner-prose__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--turner-radius);
	border: 1px solid var(--turner-color-border);
	box-shadow: var(--turner-shadow-soft);
}

.turner-prose__caption {
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
	text-align: center;
	text-wrap: pretty;
}

.turner-prose__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Video
   A poster and a play control. The YouTube frame is only inserted once
   somebody presses play (assets/js/turner-video.js).
   -------------------------------------------------------------------------- */

.turner-video__frame {
	position: relative;
	max-width: 60rem;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--turner-radius-lg);
	box-shadow: var(--turner-shadow-elevated);
	background-color: var(--turner-color-heading);
}

.turner-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.turner-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.turner-video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--turner-color-heading) 20%, transparent) 0%,
		color-mix(in srgb, var(--turner-color-heading) 45%, transparent) 100%
	);
}

.turner-video__button {
	position: relative;
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	padding-left: 0.35rem; /* optical centring of the triangle */
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
	box-shadow: var(--turner-shadow-glow);
	transition: transform var(--turner-duration) var(--turner-ease),
		background-color var(--turner-duration) var(--turner-ease);
}

.turner-video__play:hover .turner-video__button,
.turner-video__play:focus-visible .turner-video__button {
	transform: scale(1.08);
	background-color: var(--turner-color-primary-hover);
}

.turner-video__label,
.turner-video__badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border-radius: var(--turner-radius-pill);
	background-color: color-mix(in srgb, var(--turner-color-heading) 75%, transparent);
	color: var(--turner-on-primary);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-medium);
}

.turner-video__label { left: 1rem; bottom: 1rem; }

.turner-video__badge {
	left: 50%;
	top: 1rem;
	translate: -50% 0;
	background-color: var(--turner-color-primary);
	font-size: var(--turner-text-eyebrow);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
}

.turner-video__embed {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.turner-video__empty {
	max-width: 60rem;
	margin-inline: auto;
	color: var(--turner-color-muted);
	text-align: center;
}

.turner-video__frame.has-error {
	display: grid;
	place-items: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
}

.turner-video__error {
	color: var(--turner-on-primary);
	font-size: var(--turner-text-small);
}

.turner-video__error-link {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.5rem;
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
	font-weight: var(--turner-weight-medium);
	transition: background-color var(--turner-duration) var(--turner-ease);
}

.turner-video__error-link:hover,
.turner-video__error-link:focus-visible {
	background-color: var(--turner-color-primary-hover);
}

@media (prefers-reduced-motion: reduce) {
	.turner-video__button { transition: none; }
	.turner-video__play:hover .turner-video__button,
	.turner-video__play:focus-visible .turner-video__button { transform: none; }
	.turner-video__error-link { transition: none; }
}

/* --------------------------------------------------------------------------
   Card grid
   Tiles sit on the page rather than floating: a hairline and a restrained
   lift on hover, no drop-shadow stack.
   -------------------------------------------------------------------------- */

.turner-card-grid__head {
	max-width: 48rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.turner-card-grid__head > * + * { margin-top: 1rem; }

.turner-card-grid__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-card-grid__head .turner-lead { margin-inline: auto; }

.turner-card-grid__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-card {
	display: flex;
	flex-direction: column;
	min-width: 0;          /* let grid tracks shrink below content width */
	height: 100%;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-bg);
	transition: border-color var(--turner-duration) var(--turner-ease),
	            box-shadow var(--turner-duration) var(--turner-ease),
	            transform var(--turner-duration) var(--turner-ease);
}

.turner-section--surface .turner-card,
.turner-section--muted .turner-card { background-color: var(--turner-color-bg); }

/* Cards carrying a photograph — the News index. The image sits inside the
   card's link but bleeds back out through the inner padding, so the whole
   tile stays one anchor while the photo still reaches the card edge. */
.turner-card--media { overflow: hidden; }

.turner-card__media {
	display: block;
	width: calc(100% + 4rem);
	margin: -2rem -2rem 0.5rem;
	aspect-ratio: 4 / 3;
	background-color: var(--turner-color-muted-bg);
}

.turner-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.turner-card-grid__empty {
	margin: 0;
	color: var(--turner-color-muted);
	text-align: center;
}

.turner-card:hover {
	border-color: color-mix(in srgb, var(--turner-color-primary) 35%, transparent);
	box-shadow: var(--turner-shadow-soft);
	transform: translateY(-2px);
}

.turner-card__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	min-width: 0;
	padding: 2rem;
	color: inherit;
	text-decoration: none;
}

.turner-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.5rem;
	border-radius: var(--turner-radius-md);
	background-color: color-mix(in srgb, var(--turner-color-primary) 10%, transparent);
	color: var(--turner-color-primary);
	transition: background-color var(--turner-duration) var(--turner-ease);
}

.turner-card:hover .turner-card__icon {
	background-color: color-mix(in srgb, var(--turner-color-primary) 18%, transparent);
}

.turner-card__title {
	margin: 0;
	font-size: var(--turner-text-h3);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
}

.turner-card__desc {
	margin: 0;
	max-width: none;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
}

.turner-card__meta {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--turner-color-primary);
	font-size: 0.6875rem;
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.turner-card-grid__list[data-columns="2"],
	.turner-card-grid__list[data-columns="3"],
	.turner-card-grid__list[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.turner-card-grid__list { gap: 2rem; }
	.turner-card-grid__list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.turner-card-grid__list[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   President's letter
   One long read. The card is the quiet frame around it; the gold rule at the
   top is the only ornament.
   -------------------------------------------------------------------------- */

.turner-letter {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--turner-color-primary) 4%, var(--turner-color-bg)) 0%,
		var(--turner-color-bg) 100%
	);
}

.turner-letter__head {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.turner-letter__head > * + * { margin-top: 0.75rem; }

.turner-letter__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-letter__card {
	max-width: 56rem;
	margin-inline: auto;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-xl);
	background-color: var(--turner-color-bg);
	box-shadow: var(--turner-shadow-elevated);
	overflow: hidden;
}

.turner-letter__rule {
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--turner-color-gold) 0%,
		var(--turner-color-primary) 55%,
		var(--turner-color-secondary) 100%
	);
}

.turner-letter__body {
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

/* Body copy sits at a comfortable measure for sustained reading. */
.turner-letter__body p {
	max-width: 68ch;
	margin: 0 0 1.15em;
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
	color: color-mix(in srgb, var(--turner-color-text) 92%, transparent);
	text-wrap: pretty;
}

.turner-letter__greeting,
.turner-letter__closing {
	font-weight: var(--turner-weight-semibold);
	color: var(--turner-color-heading) !important;
}

.turner-letter__sign {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--turner-color-border);
}

.turner-letter__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	flex-shrink: 0;
	border-radius: var(--turner-radius-pill);
	background: linear-gradient(135deg, var(--turner-color-primary) 0%, var(--turner-color-secondary) 100%);
	color: var(--turner-on-primary);
	font-family: var(--turner-font-heading);
	font-weight: var(--turner-weight-heading);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
}

.turner-letter__signer { display: grid; gap: 0.15rem; }

.turner-letter__name {
	font-family: var(--turner-font-heading);
	font-weight: var(--turner-weight-heading);
	font-size: 1.125rem;
	color: var(--turner-color-heading);
}

.turner-letter__role {
	font-size: var(--turner-text-small);
	color: var(--turner-color-muted);
}

.turner-letter__motto {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--turner-color-muted);
}

/* In-page anchor target. Zero-height marker offset by the sticky header, so
   jumping to a section lands below the header rather than behind it. */
.turner-anchor {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--turner-header-h) + 1.5rem);
}

/* --------------------------------------------------------------------------
   Media split
   -------------------------------------------------------------------------- */

.turner-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2.5rem;
}

.turner-split__media {
	margin: 0;
	border-radius: var(--turner-radius-xl);
	overflow: hidden;
	box-shadow: var(--turner-shadow-elevated);
}

.turner-split__img { width: 100%; height: 100%; object-fit: cover; }

.turner-split__media[data-ratio="square"] .turner-split__img { aspect-ratio: 1; }
.turner-split__media[data-ratio="wide"]   .turner-split__img { aspect-ratio: 4 / 3; }

.turner-split__copy > * + * { margin-top: 1.25rem; }

.turner-split__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-split__body p {
	margin: 0 0 1em;
	max-width: 62ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
	text-wrap: pretty;
}
.turner-split__body p:last-child { margin-bottom: 0; }

.turner-split__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-split__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--turner-color-text);
	font-size: var(--turner-text-body);
}

.turner-split__check {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--turner-color-accent);
}

.turner-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 900px) {
	.turner-split__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
	/* Flip by painting order, so the markup keeps image-then-copy for
	   screen readers and keyboard order regardless of visual side. */
	.turner-split--flip .turner-split__media { order: 2; }
}

/* --------------------------------------------------------------------------
   Banner strip
   -------------------------------------------------------------------------- */

.turner-banner {
	position: relative;
	display: block;
	overflow: hidden;
}

.turner-banner__img {
	width: 100%;
	object-fit: cover;
	display: block;
}

.turner-banner[data-height="short"]  .turner-banner__img { height: clamp(9rem, 6rem + 12vw, 15rem); }
.turner-banner[data-height="medium"] .turner-banner__img { height: clamp(12rem, 8rem + 16vw, 22rem); }
.turner-banner[data-height="tall"]   .turner-banner__img { height: clamp(16rem, 10rem + 22vw, 30rem); }

.turner-banner__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(2rem, 8vw, 8rem);
	pointer-events: none;
}

.turner-banner__fade--start {
	left: 0;
	background: linear-gradient(90deg, var(--turner-color-bg) 0%, transparent 100%);
}

.turner-banner__fade--end {
	right: 0;
	background: linear-gradient(270deg, var(--turner-color-bg) 0%, transparent 100%);
}

.turner-banner__caption {
	position: absolute;
	right: var(--turner-container-pad);
	bottom: 0.75rem;
	margin: 0;
	max-width: none;
	color: var(--turner-on-primary);
	font-size: var(--turner-text-small);
	text-shadow: 0 1px 3px rgba(46, 36, 36, 0.8);
}

/* --------------------------------------------------------------------------
   Membership CTA
   -------------------------------------------------------------------------- */

.turner-join {
	background: linear-gradient(
		180deg,
		var(--turner-color-bg) 0%,
		color-mix(in srgb, var(--turner-color-primary) 5%, var(--turner-color-bg)) 100%
	);
}

.turner-join__inner {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	max-width: 52rem;
	text-align: center;
}

.turner-join__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-join__intro {
	margin: 0;
	max-width: 52ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
}

.turner-join__action { margin-top: 0.5rem; }

.turner-join__societies {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--turner-color-border);
	width: 100%;
}

.turner-join__societies-label {
	margin: 0 0 1rem;
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--turner-color-muted);
}

.turner-join__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	font-size: var(--turner-text-small);
	text-decoration: none;
	transition: border-color var(--turner-duration) var(--turner-ease),
	            color var(--turner-duration) var(--turner-ease);
}

a.turner-pill:hover {
	border-color: var(--turner-color-primary);
	color: var(--turner-color-primary);
}

.turner-pill--muted { color: var(--turner-color-muted); }

/* --------------------------------------------------------------------------
   Events
   Two layouts from one element: a gradient band for featured events, and a
   filterable grid for the full calendar.
   -------------------------------------------------------------------------- */

.turner-events__head {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.turner-events__head > * + * { margin-top: 1rem; }

.turner-events__eyebrow {
	margin: 0;
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--turner-color-secondary-ink);
}

.turner-events__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-events__intro {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
}

.turner-events__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 2.5rem;
}

.turner-events__filter {
	border-color: var(--turner-color-border);
	cursor: pointer;
	font-family: var(--turner-font-body);
}

.turner-events__filter.is-active {
	border-color: var(--turner-color-primary);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

.turner-events__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-event[hidden] { display: none; }

.turner-event__inner {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-bg);
	transition: border-color var(--turner-duration) var(--turner-ease),
	            box-shadow var(--turner-duration) var(--turner-ease);
}

.turner-event__inner:hover {
	border-color: color-mix(in srgb, var(--turner-color-primary) 35%, transparent);
	box-shadow: var(--turner-shadow-soft);
}

/* The date is the scan target, so it gets the weight. */
.turner-event__date {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 4rem;
	padding: 0.6rem 0;
	border-radius: var(--turner-radius-md);
	background-color: color-mix(in srgb, var(--turner-color-primary) 8%, transparent);
	color: var(--turner-color-primary);
	line-height: 1.1;
}

.turner-event__month {
	font-size: 0.6875rem;
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.turner-event__day {
	font-family: var(--turner-font-heading);
	font-size: 1.5rem;
	font-weight: var(--turner-weight-heading);
}

.turner-event__body { min-width: 0; }

.turner-event__cat {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.6875rem;
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--turner-color-muted);
}

.turner-event__title {
	margin: 0 0 0.4rem;
	font-size: var(--turner-text-h3);
	line-height: var(--turner-leading-snug);
}

.turner-event__title a {
	color: var(--turner-color-heading);
	text-decoration: none;
}

.turner-event__title a:hover { color: var(--turner-color-primary); }

.turner-event__when,
.turner-event__where {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.25rem;
	max-width: none;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
}

.turner-event__where span { display: inline-flex; flex-shrink: 0; }

.turner-event__excerpt {
	margin: 0.6rem 0 0;
	max-width: 60ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
}

.turner-events__empty {
	margin: 0 auto;
	max-width: 40ch;
	text-align: center;
	color: var(--turner-color-muted);
}

/* --- Featured band --- */

.turner-events--featured {
	background: var(--turner-gradient-featured);
}

.turner-events--featured .turner-events__eyebrow {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	border-radius: var(--turner-radius-pill);
	background-color: color-mix(in srgb, var(--turner-on-primary) 18%, transparent);
	color: var(--turner-on-primary);
}

.turner-events--featured .turner-events__heading,
.turner-events--featured .turner-events__intro,
.turner-events--featured .turner-events__empty { color: var(--turner-on-primary); }

.turner-events--featured .turner-event__inner {
	border-color: color-mix(in srgb, var(--turner-on-primary) 30%, transparent);
	background-color: color-mix(in srgb, var(--turner-color-text) 28%, transparent);
	flex-direction: column;
}

@supports (backdrop-filter: blur(6px)) {
	.turner-events--featured .turner-event__inner { backdrop-filter: blur(6px); }
}

.turner-events--featured .turner-event__inner:hover {
	border-color: color-mix(in srgb, var(--turner-on-primary) 45%, transparent);
	box-shadow: none;
}

.turner-events--featured .turner-event__date {
	flex-direction: row;
	width: auto;
	padding: 0.35rem 0.75rem;
	gap: 0.4rem;
	grid-auto-flow: column;
	background-color: var(--turner-color-gold);
	color: var(--turner-on-gold);
}

.turner-events--featured .turner-event__cat,
.turner-events--featured .turner-event__when,
.turner-events--featured .turner-event__where,
.turner-events--featured .turner-event__excerpt {
	color: var(--turner-on-primary);
}

.turner-events--featured .turner-event__title a { color: var(--turner-on-primary); }
.turner-events--featured .turner-event__title a:hover { color: var(--turner-color-gold); }

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

@media (min-width: 1100px) {
	.turner-events--featured .turner-events__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.turner-events--calendar .turner-events__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Controls row: category pills beside the view switcher --- */

.turner-events__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
	margin-bottom: 2.5rem;
}

/* Inside the controls row the pills are one of two groups, so the standalone
   spacing they carry on their own would double the gap. */
.turner-events__controls .turner-events__filters { margin-bottom: 0; }

.turner-events__views {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-surface);
}

.turner-events__view {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: var(--turner-radius-pill);
	background-color: transparent;
	color: var(--turner-color-muted);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-medium);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--turner-duration) var(--turner-ease),
	            color var(--turner-duration) var(--turner-ease);
}

.turner-events__view:hover { color: var(--turner-color-primary); }

.turner-events__view.is-active {
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

.turner-events__view-icon { display: inline-flex; }

/* --- List view: the same cards, laid out as full-width rows --- */

.turner-events[data-view="list"] .turner-events__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.turner-events[data-view="list"] .turner-event__inner {
	align-items: center;
	padding: 1rem 1.25rem;
}

.turner-events[data-view="list"] .turner-event__excerpt { display: none; }

/* --- Calendar view --- */

.turner-events__calendar[hidden],
.turner-events__list[hidden] { display: none; }

.turner-events__month[hidden] { display: none; }

.turner-events__month-title {
	margin: 0 0 1rem;
	font-size: var(--turner-text-h3);
	text-align: center;
	color: var(--turner-color-heading);
}

/* The container's background shows through the 1px gap, which draws the whole
   grid's rules without doubling borders between neighbouring cells. */
.turner-events__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius);
	background-color: var(--turner-color-border);
}

.turner-events__weekday {
	padding: 0.5rem 0.25rem;
	background-color: var(--turner-color-surface);
	color: var(--turner-color-muted);
	font-size: 0.6875rem;
	font-weight: var(--turner-weight-semibold);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.turner-events__weekday abbr {
	text-decoration: none;
	border-bottom: 0;
}

.turner-events__day {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-height: 6.5rem;
	padding: 0.4rem;
	background-color: var(--turner-color-bg);
}

.turner-events__day--pad { background-color: var(--turner-color-surface); }

.turner-events__day-num {
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-medium);
	line-height: 1;
}

.turner-events__day.has-events .turner-events__day-num { color: var(--turner-color-text); }

.turner-events__day.is-today .turner-events__day-num {
	align-self: flex-start;
	padding: 0.15rem 0.4rem;
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-gold);
	color: var(--turner-on-gold);
	font-weight: var(--turner-weight-semibold);
}

.turner-events__chip {
	display: block;
	width: 100%;
	padding: 0.25rem 0.4rem;
	border: 0;
	border-left: 3px solid var(--turner-color-primary);
	border-radius: var(--turner-radius-sm);
	background-color: color-mix(in srgb, var(--turner-color-primary) 8%, transparent);
	color: var(--turner-color-primary);
	font-family: var(--turner-font-body);
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	/* Long titles must not widen the column and blow out the seven-day grid. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color var(--turner-duration) var(--turner-ease);
}

.turner-events__chip:hover {
	background-color: color-mix(in srgb, var(--turner-color-primary) 16%, transparent);
}

.turner-events__chip[hidden] { display: none; }

.turner-events__month-nav {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.turner-events__month-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	cursor: pointer;
	transition: border-color var(--turner-duration) var(--turner-ease),
	            color var(--turner-duration) var(--turner-ease);
}

.turner-events__month-btn:hover:not(:disabled) {
	border-color: var(--turner-color-primary);
	color: var(--turner-color-primary);
}

.turner-events__month-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.turner-events__month-btn span { display: inline-flex; }

/* The featured band is dark; its calendar would otherwise be unreadable. */
.turner-events--featured .turner-events__month-title { color: var(--turner-on-primary); }

@media (max-width: 699px) {
	.turner-events__day {
		min-height: 4rem;
		padding: 0.25rem;
	}
	.turner-events__chip {
		padding: 0.15rem 0.25rem;
		font-size: 0.625rem;
	}
}

/* --------------------------------------------------------------------------
   Event detail dialog
   A native <dialog>: Escape, the backdrop, the focus trap, and focus return
   are the browser's job, so this file only has to dress it.
   -------------------------------------------------------------------------- */

.turner-event-dialog {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(44rem, calc(100vh - 4rem));
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-bg);
	/* Dialogs render in the top layer, so they inherit nothing useful from the
	   section around them — the gradient band would otherwise leak white text. */
	color: var(--turner-color-text);
	box-shadow: var(--turner-shadow-elevated);
}

.turner-event-dialog::backdrop {
	background-color: rgba(46, 36, 36, 0.65);
	backdrop-filter: blur(2px);
}

.turner-event-dialog__inner {
	position: relative;
	max-height: inherit;
	overflow-y: auto;
}

.turner-event-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--turner-radius-pill);
	background-color: color-mix(in srgb, var(--turner-color-bg) 85%, transparent);
	color: var(--turner-color-text);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color var(--turner-duration) var(--turner-ease);
}

.turner-event-dialog__close:hover {
	background-color: var(--turner-color-muted-bg);
	color: var(--turner-color-primary);
}

.turner-event-dialog__media { margin: 0; }

.turner-event-dialog__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.turner-event-dialog__body { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

.turner-event-dialog__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.turner-event-dialog__title {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
}

.turner-event-dialog__meta {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 1rem;
	border-radius: var(--turner-radius);
	background-color: var(--turner-color-surface);
}

.turner-event-dialog__row {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	align-items: baseline;
	gap: 0.75rem;
}

.turner-event-dialog__row dt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
}

.turner-event-dialog__row dd {
	margin: 0;
	color: var(--turner-color-text);
	font-size: var(--turner-text-small);
}

.turner-event-dialog__icon {
	display: inline-flex;
	color: var(--turner-color-primary);
}

.turner-event-dialog__desc p {
	margin: 0 0 1em;
	max-width: 60ch;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}
.turner-event-dialog__desc p:last-child { margin-bottom: 0; }

.turner-event-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.turner-event-registration__notice {
	margin: 1rem 0 0;
	max-width: 60ch;
	color: var(--turner-color-text);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-semibold);
}

@media (max-width: 520px) {
	.turner-event-dialog__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}
}

/* --------------------------------------------------------------------------
   Event single template
   Reuses .turner-event-dialog__* for the body (cats/meta/desc/actions) so the
   dialog and the single-event page never carry two copies of the same rules.
   -------------------------------------------------------------------------- */

.turner-event-single__body { max-width: 48rem; margin: 0 auto; }

.turner-event-single__back { margin: 0 0 1.5rem; }
.turner-event-single__back a {
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
}
.turner-event-single__back a:hover { color: var(--turner-color-primary); }

.turner-event-single__media {
	margin: 0 0 1.5rem;
	border-radius: var(--turner-radius-lg);
	overflow: hidden;
}

.turner-event-single__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.turner-event-registration {
	scroll-margin-top: 7rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--turner-color-border);
}

.turner-event-registration__title {
	margin: 0 0 1.25rem;
	color: var(--turner-color-heading);
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
}

.turner-event-registration__blocks {
	display: grid;
	gap: 1.5rem;
}

/* Event Tickets owns the forms and their interaction states. The Turner
   wrapper only removes the plugin's page-width assumption so the blocks align
   with this template's existing 48rem content column. */
.turner-event-registration .tribe-common {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.turner-event-registration .tribe-common .tribe-common-c-btn,
.turner-event-ticket-management .tribe-common .tribe-common-c-btn {
	border-color: var(--turner-color-primary);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
	font-family: var(--turner-font-body);
	font-weight: var(--turner-weight-medium);
}

.turner-event-registration .tribe-common .tribe-common-c-btn:hover,
.turner-event-registration .tribe-common .tribe-common-c-btn:focus,
.turner-event-ticket-management .tribe-common .tribe-common-c-btn:hover,
.turner-event-ticket-management .tribe-common .tribe-common-c-btn:focus {
	border-color: var(--turner-color-primary-hover);
	background-color: var(--turner-color-primary-hover);
	color: var(--turner-on-primary);
}

/* TEC's attendee-management endpoint is rendered inside the Bricks event
   template. Keep its navigation and update action in the established Turner
   palette instead of the plugin's lower-contrast default blue. */
.turner-event-ticket-management {
	max-width: 64rem;
}

.turner-event-ticket-management__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 2rem;
}

.turner-event-ticket-management__title {
	margin: 0;
	color: var(--turner-color-heading);
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
}

.turner-event-ticket-management__intro {
	grid-column: 1;
	margin: 0;
	max-width: 60ch;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}

.turner-event-ticket-management__action {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
}

.turner-event-ticket-management__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 2rem 0 0;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: color-mix(in srgb, var(--turner-color-surface) 72%, var(--turner-color-bg));
	overflow: hidden;
}

.turner-event-ticket-management__detail {
	padding: 1.25rem 1.5rem;
}

.turner-event-ticket-management__detail + .turner-event-ticket-management__detail {
	border-left: 1px solid var(--turner-color-border);
}

.turner-event-ticket-management__detail dt {
	margin-bottom: 0.35rem;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
}

.turner-event-ticket-management__detail dd {
	margin: 0;
	color: var(--turner-color-text);
	font-weight: var(--turner-weight-medium);
	line-height: var(--turner-leading-body);
}

.turner-event-ticket-management__description {
	margin: 1.5rem 0 0;
	max-width: 65ch;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}

.turner-event-ticket-management__status {
	display: grid;
	grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--turner-color-border);
	border-left: 4px solid var(--turner-color-primary);
	border-radius: var(--turner-radius-lg);
	background-color: color-mix(in srgb, var(--turner-color-primary) 4%, var(--turner-color-bg));
}

.turner-event-ticket-management__status-heading h3,
.turner-event-ticket-management__status-heading strong,
.turner-event-ticket-management__status > p {
	margin: 0;
}

.turner-event-ticket-management__status-heading h3 {
	color: var(--turner-color-muted);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-medium);
	line-height: var(--turner-leading-snug);
}

.turner-event-ticket-management__status-heading strong {
	display: block;
	margin-top: 0.2rem;
	color: var(--turner-color-primary);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-h3);
	line-height: var(--turner-leading-snug);
}

.turner-event-ticket-management__status > p {
	max-width: 52ch;
	color: var(--turner-color-text);
	line-height: var(--turner-leading-body);
}

.turner-event-ticket-management__native {
	margin-top: 1.75rem;
}

.turner-event-ticket-management__native > #tribe-events-content > .tribe-back,
.turner-event-ticket-management__native .tribe-events-single-event-title,
.turner-event-ticket-management__native .tribe-events-schedule {
	display: none;
}

.turner-event-ticket-management__native > #tribe-events-content {
	margin: 0;
	padding: 0;
}

.turner-event-ticket-management__native .tribe-rsvp .user-details,
.turner-event-ticket-management__native .tec-tickets__my-tickets-list-title-container {
	display: none;
}

.turner-event-ticket-management__native .event-tickets,
.turner-event-ticket-management__native .tribe-tickets__form,
.turner-event-ticket-management__native .tribe-rsvp,
.turner-event-ticket-management__native .tec__tickets-my-tickets-rsvp-attendee-list-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.turner-event-ticket-management__native .tribe-rsvp-list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-event-ticket-management__native .tribe-rsvp-list .tribe-item {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-bg);
	box-shadow: var(--turner-shadow-soft);
}

.turner-event-ticket-management__native .list-attendee {
	margin: 0 0 1rem;
	color: var(--turner-color-heading);
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h3);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-snug);
}

.turner-event-ticket-management__native .tribe-answer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	margin: 0;
}

.turner-event-ticket-management__native .ticket-type {
	order: -1;
	margin: 0;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-snug);
}

.turner-event-ticket-management__native .ticket-type .type-label {
	font-weight: var(--turner-weight-semibold);
}

.turner-rsvp-choice__native,
.turner-rsvp-choice__native-submit {
	display: none !important;
}

.turner-rsvp-choice {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

.turner-rsvp-choice__legend {
	margin: 0;
	color: var(--turner-color-heading);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-h4) !important;
	font-weight: var(--turner-weight-semibold);
	line-height: var(--turner-leading-snug);
}

.turner-rsvp-choice__help {
	margin: 0.35rem 0 0.85rem;
	max-width: 58ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
}

.turner-rsvp-choice__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	width: 100%;
}

.turner-event-ticket-management .turner-rsvp-choice__button {
	appearance: none;
	display: grid;
	gap: 0.2rem;
	flex: 0 1 13rem;
	width: auto;
	min-width: 0;
	min-height: 3.75rem;
	margin: 0;
	padding: 0.65rem 1.1rem;
	border: 1px solid var(--turner-color-primary);
	border-radius: var(--turner-radius-pill);
	background-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-snug);
	text-align: center;
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform var(--turner-duration) var(--turner-ease),
		border-color var(--turner-duration) var(--turner-ease),
		background-color var(--turner-duration) var(--turner-ease),
		color var(--turner-duration) var(--turner-ease);
}

.turner-event-ticket-management .turner-rsvp-choice__button:not([aria-pressed="true"]):hover {
	border-color: var(--turner-color-primary-hover);
	background-color: var(--turner-color-primary-hover);
	color: var(--turner-on-primary);
}

.turner-event-ticket-management .turner-rsvp-choice__button:not([aria-pressed="true"]):active {
	transform: translateY(1px);
}

.turner-event-ticket-management .turner-rsvp-choice__button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--turner-color-primary) 28%, transparent);
	outline-offset: 3px;
}

.turner-event-ticket-management .turner-rsvp-choice__button[aria-pressed="true"] {
	border-color: var(--turner-color-primary);
	background-color: color-mix(in srgb, var(--turner-color-primary) 7%, var(--turner-color-bg));
	color: var(--turner-color-primary);
	opacity: 1;
	cursor: default;
}

.turner-rsvp-choice__label {
	font-size: var(--turner-text-body);
	font-weight: var(--turner-weight-semibold);
}

.turner-rsvp-choice__description {
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-body);
	opacity: 0.8;
}

.turner-event-ticket-management .tribe-back a {
	color: var(--turner-color-primary);
}

.turner-event-ticket-management .tribe-back a:hover,
.turner-event-ticket-management .tribe-back a:focus {
	color: var(--turner-color-primary-hover);
}

@media (max-width: 700px) {
	.turner-event-ticket-management__header,
	.turner-event-ticket-management__summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.turner-event-ticket-management__action {
		grid-column: 1;
		grid-row: auto;
	}

	.turner-event-ticket-management__detail + .turner-event-ticket-management__detail {
		border-top: 1px solid var(--turner-color-border);
		border-left: 0;
	}

	.turner-event-ticket-management__status {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.turner-event-ticket-management .turner-rsvp-choice__button {
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   Contact
   Details column beside a raised form card. The form itself is plugin output,
   so the card styles native controls generically rather than by plugin class.
   -------------------------------------------------------------------------- */

.turner-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem;
}

/* Flow spacing via gap, not adjacent-sibling margins: component resets like
   .turner-contact__list { margin: 0 } share this rule's specificity and would
   otherwise win on source order and collapse the gap above the detail list. */
.turner-contact__details {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.turner-contact__details > * { margin-block: 0; }

.turner-contact__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-contact__intro p {
	margin: 0 0 1em;
	max-width: 52ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
	text-wrap: pretty;
}
.turner-contact__intro p:last-child { margin-bottom: 0; }

.turner-contact__list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.turner-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--turner-radius);
	background-color: color-mix(in srgb, var(--turner-color-primary) 8%, transparent);
	color: var(--turner-color-primary);
}

.turner-contact__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.turner-contact__label {
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--turner-color-muted);
}

.turner-contact__value {
	color: var(--turner-color-text);
	font-size: var(--turner-text-body);
	/* Long addresses and emails must wrap rather than push the grid wide. */
	overflow-wrap: anywhere;
}

a.turner-contact__value {
	color: var(--turner-color-secondary-ink);
	text-decoration: none;
}
a.turner-contact__value:hover { text-decoration: underline; }

.turner-contact__social { align-self: start; }

/* --- Form card --- */

.turner-contact__form-card {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-bg);
	box-shadow: var(--turner-shadow-soft);
}

.turner-contact__form-heading {
	margin: 0 0 1.5rem;
	font-size: var(--turner-text-h3);
	color: var(--turner-color-heading);
}

.turner-contact__fallback {
	display: grid;
	justify-items: start;
	gap: 1.25rem;
}

.turner-contact__fallback-text {
	margin: 0;
	max-width: 46ch;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}

/* Plugin-rendered controls, styled through the tokens so the embedded form
   reads as part of the page rather than as the plugin's own default theme. */
.turner-contact__form-card input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.turner-contact__form-card select,
.turner-contact__form-card textarea {
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--turner-color-input);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-body);
	line-height: var(--turner-leading-body);
}

.turner-contact__form-card input:not([type="submit"]):focus-visible,
.turner-contact__form-card select:focus-visible,
.turner-contact__form-card textarea:focus-visible {
	outline: 2px solid var(--turner-color-secondary);
	outline-offset: 2px;
	border-color: var(--turner-color-secondary);
}

.turner-contact__form-card textarea { min-height: 8rem; resize: vertical; }

.turner-contact__form-card label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-medium);
	color: var(--turner-color-text);
}

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

/* --------------------------------------------------------------------------
   Gallery
   Photo grid where the images carry the section — no card chrome competing
   with them. The tiles are links to the full file, upgraded to the lightbox
   below by assets/js/turner-gallery.js.
   -------------------------------------------------------------------------- */

.turner-gallery__head {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.turner-gallery__head > * + * { margin-top: 1rem; }

.turner-gallery__eyebrow {
	margin: 0;
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--turner-color-secondary-ink);
}

.turner-gallery__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-gallery__intro {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
}

.turner-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turner-gallery__item { margin: 0; }

/* The frame owns the positioning so the like control sits on the photo, not
   next to the caption below it. */
.turner-gallery__frame {
	position: relative;
}

.turner-gallery__like {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.55rem;
	border: 0;
	border-radius: var(--turner-radius-pill);
	/* Same recipe as the zoom overlay right above it, so the two scrims on one
	   photo read as one system. */
	background-color: color-mix(in srgb, var(--turner-color-heading) 55%, transparent);
	color: var(--turner-on-primary);
	font-family: inherit;
	font-size: var(--turner-text-small);
	line-height: 1;
	backdrop-filter: blur(4px);
	transition: background-color var(--turner-duration) var(--turner-ease),
		transform var(--turner-duration) var(--turner-ease);
}

button.turner-gallery__like { cursor: pointer; }

button.turner-gallery__like:hover {
	background-color: color-mix(in srgb, var(--turner-color-heading) 75%, transparent);
}

button.turner-gallery__like:active { transform: scale(0.94); }

.turner-gallery__like:focus-visible {
	outline: 2px solid var(--turner-color-accent);
	outline-offset: 2px;
}

/* Two hearts stacked in the markup, one shown at a time — so pressing never
   waits on an icon being fetched or built. */
.turner-gallery__like-icon { display: inline-flex; }
.turner-gallery__like-icon--on { display: none; }
.turner-gallery__like.is-liked .turner-gallery__like-icon--off { display: none; }
.turner-gallery__like.is-liked .turner-gallery__like-icon--on { display: inline-flex; }
/* Liked turns the chip itself maroon rather than tinting the icon: the forest
   accent lands near 2.5:1 on this scrim, which fails the heart as a graphical
   object and the number beside it as text. Cream on maroon is the pairing the
   buttons already use, and it separates the two states by the whole chip
   rather than by a hue nobody can read at 14px. */
.turner-gallery__like.is-liked {
	background-color: color-mix(in srgb, var(--turner-color-primary) 88%, transparent);
	color: var(--turner-on-primary);
}

/* Specificity: the plain :hover rule above carries a pseudo-class, so without
   this the chip drops back to the unliked scrim under the pointer. */
button.turner-gallery__like.is-liked:hover {
	background-color: var(--turner-color-primary);
}

/* A photo nobody has liked shows a bare heart, with no stray gap where the
   number would go. */
.turner-gallery__like-count:empty { display: none; }

.turner-lightbox__like {
	position: static;
	display: flex;
	width: fit-content;
	margin: 0.75rem auto 0;
	padding: 0.45rem 0.8rem;
	font-size: var(--turner-text-body);
}

/* The lightbox control ships hidden and is unhidden per photo. A display rule
   beats the hidden attribute, so say so explicitly or it is never hidden. */
.turner-gallery__like[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.turner-gallery__like { transition: none; }
	button.turner-gallery__like:active { transform: none; }
}

.turner-gallery__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--turner-radius);
	background-color: var(--turner-color-surface);
	/* A fixed ratio keeps the rows even across portrait and landscape scans,
	   which is what makes a mixed-source archive read as one grid. */
	aspect-ratio: 4 / 3;
	text-decoration: none;
}

.turner-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--turner-ease);
}

.turner-gallery__link:hover .turner-gallery__img,
.turner-gallery__link:focus-visible .turner-gallery__img { transform: scale(1.05); }

.turner-gallery__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--turner-color-primary) 45%, transparent);
	color: var(--turner-on-primary);
	opacity: 0;
	transition: opacity var(--turner-duration) var(--turner-ease);
}

.turner-gallery__link:hover .turner-gallery__zoom,
.turner-gallery__link:focus-visible .turner-gallery__zoom { opacity: 1; }

.turner-gallery__caption {
	display: block;
	margin-top: 0.5rem;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	line-height: var(--turner-leading-snug);
}

.turner-gallery__empty {
	margin: 0 auto;
	max-width: 40ch;
	text-align: center;
	color: var(--turner-color-muted);
}

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

/* --- Lightbox --- */

.turner-lightbox {
	width: min(72rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--turner-on-primary);
	overflow: visible;
}

.turner-lightbox::backdrop {
	background-color: rgba(20, 14, 14, 0.88);
}

.turner-lightbox__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.turner-lightbox__figure {
	margin: 0;
	min-width: 0;
	text-align: center;
}

.turner-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	margin-inline: auto;
	border-radius: var(--turner-radius);
	object-fit: contain;
}

.turner-lightbox__caption {
	margin-top: 0.75rem;
	color: rgba(252, 251, 247, 0.85);
	font-size: var(--turner-text-small);
}

.turner-lightbox__caption[hidden] { display: none; }

.turner-lightbox__close,
.turner-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(252, 251, 247, 0.25);
	border-radius: var(--turner-radius-pill);
	background-color: rgba(20, 14, 14, 0.5);
	color: var(--turner-on-primary);
	cursor: pointer;
	transition: background-color var(--turner-duration) var(--turner-ease),
	            border-color var(--turner-duration) var(--turner-ease);
}

.turner-lightbox__close:hover,
.turner-lightbox__nav:hover {
	background-color: rgba(252, 251, 247, 0.18);
	border-color: rgba(252, 251, 247, 0.6);
}

.turner-lightbox__close {
	position: absolute;
	top: -3.5rem;
	right: 0;
}

.turner-lightbox__nav[hidden] { display: none; }

@media (max-width: 699px) {
	/* Side arrows would eat the photo on a phone; sit them under it instead. */
	.turner-lightbox__inner { flex-wrap: wrap; }
	.turner-lightbox__figure { order: -1; flex-basis: 100%; }
	.turner-lightbox__img { max-height: calc(100vh - 12rem); }
}

/* --------------------------------------------------------------------------
   Rules accordion
   <details>/<summary>, so open/close, keyboard support, and in-page find are
   the browser's. This block only supplies the chrome.
   -------------------------------------------------------------------------- */

.turner-rules__inner { max-width: 56rem; }

.turner-rules__head { margin-bottom: 2rem; }

.turner-rules__head > * + * { margin-top: 1rem; }

.turner-rules__eyebrow {
	margin: 0;
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--turner-color-secondary-ink);
}

.turner-rules__heading {
	margin: 0;
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-rules__intro {
	margin: 0;
	max-width: 65ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-lead);
	line-height: var(--turner-leading-body);
}

/* --- PDF download card --- */

.turner-rules__doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-surface);
}

.turner-rules__doc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: var(--turner-radius);
	background-color: color-mix(in srgb, var(--turner-color-primary) 10%, transparent);
	color: var(--turner-color-primary);
}

.turner-rules__doc-text {
	flex: 1 1 14rem;
	min-width: 0;
}

.turner-rules__doc-title {
	margin: 0;
	color: var(--turner-color-heading);
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h4);
	line-height: var(--turner-leading-snug);
}

.turner-rules__doc-desc {
	margin: 0.25rem 0 0;
	max-width: 52ch;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
}

.turner-rules__doc-size { opacity: 0.8; }

/* --- Sections --- */

.turner-rules__list {
	display: grid;
	gap: 0.75rem;
}

.turner-rules__section {
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius);
	background-color: var(--turner-color-bg);
	overflow: hidden;
	transition: border-color var(--turner-duration) var(--turner-ease);
}

.turner-rules__section[open] { border-color: color-mix(in srgb, var(--turner-color-primary) 35%, transparent); }

.turner-rules__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--turner-duration) var(--turner-ease);
}

/* Safari draws its own disclosure triangle unless this is cleared. */
.turner-rules__summary::-webkit-details-marker { display: none; }

.turner-rules__summary:hover { background-color: var(--turner-color-surface); }

.turner-rules__summary-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.turner-rules__title {
	color: var(--turner-color-heading);
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h4);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-snug);
}

.turner-rules__subtitle {
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
}

.turner-rules__chevron {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--turner-color-primary);
	transition: transform var(--turner-duration) var(--turner-ease);
}

.turner-rules__section[open] .turner-rules__chevron { transform: rotate(180deg); }

.turner-rules__body { padding: 0 1.25rem 1.25rem; }

.turner-rules__para {
	margin: 0 0 0.75rem;
	max-width: 70ch;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}

.turner-rules__group {
	margin: 1.25rem 0 0.5rem;
	color: var(--turner-color-primary);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
}

.turner-rules__body > .turner-rules__group:first-child { margin-top: 0; }

.turner-rules__items {
	margin: 0;
	padding-left: 1.5rem;
	display: grid;
	gap: 0.5rem;
	color: var(--turner-color-text);
	line-height: var(--turner-leading-body);
}

.turner-rules__items + .turner-rules__group { margin-top: 1.5rem; }

.turner-rules__item::marker { color: var(--turner-color-primary); }

.turner-rules__empty {
	margin: 0;
	color: var(--turner-color-muted);
}

/* --------------------------------------------------------------------------
   Forms  (turner-forms element + Forminator)
   The .turner-form wrapper is the only place Forminator's own classes are
   referenced. Its forms are seeded with colour and typography left on "theme",
   so it ships no palette of its own and everything below is additive.
   Driven by assets/js/turner-forms.js (tabs).
   -------------------------------------------------------------------------- */

.turner-forms__head {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.turner-forms__heading {
	margin: 0;
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h2);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

.turner-forms__head > * + * { margin-top: 1rem; }

/* Tabs ------------------------------------------------------------------- */

.turner-forms__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--turner-color-border);
}

.turner-forms__tab {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--turner-radius-pill);
	font-family: var(--turner-font-body);
	font-size: 0.9375rem;
	font-weight: var(--turner-weight-medium);
	color: var(--turner-color-muted);
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--turner-duration) var(--turner-ease),
		background-color var(--turner-duration) var(--turner-ease),
		border-color var(--turner-duration) var(--turner-ease);
}

.turner-forms__tab:hover {
	background-color: var(--turner-color-surface);
	color: var(--turner-color-primary);
}

.turner-forms__tab.is-active,
.turner-forms__tab[aria-selected="true"] {
	background-color: var(--turner-color-primary);
	border-color: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

/* Panels ----------------------------------------------------------------- */

.turner-forms__panel {
	max-width: 52rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-image: var(--turner-gradient-card);
	box-shadow: var(--turner-shadow-soft);
}

/* Without JS the panels are a readable stack, so they need separating. The
   enhanced group shows one at a time and the gap would be dead space. */
.turner-forms__panel + .turner-forms__panel { margin-top: 2rem; }
.turner-forms__tabs.is-enhanced .turner-forms__panel + .turner-forms__panel { margin-top: 0; }

.turner-forms__panel:focus-visible {
	outline: 2px solid var(--turner-color-secondary);
	outline-offset: 4px;
}

.turner-forms__panel-heading {
	margin: 0 0 0.5rem;
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h3);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
}

.turner-forms__blurb,
.turner-forms__fallback,
.turner-forms__empty {
	margin: 0 0 1.5rem;
	color: var(--turner-color-muted);
	line-height: var(--turner-leading-body);
}

.turner-forms__fallback,
.turner-forms__empty { margin-bottom: 0; }

/* Forminator ------------------------------------------------------------- */

/* Forminator's own grid CSS keys column widths off a `.forminator-col-md-*`
   class (see forminator-grid.open.min.css), but the field renderer this
   version actually ships (front-render.php render_field_before()) only ever
   prints plain `.forminator-col-6` / `.forminator-col-12`. That mismatch means
   every column silently falls back to their base `.forminator-col{flex:1}`
   rule and divides the row equally, regardless of the field's real span — a
   two-up row of six fields renders as six near-invisible slivers rather than
   three rows of two. Rather than depend on a plugin CSS file that doesn't
   match its own markup, the grid is owned here instead. !important is needed
   because Forminator's own `[data-grid=open] .forminator-col` rule carries
   more attribute/class specificity than a plain descendant selector can beat.
   Mobile-first: every column is full width until the two-up breakpoint. */
.turner-form .forminator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.turner-form .forminator-row:last-child { margin-bottom: 0; }

.turner-form .forminator-col {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

@media (min-width: 640px) {
	.turner-form .forminator-col-3 {
		flex-basis: calc(25% - 0.9375rem) !important;
		max-width: calc(25% - 0.9375rem) !important;
	}
	.turner-form .forminator-col-4 {
		flex-basis: calc(33.3333% - 0.8333rem) !important;
		max-width: calc(33.3333% - 0.8333rem) !important;
	}
	.turner-form .forminator-col-6 {
		flex-basis: calc(50% - 0.625rem) !important;
		max-width: calc(50% - 0.625rem) !important;
	}
	.turner-form .forminator-col-8 {
		flex-basis: calc(66.6666% - 0.4166rem) !important;
		max-width: calc(66.6666% - 0.4166rem) !important;
	}
	.turner-form .forminator-col-9 {
		flex-basis: calc(75% - 0.3125rem) !important;
		max-width: calc(75% - 0.3125rem) !important;
	}
}

.turner-form .forminator-label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-semibold);
	color: var(--turner-color-heading);
}

.turner-form .forminator-required { color: var(--turner-color-primary); }

.turner-form .forminator-description {
	margin-top: 0.375rem;
	font-size: var(--turner-text-small);
	color: var(--turner-color-muted);
}

/* Section headings inside a form. Forminator prints these as h2/h3, which sit
   below the panel heading in the document outline. */
.turner-form .forminator-title {
	margin: 0 0 0.25rem;
	font-family: var(--turner-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--turner-weight-heading);
	color: var(--turner-color-heading);
}

.turner-form .forminator-subtitle {
	margin: 0;
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-body);
	line-height: var(--turner-leading-body);
	color: var(--turner-color-muted);
}

/* A section starts a new block of fields, so give it air above and a rule. */
.turner-form .forminator-row:not(:first-child) .forminator-title {
	margin-top: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--turner-color-border);
}

.turner-form .forminator-input,
.turner-form .forminator-textarea,
.turner-form select.forminator-select2,
.turner-form .forminator-field select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--turner-color-input);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-bg);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-body);
	color: var(--turner-color-text);
	transition:
		border-color var(--turner-duration) var(--turner-ease),
		box-shadow var(--turner-duration) var(--turner-ease);
}

.turner-form .forminator-textarea {
	min-height: 8rem;
	line-height: var(--turner-leading-body);
	resize: vertical;
}

.turner-form .forminator-input:focus,
.turner-form .forminator-textarea:focus,
.turner-form .forminator-field select:focus {
	outline: none;
	border-color: var(--turner-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--turner-color-primary) 18%, transparent);
}

.turner-form .forminator-input::placeholder,
.turner-form .forminator-textarea::placeholder { color: var(--turner-color-muted); }

/* Choice fields ---------------------------------------------------------- */

.turner-form .forminator-checkbox,
.turner-form .forminator-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 0.625rem;
	font-size: var(--turner-text-body);
	line-height: var(--turner-leading-body);
	color: var(--turner-color-text);
	cursor: pointer;
}

.turner-form .forminator-checkbox:last-child,
.turner-form .forminator-radio:last-child { margin-bottom: 0; }

.turner-form .forminator-checkbox-box,
.turner-form .forminator-radio-bullet {
	flex-shrink: 0;
	margin-top: 0.2rem;
	border-color: var(--turner-color-input);
}

.turner-form input[type="checkbox"]:focus-visible + .forminator-checkbox-box,
.turner-form input[type="radio"]:focus-visible + .forminator-radio-bullet {
	outline: 2px solid var(--turner-color-secondary);
	outline-offset: 2px;
}

/* Submit ----------------------------------------------------------------- */

.turner-form .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	margin-top: 0.5rem;
	padding: 0.5rem 2rem;
	border: 2px solid transparent;
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-primary);
	box-shadow: var(--turner-shadow-soft);
	font-family: var(--turner-font-body);
	font-size: 1rem;
	font-weight: var(--turner-weight-medium);
	line-height: 1;
	color: var(--turner-on-primary);
	cursor: pointer;
	transition:
		background-color var(--turner-duration) var(--turner-ease),
		box-shadow var(--turner-duration) var(--turner-ease),
		transform var(--turner-duration) var(--turner-ease);
}

.turner-form .forminator-button-submit:hover {
	background-color: var(--turner-color-primary-hover);
	box-shadow: var(--turner-shadow-elevated);
}

.turner-form .forminator-button-submit:active { transform: translateY(1px); }

.turner-form .forminator-button-submit:focus-visible {
	outline: 2px solid var(--turner-color-secondary);
	outline-offset: 3px;
}

/* Validation + response -------------------------------------------------- */

.turner-form .forminator-error-message {
	margin-top: 0.375rem;
	font-size: var(--turner-text-small);
	color: var(--turner-color-primary);
}

.turner-form .forminator-field.forminator-has_error .forminator-input,
.turner-form .forminator-field.forminator-has_error .forminator-textarea {
	border-color: var(--turner-color-primary);
}

.turner-form .forminator-response-message {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--turner-color-accent);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-surface);
	line-height: var(--turner-leading-body);
	color: var(--turner-color-text);
}

.turner-form .forminator-response-message.forminator-error {
	border-left-color: var(--turner-color-primary);
}

.turner-form .forminator-response-message p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.turner-forms__tabs {
		/* The tablist's edge-to-edge bleed (negative margin below) still
		   extends its own margin box past this wrapper; without clipping
		   here that box widens the document and the whole page gains a
		   horizontal scroll position, even though the pills themselves
		   scroll correctly inside the tablist. */
		overflow-x: hidden;
	}

	.turner-forms__tablist {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* Let the pills reach the viewport edge while staying scrollable. */
		margin-inline: calc(var(--turner-container-pad) * -1);
		padding-inline: var(--turner-container-pad);
		scrollbar-width: none;
	}

	.turner-forms__tablist::-webkit-scrollbar { display: none; }
	.turner-forms__tab { white-space: nowrap; }
}

/* ==========================================================================
   Member area — account page and the access-denied screen
   ==========================================================================
   Both are short, text-first pages reached after a login. They share the
   narrow reading measure used elsewhere on the site rather than the full
   container width, because a list of four documents in a 1400px row reads as
   an unfinished layout.
   ========================================================================== */

.turner-account,
.turner-access-denied {
	padding-block: var(--turner-space-section-sm);
}

.turner-account__inner,
.turner-access-denied__inner {
	max-width: 64rem;
}

.turner-account__title,
.turner-access-denied__title {
	font-size: var(--turner-text-h2);
	margin-bottom: 0.75rem;
}

.turner-account__intro,
.turner-access-denied__message {
	font-size: var(--turner-text-lead);
	color: var(--turner-color-muted);
}

.turner-account__intro { max-width: 54ch; }

.turner-access-denied__help {
	color: var(--turner-color-muted);
}

.turner-account__notice {
	background: var(--turner-color-surface);
	border-left: 4px solid var(--turner-color-gold);
	border-radius: var(--turner-radius-md);
	padding: 0.875rem 1rem;
	max-width: none;
}

.turner-account__actions,
.turner-access-denied__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1.5rem 0;
	max-width: none;
}

/* --- Account facts ------------------------------------------------------- */

.turner-account__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 2rem;
	margin: 2rem 0 0;
	padding-block: 1rem;
	border-block: 1px solid var(--turner-color-border);
}

.turner-account__summary-item {
	display: grid;
	gap: 0.125rem;
}

.turner-account__summary dt {
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-semibold);
}

.turner-account__summary dd {
	margin: 0;
	color: var(--turner-color-heading);
	font-weight: var(--turner-weight-medium);
}

.turner-account__section-title {
	font-size: var(--turner-text-h3);
	margin-block: 2.5rem 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--turner-color-border);
}

.turner-account__panel-heading p,
.turner-account__security > p,
.turner-account__form-help {
	color: var(--turner-color-muted);
}

.turner-account__form-help {
	margin-top: 1.25rem;
	max-width: 62ch;
}

/* --- Editable member profile -------------------------------------------- */

.turner-account__form {
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius-lg);
	background-color: var(--turner-color-surface);
}

.turner-account__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.turner-account__fieldset + .turner-account__fieldset {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--turner-color-border);
}

.turner-account__fieldset legend {
	width: 100%;
	margin-bottom: 1rem;
	padding: 0;
	font-family: var(--turner-font-heading);
	font-size: var(--turner-text-h3);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-snug);
	color: var(--turner-color-heading);
}

.turner-account__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.turner-account__field {
	display: grid;
	align-content: start;
	gap: 0.375rem;
	min-width: 0;
}

.turner-account__field--full { grid-column: 1 / -1; }

.turner-account__field label {
	color: var(--turner-color-text);
	font-size: var(--turner-text-small);
	font-weight: var(--turner-weight-semibold);
}

.turner-account__required {
	color: var(--turner-color-muted);
	font-weight: var(--turner-weight-body);
}

.turner-account__field input,
.turner-account__field textarea {
	width: 100%;
	min-height: 2.875rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--turner-color-input);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	font: inherit;
	box-shadow: none;
}

.turner-account__field textarea {
	min-height: 9rem;
	resize: vertical;
}

.turner-account__field input:hover,
.turner-account__field textarea:hover { border-color: var(--turner-color-muted); }

.turner-account__field input:focus,
.turner-account__field textarea:focus {
	border-color: var(--turner-color-primary);
	box-shadow: 0 0 0 1px var(--turner-color-primary);
	outline: 2px solid transparent;
}

.turner-account__form-actions {
	display: flex;
	margin-top: 2rem;
}

.turner-account__form-notice {
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	border-left: 4px solid var(--turner-color-primary);
	border-radius: var(--turner-radius-md);
	background-color: var(--turner-color-surface);
}

.turner-account__form-notice--success { border-left-color: var(--turner-color-accent); }
.turner-account__form-notice p { margin: 0; max-width: none; }

.turner-account__message-form { margin-top: 1rem; }

.turner-account__security { margin-top: 2.5rem; }

@media (max-width: 699px) {
	.turner-account__summary,
	.turner-account__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.turner-account__field--full,
	.turner-account__field--half { grid-column: 1; }

	.turner-account__form-actions .turner-btn { width: 100%; }
}

.turner-account__empty {
	color: var(--turner-color-muted);
	font-style: italic;
}

/* --- Document list -------------------------------------------------------- */

.turner-account__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.turner-account__doc {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	background: var(--turner-color-surface);
	border: 1px solid var(--turner-color-border);
	border-radius: var(--turner-radius);
	padding: 1rem 1.125rem;
}

.turner-account__doc-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--turner-radius-md);
	background: var(--turner-color-primary);
	color: var(--turner-on-primary);
}

.turner-account__doc-icon svg { width: 1.25rem; height: 1.25rem; }

.turner-account__doc-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.625rem;
	min-width: 0;
}

.turner-account__doc-link {
	font-weight: var(--turner-weight-semibold);
	color: var(--turner-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.turner-account__doc-link:hover { color: var(--turner-color-primary-hover); }

.turner-account__doc-badge {
	flex: none;
	background: var(--turner-color-gold);
	color: var(--turner-on-gold);
	border-radius: var(--turner-radius-pill);
	font-size: var(--turner-text-eyebrow);
	font-weight: var(--turner-weight-semibold);
	letter-spacing: var(--turner-tracking-eyebrow);
	text-transform: uppercase;
	padding: 0.125rem 0.5rem;
}

.turner-account__doc-desc {
	flex-basis: 100%;
	color: var(--turner-color-muted);
	font-size: var(--turner-text-small);
	margin: 0;
}

/* bricks-dev:font:libre-baskerville — locally hosted via add_local_font (GDPR-safe, no third-party CDN) */
@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
/* No new custom property here on purpose: the @font-face above declares the
   same family name that --turner-font-heading in style.css already points at,
   so the existing token now resolves to the local file with no change. A
   second variable naming the same family would be two tokens for one thing. */

/* bricks-dev:font:source-sans-3 — locally hosted via add_local_font (GDPR-safe, no third-party CDN) */
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* As above: --turner-font-body in style.css already names this family. */