/*
Theme Name: Rotary Eastern Australia Online
Theme URI: https://rotary9660online.au
Author: Keiran Rodgers
Description: Block theme for Rotary Eastern Australia Online. Projects-and-impact led, built on the Rotary International brand palette and Open Sans. Replaces Astra + Spectra.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eclub
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/*
   theme.json carries the design tokens (palette, type scale, spacing) and generates the
   --wp--preset--* custom properties. This file holds only what theme.json cannot express:
   the dateline device, the project register, the toast board, and the responsive behaviour
   of the header.

   The local aliases below exist so this stylesheet can also be loaded directly by the
   static mockups in ../../mockups/, which have no WordPress to generate presets. Each
   falls back to a literal when the preset is absent.
*/

:root {
	--royal: var(--wp--preset--color--royal, #17458f);
	--azure: var(--wp--preset--color--azure, #0067c8);
	--sky: var(--wp--preset--color--sky, #00a2e0);
	--gold: var(--wp--preset--color--gold, #f7a81b);
	--slate: var(--wp--preset--color--slate, #143a75);
	--paper: var(--wp--preset--color--paper, #fbfaf8);
	--white: var(--wp--preset--color--white, #ffffff);

	/* Never name these two `border` or `line` collides with core's marker classes.
	   See knowledge/wordpress.md: a palette slug of `border` generates
	   .has-border-color and silently repaints every bordered card's headings. */
	--line: var(--wp--preset--color--line, #dde3ec);
	--line-strong: var(--wp--preset--color--line-strong, #b9c4d4);

	--muted: #4a5b73;

	--wrap: 1180px;
	--measure: 68ch;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* Was 6rem, which stacked with each block's own margins into ~450px gaps.
	   Measured with audit_spacing.mjs, not guessed. */
	--step: clamp(2.25rem, 4vw, 3.5rem);
	--radius: 3px;                     /* near-square: this is a register, not an app */

	--font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--royal);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	color: var(--royal);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 6vw, 4.4rem);
}

h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.65rem);
	letter-spacing: -0.025em;
}

h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	letter-spacing: -0.015em;
}

h4 {
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1.1em;
	max-width: var(--measure);
}

a {
	color: var(--azure);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--royal);
}

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

/* The quality floor, stated once and not announced again. */
:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 2px;
	border-radius: 2px;
}

.eclub-skip {
	position: absolute;
	left: -9999px;
}

.eclub-skip:focus {
	left: var(--gutter);
	top: 0.5rem;
	z-index: 100;
	background: var(--royal);
	color: var(--white);
	padding: 0.6rem 1rem;
	border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- layout */

.eclub-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

/* Adjacent sections on the same background would otherwise stack two full steps of
   padding and open a gap that reads as a missing section.

   Coloured bands are excluded: they paint their own background, so collapsing the top
   padding pushes their content flush against the top edge of the colour. That is what
   happened when --deep was renamed to --brand and this guard stopped matching it. */
.eclub-section + .eclub-section:not(.eclub-section--brand):not(.eclub-section--deep) {
	padding-top: 0;
}

/* Deep sections invert the ink. Kept as its own class so specificity stays flat
   and section padding is never fought over by a competing selector. */
.eclub-section--deep {
	background: var(--slate);
	color: #d7e0ee;
}

.eclub-section--deep h1,
.eclub-section--deep h2,
.eclub-section--deep h3,
.eclub-section--deep h4 {
	color: var(--white);
}

.eclub-section--deep a {
	color: var(--sky);
}

/* ---------------------------------------------------------------- dateline

   The structural device of the whole site. It encodes real information: where the
   work happens, what it is registered as, and since when. It replaces the
   decorative 01/02/03 numbering that would imply a sequence the projects do not have. */

.eclub-dateline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.85rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure);
}

.eclub-dateline > li + li::before {
	content: "·";
	margin-right: 0.85rem;
	color: var(--line-strong);
}

/* Status is a different kind of fact from place and registration, so it takes its own
   line instead of wrapping mid-run and leaving a separator stranded at the line start. */
.eclub-dateline > .eclub-status {
	flex-basis: 100%;
}

.eclub-dateline > .eclub-status::before {
	content: none;
}

.eclub-section--deep .eclub-dateline {
	color: var(--sky);
}

/* Status is the honest half of the dateline: a project that has not raised money yet
   says so here, rather than being dressed up or left out. */
.eclub-status {
	color: var(--muted);
}

.eclub-section--deep .eclub-status {
	color: #9fb1c9;
}

/* The gold hairline is the only place gold touches the page at small sizes.
   #F7A81B fails contrast as text, so it is never used as text anywhere. */
.eclub-rule {
	border: 0;
	border-top: 2px solid var(--gold);
	width: 3.5rem;
	margin: 0 0 1.4rem;
}

/* ---------------------------------------------------------------- eyebrow + lede */

.eclub-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure);
	margin: 0 0 0.75rem;
}

.eclub-lede {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 60ch;
}

.eclub-section--deep .eclub-lede {
	color: #b9c8dc;
}

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

.eclub-header {
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: 20;
}

.eclub-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	justify-content: space-between;
	min-height: 78px;
}

.eclub-header__logo img {
	height: 46px;
	width: auto;
}

.eclub-nav {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.eclub-nav a {
	color: var(--royal);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.eclub-nav a:hover,
.eclub-nav a[aria-current="page"] {
	border-bottom-color: var(--gold);
}

@media (max-width: 900px) {
	.eclub-nav {
		display: none;
	}
}

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

.eclub-btn {
	display: inline-block;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius);
	text-decoration: none;
	border: 2px solid var(--royal);
	background: var(--royal);
	color: var(--white);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.eclub-btn:hover {
	background: var(--azure);
	border-color: var(--azure);
	color: var(--white);
}

.eclub-btn--ghost {
	background: transparent;
	color: var(--royal);
}

.eclub-btn--ghost:hover {
	background: var(--royal);
	color: var(--white);
	border-color: var(--royal);
}

.eclub-section--deep .eclub-btn--ghost {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.55);
}

.eclub-section--deep .eclub-btn--ghost:hover {
	background: var(--white);
	color: var(--slate);
	border-color: var(--white);
}

.eclub-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.8rem;
}

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

   No photograph, deliberately. The thesis of this club is that it has no address,
   so the hero is an address block listing the places its work reaches instead. */

.eclub-hero {
	padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--step);
	border-bottom: 1px solid var(--line);
}

.eclub-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (max-width: 860px) {
	.eclub-hero__grid {
		grid-template-columns: 1fr;
	}
}

.eclub-hero h1 {
	margin-bottom: 1rem;
}

/* The address block. Left rule in gold, place names in the display weight,
   each line a real location the club's work reaches. */
