body{
 font-family:Georgia, serif;
 background:#eef2f7;
 margin:0;
 color:#1e2933;
 overflow-x:hidden;
}

*{
 box-sizing:border-box;
}

img{
 max-width:100%;
 display:block;
}

.container{
 max-width:900px;
 margin:auto;
 padding:20px;
}

header{
 background:white;
 border-bottom:2px solid #d7e0ea;
}

.site{
 font-size:26px;
 font-weight:700;
 text-decoration:none;
 color:#1e2933;
}

.breadcrumbs{
 font-size:13px;
 color:#667;
 margin-top:6px;
}

.breadcrumbs a{
 color:#1e2933;
 text-decoration:none;
}

.breadcrumbs a:hover{
 color:#1a73e8;
}

.breadcrumbs span{
 color:#889;
}

.article{
 background:white;
 padding:24px;
 border:1px solid #e2e8f0;
 box-shadow:0 2px 6px rgba(0,0,0,0.05);
 overflow:hidden;
}

.article h1{
 font-size:30px;
 margin:0 0 10px 0;
 line-height:1.3;
 word-wrap:break-word;
 overflow-wrap:break-word;
}

.meta{
 font-size:13px;
 color:#777;
 margin-bottom:16px;
}

.article-content{
 font-size:17px;
 line-height:1.7;
 min-width:0;
}

.article-content a{
 color:#1e2933;
 text-decoration:underline;
 text-decoration-color:#cbd5e1;
 transition:all 0.2s ease;
}

.article-content a:hover{
 color:#1a73e8;
 text-decoration-color:#1a73e8;
}

.streamShell{
 display:flex;
 gap:20px;
 align-items:flex-start;
 width:100%;
 min-width:0;
}

.streamVisual{
 flex:0 0 220px;
 max-width:220px;
 width:220px;
 margin:0;
 overflow:hidden;
 border-radius:4px;
}

.streamVisual img{
 width:100%;
 max-width:100%;
 height:auto;
 object-fit:cover;
 border-radius:4px;
}

.streamCopy{
 flex:1;
 min-width:0;
}

.streamLine a{
 color:#1e2933;
 text-decoration:underline;
 text-decoration-color:#cbd5e1;
 transition:all 0.2s ease;
}

.streamLine a:hover{
 color:#1a73e8;
 text-decoration-color:#1a73e8;
}

footer{
 text-align:center;
 padding:20px;
 font-size:13px;
 color:#666;
}

@media (max-width:800px){

.container{
 padding:14px;
}

.article{
 padding:16px;
}

.article h1{
 font-size:24px;
}

.streamShell{
 flex-direction:column;
 gap:14px;
}

.streamVisual{
 flex:none;
 width:100%;
 max-width:100%;
}

.streamVisual img{
 width:100%;
 max-width:100%;
 height:auto;
}

}

.related{
 background:white;
 border:1px solid #e2e8f0;
 margin-top:20px;
 padding:18px;
 box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.related h3{
 margin:0 0 14px 0;
 font-size:18px;
}

.related-item{
 display:flex;
 align-items:center;
 gap:10px;
 padding:10px 0;
 border-top:1px solid #eef2f7;
}

.related-item:first-child{
 border-top:none;
}

.related-item.nav{
 justify-content:space-between;
}

.nav-link{
 font-weight:600;
}

.related-link{
 text-decoration:none;
 color:#1e2933;
 font-size:14px;
}

.related-link:hover{
 color:#1a73e8;
}

/* BADGES */

.badge{
 font-size:11px;
 padding:3px 6px;
 border-radius:3px;
 font-weight:600;
 text-transform:uppercase;
}

.badge.live{
 background:#d93025;
 color:white;
}

.badge.breaking{
 background:#fbbc04;
 color:black;
}

.badge.updated{
 background:#34a853;
 color:white;
}

.trending{
 background:white;
 border:1px solid #e2e8f0;
 margin-bottom:20px;
 padding:14px;
 box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.trending-title{
 font-size:14px;
 font-weight:600;
 margin-bottom:10px;
 color:#d93025;
}

.trending-list{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

.trending-list a{
 font-size:13px;
 padding:5px 8px;
 background:#f1f5f9;
 border-radius:4px;
 text-decoration:none;
 color:#1e2933;
 border:1px solid #e2e8f0;
}

.trending-list a:hover{
 background:#e2e8f0;
}

.editors{
 background:white;
 border:1px solid #e2e8f0;
 margin-top:20px;
 padding:18px;
 box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.editors-list{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
}

.editors-list a{
 font-size:14px;
 text-decoration:none;
 color:#1e2933;
}

.editors-list a:hover{
 color:#1a73e8;
}

.main-image{
 margin:0 0 16px 0;
}

.main-image img{
 width:100%;
 max-width:100%;
 border-radius:4px;
 object-fit:cover;
}
