/*
Theme Name: SSB Base
Theme URI: https://supersitebros.com/ssb-base
Author: Super Site Bros
Description: The Super Site Bros base theme. A block theme whose design lives entirely in theme.json tokens, so a client build is a token override rather than a fork. Light by default.
Version: 0.16.3
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssb-base
Tags: block-theme, full-site-editing, light, accessibility-ready
*/

/*
 * Everything visual is defined in theme.json. This file exists for the theme
 * header and for the handful of things tokens cannot express.
 */

/* ==========================================================================
   Sticky header and parallax

   Behaviour, not visual language. Everything else in this file that
   predated the approved design has been removed: it defined a second,
   centred design system whose rules were still winning over this one on
   specificity, which is what produced the misaligned headings and the
   cropped hero.

   Locked to the top. The emblem is hidden while the hero is on screen — the
   hero already carries a large one — and slides in once you scroll past it,
   which is how the original behaved.
   ========================================================================== */

.ssb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.ssb-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--ink);
}

/* Brand left, nav and Donate right — the design's header. Stated here as well
   as on the block's flex layout so the result does not depend on whether the
   theme stylesheet or core's layout styles are printed last. `center` was a
   survivor of the centred design and put the whole bar in the middle. */
.ssb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.75rem, 2vw, 2.25rem);
	min-height: 76px;
	padding-block: 0.5rem;
}



.ssb-header .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	/* The design sets .22em here; 0.02em was closing the nav up to almost
	   nothing and is the main reason the bar read as the wrong typeface. */
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ssb-header .wp-block-navigation a:hover { color: var(--wp--preset--color--engine); }

/*
 * The current page is not red text. The design keeps the label in ink and marks
 * it with a 2px red bar underneath — the same bar the hover animates in, held
 * open. aria-current is what core actually emits, and it does not fire on items
 * that merely share an ancestor, which is why Home was reading as current on
 * every page.
 */
.ssb-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--ink); }
.ssb-header .wp-block-navigation a[aria-current="page"]::after { width: 100%; }

/* Design: 14px 22px at 13px, not 11px in a smaller box. Applies to any header
   button so a customised header part without the cta class matches too; the
   label must never wrap, however tight the bar gets. */
.ssb-header__cta .wp-block-button__link,
.ssb-header .wp-block-buttons .wp-block-button__link {
	padding: 0.875rem 1.375rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.2em;
	white-space: nowrap;
}

/* Tablet range: the full-tracking bar is wider than the viewport, so the nav
   wrapped one item onto a second row and the brand broke "Est. 2005" onto a
   third. Compress tracking, gaps and the button until everything holds one
   row; the brand lines may never wrap.

   The !important here is not optional. Core emits the navigation's stored
   blockGap as a doubled-class container rule (.wp-container-X.wp-container-X,
   0-2-0) that outranks any sane theme selector, and on this site the header
   is a frozen Site Editor customisation whose emissions cannot be edited
   away. The gap lands on the nav element and reaches the item <ul> through
   core's own gap:inherit; the <ul> also gets its wrap forbidden, which is
   the actual "menu splits onto two rows" failure. */
@media (min-width: 861px) and (max-width: 1200px) {
	.ssb-header .ssb-header__inner { gap: 1rem; }
	.ssb-header .ssb-header__right { gap: 1rem; }
	.ssb-header .wp-block-navigation { gap: 0.875rem !important; }
	.ssb-header .wp-block-navigation__container,
	.ssb-header .wp-block-navigation__responsive-container-content {
		gap: 0.875rem !important;
		flex-wrap: nowrap !important;
	}
	.ssb-header .wp-block-navigation a,
	.ssb-header .wp-block-navigation .wp-block-navigation-item__content {
		letter-spacing: 0.1em !important;
		font-size: 0.8125rem !important;
		white-space: nowrap;
	}
	header.ssb-header .wp-block-buttons .wp-block-button__link {
		padding: 0.75rem 1rem;
		letter-spacing: 0.12em;
	}
	.ssb-brand .ssb-brand__name { font-size: 0.9375rem !important; }
	.ssb-brand .ssb-brand__sub { font-size: 0.6875rem !important; }
}

.ssb-brand__name,
.ssb-brand__name a,
.ssb-brand__sub { white-space: nowrap !important; }

@media (max-width: 860px) {
	/* Any buttons block in the header, not just .ssb-header__cta: a header
	   customised in the Site Editor before that class existed is served from
	   the database with its Donate button unclassed, and it was rendering as
	   a squeezed column of letters on phones. */
	.ssb-header__cta,
	.ssb-header .wp-block-buttons { display: none; }
	.ssb-header .wp-block-navigation { font-size: var(--wp--preset--font-size--x-small); }

	/* The same compression as the tablet tier: small tablets still show the
	   expanded nav (core's overlay menu takes over further down), and at full
	   tracking it wrapped a second row. Same doubled-class story as above. */
	.ssb-header .wp-block-navigation { gap: 0.875rem !important; }
	.ssb-header .wp-block-navigation__container,
	.ssb-header .wp-block-navigation__responsive-container-content {
		gap: 0.875rem !important;
		flex-wrap: nowrap !important;
	}
	.ssb-header .wp-block-navigation a,
	.ssb-header .wp-block-navigation .wp-block-navigation-item__content {
		letter-spacing: 0.1em !important;
		font-size: 0.6875rem !important;
		white-space: nowrap;
	}
	.ssb-brand .ssb-brand__name { font-size: 0.9375rem !important; }
	.ssb-brand .ssb-brand__sub { font-size: 0.6875rem !important; }
}

