/* Health news & advice (/news) — the teal tokens, header and footer come from landing.css (body.lp); the old app
   token names used below (--text-2, --surface-2, --brand, --muted …) are aliased there. */
.lp-container { max-width: 1160px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.lp-kicker { margin: 0 0 10px; font: 700 12px/1.3 var(--lp-font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.nw-nav { display: flex; gap: 2px; }
body.lp .nw-nav a { color: var(--text2); text-decoration: none; font: 500 15px/1.2 var(--lp-font); min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; }
body.lp .nw-nav a:hover, body.lp .nw-nav a[aria-current="page"] { background: var(--surface2); color: var(--text); }
.nw-phones { font: 400 14px/1.6 var(--lp-font); color: var(--text3); }
body.lp .nw-phones a { color: var(--text2); text-decoration: none; white-space: nowrap; }
body.lp .nw-phones a strong { color: var(--danger); }
body.lp .nw-phones a:hover { text-decoration: underline; }
body.lp .lp-footer-bottom a { color: var(--text2); }
.nw .ic { width: 1em; height: 1em; flex: none; vertical-align: -.14em; margin-right: .4em; }

/* category colours: --nw-c / --nw-c2 paint the illustrations, --nw-ink is the readable accent on the page */
.nw-c-outbreaks { --nw-c: #e4572e; --nw-c2: #b5321a; }
.nw-c-infectious { --nw-c: #7c5cd6; --nw-c2: #5434b0; }
.nw-c-chronic { --nw-c: #e0457b; --nw-c2: #ad2356; }
.nw-c-prevention { --nw-c: #16a08c; --nw-c2: #0b6b60; }
.nw-c-nutrition { --nw-c: #4caf50; --nw-c2: #2b7a30; }
.nw-c-lifestyle { --nw-c: #f2992e; --nw-c2: #cc650e; }
.nw-c-mental { --nw-c: #5b6ee1; --nw-c2: #3944b3; }
.nw-c-maternal_child { --nw-c: #ea6aa3; --nw-c2: #bd417b; }
.nw-c-environment { --nw-c: #2f9fd8; --nw-c2: #1b6c9f; }
.nw-c-medicines { --nw-c: #3b82f6; --nw-c2: #1d4ed8; }
.nw-c-research { --nw-c: #d09a12; --nw-c2: #9a6f04; }
.nw-card, .nw-article, .nw-dot { --nw-ink: color-mix(in srgb, var(--nw-c, var(--brand)) 62%, var(--text)); }

/* illustration tile */
.nw-art { position: relative; overflow: hidden; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .28), transparent 55%),
              linear-gradient(140deg, var(--nw-c, var(--brand)), var(--nw-c2, #0b5f58)); }
.nw-art::before, .nw-art .nw-ring { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); pointer-events: none; }
.nw-art::before { width: 70%; aspect-ratio: 1; right: -18%; bottom: -38%; }
.nw-art .nw-ring { width: 34%; aspect-ratio: 1; left: -8%; top: -14%; background: rgba(255, 255, 255, .08); border: 0; }
.nw-art-icon { position: relative; width: 64px; height: 64px; stroke-width: 1.15; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
/* AI illustration (images.py) in place of the line drawing */
.nw-photo { background: var(--surface2); }
.nw-photo::before { content: none; }
.nw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-ahead-inner.solo { grid-template-columns: minmax(0, 1fr); }
.nw-hero-img { margin: -6px auto 0; padding-bottom: 30px; max-width: 1040px; }
.nw-hero-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--surface2);
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--nw-c) 60%, #000); }
.nw-hero-img figcaption { display: flex; align-items: center; gap: 2px; margin-top: 8px; font-size: .78rem; color: var(--muted); }

/* list page */
.nw-hero { padding: 56px 0 26px; background: var(--glow); }
.nw-hero h1 { font: 800 clamp(1.9rem, 3.8vw, 2.75rem)/1.12 var(--lp-font); letter-spacing: -.025em; margin: 0 0 12px; text-wrap: pretty; }
.nw-intro { font-size: 1.08rem; color: var(--text-2); max-width: 720px; margin: 0 0 22px; }
.nw-how { display: flex; align-items: flex-start; gap: 2px; font-size: .86rem; color: var(--muted); max-width: 760px; margin: 28px 0 0; }
.nw-how .ic { margin-top: .2em; }
.nw-filters { display: grid; gap: 10px; }
.nw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp .nw-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text2); text-decoration: none; font-weight: 600; font-size: .9rem; }
body.lp .nw-chip:hover { background: var(--surface2); color: var(--text); }
body.lp .nw-chip.active { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.nw-cats .nw-chip { min-height: 32px; font-size: .84rem; padding: 0 12px; }
.nw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nw-c); flex: none; }
.nw-chip.active .nw-dot { box-shadow: 0 0 0 2px #fff; }

.nw-list { padding-top: 6px; padding-bottom: 64px; }
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nw-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border2); border-radius: 18px; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.nw-card:hover { border-color: color-mix(in srgb, var(--nw-c, var(--accent)) 60%, var(--border)); box-shadow: var(--shadow); transform: translateY(-2px); }
.nw-card > .nw-art { aspect-ratio: 16 / 7.5; }
.nw-card-text { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 16px; flex: 1; }
.nw-card :is(h2, h3) { font-size: 1.1rem; line-height: 1.32; margin: 2px 0 0; letter-spacing: -.01em; }
.nw-card :is(h2, h3) a { color: var(--text); text-decoration: none; }
.nw-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nw-card :is(h2, h3) a:focus-visible { outline: none; }
.nw-card:focus-within { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.nw-card-sum { margin: 0; color: var(--text-2); font-size: .94rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card .nw-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: auto 0 0; padding-top: 8px; font-size: .8rem; color: var(--muted); }
.nw-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-bottom: 22px; }
.nw-featured > .nw-art { aspect-ratio: auto; min-height: 280px; }
.nw-featured .nw-art-icon { width: 108px; height: 108px; }
.nw-featured .nw-card-text { padding: 28px 30px; gap: 10px; justify-content: center; }
.nw-featured h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.22; letter-spacing: -.02em; }
.nw-featured .nw-card-sum { font-size: 1.04rem; -webkit-line-clamp: 4; }
.nw-featured .nw-meta { margin-top: 6px; }
.nw-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
/* Sentence case on purpose: Chrome does not reliably upper-case Mongolian text containing ө/ү. */
.nw-kind, .nw-new { font-size: .74rem; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 3px 9px; }
.lp-kicker.nw-kicker { text-transform: none; letter-spacing: .02em; font-size: .86rem; }
.nw-kind.news { background: var(--info-soft); color: var(--info); }
.nw-kind.advice { background: var(--ok-soft); color: var(--ok); }
.nw-new { background: var(--warn-soft); color: var(--warn); }
.nw-cat { font-size: .8rem; font-weight: 700; color: var(--nw-ink, var(--muted)); text-decoration: none; }
a.nw-cat:hover { text-decoration: underline; }
.nw-empty { color: var(--muted); padding: 40px 0; }
.nw-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* article */
.nw-progress { display: none; }
@supports (animation-timeline: scroll()) {
  body:has(.nw-article) .nw-progress { display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 80; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: nw-progress linear both; animation-timeline: scroll(root); }
  @keyframes nw-progress { to { transform: scaleX(1); } }
}
.nw-ahead { background: linear-gradient(180deg, color-mix(in srgb, var(--nw-c) 11%, var(--bg)), var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--nw-c) 16%, var(--border)); }
.nw-ahead-inner { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; padding-top: 30px; padding-bottom: 34px; }
.nw-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; margin: 0 0 14px; color: var(--muted); }
.nw-crumbs a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.nw-crumbs a:last-child { color: var(--nw-ink); }
.nw-crumbs a:hover { text-decoration: underline; }
.nw-ahead h1 { font-size: clamp(1.75rem, 3.6vw, 2.65rem); line-height: 1.16; letter-spacing: -.028em; margin: 12px 0 14px; text-wrap: balance; }
.nw-dek { font-size: clamp(1.08rem, 1.6vw, 1.24rem); line-height: 1.55; color: var(--text-2); margin: 0 0 18px; max-width: 680px; }
.nw-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .88rem; color: var(--muted); }
.nw-byline span { display: inline-flex; align-items: center; }
.nw-byline a { color: var(--text-2); font-weight: 600; margin-left: .3em; }
.nw-art-lg { width: 240px; aspect-ratio: 1; border-radius: 32px; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--nw-c) 70%, transparent); }
.nw-art-lg .nw-art-icon { width: 116px; height: 116px; }

.nw-read { max-width: 760px; padding-top: 30px; padding-bottom: 20px; }
.nw-box-title { display: flex; align-items: center; font-size: .82rem; font-weight: 800; letter-spacing: .03em; color: var(--nw-ink); margin: 0 0 12px; }
.nw-tldr { background: var(--surface); border: 1px solid var(--border2); border-left: 5px solid var(--nw-c); border-radius: 16px; padding: 18px 22px; margin: 0 0 30px; box-shadow: var(--shadow-sm); }
.nw-tldr ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: tl; }
.nw-tldr li { counter-increment: tl; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1.02rem; line-height: 1.5; font-weight: 500; }
.nw-tldr li::before { content: counter(tl); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--nw-c) 16%, var(--surface)); color: var(--nw-ink); font-weight: 800; font-size: .9rem; }

.nw-body { font-size: 1.1rem; line-height: 1.78; color: var(--text); }
.nw-body > p { margin: 0 0 18px; }
.nw-body > p:first-child { font-size: 1.22rem; line-height: 1.65; }
.nw-body h2 { font-size: 1.42rem; line-height: 1.3; letter-spacing: -.015em; margin: 38px 0 12px; }
.nw-body h2::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--nw-c); margin-bottom: 12px; }
.nw-body h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.nw-body ul, .nw-body ol { margin: 0 0 18px; padding-left: 1.4em; }
.nw-body li { margin-bottom: 8px; padding-left: .2em; }
.nw-body li::marker { color: var(--nw-ink); font-weight: 800; }
.nw-body :is(p, li) strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--nw-c) 22%, transparent) 0); }
.nw-quote { margin: 30px 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--nw-c); position: relative; }
.nw-quote blockquote { margin: 0; }
.nw-quote p { margin: 0; font-size: 1.3rem; line-height: 1.5; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.nw-quote p::before { content: "“"; color: var(--nw-ink); margin-right: .05em; }
.nw-quote p::after { content: "”"; color: var(--nw-ink); margin-left: .05em; }
.nw-quote figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted); }

