@import url("../home-v4.css");

/*
 * Независимые токены концепции 04.
 * Файл намеренно изолирован от стилей остальных вариантов.
 */
:root {
  --blue: #b84b2c;
  --blue-dark: #80301f;
  --ink: #23342d;
  --paper: #f2eadc;
  --white: #fffdf8;
  --grey: #68736b;
  --line: #a9afa7;
  --acid: #e8bd4b;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.hero h1,
.section-intro h2,
.program-title h2,
.impact-copy h2,
.media-heading h2,
.contact h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.07em;
  text-transform: none;
}

.hero h1 {
  line-height: .82;
}

.hero h1 .blue {
  font-style: italic;
}

.main-nav a,
.header-actions button,
.header-actions a,
.notice,
.label,
.hero-index,
.square-link,
.ticker,
.audience-no,
.program .no,
.meta,
.footer h3 {
  letter-spacing: .12em;
}

.hero-visual {
  background: var(--blue-dark);
}

.hero-visual img {
  filter: sepia(.35) saturate(.75) contrast(1.08);
  mix-blend-mode: multiply;
}

.hero-visual::after {
  background: rgba(184, 75, 44, .16);
}

.impact-photo img,
.lead-story img,
.story img {
  filter: sepia(.25) saturate(.72) contrast(1.04);
}

.audience:hover,
.footer,
.notice {
  background: var(--ink);
}

.program:hover,
.contact,
.ticker {
  background: var(--blue);
}

.visual-number,
.impact-copy .label,
.fact strong,
.footer h3 {
  color: var(--acid);
}

.visual-caption {
  background: var(--acid);
}

.square-link {
  background: var(--blue);
}