/*
Theme Name: AskYuga
Theme URI: https://ask.yugatech.com
Author: YugaTech
Author URI: https://yugatech.com
Description: A modern, performant classic theme for Ask YugaTech, visual-matched to the AskYuga Next.js frontend. Warm ink-and-paper palette with a copper editorial accent, square controls, 1px line borders, and clean Inter typography. WordPress loop conventions throughout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: askyuga
Tags: blog, one-column, news, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------
   AskYuga design system
   Palette: warm ink on paper; a copper accent for the "Yuga" warmth.
   Type:    Inter (Google Fonts, display=swap) with system fallbacks.
   Every component below mirrors the next/askyuga frontend tokens.
--------------------------------------------------------------- */
:root {
	/* Ink / paper palette (mirrors app/globals.css @theme). */
	--color-canvas:        #fff8f6;
	--color-panel:         #fefae0;
	--color-surface-warm:  #fff1eb;
	--color-ink:           #251913;
	--color-ink-muted:     #624f45;
	--color-line:          #e9e5d1;
	--color-primary:       #9d4300;
	--color-primary-deep:  #783100;
	--color-sunburst:      #f97316;
	--color-coral:         #a93349;
	--color-coral-soft:    #ffdadc;
	--color-sky:           #004a74;
	--color-error:         #ba1a1a;
	--color-selection:     #ffdbca;

	/* Font stack. */
	--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout widths. */
	--max-content: 1440px;
	--max-read: 48rem;
}

/* ---------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--color-line);
}

html {
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-sans);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--color-selection);
	color: var(--color-ink);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--color-ink);
	letter-spacing: -0.02em;
}

p { margin: 0; }

a {
	color: inherit;
	text-decoration: none;
}

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

figure { margin: 0; }

a,
button,
input,
textarea,
select {
	-webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
	border-radius: 0;
	font-family: inherit;
}

button { cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* Screen reader / skip-link utilities */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--color-panel);
	color: var(--color-ink);
	border: 1px solid var(--color-ink);
	padding: 0.6em 1em;
	font-size: 0.9rem;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
	top: 0;
	background: var(--color-canvas);
}

/* ---------------------------------------------------------------
   Layout / container
   -------------------------------------------------------------- */
.site-main {
	display: block;
	min-height: calc(100vh - 220px);
	padding-bottom: 4rem;
}

.askyuga-container {
	width: 100%;
	max-width: var(--max-content);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 768px) {
	.askyuga-container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.askyuga-container { padding-inline: 2rem; }
}

/* ---------------------------------------------------------------
   Components (ported verbatim from app/globals.css)
   -------------------------------------------------------------- */
.editorial-kicker {
	color: var(--color-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.search-hero__kicker {
	color: var(--color-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.archive-density-range {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	height: 1.25rem;
}

.archive-density-range::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--color-coral) 0 var(--archive-density-fill), var(--color-line) var(--archive-density-fill) 100%);
	height: 0.3rem;
}

.archive-density-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--color-canvas);
	border: 2px solid var(--color-coral);
	border-radius: 0;
	height: 1rem;
	margin-top: -0.35rem;
	width: 1rem;
}

.archive-density-range::-moz-range-track {
	background: var(--color-line);
	height: 0.3rem;
}

.archive-density-range::-moz-range-progress {
	background: var(--color-coral);
	height: 0.3rem;
}

.archive-density-range::-moz-range-thumb {
	background: var(--color-canvas);
	border: 2px solid var(--color-coral);
	border-radius: 0;
	height: 1rem;
	width: 1rem;
}

/* ---------------------------------------------------------------
   Article body typography (ported from globals.css `.article-body`)
   -------------------------------------------------------------- */
.article-body {
	color: var(--color-ink);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.article-body > * + * {
	margin-top: 1.35rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.article-body h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: 2.75rem;
}

.article-body h3 {
	font-size: 1.3rem;
	margin-top: 2.25rem;
}

.article-body [data-askyuga-listen-active="true"] {
	background: #ffeadb;
	box-shadow: inset 3px 0 0 var(--color-sunburst);
	scroll-margin-top: 5rem;
}

.article-body a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.article-body blockquote {
	border-left: 3px solid var(--color-sunburst);
	color: var(--color-ink-muted);
	font-size: 1.15em;
	padding-left: 1rem;
}

/* Editorial list system: semantic HTML stays intact while top-level lists
   receive a quiet, Apple-like information rail instead of browser defaults. */
.article-body ul,
.article-body ol {
	list-style: none;
	margin-block: 1.6rem;
	padding: 0;
}

.article-body ol {
	counter-reset: askyuga-ordered-list;
}

.article-body li {
	color: var(--color-ink);
	position: relative;
}

.article-body > ul,
.article-body > ol {
	border-block: 1px solid var(--color-line);
}

.article-body > ul > li,
.article-body > ol > li {
	min-height: 2.8rem;
	padding: 0.8rem 0 0.8rem 2.75rem;
}

.article-body > ul > li + li,
.article-body > ol > li + li {
	border-top: 1px solid var(--color-line);
}

.article-body ul > li::before {
	background: var(--color-canvas);
	border: 1.5px solid var(--color-primary);
	content: "";
	height: 0.5rem;
	left: 0.65rem;
	position: absolute;
	top: 1.52em;
	transform: translateY(-50%);
	width: 0.5rem;
}

.article-body ol > li {
	counter-increment: askyuga-ordered-list;
}

.article-body ol > li::before {
	align-items: center;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	color: var(--color-primary);
	content: counters(askyuga-ordered-list, ".");
	display: inline-flex;
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	justify-content: center;
	left: 0;
	line-height: 1;
	min-height: 1.55rem;
	min-width: 1.55rem;
	padding-inline: 0.22rem;
	position: absolute;
	top: 0.78rem;
}

.article-body li > ul,
.article-body li > ol {
	margin: 0.85rem 0 0.2rem;
}

.article-body li > ul > li,
.article-body li > ol > li {
	padding: 0.3rem 0 0.3rem 1.7rem;
}

.article-body li > ul > li + li,
.article-body li > ol > li + li {
	margin-top: 0.25rem;
}

.article-body li > ul > li::before {
	background: var(--color-sunburst);
	border: 0;
	height: 0.32rem;
	left: 0.4rem;
	top: 1.2em;
	width: 0.32rem;
}

.article-body li > ol > li::before {
	background: var(--color-canvas);
	border-color: var(--color-line);
	color: var(--color-ink-muted);
	font-size: 0.625rem;
	min-height: 1.25rem;
	min-width: 1.25rem;
	padding-inline: 0.15rem;
	top: 0.32rem;
}

.article-body li > :first-child {
	margin-top: 0;
}

.article-body li > :last-child {
	margin-bottom: 0;
}

.article-body figure {
	border: 1px solid var(--color-line);
	margin-inline: 0;
	padding: 0.75rem;
}

.article-body img {
	height: auto;
	max-width: 100%;
}

.article-body .askyuga-gallery-image {
	cursor: zoom-in;
	outline-offset: 4px;
}

.article-body .askyuga-gallery-image:hover {
	filter: saturate(1.04);
}

.article-body figcaption {
	color: var(--color-ink-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
	margin-top: 0.625rem;
}

.article-body pre {
	background: #3b2d27;
	color: #ffede6;
	font-size: 0.875rem;
	line-height: 1.6;
	overflow-x: auto;
	padding: 1rem;
}

.article-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.article-body table {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-canvas);
	border: 1px solid var(--color-line);
	display: block;
	font-size: 0.9375rem;
	line-height: 1.5;
	min-width: min(100%, 38rem);
	max-width: 100%;
	overflow-x: auto;
}

.article-body .askyuga-table-shell {
	margin: 1.75rem 0;
	overflow: hidden;
}

.article-body .askyuga-table-shell table {
	margin: 0;
}

.article-body .askyuga-table-toggle {
	align-items: center;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-top: 0;
	color: var(--color-ink);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.08em;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	text-transform: uppercase;
}

.article-body .askyuga-table-toggle:hover {
	background: var(--color-surface-warm);
	border-color: var(--color-ink);
}

.article-body .askyuga-table-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
}

