/* 公共样式：从 index.html 抽出（导航 / 转场 / 勒索信 / 板块标题 / reveal / 页脚），供 blog.html、post.html 使用 */
:root{
  --red:#e60012; --red-hi:#ff3346; --black:#0d0d0d; --ink:#1a1a1a; --white:#fff; --paper:#f4f1ea;
  --ease-slam:cubic-bezier(.7,0,.2,1);
  --font:"Noto Sans SC","Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --display:"Arial Black","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",Impact,sans-serif;
  --navh:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);background:var(--black);color:var(--white);line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.halftone{background-image:radial-gradient(rgba(230,0,18,.35) 1.4px,transparent 1.6px);background-size:12px 12px}
.halftone-dark{background-image:radial-gradient(rgba(0,0,0,.14) 1.4px,transparent 1.6px);background-size:10px 10px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
section{position:relative;overflow:hidden;scroll-margin-top:var(--navh)}

/* ---------- 载入转场 / 快切 ---------- */
.curtain{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden}
.curtain i{position:absolute;top:-20%;height:140%;width:40%;transform:skewX(-20deg) translateX(0)}
.curtain i:nth-child(1){left:-10%;background:var(--red)}
.curtain i:nth-child(2){left:22%;background:var(--black)}
.curtain i:nth-child(3){left:54%;background:var(--red)}
.curtain i:nth-child(4){left:86%;background:var(--white)}
.curtain .logo{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(40px,9vw,120px)/1 var(--display);color:var(--white);letter-spacing:.05em;transform:rotate(-8deg);text-shadow:6px 6px 0 var(--black)}
#loader i{animation:stripeOut .7s var(--ease-slam) forwards}
#loader i:nth-child(1){animation-delay:.55s}#loader i:nth-child(2){animation-delay:.63s}
#loader i:nth-child(3){animation-delay:.71s}#loader i:nth-child(4){animation-delay:.79s}
#loader .logo{animation:logoPop .9s var(--ease-slam) forwards}
@keyframes stripeOut{to{transform:skewX(-20deg) translateX(-320%)}}
@keyframes logoPop{0%{opacity:0;transform:rotate(-8deg) scale(1.6)}25%{opacity:1;transform:rotate(-8deg) scale(1)}70%{opacity:1}100%{opacity:0;transform:rotate(-8deg) scale(.9) translateX(-30px)}}
html.loaded #loader{display:none}
#cut{visibility:hidden}
#cut i{transform:skewX(-20deg) translateX(320%)}
#cut.go{visibility:visible}
#cut.go i{animation:cutAcross .56s var(--ease-slam) forwards}
#cut.go i:nth-child(2){animation-delay:.04s}#cut.go i:nth-child(3){animation-delay:.08s}#cut.go i:nth-child(4){animation-delay:.12s}
@keyframes cutAcross{0%{transform:skewX(-20deg) translateX(320%)}45%,55%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(-320%)}}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--navh);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(180deg,rgba(13,13,13,.92),rgba(13,13,13,.75));backdrop-filter:blur(4px);border-bottom:3px solid var(--red)}
.brand{display:flex;align-items:center;gap:10px;font:900 20px/1 var(--display);letter-spacing:.04em}
.brand b{display:inline-block;background:var(--red);padding:6px 10px;transform:skewX(-14deg) rotate(-4deg)}
.brand b span{display:inline-block;transform:skewX(14deg)}
.menu{display:flex;gap:18px;list-style:none}
.menu a{white-space:nowrap}
.menu a{position:relative;display:block;padding:8px 14px;font-weight:900;font-size:15px;letter-spacing:.06em;color:var(--white);transform:skewX(-14deg);transition:transform .18s var(--ease-slam),color .18s}
.menu a span{display:inline-block;transform:skewX(14deg)}
.menu a::before{content:"";position:absolute;inset:0;background:var(--white);z-index:-1;clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .2s var(--ease-slam)}
.menu a::after{content:"";position:absolute;inset:4px -4px -4px 4px;background:var(--red);z-index:-2;opacity:0;transition:opacity .15s}
.menu a:hover,.menu a:focus-visible,.menu a.active{color:var(--black);transform:skewX(-14deg) rotate(-4deg) scale(1.08)}
.menu a:hover::before,.menu a:focus-visible::before,.menu a.active::before{clip-path:polygon(0 8%,100% 0,96% 100%,3% 90%);animation:jitter .45s steps(2) infinite}
.menu a:hover::after,.menu a:focus-visible::after,.menu a.active::after{opacity:1}
.menu a.active{animation:none}
.menu a.active::before{animation:none}
@keyframes jitter{0%{clip-path:polygon(0 8%,100% 0,96% 100%,3% 90%)}50%{clip-path:polygon(3% 0,97% 10%,100% 88%,0 100%)}100%{clip-path:polygon(0 8%,100% 0,96% 100%,3% 90%)}}
.burger{display:none;width:48px;height:44px;background:var(--red);border:0;cursor:pointer;transform:skewX(-12deg);position:relative;z-index:120}
.burger i{position:absolute;left:12px;right:12px;height:4px;background:var(--white);transition:transform .25s var(--ease-slam),opacity .2s}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){top:20px;right:18px}.burger i:nth-child(3){top:28px}
.nav-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .burger i:nth-child(2){opacity:0}
.nav-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 勒索信标题 ---------- */
.ransom{display:inline-flex;flex-wrap:wrap;gap:.06em;font:900 1em/1 var(--display);transform:rotate(-3deg)}
.ransom .ch{display:inline-block;padding:.08em .14em;line-height:1.05}
.ransom .c0{background:var(--white);color:var(--black)}
.ransom .c1{background:var(--black);color:var(--white);outline:3px solid var(--white);outline-offset:-3px}
.ransom .c2{background:var(--red);color:var(--white)}
.ransom .c3{background:transparent;color:var(--white);text-shadow:3px 3px 0 var(--red)}
.ransom .sp{width:.35em}

