/* Chrome for the About page.
 *
 * The page is almost entirely the app's own blocks -- a Kinetic Headline, a
 * run of Flip Cards, a Counter Scroll, and five Organic Dividers between
 * them -- which is the point of it: the About page is the product
 * demonstrating itself. Those arrive fully styled from the theme app
 * extension, so the only thing left for a stylesheet is the plain copy that
 * sits between them.
 *
 * Like the Organic Divider page, that copy has to carry its own colour. A
 * divider paints only the transition between two colours; the flat colour
 * either side belongs to the page. Each band therefore holds exactly the
 * colour the divider above it ends on and the one below it starts from.
 *
 * Sized in rem so it follows the theme scale in base.css, like the blocks.
 */

.about-band {
  padding: 4.2rem 2rem;
}

.about-band__inner {
  /* 78rem is the measure the mockup sets this copy at, and the same one the
     page intros use elsewhere on the site. */
  max-width: 78rem;
  margin: 0 auto;
  text-align: center;
}

.about-band__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.73;
  opacity: 0.75;
}

.about-band__text + .about-band__text {
  margin-top: 1.2rem;
}

.about-band--paper {
  background: var(--eez-paper);
}

.about-band--white {
  background: var(--eez-white);
}

.about-band__email {
  font-weight: 700;
  color: var(--eez-accent);
  text-underline-offset: 0.3rem;
  /* The copy around it is dimmed; the address should not be. */
  opacity: 1;
}

@media (max-width: 749px) {
  .about-band {
    padding: 3.2rem 1.6rem;
  }
}