:focus-visible {
	border-bottom: 0;
	outline-color: var(--brand);
}

::selection,
::target-text {
	background: light-dark(#000, var(--brand));
	color: light-dark(#fff, #000);
}

html,
header,
h1,
h2,
h3,
h4,
h5,
h6,
th {
	font-weight: 400;
}

html,
h5,
h6 {
	line-height: 2;
}

html {
	--border: light-dark(#bbb, #777);
	--brand: light-dark(#e71d36, #fe5d72);
	/* Leading values used for leading reference, not for actual leading: */
	--leading: 2rem;
	--leading-half: 1rem;
	--leading-half-negative: -1rem;
	/* --leading-negative: -2rem; */
	accent-color: var(--brand);
	background: light-dark(#fff, #000);
	color: light-dark(#444, #ddd);
	color-scheme: light dark;
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	margin: auto;
	max-width: 73ch;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	text-wrap: pretty;
	zoom: 1.1;
}

body,
header,
header :is(h1, ul),
footer :is(p, ul),
p:has(#time),
details p:first-of-type {
	margin: 0;
}

body {
	padding: 1rem 1rem var(--leading);
}

header,
header ul {
	display: flex;
}

header,
footer ul,
p#status,
div.note em,
ul#tags :is(a[href$='/topics/accessibility/'], a[href$='/topics/ai/'], a[href$='/topics/career/'], a[href$='/topics/css/'], a[href$='/topics/design/'], a[href$='/topics/dxsrc/'], a[href$='/topics/frontend-dogma/'], a[href$='/topics/guest-posts/'], a[href$='/topics/history/'], a[href$='/topics/html/'], a[href$='/topics/javascript/'], a[href$='/topics/legal/'], a[href$='/topics/performance/'], a[href$='/topics/security/'], a[href$='/topics/sustainability/'], a[href$='/topics/testing/'], a[href$='/topics/user-experience/']),
form + p em:only-child,
table#entries tr:nth-child(even) td:has(a):first-child::before,
th,
a[href='https://j9t.gumroad.com/l/fd'] em {
	color: var(--brand) !important;
}

header {
	align-items: center;
}

/* Same as `a`; merge once `:is()` and `:has()` have 99% support */
header:is(:hover, :has(a:focus)) ul li:last-child a {
	color: light-dark(#222, #eee);
}

header nav img,
main, /* for time element (`p:has(#time)`) */
div.note,
span.extra {
	position: relative;
}

header nav img {
	bottom: -2px;
	height: 1em;
	width: 1em;
}

header h1,
input,
button {
	font-size: inherit;
}

header h1 {
	line-height: inherit;
	margin-right: .65rem;
}

header h1 img,
div.feature :is(img, a) {
	display: block;
}

header ul,
h2[id] + ol, /* for TOC on tools page */
ul#tags {
	list-style: none;
}

header ul {
	flex-wrap: wrap;
	max-width: 56ch;
}

header ul li {
	padding: 0 .5rem;
}

header ul li:last-child a {
	color: #999;
}

header a {
	border-bottom: 0;
}

header a:is(:focus, :hover, :active) {
	color: var(--brand) !important;
}

footer,
p#meta,
details,
:is(ul#tags, table#entries) a:visited,
table#entries tr:nth-child(odd) td:last-child {
	color: light-dark(#666, #bbb);
}

footer ul li,
h2[id] + ol li,
ul.nav li:not(:last-child),
ul#tags li:not(:last-child) {
	padding-right: 1rem;
}

footer {
	clear: both;
	margin-top: var(--leading);
}

footer ul li,
h2[id] + ol li,
ul.nav li,
span.extra {
	display: inline-block;
}

main {
	border-top: 1px solid;
	margin-top: .75rem;
	padding-top: 3px;
}

p,
blockquote,
h2[id] + ol,
form,
table {
	margin: var(--leading-half) 0;
}

p#meta,
details {
	margin: .1rem 0 var(--leading-half);
}

p#meta ~ p img {
	margin: auto;
	display: block;
}

p#meta ~ table,
p:has(#time),
div.note {
	font-size: .875rem;
	line-height: 1.75rem;
}

p#meta ~ table {
	hyphens: auto;
	table-layout: fixed;
	width: 100%;
}

p#meta ~ table td {
	white-space: normal !important;
}

p:has(img),
sup,
sub {
	line-height: 1;
}

p:has(#time) {
	line-height: 1.29;
	position: absolute;
	right: 0;
	text-align: right;
	top: 1px;
}

pre,
h5,
h6 {
	font-size: 1rem;
}

pre,
table#entries tbody tr:nth-child(4n+1),
table#entries tbody tr:nth-child(4n+2) {
	background: light-dark(#f7f7f7, #141414);
}

pre,
code,
var,
kbd {
	font-family: ui-monospace, monospace;
	font-size-adjust: .45;
}

pre {
	margin: -1px -3px;
	overflow: auto;
	padding: 1px 3px;
	white-space: pre-wrap;
}

pre + pre {
	margin-top: calc(1rem - 1px);
}

blockquote {
	border-left: 1px solid var(--border);
	padding-left: calc(var(--leading-half) - 1px);
}

summary,
label,
input[type='submit'],
button {
	cursor: pointer;
}

div.note,
div.promo,
div.feature img {
	border: 1px solid var(--border);
}

div.note,
div.promo {
	border-radius: 3px;
	padding: 3px 6px;
}

div.note,
div.feature {
	float: right;
}

div.note,
h2,
ul.nav,
ul#tags,
table#entries {
	clear: right;
}

div.note {
	margin: 1.25rem 0 1rem 1.25rem;
	max-width: max(25%, 140px);
	top: -4px;
}

div.note + div.note {
	margin-top: 0;
}

div.note em {
	font-style: inherit;
}

div.promo {
	margin: calc(var(--leading-half) - 4px) 0;
}

div.promo + div.promo,
h2 + div.feature {
	margin-top: var(--leading-half);
}

div.feature {
	padding: 0 0 1rem 1.25rem;
	max-width: max(20%, 105px);
}

div.feature img {
	line-height: 0;
	padding: 1px;
	width: calc(100% - 4px);
}

div.feature a {
	border: 0;
}

:is(h1, h2, h3, h4, h5, h6) *,
pre code,
table#entries cite {
	font-style: normal;
}

h1 {
	font-size: 1.6875rem;
	line-height: 1.481;
	margin: 1.5rem 0 0;
}

h2,
h3,
h4 {
	margin: var(--leading) 0 0;
}

h2,
h4 {
	line-height: 1.5;
}

h2 {
	font-size: 1.5rem;
	margin-top: 2rem;
}

h3 {
	font-size: 1.3125rem;
	line-height: 1.4286;
}

h4 {
	font-size: 1.25rem;
}

h5,
h6 {
	font-size: 1.125rem;
	line-height: 1.67;
	margin: var(--leading) 0 var(--leading-half-negative);
}

ul,
ol,
tr:has(td:empty) td {
	padding: 0;
}

ul,
ol {
	margin: var(--leading-half) 0 var(--leading-half) var(--leading);
}

ul.nav {
	margin: var(--leading) 0;
}

ul.nav li,
table:not(#entries) td:first-child,
table#entries tr:nth-child(odd) td:not(:first-child) {
	white-space: nowrap;
}

/* @@ Merge [previously second selector for the respective rule] once `:has()` has 99% support */
ul.nav li:not(:has(a + a)) {
	color: var(--brand);
}

/* @@ Switch to other styling to de-complicate approach—or change focus style */
ul#tags {
	margin-inline: -3px;
	/* margin-left: 0; */
	overflow: auto;
	padding: 0 3px;
}

ul#tags li {
	float: left;
}

ul ul {
	margin-block: 0;
}

main img {
	max-width: 100%;
}

form p label {
	display: inline;
}

form + p em:only-child {
	overflow-wrap: anywhere;
}

input,
button {
	font-family: inherit;
}

input {
	padding: 2px;
}

button {
	padding: 2px 6px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table:not(#entries) :is(th, td) {
	border-right: 1px solid var(--border);
	padding: 0 calc(var(--leading-half) - 1px);
}

table:not(#entries) :is(th, td):first-child {
	padding-left: 0;
}

table:not(#entries) :is(th, td):last-child {
	border-right: 0;
	padding-right: 0;
}

/* table#entries tr:nth-child(even):not(:empty) td:has(a):first-child::before {
	content: '+ ';
} */

table#entries :is(th, td):not(:last-child) {
	padding-right: 1ch;
}

table#entries td:has(cite) {
	width: 100%;
}

