/* ============================================================ Beanhood
   Back to the first version: soot, ember and bone, Silkscreen for headings,
   bordered panels on a slightly lighter ground.

   The variable names are the later ones because every page already references
   them; the values behind them are the originals.
   ==================================================================== */

:root{
  --ink:#0b0a0a;
  --ink-2:#141110;
  --ink-3:#1c1917;
  --paper:#e9e1d0;
  --paper-dim:#a49c8c;
  --paper-faint:#7d7772;
  --rule:#2a2523;
  --rule-soft:#1e1a18;
  --ember:#ff7a1a;
  --ember-dim:#c1440e;
  --ember-glow:#ffb066;
  --gold:#b8794a;
  --blood:#8e2a2a;

  --u:8px;
  --display:'Silkscreen',monospace;
  --serif:'Silkscreen',monospace;
  --pixel:'Silkscreen',monospace;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--ember);text-decoration:none}
a:hover{color:var(--ember-glow)}

/* Grain only. The ruled grid that used to sit here read as decoration applied
   to the page rather than anything the page was about.

   Static, and exactly viewport-sized. It used to be four times the viewport
   and animated forever, which meant the sticky header's backdrop-filter had to
   re-blur a moving turbulence texture on every scroll frame — the page hitched
   the whole way down. At 3.5% opacity nobody could see it move anyway. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
main{position:relative;z-index:3}

.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}}

/* ---------------------------------------------------------------- type */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(30px,5.2vw,58px);line-height:1.06;text-transform:uppercase}
h2{font-size:clamp(22px,3.4vw,34px);color:var(--paper)}
h3{font-size:15px;color:var(--ember-glow);letter-spacing:.02em}

.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.14em;
  color:var(--ember);text-transform:uppercase}
.label{font-family:var(--display);font-size:10px;letter-spacing:.12em;
  color:var(--paper-faint);text-transform:uppercase}
.lede{font-size:clamp(16px,1.7vw,19px);color:var(--paper-dim)}
.lede b{color:var(--paper);font-weight:500}
p{color:var(--paper-dim)}
.fig{font-family:var(--mono);font-variant-numeric:tabular-nums}

section{padding:calc(var(--u)*12) 0;position:relative}
@media(max-width:720px){section{padding:calc(var(--u)*8) 0}}
.sec-head,.head{display:flex;align-items:baseline;gap:16px;margin-bottom:calc(var(--u)*5)}
.sec-num,.head .n{font-family:var(--display);font-size:12px;color:var(--ember-dim)}

/* ---------------------------------------------------------------- nav */
/* body > nav, not nav. A bare `nav` selector also catches a table of contents
   or any other nav inside the page, and makes it stick to the top of the
   window on top of everything else. The header is the only direct child. */
body > nav{position:sticky;top:0;z-index:40;background:rgba(11,10,10,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:24px;height:56px}
.brand{font-family:var(--display);font-size:15px;color:var(--paper);letter-spacing:.02em}
.brand b{color:var(--ember)}
.nav-links{margin-left:auto;display:flex;gap:24px;font-family:var(--mono);font-size:12.5px}
.nav-links a{color:var(--paper-dim)}
.nav-links a:hover{color:var(--ember)}

/* The hamburger, and the panel it opens.
   Without this the links were simply hidden below 860px and there was no way
   to reach any page but the one you landed on — which on a phone is most of
   the traffic. */
.nav-toggle{
  display:none;margin-left:auto;width:38px;height:32px;padding:0;
  background:transparent;border:1px solid var(--rule);color:var(--paper);
  cursor:pointer;position:relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';position:absolute;left:50%;width:16px;height:2px;
  background:var(--paper);transform:translateX(-50%);transition:.2s;
}
.nav-toggle span{top:50%;margin-top:-1px}
.nav-toggle span::before{top:-5px;left:0;transform:none}
.nav-toggle span::after{top:5px;left:0;transform:none}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:860px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:56px;
    flex-direction:column;gap:0;margin:0;
    background:var(--ink);border-bottom:1px solid var(--rule);
  }
  body > nav.open .nav-links{display:flex}
  .nav-links a{
    padding:16px 24px;border-top:1px solid var(--rule-soft);
    font-size:14px;color:var(--paper);
  }
  .wallet{margin-left:12px;order:2}
  .nav-toggle{order:3;margin-left:12px}
}

