.content-page {
	background: #f7f4ec;
	color: #211f1b;
}
.content-page header {
	background: #171513;
}
.content-page main {
	min-height: 75vh;
	padding-top: 86px;
}
.content-hero {
	padding: 85px 5vw 72px;
	border-bottom: 1px solid #cdbf9c;
	text-align: center;
}
.content-hero p,
.detail-label {
	margin: 0;
	color: #b58a00;
	font-size: 10px;
	letter-spacing: 0.22em;
}
.content-hero h1 {
	margin: 12px 0;
	font: clamp(42px, 7vw, 78px) mincho;
	letter-spacing: 0.12em;
}
.content-hero span {
	color: #7f7769;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
}
.archive-section {
	max-width: 1180px;
	margin: auto;
	padding: 60px 5vw 110px;
}
.archive-filters {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	padding: 28px;
	border: 1px solid #cdbf9c;
	background: #ffffff80;
}
.archive-filters b {
	display: block;
	margin-bottom: 12px;
	color: #9b7510;
	font-size: 12px;
}
.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.filter-buttons button {
	padding: 8px 13px;
	border: 1px solid #cdbf9c;
	background: #fff;
	color: #473f2d;
	cursor: pointer;
}
.filter-buttons button.active {
	background: #d7c793;
}
.archive-filters label {
	display: block;
}
.archive-filters input {
	width: 100%;
	padding: 12px;
	border: 1px solid #cdbf9c;
	background: #fff;
}
#archive-count {
	margin: 32px 0 0;
	color: #8b806c;
	font-size: 12px;
}
.archive-section .content-grid {
	margin-top: 18px;
}
.detail-shell {
	max-width: 940px;
	margin: 0 auto;
	padding: 65px 5vw 110px;
}
.detail-back {
	display: inline-block;
	margin-bottom: 22px;
	color: #7c641e;
	text-decoration: none;
}
.detail-article {
	padding: clamp(28px, 6vw, 75px);
	background: #fff;
	box-shadow: 0 20px 60px #59492818;
}
.detail-article h1 {
	margin: 14px 0 30px;
	font: clamp(30px, 5vw, 52px) / 1.5 mincho;
}
.detail-image {
	display: block;
	width: min(100%, 680px);
	max-height: 620px;
	margin: 38px auto;
	object-fit: contain;
	background: #f2ede2;
}
.detail-meta {
	display: grid;
	gap: 9px;
	margin: 22px 0;
}
.detail-meta div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
}
.detail-meta dt {
	color: #a58c4a;
}
.detail-meta dd {
	margin: 0;
}
.detail-body {
	margin: 40px 0;
	font-size: 15px;
	line-height: 2.1;
}
.detail-page .button {
	display: inline-block;
}
@media (max-width: 900px) {
	.content-page main {
		padding-top: 70px;
	}
	.content-hero {
		padding: 55px 20px;
	}
	.archive-filters {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}
@media (max-width: 620px) {
	.content-grid.event-grid,
	.content-grid.topic-grid {
		grid-template-columns: 1fr;
	}
	.detail-article {
		padding: 28px 20px;
	}
}