/* Storybook foundation: scoped to the redesigned Opening and Welcome scenes. */
.storybook {
    --deep-emerald: #12352f;
    --muted-emerald: #2c5148;
    --paper-ivory: #f7f5ef;
    --soft-paper: #eeece5;
    --editorial-sage: #a7b0a3;
    --muted-gold: #b59a62;
    --primary-ink: #24332d;
    --secondary-ink: #657069;
    --story-safe-left: max(22px, env(safe-area-inset-left));
    --story-safe-right: max(22px, env(safe-area-inset-right));
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--paper-ivory);
    color: var(--primary-ink);
}

.storybook.invitation-locked {
    overflow: hidden;
}

.storybook .story-opening,
.storybook .story-welcome {
    box-sizing: border-box;
}

/* Without the enhancement script, the cover remains the first normal-flow scene
   and the rest of the invitation stays accessible by scrolling. */
.storybook .story-opening {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: stretch;
    padding: max(24px, env(safe-area-inset-top)) var(--story-safe-right)
        max(26px, env(safe-area-inset-bottom)) var(--story-safe-left);
    overflow: hidden;
    isolation: isolate;
    color: var(--paper-ivory);
    background: var(--deep-emerald);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .72s ease, transform .82s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .82s;
}

.storybook.invitation-enhanced .story-opening {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.storybook .story-opening::before,
.storybook .story-opening::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.storybook .story-opening::before {
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 77% 22%, rgba(181, 154, 98, .13), transparent 22%),
        radial-gradient(circle at 14% 78%, rgba(167, 176, 163, .12), transparent 27%),
        radial-gradient(ellipse at 52% 43%, rgba(44, 81, 72, .86), rgba(18, 53, 47, .25) 49%, rgba(9, 41, 35, .72) 100%),
        linear-gradient(135deg, #173f37, var(--deep-emerald) 52%, #0d302a);
}

.storybook .story-opening::after {
    z-index: -2;
    right: clamp(-180px, -8vw, -70px);
    bottom: clamp(-150px, -8vw, -70px);
    width: clamp(360px, 52vw, 780px);
    aspect-ratio: 1;
    border: 1px solid rgba(181, 154, 98, .16);
    border-radius: 50%;
    box-shadow:
        0 0 0 clamp(32px, 5vw, 74px) rgba(181, 154, 98, .025),
        0 0 0 clamp(70px, 10vw, 142px) rgba(181, 154, 98, .018);
}

.storybook .story-opening .cover-frame {
    inset: 0;
    border: 0;
    opacity: 1;
}

.storybook .story-opening .cover-frame::before,
.storybook .story-opening .cover-frame::after {
    width: clamp(52px, 8vw, 118px);
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(181, 154, 98, .72));
    opacity: .72;
}

.storybook .story-opening .cover-frame::before {
    top: clamp(30px, 5vh, 58px);
    left: clamp(21px, 5vw, 72px);
}

.storybook .story-opening .cover-frame::after {
    right: clamp(21px, 5vw, 72px);
    bottom: clamp(30px, 5vh, 58px);
    transform: rotate(180deg);
}

