/* =====================================================================
   Utga.mn redesign 2026 — bold, high-contrast editorial.
   Display/UI: Onest (700–800), reading text: PT Serif. Brand red #c23b1f.
   Loaded last. Home, article and category pages drop the old theme CSS
   (html.cn-rd); the other pages keep it and get this header/footer.
   ===================================================================== */

:root {
  --cn-brand: #c23b1f;          /* white text on it: 5.3:1 */
  --cn-brand-dk: #a3311a;
  --cn-brand-ink: #b3361c;      /* red text on white: 6.0:1 */
  --cn-ink: #111214;
  --cn-ink-2: #2a2c30;
  --cn-muted: #5b5e64;          /* 6.4:1 on white */
  --cn-line: #e6e2dc;
  --cn-line-strong: #111214;
  --cn-bg: #ffffff;
  --cn-paper: #f6f3ee;          /* warm surface tint */
  --cn-card: #ffffff;
  --cn-band: #111214;
  --cn-band-ink: #f4f1ec;
  --cn-band-muted: #a9acb2;
  --cn-r: 4px;
  --cn-r-lg: 10px;
  --cn-shadow: 0 1px 2px rgba(17,18,20,.06), 0 8px 24px rgba(17,18,20,.06);
  --cn-wrap: 1240px;
  --cn-gutter: 24px;
  --cn-gap: 32px;
  --cn-f-display: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cn-f-text: 'PT Serif', Georgia, 'Times New Roman', serif;
  --cn-ease: cubic-bezier(.2,.7,.2,1);

  /* hand the tokens to the shared newsplus widgets */
  --np-accent: var(--cn-brand);
  --np-text: var(--cn-ink);
  --np-muted: var(--cn-muted);
  --np-border: var(--cn-line);
  --np-surface: var(--cn-bg);
  --np-soft: var(--cn-paper);
  --np-radius: var(--cn-r-lg);
  --np-font: var(--cn-f-display);
  --np-read-font: var(--cn-f-text);
  --np-read-size: 19px;
  --np-read-size-sm: 18px;
  --np-read-line: 1.7;
  --np-read-color: var(--cn-ink-2);
  --np-read-measure: 100%;
}

/* ---------- Designed dark mode (redesigned pages only) ---------- */
html.cn-rd[data-theme=dark] {
  --cn-brand: #c23b1f;
  --cn-brand-dk: #d9472a;
  --cn-brand-ink: #ff8a6b;      /* 7.6:1 on #121315 */
  --cn-ink: #f2efe9;
  --cn-ink-2: #dcd8d1;
  --cn-muted: #a3a6ad;
  --cn-line: #2b2e33;
  --cn-line-strong: #f2efe9;
  --cn-bg: #121315;
  --cn-paper: #1a1c1f;
  --cn-card: #1a1c1f;
  --cn-band: #08090a;
  --cn-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --np-read-color: var(--cn-ink-2);
  color-scheme: dark;
  filter: none !important;
  background: var(--cn-bg);
}
html.cn-rd[data-theme=dark] img,
html.cn-rd[data-theme=dark] picture,
html.cn-rd[data-theme=dark] video,
html.cn-rd[data-theme=dark] iframe,
html.cn-rd[data-theme=dark] embed,
html.cn-rd[data-theme=dark] object,
html.cn-rd[data-theme=dark] svg image,
html.cn-rd[data-theme=dark] [style*="background-image"],
html.cn-rd[data-theme=dark] .np-keep-colors { filter: none !important; }
/* the white logo variant in dark mode */
.cn-logo__dark { display: none; }
html.cn-rd[data-theme=dark] .cn-logo__light { display: none; }
html.cn-rd[data-theme=dark] .cn-logo__dark { display: block; }
html.cn-rd[data-theme=dark] .np-sticky__logo img { filter: invert(1) hue-rotate(180deg) !important; }
/* old-theme pages keep the inverted dark mode: let the inversion turn the logo letters light */
html[data-theme=dark]:not(.cn-rd) .cn-logo__light,
html[data-theme=dark]:not(.cn-rd) .cn-footer__logo img { filter: none; }
html[data-theme=dark]:not(.cn-rd) .cn-footer,
html[data-theme=dark]:not(.cn-rd) .cn-util { filter: invert(1) hue-rotate(180deg); }
html[data-theme=dark]:not(.cn-rd) .cn-footer img,
html[data-theme=dark]:not(.cn-rd) .cn-util img { filter: none; }

