/* ============================================================
   Õiguskantsleri aastaülevaade 2026
   Fonts: Fraunces (serif) + Inter (sans).
   Paper: warm white with tiled paper.jpg texture.
   Native CSS nesting · structural selectors · no utility classes.
   ============================================================ */

:root {
	--paper: #fbfaf6;
	--ink: #141417;
	--ink-soft: #3a3a3f;
	--ink-muted: #7a7a82;
	--rule: rgba(20, 20, 23, 0.14);
	--blue: #000000;
	--glow: color-mix(in srgb, var(--blue) 7%, transparent);
	--wash-mint: rgba(170, 210, 200, 0.62);
	--wash-peach: rgba(240, 210, 185, 0.58);
	--wash-lilac: rgba(200, 188, 230, 0.52);
	--noise: rgba(0, 0, 0, 0.04);
	--paper-texture: url('../images/paper.jpg');

	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Editorial apparatus — labels, folios, section markers */
	--label-size: 0.72rem;
	--label-track: 0.22em;
	--measure: 65ch;

	color-scheme: light;
}

:root[data-theme='dark'] {
	/* Black background, warm pale text — soft yellow-white, not saturated */
	--paper: #0a0a0a;
	--ink: #ece6cf;
	--ink-soft: #bcb69c;
	--ink-muted: #8b876f;
	--rule: rgba(236, 230, 207, 0.16);
	--blue: #ecd98f;
	--glow: color-mix(in srgb, var(--blue) 10%, transparent);
	--wash-mint: transparent;
	--wash-peach: transparent;
	--wash-lilac: transparent;
	--noise: rgba(255, 255, 255, 0.02);
	--paper-texture: none;

	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	min-height: 100%;
	background-color: var(--paper);
	background-image: var(--paper-texture);
	background-repeat: repeat;
	background-size: 300px 300px;
	background-attachment: fixed;
	scroll-behavior: smooth;
}

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

::selection {
	background: color-mix(in srgb, var(--blue) 25%, transparent);
}

html,
body {
	margin: 0;
	padding: 0;
}

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

/* Monochrome SVG mark — colors via currentColor. */
.mark {
	display: block;
	width: 90%;
	background: currentColor;
	mask: var(--mark) no-repeat center / contain;
	-webkit-mask: var(--mark) no-repeat center / contain;
}

.site-logo-mark {
	--mark: url('../images/vapp.svg');
}

.cover-signature-mark {
	--mark: url('../images/allkiri.svg');
}

/* Glyph under a nav item — inherits the link colour */
.nav-icon-link {
	display: block;
	margin: 0.4rem 0 0.2rem;
	color: inherit;

	&:hover .nav-icon {
		opacity: 1;
	}
}

.nav-icon {
	--mark: url('../images/lihtne-keel.png');
	width: 3rem;
	opacity: 0.8;
}

