/*!
Theme Name: AVAK Sharingvibes
Theme URI: https://www.sharingvibes.com/
Author: Ajay Rajbanshi
Author URI: https://www.ajayrajbanshi.com.np
Description: Modernized motivational/lifestyle theme for Sharing Vibes. Editorial card layout, full SEO + JSON-LD, Core Web Vitals optimized, classic PHP template parts.
Version: 1.1.0
Tested up to: 6.5
Requires at least: 5.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: avak-sharingvibes
Tags: blog, two-columns, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, rtl-language-support
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--sv-bg: #FAF7F2;
	--sv-surface: #FFFFFF;
	--sv-ink: #1F1B16;
	--sv-ink-soft: #2F2A24;
	--sv-muted: #6B6258;
	--sv-faint: #B7AEA2;
	--sv-accent: #E07A5F;
	--sv-accent-ink: #B85D44;
	--sv-accent-2: #81B29A;
	--sv-border: #ECE6DC;
	--sv-shadow-sm: 0 1px 2px rgba(31, 27, 22, .04), 0 1px 3px rgba(31, 27, 22, .06);
	--sv-shadow-md: 0 4px 12px rgba(31, 27, 22, .06), 0 8px 24px rgba(31, 27, 22, .06);
	--sv-radius-sm: 6px;
	--sv-radius: 12px;
	--sv-radius-lg: 20px;
	--sv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--sv-font-display: "Fraunces", "Times New Roman", serif;
	--sv-container: 1200px;
	--sv-container-narrow: 720px;
	--sv-pad: clamp(1rem, 2vw + .5rem, 2rem);
	--sv-section-pad: clamp(2.5rem, 5vw, 5rem);
	--sv-header-h: 72px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--sv-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--sv-ink);
	background: var(--sv-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--sv-ink);
	text-decoration-color: var(--sv-faint);
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover, a:focus-visible { color: var(--sv-accent-ink); text-decoration-color: var(--sv-accent); }

:focus-visible {
	outline: 2px solid var(--sv-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sv-font-display);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--sv-ink);
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, .9rem + 1vw, 1.625rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

::selection { background: rgba(224, 122, 95, .25); color: var(--sv-ink); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--sv-ink); color: var(--sv-bg); padding: .75rem 1rem;
	border-radius: 0 0 var(--sv-radius-sm) 0;
}
.skip-link:focus, .skip-link:focus-visible { left: 0; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

.sv-section__inner,
.sv-single__inner,
.sv-page__inner,
.sv-newsletter__inner,
.site-header__inner,
.site-footer__inner,
.sv-breadcrumbs__inner {
	max-width: var(--sv-container);
	margin: 0 auto;
	padding-left: var(--sv-pad);
	padding-right: var(--sv-pad);
}

.sv-single__inner,
.sv-page__inner {
	max-width: var(--sv-container-narrow);
}

/* Pages mirror the post content column — same width, same rhythm,
   but no share rail or TOC (those only make sense for long-form posts). */
.sv-page { padding-bottom: var(--sv-section-pad); }
.sv-page-layout {
	max-width: 820px;
	margin: 0 auto;
	padding: 1.5rem var(--sv-pad) 0;
}
@media (min-width: 1024px) {
	.sv-page-layout { padding-top: 2rem; }
}

/* Page header gets a touch more presence than a single-post one,
   since pages don't carry a category chip / byline / read-time. */
.sv-post__header--page {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sv-border);
}
.sv-post--page .sv-post__title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	margin: 0;
}

.sv-section { padding: var(--sv-section-pad) 0; }
.sv-section__title { margin: 0 0 1.5rem; }
.sv-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sv-section__header .sv-section__title { margin: 0; }
.sv-section__more {
	font-family: var(--sv-font-body);
	font-size: .95rem;
	font-weight: 600;
	color: var(--sv-accent-ink);
	text-decoration: none;
}
.sv-section__more span { margin-left: .25rem; transition: transform .2s ease; display: inline-block; }
.sv-section__more:hover span { transform: translateX(3px); }

.sv-grid { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.sv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sv-grid--2, .sv-grid--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 247, 242, .9);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--sv-border);
}
.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--sv-header-h);
}
.site-branding .custom-logo-link img,
.site-branding .custom-logo {
	height: 90px;
	width: auto;
	max-height: 100px;
}
.site-title { font-family: var(--sv-font-display); font-size: 1.4rem; margin: 0; font-weight: 600; }
.site-title a { text-decoration: none; }
.site-description { display: none; }

.main-navigation {
	justify-self: center;
}
.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.75rem;
	font-size: .95rem;
	font-weight: 500;
}
.primary-menu li { position: relative; }
.primary-menu a {
	text-decoration: none;
	padding: .5rem 0;
	display: inline-block;
}
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--sv-accent-ink);
	box-shadow: 0 2px 0 var(--sv-accent);
}
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -.75rem;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	box-shadow: var(--sv-shadow-md);
	padding: .5rem 0;
	min-width: 180px;
	list-style: none;
	margin: 0;
	display: none;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a { display: block; padding: .5rem 1rem; }

.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 0;
	color: var(--sv-ink);
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 0 auto;
	transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ''; position: absolute; left: 0; right: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }

.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.search-toggle {
	background: transparent;
	border: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--sv-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.search-toggle:hover { background: var(--sv-border); }

.header-search {
	background: var(--sv-surface);
	border-bottom: 1px solid var(--sv-border);
	padding: 1rem var(--sv-pad);
}
.header-search[hidden] { display: none; }

@media (max-width: 900px) {
	.site-header__inner { grid-template-columns: auto 1fr auto; }

	/* The <nav> stays in flow so its toggle button is always visible. */
	.main-navigation {
		justify-self: end;
		position: static;
		background: transparent;
		padding: 0;
		display: block;
	}
	/* Show the hamburger trigger; hide the menu list until toggled. */
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.primary-menu {
		display: none;
		position: fixed;
		inset: var(--sv-header-h) 0 auto 0;
		background: var(--sv-surface);
		border-bottom: 1px solid var(--sv-border);
		padding: 1rem var(--sv-pad) 1.5rem;
		max-height: calc(100vh - var(--sv-header-h));
		overflow-y: auto;
		flex-direction: column;
		gap: .25rem;
		font-size: 1.1rem;
		box-shadow: 0 8px 20px rgba(31, 27, 22, .08);
	}
	.main-navigation.toggled .primary-menu { display: flex; }
	.primary-menu a { padding: .75rem 0; border-bottom: 1px solid var(--sv-border); }
	.primary-menu .sub-menu {
		position: static;
		box-shadow: none;
		border: 0;
		padding-left: 1rem;
		display: block;
	}

	/* Animate the hamburger into an X when the menu is open. */
	.main-navigation.toggled .menu-toggle__bars { background: transparent; }
	.main-navigation.toggled .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
	.main-navigation.toggled .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }
}

