/* ============================================================
   模板: blog-paper —— 纸墨博客
   米白纸张质感 + 衬线标题 + 5px 小圆角，居中双栏 / 阅读优先
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --paper:#f7f4ee;
    --card:#fffdf9;
    --ink:#22201c;
    --ink2:#4a463f;
    --muted:#8d867a;
    --line:#e7e0d4;
    --accent:#a83f2e;
    --accent2:#2f5d50;
    --serif:Georgia,"Times New Roman","Songti SC",SimSun,serif;
    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    --r:5px;
}

body{
    background:var(--paper);
    color:var(--ink2);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .18s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.4}

.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* ---------------- 顶部 ---------------- */
.site-head{
    background:rgba(247,244,238,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:60;
}
.head-inner{display:flex;align-items:center;gap:26px;height:78px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
    width:40px;height:40px;border-radius:var(--r);
    background:linear-gradient(140deg,var(--accent),#7d2c1f);
    color:#fff;font-family:var(--serif);font-size:21px;
    display:flex;align-items:center;justify-content:center;
}
.logo-text{display:flex;flex-direction:column;line-height:1.25}
.logo-text b{font-family:var(--serif);font-size:19px;color:var(--ink);letter-spacing:.5px}
.logo-text em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:2px}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14px;color:var(--ink2)}
.nav a{position:relative;padding:6px 0}
.nav a.on{color:var(--accent);font-weight:600}
.nav a.on::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
}
.head-search{display:flex;align-items:center;gap:8px}
.head-search input{
    width:170px;padding:7px 12px;font-size:13px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);outline:none;
}
.head-search input:focus{border-color:var(--accent)}
.head-search button{
    padding:7px 14px;font-size:13px;color:#fff;background:var(--ink);
    border:none;border-radius:var(--r);cursor:pointer;
}
.head-search button:hover{background:var(--accent)}

/* ---------------- 骨架 ---------------- */
.main-area{padding-top:34px;padding-bottom:44px}
.cols{display:flex;gap:36px;align-items:flex-start}
.content{flex:1;min-width:0}
.side{width:296px;flex-shrink:0}

