@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;700&family=Special+Elite&display=swap";

:root {
    --cream: #f8f8f8;
    --paper: #f3f1eb;
    --ink: #13100a;
    --line: #221a10;
    --brown: #806850;
    --brown-deep: #604830;
    --gold: #d8b454;
    --gold-bright: #e8cc68;
    --gold-deep: #b08854;
    --silver: silver;
    --card-shadow: 0 16px 42px #221a101f
}

* {
    box-sizing: border-box
}

html,
body {
    min-height: 100%;
    margin: 0
}

body {
    color: var(--ink);
    background-color: #0000;
    background-image: radial-gradient(circle at 8% 12%, #d8b45459, #0000 34%), radial-gradient(circle at 92% 4%, #80685033, #0000 32%), linear-gradient(155deg, #fdfcf8, #f4eee5 52%, #efe7dd);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat;
    background-size: auto, auto, auto;
    background-attachment: fixed;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    font-family: Space Grotesk, Trebuchet MS, sans-serif
}

body:before {
    content: "";
    pointer-events: none;
    opacity: .5;
    background-image: repeating-linear-gradient(135deg, #0000, #0000 22px, #80685011 22px 23px);
    position: fixed;
    inset: 0
}

#app {
    min-height: 100svh;
    position: relative
}

.page-shell {
    isolation: isolate;
    padding-bottom: 3rem;
    position: relative
}

main {
    width: min(1160px, 100% - 2.2rem);
    margin: 0 auto
}

.chain-header {
    z-index: 100;
    padding: 1rem 1rem 0;
    position: sticky;
    top: 0
}

.chain-header__halo {
    filter: blur(18px);
    z-index: -1;
    background: radial-gradient(circle, #d8b45447, #0000 68%);
    border-radius: 999px;
    width: min(1120px, 100% - 1.5rem);
    height: 120px;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translate(-50%)
}

.unorthodox-nav {
    border: 2px solid var(--line);
    /* clip-path: polygon(2.2% 0, 97.8% 0, 100% 50%, 97.8% 100%, 2.2% 100%, 0 50%); */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: linear-gradient(120deg, #ffffffd9, #f2e9dadb 52%, #d8b45480), linear-gradient(#80685024, #80685024);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
    padding: .72rem 1rem;
    display: grid;
    position: relative;
    box-shadow: 0 12px 34px #221a1033
}

.unorthodox-nav:before,
.unorthodox-nav:after {
    content: "";
    background: radial-gradient(circle, var(--gold) 20%, var(--line) 21%, var(--line) 42%, transparent 43%);
    background-size: 10px 18px;
    border-radius: 999px;
    width: 10px;
    position: absolute;
    top: 6px;
    bottom: 6px
}

.unorthodox-nav:before {
    left: 9px
}

.unorthodox-nav:after {
    right: 9px
}

.brand {
    color: inherit;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    text-decoration: none;
    display: flex
}

.brand-logo-wrap {
    border: 2px solid var(--line);
    border-radius: 50%;
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px #d8b45466, 0 5px 12px #221a1040
}

.brand-logo-wrap img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.brand-stack {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.brand-name {
    letter-spacing: .08em;
    font-family: Bebas Neue, Impact, sans-serif;
    font-size: 2rem;
    line-height: .8
}

.nav-links {
    justify-content: center;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.nav-links a {
    color: var(--line);
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .6rem .95rem;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, background .2s;
    position: relative
}

.nav-links a:hover {
    background: #d8b45447;
    transform: translateY(-2px)
}

.nav-cta {
    color: var(--line);
    border: 2px solid var(--line);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: linear-gradient(140deg, #e8cc68f2, #d8b454e6);
    border-radius: .7rem;
    padding: .62rem 1rem;
    font-size: .77rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, filter .2s;
    box-shadow: 0 8px 16px #60483038
}

.nav-cta:hover {
    filter: saturate(1.1);
    transform: translateY(-2px)
}

.nav-right {
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
    display: flex
}

.nav-social {
    align-items: center;
    gap: .38rem;
    display: flex
}

.social-link {
    border: 2px solid var(--line);
    width: 2.22rem;
    height: 2.22rem;
    color: var(--line);
    background: radial-gradient(circle at 30% 28%, #fff6d4f2, #d8b454f0 45%, #b08854f2);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform .2s, filter .2s, box-shadow .2s;
    display: inline-flex;
    box-shadow: inset 0 0 0 1px #fff7de99, 0 6px 13px #60483047
}

.social-link svg {
    fill: currentColor;
    width: 1.02rem;
    height: 1.02rem
}

.social-link--telegram svg {
    transform: translate(.04rem)
}

.social-link:hover {
    filter: saturate(1.12);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px #fff7deb8, 0 8px 16px #60483054
}

.social-link:focus-visible,
.menu-toggle:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #221a10f2
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.menu-toggle {
    border: 2px solid var(--line);
    cursor: pointer;
    background: #f8f8f8f2;
    border-radius: .7rem;
    justify-content: center;
    align-items: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    display: none
}

.menu-toggle span {
    background: var(--line);
    border-radius: 2px;
    width: 1.35rem;
    height: 2px;
    display: block
}

.menu-toggle span+span {
    margin-top: .24rem
}

.ticker {
    border: 2px solid var(--line);
    color: var(--paper);
    background: linear-gradient(110deg, #13100af5, #221a10f5);
    border-radius: .9rem;
    margin: 1rem auto 0;
    overflow: hidden;
    transform: rotate(-1.1deg);
    box-shadow: 0 10px 26px #221a1038
}

.ticker-track {
    width: max-content;
    animation: 30s linear infinite ticker;
    display: flex
}

.ticker-track p {
    letter-spacing: .05em;
    white-space: nowrap;
    border-right: 1px dashed #e8cc6873;
    margin: 0;
    padding: .74rem 1.4rem;
    font-family: Special Elite, Courier New, monospace
}

.hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    align-items: stretch;
    gap: 1.8rem;
    margin-top: 2.1rem;
    display: grid
}

.hero-copy,
.hero-art {
    box-shadow: var(--card-shadow);
    background: linear-gradient(155deg, #fffffff2, #f8f2e6e6);
    border: 2px solid #221a10d9;
    border-radius: 1.5rem
}

.hero-copy {
    padding: clamp(1.4rem, 3vw, 2.3rem)
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brown-deep);
    margin: 0;
    font-size: .74rem;
    font-weight: 700
}

.hero-copy h1 {
    letter-spacing: .04em;
    max-width: 17ch;
    margin: .8rem 0 0;
    font-family: Bebas Neue, Impact, sans-serif;
    font-size: clamp(2.9rem, 7.2vw, 5.8rem);
    line-height: .92
}

.hero-description {
    max-width: 58ch;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    line-height: 1.6
}

.hero-actions {
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.2rem;
    display: flex
}

.btn {
    border: 2px solid var(--line);
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: .8rem;
    padding: .72rem 1.16rem;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-primary {
    background: linear-gradient(130deg, var(--gold-bright), var(--gold));
    color: var(--line);
    box-shadow: 0 7px 16px #b0885459
}

.btn-ghost {
    color: var(--line);
    background: #f8f8f8d1
}

.stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1.35rem;
    display: grid
}

.stat-card {
    background: #ffffffb8;
    border: 2px solid #221a10a6;
    border-radius: .85rem;
    padding: .72rem
}

.stat-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #13100abd;
    margin: 0;
    font-size: .66rem
}

.stat-value {
    letter-spacing: .08em;
    margin: .42rem 0 0;
    font-family: Bebas Neue, Impact, sans-serif;
    font-size: 1.55rem;
    line-height: 1
}

.stat-note {
    margin: .3rem 0 0;
    font-size: .8rem;
    line-height: 1.35
}

.hero-art {
    background: radial-gradient(circle at 50% 5%, #e8cc684d, #0000 50%), linear-gradient(160deg, #f8f8f8f7, #f0ebe4eb);
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    display: flex
}

.old-portrait {
    background: linear-gradient(138deg, #8a633a, #6a4b2f 40%, #5a3f28), repeating-linear-gradient(115deg, #ffffff14 0 3px, #0000 3px 7px);
    border: 2px solid #3f2a18;
    border-radius: .9rem;
    margin: 0;
    padding: .72rem;
    box-shadow: inset 0 0 0 1px #ffecc466, 0 10px 20px #1e140b52
}

.old-portrait__mat {
    background: linear-gradient(165deg, #f1eadb, #d9ccb4);
    border: 2px solid #5e4327e6;
    border-radius: .48rem;
    padding: .38rem;
    box-shadow: inset 0 0 0 1px #fff7e5d9
}

.old-portrait img {
    aspect-ratio: 4/3;
    object-fit: cover;
    filter: saturate(.95)contrast(1.03);
    border: 1px solid #221a108c;
    border-radius: .24rem;
    width: 100%;
    display: block
}

.old-portrait--hero img {
    aspect-ratio: 1
}

.hero-contract {
    width: 100%;
    color: var(--line);
    letter-spacing: .02em;
    cursor: copy;
    background: linear-gradient(160deg, #f8f8f8f2, #ece3d6e6);
    border: 2px solid #221a10d6;
    border-radius: .68rem;
    padding: .64rem .7rem;
    font-family: Special Elite, Courier New, monospace;
    font-size: .76rem;
    box-shadow: inset 0 0 0 1px #fff6dda8
}

.hero-contract:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #221a10f2
}

.trait-list {
    gap: .56rem;
    margin: 0;
    padding-left: 1.1rem;
    font-family: Special Elite, Courier New, monospace;
    font-size: .9rem;
    line-height: 1.45;
    display: grid
}

.panel {
    box-shadow: var(--card-shadow);
    background: linear-gradient(160deg, #fffffff5, #f7f1e8eb);
    border: 2px solid #221a10e6;
    border-radius: 1.35rem;
    margin-top: 1.55rem;
    padding: clamp(1.2rem, 3vw, 2rem)
}

.panel-alt {
    background: radial-gradient(circle at 96% 4%, #b0885440, #0000 38%), linear-gradient(165deg, #fffffff0, #f2e9ddf2)
}

.panel-head h2 {
    letter-spacing: .04em;
    margin: .74rem 0 0;
    font-family: Bebas Neue, Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: .95
}

.lore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
    margin-top: 1.2rem;
    display: grid
}

.lore-card {
    background: #ffffffb8;
    border: 2px solid #221a10c7;
    border-radius: .92rem;
    padding: 1rem;
    transition: transform .22s
}

.lore-card:nth-child(2n) {
    transform: rotate(-.6deg)
}

.lore-card:nth-child(3n) {
    transform: rotate(.8deg)
}

.lore-card:hover {
    transform: translateY(-4px)rotate(0)
}

.lore-card h3,
.token-card h3,
.vault-group__head h3 {
    letter-spacing: .05em;
    margin: 0;
    font-family: Bebas Neue, Impact, sans-serif;
    font-size: 1.62rem
}

.lore-card p,
.token-card p,
.vault-group__head p {
    margin: .54rem 0 0;
    line-height: 1.55
}

.tokenomics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .95rem;
    margin-top: 1.2rem;
    display: grid
}

.token-card {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    background: #ffffffd6;
    border: 2px solid #221a10d1;
    border-radius: 1rem;
    padding: 1rem
}

.disclaimer {
    background: #f8f8f8b8;
    border: 2px dashed #221a10a6;
    border-radius: .8rem;
    margin-top: .95rem;
    padding: .85rem .95rem;
    font-size: .9rem;
    line-height: 1.5
}

.vault-sections {
    gap: 1.15rem;
    margin-top: 1.2rem;
    display: grid
}

.vault-group {
    background: linear-gradient(160deg, #ffffffad, #f5eee4d1);
    border: 2px solid #221a10c7;
    border-radius: 1rem;
    padding: 1rem
}

.vault-group__head {
    margin-bottom: .75rem
}

.vault-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
    display: grid
}

.site-footer {
    text-align: center;
    background: linear-gradient(160deg, #ffffffeb, #f0e9dfeb);
    border: 2px solid #221a10e0;
    border-radius: .95rem;
    width: min(1120px, 100% - 2.2rem);
    margin: 1.55rem auto 0;
    padding: .92rem;
    font-size: .9rem
}

.reveal {
    opacity: 0;
    animation: .75s cubic-bezier(.2, .65, .24, 1) forwards reveal;
    transform: translateY(18px)
}

.hero.reveal {
    animation-delay: 60ms
}

#lore.reveal {
    animation-delay: .13s
}

#tokenomics.reveal {
    animation-delay: .18s
}

#meme-vault.reveal {
    animation-delay: .24s
}

@keyframes ticker {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (width<=960px) {
    .unorthodox-nav {
        clip-path: none;
        border-radius: 1rem;
        grid-template-columns: auto auto auto
    }

    .unorthodox-nav:before,
    .unorthodox-nav:after,
    .nav-cta {
        display: none
    }

    .nav-right {
        gap: .38rem
    }

    .nav-social {
        margin-right: .14rem
    }

    .social-link {
        width: 2.08rem;
        height: 2.08rem
    }

    .menu-toggle {
        display: inline-flex
    }

    .nav-links {
        border: 2px solid var(--line);
        opacity: 0;
        pointer-events: none;
        background: #f8f5eff7;
        border-radius: .9rem;
        flex-direction: column;
        gap: .18rem;
        padding: .72rem;
        transition: opacity .2s, transform .2s;
        position: absolute;
        top: calc(100% + .7rem);
        left: 0;
        right: 0;
        transform: translateY(-8px);
        box-shadow: 0 10px 24px #221a103d
    }

    .nav-links--open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0)
    }

    .hero,
    .stat-grid,
    .lore-grid,
    .vault-grid,
    .tokenomics-grid {
        grid-template-columns: 1fr
    }

    .lore-card,
    .lore-card:nth-child(2n),
    .lore-card:nth-child(3n) {
        transform: none
    }
}

@media (width<=640px) {

    main,
    .site-footer {
        width: calc(100% - 1.2rem)
    }

    .chain-header {
        padding: .72rem .6rem 0
    }

    .brand-name {
        font-size: 1.72rem
    }

    .ticker {
        transform: rotate(0)
    }
}