/* ==========================================================================
   5. Breadcrumbs
   ========================================================================== */
.sv-breadcrumbs {
	background: transparent;
	padding: 1rem 0 0;
	font-size: .875rem;
	color: var(--sv-muted);
}
.sv-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
}
.sv-breadcrumbs__item + .sv-breadcrumbs__item::before {
	content: '/';
	color: var(--sv-faint);
	margin-right: .5rem;
}
.sv-breadcrumbs__item.is-current { color: var(--sv-ink-soft); font-weight: 500; }
.sv-breadcrumbs__item a { color: var(--sv-muted); text-decoration: none; }
.sv-breadcrumbs__item a:hover { color: var(--sv-accent-ink); }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.sv-hero {
	position: relative;
	max-width: var(--sv-container);
	margin: 1.5rem auto 0;
	padding: 0 var(--sv-pad);
}
.sv-hero__media {
	position: relative;
	border-radius: var(--sv-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--sv-faint);
}
.sv-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sv-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31,27,22,0) 35%, rgba(31,27,22,.6) 100%);
}
.sv-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1rem, 4vw, 3rem);
	color: #fff;
	max-width: 720px;
}
.sv-hero__eyebrow {
	font-family: var(--sv-font-body);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	margin: 0 0 .75rem;
}
.sv-hero__title {
	color: #fff;
	margin: 0 0 .75rem;
	font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
	font-weight: 600;
}
.sv-hero__title a { color: inherit; text-decoration: none; }
.sv-hero__title a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); }
.sv-hero__excerpt { color: rgba(255,255,255,.92); margin: 0 0 1.25rem; max-width: 60ch; }
.sv-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .875rem; color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.sv-hero__meta a { color: inherit; }

@media (max-width: 700px) {
	.sv-hero__media { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   7. Buttons & chips
   ========================================================================== */
.sv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	font-family: var(--sv-font-body);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sv-button--accent { background: var(--sv-accent); color: #fff; }
.sv-button--accent:hover { background: var(--sv-accent-ink); color: #fff; }
.sv-button--ghost { background: transparent; border-color: var(--sv-border); color: var(--sv-ink); }
.sv-button--ghost:hover { border-color: var(--sv-ink); }
.sv-button:active { transform: translateY(1px); }

.sv-chips, .sv-chip {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sv-chips { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.sv-chip {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--sv-accent-ink);
	background: rgba(224, 122, 95, .12);
	padding: .35rem .65rem;
	border-radius: 999px;
}
.sv-chip a { color: inherit; text-decoration: none; }
.sv-chip--light {
	color: #fff;
	background: rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ==========================================================================
   8. Cards
   ========================================================================== */
.sv-card {
	display: flex;
	flex-direction: column;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sv-shadow-md);
	border-color: rgba(31, 27, 22, .12);
}
.sv-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sv-border);
}
.sv-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.sv-card:hover .sv-card__image { transform: scale(1.04); }
.sv-card__body { padding: 1.25rem 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.sv-card__title {
	font-size: clamp(1.125rem, .9rem + .6vw, 1.375rem);
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}
.sv-card__title a { text-decoration: none; }
.sv-card__title a:hover { color: var(--sv-accent-ink); }
.sv-card__excerpt { color: var(--sv-muted); font-size: .95rem; margin: 0; }
.sv-card__meta { margin-top: auto; color: var(--sv-muted); font-size: .825rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ==========================================================================
   9. Category tiles
   ========================================================================== */
.sv-tiles__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .sv-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.1;
	border-radius: var(--sv-radius);
	overflow: hidden;
	background: var(--sv-ink);
	color: #fff;
	text-decoration: none;
}
.sv-tile__image {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.sv-tile:hover .sv-tile__image { transform: scale(1.06); }
.sv-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,27,22,0) 30%, rgba(31,27,22,.7) 100%); }
.sv-tile__label { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; }
.sv-tile__name { display: block; font-family: var(--sv-font-display); font-size: 1.25rem; font-weight: 600; }
.sv-tile__count { display: block; font-size: .8rem; opacity: .85; margin-top: .25rem; }

/* ==========================================================================
   10. Single post
   ========================================================================== */
.sv-page-header { margin: 2.5rem 0 1.5rem; }
.sv-page-header__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin: 0 0 .5rem; }
.sv-page-header__desc { color: var(--sv-muted); }
.sv-page-header--centered { text-align: center; }

.sv-post { margin: 0; }
.sv-reader-main > * + * { margin-top: 1.5rem; }
.sv-reader-main > *:last-child { margin-bottom: 0; }
.sv-post__header { margin-bottom: 1.75rem; }
.sv-post__title { margin: .5rem 0 1rem; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); font-weight: 600; }
.sv-post__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	color: var(--sv-muted);
	font-size: .9rem;
}
.sv-post__avatar { border-radius: 50%; }
.sv-post__author a { font-weight: 600; color: var(--sv-ink-soft); text-decoration: none; }

.sv-post__hero {
	margin: 0 0 2rem;
	max-width: 100%;
}
.sv-post__hero-image {
	width: 100%;
	border-radius: var(--sv-radius-lg);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.sv-post__content > * + * { margin-top: 1em; }

/* — Editorial heading system — */
.sv-post__content h1,
.sv-post__content h2,
.sv-post__content h3,
.sv-post__content h4,
.sv-post__content h5,
.sv-post__content h6 {
	font-family: var(--sv-font-display);
	color: var(--sv-ink);
	scroll-margin-top: calc(var(--sv-header-h) + 1.5rem); /* anchor-link offset under sticky header */
	text-wrap: balance; /* better line-breaks on supporting browsers */
	letter-spacing: -.015em;
}
.sv-post__content > * + h1,
.sv-post__content > * + h2,
.sv-post__content > * + h3,
.sv-post__content > * + h4 { margin-top: 0; } /* override the * + * baseline; we set explicit top below */

/* H1: only used if author overrides the post title in body content. */
.sv-post__content h1 {
	margin: 2.75em 0 .5em;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
}

/* H2: chapter — biggest divider in body copy. */
.sv-post__content h2 {
	margin: 2em 0 .65em;
	font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 600;
	line-height: 1.2;
	position: relative;
	padding-top: 1.25rem;
}
.sv-post__content h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--sv-accent);
	border-radius: 2px;
}
/* First h2 right after the hero shouldn't double-space. */
.sv-post__hero + .sv-post__content > h2:first-child,
.sv-post__content > h2:first-child { margin-top: 1em; }

/* H3: section within a chapter. */
.sv-post__content h3 {
	margin: 2.25em 0 .5em;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--sv-ink-soft);
}

/* H4: subsection / step heading — non-serif, accent eyebrow style. */
.sv-post__content h4 {
	margin: 1.85em 0 .4em;
	font-family: var(--sv-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sv-accent-ink);
	display: flex;
	align-items: center;
	gap: .65rem;
}
.sv-post__content h4::before {
	content: '';
	flex: 0 0 1.25rem;
	height: 2px;
	background: var(--sv-accent);
	border-radius: 2px;
}

