/*
Theme Name: Local 1304 (Claude)
Description: Photo-led theme for Kitimat Firefighter Paramedics, IAFF Local 1304. Works with the Local 1304 Core plugin, which provides Events, the member resource link and the preview controls.
Version: 1.10.1
Requires at least: 6.6
Requires PHP: 8.1
Author: IAFF Local 1304
Text Domain: local1304-claude
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Fonts: Barlow and Barlow Condensed, SIL Open Font License, self-hosted. */
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* Tokens: IAFF crest colours. Asphalt, engine red, crest gold, station concrete. */
:root {
	--ink: #1d2125;
	--ink-2: #2b3036;
	--red: #c1121f;
	--red-deep: #9b0e18;
	--gold: #c9a14a;
	--concrete: #eef0f1;
	--line: #d6dadd;
	--muted: #58606a;
	--white: #ffffff;
	--on-dark: #d9dde0;
	--on-dark-muted: #a9b0b6;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--wrap: 76rem;
	--gutter: clamp(1.125rem, 4vw, 2.5rem);
	--measure: 44rem;
	--section: clamp(3rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--red); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.005em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h4 { font-weight: 600; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: -999rem; top: 0; z-index: 100;
	background: var(--ink); color: var(--white);
	padding: 0.75rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--white); }


/* Buttons */
.btn,
.entry .wp-block-button__link,
.layout .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.7rem 1.3rem;
	border: 2px solid transparent;
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-red, .entry .wp-block-button__link, .layout .wp-block-button__link { background: var(--red); color: var(--white); }
.btn-red:hover, .entry .wp-block-button__link:hover, .layout .wp-block-button__link:hover { background: var(--red-deep); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--concrete); color: var(--ink); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.85); color: var(--white); background: transparent; }
.btn-outline-light:hover { background: var(--white); color: var(--ink); }
.btn .ext { font-size: 0.85em; opacity: 0.85; }

.text-link {
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}
.text-link:hover { color: var(--red); }

/* Preview bar (shown only while search engines are discouraged) */
.preview-bar {
	background: var(--ink);
	color: var(--on-dark);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
	padding: 0.4rem var(--gutter);
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.5rem;
}
.brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	color: var(--ink);
	text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand img { width: 3rem; height: 3rem; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.brand-sub { margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	background: var(--ink);
	color: var(--white);
	border: 0;
	border-radius: 3px;
	font: 600 1rem/1 var(--font-body);
	cursor: pointer;
}
.menu-toggle .bars { position: relative; width: 1.125rem; height: 0.75rem; }
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars span {
	content: "";
	position: absolute; left: 0; right: 0;
	height: 2px; background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars span { top: 5px; }
.menu-toggle .bars::after { bottom: 0; }
.is-menu-open .menu-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
.is-menu-open .menu-toggle .bars span { opacity: 0; }
.is-menu-open .menu-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav .nav-link { text-decoration: none; }

/* Mobile and tablet navigation.
   Without JavaScript the links wrap under the brand so they are always reachable.
   With JavaScript (html.js) they move into the Menu panel. */
@media (max-width: 71.99rem) {
	.menu-toggle { display: none; }
	html:not(.js) .site-header { position: static; }
	.header-inner { flex-wrap: wrap; }
	.site-nav { flex-basis: 100%; padding-bottom: 0.9rem; }
	.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
	.site-nav .nav-link { display: block; padding: 0.4rem 0; color: var(--ink); font-weight: 600; }
	.site-nav .nav-link[aria-current] { color: var(--red); }
	.site-nav .btn-members { margin-top: 0.6rem; }

	.js .menu-toggle { display: inline-flex; }
	.js .header-inner { flex-wrap: nowrap; }
	.js .site-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		padding: 0.5rem var(--gutter) 1.75rem;
		background: var(--ink);
		box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.25);
		max-height: calc(100vh - 4.5rem);
		overflow-y: auto;
	}
	.js .is-menu-open .site-nav { display: flex; flex-direction: column; }
	.js .site-nav ul { display: block; }
	.js .site-nav li { border-bottom: 1px solid #3a4046; }
	.js .site-nav .nav-link {
		padding: 0.85rem 0;
		color: var(--white);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 1.625rem;
		line-height: 1.1;
	}
	.js .site-nav .nav-link[aria-current] { color: var(--gold); }
	.js .site-nav .btn-members { width: 100%; margin: 0.75rem 0 0.5rem; }
}

/* Desktop navigation */
@media (min-width: 72rem) {
	.menu-toggle { display: none; }
	.site-nav { display: flex; align-items: center; gap: 1.25rem; }
	.site-nav ul { display: flex; gap: 0.25rem; }
	.site-nav .nav-link {
		display: block;
		padding: 0.5rem 0.65rem;
		color: var(--ink);
		font-weight: 500;
		border-bottom: 3px solid transparent;
	}
	.site-nav .nav-link:hover { border-bottom-color: var(--line); color: var(--ink); }
	.site-nav .nav-link[aria-current] { border-bottom-color: var(--red); }
}

/* Home: hero. The headline sits in the open sky above the apparatus, so the fire engine stays clear. */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: center;
	height: clamp(34rem, calc(100svh - 7rem), 37.5rem);
	background: var(--ink);
	color: var(--white);
	text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 100%; }
.hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(18, 21, 24, 0.84) 0%, rgba(18, 21, 24, 0.62) 32%, rgba(18, 21, 24, 0) 58%);
}
.hero-content { display: flex; flex-direction: column; align-items: center; padding-block: clamp(1.25rem, 2.6vw, 2.25rem) 0; }
.hero-kicker {
	display: none;
	margin: 0 0 0.5rem;
	font-size: clamp(0.8125rem, 0.7rem + 0.3vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hero h1 {
	font-size: clamp(2.25rem, 0.75rem + 4vw, 4.75rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	margin: 0 0 0.3em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.hero-lead {
	max-width: 40ch;
	margin: 0 0 1.25rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.4;
	color: #f1f3f4;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero .btn-outline-light { background: rgba(18, 21, 24, 0.3); }
.hero .btn-outline-light:hover { background: var(--white); }
@media (max-width: 22.4rem) {
	.hero h1 { font-size: 1.75rem; }
	.hero-lead { font-size: 1rem; margin-bottom: 1rem; }
	.hero-actions { gap: 0.5rem; }
	.hero .btn { padding-inline: 0.8rem; font-size: 0.9375rem; }
}
@media (min-width: 48rem) {
	.hero { height: min(100vw, calc(100svh - 6.5rem)); }
	.hero-kicker { display: block; }
	.hero-media img { object-position: 10% 100%; }
}
@media (min-width: 64rem) {
	.hero { height: min(56.25vw, max(calc(100svh - 6.5rem), 50vw)); }
	.hero-media img { object-position: 50% 55%; }
	.hero-lead { max-width: 60ch; margin-bottom: 1rem; }
}

/* Home: station board (purpose, news, events) */
.board { padding-block: var(--section); }
.board-grid { display: grid; gap: 2.75rem; }
.board-col > :last-child { margin-bottom: 0; }
.board-purpose h2 { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); line-height: 0.95; }
.board-purpose p { font-size: 1.1875rem; max-width: 34ch; }
.col-title { font-size: 1.75rem; margin-bottom: 0.9rem; }
.empty-note h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0 0 0.35rem; }
.empty-note p { color: var(--muted); font-size: 1rem; }
.small-label { display: block; margin: 1.25rem 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
@media (min-width: 60rem) {
	.board-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 0; }
	.board-col { padding-inline: 2.5rem; border-left: 1px solid var(--line); }
	.board-col:first-child { padding-left: 0; border-left: 0; }
	.board-col:last-child { padding-right: 0; }
}

.post-list, .event-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.post-list li { padding-block: 0.85rem; border-top: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list time { display: block; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.post-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.post-list a:hover { color: var(--red); text-decoration: underline; }

.event-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
}
.event-list .event-row { padding-block: 0.85rem; border-top: 1px solid var(--line); }
.event-list .event-row:last-child { border-bottom: 1px solid var(--line); }
.event-row a { color: var(--ink); font-weight: 600; text-decoration: none; }
.event-row a:hover { color: var(--red); text-decoration: underline; }
.event-row h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; margin: 0; }

/* Date tile: tear-off calendar from the station duty board. */
.date-tile {
	display: inline-flex;
	flex-direction: column;
	width: 4rem;
	text-align: center;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-display);
	line-height: 1;
}
.dt-month { background: var(--red); padding: 0.3rem 0; font-size: 0.9375rem; font-weight: 600; }
.dt-day { padding: 0.35rem 0 0.1rem; font-size: 2rem; font-weight: 700; }
.dt-year { padding-bottom: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--on-dark-muted); }

/* Home: Ladder of Hope */
.ladder { display: grid; background: var(--red); color: var(--white); }
.ladder-media { position: relative; margin: 0; }
.ladder-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 72%; }
.ladder-body { padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
.ladder-body > div { max-width: 34rem; }
.ladder-logo { width: 10.5rem; margin-bottom: 1.5rem; filter: brightness(0) invert(1); }
.ladder h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 0.98; }
.ladder p { color: #fde9ea; }
.ladder .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ladder .btn-white { color: var(--red-deep); }
.ladder.is-text-only { display: block; min-height: 0; }
.ladder.is-text-only .ladder-body { display: block; padding-inline: var(--gutter); }
.ladder.is-text-only .ladder-body { padding-block: clamp(3rem, 6vw, 4.5rem); }
.ladder.is-text-only .ladder-body > div { max-width: var(--wrap); margin-inline: auto; }
.ladder.is-text-only p { max-width: 52ch; }
@media (min-width: 60rem) {
	.ladder { grid-template-columns: 1fr 1fr; min-height: 34rem; }
	.ladder-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.ladder-body { display: flex; align-items: center; padding-left: clamp(2.5rem, 5vw, 5rem); }
}

/* Home: members */
.members-band { background: var(--concrete); color: var(--ink); padding-block: var(--section); }
.members-inner { display: grid; gap: 1.75rem; align-items: center; }
.members-inner img { width: 5rem; height: 5rem; }
.members-band h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem); margin-bottom: 0.35em; }
.members-band p { max-width: 46ch; margin: 0; color: var(--muted); }
@media (min-width: 52rem) {
	.members-inner { grid-template-columns: auto 1fr auto; gap: 2.5rem; }
	.members-inner img { width: 8.5rem; height: 8.5rem; }
}

