@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ══ 汗汗漫画 · hanhancomic.cn
   视觉档位 20：宣纸底 + 墨黑 / 朱砂 / 黛青（B6 国风动漫）
   底色 生宣亮米 #FBF7EF，主色 墨黑 #1B1916，强调 朱砂 #B0342A，链接 黛青 #33566B
   CTA：朱砂实底 + 直角 + 左端双竖线（简牍编绳），hover 反色成墨
   Hero：深墨渐变 + 回纹 + 朱砂「朱日」/ 黛青光斑
   ══ */

:root{
  --paper:#FBF7EF;      /* 生宣亮米 */
  --paper-2:#FFFDF8;    /* 宣纸卡 */
  --paper-3:#F2EBDC;    /* 陈纸段 */
  --line:#E5DCC9;
  --ink:#1B1916;
  --ink-2:#3D3833;
  --ink-3:#6E665C;
  --zhu:#B0342A;
  --zhu-lt:#C9453A;
  --zhu-dk:#8A231B;
  --zhu-bg:#F7E4DF;
  --dai:#33566B;
  --dai-lt:#4A7288;
  --dai-bg:#E4EBF0;
  --zhe:#C09A46;
  --star:#D9A93C;
  --foot:#0D0C0A;
  --hero-1:#141210;
  --hero-2:#221C16;
  --hero-3:#2C2118;
  --serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC",Georgia,serif;
  --sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",Arial,sans-serif;
  /* 32px 回纹（方框套方框）—— 本品牌首次使用 */
  --pat-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 2h28v28H2z M11 11h10v10H11z' fill='none' stroke='%23FBF7EF' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");
  --pat-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 2h28v28H2z M11 11h10v10H11z' fill='none' stroke='%231B1916' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font:400 16px/1.82 var(--sans);
  background-image:var(--pat-paper);background-size:32px 32px;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--dai);text-decoration:none}
a:hover{color:var(--zhu)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);margin:0;line-height:1.34}
p{margin:0}
[id]{scroll-margin-top:104px}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ─────────────── 头部 ─────────────── */
.hd{position:sticky;top:0;z-index:60;background:rgba(251,247,239,.96);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(27,25,22,.05)}
.hd::after{content:"";display:block;height:2px;background:
  linear-gradient(90deg,var(--zhu) 0 22%,var(--zhe) 22% 40%,transparent 40%)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:21px;font-weight:700;color:var(--ink);letter-spacing:.5px}
.brand img{width:38px;height:38px;border-radius:10px;
  box-shadow:0 0 0 1px rgba(27,25,22,.16)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--ink-2);font-size:15px;padding:8px 13px;border-radius:4px;white-space:nowrap}
.nav a:hover{color:var(--zhu);background:var(--zhu-bg)}
.nav a.on{color:var(--zhu-dk);background:var(--zhu-bg);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--zhu)}
.btn--hd{flex:0 0 auto;padding:11px 20px;font-size:15px}

/* ─────────────── 按钮（简牍） ─────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border:0;cursor:pointer;border-radius:3px;
  padding:15px 30px 15px 40px;
  font:700 17px/1 var(--sans);color:var(--paper-2);
  background:linear-gradient(135deg,var(--zhu-lt),var(--zhu) 55%,var(--zhu-dk));
  box-shadow:inset 0 0 0 1px rgba(27,25,22,.34);
  transition:background .22s,transform .22s,box-shadow .22s}
.btn::before,.btn::after{content:"";position:absolute;top:10px;bottom:10px;width:2px;
  background:rgba(255,253,248,.8)}
.btn::before{left:14px}
.btn::after{left:21px}
.btn:hover,.btn:focus{background:var(--ink);color:var(--paper-2);
  transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--zhe)}
.btn--ghost{padding:14px 26px;background:transparent;color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(251,247,239,.5)}
.btn--ghost::before,.btn--ghost::after{left:14px;background:rgba(251,247,239,.75)}
.btn--ghost:hover{background:var(--zhu);color:var(--paper)}
.btn--line{padding:14px 26px;background:transparent;color:var(--zhu-dk);
  box-shadow:inset 0 0 0 1px var(--zhu)}
.btn--line::before,.btn--line::after{background:var(--zhu)}
.btn--line:hover{background:var(--zhu);color:var(--paper-2)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ─────────────── Hero ─────────────── */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--zhu);
  background:linear-gradient(155deg,var(--hero-1),var(--hero-2) 48%,var(--hero-3));
  color:#EFE7DA}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--pat-ink);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000 6%,transparent 84%);
  mask-image:linear-gradient(180deg,#000 6%,transparent 84%)}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 86% 14%,rgba(176,52,42,.44),transparent 45%),
             radial-gradient(circle at 4% 94%,rgba(51,86,107,.46),transparent 52%)}