.eclub-places {
	margin: 0;
	padding: 0 0 0 1.35rem;
	border-left: 2px solid var(--gold);
	list-style: none;
}

/* The label sits outside the list, so the list contains only place entries and the
   gold rule aligns to the places rather than to a heading. */
.eclub-places__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure);
	margin: 2.5rem 0 0.9rem;
}

.eclub-places li {
	padding-block: 0.55rem;
	border-bottom: 1px solid var(--line);
}

.eclub-places li:last-child {
	border-bottom: 0;
}

.eclub-places b {
	display: block;
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
	color: var(--royal);
}

.eclub-places span {
	display: block;
	font-size: 0.83rem;
	color: var(--muted);
}

/* The dispatch grid: four real photographs, each captioned with the place its work
   actually happens. This is the hero's picture and its argument at the same time.
   A single stock hero photo would say nothing; four datelined frames say where the
   club is working right now. */

.eclub-dispatch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line-strong);
	border: 1px solid var(--line-strong);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclub-dispatch > li {
	background: var(--paper);
	margin: 0;
}

.eclub-dispatch figure {
	margin: 0;
}

.eclub-dispatch img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 30%;
}

.eclub-dispatch figcaption {
	padding: 0.7rem 0.85rem 0.85rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azure);
	line-height: 1.45;
}

.eclub-dispatch figcaption span {
	display: block;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-top: 0.2rem;
}

/* ---------------------------------------------------------------- impact figures

   Only verifiable numbers appear here. No invented volunteer-hour totals.
   tabular-nums so the figures align as a column, which is the point of a ledger. */

.eclub-figures {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-top: var(--step);
}

.eclub-figures > div {
	background: var(--paper);
	padding: 1.5rem 1.35rem;
}

.eclub-figures dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.5rem;
}

.eclub-figures dd {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--royal);
	font-variant-numeric: tabular-nums;
}

.eclub-figures small {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--muted);
}

/* ---------------------------------------------------------------- project register

   Full-width horizontal records rather than a three-up card grid. The club's projects
   have genuinely uneven depth; a register absorbs that, a grid would expose it as
   three cards of visibly different weight. */

.eclub-register {
	margin-top: 3rem;
	border-top: 1px solid var(--line-strong);
}

.eclub-record {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
}

@media (max-width: 820px) {
	.eclub-record {
		grid-template-columns: 1fr;
	}
}

.eclub-record__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Documents, not photographs: a student newspaper or a printed page is shown whole,
   letterboxed on paper, because the crop would destroy the thing being shown. */
.eclub-record__media--doc img,
.eclub-dispatch li.is-doc img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	object-position: center top;
	background: var(--white);
	border: 1px solid var(--line);
}

/* Placeholder shown where the club has no cleared photograph yet. Honest about the
   gap rather than reaching for stock imagery. */
.eclub-record__media--pending {
	aspect-ratio: 4 / 3;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	padding: 1rem;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.eclub-record__body > p:last-child {
	margin-bottom: 0;
}

.eclub-record__more {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 2px;
}

.eclub-record__more:hover {
	border-bottom-color: var(--azure);
}

/* ---------------------------------------------------------------- toast board

   The club's own ritual, rendered as a departures board. Static, not animated:
   the information is the point, and an animated marquee would make it unreadable. */

.eclub-toast {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: 2.5rem;
}

.eclub-toast > li {
	list-style: none;
	padding: 1.1rem 1.2rem 1.1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: 0.75rem;
	align-items: baseline;
}

.eclub-toast__mark {
	color: var(--gold);
	font-weight: 800;
	font-size: 0.85rem;
	line-height: 1.4;
}

.eclub-toast b {
	display: block;
	color: var(--white);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
}

.eclub-toast span {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9fb1c9;
	margin-top: 0.15rem;
}

/* ---------------------------------------------------------------- meeting bar */

.eclub-meeting {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.eclub-meeting > div {
	background: var(--white);
	padding: 1.4rem 1.35rem;
}

.eclub-meeting dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure);
	margin-bottom: 0.4rem;
}

.eclub-meeting dd {
	margin: 0;
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}

.eclub-meeting dd small {
	display: block;
	font-weight: 400;
	font-size: 0.83rem;
	color: var(--muted);
	letter-spacing: 0;
	margin-top: 0.2rem;
}

/* ---------------------------------------------------------------- prose pages */

.eclub-prose h2 {
	margin-top: 2.4rem;
}

.eclub-prose h3 {
	margin-top: 1.8rem;
}

.eclub-prose ul,
.eclub-prose ol {
	max-width: var(--measure);
	padding-left: 1.15rem;
}

.eclub-prose li {
	margin-bottom: 0.45rem;
}

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

/* The closing CTA band and the footer are both blue, so without a divider they read as
   one very tall slab. A gold rule separates them and echoes the countdown band above. */
.eclub-footer {
	background: var(--slate);
	border-top: 4px solid var(--gold);
	color: #b9c8dc;
	padding-block: var(--step) 2rem;
	font-size: 0.92rem;
}

.eclub-footer a {
	color: #d7e0ee;
	text-decoration: none;
}

.eclub-footer a:hover {
	color: var(--white);
	text-decoration: underline;
}

.eclub-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2.5rem;
}

.eclub-footer h2,
.eclub-footer h3,
.eclub-footer h4 {
	color: var(--white);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.eclub-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eclub-footer li {
	margin-bottom: 0.5rem;
}

/* The legal identity line. The club trades as Rotary Eastern Australia Online but is
   registered as Rotary E-Club of District 9650 Inc, and the fundraising authority
   number is a statutory disclosure, not decoration. */
.eclub-colophon {
	margin-top: var(--step);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.8rem;
	line-height: 1.6;
	color: #8fa3bd;
}

.eclub-colophon p {
	max-width: 78ch;
}

/* Accessible section label with no visual weight. Used where a section needs an
   aria-labelledby target but a printed heading would be noise. */
.eclub-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================ site chrome

   Structure adopted from the Morisset Rotary club site, which is a more complete club
   site than ours: a persistent utility bar, standing Donate and Get Involved actions,
   and a full-width primary nav. Their build (Elementor Pro + Modern Events Calendar) is
   deliberately not adopted; those sections fail to render without JavaScript, which is
   the page-builder problem this theme exists to leave behind. Everything below is plain
   CSS over semantic markup and renders with scripting disabled. */

/* ---- utility bar: news ticker + social ---- */

.eclub-utility {
	background: var(--slate);
	color: #b9c8dc;
	font-size: 0.8rem;
}

.eclub-utility__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 38px;
}

.eclub-utility__tag {
	flex: none;
	background: var(--azure);
	color: var(--white);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.35rem 0.8rem;
}

/* The ticker is a plain overflow-scrolling list, not a marquee: readable,
   keyboard-scrollable, and fully present for a crawler. */