/* ==========================================================================
   Parallax
   ========================================================================== */

.ssb-parallax .wp-block-cover__image-background {
	/* Only just enough overscan to cover the parallax travel. 1.18 cropped
	   heads out of the hero; 1.09 with a higher focal point keeps faces in. */
	transform: scale(1.09);
	transform-origin: center top;
	object-position: center top;
	will-change: transform;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ssb-parallax .wp-block-cover__image-background { transform: none !important; }
	.ssb-header { transition: none !important; }
}

/* ==========================================================================
   0.5.0 — typography guards, footer, and motion
   ========================================================================== */

/* Headings must never break mid-word. WordPress core sets overflow-wrap:
   break-word broadly, which is what produced "COMMUNIT / Y". Fluid sizes in
   theme.json shrink the type instead of fracturing it. */

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	text-wrap: balance;
}

.ssb-hero h1,
.ssb-pagehero .wp-block-post-title,
.ssb-band h2 { text-wrap: balance; }

/* Display face is condensed and reads tight in caps; give it a little air. */
.wp-block-heading { letter-spacing: 0.01em; }

/* --- Footer -------------------------------------------------------------- */

.ssb-footer,
footer.wp-block-group.has-ink-background-color { color: rgba(255, 255, 255, 0.72); }

footer.wp-block-group.has-ink-background-color h1,
footer.wp-block-group.has-ink-background-color h2,
footer.wp-block-group.has-ink-background-color h3,
footer.wp-block-group.has-ink-background-color h4 { color: #fff; }

footer.wp-block-group.has-ink-background-color a { color: rgba(255, 255, 255, 0.78); }
footer.wp-block-group.has-ink-background-color a:hover { color: #fff; }

/* ==========================================================================
   Motion — the interaction polish a Divi build gets for free
   ========================================================================== */

/* Scroll reveal */
.ssb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssb-reveal.is-in { opacity: 1; transform: none; }

/* Cards lift, and the photograph pushes in slightly behind them */
.ssb-card { position: relative; overflow: hidden; }

.ssb-card .wp-block-image { overflow: hidden; }

.ssb-card img {
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssb-card:hover { border-color: var(--wp--preset--color--engine); }
.ssb-card:hover img { transform: scale(1.06); }

/* Framed photo gains depth on hover */
.ssb-framed { transition: border-color 0.4s ease; }
.ssb-framed:hover { border-color: var(--wp--preset--color--engine); }

/* Buttons */
.wp-block-button__link {
	transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--engine-deep);
}

/* Nav underline */
.ssb-header .wp-block-navigation a {
	position: relative;
	padding-block: 0.35rem;
	transition: color 0.2s ease;
}

.ssb-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--engine);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssb-header .wp-block-navigation a:hover::after { width: 100%; }

/* Staff portraits */
.ssb-person__photo img,
.sfc-staff__photo img { transition: transform 0.45s ease; }
.ssb-person:hover .ssb-person__photo img,
.sfc-staff__card:hover .sfc-staff__photo img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.ssb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ssb-card, .ssb-card img, .ssb-framed, .wp-block-button__link,
	.ssb-person__photo img, .sfc-staff__photo img { transition: none !important; }
	.ssb-card:hover, .ssb-framed:hover, .wp-block-button__link:hover { transform: none !important; }
}


/* ==========================================================================
   0.6.0 — approved design: flush-left, 2px rules, nothing floats.
   Every value resolves to a theme.json preset.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.ssb-header__inner { min-height: 80px; gap: 32px; }

.ssb-brand { gap: 0.875rem; align-items: center; }
.ssb-brand__crest { margin: 0; flex: none; }
.ssb-brand__crest img { width: 58px; height: 56px; object-fit: contain; display: block; }
.ssb-brand__words { gap: 0; line-height: 1.05; }

.ssb-brand__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ssb-brand__name a { color: var(--wp--preset--color--ink); text-decoration: none; }

.ssb-brand__sub {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.ssb-header__right { gap: 38px; align-items: center; }
.ssb-header .wp-block-navigation { gap: 34px; }

/* --- Stat row ----------------------------------------------------------- */
.ssb-statrow__grid { gap: 0; }

.ssb-stat {
	padding: 2.375rem 1.75rem;
	border-right: 2px solid var(--ssb-on-ink-faint, rgba(255, 255, 255, 0.16));
}

.ssb-stat:first-child { padding-left: 0; }
.ssb-stat--last { border-right: 0; padding-right: 0; }

.ssb-stat__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 2.375rem;
	line-height: 1;
}

.ssb-stat__label {
	margin: 0.625rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ssb-on-ink-soft, rgba(255, 255, 255, 0.6));
}

/* --- Section furniture -------------------------------------------------- */
.ssb-section--ruled { border-top: 2px solid var(--wp--preset--color--ink); }

.ssb-kicker { margin: 0 0 1.125rem; color: var(--wp--preset--color--engine); }

.ssb-lede { max-width: 56ch; }

.ssb-rule {
	margin: 2rem 0;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--ink);
	opacity: 1;
}

/* --- Hero --------------------------------------------------------------- */
.ssb-hero .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
	padding: 300px 32px 68px;
}
.ssb-hero__title { margin: 0 0 var(--wp--preset--spacing--30); max-width: 18ch; }
.ssb-hero__lede { max-width: 56ch; margin: 0; }
/* The poster bands run at the design's own display sizes. These were on the
   x-large/xx-large presets — 25px and 62px tops — which core emits with
   !important, so the presets are off the patterns and the clamps live here. */
