/* ==========================================================================
   Newsroom articles on paper (/news/<slug>/ + /en/ + /nl-be/, 2026-10-11)
   Article layer on top of newsroom-paper.css: same watercolour-and-ink world as
   the homepage and the Newsroom landing. news.css keeps the article structure
   (grid, rail, sticky TOC, block layouts); this sheet re-inks every article block
   for paper. Scope: body.news-page--article. Generated by news/src/render.mjs
   (renderArticle). Design: docs/design-newsroom-v27.md.
   ========================================================================== */

.news-page--article .article-progress { background: rgba(7, 8, 63, .06); }
.news-page--article .article-progress i { box-shadow: none; }

.news-page--article .news-article { padding-block: clamp(44px, 4.6vw, 80px) clamp(40px, 5vw, 80px); }

/* ---------- Header ---------- */

.news-page--article .article-header { max-width: 1120px; }

.news-page--article .article-breadcrumb {
  margin-bottom: 34px;
  color: var(--nh-muted);
  font-size: 13px;
  font-weight: 500;
}

.news-page--article .article-breadcrumb a { color: var(--nh-ink-soft); }
.news-page--article .article-breadcrumb a:hover { color: var(--nh-link); }

.news-page--article .article-header__meta,
.news-page--article .article-header__details {
  color: var(--nh-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}

.news-page--article .article-header__meta a {
  color: #3e4378;
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
  text-transform: uppercase;
}

.news-page--article .article-header__meta a:hover { color: var(--nh-link); }

.news-page--paper .news-badge {
  border: 0;
  color: var(--nh-ink);
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
  font-size: 11px;
  letter-spacing: .1em;
}

.news-page--article .article-header h1 {
  max-width: 1080px;
  margin: 24px auto 0;
  color: var(--nh-ink);
  font-family: var(--cb-display-font);
  font-size: var(--cb-title-hero);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.news-page--article .article-header h1 em {
  display: block;
  font-style: normal;
  background: var(--nh-accent-on-paper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.news-page--article .article-header__subtitle {
  margin-top: 26px;
  color: var(--nh-ink);
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 400;
  letter-spacing: -.015em;
}

.news-page--article .article-header__excerpt {
  max-width: 820px;
  color: var(--nh-ink-soft);
  font-size: calc(var(--cb-lead-section) * .72);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
}

.news-page--article .article-header__details { margin-top: 26px; }

/* Share, save and print: paper chips. */
.news-page--article .article-share a,
.news-page--article .article-share button,
.news-page--article .article-header__tools > button {
  border: 1px solid var(--nh-line);
  color: var(--nh-ink-soft);
  background: var(--nh-card);
  font-size: 12px;
}

.news-page--article .article-header__tools > button { min-height: 40px; padding: 8px 15px; font-weight: 600; }

.news-page--article .article-share a:hover,
.news-page--article .article-share button:hover,
.news-page--article .article-header__tools > button:hover {
  border-color: rgba(47, 67, 184, .35);
  color: var(--nh-link);
  background: #fff;
}

.news-page--article .article-header__products li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: var(--nh-ink-soft);
  background: var(--nh-card);
  box-shadow: inset 0 0 0 1px var(--nh-line);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
}

.news-page--article .article-header__products li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--product-accent, #567eff);
}

/* ---------- Hero visuals ---------- */

.news-page--article .article-hero {
  display: block;
  min-height: 0;
  overflow: visible;
  margin: clamp(48px, 5vw, 84px) auto clamp(64px, 7vw, 112px);
  border: 0;
  background: none;
  box-shadow: none;
}

/* Flagship: the illustrated "À la une" scene of the Newsroom landing. */
.news-page--article .article-hero--scene { width: min(940px, 100%); }

/* Imported Neoo articles: their line art in ink on a deckled watercolour wash. */
.news-page--article .article-hero--art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(1040px, 100%);
  min-height: clamp(300px, 30vw, 440px);
}

.news-page--article .article-hero--art .article-hero__grid {
  position: absolute;
  inset: -2% 4%;
  background:
    radial-gradient(ellipse 46% 52% at 38% 44%, rgba(86, 126, 255, .2), transparent 72%),
    radial-gradient(ellipse 40% 46% at 66% 60%, rgba(103, 224, 185, .22), transparent 72%),
    radial-gradient(ellipse 60% 60% at 52% 50%, rgba(222, 186, 120, .26), transparent 76%);
  background-size: auto;
  -webkit-mask: url("/assets/home/home-v27/bloom-mask-20261011.png") center / 100% 100% no-repeat;
  mask: url("/assets/home/home-v27/bloom-mask-20261011.png") center / 100% 100% no-repeat;
}

.news-page--article .article-hero--art .news-art {
  width: min(440px, 68%);
  color: #2f43b8;
  stroke-width: 1.7;
  filter: none;
  opacity: .86;
}

.news-page--article .article-hero > b,
.news-page--article .article-hero--art > b {
  bottom: 8%;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--nh-ink);
  background: rgba(255, 253, 249, .92);
  box-shadow: var(--nh-shadow-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

/* Neoo films: the player framed on paper. */
.news-page--article .article-video__frame {
  border: 0;
  border-radius: 22px;
  background: #10173d;
  box-shadow: var(--nh-shadow);
}

.news-page--article .article-video figcaption { color: var(--nh-muted); font-weight: 500; }

.news-page--article .article-video-chapters header p { color: var(--nh-muted); }

.news-page--article .article-video-chapters button {
  border: 1px solid var(--nh-line);
  color: var(--nh-ink);
  background: var(--nh-card);
  box-shadow: 0 1px 2px rgba(61, 44, 14, .05);
}

.news-page--article .article-video-chapters button:hover { border-color: rgba(47, 67, 184, .3); background: #fff; }
.news-page--article .article-video-chapters button:focus-visible { outline-color: var(--nh-focus); }

.news-page--article .article-video-chapters button[aria-current="true"] {
  border-color: rgba(47, 67, 184, .45);
  background: linear-gradient(135deg, rgba(86, 126, 255, .1), rgba(103, 224, 185, .1)), #fff;
}

.news-page--article .article-video-chapters__time { color: var(--nh-link); }

/* ---------- Reading layout ---------- */

.news-page--article .article-layout__rail > .article-share { border-top-color: var(--nh-line); }
.news-page--article .article-toc { border-left-color: var(--nh-line); }
.news-page--article .article-toc__toggle { min-height: 32px; color: var(--nh-ink); font-size: 13px; font-weight: 600; }

.news-page--article .article-toc a {
  color: var(--nh-muted);
  font-size: 13px;
  font-weight: 500;
}

.news-page--article .article-toc a:hover,
.news-page--article .article-toc a.is-active {
  color: var(--nh-ink);
  background: rgba(86, 126, 255, .09);
}

.news-page--article .article-toc a.is-active { box-shadow: inset 2px 0 0 #567eff; }

.news-page--article .article-body {
  color: var(--nh-ink-soft);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.75;
}

.news-page--article .article-introduction {
  margin-bottom: 88px;
  border-left-color: rgba(86, 126, 255, .45);
  color: var(--nh-ink);
  font-size: clamp(22px, 1.9vw, 29px);
}

.news-page--article .article-chapter { margin-block: 96px; }

.news-page--article .article-chapter__index {
  top: -6px;
  background: var(--nh-accent-on-paper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--cb-display-font);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -.04em;
}

.news-page--article .article-chapter h2,
.news-page--article .article-comparison > h2,
.news-page--article .article-progression > h2,
.news-page--article .article-faq > h2 { color: var(--nh-ink); }

.news-page--article .article-chapter--rich h3,
.news-page--article .article-steps strong,
.news-page--article .article-faq__item h3 { color: var(--nh-ink); }

.news-page--article .article-chapter p a,
.news-page--article .article-list a,
.news-page--article .article-takeaways a,
.news-page--article .article-faq a,
.news-page--article .article-note a,
.news-page--article .article-quote a,
.news-page--article .article-steps a,
.news-page--article .article-end-cta p a {
  color: var(--nh-link);
  text-decoration-color: rgba(47, 67, 184, .35);
}

.news-page--article .article-chapter p a:hover,
.news-page--article .article-list a:hover,
.news-page--article .article-takeaways a:hover,
.news-page--article .article-faq a:hover,
.news-page--article .article-note a:hover,
.news-page--article .article-quote a:hover,
.news-page--article .article-steps a:hover,
.news-page--article .article-end-cta p a:hover {
  color: var(--nh-ink);
  text-decoration-color: currentColor;
}

.news-page--article ul.article-list > li::before { background: var(--cb-accent-gradient); box-shadow: none; }
.news-page--article ol.article-list > li::before { border-color: rgba(47, 67, 184, .35); color: var(--nh-link); }

.news-page--article .article-quote { border-left-color: rgba(86, 126, 255, .45); }
.news-page--article .article-chapter .article-quote p { color: var(--nh-ink); }

/* ---------- Content blocks: paper cards ---------- */

.news-page--article .article-takeaways {
  border: 0;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0, rgba(103, 224, 185, .16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0 100%, rgba(86, 126, 255, .1), transparent 70%),
    var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-takeaways h2,
.news-page--article .article-video-chapters h2 {
  color: #3e4378;
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
}

.news-page--article .article-takeaways li { color: var(--nh-ink); }
.news-page--article .article-takeaways li::before { box-shadow: none; }

.news-page--article .article-steps > li {
  border: 0;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-steps > li > span {
  border: 0;
  color: var(--nh-link);
  background: rgba(86, 126, 255, .1);
  font-family: var(--cb-display-font);
  font-weight: 600;
}

.news-page--article .article-chapter .article-steps p,
.news-page--article .article-chapter .article-note p,
.news-page--article .article-faq__item p { color: var(--nh-ink-soft); }

.news-page--article .article-note {
  border: 1px solid rgba(86, 126, 255, .22);
  background: radial-gradient(ellipse 70% 80% at 100% 0, rgba(86, 126, 255, .1), transparent 70%), var(--nh-card);
}

.news-page--article .article-chapter .article-note .article-note__title { color: #3249c7; }

.news-page--article .article-faq__item,
.news-page--article .article-faq__item:last-child { border-color: var(--nh-line); }

.news-page--article .article-domain-evolution {
  border: 0;
  background:
    radial-gradient(ellipse 50% 70% at 70% 40%, rgba(86, 126, 255, .14), transparent 72%),
    radial-gradient(ellipse 40% 60% at 25% 70%, rgba(103, 224, 185, .14), transparent 72%),
    var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-domain-evolution span { color: #8c8fa6; }
.news-page--article .article-domain-evolution i { color: var(--nh-link); }
.news-page--article .article-domain-evolution figcaption { color: var(--nh-muted); }
.news-page--article .article-domain-evolution figcaption b { color: var(--nh-ink); }

.news-page--article .article-workflow,
.news-page--article .article-ecosystem {
  border: 0;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-workflow figcaption,
.news-page--article .article-ecosystem > figcaption { color: var(--nh-ink); }

.news-page--article .article-workflow li span {
  border-color: rgba(86, 126, 255, .35);
  color: var(--nh-link);
  background: #fff;
  font-family: var(--cb-display-font);
  font-size: 13px;
  font-weight: 600;
}

.news-page--article .article-workflow li b { color: var(--nh-ink-soft); font-size: 13px; font-weight: 600; }

.news-page--article .article-comparison { border-color: var(--nh-line); }

.news-page--article .article-comparison article {
  border: 0;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-comparison article:last-child {
  background: radial-gradient(ellipse 80% 80% at 100% 0, rgba(103, 224, 185, .2), transparent 70%), var(--nh-card);
  box-shadow: var(--nh-shadow-soft), inset 0 0 0 1px rgba(29, 143, 85, .2);
}

.news-page--article .article-comparison h3 { color: var(--nh-ink); }
.news-page--article .article-comparison ul { color: var(--nh-ink-soft); font-size: 16px; }
.news-page--article .article-comparison article:first-child li::before { color: #8c8fa6; }
.news-page--article .article-comparison article:last-child li::before { color: var(--nh-ok); }

.news-page--article .article-ecosystem__layers section {
  border: 1px solid var(--nh-line);
  background: linear-gradient(180deg, rgba(86, 126, 255, calc(.14 - var(--layer) * .02)), rgba(255, 253, 249, 0) 70%), #fbf6ec;
}

.news-page--article .article-ecosystem__layers h3 { color: var(--nh-ink); }
.news-page--article .article-ecosystem__layers ul { color: var(--nh-ink-soft); font-size: 13px; }

.news-page--article .article-progression > ol > li {
  border-color: var(--nh-line);
  background: linear-gradient(180deg, rgba(86, 126, 255, calc(.12 - var(--step) * .025)), rgba(255, 253, 249, 0) 70%), var(--nh-card);
}

.news-page--article .article-progression > ol > li > span { color: var(--nh-link); font-family: var(--cb-display-font); font-size: 13px; font-weight: 600; }
.news-page--article .article-progression h3 { color: var(--nh-ink); }
.news-page--article .article-progression p { color: var(--nh-ink-soft); }
.news-page--article .article-progression ul li { border-color: var(--nh-line); color: var(--nh-ink-soft); background: rgba(255, 253, 249, .8); font-size: 11.5px; }

/* End call inside the article body: the film's blue wash. */
.news-page--article .article-end-cta {
  position: relative;
  border: 0;
  background:
    radial-gradient(ellipse 55% 65% at 18% 25%, rgba(86, 126, 255, .16), transparent 72%),
    radial-gradient(ellipse 45% 60% at 85% 80%, rgba(103, 224, 185, .16), transparent 72%),
    var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.news-page--article .article-end-cta .news-eyebrow { color: #3e4378; }
.news-page--article .article-end-cta h2 { color: var(--nh-ink); }
.news-page--article .article-end-cta > p:not(.news-eyebrow) { color: var(--nh-ink-soft); }

.news-page--article .news-button--primary {
  color: #fff;
  background: var(--nh-accent-button);
  box-shadow: 0 14px 34px rgba(66, 140, 223, .3);
}

.news-page--article .news-button--ghost {
  border-color: rgba(7, 8, 63, .22);
  color: var(--nh-ink);
  background: rgba(255, 253, 249, .7);
}

.news-page--article .news-button--ghost:hover { border-color: rgba(47, 67, 184, .45); background: #fff; }

.news-page--article .article-author { border-top-color: var(--nh-line); }
.news-page--article .article-author img { border-color: var(--nh-line); box-shadow: var(--nh-shadow-soft); }
.news-page--article .article-author > div > p:first-child { color: #3e4378; font-size: 12px; letter-spacing: .08em; }
.news-page--article .article-author h2 { color: var(--nh-ink); }
.news-page--article .article-author span { color: var(--nh-muted); font-size: 13px; }
.news-page--article .article-author > div > p:last-child { color: var(--nh-ink-soft); font-size: 15px; }

/* Related content: paper cards, no dark band. */
.news-page--article .article-related {
  border-top: 0;
  background: none;
  padding-top: clamp(40px, 5vw, 80px);
}

.news-page--article .article-related .nh-articles { margin-top: clamp(28px, 3vw, 44px); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .news-page--article .article-toc-mobile {
    border-color: var(--nh-line);
    background: var(--nh-card);
    box-shadow: var(--nh-shadow-soft);
  }

  .news-page--article .article-toc-mobile > summary { min-height: 32px; color: var(--nh-ink); }
}

@media (max-width: 760px) {
  .news-page--article .article-header h1 { font-size: calc(var(--cb-title-hero) * .82); }
  .news-page--article .article-header__excerpt { font-size: calc(var(--cb-lead-section) * .88); }
  .news-page--article .article-hero { margin-block: 40px 64px; }
  .news-page--article .article-hero--art { min-height: 260px; }
  .news-page--article .article-hero--art .news-art { width: 76%; }
  .news-page--article .article-chapter { margin-block: 80px; }
}

@media (forced-colors: active) {
  .news-page--article .article-header h1 em,
  .news-page--article .article-chapter__index {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}

@media print {
  .news-page--article .article-related,
  .news-page--article .nh-final { display: none; }
  .news-page--article .article-header h1 em { color: #111; -webkit-text-fill-color: #111; background: none; }
}