/* ==========================================================================
   The Bulletin Local — stylesheet
   Vanilla CSS. Mobile-first. Tokens align with the Astro main site
   (raginggrannies.org) so subsite chrome reads as a sibling of the network.
   ========================================================================== */

/* ---------- tokens (mirrored from src/styles/global.css) ---------- */
:root {
	--color-paper:      #FAF3E3;
	--color-paper-2:    #EDE4CA;
	--color-card:       #FFFEF7;
	--color-ink:        #2A1847;
	--color-ink-soft:   #57228C;
	--color-ink-lilac:  #947FA8;
	--color-red:        #E22A2C;
	--color-red-soft:   #C48689;
	--color-rose:       #F3D9D9;
	--color-mustard:    #E8C547;
	--color-rule:       #8A7D6B;
	--color-muted:      #8A7D6B;
	--color-text:       #2C2A22;
	--color-text-soft:  #5C584A;
	--color-on-dark:    #F5F4E6;

	--font-display: "Rum Raisin", "Chalkboard SE", system-ui, sans-serif;
	--font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--radius-pill: 999px;
	--shadow-card: 0 1px 0 rgba(42,24,71,.04), 0 2px 8px rgba(42,24,71,.04);
	--shadow-lift: 0 4px 20px rgba(42,24,71,.08);
	--shadow-polaroid: 0 18px 44px rgba(42,24,71,.18), 0 4px 10px rgba(0,0,0,.06);

	--container: 1200px;
	--container-wide: 1400px;
	--gutter: 32px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-text);
	font: 400 18px/1.55 var(--font-body);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-ink);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: 0;
}
h1 { font-size: clamp(40px, 6vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 24px; }
h4 { font-size: 18px; }

p { margin: 0 0 1em; }
a { color: var(--color-red); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--color-ink-soft); }
ul { padding-left: 22px; }

.tbl-kicker {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-bottom: 8px;
}
.tbl-muted { color: var(--color-text-soft); font-style: italic; }

.tbl-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--color-ink); color: var(--color-on-dark);
	padding: 8px 14px; z-index: 100;
}
.tbl-skip-link:focus { left: 12px; top: 12px; }

.tbl-arrow {
	display: inline-block;
	margin-left: 4px;
	transition: transform .15s ease;
}

/* ==========================================================================
   Header (sticky)
   ========================================================================== */
.tbl-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--color-paper);
	border-bottom: 1.5px solid var(--color-rule);
	backdrop-filter: saturate(1.1);
}
.tbl-header-inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 16px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.tbl-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-ink);
	text-decoration: none;
}
.tbl-brand:hover, .tbl-brand:focus-visible { color: var(--color-ink); }
.tbl-brand-mark {
	width: 38px; height: 38px;
	flex-shrink: 0;
	display: inline-block;
}
.tbl-brand-mark svg {
	width: 100%; height: 100%;
	fill: var(--color-ink);
	display: block;
}
.tbl-brand-text {
	display: flex; flex-direction: column;
	line-height: 1.05;
}
.tbl-brand-locator,
.tbl-brand-network {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	color: var(--color-ink);
	letter-spacing: .01em;
}

/* Desktop nav */
.tbl-nav-desktop { display: none; }
@media (min-width: 768px) {
	.tbl-nav-desktop {
		display: block;
	}
	.tbl-nav-toggle { display: none !important; }
}
.tbl-nav-desktop ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: 28px;
}
.tbl-nav-desktop a {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--color-text);
	text-decoration: none;
	transition: color .15s ease;
}
.tbl-nav-desktop a:hover { color: var(--color-red); }
.tbl-nav-desktop a[aria-current="page"] { color: var(--color-red); }

/* Songs pill — matches Astro BaseLayout: px-[18px] py-[10px] text-sm font-bold */
.tbl-pill {
	display: inline-block;
	padding: 10px 18px;
	background: var(--color-red);
	color: #fff !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
	transition: background .15s ease, color .15s ease;
}
.tbl-pill::after { display: none !important; }
.tbl-pill:hover, .tbl-pill:focus-visible {
	background: var(--color-ink-soft);
	color: #fff !important;
}

