.btn {
  --button-edge: var(--rule);
  --button-fill: var(--deck);
  font-family: var(--px); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; padding: 14px 19px 13px; border: 0; border-radius: 0; cursor: pointer; color: var(--paper);
  position: relative; isolation: isolate;
  display: inline-flex; gap: 10px; align-items: center; justify-content: center; background: var(--button-edge);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: var(--button-fill);
  /* Offset the diagonal by the same 1px as the straight edges. */
  clip-path: polygon(0 0, calc(100% - 9.4142px) 0, 100% 9.4142px, 100% 100%, 9.4142px 100%, 0 calc(100% - 9.4142px));
}
.btn.solid { --button-fill: var(--paper); --button-edge: var(--paper); color: var(--night); }
.btn:hover { --button-edge: var(--dim); }
.btn.solid:hover { --button-fill: #fff; }
.btn:focus-visible { --button-edge: var(--paper); text-decoration: underline; text-underline-offset: 4px; }