/* ============================================================
   IAA — дизайн-система «ДРУКАРНЯ»
   Газетна широка шпальта. Щільність замість повітря.
   Константи бренду: смарагд #0D2621, латунь #A8863F/#D9B96A,
   папір #F7F4ED, чорнило #0C1012.
   ------------------------------------------------------------
   Порядок: 0 токени · 1 база · 2 типографіка · 3 сітка
            4 службова стрічка · 5 мастхед · 6 герой
            7 секції · 8 стрічка матеріалів · 9 стаття
            10 форми · 11 підвал · 12 утиліти · 13 адаптив
   ============================================================ */

/* Шрифти підключаються окремим <link> на assets/fonts/fonts.css —
   щоб не додавати зайвий round-trip через @import. */

/* ── 0. ТОКЕНИ ───────────────────────────────────────────── */
:root{
  /* денний випуск — холодний газетний папір, навмисно НЕ кремовий */
  --bg:#E4E5E0;
  --bg-2:#DBDCD6;
  --bg-3:#D0D2CA;
  --fg:#14161A;
  --fg-2:#3A4046;
  --fg-3:#6C737A;
  --rule:#B9BBB2;
  --rule-2:#CBCDC5;
  --rule-3:#DCDDD8;

  /* бренд */
  --emerald:#0D2621;
  --emerald-2:#0A1F1B;
  --emerald-3:#123B33;
  --brass:#8A6C2C;        /* на світлому */
  --brass-lt:#D9B96A;     /* на темному */
  --brass-pale:#EBD7A6;
  --paper:#F7F4ED;        /* брендовий папір — тільки як текст на темному */

  /* інверсні плити (смарагдові блоки всередині світлої сторінки) */
  --inv-bg:var(--emerald);
  --inv-fg:#DCE3E0;
  --inv-fg-2:#A9B7B2;
  --inv-rule:rgba(217,185,106,.26);

  /* шрифти */
  --disp:'Fira Sans Condensed','Arial Narrow',sans-serif;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --sans:'Commissioner','Segoe UI',system-ui,sans-serif;

  /* метрика */
  --maxw:1440px;
  --gut:clamp(18px,2.4vw,34px);
  --measure:38rem;          /* шпальта статті ≈ 70 знаків */
  --rule-w:1px;

  --e:cubic-bezier(.22,.85,.26,1);
}

/* нічний випуск */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121417;
    --bg-2:#191C20;
    --bg-3:#20242A;
    --fg:#E4E5E0;
    --fg-2:#B4B9BC;
    --fg-3:#868C92;
    --rule:#333940;
    --rule-2:#272C32;
    --rule-3:#1E2227;
    --brass:#C9A455;
    --inv-bg:#0A1F1B;
    --inv-rule:rgba(217,185,106,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#121417; --bg-2:#191C20; --bg-3:#20242A;
  --fg:#E4E5E0; --fg-2:#B4B9BC; --fg-3:#868C92;
  --rule:#333940; --rule-2:#272C32; --rule-3:#1E2227;
  --brass:#C9A455; --inv-bg:#0A1F1B; --inv-rule:rgba(217,185,106,.22);
}
:root[data-theme="light"]{
  --bg:#E4E5E0; --bg-2:#DBDCD6; --bg-3:#D0D2CA;
  --fg:#14161A; --fg-2:#3A4046; --fg-3:#6C737A;
  --rule:#B9BBB2; --rule-2:#CBCDC5; --rule-3:#DCDDD8;
  --brass:#8A6C2C; --inv-bg:#0D2621; --inv-rule:rgba(217,185,106,.26);
}

/* ── 1. БАЗА ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* газетне зерно — inline SVG, без зовнішніх картинок */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:var(--brass);color:var(--bg)}
hr{border:0;border-top:var(--rule-w) solid var(--rule);margin:0}

