@font-face                  { font-family: 'Printvetica'; src: local('Printvetica'), url('/_common/css/fnt/printvetica.woff2') format('woff'); font-weight: 400; font-style: regular; }

aside.menu					{ font-family: Helvetica, 'Printvetica'; background: rgba(0,0,0,.75) url(/_common/img/bg-menu.svg); background-size: 4px 4px; /*background-color: rgba(0,0,0,.95);*/ clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 3em),calc(100% - 3em) 100%,0 100%,0% 0%); position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; height: 100dvh; transform: translate(calc(-100% + 3rem), calc(-100% + 3rem)); display: flex; flex-direction: column; align-items: center; justify-content: center; will-change: transform; transition: transform .25s; }
aside.menu.show 			{ transform: translate(0,0); }
.menu button				{ position: absolute; bottom: 0; right: 0; width: 3rem; height: auto; aspect-ratio: 1; background: rgba(255,0,0,1); /*linear-gradient(135deg, red, red 50%, rgba(255,0,0,0) 50%, rgba(255,0,0,0));*/ display: flex; align-items: flex-start; justify-content: flex-start; will-change: background-color; transiton: background-color .25s; }
.menu button:hover 			{ background: #fff; }
.menu button img			{ width: 30%; height: auto; filter: brightness(1); will-change: filter; transition: filter .25s; margin: .375em 0 0 .375em; }
.menu.show button img 		{ transform: rotate(180deg); }
.menu button:hover 			{ background: #fff; }
.menu button:hover img 		{ filter: brightness(0); }

.menu nav 					{  }
.menu ul 					{ font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.menu li 					{ padding: .5rem 0; opacity: 0; transform: translate(-10vw,-10dvh); }
.menu li:nth-child(1)		{ transition: opacity .25s ease .1s, transform .5s ease .1s; }
.menu li:nth-child(2)		{ transition: opacity .25s ease .125s, transform .5s ease .125s; }
.menu li:nth-child(3)		{ transition: opacity .25s ease .15s, transform .5s ease .15s; }
.menu li:nth-child(4)		{ transition: opacity .25s ease .175s, transform .5s ease .1755s; }
.menu li:nth-child(5)		{ transition: opacity .25s ease .2s, transform .5s ease .2s; }
.menu li:nth-child(6)		{ transition: opacity .25s ease .225s, transform .5s ease .225s; }
.menu li:nth-child(7)		{ transition: opacity .25s ease .25s, transform .5s ease .25s; }
.menu li:nth-child(8)		{ transition: opacity .25s ease .275s, transform .5s ease .275s; }
.menu.show li				{ opacity: 1; transform: translate(0,0); }

.menu a 					{ color: rgba(255,255,255,.375); line-height: 1.125; position: relative; font-weight: 900; display: inline-block; }
.menu a:hover 				{ color: rgba(255,0,0,1); text-shadow: 0 0 .125em rgba(255,0,0,.75); }

.menu a::before 			{ content: attr(data-text); line-height: inherit; font-size: inherit; font-weight: inherit; position: absolute; top: 0; left: 0; text-align: left; right: auto; width: 0; overflow: hidden; color: rgba(255,255,255,.5); white-space: nowrap; transition: all .375s; display: inline-block; height: 100%; pointer-events: none; }
.menu a:hover::before 		{ width: 100%; color: rgba(255,255,255,1); }

/* aside.menu					{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.354 14.354'%3E%3Cpolygon fill='%23fff' points='14.354,0.354 14,0 7.177,6.823 0.354,0 0,0.354 6.823,7.177 0,14 0.354,14.354 7.177,7.53 14,14.354 14.354,14 7.53,7.177 '/%3E%3C/svg%3E%0A") 16 16, pointer; } */
aside.menu:not(nav):not(button) { cursor: url(/_common/img/cursor-x.svg) 16 16, auto; }