/*
 * UNEC – Home News  v1.0.0
 * Figma 88:998 ("News") — file Q5ckGwby9XewAE51OXln5p
 *
 * Every selector is scoped under #top. The only !important declarations are
 * the four of the container release, which are load-bearing: Enfold writes
 * the container width into a generated post-<id>.css enqueued after this
 * file, so an equally specific rule loses on source order.
 *
 * No -webkit-line-clamp anywhere. It silently defeats the bottom half of the
 * cap trim when it is not actually truncating; length is a PHP character
 * budget instead. See claude/news-archive-page.md trap 2.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

/*
 * The token block also covers the Enfold Button skin, which lives OUTSIDE
 * the section. Without it every var() there would fall through to its
 * literal fallback — and `font-family: var(--unec_hn_font, inherit)` would
 * inherit Enfold's face, which is the one thing that must not happen.
 */
#top .unec_hn_sec,
#top .unec_hn_btn_skin,
#top a.avia-button.unec_hn_btn_skin {
	/* Palette */
	--unec_hn_ink: #231f20;
	--unec_hn_brand: #ffc20e;
	--unec_hn_card_bg: #f8f8f9;
	--unec_hn_paper: #ffffff;
	--unec_hn_on_dark: #ffffff;
	--unec_hn_rule_a: 0.2;
	--unec_hn_excerpt_a: 0.64;

	/* Type */
	--unec_hn_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--unec_hn_meta_fs: 17px;
	--unec_hn_meta_lh: 26px;
	--unec_hn_body_fs: 17px;
	--unec_hn_body_lh: 26px;
	--unec_hn_lead_fs: 32px;
	--unec_hn_lead_lh: 38px;
	--unec_hn_lead_ls: -0.02em;
	--unec_hn_card_fs: 28px;
	--unec_hn_card_lh: 34px;
	--unec_hn_card_ls: -0.02em;

	/* Pretendard typo metrics, verified with fontTools against the shipped
	 * Regular / Medium / SemiBold faces. USE_TYPO_METRICS is set, so these
	 * are the ones the browser uses. 2048 / 1949 / 494 / cap 1448. */
	--unec_hn_em_h: 1.19287109375;      /* (1949 + 494) / 2048            */
	--unec_hn_asc_cap: 0.24462890625;   /* (1949 - 1448) / 2048           */
	--unec_hn_desc: 0.2412109375;       /* 494 / 2048                     */

	/* Layout */
	--unec_hn_max: 1408px;
	--unec_hn_gutter: max(50px, (100% - var(--unec_hn_max)) / 2);
	--unec_hn_pad_v: 100px;             /* house rhythm; Figma draws 160  */
	--unec_hn_pad_scale: 1;

	--unec_hn_head_gap: 24px;           /* label -> hairline              */
	--unec_hn_head_body_gap: 40px;      /* hairline -> grid               */
	--unec_hn_body_gap: 48px;           /* grid -> button                 */

	--unec_hn_col_gap: 12px;
	--unec_hn_card_w: 343px;
	--unec_hn_row_h: 561px;

	/* Featured card */
	--unec_hn_lead_pad_x: 48px;
	--unec_hn_lead_pad_b: 48px;
	--unec_hn_lead_meta_gap: 32px;      /* category -> date group         */
	--unec_hn_lead_stack_gap: 32px;     /* meta row -> title              */
	--unec_hn_scrim_h: 300px;
	--unec_hn_scrim_stop: 65%;
	--unec_hn_scrim_ink: #000000;
	--unec_hn_scrim_a: 1;
	--unec_hn_zoom: 1.04;

	/* Side cards */
	--unec_hn_card_pad_y: 56px;
	--unec_hn_card_pad_x: 40px;
	--unec_hn_card_gap: 48px;

	/* Chevron badge */
	--unec_hn_badge_size: 24px;
	--unec_hn_badge_glyph: 16px;
	--unec_hn_badge_bg: var(--unec_hn_ink);
	--unec_hn_badge_ink: var(--unec_hn_on_dark);
	--unec_hn_row_gap: 12px;            /* badge/icon -> label            */

	/* Button */
	--unec_hn_btn_pad_y: 20px;
	--unec_hn_btn_pad_x: 32px;
	--unec_hn_btn_gap: 64px;
	--unec_hn_btn_bg: var(--unec_hn_brand);
	--unec_hn_btn_ink: var(--unec_hn_ink);
	--unec_hn_btn_badge_bg: var(--unec_hn_ink);
	--unec_hn_btn_badge_ink: var(--unec_hn_on_dark);

	/* Interactive colours are properties the base rules READ but never SET,
	 * so :hover / :focus-visible re-point them without out-specifying
	 * anything. claude/contact-pages.md trap 3. */
	--unec_hn_title_ink: var(--unec_hn_ink);
	--unec_hn_lead_title_ink: var(--unec_hn_on_dark);

	--unec_hn_focus: var(--unec_hn_brand);
	--unec_hn_motion: 0.25s;
}

