/*
 * 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: white
 * surfaces on a cool grey ground, a 12px radius, and a COLOURED shadow doing
 * the separating. Any rule here that says "no shadow, no radius, no lift" was
 * inherited from a sibling skin and is wrong.
 */

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

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

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

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

/*
 * The author header is the system's profile card at page scale — the same
 * object as sn/author-box, one size up, so the two must change together.
 */
.xf9390ff6 {
	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-xl);
	box-shadow: var(--sn-shadow);
	padding: var(--sn-sp-8);
	margin: var(--sn-sp-8) 0;
}

/*
 * ROUND, inside a soft indigo ring — the system's avatar treatment. The
 * previous skin cropped it to a hard square with an accent rule down one edge
 * because it had no curves at all; that is a property of that ground, not of
 * this component.
 */
.x05ab06cc {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: var(--sn-radius-pill);
	object-fit: cover;
	border: 4px solid var(--sn-surface-tint);
}

.x7ffd6437 {
	margin: 0 0 var(--sn-sp-2);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-primary);
}

.xc9f3158a {
	margin: 0;
}

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

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

/* Expertise chips: soft-tinted pills, matching .x5f4b1cec in base.css. */
.x87ef63bc {
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: var(--sn-surface-tint);
	border: 0;
	border-radius: var(--sn-radius-pill);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-primary-hover);
}

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

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

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

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

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

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

.x0a2d5fa1,
.xd346a77f {
	padding-bottom: var(--sn-sp-16);
}

/* Breadcrumbs: a small muted trail. Not set apart typographically — this skin
   has one family and no technical register to put them in. */
.xd201bb95 {
	margin: var(--sn-sp-6) 0 0;
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

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

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

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

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

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

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

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

/*
 * The system's card, verbatim: white fill, hairline border, 12px radius,
 * resting coloured shadow — and the hover it specifies, "slight lift and
 * increased shadow intensity". Both halves of that were suppressed on the
 * previous skin (a dark ground has nothing for a card to cast a shadow onto);
 * both are back.
 */
.x93a950bd {
	display: flex;
	flex-direction: column;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
	transition: transform var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.xd0b19d4b .x93a950bd:hover,
.xd0b19d4b .x93a950bd:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--sn-shadow-md);
	border-color: #C7D2FE;
}

.xe6d2359b {
	overflow: hidden;
}

.xe6d2359b 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. */
.xd0b19d4b .x93a950bd:hover .xe6d2359b img,
.xd0b19d4b .x93a950bd:focus-within .xe6d2359b img {
	transform: scale(1.05);
}

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

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

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

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

.xe6f0e809 {
	margin: 0 0 var(--sn-sp-3);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.x93a950bd,
	.xe6d2359b img,
	.xd0b19d4b .x93a950bd:hover .xe6d2359b img {
		transform: none;
		transition: none;
	}
}

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

.xf4d53eee,
.x618f52fd {
	padding-bottom: var(--sn-sp-16);
}

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

.x4082fc60 {
	margin: 0;
}

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

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

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

.xdb6966d0,
.xc07ce863 {
	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 gradient pill, matching .x491557a5. Ink is white and routes through the
   token — 5.70:1 at the gradient's worst stop. */
.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 transparent;
	border-radius: var(--sn-radius-pill);
	background-image: var(--sn-gradient);
	background-color: var(--sn-primary);
	box-shadow: var(--sn-shadow-btn);
	color: var(--sn-primary-dark);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: transform var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease);
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px 0 rgba(79, 70, 229, .38);
	color: var(--sn-primary-dark);
}

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

/* ---------- 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 .x4962832e,
   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: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: var(--sn-radius-pill);
	box-shadow: var(--sn-shadow);
	color: var(--sn-heading);
	font-size: var(--sn-fs-base);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            border-color var(--sn-motion-fast) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease);
}

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

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

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

/*
 * The code is the page. This is the one place the theme spends the decorative
 * numeral scale on something a reader actually looks at, and it is the one
 * place a large figure may carry the gradient — a 404 cannot be mistaken for a
 * payout, which is the reason the calculator's hero figure may not (see the
 * .xa453d725 warning in base.css).
 */
.x579b3fd6 {
	margin: 0;
	font-size: clamp(4.5rem, 2rem + 12vw, var(--sn-fs-6xl));
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--sn-tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--sn-primary);
	background-image: var(--sn-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.x579b3fd6 {
		-webkit-text-fill-color: currentColor;
		background-image: none;
	}
}

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

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

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

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

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

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