.storybook .story-opening__branch {
    position: absolute;
    z-index: -1;
    width: clamp(235px, 41vw, 590px);
    height: auto;
    overflow: visible;
    fill: rgba(181, 154, 98, .10);
    stroke: rgba(181, 154, 98, .58);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.storybook .story-opening__branch-stem {
    fill: none;
    stroke: rgba(181, 154, 98, .72);
}

.storybook .story-opening__branch--upper {
    top: -92px;
    right: -102px;
    transform: rotate(-6deg);
}

.storybook .story-opening__branch--lower {
    left: -112px;
    bottom: -94px;
    transform: rotate(5deg);
}

.storybook .story-opening .overlay {
    position: relative;
    z-index: 2;
    width: min(100%, 1240px);
    min-height: calc(100svh - max(50px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: 0 auto;
    padding: clamp(66px, 10vh, 112px) 0 clamp(58px, 8vh, 92px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(38px, 7vh, 72px);
    box-sizing: border-box;
    text-align: center;
}

.storybook .story-opening .cover-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.storybook .story-opening .cover-eyebrow {
    order: 2;
    margin-top: 20px;
    color: rgba(247, 245, 239, .66);
    font-family: "Poppins", sans-serif;
    font-size: clamp(9px, 2.5vw, 11px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .38em;
    text-transform: uppercase;
    text-shadow: none;
}

.storybook .story-monogram {
    order: 1;
    min-width: 62px;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(181, 154, 98, .42);
    border-radius: 50%;
    color: var(--muted-gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.05em;
    box-shadow: inset 0 0 0 6px rgba(181, 154, 98, .025);
}

.storybook .story-monogram i {
    font-family: "Great Vibes", cursive;
    font-size: 18px;
    font-weight: 400;
}

.storybook .story-opening .cover-names {
    order: 3;
    width: min(100%, 620px);
    display: grid;
    justify-items: center;
    gap: 0;
    margin: 13px 0 0;
    color: var(--paper-ivory);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(54px, 17vw, 82px);
    font-weight: 500;
    line-height: .78;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: normal;
    text-shadow: 0 10px 36px rgba(5, 28, 24, .24);
}

.storybook .story-opening .cover-names > span:not(.cover-ampersand) {
    display: block;
}

.storybook .story-opening .cover-ampersand {
    margin: .15em 0 .05em;
    color: var(--muted-gold);
    font-family: "Great Vibes", cursive;
    font-size: .62em;
    font-weight: 400;
    line-height: .72;
    letter-spacing: 0;
    text-transform: none;
}

.storybook .story-opening .cover-date {
    order: 4;
    margin-top: 29px;
    color: var(--muted-gold);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .29em;
    text-transform: uppercase;
    text-shadow: none;
}

.storybook .story-opening .cover-invitation {
    width: min(100%, 390px);
    max-width: none;
    padding: 23px 0 0;
    border: 0;
    border-top: 1px solid rgba(181, 154, 98, .34);
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.storybook .story-opening .cover-recipient-label {
    color: rgba(247, 245, 239, .64);
    font-size: 10px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: .06em;
}

.storybook .story-opening .guest-name {
    margin-top: 7px;
    color: var(--paper-ivory);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(27px, 8vw, 38px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    text-shadow: none;
}

.storybook .story-opening .open-button {
    min-width: 182px;
    min-height: 46px;
    margin-top: 19px;
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--muted-gold);
    border-radius: 999px;
    background: var(--muted-gold);
    color: var(--deep-emerald);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(4, 29, 24, .18);
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.storybook:not(.invitation-enhanced) .story-opening .open-button {
    display: none;
}

.storybook .story-opening .open-button svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.storybook .story-opening .open-button:hover {
    background: var(--paper-ivory);
    color: var(--deep-emerald);
    transform: translateY(-1px);
}

.storybook .story-opening .open-button:focus-visible {
    outline: 2px solid var(--paper-ivory);
    outline-offset: 5px;
}

.storybook .story-opening.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2.5%);
}

/* Opening entrance sequence: monogram, names, date, recipient, button. */
.storybook .story-opening.is-ready .cover-frame,
.storybook .story-opening.is-ready .cover-heading,
.storybook .story-opening.is-ready .cover-invitation {
    animation: none;
}

.storybook.invitation-enhanced .story-opening .story-monogram,
.storybook.invitation-enhanced .story-opening .cover-eyebrow,
.storybook.invitation-enhanced .story-opening .cover-names,
.storybook.invitation-enhanced .story-opening .cover-date,
.storybook.invitation-enhanced .story-opening .cover-recipient-label,
.storybook.invitation-enhanced .story-opening .guest-name,
.storybook.invitation-enhanced .story-opening .open-button,
.storybook.invitation-enhanced .story-opening__branch {
    opacity: 0;
    transform: translateY(10px);
}

.storybook.invitation-enhanced .story-opening.is-ready .story-monogram,
.storybook.invitation-enhanced .story-opening.is-ready .cover-eyebrow,
.storybook.invitation-enhanced .story-opening.is-ready .cover-names,
.storybook.invitation-enhanced .story-opening.is-ready .cover-date,
.storybook.invitation-enhanced .story-opening.is-ready .cover-recipient-label,
.storybook.invitation-enhanced .story-opening.is-ready .guest-name,
.storybook.invitation-enhanced .story-opening.is-ready .open-button,
.storybook.invitation-enhanced .story-opening.is-ready .story-opening__branch {
    animation: storyElementIn .7s cubic-bezier(.22, .61, .36, 1) both;
}

.storybook.invitation-enhanced .story-opening.is-ready .story-opening__branch { animation-delay: .02s; }
.storybook.invitation-enhanced .story-opening.is-ready .story-monogram { animation-delay: .08s; }
.storybook.invitation-enhanced .story-opening.is-ready .cover-eyebrow { animation-delay: .14s; }
.storybook.invitation-enhanced .story-opening.is-ready .cover-names { animation-delay: .20s; }
.storybook.invitation-enhanced .story-opening.is-ready .cover-date { animation-delay: .31s; }
.storybook.invitation-enhanced .story-opening.is-ready .cover-recipient-label { animation-delay: .40s; }
.storybook.invitation-enhanced .story-opening.is-ready .guest-name { animation-delay: .47s; }
.storybook.invitation-enhanced .story-opening.is-ready .open-button { animation-delay: .55s; }

@keyframes storyElementIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Scene 02: bright paper welcome. */
.storybook .story-welcome {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: clamp(92px, 13vh, 144px) var(--story-safe-right)
        clamp(104px, 14vh, 154px) var(--story-safe-left);
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 14%, rgba(167, 176, 163, .20), transparent 24%),
        radial-gradient(circle at 91% 87%, rgba(181, 154, 98, .10), transparent 22%),
        var(--paper-ivory);
    color: var(--primary-ink);
}

.storybook .story-welcome::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: clamp(22px, 6vw, 92px);
    width: 1px;
    height: clamp(54px, 9vh, 92px);
    background: linear-gradient(var(--muted-gold), transparent);
    opacity: .5;
}

.storybook .story-welcome::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -330px;
    width: min(760px, 135vw);
    aspect-ratio: 1;
    border: 1px solid rgba(181, 154, 98, .13);
    border-radius: 50%;
    transform: translateX(-50%);
}

.storybook .story-welcome__layout {
    width: min(100%, 1180px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 58px;
    align-items: center;
}

.storybook .story-welcome__copy {
    width: min(100%, 560px);
    margin-inline: auto;
    text-align: center;
}

.storybook .story-welcome__chapter {
    color: var(--muted-gold);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.storybook .story-welcome__to {
    margin-top: 30px;
    color: var(--secondary-ink);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: .02em;
}

.storybook .story-welcome__guest {
    margin: 10px auto 0;
    color: var(--deep-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 10.5vw, 58px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.storybook .story-welcome__guest:focus {
    outline: none;
}

.storybook .story-welcome__guest:focus-visible {
    outline: 2px solid var(--muted-gold);
    outline-offset: 7px;
}

.storybook .story-welcome__rule {
    display: block;
    width: 62px;
    height: 1px;
    margin: 30px auto;
    background: linear-gradient(90deg, transparent, var(--muted-gold), transparent);
}

.storybook .story-welcome__bismillah {
    color: var(--muted-gold);
    font-family: serif;
    font-size: clamp(22px, 5.8vw, 29px);
    line-height: 1.85;
}

.storybook .story-welcome__salam {
    margin-top: 19px;
    color: var(--deep-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(25px, 6.7vw, 34px);
    font-weight: 500;
    line-height: 1.3;
}

.storybook .story-welcome__message {
    max-width: 480px;
    margin: 19px auto 0;
    color: var(--secondary-ink);
    font-family: "Poppins", sans-serif;
    font-size: clamp(14px, 3.7vw, 16px);
    font-weight: 300;
    line-height: 1.95;
    text-wrap: pretty;
}

.storybook .story-welcome__art {
    position: relative;
    width: min(100%, 430px);
    min-height: 330px;
    margin-inline: auto;
}

.storybook .story-welcome__paper {
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 50%;
    width: min(64vw, 250px);
    aspect-ratio: .76;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 23px;
    border: 1px solid rgba(181, 154, 98, .28);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .62), transparent 38%),
        var(--soft-paper);
    box-shadow: 0 25px 60px rgba(36, 51, 45, .11);
    transform: translate(-50%, -50%) rotate(-3.5deg);
}

.storybook .story-welcome__paper::before,
.storybook .story-welcome__paper::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 1px;
    background: var(--muted-gold);
    opacity: .5;
}

.storybook .story-welcome__paper::before { top: 18px; left: 18px; }
.storybook .story-welcome__paper::after { right: 18px; bottom: 18px; }

.storybook .story-welcome__paper-mark {
    color: var(--deep-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
}

.storybook .story-welcome__paper-mark i {
    color: var(--muted-gold);
    font-family: "Great Vibes", cursive;
    font-size: .78em;
}

.storybook .story-welcome__paper-line {
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--muted-gold), transparent);
}

.storybook .story-welcome__paper-date {
    color: var(--secondary-ink);
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .24em;
}

.storybook .story-welcome__botanical {
    position: absolute;
    z-index: 3;
    inset: -12px -22px -38px auto;
    width: min(92%, 390px);
    height: auto;
    fill: rgba(167, 176, 163, .18);
    stroke: var(--muted-emerald);
    stroke-width: 1.3;
    pointer-events: none;
}

.storybook .story-welcome__botanical-stem {
    fill: none;
    stroke: var(--muted-gold);
    stroke-width: 1.5;
}

.storybook .story-welcome__gold-thread {
    position: absolute;
    z-index: 1;
    left: 6%;
    bottom: 10%;
    width: 76%;
    height: 38%;
    border: 1px solid rgba(181, 154, 98, .35);
    border-color: rgba(181, 154, 98, .35) transparent transparent;
    border-radius: 50%;
    transform: rotate(12deg);
}

.storybook .story-welcome__continue {
    position: absolute;
    left: 50%;
    bottom: max(25px, env(safe-area-inset-bottom));
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--muted-emerald);
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .17em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.storybook .story-welcome__continue svg {
    width: 17px;
    height: 17px;
}

.storybook .story-welcome__continue:focus-visible {
    outline: 2px solid var(--deep-emerald);
    outline-offset: 5px;
}

/* Welcome reveal is tied to the opening action, not to forced scrolling. */
.storybook.invitation-enhanced .story-welcome__chapter,
.storybook.invitation-enhanced .story-welcome__to,
.storybook.invitation-enhanced .story-welcome__guest,
.storybook.invitation-enhanced .story-welcome__rule,
.storybook.invitation-enhanced .story-welcome__bismillah,
.storybook.invitation-enhanced .story-welcome__salam,
.storybook.invitation-enhanced .story-welcome__message,
.storybook.invitation-enhanced .story-welcome__art,
.storybook.invitation-enhanced .story-welcome__continue {
    opacity: 0;
    transform: translateY(12px);
}

.storybook.invitation-opened .story-welcome__chapter,
.storybook.invitation-opened .story-welcome__to,
.storybook.invitation-opened .story-welcome__guest,
.storybook.invitation-opened .story-welcome__rule,
.storybook.invitation-opened .story-welcome__bismillah,
.storybook.invitation-opened .story-welcome__salam,
.storybook.invitation-opened .story-welcome__message,
.storybook.invitation-opened .story-welcome__art,
.storybook.invitation-opened .story-welcome__continue {
    animation: storyWelcomeIn .72s cubic-bezier(.22, .61, .36, 1) both;
}

.storybook.invitation-opened .story-welcome__chapter { animation-delay: .12s; }
.storybook.invitation-opened .story-welcome__to { animation-delay: .18s; }
.storybook.invitation-opened .story-welcome__guest { animation-delay: .24s; }
.storybook.invitation-opened .story-welcome__rule { animation-delay: .31s; }
.storybook.invitation-opened .story-welcome__bismillah { animation-delay: .37s; }
.storybook.invitation-opened .story-welcome__salam { animation-delay: .43s; }
.storybook.invitation-opened .story-welcome__message { animation-delay: .49s; }
.storybook.invitation-opened .story-welcome__art { animation-delay: .24s; }
.storybook.invitation-opened .story-welcome__continue { animation-delay: .60s; }

@keyframes storyWelcomeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Existing floating control remains functional but does not distract on the cover. */
.storybook.invitation-locked #musicBtn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.storybook:not(.invitation-locked) #musicBtn {
    width: 44px;
    height: 44px;
    opacity: 1;
    transition: opacity .3s ease, transform .25s ease, background-color .25s ease;
}

@media (max-width: 359px) {
    .storybook {
        --story-safe-left: max(18px, env(safe-area-inset-left));
        --story-safe-right: max(18px, env(safe-area-inset-right));
    }

    .storybook .story-opening .overlay {
        padding-block: 54px 46px;
        gap: 30px;
    }

    .storybook .story-opening .cover-names {
        font-size: 49px;
    }

    .storybook .story-opening .cover-invitation {
        width: min(100%, 304px);
    }

    .storybook .story-welcome {
        padding-top: 82px;
    }

    .storybook .story-welcome__message {
        font-size: 13.5px;
    }
}

@media (min-width: 430px) {
    .storybook .story-opening .cover-names {
        font-size: clamp(67px, 16vw, 88px);
    }

    .storybook .story-welcome__art {
        min-height: 390px;
    }

    .storybook .story-welcome__paper {
        width: 270px;
    }
}

@media (min-width: 768px) {
    .storybook {
        --story-safe-left: max(52px, env(safe-area-inset-left));
        --story-safe-right: max(52px, env(safe-area-inset-right));
    }

    .storybook .story-opening .overlay {
        min-height: calc(100svh - 52px);
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .72fr);
        gap: clamp(54px, 8vw, 112px);
        padding-block: clamp(72px, 10vh, 116px);
        text-align: left;
    }

    .storybook .story-opening .cover-heading {
        align-items: flex-start;
    }

    .storybook .story-opening .cover-eyebrow {
        margin-top: 24px;
    }

    .storybook .story-opening .cover-names {
        justify-items: start;
        font-size: clamp(72px, 9vw, 122px);
        line-height: .72;
        letter-spacing: .055em;
    }

    .storybook .story-opening .cover-ampersand {
        margin-left: 1.25em;
    }

    .storybook .story-opening .cover-date {
        margin-top: 40px;
    }

    .storybook .story-opening .cover-invitation {
        align-self: end;
        margin-bottom: clamp(36px, 10vh, 110px);
        padding: 26px 0 0 26px;
        border-top: 0;
        border-left: 1px solid rgba(181, 154, 98, .38);
        text-align: left;
    }

    .storybook .story-opening .open-button {
        margin-left: 0;
    }

    .storybook .story-opening__branch--upper {
        top: -115px;
        right: -45px;
    }

    .storybook .story-opening__branch--lower {
        left: 25%;
        bottom: -210px;
        opacity: .68;
    }

    .storybook .story-welcome {
        padding-block: clamp(104px, 12vh, 148px);
    }

    .storybook .story-welcome__layout {
        grid-template-columns: minmax(0, .92fr) minmax(330px, 1.08fr);
        gap: clamp(50px, 8vw, 116px);
    }

    .storybook .story-welcome__copy {
        margin-inline: 0;
        text-align: left;
    }

    .storybook .story-welcome__guest {
        margin-inline: 0;
        font-size: clamp(55px, 6vw, 82px);
    }

    .storybook .story-welcome__rule {
        margin-inline: 0;
    }

    .storybook .story-welcome__message {
        margin-inline: 0;
        font-size: 15px;
    }

    .storybook .story-welcome__art {
        width: min(100%, 520px);
        min-height: 560px;
    }

    .storybook .story-welcome__paper {
        left: 44%;
        width: min(55%, 294px);
    }

    .storybook .story-welcome__botanical {
        right: -5%;
        width: 92%;
    }
}

@media (min-width: 1024px) {
    .storybook {
        --story-safe-left: max(72px, env(safe-area-inset-left));
        --story-safe-right: max(72px, env(safe-area-inset-right));
    }

    .storybook .story-opening::after {
        right: -5vw;
        bottom: -25vw;
    }

    .storybook .story-opening .cover-invitation {
        width: min(100%, 410px);
    }

    .storybook .story-welcome__layout {
        grid-template-columns: minmax(420px, .88fr) minmax(420px, 1.12fr);
    }
}

@media (min-width: 1366px) {
    .storybook .story-opening .overlay {
        width: min(calc(100% - 40px), 1320px);
        grid-template-columns: minmax(0, 1.2fr) minmax(350px, .65fr);
    }

    .storybook .story-opening .cover-names {
        font-size: clamp(106px, 8.2vw, 132px);
    }

    .storybook .story-opening__branch--upper {
        right: 1vw;
    }

    .storybook .story-welcome__layout {
        width: min(100%, 1240px);
    }
}

@media (max-height: 700px) {
    .storybook .story-opening .overlay {
        min-height: calc(100svh - 42px);
        padding-block: 40px 34px;
        gap: 24px;
    }

    .storybook .story-opening .story-monogram {
        min-width: 52px;
        min-height: 52px;
    }

    .storybook .story-opening .cover-eyebrow {
        margin-top: 12px;
    }

    .storybook .story-opening .cover-date {
        margin-top: 20px;
    }

    .storybook .story-opening .cover-invitation {
        padding-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storybook .story-opening,
    .storybook .story-opening .open-button,
    .storybook:not(.invitation-locked) #musicBtn {
        transition: none;
    }

    .storybook.invitation-enhanced .story-opening .story-monogram,
    .storybook.invitation-enhanced .story-opening .cover-eyebrow,
    .storybook.invitation-enhanced .story-opening .cover-names,
    .storybook.invitation-enhanced .story-opening .cover-date,
    .storybook.invitation-enhanced .story-opening .cover-recipient-label,
    .storybook.invitation-enhanced .story-opening .guest-name,
    .storybook.invitation-enhanced .story-opening .open-button,
    .storybook.invitation-enhanced .story-opening__branch,
    .storybook.invitation-enhanced .story-welcome__chapter,
    .storybook.invitation-enhanced .story-welcome__to,
    .storybook.invitation-enhanced .story-welcome__guest,
    .storybook.invitation-enhanced .story-welcome__rule,
    .storybook.invitation-enhanced .story-welcome__bismillah,
    .storybook.invitation-enhanced .story-welcome__salam,
    .storybook.invitation-enhanced .story-welcome__message,
    .storybook.invitation-enhanced .story-welcome__art,
    .storybook.invitation-enhanced .story-welcome__continue {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .storybook .story-opening .open-button:hover {
        transform: none;
    }
}

/* ==========================================================
   Scene 03 — Couple Introduction
   Existing silhouette assets are treated as editorial shapes.
========================================================== */
.storybook .story-couple {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: clamp(96px, 14vh, 150px) var(--story-safe-right) 190px var(--story-safe-left);
    color: var(--primary-ink);
    text-align: left;
    background:
        radial-gradient(circle at 9% 15%, rgba(167, 176, 163, .18), transparent 27%),
        linear-gradient(180deg, var(--paper-ivory) 0%, var(--soft-paper) 68%, #e9e7df 100%);
    border: 0;
}

.storybook .story-couple::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .24;
    pointer-events: none;
    background-image: radial-gradient(rgba(36, 51, 45, .2) .45px, transparent .55px);
    background-size: 5px 5px;
}

.storybook .story-couple::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -20%;
    top: 34%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 46% 54% 62% 38%;
    background: rgba(167, 176, 163, .16);
    transform: rotate(-8deg);
}

.storybook .story-couple__botanical {
    position: absolute;
    z-index: 0;
    top: -75px;
    right: -92px;
    width: min(71vw, 330px);
    height: auto;
    overflow: visible;
    fill: rgba(44, 81, 72, .24);
    pointer-events: none;
    transform: rotate(7deg);
}

.storybook .story-couple__botanical-stem {
    fill: none;
    stroke: rgba(181, 154, 98, .68);
    stroke-width: 1.5;
}

.storybook .story-couple__intro {
    position: relative;
    z-index: 2;
    width: min(100%, 620px);
    margin: 0 auto clamp(72px, 12vh, 118px);
    text-align: center;
}

.storybook .story-scene-label {
    margin: 0 0 22px;
    color: var(--muted-gold);
    font: 500 9px/1.6 "Poppins", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.storybook .story-couple .couple-subtitle {
    margin: 0;
    color: var(--muted-gold);
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.8;
}

.storybook .story-couple .couple-title {
    margin: 12px 0 0;
    color: var(--deep-emerald);
    font: 500 clamp(48px, 13vw, 68px)/.94 "Cormorant Garamond", serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.storybook .story-couple .couple-text {
    max-width: 560px;
    margin: 26px auto 0;
    color: var(--secondary-ink);
    font: 300 clamp(13px, 3.5vw, 15px)/2 "Poppins", sans-serif;
    text-wrap: pretty;
}

.storybook .story-couple .couple-wrapper {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 1180px);
    margin: 0 auto;
}

.storybook .story-couple .story-person {
    position: relative;
    display: grid;
    width: 100%;
    max-width: none;
    justify-items: stretch;
}

.storybook .story-couple .story-person__portrait {
    position: relative;
    width: min(78vw, 310px);
}

.storybook .story-couple .story-person--puteri .story-person__portrait {
    margin-right: auto;
}

.storybook .story-couple .story-person--ilham {
    margin-top: 112px;
}

.storybook .story-couple .story-person--ilham .story-person__portrait {
    margin-left: auto;
}

.storybook .story-couple .person-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 48% 48% 12% 12% / 30% 30% 9% 9%;
    background: transparent;
    box-shadow: none;
}

.storybook .story-couple .person-photo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7% 1% 0 7%;
    border-radius: 50% 50% 10% 10%;
    background: rgba(167, 176, 163, .25);
    transform: rotate(-3deg);
}

.storybook .story-couple .story-person--ilham .person-photo::before {
    inset: 5% 7% 0 1%;
    transform: rotate(3deg);
}

.storybook .story-couple .person-photo::after {
    content: none;
}

.storybook .story-couple .person-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 50%;
    filter: sepia(.06) saturate(.72) contrast(.96);
    mix-blend-mode: multiply;
    transform: scale(1.015);
    transform-origin: center bottom;
}