/* H5 + H6 fallbacks (rarely used but should still feel intentional). */
.sv-post__content h5 {
	margin: 1.5em 0 .35em;
	font-family: var(--sv-font-body);
	font-size: .95rem;
	font-weight: 700;
	color: var(--sv-ink-soft);
	letter-spacing: -.005em;
}
.sv-post__content h6 {
	margin: 1.25em 0 .35em;
	font-family: var(--sv-font-body);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sv-muted);
}

/* Heading-following spacing — first paragraph after a heading sits closer. */
.sv-post__content h2 + p,
.sv-post__content h3 + p,
.sv-post__content h4 + p,
.sv-post__content h5 + p,
.sv-post__content h6 + p { margin-top: .5em; }

/* Headings inside callouts: reset the editorial decorations. */
.sv-post__content .highlight-box h2,
.sv-post__content .highlight-box h3,
.sv-post__content .highlight-box h4,
.sv-post__content .highlight-box h5,
.sv-post__content .highlight-box h6 {
	padding-top: 0;
	margin-top: 0;
	letter-spacing: -.01em;
}
.sv-post__content .highlight-box h2::before,
.sv-post__content .highlight-box h3::before,
.sv-post__content .highlight-box h4::before { content: none; }
.sv-post__content .highlight-box h4 {
	font-family: var(--sv-font-display);
	font-size: 1.125rem;
	text-transform: none;
	color: var(--sv-ink);
	letter-spacing: -.01em;
	display: block;
}
.sv-post__content a {
	color: var(--sv-accent-ink);
	text-decoration-color: rgba(224, 122, 95, .4);
}
.sv-post__content blockquote {
	margin: 1.5em 0;
	padding: 1rem 1.5rem;
	border-left: 3px solid var(--sv-accent);
	background: rgba(224, 122, 95, .06);
	font-family: var(--sv-font-display);
	font-style: italic;
	font-size: 1.25rem;
}
.sv-post__content img { border-radius: var(--sv-radius); }
.sv-post__content figcaption { color: var(--sv-muted); font-size: .875rem; text-align: center; margin-top: .5rem; }
.sv-post__content code { background: var(--sv-border); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
.sv-post__content pre { background: var(--sv-ink); color: var(--sv-bg); padding: 1rem; border-radius: var(--sv-radius); overflow-x: auto; }

/* — Author content utilities (used inside post body) — */

/* highlight-box: a tinted callout for key takeaways. */
.sv-post__content .highlight-box {
	position: relative;
	margin: 2em 0;
	padding: 1.5rem 1.75rem 1.5rem 2.5rem;
	background: linear-gradient(180deg, rgba(129, 178, 154, .12) 0%, rgba(129, 178, 154, .05) 100%);
	border: 1px solid rgba(129, 178, 154, .35);
	border-left: 4px solid var(--sv-accent-2);
	border-radius: var(--sv-radius);
	color: var(--sv-ink);
	box-shadow: var(--sv-shadow-sm);
}
.sv-post__content .highlight-box::before {
	content: '';
	position: absolute;
	top: 1.5rem;
	left: 1rem;
	width: 18px;
	height: 18px;
	background: var(--sv-accent-2);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v3M5 5l2 2M2 12h3M19 5l-2 2M22 12h-3M9 18h6M10 21h4M12 14a5 5 0 1 0-3-9 5 5 0 0 0-2 8c.6.6 1 1.5 1 2.3V18h8v-2.7c0-.8.4-1.7 1-2.3a5 5 0 0 0 .8-1'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v3M5 5l2 2M2 12h3M19 5l-2 2M22 12h-3M9 18h6M10 21h4M12 14a5 5 0 1 0-3-9 5 5 0 0 0-2 8c.6.6 1 1.5 1 2.3V18h8v-2.7c0-.8.4-1.7 1-2.3a5 5 0 0 0 .8-1'/></svg>") center / contain no-repeat;
}
.sv-post__content .highlight-box > *:first-child { margin-top: 0; }
.sv-post__content .highlight-box > *:last-child { margin-bottom: 0; }
.sv-post__content .highlight-box h3,
.sv-post__content .highlight-box h4,
.sv-post__content .highlight-box strong:first-child {
	margin-top: 0;
	font-family: var(--sv-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--sv-ink);
	letter-spacing: -.01em;
	display: block;
	margin-bottom: .5rem;
}
.sv-post__content .highlight-box p { font-size: 1rem; line-height: 1.7; }
.sv-post__content .highlight-box p + p { margin-top: .75em; }

/* Variant modifiers authors can opt into. */
.sv-post__content .highlight-box.is-tip,
.sv-post__content .highlight-box[data-variant="tip"] {
	background: linear-gradient(180deg, rgba(129, 178, 154, .14) 0%, rgba(129, 178, 154, .04) 100%);
	border-color: rgba(129, 178, 154, .4);
	border-left-color: var(--sv-accent-2);
}
.sv-post__content .highlight-box.is-info,
.sv-post__content .highlight-box[data-variant="info"] {
	background: linear-gradient(180deg, rgba(91, 130, 175, .12) 0%, rgba(91, 130, 175, .04) 100%);
	border-color: rgba(91, 130, 175, .35);
	border-left-color: #5B82AF;
}
.sv-post__content .highlight-box.is-info::before,
.sv-post__content .highlight-box[data-variant="info"]::before {
	background: #5B82AF;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>") center / contain no-repeat;
}
.sv-post__content .highlight-box.is-warning,
.sv-post__content .highlight-box[data-variant="warning"] {
	background: linear-gradient(180deg, rgba(224, 122, 95, .12) 0%, rgba(224, 122, 95, .04) 100%);
	border-color: rgba(224, 122, 95, .35);
	border-left-color: var(--sv-accent);
}
.sv-post__content .highlight-box.is-warning::before,
.sv-post__content .highlight-box[data-variant="warning"]::before {
	background: var(--sv-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/></svg>") center / contain no-repeat;
}
.sv-post__content .highlight-box.is-quote,
.sv-post__content .highlight-box[data-variant="quote"] {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-left: 4px solid var(--sv-ink);
	font-family: var(--sv-font-display);
	font-style: italic;
	font-size: 1.15rem;
	padding-left: 2rem;
}
.sv-post__content .highlight-box.is-quote::before,
.sv-post__content .highlight-box[data-variant="quote"]::before { display: none; }

@media (max-width: 600px) {
	.sv-post__content .highlight-box { padding: 1.25rem 1.25rem 1.25rem 2.25rem; }
	.sv-post__content .highlight-box::before { top: 1.25rem; left: .75rem; width: 16px; height: 16px; }
}

/* image-placeholder: empty <div> placeholder for missing/loading images. */
.sv-post__content .image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--sv-border) 0%, var(--sv-surface) 50%, var(--sv-border) 100%);
	background-size: 200% 200%;
	border-radius: var(--sv-radius);
	margin: 2em 0;
	position: relative;
	overflow: hidden;
}
.sv-post__content .image-placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
	transform: translateX(-100%);
	animation: sv-shimmer 2.4s ease-in-out infinite;
}
@keyframes sv-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
	.sv-post__content .image-placeholder::after { animation: none; }
}

