@import url("https://cdn.jsdelivr.net/gh/eterfinal/ReiFonts/HuiwenFangsong/result.css");
@import url("https://cdn.jsdmirror.com/gh/eterfinal/ReiFonts/HuiwenFangsong/result.css");

/* ==========================================================
   FMRG Theme: CMLS — Collegium Medicorum Sancti Laurentii
   圣洛伦佐医疗公署
   "In Arte et Officio."

   Usage: add class="theme-cmls" to .page
   Renaissance/Baroque civic + medical archive, copperplate, double rules
   ========================================================== */

.theme-cmls{
  --font:         "Huiwen-Fangsong","HuiwenFangsong","Huiwen Fangsong","FangSong","STFangsong","Noto Serif SC","Source Han Serif SC",serif;
  --sans:         "Huiwen-Fangsong","HuiwenFangsong","Huiwen Fangsong","FangSong","STFangsong","PingFang SC","Microsoft YaHei",sans-serif;

  /* — Color System (deep brown-black ink, antique gold/ochre accent) — */
  --ink:          #1c1814;
  --muted:        #6b5f52;
  --line:         #3d342c;
  --thin:         rgba(61,52,44,.18);
  --bg:           #faf8f5;
  --accent:       #8b5a3c;          /* deep ochre / burnt sienna, low saturation */
  --accent-light: rgba(139,90,60,.06);
  --accent-mid:   rgba(139,90,60,.22);

  /* — Frame (double-line codex) — */
  --frame-outer:  2px solid var(--line);
  --frame-inner:  1px solid var(--thin);

  /* — Borders — */
  --b1: 1.5px solid var(--line);
  --b0: 1px solid var(--thin);

  /* — Letterhead — */
  --lh-h:       126px;
  --lh-logo-h:  72px;
  --lh-pad-x:   22px;
  --lh-gap:     12px;

  /* — Paper Texture — */
  --paper-warm:      rgba(180,155,120,.022);
  --paper-speckle:  .018;
  --engrave-opacity: .028;
  --grid-gap:        12px;

  /* — Watermark — */
  --wm-opacity:      .055;
  --wm-color:        var(--line);
  --wm-rotate:       -4deg;
  --wm-letterspace:  .32em;

  /* — Stamp — */
  --stamp-size:      130px;
  --stamp-ink:       var(--accent);
  --stamp-opacity:   .14;
  --stamp-rotate:    -8deg;
  --stamp-x:         0px;
  --stamp-y:         0px;

  /* — Footer Banner — */
  --fb-bg:       rgba(139,90,60,.045);
  --fb-border:   rgba(139,90,60,.18);
}


/* ==========================================================
   PAGE — double-line outer frame (codex / archive)
   ========================================================== */
.page.theme-cmls{
  border: none;
  box-shadow:
    inset 0 0 0 2px var(--line),
    inset 0 0 0 3px var(--bg),
    inset 0 0 0 4px var(--thin),
    0 2px 4px rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.08);
}


/* ==========================================================
   LETTERHEAD — copperplate tint + double-line separator
   ========================================================== */
.page.theme-cmls .letterhead{
  background:
    linear-gradient(to bottom,
      rgba(139,90,60,.03) 0%,
      transparent 70%
    );
  border-bottom: none;
  /* double line: thick top, thin bottom */
  box-shadow:
    inset 0 -2.5px 0 0 var(--line),
    inset 0 -4px 0 0 var(--bg),
    inset 0 -5px 0 0 var(--thin);
}


/* ==========================================================
   PAPER TEXTURE — parchment + speckle + copperplate lines + edge tint
   ========================================================== */
.page.theme-cmls::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;

  background:
    /* L1 — parchment warm wash */
    linear-gradient(
      to bottom,
      var(--paper-warm) 0%,
      transparent 30%,
      transparent 70%,
      var(--paper-warm) 100%
    ),
    /* L2 — left/right edge shadow (margin impression) */
    linear-gradient(to right, rgba(61,52,44,.04) 0%, transparent 8%),
    linear-gradient(to left,  rgba(61,52,44,.04) 0%, transparent 8%),
    /* L3 — speckle (paper fibre) */
    radial-gradient(
      circle,
      rgba(100,80,50,var(--paper-speckle)) .8px,
      transparent .8px
    ),
    radial-gradient(
      circle,
      rgba(80,60,40,calc(var(--paper-speckle) * .7)) .5px,
      transparent .5px
    ),
    /* L4 — copperplate engraving (diagonal lines, one direction) */
    repeating-linear-gradient(
      127deg,
      transparent 0px,
      transparent calc(var(--grid-gap) - 1px),
      rgba(61,52,44,var(--engrave-opacity)) calc(var(--grid-gap) - 1px),
      rgba(61,52,44,var(--engrave-opacity)) var(--grid-gap)
    ),
    /* L5 — second copperplate layer (counter diagonal, lighter) */
    repeating-linear-gradient(
      53deg,
      transparent 0px,
      transparent calc(var(--grid-gap) - 1px),
      rgba(61,52,44,calc(var(--engrave-opacity) * .5)) calc(var(--grid-gap) - 1px),
      rgba(61,52,44,calc(var(--engrave-opacity) * .5)) var(--grid-gap)
    );
  background-size:
    100% 100%,
    100% 100%,
    6px 6px,
    4px 4px,
    calc(var(--grid-gap) * 1.6) calc(var(--grid-gap) * 1.6),
    calc(var(--grid-gap) * 1.6) calc(var(--grid-gap) * 1.6);
  background-position:
    0 0,
    0 0, 100% 0,
    0 0,
    0 0,
    0 0;
}


