/* Static rebuild of "A is for Anteater....." — styled after the WordPress Chateau theme */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
	margin: 0;
	background: #fff;
	color: #000;
	font: 76%/1.5 Verdana, Arial, Helvetica, sans-serif;
}

a { color: #990000; text-decoration: none; }
a:hover { text-decoration: underline; }

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

#site-title,
#site-description,
.post-title h1,
.post-date,
#secondary h2,
#secondary h3,
.post-entry blockquote {
	font-family: "EB Garamond", "Adobe Garamond Pro", Garamond, Palatino, "Palatino Linotype", Times, "Times New Roman", Georgia, serif;
}

#page {
	border-top: 4px solid #990000;
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 20px;
}

/* ---------- Header ---------- */

#branding { padding-top: 30px; position: relative; }

.home-btn {
	position: absolute;
	top: 20px;
	right: 0;
	border: 1.5px solid #990000;
	border-radius: 6px;
	color: #990000;
	font-size: 0.9rem;
	padding: 6px 18px;
	text-decoration: none;
}
.home-btn:hover { background: #990000; color: #fff; }

#main-title { font-style: italic; margin-bottom: 20px; }

#site-title {
	display: inline;
	font-size: 3.2em;
	font-weight: normal;
	margin: 0;
}
#site-title a { color: #000; }
#site-title a:hover { color: #990000; text-decoration: none; }

#site-description {
	color: #555;
	display: inline;
	font-size: 2.3em;
	font-weight: normal;
	margin: 0;
}

#main-image {
	border-top: 1px dotted #ddd;
	padding: 20px 0;
}
#main-image img {
	border: 1px solid #ddd;
	display: block;
	width: 100%;
}

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

#main {
	display: flex;
	align-items: flex-start;
}

#secondary {
	flex: 0 0 19.68%;
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	padding: 34px 12px 40px 0;
}

#content {
	flex: 1;
	min-width: 0;
	border-left: 3px double #ddd;
	padding: 25px 0 70px 2.09%;
}

/* ---------- Sidebar date list ---------- */

#secondary h2 {
	border-bottom: 1px solid #ddd;
	font-size: 1.9em;
	font-style: italic;
	font-weight: normal;
	margin: 0 0 10px;
	padding-bottom: 4px;
}

#secondary h3 {
	color: #555;
	font-size: 1.6em;
	font-style: italic;
	font-weight: normal;
	margin: 18px 0 4px;
}

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

#secondary li a,
#secondary .about-link {
	color: #333;
	display: block;
	padding: 3px 0 3px 8px;
	border-left: 2px solid transparent;
	line-height: 1.4;
}

#secondary .about-link { font-style: italic; }

#secondary a:hover { color: #990000; text-decoration: none; }

#secondary a.current {
	border-left-color: #990000;
	color: #990000;
}

/* ---------- Posts ---------- */

.post {
	border-bottom: 1px solid #ddd;
	margin: 0 0 30px;
	padding-bottom: 10px;
}

.post-title {
	position: relative;
	padding: 0 0 20px;
	min-height: 9em;
}

.post-title h1 {
	border-bottom: 1px solid #ddd;
	color: #990000;
	font-size: 3em;
	font-style: italic;
	font-weight: normal;
	line-height: 1.2;
	margin: 0;
	padding: 6px 0 16px 24.5%;
}

/* The big calendar-style date from Chateau */
.post-date {
	font-style: italic;
	left: 30px;
	line-height: 1.9em;
	margin: 0;
	position: absolute;
	text-align: center;
	top: 15px;
	z-index: 1;
}
.post-date * {
	display: block;
	padding: 0 15px;
	position: relative;
}
.post-date strong {
	font-size: 4.9em;
	font-weight: normal;
	letter-spacing: -0.1em;
	line-height: 1;
	z-index: 2;
}
.post-date em {
	background: #fff;
	font-size: 1.9em;
	top: 9px;
}
.post-date span {
	color: #555;
	font-size: 1.1em;
	font-variant: small-caps;
	top: 4px;
}

.about .post-title { min-height: 0; }
.about .post-title h1 { padding-left: 0; }

.post-entry {
	color: #333;
	font-size: 14px;
	margin-left: 24.5%;
	padding: 15px 2.8% 0 0;
}

.post-entry p,
.post-entry li { line-height: 180%; }

.post-entry p { margin: 0 0 23px; }

.post-entry ul { list-style: square; margin: 0 0 23px 1.5em; padding: 0; }
.post-entry ol { list-style: decimal; margin: 0 0 23px 1.5em; padding: 0; }

.post-entry strong { font-weight: bold; }

.post-entry blockquote {
	font-size: 1.25em;
	font-style: italic;
	margin: 0 0 23px;
	padding: 0 3em;
}

.post-entry img { border: 1px solid #ddd; padding: 4px; background: #fff; }

.alignleft { float: left; margin: 0 1.666em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.666em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.post-entry::after { content: ""; display: table; clear: both; }

.wp-caption { max-width: 100%; margin-bottom: 23px; }
.wp-caption-text {
	color: #555;
	font-size: 0.9em;
	font-style: italic;
	margin: 4px 0 0;
}

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

#footer {
	border-top: 3px double #ddd;
	color: #555;
	padding: 20px 0 40px;
	text-align: center;
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
	/* Leave room above the title for the Home button */
	#branding { padding-top: 66px; }

	/* Subtitle on its own line, slightly smaller, without the leading tilde */
	#site-description { display: block; font-size: 1.9em; margin-top: 4px; }
	#site-description .tilde { display: none; }

	#main { display: block; }

	#secondary {
		position: static;
		max-height: none;
		padding: 10px 0 20px;
		border-bottom: 3px double #ddd;
	}
	#secondary ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 14px;
	}
	#secondary li a { padding-left: 0; border-left: 0; }

	/* Year headings collapse their list of post dates; tap to expand */
	#secondary h3 {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 6px 0 0;
		padding: 6px 0;
		border-bottom: 1px dotted #ddd;
		user-select: none;
	}
	#secondary h3::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid #990000;
		border-bottom: 2px solid #990000;
		transform: translateY(-3px) rotate(45deg);
		transition: transform 0.2s;
	}
	#secondary h3.open::after { transform: translateY(2px) rotate(-135deg); }
	#secondary h3 + ul { display: none; padding: 6px 0 4px; }
	#secondary h3.open + ul { display: flex; }

	#content { border-left: 0; padding-left: 0; }

	.post-title { min-height: 0; }
	.post-title h1 { padding-left: 0; font-size: 2.4em; }
	.post-date {
		position: static;
		text-align: left;
		margin-top: 8px;
	}
	.post-date * { display: inline; padding: 0 6px 0 0; top: 0; }
	.post-date strong { font-size: 1.9em; letter-spacing: 0; }
	.post-date em { font-size: 1.4em; }
	.post-date span { font-size: 1.4em; }

	.post-entry { margin-left: 0; padding-right: 0; }
	.alignleft, .alignright { float: none; margin: 0 0 1em; }
}