.camopedia-wrap{
    width:min(1120px,calc(100% - 32px));
    margin:auto
}

.camopedia-hero{
    background:#191b18;
    color:#fff;
    padding:46px 0
}

.camopedia-hero-grid{
    display:grid;
    grid-template-columns:minmax(260px,390px) 1fr;
    gap:42px;
    align-items:center
}

.camopedia-pattern-image{
    width:100%;
    max-height:510px;
    object-fit:cover;
    border-radius:18px;
    display:block
}

.camopedia-eyebrow{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:700;
    opacity:.7
}

.camopedia-hero h1{
    margin:8px 0 6px;
    font-size:clamp(34px,5vw,62px);
    line-height:1
}

.camopedia-pattern-name{
    font-size:23px;
    opacity:.82;
    margin-bottom:25px
}

.camopedia-snapshot{
    font-size:21px;
    max-width:700px
}

.camopedia-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px
}

.camopedia-button{
    display:inline-block;
    padding:11px 16px;
    border-radius:9px;
    background:#fff;
    color:#191b18;
    text-decoration:none;
    font-weight:700
}

.camopedia-button:hover{
    opacity:.88
}

.camopedia-button-secondary{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.45)
}

.camopedia-section{
    padding:42px 0
}

.camopedia-section h2{
    margin:0 0 22px;
    font-size:30px
}

.camopedia-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.camopedia-card{
    background:#020202;
    border-radius:16px;
    padding:22px;
    box-shadow:0 2px 14px rgba(0,0,0,.06)
}

.camopedia-rank{
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.55
}

.camopedia-card h3{
    margin:7px 0 8px;
    font-size:20px
}

.camopedia-result{
    font-weight:700;
    margin-bottom:8px
}

.camopedia-reason{
    font-size:14px;
    color:#a1a1a1
}

.camopedia-metric-title{
    font-weight:700;
    font-size:18px;
    margin-bottom:16px
}

.camopedia-bar-row{
    margin:12px 0
}

.camopedia-bar-label{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:5px
}

.camopedia-bar{
    background:#e8e8e2;
    height:10px;
    border-radius:99px;
    overflow:hidden
}

.camopedia-fill{
    background:#50534b;
    height:100%;
    border-radius:99px
}

.camopedia-swatches{
    display:flex;
    gap:7px;
    margin:14px 0
}

.camopedia-swatch{
    width:38px;
    height:38px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,.15)
}

.camopedia-meta{
    font-size:14px;
    color:#62645e;
    margin-top:8px
}

.camopedia-traits{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.camopedia-trait h3{
    margin:0 0 5px
}

.camopedia-trait-result{
    font-weight:700;
    font-size:17px
}

.camopedia-trait p{
    margin:10px 0 0
}

.camopedia-notice{
    background:#272625;
    padding:12px 14px;
    border-radius:10px;
    font-size:14px
}

.camopedia-footer-note{
    font-size:13px;
    color:#777970;
    border-top:1px solid #dddcd5;
    padding:24px 0 50px
}

.camopedia-not-found{
    padding:70px 0
}

@media(max-width:800px){
    .camopedia-hero-grid,
    .camopedia-grid-3,
    .camopedia-traits{
        grid-template-columns:1fr
    }

    .camopedia-pattern-image{
        max-height:420px
    }
}


/* ============================================================
   CAMOPEDIA INDEX
   ============================================================ */

.camopedia-index-hero{
    background:#191b18;
    color:#fff;
    padding:52px 0 38px
}

.camopedia-index-hero h1{
    margin:6px 0 12px;
    font-size:clamp(38px,6vw,68px);
    line-height:1
}

.camopedia-index-intro{
    max-width:760px;
    font-size:19px;
    margin:0
}

.camopedia-index-count{
    margin-top:18px;
    font-size:14px;
    opacity:.72
}

.camopedia-search-wrap{
    margin-top:25px;
    max-width:560px
}

.camopedia-search{
    width:100%;
    padding:14px 16px;
    border:0;
    border-radius:10px;
    font-size:17px;
    outline:none
}

.camopedia-index-main{
    padding-top:28px;
    padding-bottom:50px
}

.camopedia-pattern-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px,1fr)
        );
    gap:12px
}

.camopedia-pattern-card{
    position:relative;
    display:block;
    aspect-ratio:1 / 1.25;
    overflow:hidden;
    border-radius:12px;
    background:#222;
    color:#fff;
    text-decoration:none
}

.camopedia-card-image{
    width:100%;
    height:100%
}

.camopedia-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .22s ease
}

.camopedia-pattern-card:hover
.camopedia-card-image img{
    transform:scale(1.035)
}

.camopedia-card-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:42px 13px 13px;
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.84)
        )
}

.camopedia-card-pattern{
    font-size:18px;
    font-weight:700;
    line-height:1.15
}

.camopedia-card-brand{
    margin-top:3px;
    font-size:13px;
    opacity:.82
}

.camopedia-card-standout{
    margin-top:8px;
    font-size:12px;
    line-height:1.25;
    opacity:.82
}

.camopedia-no-results{
    padding:60px 0;
    text-align:center;
    font-size:18px;
    color:#666
}

@media(max-width:600px){

    .camopedia-pattern-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:8px
    }

    .camopedia-card-pattern{
        font-size:15px
    }

    .camopedia-card-standout{
        display:none
    }
}


/* ============================================================
   CAMOPEDIA BROWSER NAVIGATION
   ============================================================ */

.camopedia-browser{
    background:#ecebe5;
    border-bottom:1px solid #d7d6cf;
    padding:16px 0
}

.camopedia-browser-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:9px;
    color:#5b5d56
}

.camopedia-browser-controls{
    display:flex;
    align-items:end;
    gap:10px;
    flex-wrap:wrap
}

.camopedia-browser-all,
.camopedia-browser-pager a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 13px;
    border-radius:8px;
    background:#252822;
    color:#fff !important;
    text-decoration:none;
    font-weight:700
}

.camopedia-browser-select{
    flex:1 1 210px
}

.camopedia-browser-select label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
    color:#66685f
}

.camopedia-browser-select select{
    width:100%;
    min-height:42px;
    padding:8px 34px 8px 10px;
    border:1px solid #c8c8c0;
    border-radius:8px;
    background:#fff;
    font-size:16px
}

.camopedia-browser-pager{
    display:flex;
    gap:8px;
    margin-left:auto
}

.camopedia-browser-pager span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 13px;
    border-radius:8px;
    background:#d8d7d0;
    color:#96978f
}

@media(max-width:700px){

    .camopedia-browser-controls{
        display:grid;
        grid-template-columns:1fr 1fr
    }

    .camopedia-browser-all{
        grid-column:1 / -1
    }

    .camopedia-browser-select{
        min-width:0
    }

    .camopedia-browser-pager{
        grid-column:1 / -1;
        width:100%;
        margin:2px 0 0
    }

    .camopedia-browser-pager a,
    .camopedia-browser-pager span{
        flex:1
    }
}

@media(max-width:430px){

    .camopedia-browser-controls{
        grid-template-columns:1fr
    }

    .camopedia-browser-all,
    .camopedia-browser-pager{
        grid-column:1
    }
}