:root {
    --tp-display: "Barlow Condensed", sans-serif;
    --tp-body: "Manrope", sans-serif;
    --tp-mono: "IBM Plex Mono", monospace;

    --tp-black: #090806;
    --tp-bone: #efe8db;
    --tp-gold: #c99543;
    --tp-gold-light: #e0b45f;
    --tp-ink: #17140f;
    --tp-muted: #756d61;
}


/* ==========================================================
   SHARED PAGE FOUNDATION
   ========================================================== */

.tp {
    overflow: hidden;

    font-family: var(--tp-body);
}


.tp-shell {
    width: min(calc(100% - 72px), 1360px);

    margin-inline: auto;

    position: relative;
    z-index: 2;
}


.tp-grid {
    position: absolute;
    inset: 0;

    opacity: .17;

    background-image:
        linear-gradient(
            rgba(211,168,92,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(211,168,92,.055) 1px,
            transparent 1px
        );

    background-size: 78px 78px;

    pointer-events: none;
}


.tp-label,
.tp-section-label {
    font-family: var(--tp-mono);

    font-size: 10px;
    font-weight: 600;

    line-height: 1.45;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.tp-section-label {
    color: var(--tp-gold);
}


.tp-live {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: rgba(242,236,223,.45);

    font-family: var(--tp-mono);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .10em;
}


.tp-live i {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #52c982;

    box-shadow:
        0 0 0 6px rgba(82,201,130,.08);
}


.tp-dark-copy,
.tp-light-copy {
    max-width: 590px;

    font-family: var(--tp-body);

    font-size: 17px;
    font-weight: 400;

    line-height: 1.68;

    letter-spacing: 0;
    word-spacing: normal;
}


.tp-dark-copy {
    color: rgba(242,236,223,.60);
}


.tp-light-copy {
    color: var(--tp-muted);
}


.tp-actions {
    display: flex;

    gap: 10px;

    margin-top: 34px;
}


.tp-button {
    min-height: 48px;

    padding: 0 21px;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    border: 1px solid transparent;
    border-radius: 3px;

    font-family: var(--tp-body);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


.tp-button-gold {
    color: #0c0a07;

    background:
        linear-gradient(
            135deg,
            #d8a958,
            #b97f2e
        );
}


.tp-button-dark {
    color: #eee7dc;

    border-color:
        rgba(216,171,92,.22);

    background:
        rgba(255,255,255,.018);
}


.tp-back {
    color: rgba(243,237,226,.48);

    font-family: var(--tp-body);

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}


.tp-section-title {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 8px;

    margin: 0;

    color: var(--tp-ink);

    font-family: var(--tp-display);

    font-size: clamp(62px,5vw,88px);
    font-weight: 700;

    line-height: 1;

    letter-spacing: -.015em;
    word-spacing: normal;
}


.tp-section-title > span {
    display: block;

    line-height: 1;
}


/* ==========================================================
   GLOBAL HERO
   ========================================================== */

.tp-global .tg-hero {
    min-height: 700px;

    position: relative;

    display: flex;
    align-items: center;

    color: #f3ede2;

    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(193,139,55,.12),
            transparent 30%
        ),
        #090806;
}


.tp-global .tg-hero .tp-shell {
    padding: 55px 0 72px;
}


.tp-global .tg-kicker {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 62px;

    color: var(--tp-gold);

    font-family: var(--tp-mono);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .10em;
}


.tp-global .tg-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(400px,.76fr);

    gap: clamp(75px,8vw,135px);

    align-items: center;
}


/* HOME TITLE:
   Separate physical blocks.
   No overlapping possible.
*/

.tp-global .tg-title {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 14px;

    margin: 0;

    font-family: var(--tp-display);

    font-size: clamp(82px,7.2vw,122px);
    font-weight: 700;

    line-height: 1;

    letter-spacing: -.018em;
}


.tp-global .tg-title-line {
    display: block;

    line-height: 1;
}


.tp-global .tg-title-white {
    color: #f3ede2;
}


.tp-global .tg-title-gold {
    color: var(--tp-gold-light);
}


.tp-global .tg-hero-copy > p {
    margin: 30px 0 0;
}


/* ==========================================================
   GLOBAL SIGNAL CARD
   ========================================================== */

.tp-global .tg-signal-card {
    overflow: hidden;

    border:
        1px solid rgba(207,160,77,.32);

    background:
        rgba(14,12,9,.82);

    box-shadow:
        0 40px 100px rgba(0,0,0,.34);
}


.tp-global .tg-card-head {
    min-height: 70px;

    padding: 0 22px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    border-bottom:
        1px solid rgba(207,160,77,.14);
}


.tp-global .tg-card-head .tp-label {
    color: rgba(242,236,223,.47);
}


.tp-global .tg-card-head strong {
    display: block;

    margin-top: 5px;

    color: rgba(243,237,226,.72);

    font-family: var(--tp-body);

    font-size: 12px;
}


.tp-global .tg-card-body {
    min-height: 230px;

    display: grid;

    grid-template-columns:
        105px minmax(0,1fr);

    gap: 24px;

    align-items: center;

    padding: 28px 26px;
}


.tp-global .tg-project-count > strong {
    display: block;

    color: var(--tp-gold-light);

    font-family: var(--tp-display);

    font-size: 100px;
    font-weight: 700;

    line-height: .8;
}


.tp-global .tg-project-count > .tp-label {
    display: block;

    margin-top: 10px;

    color: rgba(242,236,223,.36);

    font-size: 8px;
}


.tp-global .tg-graph {
    padding-left: 20px;

    border-left:
        1px solid rgba(207,160,77,.13);
}


.tp-global .tg-graph-labels {
    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;

    color: rgba(242,236,223,.33);

    font-family: var(--tp-mono);

    font-size: 7px;
    font-weight: 600;

    letter-spacing: .09em;
}


.tp-global .tg-graph-labels
span:last-child {
    color: #c99745;
}


.tp-global .tg-graph-svg {
    width: 100%;
    height: auto;

    display: block;

    aspect-ratio: 360 / 130;
}


.tp-global .tg-grid-line {
    stroke: rgba(242,236,223,.07);

    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}


.tp-global .tg-graph-line {
    fill: none;

    stroke: #d7a54e;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


.tp-global .tg-dot {
    fill: #d7a54e;

    stroke: #0c0a07;

    stroke-width: 2;

    vector-effect: non-scaling-stroke;
}


.tp-global .tg-dot-current {
    fill: #52c982;

    filter:
        drop-shadow(
            0 0 5px rgba(82,201,130,.50)
        );
}


.tp-global .tg-card-stats {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid rgba(207,160,77,.14);
}


.tp-global .tg-card-stats > div {
    padding: 18px 17px;
}


.tp-global
.tg-card-stats > div + div {
    border-left:
        1px solid rgba(207,160,77,.12);
}


.tp-global
.tg-card-stats .tp-label {
    display: block;

    color: rgba(242,236,223,.33);

    font-size: 8px;
}


.tp-global .tg-card-stats strong {
    display: block;

    margin-top: 7px;

    color: #f2ecdf;

    font-family: var(--tp-display);

    font-size: 36px;
    font-weight: 600;

    line-height: 1;
}


.tp-global .tg-card-stats b {
    font: inherit;
}


.tp-global .tg-card-stats small {
    margin-left: 4px;

    color: rgba(242,236,223,.33);

    font-family: var(--tp-body);

    font-size: 8px;
}


/* ==========================================================
   GLOBAL LEADERBOARD
   ========================================================== */

.tp-global .tg-projects {
    position: relative;

    overflow: hidden;

    padding: 100px 0 115px;

    background:
        linear-gradient(
            135deg,
            #f0eadd,
            #e7ddcd
        );
}


.tp-global .tg-watermark {
    position: absolute;

    right: -2vw;
    top: 0;

    color: rgba(75,55,27,.025);

    font-family: var(--tp-display);

    font-size: clamp(170px,21vw,330px);
    font-weight: 700;

    line-height: .9;

    pointer-events: none;
}


.tp-global .tg-section-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 70px;

    margin: 24px 0 50px;
}


.tp-global .tg-section-head
.tp-light-copy {
    margin: 24px 0 0;
}


/* PLATFORM LEADER */

.tp-global .tg-leader-card {
    width: 290px;

    flex: 0 0 290px;

    padding: 19px;

    color: var(--tp-ink);

    text-decoration: none;

    border:
        1px solid rgba(155,109,42,.25);

    background:
        rgba(255,255,255,.20);

    box-shadow:
        0 20px 55px rgba(77,52,19,.05);
}


.tp-global .tg-leader-card-top {
    display: flex;

    justify-content: space-between;

    padding-bottom: 14px;

    color: #9a6a27;

    border-bottom:
        1px solid rgba(155,109,42,.14);
}


.tp-global
.tg-leader-card-top .tp-label {
    color: #8b7d69;

    font-size: 9px;
}


.tp-global .tg-leader-card-main {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-top: 17px;
}


.tp-global .tg-leader-logo {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #15110c;
}


.tp-global .tg-leader-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.tp-global
.tg-leader-card-main strong {
    display: block;

    color: #b57828;

    font-family: var(--tp-display);

    font-size: 50px;
    font-weight: 700;

    line-height: .9;
}


.tp-global
.tg-leader-card-main
> div:last-child > span {
    display: block;

    margin-top: 6px;

    color: #716758;

    font-family: var(--tp-body);

    font-size: 12px;
    font-weight: 600;
}


/* TABLE */

.tp-global .tg-table {
    border-top:
        1px solid rgba(125,91,42,.20);
}


.tp-global .tg-table-head,
.tp-global .tg-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(260px,1fr)
        120px
        120px
        130px
        180px;

    gap: 18px;

    align-items: center;
}


