/*
Theme Name: Hub
Theme URI: https://example.com/hub-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme for media and news sites, built for articles and video posts.
Version: 1.0.163
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hub-theme
*/

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
	--color-bg: #FFFFFF;
	--color-surface: #FFFFFF;
	--color-ink: #1F2937;
	--color-ink-soft: #6B7280;
	--color-line: #E5E7EB;
	--color-line-soft: #F2F2F2;
	--color-accent: #DDFA6C;
	--color-accent-soft: #F4FFBF;
	--color-alert: #B8863C;
	--color-alert-soft: #F5EBD8;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--radius: 0px;
	--radius-sm: 0px;
	--font-display: 'Manrope', sans-serif;
	--font-body: 'Manrope', sans-serif;
	--font-accent: 'Poppins', sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.5;
	margin: 0;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* === HEADER === */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-6);
}

.site-logo-link {
	display: block;
	flex-shrink: 0;
	text-decoration: none;
}

.site-logo-img {
	display: block;
	height: 40px;
	width: auto;
	border-radius: 4px;
}

.main-navigation {
	margin-left: auto;
	min-width: 0;
	overflow: visible;
}

.mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 12px;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
	flex-shrink: 0;
}

#primary-menu {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#primary-menu li {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

#primary-menu a {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
	border: none;
	outline: none;
	box-shadow: none;
	background: none;
}

/* Dropdown arrow on every primary nav item except the first ("Boston
   Now"), matching the reference design. Also covers items with real
   submenu children (redundant target, same arrow, no visual difference). */
.nav-mega-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: 2px;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
}

.nav-mega-toggle svg {
	transition: transform 160ms ease;
}

.has-mega-panel:hover .nav-mega-toggle svg,
.has-mega-panel:focus-within .nav-mega-toggle svg,
.has-mega-panel.is-open .nav-mega-toggle svg {
	transform: rotate(180deg);
}

/* Mega dropdown panel: hidden via opacity/pointer-events (not
   display:none) so the opacity transition can animate. Revealed on
   :hover/:focus-within for mouse/keyboard, or via the .is-open class that
   main.js toggles from the arrow button (tap-to-open/tap-outside-to-close,
   for touch devices where :hover doesn't behave the same way). */
.nav-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: flex;
	gap: 40px;
	min-width: 360px;
	margin-top: 4px;
	padding: 24px 28px;
	background: #111111;
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	/* Hiding waits 250ms before it starts, giving a grace period to move
	   the mouse from the link into the panel; showing has no delay. */
	transition: opacity 160ms ease 250ms, visibility 0s linear 250ms;
	visibility: hidden;
}

.has-mega-panel:hover > .nav-mega-panel,
.has-mega-panel:focus-within > .nav-mega-panel,
.has-mega-panel.is-open > .nav-mega-panel {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

/* The rightmost nav items would otherwise push their panel off-screen;
   grow those two toward the left instead. */
#primary-menu > li:last-child .nav-mega-panel,
#primary-menu > li:nth-last-child(2) .nav-mega-panel {
	left: auto;
	right: 0;
}

.nav-mega-col {
	flex: 1;
	min-width: 0;
}

.nav-mega-col-title {
	display: block;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: var(--space-3);
}

.nav-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#primary-menu .nav-mega-col a {
	display: block;
	padding: 6px 0;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 14px;
	white-space: nowrap;
}

#primary-menu .nav-mega-col a:hover {
	color: var(--color-accent);
}

/* First nav item ("Boston Now") gets a skewed lime parallelogram behind
   the label. Only the ::before is skewed, so the label text stays upright. */
#primary-menu > li:first-child > a {
	position: relative;
	z-index: 0;
	padding: 6px 14px;
}

#primary-menu > li:first-child > a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #DDFA6C;
	transform: skewX(-12deg);
	z-index: -1;
}

/* Active nav item (current category / its ancestor) gets the same
   skewed lime parallelogram treatment as "Boston Now", so whichever
   section you're viewing highlights the same way. Excludes :first-child
   since Boston Now already carries this exact style above. */
.current-menu-item > a,
.current-menu-ancestor > a {
	position: relative;
	z-index: 1;
}

li:not(:first-child).current-menu-item > a::before,
li:not(:first-child).current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #DDFA6C;
	transform: skewX(-12deg);
	z-index: -1;
}

.header-search-form {
	display: inline-flex;
	align-items: center;
	margin-left: 32px;
	flex-shrink: 0;
}

.header-search-input {
	width: 0;
	padding: 6px 10px;
	border: 1px solid #E8E8E8;
	border-radius: var(--radius);
	background: #FFFFFF;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 14px;
	opacity: 0;
	transition: width 0.3s ease, opacity 0.3s ease;
}

.header-search-form:focus-within .header-search-input,
.header-search-form:hover .header-search-input {
	width: 180px;
	opacity: 1;
}

.header-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 8px;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
}

