/* Главная блога (/blog/): баннер героя, рубрики, популярные, подборки, философия, разборы для заказчика. Только токены tokens.css; подключается после forma-blog.css. */

.fc-blog-hero {
  position: relative;
  min-height: clamp(34rem, 65vh, 44rem);
  display: flex;
  align-items: center;
  overflow: visible;
}
.fc-blog-hero .fc-hero-text {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}
.fc-blog-banner {
  position: absolute;
  inset: -3rem auto -4rem 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--ink-00) 15%,var(--fc-clear)) 8%, color-mix(in srgb,var(--ink-00) 60%,var(--fc-clear)) 18%, var(--ink-00) 35%, var(--ink-00) 65%, color-mix(in srgb,var(--ink-00) var(--a-55),var(--fc-clear)) 82%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, var(--ink-00) 6%, var(--ink-00) 70%, color-mix(in srgb,var(--ink-00) 60%,var(--fc-clear)) 84%, color-mix(in srgb,var(--ink-00) 15%,var(--fc-clear)) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--ink-00) 15%,var(--fc-clear)) 8%, color-mix(in srgb,var(--ink-00) 60%,var(--fc-clear)) 18%, var(--ink-00) 35%, var(--ink-00) 65%, color-mix(in srgb,var(--ink-00) var(--a-55),var(--fc-clear)) 82%, transparent 100%),
              linear-gradient(90deg, transparent 0%, var(--ink-00) 6%, var(--ink-00) 70%, color-mix(in srgb,var(--ink-00) 60%,var(--fc-clear)) 84%, color-mix(in srgb,var(--ink-00) 15%,var(--fc-clear)) 94%, transparent 100%);
  mask-composite: intersect;
}
.fc-blog-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  filter: saturate(1.05) contrast(1.05);
  animation: blog-drift 32s ease-in-out infinite alternate;
  transform-origin: 70% 55%;
}
.fc-blog-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb,var(--ink-12) 88%,var(--fc-clear)) 0%, color-mix(in srgb,var(--ink-12) 72%,var(--fc-clear)) 22%, color-mix(in srgb,var(--ink-12) 32%,var(--fc-clear)) 42%, color-mix(in srgb,var(--ink-12) 0%,var(--fc-clear)) 60%);
}
.fc-blog-glow {
  position: absolute;
  z-index: 1;
  right: 18%;
  bottom: 20%;
  width: 32vw;
  height: 32vw;
  max-width: 32rem;
  max-height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb,var(--mint-75) 16%,var(--fc-clear)), color-mix(in srgb,var(--amber-72) 8%,var(--fc-clear)) 45%, color-mix(in srgb,var(--mint-75) 0%,var(--fc-clear)) 70%);
  mix-blend-mode: screen;
  animation: blog-pulse 7s ease-in-out infinite alternate;
}
.fc-blog-hand {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 12vw, 12rem);
  top: clamp(2rem, 6vw, 5rem);
  margin: 0;
  transform: rotate(-8deg);
  text-align: right;
  font: 400 clamp(var(--px-20), 1.8vw, var(--px-28))/1.2 Caveat, "Segoe Print", cursive;
  color: var(--fc-color-link, var(--lav-89));
  text-shadow: 0 var(--px-2) var(--px-12) color-mix(in srgb,var(--ink-12) 80%,var(--fc-clear));
  pointer-events: none;
}
.fc-blog-hand .fc-hand-arrow {
  display: block;
  margin: var(--px-6) var(--px-12) 0 auto;
  width: var(--px-24);
  height: var(--px-24);
  color: var(--sand-86, var(--sand-86));
  filter: drop-shadow(0 0 var(--px-8) color-mix(in srgb,var(--sand-86) var(--a-50),var(--fc-clear)));
}
@keyframes blog-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
@keyframes blog-pulse {
  from { opacity: .55; transform: scale(.95); }
  to { opacity: 1; transform: scale(1.08); }
}
@media(max-width: 1023px) {
  .fc-blog-hero { min-height: 32rem; padding-block: 3rem; flex-wrap: wrap; align-content: center; }
  .fc-blog-hero .fc-hero-text,
  .fc-blog-hero .fc-hero-search { flex: 0 0 100%; }
  .fc-blog-banner::before {
    background: linear-gradient(180deg, color-mix(in srgb,var(--ink-12) 88%,var(--fc-clear)) 0%, color-mix(in srgb,var(--ink-12) 65%,var(--fc-clear)) 55%, color-mix(in srgb,var(--ink-12) 20%,var(--fc-clear)) 100%);
  }
  .fc-blog-banner img { object-position: 70% 50%; }
  .fc-blog-hand { display: none; }
}
@media(prefers-reduced-motion: reduce) {
  .fc-blog-banner img, .fc-blog-glow { animation: none; }
}
body { overflow-x: clip; }

/* ========================================================
   Showcase / Popular Section (v4 Redesign)
   ======================================================== */
.fc-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: var(--px-20);
  align-items: stretch;
}

.fc-showcase-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--px-440);
  padding: var(--px-34) var(--px-38);
  border-radius: var(--px-24);
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear));
  background-color: var(--ink-12);
  overflow: hidden;
  box-shadow: 0 var(--px-16) var(--px-44) color-mix(in srgb,var(--ink-00) var(--a-45),var(--fc-clear)), inset 0 var(--px-1) 0 color-mix(in srgb,var(--fg-100) 6%,var(--fc-clear));
  transition: border-color .35s ease, box-shadow .35s ease;
}
.fc-showcase-lead:hover {
  border-color: color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear));
  box-shadow: 0 var(--px-24) var(--px-60) color-mix(in srgb,var(--ink-00) 60%,var(--fc-clear)), 0 0 var(--px-34) color-mix(in srgb,var(--mint-75) 10%,var(--fc-clear));
}

