/*
Theme Name: Wakonda
Theme URI: https://github.com/abutterworth/wakonda-wp
Author: Wakonda Coop
Description: Classic theme for the Wakonda Coop site — a public marketing site plus a private shareholder section. Pairs with the Wakonda Core plugin, which supplies the Event post type, the shareholder role, and the access control.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.2
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wakonda
Tags: one-column, block-patterns, custom-menu, editor-style, wide-blocks, translation-ready
*/

/* -------------------------------------------------------------------------
 * Tokens.
 *
 * The DELIVERED palette (Design, 2026-08-26): two hues and their tints —
 * Wakonda Green #20483d (with a 70% text tint) and Wakonda Tan #d8cfb3
 * (with 50/40% washes). theme.json holds them; every colour here routes
 * through these role tokens. Alpha tints are stored flattened on paper —
 * opaque values keep AA math and layering predictable:
 *   Green 70 on paper = #637f77, Tan 50 = #ebe7d9, Tan 40 = #f0ece0.
 * ink-soft is Green at 75, not the delivered 70: the 70% tint measures
 * 4.35:1 on paper, a hair under AA for the 16px excerpts that use this
 * token; +5 points lands 4.98:1 and is visually indistinguishable.
 * ink stays Pine Ink — Design has not delivered a text black (yet).
 * ---------------------------------------------------------------------- */

:root {
	--wakonda-ink: var(--wp--preset--color--contrast, #1f1f1f);
	--wakonda-ink-soft: #58766e; /* Wakonda Green 75 on paper */
	--wakonda-paper: var(--wp--preset--color--paper, #fff);
	--wakonda-surface: var(--wp--preset--color--tertiary, #ebe7d9); /* Tan 50 */
	--wakonda-accent: var(--wp--preset--color--primary, #20483d);
	--wakonda-accent-deep: var(--wp--preset--color--primary-deep, #20483d);
	--wakonda-line: #e2e0d8;
	--wakonda-line-strong: #b3b1a7;

	/* Type on the one dark band (the footer, Wakonda Green ground). */
	--wakonda-on-dark: #ebe7d9; /* Tan 50 — tan type on green */
	--wakonda-on-dark-soft: #b7c3b9;

	/*
	 * The header shares the content/footer container — one aligned edge
	 * from masthead to colophon. (It used to breathe 72rem, which left the
	 * logo and nav sitting 2rem outside the content edge on desktop.)
	 */
	--wakonda-header-width: var(--wp--style--global--wide-size, 68rem);
	--wakonda-header-gap: 2rem;

	/* Side gutter for every band of the page. */
	--wakonda-gutter: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.5rem));

	/* Reading measure; templates widen it per layout, never per element. */
	--wakonda-measure: var(--wp--style--global--content-size, 42rem);
}

/*
 * Type sizes come from ONE place: the theme.json presets, referenced
 * everywhere as var(--wp--preset--font-size--*). The step names and
 * line-height ratios come from the designer's Figma sheet (2026-08-26) —
 * x-small (Body XS 12/16), small (Eyebrow and Label 14/20, Body Small
 * 14/22), medium (Body 16/28), large (H5 18/24, and the Link style
 * 18/28), x-large (H4 20/30), xx-large (H3 22/32), huge (H2 26/32),
 * gigantic (H1 32/48). The sizes themselves moved up a step 2026-09-09
 * (small 14→16 … huge 26→28; gigantic stays 32), so the sheet's px pairs
 * are where the ratios come from, not what renders. theme.json is where
 * a step's value changes; the rules below only say which element uses
 * which step, and carry the line-heights (per-role, so one size can serve
 * two roles — H5 vs Link). No fluid type anywhere — narrow screens get
 * the mobile set below, which re-declares the same WP variables.
 */
@media (max-width: 40rem) {
	:root {
		--wp--preset--font-size--gigantic: var(--wp--preset--font-size--huge); /* H1 drops to the H2 size */
	}
}

/* -------------------------------------------------------------------------
 * Base.
 *
 * Font families, the base size and line-height come from theme.json — core
 * emits them against body and h1–h6, so they reach template markup and block
 * content alike. This layer only adds what theme.json cannot express.
 * ---------------------------------------------------------------------- */

/*
 * The gallery carousel's strip is 100vw wide, which with a classic
 * (non-overlay) scrollbar overshoots the viewport by the scrollbar's
 * width. clip, not hidden: nothing sticky is affected.
 */
html {
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--wakonda-paper);
	color: var(--wakonda-ink);
	-webkit-font-smoothing: antialiased;

	/* Footer sits at the viewport bottom even under a short 404. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

/*
 * Without this an unconstrained attachment (medium_large is 768px) forces the
 * document wider than a phone viewport, and every full-width band — the header
 * included — stops at the viewport edge while the content scrolls past it.
 */
img,
video {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	overflow-wrap: break-word;
}

/*
 * The ramp's heading steps. Line-heights are the sheet's pairs (H1 32/48,
 * H2 26/32, H3 22/32, H4 20/30, H5 18/24) as ratios, so they follow a
 * step wherever theme.json moves it. h6 sits at label size, still Lora.
 */
h1 {
	font-size: var(--wp--preset--font-size--gigantic);
	line-height: 1.5;
}

h2 {
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.23;
}

h3 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.45;
}

h4 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.5;
}

h5 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.33;
}

h6 {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/*
 * Monochrome links: colour cannot distinguish them, so underlines have to.
 * Chrome (nav, cards, titles) opts out locally and signals on hover instead.
 */
a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline: 2px solid var(--wakonda-ink);
	outline-offset: 2px;
}

::selection {
	background: var(--wakonda-accent-deep);
	color: var(--wakonda-paper);
}

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

.skip-link:focus {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--wakonda-paper);
	clip-path: none;
}

/*
 * The Eyebrow style (caps, forest green) — dates, post types,
 * section headings. The green is what makes metadata read as wayfinding
 * rather than content.
 */
.entry-meta,
.event__date,
.event-list__date,
.news-list__date,
.search-list__type,
.news-lead__date,
.news-row__date {
	margin: 0;
	font-size: var(--wp--preset--font-size--small); /* Eyebrow */
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wakonda-ink-soft);
}

/*
 * The start time under a date steps back out of the eyebrow voice —
 * "Starts 10:30 AM" in quiet Body Small, so the date stays the anchor.
 */
.event-list__time {
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wakonda-ink-soft);
}

/*
 * "Raffle" as a small bordered tag beside the date, so raffles read as the
 * ongoing statuses they are wherever they appear in a calendar list.
 */
.event-list__badge {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--wakonda-line-strong);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	vertical-align: 0.1em;
}

/* -------------------------------------------------------------------------
 * Buttons and forms.
 *
 * .wp-element-button covers block buttons, the File block's download button
 * and the search submit; .button-outline is the header's Log In.
 * ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.search-submit {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background: var(--wakonda-ink);
	border: 1px solid var(--wakonda-ink);
	border-radius: 2px;
	color: var(--wakonda-paper);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.search-submit:hover {
	background: var(--wakonda-paper);
	color: var(--wakonda-ink);
}

.is-style-outline .wp-block-button__link,
.button-outline {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.is-style-outline .wp-block-button__link:hover,
.button-outline:hover {
	background: var(--wakonda-ink);
	border-color: var(--wakonda-ink);
	color: var(--wakonda-paper);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 28rem;
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	padding: 0.55rem 0.875rem;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-line-strong);
	border-radius: 2px;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: inherit;
}

.search-field:focus {
	border-color: var(--wakonda-ink);
	outline: none;
}

/* -------------------------------------------------------------------------
 * Site header — layout.
 * ---------------------------------------------------------------------- */

/* --- shared ------------------------------------------------------------ */

.site-header {
	background: var(--wakonda-paper);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wakonda-header-gap);
	max-width: var(--wakonda-header-width);
	margin-inline: auto;
	/* The shared gutter, like .site-main and the footer — never a literal,
	 * or the header drifts the day the root padding changes. */
	padding: 1rem var(--wakonda-gutter);
}

/*
 * Both flex containers, so neither the wrapper nor the link creates a line box.
 * As `inline-flex` the link sat on a baseline, and the strut's descender space
 * below it made the div taller than the image — which left the mark 2.5px above
 * the centre it was supposed to be aligned on.
 */
.site-logo {
	display: flex;
	align-items: center;
}

.site-logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

/*
 * Deliberately no `display` here. Setting it on the element selector would
 * score 0,1,1 and beat the class rules below that decide which mark shows.
 *
 * `max-width: none` opts the logo out of the global image rule. As a grid item
 * in a `1fr` column the mark would otherwise be allowed to shrink with the
 * track, so it visibly shrank to nothing in the last few pixels before the
 * mobile breakpoint. Both marks have explicit widths well inside any viewport,
 * so nothing here can overflow.
 */
.site-logo img {
	height: auto;
	max-width: none;
}

/*
 * Bird alone by default; the member header swaps in the lockup on wide screens
 * only. Written as a min-width override so the two rules never compete at
 * equal specificity — media queries add none of their own.
 */
.site-logo .site-logo__mark { display: block; width: 1.75rem; }
.site-logo .site-logo__lockup { display: none; width: 14rem; }

/*
 * <wakonda-nav> reads --wakonda-nav-mode to decide whether to run the
 * priority-plus overflow ("bar") or sit behind the menu button ("stack"), so
 * the breakpoint is defined here only and never duplicated in JavaScript.
 */
wakonda-nav {
	--wakonda-nav-mode: bar;
	display: block;
	min-width: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: var(--wakonda-header-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list a {
	text-decoration: none;
}

.site-header__account {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-inline-start: auto;
	white-space: nowrap;
}

.site-header__link { text-decoration: none; }

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

.nav-list a,
.nav-extra a,
.site-header__link {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.nav-list a:hover,
.nav-extra a:hover,
.site-header__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
}

/*
 * The page being read keeps its underline. Underline rather than weight, so
 * the item is the same width on every page and <wakonda-nav>'s measuring
 * never shifts between them.
 */
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-ancestor > a,
.nav-list .current_page_ancestor > a {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
}

/* --- account menu ------------------------------------------------------ */

.account-menu {
	position: relative;
	display: inline-flex;
}

.account-menu__button {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.account-menu__list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.25rem);
	z-index: 30;
	min-width: 11rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-line);
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
}

/*
 * Visible until the element upgrades, so the links stay reachable with
 * JavaScript off rather than being hidden by CSS that nothing can undo.
 */
.account-menu.is-ready .account-menu__list {
	display: none;
}

.account-menu.is-ready.is-open .account-menu__list {
	display: block;
}