/* image-placeholder grid: row of placeholders. */
.sv-post__content .image-placeholder.inline-image,
.sv-post__content .image-placeholder--inline {
	display: inline-block;
	width: auto;
	margin: 0 .25em;
	vertical-align: middle;
}

/* When multiple image-placeholder/img siblings sit together, lay them out as a gallery row. */
.sv-post__content .image-placeholder + .image-placeholder,
.sv-post__content .image-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

/* — FAQ section (accordion) — */
.sv-post__content .faq-section {
	margin: 2.75em 0;
	padding: 0;
}
.sv-post__content .faq-section > h2 { margin-bottom: 1.25em; }

.sv-post__content .faq-item {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	margin: 0 0 .75rem;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sv-post__content .faq-item + .faq-item { margin-top: .75rem; }
.sv-post__content .faq-item:hover { border-color: var(--sv-faint); }
.sv-post__content .faq-item.is-open {
	border-color: var(--sv-accent);
	box-shadow: 0 6px 20px rgba(31, 27, 22, .06);
}

/* Question — also acts as the accordion trigger when JS upgrades it. */
.sv-post__content .faq-question {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sv-ink);
	letter-spacing: -.01em;
	cursor: default;
	text-align: left;
	background: transparent;
	border: 0;
	width: 100%;
}
/* When upgraded to a <button> by JS, it becomes interactive. */
.sv-post__content button.faq-question {
	cursor: pointer;
	font-family: var(--sv-font-display);
	transition: background .15s ease, color .15s ease;
}
.sv-post__content button.faq-question:hover { background: rgba(224, 122, 95, .04); color: var(--sv-accent-ink); }
.sv-post__content button.faq-question:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: -2px; }

/* Number badge for visual rhythm. */
.sv-post__content .faq-item { counter-increment: sv-faq; }
.sv-post__content .faq-section { counter-reset: sv-faq; }
.sv-post__content .faq-question::before {
	content: counter(sv-faq, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--sv-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--sv-accent);
	background: rgba(224, 122, 95, .1);
	padding: .25rem .5rem;
	border-radius: 999px;
	margin-top: .15rem;
	min-width: 2.25rem;
	text-align: center;
}

/* Chevron icon — only visible when JS has upgraded the item. */
.sv-post__content .faq-question .faq-chev {
	flex: 0 0 auto;
	margin-left: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--sv-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sv-muted);
	transition: transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
	margin-top: .1rem;
}
.sv-post__content .faq-item.is-open .faq-chev {
	transform: rotate(180deg);
	background: var(--sv-accent);
	border-color: var(--sv-accent);
	color: #fff;
}

/* Answer — collapsible region. */
.sv-post__content .faq-answer {
	padding: 0 1.25rem 0 calc(1.25rem + 2.25rem + 1rem); /* align under question text past the badge */
	color: var(--sv-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
	overflow: hidden;
}
.sv-post__content .faq-answer > *:first-child { margin-top: 0; }
.sv-post__content .faq-answer > *:last-child { margin-bottom: 1.25rem; }

/* Static (no JS) — answers always visible, just visually nested. */
.sv-post__content .faq-item:not(.is-enhanced) .faq-answer {
	padding-bottom: 1.25rem;
	border-top: 1px solid var(--sv-border);
	margin-top: 0;
	padding-top: 1rem;
}

/* Enhanced (JS) — animated collapse using grid-template-rows trick. */
.sv-post__content .faq-item.is-enhanced .faq-answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}
.sv-post__content .faq-item.is-enhanced.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.sv-post__content .faq-item.is-enhanced .faq-answer-wrap > .faq-answer { min-height: 0; }
.sv-post__content .faq-item.is-enhanced .faq-answer { padding-top: 0; padding-bottom: 0; }
.sv-post__content .faq-item.is-enhanced.is-open .faq-answer { padding-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.sv-post__content .faq-item.is-enhanced .faq-answer-wrap { transition: none; }
	.sv-post__content .faq-item .faq-chev { transition: none; }
}

/* Expand-all / collapse-all controls (added by JS). */
.sv-post__content .faq-controls {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
	margin: -.5rem 0 .75rem;
}
.sv-post__content .faq-controls button {
	background: transparent;
	border: 1px solid var(--sv-border);
	color: var(--sv-muted);
	padding: .35rem .75rem;
	border-radius: 999px;
	font-size: .8rem;
	font-family: var(--sv-font-body);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.sv-post__content .faq-controls button:hover { border-color: var(--sv-accent); color: var(--sv-accent-ink); }

@media (max-width: 600px) {
	.sv-post__content .faq-question { padding: 1rem; gap: .65rem; font-size: 1rem; }
	.sv-post__content .faq-question::before { min-width: 1.85rem; padding: .2rem .4rem; }
	.sv-post__content .faq-answer { padding-left: calc(1rem + 1.85rem + .65rem); padding-right: 1rem; }
}

/* — Pull quote (oversized callout for emphasis) — */
.sv-post__content .pull-quote,
.sv-post__content [data-pullquote] {
	display: block;
	font-family: var(--sv-font-display);
	font-size: clamp(1.4rem, 1rem + 1.4vw, 1.875rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--sv-ink);
	margin: 2.5em 0;
	padding: 1.25rem 0;
	border-top: 2px solid var(--sv-ink);
	border-bottom: 2px solid var(--sv-ink);
	letter-spacing: -.015em;
}

/* — Dark-theme adjustments for callouts — */
:root[data-reader-theme="dark"] .sv-post__content .highlight-box,
:root[data-reader-theme="sepia"] .sv-post__content .highlight-box {
	background: var(--sv-surface);
}

.sv-post__footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--sv-border); color: var(--sv-muted); font-size: .9rem; }
.sv-post__footer a { color: var(--sv-ink-soft); }

/* ==========================================================================
   11. Share rail (sticky on desktop, fixed bottom bar on mobile)
   ========================================================================== */
