/*
 * Template-level styles (front page, author page, shared post cards).
 * Post-card styles are shared — archive/search (T6) should reuse them.
 *
 * Everything here follows the same three rules as the rest of the skin:
 * no radius, no shadow, and every boundary is a rule.
 */

/* ---------- Front page ---------- */

.xd7079fa9 {
	padding-bottom: var(--sn-sp-16);
}

/* ---------- Author page (T5) ---------- */

.x8e601b39 {
	padding-bottom: var(--sn-sp-16);
}

/*
 * The author header is a REGION MARKED BY RULES, not a card: a full-width
 * hairline above and below, no fill. E-E-A-T furniture reads more credible
 * when it is set like a masthead than when it is packaged like a promo.
 */
.xcaa5b886 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-6);
	background: transparent;
	border: 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: none;
	padding: var(--sn-sp-8) 0;
	margin: var(--sn-sp-8) 0;
}

/*
 * SQUARE. The sibling skin made this a circle because its shape language was
 * circular; this one has no curves at all, and a portrait cropped to a hard
 * square with a vermillion rule down one edge is the editorial version of the
 * same object. The rule is on the LEFT EDGE ONLY — a full accent frame around
 * a face reads as a badge.
 */
.x443d21e4 {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 0;
	object-fit: cover;
	border-left: var(--sn-sp-1) solid var(--sn-primary);
}

.x6230276a {
	margin: 0 0 var(--sn-sp-2);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-primary);
}

.xab82355c {
	margin: 0;
}

.x17f14cea {
	margin: var(--sn-sp-2) 0 0;
	color: var(--sn-text-muted);
}

.x54f28090 {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: var(--sn-sp-4) 0 0;
	padding: 0;
}

/* Expertise chips: bordered mono marks, matching .xc2439fd3 in base.css. */
.x3d479dce {
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-wide);
	color: var(--sn-text-muted);
}

.x4116fd83 {
	margin: var(--sn-sp-4) 0 0;
	max-width: 65ch;
}

.x0f24f7e4 {
	list-style: none;
	display: flex;
	gap: var(--sn-sp-4);
	margin: var(--sn-sp-4) 0 0;
	padding: 0;
	font-size: var(--sn-fs-sm);
}

.x46649974 {
	margin: 0 0 var(--sn-sp-6);
}

@media (min-width: 768px) {
	.xcaa5b886 {
		flex-direction: row;
	}

	.x443d21e4 {
		width: 128px;
		height: 128px;
	}
}

/* ---------- Single post / page (T4) ---------- */

.xa3793a69,
.x4ad9c8be {
	padding-bottom: var(--sn-sp-16);
}

/* Breadcrumbs as a technical detail line — mono, tracked, muted. */
.x3f22458c {
	margin: var(--sn-sp-6) 0 0;
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	letter-spacing: var(--sn-tracking-wide);
	color: var(--sn-text-muted);
}

.x3f22458c a {
	color: var(--sn-text-muted);
}

.x3f22458c a:hover,
.x3f22458c a:focus {
	color: var(--sn-primary-hover);
}

.x6633e023 {
	margin: 0 var(--sn-sp-2);
	color: var(--sn-border-strong);
}

.x18a3205a,
.x8a7a2bc1 {
	margin: var(--sn-sp-4) 0 var(--sn-sp-8);
}

.xa8587572 > :first-child {
	margin-top: 0;
}

/* ---------- Post cards (shared with archives, T6) ---------- */

.x341c5ad1 {
	display: grid;
	gap: var(--sn-sp-6);
	margin-bottom: var(--sn-sp-8);
}

/*
 * The system's card, verbatim: 1px border, transparent fill, sharp corners, no
 * shadow. The hover is the one it specifies — "border color lightens,
 * background color change. No lift, no shadow, no scale" — which is why the
 * transform and box-shadow the sibling skin used here are gone rather than
 * merely reduced.
 */
.x3e8370da {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: background var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.x341c5ad1 .x3e8370da:hover,
.x341c5ad1 .x3e8370da:focus-within {
	background: var(--sn-surface);
	border-color: var(--sn-border-strong);
}

.x82e6e4ae {
	overflow: hidden;
}

.x82e6e4ae img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--sn-motion-slow) var(--sn-ease);
}

/* The ONE image effect in the system: the picture scales inside its clipped
   box over 500ms while the box holds still. */
.x341c5ad1 .x3e8370da:hover .x82e6e4ae img,
.x341c5ad1 .x3e8370da:focus-within .x82e6e4ae img {
	transform: scale(1.05);
}

.x2fa6fbe1 {
	padding: var(--sn-sp-6);
}

.xdfef4b74 {
	margin: 0 0 var(--sn-sp-3);
	font-size: var(--sn-fs-lg);
}

