/* ═══ the product: one sheet, ink only ═══
   กติกาที่ทุก layout ต้องทำตาม: **สัดส่วนรูปล็อกตาย และต้องกว้างกว่า 5:3 เสมอ**
   (5:3 คือสัดส่วนที่กรอบตอนถ่ายสัญญาไว้) กล่องรูปที่แคบกว่านั้นจะครอบด้านข้าง
   = คนริมสองข้างของภาพหมู่หายไป ซึ่งเป็น use case หลักตาม PLAN.md
   ที่ว่างที่เหลือบนหน้าให้คอลัมน์ข่าวเป็นตัวรับ ไม่ใช่รูป
   ทุกขนาดอิง --u = --pw/210 ("หนึ่งมิลลิเมตรตอนเป็น A4") เปลี่ยน --pw
   อย่างเดียวได้ทุกขนาด ตั้งแต่การ์ดเลือกแบบไปจนถึงหน้า A3
   แท่นพิมพ์เป็นเลเซอร์ขาวดำ — ไฟล์นี้ห้ามพึ่งสีเด็ดขาด                    */

.paper{
  --pw: 210mm; --ph: 297mm;
  --u: calc(var(--pw) / 210);
  --paper-bg: var(--newsprint, #E9E1CE);
  --paper-ink: #14110D;

  width: var(--pw); height: var(--ph);
  background: var(--paper-bg);
  color: var(--paper-ink);
  font-family: var(--ui, 'IBM Plex Sans Thai', sans-serif);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(8 * var(--u));
}
.paper[data-size="A3"]{ --pw:297mm; --ph:420mm }

/* Trirong ไม่มีตัวจีน ถ้าไม่ระบุ CJK เอง เบราว์เซอร์จะหยิบฟอนต์ระบบมาให้
   ซึ่งหน้าตาต่างกันทุกเครื่อง — ระบุเองเพื่อให้ใบที่จีนดูตั้งใจ ไม่ใช่แค่แสดงผลได้ */
.paper[data-lang="zh"]{
  --display: 'Noto Serif SC', 'Songti SC', serif;
  --ui: 'Noto Sans SC', 'PingFang SC', sans-serif;
}
.paper[data-lang="zh"] .pg-headline,
.paper[data-lang="zh"] .tb-headline,
.paper[data-lang="zh"] .dp-lede h2{ letter-spacing:.01em }

/* ── อะตอมที่ใช้ร่วมกันทุก layout ── */
.paper canvas{ display:block; width:100%; height:100%; object-fit:cover }
.paper h1, .paper h2, .paper h3{ font-family: var(--display, serif) }
.paper em{ font-style:normal }
.paper hr{ border:0; border-top: calc(.3 * var(--u)) solid currentColor }

/* ══════════════════ 1 · CLASSIC ══════════════════ */
.pg-rail{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--mono,monospace); font-size: calc(2.3 * var(--u));
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom: calc(1.6 * var(--u));
  border-bottom: calc(.3 * var(--u)) solid currentColor;
}
.pg-masthead{ text-align:center; padding: calc(4.5 * var(--u)) 0 calc(3 * var(--u)) }
.pg-masthead h1{ font-weight:900; font-size: calc(19 * var(--u)); line-height:1.12; letter-spacing:-.03em }
.pg-masthead h1 em{ font-weight:400; font-style:italic }
.pg-latin{
  margin-top: calc(2.4 * var(--u)); font-family: var(--mono,monospace);
  font-size: calc(2.4 * var(--u)); letter-spacing:.42em; text-transform:uppercase; text-indent:.42em;
}
.pg-dateline{
  display:flex; justify-content:space-between; gap: calc(4 * var(--u));
  font-size: calc(2.7 * var(--u)); font-weight:300;
  padding: calc(1.8 * var(--u)) 0;
  border-top: calc(.3 * var(--u)) solid currentColor;
  border-bottom: calc(1 * var(--u)) double currentColor;
}
.pg-dateline span:nth-child(2){ text-align:center; flex:1 }
.pg-dateline span:nth-child(3){ text-align:right; max-width:42% }
.pg-headline{
  font-weight:900; font-size: calc(11.4 * var(--u)); line-height:1.5; letter-spacing:-.022em;
  text-align:center; padding: calc(5 * var(--u)) 0 calc(2.4 * var(--u)); text-wrap:balance;
}
.pg-latinhead{
  text-align:center; font-family: var(--mono,monospace); font-size: calc(2.9 * var(--u));
  letter-spacing:.2em; padding-bottom: calc(2.2 * var(--u));
}
.pg-deck{
  text-align:center; font-size: calc(3.2 * var(--u)); font-weight:300; line-height:1.62;
  max-width:78%; margin:0 auto calc(3.4 * var(--u));
  padding-bottom: calc(3.4 * var(--u));
  border-bottom: calc(.3 * var(--u)) solid currentColor;
}
.pg-photo{ flex:0 0 auto; display:flex; flex-direction:column; margin-bottom: calc(2.6 * var(--u)) }
.pg-photo canvas{ aspect-ratio:5/3; border: calc(.3 * var(--u)) solid currentColor }
.pg-caption{
  flex:0 0 auto; display:flex; justify-content:space-between; gap: calc(3 * var(--u));
  font-family: var(--mono,monospace); font-size: calc(2.2 * var(--u));
  padding-top: calc(1.4 * var(--u)); letter-spacing:.06em; text-transform:uppercase;
}
.pg-cols{
  flex:1 1 auto; min-height:0; overflow:hidden;
  column-count:3; column-gap: calc(5 * var(--u));
  column-rule: calc(.3 * var(--u)) solid currentColor;
  padding-top: calc(2.6 * var(--u));
  border-top: calc(.3 * var(--u)) solid currentColor;
  font-size: calc(2.5 * var(--u)); font-weight:300; line-height:1.68; text-align:justify;
}
.pg-cols section{ break-inside:avoid }
.pg-cols h3{ font-weight:700; font-size: calc(3.1 * var(--u)); line-height:1.4; margin-bottom: calc(1 * var(--u)) }
.pg-cols h3::before{
  content:''; display:block; width: calc(7 * var(--u)); height: calc(.6 * var(--u));
  background:currentColor; margin-bottom: calc(1.4 * var(--u));
}
.pg-foot{
  display:flex; align-items:flex-end; gap: calc(5 * var(--u));
  padding-top: calc(2.6 * var(--u)); margin-top: calc(2.6 * var(--u));
  border-top: calc(1 * var(--u)) double currentColor;
}
.pg-serial{
  flex:0 0 auto; font-family: var(--mono,monospace); font-size: calc(2.3 * var(--u));
  letter-spacing:.12em; text-transform:uppercase; line-height:1.7;
}
.pg-serial b{ display:block; font-size: calc(4.6 * var(--u)); letter-spacing:.06em; font-weight:500 }
.pg-sign{ flex:1; min-width:0 }
.pg-sign p{
  font-family: var(--mono,monospace); font-size: calc(2.2 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; margin-bottom: calc(5.4 * var(--u));
}
.pg-stamp{
  flex:0 0 auto; transform:rotate(-7deg);
  border: calc(.7 * var(--u)) solid currentColor; border-radius: calc(1.4 * var(--u));
  padding: calc(1.8 * var(--u)) calc(3.4 * var(--u));
  text-align:center; font-family: var(--display,serif); font-weight:700;
  font-size: calc(3.4 * var(--u)); line-height:1.3;
}
.pg-stamp small{
  display:block; font-family: var(--mono,monospace); font-weight:400;
  font-size: calc(1.9 * var(--u)); letter-spacing:.2em; text-transform:uppercase;
}

/* ══════════════════ 2 · TABLOID ══════════════════
   หัวเป็นแถบทึบกินเต็มขอบกระดาษ พาดหัวยักษ์ชิดซ้าย รูปไม่มีขอบ */
.paper[data-layout="tabloid"]{ padding: 0 }
.tb-band{
  background: var(--paper-ink); color: var(--paper-bg);
  padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(3.4 * var(--u));
  display:flex; align-items:baseline; gap: calc(4 * var(--u));
}
.tb-band h1{
  flex:1; font-weight:900; font-size: calc(13.5 * var(--u)); line-height:1.24;
  letter-spacing:-.035em; text-align:center;
}
.tb-band h1 em{ font-weight:400; font-style:italic }
.tb-flag, .tb-no{
  font-family: var(--mono,monospace); font-size: calc(2.3 * var(--u));
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.tb-flag{ flex:0 0 auto } .tb-no{ flex:0 0 auto; text-align:right }
.tb-headline{
  font-weight:900; font-size: calc(14 * var(--u)); line-height:1.52; letter-spacing:-.035em;
  padding: calc(4.4 * var(--u)) calc(9 * var(--u)) calc(1.6 * var(--u));
}
.tb-sub{
  font-family: var(--mono,monospace); font-size: calc(3 * var(--u));
  letter-spacing:.14em; text-transform:uppercase;
  padding: 0 calc(9 * var(--u)) calc(4 * var(--u));
}
.tb-photo{ flex:0 0 auto; display:flex; flex-direction:column; position:relative }
.tb-photo canvas{ aspect-ratio:5/3 }
.tb-caption{
  flex:0 0 auto; background: var(--paper-ink); color: var(--paper-bg);
  display:flex; justify-content:space-between; gap: calc(3 * var(--u));
  font-family: var(--mono,monospace); font-size: calc(2.2 * var(--u));
  letter-spacing:.1em; text-transform:uppercase;
  padding: calc(1.4 * var(--u)) calc(9 * var(--u));
}
.tb-deck{
  font-size: calc(3.6 * var(--u)); font-weight:300; line-height:1.6;
  padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(3.4 * var(--u));
}
.tb-cols{
  flex:1 1 auto; min-height:0; overflow:hidden;
  column-count:2; column-gap: calc(6 * var(--u));
  column-rule: calc(.3 * var(--u)) solid currentColor;
  margin: 0 calc(9 * var(--u));
  padding-top: calc(2.6 * var(--u));
  border-top: calc(1 * var(--u)) solid currentColor;
  font-size: calc(2.6 * var(--u)); font-weight:300; line-height:1.68; text-align:justify;
}
.tb-cols section{ break-inside:avoid }
.tb-cols h3{ font-weight:700; font-size: calc(3.2 * var(--u)); line-height:1.4; margin-bottom: calc(1.2 * var(--u)) }
.tb-foot{
  display:flex; align-items:center; gap: calc(5 * var(--u));
  margin: calc(3 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: calc(1 * var(--u)) double currentColor;
}
.tb-stamp{
  flex:0 0 auto; transform:rotate(-5deg);
  border: calc(1 * var(--u)) solid currentColor;
  padding: calc(2.2 * var(--u)) calc(4 * var(--u));
  font-family: var(--display,serif); font-weight:900; text-align:center;
  font-size: calc(4.2 * var(--u)); line-height:1.4;
}
.tb-stamp small{
  display:block; font-family: var(--mono,monospace); font-weight:400;
  font-size: calc(1.9 * var(--u)); letter-spacing:.22em; text-transform:uppercase;
}
.tb-sign{ flex:1; min-width:0 }
.tb-sign p{
  font-family: var(--mono,monospace); font-size: calc(2.2 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; margin-bottom: calc(4.6 * var(--u));
}
.tb-meta{
  flex:0 0 auto; display:flex; flex-direction:column; gap: calc(.8 * var(--u));
  text-align:right; font-family: var(--mono,monospace); font-size: calc(2.2 * var(--u));
  letter-spacing:.1em;
}

/* ══════════════════ 3 · DISPATCH ══════════════════
   หัวเล็กมุมบน รูปพาโนรามา ตราปั๊มทับมุมรูป กล่องข้อมูลแบบพาสปอร์ต */
.dp-head{ display:flex; align-items:center; gap: calc(3 * var(--u)); padding-bottom: calc(3.4 * var(--u)) }
.dp-mast{
  font-family: var(--display,serif); font-weight:900;
  font-size: calc(9 * var(--u)); line-height:1.15; letter-spacing:-.03em; flex:0 0 auto;
}
.dp-mast em{ font-weight:400; font-style:italic }
.dp-rule{ flex:1; height: calc(.6 * var(--u)); background:currentColor }
.dp-kicker{
  flex:0 0 auto; font-family: var(--mono,monospace); font-size: calc(2.3 * var(--u));
  letter-spacing:.24em; text-transform:uppercase;
  border: calc(.3 * var(--u)) solid currentColor; padding: calc(1 * var(--u)) calc(2.2 * var(--u));
}
.dp-photo{ position:relative; flex:0 0 auto; display:flex; margin-bottom: calc(4 * var(--u)) }
.dp-photo canvas{ aspect-ratio:2/1; border: calc(.3 * var(--u)) solid currentColor }
.dp-stamp{
  position:absolute; top: calc(-2.5 * var(--u)); right: calc(-2 * var(--u));
  transform:rotate(9deg); background: var(--paper-bg);
  border: calc(.8 * var(--u)) solid currentColor; border-radius:50%;
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--display,serif); font-weight:700; text-align:center;
  font-size: calc(3 * var(--u)); line-height:1.4;
}
.dp-stamp small{
  display:block; font-family: var(--mono,monospace); font-weight:400;
  font-size: calc(1.7 * var(--u)); letter-spacing:.18em; text-transform:uppercase;
  margin-top: calc(.6 * var(--u));
}
.dp-body{ display:flex; gap: calc(5 * var(--u)); align-items:flex-start; flex:0 0 auto }
.dp-no{
  flex:0 0 auto; text-align:center; border: calc(.6 * var(--u)) solid currentColor;
  padding: calc(2 * var(--u)) calc(2.6 * var(--u));
}
.dp-no b{ display:block; font-family: var(--display,serif); font-weight:900; font-size: calc(11 * var(--u)); line-height:1 }
.dp-no span{
  display:block; font-family: var(--mono,monospace); font-size: calc(1.8 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; margin-top: calc(1 * var(--u));
}
.dp-lede{ flex:1; min-width:0 }
.dp-lede h2{ font-weight:900; font-size: calc(9.8 * var(--u)); line-height:1.5; letter-spacing:-.02em }
.dp-sub{
  font-family: var(--mono,monospace); font-size: calc(2.6 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; margin-top: calc(1.6 * var(--u));
}
.dp-deck{ font-size: calc(3 * var(--u)); font-weight:300; line-height:1.62; margin-top: calc(2.4 * var(--u)) }
.dp-facts{
  flex:0 0 auto; display:flex; border: calc(.6 * var(--u)) solid currentColor;
  margin: calc(3.4 * var(--u)) 0;
}
.dp-facts div{
  flex:1; min-width:0; padding: calc(2 * var(--u)) calc(2.4 * var(--u));
  border-right: calc(.3 * var(--u)) solid currentColor;
}
.dp-facts div:last-child{ border-right:0 }
.dp-facts span{
  display:block; font-family: var(--mono,monospace); font-size: calc(1.9 * var(--u));
  letter-spacing:.18em; text-transform:uppercase;
}
.dp-facts b{ display:block; font-size: calc(2.7 * var(--u)); font-weight:600; line-height:1.5; margin-top: calc(.8 * var(--u)) }
.dp-cols{
  flex:1 1 auto; min-height:0; overflow:hidden;
  column-count:2; column-gap: calc(5 * var(--u));
  column-rule: calc(.3 * var(--u)) solid currentColor;
  font-size: calc(2.5 * var(--u)); font-weight:300; line-height:1.68; text-align:justify;
}
.dp-cols section{ break-inside:avoid }
.dp-cols h3{ font-weight:700; font-size: calc(3 * var(--u)); line-height:1.4; margin-bottom: calc(1 * var(--u)) }
.dp-foot{
  display:flex; align-items:flex-end; gap: calc(5 * var(--u));
  padding-top: calc(2.6 * var(--u)); margin-top: calc(2.6 * var(--u));
  border-top: calc(.6 * var(--u)) solid currentColor;
}
.dp-sign{ flex:1; min-width:0 }
.dp-sign p{
  font-family: var(--mono,monospace); font-size: calc(2.1 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; margin-bottom: calc(4.6 * var(--u));
}
.dp-note{
  flex:0 0 auto; text-align:right; font-family: var(--mono,monospace);
  font-size: calc(2.1 * var(--u)); letter-spacing:.1em; line-height:1.8;
}
.dp-note em, .dp-note span{ display:block; text-transform:uppercase }

/* ── บนจอ: ย่อใบจริง ไม่ใช่ทำของปลอมขึ้นมาใหม่ ── */
.paper-preview .paper{ box-shadow:0 0 0 1px rgba(0,0,0,.25); flex:0 0 auto }

/* ── พิมพ์: ไม่ลงพื้น ใช้สีกระดาษจริง ดำสนิท หนึ่งใบต่อหนึ่งหน้า ── */
@media print{
  .paper{
    --paper-bg: transparent;
    --paper-ink: #000;
    --pw: 210mm !important; --ph: 297mm !important;
    width:100%; height:100vh;
    box-shadow:none; transform:none;
    break-after:page; page-break-after:always;
  }
  .paper[data-size="A3"]{ --pw:297mm !important; --ph:420mm !important }
  /* แถบทึบต้องพิมพ์เป็นดำจริง ไม่ใช่หายไปกับ background */
  .tb-band, .tb-caption{ background:#000 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .paper:last-child{ break-after:auto; page-break-after:auto }
}