/* =================================================
   AIVELLE MEMBERS PLATFORM v2.0
   ITERATION 1A — SHARED MEMBER UI FOUNDATION
================================================= */


/* =================================================
   00 Purpose
================================================= */

/*
 * This stylesheet provides the shared visual foundation for:
 *
 * - Member Dashboard
 * - Member Profile
 * - Member Collections
 * - Member Reading History
 * - Member Membership
 * - Future Member Settings
 *
 * It does not replace css/global.css.
 *
 * Load order:
 *
 * 1. css/global.css
 * 2. css/member-platform.css
 * 3. optional page-specific stylesheet
 */


/* =================================================
   01 Member Design Tokens
================================================= */

:root {

    --member-bg:
        #050505;

    --member-bg-soft:
        #090909;

    --member-panel:
        #0c0c0c;

    --member-panel-soft:
        rgba(255, 255, 255, .018);

    --member-white:
        #ffffff;

    --member-paper:
        #f3efe7;

    --member-muted:
        #a7a39b;

    --member-muted-soft:
        #77736c;

    --member-gold:
        #c8a25a;

    --member-gold-soft:
        rgba(200, 162, 90, .11);

    --member-line:
        rgba(255, 255, 255, .14);

    --member-line-strong:
        rgba(255, 255, 255, .24);

    --member-danger:
        #d28a8a;

    --member-success:
        #c8a25a;


    --member-shell-max:
        1520px;

    --member-shell-pad:
        clamp(22px, 4vw, 68px);

    --member-section-space:
        clamp(88px, 10vw, 156px);

    --member-section-space-small:
        clamp(58px, 7vw, 104px);

    --member-gap-large:
        clamp(48px, 8vw, 126px);

    --member-gap-medium:
        clamp(30px, 5vw, 72px);

    --member-gap-small:
        clamp(16px, 2vw, 30px);


    --member-heading-xl:
        clamp(54px, 7vw, 110px);

    --member-heading-lg:
        clamp(40px, 5vw, 74px);

    --member-heading-md:
        clamp(30px, 3.5vw, 50px);

    --member-heading-sm:
        clamp(24px, 2.4vw, 36px);


    --member-ease:
        cubic-bezier(.2, .7, .2, 1);

    --member-transition-fast:
        .3s ease;

    --member-transition:
        .55s var(--member-ease);

    --member-transition-slow:
        1.1s var(--member-ease);

}


/* =================================================
   02 Member Page Foundation
================================================= */

.member-page {

    min-height:
        100svh;

    padding-top:
        var(--header-height);

    color:
        var(--member-paper);

    background:

        radial-gradient(
            circle at 13% 8%,
            rgba(200, 162, 90, .085),
            transparent 24%
        ),

        linear-gradient(
            140deg,
            #111111 0%,
            #080808 48%,
            #050505 100%
        );

}


.member-shell {

    width:
        min(
            calc(100% - (var(--member-shell-pad) * 2)),
            var(--member-shell-max)
        );

    margin-inline:
        auto;

    padding-block:
        clamp(82px, 9vw, 140px)
        clamp(100px, 11vw, 170px);

}


.member-section {

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

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

}


.member-section--compact {

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

}


.member-section:last-child {

    border-bottom:
        0;

}


/* =================================================
   03 Shared Typography
================================================= */

.member-kicker,
.member-eyebrow,
.member-label {

    margin:
        0;

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        9px;

    line-height:
        1.4;

}


.member-display {

    margin:
        18px 0 0;

    color:
        var(--member-white);

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

    font-weight:
        400;

    line-height:
        .91;

    letter-spacing:
        -.064em;

}


.member-title {

    margin:
        14px 0 0;

    color:
        var(--member-white);

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

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.052em;

}


.member-subtitle {

    margin:
        14px 0 0;

    color:
        var(--member-white);

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

    font-weight:
        400;

    line-height:
        1.02;

    letter-spacing:
        -.042em;

}


.member-card-title {

    margin:
        0;

    color:
        var(--member-white);

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

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.035em;

}


