/* 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: 0 16px 60px;
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-template-areas:
		"banner banner"
		"sidebar main";
	column-gap: 50px;
}

#Banner {
	grid-area: banner;
	padding: 28px 0 32px;
}

#Banner a,
#Banner a:hover {
	border: 0;
	background: none;
	padding: 0;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Gill Sans", "Gill Sans MT", Futura, Georgia, serif;
	font-size: 30px;
	letter-spacing: .02em;
	color: #fff;
	line-height: 1;
}

.wordmark .star {
	font-size: 24px;
	color: #bbb;
}

/* ---------- 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; }

/* ---------- 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;
}

/* ---------- Footer ---------- */

#Footer {
	grid-column: 2;
	margin-top: 4em;
	padding-top: 1.5em;
	border-top: 1px dotted var(--rule);
	font-size: 11px;
	color: #999;
}

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

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

	#Box {
		grid-template-columns: 1fr;
		grid-template-areas:
			"banner"
			"sidebar"
			"main";
	}

	#Banner { padding: 22px 0 14px; }
	.wordmark { font-size: 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; }

	#Footer { grid-column: 1; }
}