.article-body th,
.article-body td {
	border-bottom: 1px solid var(--color-line);
	border-right: 1px solid var(--color-line);
	padding: 0.75rem;
	text-align: left;
	vertical-align: top;
}

.article-body th {
	background: var(--color-panel);
	color: var(--color-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.article-body tr:last-child td,
.article-body tr:last-child th {
	border-bottom: 0;
}

.article-body td:last-child,
.article-body th:last-child {
	border-right: 0;
}

.article-body tbody tr:nth-child(even) td,
.article-body tbody tr:nth-child(even) th {
	background: color-mix(in srgb, var(--color-panel) 42%, transparent);
}

.article-body .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.article-body .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.article-body .aligncenter { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   Directory table (ported from globals.css `.askyuga-directory-table`)
   -------------------------------------------------------------- */
.askyuga-directory-table th,
.askyuga-directory-table td {
	border-bottom: 1px solid var(--color-line);
	padding: 0.875rem 1rem;
	vertical-align: middle;
}

.askyuga-directory-table thead th {
	background: var(--color-panel);
	color: var(--color-ink-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.askyuga-directory-table tbody tr:last-child th,
.askyuga-directory-table tbody tr:last-child td {
	border-bottom: 0;
}

.askyuga-directory-table tbody tr:hover th,
.askyuga-directory-table tbody tr:hover td {
	background: var(--color-surface-warm);
}

/* ===============================================================
   Header
   ============================================================== */
.site-header {
	border-bottom: 1px solid var(--color-line);
	background: var(--color-canvas);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.75rem; /* min-h-15 */
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-shrink: 0;
}

.site-logo img {
	height: auto;
	width: 144px;
}

@media (min-width: 640px) {
	.site-logo img { width: 168px; }
}

/* Desktop primary navigation */
.main-navigation {
	display: none;
	align-items: stretch;
	height: 3.75rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	height: 100%;
}

.main-navigation a {
	display: flex;
	align-items: center;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	padding-inline: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-ink-muted);
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.main-navigation a:hover {
	background: var(--color-panel);
	color: var(--color-ink);
}

.main-navigation a.is-active {
	border-left-color: var(--color-line);
	border-right-color: var(--color-line);
	background: var(--color-panel);
	color: var(--color-primary);
}

@media (min-width: 768px) {
	.main-navigation { display: flex; }
}

/* Right-side header actions */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--color-line);
	background: transparent;
	color: var(--color-ink);
}

.search-toggle:hover {
	border-color: var(--color-ink);
	color: var(--color-primary);
}

.search-toggle .search-toggle__label,
.search-toggle kbd {
	display: none;
}

@media (min-width: 768px) {
	.search-toggle {
		width: auto;
		gap: 0.5rem;
		padding-inline: 0.75rem;
	}
}

@media (min-width: 1024px) {
	.search-toggle .search-toggle__label {
		display: inline;
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}
}

@media (min-width: 1280px) {
	.search-toggle kbd {
		display: inline;
		border: 1px solid var(--color-line);
		padding: 0.125rem 0.25rem;
		font-size: 0.625rem;
		font-weight: 500;
		letter-spacing: normal;
		color: var(--color-ink-muted);
	}
}

.editorial-policy-link {
	display: none;
	border: 1px solid var(--color-ink);
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink);
	background: transparent;
}

.editorial-policy-link:hover {
	background: var(--color-ink);
	color: var(--color-canvas);
}

@media (min-width: 1024px) {
	.editorial-policy-link { display: inline-flex; align-items: center; }
}

/* Mobile bottom navigation */
.mobile-nav {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--color-line);
	background: var(--color-canvas);
}

.mobile-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 3.75rem;
	border-right: 1px solid var(--color-line);
	font-size: 11px;
	font-weight: 500;
	color: var(--color-ink-muted);
}

.mobile-nav a:last-child { border-right: 0; }

.mobile-nav a.is-active {
	background: var(--color-panel);
	color: var(--color-primary);
}

.mobile-nav svg { display: block; }

@media (min-width: 768px) {
	.mobile-nav { display: none; }
}

/* ===============================================================
   Footer
   ============================================================== */
.site-footer {
	border-top: 1px solid var(--color-line);
	background: var(--color-panel);
	padding-bottom: 5rem; /* pb-20 to clear the mobile nav */
}

@media (min-width: 768px) {
	.site-footer { padding-bottom: 0; }
}

.site-footer__inner {
	display: grid;
	gap: 2rem;
	padding: 2rem 1rem;
	max-width: var(--max-content);
	margin-inline: auto;
}

.site-footer__brand img {
	height: auto;
	width: 180px;
}

.site-footer__blurb {
	margin-top: 0.75rem;
	max-width: 28rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.site-footer__col ul {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}

.site-footer__col li {
	border-bottom: 1px solid var(--color-line);
}

.site-footer__col a {
	display: block;
	padding: 0.625rem 0;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
}

.site-footer__col a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.site-footer__bottom {
	border-top: 1px solid var(--color-line);
}

.site-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1rem;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
	max-width: var(--max-content);
	margin-inline: auto;
}

.site-footer__bottom-inner p { margin: 0; }

@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 0.8fr));
		padding: 2.5rem 2rem;
	}
}