.account-menu__list a {
	display: block;
	padding: 0.4rem 1rem;
	white-space: nowrap;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.account-menu__list a:hover {
	background: var(--wakonda-surface);
}

/*
 * The header bar drops "Public Home" / "Shareholder Home" on narrow screens.
 * It is not lost — it reappears at the end of the left-hand menu, alongside
 * the rest of the navigation. Hidden here, shown in the narrow block below.
 */
.nav-extra {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- public: mark left, nav centred, button right ---------------------- */

/*
 * Grid, not flex, so the nav is centred on the *container* rather than on the
 * space left between the logo and the button. With auto margins the unequal
 * widths of those two drag it off centre — measured 31px on a 1280 viewport.
 * Three columns, 1fr either side, puts it exactly in the middle.
 *
 * The menu button is display:none at this width, so it creates no grid item
 * and the three remaining children land one per column.
 */
@media (min-width: 48.0625rem) {
	.site-header--public .site-header__inner {
		display: grid;
		grid-template-columns: 1fr minmax(0, auto) 1fr;
		align-items: center;
	}

	.site-header--public .site-header__account {
		justify-self: end;
	}
}

.site-header--public .nav-list {
	justify-content: center;
}

/* --- member: lockup, then nav + account ------------------------------- */

/*
 * Both headers sit on paper — the 2026-08-26 design keeps the member chrome
 * white; being "inside" is signalled by the member nav itself, not a tinted
 * band. (The pre-palette build tinted this with the surface tone.)
 */
.site-header--member {
	background: var(--wakonda-paper);
}

@media (min-width: 48.0625rem) {
	.site-header--member .site-logo .site-logo__mark { display: none; }
	.site-header--member .site-logo .site-logo__lockup { display: block; }

	/* The lockup sits above the nav. The flexible track lets overflow
	 * navigation shrink while account controls retain their width. */
	.site-header--member .site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--wakonda-header-gap);
		row-gap: 1.25rem;
	}

	.site-header--member .site-logo {
		grid-column: 1;
		grid-row: 1;
	}



	.site-header--member wakonda-nav {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}

	.site-header--member .site-header__account {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}
}

/* --- the More dropdown ------------------------------------------------- */

/*
 * Overflow items are moved here by <wakonda-nav> rather than wrapped, so the
 * row keeps its height and the account controls are never pushed onto a second
 * line. nowrap is what forces the overflow to be measurable in the first place.
 */
.site-header--public .nav-list,
.site-header--member .nav-list {
	flex-wrap: nowrap;
}

.nav-list > li {
	white-space: nowrap;
}

.nav-more {
	position: relative;
}

.nav-more[hidden] {
	display: none;
}

.nav-more__button {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
}

.nav-more__button::after {
	content: " \25BE";
}

.nav-more__list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.5rem);
	z-index: 20;
	display: none;
	min-width: 12rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-line);
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
}

.nav-more.is-open .nav-more__list {
	display: block;
}

.nav-more__list > li {
	white-space: nowrap;
}

.nav-more__list a {
	display: block;
	padding: 0.4rem 1rem;
	text-decoration: none;
}

.nav-more__list a:hover {
	background: var(--wakonda-surface);
}

/* --- submenus ----------------------------------------------------------- */

/*
 * wp_nav_menu nests children as ul.sub-menu (ul.children from the
 * wp_page_menu fallback). Same progressive rule as the collapse: the
 * dropdown behaviour is scoped to wakonda-nav.is-ready, so before the
 * element upgrades — or with JavaScript off — children stay visible as a
 * plain indented list instead of vanishing behind a button that is not
 * there.
 */

.nav-list .sub-menu,
.nav-list .children {
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: none;
}

.nav-sub__button {
	padding: 0 0.15rem;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.nav-sub__button::after {
	content: "\25BE";
}

.nav-sub__button[aria-expanded="true"]::after {
	content: "\25B4";
}

/* Bar mode: a dropdown panel, same language as the More menu. Open on the
 * caret (is-open), on hover, or while anything inside has focus. */
wakonda-nav.is-ready .nav-list > li.menu-item-has-children,
wakonda-nav.is-ready .nav-list > li.page_item_has_children {
	position: relative;
}

wakonda-nav.is-ready .nav-list > li > .sub-menu,
wakonda-nav.is-ready .nav-list > li > .children {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 0.5rem);
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	min-width: 12rem;
	padding: 0.5rem 0;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-line);
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);

	/*
	 * Hidden via visibility with a 150ms delay, not display — so a pointer
	 * that briefly strays off the item mid-travel has a grace window in
	 * which the still-visible panel can catch it and keep the menu open.
	 */
	transition: opacity 120ms ease, visibility 0s 150ms;
}

/*
 * The hover bridge: the panel floats 0.5rem below the item, and that gap
 * used to break li:hover on the way down and snap the menu shut. An
 * invisible strip on the panel spans it, so the pointer never leaves the
 * hover tree; the grace above forgives diagonal wobbles besides.
 */
wakonda-nav.is-ready .nav-list > li > .sub-menu::before,
wakonda-nav.is-ready .nav-list > li > .children::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -0.6rem;
	height: 0.6rem;
}

wakonda-nav.is-ready .nav-list > li.is-open > .sub-menu,
wakonda-nav.is-ready .nav-list > li:hover > .sub-menu,
wakonda-nav.is-ready .nav-list > li:focus-within > .sub-menu,
wakonda-nav.is-ready .nav-list > li.is-open > .children,
wakonda-nav.is-ready .nav-list > li:hover > .children,
wakonda-nav.is-ready .nav-list > li:focus-within > .children {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s, 0s;
}

wakonda-nav.is-ready .nav-list > li > .sub-menu a,
wakonda-nav.is-ready .nav-list > li > .children a {
	display: block;
	padding: 0.4rem 1rem;
	white-space: nowrap;
}

wakonda-nav.is-ready .nav-list > li > .sub-menu a:hover,
wakonda-nav.is-ready .nav-list > li > .children a:hover {
	background: var(--wakonda-surface);
}

/*
 * Inside the More panel a nested dropdown makes no sense — the direct-child
 * selectors above already stop applying once an item moves in there, so its
 * children render as the plain indented list; just drop the caret.
 */
.nav-more__list .nav-sub__button {
	display: none;
}

/* --- narrow screens ---------------------------------------------------- */

.nav-toggle {
	display: none;
	padding: 0.5rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.35rem;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: relative;
}

.nav-toggle__bars::before { top: -0.45rem; }
.nav-toggle__bars::after { top: 0.25rem; }

@media (max-width: 48rem) {
	.nav-toggle { display: block; }

	/*
	 * Grid, not flex with auto margins — same reason the public nav is centred
	 * with grid on desktop. Auto margins centre the logo in the space *between*
	 * the menu button and the account controls, and those are not the same
	 * width (the Log In button is much wider than the account glyph), so the
	 * mark ends up visibly off centre. Three columns with 1fr either side
	 * centre it on the header itself.
	 */
	.site-header__inner,
	.site-header--public .site-header__inner,
	.site-header--member .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 1rem;
	}

	/*
	 * Placed explicitly rather than left to auto-flow. The nav sits between the
	 * logo and the account controls in the DOM, so once it is open and spanning
	 * every column, auto-placement pushes the account onto a third row.
	 */
	.nav-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.site-logo,
	.site-header--member .site-logo {
		grid-column: 2;
		grid-row: 1;
		margin-inline: 0;
		justify-self: center;
	}

	.site-header__account {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-inline-start: 0;
	}

	/*
	 * The bar keeps to menu button, logo, account glyph. The contextual link
	 * moves to the foot of the menu, set off by a rule so it reads as a
	 * different kind of destination from the pages above it.
	 */
	.site-header__link {
		display: none;
	}

	.nav-extra {
		display: block;
		margin-block-start: 0.75rem;
		padding-block-start: 0.75rem;
		border-block-start: 1px solid var(--wakonda-line);
	}

	.nav-extra a {
		text-decoration: none;
	}

	wakonda-nav {
		--wakonda-nav-mode: stack;
	}

	/* Collapsed only once the element has upgraded and taken responsibility. */
	wakonda-nav.is-ready {
		display: none;
	}

	/* Full width on its own row beneath the bar. */
	wakonda-nav.is-ready.is-open {
		display: block;
		grid-column: 1 / -1;
		grid-row: 2;
		border-block-start: 1px solid var(--wakonda-line);
	}

	.site-header--public .nav-list,
	.site-header--member .nav-list {
		flex-wrap: wrap;
	}

	.nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		padding-block: 1rem;
	}

	/* Stacked: children are a static indented list under their parent — a
	 * floating panel has nowhere sensible to float — and the caret goes,
	 * along with the bar mode's hide/reveal and its hover bridge. */
	wakonda-nav.is-ready .nav-list > li > .sub-menu,
	wakonda-nav.is-ready .nav-list > li > .children {
		position: static;
		visibility: visible;
		opacity: 1;
		transition: none;
		min-width: 0;
		padding: 0.25rem 0 0 1rem;
		background: none;
		border: 0;
		box-shadow: none;
	}

	wakonda-nav.is-ready .nav-list > li > .sub-menu::before,
	wakonda-nav.is-ready .nav-list > li > .children::before {
		content: none;
	}

	.nav-list .nav-sub__button {
		display: none;
	}
}