.fc-showcase-lead-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.fc-showcase-lead-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform 6s cubic-bezier(.2,.75,.2,1);
}
.fc-showcase-lead:hover .fc-showcase-lead-bg img {
  transform: scale(1.02);
}
.fc-showcase-lead-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink-12) 0%, color-mix(in srgb,var(--ink-12) 94%,var(--fc-clear)) 34%, color-mix(in srgb,var(--ink-12) var(--a-45),var(--fc-clear)) 54%, transparent 74%);
}

.fc-showcase-lead-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: var(--px-380);
}

.fc-badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--px-6) var(--px-14);
  border-radius: var(--r-pill);
  border: var(--px-1) solid color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear));
  background: color-mix(in srgb,var(--teal-20) 65%,var(--fc-clear));
  backdrop-filter: blur(var(--px-10));
  font-size: var(--px-10);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-74);
  box-shadow: 0 0 var(--px-12) color-mix(in srgb,var(--mint-75) 12%,var(--fc-clear));
  margin-bottom: var(--px-20);
}

.fc-showcase-lead-title {
  font-size: clamp(var(--px-22), 2.2vw, var(--px-30));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: var(--px-340);
  margin: 0 0 var(--px-14) 0;
}
.fc-showcase-lead-title a {
  color: var(--fg-100);
  text-decoration: none;
  transition: color .2s ease;
}
.fc-showcase-lead-title a:hover {
  color: var(--mint-75);
}

.fc-showcase-lead-desc {
  font-size: var(--px-14);
  line-height: 1.45;
  color: color-mix(in srgb,var(--fg-94) 68%,var(--fc-clear));
  max-width: var(--px-320);
  margin: 0 0 var(--px-24) 0;
}

.fc-showcase-author-bar {
  display: flex;
  align-items: center;
  gap: var(--px-16);
  margin-bottom: var(--px-14);
  max-width: var(--px-320);
}

.fc-showcase-author {
  display: flex;
  align-items: center;
  gap: var(--px-12);
}
.fc-author-avatar {
  width: var(--px-44);
  height: var(--px-44);
  border-radius: 50%;
  object-fit: cover;
  border: var(--px-1_5) solid color-mix(in srgb,var(--teal-74) var(--a-45),var(--fc-clear));
  box-shadow: 0 0 var(--px-10) color-mix(in srgb,var(--mint-75) 15%,var(--fc-clear));
}
.fc-author-text {
  display: flex;
  flex-direction: column;
}
.fc-author-name {
  font-size: var(--px-14);
  font-weight: 500;
  color: var(--fg-100);
}
.fc-author-role {
  font-size: var(--px-12);
  color: var(--fg-65);
  margin-top: var(--px-2);
}

.fc-feat-audio {
  display: flex;
  align-items: center;
  gap: var(--px-10);
  margin: 0 0 var(--px-20) 0;
  max-width: var(--px-270);
}
.fc-audio-line {
  flex: 1;
  height: var(--px-1);
  background: linear-gradient(90deg, color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear)), color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear)));
}
.fc-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--px-6);
  font-size: var(--px-10);
  color: var(--teal-74);
  letter-spacing: 0.02em;
}
.fc-audio-pill svg {
  width: var(--px-13);
  height: var(--px-13);
}

.fc-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--px-10);
  padding: var(--px-10) var(--px-24);
  border-radius: var(--r-pill);
  border: var(--px-1) solid color-mix(in srgb,var(--teal-74) 65%,var(--fc-clear));
  background: color-mix(in srgb,var(--teal-20) var(--a-70),var(--fc-clear));
  backdrop-filter: blur(var(--px-10));
  color: var(--fg-94);
  font-size: var(--px-14);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 0 var(--px-16) color-mix(in srgb,var(--mint-75) 15%,var(--fc-clear)), inset 0 0 var(--px-12) color-mix(in srgb,var(--mint-75) 8%,var(--fc-clear));
  transition: all .25s cubic-bezier(.2,.75,.2,1);
}
.fc-btn-pill:hover {
  border-color: color-mix(in srgb,var(--mint-75) 95%,var(--fc-clear));
  background: color-mix(in srgb,var(--ink-24) 92%,var(--fc-clear));
  box-shadow: 0 0 var(--px-28) color-mix(in srgb,var(--mint-75) 42%,var(--fc-clear));
  color: var(--fg-100);
  transform: translateY(calc(var(--px-1)*-1));
}
.fc-btn-pill .fc-ico {
  width: var(--px-16);
  height: var(--px-16);
  transition: transform .25s ease;
}
.fc-btn-pill:hover .fc-ico {
  transform: translateX(var(--px-4));
}

.fc-showcase-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--px-14);
  height: 100%;
}

.fc-stack-card {
  display: block;
  border-radius: var(--px-20);
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 7%,var(--fc-clear));
  background: var(--ink-16);
  overflow: hidden;
  box-shadow: 0 var(--px-8) var(--px-24) color-mix(in srgb,var(--ink-00) 35%,var(--fc-clear));
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fc-stack-card:hover {
  border-color: color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear));
  background: var(--ink-16);
  transform: translateY(calc(var(--px-2)*-1));
  box-shadow: 0 var(--px-14) var(--px-34) color-mix(in srgb,var(--ink-00) var(--a-50),var(--fc-clear)), 0 0 var(--px-20) color-mix(in srgb,var(--mint-75) 8%,var(--fc-clear));
}

.fc-stack-card-link {
  display: grid;
  grid-template-columns: var(--px-108) 1fr;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  height: 100%;
  min-height: var(--px-122);
}

.fc-stack-thumb {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--ink-12);
}
.fc-stack-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.75,.2,1);
}
.fc-stack-card:hover .fc-stack-thumb img {
  transform: scale(1.06);
}

.fc-stack-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--px-16) var(--px-20) var(--px-16) var(--px-18);
  gap: var(--px-10);
}

.fc-stack-title {
  font-size: var(--px-14);
  font-weight: 500;
  line-height: 1.34;
  color: var(--fg-100);
  margin: 0;
  letter-spacing: -0.01em;
  transition: color .2s ease;
}
.fc-stack-card:hover .fc-stack-title {
  color: var(--mint-75);
}

