/*
 * LYH Welcome: page styles. Plain CSS, no build step; every selector under .lyhw / .lyhw-*; px/rem only.
 * Figma 69:282 (blue/white); docs/lyh-welcome-spec.md (as built). The longer
 * derivations behind some values are in git history (commit 13b2603).
 */

/* ===== Fonts (self-hosted; Mulish + Oswald are OFL: assets/fonts/OFL-*.txt) ===== */

@font-face {
	font-family: "LYHW Tradesmith Stamp";
	src: url("../fonts/tradesmith-stamp.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LYHW Oswald";
	src: url("../fonts/oswald-latin-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LYHW Mulish";
	src: url("../fonts/mulish-latin-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ===== Tokens ===== */

.lyhw {
	/* Colour */
	--lyhw-bg: #0d0d0d;
	--lyhw-panel: #222;
	--lyhw-yellow: #febe10;
	--lyhw-pink: #f8a3c8;
	--lyhw-plum: #7d2350;
	--lyhw-sky: #59cbe8;
	--lyhw-teal: #0e7c96;
	--lyhw-teal-deep: #033a4a; /* teal's hue, dark enough for AA on sky and on the sky fade (spec §9) */
	--lyhw-ink: #2a2a2a;
	--lyhw-ink-soft: #4a4a4a;
	--lyhw-white: #fff;
	--lyhw-black: #000;
	--lyhw-hero-base: #8f8f8f;
	--lyhw-hero-photo-opacity: 0.2;
	--lyhw-rule: rgba(255, 255, 255, 0.22);
	--lyhw-focus: var(--lyhw-white);

	/* Families: the main LYH site's typography (Muli/Mulish body, Oswald headings, Tradesmith Stamp display) */
	--lyhw-font-body: "LYHW Mulish", "Mulish", "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--lyhw-font-heading: "LYHW Oswald", "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--lyhw-font-display: "LYHW Tradesmith Stamp", "tradesmithstamp", Impact, "Arial Black", sans-serif;
	--lyhw-weight-heading: 600;

	/* Layout */
	--lyhw-max: 1320px;
	--lyhw-gutter: 60px;
	--lyhw-overlap: 46px;
	--lyhw-card-gap: 28px;
	--lyhw-cta-w: 386px;
	--lyhw-cta-h: 48px;

	margin: 0;
	background: var(--lyhw-bg);
	color: var(--lyhw-white);
	font-family: var(--lyhw-font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
	.lyhw {
		--lyhw-gutter: 40px;
	}
}

@media (max-width: 768px) {
	.lyhw {
		--lyhw-gutter: 24px;
	}
}

@media (max-width: 480px) {
	.lyhw {
		--lyhw-gutter: 20px;
	}
}

/* ===== Base ===== */

.lyhw *,
.lyhw *::before,
.lyhw *::after {
	box-sizing: border-box;
}

.lyhw h1,
.lyhw h2,
.lyhw p,
.lyhw ul {
	margin: 0;
}

.lyhw ul {
	padding: 0;
	list-style: none;
}

.lyhw img {
	display: block;
	max-width: 100%;
}

/* Tracking pixels the parser moves under <body> (a bare <img> in Genesis header scripts) take no line. */
.lyhw > img {
	position: absolute;
}

/* :where() keeps (0,1,0), so later component colours (social, CTA, skip link) win. */
.lyhw :where(a) {
	color: inherit;
}

.lyhw a:focus-visible {
	outline: 3px solid var(--lyhw-focus);
	outline-offset: 3px;
}

.lyhw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Black border inside the white ring: an edge on any background. */
.lyhw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 8px 16px;
	border: 2px solid var(--lyhw-black);
	background: var(--lyhw-white);
	color: var(--lyhw-black);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	text-decoration: none;
}

.lyhw-skip:focus {
	left: 16px;
	top: 16px;
}

.lyhw a.lyhw-skip:focus-visible {
	outline-offset: 0;
}

.lyhw .lyhw-icon {
	display: block;
	flex-shrink: 0;
	max-width: 100%;
}

/* ===== Shared components ===== */

/* Social icons (hero + statement band) */
.lyhw-social {
	display: flex;
	gap: 10px;
}

.lyhw-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--lyhw-yellow);
	color: var(--lyhw-black);
}

.lyhw a.lyhw-social__link:hover {
	background: var(--lyhw-white);
}

@media (forced-colors: active) {
	.lyhw-social__link {
		border: 1px solid CanvasText;
	}

	/* YouTube's play triangle is a knockout (#fff): Canvas always contrasts with the forced glyph colour. */
	.lyhw-social__link .lyhw-icon__knockout {
		fill: Canvas;
	}
}

/* Hashtag lockup: "#LYH" white + rest yellow */
.lyhw-hashtag {
	white-space: nowrap;
	text-transform: uppercase;
}

.lyhw-hashtag__lead {
	color: var(--lyhw-white);
}

/* Zero-width space: a wrapping hashtag breaks "#LYH / LOVESYOU", not mid-word. Inert while nowrap. */
.lyhw-hashtag__lead::after {
	content: "\200B";
}

.lyhw-hashtag__accent {
	color: var(--lyhw-yellow);
}

@media (max-width: 480px) {
	.lyhw-hashtag {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Bullets (cards + museum feature); hover colour per section via --lyhw-link-hover */
.lyhw-bullets {
	columns: 2;
	column-gap: var(--lyhw-bullets-gap, 10px);
	max-width: var(--lyhw-bullets-w, 520px);
}

/* px columns, rem text: at 200% a long word wraps in its own column. pretty: no lone last word. */
.lyhw-bullets__item {
	position: relative;
	padding-left: 10px;
	break-inside: avoid;
	overflow-wrap: break-word;
	text-wrap: pretty;
	font-family: var(--lyhw-font-body);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5rem;
}

/* Triangle marker, centred on Mulish's x-height (ink at line-box y 7-12; tuned against Figma). */
.lyhw-bullets__item::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 0.4375rem;
	width: 5px;
	height: 6px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Forced colours repaint backgrounds as Canvas, which would hide the clipped marker. */
@media (forced-colors: active) {
	.lyhw-bullets__item::before {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

/* No underline. Hover/focus: bold + accent (marker too); the bold is a text stroke, as Mulish 700 is wider
   and wrapped items on hover. WCAG reasoning: spec §6.2. */
.lyhw-bullets__link {
	text-decoration: none;
}

.lyhw a.lyhw-bullets__link:hover,
.lyhw a.lyhw-bullets__link:focus-visible {
	color: var(--lyhw-link-hover, inherit);
	-webkit-text-stroke: 0.037rem currentColor;
}

/* Not in forced colours, where the marker stays CanvasText (above). */
@media (forced-colors: none) {
	.lyhw-bullets__item:has(> a.lyhw-bullets__link:hover, > a.lyhw-bullets__link:focus-visible)::before {
		background: var(--lyhw-link-hover, currentColor);
	}
}

/* CTA bar (cards + museum feature) */
.lyhw-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: var(--lyhw-cta-w);
	min-height: var(--lyhw-cta-h);
	padding: 8px 13px;
	border: 2px solid var(--lyhw-cta-bg);
	background: var(--lyhw-cta-bg);
	color: var(--lyhw-cta-fg);
	text-decoration: none;
}

.lyhw-cta__label {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 0.8125rem;
	line-height: 0.8125rem;
	letter-spacing: 2.08px;
	text-transform: uppercase;
}

.lyhw-cta__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lyhw-cta-arrow-bg);
	color: var(--lyhw-cta-arrow-fg);
}

.lyhw a.lyhw-cta:hover .lyhw-cta__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.lyhw-cta__arrow {
		transition: transform 0.15s ease;
	}

	.lyhw a.lyhw-cta:hover .lyhw-cta__arrow {
		transform: translateX(3px);
	}
}

/* <=480: every CTA (both cards and the museum) fills its column. */
@media (max-width: 480px) {
	.lyhw-cta {
		max-width: none;
	}

	.lyhw-cta__label {
		font-size: 0.75rem;
		line-height: 0.75rem;
		letter-spacing: 1.25px;
	}
}

@media (max-width: 360px) {
	.lyhw-cta__label {
		font-size: 0.6875rem;
		line-height: 0.6875rem;
		letter-spacing: 0.5px;
	}
}

/* ===== Hero (Figma 69:283; spec §6.1). Z-order: base, photo (20-80%, veil preset), overlay, content; cards above ===== */

/* Gradient: always Figma's. Presets (hero.php) set only the photo veil on the right: amount
   `--veil-{80|60|40|20}` (photo opacity) and colour `--veil-{dark|light}` (base). Limits: spec §6.1 / §9. */
.lyhw-hero {
	/* Figma's overlay, unchanged at every width >= 1025 (97.19deg = 97.18847824126311). */
	--lyhw-hero-overlay: linear-gradient(97.19deg, rgb(13, 13, 13) 0%, rgba(13, 13, 13, 0.94) 30.769%, rgba(13, 13, 13, 0.45) 50.962%, rgba(13, 13, 13, 0) 86.058%);
	/* Left edge of the 1440 frame: the viewport edge up to 1440, then the centred column minus its gutter. */
	--lyhw-hero-frame-x: calc(50% - var(--lyhw-max) / 2 - var(--lyhw-gutter));
	--lyhw-hero-photo-w: 73.49%;
	--lyhw-hero-logo-chip: var(--lyhw-bg);   /* behind the logo in forced colours */
	--lyhw-focus: var(--lyhw-white);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--lyhw-hero-base);
	color: var(--lyhw-white);
}

/* Light veil: about the lightest base that keeps the 20% veil subhead at 3:1 (3.10). */
.lyhw-hero--veil-light {
	--lyhw-hero-base: #d6d6d6;
}

/* Black logo (light veil 80-40%, > 1024): white chip in forced colours. */
.lyhw-hero--veil-light:not(.lyhw-hero--veil-20) {
	--lyhw-hero-logo-chip: var(--lyhw-white);
}

.lyhw-hero--veil-60 {
	--lyhw-hero-photo-opacity: 0.4;
}

.lyhw-hero--veil-40 {
	--lyhw-hero-photo-opacity: 0.6;
}

.lyhw-hero--veil-20 {
	--lyhw-hero-photo-opacity: 0.8;
}

/* Background layer: photo + overlay, decorative (aria-hidden in the markup). */
.lyhw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Above 1440: the strip left of the frame takes the overlay's 0% colour (0 wide at <= 1440). */
.lyhw-hero__bg::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: max(0px, var(--lyhw-hero-frame-x));
	background: var(--lyhw-bg);
}

