/* Elms Medium establishes hierarchy; Times keeps the editorial accents. */
.hero h1,
main h2 {
  font-family: var(--sans);
  font-weight: 500;
}

.hero h1 {
  font-size: 74px;
  line-height: 1.02;
  letter-spacing: -3.6px;
}

.hero h1 em {
  font-size: 1.13em;
  line-height: .9;
}

main .section-heading h2 {
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1.8px;
}

main h2 em {
  font-size: 1.12em;
  letter-spacing: -.03em;
}

.for-intro h2 {
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -2.4px;
}

.offer-story h2 {
  font-size: 49px;
  line-height: 1.12;
  letter-spacing: -2px;
}

@media (max-width: 1100px) {
  .hero h1 { font-size: 64px; letter-spacing: -3px; }
  main .section-heading h2 { font-size: 39px; }
  .offer-story h2 { font-size: 42px; }
}

@media (max-width: 800px) {
  .hero h1 { font-size: 50px; letter-spacing: -2.6px; }
  main .section-heading h2 { font-size: 33px; letter-spacing: -1.4px; }
  .for-intro h2 { font-size: 49px; letter-spacing: -2px; }
  .offer-story h2 { font-size: 35px; letter-spacing: -1.4px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: 52px; line-height: 1.06; letter-spacing: -2.6px; }
  main .section-heading h2 { font-size: 32px; line-height: 1.16; }
  .for-intro h2 { font-size: 45px; line-height: 1.1; }
  .offer-story h2 { font-size: 37px; line-height: 1.16; letter-spacing: -1.6px; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 45px; letter-spacing: -2.3px; }
  main .section-heading h2 { font-size: 29px; }
  .offer-story h2 { font-size: 33px; }
}

@media (min-width: 601px) and (max-width: 740px) {
  .hero-art { transform: scale(.64); }
}