.header-search-btn .search-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Main / Loop
   ========================================================================== */

.site-main {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-6);
}

.home .site-main {
	padding-top: 0;
}

/* Taxonomy archive header (e.g. Section archives) */
.archive-header {
	margin-bottom: 32px;
}

.archive-title {
	font-size: 32px;
	margin: 0;
}

.archive-description {
	color: var(--color-ink-soft);
	font-size: 15px;
	margin-top: 8px;
}

/* Post cards in the loop */
article {
	background: var(--color-surface);
	border-radius: var(--radius);
	border: 1px solid var(--color-line-soft);
	padding: var(--space-5);
	margin-bottom: var(--space-5);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

article:hover,
article:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-line);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.entry-title a {
	color: var(--color-ink);
	text-decoration: none;
	font-size: 22px;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

.entry-title a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.post-thumbnail img {
	border-radius: var(--radius-sm);
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 16px;
}

/* Mobile nav: the hamburger toggles .main-navigation into a full-width
   dropdown panel (main.js adds/removes .is-open), and each category's
   mega panel becomes an inline accordion instead of a floating overlay.
   Placed at the very end of the HEADER section so these overrides win
   over every base header/nav rule above (equal specificity -> source
   order decides, regardless of the media query). */
@media (max-width: 768px) {
	.site-header {
		position: sticky;
		top: 0;
		padding: var(--space-3) var(--space-4);
	}

	.mobile-menu-toggle {
		display: inline-flex;
	}

	.header-search-form {
		margin-left: auto;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		overflow: hidden;
		overflow-x: hidden;
		background: #FFFFFF;
		border-bottom: 1px solid var(--color-line);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
		transition: max-height 250ms ease;
		z-index: 20;
	}

	.main-navigation.is-open {
		max-height: 80vh;
		overflow-y: auto;
	}

	#primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-3) 0;
	}

	#primary-menu li {
		position: relative;
		flex-direction: column;
		align-items: stretch;
	}

	#primary-menu > li > a {
		display: block;
		padding: 14px var(--space-4);
		border-bottom: 1px solid var(--color-line-soft);
	}

	.nav-mega-toggle {
		position: absolute;
		top: 0;
		right: var(--space-4);
		height: 48px;
	}

	.nav-mega-panel {
		position: static;
		display: none;
		min-width: 0;
		width: 100%;
		margin-top: 0;
		padding: 0 var(--space-4) var(--space-3);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}

	.has-mega-panel.is-open .nav-mega-panel {
		display: flex;
	}

	.nav-mega-col {
		padding: var(--space-2) 0;
	}

	#primary-menu .nav-mega-col a {
		padding: 8px 0;
	}
}

/* === FOOTER === */

.site-footer {
	background: #FFFFFF;
	color: var(--color-ink);
	padding: var(--space-7) 0 var(--space-6);
	border-top: 1px solid var(--color-line);
	margin-top: 40px;
}

.home .site-footer {
	margin-top: 0;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-logo-link {
	display: inline-block;
	margin-bottom: var(--space-6);
	text-decoration: none;
}

.footer-logo-img {
	display: block;
	height: 48px;
	width: auto;
	border-radius: 4px;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-5);
	width: 100%;
	margin-bottom: var(--space-7);
	text-align: left;
}

.footer-column-title {
	display: block;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	margin: 0 0 var(--space-4);
}

.footer-column-title:hover {
	text-decoration: underline;
}

.footer-column-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-column-links li {
	margin-bottom: 12px;
}

.footer-column-links a {
	color: var(--color-ink-soft);
	font-size: 14px;
	text-decoration: none;
}

.footer-column-links a:hover {
	color: var(--color-ink);
	text-decoration: underline;
}

.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink);
}

.footer-social-link:hover {
	opacity: 0.6;
}

.footer-copyright {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 13px;
}

/* --- Mobile: 3-up below 768px, single column below 480px --- */

@media (max-width: 768px) {
	.footer-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.footer-columns {
		grid-template-columns: 1fr;
	}

	.nav-mega-panel {
		min-width: 260px;
		gap: 20px;
		padding: 18px 20px;
	}
}

.footer-column-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.footer-column-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.footer-column-toggle svg {
	transition: transform 160ms ease;
}

.footer-column.is-open .footer-column-toggle svg {
	transform: rotate(180deg);
}

/* Footer columns become collapsed accordions on mobile: only the
   category name shows by default, tap the arrow to reveal its links. */
@media (max-width: 768px) {
	.footer-column-toggle {
		display: inline-flex;
	}

	.footer-column-links {
		display: none;
	}

	.footer-column.is-open .footer-column-links {
		display: block;
	}
}