/* ------------------------------------------------------------------ *
 * 2. The container release
 *
 * Enfold wraps page content in .container, capped at 1310px with 50px of
 * padding. A full-bleed section has to break out of it, and .container is
 * an ANCESTOR of this section, so a class on the Color Section can never
 * select it downward — hence the :has() route.
 *
 * This module ships its own copy rather than borrowing unec-service's:
 * that stylesheet is enqueued only on pages carrying a unec_svc shortcode,
 * so the shared rule is a coincidence, not infrastructure.
 * See claude/container-release.md.
 * ------------------------------------------------------------------ */

#top .unec_hn_host .container,
#top .unec_svc_host .container,
#top .container_wrap:has(> .container .unec_hn_sec:not(.unec_hn_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Avia floats the column, the content wrapper and the heading tag; a floated
 * sibling above a flex box silently eats the flex box's top margin. */
#top .unec_hn_host .content,
#top .unec_hn_host .flex_column,
#top .unec_hn_host .entry-content-wrapper,
#top .container_wrap:has(> .container .unec_hn_sec:not(.unec_hn_sec_contained)) .content,
#top .container_wrap:has(> .container .unec_hn_sec:not(.unec_hn_sec_contained)) .flex_column,
#top .container_wrap:has(> .container .unec_hn_sec:not(.unec_hn_sec_contained)) .entry-content-wrapper {
	float: none;
}

/* ------------------------------------------------------------------ *
 * 3. Section shell
 * ------------------------------------------------------------------ */

#top .unec_hn_sec {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding-top: calc(var(--unec_hn_pt, var(--unec_hn_pad_v)) * var(--unec_hn_pad_scale));
	padding-bottom: calc(var(--unec_hn_pb, var(--unec_hn_pad_v)) * var(--unec_hn_pad_scale));
	color: var(--unec_hn_ink);
}

#top .unec_hn_bg_white {
	background-color: var(--unec_hn_paper);
}

#top .unec_hn_bg_light {
	background-color: var(--unec_hn_card_bg);
}

#top .unec_hn_bg_none {
	background-color: transparent;
}

/* Enfold styles the bare element (#top div, 1-0-1), which BEATS inheritance
 * from the section. Any text inside a div would fall back to the theme face,
 * and the cap-trim maths is computed from the font's own metrics — so the
 * whole vertical rhythm would shift with it, silently.
 * claude/services-page.md trap 1. */
#top .unec_hn_sec * {
	font-family: var(--unec_hn_font);
}

#top .unec_hn_sec *,
#top .unec_hn_sec *::before,
#top .unec_hn_sec *::after {
	box-sizing: border-box;
}

#top .unec_hn_inner {
	display: flex;
	flex-direction: column;
	gap: var(--unec_hn_head_body_gap);
	width: 100%;
	padding-left: var(--unec_hn_gutter);
	padding-right: var(--unec_hn_gutter);
}

#top .unec_hn_sec_contained .unec_hn_inner {
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Cap-height trim
 *
 * The trim always sits on an inner span: on a plate it would shrink the
 * plate instead of the text.
 * ------------------------------------------------------------------ */

