/* ----------------------------------------------------------------
	Custom CSS — site-specific overrides, kept separate from the
	template's own stylesheet so it stays easy to diff/update later.
-----------------------------------------------------------------*/

/* Article imagery comes in mixed sizes and orientations — crop everything
   into the same 16:9 "HD" frame instead of stretching or leaving gaps.
   Article photos are often white/light-background illustration-style
   shots, which nearly disappear against the page's own white background.
   Since object-fit:cover always fills 100% of this box, the background
   color alone is never visible behind it — the image itself needs real
   opacity so the gray tints through, giving light-background images a
   visible edge (same technique as the other sites' .ratio-hd). */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9.45; /* ~5% taller than plain 16:9 — still reads as "HD" but less narrow */
	background-color: #b0b0b0;
}

.ratio-hd img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover !important;
	object-position: 50% 50%;
	opacity: .85;
}

.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* YouTube's hqdefault.jpg is natively 4:3 (1.33) — noticeably narrower than
   even the widened 16:9.45 (~1.69) .ratio-hd frame, so object-fit:cover
   crops much more off the top/bottom of a video thumbnail than it does off
   a typical photo. A taller frame specifically for these keeps more of the
   actual video frame in view. */
.ratio-hd.video-thumb {
	aspect-ratio: 16 / 10.1;
}

/* Same crop/tint treatment as .ratio-hd, but square — for the narrow-column
   compact list thumbnails (Top Stories, Highlights) where a 16:9 box in a
   ~1/3-width column renders as a thin sliver. Fluid (fills its column),
   unlike the fixed 65x65 .ratio-square used for a different, always-tiny
   context on other sites. */
.ratio-square {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: #b0b0b0;
}

.ratio-square img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover !important;
	object-position: 50% 50%;
	opacity: .85;
}

/* Sections/Tags nav pulldowns: the template's default submenu styling is
   small uppercase text with a divider line between every item, which reads
   busy for a plain list of section/tag names. Match the plain-list look of
   the site's own headline links instead — normal case (handled by the
   --cnvs-primary-menu-tt override on #header), no dividers, comfortable
   spacing. */
.sub-menu-container .menu-item {
	border-top: none !important;
}
.sub-menu-container .menu-item > .menu-link {
	font-family: var(--cnvs-primary-font, 'Domine', serif);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 8px 15px;
	background-image: none !important;
}

/* Topics page section/child links default to the theme's accent color like
   any other unstyled link — flatten to match the page's own black headings. */
a.topic-links,
.topic-links a {
	color: var(--cnvs-contrast-900);
}
a.topic-links:hover,
.topic-links a:hover {
	color: var(--cnvs-themecolor);
}