.hero-art {
  background-image: linear-gradient(90deg, rgba(36, 27, 22, .05), rgba(36, 27, 22, .2)), url('mckee-coins-storefront.jpg');
  background-position: center;
  background-size: cover;
  min-height: 510px;
}

.hero-art:after {
  background: linear-gradient(180deg, rgba(36, 27, 22, .05), rgba(36, 27, 22, .28));
}

.hero-art .coin {
  display: none;
}

.card-image {
  border-color: rgba(91, 50, 31, .35);
}

.card-ancient .card-image { background: #70452d; }
.card-silver .card-image { background: #e8e0d2; box-shadow: none; text-shadow: none; }
.card-gold .card-image { background: #e8d5a8; box-shadow: none; text-shadow: none; }
.card-platinum .card-image { background: #d8d9d5; box-shadow: none; text-shadow: none; }
.card-american .card-image { background: #8f3f2b; }
.card-modern .card-image { background: #c4a875; }
.terms { background: #f5ecdf; }

.metal-chart { color: #54301f; display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
.metal-chart-top { align-items: flex-start; display: flex; flex-direction: column; gap: 12px; }
.metal-chart-top span { font: 500 .65rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.metal-chart-top span { align-self: center; position: relative; left: 0px; }
.metal-chart-top strong { align-self: center; transform: translateY(6px); font-family: 'Playfair Display', serif; font-size: 1.8rem; line-height: 1; }
.metal-bar { background: #d0c4b2; height: 12px; margin: 28px 0 8px; overflow: hidden; }
.metal-bar span { background: #8f3f2b; display: block; height: 100%; transition: width .5s ease; width: 0; }
.metal-scale { color: #806a54; display: flex; font: 500 .62rem 'DM Mono', monospace; justify-content: space-between; }
.metal-chart small { color: #806a54; font-size: .68rem; margin-top: 20px; }

@media (max-width: 760px) {
  .collection-card { min-height: 0; }
  .metal-chart { min-height: 150px; }
  .metal-chart-top strong { font-size: 1.45rem; }
}

body {
  background: #d8c3a7;
  color: #2b1d15;
}

.site-header {
  max-width: none;
  padding-left: max(32px, calc((100vw - 1176px) / 2));
  padding-right: max(32px, calc((100vw - 1176px) / 2));
  background: #54301f;
  color: #fff4df;
  border-bottom: 5px solid #bd8240;
}

.brand small,
.site-nav a:not(.nav-cta) { color: #e4c9a3; }
.brand-mark { background: #bd8240; box-shadow: 3px 3px 0 #241b16; }
.nav-cta { background: #bd8240; color: #241b16; }
.hero { max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); background: #e7d8c5; }
.hero h1 { color: #2b1d15; }
.hero em, h2 em { color: #8f3f2b; }
.button-dark { background: #54301f; box-shadow: 5px 5px 0 #bd8240; }
.collection { max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); background: #c9af8c; }
.collection-note { align-items: center; color: #54301f; display: flex; font: 700 1.35rem 'DM Mono', monospace; grid-column: 1 / -1; justify-content: center; margin: -12px 0 0; text-align: center; text-transform: uppercase; }
.proxibid-badge { display: block; flex: 0 0 190px; grid-column: 1 / -1; height: 118px; margin: 4px auto 0; object-fit: contain; width: 190px; }
.proxibid-link { grid-column: 1 / -1; margin: 4px auto 0; }
.collection-bid-note { color: #54301f; font-size: .9rem; grid-column: 1 / -1; line-height: 1.7; margin: 8px auto 0; max-width: 900px; text-align: center; }
.collection-card { background: #fffaf1; border-color: #8b684b; box-shadow: 5px 5px 0 rgba(84,48,31,.25); justify-content: flex-start; gap: 18px; min-height: 350px; }
.services { background: #54301f; }
.story { max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); background: #e7d8c5; }
.story-stamp { border-color: #8f3f2b; color: #8f3f2b; }
.contact { background: #8f3f2b; }
footer { background: #2b1d15; }
.secure-seal { display: block; flex: 0 0 90px; height: 72px; width: 90px; }