/* Category page — все, що не у chrome.css.
 * Витяг із redesign/category.html:197-942 з мінімальними правками
 * (cat-tag перенесено локально, щоб не конфліктувати з .card .thumb .cat).
 */

/* ============== CRUMBS — більше за article (з лівим стрипом) ============== */
.cat-page .crumbs{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin: 24px 0 14px;
}
.cat-page .crumbs a{ font-weight: 600; color: var(--muted); }
.cat-page .crumbs a:hover{ color: var(--ink); }
.cat-page .crumbs .sep{ color: var(--muted-2); }
.cat-page .crumbs b{ color: var(--ink); font-weight: 700; }

/* ============== CATEGORY HERO (compact) ============== */
.cat-hero-c{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
  flex-wrap: wrap;
}
.cat-hero-c .left{ flex: 1 1 auto; min-width: 0; }
.cat-hero-c h1{
  font-family: 'Unbounded'; font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -.02em; margin: 0 0 8px;
  display: inline-flex; align-items: baseline; gap: 2px;
  flex-wrap: wrap;
  min-width: 0; max-width: 100%;
  overflow-wrap: anywhere;
}
.cat-hero-c h1 .hl{
  position: relative; display: inline-block; padding: 0 .12em; isolation: isolate;
}
.cat-hero-c h1 .hl::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .44em;
  background: var(--yellow); z-index: -1; border-radius: 4px; transform: skewX(-4deg);
}
.cat-hero-c p.lede{
  margin: 0; font-size: 13.5px; color: var(--ink-3); max-width: 64ch; line-height: 1.55;
}
.cat-hero-c .lede-wrap{ position: relative; max-width: 64ch; }
.cat-hero-c p.lede.clamped{
  max-height: calc(1.55em * 3);
  overflow: hidden;
}
.cat-hero-c .lede-toggle{
  font: inherit; font-size: 13.5px; line-height: 1.55;
  font-weight: 800; color: var(--ink);
  background: transparent; border: 0;
  padding: 0; cursor: pointer;
  display: inline;
}
.cat-hero-c .lede-toggle:hover{ color: var(--red); }
.cat-hero-c .lede-wrap.is-clamped .lede-toggle{
  position: absolute; right: 0; bottom: 0;
  background: var(--paper);
  padding-left: .5em;
  z-index: 2;
}
.cat-hero-c .lede-wrap.is-clamped::after{
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 90px; height: 1.55em;
  background: linear-gradient(to right, transparent, var(--paper) 55%);
  pointer-events: none; z-index: 1;
}
.cat-hero-c .lede-wrap:not(.is-clamped) .lede-toggle{
  margin-left: .35em;
}

/* compact stats inline */
.cat-stats-c{
  display: flex; gap: 0; align-items: center;
  flex-shrink: 0;
}
.cat-stats-c .sv{
  display: flex; flex-direction: column; gap: 0;
  padding: 4px 18px;
  border-left: 1px solid var(--line);
  line-height: 1;
  position: relative;
}
.cat-stats-c .sv:first-child{ border-left: 0; padding-left: 0; }
.cat-stats-c .sv:last-child{ padding-right: 0; }
.cat-stats-c .v{
  font-family: 'Unbounded'; font-weight: 800; font-size: 20px; letter-spacing: -.01em;
  color: var(--ink); line-height: 1;
}
.cat-stats-c .l{
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cat-stats-c .info{
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--muted-2); color: var(--muted-2);
  font-size: 9px; font-weight: 800; font-family: 'Manrope'; cursor: help;
  line-height: 1; text-transform: none; letter-spacing: 0;
  transition: border-color .15s, color .15s;
}
.cat-stats-c .sv:hover .info{ border-color: var(--ink); color: var(--ink); }
.cat-stats-c .sv .tip{
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-family: 'Manrope'; font-size: 11.5px; font-weight: 500; line-height: 1.4;
  text-transform: none; letter-spacing: 0;
  padding: 9px 12px; border-radius: 8px;
  width: max-content; max-width: 240px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.cat-stats-c .sv .tip::before{
  content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--ink);
}
.cat-stats-c .sv:hover .tip,
.cat-stats-c .sv:focus-within .tip{
  opacity: 1; transform: translateX(-50%) translateY(2px);
}
@media (max-width: 720px){
  .cat-stats-c{ width: 100%; justify-content: space-between; }
  .cat-stats-c .sv{ padding: 4px 12px; }
}