#top .unec_hn_sec .u_hn_trim {
	display: block;
	font-size: var(--u_hn_fs);
	line-height: var(--u_hn_lh);
	letter-spacing: var(--u_hn_ls, 0);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-edge: cap alphabetic) {
	#top .unec_hn_sec .u_hn_trim {
		margin-top: calc(-1 * ((var(--u_hn_lh) - var(--unec_hn_em_h) * var(--u_hn_fs)) / 2 + var(--unec_hn_asc_cap) * var(--u_hn_fs)));
		margin-bottom: calc(-1 * ((var(--u_hn_lh) - var(--unec_hn_em_h) * var(--u_hn_fs)) / 2 + var(--unec_hn_desc) * var(--u_hn_fs)));
	}
}

#top .unec_hn_sec .u_hn_meta {
	--u_hn_fs: var(--unec_hn_meta_fs);
	--u_hn_lh: var(--unec_hn_meta_lh);
}

#top .unec_hn_sec .u_hn_body {
	--u_hn_fs: var(--unec_hn_body_fs);
	--u_hn_lh: var(--unec_hn_body_lh);
}

#top .unec_hn_sec .u_hn_lead {
	--u_hn_fs: var(--unec_hn_lead_fs);
	--u_hn_lh: var(--unec_hn_lead_lh);
	--u_hn_ls: var(--unec_hn_lead_ls);
}

#top .unec_hn_sec .u_hn_card {
	--u_hn_fs: var(--unec_hn_card_fs);
	--u_hn_lh: var(--unec_hn_card_lh);
	--u_hn_ls: var(--unec_hn_card_ls);
}

/* ------------------------------------------------------------------ *
 * 5. Eyebrow + hairline
 * ------------------------------------------------------------------ */

#top .unec_hn_head {
	display: flex;
	flex-direction: column;
	gap: var(--unec_hn_head_gap);
	width: 100%;
}

#top .unec_hn_sec p.unec_hn_label {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_hn_ink);
}

/* A border takes layout space; a Figma stroke does not. These hairlines are
 * their own 1px boxes, which is what the design draws. */
#top .unec_hn_sec .unec_hn_rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--unec_hn_ink);
	opacity: var(--unec_hn_rule_a);
}

/* ------------------------------------------------------------------ *
 * 6. The row
 * ------------------------------------------------------------------ */

#top .unec_hn_body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--unec_hn_body_gap);
	width: 100%;
}

#top ul.unec_hn_grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--unec_hn_card_w) var(--unec_hn_card_w);
	align-items: stretch;
	gap: var(--unec_hn_col_gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The type selector in a reset out-ranks a class in the rule it is meant to
 * be overridden by, so the item rule is written at (1,2,1) to match.
 * claude/news-archive-page.md. */
#top ul.unec_hn_grid li.unec_hn_item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--unec_hn_row_h);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_hn_grid li.unec_hn_item::marker {
	content: '';
}

/* One link per item, stretched over the whole card: a screen reader hears one
 * name per card and Tab stops once. The cost is text selection inside the
 * card — the standard trade-off of the stretched-link pattern. */
#top .unec_hn_sec a.unec_hn_link {
	display: block;
	text-decoration: none;
	color: inherit;
}

#top .unec_hn_sec a.unec_hn_link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

#top .unec_hn_sec a.unec_hn_link:focus-visible {
	outline: none;
}

/* The focus ring is drawn on the overlay, not on the anchor: a ring on the
 * anchor would outline two lines of title in the middle of the card and read
 * as a mistake. */
#top .unec_hn_sec a.unec_hn_link:focus-visible::after {
	outline: 2px solid var(--unec_hn_focus);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ *
 * 7. Featured card
 * ------------------------------------------------------------------ */

/*
 * `isolation: isolate` is load-bearing, not decoration. The photograph and
 * the scrim sit at negative z-index so the caption can stay a plain in-flow
 * box — which is the only way the stretched link's ::after can resolve
 * against the CARD rather than against the caption. Isolating the card keeps
 * those negative layers from escaping behind the card's own background.
 */
#top ul.unec_hn_grid li.unec_hn_lead {
	overflow: hidden;
	isolation: isolate;
	justify-content: flex-end;
	background-color: var(--unec_hn_ink);
}

#top .unec_hn_sec .unec_hn_media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	overflow: hidden;
}

