.top-articles{margin-bottom:2rem;border-bottom:2px solid var(--border);padding-bottom:2rem}.top-articles-header{font-size:.875rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;padding:0 1rem}.article-hero{position:relative;margin-bottom:1.5rem;border-radius:16px;overflow:hidden;background:var(--surface);transition:transform .2s ease}.article-hero:hover{transform:translateY(-2px)}.article-hero .article-img-wrap{height:240px;position:relative}.article-hero .article-img{width:100%;height:100%;object-fit:cover}.article-hero .article-body{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 70%,transparent 100%);color:#fff}[data-mode=dark] .article-hero .article-body{background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%)}.article-hero .article-title{font-size:28px;font-weight:700;line-height:1.4;margin-bottom:.5rem;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-hero .article-title a{color:#fff;text-decoration:none}.article-hero .article-title a:hover{color:var(--accent-hover, #93c5fd)}.article-hero .article-desc{font-size:16px;font-weight:500;line-height:1.5;color:#ffffffe6;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-hero .article-meta{font-size:12px;color:#ffffffb3}.article-hero .article-source{font-weight:600;color:var(--accent, #60a5fa)}.archive-articles{padding:0}.archive-articles-header{font-size:.875rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;padding:0 1rem}.article-list{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--border);transition:background-color .2s ease;cursor:pointer}.article-list:hover{background-color:#60a5fa0d}.article-list .article-img-wrap{flex-shrink:0;width:80px;height:80px;border-radius:8px;overflow:hidden;background:var(--surface)}.article-list .article-img{width:100%;height:100%;object-fit:cover}.article-list .article-img-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--muted);background:var(--surface)}.article-list .article-body{flex:1;min-width:0;display:flex;flex-direction:column}.article-list .article-title{font-size:17px;font-weight:600;line-height:1.6;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-list .article-title a{color:var(--text);text-decoration:none}.article-list .article-title a:hover{color:var(--accent)}.article-list .article-desc{font-size:14px;font-weight:400;line-height:1.5;color:#666;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[data-mode=dark] .article-list .article-desc{color:#999}.article-list .article-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:.5rem;margin-top:auto}.article-list .article-source{font-weight:600}.article-list .article-meta time{opacity:.7}@media(min-width:768px){.article-hero .article-img-wrap{height:320px}.article-hero .article-title{font-size:32px}.article-list{padding:1.25rem 1rem}.article-list .article-img-wrap{width:100px;height:100px}.article-list .article-title{font-size:18px}.article-list .article-desc{font-size:15px}}@media(min-width:1024px){.top-articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.article-hero .article-img-wrap{height:280px}}@media(max-width:480px){.article-hero .article-title{font-size:24px}.article-hero .article-desc{font-size:14px;-webkit-line-clamp:2}.article-list .article-img-wrap{width:64px;height:64px}.article-list .article-title{font-size:16px}.article-list .article-desc{font-size:13px}}.article-hero.read .article-title a,.article-list.read .article-title a{opacity:.6}.article-hero .img-failed .article-img-fallback,.article-list .img-failed .article-img-fallback{display:flex}.article-hero .img-failed img,.article-list .img-failed img{display:none}