.member-intro {

    max-width:
        720px;

    margin:
        30px 0 0;

    color:
        var(--member-muted);

    font-size:
        clamp(15px, 1.25vw, 18px);

    line-height:
        1.82;

}


.member-copy {

    margin:
        18px 0 0;

    color:
        var(--member-muted);

    font-size:
        13px;

    line-height:
        1.78;

}


.member-note {

    margin:
        0;

    color:
        var(--member-muted-soft);

    font-size:
        11px;

    line-height:
        1.65;

}


/* =================================================
   04 Shared Hero
================================================= */

.member-hero {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(240px, .5fr);

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

    align-items:
        end;

    padding-bottom:
        clamp(56px, 7vw, 90px);

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

}


.member-hero-main {

    min-width:
        0;

}


.member-hero-aside {

    padding-left:
        clamp(28px, 4vw, 58px);

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

}


.member-hero-aside-value {

    margin:
        16px 0 0;

    color:
        var(--member-white);

    font-size:
        clamp(40px, 5vw, 78px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.05em;

}


/* =================================================
   05 Shared Member Navigation
================================================= */

.member-private-nav {

    display:
        grid;

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

    margin-top:
        clamp(34px, 5vw, 62px);

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

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

}


.member-private-nav-link {

    display:
        grid;

    gap:
        22px;

    min-height:
        128px;

    padding:
        24px;

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

    color:
        var(--member-paper);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        10px;

    transition:
        color var(--member-transition),
        background var(--member-transition);

}


.member-private-nav-link:last-child {

    border-right:
        0;

}


.member-private-nav-link span {

    color:
        var(--member-gold);

    font-size:
        9px;

}


.member-private-nav-link:hover,
.member-private-nav-link:focus-visible,
.member-private-nav-link.is-active,
.member-private-nav-link[aria-current="page"] {

    color:
        var(--member-gold);

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

}


/* =================================================
   06 Shared Editorial Index
================================================= */

.member-editorial-layout {

    display:
        grid;

    grid-template-columns:
        minmax(130px, .22fr)
        minmax(0, 1fr);

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

}


.member-editorial-index {

    display:
        flex;

    gap:
        18px;

    align-items:
        flex-start;

}


.member-editorial-index-number {

    color:
        var(--member-gold);

    font-size:
        10px;

    letter-spacing:
        .14em;

}


.member-editorial-index-label {

    margin:
        0;

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        9px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

}


/* =================================================
   07 Shared Grids
================================================= */

.member-grid {

    display:
        grid;

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

}


.member-grid--2 {

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

}


.member-grid--3 {

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

}


.member-grid--4 {

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

}


.member-split {

    display:
        grid;

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

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

    align-items:
        start;

}


/* =================================================
   08 Shared Cards and Panels
================================================= */

.member-panel {

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

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

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

}


.member-card {

    display:
        grid;

    align-content:
        start;

    min-width:
        0;

    padding:
        clamp(30px, 4vw, 56px);

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

    background:
        var(--member-panel-soft);

}


.member-card--flush {

    border:
        0;

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

    background:
        transparent;

}


.member-card-header {

    display:
        flex;

    gap:
        24px;

    align-items:
        flex-start;

    justify-content:
        space-between;

    padding-bottom:
        28px;

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

}


.member-card-body {

    padding-block:
        clamp(40px, 6vw, 84px);

}


.member-card-footer {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        24px;

    align-items:
        flex-end;

    justify-content:
        space-between;

    padding-top:
        28px;

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

}


/* =================================================
   09 Shared Actions
================================================= */

.member-action,
.member-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        var(--member-paper);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        color var(--member-transition-fast),
        background var(--member-transition-fast),
        border-color var(--member-transition-fast),
        transform var(--member-transition-fast);

}


.member-action {

    padding:
        0;

    border:
        0;

    background:
        transparent;

}


.member-action::after {

    content:
        "→";

    color:
        var(--member-gold);

    font-size:
        15px;

}


.member-action:hover,
.member-action:focus-visible {

    color:
        var(--member-gold);

}


.member-button {

    min-height:
        46px;

    padding:
        12px 26px;

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

    background:
        var(--member-bg);

}


