/* UT-News frontend.
   Three design styles chosen in the console (Branding → Website design):
     .utn-s-saas     clean business UI: solid cards, hairline borders (default)
     .utn-s-minimal  editorial: no boxes, rules and whitespace
     .utn-s-glass    Apple-style glass: blur, translucent cards, soft colour background
   Light by day, dark at night (data-theme on <html>), with a manual switch.
   Customisable tokens come from the console as CSS variables (see UTN_Frontend::css_vars). */

:root {
	--utn-primary: #0F7B6C;
	--utn-accent: #C4610E;
	--utn-r: 16px;
	--utn-ri: 12px;
	--utn-rs: 10px;
	--utn-blur: 22px;
	--utn-ga: .58;
	--utn-ga2: .80;
	--utn-bg-l: #F4F6F9;
	--utn-bg-d: #0B1116;
	--utn-ink-l: #13202A;
	--utn-font: "Poppins";
	--utn-hw: 600;
	--utn-bw: 400;
	--utn-logo-h: 40px;

	--utn-sans: var(--utn-font), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--utn-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--utn-prose-font: var(--utn-sans);
	--utn-wrap: 1760px;
	--utn-pad: clamp(16px, 3vw, 48px);
	--utn-gap: 24px;
	--utn-btn-r: 10px;
	--utn-side: 340px;

	--utn-bg: var(--utn-bg-l);
	--utn-surface: #FFFFFF;
	--utn-surface2: #F7F9FB;
	--utn-ink: var(--utn-ink-l);
	--utn-ink2: color-mix(in srgb, var(--utn-ink) 80%, #8A97A1);
	--utn-mut: #66737E;
	--utn-line: #E2E7ED;
	--utn-hair: #EDF1F5;
	--utn-soft: color-mix(in srgb, var(--utn-primary) 10%, transparent);
	color-scheme: light;
}
:root[data-theme="dark"] {
	--utn-bg: var(--utn-bg-d);
	--utn-surface: #121A21;
	--utn-surface2: #17212A;
	--utn-ink: #EEF3F6;
	--utn-ink2: #C3CDD3;
	--utn-mut: #8F9CA5;
	--utn-line: #22303A;
	--utn-hair: #1B262F;
	--utn-soft: color-mix(in srgb, var(--utn-primary) 22%, transparent);
	color-scheme: dark;
}
.utn-prose-serif { --utn-prose-font: var(--utn-serif); }
.utn-w-boxed { --utn-wrap: 1280px; --utn-pad: clamp(16px, 3vw, 32px); --utn-side: 320px; }

/* ---------- Style: minimal ---------- */
.utn-s-minimal { --utn-btn-r: 4px; --utn-ri: min(var(--utn-r), 8px); --utn-rs: min(var(--utn-r), 6px); }
:root:not([data-theme="dark"]) .utn-s-minimal { --utn-bg: color-mix(in srgb, var(--utn-bg-l) 25%, #fff); }

/* ---------- Style: glass ---------- */
.utn-s-glass { --utn-btn-r: 999px; --utn-gl: rgb(255 255 255 / var(--utn-ga)); --utn-gl2: rgb(255 255 255 / var(--utn-ga2)); --utn-gline: rgb(255 255 255 / .85); --utn-aura1: color-mix(in srgb, var(--utn-primary) 30%, transparent); --utn-aura2: rgb(255 166 108 / .30); --utn-aura3: rgb(108 156 255 / .22); --utn-aura4: rgb(255 140 176 / .18); }
:root[data-theme="dark"] .utn-s-glass { --utn-gl: rgb(26 34 39 / var(--utn-ga)); --utn-gl2: rgb(26 34 39 / var(--utn-ga2)); --utn-gline: rgb(255 255 255 / .12); --utn-aura1: color-mix(in srgb, var(--utn-primary) 20%, transparent); --utn-aura2: rgb(255 166 108 / .14); --utn-aura3: rgb(108 156 255 / .13); --utn-aura4: rgb(255 140 176 / .10); }

/* ---------- Base ---------- */
.utn-canvas-body { margin: 0; background: var(--utn-bg); color: var(--utn-ink); font: var(--utn-bw) 15px/1.6 var(--utn-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s, color .3s; }
@media (min-width: 900px) { .utn-canvas-body { font-size: 16px; } }
.utn-canvas-body.utn-ambient {
	background:
		radial-gradient(900px 700px at 0% 0%, var(--utn-aura1), transparent 62%),
		radial-gradient(800px 640px at 100% 12%, var(--utn-aura2), transparent 62%),
		radial-gradient(900px 760px at 0% 60%, var(--utn-aura3), transparent 62%),
		radial-gradient(820px 700px at 100% 92%, var(--utn-aura4), transparent 62%),
		var(--utn-bg);
	background-attachment: fixed;
}
.utn-ui *, .utn-ui *::before, .utn-ui *::after { box-sizing: border-box; }
.utn-canvas-body img { max-width: 100%; height: auto; display: block; }
.utn-canvas-body a { color: inherit; text-decoration: none; }
.utn-canvas-body h1, .utn-canvas-body h2, .utn-canvas-body h3 { font-family: var(--utn-sans); color: inherit; text-transform: none; }
.utn-wrap { width: 100%; max-width: var(--utn-wrap); margin-inline: auto; padding-inline: var(--utn-pad); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.utn-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--utn-ink); color: var(--utn-bg) !important; padding: 10px 14px; border-radius: 8px; }
.utn-skip:focus { left: 8px; }
.utn-canvas-body :focus-visible { outline: 3px solid var(--utn-primary); outline-offset: 2px; border-radius: 6px; }
.utn-main { display: flex; flex-direction: column; gap: 32px; padding: 24px 0 32px; }
/* Every homepage section is spaced the same, so nothing touches its neighbour. */
.utn-home, .utn-page-content { display: flex; flex-direction: column; gap: 32px; }
.utn-home > *, .utn-page-content > * { margin-top: 0; margin-bottom: 0; }
@media (max-width: 700px) { .utn-main, .utn-home, .utn-page-content { gap: 22px; } .utn-main { padding-top: 14px; } }

/* Surfaces. Same class names in every style; the style decides the look. */
.utn-glass, .utn-glass2 { background: var(--utn-surface); border: 1px solid var(--utn-line); border-radius: var(--utn-r); }
.utn-s-glass .utn-glass, .utn-s-glass .utn-glass2 { -webkit-backdrop-filter: blur(var(--utn-blur)) saturate(170%); backdrop-filter: blur(var(--utn-blur)) saturate(170%); border-color: var(--utn-gline); }
.utn-s-glass .utn-glass { background: var(--utn-gl); }
.utn-s-glass .utn-glass2 { background: var(--utn-gl2); }
.utn-s-minimal .utn-glass, .utn-s-minimal .utn-glass2 { background: transparent; border: 0; border-radius: 0; }

/* Buttons & inputs — prefixed with body.utn-ui so theme / page-builder button styles can't restyle them. */
body.utn-ui .utn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; margin: 0; border: 0; border-radius: var(--utn-btn-r); background: var(--utn-ink); color: var(--utn-bg); font: 500 14px/1 var(--utn-sans); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; text-shadow: none; cursor: pointer; white-space: nowrap; transition: opacity .2s; min-height: 0; }
body.utn-ui .utn-btn:hover, body.utn-ui .utn-btn:focus { opacity: .88; background: var(--utn-ink); color: var(--utn-bg); border: 0; }
body.utn-ui .utn-btn--accent, body.utn-ui .utn-btn--accent:hover, body.utn-ui .utn-btn--accent:focus { background: var(--utn-primary); color: #fff; }
body.utn-ui .utn-btn--block { width: 100%; }
body.utn-ui .utn-btn--clear, body.utn-ui .utn-btn--clear:hover { background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .35); }
body.utn-ui .utn-iconbtn { width: 42px; height: 42px; padding: 0; margin: 0; border: 0; border-radius: var(--utn-btn-r); display: grid; place-items: center; color: inherit; background: transparent; box-shadow: none; cursor: pointer; min-height: 0; }
body.utn-ui .utn-iconbtn:hover, body.utn-ui .utn-iconbtn:focus { background: var(--utn-hdr-hover, var(--utn-hair)); color: inherit; border: 0; }
body.utn-ui .utn-iconbtn svg { width: 20px; height: 20px; }
.utn-more { font-weight: 500; font-size: 14px; color: var(--utn-primary) !important; white-space: nowrap; }
.utn-more:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.utn-topad { padding-top: 12px; }
.utn-navwrap { --utn-hdr-bg: var(--utn-surface); --utn-hdr-ink: var(--utn-ink); --utn-hdr-mut: var(--utn-ink2); --utn-hdr-hover: var(--utn-hair); position: sticky; top: 0; z-index: 40; background: var(--utn-hdr-bg); color: var(--utn-hdr-ink); border-bottom: 1px solid var(--utn-line); }
.utn-hdr--brand { --utn-hdr-bg: var(--utn-primary); --utn-hdr-ink: #fff; --utn-hdr-mut: rgb(255 255 255 / .84); --utn-hdr-hover: rgb(255 255 255 / .14); border-bottom-color: transparent; }
.utn-hdr--dark { --utn-hdr-bg: #0D141A; --utn-hdr-ink: #fff; --utn-hdr-mut: rgb(255 255 255 / .78); --utn-hdr-hover: rgb(255 255 255 / .1); border-bottom-color: #1D2832; }
.utn-s-minimal .utn-hdr--light { --utn-hdr-bg: var(--utn-bg); border-bottom-color: var(--utn-ink); }
.utn-topad + .utn-navwrap { margin-top: 12px; }
.admin-bar .utn-navwrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .utn-navwrap { top: 46px; } }
@media (max-width: 600px) { .admin-bar .utn-navwrap { top: 0; } }

.utn-nav { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; }
.utn-s-glass .utn-navwrap { background: transparent; border: 0; padding-top: 12px; top: 0; }
.utn-s-glass .utn-nav { min-height: 62px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--utn-gl2); -webkit-backdrop-filter: blur(var(--utn-blur)) saturate(170%); backdrop-filter: blur(var(--utn-blur)) saturate(170%); border: 1px solid var(--utn-gline); }
.utn-s-glass .utn-hdr--brand .utn-nav { background: color-mix(in srgb, var(--utn-primary) 88%, transparent); border-color: transparent; }
.utn-s-glass .utn-hdr--dark .utn-nav { background: rgb(13 20 26 / .86); border-color: rgb(255 255 255 / .1); }

.utn-logo { display: inline-flex; align-items: center; flex: none; line-height: 1; }
.utn-logo img { height: var(--utn-logo-h); width: auto; max-width: min(260px, 46vw); object-fit: contain; }
.utn-logo__word { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--utn-hdr-ink, var(--utn-ink)); margin: 0; white-space: nowrap; }
/* Links that don't fit wrap onto a hidden second line, so none is ever cut in half. */
.utn-nav__list { display: flex; align-items: center; gap: 2px; margin-left: 10px; overflow: hidden; flex: 1; min-width: 0; flex-wrap: wrap; height: 38px; }
.utn-nav__list > a { padding: 8px 12px; border-radius: var(--utn-btn-r); font-size: 14px; font-weight: 500; color: var(--utn-hdr-mut); white-space: nowrap; }
.utn-nav__list > a:hover { background: var(--utn-hdr-hover); color: var(--utn-hdr-ink); }
.utn-nav__list > a[aria-current] { color: var(--utn-hdr-ink); background: var(--utn-hdr-hover); }
.utn-hdr--light .utn-nav__list > a[aria-current] { color: var(--utn-primary); background: var(--utn-soft); }
.utn-nav__more { display: none; }
.utn-nav__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.utn-nav__toggle { display: none !important; }
.utn-tg { display: flex; gap: 2px; padding: 3px; border-radius: var(--utn-btn-r); background: var(--utn-hdr-hover, var(--utn-hair)); }
body.utn-ui .utn-tg button { width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: calc(var(--utn-btn-r) - 2px); background: transparent; color: var(--utn-hdr-mut, var(--utn-mut)); display: grid; place-items: center; cursor: pointer; box-shadow: none; min-height: 0; }
body.utn-ui .utn-tg button:hover { color: var(--utn-hdr-ink, var(--utn-ink)); background: transparent; }
body.utn-ui .utn-tg button[aria-pressed="true"] { background: var(--utn-surface); color: var(--utn-ink); }
.utn-tg svg { width: 17px; height: 17px; }
@media (max-width: 1240px) { .utn-nav__cta { display: none !important; } }
@media (max-width: 1000px) {
	.utn-nav { min-height: 60px; gap: 8px; }
	.utn-nav__toggle { display: grid !important; }
	.utn-nav__list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; flex-direction: column; align-items: stretch; gap: 0; border-radius: var(--utn-r); background: var(--utn-surface); color: var(--utn-ink); border: 1px solid var(--utn-line); max-height: calc(100vh - 100px); overflow-y: auto; }
	.utn-s-glass .utn-nav__list { left: -1px; right: -1px; }
	.utn-nav.is-open .utn-nav__list { display: flex; }
	.utn-nav__list { height: auto; flex-wrap: nowrap; }
	.utn-nav__list > a { padding: 12px 14px; font-size: 15px; color: var(--utn-ink); }
	.utn-nav__list > a:hover { background: var(--utn-hair); color: var(--utn-ink); }
	.utn-nav__more { display: grid; gap: 12px; padding: 12px 6px 6px; margin-top: 6px; border-top: 1px solid var(--utn-line); }
	.utn-nav__theme { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--utn-mut); }
	.utn-nav__theme .utn-tg { background: var(--utn-hair); }
	.utn-nav__theme .utn-tg button { color: var(--utn-mut) !important; }
}
@media (max-width: 600px) {
	.utn-nav__tg { display: none; }
	.utn-logo img { height: calc(var(--utn-logo-h) * .85); }
	.utn-logo__word { font-size: 19px; }
	.utn-s-glass .utn-nav { padding-left: 16px; }
}

