/* site.css  v6.0
 *
 * 版式取自课程板面：奶白纸底、深板岩深色带、铜色小标、Cormorant 做标题、
 * Spectral 做正文、发丝铜线。色值沿用手册色系（HANDBOOK_COLOR_SYSTEM）：
 * CU #5C3418 / CUM #8B5E3C / CUL #FBF5EF / BD #D4B896 / IRON #1A1A1A / WG #6B6460。
 *
 * 字体全部自托管，不走 Google Fonts。
 */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/spectral-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/spectral-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/spectral-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/spectral-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');}

:root{
  --paper:#FBF5EF;        /* CUL 板面奶白 */
  --surf:#FFFCF8;
  --slate:#1C2432;        /* 封面深板岩，深色带用 */
  --ink:#1A1A1A;          /* IRON */
  --ink2:#3A3733;
  --wg:#6B6460;           /* WG 暖灰 */
  --faint:#9A928B;
  --cu:#5C3418;           /* CU 深铜 */
  --cum:#8B5E3C;          /* CUM 铜 */
  --bd:#D4B896;           /* BD 浅铜，发丝线 */
  --line:#E7DCCB;
  --burg:#5C1A23;
  --serif:'Cormorant Garamond', Georgia, "Songti SC", serif;
  --body:'Spectral', Georgia, "Times New Roman", "Songti SC", serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ui:'Inter', system-ui, -apple-system, "PingFang SC", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}
main{flex:1;}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px;}
.narrow{max-width:760px;}
:focus-visible{outline:2px solid var(--cum);outline-offset:3px;}

/* ---- 小标：板面上那种铜色字距拉开的衬线大写 ---- */
.k,.kicker,.cat,.ch,.modLabel{
  font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--cum);}

/* ---- 顶栏 ---- */
.bar{background:var(--surf);border-bottom:1px solid var(--bd);}
.bar .in{max-width:1120px;margin:0 auto;padding:0 26px;height:70px;
  display:flex;align-items:center;gap:30px;}
.brand{font-family:var(--serif);font-weight:600;font-size:27px;
  letter-spacing:.01em;color:var(--ink);position:relative;
  line-height:1;white-space:nowrap;padding-top:2px;}
.topnav{display:flex;gap:24px;align-items:center;}
.topnav a{font-family:var(--serif);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wg);
  padding-bottom:3px;border-bottom:1px solid transparent;}
.topnav a:hover{color:var(--ink);}
.topnav a.on{color:var(--cu);border-bottom-color:var(--cum);}
.grow{flex:1;}

/* ---- 深色带：对应课程封面与板面的字幕床 ---- */
.slab{background:var(--slate);color:#F3EDE4;}
.slab .in{max-width:1120px;margin:0 auto;padding:34px 26px 32px;}
.slab .k{color:var(--bd);}
.slab h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.005em;
  margin:14px 0 0;max-width:19ch;color:#FFFDF9;}
.slab .dek{font-size:16px;line-height:1.6;color:#CDC6BB;margin-top:14px;max-width:56ch;}
.slab .row{margin-top:22px;}

/* ---- 页头（浅底） ---- */
.pagehd{max-width:1120px;margin:0 auto;padding:52px 26px 0;}
.pagehd.mid{max-width:860px;}
.pagehd h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(32px,4.4vw,48px);line-height:1.06;margin:14px 0 10px;max-width:20ch;}
.pagehd p{font-size:16.5px;color:var(--wg);max-width:62ch;line-height:1.65;}

h2{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.2;margin:38px 0 12px;}
h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;margin:26px 0 8px;}
p{margin:0 0 15px;}
.dsc{font-size:14.5px;color:var(--wg);}

/* ---- 分区：铜色细线加铜色小标，替掉之前那条 3px 黑线 ---- */
.band{padding:34px 0 12px;border-top:1px solid var(--bd);margin-top:40px;}
.band .bh{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;margin-bottom:22px;width:100%;}
.band .bh .t{font-family:var(--serif);font-weight:600;font-size:26px;
  letter-spacing:-.005em;flex:1 1 auto;min-width:0;}
.band .bh a{flex:0 0 auto;white-space:nowrap;}
.band .bh .t .ac{color:var(--cum);}
.band .bh a{font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wg);}
.band .bh a:hover{color:var(--cu);}

