/**
 * Weir — stylesheet.
 *
 * LAYOUT ARCHETYPE: THE CASCADE.
 * A cascade is a stepped water feature: each basin is offset from the one
 * above, and the water crosses between them. The page is built the same way.
 * Major bands (`.tier`) alternate their horizontal offset instead of stacking
 * on a single centred column, and a hairline "channel" runs down the leading
 * edge of each band and jogs sideways to meet the next one. It is still an
 * entirely ordinary vertical scroll — nothing is hijacked — but the rhythm is
 * stepped rather than centred, which is the one thing a centred stack can
 * never be mistaken for.
 *
 * MOTION.
 * Reveals use the native `animation-timeline: view()` — no IntersectionObserver
 * anywhere in this theme. Besides being far less code, it removes a whole class
 * of bug this catalogue has shipped twice: an observer with a ratio threshold
 * silently never fires for an element taller than the viewport, or when a jump
 * link teleports past it, and the content then stays at `opacity: 0` forever.
 * Here the animation is applied ONLY inside `@supports`, so where scroll
 * timelines are unavailable the content is simply, permanently visible. There
 * is no state in which text can fail to appear.
 *
 * @package Weir
 */

/* ---- Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
}

/* ---- Tokens ---------------------------------------------------------- */

:root {
	/* Wet limestone and water. Predominantly light — the catalogue already
	   has a great many dark themes, and pools and rills are read in daylight.
	   Exactly one band goes dark, and it goes dark because that is when
	   fountains are actually lit, not for contrast's sake. */
	--w-stone:      #EFECE4;
	--w-stone-2:    #E5E0D5;
	--w-stone-3:    #D8D1C2;
	--w-ink:        #14201E;
	--w-ink-soft:   #4E5A56;
	--w-ink-faint:  #7B857F;
	--w-rule:       #D3CCBE;
	--w-deep:       #06272C;
	--w-deep-2:     #0C3A40;
	--w-water:      #17747C;
	--w-shal:       #67C3C7;
	--w-bronze:     #A17B44;

	/* One base, one ratio (16 x 1.25), reused everywhere. */
	--w-t-xs:   0.8rem;
	--w-t-s:    0.875rem;
	--w-t-m:    1rem;
	--w-t-l:    1.25rem;
	--w-t-xl:   1.5625rem;
	--w-t-2xl:  1.953rem;
	--w-t-3xl:  2.441rem;
	--w-t-4xl:  3.052rem;
	--w-t-5xl:  3.815rem;

	--w-sp-1: 0.25rem;
	--w-sp-2: 0.5rem;
	--w-sp-3: 1rem;
	--w-sp-4: 1.5rem;
	--w-sp-5: 2.5rem;
	--w-sp-6: 4rem;
	--w-sp-7: 6rem;
	--w-sp-8: 9rem;

	/* Display is a Didone. High stroke contrast reads as still water under
	   raking light, and no other theme in this catalogue uses one — the usual
	   pairing here is a serif body under a grotesque display, so this is
	   deliberately the inverse. */
	--w-ff-display: "Bodoni Moda", "Didot", "Playfair Display", "Times New Roman", serif;
	--w-ff-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--w-ff-data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--w-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--w-wrap: 78rem;
}

body {
	background: var( --w-stone );
	color: var( --w-ink );
	font-family: var( --w-ff-ui );
	font-size: var( --w-t-m );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.wrap {
	width: min( 100% - 2.5rem, var( --w-wrap ) );
	margin-inline: auto;
}

.section { padding-block: var( --w-sp-7 ); }
.section--tight { padding-block: var( --w-sp-6 ); }

/* ---- Type ------------------------------------------------------------ */

h1, h2, h3, h4 {
	font-family: var( --w-ff-display );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp( var( --w-t-3xl ), 5.4vw, var( --w-t-5xl ) ); }
h2 { font-size: clamp( var( --w-t-2xl ), 3.6vw, var( --w-t-4xl ) ); }
h3 { font-size: var( --w-t-xl ); line-height: 1.2; }
h4 { font-size: var( --w-t-l ); line-height: 1.25; }

p { margin: 0 0 var( --w-sp-3 ); }

.lede {
	font-size: var( --w-t-l );
	line-height: 1.5;
	color: var( --w-ink-soft );
	max-width: 46ch;
}

.label {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --w-ink-faint );
	display: inline-block;
}

