/* ===========================================================
   高潮手册 —— 全站样式表
   设计语言：手绘植物图鉴。四门课各一张「图版」。
   已成册的图版上了色，未成册的还是线稿——这是图鉴自己的
   语言，比锁头图标更接近事实：那几本确实还没编完。
   颜色只有一个强调色（赭石），用来标「已成册」，不做装饰。
   =========================================================== */

:root{
  /* 纸：暖米，绝不用纯白 */
  --paper:#F2EADA;
  --paper-2:#EDE3D0;
  --paper-3:#E6DAC3;

  /* 墨：褐调四级 */
  --ink:#4A3B2A;
  --ink-2:#54432E;
  --ink-3:#786751;

  /* 唯一强调色：赭石。只用于「已成册」 */
  --ochre:#B5652F;

  --rule:#D6C9B0;
  --rule-2:#C4B294;

  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --gara:"EB Garamond",Georgia,"Times New Roman",serif;   /* 数字与拉丁 */
  --ui:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;

  --pad:80px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--paper);color:var(--ink);font-family:var(--serif);
  overflow-wrap:break-word;min-height:100vh;
}
a{color:var(--ochre);text-decoration:none;}
a:hover{color:#96491D;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* 纸纹：SVG 噪声，不外链图片 */
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.5;mix-blend-mode:multiply;}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad);}

/* ---------- 同门轨：回课堂 / 去知识库 ----------
   手册是课堂的阅读附件，不是平级产品。这条轨放在页眉之上，
   读起来像回上级站的面包屑。将来加站点就往这里挂。 */
.kin{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:16px;}
.kin a{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);
  font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);}
.kin a:hover{color:var(--ochre);}
.ext{flex:none;}

/* ---------- 扉页头 ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-top:34px;}
.head-l{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
.title{font-size:31px;font-weight:500;letter-spacing:.16em;line-height:1;}
.sub{font-family:var(--gara);font-style:italic;font-size:17px;color:var(--ink-3);}
.head-note{font-size:15.5px;line-height:1.85;color:var(--ink-2);max-width:24em;margin-top:12px;}
.head-acts{display:flex;gap:9px;flex:none;}
.btn{font-family:var(--ui);font-size:14px;letter-spacing:.06em;padding:10px 18px;
  border-radius:1px;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:#332818;}
.btn-line{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2);}
.btn-line:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3);}
.head-rule,.foot-rule{height:3px;border-top:1px solid var(--ink-3);
  border-bottom:1px solid var(--rule-2);}
.head-rule{margin-top:22px;}
.foot-rule{margin-top:52px;}

/* ---------- 图版列 ---------- */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px;}
.plate{position:relative;background:var(--paper-2);aspect-ratio:305/560;overflow:hidden;
  text-align:left;width:100%;
  /* 纸的厚度：一道贴边高光 + 一层低而宽的投影，让它像铺在桌上的一张纸 */
  box-shadow:inset 0 1px 0 rgba(255,253,246,.7), 0 1px 2px rgba(74,59,42,.09), 0 8px 18px -10px rgba(74,59,42,.28);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,background .3s ease;}
.plate:hover{transform:translateY(-6px);background:#F0E6D2;
  box-shadow:inset 0 1px 0 rgba(255,253,246,.8), 0 2px 4px rgba(74,59,42,.10), 0 20px 34px -14px rgba(74,59,42,.34);}
.plate:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;}
/* 每版外框各画各的：轮廓微微不同，不是同一个矩形复制四遍 */
.frame{position:absolute;inset:0;pointer-events:none;}
.frame path{fill:none;stroke:var(--ink-3);opacity:.55;}

.card{display:flex;flex-direction:column;align-items:center;height:100%;
  padding:18px 16px 16px;text-align:center;}
.plate-no{font-size:12px;letter-spacing:.4em;color:var(--ink-3);flex:none;}
.ill-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-height:0;width:100%;margin-top:2px;}
.spec{width:100%;height:100%;}
.spec .ln{fill:none;stroke:var(--ink);stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;}
.spec .vein{stroke-width:.7;opacity:.62;}       /* 侧脉比轮廓细 */
.spec .hat{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.42;}   /* 排线更淡 */
.spec.is-draft .hat{stroke:var(--ink-3);}
.spec .grd{stroke-width:.8;opacity:.4;}         /* 地平线只是暗示 */
.spec .lead{stroke-width:.55;opacity:.42;stroke-dasharray:2 3;}  /* 细部引线 */
.spec .dot{fill:var(--ink);}
.spec .det .ln{stroke-width:1;}
.spec.is-draft .ln{stroke:var(--ink-3);}        /* 线稿：淡墨 */
.spec.is-draft .dot{fill:var(--ink-3);}
.spec .wash{opacity:.26;}
.spec.is-draft .wash{display:none;}