.ssb-band__line,
.ssb-band .ssb-band__line {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(38px, 5.2vw, 84px) !important;
	line-height: 0.98;
}

/*
 * The band must be tall enough to hold the crew. The photograph is 4:3 and
 * full-bleed, so at viewport width vw it displays 0.75vw tall, and the crew
 * occupies 35%-78% of that — about 0.32vw of screen height. A padding-sized
 * band (~410px) can only ever show a third of the image, which is why heads
 * were clipping at every crop. 36vw covers the crew with headroom at any
 * width; the 560px floor keeps the band imposing on laptops, where cover
 * flips to cropping the sides instead and the full crew height is visible.
 *
 * No parallax here: the design moves only the hero, and the zoom-and-drift
 * treatment was spending exactly the headroom the crew needs.
 */
.ssb-band.wp-block-cover { min-height: max(560px, 36vw); }

/*
 * Framed on the crew — the people sit in the lower half of the source, so a
 * center-top crop showed only the storefront ceiling. And printed in black
 * and white under the scrim, per the design's own hardcoded treatment for
 * this band and at the client's request: the source is an AI upscale and
 * grayscale softens the warped faces.
 */
.ssb-band .wp-block-cover__image-background {
	object-position: center 60%;
	/* The blur softens the AI-upscaled faces further; the slight scale hides
	   the transparent fringe a blur leaves at the image edges. */
	filter: grayscale(1) contrast(1.1) blur(3px);
	transform: scale(1.03);
}

.ssb-band .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
	padding: 130px 32px;
}

/* --- Cards -------------------------------------------------------------- */
.ssb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

.ssb-card {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
}

.ssb-card figure { margin: 0; overflow: hidden; }

.ssb-card img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

/* The design's card body is a flex column: 12px between rows and the trailing
   action pushed to the bottom edge so cards of different copy lengths still
   line their links up. Without display:flex the gap above was inert and the
   rows fell back to default block margins. */
.ssb-card__body {
	padding: 1.625rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

/* Trailing card action, pinned to the foot of the body. */
.ssb-more--foot { margin-top: auto; padding-top: 1.125rem; }

.ssb-card__kicker {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--engine);
}

/* --- Framed photograph -------------------------------------------------- */
.ssb-framed {
	border: 2px solid var(--wp--preset--color--ink);
	padding: 0.875rem;
	background: var(--wp--preset--color--base);
	margin: 0;
}

.ssb-framed img { display: block; width: 100%; }

/* The design crops the mission photograph to a fixed 520px band rather than
   letting it run at its natural ratio, which is what balances it against the
   copy column beside it. */
.ssb-framed--tall img { height: 520px; object-fit: cover; }

/* Photography runs in colour everywhere. No filter is applied to any image. */

/* --- Buttons ------------------------------------------------------------ */
/* Labels are flush left: a button wider than its label starts at the padding
   edge, with the arrow pushed to the far end. Never centred. */
.ssb-btn .wp-block-button__link { display: inline-flex; align-items: center; }

.ssb-btn--wide .wp-block-button__link { min-width: 250px; justify-content: space-between; }

/* The design's footer button fills its column, label left and arrow at the
   far edge. The link alone can't do that — .wp-block-button wrappers are
   content-sized inside the buttons flex row — so the wrapper stretches too. */
.ssb-btn--block { width: 100%; }
.ssb-btn--block .wp-block-button__link { display: flex; justify-content: space-between; }

/* An outlined button's 2px border must not make it taller than the filled
   button standing next to it. */
.ssb-btn.is-style-outline .wp-block-button__link {
	padding: calc(1.1875rem - 2px) calc(1.5rem - 2px);
}

.ssb-btn--arrow .wp-block-button__link::after {
	content: "\2192";
	font-family: var(--wp--preset--font-family--display);
	margin-left: 1.25rem;
}

.ssb-btn--ink .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: transparent;
}

.ssb-btn--ink .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.ssb-btn--onphoto .wp-block-button__link { border: 2px solid var(--wp--preset--color--base); }

.ssb-btn--onphoto .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.ssb-btn--onred .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.ssb-btn--onred .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.ssb-btn--underline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	border-bottom: 2px solid var(--wp--preset--color--engine);
}

.ssb-btn--underline .wp-block-button__link:hover { color: var(--wp--preset--color--engine); }

/* --- Poster close ------------------------------------------------------- */
.ssb-poster__title,
.ssb-section .ssb-poster__title, .has-engine-background-color .ssb-poster__title {
	max-width: 16ch;
	font-size: clamp(40px, 5vw, 78px) !important;
	line-height: 0.98;
}
.ssb-poster__body { max-width: 52ch; margin-top: var(--wp--preset--spacing--30); }

/* --- Footer ------------------------------------------------------------- */
.ssb-hatch {
	height: 10px;
	opacity: 0.5;
	background-image: repeating-linear-gradient(45deg,
		var(--wp--preset--color--base) 0 1px, transparent 1px 7px);
}