@media (min-width: 768px) {
	.site-footer__inner { padding: 2rem 1.5rem; }
	.site-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.5rem;
	}
}

@media (min-width: 1024px) {
	.site-footer__bottom-inner { padding: 1rem 2rem; }
}

/* ===============================================================
   Home hero + feed
   ============================================================== */
.askyuga-home {
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.askyuga-home { padding-top: 2rem; }
}

.home-hero__grid {
	display: grid;
	gap: 1.5rem;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 1.5rem;
}

.home-hero__title {
	margin-top: 0.5rem;
	max-width: 48rem;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.98;
	font-size: 2.25rem;
	color: var(--color-ink);
}

.home-hero__blurb {
	max-width: 28rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.home-hero__grid {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
	.home-hero__title { font-size: 3.75rem; }
}

/* Latest feed: two columns with a topics rail */
.home-feed {
	display: grid;
	gap: 1.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-line);
}

@media (min-width: 768px) {
	.home-feed {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 2.5rem;
	}
}

.home-feed__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 0.75rem;
}

.home-feed__head h2 {
	margin-top: 0.25rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: 1.5rem;
	color: var(--color-ink);
}

.home-feed__archive-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	white-space: nowrap;
}

.home-feed__archive-link:hover { text-decoration: underline; }

.home-feed__list { margin-top: 1rem; }

/* Topics aside */
.home-topics {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1rem;
	align-self: start;
}

.home-topics__title {
	margin-top: 0.25rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: 1.25rem;
	color: var(--color-ink);
}

.home-topics ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}

.home-topics li {
	border-bottom: 1px solid var(--color-line);
}

.home-topics a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-ink);
}

.home-topics a:hover { color: var(--color-primary); }

.home-topics__empty {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-ink-muted);
}

/* ===============================================================
   Article cards
   ============================================================== */
.post-card {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
}

.post-card__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-surface-warm);
	aspect-ratio: 4 / 3;
}

.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.post-card:hover .post-card__thumb img { transform: scale(1.02); }

.post-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1rem;
}

.post-card__category {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.post-card__title {
	margin-top: 0.75rem;
	font-size: 1.25rem;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--color-ink);
}

.post-card__title a { color: inherit; }

.post-card:hover .post-card__title a { color: var(--color-primary); }

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 0.85rem;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}

.post-card__meta time,
.post-card__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Feature card (wide image beside body) */
.post-card--feature {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.post-card--feature {
		grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	}
	.post-card--feature .post-card__thumb {
		aspect-ratio: 16 / 10;
		min-height: 100%;
	}
	.post-card--feature .post-card__body { padding: 1.5rem; }
}

.post-card--feature .post-card__title {
	font-size: 1.5rem;
	line-height: 1.08;
}

@media (min-width: 768px) {
	.post-card--feature .post-card__title { font-size: clamp(1.8rem, 3vw, 3.35rem); }
}

/* Text row (kicker -> title -> meta) used on the home feed */
.post-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	border-bottom: 1px solid var(--color-line);
	padding: 0.75rem 0;
	text-align: left;
}

@media (min-width: 640px) {
	.post-row { grid-template-columns: 120px minmax(0, 1fr); }
}

.post-row__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface-warm);
}

.post-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-row__body { min-width: 0; }

.post-row__category {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
}

.post-row__title {
	margin-top: 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.035em;
	color: var(--color-ink);
}

.post-row__title a { color: inherit; }

.post-row__meta {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}

/* ===============================================================
   Archive / search / index header
   ============================================================== */
.archive-hero {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 1.5rem;
}

.archive-hero .page-title {
	margin-top: 0.5rem;
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.05;
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--color-ink);
}

.archive-hero .archive-description {
	margin-top: 0.75rem;
	max-width: 46rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.archive-description p { margin: 0; }

.page-header { margin: 0; }

.page-links {
	clear: both;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
}

.page-links a {
	color: var(--color-primary);
	text-decoration: underline;
}

.archive-hero__count {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}

.search-query { color: var(--color-primary); }

.archive-hero .search-form { margin-top: 1.25rem; }

/* ===============================================================
   Cards grid
   ============================================================== */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1536px) {
	.post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===============================================================
   Single article
   ============================================================== */
/* Width is governed by the .single-article__grid + .askyuga-container;
   the <article> itself must not cap the two-column layout. */
.single-article { display: block; }

.breadcrumbs {
	margin-bottom: 1.25rem;
	overflow-x: auto;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}

.breadcrumbs ol {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: max-content;
	margin: 0;
	padding: 0;
}

.breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs .breadcrumbs__sep { color: var(--color-line); }

.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }

.breadcrumbs .is-current {
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	color: var(--color-ink);
}

.article-header { margin-bottom: 1.25rem; }

.article-kicker {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.article-kicker:hover { text-decoration: underline; }

.entry-title {
	margin-top: 0.5rem;
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.05;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
	color: var(--color-ink);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
}

.article-meta a { color: var(--color-primary); }
.article-meta a:hover { text-decoration: underline; }

.article-thumbnail {
	margin: 1.5rem 0 2rem;
}

.article-thumbnail img {
	width: 100%;
	height: auto;
	border: 1px solid var(--color-line);
}

.article-footer {
	margin-top: 2rem;
	border-top: 1px solid var(--color-line);
	padding-top: 1.5rem;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.article-tags__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink-muted);
}

.article-tags a {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--color-ink-muted);
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 0.25rem 0.6rem;
}

.article-tags a:hover {
	color: var(--color-primary);
	border-color: var(--color-ink);
}

/* Byline */
.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.byline .byline__author { font-weight: 600; color: var(--color-ink); }
.byline .byline__author a { color: var(--color-primary); }
.byline .byline__author a:hover { text-decoration: underline; }
.byline .byline__sep { color: var(--color-line); }

/* Author box */
.author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2.5rem;
	padding: 1.25rem;
	border: 1px solid var(--color-line);
	background: var(--color-panel);
}

.author-box__avatar img { border-radius: 0; }

.author-box__label {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.author-box__name {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}

.author-box__bio {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-ink-muted);
}

.author-box__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

.author-box__link:hover { text-decoration: underline; }

