/* ==========================================================================
   Static-site layer on top of theme.css (the WordPress theme styles).
   ========================================================================== */

.icon,
.card__placeholder,
.empty-state__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card__placeholder,
.empty-state__icon {
	stroke-width: 1.6;
}

/* Sticky header ---------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 6px 0 -4px rgba(30, 49, 72, 0.08);
}

html {
	scroll-padding-top: 110px;
}

.primary-nav .current-menu-item > a {
	background: var(--gold-tint);
	box-shadow: inset 0 0 0 var(--stroke) var(--ink);
}

@media (max-width: 860px) {
	.primary-nav.is-open {
		animation: lot-drop 0.18s ease-out;
	}

	.primary-nav a {
		padding: 12px 16px;
		font-size: 1.05rem;
		border-radius: var(--radius-sm);
	}

	.primary-nav .menu {
		gap: 2px;
		padding-top: 8px;
		border-top: var(--stroke) dashed var(--rule);
	}
}

@keyframes lot-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (max-width: 420px) {
	.brand__badge {
		width: 40px;
		height: 40px;
	}

	.site-title {
		font-size: 1.05rem;
	}

	.site-header__tools .icon-button {
		width: 42px;
		height: 42px;
	}
}

/* Hero extras ------------------------------------------------------------ */

.hero__art::before {
	content: none;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ink-soft);
}

.hero__stats strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--ink);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.button--ghost {
	background: var(--surface);
	color: var(--ink);
}

@media (max-width: 760px) {
	.hero__copy {
		text-align: center;
	}

	.hero__copy .kicker,
	.hero__stats,
	.hero__actions {
		justify-content: center;
	}

	.hero__text {
		margin-inline: auto;
	}
}

/* Topic benches ---------------------------------------------------------- */

.topics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.topic {
	--accent: var(--green);
	--tint: var(--green-tint);
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: var(--stroke) solid var(--ink);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topic--gold {
	--accent: var(--gold);
	--tint: var(--gold-tint);
}

.topic--blue {
	--accent: var(--blue);
	--tint: var(--blue-tint);
}

.topic:hover {
	color: var(--ink);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--accent);
}

.topic__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border: var(--stroke) solid var(--ink);
	border-radius: 12px;
	background: var(--tint);
}

.topic__icon .icon {
	width: 30px;
	height: 30px;
}

.topic__name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.1rem;
	line-height: 1.2;
}

.topic__count {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-soft);
}

@media (max-width: 1180px) {
	.topics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.topics {
		display: flex;
		gap: 12px;
		margin-inline: calc(-1 * var(--gutter));
		padding: 4px var(--gutter) 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.topics li {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
}

/* Featured card image variant ------------------------------------------- */

.card__media--art {
	background-color: #fff;
	background-image: none;
}

.card__media--art img {
	object-fit: contain;
	padding: 6%;
}

/* Sidebar & widgets (plain HTML versions) ------------------------------- */

@media (max-width: 1000px) and (min-width: 641px) {
	.sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.widget-about {
	text-align: center;
}

.widget-about img {
	width: 110px;
	height: 110px;
	margin: 4px auto 12px;
	border: var(--stroke) solid var(--ink);
	border-radius: 50%;
}

.widget-about p {
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.widget-about .widget-title {
	justify-content: center;
}

.widget-about .widget-about__name {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--ink);
}

.widget p:last-child {
	margin-bottom: 0;
}

.widget .search-form {
	width: 100%;
}

.post-mini {
	display: grid;
	gap: 2px;
}

.post-mini time {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-soft);
}

.newsletter {
	background: var(--gold-tint) !important;
	box-shadow: 5px 5px 0 var(--ink);
}

.newsletter p {
	font-size: 0.95rem;
}

.newsletter form {
	display: grid;
	gap: 10px;
}

.newsletter input[type="email"] {
	width: 100%;
	padding: 11px 16px;
	border: var(--stroke) solid var(--ink);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}

.newsletter .button {
	justify-content: center;
}

.form-note {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--green-deep);
	min-height: 1em;
	margin: 0;
}

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

.site-footer .widget p {
	color: #c3cdd9;
	font-size: 0.95rem;
}

@media (max-width: 1000px) and (min-width: 761px) {
	.footer-widgets {
		gap: 28px;
	}
}

/* Single post extras ----------------------------------------------------- */

.progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--green), var(--gold), var(--blue));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.breadcrumbs {
	margin: 0 0 18px;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--ink-soft);
}

.breadcrumbs a {
	color: var(--ink-soft);
}

.breadcrumbs span[aria-hidden] {
	margin-inline: 6px;
}

.entry-hero--art {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 8;
	border: var(--stroke) solid var(--ink);
	border-radius: var(--radius);
	background-color: var(--green-tint);
	background-image: radial-gradient(rgba(30, 49, 72, 0.18) 1px, transparent 1.2px);
	background-size: 16px 16px;
	box-shadow: 8px 8px 0 var(--gold-tint);
}

.entry-hero--art img {
	width: auto;
	height: 82%;
	border-radius: 50%;
	box-shadow: none;
	background: #fff;
}

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-sm);
}