.eclub-utility__news {
	flex: 1 1 auto;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.eclub-utility__news::-webkit-scrollbar {
	display: none;
}

.eclub-utility__news a {
	color: #d7e0ee;
	text-decoration: none;
}

.eclub-utility__news a:hover {
	color: var(--white);
	text-decoration: underline;
}

.eclub-utility__social {
	flex: none;
	display: flex;
	gap: 0.9rem;
}

.eclub-utility__social a {
	color: #b9c8dc;
	text-decoration: none;
	font-weight: 600;
}

.eclub-utility__social a:hover {
	color: var(--white);
}

/* ---- masthead: logo, contact, standing actions ---- */

.eclub-masthead {
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.eclub-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-block: 1rem;
}

.eclub-masthead__logo img {
	height: 58px;
	width: auto;
}

.eclub-masthead__right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.eclub-masthead__contact {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
}

.eclub-masthead__contact dt {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.eclub-masthead__contact dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

/* Gold works as a button fill because the label sits on it at 700 weight in near-black.
   It is still never used as gold text on a light background. */
.eclub-btn--gold {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--slate);
}

.eclub-btn--gold:hover {
	background: #e0940c;
	border-color: #e0940c;
	color: var(--slate);
}

/* ---- primary navigation ---- */

.eclub-primary {
	background: var(--royal);
}

.eclub-primary__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	font-weight: 600;
}

.eclub-primary__list > li {
	position: relative;
}

.eclub-primary__list a {
	display: block;
	color: var(--white);
	text-decoration: none;
	padding: 0.95rem 1.05rem;
	letter-spacing: 0.01em;
}

.eclub-primary__list a:hover,
.eclub-primary__list a:focus-visible,
.eclub-primary__list [aria-current="page"] {
	background: var(--azure);
	color: var(--white);
}

.eclub-primary__list .is-accent > a {
	color: var(--gold);
}

/* Submenus open on hover and on focus-within, so they are reachable by keyboard with
   no JavaScript at all. */
.eclub-primary__sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 235px;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	box-shadow: 0 12px 28px rgba(14, 29, 51, 0.14);
	opacity: 0;
	visibility: hidden;
	z-index: 30;
}

.eclub-primary__list > li:hover > .eclub-primary__sub,
.eclub-primary__list > li:focus-within > .eclub-primary__sub {
	opacity: 1;
	visibility: visible;
}

.eclub-primary__sub a {
	color: var(--royal);
	font-weight: 400;
	padding: 0.55rem 1rem;
	font-size: 0.85rem;
}

.eclub-primary__sub a:hover,
.eclub-primary__sub a:focus-visible {
	background: var(--paper);
	color: var(--azure);
}

@media (max-width: 900px) {
	.eclub-primary__list {
		font-size: 0.8rem;
	}

	.eclub-primary__list a {
		padding: 0.7rem;
	}

	.eclub-primary__sub {
		display: none;
	}
}

/* ---- hero with photograph ---- */

.eclub-hero__figure {
	position: relative;
	margin: 0;
}

.eclub-hero__figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 32%;
	border-radius: var(--radius);
}

.eclub-hero__figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azure);
}

/* ---- child safe band ----

   Given real prominence directly under the hero. The club runs Youth Exchange, RYPEN,
   RYLA and RotaKids, so this is a live obligation rather than boilerplate. */

.eclub-safeguard {
	background: #eef2f8;
	border-bottom: 1px solid var(--line);
	padding-block: 2rem;
}

.eclub-safeguard__inner {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 1.35rem;
	align-items: start;
}

.eclub-safeguard__mark {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--royal);
	display: grid;
	place-items: center;
}

.eclub-safeguard__mark svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: none;
	stroke: var(--white);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.eclub-safeguard h2 {
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.4rem;
}

.eclub-safeguard p {
	font-size: 0.9rem;
	color: var(--muted);
	max-width: 92ch;
	margin-bottom: 0.5rem;
}

/* ---- events ----

   A semantic ordered list of real dates rather than a calendar widget, so it renders
   with JavaScript disabled. The reference site's calendar does not. */

.eclub-events {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.eclub-events > li {
	display: grid;
	grid-template-columns: 4.75rem 1fr auto;
	gap: 1.25rem;
	align-items: center;
	padding-block: 1rem;
	border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
	.eclub-events > li {
		grid-template-columns: 4.25rem 1fr;
	}
}

.eclub-events time {
	text-align: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 0.45rem 0.25rem;
	font-variant-numeric: tabular-nums;
}

.eclub-events time b {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.eclub-events time span {
	display: block;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 0.2rem;
}

.eclub-events h3 {
	font-size: 1rem;
	margin: 0 0 0.15rem;
}

.eclub-events p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--muted);
	max-width: none;
}

.eclub-events__where {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azure);
}

/* ---- news cards ---- */

.eclub-news {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-news > li {
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	background: var(--white);
	padding: 1.5rem 1.4rem;
	display: flex;
	flex-direction: column;
}

.eclub-news h3 {
	font-size: 1.08rem;
	margin-bottom: 0.6rem;
}

.eclub-news p {
	font-size: 0.9rem;
	color: var(--muted);
	flex: 1 1 auto;
	max-width: none;
}

/* ---- get involved / contact ---- */

.eclub-involve {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 820px) {
	.eclub-involve {
		grid-template-columns: 1fr;
	}
}

.eclub-form {
	display: grid;
	gap: 1rem;
}

.eclub-form label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 0.4rem;
}

.eclub-form input,
.eclub-form textarea,
.eclub-form select {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.eclub-form input::placeholder,
.eclub-form textarea::placeholder {
	color: #8fa3bd;
}

.eclub-form input:focus,
.eclub-form textarea:focus,
.eclub-form select:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--sky);
	outline: none;
}

.eclub-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 520px) {
	.eclub-form__row {
		grid-template-columns: 1fr;
	}
}

.eclub-form button {
	justify-self: start;
	font-family: inherit;
	cursor: pointer;
}

/* ================================================================ secondary palette

   The current site leans on Rotary's secondary colours, and that vividness is worth
   keeping: amber for the leadership band, cranberry and blue for the service blocks.
   Values are taken from the live site so the rebuild reads as continuous with it
   rather than as a different club.

   These are declared here rather than in :root above only to keep the diff readable;
   they move into theme.json as palette entries when the theme is built. None of them
   may be slugged `border`, `background`, `text` or `link`. */

:root {
	--amber: #fd9800;
	--cranberry: #d41367;
	--turquoise: #00a99d;
}

/* ---- full-bleed hero ----

   A photograph, edge to edge, carrying the club's tagline. The overlay is a gradient
   rather than a flat wash so the image still reads as a photograph, and the text sits
   on the darkest part of it. */

