/* Текстовый слой сцены 3840×2160. Цвет — только токены design-core; кегли —
   из дизайн-правил 21: опора 80, акцент 92, титр 150, служебное 38. */

.tx { position: absolute; left: 0; top: 0; will-change: opacity, transform; opacity: 0; pointer-events: none; }

/* строка диктора */
.tx-line {
  font: 400 80px/1.24 var(--font-text); color: var(--paper);
  text-shadow: 0 0 36px rgba(var(--amber-black-rgb), .85), 0 2px 6px rgba(var(--amber-black-rgb), .9);
  text-wrap: balance; hyphens: manual;
}

/* плашка акцента: латунь со скосом −15°, текст внутри — с контр-скосом */
.tx-plaque { transform-origin: 0 0; }
.tx-plaque .pl {
  display: inline-block; background: var(--brass); padding: 34px 64px 40px;
  transform: skewX(var(--brand-skew));
  box-shadow: 0 18px 52px rgba(var(--amber-black-rgb), .42);
}
.tx-plaque .pl > span { display: block; transform: skewX(calc(-1 * var(--brand-skew))); color: var(--text-on-light); }
.tx-speech .pl > span, .tx-slogan .pl > span { font: 700 92px/1.18 var(--font-text); }
.tx-who { font: 600 38px/1 var(--font-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin: 0 0 22px 18px; }
.tx-slogan .w { opacity: .0; }
.tx-title .pl > span { font: 400 150px/1.05 var(--font-display); }
.tx-title .pl { padding: 40px 90px 50px; }

/* документ: слева, на месте карты, по центру своей колонки (decisions §24); слово по чтению
   подсвечено латунью .55. Кегль тела задаёт text.js по длине текста (72 → не меньше 56) */
.tx-doc { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.tx-doc .src { font: 400 38px/1.35 var(--font-caption); color: var(--brass); margin-bottom: 36px; }
.tx-doc .body { font: 400 72px/1.3 var(--font-text); color: var(--paper); text-shadow: 0 0 30px rgba(var(--amber-black-rgb), .9); }
.tx-doc .ln { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: rgba(var(--brass-rgb), 0); }

/* подпись кадра */
.tx-cap { font: 400 38px/1.3 var(--font-caption); color: var(--telegrey); max-width: 1500px;
  text-shadow: 0 0 20px rgba(var(--amber-black-rgb), .9); }

/* метка места, вдвое крупнее (ревью dvn 25.09): латунная плашка «город · страна»,
   под ней дата на графите, ниже адрес — столбиком, чтобы не заходить в зону кадра */
.tx-place { left: 128px; top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tx-place .plc, .tx-place .dt { transform: skewX(var(--brand-skew)); padding: 26px 64px 30px; margin-left: 20px; }
.tx-place .plc { background: var(--brass); }
.tx-place .dt { background: rgba(var(--graphite-rgb), .88); }
.tx-place .plc > span, .tx-place .dt > span { display: block; transform: skewX(calc(-1 * var(--brand-skew))); white-space: nowrap; }
.tx-place .plc > span { font: 600 76px/1 var(--font-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light); }
.tx-place .dt > span { font: 400 76px/1 var(--font-caption); color: var(--paper); }
.tx-place .adr { font: 400 76px/1.1 var(--font-caption); color: var(--paper); padding-left: 44px;
  text-shadow: 0 0 22px rgba(var(--amber-black-rgb), .9); }

/* маркировка (decisions §21): часть — графитовой плашкой третьей строкой метки, под датой;
   МТК — в правом верхнем углу над зоной кадра: фото с паспарту не выше y 115 (замер 25.09) */
.tx-place .prt { transform: skewX(var(--brand-skew)); padding: 20px 56px 24px; margin-left: 20px; background: rgba(var(--graphite-rgb), .88); }
.tx-place .prt > span, .tx-mtk .pl > span { display: block; transform: skewX(calc(-1 * var(--brand-skew))); white-space: nowrap;
  font: 600 48px/1 var(--font-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.tx-place .slot { visibility: hidden; }
.tx-mtk { left: auto; right: 128px; top: 20px; }
.tx-mtk .pl { transform: skewX(var(--brand-skew)); padding: 15px 46px 19px; background: rgba(var(--graphite-rgb), .88); }
.tx-mtk .pl > span { font-size: 44px; letter-spacing: .14em; }

/* подписи карты — 20 Kopeek, кегль служебного; саму карту рисует картинка (picture/maplayer.js) */
.tx-maplabel { white-space: nowrap; font: 400 44px/1 var(--font-caption); color: var(--paper);
  text-shadow: 0 0 14px rgba(var(--amber-black-rgb), .95), 0 0 4px rgba(var(--amber-black-rgb), .9); }
.tx-maplabel.street { font-size: 38px; color: var(--telegrey); letter-spacing: .04em; }
.tx-maplabel.river { font-size: 40px; color: var(--telegrey); letter-spacing: .3em; }
.tx-maplabel.country { font-size: 56px; color: var(--telegrey); letter-spacing: .2em; text-transform: uppercase; }
/* народ (§39, 20/4) — встаёт по голосу: как страна, но светлее — он важнее её */
.tx-maplabel.people { font-size: 56px; color: var(--paper); letter-spacing: .2em; text-transform: uppercase; }
/* слова спора (§39, 19/3): термин — Nolde в регистре ГЗК, над ним строка «над» подписью, под ним черта; место,
   масштаб и кегль задаёт text.js (TERM). Крест «зачеркнуть» — красный карандаш, как по кадру (§36) */
.tx-word { transform-origin: 0 100%; }
.tx-word .over { font: 400 40px/1 var(--font-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--telegrey);
  margin-bottom: 20px; text-shadow: 0 0 14px rgba(var(--amber-black-rgb), .95); }
.tx-word .term { position: relative; display: inline-block; font: 400 200px/1.05 var(--font-display); color: var(--paper); white-space: nowrap;
  text-shadow: 0 0 28px rgba(var(--amber-black-rgb), .85); }
.tx-word .ul { height: 10px; margin-top: 18px; background: rgba(var(--paper-rgb), .8); }
.tx-word svg { position: absolute; left: 0; top: 0; overflow: visible; }
.tx-word path { fill: none; stroke: var(--red); stroke-linecap: round; opacity: .92; visibility: hidden; }
.tx-word path.t { opacity: .6; }
/* в зоне кадра, где кадра нет (19-21 §58): перечень (С6), плакат (С8), строка (С2) */
.tx-list.rule { height: 5px; background: var(--brass); transform-origin: 0 50%; }
.tx-list.row { display: flex; align-items: baseline; gap: 56px; }
.tx-list .num { flex: 0 0 auto; min-width: 96px; font: 400 150px/1 var(--font-display); color: var(--brass); text-shadow: 0 0 28px rgba(var(--amber-black-rgb), .85); }
.tx-list .it { font: 400 96px/1.08 var(--font-display); color: var(--paper); text-shadow: 0 0 28px rgba(var(--amber-black-rgb), .85); }
.tx-poster .q { font: 400 150px/1.08 var(--font-display); color: var(--paper); text-shadow: 0 0 30px rgba(var(--amber-black-rgb), .85); }
.tx-poster .q span { opacity: 0; }
.tx-poster .q span.last { color: var(--brass); }
.tx-poster .who { margin-top: 56px; font: 600 48px/1 var(--font-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); opacity: 0; }
.tx-write .s { position: relative; display: inline-block; font: 400 230px/1 var(--font-display); color: var(--paper); white-space: nowrap;
  text-shadow: 0 0 30px rgba(var(--amber-black-rgb), .85); }
.tx-write .pen { position: absolute; top: 4%; height: 92%; width: 12px; margin-left: -6px; background: var(--red); transform: skewX(var(--brand-skew)); opacity: 0; }
.tx-write .ul { height: 6px; margin-top: 28px; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); }
.tx-write .under { margin-top: 36px; font: 400 64px/1 var(--font-caption); letter-spacing: .06em; color: var(--brass); opacity: 0; }
/* схема (С4, канон design-core §9.6): узлы — 21 Cent кеглем строки диктора, главный — Nolde латунью в латунной рамке,
   связи латунь 5 px, человек — портрет в латунном кольце, имя 20 Kopeek */
.tx-scheme.node { font: 400 84px/1.12 var(--font-text); color: var(--paper); text-shadow: 0 0 28px rgba(var(--amber-black-rgb), .85); }
.tx-scheme.main { padding: 26px 56px 32px; border: 6px solid var(--brass); background: rgba(var(--amber-black-rgb), .35);
  font: 400 112px/1 var(--font-display); color: var(--brass); white-space: nowrap; }
.tx-scheme.who { display: flex; align-items: center; gap: 28px; font: 600 48px/1.15 var(--font-caption); letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper); text-shadow: 0 0 18px rgba(var(--amber-black-rgb), .95); white-space: nowrap; }
.tx-scheme.who span { max-width: 360px; white-space: normal; }
.tx-scheme .ring { position: relative; flex: 0 0 auto; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 8px var(--brass), 0 0 22px 8px rgba(var(--amber-black-rgb), .8); }
.tx-scheme .ring img { position: absolute; max-width: none; filter: grayscale(1); }
.tx-scheme-links { left: 0; top: 0; overflow: visible; }
.tx-scheme-links .ln { fill: none; stroke: var(--brass); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tx-plaque .wrap { display: inline-block; text-align: left; }   /* автор — над левым краем плашки */

/* рейка времени: части — параллелограммы по датам, бегунок — по времени истории */
.tx-rail { left: 0; top: 0; width: 3840px; height: 2160px; opacity: 1; }
.tx-rail .axis { position: absolute; height: 2px; background: rgba(var(--telegrey-rgb), .45); }
.tx-rail .part { position: absolute; height: 40px; transform: skewX(var(--brand-skew)); background: rgba(var(--telegrey-rgb), .14);
  border: 2px solid rgba(var(--telegrey-rgb), .28); box-sizing: border-box; }
.tx-rail .part.on { background: rgba(var(--brass-rgb), .30); border-color: rgba(var(--brass-rgb), .85); }
.tx-rail .pname { position: absolute; font: 600 38px/1 var(--font-caption);   /* 38 — зал 1,5 м, угловое правило канона §3а (19-21 §56) */ letter-spacing: .08em; text-transform: uppercase;
  color: rgba(var(--telegrey-rgb), .6); white-space: nowrap; }
.tx-rail .pname.on { color: var(--brass); }
.tx-rail .pname .num { margin-right: 14px; }
.tx-rail .tick { position: absolute; width: 2px; height: 14px; background: rgba(var(--telegrey-rgb), .55); }
.tx-rail .mon { position: absolute; font: 400 30px/1 var(--font-caption); color: rgba(var(--telegrey-rgb), .75); white-space: nowrap; }
.tx-rail .runner { position: absolute; width: 16px; height: 64px; background: var(--brass); transform: skewX(var(--brand-skew));
  box-shadow: 0 0 22px rgba(var(--brass-rgb), .55); }
.tx-rail .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--paper-rgb), .7); }

/* письма на столе (decisions §39): лист бумаги — слова 21 Cent, внизу «кто» и дата 20 Kopeek, в углу
   марка-портрет. Место, поворот и появление задаёт text.js (LETTER в core/camera.js); кегль — по месту */
.tx-letter { transform-origin: 50% 50%; }
.tx-letter .sheet { box-sizing: border-box; display: flex; flex-direction: column; padding: 64px 72px 52px;
  background: var(--paper); color: var(--text-on-light);
  box-shadow: 0 36px 80px rgba(var(--amber-black-rgb), .45), 0 4px 8px rgba(var(--amber-black-rgb), .35); }
.tx-letter .q { flex: 1 1 auto; min-height: 0; overflow: hidden; font-family: var(--font-text); font-weight: 400; line-height: 1.34; }
.tx-letter .w { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tx-letter .who { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; margin-top: 26px;
  font: 400 34px/1.2 var(--font-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-light); }
.tx-letter .who .dt { letter-spacing: .04em; text-transform: none; }
/* марка: белое поле с зубцами (маска — круги по краю), портрет ч/б с лёгкой сепией; текст её обтекает */
.tx-letter .stamp { float: right; box-sizing: border-box; padding: 14px; margin: -18px -20px 18px 30px; background: var(--white);
  transform: rotate(4deg); --r: 6px;
  -webkit-mask: radial-gradient(var(--r) at 50% 50%, rgba(var(--amber-black-rgb), 0) 96%, var(--amber-black)) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
    linear-gradient(var(--amber-black) 0 0) 50% 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)) no-repeat;
  mask: radial-gradient(var(--r) at 50% 50%, rgba(var(--amber-black-rgb), 0) 96%, var(--amber-black)) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
    linear-gradient(var(--amber-black) 0 0) 50% 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)) no-repeat; }