/* ---------- Base (redesigned pages) ---------- */
html.cn-rd { -webkit-text-size-adjust: 100%; background: var(--cn-bg); }
html.cn-rd *, html.cn-rd *::before, html.cn-rd *::after { box-sizing: border-box; }
html.cn-rd body { margin: 0; background: var(--cn-bg); color: var(--cn-ink); font: 400 16px/1.55 var(--cn-f-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(html.cn-rd) img { max-width: 100%; height: auto; border: 0; }
:where(html.cn-rd) a { color: inherit; text-decoration: none; }
:where(html.cn-rd) :is(h1, h2, h3, h4) { margin: 0; font-family: var(--cn-f-display); color: var(--cn-ink); }
:where(html.cn-rd) p { margin: 0; }
:where(html.cn-rd) :is(button, input, textarea) { font: inherit; color: inherit; }
html.cn-locked { overflow: hidden; }
.cn-body :focus-visible { outline: 3px solid var(--cn-brand); outline-offset: 2px; border-radius: 2px; }
.cn-skip { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: var(--cn-ink); color: #fff !important; padding: 10px 16px; font: 600 15px var(--cn-f-display); }
.cn-skip:focus { left: 8px; }
.cn-wrap { width: 100%; max-width: var(--cn-wrap); margin: 0 auto; padding: 0 var(--cn-gutter); }

/* ---------- Header (all pages; written to survive the old theme CSS) ---------- */
.cn-header { font-family: var(--cn-f-display); background: var(--cn-bg); position: relative; z-index: 50; }
.cn-header ul { list-style: none; margin: 0; padding: 0; }
.cn-header a { text-decoration: none; }
.cn-util { background: var(--cn-ink); color: #d9dbdf; font-size: 13px; line-height: 1; }
html.cn-rd[data-theme=dark] .cn-util { background: #08090a; border-bottom: 1px solid var(--cn-line); }
.cn-util__in { display: flex; align-items: center; gap: 22px; min-height: 38px; }
.cn-util__date { color: #fff; font-weight: 600; white-space: nowrap; }
.cn-util__wx { display: flex; align-items: center; min-height: 38px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.16); cursor: pointer; }
.cn-wx { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #d9dbdf; }
.cn-wx[hidden] { display: none; }
.cn-wx b { color: #fff; font-weight: 600; }
.cn-wx img { width: 18px; height: 18px; }
.cn-util__rates { display: flex; gap: 18px; margin-left: auto !important; white-space: nowrap; }
.cn-util__rates li { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-util__rates span { color: #9a9ea6; font-weight: 500; margin-right: 4px; font-size: 12px; letter-spacing: .04em; }

.cn-masthead { background: var(--cn-bg); }
.cn-masthead__in { display: flex; align-items: center; gap: 18px; min-height: 84px; }
.cn-logo { display: block; flex: 0 0 auto; line-height: 0; }
.cn-logo img { height: 46px; width: auto; }
.cn-logo .cn-logo__light { display: block; }
.cn-logo--sm img { height: 36px; }
.cn-masthead__tag { font-size: 13px; font-weight: 600; color: var(--cn-muted); letter-spacing: .02em; padding-left: 18px; border-left: 2px solid var(--cn-brand); line-height: 1.2; }
.cn-masthead__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cn-iconbtn, .cn-header .np-theme-toggle.cn-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--cn-line); background: transparent; color: var(--cn-ink); cursor: pointer; padding: 0; margin: 0; transition: background .18s, border-color .18s, color .18s; }
.cn-iconbtn:hover { background: var(--cn-ink); border-color: var(--cn-ink); color: var(--cn-bg); }
.cn-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cn-iconbtn .np-icon-moon { fill: currentColor; stroke: none; }
.cn-menu-btn { display: none; }

.cn-nav { background: var(--cn-bg); border-top: 1px solid var(--cn-line); border-bottom: 3px solid var(--cn-line-strong); }
.cn-nav__list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cn-nav__list::-webkit-scrollbar { display: none; }
.cn-nav__item { position: relative; flex: 0 0 auto; }
.cn-nav__item > a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--cn-ink) !important; letter-spacing: -.005em; position: relative; white-space: nowrap; transition: color .18s; }
.cn-nav__item:first-child > a { padding-left: 0; }
.cn-nav__item > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 4px; background: var(--cn-brand); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--cn-ease); }
.cn-nav__item:first-child > a::after { left: 0; }
.cn-nav__item > a:hover { color: var(--cn-brand-ink) !important; }
.cn-nav__item > a:hover::after, .cn-nav__item.is-active > a::after { transform: scaleX(1); }
.cn-nav__item.is-active > a { color: var(--cn-brand-ink) !important; }
.cn-nav__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--cn-bg); border: 1px solid var(--cn-line); border-top: 3px solid var(--cn-brand); box-shadow: var(--cn-shadow); padding: 6px 0 !important; z-index: 60; }
.cn-nav__item.has-sub:hover .cn-nav__sub, .cn-nav__item.has-sub:focus-within .cn-nav__sub { display: block; }
.cn-nav__sub a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--cn-ink) !important; }
.cn-nav__sub a:hover { background: var(--cn-paper); color: var(--cn-brand-ink) !important; }
/* the nav scrolls sideways, so dropdowns can't escape it: show them only where the list fits */
@media (max-width: 1100px) { .cn-nav__sub { display: none !important; } }

/* Drawer + search overlay */
.cn-drawer, .cn-search { position: fixed; inset: 0; z-index: 10001; background: rgba(10,10,12,.55); opacity: 0; transition: opacity .2s; font-family: var(--cn-f-display); }
.cn-drawer.is-open, .cn-search.is-open { opacity: 1; }
.cn-drawer[hidden], .cn-search[hidden] { display: none; }
.cn-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(380px, 88vw); background: var(--cn-bg); color: var(--cn-ink); overflow-y: auto; transform: translateX(-100%); transition: transform .22s var(--cn-ease); padding: 0 0 32px; }
.cn-drawer.is-open .cn-drawer__panel { transform: none; }
.cn-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 3px solid var(--cn-line-strong); }
.cn-drawer__search { display: flex; margin: 16px; border: 2px solid var(--cn-ink); border-radius: 999px; overflow: hidden; }
.cn-drawer__search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; height: 46px; font-size: 16px; outline: none; color: var(--cn-ink); }
.cn-drawer__search button { width: 52px; border: 0; background: var(--cn-ink); color: var(--cn-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cn-drawer__search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cn-drawer__nav { list-style: none; margin: 0; padding: 0 16px; }
.cn-drawer__nav > li { border-bottom: 1px solid var(--cn-line); }
.cn-drawer__nav a, .cn-drawer__nav summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; font-size: 19px; font-weight: 700; color: var(--cn-ink) !important; cursor: pointer; list-style: none; }
.cn-drawer__nav summary::-webkit-details-marker { display: none; }
.cn-drawer__nav summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.cn-drawer__nav details[open] summary svg { transform: rotate(180deg); }
.cn-drawer__nav details ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; border-left: 3px solid var(--cn-brand); }
.cn-drawer__nav details a { font-size: 16px; font-weight: 600; min-height: 44px; }
.cn-drawer__nav a[aria-current] { color: var(--cn-brand-ink) !important; }

