* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; color: #333; background: #f5f6f8; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:hover { color: #D99A00; }
img { max-width: 100%; vertical-align: middle; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.topbar { background: #FFC644; color: #3B2E00; }
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.topbar .logo { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.20); text-decoration: none; }
.topbar .search { margin-left: auto; display: flex; }
.topbar .search input { width: 240px; height: 36px; border: 0; border-radius: 4px 0 0 4px; padding: 0 12px; font-size: 14px; }
.topbar .search button { height: 36px; border: 0; background: #3B2E00; color: #FFC644; padding: 0 18px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 14px; font-weight: 600; }

.navbar { background: #fff; border-bottom: 2px solid #FFC644; }
.navbar .wrap { display: flex; flex-wrap: wrap; gap: 4px; height: 46px; align-items: center; overflow: hidden; }
.navbar a { padding: 0 14px; font-size: 15px; line-height: 46px; color: #444; }
.navbar a:hover, .navbar a.on { color: #D99A00; font-weight: 600; }

.tagbar { background: #fff; border-bottom: 1px solid #eee; padding: 10px 0; }
.tagbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; max-height: 56px; overflow: hidden; }
.tagbar-label { flex-shrink: 0; font-size: 14px; font-weight: 600; color: #FFC644; padding-right: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; color: #4b5563; font-size: 15px; line-height: 26px; text-decoration: none; padding: 0 1px; background-color: transparent; border: 0; border-radius: 0;
  background-image: linear-gradient(#FFC644, #FFC644); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .2s ease, background-size .28s ease; }
.tag:hover { color: #D99A00; background-size: 100% 2px; }
.tag.on { color: #D99A00; font-weight: 600; background-size: 100% 2px; }
.tag em { font-style: normal; font-size: 11px; color: #aaa; }
.tag.on em { color: #ffe0dc; }
.tag:hover em { color: #d98b82; }

.main { padding: 20px 16px 64px; }
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main side";gap:22px;align-items:start}
.col-main{grid-area:main;min-width:0}
.col-side{grid-area:side;display:flex;flex-direction:column;gap:14px;min-width:0}
.col-carousel{min-width:0}
.col-hot{min-width:0}
.page-title { font-size: 20px; margin: 6px 0 16px; border-left: 4px solid #FFC644; padding-left: 10px; }
.page-title .sub { font-size: 13px; color: #999; font-weight: 400; }

.hero { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.hero .hero-img img { width: 100%; height: 300px; object-fit: cover; display: block; }
.hero h2 { font-size: 22px; padding: 16px 18px 6px; }
.hero .meta { padding: 0 18px; color: #999; font-size: 13px; }
.hero .excerpt { padding: 6px 18px 18px; color: #666; font-size: 14px; }

.news-list { list-style: none; background: #fff; border-radius: 8px; }
.news-list li { position: relative; display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #f0f0f0; }
.news-list li:last-child { border-bottom: 0; }
.news-list .thumb { width: 160px; height: 105px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #eee; }
.news-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-list .info { min-width: 0; flex: 1; }
.news-list h3 { font-size: 17px; margin-bottom: 6px; }
.news-list h3 a { display: block; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; line-height: 1.45; }
.news-list .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.news-list .excerpt { color: #777; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-list .meta { color: #aaa; font-size: 12px; margin-top: 6px; }

.col-side h3 { font-size: 16px; border-left: 4px solid #FFC644; padding-left: 10px; margin-bottom: 12px; }
.hot { list-style: none; background: #fff; border-radius: 8px; padding: 8px 0; }
.hot li { padding: 8px 16px; font-size: 14px; }
.hot li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot li:nth-child(-n+3) a { color: #D99A00; }

.pager { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 24px 0; font-size: 14px; }
.pager a { padding: 6px 16px; background: #fff; border-radius: 4px; border: 1px solid #ddd; }
.pager span { color: #999; }

.article { background: #fff; border-radius: 8px; padding: 28px; }
.article h1 { font-size: 26px; line-height: 1.4; margin-bottom: 12px; }
.article .meta { color: #999; font-size: 13px; padding-bottom: 16px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.article-imgs img { border-radius: 6px; margin: 10px 0; display: block; }
.article-body { font-size: 16px; color: #333; }
.article-body img { display: block; margin: 12px auto; }
.article-body p { margin: 12px 0; }
.empty { color: #999; padding: 40px 0; text-align: center; }

.footer{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #eee;color:#999;font-size:12px;line-height:1.6;padding:6px 12px;text-align:center}
.footer a{color:#999}
.footer .wrap{padding:0}

@media (max-width: 860px) {
  .cols{grid-template-columns:1fr;grid-template-areas:"carousel" "main"}
  .col-side{display:contents}
  .col-carousel{grid-area:carousel}
  .col-main{grid-area:main}
  .col-hot{display:none}
  .col-side{width:auto}
  .topbar .search input { width: 140px; }
  .hero .hero-img img { height: 190px; }
  .news-list .thumb { width: 104px; height: 74px; }
  .tagbar .wrap { max-height: 56px; overflow: hidden; }
  .tag { font-size: 14px; padding: 0 1px; }
}
@media (max-width:640px){
  .topbar .wrap{flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px}
  .topbar .logo{width:100%;font-size:22px;letter-spacing:1px}
  .topbar .search{margin-left:0;width:100%}
  .topbar .search input{width:100%;flex:1}
  .hot-slideshow{height:158px}
  .tagbar .wrap{gap:3px 16px}
  .tag{font-size:14px;line-height:24px}
  .news-list li{padding:12px 14px;gap:10px}
  .news-list h3{font-size:15.5px}
  .news-list .excerpt{-webkit-line-clamp:1}
  .page-title{font-size:18px}
  .article{padding:18px}
  .footer{font-size:11px;padding:5px 10px}
}

.hot-slideshow{position:relative;height:180px;border-radius:8px;overflow:hidden;margin-bottom:14px;background:#eee}
.hot-slideshow .slide{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .5s ease;display:block}
.hot-slideshow .slide.on{opacity:1;z-index:2}
.hot-slideshow .slide img{width:100%;height:100%;object-fit:cover;display:block}
.hot-slideshow .slide .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-slideshow .dots{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;gap:5px}
.hot-slideshow .dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;display:inline-block}
.hot-slideshow .dots span.on{background:#FFC644}

.feed-more{text-align:center;color:#999;font-size:13px;padding:18px 0}
body{overflow-x:hidden}
.news-list h3 a,.hot li a{word-break:break-word}