* { margin:0; padding:0; box-sizing:border-box; }
        body { background:#ebe3d8; font:15px/1.8 'STKaiti','KaiTi','楷体',serif; color:#3d322a;}
        
       .blog_header{max-width:1380px; margin:0 auto;padding: 0 48px 30px;}
       .blog_header .cover{ }
        .cover { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:48px 0 32px; position:relative; }
        .cover img { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid #d6c9bc; background:#d6c9bc; }
        .cover h1 { font-size:28px; font-weight:400; letter-spacing:6px; }
        .cover h1 small { display:inline-block; margin-left:10px; padding:0 14px; font-size:11px; font-weight:400; line-height:24px; color:#b8a18c; border:1px solid #b8a18c; border-radius:2px; letter-spacing:2px; }
        .cover .tags { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:#8a7a6e; }
        .cover .tags span { padding:0 12px; line-height:26px; background:#e8ddd2; letter-spacing:1px; }
        .cover .stats { display:flex; gap:28px; margin-left:auto; font-size:13px; color:#8a7a6e; }
        .cover .stats strong { display:block; font-size:22px; font-weight:400; color:#3d322a; letter-spacing:2px; }
        
        
        .wrap { max-width:1380px; margin:0 auto; background:rgba(255,255,255,.6); padding:0 48px 30px; box-shadow:0 8px 40px rgba(60,45,35,.08); position:relative;border-radius:5px; }
        .wrap:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); pointer-events:none; opacity:.5; }
        .wrap > * { position:relative; z-index:1; }
        .nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0 16px; }
        .nav .links { display:flex; gap:4px; }
        .nav .links a { padding:4px 22px; font-size:15px; color:#8a7a6e; text-decoration:none; letter-spacing:4px; transition:.3s; border-bottom:2px solid transparent; }
        .nav .links a i { margin-right:6px; font-size:13px; opacity:.6; }
        .nav .links a:hover { color:#3d322a; border-color:#d6c9bc; }
        .nav .links a.active { color:#3d322a; border-color:#b8a18c; font-weight:500; }
        .nav .publish { padding:4px 24px; font:inherit; font-size:14px; letter-spacing:4px; color:#f6f0e8; background:#3d322a; border:none; cursor:pointer; transition:.3s; }
        .nav .publish:hover { background:#5a4a3e; letter-spacing:6px; }
        .nav .publish i { margin-right:6px; font-size:12px; }
        .main { padding:28px 0 10px; }
        .sec { margin-bottom:44px; }
        .sec h3 { padding-bottom:6px; font-size:18px; font-weight:400; letter-spacing:6px; border-bottom:1px solid #ddd0c4; margin-bottom:18px; color:#3d322a; }
        .sec h3 i { margin-right:10px; color:#b8a18c; font-size:16px; }
        .sec h3 a { float:right; font-size:13px; font-weight:400; color:#b8a18c; text-decoration:none; letter-spacing:2px; transition:.3s; }
        .sec h3 a:hover { color:#3d322a; letter-spacing:4px; }
        .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
        .grid > div { overflow:hidden; background:#e8ddd2; position:relative; transition:.4s; }
        .grid > div img { display:block; width:100%; height:auto; transition:.5s; }
        .grid > div:hover img { transform:scale(1.03); }
        .grid > div p { position:absolute; bottom:0; left:0; right:0; padding:24px 14px 12px; font-size:14px; letter-spacing:3px; color:#f6f0e8; background:linear-gradient(transparent,rgba(40,30,24,.75)); transform:translateY(100%); transition:.4s; margin:0; }
        .grid > div:hover p { transform:translateY(0); }
        .feed { display:flex; gap:16px; padding:18px 0; border-top:1px solid #ddd0c4; margin-top:10px; }
        .feed img { width:48px; height:48px; border-radius:50%; flex-shrink:0; object-fit:cover; background:#d6c9bc; border:2px solid #d6c9bc; }
        .feed .body { flex:1; }
        .feed .body strong { font-size:15px; font-weight:400; letter-spacing:2px; }
        .feed .body strong small { margin-left:12px; font-size:12px; font-weight:400; color:#b8a18c; letter-spacing:1px; }
        .feed .body p { margin:4px 0 8px; font-size:15px; line-height:1.8; letter-spacing:1px; }
        .feed .body p i { color:#b8a18c; font-style:normal; }
        .feed .body .act { display:flex; gap:20px; font-size:13px; color:#b8a18c; letter-spacing:1px; }
        .feed .body .act i { margin-right:4px; }
        .foot { display:flex; gap:30px; padding:14px 0 4px; font-size:12px; color:#b8a18c; letter-spacing:2px; border-top:1px solid #ddd0c4; margin-top:10px; }
        .empty { grid-column:1/-1; padding:40px; text-align:center; color:#b8a18c; }
        
        @media(max-width:1024px){ .grid { grid-template-columns:repeat(3,1fr); } }
        @media(max-width:820px){ body { padding:12px; } .wrap { padding:0 20px 20px; } .cover { flex-direction:column; align-items:flex-start; gap:12px; padding-top:30px; } .cover .stats { margin-left:0; } .nav { flex-wrap:wrap; gap:8px; } .nav .links { flex-wrap:wrap; } .nav .links a { padding:4px 14px; font-size:14px; letter-spacing:2px; } .grid { grid-template-columns:repeat(2,1fr); gap:12px; } .sec h3 { letter-spacing:4px; font-size:16px; } }
        @media(max-width:480px){ .grid { grid-template-columns:1fr 1fr; gap:8px; } .cover h1 { font-size:22px; letter-spacing:4px; } .cover .stats strong { font-size:18px; } .nav .links a { padding:4px 10px; font-size:13px; letter-spacing:1px; } .nav .publish { padding:4px 14px; font-size:12px; letter-spacing:2px; } .sec h3 { letter-spacing:2px; font-size:15px; } }