/**
 * UNEC – Single News  ·  css/unec-single.css
 * Figma: 142:2551 "Blog > Details" (frame 142:3205 "Blog_details")
 *
 * Every selector is scoped under #top (Enfold's body id) so it wins against
 * the theme without !important. The only !important in this file is on the
 * container release, which has to beat Enfold's generated post-<id>.css —
 * that sheet is enqueued after ours, so an equally specific rule loses on
 * source order. See claude/news-archive-page.md trap 1.
 *
 * This module owns every rule it needs. It does NOT rely on a class defined
 * in another module's conditionally enqueued stylesheet.
 */

/* -------------------------------------------------------------------------
 * 1. Container release
 *
 * Enfold wraps the template body in .container (1310) > .content (1210).
 * The section has to escape both to reach the 1728 full-bleed frame.
 * ---------------------------------------------------------------------- */
#top .unec_sng_host .container,
#top .unec_sng_host .content,
#top .unec_sng_host .entry-content-wrapper {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#top .unec_sng_host .content,
#top .unec_sng_host .flex_column,
#top .unec_sng_host .entry-content-wrapper {
	float: none;
	overflow: visible;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	border: none;
}

/* -------------------------------------------------------------------------
 * 2. Tokens
 * ---------------------------------------------------------------------- */
#top .unec_sng_sec {
	/* palette — Figma styles #231F20 / #FFFFFF / #F8F8F9 */
	--unec_sng_ink: #231f20;
	--unec_sng_paper: #ffffff;
	--unec_sng_chip: #f8f8f9;
	--unec_sng_brand: #ffc20e;
	--unec_sng_rule: rgba( 35, 31, 32, .2 );
	--unec_sng_mute: .64;

	/* the badge and the chips read these but never set them, so a state
	   selector can re-point them — claude/contact-pages.md trap 3 */
	--unec_sng_badge_bg: var( --unec_sng_ink );
	--unec_sng_badge_ink: var( --unec_sng_paper );
	--unec_sng_chip_bg: var( --unec_sng_chip );
	--unec_sng_chip_ink: var( --unec_sng_ink );

	--unec_sng_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Pretendard typo metrics, USE_TYPO_METRICS set:
	   2048 upem / 1949 typoAscender / 494 typoDescender / 1448 capHeight.
	   Verified with fontTools against the shipped faces. */
	--unec_sng_cap: 0.70703125;    /* 1448 / 2048            */
	--unec_sng_ad: 1.19287109375;  /* (1949 + 494) / 2048     */
	--unec_sng_capgap: 0.24462890625; /* (1949 - 1448) / 2048 */
	--unec_sng_desc: 0.2412109375; /* 494 / 2048              */

	/* type ladder — Figma Desktop/H1, H3, H5, Body_sm, Button */
	--unec_sng_h1_fs: 92px;  --unec_sng_h1_lh: 88px;  --unec_sng_h1_ls: -0.04em;
	--unec_sng_h3_fs: 56px;  --unec_sng_h3_lh: 52px;  --unec_sng_h3_ls: -0.04em;
	--unec_sng_h5_fs: 28px;  --unec_sng_h5_lh: 34px;  --unec_sng_h5_ls: -0.02em;
	--unec_sng_bd_fs: 17px;  --unec_sng_bd_lh: 26px;

	/* rhythm */
	--unec_sng_pad_top: 120px;
	--unec_sng_pad_bottom: 0px;
	--unec_sng_pad_scale: 1;
	--unec_sng_block: 96px;      /* section gap, and the back-button gap   */
	--unec_sng_head_gap: 32px;   /* heading -> body                        */
	--unec_sng_col_gap: 64px;    /* aside stack, and the foot block stack  */
	--unec_sng_meta_gap: 40px;   /* label -> title, and day -> month/year  */
	--unec_sng_back_gap: 24px;   /* back row -> hairline                   */
	--unec_sng_foot_pad: 96px;   /* share/tags block, top and bottom       */
	--unec_sng_icon_gap: 12px;

	/* a blank line between two paragraphs is one line box: with both edges
	   trimmed that is 2 x line-height - cap height = 39.98px at 17/26 */
	--unec_sng_para_gap: calc( 2 * var( --unec_sng_bd_lh ) - var( --unec_sng_cap ) * var( --unec_sng_bd_fs ) );

	/* layout */
	--unec_sng_max: 1408px;
	--unec_sng_gutter_min: 50px;
	--unec_sng_aside_w: 41.2642045%;  /* 581 / 1408 */
	--unec_sng_main_w: 49.5738636%;   /* 698 / 1408 */
	--unec_sng_media: 698 / 450;

	/* the nav module owns --unec_nav_h; the fallback means this module does
	   not depend on that stylesheet being on the page */
	--unec_sng_sticky_gap: 80px;
	--unec_sng_sticky_top: calc( var( --unec_nav_h, 141px ) + var( --unec_sng_sticky_gap ) );

	background: var( --unec_sng_paper );
	color: var( --unec_sng_ink );
	padding-top: calc( 200px * var( --unec_sng_pad_scale ) );
	padding-bottom: calc( var( --unec_sng_pad_bottom ) * var( --unec_sng_pad_scale ) );
}

