/*!
Theme Name: Wheel With Me Foundation
Theme URI: https://wheelwithmefoundation.org/
Author: London Web Nerd
Author URI: https://londonwebnerd.com/
Description: Custom theme for the Wheel With Me Foundation, a 501(c)3 non-profit supporting wheelchair users and people living with spinal cord injury. Built on Underscores. Content is managed with Advanced Custom Fields Pro (page sections, site settings, blocks) and custom post types for events, shop products, leadership, resources and testimonials.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wheelwithme
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, one-column

This theme, like WordPress, is licensed under the GPL.

Wheel With Me Foundation is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   STYLESHEET GUIDE
   ==========================================================================

   HOW THIS FILE IS ORGANISED
   --------------------------
   One stylesheet, mobile-first, no build step. Rules run from the most general
   (tokens, base elements) to the most specific (page components). Every
   numbered part below starts with a banner like this one. Search for "[n.]"
   to jump to a part.

   NAMING
   ------
   Components use BEM-style names: .block, .block__element, .block--modifier
   (for example .card, .card__title, .card--yellow). Section colours use
   .section--{ground|white|mint|teal}. State classes are .is-active etc.
   WordPress core classes (.alignleft, .screen-reader-text) keep their names.

   BREAKPOINTS (min-width, mobile-first)
   -------------------------------------
   700px   2-column grids
   768px   larger gutters, radii and card padding
   900px   desktop header, split hero, side-by-side layouts
   1000px  3- and 4-column grids
   CSS variables cannot be used inside media queries, so these values are
   repeated. Keep them to this list.

   WHERE THE MARKUP LIVES
   ----------------------
   Header / footer ........ header.php, footer.php
   Heroes ................. template-parts/hero-page.php, hero-front.php
   Page sections .......... template-parts/sections/{layout}.php
   Cards .................. template-parts/card-event.php, card-product.php, card-post.php
   Blog ................... home.php, single.php, archive.php, search.php, comments.php, inc/blog.php
   ACF block .............. template-parts/blocks/callout.php
   Forms .................. inc/forms.php

   DESIGN TOKENS
   -------------
   Colours, fonts, spacing and radii are CSS custom properties in part [1.].
   Change a brand colour there and the whole site follows. Colours are the
   proposed palette from the Figma mockups, not confirmed brand colours.

   TABLE OF CONTENTS
   -----------------
   [1.]  Design tokens
   [2.]  Reset and base elements
   [3.]  Layout helpers and utilities
   [4.]  Buttons
   [5.]  Header and navigation
   [6.]  Heroes
   [7.]  Sections
   [8.]  Cards and grids
   [9.]  Components
         9.1  Big numbers
         9.2  People
         9.3  Events
         9.4  Shop
         9.5  Donate box
         9.6  Call to action band
         9.7  Testimonials
         9.8  Road band
         9.9  Gallery
         9.10 Questions and answers
         9.11 Callout block
   [10.] Forms
   [11.] Footer
   [12.] WordPress content and fallback templates
   [13.] Accessibility and reduced motion
   [14.] Motion (wheel rotation, reveals)
   [15.] WooCommerce (only when the plugin is active)
   [16.] Audit fixes (responsive and accessibility corrections)
   [17.] Blog (cards, single post, comments)
   [18.] Author page
   [19.] Cookie banner
   [20.] Logo animation
   (The print rules sit at the very end.)
   ========================================================================== */


/* ==========================================================================
   [1.] DESIGN TOKENS
   ========================================================================== */

:root {
	/* Colour: neutrals and text */
	--ink: #0e2a30;          /* Body text, outlines, dark buttons. */
	--ink-soft: #324c52;     /* Secondary text (contrast 9:1 on white). */
	--muted: #9db4b1;        /* Footer fine print on dark teal only. */
	--border: #bfd3d0;       /* Input borders, hairlines. */
	--ground: #f5f8f7;       /* Default page background. */
	--white: #fff;

	/* Colour: brand */
	--teal: #0b6e78;         /* Links, kickers, teal sections. */
	--teal-card: #08565f;    /* Teal cards: AA contrast for small text. */
	--teal-deep: #06353c;    /* Hero background. */
	--teal-darkest: #041f24; /* Utility bar and footer. */
	--mint: #d9eee9;         /* Soft section and card background. */
	--mint-light: #bfe3dc;   /* Text on dark teal, photo placeholders. */
	--yellow: #ffc93c;       /* Primary accent: buttons, highlights. */
	--coral: #ff6b4a;        /* Sticker accent. Use sparingly. */

	/* Typography */
	--font-display: "Bricolage Grotesque", system-ui, sans-serif; /* Headings. */
	--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--max: 1280px;           /* Widest content column. */
	--max-narrow: 840px;     /* Reading column. */
	--gutter: 20px;          /* Page side padding (raised at 768px). */
	--radius: 24px;          /* Card and image corners (raised at 768px). */
	--section-space: 48px;   /* Section top/bottom padding (raised at 900px). */

	/* Effects */
	--shadow-hard: 4px 4px 0 var(--ink); /* The signature offset outline shadow. */

	/* Stacking order */
	--z-header: 50;
	--z-skip: 100000;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
		--radius: 28px;
	}
}

@media (min-width: 900px) {
	:root {
		--section-space: 88px;
	}
}


/* ==========================================================================
   [2.] RESET AND BASE ELEMENTS
   Based on Underscores/normalize, trimmed to what the design needs.
   ========================================================================== */

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

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

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

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

/* Headings use the display face with tight tracking. Sizes are set per component. */
h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--teal);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--teal-deep);
}

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

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}


/* ==========================================================================
   [3.] LAYOUT HELPERS AND UTILITIES
   ========================================================================== */

/* Centred content column with side gutters. Used inside every full-width band. */
.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--max-narrow);
}

/* Sticky-footer page frame: footer sits at the bottom on short pages. */
.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-main {
	flex: 1 0 auto;
}

/* Visually hidden but available to screen readers (WordPress standard). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
	word-wrap: normal;
}

/* Revealed on keyboard focus: the "Skip to content" link. */
.screen-reader-text:focus,
.skip-link:focus {
	z-index: var(--z-skip);
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14px 22px;
	clip: auto;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	position: fixed;
}

/* Small uppercase label above headings (yellow on dark heroes). */
.eyebrow {
	margin: 0 0 12px;
	color: var(--yellow);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.eyebrow {
		font-size: 15px;
	}
}

/* Highlighted words inside a heading, output by wheelwithme_highlight(). */
.hl {
	color: var(--yellow);
}


/* ==========================================================================
   [4.] BUTTONS
   .btn is the yellow pill. Modifiers: --sm (compact), --dark, --outline-light.
   Minimum height is 44-48px for comfortable touch targets.
   ========================================================================== */

.btn,
.wp-block-button__link {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border: 2px solid var(--yellow);
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover,
.wp-block-button__link:hover {
	border-color: #ffd766;
	background: #ffd766;
	color: var(--ink);
	box-shadow: 0 4px 0 rgba(14, 42, 48, 0.25);
	transform: translateY(-2px);
}

.btn--sm {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}

/* Dark button for use on yellow backgrounds. */
.btn--dark {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.btn--dark:hover {
	border-color: var(--teal-deep);
	background: var(--teal-deep);
	color: var(--white);
}

/* Outlined button for use on dark teal (hero secondary action). */
.btn--outline-light {
	border-color: var(--white);
	background: transparent;
	color: var(--white);
}

.btn--outline-light:hover {
	border-color: var(--white);
	background: var(--white);
	color: var(--ink);
}


/* ==========================================================================
   [5.] HEADER AND NAVIGATION
   Markup: header.php. Mobile: logo + Donate + menu button; the menu opens as a
   panel under the header (js/navigation.js toggles .toggled on the <nav>).
   Desktop (900px+): utility bar on top, inline menu, no menu button.
   ========================================================================== */

/* Utility bar: phone, email and Donate. Hidden on mobile (Donate moves into the header). */
.utility-bar {
	display: none;
	background: var(--teal-darkest);
	color: var(--mint-light);
	font-size: 14px;
}

.utility-bar a:not(.btn) {
	color: inherit;
}

.utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
}

.utility-bar__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0;
}