table#entries td :is(a[href^='http'], a[href^='/posts/']):first-child,
strong,
b {
	font-weight: 600;
}

table#entries a[href^='/topics/'] {
	color: inherit;
}

th {
	text-align: left;
	vertical-align: bottom;
}

td {
	vertical-align: top;
}

a,
ins {
	text-decoration: none;
}

a:not(:has(img)) {
	border-bottom: 1px solid var(--border);
	color: light-dark(#222, #eee);
}

a:is(:focus, :hover, :active) {
	border-color: var(--brand);
}

del {
	text-decoration-thickness: 1px;
}

code {
	font-size: 1em !important;
	line-height: inherit !important;
	overflow-wrap: break-word;
}

span.extra {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: loader;
	animation-timing-function: linear;
	border: 1px solid;
	border-bottom-color: transparent;
	border-radius: 50%;
	border-right-color: transparent;
	bottom: -3px;
	height: 16px;
	width: 16px;
	transition: all .5s ease-in;
}

span.extra-result {
	animation: none;
	border: 0;
	display: inline;
	height: auto;
	position: static;
	width: auto;
}

/* AWAGAM (3) */

div#awagam {
	border: 1px solid var(--border);
	border-radius: 3px;
	font-size: .875rem;
	line-height: 1.75rem;
	margin: 0 0 1.25rem;
	overflow: auto;
	padding: 3px 6px;
}

div#awagam em:first-child {
	color: var(--brand);
}

div#awagam span {
	float: right;
	padding-left: 1ch;
}

@keyframes loader {

	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}

}

@view-transition {
	navigation: auto;
}

@media screen and (max-width: 550px) {

	body {
		padding-top: 1rem;
	}

	table#entries tr:nth-child(odd) td:not(:first-child) {
		white-space: normal;
	}

}

@media screen and (max-width: 460px) {

	header ul li:last-child, /* Hide “The End” link */
	header ul li:nth-child(5), /* Hide Site Check link */
	div#awagam {
		display: none;
	}

}

@media screen and (max-width: 400px) {

	/* Hide glossary link */
	header ul li:nth-child(6) {
		display: none;
	}

}

@media (prefers-color-scheme: dark) {

	header img {
		filter: invert(1);
	}

}

@media print {

	*,
	::marker {
		color: #000 !important;
		filter: none !important;
	}

	header ul,
	footer,
	p:has(#time),
	details,
	div.note,
	div#awagam,
	h2[id] + ol,
	ul.nav {
		display: none;
	}

	main {
		border: 0;
	}

}