/*
Theme Name: YSJBlog Aperture
Theme URI: https://ysjblog.com/
Author: 益生駿
Author URI: https://ysjblog.com/
Description: A classic WordPress theme based on the Aperture Pro design system for ysjblog.com.
Version: 0.4.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ysjblog-aperture
*/

/* ==========================================================
   Aperture Pro design tokens
   Apple/Tesla-inspired clarity: white space, high contrast,
   one teal action color, restrained elevation, slow motion.
   ========================================================== */
:root {
	--teal-900: #012f2d;
	--teal-800: #024a48;
	--teal-700: #026d6a;
	--teal-600: #0d8f89;
	--teal-500: #0fb3a8;
	--teal-300: #7cf0dd;
	--teal-200: #5eead4;
	--teal-050: #e8faf6;

	--ink-900: #0b1c20;
	--ink-700: #2d425a;
	--ink-500: #55697c;
	--ink-400: #7f8995;
	--ink-200: #d5dcdf;
	--ink-100: #e9eeef;
	--paper: #ffffff;
	--paper-2: #f7f9f9;
	--paper-3: #f0f4f4;
	--taxonomy-accent: #46766f;
	--filter-panel: #e3eeee;

	--sage: #b5bdbc;
	--sand: #c2a990;
	--clay: #d8613c;

	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--step--1: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
	--step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--step-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
	--step-2: clamp(1.875rem, 1.52rem + 1.5vw, 3rem);
	--step-3: clamp(2.5rem, 1.6rem + 3.7vw, 5.125rem);

	--r-control: 980px;
	--r-card: 18px;
	--r-media: 14px;
	--r-chip: 999px;
	--shadow-1: 0 1px 2px rgb(11 28 32 / 5%), 0 4px 14px rgb(11 28 32 / 5%);
	--shadow-2: 0 2px 6px rgb(11 28 32 / 6%), 0 18px 44px rgb(11 28 32 / 9%);
	--shadow-teal: 0 10px 30px rgb(2 109 106 / 22%);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 0.22s;
	--dur-base: 0.45s;
	--dur-slow: 0.9s;

	/*
	 * One fluid unit for the whole theme.
	 *
	 * The layout used to have exactly two sizes — phone and "desktop" — with
	 * everything above ~1400px getting the same 1180px column and the same
	 * 16px type, which is why a 27" screen reads as a small page floating in a
	 * lot of empty paper. This unit grows with the window and everything sized
	 * in rem grows with it.
	 *
	 * It is the *smaller* of width and height, not the width: every band on the
	 * homepage now has to fit one screen, so a wide-but-short window has to
	 * scale down rather than overflow. The 1.78 is the 16:9 ratio, so on a
	 * normal widescreen monitor the two agree and the width is what leads.
	 */
	--u: min(1vw, 1.78vh);

	/* Sized in rem so the reading column widens with the type instead of
	   staying a fixed ribbon in the middle of a large screen. */
	--shell: 73.75rem;
	--shell-wide: 90rem;
	--gutter: clamp(20px, 4vw, 40px);
}

/*
 * The root size is the single lever the fluid scale hangs off.
 *
 * The floor is today's 16px, so nothing below a 1440-wide window changes at
 * all; from there it climbs to about 20px on a 2560-wide screen and stops, because
 * past that point the line length starts costing more than the extra size gains.
 */
html {
	font-size: clamp(16px, calc(10.86px + var(--u) * 0.357), 21px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	min-width: 320px;
	margin: 0;
	background: var(--paper);
	color: var(--ink-900);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.menu-is-open {
	overflow: hidden;
}

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

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	clip: auto !important;
	clip-path: none;
	background: #fff;
	color: var(--ink-900);
	white-space: normal;
}

button,
input {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: 0;
	background: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shell {
	width: min(var(--shell), calc(100% - var(--gutter) * 2));
	margin-inline: auto;
}

.section {
	padding-block: clamp(72px, 10vw, 140px);
}

.panel-tint {
	background: var(--paper-2);
}

.skip-link {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	border-radius: var(--r-control);
	background: var(--teal-700);
	color: #fff;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	clip-path: none;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

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

/* Every cover is square on screen while the source stays uncropped. */
[data-cover] {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r-media);
	background: var(--paper-3);
	isolation: isolate;
}

[data-cover] img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--dur-slow) var(--ease-out);
	will-change: transform;
}