@media (min-width: 900px) {
	.utility-bar {
		display: block;
	}
}

/* Header bar. position:relative anchors the mobile menu panel. */
.site-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 12px;
}

/* Logo: custom logo image if set, otherwise the placeholder mark + site name. */
.site-logo,
.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--teal);
	text-decoration: none;
}

.site-branding .custom-logo {
	width: auto;
	max-height: 52px;
}

.site-logo svg {
	display: block;
	width: auto;
	height: 46px;
}

.site-title {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Round menu button (mobile only). */
.menu-toggle {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ground);
	color: var(--ink);
	cursor: pointer;
}

/* Menu lists. Mobile default: full-width panel, hidden until .toggled. */
.main-navigation ul {
	list-style: none;
}

.main-navigation .nav-menu,
.main-navigation .menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	padding: 8px var(--gutter) 24px;
	border-top: 1px solid var(--border);
	background: var(--white);
	box-shadow: 0 16px 24px rgba(14, 42, 48, 0.12);
}

.main-navigation.toggled .nav-menu,
.main-navigation.toggled .menu {
	display: block;
}

.main-navigation li a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--ground);
	color: var(--ink);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

/* Current page: yellow underline. */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a {
	box-shadow: inset 0 -3px 0 var(--yellow);
}

.main-navigation .sub-menu {
	padding-inline-start: 16px;
	list-style: none;
}

@media (min-width: 900px) {
	.site-header__inner {
		padding-block: 18px;
	}

	.site-logo svg {
		height: 62px;
	}

	.site-title {
		font-size: 20px;
	}

	.header-donate,
	.menu-toggle {
		display: none;
	}

	/* Inline desktop menu. */
	.main-navigation .nav-menu,
	.main-navigation .menu {
		position: static;
		display: flex;
		align-items: center;
		gap: 28px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.main-navigation li {
		position: relative;
	}

	.main-navigation li a {
		padding: 4px 0;
		border: 0;
		font-size: 16px;
	}

	.main-navigation li a:hover {
		color: var(--teal);
	}

	/* Dropdown for child items. Opens on hover and keyboard focus. */
	.main-navigation .sub-menu {
		position: absolute;
		z-index: 10;
		top: 100%;
		left: -16px;
		display: none;
		min-width: 220px;
		padding: 12px 16px;
		border: 2px solid var(--ink);
		border-radius: 16px;
		background: var(--white);
		box-shadow: var(--shadow-hard);
	}

	.main-navigation li:hover > .sub-menu,
	.main-navigation li.focus > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		display: block;
	}

	.main-navigation .sub-menu a {
		padding: 8px 0;
	}
}


/* ==========================================================================
   [6.] HEROES
   Two variants on a deep teal ground:
   .hero--page  inner pages: breadcrumb, eyebrow, H1, intro; yellow disc + wheel
                illustration bleeding off the top-right corner.
   .hero--front home page: copy on the left, framed photo on the right.
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--teal-deep);
	color: var(--white);
}

.hero__inner {
	position: relative; /* Keeps copy above the decorative disc and wheel. */
	padding-block: 40px 48px;
}

.hero__copy {
	max-width: 780px;
}

.hero__title {
	margin: 0 0 16px;
	font-size: clamp(2.75rem, 9vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.hero__lede {
	max-width: 620px;
	margin: 0;
	color: var(--mint-light);
	font-size: 17px;
	line-height: 1.55;
}

/* 6.1 Decor: yellow disc and wheel, positioned off the corner so they never sit behind the title. */
.hero__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__disc {
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--yellow);
}

.hero--page .hero__disc {
	top: -130px;
	right: -110px;
}

.hero__wheel {
	position: absolute;
	top: -105px;
	right: -85px;
	width: 170px;
	height: 170px;
}

.hero__wheel .wheel {
	width: 100%;
	height: 100%;
}

/* 6.2 Breadcrumb (wheelwithme_breadcrumb()) */
.breadcrumb {
	margin-bottom: 16px;
	font-size: 14px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mint-light);
}

.breadcrumb li + li::before {
	margin-right: 8px;
	content: "/";
}

.breadcrumb a {
	color: inherit;
}

@media (min-width: 900px) {
	.hero__inner {
		padding-block: 72px 80px;
	}

	.hero__lede {
		font-size: 21px;
		line-height: 1.5;
	}

	.hero--page .hero__disc {
		top: -150px;
		right: -80px;
		width: 520px;
		height: 520px;
	}

	.hero__wheel {
		top: -80px;
		right: -10px;
		width: 380px;
		height: 380px;
	}
}

/* 6.3 Front page hero: stacked on mobile, two columns from 900px. */
.hero--front .hero__inner--split {
	display: grid;
	gap: 40px;
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
}

.hero__media {
	position: relative;
	width: 100%;
	max-width: 520px;
	justify-self: center;
	padding: 0 16px 16px 0;
}

.hero--front .hero__copy {
	position: relative;
	z-index: 2; /* Keeps the buttons above the yellow disc on small screens. */
	max-width: 680px;
}

.hero--front .hero__title {
	font-size: clamp(3rem, 11vw, 5.25rem);
}

.hero--front .hero__title .hl {
	white-space: nowrap;
}

/* Big wheel illustration with the photo in the hub. It bleeds off the top right. */
.hero__media {
	position: relative;
	width: 100%;
	max-width: 560px;
	justify-self: center;
	aspect-ratio: 1;
}

.hero--front .hero__disc {
	z-index: 0;
	top: 6%;
	right: -40%;
	width: 110%;
	height: auto;
	aspect-ratio: 1;
}

/* Teal rim of the chair frame peeking out below the wheel. */
.hero__frame {
	position: absolute;
	z-index: 0;
	bottom: -26%;
	left: 50%;
	width: 30%;
	aspect-ratio: 1;
	border: clamp(14px, 4vw, 26px) solid var(--teal);
	border-radius: 50%;
	transform: translateX(-50%);
}

.hero-wheel {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.hero-wheel__spin,
.hero-wheel__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-tire {
	fill: none;
	stroke: var(--teal-darkest);
	stroke-width: 8;
}

.hw-tread {
	fill: none;
	stroke: var(--mint-light);
	stroke-dasharray: 1.8 3.4;
	stroke-width: 1.8;
}

.hw-rim {
	fill: var(--yellow);
	stroke: var(--white);
	stroke-width: 0.9;
}

.hw-spokes line {
	stroke: var(--ink);
	stroke-linecap: round;
	stroke-width: 0.9;
}

.hw-hub {
	fill: none;
	stroke: var(--ink);
	stroke-width: 3.2;
}

/* Photo circle. Stays upright while the wheel turns behind it. */
.hero-wheel__photo {
	position: absolute;
	top: 25.25%;
	left: 25.25%;
	overflow: hidden;
	width: 49.5%;
	height: 49.5%;
	border-radius: 50%;
	background: var(--mint-light);
}

/* Photos stack in the hub; the active one fades and settles in. */
.hero-wheel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-wheel__slide.is-active {
	opacity: 1;
	transform: none;
}

.hero-wheel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Caption under the photo (spoke caption set in ACF). */
.hero-wheel__caption {
	position: absolute;
	bottom: 9%;
	left: 50%;
	max-width: 86%;
	padding: 3px 12px;
	overflow: hidden;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(11px, 1.7vw, 15px);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translateX(-50%);
}

/* Placeholder label shown until a main photo is chosen. */
.hero-wheel__label {
	margin-top: 40%;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--white);
	color: var(--ink-soft);
	font-size: 14px;
}