.tp-global .tg-table-head {
    min-height: 52px;

    color: #877a68;

    font-family: var(--tp-mono);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .09em;

    border-bottom:
        1px solid rgba(125,91,42,.15);
}


.tp-global .tg-row {
    min-height: 110px;

    color: var(--tp-ink);

    text-decoration: none;

    border-bottom:
        1px solid rgba(125,91,42,.15);
}


.tp-global .tg-rank {
    color: #ad7429;

    font-family: var(--tp-display);

    font-size: 29px;
    font-weight: 700;
}


.tp-global .tg-project {
    display: flex;

    align-items: center;

    gap: 15px;
}


.tp-global .tg-project-logo {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    overflow: hidden;

    background: #15110c;
}


.tp-global .tg-project-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.tp-global .tg-project strong {
    display: block;

    font-family: var(--tp-body);

    font-size: 15px;
    font-weight: 700;
}


.tp-global .tg-project small {
    display: block;

    margin-top: 4px;

    color: #817768;

    font-family: var(--tp-body);

    font-size: 10px;
}


.tp-global .tg-cell {
    color: #554e44;

    font-family: var(--tp-body);

    font-size: 13px;
}


.tp-global .tg-percent strong {
    color: #a96f24;

    font-family: var(--tp-display);

    font-size: 34px;
    font-weight: 700;
}