.card:hover [data-cover] img,
a:hover > [data-cover] img {
	transform: scale(1.035);
}

/* Floating, centred navigation capsule. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	padding: clamp(10px, 1.4vw, 18px) var(--gutter);
	pointer-events: none;
}

.header-capsule {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(10px, 2.6vw, 36px);
	/* Compact capsule: the nav hugs the logo instead of spanning the shell. */
	width: min(530px, 100%);
	margin-inline: auto;
	padding: clamp(8px, 1vw, 12px) clamp(14px, 2.2vw, 32px);
	border-radius: var(--r-chip);
	background: rgb(255 255 255 / 76%);
	box-shadow: 0 1px 2px rgb(11 28 32 / 4%), 0 10px 30px rgb(11 28 32 / 6%);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	pointer-events: auto;
	transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.site-header[data-scrolled="true"] .header-capsule {
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 1px 2px rgb(11 28 32 / 5%), 0 16px 44px rgb(11 28 32 / 10%);
}

.brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.brand:hover {
	opacity: 0.62;
}

.brand-logo {
	display: block;
	width: clamp(74px, 8vw, 104px);
	height: auto;
}

.site-nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-left > ul {
	justify-content: flex-end;
}

.site-nav-right > ul {
	justify-content: flex-start;
}

.site-nav a {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	color: var(--ink-700);
	font-size: clamp(0.6875rem, 1.05vw, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.11em;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out);
}

.site-nav > ul > .menu-item > a::after {
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dur-base) var(--ease-out);
}

.site-nav a:hover {
	color: var(--ink-900);
}

.site-nav > ul > .menu-item:hover > a::after,
.site-nav > ul > .menu-item:focus-within > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-nav .menu-item-has-children {
	position: relative;
}

.site-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: -16px;
	z-index: 80;
	display: grid;
	min-width: 230px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--ink-100);
	border-radius: 16px;
	background: rgb(255 255 255 / 96%);
	box-shadow: var(--shadow-2);
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (min-width: 1121px) {
	.site-nav > ul > .menu-item-has-children > .sub-menu::before {
		position: absolute;
		top: -9px;
		left: 0;
		width: 100%;
		height: 9px;
		content: "";
	}
}

