/* About, the page pass of 2026-10-11. On phones the four facts are one
   quiet card of hairline rows instead of a ragged grid of tiles, so the
   first screen ends on something whole */
@media (max-width: 600px) {
  .ab-tiles { grid-template-columns: 1fr; gap: 0; margin-top: 32px; padding: 0 18px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  .ab-tiles li, .ab-tiles li:has(a) { grid-column: auto; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-radius: 0; background: none; box-shadow: none; }
  .ab-tiles li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
  .ab-tiles b { font-size: 15px; text-align: right; }
  .ab-tiles small { flex: none; font-size: 13px; }
  .ab-tiles b a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* a 44px tap target in a 50px row */
}

/* the email tile keeps the address on one line, sized to fit its tile, so it never breaks inside the domain */
@media (min-width: 901px) {
  .ab-tiles li:has(a) { container-type: inline-size; }
  .ab-tiles li:has(a) b { font-size: min(20px, 8.6cqi); white-space: nowrap; overflow-wrap: normal; }
}