/* Self-hosted fonts (no third-party request, works offline). These are the
   variable-font woff2 files Google Fonts serves; a single file spans the whole
   weight range, so each @font-face declares font-weight: 400 700. Latin and
   latin-ext subsets are split so accented names still render if added later. */
@font-face {
	font-family: "Work Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("./fonts/work-sans-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Work Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("./fonts/work-sans-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("./fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--border-colour: #d7d7d7;
	--card-bg: #fafafa;
	--accent: #c8102e; /* Thunder Bay flag red */
	--muted: #666;

	--font-sans:
		"Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
		monospace;

	font-size: 1rem;
	font-family: var(--font-sans);
	line-height: 1.6;
}

body {
	padding: 1rem;
	text-wrap: balance;
	-webkit-font-smoothing: antialiased;
}

:focus {
	outline-width: 3px;
}

@keyframes move-bg {
	from {
		background-position: 0% 0%;
	}
	to {
		background-position: 200% 0%;
	}
}

a {
	text-decoration: none;
	position: relative;
}

a:hover {
	text-decoration: none;
}

a::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.3em;
	background-size: 0.4em;
	background-repeat: repeat-x;
	animation: move-bg 30s linear infinite;
}

a:hover::after {
	background-image: url("./img/underline.svg");
}

h1,
h2,
h3 {
	font-weight: 700;
	line-height: 1.2;
	margin-block-end: 0.4em;
}

h1 {
	font-family: var(--font-mono);
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-inline-start: -0.05em;
	/* The h1 is the first element on the page, so any top margin here adds to the
	   body padding to set the space above the title. The body padding alone is the
	   intended frame, so this heading contributes no top margin of its own. */
	margin-block-start: 0;
	line-height: 1;
}

p + ul,
p + ol {
	margin-block-start: -0.5em;
}

li + li {
	margin-block-start: 0.25em;
}

.flag {
	display: inline-block;
	width: 1.15em;
	height: auto;
	aspect-ratio: 2 / 1;
	vertical-align: -0.1em;
}

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

.input-group {
	margin-block-end: 1.5em;
}

input {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0.5rem 1rem;
	display: block;
	width: 100%;
	border: 1px solid var(--border-colour);
}

input[type="search"] {
	background-image: url("./img/search.svg");
	background-repeat: no-repeat;
	background-position: left 0.5rem center;
	background-size: 1.5em;
	padding-inline-start: 2.5rem;
}

.container {
	max-width: 60rem;
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.list-inline {
	list-style: none;
	padding-inline-start: 0;
}
.list-inline li {
	display: inline-block;
	margin-inline-end: 0.75em;
}
.list-inline li:last-child {
	margin-inline-end: 0;
}
.muted,
a.muted,
.muted a {
	color: #666;
}

.mt-4 {
	margin-block-start: 4em;
}

.my-4 {
	margin-block-start: 4em;
	margin-block-end: 4em;
}

/* Sites are laid out as a responsive tile grid (inspired by jimclifford.ca's
   project tiles) rather than a flat list. It's still a <ul> semantically so the
   shuffle + search scripts can treat each tile as a list item. */
#sites {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.2rem;
	background-color: var(--card-bg);
	border: 1px solid var(--border-colour);
	border-radius: 0.25rem;
	transition:
		border-color 150ms ease,
		transform 150ms ease,
		box-shadow 150ms ease;
}

.card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* The domain is the techy focal point: monospace, and flag-marked. */
.card__link {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	word-break: break-word;
}

.card__link:before {
	content: "" / "Thunder Bay flag";
	width: 1.4em;
	height: 0.7em;
	display: inline-block;
	vertical-align: middle;
	background-image: url("./img/flag_tbay.webp");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-inline-end: 0.5em;
}

.card__desc {
	margin: 0;
	font-size: 0.9rem;
	color: #333;
	flex-grow: 1;
}

.card__author {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}

/* Small terminal-style field label in front of the creator's name. */
.card__label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.author {
	font-size: 0.8em;
	color: var(--muted);
}

details {
	border: 1px solid transparent;
	border-width: 1px 0 0 1px;
	padding: 1rem 0;
	font-size: 0.9rem;
	interpolate-size: allow-keywords;
	transition: padding 200ms ease;
}

details::details-content {
	block-size: 0;
	transition: content-visibility, block-size;
	transition-duration: 200ms;
	transition-behavior: allow-discrete;
	overflow: hidden;
}

details[open] {
	padding: 1rem;
	border-color: var(--border-colour);
}

details[open]::details-content {
	block-size: auto;
}

summary {
	font-size: 1.17em;
	font-weight: 700;
	cursor: pointer;
}

pre {
	font-size: 0.9em;
	background-color: #ddd;
	padding: 0.25em 0.5em;
	margin: 0;
	border-radius: 0.125em;
	word-wrap: break-word;
	word-break: break-all;
}

footer p,
footer ul {
	font-size: 0.7em;
}

@media (min-width: 600px) {
	:root {
		font-size: 1.0625rem;
	}

	h1 {
		font-size: 2.75rem;
	}
}

@media (min-width: 1200px) {
	body {
		margin: 1rem;
		padding: 3rem;
		border: 1px solid var(--border-colour);
		border-width: 1px 0 0 1px;
	}

	h1 {
		font-size: 3.5rem;
	}

	.lede {
		font-size: 1.15em;
	}
}

@media (prefers-reduced-motion) {
	a:hover::after {
		animation-play-state: paused;
	}

	details,
	details::details-content {
		transition: none;
	}
}