/* Связывает раздел материалов с визуальной системой основной страницы. */
body {
  color: #4f625e;
  background: #f5f0e8;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  --ink: #18322f;
  --body: #4f625e;
  --paper: #fffdf9;
  --ivory: #f5f0e8;
  --terracotta: #193d37;
  --terracotta-dark: #7c433f;
  --sage: #2f5d55;
  --sage-pale: #e9dfd3;
  --line: rgba(24, 50, 47, .16);
  color: var(--body);
  background:
    radial-gradient(circle at 88% 6%, rgba(47, 93, 85, .09), transparent 29rem),
    var(--ivory);
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: none;
  width: 100%;
  height: auto;
  min-height: 78px;
  margin: 0;
  padding: 14px clamp(20px, 5vw, 80px);
  border-bottom-color: var(--line);
  background: rgba(245, 240, 232, .93);
  backdrop-filter: blur(14px);
}

.brand span {
  color: var(--ink);
  font-size: 1.2rem;
}

.brand small {
  margin-top: 5px;
  color: var(--body);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav {
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
}

.nav a,
.homeLink {
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.homeLink:hover {
  border-bottom-color: var(--wine, #7c433f);
  text-decoration: none;
}

.eyebrow,
.cardEyebrow,
.cardLabel,
.sectionTitle span {
  color: #7c433f;
}

.hero h1,
.sectionHead h2,
.card h2,
.card h3,
.articleHeader h1,
.articleBody h2,
.articleBody h3,
.startCard h2,
.questionCard h2,
.resultHeader h2,
.sectionTitle h3,
.recommendationBody h4,
.articleCard h3,
.consultCard h3,
.about h2,
.faq .sectionTitle h2,
.faqGrid h3 {
  color: var(--ink);
  letter-spacing: -.025em;
}

.lead,
.articleDek,
.questionNote,
.localNote,
.disclaimer,
.progressTop {
  color: var(--body);
}

.heroEditorial {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: clamp(36px, 7vw, 90px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 82px);
}

.heroEditorial h1 {
  max-width: 760px;
}

.heroEditorial .lead {
  max-width: 690px;
}

.heroImage {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(24, 50, 47, .08);
}

.heroImage img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.articlesOnly {
  grid-template-columns: minmax(0, 760px);
}

.card,
.startCard,
.questionCard,
.resultHeader,
.recommendationCard,
.articleCard,
.faqGrid article {
  border-color: var(--line);
  background: rgba(255, 253, 249, .76);
  box-shadow: 0 18px 54px rgba(24, 50, 47, .055);
}

.card {
  border-radius: 18px;
}

.sageCard,
.testCta,
.portionBox,
.positiveCard {
  background: var(--sage-pale);
}

.card > a,
.button,
.primaryButton,
.consultCard a,
.articleCard a {
  border-radius: 999px;
  background: #193d37;
  color: #fffdf9;
  box-shadow: none;
}

.card > a:hover,
.button:hover,
.primaryButton:hover,
.consultCard a:hover,
.articleCard a:hover {
  background: #2f5d55;
  color: #fffdf9;
  text-decoration: none;
}

.homeLink,
.crumbs a,
.sources a,
.footer a,
.backButton,
.textButton,
.backResult,
.sectionLink,
.sourceLinks a {
  color: #7c433f;
}

.answerButton:hover,
.dietOption:hover,
.secondaryButton {
  border-color: #193d37;
}

.answerSelected,
.selectedOption {
  border-color: #193d37;
  background: rgba(47, 93, 85, .08);
  box-shadow: 0 7px 20px rgba(24, 50, 47, .08);
}

.selectedOption span,
.progressTrack span,
.positiveCard > span {
  border-color: #193d37;
  background: #193d37;
}

.startNumber,
.recommendationIndex {
  background: var(--sage-pale);
  color: #193d37;
}

.bmiCard {
  background: #193d37;
}

.bmiCard span {
  color: #dfbeb9;
}

.consultCard {
  background: #e9dfd3;
}

@media (max-width: 760px) {
  .header {
    min-height: 76px;
    padding: 17px 20px;
  }

  .heroEditorial {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .heroEditorial .heroImage {
    max-width: 520px;
  }

  .heroImage img {
    aspect-ratio: 5 / 4;
    object-position: 50% 42%;
  }
}