.figure {
	font-family: var( --w-ff-data );
	font-variant-numeric: tabular-nums;
}

.muted { color: var( --w-ink-soft ); }

/* Body copy must never run wider than it is readable, regardless of what
   container it lands in. */
.prose { max-width: 66ch; }
.prose > * + * { margin-top: var( --w-sp-3 ); }
.prose h2, .prose h3 { margin-top: var( --w-sp-5 ); }
.prose a { color: var( --w-water ); text-underline-offset: 0.18em; }
.prose img { margin-block: var( --w-sp-4 ); }
.prose blockquote {
	margin: var( --w-sp-4 ) 0;
	padding-left: var( --w-sp-4 );
	border-left: 2px solid var( --w-water );
	font-family: var( --w-ff-display );
	font-size: var( --w-t-l );
	color: var( --w-ink-soft );
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var( --w-ink ); color: var( --w-stone );
	padding: var( --w-sp-2 ) var( --w-sp-3 );
}
.skip-link:focus { left: 0; }

:where( a, button, input, textarea, select, [tabindex] ):focus-visible {
	outline: 2px solid var( --w-water );
	outline-offset: 3px;
}

/* ---- 1. THE CASCADE -------------------------------------------------- */

.tier {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: var( --w-sp-4 );
	padding-block: var( --w-sp-6 );
}

/* The step is 3 columns, not 5. A cascade is a series of offsets, not a
   series of half-empty pages — at a bigger step the right-hand tiers leave
   a void down the whole left side that reads as a broken grid rather than
   as rhythm. */
.tier__body { grid-column: 1 / span 8; }
.tier--right .tier__body { grid-column: 4 / span 9; }
.tier__aside { grid-column: 9 / span 4; align-self: end; }
.tier--right .tier__aside { grid-column: 1 / span 3; }

/* The channel: a hairline running down the leading edge of each tier, plus a
   rule across the top where the water crosses from the tier above. This is
   what makes the alternation read as one continuous descent rather than as
   sections that merely happen to be indented differently. */
.tier::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient( to bottom,
		transparent 0,
		var( --w-rule ) 8%,
		var( --w-rule ) 92%,
		transparent 100% );
}
.tier--right::before { left: auto; right: 0; }

.tier::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: var( --w-rule );
	opacity: 0.55;
}
.tier:first-of-type::after { display: none; }

@media ( max-width: 900px ) {
	.tier { grid-template-columns: 1fr; padding-block: var( --w-sp-5 ); }
	.tier__body, .tier--right .tier__body,
	.tier__aside, .tier--right .tier__aside { grid-column: 1; }
	.tier::before { left: 0; right: auto; }
}

/* ---- 2. Site shell --------------------------------------------------- */

.wr-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix( in srgb, var( --w-stone ) 88%, transparent );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --w-rule );
}
.wr-header .inner {
	width: min( 100% - 2.5rem, var( --w-wrap ) );
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --w-sp-4 );
	min-height: 4.25rem;
}
.brand { text-decoration: none; display: flex; align-items: baseline; gap: 0.6rem; }
.brand .name {
	font-family: var( --w-ff-display );
	font-size: var( --w-t-l );
	letter-spacing: 0.01em;
}
.brand .sub {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --w-ink-faint );
}

.wr-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --w-sp-4 );
}
.wr-nav a {
	text-decoration: none;
	font-size: var( --w-t-s );
	letter-spacing: 0.02em;
	color: var( --w-ink-soft );
	padding-block: 0.35rem;
	position: relative;
	transition: color 180ms var( --w-ease );
}
.wr-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var( --w-water );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 260ms var( --w-ease );
}
.wr-nav a:hover { color: var( --w-ink ); }
.wr-nav a:hover::after { transform: scaleX( 1 ); }
.wr-nav .current-menu-item > a { color: var( --w-ink ); }

