/* ============================================================
   Статьи — стили для длинных материалов
   Наследует токены из site.css
   ============================================================ */
.art-banner{margin:0 0 4px;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.art-banner img{width:100%;display:block;}

/* top-3 pick */
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
.t3{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.t3.first{background:var(--ink);color:#fff;border-color:var(--ink);}
.t3-rank{display:inline-flex;align-items:center;gap:8px;font-family:'Unbounded',sans-serif;font-weight:600;font-size:13px;color:var(--red);margin-bottom:14px;}
.t3-medal{width:30px;height:30px;border-radius:9px;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;flex:0 0 auto;}
.t3.first .t3-medal{background:var(--red);color:#fff;}
.t3.first .t3-rank{color:#fff;}
.t3 h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.t3 p{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:0;}
.t3.first p{color:rgba(255,255,255,.8);}
.t3 .t3-tag{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;color:var(--muted);}
.t3.first .t3-tag{color:rgba(255,255,255,.6);}
@media(max-width:760px){.top3{grid-template-columns:1fr;}}

/* prompt examples */
.prompt-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
.prompt-card{border-radius:16px;padding:24px;border:1px solid var(--line);}
.prompt-card.bad{background:var(--red-tint);border-color:#F1D2CD;}
.prompt-card.good{background:#E9F6F0;border-color:#CDE9DE;}
.prompt-card .plbl{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:14px;letter-spacing:.01em;text-transform:uppercase;}
.prompt-card.bad .plbl{color:#C8392F;}
.prompt-card.good .plbl{color:#1A7F5A;}
.prompt-card .plbl svg{width:18px;height:18px;flex:0 0 auto;}
.prompt-quote{font-size:15.5px;line-height:1.6;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-style:italic;}
.prompt-card .pwhy{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.prompt-card .pwhy li{position:relative;padding-left:20px;font-size:14px;line-height:1.45;color:var(--ink-soft);}
.prompt-card .pwhy li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;}
.prompt-card.bad .pwhy li::before{background:#D9534F;}
.prompt-card.good .pwhy li::before{background:#1A9E6F;}
@media(max-width:760px){.prompt-pair{grid-template-columns:1fr;}}

.art-hero{background:var(--card);border-bottom:1px solid var(--line);padding:64px 0 56px;}
.art-hero .back{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:14.5px;margin-bottom:26px;}
.art-hero .back:hover{color:var(--red);}
.art-hero .back svg{width:16px;height:16px;}
.art-hero h1{font-weight:800;font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-.03em;max-width:900px;margin-top:16px;}
.art-hero h1 em{font-style:normal;color:var(--red);}
.art-hero .dek{color:var(--ink-soft);font-size:clamp(17px,2vw,20px);max-width:720px;margin-top:20px;line-height:1.55;}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:28px;font-size:14.5px;color:var(--muted);}
.art-meta .who{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;}
.art-meta .who .av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#E9E2DA;flex:0 0 auto;}
.art-meta .who .av img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.art-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--line);}

/* reading column */
.art-wrap{max-width:840px;margin:0 auto;padding:0 28px;}
.art-sec{padding:48px 0;border-top:1px solid var(--line-soft);}
.art-sec:first-child{border-top:none;}
.art-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--red);text-transform:uppercase;margin-bottom:14px;}
.art-kicker::before{content:"";width:24px;height:2px;background:var(--red);border-radius:2px;}
.art-h2{font-weight:800;font-size:clamp(25px,3vw,33px);line-height:1.12;letter-spacing:-.025em;margin-bottom:20px;}
.art-h2 em{font-style:normal;color:var(--red);}
.art-p{color:var(--ink-soft);font-size:17.5px;line-height:1.72;margin-bottom:18px;}
.art-p strong{color:var(--ink);font-weight:600;}

/* pull quote */
.pull{margin:8px 0 4px;background:var(--warm);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 14px 14px 0;padding:26px 30px;}
.pull p{font-size:19px;line-height:1.55;font-style:italic;color:var(--ink);margin:0;}

/* numbered process steps */
.psteps{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.pstep{display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.pstep .pn{width:46px;height:46px;border-radius:13px;background:var(--red);color:#fff;font-family:'Unbounded',sans-serif;font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;}
.pstep h4{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;}
.pstep .pk{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.pstep p{font-size:15.5px;color:var(--ink-soft);line-height:1.55;margin:0;}

/* two-column (good / careful) */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
.tcol{border-radius:16px;padding:26px;border:1px solid var(--line);}
.tcol.good{background:#E9F6F0;border-color:#CDE9DE;}
.tcol.care{background:#FBF1E2;border-color:#F0E0C4;}
.tcol h4{font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.tcol.good h4{color:#1A7F5A;}
.tcol.care h4{color:#B07516;}
.tcol h4 svg{width:18px;height:18px;flex:0 0 auto;}
.tcol ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.tcol li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-soft);}
.tcol li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;}
.tcol.good li::before{background:#1A9E6F;}
.tcol.care li::before{background:#D9920C;}

/* method note */
.method{background:var(--ink);color:#fff;border-radius:16px;padding:26px 28px;margin-top:8px;}
.method h4{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.method h4 svg{width:18px;height:18px;color:var(--red);}
.method p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);margin-bottom:10px;}
.method p:last-child{margin-bottom:0;}
.method b{color:#fff;font-weight:600;}

/* comparison table */
.cmp-scroll{margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;}
table.cmp{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px;}
table.cmp th,table.cmp td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);}
table.cmp thead th{background:var(--ink);color:#fff;font-weight:600;font-size:13px;position:sticky;top:0;}
table.cmp tbody th{background:var(--warm);font-weight:600;color:var(--ink);white-space:nowrap;}
table.cmp td{color:var(--ink-soft);}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none;}
table.cmp th:last-child,table.cmp td:last-child{border-right:none;}
table.cmp td.v-yes{color:#1A8F62;font-weight:600;}
table.cmp td.v-mid{color:#B07516;font-weight:600;}
table.cmp td.v-no{color:#C8392F;font-weight:600;}
.v-yes{color:#1A8F62;}.v-mid{color:#B07516;}.v-no{color:#C8392F;}
.cmp-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13.5px;color:var(--muted);}
.cmp-legend span{display:inline-flex;align-items:center;gap:6px;}

/* tool cards */
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 28px 8px;margin-top:18px;box-shadow:var(--shadow);}
.tool-card.bonus{background:var(--warm);border-color:var(--red);border-width:1.5px;}
.tc-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;}
.tc-num{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;font-family:'Unbounded',sans-serif;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;}
.tool-card.bonus .tc-num{background:var(--red);}
.tc-id{flex:1;min-width:0;}
.tc-id h3{font-size:21px;font-weight:700;letter-spacing:-.015em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.tc-id a.url{font-size:13.5px;font-weight:500;color:var(--red);text-decoration:none;}
.tc-id a.url:hover{text-decoration:underline;}
.tc-id .tag{font-size:14.5px;color:var(--ink-soft);line-height:1.45;margin-top:6px;}
.tc-sections{display:grid;grid-template-columns:1fr 1fr;gap:2px 32px;}
.tc-block{padding:16px 0;border-bottom:1px solid var(--line-soft);}
.tc-block .bl{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:10px;}
.tc-block.span2{grid-column:1 / -1;}
.tc-block ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.tc-block li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.tc-block li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--muted);}
.tc-shot{margin:2px 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--warm-2);}
.tc-shot img{width:100%;display:block;}
.tc-shot figcaption{font-size:12.5px;color:var(--muted);padding:8px 14px;background:var(--card);border-top:1px solid var(--line-soft);}
.tc-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 16px;}
.tc-shots.one{grid-template-columns:1fr;max-width:560px;}
.tc-shots figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--warm-2);display:flex;flex-direction:column;}
.tc-shots img{width:100%;display:block;}
.tc-shots figcaption{font-size:12px;color:var(--muted);padding:7px 12px;background:var(--card);border-top:1px solid var(--line-soft);margin-top:auto;}
@media(max-width:640px){.tc-shots{grid-template-columns:1fr;}}

/* pick-by-task table */
.pick{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.pick-row{display:grid;grid-template-columns:1fr 150px 1.2fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 20px;}
.pick-row .task{font-weight:600;color:var(--ink);font-size:15.5px;}
.pick-row .best{font-weight:700;color:var(--red);font-size:15.5px;}
.pick-row .why{font-size:14.5px;color:var(--ink-soft);line-height:1.45;}

/* takeaways */
.takeaways{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.takeaways li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;color:var(--ink-soft);}
.takeaways li strong{color:var(--ink);font-weight:700;}
.takeaways li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;background:var(--red-tint);}
.takeaways li::after{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--red);}

/* design tools */
.dtools{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.dtool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.dtool .dt-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.dtool .dt-n{font-family:'Unbounded',sans-serif;font-weight:600;font-size:14px;color:var(--red);}
.dtool h4{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.dtool a.url{font-size:13px;font-weight:500;color:var(--red);text-decoration:none;}
.dtool a.url:hover{text-decoration:underline;}
.dtool ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.dtool li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.dtool li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--muted);}
.dsub{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:26px 0 4px;}

/* flow table */
.flow{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.flow-row{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;background:var(--warm);border:1px solid var(--line);border-radius:13px;padding:16px 18px;}
.flow-row .fn{width:42px;height:42px;border-radius:12px;color:#fff;font-family:'Unbounded',sans-serif;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;}
.flow-row .ftool{font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:3px;}
.flow-row .fact{font-size:14.5px;color:var(--ink-soft);line-height:1.45;}
.flow-row .fwhy{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:4px;}

/* article list cards */
.alist{display:flex;flex-direction:column;gap:18px;}
.acard{display:grid;grid-template-columns:1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:.18s;}
.acard:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px);}
.acard .ac-body{padding:30px 32px;}
.acard .ac-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.acard .ac-tag{font-size:12.5px;font-weight:600;color:var(--red);background:var(--red-tint);border-radius:999px;padding:5px 12px;}
.acard h2{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px;}
.acard p{color:var(--ink-soft);font-size:16px;line-height:1.55;margin-bottom:16px;}
.acard .ac-meta{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--muted);}
.acard .ac-more{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:600;font-size:15px;margin-top:4px;}
.acard .ac-more svg{width:15px;height:15px;}
.alist-empty{color:var(--muted);font-size:15px;font-style:italic;margin-top:18px;}

@media(max-width:760px){
  .twocol{grid-template-columns:1fr;}
  .tc-sections{grid-template-columns:1fr;}
  .pick-row{grid-template-columns:1fr;gap:6px;}
  .pick-row .best{font-size:16px;}
  .art-sec{padding:38px 0;}
}