/* Camp weather: a permanent sidebar forecast and a mobile accordion. */
.site-weather {
	--wakonda-weather-soft: var(--wakonda-ink-soft);
	display: block;
	color: var(--wakonda-ink);
	min-width: 0;
}
.site-weather__current {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.5rem 0.8rem;
}
.site-weather__glyph { width: 24px; height: 24px; flex: none; }
.site-weather__current > .site-weather__glyph { width: 36px; height: 36px; }
.site-weather__temp {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.site-weather__current .site-weather__temp { font-size: var(--wp--preset--font-size--huge); line-height: 1.33; }
.site-weather__summary {
	min-width: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.57;
	color: var(--wakonda-ink);
}
.site-weather__current .site-weather__summary,
.site-weather__current .site-weather__range { grid-column: 1 / -1; }
.site-weather__range { font-size: var(--wp--preset--font-size--small); }
.site-weather__label, .site-weather__low { color: var(--wakonda-weather-soft); }
.site-weather__label-short { display: none; }
.site-weather__panel { position: static; padding-top: 1.25rem; }
.site-weather__panel[hidden] { display: none; }
.site-weather__days {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 1rem 0.5rem;
	background: color-mix(in srgb, var(--wakonda-surface) 45%, var(--wakonda-paper));
	border-radius: 2px;
}
.site-weather__day { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: var(--wp--preset--font-size--small); }
.site-weather__weekday { font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.site-weather__source { margin: 0.85rem 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.57; color: var(--wakonda-weather-soft); }
.site-weather__link { color: inherit; text-underline-offset: 0.2em; }
.site-weather__button, .site-weather__today { display: none; }
.shareholder-weather-mobile:empty { display: none; }
/* Keep the desktop forecast compact enough to sit above the reference lists. */
@media (min-width: 60rem) {
	.site-weather__current {
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 0.2rem 0.65rem;
	}
	.site-weather__current .site-weather__range {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		line-height: 1.4;
	}
	.site-weather__current .site-weather__summary { grid-row: 2; }
	.site-weather__panel { padding-top: 0.7rem; }
	.site-weather__days { padding-block: 0.85rem; }
	.site-weather__day { gap: 0.15rem; line-height: 1.25; }
	.site-weather__day .site-weather__glyph { margin-block: 0.2rem; }
	.site-weather__source { margin-block-start: 0.6rem; }
}
@media (max-width: 59.9375rem) {
	.shareholder-weather-mobile { padding-inline: 0; }
	.shareholder-weather-mobile .site-weather {
		background: color-mix(in srgb, var(--wakonda-surface) 45%, var(--wakonda-paper));
		border-radius: 0;
		padding: 0;
	}
	.shareholder-weather-mobile:not(:empty) + .site-main--shareholder {
		padding-block-start: 1.5rem;
	}
	.shareholder-weather-mobile .site-weather > .site-weather__link {
		display: block;
		padding: 0.75rem var(--wakonda-gutter);
	}
	.site-weather__current { display: none; }
	.site-weather__button {
		display: flex; align-items: center; gap: 0.6rem; width: 100%;
		box-sizing: border-box; padding: 0.75rem var(--wakonda-gutter); border: 0; background: none; color: inherit;
		font: inherit; text-align: start; cursor: pointer;
	}
	.site-weather__button .site-weather__temp { font-size: var(--wp--preset--font-size--large); }
	.site-weather__button .site-weather__summary { flex: 1; }
	.site-weather__button .site-weather__range { display: none; }
	.site-weather__button::after {
		content: '';
		flex: none;
		width: 0.4rem;
		height: 0.4rem;
		margin-inline: auto 0.15rem;
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		transform: rotate(45deg);
	}
	.site-weather__button[aria-expanded="true"]::after { transform: rotate(225deg); }
	.site-weather__panel { padding: 0.25rem var(--wakonda-gutter) 1rem; }
	.site-weather__days {
		grid-template-columns: repeat(5, max-content);
		justify-content: space-between;
		background: none;
		padding: 0.25rem 0 0.5rem;
	}
	.site-weather__today { display: block; margin: 0 0 0.75rem; font-size: var(--wp--preset--font-size--small); }
}

/* -------------------------------------------------------------------------
 * Main column.
 *
 * One centred column per template; --wakonda-measure is set per layout and
 * everything inside inherits it. The front page opts out entirely — its
 * layout belongs to the page content and the constrained-children rules in
 * the entry-content section below.
 * ---------------------------------------------------------------------- */

.site-main {
	box-sizing: content-box;
	max-width: var(--wakonda-measure);
	margin-inline: auto;
	padding: 2.75rem var(--wakonda-gutter) 5.5rem;
}

.site-main--archive,
.site-main--search {
	--wakonda-measure: 56rem;
}

.site-main--shareholder {
	--wakonda-measure: var(--wp--style--global--wide-size, 68rem);
}

.site-main--front {
	max-width: none;
	padding: 0;

	/*
	 * The two front-page width knobs, deliberately separate from the global
	 * wide tier so tuning here never moves the shareholder home or footer.
	 * front-wide caps the alignwide sections; front-cap is where the FULL
	 * sections stop bleeding and centre instead — 90rem ≈ 1440px screens
	 * (100rem for 1600).
	 */
	--wakonda-front-wide: 76rem;
	--wakonda-front-cap: 90rem;
}

/* -------------------------------------------------------------------------
 * Page and single headers.
 * ---------------------------------------------------------------------- */

.entry-title {
	margin-block-end: 0.75rem;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/*
 * The signature mark under a title block: a short ink rule. It hangs off the
 * last element of the header — the meta line when there is one, otherwise
 * the title itself — so the rule always sits between heading matter and
 * content.
 */
.entry-title::after,
.entry-meta::after,
.event__date::after {
	content: "";
	display: block;
	width: 2.5rem;
	margin-block-start: 1.5rem;
	border-block-start: 3px solid var(--wakonda-ink);
}

/* Singles have a meta line under the title; the rule moves down to it. */
.site-main--single .entry-title::after,
.site-main--event .entry-title::after {
	content: none;
}

.entry-image {
	margin: 2.25rem 0 0;
}

.entry-image img {
	width: 100%;
	border-radius: 2px;
}

article > .entry-content,
.entry-image + .entry-content {
	margin-block-start: 2.25rem;
}

/*
 * The way back to the archive from a single: a plain link with a direction
 * glyph, not a button. (Dashboard sections link forward through their
 * clickable headings instead — see the shareholder-home block.)
 */
.archive-link {
	margin: 3.5rem 0 0;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wakonda-line);
}

.archive-link a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large); /* Link, DM Sans bold */
	line-height: 1.56;
	font-weight: 700;
	text-decoration: none;
}

.archive-link a::before {
	content: "\2190\00a0\00a0";
}

.archive-link a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* -------------------------------------------------------------------------
 * Archives.
 * ---------------------------------------------------------------------- */

.archive-title {
	margin-block-end: 1.5rem;
	letter-spacing: -0.01em;
}

/* Empty states. */
.site-main--archive > p,
.shareholder-section > p:not([class]) {
	color: var(--wakonda-ink-soft);
}

/* --- events: date column left, hairline rows ----------------------------- */

.event-list,
.news-list,
.search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-list__item,
.news-list__item,
.search-list__item {
	position: relative;
	padding-block: 1.5rem;
	border-block-end: 1px solid var(--wakonda-line);
}

.event-list__item:first-child,
.news-list__item:first-child,
.search-list__item:first-child {
	padding-block-start: 0.5rem;
}

/*
 * Two flexed columns — the date block and a __body wrapper (title +
 * excerpt) — three with the archive's thumbnail. Each column flows on its
 * own and the first baselines align, so a two-line date ("AUG 29 /
 * Starts 10:30 AM") can never push the body's excerpt down.
 */
.event-list__item {
	display: flex;
	align-items: first baseline;
	gap: 2rem;
}

.event-list__date {
	flex: none;
	width: 11rem;
	/* Tabular dates line the column up even in a proportional face. */
	font-variant-numeric: tabular-nums;
}

.event-list__body {
	flex: 1;
	min-width: 0;
}

.event-list__title {
	font-size: var(--wp--preset--font-size--xx-large); /* H3 */
	line-height: 1.45;
}

/* The bare excerpt <p> the templates emit after the title. */
.event-list__body > p:not([class]) {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

.event-list__image {
	flex: none;
	align-self: flex-start;
}

.event-list__image img {
	display: block;
	width: 7.5rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
}

.event-list__title a,
.news-list__title a,
.search-list__title a,
.news-lead__title a,
.news-row__title a,
.doc-list__title a,
.raffle-list__title a {
	text-decoration: none;
}

.event-list__title a:hover,
.news-list__title a:hover,
.search-list__title a:hover,
.news-lead__title a:hover,
.news-row__title a:hover,
.doc-list__title a:hover,
.raffle-list__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (max-width: 40rem) {
	.event-list__item {
		display: block;
	}

	.event-list__date {
		width: auto;
		margin-block-end: 0.35rem;
	}

	.event-list__image {
		margin-block-start: 0.75rem;
	}
}

/* --- events: the month calendar ----------------------------------------- */

/*
 * The events archive (template-parts/event-calendar.php): a month as a
 * table of days, then the same month as a by-day list. Every entry and
 * legend key carries its category colour as --event-color (set inline
 * from the category's own setting or the theme palette —
 * inc/event-calendar.php). The colour is only ever a bar and a tint; the
 * type stays ink on paper, so no choice of colour can cost contrast.
 *
 * Narrow screens (the block at the end) shrink the table to a mini-month
 * that sticks to the top while the list scrolls under it.
 */
.event-calendar {
	--event-color: var(--wakonda-ink-soft);
	--event-calendar-pad: 0.45rem; /* cell side padding; the bar width sum depends on it */
}

/* The toolbar: ‹ › month, this-month, and the category filter at the end. */
.event-calendar__toolbar {
	display: flex;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-block-end: 1.25rem;
}

.event-calendar__nav {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: center;
	gap: 0.35rem;
}

.event-calendar__prev,
.event-calendar__next {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wakonda-line-strong);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	text-decoration: none;
	color: var(--wakonda-ink);
}

.event-calendar__prev:hover,
.event-calendar__next:hover {
	background: var(--wakonda-surface);
}

.event-calendar__title {
	min-width: 0;
	margin: 0 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--huge); /* H2 */
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-calendar__today {
	flex: none;
	margin-inline-start: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}

.event-calendar__today:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.event-calendar__swatch {
	display: inline-block;
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	background: var(--event-color);
	vertical-align: -0.02em;
}

/*
 * The category filter: a details/summary menu of links (no script to
 * open, close or apply it — a link is the filter). The summary wears the
 * current category's colour; the menu drops from its right edge over the
 * grid, above the bars' z-index.
 */
.event-filter {
	position: relative;
	flex: none;
	margin-inline-start: auto;
}

.event-filter__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--wakonda-line-strong);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.event-filter__summary::-webkit-details-marker {
	display: none;
}

.event-filter__summary:hover,
.event-filter[open] .event-filter__summary {
	background: var(--wakonda-surface);
}

/* Unfiltered: a hollow swatch stands for "all". */
.event-filter__summary--all .event-calendar__swatch {
	box-sizing: border-box;
	background: transparent;
	border: 1.5px solid var(--wakonda-ink-soft);
}

.event-filter__caret {
	width: 0.45em;
	height: 0.45em;
	margin-inline-start: 0.1rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.event-filter__menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.35rem);
	z-index: 3;
	min-width: 14rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-line-strong);
	border-radius: 2px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.event-filter__menu a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wakonda-ink);
	text-decoration: none;
	white-space: nowrap;
}

/* "All categories" has no swatch; keep its text on the same column. */
.event-filter__menu li:first-child a {
	padding-inline-start: calc(0.9rem + 0.7rem + 0.6rem);
}

.event-filter__menu a:hover,
.event-filter__menu a:focus-visible {
	background: var(--wakonda-surface);
}

.event-filter__menu a[aria-current="true"] {
	font-weight: 600;
}

.event-calendar__empty {
	margin: 0;
	padding-block: 0.65rem;
	color: var(--wakonda-ink-soft);
}

.event-calendar__grid {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	border: 1px solid var(--wakonda-line);
}

.event-calendar__grid th {
	padding: 0.5rem var(--event-calendar-pad);
	border-block-end: 1px solid var(--wakonda-line);
	font-size: var(--wp--preset--font-size--x-small); /* Eyebrow, small */
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: start;
	color: var(--wakonda-ink-soft);
}

.event-calendar__day {
	height: 6.5rem;
	padding: 0.4rem var(--event-calendar-pad) 0.55rem;
	border: 1px solid var(--wakonda-line);
	vertical-align: top;
}

.event-calendar__day--pad {
	background: var(--wakonda-surface);
	background: color-mix(in srgb, var(--wakonda-surface) 45%, var(--wakonda-paper));
}

.event-calendar__date {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: var(--wakonda-ink-soft);
}

/* A day with entries links its number to that day in the list. */
a.event-calendar__number {
	text-decoration: none;
	color: var(--wakonda-ink);
}

a.event-calendar__number:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Today: the number in a filled green disc. */
.event-calendar__day--today .event-calendar__number,
.event-agenda__day--today .event-agenda__number {
	display: inline-block;
	min-width: 1.6em;
	padding-inline: 0.25em;
	border-radius: 1em;
	background: var(--wakonda-accent);
	color: var(--wakonda-paper);
	text-align: center;
}

