/* v75: shared site refinements and proportionally scaled project diagrams. */
:root{--font:var(--nav-font);--mono:var(--nav-font);--copyright-inset:32px}
.home-statement{font-family:var(--nav-font);top:71.5%}
html[lang="en"] .home-statement{font-family:"Avenir Next",Avenir,var(--nav-font);letter-spacing:.025em}
html[lang="en"] .home-statement span:last-child{font-weight:400;letter-spacing:.025em}
.nav-hover-zone{display:none;position:fixed;inset:0 auto 0 0;width:var(--nav-w);z-index:39}
.counter:empty{display:none}
.side-nav{gap:6px}
.side-nav a,.side-nav button{min-height:22px;line-height:1.2}
.language-switch{gap:6px;margin:25px 0 26px}
.language-switch button{min-height:22px;line-height:1.2}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
  body.is-home .nav-hover-zone{display:block}
  body.is-home .sidebar,body.is-home .sidebar:hover{transform:translateX(-16px);transition:opacity .85s ease,transform .85s var(--ease),visibility 0s linear .85s}
  body.is-home.nav-open .sidebar{transform:none;transition:opacity .24s ease,transform .34s var(--ease),visibility 0s}
}
body.is-home .sidebar .brand-logo{filter:none;mix-blend-mode:normal}
body.is-home .sidebar .brand-logo img{filter:url("#logoWhite");mix-blend-mode:normal}
.home-center-logo.brand-logo{aspect-ratio:916/1154;width:clamp(112.2px,9.88125vw,158.1px);max-width:17.2125dvh;top:50%}
.home-center-logo.brand-logo img{width:223.47162%;left:-59.82533%;top:-43.50087%;height:auto}
html[lang="zh-CN"] .project-row .year,html[lang="zh-CN"] .project-row .title,html[lang="zh-CN"] .project-row .type{font-weight:500}
.project-image-pair .project-image-button{aspect-ratio:var(--pair-ratio);overflow:hidden}
.project-image-pair .project-image-button img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
.hover-image{transform:translateY(3px);transition:opacity 90ms ease-out,transform 90ms ease-out;will-change:opacity,transform}
.hover-image.visible{transform:none;transition:opacity 450ms ease,transform 450ms ease}
.hover-image img{display:block;width:100%;height:100%;object-fit:contain}
/* Natural aspect ratios with a shared image height in each resting row. */
.gallery-grid{--gallery-gap:4px;visibility:hidden}
.gallery-grid.is-laid-out{visibility:visible}
.gallery-row{height:calc(var(--row-height) + 24.5px);column-gap:var(--gallery-gap);align-items:flex-start}
.gallery-row .gallery-card{flex:1 1 0px;min-width:0;padding:0;transition:flex-grow 320ms cubic-bezier(.22,.61,.36,1)}
.gallery-row .gallery-card a,.gallery-row .gallery-thumb{aspect-ratio:var(--gallery-ratio);height:auto}
.gallery-row .gallery-thumb{position:relative;overflow:visible;background:transparent}
.gallery-row .gallery-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:none}
.gallery-row .gallery-caption{position:absolute;top:100%;left:0;right:0;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;pointer-events:none;transition:opacity 160ms ease-out}
@media(max-width:760px){.gallery-grid{--gallery-gap:3px}}