/* Hamburger (mobile) */
.tbl-nav-toggle {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	color: var(--color-ink);
	cursor: pointer;
	border-radius: 8px;
}
.tbl-nav-toggle:hover { background: var(--color-paper-2); }
.tbl-nav-toggle:focus-visible { outline: 2px solid var(--color-ink-soft); outline-offset: 2px; }

.tbl-nav-mobile {
	background: var(--color-paper);
	border-top: 1px solid var(--color-rule);
}
@media (min-width: 768px) {
	.tbl-nav-mobile { display: none !important; }
}
.tbl-nav-mobile[hidden] { display: none; }
.tbl-nav-mobile ul {
	list-style: none;
	margin: 0;
	padding: 8px var(--gutter) 16px;
	display: grid;
	gap: 2px;
}
.tbl-nav-mobile a {
	display: block;
	padding: 14px 4px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 17px;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-rule);
	transition: color .15s ease, padding .15s ease;
}
.tbl-nav-mobile li:last-child a { border-bottom: 0; }
.tbl-nav-mobile a:hover, .tbl-nav-mobile a:focus-visible {
	color: var(--color-red);
	padding-left: 8px;
	outline: none;
}
.tbl-nav-mobile a[aria-current="page"] { color: var(--color-red); }
.tbl-pill-mobile {
	margin-top: 8px;
	padding: 12px 18px !important;
	background: var(--color-red);
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
	border-bottom: 0 !important;
	text-align: center;
	align-self: start;
	max-width: max-content;
}
.tbl-pill-mobile:hover {
	background: var(--color-ink-soft) !important;
	color: #fff !important;
	padding-left: 18px !important;
}

/* ==========================================================================
   Main scaffold
   ========================================================================== */
.tbl-main { display: block; }
.tbl-section { padding: 80px 0; }

/* ==========================================================================
   Hero (front page) — two-column polaroid
   ========================================================================== */
.tbl-hero {
	max-width: var(--container);
	margin: 0 auto;
	padding: 64px var(--gutter) 56px;
	border-bottom: 1.5px solid var(--color-rule);
}
.tbl-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
@media (min-width: 768px) {
	.tbl-hero {
		padding: 88px var(--gutter) 72px;
	}
	.tbl-hero-grid {
		grid-template-columns: 1.3fr 1fr;
		gap: 72px;
	}
}

.tbl-hero-eyebrow {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-rule);
	margin-bottom: 18px;
}
.tbl-hero-dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--color-rule);
	margin: 0 10px 2px;
	vertical-align: middle;
}
.tbl-hero-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(48px, 7vw, 88px);
	line-height: 1;
	color: var(--color-ink);
	margin: 0 0 24px;
	text-wrap: balance;
}
.tbl-hero-title em {
	font-style: normal;
	font-weight: 400;
	color: var(--color-red);
}
.tbl-hero-tagline {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.55;
	color: var(--color-text-soft);
	max-width: 50ch;
	margin: 0;
}

/* Polaroid — frame styling mirrors src/styles/global.css .press-hero-photo. */
.tbl-hero-right {
	display: flex;
	justify-content: center;
}
.tbl-polaroid {
	margin: 0;
	padding: 10px 10px 40px;
	background: var(--color-on-dark);
	transform: rotate(1.4deg);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
	max-width: 440px;
}
.tbl-polaroid img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	filter: saturate(.92) contrast(1.02);
	display: block;
	margin: 0;
}
@media (min-width: 768px) {
	.tbl-polaroid img { height: 360px; }
}

/* ==========================================================================
   Gaggle Notes — evergreen reference posts (FAQs, guidelines, pledges).
   Lean text-only grid above Recent Actions on the front page; hidden when
   the gaggle has no posts in the category yet.
   ========================================================================== */
