/* keep a tiny CSS helper file: Tailwind handles most styling */
* { box-sizing: border-box; }

body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

.letter-btn { min-width: 68px; min-height: 68px; transition: transform .22s cubic-bezier(.2,.9,.2,1), width .22s cubic-bezier(.2,.9,.2,1), font-size .18s ease, background-color .18s ease; white-space: nowrap; overflow: hidden; font-size: 28px; }
.letter-btn .letter { display: inline-block; transform-origin: left center; transition: transform .18s ease; }
.letter-btn.expanded { transform: scale(1.06); width: 280px; }
.letter-btn:hover { transform: scale(1.14); background-color: rgba(255,255,255,0.04); }
.letter-btn:focus { outline: 3px solid rgba(102,102,255,0.35); }

/* when closing, use a slower easing for a smooth collapse */
.letter-btn.closing {
	transition-duration: 2s !important;
	transition-timing-function: cubic-bezier(.2,.3,.2,1) !important;
}

/* Mobile adjustments */
@media (max-width: 640px) {
	#center-stage { flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 94vw; }
	.letter-btn { min-width: 0; width: 100%; min-height: 64px; font-size: 28px; padding-left: 20px; padding-right: 20px; }
	.letter-btn.expanded { width: 100%; transform: scale(1.01); }
	#center-stage > .w-0\.5.h-10 { display: none; }
	body { padding-left: 0; padding-right: 0; }
	/* contact block spacing */
	.mt-12 { margin-top: 1.5rem; }
}