/* A transparent host preserves the true cut corners and the shaped shadow. */
:is(.button, .eternal-btn) {
  --cut: 8px;
  --shape: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
  --button-ink: #fff6df;
  --rim: linear-gradient(
    180deg,
    #ead49b 0%,
    #ae8840 12%,
    #856022 52%,
    #52370f 86%,
    #bc9954 100%
  );
  --face:
    radial-gradient(ellipse at 50% -15%, #ffe3a457, transparent 65%),
    radial-gradient(ellipse at 28% 80%, #35210535, transparent 65%),
    radial-gradient(ellipse at 95% 40%, #d3aa5222, transparent 40%),
    repeating-linear-gradient(
      173deg,
      transparent 0 7px,
      #fff0c205 7px 8px,
      transparent 8px 13px
    ),
    repeating-radial-gradient(
      ellipse at 15% 40%,
      #f3d59408 0 0.5px,
      transparent 0.8px 3.7px
    ),
    linear-gradient(
      180deg,
      #a98139 0%,
      #8d6828 18%,
      #76521c 52%,
      #654310 85%,
      #57380e 100%
    );
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 210px;
  min-height: 60px;
  padding: 14px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--button-ink);
  font: 700 16px/1.3 var(--serif, "EB Garamond", Georgia, serif);
  letter-spacing: 0.17em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px #2e1b0baa;
  filter: drop-shadow(0 2px 1px #42280960) drop-shadow(0 4px 4px #42280920);
  cursor: pointer;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}
:is(.button, .eternal-btn)::before,
:is(.button, .eternal-btn)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: var(--shape);
}
/* Metallic rim with upper illumination and a dark lower bevel. */
:is(.button, .eternal-btn)::before {
  inset: 0;
  z-index: -2;
  background: var(--rim);
}
/* Nine-slice SVG: double hairline and fine engravings retain their proportions. */
:is(.button, .eternal-btn)::after {
  --cut: 7px;
  inset: 2px;
  z-index: -1;
  border: 0 solid transparent;
  border-image: url("/assets/button-ornament.svg") 28 / 22px / 0 stretch;
  background: var(--face);
  box-shadow:
    inset 0 2px 0 #fff0bf62,
    inset 0 5px 5px #ffdf9630,
    inset 0 -3px 0 #382207b3,
    inset 0 -7px 9px #3c240830;
}
:is(.button.outline, .eternal-btn--secondary) {
  --button-ink: #59401d;
  --rim: linear-gradient(180deg, #e5cda0, #b39050 22%, #a17b37 80%, #ccac70);
  --face:
    radial-gradient(ellipse at 50% 0, #ffffffd9, transparent 75%),
    radial-gradient(ellipse at 10% 90%, #b39b6a15, transparent 60%),
    repeating-linear-gradient(
      173deg,
      transparent 0 7px,
      #80663106 7px 8px,
      transparent 8px 13px
    ),
    repeating-radial-gradient(
      ellipse at 15% 40%,
      #7e694a06 0 0.5px,
      transparent 0.8px 3.7px
    ),
    linear-gradient(180deg, #fffdf7, #f4efe3 60%, #e8dfcd);
  background: transparent;
  color: var(--button-ink);
  box-shadow: none;
  text-shadow: 0 1px 0 #fff;
  filter: drop-shadow(0 2px 1px #60441530) drop-shadow(0 4px 4px #60441512);
}
:is(.button.outline, .eternal-btn--secondary)::after {
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 #bda26d55,
    inset 0 -5px 8px #9f845418;
}
/* Override the earlier rectangular button states. */
.button:hover,
.button.outline:hover {
  background: transparent;
  color: var(--button-ink);
  box-shadow: none;
}
:is(.button, .eternal-btn) > span {
  position: relative;
}
.eternal-btn__icon {
  font: 400 17px/1 var(--sans, Arial, sans-serif);
  letter-spacing: 0;
}
@media (hover: hover) {
  :is(.button, .eternal-btn):not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
    filter: brightness(1.07) drop-shadow(0 3px 2px #42280950)
      drop-shadow(0 5px 5px #42280920);
  }
}
:is(.button, .eternal-btn):focus-visible {
  outline: 2px solid var(--gold-dark, #806126);
  outline-offset: 5px;
}
:is(.button, .eternal-btn):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px);
}
:is(.button, .eternal-btn):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.button.compact {
  min-width: 0;
  min-height: 42px;
  padding: 11px 22px;
  font-size: 11px;
}
.button.compact::after {
  border-image-width: 17px;
}
@media (max-width: 600px) {
  .hero .actions {
    flex-wrap: wrap;
  }
  .hero .button {
    min-width: 0;
    flex: 1 1 145px;
    min-height: 54px;
    padding: 12px 18px;
    gap: 12px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .account-links .button.compact {
    min-width: 0;
    padding: 9px 12px;
    font-size: 9px;
  }
  dialog .actions {
    flex-wrap: wrap;
  }
  dialog .button {
    min-width: 0;
    flex: 1 1 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.button, .eternal-btn) {
    transition: none;
  }
  :is(.button, .eternal-btn):not(:disabled):not([aria-disabled="true"]):hover {
    transform: none;
  }
}

.eternal-font {
  background: linear-gradient(
    180deg,
    #a98139 0%,
    #8d6828 18%,
    #76521c 52%,
    #654310 85%,
    #57380e 100%
  );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}