.panel-shell() {
  position: relative;
  background:
    linear-gradient(180deg, fade(@bone, 4%), transparent 24%),
    linear-gradient(135deg, fade(@ember, 8%), transparent 40%),
    linear-gradient(180deg, fade(@bg-char, 52%), fade(@bg-void, 34%)),
    url("@{page-bg-url}") center center / cover no-repeat,
    linear-gradient(180deg, @bg-panel 0%, color-mix(in srgb, @bg-panel 88%, black) 100%);
  border: @border-main;
  border-radius: @radius-md;
  box-shadow: @shadow-heavy, @shadow-inset;
}

.ornate-frame() {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1px solid fade(@gold-acid, 16%);
    border-radius: calc(@radius-md - 4px);
  }
}

.caps-heading() {
  font-family: @font-display;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.body-copy() {
  font-family: @font-body;
  line-height: 1.45;
}

.metal-button() {
  .caps-heading();
  border: 1px solid fade(@gold-acid, 44%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, fade(@ember-bright, 20%), fade(@blood, 10%)),
    linear-gradient(135deg, fade(@bone, 10%), transparent 40%),
    @bg-input;
  color: @parchment;
  box-shadow: inset 0 1px 0 fade(white, 8%), 0 6px 14px fade(black, 20%);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease;

  &:hover,
  &:focus {
    border-color: fade(@ember-bright, 70%);
    color: lighten(@parchment, 8%);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 fade(white, 14%), 0 8px 18px fade(@blood, 26%);
  }
}