:root { --ink:#221c18; --paper:#f7efdf; --pink:#eaa19c; --coral:#e87a68; --cream:#fff9ed; --blue:#a8c6d8; --line:rgba(34,28,24,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk',sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:9; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); }
.site-header { height:82px; padding:0 clamp(22px,5vw,82px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; background:rgba(247,239,223,.86); backdrop-filter:blur(12px); }
.brand { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:700; letter-spacing:-.7px; }
.brand img, footer img { width:35px; height:35px; }
.brand span span { color:var(--coral); }
nav { display:flex; gap:31px; font:500 11px 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
nav a { position:relative; }
nav a::after { content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:currentColor; transition:width .25s; }
nav a:hover::after { width:100%; }
.header-buy, .action { display:inline-flex; align-items:center; justify-content:center; gap:9px; font:500 11px 'DM Mono',monospace; letter-spacing:.04em; border:1px solid var(--ink); transition:transform .2s,background .2s; }
.header-buy { min-width:100px; padding:12px 16px; background:var(--ink); color:var(--cream); }
.header-buy:hover, .buy-action:hover { transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--coral); }
.hero { min-height:calc(100vh - 82px); padding:clamp(46px,8vw,120px) clamp(22px,7vw,110px) 55px; display:grid; grid-template-columns:minmax(280px,.95fr) minmax(370px,1.05fr); gap:50px; align-items:center; position:relative; border-bottom:1px solid var(--line); }
.hero-copy { position:relative; z-index:1; }
.eyebrow { margin:0 0 17px; color:#9f5d57; font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
h1,h2,p { margin-top:0; } h1,h2 { letter-spacing:-.085em; line-height:.8; font-weight:700; }
h1 { font-size:clamp(70px,9.5vw,154px); margin:0 0 28px; }
h1 em,h2 em { color:var(--coral); font-style:normal; }
.ticker { font:500 11px 'DM Mono',monospace; letter-spacing:.1em; display:flex; align-items:center; gap:12px; }
.ticker span { width:28px; height:1px; background:var(--coral); }
.intro { max-width:398px; margin:25px 0 31px; color:#5f534a; line-height:1.48; font-size:16px; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(150px,205px)); gap:10px; }
.action { min-height:48px; background:transparent; }
.action img { height:16px; width:16px; object-fit:contain; }
.buy-action { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.action:not(.buy-action):hover { background:var(--ink); color:var(--cream); }
.action:not(.buy-action):hover img { filter:invert(1); }
.hero-art { align-self:stretch; min-height:570px; border:1px solid var(--ink); background:var(--blue); position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; isolation:isolate; }
.sun-disc { position:absolute; width:82%; aspect-ratio:1; border-radius:50%; background:#f2ad9e; top:7%; left:9%; opacity:.82; }
.character-photo { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:2; background:#9fbfd3; }
.character-photo.is-missing, .character-photo:not([src]) { display:none; }
/* The CSS character remains visible until the supplied image is added to assets/. */
.character-fallback { position:absolute; width:85%; height:93%; bottom:-2%; z-index:1; }
.face { position:absolute; width:38%; height:55%; border-radius:45% 45% 42% 42%; background:#e7a18b; left:31%; top:26%; box-shadow:inset -11px -6px 0 rgba(134,67,49,.11); }
.hat { position:absolute; width:66%; height:35%; left:17%; top:3%; background:repeating-linear-gradient(74deg,#e8a09a 0 7px,#f6b9af 8px 14px,#cc7a78 15px 17px); border-radius:55% 55% 18% 18%/67% 67% 25% 25%; border-bottom:18px solid #d88c8d; transform:rotate(-4deg); z-index:2; }
.hair { position:absolute; width:31%; height:52%; top:23%; background:linear-gradient(95deg,#a86731,#e0a55e 40%,#f0c77b); border-radius:52% 48% 45% 55%; z-index:1; }
.hair-left { left:5%; transform:rotate(5deg); } .hair-right { right:5%; transform:scaleX(-1) rotate(5deg); }
.eye { position:absolute; top:36%; width:14%; aspect-ratio:1; background:#292522; border-radius:50%; border:4px solid #d99380; }.left-eye{left:20%}.right-eye{right:20%}
.nose { position:absolute; left:45%; top:46%; width:14%; height:20%; border-radius:50%; background:#d78975; transform:rotate(-11deg); }
.mustache { position:absolute; background:#b76a30; width:37%; height:12%; top:62%; border-radius:100% 0 100% 0; box-shadow:0 2px 0 #80471f; }.left-mustache{left:14%;transform:rotate(-23deg)}.right-mustache{right:14%; transform:scaleX(-1) rotate(-23deg)}
.collar { position:absolute; bottom:0; left:25%; width:50%; height:25%; background:linear-gradient(90deg,#2d2521,#554236); clip-path:polygon(0 100%,13% 0,44% 28%,50% 100%,56% 28%,87% 0,100% 100%); }
.art-stamp { position:absolute; right:24px; top:24px; z-index:3; width:78px; height:78px; padding:12px 0; margin:0; border:1px solid var(--ink); background:var(--paper); border-radius:50%; text-align:center; font:8px/1.05 'DM Mono',monospace; transform:rotate(13deg); }.art-stamp b{display:block;font:700 16px/.73 'Space Grotesk',sans-serif;margin-top:5px;letter-spacing:-1px}
.scroll-hint { position:absolute; bottom:26px; left:clamp(22px,7vw,110px); font:500 10px 'DM Mono',monospace; letter-spacing:.08em; }.scroll-hint span{font-size:18px;margin-left:8px;color:var(--coral)}
.section { padding:clamp(70px,10vw,140px) clamp(22px,7vw,110px); }.roadmap { background:var(--cream); }.section-heading { display:grid; grid-template-columns:1fr 1.2fr; column-gap:20px; margin-bottom:62px; }.section-heading .eyebrow { grid-column:1/-1; }.section-heading h2 { font-size:clamp(58px,8vw,122px); margin:0; }.section-heading > p:last-child { align-self:end; max-width:300px; line-height:1.45; color:#66594e; margin:0 0 5px; }
.timeline { margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }.timeline li { display:grid; grid-template-columns:80px minmax(250px,1fr) 130px; align-items:start; gap:20px; padding:29px 0; border-bottom:1px solid var(--line); }.phase,.status { font:500 10px 'DM Mono',monospace; letter-spacing:.06em; }.phase { color:#9f5d57; }.timeline-title { font-size:25px; letter-spacing:-.055em; margin-bottom:7px; }.timeline div p:last-child { max-width:600px; line-height:1.45; color:#66594e; margin-bottom:0; }.status { justify-self:end; border:1px solid var(--line); padding:5px 7px; color:#7b6c60; }.status.done { background:#dbe4cf; color:#496047; border-color:#a2af96; }.status.now { background:#f6c8b6; color:#915649; border-color:#d18a78; }
.chart { background:var(--ink); color:var(--cream); display:grid; grid-template-columns:minmax(220px,.72fr) minmax(500px,1.28fr); gap:clamp(35px,7vw,100px); align-items:center; }.chart .eyebrow { color:#f3a79d; }.chart h2 { font-size:clamp(60px,7vw,112px); margin-bottom:25px; }.chart-copy > p:not(.eyebrow) { color:#cbbfb1; line-height:1.5; max-width:300px; }.text-link { display:inline-block; margin-top:22px; border-bottom:1px solid var(--coral); padding-bottom:7px; color:#f3a79d; font:500 10px 'DM Mono',monospace; letter-spacing:.08em; }.text-link span { font-size:15px; }
.dex-frame { height:500px; background:#12100f; border:1px solid #776d62; position:relative; overflow:hidden; }.dex-topbar { height:42px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #4a433c; color:#c9b9aa; font:10px 'DM Mono',monospace; letter-spacing:.06em; }.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#e2796d}.window-dots i:nth-child(2){background:#e6b563}.window-dots i:nth-child(3){background:#8fa78b}.dex-topbar a{font-size:16px}.dex-frame iframe { width:100%; height:calc(100% - 42px); border:0; background:#12100f; }.dex-placeholder { position:absolute; inset:42px 0 0; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center; color:#eee5d7; background:radial-gradient(circle at 50% 35%,#312725,transparent 40%),#12100f; }.dex-placeholder img{width:42px;height:42px}.dex-placeholder p{font:500 16px/1.25 'DM Mono',monospace;letter-spacing:.08em;margin:0}.dex-placeholder small{color:#a9998c;font:11px 'DM Mono',monospace}
footer { min-height:91px; display:flex; align-items:center; justify-content:space-between; padding:20px clamp(22px,5vw,82px); border-top:1px solid #51483f; background:var(--ink); color:#d8cab9; }footer>div{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700}footer img{width:27px;height:27px}footer p,footer>span{font:9px 'DM Mono',monospace;letter-spacing:.04em;margin:0}footer p{max-width:425px;text-align:center;color:#95887b}
@media (max-width: 800px) { .site-header{height:70px}.brand{font-size:11px}nav{display:none}.header-buy{min-width:auto;padding:10px 13px}.hero{grid-template-columns:1fr;padding-top:65px;gap:35px}.hero-art{min-height:520px;grid-row:1}.hero-copy{grid-row:2}h1{font-size:78px}.scroll-hint{display:none}.section-heading{grid-template-columns:1fr;gap:20px}.timeline li{grid-template-columns:48px 1fr;gap:12px}.status{grid-column:2;justify-self:start}.chart{grid-template-columns:1fr;gap:42px}.dex-frame{height:440px}footer{flex-wrap:wrap;gap:16px}footer p{order:3;text-align:left;flex-basis:100%} }
@media (max-width: 430px) { .hero-actions{grid-template-columns:1fr 1fr}.action{font-size:9px}.hero-art{min-height:430px}.timeline-title{font-size:21px}.dex-frame{height:370px} }
[hidden] { display: none !important; }