.ssb-footer__grid {
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 3rem;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.ssb-footer__mark { gap: 0.875rem; align-items: center; }
/* A 56px white square with the 50x48 mark centred inside it, per the design —
   not a 56px mark with padding pushing the square out to 62px. */
/* The design export sets a white plate behind the footer crest; the client
   prefers the transparent emblem sitting directly on the dark footer, so the
   plate is gone and the mark fills its 56px footprint. */
.ssb-footer__crest {
	margin: 0;
	width: 56px;
	height: 56px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ssb-footer__crest img { width: 56px; height: 56px; object-fit: contain; display: block; }

.ssb-footer__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ssb-footer__blurb {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 36ch;
	color: rgba(255, 255, 255, 0.62);
}

.ssb-footer__label {
	margin: 0 0 1.125rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.ssb-footer__lines { margin: 0; color: rgba(255, 255, 255, 0.8); line-height: 1.9; }
.ssb-footer__cta { margin-top: 1.625rem; }

.ssb-footer__base {
	padding: 1.625rem 0 2.75rem;
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.ssb-footer__base p { margin: 0; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.ssb-cards { grid-template-columns: repeat(2, 1fr); }
	.ssb-footer__grid { grid-template-columns: 1fr 1fr; }
	.ssb-statrow__grid { grid-template-columns: repeat(2, 1fr); }
	.ssb-stat:nth-child(2) { border-right: 0; padding-right: 0; }
	.ssb-stat:nth-child(3) { padding-left: 0; }
}

@media (max-width: 700px) {
	.ssb-cards,
	.ssb-footer__grid,
	.ssb-statrow__grid { grid-template-columns: 1fr; }
	.ssb-stat { border-right: 0; padding-left: 0; padding-right: 0; }

	/* Full-width buttons on phones. min-width:100% on the link was a no-op —
	   a percentage against the content-sized .wp-block-button wrapper — which
	   also cancelled the 250px floor, so "Donate now" and "Upcoming events"
	   stacked at two different content widths. The wrapper is what must span
	   the row; the link then fills it with the arrow pushed to the far edge. */
	.ssb-btn--wide { width: 100%; }
	.ssb-btn--wide .wp-block-button__link {
		display: flex;
		width: 100%;
		min-width: 0;
		justify-content: space-between;
	}
}

/* On the narrowest phones the .2em tracking makes "UPCOMING EVENTS" wrap,
   leaving stacked buttons at unequal heights. Tighter tracking and padding
   keep every label on one line. */
@media (max-width: 360px) {
	.ssb-btn .wp-block-button__link {
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		padding-left: 1.125rem;
		padding-right: 1.125rem;
	}
	.ssb-btn.is-style-outline .wp-block-button__link {
		padding-left: calc(1.125rem - 2px);
		padding-right: calc(1.125rem - 2px);
	}
}


/* ==========================================================================
   0.8.0 — 1:1 pass against the approved design.
   Values below are the design's own, converted at a 16px root.
   ========================================================================== */

/* --- Letterpress -------------------------------------------------------- */
/* The design offsets display type against a hard shadow: a solid dark stamp on
   photographs, a white-then-grey stamp on the light ground. */
.ssb-letterpress,
.ssb-hero .wp-block-heading,
.ssb-band__line,
.ssb-pagehero .wp-block-heading { text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85); }

.ssb-letterpress-light { text-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(0, 0, 0, 0.18); }

@media (prefers-reduced-transparency: reduce) {
	.ssb-letterpress, .ssb-letterpress-light { text-shadow: none; }
}

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

/* --- Inner-page hero ---------------------------------------------------- */
.ssb-pagehero { min-height: 0; }

.ssb-pagehero .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
	padding: 7.5rem 32px 5.625rem;
}

/* Contact's hero is 118/88 in the design, two pixels off the generic page hero
   it otherwise shares. */
.ssb-contacthero .wp-block-cover__inner-container {
	padding-top: 118px;
	padding-bottom: 88px;
}

.ssb-dashkicker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.38em;
	text-transform: uppercase;
}

.ssb-dashkicker::before {
	content: "";
	flex: none;
	width: 44px; height: 2px;
	background: var(--wp--preset--color--engine);
}

/* --- Rules -------------------------------------------------------------- */
.ssb-rule--flush { margin-bottom: 0; }

.ssb-rule--soft {
	margin: 1.625rem 0;
	border-top-color: var(--wp--preset--color--line-soft);
}

/* --- President letter --------------------------------------------------- */
.ssb-framed--portrait { padding: 0.75rem; }
.ssb-framed--portrait img { height: 400px; object-fit: cover; object-position: 50% 18%; }

.ssb-regcard { margin-top: 1.25rem; padding: 1.625rem; border: 2px solid var(--wp--preset--color--ink); }

.ssb-regcard__label {
	margin: 0;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--ssb-on-ink-soft, rgba(255, 255, 255, 0.6));
}

.ssb-regcard__name {
	margin: 0.625rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.25rem;
	text-transform: uppercase; line-height: 1.3;
}

.ssb-regcard__addr {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem; line-height: 1.6;
	color: var(--ssb-on-ink, rgba(255, 255, 255, 0.75));
}

.ssb-signoff {
	margin-top: 2.25rem; padding-top: 1.625rem;
	border-top: 2px solid var(--wp--preset--color--ink);
	gap: 0.5rem 1.75rem; align-items: baseline;
}

.ssb-signoff__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.375rem;
	text-transform: uppercase; letter-spacing: 0.04em;
}

.ssb-signoff__role {
	margin: 0;
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase;
}

/* --- Staff -------------------------------------------------------------- */
.ssb-staff { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }

.ssb-person { padding: 2rem 1.5rem; border-right: 2px solid var(--wp--preset--color--ink); }
.ssb-person:first-child { padding-left: 0; }
.ssb-person--last { border-right: 0; padding-right: 0; }

