/* ================================================================
   PERSONAL WELCOME — editorial ivory folio
   Scoped to the scene after the approved cover.
   ================================================================ */

.storybook .story-welcome {
    padding: clamp(72px, 10vh, 118px) var(--story-safe-right)
        clamp(108px, 13vh, 150px) var(--story-safe-left);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .34), transparent 34%),
        repeating-linear-gradient(0deg, rgba(44, 81, 72, .018) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 8% 14%, rgba(167, 176, 163, .18), transparent 25%),
        radial-gradient(circle at 91% 87%, rgba(181, 154, 98, .11), transparent 23%),
        var(--paper-ivory);
}

.storybook .story-welcome__corner {
    position: absolute;
    z-index: 0;
    width: clamp(120px, 24vw, 260px);
    height: auto;
    overflow: visible;
    fill: rgba(167, 176, 163, .08);
    stroke: rgba(44, 81, 72, .32);
    stroke-width: 1.05;
    pointer-events: none;
}

.storybook .story-welcome__corner-stem {
    fill: none;
    stroke: rgba(181, 154, 98, .58);
    stroke-width: 1.35;
}

.storybook .story-welcome__corner--upper {
    top: -24px;
    right: -34px;
}

.storybook .story-welcome__corner--lower {
    bottom: -42px;
    left: -34px;
    transform: rotate(180deg);
}

.storybook .story-welcome__layout {
    position: relative;
    z-index: 1;
    gap: clamp(34px, 7vw, 88px);
}

.storybook .story-welcome__copy {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: min(100%, 570px);
    padding: clamp(34px, 8vw, 54px) clamp(19px, 6vw, 44px)
        clamp(38px, 8vw, 58px);
    background:
        linear-gradient(var(--welcome-line, rgba(181, 154, 98, .32)), var(--welcome-line, rgba(181, 154, 98, .32))) top left / 56px 1px no-repeat,
        linear-gradient(var(--welcome-line, rgba(181, 154, 98, .32)), var(--welcome-line, rgba(181, 154, 98, .32))) top left / 1px 56px no-repeat,
        linear-gradient(var(--welcome-line, rgba(181, 154, 98, .32)), var(--welcome-line, rgba(181, 154, 98, .32))) bottom right / 56px 1px no-repeat,
        linear-gradient(var(--welcome-line, rgba(181, 154, 98, .32)), var(--welcome-line, rgba(181, 154, 98, .32))) bottom right / 1px 56px no-repeat,
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .8), rgba(247, 245, 239, .34) 68%, transparent 88%);
}

.storybook .story-welcome__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 10px;
    border: 1px solid rgba(44, 81, 72, .07);
    border-radius: 48% 48% 34px 34px / 12% 12% 7% 7%;
    pointer-events: none;
}

.storybook .story-welcome__to {
    margin: 0;
    display: grid;
    gap: 3px;
    color: var(--secondary-ink);
    line-height: 1.55;
}

.storybook .story-welcome__to span:first-child {
    color: var(--gold-ink, #8d7345);
    font-family: "Poppins", sans-serif;
    font-size: clamp(.62rem, 2.3vw, .72rem);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.storybook .story-welcome__to span:last-child {
    color: var(--muted-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1rem, 4.2vw, 1.18rem);
    font-weight: 500;
    letter-spacing: .035em;
}

.storybook .story-welcome__guest {
    max-width: 100%;
    margin: 12px auto 0;
    color: var(--deep-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.65rem, 11.5vw, 4.75rem);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.035em;
    text-shadow: 0 10px 30px rgba(18, 53, 47, .08);
}

.storybook .story-welcome__bismillah {
    margin: clamp(24px, 5vw, 32px) 0 0;
    color: var(--gold-ink, #8d7345);
    font-family: var(--font-arabic, "Noto Naskh Arabic", serif);
    font-size: clamp(1.65rem, 7vw, 2.1rem);
    font-weight: 500;
    line-height: 1.65;
    text-shadow: 0 8px 24px rgba(181, 154, 98, .1);
}

.storybook .story-welcome__salam {
    margin: clamp(16px, 3.6vw, 22px) 0 0;
    color: var(--deep-emerald);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.65rem, 7vw, 2.25rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.storybook .story-welcome__message {
    max-width: 43ch;
    margin: clamp(16px, 3.5vw, 21px) auto 0;
    color: var(--readable-secondary, var(--secondary-ink));
    font-family: "Poppins", sans-serif;
    font-size: clamp(.84rem, 3.55vw, .98rem);
    font-weight: 300;
    line-height: 1.9;
    text-wrap: pretty;
}

.storybook .story-welcome__art::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 8% 4% 3%;
    border: 1px solid rgba(181, 154, 98, .16);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(167, 176, 163, .1), transparent 66%);
    transform: rotate(4deg);
}

@media (max-width: 767px) {
    .storybook .story-welcome__copy {
        width: min(100%, 430px);
    }

    .storybook .story-welcome__art {
        min-height: clamp(320px, 88vw, 380px);
    }

    .storybook .story-welcome__corner {
        opacity: .72;
    }
}

@media (min-width: 768px) {
    .storybook .story-welcome__copy {
        margin-inline: 0;
        padding: clamp(48px, 5vw, 68px) clamp(38px, 4.5vw, 62px);
        text-align: left;
    }

    .storybook .story-welcome__guest,
    .storybook .story-welcome__message {
        margin-inline: 0;
    }
}

@media (min-width: 1024px) {
    .storybook .story-welcome {
        padding-block: clamp(58px, 8vh, 76px) clamp(72px, 8vh, 92px);
    }

    .storybook .story-welcome__layout {
        grid-template-columns: minmax(520px, 1.05fr) minmax(420px, .95fr);
        gap: clamp(52px, 5vw, 72px);
    }

    .storybook .story-welcome__copy {
        width: min(100%, 600px);
        padding: clamp(42px, 4vw, 56px) clamp(34px, 3vw, 44px);
    }

    .storybook .story-welcome__guest {
        font-size: clamp(3.5rem, 4.35vw, 4.15rem);
        white-space: nowrap;
    }

    .storybook .story-welcome__message {
        max-width: 45ch;
    }
}

@media (max-height: 700px) and (max-width: 767px) {
    .storybook .story-welcome {
        padding-top: 58px;
    }

    .storybook .story-welcome__copy {
        padding-block: 28px 34px;
    }
}