:root{
  --bg:#f5f6f8;
  --paper:#ffffff;
  --paper-alt:#f7f7f9;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#C4151C;
  --link:#1d4ed8;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--link);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}

header.top{position:sticky;top:0;background:#fff;border-bottom:2px solid var(--brand);z-index:20}
.top-wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:white;font-weight:800}
.brand h1{font-size:18px;margin:0;font-weight:800;letter-spacing:.3px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.pill.active{border-color:var(--brand)}
.search{display:flex;gap:8px;align-items:center}
.search input{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);min-width:220px}
.search button{background:var(--brand);border:none;border-radius:10px;padding:10px 14px;color:#fff;font-weight:700}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.select,.input{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 12px}

.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.col{display:flex;flex-direction:column;gap:16px}

.hero{background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.hero-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:0}
.hero .thumb{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.hero .content{padding:18px}
.kicker{color:var(--brand); font-weight:800; text-transform:uppercase; letter-spacing:.4px; font-size:12px}
.hero .title{font-weight:800; font-size:28px; line-height:1.15; margin:6px 0 8px}
.hero .summary{font-size:16px; color:#374151; margin:8px 0 16px}
.meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.meta .dot{width:4px;height:4px;background:#9ca3af;border-radius:50%}

.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 10px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer}

.section{border:1px solid var(--line); border-radius:16px; overflow:hidden}
.section.alt{background:var(--paper-alt)}
.section .section-header{background:var(--brand); color:#fff; padding:8px 12px; display:flex; align-items:center}
.section .section-header h2{font-size:16px; margin:0; font-weight:800}
.section .inner{padding:12px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .14s ease}
.card:hover{transform:translateY(-2px)}
.thumb{aspect-ratio:16/9;background:#eef0f3;object-fit:cover;width:100%}
.content{padding:12px 12px 10px}
.title{font-weight:800;font-size:16px;line-height:1.25;margin:6px 0 8px}
.summary{font-size:14px;color:#374151;line-height:1.45;margin:10px 0}
.source{font-size:12px;color:#6b7280}
.card.featured{grid-column:span 2}
.card.featured .title{font-size:20px}

.read .cover{width:100%; max-height:520px; object-fit:cover; border-radius:14px; border:1px solid var(--line)}
.read h1{font-size:28px; margin:12px 0 8px; font-weight:800}

.foot{margin:40px 0 20px;color:#6b7280;font-size:13px}

@media (max-width: 1000px){
  .grid{grid-template-columns:1fr}
  .hero-wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .card.featured{grid-column:span 2}
  .aside .cards{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .cards{grid-template-columns:1fr}
  .search input{min-width:0;width:100%}
}