/* ==========================================================================
   Speak Out — Corruption Watch theme
   Design tokens
   ========================================================================== */

:root {
	/* Light paper theme — this is now the default for every inner page */
	--bg: #f5f3ef;       /* clean off-white — no texture, no pattern */
	--bg-elev: #ece9e1;
	--bg-elev-2: #e2dfda;
	--fg: #18150f;
	--muted: #6e6757;
	--accent: #cc1b22;      /* CW brand red — aligned with Corruption Watch corporate identity */
	--accent-deep: #8f1017;
	--line: rgba(24, 21, 15, 0.14);
	--header-bg: rgba(241, 236, 226, 0.94);

	--font-display: 'Anton', Impact, sans-serif;
	--font-label: 'Oswald', sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--container: 1440px;

	/* Page layout alignment:
	   --page-inset mirrors the logo's left position exactly —
	   max(32px, (viewport - container) / 2 + 32px).
	   Use this as padding-left on any full-width section so its
	   content aligns with the left edge of the logo at every viewport.
	   --page-top is the consistent title clearance:
	   info-strip (36px) + header (100px) + 40px breathing room. */
	--page-inset: max(32px, calc((100vw - var(--container)) / 2 + 32px));
	--page-top: 176px;
}

/* The homepage keeps the original dark, cinematic palette. Because every
   component below is built on these CSS variables, redefining them here
   is enough to re-theme the header, footer, and ticker too — no
   duplicate dark/light markup needed anywhere.
   `speakout-dark` is added explicitly in header.php via is_front_page() —
   not relying on WordPress's own (inconsistently-applied) body classes —
   so this stays correct no matter what's set under Settings → Reading or
   which page template ends up assigned to the homepage. */
body.speakout-dark {
	--bg: #0b0b0c;
	--bg-elev: #161618;
	--bg-elev-2: #1e1e21;
	--fg: #f4f2ee;
	--muted: #9b9b9d;
	--line: rgba(244, 242, 238, 0.14);
	--header-bg: rgba(11, 11, 12, 0.92);
}

/* Subtle paper grain on every inner (light) page, echoing the Contributors
   mockup's textured stock. Skipped on the dark homepage, which has its
   own film-grain treatment inside the hero. */
body.speakout-light {
	background-color: var(--bg);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	background-image: none; /* no pattern or texture on inner pages */
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* main grows to fill the space between header and footer so the footer
   always lands at the bottom of the viewport regardless of content length */
.site-main {
	flex: 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px; width: 1px;
}

.skip-link:focus {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 9999;
	background: var(--accent);
	color: #fff;
	padding: 10px 16px;
	clip: auto; width: auto; height: auto;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

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

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.info-strip {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 110;
	height: 36px;
	background: #00abbb;
	display: flex;
	align-items: center;
}

.info-strip__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.info-strip__text {
	font-family: var(--font-body);
	font-size: 13px;
	color: #fff;
	text-align: center;
	margin: 0;
	letter-spacing: 0.01em;
}

.info-strip__search {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #fff;
}

.info-strip__search:hover { opacity: 0.8; }
.info-strip__sep { opacity: 0.7; }

/* Header sits at 36px (strip height), not 0 */
.site-header {
	position: fixed;
	top: 36px; left: 0; right: 0;
	z-index: 100;
	/* Menu bar matches the homepage (dark) on every page. Scoping the
	   colour tokens here keeps the nav text, logo and border readable
	   without affecting the light body theme of inner pages. */
	--fg: #f4f2ee;
	--line: rgba(244, 242, 238, 0.14);
	background: rgba(11, 11, 12, 0.92);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-branding {
	position: absolute;
	left: 32px;
	top: 50%;
	transform: translateY(-50%);
}
.primary-nav { /* centered by the flex parent regardless of branding width */ }
.site-header__spacer { display: none; }

.brand-mark { display: flex; align-items: center; gap: 12px; }
.brand-mark__text {
	font-family: var(--font-label);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 19px;
	text-transform: uppercase;
}

.custom-logo-link img { max-height: 90px; width: auto; }

.nav-menu {
	display: flex;
	/* Wide, spread-out spacing per the campaign mockup — scales with the
	   viewport but stays centered as a group between the logo and the edge. */
	gap: clamp(48px, 6vw, 104px);
}
.nav-menu a {
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg);
	position: relative;
	padding: 8px 2px;
	white-space: nowrap;
}
.nav-menu a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 2.5px;
	background: var(--accent);
	transition: right 0.25s ease;
}
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.nav-menu .current-menu-item a::after {
	right: 0;
}

/* ==========================================================================
   Hero (front page)
   ========================================================================== */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 140px 48px 100px;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Single full-bleed background image spanning the entire hero */
.hero__full-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: top center;
}
.hero__full-bg--dark {
	background: radial-gradient(ellipse at 50% 30%, #1a1a1d 0%, #0b0b0c 70%);
}

.hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bullet-holes { position: absolute; inset: 0; z-index: 1; }
.bullet-hole {
	position: absolute;
	left: var(--x); top: var(--y);
	width: var(--s); height: var(--s);
	transform: translate(-50%, -50%) rotate(var(--r));
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #000 0%, #000 28%, transparent 30%),
		conic-gradient(from 0deg, rgba(0,0,0,0.55) 0deg 18deg, transparent 18deg 40deg,
			rgba(0,0,0,0.5) 40deg 55deg, transparent 55deg 80deg,
			rgba(0,0,0,0.55) 80deg 100deg, transparent 100deg 130deg,
			rgba(0,0,0,0.5) 130deg 150deg, transparent 150deg 190deg,
			rgba(0,0,0,0.55) 190deg 210deg, transparent 210deg 250deg,
			rgba(0,0,0,0.5) 250deg 270deg, transparent 270deg 310deg,
			rgba(0,0,0,0.55) 310deg 330deg, transparent 330deg 360deg);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
	opacity: 0.85;
}

.hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 980px;
}

