/* Shared marketing-page typography.
   The homepage is the reference: Funnel Sans for primary headings and Inter
   for the explanatory copy that sits beside or directly below them. */
:root {
  --gw-section-title-family: "Funnel Sans", "Montserrat", sans-serif;
  --gw-section-title-size: 45px;
  --gw-section-title-weight: 750;
  --gw-section-title-line-height: 1.04;
  --gw-section-copy-family: "Inter", "Montserrat", sans-serif;
  --gw-section-copy-size: 18px;
  --gw-section-copy-weight: 400;
  --gw-section-copy-line-height: 1.5;
  --gw-section-copy-color: #676a70;
  --gw-section-copy-width: 600px;
  --gw-feature-title-family: "Funnel Sans", "Montserrat", sans-serif;
  --gw-feature-title-size: clamp(24px, 2.2vw, 32px);
  --gw-feature-title-weight: 750;
  --gw-feature-title-line-height: 1.08;
  --gw-feature-copy-family: "Inter", "Montserrat", sans-serif;
  --gw-feature-copy-size: 16px;
  --gw-feature-copy-weight: 400;
  --gw-feature-copy-line-height: 1.45;
  --gw-feature-copy-color: #747780;
}

:where(.home-page, .about-page, .catalog-page, .delivery-page, .contacts-page, .product-page) h1,
:where(.home-page, .about-page, .catalog-page, .delivery-page, .contacts-page, .product-page) h2 {
  text-wrap: balance;
}

:where(.home-page, .about-page, .catalog-page, .delivery-page, .contacts-page, .product-page) p {
  text-wrap: pretty;
}

/* Homepage reference sections plus equivalent title/copy pairs elsewhere. */
:is(
  .home-page .hm-popular__head h2,
  .home-page .hm-reliability__head h2,
  .home-page .hm-instruction__section-title,
  .home-page .hm-benefits__heading h2,
  .home-page .how-order__left h2,
  .about-page .pencil-hero h1,
  .about-page .pencil-people h2,
  .about-page .pencil-proof__head h2,
  .about-page .pencil-production h2,
  .about-page .pencil-cta h2,
  .catalog-page .catalog-head h1,
  .delivery-page .section-head h2,
  .contacts-page .section-head h2,
  .product-page .product-tabs__head h2
) {
  font-family: var(--gw-section-title-family);
  font-size: var(--gw-section-title-size);
  font-weight: var(--gw-section-title-weight);
  line-height: var(--gw-section-title-line-height);
  letter-spacing: 0;
}

:is(
  .home-page .hm-popular__head > p,
  .home-page .hm-reliability__head > p,
  .home-page .hm-instruction__section-subtitle,
  .home-page .hm-benefits__head > .hm-benefits__intro,
  .home-page .how-order__head > .how-order__desc,
  .about-page .pencil-hero__story,
  .about-page .pencil-people__intro,
  .about-page .pencil-proof__head > p,
  .about-page .pencil-production__intro,
  .about-page .pencil-cta p,
  .catalog-page .catalog-head > p,
  .delivery-page .section-head > p,
  .contacts-page .section-head > p,
  .product-page .product-tabs__head p
) {
  color: var(--gw-section-copy-color);
  font-family: var(--gw-section-copy-family);
  font-size: var(--gw-section-copy-size);
  font-weight: var(--gw-section-copy-weight);
  line-height: var(--gw-section-copy-line-height);
  letter-spacing: 0;
}

/* Reproduce the homepage title/copy composition, not only its type scale:
   a 500px title column and a 600px copy column. On desktop every
   explanatory caption finishes on the same lower line as its title. */
.about-page :is(.pencil-people__head, .pencil-proof__head, .pencil-production__head),
.catalog-page .catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, var(--gw-section-copy-width));
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.about-page :is(.pencil-people__head, .pencil-proof__head) > :last-child,
.about-page .pencil-production__intro,
.catalog-page .catalog-head > p {
  width: 100%;
  max-width: var(--gw-section-copy-width);
  justify-self: end;
  padding-top: 0;
}

/* Keep every explanatory caption anchored to the outer right edge of its
   title row, regardless of whether that row uses flexbox or grid. */
:is(
  .home-page .hm-popular__head > p,
  .home-page .hm-reliability__head > p,
  .home-page .hm-instruction__section-subtitle,
  .home-page .hm-benefits__head > .hm-benefits__intro,
  .home-page .how-order__head > .how-order__desc,
  .delivery-page .section-head > p,
  .contacts-page .section-head > p,
  .product-page .product-tabs__head > p
) {
  width: 100%;
  max-width: var(--gw-section-copy-width);
  flex-basis: var(--gw-section-copy-width);
  margin-left: auto;
  justify-self: end;
}