.ssb-person__photo { margin: 0; }

.ssb-person__photo img {
	display: block; width: 100%; max-width: 132px; height: auto;
	aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%;
}

.ssb-person__name {
	margin: 1.125rem 0 0;
	font-size: 1.125rem; letter-spacing: 0.03em;
}

.ssb-person__role {
	margin: 0.375rem 0 0;
	font-size: 0.6875rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.ssb-person__role--lead { color: var(--wp--preset--color--engine); }

/* --- Three pillars ------------------------------------------------------ */
.ssb-pillars {
	gap: 0;
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.ssb-pillar { padding: 2.75rem 2.125rem; border-right: 2px solid var(--wp--preset--color--ink); }
.ssb-pillar:first-child { padding-left: 0; }
.ssb-pillar--last { border-right: 0; padding-right: 0; }

.ssb-pillar__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 0.9375rem;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--engine);
}

.ssb-pillar__title { margin: 0.875rem 0 0; font-size: 1.5rem; }
.ssb-pillar__body { margin: 0.75rem 0 0; line-height: 1.65; }

/* --- Contact ------------------------------------------------------------ */
.ssb-infocard { border: 2px solid var(--wp--preset--color--ink); padding: 1.875rem; }

.ssb-infocard__label {
	margin: 0;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.ssb-infocard__value {
	margin: 0.625rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; font-size: 1.25rem;
	word-break: break-word;
}

.ssb-infocard__addr { margin: 0.625rem 0 0; font-size: 1.0625rem; line-height: 1.65; }
.ssb-infocard__social { margin-top: 0.875rem; }

.ssb-btn--chip .wp-block-button__link {
	padding: 0.625rem 1rem;
	font-size: 0.75rem;
}

.ssb-findus {
	margin-top: 1.5rem;
	border: 2px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface-deep);
	background-image:
		repeating-linear-gradient(0deg, var(--ssb-shade, rgba(26, 26, 26, 0.08)) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, var(--ssb-shade, rgba(26, 26, 26, 0.08)) 0 1px, transparent 1px 34px);
	padding: 1.625rem;
	min-height: 230px;
	display: flex; flex-direction: column; justify-content: space-between;
}

.ssb-findus__place {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.375rem;
	text-transform: uppercase; line-height: 1.3;
}

.ssb-formslot {
	border: 2px dashed var(--wp--preset--color--line-soft);
	padding: 1.25rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.9375rem;
}

/* Form fields are rules, not boxes — no fill, no border but the baseline. */
.ssb-contact input[type="text"],
.ssb-contact input[type="email"],
.ssb-contact textarea {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: transparent;
	padding: 0.75rem 0.125rem;
	font-size: 1.125rem;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	width: 100%;
}

.ssb-contact label {
	display: flex; flex-direction: column; gap: 0.625rem;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.ssb-contact form { display: flex; flex-direction: column; gap: 2.125rem; }

/* --- Poster split ------------------------------------------------------- */
.ssb-kicker--onred { color: rgba(255, 255, 255, 0.75); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.ssb-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssb-person { border-right: 0; padding-left: 0; padding-right: 0; }
	.ssb-pillars { grid-template-columns: 1fr; }
	.ssb-pillar { border-right: 0; padding-left: 0; padding-right: 0; }
	.ssb-pagehero .wp-block-cover__inner-container { padding-top: 5rem; padding-bottom: 4rem; }
}

@media (max-width: 700px) {
	/* Two-up on phones, per the client: the portraits are small (132px wide
	   by design), so a single column left a row of mostly empty width. */
	.ssb-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
	.ssb-letterpress { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85); }
}


/* --- Event archive and single ------------------------------------------- */
.ssb-archhero .ssb-lede { max-width: 56ch; color: rgba(255, 255, 255, 0.78); }



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

.ssb-eventaside { position: sticky; top: 6rem; align-self: start; }

.ssb-noresults {
	border: 2px solid var(--wp--preset--color--ink);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}


@media (max-width: 782px) {
	.ssb-eventaside { position: static; }
}

/* The design sets the hero lede at 20px, one step above body copy. */
.ssb-hero__lede { font-size: 1.25rem; line-height: 1.65; }

/* --- The four drives ----------------------------------------------------- */
/* Not cards. The design draws this the way it draws the stat row and the staff
   row: four open cells on the page ground, divided by 2px vertical rules, with
   the outer cells flush to the container edge. Nothing is boxed and nothing
   floats, so the grid itself does the organising. */

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

.ssb-drive {
	padding: 2.125rem 1.875rem;
	border-right: 2px solid var(--wp--preset--color--ink);
}

.ssb-drive:first-child { padding-left: 0; }
.ssb-drive--last { border-right: 0; padding-right: 0; }

.ssb-drive__photo { margin: 0; }

.ssb-drive__photo img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.ssb-drive__num {
	margin: 1.375rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--engine);
}

.ssb-drive__title { margin: 0.5rem 0 0; font-size: 1.4375rem; letter-spacing: 0.02em; }
.ssb-drive__body { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; }

/* The section head is a baseline-aligned row: heading left, "All events" right. */
.ssb-sectionhead { gap: 2.5rem; align-items: flex-end; }

@media (max-width: 1180px) {
	.ssb-drives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssb-drive:nth-child(2) { border-right: 0; padding-right: 0; }
	.ssb-drive:nth-child(3) { padding-left: 0; }
}

