/* One stylesheet for every page. Plain CSS, no build step.
   Beige and orange in light mode, navy in dark mode, following the
   visitor's system setting. */

:root {
	--back-color: #f4ecdc;
	--text-color: #2b2520;
	--dim-color: #75685a;
	--code-back: #ebe0cb;
	--rule-color: #d8c9ad;
	--link-color: #b8470f;
	--visited-color: #9a3412;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--back-color: #01242e;
		--text-color: #dddddd;
		--dim-color: #dddddd; /* same as text: Bear uses no grey */
		--code-back: #0b3441;
		--rule-color: #23495a;
		--link-color: rgb(140, 194, 221);
		--visited-color: rgb(184, 163, 230);
		color-scheme: dark;
	}
}

* {
	padding: 0;
	margin: 0;
	font-size: 1em;
}

body {
	background-color: var(--back-color);
	color: var(--text-color);
	font-family: Verdana, sans-serif;
}

main {
	margin: 0 auto;
	padding: 30px 20px 0 20px;
	max-width: 720px;
	min-height: 100vh;
}

header .name {
	font-size: 1.2em;
	font-weight: 700;
	text-decoration: none;
	margin-right: 5px;
}

header nav {
	display: inline;
}

h1 {
	margin-top: 50px;
	font-size: 2em;
	line-height: 1.2em;
}

h2 {
	margin-top: 50px;
	font-size: 1.2em;
}

h3 {
	margin-top: 30px;
	font-size: 1em;
}

p, ul, ol, pre, table, blockquote {
	line-height: 1.5em;
	margin-top: 20px;
}

ul, ol {
	padding-left: 20px;
}

li {
	margin-top: 8px;
}

/* Links are coloured so they stand out when scanning; hover inverts them. */
a {
	color: var(--link-color);
}
a:visited {
	color: var(--visited-color);
}
a:hover, a:focus {
	color: var(--back-color);
	background-color: var(--link-color);
}
/* Nav links: light blue like Bear, no underline, no visited purple.
   The site name keeps the text colour. */
header nav a, header nav a:visited {
	color: var(--link-color);
	text-decoration: none;
	margin-right: 8px;
}
header .name, header .name:visited {
	color: var(--text-color);
}
header .name:hover, header .name:focus {
	background-color: var(--text-color);
}

b, strong {
	font-weight: 700;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule-color);
	margin-top: 30px;
}

footer a, footer a:visited {
	color: inherit;
}

.reply {
	margin-top: 40px;
}

footer {
	text-align: right;
	margin-top: 80px;
	padding-bottom: 20px;
	color: var(--dim-color);
}

/* home */

.portrait {
	display: block;
	margin-top: 40px;
	width: 140px;
	height: auto;
}

/* lists with a date (or rating) in front */

ul.dated, ul.plain, ul.pubs {
	list-style: none;
	padding-left: 0;
}
ul.dated li {
	display: flex;
	gap: 15px;
}
.date {
	flex: 0 0 auto;
	color: var(--dim-color);
	font-variant-numeric: tabular-nums;
}
/* Timeline, after karpathy.ai: years on the left (right-aligned, grey),
   then a logo column whose left border is the vertical line, with a dot
   at the top of each entry, then the description. */
.timeline {
	margin-top: 20px;
}
.timeline .entry {
	display: grid;
	grid-template-columns: 6.5em 68px 1fr;
}
.timeline .timespan {
	padding-right: 8px;
	text-align: right;
	font-size: 0.85em;
	color: var(--dim-color);
}
.timeline .ico {
	position: relative;
	border-left: 2px solid var(--rule-color);
}
/* No line hanging below the last entry. */
.timeline .entry:last-child .desc {
	padding-bottom: 0;
}
.timeline .ico img {
	display: block;
	width: 48px;
	height: 48px;
	margin-left: 10px;
	border-radius: 5px;
}
/* Black-only logos turn white on the navy background. */
@media (prefers-color-scheme: dark) {
	.timeline .ico img.mono {
		filter: invert(1);
	}
}
.timeline .entry-dot {
	position: absolute;
	top: 0;
	left: -8px;
	width: 10px;
	height: 10px;
	border-radius: 7px;
	background-color: var(--rule-color);
	border: 2px solid var(--back-color);
}
.timeline .desc {
	padding-left: 10px;
	padding-bottom: 40px;
	line-height: 1.5em;
}
.dim {
	color: var(--dim-color);
}
/* Publications: APA-style references with a hanging indent. */
ul.pubs li {
	margin-top: 15px;
	padding-left: 2em;
	text-indent: -2em;
	overflow-wrap: anywhere;
}
.pubnote {
	display: inline-block;
	text-indent: 0;
	color: var(--dim-color);
	font-size: 0.9em;
}

/* posts */

.meta {
	margin-top: 20px;
	color: var(--dim-color);
}

/* Dates: monospace and upright, like Bear. */
time {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-style: normal;
}
.meta time {
	font-size: 0.9em;
}

.gallery img {
	margin-top: 10px;
}

article img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

blockquote {
	margin-left: 2em;
	padding-left: 20px;
	border-left: 1px solid var(--dim-color);
	font-style: italic;
}

code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.9em;
}
pre {
	padding: 10px;
	overflow-x: auto;
	background-color: var(--code-back);
	line-height: 1.4em;
}

article table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9em;
}
article th, article td {
	padding: 5px 8px;
	border: 1px solid var(--rule-color);
	text-align: left;
	vertical-align: top;
}

math[display="block"] {
	margin-top: 20px;
}

sup {
	line-height: 0;
	font-size: 0.75em;
}
sup a {
	text-decoration: none;
}

.notes, .references {
	font-size: 0.9em;
	color: var(--dim-color);
}

/* Figures. Put one or more images side by side, with an optional caption:
   <div class="fig-row">
     <div class="fig-col"><img src="/assets/20261102-mypost-a.png" alt=""></div>
     <div class="fig-col"><img src="/assets/20261102-mypost-b.png" alt=""></div>
   </div>
   <div class="caption">What the images show.</div> */
.fig-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}
.fig-col {
	flex: 1 1 200px;
	min-width: 0;
}
.caption {
	margin-top: 10px;
	font-size: 0.9em;
	color: var(--dim-color);
	text-align: center;
}
.center {
	text-align: center;
}
.half {
	max-width: 50%;
	margin: 0 auto;
}
.note {
	display: block;
	margin-top: 20px;
	padding-left: 15px;
	border-left: 2px solid var(--dim-color);
	color: var(--dim-color);
}

@media (max-width: 600px) {
	main {
		padding: 10px 16px 0 16px;
	}
	h1 {
		font-size: 1.6em;
	}
	.half {
		max-width: 100%;
	}
}