h1,
h2,
h3,
h4 {
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Lihtne keel uses its own document typeface without affecting site chrome. */
body[data-page='lihtne-keel'] main > article {
	--sans: Arial, sans-serif;
	--serif: Arial, sans-serif;
	font-family: var(--sans);
}

body[data-page='lihtne-keel'] .shell > main > article > p:first-of-type::first-letter {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	float: none;
	padding: 0;
	font-weight: inherit;
	color: inherit;
}

/* ---------- Page ---------- */
body {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

/* Soft color washes — fixed behind content */
.atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(ellipse 85% 65% at 88% 10%, var(--wash-mint), transparent 78%),
		radial-gradient(ellipse 75% 58% at 6% 92%, var(--wash-peach), transparent 76%),
		radial-gradient(ellipse 58% 48% at 70% 80%, var(--wash-lilac), transparent 74%);

	&::before,
	&::after {
		content: '';
		position: absolute;
		border-radius: 50%;
		filter: blur(56px);
	}

	&::before {
		width: min(50vw, 440px);
		height: min(50vw, 440px);
		top: 32%;
		left: -8%;
		background: var(--wash-lilac);
		opacity: 0.92;
	}

	&::after {
		width: min(44vw, 380px);
		height: min(44vw, 380px);
		bottom: 14%;
		right: 8%;
		background: var(--wash-peach);
		opacity: 0.8;
	}
}

/* Yellow-on-black dark mode: keep the black pure — no colour washes */
:root[data-theme='dark'] .atmosphere {
	display: none;
}

/* ---------- Cover: horizontal river of growing photos ---------- */
.gallery-belt {
	--gallery-start: calc(max(0px, (100% - 1200px) / 2) + 1.5rem + 280px);

	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	/* Keep every photo on the content side of the sidebar separator. */
	clip-path: inset(0 0 0 var(--gallery-start));

	& > img {
		position: absolute;
		top: 0;
		left: 0;
		width: 190px;
		height: 128px;
		object-fit: cover;
		border-radius: 3px;
		box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
		transform-origin: center;
		will-change: transform, opacity;
		/* JS positions each frame; hidden until placed to avoid a flash at 0,0 */
		opacity: 0;
	}
}

:root[data-theme='dark'] .gallery-belt > img {
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
	filter: brightness(0.94);
}

/* On short desktop screens, let the photo river emerge beside the cover text. */
@media (min-width: 881px) and (max-height: 700px) {
	.gallery-belt {
		--gallery-fade-start: calc(var(--gallery-start) + min(30vw, 350px));
		--gallery-fade-end: calc(var(--gallery-start) + min(46vw, 540px));
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0 var(--gallery-fade-start),
			#000 var(--gallery-fade-end) 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0 var(--gallery-fade-start),
			#000 var(--gallery-fade-end) 100%
		);
	}
}

/* River is a desktop showcase — hide on narrow screens */
@media (max-width: 880px) {
	.gallery-belt {
		display: none;
	}
}