/*
 * Multi-day events are bars. Each covered cell holds one fixed-height slot
 * per reserved lane; the bar sits in the slot where it starts and
 * stretches across --span cells — N content widths plus the paddings and
 * borders in between — over the neighbouring cells' empty slots. The
 * table's fixed layout is what makes every column the same width.
 */
.event-calendar__slot {
	position: relative;
	height: 1.45rem;
	margin-block-start: 0.25rem;
}

.event-calendar__date + .event-calendar__slot {
	margin-block-start: 0.35rem;
}

.event-calendar__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(var(--span, 1) * 100% + (var(--span, 1) - 1) * (2 * var(--event-calendar-pad) + 1px));
	padding: 0 0.45rem;
	border-inline-start: 3px solid var(--event-color);
	border-radius: 2px;
	background: var(--wakonda-surface);
	background: color-mix(in srgb, var(--event-color) 11%, var(--wakonda-paper));
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.2;
	color: var(--wakonda-ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

.event-calendar__bar:hover,
.event-calendar__bar:focus-visible {
	background: color-mix(in srgb, var(--event-color) 22%, var(--wakonda-paper));
}

.event-calendar__bar .event-calendar__event-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A cut edge where the range runs on past the week. */
.event-calendar__bar--before {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.event-calendar__bar--before::before {
	content: "\2039";
	margin-inline-end: 0.3em;
	color: var(--wakonda-ink-soft);
}

.event-calendar__bar--after {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.event-calendar__bar--after::after {
	content: "\203A";
	margin-inline-start: auto;
	padding-inline-start: 0.3em;
	color: var(--wakonda-ink-soft);
}

.event-calendar__events {
	display: grid;
	gap: 0.25rem;
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
}

.event-calendar__event {
	display: block;
	padding: 0.2rem 0.45rem 0.25rem;
	border-inline-start: 3px solid var(--event-color);
	border-radius: 2px;
	background: var(--wakonda-surface);
	background: color-mix(in srgb, var(--event-color) 11%, var(--wakonda-paper));
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	color: var(--wakonda-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.event-calendar__event:hover,
.event-calendar__event:focus-visible {
	background: color-mix(in srgb, var(--event-color) 22%, var(--wakonda-paper));
}

.event-calendar__event-time {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wakonda-ink-soft);
}

.event-calendar__event-title {
	display: block;
}

.event-calendar__flag {
	display: block;
	font-style: italic;
	color: var(--wakonda-ink-soft);
}

/* --- the list under the grid: one block per day with something on it --- */

.event-agenda {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.event-agenda__day {
	display: flex;
	align-items: first baseline;
	gap: 2rem;
	padding-block: 0.65rem;
	border: 0;
}

/* Sticky grids above (narrow screens) need the jump target below them. */
.event-agenda__day {
	scroll-margin-top: 1rem;
}

.event-agenda__date {
	flex: none;
	width: 8.5rem;
	margin: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small); /* Eyebrow */
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--wakonda-ink-soft);
}

.event-agenda__weekday {
	margin-inline-end: 0.35em;
}

.event-agenda .event-calendar__events {
	flex: 1;
	min-width: 0;
	gap: 0.4rem;
	margin: 0;
}

.event-agenda .event-calendar__event {
	padding: 0.4rem 0.75rem 0.45rem;
	font-size: var(--wp--preset--font-size--small);
}

.event-agenda .event-calendar__event-time,
.event-agenda .event-calendar__event-title,
.event-agenda .event-calendar__flag {
	display: inline;
}

.event-agenda .event-calendar__event-time {
	margin-inline-end: 0.5em;
}

.event-agenda .event-calendar__flag {
	margin-inline-start: 0.5em;
}

/* Desktop chooses a view; phones always use the continuous agenda. */
.events-page {
	--wakonda-calendar-mode: calendar;
}

.events-page[data-view="agenda"] {
	--wakonda-calendar-mode: agenda;
}

.event-view-toggle {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--wakonda-line);
	border-radius: 2px;
}

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

.event-view-toggle button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--wakonda-ink);
	font: inherit;
	cursor: pointer;
}

.event-view-toggle button[aria-pressed="true"] {
	background: var(--wakonda-accent);
	color: var(--wakonda-paper);
}

.event-view-toggle button:focus-visible {
	outline: 2px solid var(--wakonda-accent);
	outline-offset: 3px;
}

@media (min-width: 48.001rem) {
	.events-page[data-view="calendar"] .event-agenda,
	.events-page[data-view="calendar"] .event-calendar__continuation,
	.events-page[data-view="calendar"] .event-calendar + .event-calendar {
		display: none;
	}

	.events-page[data-view="agenda"] .event-calendar__grid,
	.events-page[data-view="agenda"] .event-calendar__prev,
	.events-page[data-view="agenda"] .event-calendar__next,
	.events-page[data-view="agenda"] .event-calendar__today {
		display: none;
	}

	.events-page[data-view="agenda"] .event-calendar__month {
		position: sticky;
		top: 0;
		z-index: 3;
		padding-block: 0;
		background: var(--wakonda-paper);
	}

	.events-page[data-view="agenda"] .event-calendar__title {
		margin: 0;
	}

	.events-page[data-view="agenda"] .event-calendar__toolbar {
		margin: 0;
		padding-block-end: 1rem;
		box-sizing: content-box;
		min-height: 52px;
	}

	.events-page[data-view="agenda"] .event-calendar-filter {
		top: 0;
		transform: none;
	}

	.events-page[data-view="agenda"] .event-agenda {
		margin-block-start: 0;
	}

	.events-page[data-view="agenda"] .event-agenda__day {
		scroll-margin-top: 5rem;
	}

}
@media (max-width: 48rem) {
	.events-page, .events-page[data-view="calendar"], .events-page[data-view="agenda"] {
		--wakonda-calendar-mode: agenda;
	}

	.event-view-toggle {
		display: none;
	}

}

/* Flowing months: full event names and date ranges stay readable. */
.event-calendar + .event-calendar {
	margin-block-start: 2rem;
}

.event-calendar__continuation {
	padding-block: 1.5rem;
	text-align: center;
}

.event-calendar__more {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	font-weight: 500;
	text-underline-offset: 0.3em;
}

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

.event-calendar__status {
	margin: 0;
	color: var(--wakonda-ink-soft);
	font-size: 0.875rem;
}

.event-calendar__status:empty {
	display: none;
}

.event-calendar__continuation:has(.event-calendar__more[hidden]) {
	display: none;
}

.event-calendar__prev, .event-calendar__next {
	min-width: 44px;
	min-height: 44px;
	border-radius: 2px;
}

.event-filter__summary {
	min-height: 44px;
	box-sizing: border-box;
	border-radius: 2px;
}

.event-filter__menu a {
	min-height: 44px;
	box-sizing: border-box;
}

.event-agenda__day {
	align-items: flex-start;
	gap: 1rem;
}

.event-agenda__date {
	width: 3.25rem;
	text-align: center;
}

.event-agenda__weekday {
	display: block;
	margin: 0;
	font-size: 0.7rem;
}

.event-agenda__number {
	display: block;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--wakonda-ink);
}

.event-agenda .event-calendar__events {
	gap: 0.4rem;
}

.event-agenda .event-calendar__event {
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	box-sizing: border-box;
	border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, var(--event-color) 5%, var(--wakonda-paper));
	font-size: 1rem;
	line-height: 1.4;
}

.event-agenda .event-calendar__event-title {
	display: block;
	font-weight: 500;
}

.event-agenda .event-calendar__event-time, .event-agenda .event-calendar__flag {
	display: block;
	margin: 0;
	font-size: 0.8125rem;
	font-style: normal;
}

.event-agenda .event-calendar__flag {
	margin-block-start: 0.25rem;
}

.event-agenda .event-calendar__event:hover {
	background: color-mix(in srgb, var(--event-color) 12%, var(--wakonda-paper));
}

.event-agenda__day--today .event-agenda__number {
	background: var(--wakonda-accent);
	color: var(--wakonda-paper);
	border-radius: 50%;
}


/* One filter belongs to the archive, outside the appended month sections. */
.event-calendar-filter {
	position: sticky;
	top: 0;
	z-index: 5;
	height: 0;
	display: flex;
	justify-content: flex-end;
}

.event-calendar__toolbar {
	padding-inline-end: 19rem;
	min-height: 52px;
}
.event-calendar-filter { gap: 0.75rem; align-items: flex-start; }
.event-calendar-filter .event-filter { margin: 0; }
.event-calendar-filter .event-filter__summary { min-height: 52px; }
.event-view-toggle button { font-size: 0.875rem; }


.event-filter__icon { display: none; }

@media (min-width: 48.001rem) and (max-width: 65rem) {
	.event-calendar__toolbar { padding-inline-end: 11rem; }
	.event-calendar-filter .event-filter__summary { width: 52px; padding: 0; justify-content: center; }
	.event-calendar-filter .event-filter__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.event-calendar-filter .event-filter__summary .event-calendar__swatch,
	.event-calendar-filter .event-filter__caret { display: none; }
	.event-calendar-filter .event-filter__icon { display: block; }
	.event-calendar__title { font-size: 1.5rem; }
}


@media (max-width: 48rem) {
	.event-calendar-filter { transform: translateY(0.75rem); top: 0; }
	.event-calendar-filter .event-filter__summary { min-height: 44px; }
	.event-calendar__toolbar { padding-inline-end: 3.5rem; min-height: 44px; }
	.event-calendar__grid {
		display: none;
	}

	.event-calendar__month {
		position: sticky;
		top: 0;
		z-index: 3;
		padding-block: 0.75rem;
		background: var(--wakonda-paper);
		border-block-end: 1px solid var(--wakonda-line);
	}

	.event-calendar__toolbar {
		flex-wrap: nowrap;
		height: auto;
		gap: 0.75rem;
		margin: 0;
	}

	.event-calendar__nav {
		flex: 1;
		min-width: 0;
		flex-wrap: nowrap;
		gap: 0.4rem;
	}

	.event-calendar__title {
		order: -1;
		flex: 1;
		margin: 0;
		font-size: 1.5rem;
		white-space: normal;
	}

	.event-calendar__prev,
	.event-calendar__next,
	.event-calendar__today {
		display: none;
	}

	.event-filter {
		margin: 0;
	}

	.event-filter__summary {
		width: 44px;
		padding: 0;
		justify-content: center;
	}

	.event-filter__summary:not(.event-filter__summary--all) {
		border-color: var(--event-color);
		background: color-mix(in srgb, var(--event-color) 12%, var(--wakonda-paper));
	}

	.event-filter__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.event-filter__summary .event-calendar__swatch,
	.event-filter__caret {
		display: none;
	}

	.event-filter__icon { display: block; }

	.event-filter__menu {
		inset-inline-start: auto;
		inset-inline-end: 0;
		max-width: calc(100vw - 3rem);
	}

	.event-agenda {
		margin-block-start: 0;
	}

	.event-agenda__day {
		display: flex;
		padding-block: 0.65rem;
		scroll-margin-top: 5rem;
	}

	.event-agenda__day:first-child {
		border-block-start: 0;
	}

	.event-agenda__date {
		width: 2.5rem;
	}

	.event-calendar + .event-calendar {
		margin-block-start: 2rem;
	}

}