/* ==========================================================================
   Components
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	white-space: nowrap;
	background: var(--color-accent);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	clip-path: none;
	border-radius: 10px;
	padding: 2px 10px;
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #262626;
	text-decoration: none;
}

.badge--alert {
	background: var(--color-alert-soft);
	color: var(--color-alert);
	border-color: transparent;
	backdrop-filter: none;
}

.badge--accent {
	background: var(--color-accent);
	color: #262626;
	border-color: transparent;
	backdrop-filter: none;
}

.badge--dark {
	background: #65676A;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	clip-path: none;
	border-color: transparent;
	color: #FFFFFF;
}

/* === HOMEPAGE === */

.home-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 24px;
}

.section-heading {
	font-family: var(--font-accent);
	font-size: 36px;
	font-weight: 600;
	color: #1F2937;
	margin: 0 0 var(--space-5);
}

.section-heading--accent {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}

.section-heading--accent::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	background: var(--color-accent);
}

/* === HERO === */

.home-hero {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: stretch;
	max-width: 1200px;
	margin: var(--space-5) auto;
	padding: 0 24px;
}

.hero-image-link {
	display: block;
}

.hero-image {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 65%;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}

.hero-glass-panel {
	position: relative;
	z-index: 2;
	isolation: isolate;
	width: 46%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: 32px;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	clip-path: none;
	transform: translateY(120px);
}

.hero-glass-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #FFFFFF;
	border-radius: 0;
	box-shadow: -7px 7px 10px rgba(0, 0, 0, 0.04), -2px 8px 25px rgba(0, 0, 0, 0.1);
	transform: skewX(-12deg);
	z-index: -1;
}

.hero-glass-panel > * {
	position: relative;
	z-index: 1;
}

.home-hero-pills {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.home-hero-title {
	margin: 0;
}

.home-hero-title a {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.33;
	text-decoration: none;
}

.home-hero-title a:hover {
	text-decoration: underline;
}

.home-hero-footer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.home-hero-footer .card-arrow {
	position: static;
}

.hero-glass-panel:hover .card-arrow {
	color: var(--color-ink);
}

/* --- Section 2: Trending Tags --- */

.trending-tags-section {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.trending-tags-bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.trending-tags-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.trending-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 10px;
	background: transparent;
	color: var(--color-ink-soft);
	font-size: 14px;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}

.trending-tag:hover,
.trending-tag:focus-visible,
.trending-tag:active,
.trending-tag.is-active {
	background: var(--color-accent);
	color: #262626;
}

.trending-tag-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	transition: opacity 150ms ease;
}

.trending-tag:hover .trending-tag-dot,
.trending-tag:focus-visible .trending-tag-dot,
.trending-tag:active .trending-tag-dot,
.trending-tag.is-active .trending-tag-dot {
	opacity: 1;
}

.trending-tags-more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.trending-tags-more:hover {
	text-decoration: underline;
}

.trending-tags-scroll-hint {
	display: none;
}

@media (max-width: 768px) {
	.trending-tags-bar {
		position: relative;
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
	}

	.trending-tags-row {
		flex-wrap: nowrap;
		gap: var(--space-2);
		width: 100%;
		margin-left: 0;
		padding-right: 28px;
		overflow-x: auto;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.trending-tags-row::-webkit-scrollbar {
		display: none;
	}

	.trending-tag {
		flex: none;
		white-space: nowrap;
	}

	.trending-tags-more {
		margin-left: 0;
	}

	.trending-tags-scroll-hint {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 32px;
		height: 33px;
		padding-left: 16px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg) 60%);
		color: var(--color-ink-soft);
		font-size: 18px;
		line-height: 1;
		pointer-events: none;
	}
}

/* --- Section 3: Latest Bzz --- */

.latest-bzz-subheading {
	margin: 10px 0 var(--space-5);
	color: var(--color-ink-soft);
	font-size: 15px;
}

.latest-bzz-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}

.latest-bzz-pills {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Large feature card: image on top, plain body below (no overlap). */
.latest-bzz-feature {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.latest-bzz-feature:hover,
.latest-bzz-feature:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-ink);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.latest-bzz-feature-media {
	aspect-ratio: 4 / 3;
}

.latest-bzz-feature-media img,
.latest-bzz-feature-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.latest-bzz-feature-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.latest-bzz-feature-title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.33;
	color: #111827;
}

.latest-bzz-feature-footer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.latest-bzz-feature-footer .card-arrow {
	position: static;
}

/* Right column: vertical list, thumbnail on the right of each row. */
.latest-bzz-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.latest-bzz-list-item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 16px;
	padding: 20px 16px;
	color: inherit;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.latest-bzz-list-item:hover,
.latest-bzz-list-item:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-ink);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.latest-bzz-list-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.latest-bzz-list-title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--color-ink);
}

.latest-bzz-list-footer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.latest-bzz-list-footer .card-arrow {
	position: static;
}

.latest-bzz-list-media {
	flex: 0 0 140px;
	width: 140px;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	overflow: hidden;
}

.latest-bzz-list-media img,
.latest-bzz-list-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Section 4: The Bzz on Social (placeholder) --- */

