source ⟩ hypertext ⟩ public ⟩ latbs ⟩ belka.css

:root {
	--bg-art: #eef0f9;
	--text-art: #292d42;
	--text-art-light: #292d42aa;

	--bg-side: #060c4388;
	--text-side: #f0f0f0;

	--gentle-acc-meta: #cad6ffdd;
	--gentle-text-acc-meta: #cad6ff;
	--gentler-acc-meta: #cad6ff88;
	--gentlest-acc-meta: #cad6ff44;
	--bright-acc-meta: #94adff;
	--text-acc-meta: #1e2da2;
	--darkest-acc-meta: #060c4388;

	--gentle-acc-astrography: #7eeaf0dd;
	--gentle-text-acc-astrography: #7eeaf0;
	--gentler-acc-astrography: #7eeaf088;
	--gentlest-acc-astrography: #7eeaf044;
	--bright-acc-astrography: #00c6ce;
	--text-acc-astrography: #004b4e;
	--darkest-acc-astrography: #001b1c88;

	--gentle-acc-geography: #a0eab9dd;
	--gentle-text-acc-geography: #a0eab9;
	--gentler-acc-geography: #a0eab988;
	--gentlest-acc-geography: #a0eab944;
	--bright-acc-geography: #42cb80;
	--text-acc-geography: #004f2a;
	--darkest-acc-geography: #001c0c88;

	--gentle-acc-history: #d9dc8edd;
	--gentle-text-acc-history: #d9dc8e;
	--gentler-acc-history: #d9dc8e88;
	--gentlest-acc-history: #d9dc8e44;
	--bright-acc-history: #b5b614;
	--text-acc-history: #444400;
	--darkest-acc-history: #17170088;

	--gentle-acc-sapiens: #ffcb8fdd;
	--gentle-text-acc-sapiens: #ffcb8f;
	--gentler-acc-sapiens: #ffcb8f88;
	--gentlest-acc-sapiens: #ffcb8f44;
	--bright-acc-sapiens: #ed990e;
	--text-acc-sapiens: #5c3800;
	--darkest-acc-sapiens: #2a170088;

	--gentle-acc-culture: #ffc6c0dd;
	--gentle-text-acc-culture: #ffc6c0;
	--gentler-acc-culture: #ffc6c088;
	--gentlest-acc-culture: #ffc6c044;
	--bright-acc-culture: #ff847d;
	--text-acc-culture: #7e0311;
	--darkest-acc-culture: #3c000488;

	--gentle-acc-science: #ffc0e3dd;
	--gentle-text-acc-science: #ffc0e3;
	--gentler-acc-science: #ffc0e388;
	--gentlest-acc-science: #ffc0e344;
	--bright-acc-science: #f381c5;
	--text-acc-science: #730b53;
	--darkest-acc-science: #37002688;

	--gentle-acc: var(--gentle-acc-meta);
	--gentle-text-acc: var(--gentle-text-acc-meta);
	--gentlest-acc: var(--gentlest-acc-meta);
	--gentler-acc: var(--gentler-acc-meta);
	--gentlest-acc: var(--gentlest-acc-meta);
	--bright-acc: var(--bright-acc-meta);
	--text-acc: var(--text-acc-meta);
	--darkest-acc: var(--darkest-acc-meta);

	--background: var(--bg-art);
	--text: var(--text-art);
	--accent: var(--text-art);
	--accent_translucent: var(--text-art);
	--accent_seethrough: var(--text-art);

	--direction-factor: 1; /* 1 for LTR, -1 for RTL */

	scrollbar-color: var(--bright-acc) #020847;

	scroll-timeline: --scroll-body-parallax y;
}

.meta,
.link-meta {
	--gentle-acc: var(--gentle-acc-meta);
	--gentle-text-acc: var(--gentle-text-acc-meta);
	--gentler-acc: var(--gentler-acc-meta);
	--gentlest-acc: var(--gentlest-acc-meta);
	--bright-acc: var(--bright-acc-meta);
	--text-acc: var(--text-acc-meta);
	--darkest-acc: var(--darkest-acc-meta);
}