/* --- news and search: stacked editorial rows ---------------------------- */

.news-list__item,
.search-list__item {
	padding-block: 1.75rem;
}

.news-list__title,
.search-list__title {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.news-list__item > p:not([class]),
.search-list__item > p:not([class]) {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	max-width: 46rem;
}

.site-main--search .search-form {
	margin-block-end: 2.75rem;
}

/* --- pagination --------------------------------------------------------- */

.pagination {
	margin-block-start: 2.75rem;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	border-color: var(--wakonda-line-strong);
}

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

/* -------------------------------------------------------------------------
 * Shareholder home.
 *
 * A dashboard, not an article: section headings step out of the serif voice
 * into small caps with a rule running to the margin, so the page reads as
 * labelled regions rather than one long document.
 * ---------------------------------------------------------------------- */

.shareholder-pinned {
	max-width: 100%;
	padding: 1.75rem 2rem;
	background: var(--wakonda-surface);
	border-inline-start: 3px solid var(--wakonda-ink);
	border-radius: 2px;
}

.shareholder-pinned > * {
	max-width: 62ch;
	margin-block: 0;
}

.shareholder-pinned > * + * {
	margin-block-start: 0.9rem;
}

.shareholder-pinned + .shareholder-columns {
	margin-block-start: 3rem;
}

/*
 * Reading matter left, meetings-and-documents rail right. The reading column
 * is first in the DOM (see the template), so under the breakpoint the stack
 * runs pinned → news → events → photos → rail: the matter that changes week
 * to week sits first, the reference matter follows. Explicit grid placement
 * rather than order:, so visual order and focus order agree in both layouts.
 */
.shareholder-section {
	margin-block-start: 3.25rem;
}

.shareholder-reading > :first-child,
.shareholder-aside > :first-child {
	margin-block-start: 0;
}

@media (min-width: 60rem) {
	.shareholder-columns {
		display: grid;
		/*
		 * The rail holds a third of the container (25% read too slight —
		 * Adam's call, 2026-08-26), with a floor so a percentage can never
		 * crush the doc rows just above this breakpoint; a fixed track did
		 * the opposite — it GREW proportionally as the viewport shrank,
		 * squeezing the reading column. (At the 78rem wide size the 33%
		 * renders ~25.7rem.)
		 */
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 33%);
		column-gap: 3.5rem;
		align-items: start;
	}

	.shareholder-reading {
		grid-column: 1;
		grid-row: 1;
	}

	.shareholder-aside {
		grid-column: 2;
		grid-row: 1;
		padding-inline-start: 2.5rem;

		/* The rail is short; keep it in view while the reading column scrolls. */
		position: sticky;
		top: 2rem;
	}
}

@media (max-width: 59.9375rem) {
	.shareholder-columns > * + * {
		margin-block-start: 3.25rem;
	}
}

.shareholder-section > h2 {
	margin-block-end: 1.5rem;
	padding-block-end: 0.85rem;
	border-block-end: 1px solid var(--wakonda-line);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small); /* Eyebrow */
	font-weight: 700;
	line-height: 1.43;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wakonda-accent);
}

/*
 * A linked heading IS the section's view-all: a small arrow follows the
 * label, and the whole row is one target (block anchor). The rule below
 * stays on the h2, so linked and plain headings draw identically — and
 * only anchors grow the arrow, so a plain heading never wears one.
 */
.shareholder-section > h2 > a {
	display: block;
	text-decoration: none;
}

.shareholder-section > h2 > a::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5rem;
	transition: translate 120ms ease;
}

.shareholder-section > h2 > a:hover::after {
	translate: 0.2rem 0;
}

/* --- latest news: a lead story, then compact rows ------------------------ */

/*
 * The lead: text left, its picture large on the right — but only when the
 * post has art (featured image, else its first content image). The template
 * adds --has-media alongside the picture, and without it the lead stays a
 * clean full-measure text story rather than reserving an empty column.
 */
.news-lead--has-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	column-gap: 2.5rem;
}

.news-lead__media {
	display: block;
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: start;
}

.news-lead__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	transition: opacity 150ms ease;
}

.news-lead__media:hover img {
	opacity: 0.85;
}

.news-lead__date {
	grid-column: 1;
}

.news-lead__title {
	grid-column: 1;
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--huge); /* H2 */
	line-height: 1.23;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.news-lead > p:not([class]) {
	grid-column: 1;
	margin: 1rem 0 0;
	max-width: 46rem;
}

@media (max-width: 40rem) {
	.news-lead--has-media {
		display: block;
	}

	.news-lead__media {
		margin-block-end: 1.4rem;
	}
}

/*
 * The two items under the lead: text left, thumbnail right. The thumbnail
 * column collapses away when a post has no art, so a text-only announcement
 * reads as a clean editorial row.
 */
.news-rows {
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

.news-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 2rem;
	row-gap: 0.35rem;
	padding-block: 1.5rem;
	border-block-start: 1px solid var(--wakonda-line);
}

.news-row__media {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: start;
}

.news-row__media img {
	display: block;
	width: 12.5rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	transition: opacity 150ms ease;
}

.news-row__media:hover img {
	opacity: 0.85;
}

.news-row__date {
	grid-column: 1;
}

.news-row__title {
	grid-column: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large); /* H4 */
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.news-row > p:not([class]) {
	grid-column: 1;
	display: -webkit-box;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

@media (max-width: 40rem) {
	.news-row {
		display: block;
	}

	.news-row__media {
		margin-block-start: 0.75rem;
	}

	.news-row__media img {
		width: 100%;
	}
}

/* --- upcoming events: the archive rows in dashboard voice --------------- */

/* Compact dates ("Jul 17 – Aug 29") need less column than the archive's. */
.event-list--compact .event-list__date {
	width: 8.5rem;
}

/* Timed events add a second line (start time). */
.event-list--compact .event-list__time {
	display: block;
}

/* The section's more-link follows — no rule after the last row. */
.event-list--compact .event-list__item:last-child {
	border-block-end: none;
}

.event-list--compact .event-list__body > p:not([class]) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* --- the rail ------------------------------------------------------------ */

/* Active raffles: title first, the drawing date quietly beneath it. */
.raffle-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.raffle-list__item + .raffle-list__item {
	margin-block-start: 1.5rem;
}

.raffle-list__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large); /* H5 */
	line-height: 1.33;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.raffle-list__ends {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small); /* Body Small */
	line-height: 1.57;
	color: var(--wakonda-ink-soft);
}

/* Minutes and resources: icon rows. */
.doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-list__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: 1.25rem;
	padding-block: 0.75rem;
}

/*
 * The badge: a sand circle holding a document glyph, with the file
 * extension ("PDF") stacked beneath it for rows that are real files; rows
 * that are pages (meeting minutes live in post content) get the glyph
 * alone.
 */
.doc-list__icon {
	display: grid;
	place-items: center;
	align-content: center;
	row-gap: 0.15rem;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--wakonda-surface);
	color: var(--wakonda-accent-deep);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.doc-list__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.doc-list__title {
	font-size: var(--wp--preset--font-size--large); /* H5 */
	line-height: 1.33;
}

.doc-list__meta {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small); /* Body Small */
	line-height: 1.57;
	color: var(--wakonda-ink-soft);
}

.doc-list__meta strong {
	font-weight: 600;
	color: var(--wakonda-ink);
}

/* -------------------------------------------------------------------------
 * Entry content — block content typography.
 *
 * Everything the block editor can emit for this site: prose, lists, quotes,
 * tables, galleries, File blocks. Scoped to .entry-content so the same rules
 * hold on pages, news and events, and inside the editor canvas.
 * ---------------------------------------------------------------------- */

.entry-content {
	overflow-wrap: break-word;
}

/* Owl spacing: rhythm lives in one place instead of per-element margins. */
.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

.entry-content > * + h2 {
	margin-block-start: 2.75rem;
}

.entry-content > * + h3,
.entry-content > * + h4 {
	margin-block-start: 2.25rem;
}

.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * {
	margin-block-start: 0.9rem;
}

.entry-content a:not([class*="button"]) {
	text-decoration: underline;
	text-decoration-color: var(--wakonda-line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: text-decoration-color 150ms ease;
}

.entry-content a:not([class*="button"]):hover {
	text-decoration-color: var(--wakonda-ink);
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4rem;
}

.entry-content li {
	margin-block-start: 0.35rem;
}

.entry-content li:first-child {
	margin-block-start: 0;
}

.entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: 1.5rem;
	border-inline-start: 2px solid var(--wakonda-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
}

.entry-content blockquote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wakonda-ink-soft);
}

.wp-block-pullquote {
	padding: 2rem 0;
	border-block: 1px solid var(--wakonda-ink);
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
}

.entry-content hr,
.wp-block-separator {
	height: 0;
	border: 0;
	border-block-start: 1px solid var(--wakonda-line);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
}

.entry-content th {
	text-align: start;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wakonda-ink-soft);
}

.entry-content th,
.entry-content td {
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-block-end: 1px solid var(--wakonda-line);
}

.entry-content pre,
.entry-content code {
	background: var(--wakonda-surface);
	border-radius: 2px;
	font-size: 0.9em;
}

.entry-content pre {
	padding: 1rem 1.25rem;
	overflow-x: auto;
}

.entry-content code {
	padding: 0.1em 0.35em;
}

.entry-content pre code {
	padding: 0;
	background: none;
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption,
.wp-element-caption {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wakonda-ink-soft);
}

.entry-content img {
	border-radius: 2px;
}

/*
 * The File block — how minutes PDFs and forms are published. Rendered as a
 * flat slip: name left, download button right.
 */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 0.875rem 1.25rem;
	background: var(--wakonda-surface);
	border-radius: 2px;
}

.wp-block-file > a:first-child {
	font-weight: 500;
	text-decoration: none;
}

.wp-block-file > a:first-child:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wp-block-file .wp-block-file__button {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.45rem 1.1rem;
}

/*
 * Constrained children — only where the main column steps aside (the front
 * page). Prose holds the reading measure, alignwide steps out to the wide
 * size, alignfull bleeds to the viewport edge.
 */
.site-main--front .entry-content {
	padding: 3rem var(--wakonda-gutter) 7rem;

	/*
	 * Bleeding sections shove imagery past the viewport edge on purpose
	 * (the intro polaroids); clip it rather than grow a horizontal
	 * scrollbar. x only — tilted photos still poke out vertically.
	 */
	overflow-x: clip;
}

.site-main--front .entry-content > * {
	max-width: var(--wakonda-measure);
	margin-inline: auto;
}

.site-main--front .entry-content > .alignwide {
	max-width: var(--wakonda-front-wide, var(--wp--style--global--wide-size, 68rem));
}

/*
 * Full sections bleed to the viewport edge — negative margins eat the
 * gutter — until the viewport passes --wakonda-front-cap, where the margin
 * math flips positive and the section centres at the cap instead. One
 * expression, no media query, so the cap is a plain knob.
 */
.site-main--front .entry-content > .alignfull {
	max-width: none;
	margin-inline: max(
		calc(-1 * var(--wakonda-gutter)),
		calc((100% - var(--wakonda-front-cap)) / 2)
	);
}