/* Inner page header: a tall Local photograph with the page title set like the home title. */
.page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(19rem, 56svh, 26rem);
	background: var(--ink);
	color: var(--white);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.page-hero-media { overflow: hidden; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Phones: some photos zoom in on their subject (set per page in l1304c_page_intro). */
@media (max-width: 51.99rem) { .page-hero-media img { transform: scale(var(--hero-zoom, 1)); } }
.page-hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(18, 21, 24, 0.92) 0%, rgba(18, 21, 24, 0.7) 30%, rgba(18, 21, 24, 0.15) 70%, rgba(18, 21, 24, 0.05) 100%);
}
.page-hero.is-plain { min-height: 0; }
.page-hero.is-plain::before { display: none; }
.page-hero-content { padding-block: 4rem clamp(2rem, 4vw, 3.25rem); }
.page-hero h1 {
	font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.5rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin-bottom: 0.2em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.page-hero p { max-width: 46ch; margin: 0; font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.375rem); line-height: 1.45; color: #eef0f2; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.page-hero .crest-mark { display: none; }
@media (min-width: 52rem) {
	.page-hero { min-height: clamp(24rem, 62svh, 36rem); }
	.page-hero.is-plain .page-hero-content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
	.page-hero .crest-mark { display: block; width: 7rem; height: 7rem; flex: none; }
}

/* Long-form content (stories, events, members page) */
.page-body { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }
.entry { max-width: var(--measure); }
.entry > * { margin-top: 0; margin-bottom: 1.2rem; }
.entry > :last-child { margin-bottom: 0; }
.entry .lede, .entry > p:first-child { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.5; font-weight: 500; }
.entry h2 { font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem); margin: 2.75rem 0 0.6rem; }
.entry h3 { font-size: 1.5rem; margin: 2rem 0 0.5rem; }
.entry h2 + *, .entry h3 + * { margin-top: 0; }
.entry ul, .layout ul:not(.tiles) { list-style: none; padding-left: 0; }
.entry ul li, .layout ul:not(.tiles) li { position: relative; padding-left: 1.35rem; margin-bottom: 0.45rem; }
.entry ul li::before, .layout ul:not(.tiles) li::before {
	content: "";
	position: absolute; left: 0; top: 0.6em;
	width: 0.5rem; height: 0.5rem;
	background: var(--red);
}
.entry ol { padding-left: 1.35rem; }
.entry figure { margin: 2.25rem 0; }
.entry .wp-block-image:not(.logo-artwork) img { width: 100% !important; height: auto !important; }
.entry .wp-element-caption, .entry figcaption {
	margin-top: 0.6rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--muted);
}
.entry .wp-block-columns { gap: 2rem; margin-block: 2rem; }
.entry .wp-block-columns figure { margin: 0 0 1.25rem; }
.entry .logo-artwork img, .layout .logo-artwork img { max-width: 13rem; }
.entry .wp-block-buttons { margin-block: 1.5rem; }
.entry a[href^="mailto:"], .layout a[href^="mailto:"] { font-weight: 600; }