/* ── 2. ТИПОГРАФІКА ──────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:800;margin:0;
  letter-spacing:-.008em;line-height:1.06;text-wrap:balance}
.d1{font-size:clamp(34px,5.6vw,80px);line-height:.95;letter-spacing:-.014em}
.d2{font-size:clamp(24px,3.1vw,42px);text-transform:uppercase;letter-spacing:-.002em}
.d3{font-size:clamp(20px,2.2vw,30px);font-weight:700}
.d4{font-size:21px;font-weight:700;line-height:1.14}

.kicker{font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0}
.lbl{font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.deck{font-family:var(--serif);font-weight:300;
  font-size:clamp(17px,1.5vw,20px);line-height:1.56;color:var(--fg-2);margin:0}
.byline{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}
.byline b{color:var(--fg);font-weight:600}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
em,i{font-style:italic}
small{font-size:13px}
sup{font-size:.62em;line-height:0;vertical-align:super}

/* буквиця */
.dropcap::first-letter{
  float:left;font-family:var(--disp);font-weight:800;font-size:4.1em;
  line-height:.76;padding:.06em .1em 0 0;color:var(--brass)}

/* ── 3. СІТКА ────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:960px}
.grid{display:grid;gap:0}
.rule-t{border-top:var(--rule-w) solid var(--rule)}
.rule-b{border-bottom:var(--rule-w) solid var(--rule)}
.rule-hv{border-top:3px solid var(--fg)}
.rule-db{border-top:3px double var(--fg)}

/* ── 4. СЛУЖБОВА СТРІЧКА ─────────────────────────────────── */
.strip{background:var(--emerald);color:#CBD6D1;font-family:var(--sans);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.strip .wrap{display:flex;align-items:center;gap:22px;height:36px;overflow:hidden;white-space:nowrap}
.strip b{color:var(--brass-lt);font-weight:500}
.strip .push{margin-left:auto;display:flex;gap:18px}
.strip a{transition:color .2s}
.strip a:hover,.strip a[aria-current]{color:var(--brass-lt)}
.strip .sep{opacity:.3}

/* ── 5. МАСТХЕД ──────────────────────────────────────────── */
.masthead{padding-top:22px;background:var(--bg)}
.masthead__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.masthead__side{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);line-height:1.85}
.masthead__side--r{text-align:right}
.logo{display:flex;align-items:center;gap:13px;justify-content:center}
.logo svg{width:44px;height:44px;flex:none}
.logo__t{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5vw,58px);
  line-height:.84;letter-spacing:.015em}
.logo__t span{display:block;font-family:var(--sans);font-weight:500;font-size:9.5px;
  letter-spacing:.4em;color:var(--brass);margin-top:7px}

.mnav{margin-top:18px;border-top:3px double var(--fg);border-bottom:var(--rule-w) solid var(--fg);
  position:sticky;top:0;z-index:100;background:var(--bg)}
.mnav__list{display:flex;list-style:none;margin:0;padding:0;justify-content:center;flex-wrap:wrap}
.mnav__list li{border-right:var(--rule-w) solid var(--rule)}
.mnav__list li:first-child{border-left:var(--rule-w) solid var(--rule)}
.mnav__list a{display:block;padding:11px 24px;font-family:var(--disp);font-weight:600;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:background .18s,color .18s}
.mnav__list a:hover,.mnav__list a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.mnav__burger{display:none}

/* ── 6. ГЕРОЙ / ГОЛОВНА ШПАЛЬТА ──────────────────────────── */
.lead{display:grid;grid-template-columns:2.3fr 1fr;border-bottom:3px solid var(--fg)}
.lead__main{padding:34px 38px 38px 0;border-right:var(--rule-w) solid var(--rule)}
.lead__side{padding:34px 0 38px 26px}
.lead h1{margin-top:12px;max-width:19ch}
.lead .deck{margin-top:18px;max-width:58ch}
.lead__byline{margin-top:20px;padding-top:13px;border-top:var(--rule-w) solid var(--rule)}
.lead__cols{margin-top:24px;column-count:2;column-gap:34px;
  column-rule:var(--rule-w) solid var(--rule-2);font-size:15.5px}
.lead__cols p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.mark-brass{box-shadow:inset 0 -.16em 0 rgba(138,108,44,.34)}