.hero__title-image {
	display: block;
	width: 100%;
	max-width: 880px;
	height: auto;
	margin: 0 auto 48px;
}

.hero__headline {
	margin: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 3vw, 36px);
	flex-wrap: wrap;
}

.hero__word {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.92;
	text-transform: uppercase;
	font-size: clamp(2.6rem, 9vw, 6.4rem);
	position: relative;
}

.hero__word--left { color: var(--fg); text-align: right; }
.hero__word--right { color: var(--accent); text-align: left; }

.hero__word--left .ltr,
.hero__word--right .ltr {
	display: inline-block;
}

/* echo / glitch duplicate behind the main word, the page's signature move */
.hero__word--left::before,
.hero__word--right::before {
	content: attr(data-text);
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	z-index: -1;
	filter: blur(0.3px);
}
.hero__word--left::before {
	color: var(--accent);
	opacity: 0.35;
	transform: translate(6px, 10px) scaleX(1.03);
}
.hero__word--right::before {
	color: var(--fg);
	opacity: 0.22;
	transform: translate(-6px, -10px) scaleX(1.03);
}

.hero__word--mid {
	font-family: var(--font-label);
	font-weight: 700;
	color: var(--accent);
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	letter-spacing: 0.06em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: 0 6px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	width: 100%;
	/* Matches the title image max-width above so the two buttons can line
	   up with the left and right edges of that graphic. */
	max-width: 880px;
	margin: 0 auto;
}

/* Left button — IMPEMPE — teal border + teal text, arrow points LEFT before the text.
   Aligned to the LEFT edge of the title image above it. */
.hero__ctas .btn--left.btn--ghost {
	justify-self: start;
	border-color: #00abbb;
	color: #00abbb;
}
.hero__ctas .btn--left.btn--ghost:hover {
	background: #00abbb;
	border-color: #00abbb;
	color: #fff;
}

/* Right button — IMPIMPI — red border + red text, arrow points RIGHT after the text.
   Aligned to the RIGHT edge of the title image above it. */
.hero__ctas .btn--right.btn--ghost {
	justify-self: end;
	border-color: var(--accent);
	color: var(--accent);
}
.hero__ctas .btn--right.btn--ghost:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 16px;
	padding: 16px 26px;
	border: 1px solid var(--fg);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }

.btn--ghost { color: var(--fg); background: transparent; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }

.btn--right.btn--ghost { border-color: var(--accent); color: var(--accent); }
.btn--right.btn--ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--small { padding: 10px 18px; font-size: 12px; }

/* The two homepage portal buttons ("Enter Impempe" / "Enter Impimpi") are
   2x the standard button size — scoped here so Donate/Buy buttons
   elsewhere on the site stay their normal size. */