/* Classic image floats inside prose. */
.entry-content .alignleft {
	float: left;
	margin: 0.35rem 1.75rem 1rem 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.75rem;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Gallery carousel — the Carousel style on the core Gallery block
 * (inc/gallery-carousel.php).
 *
 * The layout Apple uses for its product galleries: a strip of photos at
 * their natural widths and one fixed height, the first photo on the
 * content's left edge and the rest running off the right edge of the
 * screen, with the two arrows together at the bottom right. It is a
 * scroll-snap track, so swipe, trackpad and keyboard all work before any
 * script runs; the arrows and the count are server-rendered and stay
 * hidden until <wakonda-carousel> (wakonda-elements.js) takes over.
 *
 * Every photo shows whole. Each slide carries its photo's ratio
 * (--wakonda-slide-ratio, set by the render filter), so it is as wide as
 * its photo at the strip's height before the image loads, and its box is
 * the photo's box — which is what core's lightbox enlarges to. On narrow
 * screens the whole strip uses a smaller shared height; wide photos
 * remain scrollable without shrinking individual slides.
 *
 * The bleed: the track is a viewport-wide grid item pulled left by the
 * distance from the content edge to the screen edge and padded by the
 * same amount, so the first photo lands on the content edge and the snap
 * line (scroll-padding) sits there too. cqw units make that distance
 * exact whatever the column is, because the figure is a container. (A
 * classic scrollbar makes 100vw overshoot by its width; html clips it.)
 *
 * Each selector pair below names the same thing twice: the track on the
 * front end and the gallery itself in the editor, which gets no wrapper —
 * so the canvas previews the strip (no bleed, no ratio hints), with the
 * gallery caption riding along there as a last, text-only slide. The
 * editor still carries is-cropped, so its selectors out-rank core's crop
 * rules with the same id pseudo-selector core uses for its own.
 * ---------------------------------------------------------------------- */

.wp-block-gallery.has-wakonda-carousel,
.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) {
	--wakonda-carousel-height: min(60vh, 32rem, 70vw);
}

/* Leave room for the next photo to invite a swipe on phones. */
@media (max-width: 48rem) {
	.wp-block-gallery.has-wakonda-carousel,
	.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) {
		--wakonda-carousel-height: min(60vh, 55vw);
	}
}

.wp-block-gallery.has-wakonda-carousel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	row-gap: 0.85rem;
	align-items: center;
	margin: 0;
	container-type: inline-size;
}

.wakonda-carousel {
	display: block;
}

.wakonda-carousel__track,
.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.85rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

/* Two classes deep: core's layout support zeroes the margins of a flex
 * layout's children (`.is-layout-flex > *`), and the pull-left is a margin. */
.wp-block-gallery.has-wakonda-carousel > .wakonda-carousel__track {
	--wakonda-carousel-inset: calc(50vw - 50cqw);
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: 100vw;
	margin-inline-start: calc(50cqw - 50vw);
	padding-inline: var(--wakonda-carousel-inset);
	scroll-padding-inline: var(--wakonda-carousel-inset);
}

@media (prefers-reduced-motion: no-preference) {
	.wakonda-carousel__track {
		scroll-behavior: smooth;
	}
}

/* Once the arrows are live the scrollbar is noise. */
.wakonda-carousel.is-ready .wakonda-carousel__track {
	scrollbar-width: none;
}

.wakonda-carousel.is-ready .wakonda-carousel__track::-webkit-scrollbar {
	display: none;
}

/* A definite shared height and proportional width override core's gallery
 * column widths. Do not cap individual widths: that makes landscapes shorter
 * than portraits. The strip itself scrolls when a photo exceeds the viewport. */
.wp-block-gallery.is-style-carousel .wakonda-carousel__track > .wp-block-image,
.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) > .wp-block-image {
	flex: 0 0 auto;
	min-width: 0;
	scroll-snap-align: start;
	background: var(--wakonda-surface);
	border-radius: 2px;
}

.wp-block-gallery.is-style-carousel .wakonda-carousel__track > .wp-block-image {
	width: auto !important;
	max-width: none !important;
	height: var(--wakonda-carousel-height);
	aspect-ratio: var(--wakonda-slide-ratio, auto);
}

/* Linked images (Link to: media file) put an anchor between figure and img. */
.wp-block-gallery.is-style-carousel .wakonda-carousel__track > .wp-block-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.wp-block-gallery.is-style-carousel .wakonda-carousel__track > .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 0;
}

/*
 * Editor only. The canvas has no ratio hints, so the slide sizes to its
 * image at the strip's height. width is forced: core's per-column rules
 * include :first-child:nth-last-child chains no sane selector out-ranks.
 */
.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) > .wp-block-image {
	width: auto !important;
	height: var(--wakonda-carousel-height);
}

.wp-block-gallery.is-style-carousel.has-nested-images:not(.has-wakonda-carousel) > figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone) {
	height: 100%;
}

.wp-block-gallery.is-style-carousel.has-nested-images:not(.has-wakonda-carousel) > figure.wp-block-image:not(#individual-image) img {
	width: auto;
	height: 100%;
	max-width: none !important;
	object-fit: contain;
}

/* Editor only: whatever else the canvas puts in the gallery — the media
 * placeholder, the gallery caption — takes a full-width slot. */
.wp-block-gallery.is-style-carousel:not(.has-wakonda-carousel) > :not(.wp-block-image) {
	flex: 0 0 100%;
	scroll-snap-align: start;
	align-self: center;
}

/* The row under the strip: caption at the left, count and arrows at the
 * right, on the content's edges. */
.has-wakonda-carousel > .blocks-gallery-caption {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	text-align: start;
}

.wakonda-carousel__controls {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wakonda-carousel__status {
	margin-inline-end: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wakonda-ink-soft);
}

.wakonda-carousel__button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wakonda-surface);
	color: var(--wakonda-ink);
	cursor: pointer;
}

.wakonda-carousel__button svg {
	width: 1.1rem;
	height: 1.1rem;
}

.wakonda-carousel__button:hover {
	background: color-mix(in srgb, var(--wakonda-surface), var(--wakonda-ink) 8%);
}

/* aria-disabled rather than disabled: the arrow keeps focus at either end
 * instead of dropping it on the page. Greyed chevron, as Apple does. */
.wakonda-carousel__button[aria-disabled="true"] {
	color: var(--wakonda-line-strong);
	cursor: default;
}

/* The row's own display rule would beat the UA's [hidden]; and when
 * everything fits the view there is nothing to page through. */
.wakonda-carousel__controls[hidden],
.wakonda-carousel.is-static .wakonda-carousel__controls {
	display: none;
}

/* -------------------------------------------------------------------------
 * Front page.
 *
 * The hero photo is the page's featured image (content); the lockup and the
 * shim are chrome. The shim is 454px of black fading down over the top of
 * the photo, so the inverted header always sits on near-black no matter how
 * pale the sky in whatever photo the board picks. The hero's bottom edge is
 * a clean cut to the page.
 * ---------------------------------------------------------------------- */

.front-hero {
	position: relative;
	display: block;

	/*
	 * One fixed band on every viewport (the mock's 768px), capped only so a
	 * short screen (phone landscape) still gets a whole heroful.
	 */
	height: 48rem;
	height: min(48rem, 100svh);
	background: var(--wakonda-ink);
	overflow: hidden;
}

.front-hero__backdrop {
	position: absolute;
	inset: 0;
}

.front-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/*
 * The shim. On .front-hero--plain (no featured image) it just blends into
 * the ink band — obviously awaiting its photo, never broken.
 */
.front-hero__backdrop::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 28.375rem; /* the mock's 454px */
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 0) 0%,
		rgb(0 0 0 / 0.6) 30%,
		rgb(0 0 0) 75%
	);
	pointer-events: none;
}

/*
 * The lockup (hero-text.svg: bird over wordmark, 364×175, white), seated
 * 140px down from the hero's top — inside the shim's fade, per the mock.
 * The invert() is belt-and-braces — it renders the art white whatever fill
 * the SVG carries.
 */
.front-hero__title {
	position: absolute;
	left: 50%;
	top: 8.75rem; /* the mock's 140px */
	transform: translateX(-50%);
}

.front-hero__title img {
	width: clamp(16rem, 24vw, 22.75rem);
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 1px 18px rgba(0, 0, 0, 0.35));
}

.front-hero__est {
	position: absolute;
	inset-inline-end: var(--wakonda-gutter);
	bottom: 1.25rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* --- the header over the hero ------------------------------------------ */

/*
 * Front page only (body.has-front-hero). Absolute by default so the
 * un-upgraded page degrades to an inverted header that scrolls away with the
 * hero; <wakonda-hero> pins it (is-fixed) and swaps it back to the standard
 * light bar once the hero is spent (is-past-hero).
 */
body.has-front-hero .site-header--public {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 60;
	background: transparent;
	border-block-end: 1px solid transparent;
	color: #fff;
	transition: background-color 200ms ease, color 200ms ease,
		border-color 200ms ease;
}

/*
 * The legibility shim: a gradient taller than the bar itself, fading to
 * nothing, so white nav text survives a pale sky in the photo.
 */
body.has-front-hero .site-header--public::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 180%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	pointer-events: none;
	transition: opacity 200ms ease;
}

/* Keep the bar's contents above its own shim. */
body.has-front-hero .site-header--public .site-header__inner {
	position: relative;
}

body.has-front-hero .site-header--public .site-logo img {
	filter: brightness(0) invert(1);
	transition: filter 200ms ease;
}

/* The narrow-screen menu needs a solid ground the moment it opens. */
body.has-front-hero .site-header--public:has(wakonda-nav.is-open) {
	background: rgba(0, 0, 0, 0.92);
}

body.has-front-hero .site-header--public.is-fixed {
	position: fixed;
}