.storybook .story-couple .story-person__index {
    position: absolute;
    right: -14px;
    bottom: 20px;
    color: rgba(181, 154, 98, .86);
    font: italic 400 31px/1 "Cormorant Garamond", serif;
}

.storybook .story-couple .story-person--ilham .story-person__index {
    right: auto;
    left: -12px;
}

.storybook .story-couple .story-person__copy {
    width: min(88%, 390px);
    margin-top: 28px;
}

.storybook .story-couple .story-person--puteri .story-person__copy {
    margin-right: auto;
    padding-left: 7px;
}

.storybook .story-couple .story-person--ilham .story-person__copy {
    margin-left: auto;
    padding-right: 7px;
    text-align: right;
}

.storybook .story-couple .story-person__role {
    margin: 0 0 9px;
    color: var(--muted-gold);
    font: 500 9px/1.5 "Poppins", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.storybook .story-couple .person h3 {
    max-width: 390px;
    margin: 0;
    color: var(--deep-emerald);
    font: 500 clamp(37px, 10vw, 52px)/.96 "Cormorant Garamond", serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.storybook .story-couple .parent {
    margin: 25px 0 0;
}

.storybook .story-couple .parent-label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted-gold);
    font: 500 9px/1.5 "Poppins", sans-serif;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.storybook .story-couple .parent-names {
    display: block;
    color: var(--secondary-ink);
    font: 400 clamp(12px, 3.3vw, 14px)/1.85 "Poppins", sans-serif;
}

.storybook .story-couple .parent-ampersand {
    color: var(--muted-gold);
    font: italic 500 20px/1.3 "Cormorant Garamond", serif;
}

.storybook .story-couple .story-couple__ampersand {
    position: relative;
    width: 90px;
    height: 116px;
    margin: 58px auto -55px;
    color: var(--muted-gold);
    font: italic 400 43px/1 "Cormorant Garamond", serif;
    text-align: center;
}

.storybook .story-couple .story-couple__ampersand::before,
.storybook .story-couple .story-couple__ampersand::after {
    content: none;
}

.storybook .story-couple__ampersand span {
    position: relative;
    z-index: 1;
}

.storybook .story-couple__ampersand i {
    position: absolute;
    left: 43px;
    top: 44px;
    width: 1px;
    height: 88px;
    background: linear-gradient(var(--muted-gold), transparent);
    transform: rotate(13deg);
    transform-origin: top;
}

.storybook .story-couple__handoff {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: -7px;
    width: 120px;
    height: 185px;
    color: var(--muted-gold);
    pointer-events: none;
    transform: translateX(-50%);
}

.storybook .story-couple__handoff svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 310px;
    overflow: visible;
    fill: rgba(44, 81, 72, .24);
}

