/* ═══ ARTICLE STYLES — composes with sub.css tokens ═══
   Shared by every long-read under /<slug>/ and /lt/<slug>/. Load AFTER sub.css.
   Page-specific overrides (e.g. a colour-graded hero clip that must cancel the
   shared video filter) stay in the page's own <style>. */

.art{ max-width:768px; margin-inline:auto; }
.art p{ font-size:17px; line-height:1.6; letter-spacing:-0.005em; color:var(--ink); margin-top:1.15em; }
.art p.lede{ font-size:19px; line-height:1.55; }
.art a{ text-decoration:underline; text-decoration-color:var(--ash); text-underline-offset:3px; }
.art a:hover{ text-decoration-color:var(--carbon); }
.art h3{ font-size:19px; font-weight:600; letter-spacing:-0.015em; margin-top:2.2em; }
.art strong{ font-weight:600; }
.art .sech{ margin-top:clamp(56px,7vw,88px); }
.art .sech .kicker{ display:block; margin-bottom:14px; }
.art .sech h2{ max-width:22ch; }
.art .sech + p{ margin-top:26px; }
.art ul.plain{ margin-top:1.15em; padding-left:1.2em; font-size:17px; line-height:1.6; color:var(--ink); }
.art ul.plain li{ margin-top:.45em; }
.art ul.plain li::marker{ color:var(--smoke); }

.hl-volt{ background:linear-gradient(transparent 55%, var(--volt) 55%, var(--volt) 96%, transparent 96%); padding:0 2px; }

sup.ref{ font-family:var(--mono); font-size:.62em; letter-spacing:0; line-height:0; }
sup.ref a{ text-decoration:none; color:var(--slate); background:var(--mist); border:1px solid var(--ash); border-radius:4px; padding:1px 4px; }
sup.ref a:hover{ background:var(--volt); color:var(--carbon); border-color:var(--carbon); }

/* hero extras */
.art-hero .crumbs{ margin-bottom:26px; }
.art-byline{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink2);
}
.art-byline b{ color:var(--carbon); font-weight:500; }
.art-byline a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--ash); }
.art-byline a:hover{ border-color:var(--carbon); }
.art-terms{
  margin-top:34px; font-family:var(--mono); font-size:clamp(11px,1.4vw,13px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink2); line-height:2.2;
}
.art-terms b{ position:relative; font-weight:500; color:var(--slate); white-space:nowrap; }
.art-terms b::after{ content:""; position:absolute; left:-1px; right:-1px; top:54%; height:1.5px; background:var(--slate); opacity:.7; }
.art-terms .keep{ background:var(--volt); color:var(--carbon); padding:2px 8px; border-radius:5px; font-weight:500; white-space:nowrap; }

/* TL;DR — graphite receipt, mirrors .keyspec */
.tldr{ background:var(--graphite); color:var(--paper); border-radius:var(--r-card-lg); padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,42px); margin-top:clamp(40px,5vw,56px); }
.tldr h2{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke-d); }
.tldr ul{ list-style:none; margin-top:18px; display:grid; gap:12px; }
.tldr li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.85); }
.tldr li::before{ content:""; position:absolute; left:0; top:.42em; width:11px; height:11px; background:var(--volt); border-radius:3px; }
.tldr li em{ font-style:italic; color:var(--paper); }

/* TOC */
.toc{ margin-top:clamp(32px,4vw,44px); border:1px solid var(--ash); border-radius:var(--r-card); overflow:hidden; }
.toc ol{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1px; background:var(--ash); }
.toc li{ background:var(--paper); }
.toc a{ display:flex; gap:14px; align-items:baseline; padding:14px 20px; text-decoration:none; font-size:15px; font-weight:500; letter-spacing:-0.01em; }
.toc a:hover{ background:var(--mist); }

/* definition callout — the featured-snippet / AI-answer target */
.defbox{
  background:var(--mist); border-left:4px solid var(--carbon); border-radius:0 16px 16px 0;
  padding:20px 24px; margin-top:1.6em; font-size:17px; line-height:1.55;
}