/* ---------- Ticker ---------- */
.utn-ticker { display: flex; align-items: center; gap: 14px; padding: 5px 14px 5px 5px; min-height: 46px; border-radius: var(--utn-rs); overflow: hidden; }
.utn-s-glass .utn-ticker { border-radius: 999px; }
.utn-s-minimal .utn-ticker { border-bottom: 1px solid var(--utn-line); padding-left: 0; }
.utn-ticker__label { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: calc(var(--utn-btn-r) - 2px); background: var(--utn-accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.utn-ticker__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: utn-pulse 1.6s ease-in-out infinite; }
@keyframes utn-pulse { 50% { opacity: .25; } }
.utn-ticker__track { overflow: hidden; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.utn-ticker__run { display: inline-flex; gap: 48px; white-space: nowrap; animation: utn-run 50s linear infinite; }
.utn-ticker__run a { font-weight: 500; font-size: 14px; }
.utn-ticker__run a:hover { color: var(--utn-primary); }
@media (hover: hover) { .utn-ticker:hover .utn-ticker__run { animation-play-state: paused; } }
/* Ticker lives inside the sticky header, right under the menu. */
.utn-navwrap > .utn-wrap + .utn-wrap { padding-bottom: 8px; }
.utn-navwrap .utn-ticker { background: var(--utn-surface2); border-color: var(--utn-line); color: var(--utn-ink); }
.utn-hdr--brand .utn-ticker, .utn-hdr--dark .utn-ticker { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .16); color: #fff; }
.utn-hdr--brand .utn-ticker__time, .utn-hdr--dark .utn-ticker__time { color: rgb(255 255 255 / .7); }
.utn-s-glass .utn-navwrap > .utn-wrap + .utn-wrap { padding-top: 8px; padding-bottom: 0; }
.utn-s-glass .utn-navwrap .utn-ticker { background: var(--utn-gl2); border-color: var(--utn-gline); -webkit-backdrop-filter: blur(var(--utn-blur)); backdrop-filter: blur(var(--utn-blur)); }
.utn-ticker__time { flex: none; font-size: 12.5px; color: var(--utn-mut); }
@keyframes utn-run { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .utn-ticker__time { display: none; } .utn-ticker { min-height: 42px; } .utn-ticker__label { height: 30px; font-size: 12px; } .utn-ticker__run a { font-size: 13.5px; } }
/* Breaking news keeps moving even with Reduce Motion on (slower), as the newsroom asked. */
@media (prefers-reduced-motion: reduce) { .utn-ticker__label::before { animation: none; } }

/* ---------- Advertising spaces ---------- */
/* The card shrinks to the banner so the whole banner shows, edge to edge, with no empty space or text around it. */
.utn-spot { margin: 0 auto; padding: 8px; text-align: center; width: fit-content; max-width: 100%; }
.utn-spot--html { width: auto; }
.utn-spot__code { display: flex; justify-content: center; overflow: hidden; }
.utn-spot__code iframe, .utn-spot__code img { max-width: 100%; }
.utn-split__side .utn-spot { width: 100%; }
.utn-s-minimal .utn-spot { padding-inline: 0; border-top: 1px solid var(--utn-line); }
.utn-spotcap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 0 0 8px; font-size: 11px; letter-spacing: .02em; color: var(--utn-mut); }
.utn-spotcap--start { justify-content: flex-start; }
.utn-spottag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--utn-line); font-weight: 500; color: var(--utn-ink2); }
.utn-spottag--live { color: var(--utn-primary); border-color: transparent; background: var(--utn-soft); }
.utn-spottag--soon { color: var(--utn-accent); background: color-mix(in srgb, var(--utn-accent) 14%, transparent); }
.utn-spot__link { display: block; }
.utn-spot__link img { margin-inline: auto; border-radius: calc(var(--utn-r) - 6px); width: 100%; height: auto; object-fit: contain; }
.utn-spot__link picture { display: block; }
.utn-spot--above_menu .utn-spot__link img, .utn-spot--footer_banner .utn-spot__link img, .utn-spot--home_billboard .utn-spot__link img { max-width: 970px; }
.utn-spot--header_leaderboard .utn-spot__link img, .utn-spot--in_article .utn-spot__link img { max-width: 728px; }
.utn-spot--sidebar_mrec .utn-spot__link img, .utn-spot--sidebar_half .utn-spot__link img { max-width: 300px; }
.utn-spot--in_article { margin: 1.6em 0; font-family: var(--utn-sans); }
.utn-spotrow { margin: 0 auto; }

