/* A reversible reading room, held by native scroll. The static state is complete. */
.statement{--statement-bg:var(--theme-surface,#faf7f5);--statement-ink:var(--theme-accent,#60212c);--statement-muted:var(--theme-muted,#81726d);position:relative;background:var(--statement-bg);color:var(--statement-ink);isolation:isolate;overflow:clip;scroll-margin-top:0}
.statement-stage{position:relative;min-height:800px;display:flex;align-items:center;justify-content:center;padding:115px 9vw 110px;overflow:clip}
.statement-content{position:relative;z-index:2;width:min(100%,1090px);text-align:center;min-width:0}
.statement-kicker{font:400 11px/1.7 var(--body);margin:0 0 39px;color:var(--statement-ink)}
.statement-copy{font:400 clamp(65px,6.4vw,100px)/1.28 var(--display);letter-spacing:0;margin:0 auto;max-width:1040px;text-wrap:pretty;position:relative}
.statement-copy [data-statement-word]{display:inline;color:var(--statement-ink)}
.statement-image{display:inline-block;position:relative;width:1.68em;height:.84em;vertical-align:-.04em;border-radius:.09em;overflow:hidden;margin:0 .055em;background:var(--theme-soft,#d4c3b8);isolation:isolate;box-shadow:0 5px 12px var(--theme-shadow-a12,#27131b12);transform-origin:center}
.statement-image img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;max-width:none}

.statement-decor{position:absolute;z-index:1;pointer-events:none;user-select:none;transform:var(--statement-decor-transform,none)}

.statement-keepsake{width:clamp(150px,15vw,245px);height:clamp(190px,19vw,300px);inset-inline-start:-6%;bottom:5%;rotate:14deg;background:var(--theme-surface,#fffdfa);padding:10px 10px 28px;box-shadow:0 18px 40px var(--theme-shadow-a20,#27131b20);border:1px solid var(--theme-rule,#e7dbd1);border-radius:3px;overflow:hidden}
.statement-keepsake img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}.statement-keepsake:after{content:'envitation +';position:absolute;bottom:8px;inset-inline:0;font:9px/1 Inter,sans-serif;letter-spacing:-.03em;color:var(--theme-accent,#60212c);text-align:center}
.statement[data-scroll-ready=true]{min-height:calc(var(--statement-viewport-height,100svh) * 2.8)}
.statement[data-scroll-ready=true] .statement-stage{position:sticky;top:0;height:var(--statement-viewport-height,100svh);min-height:0}
html[lang=en] .statement-copy{font:400 clamp(55px,5.6vw,86px)/1.13 var(--latin);letter-spacing:-.06em;max-width:1080px}
html[lang=en] .statement-kicker{font:500 9px/1.7 var(--latin);letter-spacing:.08em}
@media(min-width:1700px){.statement-keepsake{inset-inline-start:-1%}}
@media(max-width:1100px){.statement-stage{padding-inline:8vw}.statement-copy{font-size:77px}.statement-keepsake{width:148px;height:190px;inset-inline-start:-8%;bottom:4%}html[lang=en] .statement-copy{font-size:65px;max-width:820px}}
@media(max-width:760px){
 .statement[data-scroll-ready=true]{min-height:calc(var(--statement-viewport-height,100svh) * 2.5)}.statement-stage{min-height:740px;padding:100px 25px 245px;align-items:center}.statement-content{max-width:520px}.statement-copy{font-size:55px;line-height:1.25;max-width:450px}.statement-kicker{font-size:10px;margin-bottom:25px}.statement-image{width:1.32em;height:.66em;border-radius:.095em;margin-inline:.01em;vertical-align:-.025em}.statement-keepsake{width:92px;height:119px;padding:5px 5px 17px;inset-inline-start:-33px;bottom:100px;rotate:15deg}.statement-keepsake:after{font-size:6px;bottom:5px}
 html[lang=en] .statement-copy{font-size:42px;line-height:1.16;letter-spacing:-.055em;max-width:480px}html[lang=en] .statement-kicker{font-size:9px}}
@media(max-width:360px){.statement-stage{padding-inline:23px}.statement-copy{font-size:46px;line-height:1.3}.statement-kicker{font-size:9px;margin-bottom:24px}.statement-keepsake{width:77px;height:100px;inset-inline-start:-37px;bottom:103px}html[lang=en] .statement-copy{font-size:35px;line-height:1.17}}
@media(max-height:650px) and (min-width:761px){.statement-stage{min-height:700px}.statement-copy{font-size:62px}html[lang=en] .statement-copy{font-size:52px}}
@media(prefers-reduced-motion:reduce){.statement[data-scroll-ready=true]{min-height:0}.statement[data-scroll-ready=true] .statement-stage{position:relative;height:auto;min-height:740px}.statement-decor,.statement-image{transform:none!important}}
/* Original paper and jasmine, kept beyond the reading lane. */

.statement-jasmine{width:clamp(90px,10vw,170px);inset-inline-start:3%;top:5%;rotate:-35deg;opacity:.9}
@media(min-width:1700px){.statement-jasmine{inset-inline-start:5%}}
@media(max-width:1100px){.statement-jasmine{width:100px;inset-inline-start:1%;top:4%}}
@media(max-width:760px){.statement-jasmine{width:79px;top:13px;inset-inline-start:6px;rotate:-33deg;opacity:.8}}
@media(max-width:360px){.statement-jasmine{width:64px;inset-inline-start:3px}}

/* Jasmine branches balance the upper corners. */

.statement-jasmine-right{width:clamp(90px,10vw,170px);inset-inline-end:3%;top:5%;rotate:35deg;scale:-1 1;opacity:.9}
@media(min-width:1700px){.statement-jasmine-right{inset-inline-end:5%}}
@media(max-width:1100px){.statement-jasmine-right{width:100px;inset-inline-end:1%;top:4%}}
@media(max-width:760px){.statement-jasmine-right{width:79px;top:13px;inset-inline-end:6px;rotate:33deg;opacity:.8}}
@media(max-width:360px){.statement-jasmine-right{width:64px;inset-inline-end:3px}}

/* Matching paper keepsakes frame the reading lane with two real studio works. */
.statement-keepsake--right{inset-inline-start:auto;inset-inline-end:-6%;rotate:-14deg}
@media(min-width:1700px){.statement-keepsake--right{inset-inline-end:-1%}}
@media(max-width:1100px){.statement-keepsake--right{inset-inline-start:auto;inset-inline-end:-8%}}
@media(max-width:760px){.statement-keepsake--right{inset-inline-start:auto;inset-inline-end:-33px;rotate:-15deg}}
@media(max-width:360px){.statement-keepsake--right{inset-inline-start:auto;inset-inline-end:-37px}}
/* Budget the mobile reading stage from its stable viewport, including room for
   the lower paper cards. Arabic stays joined and large enough to read while the
   full sentence fits the pinned stage on ordinary portrait phones. */
@media(max-width:760px){
 .statement-stage{padding-top:clamp(60px,calc(var(--statement-viewport-height,100svh) * .09),100px);padding-bottom:155px}
 html[lang=ar] .statement-copy{font-size:clamp(44px,min(13.3vw,calc((var(--statement-viewport-height,100svh) - 200px) * .095)),55px);line-height:1.25}
 .statement-keepsake{bottom:20px}
}