.sv-share { display: flex; align-items: center; gap: 1rem; }
.sv-share__label {
	margin: 0;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-muted);
	font-weight: 700;
}
.sv-share__list { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sv-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sv-border);
	background: var(--sv-surface);
	color: var(--sv-ink-soft);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sv-share__btn:hover { background: var(--sv-accent); color: #fff; border-color: var(--sv-accent); }
.sv-share__btn:active { transform: scale(.94); }
.sv-share__btn--copy.is-copied {
	background: var(--sv-accent-2);
	border-color: var(--sv-accent-2);
	color: #fff;
}

/* Vertical stack inside the left rail. */
.sv-share--rail { flex-direction: column; align-items: center; gap: .75rem; }
.sv-share--rail .sv-share__label { writing-mode: vertical-rl; transform: rotate(180deg); padding: .25rem 0; }
.sv-share--rail .sv-share__list { flex-direction: column; }

/* Mobile: convert to a fixed bottom bar. */
@media (max-width: 1023px) {
	.sv-share--rail {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 40;
		flex-direction: row;
		justify-content: center;
		gap: .5rem;
		padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.92);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
		border-top: 1px solid var(--sv-border);
		box-shadow: 0 -2px 12px rgba(31,27,22,.04);
	}
	.sv-share--rail .sv-share__label { display: none; }
	.sv-share--rail .sv-share__list { flex-direction: row; }
	.sv-share--rail .sv-share__btn { width: 40px; height: 40px; }
	body.menu-open .sv-share--rail { display: none; }
}

/* ==========================================================================
   12. Author bio
   ========================================================================== */
.sv-author {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.5rem;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	margin: 0;
}
.sv-author__img { border-radius: 50%; }
.sv-author__eyebrow { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); }
.sv-author__name { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.sv-author__name a { text-decoration: none; }
.sv-author__bio { margin: 0; color: var(--sv-muted); }

@media (max-width: 600px) { .sv-author { flex-direction: column; } }

/* ==========================================================================
   13. Post navigation (prev/next) & related
   ========================================================================== */
.sv-postnav, .post-navigation, .navigation.post-navigation {
	display: block;
}
.sv-postnav .nav-links, .post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
/* When only one of prev/next exists, the surviving sibling spans the full row. */
.sv-postnav .nav-links:has(> :only-child) > *,
.post-navigation .nav-links:has(> :only-child) > * {
	grid-column: 1 / -1;
	max-width: 480px;
}
.sv-postnav .nav-links:has(> .nav-next:only-child),
.post-navigation .nav-links:has(> .nav-next:only-child) { justify-items: end; }
.sv-postnav .nav-previous,
.sv-postnav .nav-next,
.post-navigation .nav-previous,
.post-navigation .nav-next {
	min-width: 0;
}
.sv-postnav .nav-previous a,
.sv-postnav .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: grid;
	gap: .5rem;
	padding: 1.25rem 1.5rem;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
	height: 100%;
}
.sv-postnav .nav-previous a::before,
.sv-postnav .nav-next a::after,
.post-navigation .nav-previous a::before,
.post-navigation .nav-next a::after {
	color: var(--sv-accent);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform .2s ease;
}
.sv-postnav .nav-previous a::before,
.post-navigation .nav-previous a::before { content: '←'; }
.sv-postnav .nav-next a::after,
.post-navigation .nav-next a::after { content: '→'; justify-self: end; }
.sv-postnav .nav-previous a:hover::before,
.post-navigation .nav-previous a:hover::before { transform: translateX(-3px); }
.sv-postnav .nav-next a:hover::after,
.post-navigation .nav-next a:hover::after { transform: translateX(3px); }
.sv-postnav .nav-previous a:hover,
.sv-postnav .nav-next a:hover,
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	border-color: var(--sv-accent);
	transform: translateY(-2px);
	box-shadow: var(--sv-shadow-md);
}
.sv-postnav .nav-next a, .post-navigation .nav-next a { text-align: right; }

.nav-subtitle {
	display: block;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-muted);
	font-weight: 700;
}
.nav-title {
	display: block;
	font-family: var(--sv-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--sv-ink);
	letter-spacing: -.01em;
}

.sv-related { background: rgba(129, 178, 154, .08); margin-top: 3rem; padding: var(--sv-section-pad) 0; }
.sv-related .sv-section__inner { max-width: var(--sv-container); }
.sv-related .sv-section__title { text-align: left; }

/* If the related grid only has 1–2 cards, center them and constrain card width
   so a single card doesn't anchor flush-left in a 3-col grid. */
.sv-related .sv-grid { justify-content: center; }
.sv-related .sv-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 360px));
}
@media (max-width: 1100px) {
	.sv-related .sv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); }
}
@media (max-width: 600px) {
	.sv-related .sv-grid--3 { grid-template-columns: minmax(0, 420px); }
}

@media (max-width: 600px) {
	.sv-postnav, .post-navigation { grid-template-columns: 1fr; }
	.sv-postnav .nav-next a, .post-navigation .nav-next a { text-align: left; }
}

/* ==========================================================================
   14. Pagination
   ========================================================================== */
.pagination, .navigation.pagination {
	margin: 2.5rem 0;
	display: flex;
	justify-content: center;
}
.pagination .nav-links, .navigation.pagination .nav-links {
	display: flex;
	gap: .375rem;
	flex-wrap: wrap;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .75rem;
	border-radius: var(--sv-radius-sm);
	border: 1px solid var(--sv-border);
	background: var(--sv-surface);
	color: var(--sv-ink-soft);
	text-decoration: none;
	font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--sv-accent); color: var(--sv-accent-ink); }
.pagination .page-numbers.current { background: var(--sv-ink); color: var(--sv-bg); border-color: var(--sv-ink); }

/* ==========================================================================
   15. Newsletter
   ========================================================================== */
.sv-newsletter {
	background: var(--sv-ink);
	color: var(--sv-bg);
	padding: var(--sv-section-pad) 0;
}
.sv-newsletter__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.sv-newsletter__title { color: #fff; margin: 0 0 .5rem; }
.sv-newsletter__sub { margin: 0; color: rgba(250, 247, 242, .8); }
.sv-newsletter__form { display: flex; gap: .5rem; }
.sv-newsletter__form input[type="email"] {
	flex: 1;
	padding: .85rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.06);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
}
.sv-newsletter__form input::placeholder { color: rgba(250, 247, 242, .55); }
.sv-newsletter__form input:focus { outline: 2px solid var(--sv-accent); outline-offset: 2px; }

@media (max-width: 800px) {
	.sv-newsletter__inner { grid-template-columns: 1fr; }
	.sv-newsletter__form { flex-direction: column; }
	.sv-newsletter__form .sv-button { width: 100%; }
}

/* ==========================================================================
   16. Footer
   ========================================================================== */
