:root {
  --ink: #241b17;
  --paper: #f3e8cf;
  --paper-light: #fbf4e4;
  --gold: #d78a1e;
  --gold-light: #f2b940;
  --rust: #8c3e1e;
  --green: #c5db70;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Mono', monospace; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.noise { position: fixed; inset: 0; opacity: .15; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }

.site-header { height: 92px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); background: rgba(243,232,207,.96); position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; font-family: 'Press Start 2P'; font-size: 12px; line-height: 1.55; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--paper); background: var(--ink); font-size: 10px; transform: rotate(-3deg); }
.brand-mark img { width: 28px; height: auto; image-rendering: pixelated; }
nav { display: flex; gap: 38px; font-size: 12px; font-weight: 500; }
nav a, .text-link { border-bottom: 1px solid transparent; transition: border-color .2s; }
nav a:hover, .text-link:hover { border-color: var(--ink); }
.wallet-button { border: 2px solid var(--ink); background: transparent; padding: 14px 18px; font-size: 11px; font-weight: 500; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: .15s; }
.wallet-button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.status-dot { display: inline-block; width: 8px; height: 8px; background: var(--gold); margin-right: 7px; border-radius: 50%; }
.status-dot.connected { background: #52a35d; box-shadow: 0 0 0 3px #52a35d33; }

.hero { min-height: calc(100vh - 92px); display: grid; grid-template-columns: 52% 48%; position: relative; overflow: hidden; }
.hero-copy { padding: 9vh 4vw 7vh; position: relative; z-index: 2; }
.eyebrow, .kicker { font-size: 11px; letter-spacing: .14em; font-weight: 500; }
.eyebrow span { display: inline-block; width: 26px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
h1, h2 { font-family: 'Press Start 2P'; margin: 28px 0; letter-spacing: -.05em; line-height: 1.2; }
h1 { font-size: clamp(42px, 5.4vw, 82px); }
h1 mark { color: var(--gold); background: none; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
h2 { font-size: clamp(34px, 4.2vw, 66px); }
h2 i, .footer-mark i { color: var(--gold); font-style: normal; }
.intro { font-size: clamp(14px, 1.2vw, 18px); line-height: 1.7; max-width: 640px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin: 38px 0 50px; }
.primary-button, .mint-button { padding: 18px 22px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); font-family: 'Press Start 2P'; font-size: 10px; box-shadow: 5px 5px 0 var(--ink); transition: .15s; }
.primary-button:hover, .mint-button:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.primary-button span { padding-left: 15px; font-size: 16px; }
.text-link { font-size: 11px; font-weight: 500; }
.hero-stats { display: flex; gap: clamp(28px, 5vw, 75px); }
.hero-stats div { display: flex; flex-direction: column; gap: 6px; }
.hero-stats b { font-family: 'Press Start 2P'; font-size: 22px; }
.hero-stats span { font-size: 9px; opacity: .65; }
.hero-art { position: relative; background: var(--paper-light); border-left: 2px solid var(--ink); display: grid; place-items: center; }
.art-frame { width: min(38vw, 570px); aspect-ratio: 1; display: grid; place-items: center; background: #fff9e9; border: 2px solid var(--ink); box-shadow: 12px 12px 0 #b86c22; transform: rotate(1deg); }
.stamp { position: absolute; z-index: 3; top: 8%; right: 7%; border: 3px double var(--rust); color: var(--rust); padding: 10px; font-size: 8px; line-height: 1.7; text-align: center; transform: rotate(8deg); }
.specimen-tag { position: absolute; left: 9%; bottom: 8%; background: var(--ink); color: var(--paper); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; transform: rotate(-2deg); }
.specimen-tag span { color: var(--gold-light); font-size: 8px; }.specimen-tag b { font-size: 11px; }
.scroll-note { position: absolute; z-index: 3; bottom: 25px; left: 4vw; font-size: 9px; writing-mode: vertical-rl; transform: rotate(180deg); }.scroll-note span { color: var(--gold); }

/* Collection art */
.piece { display: block; width: 100%; height: auto; image-rendering: pixelated; }


.marquee { background: var(--ink); color: var(--paper); padding: 15px 0; overflow: hidden; transform: rotate(-1deg) scale(1.01); }
.marquee > div { display: flex; width: max-content; animation: marquee 22s linear infinite; font-family: 'Press Start 2P'; font-size: 9px; }
/* Each half is at least a viewport wide and identical, so the -50% loop never shows a gap. */
.marquee-half { display: flex; flex-shrink: 0; gap: 45px; padding-right: 45px; min-width: 100vw; justify-content: space-around; }
.marquee span::first-letter{color:var(--gold)}
@keyframes marquee { to { transform: translateX(-50%); } }
.section { padding: 120px 7vw; border-bottom: 2px solid var(--ink); }
.section-label { font-size: 9px; letter-spacing: .2em; padding-bottom: 15px; border-bottom: 1px solid #241b1766; }
.story { display: grid; grid-template-columns: 15% 45% 40%; gap: 3vw; background: #e9dcc0; }
.story h2 { font-size: clamp(30px, 3.7vw, 58px); }.story-copy > p:not(.kicker) { max-width: 640px; line-height: 1.8; font-size: 14px; }.signature { margin-top:40px; font-style:italic; color:var(--rust); }
.lore-card { background: var(--ink); color: var(--paper); padding: 25px; transform: rotate(1deg); box-shadow: 10px 10px 0 var(--gold); align-self:center; }.mini-mascot { background:#f9efd8; border:2px solid #f3e8cf22; }
.trait-list { margin-top:18px; }.trait-list div { display:flex; justify-content:space-between; gap:14px; padding:9px 2px; border-bottom:1px dashed #f3e8cf44; font-size:10px; }.lore-card-foot { display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; font-size:9px; }.lore-card-foot span { color:#f3e8cf88; letter-spacing:.1em; }.lore-card-foot b { font-family:'Press Start 2P'; font-size:12px; color:var(--gold-light); }.trait-list span{color:var(--gold-light)}
.collection { background: var(--paper-light); }.collection-heading { display:flex; justify-content:space-between; align-items:end; }.collection-aside { max-width:380px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }.collection-aside p { margin:0; line-height:1.7; }
.misfit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; }
.misfit-card { border:2px solid var(--ink); background:var(--paper-light); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.misfit-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:7px 7px 0 var(--ink)}
.mini-art { position:relative; border-bottom:2px solid var(--ink); background:#f8eacb; }
.rarity{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--paper);padding:6px 8px;font-size:7px;letter-spacing:.08em;z-index:4}
.rarity.tier-legendary{background:var(--gold);color:var(--ink)}
.rarity.tier-epic{background:var(--rust);color:var(--paper)}
.misfit-meta{padding:14px 15px;display:flex;flex-direction:column;gap:7px}
.misfit-id{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.misfit-id b{font-family:'Press Start 2P';font-size:10px}
.misfit-id span{font-size:8px;letter-spacing:.1em;color:var(--rust)}
.misfit-meta p{margin:0;font-size:10px;line-height:1.6;color:#6f6357}
.rarity-bands{margin-top:44px;border:2px solid var(--ink);background:var(--paper)}
.bands-label{display:block;padding:14px 18px;border-bottom:2px solid var(--ink);font-size:9px;letter-spacing:.16em;color:#6f6357}
.bands-row{display:grid;grid-template-columns:repeat(5,1fr)}
.band{padding:18px;border-right:2px solid var(--ink);display:flex;flex-direction:column;gap:5px}
.band:last-child{border-right:0}
.band b{font-family:'Press Start 2P';font-size:19px;font-variant-numeric:tabular-nums}
.band span{font-size:8px;letter-spacing:.14em;color:#6f6357}
.mint { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--gold); align-items:center; }.mint-copy > p:last-child{line-height:1.8;max-width:520px}.mint-panel{background:var(--paper-light);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:30px}.mint-top,.price-row{display:flex;justify-content:space-between;font-size:10px}.mint-top b{color:var(--rust)}.mint-top i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rust)}.mint-top i.live{background:#52a35d;box-shadow:0 0 0 3px #52a35d33;animation:pulse 1.2s infinite}.supply-row{margin:45px 0 8px;display:flex;justify-content:space-between;align-items:end;font-size:10px}.supply-row strong{font-family:'Press Start 2P';font-size:25px}.supply-row small{font-size:10px;color:#796f63}.progress{height:11px;border:2px solid var(--ink);padding:2px}.progress i{display:block;width:1%;height:100%;background:var(--gold)}.price-row{margin:30px 0}.price-row div{display:flex;flex-direction:column;gap:8px}.price-row b{font-family:'Press Start 2P';font-size:13px}.mint-button{width:100%;padding:21px;cursor:pointer}.mint-button.connected{background:#e6dcbf}.mint-button:disabled{background:#b8b0a1;cursor:not-allowed}.mint-panel>p{text-align:center;font-size:7px;margin:18px 0 0;color:#746a5d}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.qty-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;font-size:10px}.qty-buttons{display:flex;gap:8px}.qty-btn{width:44px;height:44px;border:2px solid var(--ink);background:var(--paper-light);font-family:'Press Start 2P';font-size:13px;cursor:pointer;color:var(--ink)}.qty-btn:hover{background:var(--gold)}.qty-btn.active{background:var(--gold);box-shadow:4px 4px 0 var(--ink)}.qty-btn:disabled{opacity:.35;cursor:not-allowed;background:var(--paper-light)}
.faq { display:grid;grid-template-columns:35% 65%;gap:5vw;background:#e9dcc0}.faq h2{font-size:clamp(32px,4vw,62px)}details{border-top:2px solid var(--ink);padding:24px 0}details:last-child{border-bottom:2px solid var(--ink)}summary{list-style:none;display:flex;justify-content:space-between;cursor:pointer;font-family:'Press Start 2P';font-size:11px;line-height:1.5}summary::-webkit-details-marker{display:none}summary span{font-size:20px;color:var(--gold)}details[open] summary span{transform:rotate(45deg)}details p{line-height:1.7;max-width:650px;color:#64594d;font-size:13px}
footer{background:var(--ink);color:var(--paper);padding:70px 7vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}.footer-mark{font-family:'Press Start 2P';font-size:28px;line-height:1.4}footer>div:nth-child(2){text-align:center;font-size:9px}footer>div:nth-child(2) span{opacity:.5}.socials{display:flex;justify-content:flex-end;gap:20px;font-size:9px}.socials a:hover{color:var(--gold)}
.toast{position:fixed;z-index:30;right:25px;bottom:25px;background:var(--ink);color:var(--paper);padding:18px 22px;border-left:5px solid var(--gold);font-size:11px;transform:translateY(150%);transition:.3s;box-shadow:6px 6px 0 var(--gold)}.toast.show{transform:translateY(0)}
.header-wallet{display:flex;align-items:center;gap:8px}

@media (max-width: 900px) {
  nav { display:none }.hero{grid-template-columns:1fr}.hero-copy{padding:70px 6vw}.hero-art{border-left:0;border-top:2px solid var(--ink);padding:70px 0;min-height:600px}.art-frame{width:min(80vw,520px)}.scroll-note{display:none}.story{grid-template-columns:1fr}.lore-card{max-width:500px}.collection-heading{display:block}.misfit-grid{grid-template-columns:repeat(2,1fr)}.bands-row{grid-template-columns:repeat(5,1fr)}.mint,.faq{grid-template-columns:1fr}.section{padding:90px 6vw}footer{grid-template-columns:1fr;gap:35px;text-align:left}footer>div:nth-child(2){text-align:left}.socials{justify-content:flex-start}
}
@media (max-width: 580px) {
  .site-header{height:76px;padding:0 4vw}.brand-mark{width:40px;height:40px}.brand>span:last-child{display:none}.wallet-button{padding:12px;font-size:9px}.hero{min-height:auto}.hero-copy{padding-top:55px}h1{font-size:38px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-stats{gap:22px}.hero-stats b{font-size:16px}.hero-art{min-height:470px}.art-frame{width:82vw}.stamp{top:4%;right:3%}.specimen-tag{bottom:5%;left:4%}.story,.section{padding:75px 5vw}.misfit-grid{grid-template-columns:repeat(2,1fr)}.bands-row{grid-template-columns:1fr}.band{border-right:0;border-bottom:2px solid var(--ink)}.band:last-child{border-bottom:0}.mint-panel{padding:20px}.mint-top{gap:20px}.socials{flex-wrap:wrap}.toast{left:16px;right:16px;bottom:16px}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.marquee div{animation:none}*{transition:none!important} }