.hero__ctas .btn {
	font-size: 30px;
	padding: 0 25px;
	gap: 20px;
}
.hero__ctas .btn--image img { height: 112px; max-width: 480px; }

/* Custom uploaded button graphic — no border/padding/background of its
   own, since the image supplies all of that. Sized to roughly match the
   default text button's height so the pair lines up if only one side
   has a custom image. */
.btn--image {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: none;
	background: none;
	transition: transform 0.15s ease, opacity 0.2s ease;
}
.btn--image:hover, .btn--image:focus-visible { transform: translateY(-1px); opacity: 0.88; }
.btn--image img {
	display: block;
	height: 56px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.btn__arrow { transition: transform 0.2s ease; }

/* Left button's arrow points left and sits before the text — moves
   further left on hover. Right button's arrow points right after the
   text, and moves further right on hover. */
.btn--left:hover .btn__arrow,
.btn--left:focus-visible .btn__arrow {
	transform: translateX(-8px);
}
.btn--right:hover .btn__arrow,
.btn--right:focus-visible .btn__arrow {
	transform: translateX(8px);
}

.text-link {
	font-family: var(--font-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--accent);
	border-bottom: 1px solid transparent;
}
.text-link:hover { border-bottom-color: var(--accent); }
.text-link--small { font-size: 12px; }

/* ==========================================================================
   Ticker
   ========================================================================== */

.ticker {
	background: var(--accent);
	overflow: hidden;
	white-space: nowrap;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
.ticker__track {
	display: inline-flex;
	animation: ticker-scroll 28s linear infinite;
}
.ticker__item {
	font-family: var(--font-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 20px;
	color: #fff;
	padding: 20px 32px;
	white-space: nowrap;
}
@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   Page hero (non-front pages)
   ========================================================================== */

.page-hero {
	padding: 160px 48px 64px;
	background: linear-gradient(180deg, var(--bg-elev), var(--bg));
	border-bottom: 1px solid var(--line);
}
.page-hero__inner {
	max-width: var(--container);
	margin: 0 auto;
}
.page-hero__eyebrow {
	font-family: var(--font-label);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 13px;
	color: var(--accent);
	margin: 0 0 14px;
}
.page-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 4rem);
	text-transform: uppercase;
	margin: 0 0 28px;
	line-height: 1;
}
.page-hero__meta { color: var(--muted); font-family: var(--font-label); font-size: 13px; }

/* ==========================================================================
   Content sections
   ========================================================================== */

.content-section { padding: 64px 48px; }
.content-section__inner { max-width: var(--container); margin: 0 auto; }
.content-section__inner--prose { max-width: 720px; }
.content-section__inner--prose p { color: var(--fg); font-size: 1.05rem; }
.content-section__inner--prose a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Merch page — hero section (split editorial + hero product)
   ========================================================================== */

.merch-hero {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 80vh;
}

.merch-hero__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: stretch;
	min-height: 80vh;
}

.merch-hero__copy {
	padding: var(--page-top) 48px 48px var(--page-inset);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.merch-hero__eyebrow {
	font-family: var(--font-label);
	font-weight: 100;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 26px;
	color: var(--accent);
	margin: 0 0 10px;
}

.merch-hero__headline {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--fg);
	font-size: 6rem;
	line-height: 1.0;
	margin: 0 0 4px;
	max-width: 800px;
	letter-spacing: 0.04em;
}

.merch-hero__brush {
	display: block;
	width: 260px;
	height: auto;
	margin: 6px 0 22px;
}

.merch-hero__sub {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--fg);
	max-width: 400px;
	margin: 0 0 28px;
	line-height: 1.6;
}

.merch-hero__cta {
	width: 100%;
	max-width: 300px;
	justify-content: space-between;
	border-color: var(--accent);
	color: #000;
	text-transform: none;
}
.merch-hero__cta:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* RIGHT: image fills the entire panel flush — no absolute, no stamp */
.merch-hero__product {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.merch-hero__product-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.merch-hero { min-height: auto; padding-top: 0; }
	.merch-hero__inner { grid-template-columns: 1fr; min-height: auto; }
	.merch-hero__product { height: 380px; }
}

/* ==========================================================================
   Merch grid
   ========================================================================== */

.merch-grid-section { padding: 40px 48px 100px; }
.merch-grid-section__inner { max-width: var(--container); margin: 0 auto; }