.cn-search { display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 0; background: rgba(10,10,12,.82); }
.cn-search[hidden] { display: none; }
.cn-search__box { width: 100%; max-width: 760px; position: relative; transform: translateY(-12px); transition: transform .2s var(--cn-ease); }
.cn-search.is-open .cn-search__box { transform: none; }
.cn-search__form { display: flex; gap: 10px; border-bottom: 3px solid #fff; padding-bottom: 10px; }
.cn-search__form input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: 700 clamp(22px, 4vw, 36px)/1.2 var(--cn-f-display); outline: none; padding: 8px 0; }
.cn-search__form input::placeholder { color: rgba(255,255,255,.55); }
.cn-search__close { position: absolute; top: -62px; right: 0; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }

/* ---------- Shared bits ---------- */
.cn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cn-brand); color: #fff !important; font: 700 15px var(--cn-f-display); cursor: pointer; transition: background .18s; }
.cn-btn:hover { background: var(--cn-brand-dk); }
.cn-chip { display: inline-block; background: var(--cn-brand); color: #fff !important; font: 700 12px/1 var(--cn-f-display); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px 6px; border-radius: 2px; }
.cn-kicker { display: block; color: var(--cn-brand-ink); font: 700 12px/1.2 var(--cn-f-display); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.cn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--cn-muted); font: 500 13px/1.3 var(--cn-f-display); margin-top: 10px; }
.cn-meta__n { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-variant-numeric: tabular-nums; }
.cn-meta__n svg { width: 15px; height: 15px; }
.cn-meta--light { color: rgba(255,255,255,.82); }
.cn-meta a { color: inherit; }

.cn-railhead { display: flex; align-items: center; gap: 10px; font: 800 14px/1 var(--cn-f-display) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink); padding: 0 0 14px; border-bottom: 3px solid var(--cn-line-strong); margin: 0 0 4px !important; }
.cn-railhead::before { content: ''; width: 12px; height: 12px; background: var(--cn-brand); flex: 0 0 auto; }

.cn-sechead { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--cn-line-strong); padding-top: 14px; margin-bottom: 20px; }
.cn-sechead::before { content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 5px; background: var(--cn-brand); }
.cn-sechead__t { font: 800 22px/1.15 var(--cn-f-display) !important; letter-spacing: -.02em; }
.cn-sechead__t a:hover { color: var(--cn-brand-ink); }
.cn-sechead--big .cn-sechead__t { font-size: clamp(26px, 2.6vw, 34px) !important; }
.cn-sechead__more { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--cn-f-display); color: var(--cn-ink); letter-spacing: .02em; min-height: 32px; white-space: nowrap; }
.cn-sechead__more svg { width: 16px; height: 16px; transition: transform .18s; }
.cn-sechead__more:hover { color: var(--cn-brand-ink); }
.cn-sechead__more:hover svg { transform: translateX(3px); }

.cn-adslot { margin: 0 0 28px; text-align: center; }
.cn-adslot .np-banners { margin: 0 auto; }
.cn-adslot img { display: block; width: 100%; height: auto; border-radius: var(--cn-r); }
.cn-adslot--wide { margin-top: 36px; margin-bottom: 0; }
.cn-adslot--wide .np-banners { max-width: 970px; }
.cn-adslot__label { display: block; font: 600 11px var(--cn-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cn-muted); margin-bottom: 6px; }

/* ---------- Cards ---------- */
.cn-card { position: relative; min-width: 0; }
.cn-card__media { display: block; position: relative; overflow: hidden; background: var(--cn-paper); border-radius: var(--cn-r); aspect-ratio: 16 / 9; }
.cn-card__media img, .cn-card__ph { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--cn-ease); }
.cn-card:hover .cn-card__media img { transform: scale(1.03); }
.cn-card__title { font: 700 19px/1.22 var(--cn-f-display) !important; letter-spacing: -.012em; color: var(--cn-ink); overflow-wrap: anywhere; }
.cn-card__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s var(--cn-ease), color .18s; }
.cn-card:hover .cn-card__title a, .cn-card__title a:focus-visible { color: var(--cn-brand-ink); background-size: 100% 2px; }
.cn-card__body { padding-top: 14px; }
.cn-card__dek { font: 400 16px/1.55 var(--cn-f-text); color: var(--cn-muted); margin-top: 8px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn-play { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--cn-brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.cn-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }

/* horizontal (stream) */
.cn-card--h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--cn-line); }
.cn-card--h:first-of-type { padding-top: 4px; }
.cn-card--h .cn-card__media { aspect-ratio: 3 / 2; }
.cn-card--h .cn-card__body { padding-top: 0; }
.cn-card--h .cn-card__title { font-size: clamp(19px, 1.7vw, 23px) !important; line-height: 1.2; }

/* row (small thumb on the right) */
.cn-card--row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cn-line); }
.cn-card--row .cn-card__media { order: 2; aspect-ratio: 3 / 2; }
.cn-card--row .cn-card__body { padding-top: 0; }
.cn-card--row .cn-card__title { font-size: 16px !important; line-height: 1.3; font-weight: 600 !important; }
.cn-card--row .cn-meta { margin-top: 6px; font-size: 12px; }
.cn-card--sec { padding-bottom: 16px; }
.cn-card--sec .cn-card__title { font-size: 20px !important; }