.tbl-gnotes {
	max-width: var(--container);
	margin: 0 auto;
	padding: 56px var(--gutter) 0;
}
.tbl-gnotes-head {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--color-rule);
}
.tbl-gnotes-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1;
	color: var(--color-ink);
	margin: 0;
}
.tbl-gnotes-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
@media (min-width: 720px) {
	.tbl-gnotes-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 32px;
	}
}
.tbl-gnotes-item {
	border-bottom: 1px dotted var(--color-rule);
}
.tbl-gnotes-item a {
	display: block;
	padding: 14px 0;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.2;
	color: var(--color-ink);
	text-decoration: none;
	transition: color .15s ease;
}
.tbl-gnotes-item a:hover,
.tbl-gnotes-item a:focus-visible {
	color: var(--color-red);
}
.tbl-gnotes-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-red);
	text-decoration: none;
}
.tbl-gnotes-more:hover { color: var(--color-ink-soft); }

/* ==========================================================================
   Recent Actions — section + grid
   ========================================================================== */
.tbl-actions {
	max-width: var(--container);
	margin: 0 auto;
	padding: 72px var(--gutter) 96px;
}
.tbl-actions-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1.5px solid var(--color-rule);
}
.tbl-actions-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1;
	color: var(--color-ink);
	margin: 0;
}
.tbl-actions-title em {
	font-style: normal;
	font-weight: 400;
	color: var(--color-red);
}
.tbl-actions-sub {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 300;
	font-size: 17px;
	color: var(--color-text-soft);
	max-width: 38ch;
	margin: 8px 0 0;
}
.tbl-actions-archive {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding: 10px 0 8px;
	white-space: nowrap;
	transition: color .15s ease;
}
.tbl-actions-archive:hover { color: var(--color-red); }
.tbl-actions-archive:hover .tbl-arrow { transform: translateX(3px); }

.tbl-actions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 32px;
}
@media (min-width: 600px) {
	.tbl-actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.tbl-actions-grid { grid-template-columns: repeat(3, 1fr); }
}

.tbl-action-card {
	display: flex;
	flex-direction: column;
	color: var(--color-text);
	text-decoration: none;
}
.tbl-action-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin-bottom: 18px;
	background: var(--color-paper-2);
}
.tbl-action-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.02);
	transition: transform .35s ease;
}
.tbl-action-card:hover .tbl-action-img img { transform: scale(1.04); }
.tbl-action-img--placeholder {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--color-paper-2) 0%, #DCD0AC 100%);
}
.tbl-action-img--placeholder svg {
	width: 56px; height: 56px;
	color: var(--color-ink-soft);
	opacity: .4;
}
.tbl-action-date {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-rule);
	margin-bottom: 10px;
}
.tbl-action-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	color: var(--color-ink);
	margin: 0 0 12px;
	text-wrap: pretty;
	transition: color .15s ease;
}
.tbl-action-card:hover .tbl-action-title { color: var(--color-red); }
.tbl-action-excerpt {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 14px;
	max-width: 38ch;
}
.tbl-action-more {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin-top: auto;
	transition: color .15s ease;
}
.tbl-action-card:hover .tbl-action-more { color: var(--color-red); }
.tbl-action-card:hover .tbl-arrow { transform: translateX(3px); }

/* ==========================================================================
   Generic page templates (page.php, archive.php, single, photos, videos,
   contact, 404)
   ========================================================================== */
.tbl-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px var(--gutter) 96px;
}
.tbl-page-head { margin-bottom: 32px; }
.tbl-page-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 5.5vw, 64px);
	line-height: 1;
	color: var(--color-ink);
	margin: 0 0 12px;
}
.tbl-page-deck {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.5;
	color: var(--color-text-soft);
	max-width: 50ch;
	margin: 0;
}
/* When a gaggle fills the Contact page with custom HTML (links, multiple
 * paragraphs), render those nicely instead of a single italic line. */
