/* ==========================================================================
   /about
   Rides on home.css for the faces, palette, waitlist pill and footer. The
   page reads straight down: a cream opener, Vonnegut on navy, the essay
   in a single column, the list of things you can do, and a navy send-off.
   Odds and ends from the junk drawer sit in the margins along the way.
   ========================================================================== */

.about > section,
.about > article {
  position: relative;
  padding: 120px var(--gutter);
}

/* --------------------------------------------------------------------------
   The junk drawer
   Absolutely placed per block below. A hover gives them a little shake.
   -------------------------------------------------------------------------- */

.thing {
  position: absolute;
  z-index: 2;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@media (hover: hover) {
  .thing:hover {
    transform: rotate(calc(var(--tilt, 0deg) * -1)) scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Opener
   -------------------------------------------------------------------------- */

.about > .opener {
  padding-top: 0;
  padding-bottom: 130px;
  text-align: center;
}

.about-top {
  display: flex;
  justify-content: center;
  padding: 28px 0 88px;
}

.opener__title {
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: clamp(1.76rem, 6.72vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* The pixel word is the robot in the room. Same letter colours as the
   homepage's "super-", walked around twice. */
.opener__title .pixel {
  display: inline-block;
  font-size: 1.12em;
}

.opener__title .pixel span:nth-child(4n + 1) { color: var(--px-1); }
.opener__title .pixel span:nth-child(4n + 2) { color: var(--px-2); }
.opener__title .pixel span:nth-child(4n + 3) { color: var(--px-3); }
.opener__title .pixel span:nth-child(4n + 4) { color: var(--px-4); }
/* The question mark is Softcore's, sized back down to match "to". */
.opener__title .pixel span:last-child {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: calc(1em / 1.12);
  margin-left: 0.04em;
}

@keyframes hover-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* --------------------------------------------------------------------------
   Vonnegut
   A centred lead-in, then his portrait on the left and the story on the
   right, side by side.
   -------------------------------------------------------------------------- */

/* No bottom padding: the portrait stands on the section's bottom edge,
   and the quote carries its own space below. */
.about > .kv {
  --kv-pad: 72px;
  /* The room between the end of the quote and the credit at the bottom. */
  --kv-pad-bottom: 66px;
  /* How wide the portrait is, and how far it hangs out past the left
     edge of the text column. */
  --kv-fig-w: 660px;
  --kv-fig-hang: 300px;
  /* The breathing room between his outline and the words. */
  --kv-shape-margin: 72px;
  background: var(--ink);
  color: var(--white);
  padding-top: var(--kv-pad);
  padding-bottom: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* The narrator's voice, in Camera Plain, so the serif below reads as
   his. Trimmed a touch: the sans sets larger than Softcore at one size. */
.kv__lede {
  max-width: 760px;
  margin: 0 auto 1.4em;
  font-family: var(--font-sans);
  font-size: clamp(1.29rem, 1.98vw, 1.8rem);
  line-height: 1.45;
  letter-spacing: 0;
}

/* The portrait floats left with its own outline as the wrap shape, so
   the story runs right up against his head and shoulders. */
/* Same column as the lead-in above it, edge for edge. */
.kv__pair {
  position: relative;
  display: flow-root;
  max-width: 760px;
  margin: 0 auto;
}

.kv__spacer {
  float: left;
  width: 0;
}

.kv__quote {
  position: relative;
}

/* Hang the opening quote mark in the margin so the words line up with
   the lead-in above. */
.kv__quote p:first-child {
  text-indent: -0.4em;
}

/* Fewer lonely last words. The final pair is also joined by a
   non-breaking space in the markup, since the curve around his shoulder
   can still strand one. */
.kv__quote p {
  text-wrap: pretty;
}

.kv__quote p + p {
  margin-top: 0.85em;
}

.kv__quote .kv__moral {
  color: var(--lime);
}

/* Mr. Vonnegut himself, lifted off his garden and standing on the
   bottom of the section, his credit running off to his right along the
   same line. The float and the wrap shape go on the img itself: Chrome
   ignores an image shape on a figure wrapped around it and falls back to
   the plain box. The figure stays an ordinary block, so the float still
   steers the quote's lines. */
.kv__portrait img {
  float: left;
  clear: left;
  width: var(--kv-fig-w);
  margin-left: calc(-1 * var(--kv-fig-hang));
  /* A float's wrap shape is clipped to its own box, so the cutout carries
     a transparent band above his head; without it the margin would stop
     at his hair. */
  shape-outside: url(/img/about/vonnegut-cutout.webp?v=4);
  shape-image-threshold: 0.4;
  shape-margin: var(--kv-shape-margin);
}

/* Sits on the section's bottom edge (the pair ends where he does). */
.kv__portrait figcaption {
  position: absolute;
  left: calc(var(--kv-fig-w) - var(--kv-fig-hang) + 8px);
  bottom: 24px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   The essay
   One column, like a letter, set in Camera Plain with bold run-in leads
   where the copy turns. The heading keeps to Softcore.
   -------------------------------------------------------------------------- */

.about > .essay {
  max-width: calc(680px + 2 * var(--gutter));
  margin: 0 auto;
  padding-top: 90px;
  padding-bottom: 40px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.55;
}

.essay p,
.essay h2 {
  position: relative;
}

.essay p + p {
  margin-top: 1em;
}

.essay .essay__lede {
  font-size: 1.45em;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1.4em;
}

.essay strong {
  font-weight: bold;
}

.essay h2 {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: 2.75em;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1.4em 0 1.15em;
}

/* The name in the pixel face and the headline's letter colours, a nod
   back to "automate?" at the top. */
.essay__name {
  display: inline-block;
  margin-top: -0.04em;
  font-family: var(--font-pixel);
  font-size: 1.9em;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.essay__name span:nth-child(4n + 1) { color: var(--px-1); }
.essay__name span:nth-child(4n + 2) { color: var(--px-2); }
.essay__name span:nth-child(4n + 3) { color: var(--px-3); }
.essay__name span:nth-child(4n + 4) { color: var(--px-4); }

/* The bike leans in the margin by the opening question, and the goldfish
   swims beside the paragraph that leads into the heading. */
.thing--bike {
  --tilt: -6deg;
  width: 290px;
  top: 40px;
  left: -350px;
}

.thing--goldfish {
  --tilt: -6deg;
  width: 230px;
  top: 0;
  right: -300px;
  animation: hover-bob 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Whatever you're into
   The list as a spill of stickers, each a different colour and tilt.
   -------------------------------------------------------------------------- */

.about > .into {
  padding-top: 100px;
}

.into__head {
  position: relative;
  max-width: 1080px;
  margin: 0 auto 56px;
  text-align: center;
}

.into__title {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.chips {
  list-style: none;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
}

.chips li {
  padding: 12px 22px 13px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--white);
  color: var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  /* They wobble like stickers, so they shouldn't offer a text cursor. */
  cursor: default;
}

@media (hover: hover) {
  .chips li:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.04);
  }
}

/* Seven colours and five tilts, on coprime cycles so the pattern takes a
   while to repeat. */
.chips li:nth-child(7n + 1) { background: var(--lime); }
.chips li:nth-child(7n + 2) { background: var(--pink); }
.chips li:nth-child(7n + 3) { background: var(--orange); color: var(--white); }
.chips li:nth-child(7n + 4) { background: var(--yellow); }
.chips li:nth-child(7n + 5) { background: var(--px-3); color: var(--white); }
.chips li:nth-child(7n + 6) { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.chips li:nth-child(7n + 7) { background: var(--ink); color: var(--white); }

.chips li:nth-child(5n + 1) { --tilt: -2.5deg; }
.chips li:nth-child(5n + 2) { --tilt: 1.5deg; }
.chips li:nth-child(5n + 3) { --tilt: -1deg; }
.chips li:nth-child(5n + 4) { --tilt: 3deg; }
.chips li:nth-child(5n + 5) { --tilt: -0.5deg; }

/* --------------------------------------------------------------------------
   Close
   -------------------------------------------------------------------------- */

.about > .close {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding-top: 140px;
  padding-bottom: 80px;
}

.close__magic {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.close__invite {
  max-width: 640px;
  margin: 40px auto 0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.close__invite + .close__invite {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .thing,
  .chips li {
    animation: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Narrower: the portrait stacks above the story and the margin things
   drop into the text as floats.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .about > .into {
    padding-top: 48px;
  }

  /* No room to hang him out past the column, so he sits inside it,
     smaller, with less air under the quote so it still wraps him. */
  .about > .kv {
    --kv-fig-w: 46%;
    --kv-fig-hang: 0px;
    --kv-pad-bottom: 20px;
    --kv-shape-margin: 36px;
  }

  /* The credit stops at the column's right edge and wraps if it must. */
  .kv__portrait figcaption {
    right: 0;
    white-space: normal;
    line-height: 1.5;
  }

  .essay .thing {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .essay .thing--goldfish {
    float: right;
    width: 130px;
    margin: 0 -12px 0.2em 18px;
  }

  .essay .thing--bike {
    float: left;
    width: 180px;
    margin: 0.15em 18px 0.2em -12px;
  }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .about > section,
  .about > article {
    padding: 80px var(--gutter);
  }

  .about > .opener {
    padding-top: 0;
    padding-bottom: 60px;
  }

  .about-top {
    padding: 24px 0 36px;
  }

  .wordmark {
    width: 166px;
  }

  /* Nearly as big as "What do we want" will go on one line. */
  .opener__title {
    font-size: 10.8vw;
  }

  .about > .kv {
    --kv-pad: 56px;
    --kv-pad-bottom: 48px;
    font-size: 1.25rem;
  }

  .kv__lede {
    font-size: 1.2rem;
  }

  .kv__pair {
    display: flex;
    flex-direction: column;
  }

  .kv__spacer {
    display: none;
  }


  .kv__quote {
    margin-bottom: 0;
  }

  /* He stands on the bottom edge under the quote, and the credit wraps
     down the slope of his shoulder towards his elbow: the padding drops
     its first line to shoulder height, and his outline does the rest. */
  .kv__portrait {
    order: 1;
    display: flow-root;
    margin-left: calc(-1 * var(--gutter));
  }

  .kv__portrait img {
    width: 64%;
    margin-left: 0;
    shape-margin: 8px;
  }

  /* Each line of the credit steps in down his arm. */
  .kv__photo-by {
    display: block;
    white-space: nowrap;
  }

  /* Pretty wrapping pulls lines in short of the edge to even them out,
     which reads as a gap down the right side at this width. */
  .kv__quote p {
    text-wrap: wrap;
  }

  .kv__portrait figcaption {
    position: static;
    padding-top: 35%;
    font-size: 9px;
    white-space: normal;
    line-height: 1.6;
  }

  .kv__lede {
    margin-bottom: 1.2em;
  }


  .about > .essay {
    padding-top: 64px;
    font-size: 19px;
  }

  .essay .thing--goldfish {
    width: 100px;
  }

  .essay .thing--bike {
    width: 96px;
  }

  .essay h2 {
    font-size: 2em;
  }

  .essay__name {
    font-size: 1.5em;
  }

  .about > .into {
    padding-top: 20px;
  }

  .into__head {
    margin-bottom: 40px;
  }

  .chips {
    gap: 8px 6px;
  }

  .chips li {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding: 8px 12px 9px;
  }

  .about > .close {
    padding-top: 110px;
    padding-bottom: 64px;
  }

}