.geography,
.link-geography {
	--gentle-acc: var(--gentle-acc-geography);
	--gentle-text-acc: var(--gentle-text-acc-geography);
	--gentler-acc: var(--gentler-acc-geography);
	--gentlest-acc: var(--gentlest-acc-geography);
	--bright-acc: var(--bright-acc-geography);
	--text-acc: var(--text-acc-geography);
	--darkest-acc: var(--darkest-acc-geography);
}

.astrography,
.link-astrography {
	--gentle-acc: var(--gentle-acc-astrography);
	--gentle-text-acc: var(--gentle-text-acc-astrography);
	--gentler-acc: var(--gentler-acc-astrography);
	--gentlest-acc: var(--gentlest-acc-astrography);
	--bright-acc: var(--bright-acc-astrography);
	--text-acc: var(--text-acc-astrography);
	--darkest-acc: var(--darkest-acc-astrography);
}

.history,
.link-history {
	--gentle-acc: var(--gentle-acc-history);
	--gentle-text-acc: var(--gentle-text-acc-history);
	--gentler-acc: var(--gentler-acc-history);
	--gentlest-acc: var(--gentlest-acc-history);
	--bright-acc: var(--bright-acc-history);
	--text-acc: var(--text-acc-history);
	--darkest-acc: var(--darkest-acc-history);
}

.sapiens,
.link-sapiens {
	--gentle-acc: var(--gentle-acc-sapiens);
	--gentle-text-acc: var(--gentle-text-acc-sapiens);
	--gentler-acc: var(--gentler-acc-sapiens);
	--gentlest-acc: var(--gentlest-acc-sapiens);
	--bright-acc: var(--bright-acc-sapiens);
	--text-acc: var(--text-acc-sapiens);
	--darkest-acc: var(--darkest-acc-sapiens);
}

.culture,
.link-culture {
	--gentle-acc: var(--gentle-acc-culture);
	--gentle-text-acc: var(--gentle-text-acc-culture);
	--gentler-acc: var(--gentler-acc-culture);
	--gentlest-acc: var(--gentlest-acc-culture);
	--bright-acc: var(--bright-acc-culture);
	--text-acc: var(--text-acc-culture);
	--darkest-acc: var(--darkest-acc-culture);
}

.science,
.link-science {
	--gentle-acc: var(--gentle-acc-science);
	--gentle-text-acc: var(--gentle-text-acc-science);
	--gentler-acc: var(--gentler-acc-science);
	--gentlest-acc: var(--gentlest-acc-science);
	--bright-acc: var(--bright-acc-science);
	--text-acc: var(--text-acc-science);
	--darkest-acc: var(--darkest-acc-science);
}

body {
	font-family: var(--sans-serif);

	background-image: url("/latbs/orrery.webp"), url("/latbs/latbsBG.webp");
	background-color: #22335c;
	background-attachment: fixed;
	background-position: -40vmin -37.5vmin, center;
	background-repeat: no-repeat, repeat;
	background-size: 100vmin, cover;
}

@media (prefers-reduced-motion: no-preference) {
	body {
		animation-name: body-parallax;
		animation-fill-mode: forwards;
		animation-range: 0 300vmin;
		animation-timeline: --scroll-body-parallax;
		animation-timing-function: linear;
	}
}

@keyframes body-parallax {
	from {
		background-position: -40vmin -37.5vmin, center;
	}

	to {
		background-position: -40vmin -100vmin, center;
	}
}

#body-container {
	position: relative;

	display: grid;
	grid-template-columns: 25ch 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	block-size: auto;
	min-block-size: 100vh;
	inline-size: 96ch;
	max-inline-size: 100vw;

	backdrop-filter: blur(1em);
	box-shadow: 0 0 1em black;
}

