:root {
	--primary: #074ad2;
	--primary-light: #c3d4fa;
	--gutter: 1rem;
	--rhythm: 2em;
	--shadow-hsl: 0deg 0% 75%;
}
@media (min-width: 37.5em) { /* 600px */
	:root {
		--rhythm: 4em;
	}
}
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}
html {
	font-family: system-ui, sans-serif;
	margin: 0 auto;
}
body {
	display: grid;
	grid-template-columns: auto var(--gutter) 1fr var(--gutter) auto;
	overflow-y: scroll;
}
body > * {
	grid-column-start: 3;
	width: 100%;
	max-width: 50em; /* 800px /16 */
	margin: 0 auto;
}
header {
	background-color: var(--primary);
	color: #fff;
	grid-column: 1/6;
	max-width: 100%;
	margin: auto auto var(--rhythm);
}
details {
	padding: .5em;
	background-color: var(--primary-light);
	border-radius: .5em;
	width: min-content;
}
details[open] {
	min-width: 18em;
}
@media (max-width: 37.4375em) {
	details[open] {
		width: auto;
	}
}

details summary {
	white-space: nowrap;
	padding: 0 .25em;
}
.callout {
	display: block;
	padding: 1em;
	border: .1em solid var(--primary);
	background-color: var(--primary-light);
	border-radius: .5em;
	margin-bottom: var(--rhythm);
}

:link,
:visited {
	color: var(--primary);
}
h1, h2, h3, h4, h5 {
	font-family: Poppins, system-ui, sans-serif;
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}

.sr-only {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.title {
	text-align: right;
	font-size: clamp(1.8em, calc(6vw + 1em), 5em);
	text-transform: uppercase;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -.05em;
	padding: 1em var(--gutter);
	max-width: 50rem; /* 800px /16 */
	margin: 0 auto;
}
.title u {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .4);
}
.title a[href],
.title a[href]:visited {
	color: #fff;
	text-decoration: none;
}

dl {
	display: grid;
	gap: 1em clamp(2em, 3vw, var(--rhythm));
}
@media (min-width: 37.5em) { /* 600px */
	dl {
		grid-template-columns: 40% auto;
	}
}
dl {
	margin: var(--rhythm) 0;
}
dt {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
dd {
	margin: 0 0 var(--rhythm);
}
@media (min-width: 37.5em) { /* 600px */
	dd {
		margin: var(--rhythm) 0;
	}
}

browser-window {
	display: block;
	font-size: 0.875em; /* 14px /16 */
}
browser-window[mode="dark"] {
	--bw-border: none;
}

.site-link {
	font-family: Poppins, system-ui, sans-serif;
	display: grid;
	grid-template-columns: 1em auto;
	gap: .25em;
	align-items: flex-start;
	font-size: 1.5em;
	font-weight: 500;
	text-wrap: balance;
}
.favicon {
	vertical-align: text-bottom;
}
.favicon,
.site-favicon {
	width: 1em;
	height: auto;
	border-radius: .25em;
	margin-right: .2em;
}
.site-favicon {
	margin-top: .2em;
}
@supports (object-fit: contain) {
	.favicon,
	.site-favicon {
		width: 1em;
		height: 1em;
		object-fit: contain;
	}
}
.site-screenshot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 800/420;
	overflow: hidden;
	object-fit: cover;
	object-position: top;
}
@media (min-width: 37.5em) { /* 600px */
	.site-screenshot--skew browser-window {
		transform: skewX(-4deg);
		perspective-origin: 25% 75%;
	}
}
.site-screenshot:hover,
.site-screenshot:focus {
	opacity: .95;
}
browser-window:hover {
	--bw-shadow-hsl: 220.2deg 93.55% 42.55%;
	box-shadow: 0 0 0 .25em var(--primary);
	border-radius: .5em;
}
dt:has(.site-link:hover) + dd browser-window {
	--bw-shadow-hsl: 220.2deg 93.55% 42.55%;
	box-shadow: 0 0 0 .25em var(--primary);
	border-radius: .5em;
}
dt:has(.site-link:hover) + dd .site-screenshot {
	opacity: .95;
}
.site-metadata {
	margin: 0;
	margin-top: .25em;
	margin-left: 1.875em;
}

@media (min-width: 37.5em) { /* 600px */
	.site-promo {
		grid-column: 1/3;
		margin-left: -1em;
		margin-right: -1em;
	}
}
.site-promo-link {
	display: flex;
	align-items: center;
	gap: 2em;
	flex-wrap: wrap;
	font-size: 0.9375em; /* 15px /16 */
	margin-bottom: calc(2 * var(--rhythm));
}
.site-promo-link:hover .site-screenshot,
.site-promo-link:focus .site-screenshot {
	border-color: currentColor;
}
@media (min-width: 37.5em) { /* 600px */
	.site-promo-link :first-child {
		flex-basis: 65%;
	}
	.site-promo-link :last-child {
		flex-basis: calc(35% - 2em);
	}
}

/* Lite-YouTube */
lite-youtube[videoid] {
	max-width: 100%;
}

/* CloudCannon specific */
.cc-editor-link {
	display: none;
}
.cms-editor-active .cc-editor-link {
	display: inline;
	outline: 2px solid var(--color-sol);
}
.cms-editor-active .cc-editor-link:hover,
.cms-editor-active .cc-editor-link:focus {
	outline: 2px solid var(--color-cc-blue);
}

/* Filter container */
filter-container form {
	margin: 1em 0;
	line-height: 2;
}
@media (min-width: 37.5em) and (min-height: 50em) {
	filter-container form {
		position: sticky;
		top: 1em;
		z-index: 1;
	}
}
filter-container label {
	display: block;
}
filter-container:not(:defined) form {
	visibility: hidden;
}

.filter-tags--hide {
  display: none;
}
filter-container:has(.filter-tags--hide) .site-promo {
	display: none;
}