@font-face {
    font-family: 'Alegreya Sans SC';
    src: url('alegreyasanssc-black-webfont.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OFL Sorts Mill Goudy';
    src: url('oflgoudystm-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OFL Sorts Mill Goudy';
    src: url('oflgoudystm-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	height: 100%;
}

body {
	font-size: 20px;
	font-family: "OFL Sorts Mill Goudy", "Palatino Linotype", "Palatino", serif;
	line-height: 24px;
	text-align: center;
	background: #fbf6ea;
	color: #000;
	text-rendering: optimizeLegibility;
	hyphens: none;
}

/* Header: carved wooden beam (Figma “Blog header”). The 1920px tile repeats sideways. */
#feature {
	position: relative;
	height: 150px;
	text-align: center;
	background: #fbf6ea url("/images/header/beam-1920.webp") 50% 0 / 1920px 150px repeat-x;
	background-image: image-set(url("/images/header/beam-1920.webp") 1x, url("/images/header/beam-3840.webp") 2x);
}

#feature p {
	position: absolute;
	width: 300px;
	top: 160px;
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
	text-transform: lowercase;
}

#links {
	left: 50%;
	margin-left: -150px;
}

#links a {
	color: #22406e;
	text-decoration: none;
}

#links a:hover {
	color: #3d6aa8;
	text-decoration: underline;
}

/* Title: carved lettering exported from Figma as SVG (paths + inner shadow).
   Centered on the beam like the Figma frame (Figma offsets it 1.8px to the right). */
h1 {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	line-height: 0;
}

#feature h1 > a {
	display: block;
}

h1 img {
	width: min(649px, calc(100% - 32px));
	height: auto;
	margin-left: 3.6px;
}

strong {
	font-weight: normal;
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
}

em {
	font-style: italic;
}

.clear {
	clear: both;
	color: #6b5d50;
	padding: 10px 0 0 0;
}

a {
	color: #22406e;
	font-weight: normal;
	text-decoration: underline;
	padding: 1px 0;
	transition: color .2s, padding .2s, background .2s;
}

li {
	list-style: none;
}

a:hover {
	color: #3d6aa8;
	text-decoration: none;
}

#blog {
	padding-top: 100px;
}

#blog.detail {
	padding-top: 40px;
}

#blog > h2, #blog > p, #blog > article {
	width: 800px;
	text-align: left;
	margin: auto;
}

#blog > article {
	padding-left: 1em;
}

#blog > article a, #blog > p a {
	color: #000;
	text-decoration: underline;
}

#blog > article a:hover, #blog > p a:hover {
	color: #3d6aa8;
	text-decoration: underline;
}

#blog h2 {
	font-family: "Alegreya Sans SC", "Futura", sans-serif;
	font-weight: 900;
	font-size: 32px;
	line-height: 1.1;
	color: #462615;
	padding: 20px 0;
	text-align: center;
	letter-spacing: 0.01em;
	word-spacing: 0.15em;
}

#blog h2 a {
	color: inherit;
	text-decoration: none;
	font-weight: 900;
}

#blog h2 a:hover {
	color: #8c6140;
	text-decoration: underline;
}

#blog > p {
	color: #000;
	font-size: 16px;
	text-align: center;
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
	padding-bottom: 30px;
	text-transform: lowercase;
}

#blog h3 {
	color: #462615;
	font-family: "Alegreya Sans SC", "Futura", sans-serif;
	font-weight: 900;
	font-size: 20px;
	line-height: 1;
	font-weight: bold;
	padding: 20px 0 10px 0;
	letter-spacing: 0.01em;
	word-spacing: 0.1em;
}

#blog h4 {
	color: #462615;
	font-family: "Alegreya Sans SC", "Futura", sans-serif;
	font-weight: 900;
	padding: 8px 0 4px 0;
	font-weight: bold;
	font-size: 16px;
}

#blog article {
	font-size: 20px;
	line-height: 30px;
}

#blog.detail article {
	padding: 20px 0 0 1em;
}

#blog article p, #blog article ul, #blog article ol {
	padding: 0 0 .9em 0;
}

#blog article ol p, #blog article ul p {
	padding: 0;
}

#blog .archive {
	width: 640px;
	max-width: calc(100% - 120px);
}

#blog .archive time {
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
	flex: 0 0 5em;
	text-align: right;
}

/* Date column and title column: long titles wrap under the title, not the date */
#blog .archive li {
	list-style: none;
	display: flex;
	gap: 0.25em;
}

