/* ==========================================================
   THE EMERALD STORY GARDEN — cinematic master world
   Progressive enhancement: the stage is hidden until JS opts in.
========================================================== */
.storybook .world-journey {
    position: relative;
    isolation: isolate;
    color: var(--primary-ink);
    background: var(--paper-ivory);
}

.storybook .world-stage {
    display: none;
}

.storybook .world-shot--establish {
    min-height: 72svh;
    display: grid;
    place-items: center;
    padding: 100px var(--story-safe-right);
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(167, 176, 163, .2), transparent 37%),
        var(--paper-ivory);
}

.storybook .world-shot__content {
    position: relative;
    z-index: 4;
    width: min(100%, 620px);
}

.storybook .world-shot__content h2 {
    margin: 0;
    color: var(--deep-emerald);
    font: 500 clamp(52px, 12vw, 88px)/.86 "Cormorant Garamond", serif;
    letter-spacing: -.045em;
}

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

.storybook .world-signature {
    margin: 27px 0 0;
    color: var(--muted-emerald);
    font: 500 clamp(28px, 7vw, 42px)/1 "Cormorant Garamond", serif;
}

.storybook .world-signature i {
    color: var(--muted-gold);
    font-family: "Great Vibes", cursive;
    font-weight: 400;
}

.storybook .world-gallery {
    min-height: 72svh;
    display: grid;
    place-items: center;
    padding: 90px var(--story-safe-right);
    text-align: center;
    background: var(--soft-paper);
}

.storybook .world-gallery__caption h2 {
    margin: 0;
    color: var(--deep-emerald);
    font: 500 clamp(52px, 13vw, 84px)/1 "Cormorant Garamond", serif;
}

.storybook .world-gallery__caption > span {
    display: block;
    width: 54px;
    height: 1px;
    margin: 28px auto 0;
    background: var(--muted-gold);
}

.storybook .world-gift-passage {
    display: none;
}

/* Cinematic mode is added only after the controller is ready. */
.storybook.world-camera-ready .world-journey {
    --world-panel: rgba(247, 245, 239, .9);
    min-height: 100svh;
    overflow: clip;
    background: var(--paper-ivory);
}

.storybook.world-camera-ready .world-journey::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 0;
    width: 1px;
    height: 150px;
    background: linear-gradient(var(--muted-gold), transparent);
    transform: translate(-50%, -45%);
    pointer-events: none;
}

.storybook.world-camera-ready .world-stage {
    position: sticky;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 45%, rgba(255, 255, 255, .84), transparent 44%),
        var(--paper-ivory);
    contain: paint;
}

.storybook.world-camera-ready .world-stage::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(247, 245, 239, .68);
    transition: opacity .65s ease;
}

.storybook.world-camera-ready .world-stage[data-active-shot="quran"]::after {
    opacity: .34;
}

.storybook.world-camera-ready .world-camera {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.storybook.world-camera-ready .world-canvas {
    --depth-x: 0px;
    --depth-y: 0px;
    position: relative;
    width: 760px;
    height: 5700px;
    overflow: hidden;
    color: var(--primary-ink);
    background:
        radial-gradient(circle at 56% 7%, rgba(255, 255, 255, .86), transparent 10%),
        radial-gradient(circle at 30% 29%, rgba(167, 176, 163, .22), transparent 10%),
        radial-gradient(circle at 70% 52%, rgba(18, 53, 47, .12), transparent 11%),
        radial-gradient(circle at 38% 77%, rgba(167, 176, 163, .2), transparent 10%),
        linear-gradient(180deg, #f8f6ef 0%, #efeee7 55%, #f6f3e9 100%);
    box-shadow: 0 0 130px rgba(18, 53, 47, .12) inset;
}

.storybook.world-camera-ready .world-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.storybook.world-camera-ready .world-background {
    transform: translate3d(calc(var(--depth-x) * -.22), calc(var(--depth-y) * -.22), 0);
}

.storybook.world-camera-ready .world-ground {
    z-index: 1;
}

.storybook.world-camera-ready .world-objects {
    z-index: 2;
}

.storybook.world-camera-ready .world-foreground {
    z-index: 3;
    transform: translate3d(calc(var(--depth-x) * .18), calc(var(--depth-y) * .18), 0);
}

.storybook.world-camera-ready .world-paper-grain {
    position: absolute;
    inset: 0;
    opacity: .19;
    background-image: radial-gradient(rgba(36, 51, 45, .24) .48px, transparent .58px);
    background-size: 5px 5px;
}

.storybook.world-camera-ready .world-haze {
    position: absolute;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(181, 154, 98, .16);
    background: rgba(167, 176, 163, .1);
}

.storybook.world-camera-ready .world-haze--one {
    left: -9%;
    top: 2%;
    width: 78%;
    aspect-ratio: 1;
}

.storybook.world-camera-ready .world-haze--two {
    right: -25%;
    top: 41%;
    width: 88%;
    aspect-ratio: 1;
}

.storybook.world-camera-ready .world-haze--three {
    left: -31%;
    top: 72%;
    width: 96%;
    aspect-ratio: 1;
}

.storybook.world-camera-ready .world-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: rgba(181, 154, 98, .68);
    stroke-width: 2;
    stroke-linecap: round;
}

.storybook.world-camera-ready .world-thread--desktop {
    display: none;
}

.storybook.world-camera-ready .world-object {
    --object-rotate: 0deg;
    position: absolute;
    opacity: .7;
    transform: translate(-50%, -50%) rotate(var(--object-rotate));
    transform-origin: center;
    filter: saturate(.82);
    transition: opacity .48s ease, filter .48s ease;
}

.storybook.world-camera-ready .world-object.is-world-focus {
    opacity: 1;
    filter: saturate(1) drop-shadow(0 22px 28px rgba(18, 53, 47, .12));
}

/* Central couple — the world anchor. */
.storybook.world-camera-ready .world-object--couple {
    left: 50%;
    top: 7.5%;
    width: 430px;
    height: 390px;
}

.storybook.world-camera-ready .world-object__halo {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 390px;
    aspect-ratio: 1;
    border: 1px solid rgba(181, 154, 98, .36);
    border-radius: 50%;
    background: rgba(167, 176, 163, .16);
    transform: translate(-50%, -50%);
}

.storybook.world-camera-ready .world-couple-portrait {
    position: absolute;
    bottom: 19px;
    width: 235px;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: 48% 48% 8% 8%;
    background: rgba(247, 245, 239, .78);
}

.storybook.world-camera-ready .world-couple-portrait--puteri {
    left: 10px;
    transform: rotate(-3deg);
}

.storybook.world-camera-ready .world-couple-portrait--ilham {
    right: 2px;
    transform: rotate(3deg);
}

.storybook.world-camera-ready .world-couple-portrait img,
.storybook.world-camera-ready .world-object--puteri img,
.storybook.world-camera-ready .world-object--ilham img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    filter: sepia(.08) saturate(.7) contrast(.96);
}

.storybook.world-camera-ready .world-monogram {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 6px;
    color: var(--muted-gold);
    font: 500 31px/1 "Cormorant Garamond", serif;
    letter-spacing: .16em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.storybook.world-camera-ready .world-monogram i {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
}

/* Individual portrait clearings. */
.storybook.world-camera-ready .world-object--puteri,
.storybook.world-camera-ready .world-object--ilham {
    width: 310px;
    height: 390px;
}

.storybook.world-camera-ready .world-object--puteri {
    left: 37%;
    top: 14%;
    --object-rotate: -3deg;
}

.storybook.world-camera-ready .world-object--ilham {
    left: 63%;
    top: 20%;
    --object-rotate: 3deg;
}

.storybook.world-camera-ready .world-object--puteri figure,
.storybook.world-camera-ready .world-object--ilham figure {
    position: absolute;
    inset: 22px 18px 0;
    margin: 0;
    overflow: hidden;
    border-radius: 48% 48% 11% 11%;
    background: rgba(247, 245, 239, .82);
}

.storybook.world-camera-ready .world-botanical-arch {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(181, 154, 98, .45);
    border-color: rgba(181, 154, 98, .45) transparent transparent rgba(181, 154, 98, .45);
    border-radius: 51% 49% 13% 9%;
}

.storybook.world-camera-ready .world-object__seal {
    position: absolute;
    right: -8px;
    bottom: 25px;
    color: var(--muted-gold);
    font: italic 400 25px/1 "Cormorant Garamond", serif;
}

/* 2017 notebook. */
.storybook.world-camera-ready .world-object--2017 {
    left: 40%;
    top: 29%;
    width: 285px;
    height: 210px;
    padding: 48px 34px 26px 54px;
    box-sizing: border-box;
    color: var(--deep-emerald);
    border-radius: 5px 16px 16px 5px;
    background: #f1e8d9;
    box-shadow: -13px 14px 0 rgba(44, 81, 72, .16), 0 20px 35px rgba(36, 51, 45, .1);
    --object-rotate: -7deg;
}

.storybook.world-camera-ready .world-object--2017::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(181, 154, 98, .5);
}

