.site-registration{position:fixed;z-index:25;bottom:8px;left:0;right:0;text-align:center;font:11px/1.5 Arial,'Microsoft YaHei',sans-serif;color:#777;pointer-events:none}
.site-registration a{pointer-events:auto}.site-registration a:hover{color:#111;text-decoration:underline;text-underline-offset:3px}
.swatches{bottom:34px}
@media(max-width:700px){.site-registration{font-size:10px;bottom:7px}.swatches{bottom:35px}.preview-note{bottom:35px}}
/* Brand typography is shared with the rotating face to avoid a jump on unfold. */
.intro .intro-copy,.fold-shade>.intro-copy{padding:120px clamp(28px,calc(var(--dw) * .042),64px) 80px;justify-content:center}
.intro h1,.fold-shade h1{font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:clamp(34px,calc(var(--dw) * .052),64px);font-weight:700;line-height:1.2;letter-spacing:.015em;margin:0 0 30px;white-space:nowrap}
.intro h1 span,.fold-shade h1 span{display:block;font-size:clamp(17px,calc(var(--dw) * .018),23px);font-weight:500;line-height:1.5;letter-spacing:.22em;margin-top:14px;color:#525252}
.intro-copy .lead{font-size:16px;line-height:1.85;color:#595959;margin:0}
.intro-copy .actions{margin-top:28px;gap:12px}
.intro .brand-intro h1,.fold-shade .brand-intro h1{margin:0 0 14px}
.intro-copy .company-name{font-size:15px;font-weight:400;line-height:1.7;letter-spacing:.08em;color:#777;margin:0 0 34px}
.intro-copy .company-english{display:block;margin-top:8px;font:400 9px/1.7 Arial,sans-serif;letter-spacing:.1em;color:#898989}
.intro-copy .business-line{font-size:11px;line-height:1.8;letter-spacing:.02em;color:#777;margin:23px 0 0}
.intro-copy .brand-intro{width:100%;max-width:460px}
.intro-copy>.mono{font-family:Arial,'Microsoft YaHei',sans-serif;font-weight:400;letter-spacing:.1em;color:#777}
@media(max-width:700px){
 .intro .intro-copy,.fold-shade>.intro-copy{padding:88px 24px 70px;justify-content:center}
 .intro h1,.fold-shade h1{font-size:clamp(30px,9vw,40px);letter-spacing:.01em;margin-bottom:23px}
 .intro h1 span,.fold-shade h1 span{font-size:17px;letter-spacing:.16em;margin-top:10px}
 .intro-copy .lead{font-size:13px;line-height:1.8}.intro-copy .actions{margin-top:24px;gap:8px}
 .intro-copy .company-name{font-size:12px;letter-spacing:.04em;margin-bottom:26px}.intro-copy .business-line{font-size:10px;margin-top:20px}
 .intro-copy .company-english{font-size:8px;letter-spacing:.035em;margin-top:7px}
}
/* Page layouts within the fully opened device. */
.has-route #document{visibility:hidden;pointer-events:none}
#routePanel{position:absolute;top:0;left:0;width:100%;background:#f5f4f1;will-change:transform;color:#161616;min-height:calc(var(--dh) - 26px);padding-bottom:74px}
#routePanel[hidden]{display:none}
#routePanel h1:focus{outline:none}
.page-pad{padding:86px 34px 36px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.page-heading h1,.page-heading h2{font:900 clamp(62px,7vw,110px)/.9 Condensed,Arial,sans-serif;margin:0;letter-spacing:-.02em}
.page-heading>span{font:12px/1.6 'Courier New','Microsoft YaHei',monospace;text-align:right}
.page-intro{font-size:17px;line-height:1.7;max-width:650px;margin:0 0 34px}
.page-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px}
.page-filters button{background:#e8e7e4;padding:12px 18px;font-size:13px;border-radius:0;color:#111;transition:background .2s,color .2s}
.page-filters button[aria-pressed=true]{background:#1b1b1b;color:#fff}
.page-filters button:hover{box-shadow:inset 0 0 0 1px #777}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 22px}
.service-card[hidden]{display:none}
.service-image{overflow:hidden;aspect-ratio:1/1.1;background:#ddd}
.service-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.service-card:hover img{transform:scale(1.035)}
.card-caption{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:16px}
.card-caption h2{font-size:19px;margin:0}.card-caption span{font-size:11px;color:#666}
.service-card>p{font:12px/1.5 'Courier New',monospace;margin:8px 0 0;color:#666}
.page-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #8885;padding-top:25px;margin-top:70px;font-size:12px}
.page-footer a:hover,.back-work:hover,.project-next a:hover{text-decoration:underline;text-underline-offset:5px}
.dark-page{background:#111;color:#f5f4f1;min-height:calc(var(--dh) - 26px)}
.has-route:has(.dark-page) #routePanel{background:#111}
.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.archive-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:filter .25s}.archive-grid a:hover img{filter:brightness(1.12)}
.archive-grid h2{font-size:14px;margin:14px 0 7px}.archive-grid p,.archive-note{font-size:11px;color:#aaa;line-height:1.7}.archive-note{margin-top:35px}
.about-hero,.contact-hero{display:grid;grid-template-columns:47% 53%;min-height:calc(var(--dh) - 26px);background:#121212;color:#fff}
.about-art,.contact-art{min-width:0;overflow:hidden}.about-art img,.contact-art img{display:block;width:100%;height:100%;object-fit:cover}
.about-copy{padding:85px 34px 88px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.about-copy>p,.contact-copy>p{font-size:12px;color:#ccc;margin:0}
.about-copy h1,.contact-copy h1{font-size:clamp(30px,4vw,62px);line-height:1.2;letter-spacing:-.04em;margin:0;font-weight:900}
.about-copy>div>p{font-size:14px;line-height:1.9;max-width:440px;color:#ccc}.about-copy>div>p:first-child{color:#fff;font-weight:bold}
.page-cta{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:14px 22px;background:#161616;color:#fff;border:0;border-radius:0;font-size:13px;cursor:pointer}
.about-copy .page-cta,.contact-copy .page-cta{background:#f5ef62;color:#111;margin-top:20px}
.page-cta:hover{filter:brightness(.9)}
.about-process .page-heading h2,.contact-form-section .page-heading h2{font-size:64px}
.process-line{display:grid;grid-template-columns:35px 1fr 1.5fr;gap:20px;padding:28px 0;border-top:1px solid #ccc;align-items:baseline}
.process-line h3{font-size:20px;margin:0}.process-line p{font-size:14px;line-height:1.7;margin:0}.process-line>span{font:14px 'Courier New',monospace}
.contact-hero{grid-template-columns:53% 47%}
.contact-copy{padding:90px 36px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:35px}
.contact-copy h1{font-size:clamp(34px,4.2vw,68px)}
#pageBrief{max-width:780px}#pageBrief label{display:flex;flex-direction:column;gap:12px;margin:0 0 25px;font-size:13px;font-weight:600}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px}
#pageBrief input,#pageBrief select,#pageBrief textarea{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;color:#111;padding:14px 0;font:14px/1.5 Arial,'Microsoft YaHei',sans-serif;border-radius:0;resize:vertical}
#pageBrief :is(input,select,textarea):focus{outline:none;border-color:#111;box-shadow:0 1px 0 #111}
#pageBrief input::placeholder,#pageBrief textarea::placeholder{color:#777;font-weight:400}
.form-note,#pageFormStatus{font-size:12px;line-height:1.8;color:#666}
.project-page-heading h1{font:900 clamp(60px,7vw,110px)/.95 Condensed,Arial,sans-serif;max-width:850px;letter-spacing:-.015em;margin:20px 0 38px}
.project-page-heading>p,.back-work{font-size:12px}.back-work{display:inline-block;margin-bottom:30px}
.project-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}.project-meta dt{font-size:11px;color:#777;margin-bottom:12px}.project-meta dd{font-size:14px;margin:0}
.detail-cover{width:100%;height:calc(var(--dh) * .85);object-fit:cover;display:block}
.detail-story{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:60px;padding-bottom:60px}
.detail-story h2{font-size:clamp(25px,3vw,44px);line-height:1.4;margin:0}.detail-story p,.detail-story li{font-size:14px;line-height:1.9}.detail-story ul{padding-left:18px;margin:20px 0 30px}
.project-next{display:flex;justify-content:space-between;gap:20px;padding:32px 34px;border-top:1px solid #ccc;font-size:14px}
.missing-page{min-height:calc(var(--dh) - 26px)}
.dock{white-space:nowrap}.dock button{flex-shrink:0}
@media(max-width:700px){
 #routePanel{padding-bottom:75px}.page-pad{padding:64px 19px 30px}
 .page-heading{display:block;margin-bottom:25px}.page-heading h1{font-size:64px}.page-heading>span{display:block;text-align:left;margin-top:14px;font-size:10px}
 .page-intro{font-size:13px;margin-bottom:24px}.page-intro br{display:none}
 .page-filters{gap:6px;margin-bottom:22px}.page-filters button{padding:10px 12px;font-size:11px;min-height:38px}
 .service-grid{grid-template-columns:1fr;gap:28px}.card-caption h2{font-size:17px}.service-card>p{font-size:10px}
 .archive-grid{grid-template-columns:1fr 1fr;gap:22px 12px}.archive-grid h2{font-size:12px}.archive-grid p{font-size:9px}
 .about-hero,.contact-hero{display:flex;flex-direction:column}.about-art{height:240px;order:2}.about-copy{padding:68px 22px 35px;gap:30px}.about-copy h1{font-size:38px}.about-copy>div>p{font-size:12px}
 .about-process .page-heading h2,.contact-form-section .page-heading h2{font-size:48px}.process-line{grid-template-columns:24px 1fr;gap:12px;padding:22px 0}.process-line h3{font-size:18px}.process-line p{grid-column:2;font-size:12px}
 .contact-copy{padding:70px 22px 35px;gap:25px}.contact-copy h1{font-size:40px}.contact-art{height:250px}
 .form-pair{grid-template-columns:1fr;gap:0}#pageBrief input,#pageBrief select,#pageBrief textarea{font-size:16px}
 .project-page-heading h1{font-size:60px}.project-meta{gap:14px;grid-template-columns:1fr}.project-meta>div{display:flex;justify-content:space-between;gap:16px}.project-meta dt{margin:0}.project-meta dd{font-size:12px}
 .detail-cover{height:390px}.detail-story{display:block}.detail-story h2{font-size:27px;margin-bottom:24px}.detail-story p,.detail-story li{font-size:13px}.project-next{padding:24px 19px;font-size:11px}
 .page-footer{font-size:10px;line-height:1.6;margin-top:45px}.dock{max-width:calc(100% - 16px)}.dock button{padding:10px 10px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.service-image img,.archive-grid img{transition:none}.service-card:hover img{transform:none}}
/* Keep editorial copy together rather than stretching it across the screen. */
.about-copy,.contact-copy{padding:84px clamp(30px,calc(var(--dw) * .043),64px) 96px;justify-content:center;align-items:flex-start;gap:27px}
.about-copy h1,.contact-copy h1{font-size:clamp(30px,calc(var(--dw) * .034),48px);font-weight:700;line-height:1.4;letter-spacing:0}
.about-copy>p,.contact-copy>p{font-size:12px;line-height:1.7;letter-spacing:.08em;color:#aaa}
.about-copy>div>p{font-size:14px;line-height:1.9;color:#aaa;margin:12px 0 0;max-width:390px}
.about-copy>div>p:first-child{font-size:14px;font-weight:500;letter-spacing:.04em;color:#ddd;margin-top:0}
.about-copy .page-cta{margin-top:28px}.contact-copy .page-cta{margin-top:4px}
@media(max-width:700px){.about-copy,.contact-copy{padding:72px 24px 46px;gap:23px}.about-copy h1,.contact-copy h1{font-size:clamp(25px,7.2vw,36px);line-height:1.45}.about-copy>p,.contact-copy>p{font-size:11px}.about-copy>div>p{font-size:12px}.about-copy>div>p:first-child{font-size:13px}.about-copy .page-cta{margin-top:24px}}