/* ═══════════════════════════════════════════════════════════════
   羊皮纸手稿风设计系统 · Parchment Manuscript System
   《AI驱动的传媒内容制作》课程门户 — 多页面版
   纸色 · 墨字 · 朱砂印 · 楷体标题
   ═══════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#F0E6CF;      /* 羊皮米黄 */
  --paper-2:#E8DCBC;    /* 卡片纸 */
  --paper-3:#EFE4C6;    /* 卡片纸 · 亮 */
  --paper-hi:#F7EFDA;   /* 纸面高光 */
  --ink:#3A2E20;        /* 深褐墨色 */
  --ink-2:#6E5B41;      /* 次要墨色 */
  --ink-3:#9C8964;      /* 弱化墨色 */
  --line:#D3C4A0;       /* 细线 */
  --line-2:#C7B189;     /* 界线 */
  --cinnabar:#A2402F;   /* 朱砂 */
  --indigo:#33567C;     /* 靛青 */
  --verdigris:#51724B;  /* 铜绿 */
  --gold:#8C6A2F;       /* 暗金 */
  --ink-panel:#241B11;  /* 乌丝栏墨底 */
  --shadow:0 2px 14px rgba(107,90,68,.16);
  --shadow-lift:0 10px 26px rgba(107,90,68,.24);
  --kai:'Kaiti SC','STKaiti','KaiTi','Noto Serif SC','Songti SC','SimSun',serif;
  --latin:'EB Garamond',Georgia,'Times New Roman',serif;
  --hei:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
}
html{scroll-behavior:smooth;font-size:17px}
body{
  font-family:var(--hei);background:var(--paper);color:var(--ink);
  line-height:1.75;overflow-x:hidden;
}
/* 纸面氛围：高光 · 斑驳 · 纸纹 · 四角暗角（纯 CSS，无外链图片） */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(6px 5px at 12% 22%, rgba(140,106,47,.10), transparent 70%),
    radial-gradient(9px 7px at 78% 12%, rgba(107,90,68,.08), transparent 70%),
    radial-gradient(7px 9px at 64% 68%, rgba(140,106,47,.07), transparent 70%),
    radial-gradient(11px 8px at 22% 84%, rgba(107,90,68,.07), transparent 70%),
    radial-gradient(1100px 700px at 16% 6%, rgba(255,250,235,.6), transparent 60%),
    radial-gradient(900px 620px at 86% 92%, rgba(156,137,100,.16), transparent 62%),
    radial-gradient(720px 520px at 72% 24%, rgba(140,106,47,.07), transparent 56%),
    radial-gradient(640px 420px at 26% 78%, rgba(107,90,68,.08), transparent 56%);
}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 38%, transparent 58%, rgba(58,46,32,.15) 100%)}
::selection{background:rgba(162,64,47,.18)}
a{color:var(--cinnabar);text-decoration:none;transition:color .2s}
a:hover{color:#7C2F22}
img{max-width:100%}

/* ── 印章 ── */
.seal{display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--cinnabar);color:var(--cinnabar);border-radius:6px;
  font-family:var(--kai);font-weight:700;background:rgba(162,64,47,.06);
  transform:rotate(-4deg);box-shadow:inset 0 0 0 1px rgba(162,64,47,.25);
  user-select:none}
.seal:hover{transform:rotate(-1deg)}
.seal svg{width:62%;height:62%;display:block}
.pnav .seal{width:36px;height:36px;font-size:19px;flex-shrink:0}

/* ── 顶部导航 ── */
.pnav{position:sticky;top:0;z-index:1000;
  background:rgba(240,230,207,.94);backdrop-filter:blur(14px);
  border-bottom:3px double var(--line-2)}
.pnav-inner{max-width:1200px;margin:0 auto;padding:10px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.pnav-brand{display:flex;align-items:center;gap:11px;color:var(--ink);flex-shrink:0}
.pnav-title{font-family:var(--kai);font-size:18px;font-weight:700;letter-spacing:1px}
.pnav-sub{display:block;font-family:var(--latin);font-size:10.5px;color:var(--ink-3);
  letter-spacing:2.5px;text-transform:uppercase;margin-top:-2px}
.pnav-links{display:flex;gap:4px;align-items:center;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.pnav-links a{color:var(--ink-2);font-size:14px;padding:5px 11px;border-radius:4px;
  border:1px solid transparent;transition:all .2s;white-space:nowrap}
.pnav-links a:hover{color:var(--cinnabar);border-color:rgba(162,64,47,.35);background:rgba(162,64,47,.05)}
.pnav-links a.here{color:var(--cinnabar);border-color:rgba(162,64,47,.4);
  background:rgba(162,64,47,.07);font-weight:600}
.lang-switch{display:inline-flex;align-items:stretch;margin-left:6px;
  border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:rgba(247,239,218,.55)}
.lang-switch button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--latin);font-size:12px;font-weight:600;letter-spacing:1px;
  color:var(--ink-3);padding:5px 9px;line-height:1.2;transition:all .2s}
