/* ============================================================
   o-curtis.github.io
   ============================================================ */

:root {
	--bg:         #0c0c0e;
	--card:       #17171b;
	--border:     #26262e;
	--text:       #d5d5da;
	--heading:    #f4f4f6;
	--muted:      #92929c;
	--accent:     #ff8f6b;
	--accent-dim: #ffb49a;
	--rule:       rgba(255, 143, 107, 0.25);
	--plate:      #ffffff;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
	--mono: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- page ---------- */

html { background: var(--bg); }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.content {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	justify-content: center;
	padding: 34px 0 80px;
	box-sizing: border-box;
}

.main {
	width: 50%;
	max-width: 780px;
}

.side {
	width: fit-content;
	position: sticky;
	top: 24px;
	align-self: flex-start;
	margin-right: 14px;
}

/* ---------- cards ---------- */

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--text);
	margin: 0 10px 20px;
	padding: 28px 34px;
	display: block;
}

.side .card { padding: 20px 24px; }

.card p { margin: 0 0 1.05em; }
.card > *:first-child { margin-top: 0; }
.card > *:last-child  { margin-bottom: 0; }

/* ---------- headings ---------- */

.title {
	font-family: var(--mono);
	color: var(--heading);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.28;
	margin: 0 0 12px;
}

h1.title { font-size: 1.62rem; }
h2.title { font-size: 1.24rem; }
h3.title { font-size: 1.04rem; }

/* a date directly beneath a headline becomes a small eyebrow */
.card h1.title + h3.title {
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: -4px 0 22px;
}

.subtitle {
	font-family: var(--mono);
	color: var(--muted);
	font-weight: 500;
	margin: 0 0 6px;
}

/* on the list pages h2.subtitle heads a section, so it leads rather than recedes */
.main h2.subtitle {
	color: var(--heading);
	font-size: 1.24rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
}

h3.subtitle { font-size: 0.98rem; }
h4.subtitle { font-size: 0.9rem; }

/* ---------- figures ---------- */

.figure {
	display: block;
	box-sizing: border-box;
	width: 80%;
	height: auto;
	margin: 28px auto 0;
	padding: 14px;
	background: var(--plate);
	border-radius: 8px;
}

/* media that already has a dark background needs no white mat */
.figure.dark {
	background: #0f0f12;
	border: 1px solid var(--border);
}

/* photographs are framed, not matted */
.figure.photo {
	background: none;
	padding: 0;
}

.card p.caption {
	width: 80%;
	box-sizing: border-box;
	margin: 13px auto 26px;
	font-size: 0.855rem;
	line-height: 1.6;
	color: var(--muted);
}

.portrait {
	float: right;
	width: 190px;
	height: auto;
	border-radius: 10px;
	margin: 4px 0 18px 26px;
}

.invert { filter: invert(.87); }

/* ---------- links ---------- */

.card a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	transition: color .15s ease, border-color .15s ease;
}

.card a:hover {
	color: var(--accent-dim);
	border-bottom-color: var(--accent-dim);
}

/* ---------- sidebar ---------- */

.side .title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--muted);
	margin: 0 0 14px;
}

.card p.quicklink { margin: 0 0 9px; }

.card .quicklink a {
	font-family: var(--mono);
	font-size: 0.9rem;
	color: var(--text);
	border-bottom: none;
}

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

.nav {
	display: block;
	font-family: var(--mono);
	font-size: 1rem;
	letter-spacing: 0.01em;
	padding: 6px 0;
}

.card a.nav {
	color: var(--text);
	border-bottom: none;
}

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

.current,
.card a.nav.current {
	color: var(--accent) !important;
	border-bottom: none !important;
}

/* ---------- lists ---------- */

.card ol, .card ul { padding-left: 1.3em; }
.card li { margin: 0.35em 0; }

.card p.item { margin: 0 0 0.75em; }

.card p.subitem {
	margin: 0 0 0.75em;
	margin-left: 1.2em;
	font-size: 0.92em;
	color: var(--muted);
}

/* ---------- expandable research topics ---------- */

.topic { scroll-margin-top: 20px; }

.topichead { cursor: pointer; }

.topichead::after {
	content: " [+]";
	color: var(--accent);
	font-size: 0.62em;
	font-weight: 500;
	letter-spacing: 0;
	vertical-align: middle;
}

.topic.expanded .topichead::after { content: " [-]"; }

.topicbody {
	max-height: 300px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.topicbody::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 128px;
	background: linear-gradient(rgba(23, 23, 27, 0), var(--card));
}

.topic.expanded .topicbody { max-height: none; cursor: auto; }
.topic.expanded .topicbody::after { content: none; }