/* sarviin.com — layout inspired by Daring Fireball, written from scratch. */

:root {
	--bg: #4a525a;
	--bg-raised: #525a62;
	--bg-hover: #606870;
	--text: #fff;
	--text-soft: #ccc;
	--link: #ddd;
	--rule: #777;
	--sidebar-text: #aaa;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, system-ui, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.8em;
	color: var(--text);
	background-color: var(--bg);
	-webkit-text-size-adjust: 100%;
}

/* ---------- Links ---------- */

a { text-decoration: none; }

a:link,
a:visited {
	color: var(--link);
	border-bottom: 1px solid #888;
	padding: 3px 0 2px;
}
a:visited { border-bottom-style: dotted; }

a:hover {
	color: #fff;
	background-color: var(--bg-hover);
	border-color: var(--bg-hover);
}

/* ---------- Layout ---------- */

#Box {
	max-width: 760px;
	margin: 0 auto;
	padding: 60px 16px 80px;
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-template-areas: "sidebar main";
	column-gap: 50px;
}

/* ---------- Sidebar ---------- */

#Sidebar {
	grid-area: sidebar;
	font-size: 11px;
	color: var(--sidebar-text);
	text-align: right;
}

#Sidebar p { margin: 0 0 1.4em; }

#Sidebar strong {
	color: #ccc;
	font-weight: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#Sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Sidebar li { margin: 0 0 .35em; }

#Sidebar a:link,
#Sidebar a:visited {
	color: var(--sidebar-text);
	border: 0;
}
#Sidebar a:hover { color: #fff; }
#Sidebar a[aria-current="page"] { color: #fff; }
#Sidebar a[rel="author"]:hover { background: none; }

/* ---------- About ---------- */

.about h3 {
	margin: 2.4em 0 .2em;
	color: #fff;
}
.about h2 + h3 { margin-top: 1.2em; }

.role-meta {
	font-size: .9em;
	color: #aaa;
	margin: 0 0 1em;
}

.about em {
	font-style: normal;
	color: #aaa;
}

.empty { color: #aaa; }

/* ---------- Main column ---------- */

#Main {
	grid-area: main;
	min-width: 0;
}

p { margin: 0 0 1.6em; }

h1 {
	font-family: "Gill Sans", "Gill Sans MT", Georgia, serif;
	font-size: 1.55em;
	line-height: 1.3em;
	font-weight: normal;
	margin: 0 0 1.25em;
}

h2, h3, .dateline {
	font-family: "Gill Sans", "Gill Sans MT", Verdana, sans-serif;
	font-weight: normal;
	letter-spacing: .2em;
	text-transform: uppercase;
}

h2 { font-size: 1.05em; margin: 3em 0 1em; }
h3 { font-size: .91em; margin: 3em 0 1.4em; }

strong {
	font-weight: normal;
	font-size: .91em;
	letter-spacing: .2em;
	text-transform: uppercase;
}

blockquote {
	margin: 2em 0 2em .25em;
	padding: 0 0 0 1.25em;
	border-left: 1px solid var(--rule);
	color: var(--text-soft);
}

code, pre {
	font-family: ui-monospace, Menlo, Monaco, monospace;
	background-color: var(--bg-raised);
	border-radius: 3px;
}
code { padding: 2px; }
pre {
	padding: 6px 10px;
	overflow-x: auto;
	line-height: 1.5em;
}
pre code { padding: 0; background: none; }

ul, ol { padding-left: 1.5em; margin: 0 0 1.6em; }
li { margin-bottom: .5em; }

hr {
	border: 0;
	border-top: 1px dotted var(--rule);
	margin: 3em 0;
}

img { max-width: 100%; height: auto; }

/* ---------- Home: linked list + articles ---------- */

.dateline {
	font-size: .85em;
	color: #aaa;
	margin: 3.5em 0 1.4em;
}
.dateline:first-child { margin-top: 0; }

.linkedlist dt {
	font-size: 1.1em;
	margin: 0 0 .6em;
}

.linkedlist dd {
	margin: 0 0 3em;
}

a.permalink:link,
a.permalink:visited {
	border: 0;
	color: #999;
	padding: 0 2px;
}
a.permalink:hover { color: #fff; }

.article h1 { margin-bottom: .4em; }
.article h1 a:link,
.article h1 a:visited { border: 0; }

.article .meta {
	font-size: .85em;
	color: #aaa;
	margin-bottom: 2em;
}

.article .continue {
	font-size: .91em;
}

.star-rule {
	text-align: center;
	color: #888;
	letter-spacing: 1em;
	margin: 3em 0;
}

/* ---------- Archive ---------- */

.archive {
	list-style: none;
	padding: 0;
}
.archive li {
	display: flex;
	gap: 1.5em;
	margin-bottom: .6em;
}
.archive time {
	flex: 0 0 7.5em;
	color: #aaa;
	font-size: .9em;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {
	body { font-size: 14px; }

	#Box {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sidebar"
			"main";
		padding-top: 24px;
	}

	#Sidebar {
		text-align: left;
		margin-bottom: 2.5em;
		padding-bottom: 1em;
		border-bottom: 1px dotted var(--rule);
	}
	#Sidebar ul {
		display: flex;
		flex-wrap: wrap;
		gap: .2em 1.2em;
	}
	#Sidebar p { margin-bottom: .6em; }

}