.storybook .story-couple__handoff svg path:first-child {
    fill: none;
    stroke: var(--muted-gold);
    stroke-width: 1.25;
}

.storybook .story-couple__monogram {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 3px;
    white-space: nowrap;
    font: 500 13px/1 "Cormorant Garamond", serif;
    letter-spacing: .18em;
    transform: translateX(-50%);
}

.storybook .story-couple__monogram i {
    font-weight: 400;
}

/* ==========================================================
   Scene 04 — Quranic Interlude
========================================================== */
.storybook .story-quran {
    position: relative;
    isolation: isolate;
    min-height: 84vh;
    min-height: 84svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 145px var(--story-safe-right) 165px var(--story-safe-left);
    color: var(--primary-ink);
    text-align: left;
    background:
        linear-gradient(108deg, rgba(167, 176, 163, .1), transparent 42%),
        var(--paper-ivory);
    border: 0;
}

.storybook .story-quran::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background-image: radial-gradient(rgba(36, 51, 45, .18) .45px, transparent .55px);
    background-size: 5px 5px;
}

.storybook .story-quran__art {
    position: absolute;
    z-index: -1;
    top: 2%;
    right: -78px;
    width: min(64vw, 285px);
    opacity: .48;
    pointer-events: none;
}

.storybook .story-quran__art svg {
    width: 100%;
    height: auto;
    overflow: visible;
    fill: rgba(44, 81, 72, .32);
}

