/* The Unfolding: two independently composed views become one invitation. */
#composeOverlay .unfoldingOverlay[hidden],#composeOverlay .unfoldingReplyBanner[hidden]{display:none!important}
#composeOverlay .composeUnfold{min-height:48px;padding:12px 20px;border:1px solid #e9c8a4;background:#5b343b;color:#fff4ea;font:700 10px/1.25 Arial,sans-serif;letter-spacing:.15em;cursor:pointer;box-shadow:0 10px 30px #0005;transition:background .2s,transform .2s}
#composeOverlay .composeUnfold:hover{background:#78444d;transform:translateY(-2px)}
#composeOverlay .unfoldingReplyBanner{max-width:760px;margin:16px 0 20px;padding:15px 19px;border:1px solid #e8caa882;border-left:3px solid #e8caa8;background:linear-gradient(105deg,#603b41a8,#27241dcc);color:#f9ecdb}
#composeOverlay .unfoldingReplyBanner span{display:block;color:#f8d9a7;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.2em}
#composeOverlay .unfoldingReplyBanner p{margin:6px 0 0;color:#f6e7d6;font:15px/1.5 Georgia,serif}
#composeOverlay .composePanel.hasResult .unfoldingReplyBanner{display:none}
#composeOverlay .unfoldingOverlay{position:absolute;inset:0;z-index:35;overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 51% 5%,#5c353b 0%,transparent 43%),linear-gradient(145deg,#17211b 0%,#191915 45%,#321f24 100%);color:#f9f0e2}
#composeOverlay .unfoldingShell{position:relative;isolation:isolate;width:min(1450px,100%);min-height:100%;margin:auto;padding:0 clamp(22px,4vw,62px) 30px;border-left:1px solid #edcfaa45;border-right:1px solid #edcfaa45;background:linear-gradient(100deg,#f3d4b408,transparent 26%,#f8d4b608 83%,transparent)}
#composeOverlay .unfoldingShell:before{content:"";position:absolute;z-index:-1;inset:0;background:url('./assets/about-story/the-plan.webp') center/cover;opacity:.045;filter:grayscale(1)}
#composeOverlay .unfoldingHeader{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:74px;border-bottom:1px solid #e5cfaf64;color:#f0dabc;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.14em}
#composeOverlay .unfoldingHeader>span{text-align:center;white-space:nowrap}
#composeOverlay .unfoldingHeader i{font:italic 17px Georgia,serif;color:#dca9af;padding:0 8px}
#composeOverlay .unfoldingHeader button{appearance:none;min-height:43px;width:max-content;padding:9px 12px;border:1px solid #e2c9a88a;background:#17251f9c;color:#f9eedf;font:700 9px/1.2 Arial,sans-serif;letter-spacing:.1em;cursor:pointer}
#composeOverlay .unfoldingHeader button:last-child{justify-self:end}
#composeOverlay .unfoldingHeaderActions{justify-self:end;display:flex;align-items:center;gap:8px}
#composeOverlay .unfoldingLead{max-width:900px;padding:clamp(24px,3.5vw,46px) 0 20px}
#composeOverlay .unfoldingLead>span,#composeOverlay .unfoldingMeaning>span{color:#e9c7a3;font:700 10px/1.35 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
#composeOverlay .unfoldingLead h2{max-width:940px;margin:12px 0 14px;color:#fff1e5;font:italic 400 clamp(46px,6.8vw,96px)/.93 Georgia,serif;letter-spacing:-.057em;text-wrap:balance}
#composeOverlay .unfoldingLead p{max-width:680px;margin:0;color:#eddfd0;font:clamp(15px,1.4vw,18px)/1.52 Georgia,serif}
#composeOverlay .unfoldingStage{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--split,50%) minmax(0,1fr);width:100%;height:clamp(310px,44vw,590px);max-height:60vh;overflow:hidden;border:1px solid #e3c8a8b3;background:#5c3139;box-shadow:0 34px 100px #0008,0 0 0 9px #e3c8a80d;perspective:1300px}
#composeOverlay .unfoldingStage[data-mode="reveal"]:not(.is-shared){cursor:ew-resize;touch-action:pan-y}
#composeOverlay .unfoldingStage:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(90deg,#22161366,transparent 20%,transparent 80%,#171b1666),linear-gradient(0deg,#120c0b60,transparent 48%)}
#composeOverlay .unfoldingStage:after{content:"";position:absolute;z-index:6;left:calc(var(--split,50%) - 2px);top:0;bottom:0;width:4px;background:linear-gradient(90deg,#100c0a9c,#fff0d4d9,#39241f8c);box-shadow:0 0 20px #ffe9c07d;pointer-events:none}
#composeOverlay .unfoldingPaper{position:relative;min-width:0;height:100%;overflow:hidden;background:#e7d2b5;transform-style:preserve-3d}
#composeOverlay .unfoldingPaper--first{transform-origin:100% 50%}
#composeOverlay .unfoldingPaper--second{transform-origin:0 50%}
#composeOverlay .unfoldingPaper img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.84) contrast(1.02);transition:filter .5s}
#composeOverlay .unfoldingPaperShade{position:absolute;inset:0;background:linear-gradient(0deg,#120e0ccc 0%,transparent 65%),linear-gradient(90deg,transparent 70%,#281a18a8 100%)}
#composeOverlay .unfoldingPaper--second .unfoldingPaperShade{background:linear-gradient(0deg,#120e0ccc 0%,transparent 65%),linear-gradient(90deg,#281a18a8,transparent 35%)}
#composeOverlay .unfoldingPaperCopy{position:absolute;z-index:7;left:clamp(16px,3vw,42px);right:clamp(13px,3vw,42px);bottom:clamp(18px,3vw,38px);display:grid;gap:9px;text-shadow:0 3px 14px #000c}
#composeOverlay .unfoldingPaperCopy small{color:#f5d7a8;font:700 10px/1.2 Arial,sans-serif;letter-spacing:.22em}
#composeOverlay .unfoldingPaperCopy strong{color:#fff6e9;font:italic 400 clamp(26px,4vw,58px)/1 Georgia,serif;letter-spacing:-.04em;overflow-wrap:anywhere}
#composeOverlay .unfoldingCrease{position:absolute;z-index:8;left:calc(var(--split,50%) - 50px);top:0;bottom:0;width:100px;pointer-events:none;filter:drop-shadow(0 0 8px #fff0d7)}
#composeOverlay .unfoldingCrease svg{display:block;width:100%;height:100%;overflow:visible}
#composeOverlay .unfoldingCrease path{fill:none;stroke:#ffddae;stroke-width:2.1;stroke-linecap:round;stroke-dasharray:800;stroke-dashoffset:800}
#composeOverlay .unfoldingCrease span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff4d9;font:27px Georgia,serif;text-shadow:0 0 20px #ffe5ad}
#composeOverlay .unfoldingStage.is-open .unfoldingCrease path{animation:unfoldingDraw 1.25s .25s cubic-bezier(.3,.55,.2,1) forwards}
#composeOverlay .unfoldingStage.is-open .unfoldingPaper--first{animation:unfoldingFirst .95s cubic-bezier(.14,.75,.2,1) both}
#composeOverlay .unfoldingStage.is-open .unfoldingPaper--second{animation:unfoldingSecond 1.1s cubic-bezier(.14,.75,.2,1) both}
@keyframes unfoldingDraw{to{stroke-dashoffset:0}}
@keyframes unfoldingFirst{from{transform:rotateY(20deg);filter:brightness(.48)}to{transform:rotateY(0);filter:brightness(1)}}
@keyframes unfoldingSecond{from{transform:rotateY(-70deg);filter:brightness(.3)}to{transform:rotateY(0);filter:brightness(1)}}
#composeOverlay .unfoldingStage[data-mode="invite"] .unfoldingPaper--second img{filter:grayscale(.45) sepia(.5) brightness(1.3);opacity:.25}
#composeOverlay .unfoldingStage[data-mode="invite"] .unfoldingPaper--second{background:radial-gradient(circle at 40% 40%,#f6e5cb,#cdb69a)}
#composeOverlay .unfoldingStage[data-mode="invite"] .unfoldingPaper--second .unfoldingPaperShade{background:linear-gradient(130deg,#e9d4b6b5,#a77b7b85)}
#composeOverlay .unfoldingStage[data-mode="invite"] .unfoldingPaper--second .unfoldingPaperCopy{text-shadow:none}
#composeOverlay .unfoldingStage[data-mode="invite"] .unfoldingPaper--second :is(small,strong){color:#4b3a36}
#composeOverlay .unfoldingStage.is-shared{grid-template-columns:1fr}
#composeOverlay .unfoldingStage.is-shared .unfoldingPaper--first{grid-column:1/-1}
#composeOverlay .unfoldingStage.is-shared .unfoldingPaper--second,#composeOverlay .unfoldingStage.is-shared .unfoldingCrease{display:none}
#composeOverlay .unfoldingStage.is-shared:after{display:none}
#composeOverlay .unfoldingStage.is-shared .unfoldingPaper--first .unfoldingPaperShade{background:linear-gradient(0deg,#120e0cbb,transparent 58%)}
#composeOverlay .unfoldingStage.is-shared .unfoldingSeal{left:auto;right:clamp(20px,4vw,55px);top:clamp(20px,4vw,55px);transform:rotate(7deg);width:clamp(85px,10vw,125px)}
#composeOverlay .unfoldingStage.is-shared .unfoldingSeal strong{font-size:clamp(18px,2vw,25px)}
#composeOverlay .unfoldingSeal{position:absolute;z-index:9;left:var(--split,50%);top:50%;transform:translate(-50%,-50%) rotate(-5deg);display:grid;place-items:center;gap:5px;width:clamp(96px,12vw,150px);aspect-ratio:1;border:1px solid #fff2d4;border-radius:50%;background:#39252dce;box-shadow:0 0 0 7px #fff1d725,0 20px 50px #0009;color:#ffead2;text-align:center;backdrop-filter:blur(7px)}
#composeOverlay .unfoldingSeal[role="slider"]{cursor:ew-resize}
#composeOverlay .unfoldingSeal span{font:700 8px/1.3 Arial,sans-serif;letter-spacing:.16em}
#composeOverlay .unfoldingSeal strong{max-width:11ch;font:italic 400 clamp(16px,2vw,28px)/1.03 Georgia,serif}
#composeOverlay .unfoldingChapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:17px 0 24px}
#composeOverlay .unfoldingChapters button{appearance:none;display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 5px;border:1px solid #e7cead65;background:#1b2a25a8;color:#e5d4c3;font:700 9px/1.2 Arial,sans-serif;letter-spacing:.1em;cursor:pointer}
#composeOverlay .unfoldingChapters button[aria-current="true"]{border-color:#f4d4a9;background:#f7d9b226;color:#fff7e8;box-shadow:inset 0 -2px #f4d4a9}
#composeOverlay .unfoldingChapters button:hover{background:#f5d0a730}
#composeOverlay .unfoldingBottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:clamp(20px,5vw,80px);align-items:start;padding:12px 0 22px;border-bottom:1px solid #e5caaa5e}
#composeOverlay .unfoldingMeaning h3{margin:9px 0;color:#fff0e5;font:italic 400 clamp(28px,3.1vw,46px)/1.05 Georgia,serif;letter-spacing:-.025em}
#composeOverlay .unfoldingMeaning p{max-width:600px;margin:0;color:#e2d3c6;font:16px/1.5 Georgia,serif}
#composeOverlay .unfoldingActions{display:grid;gap:9px}
#composeOverlay .unfoldingActions button{appearance:none;min-height:45px;padding:10px 16px;border:1px solid #ebcfaa;background:#ead0ab;color:#302725;font:700 10px/1.25 Arial,sans-serif;letter-spacing:.12em;cursor:pointer}
#composeOverlay .unfoldingActions button:hover{background:#fff0d4}
#composeOverlay .unfoldingActions #unfoldingEnquire{background:transparent;color:#f7e5cd}
#composeOverlay .unfoldingActions #unfoldingEnquire:hover{background:#ead0ab1c}
#composeOverlay .unfoldingActions #unfoldingNext{background:transparent;color:#f7e5cd;border-color:#e3c29c9e}
#composeOverlay .unfoldingActions #unfoldingNext:hover{background:#ead0ab1c}
#composeOverlay .unfoldingActions label{display:grid;gap:5px;color:#dfcbb6;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.13em}
#composeOverlay .unfoldingActions input{width:100%;min-height:36px;padding:7px 8px;border:1px solid #e2c7a16e;background:#17221fd8;color:#f4e8d5;font:11px/1.3 Arial,sans-serif;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
#composeOverlay .unfoldingActions p{margin:0;color:#d8c7b7;font:11px/1.35 Arial,sans-serif}
#composeOverlay .unfoldingDisclosure{padding-top:18px;color:#d1bea9;font:700 9px/1.5 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#composeOverlay .unfoldingOverlay :is(button,input):focus-visible,#composeOverlay .composeUnfold:focus-visible{outline:3px solid #fff0d1;outline-offset:3px}
@media(max-width:700px){
 #composeOverlay .composeActNav{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
 #composeOverlay .composeActNav button{flex:0 0 auto;min-width:78px;padding:8px 10px;white-space:nowrap}
 #composeOverlay .unfoldingShell{padding:0 16px 20px;border:0}
 #composeOverlay .unfoldingHeader{min-height:59px;grid-template-columns:1fr 1fr;font-size:8px}
 #composeOverlay .unfoldingHeader>span{display:none}
 #composeOverlay .unfoldingHeader button{font-size:8px;min-height:42px}
 #composeOverlay .unfoldingLead{padding:24px 0 18px}
 #composeOverlay .unfoldingLead h2{font-size:clamp(42px,12vw,59px)}
 #composeOverlay .unfoldingLead p{font-size:14px}
 #composeOverlay .unfoldingStage{height:350px;max-height:none}
 #composeOverlay .unfoldingPaperCopy{left:12px;right:10px;bottom:16px;gap:6px}
 #composeOverlay .unfoldingPaperCopy small{font-size:8px;letter-spacing:.1em}
 #composeOverlay .unfoldingPaperCopy strong{font-size:clamp(19px,5.5vw,28px)}
 #composeOverlay .unfoldingSeal{width:94px}
 #composeOverlay .unfoldingSeal span{font-size:7px}
 #composeOverlay .unfoldingSeal strong{font-size:17px}
 #composeOverlay .unfoldingChapters{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto;scrollbar-width:thin;padding-bottom:5px;margin:11px 0 17px}
 #composeOverlay .unfoldingChapters button{font-size:8px;min-height:43px}
 #composeOverlay .unfoldingBottom{grid-template-columns:1fr;gap:16px}
 #composeOverlay .unfoldingMeaning p{font-size:14px}
 #composeOverlay .unfoldingActions{max-width:none}
 #composeOverlay .unfoldingDisclosure{font-size:8px}
}
@media(max-width:390px){#composeOverlay .unfoldingStage{height:310px}#composeOverlay .unfoldingSeal{width:82px}#composeOverlay .unfoldingSeal strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){#composeOverlay .unfoldingStage.is-open .unfoldingCrease path{animation:none;stroke-dashoffset:0}#composeOverlay .unfoldingStage.is-open .unfoldingPaper{animation:none}#composeOverlay .unfoldingPaper img,#composeOverlay .composeUnfold{transition:none}}
@media print{#composeOverlay .unfoldingOverlay{position:static!important;overflow:visible!important;background:#fff!important;color:#211b14!important}#composeOverlay .unfoldingHeader,#composeOverlay .unfoldingActions,#composeOverlay .unfoldingChapters{display:none!important}#composeOverlay .unfoldingStage{box-shadow:none;max-height:130mm}#composeOverlay .unfoldingLead :is(h2,p),#composeOverlay .unfoldingMeaning :is(h3,p){color:#211b14!important}}