.site-nav .sub-menu .sub-menu {
	top: -10px;
	right: calc(100% + 8px);
	left: auto;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.site-nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 0.82rem;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus-visible {
	background: var(--teal-050);
	color: var(--teal-800);
}

/* The capsule keeps the same shape on every viewport, so the mobile drawer and
   its hamburger are gone. Anything still emitting one stays hidden. */
.menu-toggle {
	display: none;
}

/* Pill controls. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 24px;
	border-radius: var(--r-control);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active {
	transform: scale(0.975);
}

.btn-primary {
	background: var(--teal-700);
	box-shadow: var(--shadow-teal);
	color: #fff;
}

.btn-primary:hover {
	background: var(--teal-600);
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	border-radius: var(--r-chip);
	background: var(--paper-3);
	color: var(--ink-700);
	font-size: 0.8125rem;
}

.eyebrow {
	color: var(--teal-700);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.meta {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
}

.lede {
	color: var(--ink-500);
	line-height: 1.7;
}

/* Phase 1 visual scaffold; final homepage is intentionally deferred. */
.hero {
	padding-block: clamp(88px, 13vw, 172px) clamp(64px, 8vw, 108px);
	text-align: center;
}

.hero h1 {
	max-width: 14ch;
	margin: 18px auto 0;
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.hero h1 em {
	background: linear-gradient(102deg, var(--teal-700), var(--teal-500) 62%, var(--teal-200));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-style: normal;
}

.hero-lede {
	max-width: 48ch;
	margin: clamp(20px, 2.4vw, 30px) auto 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.hero-actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3vw, 40px);
}

.section-head {
	max-width: 58ch;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}

.section-head h2 {
	margin-top: 12px;
	font-size: var(--step-2);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.028em;
}

.section-head p:last-child {
	margin-top: 14px;
	color: var(--ink-500);
	line-height: 1.7;
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
}

.card-soft {
	padding: 16px;
	border-radius: 28px;
	background: var(--paper);
	transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.card-soft:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.preview-cover {
	display: grid;
	place-items: center;
	border-radius: 24px;
	background: linear-gradient(145deg, var(--teal-900), var(--teal-700));
}

.preview-cover-light {
	background: linear-gradient(145deg, var(--paper-3), var(--teal-050));
}

.aperture-orb {
	width: 42%;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 52%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 32%, #fff 0 4%, var(--teal-200) 5% 16%, var(--teal-600) 48%, var(--teal-900) 78%);
	box-shadow: 0 0 0 24px rgb(255 255 255 / 5%), var(--shadow-2);
}

.aperture-orb-light {
	border-color: rgb(2 109 106 / 20%);
	box-shadow: 0 0 0 24px rgb(2 109 106 / 4%), var(--shadow-1);
}

.card-body {
	padding: 22px 12px 10px;
}

.card-body h3 {
	margin-top: 10px;
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.02em;
}

.card-body p:last-child {
	margin-top: 10px;
	color: var(--ink-500);
	line-height: 1.68;
}

.content-shell {
	min-height: 60vh;
}

.entry-card {
	max-width: 820px;
	margin-inline: auto;
}

.entry-title {
	font-size: var(--step-2);
	line-height: 1.15;
}

.entry-content {
	margin-top: 28px;
	color: var(--ink-700);
	line-height: 1.78;
}

.entry-content > * + * {
	margin-top: 1.4em;
}

/* Shared footer: three brand marks over a quiet copyright line. */
.site-footer {
	position: relative;
	/* Roughly half the previous stature — a sign-off, not a section. */
	padding-block: clamp(24px, 3vw, 38px) clamp(14px, 1.6vw, 20px);
	background: #0d0e0f;
	color: rgb(255 255 255 / 72%);
	text-align: center;
}

.site-footer::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(124 240 221 / 34%) 28%, rgb(143 191 230 / 24%) 66%, transparent);
	content: "";
}

.footer-shell {
	display: grid;
	justify-items: center;
	gap: clamp(12px, 1.6vw, 16px);
}

.footer-socials {
	display: flex;
	justify-content: center;
	gap: 14px;
}

