/* 39 韩漫站 - 杂志风：深色顶栏+居中导航、Bento首屏、横向列表区、暖色系 */
* { box-sizing: border-box; }
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f8f6f3; color: #2d2a26; line-height: 1.7; }

.site-head { background: #1c1917; color: #fafaf9; padding: 16px 16px 12px; }
.site-head .wrap { max-width: 960px; margin: 0 auto; text-align: center; }
.site-head .logo { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 12px; }
.site-head .logo a { color: #fafaf9; text-decoration: none; }
.site-head .logo a:hover { color: #fcd34d; }
.site-head .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.site-head .nav a { padding: 8px 16px; color: #a8a29e; text-decoration: none; font-size: 0.9rem; border-radius: 6px; }
.site-head .nav a:hover { color: #fafaf9; background: rgba(255,255,255,0.06); }
.site-head .nav a.on { color: #fcd34d; font-weight: 600; }

/* Bento 首屏：左大块 + 右两块 */
.hero-bento { max-width: 960px; margin: 0 auto; padding: 28px 16px 32px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.hero-bento .main { grid-row: 1 / -1; min-height: 260px; border-radius: 12px; overflow: hidden; background: #1c1917; position: relative; }
.hero-bento .main img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.hero-bento .main .over { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(28,25,23,0.85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.hero-bento .main .over h1 { margin: 0; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #fff; font-weight: 700; line-height: 1.35; }
.hero-bento .main .over p { margin: 6px 0 0; font-size: 0.8rem; color: #d6d3d1; }
.hero-bento .main .over a { display: inline-block; margin-top: 10px; padding: 8px 14px; background: #b45309; color: #fff; text-decoration: none; font-size: 0.85rem; border-radius: 6px; width: fit-content; }
.hero-bento .main .over a:hover { background: #92400e; }
.hero-bento .card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.hero-bento .card a { display: block; text-decoration: none; color: inherit; height: 100%; }
.hero-bento .card .thumb { aspect-ratio: 16/10; overflow: hidden; }
.hero-bento .card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-bento .card .txt { padding: 12px 14px; }
.hero-bento .card .txt .t { font-size: 0.95rem; font-weight: 600; color: #1c1917; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-bento .card .txt .d { font-size: 0.8rem; color: #78716c; margin-top: 4px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; }
@media (max-width: 640px) {
  .hero-bento { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-bento .main { grid-row: auto; min-height: 220px; }
}

/* 横向列表区：每行 小图 | 标题+摘要+链接 */
.sec-list { padding: 24px 0 40px; }
.sec-list .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.sec-list .tit { font-size: 1.05rem; font-weight: 700; color: #1c1917; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid #b45309; }
.sec-list .row { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid #e7e5e4; }
.sec-list .row:last-child { border-bottom: 0; }
.sec-list .row .thumb { border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #e7e5e4; }
.sec-list .row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sec-list .row .info .t { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.sec-list .row .info .t a { color: #1c1917; text-decoration: none; }
.sec-list .row .info .t a:hover { color: #b45309; }
.sec-list .row .info .d { font-size: 0.85rem; color: #57534e; margin-bottom: 8px; line-height: 1.5; }
.sec-list .row .info .more { font-size: 0.85rem; color: #b45309; text-decoration: none; font-weight: 500; }
.sec-list .row .info .more:hover { text-decoration: underline; }

/* 首页长文案 */
.prose-block { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }
.prose-block .st { font-size: 1rem; font-weight: 700; color: #1c1917; margin: 0 0 12px; }
.prose-block p { font-size: 0.9rem; color: #44403c; margin-bottom: 1em; }

/* 列表页 */
.list-page { padding: 24px 0 48px; }
.list-page .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.list-page .path { font-size: 0.8rem; color: #78716c; margin-bottom: 10px; }
.list-page .path a { color: #b45309; text-decoration: none; }
.list-page .path a:hover { text-decoration: underline; }
.list-page h1 { font-size: 1.3rem; color: #1c1917; margin: 0 0 8px; }
.list-page .lead { font-size: 0.9rem; color: #57534e; margin: 0 0 20px; }
.list-page .rows .row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid #e7e5e4; }
.list-page .rows .row:last-child { border-bottom: 0; }
.list-page .rows .thumb { border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; background: #e7e5e4; }
.list-page .rows .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-page .rows .info .t { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.list-page .rows .info .t a { color: #1c1917; text-decoration: none; }
.list-page .rows .info .t a:hover { color: #b45309; }
.list-page .rows .info .d { font-size: 0.85rem; color: #57534e; margin-bottom: 10px; line-height: 1.5; }
.list-page .rows .info .more { font-size: 0.9rem; color: #b45309; text-decoration: none; font-weight: 500; }
.list-page .rows .info .more:hover { text-decoration: underline; }
.list-page .back { display: inline-block; margin-top: 24px; color: #b45309; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.list-page .back:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .list-page .rows .row { grid-template-columns: 1fr; }
  .list-page .rows .thumb { max-width: 200px; aspect-ratio: 16/10; }
}

/* 内容页 */
.article-page { padding: 0 0 48px; }
.article-page .wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.article-page .path { font-size: 0.8rem; color: #78716c; margin-bottom: 10px; }
.article-page .path a { color: #b45309; text-decoration: none; }
.article-page h1 { font-size: 1.25rem; color: #1c1917; margin: 0 0 10px; line-height: 1.4; }
.article-page .meta { font-size: 0.8rem; color: #78716c; margin: 0 0 20px; }
.article-page .banner { border-radius: 10px; overflow: hidden; margin-bottom: 24px; aspect-ratio: 16/9; background: #e7e5e4; }
.article-page .banner img { width: 100%; height: 100%; object-fit: cover; }
.article-page .body p { font-size: 0.95rem; color: #44403c; margin-bottom: 1em; }
.article-page .body h2 { font-size: 1.05rem; margin: 1.6em 0 0.5em; color: #1c1917; }
.article-page .tags { margin-top: 24px; }
.article-page .tags span { display: inline-block; margin: 0 8px 8px 0; padding: 4px 12px; background: #fef3c7; color: #92400e; border-radius: 6px; font-size: 0.8rem; }
.article-page .back { display: inline-block; margin-top: 20px; color: #b45309; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.article-page .back:hover { text-decoration: underline; }

.site-foot { background: #1c1917; color: #a8a29e; padding: 28px 16px; }
.site-foot .wrap { max-width: 960px; margin: 0 auto; text-align: center; }
.site-foot .copy { font-size: 0.85rem; margin: 0 0 14px; }
.site-foot .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.site-foot .links a { color: #a8a29e; text-decoration: none; font-size: 0.85rem; }
.site-foot .links a:hover { color: #fcd34d; }