/*
 * Devart Ledger: look layer. Loaded after main.css.
 * Palette "Monochrome Beach": graphite, stormy teal, white, dust grey, yale blue.
 */

:root {
	--dl-graphite: #353535;
	--dl-teal: #3c6e71;
	--dl-white: #ffffff;
	--dl-dust: #d9d9d9;
	--dl-yale: #284b63;
	--dl-meta: #5c5c5c;
	--dl-surface: #f3f4f4;
	--dl-line: rgba(40, 75, 99, 0.09);
	--dl-space: 1.5rem;
}

/* Dark mode, built from the same hues. */
body.dl-dark-mode {
	--dl-graphite: #dfe4e6;
	--dl-teal: #7fc0c3;
	--dl-white: #162631;
	--dl-dust: #2d4a5a;
	--dl-yale: #dfe4e6;
	--dl-meta: #b3c0c6;
	--dl-surface: #1b2f3c;
	--dl-line: rgba(223, 228, 230, 0.07);
}

/* ---------- Focus and skip link ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dl-teal);
	outline-offset: 2px;
}

.skip-link:focus {
	background: var(--dl-white);
	color: var(--dl-yale);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* ---------- Header: ticker strip, masthead, navigation band ---------- */
.dl-site-header {
	position: relative;
}

.dl-site-header .dl-section-wrap {
	position: relative;
}

/* The one decorative animation: a slow drifting pattern in the masthead (60 s per cycle). */
.dl-masthead-anim .dl-site-header .dl-middle-section-wrap {
	overflow: hidden;
}

.dl-masthead-anim .dl-site-header .dl-middle-section-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40px;
	right: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 20% 50%, rgba(60, 110, 113, 0.07), transparent 55%),
		radial-gradient(circle at 80% 50%, rgba(40, 75, 99, 0.06), transparent 55%),
		repeating-linear-gradient(135deg, rgba(217, 217, 217, 0.5) 0 1px, transparent 1px 28px);
	animation: dl-masthead-drift 60s linear infinite;
}

body.dl-dark-mode.dl-masthead-anim .dl-site-header .dl-middle-section-wrap::before {
	background:
		radial-gradient(circle at 20% 50%, rgba(127, 192, 195, 0.06), transparent 55%),
		radial-gradient(circle at 80% 50%, rgba(40, 75, 99, 0.2), transparent 55%),
		repeating-linear-gradient(135deg, rgba(45, 74, 90, 0.7) 0 1px, transparent 1px 28px);
}

.dl-site-header .dl-middle-section-wrap > * {
	position: relative;
	z-index: 1;
}

/* One period of the line pattern is 28px * sqrt(2) = 39.6px, so the loop is seamless. */
@keyframes dl-masthead-drift {
	from { transform: translateX(0); }
	to { transform: translateX(39.6px); }
}

/* Centred masthead title. */
.dl-site-header .dl-site-title-tagline {
	text-align: center;
}

.dl-site-header .dl-site-title-tagline .site-title {
	letter-spacing: -0.01em;
}

/* Navigation band. */
.dl-site-header .dl-bottom-section-wrap {
	border-bottom-color: var(--dl-teal);
}

.dl-site-header .dl-bottom-section-wrap svg,
.dl-site-header .dl-bottom-section-wrap .dl-svg-icon svg {
	fill: #ffffff;
	color: #ffffff;
}

.dl-site-header .dl-bottom-section-wrap .dl-nav-menu > .menu-item > a {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: inherit;
}

.dl-site-header .dl-bottom-section-wrap .dl-nav-menu > .menu-item > a:hover,
.dl-site-header .dl-bottom-section-wrap .dl-nav-menu > .menu-item.current-menu-item > a {
	box-shadow: inset 0 -3px 0 var(--dl-white);
}

.dl-site-header .dl-bottom-section-wrap .search-field {
	color: var(--dl-graphite);
}

/* Ticker strip: one headline, faded in and out. */
.dl-ticker {
	width: min(680px, 100%);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: #ffffff;
	font-size: 13px;
}

.dl-ticker-heading {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	padding: 0.2rem 0.65rem;
	background: var(--dl-teal);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}

body.dl-dark-mode .dl-ticker-heading {
	background: #3c6e71;
}

.dl-ticker-heading-icon svg {
	width: 12px;
	height: 12px;
	fill: #ffffff;
}

.dl-ticker-list {
	position: relative;
	flex: 1;
	min-width: 160px;
	height: 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-ticker-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.dl-ticker-item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
}

.dl-ticker-item img {
	width: 28px;
	height: 20px;
	object-fit: cover;
}

.dl-ticker-link {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #ffffff;
	text-decoration: none;
}