.tbl-page-deck p { margin: 0 0 .6em; }
.tbl-page-deck p:last-child { margin-bottom: 0; }
.tbl-page-deck a {
	color: var(--color-red);
	font-style: normal;
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-red);
}
.tbl-page-deck a:hover { color: var(--color-ink-soft); border-bottom-color: var(--color-ink-soft); }
.tbl-page-body { font-size: 18px; line-height: 1.7; }
.tbl-page-body::after { content: ""; display: block; clear: both; }
.tbl-page-body h2 { margin-top: 1.5em; }
.tbl-page-body h3 { margin-top: 1.4em; }
.tbl-page-body a { color: var(--color-red); text-decoration: none; }
.tbl-page-body a:hover { color: var(--color-ink-soft); }
.tbl-page-body img { margin: 1em 0; }

/* Galleries inside post + page bodies clear the floated featured-image
 * polaroid so they always render at full content width instead of being
 * squished into the narrow column beside it. */
.tbl-single-body .wp-block-gallery,
.tbl-page-body .wp-block-gallery {
	clear: both;
	margin: 32px 0;
}

/* Accordion: native <details>/<summary> rendered by WP's Details block.
 * Stacks borrow the dotted-rule treatment so a series of disclosures
 * reads as a connected list. JS in footer.php makes them exclusive
 * (opening one closes its siblings). */
.tbl-single-body details,
.tbl-page-body details {
	border-top: 1px solid var(--color-rule);
	margin: 0;
}
.tbl-single-body details + details,
.tbl-page-body details + details { margin-top: 0; }
.tbl-single-body details:last-of-type,
.tbl-page-body details:last-of-type { border-bottom: 1px solid var(--color-rule); }
.tbl-single-body summary,
.tbl-page-body summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	color: var(--color-ink);
	transition: color .15s ease;
}
.tbl-single-body summary::-webkit-details-marker,
.tbl-page-body summary::-webkit-details-marker { display: none; }
.tbl-single-body summary::marker,
.tbl-page-body summary::marker { display: none; }
.tbl-single-body summary::after,
.tbl-page-body summary::after {
	content: "▾";
	font-size: 16px;
	color: var(--color-muted);
	flex-shrink: 0;
	transition: transform .2s ease;
}
.tbl-single-body details[open] > summary::after,
.tbl-page-body details[open] > summary::after { transform: rotate(180deg); }
.tbl-single-body summary:hover,
.tbl-single-body summary:focus-visible,
.tbl-page-body summary:hover,
.tbl-page-body summary:focus-visible {
	color: var(--color-red);
	outline: none;
}
.tbl-single-body details > *:not(summary),
.tbl-page-body details > *:not(summary) {
	margin-top: 0;
	padding-bottom: 18px;
}
.tbl-single-body details > *:first-of-type:not(summary),
.tbl-page-body details > *:first-of-type:not(summary) { padding-top: 4px; }

/* Action list (home.php / archive.php) */
.tbl-action-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 32px;
}
.tbl-action-row {
	display: grid;
	gap: 18px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 600px) {
	.tbl-action-row {
		grid-template-columns: 200px 1fr;
		gap: 28px;
	}
}
.tbl-action-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-paper-2);
}
.tbl-action-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.02);
}
.tbl-action-thumb--placeholder {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--color-paper-2) 0%, #DCD0AC 100%);
}
.tbl-action-thumb--placeholder svg {
	width: 40px; height: 40px;
	color: var(--color-ink-soft);
	opacity: .4;
}
.tbl-action-body { display: block; }
.tbl-action-row .tbl-action-date { margin-bottom: 8px; }
.tbl-action-row .tbl-action-title {
	font-size: 28px;
	margin-bottom: 10px;
}
.tbl-action-row .tbl-action-title a {
	color: inherit; text-decoration: none;
}
.tbl-action-row .tbl-action-title a:hover { color: var(--color-red); }
.tbl-action-row .tbl-action-excerpt { margin-bottom: 0; }

