/* What the website adds on top of the Typora look. Loaded last. */

img { height: auto; }

/* Link back to the home page, above each post's title. */
.home-link {
	margin: 0;
	font-size: .875em;
}
.home-link a { color: #777; }

/* Home page: index.md's ## sections become columns separated by rules
   (four across, two on tablets, stacked on phones). */
#write.home { max-width: 1280px; }

.home-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 2.5em;
}
.home-column { padding: 0 1.5em; }
.home-column:first-child { padding-left: 0; }
.home-column:last-child { padding-right: 0; }
.home-column + .home-column { border-left: 1px solid #c5c5c5; }

.home-column h2 { margin-top: 0; }
.home-column h3 {
	font-size: 1em;
	font-weight: bold;
	margin: 1.5em 0 .75em;
}
.home-column h2 + h3 { margin-top: 0; }
.home-column ul { margin: 0; padding: 0; }
.home-column li {
	list-style: none;
	margin: 0 0 .9em;
	line-height: 1.4;
}

/* The grey line under each entry: a date, or details such as patent numbers. */
.meta {
	display: block;
	margin-top: .15em;
	font-size: .875em;
	color: #777;
}
/* Dates sit small on the same line as the title (under it on phones). */
.meta.date {
	display: inline;
	margin: 0 0 0 .6em;
	font-size: .525em;
	white-space: nowrap;
}
.meta a { white-space: nowrap; }
.draft-tag { color: #9B5146; font-style: italic; }

/* LinkedIn / Google Scholar icons beside the name. */
h1 a img {
	height: .6em;
	width: auto;
	margin-left: .45em;
	vertical-align: .02em;
	opacity: .55;
	transition: opacity .15s;
}
h1 a:hover img { opacity: 1; }

/* Home page footer. The email address is an image of the text (outlines,
   theme/email.svg) so scrapers can't read it; its box is sized so its
   baseline lines up with the surrounding text. */
footer {
	margin-top: 3em;
	padding-top: 1.25em;
	border-top: 1px solid #c5c5c5;
	font-size: .875em;
	color: #777;
}
footer img.email {
	height: 1.325em;
	width: auto;
	vertical-align: -.286em;
}

@media screen and (max-width: 1100px) {
	.home-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-column:nth-child(odd) { padding-left: 0; padding-right: 1.5em; border-left: none; }
	.home-column:nth-child(even) { padding-left: 1.5em; padding-right: 0; }
	.home-column:nth-child(n+3) { border-top: 1px solid #c5c5c5; margin-top: 1.5em; padding-top: 1.5em; }
}

@media screen and (max-width: 700px) {
	.home-columns { grid-template-columns: minmax(0, 1fr); }
	.home-columns > .home-column { padding: 0; border-left: none; }
	.home-columns > .home-column + .home-column { border-top: 1px solid #c5c5c5; margin-top: 1.5em; padding-top: 1.5em; }
	.meta.date { display: block; margin: .15em 0 0; }
}

/* Code blocks: Newsprint styles the <pre>; the inner <code> must not repeat
   the inline-code background and padding. */
pre.md-fences { padding-top: 4px; padding-bottom: 4px; }
pre.md-fences code {
	background: none;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Syntax colours from Typora's code editor (CodeMirror's default theme). */
.hljs-keyword { color: #708; }
.hljs-literal { color: #219; }
.hljs-number { color: #164; }
.hljs-string { color: #a11; }
.hljs-comment { color: #a50; }
.hljs-built_in { color: #30a; }
.hljs-title.function_,
.hljs-title.class_ { color: #00f; }
.hljs-variable.language_ { color: #05a; }
.hljs-meta { color: #555; }

/* Display maths spacing. (Equations too wide for the column scroll sideways:
   build.mjs sets MathJax's displayOverflow to "scroll".) */
mjx-container[display="true"] { margin: 1em 0; }

/* YouTube (or any) embedded video: full column width at 16:9. */
.video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 1.5em 0;
}
.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Phones: Typora never has to fit a phone screen. */
@media screen and (max-width: 500px) {
	#write { padding-left: 20px; padding-right: 20px; }
	.md-fences, blockquote { margin-left: 0; }
}

/* Local preview only: problems that would stop the production build. */
.dev-problems {
	position: sticky;
	top: 0;
	z-index: 10;
	margin: 0;
	padding: .6em 1em;
	background: #fff3cd;
	border-bottom: 1px solid #e0c36a;
	font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #5c4400;
}
.dev-problems ul { margin: .2em 0 0 1.2em; padding: 0; }
.dev-problems li { list-style: disc; }