/* 博客列表页 / 文章详情页样式（依赖 common.css） */
main{display:block}
.ph-stamp{display:inline-block;background:var(--red);color:var(--white);font:900 13px/1 var(--font);letter-spacing:.08em;padding:6px 12px;border:3px solid var(--white);transform:rotate(-4deg);box-shadow:4px 4px 0 var(--black)}
.chip-date{display:inline-block;background:var(--red);color:var(--white);padding:3px 10px;transform:skewX(-12deg);font-weight:900}
.chip-date>span{display:inline-block;transform:skewX(12deg)}
.chip-cat{border:2px solid currentColor;padding:1px 8px;font-weight:900}
.chip-min{font-weight:700;opacity:.8}

/* ---------- 列表页头 ---------- */
.b-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--black);padding:calc(var(--navh) + 70px) 0 130px}
.b-hero::before{content:"";position:absolute;right:0;top:calc(var(--navh) + 20px);width:46%;height:78%;background:var(--red);clip-path:polygon(24% 0,100% 12%,100% 86%,8% 100%,0 64%);z-index:-2}
.b-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.6px);background-size:12px 12px;z-index:-3}
.b-hero .bg-word{position:absolute;right:3%;bottom:70px;font:900 clamp(110px,17vw,250px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);transform:rotate(-8deg);z-index:-1;user-select:none;pointer-events:none;letter-spacing:-.02em}
.b-hero .deco-mask{position:absolute;right:12%;top:calc(var(--navh) + 40px);width:min(300px,24vw);height:auto;transform:rotate(9deg);filter:drop-shadow(6px 6px 0 var(--black));z-index:-1;pointer-events:none}
.b-kicker{display:inline-block;font:700 12px/1.4 var(--mono);letter-spacing:.16em;color:#ddd;border-left:4px solid var(--red);padding:3px 10px;margin-bottom:26px}
.b-hero .sec-head{margin-bottom:28px}
.sec-head h1{font-size:clamp(40px,6vw,78px);line-height:1}
.b-lead{max-width:34em;font-size:16px;color:#ddd;line-height:1.9}
.b-lead b{color:#fff}
.b-hero .ph-stamp{margin-top:22px}
.b-count{display:inline-block;margin:22px 0 0 18px;font:900 15px/1 var(--display);letter-spacing:.1em;color:#fff}
.b-count b{font-size:34px;color:var(--red-hi);margin-right:4px}

/* ---------- 列表主体 ---------- */
.b-body{position:relative;background:var(--paper);color:var(--ink);padding:110px 0 150px;margin-top:-60px;clip-path:polygon(0 4%,100% 0,100% 100%,0 100%)}
.b-body .halftone-dark{position:absolute;inset:0;pointer-events:none}
.filters{position:relative;display:grid;gap:14px;margin-bottom:46px}
.f-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.f-lab{font:900 12px/1 var(--display);letter-spacing:.25em;color:var(--red);min-width:4.5em}
.f-btn{appearance:none;border:0;cursor:pointer;font:900 15px/1 var(--font);letter-spacing:.04em;background:var(--black);color:var(--white);padding:10px 16px;transform:skewX(-12deg);transition:transform .15s var(--ease-slam),background .15s,box-shadow .15s}
.f-btn>span{display:inline-block;transform:skewX(12deg)}
.f-btn:hover,.f-btn:focus-visible{transform:skewX(-12deg) rotate(-3deg) scale(1.05)}
.f-btn[aria-pressed="true"]{background:var(--red);box-shadow:4px 4px 0 var(--black)}
.f-tag{appearance:none;cursor:pointer;font:700 13px/1 var(--font);background:transparent;color:var(--ink);border:2px solid var(--ink);padding:6px 10px;transition:background .15s,color .15s,transform .15s}
.f-tag:hover,.f-tag:focus-visible{transform:rotate(-3deg)}
.f-tag[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.f-clear{appearance:none;border:0;background:none;cursor:pointer;font:900 13px/1 var(--font);color:var(--red);text-decoration:underline;text-underline-offset:3px}

.cover{position:relative;overflow:hidden}
.cover.c1{background:linear-gradient(160deg,var(--red) 58%,var(--black) 58%)}
.cover.c2{background:linear-gradient(110deg,var(--black) 62%,var(--white) 62%,var(--white) 66%,var(--red) 66%)}
.cover.c3{background:radial-gradient(rgba(230,0,18,.55) 2px,transparent 2.4px) 0 0/12px 12px,var(--paper)}
.cover.c4{background:repeating-linear-gradient(-30deg,var(--red) 0 16px,var(--white) 16px 32px)}
.cover .kw{position:absolute;right:18px;bottom:14px;font:900 clamp(30px,3.6vw,52px)/1 var(--display);color:var(--white);text-shadow:4px 4px 0 var(--black);transform:rotate(-6deg);white-space:nowrap}
.cover.c3 .kw{color:var(--black);text-shadow:4px 4px 0 var(--red)}
.cover.c4 .kw{background:var(--black);padding:4px 12px;text-shadow:none}

.feat-wrap{display:block;filter:drop-shadow(10px 10px 0 var(--red));margin-bottom:56px;transition:filter .2s}
.feat{display:grid;grid-template-columns:1.05fr 1fr;background:var(--black);color:var(--white);clip-path:polygon(0 0,100% 3%,99% 100%,1% 96%);transition:transform .2s var(--ease-slam)}
.feat .cover{min-height:340px}
.feat .cover .kw{font-size:clamp(44px,5.4vw,80px)}
.feat .flag{position:absolute;left:22px;top:22px;background:var(--white);color:var(--black);font:900 13px/1 var(--display);letter-spacing:.2em;padding:7px 12px;transform:rotate(-5deg)}
.feat-body{padding:40px 44px 40px 40px;display:flex;flex-direction:column;justify-content:center}
.feat h2{font-size:clamp(24px,2.5vw,34px);line-height:1.3;margin:4px 0 14px}
.feat p{font-size:15.5px;color:#ccc}
.feat-wrap:hover,.feat-wrap:focus-visible{filter:drop-shadow(14px 14px 0 var(--red))}
.feat-wrap:hover .feat{transform:rotate(-.8deg) translateY(-4px)}
.meta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:13px;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.tags li{font-size:12px;font-weight:700;padding:2px 8px;background:rgba(0,0,0,.08)}
.feat .tags li{background:rgba(255,255,255,.12)}
.read{display:inline-block;align-self:flex-start;margin-top:20px;background:var(--red);color:var(--white);font-weight:900;font-size:14px;padding:9px 18px;transform:skewX(-12deg);transition:letter-spacing .15s}
.read>span{display:inline-block;transform:skewX(12deg)}
.feat-wrap:hover .read,.card-wrap:hover .read{letter-spacing:.08em}

.b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 36px}
.card .cover{height:150px}
.card-wrap{display:block;filter:drop-shadow(7px 7px 0 var(--red));transition:filter .2s}
.card{display:flex;flex-direction:column;height:100%;background:var(--white);color:var(--ink);outline:3px solid var(--black);outline-offset:-3px;clip-path:polygon(0 0,100% 2.5%,98% 100%,2% 97.5%);transition:transform .2s var(--ease-slam)}
.card-wrap:nth-child(even) .card{clip-path:polygon(2% 2.5%,100% 0,100% 97.5%,0 100%)}
.card .cover{border-bottom:3px solid var(--black)}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.card h3{font-size:19px;line-height:1.4;margin-bottom:8px}
.card p{font-size:14px;color:#444;flex:1}
.card .read{font-size:13px;padding:7px 14px}
.card-wrap:hover,.card-wrap:focus-visible{filter:drop-shadow(10px 10px 0 var(--red))}
.card-wrap:hover .card{transform:rotate(-1.2deg) translateY(-6px)}
.empty[hidden]{display:none}
.empty{font-weight:900;font-size:18px;background:var(--black);color:var(--white);display:inline-block;padding:14px 22px;transform:rotate(-2deg)}

/* ---------- 文章头 ---------- */
.a-head{position:relative;isolation:isolate;overflow:hidden;background:var(--black);padding:calc(var(--navh) + 46px) 0 140px}
.a-head::before{content:"";position:absolute;right:-2%;top:calc(var(--navh) + 10px);width:42%;height:82%;z-index:-2;clip-path:polygon(22% 0,100% 10%,100% 88%,6% 100%,0 60%);background:var(--red)}
.a-head::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.6px);background-size:12px 12px;z-index:-3}
.a-head .bg-word{position:absolute;right:3%;bottom:44px;font:900 clamp(80px,12vw,180px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.45);transform:rotate(-8deg);z-index:-1;white-space:nowrap;pointer-events:none;user-select:none}
.a-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:34px}
.back{display:inline-block;background:var(--white);color:var(--black);font-weight:900;font-size:14px;padding:8px 16px;transform:skewX(-12deg);box-shadow:4px 4px 0 var(--red);transition:transform .15s var(--ease-slam)}
.back>span{display:inline-block;transform:skewX(12deg)}
.back:hover,.back:focus-visible{transform:skewX(-12deg) rotate(-3deg) scale(1.05)}
.crumb{font:700 12px/1.4 var(--mono);letter-spacing:.16em;color:#ccc}
.crumb a{color:#fff;border-bottom:2px solid var(--red)}
.a-title{max-width:16em;font-size:clamp(30px,4.2vw,56px);line-height:1.5;font-weight:900;transform:rotate(-2deg);transform-origin:left center;margin:6px 0 30px}
.a-title span{background:var(--white);color:var(--black);padding:.02em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:6px 6px 0 var(--red)}
.a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:14px;color:#fff}
.a-meta .chip-cat{color:#fff}
.a-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.a-tags a{display:inline-block;font-size:13px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.7);padding:2px 9px;transition:background .15s,color .15s}
.a-tags a:hover,.a-tags a:focus-visible{background:var(--white);color:var(--black)}
.a-head .ph-stamp{margin-left:6px}

/* ---------- 文章主体 ---------- */
.a-body{position:relative;background:var(--paper);color:var(--ink);margin-top:-70px;padding:120px 0 150px;clip-path:polygon(0 70px,100% 0,100% 100%,0 100%)}
.a-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start}
.prose{max-width:720px;font-size:16.5px;line-height:1.95;color:#222;counter-reset:h2}
.prose>*+*{margin-top:1.15em}
.prose h2{position:relative;counter-increment:h2;font-size:26px;line-height:1.35;margin-top:2.1em;padding-left:58px;color:var(--black);scroll-margin-top:calc(var(--navh) + 24px)}
.prose h2::before{content:counter(h2,decimal-leading-zero);position:absolute;left:0;top:50%;margin-top:-17px;width:44px;height:34px;display:grid;place-items:center;background:var(--red);color:var(--white);font:900 16px/1 var(--display);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.prose h2::after{content:"";position:absolute;left:58px;right:0;bottom:-8px;height:3px;background:linear-gradient(90deg,var(--black) 0 120px,transparent 120px)}
.prose h3{font-size:20px;line-height:1.4;margin-top:1.8em;color:var(--black);scroll-margin-top:calc(var(--navh) + 24px)}
.prose h3::before{content:"";display:inline-block;width:12px;height:12px;background:var(--red);margin-right:10px;transform:rotate(45deg) translateY(-2px)}
.prose p{text-align:justify}
.prose ul,.prose ol{padding-left:1.6em}
.prose li{margin:.35em 0;padding-left:.2em}
.prose ul li::marker{color:var(--red);content:"★  "}
.prose ol li::marker{color:var(--red);font-weight:900}
.prose blockquote{position:relative;background:var(--black);color:var(--white);padding:22px 26px 22px 64px;border-left:8px solid var(--red);font-weight:700;box-shadow:6px 6px 0 rgba(230,0,18,.85)}
.prose blockquote::before{content:"“";position:absolute;left:16px;top:6px;font:900 64px/1 Georgia,serif;color:var(--red)}
.prose .note{background:var(--white);border:3px solid var(--black);padding:14px 18px 14px 18px;font-size:14.5px;font-weight:700;box-shadow:5px 5px 0 var(--red)}
.prose .note b{display:inline-block;background:var(--red);color:var(--white);padding:0 8px;margin-right:8px}
.prose figure.code{background:#111;color:#eee;border:3px solid var(--black);box-shadow:6px 6px 0 var(--red)}
.prose figure.code figcaption{display:flex;justify-content:space-between;gap:10px;font:900 12px/1 var(--mono);letter-spacing:.12em;padding:9px 14px;background:var(--red);color:var(--white)}
.prose pre{margin:0;padding:16px 18px;overflow-x:auto;font:14px/1.7 var(--mono);tab-size:2;white-space:pre}
.prose figure.ph-img{border:3px dashed var(--black);background:radial-gradient(rgba(230,0,18,.35) 1.6px,transparent 1.9px) 0 0/12px 12px,var(--white);aspect-ratio:16/7;display:grid;place-items:center;position:relative}
.prose figure.ph-img span{background:var(--black);color:var(--white);font-weight:900;font-size:15px;padding:8px 16px;transform:rotate(-3deg)}
.prose figure.ph-img figcaption{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:13px;color:#666}
.prose figure.ph-img+*{margin-top:2.6em}

/* 目录 */
.toc{position:sticky;top:calc(var(--navh) + 28px);background:var(--black);color:var(--white);padding:22px 20px 20px;box-shadow:8px 8px 0 var(--red);clip-path:polygon(0 0,100% 2%,100% 100%,0 98%)}
.toc-title{display:inline-block;font:900 14px/1 var(--display);letter-spacing:.2em;background:var(--red);padding:7px 12px;transform:rotate(-4deg);margin-bottom:16px}
.toc ol{list-style:none;display:grid;gap:4px}
.toc a{display:block;font-size:14px;line-height:1.45;padding:6px 10px;border-left:3px solid transparent;color:#ddd;transition:background .15s,color .15s}
.toc a.l3{padding-left:24px;font-size:13px;color:#aaa}
.toc a:hover,.toc a:focus-visible{color:#fff;border-left-color:var(--red)}
.toc a.on{background:var(--white);color:var(--black);border-left-color:var(--red);font-weight:900}
.toc-m{display:none;background:var(--black);color:var(--white);margin-bottom:34px;box-shadow:6px 6px 0 var(--red)}
.toc-m summary{cursor:pointer;font:900 15px/1 var(--display);letter-spacing:.15em;padding:14px 18px;list-style:none;display:flex;justify-content:space-between}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"▼";color:var(--red-hi)}
.toc-m[open] summary::after{content:"▲"}
.toc-m ol{list-style:none;padding:0 12px 14px}
.toc-m a{display:block;padding:7px 8px;font-size:14px;color:#ddd;border-top:1px solid #333}
.toc-m a.l3{padding-left:22px;font-size:13px;color:#aaa}

/* 上一篇 / 下一篇 */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:70px;max-width:720px}
.pn a,.pn .none{display:block;background:var(--black);color:var(--white);padding:18px 22px;transform:skewX(-8deg);box-shadow:6px 6px 0 var(--red);transition:transform .15s var(--ease-slam),background .15s}
.pn a>*,.pn .none>*{display:block;transform:skewX(8deg)}
.pn small{font:900 12px/1 var(--display);letter-spacing:.2em;color:var(--red-hi);margin-bottom:8px}
.pn b{font-size:15px;line-height:1.45}
.pn .next{text-align:right}
.pn a:hover,.pn a:focus-visible{transform:skewX(-8deg) rotate(-2deg) scale(1.03);background:var(--red)}
.pn a:hover small{color:var(--white)}
.pn .none{opacity:.45;box-shadow:none}
.a-end{margin-top:44px}
.a-end .back{box-shadow:4px 4px 0 var(--red);background:var(--black);color:var(--white)}
.missing{font-size:18px;font-weight:900}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .a-layout{grid-template-columns:minmax(0,1fr) 230px;gap:44px}
}
@media (max-width:1024px){
  .feat{grid-template-columns:1fr}
  .feat .cover{min-height:200px}
  .b-hero .deco-mask{right:6%;width:min(240px,30vw)}
  .a-layout{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .toc-m{display:block}
  .prose,.pn{max-width:none}
}
@media (max-width:640px){
  .b-hero{padding:calc(var(--navh) + 46px) 0 250px}
  .b-hero::before{width:78%;height:190px;top:auto;bottom:56px}
  .b-hero .bg-word{font-size:92px;bottom:70px;right:4%}
  .b-hero .deco-mask{width:130px;top:auto;bottom:150px;right:auto;left:6%;transform:rotate(-8deg)}
  .b-lead{font-size:15px}
  .b-count{display:block;margin:18px 0 0}
  .b-body{padding:80px 0 120px;clip-path:polygon(0 2%,100% 0,100% 100%,0 100%)}
  .f-lab{min-width:100%}
  .f-btn{font-size:14px;padding:9px 13px}
  .b-grid{grid-template-columns:1fr;gap:30px}
  .feat-body{padding:26px 22px 30px}
  .feat .cover{min-height:150px}
  .a-head{padding:calc(var(--navh) + 30px) 0 120px}
  .a-head::before{width:80%;height:40%;top:auto;bottom:30px}
  .a-head .bg-word{font-size:72px;bottom:50px}
  .a-title{font-size:clamp(26px,7.4vw,34px);line-height:1.55;transform:rotate(-1.5deg)}
  .a-body{padding:90px 0 120px;clip-path:polygon(0 40px,100% 0,100% 100%,0 100%)}
  .prose{font-size:16px;line-height:1.9}
  .prose h2{font-size:22px;padding-left:50px}
  .prose h2::before{width:38px;height:30px;margin-top:-15px;font-size:14px}
  .prose h2::after{left:50px}
  .prose h3{font-size:18px}
  .prose blockquote{padding:18px 18px 18px 52px}
  .prose blockquote::before{left:10px;font-size:52px}
  .prose pre{font-size:13px}
  .pn{grid-template-columns:1fr;gap:18px}
  .pn .next{text-align:left}
}
.prose figure.ph-img.img-real{border:0;background:none;aspect-ratio:auto;display:block}
.prose figure.ph-img.img-real img{width:100%;height:auto;display:block;border:3px solid var(--black);box-shadow:8px 8px 0 var(--red);background:var(--white)}