/* >= 1025: the overlay is Figma's own 1440 (90rem) box at the frame's left edge, so the text keeps the
   1440 alpha values at every width, and (rem) under enlarged text. */
.lyhw-hero__bg::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: max(0px, var(--lyhw-hero-frame-x));
	width: 90rem;
	background: var(--lyhw-hero-overlay);
}

/* Right-anchored 73.49% box (Figma); cropped left of centre so the skyline stays in view. The left edge is
   feathered: at the lighter veils it showed as a vertical line through the text. */
.lyhw-hero__photo {
	-webkit-mask-image: linear-gradient(to right, transparent, var(--lyhw-black) 12%);
	mask-image: linear-gradient(to right, transparent, var(--lyhw-black) 12%);
	position: absolute;
	top: 0;
	right: 0;
	width: var(--lyhw-hero-photo-w);
	height: 100%;
	object-fit: cover;
	object-position: 35% 20%;
	opacity: var(--lyhw-hero-photo-opacity);
}

/* Layout: social bar + logo on row 1, bottom-anchored content on row 2; the logo spans both rows. */
.lyhw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"social logo"
		"content logo";
	row-gap: 36px;
	column-gap: 16px;
	min-height: 520px;
	max-width: calc(var(--lyhw-max) + 2 * var(--lyhw-gutter));
	margin: 0 auto;
	padding: 34px var(--lyhw-gutter) 74px;
}

