/* 骨架 f8：暖色生活风（圆角大卡 + 图片墙 + 衬线标题 + 柔和阴影）
   特征：卡片化但圆角明显、阴影柔和、标题用衬线字体，整体偏生活化 */
.f8-wrap { max-width: var(--width); margin: 0 auto; padding: 0 20px; }
.f8-main { padding-top: 22px; padding-bottom: 16px; }

.f8-hd { background: var(--bg); }
.f8-hd-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; flex-wrap: wrap; }
.f8-logo { display: flex; align-items: center; gap: 11px; }
.f8-logo-b { width: 42px; height: 42px; border-radius: calc(var(--radius) + 6px); background: linear-gradient(140deg, var(--brand), var(--brand-d)); color: #fff; font-family: Georgia, "Songti SC", serif; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(15,23,42,.14); }
.f8-logo-t { display: flex; flex-direction: column; gap: 2px; }
.f8-logo-t b { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 20px; color: var(--txt); letter-spacing: .5px; line-height: 1.25; }
.f8-logo-t i { font-style: normal; font-size: 11px; color: var(--mut); letter-spacing: 1.5px; }
.f8-nav { display: flex; gap: 6px; background: var(--card); padding: 5px; border-radius: 999px; box-shadow: 0 2px 10px rgba(15,23,42,.06); flex-wrap: wrap; }
.f8-nav a { font-size: 13.5px; padding: 7px 16px; border-radius: 999px; color: var(--mut); }
.f8-nav a:hover { color: var(--brand); background: var(--brand-l); }
.f8-nav a.on { background: var(--brand); color: #fff; }

.f8-crumb { font-size: 12px; color: var(--mut); margin-bottom: 14px; }
.f8-crumb a { color: var(--brand); }
.f8-crumb span { margin: 0 6px; color: #d4d4d8; }

.f8-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: stretch; background: linear-gradient(135deg, var(--brand-l) 0%, #fff8f1 60%, #fff 100%); border: 1px solid var(--line); border-radius: calc(var(--radius) + 10px); padding: 30px 32px; box-shadow: 0 10px 30px rgba(15,23,42,.05); }
.f8-eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--brand); margin-bottom: 10px; }
.f8-hero h1 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 36px; line-height: 1.35; letter-spacing: .5px; }
.f8-lede { margin-top: 12px; font-size: 14.5px; line-height: 1.95; color: var(--mut); max-width: 620px; }
.f8-kw { margin-top: 16px; }
.f8-kw a { display: inline-block; font-size: 12.5px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--line); color: var(--brand-d); margin: 0 7px 7px 0; }
.f8-kw a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.f8-hero-art { border-radius: calc(var(--radius) + 8px); background: linear-gradient(150deg, var(--brand) 0%, var(--brand-d) 100%); display: flex; align-items: center; justify-content: center; min-height: 190px; box-shadow: inset 0 0 0 8px rgba(255,255,255,.14); }
.f8-hero-art span { font-family: Georgia, "Songti SC", serif; font-size: 88px; color: rgba(255,255,255,.9); line-height: 1; }

.f8-sec { margin-top: 28px; }
.f8-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.f8-sec-h h2 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 21px; letter-spacing: .5px; }
.f8-sec-h a { font-size: 13px; color: var(--brand); }
.f8-sec-m { font-size: 12px; color: var(--mut); }

