/* Live correspondence framed by four sculptural tiles. */
.conversation{position:fixed;inset:0;height:100svh;isolation:isolate;background:var(--wine);visibility:hidden;pointer-events:none;overflow:clip;touch-action:none;display:flex;flex-direction:column;align-items:center;padding:11svh 24px 50px;color:var(--ink)}
body[data-surface=conversation] .conversation{visibility:visible;pointer-events:auto}
body[data-surface=conversation] .stage,body[data-surface=conversation]>header{visibility:hidden;pointer-events:none}
.conversation-copy,.conversation-chat,.conversation-footer{position:relative;z-index:2}
.conversation::before{content:'';position:absolute;inset:0;background-position:center;background-size:760px;opacity:.2;pointer-events:none}
.conversation.assets-ready::before{background-image:url('assets/idea/conversation-paper-delivery.webp')}
.conversation-copy{margin-bottom:3.5svh}
.conversation h2{font:500 clamp(52px,6.2vw,100px)/.95 StudioDisplay,Georgia,serif;letter-spacing:-.035em;color:var(--paper);margin:0;text-align:center;outline:none}
.conversation-chat{width:min(49vw,820px);padding:24px 32px 28px;background:var(--paper);border-radius:16px;box-shadow:0 24px 55px #28020c30;transform:translateY(calc((1 - var(--chat-depth,1))*14px)) scale(calc(.98 + var(--chat-depth,1)*.02));transform-origin:center bottom}
.conversation-person{display:flex;justify-content:center;align-items:center;font-size:18px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid #d9cbbd;text-align:center}
.conversation-person small{display:block;font-size:12px;color:#6d625c;margin-top:1px}
.conversation-avatar{display:none}
.conversation-incoming{background:#fffaf4;border-radius:16px 16px 16px 3px;padding:18px 22px 12px;box-shadow:0 8px 18px #4027190a;opacity:var(--message,1)}
.conversation-incoming p{font-size:clamp(18px,1.48vw,25px);line-height:1.36;margin:0}
.conversation time{font-size:12px;font-variant-numeric:tabular-nums;color:#73645c}
.conversation-incoming time{display:block;text-align:right;margin-top:8px}
.conversation-answer{position:relative;display:flex;justify-content:flex-end;margin-top:20px;min-height:62px}
.conversation-outgoing{display:flex;align-items:baseline;gap:12px;background:var(--wine);color:#fff6ed;border-radius:16px 16px 3px 16px;padding:16px 20px;box-shadow:0 8px 16px #4a102b12;opacity:var(--reply,1);transform:translateY(calc((1 - var(--reply,1))*12px));transform-origin:bottom right}
.conversation-outgoing p{font-size:clamp(23px,1.8vw,30px);margin:0;line-height:1.2}
.conversation-outgoing time{color:#eed6d5}
.conversation-checks{width:24px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--checks,1))}
.conversation-typing{position:absolute;right:16px;top:20px;display:flex;gap:5px;align-items:center;color:#74645c;opacity:var(--typing,0)}
.conversation-typing span{width:6px;height:6px;border-radius:50%;background:currentColor}
.conversation-typing small{margin-left:8px;font-size:15px}
.conversation-footer{margin-top:2.5svh;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--paper)}
.conversation-footer p{font:500 clamp(19px,1.8vw,29px)/1.2 StudioDisplay,Georgia,serif;margin:0;text-align:center}
.conversation-footer .idea-cta{border-radius:8px;white-space:nowrap;background:var(--paper);color:var(--wine);font:18px/1.3 StudioText,Arial,sans-serif;padding:18px 30px;min-height:58px}
.conversation-footer .idea-cta:hover{background:#fffaf4}
.conversation-back{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--paper);font:14px/1.4 StudioText,Arial,sans-serif;min-height:44px;padding:8px 0;position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%)}
.conversation-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.conversation button:focus-visible{outline:2px solid var(--paper);outline-offset:5px}
.conversation-objects{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:lighten}
.conversation-object{position:absolute;width:25vw;aspect-ratio:1;background-size:200% 200%;mix-blend-mode:lighten;will-change:transform;transition:transform 300ms cubic-bezier(.16,1,.3,1)}
.conversation.assets-ready .conversation-object{background-image:url('assets/idea/conversation-tiles-delivery.webp')}
.object-play{left:-1%;top:0;background-position:0 0;transform:var(--cursor-transform,translate(0)) translateY(calc(var(--float,0)*-14px)) rotate(calc(var(--float,0)*-4deg))}
.object-plane{right:-1%;top:1%;background-position:100% 0;transform:var(--cursor-transform,translate(0)) translateY(calc(var(--float,0)*12px)) rotate(calc(var(--float,0)*5deg))}
.object-house{left:-2%;bottom:1%;background-position:0 100%;transform:var(--cursor-transform,translate(0)) translateY(calc(var(--float,0)*12px)) rotate(calc(var(--float,0)*5deg))}
.object-site{right:-2%;bottom:0;background-position:100% 100%;transform:var(--cursor-transform,translate(0)) translateY(calc(var(--float,0)*-10px)) rotate(calc(var(--float,0)*-4deg))}
.conversation-object{--hover-height:7px;animation:tile-hover 8s ease-in-out infinite;animation-play-state:paused;will-change:transform,translate,rotate}
.object-plane{animation-duration:9.5s;animation-delay:-2.4s;--hover-height:9px}
.object-house{animation-duration:10s;animation-delay:-5.2s;--hover-height:6px}
.object-site{animation-duration:8.7s;animation-delay:-3.6s;--hover-height:8px}
@keyframes tile-hover{0%,100%{translate:0 var(--hover-height);rotate:-.8deg}50%{translate:3px calc(var(--hover-height)*-1);rotate:.8deg}}
body[data-surface=conversation]:not(.page-hidden):not(.scene-changing):not(:has(dialog[open])) .conversation-object{animation-play-state:running}
.scene-scroll-cue{position:fixed;z-index:35;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;color:var(--wine);font:12px/1.4 StudioText,Arial,sans-serif;white-space:nowrap;pointer-events:none}
.scene-scroll-cue svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.scene-scroll-cue.is-back svg{transform:rotate(180deg)}
body[data-surface=conversation] .scene-scroll-cue{color:var(--paper)}
body:not([data-surface=idea]):not([data-surface=conversation]):not(.device-open) .scene-scroll-cue{color:#fff4e6;text-shadow:0 1px 3px #321017}
.stage .hint{display:none}
body.scene-changing .scene-scroll-cue{visibility:hidden}
@media(max-width:1050px) and (min-width:701px){.conversation{padding-top:13svh}.conversation-chat{width:60vw}.conversation-object{width:23vw}.object-play,.object-house{left:-7%}.object-plane,.object-site{right:-7%}.conversation-incoming p{font-size:18px}}
@media(max-width:700px){
 .conversation{padding:82px 18px 36px}
 .conversation-copy{margin-bottom:25px;width:100%;max-width:330px}
 .conversation h2{font-size:50px;line-height:.91;text-wrap:balance}
 .conversation-chat{width:100%;max-width:460px;padding:16px 16px 20px;border-radius:12px}
 .conversation-person{font-size:16px;padding-bottom:12px;margin-bottom:14px}
 .conversation-person small{font-size:11px}
 .conversation-incoming{padding:14px 15px 10px;border-radius:12px 12px 12px 3px}
 .conversation-incoming p{font-size:16px;line-height:1.34}
 .conversation time{font-size:11px}
 .conversation-answer{margin-top:14px;min-height:54px}
 .conversation-outgoing{padding:13px 16px;gap:10px}.conversation-outgoing p{font-size:25px}
 .conversation-footer{margin-top:22px;gap:16px;width:100%}.conversation-footer p{font-size:22px}
 .conversation-footer .idea-cta{min-height:52px;padding:14px 24px;font-size:16px}
 .conversation-back{top:4px}
 .conversation-object{width:39vw}.object-play{left:-15%;top:-23vw}.object-plane{right:-16%;top:-23vw}.object-house{left:-17%;bottom:1%}.object-site{right:-17%;bottom:1%}
 body:not([data-surface=idea]):not([data-surface=conversation]):not(.device-open) .scene-scroll-cue{color:var(--wine);text-shadow:none}
}
@media(max-width:700px) and (max-height:740px){
 .conversation{padding-top:62px}.conversation h2{font-size:43px}.conversation-copy{margin-bottom:16px}
 .conversation-chat{padding:12px 13px 14px}.conversation-person{padding-bottom:8px;margin-bottom:10px}.conversation-person small{display:none}
 .conversation-incoming p{font-size:15px}.conversation-incoming{padding:12px 13px 8px}.conversation-answer{margin-top:10px;min-height:49px}.conversation-outgoing{padding:11px 14px}
 .conversation-footer{margin-top:16px;gap:12px}.conversation-footer p{font-size:20px}.conversation-footer .idea-cta{min-height:48px;padding:12px 24px}
}
@media(min-width:701px) and (max-height:760px){
 .conversation{padding-top:9svh}.conversation h2{font-size:clamp(52px,5.5vw,76px)}.conversation-copy{margin-bottom:20px}
 .conversation-chat{padding:16px 24px 18px}.conversation-person{padding-bottom:10px;margin-bottom:14px}.conversation-incoming p{font-size:18px}.conversation-incoming{padding:14px 18px 10px}.conversation-answer{margin-top:12px;min-height:54px}.conversation-outgoing{padding:12px 18px}.conversation-footer{gap:12px;margin-top:16px}.conversation-footer p{font-size:23px}
}
@media(max-width:700px){.conversation-object{--hover-height:4px}}
@media(prefers-reduced-motion:reduce){.conversation-object{animation:none;translate:none;rotate:none;transition:none;transform:none!important}.conversation-chat{transform:none}}
.conversation-chat{--chat-text-size:clamp(18px,1.48vw,25px)}
.conversation-incoming p,.conversation-outgoing p{font-size:var(--chat-text-size);line-height:1.36}
@media(max-width:1050px) and (min-width:701px){.conversation-chat{--chat-text-size:18px}}
@media(max-width:700px){.conversation-chat{--chat-text-size:16px}}
@media(max-width:700px) and (max-height:740px){.conversation-chat{--chat-text-size:15px}}
@media(min-width:701px) and (max-height:760px){.conversation-chat{--chat-text-size:18px}}
/* Shared editorial roles: section title, subheading, body, interface. */
.conversation h2{font-size:64px;line-height:1.02}
.conversation h2 span{display:block;font-size:40px;line-height:1.1;margin-top:8px}
.conversation-chat{--chat-text-size:18px}
.conversation-footer p{font-size:24px}
.conversation time,.conversation-person small,.conversation-typing small,.scene-scroll-cue{font-size:14px}
@media(max-width:700px){
 .conversation h2{font-size:48px}
 .conversation h2 span{font-size:24px;margin-top:10px}
 .conversation-chat{--chat-text-size:16px}
 .conversation-footer p{font-size:18px;line-height:1.35}
 .conversation{padding-top:62px}
 .conversation-copy{margin-bottom:18px;max-width:460px}
}
@media(min-width:701px) and (max-height:760px){
 .conversation h2{font-size:48px}
 .conversation h2 span{font-size:24px}
 .conversation-copy{margin-bottom:16px}
 .conversation-footer p{font-size:18px}
 .conversation-chat{width:min(70vw,820px);padding:12px 24px 14px}
 .conversation-person{padding-bottom:8px;margin-bottom:10px}
 .conversation-person small{display:none}
 .conversation-answer{min-height:48px}
 .conversation-footer .idea-cta{min-height:48px;padding:12px 30px}
}