/* Post navigation (prev / next) */
.post-navigation {
	margin-top: 2.5rem;
	border-top: 1px solid var(--color-line);
	padding-top: 1.5rem;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.post-navigation .nav-next { text-align: right; }

.post-navigation a {
	display: inline-block;
	max-width: 100%;
	color: var(--color-ink);
}

.post-navigation .nav-sub {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.post-navigation .nav-title { font-weight: 600; }
.post-navigation a:hover .nav-title { color: var(--color-primary); }

/* Page (static) */
.page-entry {
	display: block;
}

.page-entry .entry-thumbnail { margin: 1.25rem 0 1.75rem; }
.page-entry .entry-thumbnail img { width: 100%; border: 1px solid var(--color-line); }

.page-content { color: var(--color-ink); max-width: 48rem; }

/* ===============================================================
   Search form
   ============================================================== */
.search-form {
	display: flex;
	width: 100%;
	max-width: 36rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
}

.search-form:focus-within { border-color: var(--color-primary); }

.search-form .search-form__icon {
	align-self: center;
	margin: 0 0.25rem 0 0.75rem;
	color: var(--color-ink-muted);
	flex-shrink: 0;
}

.search-form .search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0.625rem 0.875rem;
	font-size: 1rem;
	background: transparent;
	color: var(--color-ink);
	appearance: none;
}

.search-form .search-field::placeholder { color: var(--color-ink-muted); }
.search-form .search-field:focus { outline: none; }

.search-form .search-submit {
	border: 0;
	border-left: 1px solid var(--color-line);
	background: var(--color-primary);
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
}

.search-form .search-submit:hover { background: var(--color-primary-deep); }

/* ===============================================================
   Pagination
   ============================================================== */
.pagination,
.navigation.pagination {
	margin-top: 2.5rem;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink-muted);
	font-size: 0.875rem;
}

.navigation.pagination .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.navigation.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ===============================================================
   Pagination — Next.js parity (Previous … N … Next)
   Mirrors the Next.js ArchivePagination / LatestPagination.
   ============================================================== */
.askyuga-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}
.askyuga-pagination__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--color-line);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
	background: var(--color-canvas);
}
.askyuga-pagination__btn:hover { border-color: var(--color-ink); }
.askyuga-pagination__btn.is-disabled { color: var(--color-ink-muted); }
.askyuga-pagination__btn.is-next {
	border-color: var(--color-ink);
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	margin-left: auto;
}
.askyuga-pagination__btn.is-next:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); }
.askyuga-pagination__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 0.5rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.askyuga-pagination__num:hover { border-color: var(--color-ink); }
.askyuga-pagination__num.is-current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}
.askyuga-pagination__ellipsis { color: var(--color-ink-muted); padding: 0 0.1rem; }

/* ===============================================================
   Comments
   ============================================================== */
.comments-area {
	margin-top: 3rem;
	border-top: 1px solid var(--color-line);
	padding-top: 2rem;
}

.comments-title {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-line);
}

.comment-list .comment-body { font-size: 0.9375rem; }

.comment-list .comment-author { font-weight: 600; }
.comment-list .comment-author img { margin-right: 0.5rem; }
.comment-list .comment-metadata { font-size: 0.75rem; color: var(--color-ink-muted); }
.comment-list .comment-content { margin-top: 0.625rem; }
.comment-list .comment-content p { margin: 0 0 0.6em; }
.comment-list .comment-content p:last-child { margin-bottom: 0; }
.comment-list .reply { font-size: 0.8rem; }

.comment-list .children {
	list-style: none;
	margin: 0.8rem 0 0 1.5rem;
	padding: 0;
}

.no-comments { margin-top: 1rem; color: var(--color-ink-muted); }

.comment-respond .comment-reply-title {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}

.comment-form label { display: block; margin: 1rem 0 0.35rem; font-size: 0.875rem; font-weight: 600; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.comment-form input[type="submit"] {
	font: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink);
	width: 100%;
}

.comment-form textarea { min-height: 140px; resize: vertical; }

.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--color-primary); }

.comment-form input[type="submit"] {
	width: auto;
	margin-top: 1rem;
	border: 1px solid var(--color-ink);
	background: var(--color-canvas);
	color: var(--color-ink);
	font-weight: 600;
}

.comment-form input[type="submit"]:hover { background: var(--color-ink); color: var(--color-canvas); }

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.comment-form .comment-form-cookies-consent label { margin: 0; }
.comment-form .comment-form-cookies-consent input { width: auto; }

/* ===============================================================
   Empty states
   ============================================================== */
.no-results {
	max-width: var(--max-read);
	margin-inline: auto;
	padding: 2rem 1rem;
	border: 1px solid var(--color-line);
	background: var(--color-panel);
}

.no-results .page-title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.no-results .page-content { margin-top: 0.75rem; }
.no-results .page-content p { margin: 0 0 1rem; }
.no-results .page-content a { color: var(--color-primary); text-decoration: underline; }
.no-results .search-form { margin-top: 1rem; }

/* ===============================================================
   Saved view (rendered by the askyuga-saved plugin, not the theme)
   ============================================================== */
.saved-view {
	max-width: var(--max-content);
	margin-inline: auto;
	padding: 1.5rem 1rem 2.5rem;
}

@media (min-width: 768px) { .saved-view { padding: 2rem 1.5rem 3rem; } }
@media (min-width: 1024px) { .saved-view { padding: 2rem 2rem 3rem; } }

.saved-view .page-title {
	margin-top: 0.5rem;
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.05;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
}

/* ===============================================================
   Archive toolbar (injected by askyuga-ui.js) — square, Next.js look
   ============================================================== */
.askyuga-archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0;
	padding: 0.75rem;
	border: 1px solid var(--color-line);
	background: var(--color-panel);
}

.askyuga-toolbar-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.askyuga-toolbar-divider { color: var(--color-line); }

.askyuga-toolbar-btn {
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.askyuga-toolbar-btn:hover { border-color: var(--color-ink); }

.askyuga-toolbar-btn.is-active,
.askyuga-toolbar-btn[aria-pressed="true"] {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

/* Archive density (2/3/4 columns) + list/text views, toggled by askyuga-ui.js.
   Density produces a DISTINCT column count on every screen width (including
   mobile) so pressing 2 / 3 / 4 always visibly changes the grid. */
body.card-density-2 .post-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.card-density-3 .post-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.card-density-4 .post-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.archive-view-list .post-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

body.archive-view-list .post-card {
	grid-template-columns: 120px minmax(0, 1fr);
}

body.archive-view-text .post-card__thumb { display: none; }

body.archive-view-text .post-card__title { font-size: 1.4rem; }

/* ===============================================================
   Article image lightbox (built by askyuga-ui.js) — square controls
   ============================================================== */
.article-content img[role="button"],
.entry-content img[role="button"],
.article-body img[role="button"] { cursor: zoom-in; }

.askyuga-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.askyuga-lightbox.is-open { opacity: 1; visibility: visible; }

.askyuga-lightbox__stage {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.askyuga-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
}

.askyuga-lightbox__close,
.askyuga-lightbox__prev,
.askyuga-lightbox__next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 1.4rem;
	line-height: 1;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.askyuga-lightbox__close { top: 0; right: 0; width: 44px; height: 44px; }
.askyuga-lightbox__prev { left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.askyuga-lightbox__next { right: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }

.askyuga-lightbox__close:hover,
.askyuga-lightbox__prev:hover,
.askyuga-lightbox__next:hover { background: rgba(255, 255, 255, 0.28); }

.askyuga-lightbox__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.9rem;
	color: #fff;
	font-size: 0.9rem;
}

.askyuga-lightbox__counter { font-weight: 600; }
.askyuga-lightbox__caption { color: rgba(255, 255, 255, 0.85); text-align: center; }

body.askyuga-lightbox-open { overflow: hidden; }

/* ===============================================================
   Search dialog (injected by askyuga-search.js) — square canvas
   look to match the Next.js search dialog. Higher specificity
   (body prefix) wins over the script's injected stylesheet.
   ============================================================== */
body .askyuga-search .askyuga-search__panel {
	border-radius: 0;
	background: var(--color-canvas);
	border: 1px solid var(--color-line);
	box-shadow: none;
	color: var(--color-ink);
	padding: 1.25rem;
}

body .askyuga-search__title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--color-ink);
}