.fc-stack-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-12);
  font-size: var(--px-12);
  color: var(--fg-65);
}
.fc-stack-meta .fc-reading {
  display: inline-flex;
  align-items: center;
  gap: var(--px-4);
  color: var(--fg-65);
}
.fc-stack-meta .fc-reading svg {
  width: var(--px-13);
  height: var(--px-13);
}

@media(max-width: 1023px) {
  .fc-showcase-grid {
    grid-template-columns: 1fr;
    gap: var(--px-18);
  }
  .fc-showcase-lead {
    min-height: var(--px-380);
    padding: var(--px-30) var(--px-28);
  }
  .fc-showcase-stack {
    gap: var(--px-12);
  }
}
@media(max-width: 640px) {
  .fc-showcase-lead {
    padding: var(--px-24) var(--px-20);
    min-height: auto;
  }
  .fc-showcase-lead-bg img {
    object-position: 85% center;
    opacity: 0.75;
  }
  .fc-showcase-lead-bg::after {
    background: linear-gradient(180deg, color-mix(in srgb,var(--ink-12) 75%,var(--fc-clear)) 0%, color-mix(in srgb,var(--ink-12) var(--a-90),var(--fc-clear)) 50%, var(--ink-12) 100%);
  }
  .fc-stack-card-link {
    grid-template-columns: var(--px-92) 1fr;
    min-height: var(--px-108);
  }
  .fc-stack-body {
    padding: var(--px-14) var(--px-16);
  }
  .fc-stack-title {
    font-size: var(--px-14);
  }
}

/* ==========================================================================
   STORIES / INTERVIEWS SECTION
   ========================================================================== */
.fc-stories-section {
  max-width: var(--fc-max);
  margin: var(--px-72) auto 0;
  padding: 0 var(--px-24);
}

.fc-stories-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--px-24);
  margin-bottom: var(--px-28);
}

.fc-stories-title {
  font-size: clamp(var(--px-26), 2.8vw, var(--px-38));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--fg-100);
  margin: 0;
}

.fc-stories-all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--px-8);
  padding: var(--px-10) var(--px-18);
  background: color-mix(in srgb,var(--fg-100) var(--a-4),var(--fc-clear));
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 12%,var(--fc-clear));
  border-radius: var(--r-pill);
  font-size: var(--px-13);
  font-weight: 500;
  color: var(--sage-89);
  text-decoration: none;
  white-space: nowrap;
  transition: all .25s ease;
}
.fc-stories-all-link svg {
  transition: transform .25s ease;
}
.fc-stories-all-link:hover {
  background: color-mix(in srgb,var(--teal-74) 12%,var(--fc-clear));
  border-color: color-mix(in srgb,var(--teal-74) var(--a-45),var(--fc-clear));
  color: var(--fg-100);
  text-decoration: none;
}
.fc-stories-all-link:hover svg {
  transform: translateX(var(--px-3));
}

.fc-stories-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: var(--px-20);
  align-items: stretch;
}

/* --- Left Hero Interview Card --- */
.fc-story-lead {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink-16);
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear));
  border-radius: var(--px-20);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  text-decoration: none;
  color: inherit;
}
.fc-story-lead:hover {
  border-color: color-mix(in srgb,var(--teal-74) var(--a-40),var(--fc-clear));
  box-shadow: 0 var(--px-16) var(--px-40) color-mix(in srgb,var(--ink-00) var(--a-45),var(--fc-clear));
  text-decoration: none;
}

.fc-story-media {
  position: relative;
  min-height: var(--px-380);
  overflow: hidden;
  background: var(--ink-12);
}
.fc-story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.75,.2,1);
}
.fc-story-lead:hover .fc-story-media img {
  transform: scale(1.04);
}

.fc-story-badge {
  position: absolute;
  top: var(--px-16);
  left: var(--px-16);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: var(--px-5) var(--px-12);
  font-size: var(--px-10);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-100);
  background: color-mix(in srgb,var(--ink-16) 72%,var(--fc-clear));
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 22%,var(--fc-clear));
  border-radius: var(--r-pill);
  backdrop-filter: blur(var(--px-8));
  -webkit-backdrop-filter: blur(var(--px-8));
}

.fc-story-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--px-32) var(--px-28) var(--px-24);
  background: var(--ink-16);
}

.fc-story-quote-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--px-32);
  height: var(--px-32);
  margin-bottom: var(--px-14);
  color: var(--teal-74);
  opacity: 0.95;
}
.fc-story-quote-mark svg {
  width: var(--px-28);
  height: var(--px-28);
  fill: currentColor;
}

.fc-story-quote {
  font-size: clamp(var(--px-18), 1.6vw, var(--px-22));
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--fg-100);
  margin: 0 0 var(--px-14);
  transition: color .2s ease;
}
.fc-story-lead:hover .fc-story-quote {
  color: var(--mint-75);
}

.fc-story-desc {
  font-size: var(--px-14);
  line-height: 1.5;
  color: var(--fg-71);
  margin: 0;
}

.fc-story-footer {
  margin-top: var(--px-24);
  padding-top: var(--px-18);
  border-top: var(--px-1) solid color-mix(in srgb,var(--fg-100) 7%,var(--fc-clear));
}

.fc-story-author {
  display: flex;
  align-items: center;
  gap: var(--px-12);
  margin-bottom: var(--px-12);
}
.fc-story-avatar {
  width: var(--px-42);
  height: var(--px-42);
  border-radius: 50%;
  object-fit: cover;
  border: var(--px-1_5) solid color-mix(in srgb,var(--teal-74) var(--a-50),var(--fc-clear));
}
.fc-story-author-info {
  display: flex;
  flex-direction: column;
  gap: var(--px-2);
}
.fc-story-author-name {
  font-size: var(--px-14);
  font-weight: 600;
  color: var(--fg-100);
  line-height: 1.2;
}
.fc-story-author-role {
  font-size: var(--px-12);
  color: var(--sage-71);
  line-height: 1.2;
}