/* ---- 首页 zone ---- */
.zone{display:grid;grid-template-columns:1.6fr 1.15fr;gap:0;padding:34px 0 10px;}
.col{padding:0 34px;border-left:1px solid var(--line);}
.col:first-child{padding-left:0;border-left:0;}
.lead-a .fig{display:block;width:100%;border:1px solid var(--line);
  background:#fff;margin-bottom:18px;}
.sec-list .s .thumb{display:none;}
.lead-a h2{font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin:12px 0 14px;}
.lead-a:hover h2{color:var(--cu);}
.lead-a .dek{font-size:16.5px;color:var(--ink2);max-width:50ch;line-height:1.62;}
.lead-a .by,.sec-list .by{font-family:var(--mono);font-size:10.5px;
  color:var(--faint);margin-top:13px;letter-spacing:.05em;}
.sec-list .s{padding:17px 0;border-top:1px solid var(--line);display:block;}
.sec-list .s:first-child{padding-top:0;border-top:0;}
.sec-list h3{font-family:var(--serif);font-weight:600;font-size:20px;
  line-height:1.22;margin:6px 0 5px;}
.sec-list .s:hover h3{color:var(--cu);}
.sec-list p{font-size:13.5px;color:var(--wg);line-height:1.5;}

/* ---- 卡片 ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.cards.l4{grid-template-columns:repeat(4,1fr);}
.card{padding:22px 26px;border-left:1px solid var(--line);border-top:1px solid var(--line);}
.cards .card:nth-child(odd){border-left:0;padding-left:0;}
.cards.l4 .card{padding:20px 22px;}
.cards.l4 .card:nth-child(odd){border-left:1px solid var(--line);padding-left:22px;}
.cards.l4 .card:first-child{border-left:0;padding-left:0;}
.card h3{font-family:var(--serif);font-weight:600;font-size:20px;
  line-height:1.22;margin:9px 0 7px;}
.card:hover h3{color:var(--cu);}
.card p{font-size:13.5px;color:var(--wg);line-height:1.55;}
.card .by{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:10px;}

/* ---- 列表行 ---- */
.list{max-width:1120px;margin:0 auto;padding:8px 26px 0;}
.list.mid{max-width:860px;}
.lrow{display:flex;gap:26px;padding:22px 0;border-top:1px solid var(--line);
  align-items:baseline;}
.lrow:first-child{border-top:0;}
.lrow .lmeta{font-family:var(--mono);font-size:10.5px;color:var(--faint);
  width:126px;flex:none;line-height:1.9;}
.lrow .lmeta .cat{display:block;font-size:11px;letter-spacing:.2em;}
.lrow h3{font-family:var(--serif);font-weight:600;font-size:24px;
  line-height:1.2;margin:0;}
.lrow:hover h3{color:var(--cu);}
.lrow p{font-size:14.5px;color:var(--wg);margin-top:7px;max-width:64ch;line-height:1.55;}

/* ---- 标签筛选 ---- */
.tagbar{display:flex;gap:9px;flex-wrap:wrap;padding:24px 0 6px;}
.tagbar.wrap{max-width:860px;margin:0 auto;padding-left:26px;padding-right:26px;}
.tagbar button{font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;padding:7px 15px;
  border:1px solid var(--bd);background:transparent;color:var(--wg);border-radius:0;}
.tagbar button:hover{border-color:var(--cum);color:var(--cu);background:transparent;}
.tagbar button.on{background:var(--cu);border-color:var(--cu);color:var(--paper);}
.tagbar .n{opacity:.55;margin-left:6px;font-family:var(--mono);letter-spacing:0;}

/* ---- 文章 ---- */
.art{max-width:760px;margin:0 auto;padding:14px 26px 8px;}
.art h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(32px,4.4vw,48px);line-height:1.06;margin:14px 0 18px;}
.art .dateline{font-family:var(--mono);font-size:11px;color:var(--faint);
  padding-bottom:20px;border-bottom:1px solid var(--bd);letter-spacing:.05em;}
.art .lead{font-family:var(--serif);font-size:23px;line-height:1.44;
  color:var(--ink);font-weight:500;margin:26px 0 10px;}
.art h2{font-size:26px;margin:36px 0 12px;}
.art h3{font-size:20px;margin:26px 0 8px;}
.art p{font-size:17.5px;line-height:1.75;color:var(--ink2);margin:0 0 20px;}
.art ul,.art ol{margin:0 0 20px 24px;color:var(--ink2);font-size:17.5px;line-height:1.75;}
.art li{margin-bottom:8px;}
.art blockquote{border-left:2px solid var(--cum);padding-left:20px;
  color:var(--wg);margin:0 0 20px;font-style:italic;}
.art table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15.5px;}
.art th,.art td{border-bottom:1px solid var(--line);padding:10px 10px;text-align:left;}
.art th{font-family:var(--serif);font-weight:600;color:var(--cu);}
.art a{color:var(--cu);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;}
.art a:hover{text-decoration-thickness:2px;}
.art figure{margin:30px 0;}
.art figure img{width:100%;border:1px solid var(--line);display:block;background:#fff;}
.art figcaption{font-family:var(--mono);font-size:11px;color:var(--faint);
  line-height:1.6;margin-top:11px;}
.art figcaption .src{display:block;margin-top:4px;}
.art figcaption a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;}
.art figcaption a:hover{color:var(--cu);}
/* 文末标记：一条铜色细线，替掉之前那颗绿钻 */
.endmark{display:flex;justify-content:center;margin:46px 0 8px;}
.endmark span{display:block;width:56px;height:1px;background:var(--cum);}
.origin{margin:26px 0 0;padding:15px 18px;border:1px solid var(--line);
  background:var(--surf);font-family:var(--mono);font-size:11.5px;
  color:var(--faint);line-height:1.6;}
.origin a{color:var(--cu);}