/* Interactive spokes: a coral dot marks a spoke that has a photo. */
.hw-spoke.is-linked {
	cursor: pointer;
	outline: none;
}

.hw-hit {
	fill: none;
	pointer-events: stroke;
	stroke: transparent;
	stroke-linecap: round;
	stroke-width: 8;
}

.hw-spoke .hw-line {
	transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.hw-spoke.is-linked:hover .hw-line,
.hw-spoke.is-linked:focus-visible .hw-line,
.hw-spoke.is-active .hw-line {
	stroke: var(--coral);
	stroke-width: 2.2;
}

.hw-dot {
	fill: var(--coral);
	stroke: var(--ink);
	stroke-width: 0.6;
	transform-box: fill-box;
	transform-origin: center;
	animation: wwm-dot 2.6s ease-in-out infinite;
}

.hw-spoke.is-linked:hover .hw-dot,
.hw-spoke.is-linked:focus-visible .hw-dot,
.hw-spoke.is-active .hw-dot {
	animation: none;
	transform: scale(1.8);
	transition: transform 0.2s ease;
}

.hw-spoke.is-linked:focus-visible .hw-dot {
	stroke: var(--teal-darkest);
	stroke-width: 1.2;
}

/* Hint under the buttons, with a pulsing dot that matches the spoke dots. */
.hero__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 440px;
	margin: 20px 0 0;
	color: var(--mint-light);
	font-size: 15px;
}

.hero__hint::before {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--coral);
	animation: wwm-dot 2.6s ease-in-out infinite;
	content: "";
}

/* Tilted coral sticker (hashtag). */
.hero__sticker {
	position: absolute;
	z-index: 2;
	bottom: 8%;
	left: -2%;
	margin: 0;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--coral);
	box-shadow: 3px 3px 0 var(--teal-darkest);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(16px, 2.2vw, 26px);
	font-weight: 800;
	transform: rotate(-6deg);
}

@media (min-width: 900px) {
	.hero--front .hero__inner--split {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: center;
		min-height: 520px;
	}

	.hero--front .hero__disc {
		top: -18%;
		right: -38%;
		width: 128%;
	}

	.hero--front .hero__media {
		max-width: 520px;
		margin-right: -40px;
	}

	.hero__actions {
		flex-direction: row;
	}
}


/* ==========================================================================
   [7.] SECTIONS
   Every "Page Sections" layout renders one .section band (or .cta / .road-band).
   Background modifiers match the ACF "Background" choices.
   ========================================================================== */

.section {
	padding-block: var(--section-space);
}

.section--ground {
	background: var(--ground);
}

.section--white {
	background: var(--white);
}

.section--mint {
	background: var(--mint);
}

.section--teal {
	background: var(--teal);
	color: var(--white);
}

/* Heading + intro block at the top of a section (wheelwithme_section_head()). */
.section__head {
	max-width: 760px;
	margin-bottom: 28px;
}

.section__title {
	margin: 0 0 16px;
	font-size: clamp(1.9rem, 5vw, 3rem);
	line-height: 1.02;
}

.section__intro {
	margin: 0;
	color: var(--ink-soft);
	font-size: 18px;
}

.section--teal .section__intro {
	color: var(--mint-light);
}

.section__more {
	margin: 28px 0 0;
}

/* Two-column split: heading/aside on the left, body on the right (stacked on mobile). */
.split {
	display: grid;
	gap: 24px;
}

.split__head .section__title {
	margin-bottom: 12px;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
	}
}

/* Image + text pair. --left puts the image first on desktop. */
.image-text {
	display: grid;
	gap: 32px;
	align-items: center;
}

.image-text__media img {
	width: 100%;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-hard);
}

.image-text__placeholder {
	display: flex;
	aspect-ratio: 4 / 3;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--mint-light);
	box-shadow: var(--shadow-hard);
}

@media (min-width: 900px) {
	.image-text {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}

	.image-text--left .image-text__media {
		order: -1;
	}
}


/* ==========================================================================
   [8.] CARDS AND GRIDS
   .grid--{2|3|4} sets the desktop column count (1 column on mobile, 2 from
   700px, full count from 1000px). .card is the outlined, hard-shadow tile used
   for cards, people, events, products and the donate box.
   Colour modifiers: --white (default), --mint, --yellow, --teal, --plain (no shadow).
   ========================================================================== */

.grid {
	display: grid;
	gap: 16px;
	list-style: none;
}

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

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

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

.card {
	position: relative; /* Anchor for the stretched link below. */
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow-hard);
	color: var(--ink);
}

.card--mint {
	background: var(--mint);
}

.card--yellow {
	background: var(--yellow);
}

.card--teal {
	background: var(--teal-card);
	color: var(--white);
}

.card--plain {
	box-shadow: none;
}

@media (min-width: 768px) {
	.card {
		padding: 32px;
	}
}

/* Round icon badge at the top of a card. */
.card__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border: 2.5px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
}

