ava-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: calc(18 * var(--u, 1px)) calc(20 * var(--u, 1px));
  border-radius: calc(22 * var(--u, 1px));
  background: var(--glass), var(--glass-plate);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop);
}

ava-card[pad="sm"] { padding: calc(12 * var(--u, 1px)) calc(14 * var(--u, 1px)); border-radius: calc(16 * var(--u, 1px)); }
ava-card[pad="lg"] { padding: calc(24 * var(--u, 1px)) calc(26 * var(--u, 1px)); border-radius: calc(26 * var(--u, 1px)); }

ava-card[variant="flat"] { background: var(--well); box-shadow: var(--well-shadow); }

ava-card[variant="tint"] {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),
    var(--glass-plate);
}

ava-card[variant="wrapped"] {
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, var(--warm) 22%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--warm) 10%, var(--surface)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 18px 40px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}
ava-card[variant="wrapped"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .26) 42%, transparent 52%);
  opacity: var(--wrapped-sheen, 1);
}

ava-card[interactive] { cursor: pointer; transition: transform var(--dur-long) var(--ease-spring), box-shadow var(--dur-short); }
ava-card[interactive]:hover { box-shadow: var(--glass-rim), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--glass-drop); }
ava-card[interactive]:active { transform: scale(.985); }

ava-card > .ava-card-h {
  margin-bottom: calc(10 * var(--u, 1px));
  font: italic 500 calc(15 * var(--u, 1px)) / 1.3 var(--display);
  color: var(--warm-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ava-card[variant="wrapped"] { --wrapped-sheen: .3; }
}
:root[data-theme="dark"] ava-card[variant="wrapped"], [data-scheme="dark"] ava-card[variant="wrapped"] { --wrapped-sheen: .3; }
[data-scheme="light"] ava-card[variant="wrapped"] { --wrapped-sheen: 1; }