/* ==========================================================================
   Kreative Media Blog: article page
   Loaded on single posts only. Builds on the tokens in the Customizer's Additional CSS
   (--accent, --card, --border ...), which prints after this file, so rules that meet a
   ".single ..." rule there carry a body.km-article-page prefix.
   ========================================================================== */

body.km-article-page {
	--km-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--km-header-h, 73px));
	--km-aside: 288px;
	--km-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.km-sr-only,
.km-share--compact .km-share__text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Reading progress */

.km-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 1001;
	height: 3px;
	pointer-events: none;
}
.km-progress__bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 12px rgba(160, 255, 100, .55);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ---------------------------------------------------------------- Page frame */

body.km-article-page .neve-main { overflow-x: clip; }
/* Neve caps the article at 70% of the container (inline, .neve-main > ... .col); the aside takes that room now */
body.km-article-page .neve-main > .single-post-container .nv-single-post-wrap.col { flex: 1 1 100%; max-width: 100%; }

/* ---------------------------------------------------------------- Header */

body.km-article-page .nv-single-post-wrap .entry-header {
	position: relative;
	isolation: isolate;
	margin: 0 !important;
	padding-top: clamp(48px, 7vw, 104px);
}
/* Full-bleed grid + glow, the same language as the blog home hero */
body.km-article-page .entry-header::before,
body.km-article-page .entry-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	pointer-events: none;
}
body.km-article-page .entry-header::before {
	bottom: -48px;
	background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 22% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 70% 80% at 22% 0%, #000 0%, transparent 70%);
	opacity: .32;
}
body.km-article-page .entry-header::after {
	height: 560px;
	top: -120px;
	background: radial-gradient(640px 380px at 24% 30%, rgba(160, 255, 100, .10), transparent 70%);
}

body.km-article-page .nv-title-meta-wrap { gap: 0; }

/* Breadcrumbs (Rank Math, printed by Neve) or the category chip fallback */
body.km-article-page .neve-breadcrumbs-wrapper {
	display: block;
	margin: 0 0 24px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}
body.km-article-page .neve-breadcrumbs-wrapper:empty { display: none; }
body.km-article-page .rank-math-breadcrumb,
body.km-article-page .rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
body.km-article-page .rank-math-breadcrumb a { color: var(--muted); text-decoration: none; }
body.km-article-page .rank-math-breadcrumb a:hover { color: var(--foreground); }
body.km-article-page .rank-math-breadcrumb .separator { color: var(--border-strong); font-weight: 400; }
.km-kicker-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }

.km-chip,
body.km-article-page .rank-math-breadcrumb a:last-of-type:not(:first-of-type) {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	background: var(--accent-muted);
	color: var(--accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
}
.km-chip:hover,
body.km-article-page .rank-math-breadcrumb a:last-of-type:not(:first-of-type):hover { background: rgba(160, 255, 100, .2); color: var(--accent-hover); }

body.km-article-page h1.entry-title {
	max-width: 960px;
	margin: 0;
	font-size: clamp(2rem, 1rem + 3.8vw, 4rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.045em;
	text-wrap: balance;
}
body.km-article-page .km-dek {
	max-width: 46rem;
	margin: 22px 0 0 !important;
	color: color-mix(in srgb, var(--foreground) 72%, var(--background));
	font-size: clamp(1.0625rem, .96rem + .45vw, 1.3125rem);
	line-height: 1.55;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

/* Byline */
.km-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: clamp(28px, 3.5vw, 40px);
	padding: 16px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.km-byline__author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.km-byline__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	background: var(--card);
	object-fit: cover;
}
.km-byline__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.km-byline__name { color: var(--foreground); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.km-byline__name:hover { color: var(--accent); }
.km-byline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.2; }
.km-byline__meta .km-read-time { font-size: 13px; }
.km-sep { color: var(--border-strong); }

/* Share buttons (byline: icons only; after the article: labelled) */
.km-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.km-share__label { margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
body.km-article-page .km-share__btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 38px;
	min-width: 38px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	box-shadow: none;
	color: var(--foreground);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
body.km-article-page .km-share__btn:hover { border-color: rgba(160, 255, 100, .45); background: var(--card-hover); color: var(--accent); }
body.km-article-page .km-share__btn[hidden] { display: none; }
body.km-article-page .km-share--compact .km-share__btn { width: 38px; padding: 0; }
.km-icon { flex: none; width: 16px; height: 16px; }
.km-share__btn .km-icon--check { display: none; }
body.km-article-page .km-share__btn.is-copied { border-color: rgba(160, 255, 100, .6); background: var(--accent-glow); color: var(--accent); }
.km-share__btn.is-copied .km-icon--link { display: none; }
.km-share__btn.is-copied .km-icon--check { display: block; }

/* Cover */
body.km-article-page .nv-thumb-wrap { margin: clamp(28px, 4vw, 48px) 0 0; }
body.km-article-page .nv-thumb-wrap img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: 50% 30%;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--card);
	box-shadow: 0 50px 120px -60px rgba(160, 255, 100, .28);
}

/* ---------------------------------------------------------------- Body: article + sticky aside */

.km-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--km-aside);
	align-items: start;
	column-gap: clamp(40px, 6vw, 96px);
	margin-top: clamp(40px, 5vw, 72px);
}
.km-article__main { grid-column: 1; grid-row: 1; min-width: 0; max-width: 720px; }
.km-article__aside {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: calc(var(--km-top) + 28px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.km-article:not(.has-toc) .km-article__main { max-width: 720px; }

body.km-article-page .nv-content-wrap { font-size: 1.125rem; line-height: 1.75; }
body.km-article-page .nv-content-wrap h2,
body.km-article-page .nv-content-wrap h3,
body.km-article-page .nv-content-wrap h4 { scroll-margin-top: calc(var(--km-top) + 28px); }
body.km-article-page .nv-content-wrap > :first-child { margin-top: 0; }

/* Section links, added by article.js */
body.km-article-page .nv-content-wrap a.km-anchor {
	display: inline-block;
	margin-left: .35em;
	color: var(--border-strong);
	font-weight: 500;
	text-decoration: none;
	opacity: 0;
	transition: opacity .15s var(--ease), color .15s var(--ease);
}
body.km-article-page .nv-content-wrap h2:hover a.km-anchor,
body.km-article-page .nv-content-wrap h3:hover a.km-anchor,
body.km-article-page .nv-content-wrap a.km-anchor:focus-visible { opacity: 1; }
body.km-article-page .nv-content-wrap a.km-anchor:hover { color: var(--accent); }
@media (hover: none) {
	body.km-article-page .nv-content-wrap a.km-anchor { display: none; }
}

/* Table of contents */
.km-toc {
	position: relative;
	padding: 16px 14px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, var(--surface-2), var(--card) 140px);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
body.km-article-page .km-toc__head {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 4px 14px;
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}
body.km-article-page .km-toc__head:hover { background: none; color: inherit; }
.km-toc__ring { position: relative; flex: none; width: 42px; height: 42px; }
.km-toc__ring svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.km-toc__ring circle { fill: none; stroke-width: 3; }
.km-toc__ring-track { stroke: var(--border); }
.km-toc__ring-bar {
	stroke: var(--accent);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	filter: drop-shadow(0 0 4px rgba(160, 255, 100, .5));
}
.km-toc__pct {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--foreground);
	font: 600 10px/1 var(--font-mono);
	letter-spacing: -.02em;
}
.km-toc__label { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.km-toc__title { color: var(--foreground); font-size: 14px; font-weight: 600; line-height: 1.2; }
.km-toc__count,
.km-toc__current { color: var(--muted); font-size: 12px; line-height: 1.3; }
.km-toc__current { display: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.km-toc__chevron {
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--muted);
	-webkit-mask: var(--km-icon-chevron) center / contain no-repeat;
	mask: var(--km-icon-chevron) center / contain no-repeat;
	transition: transform .2s var(--ease);
}
.km-toc__head[aria-expanded="true"] .km-toc__chevron { transform: rotate(180deg); }

.km-toc__list {
	position: relative;
	counter-reset: km-toc;
	max-height: max(150px, calc(100vh - var(--km-top) - 400px));
	margin: 10px 0 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
.km-toc__item { margin: 0; padding: 0; counter-increment: km-toc; }
.km-toc__item a {
	position: relative;
	display: flex;
	gap: 10px;
	padding: 7px 10px 7px 12px;
	border-radius: var(--radius-md);
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s var(--ease), background-color .15s var(--ease);
}
.km-toc__item a::before {
	content: counter(km-toc, decimal-leading-zero);
	flex: none;
	min-width: 18px;
	color: var(--border-strong);
	font: 600 10.5px/1.8 var(--font-mono);
	transition: color .15s var(--ease);
}
.km-toc__item.is-h3 a { padding-left: 26px; font-size: 13px; }
.km-toc__item a::after {
	content: "";
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 0;
	width: 2px;
	border-radius: 2px;
	background: transparent;
	transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.km-toc__item a:hover { background: rgba(255, 255, 255, .03); color: var(--foreground); }
.km-toc__item.is-read a { color: color-mix(in srgb, var(--foreground) 62%, var(--background)); }
.km-toc__item.is-read a::before { color: rgba(160, 255, 100, .55); }
.km-toc__item.is-active a { background: var(--accent-glow); color: var(--foreground); }
.km-toc__item.is-active a::before { color: var(--accent); }
.km-toc__item.is-active a::after { background: var(--accent); box-shadow: 0 0 10px rgba(160, 255, 100, .7); }

/* Work-with-us card under the contents */
.km-aside-card {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(160, 255, 100, .2);
	border-radius: var(--radius-xl);
	background: radial-gradient(280px 180px at 100% 0%, rgba(160, 255, 100, .16), transparent 70%), var(--card);
}
.km-aside-card .km-aside-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}
.km-aside-card__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.km-aside-card .km-aside-card__title { margin: 12px 0 0; color: var(--foreground); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.km-aside-card .km-aside-card__text { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.km-aside-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 11px 16px;
	border-radius: var(--radius-lg);
	background: var(--accent);
	color: var(--accent-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.km-aside-card__btn::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform .2s var(--ease);
}
.km-aside-card__btn:hover { background: var(--accent-hover); color: var(--accent-fg); transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(160, 255, 100, .55); }
.km-aside-card__btn:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- After the article */

body.km-article-page .nv-tags-list { margin-top: 48px; }

.km-share-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin-top: 20px;
	padding: 16px 18px 16px 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
}
.km-share-bar .km-share-bar__text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.km-share-bar__text strong { color: var(--foreground); font-weight: 600; }

.km-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 18px 20px;
	margin-top: 16px;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: radial-gradient(480px 220px at 0% 0%, rgba(160, 255, 100, .07), transparent 70%), var(--card);
}
.km-author__avatar { width: 64px; height: 64px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--background); object-fit: cover; }
.km-author .km-author__eyebrow { margin: 0; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.km-author .km-author__name { margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.km-author__name a { color: var(--foreground); text-decoration: none; }
.km-author__name a:hover { color: var(--accent); }
.km-author .km-author__bio { margin: 8px 0 0; color: var(--prose); font-size: 15px; line-height: 1.6; }
.km-author .km-author__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; }
.km-author__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.km-author__links a::after {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform .2s var(--ease);
}
.km-author__links a.km-author__site::after { -webkit-mask-image: var(--icon-external); mask-image: var(--icon-external); }
.km-author__links a:hover { color: var(--accent); }
.km-author__links a:hover::after { transform: translateX(2px); }

.km-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.km-pager__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--foreground);
	text-decoration: none;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.km-pager__item:hover { border-color: rgba(160, 255, 100, .32); background: var(--card-hover); color: var(--foreground); transform: translateY(-2px); }
.km-pager__label { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.km-pager__item--prev .km-pager__label::before,
.km-pager__item--next .km-pager__label::after {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
}
.km-pager__item--prev .km-pager__label::before { transform: scaleX(-1); }
.km-pager__item--next { text-align: right; }
.km-pager__item--next .km-pager__label { justify-content: flex-end; }
.km-pager__body { display: flex; align-items: center; gap: 14px; }
.km-pager__item--next .km-pager__body { flex-direction: row-reverse; }
.km-pager__thumb { flex: none; width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; }
.km-pager__title { font-size: 15px; font-weight: 600; line-height: 1.35; }

/* Related articles, full width */
.km-related {
	margin: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 112px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--border);
}
.km-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}
.km-related__head .km-eyebrow { margin-bottom: 14px; }
.km-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.km-related__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.km-related__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.km-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.km-rcard:hover { transform: translateY(-4px); border-color: rgba(160, 255, 100, .3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.km-rcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.km-rcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.km-rcard:hover .km-rcard__media img { transform: scale(1.04); }
.km-rcard__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.km-rcard__meta { display: flex; align-items: center; gap: 12px; }
.km-rcard__meta .km-chip { position: relative; z-index: 2; }
.km-rcard__num {
	position: absolute;
	top: 12px;
	right: 18px;
	color: rgba(255, 255, 255, .06);
	font: 700 46px/1 var(--font-mono);
	letter-spacing: -.05em;
	pointer-events: none;
	transition: color .25s var(--ease);
}
.km-rcard:hover .km-rcard__num { color: rgba(160, 255, 100, .16); }
.km-rcard .km-rcard__title { margin: 0; padding-right: 44px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.km-rcard__title a { color: var(--foreground); text-decoration: none; }
.km-rcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.km-rcard:hover .km-rcard__title a { color: var(--accent); }
.km-rcard .km-rcard__excerpt { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.km-rcard .km-date { margin-top: auto; }

/* ---------------------------------------------------------------- Responsive */

@media (min-width: 1024px) {
	.km-toc.is-collapsed .km-toc__list { display: none; }
	body.km-article-page .km-toc.is-collapsed .km-toc__head { padding-bottom: 4px; border-bottom-color: transparent; }
}
@media (min-width: 1024px) and (max-height: 760px) {
	.km-aside-card { display: none; }
	.km-toc__list { max-height: max(150px, calc(100vh - var(--km-top) - 170px)); }
}

@media (max-width: 1023px) {
	.km-article { display: block; margin-top: clamp(24px, 5vw, 40px); }
	.km-article__aside { position: static; margin: 0 0 28px; }
	.km-article:not(.has-toc) .km-article__aside,
	.km-aside-card { display: none; }
	.km-js .km-article__aside { position: sticky; top: calc(var(--km-top) + 10px); z-index: 30; }

	/* The contents become a sticky bar with the current section; the list drops down over the text */
	.km-toc {
		padding: 0;
		background: color-mix(in srgb, var(--surface-2) 88%, transparent);
		-webkit-backdrop-filter: saturate(160%) blur(16px);
		backdrop-filter: saturate(160%) blur(16px);
		box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
	}
	.km-toc.is-past {
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
	}
	body.km-article-page .km-toc__head { padding: 10px 14px; border-bottom: 0; }
	.km-toc__ring { width: 34px; height: 34px; }
	.km-toc__pct { font-size: 8.5px; }
	.km-toc.has-current .km-toc__count { display: none; }
	.km-toc.has-current .km-toc__current { display: block; color: color-mix(in srgb, var(--foreground) 78%, var(--background)); }
	.km-toc__list { max-height: none; margin: 0; padding: 0 8px 8px; }
	.km-js .km-toc__list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 2;
		max-height: min(62vh, 460px);
		padding: 8px;
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-xl);
		background: var(--surface-2);
		box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
	}
	.km-js .km-toc:not(.is-open) .km-toc__list { display: none; }

	body.km-article-page .nv-content-wrap h2,
	body.km-article-page .nv-content-wrap h3,
	body.km-article-page .nv-content-wrap h4 { scroll-margin-top: calc(var(--km-top) + 92px); }
}

@media (min-width: 681px) {
	.km-related__grid[data-count="1"] .km-rcard { flex-direction: row; }
	.km-related__grid[data-count="1"] .km-rcard__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 260px; }
}
@media (min-width: 681px) and (max-width: 900px) {
	.km-related__grid,
	.km-related__grid[data-count] { grid-template-columns: minmax(0, 1fr); }
	.km-rcard { flex-direction: row; }
	.km-rcard__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 210px; }
}

@media (max-width: 680px) {
	body.km-article-page .nv-thumb-wrap img { aspect-ratio: 16 / 10; border-radius: var(--radius-xl); }
	body.km-article-page .nv-content-wrap { font-size: 1.0625rem; line-height: 1.72; }
	.km-byline { padding: 14px 0; }
	.km-share__label { display: none; }
	.km-share-bar { flex-direction: column; align-items: flex-start; padding: 18px; }
	.km-author { grid-template-columns: minmax(0, 1fr); }
	.km-author__avatar { width: 52px; height: 52px; }
	.km-pager { grid-template-columns: minmax(0, 1fr); }
	.km-pager__item--next { text-align: left; }
	.km-pager__item--next .km-pager__label { justify-content: flex-start; }
	.km-pager__item--next .km-pager__body { flex-direction: row; }
	.km-related__grid,
	.km-related__grid[data-count] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.km-related__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.km-rcard:hover,
	.km-pager__item:hover,
	.km-aside-card__btn:hover { transform: none; }
	.km-rcard:hover .km-rcard__media img { transform: none; }
}