.og-kings-chronicle {
	--og-kings-ink: #14251f;
	--og-kings-green: #294c3f;
	/* Dunkleres Archivgold: auch kleine Jahreszahlen bleiben auf Weiß/Creme
	 * deutlich über dem WCAG-AA-Mindestkontrast. */
	--og-kings-gold: #8a5f0f;
	width: min(74rem, calc(100vw - 2rem));
	max-width: none;
	position: relative;
	left: 50%;
	margin: 2rem 0 4rem;
	transform: translateX(-50%);
}

.og-kings-stage { margin-bottom: clamp(4rem, 8vw, 6rem); }

.og-current-king-wrap {
	position: relative;
	width: min(62rem, 100%);
	margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}
.og-current-king-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.8rem, 2.5vw, 1.6rem);
	margin: 0 0 1.35rem;
	color: var(--og-kings-green);
	font-size: clamp(1.75rem, 4vw, 2.65rem);
	text-align: center;
}
.og-current-king-title::before,
.og-current-king-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--og-kings-gold));
}
.og-current-king-title::after { transform: scaleX(-1); }
.og-current-king {
	display: grid;
	grid-template-columns: minmax(16rem, 44%) minmax(0, 1fr);
	position: relative;
	width: 100%;
	min-height: 24rem;
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--og-kings-gold);
	border-radius: .45rem;
	background: #fff;
	box-shadow: inset 0 0 0 .32rem #fff, inset 0 0 0 .42rem rgba(41, 76, 63, .55), 0 1.2rem 3rem rgba(15, 24, 20, .16);
}
.og-current-king__image,
.og-current-king__mark { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; }
.og-current-king__mark { display: grid; place-items: center; background: var(--og-kings-green); color: var(--og-kings-gold); font-size: clamp(4rem, 9vw, 7rem); }
.og-current-king__content { align-self: center; min-width: 0; padding: clamp(1.6rem, 4vw, 3rem); }
.og-current-king__content strong { color: var(--og-kings-green); font-size: 1rem; }
.og-current-king__content h3 { overflow-wrap: anywhere; margin: .18rem 0 .5rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
.og-current-king__content p { margin: 0; color: rgba(20, 37, 31, .72); }
.og-current-king-ornament {
	position: absolute;
	top: 4.25rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--og-kings-gold);
	border-radius: 50%;
	background: #fffaf0;
	color: var(--og-kings-gold);
	font-size: 1.55rem;
	box-shadow: 0 .35rem 1rem rgba(15, 24, 20, .16);
}
.og-current-king-ornament--left { left: -1.15rem; }
.og-current-king-ornament--right { right: -1.15rem; transform: scaleX(-1); }

