/* ============================================================
   墨影生图 · 古风设计系统
   全部样式本地化，无外链字体，使用系统自带宋体/楷体，零版权风险
   ============================================================ */
:root{
  --paper:#f5efe2;
  --paper-2:#efe6d3;
  --card:#fbf7ec;
  --ink:#221e17;
  --ink-2:#48423a;
  --ink-3:#7e7565;
  --gold:#a9854a;
  --gold-soft:rgba(169,133,74,.35);
  --gold-faint:rgba(169,133,74,.14);
  --red:#9d2b2b;
  --jade:#55736a;
  --line:rgba(169,133,74,.28);
  --shadow:0 10px 34px rgba(72,58,34,.10);
  --serif:"Songti SC","STSong","SimSun","NSimSun","Noto Serif SC","Source Han Serif SC",serif;
  --kai:"Kaiti SC","STKaiti","KaiTi","SimKai",var(--serif);
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.8;color:var(--ink-2);
  background:var(--paper);
  background-image:
    radial-gradient(1200px 500px at 85% -5%, rgba(169,133,74,.07), transparent 60%),
    radial-gradient(900px 420px at -10% 30%, rgba(85,115,106,.05), transparent 55%);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--ink);text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;color:var(--ink)}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:6px}
::-webkit-scrollbar-track{background:var(--paper-2)}

/* ============================================================
   顶部导航（下滚隐藏 / 上滚显示）
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:transform .38s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .3s;
  background:rgba(245,239,226,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.topbar.is-solid{background:rgba(248,243,232,.96);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(72,58,34,.08)}
.topbar.is-hidden{transform:translateY(-105%)}
.topbar-in{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-seal{
  width:38px;height:38px;background:var(--red);color:#f8ece2;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--kai);font-size:20px;line-height:1;
  box-shadow:inset 0 0 0 2px rgba(248,236,226,.35);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.3}
.brand-name{font-family:var(--serif);font-size:20px;color:var(--ink);letter-spacing:.14em;white-space:nowrap}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:.28em;white-space:nowrap}
.nav-desk{display:flex;gap:4px;margin-left:auto}
.nav-desk a{
  position:relative;display:block;padding:8px 12px;font-family:var(--serif);
  font-size:15px;color:var(--ink-2);letter-spacing:.08em;border-radius:3px;transition:color .25s;
}
.nav-desk a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .28s;
}
.nav-desk a:hover,.nav-desk a.on{color:var(--ink)}
.nav-desk a:hover::after,.nav-desk a.on::after{transform:scaleX(1)}
.top-cta{flex-shrink:0}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;position:relative;z-index:140}
.nav-toggle span{
  display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;
  transition:transform .3s,opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 移动端抽屉菜单 */
.drawer-mask{
  position:fixed;inset:0;z-index:125;background:rgba(34,30,23,.45);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer-mask.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:130;width:min(330px,86vw);
  background:var(--paper);border-left:1px solid var(--line);
  padding:96px 34px 34px;overflow-y:auto;
  transform:translateX(102%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  box-shadow:-16px 0 44px rgba(34,30,23,.18);
}
.drawer.open{transform:translateX(0)}
.drawer-close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;color:var(--ink-2);
  border:1px solid var(--line);border-radius:50%;background:var(--card);
  transition:all .25s;
}
.drawer-close:hover{color:#f8ece2;background:var(--red);border-color:var(--red)}
.drawer nav a{
  display:flex;align-items:baseline;gap:14px;padding:15px 4px;
  font-family:var(--serif);font-size:19px;color:var(--ink);
  border-bottom:1px dashed var(--line);
}
.drawer nav a i{font-style:normal;font-family:var(--kai);font-size:13px;color:var(--gold)}
.drawer nav a.cur{color:var(--red)}
.drawer .drawer-cta{margin-top:26px;width:100%}
body.drawer-open{overflow:hidden}

/* ============================================================
   通用元件
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 30px;border:1px solid var(--gold);color:var(--ink);
  font-family:var(--serif);font-size:16px;letter-spacing:.18em;
  background:transparent;transition:all .3s;border-radius:2px;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-primary{background:var(--red);border-color:var(--red);color:#f8ece2}
.btn-primary:hover{background:var(--ink);border-color:var(--ink)}
.btn-sm{padding:9px 20px;font-size:14px}

.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:var(--kai);font-size:15px;color:var(--gold);letter-spacing:.3em;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .kicker{justify-content:center}
.sec-head .kicker::after{content:"";width:34px;height:1px;background:var(--gold)}
.sec-head h2{font-size:clamp(26px,4vw,38px);letter-spacing:.12em}
.sec-head p{margin-top:14px;color:var(--ink-3);max-width:640px;margin-left:auto;margin-right:auto}

.sec{padding:clamp(58px,9vw,104px) 0;position:relative}
.sec-alt{background:linear-gradient(180deg,var(--paper-2),var(--paper))}

.divider{
  display:flex;align-items:center;gap:16px;max-width:420px;margin:0 auto;
  color:var(--gold);font-size:12px;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* 古风画框 */
.art-frame{
  background:#fdf9ee;border:1px solid var(--line);padding:12px;position:relative;
  box-shadow:14px 14px 0 var(--gold-faint),var(--shadow);
}
.art-frame::before{content:"";position:absolute;inset:7px;border:1px solid rgba(169,133,74,.22);pointer-events:none}
.art-frame img{width:100%}
figcaption{font-family:var(--kai);font-size:14px;color:var(--ink-3);text-align:center;padding:12px 6px 2px;letter-spacing:.14em}

/* 卡片角饰 */
.card{
  position:relative;background:var(--card);border:1px solid var(--line);
  padding:34px 28px;transition:transform .35s,box-shadow .35s;
}
.card::before,.card::after{
  content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;
}
.card::before{top:6px;left:6px;border-width:1.5px 0 0 1.5px}
.card::after{bottom:6px;right:6px;border-width:0 1.5px 1.5px 0}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card h3{font-size:19px;letter-spacing:.1em;margin-bottom:12px}
.card h3 em{font-style:normal;color:var(--red);margin-right:8px;font-family:var(--kai)}
.card p{font-size:14.5px;color:var(--ink-3)}

/* 印章角标 */
.seal-tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:var(--red);color:#f8ece2;border-radius:3px;
  font-family:var(--kai);font-size:15px;flex-shrink:0;
  box-shadow:inset 0 0 0 1.5px rgba(248,236,226,.4);
}

