/* ----------------------------------------------------------------
	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. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	/* Article photos are often white/light-background product-style shots,
	   which nearly disappear against the page's own white background. A
	   medium gray backdrop gives every thumbnail a visible edge — but since
	   the image uses object-fit:cover, it always fills 100% of this box, so
	   the background color alone is never actually visible behind it. The
	   image itself needs real opacity so the gray tints through. */
	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;
}

/* Small square thumbnail variant, for sidebar "Recent Articles" entries. */
.ratio-square {
	position: relative;
	display: block;
	overflow: hidden;
	width: 65px;
	height: 65px;
	flex-shrink: 0;
}

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