/* Enfold styles the bare element (#top div, 1-0-1), which beats inheritance
   from the section — and cap-height trim is computed from the font's own
   metrics, so a lost face shifts the whole vertical rhythm silently.
   claude/services-page.md trap 1. */
#top .unec_sng_sec * {
	font-family: var( --unec_sng_font );
}

/* the theme may or may not define one; this module ships its own so a
   screen-reader-only string can never take layout space */
#top .unec_sng_sec .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

#top .unec_sng_wrap {
	box-sizing: border-box;
	width: 100%;
	padding-left: max( var( --unec_sng_gutter_min ), ( 100% - var( --unec_sng_max ) ) / 2 );
	padding-right: max( var( --unec_sng_gutter_min ), ( 100% - var( --unec_sng_max ) ) / 2 );
}

/* -------------------------------------------------------------------------
 * 3. Cap-height trim
 *
 * Figma trims every text box to cap / alphabetic. The pseudo-element pair is
 * the fallback; it is used instead of negative margins on the element itself
 * so an element's own layout margins stay independent of the trim.
 * ---------------------------------------------------------------------- */
#top .unec_sng_tr::before,
#top .unec_sng_tr::after,
#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::before,
#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::after {
	content: '';
	display: table;
}

#top .unec_sng_tr::before,
#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::before {
	margin-bottom: calc( -1 * ( ( var( --u_lh ) - var( --unec_sng_ad ) * var( --u_fs ) ) / 2 + var( --unec_sng_capgap ) * var( --u_fs ) ) );
}

#top .unec_sng_tr::after,
#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::after {
	margin-top: calc( -1 * ( ( var( --u_lh ) - var( --unec_sng_ad ) * var( --u_fs ) ) / 2 + var( --unec_sng_desc ) * var( --u_fs ) ) );
}

@supports ( text-box-trim: trim-both ) {
	#top .unec_sng_tr,
	#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote ) {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	#top .unec_sng_tr::before,
	#top .unec_sng_tr::after,
	#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::before,
	#top .unec_sng_body > :is( p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote )::after {
		content: none;
	}
}

/* -------------------------------------------------------------------------
 * 4. Back to all news
 * ---------------------------------------------------------------------- */
#top .unec_sng_back {
	display: block;
	position: relative;
	margin: 0 0 var( --unec_sng_block );
	padding-bottom: calc( var( --unec_sng_back_gap ) + 1px );
}

/* a Figma stroke sits on the boundary and takes no layout space; a border
   would — claude/news-archive-page.md trap 3 */
#top .unec_sng_back::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var( --unec_sng_rule );
}

#top .unec_sng_back_link {
	display: inline-flex;
	align-items: center;
	gap: var( --unec_sng_icon_gap );
	color: var( --unec_sng_ink );
	text-decoration: none;
}

#top .unec_sng_badge {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 999px;
	background: var( --unec_sng_badge_bg );
	color: var( --unec_sng_badge_ink );
	transform: rotate( 180deg );
	transition: background-color .25s ease, color .25s ease;
}

#top .unec_sng_badge svg {
	display: block;
	width: 16px;
	height: 16px;
}

#top .unec_sng_back_link:hover .unec_sng_badge,
#top .unec_sng_back_link:focus-visible .unec_sng_badge {
	--unec_sng_badge_bg: var( --unec_sng_brand );
	--unec_sng_badge_ink: var( --unec_sng_ink );
}

#top .unec_sng_back_label {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	white-space: nowrap;
}

#top .unec_sng_back_link:focus-visible {
	outline: 2px solid var( --unec_sng_ink );
	outline-offset: 4px;
}

/* -------------------------------------------------------------------------
 * 5. The two columns
 * ---------------------------------------------------------------------- */
#top .unec_sng_grid {
	display: flex;
	align-items: flex-start;   /* stretch would give the sticky column full
	                              height, and it would never pin */
	justify-content: space-between;
}