/* Wraps: with enlarged text the hashtag drops under the icons instead of running into the logo. */
.lyhw-hero__bar {
	grid-area: social;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	row-gap: 10px;
	min-width: 0;
}

/* Hashtag (Subhead 3): #LYH white + LOVESYOU yellow come from the shared .lyhw-hashtag rules. */
.lyhw-hashtag--hero {
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 1rem;
	line-height: 0.75rem;
	letter-spacing: 2.28px;
}

/* The black logo comes in a <picture> (hero.php). `contents` keeps the <img> the grid item; the <source>
   must not render, or it adds a grid row. */
.lyhw-hero__logo-pic {
	display: contents;
}

.lyhw-hero__logo-pic > source {
	display: none;
}

/* 62 x 90 at x 1292, y 26 (right edge 26px inside the content edge). */
.lyhw-hero__logo {
	grid-area: logo;
	align-self: start;
	width: 62px;
	height: 90px;
	margin: -8px 26px 0 0;
}

/* 37.5rem = Figma's 600px; grows with large text so "WELCOMES" stays whole. */
.lyhw-hero__content {
	grid-area: content;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 0;
	max-width: 37.5rem;
}

.lyhw-hero__title {
	font-family: var(--lyhw-font-display);
	font-weight: 400;
	font-size: 4.5rem;
	line-height: 4.6875rem;
	letter-spacing: 1.24px;
	text-transform: uppercase;
	overflow-wrap: anywhere; /* a word too long for the column breaks instead of overflowing */
}

