:root {
	--bg: #ffffff;
	--text: #111111;
	--muted: #555555;
	--accent: #1a73e8;
	--border: #111111;
	--maxw: 750px;
	--radius: 12px;
	--pad: 1rem;
}

/* @media (prefers-color-scheme: dark) { */
/* 	:root { --bg:#0b0c0f; --text:#e8e8ea; --muted:#9aa0a6; --accent:#8ab4f8; --border:#2a2e35; } */
/* } */

* { box-sizing: border-box; }
html { color-scheme: light ; scroll-behavior:smooth; }
body {
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	font-size: 0.8rem;
	background: var(--bg);
	color: var(--text);
	line-height:1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--pad) 4rem; }

header { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid var(--border); }
header .nav { display:flex; align-items:center; gap:1rem; max-width:var(--maxw); margin:0 auto; padding: .75rem var(--pad); }
header a { text-decoration:none; color: var(--text); opacity:0.9; }
header a:hover, header a:focus { color: var(--accent); opacity:1; }
.name { font-weight:600; margin-right:auto; }

main { margin-top: 1.5rem; }
section { padding: 3rem 0 0; scroll-margin-top: 72px; }
h1,h2,h3 { line-height:1.2; margin:0 0 .5rem; }
h1 { font-size: clamp(1em, 1vw + 1em, 1em); }
h2 { font-size: clamp(1em, 1vw + 1em, 1em); margin-bottom:.75rem; }
h3_old { font-size: clamp(1em, 1vw + 1em, 1em); margin-bottom:.75rem; }
h3 { font-size: 1em; margin-bottom:.75rem; }
p { margin: .5rem 0; }
a { color: var(--accent); }
.tag { display:inline-block; font-size:.85rem; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; color: var(--muted); }

bold {font-weight: bold}

.card { 
	padding-top:.5rem; 
	padding-bottom:.5rem; 
}

.inline-list { display:flex; flex-wrap:wrap; gap:.5rem 1rem; padding:0; margin:0; list-style:none;  overflow:hidden; }
.btn { display:inline-block; padding:.01rem .15rem; border:1px solid var(--border); border-radius: .5rem; text-decoration:none; }
.btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.grid-2 { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 800px){ .grid-2 { grid-template-columns: 1fr 2fr; } }
small, .muted { color: var(--muted); }
hr { border:0; border-top:1px solid var(--border); margin:1rem 0; }

.with-margin {
	margin-bottom: 20px; /* Adds 20px of space below the element */
	margin-top: 20px; /* Adds 20px of space below the element */
}

.pub { 
	grid-template-columns: 1fr auto; 
	gap:.4rem 1rem; 
	align-items:start; 
	margin:0 0 .75rem
}
.pub h3 { margin:0; }
.pub .links a { margin-left:.75rem; white-space:nowrap; }
details summary { cursor:pointer; list-style:none; }
details summary::-webkit-details-marker { display:none; }
summary { color: var(--accent); }

footer { margin-top:3rem; border-top:1px solid var(--border); padding-top:1rem; }

.avatar { height:300px; border-radius:0; object-fit:cover; }
.hero { display:flex; gap:1rem; align-items:center; }
@media (max-width: 480px){ .hero { flex-direction:column; align-items:flex-start; } }

.card + .card {
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

@media print{
	header, .btn, nav, .inline-list { display:none !important; }
	a { color: inherit; text-decoration: underline; }
	section { break-inside: avoid; }
}

.toggle {
	cursor: pointer;
	color: var(--accent);
	text-decoration: underline;
}

.hidden {
	display: none;
	margin-top: 10px;
}