/* ---------- Home: top ---------- */
.cn-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--cn-gap); margin-top: 32px; }
.cn-lead { position: relative; border-radius: var(--cn-r); overflow: hidden; background: var(--cn-band); min-height: 100%; isolation: isolate; }
.cn-lead__media { display: block; position: absolute; inset: 0; }
.cn-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--cn-ease); }
.cn-lead:hover .cn-lead__media img { transform: scale(1.03); }
.cn-lead__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 30%, rgba(8,8,10,.15) 62%, rgba(8,8,10,0) 80%); }
.cn-lead__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: clamp(460px, 44vw, 600px); padding: clamp(22px, 3vw, 40px); pointer-events: none; }
.cn-lead__body a, .cn-lead__body .cn-chip { pointer-events: auto; }
.cn-lead__title { font: 800 clamp(28px, 3.5vw, 50px)/1.07 var(--cn-f-display) !important; letter-spacing: -.028em; color: #fff !important; margin-top: 14px !important; max-width: 22ch; text-wrap: balance; overflow-wrap: anywhere; }
.cn-lead__title a { color: #fff !important; }
.cn-lead__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--cn-brand); }
.cn-lead__dek { color: rgba(255,255,255,.86); font: 400 18px/1.5 var(--cn-f-text); margin-top: 14px !important; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cn-top__rail { min-width: 0; }
.cn-toplist { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.cn-toplist__item { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cn-line); align-items: start; }
.cn-toplist__item:last-child { border-bottom: 0; }
.cn-toplist__img { order: 2; display: block; aspect-ratio: 3 / 2; border-radius: var(--cn-r); overflow: hidden; background: var(--cn-paper); }
.cn-toplist__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s var(--cn-ease); }
.cn-toplist__item:hover .cn-toplist__img img { transform: scale(1.03); }
.cn-toplist__t { font: 700 17px/1.25 var(--cn-f-display) !important; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cn-toplist__t a:hover { color: var(--cn-brand-ink); }
.cn-toplist__time { display: block; color: var(--cn-muted); font: 500 12px var(--cn-f-display); margin-top: 6px; }

/* ---------- Home: stream + most read ---------- */
.cn-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; margin-top: 56px; }
.cn-aside { min-width: 0; }
.cn-aside__sticky { position: sticky; top: 72px; }
.cn-numlist { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.cn-numlist li { counter-increment: pop; border-bottom: 1px solid var(--cn-line); }
.cn-numlist a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; padding: 16px 0; color: var(--cn-ink); }
.cn-numlist a::before { content: counter(pop); grid-row: span 2; font: 800 36px/0.9 var(--cn-f-display); color: var(--cn-brand); letter-spacing: -.04em; }
.cn-numlist__t { font: 700 15.5px/1.3 var(--cn-f-display); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .18s; }
.cn-numlist a:hover .cn-numlist__t { color: var(--cn-brand-ink); }
.cn-numlist__m { display: inline-flex; align-items: center; gap: 5px; color: var(--cn-muted); font: 500 12px var(--cn-f-display); margin-top: 6px; }
.cn-numlist__m svg { width: 14px; height: 14px; }

/* ---------- Dark bands (interviews, video) ---------- */
.cn-band { background: var(--cn-band); color: var(--cn-band-ink); padding: 48px 0 56px; margin-top: 64px; }
.cn-band .cn-sechead { border-top-color: rgba(255,255,255,.9); }
.cn-band .cn-sechead__t, .cn-band .cn-sechead__t a, .cn-band .cn-sechead__more { color: #fff !important; }
.cn-band .cn-card__title, .cn-band .cn-card__title a { color: #fff !important; }
.cn-band .cn-card:hover .cn-card__title a { color: #fff !important; }
.cn-band .cn-card__media { background: #222428; }
.cn-band .cn-meta { color: var(--cn-band-muted); }
.cn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cn-gap); }
.cn-card--band .cn-card__media { aspect-ratio: 3 / 2; }
.cn-card--band .cn-card__title { font-size: clamp(19px, 1.7vw, 23px) !important; }
.cn-vstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cn-card--video .cn-card__title { font-size: 15.5px !important; line-height: 1.3; font-weight: 600 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn-band--video { margin-top: 64px; margin-bottom: -1px; background: #1b0d0a; background: linear-gradient(180deg, #160b09 0%, var(--cn-band) 100%); }

/* ---------- Home: category sections ---------- */
.cn-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--cn-gap); margin-top: 64px; }
.cn-sec { min-width: 0; }

/* ---------- Article ---------- */
.cn-ahead { max-width: 1104px; padding-top: 28px; }
.cn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 13px var(--cn-f-display); color: var(--cn-muted); margin-bottom: 22px; }
.cn-crumbs a { color: var(--cn-muted); display: inline-flex; min-height: 32px; align-items: center; }
.cn-crumbs a:hover { color: var(--cn-brand-ink); }
.cn-crumbs span { color: var(--cn-line); }
html.cn-rd[data-theme=dark] .cn-crumbs span { color: #4a4d53; }
.cn-ahead__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cn-ahead__title { font: 800 clamp(30px, 4.3vw, 56px)/1.07 var(--cn-f-display) !important; letter-spacing: -.03em; color: var(--cn-ink); max-width: 24ch; text-wrap: balance; overflow-wrap: anywhere; }
.cn-ahead__dek { font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--cn-f-text); color: var(--cn-ink-2); margin-top: 20px !important; max-width: 720px; }
.cn-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 0; border-top: 1px solid var(--cn-line); border-bottom: 1px solid var(--cn-line); max-width: 720px; }
.cn-byline__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--cn-brand); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 20px var(--cn-f-display); flex: 0 0 auto; }
.cn-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cn-byline__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-byline__name { font: 700 15px var(--cn-f-display); color: var(--cn-ink); }
.cn-byline__name a { color: var(--cn-ink); }
.cn-byline__name a:hover { color: var(--cn-brand-ink); }
.cn-byline__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 500 13px var(--cn-f-display); color: var(--cn-muted); }
.cn-byline__counts { margin-left: auto; display: flex; gap: 16px; color: var(--cn-muted); font: 600 14px var(--cn-f-display); }
.cn-byline__counts a:hover { color: var(--cn-brand-ink); }

