@charset "utf-8";
/* ============================================================
   横风动漫 · hfdmgw.com
   视觉方案：墨黑 + 金芒黄 + 奶油纸白 的「双色漫画 / 网点纸」体系
   渲染语言 = 6px 圆角 + 2px 实色墨黑描边 + 错位金色块（零投影）
   布局骨架 = 墨黑通栏 Hero + 共享边框分镜格 + 内页双栏杂志正文
   动效机制 = 纯 CSS paste（旋转贴入）/ dotShift（网点漂移）/ barGrow
   ============================================================ */

:root{
  --ink:#14171F;
  --ink-2:#2A2F3A;
  --ink-soft:#4A505C;
  --ink-faint:#7C8494;
  --gold:#F5B301;
  --gold-d:#C98C00;
  --gold-l:#FEF3D2;
  --paper:#FFFDF6;
  --paper-2:#FFFFFF;
  --paper-3:#F4EFE3;
  --muted:#8A8577;
  --r:6px;
  --col:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.78 "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Segoe UI",Arial,sans-serif;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}

.wrap{
  width:100%;max-width:var(--col);
  margin-left:auto;margin-right:auto;
  padding-left:1.5rem;padding-right:1.5rem;
}

/* ── 通用件 ─────────────────────────────── */
.dotted{
  background-image:radial-gradient(rgba(245,179,1,.55) 1.5px,transparent 1.6px);
  background-size:16px 16px;
  animation:dotShift 11s linear infinite;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.88rem 1.95rem;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:#fff;font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--gold)}
.btn.gold:hover{box-shadow:4px 4px 0 var(--ink)}
.btn.line:hover{box-shadow:4px 4px 0 var(--gold)}
.btn.sm{padding:.6rem 1.15rem;font-size:.94rem}

h2{
  position:relative;margin:0;padding-left:1.55rem;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.34;letter-spacing:.01em;
}
h2::before{
  content:"";position:absolute;left:0;top:.3em;
  width:.74rem;height:.74rem;background:var(--gold);border-radius:2px;
}
h2::after{
  content:"";display:block;width:3.2rem;height:3px;background:var(--ink);
  margin-top:.6rem;transform-origin:left center;
  animation:barGrow .62s cubic-bezier(.2,.7,.3,1) both;
}
h3{margin:0 0 .6rem;font-size:1.16rem;line-height:1.5}

.sec{padding-top:4.6rem;padding-bottom:4.6rem}
.sec.alt{background:var(--paper-2)}
.sec.alt2{background:var(--paper-3)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.3rem}
.sec-head .sub{margin:0;color:var(--muted);font-size:.95rem;max-width:24rem;text-align:right}

.paste{animation:paste .66s cubic-bezier(.2,.72,.3,1) both}

/* ── 顶栏 ───────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem}
.brand{
  display:inline-flex;align-items:center;gap:.62rem;
  text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:.02em;margin-right:auto;
}
.brand img{width:38px;height:38px}
.nav{display:flex;flex-wrap:wrap;gap:.25rem}
.nav a{
  display:inline-block;padding:.46rem .82rem;border-radius:var(--r);
  text-decoration:none;font-size:.97rem;color:var(--ink-soft);
  transition:background .18s ease,color .18s ease;
}
.nav a:hover{background:var(--gold-l);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--gold)}

/* ── Hero ───────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,179,1,.22) 1.5px,transparent 1.7px);
  background-size:19px 19px;animation:dotShift 13s linear infinite;
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--gold)}
.hero .wrap{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;gap:3.2rem;align-items:center;
  padding-top:4rem;padding-bottom:5.4rem;
}
.hero .kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;letter-spacing:.14em;color:var(--gold);
  border:1px solid rgba(245,179,1,.55);border-radius:2px;padding:.3rem .7rem;
}
.hero h1{margin:1.1rem 0 0;font-size:clamp(2.05rem,4.3vw,3.3rem);line-height:1.18;letter-spacing:.01em}
.hero .lead{margin:1.15rem 0 0;color:#D6DAE3;font-size:1.03rem;max-width:33rem}
.pills{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.5rem 0 0}
.pills li{
  font-size:.92rem;color:#E7E9EF;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r);padding:.34rem .8rem;
}
.hero-act{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.hero .btn.line{color:#fff;border-color:#fff}
.hero .btn.line:hover{box-shadow:4px 4px 0 var(--gold)}

.visual{display:grid;grid-template-columns:1.32fr .86fr;gap:16px;align-items:start}
.visual figure{margin:0}
.visual img{
  width:100%;height:auto;border-radius:var(--r);
  border:2px solid rgba(255,255,255,.85);background:#0B0D13;
}
.visual .stack{display:grid;gap:16px}
.visual .stack img{border-color:rgba(245,179,1,.85)}

/* ── 事实条 ─────────────────────────────── */
.facts{background:var(--paper-2);border-bottom:2px solid var(--ink)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .cell{padding:1.5rem 1.3rem;border-left:2px solid var(--ink)}
.facts .cell:first-child{border-left:0}
.facts b{display:block;font-size:1.1rem;line-height:1.45}
.facts span{display:block;margin-top:.3rem;color:var(--muted);font-size:.92rem}

/* ── 分镜格功能区 ───────────────────────── */
.stage{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink);border-left:2px solid var(--ink);
}
.stage .card{
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:var(--paper-2);padding:1.6rem 1.5rem 1.75rem;
  transition:background .22s ease;
}
.stage .card:hover{background:var(--gold-l)}
.stage .card.w2{grid-column:span 2}
.stage .card h3{display:flex;align-items:baseline;gap:.72rem}
.stage .card h3 i{
  flex:0 0 auto;width:1.55rem;height:1.55rem;border-radius:2px;
  background:var(--ink);color:var(--gold);
  font-style:normal;font-weight:700;font-size:.84rem;line-height:1.55rem;text-align:center;
}
.stage .card p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* ── 预览图组 ───────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.gallery figure{
  position:relative;margin:0;padding:10px;border:2px solid var(--ink);
  border-radius:var(--r);background:var(--paper-2);
}
.gallery figure::before{
  content:"";position:absolute;left:-7px;top:-7px;width:100%;height:100%;
  background:var(--gold);border-radius:var(--r);
}
.gallery img{position:relative;width:100%;height:auto;border-radius:3px;background:#0B0D13}
.gallery figcaption{position:relative;margin-top:.72rem;text-align:center;font-size:.9rem;color:var(--ink-soft)}

/* ── 评价 ───────────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.reviews blockquote{
  position:relative;margin:0;padding:1.75rem 1.5rem 1.5rem;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2);
}
.reviews blockquote::before{
  content:"\201C";position:absolute;left:.55rem;top:-.35rem;
  font:700 3.6rem/1 Georgia,"Times New Roman",serif;color:var(--gold);
}
.reviews p{margin:.75rem 0 1.1rem;color:var(--ink-soft);font-size:.98rem}
.reviews cite{font-style:normal;font-weight:700;font-size:.9rem;color:var(--ink)}
.reviews cite em{font-style:normal;font-weight:400;color:var(--muted);margin-left:.5rem}

/* ── 入口卡 ─────────────────────────────── */
.entries{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.entry{
  display:block;text-decoration:none;padding:1.55rem 1.4rem;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.entry b{display:block;font-size:1.06rem;margin-bottom:.5rem}
.entry span{display:block;color:var(--ink-soft);font-size:.93rem}
.entry:hover{background:var(--gold);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.entry:hover span{color:#3A2C00}

/* ── 问答块 ─────────────────────────────── */
.qalist{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.qa{border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2);padding:1.4rem 1.4rem 1.5rem}
.qa h3{display:flex;gap:.7rem;align-items:flex-start;font-size:1.05rem}
.qa h3::before{
  content:"Q";flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:2px;
  background:var(--gold);color:var(--ink);font-weight:800;font-size:.84rem;
  line-height:1.5rem;text-align:center;
}
.qa p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ── CTA 条 ─────────────────────────────── */
.cta{
  position:relative;background:var(--ink);color:#fff;
  padding-top:4.3rem;padding-bottom:4.3rem;text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,179,1,.2) 1.5px,transparent 1.7px);
  background-size:19px 19px;animation:dotShift 14s linear infinite;
}
.cta .wrap{position:relative;z-index:1}
.cta h2{padding-left:0;display:inline-block}
.cta h2::before{display:none}
.cta h2::after{margin-left:auto;margin-right:auto;background:var(--gold)}
.cta p{margin:1.1rem auto 1.9rem;max-width:40rem;color:#CBD0DA}
.cta .btn.line{color:#fff;border-color:#fff}
.cta .btn.line:hover{box-shadow:4px 4px 0 var(--gold)}

/* ── 内页横幅 ───────────────────────────── */
.page-hero{position:relative;background:var(--ink);color:#fff;padding-top:3.3rem;padding-bottom:3.7rem}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,179,1,.2) 1.5px,transparent 1.7px);
  background-size:19px 19px;animation:dotShift 13s linear infinite;
}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--gold)}
.page-hero .wrap{position:relative;z-index:1;max-width:var(--col)}
.crumb{margin:0 0 .9rem;font-size:.9rem;color:#98A0AE}
.crumb a{color:var(--gold);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-hero h1{margin:0;font-size:clamp(1.72rem,3.4vw,2.6rem);line-height:1.26}
.page-hero .lead{margin:1.05rem 0 0;max-width:47rem;color:#D3D7E0;font-size:1rem}

/* ── 内页正文 ───────────────────────────── */
.doc{padding-top:3.7rem;padding-bottom:3.4rem}
.doc .block{margin-bottom:3.5rem}
.doc .block:last-child{margin-bottom:2.4rem}
.prose-2col{column-count:2;column-gap:2.8rem}
.prose-2col p{margin:0 0 1.05rem;color:var(--ink-soft);break-inside:avoid}
.prose-2col p:last-child{margin-bottom:0}
.prose-2col b{color:var(--ink)}

.figure{margin:0 0 2.6rem;display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:center}
.figure img{width:19rem;max-width:100%;height:auto;border:2px solid var(--ink);border-radius:var(--r);background:#0B0D13}
.figure figcaption{margin:0;max-width:32rem;color:var(--ink-soft);font-size:.97rem}
.figure.flip{grid-template-columns:1fr auto}
.figure.flip img{order:2}

.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;margin:0 0 2.4rem}
.duo figure{margin:0}
.duo img{width:100%;max-width:19rem;margin-left:auto;margin-right:auto;height:auto;border:2px solid var(--ink);border-radius:var(--r);background:#0B0D13}
.duo figcaption{margin:.75rem auto 0;max-width:19rem;color:var(--ink-soft);font-size:.93rem}

.steps{border-top:2px solid var(--ink);border-left:2px solid var(--ink);margin:0 0 2.4rem}
.steps li{
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:1.15rem 1.4rem;display:flex;gap:.9rem;align-items:flex-start;background:var(--paper-2);
}
.steps li b{flex:0 0 auto;color:var(--gold-d)}
.steps li span{color:var(--ink-soft)}

/* ── 翻页导航 ───────────────────────────── */
.pager{display:grid;grid-template-columns:1fr auto 1fr;border:2px solid var(--ink);border-radius:var(--r)}
.pager a{display:block;padding:1.3rem 1.45rem;text-decoration:none;transition:background .2s ease}
.pager a:hover{background:var(--gold-l)}
.pager b{display:block;font-size:1.02rem}
.pager span{display:block;margin-top:.28rem;color:var(--muted);font-size:.88rem}
.pager .prev{border-right:2px solid var(--ink)}
.pager .mid{border-right:2px solid var(--ink);text-align:center;background:var(--paper-3);display:flex;align-items:center;justify-content:center}
.pager .next{text-align:right}

/* ── 页脚 ───────────────────────────────── */
.footer{position:relative;background:var(--ink);color:#A9AEBB;padding-top:3.5rem;padding-bottom:2.2rem}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,179,1,.14) 1.5px,transparent 1.7px);
  background-size:19px 19px;
}
.footer .wrap{position:relative;z-index:1}
.footer .fbrand{display:flex;align-items:center;gap:.68rem;color:#fff;font-weight:800;font-size:1.18rem;margin-bottom:1.1rem}
.footer .fbrand img{width:34px;height:34px}
.footer .fnav{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.7rem}
.footer .fnav a{color:#C9CED9;text-decoration:none;font-size:.95rem}
.footer .fnav a:hover{color:var(--gold)}
.footer .disc{
  border-top:1px solid rgba(255,255,255,.18);padding-top:1.55rem;
  font-size:.9rem;line-height:1.9;max-width:54rem;
}
.footer .copy{margin:.9rem 0 0;font-size:.85rem;color:#7C8393}

/* ── 动效 ───────────────────────────────── */
@keyframes paste{
  from{opacity:0;transform:rotate(-2.2deg) translateY(16px) scale(.965)}
  to{opacity:1;transform:none}
}
@keyframes dotShift{
  from{background-position:0 0}
  to{background-position:64px 32px}
}
@keyframes barGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* ── 断点 ───────────────────────────────── */
@media (max-width:980px){
  .topbar{position:static}
  .brand{margin-right:0;width:100%}
  .topbar .wrap{padding-top:.75rem;padding-bottom:.75rem}
  .hero .wrap{grid-template-columns:1fr;gap:2.4rem;padding-top:2.8rem;padding-bottom:3.6rem}
  .visual{max-width:33rem;margin-left:auto;margin-right:auto}
  .facts .wrap{grid-template-columns:repeat(2,1fr)}
  .facts .cell{border-top:2px solid var(--ink)}
  .facts .cell:nth-child(-n+2){border-top:0}
  .facts .cell:nth-child(odd){border-left:0}
  .stage{grid-template-columns:repeat(2,1fr)}
  .gallery,.reviews,.entries{grid-template-columns:repeat(2,1fr)}
  .qalist{grid-template-columns:1fr}
  .prose-2col{column-count:1}
  .figure,.figure.flip{grid-template-columns:1fr;gap:1.5rem}
  .figure.flip img{order:0}
  .figure img{margin-left:auto;margin-right:auto}
  .figure figcaption{max-width:none}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head .sub{text-align:left;max-width:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding-left:1.1rem;padding-right:1.1rem}
  .sec{padding-top:3.3rem;padding-bottom:3.3rem}
  .facts .wrap{grid-template-columns:1fr}
  .facts .cell{border-left:0;border-top:2px solid var(--ink)}
  .facts .cell:first-child{border-top:0}
  .stage,.gallery,.reviews,.entries,.duo{grid-template-columns:1fr}
  .stage .card.w2{grid-column:auto}
  .gallery figure::before{display:none}
  .hero .wrap{padding-top:2.2rem;padding-bottom:3rem}
  .hero-act .btn{flex:1 1 auto}
  .pager{grid-template-columns:1fr}
  .pager .prev,.pager .mid{border-right:0;border-bottom:2px solid var(--ink)}
  .pager .next{text-align:left}
  .page-hero{padding-top:2.4rem;padding-bottom:2.8rem}
  .doc{padding-top:2.6rem;padding-bottom:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}