/* ==========================================================
   INNER DOUBLE BORDER + CORNER MARKS (::after)
   ========================================================== */
.page.theme-cmls::after{
  content:"";
  position:absolute;
  inset: 10px;
  z-index:0;
  pointer-events:none;
  border: 1px solid rgba(139,90,60,.08);
  /* geometric corner marks: small L-shapes */
  background:
    linear-gradient(135deg, rgba(139,90,60,.12) 2px, transparent 2px),
    linear-gradient(135deg, transparent calc(100% - 2px), rgba(139,90,60,.12) 2px),
    linear-gradient(315deg, rgba(139,90,60,.12) 2px, transparent 2px),
    linear-gradient(315deg, transparent calc(100% - 2px), rgba(139,90,60,.12) 2px);
  background-size:
    24px 24px,
    24px 24px,
    24px 24px,
    24px 24px;
  background-position:
    10px 10px,
    calc(100% - 10px) 10px,
    10px calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
}


/* ==========================================================
   WATERMARK — upright, spaced, optional ring
   ========================================================== */
.page.theme-cmls .watermark .wm-text{
  letter-spacing: var(--wm-letterspace);
  transform: rotate(var(--wm-rotate));
  font-variant: small-caps;
}


/* ==========================================================
   CHIP — registry tag (accent border)
   ========================================================== */
.page.theme-cmls .chip{
  border-color: var(--accent-mid);
  color: var(--accent);
  background: var(--accent-light);
  font-variant: small-caps;
  letter-spacing: .06em;
}


/* ==========================================================
   SECTION TITLE — serif, small-caps feel
   ========================================================== */
.page.theme-cmls .section-title .small{
  color: var(--accent);
  font-variant: small-caps;
  letter-spacing: .08em;
}


/* ==========================================================
   TABLE HEADER — warm tint (registry)
   ========================================================== */
.page.theme-cmls .items-table th{
  background: var(--accent-light);
  font-variant: small-caps;
  letter-spacing: .05em;
}


/* ==========================================================
   STAMP — registry seal (deep ochre)
   ========================================================== */
.page.theme-cmls .stamp{
  border-color: var(--accent);
  color: var(--accent);
}
.page.theme-cmls .stamp span{
  font-variant: small-caps;
  letter-spacing: .12em;
}


/* ==========================================================
   FOOTER BANNER — archive tail (warm block)
   ========================================================== */
.page.theme-cmls .footer-banner{
  background: var(--fb-bg);
  border: 1.5px solid var(--fb-border);
}
.page.theme-cmls .fb-badge{
  border-color: var(--accent-mid);
  color: var(--accent);
  font-variant: small-caps;
  letter-spacing: .08em;
}


/* ==========================================================
   COMPONENTS — smaller radius (classical)
   ========================================================== */
.page.theme-cmls .header,
.page.theme-cmls .subject,
.page.theme-cmls .summary,
.page.theme-cmls .sections,
.page.theme-cmls .items,
.page.theme-cmls .footer{
  border-radius: 2px;
}
.page.theme-cmls .lh-meta .lh-tag{
  border-color: var(--accent-mid);
  color: var(--accent);
  font-variant: small-caps;
}


/* ==========================================================
   PRINT — reduce engraving to avoid moiré
   ========================================================== */
@media print{
  .page.theme-cmls::before{
    background:
      linear-gradient(to bottom, var(--paper-warm) 0%, transparent 30%, transparent 70%, var(--paper-warm) 100%),
      radial-gradient(circle, rgba(100,80,50,.008) .8px, transparent .8px);
    background-size: 100% 100%, 6px 6px;
  }
}