#top .unec_hn_sec .unec_hn_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--unec_hn_motion) ease;
}

#top .unec_hn_sec .unec_hn_scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	display: block;
	height: var(--unec_hn_scrim_h);
	background-image: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0) 0%,
		var(--unec_hn_scrim_ink) var(--unec_hn_scrim_stop)
	);
	opacity: var(--unec_hn_scrim_a);
	pointer-events: none;
}

/* Deliberately NOT positioned — see the note on .unec_hn_lead above. */
#top .unec_hn_sec .unec_hn_lead_body {
	display: flex;
	flex-direction: column;
	gap: var(--unec_hn_lead_stack_gap);
	padding: 0 var(--unec_hn_lead_pad_x) var(--unec_hn_lead_pad_b);
}

#top .unec_hn_sec .unec_hn_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--unec_hn_lead_meta_gap);
	color: var(--unec_hn_brand);
	font-weight: 500;
}

#top .unec_hn_sec .unec_hn_cat {
	display: block;
	font-weight: 500;
}

#top .unec_hn_sec .unec_hn_date {
	display: flex;
	align-items: center;
	gap: var(--unec_hn_row_gap);
	font-weight: 500;
}

#top .unec_hn_sec .unec_hn_date_txt {
	display: block;
	white-space: nowrap;
}

#top .unec_hn_sec .unec_hn_ico {
	display: block;
	flex: 0 0 auto;
	color: inherit;
}

#top .unec_hn_sec .unec_hn_lead_title {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_hn_lead_title_ink);
	text-transform: none;
}

#top .unec_hn_sec .unec_hn_ell {
	color: var(--unec_hn_ell_ink, inherit);
}

#top .unec_hn_sec .unec_hn_lead_title .unec_hn_ell {
	--unec_hn_ell_ink: var(--unec_hn_brand);
}

/* ------------------------------------------------------------------ *
 * 8. Side cards
 * ------------------------------------------------------------------ */

#top ul.unec_hn_grid li.unec_hn_card {
	justify-content: space-between;
	gap: var(--unec_hn_card_gap);
	padding: var(--unec_hn_card_pad_y) 0;
	background-color: var(--unec_hn_card_bg);
}

#top .unec_hn_sec .unec_hn_card_top,
#top .unec_hn_sec .unec_hn_card_bottom {
	display: flex;
	flex-direction: column;
	gap: var(--unec_hn_card_gap);
	padding: 0 var(--unec_hn_card_pad_x);
}

#top .unec_hn_sec .unec_hn_card_top .unec_hn_cat,
#top .unec_hn_sec .unec_hn_card_top .unec_hn_date {
	color: var(--unec_hn_ink);
}

#top .unec_hn_sec .unec_hn_card_title {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_hn_title_ink);
	text-transform: none;
}

#top .unec_hn_sec .unec_hn_excerpt {
	display: block;
	font-weight: 400;
	color: var(--unec_hn_ink);
	opacity: var(--unec_hn_excerpt_a);
}

#top .unec_hn_sec .unec_hn_more {
	display: flex;
	align-items: center;
	gap: var(--unec_hn_row_gap);
	font-weight: 500;
	color: var(--unec_hn_ink);
}

#top .unec_hn_sec .unec_hn_more_label {
	display: block;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 9. The chevron badge
 * ------------------------------------------------------------------ */

#top .unec_hn_sec .unec_hn_badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_hn_badge_size);
	height: var(--unec_hn_badge_size);
	border-radius: 999px;
	background-color: var(--unec_hn_badge_bg);
	color: var(--unec_hn_badge_ink);
	transition: background-color var(--unec_hn_motion) ease, color var(--unec_hn_motion) ease;
}

#top .unec_hn_sec .unec_hn_badge .unec_hn_ico {
	width: var(--unec_hn_badge_glyph);
	height: var(--unec_hn_badge_glyph);
}

/* ------------------------------------------------------------------ *
 * 10. States — Figma draws none; this is the house scheme.
 * The badge rests dark and goes brand yellow, matching the Load More
 * circle on the news archive.
 * ------------------------------------------------------------------ */