/* ==========================================================
   MEMBER HERO
   ========================================================== */

.tp-member .tm-hero {
    min-height: 650px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #f3ede2;

    background:
        radial-gradient(
            circle at 77% 27%,
            rgba(193,139,55,.13),
            transparent 30%
        ),
        #090806;
}


.tp-member .tm-hero .tp-shell {
    padding: 45px 0 68px;
}


.tp-member .tm-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 42px;
}


.tp-member .tm-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.65fr);

    gap: clamp(75px,9vw,140px);

    align-items: center;
}


.tp-member .tm-copy h1 {
    margin: 18px 0 20px;

    color: #f3ede2;

    font-family: var(--tp-display);

    font-size: clamp(82px,7vw,118px);
    font-weight: 700;

    line-height: 1;

    letter-spacing: -.018em;
}


.tp-member .tm-copy
> .tp-dark-copy {
    margin: 0;
}


/* MEMBER STATS */

.tp-member .tm-stats {
    max-width: 650px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    margin-top: 45px;

    border-top:
        1px solid rgba(211,168,91,.18);

    border-bottom:
        1px solid rgba(211,168,91,.18);
}


.tp-member .tm-stats > div {
    padding: 18px 18px 19px 0;
}


.tp-member
.tm-stats > div + div {
    padding-left: 18px;

    border-left:
        1px solid rgba(211,168,91,.12);
}


.tp-member .tm-stats .tp-label {
    display: block;

    color: rgba(242,236,223,.33);

    font-size: 9px;
}


.tp-member .tm-stats strong {
    display: block;

    margin-top: 7px;

    color: #f2ecdf;

    font-family: var(--tp-display);

    font-size: 40px;
    font-weight: 600;

    line-height: 1;
}


.tp-member .tm-stats small {
    margin-left: 4px;

    color: rgba(242,236,223,.34);

    font-family: var(--tp-body);

    font-size: 9px;
}


.tp-member
.tm-stats .tm-project-name {
    font-family: var(--tp-body);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.25;
}


/* PFP */

.tp-member .tm-pfp {
    width: min(100%,420px);

    aspect-ratio: 1;

    position: relative;

    justify-self: end;

    overflow: hidden;

    border:
        1px solid rgba(211,166,87,.38);

    border-radius: 14px;

    background: #14110d;

    box-shadow:
        0 45px 105px rgba(0,0,0,.43);
}


.tp-member .tm-pfp > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.tp-member .tm-pfp-fallback {
    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    color: var(--tp-gold-light);

    font-family: var(--tp-display);

    font-size: 120px;
}


.tp-member .tm-pfp-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,6,5,.90),
            transparent 55%
        );
}


.tp-member .tm-pfp-label {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 21px;
}


.tp-member
.tm-pfp-label .tp-label {
    color: var(--tp-gold-light);

    font-size: 8px;
}