/* ── бокові матеріали ── */
.sideitem{padding:15px 0;border-bottom:var(--rule-w) solid var(--rule-2)}
.sideitem:last-child{border-bottom:0}
.sideitem .kicker{font-size:10px}
.sideitem h3{font-size:18px;font-weight:700;line-height:1.16;margin-top:6px}
.sideitem p{font-size:13.5px;color:var(--fg-2);margin-top:5px}
.sideitem a:hover h3{color:var(--brass)}

/* ── врізка в рамці ── */
.boxed{border:var(--rule-w) solid var(--fg);background:var(--bg-2)}
.boxed__h{background:var(--fg);color:var(--bg);font-family:var(--disp);font-weight:700;
  font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;padding:8px 14px;margin:0}
.boxed__b{padding:8px 14px 14px}
.boxed__r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px dotted var(--rule)}
.boxed__r:last-child{border-bottom:0}
.boxed__r span{font-family:var(--sans);font-size:12px;color:var(--fg-2)}
.boxed__r b{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.01em}
.boxed--brass{border-color:var(--brass)}
.boxed--brass .boxed__h{background:var(--brass);color:var(--emerald)}

/* ── 7. СЕКЦІЇ ───────────────────────────────────────────── */
.sect{padding:42px 0}
.sect--tight{padding:28px 0}
.sect__h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  border-bottom:var(--rule-w) solid var(--fg);padding-bottom:9px;margin-bottom:24px}
.sect__n{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;
  background:var(--brass);color:var(--bg);padding:3px 9px;line-height:1.5}
.sect__meta{margin-left:auto;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.sect__meta a:hover{color:var(--brass)}

/* колонки-напрями.
   Варіанти ширин — ТІЛЬКИ класами. Інлайновий grid-template-columns
   перебиває медіазапит і ламає мобільну версію. */
.cols3{display:grid;grid-template-columns:repeat(3,1fr)}
.cols3--2{grid-template-columns:1fr 1fr}
.cols3--wide-l{grid-template-columns:1.2fr 1fr}
.cols3--wide-l2{grid-template-columns:1.4fr 1fr}
.cols3--author{grid-template-columns:280px 1fr 1fr}
.cols3>*{padding:0 28px;border-right:var(--rule-w) solid var(--rule)}
.cols3>*:first-child{padding-left:0}
.cols3>*:last-child{border-right:0;padding-right:0}
.cols3 h3{font-size:25px;margin:9px 0 9px}
.cols3 p{font-size:15px;color:var(--fg-2)}
.cols3 .num{font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:.15em;color:var(--brass);text-transform:uppercase}

/* ── 8. СТРІЧКА МАТЕРІАЛІВ ───────────────────────────────── */
.feed{width:100%;border-collapse:collapse}
.feed tr{border-bottom:var(--rule-w) solid var(--rule-2);transition:background .2s}
.feed tr:hover{background:var(--bg-2)}
.feed td{padding:17px 14px 17px 0;vertical-align:top}
.feed .c-date{width:112px;font-family:var(--sans);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);padding-top:21px;white-space:nowrap}
.feed .c-rub{width:158px;text-align:right;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3);padding-top:23px}
.feed h3{font-size:23px;font-weight:700;line-height:1.14}
.feed a:hover h3{color:var(--brass)}
.feed p{font-size:14.5px;color:var(--fg-2);margin:5px 0 0;max-width:84ch}

/* рядок новини у стрічці /novyny/: інсайт і посилання на першоджерело */
.feed .n-ins{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--fg-2);
  border-left:2px solid var(--brass);padding-left:11px;margin:9px 0 0;max-width:78ch}
.feed .n-src{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;margin:9px 0 0}
.feed .n-src a{color:var(--brass);font-weight:600}
.feed .n-src a:hover{text-decoration:underline}