#top .unec_sng_aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_sng_col_gap );
	flex: 0 1 var( --unec_sng_aside_w );
	min-width: 0;
	position: sticky;
	top: var( --unec_sng_sticky_top );
}

#top .unec_sng_main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_sng_block );
	flex: 0 1 var( --unec_sng_main_w );
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 6. Aside — category, title, hairline, date
 * ---------------------------------------------------------------------- */
#top .unec_sng_meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_sng_meta_gap );
	width: 100%;
}

#top .unec_sng_cat {
	display: inline-flex;
	align-items: center;
	gap: var( --unec_sng_icon_gap );
	color: var( --unec_sng_ink );
	text-decoration: none;
}

#top .unec_sng_cat svg {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

#top .unec_sng_cat_label {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	white-space: nowrap;
}

#top a.unec_sng_cat:hover .unec_sng_cat_label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

#top .unec_sng_title {
	--u_fs: var( --unec_sng_h3_fs );
	--u_lh: var( --unec_sng_h3_lh );
	margin: 0;
	width: 100%;
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 600;
	letter-spacing: var( --unec_sng_h3_ls );
	color: var( --unec_sng_ink );
	overflow-wrap: break-word;
}

#top .unec_sng_hr {
	width: 100%;
	height: 1px;
	background: var( --unec_sng_rule );
}

#top .unec_sng_date {
	display: flex;
	align-items: flex-start;
	gap: var( --unec_sng_meta_gap );
	white-space: nowrap;
}

#top .unec_sng_day {
	--u_fs: var( --unec_sng_h1_fs );
	--u_lh: var( --unec_sng_h1_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 600;
	letter-spacing: var( --unec_sng_h1_ls );
}

#top .unec_sng_my {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	opacity: var( --unec_sng_mute );
}

/* -------------------------------------------------------------------------
 * 7. Featured image
 *
 * Figma's "Mask group" is a 698 x 450 rectangle with no radius, so a cover
 * crop in an overflow box is the whole of it and no asset is needed.
 * ---------------------------------------------------------------------- */
#top .unec_sng_media {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: var( --unec_sng_media );
	overflow: hidden;
	background: var( --unec_sng_chip );
}

#top .unec_sng_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * 8. The post content
 *
 * Editor markup, styled to the Figma scale. Sections are a heading followed
 * by body copy: 96 above a heading, 32 below it, 39.98 between paragraphs
 * (one blank line box, both edges trimmed).
 * ---------------------------------------------------------------------- */
#top .unec_sng_body {
	width: 100%;
	color: var( --unec_sng_ink );
}

#top .unec_sng_sec .unec_sng_body > :is( p, ul, ol, blockquote ) {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 400;
	opacity: var( --unec_sng_mute );
}

#top .unec_sng_sec .unec_sng_body > :is( h1, h2, h3, h4, h5, h6 ) {
	--u_fs: var( --unec_sng_h5_fs );
	--u_lh: var( --unec_sng_h5_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	letter-spacing: var( --unec_sng_h5_ls );
	color: var( --unec_sng_ink );
	text-transform: none;
}

#top .unec_sng_sec .unec_sng_body > * {
	margin: 0;
	max-width: 100%;
}

#top .unec_sng_sec .unec_sng_body > * + * {
	margin-top: var( --unec_sng_para_gap );
}

#top .unec_sng_sec .unec_sng_body > :is( h1, h2, h3, h4, h5, h6 ) + * {
	margin-top: var( --unec_sng_head_gap );
}

#top .unec_sng_sec .unec_sng_body > * + :is( h1, h2, h3, h4, h5, h6 ) {
	margin-top: 58px;
}

#top .unec_sng_sec .unec_sng_body > * + :is( figure, img, table, .wp-caption, .wp-block-image, .wp-block-embed ),
#top .unec_sng_sec .unec_sng_body > :is( figure, img, table, .wp-caption, .wp-block-image, .wp-block-embed ) + * {
	margin-top: var( --unec_sng_block );
}

#top .unec_sng_sec .unec_sng_body > :first-child {
	margin-top: 0;
}

#top .unec_sng_sec .unec_sng_body > :last-child {
	margin-bottom: 0;
}

#top .unec_sng_sec .unec_sng_body > :is( ul, ol ) {
	padding-left: 25.5px;
	list-style-position: outside;
}

#top .unec_sng_sec .unec_sng_body > ul { list-style-type: disc; }
#top .unec_sng_sec .unec_sng_body > ol { list-style-type: decimal; }

#top .unec_sng_sec .unec_sng_body > :is( ul, ol ) li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

