:root{
  --accent:#0b57d0;
  --accent-dark:#083f96;
  --bg:#f4f5f7;
  --card:#ffffff;
  --ink:#1b1c1e;
  --muted:#5f6368;
  --line:#e6e8eb;
  --tag:#1a56db;
}
*{box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);margin:0;color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:0 12px}
article{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;padding:16px 0}

.logo{display:inline-block;font-size:22px;font-weight:600;color:var(--ink);padding:6px 0;margin:4px 0 10px}
.logo span{background:var(--accent);color:#fff;padding:3px 9px;border-radius:6px;margin-right:2px}
.logo:hover{text-decoration:none}

/* columns */
aside{flex:0 0 190px;order:1}
.feed{flex:1 1 520px;order:2;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.right{flex:0 0 210px;order:3}

h1{
  margin:0;padding:18px 20px 14px;font-size:21px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}

/* news rows */
.news{
  display:flex;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);
  transition:background .12s;
}
.news:last-child{border-bottom:none}
.news:hover{background:#fafbfc}
.news .time{
  flex:0 0 46px;font-size:11px;color:var(--muted);line-height:1.35;padding-top:2px;
}
.news .body{flex:1}
.news .body a.headline{font-size:15px;color:var(--ink);font-weight:500}
.news .body a.headline:hover{color:var(--accent)}
.news .src{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.news .src a{color:var(--muted)}

/* page text block (below feed) */
.pagetext{
  padding:18px 20px 22px;border-top:1px solid var(--line);
  font-size:14px;color:#33363b;line-height:1.65;background:#fcfcfd;
}
.pagetext p{margin:0 0 10px}
.pagetext p:last-child{margin-bottom:0}
.pagetext h2,.pagetext h3{font-size:15px;margin:14px 0 6px;color:var(--ink)}
.pagetext ul,.pagetext ol{margin:8px 0;padding-left:20px}
.pagetext table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13px}
.pagetext td,.pagetext th{border:1px solid var(--line);padding:6px 9px;text-align:left}

/* info page content */
.content{padding:18px 20px;font-size:14px;line-height:1.7;color:#33363b}
.content p{margin:0 0 12px}

/* left nav */
.navigation ul{list-style:none;margin:0;padding:6px 0}
.navigation li{margin:0}
.navigation a{
  display:block;padding:7px 10px;border-radius:8px;color:var(--ink);font-size:14px;
}
.navigation a:hover{background:#eaeef6;color:var(--accent);text-decoration:none}

/* right tags */
.right p.rt{margin:6px 0 8px;padding:0 4px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a{
  font-size:12.5px;color:var(--tag);background:#eef2fb;padding:4px 9px;border-radius:20px;
  white-space:nowrap;
}
.tags a:hover{background:#e0e8f9;text-decoration:none}

/* footer */
footer{border-top:1px solid var(--line);margin-top:6px;padding:18px 0 26px;background:var(--card)}
footer ul{list-style:none;margin:0;padding:0;text-align:center}
footer li{display:inline-block;margin:0 10px}
footer a{color:var(--muted);font-size:13px}
footer .copy{text-align:center;color:#9aa0a6;font-size:12px;margin-top:10px}

header{display:none}

@media(max-width:900px){
  aside{flex-basis:100%;order:1}
  .feed{flex-basis:100%;order:2}
  .right{flex-basis:100%;order:3}
  .navigation ul{display:flex;flex-wrap:wrap;gap:4px}
  .navigation a{padding:6px 10px}
}
@media(max-width:640px){
  header{display:block;background:var(--card);border-bottom:1px solid var(--line);padding:6px 12px;margin-bottom:8px}
  aside .logo{display:none}
  h1{font-size:19px}
}