.tp-member .tm-pfp-label strong {
    display: block;

    margin-top: 5px;

    color: #f3ede2;

    font-family: var(--tp-body);

    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   MEMBER PROGRESS
   ========================================================== */

.tp-member .tm-progress {
    position: relative;

    overflow: hidden;

    padding: 100px 0 115px;

    background:
        linear-gradient(
            135deg,
            #f0eadd,
            #e7ddcd
        );
}


.tp-member .tm-watermark {
    position: absolute;

    top: 0;
    right: -2vw;

    color: rgba(75,55,27,.025);

    font-family: var(--tp-display);

    font-size: clamp(170px,21vw,330px);
    font-weight: 700;

    line-height: .9;
}


.tp-member .tm-section-head {
    margin: 24px 0 48px;
}


.tp-member
.tm-section-head .tp-light-copy {
    margin: 24px 0 0;
}


/* MILESTONES */

.tp-member .tm-milestones {
    display: grid;

    gap: 22px;
}


.tp-member .tm-milestone {
    min-height: 295px;

    display: grid;

    grid-template-columns:
        160px
        minmax(350px,1fr)
        minmax(280px,.62fr);

    overflow: hidden;

    border:
        1px solid rgba(154,109,42,.24);

    background:
        rgba(255,255,255,.24);

    box-shadow:
        0 28px 76px rgba(70,48,17,.06);
}


.tp-member .tm-days {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 32px;

    border-right:
        1px solid rgba(154,109,43,.15);
}


.tp-member .tm-days strong {
    color: #bb8235;

    font-family: var(--tp-display);

    font-size: 82px;
    font-weight: 700;

    line-height: .9;
}


.tp-member .tm-days span {
    margin-top: 7px;

    color: #a77838;

    font-family: var(--tp-mono);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .10em;
}


.tp-member .tm-milestone-copy {
    align-self: center;

    padding: 40px;
}


.tp-member .tm-milestone-meta {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.tp-member .tm-status {
    color: #8b7760;

    font-family: var(--tp-mono);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .06em;
}


.tp-member
.tm-milestone.is-completed
.tm-status {
    color: #a16c22;
}


.tp-member .tm-milestone h3 {
    margin: 12px 0 13px;

    font-family: var(--tp-body);

    font-size: clamp(26px,2.5vw,38px);
    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.02em;
}


.tp-member .tm-milestone p {
    margin: 0;

    color: var(--tp-muted);

    font-family: var(--tp-body);

    font-size: 13px;

    line-height: 1.62;
}


.tp-member .tm-reward {
    margin-top: 19px;

    padding-top: 14px;

    border-top:
        1px solid rgba(153,108,43,.14);
}


.tp-member .tm-reward strong {
    display: block;

    margin-top: 5px;

    color: #2c261d;

    font-family: var(--tp-body);

    font-size: 12px;
    font-weight: 700;
}


.tp-member .tm-milestone-art {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(202,155,75,.15),
            transparent 30%
        ),
        #0c0a07;
}


.tp-member .tm-milestone-art > span {
    position: absolute;

    left: -8px;
    bottom: -25px;

    color: rgba(207,157,71,.13);

    font-family: var(--tp-display);

    font-size: 225px;
    font-weight: 700;

    line-height: .9;
}


.tp-member .tm-milestone-art img {
    width: 64px;
    height: 64px;

    position: absolute;

    top: 25px;
    right: 25px;

    border-radius: 50%;

    object-fit: cover;
}


/* ==========================================================
   REVEALS
   ========================================================== */

[data-tp-reveal] {
    opacity: 0;

    transform: translateY(16px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}


[data-tp-reveal].is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .tp-global .tg-hero-grid,
    .tp-member .tm-hero-grid {
        grid-template-columns: 1fr;
    }


    .tp-global .tg-signal-card {
        width: min(100%,580px);
    }


    .tp-global .tg-section-head {
        display: block;
    }


    .tp-global .tg-leader-card {
        margin-top: 30px;
    }


    .tp-member .tm-pfp {
        justify-self: start;
    }


    .tp-member .tm-milestone {
        grid-template-columns:
            145px 1fr;
    }


    .tp-member .tm-milestone-art {
        grid-column: 1 / -1;

        min-height: 220px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .tp-shell {
        width: calc(100% - 34px);
    }


    .tp-global .tg-title {
        font-size:
            clamp(64px,18vw,92px);

        gap: 9px;
    }


    .tp-section-title {
        font-size:
            clamp(52px,14vw,70px);

        gap: 6px;
    }


    .tp-dark-copy,
    .tp-light-copy {
        font-size: 15px;
    }


    .tp-global .tg-card-body {
        grid-template-columns: 1fr;
    }


    .tp-global .tg-graph {
        padding:
            20px 0 0;

        border-left: 0;

        border-top:
            1px solid rgba(207,160,77,.13);
    }


    .tp-global .tg-card-stats {
        grid-template-columns: 1fr;
    }


    .tp-global
    .tg-card-stats > div + div {
        border-left: 0;

        border-top:
            1px solid rgba(207,160,77,.12);
    }


    .tp-global .tg-table-head {
        display: none;
    }


    .tp-global .tg-row {
        grid-template-columns:
            42px 1fr auto;

        gap: 12px;

        padding: 16px 0;
    }


    .tp-global .tg-cell {
        display: none;
    }


    .tp-member .tm-copy h1 {
        font-size:
            clamp(70px,18vw,96px);
    }


    .tp-member .tm-stats {
        grid-template-columns: 1fr 1fr;
    }


    .tp-member
    .tm-stats > div:nth-child(3) {
        grid-column: 1 / -1;

        padding-left: 0;

        border-left: 0;

        border-top:
            1px solid rgba(211,168,91,.12);
    }


    .tp-member .tm-milestone {
        grid-template-columns: 1fr;
    }


    .tp-member .tm-days {
        padding: 27px 27px 0;

        border: 0;
    }


    .tp-member .tm-milestone-copy {
        padding: 27px;
    }


    .tp-member .tm-milestone-art {
        grid-column: auto;

        min-height: 210px;
    }

}


/* ==========================================================
   FINAL SHARED SECTION HEADING SCALE
   Same scale as project page.
   ========================================================== */

.tp-global .tp-section-title,
.tp-member .tp-section-title {
    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        clamp(62px, 5vw, 88px)
        !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        -.015em !important;

    word-spacing:
        normal !important;

    font-kerning:
        normal !important;

    gap:
        8px !important;
}


.tp-global .tp-section-title > span,
.tp-member .tp-section-title > span {
    line-height:
        1 !important;
}


/* Supporting copy beneath section headings */

.tp-global .tg-section-head .tp-light-copy,
.tp-member .tm-section-head .tp-light-copy {
    margin-top:
        24px !important;
}



/* ==========================================================
   MOBILE FINAL PASS
   ONLY <= 720px
   Desktop untouched.
   ========================================================== */

@media (max-width: 720px) {


    /* ------------------------------------------------------
       PREVENT MOBILE SIDEWAYS OVERFLOW
       ------------------------------------------------------ */

    html,
    body {
        overflow-x: hidden !important;
    }

    .tp-global,
    .tp-member {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }


    /* ------------------------------------------------------
       ONE MOBILE SECTION HEADING SCALE

       Global:
       Projects Ranked / By Representation.

       Member:
       Loyalty / Progress.
       ------------------------------------------------------ */

    .tp-global .tp-section-title,
    .tp-member .tp-section-title {
        font-size:
            clamp(42px, 11.5vw, 50px)
            !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -.01em !important;

        gap:
            10px !important;

        max-width:
            100% !important;
    }

    .tp-global .tp-section-title > span,
    .tp-member .tp-section-title > span {
        display:
            block !important;

        line-height:
            1.02 !important;

        white-space:
            nowrap;
    }


    /* Supporting paragraph */

    .tp-global .tg-section-head .tp-light-copy,
    .tp-member .tm-section-head .tp-light-copy {
        margin-top:
            24px !important;

        font-size:
            15px !important;

        line-height:
            1.65 !important;

        max-width:
            100% !important;
    }


    /* ------------------------------------------------------
       PLATFORM LEADER

       Remove the odd partial box / bracket appearance.
       ------------------------------------------------------ */

    .tp-global .tg-leader-card {
        width:
            100% !important;

        max-width:
            none !important;

        box-sizing:
            border-box !important;

        display:
            block !important;

        margin:
            32px 0 0 !important;

        padding:
            18px 0 20px !important;

        border:
            0 !important;

        border-top:
            1px solid
            rgba(155, 109, 42, .24)
            !important;

        border-bottom:
            1px solid
            rgba(155, 109, 42, .24)
            !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    .tp-global .tg-leader-card-top {
        padding:
            0 0 15px !important;

        border-bottom:
            1px solid
            rgba(155, 109, 42, .14)
            !important;
    }


    .tp-global .tg-leader-card-main {
        padding:
            20px 0 2px !important;

        gap:
            16px !important;
    }


    .tp-global .tg-leader-logo {
        width:
            62px !important;

        height:
            62px !important;

        flex:
            0 0 62px !important;
    }


    .tp-global .tg-leader-card-main strong {
        font-size:
            46px !important;
    }


    /* Proper text arrow, never emoji */

    .tp-global .tg-leader-arrow {
        color:
            #a87128 !important;

        font-family:
            Arial,
            sans-serif !important;

        font-size:
            18px !important;

        font-weight:
            400 !important;

        line-height:
            1 !important;

        font-variant-emoji:
            text !important;
    }


    /* ------------------------------------------------------
       MOBILE GLOBAL TABLE
       ------------------------------------------------------ */

    .tp-global .tg-row {
        width:
            100% !important;

        min-width:
            0 !important;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto !important;

        column-gap:
            12px !important;
    }


    .tp-global .tg-project {
        min-width:
            0 !important;
    }


    .tp-global .tg-project-logo {
        width:
            54px !important;

        height:
            54px !important;

        flex:
            0 0 54px !important;
    }


    .tp-global .tg-project strong {
        font-size:
            14px !important;
    }


    .tp-global .tg-project small {
        font-size:
            9px !important;
    }


    .tp-global .tg-percent strong {
        font-size:
            30px !important;
    }


    /* ------------------------------------------------------
       MEMBER MILESTONES
       Keep them within viewport.
       ------------------------------------------------------ */

    .tp-member .tm-milestone {
        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    .tp-member .tm-milestone-art {
        width:
            100% !important;

        overflow:
            hidden !important;
    }

}



/* ==========================================================
   PROJECT CHOOSER
   ========================================================== */

.tp-projects-page {
    background: #090806;
}


/* HERO */

.tp-projects-page .tc-hero {
    min-height: 525px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #f3ede2;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(193,139,55,.13),
            transparent 32%
        ),
        #090806;
}


.tp-projects-page .tc-hero .tp-shell {
    padding:
        52px 0 72px;
}


.tp-projects-page .tc-kicker {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 64px;

    color: #c99543;

    font-family:
        var(--tp-mono);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .10em;
}


.tp-projects-page .tc-title {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin:
        20px 0 0;

    color: #f3ede2;

    font-family:
        var(--tp-display);

    font-size:
        clamp(62px,5vw,88px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.015em;
}


.tp-projects-page .tc-title span {
    display: block;

    line-height: 1;
}


.tp-projects-page
.tc-title span:last-child {
    color: #e0b45f;
}


.tp-projects-page
.tc-hero-copy .tp-dark-copy {
    margin:
        28px 0 0;

    max-width:
        610px;
}


/* ==========================================================
   PROJECT GRID SECTION
   ========================================================== */

.tp-projects-page .tc-projects {
    position: relative;

    overflow: hidden;

    padding:
        90px 0 115px;

    background:
        linear-gradient(
            135deg,
            #f0eadd,
            #e7ddcd
        );
}


.tp-projects-page .tc-watermark {
    position: absolute;

    top: -15px;
    right: -2vw;

    color:
        rgba(75,55,27,.025);

    font-family:
        var(--tp-display);

    font-size:
        clamp(170px,21vw,330px);

    font-weight: 700;

    line-height: .9;

    pointer-events: none;
}


.tp-projects-page .tc-projects-head {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 34px;
}


.tp-projects-page .tc-project-count {
    color: #8a7a64;

    font-family:
        var(--tp-mono);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .10em;
}


/* ==========================================================
   PROJECT CARDS
   ========================================================== */

.tp-projects-page .tc-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 24px;
}


.tp-projects-page .tc-card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        205px minmax(0,1fr);

    overflow: hidden;

    color: #17140f;

    text-decoration: none;

    border:
        1px solid rgba(150,103,37,.23);

    background:
        rgba(255,255,255,.23);

    box-shadow:
        0 25px 65px rgba(73,48,15,.055);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.tp-projects-page .tc-card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--tc-accent);

    box-shadow:
        0 32px 75px rgba(73,48,15,.10);
}


/* ART */

.tp-projects-page .tc-card-art {
    min-height: 270px;

    position: relative;

    overflow: hidden;

    display: grid;

    place-items: center;

    background:
        #0c0a07;
}


.tp-projects-page .tc-card-art > img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;
}