body .askyuga-search .askyuga-search__input {
	border: 1px solid var(--color-line);
	border-radius: 0;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: inherit;
}

body .askyuga-search .askyuga-search__input:focus { border-color: var(--color-primary); outline: none; }

body .askyuga-search .askyuga-search__close {
	border: 1px solid var(--color-line);
	border-radius: 0;
	background: var(--color-canvas);
	color: var(--color-ink);
}

body .askyuga-search .askyuga-search__close:hover { border-color: var(--color-ink); color: var(--color-primary); }

body .askyuga-search .askyuga-search__hint { color: var(--color-ink-muted); }

body .askyuga-search .askyuga-search__hint kbd {
	border: 1px solid var(--color-line);
	border-radius: 0;
	background: var(--color-panel);
	color: var(--color-ink);
}

/* Search dialog — Next.js parity (kicker, lede, flex form, orange submit,
   hint spans). */
body .askyuga-search .askyuga-search__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
body .askyuga-search .askyuga-search__kicker {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--color-primary);
}
body .askyuga-search .askyuga-search__title { margin-top: 0.25rem; }
body .askyuga-search .askyuga-search__lede {
	margin: 0.5rem 0 0;
	max-width: 36rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-ink-muted);
}
body .askyuga-search .askyuga-search__form {
	margin-top: 1.25rem;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
}
body .askyuga-search .askyuga-search__form:focus-within { border-color: var(--color-primary); }
body .askyuga-search .askyuga-search__input {
	min-width: 0;
	flex: 1 1 auto;
	border: 0;
	padding: 0.75rem;
	font-size: 1rem;
	background: transparent;
}
body .askyuga-search .askyuga-search__submit {
	border: 0;
	border-left: 1px solid var(--color-line);
	background: var(--color-primary);
	color: #fff;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}
body .askyuga-search .askyuga-search__submit:hover { background: var(--color-primary-deep); }
body .askyuga-search .askyuga-search__hint {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.75rem;
}
body .askyuga-search .askyuga-search__hint span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ===============================================================
   Dark mode (light-only parity with the Next.js frontend).
   The Next.js frontend ships a light-only theme (viewport
   colorScheme: light, themeColor #fff8f6) with no user-facing theme
   toggle, so this theme intentionally ships no dark palette. If a
   plugin sets `data-theme="dark"` on <html>, the ink-from-paper
   palette is left in place.
   ============================================================== */

/* ===============================================================
   Reduced motion
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===============================================================
   Responsive tweaks
   ============================================================== */
@media (max-width: 639px) {
	/* Default single-column grid on small screens, but let the archive
	   card-density classes (card-density-2/3/4, toggled by askyuga-ui.js)
	   win so the density buttons work on mobile too. */
	body:not([class*="card-density-"]) .post-grid { grid-template-columns: 1fr; }
	.post-card--feature { grid-template-columns: 1fr; }
	.post-navigation .nav-links { grid-template-columns: 1fr; gap: 0.8rem; }
	.post-navigation .nav-next { text-align: left; }

	/* Compact mobile density — fit more content, less scrolling. */
	.home-hero__title { font-size: clamp(1.9rem, 7vw, 2.4rem); }
	.home-hero__blurb { font-size: 0.8rem; }
	.home-feed__head .home-feed__archive-link { font-size: 0.8rem; }
	.post-grid { gap: 0.6rem; }
	.post-card__body { padding: 0.65rem; }
	.post-card__title { font-size: 1.05rem; line-height: 1.2; margin-top: 0.5rem; }
	.post-card__excerpt { font-size: 0.8rem; line-height: 1.45; margin-top: 0.45rem; }
	.post-card__meta { padding-top: 0.6rem; gap: 0.5rem 0.7rem; }
	.post-row { padding: 0.55rem 0; gap: 0.6rem; }
	.askyuga-save-btn__label { font-size: 0.7rem; }
	.askyuga-save-btn { padding: 0.22rem 0.42rem; }
}

@media (max-width: 767px) {
	.home-feed { grid-template-columns: 1fr; }
	.home-topics { align-self: auto; }
	.home-hero__grid { grid-template-columns: 1fr; }
}

/* ===============================================================
   Explore page (/explore) — chips, hero lede, results header
   Mirrors the retired Next.js /explore filters + archive grid.
   ============================================================== */
.explore-hero {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.explore-hero {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
}
.explore-hero__lede {
	margin: 0;
	max-width: 30rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.explore-filters {
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
}
.explore-chips {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.explore-chips__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
/* Hide chips beyond the initial set until "Show all" is tapped. */
.explore-chip.is-extra { display: none; }
.explore-chips.is-expanded .explore-chip.is-extra { display: inline-flex; }
.explore-chips__toggle {
	cursor: pointer;
	font-family: inherit;
}
.explore-chips__label {
	margin-right: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}
.explore-chip {
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	padding: 0.32rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.explore-chip:hover { border-color: var(--color-ink); }
.explore-chip.is-active {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}
.explore-chip--tag.is-active {
	border-color: var(--color-coral);
	background: var(--color-coral);
}
.explore-chips__toggle.is-active { color: var(--color-ink); }

.explore-results { padding-top: 1.75rem; }
.explore-results__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.explore-results__title {
	margin: 0.25rem 0 0;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: var(--color-ink);
}
.explore-results__count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
	white-space: nowrap;
}

/* ===============================================================
   Topics directory (/topics) — editorial taxonomy table
   Mirrors the retired Next.js taxonomy directory table.
   ============================================================== */
.askyuga-container--narrow {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 1rem;
}
@media (min-width: 768px) {
	.askyuga-container--narrow { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
	.askyuga-container--narrow { padding-inline: 2rem; }
}

.topics-hero {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.topics-hero {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
}
.topics-hero__lede {
	margin: 0;
	max-width: 30rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.topics-directory { padding-top: 1.75rem; }
.topics-directory__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.topics-directory__count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
}
.topics-directory__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	color: var(--color-ink);
}
.topics-directory__table th,
.topics-directory__table td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
}
.topics-directory__table thead th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}
.topics-directory__table th.is-number,
.topics-directory__table td.is-number {
	text-align: right;
	width: 5rem;
	color: var(--color-ink-muted);
}
.topics-directory__table tbody th {
	font-weight: 500;
}
.topics-directory__table tbody th a {
	color: var(--color-ink);
	text-decoration: none;
}
.topics-directory__table tbody th a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
@media (max-width: 639px) {
	.topics-directory__table thead { display: none; }
	.topics-directory__table tr { display: block; border-bottom: 1px solid var(--color-line); padding: 0.5rem 0; }
	.topics-directory__table tbody th,
	.topics-directory__table tbody td { display: block; padding: 0.15rem 0; border: 0; }
	.topics-directory__table td.is-number { text-align: left; }
}

/* ===============================================================
   Home — "Featured from the editorial desk" card
   Mirrors the Next.js <ArticleCard feature>.
   ============================================================== */
.home-featured { padding-top: 1.5rem; }
.home-featured__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.home-featured__note {
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}
.post-card--feature {
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.post-card--feature {
		grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	}
}
.post-card--feature .post-card__thumb {
	aspect-ratio: 16 / 10;
	min-height: 100%;
}
.post-card--feature .post-card__body { padding: 1.5rem; }
.post-card--feature .post-card__title {
	font-size: clamp(1.5rem, 2.4vw, 2.4rem);
	line-height: 1.08;
}
.post-card__excerpt {
	margin-top: 0.75rem;
	max-width: 36rem;
	color: var(--color-ink-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ===============================================================
   Home — "Follow a line of coverage" category-desk grid
   Mirrors the Next.js home Category desk module.
   ============================================================== */
.home-desks { border-top: 1px solid var(--color-line); padding-top: 2rem; }
.home-desks__head { margin-bottom: 1rem; }
.home-desks__title {
	margin: 0.25rem 0 0;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: var(--color-ink);
}
.home-desks__lede {
	margin: 0.5rem 0 0;
	max-width: 42rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}
.home-desks__grid {
	margin-top: 1rem;
	display: grid;
	gap: 1rem;
}
@media (min-width: 1024px) {
	.home-desks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-desk {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1rem;
}
.home-desk__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}
.home-desk__link:hover { text-decoration: underline; }
.home-desk__list { margin-top: 0.5rem; }

/* (compact desk post-row grid is now handled by the shared .post-row rules) */

/* ===============================================================
   Single article — two-column main + 260px rail
   Mirrors the Next.js /articles/[slug] page.
   ============================================================== */
.single-article__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
	.single-article__grid {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 3rem;
	}
}
.single-article__main { min-width: 0; }

.article-header { border-bottom: 1px solid var(--color-line); padding: 1.5rem 0; }
.article-header .editorial-kicker a { color: inherit; text-decoration: none; }
.entry-title {
	margin-top: 0.75rem;
	max-width: 56rem;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.96;
	font-size: clamp(2rem, 5.2vw, 4.5rem);
	color: var(--color-ink);
}
.article-excerpt {
	margin: 1.25rem 0 0;
	max-width: 48rem;
	color: var(--color-ink-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}
.article-meta { margin-top: 1.5rem; }
.article-actions { margin-top: 1.5rem; display: flex; gap: 0.5rem; }
.article-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--color-line);
	padding: 0.4rem 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
}
.article-action:hover { border-color: var(--color-ink); }

.article-thumbnail { margin: 1.5rem 0; }
.article-thumbnail img { width: 100%; height: auto; border-radius: 0; display: block; }

/* Right rail */
.single-article__rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-content: start;
}
@media (min-width: 1024px) {
	.single-article__rail { padding-top: 2.5rem; }
}
.article-rail__card {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1rem;
}
.article-rail__title {
	margin: 0.25rem 0 0;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-size: 1.25rem;
	color: var(--color-ink);
}
.article-rail__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}
.article-rail__avatar {
	display: flex;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	flex: 0 0 auto;
}
.article-rail__author { margin: 0; font-weight: 600; color: var(--color-ink); }
.article-rail__author-role {
	margin: 0.1rem 0 0;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}
.article-rail__bio { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }
.article-rail__bio a { color: var(--color-primary); text-decoration: underline; }
.article-rail__more {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}
.article-rail__more:hover { text-decoration: underline; }

.article-rail__sticky { border: 1px solid var(--color-line); background: var(--color-panel); padding: 1rem; }
@media (min-width: 1024px) {
	.article-rail__sticky { position: sticky; top: 1.25rem; }
}
.article-rail__group { margin-top: 0.75rem; border-top: 1px solid var(--color-line); padding-top: 0.75rem; }
.article-rail__label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}
.article-rail__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.article-rail__chip {
	border: 1px solid var(--color-line);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
}
.article-rail__chip:hover { border-color: var(--color-ink); color: var(--color-primary); }
.article-rail__link {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
}
.article-rail__link:hover { text-decoration: underline; }
.article-rail__sticky .article-rail__link:last-child { margin-top: 1.25rem; }

@media (max-width: 1023px) {
	.single-article__rail { padding-top: 0; }
}

/* ===============================================================
   Card top line (category + Save), excerpt, format chips
   Mirrors the Next.js <ArticleCard>.
   ============================================================== */
.post-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.post-card__top .post-card__category { min-width: 0; }
.post-card__excerpt {
	margin-top: 0.75rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.post-card__format { color: var(--color-ink-muted); }
.post-card__format.is-listen { color: var(--color-coral); font-weight: 600; }
.post-card__format.is-watch { color: var(--color-sky); font-weight: 600; }

/* Compact bookmark button (cards / rows / featured). */
.askyuga-save-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	padding: 0.35rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-ink);
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}
.askyuga-save-btn svg { display: block; }
.askyuga-save-btn:hover { border-color: var(--color-ink); color: var(--color-primary); }
.askyuga-save-btn.is-saved { border-color: var(--color-primary); color: var(--color-primary); }
.askyuga-save-btn--compact { padding: 0.3rem; }
.askyuga-save-btn__label { font-size: 0.75rem; }