#body-container > header {
	grid-area: 1 / 1 / 2 / 3;

	padding-block: 1.25rem;
	padding-inline: 1.25rem;

	--text: var(--text-side);
	--accent: var(--text-side);
	color: var(--text-side);
	text-align: center;
	text-shadow: 0 1px 0.25ch black;

	background-color: #060c4322;
}

#body-container > #desktop-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#body-container > header > h1 {
	margin: 0;
}

#body-container > header > h1 img {
	block-size: 2.6rem;
	margin-block: 0;
	margin-inline: 0;

	filter: drop-shadow(0 1px 0.25ch black);
}

#body-container > header > .site-header-fiddlybits {
	font-size: 0.9em;
	letter-spacing: 0.5ch;
	font-variant-numeric: lining-nums;
	text-transform: uppercase;
	text-align: right;
}

.site-header-yearspan {
	word-spacing: 1em;
}

.site-header-slogan {
	font-style: italic;
	word-spacing: 0.5em;
}

#body-container > nav {
	position: sticky;
	inset-block-start: 0;

	display: grid;
	grid-area: 2 / 1 / 3 / 2;
	grid-template-rows: auto 1fr;

	block-size: min(100%, 100vh);

	--text: var(--text-side);
	--accent: var(--text-side);
	color: var(--text-side);
	text-shadow: 0 1px 0.25ch black;
}

#body-container > nav ul {
	margin: 0;
	padding: 0;
}

#body-container > nav li {
	position: relative;

	display: block;

	margin: 0;
	padding: 0;

	transition: box-shadow 0.2s, color 0.2s;
}

#body-container > nav li .pallet {
	z-index: 10;

	display: grid;
	grid-template-columns: 1.2em 1fr;
	gap: 0;
}

#body-container > nav li .pallet:is(:focus, :hover) {
	z-index: 10;

	color: var(--gentle-text-acc);

	box-shadow: 0 0 1ch var(--gentle-acc);
}

#body-container > nav li .square {
	display: inline-block;

	padding-inline: 0;

	color: #000c;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	text-shadow: none;

	background-color: var(--bright-acc);
	border-block: 1px solid var(--bg-side);
	border-inline: none;
}

#body-container > nav li .pallet > :last-child {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding-inline-start: 1ch;

	color: inherit;
	font-variant-caps: small-caps;
	letter-spacing: var(--caps-spacing);
	text-decoration: none !important;

	background-color: var(--darkest-acc);
}

#body-container > nav li .pallet.foreign > :last-child {
	font-style: italic;
	opacity: 0.8;
}

#body-container > nav li[unfolded] > .pallet > :last-child {
	font-weight: bold;
}

#body-container > nav ul ul {
	display: none;

	font-size: 0.9rem;
}

#body-container > nav ul li[unfolded] > ul {
	display: block;
}

#body-container > nav li li .pallet {
	grid-template-columns: 1.7rem 1fr;
}

#body-container > nav li li li .pallet {
	grid-template-columns: 2.2rem 1fr;
}

#body-container > nav li li .square {
	padding-inline-start: 0.5rem;

	background: linear-gradient(to left, var(--bright-acc), var(--darkest-acc));
}

#body-container > nav li li li .square {
	padding-inline-start: 1rem;

	background: linear-gradient(to left, var(--bright-acc), var(--darkest-acc));
}

#body-container > nav li li .pallet:last-child > :last-child {
	font-variant-caps: normal;
	letter-spacing: 0;
}

.pictogram {
	float: inline-end;
	inline-size: 2em;

	color: var(--gentle-acc);
	font-family: "Noto Emoji", var(--sans-serif);
	font-size: 0.9em;
	text-align: center;

	transform: translateY(0.1ch);
}

.pictogram::after {
	content: "\fe0e";
}

.pictogram .flag {
	vertical-align: middle;

	border: 1px solid currentcolor;
}

