DogeWifHat \u2014 The Hat Heard Round The Chain<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Luckiest+Guy&family=Nunito:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg-yellow:#FFD447;\n --bg-yellow-deep:#FFC61A;\n --wood-1:#8a5a34;\n --wood-2:#6b4226;\n --wood-3:#4a2c17;\n --cream:#FFF6E0;\n --ink:#2b1b0e;\n --accent-red:#FF5A36;\n --accent-green:#3CB878;\n --accent-blue:#4C8DFF;\n --shadow:rgba(43,27,14,0.28);\n --tape-blue:#AEE3E8;\n --tape-orange:#F5B971;\n --tape-pink:#F5A9C1;\n --tape-green:#B7E0A6;\n }\n\n *{margin:0;padding:0;box-sizing:border-box;}\n\n html{scroll-behavior:smooth;}\n\n body{\n font-family:'Nunito', sans-serif;\n background:var(--bg-yellow);\n color:var(--ink);\n overflow-x:hidden;\n }\n\n h1,h2,h3,.display{\n font-family:'Luckiest Guy', cursive;\n font-weight:400;\n letter-spacing:.02em;\n line-height:1;\n }\n\n .mono{font-family:'Space Mono', monospace;}\n\n a{text-decoration:none;color:inherit;}\n\n img{display:block;max-width:100%;}\n\n ::selection{background:var(--accent-red);color:var(--cream);}\n\n \/* ---------- utility ---------- *\/\n .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:8px;\n font-family:'Space Mono', monospace;\n font-size:12px;\n letter-spacing:.18em;\n text-transform:uppercase;\n font-weight:700;\n color:var(--wood-3);\n background:var(--cream);\n padding:6px 14px;\n border-radius:999px;\n border:2px solid var(--wood-3);\n box-shadow:3px 3px 0 var(--wood-3);\n }\n .eyebrow::before{content:\"\ud83d\udc3e\";}\n\n .btn{\n appearance:none;\n -webkit-appearance:none;\n font-family:'Nunito', sans-serif;\n font-weight:700;\n font-size:17px;\n letter-spacing:.02em;\n padding:14px 30px;\n border-radius:14px;\n border:3px solid var(--ink);\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n gap:8px;\n transition:transform .18s ease, box-shadow .18s ease;\n box-shadow:5px 5px 0 var(--ink);\n }\n .btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);}\n .btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}\n .btn-primary{background:var(--accent-red);color:var(--cream);}\n .btn-secondary{background:var(--cream);color:var(--ink);}\n .btn-dark{background:var(--wood-3);color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 rgba(255,246,224,.4);}\n .btn-dark:hover{box-shadow:8px 8px 0 rgba(255,246,224,.4);}\n\n section{position:relative;}\n\n .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;}\n .reveal.in-view{opacity:1;transform:translateY(0);}\n .reveal-delay-1.in-view{transition-delay:.1s;}\n .reveal-delay-2.in-view{transition-delay:.2s;}\n .reveal-delay-3.in-view{transition-delay:.3s;}\n .reveal-delay-4.in-view{transition-delay:.4s;}\n\n @media (prefers-reduced-motion: reduce){\n *{animation:none !important; transition:none !important;}\n html{scroll-behavior:auto;}\n .reveal{opacity:1;transform:none;}\n }\n\n \/* ---------- header ---------- *\/\n header{\n position:fixed;\n top:14px;left:50%;\n transform:translateX(-50%);\n width:min(94%, 1180px);\n z-index:100;\n background:\n repeating-linear-gradient(180deg, var(--wood-1) 0px, var(--wood-1) 3px, var(--wood-2) 3px, var(--wood-2) 6px);\n border:3px solid var(--wood-3);\n border-radius:20px;\n box-shadow:0 10px 0 rgba(0,0,0,.15), 0 14px 26px rgba(0,0,0,.3);\n padding:10px 18px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:12px;\n }\n\n .logo{display:flex;align-items:center;gap:10px;}\n .logo-text{font-family:'Luckiest Guy';color:var(--cream);font-size:22px;font-weight:400;letter-spacing:.02em;\n text-shadow:2px 2px 0 var(--wood-3);}\n\n nav.links{display:flex;gap:6px;background:rgba(0,0,0,.15);padding:6px;border-radius:14px;}\n nav.links a{\n color:var(--cream);\n font-family:'Nunito';\n font-weight:600;\n font-size:14.5px;\n padding:9px 16px;\n border-radius:10px;\n transition:background .2s ease, color .2s ease;\n }\n nav.links a:hover{background:var(--cream);color:var(--wood-3);}\n\n .header-right{display:flex;align-items:center;gap:16px;}\n .text-link{\n font-family:'Nunito';\n font-weight:800;\n font-size:14px;\n letter-spacing:.03em;\n color:var(--cream);\n padding:6px 2px;\n border-bottom:2px solid transparent;\n transition:border-color .2s ease, color .2s ease;\n }\n .text-link:hover{border-color:var(--cream);color:var(--bg-yellow);}\n\n .join-btn{\n background:var(--accent-red);\n color:var(--cream);\n font-family:'Nunito';\n font-weight:700;\n font-size:14px;\n padding:11px 20px;\n border-radius:12px;\n border:2px solid var(--ink);\n white-space:nowrap;\n box-shadow:3px 3px 0 var(--ink);\n transition:transform .18s ease;\n }\n .join-btn:hover{transform:translateY(-2px);}\n\n .burger{display:none;width:38px;height:38px;border-radius:10px;background:var(--cream);border:2px solid var(--ink);\n align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;}\n .burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;}\n\n @media (max-width:900px){\n nav.links{display:none;}\n .join-btn{display:none;}\n .text-link{display:none;}\n .burger{display:flex;}\n }\n\n .mobile-menu{\n position:fixed;top:86px;left:50%;transform:translateX(-50%);\n width:min(94%,1180px);\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:16px;\n z-index:99;\n padding:16px;\n display:none;\n flex-direction:column;\n gap:6px;\n box-shadow:6px 6px 0 var(--ink);\n }\n .mobile-menu.open{display:flex;}\n .mobile-menu a{font-family:'Nunito';font-weight:700;padding:12px;border-radius:10px;}\n .mobile-menu a:hover{background:var(--bg-yellow-deep);}\n\n \/* ---------- HERO ---------- *\/\n #hero{\n min-height:100vh;\n padding:150px 6vw 60px;\n display:flex;\n flex-direction:column;\n align-items:center;\n text-align:center;\n background:\n radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0, transparent 40%),\n radial-gradient(circle at 85% 10%, rgba(255,255,255,.25) 0, transparent 35%),\n var(--bg-yellow);\n overflow:hidden;\n position:relative;\n }\n\n #hero::before{\n content:\"\";\n position:absolute;inset:0;\n background-image:radial-gradient(var(--wood-3) 1.4px, transparent 1.4px);\n background-size:26px 26px;\n opacity:.06;\n pointer-events:none;\n }\n\n .hero-eyebrow{margin-bottom:22px;}\n\n .hero-title{\n font-size:clamp(48px, 9vw, 128px);\n font-weight:800;\n color:var(--cream);\n -webkit-text-stroke:3px var(--ink);\n text-shadow:6px 6px 0 var(--ink), 12px 12px 0 rgba(255,90,54,.55);\n letter-spacing:.01em;\n }\n\n .hero-sub{\n max-width:620px;\n margin:26px auto 0;\n font-size:clamp(16px,2vw,19px);\n font-weight:700;\n color:var(--wood-3);\n }\n\n .hero-ctas{\n margin-top:34px;\n display:flex;\n gap:16px;\n flex-wrap:wrap;\n justify-content:center;\n }\n\n .hero-ticker{\n margin-top:22px;\n font-family:'Space Mono';\n font-size:13px;\n letter-spacing:.12em;\n color:var(--wood-3);\n font-weight:700;\n }\n\n .hero-stage{\n position:relative;\n margin-top:20px;\n width:100%;\n max-width:720px;\n flex:1;\n display:flex;\n align-items:flex-end;\n justify-content:center;\n }\n\n .hero-doge-frame{\n margin-bottom: -80px;\n width:min(82vw, 780px);\n aspect-ratio:1\/1;\n display:flex;\n align-items:flex-end;\n justify-content:end;\n align-items: end;\n filter:drop-shadow(0 22px 18px rgba(43,27,14,.35));\n animation:bob 2.6s ease-in-out infinite;\n }\n .hero-doge-frame img{width:100%;height:100%;object-fit:contain;}\n\n @keyframes bob{\n 0%,100%{transform:translateY(0) rotate(-1deg);}\n 50%{transform:translateY(-14px) rotate(1deg);}\n }\n\n .floaty-sticker{\n position:absolute;\n background:var(--cream);\n border:2px solid var(--ink);\n border-radius:12px;\n padding:8px 10px;\n font-family:'Nunito';\n font-weight:700;\n font-size:13px;\n box-shadow:4px 4px 0 var(--ink);\n animation:float-slow 5s ease-in-out infinite;\n }\n .floaty-sticker span{display:block;font-size:16px;}\n .fs1{top:16%;left:6%;transform:rotate(-9deg);animation-delay:.2s;}\n .fs2{top:28%;right:6%;transform:rotate(8deg);animation-delay:1.1s;}\n .fs3{bottom:32%;left:3%;transform:rotate(6deg);animation-delay:.6s;}\n .fs4{bottom:22%;right:4%;transform:rotate(-7deg);animation-delay:1.6s;}\n\n \/*@keyframes float-slow{*\/\n \/* 0%,100%{transform:translateY(0) rotate(var(--r,0deg));}*\/\n \/* 50%{transform:translateY(-10px) rotate(var(--r,0deg));}*\/\n \/*}*\/\n\n \/* ---------- SECTION 2: FEATURED \/ LEGEND (asymmetric split) ---------- *\/\n #legend{\n background:var(--cream);\n padding:120px 6vw;\n display:grid;\n grid-template-columns:1.05fr 0.95fr;\n gap:60px;\n align-items:center;\n position:relative;\n border-top:3px solid var(--ink);\n border-bottom:3px solid var(--ink);\n }\n\n .legend-copy h2{\n font-size:clamp(34px,4.6vw,58px);\n margin:18px 0 20px;\n color:var(--ink);\n }\n .legend-copy h2 em{\n font-style:normal;\n color:var(--accent-red);\n }\n .legend-copy p{\n font-size:17px;\n line-height:1.7;\n font-weight:600;\n color:var(--wood-3);\n max-width:520px;\n margin-bottom:28px;\n }\n\n .stat-row{\n display:flex;\n gap:14px;\n flex-wrap:wrap;\n }\n .stat-chip{\n background:var(--bg-yellow);\n border:2.5px solid var(--ink);\n border-radius:16px;\n padding:14px 18px;\n min-width:120px;\n box-shadow:4px 4px 0 var(--ink);\n }\n .stat-chip strong{\n display:block;\n font-family:'Nunito';\n font-weight:800;\n font-size:24px;\n }\n .stat-chip span{\n font-family:'Space Mono';\n font-size:10.5px;\n letter-spacing:.08em;\n text-transform:uppercase;\n font-weight:700;\n color:var(--wood-3);\n }\n\n .legend-visual{\n position:relative;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .legend-visual-frame{\n position:relative;\n width:min(100%, 440px);\n border-radius:26px;\n overflow:hidden;\n border:4px solid var(--ink);\n box-shadow:10px 10px 0 var(--wood-2);\n animation:float-img 4.5s ease-in-out infinite;\n }\n .legend-visual-frame img{width:100%;display:block;}\n @keyframes float-img{\n 0%,100%{transform:translateY(0) rotate(-1.4deg);}\n 50%{transform:translateY(-16px) rotate(1.2deg);}\n }\n\n .stamp{\n position:absolute;\n background:var(--accent-green);\n color:var(--cream);\n border:2px solid var(--ink);\n border-radius:50%;\n width:96px;height:96px;\n display:flex;\n align-items:center;\n justify-content:center;\n text-align:center;\n font-family:'Nunito';\n font-weight:800;\n font-size:12px;\n line-height:1.15;\n transform:rotate(-14deg);\n top:-22px;right:-18px;\n box-shadow:4px 4px 0 var(--ink);\n animation:spin-wobble 6s ease-in-out infinite;\n }\n @keyframes spin-wobble{\n 0%,100%{transform:rotate(-14deg);}\n 50%{transform:rotate(-6deg);}\n }\n\n @media (max-width:900px){\n #legend{grid-template-columns:1fr;padding:90px 6vw;gap:44px;}\n .legend-visual{order:-1;}\n }\n\n \/* ---------- SECTION 3: FEATURES (comic panel collage) ---------- *\/\n #features{\n background:var(--wood-3);\n padding:130px 6vw;\n position:relative;\n overflow:hidden;\n }\n #features::before{\n content:\"\";\n position:absolute;inset:0;\n background-image:radial-gradient(rgba(255,246,224,.14) 1.6px, transparent 1.6px);\n background-size:22px 22px;\n }\n .features-head{\n text-align:center;\n max-width:680px;\n margin:0 auto 60px;\n position:relative;\n }\n .features-head h2{\n color:var(--cream);\n font-size:clamp(32px,4.4vw,54px);\n margin-top:16px;\n }\n .features-head p{\n color:#e8d8bf;\n font-weight:700;\n margin-top:14px;\n font-size:16px;\n }\n\n .panel-grid{\n position:relative;\n max-width:1100px;\n margin:0 auto;\n display:grid;\n grid-template-columns:repeat(3, 1fr);\n gap:26px;\n }\n\n .panel{\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:18px;\n padding:26px 22px 24px;\n box-shadow:7px 7px 0 rgba(0,0,0,.35);\n transition:transform .3s ease, box-shadow .3s ease;\n cursor:default;\n }\n .panel:nth-child(1){transform:rotate(-2.2deg);}\n .panel:nth-child(2){transform:rotate(1.4deg);}\n .panel:nth-child(3){transform:rotate(-1deg);}\n .panel:nth-child(4){transform:rotate(1.8deg);}\n .panel:nth-child(5){transform:rotate(-1.6deg);}\n .panel:nth-child(6){transform:rotate(2deg);}\n .panel:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:10px 12px 0 rgba(0,0,0,.4);}\n\n .panel-icon{\n width:52px;height:52px;\n border-radius:12px;\n background:var(--bg-yellow);\n border:2.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n font-size:24px;\n margin-bottom:14px;\n }\n .panel h3{\n font-size:20px;\n margin-bottom:8px;\n }\n .panel p{\n font-size:14.5px;\n font-weight:700;\n color:var(--wood-3);\n line-height:1.55;\n }\n\n @media (max-width:900px){\n .panel-grid{grid-template-columns:repeat(2,1fr);}\n }\n @media (max-width:600px){\n .panel-grid{grid-template-columns:1fr;}\n .panel{transform:none !important;}\n }\n\n \/* ---------- SECTION 4: GALLERY ---------- *\/\n #gallery{\n background:var(--bg-yellow-deep);\n padding:120px 6vw;\n position:relative;\n }\n .gallery-head{\n display:flex;\n justify-content:space-between;\n align-items:flex-end;\n flex-wrap:wrap;\n gap:18px;\n max-width:1180px;\n margin:0 auto 46px;\n }\n .gallery-head h2{\n font-size:clamp(30px,4.2vw,50px);\n margin-top:14px;\n }\n .gallery-head p{\n max-width:360px;\n font-weight:700;\n color:var(--wood-3);\n font-size:15px;\n }\n\n .gallery-grid{\n max-width:1180px;\n margin:0 auto;\n display:grid;\n grid-template-columns:repeat(6, 1fr);\n gap:18px;\n }\n .polaroid{\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:10px;\n padding:10px 10px 34px;\n box-shadow:5px 5px 0 var(--ink);\n cursor:pointer;\n position:relative;\n transition:transform .25s ease, box-shadow .25s ease;\n }\n .polaroid:nth-child(6n+1){transform:rotate(-4deg);}\n .polaroid:nth-child(6n+2){transform:rotate(3deg);}\n .polaroid:nth-child(6n+3){transform:rotate(-2deg);}\n .polaroid:nth-child(6n+4){transform:rotate(4deg);}\n .polaroid:nth-child(6n+5){transform:rotate(-3deg);}\n .polaroid:nth-child(6n+6){transform:rotate(2deg);}\n .polaroid:hover{transform:rotate(0deg) translateY(-8px) scale(1.06);box-shadow:8px 10px 0 var(--ink);z-index:5;}\n\n .polaroid .tape{\n position:absolute;top:-12px;left:50%;\n transform:translateX(-50%) rotate(-4deg);\n width:52px;height:20px;\n opacity:.85;\n border:1px solid rgba(0,0,0,.15);\n }\n .polaroid:nth-child(6n+1) .tape{background:var(--tape-blue);}\n .polaroid:nth-child(6n+2) .tape{background:var(--tape-orange);}\n .polaroid:nth-child(6n+3) .tape{background:var(--tape-pink);}\n .polaroid:nth-child(6n+4) .tape{background:var(--tape-green);}\n .polaroid:nth-child(6n+5) .tape{background:var(--tape-blue);}\n .polaroid:nth-child(6n+6) .tape{background:var(--tape-orange);}\n\n .polaroid .frame{\n aspect-ratio:1\/1;\n overflow:hidden;\n border-radius:4px;\n background:var(--bg-yellow);\n }\n .polaroid .frame img{\n width:100%;height:100%;object-fit:cover;\n transition:transform .4s ease;\n }\n .polaroid:hover .frame img{transform:scale(1.12) rotate(1deg);}\n\n .polaroid .cap{\n position:absolute;\n bottom:8px;left:0;right:0;\n text-align:center;\n font-family:'Nunito';\n font-weight:700;\n font-size:13px;\n }\n\n @media (max-width:1000px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}\n @media (max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}\n\n \/* lightbox *\/\n .lightbox{\n position:fixed;inset:0;\n background:rgba(20,12,6,.88);\n z-index:200;\n display:none;\n align-items:center;\n justify-content:center;\n padding:24px;\n }\n .lightbox.open{display:flex;}\n .lightbox-inner{\n position:relative;\n max-width:480px;\n width:100%;\n background:var(--cream);\n border:4px solid var(--ink);\n border-radius:18px;\n padding:18px 18px 26px;\n text-align:center;\n animation:pop-in .25s ease;\n }\n @keyframes pop-in{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}\n .lightbox-inner img{width:100%;border-radius:10px;border:2px solid var(--ink);}\n .lightbox-inner h4{margin-top:16px;font-size:22px;}\n .lightbox-close{\n position:absolute;top:-16px;right:-16px;\n width:38px;height:38px;border-radius:50%;\n background:var(--accent-red);color:var(--cream);\n border:3px solid var(--ink);\n font-family:'Nunito';font-weight:800;\n display:flex;align-items:center;justify-content:center;\n cursor:pointer;\n box-shadow:3px 3px 0 var(--ink);\n }\n .lightbox-nav{\n position:absolute;top:50%;\n transform:translateY(-50%);\n width:44px;height:44px;border-radius:50%;\n background:var(--cream);\n border:3px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n cursor:pointer;\n font-size:18px;\n font-weight:800;\n }\n .lightbox-prev{left:-56px;}\n .lightbox-next{right:-56px;}\n @media (max-width:640px){\n .lightbox-prev{left:6px;}\n .lightbox-next{right:6px;}\n }\n\n \/* ---------- SECTION 5: CTA \/ JOIN ---------- *\/\n #join{\n background:var(--wood-3);\n padding:0 0 70px;\n position:relative;\n overflow:hidden;\n text-align:center;\n }\n .torn-edge{\n width:100%;\n height:60px;\n display:block;\n }\n .join-inner{\n padding:20px 6vw 0;\n max-width:760px;\n margin:0 auto;\n }\n #join .eyebrow{background:var(--wood-3);color:var(--cream);border-color:var(--cream);box-shadow:3px 3px 0 rgba(255,246,224,.4);}\n #join h2{\n color:var(--cream);\n font-size:clamp(34px,5.2vw,64px);\n margin:20px 0 16px;\n }\n #join p.lede{\n color:#e8d8bf;\n font-weight:700;\n font-size:16px;\n max-width:520px;\n margin:0 auto 34px;\n }\n\n .ticker-plate{\n display:inline-flex;\n align-items:center;\n gap:14px;\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:16px;\n padding:16px 24px;\n box-shadow:6px 6px 0 rgba(255,246,224,.25);\n margin-bottom:34px;\n }\n .ticker-plate .dollar{\n font-family:'Nunito';font-weight:800;font-size:26px;color:var(--accent-red);\n }\n .ticker-plate .mono{font-size:19px;font-weight:700;letter-spacing:.02em;}\n .copy-btn{\n background:var(--bg-yellow);\n border:2px solid var(--ink);\n border-radius:10px;\n padding:8px 12px;\n font-family:'Space Mono';\n font-size:11px;\n font-weight:700;\n cursor:pointer;\n transition:background .2s ease;\n }\n .copy-btn:hover{background:var(--accent-green);color:var(--cream);}\n\n .join-ctas{\n display:flex;\n gap:16px;\n justify-content:center;\n flex-wrap:wrap;\n margin-bottom:44px;\n }\n\n .socials{\n display:flex;\n justify-content:center;\n gap:16px;\n margin-bottom:50px;\n }\n .socials a{\n width:52px;height:52px;\n border-radius:50%;\n background:var(--cream);\n border:2.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n font-size:20px;\n transition:transform .2s ease, background .2s ease;\n }\n .socials a:hover{transform:translateY(-5px) rotate(-6deg);background:var(--bg-yellow);}\n\n footer{\n border-top:2px solid rgba(255,246,224,.2);\n padding-top:24px;\n color:#c9b493;\n font-family:'Space Mono';\n font-size:11.5px;\n letter-spacing:.05em;\n }\n\n \/* mini floating doge in join section *\/\n .join-mascot{\n width:110px;\n margin:0 auto 6px;\n animation:bob 3s ease-in-out infinite;\n }\n<\/style>\n<\/head>\n<body>\n\n<header>\n <a href=\"#hero\" class=\"logo\">\n <span class=\"logo-text\">DOGEWIFHAT<\/span>\n <\/a>\n <nav class=\"links\">\n <a href=\"#legend\">The Legend<\/a>\n <a href=\"#features\">The Pack<\/a>\n <a href=\"#gallery\">Gallery<\/a>\n <a href=\"#join\">Community<\/a>\n <\/nav>\n <div class=\"header-right\">\n <a class=\"text-link\" href=\"#\" aria-label=\"X \/ Twitter\">X<\/a>\n <a class=\"text-link\" href=\"#\" aria-label=\"Telegram\">Telegram<\/a>\n <a class=\"join-btn\" href=\"#join\">Join the Pack<\/a>\n <div class=\"burger\" id=\"burger\" aria-label=\"Open menu\"><span><\/span><span><\/span><span><\/span><\/div>\n <\/div>\n<\/header>\n\n<div class=\"mobile-menu\" id=\"mobileMenu\">\n <a href=\"#legend\">The Legend<\/a>\n <a href=\"#features\">The Pack<\/a>\n <a href=\"#gallery\">Gallery<\/a>\n <a href=\"#join\">Community<\/a>\n <a href=\"#\" aria-label=\"X \/ Twitter\">X<\/a>\n <a href=\"#\" aria-label=\"Telegram\">Telegram<\/a>\n<\/div>\n\n\n<section id=\"hero\">\n <span class=\"eyebrow hero-eyebrow\">The internet's favorite hat wearer<\/span>\n <h1 class=\"hero-title\">DOGEWIFHAT<\/h1>\n <p class=\"hero-sub\">Legendary Doge energy meets the internet's most iconic hat. Built for fun, powered by the pack, and pointed straight at the moon.<\/p>\n <div class=\"hero-ctas\">\n <a href=\"#join\" class=\"btn btn-primary\">\ud83d\ude80 Join the Pack<\/a>\n <button class=\"btn btn-secondary\" id=\"copyCaHero\">\ud83d\udccb Copy CA<\/button>\n <\/div>\n <div class=\"hero-ticker mono\">$DOGEWIFHAT \u00b7 FAIR LAUNCH \u00b7 100% COMMUNITY OWNED<\/div>\n\n <div class=\"hero-stage\">\n <div class=\"floaty-sticker fs1\">\ud83c\udfa9<span>certified hat<\/span><\/div>\n <div class=\"floaty-sticker fs2\">\ud83d\udc15<span>very good boy<\/span><\/div>\n <div class=\"floaty-sticker fs3\">\ud83d\udcc8<span>much wow<\/span><\/div>\n <div class=\"floaty-sticker fs4\">\ud83c\udf19<span>soon\u2122<\/span><\/div>\n <div class=\"hero-doge-frame\">\n <img decoding=\"async\" id=\"heroDoge\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat1.png\" alt=\"Animated DogeWifHat character\">\n <\/div>\n <\/div>\n\n<\/section>\n\n\n<section id=\"legend\">\n <div class=\"legend-copy reveal\">\n <span class=\"eyebrow\">The legend<\/span>\n <h2>One dog. One hat. <em>Infinite memes.<\/em><\/h2>\n <p>Long before charts turned green, one doge found a hat too iconic to take off. Word spread across every timeline, every group chat, every late-night trading desk. What started as a joke became a movement \u2014 and the movement needed a coin.<\/p>\n <p>DogeWifHat isn't run by a team in suits. It's run by a pack of holders who think the hat should never come off.<\/p>\n <div class=\"stat-row\">\n <div class=\"stat-chip\"><strong>12<\/strong><span>hat looks<\/span><\/div>\n <div class=\"stat-chip\"><strong>100%<\/strong><span>community owned<\/span><\/div>\n <div class=\"stat-chip\"><strong>0<\/strong><span>presale allocations<\/span><\/div>\n <div class=\"stat-chip\"><strong>\u221e<\/strong><span>meme potential<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"legend-visual reveal reveal-delay-2\">\n <div class=\"legend-visual-frame\">\n <img decoding=\"async\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/featured2.png\" alt=\"DogeWifHat featured character\">\n <\/div>\n <div class=\"stamp\">100%<br>DANK<br>APPROVED<\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"features\">\n <div class=\"features-head reveal\">\n <span class=\"eyebrow\">Why dogewifhat<\/span>\n <h2>Built different, bred for memes.<\/h2>\n <p>No hidden bags, no VC unlocks \u2014 just a hat-wearing dog and the pack that believes in it.<\/p>\n <\/div>\n <div class=\"panel-grid\">\n <div class=\"panel reveal\"><div class=\"panel-icon\">\ud83c\udfa9<\/div><h3>Fair Launch<\/h3><p>No presale, no insiders. Everyone gets their hat at the same starting line.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-1\"><div class=\"panel-icon\">\ud83d\udc3e<\/div><h3>Community Owned<\/h3><p>The pack calls the shots. Decisions get made in the open, out loud, together.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-2\"><div class=\"panel-icon\">\ud83d\udc8e<\/div><h3>Diamond Paws<\/h3><p>This crew doesn't fold on a red candle. The hat stays on through every dip.<\/p><\/div>\n <div class=\"panel reveal\"><div class=\"panel-icon\">\ud83d\ude02<\/div><h3>Certified Dank<\/h3><p>Every post, every sticker, every meme is made by holders, for holders.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-1\"><div class=\"panel-icon\">\ud83d\udd10<\/div><h3>Locked & Loaded<\/h3><p>Liquidity locked, contract renounced. The hat can't be taken off by anyone.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-2\"><div class=\"panel-icon\">\ud83c\udf15<\/div><h3>Moonbound Mission<\/h3><p>One dog, one hat, one shared destination. You know exactly where we're headed.<\/p><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"gallery\">\n <div class=\"gallery-head reveal\">\n <div>\n <span class=\"eyebrow\">The doge files<\/span>\n <h2>12 moods of one very good boy.<\/h2>\n <\/div>\n <p>Every frame from the hero above, framed up and pinned to the pond wall. Tap any card for the full-size look.<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"galleryGrid\"><\/div>\n<\/section>\n\n<div class=\"lightbox\" id=\"lightbox\">\n <div class=\"lightbox-inner\">\n <div class=\"lightbox-close\" id=\"lightboxClose\">\u2715<\/div>\n <div class=\"lightbox-nav lightbox-prev\" id=\"lightboxPrev\">\u2039<\/div>\n <div class=\"lightbox-nav lightbox-next\" id=\"lightboxNext\">\u203a<\/div>\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"DogeWifHat gallery image\">\n <h4 id=\"lightboxCap\"><\/h4>\n <\/div>\n<\/div>\n\n\n<section id=\"join\">\n <svg class=\"torn-edge\" viewBox=\"0 0 1200 60\" preserveAspectRatio=\"none\">\n <path d=\"M0,60 L0,20 L40,35 L80,10 L120,30 L160,5 L200,28 L240,12 L280,32 L320,8 L360,26 L400,14 L440,30 L480,10 L520,28 L560,6 L600,24 L640,12 L680,30 L720,8 L760,26 L800,14 L840,32 L880,10 L920,28 L960,6 L1000,24 L1040,14 L1080,30 L1120,10 L1160,26 L1200,20 L1200,60 Z\" fill=\"#4a2c17\"><\/path>\n <\/svg>\n <div class=\"join-inner\">\n <img decoding=\"async\" class=\"join-mascot\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat7.png\" alt=\"DogeWifHat mascot\">\n <span class=\"eyebrow reveal\">Join the pack<\/span>\n <h2 class=\"reveal\">The pack is growing.<\/h2>\n <p class=\"lede reveal\">Grab the ticker, follow the trail, and put the hat on. This one's community-run from the very first block.<\/p>\n\n <div class=\"ticker-plate reveal\">\n <span class=\"dollar\">$<\/span>\n <span class=\"mono\" id=\"tickerText\">DOGEWIFHAT<\/span>\n <button class=\"copy-btn\" id=\"copyTicker\">COPY<\/button>\n <\/div>\n\n <div class=\"join-ctas reveal\">\n <a href=\"#\" class=\"btn btn-primary\">\ud83c\udfa9 Buy the Hat<\/a>\n <a href=\"#\" class=\"btn btn-dark\">\ud83d\udcca View Chart<\/a>\n <\/div>\n\n \n \n \n \n \n\n <footer>\n \u00a9 2026 DOGEWIFHAT \u00b7 MEME RESPONSIBLY \u00b7 NOT FINANCIAL ADVICE\n <\/footer>\n <\/div>\n<\/section>\n\n<script>\n \/\/ ---------- mobile menu ----------\n const burger = document.getElementById('burger');\n const mobileMenu = document.getElementById('mobileMenu');\n burger.addEventListener('click', () => mobileMenu.classList.toggle('open'));\n mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobileMenu.classList.remove('open')));\n\n \/\/ ---------- hero image cycle ----------\n const heroDoge = document.getElementById('heroDoge');\n const base = 'http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat';\n let frame = 1;\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n if(!reduceMotion){\n setInterval(() => {\n frame = frame >= 12 ? 1 : frame + 1;\n heroDoge.src = `${base}${frame}.png`;\n }, 550);\n }\n\n \/\/ ---------- scroll reveal ----------\n const revealEls = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if(e.isIntersecting){\n e.target.classList.add('in-view');\n io.unobserve(e.target);\n }\n });\n }, {threshold:0.15});\n revealEls.forEach(el => io.observe(el));\n\n \/\/ ---------- gallery build ----------\n const captions = [\n 'Suit Up','Squad Check','Hat Trick','Good Boy Mode','Night Watch','Full Send',\n 'Diamond Paws','Zoomies','Moon Walk','Snack Break','Boss Doge','Pack Leader'\n ];\n const galleryGrid = document.getElementById('galleryGrid');\n const images = [];\n for(let i=1;i<=12;i++){\n const src = `${base}${i}.png`;\n images.push({src, caption: captions[i-1]});\n const card = document.createElement('div');\n card.className = 'polaroid';\n card.innerHTML = `\n <div class=\"tape\"><\/div>\n <div class=\"frame\"><img decoding=\"async\" src=\"${src}\" alt=\"${captions[i-1]}\" loading=\"lazy\"><\/div>\n <div class=\"cap\">${captions[i-1]}<\/div>\n `;\n card.addEventListener('click', () => openLightbox(i-1));\n galleryGrid.appendChild(card);\n }\n\n \/\/ ---------- lightbox ----------\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightboxImg');\n const lightboxCap = document.getElementById('lightboxCap');\n let current = 0;\n\n function openLightbox(idx){\n current = idx;\n updateLightbox();\n lightbox.classList.add('open');\n }\n function updateLightbox(){\n lightboxImg.src = images[current].src;\n lightboxCap.textContent = images[current].caption;\n }\n document.getElementById('lightboxClose').addEventListener('click', () => lightbox.classList.remove('open'));\n document.getElementById('lightboxPrev').addEventListener('click', () => { current = (current - 1 + 12) % 12; updateLightbox(); });\n document.getElementById('lightboxNext').addEventListener('click', () => { current = (current + 1) % 12; updateLightbox(); });\n lightbox.addEventListener('click', (e) => { if(e.target === lightbox) lightbox.classList.remove('open'); });\n document.addEventListener('keydown', (e) => {\n if(!lightbox.classList.contains('open')) return;\n if(e.key === 'Escape') lightbox.classList.remove('open');\n if(e.key === 'ArrowLeft') { current = (current - 1 + 12) % 12; updateLightbox(); }\n if(e.key === 'ArrowRight') { current = (current + 1) % 12; updateLightbox(); }\n });\n\n \/\/ ---------- copy ticker ----------\n const copyBtn = document.getElementById('copyTicker');\n copyBtn.addEventListener('click', () => {\n navigator.clipboard.writeText('$DOGEWIFHAT').then(() => {\n const original = copyBtn.textContent;\n copyBtn.textContent = 'COPIED!';\n setTimeout(() => copyBtn.textContent = original, 1500);\n });\n });\n\n \/\/ ---------- copy contract address (hero) ----------\n const CONTRACT_ADDRESS = 'Coming soon at launch';\n const copyCaHero = document.getElementById('copyCaHero');\n copyCaHero.addEventListener('click', () => {\n navigator.clipboard.writeText(CONTRACT_ADDRESS).then(() => {\n const original = copyCaHero.innerHTML;\n copyCaHero.innerHTML = '\u2705 Copied!';\n setTimeout(() => copyCaHero.innerHTML = original, 1500);\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DogeWifHat \u2014 The Hat Heard Round The Chain DOGEWIFHAT The Legend The Pack Gallery Community X Telegram Join the Pack The Legend The Pack Gallery Community X Telegram The internet’s favorite hat wearer DOGEWIFHAT Legendary Doge energy meets the internet’s most iconic hat. Built for fun, powered by the pack, and pointed straight at the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":49,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\n\n\n\n\nDogeWifHat \u2014 The Hat Heard Round The Chain<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Luckiest+Guy&family=Nunito:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg-yellow:#FFD447;\n --bg-yellow-deep:#FFC61A;\n --wood-1:#8a5a34;\n --wood-2:#6b4226;\n --wood-3:#4a2c17;\n --cream:#FFF6E0;\n --ink:#2b1b0e;\n --accent-red:#FF5A36;\n --accent-green:#3CB878;\n --accent-blue:#4C8DFF;\n --shadow:rgba(43,27,14,0.28);\n --tape-blue:#AEE3E8;\n --tape-orange:#F5B971;\n --tape-pink:#F5A9C1;\n --tape-green:#B7E0A6;\n }\n\n *{margin:0;padding:0;box-sizing:border-box;}\n\n html{scroll-behavior:smooth;}\n\n body{\n font-family:'Nunito', sans-serif;\n background:var(--bg-yellow);\n color:var(--ink);\n overflow-x:hidden;\n }\n\n h1,h2,h3,.display{\n font-family:'Luckiest Guy', cursive;\n font-weight:400;\n letter-spacing:.02em;\n line-height:1;\n }\n\n .mono{font-family:'Space Mono', monospace;}\n\n a{text-decoration:none;color:inherit;}\n\n img{display:block;max-width:100%;}\n\n ::selection{background:var(--accent-red);color:var(--cream);}\n\n \/* ---------- utility ---------- *\/\n .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:8px;\n font-family:'Space Mono', monospace;\n font-size:12px;\n letter-spacing:.18em;\n text-transform:uppercase;\n font-weight:700;\n color:var(--wood-3);\n background:var(--cream);\n padding:6px 14px;\n border-radius:999px;\n border:2px solid var(--wood-3);\n box-shadow:3px 3px 0 var(--wood-3);\n }\n .eyebrow::before{content:\"\ud83d\udc3e\";}\n\n .btn{\n appearance:none;\n -webkit-appearance:none;\n font-family:'Nunito', sans-serif;\n font-weight:700;\n font-size:17px;\n letter-spacing:.02em;\n padding:14px 30px;\n border-radius:14px;\n border:3px solid var(--ink);\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n gap:8px;\n transition:transform .18s ease, box-shadow .18s ease;\n box-shadow:5px 5px 0 var(--ink);\n }\n .btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);}\n .btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}\n .btn-primary{background:var(--accent-red);color:var(--cream);}\n .btn-secondary{background:var(--cream);color:var(--ink);}\n .btn-dark{background:var(--wood-3);color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 rgba(255,246,224,.4);}\n .btn-dark:hover{box-shadow:8px 8px 0 rgba(255,246,224,.4);}\n\n section{position:relative;}\n\n .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;}\n .reveal.in-view{opacity:1;transform:translateY(0);}\n .reveal-delay-1.in-view{transition-delay:.1s;}\n .reveal-delay-2.in-view{transition-delay:.2s;}\n .reveal-delay-3.in-view{transition-delay:.3s;}\n .reveal-delay-4.in-view{transition-delay:.4s;}\n\n @media (prefers-reduced-motion: reduce){\n *{animation:none !important; transition:none !important;}\n html{scroll-behavior:auto;}\n .reveal{opacity:1;transform:none;}\n }\n\n \/* ---------- header ---------- *\/\n header{\n position:fixed;\n top:14px;left:50%;\n transform:translateX(-50%);\n width:min(94%, 1180px);\n z-index:100;\n background:\n repeating-linear-gradient(180deg, var(--wood-1) 0px, var(--wood-1) 3px, var(--wood-2) 3px, var(--wood-2) 6px);\n border:3px solid var(--wood-3);\n border-radius:20px;\n box-shadow:0 10px 0 rgba(0,0,0,.15), 0 14px 26px rgba(0,0,0,.3);\n padding:10px 18px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:12px;\n }\n\n .logo{display:flex;align-items:center;gap:10px;}\n .logo-text{font-family:'Luckiest Guy';color:var(--cream);font-size:22px;font-weight:400;letter-spacing:.02em;\n text-shadow:2px 2px 0 var(--wood-3);}\n\n nav.links{display:flex;gap:6px;background:rgba(0,0,0,.15);padding:6px;border-radius:14px;}\n nav.links a{\n color:var(--cream);\n font-family:'Nunito';\n font-weight:600;\n font-size:14.5px;\n padding:9px 16px;\n border-radius:10px;\n transition:background .2s ease, color .2s ease;\n }\n nav.links a:hover{background:var(--cream);color:var(--wood-3);}\n\n .header-right{display:flex;align-items:center;gap:16px;}\n .text-link{\n font-family:'Nunito';\n font-weight:800;\n font-size:14px;\n letter-spacing:.03em;\n color:var(--cream);\n padding:6px 2px;\n border-bottom:2px solid transparent;\n transition:border-color .2s ease, color .2s ease;\n }\n .text-link:hover{border-color:var(--cream);color:var(--bg-yellow);}\n\n .join-btn{\n background:var(--accent-red);\n color:var(--cream);\n font-family:'Nunito';\n font-weight:700;\n font-size:14px;\n padding:11px 20px;\n border-radius:12px;\n border:2px solid var(--ink);\n white-space:nowrap;\n box-shadow:3px 3px 0 var(--ink);\n transition:transform .18s ease;\n }\n .join-btn:hover{transform:translateY(-2px);}\n\n .burger{display:none;width:38px;height:38px;border-radius:10px;background:var(--cream);border:2px solid var(--ink);\n align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;}\n .burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;}\n\n @media (max-width:900px){\n nav.links{display:none;}\n .join-btn{display:none;}\n .text-link{display:none;}\n .burger{display:flex;}\n }\n\n .mobile-menu{\n position:fixed;top:86px;left:50%;transform:translateX(-50%);\n width:min(94%,1180px);\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:16px;\n z-index:99;\n padding:16px;\n display:none;\n flex-direction:column;\n gap:6px;\n box-shadow:6px 6px 0 var(--ink);\n }\n .mobile-menu.open{display:flex;}\n .mobile-menu a{font-family:'Nunito';font-weight:700;padding:12px;border-radius:10px;}\n .mobile-menu a:hover{background:var(--bg-yellow-deep);}\n\n \/* ---------- HERO ---------- *\/\n #hero{\n min-height:100vh;\n padding:150px 6vw 60px;\n display:flex;\n flex-direction:column;\n align-items:center;\n text-align:center;\n background:\n radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0, transparent 40%),\n radial-gradient(circle at 85% 10%, rgba(255,255,255,.25) 0, transparent 35%),\n var(--bg-yellow);\n overflow:hidden;\n position:relative;\n }\n\n #hero::before{\n content:\"\";\n position:absolute;inset:0;\n background-image:radial-gradient(var(--wood-3) 1.4px, transparent 1.4px);\n background-size:26px 26px;\n opacity:.06;\n pointer-events:none;\n }\n\n .hero-eyebrow{margin-bottom:22px;}\n\n .hero-title{\n font-size:clamp(48px, 9vw, 128px);\n font-weight:800;\n color:var(--cream);\n -webkit-text-stroke:3px var(--ink);\n text-shadow:6px 6px 0 var(--ink), 12px 12px 0 rgba(255,90,54,.55);\n letter-spacing:.01em;\n }\n\n .hero-sub{\n max-width:620px;\n margin:26px auto 0;\n font-size:clamp(16px,2vw,19px);\n font-weight:700;\n color:var(--wood-3);\n }\n\n .hero-ctas{\n margin-top:34px;\n display:flex;\n gap:16px;\n flex-wrap:wrap;\n justify-content:center;\n }\n\n .hero-ticker{\n margin-top:22px;\n font-family:'Space Mono';\n font-size:13px;\n letter-spacing:.12em;\n color:var(--wood-3);\n font-weight:700;\n }\n\n .hero-stage{\n position:relative;\n margin-top:20px;\n width:100%;\n max-width:720px;\n flex:1;\n display:flex;\n align-items:flex-end;\n justify-content:center;\n }\n\n .hero-doge-frame{\n margin-bottom: -80px;\n width:min(82vw, 780px);\n aspect-ratio:1\/1;\n display:flex;\n align-items:flex-end;\n justify-content:end;\n align-items: end;\n filter:drop-shadow(0 22px 18px rgba(43,27,14,.35));\n animation:bob 2.6s ease-in-out infinite;\n }\n .hero-doge-frame img{width:100%;height:100%;object-fit:contain;}\n\n @keyframes bob{\n 0%,100%{transform:translateY(0) rotate(-1deg);}\n 50%{transform:translateY(-14px) rotate(1deg);}\n }\n\n .floaty-sticker{\n position:absolute;\n background:var(--cream);\n border:2px solid var(--ink);\n border-radius:12px;\n padding:8px 10px;\n font-family:'Nunito';\n font-weight:700;\n font-size:13px;\n box-shadow:4px 4px 0 var(--ink);\n animation:float-slow 5s ease-in-out infinite;\n }\n .floaty-sticker span{display:block;font-size:16px;}\n .fs1{top:16%;left:6%;transform:rotate(-9deg);animation-delay:.2s;}\n .fs2{top:28%;right:6%;transform:rotate(8deg);animation-delay:1.1s;}\n .fs3{bottom:32%;left:3%;transform:rotate(6deg);animation-delay:.6s;}\n .fs4{bottom:22%;right:4%;transform:rotate(-7deg);animation-delay:1.6s;}\n\n \/*@keyframes float-slow{*\/\n \/* 0%,100%{transform:translateY(0) rotate(var(--r,0deg));}*\/\n \/* 50%{transform:translateY(-10px) rotate(var(--r,0deg));}*\/\n \/*}*\/\n\n \/* ---------- SECTION 2: FEATURED \/ LEGEND (asymmetric split) ---------- *\/\n #legend{\n background:var(--cream);\n padding:120px 6vw;\n display:grid;\n grid-template-columns:1.05fr 0.95fr;\n gap:60px;\n align-items:center;\n position:relative;\n border-top:3px solid var(--ink);\n border-bottom:3px solid var(--ink);\n }\n\n .legend-copy h2{\n font-size:clamp(34px,4.6vw,58px);\n margin:18px 0 20px;\n color:var(--ink);\n }\n .legend-copy h2 em{\n font-style:normal;\n color:var(--accent-red);\n }\n .legend-copy p{\n font-size:17px;\n line-height:1.7;\n font-weight:600;\n color:var(--wood-3);\n max-width:520px;\n margin-bottom:28px;\n }\n\n .stat-row{\n display:flex;\n gap:14px;\n flex-wrap:wrap;\n }\n .stat-chip{\n background:var(--bg-yellow);\n border:2.5px solid var(--ink);\n border-radius:16px;\n padding:14px 18px;\n min-width:120px;\n box-shadow:4px 4px 0 var(--ink);\n }\n .stat-chip strong{\n display:block;\n font-family:'Nunito';\n font-weight:800;\n font-size:24px;\n }\n .stat-chip span{\n font-family:'Space Mono';\n font-size:10.5px;\n letter-spacing:.08em;\n text-transform:uppercase;\n font-weight:700;\n color:var(--wood-3);\n }\n\n .legend-visual{\n position:relative;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .legend-visual-frame{\n position:relative;\n width:min(100%, 440px);\n border-radius:26px;\n overflow:hidden;\n border:4px solid var(--ink);\n box-shadow:10px 10px 0 var(--wood-2);\n animation:float-img 4.5s ease-in-out infinite;\n }\n .legend-visual-frame img{width:100%;display:block;}\n @keyframes float-img{\n 0%,100%{transform:translateY(0) rotate(-1.4deg);}\n 50%{transform:translateY(-16px) rotate(1.2deg);}\n }\n\n .stamp{\n position:absolute;\n background:var(--accent-green);\n color:var(--cream);\n border:2px solid var(--ink);\n border-radius:50%;\n width:96px;height:96px;\n display:flex;\n align-items:center;\n justify-content:center;\n text-align:center;\n font-family:'Nunito';\n font-weight:800;\n font-size:12px;\n line-height:1.15;\n transform:rotate(-14deg);\n top:-22px;right:-18px;\n box-shadow:4px 4px 0 var(--ink);\n animation:spin-wobble 6s ease-in-out infinite;\n }\n @keyframes spin-wobble{\n 0%,100%{transform:rotate(-14deg);}\n 50%{transform:rotate(-6deg);}\n }\n\n @media (max-width:900px){\n #legend{grid-template-columns:1fr;padding:90px 6vw;gap:44px;}\n .legend-visual{order:-1;}\n }\n\n \/* ---------- SECTION 3: FEATURES (comic panel collage) ---------- *\/\n #features{\n background:var(--wood-3);\n padding:130px 6vw;\n position:relative;\n overflow:hidden;\n }\n #features::before{\n content:\"\";\n position:absolute;inset:0;\n background-image:radial-gradient(rgba(255,246,224,.14) 1.6px, transparent 1.6px);\n background-size:22px 22px;\n }\n .features-head{\n text-align:center;\n max-width:680px;\n margin:0 auto 60px;\n position:relative;\n }\n .features-head h2{\n color:var(--cream);\n font-size:clamp(32px,4.4vw,54px);\n margin-top:16px;\n }\n .features-head p{\n color:#e8d8bf;\n font-weight:700;\n margin-top:14px;\n font-size:16px;\n }\n\n .panel-grid{\n position:relative;\n max-width:1100px;\n margin:0 auto;\n display:grid;\n grid-template-columns:repeat(3, 1fr);\n gap:26px;\n }\n\n .panel{\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:18px;\n padding:26px 22px 24px;\n box-shadow:7px 7px 0 rgba(0,0,0,.35);\n transition:transform .3s ease, box-shadow .3s ease;\n cursor:default;\n }\n .panel:nth-child(1){transform:rotate(-2.2deg);}\n .panel:nth-child(2){transform:rotate(1.4deg);}\n .panel:nth-child(3){transform:rotate(-1deg);}\n .panel:nth-child(4){transform:rotate(1.8deg);}\n .panel:nth-child(5){transform:rotate(-1.6deg);}\n .panel:nth-child(6){transform:rotate(2deg);}\n .panel:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:10px 12px 0 rgba(0,0,0,.4);}\n\n .panel-icon{\n width:52px;height:52px;\n border-radius:12px;\n background:var(--bg-yellow);\n border:2.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n font-size:24px;\n margin-bottom:14px;\n }\n .panel h3{\n font-size:20px;\n margin-bottom:8px;\n }\n .panel p{\n font-size:14.5px;\n font-weight:700;\n color:var(--wood-3);\n line-height:1.55;\n }\n\n @media (max-width:900px){\n .panel-grid{grid-template-columns:repeat(2,1fr);}\n }\n @media (max-width:600px){\n .panel-grid{grid-template-columns:1fr;}\n .panel{transform:none !important;}\n }\n\n \/* ---------- SECTION 4: GALLERY ---------- *\/\n #gallery{\n background:var(--bg-yellow-deep);\n padding:120px 6vw;\n position:relative;\n }\n .gallery-head{\n display:flex;\n justify-content:space-between;\n align-items:flex-end;\n flex-wrap:wrap;\n gap:18px;\n max-width:1180px;\n margin:0 auto 46px;\n }\n .gallery-head h2{\n font-size:clamp(30px,4.2vw,50px);\n margin-top:14px;\n }\n .gallery-head p{\n max-width:360px;\n font-weight:700;\n color:var(--wood-3);\n font-size:15px;\n }\n\n .gallery-grid{\n max-width:1180px;\n margin:0 auto;\n display:grid;\n grid-template-columns:repeat(6, 1fr);\n gap:18px;\n }\n .polaroid{\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:10px;\n padding:10px 10px 34px;\n box-shadow:5px 5px 0 var(--ink);\n cursor:pointer;\n position:relative;\n transition:transform .25s ease, box-shadow .25s ease;\n }\n .polaroid:nth-child(6n+1){transform:rotate(-4deg);}\n .polaroid:nth-child(6n+2){transform:rotate(3deg);}\n .polaroid:nth-child(6n+3){transform:rotate(-2deg);}\n .polaroid:nth-child(6n+4){transform:rotate(4deg);}\n .polaroid:nth-child(6n+5){transform:rotate(-3deg);}\n .polaroid:nth-child(6n+6){transform:rotate(2deg);}\n .polaroid:hover{transform:rotate(0deg) translateY(-8px) scale(1.06);box-shadow:8px 10px 0 var(--ink);z-index:5;}\n\n .polaroid .tape{\n position:absolute;top:-12px;left:50%;\n transform:translateX(-50%) rotate(-4deg);\n width:52px;height:20px;\n opacity:.85;\n border:1px solid rgba(0,0,0,.15);\n }\n .polaroid:nth-child(6n+1) .tape{background:var(--tape-blue);}\n .polaroid:nth-child(6n+2) .tape{background:var(--tape-orange);}\n .polaroid:nth-child(6n+3) .tape{background:var(--tape-pink);}\n .polaroid:nth-child(6n+4) .tape{background:var(--tape-green);}\n .polaroid:nth-child(6n+5) .tape{background:var(--tape-blue);}\n .polaroid:nth-child(6n+6) .tape{background:var(--tape-orange);}\n\n .polaroid .frame{\n aspect-ratio:1\/1;\n overflow:hidden;\n border-radius:4px;\n background:var(--bg-yellow);\n }\n .polaroid .frame img{\n width:100%;height:100%;object-fit:cover;\n transition:transform .4s ease;\n }\n .polaroid:hover .frame img{transform:scale(1.12) rotate(1deg);}\n\n .polaroid .cap{\n position:absolute;\n bottom:8px;left:0;right:0;\n text-align:center;\n font-family:'Nunito';\n font-weight:700;\n font-size:13px;\n }\n\n @media (max-width:1000px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}\n @media (max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}\n\n \/* lightbox *\/\n .lightbox{\n position:fixed;inset:0;\n background:rgba(20,12,6,.88);\n z-index:200;\n display:none;\n align-items:center;\n justify-content:center;\n padding:24px;\n }\n .lightbox.open{display:flex;}\n .lightbox-inner{\n position:relative;\n max-width:480px;\n width:100%;\n background:var(--cream);\n border:4px solid var(--ink);\n border-radius:18px;\n padding:18px 18px 26px;\n text-align:center;\n animation:pop-in .25s ease;\n }\n @keyframes pop-in{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}\n .lightbox-inner img{width:100%;border-radius:10px;border:2px solid var(--ink);}\n .lightbox-inner h4{margin-top:16px;font-size:22px;}\n .lightbox-close{\n position:absolute;top:-16px;right:-16px;\n width:38px;height:38px;border-radius:50%;\n background:var(--accent-red);color:var(--cream);\n border:3px solid var(--ink);\n font-family:'Nunito';font-weight:800;\n display:flex;align-items:center;justify-content:center;\n cursor:pointer;\n box-shadow:3px 3px 0 var(--ink);\n }\n .lightbox-nav{\n position:absolute;top:50%;\n transform:translateY(-50%);\n width:44px;height:44px;border-radius:50%;\n background:var(--cream);\n border:3px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n cursor:pointer;\n font-size:18px;\n font-weight:800;\n }\n .lightbox-prev{left:-56px;}\n .lightbox-next{right:-56px;}\n @media (max-width:640px){\n .lightbox-prev{left:6px;}\n .lightbox-next{right:6px;}\n }\n\n \/* ---------- SECTION 5: CTA \/ JOIN ---------- *\/\n #join{\n background:var(--wood-3);\n padding:0 0 70px;\n position:relative;\n overflow:hidden;\n text-align:center;\n }\n .torn-edge{\n width:100%;\n height:60px;\n display:block;\n }\n .join-inner{\n padding:20px 6vw 0;\n max-width:760px;\n margin:0 auto;\n }\n #join .eyebrow{background:var(--wood-3);color:var(--cream);border-color:var(--cream);box-shadow:3px 3px 0 rgba(255,246,224,.4);}\n #join h2{\n color:var(--cream);\n font-size:clamp(34px,5.2vw,64px);\n margin:20px 0 16px;\n }\n #join p.lede{\n color:#e8d8bf;\n font-weight:700;\n font-size:16px;\n max-width:520px;\n margin:0 auto 34px;\n }\n\n .ticker-plate{\n display:inline-flex;\n align-items:center;\n gap:14px;\n background:var(--cream);\n border:3px solid var(--ink);\n border-radius:16px;\n padding:16px 24px;\n box-shadow:6px 6px 0 rgba(255,246,224,.25);\n margin-bottom:34px;\n }\n .ticker-plate .dollar{\n font-family:'Nunito';font-weight:800;font-size:26px;color:var(--accent-red);\n }\n .ticker-plate .mono{font-size:19px;font-weight:700;letter-spacing:.02em;}\n .copy-btn{\n background:var(--bg-yellow);\n border:2px solid var(--ink);\n border-radius:10px;\n padding:8px 12px;\n font-family:'Space Mono';\n font-size:11px;\n font-weight:700;\n cursor:pointer;\n transition:background .2s ease;\n }\n .copy-btn:hover{background:var(--accent-green);color:var(--cream);}\n\n .join-ctas{\n display:flex;\n gap:16px;\n justify-content:center;\n flex-wrap:wrap;\n margin-bottom:44px;\n }\n\n .socials{\n display:flex;\n justify-content:center;\n gap:16px;\n margin-bottom:50px;\n }\n .socials a{\n width:52px;height:52px;\n border-radius:50%;\n background:var(--cream);\n border:2.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n font-size:20px;\n transition:transform .2s ease, background .2s ease;\n }\n .socials a:hover{transform:translateY(-5px) rotate(-6deg);background:var(--bg-yellow);}\n\n footer{\n border-top:2px solid rgba(255,246,224,.2);\n padding-top:24px;\n color:#c9b493;\n font-family:'Space Mono';\n font-size:11.5px;\n letter-spacing:.05em;\n }\n\n \/* mini floating doge in join section *\/\n .join-mascot{\n width:110px;\n margin:0 auto 6px;\n animation:bob 3s ease-in-out infinite;\n }\n<\/style>\n<\/head>\n<body>\n\n<header>\n <a href=\"#hero\" class=\"logo\">\n <span class=\"logo-text\">DOGEWIFHAT<\/span>\n <\/a>\n <nav class=\"links\">\n <a href=\"#legend\">The Legend<\/a>\n <a href=\"#features\">The Pack<\/a>\n <a href=\"#gallery\">Gallery<\/a>\n <a href=\"#join\">Community<\/a>\n <\/nav>\n <div class=\"header-right\">\n <a class=\"text-link\" href=\"#\" aria-label=\"X \/ Twitter\">X<\/a>\n <a class=\"text-link\" href=\"#\" aria-label=\"Telegram\">Telegram<\/a>\n <a class=\"join-btn\" href=\"#join\">Join the Pack<\/a>\n <div class=\"burger\" id=\"burger\" aria-label=\"Open menu\"><span><\/span><span><\/span><span><\/span><\/div>\n <\/div>\n<\/header>\n\n<div class=\"mobile-menu\" id=\"mobileMenu\">\n <a href=\"#legend\">The Legend<\/a>\n <a href=\"#features\">The Pack<\/a>\n <a href=\"#gallery\">Gallery<\/a>\n <a href=\"#join\">Community<\/a>\n <a href=\"#\" aria-label=\"X \/ Twitter\">X<\/a>\n <a href=\"#\" aria-label=\"Telegram\">Telegram<\/a>\n<\/div>\n\n\n<section id=\"hero\">\n <span class=\"eyebrow hero-eyebrow\">The internet's favorite hat wearer<\/span>\n <h1 class=\"hero-title\">DOGEWIFHAT<\/h1>\n <p class=\"hero-sub\">Legendary Doge energy meets the internet's most iconic hat. Built for fun, powered by the pack, and pointed straight at the moon.<\/p>\n <div class=\"hero-ctas\">\n <a href=\"#join\" class=\"btn btn-primary\">\ud83d\ude80 Join the Pack<\/a>\n <button class=\"btn btn-secondary\" id=\"copyCaHero\">\ud83d\udccb Copy CA<\/button>\n <\/div>\n <div class=\"hero-ticker mono\">$DOGEWIFHAT \u00b7 FAIR LAUNCH \u00b7 100% COMMUNITY OWNED<\/div>\n\n <div class=\"hero-stage\">\n <div class=\"floaty-sticker fs1\">\ud83c\udfa9<span>certified hat<\/span><\/div>\n <div class=\"floaty-sticker fs2\">\ud83d\udc15<span>very good boy<\/span><\/div>\n <div class=\"floaty-sticker fs3\">\ud83d\udcc8<span>much wow<\/span><\/div>\n <div class=\"floaty-sticker fs4\">\ud83c\udf19<span>soon\u2122<\/span><\/div>\n <div class=\"hero-doge-frame\">\n <img decoding=\"async\" id=\"heroDoge\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat1.png\" alt=\"Animated DogeWifHat character\">\n <\/div>\n <\/div>\n\n<\/section>\n\n\n<section id=\"legend\">\n <div class=\"legend-copy reveal\">\n <span class=\"eyebrow\">The legend<\/span>\n <h2>One dog. One hat. <em>Infinite memes.<\/em><\/h2>\n <p>Long before charts turned green, one doge found a hat too iconic to take off. Word spread across every timeline, every group chat, every late-night trading desk. What started as a joke became a movement \u2014 and the movement needed a coin.<\/p>\n <p>DogeWifHat isn't run by a team in suits. It's run by a pack of holders who think the hat should never come off.<\/p>\n <div class=\"stat-row\">\n <div class=\"stat-chip\"><strong>12<\/strong><span>hat looks<\/span><\/div>\n <div class=\"stat-chip\"><strong>100%<\/strong><span>community owned<\/span><\/div>\n <div class=\"stat-chip\"><strong>0<\/strong><span>presale allocations<\/span><\/div>\n <div class=\"stat-chip\"><strong>\u221e<\/strong><span>meme potential<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"legend-visual reveal reveal-delay-2\">\n <div class=\"legend-visual-frame\">\n <img decoding=\"async\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/featured2.png\" alt=\"DogeWifHat featured character\">\n <\/div>\n <div class=\"stamp\">100%<br>DANK<br>APPROVED<\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"features\">\n <div class=\"features-head reveal\">\n <span class=\"eyebrow\">Why dogewifhat<\/span>\n <h2>Built different, bred for memes.<\/h2>\n <p>No hidden bags, no VC unlocks \u2014 just a hat-wearing dog and the pack that believes in it.<\/p>\n <\/div>\n <div class=\"panel-grid\">\n <div class=\"panel reveal\"><div class=\"panel-icon\">\ud83c\udfa9<\/div><h3>Fair Launch<\/h3><p>No presale, no insiders. Everyone gets their hat at the same starting line.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-1\"><div class=\"panel-icon\">\ud83d\udc3e<\/div><h3>Community Owned<\/h3><p>The pack calls the shots. Decisions get made in the open, out loud, together.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-2\"><div class=\"panel-icon\">\ud83d\udc8e<\/div><h3>Diamond Paws<\/h3><p>This crew doesn't fold on a red candle. The hat stays on through every dip.<\/p><\/div>\n <div class=\"panel reveal\"><div class=\"panel-icon\">\ud83d\ude02<\/div><h3>Certified Dank<\/h3><p>Every post, every sticker, every meme is made by holders, for holders.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-1\"><div class=\"panel-icon\">\ud83d\udd10<\/div><h3>Locked & Loaded<\/h3><p>Liquidity locked, contract renounced. The hat can't be taken off by anyone.<\/p><\/div>\n <div class=\"panel reveal reveal-delay-2\"><div class=\"panel-icon\">\ud83c\udf15<\/div><h3>Moonbound Mission<\/h3><p>One dog, one hat, one shared destination. You know exactly where we're headed.<\/p><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"gallery\">\n <div class=\"gallery-head reveal\">\n <div>\n <span class=\"eyebrow\">The doge files<\/span>\n <h2>12 moods of one very good boy.<\/h2>\n <\/div>\n <p>Every frame from the hero above, framed up and pinned to the pond wall. Tap any card for the full-size look.<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"galleryGrid\"><\/div>\n<\/section>\n\n<div class=\"lightbox\" id=\"lightbox\">\n <div class=\"lightbox-inner\">\n <div class=\"lightbox-close\" id=\"lightboxClose\">\u2715<\/div>\n <div class=\"lightbox-nav lightbox-prev\" id=\"lightboxPrev\">\u2039<\/div>\n <div class=\"lightbox-nav lightbox-next\" id=\"lightboxNext\">\u203a<\/div>\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"DogeWifHat gallery image\">\n <h4 id=\"lightboxCap\"><\/h4>\n <\/div>\n<\/div>\n\n\n<section id=\"join\">\n <svg class=\"torn-edge\" viewBox=\"0 0 1200 60\" preserveAspectRatio=\"none\">\n <path d=\"M0,60 L0,20 L40,35 L80,10 L120,30 L160,5 L200,28 L240,12 L280,32 L320,8 L360,26 L400,14 L440,30 L480,10 L520,28 L560,6 L600,24 L640,12 L680,30 L720,8 L760,26 L800,14 L840,32 L880,10 L920,28 L960,6 L1000,24 L1040,14 L1080,30 L1120,10 L1160,26 L1200,20 L1200,60 Z\" fill=\"#4a2c17\"><\/path>\n <\/svg>\n <div class=\"join-inner\">\n <img decoding=\"async\" class=\"join-mascot\" src=\"http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat7.png\" alt=\"DogeWifHat mascot\">\n <span class=\"eyebrow reveal\">Join the pack<\/span>\n <h2 class=\"reveal\">The pack is growing.<\/h2>\n <p class=\"lede reveal\">Grab the ticker, follow the trail, and put the hat on. This one's community-run from the very first block.<\/p>\n\n <div class=\"ticker-plate reveal\">\n <span class=\"dollar\">$<\/span>\n <span class=\"mono\" id=\"tickerText\">DOGEWIFHAT<\/span>\n <button class=\"copy-btn\" id=\"copyTicker\">COPY<\/button>\n <\/div>\n\n <div class=\"join-ctas reveal\">\n <a href=\"#\" class=\"btn btn-primary\">\ud83c\udfa9 Buy the Hat<\/a>\n <a href=\"#\" class=\"btn btn-dark\">\ud83d\udcca View Chart<\/a>\n <\/div>\n\n \n \n \n \n \n\n <footer>\n \u00a9 2026 DOGEWIFHAT \u00b7 MEME RESPONSIBLY \u00b7 NOT FINANCIAL ADVICE\n <\/footer>\n <\/div>\n<\/section>\n\n<script>\n \/\/ ---------- mobile menu ----------\n const burger = document.getElementById('burger');\n const mobileMenu = document.getElementById('mobileMenu');\n burger.addEventListener('click', () => mobileMenu.classList.toggle('open'));\n mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobileMenu.classList.remove('open')));\n\n \/\/ ---------- hero image cycle ----------\n const heroDoge = document.getElementById('heroDoge');\n const base = 'http:\/\/dogewifhat.fun\/wp-content\/uploads\/2026\/07\/wifhat';\n let frame = 1;\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n if(!reduceMotion){\n setInterval(() => {\n frame = frame >= 12 ? 1 : frame + 1;\n heroDoge.src = `${base}${frame}.png`;\n }, 550);\n }\n\n \/\/ ---------- scroll reveal ----------\n const revealEls = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if(e.isIntersecting){\n e.target.classList.add('in-view');\n io.unobserve(e.target);\n }\n });\n }, {threshold:0.15});\n revealEls.forEach(el => io.observe(el));\n\n \/\/ ---------- gallery build ----------\n const captions = [\n 'Suit Up','Squad Check','Hat Trick','Good Boy Mode','Night Watch','Full Send',\n 'Diamond Paws','Zoomies','Moon Walk','Snack Break','Boss Doge','Pack Leader'\n ];\n const galleryGrid = document.getElementById('galleryGrid');\n const images = [];\n for(let i=1;i<=12;i++){\n const src = `${base}${i}.png`;\n images.push({src, caption: captions[i-1]});\n const card = document.createElement('div');\n card.className = 'polaroid';\n card.innerHTML = `\n <div class=\"tape\"><\/div>\n <div class=\"frame\"><img decoding=\"async\" src=\"${src}\" alt=\"${captions[i-1]}\" loading=\"lazy\"><\/div>\n <div class=\"cap\">${captions[i-1]}<\/div>\n `;\n card.addEventListener('click', () => openLightbox(i-1));\n galleryGrid.appendChild(card);\n }\n\n \/\/ ---------- lightbox ----------\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightboxImg');\n const lightboxCap = document.getElementById('lightboxCap');\n let current = 0;\n\n function openLightbox(idx){\n current = idx;\n updateLightbox();\n lightbox.classList.add('open');\n }\n function updateLightbox(){\n lightboxImg.src = images[current].src;\n lightboxCap.textContent = images[current].caption;\n }\n document.getElementById('lightboxClose').addEventListener('click', () => lightbox.classList.remove('open'));\n document.getElementById('lightboxPrev').addEventListener('click', () => { current = (current - 1 + 12) % 12; updateLightbox(); });\n document.getElementById('lightboxNext').addEventListener('click', () => { current = (current + 1) % 12; updateLightbox(); });\n lightbox.addEventListener('click', (e) => { if(e.target === lightbox) lightbox.classList.remove('open'); });\n document.addEventListener('keydown', (e) => {\n if(!lightbox.classList.contains('open')) return;\n if(e.key === 'Escape') lightbox.classList.remove('open');\n if(e.key === 'ArrowLeft') { current = (current - 1 + 12) % 12; updateLightbox(); }\n if(e.key === 'ArrowRight') { current = (current + 1) % 12; updateLightbox(); }\n });\n\n \/\/ ---------- copy ticker ----------\n const copyBtn = document.getElementById('copyTicker');\n copyBtn.addEventListener('click', () => {\n navigator.clipboard.writeText('$DOGEWIFHAT').then(() => {\n const original = copyBtn.textContent;\n copyBtn.textContent = 'COPIED!';\n setTimeout(() => copyBtn.textContent = original, 1500);\n });\n });\n\n \/\/ ---------- copy contract address (hero) ----------\n const CONTRACT_ADDRESS = 'Coming soon at launch';\n const copyCaHero = document.getElementById('copyCaHero');\n copyCaHero.addEventListener('click', () => {\n navigator.clipboard.writeText(CONTRACT_ADDRESS).then(() => {\n const original = copyCaHero.innerHTML;\n copyCaHero.innerHTML = '\u2705 Copied!';\n setTimeout(() => copyCaHero.innerHTML = original, 1500);\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DogeWifHat \u2014 The Hat Heard Round The Chain DOGEWIFHAT The Legend The Pack Gallery Community X Telegram Join the Pack The Legend The Pack Gallery Community X Telegram The internet’s favorite hat wearer DOGEWIFHAT Legendary Doge energy meets the internet’s most iconic hat. Built for fun, powered by the pack, and pointed straight at the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":49,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/dogewifhat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}