.footer-social {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgb(255 255 255 / 7%);
	color: rgb(255 255 255 / 70%);
	transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.footer-social:hover,
.footer-social:focus-visible {
	background: rgb(124 240 221 / 16%);
	color: #fff;
	transform: translateY(-3px);
}

.footer-social svg {
	width: 19px;
	height: 19px;
}

.footer-copyright {
	color: rgb(255 255 255 / 38%);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

/* Touch pointers cannot hover a dropdown open, and the parent item is itself a
   real page, so the category flyout is a pointer-only affordance. */
@media (max-width: 1120px), (hover: none) {
	.site-nav .sub-menu {
		display: none;
	}
}

@media (max-width: 640px) {
	.site-header {
		padding-inline: 12px;
	}

	/* The capsule width is fixed on purpose, so the extra breathing room between
	   the five items has to come from inside: trim the shell padding and the
	   grid gutters around the logo, then spend everything that frees up on the
	   gap between the links themselves. */
	.header-capsule {
		gap: 10px;
		width: 337px;
		max-width: calc(100vw - 24px);
		padding: 8px 8px;
	}

	.site-nav > ul {
		gap: 16px;
	}

	/* On desktop the two lists hug the logo, which on a phone left ~70px of dead
	   space at the capsule ends. Spreading each list evenly hands that slack to
	   the gaps instead, and because it is only free space being distributed the
	   items can never be pushed outside the capsule on a narrower phone. */
	.site-nav-left > ul,
	.site-nav-right > ul {
		justify-content: space-evenly;
	}

	.site-nav a {
		font-size: 0.625rem;
		letter-spacing: 0.02em;
	}

	.brand-logo {
		width: 62px;
	}
}

/* Reveal only when JavaScript confirms that full motion is allowed. */
.js.motion-ok [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.js.motion-ok [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Single article: Aperture Pro editorial layout. */
.reading-progress {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 70;
	width: 100%;
	height: 2px;
	background: var(--teal-500);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.article-hero {
	max-width: 760px;
	padding-block: clamp(52px, 7vw, 96px) clamp(24px, 3vw, 36px);
	text-align: center;
}

.article-hero h1 {
	margin-top: 16px;
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}

.article-category {
	font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.article-category a {
	display: inline-flex;
	padding: 7px 12px;
	border: 1px solid rgb(2 109 106 / 32%);
	border-radius: 17px;
	background: transparent;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.article-category a:hover,
.article-category a:focus-visible {
	border-color: var(--teal-700);
	color: var(--teal-700);
	transform: translateY(-1px);
}

.article-meta-line {
	margin-top: 22px;
}

.article-cover {
	width: min(640px, calc(100% - var(--gutter) * 2));
}

.article-cover [data-cover] {
	border-radius: 28px;
	box-shadow: var(--shadow-2);
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 244px;
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(48px, 6vw, 84px);
}

.article-side {
	position: sticky;
	top: 88px;
	order: 2;
	display: grid;
	gap: 22px;
	padding: 22px;
	border-radius: 22px;
	background: var(--paper-2);
}

.toc {
	font-size: 0.875rem;
}

.toc[hidden] {
	display: none;
}

.toc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.toc-title {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.toc ol {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc a {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: baseline;
	gap: 8px;
	padding: 7px 10px 7px 0;
	border-radius: 8px;
	color: var(--ink-500);
	line-height: 1.5;
	transition: color var(--dur-fast) var(--ease-out);
}

.toc a:hover,
.toc li[data-active="true"] > a {
	color: var(--teal-700);
}

.toc li[data-active="true"] > a {
	font-weight: 500;
}

.toc-num {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
}

.toc li[data-active="true"] .toc-num {
	color: var(--teal-700);
}

.toc-toggle {
	display: none;
}

.spec-table {
	display: grid;
	border-top: 1px solid var(--ink-200);
}

.spec-row {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ink-100);
	font-size: 0.8125rem;
}

.spec-row dt {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spec-row dd {
	margin: 0;
	color: var(--ink-700);
}

.article-taxonomy {
	display: grid;
	gap: 18px;
	padding-top: 2px;
}

.taxonomy-group {
	display: grid;
	gap: 9px;
}

.taxonomy-label {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.taxonomy-links {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.taxonomy-chip {
	min-height: 34px;
	padding-inline: 12px;
	background: var(--paper);
	border: 1px solid var(--taxonomy-accent);
	border-radius: 17px;
	color: var(--taxonomy-accent);
	transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.taxonomy-chip-category {
	border-color: var(--taxonomy-accent);
	background: var(--taxonomy-accent);
	color: #fff;
}

.taxonomy-chip:hover {
	border-color: var(--taxonomy-accent);
	background: var(--taxonomy-accent);
	color: #fff;
	transform: translateY(-1px);
}

.article-body {
	width: 100%;
	min-width: 0;
	color: var(--ink-700);
	font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
	line-height: 1.82;
	overflow-wrap: break-word;
}

.article-body > * + * {
	margin-top: 1.5em;
}

.article-body h2,
.article-body h3 {
	scroll-margin-top: 92px;
	color: var(--ink-900);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.article-body h2 {
	margin-top: 2.4em;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	line-height: 1.28;
}

.article-body h3 {
	margin-top: 2em;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.36;
}

.article-body a {
	color: var(--teal-700);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.article-body ul,
.article-body ol {
	display: grid;
	gap: 0.55em;
	margin: 1.5em 0 0;
	padding-left: 1.4em;
}

.article-body ul {
	list-style: disc;
}

.article-body ol {
	list-style: decimal;
}

.article-body blockquote {
	padding-left: 24px;
	border-left: 2px solid var(--teal-200);
	color: var(--ink-900);
	font-size: 1.125em;
}

.article-body figure,
.article-body img,
.article-body video,
.article-body iframe {
	max-width: 100%;
}

.article-body figure {
	margin-inline: 0;
}

.article-body figcaption {
	margin-top: 10px;
	color: var(--ink-500);
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: center;
}

.article-body pre,
.article-body code {
	font-family: var(--font-mono);
}

.article-body code {
	padding: 0.15em 0.35em;
	border-radius: 5px;
	background: var(--paper-3);
	font-size: 0.88em;
}

.article-body pre {
	max-width: 100%;
	padding: 20px;
	overflow-x: auto;
	border-radius: 14px;
	background: var(--ink-900);
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.65;
}

.article-body pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.article-body table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.article-body th,
.article-body td {
	min-width: 120px;
	padding: 12px 14px;
	border: 1px solid var(--ink-200);
	text-align: left;
}

.article-body th {
	background: var(--paper-2);
	color: var(--ink-900);
}

.article-end {
	margin-top: clamp(64px, 8vw, 110px);
	padding-bottom: clamp(72px, 9vw, 120px);
}

.pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

.pager-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: var(--r-card);
	background: var(--paper-2);
	transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.pager-item:hover {
	background: var(--paper);
	box-shadow: var(--shadow-1);
}

.pager-item[data-dir="next"] {
	grid-template-columns: minmax(0, 1fr) 64px;
	text-align: right;
}

.pager-item[data-dir="next"] [data-cover] {
	order: 2;
}

.pager-dir {
	color: var(--teal-700);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pager-item h3,
.related-card h3 {
	overflow-wrap: anywhere;
}

.pager-item h3 {
	margin-top: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.related {
	margin-top: clamp(64px, 8vw, 110px);
	padding: clamp(28px, 4vw, 52px);
	border-radius: 36px;
	background: #f5f5f7;
}

.related .section-head {
	margin-bottom: clamp(24px, 3vw, 36px);
	text-align: center;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.related-card {
	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
	padding: 0 6px 8px;
	border-radius: 28px;
	transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.related-card:hover,
.related-card:focus-visible {
	filter: drop-shadow(0 20px 24px rgb(11 28 32 / 12%));
	transform: translateY(-5px);
}

.related-card [data-cover] {
	border-radius: 26px;
}

.related-card [data-cover] img {
	transition: transform var(--dur-base) var(--ease-out);
}

.related-card:hover [data-cover] img {
	transform: scale(1.02);
}

.related-card-copy {
	display: grid;
	grid-template-rows: auto 3em auto;
	gap: 10px;
	min-height: 138px;
	padding: 18px 10px 0;
	text-align: center;
}

.related-card-meta {
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

.related-card h3 {
	display: -webkit-box;
	margin: 0;
	max-height: 3em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.related-card-cta {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	gap: 5px;
	color: var(--teal-700);
	font-size: 0.875rem;
	font-weight: 500;
}

.related-card-cta span {
	font-size: 1.2em;
	transition: transform var(--dur-fast) var(--ease-out);
}

.related-card:hover .related-card-cta span {
	transform: translateX(3px);
}

.article-back {
	margin-top: clamp(48px, 6vw, 72px);
	text-align: center;
}

.btn-ghost {
	border: 1px solid var(--ink-200);
	background: var(--paper);
}

.btn-ghost:hover {
	border-color: var(--teal-700);
	color: var(--teal-700);
}

/* Archive, category, tag and preserved legacy list pages. */
.page-hero {
	padding-block: clamp(56px, 8vw, 104px) clamp(34px, 4vw, 52px);
	text-align: center;
}

.page-hero h1 {
	max-width: 18ch;
	margin: 14px auto 0;
	font-size: clamp(2.25rem, 5.4vw, 4rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.032em;
	overflow-wrap: anywhere;
}

.archive-description {
	max-width: 52ch;
	margin: 18px auto 0;
}

.section-index {
	margin-top: 22px;
}

.archive-controls {
	padding-bottom: clamp(42px, 6vw, 72px);
}

.filter-panel {
	display: grid;
	gap: 24px;
	padding: clamp(24px, 4vw, 42px);
	border: 1px solid rgb(126 196 184 / 22%);
	border-radius: 30px;
	background: var(--filter-panel);
}

.filter-panel-head {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 6px;
}

.filter-panel-head h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}

.filter-panel-head p {
	color: var(--ink-500);
	font-size: 0.875rem;
}

.filter-group {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

.filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.category-navigation {
	width: fit-content;
	max-width: 100%;
}

.category-scroll-button {
	display: none;
}

.category-segments {
	position: relative;
	isolation: isolate;
	width: fit-content;
	max-width: 100%;
	padding: 4px;
	overflow-x: auto;
	border-radius: var(--r-control);
	background: rgb(255 255 255 / 34%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 38%);
	backdrop-filter: saturate(150%) blur(18px);
	-webkit-backdrop-filter: saturate(150%) blur(18px);
	flex-wrap: nowrap;
	scrollbar-width: none;
}

.category-indicator {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	pointer-events: none;
	border: 1px solid rgb(255 255 255 / 74%);
	border-radius: var(--r-chip);
	background: rgb(255 255 255 / 70%);
	box-shadow: 0 3px 12px rgb(11 28 32 / 10%), inset 0 1px 0 rgb(255 255 255 / 78%);
	transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.category-indicator.is-positioning {
	transition: none;
}

.category-segments::-webkit-scrollbar {
	display: none;
}

.filter-label {
	padding-top: 11px;
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.filter-chip,
.filter-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 7px 15px;
	border: 1px solid var(--ink-100);
	border-radius: var(--r-chip);
	background: var(--paper);
	color: var(--ink-700);
	font-size: 0.8125rem;
	transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.filter-chip:hover,
.filter-chip[aria-current="page"],
.filter-chip[aria-pressed="true"] {
	border-color: var(--teal-700);
	background: var(--teal-700);
	color: #fff;
}

.filter-chip:hover {
	transform: translateY(-1px);
}

.category-segments .filter-chip {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	border-color: transparent;
	background: transparent;
}

.category-segments .filter-chip:hover,
.category-segments .filter-chip[aria-current="page"] {
	background: transparent;
	box-shadow: none;
	color: var(--ink-900);
	transform: none;
}

.filter-chip:disabled {
	border-color: transparent;
	background: var(--paper-3);
	color: var(--ink-400);
	cursor: not-allowed;
	opacity: 0.54;
}

.filter-chip[aria-pressed="true"]:disabled {
	background: var(--teal-700);
	color: #fff;
	opacity: 0.72;
}

.filter-chip span {
	margin-left: 5px;
	opacity: 0.7;
}

.filter-clear {
	border-color: transparent;
	background: transparent;
	color: var(--teal-700);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.post-list {
	display: grid;
	gap: 0;
}

.post-row {
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 82px;
	align-items: center;
	gap: clamp(18px, 2.4vw, 30px);
	padding: 24px 20px;
	border: 0;
	border-radius: 18px;
	background: transparent;
	transform-style: preserve-3d;
	transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.post-row::before {
	position: absolute;
	top: 21%;
	right: 0;
	width: 4px;
	height: 58%;
	border-radius: 4px 0 0 4px;
	background: linear-gradient(180deg, var(--teal-300), var(--teal-700));
	box-shadow: 0 0 18px rgb(15 179 168 / 56%);
	content: "";
	opacity: 0;
	transform: scaleY(0.35);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.post-row:not(:last-child)::after {
	position: absolute;
	right: 15%;
	bottom: 0;
	left: 15%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(85 105 124 / 24%) 22%, rgb(85 105 124 / 24%) 78%, transparent);
	content: "";
}

.post-row:hover,
.post-row:focus-within {
	background: linear-gradient(105deg, rgb(255 255 255 / 78%), rgb(227 238 238 / 48%));
	box-shadow: 0 18px 44px rgb(11 28 32 / 12%);
	transform: perspective(900px) translateY(-5px) rotateX(0.35deg);
}

.js.motion-ok .post-row[data-reveal].is-in:hover,
.js.motion-ok .post-row[data-reveal].is-in:focus-within {
	transform: perspective(900px) translateY(-5px) rotateX(0.35deg);
}

.post-row:hover::before,
.post-row:focus-within::before {
	opacity: 1;
	transform: scaleY(1);
}

.post-row-link {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
}

.post-row-link:focus-visible {
	outline: 2px solid var(--teal-700);
	outline-offset: 3px;
}

.post-row-cover,
.post-row-cover [data-cover] {
	width: 112px;
}

.post-row-cover,
.post-row-main a,
.post-row-arrow {
	position: relative;
	z-index: 2;
}

.post-row-cover [data-cover] {
	border-radius: 20px;
}

.post-row-cover img {
	transition: transform var(--dur-base) var(--ease-out);
}

.post-row:hover .post-row-cover img {
	transform: scale(1.035);
}

.post-row-main {
	min-width: 0;
}

.post-row-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 9px;
	color: var(--ink-400);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

.post-row-kicker a {
	color: var(--teal-700);
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: 0;
}

.post-row h2 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.018em;
	overflow-wrap: anywhere;
}

.post-row-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.tag-inline {
	position: relative;
	z-index: 2;
	padding: 3px 10px;
	border-radius: var(--r-chip);
	background: var(--paper-3);
	color: var(--ink-500);
	font-size: 0.75rem;
}

.tag-inline:hover {
	background: var(--teal-050);
	color: var(--teal-700);
}

.row-meta {
	display: grid;
	justify-items: end;
	gap: 14px;
	color: var(--ink-400);
	text-align: right;
}

.post-row-arrow {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--paper-3);
	color: var(--teal-700);
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.post-row:hover .post-row-arrow,
.post-row:focus-within .post-row-arrow {
	background: var(--teal-700);
	color: #fff;
	transform: translateX(3px);
}

.archive-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(36px, 5vw, 64px);
}

.section-tight {
	padding-block: clamp(36px, 5vw, 68px) clamp(72px, 9vw, 120px);
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 13px;
	border: 1px solid var(--ink-200);
	border-radius: var(--r-chip);
	color: var(--ink-500);
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
	border-color: var(--teal-700);
	background: var(--teal-700);
	color: #fff;
}

.archive-empty {
	display: grid;
	justify-items: center;
	gap: 22px;
	padding: clamp(52px, 8vw, 96px) 24px;
	border-radius: 28px;
	background: var(--paper-2);
	color: var(--ink-500);
	text-align: center;
}

@media (max-width: 960px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-side {
		position: static;
		order: 0;
		width: 100%;
		max-width: 680px;
		margin-inline: auto;
	}

	.related {
		padding-inline: clamp(20px, 4vw, 34px);
	}
}

@media (max-width: 760px) {
	.preview-grid {
		grid-template-columns: 1fr;
	}

	.related {
		padding: 26px 18px;
		border-radius: 28px;
	}

	.related-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.related-card {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		align-items: center;
		gap: 14px;
		padding: 14px 4px;
		border-radius: 0;
	}

	.related-card:not(:last-child) {
		border-bottom: 1px solid rgb(85 105 124 / 18%);
	}

	.related-card [data-cover] {
		width: 92px;
		border-radius: 18px;
	}

	.related-card-copy {
		grid-template-rows: auto auto auto;
		gap: 6px;
		min-height: 0;
		padding: 0;
		text-align: left;
	}

	.related-card h3 {
		font-size: 0.9375rem;
		line-height: 1.42;
	}

	.related-card-cta {
		justify-self: start;
		font-size: 0.8125rem;
	}

	.filter-panel-head {
		align-items: start;
		flex-direction: column;
		gap: 6px;
	}

	.post-row {
		grid-template-columns: 76px minmax(0, 1fr);
		align-items: start;
		padding: 16px;
	}

	/* The copy column keeps its top alignment, but the thumbnail spans the whole
	   row stack (title block plus the meta line underneath) and centres inside
	   it, so it reads as the anchor of the card instead of hanging off the top
	   corner. Desktop keeps its own single-row `align-items: center` layout. */
	.post-row-cover {
		grid-row: 1 / span 2;
		align-self: center;
	}

	.post-row-cover,
	.post-row-cover [data-cover] {
		width: 76px;
	}

	.row-meta {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: left;
	}
}

@media (max-width: 520px) {
	.article-side {
		padding: 18px;
	}

	.toc-toggle {
		display: inline-flex;
	}

	.toc[data-open="false"] ol {
		display: none;
	}

	.pager {
		grid-template-columns: 1fr;
	}

	.pager-item[data-dir="next"] {
		grid-template-columns: 64px minmax(0, 1fr);
		text-align: left;
	}

	.pager-item[data-dir="next"] [data-cover] {
		order: 0;
	}

	.filter-panel {
		gap: 22px;
		padding: 22px 18px;
		border-radius: 24px;
	}

	.filter-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.filter-label {
		padding-top: 0;
	}

	.category-segments {
		width: 100%;
	}

	.category-navigation {
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr) 38px;
		align-items: center;
		width: 100%;
		border-radius: var(--r-control);
		background: rgb(255 255 255 / 34%);
		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 38%);
		backdrop-filter: saturate(150%) blur(18px);
		-webkit-backdrop-filter: saturate(150%) blur(18px);
	}

	.category-navigation .category-segments {
		min-width: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.category-scroll-button {
		display: grid;
		place-items: center;
		width: 38px;
		height: 46px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ink-700);
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
		transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	}

	.category-scroll-button:not(:disabled):hover {
		color: var(--teal-700);
		transform: scale(1.08);
	}

	.category-scroll-button:focus-visible {
		border-radius: 12px;
		outline: 2px solid var(--teal-700);
		outline-offset: -4px;
	}

	.category-scroll-button:disabled {
		cursor: default;
		opacity: 0.22;
	}

	.category-scroll-button span {
		display: block;
		box-sizing: border-box;
		width: 10px;
		height: 10px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		font-size: 0;
		transform: rotate(-135deg);
	}

	.category-scroll-button.is-next span {
		transform: rotate(45deg);
	}

	.post-row {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 14px;
	}

	.post-row-cover,
	.post-row-cover [data-cover] {
		width: 64px;
	}

	.post-row h2 {
		font-size: 1rem;
		line-height: 1.38;
	}

	.post-row-tags {
		margin-top: 9px;
	}

	.row-meta {
		align-items: center;
		gap: 10px;
	}

	.post-row-arrow {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}