.card__kicker {
	margin: 0;
	color: var(--teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.card--teal .card__kicker {
	color: var(--yellow);
}

.card__title {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	line-height: 1.1;
}

.card__title--sm {
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

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

.card__text {
	margin: 0;
	color: var(--ink-soft);
	font-size: 16px;
}

.card--teal .card__text {
	color: var(--mint-light);
}

.card--yellow .card__text,
.card--mint .card__text {
	color: var(--ink);
}

/* Link at the bottom of a card, with an arrow. */
.card__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.card:not(.card--teal) .card__link {
	color: var(--teal);
}

.card--teal .card__link {
	color: var(--yellow);
}

.card__link::after {
	content: " →";
}

/* Stretched link: the whole card is clickable via the link's ::before. */
.card .card__link::before,
.card__title a::before {
	position: absolute;
	inset: 0;
	content: "";
}

.card__link:hover,
.card__title a:hover {
	text-decoration: underline;
}

.card:focus-within {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

/* Buttons inside cards sit above the stretched link. */
.card .btn,
.card .product-card__actions a {
	position: relative;
	z-index: 1;
}

.empty-state {
	align-items: flex-start;
}


/* ==========================================================================
   [9.] COMPONENTS
   ========================================================================== */

/* ---- 9.1 Big numbers (layout: stats) ---- */

.stats {
	display: grid;
	gap: 20px;
	margin: 0 0 20px;
	list-style: none;
}

.stats__number {
	display: block;
	color: var(--teal);
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 10vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.stats__label {
	display: block;
	font-size: 18px;
}

.stats__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

@media (min-width: 768px) {
	.stats {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 24px;
	}
}

/* ---- 9.2 People (layout: people) ---- */

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

.person__photo {
	display: flex;
	width: 140px;
	height: 140px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--mint-light);
}

.person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person__initial {
	color: var(--teal-deep);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 800;
}

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

@media (min-width: 700px) {
	.person {
		flex-direction: row;
		align-items: flex-start;
	}

	.person__photo {
		width: 160px;
		height: 160px;
	}
}

/* ---- 9.3 Events (archive, cards, single) ---- */

/* Upcoming / Past filter pills. */
.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.tabs__link {
	padding: 10px 20px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.tabs__link.is-active {
	background: var(--ink);
	color: var(--white);
}

.event-card__date {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--yellow);
	font-size: 14px;
	font-weight: 700;
}

/* Label/value list on the single event page. */
.facts {
	display: grid;
	gap: 16px;
	margin: 0 0 24px;
}

.facts dt {
	color: var(--teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.facts dd {
	margin: 0;
	font-size: 18px;
}

/* ---- 9.4 Shop ---- */

.product-card {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.product-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mint-light);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__placeholder {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 24px;
}

.product-card__price {
	margin: 0;
	color: var(--teal);
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.product-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.product-card__actions .card__link {
	margin: 0;
}

/* ---- 9.5 Donate box (layout: donate) ---- */

.donate {
	display: grid;
	gap: 24px;
}

.donate__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

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

.donate__qr-img {
	width: 100%;
	max-width: 200px;
	height: auto;
}

@media (min-width: 900px) {
	.donate {
		grid-template-columns: 2fr 1fr;
		align-items: stretch;
	}
}

/* ---- 9.6 Call to action band (layout: cta) ---- */

.cta {
	padding-block: 48px;
}

.cta--yellow {
	background: var(--yellow);
	color: var(--ink);
}

.cta--teal {
	background: var(--teal);
	color: var(--white);
}

.cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cta__title {
	margin: 0 0 8px;
	font-size: clamp(1.9rem, 5vw, 3rem);
}

.cta__copy p {
	margin: 0;
	font-size: 18px;
}

@media (min-width: 900px) {
	.cta {
		padding-block: 72px;
	}

	.cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}
}

/* ---- 9.7 Testimonials (layout: testimonials) ---- */

.quote {
	margin: 0;
	padding: 28px;
	border: 2px solid var(--white);
	border-radius: var(--radius);
}

.quote blockquote {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.quote blockquote p {
	margin: 0;
}

.quote figcaption {
	color: var(--mint-light);
	font-weight: 600;
}

.quote figcaption span {
	display: block;
	font-size: 14px;
	font-weight: 400;
}

/* ---- 9.8 Road band (layout: road_band) ----
   A strip of words over a dashed centre line, like a road lane marking. */

.road-band {
	position: relative;
	padding-block: 18px;
	overflow: hidden;
}

.road-band--ink {
	background: var(--ink);
	color: var(--white);
}

.road-band--yellow {
	background: var(--yellow);
	color: var(--ink);
}

/* The dashed lane line. */
.road-band::before {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 0;
	border-top: 4px dashed currentcolor;
	content: "";
	opacity: 0.2;
}

.road-band__words {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin: 0;
	list-style: none;
}

.road-band__words li {
	padding: 6px 18px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.road-band__words {
		gap: 8px 48px;
	}

	.road-band__words li {
		font-size: 1.5rem;
	}
}

/* Pills take the band colour so the dashed line passes behind them. */
.road-band--ink li {
	background: var(--ink);
}

.road-band--yellow li {
	background: var(--yellow);
}

/* ---- 9.9 Gallery (layout: gallery) ---- */

.gallery {
	display: grid;
	gap: 12px;
	list-style: none;
}

.gallery__item figure {
	margin: 0;
}

.gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	object-fit: cover;
}

.gallery__item figcaption {
	margin-top: 8px;
	color: var(--ink-soft);
	font-size: 14px;
}

@media (min-width: 700px) {
	.gallery--2,
	.gallery--3,
	.gallery--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

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

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

/* ---- 9.10 Questions and answers (layout: faq) ----
   Uses native <details>, so it works without JavaScript. */

.faq {
	display: grid;
	gap: 12px;
}

.faq__item {
	border: 2px solid var(--ink);
	border-radius: 18px;
	background: var(--white);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

/* Plus / minus indicator. */
.faq__question::after {
	flex: 0 0 auto;
	color: var(--teal);
	font-size: 1.6rem;
	line-height: 1;
	content: "+";
}

.faq__item[open] .faq__question::after {
	content: "−";
}

.faq__answer {
	padding: 0 22px 20px;
	color: var(--ink-soft);
}

/* ---- 9.11 Callout block (ACF block "Callout") ---- */

.callout {
	margin-block: 1.5em;
}


/* ==========================================================================
   [10.] FORMS
   Markup: inc/forms.php (contact, grants, newsletter). Field = label + input.
   .form__hp is the spam-trap field, moved off-screen (not display:none, which
   some bots detect).
   ========================================================================== */

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

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

.field label {
	font-size: 15px;
	font-weight: 700;
}

.field input,
.field textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 2px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
}

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

.field input:focus,
.field textarea:focus {
	border-color: var(--teal);
	outline: 3px solid rgba(11, 110, 120, 0.25);
}

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

.form__hp {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

/* Success / error message after submitting. */
.form-notice {
	margin: 0;
	padding: 12px 16px;
	border-radius: 14px;
	font-weight: 600;
}

.form-notice--success {
	background: var(--mint);
	color: var(--teal-deep);
}

.form-notice--error {
	background: #ffe3dc;
	color: #8a2a12;
}

.contact-phone {
	font-size: 20px;
	font-weight: 700;
}


/* ==========================================================================
   [11.] FOOTER
   Markup: footer.php. Newsletter row, link rows (menu + social), legal row.
   Stacked on mobile; rows align horizontally from 900px.
   ========================================================================== */

.site-footer {
	background: var(--teal-darkest);
	color: var(--mint-light);
}

.site-footer a {
	color: var(--mint-light);
}

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

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-block: 40px;
}

.site-footer__heading {
	margin: 0 0 16px;
	color: var(--white);
	font-size: 1.75rem;
}

/* Newsletter form: label is hidden visually (placeholder-less pill input). */
.site-footer .form {
	flex-direction: column;
}

.site-footer .field label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.site-footer .field input {
	padding-inline: 24px;
	border-color: var(--white);
	border-radius: 999px;
}

.site-footer .form .btn {
	align-self: stretch;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-menu,
.social-links,
.legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	list-style: none;
	font-size: 15px;
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--muted);
	font-size: 14px;
}

.site-footer__legal p {
	margin: 0;
}

@media (min-width: 900px) {
	.site-footer__inner {
		gap: 36px;
		padding-block: 56px;
	}

	.site-footer__newsletter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.site-footer__heading {
		margin: 0;
	}

	.site-footer .form {
		flex-direction: row;
	}

	.site-footer .form .btn {
		align-self: auto;
	}

	.site-footer .field {
		min-width: 360px;
	}

	.site-footer__links {
		flex-direction: row;
		justify-content: space-between;
	}

	.site-footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
}


/* ==========================================================================
   [12.] WORDPRESS CONTENT AND FALLBACK TEMPLATES
   Editor content (.entry-content), pagination, search form and core block
   alignment classes. The blog itself is part [17.] at the end of this file.
   ========================================================================== */

.entry-title {
	font-size: clamp(2rem, 5vw, 3rem);
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-meta,
.entry-footer {
	color: var(--ink-soft);
	font-size: 14px;
}

.entry-footer {
	padding-block: 24px;
}

.post-thumbnail img {
	border-radius: var(--radius);
}

/* Vertical rhythm for editor content. */
.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.4em;
}

.entry-content--lead {
	padding-block: 48px;
}

.page-links,
.posts-navigation,
.post-navigation,
.pagination {
	margin-top: 32px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	padding: 8px 14px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--ink);
	color: var(--white);
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.search-field {
	min-height: 48px;
	padding: 8px 16px;
	border: 2px solid var(--border);
	border-radius: 999px;
}

.search-submit {
	min-height: 48px;
	padding: 8px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--yellow);
	font-weight: 700;
	cursor: pointer;
}

/* Core block alignment and captions. */
.alignwide {
	max-width: var(--max);
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption-text,
.gallery-caption {
	color: var(--ink-soft);
	font-size: 14px;
}


/* ==========================================================================
   [13.] ACCESSIBILITY, MOTION AND PRINT
   ========================================================================== */

/* Visible keyboard focus everywhere; switches to yellow on dark backgrounds. */
:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

.hero :focus-visible,
.site-footer :focus-visible,
.section--teal :focus-visible,
.card--teal :focus-visible {
	outline-color: var(--yellow);
}

/* Respect the "reduce motion" setting: no transitions, no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   [14.] MOTION
   Wheel rotation (roll in, slow coast, turns with scroll) plus subtle reveals.
   Scroll-driven rotation and reveals are set up by js/motion.js, which adds
   .js to <html>. Without JS everything is simply visible and static.
   ========================================================================== */

@keyframes wwm-roll-in {
	from {
		opacity: 0;
		transform: translateX(32%) rotate(260deg);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

@keyframes wwm-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wwm-dot {
	50% {
		transform: scale(1.45);
	}
}

@keyframes wwm-float {
	50% {
		transform: scale(1.035);
	}
}

@keyframes wwm-wobble {
	50% {
		transform: translateY(-5px) rotate(-3deg);
	}
}

@keyframes wwm-lane {
	to {
		background-position: -64px 0;
	}
}

/* 14.1 Home hero: the wheel rolls in, then coasts; scroll turns it further. */
.hero-wheel {
	animation: wwm-roll-in 1.6s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

.hero-wheel__spin {
	transform: rotate(calc(var(--wheel-scroll, 0) * 1deg));
	will-change: transform;
}

.is-spinning .hero-wheel__svg {
	animation: wwm-spin 70s linear infinite;
}

/* Hold still while someone points at the wheel so spokes are easy to hit. */
.hero-wheel:hover .hero-wheel__svg,
.hero-wheel:focus-within .hero-wheel__svg,
.hero-wheel.is-engaged .hero-wheel__svg {
	animation-play-state: paused;
}

.hero--front .hero__disc {
	animation: wwm-float 9s ease-in-out infinite;
}

.hero__sticker {
	animation: wwm-wobble 5s ease-in-out infinite;
}

.hero--front .hero__copy > * {
	animation: wwm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero--front .hero__copy > :nth-child(2) {
	animation-delay: 0.1s;
}

.hero--front .hero__copy > :nth-child(3) {
	animation-delay: 0.2s;
}

.hero--front .hero__copy > :nth-child(4) {
	animation-delay: 0.3s;
}

/* 14.2 Inner page hero wheel and header logo. */
.hero__wheel .wheel {
	animation: wwm-spin 90s linear infinite;
}

.site-logo .logo-mark {
	transform-origin: 60px 60px;
	transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.site-logo:hover .logo-mark,
.site-logo:focus-visible .logo-mark {
	transform: rotate(120deg);
}

/* 14.3 The yellow road band lane line drives along. */
.road-band::before {
	border-top: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, currentcolor 0 32px, transparent 32px 64px);
	animation: wwm-lane 2.4s linear infinite;
}

/* 14.4 Buttons and cards lift on hover (only on devices that can hover). */
.btn,
.card {
	transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), box-shadow 0.25s ease;
}

.card__icon {
	transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.25s ease;
}

.card__link::after {
	display: inline-block;
	transition: transform 0.25s ease;
}

.person__photo img,
.product-card__media img {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

	.card:hover {
		box-shadow: 7px 7px 0 var(--ink);
		transform: translate(-3px, -3px);
	}

	.card:hover .card__icon {
		background: var(--yellow);
		transform: rotate(-10deg) scale(1.1);
	}

	.card:hover .card__link::after {
		transform: translateX(5px);
	}

	.card:hover .person__photo img,
	.card:hover .product-card__media img {
		transform: scale(1.06);
	}
}

.card:active {
	box-shadow: 2px 2px 0 var(--ink);
	transform: translate(1px, 1px);
}

/* 14.5 Scroll reveals (only when JS is running). */
.js [data-reveal] {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.hero-wheel,
	.hero-wheel__svg,
	.hero__disc,
	.hero__sticker,
	.hero__copy > *,
	.hero__wheel .wheel,
	.road-band::before {
		animation: none !important;
	}

	.hero-wheel__spin {
		transform: none !important;
	}

	.js [data-reveal] {
		opacity: 1;
		translate: none;
	}
}

/* ==========================================================================
   [15.] WOOCOMMERCE
   Only used when WooCommerce is active (inc/woocommerce.php). WooCommerce's
   general stylesheet is switched off, so the shop, product, cart, checkout
   and account pages are styled here with the same tokens as the rest.
   ========================================================================== */

/* 15.1 Header cart link */
.header-cart {
	position: relative;
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	transition: transform 0.2s ease, background 0.2s ease;
}

.site-header__actions .header-cart {
	margin-right: 8px;
}

.header-cart:hover {
	background: var(--mint);
	transform: translateY(-2px);
}

.header-cart__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	padding: 0 5px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--coral);
	color: var(--ink);
	font-size: 11px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
}

/* 15.2 Breadcrumb on product pages */
.woo-breadcrumb {
	margin-bottom: 24px;
	color: var(--ink-soft);
	font-size: 14px;
}

.woo-breadcrumb a {
	color: var(--teal);
}

/* 15.3 Product grid and cards */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

@media (max-width: 599px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products[class*="columns-"] li.product {
	position: relative;
	display: flex;
	float: none;
	width: auto;
	margin: 0;
	padding: 16px;
	flex-direction: column;
	gap: 8px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow-hard);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products[class*="columns-"] li.product:hover {
	box-shadow: 6px 6px 0 var(--ink);
	transform: translate(-2px, -2px);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 8px;
	border-radius: calc(var(--radius) - 6px);
	background: var(--mint-light);
}

.woocommerce-loop-product__title {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.2;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
}

.woocommerce .price {
	color: var(--teal-deep);
	font-weight: 800;
}

.woocommerce .price del {
	opacity: 0.5;
}

.woocommerce .price ins {
	text-decoration: none;
}

.woocommerce span.onsale {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	min-width: 0;
	min-height: 0;
	padding: 4px 12px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--coral);
	color: var(--ink);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
}

.woocommerce ul.products li.product a:not(.button) {
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
	margin: 0 0 24px;
}

.woocommerce-ordering select {
	padding: 10px 14px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
}

@media (min-width: 600px) {
	.woocommerce-result-count {
		float: left;
		padding-top: 10px;
	}

	.woocommerce-ordering {
		float: right;
	}

	.woocommerce ul.products {
		clear: both;
	}
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers li {
	border: 0;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: block;
	min-width: 44px;
	padding: 10px 14px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	text-align: center;
}

.woocommerce-pagination .page-numbers .current {
	background: var(--yellow);
}

/* 15.4 Buttons (shop, cart, checkout, blocks) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border: 2px solid var(--yellow);
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: #ffd766;
	color: var(--ink);
	transform: translateY(-2px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--teal-deep);
	color: var(--white);
}

.woocommerce a.added_to_cart {
	margin-top: 8px;
	color: var(--teal);
	font-weight: 700;
}

/* 15.5 Single product */
body.single-product div.product {
	display: grid;
	gap: 32px;
}

body.single-product div.product div.images,
body.single-product div.product div.summary {
	float: none;
	width: 100%;
	margin: 0;
}

body.single-product div.product div.images img {
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-hard);
}

.woocommerce div.product .product_title {
	margin: 0 0 12px;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.05;
}

.woocommerce div.product p.price {
	margin: 0 0 16px;
	font-size: 1.5rem;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 24px 0;
}

.woocommerce .quantity .qty {
	width: 80px;
	padding: 10px;
	border: 2px solid var(--ink);
	border-radius: 12px;
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--yellow);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 8px 20px;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

@media (min-width: 800px) {
	body.single-product div.product {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

/* 15.6 Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--mint);
	list-style: none;
}

.woocommerce-error {
	background: #ffe0d8;
}

.woocommerce-message .button {
	order: 2;
}

/* 15.7 Forms and tables (cart, checkout, account) */
.woocommerce form .form-row {
	margin: 0 0 16px;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page .select2-container .select2-selection {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--ink);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
}

.woocommerce table.shop_table {
	width: 100%;
	border: 2px solid var(--ink);
	border-collapse: separate;
	border-radius: var(--radius);
	background: var(--white);
	border-spacing: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--mint-light);
	text-align: left;
}

.woocommerce table.shop_table img {
	width: 64px;
	border-radius: 8px;
}

.woocommerce-checkout #payment {
	padding: 16px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--mint);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 8px 18px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--yellow);
}

/* 15.8 Cart, checkout and account use the wide column; block cart/checkout polish. */
.woocommerce-cart .container--narrow,
.woocommerce-checkout .container--narrow,
.woocommerce-account .container--narrow {
	max-width: var(--max);
}

.woocommerce-cart .section--white,
.woocommerce-checkout .section--white,
.woocommerce-account .section--white {
	padding-block: 40px 72px;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-combobox-control__input {
	border: 2px solid var(--ink);
	border-radius: 12px;
	color: var(--ink);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	outline: 3px solid var(--teal);
	outline-offset: 2px;
}

.wc-block-checkout__sidebar,
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	padding: 20px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--mint);
	box-shadow: var(--shadow-hard);
}

.wc-block-components-title,
.wc-block-cart__totals-title {
	font-family: var(--font-display);
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: 52px;
	border-radius: 999px;
}

.wc-block-components-notice-banner {
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

.wc-block-cart-item__remove-link,
.wc-block-components-product-name {
	color: var(--teal);
}

/* 15.9 GiveWP donation form and receipt */
.give-form-wrap,
.givewp-donation-form,
#give-receipt {
	margin-block: 24px;
}

.give-form-wrap .give-btn,
.give-form-wrap .give-submit,
#give-receipt .give-btn {
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid var(--yellow);
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	cursor: pointer;
}

.give-form-wrap .give-btn:hover,
.give-form-wrap .give-submit:hover {
	background: #ffd766;
}

.give-form-wrap input.give-input,
.give-form-wrap select.give-select,
.give-form-wrap textarea.give-textarea {
	padding: 12px 14px;
	border: 2px solid var(--ink);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
}

.give-form-wrap .give-donation-level-btn {
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-weight: 700;
}

.give-form-wrap .give-donation-level-btn.give-default-level,
.give-form-wrap .give-donation-level-btn:hover {
	background: var(--yellow);
}

#give-receipt .give-table,
#give_donation_history {
	width: 100%;
	border: 2px solid var(--ink);
	border-collapse: separate;
	border-radius: var(--radius);
	border-spacing: 0;
}

#give-receipt .give-table th,
#give-receipt .give-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mint-light);
	text-align: left;
}

.give_notices .give_error,
.give-notice {
	padding: 14px 18px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: #ffe0d8;
}

/* 15.10 404 page: a "0" that is a wheel, a wheel rolling along a road, suggestion cards. */
.notfound {
	position: relative;
	overflow: hidden;
	background: var(--teal-deep);
	color: var(--white);
	text-align: center;
}

.notfound::before {
	position: absolute;
	top: -180px;
	right: -140px;
	width: 420px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	content: "";
}

.notfound::before {
	top: -150px;
	right: -170px;
	width: 260px;
}

@media (min-width: 700px) {
	.notfound::before {
		top: -180px;
		right: -140px;
		width: 420px;
	}
}

.notfound__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 48px 40px;
}