.tp-projects-page .tc-card-placeholder {
    color:
        #d9a951;

    font-family:
        var(--tp-display);

    font-size:
        100px;
    font-weight: 700;
}


.tp-projects-page .tc-card-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,6,4,.84),
            transparent 62%
        );
}


.tp-projects-page .tc-card-chain {
    position: absolute;

    left: 17px;
    bottom: 16px;

    color:
        #e0b45f;

    font-family:
        var(--tp-mono);

    font-size:
        8px;
    font-weight: 600;

    letter-spacing:
        .10em;
}


/* CONTENT */

.tp-projects-page .tc-card-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        25px 27px 22px;
}


.tp-projects-page .tc-card-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 24px;
}


.tp-projects-page
.tc-card-top .tp-label {
    color:
        #9a6a29;

    font-size:
        8px;
}


.tp-projects-page .tc-card h2 {
    margin:
        9px 0 0;

    font-family:
        var(--tp-body);

    font-size:
        24px;
    font-weight: 700;

    line-height:
        1.15;

    letter-spacing:
        -.02em;
}


.tp-projects-page .tc-card-percent {
    flex:
        0 0 auto;

    text-align:
        right;
}


.tp-projects-page
.tc-card-percent strong {
    display: block;

    color:
        #ad7429;

    font-family:
        var(--tp-display);

    font-size:
        38px;
    font-weight: 700;

    line-height:
        .9;
}