.hero-in{position:relative;z-index:2;display:grid;gap:46px;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;padding:62px 0 66px}
.hero-in>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:2px;
  color:var(--zhe);border:1px solid rgba(192,154,70,.45);border-radius:3px;
  padding:6px 13px;margin-bottom:20px}
.eyebrow i{width:6px;height:6px;background:var(--zhu-lt);transform:rotate(45deg)}
.hero h1{font-size:clamp(32px,4.5vw,52px);color:#FDFAF2;letter-spacing:1px}
.lead{margin-top:20px;font-size:17.5px;line-height:1.92;color:#DCD2C2;max-width:56ch}
.hero .cta-row{margin-top:28px}
.quickbar{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
.quickbar a{font-size:14px;color:#E8DECD;padding:7px 14px;border-radius:3px;
  background:rgba(251,247,239,.09);box-shadow:inset 0 0 0 1px rgba(251,247,239,.2)}
.quickbar a:hover{color:#fff;background:var(--zhu);box-shadow:inset 0 0 0 1px var(--zhu)}
.hero-shot{display:flex;justify-content:center}
.hero-shot img{width:100%;max-width:292px;border-radius:18px;
  box-shadow:0 26px 54px rgba(0,0,0,.52),0 0 0 7px #2A241D,0 0 0 8px rgba(192,154,70,.4)}

/* ─────────────── 内页横幅 ─────────────── */
.page-hero{position:relative;overflow:hidden;border-bottom:3px solid var(--zhu);
  background:linear-gradient(150deg,#FDFAF3,var(--paper-3))}
.page-hero::before{content:"";position:absolute;inset:0;background-image:var(--pat-paper);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000 6%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 6%,transparent 88%)}
.page-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% 10%,rgba(176,52,42,.13),transparent 42%),
             radial-gradient(circle at 6% 96%,rgba(51,86,107,.12),transparent 48%)}
.page-hero .wrap{position:relative;z-index:2;padding-top:50px;padding-bottom:50px}
.page-hero h1{font-size:clamp(27px,3.4vw,40px)}
.page-hero .lead{color:var(--ink-2);margin-top:16px;font-size:17px}
/* 浅色横幅上的入口条要换成深色字，否则沿用了深色 Hero 的浅字 → 对比度不足（肉眼闸实测） */
.page-hero .quickbar a{color:var(--dai);background:rgba(255,253,248,.92);
  box-shadow:inset 0 0 0 1px var(--line)}
.page-hero .quickbar a:hover{color:var(--paper-2);background:var(--zhu);
  box-shadow:inset 0 0 0 1px var(--zhu)}

/* ─────────────── 区块 ─────────────── */
.sec{padding:66px 0}
.sec--paper3{background:var(--paper-3)}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--hero-1);color:#D8CFC0;position:relative;overflow:hidden}
.sec--ink::before{content:"";position:absolute;inset:0;background-image:var(--pat-ink);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);
  mask-image:linear-gradient(180deg,#000,transparent 90%)}
.sec--ink .wrap{position:relative;z-index:2}
.sec-head{max-width:74ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(22px,2.5vw,31px);letter-spacing:.5px;
  padding-left:16px;border-left:4px solid var(--zhu)}
.sec-head .sub{margin-top:14px;font-size:16px;color:var(--ink-3);padding-left:16px}
.sec--ink .sec-head h2{color:#FDFAF2;border-left-color:var(--zhe)}
.sec--ink .sec-head .sub{color:#A99E8D}

/* ─────────────── 速览入口 · 卡片网格 ─────────────── */
.entries{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.entries>*{min-width:0}
.entry{display:block;background:var(--paper-2);border:1px solid var(--line);
  border-radius:5px;padding:20px 20px 18px;color:var(--ink-2);
  box-shadow:0 1px 0 rgba(27,25,22,.04);transition:transform .2s,box-shadow .2s}
.entry:hover{transform:translateY(-2px);color:var(--ink-2);
  box-shadow:0 10px 22px rgba(27,25,22,.1)}
.entry b{display:block;font-family:var(--serif);font-size:15px;color:var(--zhu);
  letter-spacing:1px;margin-bottom:9px}
.entry h3{font-size:19px;margin-bottom:8px}
.entry p{font-size:14.5px;line-height:1.78;color:var(--ink-3)}
.entry .more{margin-top:12px;font-size:13.5px;color:var(--dai)}
.entry:hover .more{color:var(--zhu)}

/* ─────────────── 双栏 ─────────────── */
.duo{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:center}
.duo>*{min-width:0}
.duo .shot img{width:auto;height:auto;max-width:100%;max-height:520px;margin:0 auto;
  border-radius:16px;box-shadow:0 18px 40px rgba(27,25,22,.2),0 0 0 1px var(--line)}

/* ─────────────── 要点列表 ─────────────── */
.points{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.points li{position:relative;padding-left:26px;font-size:16px}
.points li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;
  background:var(--zhu);transform:rotate(45deg)}
.points b{color:var(--ink)}

/* ─────────────── 步骤 ─────────────── */
.steps{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps>*{min-width:0}
.step{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:24px 22px}
.step em{display:block;font-family:'Cormorant Garamond',var(--serif);font-size:34px;
  font-weight:600;color:var(--zhu);line-height:1;margin-bottom:12px}
.step h3{font-size:18px;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--ink-3)}

/* ─────────────── 表格 ─────────────── */
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px;
  background:var(--paper-2);border:1px solid var(--line)}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line)}
thead th{background:var(--dai-bg);color:var(--dai);font-weight:700;font-size:14.5px}
tbody tr:nth-child(even){background:#FCFAF4}
td:first-child{color:var(--ink);font-weight:700}
.tbl-cap{margin:0 0 12px;font-size:15px;color:var(--ink-3)}
.tbl-cap b{color:var(--ink)}
.tbl-note{margin:12px 0 0;font-size:13.5px;color:var(--ink-3)}
.grid-2{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid-2>*{min-width:0}
/* 竖版截图放进双栏会把整行撑到上千像素（两栏高度差过大），统一限高；
   width:auto + max-height 按比例缩放，不触发 stretched 假报。限高只加在这里，不加到全局 img。 */
.grid-2 img{max-height:520px;width:auto;margin:0 auto}

/* ─────────────── 图集 ─────────────── */
.gallery{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery>*{min-width:0}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:14px;
  box-shadow:0 12px 26px rgba(27,25,22,.16),0 0 0 1px var(--line)}
.gallery figcaption{margin-top:11px;font-size:14px;color:var(--ink-3);line-height:1.7}

/* ─────────────── 评价 ─────────────── */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.quotes>*{min-width:0}
.quote{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;
  padding:22px 22px 20px;position:relative}
.quote p{font-size:15.5px;line-height:1.86}
.quote footer{margin-top:14px;font-size:13.5px;color:var(--ink-3);
  border-top:1px dashed var(--line);padding-top:11px}
.stars{color:var(--star);font-size:15px;letter-spacing:2px;margin-bottom:9px}

/* ─────────────── FAQ ─────────────── */
.faq{display:grid;gap:12px}
details{background:var(--paper-2);border:1px solid var(--line);border-radius:5px}
details[open]{border-color:#E3CDB2}
summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--ink);
  font-size:16px;list-style:none;position:relative;padding-right:46px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:22px;color:var(--zhu)}
details[open] summary::after{content:"—";font-size:17px}
details .ans{padding:0 20px 18px;font-size:15.5px;color:var(--ink-2);line-height:1.88}
.sec--ink details{background:#1D1913;border-color:#332B22}
.sec--ink summary{color:#F3EBDD}
.sec--ink details .ans{color:#C4B9A7}

/* ─────────────── 提示块 ─────────────── */
.tip{background:var(--zhu-bg);border-left:4px solid var(--zhu);border-radius:4px;
  padding:18px 20px;font-size:15.5px}
.tip b{color:var(--zhu-dk)}
.tip--dai{background:var(--dai-bg);border-left-color:var(--dai)}
.tip--dai b{color:var(--dai)}

/* ─────────────── 墨色满幅 CTA ─────────────── */
.cta{position:relative;overflow:hidden;background:linear-gradient(140deg,#191612,#251F19);
  color:#D8CFC0;padding:56px 0}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--pat-ink);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(circle at 72% 40%,#000,transparent 74%);
  mask-image:radial-gradient(circle at 72% 40%,#000,transparent 74%)}
.cta::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% 24%,rgba(176,52,42,.34),transparent 46%)}
.cta .wrap{position:relative;z-index:2;display:flex;gap:30px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:clamp(21px,2.4vw,29px);color:#FDFAF2}
.cta .cta-note{margin-top:12px;font-size:15.5px;color:#B7AB99;max-width:62ch}

/* ─────────────── 页脚 ─────────────── */
.foot{background:var(--foot);color:#B7B0A3;padding:52px 0 26px;border-top:3px solid var(--zhu)}
.foot-in{display:grid;gap:34px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.foot-in>*{min-width:0}
.foot h3{font-family:var(--serif);color:#F3EBDD;font-size:17px;margin-bottom:14px}
.foot p{font-size:14.5px;line-height:1.85;color:#A79E8F}
.foot-col a{display:block;color:#CFC6B6;font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--zhe)}
.foot-dis{margin-top:34px;padding:18px 0 0;border-top:1px solid #2A2622;
  font-size:13.5px;line-height:1.8;color:#948B7D}
.foot-bot{margin-top:12px;font-size:13px;color:#7C7365}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand img{width:34px;height:34px;border-radius:9px}

/* ─────────────── 动效 ─────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .62s ease,transform .62s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ─────────────── 响应式 ≤980 ─────────────── */
@media (max-width:980px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:34px;padding:46px 0 52px}
  .hero-shot{order:-1}
  .hero-shot img{max-width:250px}
  .entries,.steps,.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .duo,.grid-2{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sec{padding:52px 0}
}

/* ─────────────── 响应式 ≤620 ─────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  [id]{scroll-margin-top:128px}
  .wrap{padding:0 16px}
  .hd-in{gap:10px;padding:9px 0;min-height:0}
  .brand{order:1;font-size:19px}
  .brand img{width:33px;height:33px}
  .nav{order:3;flex:0 0 100%;margin-left:0;gap:3px}
  .nav a{flex:0 0 calc(25% - 3px);text-align:center;font-size:13.5px;padding:8px 4px}
  .btn--hd{order:2;margin-left:auto;padding:9px 14px;font-size:14px;padding-left:26px}
  .btn--hd::before{left:10px}
  .btn--hd::after{left:16px}
  .hero-in{padding:34px 0 40px;gap:26px}
  .hero h1{font-size:clamp(26px,7.4vw,34px)}
  .lead{font-size:16px}
  .quickbar a{font-size:13px;padding:6px 11px}
  .entries,.steps,.quotes,.gallery{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sec{padding:42px 0}
  .sec-head{margin-bottom:26px}
  .btn{width:100%;padding-left:36px}
  .btn::before{left:12px}
  .btn::after{left:19px}
  /* 头部那颗按钮留在品牌同一行，不跟着正文按钮铺满整行 */
  .btn--hd{width:auto;padding-left:26px}
  .btn--hd::before{left:10px}
  .btn--hd::after{left:16px}
  .cta .wrap{gap:20px}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}