.storybook.world-camera-ready .world-object--2017 strong,
.storybook.world-camera-ready .world-object--2026 strong {
    display: block;
    font: 500 62px/.85 "Cormorant Garamond", serif;
}

.storybook.world-camera-ready .world-object--2017 small {
    display: block;
    margin-top: 16px;
    color: var(--muted-gold);
    font: 500 8px/1 "Poppins", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.storybook.world-camera-ready .world-notebook-lines {
    position: absolute;
    inset: 25px 20px 20px 42px;
    opacity: .24;
    background: repeating-linear-gradient(180deg, transparent 0 26px, var(--muted-gold) 27px);
}

.storybook.world-camera-ready .world-bookmark {
    position: absolute;
    right: 34px;
    top: -10px;
    width: 25px;
    height: 68px;
    background: var(--muted-emerald);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* 2025 phone and conversation. */
.storybook.world-camera-ready .world-object--2025 {
    left: 64%;
    top: 37%;
    width: 190px;
    height: 340px;
    border: 7px solid var(--deep-emerald);
    border-radius: 31px;
    background: #faf8f2;
    box-shadow: 22px 25px 0 rgba(167, 176, 163, .24);
    --object-rotate: 7deg;
}

.storybook.world-camera-ready .world-phone-speaker {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 48px;
    height: 5px;
    border-radius: 99px;
    background: var(--deep-emerald);
    transform: translateX(-50%);
}

.storybook.world-camera-ready .world-object--2025 strong {
    position: absolute;
    left: 22px;
    bottom: 24px;
    color: var(--muted-gold);
    font: 500 35px/1 "Cormorant Garamond", serif;
}

.storybook.world-camera-ready .world-message {
    position: absolute;
    height: 35px;
    border-radius: 13px 13px 4px 13px;
    background: rgba(44, 81, 72, .14);
}

.storybook.world-camera-ready .world-message--one { left: 18px; top: 64px; width: 112px; }
.storybook.world-camera-ready .world-message--two { right: 18px; top: 116px; width: 93px; background: rgba(181, 154, 98, .25); }
.storybook.world-camera-ready .world-message--three { left: 18px; top: 170px; width: 130px; }

/* 2026 family / khitbah paper cluster. */
.storybook.world-camera-ready .world-object--2026 {
    left: 36%;
    top: 45%;
    width: 310px;
    height: 245px;
    padding: 55px 48px;
    box-sizing: border-box;
    color: var(--deep-emerald);
    border: 1px solid rgba(181, 154, 98, .46);
    background: #f5eee2;
    box-shadow: 18px 20px 0 rgba(44, 81, 72, .12);
    --object-rotate: -5deg;
}

.storybook.world-camera-ready .world-paper-tab {
    position: absolute;
    top: -27px;
    width: 62px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--paper-ivory);
    border-radius: 7px 7px 0 0;
    background: var(--muted-emerald);
    font: 500 8px/1 "Poppins", sans-serif;
    letter-spacing: .13em;
}

.storybook.world-camera-ready .world-paper-tab--one { left: 20px; opacity: .7; }
.storybook.world-camera-ready .world-paper-tab--two { left: 86px; opacity: .84; }
.storybook.world-camera-ready .world-paper-tab--three { left: 152px; }

.storybook.world-camera-ready .world-ring {
    position: absolute;
    right: 31px;
    bottom: 28px;
    width: 52px;
    aspect-ratio: 1;
    border: 3px solid var(--muted-gold);
    border-radius: 50%;
}

.storybook.world-camera-ready .world-ring--two {
    right: 62px;
    bottom: 22px;
}

/* Calendar. */
.storybook.world-camera-ready .world-object--calendar {
    left: 52%;
    top: 54%;
    width: 245px;
    height: 285px;
    padding-top: 49px;
    box-sizing: border-box;
    color: var(--deep-emerald);
    text-align: center;
    border-radius: 7px;
    background: #faf7ee;
    box-shadow: 16px 18px 0 rgba(44, 81, 72, .18), 0 24px 40px rgba(36, 51, 45, .1);
    --object-rotate: 4deg;
}

.storybook.world-camera-ready .world-object--calendar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 34px;
    background: var(--muted-emerald);
}

.storybook.world-camera-ready .world-calendar-rings {
    position: absolute;
    z-index: 1;
    left: 36px;
    right: 36px;
    top: -8px;
    height: 22px;
    border-left: 5px solid var(--muted-gold);
    border-right: 5px solid var(--muted-gold);
}

.storybook.world-camera-ready .world-object--calendar small {
    color: var(--muted-gold);
    font: 500 9px/1 "Poppins", sans-serif;
    letter-spacing: .22em;
}

.storybook.world-camera-ready .world-object--calendar strong {
    display: block;
    margin-top: 19px;
    font: 500 112px/.72 "Cormorant Garamond", serif;
}

.storybook.world-camera-ready .world-object--calendar i {
    display: block;
    margin-top: 28px;
    color: var(--muted-gold);
    font: 500 15px/1 "Cormorant Garamond", serif;
    letter-spacing: .2em;
}

/* Event invitation stack. */
.storybook.world-camera-ready .world-object--event {
    left: 48%;
    top: 62%;
    width: 360px;
    height: 310px;
}

.storybook.world-camera-ready .world-invitation {
    position: absolute;
    width: 245px;
    height: 285px;
    padding: 40px 30px;
    box-sizing: border-box;
    border: 1px solid rgba(181, 154, 98, .45);
    background: #f9f4e9;
    box-shadow: 0 22px 35px rgba(36, 51, 45, .12);
}

.storybook.world-camera-ready .world-invitation--back {
    right: 6px;
    top: 4px;
    transform: rotate(8deg);
}

.storybook.world-camera-ready .world-invitation--front {
    left: 8px;
    top: 16px;
    transform: rotate(-7deg);
}

.storybook.world-camera-ready .world-invitation small {
    color: var(--muted-gold);
    font: 500 9px/1 "Poppins", sans-serif;
    letter-spacing: .2em;
}