.tbl-pager {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 14px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.tbl-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1.5px solid var(--color-rule);
	color: var(--color-ink);
	border-radius: 6px;
	text-decoration: none;
}
.tbl-pager .page-numbers:hover { border-color: var(--color-red); color: var(--color-red); }
.tbl-pager .page-numbers.current {
	border-color: var(--color-ink-soft);
	background: var(--color-ink-soft);
	color: #fff;
}

/* Single Action */
.tbl-single {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px var(--gutter) 96px;
}
.tbl-single-head { margin-bottom: 24px; }
.tbl-single-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
	color: var(--color-ink);
	margin: 0 0 12px;
	text-wrap: balance;
}
.tbl-single-date {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-red);
}
.tbl-single-body {
	font-size: 18px;
	line-height: 1.7;
}
.tbl-single-body::after {
	content: "";
	display: block;
	clear: both;
}
.tbl-single-body img { margin: 1em 0; }
.tbl-single-body a { color: var(--color-red); text-decoration: none; }
.tbl-single-body a:hover { color: var(--color-ink-soft); }
.tbl-single-body iframe {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	margin: 1.25em 0;
}

/* WordPress alignment classes for editor-inserted images. Classic Editor
   and Gutenberg both apply these. Themes have to ship the styles
   themselves; without these rules, alignright/alignleft do nothing. On
   small viewports the float drops so images don't sit half-width next to
   a tiny column of text. */
.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
	max-width: 50%;
}
.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
	max-width: 50%;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignnone {
	float: none;
	display: block;
	margin: 1em 0;
}
@media (max-width: 600px) {
	.alignright, .alignleft {
		float: none;
		display: block;
		margin: 1em 0;
		max-width: 100%;
	}
}

/* Caption support — Classic Editor wraps captioned images in
   <div class="wp-caption"> with a <p class="wp-caption-text"> below. */
.wp-caption {
	max-width: 100%;
}
.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}
.wp-caption-text {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-soft);
	margin: 6px 0 0;
	text-align: center;
}

/* User-friendly polaroid class — add `polaroid` to an image's CSS Class in
   the Classic Editor (Advanced Image Settings) and the theme renders the
   same frame as the homepage polaroid: cream-white background, thin border
   on top/sides, deeper foot at the bottom, soft drop shadow, slight tilt.
   Composes with alignright/alignleft for floated polaroids. */
img.polaroid {
	background: var(--color-on-dark);
	padding: 10px 10px 40px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
	transform: rotate(1.4deg);
	box-sizing: border-box;
}

/* Featured image polaroid — frame styling mirrors src/styles/global.css
   .press-hero-photo: cream-white background, thin 10px border on top and
   sides (no foot), 1.4deg tilt, soft drop shadow. Square (1:1) photo,
   floated right at 66% on desktop with body copy wrapping the left. No
   caption. */
.tbl-feature-polaroid {
	margin: 0 0 32px;
	padding: 10px 10px 40px;
	background: var(--color-on-dark);
	transform: rotate(1.4deg);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
	max-width: 100%;
}
.tbl-feature-polaroid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: saturate(.92) contrast(1.02);
	display: block;
	margin: 0;
}
@media (min-width: 768px) {
	.tbl-feature-polaroid {
		float: right;
		width: 50%;
		max-width: 360px;
		margin: 8px 0 32px 32px;
		shape-outside: margin-box;
	}
}

.tbl-prev-next {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--color-rule);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
}
.tbl-prev-next a { color: var(--color-ink-soft); text-decoration: none; }
.tbl-prev-next a:hover { color: var(--color-red); }

/* Photos page */
.tbl-photo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}
@media (min-width: 600px) {
	.tbl-photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.tbl-photo-grid { grid-template-columns: repeat(3, 1fr); }
}
.tbl-photo {
	display: block;
	background: var(--color-paper-2);
	border: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
}
.tbl-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.02);
	transition: transform .35s ease;
}
.tbl-photo:hover img { transform: scale(1.04); }