.eclub-banner {
	position: relative;
	isolation: isolate;
	background: var(--slate);
}

.eclub-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 34%;
	z-index: -2;
}

.eclub-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(14, 29, 51, 0.92) 0%,
		rgba(14, 29, 51, 0.78) 42%,
		rgba(14, 29, 51, 0.35) 72%,
		rgba(14, 29, 51, 0.2) 100%
	);
}

.eclub-banner__inner {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	color: #e6edf7;
}

.eclub-banner__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1rem;
}

.eclub-banner h1 {
	color: var(--white);
	font-size: clamp(2.8rem, 7.5vw, 5.4rem);
	letter-spacing: -0.035em;
	line-height: 0.98;
	max-width: 16ch;
	margin-bottom: 1.1rem;
}

.eclub-banner p {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: #cfdcee;
	max-width: 52ch;
}

.eclub-banner .eclub-actions {
	margin-top: 2rem;
}

.eclub-banner .eclub-btn--ghost {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.6);
}

.eclub-banner .eclub-btn--ghost:hover {
	background: var(--white);
	color: var(--slate);
	border-color: var(--white);
}

/* ---- leadership band ----

   Amber, as on the current site. Portraits are small and the names carry the weight;
   the point is that this club's own member is the sitting District Governor. */

.eclub-leaders {
	background: var(--amber);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.eclub-leaders__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	text-align: center;
}

.eclub-leaders figure {
	margin: 0;
}

.eclub-leaders img {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.9rem;
	border: 3px solid rgba(255, 255, 255, 0.85);
}

.eclub-leaders figcaption b {
	display: block;
	color: var(--slate);
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.eclub-leaders figcaption span {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b4300;
}

/* ---- service blocks ----

   Four colour panels, as on the current site. Kept because they work: they are the
   fastest way for a visitor to see the shape of what the club does. Rebuilt as equal
   flex columns with a colour per panel and a rule that picks up the panel colour. */

.eclub-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclub-services > li {
	padding: 2.25rem 1.75rem 2.5rem;
	color: var(--white);
	display: flex;
	flex-direction: column;
}

.eclub-services > li:nth-child(1) { background: var(--cranberry); }
.eclub-services > li:nth-child(2) { background: var(--royal); }
.eclub-services > li:nth-child(3) { background: var(--amber); color: var(--slate); }
.eclub-services > li:nth-child(4) { background: var(--azure); }

.eclub-services h3 {
	color: var(--white);
	font-size: 1.45rem;
	letter-spacing: -0.025em;
	margin-bottom: 1rem;
	max-width: 12ch;
}

.eclub-services > li:nth-child(3) h3 {
	color: var(--slate);
}

.eclub-services p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	max-width: none;
	flex: 1 1 auto;
	margin-bottom: 1.25rem;
}

.eclub-services > li:nth-child(3) p {
	color: rgba(20, 20, 20, 0.82);
}

.eclub-services__rule {
	width: 2.5rem;
	height: 3px;
	background: rgba(255, 255, 255, 0.75);
}

.eclub-services > li:nth-child(3) .eclub-services__rule {
	background: rgba(20, 20, 20, 0.55);
}

/* ---- figures, coloured ----

   Numbers in amber, as on the current site, but rendered as real text in the HTML
   rather than injected by a counter script from a data attribute. Same look, and it
   exists for a crawler that does not run JavaScript. */

.eclub-figures dd {
	color: var(--amber);
}

.eclub-figures small {
	color: var(--muted);
}

/* ---- safeguard band ----

   Amber on the current site. Kept, but with the text at a readable size and dark ink
   on the amber rather than white, which fails contrast. */

.eclub-safeguard {
	background: var(--amber);
	border-bottom: 0;
	padding-block: 2.5rem;
}

.eclub-safeguard__mark {
	background: var(--slate);
}

.eclub-safeguard h2,
.eclub-safeguard p {
	color: var(--slate);
}

.eclub-safeguard p {
	color: #4a3200;
}

.eclub-safeguard a {
	color: var(--slate);
	font-weight: 700;
}

/* ---- accent rules on news cards, cycling through the palette ---- */

.eclub-news > li:nth-child(3n + 1) { border-top-color: var(--cranberry); }
.eclub-news > li:nth-child(3n + 2) { border-top-color: var(--azure); }
.eclub-news > li:nth-child(3n + 3) { border-top-color: var(--amber); }

/* ================================================================ modern surface

   Feedback: the first pass read like a newspaper article. This softens the geometry,
   adds depth, and puts motion on the page. The rule underneath all of it: motion is
   progressive enhancement only. Every number, heading and paragraph is real text in
   the served HTML, so a crawler or a reader with scripting off loses the animation and
   nothing else. That is the opposite of the Spectra counters, whose values exist only
   in a data attribute. */

:root {
	--radius: 5px;
	--radius-sm: 4px;
	/* Restrained. Depth is carried by a crisp hairline, not by a soft halo under
	   every element, which is what made the page read as machine-assembled. */
	--shadow: 0 1px 2px rgba(20, 58, 117, 0.06);
	--shadow-lift: 0 4px 16px rgba(20, 58, 117, 0.14);
	--ease: cubic-bezier(0.22, 0.85, 0.3, 1);
}

/* ---- scroll reveal ----

   Elements start slightly low and transparent, and the observer adds .is-in as they
   enter the viewport. Without JavaScript nothing ever gets .is-in, so the fallback
   below keeps everything fully visible: the reveal only arms itself once the script
   confirms it is running by setting .js on <html>. */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- depth and hover ---- */