.nw-stats { margin: 8px 0 30px; }
.nw-stat-row { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nw-stat-row.n1 { grid-template-columns: minmax(0, 1fr); }
.nw-stat-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-stat { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--nw-c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--nw-c) 22%, var(--border)); }
.nw-stat strong { font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.05; font-weight: 850; letter-spacing: -.03em; color: var(--nw-ink); overflow-wrap: anywhere; }
.nw-stat span { font-size: .93rem; line-height: 1.45; color: var(--text-2); }

.nw-todo { margin: 34px 0 30px; padding: 22px 24px; border-radius: 18px; background: var(--ok-soft); border: 1px solid var(--ok-bd, color-mix(in srgb, var(--ok) 30%, transparent)); }
.nw-todo h2 { font-size: 1.3rem; margin: 0 0 16px; letter-spacing: -.01em; }
.nw-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nw-todo li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1.04rem; line-height: 1.55; }
.nw-tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: var(--surface); }
.nw-tick .ic { margin: 0; width: 17px; height: 17px; }

.nw-faq { margin: 0 0 30px; }
.nw-faq h2 { display: flex; align-items: center; font-size: 1.3rem; margin: 0 0 8px; letter-spacing: -.01em; }
.nw-faq h2 .ic { color: var(--nw-ink); }
.nw-faq details { border-bottom: 1px solid var(--border); }
.nw-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 2px; font-weight: 700; font-size: 1.06rem; line-height: 1.4; }
.nw-faq summary::-webkit-details-marker { display: none; }
.nw-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--nw-ink); font-size: 1.25rem; font-weight: 700; }
.nw-faq details[open] summary::after { content: "−"; }
.nw-faq summary:hover { color: var(--nw-ink); }
.nw-faq details p { margin: -4px 0 18px; color: var(--text-2); font-size: 1.04rem; line-height: 1.7; }