.studio-page{font-family:var(--nav-font)}
.studio-section{padding-bottom:70px;scroll-margin-top:96px;--studio-body-width:600px}
.studio-section h2{font-size:18px;line-height:1.35;font-weight:650;margin:0 0 23px;letter-spacing:.01em;-webkit-text-stroke:0}
.studio-section p{font-size:13px;line-height:1.8;font-weight:400;max-width:var(--studio-body-width);margin:0 0 18px}
.studio-section p:last-child{margin-bottom:0}
.studio-subnav{gap:6px}
.studio-subnav button{font-size:13px;min-height:26px;line-height:1.35;font-weight:500}
.studio-subnav button.active{font-weight:500}
.studio-subnav button{transform:none;transition:color .18s ease}
.studio-nav-slot{display:inline-grid;pointer-events:none;text-align:left}
.studio-nav-measure,.studio-nav-text{grid-area:1/1;white-space:nowrap}
.studio-nav-measure{visibility:hidden;font-weight:700;padding-right:6px}
.studio-nav-text{font-weight:500;transform:none;transition:transform 240ms var(--ease),color 180ms ease}
.studio-subnav button.active .studio-nav-text{font-weight:650;transform:translateX(4px)}
.studio-topics{margin:24px 0 0;padding-inline-start:0;width:100%;max-width:var(--studio-body-width);display:grid;gap:16px;font-family:var(--nav-font);font-size:13px;line-height:1.8}
.studio-topics>div{display:grid;grid-template-columns:126px minmax(0,1fr);gap:20px;align-items:start}
html[lang="en"] .studio-topics>div{grid-template-columns:140px minmax(0,1fr)}
.studio-topics dt{font-size:14px;font-weight:600;line-height:1.7}
.studio-topics dd{margin:0;min-width:0;font-size:12.5px;line-height:1.6;font-weight:400;color:#595959;overflow-wrap:break-word}
.studio-stages{gap:16px}
.studio-stages>div{grid-template-columns:176px minmax(0,1fr)}
html[lang="en"] .studio-stages>div{grid-template-columns:228px minmax(0,1fr)}
.stage-code{white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:.025em}
.studio-page .site-footer{margin-top:30px}
.studio-page .site-footer h2{font-size:14px;font-weight:650}
.studio-page .footer-contact-grid h3{font-size:12.5px}
.studio-page .footer-contact-grid p,.studio-page .footer-contact-grid a,.studio-page .footer-contact-grid button{font-size:12px;line-height:1.6}
body.is-contact .main-area{padding-right:48px}
.contact-v64-layout{grid-template-columns:minmax(0,clamp(280px,26vw,380px)) minmax(0,1fr);gap:clamp(70px,8vw,140px)}
.contact-slogan{font-size:clamp(24px,1.8vw,28px)}
.contact-intro{font-size:13px;line-height:1.8;margin-bottom:36px}
.contact-form{gap:24px}
.contact-form input,.contact-form textarea{font-size:13px}
.contact-information{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 48px;max-width:820px}
.contact-information .contact-address-col{grid-column:1;grid-row:1}
.contact-page .contact-information .footer-email-col{grid-column:2;grid-row:1}
.contact-follow-column{min-width:0;grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding-top:24px}
.contact-information p{font-size:12px;line-height:1.8}
.contact-information .footer-email-group h3{font-size:13px}
.contact-information .footer-email-group{margin-bottom:24px}
.contact-map{margin-top:24px;aspect-ratio:4/3;max-width:220px}
.contact-socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:32px;border:0;padding:0;margin:24px 0 0}
.contact-social-item h3{font-size:13px;margin:0 0 6px;text-transform:none}
.contact-social-item .social-handle{font-size:11px;line-height:1.65;white-space:nowrap;overflow-wrap:normal}
.contact-qr{position:relative;overflow:hidden;width:108px;height:108px;max-width:none;aspect-ratio:1;margin:14px 0 8px;padding:0;line-height:0}
.contact-qr img{position:absolute;max-width:none;height:auto;object-fit:contain}
/* Equal square viewports with similar quiet zones; original files remain intact. */
.contact-qr--wechat img{width:107.738095%;left:-4.464286%;top:-1.636905%}
.contact-qr--instagram img{width:133.558559%;left:-16.216216%;top:-6.756757%}
.contact-social-item .social-note{font-size:10.5px;line-height:1.7;margin:8px 0 0}
.contact-social-item .copy-account{font-size:10.5px;min-height:27px;margin-top:2px}
@media(max-width:1250px) and (min-width:1101px){
  body.is-contact .main-area{padding-left:calc(var(--nav-w) + 28px);padding-right:32px}
  .contact-v64-layout{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:64px}
  .contact-information{gap:52px 28px}
  .contact-socials{gap:22px}
  .contact-map{max-width:200px}
}
@media(max-width:1100px){
  .studio-subnav{gap:12px 24px;flex-wrap:wrap}
  .studio-layout{gap:38px}
  .studio-section{padding-bottom:60px}
  .contact-v64-layout{grid-template-columns:minmax(0,1fr);gap:76px;max-width:720px}
  .contact-form-column,.contact-form{max-width:410px}
  .contact-information{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 32px}
  .contact-socials{gap:24px}
  .contact-qr{width:108px;height:108px;max-width:none}
}
@media(max-width:760px){
  .primary-nav,.filters{gap:4px}
  .side-nav a,.side-nav button{min-height:32px;line-height:1.25}
  .language-switch{gap:18px;margin:22px 0}
  .language-switch button{min-height:28px}
  .home-center-logo.brand-logo{width:min(29.325vw,117.3px);max-width:16.575dvh;top:50%}
  html[lang="zh-CN"] .project-row .type{font-weight:350}
  .studio-subnav{gap:6px 19px;margin:0}
  .studio-subnav button{font-size:12.5px;min-height:28px}
  .studio-section{padding-bottom:52px;scroll-margin-top:110px}
  .studio-section h2{font-size:17px;margin-bottom:20px}
  .studio-section p,.studio-topics{font-size:12.5px;line-height:1.8}
  .studio-section p{margin-bottom:16px}
  .studio-topics{gap:16px;margin-top:22px}
  .studio-topics dd{font-size:12px;line-height:1.6}
  .studio-stages{gap:16px}
  .studio-topics>div,html[lang="en"] .studio-topics>div{grid-template-columns:1fr;gap:3px}
  .studio-topics dt{font-size:13.5px}
  .studio-layout{gap:32px}
  .studio-page .site-footer{margin-top:20px}
  body.is-contact .main-area{padding-right:22px}
  .contact-v64-layout{gap:68px}
  .contact-slogan{font-size:25px}
  .contact-form input,.contact-form textarea{font-size:16px}
  .contact-information{grid-template-columns:1fr;gap:32px}
  .contact-page .contact-information .footer-email-col{grid-column:1;grid-row:2}
  .contact-information .footer-email-list{gap:22px 14px}
  .contact-information .footer-email-group{margin-bottom:0}
  .contact-information p{font-size:12px}
  .contact-map{max-width:320px;aspect-ratio:16/9}
  .contact-follow-column{grid-column:1;grid-row:3;padding-top:28px;border-top:1px solid var(--line)}
  .contact-socials{grid-template-columns:1fr;gap:30px;margin-top:25px}
  .contact-social-item{display:grid;grid-template-columns:minmax(0,1fr) 108px;column-gap:22px;align-items:start}
  .contact-social-item h3,.contact-social-item .social-handle,.contact-social-item .social-note,.contact-social-item .copy-account{grid-column:1;justify-self:start}
  .contact-qr{grid-column:2;grid-row:1/5;margin:0;width:108px;height:108px}
  .contact-social-item:last-child{display:block;grid-column:auto}
  .contact-social-item .social-handle{font-size:12px}
  .contact-social-item h3{font-size:13px;margin-bottom:6px}
  .contact-social-item .copy-account{min-height:30px}
}
@media(max-height:640px) and (max-width:760px){
  .home-center-logo.brand-logo{width:84.15px;max-width:15.3dvh;top:50%}
  .home-statement{top:69%;gap:8px;font-size:12px}
  .home-statement span:last-child{font-size:18px}
  .home-project-link{bottom:73px}
  .video-controls{bottom:15px}
}
/* A single viewport anchor keeps copyright consistent across routes and scroll positions. */
.site-copyright{position:fixed;right:calc(var(--copyright-inset) - (100vw - 100%));bottom:18px;z-index:46;margin:0;padding:2px 0;font-family:var(--nav-font);font-size:11px;font-weight:500;font-style:normal;line-height:16px;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--text);background:rgba(255,255,255,.94);pointer-events:none}
body.is-home .site-copyright{color:#fff;background:transparent;text-shadow:0 1px 8px #0008}
.site-footer{padding-bottom:70px}
.counter{right:calc(var(--copyright-inset) - (100vw - 100%));bottom:50px}
body.is-home .video-controls{bottom:52px}
@media(max-width:760px){
  :root{--copyright-inset:22px}
  .home-project-link{bottom:106px}
}
@media(prefers-reduced-motion:reduce){
  body.is-home .sidebar,body.is-home .sidebar:hover,body.is-home.nav-open .sidebar{transition:none}
  .hover-image,.hover-image.visible{transition:none}
  .hover-image,.studio-subnav button.active .studio-nav-text,.gallery-card:hover .gallery-thumb img,.gallery-card:focus-within .gallery-thumb img{transform:none}
}

/* Desktop inner pages use the top-aligned navigation shown in the reference. */
@media(min-width:761px){body:not(.is-home) .sidebar{padding-top:26px;transform:none;transition:none}}
.sidebar .primary-nav a,.sidebar .language-switch button{font-size:13.5px}
.sidebar .primary-nav a:hover,.sidebar .primary-nav a:focus-visible{transform:none}
/* Keep the full brand mark centred in the video, including its wordmark. */
@media(max-width:760px){
  .sidebar .primary-nav a,.sidebar .language-switch button{font-size:14px}
}
@media(max-height:560px) and (max-width:760px){
  .home-project-link{bottom:52px}
  .home-statement{top:72%;gap:6px;font-size:11px}
  .home-statement span:last-child{font-size:16px}
}
/* Platform + account on one line; its QR sits immediately below. */
.site-footer .footer-socials{gap:22px}
.footer-social-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.site-footer .footer-social-item .social-handle{display:block;line-height:1.6}
.site-footer .footer-qr{width:88px;height:88px;flex:0 0 88px;max-width:none;margin:0}

/* Centre the full logo-and-copy group; the mark is 80% of its v66 size. */
.home-copy{inset:auto;left:50%;top:50%;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(40px,7.2dvh,72px);transform:translate(-50%,-50%)}
.home-copy .home-center-logo.brand-logo{position:relative;left:auto;top:auto;transform:none;flex-shrink:0;width:clamp(89.76px,7.905vw,126.48px);max-width:13.77dvh}
.home-copy .home-statement{position:static;left:auto;top:auto;transform:none;flex-shrink:0}
@media(max-width:760px){
  .home-copy{gap:clamp(28px,6dvh,48px)}
  .home-copy .home-center-logo.brand-logo{width:min(23.46vw,93.84px);max-width:13.26dvh}
}
@media(max-height:640px) and (max-width:760px){
  .home-copy{gap:clamp(22px,5dvh,32px)}
  .home-copy .home-center-logo.brand-logo{width:67.32px;max-width:12.24dvh}
}

/* Shared grid lines align CONTACT with the actual subnav width in both languages. */
@media(min-width:1101px){
  .studio-page.active{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) minmax(0,46%) 14%;align-items:start}
  .studio-layout{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-row:1;gap:0;align-items:start}
  .studio-subnav{grid-column:2;grid-row:1;justify-self:start}
  .studio-content{grid-column:4;grid-row:1}
  .studio-page .site-footer{grid-column:2/5;grid-row:2;width:auto;max-width:none;margin-top:96px;margin-left:0;margin-right:0}
}
@media(min-width:1101px) and (max-width:1450px){
  .studio-page.active{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) minmax(0,59%) 13%}
}
@media(max-width:1100px){.studio-page .site-footer{margin-top:72px}}
@media(max-width:760px){.studio-page .site-footer{margin-top:56px}}

/* Selected diagrams: narrower than the media column, centred, uncropped. */
.project-image-stack .project-figure--compact{width:84%;margin-inline:auto}
.project-figure--compact .project-image-button img{width:100%;height:auto;object-fit:contain}

/* v75 — a closer typographic relationship, and slightly tighter project rows. */
.home-statement{font-size:18px}
.home-statement span:last-child{font-size:21px}
.project-row{min-height:44px}
.project-composition-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.project-composition-row + .project-composition-row{margin-top:4px}
.project-composition-row--landscape{margin-bottom:5%}
.project-composition-row .project-image-button{display:block;width:100%;aspect-ratio:16/9}
.project-composition-row--landscape .project-image-button{aspect-ratio:2048/1373}
.project-composition-row .project-image-button img{width:100%;height:100%;object-fit:cover}
.gallery-row .gallery-thumb img{transform:scale(var(--gallery-image-scale,1));transform-origin:center}
[data-project-media],.project-image-button,.gallery-card a,#hoverImage{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.contact-qr--rednote img{width:100%;height:100%;left:0;top:0;object-fit:contain}
@media(max-width:760px){
  .home-statement{font-size:15px}
  .home-statement span:last-child{font-size:18px}
  .project-row{min-height:56px}
  .project-row .title{padding-top:8px}
  .project-row .year{padding-top:9px}
  .project-row .type{padding-bottom:7px}
  .contact-social-item:last-child{display:grid;grid-column:auto}
  .project-composition-row{gap:3px}
  .project-composition-row + .project-composition-row{margin-top:3px}
}
@media(max-height:640px) and (max-width:760px){
  .home-statement{font-size:14px}
  .home-statement span:last-child{font-size:17px}
}
@media(max-height:560px) and (max-width:760px){
  .home-statement{font-size:13px}
  .home-statement span:last-child{font-size:16px}
}