.shell {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	min-height: 100vh;
	position: relative;
	z-index: 2;

	& > aside,
	& > main {
		position: relative;
		z-index: 2;
	}

	& > aside {
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		overflow-y: auto;
		padding: 1.5rem 1rem 1.5rem 0;
		border-right: 1px solid var(--rule);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 1.5rem;

		& > a {
			font-family: var(--serif);
			font-weight: 500;
			color: var(--ink);
			text-decoration: none;
		}

		/* Wrapper around nav — vertical spacing */
		div:has(> nav) {
			display: flex;
			flex-direction: column;
			gap: 2rem;
		}

		nav ol {
			list-style: none;
			margin: 0;
			padding: 0;

			& > li {
				margin-bottom: 0.1rem;

				& > a {
					display: flex;
					align-items: baseline;
					gap: 0.55rem;
					padding: 0.18rem 0;
					color: var(--ink);
					text-decoration: none;

					&:hover {
						color: var(--blue);
					}
				}

				&[aria-current='true'] > a {
					color: var(--blue);
					font-weight: 600;
				}

				/* Nested children */
				& > ol {
					list-style: none;
					/* margin: 0.55rem 0 0.85rem 2.15rem; */
					/* padding: 0.35rem 0 0.35rem 0.9rem; */
					/* border-left: 1px solid var(--rule); */
					padding: 0.5rem 0 0.5rem 0.75rem;
					font-size: 0.84rem;
					line-height: 1.45;
					counter-reset: none;
					display: none;

					& > li {
						counter-increment: none;
						margin: 0.3rem 0;

						&:first-child {
							margin-top: 0;
						}

						&:last-child {
							margin-bottom: 0;
						}

						& > a {
							display: flex;
							align-items: flex-start;
							gap: 0.5rem;
							padding: 0.28rem 0;
							line-height: 1.4;
							color: var(--ink-soft);
							text-decoration: none;

							/* Bullet — keeps wrapped lines hanging past the dot */
							&::before {
								content: '';
								flex: 0 0 auto;
								width: 4px;
								height: 4px;
								margin-top: 0.62em;
								border-radius: 50%;
								background: currentColor;
								opacity: 0.5;
							}

							&:hover {
								color: var(--blue);

								&::before {
									opacity: 1;
								}
							}
						}

						&[aria-current='true'] > a {
							color: var(--blue);
							font-weight: 600;

							&::before {
								opacity: 1;
							}
						}
					}
				}

				&[aria-current='true'] > ol {
					display: block;
				}
			}
		}

		& > div:last-child {
			color: var(--ink-muted);

			& .mark {
				width: 100px;
				margin-bottom: 0.75rem;
			}

			& > p {
				margin: 0;
				font-family: var(--serif);
				font-style: italic;
				font-size: 0.78rem;
				line-height: 1.55;
				color: var(--ink-soft);
			}
		}

		nav a:focus-visible,
		form[role='search'] button:focus-visible {
			outline: 2px solid var(--blue);
			outline-offset: 2px;
		}
	}

	body[data-page='cover'] & > main {
		--cover-offset: 120px;
		min-height: calc(100vh - var(--cover-offset));
		display: grid;
		/* align-content: center; */
		padding: 0;
		margin-top: var(--cover-offset);
		isolation: isolate;
	}

	& > main {
		min-width: 0;
		padding: 1.5rem 0 5rem;
		position: relative;
		isolation: isolate;

		& > article {
			& a {
				color: var(--blue);
				text-decoration: underline;
				text-decoration-skip-ink: auto;
				text-underline-offset: 3px;
				text-decoration-color: color-mix(in srgb, var(--blue) 40%, var(--rule));
				transition:
					text-decoration-color 0.15s,
					color 0.15s;

				&:hover {
					text-decoration-color: var(--blue);
				}
			}

			/* Cover article (body[data-page='cover']) */
			body[data-page='cover'] & {
				& > figure {
					display: flex;
					flex-wrap: nowrap;
					gap: 0.5rem;
					margin: 0 0 2.5rem;

					& img {
						flex: 1 1 0;
						min-width: 0;
						height: 7rem;
						object-fit: cover;
						border-radius: 0.15rem;
						border: 1px solid var(--rule);
					}
				}

				& > header > h1 {
					font-size: clamp(3rem, 6vw, 5rem);
					line-height: 1.02;
					max-width: 18ch;

					& .year {
						display: block;
						margin-top: 0.35em;
						font-size: 0.42em;
						font-weight: 400;
						letter-spacing: 0.04em;
						color: var(--ink-muted);
						font-variant-numeric: tabular-nums;
						font-variation-settings: 'opsz' 72;
					}
				}

				& > header + p {
					font-family: var(--serif);
					font-style: italic;
					font-size: 1.15rem;
					line-height: 1.65;
					color: var(--ink-soft);
					max-width: 30ch;
				}
			}

			/* Editorial page header — shared label, chapters add folio + rule */
			& > header {
				margin-bottom: 2.5rem;

				& > p {
					font-family: var(--sans);
					font-size: var(--label-size);
					font-weight: 500;
					letter-spacing: var(--label-track);
					text-transform: uppercase;
					color: var(--ink-muted);
					margin: 0 0 0.75rem;
					font-variant-numeric: tabular-nums;
				}

				& > h1 {
					font-size: clamp(2.5rem, 4.5vw, 3.6rem);
					line-height: 1.05;
					margin: 0;
				}
			}

			/* Chapter pages (not cover, not search) get a ruled header */
			body[data-page]:not([data-page='cover']):not([data-page='search']) & > header {
				margin-bottom: 2.5rem;
				padding-bottom: 1.75rem;
				border-bottom: 1px solid var(--rule);
				max-width: var(--measure);

				& > h1 {
					max-width: 24ch;
				}
			}

			/* Chapter-opener artwork plate */
			& > figure.opener {
				margin: 0 0 2.5rem;
				max-width: var(--measure);

				& > img {
					width: 100%;
					height: auto;
					border-radius: 4px;
					aspect-ratio: 3 / 2;
					object-fit: cover;
				}

				& > figcaption {
					margin-top: 0.75rem;
					font-family: var(--sans);
					font-size: var(--label-size);
					letter-spacing: 0.04em;
					color: var(--ink-muted);
				}
			}

			/* Prose flows directly inside article */
			& h2 {
				margin: 0 0 1.25rem;
				font-size: 2.4rem;
				line-height: 1.2;
				max-width: var(--measure);
			}

			& h2[id] {
				scroll-margin-top: 5rem;
			}

			& h3 {
				margin: 2.25rem 0 0.75rem;
				font-size: 1.7rem;
				line-height: 1.25;
				font-weight: 600;
				color: var(--ink);
			}

			/* Imported articles wrap heading text in <strong>; ignore the weight */
			& :is(h1, h2, h3, h4) strong {
				font-weight: inherit;
			}

			& p {
				margin: 0 0 1.35rem;
				max-width: var(--measure);
				font-size: 1.1rem;
				line-height: 1.75;
				hyphens: none;
				word-break: normal;
				overflow-wrap: normal;
			}

			& :is(sup, sub) {
				font-size: 0.7em;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
			}

			& sup {
				top: -0.5em;
			}

			& sub {
				bottom: -0.25em;
			}

			& table {
				display: block;
				width: 100%;
				max-width: 100%;
				margin: 2rem 0;
				overflow-x: auto;
				border-collapse: collapse;
				font-family: var(--sans);
				font-size: 0.9rem;
				line-height: 1.4;
				font-variant-numeric: tabular-nums;
			}

			& caption {
				padding: 0 0 0.75rem;
				font-weight: 600;
				text-align: left;
			}

			& :is(th, td) {
				min-width: 5.5rem;
				padding: 0.65rem 0.75rem;
				border: 1px solid var(--rule);
				vertical-align: top;
				text-align: left;
			}

			& th {
				background: color-mix(in srgb, var(--ink) 6%, transparent);
				font-weight: 600;
			}

			& :is(th, td) p {
				margin: 0;
				max-width: none;
				font: inherit;
				text-indent: 0;
			}

			/* CSV-backed charts inserted with an article shortcode. */
			& > figure.article-chart {
				--chart-line-color: #286486;
				--chart-bar-color: #ed6c2d;
				width: 100%;
				max-width: 80rem;
				margin: 3rem 0;
				border-radius: 0.3rem;
				background: transparent;
				font-family: var(--sans);
				page-break-inside: avoid;
				break-inside: avoid;

				& > figcaption {
					margin: 0 0 1rem;
					font-size: 1.15rem;
					font-weight: 700;
					line-height: 1.35;
					text-align: left;
				}

				& .chart-canvas-wrap {
					position: relative;
					width: 100%;
					height: clamp(24rem, 48vw, 38rem);
				}

				& .chart-data {
					margin-top: 1rem;
					border-top: 1px solid var(--rule);
					padding-top: 0.85rem;

					& > summary {
						width: fit-content;
						color: var(--ink-soft);
						font-size: 0.9rem;
						font-weight: 600;
						cursor: pointer;
					}
				}

				& .chart-table-wrap {
					overflow-x: auto;
				}

				&.chart-unavailable .chart-canvas-wrap {
					display: none;
				}
			}

			:root[data-theme='dark'] & > figure.article-chart {
				--chart-line-color: #70b5da;
				--chart-bar-color: #f28a4f;
			}

			& > p.chart-error {
				padding: 0.75rem 1rem;
				border-left: 3px solid var(--chart-bar-color, #ed6c2d);
				color: var(--ink-soft);
			}

			/* Book typography — chapter articles only */
			body[data-page]:not([data-page='cover']):not([data-page='lihtne-keel']) &:not([data-search]) > p:first-of-type::first-letter {
				font-family: var(--sans);
				font-size: 3.2em;
				line-height: 0.85;
				float: left;
				padding: 0.05em 0.1em 0 0;
				font-weight: 700;
				color: var(--ink);
			}

			body[data-page]:not([data-page='cover']) &:not([data-search]) {
				& > header ~ h2 {
					display: grid;
					gap: 0.65rem;
					margin-top: 3.5rem;
				}

				& > p + p {
					margin-top: 0;
				}

				& > header + p,
				& > figure + p,
				& > h2 + p,
				& > h3 + p,
				& > h4 + p {
					text-indent: 0;
				}

				& ul,
				& ol {
					margin: 0 0 1.35rem;
					padding-left: 1.5em;
					max-width: var(--measure);
					font-size: 1.1rem;
					line-height: 1.75;
					hyphens: none;
					word-break: normal;
					overflow-wrap: normal;
				}

				& li {
					margin-bottom: 0.35em;
				}

				& li > ul,
				& li > ol {
					margin-top: 0.35em;
					margin-bottom: 0;
				}
			}

			/* Search results */
			&[data-search] {
				& > header {
					margin-bottom: 2rem;
					padding-bottom: 1.5rem;
					border-bottom: 1px solid var(--rule);
					max-width: var(--measure);
				}

				& > section {
					margin: 2.5rem 0;

					& > h2 {
						margin: 0 0 0.75rem;
						font-size: 1.4rem;
						font-weight: 500;

						& > a {
							color: var(--ink);
							text-decoration: underline;
							text-underline-offset: 3px;
							text-decoration-color: var(--rule);

							&:hover {
								text-decoration-color: var(--blue);
								color: var(--blue);
							}
						}
					}

					& > p {
						font-size: 1rem;
						line-height: 1.65;
						margin: 0 0 0.85rem;
						color: var(--ink-soft);
					}
				}

				& mark {
					background: var(--blue);
					color: var(--paper);
					padding: 0 0.15em;
					border-radius: 2px;
				}
			}
		}
	}
}

/* ---------- Nav toggle button — hidden on desktop ---------- */
#navToggle {
	display: none;
}