.bzz-social-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.bzz-social-heading-group .section-heading {
	margin: 0 0 4px;
}

.bzz-social-subheading {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 15px;
}

.bzz-social-follow {
	position: relative;
}

.bzz-social-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 0;
	min-height: 40px;
	padding: 9px 22px 9px 16px;
	background: transparent;
	border: none;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.bzz-social-more::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-accent);
	transform: skewX(-12deg);
	z-index: -1;
	border-radius: 0;
}

/* Dropdown listing where to follow, revealed on hover/focus for mouse and
   keyboard, or via the .is-open class main.js toggles on click/tap. */
.bzz-social-follow-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	min-width: 160px;
	margin-top: 4px;
	padding: 8px;
	background: #111111;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease 250ms, visibility 0s linear 250ms;
	visibility: hidden;
}

.bzz-social-follow:hover .bzz-social-follow-menu,
.bzz-social-follow:focus-within .bzz-social-follow-menu,
.bzz-social-follow.is-open .bzz-social-follow-menu {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.bzz-social-follow-menu a {
	padding: 8px 12px;
	border-radius: 8px;
	color: #FFFFFF;
	font-family: var(--font-body);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.bzz-social-follow-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-accent);
}

.bzz-social-tabs {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.bzz-social-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: none;
	font-family: var(--font-body);
	color: var(--color-ink-soft);
	font-size: 14px;
	cursor: pointer;
}

.bzz-social-tab.is-active {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px 6px 10px;
	background: transparent;
	font-weight: 700;
	color: var(--color-ink);
}

.bzz-social-tab.is-active::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-accent);
	transform: skewX(-12deg);
	z-index: -1;
	border-radius: 0;
}

.bzz-social-tab-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-ink);
}

.bzz-social-carousel {
	position: relative;
	padding: 0 48px;
}

.bzz-social-grid {
	display: flex;
	gap: var(--space-5);
	/* Top/bottom padding is invisible breathing room, not a card-size
	   change: .bzz-social-grid computes overflow-y to "auto" (not truly
	   "visible") as soon as overflow-x isn't visible, so the hover-zoom
	   transform on .bzz-social-image was getting clipped top/bottom
	   without this. */
	padding: 10px 0 10px 18px;
	scroll-padding-left: 18px;
	overflow-x: auto;
	overflow-y: visible;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bzz-social-grid::-webkit-scrollbar {
	display: none;
}

.bzz-social-item {
	position: relative;
	display: block;
	flex: 0 0 248px;
	aspect-ratio: 3 / 4.85;
	border: none;
	border-radius: 25px;
	overflow: visible;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.bzz-social-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--color-line);
	transition: transform 200ms ease;
	border-radius: 25px;
	overflow: hidden;
}

.bzz-social-item:hover .bzz-social-image {
	transform: scale(1.04);
}

.bzz-social-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
}

.bzz-social-play::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--color-ink);
	margin-left: 3px;
}

.bzz-social-glass {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 3;
	height: 92px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 18px;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	clip-path: none;
	isolation: isolate;
}

.bzz-social-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #FFFFFF;
	border-radius: 0;
	box-shadow: -7px 7px 10px rgba(0, 0, 0, 0.04), -2px 8px 25px rgba(0, 0, 0, 0.1);
	transform: skewX(-12deg);
	z-index: -1;
}

.bzz-social-glass > * {
	position: relative;
	z-index: 1;
}

.bzz-social-caption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-display);
	color: var(--color-ink);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
}

.bzz-social-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-ink);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
	transition: background 160ms ease, color 160ms ease;
}

.bzz-social-arrow:hover {
	background: var(--color-ink);
	color: #FFFFFF;
}

.bzz-social-arrow:disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.bzz-social-arrow--prev {
	left: 0;
}

.bzz-social-arrow--next {
	right: 0;
}

/* === FORMATS SECTION === */

.bzz-formats-subheading {
	margin: 0 0 var(--space-5);
	color: var(--color-ink-soft);
	font-size: 16px;
}

.bzz-formats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.bzz-format-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: 24px;
	background: #111111;
	border-radius: 16px;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.bzz-format-card:hover {
	transform: translateY(-3px);
	background: #1A1A1A;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.bzz-format-card:active {
	transform: translateY(-1px) scale(0.99);
	background: #000000;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bzz-format-title {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 800;
}

.bzz-format-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.5;
}

/* --- Section 5: Explore Bzz Post --- */

.explore-bzz-subheading {
	margin: 0 0 var(--space-5);
	color: var(--color-ink-soft);
	font-size: 15px;
}

.explore-bzz-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

.explore-bzz-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: -10px 0 24px rgba(0, 0, 0, 0.07);
	clip-path: none;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.explore-bzz-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.explore-bzz-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.explore-bzz-card-count {
	flex: 1;
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 14px;
}