.site-footer {
	background: var(--sv-surface);
	border-top: 1px solid var(--sv-border);
	color: var(--sv-ink-soft);
	font-size: .9rem;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-top: var(--sv-section-pad);
	padding-bottom: 2rem;
}
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } }
.site-footer__heading { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .75rem; color: var(--sv-muted); font-family: var(--sv-font-body); font-weight: 600; }
.site-footer__brand { font-family: var(--sv-font-display); font-size: 1.4rem; margin: 0 0 .5rem; font-weight: 600; }
.site-footer__brand a { text-decoration: none; }
.site-footer__blurb { color: var(--sv-muted); max-width: 36ch; margin: 0; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer__menu a { text-decoration: none; color: var(--sv-ink-soft); }
.site-footer__menu a:hover { color: var(--sv-accent-ink); }

.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--sv-border);
	color: var(--sv-ink-soft);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.site-footer__social a:hover { background: var(--sv-accent); color: #fff; border-color: var(--sv-accent); }
.site-footer__hint { color: var(--sv-muted); font-size: .825rem; margin: 0; }

.site-footer__bar {
	border-top: 1px solid var(--sv-border);
	padding: 1.25rem var(--sv-pad);
	color: var(--sv-muted);
}
.site-info { max-width: var(--sv-container); margin: 0 auto; font-size: .85rem; }

/* ==========================================================================
   17. Search form
   ========================================================================== */
.sv-searchform {
	display: flex;
	gap: .5rem;
	max-width: 520px;
	margin: 0 auto;
}
.sv-searchform__input {
	flex: 1;
	padding: .85rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--sv-border);
	background: var(--sv-surface);
	font-family: inherit;
	font-size: 1rem;
	color: var(--sv-ink);
	min-width: 0;
}
.sv-searchform__input:focus { outline: 2px solid var(--sv-accent); outline-offset: 2px; border-color: var(--sv-accent); }
.sv-searchform__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sv-ink);
	color: var(--sv-bg);
	border: 0;
	cursor: pointer;
}
.sv-searchform__btn:hover { background: var(--sv-accent); }

/* ==========================================================================
   18. 404
   ========================================================================== */
.sv-404 { padding: var(--sv-section-pad) 0; text-align: center; }
.sv-404__inner { max-width: 640px; margin: 0 auto; padding: 0 var(--sv-pad); }
.sv-404__eyebrow { font-family: var(--sv-font-display); font-size: 5rem; line-height: 1; margin: 0 0 1rem; color: var(--sv-accent); font-weight: 600; }
.sv-404__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); margin: 0 0 .75rem; }
.sv-404__sub { color: var(--sv-muted); margin: 0 0 1.5rem; }
.sv-404__home { margin-top: 1rem; }

/* ==========================================================================
   19. Icons (CSS-only minimal set)
   ========================================================================== */
.sv-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.sv-icon--facebook  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.7-1.6h1.6V4.2C16.5 4.1 15.5 4 14.4 4c-2.3 0-3.9 1.4-3.9 4v2.8H7.8V14h2.7v8h3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.7-1.6h1.6V4.2C16.5 4.1 15.5 4 14.4 4c-2.3 0-3.9 1.4-3.9 4v2.8H7.8V14h2.7v8h3z'/></svg>"); }
.sv-icon--twitter   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.9 4H22l-7.5 8.6L23 20h-6.7l-5.2-6-6 6H2l8-9.1L1.5 4h6.8l4.7 5.5L18.9 4zm-1.1 14.3h1.7L7.3 5.6H5.5l12.3 12.7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.9 4H22l-7.5 8.6L23 20h-6.7l-5.2-6-6 6H2l8-9.1L1.5 4h6.8l4.7 5.5L18.9 4zm-1.1 14.3h1.7L7.3 5.6H5.5l12.3 12.7z'/></svg>"); }
.sv-icon--instagram { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4 1 .5.4.7.9 1 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-1 1.4-.4.5-.9.7-1.4 1-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-1-.5-.4-.7-.9-1-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 1-1.4.4-.5.9-.7 1.4-1 .4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 5.3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 7.4a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8zm5.7-7.6a1.05 1.05 0 1 1-2.1 0 1.05 1.05 0 0 1 2.1 0z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4 1 .5.4.7.9 1 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-1 1.4-.4.5-.9.7-1.4 1-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-1-.5-.4-.7-.9-1-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 1-1.4.4-.5.9-.7 1.4-1 .4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 5.3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 7.4a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8zm5.7-7.6a1.05 1.05 0 1 1-2.1 0 1.05 1.05 0 0 1 2.1 0z'/></svg>"); }
.sv-icon--youtube   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23 7.4s-.2-1.6-.9-2.3c-.9-.9-1.8-.9-2.3-1C16.6 4 12 4 12 4s-4.6 0-7.8.2c-.4 0-1.4 0-2.3 1C1.2 5.8 1 7.4 1 7.4S.7 9.3.7 11.2v1.6c0 1.9.3 3.8.3 3.8s.2 1.6.9 2.3c.9.9 2.1.9 2.6 1 1.9.2 7.5.2 7.5.2s4.6 0 7.8-.2c.4 0 1.4 0 2.3-1 .7-.7.9-2.3.9-2.3s.3-1.9.3-3.8v-1.6c0-2-.3-3.8-.3-3.8zM9.7 15.4V8.6l6 3.4-6 3.4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23 7.4s-.2-1.6-.9-2.3c-.9-.9-1.8-.9-2.3-1C16.6 4 12 4 12 4s-4.6 0-7.8.2c-.4 0-1.4 0-2.3 1C1.2 5.8 1 7.4 1 7.4S.7 9.3.7 11.2v1.6c0 1.9.3 3.8.3 3.8s.2 1.6.9 2.3c.9.9 2.1.9 2.6 1 1.9.2 7.5.2 7.5.2s4.6 0 7.8-.2c.4 0 1.4 0 2.3-1 .7-.7.9-2.3.9-2.3s.3-1.9.3-3.8v-1.6c0-2-.3-3.8-.3-3.8zM9.7 15.4V8.6l6 3.4-6 3.4z'/></svg>"); }
.sv-icon--pinterest { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2C6.5 2 2 6.5 2 12c0 4.2 2.6 7.8 6.3 9.3-.1-.8-.2-2 0-2.9.2-.8 1.3-5.1 1.3-5.1s-.3-.6-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.4.7 1.4 1.5 0 .9-.6 2.3-.9 3.6-.3 1.1.5 2 1.6 2 1.9 0 3.4-2 3.4-5 0-2.6-1.9-4.4-4.5-4.4-3.1 0-4.9 2.3-4.9 4.7 0 .9.4 1.9.8 2.5l.1.4c-.1.4-.3 1.1-.3 1.3-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.6 0-3.7 2.7-7.1 7.8-7.1 4.1 0 7.3 2.9 7.3 6.8 0 4.1-2.6 7.4-6.2 7.4-1.2 0-2.4-.6-2.7-1.4l-.7 2.8c-.3 1-1 2.3-1.5 3.1.9.3 1.9.4 3 .4 5.5 0 10-4.5 10-10S17.5 2 12 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2C6.5 2 2 6.5 2 12c0 4.2 2.6 7.8 6.3 9.3-.1-.8-.2-2 0-2.9.2-.8 1.3-5.1 1.3-5.1s-.3-.6-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.4.7 1.4 1.5 0 .9-.6 2.3-.9 3.6-.3 1.1.5 2 1.6 2 1.9 0 3.4-2 3.4-5 0-2.6-1.9-4.4-4.5-4.4-3.1 0-4.9 2.3-4.9 4.7 0 .9.4 1.9.8 2.5l.1.4c-.1.4-.3 1.1-.3 1.3-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.6 0-3.7 2.7-7.1 7.8-7.1 4.1 0 7.3 2.9 7.3 6.8 0 4.1-2.6 7.4-6.2 7.4-1.2 0-2.4-.6-2.7-1.4l-.7 2.8c-.3 1-1 2.3-1.5 3.1.9.3 1.9.4 3 .4 5.5 0 10-4.5 10-10S17.5 2 12 2z'/></svg>"); }
.sv-icon--linkedin  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5C0 2.12 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.32 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 7v7.44h-4.56v-6.6c0-1.57-.03-3.6-2.2-3.6-2.2 0-2.54 1.72-2.54 3.49V22H7.54V8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5C0 2.12 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.32 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 7v7.44h-4.56v-6.6c0-1.57-.03-3.6-2.2-3.6-2.2 0-2.54 1.72-2.54 3.49V22H7.54V8z'/></svg>"); }
.sv-icon--link      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7 0l4-4a5 5 0 0 0-7-7l-1 1'/><path d='M14 11a5 5 0 0 0-7 0l-4 4a5 5 0 0 0 7 7l1-1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7 0l4-4a5 5 0 0 0-7-7l-1 1'/><path d='M14 11a5 5 0 0 0-7 0l-4 4a5 5 0 0 0 7 7l1-1'/></svg>"); }

/* ==========================================================================
   20. Reveal animation
   ========================================================================== */
.sv-card,
.sv-tile,
.sv-section { opacity: 1; }
.sv-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.sv-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   22. Reader experience (single posts)
   ========================================================================== */

/* — Reading progress bar — */
.sv-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: transparent;
	z-index: 60;
	pointer-events: none;
}
.sv-progress__bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sv-accent) 0%, var(--sv-accent-2) 100%);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .08s linear;
	will-change: transform;
}