/* ===============================================================
   Home list row — 3 columns [thumb | body | save]
   Mirrors the Next.js <ArticleListRow>.
   ============================================================== */
.post-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	border-bottom: 1px solid var(--color-line);
	padding: 0.75rem 0;
	text-align: left;
}
@media (min-width: 640px) {
	.post-row { grid-template-columns: 120px minmax(0, 1fr) auto; }
}
.post-row__thumb { display: block; }
.post-row__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--color-surface-warm);
}
.post-row__title { margin-top: 0.25rem; }
.post-row__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-ink);
	text-decoration: none;
}
.post-row:hover .post-row__title a { color: var(--color-primary); }
.post-row__meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-ink-muted); }
.post-row .askyuga-save-btn { align-self: center; }

/* The desk grids reuse post-row; keep the same 3-col layout there. */
.home-desk__list .post-row,
.home-feed__list .post-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
@media (min-width: 640px) {
	.home-desk__list .post-row,
	.home-feed__list .post-row { grid-template-columns: 120px minmax(0, 1fr) auto; }
}

/* ===============================================================
   Single article — "READ" modes nav + Share button
   Mirrors the Next.js /articles/[slug] top nav + Save/Share actions.
   ============================================================== */
.article-modes {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}
.article-modes__item {
	border-right: 1px solid var(--color-line);
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
}
.article-modes__item:last-child { border-right: 0; }
.article-modes__item.is-active {
	background: var(--color-panel);
	color: var(--color-primary);
}
.article-modes__item:not(.is-active):hover { background: var(--color-panel); }