.table-wrap table {
	min-width: 520px;
}

.callout {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border: var(--stroke) solid var(--ink);
	border-radius: var(--radius-sm);
	background: var(--blue-tint);
	font-size: 1rem;
	line-height: 1.6;
}

.callout .icon {
	--accent: var(--gold);
	width: 34px;
	height: 34px;
}

.callout p {
	margin: 0;
}

.parts-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	padding: 18px 20px 18px 2.4em !important;
	border: var(--stroke) dashed var(--ink-faint);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.7);
	font-size: 1rem;
}

@media (max-width: 600px) {
	.parts-list {
		grid-template-columns: 1fr;
	}

	.entry-content {
		font-size: 1.04rem;
	}

	.entry-hero--art {
		aspect-ratio: 4 / 3;
		box-shadow: 5px 5px 0 var(--gold-tint);
	}
}

.comment-form p {
	margin-bottom: 16px;
}

.comment-form .form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 600px) {
	.comment-form .form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.comment-list .children {
	padding-left: 0;
}

/* Back to top ------------------------------------------------------------ */

.to-top {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 30;
	box-shadow: 3px 3px 0 var(--ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top .icon {
	transform: rotate(-90deg);
}

/* Search results --------------------------------------------------------- */

.card[hidden] {
	display: none;
}

/* Touch devices: no lift-on-hover jitter -------------------------------- */

@media (hover: none) {
	.card:hover,
	.topic:hover,
	.post-navigation a:hover {
		transform: none;
		box-shadow: none;
	}

	.card:hover .card__media img,
	.card:hover .card__placeholder {
		transform: none;
	}
}

/* Server-rendered forms ------------------------------------------------- */

.notice {
	padding: 12px 16px;
	border: var(--stroke) solid var(--ink);
	border-radius: var(--radius-sm);
	background: var(--green-tint);
	font-size: 0.95rem;
}

.notice--error,
.form-note--error {
	background: #fbe3dc;
	color: #8a2a12;
}

.form-note--error {
	background: none;
}

.hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.avatar--initial {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--blue-tint);
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--ink);
}

.cancel-reply {
	margin-left: 10px;
	font-family: var(--font-mono);
	font-size: 0.8rem;
}

.comment-form small {
	font-weight: 400;
	color: var(--ink-soft);
}

.preview-bar {
	margin: 0;
	padding: 10px var(--gutter);
	background: var(--gold);
	border-bottom: var(--stroke) solid var(--ink);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	text-align: center;
}

.entry-content .callout > div > :last-child {
	margin-bottom: 0;
}

/* Extra category accents ------------------------------------------------- */
/* theme.css ships green, gold and blue. The list lives in lib/icons.mjs (ACCENTS). */

:root {
	--coral: #e0673f;
	--coral-deep: #a8401d;
	--coral-tint: #fbe2d8;
	--teal: #2a9d8f;
	--teal-deep: #1c6f65;
	--teal-tint: #d9f0ec;
	--plum: #8a5aa8;
	--plum-deep: #633c7f;
	--plum-tint: #ece2f3;
	--rose: #d9577f;
	--rose-deep: #a2345a;
	--rose-tint: #fae0e8;
	--slate: #5f7389;
	--slate-deep: #3e4f62;
	--slate-tint: #e3e8ee;
}

.chip--coral {
	--chip-bg: var(--coral-tint);
	--chip-dot: var(--coral);
}

.card:has(.chip--coral),
.topic--coral {
	--accent: var(--coral);
}

.card__media--coral,
.topic--coral {
	--tint: var(--coral-tint);
}

.page-header--coral .kicker {
	color: var(--coral-deep);
}

.chip--teal {
	--chip-bg: var(--teal-tint);
	--chip-dot: var(--teal);
}

.card:has(.chip--teal),
.topic--teal {
	--accent: var(--teal);
}

.card__media--teal,
.topic--teal {
	--tint: var(--teal-tint);
}

.page-header--teal .kicker {
	color: var(--teal-deep);
}

.chip--plum {
	--chip-bg: var(--plum-tint);
	--chip-dot: var(--plum);
}

.card:has(.chip--plum),
.topic--plum {
	--accent: var(--plum);
}

.card__media--plum,
.topic--plum {
	--tint: var(--plum-tint);
}

.page-header--plum .kicker {
	color: var(--plum-deep);
}

.chip--rose {
	--chip-bg: var(--rose-tint);
	--chip-dot: var(--rose);
}

.card:has(.chip--rose),
.topic--rose {
	--accent: var(--rose);
}

.card__media--rose,
.topic--rose {
	--tint: var(--rose-tint);
}

.page-header--rose .kicker {
	color: var(--rose-deep);
}

.chip--slate {
	--chip-bg: var(--slate-tint);
	--chip-dot: var(--slate);
}

.card:has(.chip--slate),
.topic--slate {
	--accent: var(--slate);
}

.card__media--slate,
.topic--slate {
	--tint: var(--slate-tint);
}

.page-header--slate .kicker {
	color: var(--slate-deep);
}