.storybook.world-camera-ready .world-invitation i {
    position: absolute;
    left: 50%;
    top: 46%;
    color: var(--deep-emerald);
    font: 500 40px/1 "Cormorant Garamond", serif;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.storybook.world-camera-ready .world-wax-seal {
    position: absolute;
    z-index: 4;
    left: 48%;
    top: 49%;
    width: 58px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: #f7f0dd;
    border-radius: 50%;
    background: var(--muted-emerald);
    box-shadow: 0 0 0 7px rgba(181, 154, 98, .2);
    font: 500 12px/1 "Cormorant Garamond", serif;
    transform: translate(-50%, -50%);
}

/* Folded location map. */
.storybook.world-camera-ready .world-object--map {
    left: 38%;
    top: 70%;
    width: 330px;
    height: 245px;
    overflow: hidden;
    border: 1px solid rgba(181, 154, 98, .42);
    background: #ebe9df;
    box-shadow: 0 20px 38px rgba(36, 51, 45, .12);
    --object-rotate: -5deg;
}

.storybook.world-camera-ready .world-map-fold {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34%;
    border-right: 1px solid rgba(44, 81, 72, .15);
    background: rgba(167, 176, 163, .18);
    transform: skewY(-4deg);
}

.storybook.world-camera-ready .world-map-fold--one { left: 0; }
.storybook.world-camera-ready .world-map-fold--two { right: 0; transform: skewY(5deg); }

.storybook.world-camera-ready .world-object--map svg {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    fill: none;
    stroke: var(--muted-gold);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.storybook.world-camera-ready .world-map-pin {
    position: absolute;
    left: 68%;
    top: 29%;
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50% 50% 50% 0;
    background: var(--deep-emerald);
    transform: rotate(-45deg);
}

/* Empty, intentional photo-space; no invented photography. */
.storybook.world-camera-ready .world-object--gallery {
    left: 62%;
    top: 77%;
    width: 360px;
    height: 300px;
}

.storybook.world-camera-ready .world-photo {
    position: absolute;
    width: 190px;
    height: 235px;
    padding: 14px 14px 48px;
    box-sizing: border-box;
    background: #faf8f1;
    box-shadow: 0 17px 30px rgba(36, 51, 45, .13);
}

.storybook.world-camera-ready .world-photo i {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 58% 40%, rgba(181, 154, 98, .3), transparent 18%),
        linear-gradient(145deg, rgba(44, 81, 72, .22), rgba(167, 176, 163, .1));
}

.storybook.world-camera-ready .world-photo--one { left: 0; top: 28px; transform: rotate(-13deg); }
.storybook.world-camera-ready .world-photo--two { left: 89px; top: 0; transform: rotate(2deg); }
.storybook.world-camera-ready .world-photo--three { right: 0; top: 37px; transform: rotate(12deg); }

/* Sealed decorative gift envelope. */
.storybook.world-camera-ready .world-object--gift {
    left: 38%;
    top: 82%;
    width: 250px;
    height: 165px;
    overflow: hidden;
    border: 1px solid rgba(181, 154, 98, .44);
    background: #ede4d6;
    box-shadow: 0 20px 32px rgba(36, 51, 45, .12);
    --object-rotate: 7deg;
}

.storybook.world-camera-ready .world-envelope-flap {
    position: absolute;
    left: 50%;
    top: -81px;
    width: 194px;
    height: 194px;
    border: 1px solid rgba(181, 154, 98, .38);
    background: #f4ecdf;
    transform: translateX(-50%) rotate(45deg);
}

.storybook.world-camera-ready .world-envelope-seal {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 68%;
    width: 52px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--paper-ivory);
    border-radius: 50%;
    background: var(--muted-emerald);
    font: 500 10px/1 "Cormorant Garamond", serif;
    transform: translate(-50%, -50%);
}

/* RSVP / wishes correspondence object. */
.storybook.world-camera-ready .world-object--letters {
    left: 55%;
    top: 89.5%;
    width: 340px;
    height: 270px;
}

.storybook.world-camera-ready .world-letter {
    position: absolute;
    width: 230px;
    height: 260px;
    border: 1px solid rgba(181, 154, 98, .38);
    background: #faf7ef;
    box-shadow: 0 18px 30px rgba(36, 51, 45, .1);
}

.storybook.world-camera-ready .world-letter--back { right: 7px; top: 0; transform: rotate(9deg); }
.storybook.world-camera-ready .world-letter--front { left: 10px; top: 8px; padding: 55px 31px; box-sizing: border-box; transform: rotate(-6deg); }

.storybook.world-camera-ready .world-letter--front i {
    display: block;
    height: 1px;
    margin-bottom: 28px;
    background: rgba(44, 81, 72, .23);
}

.storybook.world-camera-ready .world-pen {
    position: absolute;
    right: 12px;
    bottom: 2px;
    width: 9px;
    height: 215px;
    border-radius: 10px;
    background: var(--deep-emerald);
    transform: rotate(31deg);
    transform-origin: bottom;
}

/* Quiet Quranic object. */
.storybook.world-camera-ready .world-object--quran {
    left: 48%;
    top: 94%;
    width: 380px;
    height: 250px;
}

.storybook.world-camera-ready .world-book-page {
    position: absolute;
    top: 15px;
    width: 49%;
    height: 220px;
    border: 1px solid rgba(181, 154, 98, .42);
    background:
        repeating-linear-gradient(180deg, transparent 0 21px, rgba(44, 81, 72, .1) 22px),
        #f8f2e5;
    box-shadow: 0 22px 35px rgba(36, 51, 45, .1);
}

.storybook.world-camera-ready .world-book-page--left { left: 2%; border-radius: 7px 0 0 13px; transform: skewY(-3deg); }
.storybook.world-camera-ready .world-book-page--right { right: 2%; border-radius: 0 7px 13px 0; transform: skewY(3deg); }

.storybook.world-camera-ready .world-book-spine {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 18px;
    width: 2px;
    height: 214px;
    background: linear-gradient(transparent, var(--muted-gold), transparent);
}

.storybook.world-camera-ready .world-quran-mark {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 43%;
    color: var(--muted-gold);
    font: 400 40px/1 "Cormorant Garamond", serif;
    transform: translate(-50%, -50%);
}

/* Mobile-only closing constellation enables a readable pullback. */
.storybook.world-camera-ready .world-object--closing {
    left: 50%;
    top: 97.5%;
    width: 460px;
    height: 390px;
}

.storybook.world-camera-ready .world-closing-orbit {
    position: absolute;
    inset: 13px 32px;
    border: 1px solid rgba(181, 154, 98, .42);
    border-radius: 50%;
    background: rgba(167, 176, 163, .13);
}

.storybook.world-camera-ready .world-closing-couple {
    position: absolute;
    left: 50%;
    bottom: 67px;
    width: 126px;
    height: 174px;
    border-radius: 55% 55% 20% 20%;
    background: var(--deep-emerald);
    transform: translateX(-50%);
}

.storybook.world-camera-ready .world-closing-paper {
    position: absolute;
    width: 94px;
    height: 125px;
    background: #f8f2e6;
    box-shadow: 0 10px 20px rgba(36, 51, 45, .1);
}

.storybook.world-camera-ready .world-closing-paper--one { left: 57px; top: 111px; transform: rotate(-13deg); }
.storybook.world-camera-ready .world-closing-paper--two { right: 55px; top: 94px; transform: rotate(11deg); }

.storybook.world-camera-ready .world-object--closing strong {
    position: absolute;
    left: 50%;
    bottom: 23px;
    color: var(--muted-gold);
    font: 500 24px/1 "Cormorant Garamond", serif;
    letter-spacing: .16em;
    transform: translateX(-50%);
}

.storybook.world-camera-ready .world-object--closing em {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
}

.storybook.world-camera-ready .world-foreground-leaf {
    position: absolute;
    width: 230px;
    height: auto;
    overflow: visible;
    fill: rgba(44, 81, 72, .2);
}

.storybook.world-camera-ready .world-foreground-leaf path:first-child {
    fill: none;
    stroke: rgba(181, 154, 98, .72);
    stroke-width: 2;
}

.storybook.world-camera-ready .world-foreground-leaf--one {
    left: -50px;
    top: 17%;
    transform: rotate(7deg);
}

.storybook.world-camera-ready .world-foreground-leaf--two {
    right: -65px;
    top: 65%;
    transform: rotate(188deg);
}

/* Narrative layer: semantic content moves through one persistent stage. */
.storybook.world-camera-ready .world-narrative {
    position: relative;
    z-index: 8;
    margin-top: -100svh;
}

.storybook.world-camera-ready .world-shot {
    position: relative;
    min-height: 108vh;
    min-height: 108svh;
    box-sizing: border-box;
}

.storybook.world-camera-ready .world-shot--establish,
.storybook.world-camera-ready .world-gallery,
.storybook.world-camera-ready .world-shot--quran,
.storybook.world-camera-ready .world-shot--date,
.storybook.world-camera-ready .world-shot--rsvp,
.storybook.world-camera-ready .world-shot--wishes,
.storybook.world-camera-ready .world-shot--closing {
    display: flex;
    align-items: center;
    background: transparent;
}