.article-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.article-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--color-line);
	padding: 0.45rem 0.8rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	font-family: inherit;
	background: var(--color-canvas);
	cursor: pointer;
}
.article-action:hover { border-color: var(--color-ink); color: var(--color-primary); }

/* ===============================================================
   /latest archive page — hero lede
   Mirrors the Next.js /latest page header.
   ============================================================== */
.latest-hero {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.latest-hero {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
}
.latest-hero__lede {
	margin: 0;
	max-width: 32rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ===============================================================
   /search — "Search AskYuga" hero form + results list
   Mirrors the Next.js /search page.
   ============================================================== */
.search-hero { border-bottom: 1px solid var(--color-line); padding-bottom: 1.5rem; }
.search-hero__title { font-size: clamp(2rem, 5.2vw, 3.5rem); }
.search-hero__lede { margin: 0.75rem 0 0; max-width: 42rem; color: var(--color-ink-muted); font-size: 0.875rem; line-height: 1.5; }

.search-form--hero {
	margin-top: 1.5rem;
	display: flex;
	align-items: stretch;
	max-width: 48rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
}
.search-form--hero:focus-within { border-color: var(--color-primary); }
.search-form--hero .search-form__icon { margin: 0.75rem; flex: 0 0 auto; color: var(--color-ink-muted); }
.search-form--hero input {
	min-width: 0;
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	padding: 0.75rem 0.75rem 0.75rem 0;
	font-size: 1rem;
	color: var(--color-ink);
	outline: none;
}
.search-form--hero input::placeholder { color: var(--color-ink-muted); }
.search-form--hero .search-submit {
	border: 0;
	border-left: 1px solid var(--color-line);
	background: var(--color-primary);
	color: #fff;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}
.search-form--hero .search-submit:hover { background: var(--color-primary-deep); }

.search-empty { margin-top: 2rem; border: 1px solid var(--color-line); background: var(--color-panel); padding: 1.25rem; }
.search-empty__title { margin: 0 0 0.5rem; font-weight: 600; font-size: 1.25rem; color: var(--color-ink); }
.search-empty__text { margin: 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }
.search-empty__link { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.search-empty__link:hover { text-decoration: underline; }

.search-results-class { margin-top: 2rem; }
.search-results-class__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 1rem;
}
.search-results-class__title { margin: 0.25rem 0 0; font-weight: 600; letter-spacing: -0.035em; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--color-ink); }
.search-results-class__clear { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.search-results-class__clear:hover { text-decoration: underline; }

.search-results-list { margin-top: 1.25rem; padding: 0; border-bottom: 1px solid var(--color-line); list-style: none; }
.search-result { border-top: 1px solid var(--color-line); padding: 1.25rem 0; }
.search-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-ink-muted); }
.search-result__category { color: var(--color-primary); }
.search-result__matched { font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.search-result__title { margin: 0.5rem 0 0; font-size: clamp(1.25rem, 2.5vw, 1.5rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; }
.search-result__title a { display: inline-flex; align-items: flex-start; gap: 0.4rem; color: var(--color-ink); text-decoration: none; }
.search-result__title a:hover { color: var(--color-primary); }
.search-result__arrow { margin-top: 0.25rem; flex: 0 0 auto; }
.search-result__excerpt { margin: 0.5rem 0 0; max-width: 48rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }
.search-result__tags { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-ink-muted); }

/* ===============================================================
   Static page hero (breadcrumb + kicker + big title)
   Mirrors the Next.js StaticPage.
   ============================================================== */
.page-hero { border-bottom: 1px solid var(--color-line); padding-bottom: 1.75rem; }
.page-hero__title {
	margin-top: 0.5rem;
	max-width: 48rem;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.98;
	font-size: clamp(2rem, 5.2vw, 3.5rem);
	color: var(--color-ink);
}
.page-content { padding-top: 2rem; }

/* ===============================================================
   /saved route — Local reading library
   Mirrors the Next.js SavedLibrary (breadcrumb, kicker, title,
   main + Privacy rail, styled empty states).
   ============================================================== */
.askyuga-saved__wrap {
	max-width: 1120px;
	margin-inline: auto;
	padding: 2rem 1rem 4rem;
}
@media (min-width: 768px) {
	.askyuga-saved__wrap { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
	.askyuga-saved__wrap { padding-inline: 2rem; }
}
.askyuga-saved { width: 100%; }
.askyuga-saved__header { border-bottom: 1px solid var(--color-line); padding-bottom: 1.5rem; }
.askyuga-saved__title {
	margin: 0.5rem 0 0;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.98;
	font-size: clamp(2rem, 5.2vw, 3.5rem);
	color: var(--color-ink);
}
.askyuga-saved__intro { margin: 0.75rem 0 0; color: var(--color-ink-muted); font-size: 0.875rem; line-height: 1.5; }
.askyuga-saved__notice { margin-top: 0.75rem; }
.askyuga-saved__grid {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}
@media (min-width: 1024px) {
	.askyuga-saved__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; }
}
.askyuga-saved__section { padding-top: 1.25rem; }
.askyuga-saved__subtitle {
	margin: 0.25rem 0 0.75rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: 1.5rem;
	color: var(--color-ink);
}
.askyuga-saved__list { list-style: none; margin: 0; padding: 0; }
.askyuga-saved__list li.askyuga-saved__empty {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1.25rem;
	font-style: normal;
	color: var(--color-ink);
}
/* Higher specificity (prefixed with .askyuga-saved) so these override the
   askyuga-saved.js injected card/bar/action styles. */
.askyuga-saved .askyuga-saved-item {
	border-bottom: 1px solid var(--color-line);
	padding: 0.85rem 0;
}
.askyuga-saved .askyuga-saved-item__title { display: block; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.askyuga-saved .askyuga-saved-item__title:hover { color: var(--color-primary); }
.askyuga-saved .askyuga-saved-item__meta { margin-top: 0.35rem; display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--color-ink-muted); }
.askyuga-saved .askyuga-saved-item__bar { margin-top: 0.4rem; height: 0.25rem; background: var(--color-line); border-radius: 0; }
.askyuga-saved .askyuga-saved-item__bar span { display: block; height: 100%; background: var(--color-coral); }
.askyuga-saved .askyuga-saved-item__action { margin-top: 0.5rem; border: 1px solid var(--color-line); background: var(--color-canvas); padding: 0.35rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: var(--color-ink); cursor: pointer; border-radius: 0; }
.askyuga-saved .askyuga-saved-item__action:hover { border-color: var(--color-ink); color: var(--color-primary); }

.askyuga-saved__rail {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1.25rem;
	align-self: start;
}
@media (min-width: 1024px) {
	.askyuga-saved__rail { position: sticky; top: 1.25rem; }
}
.askyuga-saved__rail-title { margin: 0.25rem 0 0; font-weight: 600; font-size: 1.25rem; color: var(--color-ink); }
.askyuga-saved__rail-text { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }
.askyuga-saved__clear {
	margin-top: 1.25rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	padding: 0.5rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-ink);
	cursor: pointer;
}
.askyuga-saved__clear:hover { border-color: var(--color-error); color: var(--color-error); }

/* ===============================================================
   /contact form — Next.js parity grid (added by askyuga-contact)
   Mirrors the Next.js ContactForm layout.
   ============================================================== */
.askyuga-contact-form {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1.5rem;
	margin-top: 2rem;
}
.askyuga-contact__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.askyuga-contact__kicker { margin: 0; }
.askyuga-contact__title { margin: 0.25rem 0 0; font-weight: 600; letter-spacing: -0.035em; font-size: 1.5rem; color: var(--color-ink); }
.askyuga-contact__mode { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.askyuga-contact__intro { margin: 0.75rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }

.askyuga-contact__grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) {
	.askyuga-contact__grid { grid-template-columns: 1fr 1fr; }
}
.askyuga-contact-form .askyuga-field { margin: 1rem 0 0; }
.askyuga-contact-form .askyuga-field label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-ink); }
.askyuga-contact-form .askyuga-field__opt { font-weight: 400; color: var(--color-ink-muted); }
.askyuga-contact-form .askyuga-field input,
.askyuga-contact-form .askyuga-field select,
.askyuga-contact-form .askyuga-field textarea {
	width: 100%;
	margin-top: 0.4rem;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink);
	padding: 0.6rem 0.75rem;
	font-size: 0.9375rem;
	font-family: inherit;
}
.askyuga-contact-form .askyuga-field textarea { min-height: 9rem; resize: vertical; }

