/* Komani Newsroom 31.0: final compact masthead and narrower single-article
   reading column. The established homepage, ads and footer remain untouched. */

/* CNN-reference masthead: a quiet 49px row with a smaller independent
   Komani wordmark and lighter, more even navigation typography. */
@media (min-width: 1061px) {
  body .site-header .header-inner.container-wide {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 49px !important;
    min-height: 49px !important;
    column-gap: clamp(16px, 1.25vw, 23px) !important;
    border-bottom: 2px solid #111 !important;
  }
  body .site-header .header-inner .header-logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 153px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body .site-header .header-inner .header-logo .kn-header-brand {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
    max-width: 153px !important;
  }
  body .site-header .header-inner .header-logo .kn-brand-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 153px !important;
    max-height: 21px !important;
    object-fit: contain !important;
  }
  body .site-header .header-inner .header-nav {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  body .site-header .header-inner .header-nav .main-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(17px, 1.42vw, 27px) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body .site-header .header-inner .header-nav .main-menu a {
    display: block !important;
    padding: 10px 0 !important;
    color: #111 !important;
    font: 600 15.5px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.014em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  body .site-header .header-inner .header-nav .main-menu a:hover,
  body .site-header .header-inner .header-nav .main-menu a:focus-visible {
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }
  body .site-header .header-inner .header-tools {
    gap: 13px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  body .site-header .header-inner .header-tools .search-toggle {
    width: 27px !important;
    flex-basis: 27px !important;
    height: 30px !important;
  }
  body .site-header .header-inner .header-tools .search-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }
  body .site-header .header-inner .header-tools .header-advertise {
    font: 600 12.5px/1.2 Arial, Helvetica, sans-serif !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 13px !important;
    border-radius: 10px !important;
  }
}

/* Preserve as many real menu labels as will fit on mid-size laptops. */
@media (min-width: 1061px) and (max-width: 1280px) {
  body .site-header .header-inner.container-wide {column-gap: 13px !important;}
  body .site-header .header-inner .header-logo,
  body .site-header .header-inner .header-logo .kn-header-brand,
  body .site-header .header-inner .header-logo .kn-brand-image {
    max-width: 136px !important;
  }
  body .site-header .header-inner .header-logo .kn-brand-image {max-height: 19px !important;}
  body .site-header .header-inner .header-nav .main-menu {gap: 13px !important;}
  body .site-header .header-inner .header-nav .main-menu a {font-size: 13.5px !important;}
  body .site-header .header-inner .header-tools {gap: 8px !important;}
  body .site-header .header-inner .header-tools .header-advertise {font-size: 11.5px !important;padding-inline: 9px !important;}
}

/* On phones retain the usable single-row controls but scale the logo to a
   genuine mobile wordmark, rather than forcing desktop dimensions. */
@media (max-width: 760px) {
  body .site-header .header-inner .header-logo,
  body .site-header .header-inner .header-logo .kn-header-brand,
  body .site-header .header-inner .header-logo .kn-brand-image {
    max-width: 128px !important;
  }
  body .site-header .header-inner .header-logo .kn-brand-image {
    max-height: 19px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Article story copy stays offset to the right beneath the WIDE photograph,
   but is set to a calmer, narrower reading measure (~730px desktop). */
@media (min-width: 1201px) {
  body.kn-single-post main.single-page .article-columns {
    grid-template-columns: minmax(0, clamp(280px, 22.5vw, 405px)) minmax(0, 735px) !important;
    column-gap: 34px !important;
    width: 100% !important;
    max-width: 1174px !important;
  }
}
@media (min-width: 761px) {
  body.kn-single-post main.single-page .article-columns > .article-content-column,
  body.kn-single-post main.single-page .article-content,
  body.kn-single-post main.single-page .article-columns > .article-sidebar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 735px !important;
  }
  body.kn-single-post main.single-page .article-feature figcaption {
    max-width: 735px !important;
  }
}
@media (min-width: 761px) and (max-width: 1200px) {
  body.kn-single-post main.single-page .article-columns {
    grid-template-columns: minmax(0, 24%) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 1120px !important;
  }
}
/* Under the tablet breakpoint, the existing one-column reading layout and
   mobile ad widths continue unchanged. */

/* The primary story photograph was overpowering the editorial copy on laptops.
   Keep the existing wide media canvas for alignment, but render the photograph
   at about three quarters of its former width, right-aligned above the story
   reading column. This also scales its natural height without cropping. */
@media (min-width: 1024px) {
  body.kn-single-post main.single-page .article-media-row > .article-feature {
    box-sizing: border-box !important;
    display: block !important;
    width: 75% !important;
    max-width: 900px !important;
    margin: 0 0 0 auto !important;
  }
  body.kn-single-post main.single-page .article-media-row .article-hero-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  body.kn-single-post main.single-page .article-media-row .article-feature figcaption {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 735px !important;
    margin: 10px 0 0 auto !important;
    padding: 0 !important;
  }
}
/* Tablet and phones: no photo shrink and no resulting horizontal shift. */
@media (max-width: 1023px) {
  body.kn-single-post main.single-page .article-media-row > .article-feature {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Compact intermediate-width masthead too: tablets and smaller laptops
   previously kept the 52px row and oversized 170px logo. */
@media (min-width: 761px) and (max-width: 1060px) {
  body .site-header .header-inner.container-wide {
    height: 49px !important;
    min-height: 49px !important;
    align-items: center !important;
  }
  body .site-header .header-inner .header-logo,
  body .site-header .header-inner .header-logo .kn-header-brand,
  body .site-header .header-inner .header-logo .kn-brand-image {
    max-width: 153px !important;
  }
  body .site-header .header-inner .header-logo .kn-brand-image {
    max-height: 21px !important;
    width: auto !important;
    height: auto !important;
  }
}