/* Crossroads visual and responsive overrides for the DLE 21 Cover skin.
   Keep vendor stylesheets untouched; load this file after styles.css. */

:root {
	/* 75% of Full HD and 4K viewports, clamped for desktop readability. */
	--container: clamp(45rem, 75vw, 180rem);

	/* Match the established Crossroads purple palette. */
	--accent: #7523c6;
	--accent-strong: #8a39dc;
	--accent-soft: #f3eafb;
	--accent-hover-soft: #e8d9f7;
	--line: #e5ddec;
	--line-soft: #f0ebf4;
	/* Keep the original violet gradient for title bands, navigation, and breadcrumbs. */
	--crossroads-header-gradient: linear-gradient(112deg, #b395de 0%, #9e71d3 39%, #835bb8 70%, #70499f 100%);
	--crossroads-header-fill:
		radial-gradient(ellipse 60% 135% at 49% -26%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05) 48%, transparent 78%),
		var(--crossroads-header-gradient);
	/* Flat owner-specified fill for the complete outer block frame; no gradient. */
	--crossroads-panel-surface: #F0F2F8;
	/* Lighter inset surface behind the preview cards; it shows in the gaps between them and carries the same 1px frame as the outer block edges. */
	--crossroads-gap-surface: #EEF1F6;
	/* Article bodies, listing columns and homepage preview cards share one surface. */
	--crossroads-content-surface: #E6EBF3;
	--crossroads-story-surface: #E6EBF3;
	/* Subtle cool gray for article tags, previous/next blocks and related-card chips;
	   slightly darker than the #E6EBF3 article surface, without a strong blue cast. */
	--crossroads-meta-surface: #D9DEE5;
	--crossroads-meta-hover: #B3C4D9;
	--crossroads-meta-label: #33414f;
}

:root[data-accent="ink"] {
	--accent: #7523c6;
	--accent-strong: #8a39dc;
	--accent-soft: #f3eafb;
	--accent-hover-soft: #e8d9f7;
}

body {
	/* The original Crossroads background stays fixed on desktop. */
	background-color: #100c1b;
	background-image: url("../images/page_bg.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

/* Keep teaser and static text at a readable measure; full articles are reset below. */
.story-text {
	width: 100%;
	max-width: 72ch;
	margin-inline: auto;
}

@media (max-width: 47.5em) {
	/* Small screens use the available width rather than enforcing 720px. */
	:root {
		--container: 45rem;
	}

	body {
		/* Mobile browsers handle fixed backgrounds inconsistently and expensively. */
		background-attachment: scroll;
		background-position: center top;
	}
}

/* Crossroads header: retain the compact brand and place the ad on the right. */
.crossroads-header {
	display: grid;
	grid-template-columns: minmax(11rem, 1fr) minmax(0, 45.5rem);
	align-items: center;
	gap: var(--sp-6);
	padding-block: var(--sp-5);
}

/* Desktop: the text lock-up is replaced by the rendered neon sign; the narrow-screen
   typographic lock-up above still applies below 47.5625em. */
.crossroads-header .brand__lockup {
	display: none;
}

@media (min-width: 47.5625em) {
	.crossroads-header .brand__lockup {
		display: block;
		width: 100%;
		height: 180px;
		object-fit: contain;
		object-position: left center;
	}

	.crossroads-header .brand__mark,
	.crossroads-header .brand__text {
		display: none;
	}

	.crossroads-header .brand {
		width: 100%;
		padding-inline-end: 0;
	}
}

.crossroads-header__right {
	display: grid;
	min-width: 0;
	gap: var(--sp-2);
}

.crossroads-header__tools {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-3);
}

.crossroads-google-search {
	width: min(100%, 28rem);
	max-width: 28rem;
	min-width: 0;
	margin: 0;
}

.crossroads-google-search .gsc-control-cse {
	width: 100% !important;
	max-width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.crossroads-google-search .gsc-control-wrapper-cse,
.crossroads-google-search table.gsc-search-box,
.crossroads-google-search .gsc-input-box {
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
}

.crossroads-google-search .gsc-search-button-v2 {
	border-color: var(--accent-strong) !important;
	border-radius: var(--r-md) !important;
	background: var(--accent-strong) !important;
}

.crossroads-header__ad {
	display: block;
	width: min(100%, 45.4375rem);
	justify-self: end;
}

.crossroads-header__ad img {
	display: block;
	width: 100%;
	height: auto;
}

.crossroads-header .header-actions {
	flex: none;
	margin-inline-start: 0;
}

/* Crossroads homepage sections and article thumbnails. */
.crossroads-home {
	display: grid;
	gap: var(--sect-gap);
	padding-block: var(--sect-pad);
}

.crossroads-home__lead {
	display: grid;
	grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
	align-items: stretch;
	/* One-third of the previous section gap, matching the requested tighter pairing. */
	gap: calc(var(--sect-gap) / 3);
}

.crossroads-panel {
	min-width: 0;
	padding: var(--sect-pad);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--sh-1);
}

.crossroads-section {
	min-width: 0;
}

.crossroads-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: var(--hair) solid var(--line);
}

