:root{
    --dark:#171510;
    --dark-2:#211e18;
    --cream:#efe9dc;
    --cream-card:#f5f0e6;
    --gold:#b99455;
    --gold-bright:#d2ae6c;
    --gold-deep:#8b6b34;
    --text:#1b1915;
    --muted:#71695e;
    --dark-text:#f5efe4;
    --dark-muted:#b8afa0;
    --cream-line:rgba(30,25,18,.14);
    --dark-line:rgba(255,255,255,.12);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:'DM Sans',system-ui,sans-serif;
    background:var(--cream);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:min(1120px,calc(100% - 48px));
    margin:0 auto;
}


/* Top */

.topbar{
    background:var(--dark);
    border-bottom:1px solid rgba(185,148,85,.25);
}

.topbar-inner{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    color:white;
}

.brand-mark{
    width:36px;
    height:36px;
    border:1px solid var(--gold);
    color:var(--gold-bright);
    display:grid;
    place-items:center;
    border-radius:50%;
    font-family:'Space Grotesk';
    font-weight:700;
}

.brand strong{
    display:block;
    font-family:'Space Grotesk';
    font-size:.95rem;
}

.brand small{
    display:block;
    color:var(--dark-muted);
    font-size:.66rem;
    margin-top:1px;
}

.top-actions{
    display:flex;
    gap:20px;
}

.small-link{
    color:var(--dark-muted);
    font-size:.8rem;
    font-weight:600;
}

.small-link:hover{
    color:var(--gold-bright);
}


/* Type */

h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
}

h1{
    font-size:clamp(3rem,7vw,5.6rem);
    line-height:.98;
    letter-spacing:-.055em;
}

h2{
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.02;
    letter-spacing:-.04em;
}

h3{
    font-size:1.25rem;
}

.eyebrow{
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.13em;
    color:var(--gold-deep);
    margin-bottom:17px;
}

.eyebrow.gold{
    color:var(--gold-bright);
}


/* Hero */

.hero,
.project-hero{
    padding:86px 0 92px;
}

.hero-copy{
    max-width:640px;
    color:var(--muted);
    font-size:1.08rem;
    margin-top:25px;
}

.project-title{
    margin-top:42px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:50px;
}

.project-title p{
    color:var(--muted);
    margin-top:20px;
    font-size:1rem;
}

.back-link{
    color:var(--gold-deep);
    font-size:.8rem;
    font-weight:700;
}

.representation-card{
    min-width:255px;
    border-left:1px solid var(--cream-line);
    padding-left:34px;
}

.representation-card span{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
}

.representation-card strong{
    display:block;
    font-family:'Space Grotesk';
    color:var(--gold-deep);
    font-size:3.5rem;
    letter-spacing:-.05em;
    line-height:1;
    margin:9px 0;
}

.representation-card small{
    color:var(--muted);
}


/* Sections */

.section{
    padding:88px 0;
}

.dark-section{
    background:var(--dark);
    color:var(--dark-text);
}

.section-heading{
    display:grid;
    grid-template-columns:1fr .7fr;
    gap:50px;
    align-items:end;
    margin-bottom:40px;
}

.section-heading p{
    color:var(--muted);
    font-size:.9rem;
}

.dark-section .section-heading p{
    color:var(--dark-muted);
}


/* Global leaderboard */

.project-table{
    border-top:1px solid var(--dark-line);
}

.project-row{
    display:grid;
    grid-template-columns:70px minmax(220px,1.5fr) 1fr 1fr 1fr;
    gap:20px;
    align-items:center;
    padding:20px 12px;
    border-bottom:1px solid var(--dark-line);
}

a.project-row{
    transition:.18s;
}

a.project-row:hover{
    background:rgba(255,255,255,.025);
}

.project-head{
    color:var(--dark-muted);
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding-top:13px;
    padding-bottom:13px;
}

.project-name{
    display:flex;
    align-items:center;
    gap:13px;
}

.project-name img,
.project-placeholder{
    width:42px;
    height:42px;
    border-radius:12px;
    object-fit:cover;
}