.tp-projects-page
.tc-card-percent span {
    display: block;

    margin-top:
        6px;

    color:
        #8d806e;

    font-family:
        var(--tp-mono);

    font-size:
        7px;
    font-weight: 600;

    letter-spacing:
        .08em;
}


/* STATS */

.tp-projects-page .tc-card-stats {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    margin-top:
        auto;

    padding-top:
        25px;
}


.tp-projects-page
.tc-card-stats > div {
    padding:
        13px 0;

    border-top:
        1px solid rgba(150,103,37,.14);
}


.tp-projects-page
.tc-card-stats > div + div {
    padding-left:
        20px;

    border-left:
        1px solid rgba(150,103,37,.12);
}


.tp-projects-page
.tc-card-stats span {
    display: block;

    color:
        #8d806e;

    font-family:
        var(--tp-mono);

    font-size:
        7px;
    font-weight:
        600;

    letter-spacing:
        .08em;
}


.tp-projects-page
.tc-card-stats strong {
    display: block;

    margin-top:
        5px;

    color:
        #282219;

    font-family:
        var(--tp-display);

    font-size:
        27px;
    font-weight:
        700;
}


/* ACTION */

.tp-projects-page .tc-card-action {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top:
        5px;

    padding-top:
        17px;

    color:
        #9f6924;

    border-top:
        1px solid rgba(150,103,37,.14);

    font-family:
        var(--tp-body);

    font-size:
        11px;
    font-weight:
        700;
}