.wallet{
  margin-left:20px;font-family:var(--display);font-size:10px;letter-spacing:.06em;
  padding:9px 16px;background:transparent;border:1px solid var(--ember-dim);
  color:var(--ember);cursor:pointer;transition:.15s;white-space:nowrap;
}
.wallet:hover:not(:disabled){background:var(--ember);color:var(--ink);border-color:var(--ember)}
.wallet:disabled{opacity:.5;cursor:wait}
.wallet.on{border-color:var(--rule);color:var(--paper-dim);font-family:var(--mono);
  font-size:12px;letter-spacing:0;text-transform:none}
.wallet.on:hover{border-color:var(--ember);background:transparent;color:var(--ember)}
@media(max-width:860px){.wallet{margin-left:auto}}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font-family:var(--display);font-size:13px;letter-spacing:.06em;
  padding:16px 40px;border:2px solid var(--ember);color:var(--ink);
  background:var(--ember);transition:.2s;
}
.btn:hover{background:var(--ember-glow);border-color:var(--ember-glow);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ember);color:var(--ember);background:transparent}
.btn[disabled],.btn.off{background:transparent;color:var(--paper-faint);
  border-color:var(--rule);cursor:not-allowed}
.btn.off:hover{background:transparent;color:var(--paper-faint);border-color:var(--rule)}

/* ---------------------------------------------------------------- entrance */
.rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
.d4{animation-delay:.35s}.d5{animation-delay:.45s}
@media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}

/* ---------------------------------------------------------------- hero */
.plate{position:relative;border-bottom:1px solid var(--rule);overflow:hidden;background:var(--ink-2)}
.plate img{image-rendering:pixelated;width:100%;
  max-height:min(58vh,540px);object-fit:cover;object-position:70% 42%}
.plate::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(transparent,rgba(11,10,10,.55) 60%,var(--ink))}

.hero{padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*8)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.hero h1 .em{color:var(--ember);display:block}
.hero-copy{padding-top:14px}
@media(max-width:860px){.hero-copy{padding-top:0}}

/* ---------------------------------------------------------------- ticker */
.ticker{border-block:1px solid var(--rule);background:var(--ink-2);
  overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:48px;padding:12px 24px;animation:slide 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.tick{font-family:var(--mono);font-size:12.5px;color:var(--paper-dim);letter-spacing:.02em}
.tick b{color:var(--ember);font-weight:600}
.tick .pct{color:var(--gold)}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink-2);padding:24px}
.stat .k{font-family:var(--display);font-size:10px;color:var(--paper-faint);
  letter-spacing:.12em;text-transform:uppercase}
.stat .v{font-family:var(--mono);font-size:clamp(20px,2.6vw,28px);font-weight:600;
  color:var(--paper);margin-top:8px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:14px;color:var(--paper-dim);font-weight:400}

/* ---------------------------------------------------------------- flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.step{border:1px solid var(--rule);background:var(--ink-2);padding:24px;
  position:relative;transition:border-color .25s,transform .25s}
.step:hover{border-color:var(--ember-dim);transform:translateY(-4px)}
.step .n{font-family:var(--display);font-size:11px;color:var(--ember-dim)}
.step h3{margin:12px 0 8px}
.step p{font-size:14px;line-height:1.6}

/* ---------------------------------------------------------------- tiers */
.tier-row{display:grid;grid-template-columns:120px 1fr 96px 72px;gap:16px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
@media(max-width:700px){.tier-row{grid-template-columns:88px 1fr 64px;gap:12px}
  .tier-row .w{display:none}}
.tier-name{font-family:var(--display);font-size:12px;letter-spacing:.04em}
.bar{height:20px;background:var(--ink-3);position:relative;overflow:hidden}
.bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--ember-dim),var(--ember));
  animation:grow 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes grow{to{width:var(--w)}}
.tier-row .n,.tier-row .w{font-family:var(--mono);font-size:13px;
  color:var(--paper-dim);text-align:right;font-variant-numeric:tabular-nums}