.explore-bzz-card-browse {
	align-self: flex-start;
	margin-top: var(--space-2);
	display: inline-flex;
	align-items: center;
	background: var(--color-accent);
	color: var(--color-ink);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
}

/* --- Section 7: Newsletter CTA --- */

.newsletter-cta {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	margin-bottom: var(--space-7);
}

.newsletter-cta-inner {
	background: #F5F5F4;
	border-radius: 32px;
	padding: 64px 40px;
	text-align: center;
}

.newsletter-cta-title {
	color: var(--color-ink);
	font-family: var(--font-accent);
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.newsletter-cta-subtitle {
	color: var(--color-ink-soft);
	font-size: 15px;
	margin: 0 0 var(--space-5);
}

.newsletter-cta-form {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
}

.newsletter-cta-input {
	flex: 1;
	min-width: 0;
	padding: 16px 32px 16px 24px;
	border: none;
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
	background: var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 15px;
}

.newsletter-cta-input::placeholder {
	color: var(--color-ink-soft);
}

.newsletter-cta-input:focus {
	outline: none;
}

.newsletter-cta-submit {
	flex-shrink: 0;
	padding: 16px 28px 16px 32px;
	border: none;
	clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
	background: var(--color-accent);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
}

.newsletter-cta-submit:hover {
	opacity: 0.85;
}

.newsletter-cta-message {
	max-width: 480px;
	margin: var(--space-3) auto 0;
	font-size: 14px;
	font-weight: 600;
}

.newsletter-cta-message--success {
	color: #2E7D32;
}

.newsletter-cta-message--error {
	color: var(--color-alert);
}

/* --- Mobile: single-column stack below 768px --- */

@media (max-width: 768px) {
	#site-main {
		overflow-x: hidden;
	}

	.home-hero {
		min-height: 460px;
		padding: 0 var(--space-4);
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.hero-image {
		right: var(--space-4);
		width: 82%;
		border-radius: 16px;
	}

	.hero-glass-panel {
		position: absolute;
		top: 50%;
		left: 40%;
		width: 58%;
		height: 32%;
		gap: var(--space-2);
		padding: var(--space-3);
		transform: translate(-50%, -50%);
	}

	.hero-glass-panel::before {
		top: 8px;
		right: -12px;
		bottom: 8px;
		left: -12px;
		border-width: 1px;
		transform: skewX(-18deg);
	}

	.home-hero-pills {
		gap: 6px;
		margin-top: 6px;
	}

	.home-hero-pills .badge {
		padding: 4px 8px;
		font-size: 11px;
	}

	.home-hero-title {
		font-size: 14px;
		line-height: 1.3;
	}

	.home-hero-title a {
		font-size: 14px;
		line-height: 1.3;
	}

	.home-hero-footer {
		gap: 6px;
	}

	.card-read-time {
		font-size: 11px;
	}

	.home-section {
		padding: var(--space-6) var(--space-4);
	}

	.latest-bzz-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
	}

	.bzz-social {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.bzz-social-carousel {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.bzz-social-item {
		flex-basis: calc(100% - 20px);
	}

	.explore-bzz-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bzz-formats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.newsletter-cta-inner {
		padding: var(--space-6) var(--space-4);
	}

	.newsletter-cta-input {
		padding: 14px 24px 14px 16px;
	}

	.newsletter-cta-submit {
		padding: 14px 18px 14px 24px;
	}
}

/* EXPERIMENTAL: mobile hero card width - revert if needed
   Narrows the hero image and nudges it toward center on mobile only.
   Height is untouched. Self-contained and placed after the main mobile
   block so it wins the cascade; to revert, just delete this block. */
@media (max-width: 768px) {
	.hero-image {
		width: 70%;
		transform: translateX(-16px);
	}
}
/* END EXPERIMENTAL: mobile hero card width */

@media (max-width: 480px) {
	.explore-bzz-grid {
		grid-template-columns: 1fr;
	}

	.bzz-formats-grid {
		grid-template-columns: 1fr;
	}

	.bzz-social-carousel {
		padding: 0 34px;
	}

	.bzz-social-item {
		flex-basis: calc(100% - 20px);
	}

	.bzz-social-arrow {
		width: 32px;
		height: 32px;
	}

	.bzz-social-header {
		align-items: flex-start;
	}

	.bzz-social-follow-menu {
		right: auto;
		left: 0;
	}
}

/* EXPERIMENTAL: mobile menu 2-col grid - revert if needed
   Targets .explore-bzz-grid -- the "Explore Bzz Post" cards (category
   name, article count, "Browse X" button). It's already 2-column at
   the 768px breakpoint; the full-width stacked look only happens below
   480px, where a later rule above drops it to 1 column. This keeps it
   at 2 columns all the way down instead. All existing card styles are
   left as-is. Placed after every other .explore-bzz-grid rule
   (including the 480px block above) so it wins the cascade at every
   mobile width; to revert, just delete this block. */
@media (max-width: 768px) {
	.explore-bzz-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}
/* END EXPERIMENTAL: mobile menu 2-col grid */

/* === CATEGORY PAGE === */

/* --- Section 1: Category Hero / Top Story + side grid --- */

.category-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	align-items: start;
	margin-top: var(--space-5);
}

.category-top-story {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.category-top-story:hover,
.category-top-story:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-ink);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.category-top-story-media {
	position: relative;
	flex: 1;
	min-height: 260px;
}

.category-top-story-media img,
.category-top-story-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-editors-pick {
	position: absolute;
	top: 16px;
	left: 0;
	z-index: 2;
	background: var(--color-accent);
	color: #262626;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 12px;
	padding: 6px 16px 6px 12px;
	clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.category-top-story-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.category-top-story-pills {
	display: flex;
	align-items: center;
	gap: 8px;
}

.category-top-story-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.category-top-story-footer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: 4px;
}

.category-top-story-footer .card-arrow {
	position: static;
}

.category-hero-side-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.category-hero-side-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.category-hero-side-card:hover,
.category-hero-side-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-ink);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.category-hero-side-media {
	aspect-ratio: 4 / 3;
}