.tp-projects-page .tc-arrow {
    font-family:
        Arial,
        sans-serif;

    font-size:
        18px;
}


/* ==========================================================
   PROJECT CHOOSER MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .tp-projects-page .tc-hero {
        min-height:
            470px;
    }


    .tp-projects-page
    .tc-hero .tp-shell {
        padding:
            42px 0 58px;
    }


    .tp-projects-page .tc-kicker {
        margin-bottom:
            48px;

        font-size:
            8px;
    }


    /*
       Same mobile display scale as
       Projects Ranked,
       Loyalty Progress,
       project section headings.
    */

    .tp-projects-page .tc-title {
        font-size:
            clamp(42px,11.5vw,50px);

        line-height:
            1.02;

        gap:
            10px;

        letter-spacing:
            -.01em;
    }


    .tp-projects-page
    .tc-title span {
        line-height:
            1.02;
    }


    .tp-projects-page
    .tc-hero-copy .tp-dark-copy {
        margin-top:
            24px;

        font-size:
            15px;

        line-height:
            1.65;
    }


    .tp-projects-page .tc-projects {
        padding:
            68px 0 80px;
    }


    .tp-projects-page
    .tc-projects-head {
        margin-bottom:
            25px;
    }


    .tp-projects-page .tc-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .tp-projects-page .tc-card {
        grid-template-columns:
            115px minmax(0,1fr);
    }


    .tp-projects-page
    .tc-card-art {
        min-height:
            235px;
    }


    .tp-projects-page
    .tc-card-content {
        padding:
            20px 18px 17px;
    }


    .tp-projects-page
    .tc-card-top {
        display:
            block;
    }


    .tp-projects-page
    .tc-card h2 {
        font-size:
            18px;
    }


    .tp-projects-page
    .tc-card-percent {
        margin-top:
            17px;

        text-align:
            left;
    }


    .tp-projects-page
    .tc-card-percent strong {
        font-size:
            32px;
    }


    .tp-projects-page
    .tc-card-stats {
        padding-top:
            15px;
    }


    .tp-projects-page
    .tc-card-stats strong {
        font-size:
            23px;
    }


    .tp-projects-page
    .tc-card-action {
        font-size:
            10px;
    }

}



/* ==========================================================
   GLOBAL LEADERBOARD
   Solana-only: CHAIN column removed
   ========================================================== */

.tp-global .tg-table-head,
.tp-global .tg-row {
    grid-template-columns:
        70px
        minmax(300px,1fr)
        130px
        140px
        180px !important;
}



/* ==========================================================
   MEMBER REWARD IMAGE CONTAINMENT
   Same behaviour as project reward cards.
   ========================================================== */

.tp-member .tm-milestone-art {
    overflow: hidden !important;
}


.tp-member .tm-milestone-art > img:not(.tm-milestone-logo) {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;
}



/* ==========================================================
   FINAL MEMBER REWARD IMAGE FIT
   ========================================================== */

.tp-member .tm-milestone-art > img:not(.tm-milestone-logo) {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;
}



/* ==========================================================
   MOBILE CARD + LEADERBOARD FINAL FIX
   Desktop completely untouched.
   ========================================================== */