.tbl-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(42, 24, 71, 0.92);
	display: grid;
	place-items: center;
	padding: 32px;
	z-index: 100;
}
.tbl-lightbox[hidden] { display: none; }
.tbl-lightbox-image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	display: block;
}
.tbl-lightbox-caption {
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-style: italic;
	font-size: 14px;
	margin: 16px 0 0;
	text-align: center;
}
.tbl-lightbox-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	color: var(--color-on-dark);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.tbl-lightbox-close:hover { background: rgba(255,255,255,0.1); }

/* Videos page */
.tbl-video-card {
	background: var(--color-card);
	border: 1px solid var(--color-rule);
	padding: 32px;
	border-radius: 10px;
	text-align: center;
}
.tbl-video-card p {
	font-size: 19px;
	font-style: italic;
	font-weight: 300;
	color: var(--color-text-soft);
	margin: 0 0 24px;
}

/* Latest uploads grid: 1 col on mobile, 2 from 560px, 3 from 900px. */
.tbl-video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
@media (min-width: 560px) {
	.tbl-video-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}
}
.tbl-video-item {
	display: flex;
	flex-direction: column;
}
.tbl-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-paper-2);
	border-radius: 10px;
	overflow: hidden;
}
.tbl-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.tbl-video-title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--color-ink);
	margin: 12px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tbl-video-cta {
	text-align: center;
	margin: 8px 0 0;
}

/* Callout: deep-purple block with cream text and an optional mustard
 * kicker. Use for self-contained calls to action inside page content
 * (e.g. donate forms, signup notes, members-only links). Drop a
 *   <div class="tbl-callout">
 *     <div class="tbl-kicker">…</div>   (optional — renders mustard inside)
 *     <p>…body…</p>
 *     ...form/button/etc...
 *   </div>
 * Centered with a sensible max-width by default; adjust by wrapping or
 * overriding inline if a page wants something edge-to-edge.
 */
.tbl-callout {
	background: var(--color-ink);
	color: var(--color-on-dark);
	padding: 24px 28px;
	border-radius: 10px;
	max-width: 560px;
	margin: 28px auto;
}
@media (min-width: 768px) {
	.tbl-callout {
		padding: 28px 32px;
	}
}
.tbl-callout p {
	color: var(--color-on-dark);
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 18px;
}
.tbl-callout p:last-child { margin-bottom: 0; }
.tbl-callout a {
	color: var(--color-mustard);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tbl-callout a:hover { color: #fff; }
/* Inside a callout, the shared .tbl-kicker (red on light bg) flips to
 * mustard so it has enough contrast on the dark purple. */
.tbl-callout .tbl-kicker { color: var(--color-mustard); margin-bottom: 14px; }
/* Optional display-font heading inside a callout. */
.tbl-callout-title {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.15;
	color: var(--color-on-dark);
	margin: 0 0 14px;
}

/* Buttons (used on Videos and Contact) */
.tbl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .01em;
	background: var(--color-red);
	color: #fff;
	border: 0;
	border-radius: var(--radius-pill);
	min-height: 48px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, transform .12s ease;
}
.tbl-button:hover {
	background: var(--color-ink-soft);
	color: #fff;
	transform: translateY(-1px);
}
.tbl-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.tbl-inline-link {
	color: var(--color-red);
	text-decoration: none;
}
.tbl-inline-link:hover { color: var(--color-ink-soft); }

/* Contact form */
.tbl-form {
	display: grid;
	gap: 20px;
	margin-top: 24px;
}
.tbl-field { display: block; }
.tbl-field-label {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	margin-bottom: 6px;
}
.tbl-field input,
.tbl-field textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-card);
	border: 1.5px solid var(--color-rule);
	border-radius: 6px;
	transition: border-color .15s ease;
}
.tbl-field input:focus,
.tbl-field textarea:focus {
	outline: none;
	border-color: var(--color-ink-soft);
}
.tbl-field textarea { resize: vertical; }
.tbl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tbl-form-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.tbl-form-status {
	font-family: var(--font-body);
	font-size: 14px;
	font-style: italic;
}
.tbl-form-status[data-state="ok"]    { color: #2f7a30; }
.tbl-form-status[data-state="error"] { color: var(--color-red); }
.tbl-form-status[data-state="sending"] { color: var(--color-text-soft); }

.tbl-contact-direct {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--color-rule);
	font-size: 15px;
	color: var(--color-text-soft);
}

