/*
 * Template-level styles (front page, author page, shared post cards).
 * Post-card styles are shared — archive/search (T6) reuse them.
 *
 * "Industrial Modern": everything is a KPI card — white on the #FCF8FB ground,
 * 1px #E5E1E4 edge, radius 12, the subtle navy shadow; hover darkens the edge
 * and deepens the shadow (no movement). Orange only as fills, bars and rings.
 */

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

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

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

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

/* The author header — the same object as the sn/author-box block, one scale
   up (blocks/author-box/style.css). Change the two together. */
.x167cc6cf {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-6);
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	box-shadow: var(--sn-shadow);
	padding: var(--sn-sp-6);
	margin: var(--sn-sp-8) 0;
}

/* Round portrait in a 3px orange ring (a shape — orange is fine). */
.x9a3ec852 {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--sn-signal);
	padding: 3px;
	background: var(--sn-surface);
}

.x68d6ec8d {
	margin: 0 0 var(--sn-sp-2);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.xdd37af93 {
	margin: 0;
}

/* Role: uppercase 900 in dark amber (6.17 on white). */
.xad54d62e {
	margin: var(--sn-sp-2) 0 0;
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-signal-ink);
}

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

/* Expertise chips: the same object as .x2d9165f5 in base.css. */
.x3ca920b4 {
	display: inline-flex;
	align-items: center;
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: var(--sn-surface-2);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-pill);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	color: var(--sn-heading);
}

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

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

.x1b7a87f2 a,
.x1b7a87f2 a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--sn-motion) var(--sn-ease),
	            color var(--sn-motion) var(--sn-ease);
}

.x1b7a87f2 a:hover,
.x1b7a87f2 a:focus {
	background: var(--sn-heading);
	color: #FFFFFF;
}

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

@media (min-width: 768px) {
	.x167cc6cf {
		flex-direction: row;
		padding: var(--sn-sp-8);
	}

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

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

.xdf2889e8,
.x22f314a0 {
	padding-bottom: var(--sn-sp-16);
}

/* Breadcrumbs: a small uppercase 900 label, muted (6.56). */
.x91014171 {
	margin: var(--sn-sp-6) 0 0;
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.x91014171 a,
.x91014171 a:visited {
	color: var(--sn-text-muted);
}

.x91014171 a:hover,
.x91014171 a:focus {
	color: var(--sn-heading);
}

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

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

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

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

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

.x172612f5 {
	display: flex;
	flex-direction: column;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
	transition: box-shadow var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.x52b97038 .x172612f5:hover,
.x52b97038 .x172612f5:focus-within {
	border-color: var(--sn-border-strong);
	box-shadow: var(--sn-shadow-md);
}

.xec6dd657 {
	overflow: hidden;
}

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

.x52b97038 .x172612f5:hover .xec6dd657 img,
.x52b97038 .x172612f5:focus-within .xec6dd657 img {
	transform: scale(1.03);
}

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

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

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

.xbf7a75f1 a:hover,
.xbf7a75f1 a:focus {
	color: var(--sn-signal-ink);
}

.x1164a89b {
	margin: 0 0 var(--sn-sp-3);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.x899f97e4 {
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-soft);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
	.x172612f5,
	.xec6dd657 img,
	.x52b97038 .x172612f5:hover .xec6dd657 img {
		transform: none;
		transition: none;
	}
}

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

.xb933af3d,
.xaa74e3d6 {
	padding-bottom: var(--sn-sp-16);
}

.xbba824d8 {
	margin: var(--sn-sp-8) 0;
	padding: var(--sn-sp-6);
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	box-shadow: var(--sn-shadow);
}

@media (min-width: 768px) {
	.xbba824d8 {
		padding: var(--sn-sp-8);
	}
}

.x14f5c251 {
	margin: 0;
}

/* The searched term: navy type over an orange highlighter (orange is not
   text-safe on light grounds, 1.93). */
.x14f5c251 span {
	color: var(--sn-heading);
	background: linear-gradient(transparent 60%, var(--sn-signal-tint) 60%);
}

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

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

.xfafda9d9,
.xe931f9b6 {
	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;
}

/* Fill, edge and focus come from base.css; the search row goes PILL, like
   the header search. */
.search-form .search-field {
	width: 100%;
	padding-left: var(--sn-sp-5);
	padding-right: var(--sn-sp-5);
	border-radius: var(--sn-radius-pill);
	font-size: var(--sn-fs-base);
}

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

/* The orange pill, matching .xd13150f3 (WordPress prints a bare input): navy
   label 8.47, uppercase 900, scale(.95) on press. */
.search-form .search-submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-6);
	border: var(--sn-border-thick) solid var(--sn-primary);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-primary);
	color: var(--sn-primary-dark);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	box-shadow: var(--sn-shadow-md);
	cursor: pointer;
	transition: all var(--sn-motion) var(--sn-ease);
}

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

.search-form .search-submit:active {
	transform: scale(.95);
}

@media (prefers-reduced-motion: reduce) {
	.search-form .search-submit {
		transition: none;
	}

	.search-form .search-submit:active {
		transform: none;
	}
}

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

.posts-navigation {
	margin-top: var(--sn-sp-12);
}

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

/* Pagination links are the outlined pill — same object as .x05b2e6b9,
   restyled here because WordPress prints them as bare anchors. */
.posts-navigation .nav-links a,
.posts-navigation .nav-links a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--sn-sp-2) var(--sn-sp-6);
	background: transparent;
	border: var(--sn-border-thick) solid var(--sn-border-ink);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-heading);
	font-size: var(--sn-fs-xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: background var(--sn-motion) var(--sn-ease),
	            color var(--sn-motion) 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: #FFFFFF;
	text-decoration: none;
}

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

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

/*
 * The code is the page: an uppercase-900 numeral in NAVY, with the logo mark
 * (orange tile + navy play-triangle, cf. .xe249dbef in base.css) drawn on its
 * ::before so 404.php needs no markup. Navy, never orange text.
 */
.xd17701b4 {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-4);
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: clamp(4.5rem, 2rem + 12vw, 9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
	color: var(--sn-heading);
}

/* The orange tile… */
.xd17701b4::before {
	content: '';
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	border-radius: .12em;
	background: var(--sn-signal);
}

/* …and the navy play-triangle set inside it. */
.xd17701b4::after {
	content: '';
	position: absolute;
	left: .18em;
	top: 50%;
	width: .2em;
	height: .24em;
	margin-top: -.12em;
	background: var(--sn-heading);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

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

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

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

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

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

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