/* sub-rubric chips */
.subrub{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.chip{
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  line-height: 1;
}
.chip:hover{ border-color: var(--line-strong); }
.chip.on{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--yellow);
  box-shadow: 0 0 0 1.5px var(--yellow);
  font-weight: 800;
}
.chip .n{ font-size: 11px; color: var(--muted); font-weight: 600; }
.chip.on .n{ color: var(--ink-2); }

/* shared category-tag (тільки на category-сторінці — не конфліктує з .card .thumb .cat) */
.cat-page .cat-tag{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 5px; background: var(--paper); color: var(--ink);
}
.cat-page .cat-tag.red{ background: var(--red); color: #fff; }
.cat-page .cat-tag.ink{ background: var(--ink); color: var(--paper); }
.cat-page .cat-tag.yellow{ background: var(--yellow); color: var(--ink); }

/* ============== EDITOR'S PICKS ============== */
.ed-section{ margin-bottom: 36px; }
.ed-section .sect-head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ed-section .sect-head h2{
  font-family: 'Unbounded'; font-weight: 800; font-size: 22px; letter-spacing: -.01em;
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.ed-section .sect-head h2::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  display: inline-block;
}

.ed-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px){ .ed-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ed-grid{ grid-template-columns: 1fr; } }

.ed-card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  transition: transform .15s, border-color .15s;
}
body[data-theme="dark"] .ed-card{ background: var(--paper-2); }
.ed-card:hover{ transform: translateY(-2px); border-color: var(--line-strong); }
.ed-card .thumb{
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #d9cfb1, #b8a97f);
}
.ed-card .thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-card .pick-flag{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 5px; background: var(--yellow); color: var(--ink);
}
.ed-card .body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ed-card h3{
  font-family: 'Unbounded'; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.005em;
  margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.ed-card .meta{ font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-top: auto; }
.ed-card .meta .sep{ width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; }

/* ============== AFTER ROW: feed + sidebar ============== */
.after{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1080px){
  .after{ grid-template-columns: 1fr; max-width: 920px; gap: 24px; }
}
.after .feed{ min-width: 0; }

/* main article list */
.alist{ display: flex; flex-direction: column; gap: 18px; }

/* default — image left + body */
.arow{
  display: grid; grid-template-columns: 240px 1fr; gap: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-height: 160px;
  transition: transform .15s, border-color .15s;
}
.arow:hover{ transform: translateY(-2px); border-color: var(--line-strong); }
.arow .thumb{
  position: relative; overflow: hidden; aspect-ratio: auto; height: 100%;
  background: linear-gradient(135deg, #d9cfb1, #b8a97f);
}
.arow .thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arow .thumb svg.illu{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: .65; }
.arow .body{ padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.arow h3{
  font-family: 'Unbounded'; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.005em;
  margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.arow .deck{
  margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arow .meta{ font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.arow .meta .sep{ width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; }
.arow .meta .author{ color: var(--ink-2); font-weight: 700; }
@media (max-width: 560px){
  .arow{ grid-template-columns: 1fr; }
  .arow .thumb{ aspect-ratio: 16/10; height: auto; }
  .arow h3{ font-size: 17px; }
}

/* arow variant: dark accent */
.arow.dark{
  grid-template-columns: 280px 1fr;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  padding: 0; min-height: 200px;
}
@media (max-width: 560px){ .arow.dark{ grid-template-columns: 1fr; } }
.arow.dark .thumb{ background: #1b1b1d; }
.arow.dark .thumb .cat-tag{ background: var(--yellow); color: var(--ink); }
.arow.dark .body{ padding: 28px 30px; gap: 12px; }
.arow.dark h3{
  font-family: 'Unbounded'; font-weight: 800; font-size: 26px; line-height: 1.08;
  color: var(--paper);
}
.arow.dark .pretitle{
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--yellow); margin-bottom: 0;
}
.arow.dark .deck{ color: #c8c1af; -webkit-line-clamp: 3; font-size: 14px; }
.arow.dark .meta{ color: #a39a85; }
.arow.dark .meta .author{ color: var(--paper); }
.arow.dark .meta .sep{ background: #5a5247; }

/* arow variant: editor's pick */
.arow.is-pick{
  border-color: var(--yellow);
  box-shadow: 0 0 0 1.5px var(--yellow), 0 6px 18px rgba(244,193,0,.18);
}
.arow.is-pick .pick-strip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); background: var(--yellow-soft);
  padding: 3px 8px; border-radius: 999px;
  width: max-content;
  margin-bottom: 2px;
}
.arow.is-pick .pick-strip svg{ width: 11px; height: 11px; }

/* arow variant: yellow band (text-only / with-img) */
.arow.yellow{
  grid-template-columns: 1fr;
  background: var(--yellow); border-color: var(--yellow);
  padding: 22px 24px; min-height: 0;
}
.arow.yellow .body{ padding: 0; }
.arow.yellow .pretitle{
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink); margin-bottom: 4px;
}
.arow.yellow h3{ font-family: 'Unbounded'; font-weight: 800; font-size: 24px; }
.arow.yellow.with-img{
  grid-template-columns: 240px 1fr;
  padding: 0; min-height: 160px;
  background: var(--yellow); border-color: var(--yellow);
  box-shadow: 0 6px 18px rgba(244,193,0,.18);
}
.arow.yellow.with-img .body{ padding: 18px 22px; gap: 8px; }
.arow.yellow.with-img .deck{ color: var(--ink-2); }
.arow.yellow.with-img .meta{ color: rgba(0,0,0,.55); }
.arow.yellow.with-img .meta .author{ color: var(--ink); }
.arow.yellow.with-img .meta .sep{ background: rgba(0,0,0,.4); }
.arow.yellow.with-img .thumb .cat-tag{ background: var(--ink); color: var(--paper); }
@media (max-width: 560px){
  .arow.yellow.with-img{ grid-template-columns: 1fr; }
  .arow.yellow.with-img .thumb{ aspect-ratio: 16/10; height: auto; }
}

/* ===== Embedded blocks within feed ===== */
.embed{ margin: 4px 0; }

/* Top week embed */
.embed-top{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
}
.embed-top h4{
  font-family: 'Unbounded'; font-weight: 800; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
}
.embed-top h4 .lab{
  font-family: 'Manrope'; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.embed-top-scroller{
  margin: 0 -22px;
  padding: 4px 22px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.embed-top-scroller::-webkit-scrollbar{ display: none; width: 0; height: 0; }
.embed-top-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 14px;
}
@media (max-width: 900px){ .embed-top-grid{ grid-auto-columns: 56%; } }
@media (max-width: 560px){ .embed-top-grid{ grid-auto-columns: 72%; } }
.embed-top-grid .ti{ display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-snap-align: start; }
.embed-top-grid .ti .tn{
  aspect-ratio: 16/10; position: relative; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, #d9cfb1, #b8a97f);
}
.embed-top-grid .ti .tn img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.embed-top-grid .ti .num{
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-family: 'Unbounded'; font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.embed-top-grid .ti h5{
  font-family: 'Manrope'; font-weight: 700; font-size: 13px; line-height: 1.3; margin: 0;
}
.embed-top-grid .ti:hover h5{ color: var(--ink); }

/* Telegram embed */
.embed-tg{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  background: var(--tg); color: #fff; border-radius: var(--radius);
  padding: 18px 22px;
}
.embed-tg .ic{
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.embed-tg .ic svg{ width: 26px; height: 26px; }
.embed-tg h4{
  font-family: 'Unbounded'; font-weight: 800; font-size: 18px; margin: 0 0 2px; letter-spacing: -.01em;
}
.embed-tg p{ margin: 0; font-size: 13px; opacity: .92; }
.embed-tg a.btn{
  background: #fff; color: var(--tg); padding: 10px 18px; border-radius: 10px;
  font-weight: 800; font-size: 13px; white-space: nowrap;
}
.embed-tg a.btn:hover{ background: var(--ink); color: #fff; }
@media (max-width: 560px){
  .embed-tg{ grid-template-columns: auto 1fr; }
  .embed-tg a.btn{ grid-column: 1 / -1; text-align: center; }
}

/* ===== Show more ===== */
.show-more-wrap{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 32px 0 8px;
}
.show-more{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 26px; border-radius: 999px;
  background: transparent; color: var(--ink);
  font-family: 'Manrope'; font-weight: 800; font-size: 14px;
  border: 2.5px solid var(--yellow);
  cursor: pointer; line-height: 1;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.show-more:hover{
  background: var(--yellow); color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244,193,0,.25);
}
.show-more.loading{ pointer-events: none; opacity: .7; }
.show-more.depleted{ display: none; }
.show-more .spinner{
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(14,14,15,.18); border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
  display: none;
}
.show-more.loading .spinner{ display: inline-block; }
.show-more.loading .arrow{ display: none; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.show-more-info{
  font-size: 12px; color: var(--muted);
  margin: 0; text-align: center;
  font-weight: 600;
}
.show-more-info b{ color: var(--ink); font-weight: 800; }

/* ===== Pagination ===== */
.pager{
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin: 36px 0 0; flex-wrap: wrap;
}
.pager a, .pager span{
  min-width: 36px; height: 36px;
  font-family: 'Manrope'; font-weight: 700; font-size: 15px;
  color: #9a948b; text-align: center; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  transition: color .15s;
}
.pager a:hover{ color: var(--ink); }
.pager a.cur, .pager span.cur{
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--yellow);
  color: var(--ink); font-weight: 800;
  background: transparent;
}
.pager .gap{ color: #9a948b; letter-spacing: 1px; }
.pager .nav-circ{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #d8d2c2;
  color: #5b554a;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.pager .nav-circ:hover{ border-color: var(--ink); color: var(--ink); }
.pager .nav-circ svg{ width: 14px; height: 14px; }
.pager .last{ color: #5b554a; }

/* Category description */
.cat-about{
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
}
.cat-about h3{
  font-family: 'Unbounded'; font-weight: 800; font-size: 18px; letter-spacing: -.01em;
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cat-about h3::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  display: inline-block;
}
.cat-about p{
  margin: 0 0 12px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cat-about p:last-child{ margin-bottom: 0; }
.cat-about p.collapsible{
  max-height: 0; margin: 0; overflow: hidden;
  transition: max-height .35s ease, margin-top .25s ease;
}
.cat-about.expanded p.collapsible{
  max-height: 2400px; margin-top: 0; margin-bottom: 0;
}
.cat-about p + p.collapsible{ margin-top: 0; }
.cat-about.expanded p + p.collapsible{ margin-top: 12px; }
.cat-about .about-toggle{
  margin-top: 14px; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Manrope'; font-weight: 800; font-size: 13px;
  color: var(--ink); letter-spacing: .02em;
  border: 0; background: transparent; cursor: pointer;
  line-height: 1.2;
}
.cat-about .about-toggle:hover{ color: var(--red); }
.cat-about .about-toggle svg{ width: 12px; height: 12px; transition: transform .2s; }
.cat-about .about-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* ============== SIDEBAR ============== */
.sb{
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: calc(var(--header-h) + var(--quick-h) + 16px);
}
@media (max-width: 1080px){ .sb{ position: static; } }
.sb-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
body[data-theme="dark"] .sb-card{ background: var(--paper-2); }
.sb-card > h4{
  font-family: 'Unbounded'; font-weight: 800; font-size: 14px; letter-spacing: .02em;
  text-transform: uppercase; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.sb-card .more-link{
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: .02em;
}
.sb-card .more-link:hover{ color: var(--red); }
.sb-card .more-link svg{ width: 11px; height: 11px; }

/* Widget 1: Tags / facets */
.sb-tags .group-h{
  font-family: 'Manrope'; font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 8px;
}
.sb-tags .group + .group{ margin-top: 14px; }
.sb-tags .tag-list{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sb-tags .t{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.sb-tags .t:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sb-tags .t .n{ font-size: 10px; color: var(--muted-2); font-weight: 600; }
.sb-tags .t:hover .n{ color: rgba(255,255,255,.55); }

/* Widget 2: Top-listicles */
.sb-listicles .lr{
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.sb-listicles .lr:last-of-type{ border-bottom: 0; }
.sb-listicles .lr .badge{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--yellow); color: var(--ink);
  font-family: 'Unbounded'; font-weight: 800; font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sb-listicles .lr h5{
  font-family: 'Manrope'; font-weight: 700; font-size: 13px; line-height: 1.3; margin: 0;
  color: var(--ink-2);
}
.sb-listicles .lr:hover h5{ color: var(--ink); }

/* Widget 3: Mini map card */
.sb-map .map-thumb{
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8e0cb 0%, #d9cfb1 100%);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.sb-map .map-thumb::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,14,15,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,15,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sb-map .map-thumb .pin{
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
}
.sb-map .map-thumb .pin.y{ background: var(--yellow); }
.sb-map .map-thumb .pin.k{ background: var(--ink); }
.sb-map .map-stat{
  font-size: 12px; color: var(--muted); margin: 0 0 12px;
}
.sb-map .map-stat b{ color: var(--ink); font-weight: 700; }
.sb-map .map-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 11px 14px; border-radius: 10px;
  background: var(--ink); color: var(--paper);
  font-family: 'Manrope'; font-weight: 800; font-size: 13px;
  transition: background .15s;
}
.sb-map .map-cta:hover{ background: var(--ink-2); }
.sb-map .map-cta svg{ width: 14px; height: 14px; }

/* Widget 4: Archive years */
.sb-years .yr-list{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sb-years .yr{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-family: 'Unbounded'; font-weight: 700; font-size: 12.5px;
  color: var(--ink-2); line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.sb-years .yr:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sb-years .yr .n{
  font-family: 'Manrope'; font-size: 10.5px; color: var(--muted-2); font-weight: 600;
}
.sb-years .yr:hover .n{ color: rgba(255,255,255,.6); }
.sb-years .yr.cur{
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
}
.sb-years .yr.cur .n{ color: var(--ink-2); }

/* Widget 5: All-time top */
.top-row-i{
  display: grid; grid-template-columns: 24px 60px 1fr; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.top-row-i:last-of-type{ border-bottom: 0; }
.top-row-i .n{
  font-family: 'Unbounded'; font-weight: 800; font-size: 18px; color: var(--red);
  line-height: 1; text-align: center;
}
.top-row-i .tn{
  width: 60px; height: 48px; border-radius: 6px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #d9cfb1, #b8a97f);
}
.top-row-i .tn img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top-row-i h5{
  font-family: 'Manrope'; font-weight: 700; font-size: 13px; line-height: 1.3; margin: 0;
  color: var(--ink-2);
}
.top-row-i:hover h5{ color: var(--red); }

/* ===========================================================
   Editorial card variants & badges — ACF + auto-classes
   =========================================================== */

/* ---- PR (sponsored) tag — replaces cat-tag on thumb ---- */
.cat-page .pr-tag{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 9px; border-radius: 5px;
  background: var(--red); color: #fff;
  box-shadow: 0 2px 6px rgba(229,50,42,.35);
}
.arow.dark .pr-tag,
.arow.yellow.with-img .pr-tag{ background: var(--red); color: #fff; }

/* ---- Custom thumb label — replaces cat-tag ---- */
.cat-page .thumb-label{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 5px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 2px 6px rgba(14,14,15,.18);
}
.arow.yellow.with-img .thumb-label{ background: var(--paper); color: var(--ink); }

/* ---- Auto: longread ---- */
.arow.is-longread{
  border-left: 3px solid var(--ink);
}
.arow.is-longread.dark{ border-left-color: var(--yellow); }
.arow.is-longread.yellow{ border-left-color: var(--ink); }
.arow .longread-pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: var(--ink-2);
}
.arow .longread-pill svg{ width: 12px; height: 12px; }
.arow.dark .longread-pill{ color: var(--yellow); }
.arow.yellow .longread-pill{ color: var(--ink); }

/* ---- Auto: fresh (post < 2h old) ---- */
.arow .fresh-dot{
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(229,50,42,.6);
  animation: mykyiv-fresh-pulse 1.8s ease-out infinite;
}
@keyframes mykyiv-fresh-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(229,50,42,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(229,50,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,50,42,0); }
}
@media (prefers-reduced-motion: reduce){
  .arow .fresh-dot{ animation: none; }
}
.arow.is-fresh .date{ font-weight: 700; color: var(--red); }

/* ---- Auto: updated ---- */
.arow .upd-pill{
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--paper-3); color: var(--ink-2);
}
.arow.dark .upd-pill{ background: rgba(255,212,0,.16); color: var(--yellow); }
.arow.yellow .upd-pill{ background: rgba(0,0,0,.12); color: var(--ink); }

/* ---- Auto: video play overlay ---- */
.arow .thumb-play{
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.arow .thumb-play svg{
  width: 44px; height: 44px;
  color: #fff;
  background: rgba(14,14,15,.55);
  border-radius: 50%; padding: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: transform .15s, background .15s;
}
.arow:hover .thumb-play svg{ transform: scale(1.08); background: rgba(229,50,42,.85); }

/* ---- Auto: gallery badge ---- */
.arow .thumb-gallery{
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(14,14,15,.65); color: #fff; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.arow .thumb-gallery svg{ width: 14px; height: 14px; }

/* ---- TG-thin embed inside feed (after 8th card) ---- */
.embed-tg-wrap{ margin: 4px 0; }
.embed-tg-wrap .tg-thin{ width: 100%; }

/* ---- Author archive hero: portrait beside h1, socials below ---- */
.au-hero-row{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
.au-hero-row h1{ margin: 0; }
.au-avatar{
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; letter-spacing: -.5px;
  text-transform: uppercase;
  user-select: none;
  background: var(--bg, #f3f0ea);
}
.au-avatar-hero{
  width: 72px; height: 72px;
  font-size: 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.au-avatar.k1{ background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%); color: #1b1b1d; }
.au-avatar.k2{ background: linear-gradient(160deg, #1b1b1d 0%, #3a3a3f 100%); }
.au-avatar.k3{ background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); }
.au-avatar.k4{ background: linear-gradient(135deg, #c7d7e8 0%, #8aa6c2 100%); color: #1b1b1d; }
.au-avatar.k5{ background: linear-gradient(135deg, #e8e0cb 0%, #c4b896 100%); color: #1b1b1d; }

/* Соцмережі під заголовком — невеликі круглі іконки в один ряд */
.cat-hero-c .au-socials{
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-hero-c .au-socials li{ margin: 0; }
.cat-hero-c .au-soc{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg, #f3f0ea);
  color: var(--ink);
  transition: background .15s, color .15s, transform .15s;
}
.cat-hero-c .au-soc svg{ width: 16px; height: 16px; }
.cat-hero-c .au-soc:hover{
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 640px){
  .au-avatar-hero{ width: 56px; height: 56px; font-size: 20px; }
  .au-hero-row{ gap: 12px; }
}