/* 贴纸标签：标本纸上贴的采集签。用纸色差和投影做出「贴上去」，不加边框 */
.tag{flex:none;width:100%;margin-top:8px;padding:11px 10px 12px;
  background:#F8F4E9;border-radius:1px;
  box-shadow:0 1px 2px rgba(74,59,42,.11), 0 0 0 .5px rgba(120,103,81,.16);}
.tag-name{font-size:27px;font-weight:500;letter-spacing:.16em;line-height:1;
  text-indent:.16em;}
.tag-form{font-family:var(--gara);font-style:italic;font-size:13.5px;
  color:var(--ink-3);margin-top:5px;}
.tag-sheet{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:7px;
  font-variant-numeric:oldstyle-nums;}
.tag-state{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.12em;}
/* 印章：彩＝已成册，稿＝未成册 */
.seal{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;font-family:var(--serif);font-size:10.5px;font-weight:500;letter-spacing:0;flex:none;}

/* ---------- 图版说明：左图右文 ---------- */
.spread{display:none;grid-template-columns:376px 1fr;margin-top:28px;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule-2);min-height:560px;}
.spread.is-on{display:grid;}
.spread-l{padding:34px 26px;background:var(--paper-3);}
/* 图版吸顶：目录很长，标本要跟着视线走，不能浮在正中间 */
.spread-l-in{position:sticky;top:34px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.spread-l .spec{width:100%;max-width:270px;height:auto;aspect-ratio:240/340;}
.cap{font-family:var(--gara);font-style:italic;font-size:15.5px;color:var(--ink-2);text-align:center;}
.spread-r{display:flex;flex-direction:column;min-width:0;padding:26px 34px 30px;}
.back{align-self:flex-start;padding-bottom:14px;font-family:var(--ui);font-size:12.5px;
  letter-spacing:.16em;color:var(--ink-3);}
.back:hover{color:var(--ochre);}
.sp-name{font-size:33px;font-weight:500;letter-spacing:.1em;line-height:1.15;}
.sp-blurb{font-size:16px;line-height:1.8;color:var(--ink-2);margin-top:10px;max-width:42em;}
.sp-body{margin-top:16px;}

.ch{display:flex;align-items:baseline;gap:12px;padding:19px 0 7px;}
.ch-n{font-family:var(--gara);font-size:17px;letter-spacing:.2em;color:var(--ochre);}
.ch-name{font-size:21px;font-weight:500;letter-spacing:.06em;}
.ch-tag{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--ink-3);margin-left:auto;}

/* 目录点线引导：老书的做法 */
.ent{display:flex;align-items:baseline;width:100%;padding:9px 0;text-align:left;}
.ent-t{font-size:17.5px;line-height:1.65;color:var(--ink);flex:0 1 auto;}
.ent-dots{flex:1 1 auto;border-bottom:1px dotted var(--rule-2);margin:0 10px 5px;min-width:16px;}
.ent-n{font-family:var(--gara);font-size:15px;color:var(--ink-3);flex:none;
  font-variant-numeric:oldstyle-nums;}
.ent:hover .ent-t,.ent:hover .ent-n{color:var(--ochre);}
.ent.is-soon{opacity:.4;cursor:default;}
.ent.is-soon:hover .ent-t,.ent.is-soon:hover .ent-n{color:inherit;}

/* 未成册的说明 */
.gate{background:var(--paper);padding:19px 22px;box-shadow:inset 0 0 0 1px var(--rule);}
.gate p{font-size:16px;line-height:1.8;color:var(--ink-2);margin-bottom:15px;}
.gate p:last-of-type{margin-bottom:0;}
.gate-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px;}
.gate-hint{font-family:var(--ui);font-size:13px;line-height:1.75;color:var(--ink-3);margin-top:13px;}
.out{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);}
.out-tag{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;color:var(--ink-3);min-width:54px;}
.out-name{font-size:17px;color:var(--ink-2);}
.out-n{font-family:var(--gara);font-size:14.5px;color:var(--ink-3);margin-left:auto;}

/* 学员水印：不藏着，读者看得见才有威慑 */
.wm{font-family:var(--ui);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);
  padding-top:14px;border-top:1px solid var(--rule);margin-top:16px;}

/* ---------- 另见：图鉴的「参见」体例 ---------- */
.also{margin-top:26px;}
.also-h{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.24em;
  color:var(--ink-3);margin-bottom:12px;}