#body-container > nav > div:nth-child(2) {
	background-color: var(--bg-side);
}

#body-container > article {
	z-index: 60;

	grid-area: 2 / 2 / 3 / 3;

	font-family: var(--serif);

	background-color: var(--bg-art);
}

.article-header {
	font-family: var(--sans-serif);
}

.article-header h1 {
	margin: 0;
	padding-block: 0.5em;

	font-size: 1.75rem;
	line-height: 1;

	background-color: var(--gentle-acc);
}

.subtitle,
.supertitle {
	display: block;

	font-size: 1rem;
	font-style: italic;
	font-weight: normal;
}

.header-marginalia {
	position: relative;

	display: flex;
	justify-content: space-between;

	font-size: 0.9rem;
	font-style: italic;
}

.tag-list {
	display: flex;

	margin: 0;
	padding: 0;
}

.tag-list li {
	display: block;

	margin: 0;
	padding-block: 0.2em;
	padding-inline: 0.8em 1.2em;

	background-color: var(--gentler-acc);
}

.header-marginalia:not(:last-child) .tag-list li {
	background: linear-gradient(
			to right,
			var(--gentler-acc),
			var(--gentler-acc)
		),
		linear-gradient(to right, var(--gentler-acc), var(--gentler-acc));
}

.tag-list li:first-child {
	padding-inline-start: 1em;

	font-weight: bold;

	background: linear-gradient(
		calc(-75deg * var(--direction-factor)),
		var(--gentler-acc) 0.85ch,
		var(--gentle-acc) 0.85ch
	);
}

.header-marginalia:not(:last-child) .tag-list li:first-child {
	background: linear-gradient(
			calc(-75deg * var(--direction-factor)),
			var(--gentler-acc) 0.85ch,
			var(--gentle-acc) 0.85ch
		),
		linear-gradient(
			calc(-75deg * var(--direction-factor)),
			var(--gentler-acc) 0.85ch,
			var(--background) 0.85ch
		);
}

.tag-list li:nth-child(n + 3) {
	padding-inline-start: 0;
}

.tag-list li:last-child {
	background: linear-gradient(
		calc(-75deg * var(--direction-factor)),
		transparent 0.85ch,
		var(--gentler-acc) 0.85ch
	);
}

.header-marginalia:not(:last-child) .tag-list li:last-child {
	background: linear-gradient(
			calc(-75deg * var(--direction-factor)),
			transparent 0.85ch,
			var(--gentler-acc) 0.85ch
		),
		linear-gradient(
			calc(-75deg * var(--direction-factor)),
			transparent 0.85ch,
			var(--gentler-acc) 0.85ch
		);
}

.article-header .timespan {
	padding-block: 0.2em;
	padding-inline: 0.8em 1.2em;

	background: linear-gradient(
		calc(75deg * var(--direction-factor)),
		transparent 0.85ch,
		var(--gentler-acc) 0.85ch
	);
}

.header-marginalia:not(:last-child) .timespan {
	background: linear-gradient(
			calc(75deg * var(--direction-factor)),
			transparent 0.85ch,
			var(--gentler-acc) 0.85ch
		),
		linear-gradient(
			calc(75deg * var(--direction-factor)),
			transparent 0.85ch,
			var(--gentler-acc) 0.85ch
		);
}

figure.hero-image {
	margin-block-start: -1.667em;
}

.hero-image img {
	inline-size: 100%;
	margin-block: 0;
}

.hero-image figcaption {
	padding: 0.333em;

	font-size: 0.9em;
	font-weight: bold;
	text-align: center;

	background-color: var(--gentler-acc);
}

figure + figure,
figure + aside.note + figure {
	margin-block-start: 1em;
}

figure :is(img, audio, video) {
	margin-block: 0;
	max-inline-size: 100%;
}

figure.left {
	float: inline-start;
	inline-size: 25ch;
	max-inline-size: 100%;
	margin-right: 1em;
}