.notfound__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	margin: 0;
	color: var(--yellow);
	font-family: var(--font-display);
	font-size: clamp(6.5rem, 24vw, 14rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

/* The zero is drawn as a wheel: tyre ring, hub and spokes. */
.notfound__zero {
	position: relative;
	display: block;
	width: 0.72em;
	height: 0.72em;
	border: 0.09em solid var(--yellow);
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--yellow) 0 8%, transparent 9%),
		repeating-conic-gradient(from 0deg, var(--mint-light) 0 1.2deg, transparent 1.2deg 30deg);
	animation: wwm-spin 12s linear infinite;
}

.notfound__title {
	max-width: 16ch;
	margin: 8px 0 12px;
	font-size: clamp(2rem, 6vw, 3.5rem);
	line-height: 1.05;
	text-wrap: balance;
}

.notfound__text {
	max-width: 52ch;
	margin: 0;
	color: var(--mint-light);
	font-size: 17px;
}

.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

.notfound__search {
	width: 100%;
	max-width: 420px;
	margin-top: 26px;
}

/* Road strip with a wheel that keeps rolling across it. */
.notfound__road {
	position: relative;
	height: 112px;
	container-type: inline-size;
	background: var(--teal-darkest);
}

.notfound__line {
	position: absolute;
	right: 0;
	bottom: 18px;
	left: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--yellow) 0 36px, transparent 36px 72px);
	background-size: 72px 4px;
	animation: wwm-road 1.2s linear infinite;
}