/* Story and event pages: article with a details column */
.article-grid { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
.article-grid .entry > figure.wp-block-image { max-width: 24rem; }
.article-aside { align-self: start; display: grid; gap: 1.25rem; padding: 1.75rem; background: var(--concrete); }
.article-aside p { margin: 0; }
.aside-date { display: flex; gap: 1rem; align-items: center; font-weight: 600; line-height: 1.35; }
.aside-date p span { color: var(--muted); font-weight: 500; }
.aside-note { color: var(--muted); font-size: 1rem; }
.aside-meta { font-weight: 600; line-height: 1.4; }
.aside-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
@media (min-width: 60rem) {
	.article-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; }
	.article-aside { position: sticky; top: 6.5rem; }
}

/* Page bands ("bays"). Each Heading 2 in a page starts one. */
.layout { container-type: inline-size; }
.bay { --bay-pad: clamp(3rem, 7vw, 6rem); }
.bay h2 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); line-height: 0.98; margin: 0 0 0.45em; }
.bay p { max-width: 62ch; }
.bay p:last-child { margin-bottom: 0; }
.bay figure { margin: 0; }

/* Opening statement */
.bay-lede { padding-block: var(--bay-pad) calc(var(--bay-pad) * 0.8); }
.lede-block { max-width: 52rem; }
.lede-block .logo-artwork { margin: 0 0 1.75rem; }
.lede-block p { font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.625rem); line-height: 1.45; }
.lede-block .lede { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 600; line-height: 1.12; max-width: 30ch; margin-bottom: 0.8em; }
.notice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	padding: 1rem 1.25rem;
	background: var(--red);
	color: var(--white);
	font-size: 1.0625rem !important;
	font-weight: 500;
	line-height: 1.45;
	border-radius: 3px;
}
.notice strong { font-weight: 700; }

/* Photo and text split: the photo runs to the edge of the screen. */
.bay-split { display: grid; }
.bay-media { position: relative; overflow: hidden; background: var(--ink); }
.bay-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.bay-media img { transform: scale(var(--zoom, 1)); }
@media (min-width: 60rem) { .bay-split:has(.is-portrait) { min-height: min(62vw, 54rem); } }
.bay-media.is-framed img { --zoom: 1.12; }
.bay-media figcaption {
	position: absolute; left: 0; bottom: 0;
	max-width: calc(100% - 2rem);
	padding: 0.5rem 0.85rem;
	background: rgba(18, 21, 24, 0.86);
	color: var(--white);
	font-size: 0.875rem;
	line-height: 1.4;
}
.bay-copy { padding: var(--bay-pad) var(--gutter); }
.bay-copy-inner { max-width: 36rem; }
.bay-copy-inner > :last-child { margin-bottom: 0; }
.bay-intro .bay-copy-inner .lede { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 600; line-height: 1.12; }
.bay-copy-inner .logo-artwork { margin-bottom: 1.75rem; }
.bay-copy-inner .wp-block-buttons { margin-block: 1.75rem 0; }
@media (min-width: 60rem) {
	.bay-split { grid-template-columns: 1fr 1fr; min-height: clamp(30rem, 44vw, 42rem); }
	.bay-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.bay-copy { display: flex; align-items: center; }
	.media-right .bay-media { order: 2; }
	.media-right .bay-copy { padding-left: max(var(--gutter), calc(50vw - var(--wrap) / 2 - 0.5rem)); padding-right: clamp(2.5rem, 5vw, 5rem); }
	.media-left .bay-copy { padding-left: clamp(2.5rem, 5vw, 5rem); padding-right: max(var(--gutter), calc(50vw - var(--wrap) / 2 - 0.5rem)); }
	@supports (padding: 1cqw) {
		.media-right .bay-copy { padding-left: max(var(--gutter), calc(50cqw - var(--wrap) / 2)); }
		.media-left .bay-copy { padding-right: max(var(--gutter), calc(50cqw - var(--wrap) / 2)); }
	}
}

