/* Heritage item page — ported from DetailView, value for value.
   The two-column shell stacks below 900px so the media column is usable on a
   phone rather than squeezed into a narrow strip. */

.dv-root {
	position: relative;
	min-height: 100vh;
	background: #0B1120;
}

.dv-backdrop {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.dv-backdrop-wash {
	position: fixed;
	inset: 0;
	background: linear-gradient(160deg, rgba(11, 17, 32, 0.85) 0%, rgba(11, 17, 32, 0.97) 100%);
	z-index: 1;
	pointer-events: none;
}

.dv-page {
	position: relative;
	z-index: 10;
	padding: 32px 20px 60px;
}

.dv-shell {
	max-width: 1400px;
	margin: 0 auto;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */

.dv-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.dv-back {
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.dv-back:hover {
	color: #EAB308;
}

.dv-archive-pill {
	border: 1px solid rgba(234, 179, 8, 0.28);
	border-radius: 20px;
	color: rgba(234, 179, 8, 0.65);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 5px 16px;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.dv-archive-pill:hover {
	color: #EAB308;
	border-color: rgba(234, 179, 8, 0.6);
}

/* ── Card and hero ────────────────────────────────────────────────────────── */

.dv-card {
	display: flex;
	flex-direction: column;
	background: rgba(2, 6, 23, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(234, 179, 8, 0.22);
	border-radius: 20px;
	overflow: hidden;
}

.dv-hero {
	position: relative;
	height: clamp(200px, 26vw, 320px);
	flex-shrink: 0;
	overflow: hidden;
}

.dv-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: brightness(0.95) saturate(0.6);
}

.dv-hero-img.is-high {
	object-position: center 15%;
}

.dv-hero-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #0b1120 0%, #142444 60%, #0b1120 100%);
}

.dv-hero-scrim {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(2, 6, 23, 0.72) 0%, transparent 100%);
}

.dv-hero-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 32px 22px;
}

.dv-type {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.65);
	margin: 0 0 6px;
}

.dv-title {
	font-family: Lora, Georgia, serif;
	font-style: italic;
	font-size: clamp(1.6rem, 2.8vw, 2.8rem);
	color: #EAB308;
	line-height: 1.05;
	margin: 0;
}

/* ── Two columns ──────────────────────────────────────────────────────────── */

.dv-columns {
	display: flex;
	align-items: flex-start;
}