.crossroads-section__head h1,
.crossroads-section__head h2 {
	font-family: var(--font-serif);
	font-size: var(--fs-h2);
}

.crossroads-section__head a {
	color: var(--accent-strong);
}

.crossroads-visitors__frame {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.crossroads-visitors__frame iframe {
	display: block;
	width: 100%;
	max-width: 295px;
	min-height: 370px;
	border: 0;
}

/* Nest homepage and article-side visitor feeds inside matching inset/card surfaces. */
.crossroads-home .crossroads-visitors__frame,
.crossroads-article-sidebar .crossroads-visitors__frame {
	width: calc(100% + var(--sp-3) + var(--sp-3));
	max-width: none;
	margin-inline: calc(0px - var(--sp-3));
	padding: var(--sp-3);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--crossroads-gap-surface);
}

.crossroads-home .crossroads-visitors__frame iframe,
.crossroads-article-sidebar .crossroads-visitors__frame iframe {
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: 0 0 0 var(--hair) var(--line), var(--sh-1);
}

/* Match the homepage visitor iframe width on desktop. */
@media (min-width: 47.5625em) {
	.crossroads-home .crossroads-visitors__frame iframe,
	.crossroads-article-sidebar .crossroads-visitors__frame iframe {
		max-width: 285px;
	}
}

/* Match the homepage visitor iframe width on mobile. */
@media (max-width: 47.5em) {
	.crossroads-home .crossroads-visitors__frame iframe,
	.crossroads-article-sidebar .crossroads-visitors__frame iframe {
		max-width: 310px;
	}
}

.crossroads-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-5);
}

.crossroads-visitors {
	display: flex;
	flex-direction: column;
}

/* Give every homepage story grid one inset surface and matching cool-gray cards. */
.crossroads-card-grid--latest,
.crossroads-card-grid--three {
	grid-auto-rows: 1fr;
	align-items: stretch;
	padding: var(--sp-3);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--crossroads-gap-surface);
}

.crossroads-card-grid--latest {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crossroads-card-grid--latest .crossroads-card,
.crossroads-card-grid--three .crossroads-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-4);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-md);
	background: var(--crossroads-content-surface);
	box-shadow: var(--sh-1);
}

.crossroads-card-grid--latest .crossroads-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.crossroads-card-grid--latest .crossroads-card__excerpt {
	display: block;
	overflow: visible;
}

.crossroads-card,
.crossroads-feature,
.crossroads-compact {
	min-width: 0;
}

.crossroads-card__media,
.crossroads-feature__media {
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--sp-3);
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--surface-soft);
}

.crossroads-card__media img,
.crossroads-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crossroads-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
	color: var(--muted);
	font-size: var(--fs-meta);
}

.crossroads-card__meta > span:first-child {
	color: var(--accent-strong);
}

.crossroads-card__views::before {
	content: "·";
	margin-inline-end: var(--sp-2);
}

.crossroads-card h3,
.crossroads-feature h3,
.crossroads-compact h3 {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.crossroads-card h3 a,
.crossroads-feature h3 a,
.crossroads-compact h3 a {
	color: var(--text);
}

.crossroads-card h3 a:hover,
.crossroads-feature h3 a:hover,
.crossroads-compact h3 a:hover {
	color: var(--accent-strong);
}

.crossroads-card__excerpt,
.crossroads-feature__excerpt {
	max-width: 58ch;
	margin-top: var(--sp-2);
	color: var(--news-text);
	font-family: var(--font-serif);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.crossroads-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Keep the category cards aligned inside a soft inset surface. */
	align-items: stretch;
	gap: var(--sp-5);
	padding: var(--sp-3);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--crossroads-gap-surface);
}

.crossroads-category {
	min-width: 0;
	padding: var(--sp-4);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-md);
	background: var(--crossroads-content-surface);
	box-shadow: var(--sh-1);
}

.crossroads-feature__body {
	padding-bottom: var(--sp-3);
}

.crossroads-compact-list {
	display: grid;
}

.crossroads-compact {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--sp-3);
	padding-block: var(--sp-3);
	border-top: var(--hair) solid var(--line-soft);
}

.crossroads-compact__media {
	display: block;
	width: 5.5rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--surface-soft);
}

.crossroads-compact__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crossroads-compact__body > time {
	color: var(--muted);
	font-size: var(--fs-meta);
}

