/*
 * Template-level styles (front page, author page, shared post cards).
 * Post-card styles are shared — archive/search (T6) should reuse them.
 *
 * "Swiss Signal": paper cards told apart by a hairline, sharp corners, and
 * the small --sn-float-sm on hover in place of any tone change or lift.
 */

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

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

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

.x307b30aa {
	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.
 */
.xbf475455 {
	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, standing on a 4px red rule along its bottom edge only — one signal
 * mark, set like a caption rule. A full red frame around a face reads as a
 * badge (and a left-edge rule is eng-asset2's version of this object).
 */
.x17a92781 {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 0;
	object-fit: cover;
	border-bottom: var(--sn-sp-1) solid var(--sn-signal);
}

/* Index-rule eyebrow: signal-ink (5.38 — 12px text), uppercase, wide. */
.xb8f4c58d {
	margin: 0 0 var(--sn-sp-2);
	font-size: var(--sn-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-widest);
	color: var(--sn-signal-ink);
}

.x9f2fc42c {
	margin: 0;
}

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

.x3ad53d85 {
	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 .x56907e6b in base.css. */
.x4878fbbc {
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--sn-heading);
}

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

.xe3c8bb3f {
	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);
}

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

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

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

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

.x74b47bf2,
.x6d19a5b4 {
	padding-bottom: var(--sn-sp-16);
}

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

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

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

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

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

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

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

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

/*
 * Paper card, 1px hairline, sharp. Hover: the edge turns ink and the card
 * takes the small float — rises by shadow, never by transform.
 */
.xf7958b57 {
	display: flex;
	flex-direction: column;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: box-shadow var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.x928f716b .xf7958b57:hover,
.x928f716b .xf7958b57:focus-within {
	border-color: var(--sn-heading);
	box-shadow: var(--sn-float-sm);
}

.xf67b00c0 {
	overflow: hidden;
}

.xf67b00c0 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. */
.x928f716b .xf7958b57:hover .xf67b00c0 img,
.x928f716b .xf7958b57:focus-within .xf67b00c0 img {
	transform: scale(1.04);
}

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

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

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

/* Ink → the AA red on hover, like every link in the theme (5.38). */
.x089cbf31 a:hover,
.x089cbf31 a:focus {
	color: var(--sn-signal-ink);
}

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.xf7958b57,
	.xf67b00c0 img,
	.x928f716b .xf7958b57:hover .xf67b00c0 img {
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x928f716b .xf7958b57:hover,
	.x928f716b .xf7958b57:focus-within {
		transition: none;
	}
}

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

.x373dd7f2,
.x99ee2941 {
	padding-bottom: var(--sn-sp-16);
}

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

.x599d5329 {
	margin: 0;
}

/* The searched term is the display-size red word (3.55 passes as large
   text — this is an h1). */
.x599d5329 span {
	color: var(--sn-signal);
}

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

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

.x83d9266a,
.xdc6342b3 {
	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-heading);
}

/* The black key, matching .x0d4f1685 (WordPress prints a bare input, so it is
   restyled here): ink fill, white label 19.80, AA red on hover 5.38. */
.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;
	letter-spacing: -.01em;
	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-primary-hover);
	border-color: var(--sn-primary-hover);
	color: var(--sn-primary-dark);
}

/* ---------- 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 .x3b87601c,
   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;
	letter-spacing: -.01em;
	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) ---------- */

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

/*
 * The code is the page: a poster numeral in ink, 800, pulled tight, with the
 * logo glyph (black tile + rotated red square) set beside it as the one red
 * mark. Ink, not red — a 160px red "404" is a flood by another name. The
 * glyph is drawn on the code's ::before/::after so 404.php needs no markup.
 */
.xa663ed5b {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--sn-sp-4);
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: clamp(5rem, 2rem + 14vw, 11rem);
	font-weight: 800;
	line-height: .85;
	letter-spacing: -.06em;
	font-variant-numeric: tabular-nums;
	color: var(--sn-heading);
}

.xa663ed5b::before {
	content: '';
	flex: 0 0 auto;
	order: 2;
	width: .28em;
	height: .28em;
	margin-top: .04em;
	background: var(--sn-heading);
}

.xa663ed5b::after {
	content: '';
	position: absolute;
	top: .04em;
	right: 0;
	width: .28em;
	height: .28em;
	background: var(--sn-signal);
	transform: scale(.36) rotate(45deg);
}

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

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

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

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

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

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