.dv-col-left {
	width: 60%;
	flex-shrink: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.dv-col-right {
	width: 40%;
	flex-shrink: 0;
}

.dv-col-left > div {
	padding: 28px 32px 40px;
}

.dv-col-right > div {
	padding: 28px 24px 40px;
}

@media (max-width: 900px) {
	.dv-columns {
		flex-direction: column;
	}

	.dv-col-left,
	.dv-col-right {
		width: 100%;
	}

	.dv-col-left {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.dv-col-left > div {
		padding: 24px 20px 32px;
	}

	.dv-col-right > div {
		padding: 24px 20px 36px;
	}
}

/* ── Narrative ────────────────────────────────────────────────────────────── */

.dv-summary {
	font-family: Lora, Georgia, serif;
	font-size: 1rem;
	color: #FFFFFF;
	line-height: 1.8;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(234, 179, 8, 0.1);
}

.dv-narrative {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dv-body {
	font-family: Lora, Georgia, serif;
	font-size: clamp(0.88rem, 1vw, 0.98rem);
	line-height: 1.9;
	color: #FFFFFF;
	margin: 0;
}

/* The house standard for text written in the editor: anything made Bold is
   set in gold, and links are gold and underlined so they read as links. */
.dv-body strong, .dv-body b, .dv-quote strong, .dv-quote b, .dv-table strong {
	color: #EAB308;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.dv-body a, .dv-quote a, .dv-table a {
	color: #EAB308;
	text-decoration: underline;
	text-decoration-color: rgba(234,179,8,0.55);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}
.dv-body a:hover, .dv-body a:focus-visible, .dv-quote a:hover, .dv-table a:hover {
	color: #EAB308;
	text-decoration-color: #EAB308;
}

.dv-h3 {
	font-family: Lora, Georgia, serif;
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	font-weight: 600;
	font-style: italic;
	color: #EAB308;
	margin: 8px 0 0;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.dv-h4 {
	font-family: Lora, Georgia, serif;
	font-size: clamp(0.88rem, 1.05vw, 1rem);
	font-weight: 600;
	color: #EAB308;
	margin: 4px 0 0;
	line-height: 1.3;
	padding-left: 12px;
	border-left: 2px solid rgba(234, 179, 8, 0.4);
}

/* Quotations — recorded speech, such as Nana Kobina Gyan before the British in
   1873. These were too quiet to read as quotations at a glance, so the panel
   now carries a solid gold edge, a deeper ground and a larger opening mark.
   Core editor Quote blocks get the same treatment, so marking text as a
   quotation in WordPress produces exactly this. */

.dv-quote,
.dv-narrative blockquote,
.dv-narrative .wp-block-quote {
	position: relative;
	margin: 18px 0;
	background: rgba(234, 179, 8, 0.07);
	border: 1px solid rgba(234, 179, 8, 0.32);
	border-left: 4px solid #EAB308;
	border-radius: 8px;
	padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 32px) clamp(20px, 2.4vw, 26px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.dv-quote-mark {
	position: absolute;
	top: 2px;
	left: 18px;
	font-family: Georgia, serif;
	font-size: 3.4rem;
	color: rgba(234, 179, 8, 0.34);
	line-height: 1;
	user-select: none;
}

.dv-quote p,
.dv-narrative blockquote p,
.dv-narrative .wp-block-quote p {
	font-family: Lora, Georgia, serif;
	font-style: italic;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.78;
	color: #FFFFFF;
	margin: 0;
	padding-top: 16px;
}

/* An attribution typed under the quotation in the editor. */
.dv-narrative blockquote cite,
.dv-narrative .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	font-family: Inter, system-ui, sans-serif;
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.75);
}

.dv-table-wrap {
	overflow-x: auto;
	margin: 4px 0;
}

.dv-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 440px;
}

.dv-table th {
	font-family: Lora, Georgia, serif;
	text-align: left;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #EAB308;
	padding: 0 16px 10px 0;
	border-bottom: 1px solid rgba(234, 179, 8, 0.32);
	white-space: nowrap;
}

.dv-table td {
	font-family: Lora, Georgia, serif;
	font-size: clamp(0.84rem, 0.95vw, 0.92rem);
	line-height: 1.7;
	color: #FFFFFF;
	padding: 11px 16px 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	vertical-align: top;
}

.dv-progress {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	padding: 20px;
}

.dv-progress-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.45);
	margin: 0 0 10px;
}

.dv-progress-body {
	font-family: Lora, Georgia, serif;
	font-size: clamp(0.88rem, 1vw, 0.98rem);
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.82);
	font-style: italic;
	margin: 0;
}

/* ── Media column ─────────────────────────────────────────────────────────── */

.dv-media-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dv-media-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.65);
	margin: 0 0 8px;
}

/* Image archive */

.dv-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.07);
	cursor: zoom-in;
}

.dv-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}

.dv-frame-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.4);
	color: rgba(255, 255, 255, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.dv-frame-prev {
	left: 8px;
}

.dv-frame-next {
	right: 8px;
}

.dv-frame-hint {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	text-align: center;
	pointer-events: none;
}

.dv-frame-hint span {
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(0, 0, 0, 0.45);
	padding: 2px 8px;
	border-radius: 10px;
}

.dv-caption {
	font-size: 0.65rem;
	color: #FFFFFF;
	text-align: center;
	margin: 5px 0 0;
	font-style: italic;
}

.dv-credit {
	color: rgba(234, 179, 8, 0.5);
	font-style: normal;
	margin-left: 8px;
}

.dv-dots {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 6px;
}

.dv-dot {
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
}

.dv-dot.is-current {
	width: 14px;
	background: #EAB308;
}

.dv-rights {
	font-size: 0.6rem;
	color: #FFFFFF;
	text-align: center;
	margin: 12px auto 0;
	letter-spacing: 0.04em;
	max-width: 46ch;
	line-height: 1.6;
}

/* Documentary */

.dv-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.dv-video-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border: none;
	padding: 0;
	background: none;
}

