/**
 * Highlight Wall
 *
 * CSS column masonry that ships today, progressively enhanced with native
 * masonry where the browser has it. No layout JS, no framework, no web fonts.
 *
 * Every colour is a theme token with a hard-coded fallback, so the module also
 * renders correctly if it is dropped into a page before the global sheet loads.
 *
 * @package athletenarrative
 */

.an-hw,
.an-hw-archive,
.an-hw-lightbox {
	/* Theme tokens first, hard-coded brand values as the fallback, so the module
	   tracks the theme where it is loaded and still renders standalone. */
	--an-hw-navy: var( --an-canvas, #171a1d );
	--an-hw-ink: var( --an-ink, #0d1014 );
	--an-hw-line: var( --an-line, #2a3140 );
	--an-hw-lime: var( --an-lime, #aafb00 );
	--an-hw-white: var( --an-white, #ffffff );
	--an-hw-mute: var( --an-mute, #9c9c9c );
	--an-hw-on-lime: var( --an-on-lime, #141920 );
	/* Documented neutrals with no theme token: the prototype's raised surface
	   and its alert red. Both are wall-only. */
	--an-hw-card: #1e2430;
	--an-hw-alert: #e0233a;
	--an-hw-display: var( --an-font-display, "Archivo", Impact, "Arial Narrow", sans-serif );
	--an-hw-body: var( --an-font-body, "Inter", system-ui, -apple-system, sans-serif );
	--an-hw-gap: 16px;
	/* Shortest a landscape tile may be before the ratio yields. See
	   .an-hw-tile__poster--pinned. */
	--an-hw-min-land: 170px;
	--an-hw-radius: var( --an-radius, 4px );
	--an-hw-cols: 4;
	--an-hw-cols-md: 3;
	--an-hw-cols-sm: 2;
}

/* -------------------------------------------------------------------------
 * Archive shell
 * ---------------------------------------------------------------------- */

.an-hw-archive {
	background: var( --an-hw-navy );
	color: var( --an-hw-white );
	font-family: var( --an-hw-body );
	padding: 96px 0;
}

.an-hw-container {
	margin: 0 auto;
	max-width: var( --an-container, 1170px );
	padding: 0 var( --an-gutter, 30px );
}

.an-hw-archive__head {
	margin-bottom: 40px;
}

.an-hw-eyebrow {
	color: var( --an-hw-lime );
	font-family: var( --an-hw-display );
	font-size: 0.72rem;
	font-variation-settings: "wdth" 105, "wght" 700;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.an-hw-archive__title {
	color: var( --an-hw-white );
	font-family: var( --an-hw-display );
	font-size: clamp( 2.2rem, 5.2vw, 3.6rem );
	font-variation-settings: "wdth" 118, "wght" 800;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0 0 16px;
	text-transform: uppercase;
}

/* Matches the global .an-slash — at 0.55 the mark was fainter than the thinnest
   stroke of the display type it terminates and read as a rendering fault. */
.an-hw-slash {
	color: var( --an-hw-lime );
	font-weight: 800;
	opacity: 0.8;
}

.an-hw-archive__lede {
	color: var( --an-hw-mute );
	line-height: 1.6;
	margin: 0 0 8px;
	max-width: 62ch;
}

.an-hw-archive__count {
	color: var( --an-hw-mute );
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Buttons — square, lime, hover-to-ink (the brand's signature inversion)
 * ---------------------------------------------------------------------- */

.an-hw-btn {
	border: 2px solid var( --an-hw-lime );
	border-radius: var( --an-hw-radius );
	cursor: pointer;
	display: inline-block;
	font-family: var( --an-hw-display );
	font-size: 0.8rem;
	font-variation-settings: "wdth" 108, "wght" 700;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 14px 30px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.an-hw-btn--solid {
	background: var( --an-hw-lime );
	color: var( --an-hw-on-lime );
}

.an-hw-btn--solid:hover,
.an-hw-btn--solid:focus-visible {
	background: var( --an-hw-ink );
	color: var( --an-hw-lime );
}

.an-hw-btn--line {
	background: transparent;
	color: var( --an-hw-lime );
}

.an-hw-btn--line:hover,
.an-hw-btn--line:focus-visible {
	background: var( --an-hw-lime );
	color: var( --an-hw-on-lime );
}

.an-hw-btn:focus-visible,
.an-hw-chip:focus-visible,
.an-hw-tile:focus-visible,
.an-hw-lightbox__close:focus-visible {
	outline: 3px solid var( --an-hw-lime );
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Sport filter chips
 * ---------------------------------------------------------------------- */

.an-hw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
}

.an-hw-chip {
	background: transparent;
	border: 1px solid var( --an-hw-line );
	border-radius: 999px;
	color: var( --an-hw-mute );
	cursor: pointer;
	font-family: var( --an-hw-body );
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 8px 18px;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.an-hw-chip:hover {
	border-color: var( --an-hw-lime );
	color: var( --an-hw-white );
}

.an-hw-chip[aria-pressed="true"] {
	background: var( --an-hw-lime );
	border-color: var( --an-hw-lime );
	color: var( --an-hw-on-lime );
}

/* -------------------------------------------------------------------------
 * The wall — CSS columns everywhere, native masonry where available
 * ---------------------------------------------------------------------- */

.an-hw-wall {
	column-count: var( --an-hw-cols, 4 );
	column-gap: var( --an-hw-gap );
}

@media ( max-width: 1023px ) {

	.an-hw-wall {
		column-count: var( --an-hw-cols-md, 3 );
	}
}

@media ( max-width: 767px ) {

	.an-hw-wall {
		column-count: var( --an-hw-cols-sm, 2 );
	}
}

@media ( max-width: 479px ) {

	.an-hw-wall {
		column-count: 1;
	}
}

/* ----------------------------------------------------------------------
 * BALANCED MODE — the wall closes on a straight bottom edge.
 *
 * THE PROBLEM. Everything above is CSS multi-column, and under multicol the
 * browser's own balancing algorithm decides which tile lands in which column.
 * It balances by BOX COUNT and fragment height, not by the shapes involved, and
 * with posters running from 16:9 to 9:16 on this wall the columns finished at
 * wildly different depths — the ragged bottom the owner is looking at.
 *
 * WHY THIS IS SCRIPTED AND THE FALLBACK IS NOT. A server-side distribution
 * would have to pick ONE column count, and this wall has four (4/3/2/1 down the
 * breakpoints). Fixed column wrappers in the HTML cannot reflow, so a wall
 * balanced for three columns would be three narrow strips on a phone. So the
 * distribution runs in the browser, where the column count is knowable and
 * re-knowable on resize — and with scripting off the wall is exactly the
 * multicol wall it has always been: correct, complete, just ragged at the foot.
 * Nothing is hidden behind the script.
 *
 * HOW THE EDGE COMES OUT STRAIGHT. assets/js/highlight-wall.js distributes the
 * tiles into .an-hw-col wrappers, shortest-column-first in document order, then
 * hands the geometry to flexbox: the columns are flex siblings, so they are all
 * the height of the tallest one, and inside each column every tile flex-grows in
 * proportion to its own shape (--an-hw-grow, set from data-ratio). A short
 * column's slack is therefore shared out across its tiles rather than dumped on
 * the last one, and every column bottom lands on the same line — a measured
 * delta of 0px, not a tolerance. Tile SIZES stay varied, which is the half of
 * this the owner likes; only the wall's outline is regularised.
 * ---------------------------------------------------------------------- */

.an-hw-wall[data-an-hw-balanced] {
	align-items: stretch;
	column-count: auto;
	display: flex;
	gap: var( --an-hw-gap );
}

.an-hw-col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var( --an-hw-gap );
	/* The wall carries an explicit pixel height (set by the script, see below);
	   every column takes all of it, and the tiles inside divide it up. */
	height: 100%;
	/* Without this a wide poster sets a min-content floor and the columns stop
	   being equal thirds. Same reason .an-reviews uses minmax(0, 1fr). */
	min-width: 0;
}

/* Fewer tiles than columns, or a filter that emptied one. A zero-width flex
   child would still eat a share of the gap. `:empty` catches a column that was
   never given a tile; the [hidden] attribute catches one holding nothing but
   filtered-out tiles, which has children and so is not :empty — the script sets
   it, because whether a column has anything VISIBLE in it is knowable there and
   not in CSS. The attribute needs stating: a flex item's `display` beats the
   UA's [hidden] rule. */
.an-hw-col:empty,
.an-hw-col[hidden] {
	display: none;
}

/* TILE HEIGHT IS STATED, NOT NEGOTIATED — two failed attempts are recorded here
   because both look correct and neither is.

   `flex-basis: 0` collapses the wall outright: a tile's base height becomes 0,
   so its column has no content height, so the flex row has no height, so there
   is no free space for anything to grow into, and every column settles at zero.
   The gate still reported "all column bottoms equal", because they were — all
   equal to nothing. A symmetry measurement passes vacuously on a collapsed wall,
   so the check now also asserts the wall is taller than 200px.

   `aspect-ratio` + `flex-grow` collapses nothing but does not fill either: a
   column holding a single tile kept that tile at its natural aspect height and
   left the remaining ~285px as bare ground under it. The column BOX lined up and
   the picture inside it did not, which is worse than ragged — it reads as a
   missing tile.

   So the script measures the column width once, works out the exact height the
   tallest column needs, writes that to the wall as a pixel height, and gives
   every tile the share of its own column that its shape has earned. The shares
   in a column sum to 1, the gaps are subtracted first, and the arithmetic closes
   exactly: every column fills the wall to the same pixel, and so does every
   column's content. */
.an-hw-wall[data-an-hw-balanced] .an-hw-tile {
	height: calc(
		( 100% - var( --an-hw-gaps, 0px ) ) * var( --an-hw-share, 1 )
	);
	margin: 0;
	min-height: 0;
}

/* Out of flow, so the poster cannot be what sets the tile's height — the tile
   sets its own, above, and the poster fills whatever it ends up being. The
   170px floor further down is for multicol, where the poster IS the height;
   here it would fight the grow and put the ragged edge back. */
.an-hw-wall[data-an-hw-balanced] .an-hw-tile__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

.an-hw-tile {
	background: var( --an-hw-ink );
	border: 0;
	border-radius: var( --an-hw-radius );
	break-inside: avoid;
	color: inherit;
	cursor: pointer;
	display: block;
	margin: 0 0 var( --an-hw-gap );
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	width: 100%;
}

.an-hw-tile[hidden] {
	display: none;
}

.an-hw-tile:hover,
.an-hw-tile:focus-visible {
	box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.55 );
	transform: translateY( -4px );
}

/* Loading state: the shimmer sits in the reserved poster box until the lazy
   image paints over it, so the columns never jump.

   THE FLOOR (--an-hw-min-land) is what stops a landscape tile becoming a
   letterbox slit. 16:9 is a ratio, not a size: in a narrow column it is
   whatever the column gives it, and three columns at 900px wide gave each tile
   269px — a 152px-tall strip carrying a name, a line and a play button. Below
   the floor the ratio yields and object-fit crops instead, which is the right
   trade: a highlight tile has to look like film, and film is not 40px taller
   than its own caption. Stated on the base so it holds for a MEASURED poster
   too — those size themselves from their own width and height attributes and
   were the ones actually going thin. Portrait posters are several times the
   floor at any column width, so nothing there is touched. Capping the column
   count by item count (template-parts/highlight-wall.php) is the other half of
   this; most walls never reach the floor at all. */
.an-hw-tile__poster {
	animation: an-hw-shimmer 1.3s linear infinite;
	background: linear-gradient( 100deg, var( --an-hw-card ) 30%, #252c3a 50%, var( --an-hw-card ) 70% );
	background-size: 220% 100%;
	display: block;
	height: auto;
	min-height: var( --an-hw-min-land );
	object-fit: cover;
	width: 100%;
}

/* A bare poster URL has no measured dimensions, so the box is pinned to the
   declared orientation and the image is cropped into it. The tile can then
   never reflow when the real image turns out to be a different shape. The
   landscape floor above applies here too. */
.an-hw-tile__poster--pinned {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.an-hw-tile--portrait .an-hw-tile__poster--pinned {
	aspect-ratio: 9 / 16;
}

/* Once the poster has painted the shimmer has nothing left to do. */
.an-hw-tile__poster.is-loaded {
	animation: none;
	background: var( --an-hw-card );
}

@keyframes an-hw-shimmer {

	to {
		background-position: -220% 0;
	}
}

/* A poster URL that 404s (an un-replaced demo URL, a moved file) collapses the
   tile and shows a broken-image icon. Instead: hide the image and fall the tile
   back to the same designed placeholder box. */
.an-hw-tile--poster-failed {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient( 160deg, var( --an-hw-card ) 0%, var( --an-hw-ink ) 100% );
	display: flex;
	justify-content: center;
	min-height: var( --an-hw-min-land );
}

.an-hw-tile--portrait.an-hw-tile--poster-failed {
	aspect-ratio: 9 / 16;
}

.an-hw-tile--poster-failed .an-hw-tile__poster {
	display: none;
}

/* No poster saved and no featured image: a designed placeholder, never a gap. */
.an-hw-tile__placeholder {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient( 160deg, var( --an-hw-card ) 0%, var( --an-hw-ink ) 100% );
	display: flex;
	justify-content: center;
	min-height: var( --an-hw-min-land );
	width: 100%;
}

.an-hw-tile--portrait .an-hw-tile__placeholder {
	aspect-ratio: 9 / 16;
}

.an-hw-tile__placeholder-mark {
	color: var( --an-hw-lime );
	font-family: var( --an-hw-display );
	font-size: 3.4rem;
	font-variation-settings: "wdth" 118, "wght" 800;
	font-weight: 800;
	line-height: 1;
	opacity: 0.32;
	text-transform: uppercase;
}

.an-hw-tile__veil {
	background: linear-gradient( to top, rgba( 13, 16, 20, 0.92 ) 0%, rgba( 13, 16, 20, 0.15 ) 45%, rgba( 13, 16, 20, 0 ) 70% );
	inset: 0;
	position: absolute;
}

.an-hw-tile__meta {
	bottom: 12px;
	display: block;
	left: 14px;
	position: absolute;
	right: 14px;
}

.an-hw-tile__name {
	color: var( --an-hw-white );
	display: block;
	font-family: var( --an-hw-display );
	font-size: 0.9rem;
	font-variation-settings: "wdth" 110, "wght" 700;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.an-hw-tile__line {
	color: var( --an-hw-lime );
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.an-hw-tile__play {
	align-items: center;
	background: rgba( 170, 251, 0, 0.92 );
	border-radius: 50%;
	display: flex;
	height: 38px;
	justify-content: center;
	position: absolute;
	right: 12px;
	top: 12px;
	transition: transform 0.25s ease;
	width: 38px;
}

.an-hw-tile__play svg {
	fill: var( --an-hw-on-lime );
	height: 14px;
	margin-left: 2px;
	width: 14px;
}

.an-hw-tile:hover .an-hw-tile__play,
.an-hw-tile:focus-visible .an-hw-tile__play {
	transform: scale( 1.12 );
}

/* Progressive enhancement: native masonry (Safari Grid Lanes) when available. */
@supports ( grid-template-rows: masonry ) {

	.an-hw-wall {
		column-count: auto;
		display: grid;
		gap: var( --an-hw-gap );
		grid-template-columns: repeat( var( --an-hw-cols, 4 ), 1fr );
		grid-template-rows: masonry;
	}

	.an-hw-tile {
		margin: 0;
	}

	@media ( max-width: 1023px ) {

		.an-hw-wall {
			grid-template-columns: repeat( var( --an-hw-cols-md, 3 ), 1fr );
		}
	}

	@media ( max-width: 767px ) {

		.an-hw-wall {
			grid-template-columns: repeat( var( --an-hw-cols-sm, 2 ), 1fr );
		}
	}

	@media ( max-width: 479px ) {

		.an-hw-wall {
			grid-template-columns: 1fr;
		}
	}
}

/* -------------------------------------------------------------------------
 * Outro — where the wall sends you next
 * ---------------------------------------------------------------------- */

.an-hw-outro {
	margin-top: 32px;
}

/* The archive's closing block is a CTA, so it centres and takes the air a
   closing CTA needs; the front page's is a single quiet link continuing the
   wall's own left edge. */
.an-hw-outro--cta {
	border-top: 1px solid var( --an-hw-line );
	margin-top: 56px;
	padding-top: 56px;
	text-align: center;
}

.an-hw-outro__line {
	color: var( --an-hw-white );
	font-family: var( --an-hw-display );
	font-size: clamp( 1.05rem, 2.2vw, 1.5rem );
	font-variation-settings: "wdth" 112, "wght" 700;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 24px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Empty and error states
 * ---------------------------------------------------------------------- */

.an-hw-state {
	background: rgba( 13, 16, 20, 0.5 );
	border: 1px dashed var( --an-hw-line );
	border-radius: var( --an-hw-radius );
	color: var( --an-hw-white );
	font-family: var( --an-hw-body );
	padding: 56px 24px;
	text-align: center;
}

.an-hw-state[hidden] {
	display: none;
}

.an-hw-state--filter {
	margin-top: 8px;
}

.an-hw-state--error {
	border-color: rgba( 224, 35, 58, 0.5 );
	border-style: solid;
}

.an-hw-state__title {
	color: var( --an-hw-white );
	font-family: var( --an-hw-display );
	font-size: 1.05rem;
	font-variation-settings: "wdth" 110, "wght" 700;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.an-hw-state__body {
	color: var( --an-hw-mute );
	margin: 0 auto 20px;
	max-width: 46ch;
}

.an-hw-live {
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.an-hw-lightbox {
	font-family: var( --an-hw-body );
	inset: 0;
	position: fixed;
	z-index: 99999;
	/* The <video> element's control bar is drawn by the engine, not by this
	   sheet, and it defaults to the light scheme: a pale grey strip across the
	   foot of every highlight, on a dialog whose backdrop is 96% black. Stated
	   here as well as on :root so the module still gets dark controls when it is
	   dropped into a page that does not load the theme's global sheet. */
	color-scheme: dark;
}

.an-hw-lightbox[hidden] {
	display: none;
}

.an-hw-lightbox__backdrop {
	background: rgba( 13, 16, 20, 0.96 );
	inset: 0;
	position: absolute;
}

.an-hw-lightbox__box {
	margin: auto;
	max-width: 1100px;
	position: relative;
	top: 50%;
	transform: translateY( -50% );
	width: 90vw;
}

/* THE BOX FOLLOWS THE FRAME. A portrait reel is 9:16 capped at 82vh, so at 900
   tall it is 415px wide — but the box stayed 1100px, and everything the box
   owns stayed with it: the close control floated 340px to the right of the
   video it closes, and the caption ran the full 1100px with the athlete's name
   at one end and the permalink button at the other, both detached from the
   frame between them. The dialog looked like three unrelated things.
   Constraining the box to the frame's own width puts the ✕ on the video's top
   right corner and the caption directly under it, which is where a caption
   goes. --an-hw-portrait-h * 9/16 is the frame's width by definition — the very
   expression .an-hw-lightbox__frame.is-portrait resolves its height from — so
   the box and the frame cannot drift apart.

   THE HEIGHT the two share is not a bare 82vh, because the box is centred on
   ITS OWN height while the close control hangs 52px above it and the caption
   sits 105px below it. At 82vh on a 900px window that put the box top at y=29
   and the ✕ at y=-23 — the control that closes the dialog, off the top of the
   screen. The allowance is measured rather than guessed: 52 for the control,
   105 for a two-row caption, 24 of air at each end. Whatever is left of the
   viewport after that, or 82vh, whichever is smaller. */
.an-hw-lightbox {
	--an-hw-portrait-h: min( 82vh, calc( 100vh - 229px ) );
}

.an-hw-lightbox__box.is-portrait {
	width: min( 90vw, 1100px, calc( var( --an-hw-portrait-h ) * 9 / 16 ) );
}

/* Portrait reels get a 9:16 box capped at --an-hw-portrait-h — the
   letterboxing mistake we are deliberately not repeating. Landscape stays
   16:9. */
.an-hw-lightbox__frame {
	aspect-ratio: 16 / 9;
	background: #000000;
	border-radius: var( --an-hw-radius );
	overflow: hidden;
	position: relative;
	width: 100%;
}

.an-hw-lightbox__frame.is-portrait {
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	max-height: var( --an-hw-portrait-h );
	width: auto;
}

.an-hw-lightbox__frame video,
.an-hw-lightbox__frame iframe {
	border: 0;
	height: 100%;
	inset: 0;
	object-fit: contain;
	position: absolute;
	width: 100%;
}

.an-hw-lightbox__frame .an-hw-state {
	align-content: center;
	background: var( --an-hw-ink );
	border-radius: 0;
	display: grid;
	inset: 0;
	justify-items: center;
	overflow: auto;
	position: absolute;
}

.an-hw-lightbox__close {
	background: none;
	border: 0;
	color: var( --an-hw-white );
	cursor: pointer;
	font-size: 2.6rem;
	line-height: 1;
	padding: 8px;
	position: absolute;
	right: 0;
	top: -52px;
}

.an-hw-lightbox__close:hover {
	color: var( --an-hw-lime );
}

.an-hw-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 14px;
}

.an-hw-lightbox__name {
	color: var( --an-hw-white );
	font-family: var( --an-hw-display );
	font-size: 1.05rem;
	font-variation-settings: "wdth" 112, "wght" 700;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

.an-hw-lightbox__line {
	color: var( --an-hw-lime );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 4px 0 0;
}

.an-hw-lightbox__caption .an-hw-btn {
	align-self: center;
	padding: 9px 20px;
}

.an-hw-lightbox__caption .an-hw-btn[hidden] {
	display: none;
}

/* Body scroll lock while the dialog is open. */
.an-hw-scroll-locked {
	overflow: hidden;
}

@media ( max-width: 767px ) {

	.an-hw-archive {
		padding: 56px 0;
	}

	.an-hw-container {
		padding: 0 20px;
	}

	.an-hw-lightbox__box {
		width: 94vw;
	}

	.an-hw-lightbox__box.is-portrait {
		width: min( 94vw, calc( var( --an-hw-portrait-h ) * 9 / 16 ) );
	}

	.an-hw-lightbox__close {
		font-size: 2.2rem;
		top: -46px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.an-hw-tile,
	.an-hw-tile__play,
	.an-hw-chip,
	.an-hw-btn {
		transition: none;
	}

	.an-hw-tile:hover,
	.an-hw-tile:focus-visible {
		box-shadow: 0 0 0 1px var( --an-hw-line );
		transform: none;
	}

	.an-hw-tile:hover .an-hw-tile__play,
	.an-hw-tile:focus-visible .an-hw-tile__play {
		transform: none;
	}

	.an-hw-tile__poster {
		animation: none;
		background: var( --an-hw-card );
	}
}

/* Single-highlight page: in normal flow nothing supplies the portrait frame's
   width (the lightbox's positioned box does that job in the modal), so cap it
   here. Layout only. */
.an-single-highlight .an-hw-lightbox__frame.is-portrait {
	max-width: 30rem;
	margin-inline: auto;
}