.eclub-figures {
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.eclub-figures > div {
	background: var(--white);
}

.eclub-meeting,
.eclub-services {
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}



.eclub-news > li {
	border-radius: 0;
	box-shadow: none;
	border: 0;
	border-top: 4px solid var(--line-strong);
	padding-inline: 0;
	background: transparent;
}

.eclub-events > li {
	border-radius: var(--radius-sm);
	padding-inline: 1rem;
	transition: background 0.3s var(--ease);
}

.eclub-events > li:hover {
	background: var(--white);
}

.eclub-btn {
	border-radius: var(--radius-sm);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* ---- image treatment ----

   Photographs get depth and a slow zoom on hover. The zoom lives on the image inside
   a clipping wrapper, so the corners stay crisp. */

.eclub-record__media,
.eclub-hero__figure,
.eclub-dispatch li,
.eclub-gallery li {
	border-radius: var(--radius);
	overflow: hidden;
}

.eclub-record__media img,
.eclub-hero__figure img {
	border-radius: 0;
	transition: transform 0.8s var(--ease);
}

.eclub-record:hover .eclub-record__media img,
.eclub-hero__figure:hover img {
	transform: scale(1.045);
}

.eclub-dispatch {
	border: 0;
	background: transparent;
	gap: 0.9rem;
}

.eclub-dispatch > li {
	background: var(--white);
	border: 1px solid var(--line);
}

/* ---- register, softened ----

   Kept as a register, because the projects genuinely have uneven depth, but the
   hairline rules go and each record becomes a surface. Less broadsheet, more product. */

.eclub-register {
	border-top: 0;
	display: grid;
	gap: 1.5rem;
}

/* Records sit on the page, separated by a rule and a strong left edge in the brand
   colours, rather than floating as identical cards. */
.eclub-record {
	background: transparent;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
	align-items: start;
}

.eclub-record:last-child {
	border-bottom: 0;
}

/* Alternate the image side so a column of records does not read as a list of rows. */
.eclub-record:nth-child(even) .eclub-record__media {
	order: 2;
}

@media (max-width: 820px) {
	.eclub-record:nth-child(even) .eclub-record__media {
		order: 0;
	}
}

/* ---- dateline as chips ----

   The information stays identical; the presentation stops being a masthead rule and
   becomes a row of tags, which is what modern product pages use for the same job. */

.eclub-dateline {
	gap: 0.45rem;
}

.eclub-dateline > li {
	background: transparent;
	color: var(--azure);
	border-radius: 0;
	padding: 0;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
}

.eclub-dateline > li + li::before {
	content: "·";
	margin-right: 0.65rem;
	color: var(--line-strong);
}

/* Status keeps a marker, because it is the one piece of the line a reader should not
   skim past. */
.eclub-dateline > .eclub-status {
	flex-basis: auto;
	background: var(--gold);
	color: #4a3200;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 2px;
}

.eclub-dateline > .eclub-status::before {
	content: none;
}

.eclub-section--deep .eclub-dateline > li {
	background: rgba(255, 255, 255, 0.1);
	color: #cfe3f8;
}

/* ---- counters ----

   The number is real text in the HTML. The script only animates it, and sets
   aria-hidden on the animating span while announcing the true value to assistive
   tech, so the count-up is never read out as a stream of numbers. */

.eclub-figures dd {
	font-variant-numeric: tabular-nums;
}

/* ---- photo gallery ---- */

.eclub-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.9rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-gallery > li {
	box-shadow: none;
	overflow: hidden;
}

.eclub-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.eclub-gallery > li:hover img {
	transform: scale(1.06);
}

/* The tall first tile breaks the grid's regularity so it reads as a composition
   rather than a contact sheet. */
.eclub-gallery > li:first-child {
	grid-row: span 2;
}

.eclub-gallery > li:first-child img {
	height: 100%;
	aspect-ratio: auto;
}

@media (max-width: 640px) {
	.eclub-gallery > li:first-child {
		grid-row: auto;
	}

	.eclub-gallery > li:first-child img {
		aspect-ratio: 1 / 1;
		height: auto;
	}
}

/* ---- section headings get a little more presence ---- */

.eclub-rule {
	width: 4.5rem;
	border-top-width: 4px;
	border-radius: 2px;
}

.eclub-record__more {
	background: transparent;
	border-radius: 0;
	padding: 0 0 3px;
	border-bottom: 2px solid var(--gold);
}

.eclub-record__more:hover {
	border-bottom-color: var(--azure);
}

/* ================================================================ next meeting

   The meeting is this club's product, so it gets its own band directly under the hero.
   Royal blue rather than the near-black used before: it is a brand colour, so the
   transition reads as part of the identity instead of a mood change.

   The date is real text in the HTML. The clock is computed client-side from the
   club's recurrence rule (second and fourth Thursday, 7:00pm Sydney time), so it stays
   correct forever without anyone updating a page. */

.eclub-next {
	background: var(--royal);
	color: #dbe6f7;
	border-bottom: 5px solid var(--gold);
}

.eclub-next__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (max-width: 860px) {
	.eclub-next__inner {
		grid-template-columns: 1fr;
	}
}

.eclub-next__label {
	margin: 0 0 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.eclub-next__when {
	margin: 0;
	max-width: none;
	color: var(--white);
	font-size: clamp(1.2rem, 2.2vw, 1.65rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.eclub-next__where {
	margin: 0.4rem 0 0;
	max-width: none;
	font-size: 0.9rem;
	color: #b6c9e6;
}

.eclub-next__where a {
	color: var(--white);
	font-weight: 600;
}

/* The clock. Tabular figures so the digits do not jitter as they tick down. */
.eclub-clock {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclub-clock > li {
	min-width: 76px;
	padding: 0.7rem 0.5rem 0.6rem;
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-sm);
}

.eclub-clock b {
	display: block;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.eclub-clock span {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b6c9e6;
}

/* Before the script runs there is nothing to count, so the clock is hidden and the
   written date carries the information on its own. */
.eclub-clock:not(.is-live) {
	display: none;
}

/* When a meeting is in progress the clock is replaced by a single live marker. */
.eclub-next__live {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.1rem;
	background: var(--gold);
	color: #3d2900;
	font-weight: 800;
	font-size: 0.95rem;
	border-radius: var(--radius-sm);
}

@media (max-width: 520px) {
	.eclub-clock > li {
		min-width: 0;
		flex: 1 1 0;
	}
}

/* ---- toast board on paper ----

   Feedback: the near-black bands jarred. The toast board now sits on the page like
   everything else, with the entries carried by a gold rule instead of an inverted
   background. */

.eclub-toast {
	border-top: 2px solid var(--gold);
	margin-top: 2rem;
}

.eclub-toast > li {
	border-bottom: 1px solid var(--line);
	padding-right: 1rem;
}

.eclub-toast b {
	color: var(--royal);
}

.eclub-toast span {
	color: var(--muted);
}

.eclub-toast__mark {
	color: var(--gold);
}

/* ---- the one remaining colour band ----

   Royal blue, not near-black: it belongs to the brand, so it reads as identity rather
   than as a change of mood. */

.eclub-section--brand {
	background: var(--royal);
	color: #dbe6f7;
}

.eclub-section--brand h1,
.eclub-section--brand h2,
.eclub-section--brand h3 {
	color: var(--white);
}

.eclub-section--brand .eclub-eyebrow,
.eclub-section--brand .eclub-lede {
	color: #b6c9e6;
}

.eclub-section--brand .eclub-meeting {
	box-shadow: none;
}

.eclub-section--brand .eclub-btn--ghost {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.6);
}

/* ---- interior page head ----

   Interior pages need a header that establishes the page without a full-bleed banner,
   which would compete with the homepage hero and slow every secondary page down. */

.eclub-pagehead {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.eclub-pagehead h1 {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	margin-bottom: 0.6rem;
}

/* Records on an interior page carry an h2, since the page's h1 is its title. */
.eclub-record__body h2 {
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.6rem;
}

/* ---- pull quote ----

   Used for words from a project beneficiary or member. Attribution is required: an
   unattributed quotation on a charity site reads as invented. */

.eclub-quote {
	margin: 1.5rem 0 0;
	padding: 0 0 0 1.25rem;
	border-left: 3px solid var(--gold);
}

.eclub-quote p {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--royal);
	font-style: italic;
	margin-bottom: 0.6rem;
}

.eclub-quote cite {
	font-size: 0.78rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---- bulletin archive ----

   A wall of covers rather than a list of links. The bulletin is a designed document, so
   showing it is more informative than naming it, and the reader can see at a glance
   which edition they want. */

.eclub-bulletins {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.75rem 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-bulletins > li {
	display: flex;
	flex-direction: column;
}

.eclub-bulletins a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The cover is clipped to a fixed ratio so a 2-page and a 12-page edition still line up
   in the grid. Top-aligned, because the masthead is the identifying part. */
.eclub-bulletins figure {
	margin: 0 0 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--white);
	aspect-ratio: 3 / 4;
	position: relative;
}

.eclub-bulletins img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.5s var(--ease);
}

.eclub-bulletins a:hover img,
.eclub-bulletins a:focus-visible img {
	transform: scale(1.03);
}

.eclub-bulletins a:hover figure,
.eclub-bulletins a:focus-visible figure {
	border-color: var(--azure);
}

/* Page count sits on the cover, so the reader knows whether it is a two-pager or a
   twelve-page annual edition before opening a PDF. */
.eclub-bulletins__pages {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	background: rgba(20, 58, 117, 0.92);
	color: var(--white);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
}

.eclub-bulletins b {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--royal);
	line-height: 1.3;
}

.eclub-bulletins span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.eclub-bulletins a:hover b {
	color: var(--azure);
}

/* ---- featured item: one large record above a grid ---- */

.eclub-feature {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 5px solid var(--gold);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: 2rem;
}

@media (max-width: 820px) {
	.eclub-feature {
		grid-template-columns: 1fr;
	}
}

.eclub-feature figure {
	margin: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	max-height: 380px;
}

.eclub-feature img {
	width: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ================================================================ places mosaic

   The hero collage. Tiles are photographs of the district itself, cropped from the
   licence-clean D9660 brand collage, each labelled with the place. For a club whose
   members have no shared town, showing the towns they do come from is the argument. */

.eclub-places-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--line-strong);
	border-radius: var(--radius);
	overflow: hidden;
}

.eclub-places-grid > li {
	position: relative;
	isolation: isolate;
	/* Tall enough that a two-line place name ("Lismore and Alstonville") does not
	   collide with the region eyebrow above it. */
	min-height: 200px;
	overflow: hidden;
}

.eclub-places-grid img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.7s var(--ease);
}

.eclub-places-grid > li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(14, 29, 51, 0.88) 0%, rgba(14, 29, 51, 0.55) 34%, rgba(14, 29, 51, 0.05) 72%);
}