@media (max-width: 700px) {
	.ssb-drives { grid-template-columns: 1fr; }
	.ssb-drive { border-right: 0; padding-left: 0; padding-right: 0; }
}

/* The Events hero source is 960px wide, so it is kept shorter than the home
   hero rather than being scaled up past its native resolution. */
.ssb-archhero { min-height: 0; }
.ssb-archhero .wp-block-cover__inner-container { padding-top: 104px; padding-bottom: 84px; }
.ssb-archhero .ssb-lede { max-width: 56ch; color: rgba(255, 255, 255, 0.78); }

/* --- About close / Contact hero ----------------------------------------- */
.ssb-workband { min-height: 0; }
.ssb-workband .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
	padding: 7.5rem 32px;
}
.ssb-workband__row { gap: 3rem; align-items: flex-end; }
.ssb-workband__title,
.ssb-workband .ssb-workband__title {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(34px, 4.4vw, 68px) !important;
	line-height: 1;
}

.ssb-volband__title,
.ssb-poster .ssb-volband__title {
	font-size: clamp(36px, 4.6vw, 72px) !important;
	line-height: 1;
}

/* --- Events archive: featured, past list -------------------------------- */
.ssb-featured__inner { border: 2px solid var(--wp--preset--color--ink); gap: 0; }

/* The design gives the photograph column a 400px floor and lets the image fill
   it, rather than letting a ratio decide the height of the whole card. */
.ssb-featured__inner > .wp-block-column:first-child { min-height: 400px; }
.ssb-featured__inner figure { margin: 0; height: 100%; }
.ssb-featured__inner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssb-featured__body { padding: 2.125rem; }

