/* Страница кукол использует тот же редакционный язык, что и SEO-статьи. */
body.mascot-page {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 211, 163, .32) 0 12px, transparent 13px),
    radial-gradient(circle at 27% 31%, rgba(197, 226, 216, .30) 0 7px, transparent 8px),
    radial-gradient(circle at 52% 9%, rgba(218, 198, 238, .30) 0 15px, transparent 16px),
    radial-gradient(circle at 75% 27%, rgba(255, 224, 159, .28) 0 9px, transparent 10px),
    radial-gradient(circle at 91% 13%, rgba(244, 198, 210, .28) 0 18px, transparent 19px),
    radial-gradient(circle at 14% 77%, rgba(225, 204, 243, .28) 0 8px, transparent 9px),
    radial-gradient(circle at 43% 67%, rgba(255, 213, 165, .26) 0 19px, transparent 20px),
    radial-gradient(circle at 66% 88%, rgba(184, 222, 214, .28) 0 11px, transparent 12px),
    radial-gradient(circle at 89% 72%, rgba(246, 195, 209, .25) 0 7px, transparent 8px);
  background-size: 660px 560px;
  background-attachment: fixed;
}
.mascot-article-hero {
  padding-bottom: clamp(72px, 9vw, 122px);
  background: transparent;
}

.mascot-article-hero .hero-copy { padding-top: 0; }
.mascot-article-hero h1 em { color: var(--violet); }
.mascot-page .instagram-link svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.9; }
.mascot-page .instagram-link .instagram-dot { fill: #fff; stroke: none; }
.mascot-article-hero .hero-media.article-poster {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.mascot-article-hero .article-poster > img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 44% 58%;
  border-radius: 20px;
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
  transform: scale(1.18);
  transform-origin: 44% 58%;
}

.mascot-catalog--first {
  position: relative;
  isolation: isolate;
  padding: 0 clamp(24px, 3vw, 56px) clamp(88px, 10vw, 132px);
  overflow: hidden;
  background: transparent;
}
.mascot-catalog--first .mascot-section-head { display: none; }
.mascot-catalog--first .mascot-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  max-width: 1720px;
  margin: 0 auto;
}
.mascot-catalog--first .mascot-card,
.mascot-catalog--first .mascot-card:nth-child(n) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: none;
  transform: none;
}
.mascot-catalog--first .mascot-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  cursor: zoom-in;
}
.mascot-catalog--first .mascot-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
}
.mascot-catalog--first .mascot-photo span { display: none; }
.mascot-catalog--first .mascot-card-copy { padding: 18px 20px 22px; }
.mascot-catalog--first .mascot-card-copy p { margin: 0 0 8px; color: var(--violet-dark); }
.mascot-catalog--first .mascot-card-copy h3 { margin: 0; font-size: clamp(25px, 2.2vw, 34px); }
.mascot-catalog--first .mascot-choice { display: none; }
.mascot-catalog-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1720px;
  margin: clamp(24px, 3vw, 42px) auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.mascot-catalog-note p { max-width: 660px; margin: 0; font-size: 15px; line-height: 1.55; }
.mascot-catalog-note .button { flex: 0 0 auto; }

@media (max-width: 980px) {
  .mascot-catalog--first .mascot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .mascot-article-hero { padding-bottom: 62px; }
  .mascot-article-hero .hero-media.article-poster { padding: 0; box-shadow: none; }
  .mascot-catalog--first { padding-bottom: 72px; }
  .mascot-catalog--first .mascot-card,
  .mascot-catalog--first .mascot-card:nth-child(n) { border-radius: 22px; }
}

@media (max-width: 540px) {
  .mascot-catalog--first { padding-inline: 18px; }
  .mascot-catalog--first .mascot-grid { grid-template-columns: 1fr; gap: 18px; }
  .mascot-catalog-note { align-items: flex-start; flex-direction: column; gap: 18px; }
}