.lyhw-hero__subhead {
	max-width: 600px;
	color: var(--lyhw-yellow);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 2rem;
	line-height: 2.0625rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* Figma 470, but Mulish's first line is 568px: 600 keeps Figma's 2 lines and the 520 hero. */
.lyhw-hero__intro {
	max-width: 600px;
	font-family: var(--lyhw-font-body);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.75rem;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.lyhw-hero__intro strong {
	font-weight: 700;
}

/* Forced colours: keep the logo on a chip of its own background (white behind the black logo). */
@media (forced-colors: active) {
	.lyhw-hero__logo {
		forced-color-adjust: none;
		background: var(--lyhw-hero-logo-chip);
	}
}

@media (forced-colors: active) and (max-width: 1024px) {
	.lyhw-hero--veil-light .lyhw-hero__logo {
		background: var(--lyhw-bg);
	}
}

/* ---- <=1024: no card overlap; stronger overlay ---- */
@media (max-width: 1024px) {
	.lyhw-hero {
		--lyhw-hero-overlay: linear-gradient(97.19deg, rgb(13, 13, 13) 0%, rgba(13, 13, 13, 0.94) 40%, rgba(13, 13, 13, 0.7) 70%, rgba(13, 13, 13, 0.3) 100%);
	}

	/* < 1025 the overlay spans the hero; 48rem lets it grow with enlarged text. */
	.lyhw-hero__bg::after {
		left: 0;
		width: max(100%, 48rem);
	}

	.lyhw-hero__inner {
		min-height: 480px;
		padding-top: 32px;
		padding-bottom: 56px;
	}

	.lyhw-hero__title {
		font-size: 3.75rem;
		line-height: 3.9375rem;
		letter-spacing: 1px;
	}

	.lyhw-hero__subhead {
		font-size: 1.75rem;
		line-height: 1.875rem;
	}

	.lyhw-hero__intro {
		font-size: 1.375rem;
		line-height: 1.6875rem;
	}
}

/* ---- <=768: logo in row 1 only, content full width, photo full width ---- */
@media (max-width: 768px) {
	.lyhw-hero {
		--lyhw-hero-overlay: linear-gradient(97.19deg, rgb(13, 13, 13) 0%, rgba(13, 13, 13, 0.9) 50%, rgba(13, 13, 13, 0.65) 100%);
		--lyhw-hero-photo-w: 100%;
	}

	/* Full width here: no edge to feather. */
	.lyhw-hero__photo {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.lyhw-hero__bg::after {
		width: 100%;
	}

	.lyhw-hero__inner {
		grid-template-areas:
			"social logo"
			"content content";
		row-gap: 32px;
		min-height: 0;
		padding-top: 24px;
		padding-bottom: 48px;
	}

	.lyhw-hero__logo {
		width: 48px;
		height: 70px;
		margin: 0;
	}

	.lyhw-hero__title {
		font-size: 3rem;
		line-height: 3.125rem;
		letter-spacing: 0.8px;
	}

	.lyhw-hero__subhead {
		font-size: 1.5rem;
		line-height: 1.6875rem;
		letter-spacing: 0.75px;
	}

	.lyhw-hero__intro {
		font-size: 1.25rem;
		line-height: 1.625rem;
	}
}

/* ---- <=480: the social bar wraps here at the default text size (hashtag drops under the icons) ---- */
@media (max-width: 480px) {
	.lyhw-hero__inner {
		row-gap: 28px;
		padding-top: 20px;
		padding-bottom: 40px;
	}

	/* Only here can the hashtag wrap; the taller line box keeps wrapped caps apart. */
	.lyhw-hashtag--hero {
		line-height: 1.125rem;
	}

	.lyhw-hero__subhead {
		font-size: 1.375rem;
		line-height: 1.5625rem;
	}

	.lyhw-hero__intro {
		max-width: none;
		font-size: 1.125rem;
		line-height: 1.5rem;
	}

	/* Light 20% veil keeps the 40% opacity here: the 22px subhead measured 4.40 at 439-443 (spec §9). */
	.lyhw-hero--veil-light.lyhw-hero--veil-20 {
		--lyhw-hero-photo-opacity: 0.6;
	}
}

/* ===== Cards (Figma 69:315; spec §6.2). Per-card palettes feed .lyhw-bullets / .lyhw-cta ===== */

/* Per-card palettes (spec §3.2): the default schemes, yellow on black and pink on white */
.lyhw-card--build {
	--lyhw-card-bg: var(--lyhw-panel);
	--lyhw-card-fade: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #222 100%);
	--lyhw-card-fade-h: 152px;
	--lyhw-card-accent: var(--lyhw-yellow);
	--lyhw-card-icon: var(--lyhw-panel);
	--lyhw-card-title: var(--lyhw-white);
	--lyhw-card-label: var(--lyhw-white);
	--lyhw-card-text: var(--lyhw-white);
	--lyhw-card-img-pos: 50% 10%;
	--lyhw-strong: var(--lyhw-yellow);    /* heading word */
	--lyhw-link-hover: var(--lyhw-yellow);
	/* Figma 520 / 10. Mulish needs 279px for the longest item, so the list uses the full 590 width;
	   the gap is 0 at 590 (columns 295) and 10px once the list is narrower than 580. */
	--lyhw-bullets-w: 590px;
	--lyhw-bullets-gap: clamp(0px, var(--lyhw-bullets-w) - 100%, 10px);
	--lyhw-cta-bg: var(--lyhw-yellow);
	--lyhw-cta-fg: var(--lyhw-black);
	--lyhw-cta-arrow-bg: var(--lyhw-black);
	--lyhw-cta-arrow-fg: var(--lyhw-yellow);
	--lyhw-focus: var(--lyhw-white);
}

.lyhw-card--experience {
	--lyhw-card-bg: var(--lyhw-white);
	--lyhw-card-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	--lyhw-card-fade-h: 128px;
	--lyhw-card-accent: var(--lyhw-pink);
	--lyhw-card-icon: var(--lyhw-black);
	--lyhw-card-title: var(--lyhw-black);
	--lyhw-card-label: var(--lyhw-ink-soft);
	--lyhw-card-text: var(--lyhw-ink);
	--lyhw-card-img-pos: 50% 45%;
	--lyhw-strong: var(--lyhw-plum);
	--lyhw-link-hover: var(--lyhw-plum);
	/* Figma 391 / 5; widened so "Attractions & museums" (193px) stays on one line. */
	--lyhw-bullets-w: 421px;
	--lyhw-bullets-gap: 5px;
	--lyhw-cta-bg: var(--lyhw-pink);
	--lyhw-cta-fg: var(--lyhw-black);
	--lyhw-cta-arrow-bg: var(--lyhw-black);
	--lyhw-cta-arrow-fg: var(--lyhw-pink);
	--lyhw-focus: var(--lyhw-black);
}

/* Alternative schemes (`*_style`): the card colour becomes the background; accents on it turn black. */
.lyhw-card--yellow {
	--lyhw-card-bg: var(--lyhw-yellow);
	--lyhw-card-fade: linear-gradient(180deg, rgba(254, 190, 16, 0) 0%, #febe10 100%);
	--lyhw-card-accent: var(--lyhw-black);
	--lyhw-card-icon: var(--lyhw-yellow);
	--lyhw-card-title: var(--lyhw-black);
	--lyhw-card-label: var(--lyhw-black);
	--lyhw-card-text: var(--lyhw-black);
	--lyhw-strong: var(--lyhw-black);     /* no second colour passes on yellow: the heading is all black */
	--lyhw-link-hover: var(--lyhw-black); /* hover = bold only */
	--lyhw-cta-bg: var(--lyhw-black);
	--lyhw-cta-fg: var(--lyhw-yellow);
	--lyhw-cta-arrow-bg: var(--lyhw-yellow);
	--lyhw-cta-arrow-fg: var(--lyhw-black);
	--lyhw-focus: var(--lyhw-black);
}

.lyhw-card--pink {
	--lyhw-card-bg: var(--lyhw-pink);
	--lyhw-card-fade: linear-gradient(180deg, rgba(248, 163, 200, 0) 0%, #f8a3c8 100%);
	--lyhw-card-accent: var(--lyhw-black);
	--lyhw-card-icon: var(--lyhw-pink);
	--lyhw-card-title: var(--lyhw-black);
	--lyhw-card-label: var(--lyhw-ink);   /* #4a4a4a would be 4.67:1 on pink; #2a2a2a is 7.56 */
	--lyhw-card-text: var(--lyhw-ink);
	--lyhw-strong: var(--lyhw-plum);      /* 4.97:1 on pink */
	--lyhw-link-hover: var(--lyhw-plum);
	--lyhw-cta-bg: var(--lyhw-black);
	--lyhw-cta-fg: var(--lyhw-pink);
	--lyhw-cta-arrow-bg: var(--lyhw-pink);
	--lyhw-cta-arrow-fg: var(--lyhw-black);
	--lyhw-focus: var(--lyhw-black);
}

/* Owns the 54px gap below the cards. Oswald caps are 0.81 x the size, so the H2 line height is raised
   and --lyhw-cards-title-top puts the cap baseline on Figma's (the caps grow up into the fade). */
.lyhw-cards {
	--lyhw-cards-media-h: 266px;
	--lyhw-cards-title-size: 2.75rem;  /* 44px */
	--lyhw-cards-title-lh: 2.5625rem;  /* 41px; Figma 33 */
	--lyhw-cards-title-ls: 1px;
	--lyhw-cards-title-top: -24px;     /* Figma -12 with a 33px line box */

	padding: 0 var(--lyhw-gutter) 54px;
}

.lyhw-cards__inner {
	max-width: var(--lyhw-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lyhw-card-gap);
	align-items: stretch;
}

/* Card: flex column, so both cards stretch to one height and the CTAs share a bottom */
.lyhw-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--lyhw-card-bg);
	color: var(--lyhw-card-text);
	isolation: isolate;
}

.lyhw-card__media {
	position: relative;
	flex: none;
	height: var(--lyhw-cards-media-h);
	overflow: hidden;
}

.lyhw-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lyhw-card-img-pos);
}

.lyhw-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--lyhw-card-fade-h);
	background: var(--lyhw-card-fade);
	pointer-events: none;
}

