
:root{
 --kraft:#ece1c8; --kraft2:#e3d5b6; --paper:#fffdf4; --paper2:#faf5e6;
 --ink:#4a3f35; --ink2:#7c6f60; --line:#d8ccae; --red:#d9534f; --blue:#5b8bd0;
 --shadow:0 3px 14px rgba(96,74,42,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
 font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
 color:var(--ink); line-height:1.9; font-size:15.5px;
 background-color:var(--kraft);
 background-image:
  radial-gradient(circle at 12% 20%, rgba(255,255,255,.5) 0 120px, transparent 121px),
  radial-gradient(circle at 88% 78%, rgba(255,236,200,.55) 0 160px, transparent 161px),
  linear-gradient(rgba(128,104,64,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(128,104,64,.07) 1px, transparent 1px);
 background-size:auto,auto,24px 24px,24px 24px;
 background-attachment:fixed;
}
a{color:#8a5a2b;text-decoration:none}
a:hover{color:var(--red)}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.hand{font-family:"KaiTi","STKaiti","DFKai-SB","楷体",cursive}

/* ---------- 顶部 ---------- */
.site-head{background:var(--paper);border-bottom:3px solid var(--line);box-shadow:var(--shadow);position:relative;z-index:5}
.head-in{display:flex;align-items:center;gap:16px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:52px;height:52px;transform:rotate(-4deg)}
.brand b{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:30px;letter-spacing:4px;color:var(--ink)}
.brand small{display:block;font-size:12px;color:var(--ink2);letter-spacing:2px}
.main-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.main-nav a{
 font-size:14px;padding:4px 12px;background:var(--paper2);border:1px solid var(--line);
 border-radius:4px;color:var(--ink);box-shadow:1px 2px 4px rgba(96,74,42,.10);
 display:inline-block;transition:transform .15s;
}
.main-nav a:nth-child(3n){transform:rotate(1.2deg)}
.main-nav a:nth-child(3n+1){transform:rotate(-1.2deg)}
.main-nav a:hover{transform:rotate(0deg) translateY(-2px);background:#fff}
.main-nav a.cur{background:#fff4e6;border-color:#e8b06e}

/* ---------- 胶带 ---------- */
.tape{
 position:absolute;top:-13px;left:50%;width:110px;height:28px;margin-left:-55px;
 transform:rotate(-3deg);opacity:.85;
 background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px),#e8b06e;
 box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.tape.t2{background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 6px,transparent 6px 12px),#9fc7e8;transform:rotate(2.5deg)}
.tape.t3{background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 6px,transparent 6px 12px),#b7d9a8;transform:rotate(-2deg)}
.tape.t4{background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 6px,transparent 6px 12px),#e6a8c8;transform:rotate(1.8deg)}
.tape.t5{background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 6px,transparent 6px 12px),#f0d488;transform:rotate(-1.6deg)}
.tape.left{left:36px;margin-left:0}
.tape.right{left:auto;right:36px;margin-left:0}

/* ---------- 卡片 ---------- */
.paper{
 position:relative;background:var(--paper);border:1px solid var(--line);
 box-shadow:var(--shadow);padding:26px 30px;border-radius:3px;
}
.paper::before{ /* 左侧打孔线 */
 content:"";position:absolute;left:14px;top:16px;bottom:16px;width:0;
 border-left:2px dashed rgba(140,116,72,.28);
}

/* ---------- 首页 ---------- */
.hero{position:relative;margin:38px 0 26px;background:var(--paper);border:1px solid var(--line);
 box-shadow:var(--shadow);padding:44px 40px;overflow:hidden;border-radius:3px;
 background-image:linear-gradient(rgba(120,100,60,.05) 1px,transparent 1px);background-size:100% 32px}
.hero h1{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:42px;letter-spacing:6px}
.hero h1 span{color:var(--red)}
.hero p{max-width:640px;margin-top:12px;color:var(--ink2)}
.hero .stamp{
 position:absolute;right:46px;top:38px;width:112px;height:112px;border:3px double var(--red);
 border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
 color:var(--red);font-family:"KaiTi","楷体",cursive;font-size:16px;line-height:1.5;
 transform:rotate(12deg);opacity:.75;padding:10px;background:rgba(255,255,255,.4)
}
.sec-title{display:flex;align-items:baseline;gap:14px;margin:38px 0 20px}
.sec-title h2{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:28px;letter-spacing:3px}
.sec-title h2::before{content:"✎ ";color:var(--red)}
.sec-title small{color:var(--ink2)}
.cols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.col-card{
 position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
 padding:22px 20px 18px;border-radius:3px;transition:transform .18s,box-shadow .18s;
}
.col-card:nth-child(even){transform:rotate(.6deg)}
.col-card:nth-child(odd){transform:rotate(-.6deg)}
.col-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 10px 22px rgba(96,74,42,.22)}
.col-card .doodle{width:76px;height:58px;display:block;margin-bottom:6px}
.col-card h3{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:21px;margin:6px 0 2px}
.col-card .tag{font-size:12px;color:var(--ink2)}
.col-card ul{list-style:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.col-card li{font-size:13.5px;padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-card li::before{content:"▸ ";color:#c98a3b}
.col-card .more{display:inline-block;margin-top:10px;font-size:13px;color:var(--red)}
.latest{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.latest a{display:block;background:var(--paper2);border:1px solid var(--line);padding:10px 14px;
 border-radius:3px;font-size:14px;box-shadow:1px 2px 5px rgba(96,74,42,.08)}
.latest a em{font-style:normal;color:var(--ink2);font-size:12px;margin-right:8px}

/* ---------- 栏目页 ---------- */
.page-head{margin:36px 0 22px}
.page-head .paper{padding:34px 38px}
.page-head .doodle{width:96px;height:72px;display:block;margin-bottom:10px}
.page-head h1{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:34px;letter-spacing:3px}
.page-head p{color:var(--ink2);margin-top:6px}
.art-list{list-style:none;counter-reset:li}
.art-list li{border-bottom:1px dashed var(--line);padding:9px 2px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.art-list li::before{counter-increment:li;content:counter(li,decimal-leading-zero);
 font-family:Georgia,serif;color:#c98a3b;font-size:15px}
.art-list a{flex:1;min-width:200px}
.art-list time{font-size:12px;color:var(--ink2)}

/* ---------- 文章页 ---------- */
.layout{display:grid;grid-template-columns:1fr 290px;gap:28px;margin:36px 0 30px;align-items:start}
.crumb{font-size:13px;color:var(--ink2);margin-bottom:14px}
.crumb a{margin:0 4px}
.article{padding:34px 40px 30px}
.art-top{font-size:12.5px;color:var(--ink2);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.art-top time{font-family:Georgia,serif}
.article h1{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:33px;line-height:1.4;letter-spacing:1px;margin:4px 0 10px}
.article .doodle{width:150px;height:112px;float:right;margin:6px 0 12px 20px;background:var(--paper2);
 border:1px solid var(--line);padding:8px;transform:rotate(2deg);box-shadow:var(--shadow)}
.article .intro{font-size:16px}
.article .intro::first-letter{font-family:"KaiTi","楷体",cursive;font-size:34px;color:var(--red);float:left;line-height:1;margin:4px 8px 0 0}
.memo{
 margin:18px 0;padding:12px 18px;background:#fdf6dd;border:1px solid #ecd9a0;border-left:5px solid #e8b06e;
 font-size:13.5px;box-shadow:1px 2px 5px rgba(96,74,42,.08)
}
.memo b{font-family:"KaiTi","楷体",cursive;display:block;margin-bottom:4px}
.memo li{list-style:none;margin:2px 0}
.memo li::before{content:"✂ ";color:#c98a3b}
.article h2{
 font-family:"KaiTi","STKaiti","楷体",cursive;font-size:24px;margin:30px 0 12px;letter-spacing:2px;
 padding-left:14px;border-left:5px solid #e8b06e;position:relative
}
.article h2:nth-of-type(2n){border-left-color:#9fc7e8}
.article h2:nth-of-type(3n){border-left-color:#b7d9a8}
.article p{margin:10px 0}
.article ul{margin:12px 0 12px 6px;list-style:none}
.article ul li{padding:3px 0 3px 26px;position:relative}
.article ul li::before{content:"";position:absolute;left:4px;top:12px;width:11px;height:11px;
 border:1.6px solid #c98a3b;border-radius:2px;background:#fff}
.tip{
 margin:22px 0;padding:14px 20px;background:#fdeef0;border:1px dashed #e0a4ab;
 font-family:"KaiTi","楷体",cursive;font-size:15.5px;color:#8c3b47;transform:rotate(-.4deg);
 box-shadow:var(--shadow)
}
.tip::before{content:"✿ 小贴士　";color:var(--red);letter-spacing:2px}
.tags{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.tags span{font-size:12px;background:var(--paper2);border:1px solid var(--line);padding:2px 10px;
 border-radius:20px;color:var(--ink2);transform:rotate(-1deg)}
.tags span:nth-child(2n){transform:rotate(1deg)}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:26px}
.pager a{max-width:48%;background:var(--paper2);border:1px solid var(--line);padding:9px 14px;
 font-size:13.5px;border-radius:3px;box-shadow:1px 2px 5px rgba(96,74,42,.1)}
.pager .next{text-align:right}
.pager small{display:block;color:var(--ink2);font-size:11px}
.related{margin-top:26px;border-top:1px dashed var(--line);padding-top:14px}
.related b{font-family:"KaiTi","楷体",cursive}
.related li{list-style:none;padding:3px 0}
.related li::before{content:"✿ ";color:#d9534f}

/* ---------- 侧栏 ---------- */
.aside .paper{padding:18px 20px;margin-bottom:22px}
.aside h3{font-family:"KaiTi","STKaiti","楷体",cursive;font-size:19px;margin-bottom:8px;letter-spacing:2px}
.aside h3::before{content:"◍ ";color:#c98a3b}
.aside ul{list-style:none}
.aside li{font-size:13.5px;padding:4px 0;border-bottom:1px dotted var(--line)}
.aside li:last-child{border-bottom:0}
.col-chip{display:inline-block;font-size:12px;margin:0 6px 8px 0;padding:2px 9px;
 background:var(--paper2);border:1px solid var(--line);border-radius:3px;transform:rotate(-1deg)}
.col-chip:nth-child(2n){transform:rotate(1deg)}

/* ---------- 页脚 ---------- */
.site-foot{margin-top:44px;background:#4a3f35 url() ;color:#e7dcc4;padding:26px 0 22px;
 border-top:6px solid #3a3129;font-size:13.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between}
.foot-links a{color:#e7dcc4;margin-right:14px}
.foot-links a:hover{color:#ffb}
.icp a{color:#cfc2a3;letter-spacing:1px}
.icp a:hover{color:#fff}

@media (max-width:900px){
 .layout{grid-template-columns:1fr}
 .article{padding:26px 22px}
 .article .doodle{float:none;display:block;margin:10px auto}
 .hero .stamp{display:none}
 .hero{padding:32px 24px}
 .page-head .paper{padding:26px 22px}
}