.cn-hero { max-width: calc(var(--cn-wrap) - 2 * var(--cn-gutter)); margin: 32px auto 0; padding: 0; }
.cn-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 680px; object-fit: cover; border-radius: var(--cn-r); background: var(--cn-paper); }

.cn-alayout { display: grid; grid-template-columns: minmax(0, 720px) 320px; gap: 64px; justify-content: center; max-width: calc(1104px + 2 * var(--cn-gutter)); margin-top: 40px; }
.cn-acol { min-width: 0; }

/* reading text */
.cn-prose { color: var(--cn-ink-2); }
.cn-prose > :first-child { margin-top: 0 !important; }
.cn-prose a { color: var(--cn-brand-ink) !important; text-decoration-thickness: 1px; }
.cn-prose img { display: block; width: 100%; height: auto !important; margin: 28px 0 !important; border: 0 !important; padding: 0 !important; border-radius: var(--cn-r) !important; background: none !important; box-shadow: none !important; }
.cn-prose :is(h2, h3, h4) { font-family: var(--cn-f-display) !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--cn-ink) !important; }
.cn-prose blockquote { position: relative; margin: 36px 0 !important; padding: 8px 0 8px 28px !important; border-left: 5px solid var(--cn-brand) !important; font-style: normal !important; }
.cn-prose blockquote, .cn-prose blockquote :is(p, span, em, strong, div) { font-family: var(--cn-f-display) !important; font-size: clamp(21px, 2vw, 25px) !important; line-height: 1.38 !important; font-weight: 700 !important; color: var(--cn-ink) !important; letter-spacing: -.01em !important; }
.cn-prose blockquote p:last-child { margin-bottom: 0 !important; }
.cn-prose strong, .cn-prose b { color: var(--cn-ink); }
.cn-prose table { border-collapse: collapse; font: 15px/1.5 var(--cn-f-display); }
.cn-prose td, .cn-prose th { border: 1px solid var(--cn-line); padding: 8px 10px; }
.cn-prose hr { border: 0; border-top: 1px solid var(--cn-line); margin: 32px 0; }

.cn-share { margin-top: 32px; padding-top: 20px; border-top: 3px solid var(--cn-line-strong); }
.cn-share .np-share { margin: 0; }
.cn-react { margin-top: 28px; padding: 22px 24px; background: var(--cn-paper); border-radius: var(--cn-r-lg); }
.cn-react__t { font: 800 17px var(--cn-f-display) !important; margin-bottom: 14px !important; }
.cn-react .reaction { display: flex; flex-wrap: wrap; gap: 10px; }
.cn-react .each-reaction { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cn-react .reaction-button { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--cn-line); background: var(--cn-bg); cursor: pointer; padding: 0; transition: transform .18s, border-color .18s; }
.cn-react .reaction-button:hover { transform: translateY(-2px) scale(1.06); border-color: var(--cn-brand); }
.cn-react .reaction-button img { width: 38px; height: 38px; object-fit: contain; }
.cn-react .reaction-clicked { font: 700 13px var(--cn-f-display); color: var(--cn-muted); min-height: 16px; font-variant-numeric: tabular-nums; }
.cn-acol .np-rating { margin: 22px 0 0; }
.cn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--cn-f-display); }
.cn-tags__label { font-weight: 700; font-size: 14px; color: var(--cn-muted); margin-right: 4px; }
.cn-tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--cn-line); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--cn-ink); transition: all .18s; }
.cn-tags a:hover { border-color: var(--cn-ink); background: var(--cn-ink); color: var(--cn-bg); }
.cn-acol .np-author-box { margin: 32px 0 0; border: 0; border-left: 5px solid var(--cn-brand); border-radius: 0 var(--cn-r-lg) var(--cn-r-lg) 0; background: var(--cn-paper); }
.cn-acol .np-related { margin-top: 48px; }
.cn-acol .np-related__title { font: 800 22px var(--cn-f-display) !important; border-bottom: 0 !important; border-top: 1px solid var(--cn-line-strong); padding: 14px 0 0 !important; position: relative; color: var(--cn-ink) !important; }
.cn-acol .np-related__title::before { content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 5px; background: var(--cn-brand); }
.cn-acol .np-related__img { border-radius: var(--cn-r); }
.cn-acol .np-related__name { font-family: var(--cn-f-display); font-weight: 700; color: var(--cn-ink); }
.cn-acol .np-related__date { color: var(--cn-muted); }