.t-com{color:var(--paper-faint)}.t-unc{color:var(--gold)}.t-rar{color:var(--ember-glow)}
.t-epi{color:var(--ember)}.t-leg{color:#ffd47a}

/* ---------------------------------------------------------------- gallery */
/* Fixed column counts, not auto-fill. There are 48 pieces on show and 48 divides
   by 8, 6, 4 and 3, so the last row is always full at every breakpoint instead
   of trailing off with a ragged gap. */
.gal{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
@media(max-width:860px){.gal{grid-template-columns:repeat(6,1fr)}}
@media(max-width:600px){.gal{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.gal{grid-template-columns:repeat(3,1fr)}}
.cell{position:relative;border:1px solid var(--rule);background:var(--ink-2);
  overflow:hidden;transition:border-color .2s,transform .2s}
.cell img{image-rendering:pixelated;width:100%;aspect-ratio:1;object-fit:cover}
.cell:hover{border-color:var(--ember);transform:translateY(-3px)}
.cell .meta{position:absolute;inset:auto 0 0 0;padding:20px 8px 7px;
  background:linear-gradient(transparent,rgba(11,10,10,.94) 55%);
  transform:translateY(101%);transition:transform .22s}
.cell:hover .meta{transform:none}
.cell .meta .id{font-family:var(--mono);font-size:11px;color:var(--paper)}
.cell .meta .tr{font-family:var(--display);font-size:9px;letter-spacing:.06em}

/* ---------------------------------------------------------------- notes */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:32px}}
.note{border-left:2px solid var(--ember-dim);padding-left:20px;margin-bottom:24px}
.note h3{margin-bottom:6px}
.note p{font-size:14.5px}

.callout{border-left:2px solid var(--ember-dim);background:var(--ink-2);
  padding:18px 22px;margin:0 0 24px}
.callout p{margin:0;font-size:14.5px}
.callout.warn{border-left-color:var(--blood)}

/* ---------------------------------------------------------------- mint panel */
.mint{border:1px solid var(--ember-dim);padding:calc(var(--u)*6);text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,rgba(193,68,14,.16),transparent 60%),var(--ink-2)}
.mint h2{margin-bottom:8px}
.mint .price{font-family:var(--mono);font-size:clamp(30px,5vw,46px);font-weight:600;
  color:var(--ember);margin:16px 0 4px}
.mint .sub{font-size:14px;color:var(--paper-dim)}

/* ---------------------------------------------------------------- tables */
table,.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
th{text-align:left;font-family:var(--display);font-size:9.5px;letter-spacing:.1em;
  color:var(--paper-faint);text-transform:uppercase;font-weight:400;
  padding:10px 14px;background:var(--ink-3);border:1px solid var(--rule)}
td{padding:11px 14px;border:1px solid var(--rule);background:var(--ink-2);
  color:var(--paper-dim);vertical-align:top}
td.k{color:var(--paper);white-space:nowrap}
td.a{color:var(--ember-glow);word-break:break-all}
td.r,th.r{text-align:right}
tr:hover td{background:var(--ink-3)}
.scroll,.wrap-table{overflow-x:auto}

.addr{font-family:var(--mono);font-size:12.5px;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.addr div{background:var(--ink-2);padding:12px 16px;display:flex;gap:16px;flex-wrap:wrap}
.addr span{color:var(--paper-faint);min-width:64px}
.addr code{color:var(--paper-dim);word-break:break-all}

pre{background:var(--ink-2);border:1px solid var(--rule);padding:18px 20px;
  overflow-x:auto;margin:0 0 24px;font-family:var(--mono);font-size:12.5px;
  color:var(--paper-dim);line-height:1.7}
code{font-family:var(--mono);font-size:.92em;color:var(--ember-glow)}

/* ---------------------------------------------------------------- empty */
.empty{border:1px dashed var(--rule);background:var(--ink-2);
  padding:calc(var(--u)*8);text-align:center;color:var(--paper-faint);
  font-family:var(--mono);font-size:13px}
.empty b{display:block;font-family:var(--display);font-size:13px;
  color:var(--paper-dim);margin-bottom:10px}

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--rule);padding:calc(var(--u)*6) 0;margin-top:calc(var(--u)*8)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--paper-faint)}
.foot a{color:var(--paper-dim)}
.foot a:hover{color:var(--ember)}