#top .unec_sng_sec .unec_sng_body > blockquote {
	padding-left: 24px;
	border-left: 2px solid var( --unec_sng_brand );
}

#top .unec_sng_body :is( img ) {
	max-width: 100%;
	height: auto;
}

#top .unec_sng_body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

#top .unec_sng_body a:hover,
#top .unec_sng_body a:focus-visible {
	text-decoration-color: var( --unec_sng_brand );
}

#top .unec_sng_body :is( strong, b ) { font-weight: 600; }

/* -------------------------------------------------------------------------
 * 9. Share + tags
 *
 * Figma draws strokes top and bottom on this frame. Strokes take no layout
 * space, so they are absolutely positioned hairlines, not borders.
 * ---------------------------------------------------------------------- */
#top .unec_sng_foot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_sng_col_gap );
	width: 100%;
	padding: var( --unec_sng_foot_pad ) 0;
}

#top .unec_sng_foot::before,
#top .unec_sng_foot::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var( --unec_sng_rule );
}

#top .unec_sng_foot::before { top: 0; }
#top .unec_sng_foot::after { bottom: 0; }

#top .unec_sng_block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_sng_back_gap );
	width: 100%;
}

#top .unec_sng_h {
	--u_fs: var( --unec_sng_h5_fs );
	--u_lh: var( --unec_sng_h5_lh );
	margin: 0;
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	letter-spacing: var( --unec_sng_h5_ls );
	color: var( --unec_sng_ink );
	white-space: nowrap;
}

#top .unec_sng_sec ul.unec_sng_share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sng_sec ul.unec_sng_share > li {
	/* a block-level item, so the chip is not an inline box on a line and
	   cannot pick up descender space below its baseline — which it does the
	   moment the cap trim moves that baseline */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sng_sec ul.unec_sng_share > li::before,
#top .unec_sng_sec ul.unec_sng_share > li::after {
	content: none;
}

#top a.unec_sng_share_btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 12px 20px 12px 16px;
	background: var( --unec_sng_net, var( --unec_sng_ink ) );
	color: #fff;
	text-decoration: none;
	transition: filter .25s ease;
}

#top a.unec_sng_share_btn:hover,
#top a.unec_sng_share_btn:focus-visible {
	filter: brightness( .88 );
	color: #fff;
}

#top a.unec_sng_share_btn:focus-visible {
	outline: 2px solid var( --unec_sng_ink );
	outline-offset: 2px;
}

#top .unec_sng_share_btn svg {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

#top .unec_sng_share_label {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	color: #fff;
}

/* brand colours, straight off the Figma fills */
#top .unec_sng_share_facebook  { --unec_sng_net: #1877f2; }
#top .unec_sng_share_linkedin  { --unec_sng_net: #056aa2; }
#top .unec_sng_share_whatsapp  { --unec_sng_net: #25d366; }
#top .unec_sng_share_pinterest { --unec_sng_net: #e60023; }
#top .unec_sng_share_twitter   { --unec_sng_net: #000000; }

#top .unec_sng_sec ul.unec_sng_tags {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sng_sec ul.unec_sng_tags > li {
	/* a block-level item, so the chip is not an inline box on a line and
	   cannot pick up descender space below its baseline — which it does the
	   moment the cap trim moves that baseline */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sng_sec ul.unec_sng_tags > li::before,
#top .unec_sng_sec ul.unec_sng_tags > li::after {
	content: none;
}

#top .unec_sng_tag {
	--u_fs: var( --unec_sng_bd_fs );
	--u_lh: var( --unec_sng_bd_lh );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px;
	background: var( --unec_sng_chip_bg );
	color: var( --unec_sng_chip_ink );
	font-size: var( --u_fs );
	line-height: var( --u_lh );
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease;
}

#top .unec_sng_tag_label {
	font-size: inherit;
	line-height: inherit;
}

#top a.unec_sng_tag:hover,
#top a.unec_sng_tag:focus-visible {
	--unec_sng_chip_bg: var( --unec_sng_brand );
	--unec_sng_chip_ink: var( --unec_sng_ink );
}

#top a.unec_sng_tag:focus-visible {
	outline: 2px solid var( --unec_sng_ink );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 10. Sticky rescue
 *
 * Any ancestor with a clipping overflow becomes the scroll container the
 * sticky column is measured against, and Enfold ships three:
 *   html.html_stretched  overflow-x: hidden
 *   body#top             overflow-x: hidden
 *   div#wrap_all         overflow: hidden
 * overflow: clip clips identically without creating a scroll container.
 * The script writes the replacement pair per element from live computed
 * styles; the rules only apply where clip is supported, so a browser
 * without it keeps the theme's own behaviour rather than breaking.
 * claude/services-page.md trap 5.
 * ---------------------------------------------------------------------- */