/* ---------- Floating actions — clear, findable controls ---------- */
.actions {
	position: fixed;
	top: 1rem;
	right: 1rem;
	left: 1rem;
	z-index: 60;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	align-items: center;
	pointer-events: none;

	& > * {
		pointer-events: auto;
	}

	& > button,
	& > a {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--rule);
		border-radius: 999px;
		background: color-mix(in srgb, var(--paper) 72%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: var(--ink-soft);
		cursor: pointer;
		text-decoration: none;
		transition:
			color 0.2s,
			border-color 0.2s,
			background 0.2s;

		& > svg {
			width: 22px;
			height: 22px;
		}

		&:hover {
			color: var(--ink);
			border-color: var(--ink-muted);
			background: color-mix(in srgb, var(--paper) 90%, transparent);
		}

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

	& > .is-disabled {
		opacity: 0.45;
		cursor: default;
	}
}

.article-media-controls {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	width: 100%;
	max-width: none;
	margin: -1.25rem 0 2.5rem;
}

.article-document-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	grid-column: 2;
	grid-row: 1;

	&:only-child {
		grid-column: 1 / -1;
	}

	& > button,
	& > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 48px;
		padding: 0.65rem 1.3rem 0.65rem 1.05rem;
		border: 1px solid var(--rule);
		border-radius: 999px;
		background: color-mix(in srgb, var(--paper) 76%, transparent);
		color: var(--ink-soft);
		font: 600 var(--label-size) / 1 var(--sans);
		letter-spacing: 0.03em;
		text-decoration: none;
		cursor: pointer;
		transition:
			color 0.2s,
			border-color 0.2s,
			background 0.2s;

		&:hover {
			color: var(--ink);
			border-color: var(--ink-muted);
			background: color-mix(in srgb, var(--paper) 94%, transparent);
		}

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

main article .article-document-actions > a {
	text-decoration: none;
}

.article-audio-player {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	margin: 0;
	color: var(--ink);

	& audio {
		display: block;
		width: 100%;
	}

	& .plyr {
		--plyr-color-main: var(--ink-soft);
		--plyr-audio-controls-background: color-mix(in srgb, var(--paper) 76%, transparent);
		--plyr-audio-control-color: var(--ink-soft);
		--plyr-audio-control-background-hover: var(--ink);
		--plyr-audio-control-color-hover: var(--paper);
		--plyr-audio-range-track-background: color-mix(in srgb, var(--ink-muted) 30%, transparent);
		--plyr-audio-progress-buffered-background: color-mix(in srgb, var(--ink-muted) 20%, transparent);
		--plyr-range-fill-background: var(--ink-soft);
		--plyr-range-thumb-background: var(--paper);
		--plyr-focus-visible-color: var(--blue);
		--plyr-menu-background: color-mix(in srgb, var(--paper) 96%, transparent);
		--plyr-menu-color: var(--ink);
		--plyr-menu-arrow-color: var(--ink-muted);
		--plyr-tooltip-background: var(--ink);
		--plyr-tooltip-color: var(--paper);
		--plyr-control-spacing: 9px;
		--plyr-control-radius: 999px;
		--plyr-font-family: var(--sans);
		--plyr-font-size-time: var(--label-size);

		min-width: 0;
		border: 1px solid var(--rule);
		border-radius: 999px;
		font-variant-numeric: tabular-nums;
	}

	& .plyr--audio .plyr__controls {
		min-height: 46px;
		border-radius: 999px;
		padding: 0.35rem 0.45rem;
	}
}

@media (max-width: 1100px) {
	.article-media-controls {
		grid-template-columns: 1fr;
	}

	.article-audio-player {
		grid-column: 1;
		grid-row: 1;
	}

	.article-document-actions {
		grid-column: 1;
		grid-row: 2;

		&:only-child {
			grid-row: 1;
		}
	}
}

/* Toolbar search — collapsed to a round icon, slides open to the left */
#siteSearch {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	height: 44px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: color-mix(in srgb, var(--paper) 72%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		border-color 0.2s,
		background 0.2s;

	&:hover,
	&.is-open {
		background: color-mix(in srgb, var(--paper) 90%, transparent);
	}

	&:focus-within {
		border-color: var(--blue);
	}

	& > button {
		display: grid;
		place-items: center;
		flex: none;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--ink-soft);
		cursor: pointer;
		transition: color 0.2s;

		&:hover {
			color: var(--ink);
		}

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

	& > input[type='search'] {
		width: 0;
		min-width: 0;
		padding: 0;
		border: 0;
		background: transparent;
		font: inherit;
		font-size: 0.85rem;
		color: var(--ink);
		opacity: 0;
		outline: none;
		transition:
			width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.2s;

		&::placeholder {
			color: var(--ink-muted);
		}

		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
			appearance: none;
			width: 12px;
			height: 12px;
			background: var(--ink-muted);
			mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>")
				center/contain no-repeat;
			cursor: pointer;
		}
	}

	&.is-open > input[type='search'] {
		width: 220px;
		padding: 0 0.25rem 0 1rem;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	#siteSearch > input[type='search'] {
		transition: none;
	}
}

