/* Six parts become one home, then resolve into the original Pinyu signature. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html:has(.brand-intro[open]){overflow:hidden}
#main:focus{outline:none}
.brand-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f6f5f1;color:#343c33;overflow:hidden}
.brand-intro:not([open]){display:none}.brand-intro[open]{display:grid;grid-template-rows:auto 1fr auto}
.brand-intro::backdrop{background:transparent}
.intro-top,.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 44px;font-size:9px;letter-spacing:2px;color:#73796e}
.intro-top i{font-style:normal;color:var(--red);margin:0 13px}
.intro-skip{background:none;border:1px solid #d5d8cc;padding:12px 16px;min-height:44px;color:#565e50;font:inherit;font-size:11px;letter-spacing:1px;cursor:pointer}
.intro-skip span{margin-left:18px}.intro-skip:hover{color:var(--red);border-color:var(--red)}.intro-skip:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.intro-art{position:relative;align-self:center;justify-self:center;width:min(760px,76vw);height:min(440px,64vh)}
.intro-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.intro-caption{text-align:center;font-family:"Songti SC","STSong",serif;font-size:19px;letter-spacing:4px;margin-bottom:30px}
.intro-house{position:relative;width:100%;aspect-ratio:2.1;border:1px solid #d6d9ce;background:#eceee6;isolation:isolate}
.intro-house:before,.intro-house:after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid #dde0d7;inset:-15px 16px}
.intro-house:after{inset:15px -16px}
.intro-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;clip-path:inset(0 calc(100% - (var(--i) + 1)*100%/6) 0 calc(var(--i)*100%/6));transform:translateY(var(--shift));opacity:0}
.intro-seam{position:absolute;top:-16px;bottom:-16px;left:calc(var(--i)*100%/6);width:1px;background:var(--red);transform:scaleY(0);transform-origin:bottom;z-index:1}
.intro-services{display:grid;grid-template-columns:repeat(6,1fr);margin-top:28px;text-align:center;color:#7b8075;font-size:10px;letter-spacing:3px}
.intro-services span+span{border-left:1px solid #d9ddd1}
.intro-signature{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transform:translateY(18px);mix-blend-mode:multiply}
.intro-signature .brand-mark{width:clamp(180px,20vw,250px);flex-shrink:0}
.intro-brand-line{display:block;height:1px;width:40px;background:var(--red);margin:30px 0 22px;transform:scaleX(0);transform-origin:center}
.intro-signature p{font-family:"Songti SC","STSong",serif;font-size:23px;letter-spacing:4px}
.intro-signature small{font-size:10px;letter-spacing:4px;color:#7e8477;margin-top:18px}
.is-playing.brand-intro{animation:intro-exit .65s 3.85s ease-in-out both}
.is-playing .intro-scene{animation:intro-scene-resolve 3.1s ease-in-out both}
.is-playing .intro-piece{animation:intro-piece-settle 1.85s calc(var(--i)*.09s) cubic-bezier(.19,1,.22,1) both}
.is-playing .intro-seam{animation:intro-seam-repair 1.8s calc(.12s + var(--i)*.07s) ease-in-out both}
.is-playing .intro-signature{animation:intro-sign 1s 2.35s cubic-bezier(.2,.7,.2,1) both}
.is-playing .intro-brand-line{animation:intro-line .8s 2.65s ease-out both}
@keyframes intro-piece-settle{0%{transform:translateY(var(--shift));opacity:0}30%{opacity:.7}100%{transform:translateY(0);opacity:1}}
@keyframes intro-seam-repair{0%{transform:scaleY(0);opacity:.75}40%{transform:scaleY(1);opacity:.75}100%{transform:scaleY(1);opacity:0}}
@keyframes intro-scene-resolve{0%,67%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.035)}}
@keyframes intro-sign{to{opacity:1;transform:translateY(0)}}
@keyframes intro-line{to{transform:scaleX(1)}}
@keyframes intro-exit{to{opacity:0;transform:translateY(-10px)}}
@media(max-width:760px){.intro-top,.intro-bottom{padding:22px 21px;font-size:8px;letter-spacing:1px}.intro-top>span{max-width:150px;line-height:1.8}.intro-top i{margin:0 5px}.intro-skip{font-size:10px;padding:10px 13px}.intro-skip span{margin-left:10px}.intro-art{width:calc(100vw - 48px);height:420px;max-height:64vh}.intro-house{aspect-ratio:1.2}.intro-house:before{inset:-11px 12px}.intro-house:after{inset:11px -12px}.intro-caption{font-size:15px;letter-spacing:2px;margin-bottom:29px}.intro-services{font-size:9px;letter-spacing:1px;margin-top:27px}.intro-signature p{font-size:19px;letter-spacing:2px}.intro-signature small{font-size:9px;letter-spacing:3px}.intro-bottom>span:last-child{font-size:7px}.intro-brand-line{margin:27px 0 22px}}
@media(max-height:550px){.intro-art{width:min(540px,60vw);height:65vh}.intro-house{aspect-ratio:2.8}.intro-caption{font-size:14px;margin-bottom:18px}.intro-services{margin-top:18px}.intro-top,.intro-bottom{padding-block:14px}.intro-signature .brand-mark{width:150px}.intro-brand-line{margin:14px 0}.intro-signature p{font-size:17px}.intro-signature small{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.brand-intro *,.brand-intro.is-playing{animation:none!important}}