.tx-letter .stamp .ph { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--telegrey);
  box-shadow: inset 0 0 0 2px rgba(var(--graphite-rgb), .25); }
.tx-letter .stamp img { position: absolute; max-width: none; filter: grayscale(1) sepia(.25) contrast(1.05); }

/* нить лет (§39): латунная нить слева, годы 20 Kopeek; текущий — латунью и крупнее (--cur, --k — text.js) */
.tx-thread { width: 3px; background: linear-gradient(var(--brass), rgba(var(--brass-rgb), .15)); }
.tx-year { --cur: 100%; --k: 1; }
.tx-year i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--brass) var(--cur), var(--telegrey)); transform: scale(var(--k)); }
.tx-year span { position: absolute; left: 46px; top: 0; transform: translateY(-50%) scale(var(--k)); transform-origin: 0 50%;
  font: 600 96px/1 var(--font-caption); white-space: nowrap; color: color-mix(in srgb, var(--brass) var(--cur), var(--telegrey)); }
.tx-rail .yr { color: color-mix(in srgb, var(--brass) var(--cur, 100%), rgba(var(--telegrey-rgb), .75)); }
/* вставка (С7, канон design-core §9.6 «Вставка-символ»): рисунок МТК — цвет только классами токенов; без «fill» — обводка,
   с «fill» — заливка. Ход перекрашивает слой: обёртка задаёт --to (цвет хода) и --k (доля), смесь — color-mix */
.tx-insert svg { display: block; overflow: visible; fill: none; filter: drop-shadow(0 0 14px rgba(var(--amber-black-rgb), .9)); }
.tx-insert .paper { --c: var(--paper); } .tx-insert .brass { --c: var(--brass); } .tx-insert .red { --c: var(--red); }
.tx-insert .telegrey { --c: var(--telegrey); } .tx-insert .graphite { --c: var(--graphite); }
.tx-insert [class] { stroke: color-mix(in srgb, var(--to, var(--c)) var(--k, 0%), var(--c)); }
.tx-insert .fill { fill: color-mix(in srgb, var(--to, var(--c)) var(--k, 0%), var(--c)); stroke: none; }
.tx-insert-cap { font: 400 132px/1 var(--font-display); color: var(--brass); white-space: nowrap;
  text-shadow: 0 0 28px rgba(var(--amber-black-rgb), .9); }
