/* About hero: a small title top left, six words you can play with, and the
   photo running down the right until the black band cuts it off. */
.page-hero--about {
  min-height: 100svh;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + clamp(24px, 4vh, 56px));
  padding-bottom: clamp(32px, 6vh, 72px);
}
.about-title {
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.about-words {
  list-style: none;
  margin: clamp(12px, 2vh, 24px) 0 0;
  padding: 0;
}
.about-word {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  cursor: default;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.about-word .ch { display: inline-block; }
/* Hover, tap or focus sends a wave through the letters: each lifts, tilts
   and drops back, one after another. No colour change. */
.about-word.is-wave .ch {
  animation: about-wave 760ms var(--ease-expo) both;
  animation-delay: calc(var(--i) * 38ms);
}
@keyframes about-wave {
  0% { transform: none; }
  30% { transform: translateY(-0.24em) rotate(-6deg); }
  100% { transform: none; }
}
.about-word:focus-visible { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: .12em; }

@media (max-width: 900px) {
  /* Phones: title and words first, the photo below them, ending at the band */
  .page-hero--about { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .page-hero--about .about-cut { order: 2; }
  .about-word { font-size: clamp(24px, 7vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-word.is-wave .ch { animation: none; }
}

/* "I'm a lot about you": one dark box perforated between the items,
   instead of six separate cards */
.cards-invert--big {
  gap: 0 !important;
  background: var(--ink-2);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.cards-invert--big .card {
  border-radius: 0;
  background: transparent;
  gap: 6px;
  position: relative;
}
.cards-invert--big .card:hover { transform: none; }
.cards-invert--big .card + .card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 20px);
}
.cards-invert--big .h-box {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}