/* Scoped to content CTAs: header links retain their underline-only treatment. */
main a.button[href^="/reservations"],#form button[type="submit"]:not(:disabled),#join-form button[type="submit"]:not(:disabled),#contact-form button[type="submit"]:not(:disabled){transition:transform 180ms ease,box-shadow 180ms ease}
main a.button.alt[href="#shows"]{transition:border-color 180ms ease,color 180ms ease,transform 180ms ease}
.reservation-support a[href="#packages"]{transition:text-decoration-color 180ms ease,text-shadow 180ms ease;text-underline-offset:.18em}
#form #package{transition:border-color 180ms ease,box-shadow 180ms ease}
/* Keep the native menu and its selected option; this emphasis never sets a value. */
#form #package:has(option:checked:not([value=""])){border-color:var(--p,#ee3d78);box-shadow:2px 2px 0 var(--p,#ee3d78)}
main a.button[href^="/reservations"]:focus-visible,main a.button.alt[href="#shows"]:focus-visible,#form button[type="submit"]:focus-visible,#join-form button[type="submit"]:not(:disabled):focus-visible,#contact-form button[type="submit"]:not(:disabled):focus-visible,.reservation-support a[href="#packages"]:focus-visible{outline:3px solid var(--p,#ee3d78);outline-offset:4px}
.reservation-support a[href="#packages"]:focus-visible{text-decoration-color:var(--p,#ee3d78)}
@media(hover:hover) and (pointer:fine){
 main a.button[href^="/reservations"]:hover,#form button[type="submit"]:not(:disabled):hover,#join-form button[type="submit"]:not(:disabled):hover,#contact-form button[type="submit"]:not(:disabled):hover{transform:translateY(-2px);box-shadow:7px 8px 0 var(--p,#ee3d78)}
 main a.button.alt[href="#shows"]:hover{border-color:var(--p,#ee3d78);color:var(--y,#f3dd27)}
 .reservation-support a[href="#packages"]:hover{text-decoration-color:var(--p,#ee3d78)}
 #form #package:not(:disabled):hover{border-color:var(--p,#ee3d78)}
}
/* Press feedback applies to both pointer and touch, with no hover-first gesture. */
main a.button[href^="/reservations"]:active,#form button[type="submit"]:not(:disabled):active,#join-form button[type="submit"]:not(:disabled):active,#contact-form button[type="submit"]:not(:disabled):active{transform:translateY(1px);box-shadow:3px 3px 0 var(--p,#ee3d78)}
main a.button.alt[href="#shows"]:active{transform:translateY(1px);border-color:var(--p,#ee3d78)}
.reservation-support a[href="#packages"]:active{text-decoration-color:var(--p,#ee3d78)}
@media(prefers-reduced-motion:reduce){
 main a.button[href^="/reservations"],main a.button.alt[href="#shows"],#form button[type="submit"]:not(:disabled),#join-form button[type="submit"]:not(:disabled),#contact-form button[type="submit"]:not(:disabled),.reservation-support a[href="#packages"],#form #package{transition:none}
 main a.button[href^="/reservations"]:hover,main a.button[href^="/reservations"]:active,main a.button.alt[href="#shows"]:active,#form button[type="submit"]:not(:disabled):hover,#join-form button[type="submit"]:not(:disabled):hover,#contact-form button[type="submit"]:not(:disabled):hover,#form button[type="submit"]:not(:disabled):active,#join-form button[type="submit"]:not(:disabled):active,#contact-form button[type="submit"]:not(:disabled):active{transform:none}
}

/* Each whole package card is one native link; the ring never changes geometry. */
#packages a.card{--package-interaction-accent:var(--p,#ee3d78);text-decoration:none;outline:3px solid transparent;outline-offset:-3px;transition:outline-color 180ms ease}
#packages a.card[href="/reservations?package=ultimate"]{--package-interaction-accent:var(--y,#f3dd27)}
#packages a.card:focus-visible,#packages a.card:active{outline-color:var(--package-interaction-accent)}
@media(hover:hover) and (pointer:fine){#packages a.card:hover{outline-color:var(--package-interaction-accent)}}
@media(prefers-reduced-motion:reduce){#packages a.card{transition:none}}

/* Desktop experience accents; touch resting/pressed states above stay unchanged. */
@media(hover:hover) and (pointer:fine){
 #packages a.card{position:relative;cursor:pointer;transition:outline-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
 #packages a.card[href="/reservations?package=tipsy"]{--package-interaction-accent:var(--a,#4fc7c8)}
 #packages a.card[href="/reservations?package=drunken"]{--package-interaction-accent:var(--y,#f3dd27)}
 #packages a.card[href="/reservations?package=ultimate"]{--package-interaction-accent:var(--c,#fff7e9)}
 #packages a.card:hover,#packages a.card:focus-visible{outline:6px solid var(--package-interaction-accent);outline-offset:-6px;box-shadow:inset 0 0 0 7px var(--b,#080808);transform:translateY(-2px);z-index:1}
}
/* Keyboard cue also works with a keyboard attached to a touch device. */
#packages a.card:focus-visible{outline:6px solid var(--package-interaction-accent);outline-offset:-6px;box-shadow:inset 0 0 0 7px var(--b,#080808)}
#packages a.card[href="/reservations?package=tipsy"]:focus-visible{--package-interaction-accent:var(--a,#4fc7c8)}
#packages a.card[href="/reservations?package=drunken"]:focus-visible{--package-interaction-accent:var(--y,#f3dd27)}
#packages a.card[href="/reservations?package=ultimate"]:focus-visible{--package-interaction-accent:var(--c,#fff7e9)}
@media(prefers-reduced-motion:reduce){#packages a.card{transition:none}#packages a.card:hover,#packages a.card:focus-visible{transform:none}}

/* Touch feedback uses native :active only: release/cancel clears it without JS or a navigation delay. */
@media(hover:none) and (pointer:coarse){
 #packages a.card{cursor:pointer;transition:transform 180ms ease}
 #packages a.card[href="/reservations?package=tipsy"]{--package-interaction-accent:var(--a,#4fc7c8)}
 #packages a.card[href="/reservations?package=drunken"]{--package-interaction-accent:var(--y,#f3dd27)}
 #packages a.card[href="/reservations?package=ultimate"]{--package-interaction-accent:var(--c,#fff7e9)}
 #packages a.card:active{outline:6px solid var(--package-interaction-accent);outline-offset:-6px;box-shadow:inset 0 0 0 7px var(--b,#080808);transform:translateY(1px)}
}
@media(hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){#packages a.card{transition:none}#packages a.card:active{transform:none}}