.ssb-chip {
	display: inline-block;
	margin: 0 0 0.875rem;
	padding: 0.375rem 0.75rem;
	border: 2px solid var(--wp--preset--color--ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ssb-chip--featured {
	background: var(--wp--preset--color--engine);
	border-color: var(--wp--preset--color--engine);
	color: var(--wp--preset--color--base);
}

.ssb-past { border-top: 2px solid var(--wp--preset--color--ink); padding-top: var(--wp--preset--spacing--40); }

/* The design rules this as a four-column table, not a flex row: a fixed date
   column, the title taking the slack, the place, then the arrow at the far end
   so every arrow lines up down the list. */
.ssb-pastrow {
	display: grid;
	grid-template-columns: 180px 1fr 160px 40px;
	gap: 1.5rem;
	align-items: center;
	padding: 1.625rem 0;
	border-bottom: 2px solid var(--wp--preset--color--line-soft);
}

.ssb-pastrow:hover { background: rgba(193, 18, 28, 0.06); }

.ssb-pastrow__title { margin: 0; font-size: 1.3125rem; }
.ssb-pastrow__title a { text-decoration: none; }

/* The date and place run at their list weight here, not the card treatment. */
.ssb-pastrow .ssb-event-when {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.ssb-pastrow .ssb-event-where { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; }

.ssb-pastrow__go {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	text-align: right;
}

@media (max-width: 900px) {
	.ssb-pastrow { grid-template-columns: 1fr auto; gap: 0.5rem 1rem; }
	.ssb-pastrow__title { grid-column: 1 / -1; order: -1; }
	.ssb-pastrow__go { display: none; }
}

/* --- Single event -------------------------------------------------------- */
.ssb-backlink {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ssb-backlink a { color: var(--wp--preset--color--ink-muted); text-decoration: none; }
.ssb-backlink a:hover { color: var(--wp--preset--color--engine); }

.ssb-chiprow { gap: 0.625rem; margin-bottom: 0.5rem; }
.ssb-chiprow .ssb-chip a { color: inherit; text-decoration: none; }

.ssb-postmeta {
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.ssb-share {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--wp--preset--color--ink);
	gap: 1.25rem;
	align-items: center;
}

.ssb-share__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

@media (max-width: 782px) {
	.ssb-featured__inner { flex-wrap: wrap; }
	.ssb-featured__body { padding: 1.5rem; }
}

/* --- Read-more links in event loops -------------------------------------- */
/* These are wp:read-more blocks: real per-post links, replacing buttons that
   pointed at "#". Styled to match the solid and underline button variants. */
.ssb-more {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.ssb-more--solid {
	min-width: 250px;
	margin-top: var(--wp--preset--spacing--30);
	padding: 1.1875rem 1.5rem;
	background: var(--wp--preset--color--engine);
	color: var(--wp--preset--color--base);
}

.ssb-more--solid:hover { background: var(--wp--preset--color--engine-deep); color: var(--wp--preset--color--base); }

.ssb-more--underline {
	padding: 0.25rem 0.125rem;
	color: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--engine);
}

.ssb-more--underline:hover { color: var(--wp--preset--color--engine); }

/* The framed treatment applies directly to the featured-image block now. */
figure.wp-block-post-featured-image.ssb-framed {
	border: 2px solid var(--wp--preset--color--ink);
	padding: 0.875rem;
	background: var(--wp--preset--color--base);
}

figure.wp-block-post-featured-image.ssb-framed img {
	display: block;
	width: 100%;
	height: min(560px, 52vw);
	object-fit: cover;
}

/* --- Hero legibility tint ------------------------------------------------ */
/* The gradient scrims are baked into the (sometimes frozen) markup, so the
   extra darkening lives on the photograph itself: a uniform dim under the
   scrim that lifts the white type everywhere, including the bright sky and
   shirt areas the gradients don't reach. Filter, not an overlay layer, so it
   composes cleanly with the parallax transform and cover stacking. */
.ssb-hero .wp-block-cover__image-background,
.ssb-pagehero .wp-block-cover__image-background,
.ssb-archhero .wp-block-cover__image-background {
	filter: brightness(0.78) saturate(0.94);
}

/* --- Hero crop ----------------------------------------------------------- */
/* The design centers every page-hero photograph (plain object-fit: cover, no
   object-position). These bands are far wider than they are tall, so a
   top-anchored crop shows mostly sky and cuts the crews off at the bottom. */
.ssb-pagehero .wp-block-cover__image-background,
.ssb-archhero .wp-block-cover__image-background { object-position: center; }

/* Per-photo tuning: the Events tent photograph and the Contact crew
   photograph both carry their faces in the upper third, so their crops sit
   above true center to keep every face inside the band. */
.ssb-archhero .wp-block-cover__image-background { object-position: center 22%; }
.ssb-contacthero .wp-block-cover__image-background { object-position: center 42%; }

/* --- Home hero parallax -------------------------------------------------- */
/*
 * The design's own treatment: the photograph is anchored to the top of the
 * frame and is 128% of its height, and it translates *downwards* at 0.34x the
 * scroll. So the first thing you see is the top of the image, and it then lags
 * behind the page as you scroll.
 *
 * The overscan and the factor are a pair: because 0.34 < 1 the image's top edge
 * always moves down more slowly than the frame moves up, so it can never expose
 * a gap above it, and the extra 28% guarantees the bottom stays covered.
 */
.ssb-hero .wp-block-cover__image-background {
	top: 0;
	bottom: auto;
	height: 128%;
	object-position: center top;
	will-change: transform;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ssb-hero .wp-block-cover__image-background {
		transform: none !important;
		height: 100%;
	}
}

/* hero.php deliberately carries no minHeight attribute: an inline
   style="min-height:86vh" from the block beat this rule, so the design's height
   never applied. Leave the attribute off and let this govern. */
.ssb-hero.wp-block-cover {
	min-height: min(860px, 92vh);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

/* Portrait tablets: the full 860px desktop height against a ~800-1100px width
   crops the 4:3 photograph to a near-square of giant faces. A shorter band
   keeps the group shot a group shot. */
@media (min-width: 783px) and (max-width: 1100px) {
	.ssb-hero.wp-block-cover { min-height: min(640px, 80vh); }
}

@media (max-width: 782px) {
	.ssb-hero.wp-block-cover { min-height: min(620px, 78vh); }
}

/* --- Footer columns ------------------------------------------------------ */
.ssb-footer__brand { max-width: 30ch; }
.ssb-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.ssb-footer__social { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }

/* ==========================================================================
   Sections butt against each other

   Core puts one block gap between the root blocks (header part, main, footer
   part) and between the sections inside main. Every section here is full-bleed
   and carries its own padding, so those gaps render as white bands — the strip
   between the hero and the stat row was the visible one. Scoped to .alignfull
   so ordinary flowing content inside a page keeps its rhythm.
   ========================================================================== */

.wp-site-blocks > * { margin-block-start: 0; }

main.wp-block-group > .alignfull { margin-block-start: 0; }

/* ==========================================================================
   Core flow-layout margins inside containers this stylesheet lays out itself

   Every wp:group with the default layout gets core's flow rule —
   `> * + * { margin-block-start: var(--wp--style--block-gap) }`. Inside a CSS
   grid that pushes every cell except the first down by one block gap, which is
   what put "Fill the Boot" a row higher than the other three drives.

   The doubled class lifts these above core's single-class rule, so the result
   does not depend on which stylesheet the page happens to print last.
   ========================================================================== */

.ssb-drives.ssb-drives > *,
.ssb-staff.ssb-staff > *,
.ssb-cards.ssb-cards > *,
.ssb-pillars.ssb-pillars > *,
.ssb-pastrow.ssb-pastrow > *,
.ssb-statrow__grid.ssb-statrow__grid > *,
.ssb-footer__grid.ssb-footer__grid > *,
/* The card's photograph sits flush against its body — it carries the 2px rule
   between them — so a block gap there is a visible seam. */
.ssb-card.ssb-card > *,
.ssb-findus.ssb-findus > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* The cells' own children carry the design's exact margins, so they are scoped
   under the cell to outrank core's flow rule rather than tie with it. */
.ssb-drive .ssb-drive__num { margin: 1.375rem 0 0; }
.ssb-drive .ssb-drive__title { margin: 0.5rem 0 0; }
.ssb-drive .ssb-drive__body { margin: 0.75rem 0 0; }

.ssb-person .ssb-person__photo { margin: 0; }
.ssb-person .ssb-person__name { margin: 1.125rem 0 0; }
.ssb-person .ssb-person__role { margin: 0.375rem 0 0; }

.ssb-stat .ssb-stat__value { margin: 0; }
.ssb-stat .ssb-stat__label { margin: 0.625rem 0 0; }

.ssb-pillar .ssb-pillar__num { margin: 0; }
.ssb-pillar .ssb-pillar__title { margin: 0.875rem 0 0; }
.ssb-pillar .ssb-pillar__body { margin: 0.75rem 0 0; }

/* The card body is a flex column with its own gap; core's margins would add to it. */
.ssb-card__body.ssb-card__body > * { margin-block-start: 0; margin-block-end: 0; }

/* ==========================================================================
   Dark mode


   The whole design flows through the theme.json colour tokens, so dark mode
   is a token flip under html[data-theme="dark"] — set by an inline script in
   wp_head before paint (no flash) and toggled by the header button ssb.js
   injects, which reaches a Site-Editor-customised header too. The choice
   persists in localStorage("ssb-theme"); the default is the light design.

   Read as an inversion of the print aesthetic: paper goes near-black, ink
   goes near-white, the 2px rules stay heavy. The engine red is left alone as
   a surface — white on #c1121c is 6.2:1 in both modes — but as small TEXT it
   cannot reach 4.5:1 on the dark ground from any red that still works under
   white, so engine-coloured type switches to --ssb-accent-text, a lifted red
   measured at 5.7:1+ on both dark surfaces. Photo covers and the footer keep
   their own (already dark) grounds, so their white type is pinned rather
   than flipped.

   The --ssb-on-* custom properties exist for the handful of places where
   white type sits on an ink-token surface: the surface flips light, so those
   colours must flip dark with it. Each use site carries the light value as
   its var() fallback, so the child theme and the events plugin render
   correctly even if this block is ever removed.
   ========================================================================== */

:root {
	--ssb-on-ink: #ffffff;
	--ssb-on-ink-soft: rgba(255, 255, 255, 0.62);
	--ssb-on-ink-faint: rgba(255, 255, 255, 0.3);
	--ssb-shade: rgba(26, 26, 26, 0.08);
	--ssb-rule-soft: rgba(26, 26, 26, 0.15);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
	--wp--preset--color--base: #1d1b1a;
	--wp--preset--color--surface: #141312;
	--wp--preset--color--surface-deep: #262322;
	--wp--preset--color--ink: #f1efec;
	--wp--preset--color--ink-muted: #a39d99;
	--wp--preset--color--line: #f1efec;
	--wp--preset--color--line-soft: #37342f;
	/* engine, engine-deep and ink-deep are deliberately not flipped: the red
	   surfaces keep their white type at 6.2:1 either way, and the footer keeps
	   its dark ground with hardcoded white type to match. */

	--ssb-accent-text: #ea6d75;

	--ssb-on-ink: #17150f;
	--ssb-on-ink-soft: rgba(23, 21, 15, 0.66);
	--ssb-on-ink-faint: rgba(23, 21, 15, 0.3);
	--ssb-shade: rgba(241, 239, 236, 0.07);
	--ssb-rule-soft: rgba(241, 239, 236, 0.22);

	color-scheme: dark;
}

/* Photo covers keep their photographs and dark scrims in both modes, so type
   coloured "base" there must stay white rather than flip with the token. */
html[data-theme="dark"] .wp-block-cover .has-base-color,
html[data-theme="dark"] .wp-block-cover .wp-block-button__link.has-base-color { color: #ffffff; }

/* Filled buttons stay red with white labels; the label colour comes from the
   base token in theme.json and must not flip with it. Outline buttons on the
   photo covers are covered by the pin above, and the CTA band's base-filled
   button flips to a dark fill for which white is equally right. */
html[data-theme="dark"] .wp-element-button,
html[data-theme="dark"] .wp-block-button__link { color: #ffffff; }

/* The red bands keep their engine ground in both modes, so type coloured
   "base" there stays white rather than flipping with the token. */
html[data-theme="dark"] .has-engine-background-color,
html[data-theme="dark"] .has-engine-background-color .has-base-color { color: #ffffff; }

/* The light letterpress shadow is drawn for paper: white face over a soft
   dark drop. On the dark ground the face is the page colour and the drop is
   a soft light. */
html[data-theme="dark"] .ssb-letterpress-light {
	text-shadow: 2px 2px 0 var(--wp--preset--color--surface), 3px 3px 0 rgba(255, 255, 255, 0.16);
}

/* Engine-red type lifts to the measured accent on the dark ground. Hover
   states included: a colour that only appears for a moment still has to be
   readable for that moment. */
html[data-theme="dark"] .ssb-kicker,
html[data-theme="dark"] .ssb-card__kicker,
html[data-theme="dark"] .ssb-card__kicker a,
html[data-theme="dark"] .ssb-drive__num,
html[data-theme="dark"] .ssb-pillar__num,
html[data-theme="dark"] .ssb-person__role--lead,
html[data-theme="dark"] .ssb-header .wp-block-navigation a:hover,
html[data-theme="dark"] .ssb-btn--underline .wp-block-button__link:hover,
html[data-theme="dark"] .ssb-backlink a:hover,
html[data-theme="dark"] .ssb-more--underline:hover {
	color: var(--ssb-accent-text);
}

/* …except the kicker variant that sits on the red band, which stays the
   white the light mode gives it. */
html[data-theme="dark"] .ssb-kicker--onred { color: rgba(255, 255, 255, 0.75); }

/* --- Theme toggle --------------------------------------------------------- */
/* Injected by ssb.js into the header, before the Donate button. */

.ssb-themetoggle {
	width: 40px;
	height: 40px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.22s ease, color 0.22s ease;
}

.ssb-themetoggle:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.ssb-themetoggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--engine);
	outline-offset: 2px;
}

.ssb-themetoggle svg { width: 18px; height: 18px; display: block; }

/* One icon at a time — the generic svg rule above would otherwise outrank
   these at lower specificity. */
.ssb-themetoggle .ssb-themetoggle__sun { display: none; }
html[data-theme="dark"] .ssb-themetoggle .ssb-themetoggle__sun { display: block; }
html[data-theme="dark"] .ssb-themetoggle .ssb-themetoggle__moon { display: none; }