/* Блог (варіант A «Індекс») — перенесено з redesign-2026-10/blog/a-index.html */
/* Варіант A «Індекс»: журнальний покажчик блогу — жива нитка під словом, вітрина рубрик, «почніть звідси», архів по місяцях */
section { scroll-margin-top: 9.375rem; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.625rem 1.875rem; margin: 0 0 1.375rem; }
.sec-head h2 { margin: 0; font: 900 clamp(1.75rem, 3vw, 2.625rem)/1 var(--display); letter-spacing: -.035em; }
.sec-head p { margin: 0; color: var(--muted); max-width: 34em; }

/* Героїня: слово «Блог» + жива нитка (WebGL); без WebGL — пласка лінія SVG */
.hero { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem 3rem; align-items: end; padding: clamp(1.75rem, 5vw, 4rem) 0 2.5rem; }
.hero__title { position: relative; display: grid; gap: 1rem; }
.hero h1 { margin: 0; font: 900 clamp(6.875rem, 21vw, 21.25rem)/.78 var(--display); letter-spacing: -.07em; }
.h1-big { position: relative; display: block; }
.h1-sub { display: block; margin-top: .22em; font-size: clamp(1.625rem, 3.2vw, 2.875rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.hero h1 svg { position: absolute; left: -2%; top: 38%; width: 104%; height: 70%; overflow: visible; pointer-events: none; }
.hero h1 path { fill: none; stroke-linecap: round; }
.has-thread .hero h1 svg { display: none; }
.thread { position: absolute; left: calc(-1 * min(6%, var(--gutter))); top: 0; width: 60%; height: 100%; pointer-events: none; z-index: 1; }
.hero__side { position: relative; z-index: 2; display: grid; gap: 1.125rem; padding-bottom: 0.75rem; }
.hero__side p { margin: 0; font-size: 1.1875rem; color: var(--muted); max-width: 30em; }
.hero__side b { color: var(--ink); }
.search kbd { position: absolute; right: 0.875rem; top: 50%; translate: 0 -50%; padding: 2px 0.5rem; border: 1px solid var(--line); border-radius: 0.375rem; font: 600 0.75rem var(--display); color: var(--muted); }
@media (hover: none) { .search kbd { display: none; } }

/* Вітрина рубрик */
.rubs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.rub { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem; border-radius: 1.375rem; background: var(--paper); border-top: 0.25rem solid var(--c); }
.rub__head { display: grid; gap: 0.375rem; text-decoration: none; }
.rub__n { font: 900 2.875rem/1 var(--display); letter-spacing: -.05em; color: var(--c); font-variant-numeric: tabular-nums; }
.rub__name { margin: 0; font: 800 1.3125rem/1.1 var(--display); letter-spacing: -.02em; }
.rub__head p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.rub__tops { margin: 0; padding: 0.75rem 0 0; list-style: none; display: grid; gap: 0.5rem; border-top: 1px solid var(--line); font-size: 0.875rem; }
.rub__tops a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rub__tops a:hover, .rub__head:hover .rub__name { color: var(--accent); }
.rub__all { margin-top: auto; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--c); }
/* 3D-форма рубрики: місце відведене в розмітці (без стрибків); до появи 3D чи без WebGL — статична картинка тієї самої форми */
.rub__head { grid-template-columns: minmax(0, 1fr) 5.25rem; }
.rub__n, .rub__name { grid-column: 1; }
.rub__head p { grid-column: 1 / -1; }
.rub__art { grid-column: 2; grid-row: 1 / 3; width: 5.25rem; height: 5.25rem; }
.rub__art img { width: 100%; height: 100%; transition: opacity .3s; }
.has-rub3d .rub__art img { opacity: 0; }
.rubs-gl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Почніть звідси — порядок читання для новачка */
.starts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.start { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.25rem; border-radius: 1.375rem; border: 1.5px solid var(--line); text-decoration: none; transition: border-color .25s, transform .25s; }
.start:hover { border-color: var(--accent); } /* зсув — у ../shared.css, лише для миші */
.start__n { font: 900 1.875rem/1 var(--display); color: var(--accent); letter-spacing: -.04em; }
.start__why { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.start__title { margin: 0; font: 800 1.1875rem/1.2 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.start__min { margin-top: auto; font-size: 0.875rem; color: var(--accent); font-weight: 600; }

/* Архів */
.bar { position: sticky; top: 4.5rem; z-index: 6; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.625rem 1.25rem; padding: 0.875rem 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.counter { margin: 0; font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; padding: 2.125rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.feature img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1.375rem; }
.feature__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.875rem; color: var(--muted); }
.feature__new { padding: 0.25rem 0.625rem; border-radius: 62.4375rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; }
.feature h3 { margin: 0.875rem 0 0.75rem; font: 900 clamp(1.875rem, 3.6vw, 3.375rem)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.feature p { margin: 0 0 1.125rem; color: var(--muted); max-width: 36em; }
.read { font-weight: 600; color: var(--accent); }
.index { margin: 0; padding: 0; list-style: none; }
/* Місяць — липкий підпис під панеллю фільтрів */
.month { position: sticky; top: calc(4.5rem + var(--bar-h, 4rem)); z-index: 4; display: flex; align-items: baseline; gap: 0.875rem; padding: 1.625rem 0 0.625rem; background: var(--bg); }
.month__title { font: 900 1.375rem/1 var(--display); letter-spacing: -.02em; }
.month__n { font-size: 0.8125rem; color: var(--muted); }
/* Рядок архіву — «стрічка»: обкладинка ліворуч, рубрика, заголовок, анонс, дата */
.row { display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; gap: 0.5rem 1.75rem; padding: 1.375rem 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: start; }
.row__thumb { grid-column: 1; grid-row: 1 / 5; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1rem; background: var(--paper); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.row .chip { grid-column: 2; grid-row: 1; }
.row__min { grid-column: 3; grid-row: 1; font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.row__title { grid-column: 2 / 4; grid-row: 2; margin: 0; font: 800 clamp(1.375rem, 2vw, 1.75rem)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; transition: color .2s; }
.row:hover .row__title { color: var(--accent); }
.row__ex { grid-column: 2 / 4; grid-row: 3; margin: 0; max-width: 52em; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__date { grid-column: 2; grid-row: 4; align-self: end; font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.inline-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.875rem 1.5rem; margin: 0.875rem 0; padding: 1.25rem 1.5rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.inline-cta b { font-weight: 800; }
.more { flex-direction: column; align-items: center; gap: 0.75rem; }
/* Автор */
.author { display: grid; grid-template-columns: auto 1fr auto; gap: 1.125rem 1.625rem; align-items: center; margin-top: clamp(3.75rem, 8vw, 6.25rem); padding: 1.625rem 1.75rem; border-radius: 1.625rem; background: var(--paper); }
.author__ava { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 900 1.625rem/1 var(--display); letter-spacing: -.04em; }
.author h2 { margin: 0 0 0.25rem; font: 800 1.375rem/1.15 var(--display); }
.author p { margin: 0; color: var(--muted); max-width: 46em; }
.author__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 1100px) { .rubs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .thread { width: 100%; height: 62%; left: 0; }
  .feature { grid-template-columns: 1fr; }
  .rubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* фільтри в один рядок з прокруткою — липка панель не з'їдає пів екрана */
  .bar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .bar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .bar .filters::-webkit-scrollbar { display: none; }
  .bar .filters li { flex: none; }
  .month { padding-top: 1.125rem; }
  /* рядок на телефоні: мініатюра ліворуч, дата й хвилини в одному рядку, анонс — на всю ширину */
  .row { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.375rem 0.875rem; padding: 1rem 0; }
  .row__thumb { grid-row: 1 / 4; width: 7.5rem; height: 4.6875rem; aspect-ratio: auto; border-radius: 0.625rem; }
  .row .chip { grid-column: 2; grid-row: 1; }
  .row__title { grid-column: 2; grid-row: 2; font-size: 1.125rem; }
  .row__date { grid-column: 2; grid-row: 3; align-self: start; }
  .row__min { grid-column: 2; grid-row: 3; justify-self: end; }
  .row__ex { grid-column: 1 / -1; grid-row: 4; font-size: 0.9375rem; }
  .author { grid-template-columns: auto 1fr; }
  .author__links { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .rubs, .starts { grid-template-columns: 1fr; } }

/* WP: на сторінках рубрик слово в h1 довше за «Блог» — менший кегль, щоб не вилазило за екран */
.hero h1.is-rubric { font-size: clamp(4rem, 11vw, 11.25rem); }
/* WP: крихти над живою ниткою (canvas .thread має z-index 1) */
.hero .crumbs { position: relative; z-index: 2; }