/* Catodoro - the About page.

   Chrome (tokens, navbar, button, back link) lives in page.css, which the
   guide's own navbar block is copied into value for value. Only the parts
   unique to this page are below. */

/* ---------- The page ---------- */

.about {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 68px 24px 120px;
}

/* Quicksand Bold 20/1.6 at -0.8px tracking, in a 597px measure - the
   design's own numbers. Bold for body copy is unusual but it is what the
   page is set in, and it holds up against the paper. */
.story {
  max-width: 597px;
  margin: 0 auto;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.8px;
}

.story p + p { margin-top: 1.6em; }

/* ---------- The photocards ----------

   Used exactly as exported. These carry their own tilt and their own shadow
   baked in, so adding either here doubles it - a CSS rotate on top of the
   built-in ~4.3deg, and a second shadow that reads as a frame around the
   frame. At 786px for a 262px slot they are 3x, so they stay crisp on a
   retina screen. */
.photocard {
  position: absolute;
  width: 262px;
  height: auto;
}

.pc-sweetie { right: 24px; top: 330px; }
.pc-maximus { left: 24px;  top: 600px; }

/* ---------- The demo ---------- */

.demo {
  display: block;
  width: min(939px, 100%);
  margin: 96px auto 0;
  border-radius: 14px;
  background: var(--card);
  box-shadow:
    0 1px 3px rgba(30, 8, 8, 0.06),
    0 10px 24px rgba(30, 8, 8, 0.12);
}

.about-cta {
  margin: 64px 0 0;
  text-align: center;
}

/* ---------- Narrow screens ----------

   The photocards are placed against a 1440 canvas, so below that they have
   nowhere to sit without colliding with the story. They come out of the
   flow and sit above it instead, side by side. */
@media (max-width: 1180px) {
  .about { padding-top: 40px; }

  .photocard {
    position: static;
    width: 200px;
  }

  .photocards-row { display: flex; }

  .pc-sweetie,
  .pc-maximus {
    display: inline-block;
    margin: 0 10px 28px;
    vertical-align: top;
  }

  .story { margin-top: 8px; }
}

@media (max-width: 640px) {
  .story { font-size: 18px; }
  .photocard { width: 150px; }
  .demo { margin-top: 56px; }
}