figure.left figcaption,
figure.right figcaption {
	line-height: 1.1;
	font-family: var(--sans-serif);
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	text-align: left;
}

figure.right {
	float: inline-end;
	inline-size: 25ch;
	max-inline-size: 100%;
	margin-left: 1em;
}

figcaption {
	padding: 0.333em;

	font-size: 0.9em;
	font-weight: bold;
	text-align: center;

	background-color: var(--gentler-acc);
}

.dateline {
	display: inline-block;
	padding-inline: 0.6em 0.8em;

	color: var(--text-acc);
	font-family: var(--sans-serif);
	font-style: italic;

	background-image: linear-gradient(
		calc(-75deg * var(--direction-factor)),
		transparent 0.85ch,
		var(--gentler-acc) 0.85ch
	);
}

.infobox {
	float: inline-end;
	inline-size: 35ch;
	max-inline-size: 100%;
	margin-inline-start: 1em;

	font-family: var(--sans-serif);
	font-size: 0.85em;
	line-height: 1.2;
}

.infobox > * {
	background-color: var(--gentlest-acc);
}

.infobox > div {
	padding-block: 0.6ch;
	padding-inline: 1ch;
}

.infobox > :nth-child(odd) {
	background-color: var(--gentler-acc);
}

.infobox ul {
	margin-block: 0;
}

.infobox-head {
	font-style: italic;
	font-weight: bold;
	text-align: center;
}

.infobox-head:first-child {
	font-size: 1rem;
	font-style: normal;
}

.infobox-head small {
	font-weight: normal;
}

main {
	max-inline-size: none;
	margin: none;
	padding-inline: 1.5rem;
	padding-block: 1rem;
}

main > p:first-of-type {
	margin-block-start: 0;
}

blockquote {
	margin-block: 1rem;
	margin-inline: 0;
	padding-inline-start: calc(1.5em + 0.5ch);

	font-size: 0.9em;
	font-style: italic;

	background: linear-gradient(
			90deg,
			transparent 0.5ch,
			var(--background) 0.5ch
		),
		linear-gradient(
			to bottom,
			var(--bright-acc),
			var(--gentle-acc) 60%,
			transparent
		);
}

blockquote.epigraph {
	background: transparent;
	padding-inline-start: 0;
	inline-size: fit-content;
	margin-inline: auto;
	max-inline-size: 60ch;
	font-size: 1em;
	margin-block-start: 0;
}

blockquote.epigraph p {
	font-style: italic;
	margin-block: 0;
	text-align: center;
	text-wrap: balance;
	line-height: 1.2;
}

blockquote.epigraph footer {
	font-size: 0.9em;
	text-align: right;
}

a {
	text-decoration-color: var(--text-art-light);
}

a:hover,
a:focus {
	text-decoration-color: currentColor;
}

a.pallet {
	text-decoration: none;
}

:is(article, #sidenotes) a:not(a[href^="http"], a[href^="//"], a[href^="mailto:"], .header-marginalia a, .note-number, .sidenote-ref)
{
	color: var(--text-acc);
	text-decoration-color: var(--bright-acc);
	text-decoration-style: solid;
}

:is(article, #sidenotes) a:not(a[href^="http"], a[href^="//"], a[href^="mailto:"], .header-marginalia a, h2 a, h3 a, .note-number, .sidenote-ref, .related-pages a):is(:hover, :focus)
{
	text-decoration-color: var(--text-acc);

	background-color: var(--gentler-acc);
}

ul.related-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 1ch;

	padding-inline-start: 0;
}

ul.related-pages > li {
	display: block;

	margin: 0;
}

ul.related-pages > li > a {
	display: block;

	padding-inline: 2ch;

	text-decoration: none;

	background-image: linear-gradient(
		calc(-75deg * var(--direction-factor)),
		transparent 0.85ch,
		var(--gentler-acc) 0.85ch,
		var(--gentler-acc) calc(100% - 0.85ch),
		transparent calc(100% - 0.85ch)
	);
}

ul.related-pages > li > a:hover,
ul.related-pages > li > a:focus {
	font-weight: bold;

	background-color: transparent;
}

article :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--sans-serif);
}