.nw-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; }
.nw-share[hidden], .nw-share [hidden] { display: none; }
.nw-share-label { display: inline-flex; align-items: center; font-weight: 700; color: var(--text-2); margin-right: 4px; }
.nw-share-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.nw-share-btn:hover { background: var(--surface-2); }
.nw-share-btn.fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.nw-share-btn.fb:hover { background: #0f63d1; }

.nw-sourcecard { border: 1px solid var(--border2); background: var(--surface); border-radius: 16px; padding: 18px 20px; margin: 0 0 16px; font-size: .95rem; }
.nw-sourcecard p { margin: 0 0 8px; }
.nw-sourcecard p:last-child { margin: 0; }
.nw-ai { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 650; font-size: .88rem; }
.nw-ai::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nw-disclaimer { background: var(--surface-2); border-radius: 16px; padding: 16px 20px; margin: 0 0 22px; font-size: .9rem; color: var(--text-2); }
.nw-disclaimer h2 { display: flex; align-items: center; font-size: .95rem; margin: 0 0 6px; color: var(--text); }
.nw-disclaimer p { margin: 0 0 10px; }
.nw-disclaimer p:last-child { margin: 0; }
.nw-emergency { background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: 10px; padding: 8px 10px; color: var(--text); }
.nw-emergency strong { color: var(--danger); }
.nw-preview { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); border-radius: 12px; padding: 10px 14px; font-weight: 650; margin: 0 0 14px; }
.nw-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 20px; padding: 24px; margin: 26px 0 10px; background: var(--accent-fill); color: #fff; }
.nw-cta h2 { margin: 0 0 4px; font-size: 1.15rem; }
.nw-cta p { margin: 0; color: rgba(255, 255, 255, .88); }
.lp .nw-cta .btn.primary { background: #fff; border-color: #fff; color: #0f5347; }
.lp .nw-cta .btn.primary:hover { background: #eafaf6; color: #0f5347; }
.nw-related { padding-top: 26px; padding-bottom: 64px; }
.nw-related > h2 { font-size: 1.35rem; margin: 0 0 16px; letter-spacing: -.01em; }

/* landing page "latest" strip */
.lp-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-news-more { margin-top: 22px; }

@media (max-width: 1020px) {
  .nw-grid, .lp-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-ahead-inner { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; }
  .nw-art-lg { width: 180px; border-radius: 26px; }
  .nw-art-lg .nw-art-icon { width: 88px; height: 88px; }
}
@media (max-width: 760px) {
  .nw-nav { display: none; }
  .lp-container { padding: 0 16px; }
  .nw-hero { padding: 32px 0 18px; }
  .nw-grid, .lp-news-grid { grid-template-columns: minmax(0, 1fr); }
  .nw-featured { grid-template-columns: minmax(0, 1fr); }
  .nw-featured > .nw-art { min-height: 0; aspect-ratio: 16 / 7.5; }
  .nw-featured .nw-art-icon { width: 72px; height: 72px; }
  .nw-featured .nw-card-text { padding: 18px; }
  .nw-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .nw-cats .nw-chip { flex: none; }
  .nw-ahead-inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; padding-bottom: 24px; }
  .nw-ahead-text { display: contents; }
  .nw-art-lg { order: -2; width: 100%; aspect-ratio: auto; height: 120px; border-radius: 20px; margin: 0 0 14px; }
  .nw-art-lg .nw-art-icon { width: 64px; height: 64px; }
  .nw-hero-img { padding-bottom: 20px; }
  .nw-hero-img img { border-radius: 16px; }
  .nw-preview { order: -3; }
  .nw-crumbs { order: -1; margin-bottom: 12px; }
  .nw-read { padding-top: 22px; }
  .nw-body { font-size: 1.05rem; }
  .nw-body > p:first-child { font-size: 1.12rem; }
  .nw-stat-row, .nw-stat-row.n2 { grid-template-columns: minmax(0, 1fr); }
  .nw-stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
  .nw-todo { padding: 18px; }
  .nw-tldr { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-card, .nw-card:hover { transition: none; transform: none; }
}
@media print {
  .lp-header, .nw-cta, .nw-related, .lp-footer, .nw-share, .nw-progress, .nw-art-lg, .nw-hero-img { display: none; }
  .nw-ahead-inner { grid-template-columns: minmax(0, 1fr); }
  .nw-faq details > p { display: block; }
}