/* Text band: heading on the left, writing on the right. */
section.bay-text { padding-block: var(--bay-pad); background: var(--concrete); }
.bay-grid { display: grid; gap: 0.25rem 3rem; }
.bay-body > :last-child { margin-bottom: 0; }
@media (min-width: 60rem) {
	.bay-grid { grid-template-columns: 5fr 7fr; }
	.bay-title h2 { margin: 0; max-width: 12ch; }
	.bay-body { padding-top: 0.35rem; }
}

/* Service tiles */
.bay-tiles { padding-block: var(--bay-pad); background: var(--ink); color: var(--on-dark); }
.bay-tiles h2 { color: var(--white); }
.bay-head { max-width: 46rem; margin-bottom: 2.25rem; }
.bay-head p { font-size: 1.1875rem; }
.tiles { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
.tiles li {
	display: flex;
	align-items: flex-end;
	min-height: 4.75rem;
	padding: 1.25rem 1.4rem;
	background: var(--ink-2);
	color: var(--white);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
}
@media (min-width: 22rem) { .tiles { grid-template-columns: 1fr 1fr; } .tiles li { min-height: 7.5rem; padding: 1rem 1.1rem; font-size: 1.25rem; } }
@media (min-width: 36rem) { .tiles li { min-height: 8.5rem; padding: 1.25rem 1.4rem; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); } }
@media (min-width: 64rem) { .tiles { grid-template-columns: repeat(3, 1fr); } .tiles li { min-height: 10rem; padding: 1.5rem 1.75rem; } }

/* Button rows built from link-only paragraphs */
.link-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--red); color: var(--white); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.bay-tiles .btn-ink { background: var(--red); }
.bay-tiles .btn-outline { border-color: rgba(255, 255, 255, 0.85); color: var(--white); }

/* Contact cards */
.bay-cards { padding-block: 0 var(--bay-pad); }
.card-grid { display: grid; gap: 1.25rem; }
.card { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--concrete); }
.card h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); }
.card p { margin-bottom: 0.75rem; }
.card a[href^="mailto:"] { display: inline-block; margin-top: 0.25rem; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3125rem); overflow-wrap: anywhere; }
@media (max-width: 24rem) { .card { padding: 1.25rem 1.1rem; } .card .link-row .btn { flex: 1 1 100%; justify-content: flex-start; } }
.card .link-row { margin-top: 0.75rem; }
@media (min-width: 52rem) { .card-grid { grid-template-columns: 1fr 1fr; } }
.page-contact-lede .lede-block { max-width: 48rem; }

/* Events: team photo strip under the header, shown whole */
.team-strip { margin: 0; background: var(--ink); }
.team-strip img { width: 100%; height: auto; aspect-ratio: 4000 / 1009; object-fit: cover; }
.team-strip figcaption { padding-block: 0.6rem 0.8rem; color: var(--on-dark-muted); font-size: 0.875rem; }
@media (max-width: 40rem) { .team-strip img { aspect-ratio: 2.4 / 1; object-position: 50% 50%; } }

/* Event and story cards */
.bay-listing { padding-block: var(--bay-pad); }
.bay-listing + .bay-listing { padding-top: 0; }
.bay-events { padding-block: var(--bay-pad); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.section-head h2 { margin: 0; }
.list-heading { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); line-height: 0.98; margin: 0 0 1.75rem; }
.ecards { display: grid; gap: 2.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ecard { position: relative; display: flex; flex-direction: column; }
.ecard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.ecard-media img { width: 100%; height: 100%; object-fit: cover; }
.ecard-media.is-art { background: var(--concrete); }
.ecard-media.is-art img { object-fit: contain; padding: 1.25rem; }
.ecard-media .date-tile { position: absolute; left: 0; bottom: 0; }
.ecard-body { padding-top: 1.1rem; }
.ecard-date { display: block; margin-bottom: 0.35rem; font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.ecard-title { font-size: clamp(1.625rem, 1.35rem + 0.9vw, 2rem); line-height: 1.02; margin: 0 0 0.4rem; }
.ecard-title a { color: var(--ink); text-decoration: none; }
.ecard-title a::after { content: ""; position: absolute; inset: 0; }
.ecard:hover .ecard-title a, .ecard-title a:focus-visible { color: var(--red); text-decoration: underline; }
.ecard-title a:focus-visible { outline: none; }
.ecard:has(a:focus-visible) { outline: 3px solid var(--gold); outline-offset: 4px; }
.ecard p { margin: 0; color: var(--muted); }
@media (min-width: 40rem) { .ecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ecards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A single event gets the full width: picture beside the words. */
@media (min-width: 40rem) {
	.ecards:has(> .ecard:only-child) { grid-template-columns: 1fr; }
	.ecard:only-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
	.ecard:only-child .ecard-body { padding-top: 0; }
	.ecard:only-child .ecard-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
	.ecard:only-child p { font-size: 1.1875rem; max-width: 40ch; }
}

.empty-panel { display: grid; gap: 1.25rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--concrete); }
.empty-panel h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); margin-bottom: 0.35em; }
.empty-panel p { margin: 0; color: var(--muted); max-width: 52ch; }
.empty-panel .links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 60rem) { .empty-panel { grid-template-columns: 1fr auto; } }