.fullstory__source {
	width: 100%;
	max-width: 72ch;
	margin-inline: auto;
	color: var(--muted);
	font-size: var(--fs-sm);
}

.fullstory__source p {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: var(--hair) solid var(--line);
}

.fullstory__source a { color: var(--accent-strong); }

.download-button {
	display: flex;
	justify-content: center;
	max-width: 100%;
	margin: var(--sp-6) auto;
}

.download-button img {
	display: block;
	width: 242px;
	max-width: 100%;
	height: auto;
}

.crossroads-article-sidebar .widget {
	min-width: 0;
}

body:not(.page--article) .layout {
	grid-template-columns: minmax(0, 1fr);
}

.fullstory__head,
.fullstory__tags {
	width: 100%;
	max-width: 72ch;
	margin-inline: auto;
}

.related {
	width: 100%;
	max-width: 96rem;
	margin-inline: auto;
}

.discussion {
	width: 100%;
	max-width: 72ch;
	margin-inline: auto;
}

@media (min-width: 2400px) {
	.crossroads-card-grid--latest {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Preserve the desktop minimum on compact laptops with a narrow gutter. */
@media (min-width: 47.5em) and (max-width: 70em) {
	.container {
		width: min(calc(100% - var(--sp-6)), var(--container));
	}
}

/* Reflow the homepage and category navigation on tablets. */
@media (max-width: 70em) {
	.crossroads-home__lead {
		grid-template-columns: 1fr;
	}

	.crossroads-latest { order: 1; }
	.crossroads-visitors { order: 2; }
	.crossroads-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crossroads-card-grid,
	.crossroads-card-grid--latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.category-scroll {
		height: auto;
		overflow: visible;
		scroll-snap-type: none;
	}

	.category-scroll::before,
	.category-scroll::after { display: none; }

	.category-menu {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.category-menu__item { max-width: 100%; }
	.category-link { min-height: 44px; padding: 10px 12px; }
}

/* Keep the header compact on narrow screens. */
@media (max-width: 47.5em) {
	.utility {
		display: none;
	}

	.crossroads-header {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
	}

	/* Narrow screens: wordmark in the plate's height, uppercase, with a soft embossed shadow.
	   One variable drives both so the text never outgrows the icon or the avatar slot. */
	.crossroads-header .brand {
		--brand-mark-size: min(38px, calc((100vw - 120px) / 7.9));
		padding-inline-end: 3.25rem;
		gap: 12px;
	}

	.crossroads-header .brand__mark {
		width: var(--brand-mark-size);
		height: var(--brand-mark-size);
		border-radius: calc(var(--brand-mark-size) * .29);
	}

	.crossroads-header .brand__mark .icon {
		width: calc(var(--brand-mark-size) * .68);
		height: calc(var(--brand-mark-size) * .68);
	}

	.crossroads-header .brand__name {
		font-size: var(--brand-mark-size);
		line-height: 1;
		letter-spacing: .005em;
		text-transform: uppercase;
		text-shadow:
			0 1px 0 rgba(255, 255, 255, .22),
			0 2px 0 rgba(76, 41, 114, .32),
			0 8px 18px rgba(42, 16, 72, .30);
	}

	.crossroads-header .header-actions {
		position: absolute;
		inset-block-start: var(--sp-4);
		inset-inline-end: 0;
		margin: 0;
	}

	.crossroads-header__tools {
		display: block;
	}

	.crossroads-google-search {
		order: initial;
		width: 100%;
		max-width: none;
		margin-top: var(--sp-3);
	}

	.crossroads-header__ad {
		width: 100%;
		max-width: 45.4375rem;
		justify-self: center;
	}

	.crossroads-category-grid,
	.crossroads-card-grid,
	.crossroads-card-grid--latest {
		grid-template-columns: minmax(0, 1fr);
	}

	.crossroads-home { gap: var(--sp-5); }
	/* Match the two-row feed to its measured 130px mobile content height. */
	.crossroads-home .crossroads-visitors__frame iframe {
		height: 130px;
		min-height: 130px;
	}
	.crossroads-panel { padding: var(--sp-4); }
	.crossroads-home .crossroads-visitors__frame {
		width: calc(100% + var(--sp-2) + var(--sp-2));
		margin-inline: calc(0px - var(--sp-2));
		padding: var(--sp-2);
	}
	.crossroads-category-grid { padding: var(--sp-2); }
	.crossroads-category { padding: var(--sp-3); }
	.crossroads-section__head h1,
	.crossroads-section__head h2 { font-size: var(--fs-h3); }
}

/* Wrap the longer recent-publications link on the narrowest phones. */
@media (max-width: 18.75em) {
	.crossroads-latest .crossroads-section__head { flex-wrap: wrap; }
	.crossroads-latest .crossroads-section__head > a { margin-inline-start: auto; }
}

/* Scale the fixed-width external visitor feed on very narrow phones. */
@media (min-width: 320px) and (max-width: 350px) {
	.crossroads-visitors__frame { height: 18.375rem; }
	.crossroads-home .crossroads-visitors__frame {
		height: calc(116px + var(--sp-2) + var(--sp-2));
	}

	/* Keep the full six-row article iframe inside its mobile inset. */
	.crossroads-article-sidebar .crossroads-visitors__frame {
		height: 338px;
	}

	.crossroads-visitors__frame iframe {
		width: 295px;
		max-width: none;
		flex: 0 0 295px;
		transform: scale(.89);
		transform-origin: top center;
	}

	.crossroads-home .crossroads-visitors__frame iframe,
	.crossroads-article-sidebar .crossroads-visitors__frame iframe {
		width: 310px;
		max-width: none;
		flex: 0 0 310px;
		transform: scale(.847);
	}

	/* Align the scaled six-row feed inside the slightly taller inset. */
	.crossroads-article-sidebar .crossroads-visitors__frame iframe {
		transform: translateY(10px) scale(.847);
	}
}

/* Hide the fixed-width visitor widget below 320px rather than clipping it. */
@media (max-width: 319px) {
	.crossroads-visitors__frame { display: none; }
	.crossroads-home .crossroads-compact__body h3 a { overflow-wrap: anywhere; }
}

/* Keep the two-row homepage feed visible at the narrowest supported phone width. */
@media (min-width: 280px) and (max-width: 319px) {
	.crossroads-home .crossroads-visitors__frame {
		display: flex;
		height: calc(98px + var(--sp-2) + var(--sp-2));
	}

	.crossroads-home .crossroads-visitors__frame iframe {
		width: 310px;
		max-width: none;
		flex: 0 0 310px;
		height: 130px;
		min-height: 130px;
		transform: scale(.714);
		transform-origin: top center;
	}

}

/* The virtual Website parent is a full-width dropdown toggle, not a category link. */
.category-menu__toggle--label {
	width: auto;
	height: 44px;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-inline-start: 0;
	padding: 10px 12px;
	color: var(--news-text);
	font: inherit;
	font-size: var(--fs-ui);
	font-weight: 600;
}

.category-menu__toggle--label:hover { color: var(--text); }

/* Compact footer with the original license and verification badges. */
.site-footer--minimal { border-top: var(--hair) solid var(--line); }

.site-footer--minimal .footer-bottom {
	min-height: auto;
	flex-direction: row;
	padding-block: var(--sp-4);
	border-top: 0;
}

.footer-identity {
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.footer-identity a { color: var(--muted); }

.footer-badges {
	display: flex;
	max-width: 100%;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-badges li { display: flex; align-items: center; }
.footer-badges a { display: block; line-height: 0; }
.footer-badges img { display: block; width: 88px; height: 31px; object-fit: contain; }

/* Match the header search frame and give transparent badge areas one shared surface. */
.footer-badges {
	box-sizing: border-box;
	width: fit-content;
	padding: 6px 8px;
	border: var(--hair) solid rgba(255, 255, 255, .28);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

@media (max-width: 47.5em) {
	.crossroads-card-grid--latest { grid-auto-rows: auto; }
	.crossroads-card-grid--three {
		grid-auto-rows: auto;
		padding: var(--sp-2);
	}
	.crossroads-card-grid--three .crossroads-card { padding: var(--sp-3); }

	.site-footer--minimal .footer-bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--sp-3);
	}

	.footer-identity { justify-content: center; text-align: center; }
	.footer-badges { justify-content: center; }

	/* Let the dropdown shrink below its desktop minimum on very small phones. */
	.category-menu__submenu {
		min-width: min(18.5rem, calc(100vw - var(--sp-6)));
	}
}

/* Keep the utility bar, header and footer on the same centered content measure. */
.utility,
.site-header,
.site-footer {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
}

/* The old Crossroads header scrolls with the document instead of sticking. */
.site-header,
.site-header.is-unstuck {
	position: static;
	inset-block-start: auto;
}

/* The full-news field needs an opaque surface over the page background. */
.page--article .feed {
	padding: var(--sect-pad);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--crossroads-story-surface);
	box-shadow: var(--sh-1);
}

/* Fill the article tag pills and the previous/next blocks with the requested blue.
   Text is darkened so it keeps readable contrast on #9FB7D0. */
.page--article .fullstory__tags .chips--tags a {
	background: var(--crossroads-meta-surface);
	color: var(--text);
}

.page--article .fullstory__tags .chips--tags a:hover,
.page--article .fullstory__tags .chips--tags a:focus-visible {
	background: var(--crossroads-meta-hover);
	color: var(--text);
}

.page--article .story-nav__item {
	background: var(--crossroads-meta-surface);
	border-color: var(--crossroads-meta-hover);
}

.page--article .story-nav__item:hover,
.page--article .story-nav__item:focus-visible {
	border-color: var(--accent-strong);
}

.page--article .story-nav__label {
	color: var(--crossroads-meta-label);
}

/* Fill the category chips on the related cards with the same blue as the article tags.
   The per-category hover colours stay untouched on purpose. */
.page--article .related-card .cat-link {
	--cat-link-bg: var(--crossroads-meta-surface);
	--cat-link-color: var(--text);
}

/* Match the category chips on homepage story cards and category listings.
   Keep each category's existing hover colors unchanged. */
.crossroads-home .crossroads-card__meta .cat-link,
body.page:not(.page--article) .layout__main .story-top .cat-link {
	--cat-link-bg: var(--crossroads-meta-surface);
	--cat-link-color: var(--text);
}

/* Give each action icon on category/listing article previews the same surface colour.
   Retain the stock accent hover/active feedback. */
body.page:not(.page--article) .layout__main .story-card .story-tools .story-actions .icon-action {
	background: var(--crossroads-meta-surface);
}

/* Category, tag, search and other listing pages share one main content column. */
body.page:not(.page--article) .layout__main {
	padding: var(--sect-pad);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--crossroads-content-surface);
	box-shadow: var(--sh-1);
}

/* The preview image is already part of the short story; remove its duplicate side column. */
body.page:not(.page--article) .layout__main .story-card {
	grid-template-columns: minmax(0, 1fr);
}

/* Widen centered teaser text toward the title while keeping its old right edge fixed. */
@media (min-width: 47.5625em) {
	body.page:not(.page--article) .layout__main .story-text {
		max-width: 90ch;
		margin-inline-start: auto;
		margin-inline-end: max(0px, calc((100% - 72ch) / 2));
	}
}

/* Give every listing preview a visible divider between it and the previous one. */
body.page:not(.page--article) .layout__main .story-card {
	border-top-color: var(--line);
}

/* Match the section-heading divider between previews; the heading already separates the first. */
body.page:not(.page--article) .layout__main .feed > .story-card:first-child {
	border-top: 0;
}

body.page:not(.page--article) .layout__main .feed > .story-card + .story-card {
	border-top: calc(var(--hair)*2) solid var(--text);
}

/* Use the accepted gray-blue fill on inactive numeric tiles; retain hover feedback. */
body.page:not(.page--article) .layout__main .pagination__pages > a:not(:hover):not(:focus-visible) {
	background: #D8DEE5;
	border-color: var(--line);
	color: var(--text);
}

/* Give only the current page number its own violet fill. */
body.page:not(.page--article) .layout__main .pagination__pages > span:not(.nav_ext) {
	background: #A684D0;
	border-color: #A684D0;
	color: var(--text);
}

/* Match both pagination arrows to inactive number tiles; keep their hover feedback. */
body.page:not(.page--article) .layout__main .pagination__edge > span .pagination__arrow,
body.page:not(.page--article) .layout__main .pagination__edge > a:not(:hover):not(:focus-visible) .pagination__arrow {
	background: #D8DEE5;
	border-color: var(--line);
	color: var(--text);
}

@media (max-width: 47.5em) {
	.page--article .feed { padding: var(--sp-4); }
	body.page:not(.page--article) .layout__main { padding: var(--sp-4); }
}

/* Give the article breadcrumb its own subtle navigation panel. */
.page--article .pagetools {
	min-width: 0;
	justify-content: flex-start;
	padding: var(--sp-3) var(--sp-4);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-soft);
	box-shadow: var(--sh-1);
}

.page--article .pagetools__crumbs,
.page--article .speedbar {
	min-width: 0;
	max-width: 100%;
}

.page--article .speedbar__inner {
	overflow-wrap: anywhere;
}

@media (max-width: 47.5em) {
	.page--article .pagetools { padding: var(--sp-3); }
}

/* The utility strip is hidden on phones, so the main header gets all corners. */
@media (max-width: 47.5em) {
	.site-header { border-radius: var(--r-lg); }
}

/* Round only the outside edges of the stacked header, and all footer corners. */
.utility {
	border-top-left-radius: var(--r-lg);
	border-top-right-radius: var(--r-lg);
}

.site-header {
	border-bottom-left-radius: var(--r-lg);
	border-bottom-right-radius: var(--r-lg);
}

.site-header .category-bar {
	border-bottom-left-radius: var(--r-lg);
	border-bottom-right-radius: var(--r-lg);
}

.site-footer {
	border-radius: var(--r-lg);
}

/* Violet glass treatment: layered light, shade and vector folds create a convex surface. */
.utility {
	color: rgba(255, 255, 255, .82);
	border-bottom-color: rgba(255, 255, 255, .24);
	background-color: #9e71d3;
	background-image:
		radial-gradient(ellipse 64% 170% at 49% -62%, rgba(255, 255, 255, .32), transparent 74%),
		linear-gradient(108deg, #8056ad 0%, #9e71d3 49%, #7650a5 100%);
}

.utility a,
.utility__date { color: inherit; }
.utility a:hover { color: #fff; }

.site-header {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .25);
	background-color: #9e71d3;
	background-image:
		url("../images/crossroads-chrome-ornament.svg"),
		radial-gradient(ellipse 60% 135% at 49% -26%, rgba(255, 255, 255, .36), rgba(255, 255, 255, .08) 48%, transparent 78%),
		linear-gradient(112deg, #b395de 0%, #9e71d3 39%, #835bb8 70%, #70499f 100%);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-shadow: 0 10px 28px rgba(44, 22, 73, .19), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -4px 14px rgba(58, 31, 93, .18);
}

.site-header .category-bar {
	border-top-color: rgba(255, 255, 255, .22);
	background: transparent;
}

.site-header .brand,
.site-header .brand__name { color: #fff; }

.site-header .brand__tagline { color: rgba(255, 255, 255, .78); }

.site-header .brand__mark {
	background: rgba(255, 255, 255, .19);
	color: #fff;
	box-shadow: inset 0 0 0 var(--hair) rgba(255, 255, 255, .38), 0 3px 10px rgba(50, 27, 80, .14);
}

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-link {
	color: rgba(255, 255, 255, .94);
}

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-link::after {
	background: rgba(255, 255, 255, .88);
}

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-link:hover,
.site-header .category-menu > .category-menu__item > .category-menu__row > .category-link.is-active {
	color: #fff;
}

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-menu__toggle {
	color: rgba(255, 255, 255, .82);
	border-radius: var(--r-sm);
}

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-menu__toggle:hover {
	color: #fff;
	background: rgba(255, 255, 255, .13);
}

.site-header .category-menu__toggle--label,
.site-header .category-menu__toggle--label:hover {
	color: #fff;
	background: transparent;
}

.site-header .category-menu__toggle--label:hover { background: rgba(255, 255, 255, .13); }

.site-header .category-menu > .category-menu__item > .category-menu__row > .category-link:focus-visible,
.site-header .category-menu > .category-menu__item > .category-menu__row > .category-menu__toggle:focus-visible {
	outline-color: rgba(255, 255, 255, .95);
}

.site-header .soft-button.user-menu__toggle {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.site-header .soft-button.user-menu__toggle:hover { background: rgba(255, 255, 255, .25); }
.site-header .user-menu__badge { background: rgba(255, 255, 255, .94); color: #6e499b; }

.crossroads-google-search .gsc-search-button-v2 {
	border-color: rgba(255, 255, 255, .24) !important;
	background: #70499f !important;
}

.site-footer {
	color: rgba(255, 255, 255, .86);
	border-top-color: rgba(255, 255, 255, .28);
	background-color: #9e71d3;
	background-image:
		url("../images/crossroads-chrome-ornament.svg"),
		radial-gradient(ellipse 60% 180% at 49% 128%, rgba(255, 255, 255, .27), transparent 72%),
		linear-gradient(108deg, #7852a9 0%, #9e71d3 47%, #70499f 100%);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-shadow: 0 -2px 8px rgba(44, 22, 73, .08), 0 10px 26px rgba(44, 22, 73, .17), inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 -4px 12px rgba(58, 31, 93, .16);
}

.site-footer .footer-bottom { color: rgba(255, 255, 255, .86); }
.site-footer .footer-identity a { color: rgba(255, 255, 255, .95); }

/* Frame the search and banner like the account plaque and align their left edges. */
.crossroads-header__tools { justify-content: space-between; }

.crossroads-header__tools .head-search,
.crossroads-header__ad {
	box-sizing: border-box;
	border: var(--hair) solid rgba(255, 255, 255, .28);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.crossroads-header__tools .head-search {
	width: min(100%, 28rem);
	max-width: 28rem;
	padding: 6px 10px;
}

.crossroads-header__tools .crossroads-google-search table.gsc-search-box {
	margin: 0 !important;
}

.crossroads-header__tools .crossroads-google-search .gsc-input-box {
	border: 1px solid rgba(110, 70, 155, .42) !important;
	border-radius: var(--r-sm) !important;
}

.crossroads-header__ad {
	width: 100%;
	max-width: 45.5rem;
	justify-self: stretch;
	padding: 5px;
}

.crossroads-header__ad img { border-radius: var(--r-sm); }

.site-header .soft-button.user-menu__toggle {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

@media (max-width: 47.5em) {
	.crossroads-header__tools .head-search {
		width: 100%;
		max-width: none;
	}

	.crossroads-header__ad {
		max-width: 45.4375rem;
		justify-self: center;
	}
}

/* Separate floated teaser thumbnails from the preview text, matching full stories. */
body.page:not(.page--article) .layout__main .story-text img[style*="float:left"],
body.page:not(.page--article) .layout__main .story-text img[style*="float: left"],
body.page:not(.page--article) .layout__main .story-text img[align="left"] {
	margin-inline-end: 10px;
}

body.page:not(.page--article) .layout__main .story-text img[style*="float:right"],
body.page:not(.page--article) .layout__main .story-text img[style*="float: right"],
body.page:not(.page--article) .layout__main .story-text img[align="right"] {
	margin-inline-start: 10px;
}

/* Stack preview thumbnails on narrow phones to avoid an unreadable text lane. */
@media (max-width: 30em) {
	body.page:not(.page--article) .layout__main .story-text img[style*="float:left"],
	body.page:not(.page--article) .layout__main .story-text img[style*="float: left"],
	body.page:not(.page--article) .layout__main .story-text img[style*="float:right"],
	body.page:not(.page--article) .layout__main .story-text img[style*="float: right"],
	body.page:not(.page--article) .layout__main .story-text img[align="left"],
	body.page:not(.page--article) .layout__main .story-text img[align="right"] {
		display: block;
		float: none !important;
		margin-inline: 0;
		margin-block: 0 10px;
	}
}

/* Give article pages a wide reading column beside the homepage-sized visitor rail. */
body.page--article .layout {
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 12px;
}

body.page--article .crossroads-article-sidebar {
	width: 21rem;
	max-width: 100%;
}

/* Full-story text alone uses the full article card and justified Russian hyphenation. */
.fullstory .story-text {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Separate floated DLE thumbnails from text on the side nearest the text flow. */
.fullstory .story-text img[style*="float:left"],
.fullstory .story-text img[style*="float: left"],
.fullstory .story-text img[align="left"] {
	margin-inline-end: 10px;
}

.fullstory .story-text img[style*="float:right"],
.fullstory .story-text img[style*="float: right"],
.fullstory .story-text img[align="right"] {
	margin-inline-start: 10px;
}

/* Stack floated thumbnails on narrow phones so body text keeps a usable measure. */
@media (max-width: 30em) {
	.fullstory .story-text img[style*="float:left"],
	.fullstory .story-text img[style*="float: left"],
	.fullstory .story-text img[style*="float:right"],
	.fullstory .story-text img[style*="float: right"],
	.fullstory .story-text img[align="left"],
	.fullstory .story-text img[align="right"] {
		display: block;
		float: none !important;
		margin-inline: 0;
		margin-block: 0 10px;
	}
}

/* Use a dark raspberry hover for links in full-story text only. */
.fullstory .story-text a:hover,
.fullstory .story-text a:focus-visible {
	color: #7a173e;
}

@media (max-width: 72em) {
	body.page--article .layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px 0;
	}

	body.page--article .crossroads-article-sidebar {
		width: 100%;
	}
}

/* Fill outer section title bands; keep nested card borders and dividers unchanged. */
.crossroads-home__lead > .crossroads-panel > .crossroads-section__head,
.crossroads-home > .crossroads-panel > .crossroads-section__head,
.crossroads-article-sidebar > .crossroads-panel > .crossroads-section__head {
	margin-bottom: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 0;
	border-radius: var(--r-md);
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -4px 14px rgba(58, 31, 93, .16);
}

/* Fill Home and article-sidebar gutter section headers like the outer title bands. */
.crossroads-home .crossroads-section__head,
.crossroads-article-sidebar .crossroads-section__head {
	color: #fff;
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: 0;
	border-radius: var(--r-md);
	padding: var(--sp-2) var(--sp-3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -4px 14px rgba(58, 31, 93, .16);
}
.crossroads-home .crossroads-section__head a,
.crossroads-article-sidebar .crossroads-section__head a { color: #fff; }

.crossroads-home__lead > .crossroads-panel > .crossroads-section__head h1,
.crossroads-home__lead > .crossroads-panel > .crossroads-section__head h2,
.crossroads-home__lead > .crossroads-panel > .crossroads-section__head a,
.crossroads-home > .crossroads-panel > .crossroads-section__head h1,
.crossroads-home > .crossroads-panel > .crossroads-section__head h2,
.crossroads-home > .crossroads-panel > .crossroads-section__head a,
.crossroads-article-sidebar > .crossroads-panel > .crossroads-section__head h1,
.crossroads-article-sidebar > .crossroads-panel > .crossroads-section__head h2,
.crossroads-article-sidebar > .crossroads-panel > .crossroads-section__head a {
	color: #fff;
}

.crossroads-home__lead > .crossroads-panel > .crossroads-section__head a:hover,
.crossroads-home > .crossroads-panel > .crossroads-section__head a:hover,
.crossroads-article-sidebar > .crossroads-panel > .crossroads-section__head a:hover {
	color: rgba(255, 255, 255, .82);
}

/* Fill the top-level navigation dropdowns with the header gradient. */
.category-menu > .category-menu__item--parent > .category-menu__submenu {
	border-color: rgba(255, 255, 255, .28);
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
}

.category-menu__submenu .category-link,
.category-menu__submenu .category-link__count,
.category-menu__submenu .category-menu__toggle {
	color: rgba(255, 255, 255, .94);
}

.category-menu__submenu .category-link:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Fill the account popup (avatar menu) with the same violet gradient as the navigation dropdowns. */
.site-header .user-menu__panel:not(.user-menu__panel--login) {
	border-color: rgba(255, 255, 255, .28);
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
	box-shadow: 0 18px 38px rgba(44, 22, 73, .28), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__head {
	border-bottom-color: rgba(255, 255, 255, .26);
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__foot {
	border-top-color: rgba(255, 255, 255, .26);
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__profile {
	color: #fff;
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__group,
.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__count {
	color: rgba(255, 255, 255, .78);
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__list a {
	color: #fff;
}

.site-header .user-menu__panel:not(.user-menu__panel--login) .user-menu__list a:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* Match the guest login popup to the account menu, while keeping form fields light. */
.site-header .user-menu__panel--login {
	border-color: rgba(255, 255, 255, .28);
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
	box-shadow: 0 18px 38px rgba(44, 22, 73, .28), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.site-header .user-menu__panel--login .form-label {
	color: rgba(255, 255, 255, .94);
}

.site-header .user-menu__panel--login .user-menu__links {
	color: rgba(255, 255, 255, .82);
}

.site-header .user-menu__panel--login .user-menu__links a {
	color: #fff;
}

.site-header .user-menu__panel--login .user-menu__links a:hover {
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
}

.site-header .user-menu__panel--login .soc-links {
	border-top-color: rgba(255, 255, 255, .26);
}

.site-header .user-menu__panel--login .soc-links__item {
	background: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .94);
}

.site-header .user-menu__panel--login .soc-links__item:hover {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

/* Fill article and section breadcrumb bars rather than outlining them. */
.page--article .pagetools,
body.page:not(.page--article) .layout__main > .pagetools {
	border: 0;
	border-radius: var(--r-lg);
	background-color: #9e71d3;
	background-image: var(--crossroads-header-fill);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
}

.page--article .pagetools a,
body.page:not(.page--article) .layout__main > .pagetools a,
.page--article .pagetools .speedbar,
body.page:not(.page--article) .layout__main > .pagetools .speedbar,
.page--article .pagetools .pagetools__sort,
body.page:not(.page--article) .layout__main > .pagetools .pagetools__sort {
	color: rgba(255, 255, 255, .94);
}

.page--article .pagetools .speedbar a:hover,
body.page:not(.page--article) .layout__main > .pagetools .speedbar a:hover {
	color: #fff;
}

body.page:not(.page--article) .layout__main > .pagetools {
	padding: var(--sp-3) var(--sp-4);
	box-shadow: var(--sh-1);
}

/* Keep compact navigation dropdowns inside the mobile viewport. */
@media (max-width: 47.5em) {
	.category-menu { position: relative; }
	.category-menu > .category-menu__item--parent { position: static; }
	.category-menu > .category-menu__item--parent > .category-menu__submenu {
		inset-inline: var(--sp-3);
		width: auto;
		min-width: 0;
		max-width: none;
	}
	.category-menu > .category-menu__item--parent:hover > .category-menu__submenu,
	.category-menu > .category-menu__item--parent.is-focus-open > .category-menu__submenu,
	.category-menu > .category-menu__item--parent.is-open > .category-menu__submenu {
		position: absolute;
		inset-inline: var(--sp-3);
	}
}

/* Fill every complete outer block frame with the flat #F0F2F8 colour; preserve inner card frames. */
body.page .crossroads-panel {
	background-color: var(--crossroads-panel-surface);
	background-image: none;
}

/* The full story headline was oversized; halve it while keeping a readable minimum. */
.page--article .fullstory__title {
	font-size: clamp(calc(var(--app-em)*1.25), 1.7vw, calc(var(--app-em)*1.375));
}

@media (max-width: 47.5em) {
	.page--article .fullstory__title { font-size: calc(var(--app-em)*1.125); }
}