.storybook .story-quran__stem {
    fill: none;
    stroke: var(--muted-gold);
    stroke-width: 1.5;
    stroke-dasharray: 930;
    stroke-dashoffset: 0;
}

.storybook .story-quran__leaf-shadow {
    position: absolute;
    right: 20%;
    bottom: 5%;
    width: 34%;
    aspect-ratio: 1 / 2;
    border-radius: 100% 0 100% 0;
    background: rgba(167, 176, 163, .16);
    transform: rotate(24deg);
}

.storybook .story-quran__copy {
    position: relative;
    z-index: 2;
    width: min(100%, 660px);
    margin: 54px auto 0;
}

.storybook .story-quran .story-scene-label {
    margin-bottom: 27px;
}

.storybook .story-quran .islamic-rule {
    display: block;
    width: 56px;
    height: 1px;
    margin: 0 0 32px;
    background: var(--muted-gold);
}

.storybook .story-quran blockquote {
    max-width: 660px;
    margin: 0;
    color: var(--muted-emerald);
    font: 400 clamp(28px, 7.6vw, 43px)/1.48 "Cormorant Garamond", serif;
    letter-spacing: -.018em;
    text-wrap: pretty;
}

.storybook .story-quran .story-quran__copy > p:last-child {
    margin: 31px 0 0;
    color: var(--muted-gold);
    font: 500 9px/1.6 "Poppins", sans-serif;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.storybook .story-quran__handoff {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(62%, 320px);
    height: 96px;
    color: rgba(181, 154, 98, .75);
    transform: translateX(-50%);
}

.storybook .story-quran__handoff span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 72px;
    background: linear-gradient(transparent, currentColor);
}

