/* Сторінки фотожурналу (див. pages.js). Усі правила — всередині .mz, щоб не чіпати стилі сайту. */
/* Сторінки фотожурналу — ОДНІ й ті самі для редактора, перегляду й друку.
   Координати в мм у системі обрізного формату A4 (210×297); --b — виліт у тих
   самих одиницях (A4: 3 мм; A5 — сторінку масштабуємо, тож виліт 3/k).
   --tk — множник основного тексту (на A5 трохи більший, щоб не дрібнів). */
@font-face { font-family: "Playfair"; src: url(fonts/PlayfairDisplay.ttf) format("truetype"); font-weight: 400 900; }
@font-face { font-family: "Playfair"; src: url(fonts/PlayfairDisplay-Italic.ttf) format("truetype"); font-weight: 400 900; font-style: italic; }
@font-face { font-family: "eU"; src: url(fonts/e-ukraine-300.woff2); font-weight: 300; }
@font-face { font-family: "eU"; src: url(fonts/e-ukraine-400.woff2); font-weight: 400; }
@font-face { font-family: "eU"; src: url(fonts/e-ukraine-700.woff2); font-weight: 700; }
@font-face { font-family: "Oswald"; font-weight: 400 700; src: url(fonts/Oswald-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 400 700; src: url(fonts/Oswald-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-weight: 100 900; src: url(fonts/RobotoCondensed-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Condensed"; font-weight: 100 900; src: url(fonts/RobotoCondensed-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ── теми журналу: шрифти спільні для всіх сторінок ── */
.mz.th-gloss { --fh: "Playfair", serif; --fhw: 900; --htt: none; --hls: -.01em; --fd: "Playfair", serif; --fds: italic; --fdw: 400; --fb: "eU", sans-serif; --fbw: 300;  }
.mz.th-army { --fh: "Oswald", sans-serif; --fhw: 700; --htt: uppercase; --hls: .01em; --fd: "Roboto Condensed", sans-serif; --fds: normal; --fdw: 400; --fb: "Roboto Condensed", sans-serif; --fbw: 400;  }
.mz.th-minimal { --fh: "eU", sans-serif; --fhw: 700; --htt: none; --hls: -.02em; --fd: "eU", sans-serif; --fds: normal; --fdw: 300; --fb: "eU", sans-serif; --fbw: 300;  }
.mz { position: relative; overflow: hidden; background: #fff; color: #111;
  width: calc(210mm + 2 * var(--b)); height: calc(297mm + 2 * var(--b));
  font-family: var(--fb); font-weight: var(--fbw); -webkit-print-color-adjust: exact; print-color-adjust: exact;
  line-height: 1.3; text-align: left; }
.mz * { box-sizing: border-box; margin: 0; padding: 0; }
.mz .mz-t { position: absolute; left: var(--b); top: var(--b); width: 210mm; height: 297mm; }
.mz .mz-t > * { position: absolute; }
.mz .fb { left: calc(-1 * var(--b)); top: calc(-1 * var(--b)); width: calc(210mm + 2 * var(--b)); height: calc(297mm + 2 * var(--b)); }
/* фото в рамці: позицію й масштаб кадру задає JS (відсотки від рамки) */
.mz .ph { overflow: hidden; background: #e8e6e1; }
.mz .ph > img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.mz .ph.framed { box-shadow: 0 0 0 2.4mm #fff; }
.mz.mz-print .ph.empty { background: #f2f1ee; }
.mz.mz-edit .ph.empty, .mz.mz-thumb .ph.empty { background: repeating-linear-gradient(45deg, #ecebe7 0 3mm, #e3e2dd 3mm 6mm); }
.mz .ph.empty .ph-add { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2mm; color: #6b6f78; font: 600 4.2mm "eU", sans-serif; text-align: center; }
.mz .ph.empty .ph-add svg { width: 12mm; height: 12mm; }
.mz.mz-thumb .ph-add span { display: none; }
.mz .ph.sel { outline: 1.4mm solid #24418f; outline-offset: -1.4mm; }
.mz .ph.sel.has { cursor: grab; }
.mz.mz-edit .ph.low::after { content: "!"; position: absolute; right: 3mm; top: 3mm; width: 9mm; height: 9mm; border-radius: 50%;
  background: #b3261e; color: #fff; font: 700 6mm/9mm "eU", sans-serif; text-align: center; }
.mz .light { color: #fff; }
.mz .dark { color: #111; }
.mz .scrim { pointer-events: none; }
.mz .scrim.top { top: calc(-1 * var(--b)); height: 34%; }
.mz .scrim.bottom { bottom: calc(-1 * var(--b)); height: 48%; }
.mz .scrim.mid { top: 28%; height: 44%; }
.mz .scrim.top, .mz .scrim.bottom, .mz .scrim.mid { left: calc(-1 * var(--b)); width: calc(100% + 2 * var(--b)); }
.mz .scrim.top.light { background: linear-gradient(rgba(0,0,0,.45), transparent); }
.mz .scrim.bottom.light { background: linear-gradient(transparent, rgba(0,0,0,.58)); }
.mz .scrim.mid.light { background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%); }
.mz .scrim.top.dark { background: linear-gradient(rgba(255,255,255,.38), transparent); }
.mz .scrim.bottom.dark { background: linear-gradient(transparent, rgba(255,255,255,.5)); }
.mz .scrim.mid.dark { background: radial-gradient(ellipse at center, rgba(255,255,255,.42), transparent 70%); }
/* незаповнений напис — лише в редакторі */
.mz .ph-txt { opacity: .34; }
/* ── типографіка ── */
.mz .mast { left: 0; width: 210mm; text-align: center; font-family: var(--fh); font-weight: var(--fhw); text-transform: var(--htt);
  line-height: .86; letter-spacing: -.02em; white-space: nowrap; }
.mz .issue { left: 15mm; width: 180mm; display: flex; justify-content: space-between; gap: 6mm; font: 700 2.9mm "eU", sans-serif;
  letter-spacing: .18em; text-transform: uppercase; }
.mz .lines { width: 64mm; list-style: none; }
.mz .lines li { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); font-size: 5.2mm; line-height: 1.12; margin-bottom: 7mm; }
.mz .lines b { display: block; font: 700 3mm "eU", sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.4mm; color: var(--acc); }
.mz .lines.light b { color: #fff; opacity: .9; }
.mz .head { font-family: var(--fh); font-weight: var(--fhw); text-transform: var(--htt); letter-spacing: var(--hls); line-height: .96; }
.mz .barcode { right: 15mm; bottom: 15mm; width: 28mm; height: 15mm; background: #fff; padding: 1.8mm; display: flex; flex-direction: column; align-items: center; }
.mz .barcode i { display: block; width: 100%; height: 8.6mm; background: repeating-linear-gradient(90deg, #000 0 .4mm, #fff .4mm .8mm, #000 .8mm 1.6mm, #fff 1.6mm 2mm); }
.mz .barcode span { font: 400 2.1mm "eU", sans-serif; letter-spacing: .3em; margin-top: .8mm; color: #000; }
.mz .kicker { font: 700 3mm "eU", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.mz .light .kicker, .mz .kicker.light { color: #fff; }
.mz .h-big { font-family: var(--fh); font-weight: var(--fhw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: 28mm; line-height: .92; }
.mz .h-mid { font-family: var(--fh); font-weight: var(--fhw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: 14mm; line-height: .95; }
.mz .h-sm { font-family: var(--fh); font-weight: var(--fhw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: 10mm; line-height: .98; }
.mz .deck { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); font-size: 5.8mm; line-height: 1.2; }
.mz .body { font-size: calc(3.6mm * var(--tk)); line-height: 1.6; white-space: pre-line; }
.mz .caption { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); font-size: calc(3.9mm * var(--tk)); line-height: 1.35; }
.mz .stack-b > * + * { margin-top: 3mm; }
.mz .dropcap::first-letter { float: left; font-family: var(--fh); font-weight: 900; font-size: 15mm; line-height: .82; margin: 1mm 2mm 0 0; color: var(--acc); }
.mz .sign { font-family: var(--fd); font-style: var(--fds); font-size: 4.6mm; margin-top: 5mm; }
.mz .bg { left: calc(-1 * var(--b) - 1mm); top: calc(-1 * var(--b) - 1mm); width: calc(212mm + 2 * var(--b)); height: calc(299mm + 2 * var(--b)); }
.mz .q-mark { left: 10mm; top: 18mm; font-family: var(--fh); font-weight: 900; font-size: 70mm; line-height: 1; opacity: .35; color: #fff; }
.mz .quote-t { font-family: var(--fd); font-style: var(--fds); font-weight: 500; font-size: 12.5mm; line-height: 1.1; color: #fff; }
.mz .q-by { font: 700 3.1mm "eU", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.mz .toc { list-style: none; column-count: 2; column-gap: 10mm; }
.mz .toc li { display: flex; gap: 4mm; break-inside: avoid; margin-bottom: 6mm; }
.mz .toc b { font-family: var(--fh); font-weight: 900; font-size: 9mm; line-height: 1; color: var(--acc); min-width: 11mm; }
.mz .toc span { font-family: var(--fd); font-style: var(--fds); font-size: 5mm; line-height: 1.15; }
.mz .toc i { display: block; font: 400 2.5mm "eU", sans-serif; font-style: normal; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: 1mm; }
.mz .toc-empty { font: 400 3.4mm "eU", sans-serif; opacity: .45; }
.mz .imprint { left: 0; width: 210mm; bottom: 9mm; text-align: center; font: 400 2.5mm "eU", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mz .folio { bottom: 8mm; display: flex; gap: 3mm; align-items: baseline; font: 400 2.4mm "eU", sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mz .folio b { font-family: var(--fh); font-weight: 700; font-size: 4.4mm; letter-spacing: 0; }
.mz .folio.left { left: 15mm; }
.mz .folio.right { right: 15mm; flex-direction: row-reverse; }
.mz .blank-note { left: 0; width: 210mm; top: 140mm; text-align: center; font: 400 4mm "eU", sans-serif; color: #b8b6b0; }
/* поля обрізу (вмикається в редакторі): червоне — виліт, пунктир — безпечна зона */
.mz .safe-trim { left: 0; top: 0; width: 210mm; height: 297mm; border: .4mm dashed #d62828; box-shadow: 0 0 0 30mm rgba(214, 40, 40, .22); pointer-events: none; z-index: 5; }
.mz .safe-in { left: 15mm; top: 15mm; width: 180mm; height: 267mm; border: .4mm dashed #24418f; pointer-events: none; z-index: 5; }