/* =================================================
   AIVELLE MEMBER DASHBOARD
   PLATFORM v2.0 — ITERATION 1C
================================================= */


/* =================================================
   01 Page-specific hero details
================================================= */

.member-dashboard-v2 .member-hero-main {

    min-width:
        0;

}


.member-dashboard-v2 .member-display span {

    color:
        var(--member-gold);

}


.member-dashboard-intro {

    max-width:
        720px;

}


.member-dashboard-v2 .member-hero-aside {

    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

}


.member-hero-side-label {

    margin:
        0;

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .19em;

    font-size:
        9px;

}


.member-hero-side-copy {

    margin:
        18px 0 28px;

    color:
        var(--member-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.member-signout {

    align-self:
        flex-start;

    padding:
        0;

    border:
        0;

    color:
        var(--member-paper);

    background:
        transparent;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        10px;

    cursor:
        pointer;

}


.member-signout::after {

    content:
        "→";

    margin-left:
        11px;

    color:
        var(--member-gold);

}


/* =================================================
   02 Dashboard editorial sections
================================================= */

.member-editorial-panel {

    display:
        grid;

    grid-template-columns:
        minmax(150px, .24fr)
        minmax(0, 1fr);

    gap:
        var(--member-gap-large);

    padding-block:
        var(--member-section-space);

    border-bottom:
        1px solid var(--member-line);

}


.member-editorial-heading {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, .65fr);

    gap:
        var(--member-gap-medium);

    align-items:
        end;

}


.member-editorial-heading h2 {

    margin:
        16px 0 0;

    color:
        var(--member-white);

    font-size:
        var(--member-heading-lg);

    font-weight:
        400;

    line-height:
        .96;

    letter-spacing:
        -.055em;

}


.member-editorial-intro {

    max-width:
        480px;

    margin:
        0;

    color:
        var(--member-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


.member-feature-premium {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(280px, .78fr);

    gap:
        var(--member-gap-medium);

    align-items:
        end;

    margin-top:
        clamp(58px, 8vw, 102px);

    padding:
        clamp(34px, 5vw, 68px);

    border:
        1px solid var(--member-line);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .024),
            rgba(255, 255, 255, .006)
        );

}


.member-feature-primary h3 {

    max-width:
        690px;

    margin:
        0;

    color:
        var(--member-white);

    font-size:
        clamp(34px, 4vw, 58px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.045em;

}


.member-feature-overline,
.member-progress-caption {

    margin:
        0 0 18px;

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .17em;

    font-size:
        9px;

}


.member-feature-meta {

    margin:
        0;

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        9px;

}


/* =================================================
   03 Dashboard card grids
================================================= */

.member-dual-grid {

    display:
        grid;

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

    border-bottom:
        1px solid var(--member-line);

}


.member-editorial-card {

    display:
        grid;

    grid-template-rows:
        auto 1fr auto;

    min-height:
        620px;

    padding:
        clamp(36px, 5vw, 70px);

    border-right:
        1px solid var(--member-line);

}


.member-editorial-card:last-child {

    border-right:
        0;

}


.member-editorial-card-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        24px;

    padding-bottom:
        42px;

    border-bottom:
        1px solid var(--member-line);

}


.member-editorial-card-top span {

    color:
        var(--member-gold);

    font-size:
        10px;

}


.member-editorial-card-top p {

    margin:
        0;

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        9px;

}


.member-editorial-card > div:nth-child(2) {

    padding-block:
        clamp(60px, 8vw, 106px);

}


.member-editorial-card h2 {

    max-width:
        560px;

    margin:
        16px 0 0;

    color:
        var(--member-white);

    font-size:
        clamp(38px, 4.3vw, 64px);

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.member-editorial-card-footer {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        28px;

    align-items:
        flex-end;

    justify-content:
        space-between;

    padding-top:
        30px;

    border-top:
        1px solid var(--member-line);

}


.member-stat {

    display:
        grid;

    gap:
        4px;

}


.member-stat strong {

    color:
        var(--member-gold);

    font-size:
        clamp(34px, 4vw, 54px);

    font-weight:
        400;

    line-height:
        1;

}


.member-stat span {

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        9px;

}


.member-history-message,
.member-account-note {

    max-width:
        310px;

    margin:
        0;

    color:
        var(--member-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


.member-membership-status {

    margin:
        28px 0 0;

    color:
        var(--member-gold);

    font-size:
        18px;

    font-weight:
        400;

}


/* =================================================
   04 Editorial note
================================================= */

.member-editorial-note {

    padding-left:
        34px;

    border-left:
        1px solid var(--member-line);

}


.member-editorial-note span {

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        9px;

}


.member-editorial-note p {

    margin:
        16px 0 0;

    color:
        var(--member-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =================================================
   05 Responsive
================================================= */

@media (max-width: 1060px) {

    .member-editorial-heading,
    .member-feature-premium {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 820px) {

    .member-editorial-panel {

        grid-template-columns:
            1fr;

        gap:
            36px;

    }


    .member-dual-grid {

        grid-template-columns:
            1fr;

    }


    .member-editorial-card {

        min-height:
            auto;

        border-right:
            0;

        border-bottom:
            1px solid var(--member-line);

    }


    .member-editorial-card:last-child {

        border-bottom:
            0;

    }


    .member-editorial-note {

        padding-top:
            30px;

        padding-left:
            0;

        border-top:
            1px solid var(--member-line);

        border-left:
            0;

    }

}


@media (max-width: 620px) {

    .member-feature-premium,
    .member-editorial-card {

        padding:
            30px 24px;

    }

}


/* =================================================
   06 Continue-reading access states
================================================= */

.member-feature-premium.is-access-ended {

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

}


.member-feature-premium.is-access-ended
.member-feature-primary {

    max-width:
        760px;

}


.member-feature-premium.is-access-ended
.member-feature-overline {

    color:
        var(--member-muted);

}


.member-feature-premium
[data-continue-progress][hidden] {

    display:
        none !important;

}