/* News with no stories yet */
.bay-empty { padding-block: var(--bay-pad); }
.empty-grid { display: grid; gap: 2.5rem 4rem; align-items: center; }
.empty-grid p { font-size: 1.1875rem; }
@media (min-width: 60rem) { .empty-grid { grid-template-columns: 1fr 1fr; } }

/* Social tiles */
.social-tiles { display: grid; gap: 2px; }
.social-tile {
	display: flex !important;
	align-items: center;
	gap: 0.85rem !important;
	min-height: 6rem;
	padding: 1.25rem 1.5rem;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	font-weight: 600;
	line-height: 1.05;
	text-decoration: none;
}
.social-tile .ico { width: 1.4em !important; height: 1.4em !important; color: var(--gold); }
.social-tile .out { margin-left: auto; font-size: 1em !important; }
.social-tile:hover { background: var(--red); color: var(--white); }
.social-tile:hover .ico { color: var(--white); }
@media (min-width: 40rem) { .social-tile { min-height: 8rem; } }
.social-band { padding-block: var(--bay-pad, 4rem); background: var(--concrete); }
.social-band-inner { display: grid; gap: 2rem 4rem; align-items: center; }
.social-band h2 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); line-height: 0.98; margin-bottom: 0.4em; }
.social-band p { margin: 0; max-width: 40ch; font-size: 1.1875rem; }
@media (min-width: 60rem) { .social-band-inner { grid-template-columns: 1fr 1fr; } }

/* More from the Local: text links (no photos, so no photo repeats on the site) */
.explore { padding-block: var(--section); background: var(--white); }
.bay-cards + .explore, .bay-events + .explore, .bay-empty + .explore, .bay-listing + .explore { padding-top: 0; }
.explore-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); margin-bottom: 1.25rem; }
.explore-grid { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.explore-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 7.5rem;
	height: 100%;
	padding: 1.25rem 1.4rem;
	background: var(--ink);
	color: var(--white);
	text-decoration: none;
}
.explore-name { display: block; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: 800; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
.explore-desc { display: block; margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.35; color: var(--on-dark); }
.explore-panel:hover { background: var(--red); color: var(--white); }
.explore-panel:hover .explore-desc { color: var(--white); }
@media (min-width: 40rem) { .explore-grid { grid-template-columns: repeat(3, 1fr); } .explore-panel { min-height: 10rem; } }

/* Members page: access first */
.access-panel {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 3rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--concrete);
}
.access-panel h2 { font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem); margin: 0 0 0.4rem; }
.access-panel p { margin: 0; }
.access-panel .help { font-size: 0.9375rem; color: var(--muted); }
.access-docs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.access-docs li {
	padding: 0.35rem 0.75rem;
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 0.9375rem;
	font-weight: 600;
}
@media (min-width: 52rem) {
	.access-panel { grid-template-columns: 1fr auto; align-items: center; }
	.access-panel .access-docs, .access-panel .help { grid-column: 1 / -1; }
}
.section-label { font-size: 1.5rem; margin: 0 0 1rem; }

/* Listings (search results) */
.listing { display: grid; gap: 0; margin: 0 0 2.5rem; padding: 0; list-style: none; max-width: var(--measure); }
.listing > li { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.listing > li:last-child { border-bottom: 1px solid var(--line); }
.listing h2, .listing h3 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; margin: 0 0 0.35rem; }
.listing h2 a, .listing h3 a { color: var(--ink); text-decoration: none; }
.listing h2 a:hover, .listing h3 a:hover { color: var(--red); text-decoration: underline; }
.listing p { margin: 0; color: var(--muted); }
.listing .meta { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.empty-block { max-width: var(--measure); margin-bottom: 2.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--concrete); }
.empty-block h2, .empty-block h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); margin-bottom: 0.4rem; }
.empty-block p { color: var(--muted); }
.empty-block .links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.75rem; }