#top ul.unec_hn_grid li.unec_hn_item:hover,
#top ul.unec_hn_grid li.unec_hn_item:focus-within {
	--unec_hn_badge_bg: var(--unec_hn_brand);
	--unec_hn_badge_ink: var(--unec_hn_ink);
}

#top ul.unec_hn_grid li.unec_hn_lead:hover,
#top ul.unec_hn_grid li.unec_hn_lead:focus-within {
	--unec_hn_lead_title_ink: var(--unec_hn_brand);
}

#top ul.unec_hn_grid li.unec_hn_lead:hover .unec_hn_media img,
#top ul.unec_hn_grid li.unec_hn_lead:focus-within .unec_hn_media img {
	transform: scale(var(--unec_hn_zoom));
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_hn_sec .unec_hn_media img,
	#top .unec_hn_sec .unec_hn_badge,
	#top .unec_hn_sec a.unec_hn_btn {
		transition: none;
	}

	#top ul.unec_hn_grid li.unec_hn_lead:hover .unec_hn_media img,
	#top ul.unec_hn_grid li.unec_hn_lead:focus-within .unec_hn_media img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 11. The button — and the skin an Enfold Button borrows
 * ------------------------------------------------------------------ */

#top .unec_hn_sec a.unec_hn_btn,
#top .unec_hn_btn_skin .avia-button,
#top a.avia-button.unec_hn_btn_skin {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--unec_hn_btn_gap, 64px);
	min-width: 0;
	margin: 0;
	padding: var(--unec_hn_btn_pad_y, 20px) var(--unec_hn_btn_pad_x, 32px);
	border: 0;
	border-radius: 0;
	background-color: var(--unec_hn_btn_bg, #ffc20e);
	color: var(--unec_hn_btn_ink, #231f20);
	font-family: var(--unec_hn_font, inherit);
	font-size: var(--unec_hn_meta_fs, 17px);
	font-weight: 500;
	/* The badge, not the label, sets the row height: 20 + 24 + 20 = 64.
	 * At the label's own 26px line-height an Enfold Button would come out
	 * 66 tall, and the two buttons would not agree. */
	line-height: var(--unec_hn_badge_size, 24px);
	letter-spacing: 0;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--unec_hn_motion, 0.25s) ease, color var(--unec_hn_motion, 0.25s) ease;
}

#top .unec_hn_sec a.unec_hn_btn .unec_hn_badge {
	--unec_hn_badge_bg: var(--unec_hn_btn_badge_bg);
	--unec_hn_badge_ink: var(--unec_hn_btn_badge_ink);
}

#top .unec_hn_sec a.unec_hn_btn .unec_hn_btn_label {
	display: block;
	white-space: nowrap;
	color: inherit;
}