.category-hero-side-media img,
.category-hero-side-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-hero-side-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-3);
}

.category-hero-side-pills {
	display: flex;
	align-items: center;
	gap: 6px;
}

.category-hero-side-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Subtopic / sort tabs (shared pattern, flag marks the active one) --- */

.category-subtopic-tabs,
.category-sort-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.category-subtopic-tab,
.category-sort-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-ink-soft);
	font-size: 14px;
}

.category-subtopic-tab.is-active,
.category-sort-tab.is-active {
	color: var(--color-ink);
	font-weight: 700;
}

.tab-flag {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--color-accent);
	clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
}

/* --- Section 3: All Stories --- */

.category-all-stories > .section-heading {
	margin: 0 0 4px;
}

.category-all-stories-subheading {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 15px;
}

.category-story-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.category-story-item {
	position: relative;
	display: flex;
	gap: var(--space-4);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-line);
	color: inherit;
	text-decoration: none;
}

.category-story-media {
	flex: 0 0 120px;
	width: 120px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.category-story-media img,
.category-story-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-story-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.category-story-pills {
	display: flex;
	align-items: center;
	gap: 8px;
}

.category-story-title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-ink);
}

.category-story-excerpt {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.category-story-meta {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 13px;
}

.category-pagination-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.category-pagination-row .pagination {
	margin-top: 0;
}

.category-search-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-ink);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.category-search-more:hover {
	text-decoration: underline;
}

.category-empty-message {
	margin-top: var(--space-5);
	color: var(--color-ink-soft);
	font-size: 15px;
}

/* --- Mobile: single-column stack below 768px --- */

@media (max-width: 768px) {
	.category-hero-grid {
		grid-template-columns: 1fr;
	}

	.category-hero-side-grid {
		grid-template-columns: 1fr;
	}

	.category-story-item {
		flex-direction: column;
	}

	.category-story-media {
		width: 100%;
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}
}

/* === SEARCH PAGE === */

.search-empty-message {
	margin: var(--space-6) 0;
	color: var(--color-ink-soft);
	font-size: 16px;
	text-align: center;
}

.search-form-wrap {
	max-width: 600px;
	margin: var(--space-6) auto 0;
}

.search-form {
	display: flex;
	gap: var(--space-3);
	width: 100%;
}

.search-form label {
	flex: 1;
	min-width: 0;
	display: block;
}

.search-form .search-field {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #FFFFFF;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 15px;
}

.search-form .search-field:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.search-form .search-submit {
	flex-shrink: 0;
	padding: 14px 24px;
	border: none;
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	white-space: nowrap;
}

.search-form .search-submit:hover {
	opacity: 0.85;
}

/* --- Mobile: single-column below 768px --- */

@media (max-width: 768px) {
	.search-form {
		flex-direction: column;
	}
}

/* === CARDS === */

.card-read-time {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 13px;
	color: #78716C;
	mix-blend-mode: multiply;
}

.card-arrow {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6B7280;
	transition: color 160ms ease;
}

/* ==========================================================================
   Shared Grid Cards (Section archives, search, 404, related posts)
   ========================================================================== */

/* Shared placeholder for posts with no featured image */
.media-placeholder {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: var(--color-ink);
}

.media-placeholder::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 35%;
	background: var(--color-accent);
	clip-path: polygon(40% 0, 100% 0, 60% 100%, 0% 100%);
}

/* --- Grid (shared with Section archives, search, 404, related posts) --- */

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

@media (max-width: 768px) {
	.site-main {
		padding: var(--space-5) var(--space-4);
	}

	.home .site-main {
		padding-top: var(--space-2);
	}

	.grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	article {
		padding: var(--space-4);
		margin-bottom: var(--space-4);
	}
}

