/* Komani Newsroom 6.0: refinement for the supplied CNN reference screenshots.
 * Original CSS and implementation, with Komani News branding. */
:root{--kn-nav-gap:clamp(20px,1.63vw,32px)}
/* AIRIER MASTHEAD: the navigation is a spaced horizontal newspaper menu. */
.header-inner{gap:clamp(20px,1.6vw,31px)}
.header-logo{max-width:92px}
.header-logo .custom-logo,.header-logo .custom-logo-link img{max-height:27px!important;max-width:93px!important}
.header-nav{flex:1 1 auto;min-width:0;overflow:hidden}
.main-menu{gap:var(--kn-nav-gap);justify-content:flex-start;align-items:center;margin:0;padding:0}
.main-menu>li{flex-shrink:0}
.main-menu a{font-size:clamp(14px,1.0vw,18px);font-weight:600;letter-spacing:-.012em;padding:8px 0;line-height:1.15}
.header-current-section{font-weight:700;font-size:19px;margin-left:-17px;letter-spacing:-.02em}
.header-tools{gap:19px}
.header-advertise{font-weight:600;font-size:13px}
/* More slim, single-line links without breaking the masthead or the lead grid. */
.news-trends{min-height:99px;padding:22px 0 25px;font-size:clamp(15px,1.05vw,19px);font-weight:400;letter-spacing:-.008em;gap:0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#dedede transparent}
.news-trends a{flex:0 0 auto;scroll-snap-align:start;max-width:310px;padding:0 16px;border-right:1.5px solid #bcbcbc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.16}
.news-trends a:first-child{padding-left:0}
.news-trends a:last-child{border-right:0}
.news-trends a:hover{text-decoration:underline;text-underline-offset:4px}
.news-trends:focus-within{scrollbar-color:#a3a3a3 transparent}
/* Article typography: strong but not extra-black, with more natural glyph spacing. */
.kn-single-post .article-title,.kn-stream-item .article-title{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(43px,3.86vw,70px);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.028em;
  text-wrap:pretty;
  margin-bottom:27px;
}
.kn-single-post .article-taxonomy,.kn-stream-item .article-taxonomy{margin-bottom:25px;letter-spacing:.02em}
.kn-single-post .article-heading,.kn-stream-item .article-heading{margin-bottom:35px}
.kn-single-post .article-timestamp,.kn-stream-item .article-timestamp{font-size:13px;font-weight:400;letter-spacing:0;margin-bottom:24px;gap:8px}
.article-date-chevron{font-size:15px;color:#444}
.kn-single-post .article-byline,.kn-stream-item .article-byline{min-height:34px;gap:16px;font-size:16px}
.byline-authors{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.byline-authors strong{font-weight:600}
.byline-authors strong a{font-weight:600}
.article-author-avatar{width:31px;height:31px;object-fit:cover;border-radius:50%;display:inline-block}
/* CNN-like image row: share rail at left, photo beginning ~425px to the right. */
.kn-single-post .article-media-row,.kn-stream-item .article-media-row{grid-template-columns:minmax(260px,390px) minmax(0,820px);gap:34px;max-width:1244px;margin:33px 0 37px 59px}
.kn-single-post .article-media-share,.kn-stream-item .article-media-share{gap:10px;flex-wrap:wrap}
.article-media-share a,.article-media-share button{width:42px;height:40px;border-color:#e0e0e0;border-radius:5px;font-size:17px;font-weight:600}
.kn-single-post .article-feature img.article-hero-image,.kn-stream-item .article-feature img.article-hero-image{border-radius:7px;max-height:none;object-fit:contain}
/* Other headings do not need exaggerated boldness either. */
.story-cover-lead>.story-title{font-weight:700;letter-spacing:-.03em;line-height:1.06}
.lead-image-deck{font-weight:700}
/* Preserve the ability to see the menu at laptop widths without crunching gaps to 12px. */
@media(max-width:1510px){
  :root{--kn-nav-gap:clamp(15px,1.25vw,23px)}
  .header-inner{gap:18px}
  .main-menu a{font-size:14px}
}
@media(max-width:1190px){
  .header-nav{display:none}
  .header-current-section{margin-left:0}
  .header-tools{margin-left:auto}
}
@media(min-width:1191px) and (max-width:1350px){
  .kn-single-post .article-media-row,.kn-stream-item .article-media-row{grid-template-columns:minmax(180px,260px) minmax(0,1fr)}
}
@media(max-width:1190px){
  .kn-single-post .article-media-row,.kn-stream-item .article-media-row{grid-template-columns:minmax(100px,195px) minmax(0,1fr);max-width:100%;gap:24px}
}
@media(max-width:720px){
  .header-inner{gap:14px}
  .news-trends{min-height:65px;padding:16px 0;font-size:14px}
  .news-trends a{padding:0 13px;max-width:250px}
  .kn-single-post .article-title,.kn-stream-item .article-title{font-size:clamp(34px,7.9vw,52px);font-weight:700;line-height:1.13;letter-spacing:-.028em;margin-bottom:22px}
  .kn-single-post .article-heading,.kn-stream-item .article-heading{margin-bottom:25px}
  .kn-single-post .article-taxonomy,.kn-stream-item .article-taxonomy{margin-bottom:17px}
  .kn-single-post .article-timestamp,.kn-stream-item .article-timestamp{margin-bottom:16px}
  .kn-single-post .article-media-row,.kn-stream-item .article-media-row{display:flex;flex-direction:column-reverse;gap:17px;margin:0 0 28px 0;max-width:100%}
  .kn-single-post .article-media-share,.kn-stream-item .article-media-share{flex-direction:row;gap:8px}
  .article-media-share a,.article-media-share button{height:39px;width:40px}
}