.fc-story-meta {
  display: flex;
  align-items: center;
  gap: var(--px-12);
  font-size: var(--px-12);
  color: var(--fg-57);
}
.fc-story-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--px-5);
}
.fc-story-meta-item svg {
  width: var(--px-13);
  height: var(--px-13);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* --- Right Column Stack --- */
.fc-stories-stack {
  display: flex;
  flex-direction: column;
  gap: var(--px-18);
  height: 100%;
}

.fc-story-side-card {
  flex: 1;
  background: var(--ink-16);
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear));
  border-radius: var(--px-20);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.fc-story-side-card:hover {
  border-color: color-mix(in srgb,var(--teal-74) var(--a-40),var(--fc-clear));
  box-shadow: 0 var(--px-14) var(--px-32) color-mix(in srgb,var(--ink-00) var(--a-40),var(--fc-clear));
}

.fc-story-side-link {
  display: grid;
  grid-template-columns: 1fr var(--px-160);
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.fc-story-side-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--px-24) var(--px-22);
  gap: var(--px-16);
}

.fc-story-side-title {
  font-size: clamp(var(--px-16), 1.25vw, var(--px-18));
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--fg-100);
  margin: 0;
  transition: color .2s ease;
}
.fc-story-side-card:hover .fc-story-side-title {
  color: var(--mint-75);
}

.fc-story-side-meta {
  display: flex;
  align-items: center;
  gap: var(--px-12);
  font-size: var(--px-12);
  color: var(--fg-65);
}

.fc-story-side-media {
  position: relative;
  overflow: hidden;
  background: var(--ink-12);
}
.fc-story-side-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.75,.2,1);
}
.fc-story-side-card:hover .fc-story-side-media img {
  transform: scale(1.06);
}

/* --- Responsive Breakpoints --- */
@media(max-width: 1023px) {
  .fc-stories-grid {
    grid-template-columns: 1fr;
    gap: var(--px-18);
  }
  .fc-story-lead {
    grid-template-columns: 1fr;
  }
  .fc-story-media {
    min-height: var(--px-288);
  }
  .fc-story-content {
    padding: var(--px-24) var(--px-22) var(--px-20);
  }
  .fc-story-side-link {
    grid-template-columns: 1fr var(--px-150);
    min-height: var(--px-128);
  }
}

@media(max-width: 640px) {
  .fc-stories-section {
    margin-top: var(--px-48);
    padding: 0 var(--px-16);
  }
  .fc-stories-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--px-14);
    margin-bottom: var(--px-20);
  }
  .fc-stories-title {
    font-size: var(--px-24);
  }
  .fc-stories-all-link {
    align-self: flex-start;
    padding: var(--px-8) var(--px-16);
    font-size: var(--px-13);
  }
  .fc-story-media {
    min-height: var(--px-220);
  }
  .fc-story-quote {
    font-size: var(--px-18);
  }
  .fc-story-desc {
    font-size: var(--px-13);
  }
  .fc-story-side-link {
    grid-template-columns: 1fr var(--px-112);
    min-height: var(--px-112);
  }
  .fc-story-side-body {
    padding: var(--px-16) var(--px-16);
    gap: var(--px-12);
  }
  .fc-story-side-title {
    font-size: var(--px-15);
  }
}

/* ==========================================================================
   PHILOSOPHY BANNER SECTION (Дизайн — это не просто про красоту)
   ========================================================================== */
.fc-philosophy-section {
  max-width: var(--fc-max);
  margin: var(--px-72) auto 0;
  padding: 0 var(--px-24);
}

.fc-philosophy-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: var(--px-40);
  align-items: center;
  background: radial-gradient(circle at 90% 50%, color-mix(in srgb,var(--teal-74) 12%,var(--fc-clear)), transparent 55%), var(--ink-16);
  border: var(--px-1) solid color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear));
  border-radius: var(--px-20);
  padding: var(--px-42) var(--px-320) var(--px-42) var(--px-48);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.fc-philosophy-card:hover {
  border-color: color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear));
  box-shadow: 0 var(--px-16) var(--px-40) color-mix(in srgb,var(--ink-00) var(--a-45),var(--fc-clear));
}

.fc-philosophy-h {
  font-size: clamp(var(--px-22), 2.1vw, var(--px-28));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg-100);
  margin: 0;
}

.fc-philosophy-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--px-20);
}

.fc-philosophy-p {
  font-size: var(--px-14);
  line-height: 1.55;
  color: var(--fg-71);
  margin: 0;
}

.fc-philosophy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--px-8);
  align-self: flex-start;
  padding: var(--px-10) var(--px-22);
  background: color-mix(in srgb,var(--ink-16) 65%,var(--fc-clear));
  border: var(--px-1_5) solid var(--teal-74);
  border-radius: var(--r-pill);
  font-size: var(--px-13);
  font-weight: 500;
  color: var(--fg-100);
  text-decoration: none;
  white-space: nowrap;
  transition: all .25s ease;
}
.fc-philosophy-btn .fc-philosophy-arrow {
  display: inline-block;
  transition: transform .25s ease;
  color: var(--teal-74);
}
.fc-philosophy-btn:hover {
  background: color-mix(in srgb,var(--teal-74) 15%,var(--fc-clear));
  border-color: var(--mint-75);
  box-shadow: 0 0 var(--px-20) color-mix(in srgb,var(--teal-74) 35%,var(--fc-clear));
  color: var(--fg-100);
  text-decoration: none;
}
.fc-philosophy-btn:hover .fc-philosophy-arrow {
  transform: translateX(var(--px-4));
  color: var(--fg-100);
}

.fc-philosophy-media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--px-320);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}
.fc-philosophy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28%);
  mask-image: linear-gradient(to right, transparent 0%, black 28%);
  transition: transform .6s cubic-bezier(.2,.75,.2,1);
}
.fc-philosophy-card:hover .fc-philosophy-img {
  transform: scale(1.04);
}