/* ==========================================================================
   Merch shop page (all products listing — template-merch-shop.php)
   ========================================================================== */

.merch-shop-page { padding: 140px 48px 100px; }
.merch-shop-page__inner { max-width: var(--container); margin: 0 auto; }

.merch-shop-page__header { margin-bottom: 40px; }

.merch-shop-page__eyebrow {
	font-family: var(--font-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--accent);
	margin: 0 0 8px;
}

.merch-shop-page__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 16px;
	color: var(--fg);
}

.merch-shop-page__intro {
	max-width: 640px;
	font-size: 1.05rem;
	color: var(--fg);
	line-height: 1.6;
}
.merch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.merch-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

/* Each card is now an <a> — entire card is clickable */
.merch-card {
	display: block;
	border: 1px solid var(--line);
	background: var(--bg);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.merch-card:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}
.merch-card__image {
	position: relative;
	aspect-ratio: 3/4;
	overflow: hidden;
	background: var(--bg-elev-2);
}
.merch-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.merch-card:hover .merch-card__image img { transform: scale(1.03); }

.merch-card__placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, var(--bg-elev-2), var(--bg-elev-2) 10px, var(--bg) 10px, var(--bg) 20px);
}
.merch-card__badge {
	position: absolute; top: 10px; right: 10px;
	background: var(--accent); color: #fff;
	font-family: var(--font-label); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 4px 8px;
}
.merch-card.is-sold-out .merch-card__image { opacity: 0.45; }
.merch-card__title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	margin: 14px 16px 4px;
	color: var(--fg);
}
.merch-card__price {
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 16px;
	color: var(--fg);
	margin: 0 16px 14px;
}

@media (max-width: 1000px) {
	.merch-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.merch-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==========================================================================
   Story grid (index / archive / search)
   ========================================================================== */

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.story-card { background: var(--bg-elev); border: 1px solid var(--line); display: block; }
.story-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-elev-2); }
.story-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-card__thumb--placeholder { background: repeating-linear-gradient(45deg, var(--bg-elev-2), var(--bg-elev-2) 10px, var(--bg) 10px, var(--bg) 20px); }
.story-card__title { font-family: var(--font-label); text-transform: uppercase; font-size: 16px; margin: 18px 20px 8px; }
.story-card__excerpt { color: var(--muted); font-size: 14px; margin: 0 20px 20px; }
.story-card:hover .story-card__title { color: var(--accent); }

.empty-state { color: var(--muted); }

.post-nav { display: flex; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 0 48px 64px; font-family: var(--font-label); text-transform: uppercase; font-size: 13px; }
.post-nav a:hover { color: var(--accent); }

/* ==========================================================================
   Single post — featured image hero, title + category centred
   ========================================================================== */

.post-hero {
	position: relative;
	min-height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--bg-elev);
	text-align: center;
}

/* When the post has no featured image fall back to a plain dark gradient */
.post-hero:not(:has(.post-hero__image)) {
	padding-top: 100px; /* header clearance */
	background: linear-gradient(180deg, var(--bg-elev), var(--bg));
	border-bottom: 1px solid var(--line);
}

.post-hero__image {
	position: absolute;
	inset: 0;
}
.post-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.post-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0,0,0,0.22) 0%,
		rgba(0,0,0,0.68) 100%
	);
}

.post-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 160px 48px 56px; /* top clears the fixed header + breathing */
	text-align: center;
}

.post-hero__category {
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 14px;
	display: inline-block;
	background: rgba(255,255,255,0.12);
	padding: 4px 12px;
	border-radius: 2px;
}

.post-hero__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.05;
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

/* No featured image fallback — dark text on light bg */
.post-hero:not(:has(.post-hero__image)) .post-hero__title {
	color: var(--fg);
	text-shadow: none;
}
.post-hero:not(:has(.post-hero__image)) .post-hero__category {
	background: transparent;
	padding: 0;
}

@media (max-width: 720px) {
	.post-hero { min-height: 40vh; }
	.post-hero__content { padding: 130px 24px 40px; }
	.post-hero__title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
}

/* ==========================================================================
   404
   ========================================================================== */