h2 {
	inline-size: fit-content;
	margin-inline-start: -1.5rem;
	padding-block: 0.25rem;
	padding-inline: 2rem;

	background: conic-gradient(
		from calc(15deg * var(--direction-factor)) at top right,
		transparent 50%,
		var(--gentler-acc) 50%
	);

	transition: padding-inline-start 0.2s;
}

h2:hover,
h2:focus {
	padding-inline-start: 2.5rem;
}

h2 a {
	text-decoration: none !important;
}

.table-container {
	scrollbar-color: var(--bright-acc) var(--bg-art);
}

table {
	hyphens: initial;
	line-height: 1.2;
}

.table-container table {
	margin-inline: auto;

	font-size: 0.875rem;
}

.table-container table :is(th, td) {
	padding-inline: 0.667ch;
}

.table-container th {
	background-color: var(--gentler-acc);
}

.table-container tbody tr:nth-child(2n) td {
	background-color: var(--gentlest-acc);
}

.table-container tbody tr th:first-child {
	text-align: end;
}

dt {
	font-weight: normal;
}

dl {
	text-align: justify;
}

.phonetic {
	font-style: italic;
}

.phonetic[title] {
	text-decoration: 1px dotted underline;
}

.phonetic strong {
	font-variant-caps: all-small-caps;
	font-weight: normal;
	letter-spacing: var(--caps-spacing);
}

p.has-drop-cap::first-letter {
	float: inline-start;

	margin: 0.167em 0.083em 0 0;

	color: var(--accent);
	font-size: 3em;
	font-style: normal;
	font-variant-caps: normal;
	font-weight: normal;
	line-height: 0.67;
	text-transform: uppercase;
}

p.has-drop-cap::first-line {
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
	color: var(--accent);
}

aside.note-to-self {
	position: relative;
	margin-block-start: 1.75em;
	padding-block: 0.1ch;
	padding-inline: 1em;

	font-family: var(--sans-serif);
	font-style: italic;

	background-image: linear-gradient(to bottom right, #fe68, #fe80);
	border: 1px solid #e5d498;
}

aside.note-to-self::before {
	content: "Note to self";

	position: absolute;
	inset-block-start: -0.75em;
	inset-inline-start: 0;
	padding-inline: 1em;

	font-style: normal;
	font-variant-caps: small-caps;
	font-weight: bold;

	background-color: #e5d498;
}

#body-container > article > footer {
	padding-block-end: 1rem;
	padding-inline: 1rem;

	font-size: 0.8em;
	font-style: italic;
	text-align: end;
}

#sidenotes {
	z-index: 50;

	filter: drop-shadow(0 0.25em 1em black);
}

sup.note {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	block-size: 1.25em;
	inline-size: 1.25em;
	aspect-ratio: 1 / 1;
	margin-block-start: 0;
	margin-inline: 0.5ch 0;
	padding-block: 0.15ch 0;
	padding-inline: 0;

	color: var(--bg-art);
	font-size: 0.7rem;
	font-variant-numeric: lining-nums;
	font-weight: bold;
	vertical-align: bottom;

	background: var(--bright-acc);
	border-block-end: none;
}

aside.note {
	display: grid;
	grid-template-columns: 1.75em 1fr;

	padding-block-end: 0;

	background: linear-gradient(
			45deg,
			transparent calc(1.75em / 1.5),
			var(--gentler-acc) calc(1.75em / 1.5)
		),
		linear-gradient(
			45deg,
			transparent calc(1.75em / 1.5),
			var(--bg-art) calc(1.75em / 1.5)
		);
}

