/* ===== About page =====
   The text sits above the play area, and the page grows with it: on a phone the
   text is taller than the screen, so unlike the home Hero this one is not pinned
   to 100vh. The tiles fall over the whole page onto the line at its foot. */
.about {
  height: auto;
  min-height: 100vh;
  padding: 72px var(--gutter) 300px;
}
.about .hero__fidget {
  top: 0;
  height: auto;
}
/* the home page's rules hide the line on phones, here the tiles need it */
.about .dock-divider { display: block; }

/* Above the tiles' canvas, or it would swallow every click on the links. */
.about__text {
  position: relative;
  z-index: var(--z-hero-controls);
  max-width: 640px;
  margin-inline: auto;
}
.about__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 56px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-highlight);
  margin-bottom: var(--sp-4);
}
.about__lede {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
}
.about__points p {
  color: var(--c-ink-soft);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-2);
}
.about__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--sp-4);
}
.about__contacts a {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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