.ornate-button{--ornate-border-width:2px;--ornate-frame-inset:1px;--ornate-inner-border-width:1px;--ornate-stroke:linear-gradient(135deg,#2b1a0f,#543522);font-size:1rem;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 3rem;color:#2b1a0f;font-weight:500;background:transparent;border:none;cursor:pointer;text-transform:none;clip-path:polygon(5% 0,95% 0,100% 20%,100% 80%,95% 100%,5% 100%,0 80%,0 20%);transition:transform .25s ease,box-shadow .25s ease}.ornate-button:before{content:"";inset:0;padding:var(--ornate-border-width);background:var(--ornate-stroke);z-index:0;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:all .3s ease}.ornate-button-frame,.ornate-button:before{position:absolute;clip-path:inherit;pointer-events:none;box-sizing:border-box}.ornate-button-frame{inset:calc(var(--ornate-border-width) + var(--ornate-frame-inset));z-index:1;border:var(--ornate-inner-border-width) solid #000;transition:all .1s ease}.ornate-button-content{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;transition:all .3s ease}.ornate-button:hover{--ornate-frame-inset:0px;--ornate-inner-border-width:0px}.ornate-button:hover .ornate-button-frame{clip-path:unset}.ornate-button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(43,26,15,.2)}.ornate-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width:768px){.ornate-button{font-size:.75rem;padding:.6rem 2.25rem}}