/* =========================================================
   4HE / VC.RU TYPOGRAPHY CONTRACT
   Loaded after the page bundles so legacy duplicate rules cannot win.
   ========================================================= */

:root {
  --layout-max-w: 1260px;
  --layout-main-w: 640px;
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  --font-main: var(--font-sans);
  --font-display: var(--font-sans);
  --text: #000;
  --title: #000;
  --text-soft: #595959;
  --text-fade: #777;
}

.theme-dark {
  --text: #f3f6fb;
  --title: #f3f6fb;
  --text-soft: #c9ced6;
  --text-fade: #9ba3ae;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  color: var(--text);
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: normal;
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: normal;
}

/* The central reading column and matching header search return to 640px. */
.cols {
  max-width: var(--layout-max-w);
  grid-template-columns: var(--layout-left-w) minmax(0, var(--layout-main-w)) var(--layout-right-w);
}

.site-header__inner {
  max-width: var(--layout-max-w);
  grid-template-columns: minmax(0, 1fr) minmax(320px, var(--layout-main-w)) minmax(0, 1fr);
}

/* vc.ru feed/article title: Roboto Medium, 20/26, no negative tracking. */
.feed-card__title,
.short_story .feed-card__title,
.feed-card__title--full,
.full_story .feed-card__title--full {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: normal;
}

.short_story .feed-card__title,
.full_story .feed-card__title--full {
  margin-top: 16px;
}

/* vc.ru reading text: true Roboto Regular, pure black, 17/26. */
.feed-card__excerpt,
.short_story .feed-card__excerpt,
.full_text,
.full_story .full_text {
  color: var(--text);
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: normal;
}

.short_story .feed-card__continue {
  margin-top: 6px;
  color: var(--accent-main);
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: normal;
}

.feed-card__identity-name {
  font-weight: 500;
}

.side_menu_item {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: normal;
}

.ui-page-heading,
.category-head__title,
.page-head__title {
  letter-spacing: normal;
}

/* Category card: no decorative cover; content left, category avatar top-right. */
.category-head__cover {
  display: none !important;
}

.category-head__body {
  padding: 20px;
}

.category-head__identity {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: start;
  gap: 20px;
  margin-top: 0;
}

.category-head__main {
  min-width: 0;
  padding-top: 0;
}

.category-head__avatar {
  width: 76px;
  height: 76px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: none;
}

@media screen and (max-width: 1290px) {
  .cols,
  .site-header__inner {
    max-width: 950px;
  }

  .cols {
    grid-template-columns: var(--layout-left-w) minmax(0, var(--layout-main-w));
  }
}

@media screen and (max-width: 1042px) {
  .site-header__inner {
    max-width: none;
  }

  .cols {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (min-width: 700px) and (max-width: 1042px) {
  .cols {
    width: calc(100% - 32px);
    max-width: var(--layout-main-w);
  }
}

@media screen and (max-width: 768px) {
  .category-head__body {
    padding: 18px 16px 15px;
  }

  .category-head__identity {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 16px;
    margin-top: 0;
  }

  .category-head__avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .category-head__main {
    padding-top: 0;
  }
}

@media screen and (max-width: 640px) {
  .category-head {
    border-radius: 18px;
  }

  .category-head__body {
    padding: 16px 14px 14px;
  }

  .category-head__identity {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 12px;
    margin-top: 0;
  }

  .category-head__avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .category-head__main {
    padding-top: 0;
  }

  .feed-card__title,
  .short_story .feed-card__title,
  .feed-card__title--full,
  .full_story .feed-card__title--full {
    font-size: 20px;
    line-height: 26px;
  }

  .feed-card__excerpt,
  .short_story .feed-card__excerpt,
  .full_text,
  .full_story .full_text,
  .short_story .feed-card__continue {
    font-size: 17px;
    line-height: 26px;
  }
}