:root {
  --fg: #111;
  --muted: #666;
  --bg: #f3f6fb;
  --card: #ffffff;
  --brand: #0ea5e9;
  --ring: rgba(14, 165, 233, 0.25);
  --shadow: 0 6px 24px rgba(10, 30, 60, 0.06);
  --radius: 12px;
  --gap: 20px;
  --wrap: clamp(320px, 96vw, 1400px);
  --content: clamp(320px, 92vw, 1200px); /* ширина центральной колонки */
  --top-sticky: 72px;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px 16px 16px 16px;
  position: relative;
  z-index: 1;
}
.header,
.footer {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-weight: 800;
  letter-spacing: 0.3px;
}
.nav {
  display: flex;
  gap: 12px;
}
.nav-link {
  color: #0b4660;
}
.nav-link.active {
  font-weight: 700;
}
.lead {
  color: var(--muted);
}

.btn {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.9;
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.btn-lite {
  background: #e8f6fe;
  color: #065e86;
}

.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.card {
  background: rgba(255, 255, 255, 0.5);
  border: #fff solid 1px;
  padding: 12px;
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: blur(4px) saturate(120%);
}
.card .title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.meta {
  color: var(--muted);
  font-size: 14px;
}
.post .cover {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0.5rem 0 1rem;
}
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  margin: 16px 0;
}

.banner {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #065e86;
  font-size: 13px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.list a {
  color: #0b4660;
}

/* Фоновой canvas под контентом */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: #fff;
  pointer-events: none;
}

main .card,
article.post {
  backdrop-filter: none;
}
.card-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.card-row .thumb {
  flex: 0 0 120px; /* ширина обложки */
}
.card-row .thumb img.cover {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.card-row .info {
  flex: 1;
  min-width: 0; /* чтобы текст не вылезал */
}
.card-row .title {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.card-row .meta {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.card-row .snippet {
  margin: 0;
  color: var(--fg);
  font-size: 24px;
  line-height: 28px;
}

.center {
  max-width: var(--content);
  margin-inline: auto;
}

/* БЛОГ */
/* ==== FEATURED (2 крупные квадратные карточки) ==== */
.featured-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 180px;
}
.featured-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.featured-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Квадратная обложка с cover */
.featured-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* современная поддержка */
  background: #eaeff6;
}
.featured-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Заголовок снизу поверх */
.featured-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%);
}

/* ==== FEED (10 карточек, 2 столбца, справа иконка) ==== */
.feed-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 20px;
  margin: 24px 180px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/*.feed-item{ background:rgba(255,255,255,0.5); border:1px solid #fff; border-radius:8px; }*/
.feed-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}

/* текст */
.feed-info {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}
.feed-title {
  font-weight: 700;
  margin: 0;
}
.feed-snippet {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}
.feed-meta {
  color: var(--muted);
  font-size: 12px;
}

/* иконка */
.feed-thumb {
  flex: 0 0 110px;
  order: 0;
}
.feed-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .featured-grid {
    grid-template-columns: 1fr;
    margin: 24px 0; /* убираем боковые отступы */
  }
  .feed-grid {
    grid-template-columns: 1fr;
    margin: 24px 0; /* убираем боковые отступы */
  }
  .feed-thumb {
    flex-basis: 96px;
  }
}

/* Дополнительные правки для очень маленьких экранов */
@media (max-width: 480px) {
  .featured-title {
    font-size: 1.25rem;
    padding: 16px;
  }

  .feed-link {
    padding: 8px; /* уменьшаем отступы в карточках ленты */
  }

  .feed-thumb {
    flex-basis: 80px; /* делаем миниатюры меньше */
  }

  .feed-title {
    font-size: 0.95rem; /* уменьшаем размер заголовков */
  }
}

/* ПОСТ */
.post h1 {
  font-size: 3rem;
  line-height: 1;
  margin: 1rem 0 3rem 0;
}
.post h2 {
  font-size: 1.5rem;
  line-height: 1;
  margin: 3rem 0 1rem 0;
}
.post .meta {
  margin-bottom: 0.75rem;
}
.post .body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.post .snippet {
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 2rem;
}
.post p {
  font-size: 1.15rem;
  line-height: 1.5rem;
}

.share-icons {
  display: flex;
  gap: 16px;
  margin: 12px 0;
}
.social-icon {
  width: 28;
  height: 28;
  display: inline-grid;
  place-items: center;
  color: #0b4660;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.social-icon:hover {
  color: #0a3d57;
}
.social-icon svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 1280px) {
  .post h1,
  .post .meta,
  .post .snippet,
  .post .body,
  .post .share-icons {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .post .body > img {
    display: block;
    max-width: 980px;
    margin: 3rem -150px;
  }
  .post .body > img.full {
    max-width: 1200px;
    margin: 0.25rem calc((1200px-680px) / -2);
  }
}

/* ТАБЛИЦА */
/* Полупрозрачная белая подложка (50%), белые границы, при наведении — полностью белая */
table {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Если .tbl — контейнер вокруг <table> */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Белые границы внутри таблицы */
table th,
table td {
  border: 1px solid #fff;
  padding: 12px;
  text-align: left;
}

/* Шапка таблицы слегка подсвечена (сохраняем полупрозрачность) */
table thead th {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.35);
}

/* Дополнительно: подсветка строки при наведении (опционально) */
table tbody tr:hover {
  background: rgba(255, 255, 255, 0.85);
}

table p {
  margin: 0;
  font-size: 1rem !important;
}

/* Адаптивность: горизонтальная прокрутка при узком экране */
table {
  overflow-x: auto;
}

/* FEATURES GRID (4 столбца, 20 карточек) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.feature-card {
  display: block;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(8px);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease-in-out, transform 0.1s ease-in-out;
}
.feature-card:hover {
  background: #fff;
}
.feature-card .title{font-weight:600;margin:.5rem 0}
.feature-card p{margin: 0} 

@media (max-width: 560px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}