.member-button:hover,
.member-button:focus-visible {

    color:
        var(--member-bg);

    background:
        var(--member-gold);

    transform:
        translateY(-2px);

}


.member-button--subtle {

    border-color:
        var(--member-line-strong);

}


.member-button--subtle:hover,
.member-button--subtle:focus-visible {

    border-color:
        var(--member-gold);

}


.member-button:disabled,
.member-action:disabled {

    opacity:
        .55;

    cursor:
        wait;

    transform:
        none;

}


/* =================================================
   10 Shared Forms
================================================= */

.member-form {

    display:
        grid;

    gap:
        34px;

}


.member-form-grid {

    display:
        grid;

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

    gap:
        30px;

}


.member-field {

    display:
        grid;

    gap:
        10px;

}


.member-field--wide {

    grid-column:
        1 / -1;

}


.member-field label,
.member-field-label {

    color:
        var(--member-paper);

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        10px;

}


.member-field input,
.member-field select,
.member-field textarea {

    width:
        100%;

    padding:
        14px 0 16px;

    border:
        0;

    border-bottom:
        1px solid #555555;

    border-radius:
        0;

    outline:
        none;

    color:
        var(--member-gold);

    caret-color:
        var(--member-gold);

    background:
        transparent;

    font:
        inherit;

    transition:
        border-color var(--member-transition-fast);

}


.member-field textarea {

    min-height:
        130px;

    resize:
        vertical;

}


.member-field input:focus,
.member-field select:focus,
.member-field textarea:focus {

    border-bottom-color:
        var(--member-gold);

}


.member-field input[aria-invalid="true"],
.member-field select[aria-invalid="true"],
.member-field textarea[aria-invalid="true"] {

    border-bottom-color:
        var(--member-danger);

}


.member-field-note,
.member-field-error {

    min-height:
        17px;

    margin:
        0;

    color:
        var(--member-muted);

    font-size:
        11px;

    line-height:
        1.55;

}


.member-field-error {

    color:
        var(--member-danger);

}


/* =================================================
   11 Shared Checkbox / Preference
================================================= */

.member-preference {

    display:
        grid;

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

    gap:
        18px;

    align-items:
        start;

    cursor:
        pointer;

}


.member-preference input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    opacity:
        0;

}


.member-preference-control {

    position:
        relative;

    width:
        18px;

    height:
        18px;

    margin-top:
        3px;

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

}


.member-preference-control::after {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    background:
        var(--member-gold);

    opacity:
        0;

    transform:
        scale(.5);

    transition:
        opacity var(--member-transition-fast),
        transform var(--member-transition-fast);

}


.member-preference input:checked
+
.member-preference-control::after {

    opacity:
        1;

    transform:
        scale(1);

}


.member-preference input:focus-visible
+
.member-preference-control {

    outline:
        1px solid var(--member-white);

    outline-offset:
        4px;

}


/* =================================================
   12 Shared Status Messages
================================================= */

.member-status {

    min-height:
        20px;

    margin:
        18px 0 0;

    color:
        var(--member-muted);

    font-size:
        12px;

    line-height:
        1.5;

}


.member-status.is-success {

    color:
        var(--member-success);

}


.member-status.is-error {

    color:
        var(--member-danger);

}


.member-status.is-loading {

    color:
        var(--member-muted);

}


/* =================================================
   13 Shared Summary Lists
================================================= */

.member-summary-list {

    display:
        grid;

    margin:
        30px 0 0;

}


.member-summary-row {

    display:
        grid;

    grid-template-columns:
        minmax(110px, .7fr)
        minmax(0, 1.3fr);

    gap:
        24px;

    padding-block:
        17px;

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

}


.member-summary-row dt {

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

    font-size:
        9px;

}


.member-summary-row dd {

    min-width:
        0;

    margin:
        0;

    overflow-wrap:
        anywhere;

    color:
        var(--member-paper);

    text-align:
        right;

    font-size:
        12px;

    line-height:
        1.55;

}


/* =================================================
   14 Shared Empty State
================================================= */

.member-empty {

    max-width:
        880px;

    padding:
        clamp(56px, 8vw, 108px);

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

}


