:root {
	--plogs-shell-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--plogs-shell-ink: #403d36;
	--plogs-shell-muted: #777166;
	--plogs-shell-paper: #f8f7f3;
	--plogs-shell-line: #e4e0d7;
	--plogs-shell-accent: #5c7d50;
}

.plogs-site-header,
.plogs-site-footer {
	position: relative;
	z-index: 20;
	box-sizing: border-box;
	width: 100%;
	background: var(--plogs-shell-paper);
	color: var(--plogs-shell-ink);
	font-family: var(--plogs-shell-font);
}

.plogs-site-header *,
.plogs-site-footer * { box-sizing: border-box; }

.plogs-site-header a,
.plogs-site-footer a { color: inherit !important; text-decoration: none !important; }

.plogs-site-header__inner,
.plogs-site-footer__inner {
	width: min(1240px, calc(100% - 64px));
	margin-inline: auto;
}

.plogs-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 104px;
	border-bottom: 1px solid var(--plogs-shell-line);
}

.plogs-site-brand {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 14px;
}

/* Prevent the block theme's rectangular mouse-focus outline on the brand. */
.plogs-site-brand:focus {
	outline: 0 !important;
	box-shadow: none !important;
}

/* Keep a deliberate, accessible cue for keyboard navigation. */
.plogs-site-brand:focus-visible {
	border-radius: 999px;
	outline: 2px solid #7d9874 !important;
	outline-offset: 6px;
}

.plogs-site-brand img,
.plogs-site-brand__fallback {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.plogs-site-brand img { display: block; object-fit: cover; }

.plogs-site-brand__fallback {
	display: grid;
	place-items: center;
	background: #e9eee6;
	color: #3f6636;
	font-size: 18px;
	font-weight: 720;
}

.plogs-site-brand strong {
	overflow: hidden;
	font-size: 18px;
	font-weight: 680;
	letter-spacing: -.02em;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plogs-site-nav { display: flex; align-items: center; gap: clamp(20px, 2.7vw, 40px); }

.plogs-site-nav a {
	position: relative;
	padding: 12px 0;
	font-size: 14px;
	font-weight: 590;
}

.plogs-site-nav a::after {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	height: 1px;
	background: var(--plogs-shell-accent);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .2s ease;
}

.plogs-site-nav a:hover::after,
.plogs-site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.plogs-site-footer { margin-top: clamp(72px, 9vw, 128px); }

.plogs-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) auto auto;
	gap: 32px 64px;
	align-items: center;
	min-height: 168px;
	border-top: 1px solid var(--plogs-shell-line);
}

.plogs-site-footer strong { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 680; }
.plogs-site-footer p { margin: 0 !important; color: var(--plogs-shell-muted); font-size: 12px !important; line-height: 1.7 !important; }
.plogs-site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.plogs-site-footer nav a { font-size: 13px; font-weight: 600; }
.plogs-site-footer__copyright { white-space: nowrap; }

@media (max-width: 680px) {
	.plogs-site-header__inner,
	.plogs-site-footer__inner { width: calc(100% - 40px); }

	.plogs-site-header__inner {
		display: grid;
		gap: 12px;
		min-height: auto;
		padding: 18px 0 14px;
	}

	.plogs-site-brand { gap: 11px; }
	.plogs-site-brand img,
	.plogs-site-brand__fallback { flex-basis: 40px; width: 40px; height: 40px; }
	.plogs-site-brand strong { font-size: 16px; }

	.plogs-site-nav {
		width: calc(100vw - 40px);
		gap: 24px;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.plogs-site-nav::-webkit-scrollbar { display: none; }
	.plogs-site-nav a { flex: 0 0 auto; padding-block: 8px; font-size: 13px; }

	.plogs-site-footer { margin-top: 76px; }
	.plogs-site-footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
	.plogs-site-footer nav { order: 2; }
	.plogs-site-footer__copyright { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
	.plogs-site-header *, .plogs-site-header *::before, .plogs-site-header *::after { transition: none !important; }
}

.plogs-site-brand__picture { display: contents; }