.wr-footer {
	border-top: 1px solid var( --w-rule );
	background: var( --w-stone-2 );
	padding-block: var( --w-sp-6 ) var( --w-sp-4 );
	margin-top: var( --w-sp-7 );
}
.wr-footer .cols {
	display: grid;
	grid-template-columns: 1.4fr repeat( 3, 1fr );
	gap: var( --w-sp-5 );
}
.wr-footer ul { list-style: none; margin: 0; padding: 0; }
.wr-footer li + li { margin-top: 0.45rem; }
.wr-footer a { text-decoration: none; font-size: var( --w-t-s ); color: var( --w-ink-soft ); }
.wr-footer a:hover { color: var( --w-water ); }
.wr-footer .colophon {
	margin-top: var( --w-sp-5 );
	padding-top: var( --w-sp-3 );
	border-top: 1px solid var( --w-rule );
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: var( --w-sp-3 );
	font-family: var( --w-ff-data ); font-size: var( --w-t-xs ); color: var( --w-ink-faint );
}
@media ( max-width: 780px ) {
	.wr-footer .cols { grid-template-columns: 1fr 1fr; }
}

/* Narrow screens: the nav becomes one scrolling row rather than wrapping to
   three lines and eating a third of the viewport. A disclosure toggle would
   need JS and a second focus-management path to get right; a scroller keeps
   every destination reachable, keyboard-navigable and visible at a glance,
   which is the whole job. */