/* pull quote — voltage card */
.pull{ margin-top:2em; padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px); background:var(--volt); border:1.5px solid var(--carbon); border-radius:var(--r-card); }
.pull p{ margin:0; font-size:clamp(21px,2.6vw,27px); line-height:1.25; font-weight:600; letter-spacing:-0.02em; text-wrap:balance; color:var(--carbon); }
.pull cite{ display:block; margin-top:14px; font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--carbon); }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; margin-top:2em; }
.stat{ background:var(--mist); border-radius:18px; padding:20px 22px; }
.stat .n{ font-family:var(--mono); font-size:clamp(26px,3vw,34px); font-weight:500; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.stat .n em{ font-style:normal; background:var(--volt); padding:0 7px; border-radius:7px; }
.stat .d{ font-size:13.5px; color:var(--slate); line-height:1.5; margin-top:8px; }
.stat .s{ font-family:var(--mono); font-size:10.5px; color:var(--smoke); margin-top:10px; letter-spacing:.05em; text-transform:uppercase; }

/* glossary */
.gloss{ border:1px solid var(--ash); border-radius:var(--r-card); overflow:hidden; margin-top:2em; }
.gloss .row{ display:grid; grid-template-columns:minmax(150px,225px) 1fr; border-top:1px solid var(--ash); }
.gloss .row:first-child{ border-top:0; }
.gloss .row>div{ padding:16px 20px; }
.gloss .term{ font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; background:var(--mist); display:flex; flex-direction:column; gap:6px; }
.gloss .term small{ font-weight:400; color:var(--smoke); font-size:10.5px; letter-spacing:.05em; text-transform:none; }
.gloss .def-c{ font-size:15px; line-height:1.55; color:var(--slate); }
.gloss .def-c b{ color:var(--carbon); font-weight:600; }
@media (max-width:560px){ .gloss .row{ grid-template-columns:1fr; } .gloss .term{ flex-direction:row; justify-content:space-between; align-items:baseline; } }

/* comparison table — for "X vs Y" and "cost of" articles */
.cmp{ margin-top:2em; border:1px solid var(--ash); border-radius:var(--r-card); overflow-x:auto; }
.cmp table{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.5; }
.cmp th, .cmp td{ text-align:left; vertical-align:top; padding:13px 16px; border-top:1px solid var(--ash); }
.cmp thead th{ border-top:0; background:var(--mist); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.cmp tbody th{ font-weight:600; color:var(--carbon); white-space:nowrap; }
.cmp td{ color:var(--slate); }
.cmp td b{ color:var(--carbon); font-weight:600; }

/* figures */
figure.fig{ margin:2.2em calc(-1 * clamp(0px,3vw,56px)) 0; background:var(--mist); border-radius:var(--r-card); padding:clamp(18px,3vw,32px); }
@media (max-width:860px){ figure.fig{ margin-left:0; margin-right:0; } }
figure.fig .fig-label{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
figure.fig .fig-label::before{ content:""; width:10px; height:10px; background:var(--volt); border:1.5px solid var(--carbon); border-radius:2px; flex:none; }
figure.fig .svg-scroll{ overflow-x:auto; }
figure.fig svg{ display:block; max-width:100%; height:auto; margin:0 auto; color:var(--carbon); }
figure.fig img{ display:block; max-width:100%; height:auto; margin:0 auto; border-radius:12px; }
figure.fig figcaption{ margin-top:16px; font-size:13px; line-height:1.55; color:var(--slate); border-top:1px solid var(--ash); padding-top:13px; max-width:72ch; }

.f-box{ fill:var(--paper); stroke:currentColor; stroke-width:1.5; }
.f-panel{ fill:var(--canvas); stroke:currentColor; stroke-width:1; }
.f-volt{ fill:var(--volt); stroke:var(--carbon); stroke-width:1.5; }
.f-mint{ fill:var(--mint); stroke:currentColor; stroke-width:1.5; }
.f-line{ stroke:currentColor; stroke-width:1.5; fill:none; }
.f-dash{ stroke:currentColor; stroke-width:1.5; fill:none; stroke-dasharray:5 5; }
.f-dash-thin{ stroke:var(--smoke); stroke-width:1.2; fill:none; stroke-dasharray:4 5; }
.f-txt{ fill:currentColor; font-family:var(--mono); font-size:12px; }
.f-txt-b{ fill:currentColor; font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.04em; }
.f-txt-s{ fill:var(--slate); font-family:var(--mono); font-size:10.5px; }
.f-txt-f{ fill:var(--ink2); font-family:var(--mono); font-size:10.5px; }
.f-on-volt{ fill:var(--carbon); }
.f-chip-onvolt{ fill:none; stroke:var(--carbon); stroke-width:1.5; }

/* playbook steps */
.steps{ list-style:none; margin-top:2em; display:grid; gap:12px; }
.steps>li{ background:var(--mist); border-radius:18px; padding:20px 22px; }
.steps>li b.t{ display:block; font-size:16.5px; font-weight:600; letter-spacing:-0.01em; margin-bottom:4px; }
.steps>li p{ margin:0; font-size:14.5px; color:var(--slate); line-height:1.55; }

/* related reading — the internal-linking block every article carries */
.related{ margin-top:clamp(56px,7vw,88px); }
.related .kicker{ display:block; margin-bottom:14px; }
.related ul{ list-style:none; margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; }
.related li a{ display:block; height:100%; background:var(--mist); border-radius:18px; padding:18px 20px; text-decoration:none; transition:background .2s ease; }
.related li a:hover{ background:var(--volt); }
.related li a b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-0.01em; color:var(--carbon); }
.related li a span{ display:block; margin-top:6px; font-size:13.5px; color:var(--slate); line-height:1.5; }
.related li a small{ display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); }

/* author box — the E-E-A-T footer of every article */
.authorbox{ margin-top:clamp(48px,6vw,72px); display:grid; grid-template-columns:auto 1fr; gap:18px 22px; align-items:start; background:var(--mist); border-radius:var(--r-card); padding:clamp(20px,3vw,28px); }
.authorbox img{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--ash); }
.authorbox b{ display:block; font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.authorbox .role{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); margin-top:4px; }
.authorbox p{ margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--slate); }
.authorbox p a{ color:var(--carbon); }
@media (max-width:520px){ .authorbox{ grid-template-columns:1fr; } }