.page-hero--404 { min-height: 64vh; display: flex; align-items: center; }
.page-hero__inner--404 {
	position: relative;
	text-align: center;
	width: 100%;
	padding: 24px 0;
}
.error-code {
	font-family: var(--font-display);
	font-size: clamp(4rem, 16vw, 9rem);
	color: var(--accent);
	margin: 0;
	line-height: 1;
	position: relative;
	z-index: 1;
}
.error-text {
	max-width: 480px;
	margin: 24px auto 36px;
	color: var(--muted);
	position: relative;
	z-index: 1;
}
.page-hero__inner--404 .btn { position: relative; z-index: 1; }

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area { max-width: 720px; margin: 0 auto; }
.comments-title { font-family: var(--font-label); text-transform: uppercase; }
.comment-list { margin: 0 0 40px; }

/* ==========================================================================
   Footer (small, centered copyright — always dark, matching the homepage,
   regardless of whether the page it sits under is light or dark)
   ========================================================================== */

.site-footer {
	background: #161618;
	padding: 22px 24px;
	text-align: center;
}
.site-footer__copyright {
	font-size: 13px;
	color: #f4f2ee;
	margin: 0 0 8px;
}
.site-footer__legal {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--font-label);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
}
.site-footer__legal a { color: #f4f2ee; }
.site-footer__legal a:hover { color: var(--accent); }
.site-footer__legal-sep { color: #5a5a5d; }

/* ==========================================================================
   Contributors page (light editorial layout)
   ========================================================================== */

.contributors-page {
	padding: var(--page-top) 0 100px;
}

.contributors-page__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px; /* 32px matches the logo's left: 32px inside the same max-width container */
	display: grid;
	grid-template-columns: minmax(320px, 1fr) 1fr;
	gap: 56px;
	align-items: start;
}

/* Live-text page title (eyebrow + headline), matching Donations & Merch */
.contributors-page__eyebrow {
	font-family: var(--font-label);
	font-weight: 100;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 26px;
	color: var(--accent);
	margin: 0 0 10px;
}
.contributors-page__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--fg);
	font-size: 6rem;
	line-height: 1.0;
	margin: 0 0 6px;
	max-width: 800px;
	letter-spacing: 0.04em;
}

/* Real brushstroke underline — the asset the designer provided */
.contributors-page__brushstroke {
	display: block;
	width: 260px;
	height: auto;
	margin-bottom: 22px;
}

/* Intro paragraph (editable from WP page editor) */
.contributors-page__editorial p {
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--fg);
	max-width: 380px;
	margin: 0 0 12px;
}

/* Any live-text h1/h2 inside the editorial area (fallback if graphic not
   present or if content is edited to have heading tags) */
.contributors-page__editorial h1,
.contributors-page__editorial h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--fg);
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.02;
	margin: 0 0 6px;
	white-space: pre-line;
}

.contributors-page__photo {
	margin-top: 36px;
	max-width: 360px;
}
.contributors-page__photo img { width: 100%; height: auto; }

/* ==========================================================================
   Contributor card tiles — RIGHT side grid
   ========================================================================== */

.contributor-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Base tile wrapper — borderless, shadowless, clean rounded corners */
.contributor-tile {
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s ease;
}
.contributor-tile:hover {
	transform: translateY(-3px);
}

.contributor-tile__media {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
}
.contributor-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(0.15) contrast(1.05);
	transition: transform 0.4s ease;
}
.contributor-tile:hover .contributor-tile__media img { transform: scale(1.04); }

.contributor-tile__placeholder {
	position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, #1c1c1e, #1c1c1e 10px, #0c0c0d 10px, #0c0c0d 20px);
}

/* Scrim and overlay text are hidden — all cards use pre-designed artwork
   with name and role already built into the image. */
.contributor-tile__scrim { display: none; }
.contributor-tile__text  { display: none; }
.contributor-tile__name  { display: none; }
.contributor-tile__rule  { display: none; }
.contributor-tile__role  { display: none; }

/* Pre-designed cards — shown at their natural aspect ratio, uncropped,
   unfiltered, since the image is the finished artwork. */
.contributor-tile--baked .contributor-tile__media {
	aspect-ratio: auto;
}
.contributor-tile--baked .contributor-tile__media img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: initial;
	filter: none;
}

.donate-page {
	/* No top padding here — the photo panel fills flush from the page top.
	   The header clearance is applied only to the left intro column below. */
	padding-top: 0;
}

