/* =====================================================================
   TURING · 图灵景观实验室
   Aesthetic: minimal, editorial, warm-bone palette, forest accent.
   ===================================================================== */

:root{
  --bg:        #F1EEE7;
  --bg-2:      #EAE6DC;
  --ink:       #1b1b19;
  --ink-soft:  #6a685f;
  --ink-faint: #a4a196;
  --green:     #3e4a3d;
  --green-2:   #55624f;
  --line:      rgba(27,27,25,.14);
  --line-2:    rgba(27,27,25,.08);

  --f-display: "Jost", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --f-body:    "Inter", "PingFang SC", "Hiragino Sans GB", sans-serif;

  --ease:      cubic-bezier(.19,1,.22,1);
  --ease-2:    cubic-bezier(.62,.05,.01,.99);

  --pad:       clamp(20px, 5vw, 70px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green); color:var(--bg); }

.wrap{ padding-inline:var(--pad); }
.mono{ font-family:var(--f-display); }

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), opacity .3s;
  mix-blend-mode:difference;
}
.cursor.big{ width:64px; height:64px; background:#fff; }
.cursor.hide{ opacity:0; }
.cursor__label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); opacity:0;
  transition:opacity .3s; white-space:nowrap;
}
.cursor.big .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.loader__word{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(38px,9vw,120px); letter-spacing:.12em;
  color:var(--ink); overflow:hidden; display:flex;
}
.loader__word span{ display:inline-block; transform:translateY(110%); }
.loader__bar{
  position:absolute; bottom:var(--pad); left:var(--pad); right:var(--pad);
  height:1px; background:var(--line);
}
.loader__bar i{ display:block; height:100%; width:0; background:var(--ink); }
.loader__count{
  position:absolute; bottom:calc(var(--pad) + 16px); right:var(--pad);
  font-family:var(--f-display); font-size:13px; letter-spacing:.1em; color:var(--ink-soft);
}

/* ---------- Header ---------- */
.head{
  position:fixed; top:0; left:0; width:100%; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad); mix-blend-mode:difference; color:#fff;
  transition:transform .5s var(--ease);
}
.head.up{ transform:translateY(-120%); }
.head a, .head button{ color:#fff; }
.head__l, .head__r{ display:flex; align-items:center; gap:20px; flex:1; }
.head__r{ justify-content:flex-end; }
.head__c{ flex:0 0 auto; }
.menu-btn{
  background:none; border:none; cursor:none; display:flex; align-items:center; gap:11px;
  font-family:var(--f-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.menu-btn .bars{ display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.menu-btn .bars i{ height:1.4px; background:#fff; width:100%; transition:.4s var(--ease); }
.wordmark{
  font-family:var(--f-display); font-weight:300; font-size:22px; letter-spacing:.34em;
  padding-left:.34em;
}
.head__link{
  font-family:var(--f-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  position:relative;
}
.head__link::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:#fff;
  transition:width .4s var(--ease);
}
.head__link:hover::after{ width:100%; }
@media (max-width:720px){ .head__link.hide-sm{ display:none; } .wordmark{ font-size:18px; } }

/* ---------- Overlay menu ---------- */
.nav{
  position:fixed; inset:0; z-index:300; background:var(--green);
  color:var(--bg); display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad); clip-path:inset(0 0 100% 0); pointer-events:none;
}
.nav.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.nav__close{
  position:absolute; top:22px; right:var(--pad); background:none; border:none; cursor:none;
  color:var(--bg); font-family:var(--f-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.nav__list{ list-style:none; }
.nav__list li{ overflow:hidden; }
.nav__list a{
  display:inline-block; font-family:var(--f-display); font-weight:300;
  font-size:clamp(34px,7vw,84px); line-height:1.14; letter-spacing:.01em;
  color:var(--bg); opacity:.55; transition:opacity .4s var(--ease), transform .4s var(--ease);
  transform:translateY(105%);
}
.nav.open .nav__list a{ transform:translateY(0); }
.nav__list a:hover{ opacity:1; padding-left:14px; }
.nav__list a i{ font-family:var(--f-body); font-style:normal; font-size:.32em; opacity:.6; vertical-align:super; margin-left:.4em; letter-spacing:.1em; }
.nav__foot{
  position:absolute; bottom:var(--pad); left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,238,231,.6);
  font-family:var(--f-display);
}

/* ---------- Hero ---------- */
.hero{ position:relative; height:100svh; overflow:hidden; }
.hero__img{ position:absolute; inset:0; will-change:transform; }
.hero__img::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse 62% 52% at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,0) 72%),
  linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.06) 42%,rgba(0,0,0,.42)); }
.hero__mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--bg); text-align:center; width:100%;
}
.hero__mark h1{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(52px,17vw,240px); letter-spacing:.14em; line-height:.9; padding-left:.14em;
  display:flex; justify-content:center; overflow:hidden;
  text-shadow:0 4px 60px rgba(0,0,0,.45);
}
.hero__sub{ text-shadow:0 2px 30px rgba(0,0,0,.5); }
.hero__mark h1 span{ display:inline-block; transform:translateY(110%); }
.hero__sub{
  margin-top:20px; font-family:var(--f-display); font-size:clamp(11px,1.4vw,15px);
  letter-spacing:.42em; text-transform:uppercase; opacity:0;
}
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  color:var(--bg); font-family:var(--f-display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.85;
}
.hero__scroll .ln{ width:1px; height:46px; background:var(--bg); transform-origin:top; animation:scrollln 2.4s var(--ease) infinite; }
@keyframes scrollln{ 0%{transform:scaleY(0);}40%{transform:scaleY(1);}60%{transform:scaleY(1);transform-origin:top;}100%{transform:scaleY(0);transform-origin:bottom;} }

/* ---------- Reveal utilities ---------- */
.reveal-mask{ overflow:hidden; }
.reveal-line{ display:block; transform:translateY(110%); }
.fade-up{ opacity:0; transform:translateY(34px); }
.img-reveal{ overflow:hidden; }
.img-reveal img, .img-reveal .ph{ transform:scale(1.18); will-change:transform; }

/* ---------- Section shells ---------- */
section{ position:relative; }
.eyebrow{
  font-family:var(--f-display); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green-2); display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--green-2); display:inline-block; }

/* ---------- Manifesto ---------- */
.manifesto{ padding:clamp(120px,20vh,240px) var(--pad); }
.manifesto__lead{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(28px,5vw,72px); line-height:1.16; letter-spacing:-.01em; max-width:18ch;
}
.manifesto__lead .accent{ color:var(--green); font-style:italic; }
.manifesto__cols{
  margin-top:clamp(60px,9vw,120px); display:grid; grid-template-columns:repeat(12,1fr);
  gap:30px 40px;
}
.manifesto__cols .cn{ grid-column:1/6; }
.manifesto__cols .en{ grid-column:7/12; }
.manifesto__cols p{ color:var(--ink-soft); font-size:15px; line-height:1.75; }
.manifesto__cols p + p{ margin-top:18px; }
@media (max-width:820px){ .manifesto__cols .cn,.manifesto__cols .en{ grid-column:1/13; } }

/* ---------- Quote band ---------- */
.quote{ padding:clamp(120px,22vh,260px) var(--pad); text-align:center; }
.quote h2{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(22px,3.6vw,50px); line-height:1.28; letter-spacing:.01em; color:var(--green);
  max-width:24ch; margin-inline:auto;
}
.quote .cnq{ margin-top:18px; font-size:clamp(15px,2vw,22px); color:var(--ink-soft); letter-spacing:.06em; }

/* ---------- Works ---------- */
.works__head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
  padding:0 var(--pad) 50px;
}
.works__head h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(30px,5vw,64px); letter-spacing:.01em; }
.works__head .count{ font-family:var(--f-display); font-size:13px; letter-spacing:.16em; color:var(--ink-soft); }

.work{ padding:clamp(60px,9vw,120px) var(--pad); }
.work__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center; }
.work__fig{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.work__fig.tall{ aspect-ratio:4/5; }
.work:nth-child(odd) .work__fig{ grid-column:1/8; }
.work:nth-child(odd) .work__txt{ grid-column:9/13; }
.work:nth-child(even) .work__fig{ grid-column:6/13; order:2; }
.work:nth-child(even) .work__txt{ grid-column:1/5; order:1; }
.work__no{ font-family:var(--f-display); font-size:13px; letter-spacing:.16em; color:var(--ink-faint); }
.work__title{ font-family:var(--f-display); font-weight:300; font-size:clamp(26px,3.4vw,46px); line-height:1.08; margin:14px 0 4px; }
.work__title .en{ display:block; font-size:.5em; letter-spacing:.06em; color:var(--ink-soft); margin-top:10px; }
.work__meta{ margin-top:22px; display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ink-soft); }
.work__meta span{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line-2); padding-top:7px; }
.work__meta span b{ font-weight:300; color:var(--ink); font-family:var(--f-display); letter-spacing:.04em; }
.work__desc{ margin-top:22px; font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:42ch; }
.work__link{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.work__link .arrow{ transition:transform .4s var(--ease); }
.work__link:hover .arrow{ transform:translateX(8px); }
@media (max-width:900px){
  .work:nth-child(odd) .work__fig,.work:nth-child(even) .work__fig{ grid-column:1/13; order:1; }
  .work:nth-child(odd) .work__txt,.work:nth-child(even) .work__txt{ grid-column:1/13; order:2; }
  .work__fig{ aspect-ratio:16/11; }
}

/* ---------- Scattered floating works ---------- */
.scatter{ position:relative; padding:clamp(60px,9vw,120px) var(--pad) clamp(90px,15vw,220px); }
.scatter__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding-bottom:clamp(50px,9vw,120px); }
.scatter__head h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(30px,5vw,64px); letter-spacing:.01em; }
.scatter__head .count{ font-family:var(--f-display); font-size:12.5px; letter-spacing:.13em; color:var(--ink-soft); }
.scatter__stage{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(22px,3vw,42px) clamp(20px,2.4vw,36px); align-items:start; }
.scard{ display:block; cursor:none; align-self:start; will-change:transform,opacity; }
.scard__fig{ position:relative; overflow:hidden; background:var(--bg-2); }
.scard__fig img{ transition:transform 1.1s var(--ease); }
.scard:hover .scard__fig img{ transform:scale(1.05); }
.scard__fig::before{ content:""; position:absolute; inset:0 0 auto 0; height:72px; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,0)); }
.scard__corner{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:space-between;
  padding:13px 15px; font-family:var(--f-display); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.scard__cap{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:14px;
  font-family:var(--f-display); font-size:12.5px; }
.scard__cap .l{ text-transform:uppercase; letter-spacing:.13em; display:inline-flex; align-items:center; gap:8px; transition:color .4s; }
.scard__cap .l em{ font-style:normal; transition:transform .45s var(--ease); }
.scard:hover .scard__cap .l{ color:var(--green); }
.scard:hover .scard__cap .l em{ transform:translate(4px,-4px); }
.scard__cap .r{ color:var(--ink-soft); letter-spacing:.04em; text-align:right; }
@media (max-width:820px){
  .scatter__stage{ grid-template-columns:1fr; gap:46px; }
  .scard{ grid-column:1 / -1 !important; grid-row:auto !important; margin-top:0 !important; transform:none !important; }
  .scard__fig{ aspect-ratio:4 / 3 !important; }
}

/* ---------- Horizontal gallery ---------- */
.strip{ padding:clamp(70px,10vw,130px) 0; overflow:hidden; }
.strip__head{ padding:0 var(--pad) 40px; }
.strip__track{ display:flex; gap:26px; padding-inline:var(--pad); will-change:transform; }
.strip__item{ flex:0 0 auto; width:min(46vw,600px); }
.strip__item.p{ width:min(30vw,380px); }
.strip__fig{ overflow:hidden; aspect-ratio:3/2; margin-bottom:14px; }
.strip__item.p .strip__fig{ aspect-ratio:3/4; }
.strip__cap{ display:flex; justify-content:space-between; font-family:var(--f-display); font-size:12px; letter-spacing:.08em; color:var(--ink-soft); }
.strip.swipe{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.strip.swipe::-webkit-scrollbar{ display:none; }
.strip.swipe .strip__track{ transform:none !important; }
@media (max-width:820px){
  .strip__item{ width:74vw !important; }
  .strip__item.p{ width:58vw !important; }
}

/* ---------- Studio / team ---------- */
.studio{ padding:clamp(120px,16vw,220px) var(--pad); background:var(--bg-2); }
.studio__intro{ display:grid; grid-template-columns:repeat(12,1fr); gap:30px; margin-bottom:clamp(70px,9vw,120px); }
.studio__intro .eyebrow{ grid-column:1/4; }
.studio__intro .reveal-mask{ grid-column:4/13; }
.studio__intro h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(24px,3.6vw,52px); line-height:1.24; letter-spacing:-.01em; }
.studio__intro h2 .accent{ color:var(--green); }
@media (max-width:820px){ .studio__intro .eyebrow{ grid-column:1/13; } .studio__intro .reveal-mask{ grid-column:1/13; } }

.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); }
.member__fig{ overflow:hidden; aspect-ratio:1/1; width:min(280px,60%); margin-bottom:26px; filter:grayscale(1) contrast(1.02); }
.member__name{ font-family:var(--f-display); font-weight:300; font-size:clamp(24px,2.6vw,34px); letter-spacing:.02em; }
.member__name span{ font-size:.42em; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-left:14px; }
.member__role{ font-family:var(--f-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin-top:8px; }
.member__bio{ margin-top:20px; font-size:14px; line-height:1.72; color:var(--ink-soft); max-width:46ch; }
.member__bio p+p{ margin-top:14px; }
@media (max-width:820px){ .team{ grid-template-columns:1fr; gap:70px; } }

.clients{ margin-top:clamp(80px,10vw,140px); }
.clients h3{ font-family:var(--f-display); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:30px; }
.clients__grid{ display:flex; flex-wrap:wrap; gap:14px 36px; }
.clients__grid span{ font-family:var(--f-display); font-size:clamp(15px,1.8vw,22px); color:var(--ink); opacity:.72; }

/* ---------- Index list ---------- */
.index{ padding:clamp(110px,15vw,200px) var(--pad); }
.index__row{
  display:grid; grid-template-columns:60px 1fr auto auto; gap:24px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line); position:relative; overflow:hidden;
}
.index__row:last-child{ border-bottom:1px solid var(--line); }
.index__row .no{ font-family:var(--f-display); font-size:13px; color:var(--ink-faint); }
.index__row .nm{ font-family:var(--f-display); font-weight:300; font-size:clamp(22px,3vw,40px); letter-spacing:.01em; transition:transform .5s var(--ease), color .5s; }
.index__row .nm i{ font-style:normal; font-size:.42em; color:var(--ink-soft); letter-spacing:.1em; margin-left:14px; }
.index__row .yr, .index__row .tp{ font-family:var(--f-display); font-size:13px; letter-spacing:.08em; color:var(--ink-soft); }
.index__row .tp{ text-transform:uppercase; }
.index__hoverimg{
  position:fixed; z-index:80; width:260px; aspect-ratio:4/3; overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.index__row:hover .nm{ color:var(--green); transform:translateX(18px); }
@media (max-width:720px){
  .index__row{ grid-template-columns:36px 1fr; }
  .index__row .yr,.index__row .tp{ display:none; }
  .index__hoverimg{ display:none; }
}

/* ---------- CTA / Footer ---------- */
.cta{ padding:clamp(120px,18vw,240px) var(--pad); text-align:center; }
.cta small{ font-family:var(--f-display); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--green-2); }
.cta h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(38px,8vw,120px); letter-spacing:.02em; line-height:1; margin:26px 0 40px; }
.cta a.mail{ font-family:var(--f-display); font-size:clamp(16px,2.4vw,30px); letter-spacing:.04em; position:relative; }
.cta a.mail::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--ink); transform:scaleX(.0); transform-origin:left; transition:transform .5s var(--ease); }
.cta a.mail:hover::after{ transform:scaleX(1); }

.foot{ padding:60px var(--pad) 34px; border-top:1px solid var(--line); }
.foot__top{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; margin-bottom:60px; }
.foot__col{ display:flex; flex-direction:column; gap:10px; }
.foot__col.a{ grid-column:1/5; } .foot__col.b{ grid-column:6/8; } .foot__col.c{ grid-column:8/10; } .foot__col.d{ grid-column:10/13; }
.foot__col h4{ font-family:var(--f-display); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.foot__col a, .foot__col p{ font-size:14px; color:var(--ink-soft); }
.foot__col a{ position:relative; width:fit-content; }
.foot__col a:hover{ color:var(--ink); }
.foot__col .soon{ font-size:14px; color:var(--ink-faint); }
.foot__col .soon i{ font-style:normal; font-family:var(--f-display); font-size:9px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-radius:3px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.foot__mark{ font-family:var(--f-display); font-weight:300; font-size:clamp(60px,20vw,280px); letter-spacing:.1em; line-height:.9; color:var(--ink); opacity:.9; padding-left:.1em; overflow:hidden; }
.foot__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:30px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--f-display); }
@media (max-width:820px){ .foot__col.a,.foot__col.b,.foot__col.c,.foot__col.d{ grid-column:1/13; } .foot__top{ gap:34px; } }

/* placeholder shimmer for any missing img */
.ph{ width:100%; height:100%; background:linear-gradient(110deg,var(--bg-2),#dcd7cb,var(--bg-2)); }