/* 行与行之间不画线，靠留白和悬停底色分隔 */
.also-row{display:flex;align-items:baseline;gap:18px;padding:14px 16px;margin:0 -16px;
  border-radius:2px;transition:background .2s ease;}
.also-row:hover{background:var(--paper-2);}
.also-name{font-size:20px;font-weight:500;letter-spacing:.08em;flex:none;min-width:7em;}
.also-what{font-size:14.5px;line-height:1.75;color:var(--ink-2);flex:1 1 auto;}
.also-go{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);
  font-size:12px;letter-spacing:.1em;color:var(--ink-3);flex:none;}
.also-row:hover .also-name{color:var(--ochre);}
.also-row:hover .also-go{color:var(--ochre);}

/* ---------- 页脚：图例 + 须知 ---------- */
.foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:30px;padding:0 0 40px;}
.legend{display:flex;align-items:center;gap:8px;font-family:var(--ui);
  font-size:12px;letter-spacing:.08em;color:var(--ink-2);}
.foot-note{font-family:var(--ui);font-size:12px;line-height:1.75;color:var(--ink-3);
  margin-left:auto;text-align:right;}

/* 地址还没定的链接：只是不可点，外观和正常链接一致（虚线是开发脚手架，不进设计） */
[data-todo]{cursor:default;}

/* ---------- 弹层：登录 / 联系我 / 关于 ---------- */
/* z-index 要压过纸纹（.grain 是 90），否则噪声会盖在卡片上 */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(38,29,18,.44);backdrop-filter:blur(2px);}
.modal[hidden]{display:none;}
.modal-card{width:100%;max-width:428px;max-height:calc(100vh - 48px);overflow-y:auto;
  padding:26px 28px 22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-2),0 18px 44px rgba(38,29,18,.22);}
.modal-t{font-size:21px;font-weight:500;letter-spacing:.08em;}
.modal-note{font-size:13.5px;line-height:1.9;color:var(--ink-2);margin-top:11px;}
.modal-note b{font-weight:500;color:var(--ink);}
.modal-contact{font-family:var(--ui);font-size:13px;letter-spacing:.04em;color:var(--ochre);
  margin-top:14px;padding:11px 14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule);}
.modal-err{font-family:var(--ui);font-size:12px;line-height:1.7;color:#9E3B1C;margin-top:12px;}
.modal-acts{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:20px;}

.field{display:block;margin-top:15px;}
.field span{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.14em;color:var(--ink-3);}
.field input{width:100%;margin-top:7px;padding:11px 12px;border:none;border-radius:1px;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule-2);
  font-family:var(--serif);font-size:15px;color:var(--ink);}
.field input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ochre);}

.whoami{align-self:center;font-family:var(--ui);font-size:11px;letter-spacing:.12em;color:var(--ink-3);}

/* 插图线条 */
.ln{fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- 窄屏 ---------- */
@media (max-width:1100px){
  :root{--pad:44px;}
  .plates{grid-template-columns:repeat(2,1fr);gap:16px;}
  .spread{grid-template-columns:280px 1fr;}
}
@media (max-width:760px){
  :root{--pad:20px;}
  .head{flex-direction:column;align-items:stretch;gap:16px;}
  .head-acts{justify-content:flex-start;}
  .title{font-size:25px;}
  .plate{aspect-ratio:169/300;}
  .card{padding:12px 9px 10px;}
  .tag{padding:8px 6px 9px;margin-top:6px;}
  .tag-name{font-size:21px;}
  .tag-form{font-size:11.5px;margin-top:3px;}
  .tag-sheet{font-size:11px;margin-top:5px;}
  .tag-state{font-size:10px;margin-top:6px;gap:5px;}
  .seal{width:18px;height:18px;font-size:9.5px;}
  .spread{grid-template-columns:1fr;min-height:0;}
  .spread-l{padding:24px 20px;}
  .spread-l-in{position:static;}
  .spread-l svg{width:130px;}
  .spread-r{padding:20px 20px 26px;}
  .sp-name{font-size:26px;}
  .ent{padding:12px 0;min-height:44px;}   /* 触控目标不低于 44px */
  .ent-t{font-size:16.5px;}
  .btn{padding:13px 18px;min-height:44px;}
  .foot-note{margin-left:0;text-align:left;width:100%;}
  .modal{padding:14px;align-items:flex-end;}   /* 窄屏贴底，够得着 */
  .modal-card{padding:20px 18px 18px;max-height:calc(100vh - 28px);}
  .field input{font-size:16px;min-height:44px;}  /* 16px 以下 iOS 会自动放大页面 */
  .also-row{flex-wrap:wrap;gap:6px 14px;}
  .also-name{min-width:0;}
  .also-what{flex:1 0 100%;order:3;}
}