/* Bettcat mini 11-en: gold coin medallion in the centre, facts orbiting it */
:root {
  --coal: #121519;
  --vault: #1a1e25;
  --vault-2: #222832;
  --seam: #303846;
  --ivory: #f2f0ea;
  --ash: #9da4b0;
  --gilt: #eeb92f;
  --gilt-dk: #a8770f;
  --lagoon: #44d3e3;
  --lagoon-dk: #1897a8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; align-items: center; padding: 26px 16px;
  background: radial-gradient(circle at 50% 46%, rgba(238,185,47,.14), transparent 360px), var(--coal);
  color: var(--ivory); font: 400 15px/1.5 "Karla", system-ui, sans-serif;
}
a { color: inherit; }

.mint { width: 100%; max-width: 1000px; margin: 0 auto; }
.mint-hd { text-align: center; }
.mint-brand { font: 400 30px/1 "Alfa Slab One", serif; color: var(--gilt); text-decoration: none; text-shadow: 0 2px 0 #000; }
.mint-sub { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }

.orbit { display: grid; grid-template-columns: 1fr minmax(0, 320px) 1fr; gap: 26px; align-items: center; margin-top: 26px; }

.ring { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ring li {
  position: relative; padding: 12px 16px; background: var(--vault); border: 1px solid var(--seam); border-radius: 14px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
}
.ring--a li { text-align: right; grid-template-columns: 1fr auto; }
.ring--a li:nth-child(2) { margin-right: 26px; }
.ring--b li:nth-child(2) { margin-left: 26px; }
.ring li::after { content: ""; position: absolute; top: 50%; width: 22px; height: 2px; background: linear-gradient(90deg, var(--gilt), transparent); }
.ring--a li::after { right: -24px; background: linear-gradient(90deg, transparent, var(--gilt)); }
.ring--b li::after { left: -24px; }
.ring-n { font: 400 24px/1 "Alfa Slab One", serif; color: var(--gilt); grid-column: 1; grid-row: 1 / 3; }
.ring-l, .ring-t { grid-column: 2; }
.ring--a .ring-n { grid-column: 2; }
.ring--a .ring-l, .ring--a .ring-t { grid-column: 1; }
.ring-l { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.ring-t { font-size: 13px; color: var(--ash); line-height: 1.4; }

.medal { text-align: center; }
.medal-art { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(238,185,47,.2)); }
.medal-h { margin: 14px 0 0; font: 400 46px/1 "Alfa Slab One", serif; color: #fff; }
.medal-h span { display: block; font: 700 13px/1 "Karla", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.medal-h small { display: block; margin-top: 8px; font: 700 15px/1.3 "Karla", sans-serif; color: var(--gilt); }
.medal-btn {
  display: block; margin: 16px auto 0; max-width: 280px; padding: 14px; border-radius: 12px; text-decoration: none;
  font: 400 18px/1 "Alfa Slab One", serif; color: #04282e;
  background: linear-gradient(180deg, var(--lagoon), var(--lagoon-dk)); box-shadow: 0 4px 0 #0f6c79;
}
.medal-btn:hover { filter: brightness(1.08); }
.medal-alt { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--ash); text-decoration: none; background: var(--vault-2); padding: 7px 14px; border-radius: 8px; }
.medal-alt:hover { color: #fff; }

.mint-ft { margin-top: 30px; text-align: center; font-size: 11.5px; color: #7d8592; }
.mint-ft p { margin: 3px 0; }
.mint-ft a { color: #c0c6d0; }

@media (max-width: 860px) {
  .orbit { grid-template-columns: 1fr 1fr; gap: 12px; }
  .medal { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .ring { gap: 12px; }
  .ring li, .ring--a li { text-align: left; grid-template-columns: 1fr; margin: 0 !important; padding: 11px 12px; }
  .ring-n, .ring-l, .ring-t, .ring--a .ring-n, .ring--a .ring-l, .ring--a .ring-t { grid-column: 1; grid-row: auto; }
  .ring-n { font-size: 21px; margin-bottom: 2px; }
  .ring li::after { display: none; }
}
@media (max-width: 380px) {
  .medal-h { font-size: 40px; }
  .ring-t { font-size: 12px; }
}