/* Knowledge: список статей и статья. Поверх style.css и pages.css */

/* список */
.kn__group { margin: clamp(40px, 6svh, 64px) 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 300; letter-spacing: -.02em; }
.kn__list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.kn__list li { border-bottom: 1px solid var(--rule); }
.kn__card { display: grid; gap: 6px; padding: 20px 0; color: inherit; text-decoration: none; }
.kn__title { font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.kn__card:hover .kn__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kn__desc { max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.kn__meta { font-size: 13px; color: var(--ink-3); }

/* статья */
.art__h1 { margin: 0; max-width: 20ch; font-size: clamp(34px, 4.2vw, 60px); font-weight: 200; line-height: 1.06; letter-spacing: -.035em; }
.art__meta { margin: 18px 0 0; font-size: 13px; color: var(--ink-3); }
.art a:not(.kn__card) { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art a:not(.kn__card):hover { text-decoration-color: currentColor; }
.art .crumbs a { text-decoration: none; }

.art__qa { margin: clamp(28px, 4svh, 40px) 0 0; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius); background: var(--paper); }
.art__qa p { margin: 10px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.6; }
.art__qa .art__qa-k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.art__qa .art__qa-q { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.35; }

.art__body { margin-top: clamp(16px, 2svh, 24px); font-size: 17px; line-height: 1.7; }
.art__body h2 { margin: clamp(40px, 6svh, 56px) 0 0; max-width: 28ch; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
.art__body p { margin: 16px 0 0; max-width: 68ch; }
.art__body ul, .art__body ol { margin: 16px 0 0; padding: 0; max-width: 68ch; list-style: none; }
.art__body li { position: relative; margin-top: 10px; }
.art__body .dash li { padding-left: 24px; }
.art__body .dash li::before { content: ""; position: absolute; left: 0; top: .85em; width: 12px; height: 1px; background: currentColor; opacity: .5; }
.art__body .notfor { padding: clamp(18px, 2vw, 24px); border: 1px solid var(--rule); border-radius: 16px; }
.art__body .notfor li:first-child { margin-top: 0; }
.art__body .steps { counter-reset: st; }
.art__body .steps li { counter-increment: st; padding-left: 40px; }
.art__body .steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ink-3); }
.art__body .pull { margin: clamp(28px, 4svh, 40px) 0 0; padding-left: 20px; border-left: 2px solid var(--red); font-size: clamp(20px, 1.8vw, 25px); font-weight: 300; line-height: 1.35; letter-spacing: -.01em; }
.art__body .callout { margin: clamp(24px, 3.5svh, 36px) 0 0; padding: clamp(18px, 2vw, 26px); border-radius: 16px; background: var(--paper); }
.art__body .callout p { margin: 10px 0 0; }
.art__body .callout .callout__k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* таблицы: на телефоне листаются вбок внутри своей рамки, страница не едет */
.tbl-wrap { margin: clamp(24px, 3.5svh, 36px) 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tbl caption { padding-bottom: 10px; text-align: left; font-size: 13px; color: var(--ink-3); }
.tbl th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ink); text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); vertical-align: bottom; }
.tbl td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td:first-child { color: var(--ink-2); }
.tbl tr.is-hit td { font-weight: 500; color: var(--ink); }

.art .faq { margin-top: 20px; }
.art__disclaimer { margin: clamp(32px, 5svh, 48px) 0 0; max-width: 68ch; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.art__more { margin-top: clamp(40px, 6svh, 64px); }
.art__all { margin: 18px 0 0; font-size: 15px; }

@media (max-width: 600px) {
  .art__body { font-size: 16px; }
}