.notfound__rider {
	position: absolute;
	bottom: 22px;
	left: 0;
	display: block;
	width: 80px;
	height: 80px;
	animation: wwm-roll 9s linear infinite;
}

.notfound__rider .hero-wheel__svg {
	display: block;
	width: 100%;
	height: 100%;
	animation: none;
}

@keyframes wwm-roll {
	from { transform: translateX(-100px) rotate(0deg); }
	to { transform: translateX(calc(100cqw + 20px)) rotate(900deg); }
}

@keyframes wwm-road {
	to { background-position-x: -72px; }
}

.notfound__more .section__head { margin-inline: auto; text-align: center; }

.notfound__search .search-submit,
.notfound__search button,
.notfound__search input[type="submit"] { color: var(--ink); }

.card--link {
	text-decoration: none;
	color: inherit;
}

.card--link:hover .card__link,
.card--link:focus-visible .card__link {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.notfound__zero,
	.notfound__line,
	.notfound__rider {
		animation: none !important;
	}

	.notfound__rider {
		left: 50%;
		margin-left: -40px;
	}
}

/* 16. AUDIT FIXES -------------------------------------------------------- */

/* Logo: compact wordmark on phones, full lockup from 600px. */
.site-logo__compact { display: block; }
.site-logo__full { display: none; }

@media (min-width: 600px) {
	.site-logo__compact { display: none; }
	.site-logo__full { display: block; }
}

.site-logo svg { max-width: 100%; }

/* Product pages: let grid children shrink so nothing overflows phones. */
.single-product div.product,
.single-product div.product > * {
	min-width: 0;
}

.single-product div.product { max-width: 100%; }

/* Hero buttons sit side by side as soon as there is room. */
@media (min-width: 560px) {
	.hero__actions { flex-direction: row; flex-wrap: wrap; }
	.hero__actions .btn { width: auto; }
}

/* Short laptop screens: keep the hero inside the first screen. */
@media (min-width: 900px) and (max-height: 820px) {
	.hero--front { min-height: 0; }
	.hero--front .hero__media { max-height: 560px; }
}