.lang-switch button + button{border-left:1px solid var(--line)}
.lang-switch button:hover{color:var(--cinnabar)}
.lang-switch button.on{color:var(--cinnabar);background:rgba(162,64,47,.1)}
html[lang="en"] .hero h1,html[lang="en"] .h-sec,html[lang="en"] .quote-text{
  font-family:var(--latin);letter-spacing:.04em}
html[lang="en"] .hero h1{font-size:50px}
html[lang="en"] .pnav-title{font-family:var(--latin);letter-spacing:.04em}

/* ── 版式骨架 ── */
.section{position:relative;z-index:1;padding:72px 40px}
.container{max-width:1200px;margin:0 auto;width:100%}
.eyebrow{display:flex;align-items:center;gap:10px;
  font-family:var(--latin);font-size:13px;font-weight:600;color:var(--gold);
  letter-spacing:3.5px;text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:'❧';font-size:15px;letter-spacing:0;transform:rotate(90deg);color:var(--cinnabar)}
.h-sec{font-family:var(--kai);font-size:34px;font-weight:700;letter-spacing:2px;line-height:1.3;margin-bottom:10px}
.h-sec .em{color:var(--cinnabar)}
.sec-desc{font-size:16px;color:var(--ink-2);max-width:680px;line-height:1.9}
.paper-band{background:rgba(232,220,188,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── 双栏框（卷首 · 金句）── */
.frame{position:relative;background:linear-gradient(160deg,var(--paper-hi),var(--paper-3));
  border:1px solid rgba(162,64,47,.4);outline:1px solid rgba(199,177,137,.8);outline-offset:5px;
  border-radius:3px;box-shadow:var(--shadow)}

/* ── 卡片 ── */
.card{background:var(--paper-3);border:1px solid var(--line-2);border-radius:6px;
  box-shadow:var(--shadow);transition:all .3s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--gold)}

/* ── 徽记标签 ── */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:4px;
  font-size:12px;font-weight:600;border:1px solid;line-height:1.6}
.tag.cinnabar{background:rgba(162,64,47,.07);color:var(--cinnabar);border-color:rgba(162,64,47,.3)}
.tag.indigo{background:rgba(51,86,124,.07);color:var(--indigo);border-color:rgba(51,86,124,.3)}
.tag.verdigris{background:rgba(81,114,75,.08);color:var(--verdigris);border-color:rgba(81,114,75,.32)}
.tag.gold{background:rgba(140,106,47,.08);color:var(--gold);border-color:rgba(140,106,47,.32)}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:4px;
  font-size:15px;font-weight:600;font-family:var(--hei);cursor:pointer;
  transition:all .25s;border:1px solid transparent}