/* comments */
.cn-comments { margin-top: 56px; }
.cn-comments__t { font: 800 26px var(--cn-f-display) !important; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cn-line-strong); position: relative; margin-bottom: 20px !important; }
.cn-comments__t::before { content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 5px; background: var(--cn-brand); }
.cn-comments__t span { background: var(--cn-ink); color: var(--cn-bg); font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.cn-comlist { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cn-com { display: flex; gap: 14px; padding: 16px 18px; background: var(--cn-paper); border-radius: var(--cn-r-lg); }
.cn-com__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--cn-bg); }
.cn-com__body { min-width: 0; flex: 1; }
.cn-com__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--cn-f-display); }
.cn-com__name { font-weight: 700; font-size: 15px; color: var(--cn-ink); }
.cn-com__head time { color: var(--cn-muted); font-size: 12px; margin-left: auto; }
.cn-com__text { font: 400 16px/1.6 var(--cn-f-text); color: var(--cn-ink-2); margin-top: 6px !important; overflow-wrap: anywhere; }
.cn-comform { padding: 24px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-lg); background: var(--cn-card); }
.cn-comform__t { font: 800 19px var(--cn-f-display) !important; margin-bottom: 8px !important; }
.cn-comform__warn { font-size: 13.5px; line-height: 1.5; color: var(--cn-muted); margin-bottom: 16px !important; }
.cn-comform__warn b { color: var(--cn-brand-ink); }
.cn-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cn-avatars .comment-guest { width: 46px; height: 46px; padding: 2px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; transition: opacity .18s, border-color .18s; }
.cn-avatars .comment-guest img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.cn-avatars .comment-guest:hover { opacity: 1; }
.cn-avatars .comment-guest.active { border-color: var(--cn-brand); opacity: 1; }
.cn-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cn-input { width: 100%; border: 1px solid var(--cn-line); border-radius: 8px; padding: 12px 14px; font-size: 16px; background: var(--cn-bg); color: var(--cn-ink); transition: border-color .18s, box-shadow .18s; }
textarea.cn-input { resize: vertical; min-height: 110px; line-height: 1.5; }
.cn-input:focus { outline: none; border-color: var(--cn-brand); box-shadow: 0 0 0 3px rgba(194,59,31,.18); }
.cn-alert { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 8px; background: #fdf0ec; color: #7a2412; margin-bottom: 14px; font-size: 14px; }
.cn-alert.success { background: #ebf6ee; color: #1d5a2c; }
.cn-alert button { background: none; border: 0; font-size: 22px; cursor: pointer; color: inherit; width: 36px; height: 36px; }
.cn-comform .np-login, .cn-comform .np-reader { margin: 0 0 14px; }

/* side tabs widget (article, category, video, podcast) */
.cn-tabs { font-family: var(--cn-f-display); background: var(--cn-bg); }
.cn-tabs__nav { display: flex; border-bottom: 3px solid var(--cn-line-strong); }
.cn-tabs__nav button { flex: 1; min-height: 46px; border: 0; background: none; font: 700 14px var(--cn-f-display); color: var(--cn-muted); cursor: pointer; position: relative; padding: 0 6px; }
.cn-tabs__nav button.active { color: var(--cn-ink); }
.cn-tabs__nav button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; background: var(--cn-brand); }
.cn-tabs__body { list-style: none; margin: 0; padding: 0; counter-reset: tab; display: none; }
.cn-tabs__body.active { display: block; }
.cn-tabs__body li { counter-increment: tab; border-bottom: 1px solid var(--cn-line); }
.cn-tabs__body a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; color: var(--cn-ink) !important; text-decoration: none !important; }
.cn-tabs__body a::before { content: counter(tab); grid-row: span 2; font: 800 22px/1 var(--cn-f-display); color: var(--cn-brand); }
.cn-tabs__t { font-weight: 700; font-size: 15px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cn-tabs__body a:hover .cn-tabs__t { color: var(--cn-brand-ink); }
.cn-tabs__body time { font-size: 12px; color: var(--cn-muted); margin-top: 4px; }

/* ---------- Category ---------- */
.cn-catband { background: var(--cn-paper); border-bottom: 1px solid var(--cn-line); padding: 26px 0 34px; position: relative; }
.cn-catband::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; }
.cn-catband .cn-crumbs { margin-bottom: 10px; }
.cn-catband__title { font: 800 clamp(36px, 6vw, 76px)/1 var(--cn-f-display) !important; letter-spacing: -.04em; color: var(--cn-ink); display: flex; align-items: center; gap: 18px; }
.cn-catband__title::before { content: ''; width: clamp(12px, 1.4vw, 20px); height: clamp(12px, 1.4vw, 20px); background: var(--cn-brand); flex: 0 0 auto; }
.cn-catband__dek { font: 400 19px/1.5 var(--cn-f-text); color: var(--cn-muted); margin-top: 12px !important; max-width: 720px; }
.cn-subcats { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cn-subcats a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--cn-bg); border: 1px solid var(--cn-line); font: 700 14px var(--cn-f-display); }
.cn-subcats a:hover { background: var(--cn-ink); color: var(--cn-bg); border-color: var(--cn-ink); }
.cn-alayout--cat { grid-template-columns: minmax(0, 1fr) 320px; max-width: var(--cn-wrap); gap: 56px; }
.cn-catmain { min-width: 0; }
.cn-catlead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 3px solid var(--cn-line-strong); align-items: center; }
.cn-catlead__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--cn-r); overflow: hidden; background: var(--cn-paper); }
.cn-catlead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--cn-ease); }
.cn-catlead:hover .cn-catlead__media img { transform: scale(1.03); }
.cn-catlead__title { font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--cn-f-display) !important; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cn-catlead__title a:hover { color: var(--cn-brand-ink); }
.cn-catlead .cn-card__dek { -webkit-line-clamp: 4; font-size: 17px; }
.cn-meta__by a { color: var(--cn-ink); font-weight: 700; }
.cn-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--cn-gap); }
.cn-card--grid .cn-card__title { font-size: 20px !important; }
.cn-grid3--media { gap: 28px 24px; }
.cn-grid3--media .cn-card__title { font-size: 16px !important; }
.cn-empty { padding: 40px 0; color: var(--cn-muted); font-size: 18px; }