.dl-ticker-link:hover {
	text-decoration: underline;
}

.dl-ticker-nav {
	display: flex;
	flex: none;
}

.dl-ticker-nav button {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.dl-ticker-nav button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.dl-top-section-wrap .dl-date-and-time {
	color: var(--dl-dust);
}

/* ---------- Sticky header ---------- */
.dl-header-inner.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.admin-bar .dl-header-inner.is-stuck {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .dl-header-inner.is-stuck {
		top: 46px;
	}
}

.dl-header-inner.is-stuck .dl-top-section-wrap,
.dl-header-inner.is-stuck .dl-middle-section-wrap {
	display: none;
}

/* ---------- Live search ---------- */
.dl-header-search {
	position: relative;
}

.dl-live-results {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	width: min(420px, 90vw);
	background: var(--dl-white);
	color: var(--dl-graphite);
	border: 1px solid var(--dl-dust);
	border-top: 3px solid var(--dl-teal);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.dl-live-results[hidden] {
	display: none;
}

.dl-live-results ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-live-results li {
	border-bottom: 1px solid var(--dl-dust);
}

.dl-live-results li:last-child {
	border-bottom: 0;
}

.dl-live-results a {
	display: block;
	padding: 0.7rem 1rem;
	color: var(--dl-yale);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.dl-live-results a:hover,
.dl-live-results a:focus {
	background: var(--dl-surface);
	color: var(--dl-teal);
}

.dl-live-none {
	padding: 0.7rem 1rem;
	color: var(--dl-meta);
}

.dl-live-all a {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Reading progress bar ---------- */
.dl-reading-progress-bar {
	background: var(--dl-teal);
}

/* ---------- Motion: nothing else moves ---------- */
img,
.dl-grid-media img,
.dl-grid-item:hover img,
.dl-magazine-layout-1 .dl-grid-item:hover img,
article:hover img {
	transform: none !important;
}

.dl-ticker-icon-circle,
[class*="blink"] {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Cards, headings, spacing ---------- */
.site-content {
	padding-top: calc(var(--dl-space) * 1.5);
}

h1, h2, h3, h4, h5, h6,
.dl-grid-title {
	letter-spacing: -0.005em;
}

.dl-grid-media,
.dl-grid-media img,
.dl-big-post,
.dl-grid-item img {
	border-radius: 0;
}

/* Ledger card: hairline frame and a teal rule on top. */
.dl-list-layout-list-7 .dl-grid-item,
.dl-grid-item.dl-card {
	border: 1px solid var(--dl-dust);
	border-top: 3px solid var(--dl-teal);
	padding: 1rem;
	margin-bottom: var(--dl-space);
	background: var(--dl-white);
}

.dl-blog-page-inner article,
.dl-archive-page-inner article {
	border-bottom: 1px solid var(--dl-dust);
	padding-bottom: var(--dl-space);
}

/* Category label: small caps in the accent, no filled box on cards. */
.dl-post-categories a,
.dl-grid-categories a {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}

/* Widget titles: serif with a double rule. */
.dl-widget-title-text,
.widget-title {
	font-family: "Source Serif 4", Georgia, serif;
	text-transform: none;
	border-bottom: 1px solid var(--dl-yale);
	padding-bottom: 0.4rem;
	box-shadow: 0 3px 0 -2px var(--dl-teal);
}

/* Buttons and inputs: square. */
button,
input[type="submit"],
.dl-load-more,
.search-submit {
	border-radius: 0;
}

/* ---------- Footer ---------- */
.dl-site-footer .dl-footer-menu ul,
.dl-site-footer .dl-footer-menu .dl-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dl-site-footer .dl-footer-menu a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
}

.dl-site-footer .dl-copyright {
	text-align: center;
	font-size: 13px;
}

body.dl-dark-mode a:hover {
	color: #9fd0d2;
}

.dl-single-post-header h1,
.dl-post-content h2,
.dl-post-content h3,
.dl-grid-title,
.dl-archive-page-header h1 {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

body.dl-dark-mode .dl-top-section-wrap .dl-date-and-time,
body.dl-dark-mode .dl-top-section-wrap .dl-ticker-link {
	color: #dfe4e6 !important;
}

/* Cards without a picture still need a readable (dark) background behind white text. */
.dl-grid-media:not(:has(img)) {
	background: var(--dl-yale);
}

/* Dark mode: widget text the base styles colour with fixed light-mode values. */
body.dl-dark-mode .dl-tabs li.active,
body.dl-dark-mode .dl-grid-filter {
	color: var(--dl-teal);
}

body.dl-dark-mode .dl-no-posts p {
	color: var(--dl-graphite);
}