/* Braggarr's built-in blog theme. A starting point: the look is designed with the owner later. Override any custom property
   in static/custom.css, or set `accent` in braggarr.yml. */
:root {
	--accent: #d9480f;
	--bg: #fdfcfb;
	--fg: #1f1d1b;
	--muted: #6b6560;
	--rule: #e8e4df;
	--code-bg: #f3f0ec;
	--measure: 42rem;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #161514;
		--fg: #ece8e3;
		--muted: #a39d96;
		--rule: #2c2a28;
		--code-bg: #211f1d;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0 auto;
	max-width: var(--measure);
	padding: 0 1rem;
	background: var(--bg);
	color: var(--fg);
	font: 1.0625rem/1.65 var(--sans);
}

a { color: var(--accent); text-underline-offset: 0.15em; }

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--rule);
}

.site-title { color: var(--fg); font-weight: 700; font-size: 1.25rem; text-decoration: none; }

.site-header ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }

main { padding: 1.5rem 0 3rem; }

h1, h2, h3 { line-height: 1.25; }

h1 { font-size: 2rem; margin: 0 0 0.5rem; }

.anchor { margin-left: 0.4em; color: var(--muted); text-decoration: none; opacity: 0; }

:is(h2, h3, h4):hover .anchor, .anchor:focus { opacity: 1; }

.meta { color: var(--muted); font-size: 0.9rem; margin: 0; }

.draft {
	margin-left: 0.5em;
	padding: 0 0.4em;
	border: 1px solid var(--accent);
	border-radius: 0.25em;
	color: var(--accent);
	font-size: 0.8rem;
	text-transform: uppercase;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }

.card { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }

.card h2 { margin: 0 0 0.25rem; font-size: 1.35rem; }

.card h2 a { color: var(--fg); text-decoration: none; }

.card h2 a:hover { color: var(--accent); }

.card p:last-child { margin-bottom: 0; }

.intro { color: var(--muted); }

.cover, .e-content img, .page img { max-width: 100%; height: auto; border-radius: 0.375rem; }

.cover { margin: 1.5rem 0 0; }

pre, code { font-family: var(--mono); font-size: 0.9em; }

code { padding: 0.1em 0.3em; border-radius: 0.25em; background: var(--code-bg); }

pre { overflow-x: auto; padding: 1rem; border-radius: 0.375rem; background: var(--code-bg); line-height: 1.45; }

pre code { padding: 0; background: none; }

blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }

table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }

th, td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: left; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.author { display: flex; gap: 1rem; align-items: flex-start; margin: 2.5rem 0 0; padding: 1.25rem 0; border-top: 1px solid var(--rule); }

.avatar { flex: none; border-radius: 50%; object-fit: cover; }

.author p { margin: 0; }

.author-name { font-weight: 700; }

.author-bio { color: var(--muted); }

.profiles { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; }

.pager [rel="next"]:only-child { margin-left: auto; }

.comments { margin: 2.5rem 0 0; }

.year ul { padding: 0; list-style: none; }

.year time { display: inline-block; min-width: 4rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.site-footer { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; }

@media (prefers-reduced-motion: no-preference) {
	.anchor { transition: opacity 0.15s; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.project-group { margin: 2.5rem 0 0; }

.project-group h2 { margin: 0 0 0.25rem; }

.group-description { margin: 0 0 1rem; color: var(--muted); }

.project-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }

.project { padding: 1rem 0; border-top: 1px solid var(--rule); }

.project-image img { display: block; width: 100%; aspect-ratio: 1200 / 630; margin: 0 0 0.75rem; border-radius: 0.375rem; object-fit: cover; background: var(--code-bg); }

.project h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.15rem; }

.project-icon { flex: none; border-radius: 0.375rem; object-fit: contain; }

.author-section .author { margin: 0 0 1.5rem; padding: 0; border-top: 0; align-items: center; }

.author-section .avatar { width: 96px; height: 96px; border-radius: 50%; }

/* Where there is room, the author stands to the right and the page's text runs beside it. */
@media (min-width: 40rem) {
	.author-section { float: right; width: 11rem; margin: 0 0 1rem 1.5rem; }

	.author-section .author { flex-direction: column; align-items: center; gap: 0.5rem; margin: 0; text-align: center; }

	.author-section .avatar { width: 128px; height: 128px; }

	.projects { clear: right; }
}

.project h3 a { color: var(--fg); text-decoration: none; }

.project h3 a:hover { color: var(--accent); }

.project p { margin: 0.25rem 0 0; }

.project-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--muted); font-size: 0.9rem; }

.project-meta [hidden] { display: none; }

.project-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }

.project-posts { font-size: 0.9rem; color: var(--muted); }