/* One compact phone, eight sourced excerpts, the original 17s / 8.5s cadence. */
.quote-clouds{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);grid-template-areas:"left phone right";align-items:center;gap:24px;width:calc(100% - 60px);max-width:680px;min-height:300px;margin:46px auto 30px;pointer-events:none;isolation:isolate}
.quote-bubble{position:relative;margin:0;min-width:0;padding:18px 20px 15px;border:1.5px solid #ffc247b3;border-radius:24px 24px 9px 24px;background:linear-gradient(135deg,#68444fd9,#35222deb);box-shadow:inset 0 1px 0 #f4d1c212,0 12px 36px #10080f24;opacity:0;will-change:transform,opacity;animation:quote-cloud-drift 17s ease-in-out infinite;animation-play-state:paused;--quote-origin-x:45px}
.quote-bubble p{margin:0;color:#f4dcd4;font:italic 16px/1.6 Georgia,serif;text-wrap:pretty;overflow-wrap:break-word}
.quote-bubble p:before{content:'“';color:#ffc247;margin-right:2px}.quote-bubble p:after{content:'”';color:#ffc247;margin-left:2px}
.quote-bubble cite{display:block;margin-top:10px;color:#ffc247;font:8px Arial,sans-serif;font-style:normal;letter-spacing:1.8px;text-transform:uppercase}
.quote-bubble:after{content:'';position:absolute;width:8px;height:8px;bottom:16px;right:-5px;transform:rotate(-45deg);border-right:1.5px solid #ffc247b3;border-bottom:1.5px solid #ffc247b3;background:#3a2731}
.quote-bubble-left{grid-area:left;align-self:start;margin-top:24px}
.quote-bubble-right{grid-area:right;align-self:end;margin-bottom:22px;border-radius:24px 24px 24px 9px;animation-delay:-8.5s;--quote-origin-x:-45px}
.quote-bubble-right:after{right:auto;left:-5px;transform:rotate(135deg)}
.quote-phone{grid-area:phone;position:relative;width:100px;height:194px;padding:5px;border:1px solid #ffc247d9;border-radius:23px;background:linear-gradient(135deg,#66424c,#2a1720 65%);box-shadow:inset 0 0 0 2px #24121c,0 14px 38px #14091138,0 0 38px #ffc24709;opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1);box-sizing:border-box}
.phone-revealed .quote-phone{opacity:1;transform:translateY(0)}
.quote-phone-screen{height:100%;border:1px solid #ffc24720;border-radius:18px;background:linear-gradient(155deg,#432632,#24141d);position:relative;overflow:hidden;text-align:center;box-sizing:border-box}
.quote-phone-speaker{position:absolute;top:7px;left:50%;width:25px;height:4px;margin-left:-12.5px;background:#1c1018;border-radius:6px}
.quote-phone-monogram{display:block;margin-top:28px;color:#f2d9c6;font:15px Georgia,serif;letter-spacing:2px}
.quote-phone-monogram b{color:#ffc247;font-weight:400}
.quote-phone-label{display:block;margin-top:9px;color:#d9ba96;font:5px/1.5 Arial,sans-serif;letter-spacing:1.1px;white-space:nowrap}
.phone-message-line{position:absolute;height:15px;border:1px solid #ffc24746;border-radius:7px 7px 7px 2px;background:#ffc2470b}
.phone-message-line-one{left:11px;top:91px;width:43px}.phone-message-line-two{right:10px;top:113px;width:35px;border-radius:7px 7px 2px 7px;border-color:#dba6a849;background:#dba6a80b}
.phone-screen-heart{position:absolute;left:0;right:0;bottom:19px;color:#ffc247;font:19px Georgia,serif}
.quote-phone-home{position:absolute;bottom:7px;left:50%;width:28px;height:2px;margin-left:-14px;border-radius:5px;background:#ffc2474a}
.story-entered .quotes-in-view .quote-bubble{animation-play-state:running}
.cover-open .quote-clouds{visibility:hidden}
.motion-paused .quote-bubble{opacity:1!important;transform:none!important;animation-play-state:paused!important}
.motion-paused .quote-phone{transition:none}
@keyframes quote-cloud-drift{0%{opacity:0;transform:translate3d(var(--quote-origin-x),24px,0) scale(.92)}12%{opacity:.95;transform:translate3d(0,4px,0) scale(1)}67%{opacity:.95;transform:translate3d(0,-5px,0) scale(1)}85%,100%{opacity:0;transform:translate3d(0,-22px,0) scale(.98)}}
/* Desktop side rails keep the main story clear; smaller screens retain inline messages. */
@media(min-width:1180px){
 body main{width:calc(100% - 340px);max-width:1240px;margin-left:auto;margin-right:auto}
 .hero{padding-left:4%;padding-right:4%;grid-template-columns:1.12fr 1fr}
 .hero h1{font-size:clamp(66px,6.4vw,98px);letter-spacing:-4px}
 .quote-clouds{position:fixed;display:block;inset:0;width:100%;height:100vh;max-width:none;min-height:0;margin:0;padding:0;z-index:8}
 .quote-bubble{position:absolute;box-sizing:border-box;width:148px;max-width:148px;padding:15px 13px 13px;--quote-origin-x:20px;box-shadow:inset 0 1px 0 #ffe5a51c,0 10px 28px #10080f2b,0 0 20px #ffc2470d}
 .quote-bubble p{font-size:14px;line-height:1.55}
 .quote-bubble cite{font-size:7px;letter-spacing:1.4px}
 .quote-bubble-left{left:11px;top:27vh;margin:0;align-self:auto}
 .quote-bubble-right{right:11px;left:auto;top:44vh;bottom:auto;margin:0;align-self:auto;--quote-origin-x:-20px}
 .quote-phone{position:absolute;right:47px;bottom:24px;width:76px;height:150px;padding:4px;border-radius:19px;box-shadow:inset 0 0 0 2px #24121c,0 12px 28px #14091130,0 0 28px #ffc24717}
 .quote-phone-screen{border-radius:14px}.quote-phone-speaker{width:21px;margin-left:-10.5px}
 .quote-phone-monogram{margin-top:23px;font-size:12px;letter-spacing:1px}.quote-phone-label{font-size:4.5px;letter-spacing:.5px;margin-top:7px}
 .phone-message-line-one{top:71px;left:8px;width:34px;height:12px}.phone-message-line-two{top:88px;right:7px;width:27px;height:12px}.phone-screen-heart{bottom:17px;font-size:16px}
}
@media(min-width:1180px) and (max-height:680px){.quote-phone{display:none}}
@media(max-width:600px){
 .quote-clouds{width:calc(100% - 40px);grid-template-columns:76px minmax(0,1fr);grid-template-areas:"phone left" "phone right";gap:14px 17px;min-height:0;margin-top:34px;margin-bottom:30px;padding:14px 0}
 .quote-phone{width:76px;height:150px;padding:4px;border-radius:19px;align-self:center}
 .quote-phone-screen{border-radius:14px}.quote-phone-speaker{width:21px;margin-left:-10.5px}
 .quote-phone-monogram{margin-top:23px;font-size:12px;letter-spacing:1px}.quote-phone-label{font-size:4.5px;letter-spacing:.5px;margin-top:7px}
 .phone-message-line-one{top:71px;left:8px;width:34px;height:12px}.phone-message-line-two{top:88px;right:7px;width:27px;height:12px}.phone-screen-heart{bottom:17px;font-size:16px}
 .quote-bubble{padding:15px 17px 13px;--quote-origin-x:-25px}
 .quote-bubble p{font-size:15px;line-height:1.55}
 .quote-bubble-left,.quote-bubble-right{margin:0;align-self:center;border-radius:21px 21px 21px 7px}
 .quote-bubble-left:after,.quote-bubble-right:after{right:auto;left:-5px;transform:rotate(135deg)}
 .quote-bubble cite{font-size:7px;letter-spacing:1.4px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.quote-bubble{animation:none!important;opacity:1;transform:none;will-change:auto}.quote-phone{transition:none;transform:none}.phone-revealed .quote-phone{opacity:1}}