/* — Reader 3-column layout (rail / content / TOC) — */
.sv-reader-layout {
	display: grid;
	grid-template-columns: 64px minmax(0, var(--reader-main-max, 820px)) 280px;
	column-gap: clamp(2rem, 4vw, 4rem);
	max-width: 1360px;
	margin: 0 auto;
	padding: 1.5rem var(--sv-pad) 0;
	align-items: start;
	justify-content: center;
}
.sv-reader-main { min-width: 0; grid-column: 2; }
.sv-reader-rail {
	position: sticky;
	top: calc(var(--sv-header-h) + 1.25rem);
	align-self: start;
	max-height: calc(100vh - var(--sv-header-h) - 2.5rem);
	overflow-y: auto;
	overflow-x: visible;
	scrollbar-width: thin;
}
.sv-reader-rail--left { grid-column: 1; }
.sv-reader-rail--right { grid-column: 3; }
.sv-reader-rail::-webkit-scrollbar { width: 6px; }
.sv-reader-rail::-webkit-scrollbar-thumb { background: var(--sv-border); border-radius: 999px; }

/* Single post page bottom space — keeps content off the footer. */
.sv-single { padding-bottom: var(--sv-section-pad); }

/* Post-content rails — centered wrapper for the prev/next bar. */
.sv-single .sv-postnav-wrap {
	max-width: 960px;
	margin: 2rem auto 0;
	padding: 0 var(--sv-pad);
}

@media (max-width: 1199px) {
	.sv-reader-layout {
		grid-template-columns: 64px minmax(0, 1fr);
		max-width: 1000px;
		column-gap: 2.5rem;
	}
	.sv-reader-rail--right { display: none; }
}
@media (max-width: 1023px) {
	.sv-reader-layout { grid-template-columns: 1fr; padding-bottom: 5rem; }
	.sv-reader-main { grid-column: 1; }
}

/* — Reading widths (controlled via the prefs panel) — */
:root[data-reader-width="narrow"] .sv-reader-layout { --reader-main-max: 680px; }
:root[data-reader-width="normal"] .sv-reader-layout { --reader-main-max: 820px; }
:root[data-reader-width="wide"]   .sv-reader-layout { --reader-main-max: 960px; }

/* On narrower viewports the content becomes flexible regardless of pref. */
@media (max-width: 1199px) {
	:root[data-reader-width] .sv-reader-layout { --reader-main-max: 1fr; }
}

/* — Reader font-size scaling — */
/* The reader scale defaults to 1 and is overwritten via the inline style
   that reader.js writes (`html.style.setProperty('--reader-size', ...)`).
   Every text element inside the article uses calc() so changes cascade. */
.sv-post__content {
	--reader-base: 1.0625rem;
	font-size: calc(var(--reader-base) * var(--reader-size, 1));
	line-height: 1.75;
}
.sv-post__content p,
.sv-post__content ul,
.sv-post__content ol,
.sv-post__content blockquote,
.sv-post__content li {
	font-size: 1em; /* inherit the scaled base */
}
.sv-post__content blockquote { font-size: 1.18em; }
.sv-post__content .highlight-box p { font-size: .94em; }
.sv-post__content .faq-question { font-size: 1em; }
.sv-post__content .faq-answer { font-size: .94em; }

/* — Table of contents — */
.sv-toc {
	font-size: .9rem;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 1rem 1.25rem 1.25rem;
}
.sv-toc[hidden] { display: none; }
.sv-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0 0 .5rem;
	font-family: var(--sv-font-body);
	cursor: pointer;
	color: inherit;
}
.sv-toc__heading {
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sv-muted);
}
.sv-toc__chev {
	width: 9px; height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.sv-toc__list {
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
	position: relative;
}
/* Single guide rail running through the whole list. */
.sv-toc__list::before {
	content: '';
	position: absolute;
	top: .5rem;
	bottom: .5rem;
	left: .5rem;
	width: 2px;
	background: var(--sv-border);
	border-radius: 2px;
}
.sv-toc__item { position: relative; }
.sv-toc__item + .sv-toc__item--h2 { margin-top: .35rem; }
.sv-toc__item a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .5rem .45rem 1.25rem;
	color: var(--sv-muted);
	text-decoration: none;
	line-height: 1.35;
	border-radius: var(--sv-radius-sm);
	transition: color .15s ease, background .15s ease, transform .15s ease;
	position: relative;
}
.sv-toc__item--h2 > a {
	font-weight: 600;
	color: var(--sv-ink-soft);
	font-size: .92rem;
	letter-spacing: -.005em;
}
.sv-toc__item--h3 > a {
	padding-left: 2rem;
	font-size: .82rem;
	color: var(--sv-muted);
}
/* The active marker — a colored dot anchored on the rail. */
.sv-toc__item > a::before {
	content: '';
	position: absolute;
	left: .25rem;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sv-surface);
	border: 2px solid transparent;
	transform: translateY(-50%) scale(.6);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.sv-toc__item--h3 > a::before { left: 1rem; width: 6px; height: 6px; }