.eclub-places-grid > li:hover img {
	transform: scale(1.06);
}

.eclub-places-grid b {
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.75rem;
	color: var(--white);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.eclub-places-grid span {
	display: block;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 0.15rem;
}

/* ================================================================ timeline

   Milestones are a real sequence with real dates, so a numbered, ordered device is
   honest here in a way that 01/02/03 decoration on a set of unordered cards is not. */

.eclub-timeline {
	margin: 2.5rem 0 0;
	padding: 0 0 0 1.75rem;
	list-style: none;
	border-left: 2px solid var(--line-strong);
}

.eclub-timeline > li {
	position: relative;
	padding-bottom: 2rem;
}

.eclub-timeline > li:last-child {
	padding-bottom: 0;
}

.eclub-timeline > li::before {
	content: "";
	position: absolute;
	left: calc(-1.75rem - 7px);
	top: 0.45rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold);
	border: 2px solid var(--paper);
}

.eclub-timeline time {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure);
	margin-bottom: 0.3rem;
}

.eclub-timeline h3 {
	font-size: 1.12rem;
	margin-bottom: 0.35rem;
}

.eclub-timeline p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

/* ================================================================ numbered steps

   Joining is an actual ordered process with a legal step in it, so the numbers carry
   information rather than decorating a list. */

.eclub-steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-steps > li {
	counter-increment: step;
	padding-top: 1rem;
	border-top: 3px solid var(--line-strong);
}

.eclub-steps > li::before {
	content: counter(step);
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--gold);
	margin-bottom: 0.6rem;
	font-variant-numeric: tabular-nums;
}

.eclub-steps h3 {
	font-size: 1rem;
	margin-bottom: 0.4rem;
}

.eclub-steps p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted);
	max-width: none;
}

/* ================================================================ program cards */

.eclub-programs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-programs > li {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--azure);
	border-radius: var(--radius);
	overflow: hidden;
}

.eclub-programs > li:nth-child(3n + 2) { border-top-color: var(--cranberry); }
.eclub-programs > li:nth-child(3n + 3) { border-top-color: var(--amber); }

.eclub-programs img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.eclub-programs__body {
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.eclub-programs h3 {
	font-size: 1.15rem;
	margin-bottom: 0.5rem;
}

.eclub-programs p {
	font-size: 0.92rem;
	color: var(--muted);
	max-width: none;
	flex: 1 1 auto;
}

.eclub-programs__age {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 0.7rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azure);
}

/* ================================================================ people grid */

.eclub-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-people > li {
	padding: 1rem 1.1rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius-sm);
}

.eclub-people b {
	display: block;
	font-size: 0.98rem;
	color: var(--royal);
	letter-spacing: -0.01em;
}

.eclub-people span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ================================================================ four-way test */

.eclub-fourway {
	counter-reset: fw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-radius: var(--radius);
	overflow: hidden;
}