/* картки-анонси (для індексу аналітики) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:var(--rule-w) solid var(--rule)}
.card{padding:26px 30px 28px;border-right:var(--rule-w) solid var(--rule);
  border-bottom:var(--rule-w) solid var(--rule);transition:background .22s;display:block}
.card:nth-child(2n){border-right:0}
.card:hover{background:var(--bg-2)}
.card h3{font-size:26px;font-weight:700;line-height:1.12;margin:10px 0 9px}
.card:hover h3{color:var(--brass)}
.card p{font-size:14.5px;color:var(--fg-2)}
.card__foot{margin-top:16px;display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3)}
.card__foot .go{margin-left:auto;color:var(--brass);font-weight:600}
.card--lead{grid-column:1 / -1;border-right:0;
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;padding:0}
.card--lead figure{margin:0;border-right:var(--rule-w) solid var(--rule)}
.card--lead figure img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12);min-height:280px}
.card--lead .card__body{padding:30px 32px}
.card--lead h3{font-size:clamp(26px,3vw,38px)}

/* ── 9. СТАТТЯ ───────────────────────────────────────────── */
.crumbs{font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);padding:16px 0}
.crumbs a:hover{color:var(--brass)}
.crumbs span{opacity:.5;margin:0 7px}

.arthead{border-bottom:3px solid var(--fg);padding-bottom:26px}
.arthead h1{margin-top:12px;max-width:22ch}
.arthead .deck{margin-top:18px;max-width:var(--measure)}
.artmeta{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:center;
  margin-top:22px;padding-top:14px;border-top:var(--rule-w) solid var(--rule)}
.artmeta__author{display:flex;align-items:center;gap:11px}
.artmeta__author img{width:38px;height:38px;border-radius:0;
  filter:grayscale(1) contrast(1.1);border:var(--rule-w) solid var(--rule)}
.artmeta__author .n{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em}
.artmeta__author .r{font-family:var(--sans);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3)}

.artbody{display:grid;grid-template-columns:var(--measure) 1fr;gap:0 46px;
  padding:34px 0 10px;align-items:start}
.prose{font-size:17.5px;line-height:1.7;max-width:var(--measure)}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--disp);font-weight:800;font-size:29px;
  text-transform:none;margin:1.7em 0 .5em;line-height:1.1}
.prose h3{font-family:var(--disp);font-weight:700;font-size:22px;margin:1.5em 0 .4em}
.prose a{color:var(--brass);box-shadow:inset 0 -1px 0 currentColor}
.prose a:hover{background:var(--brass);color:var(--bg);box-shadow:none}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin-bottom:.42em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{padding-left:1.5em;position:relative}
.prose ul li::before{content:'—';position:absolute;left:0;color:var(--brass)}
.prose blockquote{margin:1.6em 0;padding:0 0 0 22px;border-left:3px solid var(--brass);
  font-size:19px;font-style:italic;color:var(--fg-2)}
.prose figure{margin:1.9em 0}
.prose figure img{width:100%;filter:grayscale(1) contrast(1.1);border:var(--rule-w) solid var(--rule)}
.prose figcaption{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;
  color:var(--fg-3);margin-top:8px;padding-top:7px;border-top:var(--rule-w) solid var(--rule-2)}

/* врізка-цитата на всю ширину шпальти */
.pull{margin:1.9em 0;padding:20px 0;border-top:3px solid var(--fg);
  border-bottom:var(--rule-w) solid var(--fg);
  font-family:var(--disp);font-weight:700;font-size:27px;line-height:1.16}

/* таблиця даних у статті */
.datatable{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:15px}
.datatable caption{caption-side:top;text-align:left;font-family:var(--sans);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  padding-bottom:9px}
.datatable th{font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-align:left;font-weight:600;color:var(--fg-3);
  padding:8px 12px 8px 0;border-bottom:var(--rule-w) solid var(--fg)}
.datatable td{padding:10px 12px 10px 0;border-bottom:var(--rule-w) solid var(--rule-2);
  font-variant-numeric:tabular-nums}
.datatable td:last-child,.datatable th:last-child{text-align:right;padding-right:0}

/* бічна колонка статті */
.artside{position:sticky;top:66px;font-family:var(--sans)}
.artside__block{border-top:3px solid var(--fg);padding-top:12px;margin-bottom:26px}
.artside__block h4{font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
.artside ol{margin:0;padding-left:1.15em;font-size:13px;line-height:1.5}
.artside ol li{margin-bottom:8px}
.artside ol a:hover{color:var(--brass)}
.artside .src{font-size:12.5px;line-height:1.55;color:var(--fg-2);
  padding:9px 0;border-bottom:var(--rule-w) solid var(--rule-2)}
.artside .src:last-child{border-bottom:0}
.artside .src a{color:var(--brass);box-shadow:inset 0 -1px 0 currentColor}
.artside .share{display:flex;gap:8px;flex-wrap:wrap}
.artside .share a{border:var(--rule-w) solid var(--rule);padding:7px 12px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.artside .share a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* прогрес читання */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--brass);z-index:300;width:0}