/* faq inside paper slab: canvas cards */
.art .faq details{ background:var(--mist); }

/* references */
.refs ol{ list-style:none; counter-reset:rf; margin-top:26px; }
.refs li{ counter-increment:rf; padding:12px 4px 12px 52px; position:relative; border-top:1px solid var(--ash); font-size:13.5px; line-height:1.55; color:var(--slate); }
.refs li::before{ content:"[" counter(rf) "]"; position:absolute; left:0; top:12px; font-family:var(--mono); font-size:12px; color:var(--carbon); font-weight:500; }
.refs li b{ color:var(--carbon); font-weight:600; }
.refs li a{ word-break:break-all; font-family:var(--mono); font-size:11.5px; color:var(--ink2); }
.refs li a:hover{ color:var(--carbon); }

/* ═══ HUB (/insights/, /lt/izvalgos/) + AUTHOR PAGES ═══ */
.hub{ max-width:1080px; margin-inline:auto; }
.hub-sec + .hub-sec{ margin-top:clamp(72px,9vw,120px); }
.hub-sec > .kicker{ display:block; margin-bottom:14px; }
.hub-sec > .lead{ margin-top:16px; color:var(--slate); }
.hub-list{ list-style:none; margin-top:clamp(28px,3.4vw,40px); display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:14px; }
.hub-list li a{ display:flex; flex-direction:column; height:100%; background:var(--mist); border-radius:var(--r-card); padding:clamp(22px,2.6vw,30px); text-decoration:none; transition:background .2s ease; }
.hub-list li a:hover{ background:var(--volt); }
.hub-list .meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.hub-list .meta b{ font-weight:500; color:var(--carbon); }
.hub-list .t{ display:block; margin-top:16px; font-size:clamp(19px,2vw,23px); font-weight:600; letter-spacing:-0.02em; line-height:1.2; color:var(--carbon); text-wrap:balance; }
.hub-list .d{ display:block; margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--slate); }
.hub-list .go{ margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon); }
.topics{ margin-top:clamp(28px,3.4vw,40px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1px; background:var(--ash); border:1px solid var(--ash); border-radius:var(--r-card); overflow:hidden; }
.topics > div{ background:var(--paper); padding:22px 24px 24px; }
.topics h3{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.topics ul{ list-style:none; margin-top:14px; display:grid; gap:10px; }
.topics a{ font-size:15px; font-weight:500; letter-spacing:-0.01em; line-height:1.35; text-decoration:underline; text-decoration-color:var(--ash); text-underline-offset:3px; }
.topics a:hover{ text-decoration-color:var(--carbon); }
.topics small{ display:block; margin-top:3px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); }
.hub-note{ max-width:68ch; }
.hub-note p{ margin-top:1em; font-size:16px; line-height:1.6; color:var(--slate); }
.hub-note p:first-of-type{ margin-top:18px; }
.authorbox--lg img{ width:88px; height:88px; }
.authorbox--lg b{ font-size:18px; }
.person-facts{ margin-top:clamp(28px,3.4vw,40px); }