.donate-page__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: stretch;
	min-height: 80vh;
}

.donate-page__intro {
	padding: var(--page-top) 48px 64px var(--page-inset);
}

.donate-page__eyebrow {
	font-family: var(--font-label);
	font-weight: 100;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 26px;
	color: var(--accent);
	margin: 0 0 10px;
}

/* Donations page title — large condensed display text (no longer an image) */

.donate-page__title {
	font-family: var(--font-display);
	font-size: 6rem;
	text-transform: uppercase;
	color: var(--fg);
	line-height: 1.0;
	margin: 0 0 4px;
	max-width: 800px;
	letter-spacing: 0.04em;
}

.donate-page__brush {
	display: block;
	width: 260px;
	height: 17px;   /* matches real brushstroke asset aspect ratio */
	margin: 8px 0 22px;
	background-image: url('../img/brush-underline.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.donate-page__editorial p {
	font-family: var(--font-body);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--fg);
	max-width: 440px;
	margin: 0 0 28px;
}

.donate-page__photo {
	position: relative;
	align-self: stretch;
	min-height: 84vh;
	overflow: hidden;
}
.donate-page__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

.donate-page__stamp {
	position: absolute;
	top: 14%;
	left: 8%;
	max-width: 320px;
	padding: 18px 22px;
	border: 3px solid rgba(80, 76, 68, 0.55);
	color: rgba(80, 76, 68, 0.78);
	font-family: var(--font-label);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.1rem;
	line-height: 1.25;
	letter-spacing: 0.02em;
	transform: rotate(-6deg);
	mix-blend-mode: multiply;
}

/* ---------- Donation amount form ---------- */

.donate-form { margin-bottom: 36px; }

.donate-form__submit {
	width: 100%;
	max-width: 300px;
	justify-content: space-between;
	border-color: var(--accent);
	color: #000;
	text-transform: none;
}
.donate-form__submit:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ---------- Trust badges ---------- */

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 100px;
}
.trust-badge {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 200px;
}
.trust-badge__icon { color: var(--fg); flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; }
.trust-badge__title {
	font-family: var(--font-label);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.03em;
	color: var(--fg);
	margin: 0 0 4px;
}
.trust-badge__desc {
	font-size: 16px;
	line-height: 1.4;
	color: var(--muted);
	margin: 0;
}

@media (max-width: 980px) {
	.donate-page__inner { grid-template-columns: 1fr; }
	.donate-page__photo {
		position: relative;
		height: auto;
		min-height: 320px;
	}

	.donate-page { padding-top: 0; }
	.donate-page__intro { padding: 120px 24px 48px 24px; }
	.donate-form__submit { width: 100%; }
}

@media (max-width: 980px) {
	.contributors-page__inner { grid-template-columns: 1fr; gap: 40px; }
	.contributors-page__photo { display: none; }
	.contributors-page__brushstroke { max-width: 100%; }
}

@media (max-width: 640px) {
	.contributors-page { padding: 48px 0 72px; }
	.contributors-page__inner { padding: 0 20px; }
	.contributor-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Single merch product page
   ========================================================================== */

.merch-single { padding-top: 100px; /* header = 100px */ }

.merch-single__breadcrumb {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 48px 28px;
	font-family: var(--font-label);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.merch-single__breadcrumb a { color: var(--muted); }
.merch-single__breadcrumb a:hover { color: var(--accent); }
.merch-single__breadcrumb .current { color: var(--fg); }

.merch-single__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 48px 100px;
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: 64px;
	align-items: start;
}

.merch-single__media { position: relative; }
.merch-single__img {
	width: 100%;
	height: auto;
	display: block;
}

.merch-single__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.0;
	margin: 0 0 10px;
	color: var(--fg);
}

.merch-single__brand {
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 16px;
}

.merch-single__price {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--fg);
	margin: 0 0 18px;
}

.merch-single__desc { margin: 0 0 28px; }
.merch-single__desc p,
.merch-single__desc-default {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fg);
	margin: 0 0 28px;
}

.merch-single__field { margin-bottom: 24px; }
.merch-single__field-label {
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg);
	margin: 0 0 10px;
}

/* Size picker */
.size-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.size-picker__btn {
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	min-width: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--line);
	background: var(--bg);
	color: var(--fg);
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.size-picker__btn.is-active,
.size-picker__btn:hover {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
}