.lyhw-card__icon {
	position: absolute;
	z-index: 1;
	left: 24px;
	bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--lyhw-card-accent);
	color: var(--lyhw-card-icon);
}

/* Body: no background; straddles the media seam so the H2 sits on the fade */
.lyhw-card__body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--lyhw-cards-title-top);
	padding: 0 28px 28px;
}

/* Never overflow: hidden here: the caps overflow the line box */
.lyhw-card__title {
	align-self: stretch;
	color: var(--lyhw-card-title);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: var(--lyhw-cards-title-size);
	line-height: var(--lyhw-cards-title-lh);
	letter-spacing: var(--lyhw-cards-title-ls);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.lyhw-card__title-accent {
	color: var(--lyhw-strong);
}

/* Line height 18 (Figma 12) keeps wrapped caps apart; the cap baseline and divider stay on Figma's. */
.lyhw-card .lyhw-card__label {
	align-self: stretch;
	margin-top: 17px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--lyhw-card-accent);
	color: var(--lyhw-card-label);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 1rem;
	line-height: 1.125rem;
	letter-spacing: 2.28px;
	text-transform: uppercase;
}

.lyhw-card .lyhw-card__bullets {
	align-self: stretch;
	margin: 14px 0;
}

/* CTAs share one bottom edge across both cards. */
.lyhw-card .lyhw-card__cta {
	margin-top: auto;
}

/* ≥1025: cards ride 46px up over the hero and paint above it */
@media (min-width: 1025px) {
	.lyhw-cards {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--lyhw-overlap));
	}
}

/* 1025–1280: two narrower columns; smaller H2 so "EXPERIENCE SOMETHING" stays on one line
   (Oswald: 407px at 40px, fits down to 1080) */
@media (max-width: 1280px) {
	.lyhw-cards {
		--lyhw-cards-title-size: 2.5rem;  /* 40px */
		--lyhw-cards-title-lh: 2.3125rem; /* 37px; draft 30 */
		--lyhw-cards-title-top: -20px;
	}
}

/* 1025–1079: 36px (366px wide) fits the 382px content column at 1025 */
@media (max-width: 1079px) {
	.lyhw-cards {
		--lyhw-cards-title-size: 2.25rem;  /* 36px */
		--lyhw-cards-title-lh: 2.125rem;   /* 34px */
		--lyhw-cards-title-top: -17px;
	}
}