body.admin-bar.has-front-hero .site-header--public.is-fixed {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Past the hero: the standard light bar again. */
body.has-front-hero .site-header--public.is-past-hero,
body.has-front-hero .site-header--public.is-past-hero:has(wakonda-nav.is-open) {
	background: var(--wakonda-paper);
	border-block-end-color: var(--wakonda-line);
	color: var(--wakonda-ink);
}

body.has-front-hero .site-header--public.is-past-hero::before {
	opacity: 0;
}

body.has-front-hero .site-header--public.is-past-hero .site-logo img {
	filter: none;
}

/*
 * Dropdown panels are paper in both header states, so they must carry their
 * own ink rather than inheriting the inverted header's white.
 */
.account-menu__list,
.nav-more__list,
wakonda-nav.is-ready .nav-list > li > .sub-menu,
wakonda-nav.is-ready .nav-list > li > .children {
	color: var(--wakonda-ink);
}

/* --- homepage sections (the wakonda/* patterns) ------------------------- */

/* Big air between sections; the generic content owl is for prose. */
.site-main--front .entry-content > * + * {
	margin-block-start: clamp(4rem, 9vh, 6.5rem);
}

/*
 * One rhythm for every section's text stack — heading, body, link. The
 * knob for all four sections lives here and nowhere else. (No specificity
 * armor needed: since the sections became dynamic blocks, core injects no
 * layout margins into their markup — the old flow-gap reset this file
 * carried is gone with the group blocks that required it.)
 */
.home-intro__text > * + *,
.home-experience__intro > * + *,
.home-history__panel > * + *,
.home-join__text > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

/*
 * Section display headings: regular-weight Lora, 40px in the mobile set and
 * 72px on desktop, per the design — a size class above the prose scale, so
 * it is set here rather than through the theme.json presets. Stepped, not
 * fluid, like everything else.
 */
.home-intro h2,
.home-experience h2,
.home-history h2,
.home-join h2 {
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

@media (min-width: 60rem) {
	.home-intro h2,
	.home-experience h2,
	.home-history h2,
	.home-join h2 {
		font-size: 4.5rem;
	}
}

/*
 * Section body copy is Lora too — 16px on a 28px line. The family var is
 * named "heading" but it is simply the theme's Lora preset. Card labels
 * keep their sans small-caps voice, hence the :not().
 */
.home-intro p:not(.home-card__label),
.home-experience p:not(.home-card__label),
.home-history p:not(.home-card__label),
.home-join p:not(.home-card__label) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}

/*
 * Snapshot treatment shared by every homepage photo — and resize-proofing.
 * The editor's drag handles write a fixed inline width into the page's copy
 * of a pattern (is-resized), silently defeating the collage geometry; the
 * contentOnly lock hides design panels but not those handles. !important
 * outranks inline styles everywhere this sheet loads — the front end AND
 * the editor canvas (it is the editor style) — so a stored resize simply
 * does nothing. Deliberately CSS, not a save-time content filter: a filter
 * that silently rewrites what an editor saved is the kind of spooky action
 * this project avoids.
 */
/*
 * block kills the inline-image baseline gap (the mystery space under the
 * photo inside its figure). width/height 100% + cover make the FIGURE the
 * unit of design: give .home-photo (or a wrapper) a width and a height or
 * aspect-ratio, and the photo fills the box, cropping from its centre. An
 * unsized figure still collapses to the image's natural ratio — height:100%
 * against an auto parent resolves to auto — so nothing changes until a box
 * is given real dimensions. The !importants remain the resize-proofing.
 */
.home-photo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 12px;
}

/* And in the canvas, remove the drag affordance itself. Editor-only by
 * construction: this selector matches nothing on the front end. */
.home-photo .components-resizable-box__handle {
	display: none !important;
}

/* Editor photo slots (the wakonda/* blocks): the swap button IS the image. */
.home-photo .wakonda-photo-slot {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.home-photo .wakonda-photo-slot img {
	display: block;
}

.home-more a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.75;
	text-decoration: none;
}

.home-more a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* -------------------------------------------------------------------------
 * Our Happy Place.
 *
 * The collage architecture both this and Our History share: flexible side
 * rails flank a fixed centre column, prints anchor absolutely to the
 * rails' INNER edges (the content column's edges, maintained by flex for
 * free) so the composition hugs the content at every width, and translate
 * is the nudge/overlap knob. Section padding is the poke budget for how
 * far prints overhang. Below the breakpoint each section restates itself
 * as a declared grid — rows owned outright, prints sized in vw.
 * ---------------------------------------------------------------------- */

.home-intro {
	display: flex;
	align-items: stretch;

	/*
	 * The poke budget. Photos overhang the section by (their extent minus
	 * this padding): top stays 0 so the upper photo rides into the band
	 * above; grow the bottom value to pull the lower photo's overhang in.
	 */
	padding-block: 0 8rem;
}

.home-intro__photo-wrapper {
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
}

/*
 * Both photos anchor from the TOP in fixed rems, so longer copy grows the
 * section downward without dragging either photo with it. Individual
 * translate/rotate properties rather than the transform shorthand: they
 * apply in spec order (translate first), so the nudge off the text column
 * is purely horizontal and the order can never be written wrong.
 */
.home-intro__photo-wrapper--left .home-photo {
	width: 22rem;
	aspect-ratio: 11 / 14;
	position: absolute;
	right: 0;
	top: -6rem;
	translate: -15% 0;
	rotate: -8deg;
}

.home-intro__photo-wrapper--right .home-photo {
	width: 24rem;
	aspect-ratio: 4 / 5;
	position: absolute;
	left: 0;
	top: 10rem;
	translate: 15% 0;
	rotate: 8deg;
}

.home-intro__text {
	max-width: 380px;
	padding-inline: var(--wakonda-gutter);
	text-align: center;
}

/*
 * Small screens — meat over bread: the copy takes the whole first row
 * (order pulls it ahead of its DOM slot) and both photos share the second,
 * side by side IN FLOW. Row siblings cannot overlap by construction, so
 * the scrapbook spacing is just the column gap plus rotation headroom. The
 * left print hangs off the viewport edge (the negative margin), the right
 * one drops a beat lower (a real margin, so the section height stays
 * honest) and may crop at the far edge on the narrowest screens — which is
 * the point.
 *
 * The switch sits at 64rem, not the theme's usual 48: the desktop rails
 * need ~64rem before they can show most of each print, and in between the
 * composition reads as clipped accidents. The prints scale up through the
 * widened range (clamps below) so the pair never looks lost at tablet
 * sizes.
 */
@media (max-width: 64rem) {
	/*
	 * Grid, not flex-wrap: a wrapping flex container breaks lines on each
	 * item's CLAMPED size, so the text's max-width let a print hop up
	 * beside it at semi-wide widths — full-basis or not. Grid rows are
	 * declared, not derived: the copy owns row one outright (max-width
	 * then only shrinks it within the row), the prints own row two.
	 * justify-content centres the whole grid box, and since the copy's
	 * spanned row sits over the centred pair, centring within it lands on
	 * the section's centre too — no stretcher column needed.
	 */
	.home-intro {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: start;
		gap: 2.5rem 1.5rem;
		padding-block: 0 3rem;
	}

	.home-intro__text {
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: center;
	}

	.home-intro__photo-wrapper--left {
		grid-row: 2;
		grid-column: 1;
	}

	/* The stagger. */
	.home-intro__photo-wrapper--right {
		grid-row: 2;
		grid-column: 2;
		margin-block-start: 2.5rem;
	}
	.home-intro__photo-wrapper--left .home-photo {
		position: static;
		translate: -10% 10%;
	}
	.home-intro__photo-wrapper--right .home-photo {
		position: static;
		translate: 20% -5%;
	}

	/*
	 * Pure vw: the pair is always the same fraction of the screen. Widths
	 * plus the gap total ~86vw, so the centred pair fits with air at every
	 * size in this range — no cropping. Heights come from each print's
	 * aspect-ratio in the base rules; width is the only size knob.
	 */
	.home-intro__photo-wrapper--left .home-photo {
		width: 44vw;
		rotate: -5deg;
	}

	.home-intro__photo-wrapper--right .home-photo {
		width: 40vw;
		rotate: 5deg;
	}
}


/* Figures carry UA margins; the collage slots must not. */
.home-intro .home-photo,
.home-history .home-photo {
	margin: 0;
}

/* Experience Camp Life: intro copy, then three labelled cards. */
/* The copy sits at column 2 of the design's 12-column grid: inset by one
 * column of the section's width, deeper than the card row's gutter. */
.home-experience__intro {
	max-width: 34rem;
	padding-inline: var(--wakonda-gutter);
	margin-inline-start: calc(100% / 12);
}

.home-experience__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.25rem;
	margin-block-start: 2.5rem;

	/* The row never touches the viewport: same inset as the copy above it,
	 * so the first card's label left-aligns with the heading. */
	padding-inline: var(--wakonda-gutter);
}