.dv-video-play img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.62);
}

.dv-video-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #0b1120, #1b2540);
}

.dv-video-disc {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dv-video-triangle {
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 13px solid white;
	margin-left: 3px;
}

.dv-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 360° button */

.dv-360 {
	flex-shrink: 0;
	width: 100%;
	padding: 15px;
	border-radius: 12px;
	border: none;
	background: #EAB308;
	color: #0B1120;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	box-shadow: 0 0 22px rgba(234, 179, 8, 0.32), 0 4px 14px rgba(234, 179, 8, 0.16);
	transition: transform 0.3s ease;
	box-sizing: border-box;
}

.dv-360:hover {
	transform: scale(1.05);
}

.dv-360:active {
	transform: scale(0.98);
}

.dv-media-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.dv-media-empty p {
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

/* ── Registry ─────────────────────────────────────────────────────────────── */

.dv-registry {
	height: 400px;
	display: flex;
	flex-direction: column;
	background: rgba(5, 10, 25, 0.97);
	border: 1px solid rgba(234, 179, 8, 0.25);
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}

.dv-registry-head {
	flex-shrink: 0;
	padding: 14px 16px 10px;
	background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, transparent 100%);
	border-bottom: 1px solid rgba(234, 179, 8, 0.15);
}

.dv-registry-eyebrow {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.5);
	margin: 0 0 4px;
}

.dv-registry-heading {
	font-family: Lora, Georgia, serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: #EAB308;
	margin: 0 0 4px;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.dv-registry-count {
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	color: #FFFFFF;
	margin: 0;
}

.dv-registry-search {
	flex-shrink: 0;
	padding: 8px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	position: relative;
}

.dv-registry-search svg {
	position: absolute;
	left: 26px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.5;
}

.dv-registry-search input {
	font-family: Lora, Georgia, serif;
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px 7px 28px;
	border-radius: 6px;
	border: 1px solid rgba(234, 179, 8, 0.28);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.74rem;
	outline: none;
}

.dv-registry-search input:focus {
	border-color: #EAB308;
}

.dv-registry-az {
	flex-shrink: 0;
	padding: 6px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.dv-az,
.dv-az-all {
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.70rem;
	font-weight: 700;
	cursor: pointer;
	border-radius: 3px;
	padding: 0;
	width: 18px;
	height: 18px;
}

.dv-az-all {
	width: auto;
	padding: 2px 7px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.dv-az:disabled {
	color: rgba(255, 255, 255, 0.82);
	cursor: default;
}

.dv-az.is-active,
.dv-az-all.is-active {
	background: #EAB308;
	color: #0B1120;
}

.dv-registry-cols {
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	padding: 4px 16px;
	background: rgba(234, 179, 8, 0.04);
	border-bottom: 1px solid rgba(234, 179, 8, 0.1);
}

.dv-registry-cols span {
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.55);
}

.dv-registry-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.dv-reg-row {
	border-bottom: 1px solid rgba(234, 179, 8, 0.1);
}

.dv-reg-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
}

.dv-reg-row.is-open .dv-reg-toggle {
	background: rgba(234, 179, 8, 0.05);
}

.dv-reg-name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
	font-family: Lora, Georgia, serif;
	font-size: 1rem;
	color: #EAB308;
}

.dv-reg-name > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dv-reg-sign {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(234, 179, 8, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: rgba(234, 179, 8, 0.4);
	font-weight: 700;
	line-height: 1;
}

.dv-reg-row.is-open .dv-reg-sign {
	border-color: #EAB308;
	color: #EAB308;
}

.dv-reg-year {
	flex-shrink: 0;
	margin-left: 12px;
	font-family: monospace;
	font-size: 0.68rem;
	color: #EAB308;
	letter-spacing: 0.08em;
}

.dv-reg-detail {
	padding: 0 16px 12px 42px;
}

.dv-reg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	padding: 12px;
	background: rgba(234, 179, 8, 0.04);
	border-radius: 8px;
	border: 1px solid rgba(234, 179, 8, 0.1);
}