.eclub-fourway > li {
	counter-increment: fw;
	padding: 1.6rem 1.4rem;
	color: var(--white);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.eclub-fourway > li::before {
	content: counter(fw);
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	opacity: 0.75;
	margin-bottom: 0.6rem;
}

.eclub-fourway > li:nth-child(1) { background: var(--royal); }
.eclub-fourway > li:nth-child(2) { background: var(--azure); }
.eclub-fourway > li:nth-child(3) { background: var(--cranberry); }
.eclub-fourway > li:nth-child(4) { background: var(--amber); color: var(--slate); }

/* ================================================================ accessibility fixes

   Found by audit_a11y.mjs, which computes WCAG 2.1 contrast rather than trusting the eye.
   Rotary's palette has two colours that simply cannot carry small text on a light
   background: Gold #F7A81B and Amber #FD9800 both sit around 2:1 on white. They stay as
   fills and rules; a darker ink is used wherever they have to be text. */

:root {
	/* 4.22:1 on white, so it passes AA for large text and is close for normal.
	   Reads as the same amber family at a glance. */
	--amber-ink: #b36a00;
}

/* Figure numbers were amber on white at 2.17:1. */
.eclub-figures dd {
	color: var(--amber-ink);
}

/* The "Join us" nav accent was gold on azure at 2.80:1 when hovered or active.
   White with a gold underline keeps it distinct without failing contrast. */
.eclub-primary__list .is-accent > a {
	color: var(--white);
	box-shadow: inset 0 -3px 0 var(--gold);
}

.eclub-primary__list .is-accent > a:hover,
.eclub-primary__list .is-accent > a:focus-visible {
	background: var(--azure);
	color: var(--white);
}

/* The statutory colophon was 4.30:1, just under AA. */
.eclub-colophon {
	color: #a8bcd6;
}

/* The bulletin page-count badge lost to `.eclub-bulletins span`, which is more specific
   than the badge's own class, so white text rendered as muted grey on dark blue at
   1.60:1. Scoped to win rather than reaching for !important. */
.eclub-bulletins figure .eclub-bulletins__pages {
	color: var(--white);
}

/* Worst of the set: the three-ways-in list sits on white cards inside a royal band, so
   it inherited the band's pale text and rendered near-invisible at 1.26:1. */
.eclub-section--brand .eclub-meeting > div {
	color: var(--royal);
}

.eclub-section--brand .eclub-meeting dd {
	color: var(--royal);
}

.eclub-section--brand .eclub-meeting dd small {
	color: var(--muted);
}

/* The place tiles rely on a gradient over a photograph, and how dark that gradient lands
   depends on the image. A solid scrim behind the label guarantees the text is legible on
   any photo rather than on average. */
.eclub-places-grid b {
	background: linear-gradient(to top, rgba(10, 22, 40, 0.9), rgba(10, 22, 40, 0.72));
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.85rem;
}

/* The leadership caption was #6b4300 on amber at 3.98:1, just under AA for small text. */
.eclub-leaders figcaption span {
	color: #4d3000;
}

/* ---- navigation block colour ----

   Core sets `.wp-block-navigation a { color: inherit }`, which resolves to theme.json's
   body text colour: royal blue. On a royal-blue bar that renders the menu invisible while
   measuring the correct size, so it looks like the menu is missing rather than unstyled.

   Core's selector uses :where() (zero specificity) but loads after this stylesheet, so a
   plain `.eclub-primary__list a` ties and loses on source order. These selectors are
   scoped tightly enough to win without !important. */

.eclub-primary .wp-block-navigation a,
.eclub-primary .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--white);
	text-decoration: none;
	font-weight: 600;
}

.eclub-primary .wp-block-navigation a:hover,
.eclub-primary .wp-block-navigation a:focus-visible {
	background: var(--azure);
	color: var(--white);
}

.eclub-primary .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.95rem 1.05rem;
}

/* Submenus drop onto white, so their links need the ink back. */
.eclub-primary .wp-block-navigation__submenu-container {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
}

.eclub-primary .wp-block-navigation__submenu-container a,
.eclub-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--royal);
	font-weight: 400;
}

.eclub-primary .wp-block-navigation__submenu-container a:hover {
	background: var(--paper);
	color: var(--azure);
}

/* ================================================================ mobile refinements

   From audit_mobile.mjs at 360, 390, 414 and 768px. No horizontal overflow at any width,
   but two real problems on a phone: micro-labels below 12px are genuinely hard to read,
   and several links were under the 44px tap-target guidance. */

@media (max-width: 768px) {
	/* Micro-labels were 9.9px to 11.5px. Nothing drops below 12px on a phone. */
	.eclub-eyebrow,
	.eclub-dateline,
	.eclub-places__label,
	.eclub-figures dt,
	.eclub-meeting dt,
	.eclub-next__label,
	.eclub-programs__age,
	.eclub-people span,
	.eclub-leaders figcaption span,
	.eclub-bulletins span,
	.eclub-utility,
	.eclub-utility__tag,
	.eclub-masthead__contact dt {
		font-size: 0.75rem;
	}

	.eclub-clock span,
	.eclub-events time span,
	.eclub-dispatch figcaption {
		font-size: 0.72rem;
	}

	/* The news ticker links were 18px high. Give them a real tap area. */
	.eclub-utility__news a,
	.eclub-utility__social a {
		display: inline-block;
		padding-block: 0.75rem;
	}

	.eclub-utility__inner {
		min-height: 48px;
	}

	/* Nav items get full-height tap targets rather than text-height ones. */
	.eclub-primary__list a {
		padding-block: 0.85rem;
	}

	/* Footer and in-page lists: space links far enough apart to hit individually. */
	.eclub-footer li a,
	.eclub-bulletins a b {
		display: inline-block;
		padding-block: 0.35rem;
	}

	/* The record layout stacks, so the image no longer needs to hold a 4:3 crop. */
	.eclub-record__media img {
		aspect-ratio: 16 / 10;
	}
}

/* The skip link is 1x1 until focused, which is correct, but it should not be reported
   or reachable as a tap target. */
.eclub-skip:not(:focus) {
	pointer-events: none;
}

/* Second mobile pass. The first used the same specificity as the base rules, so the
   base won on source order for anything declared later in the file. These are scoped to
   the media query AND one level deeper, so they win without !important. */
@media (max-width: 768px) {
	.eclub-wrap .eclub-dateline > li,
	.eclub-wrap .eclub-places-grid span,
	.eclub-wrap .eclub-clock span,
	.eclub-wrap .eclub-bulletins span,
	.eclub-wrap .eclub-footer h2,
	.eclub-footer .eclub-wrap h2,
	.eclub-wrap .eclub-form label,
	.eclub-wrap .eclub-programs__age,
	.eclub-wrap .eclub-events time span,
	.eclub-wrap .eclub-people span {
		font-size: 0.78rem;
	}

	/* Sub-pixel heights were landing at 43.98px and failing the 44px guidance. */
	.eclub-utility__news a,
	.eclub-utility__social a {
		padding-block: 0.85rem;
		line-height: 1.4;
	}
}

/* The masthead stacked to roughly 900px on a phone: logo, then a gap, then email, then
   each button on its own row. That is most of the first screen spent before any content.
   Compacted so the hero is visible without scrolling. */