/* ≤1024: stacked full width, no overlap */
@media (max-width: 1024px) {
	.lyhw-cards {
		--lyhw-cards-media-h: 300px;
		--lyhw-cards-title-size: 2.75rem;
		--lyhw-cards-title-lh: 2.5625rem;
		--lyhw-cards-title-top: -24px;

		padding-top: 40px;
		padding-bottom: 48px;
	}

	.lyhw-cards__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.lyhw-cards {
		--lyhw-cards-media-h: 266px;
		--lyhw-cards-title-size: 2.25rem;  /* 36px */
		--lyhw-cards-title-lh: 2.125rem;   /* 34px; draft 32 */
		--lyhw-cards-title-top: -17px;

		padding-top: 32px;
		padding-bottom: 40px;
	}

	.lyhw-cards__inner {
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.lyhw-cards {
		--lyhw-cards-media-h: 220px;
		--lyhw-cards-title-size: 2rem;     /* 32px */
		--lyhw-cards-title-lh: 1.875rem;   /* 30px */
		--lyhw-cards-title-ls: 0.5px;
		--lyhw-cards-title-top: -13px;

		padding-top: 24px;
	}

	.lyhw-card__icon {
		left: 16px;
		bottom: 24px;
	}

	.lyhw-card__body {
		padding: 0 16px 24px;
	}

	.lyhw-card__bullets {
		columns: 1;
		max-width: none;
	}
}

/* ===== Museum & Visitor Center (spec §6.3). Schemes: white (Figma 69:450) and light blue (Figma 67:81,
   the default). Light colours only; no vertical padding ===== */

/* Base = the white scheme; the fades use --lyhw-feature-bg / -bg-clear, so a scheme only swaps colours.
   --lyhw-feature-solid = end of the fade's solid part (accent text is capped to it at >= 1025). */
.lyhw-feature {
	--lyhw-feature-bg: var(--lyhw-white);
	--lyhw-feature-bg-clear: rgba(255, 255, 255, 0);
	--lyhw-feature-solid: 464px;
	--lyhw-feature-fade: linear-gradient(90deg, var(--lyhw-feature-bg) var(--lyhw-feature-solid), var(--lyhw-feature-bg-clear) calc(100% - 202px));
	--lyhw-feature-photo-fade: none;
	--lyhw-feature-accent: var(--lyhw-teal);   /* eyebrow, "Discover" */
	--lyhw-feature-badge-bg: var(--lyhw-sky);
	--lyhw-feature-badge-icon: var(--lyhw-black); /* as the card icons (teal on sky is 2.56:1) */
	--lyhw-call-bg: var(--lyhw-black);
	--lyhw-call-icon: var(--lyhw-white);
	--lyhw-call-text: var(--lyhw-black);
	--lyhw-dir-bg: var(--lyhw-sky);
	--lyhw-dir-icon: var(--lyhw-black);
	--lyhw-dir-text: var(--lyhw-teal);

	/* Shared components here (.lyhw-bullets, .lyhw-cta, focus ring). Hover is deep teal: teal fails on the fade. */
	--lyhw-link-hover: var(--lyhw-teal-deep);
	--lyhw-bullets-w: 520px;
	--lyhw-bullets-gap: 10px;
	--lyhw-cta-bg: var(--lyhw-sky);
	--lyhw-cta-fg: var(--lyhw-black);
	--lyhw-cta-arrow-bg: var(--lyhw-black);
	--lyhw-cta-arrow-fg: var(--lyhw-sky);
	--lyhw-focus: var(--lyhw-black);

	padding: 0 var(--lyhw-gutter);
	color: var(--lyhw-black);
}

/* Light blue (Figma 67:81); deep teal replaces Figma's teal (2.56:1 on sky). Fade geometry: >= 1025 below. */
.lyhw-feature--blue {
	--lyhw-feature-bg: var(--lyhw-sky);
	--lyhw-feature-bg-clear: rgba(89, 203, 232, 0);
	--lyhw-feature-accent: var(--lyhw-teal-deep);
	--lyhw-feature-badge-bg: var(--lyhw-white);
	--lyhw-feature-badge-icon: var(--lyhw-black);
	--lyhw-call-bg: var(--lyhw-teal-deep);
	--lyhw-call-icon: var(--lyhw-white);
	--lyhw-call-text: var(--lyhw-teal-deep);
	--lyhw-dir-bg: var(--lyhw-black);
	--lyhw-dir-icon: var(--lyhw-sky);
	--lyhw-dir-text: var(--lyhw-black);
	--lyhw-cta-bg: var(--lyhw-black);
	--lyhw-cta-fg: var(--lyhw-white);
	--lyhw-cta-arrow-bg: var(--lyhw-sky);
	--lyhw-cta-arrow-fg: var(--lyhw-black);
}

/* Band: 1320 x 360 at 1440, container width (not full-bleed), square.
   min-height, never height: the band grows with zoomed or longer text. */
.lyhw-feature__band {
	position: relative;
	isolation: isolate;
	max-width: var(--lyhw-max);
	min-height: 360px;
	margin: 0 auto;
	background: var(--lyhw-feature-bg);
}

/* Photo: right-aligned 885 x 360 (band x 435 to the right edge), centre-cropped */
.lyhw-feature__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 435px;
	z-index: 0;
}

.lyhw-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Horizontal fade over the photo: solid section colour to 464px, clear 202px before the right edge */
.lyhw-feature__band::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--lyhw-feature-fade);
}

/* Body: 644 wide, padding 49 / 40 / 18; row tops 49 · 102 · 156 · 228 · 290 */
.lyhw-feature__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 644px;
	max-width: 100%;
	padding: 49px 40px 18px;
}

/* Eyebrow: 46px badge + accent label */
.lyhw-feature__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
}

.lyhw-feature__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--lyhw-feature-badge-bg);
	color: var(--lyhw-feature-badge-icon);
}

.lyhw-feature__label {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--lyhw-feature-accent);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 0.75rem;
	line-height: 1rem; /* Figma 12/12; centred beside the badge, so one line renders identically, and a wrapped label keeps its lines apart */
	letter-spacing: 2.28px;
	text-transform: uppercase;
}

/* Figma 44/33; Oswald's 36px caps need a 40px line so a wrap doesn't overlap. The extra 7px is taken
   back above the line, which lifts the caps 4px toward Figma's baseline; the rows below don't move. */
.lyhw-feature .lyhw-feature__title { /* beats the base `.lyhw h2 { margin: 0 }` */
	max-width: 100%;
	margin: -0.4375rem 0 0;
	color: var(--lyhw-black);
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 2.75rem;
	line-height: 2.5rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.lyhw-feature__title-accent {
	color: var(--lyhw-feature-accent);
}

.lyhw-feature__bullets {
	width: 100%;
	color: var(--lyhw-black);
}

.lyhw-feature__cta {
	margin-top: 10px;
}

/* No action row: keep breathing room under the CTA */
.lyhw-feature__cta:last-child {
	margin-bottom: 16px;
}

/* Each link is 52px tall; the 40px gap = Figma's 20 + the directions padding, so wrapped rows align. */
.lyhw-feature__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 40px;
	max-width: 100%;
}

.lyhw-feature__actions > li {
	display: flex;
	min-width: 0;
	max-width: 100%;
}

.lyhw-feature__action {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 16px 0;
	text-decoration: none;
}