/* 404 */
.tbl-404-links {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.tbl-404-links a {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-ink-soft);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-ink-soft);
	padding-bottom: 2px;
}
.tbl-404-links a:hover {
	color: var(--color-red);
	border-color: var(--color-red);
}

/* "More" link with arrow (used as fallback in some templates) */
.tbl-link-arrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	border-bottom: 1.5px solid var(--color-ink-soft);
	padding-bottom: 2px;
}
.tbl-link-arrow:hover { color: var(--color-red); border-color: var(--color-red); }
.tbl-more { margin-top: 32px; }

/* ==========================================================================
   Subsite-local Songs page (page-songs.php)
   ========================================================================== */
.tbl-songs-intro { margin-bottom: 32px; }

.tbl-songs-cta {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 17px;
	color: var(--color-text-soft);
	margin: 0 0 32px;
}
.tbl-songs-cta a {
	color: var(--color-red);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color .15s ease;
}
.tbl-songs-cta a:hover { border-bottom-color: var(--color-red); }

.tbl-song-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.tbl-song-row {
	border-bottom: 1px solid var(--color-rule);
}
.tbl-song-row:last-child { border-bottom: 0; }

.tbl-song-link {
	display: block;
	padding: 22px 4px;
	color: var(--color-text);
	text-decoration: none;
	transition: padding .15s ease, background .15s ease;
}
.tbl-song-link:hover, .tbl-song-link:focus-visible {
	background: rgba(87, 34, 140, 0.04);
	padding-left: 14px;
	padding-right: 14px;
	outline: none;
}
.tbl-song-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
	color: var(--color-ink);
	margin: 0 0 6px;
	transition: color .15s ease;
}
.tbl-song-link:hover .tbl-song-title,
.tbl-song-link:focus-visible .tbl-song-title { color: var(--color-red); }