/* Grid cards reuse the base `article` card styling; clip the thumbnail
   to the card's rounded corners instead of padding around it. */
.card {
	padding: 0;
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card:hover,
.card:focus-within {
	transform: translateY(-2px);
	border-color: var(--color-line);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.grid-item-media-wrap {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
}

.grid-item-media {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.grid-item-media-inner {
	display: block;
	width: 100%;
	height: 100%;
}

.grid-item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grid-item-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	border-radius: var(--radius);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
}

.grid-item-badge-category,
.grid-item-arrow,
.grid-item-read-time {
	display: none;
}

.grid-item-video-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--color-accent);
	color: var(--color-ink);
	font-size: 10px;
	font-weight: 800;
	padding: 6px 10px;
}

/* Play-icon badge marking video posts, drawn as a CSS triangle */
.play-badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.play-badge::after {
	content: "";
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--color-ink);
}

.grid-item-body {
	padding: 16px;
}

.grid-item-title {
	font-size: 18px;
	margin: 0;
}

/* --- Mobile: tall portrait card with a diagonal media/body seam --- */

@media (max-width: 768px) {
	.card {
		border: none;
		border-radius: 20px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	}

	.grid-item-media-wrap {
		aspect-ratio: auto;
		height: 280px;
	}

	.grid-item-badges {
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.grid-item-badge,
	.grid-item-badge-category {
		position: static;
		display: inline-flex;
		background: var(--color-accent);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 10px;
		color: var(--color-ink);
		font-size: 11px;
		font-weight: 700;
		text-transform: none;
		letter-spacing: normal;
		padding: 4px 10px;
	}

	.grid-item-badge-category {
		display: inline-flex;
		background: #262626;
		color: #FFFFFF;
	}

	.grid-item-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #FFFFFF;
		color: var(--color-ink);
		font-size: 14px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
	}

	.grid-item-body {
		padding: 20px;
	}

	.grid-item-title {
		font-family: var(--font-display);
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--color-ink);
	}

	.grid-item-read-time {
		display: inline-block;
		margin-top: 10px;
	}
}

/* --- Pagination (the_posts_pagination) --- */

.pagination {
	margin-top: 40px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 14px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--radius-sm);
	color: var(--color-ink-soft);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	background: var(--color-accent-soft);
	color: var(--color-ink);
}

.pagination .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-ink);
	font-weight: 600;
	clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

.pagination .page-numbers.dots {
	background: none;
}

/* === SINGLE POST === */

/* --- Breadcrumbs --- */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 12px;
}

.breadcrumbs li {
	color: var(--color-ink-soft);
	font-weight: 400;
}

.breadcrumbs li:not(:first-child)::before {
	content: "/";
	color: var(--color-ink-soft);
	margin: 0 8px;
}

.breadcrumbs a {
	color: var(--color-ink-soft);
	text-decoration: none;
	font-weight: 400;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

/* --- Header: breadcrumb + Section flag, title, dek, meta line --- */

.single-header {
	max-width: 740px;
	margin: 0 auto 24px;
	padding: 0 var(--space-4);
}

.single-header-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.single-header-top .breadcrumbs {
	margin: 0;
}

.single-section-flag {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	background: var(--color-accent);
	color: #262626;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 12px;
	padding: 6px 18px 6px 16px;
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	text-decoration: none;
}

.single-title {
	font-size: 40px;
	line-height: 1.12;
	margin: 0 0 10px;
}

.single-dek {
	margin: 0 0 var(--space-4);
	color: var(--color-ink-soft);
	font-size: 16px;
	line-height: 1.5;
}

.single-meta-line {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 13px;
}

.single-divider {
	height: 1px;
	background: var(--color-line);
	margin-top: var(--space-4);
}

/* --- Featured image (Article / fallback single.php) --- */

.single-featured-wrap {
	max-width: 740px;
	margin: 0 auto;
	padding: 0 var(--space-4);
}

.single-featured-image {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
	clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%);
	display: block;
}

/* --- Media: video embed / placeholder (Video Post) --- */

.single-media {
	max-width: 740px;
	margin: 32px auto;
	padding: 0 var(--space-4);
}

.single-media .media-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 480px;
	border-radius: var(--radius);
}

.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 480px;
	border-radius: var(--radius);
	overflow: hidden;
}

.video-embed iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* --- Article body --- */

.post-body {
	max-width: 740px;
	margin: 32px auto 0;
	padding: 0 var(--space-4);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-ink);
}

.post-body p {
	margin: 0 0 1.2em;
}

.post-body h2,
.post-body h3 {
	font-family: var(--font-display);
	font-weight: 800;
	margin: 1.5em 0 0.6em;
}

.post-body blockquote {
	margin: 1.5em 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--color-accent);
	color: var(--color-ink-soft);
	font-style: italic;
}