/* підпис автора під статтею */
.authorbox{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;
  border-top:3px solid var(--fg);border-bottom:var(--rule-w) solid var(--fg);
  padding:22px 0;margin-top:36px;max-width:calc(var(--measure) + 240px)}
.authorbox img{width:96px;filter:grayscale(1) contrast(1.12);border:var(--rule-w) solid var(--rule)}
.authorbox h3{font-size:23px;font-weight:700}
.authorbox .role{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:15px;margin-top:3px}
.authorbox p{font-size:14.5px;color:var(--fg-2);margin-top:9px}

/* ── 10. ФОРМИ ТА КНОПКИ ─────────────────────────────────── */
.btn{display:inline-block;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase;padding:13px 26px;
  border:var(--rule-w) solid var(--fg);color:var(--fg);background:transparent;
  cursor:pointer;transition:.22s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn--solid{background:var(--brass);border-color:var(--brass);color:var(--bg)}
.btn--solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn--onDark{border-color:var(--brass-lt);color:var(--brass-lt)}
.btn--onDark:hover{background:var(--brass-lt);color:var(--emerald)}
.btn--onDarkSolid{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--emerald)}
.btn--onDarkSolid:hover{background:#F2EFE6;border-color:#F2EFE6}
.btns{display:flex;gap:11px;flex-wrap:wrap}

.field{display:flex;gap:0;max-width:460px}
.field input{flex:1;min-width:0;font-family:var(--serif);font-size:15px;padding:13px 15px;
  border:var(--rule-w) solid var(--rule);border-right:0;background:var(--bg);color:var(--fg)}
.field input::placeholder{color:var(--fg-3)}
.field input:focus{outline:0;border-color:var(--brass)}
.field .btn{border-left:0}
.formnote{font-size:12.5px;color:var(--fg-3);margin-top:11px;line-height:1.55;max-width:56ch}
.formnote a{color:var(--brass);box-shadow:inset 0 -1px 0 currentColor}

/* ── інверсна плита (смарагд) ── */
.slab{background:var(--inv-bg);color:var(--inv-fg);padding:52px 0}
.slab h2,.slab h3{color:#F2EFE6}
.slab p{color:var(--inv-fg-2)}
.slab .kicker{color:var(--brass-lt)}
.slab .sect__h{border-bottom-color:var(--inv-rule)}
.slab .sect__n{background:var(--brass-lt);color:var(--emerald)}
.slab .cols3>*{border-right-color:var(--inv-rule)}
.slab .field input{background:rgba(255,255,255,.05);border-color:var(--inv-rule);color:#F2EFE6}
.slab .formnote{color:var(--inv-fg-2)}
.slab .formnote a,.slab a.lnk{color:var(--brass-lt)}

/* ── цифри-показники ── */
.figs{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-w) solid var(--fg);border-bottom:var(--rule-w) solid var(--fg)}
.figs>div{padding:18px 16px;border-right:var(--rule-w) solid var(--rule-2)}
.figs>div:last-child{border-right:0}
.figs--2{grid-template-columns:1fr 1fr}
.figs--2>div:nth-child(2n){border-right:0}
.figs b{font-family:var(--disp);font-weight:800;font-size:30px;display:block;line-height:1;
  font-variant-numeric:tabular-nums}
.figs span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);margin-top:7px;line-height:1.6}

/* ── FAQ ── */
.faq{max-width:1000px}
.faq details{border-bottom:var(--rule-w) solid var(--rule-2)}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:14px;
  font-family:var(--disp);font-size:22px;color:var(--brass);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px;font-size:15.5px;color:var(--fg-2);max-width:78ch}