/* Qty picker */
.qty-picker {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.qty-picker__btn {
	background: var(--bg);
	border: none;
	width: 40px;
	height: 44px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--fg);
	transition: background 0.15s;
}
.qty-picker__btn:hover { background: var(--bg-elev); }
.qty-picker__input {
	width: 56px;
	height: 44px;
	border: none;
	border-left: 1.5px solid var(--line);
	border-right: 1.5px solid var(--line);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
}
.qty-picker__input::-webkit-outer-spin-button,
.qty-picker__input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Add to cart button */
.merch-single__atc {
	width: 100%;
	max-width: 440px;
	justify-content: space-between;
	font-size: 17px;
	padding: 20px 28px;
	margin-bottom: 32px;
}
.merch-single__atc.is-sold-out { opacity: 0.5; cursor: not-allowed; }

/* Trust badges */
.merch-single__trust {
	display: flex;
	gap: 0;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}
.merch-trust-badge {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding: 0 8px;
	border-right: 1px solid var(--line);
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--fg);
}
.merch-trust-badge:last-child { border-right: none; }
.merch-trust-badge svg { color: var(--fg); }

@media (max-width: 900px) {
	.merch-single__inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   Story Category Pages (Impimpi / Impempe — template-stories.php)
   The page's own Featured Image fills the header area full-width.
   ========================================================================== */

.stories-page { }

/* ── Header / hero ── */
.stories-hero {
	position: relative;
	min-height: 35vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--bg-elev);
}

/* When no featured image is set: plain gradient header */
.stories-hero:not(.stories-hero--has-image) {
	background: linear-gradient(180deg, var(--bg-elev), var(--bg));
	border-bottom: 1px solid var(--line);
	padding-top: 100px; /* header clearance */
}

.stories-hero__image {
	position: absolute;
	inset: 0;
}
.stories-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark gradient scrim so white text stays legible over any photo */
.stories-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0,0,0,0.18) 0%,
		rgba(0,0,0,0.62) 100%
	);
}

.stories-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 140px 48px 48px; /* top = header clearance + breathing room */
}

.stories-hero__eyebrow {
	font-family: var(--font-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--accent);
	margin: 0 0 10px;
}

.stories-hero--has-image .stories-hero__eyebrow {
	color: rgba(255,255,255,0.75);
}

.stories-hero__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(2.8rem, 7vw, 5rem);
	color: var(--fg);
	margin: 0 0 14px;
	line-height: 1;
}

.stories-hero--has-image .stories-hero__title {
	color: #fff;
}

.stories-hero__intro {
	max-width: 640px;
	font-size: 1.05rem;
	color: var(--fg);
	line-height: 1.6;
}

.stories-hero--has-image .stories-hero__intro {
	color: rgba(255,255,255,0.85);
}

/* ── Story cards grid ── */
.stories-page__body {
	padding: 56px 48px 100px;
}
.stories-page__body-inner {
	max-width: var(--container);
	margin: 0 auto;
}

.stories-page__body .story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 56px;
}

.story-card__body { padding: 16px 20px 20px; }
.story-card__cat {
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 6px;
}

/* Date element hidden globally — kept in DOM for potential RSS/SEO use */
.story-card__date { display: none; }

/* Pagination */
.stories-page__pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	font-family: var(--font-label);
	font-size: 13px;
}
.stories-page__pagination a,
.stories-page__pagination span {
	padding: 8px 14px;
	border: 1px solid var(--line);
	color: var(--fg);
}
.stories-page__pagination a:hover { border-color: var(--accent); color: var(--accent); }
.stories-page__pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

.stories-page__notice,
.stories-page__empty {
	color: var(--muted);
	font-size: 1rem;
	border: 1px dashed var(--line);
	padding: 24px;
	max-width: 600px;
}