/* Three-column grids start at tablet-landscape so no card is orphaned. */
@media (min-width: 700px) and (max-width: 999px) {
	.grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Comfortable tap targets for small links. */
.site-footer a,
.notfound__links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   [17.] BLOG
   Markup: home.php (posts page), archive.php, search.php, single.php,
   comments.php, template-parts/card-post.php. Helpers: inc/blog.php.
   Breakpoints follow the guide at the top: 700 (2 columns), 900 (desktop
   layouts), 1000 (3 columns).
   ========================================================================== */

/* 17.1 Toolbar: category filter and search above the grid. */
.blog-toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.blog-toolbar .tabs {
	margin-bottom: 0;
}

.blog-toolbar .search-form {
	flex-wrap: nowrap;
}

.blog-toolbar .search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.search-field {
	width: 100%;
	min-width: 0;
	font-size: 16px; /* 16px stops iOS zooming into the field. */
}

/* Category pills scroll sideways on small screens instead of wrapping into a tall block. */
.tabs--scroll {
	flex-wrap: nowrap;
	margin-inline: calc(var(--gutter) * -1);
	padding: 4px var(--gutter) 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.tabs--scroll .tabs__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.blog-toolbar {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 32px;
	}

	.blog-toolbar .tabs {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tabs--scroll {
		flex-wrap: wrap;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.blog-toolbar .search-form {
		flex: 0 0 300px;
	}
}

/* 17.2 Post cards. */
.post-card {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 2px solid var(--ink);
	background: var(--mint-light);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.post-card__placeholder {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
}

.post-card__body .card__kicker,
.post-card__body .card__title,
.post-card__body .card__text {
	margin: 0;
}

.post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: auto 0 0;
	padding-top: 6px;
}

.post-card__time {
	color: var(--ink-soft);
	font-size: 14px;
}

.post-card--text .post-card__body {
	padding-top: 24px;
}

@media (hover: hover) {
	.card:hover .post-card__media img {
		transform: scale(1.05);
	}
}

/* The newest post gets a wide card on the first page. */
@media (min-width: 700px) {
	.post-card--feature {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.post-card--feature .post-card__media {
		flex: 0 0 48%;
		aspect-ratio: auto;
		min-height: 280px;
		border-right: 2px solid var(--ink);
		border-bottom: 0;
	}

	.post-card--feature .post-card__body {
		justify-content: center;
		padding: 32px;
	}

	.post-card--feature .card__title {
		font-size: clamp(1.5rem, 3vw, 2.25rem);
		line-height: 1.1;
	}
}

/* 17.3 Pills for categories, tags and share links. */
.pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pill-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 18px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.pill-list a:hover,
.pill-list a:focus-visible {
	background: var(--ink);
	color: var(--white);
}

.pill-list--tags a {
	border-color: var(--border);
	background: var(--ground);
}

/* 17.4 Single post. */
.post-single {
	padding-block: 40px 56px;
}

.post-single__meta {
	margin-bottom: 24px;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.post-meta a {
	color: var(--teal);
	font-weight: 600;
}

.post-single__image {
	margin: 0 0 32px;
}

.post-single__image img {
	width: 100%;
	height: auto;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

.post-single__image figcaption,
.entry-content figcaption,
.wp-caption-text {
	margin-top: 8px;
	color: var(--ink-soft);
	font-size: 14px;
}

/* Long-form reading text. */
.post-single .entry-content {
	font-size: 18px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.post-single .entry-content a {
	color: var(--teal);
	text-underline-offset: 3px;
}

.post-single .entry-content h2 {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.post-single .entry-content h3 {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content img,
.entry-content video,
.entry-content iframe {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 6px solid var(--yellow);
	font-family: var(--font-display);
	font-size: 1.25em;
	line-height: 1.4;
}

.entry-content blockquote p {
	margin: 0;
}

.entry-content hr {
	border: 0;
	border-top: 2px solid var(--border);
}

.entry-content pre,
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.entry-content pre {
	padding: 16px;
	border-radius: 14px;
	background: var(--teal-deep);
	color: var(--mint);
	font-size: 15px;
}

.entry-content th,
.entry-content td {
	padding: 8px 12px;
	border: 1px solid var(--border);
	text-align: left;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.post-single__foot {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid var(--border);
}

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

.share__label {
	font-weight: 700;
}

/* Author box. */
.author-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 40px;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--mint);
}

.author-box .avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border: 2px solid var(--ink);
	border-radius: 50%;
}

.author-box__name {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
}

.author-box__bio {
	margin: 0 0 4px;
}

@media (min-width: 700px) {
	.author-box {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.author-box .avatar {
		width: 96px;
		height: 96px;
	}
}

/* Previous / next post. */
.post-navigation .nav-links {
	display: grid;
	gap: 12px;
}

.post-navigation a {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 2px solid var(--ink);
	border-radius: 20px;
	color: var(--ink);
	text-decoration: none;
	transition: background 0.2s ease;
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
	background: var(--mint);
}

.post-navigation .nav-subtitle {
	color: var(--teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.post-navigation .nav-title {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
}

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

@media (min-width: 700px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
	}
}

/* Donate call to action at the end of a post. */
.post-cta {
	margin-top: 48px;
	padding: 32px 24px;
	border-radius: var(--radius);
	background: var(--teal-deep);
	color: var(--white);
}

.post-cta__title {
	margin: 0 0 8px;
	color: var(--yellow);
	font-size: clamp(1.5rem, 4vw, 2rem);
}

.post-cta p {
	max-width: 52ch;
	margin: 0 0 20px;
	color: var(--mint-light);
}

.post-cta p:last-child {
	margin-bottom: 0;
}

.post-related .section__head {
	margin-bottom: 24px;
}

/* 17.5 Comments. */
.comments-area {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 2px solid var(--border);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 24px;
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
	line-height: 1.15;
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list > li + li,
.comment-list .children > li {
	margin-top: 16px;
}

.comment-list .children {
	margin-top: 16px;
	padding-left: 14px;
	border-left: 3px solid var(--mint-light);
}

@media (min-width: 700px) {
	.comment-list .children {
		margin-left: 24px;
		padding-left: 24px;
	}
}

.comment__body {
	padding: 20px;
	border-radius: 20px;
	background: var(--ground);
}

.comment__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.comment__head .avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: 2px solid var(--ink);
	border-radius: 50%;
}

.comment__author,
.comment__meta {
	margin: 0;
}

.comment__author {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

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

.comment__badge {
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--yellow);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.comment__meta {
	color: var(--ink-soft);
	font-size: 14px;
}

.comment__meta a {
	color: inherit;
}

.comment__moderation {
	margin: 0 0 12px;
	padding: 8px 14px;
	border-radius: 12px;
	background: #fff2cc;
	color: #5c4300;
	font-size: 15px;
	font-weight: 600;
}

.comment__content {
	overflow-wrap: anywhere;
}

.comment__content > * + * {
	margin-top: 0.8em;
}

.comment__content > :first-child {
	margin-top: 0;
}

.comment__reply {
	margin: 8px 0 0;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--teal);
	font-weight: 700;
}

.no-comments {
	margin: 24px 0 0;
	font-weight: 600;
}

.comment-respond {
	margin-top: 40px;
}

.comments-area > .comment-respond:first-child {
	margin-top: 0;
}

.comment-form {
	gap: 16px;
}

.comment-form p {
	margin: 0;
}

.comment-notes {
	color: var(--ink-soft);
	font-size: 15px;
}

.comment-form .field input,
.comment-form .field textarea {
	font-size: 16px;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.comment-form-cookies-consent input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--teal);
}

.comment-form-cookies-consent label {
	font-size: 15px;
}

#cancel-comment-reply-link {
	margin-left: 12px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
}

/* Desktop menu: never wrap an item onto two lines; tighten on small laptops and tablets in landscape. */
@media (min-width: 900px) {
	.main-navigation li a {
		white-space: nowrap;
	}
}

@media (min-width: 900px) and (max-width: 1099px) {
	.main-navigation .nav-menu,
	.main-navigation .menu {
		gap: 18px;
	}

	.main-navigation li a {
		font-size: 15px;
	}

	.site-logo svg {
		height: 52px;
	}

	.site-header__actions {
		gap: 10px;
	}
}

/* Links on yellow cards: ink, not teal (teal on yellow is 3.9:1). */
.card.card--yellow .card__link,
.card.card--yellow .card__link:hover {
	color: var(--ink);
}

/* Post cards: "Read more" is a label (the title link covers the whole card), so its
   stretched ::before must not sit on top and swallow the click. */
.post-card .card__link::before {
	display: none;
}

.post-card .card__link {
	pointer-events: none;
}

/* Hero slideshow controls: previous, pause/play, next and a counter under the wheel. */
.hero-wheel__controls {
	position: absolute;
	z-index: 3;
	bottom: -9%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 14px 4px 4px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	box-shadow: 3px 3px 0 var(--teal-darkest);
	color: var(--ink);
	transform: translateX(-50%);
}

.hero-wheel__controls[hidden] {
	display: none;
}

.hw-ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hw-ctrl[hidden] {
	display: none;
}

.hw-ctrl:hover,
.hw-ctrl:focus-visible {
	background: var(--yellow);
}

.hw-ctrl svg {
	width: 20px;
	height: 20px;
}

.hw-ctrl[data-ctrl="toggle"] .hw-ctrl__play,
.hw-ctrl[data-ctrl="toggle"].is-paused .hw-ctrl__pause {
	display: none;
}

.hw-ctrl[data-ctrl="toggle"].is-paused .hw-ctrl__play {
	display: block;
}

.hero-wheel__count {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Photos change with a quick fade and a soft zoom-out as they arrive. */
.hero-wheel__slide {
	transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.hero-wheel__slide {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* Placeholder wheel in image + text sections: rolls and lifts when pointed at. */
.image-text__placeholder {
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.image-text__placeholder .wheel {
	transition: scale 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.image-text__media:hover .image-text__placeholder {
		background: var(--mint);
		box-shadow: 8px 8px 0 var(--ink);
		transform: translate(-3px, -3px);
	}

	.image-text__media:hover .image-text__placeholder .wheel {
		animation: wwm-spin 4s linear infinite;
		scale: 1.12;
	}
}

@media (prefers-reduced-motion: reduce) {
	.image-text__media:hover .image-text__placeholder,
	.image-text__media:hover .image-text__placeholder .wheel {
		animation: none;
		scale: none;
		transform: none;
	}
}

/* Leadership initials: two letters, sized to fit the circle. */
.person__initial {
	font-size: 2.6rem;
	letter-spacing: 0.02em;
}

/* Breadcrumb links: a larger hit area without making the hero taller. */
.breadcrumb a {
	display: inline-block;
	margin-block: -10px;
	padding-block: 10px;
}

/* Footer sponsors: logos on white tiles so any logo reads on the dark footer. */
.sponsors {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sponsors__heading {
	margin: 0;
	color: var(--white);
	font-size: 1.125rem;
}

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

.sponsors__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 76px;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--white);
	transition: transform 0.2s ease;
}

a.sponsors__link:hover,
a.sponsors__link:focus-visible {
	transform: translateY(-2px);
}

.sponsors__logo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

@media (min-width: 900px) {
	.sponsors {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.sponsors__heading {
		flex: 0 0 200px;
	}

	.sponsors__list {
		flex: 1 1 auto;
		justify-content: flex-end;
	}
}

/* ==========================================================================
   [18.] AUTHOR PAGE
   Markup: author.php. Fields: inc/authors.php (Users > Profile).
   ========================================================================== */

.author-hero__layout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.author-hero__photo {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

.author-hero__avatar {
	display: block;
	width: 120px;
	height: 120px;
	border: 4px solid var(--yellow);
	border-radius: 50%;
	background: var(--mint-light);
	object-fit: cover;
}

.author-hero__bio {
	max-width: 520px;
	margin-top: 12px;
}

/* Keep the text column clear of the decorative disc on the right. */
@media (min-width: 900px) {
	.author-hero__copy {
		max-width: 560px;
	}
}

.author-hero .pill-list {
	margin-top: 20px;
}

.pill-list--light a {
	border-color: var(--mint-light);
	background: transparent;
	color: var(--white);
}

.pill-list--light a:hover,
.pill-list--light a:focus-visible {
	background: var(--white);
	color: var(--ink);
}

.author-posts__head .section__intro {
	margin-top: 4px;
}

@media (min-width: 700px) {
	.author-hero__layout {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.author-hero__avatar {
		width: 200px;
		height: 200px;
		border-width: 6px;
	}
}

.author-box__role {
	display: block;
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
}

.author-box .author-links {
	margin: 8px 0 4px;
}

.author-box .pill-list a {
	min-height: 44px;
	background: var(--white);
}

/* ==========================================================================
   [19.] COOKIE BANNER
   Markup: inc/cookies.php. Behaviour: js/cookie-consent.js.
   ========================================================================== */

.cookie {
	position: fixed;
	z-index: 1000;
	right: max(12px, env(safe-area-inset-right, 0px));
	bottom: max(12px, env(safe-area-inset-bottom, 0px));
	left: max(12px, env(safe-area-inset-left, 0px));
	max-width: 960px;
	margin-inline: auto;
	border: 2px solid var(--ink);
	border-radius: 24px;
	background: var(--teal-deep);
	box-shadow: 0 12px 40px rgba(4, 31, 36, 0.35);
	color: var(--white);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.cookie__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 70vh;
	padding: 20px;
	overflow-y: auto;
}

.cookie__title {
	margin: 0 0 6px;
	color: var(--yellow);
	font-size: 1.25rem;
}

.cookie__text {
	margin: 0;
	color: var(--mint-light);
	font-size: 15px;
	line-height: 1.5;
}

.cookie__text a {
	color: var(--white);
	text-underline-offset: 3px;
}

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

.cookie__actions .btn {
	justify-content: center;
	width: 100%;
	min-height: 48px;
}

@media (min-width: 700px) {
	.cookie__inner {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 22px 28px;
	}

	.cookie__copy {
		flex: 1 1 auto;
	}

	.cookie__actions {
		flex: 0 0 auto;
		flex-direction: row;
	}

	.cookie__actions .btn {
		width: auto;
		white-space: nowrap;
	}
}

.cookie-settings-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mint-light);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.cookie-settings-link:hover {
	color: var(--white);
}

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

@media (prefers-reduced-motion: reduce) {
	.cookie {
		transition: none;
		transform: none;
	}
}

/* Footer link hit areas: short words ("X", "SCI") were only 9-35px wide. */
.footer-menu a,
.social-links a { min-width: 44px; justify-content: center; }

/* ==========================================================================
   [20.] LOGO ANIMATION
   Markup: the inline SVGs in assets/images (mark = .logo-mark with three
   .wwm-logo__arc, .wwm-logo__turn and .wwm-logo__hub). Plays once when the
   header loads: the arcs draw in, turn together and the hub pops. Hovering the
   logo (see 14.2) turns the mark a third. No looping, and none at all for
   people who ask for reduced motion.
   ========================================================================== */
.site-logo .wwm-logo__turn {
	transform-origin: 60px 60px;
	animation: wwm-logo-turn 1.5s cubic-bezier(0.3, 0.7, 0.2, 1) backwards;
}

.site-logo .wwm-logo__arc {
	animation: wwm-logo-draw 1s ease-out backwards;
}

.site-logo .wwm-logo__hub {
	transform-origin: 60px 60px;
	animation: wwm-logo-pop 0.7s 0.7s cubic-bezier(0.3, 1.6, 0.4, 1) backwards;
}

@keyframes wwm-logo-draw {
	from { stroke-dasharray: 0 100; opacity: 0; }
	to { stroke-dasharray: 24 76; opacity: 1; }
}

@keyframes wwm-logo-turn {
	from { transform: rotate(-140deg); }
	to { transform: rotate(0deg); }
}

@keyframes wwm-logo-pop {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.site-logo .wwm-logo__turn,
	.site-logo .wwm-logo__arc,
	.site-logo .wwm-logo__hub {
		animation: none;
	}

	.site-logo:hover .logo-mark,
	.site-logo:focus-visible .logo-mark {
		transform: none;
	}
}

/* Phones: the words wrap onto two rows, so the dashed lane line would cut between them. */
@media (max-width: 699px) {
	.road-band::before {
		display: none;
	}

	.road-band__words {
		gap: 4px 6px;
	}
}

/* Print: drop navigation chrome and decoration, keep content black on white. */
@media print {
	.utility-bar,
	.site-header__actions,
	.hero__decor,
	.hero__disc,
	.hero__sticker,
	.site-footer__newsletter,
	.road-band,
	.cta .btn,
	.cookie,
	.cookie-settings-link {
		display: none !important;
	}

	body,
	.hero,
	.section,
	.cta {
		background: #fff !important;
		color: #000 !important;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}