/* ===== single article (Пояснення / Гайд) ===== */
.progress{ position:fixed; top:0; left:0; height:3px; background:var(--gold-500); width:0; z-index:60; transition:width .1s; }
.sc-page { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.crumbs { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-3); padding:22px 0 6px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--brand-700); } .crumbs .sep{ opacity:.5; }
.art-head{ padding:14px 0 30px; max-width:780px; }
.art-head .tags{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.art-head h1{ font-size:clamp(32px,4.8vw,52px); letter-spacing:-.03em; }
.art-head .lead{ font-size:21px; color:var(--ink-2); margin-top:18px; line-height:1.5; }
.art-hero-illus{ height:300px; border-radius:var(--r-lg); overflow:hidden; margin:8px 0 14px; box-shadow:var(--sh-sm); border:1px solid var(--line-2); }
.art-hero-illus svg, .art-hero-illus img{ width:100%; height:100%; display:block; object-fit:cover; }
.byline{ display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); }
.mini-av{ width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,var(--brand-500),var(--brand-700));display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;flex:none; }
.byline b{ color:var(--ink); font-weight:600; display:block; } .byline .role{ font-size:13px; }
.byline .sep{ opacity:.4; }

.art-layout{ display:grid; grid-template-columns: 1fr 240px; gap:48px; align-items:start; }
.toc{ position:sticky; top:96px; font-size:14px; }
.toc h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:14px; }
.toc a{ display:block; padding:7px 0 7px 14px; border-left:2px solid var(--line); color:var(--ink-2); transition:all .15s; }
.toc a:hover, .toc a.active{ border-color:var(--brand-500); color:var(--brand-700); }

.prose{ max-width:720px; font-size:18px; }
.prose h2{ font-size:clamp(25px,3vw,32px); margin:46px 0 16px; letter-spacing:-.02em; scroll-margin-top:96px; }
.prose h3{ font-size:21px; margin:30px 0 10px; }
.prose p{ color:#2c3a32; margin:0 0 18px; }
.prose b, .prose strong{ color:var(--ink); }
.prose a{ color:var(--brand-700); border-bottom:1px solid var(--brand-100); font-weight:600; }
.prose a.inl{ color:var(--brand-700); border-bottom:1px solid var(--brand-100); font-weight:600; }
.prose ul, .prose ol{ color:#2c3a32; margin:0 0 18px; padding-left:24px; display:grid; gap:9px; }
.prose img{ border-radius:var(--r); margin:18px 0; }
.prose table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:16px; }
.prose table th, .prose table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-2); }
.prose table thead th{ background:var(--surface-2); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }

.tldr{ background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--r-lg); padding:26px 28px; margin:8px 0 30px; }
.tldr h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-700); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.tldr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.tldr li{ position:relative; padding-left:30px; font-size:16px; color:#243029; }
.tldr li::before{ content:""; position:absolute; left:2px; top:7px; width:14px; height:14px; border-radius:50%; background:var(--brand-500); box-shadow:0 0 0 4px var(--brand-100); }

.analogy{ background:var(--gold-50); border:1px solid var(--gold-100); border-radius:var(--r); padding:22px 26px; margin:22px 0; display:flex; gap:18px; }
.analogy .em{ font-size:30px; line-height:1; flex:none; }
.analogy b{ color:var(--gold-600); }

.example-box{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:6px 26px; margin:22px 0; }
.ex-row{ display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px dashed var(--line); font-size:16px; color:var(--ink-2); }
.ex-row:last-child{ border-bottom:none; } .ex-row b{ color:var(--ink); }
.ex-row.hl{ background:var(--brand-50); margin:0 -26px; padding:16px 26px; }
.ex-row.hl b{ color:var(--brand-700); font-size:18px; }

/* mini calc (dark) */
.mini-calc{ background:var(--brand-900); color:#fff; border-radius:var(--r-lg); padding:28px; margin:26px 0; }
.mini-calc h4{ font-size:18px; margin-bottom:6px; }
.mini-calc .mc-sub{ font-size:13.5px; color:#9EC4B1; margin-bottom:20px; }
.mc-fields{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.mc-fields label{ font-size:12.5px; color:#9EC4B1; display:block; margin-bottom:7px; }
.mc-fields .mcf input{ width:100%; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:var(--r-sm); padding:11px 13px; color:#fff; font-family:var(--font); font-size:16px; font-weight:600; outline:none; -moz-appearance:textfield; }
.mc-fields .mcf input:focus{ border-color:var(--brand-500); }
.mc-fields .mcf input::-webkit-outer-spin-button,.mc-fields .mcf input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mc-result{ margin-top:22px; display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); padding-top:20px; flex-wrap:wrap; gap:10px; }
.mc-result .lbl{ font-size:14px; color:#9EC4B1; max-width:280px; }
.mc-result .v{ font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; }
.mc-result .v small{ font-size:14px; color:#9EC4B1; font-weight:600; }

.faq{ border-top:1px solid var(--line); margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; gap:20px; font-size:18px; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ic{ width:26px;height:26px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;flex:none; transition:transform .2s; }
.faq details[open] summary .ic{ transform:rotate(45deg); }
.faq .ans{ padding:0 0 22px; color:var(--ink-2); font-size:16.5px; max-width:680px; }

.author-box{ display:flex; gap:18px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); margin:40px 0 24px; }
.author-box .av{ width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,var(--brand-500),var(--brand-700));display:grid;place-items:center;color:#fff;font-size:21px;font-weight:700;flex:none;font-family:var(--display); }
.author-box b{ font-size:17px; } .author-box .role{ font-size:14px; color:var(--brand-700); font-weight:600; margin:2px 0 8px; }
.author-box p{ font-size:14.5px; color:var(--ink-2); }
.disc-box{ display:flex; gap:16px; background:var(--gold-50); border:1px solid var(--gold-100); border-radius:var(--r); padding:20px 22px; margin:24px 0 16px; }
.disc-box svg{ width:24px;height:24px;color:var(--gold-600);flex:none; }
.disc-box b{ display:block; margin-bottom:4px; } .disc-box p{ font-size:14px; color:var(--ink-2); }
.sources{ font-size:14px; color:var(--ink-3); } .sources a{ color:var(--brand-700); font-weight:600; }

.related{ background:var(--surface-2); margin-top:64px; padding:56px 0; }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.rel-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; transition:transform .15s,box-shadow .2s; display:flex; flex-direction:column; }
.rel-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.rel-thumb{ height:120px; display:grid; place-items:center; overflow:hidden; background:var(--brand-50); }
.rel-thumb svg, .rel-thumb img{ width:100%; height:100%; display:block; object-fit:cover; }
.rel-body{ padding:18px; } .rel-body span{ font-size:12px; } .rel-body h3{ font-size:16.5px; margin-top:8px; line-height:1.3; }

@media (max-width:920px){ .art-layout{ grid-template-columns:1fr; } .toc{ display:none; } .rel-grid{ grid-template-columns:1fr; } .mc-fields{ grid-template-columns:1fr; } }