.home-card__label {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.home-card__label a {
	text-decoration: none;
}

.home-card__label a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.home-experience__cards .home-photo {
	margin: 0;
}

/* !important: a stored editor resize also writes an inline aspect-ratio. */
.home-experience__cards .home-photo img {
	width: 100%;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover;
	box-shadow: none;
}

/*
 * Our History — same architecture as Our Happy Place: two flexible rails
 * flank the fixed panel, prints anchor absolutely to the rails' INNER
 * edges (which are the panel's edges, maintained by flex for free), and
 * translate is the overlap knob — how far each print rides onto the
 * panel. Rails carry z-index so prints lie over the panel even from the
 * left rail, which precedes it in the DOM.
 */
.home-history {
	display: flex;
	align-items: stretch;

	/*
	 * The poke budget: the panel band sits inside this padding, and the
	 * prints climb into the top space / hang into the bottom space. The
	 * bottom is deep because the bungalows print lives there.
	 */
	padding-block: 7.5rem 14rem;
}

.home-history__rail {
	position: relative;
	flex: 1 1 0;
	z-index: 1;
}

.home-history__panel {
	/* border-box so the width is the width the prints measure against. */
	box-sizing: border-box;
	width: 39rem;
	max-width: 100%;
	padding: 16rem 4.5rem;
	background: var(--wakonda-surface);
	border-radius: 2rem;
	text-align: center;
}

.home-history__panel p:not(.home-more) {
	max-width: 24rem;
	margin-inline: auto;
}

.home-history .home-photo {
	position: absolute;
	margin: 0;
}

/* Tent — big landscape over the panel's top-right corner, riding to the
 * section's top edge. translate pulls it 7rem onto the panel. */
.home-history__rail--right .home-photo:nth-of-type(1) {
	left: 0;
	top: -7.5rem;
	width: 34rem;
	aspect-ratio: 10 / 7;
	translate: -7rem 0;
}

/* Field — portrait on the right edge, lower. */
.home-history__rail--right .home-photo:nth-of-type(2) {
	left: 0;
	top: 22rem;
	width: 20rem;
	aspect-ratio: 4 / 5;
	translate: -3rem 0;
}

/* Dock — portrait on the left edge, upper. */
.home-history__rail--left .home-photo:nth-of-type(1) {
	right: 0;
	top: 3rem;
	width: 21rem;
	aspect-ratio: 6 / 7;
	translate: 5.5rem 0;
}

/* Bungalows — big landscape hanging below the panel, bleeding off the
 * viewport's left edge on all but the widest screens. */
.home-history__rail--left .home-photo:nth-of-type(2) {
	right: 0;
	bottom: -14rem;
	width: 36rem;
	aspect-ratio: 9 / 7;
	translate: 9rem 0;
}

/*
 * Small screens — the panel between the prints, with the prints STRADDLING
 * its edges like desktop: dock and tent ride its top edge, bungalows and
 * field its bottom. The rails dissolve (display: contents) so figures
 * place directly in this grid; slots keep their meaning.
 *
 * The no-overlap guarantee is the inner-edge pin: justify-self end/start
 * anchors each print's inner edge at the centre gap, so the pair can never
 * touch. Everything else moves prints OUTWARD, where the viewport crops
 * them. Per-print knobs:
 *   margin-inline (outward)  — the push toward/past the screen edge
 *   margin-block  (negative) — how deep it rides onto the panel
 *   width: max(vw, rem)      — the floor where shrinking stops and
 *                              cropping starts
 * Ratios match the desktop prints; heights derive.
 */
@media (max-width: 64rem) {
	.home-history {
		display: grid;
		/*
		 * minmax(0, …): without it a print wider than its track inflates
		 * the track, the section, and eventually the page's scroll width.
		 * With it the tracks hold their ground and oversized prints
		 * overflow visually, where the viewport crops them — the intended
		 * behaviour.
		 */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 1.5rem;
		padding-block: 0 3rem;
	}

	.home-history__rail {
		display: contents;
	}

	.home-history .home-photo {
		position: static;
		translate: 0 0;

		/* Prints lie ON the panel where they straddle it. */
		z-index: 1;
	}

	/* Above the panel: dock left, tent right riding deeper. */
	.home-history__rail--left .home-photo:nth-of-type(1) {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
		align-self: end;
		width: max(40vw, 16rem);
		margin-inline-end: 8vw;
		margin-block-end: -3rem;
		translate: -25% 5rem;
	}

	.home-history__rail--right .home-photo:nth-of-type(1) {
		grid-row: 1;
		grid-column: 2;
		justify-self: start;
		align-self: end;
		width: max(44vw, 18rem);
		margin-inline-start: 8vw;
		translate: 0 0;
		margin-block-end: -2.5rem;
	}

	.home-history__panel {
		grid-row: 2;
		grid-column: 1 / -1;
		justify-self: center;
		width: min(39rem, 100%);
		padding: 6.5rem 1.5rem;
	}

	/* Below it, mirroring the top pair's recipe: outer-edge pin, translate
	 * does the off-screen crop and the ride — y negated, their panel is
	 * ABOVE them. */
	.home-history__rail--left .home-photo:nth-of-type(2) {
		grid-row: 3;
		grid-column: 1;
		justify-self: start;
		align-self: start;
		width: max(44vw, 18rem);
		margin-inline-end: 6vw;
		margin-block-start: -3rem;
		translate: -25% -5rem;
	}

	.home-history__rail--right .home-photo:nth-of-type(2) {
		grid-row: 3;
		grid-column: 2;
		justify-self: end;
		align-self: start;
		width: max(44vw, 15rem);
		margin-inline-start: 10vw;
		margin-block-start: -3rem;
		margin-right: 5vw;
		translate: 0 0;
	}
}

/*
 * True phones: the panel goes FULL BLEED — an edge-to-edge band, no
 * radius, gutter-padded copy — and the straddle flattens to gentler
 * numbers: pure vw widths (the rem floors were most of the screen), a
 * 4rem total ride against 5rem of panel padding, modest crops. Same
 * knobs as the tier above; this block just re-tunes them, so it must
 * stay AFTER it in the file. Cut at 40rem: below that, the middle tier's
 * rem floors are most of the screen and its dance has no room to dance.
 */
@media (max-width: 40rem) {
	.home-history__panel {
		justify-self: stretch;
		width: 100%;
		border-radius: 0;
		padding: 5rem var(--wakonda-gutter);
	}

	.home-history__rail--left .home-photo:nth-of-type(1) {
		width: 42vw;
		margin-block-end: -2rem;
		translate: -15% 2rem;
	}

	.home-history__rail--right .home-photo:nth-of-type(1) {
		width: 50vw;
		margin-block-end: -2rem;
		translate: -10% 0;
	}

	.home-history__rail--left .home-photo:nth-of-type(2) {
		width: 65vw;
		margin-block-start: -2rem;
		translate: -15% -2rem;
	}

	.home-history__rail--right .home-photo:nth-of-type(2) {
		width: 40vw;
		margin-block-start: 1rem;
		translate: 10vw 0;
	}
}

/* Join our Cooperative: photo beside the pitch. */
.home-join {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.home-join .home-photo {
	margin: 0;
}

.home-join .home-photo img {
	width: 100%;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
}

@media (max-width: 48rem) {
	/* One phantom column of indent reads as a mistake at phone width. */
	.home-experience__intro {
		margin-inline-start: 0;
	}

	.home-experience__cards {
		grid-template-columns: 1fr;
	}

	.home-join {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* -------------------------------------------------------------------------
 * Footer.
 *
 * The one dark band: Wakonda Green ground, Tan type. Three zones —
 * identity + mirrored contact stack, the mirrored hours table, then the
 * Log In / colophon column. The facts come from the Camp info page (see
 * footer.php); this block only draws them.
 * ---------------------------------------------------------------------- */

.site-footer {
	background: var(--wakonda-accent-deep);
	color: var(--wakonda-on-dark);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
	column-gap: 5rem;
	align-items: start;
	max-width: var(--wp--style--global--wide-size, 68rem);
	margin-inline: auto;
	padding: 3.5rem var(--wakonda-gutter) 3rem;
}

/* The same lockup as the header, inverted for the dark ground. */
.site-footer__logo {
	display: block;
	margin-block-end: 2rem;
}

.site-footer__logo img {
	display: block;
	height: 3.25rem;
	width: auto;
	filter: brightness(0) invert(1);
}

.site-footer__identity p {
	margin: 0;
	max-width: 24rem;
}

.site-footer__identity p + p {
	margin-block-start: 1rem;
}

.site-footer__address {
	line-height: 1.4;
}

.site-footer__address a {
	text-decoration: none;
}

.site-footer__address a:hover {
	text-decoration: underline;
}

.site-footer__external-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* The hours ledger, built row-per-day from Camp Settings. */
.site-footer__hours table {
	border-collapse: collapse;
}

.site-footer__hours td {
	padding: 0.1rem 0;
	border: 0;
	line-height: 1.4;
}

.site-footer__hours td:first-child {
	padding-inline-end: 2.5rem;
}

.site-footer__hours-note {
	max-width: 28ch;
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Today's row — wakonda-elements.js sets the class on the client, so a
 * cached page can never freeze "today". */
.site-footer__hours .is-today {
	font-weight: 700;
	color: var(--wakonda-paper);
}

.site-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
	align-self: stretch;
	text-align: end;
}

.site-footer__login {
	display: inline-block;
	padding: 0.65rem 2.4rem;
	background: var(--wakonda-paper);
	border: 1px solid var(--wakonda-paper);
	color: var(--wakonda-ink);
	font-weight: 500;
	text-decoration: none;
}

.site-footer__login:hover {
	background: var(--wakonda-on-dark);
}

.site-footer__colophon {
	margin: 0;
	font-size: var(--wp--preset--font-size--small); /* Body Small */
	line-height: 1.57;
	color: var(--wakonda-on-dark-soft);
}

@media (max-width: 48rem) {
	.site-footer__inner {
		display: block;
	}

	.site-footer__hours {
		margin-block: 2.5rem;
	}

	.site-footer__meta {
		align-items: flex-start;
		text-align: start;
	}
}

/* -------------------------------------------------------------------------
 * Scroll-driven entry — the prints' opacity and lift are a pure function
 * of scroll position, scrubbed across each print's entry through the
 * viewport's bottom edge and reversible in both directions.
 *
 * No JavaScript: animation-timeline: view() drives it. The hidden state
 * lives only inside the keyframes, so browsers without support (Safari
 * pre-26, older Firefox) never hide anything — they simply get static
 * prints. Scoped to .has-front-hero, the front page's body class, which
 * the editor canvas never carries. The motion rides `transform`, which
 * composes on top of the collage's individual translate/rotate, so entry
 * movement and layout position never fight. Neighbouring prints stagger
 * naturally: their positions differ, so their timelines do.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.has-front-hero .home-intro .home-photo,
		.has-front-hero .home-experience .home-photo,
		.has-front-hero .home-history .home-photo,
		.has-front-hero .home-join .home-photo {
			animation: wakonda-print-enter linear both;
			animation-timeline: view();

			/* Scrub from first pixel in to fully entered; tune the second
			 * value earlier (e.g. entry 75%) to finish the effect sooner. */
			animation-range: entry 0% contain 65%;

			/*
			 * Transform ONLY — no opacity. Blending big semi-transparent
			 * photo textures against the backdrop every scroll tick is the
			 * jank; sliding opaque layers is nearly free. will-change
			 * promotes the layers up front so creation never happens
			 * mid-scroll.
			 */
			will-change: transform;
		}

		/*
		 * The collage sections travel up AND inward: each side's prints
		 * start displaced toward their own edge and converge on the seat.
		 * Only the name changes — timeline, range and layer hints carry
		 * over from the shared rule above. Experience and join keep the
		 * pure rise.
		 */
		.has-front-hero .home-intro__photo-wrapper--left .home-photo,
		.has-front-hero .home-history__rail--left .home-photo {
			animation-name: wakonda-print-enter-left;
		}

		.has-front-hero .home-intro__photo-wrapper--right .home-photo,
		.has-front-hero .home-history__rail--right .home-photo {
			animation-name: wakonda-print-enter-right;
		}
	}
}

@keyframes wakonda-print-enter {
	from {
		transform: translateY(2rem);
	}
}

@keyframes wakonda-print-enter-left {
	from {
		transform: translate(-1.5rem, 2rem);
	}
}

@keyframes wakonda-print-enter-right {
	from {
		transform: translate(1.5rem, 2rem);
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* Slideshow: a single contained photo, progressively enhanced with a crossfade. */
.wp-block-gallery.is-style-slideshow.has-wakonda-carousel > .wakonda-carousel__track {
	width: 100%;
	margin: 0;
	padding: 0;
	scroll-padding: 0;
}
.is-slideshow-ready .is-style-slideshow > .wakonda-carousel__track {
	display: grid;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wakonda-surface);
}
.is-slideshow-ready .is-style-slideshow .wakonda-carousel__track > figure.wp-block-image {
	grid-area: 1 / 1;
	width: 100% !important;
	height: 100%;
	min-height: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 350ms ease;
	align-items: center;
}
.is-slideshow-ready .is-style-slideshow .wakonda-carousel__track > figure.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.is-slideshow-ready .is-style-slideshow .wakonda-carousel__track img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.is-slideshow-ready .is-style-slideshow .wakonda-carousel__track > figure > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	max-height: 100%;
}
.is-style-slideshow .wakonda-carousel__controls {
	grid-column: 1 / -1;
	justify-content: flex-end;
}
.is-style-slideshow > .blocks-gallery-caption { grid-row: 3; }
.is-style-slideshow .wakonda-carousel__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.wakonda-slideshow__dots { display: flex; flex-wrap: wrap; justify-content: center; margin-inline: auto; }
.wakonda-slideshow__dot { border: 0; background: none; padding: 0; width: 28px; height: 36px; cursor: pointer; }
.wakonda-slideshow__dot::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--wakonda-line-strong); margin: auto; }
.wakonda-slideshow__dot[aria-current="true"]::after { background: var(--wakonda-accent); }
@media (prefers-reduced-motion: reduce) {
	.is-slideshow-ready .is-style-slideshow .wakonda-carousel__track > figure.wp-block-image { transition: none; }
}

/* Archive navigation shares the agenda boundary and active category. */
.event-history-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-block-end: 1.5rem; }
.event-history-heading h2 { margin: 0; }
.event-history-heading a, .event-history-link a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.25em; }
.event-history-link { margin-block-start: 2rem; }
.events-page[data-period="previous"] .event-view-toggle { display: none; }
@media (min-width: 48.001rem) {
 .events-page[data-view="calendar"] .event-agenda-content,
 .events-page[data-view="calendar"] .event-history-link { display: none; }
}