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

/* ==========================================================
   FMRG Theme: FFMC — Frontline Field Medical Center
   前线野战医学中心
   "Care Under Conflict."

   Usage: add class="theme-ffmc" to .page
   20th-c field hospital / typewriter records / red stamp / thick rules
   ========================================================== */

.theme-ffmc{
  --font:         "Huiwen-ZhengKai","HuiwenZhengkai","Huiwen Zhengkai","Kaiti SC","STKaiti","Noto Serif SC","Source Han Serif SC",serif;
  --sans:         "Huiwen-ZhengKai","HuiwenZhengkai","Huiwen Zhengkai","Kaiti SC","STKaiti","PingFang SC","Microsoft YaHei",sans-serif;

  /* — Color System (gray-white paper, black/deep gray, red stamp) — */
  --ink:          #0f0f0f;
  --muted:        #5a5a5a;
  --line:         #2a2a2a;
  --thin:         rgba(42,42,42,.18);
  --bg:           #f2f1ee;
  --accent-red:   #8b2e2e;          /* confidential / stamp red */
  --accent-olive: #4a5c4a;          /* optional tag border */
  --accent:       var(--accent-red);
  --accent-light: rgba(139,46,46,.06);
  --accent-mid:   rgba(139,46,46,.24);

  /* — Rules (thick + thin, military record) — */
  --rule-strong:  2.5px solid var(--line);
  --rule-thin:    1px solid var(--thin);
  --b1: var(--rule-strong);
  --b0: var(--rule-thin);

  /* — Paper — */
  --paper-tone:        rgba(80,80,75,.03);
  --paper-grain:       .018;
  --fold-opacity:      .025;
  --type-lines-opacity: .022;
  --type-lines-gap:    26px;

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

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

  /* — Stamp (rectangular, military) — */
  --stamp-size:      126px;
  --stamp-ink:       var(--accent-red);
  --stamp-opacity:   .16;
  --stamp-rotate:    10deg;
  --stamp-x:         0px;
  --stamp-y:         0px;

  /* — Footer Banner — */
  --fb-bg:       rgba(42,42,42,.04);
  --fb-border:   rgba(42,42,42,.25);
}


/* ==========================================================
   PAGE — gray-white frame
   ========================================================== */
.page.theme-ffmc{
  border: var(--rule-thin);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.07);
}


/* ==========================================================
   BACKGROUND — paper tone + grain + typewriter lines + fold
   ========================================================== */
.page.theme-ffmc::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;

  background:
    /* L1 — paper tone (cool gray wash) */
    linear-gradient(
      to bottom,
      var(--paper-tone) 0%,
      transparent 35%,
      transparent 75%,
      var(--paper-tone) 100%
    ),
    /* L2 — paper grain */
    radial-gradient(
      circle,
      rgba(60,60,55,var(--paper-grain)) .5px,
      transparent .5px
    ),
    /* L3 — typewriter line rules (horizontal) */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent calc(var(--type-lines-gap) - 1px),
      rgba(42,42,42,var(--type-lines-opacity)) calc(var(--type-lines-gap) - 1px),
      rgba(42,42,42,var(--type-lines-opacity)) var(--type-lines-gap)
    ),
    /* L4 — faint fold line (vertical, left third) */
    linear-gradient(
      90deg,
      rgba(42,42,42,var(--fold-opacity)) 0px,
      transparent 2px,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent calc(100% - 2px),
      rgba(42,42,42,var(--fold-opacity)) 100%
    );
  background-size:
    100% 100%,
    3px 3px,
    100% var(--type-lines-gap),
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    28% 0,
    72% 0;
}


/* ==========================================================
   LETTERHEAD — thick black + thin double rule
   ========================================================== */
.page.theme-ffmc .letterhead{
  background: linear-gradient(to bottom, rgba(42,42,42,.03), transparent 70%);
  border-bottom: none;
  box-shadow:
    inset 0 -3px 0 0 var(--line),
    inset 0 -4.5px 0 0 var(--bg),
    inset 0 -5.5px 0 0 var(--thin);
}


/* ==========================================================
   HEADER META — thick + thin rule above (military record)
   ========================================================== */
.page.theme-ffmc .header-meta{
  border-top: none;
  padding-top: 14px;
  margin-top: 14px;
  box-shadow: inset 0 2.5px 0 0 var(--line), inset 0 4px 0 0 var(--thin);
}


/* ==========================================================
   WATERMARK — hard sans/mono, wide spacing
   ========================================================== */
.page.theme-ffmc .watermark .wm-text{
  font-family: var(--mono);
  letter-spacing: var(--wm-letterspace);
  transform: rotate(var(--wm-rotate));
  font-weight: 800;
}


/* ==========================================================
   CHIP — label tag (thick border, mono)
   ========================================================== */
.page.theme-ffmc .chip{
  border: 2px solid var(--accent-mid);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--accent-red);
  background: var(--accent-light);
  padding: 3px 10px;
  text-transform: uppercase;
}


/* ==========================================================
   SECTION TITLE — all caps, letter-spacing (military table)
   ========================================================== */
.page.theme-ffmc .section-title{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.page.theme-ffmc .section-title .small{
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: .1em;
}


/* ==========================================================
   TABLE — typewriter / field record
   ========================================================== */
.page.theme-ffmc .items-table th{
  background: rgba(42,42,42,.04);
  font-family: var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
}


/* ==========================================================
   STAMP — rectangular military / confidential seal
   ========================================================== */
.page.theme-ffmc .stamp{
  width: auto;
  min-width: 100px;
  max-width: 120px;
  height: auto;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 2px;
  border: 2.5px solid var(--accent-red);
  border-radius: 0;
  color: var(--accent-red);
  transform: rotate(var(--stamp-rotate));
  font-family: var(--mono);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .14em;
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
}
.page.theme-ffmc .stamp span{
  font-size: 9px;
  letter-spacing: .12em;
  padding: 0;
}


/* ==========================================================
   FOOTER BANNER — telegraph tail / transfer bar
   ========================================================== */
.page.theme-ffmc .footer-banner{
  background: var(--fb-bg);
  border: var(--rule-thin);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
}
.page.theme-ffmc .fb-org{
  font-size: 10px;
  color: var(--ink);
  opacity: .85;
}
.page.theme-ffmc .fb-slogan{
  font-size: 9px;
  margin-top: 2px;
}
.page.theme-ffmc .fb-badge{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: transparent;
  padding: 4px 10px;
  text-transform: uppercase;
}


/* ==========================================================
   META / LH — mono typewriter
   ========================================================== */
.page.theme-ffmc .meta-k,
.page.theme-ffmc .lh-meta{
  font-family: var(--mono);
}
.page.theme-ffmc .lh-meta .lh-tag{
  border-color: var(--accent-mid);
  color: var(--accent-red);
  font-family: var(--mono);
  text-transform: uppercase;
}


/* ==========================================================
   PRINT — reduce lines and fold
   ========================================================== */
@media print{
  .page.theme-ffmc::before{
    background:
      linear-gradient(to bottom, var(--paper-tone) 0%, transparent 35%, transparent 75%, var(--paper-tone) 100%),
      radial-gradient(circle, rgba(60,60,55,.006) .5px, transparent .5px);
    background-size: 100% 100%, 3px 3px;
  }
}