/* Empty slot: "Advertise here" */
.utn-spot--empty { padding: 8px; width: 100%; }
.utn-spot__free { display: grid; place-content: center; gap: 2px; min-height: 90px; margin-inline: auto; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--utn-primary) 38%, transparent); border-radius: var(--utn-rs); background: color-mix(in srgb, var(--utn-primary) 4%, transparent); color: var(--utn-mut); transition: background .2s; }
.utn-spot__free:hover { background: var(--utn-soft); }
.utn-spot__free strong { color: var(--utn-primary); font-weight: 600; font-size: 14.5px; }
.utn-spot__free span { font-size: 12px; }
.utn-spot--above_menu .utn-spot__free, .utn-spot--footer_banner .utn-spot__free, .utn-spot--home_billboard .utn-spot__free { max-width: 970px; }
.utn-spot--header_leaderboard .utn-spot__free, .utn-spot--in_article .utn-spot__free { max-width: 728px; }
.utn-spot--home_billboard .utn-spot__free { min-height: 170px; }
.utn-spot--sidebar_mrec .utn-spot__free { min-height: 220px; }
.utn-spot--sidebar_half .utn-spot__free { min-height: 380px; }
.utn-spot__slot { height: 60px; display: grid; place-items: center; border: 1.5px dashed var(--utn-line); border-radius: var(--utn-rs); font-size: 12px; color: var(--utn-mut); }
@media (max-width: 1000px) { .utn-sticky .utn-spot--empty { display: none; } }
@media (max-width: 700px) { .utn-spot__free { min-height: 64px; } .utn-spot--home_billboard .utn-spot__free { min-height: 110px; } .utn-spot--sidebar_mrec .utn-spot__free { min-height: 160px; } }

.utn-card--native { outline: 1.5px dashed color-mix(in srgb, var(--utn-primary) 40%, transparent); outline-offset: -1px; }
.utn-card--native .utn-fig { position: relative; }
/* Native ads: show the advertiser's whole picture, never a cropped slice of a banner. */
.utn-card--native .utn-fig { aspect-ratio: auto; background: var(--utn-surface2); }
.utn-card--native .utn-fig img { width: 100%; height: auto; object-fit: contain; }
.utn-native__badge { position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: var(--utn-surface); font-size: 11px; font-weight: 600; color: var(--utn-ink); }
.utn-native__by { margin: 0; font-size: 12.5px; color: var(--utn-mut); }
.utn-native__cta { font-weight: 500; font-size: 14px; color: var(--utn-primary) !important; margin-top: auto; }