.sv-toc__item a:hover {
	color: var(--sv-ink);
	background: rgba(31, 27, 22, .04);
}
.sv-toc__item a:hover::before { border-color: var(--sv-faint); transform: translateY(-50%) scale(1); }

.sv-toc__item a.is-active {
	color: var(--sv-accent-ink);
	background: rgba(224, 122, 95, .08);
	font-weight: 700;
}
.sv-toc__item--h3 > a.is-active { font-weight: 600; }
.sv-toc__item a.is-active::before {
	background: var(--sv-accent);
	border-color: var(--sv-accent);
	transform: translateY(-50%) scale(1);
	box-shadow: 0 0 0 4px rgba(224, 122, 95, .15);
}

@media (max-width: 1023px) {
	.sv-toc {
		position: relative;
		margin: 1.5rem 0 2rem;
	}
	.sv-toc__chev { transform: rotate(45deg) translate(-2px, -2px); }
	.sv-toc.is-open .sv-toc__chev { transform: rotate(225deg) translate(-2px, -2px); }
	.sv-toc__list { display: none; }
	.sv-toc.is-open .sv-toc__list { display: block; }
}

/* — Reading prefs (gear button + popover) — */
.sv-reader-prefs-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; }
.sv-reader-prefs__toggle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sv-border);
	background: var(--sv-surface);
	color: var(--sv-ink-soft);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sv-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.sv-reader-prefs__toggle:hover { transform: translateY(-1px); box-shadow: var(--sv-shadow-md); }
.sv-reader-prefs {
	position: absolute;
	right: 0;
	bottom: calc(100% + .75rem);
	width: 280px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 1rem;
	box-shadow: var(--sv-shadow-md);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sv-reader-prefs[hidden] { display: none; }
.sv-reader-prefs__group { display: flex; flex-direction: column; gap: .5rem; }
.sv-reader-prefs__title { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); font-weight: 700; }
.sv-reader-prefs__stepper {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: .5rem;
}
.sv-reader-prefs__stepper button {
	height: 36px;
	border-radius: var(--sv-radius-sm);
	border: 1px solid var(--sv-border);
	background: var(--sv-bg);
	color: var(--sv-ink);
	cursor: pointer;
	font-weight: 600;
}
.sv-reader-prefs__stepper button:hover { border-color: var(--sv-accent); color: var(--sv-accent-ink); }
.sv-reader-prefs__value { text-align: center; font-variant-numeric: tabular-nums; }
.sv-reader-prefs__radios { display: flex; flex-wrap: wrap; gap: .35rem; }
.sv-reader-prefs__chip {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.sv-reader-prefs__chip input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reader-prefs__chip span {
	padding: .4rem .75rem;
	border-radius: 999px;
	border: 1px solid var(--sv-border);
	background: var(--sv-bg);
	font-size: .85rem;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sv-reader-prefs__chip:hover span { border-color: var(--sv-accent); }
.sv-reader-prefs__chip input:checked + span {
	background: var(--sv-ink);
	color: var(--sv-bg);
	border-color: var(--sv-ink);
}
.sv-reader-prefs__chip input:focus-visible + span { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
.sv-reader-prefs__reset {
	background: transparent;
	border: 0;
	color: var(--sv-muted);
	cursor: pointer;
	font-size: .85rem;
	align-self: flex-start;
	padding: 0;
}
.sv-reader-prefs__reset:hover { color: var(--sv-accent-ink); text-decoration: underline; }

@media (max-width: 600px) {
	.sv-reader-prefs-wrap { right: .75rem; bottom: 5rem; } /* clear of mobile share bar */
	.sv-reader-prefs { width: calc(100vw - 1.5rem); right: -.25rem; }
}

/* — Reading themes — */
:root[data-reader-theme="sepia"] {
	--sv-bg: #F4ECDC;
	--sv-surface: #FBF4E4;
	--sv-ink: #4A3B22;
	--sv-ink-soft: #5C4A2E;
	--sv-muted: #8A7551;
	--sv-faint: #C8B58E;
	--sv-border: #E5D9BD;
}
:root[data-reader-theme="dark"] {
	--sv-bg: #14110D;
	--sv-surface: #1C1814;
	--sv-ink: #F0EAE0;
	--sv-ink-soft: #E0D8CB;
	--sv-muted: #9A8E7E;
	--sv-faint: #5C5448;
	--sv-accent: #F19A82;
	--sv-accent-ink: #F5B19D;
	--sv-border: #2B2620;
}
:root[data-reader-theme="dark"] .site-header { background: rgba(20, 17, 13, .9); }
:root[data-reader-theme="dark"] .sv-progress { mix-blend-mode: normal; }
:root[data-reader-theme="dark"] .sv-share--rail { background: rgba(20,17,13,.92); }
:root[data-reader-theme="dark"] .sv-newsletter { background: #0A0907; }
:root[data-reader-theme="dark"] ::selection { background: rgba(241, 154, 130, .35); color: #fff; }

@media (prefers-color-scheme: dark) {
	:root:not([data-reader-theme]) {
		--sv-bg: #14110D;
		--sv-surface: #1C1814;
		--sv-ink: #F0EAE0;
		--sv-ink-soft: #E0D8CB;
		--sv-muted: #9A8E7E;
		--sv-faint: #5C5448;
		--sv-accent: #F19A82;
		--sv-accent-ink: #F5B19D;
		--sv-border: #2B2620;
	}
	:root:not([data-reader-theme]) .site-header { background: rgba(20, 17, 13, .9); }
}

/* — Back-to-top — */
.sv-backtop {
	position: fixed;
	right: 1rem;
	bottom: 4.25rem; /* sits above the prefs gear */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sv-border);
	background: var(--sv-ink);
	color: var(--sv-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 44;
	box-shadow: var(--sv-shadow-sm);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.sv-backtop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sv-backtop:hover { background: var(--sv-accent); color: #fff; border-color: var(--sv-accent); }
@media (max-width: 600px) {
	.sv-backtop { bottom: 9rem; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
	.sv-progress__bar { transition: none; }
	.sv-backtop, .sv-share__btn, .sv-toc__item a { transition: none; }
}

/* ==========================================================================
   23. Print
   ========================================================================== */
@media print {
	.site-header, .site-footer, .sv-share, .sv-related, .sv-newsletter,
	.post-navigation, .sv-postnav, .sv-progress, .sv-reader-rail,
	.sv-reader-prefs-wrap, .sv-backtop { display: none !important; }
	.sv-reader-layout { display: block; padding: 0; }
	.sv-post__hero { margin: 0 0 1rem; }
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
}