/* ============================================================
 * templates.css — A4 简历文档与 6 套模板样式
 * 屏幕与打印共用同一套样式，保证「所见即所得」
 * ============================================================ */

/* ---------------- 基础 ---------------- */
.doc {
  --accent: #1f4e79;
  /* 排版密度系数：字号 / 行高 / 间距分别可调，用于「塞进一页」 */
  --fs: 1;
  --lhv: 1;
  --gap: 1;
  width: 210mm;
  background: transparent;
  color: #242a33;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
    "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
  font-size: calc(14px * var(--fs));
  line-height: calc(1.58 * var(--lhv));
  box-sizing: border-box;
  position: relative;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  /* 页与页之间留出画布间隙，屏幕上像一叠纸 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* 单张 A4 纸：分页由 paginate.js 完成，每页内容永远整块落位 */
.doc .page {
  position: relative;
  width: 210mm;
  height: 297mm;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  flex: none;
}

/* 页码（仅屏幕，打印不带） */
@media screen {
  .doc .page[data-page]::after {
    content: attr(data-page) " / " attr(data-total);
    position: absolute;
    right: 5mm;
    bottom: 2.5mm;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .5px;
    color: #c3cbd6;
    pointer-events: none;
  }
}

.doc *,
.doc *::before,
.doc *::after { box-sizing: border-box; }

.doc h1, .doc h2, .doc h3, .doc p, .doc ul, .doc li { margin: 0; padding: 0; }
.doc ul { list-style: none; }
.doc img { max-width: 100%; }

.doc .ico {
  width: 12.5px;
  height: 12.5px;
  vertical-align: -1.5px;
  margin-right: 3px;
  flex: none;
  opacity: .8;
}

/* 通用条目 */
.doc .sec { margin-top: calc(12px * var(--gap)); }
.doc .sec:first-child { margin-top: 0; }

.doc .sec-title {
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  line-height: calc(1.4 * var(--lhv));
}

.doc .sec-body { margin-top: calc(6px * var(--gap)); }

.doc .entry { margin-top: calc(10px * var(--gap)); }
.doc .entry:first-child { margin-top: 0; }

.doc .entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.doc .entry-title { font-size: calc(14px * var(--fs)); font-weight: 700; }
.doc p, .doc li, .doc .entry-title, .doc .skill-desc, .doc .entry-sub { text-wrap: pretty; }
.doc .entry-time {
  font-size: calc(12.3px * var(--fs));
  color: #6b7684;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.doc .entry-sub { font-size: calc(13px * var(--fs)); color: #4b5563; }

.doc .entry-list { margin-top: 3px; }
.doc .entry-list li {
  position: relative;
  padding-left: 12px;
  font-size: calc(13.2px * var(--fs));
  line-height: calc(1.66 * var(--lhv));
  color: #333b45;
}
.doc .entry-list li + li { margin-top: 1px; }
.doc .entry-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}

.doc .summary { font-size: calc(13.2px * var(--fs)); color: #3d4550; line-height: calc(1.7 * var(--lhv)); }

.doc .contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  font-size: calc(12.3px * var(--fs));
  color: #5b6675;
}
.doc .c-item { display: inline-flex; align-items: center; }

/* 技能 */
.doc .skill-row + .skill-row { margin-top: 4px; }
.doc .skill-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.doc .skill-name { font-size: calc(13.2px * var(--fs)); font-weight: 600; color: #2b333d; }
.doc .skill-level {
  font-size: calc(11.3px * var(--fs));
  line-height: calc(1.5 * var(--lhv));
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 4px;
  opacity: .85;
}
.doc .skill-desc { font-size: calc(12.8px * var(--fs)); color: #4a5361; }

.doc .avatar {
  width: 22mm;
  height: 28mm;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.doc .avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  border-radius: 50%;
}

/* 分页后的板块片段：续页不带标题，靠间距区分 */
.doc .sec.pg-cont { margin-top: 0; }
.doc .page > *:first-child { margin-top: 0; }

/* 缩略图容器 */
.thumb-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.thumb-box > .doc {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  gap: 0;
}
.thumb-box > .doc .page,
.thumb-inner .doc .page { box-shadow: none; }

/* ============================================================
 * 排版密度档位
 * 字号只微调，间距压缩幅度更大 —— 视觉上是「更紧凑」而不是「字变小」
 * ============================================================ */
.doc.dens-loose   { --fs: 1.02;  --lhv: 1.035; --gap: 1.20; }
.doc.dens-compact { --fs: .97;   --lhv: .965;  --gap: .84; }
.doc.dens-tight   { --fs: .935;  --lhv: .925;  --gap: .70; }

/* ============================================================
 * 1. 经典商务
 * ============================================================ */
.tpl-classic .page { padding: 14mm 16mm 12mm; }
.tpl-classic .doc-header {
  text-align: center;
  padding-bottom: calc(11px * var(--gap));
  border-bottom: 2px solid var(--accent);
}
.tpl-classic .avatar {
  margin: 0 auto 8px;
  width: 20mm;
  height: 25mm;
  border-radius: 2px;
}
.tpl-classic .name {
  font-size: calc(29px * var(--fs));
  font-weight: 700;
  letter-spacing: 5px;
  line-height: calc(1.25 * var(--lhv));
  color: #18212c;
  text-indent: 5px;
}
.tpl-classic .job {
  margin-top: 5px;
  font-size: calc(13px * var(--fs));
  color: var(--accent);
  letter-spacing: 2px;
  text-indent: 2px;
}
.tpl-classic .contact-line { justify-content: center; margin-top: calc(8px * var(--gap)); }
.tpl-classic .summary {
  margin-top: calc(13px * var(--gap));
  padding: 9px 12px;
  background: #f6f8fa;
  border-left: 3px solid var(--accent);
}
.tpl-classic .sec-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  letter-spacing: 1px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dfe5ec;
}
.tpl-classic .sec-title::before {
  content: "";
  width: 3px;
  height: 13px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.tpl-classic .sec-body { margin-top: calc(8px * var(--gap)); }

/* ============================================================
 * 2. 现代双栏
 * ============================================================ */
.tpl-modern .page {
  display: flex;
  align-items: stretch;
}
.tpl-modern .side {
  width: 66mm;
  flex: none;
  background: #eef2f8;
  border-right: 1px solid #e0e7f0;
  padding: 13mm 7mm 13mm;
}
.tpl-modern .main {
  flex: 1;
  min-width: 0;
  padding: 13mm 10mm 13mm 8mm;
}
.tpl-modern .avatar {
  width: 30mm;
  height: 30mm;
  border-radius: 50%;
  margin: 0 auto 10px;
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(20, 40, 70, .14);
}
.tpl-modern .avatar-ph { font-size: calc(24px * var(--fs)); }
.tpl-modern .name {
  font-size: calc(21px * var(--fs));
  font-weight: 700;
  text-align: center;
  color: #1b2733;
  letter-spacing: 1px;
}
.tpl-modern .job {
  text-align: center;
  font-size: calc(12px * var(--fs));
  color: var(--accent);
  margin-top: 4px;
  letter-spacing: .5px;
}
.tpl-modern .side-contact {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: calc(12px * var(--gap));
  font-size: calc(11.5px * var(--fs));
  color: #48525f;
}
.tpl-modern .side .sec { margin-top: calc(15px * var(--gap)); }
.tpl-modern .side .sec-title {
  font-size: calc(11.5px * var(--fs));
  color: #1f2a36;
  letter-spacing: 2px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--accent);
}
.tpl-modern .side .sec-body { margin-top: calc(7px * var(--gap)); }
.tpl-modern .side .entry-title { font-size: calc(12.5px * var(--fs)); }
.tpl-modern .side .entry-time { font-size: calc(11px * var(--fs)); }
.tpl-modern .side .entry-head { align-items: flex-start; }
.tpl-modern .side .entry-head,
.tpl-modern .side .skill-line { gap: 4px; }
.tpl-modern .side .skill-row + .skill-row { margin-top: calc(7px * var(--gap)); }
.tpl-modern .side .skill-line { justify-content: space-between; }
.tpl-modern .side .skill-desc { font-size: calc(11.5px * var(--fs)); color: #4a5361; }
.tpl-modern .side .entry-list li { font-size: calc(11.8px * var(--fs)); }
.tpl-modern .main .sec-title {
  position: relative;
  font-size: calc(15px * var(--fs));
  color: #16202b;
  padding-bottom: 5px;
  border-bottom: 1.5px solid #e2e8f0;
}
.tpl-modern .main .sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5px;
  width: 42px;
  height: 1.5px;
  background: var(--accent);
}
.tpl-modern .main .sec-body { margin-top: calc(8px * var(--gap)); }
.tpl-modern .main .sec { margin-top: calc(16px * var(--gap)); }
.tpl-modern .main .entry { margin-top: calc(12px * var(--gap)); }
.tpl-modern .main .summary { padding: 0; }

/* ============================================================
 * 3. 极简黑白
 * ============================================================ */
.tpl-minimal {
  font-size: calc(13.5px * var(--fs));
  color: #1a1a1a;
}
.tpl-minimal .page { padding: 17mm 18mm 14mm; }
.tpl-minimal .doc-header { padding-bottom: calc(13px * var(--gap)); border-bottom: 1px solid #111; }
.tpl-minimal .name {
  font-size: calc(31px * var(--fs));
  font-weight: 300;
  letter-spacing: 3px;
  line-height: calc(1.2 * var(--lhv));
  color: #111;
}
.tpl-minimal .job {
  margin-top: calc(6px * var(--gap));
  font-size: calc(11.5px * var(--fs));
  letter-spacing: 4px;
  color: #6b7280;
  text-indent: 4px;
}
.tpl-minimal .contact-line {
  margin-top: calc(10px * var(--gap));
  font-size: calc(11px * var(--fs));
  color: #4b5563;
  gap: 2px 12px;
}
.tpl-minimal .ico { display: none; }
.tpl-minimal .c-item + .c-item::before {
  content: "·";
  margin-right: 12px;
  color: #b9bfc8;
}
.tpl-minimal .summary { margin-top: calc(14px * var(--gap)); color: #374151; }
.tpl-minimal .sec { margin-top: calc(17px * var(--gap)); }
.tpl-minimal .sec-title {
  font-size: calc(11px * var(--fs));
  font-weight: 600;
  letter-spacing: 3px;
  color: #111;
  padding-bottom: 4px;
  border-bottom: 1px solid #d6d9de;
}
.tpl-minimal .sec-body { margin-top: calc(9px * var(--gap)); }
.tpl-minimal .entry-title { font-weight: 600; font-size: calc(13px * var(--fs)); }
.tpl-minimal .entry-sub { color: #5f6672; }
.tpl-minimal .skill-name { font-weight: 600; }
.tpl-minimal .skill-level {
  border: 0;
  padding: 0;
  color: #8a9099;
  font-size: calc(11px * var(--fs));
}
.tpl-minimal .skill-row { display: flex; gap: 10px; align-items: baseline; }
.tpl-minimal .skill-line { flex: none; min-width: 84px; }
.tpl-minimal .skill-desc { color: #4b5563; }

/* ============================================================
 * 4. 时间轴
 * ============================================================ */
.tpl-timeline .page { padding: 14mm 15mm 12mm; }
.tpl-timeline .doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: calc(11px * var(--gap));
  border-bottom: 2px solid #eef1f5;
}
.tpl-timeline .name {
  font-size: calc(26px * var(--fs));
  font-weight: 700;
  letter-spacing: 2px;
  color: #17212b;
  line-height: calc(1.25 * var(--lhv));
}
.tpl-timeline .job { margin-top: 4px; font-size: calc(12.5px * var(--fs)); color: var(--accent); letter-spacing: 1px; }
.tpl-timeline .head-contact {
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: calc(11.5px * var(--fs));
  text-align: right;
}
.tpl-timeline .summary { margin-top: calc(12px * var(--gap)); }
.tpl-timeline .sec { margin-top: calc(16px * var(--gap)); }
.tpl-timeline .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13.5px * var(--fs));
  color: #1b2733;
  letter-spacing: 1px;
}
.tpl-timeline .sec-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.tpl-timeline .sec-body { position: relative; margin-top: calc(8px * var(--gap)); }
.tpl-timeline .sec-body::before {
  content: "";
  position: absolute;
  left: 28mm;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #e3e8ef;
}
.tpl-timeline .entry {
  position: relative;
  display: grid;
  grid-template-columns: 28mm 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "time title" "time sub" "time list";
  column-gap: 6mm;
  margin-top: calc(10px * var(--gap));
  padding-bottom: 2px;
}
.tpl-timeline .entry::before {
  content: "";
  position: absolute;
  left: calc(28mm - 3px);
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  z-index: 2;
}
.tpl-timeline .entry-head { display: contents; }
.tpl-timeline .entry-title { grid-area: title; }
.tpl-timeline .entry-time {
  grid-area: time;
  text-align: right;
  padding-right: 12px;
  font-size: calc(11.5px * var(--fs));
  color: #6b7684;
  padding-top: 2px;
}
.tpl-timeline .entry-sub { grid-area: sub; }
.tpl-timeline .entry-list { grid-area: list; }
.tpl-timeline .sec-skill .entry { display: block; }

/* ============================================================
 * 5. 色块分区
 * ============================================================ */
.tpl-accent .page { display: flex; flex-direction: column; }
.tpl-accent .banner {
  background: var(--accent);
  color: #fff;
  padding: 13mm 14mm 10mm;
}
.tpl-accent .name {
  font-size: calc(27px * var(--fs));
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  line-height: calc(1.25 * var(--lhv));
}
.tpl-accent .job {
  margin-top: 5px;
  font-size: calc(13px * var(--fs));
  letter-spacing: 1.5px;
  opacity: .92;
}
.tpl-accent .contact-line {
  margin-top: calc(10px * var(--gap));
  font-size: calc(11.5px * var(--fs));
  color: #fff;
  opacity: .9;
  gap: 3px 16px;
}
.tpl-accent .contact-line .ico { opacity: .75; }
.tpl-accent .body {
  display: flex;
  flex: 1;
  padding: 9mm 14mm 14mm;
}
.tpl-accent .page.pg-cont .body { padding-top: 13mm; }
.tpl-accent .col-main { flex: 1; min-width: 0; padding-right: 7mm; }
.tpl-accent .col-side {
  width: 56mm;
  flex: none;
  padding-left: 6mm;
  border-left: 1px dashed #dfe5ec;
}
.tpl-accent .summary {
  padding: 8px 10px;
  background: #f7f8fa;
  border-left: 3px solid var(--accent);
  margin-bottom: 4px;
}
.tpl-accent .sec-title {
  position: relative;
  font-size: calc(14px * var(--fs));
  color: #1b2733;
  padding-left: 9px;
  letter-spacing: .5px;
}
.tpl-accent .sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.tpl-accent .col-side .sec-title { font-size: calc(12.5px * var(--fs)); }
.tpl-accent .col-side .entry-title { font-size: calc(12.5px * var(--fs)); }
.tpl-accent .col-side .entry-head { flex-direction: column; gap: 0; align-items: flex-start; }
.tpl-accent .col-side .entry-time { font-size: calc(11px * var(--fs)); }
.tpl-accent .col-side .skill-row + .skill-row { margin-top: calc(6px * var(--gap)); }
.tpl-accent .col-side .skill-desc { font-size: calc(12.2px * var(--fs)); }
.tpl-accent .col-side .skill-line { justify-content: space-between; }

/* 续页没有侧栏内容时，主栏占满整页 */
.tpl-modern .page.pg-wide .main { padding: 13mm 14mm; }
.tpl-accent .page.pg-wide .col-main { padding-right: 0; }


/* 单栏模板：技能行压缩为一行 */
.tpl-classic .skill-row,
.tpl-timeline .skill-row,
.tpl-elegant .skill-row { display: flex; align-items: baseline; gap: 8px; }
.tpl-classic .skill-line,
.tpl-timeline .skill-line,
.tpl-elegant .skill-line { flex: none; }
.tpl-classic .skill-desc,
.tpl-timeline .skill-desc,
.tpl-elegant .skill-desc { flex: 1; min-width: 0; }

/* ============================================================
 * 6. 优雅衬线
 * ============================================================ */
.tpl-elegant .page { padding: 15mm 17mm 12mm; }
.tpl-elegant {
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", "STSong", serif;
  font-size: calc(13.5px * var(--fs));
  color: #2e2a24;
}
.tpl-elegant .doc-header { text-align: center; padding-bottom: 0; }
.tpl-elegant .doc-header::after {
  content: "";
  display: block;
  margin-top: calc(11px * var(--gap));
  border-top: 1px solid #cbbfa6;
  border-bottom: 1px solid #cbbfa6;
  height: 3px;
}
.tpl-elegant .name {
  font-size: calc(30px * var(--fs));
  font-weight: 600;
  letter-spacing: 7px;
  color: #2a241c;
  line-height: calc(1.3 * var(--lhv));
  text-indent: 7px;
}
.tpl-elegant .job {
  margin-top: calc(6px * var(--gap));
  font-size: calc(12px * var(--fs));
  letter-spacing: 4px;
  color: #8a6d3b;
  text-indent: 4px;
}
.tpl-elegant .contact-line {
  justify-content: center;
  margin-top: calc(9px * var(--gap));
  font-size: calc(11.5px * var(--fs));
  color: #6b6154;
  gap: 3px 14px;
}
.tpl-elegant .summary { margin-top: calc(13px * var(--gap)); text-align: justify; }
.tpl-elegant .sec { margin-top: calc(16px * var(--gap)); }
.tpl-elegant .sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(12px * var(--fs));
  font-weight: 600;
  letter-spacing: 3px;
  color: #8a6d3b;
  text-align: center;
}
.tpl-elegant .sec-title::before,
.tpl-elegant .sec-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd3c0;
}
.tpl-elegant .sec-title span { padding: 0 2px; }
.tpl-elegant .sec-body { margin-top: calc(9px * var(--gap)); }
.tpl-elegant .entry-title { font-weight: 700; letter-spacing: .3px; }
.tpl-elegant .entry-time { font-size: calc(11.5px * var(--fs)); color: #7d7365; }
.tpl-elegant .entry-sub { color: #6b6154; letter-spacing: .2px; }
.tpl-elegant .entry-list li::before { background: #8a6d3b; opacity: .55; }
.tpl-elegant .skill-name { font-weight: 600; }
.tpl-elegant .skill-level { border: 0; padding: 0; color: #8a6d3b; font-size: calc(11px * var(--fs)); }


/* 单栏模板：荣誉奖项横向排列，节省纵向空间 */
.tpl-classic .sec-award .sec-body,
.tpl-minimal .sec-award .sec-body,
.tpl-timeline .sec-award .sec-body,
.tpl-elegant .sec-award .sec-body {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 3px;
}
.tpl-classic .sec-award .entry,
.tpl-minimal .sec-award .entry,
.tpl-timeline .sec-award .entry,
.tpl-elegant .sec-award .entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 0;
  padding-bottom: 0;
  grid-template-columns: none;
}
.tpl-classic .sec-award .entry-head,
.tpl-minimal .sec-award .entry-head,
.tpl-timeline .sec-award .entry-head,
.tpl-elegant .sec-award .entry-head { display: contents; }
.tpl-classic .sec-award .entry::before,
.tpl-minimal .sec-award .entry::before,
.tpl-timeline .sec-award .entry::before,
.tpl-elegant .sec-award .entry::before { display: none; }
.tpl-classic .sec-award .entry-time,
.tpl-minimal .sec-award .entry-time,
.tpl-timeline .sec-award .entry-time,
.tpl-elegant .sec-award .entry-time { order: 2; font-size: calc(11.5px * var(--fs)); padding: 0; text-align: left; }
.tpl-classic .sec-award .entry-title,
.tpl-minimal .sec-award .entry-title,
.tpl-timeline .sec-award .entry-title,
.tpl-elegant .sec-award .entry-title { font-size: calc(13px * var(--fs)); font-weight: 600; }

/* ============================================================
 * 打印
 * 分页已经由 paginate.js 在页面上做好，这里只负责「一张纸一页」：
 * 每页高度 = A4，页与页之间强制换页，浏览器不会再自作主张断开内容
 * ============================================================ */
@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }
  .doc {
    display: block !important;
    width: 210mm !important;
    gap: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .doc, .doc * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 略小于 297mm：避开 Chrome 的舍入误差，否则每个换页点会多出一张空白纸 */
  .doc .page {
    height: 296.9mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }
  .doc .page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .doc .page::after { content: none !important; }

  /* 页内的块不再参与分页计算，避免浏览器二次切分 */
  .doc .sec, .doc .entry, .doc .skill-row,
  .doc .entry-list li, .doc .sec-title { break-inside: avoid; }
}

/* 窄屏时缩略图容器不撑破布局 */
@media (max-width: 640px) {
  .doc { font-size: calc(13px * var(--fs)); }
}