:root {
  /*
   * Almost graphite with a restrained warm undertone: header and hero remain
   * seamless, while orange reads as an accent instead of the dominant field.
   */
  --etc-blog-rust: #130e0b;
  --etc-blog-copy: #f7f3ed;
  --etc-blog-muted: #d6c7ba;
  --etc-blog-accent: #ff6a00;
  --etc-blog-button-start: #b93208;
  --etc-blog-button-end: #c54408;
}

/* Главная блога: шапка и первый экран образуют одну цельную плоскость. */
body.blog-index #site-header,
body.blog-index #site-header > .wrap,
body.blog-index .hero {
  background-color: var(--etc-blog-rust) !important;
  background-image: none !important;
}

body.blog-index #site-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.blog-index #site-header::before,
body.blog-index #site-header::after,
body.blog-index .hero::before,
body.blog-index .hero::after {
  border: 0 !important;
  box-shadow: none !important;
}

body.blog-index .hero::before {
  background: none !important;
}

body.blog-index .hero {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/*
 * The warm background stays subordinate to content: orange is an accent,
 * while all reading copy uses WCAG-readable white and warm grey.
 */
body.blog-index #site-header .logo-word,
body.blog-index #site-header .desktop-nav a,
body.blog-index #site-header .nav-toggle span,
body.blog-index .hero-title,
body.blog-index .hero-chips .chip {
  color: var(--etc-blog-copy) !important;
}

body.blog-index #site-header .logo-word span,
body.blog-index .hero-lead,
body.blog-index .hero-proof {
  color: var(--etc-blog-muted) !important;
  opacity: 1 !important;
}

body.blog-index .hero-eyebrow,
body.blog-index .hero-title .accent {
  color: var(--etc-blog-accent);
}

body.blog-index .hero-title .accent {
  background-image: none !important;
  -webkit-text-fill-color: var(--etc-blog-accent);
}

/* White button labels retain at least 4.99:1 against both gradient stops. */
body.blog-index .hero-cta,
body.blog-index #site-header .lang-toggle a.is-on {
  background: linear-gradient(
    118deg,
    var(--etc-blog-button-start),
    var(--etc-blog-button-end)
  ) !important;
  color: #fff !important;
}

body.blog-index .hero-chips .chip {
  background: rgba(20, 9, 6, 0.82) !important;
  border-color: rgba(255, 138, 26, 0.48) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.blog-index .mobile-menu {
  background-color: var(--etc-blog-rust) !important;
  background-image: none !important;
}

/* Обложки всегда остаются единым 16:9-форматом без нижних обломков. */
.card .thumb {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  line-height: 0;
  background: var(--etc-blog-rust) !important;
}

.card .thumb::before,
.card .thumb::after,
.jcover--generated::before,
.jcover--generated::after {
  display: none !important;
  content: none !important;
}

.jcover--generated {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--etc-blog-rust) !important;
  isolation: isolate;
}

.generated-cover-photo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: right center !important;
  opacity: 1 !important;
  filter: brightness(1) contrast(1.02) saturate(1.03) !important;
  transform: none !important;
}

/*
 * Полный заголовок всегда остаётся живым HTML-текстом. Этот блок сознательно
 * нейтрализует desktop- и mobile-line-clamp из style.css: длинные формулировки
 * не обрываются на «С» и не превращаются в многоточие.
 */
.jcover--generated .jc-caption {
  display: none !important;
}

.card .body,
.card .body h3,
.article-hero h1 {
  min-width: 0 !important;
}

.card .body h3,
.article-hero h1 {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
}

/* Только карточкам снимаем прежнее ограничение в 25ch; h1 сохраняет
   редакционную ширину из базовой темы, но всё равно не обрезается. */
.card .body h3 {
  max-width: none !important;
}

/*
 * Обложка внутри статьи компактнее прежней: на большом экране она
 * не растягивается на всю ширину hero, но на tablet/mobile занимает
 * доступное место. Contain сохраняет всю 16:9-композицию без обрезки.
 */
.article-hero .article-cover {
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  margin-right: auto;
  margin-left: auto;
}

.article-hero .article-cover .jcover--hero.jcover--generated {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9;
}

.article-hero .article-cover .generated-cover-photo {
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 767px) {
  body.blog-index #site-header,
  body.blog-index #site-header .wrap,
  body.blog-index .hero {
    background-color: var(--etc-blog-rust) !important;
  }

  .card .thumb,
  .card.featured .thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}