.catalog-page .catalog-head h1 {
  max-width: 500px;
  color: #333;
}

:is(
  .home-page .hm-popular__head,
  .home-page .hm-reliability__head,
  .home-page .hm-benefits__head,
  .delivery-page .section-head,
  .contacts-page .section-head,
  .product-page .product-tabs__head
) {
  align-items: end;
}

.delivery-page .section-head h2,
.contacts-page .section-head h2 {
  margin-bottom: 0;
}

.home-page .hm-popular__head > p {
  padding-top: 0;
}

/* The benefits block uses the reliability block as its typographic reference.
   Keep the brand colour split, but let the wordmark inherit the heading face
   and posture so it reads as one continuous title. */
.home-page .hm-benefits__heading h2 .hm-benefits__wordmark {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.home-page .hm-benefits__heading h2 .hm-benefits__wordmark :is(.gw-wordmark__gruz, .gw-wordmark__waresy) {
  font-weight: inherit;
}

/* Feature cards repeat the same information hierarchy on the homepage and
   product page. One shared contract prevents near-identical blocks from
   drifting to different fonts, weights and paragraph density. */
:is(
  .home-page .hm-engineering-card__body h3,
  .home-page .hm-benefit__card h3,
  .product-page .product-reliability__body h3
) {
  font-family: var(--gw-feature-title-family);
  font-size: var(--gw-feature-title-size);
  font-weight: var(--gw-feature-title-weight);
  line-height: var(--gw-feature-title-line-height);
  letter-spacing: 0;
}

:is(
  .home-page .hm-engineering-card__body p,
  .home-page .hm-benefit__card p,
  .product-page .product-reliability__body p
) {
  color: var(--gw-feature-copy-color);
  font-family: var(--gw-feature-copy-family);
  font-size: var(--gw-feature-copy-size);
  font-weight: var(--gw-feature-copy-weight);
  line-height: var(--gw-feature-copy-line-height);
  letter-spacing: 0;
}

/* Smaller supporting cards keep their compact scale, while sharing the same
   heading/body font roles used by the main marketing sections. */
:is(
  .delivery-page .step h3,
  .delivery-page .card__body h3,
  .contacts-page .tip-card h3
) {
  font-family: var(--gw-feature-title-family);
  letter-spacing: 0;
}

:is(
  .delivery-page .step p,
  .delivery-page .card__body p,
  .contacts-page .tip-card p
) {
  font-family: var(--gw-feature-copy-family);
  font-weight: var(--gw-feature-copy-weight);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  :root {
    --gw-section-title-size: clamp(28px, 5vw, 34px);
    --gw-section-title-line-height: 1.08;
    --gw-section-copy-size: 15px;
    --gw-feature-title-size: clamp(21px, 4.2vw, 26px);
    --gw-feature-copy-size: 15px;
    --gw-feature-copy-line-height: 1.5;
  }

  .about-page :is(.pencil-people__head, .pencil-proof__head, .pencil-production__head),
  .catalog-page .catalog-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-page :is(.pencil-people__head, .pencil-proof__head) > :last-child,
  .about-page .pencil-production__intro,
  .catalog-page .catalog-head > p {
    max-width: 40rem;
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  :root {
    --gw-section-title-size: clamp(25px, 7.2vw, 30px);
    --gw-section-title-line-height: 1.04;
    --gw-section-copy-size: 14px;
    --gw-section-copy-line-height: 1.45;
    --gw-feature-title-size: clamp(21px, 6vw, 24px);
    --gw-feature-copy-size: 14.5px;
    --gw-feature-copy-line-height: 1.52;
  }

  .about-page :is(.pencil-people__head, .pencil-proof__head, .pencil-production__head),
  .catalog-page .catalog-head {
    margin-bottom: 18px;
  }

  :is(
    .home-page .hm-popular__head,
    .home-page .hm-reliability__head,
    .home-page .hm-benefits__head
  ) {
    align-items: flex-start;
  }
}

/* A desktop caption width must never become a 600px height when its
   parent switches to a column on phones. Reset the flex basis as well
   as the alignment for every shared title/copy pair. */
@media (max-width: 900px) {
  :is(
    .home-page .hm-popular__head > p,
    .home-page .hm-reliability__head > p,
    .home-page .hm-instruction__section-subtitle,
    .home-page .hm-benefits__head > .hm-benefits__intro,
    .home-page .how-order__head > .how-order__desc,
    .delivery-page .section-head > p,
    .contacts-page .section-head > p,
    .product-page .product-tabs__head > p
  ) {
    flex-basis: auto;
    margin-left: 0;
    justify-self: start;
  }
}