#blog .archive a {
	color: #22406e;
}

#blog .archive a:hover {
	color: #3d6aa8;
	text-decoration: none;
}

#blog article > p:first-child:first-line {
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
}

#blog article ul li {
	list-style: circle;
}

#blog article ol li {
	list-style: decimal;
}

#blog article blockquote {
	font-style: italic;
	padding: 0 1.8em;
}

#blog article blockquote cite {
	display: block;
	font-style: normal;
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
	font-size: 16px;
}

#blog article blockquote cite:before {
	content: '— ';
}

#blog article blockquote strong {
	font-style: normal;
}

#blog article blockquote em {
	color: #6b5d50;
}

#blog img {
	max-width: 700px;
	height: auto;
}

/* Cartoons: 2x images shown at half size (width/height attributes), up to
   1080px. They may be wider than the text column and are centered on the
   page, but never get narrower than the text or wider than the screen.
   The -0.5em offsets the article's 1em left-only padding. */
#blog figure.cartoon {
	width: max(100%, min(1080px, 100vw - 60px));
	margin: 0 0 0.9em calc(50% - 0.5em);
	transform: translateX(-50%);
}

#blog figure.cartoon picture {
	display: block;
}

#blog figure.cartoon img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

#blog hr {
	background: url("/images/divider-wood.svg") 50% 50% no-repeat;
	background-size: 42px;
	height: 42px;
	padding: 70px 0 75px 0;
}

#blog #loading {
	height: 40px;
	background: url("/images/loading.gif") 50% 50% no-repeat;
}

#blog a {
	font-weight: normal;
}

#end {
	color: #f3e6c8;
	padding: 45px 20px 50px 20px;
	text-align: center;
	font-size: 20px;
	background: #361d0f;
	margin-top: 13px; /* the divider above leaves 75px; together the same 88px as above the divider */
}

#end a {
	color: #e3b96b;
}

#end a:hover {
	color: #fbf6ea;
}

#end p {
	padding-top: 12px;
}

dd {
	padding-bottom: 16px;
	color: #6b5d50;
}

/* MOBILE - - - - - - - - - - - - - - - - - - - - - - - - */

@media all and (max-width: 1000px) and (min-width: 601px) {
	h1, #wrapper {
		width: 100%;
	}

	#blog > h2, #blog > p, #blog > article, #feature {
		padding-left: 60px;
		padding-right: 60px;
		width: calc(100% - 120px);
	}

	#blog:not(.detail) figure.cartoon {
		margin-left: 50%;
	}
}

@media all and (max-width: 600px) {
	#archive {
		top: 16px;
	}

	#blog {
		padding-top: 60px;
	}

	#blog h2 {
		font-size: 26px;
	}

	#blog > h2, #blog > p, #blog > article {
		width: auto;
		padding-left: 10px;
		padding-right: 10px;
	}

	#blog.detail article {
		padding-left: 10px;
		padding-right: 10px;
	}

	#blog figure.cartoon {
		margin-left: 50%;
	}

	#blog .archive {
		max-width: calc(100% - 20px);
	}

	#blog img {
		max-width: 100%;
	}

	#blog article, #end {
		font-size: 17px;
		line-height: 24px;
	}

	#blog > p {
		font-size: 13px;
		line-height: 16px;
	}

	#blog ul, #blog ol {
		margin-left: 20px;
	}

	#blog.detail h2 {
		font-size: 20px;
	}

	#blog {
		padding-top: 70px;
	}

	#blog hr {
		padding: 40px 0 45px 0;
	}

	#end {
		margin-top: 10px; /* 45px + 10px = the 55px above the divider on phones */
	}
}

sub {
	position: absolute;
	margin-top: 0.4em;
	margin-left: -.25em;
}

ul.images {
	display: flex;
	flex-wrap: wrap;
	margin: 0 !important;
}

ul.images li {
	height: 350px;
	flex-grow: 1;
	list-style-type: none !important;
}

ul.images li:last-child {
	flex-grow: 10;
}

#blog ul.images img {
	width: auto;
	height: 100%;
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	border: 2px solid #fbf6ea;
}

@media (max-aspect-ratio: 1/1) {
	ul.images li {
		height: 30vh;
	}
}

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
	ul.images {
		flex-direction: row;
	}

	ul.images li {
		height: auto;
		width: 100%;
	}

	#blog ul.images img {
		width: 100%;
		height: auto;
		max-height: 75vh;
		min-width: 0;
	}
}