/* ==========================================================================
   Chapter 05 — Coverage · Focus
   Signal-red masthead on newsprint; Events and Press as an Advance collection
   (styles in 03-brands.css); then the viewfinder:
   on wide screens (.focus.is-active) a framed print grows to full bleed on a
   black backdrop. Elsewhere it is a framed image on black.
   ========================================================================== */

.chapter--coverage .masthead__title {
	color: var(--c-signal);
}

/* Sky palette: blue stays a small accent outside About, so the title is dark. */
.palette-sky .chapter--coverage .masthead__title {
	color: var(--c-ink);
}

/* Viewfinder --------------------------------------------------------------- */

.focus {
	position: relative;
}

.focus__viewport {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--s-9) var(--margin);
}

.focus__frame {
	position: relative;
	width: 100%;
	max-width: 88rem;
}

.focus__marks {
	position: absolute;
	inset: -12px;
	pointer-events: none;
	color: var(--fg);
}

.focus__corner {
	position: absolute;
	width: 26px;
	height: 26px;
	border: 0 solid currentColor;
}

.focus__corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.focus__corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.focus__corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.focus__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.focus__point {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--c-signal);
}

.focus__caption {
	margin-top: var(--s-5);
	justify-self: start;
}

/* Wide screens: the print grows to fill the screen. */
.focus.is-active {
	height: 250vh;
	height: 250svh;
}

.focus.is-active .focus__viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	padding: 0;
	overflow: clip;
}

.focus.is-active .focus__frame {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100svh;
	transform-origin: 50% 50%;
	will-change: transform;
}

.focus.is-active .focus__image,
.focus.is-active .focus__image .frame__media {
	width: 100%;
	height: 100%;
	/* Fill the screen box exactly; the photograph is cropped by object-fit. */
	aspect-ratio: auto;
}

/* Full bleed: the screen's own corners, not rounded ones. */
.focus.is-active .focus__image .frame__media {
	border-radius: 0;
}

/* Marks sit just outside the print, on the black, so they read on any photo. */
.focus.is-active .focus__marks {
	inset: -3.2% -1.8%;
}

.focus.is-active .focus__corner {
	width: 44px;
	height: 44px;
	border-width: 0;
}

.focus.is-active .focus__corner--tl { border-top-width: 3px; border-left-width: 3px; }
.focus.is-active .focus__corner--tr { border-top-width: 3px; border-right-width: 3px; }
.focus.is-active .focus__corner--bl { border-bottom-width: 3px; border-left-width: 3px; }
.focus.is-active .focus__corner--br { border-bottom-width: 3px; border-right-width: 3px; }

.focus.is-active .focus__point {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-width: 3px;
}

.focus.is-active .focus__caption {
	position: absolute;
	left: var(--margin);
	bottom: var(--s-5);
	margin: 0;
	color: var(--c-paper);
}