.stage > .invitation { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; }
.invitation .work-link { font-size: clamp(18px, 1.65vw, 22px); border-color: rgba(var(--text-rgb), .45); }
.invitation .work-link:hover { border-color: var(--text); }
.invitation .idea-link { border-color: var(--accent); }
.invitation .idea-link:hover { background: var(--surface-raised); border-color: var(--accent-hover); }
@media (max-width: 640px) { .stage > .invitation { flex-direction: column; } .invitation .work-link { width: 100%; text-align: center; } }

html[data-theme="light"] .invitation .work-link {
  transition: background-color var(--theme-duration) var(--theme-ease), color var(--theme-duration) var(--theme-ease), border-color var(--theme-duration) var(--theme-ease), transform 160ms var(--ease-out);
}
html[data-theme="light"] .invitation .work-link:is(:hover, :focus-visible) {
  background-color: #dedede;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .invitation .work-link { transition: none; }
}
/* The shared foreground token owns text timing; hover only changes the surface. */
html[data-theme="light"] .invitation .work-link,
.invitation .work-link { color: var(--home-foreground); transition-property: background-color, border-color, transform; }