.dv-reg-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.48);
	margin-bottom: 3px;
}

.dv-reg-value {
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.82);
}

.dv-registry-empty {
	padding: 32px 16px;
	text-align: center;
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

.dv-registry-foot {
	flex-shrink: 0;
	padding: 7px 16px;
	border-top: 1px solid rgba(234, 179, 8, 0.1);
	background: rgba(234, 179, 8, 0.03);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dv-registry-foot span {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.dv-registry-clear {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(234, 179, 8, 0.45);
}

.dv-registry-clear:hover {
	color: #EAB308;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */

/* ── Related traditions ───────────────────────────────────────────────────── */
/* Sub-topic cards below the main card, as on the React page: a gold rule, the
   section label, then cards no wider than a third of the page. */

.dv-related {
	margin-top: 28px;
}

.dv-related-rule {
	border-top: 1px solid rgba(234, 179, 8, 0.3);
	margin-bottom: 24px;
}

.dv-related-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #EAB308;
	margin: 0 0 16px;
}

.dv-related-cards {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.dv-related-card {
	width: clamp(260px, 30%, 380px);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(11, 17, 32, 0.88);
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: 280px;
	text-decoration: none;
	transition: border-color 0.25s, transform 0.25s;
}

.dv-related-card:hover,
.dv-related-card:focus-visible {
	border-color: rgba(234, 179, 8, 0.3);
	transform: translateY(-2px);
}

.dv-related-thumb {
	height: 120px;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}

.dv-related-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.65) saturate(0.75);
}

.dv-related-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #0b1120, #142444);
}

.dv-related-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 17, 32, 0.92) 0%, rgba(11, 17, 32, 0.15) 55%, transparent 100%);
}

.dv-related-body {
	flex: 1;
	padding: 14px 16px 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 0;
}

.dv-related-title-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}

.dv-related-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(234, 179, 8, 0.55);
	flex-shrink: 0;
	margin-top: 5px;
}

.dv-related-title {
	font-family: Lora, Georgia, serif;
	font-size: 1rem;
	color: #EAB308;
	line-height: 1.3;
	margin: 0;
}