.storybook.world-camera-ready .world-shot--establish {
    justify-content: center;
    padding: 90px var(--story-safe-right);
}

.storybook.world-camera-ready .world-shot__content,
.storybook.world-camera-ready .world-shot > .response-inner,
.storybook.world-camera-ready .world-shot > .hero-content,
.storybook.world-camera-ready .world-location,
.storybook.world-camera-ready .world-shot--story .timeline-content,
.storybook.world-camera-ready .story-person__copy,
.storybook.world-camera-ready .story-quran__copy,
.storybook.world-camera-ready .world-gallery__caption {
    opacity: .12;
    transition: opacity .48s ease, transform .58s cubic-bezier(.22, .61, .36, 1);
}

.storybook.world-camera-ready .world-shot.world-shot-active > .world-shot__content,
.storybook.world-camera-ready .world-shot.world-shot-active > .response-inner,
.storybook.world-camera-ready .world-shot.world-shot-active > .hero-content,
.storybook.world-camera-ready .world-shot.world-shot-active.world-location,
.storybook.world-camera-ready .world-shot.world-shot-active .timeline-content,
.storybook.world-camera-ready .world-shot.world-shot-active .story-person__copy,
.storybook.world-camera-ready .world-shot.world-shot-active .story-quran__copy,
.storybook.world-camera-ready .world-shot.world-shot-active .world-gallery__caption {
    opacity: 1;
    transform: none;
}