/* ── 11. ПІДВАЛ ──────────────────────────────────────────── */
.foot{border-top:3px double var(--fg);margin-top:10px;padding:30px 0 40px}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.foot h4{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;margin:0 0 11px}
.foot ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:13px}
.foot li{margin-bottom:7px}
.foot a:hover{color:var(--brass)}
.foot__bottom{margin-top:28px;padding-top:16px;border-top:var(--rule-w) solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3)}

/* перемикач теми */
.themetoggle{background:none;border:var(--rule-w) solid var(--rule);color:var(--fg-3);
  font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;cursor:pointer;transition:.2s}
.themetoggle:hover{border-color:var(--brass);color:var(--brass)}

/* ── 12. УТИЛІТИ ─────────────────────────────────────────── */
.tnum{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}
.measure{max-width:var(--measure)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 13. АДАПТИВ ─────────────────────────────────────────── */
@media (max-width:1100px){
  .artbody{grid-template-columns:1fr;gap:34px}
  .artside{position:static}
  .artside__block{max-width:var(--measure)}
}
@media (max-width:960px){
  .lead{grid-template-columns:1fr}
  .lead__main{border-right:0;padding-right:0}
  .lead__side{padding-left:0;border-top:var(--rule-w) solid var(--rule)}
  .lead__cols{column-count:1}
  .cols3,.cols3--2,.cols3--wide-l,.cols3--wide-l2,.cols3--author{grid-template-columns:1fr}
  .cols3>*{padding:20px 0;border-right:0;border-bottom:var(--rule-w) solid var(--rule)}
  .cols3>*:last-child{border-bottom:0}
  .cards{grid-template-columns:1fr}
  .card{border-right:0}
  .card--lead{grid-template-columns:1fr}
  .card--lead figure{border-right:0;border-bottom:var(--rule-w) solid var(--rule)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .masthead__row{grid-template-columns:1fr}
  .masthead__side{display:none}
}
@media (max-width:720px){
  .strip .wrap{gap:14px;font-size:10px}
  .strip .hide-s{display:none}
  .mnav__list{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none}
  .mnav__list::-webkit-scrollbar{display:none}
  .mnav__list a{padding:10px 16px;font-size:13px;white-space:nowrap}
  .feed .c-date,.feed .c-rub{display:none}
  /* у новинах дата — частина змісту, тому лишається; стає рядком над заголовком */
  .feed--news .c-date{display:block;width:auto;padding:0 0 5px;font-size:10px}
  .feed td{display:block;padding-right:0}
  .feed h3{font-size:20px}
  .figs{grid-template-columns:1fr 1fr}
  .figs>div:nth-child(2n){border-right:0}
  .figs>div:nth-child(-n+2){border-bottom:var(--rule-w) solid var(--rule-2)}
  .authorbox{grid-template-columns:1fr}
  .authorbox img{width:80px}
  .field{flex-wrap:wrap}
  .field input{flex:1 1 100%;border-right:var(--rule-w) solid var(--rule);border-bottom:0}
  .field .btn{flex:1 1 100%;border-left:var(--rule-w) solid var(--brass);text-align:center}
  .foot__grid{grid-template-columns:1fr}
  .pull{font-size:22px}
  .prose{font-size:17px}
}

/* ── 14. КОНТЕНТ ГЕНЕРАТОРА (_build) ─────────────────────────
   Класи, які видають md2html та шаблони сторінок. */

/* доступність */
.skip{position:absolute;left:-9999px;top:0;background:var(--fg);color:var(--bg);
  padding:10px 18px;z-index:400;font-family:var(--sans);font-size:13px}
.skip:focus{left:0}

/* списки статей: ticks (—) і checks (✓) */
.prose ul.ticks li::before{content:'—'}
.prose ul.checks li::before{content:'✓';font-family:var(--sans);font-weight:600}

/* інлайн-код / нормативні позначки */
.tag,.prose code{font-family:var(--sans);font-size:.86em;font-weight:500;
  background:var(--bg-2);border:var(--rule-w) solid var(--rule-2);padding:1px 6px;
  white-space:nowrap}
.prose pre code{background:none;border:0;padding:0;white-space:pre}
.prose pre{background:var(--bg-2);border:var(--rule-w) solid var(--rule);
  padding:16px 18px;overflow-x:auto;font-size:13.5px;line-height:1.55;margin:0 0 1.15em}

/* таблиці генератора (.ctable = та сама мова, що .datatable) */
.table-scroll{overflow-x:auto;margin:1.5em 0}
.ctable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.ctable th{font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-align:left;font-weight:600;color:var(--fg-3);
  padding:8px 14px 8px 0;border-bottom:var(--rule-w) solid var(--fg)}
.ctable td{padding:11px 14px 11px 0;border-bottom:var(--rule-w) solid var(--rule-2);
  vertical-align:top;font-variant-numeric:tabular-nums}
.ctable.narrow{min-width:460px}

/* статуси календаря змін */
.badge{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border:var(--rule-w) solid currentColor;
  padding:3px 9px;white-space:nowrap}
.badge.on{color:#2E7D5B}
.badge.due{color:#A8501F}
.badge.soon{color:var(--brass)}
.badge.draft{color:var(--fg-3)}
:root[data-theme="dark"] .badge.on{color:#4FBF95}
:root[data-theme="dark"] .badge.due{color:#E08055}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .badge.on{color:#4FBF95}
  :root:not([data-theme="light"]) .badge.due{color:#E08055}
}

/* форми генератора: label > span + input */
.form label{display:block;margin-bottom:12px}
.form label>span{display:block;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.form input,.form textarea{width:100%;font-family:var(--serif);font-size:15px;
  padding:12px 14px;border:var(--rule-w) solid var(--rule);
  background:var(--bg);color:var(--fg);resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--brass)}
.form input.bad,.form textarea.bad{border-color:#A8501F}
.slab .form input,.slab .form textarea{background:rgba(255,255,255,.05);
  border-color:var(--inv-rule);color:#F2EFE6}
.slab .form label>span{color:var(--inv-fg-2)}
.hp{position:absolute;left:-9999px;top:-9999px}
.form-note{font-family:var(--sans);font-size:13px;margin-top:10px;min-height:1.2em}
.form-note.ok{color:#2E7D5B}
.slab .form-note.ok{color:#7FD4AC}
.form-note.err{color:#A8501F}
/* Форма заявки стоїть у темній секції .slab — цегляний колір помилки
   там нечитабельний, тому світлий відповідник. */
.slab .form-note.err{color:#F0A882}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.consent{font-size:12px;color:var(--fg-3);margin-top:10px;line-height:1.55}
.slab .consent{color:var(--inv-fg-2)}
.consent a{color:var(--brass);box-shadow:inset 0 -1px 0 currentColor}
.slab .consent a{color:var(--brass-lt)}

/* поширення матеріалу */
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.share-row a,.share-row button{display:inline-flex;align-items:center;gap:7px;
  border:var(--rule-w) solid var(--rule);background:none;color:var(--fg-2);
  padding:7px 12px;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:.2s}
.share-row a:hover,.share-row button:hover{background:var(--fg);color:var(--bg);
  border-color:var(--fg)}
.share-row svg{width:15px;height:15px;flex:none}
.share-row button.ok{border-color:#2E7D5B;color:#2E7D5B}
#shareNative{display:none}

/* картка відеоверсії */
.art-video{display:flex;align-items:center;gap:14px;border:var(--rule-w) solid var(--rule);
  padding:14px 16px;margin:1.6em 0;transition:.2s;max-width:var(--measure)}
.art-video:hover{border-color:var(--brass)}
.art-video svg{color:var(--brass);flex:none}
.av-l{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3)}
.av-n{display:block;font-family:var(--disp);font-weight:700;font-size:16px;margin-top:3px}

/* плеєр відеоверсії в тексті — обкладинка, iframe стає на її місце по кліку */
.art-embed{margin:1.9em 0;max-width:var(--measure)}
.art-embed .ytlite{display:block;position:relative;width:100%;padding:0;border:0;
  background:none;cursor:pointer;line-height:0;overflow:hidden}
.art-embed img,.art-embed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;
  border:var(--rule-w) solid var(--rule)}
.art-embed .ytlite:hover img{border-color:var(--brass)}
.art-embed img{transition:.25s;filter:grayscale(.35) contrast(1.03)}
.art-embed .ytlite:hover img{filter:none}
.ytlite__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;width:74px;height:52px;
  background:var(--bg);border:var(--rule-w) solid var(--brass);transition:.2s}
.ytlite__play svg{width:30px;height:30px;color:var(--brass)}
.art-embed .ytlite:hover .ytlite__play{background:var(--brass)}
.art-embed .ytlite:hover .ytlite__play svg{color:var(--bg)}
.art-embed .ytlite:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.art-embed figcaption{padding:11px 2px 0}
.art-embed figcaption .av-n{font-size:15px}

/* CTA на курс усередині статті */
.art-cta{display:block;border:var(--rule-w) solid var(--brass);padding:20px 22px;
  margin:1.8em 0;transition:.2s;max-width:var(--measure)}
.art-cta:hover{background:var(--bg-2)}
.art-cta h3{font-family:var(--disp);font-weight:700;font-size:22px;margin:8px 0 6px}
.art-cta p{font-size:14.5px;color:var(--fg-2);margin:0}
.art-cta-go{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}

/* хаб курсів: рядки-леджер */
.lrow{display:grid;grid-template-columns:56px 1fr 220px;gap:18px;align-items:baseline;
  padding:18px 10px 18px 0;border-bottom:var(--rule-w) solid var(--rule-2);transition:.2s}
.lrow:hover{background:var(--bg-2)}
.lrow .c-i{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--brass)}
.lrow h3{font-family:var(--disp);font-weight:700;font-size:22px;margin:0}
.lrow:hover h3{color:var(--brass)}
.lrow p{font-size:14px;color:var(--fg-2);margin:4px 0 0;grid-column:2}
.lrow .c-dur{grid-column:3;grid-row:1;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);text-align:right}
@media (max-width:720px){
  .lrow{grid-template-columns:40px 1fr}
  .lrow .c-dur{grid-column:2;grid-row:auto;text-align:left;margin-top:6px}
}

/* сторінка курсу */
.course-grid{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
.course-aside{position:sticky;top:66px}
@media (max-width:960px){
  .course-grid{grid-template-columns:1fr}
  .course-aside{position:static}
}
.pro-facts{list-style:none;margin:0;padding:0}
.pro-facts li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px dotted var(--rule);font-family:var(--sans);font-size:13px}
.pro-facts .k{color:var(--fg-3)}
.pro-facts .v{text-align:right;font-weight:500}
.price-box{margin-top:18px;padding-top:16px;border-top:var(--rule-w) solid var(--fg)}
.price-box .note{display:block;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.price-box .now{font-family:var(--disp);font-weight:800;font-size:32px}
.price-box .was{font-family:var(--disp);font-size:18px;color:var(--fg-3);
  text-decoration:line-through;margin-left:12px}
.price-box .btn{margin-top:14px;display:block;text-align:center}
.pb-note{font-size:13px;color:var(--fg-2);margin:8px 0 0}

/* пов'язані курси */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:var(--rule-w) solid var(--rule);margin-top:14px}
.rel-card{padding:18px 20px;border-right:var(--rule-w) solid var(--rule-2);
  border-bottom:var(--rule-w) solid var(--rule-2);transition:.2s}
.rel-card:last-child{border-right:0}
.rel-card:hover{background:var(--bg-2)}
.rel-card .rc-n{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--brass)}
.rel-card h4{font-family:var(--disp);font-weight:700;font-size:17px;margin:7px 0 5px;line-height:1.15}
.rel-card:hover h4{color:var(--brass)}
.rel-card .rc-d{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
@media (max-width:720px){.rel-grid{grid-template-columns:1fr}.rel-card{border-right:0}}

/* нумеровані модулі програми курсу */
.mods{margin:0;padding-left:1.4em;font-size:15.5px}
.mods li{margin-bottom:.6em;padding-left:.3em}
.mods li::marker{font-family:var(--disp);font-weight:700;color:var(--brass)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  body::after,.strip,.mnav,.artside,.progress,.slab,.share-row{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .artbody{grid-template-columns:1fr}
}