.utn-logos { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.utn-s-minimal .utn-logos { padding-inline: 0; }
.utn-logos__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.utn-logos__head h2 { margin: 0; font-size: 17px; font-weight: var(--utn-hw); }
.utn-logos__head .utn-spotcap { margin: 0; }
.utn-logos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.utn-logo-tile { height: 68px; border-radius: var(--utn-rs); background: #fff; border: 1px solid var(--utn-line); display: grid; place-items: center; padding: 10px; transition: transform .2s; }
.utn-logo-tile:hover { transform: translateY(-2px); }
.utn-logo-tile img { max-height: 44px; width: auto; }
@media (max-width: 520px) { .utn-logos__grid { grid-template-columns: repeat(3, 1fr); } .utn-logo-tile { height: 56px; } }

/* ---------- Building blocks ---------- */
.utn-fig { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--utn-ri); background: var(--utn-hair); }
.utn-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.utn-fig--blank { display: grid; place-items: end start; padding: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--utn-primary) 25%, #fff), var(--utn-primary)); }
.utn-fig--blank span { font-weight: 600; color: #fff; font-size: 13px; }

.utn-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 500; }
.utn-kicker__cat { color: var(--utn-primary) !important; }
.utn-kicker__cat:hover { text-decoration: underline; }
.utn-kicker__type { color: var(--utn-mut); }
.utn-flag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.utn-flag--breaking { background: var(--utn-accent); color: #fff; }
.utn-flag--sponsored { background: var(--utn-hair); color: var(--utn-ink2); }
.utn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--utn-mut); font-size: 12.5px; }
.utn-meta a { font-weight: 500; color: var(--utn-ink2); }
.utn-meta a:hover { color: var(--utn-primary); }

.utn-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.utn-card__media { display: block; }
.utn-card:hover .utn-fig img { transform: scale(1.035); }
.utn-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.utn-card--stack .utn-fig { border-radius: 0; }
.utn-s-glass .utn-card--stack { padding: 8px; }
.utn-s-glass .utn-card--stack .utn-fig { border-radius: var(--utn-ri); }
.utn-s-glass .utn-card--stack .utn-card__body { padding: 14px 8px 8px; }
.utn-s-minimal .utn-card--stack { overflow: visible; }
.utn-s-minimal .utn-card--stack .utn-fig { border-radius: var(--utn-ri); }
.utn-s-minimal .utn-card--stack .utn-card__body { padding: 12px 0 0; }
.utn-card__title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: var(--utn-hw); letter-spacing: -0.01em; text-wrap: pretty; }
.utn-card__title a:hover { color: var(--utn-primary); }
.utn-card__dek { margin: 0; font-size: 14px; line-height: 1.6; color: var(--utn-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.utn-card--stack .utn-meta { margin-top: auto; }

.utn-grid { display: grid; gap: var(--utn-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .utn-grid--3, .utn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .utn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .utn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones: story cards become compact rows — picture beside the headline, never under text. */
@media (max-width: 619px) {
	.utn-grid .utn-card--stack { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; align-items: start; }
	.utn-grid .utn-card--stack .utn-fig { aspect-ratio: 1; border-radius: var(--utn-rs); }
	.utn-grid .utn-card--stack .utn-card__body { padding: 0; gap: 6px; }
	.utn-grid .utn-card--stack .utn-card__dek { display: none; }
	.utn-grid .utn-card--stack .utn-card__title { font-size: 15px; }
	.utn-grid .utn-card--stack .utn-meta a { display: none; }
	.utn-s-minimal .utn-grid .utn-card--stack { padding: 0 0 14px; border-bottom: 1px solid var(--utn-line); }
	.utn-grid { gap: 12px; }
	.utn-band .utn-grid { gap: 14px; }
}

.utn-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.utn-sechead__title { margin: 0; font-size: clamp(20px, 1rem + 1vw, 28px); font-weight: var(--utn-hw); letter-spacing: -0.02em; line-height: 1.15; }
.utn-s-minimal .utn-sechead { border-top: 2px solid var(--utn-ink); padding-top: 12px; }
.utn-boxhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.utn-boxtitle { margin: 0; font-size: 18px; font-weight: var(--utn-hw); letter-spacing: -0.01em; }

/* Boxes that become ruled sections in the minimal style */
.utn-s-minimal :is(.utn-topstories, .utn-mostread, .utn-catpanel, .utn-cta, .utn-facts, .utn-authorbox, .utn-rows, .utn-foot, .utn-logos) { border-top: 2px solid var(--utn-ink); padding-left: 0; padding-right: 0; }

/* ---------- Home: lead story (picture and text side by side, never text over the picture) ---------- */
.utn-front { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--utn-gap); align-items: start; }
@media (min-width: 1000px) { .utn-front { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); } }
.utn-lead { container-type: inline-size; padding: 10px; min-width: 0; }
.utn-s-minimal .utn-lead { padding: 0; }
.utn-lead__in { display: flex; flex-direction: column; }
.utn-lead__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--utn-ri); overflow: hidden; background: var(--utn-hair); }
.utn-lead__media img, .utn-lead__media .utn-fig--blank { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.utn-lead:hover .utn-lead__media img { transform: scale(1.02); }
.utn-lead__body { padding: 20px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.utn-s-minimal .utn-lead__body { padding: 16px 0 0; }
.utn-lead__title { margin: 0; font-size: clamp(21px, 3.3cqi, 40px); line-height: 1.18; font-weight: var(--utn-hw); letter-spacing: -0.02em; text-wrap: balance; }
.utn-lead__title a:hover { color: var(--utn-primary); }
.utn-lead__dek { margin: 0; font-size: clamp(14px, 1.5cqi, 17px); line-height: 1.65; color: var(--utn-ink2); }
.utn-lead__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
@container (min-width: 820px) {
	.utn-lead__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; align-items: center; }
	.utn-lead__media { aspect-ratio: 4 / 3; }
	.utn-lead__body { padding: 16px 22px 16px 26px; gap: 16px; }
	.utn-s-minimal .utn-lead__body { padding: 0 0 0 28px; }
	.utn-lead__dek { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 600px) { .utn-lead__foot .utn-btn { width: 100%; } .utn-lead { padding: 8px; } .utn-lead__body { padding: 14px 6px 6px; } }

.utn-topstories { min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.utn-mini { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--utn-line); }
.utn-boxhead + .utn-mini { border-top: 0; padding-top: 0; }
.utn-mini__img { flex: none; width: 88px; }
.utn-mini__img .utn-fig { aspect-ratio: 4 / 3; border-radius: var(--utn-rs); }
.utn-mini__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.utn-mini__title { margin: 0; font-size: 14.5px; line-height: 1.4; font-weight: var(--utn-hw); }
.utn-mini__title a:hover { color: var(--utn-primary); }

/* ---------- Main + sidebar ---------- */
.utn-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--utn-gap); align-items: start; }
@media (min-width: 1000px) { .utn-split { grid-template-columns: minmax(0, 1fr) var(--utn-side); } }
.utn-split__main { min-width: 0; }
.utn-split__side { min-width: 0; display: flex; flex-direction: column; gap: var(--utn-gap); }
.utn-sticky { position: sticky; top: 140px; }
.utn-sticky:empty { display: none; }
@media (max-width: 999px) { .utn-sticky { position: static; } }

.utn-mostread { padding: 22px 24px; }
.utn-mostread ol { list-style: none; counter-reset: mr; margin: 6px 0 0; padding: 0; }
.utn-mostread li { counter-increment: mr; display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--utn-line); }
.utn-mostread li:last-child { border-bottom: 0; padding-bottom: 0; }
.utn-mostread li::before { content: counter(mr, decimal-leading-zero); flex: none; width: 28px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--utn-primary); }
.utn-mostread a { font-size: 14px; font-weight: 500; line-height: 1.45; }
.utn-mostread a:hover { color: var(--utn-primary); }