.sec-head{
    display:flex;align-items:baseline;gap:12px;
    margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.sec-head h2{font-size:20px}
.sec-head h2::before{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:8px;vertical-align:2px}
.sec-head span{margin-left:auto;font-size:12px;color:var(--muted)}

/* ---------------- 头条 ---------------- */
.hero{
    display:flex;gap:26px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);padding:26px;margin-bottom:34px;
}
.hero-cover{
    width:300px;height:200px;flex-shrink:0;border-radius:var(--r);
    background:linear-gradient(140deg,#2f5d50,#1d3b33);
    color:#f4efe6;font-family:var(--serif);font-size:74px;
    display:flex;align-items:center;justify-content:center;
}
.hero-body{flex:1;min-width:0;display:flex;flex-direction:column}
.hero-label{
    display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:2px;
    color:var(--accent);border:1px solid var(--accent);border-radius:2px;
    padding:2px 9px;margin-bottom:12px;
}
.hero h1{font-size:28px;margin-bottom:12px}
.hero h1 a:hover{color:var(--accent)}
.hero p{color:var(--muted);font-size:14.5px;flex:1}

/* ---------------- 文章卡片（双列） ---------------- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:34px}
.post{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:20px 22px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;
}
.post:hover{box-shadow:0 6px 20px rgba(60,45,30,.08);transform:translateY(-2px)}
.post h3{font-size:17px;margin-bottom:8px}
.post p{font-size:13.5px;color:var(--muted);flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{
    display:flex;align-items:center;gap:14px;margin-top:14px;
    padding-top:12px;border-top:1px dashed var(--line);
    font-size:12px;color:var(--muted);font-family:var(--serif);letter-spacing:.4px;
}

/* ---------------- 列表式（栏目页） ---------------- */
.post-list{display:flex;flex-direction:column}
.post-row{
    display:flex;gap:22px;padding:22px 4px;border-bottom:1px solid var(--line);
}
.post-row:first-child{border-top:1px solid var(--line)}
.date-chip{
    width:64px;flex-shrink:0;text-align:center;font-family:var(--serif);
    border-right:1px solid var(--line);padding-right:14px;
}
.date-chip b{display:block;font-size:24px;color:var(--ink);line-height:1.1}
.date-chip span{font-size:11.5px;color:var(--muted)}
.post-row-body{flex:1;min-width:0}
.post-row-body h3{font-size:18px;margin-bottom:7px}
.post-row-body p{font-size:13.5px;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------- 详情页 ---------------- */
.post-head{text-align:center;padding:10px 0 26px;border-bottom:1px solid var(--line);margin-bottom:28px}
.post-head h1{font-size:31px;margin-bottom:14px}
.post-head .meta{justify-content:center;border-top:none;padding-top:0;margin-top:0}
.entry{font-size:16px;line-height:2;color:var(--ink2)}
.entry p{margin-bottom:18px}
.entry h2,.entry h3{margin:26px 0 12px}
.entry img{border-radius:var(--r);margin:8px 0}
.entry blockquote{
    border-left:3px solid var(--accent);background:#f2ece1;
    padding:12px 18px;margin:18px 0;font-family:var(--serif);color:var(--ink);
}
.entry a{border-bottom:1px solid var(--accent);color:var(--accent)}
.tagline{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.tagline a{
    font-size:12.5px;padding:3px 11px;border:1px solid var(--line);
    border-radius:20px;color:var(--muted);background:var(--card);
}
.tagline a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------------- 分页 ---------------- */
.pager{display:flex;justify-content:center;gap:7px;margin:34px 0 6px}
.pager a,.pager span{
    min-width:36px;padding:7px 12px;text-align:center;font-size:14px;font-family:var(--serif);
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--ink2);
}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager .on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------------- 侧栏 ---------------- */
.widget{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:18px 20px;margin-bottom:20px;
}
.widget-title{
    font-family:var(--serif);font-size:16px;color:var(--ink);
    padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:8px;
}
.widget-title::before{content:"";width:4px;height:14px;background:var(--accent);display:inline-block}
.rank{display:flex;flex-direction:column;gap:11px}
.rank a{display:flex;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.rank i{
    font-style:normal;font-family:var(--serif);font-size:12px;color:var(--muted);
    width:18px;flex-shrink:0;
}
.rank a:hover{color:var(--accent)}
.side-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.side-links a{color:var(--muted);display:flex;align-items:center;gap:8px}
.side-links a::before{content:"";width:5px;height:5px;background:var(--line);flex-shrink:0}
.side-links a:hover{color:var(--accent)}
.side-links a:hover::before{background:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills a{
    font-size:12.5px;padding:4px 12px;border-radius:20px;
    background:#f2ece1;color:var(--ink2);
}
.pills a:hover{background:var(--accent);color:#fff}

/* ---------------- 页脚 ---------------- */
.site-foot{
    border-top:1px solid var(--line);margin-top:20px;padding:30px 0 40px;
    text-align:center;font-size:13px;color:var(--muted);font-family:var(--serif);
}
.site-foot a{color:var(--ink2);margin:0 8px}
.site-foot .foot-links{margin-bottom:12px}
.foot-note{font-size:12px;letter-spacing:.5px}

/* ---------------- 空态与软件 ---------------- */
.empty{
    background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
    padding:46px;text-align:center;color:var(--muted);font-family:var(--serif);
}
.dl-box{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:26px 28px;margin-bottom:24px;
}
.dl-top{display:flex;gap:22px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.dl-icon{
    width:76px;height:76px;border-radius:var(--r);flex-shrink:0;
    background:linear-gradient(140deg,var(--accent2),#1d3b33);
    color:#f4efe6;font-size:34px;display:flex;align-items:center;justify-content:center;
}
.dl-icon svg{width:34px;height:34px}
.dl-attrs{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted);margin-top:8px}
.dl-attrs b{color:var(--ink);font-weight:600}
.btn-dl{
    display:inline-block;margin-top:6px;padding:11px 38px;border-radius:var(--r);
    background:var(--ink);color:#fff;font-size:15px;
}
.btn-dl:hover{background:var(--accent);color:#fff}

/* ---------------- 响应式 ---------------- */
@media (max-width:1000px){
    .head-inner{height:auto;padding:14px 0;flex-wrap:wrap;gap:14px}
    .nav{margin-left:0;order:3;width:100%;overflow-x:auto;gap:16px}
    .head-search{margin-left:auto}
    .cols{flex-direction:column}
    .side{width:100%}
    .hero{flex-direction:column}
    .hero-cover{width:100%;height:170px}
}
@media (max-width:640px){
    .post-grid{grid-template-columns:1fr}
    .post-row{gap:14px}
    .date-chip{width:52px;padding-right:10px}
    .date-chip b{font-size:20px}
    .hero{padding:18px}
    .hero h1{font-size:22px}
    .post-head h1{font-size:24px}
    .entry{font-size:15.5px}
    .head-search input{width:120px}
}