@media (max-width: 720px) {


    /* ======================================================
       /projects
       Stack collection card vertically on phones.
       ====================================================== */

    .tp-projects-page .tc-card {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* Square collection artwork across the top */

    .tp-projects-page .tc-card-art {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 16 / 9 !important;

        position: relative !important;

        overflow: hidden !important;
    }


    .tp-projects-page .tc-card-art > img {
        width: 100% !important;
        height: 100% !important;

        position: absolute !important;
        inset: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        background: #0c0a07 !important;
    }


    .tp-projects-page .tc-card-chain {
        left: 17px !important;
        bottom: 15px !important;
    }


    /* Card information beneath image */

    .tp-projects-page .tc-card-content {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 22px 20px 18px !important;
    }


    .tp-projects-page .tc-card-top {
        display: flex !important;

        justify-content: space-between !important;
        align-items: flex-start !important;

        gap: 16px !important;
    }


    .tp-projects-page .tc-card-top > div:first-child {
        min-width: 0 !important;
    }


    .tp-projects-page .tc-card h2 {
        margin-top: 8px !important;

        font-size: 20px !important;

        line-height: 1.15 !important;
    }


    .tp-projects-page .tc-card-percent {
        flex: 0 0 auto !important;

        margin: 0 !important;

        text-align: right !important;
    }


    .tp-projects-page .tc-card-percent strong {
        font-size: 36px !important;

        white-space: nowrap !important;
    }


    .tp-projects-page .tc-card-stats {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;

        padding-top: 20px !important;
    }


    .tp-projects-page .tc-card-stats > div {
        min-width: 0 !important;
    }


    .tp-projects-page .tc-card-action {
        width: 100% !important;

        box-sizing: border-box !important;

        padding-top: 17px !important;
    }



    /* ======================================================
       GLOBAL LEADERBOARD
       Keep Representation fully inside viewport.
       ====================================================== */

    .tp-global .tg-table,
    .tp-global .tg-row {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .tp-global .tg-row {
        display: grid !important;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            82px !important;

        column-gap: 10px !important;

        align-items: center !important;

        padding: 18px 0 !important;

        overflow: hidden !important;
    }


    /* Rank */

    .tp-global .tg-rank {
        width: 38px !important;

        font-size: 28px !important;

        line-height: 1 !important;
    }


    /* Project details */

    .tp-global .tg-project {
        min-width: 0 !important;

        gap: 11px !important;
    }


    .tp-global .tg-project-logo {
        width: 48px !important;
        height: 48px !important;

        flex: 0 0 48px !important;
    }


    .tp-global .tg-project > div:last-child {
        min-width: 0 !important;
    }


    .tp-global .tg-project strong {
        overflow: hidden !important;

        font-size: 13px !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }


    .tp-global .tg-project small {
        overflow: hidden !important;

        font-size: 8px !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }


    /* Representation */

    .tp-global .tg-percent {
        width: 82px !important;
        min-width: 0 !important;

        justify-self: end !important;

        text-align: right !important;

        overflow: visible !important;
    }


    .tp-global .tg-percent strong {
        display: block !important;

        margin: 0 !important;

        font-size: 28px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /*
       Supply / Active PFP desktop cells remain hidden
       on mobile from the existing mobile rule.
    */

}



/* ==========================================================
   MOBILE HEADING -> BODY COPY SPACING
   Same rhythm across global, chooser and member pages.
   ========================================================== */

@media (max-width: 720px) {

    /* Homepage hero */
    .tp-global .tg-hero-copy > p {
        margin-top: 30px !important;
    }


    /* Global leaderboard intro */
    .tp-global
    .tg-section-head
    .tp-light-copy {
        margin-top: 30px !important;
    }


    /* Project chooser */
    .tp-projects-page
    .tc-hero-copy
    .tp-dark-copy {
        margin-top: 30px !important;
    }


    /* Member hero */
    .tp-member
    .tm-copy
    > .tp-dark-copy {
        margin-top: 30px !important;
    }


    /* Member loyalty progress */
    .tp-member
    .tm-section-head
    .tp-light-copy {
        margin-top: 30px !important;
    }

}



/* ==========================================================
   GLOBAL HERO ACTIONS
   ========================================================== */

.tp-global .tp-actions {
    flex-wrap: wrap;
}


.tp-global .tp-actions button.tp-button {
    cursor: pointer;
}


@media (max-width: 720px) {

    .tp-global .tp-actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .tp-global .tp-actions .tp-button {
        width: 100%;

        min-height: 52px;

        box-sizing: border-box;
    }

}



/* ==========================================================
   MEMBER MILESTONE ART — FINAL BEHAVIOUR
   Uploaded reward image is shown in full.
   Fallback logo remains small.
   ========================================================== */

.tp-member .tm-milestone-art {
    position: relative !important;
    overflow: hidden !important;
}


/* Uploaded milestone image */
.tp-member .tm-milestone-art > img:not(.tm-milestone-logo) {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* Fallback project logo */
.tp-member .tm-milestone-art > .tm-milestone-logo {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    position: absolute !important;

    top: 26px !important;
    right: 26px !important;

    left: auto !important;
    bottom: auto !important;

    object-fit: contain !important;
}


/* Mobile behaviour */
@media (max-width: 720px) {

    .tp-member .tm-milestone-art {
        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    .tp-member
    .tm-milestone-art
    > img:not(.tm-milestone-logo) {
        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 100% !important;

        margin: auto !important;

        object-fit: contain !important;
    }

}