.member-empty-number {

    margin:
        0 0 28px;

    color:
        var(--member-gold);

    font-size:
        10px;

}


.member-empty .member-title {

    max-width:
        680px;

}


.member-empty .member-copy {

    max-width:
        580px;

}


/* =================================================
   15 Shared Media Card
================================================= */

.member-media-card {

    display:
        grid;

    align-content:
        start;

}


.member-media {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        4 / 5;

    background:
        #111111;

}


.member-media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%);

    transform:
        scale(1.015);

    transition:
        transform var(--member-transition-slow),
        filter .8s ease;

}


.member-media-card:hover
.member-media img {

    filter:
        grayscale(86%);

    transform:
        scale(1.045);

}


.member-media-body {

    padding-top:
        24px;

}


/* =================================================
   16 Shared Sticky Aside
================================================= */

.member-sticky-aside {

    position:
        sticky;

    top:
        calc(var(--header-height) + 36px);

    padding-left:
        clamp(38px, 5vw, 74px);

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

}


/* =================================================
   17 Shared Progress
================================================= */

.member-progress-row {

    display:
        flex;

    gap:
        20px;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        9px;

}


.member-progress-track {

    height:
        1px;

    margin-top:
        18px;

    background:
        #353535;

}


.member-progress-value {

    width:
        0;

    height:
        100%;

    background:
        var(--member-gold);

    transition:
        width .8s var(--member-ease);

}


/* =================================================
   18 Accessibility Helpers
================================================= */

.member-visually-hidden {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

}


.member-focus-ring:focus-visible,
.member-action:focus-visible,
.member-button:focus-visible,
.member-private-nav-link:focus-visible {

    outline:
        1px solid var(--member-gold);

    outline-offset:
        4px;

}


/* =================================================
   19 Responsive — Large Tablet
================================================= */

@media (max-width: 1060px) {

    .member-private-nav {

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

    }


    .member-private-nav-link:nth-child(3n) {

        border-right:
            0;

    }


    .member-private-nav-link:nth-child(-n + 3) {

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

    }


    .member-grid--4 {

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

    }


    .member-split {

        grid-template-columns:
            1fr;

    }


    .member-sticky-aside {

        position:
            static;

        padding-top:
            54px;

        padding-left:
            0;

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

        border-left:
            0;

    }

}


/* =================================================
   20 Responsive — Tablet
================================================= */

@media (max-width: 820px) {

    .member-hero {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }


    .member-hero-aside {

        padding-top:
            30px;

        padding-left:
            0;

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

        border-left:
            0;

    }


    .member-editorial-layout {

        grid-template-columns:
            1fr;

        gap:
            34px;

    }


    .member-editorial-index-label {

        writing-mode:
            horizontal-tb;

        transform:
            none;

    }


    .member-grid--3,
    .member-grid--2 {

        grid-template-columns:
            1fr;

    }

}


/* =================================================
   21 Responsive — Mobile
================================================= */

@media (max-width: 620px) {

    .member-shell {

        width:
            min(
                calc(100% - 36px),
                var(--member-shell-max)
            );

        padding-block:
            68px 96px;

    }


    .member-display {

        font-size:
            clamp(50px, 16vw, 78px);

    }


    .member-private-nav {

        grid-template-columns:
            1fr;

    }


    .member-private-nav-link {

        min-height:
            92px;

        border-right:
            0;

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

    }


    .member-private-nav-link:last-child {

        border-bottom:
            0;

    }


    .member-form-grid {

        grid-template-columns:
            1fr;

    }


    .member-field--wide {

        grid-column:
            auto;

    }


    .member-summary-row {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .member-summary-row dd {

        text-align:
            left;

    }


    .member-button {

        width:
            100%;

    }


    .member-card-footer {

        align-items:
            flex-start;

    }

}


/* =================================================
   22 Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .member-private-nav-link,
    .member-action,
    .member-button,
    .member-field input,
    .member-field select,
    .member-field textarea,
    .member-preference-control::after,
    .member-media img,
    .member-progress-value {

        transition:
            none;

    }

}