/* CHIAvarium — promo + rarity site. Trash-polka: bone / ink / blood / cyan,
   channel-split, scanlines, glitch. Shared by index.html and rarity.html. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&family=Special+Elite&display=swap');

:root{
  --bone:#e8e2d4; --bone-2:#b7ae9b; --ink:#0a0807; --blood:#c1121f; --cyan:#1aa3b0;
  --gold:#d6a626; --bg:#14110e; --bg-2:#1c1814;
  --type:'Archivo Black',sans-serif; --mono:'Space Mono',monospace; --stamp:'Special Elite',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--bone); font-family:var(--mono);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* global scanlines + grain + vignette overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:
    repeating-linear-gradient(0deg, rgba(10,8,7,.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 10%, transparent 55%, rgba(10,8,7,.55) 100%);
  mix-blend-mode:multiply;
}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--blood)}

.wrap{max-width:1140px; margin:0 auto; padding:0 22px}
section{padding:64px 0; position:relative}
.rule{height:0; border-top:3px solid var(--blood); margin:0; opacity:.9}

.kicker{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--blood)}
.eyebrow{font-family:var(--stamp); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-2)}

h1,h2,h3{font-family:var(--type); text-transform:uppercase; line-height:.94; letter-spacing:.005em}
h2{font-size:clamp(30px,5vw,58px); margin:10px 0 6px}
h3{font-size:20px; margin:0}
p{max-width:68ch}
.muted{color:var(--bone-2)}
.blood{color:var(--blood)} .cyan{color:var(--cyan)} .gold{color:var(--gold)}

/* channel-split text */
.split{position:relative; text-shadow:
  calc(-1*var(--sp,3px)) 1px rgba(193,18,31,.55),
  var(--sp,3px) -1px rgba(26,163,176,.45);}

/* ---------- hero ---------- */
.hero{padding:0; min-height:88vh; display:flex; align-items:center;
  border-bottom:3px solid var(--blood); position:relative; overflow:hidden}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  filter:contrast(1.05)}
.hero-grad{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,17,14,.94) 0 42%, rgba(20,17,14,.5) 100%)}
.hero-inner{position:relative; z-index:2; padding:40px 0}
.wordmark{font-family:var(--type); text-transform:uppercase; font-size:clamp(52px,11vw,150px);
  line-height:.84; letter-spacing:-.01em; margin:14px 0 18px; position:relative;
  color:var(--bone); animation:rgb 5.5s steps(1) infinite}
@keyframes rgb{
  0%,92%,100%{text-shadow:-4px 2px rgba(193,18,31,.7), 4px -2px rgba(26,163,176,.5)}
  93%{text-shadow:-16px 0 rgba(193,18,31,.85), 12px 0 rgba(26,163,176,.7); transform:translateX(-3px)}
  95%{text-shadow:9px 1px rgba(193,18,31,.8), -10px -1px rgba(26,163,176,.7); transform:translateX(4px)}
  97%{text-shadow:-4px 2px rgba(193,18,31,.7), 4px -2px rgba(26,163,176,.5); transform:translateX(0)}
}
.lede{font-size:clamp(15px,1.7vw,19px); max-width:60ch; color:var(--bone)}
.tagstamp{display:inline-block; font-family:var(--stamp); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blood); border:2px solid var(--blood);
  padding:6px 12px; transform:rotate(-2deg); margin-bottom:8px}

/* ---------- stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--blood);
  border-bottom:3px solid var(--blood)}
.stat{padding:22px; border-right:1px solid rgba(183,174,155,.18)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--type); font-size:clamp(26px,3.4vw,40px); color:var(--bone)}
.stat .l{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-2)}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-family:var(--type); text-transform:uppercase; letter-spacing:.03em;
  font-size:15px; padding:15px 26px; background:var(--blood); color:var(--bone);
  border:none; cursor:pointer; transition:transform .08s}
.btn:hover{color:var(--bone); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink)}
.btn.ghost{background:transparent; color:var(--bone); border:2px solid var(--bone)}

/* ---------- pattern cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:18px}
.card{background:var(--bg-2); border:1px solid rgba(183,174,155,.16); position:relative;
  transition:transform .1s, border-color .15s}
.card:hover{transform:translateY(-3px); border-color:var(--blood)}
.card .thumbwrap{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bone)}
.card canvas{display:block; width:100%; height:100%}
.card .body{padding:11px 12px 13px}
.card .pname{font-family:var(--type); font-size:15px; text-transform:uppercase; line-height:1}
.card .pmeta{font-size:11px; color:var(--bone-2); letter-spacing:.04em; margin-top:5px;
  display:flex; justify-content:space-between; gap:8px}
.tag{position:absolute; top:8px; left:8px; z-index:2; font-family:var(--stamp); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; color:var(--ink)}
.tag.common{background:var(--bone-2)} .tag.uncommon{background:var(--cyan); color:var(--ink)}
.tag.rare{background:var(--blood); color:var(--bone)} .tag.legendary{background:var(--gold); color:var(--ink)}
.pct{font-family:var(--mono); font-weight:700}

/* ---------- artifact icons ---------- */
.artgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px}
.artcard{display:flex; gap:14px; align-items:flex-start; padding:16px; background:var(--bg-2);
  border:1px solid rgba(183,174,155,.16)}