.project-placeholder{
    display:grid;
    place-items:center;
    border:1px solid rgba(185,148,85,.45);
    color:var(--gold-bright);
    font-family:'Space Grotesk';
}

.percentage{
    font-family:'Space Grotesk';
    color:var(--gold-bright);
    font-weight:700;
    font-size:1.08rem;
}


/* Members */

.member-table{
    border-top:1px solid var(--dark-line);
}

.member-row{
    display:grid;
    grid-template-columns:65px minmax(240px,1.5fr) 1fr 1fr 70px;
    gap:20px;
    align-items:center;
    padding:14px 12px;
    border-bottom:1px solid var(--dark-line);
}

.member-head{
    color:var(--dark-muted);
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.member-profile{
    display:flex;
    align-items:center;
    gap:14px;
}

.member-profile img{
    width:54px;
    height:54px;
    border-radius:13px;
    object-fit:cover;
}

.rank{
    color:var(--dark-muted);
    font-family:'Space Grotesk';
}

.streak{
    color:var(--gold-bright);
    font-weight:700;
}

.member-row small{
    color:var(--dark-muted);
    margin-left:3px;
    font-size:.68rem;
}

.x-link{
    color:var(--gold-bright);
    font-size:.78rem;
    font-weight:700;
}

.muted{
    color:var(--dark-muted);
}


/* Rewards */

.rewards-section{
    background:var(--cream);
}

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

.reward-card{
    border:1px solid var(--cream-line);
    border-radius:18px;
    padding:25px;
    background:transparent;
}

.reward-image{
    width:100%;
    aspect-ratio:16/9;
    border-radius:12px;
    object-fit:cover;
    margin-bottom:20px;
}

.reward-days{
    color:var(--gold-deep);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:12px;
}

.reward-card p{
    color:var(--muted);
    font-size:.87rem;
    margin-top:10px;
}

.empty-state{
    padding:25px;
    border:1px dashed var(--cream-line);
    color:var(--muted);
    border-radius:16px;
}


/* Footer */

footer{
    background:var(--dark);
    color:var(--dark-muted);
    border-top:1px solid var(--dark-line);
    padding:30px 0;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:.72rem;
}


/* Tablet */

@media(max-width:820px){

    .container{
        width:calc(100% - 32px);
    }

    .section-heading,
    .project-title{
        grid-template-columns:1fr;
    }

    .representation-card{
        padding-left:0;
        border-left:0;
        padding-top:25px;
        border-top:1px solid var(--cream-line);
    }

    .project-head,
    .member-head{
        display:none;
    }

    .project-row{
        grid-template-columns:45px 1fr auto;
        gap:12px;
    }

    .project-row > div:nth-child(3),
    .project-row > div:nth-child(4){
        display:none;
    }

    .member-row{
        grid-template-columns:35px 1fr auto;
        gap:12px;
    }

    .member-row > div:nth-child(4),
    .member-row > div:nth-child(5){
        display:none;
    }

    .reward-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* Mobile */

@media(max-width:560px){

    .container{
        width:calc(100% - 24px);
    }

    .topbar-inner{
        min-height:62px;
    }

    .brand small{
        display:none;
    }

    .top-actions{
        gap:12px;
    }

    .small-link{
        font-size:.7rem;
    }

    .hero,
    .project-hero{
        padding:58px 0 65px;
    }

    h1{
        font-size:clamp(2.7rem,14vw,4rem);
    }

    .section{
        padding:62px 0;
    }

    .section-heading{
        gap:18px;
        margin-bottom:30px;
    }

    .representation-card strong{
        font-size:3rem;
    }

    .project-row{
        padding:16px 5px;
    }

    .project-name img,
    .project-placeholder{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .member-row{
        padding:13px 5px;
    }

    .member-profile img{
        width:46px;
        height:46px;
        border-radius:11px;
    }

    .member-profile strong{
        font-size:.88rem;
    }

    .streak{
        text-align:right;
        white-space:nowrap;
    }

    .reward-grid{
        grid-template-columns:1fr;
    }

    .footer-inner{
        flex-direction:column;
        gap:4px;
    }
}

.brand-logo{
    width:38px;
    height:38px;
    object-fit:contain;
    flex:0 0 auto;
}