/* Komani Newsroom 29.0: one narrower editorial canvas for all site regions.
 * Reference: 25 October 2026 CNN screenshots (approx. 1650px of story content
 * in a large desktop viewport). Preserve the newspaper column proportions.
 * The dark footer backdrop and advertisements are allowed full-bleed backgrounds;
 * the actual footer/header/navigation/editorial contents share this grid.
 */
:root {
  --kn-editorial-canvas: 1650px;
  --kn-editorial-gutter: clamp(28px, 5vw, 90px);
}
@media (min-width: 761px) {
  /* Do not let individual sections drift out to the former 1760px canvas. */
  body .header-inner.container-wide,
  body .header-search .container-wide,
  body .breaking-bar .container-wide,
  body.home main.homepage.container-wide,
  body.blog main.homepage.container-wide,
  body main.archive-page.container-wide,
  body main.kn-editorial-archive.container-wide,
  body.kn-single-post main.single-page.container-wide,
  body .site-footer.kn-cnn-footer .container-wide,
  body .kn-ad-header,
  body .kn-ad-footer {
    box-sizing: border-box !important;
    width: min(calc(100% - (var(--kn-editorial-gutter) * 2)), var(--kn-editorial-canvas)) !important;
    max-width: var(--kn-editorial-canvas) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .header-inner.container-wide,
  body .header-search .container-wide,
  body .breaking-bar .container-wide,
  body.home main.homepage.container-wide,
  body.blog main.homepage.container-wide,
  body main.archive-page.container-wide,
  body main.kn-editorial-archive.container-wide,
  body.kn-single-post main.single-page.container-wide,
  body .site-footer.kn-cnn-footer .container-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Keep the strip, headline rails, and article title on the same canvas. */
  body.home main.homepage .news-trends,
  body.blog main.homepage .news-trends,
  body.home main.homepage .front-hero,
  body.blog main.homepage .front-hero,
  body.home main.homepage .editorial-block,
  body.blog main.homepage .editorial-block,
  body.home main.homepage .front-category,
  body.blog main.homepage .front-category {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.kn-single-post main.single-page .article-heading,
  body.kn-single-post main.single-page .article-title,
  body.kn-single-post main.single-page .kn-endcap {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Prevent the mobile site from inheriting wide desktop gutters. */
@media (max-width: 760px) {
  :root { --kn-editorial-gutter: 16px; }
}
@media (max-width: 760px) {
  /* On phones, keep the masthead divider in line with the article/news/footer
   * edges instead of allowing a three-pixel mismatch from older CSS. */
  body .site-header .header-inner.container-wide {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}