.dv-related-summary {
	font-family: Lora, Georgia, serif;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.55;
	margin: 0 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dv-related-cta {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.dv-related-explore {
	font-size: 0.70rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(234, 179, 8, 0.55);
	transition: color 0.25s ease;
}

.dv-related-card:hover .dv-related-explore {
	color: #EAB308;
}

.dv-bottom {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	padding-bottom: 20px;
}

/* Both archive controls are buttons, so they need the browser's button
   styling cleared to look as they did as links. */
.dv-archive-pill,
.dv-archive-btn {
	font-family: inherit;
	background: none;
	cursor: pointer;
}

.dv-archive-btn {
	border: 1px solid #EAB308;
	color: #EAB308;
	padding: 9px 26px;
	border-radius: 3px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}

.dv-archive-btn:hover {
	background: #EAB308;
	color: #0B1120;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */

.dv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.dv-lightbox-close {
	position: absolute;
	top: 18px;
	right: 22px;
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.6rem;
	line-height: 1;
}

.dv-lightbox-stage {
	position: relative;
	max-width: 90vw;
	max-height: 80vh;
	display: flex;
	align-items: center;
}

.dv-lightbox-stage img {
	max-width: 88vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 6px;
	display: block;
}

.dv-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
}

.dv-lightbox-prev {
	left: -48px;
}

.dv-lightbox-next {
	right: -48px;
}

@media (max-width: 720px) {
	.dv-lightbox-prev {
		left: 4px;
	}

	.dv-lightbox-next {
		right: 4px;
	}
}

.dv-lightbox-caption {
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-align: center;
}

.dv-lightbox-counter {
	color: rgba(255, 255, 255, 0.82);
	margin-left: 8px;
}

/* ── Sources & credits ── */
.dv-breadcrumb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dv-credits-pill {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	font-family: Inter, system-ui, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: #EAB308; background: rgba(11,17,32,0.55); border: 1px solid rgba(234,179,8,0.45); border-radius: 999px; padding: 8px 16px;
	backdrop-filter: blur(6px); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dv-credits-pill:hover { background: #EAB308; border-color: #EAB308; color: #0B1120; }
/* Directions sits beside Credits and matches it, so the two read as one row
   of actions rather than a button bolted on. */
.dv-directions-pill {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
	font-family: Inter, system-ui, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: #EAB308; background: rgba(11,17,32,0.55); border: 1px solid rgba(234,179,8,0.45); border-radius: 999px; padding: 8px 16px;
	backdrop-filter: blur(6px); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dv-directions-pill:hover, .dv-directions-pill:focus-visible { background: #EAB308; border-color: #EAB308; color: #0B1120; }
.dv-credit-line { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(234,179,8,0.18); font-family: Inter, system-ui, sans-serif; font-size: 0.85rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.dv-credit-more { background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer; font: inherit; font-weight: 700; color: #EAB308; text-decoration: none; }
.dv-credit-more:hover { color: #fff; }

.dv-credits { position: fixed; inset: 0; z-index: 100000; background: rgba(5,8,18,0.88); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dv-credits[hidden] { display: none; }
.dv-credits-panel {
	position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-sizing: border-box;
	background: rgba(14,24,45,0.98); border: 1px solid rgba(234,179,8,0.30); border-radius: 14px; padding: clamp(28px, 4vw, 40px);
	box-shadow: 0 30px 90px rgba(0,0,0,0.7);
}
.dv-credits-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(234,179,8,0.35); background: none; color: #EAB308; cursor: pointer; padding: 0; }
.dv-credits-close:hover { background: #EAB308; color: #0B1120; }
.dv-credits-eyebrow { font-family: Inter, system-ui, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(234,179,8,0.70); margin: 0 40px 10px 0; }
.dv-credits-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); color: #EAB308; margin: 0; line-height: 1.15; }
.dv-credits-rule { width: 48px; height: 2px; background: linear-gradient(to right, #EAB308, transparent); margin: 14px 0 22px; }
.dv-credits-label { font-family: Inter, system-ui, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(234,179,8,0.65); margin: 22px 0 10px; }
.dv-credits-people, .dv-credits-sources { list-style: none; margin: 0; padding: 0; }
.dv-credits-people li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.dv-credits-people li:last-child { border-bottom: none; }
.dv-credits-name { font-family: 'Lora', Georgia, serif; font-size: 1.05rem; color: #fff; margin: 0; }
.dv-credits-name a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(234,179,8,0.45); }
.dv-credits-role { font-family: Inter, system-ui, sans-serif; font-size: 0.78rem; color: #EAB308; margin: 3px 0 0; letter-spacing: 0.04em; }
.dv-credits-note { font-family: Inter, system-ui, sans-serif; font-size: 0.85rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 6px 0 0; }
.dv-credits-text { font-family: Inter, system-ui, sans-serif; font-size: 0.92rem; line-height: 1.75; color: #fff; margin: 0; }
.dv-credits-date { font-family: Inter, system-ui, sans-serif; font-size: 0.78rem; color: rgba(255, 255, 255, 0.82); margin: 8px 0 0; }
.dv-credits-sources li { padding: 6px 0; font-family: Inter, system-ui, sans-serif; font-size: 0.88rem; color: #fff; line-height: 1.5; }
.dv-credits-sources a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(234,179,8,0.45); }
.dv-credits-sources a:hover, .dv-credits-name a:hover { color: #EAB308; }
.dv-credits-curator { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(234,179,8,0.18); font-family: Inter, system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.82); }

/* ── Interview recordings (media column) and their video lightbox ── */
.dv-interview-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dv-interview-list:has(> :only-child) { grid-template-columns: 1fr; }
.dv-interview { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; text-align: left; color: inherit; }
.dv-interview-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(234,179,8,0.22); background: #0B1120; transition: border-color 0.25s ease; }
.dv-interview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.75); transition: filter 0.3s ease, transform 0.4s ease; }
.dv-interview:hover .dv-interview-thumb { border-color: rgba(234,179,8,0.6); }
.dv-interview:hover .dv-interview-thumb img { filter: brightness(0.9); transform: scale(1.03); }
.dv-interview-disc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.72); }
.dv-interview-title { font-family: Inter, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; line-height: 1.4; color: #fff; }
.dv-interview:hover .dv-interview-title { color: #EAB308; }

.dv-vlightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.dv-vlightbox[hidden] { display: none; }
.dv-vlightbox-panel { position: relative; width: 100%; max-width: 1040px; }
.dv-vlightbox-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(11,17,32,0.85); border: 1px solid rgba(234,179,8,0.45); color: #fff; cursor: pointer; padding: 0; }
.dv-vlightbox-close:hover { background: #EAB308; border-color: #EAB308; color: #0B1120; }
.dv-vlightbox-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1.5px solid #EAB308; box-shadow: 0 40px 120px rgba(0,0,0,0.9); }
.dv-vlightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dv-vlightbox-caption { padding: 16px 4px 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dv-vlightbox-label { font-family: Inter, system-ui, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(234,179,8,0.7); margin: 0; }
.dv-vlightbox-sep { width: 1px; height: 12px; background: rgba(234,179,8,0.25); }
.dv-vlightbox-title { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: clamp(0.85rem, 1.4vw, 1rem); color: #F8FAFC; margin: 0; flex: 1; }
.dv-vlightbox-nav { display: flex; align-items: center; gap: 10px; font-family: Inter, system-ui, sans-serif; font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
.dv-vlightbox-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(234,179,8,0.4); background: none; color: #EAB308; font-size: 1.2rem; cursor: pointer; padding: 0; }
.dv-vlightbox-nav button:hover { background: #EAB308; color: #0B1120; }

/* The spoken summary, above the written text */
.dv-audio-summary { margin: 0 0 24px; }
.dv-audio-summary .me-player { max-width: none; }

/* A related item still in research: shown, but not open */
.dv-related-card.is-research { cursor: default; opacity: 0.72; }
.dv-related-card.is-research:hover { transform: none; }
.dv-related-card.is-research .dv-related-explore {
	color: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	padding: 2px 7px;
}

/* The line of rulers, beside the text (inc/heritage-rulers.php).
   A two-column row on a wide screen, stacking to name over period on a
   narrow one, so the same markup reads on a phone without a second table. */
.dv-rulers {
	background: rgba(5, 10, 25, 0.97);
	border: 1px solid rgba(234, 179, 8, 0.25);
	border-radius: 12px;
	padding: 20px 20px 16px;
	flex-shrink: 0;
}

.dv-rulers-heading {
	font-family: Lora, Georgia, serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: #EAB308;
	margin: 0 0 14px;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.dv-rulers-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 520px;
	overflow-y: auto;
}

.dv-ruler {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 14px;
	padding: 9px 0;
	border-top: 1px solid rgba(234, 179, 8, 0.14);
}

.dv-ruler:first-child {
	border-top: 0;
}

.dv-ruler-name {
	font-family: Lora, Georgia, serif;
	font-size: 0.92rem;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.3;
}

.dv-ruler-period {
	font-family: Lora, Georgia, serif;
	font-size: 0.78rem;
	color: #EAB308;
	margin: 0;
	text-align: right;
	white-space: nowrap;
	align-self: baseline;
}

.dv-ruler-note {
	grid-column: 1 / -1;
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.82);
	margin: 3px 0 0;
	line-height: 1.45;
}

.dv-rulers-note {
	font-family: Lora, Georgia, serif;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.82);
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(234, 179, 8, 0.2);
	line-height: 1.5;
}

@media (max-width: 420px) {
	.dv-ruler {
		grid-template-columns: minmax(0, 1fr);
	}

	.dv-ruler-period {
		text-align: left;
	}
}

/* Lists in an item's text. Tailwind's reset strips the markers, so nothing
   typed as a list in the editor showed as one. */
.dv-narrative ul,
.dv-narrative ol {
	margin: 0 0 1.4rem;
	padding-left: 1.5em;
	font-family: Lora, Georgia, serif;
	color: #FFFFFF;
}

.dv-narrative ul { list-style: disc; }
.dv-narrative ol { list-style: decimal; }

.dv-narrative li {
	margin: 0 0 0.6em;
	font-size: 1rem;
	line-height: 1.75;
}

.dv-narrative li::marker {
	color: #EAB308;
}

.dv-narrative li > ul,
.dv-narrative li > ol {
	margin: 0.6em 0 0;
}

/* ── On a phone ───────────────────────────────────────────────────────────── */

/* The gallery could not be worked by thumb. The dots are drawn 4px square
   and the arrows 26px, well under a fingertip.

   The dots keep their appearance: a transparent hit area is laid over each
   one instead. Their spacing has to grow with it, or neighbouring hit areas
   would swallow one another, which is what happens on the interactive map
   and the reason the pins there were left alone. Here there is room: six
   dots at a 30px pitch need 180px of a 293px row. */
@media (max-width: 639px) {
	.dv-dots {
		gap: 26px;
	}

	.dv-dot {
		position: relative;
	}

	.dv-dot::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30px;
		height: 30px;
		transform: translate(-50%, -50%);
	}

	.dv-frame-nav {
		width: 44px;
		height: 44px;
	}

	/* The rights line was 9.6px. It is legal wording people do read. */
	.dv-rights {
		font-size: 0.78rem;
	}
}

/* ── A file offered for download ──────────────────────────────────────────── */
/* Sits under the summary, above the page text: a comic, a booklet, a map.
   Gold rule and gold label, white note, in keeping with everything else. */

.dv-download {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	padding: 14px 18px;
	border: 1px solid rgba(212, 175, 55, 0.30);
	border-radius: 6px;
	background: rgba(212, 175, 55, 0.05);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dv-download:hover,
.dv-download:focus-visible {
	border-color: rgba(212, 175, 55, 0.65);
	background: rgba(212, 175, 55, 0.09);
}

.dv-download-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.14);
	color: #D4AF37;
}

.dv-download-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.dv-download-label {
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #D4AF37;
}

.dv-download-note {
	font-family: 'Lora', Georgia, serif;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

@media (max-width: 639px) {
	.dv-download {
		padding: 13px 14px;
		gap: 12px;
	}

	/* A thumb needs the full target; the row is already taller than 44px. */
	.dv-download-icon {
		width: 44px;
		height: 44px;
	}
}

/* ── An item still in research ────────────────────────────────────────────── */
/* It used to be a 404, which told a visitor the page did not exist when it
   did, and made every link to it look like a fault. This says what is true
   and offers the way on. */

.dv-research {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62vh;
	padding: clamp(60px, 10vw, 120px) 20px;
}

.dv-research-card {
	max-width: 34rem;
	text-align: center;
	border-top: 2px solid rgba(212, 175, 55, 0.5);
	padding-top: clamp(26px, 4vw, 38px);
}

.dv-research-eyebrow {
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #D4AF37;
	margin: 0 0 14px;
}

.dv-research-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	font-weight: 400;
	color: #F8FAFC;
	line-height: 1.15;
	margin: 0 0 18px;
}

.dv-research-body {
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	color: #FFFFFF;
	margin: 0 0 16px;
}

.dv-research-note {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
}

.dv-research-back {
	display: inline-block;
	margin-top: 10px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #D4AF37;
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.4);
	padding-bottom: 4px;
	min-height: 44px;
}

.dv-research-back:hover,
.dv-research-back:focus-visible {
	border-bottom-color: #D4AF37;
}

/* Deposit terms and support credits, with the other credits. */
.dv-credits-deposit {
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.88rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 12px;
}

/* A book on a heritage page sits in the column, not across it. */
.dv-book {
	max-width: 340px;
	margin: 0 0 28px;
}