/* Narrow screens: the open search takes the whole bar */
@media (max-width: 880px) {
	.actions:has(#siteSearch.is-open) > :not(#siteSearch) {
		display: none;
	}

	#siteSearch.is-open {
		flex: 1 1 auto;
		min-width: 0;
	}

	#siteSearch.is-open > input[type='search'] {
		width: calc(100% - 42px);
	}
}

#themeToggle > svg {
	grid-area: 1 / 1;
	transition:
		opacity 0.3s,
		transform 0.4s;
}

:root[data-theme='light'] #themeToggle .ico-sun {
	opacity: 0;
	transform: rotate(-45deg) scale(0.7);
}
:root[data-theme='light'] #themeToggle .ico-moon {
	opacity: 1;
	transform: none;
}
:root[data-theme='dark'] #themeToggle .ico-sun {
	opacity: 1;
	transform: none;
}
:root[data-theme='dark'] #themeToggle .ico-moon {
	opacity: 0;
	transform: rotate(45deg) scale(0.7);
}

/* ---------- Reading progress ---------- */
#readProgress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: color-mix(in srgb, var(--blue) 65%, transparent);
	z-index: 70;
	pointer-events: none;
	transition: width 0.1s linear;
}

/* ---------- Chapter prev/next ---------- */
.chapter-nav {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
	max-width: var(--measure);

	& > a {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		max-width: 45%;
		color: var(--ink);
		text-decoration: none;
		font-family: var(--sans);

		& .dir {
			font-family: var(--sans);
			font-size: var(--label-size);
			font-weight: 500;
			letter-spacing: var(--label-track);
			text-transform: uppercase;
			color: var(--ink-muted);
		}

		& .title {
			font-size: 1.05rem;
			line-height: 1.35;
			text-decoration: underline;
			text-underline-offset: 3px;
			text-decoration-color: var(--rule);
			transition:
				color 0.15s,
				text-decoration-color 0.15s;
		}

		&:hover .title {
			color: var(--blue);
			text-decoration-color: var(--blue);
		}

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

	& > a[rel='next'] {
		margin-left: auto;
		text-align: right;
	}
}

/* ---------- Paper grain overlay ---------- */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.14;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px 180px;
	mix-blend-mode: multiply;
}