@media(max-width: 1080px) {
  .fc-philosophy-card {
    grid-template-columns: 1fr;
    padding: var(--px-36) var(--px-32);
    gap: var(--px-24);
  }
  .fc-philosophy-media {
    position: relative;
    width: 100%;
    height: var(--px-190);
    margin-top: var(--px-8);
    justify-content: center;
  }
  .fc-philosophy-img {
    max-width: var(--px-288);
    -webkit-mask-image: radial-gradient(circle, black 65%, transparent 100%);
    mask-image: radial-gradient(circle, black 65%, transparent 100%);
  }
}

@media(max-width: 640px) {
  .fc-philosophy-section {
    margin-top: var(--px-48);
    padding: 0 var(--px-16);
  }
  .fc-philosophy-card {
    padding: var(--px-26) var(--px-20);
    gap: var(--px-18);
  }
  .fc-philosophy-h {
    font-size: var(--px-20);
  }
  .fc-philosophy-btn {
    width: 100%;
    justify-content: center;
  }
  .fc-philosophy-media {
    height: var(--px-170);
  }
  .fc-philosophy-img {
    max-width: var(--px-240);
  }
}

/* ==========================================================================
   DESIGN SYSTEM: HEADINGS (Дизайн-система заголовков FormaCraft)
   ========================================================================== */
.fc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--px-24);
  margin-top: clamp(var(--px-24), 3vw, var(--px-40));
  margin-bottom: clamp(var(--px-28), 3.5vw, var(--px-44));
  position: relative;
}

.fc-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--px-8);
}

.fc-head .fc-eyebrow,
.fc-stories-head-left .fc-eyebrow {
  margin: 0 0 var(--px-4) 0;
  display: inline-flex;
  padding: var(--px-6) var(--px-16);
  border: var(--px-1) solid var(--fc-color-line, var(--ink-30));
  border-radius: var(--r-pill);
  background: color-mix(in srgb,var(--lav-78) 6%,var(--fc-clear));
  font-size: var(--px-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-color-accent, var(--lav-78));
  font-weight: 500;
}

.fc-h2,
.fc-stories-title,
.fc-philosophy-h,
.fc-cta-h {
  font-family: var(--ff-sans, Geist, system-ui, -apple-system, sans-serif);
  font-weight: 300;
  font-size: clamp(var(--px-28), 3.4vw, var(--px-44));
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--fg-100);
  margin: 0;
  max-width: clamp(28rem, 45vw, 42rem);
}

.fc-h2 em,
.fc-stories-title em,
.fc-philosophy-h em,
.fc-cta-h em {
  font-style: normal;
  background: linear-gradient(90deg, var(--lav-89) 0%, var(--lav-78) 45%, var(--amber-72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fc-rule {
  display: none !important;
}

/* Кнопки и ссылки в шапках секций */
.fc-head .fc-all {
  font-size: var(--px-14);
  font-weight: 500;
  color: var(--teal-74);
  display: inline-flex;
  align-items: center;
  gap: var(--px-8);
  padding: var(--px-8) var(--px-18);
  border-radius: var(--r-pill);
  border: var(--px-1) solid color-mix(in srgb,var(--teal-74) 30%,var(--fc-clear));
  background: color-mix(in srgb,var(--teal-74) 6%,var(--fc-clear));
  transition: all .25s ease;
  white-space: nowrap;
}
.fc-head .fc-all:hover {
  background: color-mix(in srgb,var(--teal-74) 16%,var(--fc-clear));
  border-color: color-mix(in srgb,var(--teal-74) 60%,var(--fc-clear));
  color: var(--fg-100);
  box-shadow: 0 0 var(--px-16) color-mix(in srgb,var(--teal-74) 25%,var(--fc-clear));
  transform: translateY(calc(var(--px-1)*-1));
}
.fc-head .fc-all svg {
  transition: transform .25s ease;
}
.fc-head .fc-all:hover svg {
  transform: translateX(var(--px-3));
}

/* Специфика секции историй */
.fc-stories-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--px-24);
  margin-bottom: clamp(var(--px-28), 3.5vw, var(--px-44));
}
.fc-stories-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--px-8);
}
.fc-stories-title {
  font-size: clamp(var(--px-28), 3.4vw, var(--px-44));
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--fg-100);
  margin: 0;
  max-width: 36rem;
}

.fc-philosophy-h {
  font-size: clamp(var(--px-26), 2.8vw, var(--px-38));
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fc-cta-h {
  font-size: clamp(var(--px-26), 2.8vw, var(--px-36));
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 34rem;
}

/* Стили кнопки подзагрузки в Популярных статьях */
.fc-load-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(var(--px-32), 4vw, var(--px-52));
  width: 100%;
}
.fc-load-more-btn {
  cursor: pointer;
  height: var(--px-54);
  padding: 0 var(--px-36);
  font-size: var(--px-14);
  font-weight: 500;
  gap: var(--px-10);
  border-color: color-mix(in srgb,var(--lav-78) var(--a-45),var(--fc-clear));
  transition: all .35s ease;
  font-family: var(--ff-sans, Geist, sans-serif);
}
.fc-load-more-btn:hover {
  transform: translateY(calc(var(--px-2)*-1));
  border-color: var(--lav-78);
  box-shadow: 0 0 var(--px-24) color-mix(in srgb,var(--lav-78) var(--a-45),var(--fc-clear));
}
.fc-load-more-btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
}
.fc-load-more-btn.is-done {
  opacity: 0.65;
  cursor: default;
  border-color: color-mix(in srgb,var(--fg-100) 15%,var(--fc-clear));
  box-shadow: none;
  transform: none;
}
.fc-load-more-btn .fc-btn-spinner {
  width: var(--px-16);
  height: var(--px-16);
  border: var(--px-2) solid color-mix(in srgb,var(--fg-100) 30%,var(--fc-clear));
  border-top-color: var(--fg-100);
  border-radius: 50%;
  animation: fc-spin .6s linear infinite;
  display: inline-block;
}
@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

@keyframes fcCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--px-22));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fc-card-fade-in {
  animation: fcCardFadeIn .55s cubic-bezier(.2,.75,.2,1) both;
}