.artcard canvas{width:64px; height:64px; flex:none; background:var(--bone)}
.artcard h3{font-size:16px; margin-bottom:4px}
.artcard .fq{font-size:11px; color:var(--bone-2); letter-spacing:.06em; margin-top:6px}

/* ---------- rarity bars / tables ---------- */
.bars{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.bar{display:grid; grid-template-columns:150px 1fr 92px; align-items:center; gap:14px; font-size:13px}
.bar .lab{font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase}
.bar .track{height:18px; background:var(--bg-2); border:1px solid rgba(183,174,155,.16); position:relative}
.bar .fill{display:block; height:100%; min-width:2px; background:var(--blood); position:relative;
  box-shadow:0 0 10px rgba(193,18,31,.35)}
.bar .val{font-family:var(--mono); font-weight:700; text-align:right; color:var(--bone-2)}

table{width:100%; border-collapse:collapse; font-size:13px; margin-top:8px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid rgba(183,174,155,.14)}
th{font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:11px; color:var(--blood); border-bottom:2px solid var(--blood)}
tr:hover td{background:var(--bg-2)}
td.r,th.r{text-align:right}
.swatch{display:inline-block; width:9px; height:9px; margin-right:7px; vertical-align:middle}

/* tier section headers colored */
.tierhead{display:flex; align-items:baseline; gap:14px; margin:34px 0 14px}
.tierhead .dot{width:14px; height:14px; transform:rotate(45deg)}
.tierhead .cnt{font-family:var(--mono); font-size:12px; color:var(--bone-2); letter-spacing:.1em}

/* callout */
.callout{border:3px solid var(--gold); padding:26px; background:var(--bg-2); position:relative}
.callout .stamp{position:absolute; top:-14px; right:18px; font-family:var(--stamp);
  background:var(--gold); color:var(--ink); padding:3px 10px; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; transform:rotate(-3deg)}

/* ---------- mint address box ---------- */
.mintbox{margin-top:30px; border:3px solid var(--blood); background:var(--bg-2);
  padding:28px 26px 24px; position:relative}
.mintbox .stamp{position:absolute; top:-14px; left:18px; font-family:var(--stamp);
  background:var(--blood); color:var(--bone); padding:3px 10px; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; transform:rotate(-2deg)}
.mb-price{font-size:15px; margin-bottom:14px; max-width:none}
.addr-row{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
#mint-addr{flex:1 1 280px; min-width:0; font-family:var(--mono); font-size:13px; line-height:1.55;
  word-break:break-all; background:var(--ink); color:var(--cyan);
  border:1px solid rgba(183,174,155,.2); padding:12px 14px}
.btn.copy{flex:none; font-size:13px; padding:12px 22px; display:inline-flex; align-items:center}
.mb-warn{list-style:none; margin-top:18px; font-size:12.5px; line-height:1.65;
  color:var(--bone-2); display:flex; flex-direction:column; gap:9px; max-width:none}
.mb-warn li{padding-left:20px; position:relative}
.mb-warn li::before{content:"!"; position:absolute; left:0; top:-1px; color:var(--blood);
  font-weight:700; font-family:var(--type)}
.mb-warn code, .mb-price code{color:var(--bone); background:var(--ink); padding:1px 5px;
  font-family:var(--mono); font-size:12px}

/* live remaining counter */
.is-hidden{display:none !important}
.mb-remaining{font-family:var(--type); text-transform:uppercase; color:var(--gold);
  font-size:clamp(22px,3.4vw,34px); line-height:1; margin-bottom:14px}
.mb-remaining strong{font-size:1em}
.mb-remaining span{font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.08em; color:var(--bone-2); text-transform:uppercase}

/* sold-out states */
.btn.is-disabled{background:var(--bg-2); color:var(--bone-2); border-color:var(--bone-2);
  cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none}
.mintbox.soldout{border-color:var(--bone-2)}
.mintbox.soldout .stamp{background:var(--bone-2); color:var(--ink)}
.mintbox.soldout .addr-row, .mintbox.soldout .mb-warn, .mintbox.soldout .mb-price{display:none}
.mintbox.soldout .mb-remaining{color:var(--blood)}

footer{border-top:3px solid var(--blood); padding:30px 0; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-2)}
.navtop{display:flex; justify-content:space-between; align-items:center; padding:16px 0;
  font-family:var(--stamp); letter-spacing:.16em; text-transform:uppercase; font-size:13px}

.lead-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:46px; align-items:start}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .lead-grid{grid-template-columns:1fr; gap:26px}
  .bar{grid-template-columns:110px 1fr 70px; gap:8px}
}