/* collection.css */
/* Work index: a colour-led introduction followed by an open editorial archive. */
@property --peek-radius{syntax:'<length>';inherits:false;initial-value:0px}
.collection-page{overflow-anchor:none}
:root{--paper:#fff;--ink:#151916;--muted:#747b74;--line:#b8bdb7;--gutter:clamp(24px,4.5vw,88px);font-family:"Avenir Next",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0px}body{margin:0;-webkit-font-smoothing:antialiased}h1,h2,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #6b9479;outline-offset:7px}[hidden]{display:none!important}::selection{background:#cce1a8;color:#10241b}
.collection-skip{position:fixed;top:-90px;left:20px;z-index:90;padding:15px;background:#fff}.collection-skip:focus{top:10px}
.collection-header{position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:28px var(--gutter);color:#fff}
/* Keep the homepage wordmark's font stack, glyph metrics and registration mark. */
.collection-brand.wordmark{display:flex;align-items:flex-end;gap:12px;width:max-content;line-height:1}
.collection-brand.wordmark strong{position:relative;font-size:36px;font-weight:760;letter-spacing:-.08em}
.collection-brand.wordmark strong span{position:absolute;top:1px;right:-8px;font-size:12px;font-weight:400;letter-spacing:0}
.collection-brand.wordmark>span{font-size:9px;letter-spacing:.12em;margin-bottom:3px;margin-left:5px}
.collection-header nav{display:flex;align-items:center;gap:35px;font-size:13px;font-weight:600}.collection-header nav a{position:relative;padding:8px 0}.collection-header nav a::after{content:"";position:absolute;bottom:1px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}.collection-header nav a:hover::after,.collection-header nav a[aria-current]::after{transform:scaleX(1)}
.collection-motion{display:grid;place-items:center;border:1px solid #ffffff65;border-radius:50%;width:40px;height:40px;background:transparent;color:#fff;font-size:14px}.collection-motion:hover{background:#ffffff20}
.collection-opening{position:relative;isolation:isolate;overflow:hidden;min-height:530px;height:70svh;max-height:780px;padding:132px var(--gutter) 54px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:#061b14}
.collection-flow{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 95%,#b5d589,transparent 56%),radial-gradient(ellipse at 90% 0%,#008c71,transparent 53%),#071910}.collection-flow canvas{width:100%;height:100%;display:block}.flow-fallback .collection-flow canvas{display:none}.collection-flow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020b0645,transparent 65%);pointer-events:none}
.collection-eyebrow{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.09em;color:#ffffffb8}.collection-title-row{display:grid;grid-template-columns:1.4fr .9fr 40px;align-items:end;gap:40px;margin-top:26px}
.collection-title-row h1{font-size:clamp(64px,6.6vw,115px);font-weight:400;line-height:1.06;letter-spacing:-.055em}.collection-title-row h1>span{display:block;transform-origin:left center}.collection-title-arrow{display:inline-block;line-height:.7;margin-left:.16em;font-weight:300}.collection-title-row>p{max-width:330px;font-size:13px;line-height:1.8;border-left:1px solid #ffffff90;padding-left:14px;margin-bottom:6px}.collection-scroll{font-size:46px;font-weight:300;line-height:1;margin-bottom:5px;transition:transform .35s}.collection-scroll:hover{transform:translateY(7px)}
.collection-layout{position:relative;display:grid;grid-template-columns:20% minmax(0,1fr);column-gap:5%;padding:120px var(--gutter) 155px;align-items:start;scroll-margin-top:0px;background:#fff}
.collection-sidebar{position:sticky;top:95px;align-self:start;max-width:172px}.collection-filters{position:relative;padding-left:30px;--filter-index:0}.collection-ruler{position:absolute;left:10px;top:22px;bottom:22px;width:7px}.collection-ruler i{position:absolute;left:0;top:calc(var(--tick)*100%);height:1px;width:1px;background:#717a71}.collection-ruler i.is-major{width:5px;background:#303830}.collection-filter-marker{position:absolute;left:0;top:calc(19px + var(--filter-index)*48px);width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid #17281b;transition:top .45s cubic-bezier(.2,.7,.2,1)}
.collection-filters button{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;min-height:48px;width:100%;padding:10px 0 10px 3px;background:none;border:0;text-align:left;font-size:13px;font-weight:400;line-height:1.3;color:#747c74;transition:color .2s,transform .25s}.collection-filters button small{font-size:10px;font-weight:400;font-variant-numeric:tabular-nums;opacity:.8}.collection-filters button:hover{color:#17281b;transform:translateX(3px)}.collection-filters button[aria-pressed=true]{color:#111a14;font-weight:600}.collection-status{margin:34px 0 0 33px;font-size:10px;color:var(--muted);line-height:1.6}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6.5vw,126px);row-gap:105px;padding-bottom:105px;align-items:start}.collection-item{min-width:0;--card-offset:0px;transform:translateY(var(--card-offset))}.collection-item.is-right{--card-offset:105px}.collection-project{display:block}.collection-image{position:relative;overflow:hidden;background:#f0f0ed;isolation:isolate}.collection-image>img{transition:transform .9s cubic-bezier(.2,.6,.2,1);transform:scale(1);object-fit:contain}.collection-project:hover .collection-image>img{transform:scale(1.035)}
.collection-cover-title{position:absolute;left:6%;top:17%;width:32%;font-size:clamp(23px,2.4vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.055em;color:#151b17;pointer-events:none}.collection-cover-title small{display:block;margin-top:12px;font-size:9px;font-weight:500;letter-spacing:0}
.collection-project:focus-visible .collection-image{outline:2px solid #315c40;outline-offset:4px}
.collection-caption{margin-top:24px;padding-top:12px;border-top:1px solid #252c26}.collection-category{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:9px;letter-spacing:.04em;color:#7a8079;line-height:1.6}.collection-category>span:first-child{font-size:9px}.collection-concept{font-size:9px;color:#5e765c;border:1px solid #cdd4c9;padding:0 5px;margin-left:3px}.collection-caption-title{display:flex;gap:18px;align-items:start;justify-content:space-between;margin-top:15px}.collection-caption h2{font-size:clamp(18px,1.75vw,29px);font-weight:400;line-height:1.42;letter-spacing:-.045em;text-wrap:balance}.collection-arrow{font-size:24px;line-height:1.25;opacity:0;transform:translate(-5px,5px);transition:transform .3s,opacity .3s}.collection-project:hover .collection-arrow,.collection-project:focus-visible .collection-arrow{opacity:1;transform:translate(0,0)}
.collection-empty{padding:60px 0}.collection-empty button{border:0;border-bottom:1px solid currentColor;background:none;padding:15px 0;margin-top:15px}
.collection-contact{position:relative;overflow:hidden;padding:70px var(--gutter) 90px;background:#081810;color:#fff}.collection-contact>p{display:flex;justify-content:space-between;font-size:11px;color:#becdbf;line-height:1.6;letter-spacing:.02em}.collection-contact>p span{font-size:10px;letter-spacing:.1em}.collection-contact>a{position:relative;display:block;margin-top:60px;padding-right:90px;font-size:clamp(48px,6.6vw,112px);font-weight:400;line-height:1.12;letter-spacing:-.05em}.collection-contact-arrow{position:absolute;right:0;bottom:5px;display:grid;place-items:center;width:84px;height:84px;font-size:44px;border:1px solid #bfcebc70;border-radius:50%;transition:background .35s,color .35s,transform .35s}.collection-contact>a:hover .collection-contact-arrow{background:#dcebb8;color:#19352c;transform:rotate(45deg)}.collection-footer{display:flex;justify-content:space-between;gap:20px;padding:28px var(--gutter);background:#081810;color:#b9c6b9;border-top:1px solid #ffffff28;font-size:10px;letter-spacing:.02em}
@media(min-width:1800px){.collection-layout{padding-top:150px}.collection-grid{row-gap:140px}}
@media(max-width:1100px){.collection-layout{grid-template-columns:17% minmax(0,1fr);column-gap:5%;padding-top:90px}.collection-grid{column-gap:35px;row-gap:75px}.collection-title-row{grid-template-columns:1.35fr 1fr 30px;gap:24px}.collection-title-row h1{font-size:72px}.collection-title-row>p{font-size:12px}.collection-sidebar{max-width:145px}.collection-filters{padding-left:24px}.collection-filters button{font-size:11px}.collection-filters button small{font-size:8px}.collection-status{margin-left:27px}}
@media(max-width:767px){html{scroll-padding-top:22px}.collection-header{padding:24px var(--gutter)}.collection-header nav{gap:19px;font-size:11px}.collection-header nav a:first-child{display:none}.collection-motion{width:32px;height:32px;font-size:12px}.collection-opening{height:auto;min-height:570px;max-height:none;padding-top:121px;padding-bottom:36px}.collection-eyebrow{font-size:8px}.collection-title-row{grid-template-columns:1fr 32px;gap:28px 12px;margin-top:35px}.collection-title-row h1{grid-column:1/-1;font-size:clamp(53px,10vw,78px);line-height:1.1;letter-spacing:-.055em}.collection-title-row>p{font-size:11px;max-width:270px;padding-left:11px;line-height:1.8}.collection-scroll{font-size:36px}.collection-layout{display:block;padding-top:42px;padding-bottom:72px}.collection-sidebar{position:relative;top:auto;max-width:none;margin-bottom:39px}.collection-filters{padding:0;display:flex;gap:19px;border-bottom:1px solid #d9ded6}.collection-ruler,.collection-filter-marker{display:none}.collection-filters button{width:auto;min-height:42px;gap:5px;padding:8px 0;font-size:11px;white-space:nowrap}.collection-filters button small{font-size:8px}.collection-filters button[aria-pressed=true]::after{content:"";position:absolute;bottom:-1px;left:0;right:0;background:#19352c;height:2px}.collection-filters button:hover{transform:none}.collection-status{margin:13px 0 0;font-size:9px}.collection-grid{grid-template-columns:1fr;gap:55px;padding-bottom:0}.collection-item.is-right{--card-offset:0px}.collection-caption{margin-top:18px;padding-top:11px}.collection-caption-title{margin-top:10px}.collection-caption h2{font-size:22px}.collection-arrow{opacity:1;transform:none;font-size:22px}.collection-cover-title{font-size:clamp(24px,6.5vw,40px)}.collection-contact{padding-top:42px;padding-bottom:52px}.collection-contact>p{font-size:9px;gap:10px}.collection-contact>p span{font-size:8px}.collection-contact>a{margin-top:46px;font-size:clamp(34px,7.7vw,56px);padding-right:40px}.collection-contact-arrow{width:38px;height:38px;font-size:25px}.collection-footer{font-size:8px;padding-top:22px;padding-bottom:22px}}
@media(max-width:600px){.collection-brand.wordmark strong{font-size:31px}.collection-brand.wordmark>span{font-size:8px}}
@media(pointer:coarse){.collection-project:hover .collection-image>img{transform:none}.collection-arrow{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.collection-project:hover .collection-image>img{transform:none}}
/* An alternate project image is revealed through a pointer-following aperture. */
.collection-peek{position:absolute;inset:0;z-index:3;pointer-events:none;--peek-radius:0px;clip-path:circle(var(--peek-radius) at var(--cursor-x,50%) var(--cursor-y,50%));transition:--peek-radius .45s cubic-bezier(.16,1,.3,1);background:#f3f3ef}
.collection-peek>img{display:block;width:100%;height:100%;object-fit:cover}
.collection-image.is-hovered .collection-peek{--peek-radius:clamp(68px,6.2vw,105px)}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.collection-peek{display:none}}

/* i18n.css */
/* 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}}