@media (max-width: 768px) {
  .fc-head, .fc-stories-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--px-16);
  }
  .fc-h2, .fc-stories-title, .fc-philosophy-h, .fc-cta-h {
    font-size: var(--px-26);
    max-width: 100%;
  }
}



/* ==========================================================================
   POPULAR EDITORIAL GRID SECTION STYLES (from live theme)
   ========================================================================== */
.fc-pop-grid, .fc-pop-main, .fc-pop-col, .fc-pop-duo, .fc-side {
  display: grid;
  gap: var(--fc-space-20, var(--px-20));
}
@media (min-width: 1280px) {
  .fc-pop-grid {
    grid-template-columns: 1fr var(--fc-w-340, var(--px-340));
  }
}
@media (min-width: 1024px) {
  .fc-pop-main {
    grid-template-columns: 1fr 1fr;
  }
}
.fc-pop-col {
  grid-template-rows: auto 1fr;
}
.fc-pop-duo {
  align-items: stretch;
}
@media (min-width: 640px) {
  .fc-pop-duo {
    grid-template-columns: 1fr 1fr;
  }
}
/* в .fc-side одна картинка: всегда одна колонка, иначе половина блока пустая */
.fc-side {
  grid-template-columns: 1fr;
}
@media (min-width: 1280px) {
  .fc-side {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}
.fc-pop {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--fc-bw-hair, var(--px-1)) solid var(--fc-line, color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear)));
  border-radius: var(--fc-radius-md, var(--px-12));
  background: var(--fc-card, var(--teal-20));
  transition: border-color var(--fc-dur-fast, 0.2s);
}
.fc-pop:hover {
  border-color: var(--fc-mix-card-edge, color-mix(in srgb,var(--lav-67) 35%,var(--fc-clear)));
}
.fc-pop-media {
  position: relative;
  height: var(--fc-h-160, var(--px-160));
  overflow: hidden;
}
.fc-pop-lg .fc-pop-media {
  height: var(--fc-h-240, var(--px-240));
}
.fc-pop-sm .fc-pop-media {
  height: var(--fc-h-128, var(--px-128));
}
@media (min-width: 640px) {
  .fc-pop-lg .fc-pop-media {
    height: var(--fc-h-288, var(--px-288));
  }
}
.fc-pop-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.fc-pop:hover .fc-pop-media img {
  transform: scale(1.05);
}
.fc-chip {
  position: absolute;
  left: var(--fc-pos-16, var(--px-16));
  top: var(--fc-pos-16, var(--px-16));
  margin: 0;
  z-index: 1;
}
.fc-chip a {
  display: inline-block;
  padding: var(--fc-space-6, var(--px-6)) var(--fc-space-12, var(--px-12));
  border: var(--fc-bw-hair, var(--px-1)) solid var(--fc-acc, var(--lav-51));
  border-radius: var(--fc-radius-pill, var(--r-pill));
  background: var(--fc-mix-chip-bg, color-mix(in srgb,var(--teal-20) var(--a-70),var(--fc-clear)));
  -webkit-backdrop-filter: blur(var(--fc-fx-8, var(--px-8)));
  backdrop-filter: blur(var(--fc-fx-8, var(--px-8)));
  font-size: var(--fc-text-xs, var(--px-10));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-acc-hi, var(--lav-78));
}
.fc-chip a[href*="/category/sajty/"], .fc-chip a[href*="/category/kejsy/"] {
  border-color: var(--leaf-71, var(--leaf-71));
  color: var(--leaf-77, var(--mint-75));
}
.fc-chip a[href*="/category/magaziny/"], .fc-chip a[href*="/category/zapis-i-podderzhka/"] {
  border-color: var(--sand-76, var(--amber-72));
  color: var(--fc-color-focus-join, var(--fg-94));
}
.fc-chip a[href*="/category/prilozheniya/"], .fc-chip a[href*="/category/zakazchiku/"] {
  border-color: var(--copper-73, var(--copper-64));
  color: var(--copper-80, var(--amber-72));
}
.fc-chip a[href*="/category/redizajn/"] {
  border-color: var(--blue-73, var(--blue-73));
  color: var(--blue-73, var(--blue-73));
}
.fc-pop-sm .fc-chip {
  left: var(--fc-pos-12, var(--px-12));
  top: var(--fc-pos-12, var(--px-12));
}
.fc-pop-sm .fc-chip a {
  padding: var(--px-4) var(--fc-space-10, var(--px-10));
}
.fc-pop-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--fc-space-20, var(--px-20));
}
.fc-pop-lg .fc-pop-body {
  padding: var(--fc-space-24, var(--px-24));
}
.fc-pop-sm .fc-pop-body {
  padding: var(--fc-space-16, var(--px-16));
}
.fc-pop-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-12, var(--px-12));
  font-size: var(--fc-text-xs, var(--px-12));
  color: var(--fc-color-muted, var(--fg-65));
}
.fc-reading {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-6, var(--px-6));
}
.fc-reading .fc-ico {
  width: var(--fc-icon-xs, var(--px-13));
  height: var(--fc-icon-xs, var(--px-13));
}
.fc-pop-t {
  margin: var(--fc-space-8, var(--px-8)) 0 0;
  font-size: var(--fc-text-lg, var(--px-18));
  font-weight: 400;
  line-height: 1.35;
}
.fc-pop-lg .fc-pop-t {
  margin-top: var(--fc-space-12, var(--px-12));
  font-size: clamp(var(--fc-text-20, var(--px-20)), 2vw, var(--fc-text-24, var(--px-24)));
  line-height: 1.3;
}
.fc-pop-sm .fc-pop-t {
  font-size: var(--fc-text-sm, var(--px-14));
}
.fc-pop-t a {
  color: var(--fc-color-text-strong, var(--fg-97));
  text-decoration: none;
}
.fc-pop-t a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fc-pop-x {
  margin: var(--fc-space-12, var(--px-12)) 0 0;
  font-size: var(--fc-text-sm, var(--px-14));
  line-height: 1.6;
  color: var(--fc-color-text-soft, var(--teal-83));
}
.fc-pop-go {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-8, var(--px-8));
  margin-top: auto;
  padding-top: var(--fc-space-24, var(--px-24));
  font-size: var(--fc-text-sm, var(--px-14));
  color: var(--fc-acc-hi, var(--lav-78));
}
.fc-pop-go .fc-ico {
  width: var(--fc-icon-sm, var(--px-16));
  height: var(--fc-icon-sm, var(--px-16));
}
.fc-tg {
  position: relative;
  overflow: hidden;
  padding: var(--fc-space-24, var(--px-24));
  border: var(--fc-bw-hair, var(--px-1)) solid var(--fc-color-line, color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear)));
  border-radius: var(--fc-radius-md, var(--px-12));
  background: linear-gradient(135deg, color-mix(in srgb, var(--lav-61, var(--lav-78)) 16%, transparent), var(--fc-color-surface, var(--teal-20)) 55%);
}
.fc-tg-ico {
  position: absolute;
  right: var(--fc-space-20, var(--px-20));
  top: var(--fc-space-20, var(--px-20));
  width: var(--fc-icon-xl, var(--px-28));
  height: var(--fc-icon-xl, var(--px-28));
  transform: rotate(-12deg);
  color: var(--fc-acc-hi, var(--lav-78));
  filter: drop-shadow(0 0 var(--fc-fx-16, var(--px-16)) var(--fc-mix-outline-glow, color-mix(in srgb,var(--lav-78) var(--a-40),var(--fc-clear))));
}
.fc-tg-h {
  margin: 0;
  max-width: var(--fc-measure-200, var(--px-200));
  font-size: var(--fc-text-20, var(--px-20));
  font-weight: 400;
  line-height: 1.3;
  color: var(--fc-color-text-strong, var(--fg-97));
}
.fc-tg-p {
  margin: var(--fc-space-12, var(--px-12)) 0 0;
  font-size: var(--fc-text-sm, var(--px-14));
  line-height: 1.6;
  color: var(--fc-color-text-soft, var(--teal-83));
}
.fc-tg-act {
  margin-top: var(--fc-space-20, var(--px-20));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--px-38);
  padding: 0 var(--px-16);
  border-radius: var(--r-pill);
  font-size: var(--px-13);
}
.fc-side-img {
  position: relative;
  min-height: var(--fc-h-380, var(--px-380));
  overflow: hidden;
  border: var(--fc-bw-hair, var(--px-1)) solid var(--fc-line, color-mix(in srgb,var(--fg-100) 8%,var(--fc-clear)));
  border-radius: var(--fc-radius-md, var(--px-12));
  background: var(--fc-card, var(--teal-20));
}
.fc-side-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  opacity: 0.8;
}
.fc-side-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-12, var(--ink-16)) 70%, transparent), transparent 40%, color-mix(in srgb, var(--ink-12, var(--ink-16)) 80%, transparent));
}
.fc-side-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--fc-space-24, var(--px-24));
  transform: rotate(-6deg);
  text-align: center;
  font: 400 var(--fc-text-24, var(--px-24))/1.3 Caveat, "Segoe Print", cursive;
  color: var(--fc-color-link, var(--lav-71));
}
.fc-side-btn {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--fc-pos-24, var(--px-24));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-8, var(--px-8));
  height: var(--fc-h-44, var(--px-44));
  padding: 0 var(--fc-space-24, var(--px-24));
  border: var(--fc-bw-base, var(--px-1)) solid var(--fc-acc-hi, var(--lav-78));
  border-radius: var(--fc-radius-pill, var(--r-pill));
  background: color-mix(in srgb, var(--ink-12, var(--ink-16)) 80%, transparent);
  -webkit-backdrop-filter: blur(var(--fc-fx-8, var(--px-8)));
  backdrop-filter: blur(var(--fc-fx-8, var(--px-8)));
  white-space: nowrap;
  font-size: var(--fc-text-sm, var(--px-14));
  color: var(--fc-color-btn-text, var(--fg-100));
  text-decoration: none;
}
.fc-side-btn .fc-ico {
  width: var(--fc-icon-sm, var(--px-16));
  height: var(--fc-icon-sm, var(--px-16));
}