.single-meta { margin-top: 0.75rem; font-weight: 600; color: #e6e9ec; }
.back-link { display: inline-block; margin-top: 2.5rem; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark); font-size: 1rem; }
.footer-grid { display: grid; gap: 2.5rem; padding-block: 3.5rem 3rem; }
.footer-brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer-brand img { width: 4rem; height: 4rem; flex: none; }
.footer-brand .brand-name { display: block; color: var(--white); font-size: 1.5rem; line-height: 1; }
.footer-brand .brand-sub { display: block; margin: 0.3rem 0 0.75rem; color: var(--on-dark-muted); }
.footer-brand p { max-width: 30ch; margin: 0; }
.site-footer h2 { font-size: 1.25rem; color: var(--white); margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer address { font-style: normal; margin: 0.75rem 0; }
.footer-links-2col { columns: 2; column-gap: 1.5rem; }
.footer-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.25rem 1.5rem;
	background: linear-gradient(#3a4046, #3a4046) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
	font-size: 0.875rem;
	color: var(--on-dark-muted);
}
.footer-base p { margin: 0; }
@media (min-width: 56rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* 404 */
.not-found { padding-block: var(--section); }

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


/* Social links: one wording ("Follow us on ...") everywhere, with a generic symbol and an outward arrow. */
:root { --ico-photos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); --ico-community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.6 2.7-6 6-6s6 2.4 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.2c2.6.3 4.5 2.4 4.5 5.8'/%3E%3C/svg%3E"); }
.social-link { display: inline-flex; align-items: center; gap: 0.5em; }
.social-link .ico, .layout a[href*="instagram.com"]::before, .entry a[href*="instagram.com"]::before, .layout a[href*="facebook.com"]::before, .entry a[href*="facebook.com"]::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.ico-photos, .layout a[href*="instagram.com"]::before, .entry a[href*="instagram.com"]::before { --ico: var(--ico-photos); }
.ico-community, .layout a[href*="facebook.com"]::before, .entry a[href*="facebook.com"]::before { --ico: var(--ico-community); }
.layout a[href*="instagram.com"]::before, .entry a[href*="instagram.com"]::before, .layout a[href*="facebook.com"]::before, .entry a[href*="facebook.com"]::before { margin-right: 0.4em; vertical-align: -0.2em; }
.social-link .out { font-size: 0.85em; opacity: 0.8; }
.site-footer .social-link { text-decoration: none; }
.layout a[href*="instagram.com"]::after, .entry a[href*="instagram.com"]::after, .layout a[href*="facebook.com"]::after, .entry a[href*="facebook.com"]::after { content: "\2197"; margin-left: 0.35em; font-size: 0.85em; opacity: 0.8; }

@media print {
	.site-header, .site-footer, .preview-bar, .hero-media, .page-hero-media { display: none !important; }
	.hero, .page-hero { color: #000; background: none; min-height: 0; }
}

/* Past event notice */
.event-history-note {
	padding: 1rem 1.25rem;
	background: var(--concrete);
	font-size: 1rem;
}

/* Search */
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--measure); margin: 0 0 2rem; }
.search-form label { flex-basis: 100%; font-weight: 600; }
.search-form input[type="search"] {
	flex: 1 1 14rem;
	min-height: 2.875rem;
	padding: 0.55rem 0.8rem;
	border: 2px solid var(--muted);
	border-radius: 3px;
	font: inherit;
	color: var(--ink);
	background: var(--white);
}
.search-form input[type="search"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.search-count { margin: 0 0 1rem; color: var(--muted); font-weight: 600; }

/* Tablet: a direct Members link beside the Menu button where there is room */
.header-members { display: none; }
@media (min-width: 36rem) and (max-width: 71.99rem) {
	.js .header-members {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.5rem 0.9rem;
		border: 2px solid var(--red);
		border-radius: 3px;
		color: var(--red-deep);
		font-weight: 600;
		text-decoration: none;
	}
	.js .header-members:hover, .js .header-members[aria-current] { background: var(--red); color: var(--white); }
}