/* .lyhw-feature prefix: outranks the generic link colour */
.lyhw-feature .lyhw-feature__call {
	color: var(--lyhw-call-text);
}

.lyhw-feature .lyhw-feature__directions {
	color: var(--lyhw-dir-text);
}

.lyhw-feature__action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.lyhw-feature__call .lyhw-feature__action-icon {
	background: var(--lyhw-call-bg);
	color: var(--lyhw-call-icon);
}

.lyhw-feature__directions .lyhw-feature__action-icon {
	background: var(--lyhw-dir-bg);
	color: var(--lyhw-dir-icon);
}

/* Figma 13/11.5: the 19.5px line (Chrome floors half-leading) is pulled back to 11.5 by the margins.
   Underline (Figma's 1.5px) on hover/focus only; a real text-decoration underlines each wrapped line. */
.lyhw-feature__action-text {
	min-width: 0;
	margin: -0.25rem 0;
	overflow-wrap: anywhere;
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 0.8125rem;
	line-height: 1.21875rem;
	letter-spacing: 1.61px;
	text-transform: uppercase;
	text-decoration-line: none;
	text-decoration-thickness: 1.5px;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.1875rem;
}

/* The number wraps as a unit; as an inline-block it draws its own (inherited) underline on hover. */
.lyhw-feature__phone {
	display: inline-block;
	max-width: 100%;
	text-decoration: inherit;
}

.lyhw a.lyhw-feature__action:hover .lyhw-feature__action-text,
.lyhw a.lyhw-feature__action:focus-visible .lyhw-feature__action-text {
	text-decoration-line: underline;
}

@media (forced-colors: active) {
	.lyhw-feature__badge,
	.lyhw-feature__action-icon {
		border: 1px solid CanvasText;
	}
}

/* ===== Responsive (spec §6.3 / §8) ===== */

/* >= 1025: accent text stays on the fade's solid part at any text size (spec §9.2 item 2): 464 - 40. */
@media (min-width: 1025px) {
	.lyhw-feature__eyebrow,
	.lyhw-feature .lyhw-feature__title,
	.lyhw-feature__actions {
		max-width: calc(var(--lyhw-feature-solid) - 40px);
	}

	/* Blue: column-2 bullets turn deep teal on hover, which needs fade alpha >= 0.85; solid sky to Figma's
   494px at 1440, widening as the band narrows (spec §6.3). */
	.lyhw-feature--blue {
		--lyhw-feature-fade: linear-gradient(90deg, var(--lyhw-feature-bg) max(494px, calc(674px - 14.94%)), var(--lyhw-feature-bg-clear) calc(100% - 202px));
	}
}

/* <= 1024: body 500 (draft 480) so "DISCOVER SOMETHING" stays on one line; solid fade to 460. */
@media (max-width: 1024px) {
	.lyhw-feature {
		--lyhw-feature-solid: 460px;
		--lyhw-feature-fade: linear-gradient(90deg, var(--lyhw-feature-bg) var(--lyhw-feature-solid), var(--lyhw-feature-bg-clear) calc(100% - 120px));
	}

	.lyhw-feature__media {
		left: 360px;
	}

	.lyhw-feature__img {
		object-position: 55% 50%;
	}

	.lyhw-feature__body {
		width: 500px;
	}

	.lyhw-feature__bullets {
		columns: 1;
	}
}

/* ≤768: stacked, photo (2:1) on top, content below on the solid section colour */
@media (max-width: 768px) {
	.lyhw-feature {
		--lyhw-feature-photo-fade: linear-gradient(180deg, var(--lyhw-feature-bg-clear) 60%, var(--lyhw-feature-bg) 100%);
	}

	.lyhw-feature__band {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.lyhw-feature__band::before {
		content: none;
	}

	.lyhw-feature__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
	}

	.lyhw-feature__media::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		background: var(--lyhw-feature-photo-fade);
	}

	.lyhw-feature__img {
		height: auto;
		aspect-ratio: 2 / 1;
		object-position: 55% 40%;
	}

	.lyhw-feature__body {
		width: 100%;
		padding: 24px 24px 8px;
	}

	.lyhw-feature .lyhw-feature__title {
		margin: 0;
		font-size: 2.25rem;
		line-height: 2rem;
	}
}

/* ≤480: photo 3:2; tighter padding and type */
@media (max-width: 480px) {
	.lyhw-feature__img {
		aspect-ratio: 3 / 2;
	}

	.lyhw-feature__body {
		padding: 24px 16px 8px;
	}

	.lyhw-feature .lyhw-feature__title {
		font-size: 2rem;
		line-height: 1.875rem;
		letter-spacing: 0.5px; /* as the card H2: the default copy fits one line at 375 */
	}

	.lyhw-feature__bullets .lyhw-bullets__item {
		font-size: 1rem;
		line-height: 1.375rem;
	}

	.lyhw-feature__actions {
		gap: 0 32px;
	}
}

/* ≤360: tighter tracking, so the eyebrow wraps less beside the badge */
@media (max-width: 360px) {
	.lyhw-feature__label {
		letter-spacing: 1.5px;
	}
}

/* ===== Statement band (Figma 69:391; spec §6.4). Owns 95px above the rule, 130px below ===== */

.lyhw-statement {
	--lyhw-focus: var(--lyhw-white);
	--lyhw-statement-col: 659px;             /* Figma text column (Italian Plate hug width at 36px) */
	--lyhw-statement-row: 1281px;            /* Figma: 659 text + 22 gap + 600 aside, inset 19.5 each side */
	padding: 95px var(--lyhw-gutter) 130px;
	color: var(--lyhw-white);
}

