/**
 * Article — everything below the fold.
 *
 * Loaded non-blocking, because none of it is needed to paint the first screen:
 * TOC, rail, author box, related guides, and the content-flow rhythm that only
 * matters once a reader has scrolled.
 */

/* ---------------------------------------------------------------------------
 * Content rhythm. The measure is the readable line length (68–72ch at 18px);
 * blocks that want the full column opt out with their own width.
 * ------------------------------------------------------------------------ */

.ait-entry__content > * {
	margin-bottom: var(--s-5);
}

.ait-entry__content h2 {
	margin-top: var(--s-8);
	margin-bottom: var(--s-4);
}

.ait-entry__content h3 {
	margin-top: var(--s-6);
	margin-bottom: var(--s-3);
}

/* ---------------------------------------------------------------------------
 * In-flow TOC. Collapsed on mobile — a scanner opens it, a reader scrolls past
 * it, and neither loses the top of the article to a list of twelve links.
 *
 * Hidden from 1024px, where the rail carries the always-visible copy. Exactly
 * one of the two exists at any width, so a screen reader never meets the same
 * list twice (see parts/article/rail.php).
 * ------------------------------------------------------------------------ */

.ait-toc {
	margin-bottom: var(--s-6);
	padding: var(--s-4) var(--s-5);
	border: var(--border-hair);
	border-radius: var(--r-md);
	background: var(--c-surface);
}

.ait-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}

.ait-toc__summary::-webkit-details-marker {
	display: none;
}

.ait-toc__summary:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.ait-toc__chevron {
	flex: none;
	color: var(--c-primary);
	transition: transform var(--t-accordion) var(--ease);
}

[open] > .ait-toc__summary .ait-toc__chevron {
	transform: rotate(180deg);
}

.ait-toc__list {
	margin: var(--s-4) 0 0;
	padding-left: 1.25em;
}

.ait-toc__item {
	margin-bottom: var(--s-2);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Rail. Sticky, and never load-bearing (article-template.md §1).
 * ------------------------------------------------------------------------ */

.ait-rail {
	display: none;
}

.ait-rail__title {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-small);
	font-weight: 700;
	text-transform: none;
	color: var(--c-ink-muted);
}

.ait-rail__list {
	margin: 0;
	padding-left: 1.25em;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.ait-rail__card {
	margin-top: var(--s-6);
	padding: var(--s-5);
	border-radius: var(--r-md);
	background: var(--c-band);
}

.ait-rail__card-title {
	margin: 0 0 var(--s-2);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--c-primary);
}

.ait-rail__card-copy {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Author box (article-template.md §2, #16).
 * ------------------------------------------------------------------------ */

.ait-author {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--s-4);
	margin-top: var(--s-8);
	padding: var(--s-5);
	border-top: var(--border-hair);
}

.ait-author__avatar {
	border-radius: var(--r-full);
}

.ait-author__name {
	margin: 0 0 var(--s-1);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--c-primary);
}

.ait-author__credential {
	margin: 0 0 var(--s-2);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.ait-author__bio {
	margin: 0 0 var(--s-2);
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.ait-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin: 0;
	font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
 * Related guides (article-template.md §2, #17).
 * ------------------------------------------------------------------------ */

.ait-related {
	margin-top: var(--s-8);
}

.ait-related__title {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	color: var(--c-primary);
}

.ait-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-related__grid > li::before {
	content: none;
}

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

@media (min-width: 1024px) {
	.ait-toc {
		display: none;
	}

	.ait-rail {
		display: block;
	}

	.ait-rail__sticky {
		position: sticky;
		top: calc(var(--header-h-lg) + var(--s-5));
	}

	.ait-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ait-toc__chevron {
		transition: none;
	}
}