/* Header controls use the same typography and inherited ink as the JZD wordmark. */
.language-switch{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:1px;height:38px;white-space:nowrap;color:inherit;pointer-events:auto}
.language-switch>span{font-size:10px;opacity:.4;padding:0 2px}
.language-switch button{position:relative;display:grid;place-items:center;min-width:34px;min-height:38px;margin:0;padding:0 3px;border:0;border-radius:0;background:transparent;color:inherit;font:600 11px/1 "Avenir Next",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.02em;cursor:pointer;opacity:.55;transition:opacity .18s ease}
.language-switch button[aria-pressed="true"],.language-switch button:hover{opacity:1}
.language-switch button::after{content:"";position:absolute;bottom:5px;left:8px;right:8px;height:1px;background:currentColor;opacity:0}
.language-switch button[aria-pressed="true"]::after{opacity:1}
.language-switch button:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:3px;opacity:1}
.site-header .header-end{gap:12px}
.site-header .location{margin-right:4px;flex-shrink:0}
.case-page-v3 .case-header nav{gap:26px}

/* English is typeset as website copy; packaging artwork keeps its original text. */
html[lang="en"] .project-copy h3{white-space:normal;font-size:clamp(32px,3.5vw,56px);letter-spacing:-.025em}
html[lang="en"] .project-copy{min-width:0}
html[lang="en"] .project-display-title{max-width:17ch}
/* Keep the original showcase geometry in both languages. Only English type
   size and line breaks adapt; the cover, caption origin, ruler and field stay put. */
html[lang="en"] .immersive .project-copy h3{font-size:clamp(27px,2.45vw,42px);font-weight:500;line-height:1.25;letter-spacing:-.025em}
html[lang="en"] .immersive .project-copy .project-display-title{max-width:17ch;font-size:clamp(22px,1.75vw,30px);font-weight:500;line-height:1.28;letter-spacing:-.015em;white-space:pre-line}
html[lang="en"] .immersive .showcase-ankole .project-display-title{max-width:13ch}
html[lang="en"] .immersive .showcase-little-prince .project-display-title{max-width:17ch}
html[lang="en"] .immersive :is(.showcase-siqi,.showcase-ai-7-days) .project-display-title{max-width:min(17ch,16vw)}
html[lang="en"] .showcase-top h2>span{display:none}
html[lang="en"] .studio-services-intro h2{font-size:clamp(36px,3.9vw,65px);letter-spacing:-.035em}
html[lang="en"] .service-row h3{font-size:clamp(20px,1.9vw,29px);line-height:1.2}
html[lang="en"] .contact-centered .contact-content h2{font-size:clamp(34px,5.2vw,82px);letter-spacing:-.035em}
html[lang="en"] .collection-title-row h1{font-size:clamp(48px,5.7vw,96px);letter-spacing:-.04em}
html[lang="en"] .collection-caption-title h2{line-height:1.3}
html[lang="en"] .case-page-v3 .case-opening h1{font-size:clamp(30px,3.2vw,55px);max-width:88%;letter-spacing:-.025em}
html[lang="en"] .case-project-facts dl{column-gap:18px}
html[lang="en"] .case-project-facts .case-scroll-cue{width:150px;max-width:100%}
html[lang="en"] .case-page-v3 .case-chapter-copy h2{font-size:clamp(23px,2.1vw,34px);line-height:1.3}
html[lang="en"] .case-page-v3 :is(.case-editorial,.case-context,.case-project-facts,.case-point){overflow-wrap:break-word}
html[lang="en"] .case-page-v3 .case-closing h2{font-size:clamp(34px,4.8vw,74px)}

html[lang="en"] body:not(.immersive):not(.mobile-showcase) .project-copy h3{max-width:100%;overflow-wrap:break-word}

/* Anchor the navigation group to the viewport midpoint, independently of the
   unequal logo and language/action groups on either side. */
@media(min-width:960px){
  .site-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .site-header .desktop-nav{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%)}
  .site-header .header-end{grid-column:2;justify-self:end;min-width:0}
}
@media(min-width:960px) and (max-width:1200px){
  .site-header .location{display:none}
}
@media(max-width:767px){
  .language-switch{height:36px}
  .language-switch button{min-width:31px;min-height:36px;font-size:10px}
  .site-header .header-end{gap:6px}
  .site-header .motion-toggle,.site-header .menu-toggle{width:34px;height:34px;min-width:34px;min-height:34px;flex:none}
  /* Keep language and motion together, with project navigation on its own row. */
  .case-page-v3 .case-header{height:112px;align-items:flex-start;padding-top:23px}
  .case-page-v3 .case-header nav{display:contents}
  .case-page-v3 .case-header .language-switch{position:absolute;right:69px;top:22px}
  .case-page-v3 .case-header .case-nav-back{position:absolute;top:68px;left:22px;transform:none;font-size:11px}
  .case-page-v3 .case-header .case-nav-contact{position:absolute;top:68px;right:22px;font-size:11px}
  .case-page-v3 .case-opening{padding-top:140px}
  .collection-header{align-items:flex-start;flex-wrap:wrap;gap:12px}
  .collection-header nav{gap:14px}
  html[lang="en"] .project-copy h3{font-size:36px}
  html[lang="en"] .mobile-showcase .project-copy h3{font-size:27px;line-height:1.1}
  html[lang="en"] .mobile-showcase .project-display-title{font-size:17px;line-height:1.2;max-width:23ch;margin-top:5px}
  html[lang="en"] .mobile-showcase .project-category{font-size:8px;margin-top:8px}
  html[lang="en"] .studio-services-intro h2{font-size:clamp(34px,7.5vw,52px)}
  html[lang="en"] .service-row h3{font-size:21px}
  html[lang="en"] .collection-title-row h1{font-size:clamp(43px,8.5vw,72px)}
  html[lang="en"] .collection-filters{flex-wrap:wrap;gap:8px 20px}
  html[lang="en"] .case-page-v3 .case-opening h1{max-width:none;font-size:clamp(28px,6.5vw,44px);line-height:1.25}
  html[lang="en"] .case-page-v3 .case-closing h2{font-size:clamp(32px,7vw,48px)}
}
@media(max-width:600px){
  .site-header{padding-inline:20px}
  .site-header .wordmark{gap:9px}
  .collection-header nav{width:100%;justify-content:space-between;gap:8px}
  .collection-opening{padding-top:164px}
  html[lang="en"] .service-row{grid-template-columns:19px minmax(0,1fr)}
  html[lang="en"] .service-row .line-link{grid-column:2;grid-row:3;justify-self:start;padding-left:0}
  html[lang="en"] .service-row>p{grid-column:2}
  html[lang="en"] .contact-centered .contact-content h2{font-size:clamp(31px,7.5vw,44px)}
  html[lang="en"] .menu-dialog nav a{font-size:clamp(27px,7vw,42px)}
  html[lang="en"] .menu-dialog nav{grid-template-columns:minmax(0,1fr)}
  html[lang="en"] .menu-dialog nav a{min-width:0;overflow-wrap:break-word}
}
@media(max-height:650px){
  html[lang="en"] .mobile-showcase .project-copy h3{font-size:23px}
  html[lang="en"] .mobile-showcase .project-display-title{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.language-switch button{transition:none}}