.tbl-song-meta {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-soft);
	margin-bottom: 10px;
}
.tbl-song-meta em {
	color: var(--color-ink-soft);
	font-style: italic;
}
.tbl-song-excerpt {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 10px;
	max-width: 60ch;
}
.tbl-issue-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tbl-issue-chip {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(226, 42, 44, 0.08);
	color: var(--color-red);
	border: 1px solid rgba(226, 42, 44, 0.22);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
a.tbl-issue-chip:hover, a.tbl-issue-chip:focus-visible {
	background: var(--color-red);
	color: var(--color-on-dark);
}

/* Single-song page (single-song.php) */
.tbl-song-detail .tbl-page-title {
	margin-bottom: 4px;
}

.tbl-song-meta-block {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 18px 0 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--color-rule);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
}
.tbl-song-meta-item { line-height: 1.4; }
.tbl-song-meta-label {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 2px;
}
.tbl-song-meta-block a {
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.tbl-song-meta-block a:hover, .tbl-song-meta-block a:focus-visible {
	color: var(--color-red);
}
.tbl-song-meta-issues .tbl-issue-chips {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tbl-song-lyrics {
	font-family: var(--font-body);
	font-size: 19px;
	line-height: 1.6;
	color: var(--color-ink);
	white-space: pre-wrap;
	margin: 0 0 32px;
}
.tbl-song-lyrics p {
	margin: 0 0 1em;
}
.tbl-song-lyrics p:last-child { margin-bottom: 0; }
.tbl-song-lyrics em { font-style: italic; }
.tbl-song-lyrics strong { font-weight: 700; }
.tbl-song-lyrics u { text-decoration: underline; }

.tbl-song-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 0 32px;
	background: var(--color-paper-2);
}
.tbl-song-video iframe {
	width: 100%; height: 100%;
	border: 0;
	display: block;
}

.tbl-song-aside {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 0;
	margin-top: 32px;
	border-top: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
	font-family: var(--font-body);
	font-size: 14px;
}
.tbl-song-aside-link {
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.tbl-song-aside-link:hover, .tbl-song-aside-link:focus-visible {
	color: var(--color-red);
}

/* ==========================================================================
   Footer (dark, 3 columns) — values mirror src/layouts/BaseLayout.astro
   ========================================================================== */
.tbl-footer {
	background: var(--color-ink);
	color: var(--color-on-dark);
	margin-top: 96px;
}
.tbl-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 56px var(--gutter) 32px;
}
.tbl-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}
@media (min-width: 768px) {
	.tbl-footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 48px;
	}
}
.tbl-footer-brand-mark {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.tbl-footer-logo {
	display: inline-block;
	height: 54px;
	flex-shrink: 0;
}
.tbl-footer-logo svg {
	height: 100%; width: auto;
	fill: var(--color-on-dark);
	opacity: .9;
	display: block;
}
.tbl-footer-wordmark {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--color-on-dark);
}
.tbl-footer-tagline {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.625;
	color: var(--color-ink-lilac);
	margin: 0;
	max-width: 340px;
}
.tbl-footer-col h2 {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-ink-lilac);
	margin: 0 0 16px;
}
.tbl-footer-col ul {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 8px;
	font-size: 15px;
}
.tbl-footer-col a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	color: var(--color-on-dark);
	text-decoration: none;
	transition: color .15s ease;
}
.tbl-footer-col a:hover { color: var(--color-red); }
.tbl-footer-bottom {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-ink-lilac);
	letter-spacing: .04em;
}
.tbl-footer-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 12px;
	align-items: baseline;
}
.tbl-footer-meta a {
	color: var(--color-ink-lilac);
	text-decoration: none;
}
.tbl-footer-meta a:hover { color: var(--color-on-dark); }

/* Hide Videos nav link entirely when no YouTube URL is set, regardless of
   how the body class triggers it. (Server-side conditional handles desktop
   + mobile already; this is a belt for any custom-nav scenarios.) */
.tbl-no-videos .tbl-videos-link { display: none !important; }

/* ---------- text-size accessibility control ----------
   Theme uses px throughout, so html { font-size } scaling does not cascade.
   CSS zoom on <html> scales the entire UI proportionally — including text,
   spacing, and icons — which matches what readers mean by "make it bigger."
   At the highest level, viewport reflow (mobile breakpoints triggering
   earlier) is expected, like the browser's own zoom. */
html[data-text-zoom="bigger"]    { zoom: 1.1875; }
html[data-text-zoom="quite-big"] { zoom: 1.375; }

/* Boost contrast at enlarged levels: lighten lilac on dark footer surfaces,
   darken muted body copy. Readers who opt into bigger text usually benefit
   from stronger contrast too. */
html[data-text-zoom="bigger"],
html[data-text-zoom="quite-big"] {
	--color-ink-lilac: #d0bce3;
	--color-muted:     #6e604e;
}

.tbl-text-zoom {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 50;
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	background: var(--color-card);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
}
.tbl-text-zoom-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	cursor: pointer;
	padding: 6px 10px;
	min-width: 32px;
	border-radius: var(--radius-pill);
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}
.tbl-text-zoom-btn[data-zoom="default"]   { font-size: 13px; }
.tbl-text-zoom-btn[data-zoom="bigger"]    { font-size: 16px; }
.tbl-text-zoom-btn[data-zoom="quite-big"] { font-size: 19px; }
.tbl-text-zoom-btn:hover {
	background: var(--color-paper-2);
}
.tbl-text-zoom-btn:focus-visible {
	background: var(--color-paper-2);
	outline: 2px solid var(--color-ink-soft);
	outline-offset: 2px;
}
.tbl-text-zoom-btn[aria-pressed="true"] {
	background: var(--color-ink);
	color: var(--color-on-dark);
}
@media print {
	.tbl-text-zoom { display: none; }
}