.xdfef4b74 a {
	color: var(--sn-heading);
	text-decoration: none;
}

/* BRIGHTENS, like every hover on this dark skin — and note this is the exact
   opposite of what the same rule said on the light sibling, where it had to
   darken. Direction is a property of the ground, not of the component. */
.xdfef4b74 a:hover,
.xdfef4b74 a:focus {
	color: var(--sn-primary-hover);
}

.xecb915b9 {
	margin: 0 0 var(--sn-sp-3);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	letter-spacing: var(--sn-tracking-wide);
	color: var(--sn-text-muted);
}

.x358cbfcc {
	font-size: var(--sn-fs-sm);
}

.x358cbfcc > :last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.x341c5ad1 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.x341c5ad1 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.x3e8370da,
	.x82e6e4ae img,
	.x341c5ad1 .x3e8370da:hover .x82e6e4ae img {
		transform: none;
		transition: none;
	}
}

/* ---------- Archive / Search (T6) ---------- */

.x8b43441b,
.x4cd8c6e7 {
	padding-bottom: var(--sn-sp-16);
}

.x7f20c60b {
	margin: var(--sn-sp-8) 0;
	padding-bottom: var(--sn-sp-6);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

.xb52b2a30 {
	margin: 0;
}

.xb52b2a30 span {
	color: var(--sn-accent);
}

.x02c1aed9 {
	margin: var(--sn-sp-4) 0 0;
	max-width: 65ch;
	color: var(--sn-text-muted);
}

.xeb3dfab3 {
	margin-top: var(--sn-sp-6);
	max-width: 520px;
}

.x2bbda156,
.x124816b9 {
	margin: var(--sn-sp-8) 0;
}

/* ---------- Search form (used by search + 404) ---------- */

.search-form {
	display: flex;
	gap: var(--sn-sp-2);
}

.search-form label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* Shape, fill and the edge come from the shared input rules in base.css —
   this only sets what is specific to the search row. */
.search-form .search-field {
	width: 100%;
	font-size: var(--sn-fs-base);
}

.search-form .search-field::placeholder {
	color: var(--sn-text-muted);
}

/* No bespoke outline here: base.css has a GLOBAL :focus-visible ring, and this
   rule was once a plain :focus, so it also fired on mouse clicks. Only the
   border tint is local; the ring is the shared one. */
.search-form .search-field:focus {
	border-color: var(--sn-primary);
}

/* The accent block, matching .x4b925f13. Ink is near-black: white on vermillion
   is 3.40:1 and must never be used. */
.search-form .search-submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-6);
	border: var(--sn-border-w) solid var(--sn-primary);
	border-radius: 0;
	background: var(--sn-primary);
	color: var(--sn-primary-dark);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            border-color var(--sn-motion-fast) var(--sn-ease);
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	color: var(--sn-bg);
}

/* ---------- Posts navigation (archive/search/author) ---------- */

.posts-navigation {
	margin-top: var(--sn-sp-12);
	padding-top: var(--sn-sp-6);
	border-top: var(--sn-border-w) solid var(--sn-border);
}

.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sn-sp-4);
}

/* Pagination links are the outlined button — same object as .xf43e5c51,
   restyled here because WordPress prints them as bare anchors. */
.posts-navigation .nav-links a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--sn-sp-2) var(--sn-sp-6);
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-heading);
	border-radius: 0;
	color: var(--sn-heading);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease);
}

.posts-navigation .nav-links a:hover,
.posts-navigation .nav-links a:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	color: var(--sn-bg);
	text-decoration: none;
}

/* ---------- 404 (T6) ---------- */

.xef3e3508 {
	padding: var(--sn-sp-16) 0;
	text-align: center;
}

/*
 * The code is the page. This is the one place the theme spends the system's
 * decorative numeral scale on something a reader actually looks at, and it is
 * set in mono because a status code is technical detail, not a headline.
 */
.x525b46a7 {
	margin: 0;
	font-family: var(--sn-font-mono);
	font-size: clamp(4.5rem, 2rem + 12vw, var(--sn-fs-6xl));
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--sn-tracking-tighter);
	color: var(--sn-primary);
}

.x618dd49c {
	margin: var(--sn-sp-4) 0 0;
}

.xffa91bae {
	margin: var(--sn-sp-4) auto var(--sn-sp-8);
	max-width: 52ch;
	color: var(--sn-text-muted);
}

.xfb59bc77 {
	margin: 0 0 var(--sn-sp-8);
}

.xb44bc77d {
	max-width: 480px;
	margin: 0 auto var(--sn-sp-16);
}

.x0b4a1b6b {
	margin: 0 0 var(--sn-sp-6);
	text-align: left;
}

/* Card text stays left-aligned inside the centred 404 column. */
.xef3e3508 .x3e8370da {
	text-align: left;
}