/* 面包屑 */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--gold)}
.crumbs span::before{content:"／";margin-right:8px;color:var(--gold-soft)}

/* ============================================================
   首页 Hero
   ============================================================ */
.hero{padding:150px 0 70px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-side{position:absolute;left:18px;top:170px;writing-mode:vertical-rl;font-family:var(--kai);
  font-size:13px;letter-spacing:.5em;color:var(--ink-3);opacity:.7}
.nw{white-space:nowrap}
.hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.34;letter-spacing:.06em;margin:20px 0 8px}
.hero h1 .accent{color:var(--red)}
.hero-sub{font-family:var(--kai);font-size:17px;color:var(--gold);letter-spacing:.32em;margin-bottom:20px}
.hero-desc{max-width:520px;color:var(--ink-3);margin-bottom:36px}
.hero-acts{display:flex;flex-wrap:wrap;gap:16px}
.hero-meta{display:flex;gap:30px;margin-top:42px;padding-top:26px;border-top:1px dashed var(--line)}
.hero-meta b{display:block;font-family:var(--serif);font-size:24px;color:var(--ink)}
.hero-meta i{font-style:normal;font-size:12.5px;color:var(--ink-3);letter-spacing:.16em}

/* ============================================================
   首页区块
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}

/* 步骤 */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.step .num{font-family:var(--kai);font-size:42px;color:var(--gold-faint);position:absolute;top:-8px;right:0;
  -webkit-text-stroke:1px var(--gold);color:transparent;line-height:1}
.step h3{font-size:18px;letter-spacing:.1em;margin:8px 0 10px}
.step p{font-size:14px;color:var(--ink-3)}

/* 画廊 */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gallery figure:nth-child(2){transform:translateY(26px)}

/* 课程导航卡 */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.path{display:block;padding:30px 26px;border:1px solid var(--line);background:var(--card);
  position:relative;overflow:hidden;transition:all .35s}
.path::after{
  content:attr(data-num);position:absolute;right:10px;bottom:-14px;
  font-family:var(--kai);font-size:64px;color:var(--gold-faint);line-height:1;
}
.path:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow)}
.path h3{font-size:18px;letter-spacing:.08em;margin-bottom:10px}
.path p{font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.path .more{font-size:13px;color:var(--gold);letter-spacing:.2em}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);background:var(--card);margin-bottom:14px}
.faq-q{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  padding:19px 22px;font-family:var(--serif);font-size:16.5px;color:var(--ink);letter-spacing:.04em;
}
.faq-q .mark{color:var(--gold);font-family:var(--kai);flex-shrink:0}
.faq-q .arrow{margin-left:auto;color:var(--gold);transition:transform .3s;flex-shrink:0}
.faq-item.open .arrow{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px 56px;font-size:14.5px;color:var(--ink-3)}
html:not(.js) .faq-a{display:block}

/* ---------- 二级页 ---------- */
.page-hero{padding:140px 0 60px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.page-hero h1{font-size:clamp(28px,3.8vw,42px);line-height:1.42;letter-spacing:.08em;margin-bottom:18px}
.page-hero .lede{color:var(--ink-3);max-width:560px;margin-bottom:28px}
.page-hero .art-frame{transform:rotate(.6deg)}

.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:24px;letter-spacing:.1em;margin:56px 0 18px;display:flex;align-items:center;gap:14px}
.prose h2::before{content:"";width:5px;height:24px;background:var(--red);border-radius:2px;flex-shrink:0}
.prose h3{font-size:18px;margin:30px 0 12px;color:var(--ink)}
.prose p{margin-bottom:16px;color:var(--ink-2);font-size:15.5px}
.prose ul,.prose ol{margin:0 0 18px 4px}
.prose ul li,.prose ol li{
  position:relative;padding-left:22px;margin-bottom:10px;color:var(--ink-2);font-size:15px;
}
.prose ul li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;
  background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:li}
.prose ol li::before{content:counter(li,cjk-ideographic);counter-increment:li;position:absolute;left:0;top:0;
  font-family:var(--kai);color:var(--gold)}
.prose blockquote{
  margin:22px 0;padding:18px 24px;border-left:3px solid var(--gold);
  background:var(--card);font-family:var(--kai);color:var(--ink-2);font-size:15.5px;
}
.prose figure{margin:30px 0}
.prose strong{color:var(--ink)}
.prose code{
  font-family:Consolas,Menlo,monospace;font-size:13.5px;background:var(--paper-2);
  border:1px solid var(--line);padding:2px 7px;border-radius:3px;color:var(--ink);
}
.kw-chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.kw-chips code{background:var(--card);padding:6px 12px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--kai);font-size:14px;color:var(--ink-2)}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:14px;background:var(--card)}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.tbl th{background:var(--paper-2);font-family:var(--serif);color:var(--ink);letter-spacing:.06em}
.tbl td{color:var(--ink-2)}

/* 相关阅读 */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rel-card{display:block;padding:24px;border:1px solid var(--line);background:var(--card);transition:all .3s}
.rel-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.rel-card b{display:block;font-family:var(--serif);color:var(--ink);font-size:16px;margin-bottom:8px;letter-spacing:.06em}
.rel-card span{font-size:13px;color:var(--ink-3)}

/* ---------- 页脚 ---------- */
.footer{background:#241f18;color:#c9bfae;margin-top:40px;position:relative}
.footer::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold),var(--red),var(--gold))}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding:64px 0 44px}
.footer h4{color:#efe6d3;font-size:16px;letter-spacing:.16em;margin-bottom:18px}
.footer p{font-size:13.5px;line-height:1.9;color:#a2988a}
.footer nav a{display:block;padding:6px 0;font-size:13.5px;color:#a2988a;transition:color .25s}
.footer nav a:hover{color:var(--gold-2,#c9ab72)}
.footer .brand-name{color:#efe6d3}
.footer .brand-sub{color:#8d8477}
.footer-bar{border-top:1px solid rgba(201,191,174,.15);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8d8477}

/* 回到顶部 */
.totop{
  position:fixed;right:26px;bottom:30px;z-index:110;width:46px;height:46px;
  border:1px solid var(--gold);background:rgba(248,243,232,.92);color:var(--gold);
  font-family:var(--kai);font-size:15px;border-radius:50%;
  box-shadow:var(--shadow);transition:all .3s;
}
.totop:hover{background:var(--red);border-color:var(--red);color:#f8ece2}

/* 入场动画（仅 JS 可用时启用，保证无 JS 时内容完整可见） */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .hero-side{display:none}
}
@media (max-width:960px){
  .nav-desk,.top-cta{display:none}
  .nav-toggle{display:block}
  .hero-grid,.page-hero-grid,.grid-2{grid-template-columns:1fr;gap:38px}
  .hero{padding-top:120px}
  .paths,.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(2){transform:none}
  .rel-grid{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  .grid-3,.grid-4,.paths,.gallery,.steps{grid-template-columns:1fr}
  .hero{padding:108px 0 54px}
  .hero h1{letter-spacing:.06em}
  .hero-acts .btn{width:100%}
  .hero-meta{gap:20px;flex-wrap:wrap}
  .page-hero{padding:112px 0 46px}
  .footer-in{grid-template-columns:1fr;gap:30px;padding:48px 0 34px}
  .faq-q{font-size:15.5px;padding:16px 16px}
  .faq-a{padding:0 16px 16px 48px}
  .totop{right:16px;bottom:20px}
  .prose h2{font-size:21px}
}