/* ==========================================================================
   /socials/ — the landing page behind the printed "socials" QR code.
   Layers on top of the site's ../styles.css; only what that file has no
   equivalent for lives here, so the page follows the site as it changes.
   ========================================================================== */

/* ── Page head ───────────────────────────────────────────────────────────── */

/* Stands in for the home page's hero: no photograph, just the type on black.
   Someone arriving here has just scanned a code and is standing up holding a
   phone, so the page starts at the links rather than making them scroll. */
.page-head {
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--cream);
  margin-bottom: 1rem;
}

.page-lede {
  color: var(--muted);
  max-width: 44ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* The section below the head carries the page's own top padding, so drop the
   site stylesheet's. */
.page-head + .section { padding-top: 0; }

/* ── Onward ──────────────────────────────────────────────────────────────── */

.page-onward {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.75rem;
}

.page-mail {
  margin-top: 2.25rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
}