/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Story Typography

Path:
public/brand/bundle/story.css

Responsibility:
Typography + Text Surface

================================================
*/


.sv-bundle-story {

    background:
        transparent;
}


.sv-bundle-story__title {

    margin: 0;

    font-family:
        var(--sv-font-bundle);

    font-weight:
        500;

    font-style:
        normal;

    line-height:
        var(--sv-bundle-line-height);

    letter-spacing:
        0.04em;

    text-rendering:
        geometricPrecision;

    -webkit-font-smoothing:
        antialiased;

    text-wrap:
        balance;
}


@media (min-width: 768px) {

    .sv-bundle-story__title {

        font-size:
            clamp(30px, 3.2vw, 48px);
    }

}


@media (max-width: 767px) {

    .sv-bundle-story__title {

        font-size:
            clamp(28px, 8vw, 38px);
    }

}


.sv-bundle-story__text {

    font-size:
        15px;

    line-height:
        1.65;

    font-weight:
        400;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}


@media (max-width: 767px) {

    .sv-bundle-story__text {

        font-size:
            14px;

        line-height:
            1.65;
    }

}


.sv-bundle-story__image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        cover;
}


.sv-bundle-story__symbol:focus-visible,
.sv-bundle-story__title:focus-visible {

    outline:
        2px solid var(--sv-story-signal);

    outline-offset:
        6px;
}


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

    .sv-bundle-story__title,
    .sv-bundle-story__text {

        transition:
            none;
    }

}

/* =========================================================
   Story Editorial Surface
   ========================================================= */

.sv-bundle-story {

    position: relative;
}


/* =========================================================
   01. Editorial Separation
   ========================================================= */

.sv-bundle-story-item {

    position: relative;
}


/*
   Do not create a full divider.
   Only create a short structural signal.
*/

.sv-bundle-story-item:not(:last-child)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 42px;

    height: 1px;

    background:
        var(--sv-story-border);

    opacity: 0.72;
}


/* =========================================================
   02. Divider Differentiation
   ========================================================= */

.sv-bundle-story-item--curation:not(:last-child)::after {

    width: 34px;
}


.sv-bundle-story-item--balance:not(:last-child)::after {

    width: 54px;
}


.sv-bundle-story-item--rhythm:not(:last-child)::after {

    width: 26px;
}


.sv-bundle-story-item--living:not(:last-child)::after {

    width: 46px;
}


/* =========================================================
   03. Title Surface
   ========================================================= */

.sv-bundle-story__title {

    position: relative;

    display: inline-block;

    color:
        var(--sv-story-text-primary);

    text-rendering:
        geometricPrecision;
}


/* =========================================================
   04. Title Structural Accent
   ========================================================= */

.sv-bundle-story__title::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 26px;

    height: 1px;

    background:
        currentColor;

    opacity: 0.28;

    transform-origin:
        left center;
}


/* ---------------------------------------------------------
   Curation
--------------------------------------------------------- */

.sv-bundle-story-item--curation .sv-bundle-story__title::after {

    width: 32px;
}


/* ---------------------------------------------------------
   Balance
--------------------------------------------------------- */

.sv-bundle-story-item--balance .sv-bundle-story__title::after {

    width: 20px;

    opacity: 0.22;
}


/* ---------------------------------------------------------
   Rhythm
--------------------------------------------------------- */

.sv-bundle-story-item--rhythm .sv-bundle-story__title::after {

    width: 44px;
}


/* ---------------------------------------------------------
   Living
--------------------------------------------------------- */

.sv-bundle-story-item--living .sv-bundle-story__title::after {

    width: 28px;
}


/* =========================================================
   05. Description
   ========================================================= */

.sv-bundle-story__text {

    color:
        var(--sv-story-text-secondary);

    max-width:
        620px;
}


/* =========================================================
   06. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-story-item:not(:last-child)::after {

        width:
            28px;
    }


    .sv-bundle-story__title::after {

        bottom:
            -8px;
    }

}

/* =========================================================
   07. STORY ENTRY SIGNAL
   ========================================================= */

.sv-bundle-story {

    position: relative;
}


/*
 * A short structural line.
 *
 * It is intentionally not a divider.
 * It marks the beginning of Story.
 */

.sv-bundle-story::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 56px;
    height: 1px;

    background:
        var(--sv-story-border);

    opacity: 0.78;
}


@media (max-width: 767px) {

    .sv-bundle-story::before {

        width: 36px;
    }

}


/* =========================================================
   Story Opening
   ========================================================= */

.sv-bundle-story__opening {

    position: relative;

    width: 100%;

    max-width: 920px;

    padding:
        0 0 72px;
}


/* =========================================================
   Eyebrow
   ========================================================= */

.sv-bundle-story__opening-eyebrow {

    margin: 0 0 18px;

    font-family:
        var(--sv-font-brand, inherit);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.2;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        var(--sv-story-text-secondary);

    opacity:
        0.82;
}


/* =========================================================
   Opening Title
   ========================================================= */

.sv-bundle-story__opening-title {

    margin: 0;

    max-width: 900px;

    font-size:
        clamp(42px, 5vw, 72px);

    font-weight:
        500;

    line-height:
        0.94;

    letter-spacing:
        0.025em;

    color:
        var(--sv-story-text-primary);

    text-wrap:
        balance;

    text-rendering:
        geometricPrecision;
}


/* =========================================================
   Opening Text
   ========================================================= */

.sv-bundle-story__opening-text {

    margin:
        28px 0 0;

    max-width:
        680px;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.7;

    letter-spacing:
        0.005em;

    color:
        var(--sv-story-text-secondary);
}


/* =========================================================
   Opening Structural Signal
   ========================================================= */

.sv-bundle-story__opening::after {

    content: "";

    display: block;

    width: 56px;

    height: 1px;

    margin-top: 40px;

    background:
        var(--sv-story-border);

    opacity:
        0.72;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-story__opening {

        max-width:
            none;

        padding-bottom:
            52px;
    }


    .sv-bundle-story__opening-eyebrow {

        margin-bottom:
            16px;

        font-size:
            10px;

        letter-spacing:
            0.15em;
    }


    .sv-bundle-story__opening-title {

        max-width:
            100%;

        font-size:
            clamp(36px, 10vw, 48px);

        line-height:
            0.96;

        letter-spacing:
            0.025em;
    }


    .sv-bundle-story__opening-text {

        margin-top:
            22px;

        max-width:
            100%;

        font-size:
            14px;

        line-height:
            1.65;
    }


    .sv-bundle-story__opening::after {

        width:
            38px;

        margin-top:
            32px;
    }

}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 480px) {

    .sv-bundle-story__opening {

        padding-bottom:
            44px;
    }


    .sv-bundle-story__opening-title {

        font-size:
            clamp(34px, 10.5vw, 42px);
    }

}

/* =========================================================
   08. STORY EXIT SIGNAL
   ========================================================= */

.sv-bundle-story-item--living {

    position: relative;
}


/*
 * Living is the final Story state.
 *
 * Its lower signal points toward
 * the next discovery layer.
 */

.sv-bundle-story-item--living::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 72px;

    height: 1px;

    background:
        currentColor;

    opacity: 0.16;
}


@media (max-width: 767px) {

    .sv-bundle-story-item--living::after {

        width: 44px;

        bottom: 14px;
    }

}