/* "In conversation": solid colour band, no photo behind the text. */
.utn-band { border-radius: var(--utn-r); padding: clamp(18px, 3vw, 36px); background: linear-gradient(135deg, color-mix(in srgb, var(--utn-primary) 90%, #000), color-mix(in srgb, var(--utn-primary) 55%, #000)); color: #fff; }
.utn-s-minimal .utn-band { border-radius: var(--utn-ri); }
.utn-band__in { display: flex; flex-direction: column; gap: 22px; }
.utn-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.utn-band__head h2 { margin: 0; font-size: clamp(21px, 1rem + 1.2vw, 30px); font-weight: var(--utn-hw); letter-spacing: -0.02em; line-height: 1.15; }
.utn-band__head p { margin: 6px 0 0; font-size: 14.5px; color: rgb(255 255 255 / .82); }
.utn-bandcard { padding: 8px; border-radius: var(--utn-r); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); }
.utn-bandcard__media { display: block; position: relative; }
.utn-play { position: absolute; left: 10px; bottom: 10px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; background: rgb(15 22 28 / .72); display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #fff; }
.utn-play svg { width: 12px; height: 12px; }
.utn-bandcard__body { padding: 14px 8px 8px; }
.utn-bandcard__cat { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: rgb(255 255 255 / .75); }
.utn-bandcard h3 { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: var(--utn-hw); }
@media (max-width: 619px) { .utn-bandcard { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; align-items: center; } .utn-bandcard .utn-fig { aspect-ratio: 1; } .utn-bandcard__body { padding: 0; } .utn-bandcard h3 { font-size: 14.5px; } .utn-play { display: none; } }

/* Section tiles: picture on top, name underneath. */
.utn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
@media (max-width: 520px) { .utn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.utn-tile { display: flex; flex-direction: column; overflow: hidden; }
.utn-tile__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--utn-primary) 25%, #fff), var(--utn-primary)); }
.utn-s-glass .utn-tile { padding: 8px; } .utn-s-glass .utn-tile__img { border-radius: var(--utn-ri); }
.utn-s-minimal .utn-tile__img { border-radius: var(--utn-ri); }
.utn-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.utn-tile:hover img { transform: scale(1.05); }
.utn-tile__label { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 1px; }
.utn-s-minimal .utn-tile__label { padding: 10px 0 0; }
.utn-tile__label strong { font-size: 14.5px; font-weight: var(--utn-hw); }
.utn-tile__label em { font-style: normal; font-size: 12.5px; color: var(--utn-mut); }
.utn-tile:hover strong { color: var(--utn-primary); }

.utn-catpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--utn-gap); }
.utn-catpanel { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.utn-catpanel__title { margin: 0; font-size: 20px; font-weight: var(--utn-hw); letter-spacing: -0.015em; }
.utn-catpanel__lead { display: flex; gap: 16px; align-items: center; }
.utn-catpanel__lead .utn-fig { width: 42%; max-width: 220px; aspect-ratio: 4 / 3; flex: none; }
.utn-catpanel__lead > span { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.utn-catpanel__lead strong { font-size: 16.5px; line-height: 1.35; font-weight: var(--utn-hw); }
.utn-catpanel__item { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--utn-line); }
.utn-catpanel__item strong { font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.utn-catpanel__item span { font-size: 12.5px; color: var(--utn-mut); }
.utn-catpanel a:hover strong { color: var(--utn-primary); }

.utn-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--utn-gap); }
.utn-cta { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.utn-cta h2 { margin: 0; font-size: clamp(19px, 1rem + .8vw, 24px); font-weight: var(--utn-hw); letter-spacing: -0.015em; line-height: 1.25; }
.utn-cta p { margin: 0; color: var(--utn-ink2); font-size: 14.5px; max-width: 60ch; }
.utn-cta .utn-btn--block { margin-top: auto; }
.utn-briefing { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
body.utn-ui .utn-briefing input[type=email] { flex: 1 1 220px; height: 44px; margin: 0; padding: 0 16px; border-radius: var(--utn-btn-r); border: 1px solid var(--utn-line); background: var(--utn-surface2); font: 400 14.5px var(--utn-sans); color: var(--utn-ink); box-shadow: none; }
body.utn-ui .utn-briefing input:focus { outline: none; border-color: var(--utn-primary); box-shadow: 0 0 0 3px var(--utn-soft); }
body.utn-ui .utn-briefing .utn-btn { height: 44px; }
.utn-briefing .utn-form__note { flex-basis: 100%; }

/* ---------- Article ---------- */
.utn-article { display: flex; flex-direction: column; gap: 32px; }
.utn-article__grid { align-items: start; }
.utn-article__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.utn-article__head > * { max-width: 900px; }
.utn-crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--utn-mut); }
.utn-crumbs a:last-child { color: var(--utn-primary); font-weight: 500; }
.utn-article__title { margin: 0; font-size: clamp(25px, 1rem + 2.4vw, 46px); line-height: 1.15; font-weight: var(--utn-hw); letter-spacing: -0.025em; text-wrap: balance; }
.utn-article__dek { margin: 0; font-size: clamp(16px, .9rem + .4vw, 19px); line-height: 1.6; color: var(--utn-ink2); max-width: 64ch !important; font-weight: var(--utn-bw); }
.utn-article__sponsor { margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 500; width: fit-content; }
.utn-article__byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; max-width: none !important; padding-top: 14px; border-top: 1px solid var(--utn-line); }
.utn-byline__text { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--utn-mut); }
.utn-byline__name { font-size: 14px; font-weight: 600; color: var(--utn-ink); }
.utn-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; background: var(--utn-primary); }
.utn-avatar--lg { width: 54px; height: 54px; font-size: 17px; }
.utn-avatar--xl { width: 88px; height: 88px; font-size: 28px; }
.utn-share { display: flex; gap: 6px; margin-left: auto; }
body.utn-ui .utn-share__btn { width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--utn-line); background: var(--utn-surface); color: var(--utn-ink); cursor: pointer; box-shadow: none; transition: background .2s, color .2s; min-height: 0; }
body.utn-ui .utn-share__btn:hover { background: var(--utn-ink); color: var(--utn-bg); }
body.utn-ui .utn-share__btn.is-done { background: var(--utn-primary); color: #fff; }
.utn-share__btn svg { width: 16px; height: 16px; }
.utn-article__figure { margin: 0 0 26px; display: flex; flex-direction: column; gap: 8px; }
.utn-article__media { border-radius: var(--utn-r); overflow: hidden; background: var(--utn-hair); }
.utn-s-minimal .utn-article__media { border-radius: var(--utn-ri); }
.utn-article__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.utn-article__media--video { margin-bottom: 26px; }
.utn-article__media--video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.utn-article__figure figcaption { font-size: 12.5px; color: var(--utn-mut); }
@media (max-width: 700px) { .utn-share { margin-left: 0; width: 100%; } .utn-article__media img { aspect-ratio: 3 / 2; } }

.utn-prose { font-family: var(--utn-prose-font); font-size: 17px; line-height: 1.8; color: var(--utn-ink); max-width: 760px; font-weight: var(--utn-bw); }
@media (min-width: 900px) { .utn-prose { font-size: 18px; } }
.utn-prose-serif .utn-prose { font-size: 19px; line-height: 1.7; }
.utn-prose p { margin: 0 0 1.15em; }
.utn-prose h2, .utn-prose h3 { font-family: var(--utn-sans); font-weight: var(--utn-hw); letter-spacing: -0.015em; line-height: 1.3; margin: 1.6em 0 .5em; }
.utn-prose h2 { font-size: 1.35em; }
.utn-prose h3 { font-size: 1.15em; }
.utn-prose strong { font-weight: 600; }
.utn-prose a { color: var(--utn-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.utn-prose blockquote { margin: 1.6em 0; padding: 20px 24px; font-size: 1.12em; line-height: 1.55; font-style: italic; border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); border-left: 4px solid var(--utn-primary); }
.utn-s-minimal .utn-prose blockquote { background: none; border: 0; border-left: 3px solid var(--utn-ink); border-radius: 0; }
.utn-prose blockquote p:last-child { margin: 0; }
.utn-prose blockquote cite, .utn-prose blockquote footer { display: block; margin-top: 10px; font: normal 13px var(--utn-sans); color: var(--utn-mut); }
.utn-prose ul, .utn-prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.utn-prose li { margin-bottom: .4em; }
.utn-prose img { border-radius: var(--utn-ri); }
.utn-prose figure { margin: 1.4em 0; }
.utn-prose figcaption { font: 12.5px var(--utn-sans); color: var(--utn-mut); margin-top: 6px; }

.utn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.utn-tags a { padding: 6px 14px; border-radius: var(--utn-btn-r); font-size: 13px; font-weight: 500; }
.utn-s-minimal .utn-tags a { border: 1px solid var(--utn-line); }
.utn-tags a:hover { color: var(--utn-primary); }
.utn-authorbox { display: flex; gap: 16px; align-items: flex-start; margin-top: 26px; padding: 20px; }
.utn-authorbox p { margin: 0 0 6px; color: var(--utn-ink2); font-size: 14px; line-height: 1.6; }
.utn-authorbox__name { font-size: 15.5px !important; font-weight: 600; color: var(--utn-ink) !important; }
.utn-authorbox__name span { font-weight: 400; color: var(--utn-mut); font-size: 13px; margin-left: 6px; }
.utn-facts { padding: 22px 24px; }
.utn-facts dl { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.utn-facts dl div { padding: 12px; border-radius: var(--utn-rs); background: var(--utn-surface2); border: 1px solid var(--utn-line); }
.utn-facts dt { font-size: 12px; color: var(--utn-mut); }
.utn-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

/* ---------- Page header & lists ---------- */
.utn-pagehead { padding-top: 6px; }
.utn-pagehead__eyebrow { margin: 0 0 6px; font-weight: 500; font-size: 13px; }
.utn-pagehead__eyebrow a { color: var(--utn-primary); }
.utn-pagehead__title { margin: 0; font-size: clamp(26px, 1rem + 2.6vw, 48px); line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--utn-hw); }
.utn-pagehead__dek { font-size: 15.5px; color: var(--utn-ink2); max-width: 62ch; margin: 10px 0 0; }
.utn-pagehead__count { color: var(--utn-mut); margin: 8px 0 0; font-size: 14px; }
.utn-page-content { display: flex; flex-direction: column; gap: 28px; }

.utn-seg { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 4px; width: fit-content; max-width: 100%; margin-bottom: 16px; border-radius: calc(var(--utn-btn-r) + 4px); scrollbar-width: none; }
.utn-seg a { height: 34px; padding: 0 14px; border-radius: var(--utn-btn-r); display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: var(--utn-ink2); white-space: nowrap; }
.utn-seg a:hover { color: var(--utn-ink); }
.utn-seg a.is-on { background: var(--utn-ink); color: var(--utn-bg); }

.utn-rows { padding: 4px 24px; display: flex; flex-direction: column; }
.utn-card--row { display: grid; grid-template-columns: minmax(110px, 240px) 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--utn-line); border-radius: 0; background: none; border-top: 0; border-left: 0; border-right: 0; outline: 0; overflow: visible; }
.utn-card--row:last-child { border-bottom: 0; }
.utn-card--row .utn-card__body { padding: 0; justify-content: center; }
.utn-card--row .utn-fig { border-radius: var(--utn-rs); }
.utn-card--row.utn-card--native { padding: 18px 0; }
@media (max-width: 600px) { .utn-card--row { grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 0; } .utn-card--row .utn-card__dek { display: none; } .utn-card--row .utn-card__title { font-size: 15px; } .utn-card--row .utn-fig { aspect-ratio: 1; } .utn-rows { padding: 2px 14px; } }

.utn-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 22px; }
.utn-pager a, .utn-pager span { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding-inline: 12px; border-radius: var(--utn-btn-r); font-weight: 500; font-size: 14px; }
.utn-pager a { background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-pager a:hover { color: var(--utn-primary); }
.utn-pager .is-current { background: var(--utn-ink); color: var(--utn-bg); }

.utn-empty { text-align: center; padding: 56px 20px; border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-empty h2 { margin: 0 0 8px; font-size: 21px; font-weight: var(--utn-hw); }
.utn-empty p { color: var(--utn-mut); margin: 0 0 18px; }
.utn-empty .utn-btn { display: inline-flex; }

/* Category index: picture on top, details below. */
.utn-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--utn-gap); }
.utn-topic { display: flex; flex-direction: column; overflow: hidden; color: var(--utn-ink) !important; }
.utn-topic__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--utn-primary) 25%, #fff), var(--utn-primary)); }
.utn-s-glass .utn-topic { padding: 8px; } .utn-s-glass .utn-topic__img, .utn-s-minimal .utn-topic__img { border-radius: var(--utn-ri); }
.utn-topic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.utn-topic:hover img { transform: scale(1.04); }
.utn-topic__body { padding: 14px 16px 16px; display: grid; gap: 2px; }
.utn-s-minimal .utn-topic__body { padding: 12px 0 0; }
.utn-topic strong { font-size: 17px; font-weight: var(--utn-hw); }
.utn-topic em { font-style: normal; color: var(--utn-primary); font-weight: 500; font-size: 13px; }
.utn-topic__latest { font-size: 13.5px; color: var(--utn-ink2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.utn-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.utn-cloud a { font-weight: 500; font-size: calc(14px * var(--w, 1)); padding: 7px 14px; border-radius: var(--utn-btn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-cloud a:hover { color: var(--utn-primary); }
.utn-cloud small { color: var(--utn-mut); font-size: 11.5px; font-weight: 400; }

.utn-archive { display: grid; gap: 32px; }
.utn-archive__year h2 { font-size: 30px; font-weight: var(--utn-hw); letter-spacing: -0.02em; margin: 0 0 12px; }
.utn-archive__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.utn-archive__months a, .utn-archive__months > span { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--utn-rs); background: var(--utn-surface); border: 1px solid var(--utn-line); font-size: 14px; }
.utn-archive__months a:hover { color: var(--utn-primary); }
.utn-archive__months a span { color: var(--utn-primary); font-size: 12.5px; font-weight: 500; }
.utn-archive__months .is-empty { opacity: .45; }
.utn-archive__month { font-size: 24px; margin: 0 0 12px; font-weight: var(--utn-hw); }
.utn-back a { color: var(--utn-primary); font-weight: 500; }

.utn-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--utn-gap); }
.utn-teamcard { display: grid; justify-items: start; gap: 2px; padding: 20px; border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-teamcard:hover strong { color: var(--utn-primary); }
.utn-teamcard .utn-avatar { margin-bottom: 10px; }
.utn-teamcard strong { font-size: 16px; font-weight: var(--utn-hw); }
.utn-teamcard span:not(.utn-avatar) { color: var(--utn-mut); font-size: 13px; }
.utn-teamcard em { font-style: normal; color: var(--utn-primary); font-weight: 500; font-size: 13px; margin-top: 6px; }
.utn-profile { display: flex; gap: 20px; align-items: center; padding: 20px; margin-bottom: var(--utn-gap); border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-profile__name { margin: 0; font-size: 26px; font-weight: var(--utn-hw); letter-spacing: -0.02em; }
.utn-profile__role { margin: 2px 0 0; color: var(--utn-mut); font-size: 14px; }
.utn-profile__bio { font-size: 14.5px; max-width: 62ch; margin: 8px 0 0; color: var(--utn-ink2); }
.utn-s-glass :is(.utn-teamcard, .utn-profile, .utn-empty, .utn-pager a, .utn-cloud a, .utn-archive__months a, .utn-archive__months > span) { background: var(--utn-gl); border-color: var(--utn-gline); -webkit-backdrop-filter: blur(var(--utn-blur)); backdrop-filter: blur(var(--utn-blur)); }

.utn-search { display: flex; gap: 6px; padding: 5px; border-radius: calc(var(--utn-btn-r) + 4px); background: var(--utn-surface); border: 1px solid var(--utn-line); }
body.utn-ui .utn-search input { flex: 1; min-width: 0; height: 42px; margin: 0; border: 0; background: transparent; font: 400 15px var(--utn-sans); padding: 0 12px; color: var(--utn-ink); outline: none; box-shadow: none; }
body.utn-ui .utn-search--big input { font-size: 17px; height: 48px; }
body.utn-ui .utn-search--big .utn-btn { height: 48px; padding: 0 22px; }
.utn-search:focus-within { border-color: var(--utn-primary); }
.utn-searchpage { max-width: 900px; display: flex; flex-direction: column; gap: 18px; }
.utn-searchpage__count { color: var(--utn-mut); font-weight: 500; margin: 0; }
.utn-suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.utn-suggest span { color: var(--utn-mut); font-weight: 500; margin-right: 4px; font-size: 14px; }
.utn-suggest a { padding: 5px 12px; border-radius: var(--utn-btn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); font-weight: 500; font-size: 13px; }

/* ---------- Advertise ---------- */
.utn-adv { display: flex; flex-direction: column; gap: 40px; }
.utn-adv__intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.utn-adv__lede { font-size: clamp(18px, 1rem + 1vw, 26px); line-height: 1.45; letter-spacing: -0.01em; margin: 0; font-weight: var(--utn-bw); }
@media (max-width: 860px) { .utn-adv__intro { grid-template-columns: 1fr; } }
.utn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
.utn-stats div { padding: 16px; border-radius: var(--utn-rs); }
.utn-stats dt { color: var(--utn-mut); font-size: 12.5px; }
.utn-stats dd { margin: 2px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--utn-primary); }
.utn-placements { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.utn-placement { padding: 16px; display: grid; gap: 4px; border-radius: var(--utn-r); }
.utn-placement__frame { height: 104px; display: grid; place-items: center; border-radius: var(--utn-ri); background: var(--utn-hair); margin-bottom: 10px; padding: 12px; }
.utn-placement__frame > span { display: block; max-height: 80px; max-width: 100%; min-width: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--utn-primary) 35%, #fff), var(--utn-primary)); border-radius: 4px; }
.utn-placement__logos { display: flex !important; gap: 6px; background: none !important; }
.utn-placement__logos i { width: 34px; height: 22px; border-radius: 4px; background: var(--utn-primary); opacity: .6; }
.utn-placement__native { display: grid !important; gap: 5px; width: 60%; background: none !important; }
.utn-placement__native i { height: 40px; border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--utn-primary) 35%, #fff), var(--utn-primary)); }
.utn-placement__native b { height: 6px; border-radius: 3px; background: var(--utn-mut); opacity: .5; }
.utn-placement strong { font-size: 15px; font-weight: var(--utn-hw); }
.utn-placement span { color: var(--utn-primary); font-size: 13px; font-weight: 500; }
.utn-placement small { color: var(--utn-mut); font-size: 12.5px; }
.utn-adv__form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; padding: clamp(20px, 4vw, 40px); }
.utn-adv__form h2 { font-size: 26px; font-weight: var(--utn-hw); letter-spacing: -0.02em; margin: 0 0 10px; }
.utn-adv__form p { color: var(--utn-ink2); font-size: 15px; }
@media (max-width: 860px) { .utn-adv__form { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Forms ---------- */
.utn-form { display: grid; gap: 16px; }
.utn-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.utn-form__full { grid-column: 1 / -1; }
@media (max-width: 600px) { .utn-form__grid { grid-template-columns: 1fr; } }
.utn-form label { display: grid; gap: 6px; font-weight: 500; font-size: 13px; color: var(--utn-ink2); }
body.utn-ui .utn-form input, body.utn-ui .utn-form select, body.utn-ui .utn-form textarea { font: 400 15px var(--utn-sans); margin: 0; padding: 11px 14px; border-radius: var(--utn-btn-r); border: 1px solid var(--utn-line); background: var(--utn-surface2); color: var(--utn-ink); width: 100%; box-shadow: none; height: auto; }
body.utn-ui .utn-form input:focus, body.utn-ui .utn-form select:focus, body.utn-ui .utn-form textarea:focus { outline: none; border-color: var(--utn-primary); box-shadow: 0 0 0 3px var(--utn-soft); }
body.utn-ui .utn-form .utn-btn { justify-self: start; height: 46px; padding: 0 24px; }
.utn-form__note { margin: 0; padding: 10px 14px; border-radius: var(--utn-rs); font-weight: 500; font-size: 13.5px; }
.utn-form__note.is-ok { background: var(--utn-soft); color: var(--utn-primary); }
.utn-form__note.is-err { background: color-mix(in srgb, var(--utn-accent) 15%, transparent); color: var(--utn-accent); }
.utn-hp { position: absolute; left: -9999px; }

/* ---------- Partners, contact, 404 ---------- */
.utn-partners { display: flex; flex-direction: column; gap: 36px; }
.utn-tier__name { font-size: 19px; font-weight: var(--utn-hw); margin: 0 0 12px; }
.utn-tier__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--utn-gap); }
.utn-tier--platinum .utn-tier__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.utn-partner { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-partner__logo { height: 80px; display: grid; place-items: center; border-radius: var(--utn-ri); background: #fff; border: 1px solid var(--utn-line); margin-bottom: 8px; padding: 12px; }
.utn-partner__logo img { max-height: 56px; width: auto; }
.utn-partner__logo span { font-weight: 700; font-size: 19px; color: #13202A; }
.utn-partner h3 { margin: 0; font-size: 16px; font-weight: var(--utn-hw); }
.utn-partner p { margin: 0; color: var(--utn-ink2); font-size: 13.5px; }
.utn-partner a { color: var(--utn-primary) !important; font-weight: 500; font-size: 13px; }

.utn-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.utn-contact__lede { font-size: 18px; line-height: 1.55; margin: 0 0 20px; }
.utn-contact dl { margin: 0; display: grid; gap: 10px; }
.utn-contact dl div { padding: 14px 16px; border-radius: var(--utn-rs); background: var(--utn-surface); border: 1px solid var(--utn-line); }
.utn-contact dt { color: var(--utn-mut); font-size: 12.5px; }
.utn-contact dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.utn-contact dd a { color: var(--utn-primary) !important; }
.utn-contact .utn-form { padding: clamp(18px, 3vw, 30px); border-radius: var(--utn-r); background: var(--utn-surface); border: 1px solid var(--utn-line); }
@media (max-width: 860px) { .utn-contact { grid-template-columns: 1fr; gap: 22px; } }
.utn-s-glass :is(.utn-partner, .utn-contact dl div, .utn-contact .utn-form) { background: var(--utn-gl); border-color: var(--utn-gline); -webkit-backdrop-filter: blur(var(--utn-blur)); backdrop-filter: blur(var(--utn-blur)); }

.utn-404 { text-align: center; padding-block: 32px 8px; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.utn-404__code { margin: 0; font-size: clamp(96px, 18vw, 190px); font-weight: 700; line-height: .9; letter-spacing: -0.05em; color: var(--utn-primary); }
.utn-404 h1 { font-size: clamp(22px, 1rem + 1.6vw, 32px); font-weight: var(--utn-hw); margin: 8px 0 0; }
.utn-404 > p:not(.utn-404__code) { color: var(--utn-mut); font-size: 16px; margin: 0 0 12px; }
.utn-404 .utn-search { width: 100%; }

/* ---------- Footer ---------- */
.utn-bottom { display: flex; flex-direction: column; gap: var(--utn-gap); padding-bottom: 24px; }
.utn-foot { padding: 30px 30px 20px; display: flex; flex-direction: column; gap: 24px; }
.utn-foot__grid { display: flex; flex-wrap: wrap; gap: 28px; }
.utn-foot__brand { flex: 2 1 260px; }
.utn-foot__brand .utn-logo__word { font-size: 22px; color: var(--utn-ink); }
.utn-foot__logo { margin: 0; }
.utn-foot__logo img { height: var(--utn-logo-h); width: auto; max-width: 240px; object-fit: contain; }
.utn-foot__brand p:not(.utn-logo__word):not(.utn-foot__logo) { color: var(--utn-ink2); margin: 10px 0 14px; max-width: 40ch; font-size: 14px; }
.utn-foot nav { flex: 1 1 150px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.utn-foot nav h2 { margin: 0 0 2px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--utn-mut); font-weight: 600; }
.utn-foot nav a:hover { color: var(--utn-primary); }
.utn-foot__social { display: flex; gap: 8px; }
.utn-foot__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--utn-line); display: grid; place-items: center; }
.utn-foot__social a:hover { background: var(--utn-primary); border-color: var(--utn-primary); color: #fff; }
.utn-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--utn-line); font-size: 12.5px; color: var(--utn-mut); }
.utn-credit a { color: var(--utn-primary) !important; font-weight: 500; }
@media (max-width: 600px) { .utn-foot { padding: 22px 18px 16px; } .utn-foot nav { flex-basis: 40%; } }

/* Pages placed in a normal theme (no canvas) still use the plugin font and colours */
body:not(.utn-canvas-body) .utn-home, body:not(.utn-canvas-body) .utn-wrap { font-family: var(--utn-sans); color: var(--utn-ink); }

@media (prefers-reduced-motion: reduce) { .utn-fig img, .utn-tile img, .utn-topic img, .utn-logo-tile, .utn-lead__media img { transition: none; } }
@media print {
	.utn-topad, .utn-navwrap, .utn-ticker, .utn-spot, .utn-share, .utn-split__side, .utn-related, .utn-bottom { display: none !important; }
	.utn-canvas-body { background: #fff !important; }
}

/* ---------- Magazine & custom HTML sections ---------- */
.utn-mag { padding: clamp(18px, 3vw, 28px); display: grid; gap: 24px; }
.utn-mag--embed { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .utn-mag--embed { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; } }
.utn-mag__info { display: flex; gap: 20px; align-items: flex-start; }
.utn-mag--embed .utn-mag__info { flex-direction: column; }
@media (max-width: 999px) { .utn-mag--embed .utn-mag__info { flex-direction: row; } }
.utn-mag__cover { flex: none; width: min(42%, 220px); border-radius: var(--utn-ri); overflow: hidden; border: 1px solid var(--utn-line); background: var(--utn-hair); }
.utn-mag--embed .utn-mag__cover { width: min(42%, 240px); }
.utn-mag__cover img { width: 100%; height: auto; display: block; }
.utn-mag__text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.utn-mag__eyebrow { margin: 0; color: var(--utn-primary); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.utn-mag__issue { margin: 0; font-size: clamp(19px, 1rem + .8vw, 26px); font-weight: var(--utn-hw); line-height: 1.25; letter-spacing: -0.015em; }
.utn-mag__desc { margin: 0; color: var(--utn-ink2); font-size: 14.5px; }
.utn-mag__embed { border-radius: var(--utn-ri); overflow: hidden; background: var(--utn-surface2); border: 1px solid var(--utn-line); }
.utn-mag__embed iframe { display: block; width: 100% !important; height: var(--utn-mag-h, 640px) !important; border: 0; }
@media (max-width: 700px) { .utn-mag__embed iframe { height: min(var(--utn-mag-h, 640px), 75vh) !important; } }
.utn-custom__body { min-width: 0; overflow-x: auto; }
.utn-custom__body.utn-glass { padding: clamp(18px, 3vw, 28px); }
.utn-custom__body iframe { max-width: 100%; }
.utn-custom__body img { max-width: 100%; height: auto; }

/* ---------- App bar (phones and the installed app) ---------- */
.utn-appbar { display: none; }
@media (max-width: 760px) {
	.utn-canvas-body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
	.utn-appbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--utn-surface) 92%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border-top: 1px solid var(--utn-line); }
	body.utn-ui .utn-appbar a, body.utn-ui .utn-appbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent; color: var(--utn-mut); font: 500 11px/1 var(--utn-sans); letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
	.utn-appbar svg { width: 22px; height: 22px; }
	body.utn-ui .utn-appbar [aria-current] { color: var(--utn-primary); }
	body.utn-ui .utn-appbar [aria-current] svg { transform: translateY(-1px); }
	.utn-nav__list { max-height: calc(100vh - 190px); }
}
/* Installed app: feels like an app, not a web page. */
.utn-app .utn-canvas-body { -webkit-user-select: none; user-select: none; overscroll-behavior-y: none; }
.utn-app .utn-prose, .utn-app .utn-article__title, .utn-app input, .utn-app textarea { -webkit-user-select: text; user-select: text; }
.utn-app .utn-navwrap { padding-top: env(safe-area-inset-top); }
.utn-app .utn-topad { display: none; }
@media (max-width: 760px) { .utn-app .utn-foot nav, .utn-app .utn-foot__social { display: none; } }
.utn-nav__ios { margin: 0; font-size: 12.5px; color: var(--utn-mut); }