/* «Так как ТЭК» — «Бытовка».
   Фон — оцинковка, карточки — белые листы с чёрной обводкой и сдвинутой тенью,
   цвета рубрик — кольца маркировки трубопроводов (ГОСТ 14202), фирменный — оранжевый спецовки.
   Шрифты свои (OFL): Rubik — заголовки и цифры, Golos Text — текст, Caveat — пометки редакции. */

@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap;
  src: url(../fonts/golos-text-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap;
  src: url(../fonts/golos-text-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-weight: 500 900; font-display: swap;
  src: url(../fonts/rubik-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-weight: 500 900; font-display: swap;
  src: url(../fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-weight: 500 700; font-display: swap;
  src: url(../fonts/caveat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Caveat'; font-weight: 500 700; font-display: swap;
  src: url(../fonts/caveat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20BD; }

/* Сетка: колонка до 76rem, поля по бокам 16px+; блоки — листы на оцинковке */
:root {
  color-scheme: light;
  --tk-zinc: #ECEDEE;
  --tk-sheet: #FFFFFF;
  --tk-paper: #FFF4D6;      /* жёлтый листок-заметка */
  --tk-ink: #16181B;
  --tk-mute: #5D636A;
  --tk-rule: #C9CDD1;
  --tk-vest: #FF6B1A;       /* спецовка */
  --tk-oil: #7A4A2A;        /* нефть, горючие жидкости */
  --tk-gas: #F2C200;        /* газ */
  --tk-steam: #D6332A;      /* пар */
  --tk-air: #2C67D8;        /* воздух */
  --tk-water: #2E8B57;      /* вода */
  --tk-up: #C2341B;         /* дорожает — плохо для читателя */
  --tk-down: #23784A;
  --tk-display: 'Rubik', 'Golos Text', system-ui, sans-serif;
  --tk-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tk-hand-f: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --tk-radius: 18px;
  --tk-shadow: 5px 5px 0 var(--tk-ink);
  --tk-border: 2px solid var(--tk-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tk-page {
  margin: 0; background: var(--tk-zinc); color: var(--tk-ink);
  font-family: var(--tk-body); font-size: 1rem; line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--tk-vest); }
:focus-visible { outline: 3px solid var(--tk-vest); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }

.tk-wrap { max-width: 76rem; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.tk-skip { position: absolute; left: -999px; top: 8px; background: var(--tk-sheet); border: var(--tk-border); padding: 8px 12px; z-index: 10; }
.tk-skip:focus { left: 8px; }

/* ---------- шапка ---------- */
.tk-top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
.tk-top-in { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.tk-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tk-ink); }
.tk-logo:hover { color: var(--tk-ink); }
.tk-logo b { font-family: var(--tk-display); font-weight: 900; font-size: 1.65rem; letter-spacing: -.01em; line-height: 1; }
.tk-logo b span { color: var(--tk-vest); }
.tk-logo:hover .tk-helmet { transform: rotate(-6deg); }
.tk-helmet { flex: none; transition: transform .2s; }

.tk-pipes { display: flex; gap: 8px 10px; flex-wrap: wrap; flex: 1; }
.tk-pipe { display: inline-flex; align-items: stretch; background: var(--tk-sheet); border: var(--tk-border); border-radius: 999px;
  font-weight: 600; font-size: .92rem; overflow: hidden; text-decoration: none; color: var(--tk-ink); }
.tk-pipe i { width: 13px; background: var(--c); border-right: var(--tk-border); }
.tk-pipe span { padding: 5px 13px 5px 9px; }
.tk-pipe:hover { color: var(--tk-ink); box-shadow: 2px 2px 0 var(--tk-ink); }
.tk-pipe[aria-current="page"] { background: var(--tk-ink); color: #fff; }

.tk-btn, .tk-ask { display: inline-block; font: inherit; font-weight: 700; background: var(--tk-vest); color: var(--tk-ink);
  border: var(--tk-border); border-radius: 12px; padding: 9px 15px; box-shadow: 3px 3px 0 var(--tk-ink); text-decoration: none; cursor: pointer; }
.tk-btn:hover, .tk-ask:hover { color: var(--tk-ink); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--tk-ink); }
.tk-btn.tk-light { background: var(--tk-sheet); }

/* ---------- контент ---------- */
.tk-main { padding-block: 18px 56px; }
.tk-hand { font-family: var(--tk-hand-f); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--tk-vest); }
.tk-eyebrow { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-mute); margin: 0; font-weight: 600; }
.tk-h1 { font-family: var(--tk-display); font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.tk-h2 { font-family: var(--tk-display); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; margin: 0; }
.tk-lede { font-size: 1.12rem; max-width: 62ch; margin: 0; }
.tk-card { background: var(--tk-sheet); border: var(--tk-border); border-radius: var(--tk-radius); box-shadow: var(--tk-shadow); }
.tk-tape { position: absolute; width: 96px; height: 26px; background: rgba(242, 194, 0, .78); border: 1px solid rgba(0, 0, 0, .08); transform: rotate(-4deg); }

/* системные сообщения Joomla */
#system-message-container joomla-alert, #system-message-container .alert { display: block; background: var(--tk-paper); border: var(--tk-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }

/* ---------- подвал ---------- */
.tk-foot { border-top: var(--tk-border); background: var(--tk-sheet); padding-block: 26px calc(30px + env(safe-area-inset-bottom, 0px)); }
.tk-foot-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px 28px; align-items: start; }
.tk-foot-brand { display: flex; gap: 12px; align-items: center; }
.tk-foot-brand b { display: block; font-family: var(--tk-display); font-weight: 900; font-size: 1.15rem; }
.tk-foot-brand span { color: var(--tk-mute); font-size: .92rem; }
.tk-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: flex-end; font-weight: 600; }
.tk-foot-note { margin: 0; color: var(--tk-ink); }
.tk-foot-small { margin: 0; color: var(--tk-mute); font-size: .82rem; grid-column: 1 / -1; }

/* ---------- 404 ---------- */
.tk-oops { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding-block: 40px; }
.tk-oops > div { display: grid; gap: 14px; flex: 1; min-width: 16rem; }
.tk-oops p { margin: 0; }

/* ---------- главная ---------- */
.tkh { display: grid; gap: 34px; }
.tkh-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
.tkh-q { position: relative; padding: 26px 26px 22px; display: grid; gap: 16px; align-content: start; }
.tkh-q .tk-tape { top: -13px; left: 46%; }
.tkh-who { display: flex; align-items: center; gap: 12px; }
.tkh-who b { display: block; }
.tkh-who small { color: var(--tk-mute); font-size: .86rem; }
.tkh-q h1 { font-family: var(--tk-display); font-weight: 900; font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.07; margin: 0; letter-spacing: -.01em; }
.tkh-q mark { background: linear-gradient(transparent 58%, var(--tk-gas) 58%); color: inherit; padding: 0 .06em; }
.tkh-q p { margin: 0; max-width: 56ch; color: #30363C; }
.tkh-q .tk-btn { justify-self: start; }
.tkh-a { background: var(--tk-ink); color: #fff; border-radius: var(--tk-radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.tkh-a .lab { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #B6BCC2; font-weight: 600; }
.tkh-a .big { font-family: var(--tk-display); font-weight: 900; font-size: clamp(3.2rem, 8vw, 5.4rem); line-height: .95; }
.tkh-a .big small { font-size: .32em; font-family: var(--tk-body); font-weight: 600; color: #B6BCC2; }
.tkh-a svg { display: block; width: 100%; height: auto; }
.tkh-a .src { font-size: .8rem; color: #9AA1A8; }
.tkh-a a { color: #fff; }

.tkh-stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tkh-st { background: var(--bg, var(--tk-sheet)); border: var(--tk-border); border-radius: 22px; padding: 18px 18px 16px; display: grid; gap: 8px;
  transform: rotate(var(--r, 0deg)); box-shadow: 4px 4px 0 var(--tk-ink); text-decoration: none; color: var(--tk-ink); align-content: start; }
.tkh-st:hover { color: var(--tk-ink); transform: rotate(0deg); }
.tkh-st .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; gap: 8px; align-items: center; }
.tkh-st .k i { width: 22px; height: 8px; border-radius: 2px; background: var(--c); border: 1.5px solid var(--tk-ink); }
.tkh-st .n { font-family: var(--tk-display); font-weight: 900; font-size: 2.2rem; line-height: 1; }
.tkh-st p { margin: 0; font-size: .96rem; }
.tkh-st .tk-hand { color: var(--tk-ink); font-size: 1.35rem; }

.tkh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tkh-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tkh-door { display: grid; gap: 6px; padding: 16px 16px 14px; text-decoration: none; color: var(--tk-ink); border-top: 10px solid var(--c); align-content: start; }
.tkh-door:hover { color: var(--tk-ink); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--tk-ink); }
.tkh-door .t { font-family: var(--tk-display); font-weight: 800; font-size: 1.1rem; }
.tkh-door .n { font-family: var(--tk-display); font-weight: 900; font-size: 1.7rem; line-height: 1.05; }
.tkh-door .n small { font-size: .5em; font-weight: 600; color: var(--tk-mute); }
.tkh-door p { margin: 0; color: var(--tk-mute); font-size: .88rem; }

.tkh-people { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.tkh-pc { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.tkh-pc .ph { aspect-ratio: 4 / 3; position: relative; display: grid; place-items: end start; padding: 12px; background: var(--c); border-bottom: var(--tk-border); overflow: hidden; }
.tkh-pc .ph > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tkh-pc .ph .tk-helmet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); }
.tkh-pc .ph span { position: relative; background: var(--tk-sheet); border: var(--tk-border); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }
.tkh-pc .tx { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.tkh-pc h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.tkh-pc p { margin: 0; color: var(--tk-mute); font-size: .9rem; }
.tkh-pc.call { background: var(--tk-paper); }
.tkh-pc.call .tx { gap: 10px; }

.tkh-ask { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: start; }
.tkh-ask-card { padding: 22px; display: grid; gap: 12px; position: relative; background: var(--tk-paper); }
.tkh-ask-card p { margin: 0; }
.tkh-list { display: grid; gap: 10px; }
.tkh-li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; text-decoration: none; color: var(--tk-ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--tk-ink); }
.tkh-li:hover { color: var(--tk-ink); background: #FAFAFA; }
.tkh-li b { display: block; line-height: 1.3; }
.tkh-li small { color: var(--tk-mute); }
.tkh-li .tag { margin-left: auto; font-size: .74rem; font-weight: 700; border: var(--tk-border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: var(--c); }
.tkh-li .tag.dark { color: #fff; }

@media (max-width: 960px) {
  .tkh-doors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tkh-hero, .tkh-ask { grid-template-columns: 1fr; }
  .tkh-people { grid-template-columns: 1fr 1fr; }
  .tkh-people > :first-child { grid-column: 1 / -1; }
  .tkh-stickers { grid-template-columns: 1fr; }
  .tkh-st { transform: none; }
  .tk-foot-in { grid-template-columns: 1fr; }
  .tk-foot-links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .tk-pipes { order: 3; flex-basis: 100%; }
  .tk-ask { margin-left: auto; padding: 7px 11px; font-size: .9rem; }
  .tk-ask-long { display: none; }
  .tk-top-in { flex-wrap: wrap; }
  .tk-logo { flex: 1; min-width: 0; }
  .tk-logo b { font-size: 1.4rem; }
  .tkh-people, .tkh-doors { grid-template-columns: 1fr; }
  .tkh-q { padding: 20px; }
}

/* ---------- новости ---------- */
.tk-chip { display: inline-block; background: var(--tk-sheet); border: var(--tk-border); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--tk-ink); }
.tk-chip-ink { background: var(--tk-ink); color: #fff; }
.tk-chip-ink:hover { color: #fff; background: var(--tk-vest); }
.tk-eyebrow-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }

.tkn { display: grid; gap: 26px; }
.tkn-head { display: grid; gap: 10px; }
.tkn-head .tk-hand { margin: -4px 0 4px; }
.tkn-rubrics { margin-top: 4px; }
.tkn-empty { display: flex; gap: 16px; align-items: center; padding: 22px; }
.tkn-empty p { margin: 6px 0 0; color: var(--tk-mute); }

.tkn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .85rem; color: var(--tk-mute); }
.tkn-tag { display: inline-flex; align-items: stretch; border: var(--tk-border); border-radius: 999px; overflow: hidden; background: var(--tk-sheet);
  color: var(--tk-ink); font-weight: 700; font-size: .78rem; text-decoration: none; }
.tkn-tag i { width: 10px; background: var(--c); border-right: var(--tk-border); }
.tkn-tag { padding-right: 9px; gap: 7px; }
a.tkn-tag:hover { color: var(--tk-ink); box-shadow: 2px 2px 0 var(--tk-ink); }
.tkn-title { margin: 0; font-family: var(--tk-display); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.tkn-title a { text-decoration: none; color: var(--tk-ink); }
.tkn-title a:hover { color: var(--tk-ink); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; }
.tkn-lead { margin: 0; color: #30363C; }
.tkn-by { margin: 0; font-size: .82rem; color: var(--tk-mute); }
.tkn-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c); }
.tkn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tkn-lead-item { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.tkn-lead-item .tkn-img { border-right: var(--tk-border); aspect-ratio: auto; min-height: 100%; position: relative;
  display: flex; align-items: center; }
.tkn-lead-item .tkn-img img { position: relative; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.tkn-lead-item .tkn-img .tkn-img-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: cover;
  filter: blur(28px) saturate(1.1); transform: scale(1.2); }
.tkn-lead-item .tkn-tx { padding: 22px 24px; display: grid; gap: 12px; align-content: start; }
.tkn-lead-item .tkn-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }

.tkn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tkn-item { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-top: 8px solid var(--c); }
.tkn-item:not(:has(.tkn-img)) { grid-template-rows: 1fr; }
.tkn-item .tkn-img { border-bottom: var(--tk-border); }
.tkn-item .tkn-tx { padding: 14px 16px; display: grid; gap: 7px; align-content: start; }
.tkn-item .tkn-title { font-size: 1.12rem; }
.tkn-item .tkn-lead { font-size: .9rem; }

.tkn-pages ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.tkn-pages a, .tkn-pages span.page-link, .tkn-pages .page-link { display: inline-block; min-width: 2.4rem; text-align: center; padding: 6px 12px;
  background: var(--tk-sheet); border: var(--tk-border); border-radius: 999px; text-decoration: none; color: var(--tk-ink); font-weight: 600; }
.tkn-pages .active .page-link, .tkn-pages [aria-current] { background: var(--tk-ink); color: #fff; }
.tkn-pages .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* статья */
.tka { display: grid; gap: 24px; max-width: 50rem; }
.tka-head { display: grid; gap: 14px; }
.tka-lead { font-size: 1.2rem; line-height: 1.5; }
.tka-lead p { margin: 0; }
.tka-img { margin: 0; overflow: hidden; }
.tka-img img { display: block; width: 100%; height: auto; }
.tka-body { font-size: 1.07rem; line-height: 1.65; display: grid; gap: .9em; max-width: 68ch; }
.tka-body p { margin: 0; }
.tka-body a { text-decoration-color: var(--c); }
.tka-body .news-source { font-size: .9rem; color: var(--tk-mute); border-top: 1.5px dashed var(--tk-rule); padding-top: .8em; margin-top: .4em; }
.tka-after { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 6px; }
.tka-data { display: flex; gap: 12px; align-items: center; padding: 16px; text-decoration: none; color: var(--tk-ink); border-left: 10px solid var(--c); }
.tka-data:hover { color: var(--tk-ink); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--tk-ink); }
.tka-data b { display: block; font-family: var(--tk-display); font-weight: 800; font-size: 1.1rem; }
.tka-ask { padding: 16px; display: grid; gap: 10px; align-content: start; background: var(--tk-paper); }
.tka-ask .tk-btn { justify-self: start; }

/* главная: свежие новости */
.tkh-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }


@media (max-width: 900px) {
  .tkn-lead-item { grid-template-columns: 1fr; }
  .tkn-lead-item .tkn-img { border-right: 0; border-bottom: var(--tk-border); aspect-ratio: 16 / 9; min-height: 0; }
  .tka-after { grid-template-columns: 1fr; }
  .tkn-list { grid-template-columns: 1fr 1fr; }
  .tkh-news { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tkh-news, .tkn-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .tkh-st:hover { transform: rotate(var(--r, 0deg)); } }