.f8-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.f8-card { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); overflow: hidden; box-shadow: 0 6px 18px rgba(15,23,42,.05); transition: transform .2s, box-shadow .2s; }
.f8-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,23,42,.11); }
.f8-card-art { display: flex; align-items: center; justify-content: center; height: 150px; background: linear-gradient(140deg, var(--brand-l), #fdeee2); overflow: hidden; }
.f8-card-art2 { background: linear-gradient(140deg, #fff1e6, #ffe4cc); }
.f8-card-art3 { background: linear-gradient(140deg, #edf7f1, #dcefe3); }
.f8-card-art span { font-family: Georgia, "Songti SC", serif; font-size: 52px; color: rgba(0,0,0,.18); }
.f8-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.f8-card-b { padding: 15px 16px 14px; }
.f8-card-k { font-size: 11px; letter-spacing: 1.5px; color: var(--brand); margin-bottom: 6px; }
.f8-card h3 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 17px; line-height: 1.55; font-weight: 600; }
.f8-card h3 a { color: var(--txt); }
.f8-card h3 a:hover { color: var(--brand); }
.f8-card-d { font-size: 13px; color: var(--mut); line-height: 1.8; margin-top: 7px; }
.f8-card-m { font-size: 11.5px; color: #a1a1aa; margin-top: 10px; }
.f8-card-lg { grid-column: span 2; display: grid; grid-template-columns: 1.05fr 1fr; }
.f8-card-lg .f8-card-art { height: 100%; min-height: 220px; }
.f8-card-lg .f8-card-b { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.f8-card-lg h3 { font-size: 23px; line-height: 1.45; }
.f8-more { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.f8-more a { font-size: 12.5px; padding: 7px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--mut); }
.f8-more a:hover { border-color: var(--brand); color: var(--brand); }

.f8-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-top: 28px; }
.f8-soft { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: 20px 22px; margin-top: 28px; box-shadow: 0 6px 18px rgba(15,23,42,.04); }
.f8-duo .f8-soft { margin-top: 0; }
.f8-soft-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.f8-soft-h h2 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 18px; }
.f8-soft-h a { font-size: 12.5px; color: var(--brand); }
.f8-hot { list-style: none; }
.f8-hot li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.f8-hot li:last-child { border-bottom: 0; }
.f8-hot li > span { flex: none; width: 20px; font-family: Georgia, serif; font-size: 14px; color: var(--brand); font-style: italic; }
.f8-hot a { flex: 1; font-size: 14px; color: var(--txt); line-height: 1.55; }
.f8-hot a:hover { color: var(--brand); }
.f8-hot em { flex: none; font-style: normal; font-size: 11px; color: #a1a1aa; }

.f8-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.f8-tags a { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: var(--brand-l); color: var(--brand-d); }
.f8-tags a:hover { background: var(--brand); color: #fff; }
.f8-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f8-chips a { font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); background: var(--bg); }
.f8-chips a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
.f8-chips-lg a { font-size: 13.5px; }

.f8-rows { display: flex; flex-direction: column; gap: 12px; }
.f8-row { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 16px 18px; box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.f8-row-a { flex: none; width: 54px; height: 54px; border-radius: calc(var(--radius) + 4px); background: linear-gradient(140deg, var(--brand-l), #fdeee2); color: rgba(0,0,0,.28); font-family: Georgia, "Songti SC", serif; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.f8-row-a.a2 { background: linear-gradient(140deg, #fff1e6, #ffe4cc); }
.f8-row-a.a3 { background: linear-gradient(140deg, #edf7f1, #dcefe3); }
.f8-row-b { min-width: 0; }
.f8-row-b h3 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 17.5px; line-height: 1.55; font-weight: 600; }
.f8-row-b h3 a { color: var(--txt); }
.f8-row-b h3 a:hover { color: var(--brand); }
.f8-row-b p { font-size: 13px; color: var(--mut); line-height: 1.8; margin-top: 5px; }
.f8-row-b em { font-style: normal; display: block; font-size: 11.5px; color: #a1a1aa; margin-top: 6px; }
.f8-empty { color: var(--mut); font-size: 14px; padding: 14px 0; }

.f8-pager { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.f8-pager a, .f8-pager span.on { min-width: 36px; text-align: center; padding: 7px 13px; font-size: 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--txt); }
.f8-pager a:hover { border-color: var(--brand); color: var(--brand); }
.f8-pager span.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.f8-art { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 10px); padding: 32px 38px 30px; box-shadow: 0 10px 30px rgba(15,23,42,.05); }
.f8-art h1 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 32px; line-height: 1.45; letter-spacing: .5px; }
.f8-art-meta { font-size: 12px; color: #a1a1aa; margin: 14px 0 22px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.f8-art-body p { font-size: 16px; line-height: 2; color: #34343a; margin: 13px 0; }
.f8-art-body h2 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 21px; margin: 26px 0 12px; }
.f8-art-body h3 { font-size: 17px; margin: 20px 0 8px; }
.f8-art-cover { margin-bottom: 22px; }
.f8-art-cover img { width: 100%; display: block; border-radius: calc(var(--radius) + 4px); }
.f8-art-tags { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line); }
.f8-art-note { font-size: 13px; color: var(--mut); line-height: 1.9; margin: 10px 0; }

.f8-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.f8-pn a { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 13px 16px; display: flex; flex-direction: column; gap: 5px; }
.f8-pn a:hover { border-color: var(--brand); }
.f8-pn span { font-size: 11px; color: var(--mut); letter-spacing: 1px; }
.f8-pn b { font-size: 13.5px; font-weight: 500; color: var(--txt); line-height: 1.55; }
.f8-pn-n { text-align: right; }
.f8-rel { list-style: none; }
.f8-rel li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.f8-rel li:last-child { border-bottom: 0; }
.f8-rel a { color: var(--txt); }
.f8-rel a:hover { color: var(--brand); }

.f8-ft { margin-top: 44px; padding: 10px 0 30px; }
.f8-ft-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--brand-l); border-radius: calc(var(--radius) + 10px); padding: 20px 24px; }
.f8-ft-b b { font-family: Georgia, "Songti SC", serif; font-size: 18px; }
.f8-ft-b p { font-size: 12.5px; color: var(--mut); margin-top: 5px; }
.f8-ft-nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.f8-ft-nav a { color: var(--mut); }
.f8-ft-nav a:hover { color: var(--brand); }
.f8-ft-links { font-size: 11.5px; color: #a1a1aa; line-height: 2.1; margin-top: 14px; padding: 0 4px; }
.f8-ft-links span { margin-right: 10px; color: #9ca3af; }
.f8-ft-links a { color: #a1a1aa; margin-right: 12px; }
.f8-ft-links a:hover { color: var(--brand); }
.f8-ft-cp { font-size: 11.5px; color: #b6bfca; margin-top: 10px; padding: 0 4px; }

@media (max-width: 900px) {
  .f8-hero { grid-template-columns: 1fr; padding: 22px 20px; }
  .f8-hero-art { display: none; }
  .f8-hero h1 { font-size: 26px; }
  .f8-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f8-wall-hot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f8-card-lg { grid-column: span 2; grid-template-columns: 1fr; }
  .f8-card-lg .f8-card-art { min-height: 150px; height: 150px; }
  .f8-duo { grid-template-columns: 1fr; }
  .f8-art { padding: 20px 18px; }
  .f8-art h1 { font-size: 23px; }
  .f8-pn { grid-template-columns: 1fr; }
  .f8-nav { padding: 4px; }
  .f8-nav a { padding: 6px 12px; }
}
@media (max-width: 540px) {
  .f8-wall, .f8-wall-hot { grid-template-columns: 1fr; }
  .f8-card-lg { grid-column: span 1; }
  .f8-row { padding: 13px; }
  .f8-row-a { width: 44px; height: 44px; font-size: 20px; }
}