.storybook.world-camera-ready .world-cluster {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Couple narrative: identity appears beside the camera focus. */
.storybook.world-camera-ready .story-couple::before,
.storybook.world-camera-ready .story-couple::after,
.storybook.world-camera-ready .story-couple__botanical,
.storybook.world-camera-ready .story-couple__handoff,
.storybook.world-camera-ready .story-couple__ampersand,
.storybook.world-camera-ready .story-person__portrait {
    display: none;
}

.storybook.world-camera-ready .story-couple__intro {
    width: 100%;
    max-width: none;
    min-height: 110svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    text-align: left;
}

.storybook.world-camera-ready .story-couple__intro > * {
    width: min(100%, 540px);
    margin-left: 0;
    margin-right: 0;
}

.storybook.world-camera-ready .story-couple__spread {
    display: block;
    width: 100%;
    max-width: none;
}

.storybook.world-camera-ready .story-couple .story-person {
    width: 100%;
    max-width: none;
    min-height: 110svh;
    display: flex;
    align-items: center;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    box-sizing: border-box;
}

.storybook.world-camera-ready .story-couple .story-person--ilham {
    justify-content: flex-end;
    margin: 0;
}

.storybook.world-camera-ready .story-couple .story-person__copy {
    width: min(74%, 420px);
    margin: 0;
    padding: 24px 20px;
    background: linear-gradient(90deg, var(--world-panel), rgba(247, 245, 239, .32) 78%, transparent);
}

.storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy {
    margin-left: auto;
}

.storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy {
    margin-right: auto;
    text-align: left;
    background: linear-gradient(270deg, var(--world-panel), rgba(247, 245, 239, .32) 78%, transparent);
}

/* Story objects are spatial chapters, not a timeline. */
.storybook.world-camera-ready .world-cluster--story {
    padding: 0;
    color: var(--primary-ink);
    text-align: left;
    background: transparent;
}

.storybook.world-camera-ready .world-cluster--story > .story-subtitle,
.storybook.world-camera-ready .world-cluster--story > .story-title,
.storybook.world-camera-ready .world-cluster--story > .story-text,
.storybook.world-camera-ready .world-cluster--story > .story-verse {
    display: none;
}

.storybook.world-camera-ready .world-cluster--story .timeline {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.storybook.world-camera-ready .world-cluster--story .timeline::before,
.storybook.world-camera-ready .world-cluster--story .timeline-item::before,
.storybook.world-camera-ready .world-cluster--story .timeline-item::after {
    content: none;
    display: none;
}

.storybook.world-camera-ready .world-cluster--story .timeline-item {
    width: 100%;
    max-width: none;
    min-height: 108svh;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    box-sizing: border-box;
    text-align: left;
    background: transparent;
}

.storybook.world-camera-ready .world-cluster--story .timeline-date {
    position: absolute;
    z-index: 0;
    left: var(--story-safe-left);
    top: 17%;
    color: rgba(181, 154, 98, .45);
    font: 500 clamp(88px, 25vw, 150px)/.75 "Cormorant Garamond", serif;
    letter-spacing: -.04em;
}

.storybook.world-camera-ready .world-cluster--story .timeline-content {
    position: relative;
    z-index: 2;
    width: min(83%, 560px);
    margin-left: auto;
    padding: 27px 20px 28px;
    background: linear-gradient(90deg, var(--world-panel), rgba(247, 245, 239, .44) 83%, transparent);
}

.storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(even) .timeline-content {
    margin-left: 0;
    margin-right: auto;
    background: linear-gradient(270deg, var(--world-panel), rgba(247, 245, 239, .44) 83%, transparent);
}

.storybook.world-camera-ready .world-cluster--story .timeline-content h3 {
    color: var(--deep-emerald);
    font: 500 clamp(36px, 9.5vw, 52px)/1 "Cormorant Garamond", serif;
}

.storybook.world-camera-ready .world-cluster--story .timeline-content p {
    color: var(--secondary-ink);
    font: 300 13px/1.9 "Poppins", sans-serif;
}

/* Date and countdown float over the calendar focus. */
.storybook.world-camera-ready .world-shot--date {
    justify-content: flex-end;
    min-height: 110svh;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    color: var(--primary-ink);
    text-align: left;
    background: transparent;
}

.storybook.world-camera-ready .world-shot--date .hero-atmosphere,
.storybook.world-camera-ready .world-shot--date .hero-scroll {
    display: none;
}

.storybook.world-camera-ready .world-shot--date .hero-content {
    width: min(79%, 470px);
    margin: 0;
    padding: 28px 21px;
    background: linear-gradient(90deg, var(--world-panel), rgba(247, 245, 239, .42) 85%, transparent);
}

.storybook.world-camera-ready .world-shot--date .hero-kicker,
.storybook.world-camera-ready .world-shot--date .hero-date,
.storybook.world-camera-ready .world-shot--date .hero-message {
    color: var(--secondary-ink);
}

.storybook.world-camera-ready .world-shot--date .hero-names {
    color: var(--deep-emerald);
}

.storybook.world-camera-ready .world-shot--date .hero-countdown {
    margin-left: 0;
}

/* Event invitation and location map are two camera stops. */
.storybook.world-camera-ready .world-cluster--event {
    padding: 0;
    color: var(--primary-ink);
    background: transparent;
}

.storybook.world-camera-ready .world-cluster--event > .event-subtitle,
.storybook.world-camera-ready .world-cluster--event > .event-title {
    display: none;
}

.storybook.world-camera-ready .world-cluster--event .event-wrapper {
    width: 100%;
    max-width: none;
    min-height: 118svh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 22px;
    margin: 0;
    padding: 100px var(--story-safe-right) 100px var(--story-safe-left);
    box-sizing: border-box;
}

.storybook.world-camera-ready .world-cluster--event .event-card {
    width: min(82%, 430px);
    margin: 0 0 0 auto;
    padding: 28px 24px;
    color: var(--primary-ink);
    border: 1px solid rgba(181, 154, 98, .38);
    border-radius: 2px;
    background: rgba(249, 245, 235, .92);
    box-shadow: 13px 16px 0 rgba(44, 81, 72, .1);
}

.storybook.world-camera-ready .world-cluster--event .event-card:nth-child(2) {
    margin-right: auto;
    margin-left: 0;
    transform: translateY(-8px) rotate(.7deg);
}

.storybook.world-camera-ready .world-cluster--event .event-card .location {
    display: none;
}

.storybook.world-camera-ready .world-location {
    min-height: 108svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    box-sizing: border-box;
    background: transparent;
}

.storybook.world-camera-ready .world-location > * {
    width: min(78%, 480px);
}

.storybook.world-camera-ready .world-location h3 {
    margin: 0;
    color: var(--deep-emerald);
    font: 500 clamp(40px, 10vw, 59px)/.96 "Cormorant Garamond", serif;
}

.storybook.world-camera-ready .world-location > p:not(.world-kicker) {
    margin: 24px 0 0;
    color: var(--secondary-ink);
    font: 300 13px/1.9 "Poppins", sans-serif;
}

.storybook.world-camera-ready .world-location .maps-btn {
    width: auto;
    min-width: 148px;
    min-height: 44px;
    margin-top: 28px;
}

/* Gallery and sealed gift are spatial pauses. */
.storybook.world-camera-ready .world-gallery {
    justify-content: flex-start;
    min-height: 90svh;
    padding: 90px var(--story-safe-right) 90px var(--story-safe-left);
    text-align: left;
    background: transparent;
}

.storybook.world-camera-ready .world-gallery__caption {
    width: min(72%, 420px);
}

.storybook.world-camera-ready .world-gallery__caption > span {
    margin-left: 0;
}

.storybook.world-camera-ready .world-gift-passage {
    display: block;
    min-height: 48svh;
}

/* Forms become correspondence sheets while keeping controls usable. */
.storybook.world-camera-ready .world-shot--rsvp,
.storybook.world-camera-ready .world-shot--wishes {
    justify-content: center;
    min-height: 132svh;
    padding: 100px var(--story-safe-right);
    color: var(--primary-ink);
    background: transparent;
}

.storybook.world-camera-ready .world-shot--rsvp > .response-inner,
.storybook.world-camera-ready .world-shot--wishes > .response-inner {
    width: min(100%, 560px);
    margin: 0;
    padding: 42px clamp(22px, 6vw, 48px);
    box-sizing: border-box;
    border: 1px solid rgba(181, 154, 98, .35);
    border-radius: 2px;
    background: rgba(249, 246, 238, .95);
    box-shadow: 18px 22px 0 rgba(44, 81, 72, .1), 0 28px 55px rgba(36, 51, 45, .1);
}

.storybook.world-camera-ready .world-shot--rsvp input,
.storybook.world-camera-ready .world-shot--rsvp select,
.storybook.world-camera-ready .world-shot--wishes input,
.storybook.world-camera-ready .world-shot--wishes textarea,
.storybook.world-camera-ready .world-shot--rsvp button,
.storybook.world-camera-ready .world-shot--wishes button {
    min-height: 44px;
}

/* Quranic slowdown and closing pullback. */
.storybook.world-camera-ready .world-shot--quran {
    justify-content: flex-start;
    min-height: 118svh;
    padding: 120px var(--story-safe-right) 140px var(--story-safe-left);
    color: var(--primary-ink);
    text-align: left;
    background: transparent;
}

.storybook.world-camera-ready .world-shot--quran::before,
.storybook.world-camera-ready .world-shot--quran .story-quran__art,
.storybook.world-camera-ready .world-shot--quran .story-quran__handoff {
    display: none;
}

.storybook.world-camera-ready .world-shot--quran .story-quran__copy {
    width: min(83%, 680px);
    margin: 0;
    padding: 32px 20px;
    background: linear-gradient(90deg, rgba(247, 245, 239, .95), rgba(247, 245, 239, .48) 82%, transparent);
}

.storybook.world-camera-ready .world-shot--quran blockquote {
    font-size: clamp(30px, 8vw, 46px);
}

.storybook.world-camera-ready .world-shot--closing {
    justify-content: center;
    min-height: 125svh;
    padding: 120px var(--story-safe-right);
    color: var(--paper-ivory);
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(18, 53, 47, .15) 62%, rgba(18, 53, 47, .92) 100%);
}

.storybook.world-camera-ready .world-shot--closing > .response-inner {
    width: min(100%, 620px);
    margin-top: 42svh;
    color: var(--paper-ivory);
    text-shadow: 0 2px 18px rgba(18, 53, 47, .26);
}

.storybook.world-camera-ready .world-shot--closing .closing-message,
.storybook.world-camera-ready .world-shot--closing .closing-salam {
    color: var(--paper-ivory);
}

.storybook.world-camera-ready .world-legacy-merged {
    display: none;
}

/* Tablet and desktop use a compact world with a looping camera path. */
@media (min-width: 900px) {
    .storybook.world-camera-ready .world-canvas {
        width: 2400px;
        height: 1700px;
        background:
            radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .86), transparent 22%),
            radial-gradient(circle at 18% 53%, rgba(167, 176, 163, .25), transparent 16%),
            radial-gradient(circle at 80% 41%, rgba(44, 81, 72, .15), transparent 17%),
            linear-gradient(145deg, #f7f5ee 0%, #ecece5 58%, #f5f0e5 100%);
    }

    .storybook.world-camera-ready .world-thread--mobile { display: none; }
    .storybook.world-camera-ready .world-thread--desktop { display: block; }

    .storybook.world-camera-ready .world-haze--one { left: 30%; top: 11%; width: 39%; }
    .storybook.world-camera-ready .world-haze--two { right: -5%; top: 35%; width: 48%; }
    .storybook.world-camera-ready .world-haze--three { left: -6%; top: 46%; width: 50%; }

    .storybook.world-camera-ready .world-object--couple { left: 50%; top: 35%; width: 500px; height: 420px; }
    .storybook.world-camera-ready .world-object--puteri { left: 37%; top: 32%; width: 320px; height: 400px; }
    .storybook.world-camera-ready .world-object--ilham { left: 62%; top: 38%; width: 320px; height: 400px; }
    .storybook.world-camera-ready .world-object--2017 { left: 78%; top: 68%; }
    .storybook.world-camera-ready .world-object--2025 { left: 58%; top: 78%; }
    .storybook.world-camera-ready .world-object--2026 { left: 34%; top: 73%; }
    .storybook.world-camera-ready .world-object--calendar { left: 18%; top: 56%; }
    .storybook.world-camera-ready .world-object--event { left: 14%; top: 30%; }
    .storybook.world-camera-ready .world-object--map { left: 30%; top: 14%; }
    .storybook.world-camera-ready .world-object--gallery { left: 52%; top: 13%; }
    .storybook.world-camera-ready .world-object--gift { left: 72%; top: 16%; }
    .storybook.world-camera-ready .world-object--letters { left: 84%; top: 32%; }
    .storybook.world-camera-ready .world-object--quran { left: 82%; top: 57%; }
    .storybook.world-camera-ready .world-object--closing { display: none; }

    .storybook.world-camera-ready .world-foreground-leaf--one { left: 3%; top: 28%; width: 310px; }
    .storybook.world-camera-ready .world-foreground-leaf--two { right: 2%; top: 55%; width: 340px; }

    .storybook.world-camera-ready .world-shot--establish .world-shot__content {
        width: min(46vw, 600px);
    }

    .storybook.world-camera-ready .story-couple__intro {
        padding-left: max(8vw, var(--story-safe-left));
    }

    .storybook.world-camera-ready .story-couple .story-person__copy,
    .storybook.world-camera-ready .world-cluster--story .timeline-content,
    .storybook.world-camera-ready .world-shot--date .hero-content,
    .storybook.world-camera-ready .world-location > * {
        width: min(38vw, 520px);
    }

    .storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy,
    .storybook.world-camera-ready .world-shot--date .hero-content {
        margin-right: 6vw;
    }

    .storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy,
    .storybook.world-camera-ready .world-location > * {
        margin-left: 6vw;
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(odd) .timeline-content {
        margin-right: 6vw;
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(even) .timeline-content {
        margin-left: 6vw;
    }

    .storybook.world-camera-ready .world-cluster--event .event-wrapper {
        grid-template-columns: repeat(2, minmax(0, 380px));
        justify-content: end;
        gap: 28px;
        padding-inline: 8vw;
    }

    .storybook.world-camera-ready .world-cluster--event .event-card,
    .storybook.world-camera-ready .world-cluster--event .event-card:nth-child(2) {
        width: 100%;
        margin: 0;
    }

    .storybook.world-camera-ready .world-location {
        padding-left: 10vw;
    }

    .storybook.world-camera-ready .world-gallery {
        padding-left: 12vw;
    }

    .storybook.world-camera-ready .world-shot--rsvp {
        justify-content: flex-end;
        padding-right: 9vw;
    }

    .storybook.world-camera-ready .world-shot--wishes {
        justify-content: flex-start;
        padding-left: 9vw;
    }

    .storybook.world-camera-ready .world-shot--quran {
        justify-content: flex-start;
        padding-left: 8vw;
    }

    .storybook.world-camera-ready .world-shot--quran .story-quran__copy {
        width: min(48vw, 700px);
    }
}

@media (min-width: 1366px) {
    .storybook.world-camera-ready .world-cluster--event .event-wrapper {
        padding-right: 10vw;
    }

    .storybook.world-camera-ready .world-shot--rsvp {
        padding-right: 12vw;
    }

    .storybook.world-camera-ready .world-shot--wishes {
        padding-left: 12vw;
    }
}

@media (max-width: 429px) {
    .storybook.world-camera-ready .world-canvas {
        width: 700px;
    }

    .storybook.world-camera-ready .story-couple__intro,
    .storybook.world-camera-ready .story-couple .story-person,
    .storybook.world-camera-ready .world-cluster--story .timeline-item,
    .storybook.world-camera-ready .world-shot--date,
    .storybook.world-camera-ready .world-cluster--event .event-wrapper,
    .storybook.world-camera-ready .world-location,
    .storybook.world-camera-ready .world-gallery,
    .storybook.world-camera-ready .world-shot--quran {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .storybook.world-camera-ready .story-couple .person h3,
    .storybook.world-camera-ready .world-cluster--story .timeline-content h3 {
        font-size: clamp(34px, 10vw, 45px);
    }

    .storybook.world-camera-ready .world-shot--rsvp,
    .storybook.world-camera-ready .world-shot--wishes {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Static editorial fallback for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .storybook .world-stage,
    .storybook.world-camera-ready .world-stage {
        display: none !important;
    }

    .storybook.world-camera-ready .world-narrative {
        margin-top: 0;
    }

    .storybook.world-camera-ready .world-shot,
    .storybook.world-camera-ready .story-couple__intro,
    .storybook.world-camera-ready .story-couple .story-person,
    .storybook.world-camera-ready .world-cluster--story .timeline-item,
    .storybook.world-camera-ready .world-cluster--event .event-wrapper,
    .storybook.world-camera-ready .world-location {
        min-height: auto;
    }

    .storybook.world-camera-ready .world-shot__content,
    .storybook.world-camera-ready .world-shot > .response-inner,
    .storybook.world-camera-ready .world-shot > .hero-content,
    .storybook.world-camera-ready .world-location,
    .storybook.world-camera-ready .world-shot--story .timeline-content,
    .storybook.world-camera-ready .story-person__copy,
    .storybook.world-camera-ready .story-quran__copy,
    .storybook.world-camera-ready .world-gallery__caption {
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Final focus pass: each camera stop keeps the world present without letting
   neighbouring objects compete with the active chapter. */
.storybook.world-camera-ready .world-stage:not([data-active-shot="couple"]) .world-object {
    opacity: .14;
    filter: saturate(.42);
}

.storybook.world-camera-ready .world-stage:not([data-active-shot="couple"]) .world-object.is-world-focus {
    opacity: 1;
    filter: saturate(1) drop-shadow(0 22px 28px rgba(18, 53, 47, .12));
}

.storybook.world-camera-ready .world-stage[data-active-shot="quran"]::after {
    opacity: .48;
}

.storybook.world-camera-ready .world-stage[data-active-shot="quran"] .world-object:not(.is-world-focus) {
    opacity: .06;
}

.storybook.world-camera-ready .world-shot--establish .world-shot__content {
    isolation: isolate;
    padding: clamp(24px, 6vw, 42px) clamp(18px, 5vw, 38px);
}

.storybook.world-camera-ready .world-shot--establish .world-shot__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8% -5%;
    border: 1px solid rgba(181, 154, 98, .18);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(247, 245, 239, .97) 0 48%, rgba(247, 245, 239, .84) 68%, rgba(247, 245, 239, 0) 82%);
}

.storybook.world-camera-ready .world-shot--establish h2 {
    text-shadow: 0 1px 18px rgba(247, 245, 239, .9);
}

/* Establishing title: compact wedding identity in the portrait negative space. */
.storybook .world-shot--establish .establishing-eyebrow {
    margin: 0;
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.storybook .world-shot--establish .establishing-names {
    margin: 14px 0 16px;
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(3rem, 6.4vw, 5.125rem);
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.045em;
    white-space: nowrap;
}

.storybook .world-shot--establish .establishing-names i {
    display: inline-block;
    margin-inline: .04em;
    color: var(--muted-gold);
    font-family: var(--font-script);
    font-weight: 400;
    transform: translateY(.04em);
}

.storybook .world-shot--establish .establishing-date {
    margin: 0;
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-size: clamp(.76rem, .45vw + .68rem, .94rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .2em;
}

@media (max-width: 899px) {
    .storybook .world-shot--establish .world-shot__content {
        width: min(90vw, 560px);
        padding-inline: clamp(16px, 5vw, 26px);
    }

    .storybook .world-shot--establish .establishing-eyebrow {
        font-size: clamp(.92rem, 4vw, 1.08rem);
        letter-spacing: .16em;
    }

    .storybook .world-shot--establish .establishing-names {
        margin-block: 12px 14px;
        font-size: clamp(3rem, 13vw, 3.55rem);
        letter-spacing: -.05em;
    }
}

.storybook.world-camera-ready .story-couple .story-person__copy,
.storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy,
.storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy,
.storybook.world-camera-ready .world-cluster--story .timeline-content,
.storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(even) .timeline-content,
.storybook.world-camera-ready .world-shot--date .hero-content,
.storybook.world-camera-ready .world-shot--quran .story-quran__copy {
    border: 1px solid rgba(181, 154, 98, .14);
    background: rgba(247, 245, 239, .955);
    box-shadow: 0 20px 48px rgba(36, 51, 45, .08);
}

.storybook.world-camera-ready .world-shot--closing > .response-inner {
    padding: 30px clamp(18px, 5vw, 36px);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(18, 53, 47, .8), rgba(18, 53, 47, .36) 58%, transparent 76%);
}

@media (min-width: 900px) {
    .storybook.world-camera-ready .story-couple .story-person__copy,
    .storybook.world-camera-ready .world-cluster--story .timeline-content,
    .storybook.world-camera-ready .world-shot--date .hero-content,
    .storybook.world-camera-ready .world-shot--quran .story-quran__copy {
        background: rgba(247, 245, 239, .94);
    }
}

/* ==========================================================
   Typography + text readability pass
   The camera remains on the world layer; semantic text keeps a
   stable, unscaled reading plane above it.
========================================================== */
.storybook {
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Poppins", Arial, sans-serif;
    --font-script: "Great Vibes", cursive;
    --font-arabic: "Noto Naskh Arabic", Tahoma, Arial, serif;
    --type-body: clamp(.95rem, .28vw + .89rem, 1.075rem);
    --type-info: clamp(1rem, .34vw + .92rem, 1.18rem);
    --type-label: clamp(.82rem, .18vw + .78rem, .94rem);
    --type-scene: clamp(2.25rem, 4.5vw, 4.8rem);
    --type-person: clamp(2.5rem, 4.8vw, 4.75rem);
    --type-year: clamp(3.5rem, 8vw, 7.5rem);
    --gold-ink: #80683f;
    --gold-on-dark: #d5c18f;
    --readable-secondary: #56635d;
    --story-safe-left: max(24px, env(safe-area-inset-left));
    --story-safe-right: max(24px, env(safe-area-inset-right));
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Opening: preserve the approved composition while promoting essential copy. */
.storybook .story-opening .cover-eyebrow {
    color: rgba(247, 245, 239, .76);
    font-size: clamp(.7rem, .4vw + .62rem, .78rem);
    font-weight: 500;
    letter-spacing: .26em;
}

.storybook .story-opening .cover-names {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 17vw, 7rem);
    font-weight: 600;
    line-height: .86;
    letter-spacing: .035em;
}

.storybook .story-opening .cover-ampersand,
.storybook .closing #closingNames span,
.storybook .world-signature i {
    font-family: var(--font-script);
}

.storybook .story-opening .cover-date {
    color: var(--gold-on-dark);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .17em;
}

.storybook .story-opening .cover-recipient-label {
    color: rgba(247, 245, 239, .82);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .015em;
}

.storybook .story-opening .guest-name {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 7vw, 2.75rem);
    font-weight: 600;
    line-height: 1.12;
}

.storybook .story-opening .open-button {
    min-height: 48px;
    padding-inline: 24px;
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .11em;
}

/* Welcome: all invitation copy sits at body-reading size. */
.storybook .story-welcome__chapter,
.storybook .story-scene-label,
.storybook .world-kicker,
.storybook .response-kicker {
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .14em;
}

.storybook .story-welcome__to {
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
}

.storybook .story-welcome__guest {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 9vw, 4.4rem);
    font-weight: 600;
    line-height: 1.02;
}

.storybook .story-welcome__bismillah,
.storybook .story-couple .couple-subtitle,
.storybook .islamic-bismillah {
    font-family: var(--font-arabic);
    font-weight: 500;
    line-height: 1.8;
}

.storybook .story-welcome__salam {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.25;
}

.storybook .story-welcome__message,
.storybook .story-couple .couple-text {
    max-width: 55ch;
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.72;
}

/* The same hierarchy remains available in reduced-motion and no-JS flows. */
.storybook .story .story-title {
    font-family: var(--font-display);
    font-size: var(--type-scene);
    font-weight: 600;
    line-height: 1.05;
}

.storybook .story .story-text {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    font-weight: 500;
    line-height: 1.5;
}

.storybook .story .timeline-date {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5.25rem);
    font-weight: 600;
    line-height: 1;
}

.storybook .story .timeline-content h3 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 600;
    line-height: 1.08;
}

.storybook .story .timeline-content p {
    max-width: 55ch;
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.72;
}

/* Couple identities: name first, then legible family information. */
.storybook .story-couple .couple-title {
    font-family: var(--font-display);
    font-size: var(--type-scene);
    font-weight: 600;
    line-height: 1;
}

.storybook .story-couple .story-person__role,
.storybook .story-couple .parent-label {
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
}

.storybook .story-couple .person h3 {
    max-width: 14ch;
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: var(--type-person);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.025em;
}

.storybook .story-couple .parent {
    margin-top: 24px;
}

.storybook .story-couple .parent-names {
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
}

.storybook .story-couple .parent-ampersand {
    color: var(--gold-ink);
    font-family: var(--font-script);
    font-size: 1.45em;
    line-height: 1.1;
}

/* Spatial chapters: large years remain separate from comfortable story copy. */
.storybook.world-camera-ready .world-cluster--story .timeline-date {
    color: rgba(128, 104, 63, .7);
    font-family: var(--font-display);
    font-size: var(--type-year);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.025em;
}

.storybook.world-camera-ready .world-cluster--story .timeline-content {
    max-width: 610px;
}

.storybook.world-camera-ready .world-cluster--story .timeline-content h3 {
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: var(--type-scene);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.storybook.world-camera-ready .world-cluster--story .timeline-content p {
    max-width: 55ch;
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.72;
}

/* Date and countdown: numerical display, informational labels in Poppins. */
.storybook.world-camera-ready .world-shot--date .hero-names {
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(2.65rem, 7vw, 5.4rem);
    font-weight: 600;
    line-height: 1;
    white-space: normal;
    text-wrap: balance;
}

.storybook.world-camera-ready .world-shot--date .hero-message {
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
}

.storybook.world-camera-ready .world-shot--date .hero-time > span {
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.2vw, 3.6rem);
    font-weight: 600;
}

.storybook.world-camera-ready .world-shot--date .hero-time small {
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .08em;
}

.storybook.world-camera-ready .world-shot--date .hero-date {
    color: var(--primary-ink);
    font-family: var(--font-body);
    font-size: var(--type-info);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
}

.storybook .save-date,
.storybook .event .maps-btn {
    min-height: 46px;
    color: var(--deep-emerald);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
}

/* Event and location: critical date/time/address information is never microcopy. */
.storybook .event .event-card h3,
.storybook.world-camera-ready .world-location h3 {
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 4.2vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.storybook .event .event-card .event-day {
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .11em;
}

.storybook .event .event-card .event-date,
.storybook .event .event-card .event-time {
    color: var(--primary-ink);
    font-family: var(--font-body);
    font-size: var(--type-info);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0;
}

.storybook.world-camera-ready .world-location > p:not(.world-kicker),
.storybook .event .location p {
    max-width: 52ch;
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
}

.storybook .world-location h3 {
    color: var(--deep-emerald);
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 4.2vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.storybook .world-location > p:not(.world-kicker) {
    max-width: 52ch;
    color: var(--readable-secondary);
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
}

/* Forms: the paper sheet is light, so every inherited foreground is reset. */
.storybook .response-section h2 {
    font-family: var(--font-display);
    font-size: var(--type-scene);
    font-weight: 600;
    line-height: 1.05;
}

.storybook .response-intro,
.storybook .response-section .local-notice,
.storybook .wish-empty,
.storybook .wish-list p,
.storybook .form-feedback {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.72;
}

.storybook .response-form label {
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 500;
    line-height: 1.5;
}

.storybook .response-section .response-button {
    min-height: 46px;
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.4;
}

.storybook.world-camera-ready .world-shot--rsvp > .response-inner,
.storybook.world-camera-ready .world-shot--wishes > .response-inner,
.storybook.world-camera-ready .world-shot--gift-configured > .response-inner {
    position: relative;
    z-index: 12;
    color: var(--primary-ink);
}

.storybook.world-camera-ready .world-shot--rsvp h2,
.storybook.world-camera-ready .world-shot--wishes h2,
.storybook.world-camera-ready .world-shot--gift-configured h2 {
    color: var(--deep-emerald);
}

.storybook.world-camera-ready .world-shot--rsvp .response-intro,
.storybook.world-camera-ready .world-shot--rsvp .local-notice,
.storybook.world-camera-ready .world-shot--rsvp label,
.storybook.world-camera-ready .world-shot--rsvp .form-feedback,
.storybook.world-camera-ready .world-shot--wishes .response-intro,
.storybook.world-camera-ready .world-shot--wishes .local-notice,
.storybook.world-camera-ready .world-shot--wishes label,
.storybook.world-camera-ready .world-shot--wishes .form-feedback,
.storybook.world-camera-ready .world-shot--wishes .wish-empty,
.storybook.world-camera-ready .world-shot--wishes .wish-list p,
.storybook.world-camera-ready .world-shot--gift-configured .response-intro {
    color: var(--readable-secondary);
}

.storybook.world-camera-ready .world-shot--rsvp .response-button,
.storybook.world-camera-ready .world-shot--wishes .response-button {
    color: var(--deep-emerald);
    border-color: var(--muted-gold);
    background: rgba(181, 154, 98, .1);
}

.storybook:not(.world-camera-ready) .rsvp .response-kicker,
.storybook:not(.world-camera-ready) .guestbook .response-kicker,
.storybook:not(.world-camera-ready) .story .story-subtitle,
.storybook:not(.world-camera-ready) .story .story-verse,
.storybook:not(.world-camera-ready) .closing footer {
    color: var(--gold-on-dark);
}

.storybook.world-camera-ready .world-shot--rsvp input:focus-visible,
.storybook.world-camera-ready .world-shot--rsvp select:focus-visible,
.storybook.world-camera-ready .world-shot--wishes input:focus-visible,
.storybook.world-camera-ready .world-shot--wishes textarea:focus-visible,
.storybook.world-camera-ready .world-shot--rsvp .response-button:focus-visible,
.storybook.world-camera-ready .world-shot--wishes .response-button:focus-visible {
    outline-color: var(--deep-emerald);
}

.storybook .wish-list time,
.storybook .closing footer {
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 500;
    line-height: 1.55;
}

/* Quranic pause and closing: generous line measure with stronger text weights. */
.storybook .story-quran blockquote {
    max-width: 23ch;
    color: var(--muted-emerald);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3.45rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -.012em;
}

.storybook .story-quran .story-quran__copy > p:last-child {
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .12em;
}

.storybook .closing-message {
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
}

.storybook .closing-salam {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.45;
}

.storybook .closing #closingNames {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.8rem);
    font-weight: 600;
    line-height: .98;
}

.storybook.world-camera-ready .world-shot--closing > .response-inner {
    position: relative;
    z-index: 12;
    text-shadow: 0 2px 18px rgba(7, 34, 29, .55);
}

.storybook.world-camera-ready .world-shot--closing .closing-message,
.storybook.world-camera-ready .world-shot--closing .closing-salam,
.storybook.world-camera-ready .world-shot--closing #closingNames {
    color: var(--paper-ivory);
}

.storybook.world-camera-ready .world-shot--closing footer {
    color: var(--gold-on-dark);
}

/* Text always owns the top reading plane; decorative world layers stay below. */
.storybook.world-camera-ready .world-shot__content,
.storybook.world-camera-ready .world-shot > .response-inner,
.storybook.world-camera-ready .world-shot > .hero-content,
.storybook.world-camera-ready .world-location,
.storybook.world-camera-ready .world-shot--story .timeline-content,
.storybook.world-camera-ready .story-person__copy,
.storybook.world-camera-ready .story-quran__copy,
.storybook.world-camera-ready .world-gallery__caption {
    position: relative;
    z-index: 12;
    filter: none;
}

/* A soft paper wash replaces hard floating cards in visually busy shots. */
.storybook.world-camera-ready .story-couple .story-person__copy,
.storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy,
.storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy,
.storybook.world-camera-ready .world-cluster--story .timeline-content,
.storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(even) .timeline-content,
.storybook.world-camera-ready .world-shot--date .hero-content,
.storybook.world-camera-ready .world-shot--quran .story-quran__copy {
    border: 0;
    background: rgba(247, 245, 239, .955);
    box-shadow: 0 0 46px 18px rgba(247, 245, 239, .76);
}

.storybook.world-camera-ready .world-location {
    background: radial-gradient(ellipse at 28% 50%, rgba(247, 245, 239, .99) 0 20%, rgba(247, 245, 239, .92) 34%, rgba(247, 245, 239, 0) 61%);
}

.storybook.world-camera-ready .world-gallery__caption {
    text-shadow: 0 1px 18px var(--paper-ivory), 0 1px 32px var(--paper-ivory);
}

.storybook.world-camera-ready .story-couple__intro {
    background: linear-gradient(90deg, rgba(247, 245, 239, .995) 0%, rgba(247, 245, 239, .97) 38%, rgba(247, 245, 239, .82) 49%, rgba(247, 245, 239, 0) 64%);
}

.storybook.world-camera-ready .story-couple__intro > * {
    position: relative;
    z-index: 12;
}

@media (max-width: 899px) {
    .storybook.world-camera-ready .story-couple .story-person {
        align-items: flex-start;
        padding-top: clamp(145px, 19svh, 175px);
    }

    .storybook.world-camera-ready .story-couple .story-person__copy {
        width: min(92%, 440px);
        padding: 26px 20px 28px;
        background: linear-gradient(180deg, rgba(247, 245, 239, .98) 0 91%, rgba(247, 245, 239, .84) 97%, rgba(247, 245, 239, 0) 100%);
    }

    .storybook.world-camera-ready .story-couple .person h3,
    .storybook.world-camera-ready .world-cluster--story .timeline-content h3 {
        font-size: clamp(2.25rem, 10.5vw, 3.15rem);
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-item {
        align-items: flex-start;
        padding-top: clamp(165px, 20svh, 188px);
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-content,
    .storybook.world-camera-ready .world-shot--date .hero-content,
    .storybook.world-camera-ready .world-shot--quran .story-quran__copy {
        width: min(100%, 680px);
        padding: 27px 20px 29px;
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-date {
        left: var(--story-safe-left);
        z-index: 11;
        top: 5%;
        text-shadow: 0 1px 20px var(--paper-ivory);
    }

    .storybook.world-camera-ready .world-cluster--event .event-card,
    .storybook.world-camera-ready .world-cluster--event .event-card:nth-child(2),
    .storybook.world-camera-ready .world-location > * {
        width: min(100%, 520px);
    }

    .storybook.world-camera-ready .world-location {
        background: radial-gradient(ellipse at 48% 50%, rgba(247, 245, 239, .99) 0 37%, rgba(247, 245, 239, .9) 53%, rgba(247, 245, 239, 0) 76%);
    }

    .storybook.world-camera-ready .story-couple__intro {
        background: radial-gradient(ellipse at 50% 42%, rgba(247, 245, 239, .99) 0 43%, rgba(247, 245, 239, .9) 58%, rgba(247, 245, 239, 0) 76%);
    }

    .storybook.world-camera-ready .world-shot--rsvp,
    .storybook.world-camera-ready .world-shot--wishes {
        padding-inline: var(--story-safe-left) var(--story-safe-right);
    }

    .storybook.world-camera-ready .world-shot--rsvp > .response-inner,
    .storybook.world-camera-ready .world-shot--wishes > .response-inner {
        padding: 36px 22px;
    }

    .storybook.world-camera-ready .world-shot--closing > .response-inner {
        margin-top: 36svh;
        padding-inline: 18px;
    }
}

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

    .storybook.world-camera-ready .story-couple .story-person__copy,
    .storybook.world-camera-ready .world-cluster--story .timeline-content,
    .storybook.world-camera-ready .world-shot--date .hero-content,
    .storybook.world-camera-ready .world-shot--quran .story-quran__copy {
        padding: 30px 28px 32px;
        background: rgba(247, 245, 239, .94);
        box-shadow: 0 0 58px 24px rgba(247, 245, 239, .7);
    }

    .storybook.world-camera-ready .story-couple .story-person__copy,
    .storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy,
    .storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy {
        isolation: isolate;
        background: transparent;
        box-shadow: none;
    }

    .storybook.world-camera-ready .story-couple .story-person__copy::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -24% -18%;
        pointer-events: none;
        background: radial-gradient(ellipse closest-side, rgba(247, 245, 239, .99) 0 58%, rgba(247, 245, 239, .9) 74%, rgba(247, 245, 239, .36) 89%, rgba(247, 245, 239, 0) 100%);
    }

    .storybook.world-camera-ready .story-couple .story-person--puteri .story-person__copy,
    .storybook.world-camera-ready .world-shot--date .hero-content {
        margin-right: 8vw;
    }

    .storybook.world-camera-ready .story-couple .story-person--ilham .story-person__copy,
    .storybook.world-camera-ready .world-location > * {
        margin-left: 8vw;
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(odd) .timeline-content {
        margin-right: 8vw;
    }

    .storybook.world-camera-ready .world-cluster--story .timeline-item:nth-child(even) .timeline-content {
        margin-left: 8vw;
    }
}

/* Quran interlude: a quieter, more editorial reading scale. */
.storybook .story-quran .story-scene-label {
    margin-bottom: 18px;
}

.storybook .story-quran .islamic-rule {
    width: 46px;
    margin-bottom: 24px;
    opacity: .82;
}

.storybook.world-camera-ready .world-shot--quran blockquote,
.storybook .story-quran blockquote {
    max-width: 27ch;
    font-size: clamp(1.58rem, 3.4vw, 2.7rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.008em;
    text-wrap: pretty;
}

.storybook .story-quran .story-quran__copy > p:last-child {
    margin-top: 23px;
    line-height: 1.45;
    letter-spacing: .14em;
}

@media (max-width: 430px) {
    .storybook.world-camera-ready .world-shot--quran blockquote,
    .storybook .story-quran blockquote {
        max-width: 25ch;
    }
}