/* VividlyHER - her title choices, wearing the /becky face.
   Ported from the .opt block on /becky so the moment she picks her headline
   looks the same in both places: a numbered rose token, her title in the
   serif, a card that lifts toward the rose on hover. The numbers are counted
   by CSS - the buttons themselves carry only her words. */
.mirror-titles { --vh-rose: #b51b5b; --vh-rose2: #951548; --vh-blush: #f6e4ea;
  --vh-ink: #321426; --vh-line: rgba(50,20,38,.12);
  --vh-serif: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  counter-reset: vhtitle; }
.mirror-titles button {
  display: grid; grid-template-columns: 30px 1fr; align-items: center;
  column-gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--vh-line); background: #fff; border-radius: 14px;
  padding: 12px 14px; margin: 0 0 10px;
  font: 500 17px/1.2 var(--vh-serif); color: var(--vh-ink);
  letter-spacing: -.01em; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.mirror-titles button::before {
  counter-increment: vhtitle; content: counter(vhtitle);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--vh-blush); color: var(--vh-rose);
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  display: grid; place-items: center; }
.mirror-titles button:hover, .mirror-titles button:focus-visible {
  border-color: rgba(181,27,91,.45);
  box-shadow: 0 10px 24px -16px rgba(149,21,72,.5); }
/* The one she has landed on wears the rose outright. */
.mirror-titles button[aria-pressed='true'] {
  background: var(--vh-rose); border-color: var(--vh-rose2); color: #fff; }
.mirror-titles button[aria-pressed='true']::before {
  background: rgba(255,255,255,.22); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .mirror-titles button { transition: none; } }