aside.note > div {
	padding-block: 0.5em;
	padding-inline: 0.75em;

	font-family: var(--serif);

	background-color: var(--bg-art);
	scrollbar-color: var(--bright-acc) var(--bg-art);
}

sup.note,
.note-number {
	font-family: var(--sans-serif);
}

.note-number {
	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 1 / 1;
	margin-block-start: 0;
	margin-inline: 0;
	padding: 0;

	color: var(--text-side);
	font-variant-numeric: lining-nums;
	font-weight: bold;

	background-color: var(--bright-acc);
	border-block-end: none;
}

article .note-number {
	margin-block-start: 0;
}

article aside.note {
	grid-template-columns: 1.5em 1fr;

	margin-inline-start: 0;
	margin-block: 1rem;

	background: var(--gentler-acc);
}

article aside.note > div {
	padding-block: 0;
}

aside.note p,
aside.note blockquote,
aside.note img {
	text-align: justify;
}

#cc0-notice {
	text-align: center;
}

#front-page-memoriam {
	font-family: var(--sans-serif);
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
}

#body-container > #mobile-header {
	display: none;
}

@media only screen and (max-width: 900px) {
	body {
		background-image: url("/latbs/latbsBG_lorez.webp");
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
	}

	#body-container {
		display: block;

		backdrop-filter: none;
	}

	#body-container > #desktop-header {
		display: none;
	}

	#body-container > #mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding-block: 0.5rem;
		padding-inline: 1rem;

		backdrop-filter: blur(1em);
	}

	#body-container > #mobile-header > h1 {
		max-inline-size: 60%;
	}

	#body-container > #mobile-header > h1 img {
		block-size: auto;
		max-block-size: 2rem;
		max-inline-size: 100%;
	}

	.menu-button {
		inset-block-start: 16px;
		padding-block: 0.2rem;
		padding-inline: 0.5rem;

		text-decoration: none;

		backdrop-filter: blur(0.25ch);
		background-color: #fff4;
	}

	#body-container > nav > :not(:last-child) {
		backdrop-filter: blur(1em);
	}

	#body-container > nav {
		position: fixed;
		inset-inline-start: -30ch;
		z-index: 200;

		grid-template-columns: min(25ch, 80%) 1fr;

		inline-size: 100vw;

		background: linear-gradient(
			to right,
			#0004 25ch,
			#0008 25ch,
			#0004 26ch,
			transparent 28ch
		);

		pointer-events: none;
		transition: left 0.2s;
	}

	#body-container > nav > a {
		display: block;

		grid-area: 1 / 2 / 3 / 3;

		block-size: 100%;
		inline-size: 100%;
	}

	#body-container > nav:target {
		inset-inline-start: 0;
		pointer-events: unset;
	}

	.tag-list li:not(:first-child) {
		display: none;
	}

	.header-marginalia:not(:last-child) .tag-list li:first-child {
		background: linear-gradient(
				calc(-75deg * var(--direction-factor)),
				transparent 0.85ch,
				var(--gentle-acc) 0.85ch
			),
			linear-gradient(
				calc(-75deg * var(--direction-factor)),
				transparent 0.85ch,
				var(--background) 0.85ch
			);
	}

	.tag-list li:first-child {
		background: linear-gradient(
			calc(-75deg * var(--direction-factor)),
			transparent 0.85ch,
			var(--gentle-acc) 0.85ch
		);
	}
}

@media only screen and (max-width: 800px) {
	aside.note {
		padding-block: 0;
	}
}

@media only screen and (max-width: 680px) {
	.infobox {
		float: none;
		inline-size: 100%;
		margin-block-end: 1rem;
		margin-inline-start: 0;
	}
}

@font-face {
	font-family: "Noto Emoji";
	font-style: regular;
	font-weight: regular;
	src: local(""), url("/fonts/NotoEmoji-Regular-subset.woff2") format("woff2");
	font-display: fallback;
}