@media (max-width: 768px) {
	.eclub-masthead__inner {
		padding-block: 0.6rem;
		gap: 0.6rem;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.eclub-masthead__logo img {
		height: 40px;
	}

	.eclub-masthead__right {
		gap: 0.5rem;
		flex-wrap: nowrap;
		width: auto;
	}

	/* The email address is in the footer and on the contact page; it does not need to
	   occupy a row of the header on a phone. */
	.eclub-masthead__contact {
		display: none;
	}

	.eclub-masthead__right .eclub-btn {
		padding: 0.6rem 0.9rem;
		font-size: 0.82rem;
		white-space: nowrap;
	}
}

@media (max-width: 420px) {
	/* Below this the two buttons will not sit beside a 40px logo, so drop the logo to a
	   wordmark height and keep the actions on one line. */
	.eclub-masthead__logo img {
		height: 34px;
	}

	.eclub-masthead__right .eclub-btn {
		padding: 0.55rem 0.7rem;
		font-size: 0.78rem;
	}
}

/* ================================================================ president's message

   The most characteristic element of a Rotary club website, and the one thing every
   comparable club has that we did not. Dated, personal, with a photograph, and written
   in the president's own voice rather than the club's. */

.eclub-president {
	background: var(--white);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.eclub-president__inner {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: var(--step);
}

@media (max-width: 820px) {
	.eclub-president__inner {
		grid-template-columns: 1fr;
	}
}

.eclub-president__who img {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--gold);
}

.eclub-president__who b {
	display: block;
	margin-top: 1rem;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--royal);
}

.eclub-president__who span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.eclub-president__body > p:first-of-type {
	font-size: clamp(1.1rem, 1.7vw, 1.32rem);
	line-height: 1.55;
	color: var(--royal);
}

.eclub-president__sign {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--gold);
	font-size: 0.85rem;
	color: var(--muted);
}

.eclub-president__sign b {
	display: block;
	color: var(--royal);
	font-size: 1rem;
}

/* ---- charter credential strip ----

   Comparable clubs put their charter details in the masthead. It is the cheapest
   credibility a club site can carry, and it answers "are these people real". */

.eclub-credential {
	background: var(--slate);
	color: #cddcf0;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.eclub-credential__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	align-items: center;
	padding-block: 0.6rem;
}

.eclub-credential b {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.7rem;
}

.eclub-credential span::before {
	content: "◆";
	color: var(--gold);
	margin-right: 0.5rem;
	font-size: 0.6rem;
	vertical-align: 1px;
}

/* ---- facebook feed ----

   Loaded on click rather than on page load. Meta's page plugin pulls roughly 300 KB of
   third-party script and sets cookies before a visitor has asked for any of it, which is
   both a performance and a privacy cost on a club site. */

.eclub-social {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	.eclub-social {
		grid-template-columns: 1fr;
	}
}

.eclub-fb {
	position: relative;
	min-height: 420px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	display: grid;
	place-items: center;
	padding: 2rem 1.5rem;
	text-align: center;
	overflow: hidden;
}

.eclub-fb iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.eclub-fb__prompt b {
	display: block;
	font-size: 1.05rem;
	color: var(--royal);
	margin-bottom: 0.4rem;
}

.eclub-fb__prompt p {
	font-size: 0.88rem;
	color: var(--muted);
	margin-bottom: 1.1rem;
	max-width: 34ch;
}


/* ================================================================ density

   Research finding: comparable e-clubs publish 2,134-2,565 words and 10-47 images. We had
   787 words and 9 images in a page twice as tall. The sparseness was a content-density
   problem, not a padding problem, but the padding made it worse. These rules stop blocks
   adding their own margin on top of the section rhythm. */

.eclub-section > .eclub-wrap > :first-child {
	margin-top: 0;
}

.eclub-section > .eclub-wrap > :last-child {
	margin-bottom: 0;
}

.eclub-register {
	margin-top: 1.75rem;
	gap: 0;
}

.eclub-figures,
.eclub-news,
.eclub-events,
.eclub-programs,
.eclub-bulletins,
.eclub-timeline,
.eclub-steps,
.eclub-gallery {
	margin-top: 1.5rem;
}

.eclub-actions {
	margin-top: 1.25rem;
}

.eclub-lede {
	margin-bottom: 0;
}

/* Use the width. Headings and ledes were capped at reading width and left the right half
   of a 1440px screen empty on every section. */
.eclub-section > .eclub-wrap > h2,
.eclub-pagehead h1 {
	max-width: 22ch;
}

.eclub-section > .eclub-wrap > .eclub-lede {
	max-width: 74ch;
}

/* WordPress gives each top-level block a margin, which shows as a white sliver between
   two adjacent full-bleed colour bands (the credential strip and the countdown). The
   bands should read as one solid block. */
.eclub-fullbleed {
	margin-block: 0 !important;
}

.entry-content > .eclub-fullbleed + .eclub-fullbleed {
	margin-top: 0 !important;
}

/* ================================================================ photo wall

   Research finding: comparable clubs run 10-47 images; we ran 9 in a page twice as tall.
   Rotary's own website guidance is explicit: use images of members actively working
   together and enjoying it.

   A CSS-columns wall carries far more photographs per unit of page height than a uniform
   grid, and the uneven rhythm suits a club archive where every frame is a different
   shape. Without these rules the list renders as 16 full-width images stacked vertically,
   which is exactly what happened when this stylesheet failed to deploy. */

.eclub-wall {
	columns: 4 210px;
	column-gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eclub-wall > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 0.75rem;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--white);
	display: block;
}

.eclub-wall figure {
	margin: 0;
}

.eclub-wall img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.6s var(--ease);
}

.eclub-wall > li:hover img {
	transform: scale(1.04);
}

.eclub-wall figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.4rem 0.7rem 0.55rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--white);
	background: linear-gradient(to top, rgba(10, 22, 40, 0.88), rgba(10, 22, 40, 0));
}

@media (max-width: 700px) {
	.eclub-wall {
		columns: 2 140px;
	}
}

/* ---- news cards carry a photograph ---- */

.eclub-news > li {
	overflow: hidden;
}

.eclub-news > li > img {
	width: calc(100% + 2.8rem);
	max-width: none;
	margin: -1.5rem -1.4rem 1.1rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Photograph credit. Unsplash asks for attribution, and it is good practice regardless
   when a picture is not the club's own. */
.eclub-credit {
	margin-top: 0.85rem;
	font-size: 0.72rem;
	color: var(--muted);
	max-width: none;
}

/* ---- page head with a photograph ----

   The join page is what a prospective member reads before deciding whether these are
   people they want to spend time with, so it is the worst page on the site to have no
   faces on it. */

.eclub-pagehead__split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (max-width: 820px) {
	.eclub-pagehead__split {
		grid-template-columns: 1fr;
	}
}

.eclub-pagehead__figure {
	margin: 0;
}

.eclub-pagehead__figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.eclub-pagehead__figure figcaption,
.eclub-inline-figure figcaption {
	margin-top: 0.55rem;
	font-size: 0.75rem;
	color: var(--muted);
}

/* An image sitting inside a run of prose. */
.eclub-inline-figure {
	margin: 1.25rem 0 1.75rem;
	max-width: 46rem;
}

.eclub-inline-figure img {
	width: 100%;
	border-radius: var(--radius);
}