@media ( max-width: 860px ) {
	.wr-header .inner {
		flex-wrap: nowrap;
		gap: var( --w-sp-3 );
		min-height: 3.5rem;
	}
	.brand { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 0; }
	.brand .sub { font-size: 0.62rem; letter-spacing: 0.12em; }
	.wr-nav {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient( to right, transparent 0, #000 12px );
		mask-image: linear-gradient( to right, transparent 0, #000 12px );
	}
	.wr-nav::-webkit-scrollbar { display: none; }
	.wr-nav ul { flex-wrap: nowrap; gap: var( --w-sp-3 ); padding-left: 12px; }
	.wr-nav a { white-space: nowrap; font-size: var( --w-t-xs ); }
}

/* The hero copy must not sit on top of the only bit of water a phone can see. */
@media ( max-width: 700px ) {
	.wr-hero { min-height: clamp( 34rem, 86vh, 46rem ); align-items: flex-end; }
	.wr-hero__copy { padding-block: var( --w-sp-4 ) var( --w-sp-5 ); }
	.wr-hero__copy .inner {
		background: color-mix( in srgb, var( --w-stone ) 90%, transparent );
		padding: var( --w-sp-4 );
		margin-left: 0;
	}
	.wr-hero__facts { gap: var( --w-sp-4 ); }
}

/* ---- 3. Buttons ------------------------------------------------------ */

.btn {
	display: inline-block;
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85em 1.5em;
	border: 1px solid var( --w-ink );
	background: none;
	color: var( --w-ink );
	cursor: pointer;
	transition: background 200ms var( --w-ease ), color 200ms var( --w-ease ), border-color 200ms var( --w-ease );
}
.btn--solid { background: var( --w-ink ); color: var( --w-stone ); }
.btn--solid:hover { background: var( --w-water ); border-color: var( --w-water ); }
.btn--quiet { border-color: var( --w-rule ); color: var( --w-ink-soft ); }
.btn--quiet:hover { border-color: var( --w-ink ); color: var( --w-ink ); }

/* ---- 4. The signature canvases --------------------------------------- */

.wr-hero {
	position: relative;
	min-height: clamp( 32rem, 78vh, 50rem );
	overflow: hidden;
	background: var( --w-stone-2 );
	display: flex;
	align-items: center;
}
.wr-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* The poster is what a visitor sees with no JS, no WebGL, or reduced motion.
   It is in the markup from the start and simply stays put — nothing is swapped
   in, so there is no frame in which the hero can flash or be empty. */
.wr-hero__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.wr-hero.is-live .wr-hero__poster { opacity: 0; transition: opacity 700ms var( --w-ease ); }

.wr-hero__copy {
	position: relative;
	z-index: 2;
	width: min( 100% - 2.5rem, var( --w-wrap ) );
	margin-inline: auto;
	padding-block: clamp( var( --w-sp-6 ), 12vh, var( --w-sp-8 ) );
}
.wr-hero__copy .inner {
	max-width: 36rem;
	/* The copy sits over live water, whose brightness the theme cannot know in
	   advance. A soft scrim guarantees the contrast ratio instead of hoping. */
	background: linear-gradient( to right,
		color-mix( in srgb, var( --w-stone ) 88%, transparent ) 0%,
		color-mix( in srgb, var( --w-stone ) 70%, transparent ) 74%,
		transparent 100% );
	padding: var( --w-sp-5 ) var( --w-sp-6 ) var( --w-sp-5 ) var( --w-sp-4 );
	margin-left: calc( var( --w-sp-4 ) * -1 );
	backdrop-filter: blur( 3px );
}
.wr-hero__cta { display: flex; flex-wrap: wrap; gap: var( --w-sp-3 ); margin-top: var( --w-sp-4 ); }
.wr-hero__facts {
	display: flex; flex-wrap: wrap; gap: var( --w-sp-5 );
	margin-top: var( --w-sp-5 );
	padding-top: var( --w-sp-3 );
	border-top: 1px solid var( --w-rule );
}
.wr-hero__facts dt { margin: 0 0 0.2rem; }
.wr-hero__facts dd { margin: 0; font-size: var( --w-t-l ); font-family: var( --w-ff-data ); }

.wr-pool {
	position: relative;
	height: clamp( 22rem, 52vh, 34rem );
	overflow: hidden;
	background: var( --w-stone-3 );
}
.wr-pool canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.wr-pool__note {
	position: absolute;
	left: var( --w-sp-4 ); bottom: var( --w-sp-4 );
	z-index: 2;
	background: color-mix( in srgb, var( --w-stone ) 90%, transparent );
	padding: 0.55rem 0.9rem;
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --w-ink-soft );
}

/* ---- 5. Content components ------------------------------------------- */

.proj-card { display: block; text-decoration: none; color: inherit; }
.proj-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var( --w-stone-3 );
	margin-bottom: var( --w-sp-3 );
}
.proj-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 700ms var( --w-ease );
}
.proj-card:hover .proj-card__media img { transform: scale( 1.035 ); }
.proj-card h3 { margin: var( --w-sp-2 ) 0 var( --w-sp-1 ); }
.proj-card__body p { font-size: var( --w-t-s ); color: var( --w-ink-soft ); margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: var( --w-sp-5 ); }
.grid-2 { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: var( --w-sp-5 ); }
@media ( max-width: 900px ) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media ( max-width: 640px ) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* Specification rows — the register a water designer actually quotes on. */
.spec { border-top: 1px solid var( --w-rule ); }
.spec__row {
	display: grid;
	grid-template-columns: 11rem 1fr auto;
	gap: var( --w-sp-4 );
	padding-block: var( --w-sp-3 );
	border-bottom: 1px solid var( --w-rule );
	align-items: baseline;
	text-decoration: none;
	color: inherit;
	transition: background 160ms var( --w-ease );
}
.spec__row:hover { background: var( --w-stone-2 ); }
.spec__key {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.1em;
	color: var( --w-ink-faint );
	text-transform: uppercase;
}
.spec__val { font-size: var( --w-t-l ); font-family: var( --w-ff-display ); line-height: 1.2; }
.spec__val small { display: block; font-family: var( --w-ff-ui ); font-size: var( --w-t-s ); color: var( --w-ink-soft ); margin-top: 0.2rem; }
.spec__meta {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	color: var( --w-ink-faint );
	white-space: nowrap;
}
@media ( max-width: 700px ) {
	.spec__row { grid-template-columns: 1fr; gap: var( --w-sp-1 ); }
	.spec__meta { white-space: normal; }
}

/* The one dark band. Night is when a fountain is lit and photographed, so the
   section about lighting and choreography is the section that goes dark. */