.post-body ul,
.post-body ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.post-body li {
	margin-bottom: 0.4em;
}

/* --- Related posts --- */

.single-related {
	max-width: 740px;
	margin: var(--space-7) auto 0;
}

/* --- Mobile: single-column below 768px --- */

@media (max-width: 768px) {
	.single-title {
		font-size: 30px;
	}

	.single-featured-image {
		max-height: 280px;
	}

	.single-header-top {
		flex-wrap: nowrap;
		align-items: center;
	}

	.single-header-top nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	.breadcrumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.breadcrumbs::-webkit-scrollbar {
		display: none;
	}

	.breadcrumbs li {
		flex-shrink: 0;
	}

	.breadcrumbs li[aria-current="page"] {
		display: none;
	}
}

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

.error-404 {
	padding: 120px var(--space-4);
}

.error-404-message {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.error-404-number {
	font-family: var(--font-display);
	font-size: 120px;
	font-weight: 800;
	line-height: 1;
	color: #DDFA6C;
	margin: 0;
}

.error-404-title {
	font-size: 32px;
	color: var(--color-ink);
	margin: var(--space-4) 0 0;
}

.error-404-text {
	color: var(--color-ink-soft);
	font-size: 16px;
	margin: var(--space-3) 0 0;
}

.error-404-search {
	margin: var(--space-6) 0;
}

.error-404-search-label {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-ink);
	margin: 0 0 var(--space-3);
}

.error-404-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 24px;
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
}

.error-404-cta:hover {
	opacity: 0.85;
}

/* --- Mobile: below 768px --- */

@media (max-width: 768px) {
	.error-404 {
		padding: 64px var(--space-4);
	}

	.error-404-number {
		font-size: 72px;
	}

	.error-404-title {
		font-size: 26px;
	}
}

/* ==========================================================================
   Page Template
   ========================================================================== */

.page-content {
	max-width: 760px;
	margin: 0 auto;
}

.sections-overview {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
}

.sections-overview-title {
	font-size: 20px;
	margin: 0 0 20px;
}

.sections-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.page-contact {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	font-size: 15px;
}

.page-contact a {
	color: var(--color-accent);
}

/* ==========================================================================
   Card skeleton loading state (homepage + category pages)

   main.js adds `.loading` to a card as soon as it finds an <img> inside it,
   then removes it once that image fires `load`/`error` (or immediately if
   it's already cached). The skeleton overlay is a ::after sized to the
   existing media box (border-radius: inherit, or clipped by the card's own
   overflow: hidden where the media itself has no radius), so it always
   matches that card's real dimensions without duplicating any sizing here.
   ========================================================================== */

@keyframes skeleton-shimmer {
	0% {
		background-position: 150% 0;
	}

	100% {
		background-position: -150% 0;
	}
}

.loading .hero-image-link,
.loading .latest-bzz-feature-media,
.loading .latest-bzz-list-media,
.loading .category-top-story-media,
.loading .category-hero-side-media,
.loading .category-story-media {
	position: relative;
}

/* The hero image is absolutely positioned against .home-hero itself (its
   .hero-image-link wrapper has no intrinsic size), so the loading state
   gives the link the same box the image occupies just so the shimmer
   overlay below has something to size itself against. */
.loading .hero-image-link {
	position: absolute;
	top: 0;
	right: 0;
	width: 65%;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
}

.loading .hero-image-link img,
.loading .latest-bzz-feature-media img,
.loading .latest-bzz-list-media img,
.loading .category-top-story-media img,
.loading .category-hero-side-media img,
.loading .category-story-media img {
	opacity: 0;
}

.loading .hero-image-link::after,
.loading .latest-bzz-feature-media::after,
.loading .latest-bzz-list-media::after,
.loading .category-top-story-media::after,
.loading .category-hero-side-media::after,
.loading .category-story-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #E7E5E4 25%, #F2F1EF 37%, #E7E5E4 63%);
	background-size: 400% 100%;
	animation: skeleton-shimmer 1.4s ease infinite;
}

.hero-image,
.latest-bzz-feature-media img,
.latest-bzz-list-media img,
.category-top-story-media img,
.category-hero-side-media img,
.category-story-media img {
	transition: opacity 240ms ease;
}

.loading .home-hero-title,
.loading .home-hero-title a,
.loading .latest-bzz-feature-title,
.loading .latest-bzz-list-title,
.loading .category-top-story-title,
.loading .category-hero-side-title,
.loading .category-story-title,
.loading .card-read-time,
.loading .category-story-meta,
.loading .category-story-excerpt {
	border-radius: 4px;
	color: transparent !important;
	background: linear-gradient(90deg, #E7E5E4 25%, #F2F1EF 37%, #E7E5E4 63%);
	background-size: 400% 100%;
	animation: skeleton-shimmer 1.4s ease infinite;
	transition: opacity 240ms ease;
}