.btn-ink{background:var(--ink);color:var(--paper-hi);box-shadow:var(--shadow)}
.btn-ink:hover{background:#241C11;color:var(--paper-hi);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-seal{background:transparent;color:var(--cinnabar);border-color:rgba(162,64,47,.55)}
.btn-seal:hover{background:rgba(162,64,47,.08);transform:translateY(-2px)}
.btn-plain{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-plain:hover{color:var(--ink);border-color:var(--gold);background:rgba(140,106,47,.06)}

/* ── 页脚 ── */
.pfooter{position:relative;z-index:1;border-top:3px double var(--line-2);
  padding:40px 32px 48px;text-align:center;color:var(--ink-3);font-size:13.5px}
.pfooter .foot-motto{font-family:var(--kai);font-size:16px;color:var(--ink-2);letter-spacing:3px;margin-bottom:10px}
.pfooter a{color:var(--ink-2);border-bottom:1px dotted var(--line-2)}
.pfooter a:hover{color:var(--cinnabar);border-color:var(--cinnabar)}

/* ── 卷首（Hero · 扉页式）── */
.hero{position:relative;z-index:1;min-height:92vh;display:flex;align-items:center;
  justify-content:center;padding:120px 40px 60px;text-align:center}
.hero-frame{max-width:880px;margin:0 auto;padding:56px 48px 48px;position:relative}
.hero-corner{position:absolute;width:26px;height:26px;pointer-events:none}
.hero-corner::before,.hero-corner::after{content:'';position:absolute;background:var(--gold);opacity:.75}
.hero-corner::before{width:100%;height:2px}
.hero-corner::after{width:2px;height:100%}
.hc-tl{top:-6px;left:-6px}.hc-tr{top:-6px;right:-6px;transform:scaleX(-1)}
.hc-bl{bottom:-6px;left:-6px;transform:scaleY(-1)}.hc-br{bottom:-6px;right:-6px;transform:scale(-1)}
.hero-kicker{font-family:var(--latin);font-size:14px;letter-spacing:5px;color:var(--gold);
  text-transform:uppercase;margin-bottom:18px}
.hero-seal{position:absolute;top:34px;right:36px;width:52px;height:52px;font-size:26px;border-radius:8px}
.hero h1{font-family:var(--kai);font-size:56px;font-weight:700;letter-spacing:6px;
  line-height:1.25;margin-bottom:18px;color:var(--ink)}
.hero h1 .em{color:var(--cinnabar)}
.hero-sub{font-size:17px;color:var(--ink-2);line-height:2;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:36px;
  padding-top:24px;border-top:1px solid var(--line);
  /* 标签/数值同一栈：Noto Serif（西文数字）+ Noto Serif SC（汉字），避免掉进正文 --hei */
  font-family:'Noto Serif','Noto Serif SC','EB Garamond','Songti SC','STSong','SimSun',serif}
.hero-meta-item{display:flex;align-items:baseline;gap:8px;font-family:inherit;
  font-size:14.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.hero-meta-item .mk,.hero-meta-item .mv{font-family:inherit;font-weight:inherit;letter-spacing:inherit}
.hero-meta-item .mk{color:var(--gold)}

/* ── 卷首数据 ── */
.stat-strip{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-top:0}
.stat-cell{flex:1;min-width:130px;text-align:center;padding:26px 12px;position:relative}
.stat-cell + .stat-cell::before{content:'';position:absolute;left:0;top:26px;bottom:26px;
  width:1px;background:var(--line)}
.stat-value{font-family:var(--kai);font-size:40px;font-weight:700;color:var(--cinnabar);line-height:1.1}
.stat-label{font-size:13px;color:var(--ink-3);margin-top:4px;letter-spacing:2px}

/* ── 目录页卡（多页面入口）── */
.toc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.toc-card{display:flex;flex-direction:column;padding:26px 22px;position:relative;overflow:hidden;color:var(--ink)}
.toc-card:hover{color:var(--ink)}
.toc-num{font-family:var(--kai);font-size:15px;color:var(--ink-3);letter-spacing:2px;margin-bottom:12px}
.toc-icon{font-size:30px;margin-bottom:12px}
.toc-name{font-family:var(--kai);font-size:20px;font-weight:700;letter-spacing:2px;margin-bottom:6px}
.toc-desc{font-size:13px;color:var(--ink-2);line-height:1.7;flex:1}
.toc-go{margin-top:16px;font-size:13px;color:var(--cinnabar);display:flex;align-items:center;gap:6px}
.toc-card:hover .toc-go{gap:10px}
.toc-card::after{content:'';position:absolute;right:-14px;top:-14px;width:64px;height:64px;
  border:1px solid var(--line);border-radius:50%;opacity:.5;transition:all .35s}
.toc-card:hover::after{opacity:1;right:-8px;top:-8px}

/* ── 特色四事 ── */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.feat-card{display:flex;flex-direction:column;padding:26px 20px;text-align:center;color:var(--ink)}
.feat-card:hover{color:var(--ink)}
.feat-icon{font-size:32px;margin-bottom:12px}
.feat-name{font-family:var(--kai);font-size:18px;font-weight:700;letter-spacing:1.5px;margin-bottom:6px}
.feat-desc{font-size:13px;color:var(--ink-2);line-height:1.7;flex:1}
.feat-go{margin-top:16px;font-size:13px;color:var(--cinnabar);display:flex;align-items:center;justify-content:center;gap:6px}
.feat-card:hover .feat-go{gap:10px}

/* ── 金句 ── */
.quote-sec{padding:90px 40px;text-align:center;position:relative;z-index:1}
.quote-mark{font-family:var(--kai);font-size:56px;color:rgba(162,64,47,.35);line-height:1;display:block}
.quote-text{font-family:var(--kai);font-size:30px;font-weight:700;letter-spacing:3px;
  line-height:1.8;max-width:760px;margin:14px auto 18px}
.quote-src{font-size:14px;color:var(--ink-3);letter-spacing:2px}

/* ── 响应式 ── */
@media(max-width:980px){
  .toc-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:38px;letter-spacing:3px}
  html[lang="en"] .hero h1{font-size:34px}
  .hero-frame{padding:44px 26px 38px}
  .hero-seal{top:20px;right:20px;width:44px;height:44px;font-size:21px}
  .pnav-title{font-size:15px}
  .pnav-sub{display:none}
}
@media(max-width:640px){
  .section{padding:52px 20px}
  .pnav-inner{padding:8px 14px;gap:10px}
  .pnav-links{gap:0}
  .pnav-links a{font-size:12.5px;padding:4px 7px}
  .lang-switch{margin-left:2px}
  .lang-switch button{padding:4px 7px;font-size:11px}
  html[lang="en"] .hero h1{font-size:28px}
  .hero{padding:100px 16px 40px;min-height:auto}
  .hero h1{font-size:30px}
  .toc-grid,.feat-grid{grid-template-columns:1fr}
  .quote-text{font-size:22px;letter-spacing:1px}
  .stat-cell{min-width:96px;padding:20px 6px}
  .stat-value{font-size:30px}
}