.band-night {
	background: var( --w-deep );
	color: var( --w-stone );
	padding-block: var( --w-sp-7 );
	position: relative;
	overflow: hidden;
}
.band-night h2, .band-night h3, .band-night h4 { color: var( --w-stone ); }
.band-night .lede, .band-night .muted { color: color-mix( in srgb, var( --w-stone ) 76%, transparent ); }
.band-night .label { color: var( --w-shal ); }
.band-night .btn { border-color: color-mix( in srgb, var( --w-stone ) 45%, transparent ); color: var( --w-stone ); }
.band-night .btn--solid { background: var( --w-shal ); border-color: var( --w-shal ); color: var( --w-deep ); }
.band-night .spec, .band-night .spec__row { border-color: color-mix( in srgb, var( --w-stone ) 22%, transparent ); }
.band-night .spec__row:hover { background: var( --w-deep-2 ); }
.band-night .spec__key, .band-night .spec__meta { color: color-mix( in srgb, var( --w-shal ) 82%, transparent ); }
.band-night .tier::before, .band-night .tier::after { background: color-mix( in srgb, var( --w-stone ) 20%, transparent ); }

/* ---- 6. Motion — native scroll timelines only ------------------------ */

@keyframes wr-rise {
	from { opacity: 0; transform: translateY( 1.5rem ); }
	to   { opacity: 1; transform: none; }
}
@keyframes wr-wash {
	from { opacity: 0; clip-path: inset( 0 0 100% 0 ); }
	to   { opacity: 1; clip-path: inset( 0 0 0 0 ); }
}
@keyframes wr-progress { from { transform: scaleX( 0 ); } to { transform: scaleX( 1 ); } }

/*
 * Applied ONLY inside @supports. Anywhere scroll timelines are unsupported —
 * or JS is off, since none of this needs JS — the content is plain, visible
 * and unanimated. Content is never gated behind a script that might not run,
 * which is also what makes it safe for crawlers.
 */
@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		[data-reveal] {
			animation: wr-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 34%;
		}
		[data-reveal="wash"] {
			animation-name: wr-wash;
			animation-range: entry 4% cover 40%;
		}
		/* Stagger a group's children by their own position in the viewport
		   rather than by nth-child, so a grid of any length gets a sensible
		   sequence with no hard-coded counts. */
		[data-reveal-group] > * {
			animation: wr-rise linear both;
			animation-timeline: view();
			animation-range: entry 6% cover 30%;
		}
	}
}

/* A scroll-linked rule under the header — the page's own waterline. Pure CSS:
   no scroll listener, no rAF, nothing to throttle. */
@supports ( animation-timeline: scroll() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.wr-progress {
			position: fixed;
			top: 0; left: 0; right: 0;
			height: 2px;
			background: var( --w-water );
			transform-origin: 0 50%;
			z-index: 60;
			animation: wr-progress linear both;
			animation-timeline: scroll( root );
		}
	}
}

/* ---- 7. Forms -------------------------------------------------------- */

.wr-form { display: grid; gap: var( --w-sp-3 ); max-width: 38rem; }
.wr-form label {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --w-ink-faint );
	display: block;
	margin-bottom: 0.3rem;
}
.wr-form input, .wr-form select, .wr-form textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var( --w-rule );
	background: var( --w-stone-2 );
	border-radius: 0;
}
.wr-form input:focus, .wr-form select:focus, .wr-form textarea:focus {
	border-color: var( --w-water );
	background: #fff;
}
.wr-form textarea { min-height: 9rem; resize: vertical; }
.wr-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var( --w-sp-3 ); }
@media ( max-width: 640px ) { .wr-form .row-2 { grid-template-columns: 1fr; } }
.wr-form__status { font-size: var( --w-t-s ); min-height: 1.4em; }
.wr-form__status.is-ok { color: var( --w-water ); }
.wr-form__status.is-err { color: #A8322B; }

/* ---- 8. Page furniture ----------------------------------------------- */

.page-hero {
	padding-block: var( --w-sp-7 ) var( --w-sp-5 );
	border-bottom: 1px solid var( --w-rule );
}
.breadcrumb {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --w-ink-faint );
	margin-bottom: var( --w-sp-3 );
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var( --w-water ); }

.pagination { margin-top: var( --w-sp-6 ); font-family: var( --w-ff-data ); font-size: var( --w-t-s ); }
.pagination .page-numbers { padding: 0.35em 0.7em; text-decoration: none; }
.pagination .current { background: var( --w-ink ); color: var( --w-stone ); }

.entry-meta {
	font-family: var( --w-ff-data );
	font-size: var( --w-t-xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --w-ink-faint );
}

.media-frame {
	overflow: hidden;
	background: var( --w-stone-3 );
	aspect-ratio: 16 / 9;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }