/* Complete illustrated environments, with separate uncropped mobile compositions. */
.digital-site .scene { min-height: max(800px, 50vw); background: #f6eddd; }
.digital-site .scene-imagination { background: #0e2135; }
.digital-site .scene-plate { position:absolute; inset:0; z-index:-3; pointer-events:none; }
.digital-site .scene-plate .scene-world { position:absolute; inset:auto 0 0; width:100%; height:auto; object-fit:contain; opacity:1; filter:none; }
.digital-site .scene::before { background:linear-gradient(90deg, #fff6e83d, transparent 52%); }
.digital-site .scene-imagination::before { background:linear-gradient(90deg,#0d1e3266,transparent 55%); }
.digital-site .scene-imagination::after { display:none; }
.digital-site .scene-art { visibility:hidden; height:0; min-height:0; }
.digital-site .scene-yarn { display:none; }
.digital-site .scene-layout { min-height:inherit; grid-template-columns: minmax(0, 45%) 1fr; padding:90px 0; width:calc(100% - 9vw); align-items:center; }
.digital-site .scene-copy { max-width:610px; }
.digital-site .scene-imagination .scene-layout { min-height:calc(max(800px, 50vw) - 94px); padding:20px 0 75px; }
.digital-site .scene-title { font-size:clamp(56px,5vw,84px); }
html:lang(zh-Hant) .digital-site .scene-title { font-size:clamp(42px,4vw,65px); }
.digital-site .scene-imagination .scene-kicker { font-size:clamp(29px,2.7vw,40px); }
.digital-site .scene-description { text-shadow:0 1px 8px #fff8ed; }
.digital-site .scene-imagination .scene-description { color:#fff8ec; text-shadow:0 1px 8px #0e2135; }
.digital-site .scene-nav-link { background:#0e2135b8; }
.digital-site .scene-collaboration .scene-button { background:#fff8eced; color:#182c40; border-color:#99733b; }
@media (min-width:701px) and (max-width:1050px) {
 .digital-site .scene { min-height:800px; }
 .digital-site .scene-plate .scene-world { bottom:0; }
 .digital-site .scene-layout { grid-template-columns:minmax(0,60%) 1fr; align-items:start; }
 .digital-site .scene-copy { padding:16px; border-radius:16px; background:#fff8ece8; }
 .digital-site .scene-imagination .scene-copy { background:#0e2135e8; }
}
@media (max-width:700px) {
 .digital-site .scene { min-height:0; display:flex; flex-direction:column; }
 .digital-site .scene::before,.digital-site .scene::after { display:none; }
 .digital-site .scene-plate { position:relative; inset:auto; order:3; z-index:0; display:block; width:100%; }
 .digital-site .scene-plate .scene-world { display:block; position:static; width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; }
 .digital-site .scene-layout,.digital-site .scene-imagination .scene-layout { display:block; width:calc(100% - 40px); min-height:0; padding:28px 0 24px; order:2; }
 .digital-site .scene-curiosity .scene-layout { padding-top:94px; }
 .digital-site .scene-copy { max-width:none; }
 .digital-site .scene-art { display:none; }
 .digital-site .scene-topbar { order:1; }
 .digital-site .scene-title { font-size:52px; }
 html:lang(zh-Hant) .digital-site .scene-title { font-size:40px; }
 .digital-site .scene-imagination .scene-kicker,html:lang(zh-Hant) .digital-site .scene-imagination .scene-kicker { font-size:26px; }
 .digital-site .scene-scroll { position:relative; inset:auto; order:4; margin:0; padding:18px 20px; background:#0e2135; }
 .digital-site .scene-collaboration .scene-layout { padding-top:46px; }
 .digital-site .scene-description { margin-bottom:24px; }
 .digital-site .scene-wordmark { font-size:112px; }
}
/* Keep the collaboration headline clear of the device artwork. */
.digital-site .scene-collaboration .scene-title { max-width:410px; text-wrap:balance; }
.digital-site .scene-collaboration .scene-text-link { background:#fff8eceb; border-radius:24px; padding:10px 16px; }
@media(min-width:1051px) {
 .digital-site .scene-nav { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:560px; }
 .digital-site .scene-nav-link { font-size:16px; padding:12px 10px; min-height:66px; gap:6px; }
}
body[data-motion=on] .scene[data-visible=true] .scene-plate img { animation:scene-light 12s ease-in-out infinite; }
@keyframes scene-light { 0%,100% { opacity:1; } 50% { opacity:.96; } }
@media(prefers-reduced-motion:reduce) { .digital-site .scene-plate img { animation:none!important; } }
@media(min-width:701px) {
 .digital-site .scene-imagination .scene-yarn,.digital-site .scene-collaboration .scene-yarn { display:block; z-index:0; opacity:.55; }
}
@container(max-width:260px) {
 .digital-site .scene-wordmark { font-size:72px; }
 .digital-site .scene-nav { grid-template-columns:1fr; }
}