.lyhw-statement__inner {
	max-width: var(--lyhw-max);
	margin: 0 auto;
	padding-top: 30px;
	border-top: 1px solid var(--lyhw-rule);
}

/* Centring only acts when the safety-net wrap fires (long hashtag or line, large text). */
.lyhw-statement__row {
	display: flex;
	flex-wrap: wrap;                         /* safety net only */
	align-items: center;
	justify-content: center;
	gap: 22px;
	max-width: var(--lyhw-statement-row);
	margin: 0 auto;
}

/* Sized by its longest hard line (~727px in Oswald), at least Figma's column; wraps only under text
   resize. Line height 37 (Figma 33) so the comma in "PEOPLE," clears the caps below. */
.lyhw-statement__text {
	flex: none;
	min-width: min(var(--lyhw-statement-col), 100%);
	max-width: 100%;
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 2.25rem;
	line-height: 2.3125rem;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.lyhw-statement__accent {
	color: var(--lyhw-yellow);
}

/* Icons above the hashtag, right-aligned; margin-left: auto keeps them on the row's right edge. */
.lyhw-statement__aside {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-end;
	gap: 25px;
	max-width: 600px;
	margin-left: auto;
}

.lyhw-statement .lyhw-hashtag--band {
	font-family: var(--lyhw-font-display);
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 2.0625rem;
	letter-spacing: 1px;
	text-align: right;
}

/* 769-1149 (draft <= 1079): the 36px Oswald row needs a 1115px viewport. */
@media (max-width: 1149px) {
	.lyhw-statement {
		--lyhw-statement-col: 440px;          /* 659 × 24/36 */
		padding-top: 72px;
		padding-bottom: 96px;
	}

	/* 0.5px tracking (≈ Figma's 1px/36px ratio) keeps ~20px of slack at 769, where 1px left 1px */
	.lyhw-statement__text {
		font-size: 1.5rem;
		line-height: 1.5625rem;               /* Figma 22; 25 for Oswald's caps (see above) */
		letter-spacing: 0.5px;
	}

	.lyhw-statement .lyhw-hashtag--band {
		font-size: 1.5rem;
		line-height: 1.375rem;
	}
}

/* ≤768: stacked and centred; the hard breaks go (the newline after each <br> keeps a space) */
@media (max-width: 768px) {
	.lyhw-statement {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.lyhw-statement__inner {
		padding-top: 28px;
	}

	.lyhw-statement__row {
		max-width: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 32px;
	}

	.lyhw-statement__br {
		display: none;
	}

	/* min(…, 100%): at 320 with large browser text the longest word must wrap, not poke past the gutter */
	.lyhw-statement__text {
		min-width: 0;
		max-width: min(600px, 100%);
		font-size: 1.625rem;
		line-height: 1.75rem;
		letter-spacing: 1px;
	}

	/* margin-left: 0 because in the column layout the desktop auto margin would push the aside right */
	.lyhw-statement__aside {
		flex: none;
		align-items: center;
		gap: 20px;
		max-width: 100%;
		margin-left: 0;
	}

	/* Wraps from 768: a 16-character hashtag at 200% text overflowed at 481-570. */
	.lyhw-statement .lyhw-hashtag--band {
		font-size: 2rem;
		line-height: 2rem;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 480px) {
	.lyhw-statement {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.lyhw-statement__row {
		gap: 24px;
	}

	.lyhw-statement__text {
		font-size: 1.375rem;
		line-height: 1.625rem;
		letter-spacing: 0.5px;
	}

	.lyhw-statement .lyhw-hashtag--band {
		font-size: 1.75rem;
		line-height: 1.75rem;
	}
}

/* ===== Footer bar (Figma 69:410; spec §6.5): 73 tall at 1440 ===== */

.lyhw-footer {
	--lyhw-focus: var(--lyhw-black);
	--lyhw-footer-gap: 24px;
	background: var(--lyhw-white);
	color: var(--lyhw-black);
	border-top: 1px solid var(--lyhw-black);
	padding: 22px var(--lyhw-gutter) 26px;
}

.lyhw-footer__inner {
	max-width: var(--lyhw-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--lyhw-footer-gap);
	row-gap: 16px;
}

/* At large text the links drop under the org line instead of squeezing it. pretty: no lone last word
   (the template binds a spaced dash to the word before it). */
.lyhw-footer__org {
	flex: 1 1 20rem;
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
	font-family: var(--lyhw-font-body);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: var(--lyhw-black);
}

/* The links never shrink: the org line wraps first. */
.lyhw-footer__nav {
	flex: none;
	max-width: 100%;
}

.lyhw-footer__links {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--lyhw-footer-gap);
	row-gap: 12px;
}

.lyhw-footer__item {
	min-width: 0;
}

/* a and span look identical. The negative margin drops the trailing tracking (Figma excludes it);
   16px line (Oswald caps 13px) + 3/5 padding = a 24px hit area with the caps on the org baseline. */
.lyhw .lyhw-footer__link,
.lyhw .lyhw-footer__link:visited {
	display: block;
	padding: 3px 0 5px;
	margin-right: -2.28px;
	overflow-wrap: anywhere;
	font-family: var(--lyhw-font-heading);
	font-weight: var(--lyhw-weight-heading);
	font-size: 1rem;
	line-height: 1rem;
	letter-spacing: 2.28px;
	text-transform: uppercase;
	color: var(--lyhw-black);
	text-decoration: none;
}

.lyhw a.lyhw-footer__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Stacked: org above links, left-aligned. */
@media (max-width: 768px) {
	.lyhw-footer__inner {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	/* In a column the 20rem basis would become a height. */
	.lyhw-footer__org {
		flex: none;
		max-width: 100%;
	}
}