.storybook .story-quran__handoff i {
    position: absolute;
    left: 50%;
    top: 0;
    color: var(--muted-emerald);
    font: 500 10px/1 "Cormorant Garamond", serif;
    letter-spacing: .2em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.storybook .story-couple .story-person--puteri .story-person__portrait.detail-reveal,
.storybook .story-couple .story-person--puteri .story-person__copy.detail-reveal {
    opacity: 0;
    transform: translateX(-14px);
}

.storybook .story-couple .story-person--ilham .story-person__portrait.detail-reveal,
.storybook .story-couple .story-person--ilham .story-person__copy.detail-reveal {
    opacity: 0;
    transform: translateX(14px);
}

.storybook .story-couple [data-detail-reveal].detail-visible,
.storybook .story-quran [data-detail-reveal].detail-visible {
    opacity: 1;
    transform: none;
}

.storybook .story-couple .story-person__copy.detail-reveal {
    transition-delay: .11s;
}

.storybook .story-quran__art.detail-reveal .story-quran__stem {
    stroke-dashoffset: 930;
}

.storybook .story-quran__art.detail-visible .story-quran__stem {
    animation: storyStemReveal 1.35s cubic-bezier(.22, .61, .36, 1) .08s both;
}

@keyframes storyStemReveal {
    to { stroke-dashoffset: 0; }
}

@media (max-width: 359px) {
    .storybook .story-couple {
        padding-bottom: 170px;
    }

    .storybook .story-couple .story-person__portrait {
        width: min(76vw, 272px);
    }

    .storybook .story-couple .person h3 {
        font-size: 35px;
    }

    .storybook .story-quran {
        padding-top: 126px;
    }

    .storybook .story-quran blockquote {
        font-size: 27px;
    }
}

@media (min-width: 430px) {
    .storybook .story-couple .story-person__portrait {
        width: min(70vw, 330px);
    }

    .storybook .story-couple .story-person__copy {
        width: min(82%, 420px);
    }

    .storybook .story-quran__copy {
        width: min(88%, 660px);
    }
}

@media (min-width: 768px) {
    .storybook .story-couple {
        padding-top: 135px;
        padding-bottom: 230px;
    }

    .storybook .story-couple__botanical {
        top: -115px;
        right: -45px;
        width: min(40vw, 440px);
    }

    .storybook .story-couple__intro {
        width: min(68%, 670px);
        margin-left: 5%;
        text-align: left;
    }

    .storybook .story-couple .couple-text {
        margin-left: 0;
    }

    .storybook .story-couple .story-person {
        grid-template-columns: minmax(260px, 1.05fr) minmax(230px, .8fr);
        align-items: center;
        gap: clamp(42px, 7vw, 86px);
        width: min(83%, 850px);
    }

    .storybook .story-couple .story-person__portrait {
        width: 100%;
        max-width: 390px;
    }

    .storybook .story-couple .story-person__copy {
        width: 100%;
        margin-top: 0;
        padding: 0;
    }

    .storybook .story-couple .story-person--puteri {
        margin-right: auto;
    }

    .storybook .story-couple .story-person--ilham {
        grid-template-columns: minmax(230px, .8fr) minmax(260px, 1.05fr);
        margin-top: 55px;
        margin-left: auto;
    }

    .storybook .story-couple .story-person--ilham .story-person__portrait {
        grid-column: 2;
        grid-row: 1;
    }

    .storybook .story-couple .story-person--ilham .story-person__copy {
        grid-column: 1;
        grid-row: 1;
    }

    .storybook .story-couple .story-couple__ampersand {
        position: absolute;
        z-index: 4;
        left: 49%;
        top: 43%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .storybook .story-quran {
        min-height: 90vh;
        min-height: 90svh;
        grid-template-columns: minmax(240px, .72fr) minmax(430px, 1.28fr);
        gap: clamp(55px, 9vw, 130px);
        padding-block: 150px 180px;
    }

    .storybook .story-quran__art {
        position: relative;
        z-index: 1;
        top: auto;
        right: auto;
        width: min(100%, 430px);
        opacity: .65;
        transform: translateX(-13%);
    }

    .storybook .story-quran__copy {
        width: min(100%, 700px);
        margin: 0;
    }

    .storybook .story-quran blockquote {
        font-size: clamp(34px, 4vw, 54px);
    }
}

@media (min-width: 1024px) {
    .storybook .story-couple__intro {
        margin-left: 10%;
    }

    .storybook .story-couple .story-person--ilham {
        margin-top: -22px;
    }

    .storybook .story-couple .story-couple__ampersand {
        top: 48%;
    }

    .storybook .story-quran {
        grid-template-columns: minmax(340px, .8fr) minmax(500px, 1.2fr);
    }
}

@media (min-width: 1366px) {
    .storybook .story-couple__intro,
    .storybook .story-couple__spread {
        max-width: 1220px;
    }

    .storybook .story-couple__intro {
        margin-left: max(10%, calc((100% - 1220px) / 2));
    }

    .storybook .story-couple .story-person {
        width: min(78%, 920px);
    }

    .storybook .story-quran {
        grid-template-columns: minmax(380px, .85fr) minmax(580px, 1.15fr);
    }

    .storybook .story-quran__copy {
        max-width: 740px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storybook .story-couple [data-detail-reveal],
    .storybook .story-quran [data-detail-reveal],
    .storybook .story-quran__stem {
        animation: none !important;
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}