.cn-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 48px 0 8px; font-family: var(--cn-f-display); }
.cn-pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.cn-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cn-line); font-weight: 700; font-size: 15px; color: var(--cn-ink) !important; background: var(--cn-bg); transition: all .18s; }
.cn-pager a.cn-pager__btn:hover { border-color: var(--cn-ink); background: var(--cn-ink); color: var(--cn-bg) !important; }
.cn-pager__btn.is-current { background: var(--cn-brand); border-color: var(--cn-brand); color: #fff !important; }
.cn-pager__nav { padding: 0 20px; }
.cn-pager__gap { display: inline-flex; align-items: center; height: 44px; padding: 0 4px; color: var(--cn-muted); }

/* ---------- Footer (all pages) ---------- */
.cn-footer { background: #0d0e10; color: #b9bcc3; font-family: var(--cn-f-display); margin-top: 80px; padding: 56px 0 0; font-size: 15px; line-height: 1.55; }
.cn-band--video + .cn-footer, .cn-main:has(> .cn-band--video:last-child) + .cn-footer { margin-top: 0; border-top: 1px solid #23252a; }
.cn-footer ul { list-style: none; margin: 0; padding: 0; }
.cn-footer a { color: #e3e5e8; text-decoration: none; transition: color .18s; }
.cn-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cn-footer__top { display: grid; grid-template-columns: 1.35fr .8fr .8fr 1.45fr; gap: 40px; padding-bottom: 44px; }
.cn-footer__logo img { height: 42px; width: auto; display: block; }
.cn-footer__about { margin: 16px 0 18px; color: #b9bcc3; max-width: 34ch; }
.cn-footer__contacts li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.cn-footer__contacts svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; fill: none; stroke: var(--cn-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-footer__h { font: 800 13px var(--cn-f-display) !important; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; margin: 0 0 16px !important; padding-bottom: 12px; border-bottom: 1px solid #2a2c31; position: relative; }
.cn-footer__h::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 32px; height: 3px; background: var(--cn-brand); }
.cn-footer__links li { margin-bottom: 2px; }
.cn-footer__links a { display: inline-flex; align-items: center; min-height: 34px; font-weight: 500; }
.cn-social { display: flex; gap: 8px; margin-top: 18px !important; }
.cn-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #34363c; display: flex; align-items: center; justify-content: center; color: #fff; }
.cn-social a:hover { background: var(--cn-brand); border-color: var(--cn-brand); text-decoration: none; }
.cn-social svg { width: 18px; height: 18px; fill: currentColor; }
.cn-footer__news { background: #17181b; border: 1px solid #26282d; border-radius: var(--cn-r-lg); padding: 24px; align-self: start; }
.cn-footer .np-newsletter { margin: 0; }
.cn-footer .np-newsletter__title { color: #fff; font: 800 20px/1.25 var(--cn-f-display); letter-spacing: -.01em; margin-bottom: 8px; }
.cn-footer .np-newsletter__text { color: #b9bcc3; opacity: 1; font-size: 14px; margin-bottom: 16px; }
.cn-footer .np-newsletter__row { max-width: none; }
.cn-footer .np-newsletter input[type=email] { height: 46px; background: #0d0e10; border: 1px solid #3a3d43; color: #fff; border-radius: 999px; padding: 0 18px; }
.cn-footer .np-newsletter input[type=email]::placeholder { color: #8b8f97; }
.cn-footer .np-newsletter button { height: 46px; border-radius: 999px; padding: 0 20px; font-weight: 700; }
.cn-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 20px 0 28px; border-top: 1px solid #23252a; font-size: 13px; color: #9a9ea6; }
.cn-footer__bottom p { margin: 0; color: #9a9ea6; }
.cn-footer .np-credit, .cn-footer .np-credit a { color: #c9ccd1 !important; }
.cn-footer .np-credit a { display: inline-flex; min-height: 32px; align-items: center; }

/* ---------- Old-theme pages: keep the new header/footer intact ---------- */
html:not(.cn-rd) .cn-header, html:not(.cn-rd) .cn-footer { font-size: 15px; line-height: 1.5; }
html:not(.cn-rd) .cn-header *, html:not(.cn-rd) .cn-footer * { box-sizing: border-box; }
html:not(.cn-rd) .cn-header h2, html:not(.cn-rd) .cn-footer h2 { line-height: 1.2; }
html:not(.cn-rd) .cn-main { display: block; padding-top: 4px; }
html:not(.cn-rd) .cn-footer p { font-size: 13px; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .cn-vstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cn-vstrip > :nth-child(5) { display: none; }
}
@media (max-width: 1023px) {
  :root { --cn-gap: 24px; }
  .cn-masthead__tag { display: none; }
  .cn-top { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .cn-toplist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cn-toplist__item:nth-last-child(2) { border-bottom: 0; }
  .cn-split, .cn-alayout, .cn-alayout--cat { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cn-aside__sticky { position: static; }
  .cn-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-footer__top { grid-template-columns: 1fr 1fr; }
  .cn-vstrip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .cn-vstrip > * { scroll-snap-align: start; }
  .cn-vstrip > :nth-child(5) { display: block; }
}
@media (max-width: 760px) {
  :root { --cn-gutter: 16px; }
  .cn-util__date, .cn-util__rates li:nth-child(n+3) { display: none; }
  .cn-util__in { gap: 14px; }
  .cn-util__wx { padding-left: 0; border-left: 0; }
  .cn-util__rates { gap: 12px; }
  .cn-masthead__in { min-height: 62px; gap: 8px; }
  .cn-menu-btn { display: inline-flex; margin-left: -6px !important; border-color: transparent !important; }
  .cn-logo img { height: 34px; }
  .cn-masthead__tools { gap: 2px; }
  .cn-masthead__tools .cn-iconbtn { border-color: transparent; }
  .cn-nav__item > a { min-height: 44px; font-size: 14px; padding: 0 11px; }
  .cn-nav__item > a::after { left: 11px; right: 11px; }

  /* lead: photo, then the headline on a dark slab */
  .cn-lead { display: flex; flex-direction: column; border-radius: 0; margin: 0 calc(-1 * var(--cn-gutter)); }
  .cn-lead__media { position: relative; aspect-ratio: 16 / 10; }
  .cn-lead__media::after { background: linear-gradient(to top, rgba(17,18,20,1) 0%, rgba(17,18,20,0) 38%); }
  .cn-lead__body { min-height: 0; padding: 0 var(--cn-gutter) 22px; margin-top: -26px; }
  .cn-lead__title { font-size: clamp(25px, 7vw, 32px) !important; }
  .cn-lead__dek { font-size: 16px; }
  .cn-toplist { display: block; }
  .cn-toplist__item { grid-template-columns: minmax(0, 1fr) 104px; }
  .cn-toplist__item:nth-last-child(2) { border-bottom: 1px solid var(--cn-line); }

  .cn-split { margin-top: 36px; }
  .cn-card--h { grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; padding: 18px 0; }
  .cn-card--h .cn-card__media { order: 2; aspect-ratio: 1 / 1; }
  .cn-card--h .cn-card__title { font-size: 17px !important; line-height: 1.28; }
  .cn-card--h .cn-card__dek { display: none; }
  .cn-band { padding: 36px 0 40px; margin-top: 44px; }
  .cn-grid3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cn-sections { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 44px; }
  .cn-vstrip { grid-auto-columns: 72%; }

  .cn-ahead { padding-top: 16px; }
  .cn-crumbs { margin-bottom: 12px; }
  .cn-ahead__title { font-size: clamp(27px, 7.6vw, 36px) !important; line-height: 1.1; }
  .cn-ahead__dek { font-size: 18px; margin-top: 14px !important; }
  .cn-byline { flex-wrap: wrap; margin-top: 18px; }
  .cn-byline__counts { margin-left: 62px; width: 100%; }
  .cn-hero { margin: 22px 0 0; max-width: none; }
  .cn-hero img { border-radius: 0; }
  .cn-alayout { margin-top: 26px; }
  .cn-react { padding: 18px 16px; }
  .cn-comform { padding: 18px 16px; }
  .cn-com { padding: 14px; }
  .cn-com__head time { margin-left: 0; width: 100%; }

  .cn-catband { padding: 18px 0 24px; }
  .cn-catlead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cn-grid2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cn-grid3--media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .cn-pager__nav { padding: 0 16px; }

  .cn-footer { padding-top: 40px; margin-top: 56px; }
  .cn-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .cn-footer__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .cn-footer__links a { min-height: 44px; }
  .cn-footer__bottom { flex-direction: column; }
  .cn-footer .np-credit a { min-height: 44px; }
  .np-newsletter__row { flex-wrap: wrap; }
  .cn-footer .np-newsletter input[type=email], .cn-footer .np-newsletter button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-body *, .cn-body *::before, .cn-body *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cn-util, .cn-nav, .cn-masthead__tools, .cn-aside, .cn-footer, .cn-share, .cn-comments, .np-sticky { display: none !important; }
}

/* ---------- iteration 2 ---------- */
.cn-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cn-sections .cn-card--sec .cn-card__title { font-size: 19px !important; }
@media (max-width: 1023px) { .cn-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cn-sections { grid-template-columns: minmax(0, 1fr); }
  .cn-header .cn-masthead__tools .np-theme-toggle.cn-iconbtn { border-color: transparent; }
  .cn-band .cn-grid3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
  .cn-band .cn-grid3 > * { scroll-snap-align: start; }
}
/* lede: the first paragraph reads as the standfirst */
.cn-prose > p:first-of-type { font-size: clamp(20px, 1.7vw, 22px) !important; line-height: 1.55 !important; color: var(--cn-ink) !important; }
.cn-grid2 > .cn-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cn-gap); align-items: center; }
.cn-grid2 > .cn-card:last-child:nth-child(odd) .cn-card__body { padding-top: 0; }
@media (max-width: 760px) {
  .cn-grid2 > .cn-card:last-child:nth-child(odd) { display: block; }
  .cn-grid2 > .cn-card:last-child:nth-child(odd) .cn-card__body { padding-top: 14px; }
  .cn-byline__counts { margin-left: 0; }
  .cn-byline__avatar + .cn-byline__txt + .cn-byline__counts { margin-left: 62px; }
  .cn-react .reaction { gap: 6px; }
  .cn-react .reaction-button { width: 48px; height: 48px; }
  .cn-react .reaction-button img { width: 32px; height: 32px; }
}
.cn-band--video { background: linear-gradient(180deg, #160b09 0%, #111214 100%) #121010; }
html.cn-rd[data-theme=dark] .cn-band--video { background: linear-gradient(180deg, #120807 0%, #08090a 100%) #0b0a0a; }
.cn-byline__counts > * { min-height: 44px; display: inline-flex; align-items: center; }
/* 4-column sections: lead card + headline-only list on wide screens */
@media (min-width: 1024px) {
  .cn-sections .cn-card--row { grid-template-columns: minmax(0, 1fr); }
  .cn-sections .cn-card--row .cn-card__media { display: none; }
  .cn-sections .cn-card--row .cn-card__title { font-size: 15.5px !important; }
}
.cn-sections .cn-card__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }