/* ============================================================
   TURING — Landscape Design. Minimal, image-led, luxurious.
   ============================================================ */
:root{
  --bg:        #f3f1ea;
  --bg-2:      #ece9df;
  --ink:       #1b1b17;
  --ink-soft:  #57554b;
  --ink-faint: #918f84;
  --line:      #d8d4c6;
  --accent:    #4a5347;
  --dark:      #14140f;
  --dark-soft: #2a2a22;
  --nav-h:     72px;
  --pad:       clamp(24px, 5vw, 72px);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Jost','Helvetica Neue',Arial,'Noto Sans SC',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[data-lang="zh"]{font-family:'Jost','Noto Sans SC','PingFang SC','Helvetica Neue',sans-serif;letter-spacing:.02em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}

.wrap{max-width:1500px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;
}
.serifless-h{font-weight:300;line-height:1.08;letter-spacing:-.01em}

/* ---------------- Top navigation ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.over-hero{color:#fff}
.nav.solid{background:rgba(243,241,234,.32);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);color:var(--ink);border-bottom-color:rgba(216,212,198,.45)}
.nav a,.nav button{color:inherit}
.nav__left,.nav__right{flex:1;display:flex;align-items:center;gap:26px}
.nav__right{justify-content:flex-end}
.nav__brand{
  font-size:22px;letter-spacing:.42em;font-weight:300;text-indent:.42em;
  white-space:nowrap;
}
.nav__link{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  position:relative;padding:4px 0;opacity:.85;transition:opacity .3s
}
.nav__link:hover{opacity:1}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .4s var(--ease)}
.nav__link:hover::after{width:100%}
.lang-toggle{
  font-size:12px;letter-spacing:.14em;font-weight:400;background:none;border:none;cursor:pointer;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;
  color:inherit;-webkit-text-fill-color:currentColor
}
.lang-toggle span{opacity:.4;transition:opacity .3s;color:inherit;-webkit-text-fill-color:currentColor}
.lang-toggle span.on{opacity:1}
.nav__menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;width:24px}
.nav__menu-btn span{height:1px;width:100%;background:currentColor;transition:.3s}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:200;background:var(--dark);color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 var(--pad);gap:6px;transform:translateY(-100%);transition:transform .6s var(--ease);
}
.drawer.open{transform:translateY(0)}
.drawer a{font-size:clamp(28px,7vw,52px);font-weight:300;letter-spacing:-.01em;padding:8px 0}
.drawer__close{position:absolute;top:24px;right:var(--pad);background:none;border:none;color:#fff;font-size:26px;cursor:pointer;font-weight:200}
.drawer__lang{position:absolute;top:26px;left:var(--pad);font-size:15px;letter-spacing:.16em;gap:9px}

/* ---------------- Hero ---------------- */
.hero{position:relative;height:100vh;height:100svh;min-height:540px;width:100%;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.92);opacity:0;transition:opacity 1.1s var(--ease)}
.hero__img.loaded{opacity:1}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.14) 36%,rgba(0,0,0,.52))}
.hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(48px,9vh,110px);padding-bottom:calc(clamp(48px,9vh,110px) + env(safe-area-inset-bottom));color:#fff}
.hero__mark{font-size:clamp(52px,12vw,150px);font-weight:200;letter-spacing:.12em;line-height:1;text-indent:.12em}
.hero__sub{margin-top:22px;max-width:30ch;font-size:clamp(15px,1.7vw,20px);font-weight:300;opacity:.92}
.hero__scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#fff;opacity:.7;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll::after{content:"";width:1px;height:44px;background:#fff;opacity:.5;animation:scrolline 2.4s var(--ease) infinite}
@keyframes scrolline{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------------- Sections ---------------- */
section{position:relative}
/* vertical-only padding so `.band.wrap` keeps its horizontal --pad */
.band{padding-top:clamp(80px,13vh,170px);padding-bottom:clamp(80px,13vh,170px)}
.band--tight{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.band--dark{background:var(--dark);color:#f3f1ea}
.band--alt{background:var(--bg-2)}

.statement{max-width:26ch}
.lead{
  font-size:clamp(24px,3.6vw,50px);font-weight:300;line-height:1.22;letter-spacing:-.015em;
  max-width:20ch
}
.lead--wide{max-width:24ch}
.body-max{max-width:60ch;font-size:clamp(15px,1.25vw,18px);color:var(--ink-soft);line-height:1.75}
.band--dark .body-max{color:#c9c6ba}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vw,64px);flex-wrap:wrap}
.section-head h2{font-size:clamp(13px,1vw,15px);letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.section-head .count{font-size:12px;color:var(--ink-faint);letter-spacing:.18em}

/* ---------------- Works list (featured, editorial) ---------------- */
.works{display:flex;flex-direction:column;gap:clamp(60px,10vh,140px)}
.work{display:grid;grid-template-columns:1fr;gap:0}
.work__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg-2)}
.work__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.work:hover .work__media img{transform:scale(1.04)}
.work__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:20px;flex-wrap:wrap}
.work__title{font-size:clamp(26px,3.6vw,46px);font-weight:300;line-height:1.05;letter-spacing:-.01em}
.work__sub{color:var(--ink-soft);font-size:14px;margin-top:8px;letter-spacing:.02em}
.work__tags{display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.tag{border:1px solid var(--line);border-radius:100px;padding:6px 14px}
.work__idx{font-size:12px;color:var(--ink-faint);letter-spacing:.2em}
/* alternate offset on wide screens */
@media(min-width:900px){
  .work--wide .work__media{aspect-ratio:16/9}
  .work--split{grid-template-columns:1.4fr 1fr;align-items:center;gap:clamp(30px,4vw,64px)}
  .work--split .work__media{aspect-ratio:4/5}
  .work--split .work__meta{flex-direction:column;align-items:flex-start;padding-top:0}
}

/* ---------------- Collections grid ---------------- */
.grid-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px)}
.col-card{display:block;position:relative;overflow:hidden}
.col-card__media{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--bg-2)}
.col-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.col-card:hover .col-card__media img{transform:scale(1.05)}
.col-card__cap{padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.col-card__cap h3{font-size:clamp(17px,1.5vw,22px);font-weight:300}
.col-card__cap .zh-tag{font-size:12px;color:var(--ink-faint);letter-spacing:.12em}
.col-card__st{color:var(--ink-soft);font-size:13px;margin-top:4px;max-width:34ch;line-height:1.5}
@media(max-width:820px){.grid-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid-cols{grid-template-columns:1fr}}

/* ---------------- Studio / founders ---------------- */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.founder__portrait{aspect-ratio:1/1;overflow:hidden;background:var(--dark-soft);max-width:300px}
.founder__portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.founder__name{margin-top:22px;font-size:clamp(22px,2.4vw,32px);font-weight:300}
.founder__role{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.founder__bio{margin-top:18px;max-width:52ch;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.band--dark .founder__bio{color:#c4c1b5}
@media(max-width:760px){.founders{grid-template-columns:1fr;gap:56px}}

.client-list{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:30px}
.client-list span{font-size:13px;letter-spacing:.06em;color:var(--ink-soft);padding:0 18px;border-right:1px solid var(--line)}
.client-list span:last-child{border-right:none}
.band--dark .client-list span{color:#b4b1a5;border-color:#3a3a30}

/* ---------------- Project detail ---------------- */
.pd-hero{height:82vh;min-height:520px;position:relative;overflow:hidden;background:var(--bg-2)}
.pd-hero img{width:100%;height:100%;object-fit:cover}
.pd-head{padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(30px,5vh,60px)}
.pd-title{font-size:clamp(34px,6vw,84px);font-weight:200;line-height:1;letter-spacing:-.02em}
.pd-sub{margin-top:16px;color:var(--ink-soft);font-size:clamp(15px,1.6vw,19px)}
.pd-facts{display:flex;flex-wrap:wrap;gap:40px 60px;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.pd-fact{display:flex;flex-direction:column;gap:7px}
.pd-fact dt{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.pd-fact dd{font-size:16px;font-weight:300}
.pd-statement{font-size:clamp(22px,3.2vw,40px);font-weight:300;line-height:1.25;letter-spacing:-.01em;max-width:22ch;margin:clamp(40px,7vh,90px) 0}
.pd-gallery{display:flex;flex-direction:column;gap:clamp(10px,2.4vw,40px)}
.pd-gallery img{width:100%;cursor:zoom-in;background:var(--bg-2)}
.pd-gallery .pair{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
@media(max-width:700px){.pd-gallery .pair{grid-template-columns:1fr}}
.pd-nav{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:clamp(50px,8vh,110px);padding-top:34px;padding-bottom:clamp(70px,11vh,130px);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pd-nav a:hover{color:var(--ink)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(15,15,11,.96);display:none;align-items:center;justify-content:center;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:92vh;object-fit:contain;cursor:default}
.lb__x{position:absolute;top:22px;right:28px;color:#fff;font-size:30px;font-weight:200;cursor:pointer}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:40px;font-weight:100;cursor:pointer;opacity:.7;padding:20px;user-select:none}
.lb__nav:hover{opacity:1}
.lb__prev{left:6px}.lb__next{right:6px}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact-block h3{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.contact-block p{font-size:clamp(18px,2vw,26px);font-weight:300;line-height:1.5}
.contact-block a:hover{color:var(--accent)}
@media(max-width:700px){.contact-grid{grid-template-columns:1fr;gap:44px}}

/* ---------------- Footer ---------------- */
.foot{background:var(--dark);color:#c9c6ba;padding:clamp(56px,9vh,110px) 0 40px}
.foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot__mark{font-size:clamp(40px,7vw,90px);font-weight:200;letter-spacing:.14em;color:#f3f1ea;text-indent:.14em;line-height:1}
.foot__cols{display:flex;gap:clamp(40px,7vw,100px);flex-wrap:wrap}
.foot__col h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#7d7b70;margin-bottom:16px}
.foot__col a,.foot__col p{display:block;font-size:14px;color:#c9c6ba;margin-bottom:9px;transition:color .3s}
.foot__col a:hover{color:#fff}
.foot__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,8vh,90px);padding-top:26px;border-top:1px solid #33332a;font-size:11.5px;letter-spacing:.1em;color:#75736a}

/* ---------------- Reveal animation ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-stagger]{transition-delay:var(--d,0ms)}

/* ---------------- responsive nav ---------------- */
@media(max-width:860px){
  .nav__left .nav__link,.nav__right .nav__link{display:none}
  .nav__menu-btn{display:flex}
  .nav__left{flex:0}
  .nav__brand{position:absolute;left:50%;transform:translateX(-50%)}
}
@media(max-width:520px){
  .work__title{font-size:30px}
  .pd-facts{gap:26px 40px}
}
/* mobile hero: declutter — one clean image, no cramped scroll cue */
@media(max-width:680px){
  .hero__scroll{display:none}
  .hero__sub{font-size:15px;max-width:34ch}
}

/* hide until JS sets lang to avoid flash of both languages */
[data-i18n],[data-i18n-html]{}
.lang-hidden{display:none !important}

/* ---------------- Logo wordmark ---------------- */
.nav__brand{display:flex;align-items:center;justify-content:center}
.nav__logo{height:19px;width:auto;display:block;transition:filter .5s var(--ease)}
.nav.over-hero .nav__logo{filter:invert(1) brightness(2.2)}
.nav.solid .nav__logo{filter:none}
.hero__logo{width:min(60vw,560px);height:auto;filter:invert(1) brightness(2.2)}
.foot__logo{width:min(34vw,150px);height:auto;filter:invert(1) brightness(2.2)}
@media(max-width:860px){.nav__brand{position:absolute;left:50%;transform:translateX(-50%)}.nav__logo{height:17px}}

/* ---------------- Contact icon rows ---------------- */
.contact-rows{display:flex;flex-direction:column;gap:20px;margin-top:4px}
.contact-row{display:flex;align-items:center;gap:14px;font-size:clamp(17px,1.8vw,22px);font-weight:400}
.contact-row svg{width:24px;height:24px;flex:0 0 24px;stroke:var(--ink);fill:none;stroke-width:1.4}
.contact-row .ci-fill{fill:var(--ink);stroke:none}
.contact-row a:hover,.contact-row:hover{color:var(--accent)}
.contact-row small{color:var(--ink-faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-left:2px}

/* ---------------- readability: firmer running text ---------------- */
body{font-weight:400}
.hero__sub,.body-max,.work__sub,.col-card__st,.founder__bio,.pd-sub,
.contact-block p,.foot__col a,.foot__col p,.client-list span,.pd-fact dd{font-weight:400}
.lead,.pd-title,.pd-statement,.work__title,.foot__mark,
.founder__name,.col-card__cap h3,.section-head h2{font-weight:300}
.hero__mark{font-weight:200}