:root[data-theme='dark'] body::after {
	mix-blend-mode: soft-light;
	opacity: 0.1;
}

/* ---------- Book typography — desktop justify ---------- */
@media (min-width: 640px) {
	body > main > article:not([data-search]) > p {
		text-align: justify;
	}
}

/* ---------- Book typography — mobile safeguards ---------- */
@media (max-width: 639px) {
	body > main > article > header[data-chapter] {
		& > h1 {
			max-width: none;
			padding-right: 0;
		}

		&::after {
			display: none;
		}
	}

	body > main > article:not([data-search]) {
		& > p {
			text-align: left;
		}

		& > p + p {
			text-indent: 0;
		}

		& > header + p::first-letter {
			font-size: inherit;
			float: none;
			padding: 0;
			font-weight: inherit;
		}
	}

	.chapter-nav {
		flex-direction: column;
		gap: 1.5rem;

		& > a {
			max-width: none;
		}

		& > a[rel='next'] {
			text-align: left;
		}
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.shell {
		grid-template-columns: 1fr;
		padding: 0;
	}

	#navToggle {
		display: grid;
		place-items: center;
		position: fixed;
		bottom: max(1rem, env(safe-area-inset-bottom));
		left: 50%;
		translate: -50% 0;
		z-index: 60;
		width: 52px;
		height: 52px;
		padding: 0;
		border: 1px solid var(--rule);
		border-radius: 999px;
		background: color-mix(in srgb, var(--paper) 92%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: var(--ink);
		cursor: pointer;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

		& > svg:last-child {
			display: none;
		}
	}

	body[data-nav-open='true'] #navToggle {
		& > svg:first-child {
			display: none;
		}
		& > svg:last-child {
			display: block;
		}
	}

	.shell > aside {
		position: fixed;
		top: 0;
		left: 0;
		width: min(85vw, 320px);
		height: 100dvh;
		max-height: none;
		background: color-mix(in srgb, var(--paper) 90%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-right: 1px solid var(--rule);
		padding: 1.5rem 1.25rem 6rem;
		z-index: 55;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}

	body[data-nav-open='true'] .shell > aside {
		transform: translateX(0);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
	}

	body[data-nav-open='true']::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.25);
		z-index: 54;
	}

	.shell > main {
		padding: 1.5rem 1.25rem 6rem;
	}

	body[data-page='cover'] .shell > main {
		padding: 0 1.25rem 6rem;
	}
}