.askyuga-consent { margin-top: 1.25rem; }
.askyuga-consent label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--color-ink); }
.askyuga-consent input { margin-top: 0.3rem; accent-color: var(--color-primary); }
.askyuga-consent a { color: var(--color-primary); text-decoration: underline; }

.askyuga-contact__note { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--color-ink-muted); }
.askyuga-contact__footer { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.askyuga-submit-btn {
	border: 1px solid var(--color-ink);
	background: var(--color-primary);
	color: #fff;
	padding: 0.7rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}
.askyuga-submit-btn:hover { background: var(--color-primary-deep); }
.askyuga-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.askyuga-contact__anti { margin: 0; max-width: 26rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-ink-muted); }

/* ===============================================================
   /contact page — hero (title left / lede right) + main/rail grid
   Mirrors the Next.js /contact layout.
   ============================================================== */
.contact-hero {
	display: grid;
	gap: 1.5rem;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 1.75rem;
}
@media (min-width: 768px) {
	.contact-hero {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
		align-items: end;
		gap: 2.5rem;
	}
}
.contact-hero__title {
	margin-top: 0.5rem;
	max-width: 48rem;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.98;
	font-size: clamp(2rem, 5.2vw, 3.5rem);
	color: var(--color-ink);
}
.contact-hero__lede {
	margin: 0;
	max-width: 28rem;
	color: var(--color-ink-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.contact-grid {
	display: grid;
	gap: 2rem;
	padding-top: 1.75rem;
}
@media (min-width: 1024px) {
	.contact-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 3rem;
	}
}
.contact-main { min-width: 0; display: grid; gap: 1.75rem; align-content: start; }
.contact-body { max-width: 48rem; }
.contact-form-wrap { width: 100%; }
.contact-form-wrap .askyuga-contact-form { width: 100%; }
.contact-rail { display: grid; gap: 1rem; align-content: start; }
.contact-rail__card { border: 1px solid var(--color-line); background: var(--color-panel); padding: 1rem; }
.contact-rail__list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.contact-rail__list li { padding: 0.35rem 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-ink); }
.contact-rail__list li::before { content: "\2022"; color: var(--color-primary); margin-right: 0.5rem; }
.contact-rail__text { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); }

/* ===============================================================
   Single article — "More reporting / Related articles"
   Mirrors the Next.js /articles/[slug] related module.
   ============================================================== */
.related-articles { border-top: 1px solid var(--color-line); margin-top: 2rem; margin-bottom: 1rem; padding-top: 2rem; }
.related-articles__head { margin-bottom: 1.25rem; }
.related-articles__title {
	margin: 0.25rem 0 0;
	font-weight: 600;
	letter-spacing: -0.04em;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: var(--color-ink);
}

/* ===============================================================
   Comments — "Community" bordered panel (Next.js parity)
   ============================================================== */
.comments-panel {
	border: 1px solid var(--color-line);
	background: var(--color-panel);
	padding: 1.25rem;
}
.comments-title {
	margin: 0.25rem 0 0;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.comments-lede {
	margin: 0.75rem 0 0;
	max-width: 40rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-ink-muted);
}
.comments-panel .comment-list { margin-top: 1rem; }
.comment-respond-wrap {
	margin-top: 1.5rem;
	border: 1px solid var(--color-line);
	padding: 1.25rem;
	background: var(--color-canvas);
}
.comment-respond-wrap .comment-reply-title { font-size: 1.2rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--color-line);
	background: var(--color-canvas);
	color: var(--color-ink);
	border-radius: 0;
}
.comment-form input[type="submit"] {
	border: 1px solid var(--color-ink);
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
}
.comment-form input[type="submit"]:hover { background: var(--color-primary-deep); }