/* Общее для шаблонов: шкала носителей, просмотр стопкой и режим «один макет» для превью.
   Откройте файл.html#id — останется только макет с этим id (так сняты превью). */

/* ── Шкала: пять кеглей на все носители ──────────────────────────────
   144 · 72 — Oswald 700, только прописные и цифры; 40 · 18 · 14 — Manrope 400 / 600.
   Носитель задаёт множитель, пропорции шкалы не меняются (класс на макете):
     слайды 1920×1080              — ×1:        144 · 72 · 40 · 18 · 14 px;
     посты и сторис .tpl-scale-social — ×2:     288 · 144 · 80 · 36 · 28 px (их смотрят уменьшенными);
     печать .tpl-scale-print         — ×0,5 pt: 72 · 36 · 20 · 9 · 7 pt;
     подпись в письме — 18 и 14 px, Arial (почта не грузит веб-шрифты), имя — 18 полужирным.
   Любой другой кегль — ошибка. Иерархия внутри кегля — начертанием 600 и цветом. */
/* Слайды (по умолчанию): 144 · 72 · 40 · 18 · 14 px */
.t-xl{font:700 144px/var(--sc-typography-display-line) var(--sc-font-family-display);letter-spacing:-.01em;text-transform:uppercase;font-variant-numeric:lining-nums}
.t-l{font:700 72px/var(--sc-typography-display-line) var(--sc-font-family-display);letter-spacing:0;text-transform:uppercase;font-variant-numeric:lining-nums}
.t-m{font:400 40px/1.1 var(--sc-font-family-text);letter-spacing:-.03em}
.t-s{font:400 18px/1.5 var(--sc-font-family-text)}
.t-xs{font:400 14px/1.45 var(--sc-font-family-text)}
.t-label{font:600 14px/1.3 var(--sc-font-family-text);letter-spacing:.06em;text-transform:uppercase}
.t-strong{font-weight:600}
/* Посты и сторис: ×2 — 288 · 144 · 80 · 36 · 28 px */
.tpl-scale-social .t-xl{font-size:288px}
.tpl-scale-social .t-l{font-size:144px}
.tpl-scale-social .t-m{font-size:80px}
.tpl-scale-social .t-s{font-size:36px}
.tpl-scale-social .t-xs,.tpl-scale-social .t-label{font-size:28px}
/* Печать: ×0,5 в пунктах — 72 · 36 · 20 · 9 · 7 pt */
.tpl-scale-print .t-xl{font-size:72pt}
.tpl-scale-print .t-l{font-size:36pt}
.tpl-scale-print .t-m{font-size:20pt}
.tpl-scale-print .t-s{font-size:9pt}
.tpl-scale-print .t-xs,.tpl-scale-print .t-label{font-size:7pt}
/* Красная черта под главной цифрой */
.t-bar{display:inline-block;position:relative;padding-bottom:.12em}
.t-bar::after{content:"";position:absolute;left:0;bottom:0;width:.23em;height:var(--sc-border-width-accent);background:var(--sc-red)}

/* ── Просмотр ── */
.tpl-screen{margin:0;padding:48px;background:var(--sc-color-neutral-100);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.tpl-caption{font:400 14px/1.45 var(--sc-font-family-text);color:var(--sc-text-secondary);margin:24px 0 0;max-width:var(--sc-layout-measure)}
.tpl-caption:first-child{margin-top:0}
.tpl-caption b{color:var(--sc-text);font-weight:600}
.tpl-piece{position:relative;overflow:hidden;flex:none;background:var(--sc-bg);color:var(--sc-text)}

/* Режим превью: виден только макет из адреса */
body:has(:target){padding:0;gap:0;background:var(--sc-bg)}
body:has(:target) .tpl-caption,body:has(:target) .tpl-piece:not(:target),body:has(:target) .tpl-hide-on-target{display:none}

/* Плейсхолдер: заменить перед использованием */
.ph{background:var(--sc-color-status-warning-bg);box-shadow:0 0 0 .12em var(--sc-color-status-warning-bg)}
.ph-note{color:var(--sc-color-status-warning)}

@media print{
  .tpl-screen{padding:0;gap:0;background:none;display:block}
  .tpl-caption,.tpl-hide-on-print{display:none}
  .tpl-piece{break-after:page;page-break-after:always}
  .tpl-piece:last-of-type{break-after:auto}
  .ph{background:none;box-shadow:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}