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

Space Vanta Theme 1.0

Module:
Bundle Story Typography + Surface

Path:
public/bundle-template/bundle-story/story.css

Version:
2.0-B.2

Responsibility:
- Story Typography
- Editorial Type Expression
- Text Surface
- Structural Signals

Does NOT control:
- Story Layout
- Lens Surface
- Icon Geometry
- Icon Color
- Motion

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


/* =========================================================
   01. STORY FOUNDATION
   ========================================================= */

.sv-bundle-story {

    background:
        transparent;
}


/* =========================================================
   02. OPENING EYEBROW
   ========================================================= */

/*
 * Technical layer.
 *
 * Small, controlled and intentionally neutral.
 */

.sv-bundle-story__opening-eyebrow {

    margin:
        0 0 18px;

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

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.2;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;

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

    opacity:
        0.78;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   03. OPENING TITLE
   ========================================================= */

/*
 * Primary Editorial Layer.
 *
 * The title should feel constructed rather than
 * simply enlarged.
 */

.sv-bundle-story__opening-title {

    position:
        relative;

    display:
        inline-block;

    margin:
        0;

    max-width:
        900px;

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

    font-size:
        clamp(44px, 5.2vw, 74px);

    font-weight:
        500;

    font-style:
        normal;

    line-height:
        0.91;

    letter-spacing:
        0.018em;

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

    text-wrap:
        balance;

    text-rendering:
        geometricPrecision;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   04. OPENING TITLE OPTICAL STRUCTURE
   ========================================================= */

/*
 * A very subtle offset gives the title a constructed
 * editorial quality without becoming decorative.
 */

.sv-bundle-story__opening-title::after {

    content:
        "";

    position:
        absolute;

    left:
        3px;

    bottom:
        -13px;

    width:
        72px;

    height:
        1px;

    background:
        currentColor;

    opacity:
        0.22;

    transform-origin:
        left center;
}


/* =========================================================
   05. OPENING DESCRIPTION
   ========================================================= */

.sv-bundle-story__opening-text {

    margin:
        34px 0 0;

    max-width:
        660px;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.72;

    letter-spacing:
        0.006em;

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

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   06. 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;
}


/* =========================================================
   07. PART TITLE
   ========================================================= */

/*
 * Narrative Layer.
 *
 * More expressive than body copy,
 * but deliberately quieter than the Opening Title.
 */

.sv-bundle-story__title {

    position:
        relative;

    display:
        inline-block;

    margin:
        0;

    max-width:
        100%;

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

    font-size:
        clamp(28px, 3vw, 42px);

    font-weight:
        500;

    font-style:
        normal;

    line-height:
        0.98;

    letter-spacing:
        0.045em;

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

    text-rendering:
        geometricPrecision;

    text-wrap:
        balance;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   08. PART TITLE OPTICAL ACCENT
   ========================================================= */

.sv-bundle-story__title::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -9px;

    width:
        26px;

    height:
        1px;

    background:
        currentColor;

    opacity:
        0.30;

    transform-origin:
        left center;
}


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

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

    letter-spacing:
        0.052em;
}


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

    width:
        32px;
}


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

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

    letter-spacing:
        0.038em;
}


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

    width:
        20px;

    opacity:
        0.23;
}


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

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

    letter-spacing:
        0.068em;
}


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

    width:
        44px;
}


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

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

    letter-spacing:
        0.078em;
}


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

    width:
        28px;
}


/* =========================================================
   09. PART DESCRIPTION
   ========================================================= */

.sv-bundle-story__text {

    max-width:
        520px;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.68;

    letter-spacing:
        0.004em;

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

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   10. STORY IMAGE
   ========================================================= */

.sv-bundle-story__image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        cover;
}


/* =========================================================
   11. STORY ENTRY SIGNAL
   ========================================================= */

.sv-bundle-story::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        56px;

    height:
        1px;

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

    opacity:
        0.78;
}


/* =========================================================
   12. STORY ITEM 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;
}


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

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

    width:
        34px;
}


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

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

    width:
        54px;
}


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

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

    width:
        26px;
}


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

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

    width:
        46px;
}


/* =========================================================
   13. STORY EXIT SIGNAL
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        18px;

    width:
        72px;

    height:
        1px;

    background:
        currentColor;

    opacity:
        0.16;
}


/* =========================================================
   14. ACCESSIBILITY
   ========================================================= */

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

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

    outline-offset:
        6px;
}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       Eyebrow
    ----------------------------------------------------- */

    .sv-bundle-story__opening-eyebrow {

        margin-bottom:
            16px;

        font-size:
            9px;

        letter-spacing:
            0.17em;
    }


    /* -----------------------------------------------------
       Opening Title
    ----------------------------------------------------- */

    .sv-bundle-story__opening-title {

        max-width:
            100%;

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

        line-height:
            0.94;

        letter-spacing:
            0.018em;
    }


    .sv-bundle-story__opening-title::after {

        left:
            2px;

        bottom:
            -10px;

        width:
            46px;
    }


    /* -----------------------------------------------------
       Opening Text
    ----------------------------------------------------- */

    .sv-bundle-story__opening-text {

        margin-top:
            28px;

        max-width:
            100%;

        font-size:
            14px;

        line-height:
            1.65;
    }


    /* -----------------------------------------------------
       Part Title
    ----------------------------------------------------- */

    .sv-bundle-story__title {

        font-size:
            clamp(27px, 8vw, 36px);

        line-height:
            0.99;

        letter-spacing:
            0.04em;
    }


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

        letter-spacing:
            0.045em;
    }


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

        letter-spacing:
            0.035em;
    }


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

        letter-spacing:
            0.055em;
    }


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

        letter-spacing:
            0.062em;
    }


    /* -----------------------------------------------------
       Description
    ----------------------------------------------------- */

    .sv-bundle-story__text {

        max-width:
            100%;

        font-size:
            14px;

        line-height:
            1.65;
    }


    /* -----------------------------------------------------
       Opening Signal
    ----------------------------------------------------- */

    .sv-bundle-story__opening::after {

        width:
            38px;

        margin-top:
            34px;
    }


    /* -----------------------------------------------------
       Entry Signal
    ----------------------------------------------------- */

    .sv-bundle-story::before {

        width:
            36px;
    }


    /* -----------------------------------------------------
       Item Signal
    ----------------------------------------------------- */

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

        width:
            28px;
    }


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

        width:
            44px;

        bottom:
            14px;
    }

}


/* =========================================================
   16. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sv-bundle-story__opening-title {

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

}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

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

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

        transition:
            none;
    }

}