@media (max-width: 900px) {
	.stories-hero { min-height: 28vh; }
	.stories-hero__content { padding: 120px 32px 36px; }
	.stories-page__body .story-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
	.stories-hero { min-height: 24vh; }
	.stories-hero__content { padding: 100px 20px 28px; }
	.stories-page__body { padding: 40px 20px 80px; }
	.stories-page__body .story-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Full-width WPBakery canvas template
   ========================================================================== */

.full-width-canvas { padding-top: 100px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.merch-grid { grid-template-columns: repeat(2, 1fr); }
	.story-grid { grid-template-columns: repeat(2, 1fr); }
	.contributor-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	/* On small screens the strip scrolls away with the page */
	.info-strip { position: static; height: auto; padding: 8px 0; }
	.info-strip__text { font-size: 11px; padding: 0 80px 0 16px; text-align: left; }
	.info-strip__search { right: 16px; font-size: 11px; }

	.site-header { position: static; top: 0; }

	.site-header__inner {
		flex-direction: column;
		padding: 14px 20px 12px;
		min-height: 0;
		gap: 8px;
	}
	.site-branding {
		position: static;
		transform: none;
		align-self: center;
	}
	.brand-mark__text { font-size: 16px; }
	.site-header__spacer { display: none; }

	.nav-menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
	}
	.nav-menu a { padding: 5px 2px; font-size: 14px; letter-spacing: 0.05em; }

	.hero { padding-top: 48px; }

	.hero__headline { flex-direction: column; gap: 4px; }
	.hero__word--mid { writing-mode: horizontal-tb; transform: none; margin: 8px 0; }
	.hero__word--left, .hero__word--right { text-align: center; }

	/* Stack buttons on mobile, full width */
	.hero__ctas {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}
	.hero__ctas .btn--left.btn--ghost,
	.hero__ctas .btn--right.btn--ghost {
		justify-self: unset;
	}
	.hero__ctas .btn {
		font-size: 16px;
		padding: 18px 28px;
		gap: 12px;
		width: 100%;
		justify-content: center;
	}
	.hero__ctas .btn--image img { height: 64px; max-width: 100%; }

	.merch-grid,
	.story-grid,
	.contributor-tiles { grid-template-columns: 1fr; }
}

/* Page titles sit at 6rem on wide desktops and step down through the
   breakpoints so the two-segment headlines never wrap past 3 lines.
   Ordered widest → narrowest so the tightest matching rule wins. */
@media (max-width: 1500px) {
	.donate-page__title,
	.merch-hero__headline,
	.contributors-page__title { font-size: 5rem; }
}
@media (max-width: 1200px) {
	.donate-page__title,
	.merch-hero__headline,
	.contributors-page__title { font-size: 4.2rem; }
}
@media (max-width: 980px) {
	/* Columns collapse to a single full-width column here, so there's room
	   again — but the viewport is smaller, so keep the type moderate. */
	.donate-page__title,
	.merch-hero__headline,
	.contributors-page__title { font-size: 3.6rem; }
}
@media (max-width: 680px) {
	.donate-page__title,
	.merch-hero__headline,
	.contributors-page__title { font-size: 3.1rem; }
}
@media (max-width: 420px) {
	.donate-page__title,
	.merch-hero__headline,
	.contributors-page__title { font-size: 2.5rem; }
}

/* ==========================================================================
   Large / ultra-wide screens (≥1600px)
   The base layout caps at 1440px, which leaves everything marooned in the
   middle of big monitors (e.g. 2560×1440) with wide dead margins. These
   steps widen the shared --container (every section, the header, info-strip
   and ticker follow it automatically, and --page-inset is derived from it)
   and scale the cinematic hero up so it fills the space like the mockup.
   Reading columns (.--prose, 720px) and the fixed grids keep their own caps,
   so line length and card proportions stay sensible — only the shell grows.
   ========================================================================== */
@media (min-width: 1600px) {
	:root { --container: 1600px; }

	.hero__content { max-width: 1180px; }
	.hero__title-image { max-width: 1060px; margin-bottom: 56px; }
	.hero__ctas { max-width: 1060px; }

	.contributor-tiles { gap: 28px; }
}

@media (min-width: 2000px) {
	:root { --container: 1840px; }

	.hero { padding-top: 160px; }
	.hero__content { max-width: 1440px; }
	.hero__title-image { max-width: 1300px; margin-bottom: 64px; }
	.hero__ctas { max-width: 1300px; }

	/* Nudge body copy up so it isn't tiny on a large panel. */
	.content-section__inner--prose { max-width: 760px; }
	.content-section__inner--prose p { font-size: 1.12rem; line-height: 1.75; }
}

@media (min-width: 2400px) {
	:root { --container: 2040px; }

	.hero__content { max-width: 1600px; }
	.hero__title-image { max-width: 1440px; }
	.hero__ctas { max-width: 1440px; }
}