/* ---- 控件 ---- */
button,.btn{font-family:var(--serif);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;padding:14px 26px;
  border:1px solid var(--cu);border-radius:0;background:var(--cu);
  color:var(--paper);cursor:pointer;display:inline-block;}
button:hover,.btn:hover{background:var(--ink);border-color:var(--ink);}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border-color:var(--bd);}
button.ghost:hover,.btn.ghost:hover{background:transparent;border-color:var(--cu);color:var(--cu);}
.slab .btn{border-color:var(--bd);background:var(--bd);color:var(--slate);}
.slab .btn:hover{background:#FFFDF9;border-color:#FFFDF9;color:var(--slate);}
.slab .btn.ghost{background:transparent;color:#F3EDE4;border-color:rgba(212,184,150,.55);}
.slab .btn.ghost:hover{background:transparent;border-color:var(--bd);color:#FFFDF9;}
button:disabled{opacity:.35;cursor:not-allowed;}
input{font-family:var(--mono);font-size:15px;padding:13px 15px;width:100%;
  max-width:340px;border:1px solid var(--bd);background:var(--surf);
  color:var(--ink);border-radius:0;}
input:focus{outline:none;border-color:var(--cum);}
label{display:block;font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--wg);margin:0 0 8px;}
.field{margin-bottom:18px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.msg{font-size:14px;margin-top:13px;min-height:20px;}
.msg.bad{color:var(--burg);}
.msg.good{color:var(--cu);}
.hide{display:none;}

/* ---- 页脚 ---- */
footer{background:var(--slate);color:#CDC6BB;margin-top:64px;}
.foot{max-width:1120px;margin:0 auto;padding:44px 26px;}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;}
.fcols .fb b{font-family:var(--serif);font-weight:600;font-size:26px;
  color:#FFFDF9;letter-spacing:.01em;}
.fcols p{font-size:13.5px;color:#A79E93;margin-top:14px;max-width:40ch;line-height:1.6;}
.fcols .ch{color:var(--bd);margin-bottom:14px;}
.fcols a{display:block;font-size:14px;color:#CDC6BB;padding:5px 0;}
.fcols a:hover{color:#FFFDF9;}
.fnote{border-top:1px solid rgba(212,184,150,.24);margin-top:30px;padding-top:18px;
  font-size:12.5px;line-height:1.7;color:#8A8177;max-width:88ch;}
.fbot{margin-top:16px;font-family:var(--mono);font-size:10.5px;
  color:#7B7268;letter-spacing:.05em;}

@media(max-width:980px){
  .zone{grid-template-columns:1fr;}
  .col{padding:0;border-left:0;border-top:1px solid var(--line);
    padding-top:22px;margin-top:22px;}
  .col:first-child{border-top:0;margin-top:0;padding-top:0;}
  .cards,.cards.l4{grid-template-columns:1fr 1fr;}
  .cards.l4 .card:nth-child(odd){border-left:0;padding-left:0;}
  .fcols{grid-template-columns:1fr 1fr;}
  .fcols .fb{grid-column:1/-1;}
  .lrow{flex-direction:column;gap:6px;}
  .lrow .lmeta{width:auto;display:flex;gap:12px;}
  .lrow .lmeta .cat{display:inline;}
  .bar .in{height:auto;padding:16px 20px;flex-wrap:wrap;gap:16px;}
  .topnav{gap:18px;flex-wrap:wrap;}
  .slab .in{padding:26px 20px 24px;}
}
@media(max-width:600px){.cards,.cards.l4{grid-template-columns:1fr;}
  .cards .card,.cards.l4 .card{border-left:0;padding-left:0;}}

/* ---- 语言切换。已在账户里的一侧实心铜底，另一侧留白，
       差异要看得出来，措辞不指出买家缺什么。 ---- */
.langs button.lang.on{position:relative;}
.langs button.lang.on::after{content:"";position:absolute;left:0;right:28px;
  bottom:-1px;height:2px;background:var(--cu);}
.langs button.lang + button.lang.on::after{left:28px;right:0;}
.addon{padding:16px 0 2px;}
.addon a{font-family:var(--serif);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cu);}
.addon a:hover{color:var(--ink);}
.addon[hidden]{display:none;}

/* ---- 模块编号。铜色两位数做锚点，名字跟在后面。 ---- */
.mod summary .mn{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bd);white-space:nowrap;
  flex:0 0 auto;min-width:72px;}
.mod summary .mt{flex:1 1 auto;min-width:0;}
.mod summary .mc{flex:0 0 auto;}
.mod summary .mt{padding-left:0 !important;}
.mod summary .mt::before{display:none !important;}
.mod summary{position:relative;padding-left:20px !important;}
.mod summary::before{content:"+";position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:13px;color:var(--bd);}
.mod[open] summary::before{content:"\2212";}

/* 手机上编号与名字各占一行，加号固定在最左，不再夹在中间折行 */
@media(max-width:600px){
  .mod summary{flex-wrap:wrap;padding-left:22px !important;row-gap:4px;}
  .mod summary .mn{min-width:0;width:100%;order:1;}
  .mod summary .mt{order:2;flex:1 1 auto;letter-spacing:.16em;}
  .mod summary .mc{order:3;align-self:center;}
}