#top .unec_hn_sec a.unec_hn_btn:hover,
#top .unec_hn_sec a.unec_hn_btn:focus-visible,
#top .unec_hn_btn_skin .avia-button:hover,
#top .unec_hn_btn_skin .avia-button:focus-visible,
#top a.avia-button.unec_hn_btn_skin:hover,
#top a.avia-button.unec_hn_btn_skin:focus-visible {
	--unec_hn_btn_bg: var(--unec_hn_ink, #231f20);
	--unec_hn_btn_ink: var(--unec_hn_brand, #ffc20e);
	--unec_hn_btn_badge_bg: var(--unec_hn_brand, #ffc20e);
	--unec_hn_btn_badge_ink: var(--unec_hn_ink, #231f20);
	background-color: var(--unec_hn_btn_bg);
	color: var(--unec_hn_btn_ink);
}

#top .unec_hn_sec a.unec_hn_btn:focus-visible,
#top .unec_hn_btn_skin .avia-button:focus-visible,
#top a.avia-button.unec_hn_btn_skin:focus-visible {
	outline: 2px solid var(--unec_hn_ink, #231f20);
	outline-offset: 2px;
}

#top .unec_hn_btn_skin .avia-button > *,
#top a.avia-button.unec_hn_btn_skin > * {
	display: block;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: var(--unec_hn_badge_size, 24px);
	text-transform: none;
	white-space: nowrap;
}

/* An Enfold Button carries no badge of its own; draw one on the anchor's
 * ::before so the geometry matches the design without extra markup. */

#top .unec_hn_btn_skin .avia-button::before,
#top a.avia-button.unec_hn_btn_skin::before {
	content: '';
	flex: 0 0 auto;
	width: var(--unec_hn_badge_size, 24px);
	height: var(--unec_hn_badge_size, 24px);
	border-radius: 999px;
	background-color: var(--unec_hn_btn_badge_bg, #231f20);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--unec_hn_badge_glyph, 16px) var(--unec_hn_badge_glyph, 16px);
}

/* ------------------------------------------------------------------ *
 * 12. Responsive — custom properties only, never a re-declaration of a
 * property PHP can write inline (--unec_hn_pt / --unec_hn_pb /
 * --unec_hn_scrim_a). An inline declaration beats every stylesheet rule,
 * so a media query touching those would silently never apply.
 * The padding ladder moves a MULTIPLIER, which makes it monotonic by
 * construction. claude/section-padding.md.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_hn_sec {
		--unec_hn_pad_scale: 0.8;
		--unec_hn_card_w: 320px;
		--unec_hn_row_h: 540px;
		--unec_hn_lead_pad_x: 40px;
		--unec_hn_lead_pad_b: 40px;
		--unec_hn_card_pad_y: 48px;
		--unec_hn_card_pad_x: 32px;
		--unec_hn_card_gap: 40px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_hn_sec {
		--unec_hn_pad_scale: 0.7;
		--unec_hn_card_w: 280px;
		--unec_hn_row_h: 500px;
		--unec_hn_lead_fs: 28px;
		--unec_hn_lead_lh: 34px;
		--unec_hn_card_fs: 24px;
		--unec_hn_card_lh: 30px;
		--unec_hn_card_gap: 32px;
		--unec_hn_body_gap: 40px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_hn_sec {
		--unec_hn_pad_scale: 0.6;
		--unec_hn_gutter: 40px;
		--unec_hn_row_h: 420px;
		--unec_hn_lead_fs: 28px;
		--unec_hn_lead_lh: 34px;
		--unec_hn_card_fs: 24px;
		--unec_hn_card_lh: 30px;
		--unec_hn_scrim_h: 260px;
		--unec_hn_head_body_gap: 32px;
	}

	/* Written at the same specificity as the rule it overrides. A responsive
	 * override shorter than its base rule loses, silently — and a responsive
	 * suite that only checks overflow will never see it.
	 * claude/news-archive-page.md. */
	#top ul.unec_hn_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#top ul.unec_hn_grid li.unec_hn_lead {
		grid-column: 1 / -1;
	}

	#top ul.unec_hn_grid li.unec_hn_card {
		min-height: 0;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_hn_sec {
		--unec_hn_pad_scale: 0.45;
		--unec_hn_gutter: 24px;
		--unec_hn_row_h: 380px;
		--unec_hn_lead_fs: 24px;
		--unec_hn_lead_lh: 30px;
		--unec_hn_card_fs: 22px;
		--unec_hn_card_lh: 28px;
		--unec_hn_lead_pad_x: 24px;
		--unec_hn_lead_pad_b: 24px;
		--unec_hn_card_pad_y: 32px;
		--unec_hn_card_pad_x: 24px;
		--unec_hn_card_gap: 24px;
		--unec_hn_lead_meta_gap: 20px;
		--unec_hn_lead_stack_gap: 20px;
		--unec_hn_btn_gap: 32px;
		--unec_hn_body_gap: 32px;
		--unec_hn_scrim_h: 220px;
	}

	#top ul.unec_hn_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#top ul.unec_hn_grid li.unec_hn_lead {
		grid-column: auto;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_hn_sec {
		--unec_hn_pad_scale: 0.35;
		--unec_hn_row_h: 320px;
		--unec_hn_lead_fs: 22px;
		--unec_hn_lead_lh: 28px;
		--unec_hn_card_fs: 20px;
		--unec_hn_card_lh: 26px;
		--unec_hn_btn_gap: 24px;
		--unec_hn_btn_pad_x: 24px;
	}
}