body {
	background: #f1ecde url("../images/layout/background.gif") repeat 0 0 / 900px 400px;
	border: 24px solid #ffcc6677;
	margin: 0;
	padding: 0;
}

a {
	font-weight: 600;
	text-decoration: none;
	color: #3e7818;
}
h1 a,
h2 a,
h3 a,
h4 a {
	font-weight: normal;
	color: #000;
}

h1 {
	container-type: inline-size;
}
header h2,
footer h2 {
	font-size: 1.8rem;
	text-transform: lowercase;
}

#page {
	margin: -24px;
	overflow: hidden;
}
header {
	margin: 0 50px 30px 50px;
	container-type: inline-size;
}
main {
	margin: 30px 50px 0 50px;
	overflow: hidden;
}
article {
	margin: 0 0 40px 0;
}
footer {
	margin: 0 50px 30px 50px;
	container-type: inline-size;
}
#bottom {
	margin: 0;
}

header .illustration {
	display: block;
	width: 200px;
	height: auto;
	margin: -10px -80px -70px 0;
	float: right;
	z-index: 1;
}
footer .illustration {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 0 -15px 0;
	z-index: 1;
}
#bottom .illustration {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0 24px 24px 24px;
}

@container (width > 265px) {
	header .illustration {
		width: 250px;
		margin: -20px -70px -105px 0;
	}
}

@container (width > 320px) {
	header .illustration {
		margin: -20px -70px -105px 0;
	}
}

@container (width > 365px) {
	footer .illustration {
		margin: 0 10px 0 5px;
		float: right;
	}
}

h1 {
	display: block;
	margin: 0;
	clear: both;
	container-type: inline-size;
}
h1 a,
h1 span {
	background-image: url("../images/layout/title-sm.png");
	background-size: 100% auto;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
	position: relative;
	width: 100%;
	max-width: 350px;
	height: auto;
	aspect-ratio: 602 / 374;
	margin: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@container (width > 270px) {
	h1 a,
	h1 span {
		background-image: url("../images/layout/title.png");
	}
}

article h2:first-child {
	margin-top: 0;
}
article p.date {
	color: #776d56;
}
article ul li a {
	overflow: hidden;
	overflow-wrap: break-word;
}

footer ul,
main.list ul {
	color: #776d56;
	padding: 0;
}
footer ul li,
main.list li {
	list-style: none;
	margin: 0.5em 0;
}

main.list {
	container-type: inline-size;
}
@container (width > 320px) {
	main.list ul {
		columns: 2;
	}
}
@container (width > 560px) {
	main.list ul {
		columns: 3;
	}
}

.expandable-collapsed div.expandable {
	display: none;
}
.expandable-more a {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.2em;
	font-weight: normal;
	text-transform: lowercase;
	line-height: 100%;
	margin: 0;
	color: #f1ecde;
	background-color: #3e7818cc;
	padding: 9px 18px;
	border-radius: 20px;
}

@media (-webkit-min-device-pixel-ratio: 2.0),
	(min-resolution: 120dpi) {

	body {
		background-image: url("../images/layout/background@2x.gif");
	}
	h1 span {
		background-image: url("../images/layout/title-sm@2x.png");
	}
	@container (width > 270px) {
		h1 a,
		h1 span {
			background-image: url("../images/layout/title@2x.png");
		}
	}

}

/* #MARK - two-column layout */

@media (min-width: 740px) {

	body {
		padding:
			max(20px, env(safe-area-inset-top))
			max(20px, env(safe-area-inset-right))
			max(20px, calc(env(safe-area-inset-bottom) + 20px))
			max(40px, calc(env(safe-area-inset-left) + 20px));
		border: none;
	}
	h2 {
		font-size: 2.4rem;
	}
	article p.date {
		font-size: 1.3em;
	}
	#page {
		display: grid;
		max-width: 1300px;
		grid-template-columns: minmax(200px, 28%) minmax(400px, 72%);
		grid-template-rows: auto auto auto auto;
		row-gap: 0;
		column-gap: 30px;
		margin: 0 auto;
		padding: 0;
		border: none;
		overflow: visible;
	}
	header {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		margin: 15px 0 0 0;
	}
	main {
		grid-column: 2 / span 1;
		grid-row: 1 / span 3;
		margin: 60px 60px 0 60px;
	}
	footer {
		grid-column: 1 / span 1;
		grid-row: 2 / span 3;
		margin: 0 0 30px 0;
	}
	#bottom {
		grid-column: 2 / span 1;
		grid-row: 4 / span 1;
		align-self: end;
		margin: 0;
	}
	#border {
		grid-column: 2 / 2;
		grid-row: 1 / span 4;
		border: 24px solid #ffcc6677;
		z-index: -1;
	}

	footer .illustration {
		margin: 10px 0 -15px 0;
	}

	header.expandable-collapsed div.expandable {
		display: block;
	}
	header .expandable-more {
		display: none;
	}

}

@media (min-width: 920px) {

	body {
		padding:
			max(50px, env(safe-area-inset-top))
			max(50px, env(safe-area-inset-right))
			max(50px, env(safe-area-inset-bottom))
			max(50px, env(safe-area-inset-left));
	}
	h2 {
		font-size: 2.8rem;
	}
	#page {
		column-gap: 50px;
	}
	header {
		margin: 0;
	}
	main {
		margin: 70px 70px 0 70px;
	}

}

/* #MARK - three-column layout */

@media (min-width: 1280px) {

	#page {
		display: grid;
		max-width: 1400px;
		grid-template-columns: 300px minmax(400px, auto) 200px;
		grid-template-rows: auto auto auto;
		column-gap: 50px;
	}
	header {
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
	}
	main {
		grid-column: 2 / span 1;
		grid-row: 1 / span 2;
	}
	footer {
		grid-column: 3 / span 1;
		grid-row: 1 / span 3;
	}
	#bottom {
		grid-column: 2 / span 1;
		grid-row: 3 / span 1;
	}
	#border {
		grid-column: 2 / span 1;
		grid-row: 1 / span 3;
	}

	footer .illustration {
		margin: 20px auto -15px -25px;
	}

}