/* ==========================================================================
   集团手绘与文化造景组件库 · 造园册页扩展包 (folio.css v1.0, 2026-10-28)
   美学同源：Nutlope/hallmark (Dose 云母暖宣 & Furrow 乌丝栏/等高水墨丝)
            + pbakaus/impeccable (纹理预算 <=0.08、禁英文眉标、墨分五色)
            + 中国传统造园折角、宋本书口签条、西泠双圈朱文印
   ========================================================================== */

:root {
  /* 纸张与云母屏风层 (Hue ~85° 晨光暖熟宣) */
  --folio-paper-1: #FAF6EC;
  --folio-paper-2: #EFE8D7;
  --folio-mica: rgba(250, 246, 236, 0.90);
  --folio-glint: rgba(255, 255, 255, 0.94);

  /* 墨分五色 (锁 ~188° 松烟青墨色相，禁纯黑 #000) */
  --folio-ink-1: #1C2423;
  --folio-ink-2: #33403E;
  --folio-ink-3: #5C6B68;
  --folio-ink-4: #D4CCBA;

  /* 泥金乌丝与双信号色 (竹青主信号 + 西泠朱砂印 <=5% 面积) */
  --folio-gold: #9A7432;
  --folio-gold-line: rgba(154, 116, 50, 0.42);
  --folio-jade: #1B6B50;
  --folio-jade-ink: #13503B;
  --folio-jade-tint: rgba(27, 107, 80, 0.09);
  --folio-seal: #A42828;
  --folio-seal-tint: rgba(164, 40, 40, 0.08);
}

/* ① 造园册页卡 (.hd-folio-card)：与 .hd--card 组合使用，无 box-shadow，靠二层宣纸错位叠影塑造层次 */
.hd-folio-card {
  position: relative;
  background-color: var(--folio-mica);
  background-image:
    linear-gradient(180deg, var(--folio-glint) 0px, rgba(250, 246, 236, 0) 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220' preserveAspectRatio='none'><g fill='none' stroke='%2333403E' stroke-opacity='0.09'><path d='M 175 220 C 205 188, 255 162, 320 132' stroke-width='1.1'/><path d='M 205 220 C 232 196, 275 176, 320 154' stroke-width='0.85'/><path d='M 238 220 C 262 204, 292 190, 320 176' stroke-width='0.75'/><path d='M 148 220 C 185 178, 242 146, 320 112' stroke-width='0.7' stroke-dasharray='4 3'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1.5px solid var(--folio-ink-1);
  border-radius: 6px;
}

/* 二层托裱宣纸错位叠影（替代 box-shadow） */
.hd-folio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--folio-paper-2);
  border: 1px solid rgba(28, 36, 35, 0.28);
  border-radius: 6px;
  transform: translate(5px, 5px);
  z-index: -1;
  pointer-events: none;
}

/* 4px 内缩泥金乌丝细栏 */
.hd-folio-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--folio-gold-line);
  border-radius: 3px;
  pointer-events: none;
}

/* ② 宋本书口竖排签条 (.hd-folio-spine) */
.hd-folio-spine {
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 24px;
  border-right: 1px solid var(--folio-gold-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--folio-ink-3);
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  pointer-events: none;
  user-select: none;
}

/* ③ Dose 同源虚线撕口横头 (.hd-folio-stub) —— 替代被禁用的英文大写眉标 */
.hd-folio-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(154, 116, 50, 0.48);
  font-size: 12px;
  font-weight: 700;
  color: var(--folio-ink-3);
  letter-spacing: 0.06em;
}
.hd-folio-stub-num {
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--folio-gold);
  font-weight: 700;
}

/* ④ 中文册页卷标 (.hd-folio-kicker) —— 章节头替代 01 · PILLARS */
.hd-folio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--folio-jade-ink);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.hd-folio-kicker::before,
.hd-folio-kicker::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: var(--folio-gold);
}

/* ⑤ 西泠双圈朱文印 (.hd-seal) —— 焦点印记（全屏占比 <=5%） */
.hd-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3px 10px;
  background: var(--folio-seal);
  color: #FAF6EC;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: rotate(-1.5deg);
  border: 1.2px solid #7A1818;
}
.hd-seal::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 0.8px solid rgba(250, 246, 236, 0.68);
  border-radius: 1.5px;
  pointer-events: none;
}
.hd-seal--jade {
  background: var(--folio-jade);
  border-color: var(--folio-jade-ink);
}