#popular.fc-section {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
#popular .fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fc-space-24, var(--px-24));
}
#popular .fc-h2 {
  display: flex !important;
  align-items: center !important;
  gap: var(--fc-space-16, var(--px-16)) !important;
  font-size: clamp(var(--px-22), 2.4vw, var(--px-28)) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  color: var(--fc-color-text-strong, var(--fg-97)) !important;
  margin: 0 !important;
}
#popular .fc-rule {
  display: inline-block !important;
  vertical-align: middle !important;
  width: var(--fc-w-40, var(--px-40)) !important;
  height: var(--px-1) !important;
  background: var(--fc-acc, var(--lav-51)) !important;
}
#popular .fc-all {
  display: inline-flex;
  align-items: center;
  gap: var(--px-8);
  font-size: var(--px-14);
  color: var(--fc-acc-hi, var(--lav-71));
  text-decoration: none;
}
#popular .fc-all:hover {
  color: var(--fg-100);
}


/* «Последние публикации» — 3 в ряд; «Все публикации» — 4 в ряд и кнопка «Показать ещё» */
@media (min-width: 1200px) {
  .fc-blog .wp-block-post-template.fc-grid.fc-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.fc-blog .fc-loadmore {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}
.fc-blog .fc-loadmore[hidden] { display: none; }
.fc-blog .fc-loadmore-btn { cursor: pointer; }
.fc-blog .fc-loadmore-btn[disabled] { opacity: var(--a-70); cursor: progress; }

/* ==========================================================================
   card-290: чипы тем под hero, блок «Главная статья» (главная и три боковые)
   Значения — токены темы; брейкпоинты — литералами, как в forma-blog.css.
   ========================================================================== */
.fc-topics-wrap {
  max-width: var(--fc-max);
  margin-inline: auto;
  padding-inline: var(--fc-pad);
  padding-block: 0 var(--fc-space-40);
}
.fc-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-10);
}
.fc-topic {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-8);
  padding: var(--fc-space-8) var(--fc-space-16);
  border: var(--fc-bw-hair) solid var(--fc-color-line-soft);
  border-radius: var(--fc-radius-pill);
  background: var(--fc-card);
  font-size: var(--fc-text-sm);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--fc-color-text-soft);
  transition: border-color var(--fc-dur-base) var(--fc-ease), color var(--fc-dur-base) var(--fc-ease);
}
.fc-topic:hover {
  border-color: var(--fc-acc-hi);
  color: var(--fc-color-text-strong);
}
.fc-topic.is-active {
  border-color: var(--fc-acc-hi);
  background: color-mix(in srgb, var(--fc-color-accent-strong) 14%, var(--fc-clear));
  color: var(--fc-color-text-strong);
}
.fc-topic .fc-ico {
  width: var(--fc-icon-sm);
  height: var(--fc-icon-sm);
}