/* ---------- 板块标题 ---------- */
.sec-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:48px;position:relative}
.sec-no{font:900 clamp(64px,10vw,140px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--red);transform:skewX(-12deg);user-select:none}
.sec-head h2{font-size:clamp(34px,5vw,60px)}
.sec-head .en{display:block;font:900 13px/1 var(--display);letter-spacing:.3em;color:var(--red-hi);margin-top:14px;transform:rotate(-3deg)}
.on-light .sec-head .en{color:var(--red)}
.on-light .ransom .c3{color:var(--black)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateX(-60px) skewX(-8deg);transition:opacity .5s,transform .6s var(--ease-slam)}
.reveal.in{opacity:1;transform:none}
:root{--mono:"Courier New","Noto Sans Mono CJK SC",ui-monospace,monospace;--gold:#D0AD63;--ink0:#080808}
.brand{gap:12px;font:900 22px/1 var(--display);letter-spacing:.02em}
.brand b{display:grid;place-items:center;width:34px;height:34px;padding:0;background:var(--red);color:#000;font-size:19px;transform:rotate(-9deg);box-shadow:3px 3px 0 #fff}
.brand b span{transform:none}
.brand-name small{display:block;font:700 9px/1.5 var(--mono);letter-spacing:.16em;color:#9a9a9a;margin-top:4px}
.soon{align-self:center;margin-left:8px;background:var(--red);color:var(--white);border:3px solid var(--white);font-weight:900;font-size:16px;padding:6px 14px;transform:rotate(-8deg);white-space:nowrap}
footer{position:relative;background:var(--red);padding:110px 0 40px;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);margin-top:-60px;overflow:hidden}
footer .big{font-size:clamp(40px,7vw,96px);margin-bottom:28px}
footer .big .ransom .c2{background:var(--black)}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:20px 300px 50px 0;position:relative;z-index:1}
.contacts a{display:block;background:var(--black);color:var(--white);padding:16px 20px;transform:skewX(-10deg);transition:transform .18s var(--ease-slam),background .18s,color .18s}
.contacts a>*{display:block;transform:skewX(10deg)}
.contacts a small{font:900 11px/1 var(--display);letter-spacing:.25em;color:var(--red-hi);margin-bottom:6px}
.contacts a b{font-size:16px;word-break:break-all}
.contacts a:hover,.contacts a:focus-visible{background:var(--white);color:var(--black);transform:skewX(-10deg) rotate(-3deg) scale(1.05);box-shadow:6px 6px 0 var(--black)}
.contacts a:hover small{color:var(--red)}
.copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#fff;border-top:2px solid rgba(255,255,255,.5);padding-top:18px}.copy .beian{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}.copy .beian:hover{color:var(--black)}
.kasumi{position:absolute;right:2%;max-width:none;bottom:86px;height:360px;width:auto;z-index:0;transform:rotate(-4deg);filter:drop-shadow(6px 6px 0 var(--black)) drop-shadow(-4px 0 0 #fff);pointer-events:none}
.copy{position:relative;z-index:1}
@media (max-width:1180px){
  .menu{gap:12px}
  .menu a{padding:8px 10px;font-size:14px}
  .contacts{margin-right:240px;grid-template-columns:1fr 1fr}
  .kasumi{height:320px}
}
@media (max-width:1024px){
  .burger{display:block}
  .nav{backdrop-filter:none;background:rgba(13,13,13,.96)}
  .menu{position:fixed;inset:0;z-index:110;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:80px 10vw 40px;background:var(--red);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transition:clip-path .4s var(--ease-slam)}
  .menu::before{content:"";position:absolute;inset:0;background:var(--black);clip-path:polygon(70% 0,100% 0,100% 100%,40% 100%);z-index:-3}
  .nav-open .menu{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .menu li:nth-child(odd){margin-left:6vw}
  .menu a{font-size:clamp(24px,6.5vw,34px);padding:6px 18px}
  .menu a::after{background:var(--black)}
  .contacts{grid-template-columns:1fr 1fr;margin-right:200px}
  .kasumi{height:280px;bottom:70px}
}
@media (max-width:640px){
  :root{--navh:58px}
  .nav{padding:0 14px}
  .brand{font-size:17px}
  .wrap{width:calc(100% - 32px)}
  .sec-head{gap:12px;margin-bottom:34px;flex-wrap:wrap}
  .sec-no{font-size:64px}
  .sec-head h2{font-size:34px}
  .contacts{grid-template-columns:1fr;margin-right:0}
  .kasumi{height:150px;top:34px;bottom:auto;right:12px}
  .soon{font-size:13px;padding:4px 10px}
  footer{padding:180px 0 30px;clip-path:polygon(0 3%,100% 0,100% 100%,0 100%)}
  .brand{font-size:19px}
  .brand-name small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #loader{display:none}
  .reveal{opacity:1;transform:none}
}