.og-king-board { position: relative; margin: 0; }
.og-king-board a { display: block; padding: clamp(.32rem, .7vw, .55rem); border: .42rem solid #111; background: #050505; box-shadow: 0 .9rem 2rem rgba(15, 24, 20, .22); transition: transform .2s ease, box-shadow .2s ease; }
.og-king-board a:hover { transform: translateY(-3px); box-shadow: 0 1.15rem 2.4rem rgba(15, 24, 20, .3); }
.og-king-board img { display: block; width: 100%; height: auto; background: #f5efe3; }
.og-king-board figcaption { padding-top: .62rem; color: var(--og-kings-green); font-size: .88rem; font-weight: 750; text-align: center; }
.og-king-board--primary { width: min(48rem, 88%); margin: 0 auto clamp(3rem, 7vw, 5rem); }
.og-king-board--side figcaption { position: absolute; top: 100%; right: 0; left: 0; }

.og-kings-history-layout {
	display: grid;
	grid-template-columns: minmax(12rem, .8fr) minmax(26rem, 1.7fr) minmax(12rem, .8fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(1rem, 2.5vw, 2rem);
}
.og-kings-board-rail { display: contents; }
.og-king-board--2 { grid-column: 1; grid-row: 1; }
.og-king-board--3 { grid-column: 3; grid-row: 1; }
.og-king-board--4 { grid-column: 1; grid-row: 3; }
.og-king-board--5 { grid-column: 3; grid-row: 3; }
.og-kings-recent { grid-column: 2; grid-row: 1 / 4; }
.og-kings-recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.og-kings-recent-grid > .og-king-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - .35rem); justify-self: center; }

.og-king-card { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); min-height: 5.75rem; overflow: hidden; border: 1px solid rgba(20, 37, 31, .16); border-radius: .35rem; background: #fff; }
.og-king-card__image,
.og-king-card__mark { width: 100%; height: 100%; min-height: 5.75rem; object-fit: cover; }
.og-king-card__mark { display: grid; place-items: center; background: var(--og-kings-green); color: var(--og-kings-gold); font-size: 1.8rem; }
.og-king-card > div { align-self: center; min-width: 0; padding: .72rem .82rem; }
.og-king-card strong { color: var(--og-kings-gold); font-size: .78rem; letter-spacing: .08em; }
.og-king-card h4 { overflow-wrap: anywhere; margin: .12rem 0 0; font-size: 1.02rem; }
.og-king-card p { margin: .2rem 0 0; color: rgba(20, 37, 31, .72); font-size: .8rem; line-height: 1.35; }

.og-kings-archive { width: min(56rem, 100%); margin-inline: auto; }
.og-kings-archive > h2 { margin: 0 0 1.4rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.og-kings-periods { border-top: 1px solid rgba(20, 37, 31, .2); }
.og-kings-period { border-bottom: 1px solid rgba(20, 37, 31, .2); }
.og-kings-period summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem .2rem; color: var(--og-kings-ink); cursor: pointer; list-style: none; }
.og-kings-period summary::-webkit-details-marker { display: none; }
.og-kings-period summary::after { content: '+'; order: 3; width: 1.7rem; color: var(--og-kings-gold); font-size: 1.65rem; line-height: 1; text-align: center; }
.og-kings-period[open] summary::after { content: '−'; }
.og-kings-period summary span { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; }
.og-kings-period summary small { margin-left: auto; color: rgba(20, 37, 31, .65); }
.og-kings-period-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 0 0 1.35rem; }
.og-king-card--archive { grid-template-columns: 4.2rem minmax(0, 1fr); min-height: 5rem; }
.og-king-card--archive .og-king-card__mark { min-height: 5rem; font-size: 1.55rem; }

@media (max-width: 900px) {
	.og-kings-history-layout { display: flex; flex-direction: column; gap: 2rem; }
	.og-kings-board-rail {
		display: flex;
		order: 2;
		width: 100%;
		gap: 1rem;
		overflow-x: auto;
		padding: .25rem .2rem 1.3rem;
		scroll-snap-type: x mandatory;
		scrollbar-color: var(--og-kings-gold) rgba(20, 37, 31, .1);
	}
	.og-kings-board-rail .og-king-board { flex: 0 0 min(82vw, 36rem); width: auto; scroll-snap-align: center; }
	.og-king-board--side figcaption { position: static; }
	.og-kings-recent { order: 1; width: 100%; }
	.og-kings-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.og-kings-chronicle { left: 0; width: 100%; margin-top: 1.5rem; transform: none; }
	.og-current-king-wrap { margin-bottom: 2.5rem; }
	.og-current-king-title { gap: .65rem; margin-bottom: 1rem; font-size: 1.65rem; }
	.og-current-king { grid-template-columns: 1fr; min-height: 0; }
	.og-current-king__image,
	.og-current-king__mark { aspect-ratio: 4 / 3; min-height: 0; }
	.og-current-king__content { padding: 1.4rem; }
	.og-king-board--primary { width: 100%; }
	.og-current-king-ornament { top: 3.45rem; width: 2rem; height: 2rem; font-size: 1.2rem; }
	.og-current-king-ornament--left { left: -.65rem; }
	.og-current-king-ornament--right { right: -.65rem; }
	.og-kings-history-layout { gap: 1.6rem; }
	.og-kings-board-rail { margin-inline: -.15rem; }
	.og-kings-board-rail .og-king-board { flex-basis: 88vw; }
	.og-kings-recent-grid,
	.og-kings-period-list { grid-template-columns: 1fr; }
	.og-kings-recent-grid > .og-king-card:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
	.og-king-card { grid-template-columns: 4.8rem minmax(0, 1fr); }
	.og-kings-period summary small { display: none; }
	.og-king-board a { padding: .28rem; border-width: .32rem; }
}