/* ==========================================================================
   card-291: блок «Истории людей, которые делают продукты» — большая карточка с цитатой и две малые
   Значения — токены темы; брейкпоинты — литералами, как в forma-blog.css.
   ========================================================================== */
.fc-stories-grid {
  display: grid;
  gap: var(--fc-space-20);
}
@media (min-width: 1024px) {
  .fc-stories-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.fc-story-main {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--fc-bw-hair) solid var(--fc-card-line);
  border-radius: var(--fc-card-radius);
  background: var(--fc-card-bg);
}
.fc-story-media {
  position: relative;
  height: var(--fc-h-240);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .fc-story-media {
    height: var(--fc-h-380);
  }
}
.fc-story-img {
  position: absolute;
  inset: 0;
  display: block;
}
.fc-story-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transition: transform var(--fc-dur-slow) var(--fc-ease);
}
.fc-story-main:hover .fc-story-img img {
  transform: scale(1.04);
}
.fc-story-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--fc-space-28) var(--fc-space-34) var(--fc-space-24);
}
.fc-story-quote {
  display: flex;
  gap: var(--fc-space-16);
  margin: 0;
  font-size: clamp(var(--fc-text-24), 2.4vw, var(--fc-text-34));
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--fc-color-text-strong);
}
.fc-story-quote b {
  flex: 0 0 auto;
  font-size: var(--fc-text-60);
  font-weight: 400;
  line-height: .72;
  color: var(--fc-acc-hi);
}
.fc-story-text {
  max-width: var(--fc-measure-420);
  margin: var(--fc-space-24) 0 0;
  font-size: var(--fc-text-sm);
  line-height: 1.6;
  color: var(--fc-color-muted);
}
.fc-story-t {
  margin: var(--fc-space-24) 0 0;
  font-size: var(--fc-text-20);
  font-weight: 400;
  line-height: 1.35;
}
.fc-story-t a {
  color: var(--fc-color-text-strong);
}
.fc-story-t a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fc-story-body .fc-pop-meta {
  margin-top: auto;
  padding-top: var(--fc-space-24);
}
.fc-stories-side {
  display: grid;
  align-content: start;
  gap: var(--fc-space-20);
}
.fc-scard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: var(--fc-space-16);
  padding: var(--fc-space-12);
  border: var(--fc-bw-hair) solid var(--fc-card-line);
  border-radius: var(--fc-card-radius);
  background: var(--fc-card-bg);
}
.fc-scard-body {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-8);
  min-width: 0;
}
.fc-scard-t {
  margin: 0;
  font-size: var(--fc-text-sm);
  font-weight: 400;
  line-height: 1.35;
}
.fc-scard-t a {
  color: var(--fc-color-text-strong);
}
.fc-scard-t a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fc-scard-img {
  position: relative;
  display: block;
  min-height: var(--fc-h-128);
  overflow: hidden;
  border-radius: var(--fc-radius-md);
}
.fc-scard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-stories .fc-scard-body .fc-pop-meta {
  font-size: var(--fc-text-xs);
}

/* ==========================================================================
   card-298: порядок в блоке «Истории»
   Абзацы от автоформатирования внутри карточек занимали колонку сетки — растворены (display: contents);
   боковые карточки делят высоту большой поровну (блок «Главная статья» перенесён в forma-blog-feature.css).
   ========================================================================== */
.fc-scard > p {
  display: contents;
}
.fc-scard-body {
  align-self: center;
}
.fc-scard-body .fc-pop-meta {
  justify-content: flex-start;
  gap: var(--fc-space-16);
  flex-wrap: wrap;
  row-gap: var(--fc-space-8);
}
.fc-scard-body .fc-pop-meta > * {
  white-space: nowrap;
}
.fc-h2 {
  text-wrap: balance;
}
.fc-story-quote {
  font-size: clamp(var(--fc-text-20), 1.9vw, var(--fc-text-28));
}
@media (min-width: 1024px) {
  .fc-stories-side {
    align-content: stretch;
    grid-auto-rows: 1fr;
  }
  .fc-scard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--fc-space-16);
  }
  .fc-scard-img {
    order: -1;
    min-height: 0;
  }
  .fc-scard-t {
    font-size: var(--fc-text-md);
  }
}

/* ==========================================================================
   card-307: баннер героя главной блога в формате рубрик, панель рубрик вынесена под герой
   ========================================================================== */
.fc-blog-hero.fc-cat-hero-wide {
  min-height: 0;
  padding-block: var(--fc-space-24) 0;
  flex-direction: row;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .fc-blog-hero.fc-cat-hero-wide {
    min-height: var(--fc-h-520, 32.5rem);
    display: flex;
    align-items: center;
  }
}

/* card-298: мобильная шапка под липкой панелью не просвечивает контент */
@media (max-width: 1023px) {
  body:has(#fc-stickbar.is-on) .site-header {
    background: color-mix(in srgb, var(--fc-bg, #05050a) 98%, transparent);
    backdrop-filter: blur(14px);
  }
  body:has(#fc-stickbar.is-on) .site-nav {
    background: color-mix(in srgb, var(--fc-bg, #05050a) 98%, transparent);
    backdrop-filter: blur(14px);
  }
}