@supports ( overflow-x: clip ) {
	html.unec_sng_unclip,
	#top.unec_sng_unclip,
	#top .unec_sng_unclip {
		overflow-x: var( --unec_sng_ox, clip );
		overflow-y: var( --unec_sng_oy, visible );
	}

	/* clip does not establish a block formatting context and hidden does, so
	   anything that was containing floats through that side effect needs it
	   restated or it collapses to zero height */
	#top .unec_sng_unclip.unec_sng_unclip_bfc {
		display: flow-root;
	}
}

/* placed after every transition it turns off, so it wins on source order
   rather than on !important */
@media ( prefers-reduced-motion: reduce ) {
	#top .unec_sng_sec *,
	#top .unec_sng_sec *::before,
	#top .unec_sng_sec *::after {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
}

/* -------------------------------------------------------------------------
 * 11. Responsive ladder
 *
 * Breakpoints 1400 / 1180 / 1024 / 768 / 480, house set. Every step moves a
 * token; nothing here re-declares a value written from PHP, because this
 * module writes none.
 * ---------------------------------------------------------------------- */
@media ( max-width: 1400px ) {
	#top .unec_sng_sec {
		--unec_sng_pad_scale: .8;
		--unec_sng_h1_fs: 80px; --unec_sng_h1_lh: 76px;
		--unec_sng_h3_fs: 48px; --unec_sng_h3_lh: 46px;
		--unec_sng_block: 80px;
		--unec_sng_foot_pad: 80px;
		--unec_sng_col_gap: 56px;
	}
}

@media ( max-width: 1180px ) {
	#top .unec_sng_sec {
		--unec_sng_pad_scale: .7;
		--unec_sng_h1_fs: 72px; --unec_sng_h1_lh: 68px;
		--unec_sng_h3_fs: 40px; --unec_sng_h3_lh: 40px;
		--unec_sng_h5_fs: 24px; --unec_sng_h5_lh: 30px;
		--unec_sng_gutter_min: 40px;
		--unec_sng_block: 72px;
		--unec_sng_foot_pad: 72px;
		--unec_sng_col_gap: 48px;
		--unec_sng_meta_gap: 32px;
	}
}

/* Below 1024 the two columns stack. The override matches the specificity of
   the rule it overrides — a shorter selector loses silently and the desktop
   layout survives onto a phone. claude/news-archive-page.md, trap 4. */
@media ( max-width: 1024px ) {
	#top .unec_sng_sec {
		--unec_sng_pad_scale: .6;
		--unec_sng_h1_fs: 64px; --unec_sng_h1_lh: 60px;
		--unec_sng_h3_fs: 36px; --unec_sng_h3_lh: 38px;
		--unec_sng_gutter_min: 40px;
		--unec_sng_block: 64px;
		--unec_sng_foot_pad: 64px;
		--unec_sng_col_gap: 40px;
	}

	#top .unec_sng_grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var( --unec_sng_block );
	}

	#top .unec_sng_aside,
	#top .unec_sng_main {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		position: static;
		top: auto;
	}

	#top .unec_sng_date {
		align-items: baseline;
	}
}

@media ( max-width: 768px ) {
	#top .unec_sng_sec {
		--unec_sng_pad_scale: .45;
		--unec_sng_h1_fs: 56px; --unec_sng_h1_lh: 54px;
		--unec_sng_h3_fs: 32px; --unec_sng_h3_lh: 36px;
		--unec_sng_h5_fs: 22px; --unec_sng_h5_lh: 28px;
		--unec_sng_gutter_min: 24px;
		--unec_sng_block: 56px;
		--unec_sng_foot_pad: 56px;
		--unec_sng_col_gap: 32px;
		--unec_sng_meta_gap: 24px;
	}

	#top .unec_sng_h {
		white-space: normal;
	}
}

@media ( max-width: 480px ) {
	#top .unec_sng_sec {
		--unec_sng_pad_scale: .35;
		--unec_sng_h1_fs: 48px; --unec_sng_h1_lh: 46px;
		--unec_sng_h3_fs: 28px; --unec_sng_h3_lh: 32px;
		--unec_sng_bd_fs: 16px; --unec_sng_bd_lh: 24px;
		--unec_sng_gutter_min: 24px;
		--unec_sng_block: 48px;
		--unec_sng_foot_pad: 48px;
		--unec_sng_meta_gap: 20px;
	}

	#top a.unec_sng_share_btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}